@font-face {
  font-family: 'Montserrat';
  src:  url('../classes/fonts/Montserrat-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  src:  url('../classes/fonts/Montserrat-Bold.ttf') format('truetype');
  font-weight: bold;
}
@font-face {
  font-family: 'Montserrat';
  src:  url('../classes/fonts/Montserrat-Light.ttf') format('truetype');
  font-weight: lighter;
}

/* https://color.adobe.com/create/color-wheel */

:root {
  --olab-text-def: #49226f; /* Default text */
  --olab-colour-highlight: rgb(0,176,240);
  --olab-colour-accent: rgb(58,222,142);
  --olab-colour-patient: #F03F0C;
  --olab-colour-patient-void: rgba(240, 61, 12, 0.205);
  
  --olab-colour-sample: rgb(0,176,240);
  --olab-colour-sample-void: rgba(0, 176, 240, 0.301);
  --olab-colour-batch: rgb(128, 128, 128);
  --olab-colour-sop: rgb(58,222,142);
  --olab-colour-sop-step: rgb(85, 166, 177);
  --olab-layout-gap: 10px;
}

body {
  font-family: 'Montserrat';
  font-size: 19px;
  padding: 0;
  margin: 0;
}

button {
  font-size: 1em;
  padding: 5px 10px;
  margin: 5px 10px;
  border-radius: 5px;
}

a.fake-button, a.fake-button:active, a.fake-button:visited {
  font-size: 1em;
  padding: 5px 10px;
  margin: 5px 10px;
  border-radius: 5px;
  border: 2px solid rgb(118, 118, 118);
  box-sizing: border-box;
  background-color: rgb(239, 239, 239);
  border-radius: 5px;
  color: black;
  text-decoration: black;
  font-family: Arial;
}

.menu-icon { display: none; }

.left-menu {
  position: fixed;
  background: white;
  top: 0; left: 0; bottom: 0;
  width: 200px;
  padding: 0 var( --olab-layout-gap );
  display: block;
  border: 0px solid var( --olab-colour-highlight );
  border-radius: 10px;
  box-sizing: border-box;
  transition: 0.15s;
  z-index: 100;
}
.left-menu > * {
  display: block;
  margin-top: var( --olab-layout-gap );
}

.left-menu > a {
  font-weight: bold;
  color: var( --olab-colour-highlight );
  border: 3px solid var( --olab-colour-highlight );
  border-radius: 10px;
  text-decoration: none;
  padding: 10px 0;
  text-align: center;
  cursor: pointer;
}

.left-menu .repo {
  font-style: italic;
}
.left-menu p , .left-menu a {
  display: block;
  text-align: center;
}


.routes {
  margin-left: 200px;
  transition: 0.15s;
}
.route {
  margin: 0 var( --olab-layout-gap );
  padding-bottom: var( --olab-layout-gap );
  display: none;
}
  .route.active { display: block; }

.sub-route { display: none; }
.sub-route.active { display: block; }


.route-title {
  font-size: 2em;
  /* font-weight: bold; */
  margin: calc( var( --olab-layout-gap ) * 2 ) 0;

}

.box-standard {
  border: 3px solid var( --olab-colour-highlight );
  border-radius: 10px;
  padding: var( --olab-layout-gap );
}

.top-search-container {
  border: 3px solid var( --olab-colour-highlight );
  border-radius: 10px;
  margin-top: var( --olab-layout-gap );
  padding: var( --olab-layout-gap );
  text-align: center;
  font-size: 20px;
}

.top-search-container > * {
  display: inline-block;
}
.top-search-container button {
  font-size: 1em;
  padding: 5px 10px;
  margin-left: 10px;
  border-radius: 5px;
}
input, select, textarea {
  font-size: 0.9em;
  padding: 5px;
  border-radius: 5px;
  font-family: 'Montserrat';
  background: #f0f0f0;
  border: 2px solid #222;
  color: #222;
  opacity: 1;
}
input::placeholder {
  color: #bbb;
  font-size: 0.9em;
  font-weight: normal;
}

/* Form Item */

.fitem {
  display: grid;
  grid-template-columns: 200px 1fr min-content min-content;
  margin: var( --olab-layout-gap ) auto;
  max-width: 600px;
  
}
  .fitem.fitem-rows {
    grid-template-columns: auto min-content min-content;
  }

.fitem input, .fitem select, .fitem textarea {
  max-width: 300px;
}

.fitem p {
  grid-column: 1 / 3;
  font-style: italic;
}
.fitem label {
  grid-column: 1 / 2;
  align-self: center;
}
.fitem a {
  grid-column: 2 / 3;
}
  .fitem.fitem-rows label {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
  }

.fitem div.input {
  border: 1px solid grey;
  border-radius: 5px;
}

.fitem input, .fitem textarea  {
  grid-column: 2 / 3;
  background: #f0f0f0;
}
  .fitem.fitem-rows textarea {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
  }


.fitem input:not(:read-only) {
  background: white;
}

.fitem select:not(:disabled) {
  background: white;
}

.fitem .button-edit {
  grid-row: 1 / 2;
  grid-column: 3 / 4;
  align-self: center;
  text-align: center;
  font-size: 1.5em;
  cursor: pointer;
  width: 50px;
}
.fitem .button-history {
  grid-row: 1 / 2;
  grid-column: 4 / 5;
  align-self: center;
  font-size: 1.5em;
  text-align: center;  
  cursor: pointer;
  width: 50px;
}
.fitem .fitem-save-buttons {
  grid-row: 3 / 4;
  grid-column: 2 / 3;
  align-self: right;
  text-align: right;
}
.fitem .fitem-reason {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  font-style: italic;
  margin: 10px 0;
  border: 1px solid grey;
  font-size: 0.8em;
}

.fitem .fitem-save-buttons button {
  font-size: 0.8em;
  margin: 10px 5px;
}

.fitem-buttons {
  margin: var( --olab-layout-gap ) auto;
  padding: var( --olab-layout-gap ) 0;
  text-align: center;
}
.fitem-buttons button {
  display: inline-block;
  font-size: 1em;
  padding: 5px 10px;
  margin-left: 10px;
  border-radius: 5px;
}

.fitem-history {
  margin: 10px 0;
  grid-column: 1 / 5;
  grid-row: 3 / 4;
}
.fitem-history-record {
  display: grid;
  grid-template-columns: auto 150px;
  grid-template-rows: min-content min-content;
  border: 1px solid grey;
  border-radius: 5px;
  margin: 10px 0;
  padding: 5px;
}
.fitem-history .fitem-history-value {
  grid-column: 1 / 2;
  grid-rows: 1 / 3;
}
.fitem-history .fitem-history-createdby {
  grid-column: 2 / 3;
  grid-rows: 2 / 3;
  font-size: 0.8em;
  text-align: right;
}
.fitem-history .fitem-history-createdtime {
  grid-column: 2 / 3;
  grid-rows: 1 / 2;
  font-size: 0.8em;
  text-align: right;
}

.fitem-history .style-excel table {
  /* margin: 0; */
  /* align-self: center; */
}

.fitem.required label::after {
  content: " *";
}
.fitem.required input {
  border-color: red;
}

/* Auto list */

.auto-list-item > div {
  border: 3px solid #444;
  border-radius: 10px;
  position: relative;
  margin-top: 10px;
  padding: 10px;
  color: #444;;
  display: block;
}

.auto-list-item .auto-list-item-id {
  position: absolute;
  bottom: -10px;
  right: 15px;
  font-size: 0.8em;
  font-weight: bold;
  background: white;
  padding: 0 5px;
  cursor: pointer;
}
.auto-list-item .auto-list-item-id::before {
  content: "id ";
}

.auto-list-item .auto-list-item-icon {
  position: absolute;
  top: 4px;
  right: 5px;
}


.auto-list-item > div.patient { border-color: var( --olab-colour-patient ); }

.auto-grid-item.patient::after {
  content: "Patient";
  position: absolute;
  background: white;
  padding: 0 5px;
  top: -8px;
  left: 10px;
  font-weight: bold;
  font-size: 0.6em;
}

.auto-list-item > div.sample { border-color: var( --olab-colour-sample ); }

.auto-grid-item.sample::after {
  content: "Sample";
  position: absolute;
  background: white;
  padding: 0 5px;
  top: -8px;
  left: 10px;
  font-weight: bold;
  font-size: 0.6em;
}

.auto-list-item > div.report::after {
  content: "Report";
  position: absolute;
  background: white;
  padding: 0 5px;
  top: -8px;
  left: 10px;
  font-weight: bold;
  font-size: 0.6em;
}


/* Locations  */

.locationtype {
  margin: 10px auto;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 200px 200px 100px;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
}

.location {
  margin: 10px auto;
  display: flex;
  grid-auto-flow: column;
  grid-template-columns: 200px 200px 200px 100px;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
}
.location > * {
  padding-right: 10px;

}

/* SOP */

.sop {
  border: 3px solid var( --olab-colour-sop );
  border-radius: 10px;
  margin-top: var( --olab-layout-gap );
  padding: var( --olab-layout-gap );
}

.sop .sop-title {
  font-size: 1.5em;
  font-weight: bold;
  color: var( --olab-colour-sop );
}

.sop .sop-description {
  margin: 10px 0;
  color: var( --olab-colour-sop );  
}

.sop .sop-version {
  margin: 10px 0;
  font-size: 0.8em;
  color: var( --olab-colour-sop );  
}

.sop .sop-lastupdated {
  margin: 10px 0;
  font-size: 0.8em;
  color: var( --olab-colour-sop );  
}


.sop-step {
  border: 3px solid var( --olab-colour-sop-step );
  border-radius: 10px;
  margin-top: var( --olab-layout-gap );
  padding: var( --olab-layout-gap );
  display: grid;
  grid-template-columns: auto min-content min-content;
}

  .sop-step button.sop-step-edit {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    white-space: nowrap;
    
    align-self: center;
    justify-self: center;
  }
  .sop-step button.sop-step-move-up {
    grid-row: 1 / 2;
    grid-column: 3 / 4;
    white-space: nowrap;
    
    align-self: center;
    justify-self: center;
  }
  .sop-step .sop-description {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    overflow: hidden;
    /* white-space: nowrap; */
    text-overflow: ellipsis;
    align-self: center;
  }

.sop-step .sop-step-title {
  font-size: 30px;
  font-weight: bold;
  color: var( --olab-colour-sop-step );
}

.sop-step .sop-step-instruction {
  margin: 10px 0;
  color: var( --olab-colour-sop-step );  
}

.sop-step .sop-step-result {
  margin: 10px 0 0 0;
  color: var( --olab-colour-sop-step );
  background: white;
  border: 1px solid black;
  border-radius: 10px;
  padding: 10px;
}

/* File upload */

.file-drop-target {
  border: 3px dashed red;
  border-radius: 10px;
  padding: 20px;
  margin: 20px;
}
.file-drop-target.file-over {
  border: 3px solid red;
}

/* Batch */

.style-excel table {
  padding: 0;
  border-collapse: collapse;  
  margin: 0 auto;
}
.style-excel table td {
  /* height: 20px; */
  border: 1px solid #D4D4D4;
  padding: 3px;
  /* overflow: hidden; */
  /* max-height: 20px; */
}
.style-excel table th {
  font-family: "Calibri", Arial, Helvetica, sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
  font-size: 12pt;  
  height: 20px;
  background: #eee;
  /* overflow: hidden; */
  max-width: 100px;
  max-height: 20px;
  font-weight: normal;
  border: 1px solid #ccc;
  min-width: 40px;
}

.style-excel table div.cell > * { display: none; }

.style-excel table td .cell {
  display: block;
  font-family: "Calibri", Arial, Helvetica, sans-serif;
  font-size: 12pt;
  min-height: 20px;
  /* line-height: 20px; */
  padding: 0 4px;
  min-width: 30px;
  background: white;
  /* white-space: nowrap; */
}

.style-excel table div.cell > .cell-value {
  display: block;
  max-width: 150px;  
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.style-excel table div.cell:hover > .cell-name { display: block; }

.style-excel table div.cell:hover > .cell-json { display: block; }


.style-excel table td .cell.ok {
  background: #ccffcc;
}

.style-excel table td .cell.warn {
  background: #ffe69b;
}

.style-excel table td .cell.error {
  background: #ffcccc;
}
.style-excel table td .cell:hover, .route-batch table td > div.editing {
  max-width: initial;
  font-size: 20px;
  line-height: 30px;
  height: 30px;
  border: 1px solid black;
  position: absolute;
  overflow: initial;

  max-width: 300px;
  max-height: initial;
  white-space: initial;
  height: auto;
  width: 300px;
  margin-top: -10px;
}
.style-excel table td .cell:hover .cell-value {
  width: 300px;
  max-width: 300px;
  max-height: initial;
  white-space: initial;
  height: auto;
}

/* Sample */

.sample {
  border: 3px solid var( --olab-colour-sample );
  border-radius: 10px;
  margin-top: var( --olab-layout-gap );
  padding: var( --olab-layout-gap );
  color: var( --olab-colour-sample );
  position: relative;
}
  .sample.is-void {
    border-color: var( --olab-colour-sample-void );
  }
  .sample.is-void td {
    color: rgb( 192 , 192 , 192 );
  }



.sample > .fa {
  position: absolute;
  top: 4px;
  right: 3px;
}

.sample.is-child {
/*
  margin-left: 50px;
*/
}
.sample.is-child::before {
  content: "Child";
  position: absolute;
/*
  top: calc( 50% - 15px);
*/
  bottom: 5px;
  right: 15px;
}

.sample > .sample-id {
  position: absolute;
  bottom: -10px;
  right: 15px;
  font-size: 0.8em;
  font-weight: bold;
  background: white;
  padding: 0 5px;
  cursor: pointer;
}
.sample > .sample-id::before {
  content: "id ";
}


.sample .sample-title {
  font-size: 30px;
  font-weight: bold;
}

.sample .sample-number {
  margin-top: 10px;
}

.sample .bundles-list {
  margin-top: 5px;
  color: black;
  font-size: 0.8em;
}
.sample .bundles-list > .bundle-title {
  font-weight: normal;
  text-decoration: underline;
  cursor: pointer;
}

/* Scratchpad */

.patient-scratchpad-titles span {
  text-decoration: underline;
  cursor: pointer;
  font-weight: normal;
}

.patient-scratchpad-titles span.selected {
  font-weight: bold;
}


/* List actions */

.list-action {
  display: block;
  margin: 30px auto;
  padding: 10px;
  text-align: center;
  border: 3px solid #ddd;
  border-radius: 10px;
  position: relative;
  width: min( 100vw - 46px , 600px );
}
.list-action > label {
  position: absolute;
  left: 8px;
  top: -10px;
  padding: 0 3px;
  font-size: 15px;
  background: white;
  color: #888;
}

.patient {
  border: 3px solid var( --olab-colour-patient );
  border-radius: 10px;
  position: relative;
  margin-top: var( --olab-layout-gap );
  padding: var( --olab-layout-gap );
  color: var( --olab-colour-patient );
  display: block;
}
  .patient.is-void {
    border-color: var( --olab-colour-patient-void );

  }
  .patient.is-void td {
    color: rgb( 192 , 192 , 192 );
  }


.patient > .fa {
  position: absolute;
  top: 4px;
  right: 5px;
}

.patient > .patient-id {
  position: absolute;
  bottom: -10px;
  right: 15px;
  font-size: 0.8em;
  font-weight: bold;
  background: white;
  padding: 0 5px;
  cursor: pointer;
}
.patient > .patient-id::before {
  content: "id ";
}

.patient > .patient-num-samples {
  position: absolute;
  color: var(--olab-colour-sample );
  bottom: -10px;
  right: 110px;
  font-size: 0.8em;
  background: white;
  padding: 0 5px;
  cursor: pointer;
}


.patient > .patient-icon {
  grid-row: 1 / 3;
  grid-column: 1 / 2;
  align-self: center;
  text-align: center;
}

.patient > .patient-dob {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}

.patient > .patient-initials {
  font-weight: bold;
  grid-row: 1 / 2;
  grid-column: 2 / 3;
}

.patient .patient-name {
  font-size: 30px;
  font-weight: bold;
}

.patient .patient-number {
  margin-top: 10px;
}


.colour-patient {
  color: var( --olab-colour-patient ) !important;
  border-color: var( --olab-colour-patient ) !important;
}
.colour-sop {
  color: var( --olab-colour-sop ) !important;
  border-color: var( --olab-colour-sop ) !important;
}
.colour-sample {
  color: var( --olab-colour-sample ) !important;
  border-color: var( --olab-colour-sample ) !important;
}


/* Batches */

.batch {
  border: 3px dashed var( --olab-colour-batch );
  border-radius: 10px;
  margin-top: var( --olab-layout-gap );
  padding: var( --olab-layout-gap );
  color: var( --olab-colour-batch );
  cursor: pointer;
}

/* Auto-table layout */

table.auto-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

table.auto-table td {
  padding: 5px;
  vertical-align: top;
}
table.auto-table td.center { text-align: center; }
table.auto-table td.right { text-align: right; }
table.auto-table td.bold { font-weight: bold; }
table.auto-table td.italic { font-style: italic; }
table.auto-table td.larger { font-size: 1.2em; }
table.auto-table td.smaller { font-size: 0.8em; }
table.auto-table td.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
table.auto-table .fieldname {
  font-size: 0.7em;
  font-weight: normal;
}

.tab-header {
  display: flex;
  justify-content: center;
  padding: 10px;
}

.tab-header > div {
  font-weight: bold;
  font-size: 0.9em;
  border-bottom: 3px solid transparent;
  padding: 5px 1ch;
  cursor: pointer;
}

.tab-header > div.active {
  border-bottom: 3px solid grey;
}

.tab-body > div:not(.active) {
  display: none;
}


select.auto-list-sort {
  display: block;
  margin: 10px auto;
}

.block-center {
  display: block;
  margin: 10px auto;
}

.auto-list-item-container {
  display: grid;
  grid-template-columns: auto auto auto;
}

.auto-list-limitrows {
  display: block;
  margin: 10px;
  text-align: center;
}

.auto-list-item-container input.auto-list-item-checkbox {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  align-self: center;
  font-size: 2em;
  height: 1em;
  width: 1em;
  margin: 10px;
  border-radius: 10px;
}


.auto-list-item-container button.auto-list-item-order-up {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  align-self: end;
  font-size: 0.8em;
  margin: 10px;
  border-radius: 10px;
}


.auto-list-item-container .auto-list-item-button-container {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
  align-self: center;
}

.auto-list-item-container .auto-list-item {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.auto-list-item .item-id {
  position: absolute;
  bottom: -10px;
  right: 15px;
  font-size: 0.8em;
  font-weight: bold;
  background: white;
  padding: 0 5px;
  cursor: pointer;
}
.auto-list-item .item-id::before {
  content: "id ";
}


/* Bundles */

.bundle-board {
  width: 100%;
  margin: 10px auto;
}
.bundle-board td, .bundle-board th {
  background: #ddd;
}

.bundle-board th {
  min-width: 200px;
  padding: 5px;
  font-weight: normal;
}

.bundle-board td {
  min-height: 50vh;
  height: 50vh;
  vertical-align: top;
}


.bundle {
  border: 2px solid var( --olab-colour-sop );
  border-radius: 5px;
  padding: 5px 5px 10px 5px;
  margin: 5px 5px 10px 5px;
  cursor: pointer;
  user-select: none;
  position: relative;
}

.bundle::before {
  content: "Bundle";
  position: absolute;
  bottom: -8px;
  font-size: 0.8em;
  font-weight: bold;
  color: var( --olab-colour-sop );
  left: 10px;
  padding: 0px 5px;
  background: white;
}

.bundle-title {
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90%;
}
.bundle-soptitle {
  font-size: 0.8em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bundle-numsamples {
  font-size: 0.8em;
  overflow: hidden;
}
.bundle-assigneduser {
  font-size: 0.8em;
  overflow: hidden;
}
.bundle-started {
  font-size: 0.8em;
  overflow: hidden;
  font-style: italic;
}

.bundle-step-instructions .module-shortcode {
  padding: 10px;
  margin: 10px;
  border: 1px solid grey;
}

/* Reports */

.report {
  /* display: block;
  margin: 10px;
  border: 1px solid grey; */
}

.report > div {
  /* display: inline-block; */
  /* margin: 10px; */

}

.report-graph img {
  max-width: 100%;
}


.draggable-target {
  border: 1px solid transparent;
}

.draggable-target.draggable-dragging-over {
  /* border: 1px solid red; */
  background: #eee;
}


/* Editable result */

.fitem.result {
  display: grid;
  grid-template-columns: 200px 1fr 100px min-content min-content;
}
.fitem.result .resultName {
  grid-column: 1 / 2;
  grid-row: 1/2;
}
.fitem.result .result-request-name {
  grid-column: 1 / 2;
  grid-row: 2/3;
  font-size: 0.8em;
  opacity: 0.75;
}
.fitem.result input , .fitem.result textarea {
  grid-column: 2/3;
  grid-row: 1/3;
}
.fitem.result .bundle-id {
  grid-column: 3/4;
  grid-row: 1/2;
  font-size: 0.8em;
  padding: 4px;
}
.fitem.result .result-source {
  grid-column: 3/4;
  grid-row: 2/3;
  font-size: 0.8em;
  padding: 4px;
}
.fitem.result .bundle-id::before {
  content: 'Bundle ';
}
.fitem.result .button-edit {
  grid-column: 4/5;
  grid-row: 1/2;
}
.fitem.result .button-history {
  grid-column: 4/5;
  grid-row: 2/3;
}


/* Patchable */

.patchable {
  outline: 1px dashed #aaa;
}

.patchable.patchable-editing {
  outline: 3px solid #444;
}

/* Users */

.user .permissions .permission {
  display: inline-block;
  border: 1px solid grey;
  border-radius: 3px;
  margin: 2px 5px;
  padding: 2px 5px;
  cursor: pointer;
}

.user h4 {
  margin: 12px 0;
}

/* Specific route overrides */


.route-report .sample-list .bundle-container {
  margin: 10px;
  display: grid;
  grid-template-columns: min-content auto;
}
.route-report .sample-list .bundle-container > input[type="checkbox"] {
  font-size: 2em;
  height: 1em;
  /* height: 20px; */
  width: 1em;
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  align-self: center;
  margin: 10px;
  border-radius: 10px;
}
.route-report .sample-list .sample-container > * {
  /* display: inline-block; */
}