body {
  padding: 0.5em;
  box-sizing: border-box;
}

textarea, #SQL {
  display: none;
}

th {
  background: #def;
}

textarea {
  width: 100%;
  height: 5em;
  background: lightyellow;
}

#Summary {
  font-weight: bold;
  color: green;
}

#Error, .error {
  font-weight: bold;
  color: red;
}

#Done {
  height: 1.2em;
  display: none;
}

.match {
  border: 1px solid green;
  color: green;
}

.match + .match {
  border-left: none;
}

.mismatch {
  border: 1px solid red;
  color: red;
  font-weight: bold;
}

.mismatch + .mismatch {
  border-left: none;
}

.flag {
  color: red;
  font-weight: bold;
}

.ccv, .qclimit {
  font: 9px verdana;
  white-space: nowrap;
}

#Data tr.qcOrange td, #Data td.qcOrange, #Results td.qcOrange, td.qcOrange {
  background: gold;
}

#Data td.qcYellow, #Results td.qcYellow, td.qcYellow {
  background: yellow;
}

.qc td {
  background: #eee;
}

.header th {
  text-align: left;
  background: #246;
  color: white;
}

.sample {
  color: brown;
  font-weight: bold;
}

.buttons {
  background: #333;
  color: yellow;
  padding: 0.5em;
}

#S2, #S11, #S13 {
  display: none;
}

.original {
  color: red;
}

.key {
  color: silver;
}

.comp {
  white-space: nowrap;
}

.comp th {
  text-align: left;
}

.message {
  padding-bottom: 1em;
  padding-top: 0.5em;
  padding-left: 0.1em;
  background: white;
  color: black;
}

#filename {
  width: 25em;
}

.buttons table {
  border: 1px solid white;
}

.form {
  margin-top: 1em;
}

#to, #cc {
  width: 100%;
}

.selected {
  background: #cfc;
}

#tolist, #cclist {
  float: right;
  cursor: pointer;
}

.buttons .form {
  width: 100%;
}

.buttons .form tr {
  vertical-align: top;
}

.buttons .form td:nth-child(1) {
  width: 1px;
}

.names {
  display: none;
}

.names button {
  font-size: 85%;
}

div.paste {
  display: none;
}

.Requested {
  background: #f4f4f4;
  border-left: 1px solid black;
}

#subject {
  width: 100%;
}

div.buttons {
  display: none;
}

.notice {
  color: green;
  font: bold 16px verdana;
}

.alkMismatch th:nth-child(2),
.alkMismatch td:nth-child(2),
.alkMismatch th:nth-child(6),
.alkMismatch td:nth-child(6),
.alkMismatch tr:nth-child(1) th:nth-child(3) {
  border-left: 1px solid black;
}

.good {
  color: green;
}

.bad {
  background: gold;
  color: black;
}

.extra {
  background: gold;
}

#IFR {
  display: none;
  width: 100%;
  height: 50%;
}

div.fy {
  float: right;
}

#Results td {
  text-align: right;
}

div.comparison {
  display: none;
}

#graph {
  display: none;
  width: 900px;
  height: 400px;
  border: 1px solid gray;
  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  padding: 2em;
  margin: 1em;
  box-sizing: border-box;
}

table.TDSMismatch tr > *:nth-child(2),
table.TDSMismatch tr > *:nth-child(5) {
  border-left: 1px solid black;
}

table.TDSMismatch tr:nth-child(1) th:nth-child(3) {
  border-left: 1px solid black;
}

#mismatches {
  overflow: hidden;
}

#mismatches td {
  text-align: right;
}

#mismatches, #mismatches th {
  position: relative;
}

#mismatches th[colspan]:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  border-left: 1px solid black;
  height: 9999px;
  z-index: 1;
}

tr.ccFlag {
  background: yellow;
}

#Test {
  margin-bottom: 2em;
  display: none;
}

.ok {
  background: lightgreen;
}

.clients {
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
  font-size: 90%;
  overflow: auto;
}

.clients tr:hover {
  background: yellow;
}

.NIRPL tr > *:nth-child(2),
.NIRPL tr > *:nth-child(7),
.NIRPL tr > *:nth-child(12),
.NIRPL tr > *:nth-child(13) {
  border-left: 1px solid black;
}

.NIRPL [colspan], .NIRPL [rowspan] {
  border-left: 1px solid black;
}

.NIRPL tr:nth-child(2) th,
.NIRPL [rowspan] {
  border-bottom: 1px solid black;
}

#UnknownType {
  color: red;
}

#Comparison {
  display: none;
}

table.data tr > :nth-last-child(2) {
  border-left: 1px solid black;
}

table.data tr > td:nth-last-child(1),
table.data tr > td:nth-last-child(2) {
  background: #f4f4f4;
}

table.data th {
  border-bottom: 1px solid black;
}

table.data tr > :nth-child(1) {
  border-right: 1px solid black;
}

table.data tr:not(.qc) + tr.qc td,
table.data tr.qc + tr:not(.qc) td {
  border-top: 1px solid #555;
}

table.data td:nth-child(n + 2):nth-last-child(n + 3) {
  text-align: right;
}

.dilutions td:empty::before {
  content: "-";
}

table.data th {
  position: sticky;
  top: 0;
}

table.data th[colspan] {
  position: sticky;
  top: 1.2rem;
}

tbody.results th,
tbody.org th,
tbody.comp th {
  background: #cfc !important;
  color: black !important;
  border-top: 1px solid black;
}

.direct {
  padding: 0.5rem;
  display: inline-block;
}

.direct td {
  text-align: left !important;
}

td.requested {
  border-left: 1px solid black;
}

.fullscreen {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  color: red;
  background: #eee;
  padding: 2rem;
  z-index: 99999;
}

.fullscreen ~ * {
  display: none !important;
  visibility: hidden;
}

#Explain {
  position: fixed;
  left: 1px;
  top: 0;
  width: 40rem;
  border-top-right-radius: 5%;
  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  padding: 0.5rem;
  border: 1px solid #aaa;
  /* background: #eee; */
  background: lightyellow;
  display: none;
}

#Signature {
  height: 20rem;
  overflow: auto;
  margin-bottom: 2rem;
}

#Explain code {
  font-weight: bold;
  font-size: 120%;
}

#Explain table {
  background: white;
}

.parameter {
  color: lavender;
  font: courier new;
}

.signature {
  font: 16px consolas;
  background: black;
  color: lightblue;
  padding: 0.5rem;
}

#Data.explain {
  margin-top: 11rem;
}

.comment {
  color: silver;
  font-size: 80%;
}

.function {
  color: yellow;
}

.lineno {
  color: silver;
  font-size: 80%;
}

.disabled {
  opacity: 0.5;
  pointer-events: none;
}

#History {
  position: absolute;
  bottom: 0;
  background: #333;
  width: calc(100% - 1rem);
  text-align: center;
}

#History button {
  margin: 0.5rem;
}