/*=============================================================
  Filename: UIControls-11.css

  Style Sheet for the JavaScript Virtual Instruments such as
  Spectrum Analyser.

  Date    Description                                       By
  -------|-------------------------------------------------|---
  30Sep07 First draft                                       ARC
  13Aug15 Major upgrade for modern browsers                 ARC
  24Sep15 bugfix: blkTop should have square bottom corners  ARC
  26Sep15 Change LED style                                  ARC
  31Dec15 Add valueLabel and valueReadout support           ARC
  01Jan16 Use box-sizing border-box for ctrlPanel           ARC
  09Apr18 Update to use with console-50.css                 ARC
  22Apr18 Handle latchingRadioBtn rather than leds          ARC
  09May18 Fix undefined blkTitle font                       ARC
  20Jul18 Use darker screen background color #303830        ARC
  28Mar19 Added latchingBtn style for buttonLink            ARC
  28Jun20 Added float:left to valueHolder                   ARC
  15Jan21 Added .arrowBtn to cleanup overuse of buttonLink  ARC
  02Feb21 Updated the radio button properties               ARC
  03Feb21 Use plainBtn for front panel buttonLink style     ARC
  17Feb22 Use box-sizing: border-box for ledBtn             ARC
  09Mar25 Make radio buttons from buttons not inputs        ARC
  07May25 Merge with console-72.css                         ARC
  15May25 Mods to handle the JScontrols.js elements         ARC
  10Jun25 Added a magic 'auto-fit' to buttonHolder          ARC
  17Jul25 Rename buttonHolder/sliderHolder to 'controlGrid' 
          Rename controlsHolder to 'controlPanel'           
          Removed 'height' as RadioButton argument          ARC
  21Jul25 bugfix: switch padding/margin so plainBtn height
          doesn't change when button is selected            ARC
  24Jul25 Added support for select element                  ARC
  17Feb26 Use new names: UIControls, uiPanel, uiGrid        ARC
  25May26 fix tabHolder padding & its RadioButtons margins  ARC
  30May26 Use --columns for uiGrid layout                   ARC
  01Jun26 Add pageTab class eqiv pageTabs radioButtons      ARC
  30Jun26 Refined spinner default dimensions                ARC
 ==============================================================*/

  body {
    margin: 0;
    width: 100%;
    height: 100%;
    text-align: center;  /* this will center console if it has display:inline-block */
  }
  
  canvas {
    display: block;
  }
  
  .consoleHolder{
    position: relative;
    margin: 0 auto;
    width: 100%;         /* just for centering the console using text-align: center */
    text-align: center;  /* this will center console if it has display:inline-block */
  }
  
  .consoleBezel {
    font-size: 15px;
    position: relative;
    display: inline-block;    /* this allows auto width to be centered with text-align: center */
    margin: 1em 0 0 0;
    padding: 6px;
    background-color: #e0e0e0;
    background-image: linear-gradient(to bottom right, #e8e8e8, #e8e8e8 10%, #c8c8c8 90%, #c8c8c8);
    border-width: 1px 2px 2px 1px;
    border-style: solid;
    border-color:#c0c0c0 #b0b0b0 #b0b0b0 #c0c0c0; 
    border-radius: 6px;
    box-shadow: 1px 2px 1px #aaaaaa;
    box-sizing: content-box;
  }
  
  .screenHolder {  /* wraps a canvas (with no class) so respects canvas width,height */
    display: grid;
    position: relative;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    background-color: #eceae8;
    border-width: 3px;
    border-style: solid;
    border-color: #c0c0c0 #e8e8e8 #e8e8e8 #c0c0c0;
    border-radius: 4px;
  }
    
  .screenCvs {    /*  don't use if exact pixel width,height required */
    position: relative;
    margin: 0 auto;
    border: 3px solid;
    border-color: #c0c0c0 #e8e8e8 #e8e8e8 #c0c0c0;
    border-radius: 4px;
    background-color: #303830;
    box-sizing: content-box;  /* ensures layers get correct canvas size */
  }

  .wrapperBorder {
    position: relative;
    margin: 0 auto;
    border: 3px solid;
    border-color: #c0c0c0 #e8e8e8 #e8e8e8 #c0c0c0;
    border-radius: 4px;
    background-color: #eceae8;
    box-sizing: content-box; /* ensures canvas has styled pixel width/height */
  }
    
  .pagedScreen {
    display: grid;
    grid-template-rows: 35px 1fr;
    min-width: 375px;
    min-height: 250px;
    margin: 3px;
    box-sizing: border-box;
    background-color: #e0e0d8;
    border-width: 3px;
    border-style: solid;
    border-color: #c0c0c0 #e8e8e8 #e8e8e8 #c0c0c0;
    border-radius: 4px;
  }

  .tabHolder {
    position: relative;
    padding: 2px 4px 0 4px;
    height: 25px;
    background-color: DarkOliveGreen;
    border-bottom: solid 8px #e0e0d8;
    overflow: visible;
    z-index: 4;
  }
  
  .tabHolder button.pageTab,
  .tabHolder button.radioBtns {
    display: block;
    position: relative;
    float: left;
    width: 100px;
    height: 24px !important;
    margin-top: 1px;
    padding: 1px 5px 4px 5px; 
    box-sizing: border-box;
    border-top: 1px #bbbbbb solid;
    border-left: 1px #bbbbbb solid;
    border-right: 1px #999999 solid;
    border-bottom: 0;
    color: #585858;
    font-family: sans-serif;
    font-size: inherit;
    font-weight: bold;
    text-decoration: none;
    background-color: #a0a0a0;
    text-align: center;
    cursor: pointer;
    user-select: none;
  }
  
  .tabHolder button[data-selected="true"].radioBtns {
    height: 25px;
    background: #e0e0d8;
    border-top: 1px #faf9f5 solid;
    border-left: 1px #faf9f5 solid;
    border-right: 1px #cac9c5 solid;
    border-bottom: 0;
    color: black;
    font-weight: bold;
    padding: 2px 5px 4px 5px;
  }
  
 .pageHolder {
    position: relative;
    background-color: #e0e0d8;
  }

  .pageGrid {
    position: absolute;
    display: grid;
    grid-auto-flow: column;
    width: 98%;
    height: 98%;
    top: 1%;
    left: 1%;
    box-sizing: border-box;
    margin: 0 0 8px 0;
    font-family: Consolas, monospace;
    text-align: left;
    background-color: #e0e0d8;
    z-index: 1;
  }

  .pageContent {
    position: absolute;
    width: 98%;
    height: 98%;
    top: 1%;
    left: 1%;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    border: 3px solid;
    border-color: #c0c0c0 #e8e8e8 #e8e8e8 #c0c0c0;
    border-radius: 4px;
    background-color: #303830;
    font-family: Consolas, monospace;
    text-align: left;
    z-index: 1;
  }

  /* First page defines the container size */
  .pageContent:first-child,
  .pageGrid:first-child {
    position: relative;
    z-index: 0;
  }

  .uiGrid {
    display: grid;
    grid-template-columns: repeat(var(--columns, auto-fit), minmax(3em, 1fr));
    grid-auto-columns: 1fr;
    grid-column-gap: 1.5ex;
    grid-row-gap: 8px;
    place-items: center;
    padding: 5px 8px 3px 8px;
    box-sizing: border-box;
  }

  .uiPanel {
    display: block;
    position: relative;
  }

  textarea {
    border: none;
    outline: none;
    box-shadow: none;
    box-sizing: border-box;
    resize: none;
  }

  textarea:focus, input:focus, button:focus {
    outline: none;
  }

  textarea.listing {
    font-family: Consolas, monospace;
    font-size: 13px;
    line-height: 17px;
    text-align: left;
    border: 2px solid;
    border-color: #c0c0c0 #e8e8e8 #e8e8e8 #c0c0c0;
    background-color: white;
  }

  button.ledBtn {
    box-sizing: border-box;
    display: block;
    width: 3.5em;
    height: 1.55em;
    text-align: center;
    font-family: Consolas, monospace;
    font-size: 1em;
    font-weight: bold;
    line-height: 1.2em; 
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    padding: 0;
    background: #f0fafb;
    color: #000;
    border-radius: 2px;
    border: solid 1px #888888;
    border-top-color: #ccc; 
    box-shadow: inset 1px 2px 0px rgba(255, 255, 255, 0.3), inset -1px -2px 1px rgba(100, 100, 100, 0.2);
  }
  
  button[data-selected='true'].ledBtn,
  button.ledBtn:active {
    padding: 1px 0 0 1px; 
    color: #222;
    text-shadow: 0 0 1px rgba(50, 150, 50, 0.4);
    box-shadow: inset 1px 1px 0px rgba(50, 150, 50, 0.2);
    background-color: #ee8;
    background-image: radial-gradient(circle at 45% 45%, #fafde0 10%, transparent 30%, #e0e080 90%); 
    border: solid 1px #cc8;
    border-top-color: #aa4;
  }
  
  .ledBtn.small {
    clear: left;
    float: left;
    width: 1.25em !important;
    height: 1.27em !important;
  }
  
  .plainBtn {
    box-sizing: border-box;
    display: block;
    width: min(10em, 85%);
    height: 1.7em;
    text-align: center;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 1em;
    font-weight: bold;
    line-height: 1.5em;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    margin: 0;
    padding: 0 1px 1px 0;  /*  so height doesn't change when selected */
    background: #c4c4c4;
    color: #404040;
    border-radius: 3px;
    border: solid 1px #888888;
    text-shadow: 0px 1px 0 rgba(255, 255, 255, 0.4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.4);
  }
  
  .plainBtn:disabled {
    color: #909090;
  }

  .plainBtn:hover:disabled {
    color: #909090;
  }

  .plainBtn:hover {
    background: #b4b4b4;
    border: solid 1px #808080;
    text-decoration: none;
  }
  
  button[data-selected="true"].plainBtn,
  button:active.plainBtn {
    padding: 1px 0 0 1px;
    margin: 0;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
    background: #a4a4a4;
    border: solid 1px #787878;
    text-shadow: none; 
  }
  
  button:hover.plainBtn {
    background: #b4b4b4;
    border: solid 1px #808080;
    text-decoration: none;
  }
    
  button.arrowBtn.lft.plainBtn {
    position: relative;
    width: 1.4em;
    height: 1.5em;
    background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAkUlEQVR4nO3VPQrCUBDE8d8hEm30MhZprfQwCuY8pvIiegoFPw6hBFKEB3a7WJiBbee/zJvlMSlBK9xwwTLavMYD72H20YDjyLyfJtJ8XZj3sDBVuI/MX5hHArpi+01mNKfM1jwxiwS0xfZbwTpkA+ohlrSI0h/5W03Do6qyD+1nUTXZrdpJ+nCuOGORAfBf+gCwkkJfXRWU8AAAAABJRU5ErkJggg==");
    background-size: 1.6em 1.4em;     
    background-repeat: no-repeat; 
    background-position: center;  
  }

  button.arrowBtn.rgt.plainBtn {
    position: relative;
    width: 1.4em;
    height: 1.5em;
    background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAi0lEQVR4nO3UsQ3CQAxG4W8IDioYBiRaGsI0yUBcxSIwBUgIhiCKlCK6+lxE4Ulu/WSf/+NPJXZ44IWDAFr8xvog1RYcJ4KhsgCuhaSpLVjhPRF8saktORVT3ASQo1eVxksKvaqmmKKblSBFryhHPvKlaD6ELzRo68jVnGf12bXRwdrijif2tZtbNj1VWEJkNUOldAAAAABJRU5ErkJggg==");
    background-size: 1.6em 1.4em;     
    background-repeat: no-repeat; 
    background-position: center;  
  }

  button.arrowBtn.dn.plainBtn {
    position: relative;
    width: 1.4em;
    height: 1.5em;
    background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAlklEQVR4nO2PvQ2DMBBG3wopXIZhKKAhJdOQsAcjwC4oSyRIYQkjJBeWZV/4iVLdk677vrt3oCjK38mAO1Ac6JZAA1yl0BOwbnrAbFi8ZgavN0rhtxdcZwZqIV+7jN95SQdy4BMUrDM0grUvlO992QbfxKxjEl+pgCmyKHX4EBegE5bvtk5xC745ZZ3CAC3w+JW1orCJBcEfQjhF/QEaAAAAAElFTkSuQmCC");
    background-size: 1.3em 1.6em;     
    background-repeat: no-repeat; 
    background-position: center;  
  }

  button.arrowBtn.up.plainBtn {
    position: relative;
    width: 1.4em;
    height: 1.5em;
    background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAq0lEQVR4nO2RMQrCQBBFH+kkXe6QQ4hNziNpcgsre2+hjV7AO4iBnCC2plBjwsIElmUnREyl++DDMvyZ+bsLgcDPkYhmZwFsgSfwkLOpzcISuACdowrIvk29AV6e4YPewA6IPx2+Aq6egWeRWy+lZ1Jq876tM+AOFEAkKqRme9opf3NQUqceb6rcZj+24GYZGyu1xnCbxuqrxxbksuSopNYw3pP0rlVXIPCn9LBuQmqAds4CAAAAAElFTkSuQmCC");
    background-size: 1.3em 1.6em;     
    background-repeat: no-repeat; 
    background-position: center;  
  }

  button:active.arrowBtn.plainBtn {
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
    background-position-x: 1px;
    background-position-y: -1px;
    border: solid 1px #787878;
  }

  .spinner {
    display: grid;
    grid-template-columns: 1fr 1em;
    grid-template-rows: 1fr 1fr; 
    position: relative;  
    font-size: inherit;
    line-height: 1.3em;
    font-family: Consolas, sans-serif;
    width: 8em;
    height: 1.15em;
    padding: 0;
    margin: 0;
    border-width: 2px;
    border-style: solid;
    border-color: #c0c0c0 #e8e8e8 #e8e8e8 #c0c0c0;
    border-radius: 3px;
    background-color:#aaaaaa;
  }
  
  .spinner input {
    grid-row-start: 1; 
    grid-row-end: 3; 
    box-sizing: border-box;
    padding: 0 0.3em 0.1em 0.3em;
    margin: 0;
    height: 100%;
    width: 100%;
    border: none;
    background-color: white;
    font-family: Consolas, monospace;
    font-size: inherit;
    text-align: right;
  }
  
  .spinner button {
    position: relative;
    box-sizing: border-box; 
    margin: 0;
    padding: 0;
    font-size: inherit;
    vertical-align: top;
    background-color: #c4c4c4;
    text-indent: -999px;
    overflow: hidden;
    border-width: 1px;
    border-radius: 2px;
    border-top: 1px solid #aaa;
    border-left: 1px solid #aaa;
    border-right: 1px solid #777;
    border-bottom: 1px solid #777;
    outline: none;
  }
  
  .spinner button:hover {
    background-color: #b4b4b4;
  }
  
  .spinner button:active {
    margin: 0px 0 0 1px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4); 
    background-color: #a4a4a4;
    border: 0; 
    text-shadow: none;
  }
  
  .spinner .buttonInc {
    background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAq0lEQVR4nO2RMQrCQBBFH+kkXe6QQ4hNziNpcgsre2+hjV7AO4iBnCC2plBjwsIElmUnREyl++DDMvyZ+bsLgcDPkYhmZwFsgSfwkLOpzcISuACdowrIvk29AV6e4YPewA6IPx2+Aq6egWeRWy+lZ1Jq876tM+AOFEAkKqRme9opf3NQUqceb6rcZj+24GYZGyu1xnCbxuqrxxbksuSopNYw3pP0rlVXIPCn9LBuQmqAds4CAAAAAElFTkSuQmCC');
    background-size: 0.7em 1em; 
    background-position-x: 50%;
    background-position-y: 50%;
    background-repeat: no-repeat; 
  }
  
  .spinner .buttonDec {
    background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAlklEQVR4nO2PvQ2DMBBG3wopXIZhKKAhJdOQsAcjwC4oSyRIYQkjJBeWZV/4iVLdk677vrt3oCjK38mAO1Ac6JZAA1yl0BOwbnrAbFi8ZgavN0rhtxdcZwZqIV+7jN95SQdy4BMUrDM0grUvlO992QbfxKxjEl+pgCmyKHX4EBegE5bvtk5xC745ZZ3CAC3w+JW1orCJBcEfQjhF/QEaAAAAAElFTkSuQmCC');
    background-size: 0.7em 1em; 
    background-position-x: 50%;
    background-position-y: 60%;
    background-repeat: no-repeat; 
  }

  .spinnerLabel {
    font-family: Consolas, monospace;
    font-size: 12px;
    line-height: 1.6em;
    text-align: left;
  }
  
  .knob {
    position: relative;
    font-size: 83%;
    margin: 0;
    width: 7.5em;
    height: 7.5em;
    padding: 0.5em;
    z-index: 0;
  }

  .knob .knobFace {
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
    border-radius: 50%;
    background: linear-gradient(-45deg, #c4c4c4, #d4d4d4);
    box-shadow:
      -0.07em -0.07em 0.1em rgba(100,100,100,0.8) inset,
      0.07em 0.07em 0.1em rgba(255,255,255,0.8) inset;
  }

  .knob .knobFace:after {
    content: "";
    position: absolute;
    top: -0.35em; right: -0.3em; bottom: -0.3em; left: -0.35em;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(-45deg, #f0eeeb, #706e6a);
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    box-shadow:
      0.16em 0.16em 0.2em rgba(100,100,100,0.4),
      -0.04em -0.04em 0.1em rgba(100,100,100,0.4),
      -0.07em -0.07em 0.1em rgba(80,80,80,0.8) inset,
      -0.07em 0.07em 0.1em rgba(255,255,255,0.8) inset,
      0.07em -0.07em 0.1em rgba(255,255,255,0.8) inset,
      0.07em 0.07em 0.3em rgba(255,255,255,1.0) inset;
  }

  .knob .knobDent {
    width: 33.3%;
    height: 33.3%;
    position: absolute;
    top: 2.7em;
    left: 0.8em;
    display: block;
    border-radius: 50%;
    background: linear-gradient(-45deg, #e0e0de, #c0c0be);
    box-shadow:
      0.3em -0.3em 0.5em rgba(180,180,176,0.8) inset,
      -0.3em 0.3em 0.5em rgba(180,180,180,0.3) inset,
      0.3em 0.3em 0.7em rgba(120,120,120,0.5) inset,
      -0.3em -0.3em 0.7em rgba(255,255,247,0.8) inset;
  }

  .valueLabel {
    display: block;
    position: relative;
    font-family: Consolas, monospace;
    font-size: 12px;
    line-height: 1.6em;
    text-align: left;
    margin: 0;
  }

  .valueReadout {
    display:block;
    position: relative;
    width: 4em;
    height: 1.3em;
    text-align: right;
    font-size: 17px;      
    font-family: Consolas, monospace;
    line-height: 1.3em;
    padding: 0 0.3em 0 0;
    border-width: 2px;
    border-style: solid;
    border-color: #c0c0c0 #e8e8e8 #e8e8e8 #c0c0c0;
    margin: 0 0 0.5em 0;
    background-color: white;
  }

  .valueReadout:disabled {
    background-color:  #eceae8;
  }

  .sliderRecess {  /* sliderHolder parent must have width >= 10em */
    display: grid;
    grid-auto-flow: row;
    place-items: center;
    padding: 0 2px;
    margin: 0.6ex;
    background-color: #bdbdbd;
    border-top: 1px #888888 solid;
    border-bottom: 1px #e0e0e0 solid;
    border-right: 1px #e0e0e0 solid;
    border-radius: 4px;
  }
  
  .sliderLabel {
    display: block;
    background-color: #c0c0c0;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 11px;
    line-height: 1em;
    text-align: center;
    width: 95%;
    padding: 0;
    margin: 0 auto;
  }
  
  input[type="range"].slider {
    box-sizing: border-box;
    appearance: none;
    width: 95%;
    height: 1.4em;
    margin: 1px auto 2px auto;
    border: none;
    padding: 0;
    outline: none; /* no focus outline */
    background-color: transparent;
    accent-color: #404040; /* Standard property for slider track color */
  }
  
  /* Track styling */
  input[type="range"].slider::-webkit-slider-runnable-track {
    background: #404040;
    height: 5px;
    border-radius: 2px;
    box-shadow: inset 1px 1px 1px #a0a0a0, inset -1px -1px 1px #f0f0f0;
  }
  
  input[type="range"].slider::-moz-range-track {
    background: #404040;
    height: 5px;
    border-radius: 2px;
    box-shadow: inset 1px 1px 1px #a0a0a0, inset -1px -1px 1px #f0f0f0;
  }
  
  /* Thumb styling */
  input[type="range"].slider::-webkit-slider-thumb {
    appearance: none; /* Remove default styling */
    width: 30px;
    height: 13px;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    border-radius: 3px;
    background-image: linear-gradient(to bottom, #eeeeee 0, #cccccc 100%);
    cursor: pointer;
    margin-top: -4px; /* Adjust thumb position vertically */
  }
  
  input[type="range"].slider::-moz-range-thumb {
    appearance: none; /* Remove default styling */
    width: 30px;
    height: 13px;
    border-radius: 3px;
    background-image: linear-gradient(to bottom, #eeeeee 0, #cccccc 100%);
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    cursor: pointer;
  }
  
  /* Remove focus outline */
  input[type="range"].slider:focus {
    outline: none;
  }
  /* Label alignment */
  .sliderLabel {
    display: flex;
    align-items: center;
    text-align: center;
  }
  
  .sliderLabel span {
    flex: 1; /* Ensure spans take equal space */
    text-align: center; /* Default to center-align */
  }
  
  /* Special case: Single child, center it */
  .sliderLabel:only-child,
  .sliderLabel:has(:only-child) {
    justify-content: center; /* Center align for a single span */
  }
  
  /* For two children: left and right align */
  .sliderLabel span:first-child:nth-last-child(2) {
    text-align: left; /* Align the first span to the left */
  }
  
  .sliderLabel span:last-child:nth-child(2) {
    text-align: right; /* Align the second span to the right */
  }
  
  /* For three children: left, center, right align */
  .sliderLabel span:first-child:nth-last-child(3) {
    text-align: left; /* Align the first span to the left */
  }
  
  .sliderLabel span:nth-child(2):nth-last-child(2) {
    text-align: center; /* Center-align the middle span */
  }
  
  .sliderLabel span:last-child:nth-child(3) {
    text-align: right; /* Align the last span to the right */
  }  

  .optionReadout {
    width: 100%;
    padding: 0.1em 0 0.1em 0.5em;
    margin: 0;
    font-size: 15px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    background: white;
    box-sizing: border-box;
    border-width: 2px;
    border-style: solid;
    border-radius: 4px;
    border-color: #c0c0c0 #e8e8e8 #e8e8e8 #c0c0c0;
  }

  .dropdown-options {
    position: absolute;
    box-sizing: border-box;
    top: 100%;
    left: 0;
    width: 100%;
    margin: 0 !important;
    padding: 0;
    font-size: 15px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    text-align: center;
    list-style: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: none; /* Hidden by default */
    z-index: 10;
  }

  .dropdown-options li {
    padding: 3px;
    margin: 0 !important;
    font-size: inherit;
    border: 1px solid #aaa;
    cursor: pointer;
  }

  .dropdown-options li:hover {
    background: #ddd;
  }

  .dropdown-options li[data-selected="true"] {
    background: #e0e0e0;
  }

  .dropdown-open .dropdown-options {
    display: block; /* Show when open */
  }