#output {
  height: 35rem; /* Fixed height for the text box */
  overflow-y: scroll; /* Enable vertical scrolling */
  background-color: black; /* Black background */
  color: white; /* Default text color */
  white-space: pre-wrap; /* Preserve whitespace and wrap text */
  padding: 1rem; /* Padding inside the output box */
  border: 1px solid #ced4da; /* Border color matching Bootstrap's default */
  scroll-behavior: smooth; /* Smooth scrolling */
  font-family: monospace; /* Monospaced font */
}
.data-sent-prefix, .data-received-prefix {
  color: #2e95d3; /* Blue text for prefixes */
}
.data-sent-content, .data-received-content {
  color: white; /* White text for actual data */
}
.connection-message {
  color: #00a67d; /* Green text for connection messages */
}
.error {
  color: #f22c3d; /* Red text for errors */
}
.sidebar {
  height: 100vh; /* Full height */
  position: fixed; /* Fixed position */
  z-index: 1000; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 20px;
  background-color: #f8f9fa; /* Bootstrap light background color */
  border-right: 1px solid #ced4da;
}
.sidebar a {
  padding: 10px 15px;
  font-size: 18px;
  color: #333;
  display: block;
}
.sidebar a:hover {
  color: #007bff;
}
.sidebar-title {
  padding: 10px 15px;
  font-size: 24px;
  font-weight: bold;
  color: #333;
}
.main-content {
  margin-left: 250px; /* Same width as the sidebar */
  padding: 20px;
}
fieldset.dfu-border {
    border: 1px groove #ddd;
    padding: 0 1.4em 1.4em 1.4em;
    margin: 0 0 1.5em 0;
    -webkit-box-shadow:  0px 0px 0px 0px #000;
            box-shadow:  0px 0px 0px 0px #000;
}
legend.dfu-border {
    font-size: 1.2em;
    font-weight: bold;
    text-align: left;
	width: inherit;
    padding: 0 10px;
    border-bottom: none;
}