:root {
   --primary-bg-color: lightgrey;
 }

 * {
   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   scrollbar-color: black transparent;
 }

 body {
   background-color: var(--primary-bg-color);
   font-size: 16px;
 }

 code {
   font-family: monospace, monospace;
   color: crimson;
   background-color: whitesmoke;
   padding-left: 4px;
   padding-right: 4px;
   border-radius: 4px;
 }

 table,
 th,
 td,
 tr {
   border: none;
   border-collapse: collapse;
   font-size: 14px;
   padding: 1px 6px 1px 6px;
   border-left: 0;
   border-right: 0;
   text-align: left;
 }

 td {
   border: 1px solid black;
   border-left: 0;
   border-right: 0;
   border-top: 0;
 }

 th {
   border-bottom: 2px double black;
 }


 .formbox,
 .formbox-side {
   border: 1px solid black;
   position: relative;
   margin-left: auto;
   margin-right: auto;
   padding: 5px;
   margin-top: 2.5px;
   margin-bottom: 2.5px;
   border-radius: 5px;
 }

 .formbox {
   width: 586px;
 }

 .formbox-side {
   width: 586px;
 }


 button {
   cursor: pointer;
 }

 button,
 select,
 input:not([type='checkbox']) {
   border: 1px solid black;
   border-radius: 5px;
   padding: 3px;
   min-height: 30px;
   min-width: 60px;
   margin-top: 2.5px;
   margin-bottom: 2.5px;

   &.input-left {
     border-radius: 5px 0px 0px 5px;
     display: inline-block;

     &[type=number] {
       width: 60px !important;
     }
   }

 }

 .input-mid {
   border-radius: 0;
   display: inline-block;
   /*min-width: 38px;
   height: 38px;*/
   margin-left: -1px;
 }

 .input-right {
   border-radius: 0px 5px 5px 0px;
   display: inline-block;
   /*min-width: 38px;
   height: 38px;*/
   margin-left: -1px;
 }

 .square {
   width: 38px;
   min-width: 38px;
   height: 38px;
 }


 .mem-writebtn,
 .mem-readbtn {
   font-weight: normal !important;

 }

 .button-group {
   font-size: 0;
 }

 button:hover,
 select:hover {
   background-color: darkslategrey;
   color: white;
 }

 input:hover,
 input:focus {
   outline: 2px darkslategray;
   outline-offset: -5px;
 }

 input[type=number] {
   max-width: 80px;
 }

 input:invalid {
   color: red;
   outline: 3px solid red;
   outline-offset: -2px;
 }

 .red {
   background-color: red;
   color: white;
   font-weight: bold;
 }

 .lightred {
   background-color: lightcoral;
   font-weight: bold;
 }


 .green {
   background-color: green;
   color: white;
   font-weight: bold;
 }

 .lightgreen {
   background-color: lightgreen;
 }

 .blue {
   background-color: lightblue;
   font-weight: bold;
 }

 .LED {
   width: 20px;
   height: 20px;
   border-radius: 50%;
   outline: 2px solid black;
   background-color: transparent;
   transition: background-color .2s ease;
   display: inline-block;
   margin-left: 5px;
   margin-right: 5px;
   margin-bottom: -10px;
   outline-offset: 2px;
 }

 .LED-small {
   width: 12px;
   height: 12px;
   outline-offset: 1px;
   margin-bottom: -1px;
 }


 .on-green {
   background-color: green;
 }

 .on-red {
   background-color: red;
 }

 .formboxLabel {
   display: inline-block;
   min-width: 100px;
   font-size: 14px;
 }

 .messagelog {
   width: 99%;
   resize: vertical;
   min-height: 150px;
   font-family: 'Courier New', Courier, monospace;
   border-radius: 5px;
   background-color: aliceblue;
   font-size: 12px;
   color: black;
 }

 .formActionBtn {
   display: inline-block;
   position: absolute;
   right: 10px;
 }

 .form-hint {
   font-size: 12px;
   padding-left: 4px;
 }

 .input-label {
   font-size: 14px;
   padding-left: 4px;
 }


 .third-center,
 .third-side {
   display: block;
   float: left;
   outline-offset: -1px;
   padding: 4px;
   align-content: center;
 }

 .third-side {
   /*outline: 1px solid black;*/
   width: calc(100% - 8px);
   border-bottom: 1px solid black;
 }

 .third-center {
   /*outline: 1px solid green;*/
   width: calc(100% - 8px);
   border-bottom: 1px solid black;
 }

 #topbar-logo {
   display: inline-block;
   width: 100%;
   text-align: center;
 }

 #topbar-text {
   text-align: center;
 }

 #topbar-right {
   display: inline-block;
   width: 100%;
   text-align: center;
 }


 #ws-spacer {
   display: none;
 }

 /*Wide screen*/
 @media (min-width:1451px) {
   .third-side {
     width: calc((100% - 624px)/2);
     border-bottom: none;
   }

   .third-center {
     width: 600px;
     border-bottom: none;
   }

   .formbox {
     width: 586px;
   }

   .formbox-side {
     width: 386px;
   }

   #topbar-logo {
     display: block;
     width: unset;
     text-align: unset;
   }

   #topbar-text {
     text-align: center;
     display: block;
     top: 0;
     width: 640px;
     position: absolute;
     left: 50%;
     margin-left: -324px;
   }

   #topbar-right {
     display: block;
     text-align: right;
     width: unset;

     top: 0;
     width: 300px;
     position: absolute;
     right: 0;
     margin-right: 10px;;
   }

   #ws-spacer {
     display: block;
   }
 }


 .borderless {
   outline: none !important;
   border: none !important;
   padding-bottom: 0;
   padding-top: 0;
 }

 @media (max-width:649px) {

   div,
   button {
     display: none !important;
     border: 0 !important;
   }
 }


 .up-body {
   position: relative;
   width: 300px;
   height: 300px;
   border-radius: 50%;
   border: none;
   background-color: black;
   margin-left: auto;
   margin-right: auto;
 }

 .up-lr-hole,
 .up-aligner {
   display: inline-block;
   position: absolute;
   width: 9%;
   border-radius: 50%;
   border: none;
   left: 50%;
   margin-left: -4.5%;
   margin-top: -4.5%;
   background-color: var(--primary-bg-color);
 }

 .up-lr-hole {
   top: 76.4%;
   height: 9%;
 }

 .up-aligner {
   top: 100%;
   border-radius: 50% 50% 0 0;
   height: 4.5%;
 }

 .circle-16 {
   border: 1px solid black;
   border-radius: 50%;
   height: 16px;
   width: 16px;
   display: inline-block;
   margin-right: 5px;
   margin-left: 5px;
   margin-bottom: -3px;
 }

 .up-well {
   position: absolute;
   width: 16%;
   height: 16%;
   border-radius: 50%;
   border: none;
   margin-left: -8%;
   margin-top: -8%;
   text-align: center;
   vertical-align: middle;
   place-content: center;
   background-color: yellow;
   font-weight: bold;
   transition: ease .1s;
   font-size: 20px;
 }

 .up-well:hover {
   border: 1px solid black;
   outline: 4px solid white;
   cursor: pointer;
 }

 .up-well-filled {
   /*CDH3 color code*/
   background-color: #66ff66;
 }

 .up-well-available {
   /*CDH3 color code*/
   background-color: #e0e0e0;
 }

 .up-well-nextTarget {
   /*CDH3 color code*/
   background-color: #6699ff;
 }

 .up-well-unavailable {
   /*CDH3 color code*/
   background-color: #ff3333;
 }

 .up-well-1 {
   left: 50%;
   top: 32%;
 }

 .up-well-2 {
   left: 32.8%;
   top: 44.41%;
 }

 .up-well-3 {
   left: 39.36%;
   top: 64.63%;
 }

 .up-well-4 {
   left: 60.63%;
   top: 64.63%;
 }

 .up-well-5 {
   left: 67.2%;
   top: 44.41%;
 }

 .up-well-6 {
   left: 50%;
   top: 10.73%;
 }

 .up-well-7 {
   left: 28.77%;
   top: 16.97%;
 }

 .up-well-8 {
   left: 14.28%;
   top: 33.68%;
 }

 .up-well-9 {
   left: 11.13%;
   top: 55.58%;
 }

 .up-well-10 {
   left: 20.32%;
   top: 75.71%;
 }

 .up-well-11 {
   left: 38.93%;
   top: 87.67%;
 }

 .up-well-12 {
   left: 61.06%;
   top: 87.67%;
 }

 .up-well-13 {
   left: 79.67%;
   top: 75.71%;
 }

 .up-well-14 {
   left: 88.86%;
   top: 55.58%;
 }

 .up-well-15 {
   left: 85.71%;
   top: 33.68%;
 }

 .up-well-16 {
   left: 71.22%;
   top: 16.96%;
 }