:root {  
      background: var(--color-base);
      color: var(--color-text);
      font: 14px Sans-Serif;
      --color-base: white;
      --color-alt: whitesmoke;
      --color-brand: #333;
      --color-text: black;
      --color-text-invert: white;
      --color-text-link: royalblue;
      --color-border: lightgray;
      --color-hover: lightgray;
      --color-base-translucent: rgba(255,255,255,0.85);
   }
   @media (prefers-color-scheme: dark) {
      :root {
         --color-base: black;
         --color-alt: #171717;
         --color-brand: #333;
         --color-text: #bababa;
         --color-text-invert: white;
         --color-text-link: cornflowerblue;
         --color-border: #444;
         --color-hover: #444;
         --color-base-translucent: rgba(0,0,0,0.85);
      }
   }

   /**********************************************/
   /* left and right boxes of the header section */
   /**********************************************/
   .rl-box-bar { display: flex; justify-content: space-between; align-items: stretch; width: 100%; gap: 10px; }
   #lbox { display: inline-flex; white-space: nowrap; border: 2px solid var(--color-border); border-radius: 5px; padding: 3px 8px 5px 8px; box-sizing: border-box; margin-left: 0 !important; }
   #upperright { display: inline-flex; justify-content: flex-end; white-space: nowrap; padding: 0; margin-right: 0 !important; }
   #upperrightbold { font-weight: bold; }
   .tableboxkey { display: inline-table; border-collapse: collapse; line-height: 1; margin: 0 !important; }
   .trboxes { background: var(--color-base); }
   .tdleft, .tdrightbox, .tdrightbox2 { padding-top: 0; padding-bottom: 0; vertical-align: top; }
   .tdleft { padding-right: 0px; text-align: left; }
   .tdleft:first-child { padding-left: 0 !important; }
   .tdrightbox { padding-right: 0; text-align: right; }
   .tdrightbox2 { padding: 0; line-height: 1.2; height: 1.2em; text-align: right; padding-right: 10px; }  


   #key { color:var(--color-text-link); }
   #main { width:fit-content; min-width:375px; }
   #home { font-size:16px; margin-left:auto; }
   #topright { float:right; padding-right:15px; }
   #toprightbold { float:right; padding-right:15px; font-weight:bold; }
   #error { margin-left:15px; margin-bottom: 10px; margin-top:50px; width:fit-content; display: block; justify-content:start; border-width:2px 2px; border-style:solid; border-color:var(--color-border); border-radius: 5px; padding-top: 8px; padding-bottom: 8px; padding-left: 8px; padding-right: 8px; }
   #tableheaderright { verticle-align:middle; float:right; padding-left:5px; padding-right:15px; padding-top:32px; padding-bottom:0px; }
   #menu_title { font-size:16px; }
   #arrow { color:var(--color-text-invert); }
   #vpadding { padding-bottom:5px; }
   #divhead { max-width: 700px; }
   #th_one { border: 0px solid #333; border-radius: 5px 5px 0px 0px; position:-webkit-sticky /*Safari*/; position:sticky; top:0; font-weight:400; font-size:16px; background:var(--color-brand); color:var(--color-text-invert); text-align:left; vertical-align:bottom; }   
   dl { width:fit-content; min-width:375px; background:var(--color-alt); display: grid; grid-gap: 0px 0px; grid-template-columns: max-content; font: 14px Sans-Serif; border-width:1px 0px; border-style:solid; border-color:var(--color-border); border-radius: 5px; padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; }
   dt {  }
   dd { margin: 0; grid-column-start: 2;} 
   table, td, th { border-collapse:collapse; margin:0; padding:10px; }
   th { position:-webkit-sticky /*Safari*/; position:sticky; top:0; font-weight:400; font-size:14px; background:var(--color-brand); color:var(--color-text-invert); text-align:left; vertical-align:bottom; }
   th:first-child{ border: 0px solid #333; border-radius: 5px 0px 0px 0px; }
   th:last-child{ border: 0px solid #333; border-radius: 0px 5px 0px 0px; }
   .arrows { width:16px; height:16px; }
   tbody>tr { border-width:1px 0px; border-style:solid; border-color:var(--color-border); background:var(--color-alt); }
   .earth { display:flex; align-items:center; font-size:16px; padding-right:5px; }
   .globe { font-size:1.000em; float:right; padding-right:5px; }
   .tar { text-align:right; }
   .clipart { width:18px; height:18px; text-align:center; vertical-align:middle; z-index: 9999; border: 1px solid forestgreen; padding: 15px; border-radius: 50px; }
   .exp_icon { height:34px; width:34px; border-radius:50%; }
   .npcicon { width:20px; height:20px; text-align:center; vertical-align:middle; z-index: 9999;  border: 1px solid cornflowerblue; padding: 5px; border-radius: 50px; }
   .icon { height:48px; width:48px; border-radius:50%; }
   .smallicon { height:24px; width:24px; border-radius:50%; top:10px; left:20px;}
   .mini_icon { height:38px; width:38px; border-radius:50%; }
   .npcicon { display:flex; align-items:center; font-size:24px; text-align:center; vertical-align:middle; z-index: 9999; }
   .photo { height:64px; width:64px; border-radius: 5px 5px 5px 5px; }
   .mini_photo { height:38px; width:38px; border-radius: 5px 5px 5px 5px; }
   .mini_photo2 { height:54px; width:54px; border-radius: 5px 5px 5px 5px; }
   .nav_photo { height:30px; width:30px; border-radius: 5px 5px 5px 5px; }
   /* img { margin:0; padding:0; border:0; } */
   p { width: fit-content; min-width: 375px; margin: 0.7em 0; }
   a { text-decoration:none; color:var(--color-text-link); }
   a:hover { background:var(--color-hover); }
   #nav { margin-left:-8px; position:-webkit-sticky /*Safari*/; position:sticky; left:0; bottom:0; background:var(--color-base-translucent); width:188px; height:52px; border-radius:14px; }
   @media print { #nav { display:none; } } 
   .button, .button_inactive { display:inline-block; margin-left:10px; margin-top:10px; height:32px; width:32px; border:1px solid var(--color-border); border-radius:35%; font-size:24px; vertical-align:middle; text-align:center; }
   .button { background:var(--color-alt); }
   .button_inactive { background:none; color:var(--color-border); }
   .bin_true { text-decoration: underline wavy rgba(34,139,34,0.35); }
   .bin_false { text-decoration: underline wavy rgba(178,34,34,0.35); }

   /* for observations_grid.js */
   img { margin:0px; padding:0px; border:0px; display:block; object-fit:cover; object-position:center; }
   #grid { position:relative; /*padding-top:50px;*/ width:375px; padding:0px; border:0px; }
   .gridcell { position:absolute; background:#cccccc; text-align:center; display:flex; justify-content:center; align-items:center; }

.navbar {
  overflow: hidden;
  background-color: var(--color-brand);
  border-radius: 5px 5px 5px 5px;
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  align-items: center;
}

.navbar a {
  display: inline-block; /* Add this */
  float: left;
  font-size: 15px;
  color: white;
  text-align: center;
  padding: 12px 14px;
  text-decoration: none;
}

.dd_title {
  float: left;
  font-size: 15px;
  color: white;
  text-align: center;
  padding: 12px 14px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown {
  cursor: pointer;
  font-size: 15px;  
  border: none;
  outline: none;
  color: white;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropbtn {
  display: inline-block; /* Add this */
  cursor: pointer;
  font-size: 15px;  
  border: none;
  outline: none;
  color: white;
  padding: 12px 14px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn, .dropbtn:focus {
  background-color: black;
}

.dropdown-content {
  display: none;
  position: absolute;
  font-size: 15px;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 10px 14px 10px 14px;
  /*padding: 10px 14px;*/
  text-decoration: none;
  display: block;
  text-align: left;
}

.v2-menu .dropdown-content a {
    display: flex;       /* Aligns icon and text in a row */
    align-items: center; /* Centers them vertically */
    gap: 15px;           /* THE FIX: Adds exactly 15px between icon and text */
    text-decoration: none;
    padding: 8px 12px;
}

.dropdown-content a:hover {
  background-color: #ddd;
}
 
.dropdown-content a:first-child {
  border-radius: 5px 5px 0 0;
}

.dropdown-content a:last-child {
  border-radius: 0 0 5px 5px;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.show {
  display: block;
}

/* Target only iOS Safari to fix the 2px jump and shading */
/* Only ios safari needs this hack workaroudn */
@supports (-webkit-touch-callout: none) {
   .navbar a, .dropbtn, .dd_title {
      -webkit-tap-highlight-color: transparent !important;
      line-height: 1.2 !important;
   }
}