h1  {
    display: block;
    margin: 1px 0 8px 0;
    padding: 3px; 
    background-color: steelblue;
    color: white;
    border:1px darkcyan solid;
    text-align: center;
    font-size: 12pt;
    font-weight: normal;
}

h4  {
    display: block;
    margin: 1px 0 3px 0;
    padding: 3px; 
    background-color: steelblue;
    color: white;
    border-left:1px darkcyan solid;
    text-align: center;
    font-size: 11pt;
    font-weight: normal;
}
h4 a, h4 a:hover    {
    color: white;
}
label{
    font-weight: normal;
}
/*************************************************************************************************************************/
.well {
    position: relative;   
    min-height: 450px;
    font-size: 11pt; 
}
.wellButtons   {   /* Buttons at bottom of screen */
    position: absolute;
    min-height: 20px;
    margin-top: 25px;
    bottom: 10px; /* Aligns to the bottom of the parent */
    left: 25; /* Aligns to the left edge of the parent */
}
.well button, .well input[type=submit], .well input[type=reset],
.loginBox input[type=submit] {
    margin: 5px auto;
    padding: 3px 0;
    margin-right: 5px;
    background-color: steelblue;
    color: white;
    width: 150px;
    text-align: center;
    font-size: 11pt;
    border: 1px white solid;
    border-radius: 7px;
}
.well table, .well td {
    vertical-align: top;
}
.well form td  {
    /*vertical-align: middle;*/
    height: 28px;
}
.well select {
    padding: 0px 1px 0 1px;
}
.well input[type=text], .well input[type=password]  {
    margin: 1px auto;
    padding: 0 0 0 1px;
    text-align: left;
}
.well input[type=number]  {
    margin: 1px auto;
    padding: 0 0 0 1px;
    text-align: right;
}
.well input[type="text"]:focus, .well input[type=password]:focus, .well input[type=number]:focus    {
    background-color: lightcyan;
}
.well a img {
    border: none;
    border-width: 0;
    outline : none;
}
/*************************************************************************************************************************/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
/*************************************************************************************************************************/
.errorMsg   {
    display: block;
    margin: 1px 0 1px 0;
    padding: 3px; 
    padding-bottom: 0;
    background-color: red;
    color: white;
    border:1px darkred solid;
    text-align: center;
    font-size: 12pt;
    font-weight: bold;
}
.errorMsg a {
    color: white;
}
.errorMsg a:hover {
    color: yellow;
}
.noticeMsg   {
    display: block;
    margin: 1px 0 1px 0;
    padding: 3px; 
    padding-bottom: 0;
    background-color: blue;
    color: white;
    border:1px darkblue solid;
    text-align: center;
    font-size: 12pt;
    font-weight: bold;
}
.noticeMsg a {
    color: white;
}
.noticeMsg a:hover {
    color: yellow;
}
.noticeBox {
    /*display: inline-block;*/
    border: 2px solid steelblue;
    border-radius: 5px;
    padding: 35px;
    margin: 75px auto;
    font-size: 12pt;
    width: 350px;
    display: flex;
    justify-content: center; 
    text-align: center; 
}
.loginBox {
    /*display: inline-block;*/
    border: 2px solid steelblue;
    border-radius: 5px;
    padding: 35px;
    margin: 75px auto;
    font-size: 12pt;
    width: 250px;
    display: flex;
    justify-content: center;  
}
.loginBox input[type=text], .loginBox input[type=password], .loginBox input[type=submit] {
    display: block;
    margin: 1px auto;
    padding: 3px 0;
    text-align: center;
}
.tableBorder  {
    border: 1px solid black;
}
.tableList  {
    overflow-y:auto; 
    max-height:500px;
}
.tableList200  {
    overflow-y:auto; 
    max-height:200px;
    font-size: 11pt;
    padding: 0;
}
.tableListView {
    border-collapse: collapse;
    font-size: 10pt;
}
table.tableListView td,
table.tableListView th {
    padding: 2px 0 !important;   /* Override Bootstrap */
    line-height: 1 !important;   
    margin: 0;
    height: auto;
    vertical-align: top;
}
.tableListView100  {
    overflow-y:auto; 
    max-height:100px;
    font-size: 10pt;
    /*border: 1px solid grey;*/
}
.tableListView200  {
    overflow-y:auto; 
    max-height:200px;
    font-size: 10pt;
    /*border: 1px solid grey;*/
}
.tableListView100 td ,
.tableListView200 td {
    padding: 0 2px;
}
.tableList tr:nth-child(even),
.tableList200 tr:nth-child(even) {
    background-color: white;
}
.tableListView tr:hover,
.tableList tr:hover,
.tableList200 tr:hover   {
    background-color: lightblue;
    color: black;
    cursor: pointer;
  }
.tableList td > a ,
.tableList200 td > a {
    white-space: nowrap;
    overflow: hidden;
    padding: 1px 2px;
}
.tableList th,
.tableList200 th   {
    background-color: lightgrey;
    color: black;
    vertical-align: middle;
  }
.stickyHeaderTable200 {    /* Target only this table inside the container */
    border-collapse: collapse;
    width: 100%;
    overflow-y:auto; 
    max-height:200px;
}.stickyHeaderTable100 {    /* Target only this table inside the container */
    border-collapse: collapse;
    width: 100%;
    overflow-y:auto; 
    max-height:100px;
}
.stickyHeaderTable {    /* Target only this table inside the container */
    border-collapse: collapse;
    width: 100%;
    overflow-y:auto; 
    max-height:500px;
}
.stickyHeaderTable th,
.stickyHeaderTable100 th,
.stickyHeaderTable200 th {  /* Sticky header */
    position: sticky;
    top: 0;                   /* sticks at top of the container */
    background: lightcyan;  /* background color so rows don’t show through */
    z-index: 2;               /* stay above rows */
    padding: 2px;
    /*border-bottom: 1px solid lightgray;*/
    text-align: left;
}
.centerTable, .centerTable80, .centerTable90, .centerTable80, .centerTable75,  .centerTable60, .centerTable50  {
    margin-left: auto;
    margin-right: auto;
}
.centerTable100 { width: 100%; }
.centerTable90 { width: 90%; }
.centerTable80 { width: 80%; }
.centerTable75 { width: 75%; }
.centerTable60 { width: 60%; }
.centerTable50 { width: 50%; }


/*************************************************************************************************************************/
.adminMenu-BAK  {
    text-decoration: none;
    background-color: darkcyan;
    color: white;
}
.topMenu {
    text-decoration: none;
    background-color: steelblue;
    color: white;
}
.topMenu ul, .topMenu ol    {
    list-style-type: none;
    background-color:steelblue;
    color: white;
    padding: 0; /*positions buttons */
    margin: 0;
    overflow: hidden;
    align-items: center;
}
.adminMenu ul, .adminMenu ol {
    list-style-type: none;
    background-color:darkcyan;
    color: white;
    padding: 0; /*positions buttons */
    margin: 0;
    overflow: hidden;
    align-items: center;
}
.topMenu li, .adminMenu li {
    font-family: Arial, sans-serif;
    font-size: 11pt;
    text-align: center;
}
.topMenu a, .adminMenu a {
    display: flex;
    text-decoration: none;
    color: white;
    padding: 5px 11px; /* Change distance between menu items */
    transition: all 0.25s ;  
    border-right: 1px dotted lightgrey;
}
.topMenu a:hover  {
    background-color: darkblue;
 }
.adminMenu a:hover  {
    background-color: cadetblue;
    color: yellow;
}
  @media screen and (min-width: 600px) {
    .topMenu li, .adminMenu li {
        font-size: 11pt;
        float: left;
    }
}
.topMenu span input[type=text],
.adminMenu span input[type=text]   {
    float: left;
    padding: 2px 0 0 0;
    margin: 2px 2px 0 2px;
    color: black;
}
/*************************************************************************************************************************/
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 9999;
}
.modalContent {
    background: #fff;
    width: 400px;
    margin: 15% auto;
    padding: 20px;
    border-radius: 6px;
    text-align: center;
}
.modal button {
    margin: 10px;
}
/*************************************************************************************************************************/
.centerBlock {
    display: block;
    width: 300px; /* Optional: set a specific width */
    margin: 0 auto; /* Centers horizontally by setting equal left/right margins */
}
.spanLeft {
    text-align: left;
}
.spanCenter {
    text-align: center;
}
.spanRight, .spanRight150, .spanRight250 {
    text-align: right;
}
.spanRight100 {
    width: 100px;
    margin-left: 100px;
}
.spanRight150 {
    width: 150px;
    margin-left: 150px;
}
.spanRight250 {
    width: 250px;
    margin-left: 250px;
}
.spanOption {
    text-align: center;
    font-size: 8pt;
    background-color: lightgrey;
    border: 1px solid grey;
    border-radius: 5px;
    padding: 2px 4px 0 4px;
}
.dividerRight   {
    border-right: 1px solid white;
}
.dividerLeft   {
    border-left: 1px solid white;
}
.barAbove{
    border-top: 1px solid grey;
}