html, body {
    width:  100%;
    height: 100%;
    margin: 0px;
}

body {
    background-color: lightgrey;
}

#waterfall {
    display: block;
    width: 100%;
    height: 50%;
}

#stat_table {
    table-layout: fixed;
    width: 100%;
}

#stat_table td {
    width: 33.33%;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#stat_table td:first-child { width: 40%; }
#stat_table td:nth-child(2) { width: 20%; }
#stat_table td:last-child { width: 40%; }

h4#heading {
    margin: 0;
    padding: 0;
    line-height: 1.2; /* Adjust this value as needed */
}

#optionsDialog {
  display: none;
  position: absolute;
  width: auto;
  max-width: 600px;
  padding: 2px 5px 5px 5px; /* Top padding reduced to 2px, others remain 5px */
  background-color: #efefef; /* Slightly lighter for subtle contrast against page background */
  border: 2px solid #ccc;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  font-size: 14px;
}

#optionsDialog.open {
  display: block;
}

#optionsDialog input[type="checkbox"] {
  margin: 0 5px 0 0; /* Remove vertical margins and add small horizontal spacing */
}

#optionsDialog label {
  margin: 0; /* Remove margins around labels */
}

#optionsDialog menu {
  margin: 5px 0 0 0; /* Add minimal spacing above the close button */
  padding: 0; /* Remove padding inside the menu */
  display: flex;
  justify-content: flex-end; /* Align the close button to the right */
}

#optionsDialog button {
  padding: 5px 10px; /* Reduce padding inside the button */
  margin: 0; /* Remove margins around the button */
}

#dialogOverlay {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 500; /* Ensure the overlay is behind the main content */
  /*background-color: rgba(0, 0, 0, 0.5); Optional: Add a semi-transparent background */
  pointer-events: none; /* Make the overlay non-interactive */
}

#dialogOverlay.open {
  display: block;
}

#closeXButton:hover {
  color: red; /* Optional: Change color on hover */
}

#pwr_data {
  width: 10ch; /* Enough for values like "-123.4" */
  text-align: left; /* Align text to the right for better readability */
  display: inline-block; /* Prevent the width from shrinking */
}

#pwr_units {
  width: 11ch; /* Enough for units like "dBm" */
  text-align: left;
  display: inline-block;
}

#s_data {
  width: 6ch; /* Enough for values like "S9+60" */
  text-align: left;
  display: inline-block;
}

#snr_data {
  width: 9ch;
  text-align: left;
  display: inline-block;
}

#snr_units {
  width: 10ch; /* Enough for units like "dB | Signal:" */
  text-align: left;
  display: inline-block;
}

/* Remove browser default focus ring on the waterfall canvas (keyboard focus)
   Keeping this hidden avoids the white outline shown when the canvas receives
   keyboard focus via the Space key or Tab. If you want an accessible
   indicator instead, replace with a subtle outline in :focus-visible. */
#waterfall:focus, #waterfall:focus-visible {
  outline: none;
}