@media print {
  @page {
    size: landscape;
  }

  body, #Data .data {
    background: white !important;
  }

  button, nav, tr:nth-child(1) {
    display: none;
  }

  div.pH1, div.pH2 {
    float: left;
  }

  table {
    float: left;
    page-break-inside: avoid !important;
  }
}

@media screen {
  body {
    background: #ddd;
    height: 100%;
  }

  #Data {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  #Data .data {
    white-space: nowrap;
    overflow: auto;
  }

  #ranges {
    display: none;
  }
}

#Data .data {
  background: #ddd;
}

#Data table {
  font: 12px arial;
  background: white;
}

#Data th {
  background: #dfd;
}

#Data .qc td, #Data .r10 td, #Data .r20 td, #Data tr.qc td:nth-child(1) {
  background: #cef;
  color: black;
}

#Data table {
  display: inline-block;
  vertical-align: top;
  margin-right: 0.1em;
  font: 11px arial;
}

#Data td.error {
  background: #faa;
}

#Data td.warning {
  background: yellow;
}

#Data td:nth-child(2), #Data td:nth-child(3), #Data td:nth-child(4), #Data td:nth-child(n+9) {
  text-align: right;
}

#Data td:nth-child(1) {
  background: #eee;
}

#Data td.saved {
  color: red !important;
}

#Data button[disabled] {
  opacity: 0.5;
}

.data button {
  height: 30px;
  font: 12px arial;
  margin-right: -0.4em;
  width: 6.5em;
  position: relative;
  text-align: left;
}

.data button img {
  height: 20px;
  position: absolute;
  right: 2px;
  top: 2px;
}

#Data tr:nth-child(1) td {
  vertical-align: top;
  word-spacing: 1em;
  background: white;
}

#Data img, #Data button {
  cursor: pointer;
}

.selected {
  background: #bfb;
}

nav {
  background: #333;
  color: white;
  font-weight: bold;
  padding: 0.5em;
}

nav > button {
  width: 6em;
}

td {
  padding: 0.2em 0.5em;
}

table.saved td:nth-child(1) {
  color: red;
}

#Data input.date {
  width: 7em;
  background: #333;
  color: white;
  border: 1px solid #ddd;
  text-align: center;
  margin: 0 1em;
  cursor: pointer;
}

#Data table {
  background: #cef;
}

table td {
  background: white;
}

button.close {
  float: right;
}

#Data .data > div {
  display: inline-block;
}

#Data .data > div.pH1:not(:empty) {
  margin-right: 2em;
}

button.clients {
  clear: both;
}

button.close {
  width: 2em;
}

button.printall {
  position: absolute;
  right: 5px;
  height: 30px;
}

button.printall img {
  height: 20px;
}

body.offsite button.save,
body.offsite button.print,
body.offsite button.edit,
body.offsite button.clients,
body.offsite button.export,
body.offsite button.trash,
body.offsite button.printall {
  display: none;
}

body.Flagged table:not(.warning):not(.error),
body.Saved table:not(.saved),
body.Unsaved table.saved {
  display: none !important;
}