body { background-color: white; color: black; }

th     { text-align: left; padding-right: 10px; color: black; }
td     { vertical-align: top; padding-right: 10px; color: black; }
label  { color: black; }

a:link {  color:black;  }
a:visited {  color:black;  }
a:hover {  color:darkgreen; text-decoration: none; }

.td-l   { text-align: left; }        /* defined so JS coding is consistent */
.td-r   { text-align: right; }       /* TD classes for text alignment */
.td-c   { text-align: center; }
.td-m   { vertical-align: middle; }

.td-green  { text-align: center; color: green; }  /* TD class for buttons */
.td-red    { text-align: center; color: red; }   
.td-italic { font-family: arial; font-style:italic;  }

.td-hl-l   { text-align: left;   background-color: navy; color: white; }        /* highlighted td's for selection */
.td-hl-r   { text-align: right;  background-color: navy; color: white; }        /* TD classes for text alignment */
.td-hl-c   { text-align: center; background-color: navy; color: white; }

.btn-green { color: green; text-align: center; vertical-align: center; height: 21px; }
.btn-red   { color: red; text-align: center; vertical-align: center; height: 21px; }

.table-border { border:4px solid steelblue; padding: 6px; background-color: white; color: black; }

.menu-table-border
{
 border: 1px solid royalblue;
 background-color:skyblue;
 padding: 4px;
}

.menu-label { color:black; vertical-align: middle; } 

.menu-dropdown-td
{
 margin:4px 4px 4px 4px;
} 

.menu-dropdown-btn 
{
 padding: 4px;
 padding-left: 8px;
 padding-right: 8px;
 border: none;
 color: lightcyan;
 background-color: #0a262f;
 border-top-left-radius:6px;
 border-top-right-radius:6px;
 background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#264d5c), to(#030705)); 
 cursor: pointer; 
}

.menu-dropdown-list
{
 display: none;
 position: absolute;
 background-color: #0a262f;
 color: lightcyan;
 min-width: 200px;
 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.6);
 cursor: pointer;
 z-index: 99999;
}

.menu-dropdown-item
{
 padding: 12px 16px;
 text-decoration: none;
 display: block;
 color: lightcyan;
 background-color: #0a262f;
}

.menu-dropdown-item:hover
{
 background-color: black; 
 color: white; 
}

.menu-dropdown-anchor:link {  color:lightcyan; text-decoration: none; display:block; width:100%; height:100%; }
.menu-dropdown-anchor:visited {  color:lightcyan; text-decoration: none; }
.menu-dropdown-anchor:hover {  color:lightcyan; text-decoration: none; }


.menu-item
{
 margin:4px 4px 4px 4px;
 background-color: #0a262f;
 border:1px solid #2d5556;
 padding: 4px;
 padding-left: 8px;
 padding-right: 8px;
 border-radius:6px;
 background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#264d5c), to(#030705)); 
}

.menu-item-reverse
{
 margin:4px 4px 4px 4px;
 background-color: lightcyan;
 border:1px solid #2d5556;
 padding: 4px;
 padding-left: 8px;
 padding-right: 8px;
 border-radius:6px;
 background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(lightcyan), to(skyblue)); 
}

.menu-item-anchor:link {  color:lightcyan; text-decoration: none; }
.menu-item-anchor:visited {  color:lightcyan; text-decoration: none; }
.menu-item-anchor:hover {  color:lightcyan; text-decoration: underline; }

.menu-item-anchor-reverse:link {  color:black; text-decoration: none; }
.menu-item-anchor-reverse:visited {  color:black; text-decoration: none; }
.menu-item-anchor-reverse:hover {  color:darkblue; text-decoration: underline; }

.menu-item-label { color: black; }


.modal-button 
{
 margin:2px 2px 2px 2px;
 background-color: #0a262f;
 border:1px solid #2d5556;
 border-radius:9px;
 color:lightcyan;
 background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#264d5c), to(#030705)); 
 width: 110px;
 height: 24px;
}

.modal-title 
{
 /* margin:1px 1px 1px 1px; */
 background-color: #0a262f;
 border:1px solid #2d5556;
 border-radius:1px;
 color:lightcyan;
 width: 100%;
 vertical-align: center;
 padding-top: 4px;
 padding-bottom: 4px;
}

.modal-list 
{
 width: 150px;
 background-color: white;
 color: black;
}



.modal /* background */ 
{
 display: none;
 position: fixed;
 z-index: 1; /* top */
 padding-top:100px;
 left:0;
 top:0;
 width:100%;
 height:100%;
 overflow:auto;
 background-color: rgb(0,0,0);
 background-color: rgba(0,0,0,0.5);
}
.modal-content
{
 position:relative;
 left:-300px;
 background-color: skyblue;
 margin:auto;
 padding:0;
 border: 1px solid royalblue;
 width:280px;
 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
 -webkit-animation-name: animatetop;
 -webkit-animation-duration: 0.4s;
 animation-name:animatetop;
 animation-duration:0.4s;
}

@-webkit-keyframes animatetop 
{
 from { top: -300px; opacity: 0; }
 to { top: 0; opacity: 1; }
}

@keyframes animatetop 
{
 from { top: -300px; opacity: 0; }
 to { top: 0; opacity: 1; }
}


@media (prefers-color-scheme: dark) 
 {
  body { background-color: #313338; color: white; }
  a:link {  color:#4a90e2;  }
  a:visited {  color:#4a90e2;  }
  a:hover {  color:green; text-decoration: none; }

 .table-border { border:4px solid steelblue; padding: 6px; background-color: #313338; color: white; }

 .menu-dropdown-list{  box-shadow: 0px 8px 16px 0px rgba(224,255,255,0.6); }

  th    { color:#95B5C1; }
  label { color:#95B5C1; }
  td    { color:lightgray; }

  input { background-color: black; color: white; }
  select { background-color: black; color: white; }
  option { background-color: black; color: white; }

  .td-l   { color: lightgray; }        /* defined so JS coding is consistent */
  .td-r   { color: lightgray; }       /* TD classes for text alignment */
  .td-c   { color: lightgray; }

  .td-hl-l   { background-color: lightblue; color: black; }        /* highlighted td's for selection */
  .td-hl-r   { background-color: lightblue; color: black; }        /* TD classes for text alignment */
  .td-hl-c   { background-color: lightblue; color: black; }

  .td-green { color: limegreen; }
  .td-red   { color: #ff5349; }
  .td-italic { color: lightgray; }

  .btn-red   { color: #ff5349; }
  .btn-green { color: limegreen; } 
 
  .menu-table-border { background-color: #313338; color: white;  }
  .menu-label        { color: lightcyan; } 
  .modal-content     { background-color: #2d3749; color:white;  }
  .menu-item-reverse { color: black; }
 }