.header {
  background: #000;
  color: #fff;
}

body {
  background-color: #fff;
  color: #000;
}

.main {
  overflow-x: hidden;
  overflow-y: auto;
  padding-top: 80px;
  background-color: #fff;
}

input, select, button {
  background-color: #fff;
  color: #000;
}

.disconnect-icon {
    color: #FC9999; /* Light red color for disconnect icon */
}

.green-icon {
    color: #B3FFCC;
}

.red-icon {
    color: #FC9999;
}

.subheader {
  height: 46px;
  line-height: 46px;
  padding-left: 70px;
  padding-right: 70px;
  color: #000;
}

.subheader a {
  text-decoration: none; /* Removes the underline */
  color: inherit; /* Inherits the text color from the subheader */
  background-color: transparent; /* No background color by default */
  padding: 2px 10px; /* Adjust horizontal padding for oval width */
  margin-right: -15px; /* Spacing between items */
  border: none; /* No borders */
  cursor: pointer; /* Changes the cursor to indicate clickability */
  display: inline-block; /* Aligns items in line */
  transition: background-color 0.3s, border-radius 0.3s; /* Smooth transitions */
  border-radius: 0; /* No rounded corners initially */
  line-height: 26px; /* Adjust line height to control the total height including padding */
}

.subheader a:hover {
  background-color: #444; /* Dark gray background on hover */
  border-radius: 23px; /* Adjusted border-radius for a perfect oval */
}

.subheader .title {
  font-size: 24px;
  font-weight: 500;
}

.subheaderD {
  height: 50px;
  line-height: 45px;
  padding-left: 70px;
  padding-right: 70px;
  color: black
}

.subheaderD a {
  text-decoration: none; /* Removes the underline */
  color: inherit; /* Inherits the text color from the subheader */
  background-color: transparent; /* No background color by default */
  padding: 2px 10px; /* Adjust horizontal padding for oval width */
  margin-right: -15px; /* Spacing between items */
  border: none; /* No borders */
  cursor: pointer; /* Changes the cursor to indicate clickability */
  display: inline-block; /* Aligns items in line */
  transition: background-color 0.3s, border-radius 0.3s; /* Smooth transitions */
  border-radius: 0; /* No rounded corners initially */
  line-height: 26px; /* Adjust line height to control the total height including padding */
}

.subheaderD a:hover {
  background-color: #444; /* Dark gray background on hover */
  border-radius: 23px; /* Adjusted border-radius for a perfect oval */
}

.subheaderD .title {
  font-size: 24px;
  font-weight: 500;
}

#app #commands a {
  text-decoration: none; /* Removes the underline from the links */
  color: #000; /* Sets the text color to white */
  background-color: transparent; /* No background color by default */
  padding: 2px 10px; /* Padding around the text */
  margin-right: -15px; /* Negative margin to pull elements closer together */
  border: none; /* No borders around the links */
  cursor: pointer; /* Cursor changes to pointer to indicate clickable items */
  display: inline-block; /* Allows elements to sit next to each other */
  transition: background-color 0.3s, border-radius 0.3s; /* Smooth transition for hover effects */
  border-radius: 0; /* Initially no rounded corners */
  line-height: 26px; /* Sets the line height to ensure proper spacing */
}

#app #commands a:hover {
  background-color: #444; /* Dark gray background on hover */
  border-radius: 23px; /* Rounded corners to create an oval shape */
  color: #fff;
}


.notSupported, .notSupported a {
  background-color: red;
  color: white;
}

.footer button {
  border-color: #63338f;
  background-color: #fff;
  color: #63338f;
}

.footer button:hover {
  background-color: #63338f;
  color: #fff;
}

.footer {
    display: flex;
    justify-content: space-between;  /* Maintains space between the three main divs */
    align-items: center;  /* Aligns items vertically in the center */
    padding: 20px 70px;  /* Add padding on the sides of the footer */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 35px;
    background-color: #fff;
    color: #000;
}

.footer a {
  color: #444;
}

.remix button {
  border-color: #333;
  color: #333;
}

.remix button:hover {
  background-color: #333;
}

.firmware {
  border-color: #63338f;
  color: #63338f;
}

.firmware:focus,
.firmware:hover {
  background-color: #63338f;
  color: #fff;
}

.firmware:disabled {
  background-color: #ddd;
  color: #888;
}

.firmware:disabled:hover {
  background-color: #ddd;
}



.progress-bar {
  border-color: #333;
}

.subheader a {
  text-decoration: none; /* Removes the underline */
  color: black; /* Inherits the text color from the subheader */
  background-color: transparent; /* No background color by default */
  padding: 2px 10px; /* Adjust horizontal padding for oval width */
  margin-right: -15px; /* Spacing between items */
  border: none; /* No borders */
  cursor: pointer; /* Changes the cursor to indicate clickability */
  display: inline-block; /* Aligns items in line */
  transition: background-color 0.3s, border-radius 0.3s; /* Smooth transitions */
  border-radius: 0; /* No rounded corners initially */
  line-height: 26px; /* Adjust line height to control the total height including padding */
}

.subheader a:hover {
  background-color: #444; /* Dark gray background on hover */
  border-radius: 23px; /* Adjusted border-radius for a perfect oval */
  color: white;
}