/* Dark mode -- handle dark mode completely in this file */
/* add a call to this stylesheet AFTER the regular (light) one */

/* manual mode -- uncomment the next line if you don't add all the switcher logic in -footer, Settings and -top */
/* @media (prefers-color-scheme:dark) { /* If the dark scheme is specifically requested: */

  :root {
    color-scheme: dark;
    --main-bg-color: black;
    --alt-bg-color:  dimgray;
    --main-fg-color: lightgray;
    --main-anchor-color: lightblue;
    --hover-anchor-color: lightyellow;
    --visited-anchor-color: fuchsia;
  }
  body{
    background-color: var(--main-bg-color) ;
    color: var(--main-fg-color);
  }

  a {color: var(--main-anchor-color) ; }
  a:visited {color:var(--visited-anchor-color) ; }
  a:hover {color:var(--hover-anchor-color); }
  .toplinkscell a { color: var(--main-anchor-color) ; }
  .toplinkscell a:visited { color: var(--visited-anchor-color) ; }
  .toplinkscell aLhover { color: var(--hover-anchor-color) ; }

  a.alertlink {color: var(--main-anchor-color);}
  a.alertlink:visited {var(--visited-anchor-color) ; }
  a.alertlink:hover {color: var(--hover-anchor-color) ; }

  h1{ color: var(--main-fg-color) ; }
  
  h3 { color: var(--main-fg-color) ; }

  .arrowup, .arrowdown {font-size: 100%; font-weight:900;}
  .arrowup { color: lime; }
  .arrowdown { color: red; }

  /*darkmodefor form switching */
  #darkmodeform input#dark:checked {
    cursor: not-allowed;
    opacity: 75%;
  }
  #darkmodeform input#system:checked{
    cursor: not-allowed;
    opacity: 75%;
  }
  /* hack to insert a light background behind transparent thermometer and compass*/
  td#thermometercontainer {
    background-color: gray; 
    background-image: linear-gradient(147deg, lightgray 0%, gray 100%) ;
    border-radius: 20px;
  }
  
  td#windicbox {
    /* background-color:lightgray; */
    background-color: #f5f5f5;
    background-image: linear-gradient(147deg, #f5f5f5 0%, #8c92ac 100%);
    border-radius: 37px;
    width: 74px;
  }
  /* metal effect cite: cite: https://www.eggradients.com/gradient/moon-spot*/
  /* end of hack */

  /* Weather advisories and alerts pages */
  .alerttable {
    background-color: var(--alt-bg-color);
    border-color: var(--main-fg-color) ; 
  }

  #container {
    background-image: unset;
    background-color: #333;
    max-width: 360px;
  }

  .wwamap-legend-color-swatch{
      border-color: var(--main-fg-color) ;
  } 

  #infobox { color:#777; }

  #footer {
    border-color: #ccc;
    background-color:#333;
  }

  .ajaxDashboard .datahead {
    color:white;
    background-color:#112637;
  }

  .ajaxDashboard .datahead2{
    color:white;
    background-color:#112637;
    border-color: white;
  }

  /* watchBox not found in anything but css files. Re-enable if needed. 
  .watchBox {
    color: white;
    background-color: #0000A1;
    border-color: rgb(34,70,79);
  }

  .watchBox a { color: white; }
  .watchBox a:hover {
    color: white;
    background-color: inherit;
  }
*/

  /* advisoryBox is only in wxadvisory.php and wxflyer.php
  .advisoryBoxnoactive {
    color: lightgray;
    background-color: #007FFF;
    border-color: 1px solid rgb(34,70,79);
  }

  .advisoryBox {
    color: lightgray;
    background-color: #DCDCDC;
    border-color: rgb(34,70,79);
  }
  .advisoryBox a { color: black; }
  .advisoryBox a:hover {
    color: lightgray;
    background-color: inherit;
  }
*/
  .warningBox {
    color: var(--main-fg-color) ;
    background-color: #FFFF00;
    border-color: white;
  }
  .warningBox a { color: black; }
  .warningBox a:hover {
    color: var(--main-fg-color) ;
    background-color: inherit;
  }

  /* only appears in CSS files?
  .tornadowarningBox {
    color: white;
    background-color: #CC0000;
    border-color: rgb(255,255,255);
  }
  .tornadowarningBox a { color: white; }
  .tornadowarningBox a:hover {
    color: white;
    background-color: inherit;
  }
  */

/* manual mode -- uncomment the next line if you don't add all the switcher logic in -footer, Settings and -top */
* } /* end dark mode */