:root {
  --fontFamily: Verdana, Helvetica, sans-serif;
  --fontSize: 16px;
  --fontColorLightOnDark: #ffffff;
  --fontColorDarkOnLight: #000000;
  --badRed: #CC0000;
  --badRedLight: #ff6666;
  --badRedDark: #7f0000;
  --goodGreen: #00BB00;
  --goodGreenLight: #82ff82;
  --goodGreenDark: #005e00;
  --warnYellow: #ffcc00;
  --warnYellowLight: #ffe066;
  --warnYellowDark: #cc9900;
  --primaryColor: #376996;
  --primaryColorLight: #6290C8;
  --primaryColorLighter: #9AC5F9;
  --primaryColorDark: #1F487E;
  --primaryColorDarker: #1D3461;
  --secondaryColor: #6c757d;
  --secondaryColorLight: #a6a9ad;
  --secondaryColorDark: #494f54; 

  --buttonBackgroundColor: var(--primaryColorLight);
  --buttonBorderColor: var(--primaryColorDark);
  --buttonTextColor: #ffffff;
  --buttonBackgroundColorHover: var(--primaryColorLighter);
  --buttonBorderColorHover: var(--primaryColorDarker);
  --buttonTextColorHover: #ffffff;
  --buttonBackgroundColorActive: var(--primaryColorDark);
  --buttonBorderColorActive: var(--primaryColorDarker);
  --buttonTextColorActive: #ffffff;
  --buttonBackgroundColorDisabled: #cccccc;
  --buttonBorderColorDisabled: #999999;
  --buttonTextColorDisabled: #555555;
  
  --tableRowBgColor: #f8f9fa;
  --tableRowAltBgColor: #e9ecef;
  --tableRowSetPointBgColor: #e7fbbd;
  --tableRowSetPointAltBgColor: #d1e99c;
  --tableRowHoverBgColor: #fff;

  --trialTableRowBgColor: #f0f0f0;
  --trialTableRow2ndColor: #fde9d9;
  --trialTableRow2ndColorHover: #fff2e7;
  --trialTableRow4thColor: #ebf1de;
  --trialTableRow4thColorHover: #f0f8ff;
  --trialTableRow6thColor: #dce6f1;
  --trialTableRow6thColorHover: #e6f0fa;
  --trialTableRow8thColor: #f2dcdb;
  --trialTableRow8thColorHover: #f9e6e5;
  --trialTableRow10thColor: #e4dfec;
  --trialTableRow10thColorHover: #ede8f5;
  --trialTableRow12thColor: #ddd9c4;
  --trialTableRow12thColorHover: #e8e5d4;
  --trialTableRow14thColor: #c5d9f1;
  --trialTableRow14thColorHover: #dceaf9;
  --trialTableRow16thColor: #e6b8b7;
  --trialTableRow16thColorHover: #f4d1d0;
  --trialTableRow18thColor: #daeef3;
  --trialTableRow18thColorHover: #e6f4f8;
  --trialTableRow20thColor: #fcd5b4;
  --trialTableRow20thColorHover: #fde6c9;

  --footerHeight: 30px;
  --headerHeight: 72px;
}
html {
  font-family: var(--fontFamily);
  font-size: var(--fontSize);
}

a {
  color: var(--primaryColorLight);
  text-decoration: none;
}
a:hover {
  color: var(--primaryColor);
  text-decoration: underline;
}

body {
  margin: 0;
  margin-bottom: var(--footerHeight);
  height: calc(100vh - var(--footerHeight));
  background: #FFFFFF;
  background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(154, 197, 249, 1) 50%, rgba(31, 72, 126, 1) 100%);
  background-image: url('images/Copilot_20261001_081132-cropped.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}


footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  padding: 5px;
  height: var(--footerHeight);
  background-color: var(--primaryColorDarker);
  color: #ffffff;
  box-sizing: border-box;
}
footer a {
  color: #ffffff;
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--primaryColor);
}

table {
  border-collapse: collapse;
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

table,
th,
td {
  border: 1px solid var(--primaryColor);
}

th {
  color: var(--primaryColor);
}

th,
td {
  padding: 5px 10px;
  text-align: left;
}

thead {
  position: sticky;
  top: 0;
  z-index: 1;
}

tr:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
}

tbody > tr > td > input {
  width: 100%;
  box-sizing: border-box;
  background-color: transparent;
  border-top: none;
  border-left: none;
  border-right: none;
}

td > button {
  padding: 1px 6px;
}

input[type="number"] {
  width: 80px;
}

tfoot {
  background-color: var(--primaryColorDark);
}

tr.trialTableRow > th {
  font-weight: normal;
}

tr:nth-child(even) {
  background-color: var(--tableRowAltBgColor); /* Light gray for even rows */
}
tr:nth-child(even):hover {
  background-color: var(--tableRowHoverBgColor);
}
tr:nth-child(odd) {
  background-color: var(--tableRowBgColor); /* White for odd rows */
}
tr:nth-child(odd):hover {
  background-color: var(--tableRowHoverBgColor);
}

tr.set-point {
  background-color: var(--tableRowSetPointBgColor);
}
tr.set-point:nth-child(even) {
  background-color: var(--tableRowSetPointAltBgColor);
}
tr.trialTableRow {
  cursor: pointer;
}
/*2nd Row visually, 3/4 in table*/
tr.trialTableRow:nth-child(3) {
  background-color: var(--trialTableRow2ndColor);
}
tr.trialTableRow:nth-child(3):hover {
  background-color: var(--trialTableRow2ndColorHover);
}
/*4th Row visually, 7/8 in table*/
tr.trialTableRow:nth-child(7) {
  background-color: var(--trialTableRow4thColor);
}
tr.trialTableRow:nth-child(7):hover {
  background-color: var(--trialTableRow4thColorHover);
}
/* 6th Row visually, 11/12 in table */
tr.trialTableRow:nth-child(11) {
  background-color: var(--trialTableRow6thColor);
}
tr.trialTableRow:nth-child(11):hover {
  background-color: var(--trialTableRow6thColorHover);
}
/* 8th Row visually, 15/16 in table */
tr.trialTableRow:nth-child(15) {
  background-color: var(--trialTableRow8thColor);
}
tr.trialTableRow:nth-child(15):hover {
  background-color: var(--trialTableRow8thColorHover);
}
/* 10th Row visually, 19/20 in table */
tr.trialTableRow:nth-child(19) {
  background-color: var(--trialTableRow10thColor);
}
tr.trialTableRow:nth-child(19):hover {
  background-color: var(--trialTableRow10thColorHover);
}
/* 12th Row visually, 23/24 in table */
tr.trialTableRow:nth-child(23) {
  background-color: var(--trialTableRow12thColor);
}
tr.trialTableRow:nth-child(23):hover {
  background-color: var(--trialTableRow12thColorHover);
}
/* 14th Row visually, 27/28 in table */
tr.trialTableRow:nth-child(27) {
  background-color: var(--trialTableRow14thColor);
}
tr.trialTableRow:nth-child(27):hover {
  background-color: var(--trialTableRow14thColorHover);
}
/* 16th Row visually, 31/32 in table */
tr.trialTableRow:nth-child(31) {
  background-color: var(--trialTableRow16thColor);
}
tr.trialTableRow:nth-child(31):hover {
  background-color: var(--trialTableRow16thColorHover);
}
/* 18th Row visually, 35/36 in table */
tr.trialTableRow:nth-child(35) {
  background-color: var(--trialTableRow18thColor);
}
tr.trialTableRow:nth-child(35):hover {
  background-color: var(--trialTableRow18thColorHover);
}
/* 20th Row visually, 39/40 in table */
tr.trialTableRow:nth-child(39) {
  background-color: var(--trialTableRow20thColor);
}
tr.trialTableRow:nth-child(39):hover {
  background-color: var(--trialTableRow20thColorHover);
}

input {
  font-family: var(--fontFamily);
  font-size: var(--fontSize);
}

textarea {
  font-family: var(--fontFamily);
  font-size: var(--fontSize);
}

select {
  font-family: var(--fontFamily);
  font-size: var(--fontSize);
}

button {
  padding: 5px 10px;
  font-size: var(--fontSize);
  box-sizing: border-box;
  border-radius: 2px;
  border-style: solid;
  border-width: 1px;
  cursor: pointer;
  background-color: var(--buttonBackgroundColor);
  border-color: var(--buttonBorderColor);
  color: var(--buttonTextColor);
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
button:hover {
  background-color: var(--buttonBackgroundColorHover);
  border-color: var(--buttonBorderColorHover);
  color: var(--buttonTextColorHover);
}
button:active {
  background-color: var(--buttonBackgroundColorActive);
  border-color: var(--buttonBorderColorActive);
  color: var(--buttonTextColorActive);
}
button:disabled {
  background-color: var(--buttonBackgroundColorDisabled);
  border-color: var(--buttonBorderColorDisabled);
  color: var(--buttonTextColorDisabled);
  cursor: not-allowed;
}

nav {
  font-size: calc(var(--fontSize)  + 4px);
  background-color: var(--primaryColorDarker);
  color: var(--primaryColorLighter);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

nav > div {
  flex-direction: row;
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}
nav div a {
  display: inline-block;
  padding: 24px 15px;
  color: var(--primaryColorLighter);
  text-decoration: none;
}
nav div a:hover {
  color: #ffffff;
  background-color: var(--primaryColorDark);
  text-decoration: none;
}

nav div a:active {
  background-color: var(--primaryColorDarker);
}

.nav-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px;
  flex-grow: 0;
}

.nav-logo img {
  max-height: 50px;
}

.nav-title {
  font-weight: bold;
  display: flex;
  align-items: center;
  flex-grow: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  vertical-align: middle;
  justify-content: flex-end;
  flex-grow: 1;
}

.bad {
  color: var(--badRed);
  border-color: var(--badRed);
  outline-color: var(--badRedDark);
}

.warn {
  color: var(--warnYellow);
  border-color: var(--warnYellow);
  outline-color: var(--warnYellowDark);
}

.good {
  color: var(--goodGreen);
  border-color: var(--goodGreen);
  outline-color: var(--goodGreenDark);
}

button.bad {
  background-color: var(--badRedLight);
  border-color: var(--badRedDark);
  color: #ffffff;
}
button.bad:hover {
  background-color: var(--badRed);
  border-color: var(--badRedDark);
  color: #ffffff;
}
button.bad:active {
  background-color: var(--badRedDark);
  border-color: var(--badRedDark);
}
button.bad:disabled {
  background-color: var(--badRedDark);
  border-color: var(--badRedDark);
  color: #ffffff;
  cursor: not-allowed;
}

button.good {
  background-color: var(--goodGreen);
  border-color: var(--goodGreenDark);
  color: #ffffff;
}
button.good:hover {
  background-color: var(--goodGreenLight);
  border-color: var(--goodGreenDark);
  color: #ffffff;
}
button.good:active {
  background-color: var(--goodGreenDark);
  border-color: var(--goodGreenDark);
}
button.good:disabled {
  background-color: var(--goodGreenDark);
  border-color: var(--goodGreenDark);
  color: #ffffff;
  cursor: not-allowed;
}

button.warn {
  background-color: var(--warnYellow);
  border-color: var(--warnYellowDark);
  color: #ffffff;
}
button.warn:hover {
  background-color: var(--warnYellowLight);
  border-color: var(--warnYellowDark);
  color: #ffffff;
}
button.warn:active {
  background-color: var(--warnYellowDark);
  border-color: var(--warnYellowDark);
}
button.warn:disabled {
  background-color: var(--warnYellowDark);
  border-color: var(--warnYellowDark);
  color: #ffffff;
  cursor: not-allowed;
}

.badge {
  background-color: var(--primaryColor);
  color: #ffffff;
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 0.8em;
  vertical-align: middle;
  text-wrap: nowrap;
}

.content {
  background-color: #ffffff;
  padding: 20px;
  max-width: 1200px;
  max-height: calc(100vh - var(--headerHeight) - var(--footerHeight));
  margin: 0 auto;
  margin-top: var(--headerHeight);
  box-shadow: 0 30px 100px 50px var(--primaryColorDark);
}

.clickable {
  cursor: pointer;
}

.busy {
  cursor: wait;
}

.hidden {
  display: none;
}

div.breadcrumbs {
  margin-bottom: 20px;
  border: 1px solid var(--primaryColor);
  background-color: var(--primaryColorLighter);
  padding: 5px;
  color: var(--primaryColorDark);
  font-weight: bold;
}
div.breadcrumbs a {
  color: var(--primaryColorDark);
  text-decoration: none;
}
div.breadcrumbs a:hover {
  color: var(--primaryColorDarker);
  text-decoration: underline;
}

/* Autocomplete (Courtesy of w3schools.com) */
.autocomplete {
  /*the container must be positioned relative:*/
  position: relative;
  display: inline-block;
}
.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}
.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: #e9e9e9;
}
.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: DodgerBlue !important;
  color: #ffffff;
}

.tabview-nav {
  display: flex;
  justify-content: flex-start;
  align-items: end;
  padding-top: 10px;
  color: #ffffff;
}

.tabview-nav button {
  background-color: var(--primaryColorDark);
  border: 1px solid var(--primaryColor);
  color: #ffffff;
  padding: 10px 20px;
  cursor: pointer;
  transition: none;
  border-radius: 5px 5px 0 0;
}

.tabview-nav button:hover {
  background-color: var(--primaryColor);
}

.tabview-nav button:disabled {
  background-color: var(--buttonBackgroundColorDisabled);
  color: var(--buttonTextColorDisabled);
  cursor: not-allowed;
}

.tabview-content {
  padding: 10px;
  border: 1px solid var(--primaryColor);
  box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
  margin-top: -1px;
}

.tabview-nav button.activeTab {
  background-color: white;
  color: var(--primaryColorDark);
  border: 1px solid var(--primaryColor);
  border-bottom: none;
  box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
  padding: 15px 20px;
  cursor: default;
  z-index: 1;
}
.tabview-nav button.activeTab:hover {
  background-color: white;
  color: var(--primaryColorDark);
}

.input-group {
  margin-bottom: 15px;
  width:400px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.input-group label {
  margin-right: 10px;
  flex: 30%;
  text-align: right;
  vertical-align: middle;
}
.input-group input,
.input-group select {
  padding: 8px;
  flex: 70%;
  box-sizing: border-box;
}
.input-group textarea {
  flex: 70%;
  padding: 5px;
  box-sizing: border-box;
}
.input-group button {
  padding: 5px 10px;
}


/* Loader Animation
/* Original Source: https://loading.io/css/
/* Licensed under CC0
/* Modified.
/**/
.lds-grid {
  /* change color here */
  color: var(--primaryColor);
}

.lds-grid,
.lds-grid div {
  box-sizing: border-box;
}

.lds-grid {
  display: inline-block;
  position: absolute;
  top: 25%;
  left: calc(50% - 48px);
  width: 80px;
  height: 80px;
  z-index: 1000;
}

.lds-grid div {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: currentColor;
  animation: lds-grid 1.2s linear infinite;
  box-shadow: rgba(from currentColor r g b / 0.7) 3px 3px 7px;
}

.lds-grid div:nth-child(1) {
  top: 8px;
  left: 8px;
  animation-delay: 0s;
}

.lds-grid div:nth-child(2) {
  top: 8px;
  left: 32px;
  animation-delay: -0.4s;
}

.lds-grid div:nth-child(3) {
  top: 8px;
  left: 56px;
  animation-delay: -0.8s;
}

.lds-grid div:nth-child(4) {
  top: 32px;
  left: 8px;
  animation-delay: -0.4s;
}

.lds-grid div:nth-child(5) {
  top: 32px;
  left: 32px;
  animation-delay: -0.8s;
}

.lds-grid div:nth-child(6) {
  top: 32px;
  left: 56px;
  animation-delay: -1.2s;
}

.lds-grid div:nth-child(7) {
  top: 56px;
  left: 8px;
  animation-delay: -0.8s;
}

.lds-grid div:nth-child(8) {
  top: 56px;
  left: 32px;
  animation-delay: -1.2s;
}

.lds-grid div:nth-child(9) {
  top: 56px;
  left: 56px;
  animation-delay: -1.6s;
}

@keyframes lds-grid {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

@media print {
  input, textarea, button {
    display: none;
  }
  .no-print {
    display: none;
  }
  .lds-grid {
    display: none;
  }
}

@media (max-width: 800px) {
    .hideOnMobile {
        display: none;
    }

    table {
      min-width: 100%;
      overflow-x: scroll;
    }

    .content {
      max-width: 100%;
      padding-left: 5px;
      padding-right: 5px;
      margin-top: calc(var(--headerHeight) * 2);
      overflow-x: scroll;
    }

    footer{
        font-size: 10px;
    }

    footer img {
        height: 10px;
        width: 10px;
    }

    .input-group {
        flex: 100%;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .input-group label {
        text-align: left;
        margin-bottom: 5px;
    }
}