* {
  box-sizing: border-box;
}

#Unfilter {
  display: none;
}

#Data {
  display: inline-block;
}

#Data th {
  position: sticky;
  top: calc(2em + 2px);
  background: #def;
}

#Data th:nth-child(1)::before {
  content: '';
  position: absolute;
  width: 1.9em;
  height: 100%;
  background: white;
  left: -2em;
  top: 0;
  z-index: 100;
}

#Data td span,
#Data td:nth-child(7),
#Data td:nth-child(8),
#Data td:nth-child(10) {
  color: blue;
  cursor: pointer;
}

#Data td.scan {
  color: darkgreen;
  font-weight: bold;
  text-decoration: underline;
  cursor: pointer;
}

#Data td {
  text-overflow: ellipsis;
  white-space: nowrap;
}

#Data table {
  font: 12px Arial;
  margin-left: 2em;
  zwidth: calc(100% - 2em);
}

#Data td, #Data td span {
  white-space: nowrap;
}

#Data td span {
  margin-right: 0.2em;
}

#Data td {
  height: 2em;
}

#Data td.notreported::before {
  content: '\274c';
  position: absolute;
  z-index: -1;
  left: 0.4em;
}

#Data tbody tr:nth-child(2n) {
  background: #eee;
}

#Data tr:hover {
  outline: 1px solid red;
}

nav {
  background: #333;
  color: white;
  font-weight: bold;
  height: 2em;
  vertical-align: middle;
}

nav label {
  margin-right: 2em;
}

#Data .table.summary tr > :nth-child(6) {  /* Sample */
  display: none;
}

#Data .table:not(.summary) tr > :nth-child(4) {  /* # */
  display: none;
}

#Data td:nth-child(8) {  /* Name */
  overflow: hidden;
  text-overflow: ellipsis;
}

#Data td:nth-child(9) div {  /* Requested */
  white-space: pre-wrap;
  height: 3em;
  overflow: hidden;
}

#Tests td, #Tests th {
  background: #333;
  color: #ddd;
  font: 12px Arial;
  border-right: none;
  border-bottom: 1px solid #666;
}

#Data {
  height: 100vh;
}

#Tests tbody tr:hover td {
  cursor: pointer;
  color: lightgreen;
  zoutline: 1px solid green;
}

#Main {
  display: flex;
}

#Tests td.selected {
  background: #bfb;
  color: black !important;
}

#Tests tr > :nth-child(3) {
  display: none;
}

.selected {
  background: #cfc;
}

body {
  overflow: hidden;
}

#FY {
  float: right;
}

#Spinner {
  height: 70%;
  vertical-align: middle;
}

#Scroller {
  position: absolute;
  right: 0;
  height: 70%;
  width: 16px;
  overflow-y: scroll;
}

* {
  scroll-behavior: auto;
}

#Inputs td {
  padding: 0;
}

th {
  background: #ddd;
  color: black;
}

input:focus, select:focus, textarea:focus {
  background: lightyellow;
}

#DataTests {
  height: calc(100vh - 200px);
}


.chosen-container .chosen-results {
  max-height: 100px;
  white-space: nowrap;
}

span.clear {
  cursor: pointer;
  font-size: 80%;
}

#Inputs th {
  font-size: 90%;
}

#Inputs tr > * {
  border-left: 1px solid #bbb;
  padding: 0;
}

#Inputs input, #Inputs select {
  border: none;
  height: 1.4em;
}

[data-id=Login], [data-id=State] {
  text-transform: uppercase;
}

::placeholder {
  font-style: italic;
}

input:focus::placeholder {
  opacity: 0.7;
}

#Tests th {
  position: sticky;
  top: 26px;
}

[class^=db] {
  display: none;
}

body.dbFE, body.dbMI, body.dbWW, body.dbUN,
body.dbFE .dbFE, body.dbMI .dbMI, body.dbWW .dbWW, body.dbUN .dbUN {
  display: block;
}

#Data table {
  table-layout: fixed;
}

#Data tbody td, #Data tbody tr {
  height: 4em;
  max-height: 4em;
  overflow: hidden;
}

#Data table {
  width: calc(100vw - 25vw - 40px);
  table-layout: fixed;
  zfont-size: 0.7vw;
}

#Data tr > :nth-child( 1) {width: 4em  ;}  /* Login */
#Data tr > :nth-child( 2) {width: 6em  ;}  /* Received */
#Data tr > :nth-child( 3) {width: 6em  ;}  /* Date */
#Data tr > :nth-child( 4) {width: 3em  ;}  /* # */
#Data tr > :nth-child( 5) {width: 8em  ;}  /* Lab */
#Data tr > :nth-child( 6) {width: 8.14%  ;}  /* Sample */
#Data tr > :nth-child( 7) {width: 9.30%  ;}  /* Type */
#Data tr > :nth-child( 8) {width: 16.44% ;}  /* Name */
#Data tr > :nth-child( 9) {width: 22.44% ;}  /* Requested */
#Data tr > :nth-child(10) {width: 4.81%  ;}  /* Payment */
#Data tr > :nth-child(11) {width: 4.65%  ;}  /* Total */
#Data tr > :nth-child(12) {width: 15.77% ;}  /* Notes */
#Data tr > :nth-child(13) {display: none;}  /* Type */

#Memory {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 999;
  color: white;
  background: black;
}

#Inputs {
  display: none;
}

div.login {
  padding: 0.5em;
  background: #369;
  color: white;
  font-weight: bold;
}

div.login a {
  color: white;
}

.right {
  float: right;
}

tr.M::after {
  content: 'M';
  background: lightgreen;
}

tr.F::after {
  content: 'F';
  background: tan;
}

tr.I::after {
  content: 'F';
  background: #345;
  color: white;
}

tr.S::after {
  content: 'S';
  background: #468;
  color: white;
}

tr.W::after {
  content: 'W';
  background: lightblue;
}

tr.O::after {
  content: 'O';
  background: yellow;
}

tr.M::after, tr.F::after, tr.W::after, tr.I::after, tr.O::after, tr.S::after, tr.M::after {
  position: absolute;
  left: 0em;
  height: 3em;
  width: 2em;
  text-align: center;
  padding-top: 1em;
}

td.incomplete {
  background: yellow;
}

#Data {
  top: 2.5em;
}

#Inputs {
  background: #eee;
  padding: 1em;
}

#Inputs > table {
  background: #f4f4f4;
  max-width: 30vw;
}

#Inputs table,
#Inputs tr,
#Inputs td {
  border: none;
}

#Inputs input {
  width: 100%;
}

#Inputs select {
  width: 92%;
}

#DataTests.disabled {
  opacity: 0.3;
}

[data-id]:before {
  content: attr(data-id);
  margin-right: 0.5em;
}

#Inputs td {
  padding: 0.5em;
}

#Inputs td {
  font: 14px verdana;
  color: #333;
}

#Inputs .chosen-container,
#Inputs input,
#Inputs select {
  font: 13px arial;
  font-weight: normal;
  border: 1px solid #888;
}

#Inputs .chosen-container-single {
  width: 92% !important;
}

#Inputs input {
  padding: 1em 0.5em;
}

#Inputs select {
  height: 2em;
}


#Inputs p {
  margin: 0;
  margin-bottom: 0.2em;
}

fieldset {
  margin-bottom: 1em;
  display: inline-block;
}

legend {
  font-style: italic;
  color: #666;
}

fieldset.database td:nth-child(1) {width: 15em;}
fieldset.database td:nth-child(2) {width: 15em;}
fieldset.database td:nth-child(3) {width: 15em;}

fieldset.client td:nth-child(1) {width: 20em;}
fieldset.client td:nth-child(2) {width: 5em;}
fieldset.client td:nth-child(3) {width: 20em;}

fieldset.sample td:nth-child(1) {width: 15em;}
fieldset.sample td:nth-child(2) {width: 15em;}
fieldset.sample td:nth-child(3) {width: 15em;}

td.required:not(.gotten) p {
  color: red;
}

#Inputs td {
  vertical-align: top
}

#Memory {
  display: none;
}

#SampleIDs {
  width: 100%;
  height: 25.8em;
}

#NSamples {
  position: absolute;
  right: 2em;
}

fieldset {
  position: relative;
}

#Smiley {
  height: 1.5em;
}

#Hyphens {
  width: 2em !important;
}

label.hyphens {
  font-size: 90%;
}

img.saving {
  display: none;
}

#Testdata {
  top: 3em;
}

#Save {
  float: right;
  font-size: 120%;
}

p.login {
  color: gray;
  font-style: italic;
}

nav {
  position: sticky;
  top: 0;
}

fieldset table {
  width: 100%;
  max-width: 100%;
}

#Inputs > table > tbody > tr > td {
  padding: 0;
}

#Inputs table table {
  width: 35vw;
}

#Logout {
  background: #fdd;
  padding: 0.2em;
}

#Logout, #Testdata {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  font-size: 90%;
  zwidth: 7em;
}

#Testdata {
  right: 25vw;
}

#Inputs {
  zbackground: #ddd;
}

#Data,
#Inputs {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: calc(75vw - 2px);
}

#Data {
  top: 2.5em;
}

#Tests {
  position: fixed;
  max-width: 25vw;
  width: 25vw;
  right: 0;
  height: 100vh;
  display: inline-block;
  background: #333;
  padding: 0 1em;
  overflow: auto;
}

body.inputs #Tests {
  height: 50vh;
}

#Inputs {
  padding: 0;
}

#Today {
  position: fixed;
  display: none;
  max-width: 25vw;
  width: 25vw;
  right: 0;
  height: 50vh;
  top: 50vh;
  background: #eee;
  border-left: 1px solid #333;
  padding: 0.5em;
}

#Today tr > * {
  font-size: 90% !important;
}

#Today td {
  white-space: nowrap;
  text-overflow: ellipsis;
  height: 3em !important;
}

#Today table {
  width: calc(25vw - 24px) !important;
  ztable-layout: fixed;
}

#Today tr > :nth-child(1) {width: 30%;}
#Today tr > :nth-child(2) {width: 70%;}

[data-id=DateSampled].invalid {
  background: #fed8b1;
}

.chosen-container .chosen-results {
  height: 60vh;
}