* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background: #ddd;
  height: 100vh;
}

body:not(.editing) {
  ::selection {
    background-color: transparent;
    color: black;
  }

  #SampleIDs [contenteditable]:focus {
    outline: none;
  }
  
  #SampleIDs [contenteditable]:focus::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: calc(100% - 4px);
    width: calc(100% - 4px);
    border: 2px solid green !important;
  }
  
  label :first-child {
    display: none;
  }

  #Form {
    label:not(.email) {
      pointer-events: none;
    }

    input,
    select {
      /* border: none; */
      background: none !important;
      pointer-events: none;
      padding: 2px;
    }

    label:has(input:checked) {
      background: #cfc;
      padding: 0 1px;
      border: 1px solid #aaa;
      border-radius: 0;
    }
    
    /* input[type="text"] {
      width: calc(1ch + 15px);
    } */

    input::-webkit-calendar-picker-indicator {
      display: none;
    }

    /* label:has(input:placeholder-shown),
    label:has(select[value=""]:empty) {
      display: none;
    } */

    select {
      -webkit-appearance: none;
      appearance: none;
    }

    label.required::before {
      content: '';
    }

    #email {
      text-decoration: underline;
      cursor: pointer;
      color: blue;
    }
  }

  #Save, button.Clearform {
    display: none;
  }

  fieldset, legend {
    background: #eee;
  }
  
  #SampleIDs td {
    background: #ddd;
  }
}

body.editing {
  #Save {
    display: inline;
  }

  button.Edit {
    background: #cfc;
  }

  button.Edit::after {
    content: 'ing';
  }

  label.email {
    color: blue !important;

    span span {
      font-size: 140%;
    }
  }

  [contenteditable]:not(.editing):focus {
    background: blue;
    color: white !important;
  }
  
  #Home {
    display: none;
  }
}

nav {
  background: #333;
  color: white;
  padding: 0.3rem;
  padding-bottom: 0.3rem;
  display: none;

  select,
  input {
    margin-right: 1rem;
    margin-bottom: 0;
  }

  button {
    width: auto;
    min-width: 3rem;
    white-space: nowrap;
  }
  
  button b::before {
    content: '^';
  }

  button u {
    font-weight: bold;
  }
}

#User {
  color: yellow;
  font-style: italic;
  cursor: pointer;
}

section {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);;
  grid-template-rows: max-content minmax(0, 1fr);
  overflow: hidden;
  gap: 2px;
  height: calc(100vh - 2.5rem);
  width: 100vw;
}

.noedit {
  color: brown !important;
  background: #ddd !important;
}

fieldset {
  margin-top: 2px;
  min-height: 0;
  min-width: 0;
  background: white;
  height: calc(100vh - 2.5rem);
  overflow: auto;
}

legend {
  font-style: italic;
  color: #666;
  background: white;
  padding: 0 0.5rem;
  border-radius: 5px;
  border-top: 1px solid black;
}

.clear {
  cursor: pointer;
}

.clear:hover {
  color: brown;
}

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

.options {
  max-height: 10rem;
  max-width: 40rem;
  min-width: 10rem;
  white-space: nowrap;
  position: absolute;
  overflow-x: hidden;
  text-overflow: ellipsis;
  background: #eee;
  border: 1px solid #555;
  margin-top: -0.5rem;
}

.options:empty {
  display: none;
}

.options div:hover {
  outline: 1px solid #888;
}

.options div {
  padding: 0 0.5rem;
  font-weight: normal !important;
  cursor: pointer;
}

.selected {
  background: lightgreen;
}

.highlighted {
  font-weight: bold;
  background: yellow;
}

label {
  font-weight: bold;
  display: inline-block;
  margin-right: 1rem;
  line-height: 1.2rem;
  cursor: pointer;
  user-select: none;
}

input[type="text"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
select {
  border: 1px solid #ccc;
}

label.nomargin {
  margin-right: 0;
}

label * {
  /* font-style: normal; */
  vertical-align: top;
  /* color: black; */
}

label textarea {
  width: 800px;
  height: 8rem;
}

label[required] {
  color: red;
}

label[required] :not(u) {
  color: black;
}

label:not(:has(.options)):hover {
  color: brown;
}

table {
  color: black;
}

fieldset[disabled] {
  opacity: 0.5;
}

input {
  margin-bottom: 0.5rem;
}

button {
  width: 7rem;
}

#FYs {
  float: right;
}

#FYs button {
  width: 3.5rem;
}

#Saved {
  font-weight: bold;
  font-size: 120%;
  transition: all 1s;
  color: #333;
  margin-right: 1rem;
}

.right {
  float: right;
}

input[type=number] {
  width: 5rem;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#SampleIDs {
  table-layout: fixed;
}

#SampleIDs td {
  vertical-align: top;
  white-space: nowrap;
  min-width: 2rem;
}

#SampleIDs th {
  white-space: nowrap;
  position: sticky;
  z-index: 1999 !important;
  top: 0;
  cursor: pointer;
}

#SampleIDs th:nth-child(1) {
  z-index: 2000 !important;
}

#SampleIDs tr > :nth-child(1) {
  position: sticky;
  left: 0;
  z-index: 999;
}

#SampleIDs input {
  border: none;
}

#SampleIDs td:nth-child(1) {
  background: #eee;
  color: #666;
  text-align: right;
}

#SampleIDs tr > :nth-child(1) {
  border-right: 1px solid black;
}

#SampleIDs th {
  border-bottom: 1px solid black;
}

th {
  background: #eee;
}

[contenteditable] {
  -webkit-user-modify: read-write-plaintext-only;
}

[contenteditable].editing:focus {
  background: yellow;
}

[contenteditable].edited {
  background: #dfd;
}

td {
  max-height: 1.2rem;
  height: 1.2rem;
  overflow: hidden;
}

#Form {
  display: none;
}

.location {
  padding: 0.3rem;
  background: #dfd;
  border: 1px solid #ddd;
}

.hidden, div.dnmp, #AN {
  display: none;
}

.birdage {
  width: 3rem;
}

div.nmp:has(input[value="true"]:checked) ~ * {
  display: block;
}

div.nmp:has(input[value="true"]:checked) ~ label.type {
  display: none;
}

div.dnmp li {
  margin-bottom: 0;
  margin-left: 0;
}

div.dnmp ol {
  padding-left: 1.5rem;
}

div.dnmp li {
  border-bottom: 1px solid #ddd;
  margin-bottom: 0.5rem;
}

label.required:has(input:placeholder-shown),
label.required:has(option[value=""]:checked),
label.required:has(input[type="radio"]:not(:checked)),
label.required:has(input[type="checkbox"]:not(:checked)) {
  color: red;
}

label.required::before {
  content: '* ';
}

.required label {
  color: black;
}

td {
  position: relative;
}

td:has(.required) b::before {
  left: auto;
  transform: translatex(-0.5rem) translatey(-0.2rem);
}

li:has(.required)::marker,
td:has(.required) b {
  color: red;
}

li:has(.required):has(input:checked)::marker,
li:has(.required):has(input[type=text]):not(:has(input:placeholder-shown))::marker,
li:has(.required):has(input[type=number]):not(:has(input:placeholder-shown))::marker,
td:has(.required):has(input:checked) b,
td:has(.required):has(input[type=text]):not(:has(input:placeholder-shown)) b,
td:has(.required):has(input[type=number]):not(:has(input:placeholder-shown)) b {
  color: black;
}

li:has(.required) * {
  color: black !important;
}

li:has(.required) *::before {
  content: '';
}

th.required::before {
  position: static;
  padding-right: 0.3rem;
}

label:has(input:checked) {
  background: #dfd;
  border-radius: 10px;
}

label {
  padding-right: 0.3rem;
}

#AN td label {
  display: block;
}

label.county:not(:has(:checked[value=""])) ~ label.country,
label.county:not(:has(:checked[value=""])) ~ label.country + br {
  display: none;
}

label.county {
  &:has(:checked[value=""]) ~ * {
    option[value="CP"],
    option[value="Direct"] {
      display: none;
    }
  }

  &:not(:has(:checked[value=""])) ~ * {
    option[value="RES"],
    option[value="ESP"],
    option[value="Inhouse"] {
      display: none;
    }
  }
}

input[type="text"]:placeholder-shown:not(:focus),
select:not(:focus):has(option:checked[value=""]) {
  background: #f8f8f8;
}

label:has(input[type="text"]):not(:has(input[type="text"]:placeholder-shown)) {
  color: gray;
}

label.nmpflocks br {
  display: none;
}

#AN table.type b {
  text-align: center;
  display: block;
  background: #f8f8f8;
  padding: 0.3rem 0.8rem;
  border-bottom: 1px solid #444;
  margin-bottom: 0.3rem;
}

#AN table.type td {
  padding: 0;
}

#AN table input {
  margin-left: 0.5rem;
}

button.delete {
  padding: 0 0.2rem;
  width: auto;
  font-size: 80%;
  color: red !important;
}

#SampleIDs td:nth-child(1) {
  white-space: nowrap;
  user-select: none;
}

button.Clearform {
  color: brown;
}

#SampleInfo {
  position: relative;
  padding: 0;
  max-width: 100vw;
}

#SampleIDs tr > * {
  padding: 0.2rem 0.3rem;
  border-right: 1px solid #bbb;
}

#SampleIDs tr:has(.selected) td:nth-child(1) {
  background: #ccc;
}

#SampleIDs:not(:has(tr:nth-child(2))) button {
  display: none;
}

#SampleIDs td.number {
  text-align: right;
  color: navy;
}

#Home {
  padding: 0.3rem;
  width: 10rem;
  display: none;

  h2,
  h3 {
    margin: 0.5rem 0;
  }

  h2 {
    background: #333;
    color: #ddd;
    padding: 0.3rem;
    font-size: 110%;
    margin: 0;
    margin-top: 0.5rem;
  }
  
  h3 {
    font-size: 100%;
  }

  button {
    display: block;
    width: 100%;
    height: 1.8rem;
    text-align: left;
  }

  img {
    position: fixed;
    top: 0;
    left: 10rem;
    width: calc(100% - 8rem);
  }
}

img.home {
  height: 1.5rem;
  margin-right: 0.5rem;
  position: absolute;
}

td.selected {
  background: #ace !important;
}

td.anchor {
  background: #eee !important;
}

#SampleIDs tr:has(td.edited) td:nth-child(1)::before {
  content: '* ';
}

#Record {
  position: fixed;
  z-index: 9999;
  background: #def;
  padding: 0.5rem;
  border: 1px solid #333;
  display: none;

  button {
    white-space: nowrap;
    width: 100%;
    margin-bottom: 0.3rem;
    text-align: left;
  }
}

button.Home {
  margin-right: 1rem;
  img {
    vertical-align: bottom;
    height: 1rem;
  }
}

button[data-type] {
  display: none;
}

body.FE button[data-type=FE],
body.MI button[data-type=MI],
body.WW button[data-type=WW],
body.AN button[data-type=AN],
body.CO button[data-type=CO],
body.PL button[data-type=PL],
body.SP button[data-type=SP],
body.WA button[data-type=WA],
body.SS button[data-type=SS],
body.SS button[data-type=SO],
body.AM button[data-type=AM],
body.GR button[data-type=GR],
body.SA button[data-type=SA],
body.SO button[data-type=SO],
body.TO button[data-type=TO],
body.WA button[data-type=WA],
body.SO button[data-type=SO] {
  display: inline;
}

body:has(button.selected[data-type=FE]) button[data-type=FE],
body:has(button.selected[data-type=MI]) button[data-type=MI],
body:has(button.selected[data-type=WW]) button[data-type=WW],
body:has(button.selected[data-type=AN]) button[data-type=AN],
body:has(button.selected[data-type=CO]) button[data-type=CO],
body:has(button.selected[data-type=PL]) button[data-type=PL],
body:has(button.selected[data-type=SP]) button[data-type=SP],
body:has(button.selected[data-type=WA]) button[data-type=WA],
body:has(button.selected[data-type=SS]) button[data-type=SS],
body:has(button.selected[data-type=SS]) button[data-type=SO],
body:has(button.selected[data-type=AM]) button[data-type=AM],
body:has(button.selected[data-type=GR]) button[data-type=GR],
body:has(button.selected[data-type=SA]) button[data-type=SA],
body:has(button.selected[data-type=SO]) button[data-type=SO],
body:has(button.selected[data-type=TO]) button[data-type=TO],
body:has(button.selected[data-type=WA]) button[data-type=WA],
body:has(button.selected[data-type=SO]) button[data-type=SO] {
  display: inline;
}

body:not(.editing) button[data-show=editing] {
  display: none !important;
}

div.options {
  background: #eee;
}

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

.complete {
  color: green;
}

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

[title] {
  cursor: pointer;
}

.scroller {
  overflow: auto;
  /* overflow-x: hidden; */
  position: relative;
  height: 100%;
  width: 100%;
  background: #bbb;
}

.scroller > div {
  height: 1000rem;
}

.scroller table {
  position: sticky;
  top: 0;
  background: white;
}

#Columns {
  display: none;
  position: absolute;
  z-index: 999;
  overflow: hidden;

  input {
    font-size: 120%;
    padding: 0.5rem;
  }
}

.criteria {
  /* padding: 0rem !important; */
  min-width: 0;
}

.norecords {
  color: brown;
  font-weight: bold;
  background: white;
  width: 100vw;
  padding: 0.5rem;
}

#Background {
  filter: brightness(90%) contrast(120%);
  opacity: 0.8;

  height: 100%;
  width: 100%;
}


hr, hr ~ * {
  visibility: hidden;
}

img.background {
  width: calc(25vw - 5px);
  height: calc(25vh - 5px);
  float: left;
  border: 1px solid #888;
  border-radius: 5px;
}


#SampleInfo {
  th {
    vertical-align: bottom;
  }

  th[data-unit]::before {
    white-space: pre-wrap;
    font-size: 90%;
    color: gray;
    font-weight: normal;
  }

  th[data-unit]::before {
    content: attr(data-unit) '\A';
  }

  th[data-unit="undefined"]::before {
    content: '';
  }

  td.boolean {
    text-align: center;
    padding: 0;
    font-size: 120%;
  }

  td.boolean::before {
    content: '☐' !important;
  }

  td.boolean[data-content="-1"]::before,
  td.boolean[data-content="true"]::before {
    color: green;
    font-weight: bold;
    content: '☑' !important;
  }
}

datalist option {
  padding: 0;
  margin: 0;
  color: blue;
  display: none;
}