html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
nav ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}
/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}
del {
  text-decoration: line-through;
}
abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}
input,
select {
  vertical-align: middle;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ------------Super Classes-------------*/

.SupaTitles {
  text-align: center;
  font-size: 32px;
  color: rgba(0, 0, 0, 0.8);
  font-weight: bold;
}

.titles {
  text-align: center;
  font-size: 1.8em;
  color: rgba(0, 0, 0, 0.8);
  font-weight: bold;
}

.lilTitles {
  text-align: center;
  font-size: 24px;
  color: rgba(0, 0, 0, 0.8);
}

.subTitles {
  font-size: 1.1em;
  text-align: center;
  color: rgba(0, 0, 0, 0.9);
}

.smallDesc {
  text-align: center;
  font-size: 1.2em;/*16px;*/
  color: rgba(0, 0, 0, 0.8);
}

/* ------------Super Classes END-------------*/

/* Number Input Field  */
.NumField {
  justify-self: left;
  width: 5em;
  text-align: center;
  border: none;
  opacity: 1;
  font-size: 20px;
  border-bottom: 0.7px solid rgba(0, 0, 0, 0.4);
}

.patientsNumArrows {
  align-self: end;
  border-bottom: 0.7px solid rgba(0, 0, 0, 0.4);
  font-size: 2em;
  cursor: pointer;
  background-color: #eeeeee;
  width: 38px;
}

input::-webkit-inner-spin-button {
  opacity: 1;
}

.ettdField {
  width: 5em;
  font-size: 20px;
}

/* All scrolling Btns */
#scrollUpBtn,
#scrollPatiBtn,
#scrollResultBtn,
#scrollPatiBtnLeft,
#scrollPatiBtnRight,
#scrollResultBtnLeft,
#scrollResultBtnRight,
#downloadBtn {
  display: inline-block;
  background-color: #ff9800;
  width: 50px;
  height: 50px;
  right: 55px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  transition: background-color 0.3s, opacity 0.5s, visibility 0.5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}

#scrollUpBtn:hover,
#scrollPatiBtn:hover,
#scrollResultBtn:hover,
#scrollPatiBtnLeft:hover,
#scrollPatiBtnRight:hover,
#scrollResultBtnLeft:hover,
#scrollResultBtnRight:hover,
#downloadBtn:hover {
  cursor: pointer;
  background-color: #333;
}
#scrollUpBtn:active,
#scrollPatiBtn:active,
#scrollResultBtn:active,
#scrollPatiBtnLeft:active,
#scrollPatiBtnRight:active,
#scrollResultBtnLeft:active,
#scrollResultBtnRight:active,
#downloadBtn:active {
  background-color: #555;
}
#scrollUpBtn.show,
#scrollPatiBtn.show,
#scrollResultBtn.show,
#scrollPatiBtnLeft.show,
#scrollPatiBtnRight.show,
#scrollResultBtnLeft.show,
#scrollResultBtnRight.show,
#downloadBtn.show {
  opacity: 1;
  visibility: visible;
}

#scrollPatiBtnLeft:hover,
#scrollPatiBtnRight:hover,
#scrollResultBtnLeft:hover,
#scrollResultBtnRight:hover {
  opacity: 1;
  visibility: visible;
}

/* Scrolling to Top */
#scrollUpBtn {
  bottom: 165px;
  right: 1px;
}
#scrollUpBtn::after {
  content: "\f077";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 2em;
  line-height: 50px;
  color: #fff;
}

/* Scrolling to Patients */
#scrollPatiBtn {
  bottom: 110px;
  right: 1px;
}
#scrollPatiBtn:hover ~ .PBC {
  opacity: 1;
  visibility: visible;
}

#scrollPatiBtn::after {
  content: "\f21e";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 2em;
  line-height: 50px;
  color: #fff;
}

/* Scrolling to Results */
#scrollResultBtnLeft,
#scrollPatiBtnLeft,
#scrollResultBtnRight,
#downloadBtn {
  display: none;
}
#scrollResultBtn {
  bottom: 55px;
  right: 1px;
}
#scrollResultBtn:hover ~ .RBC {
  opacity: 1;
  visibility: visible;
}
#scrollResultBtn::after {
  content: "\f080";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 2em;
  line-height: 50px;
  color: #fff;
}

/* Download Button */
#downloadBtn {
  bottom: 0;
  right: 0;
}
#downloadBtn::after {
  content: "\f019";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 2em;
  line-height: 50px;
  color: #fff;
}

/* Cycling Patients right */
#scrollPatiBtnRight {
  /* right: 0; */
  bottom: 110px;
}
#scrollPatiBtnRight::after {
  content: "\f079";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 2em;
  line-height: 50px;
  color: #fff;
}

/* Cycling Results right */
#scrollResultBtnRight {
  /* right: 0; */
  bottom: 55px;
}
#scrollResultBtnRight::after {
  content: "\f079";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 2em;
  line-height: 50px;
  color: #fff;
}

/* Cycling Patients left */
#scrollPatiBtnLeft {
  right: 108px;
  bottom: 110px;
}
#scrollPatiBtnLeft:hover {
  opacity: 1;
  visibility: visible;
}
#scrollPatiBtnLeft::after {
  content: "\f053";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 2em;
  line-height: 50px;
  color: #fff;
}

/* Cycling Results left */
#scrollResultBtnLeft {
  right: 108px;
  bottom: 55px;
}
#scrollResultBtnLeft::after {
  content: "\f053";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 2em;
  line-height: 50px;
  color: #fff;
}

/* Number input's arrows visible w/o hover */
.NumField::-webkit-inner-spin-button {
  opacity: 1;
}

/* ------------Super Classes END-------------*/

/* Vent & Patient Panels */
.vnpSettingCss {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background-color: white;
  border: 0.6px solid rgba(0, 0, 0, 0.2);
  padding: 1em;
  box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 5px;
}

/* Vent Panel */
.vSettingCss {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "vtitles vinputs";
}

/* Patient Panels */
.pSettingCss {
  opacity: 0.5;
  pointer-events: none;
}

.activePatient {
  /* border: .6px solid rgb(33, 142, 131); */
  padding: 1em;
  box-shadow: rgb(33, 142, 131) 2px 2px 5px;
}

#output,
#output2,
#output3,
#output4 {
  /* border-bottom: 4px dashed #bdc3c7; */
  display: flex;
  justify-content: center;
  align-items: center;
  /*font-weight: bold;*/
  font-size: 1.1em;
  margin-top: 3px;
  letter-spacing: -0.07em;
  text-shadow: white 2px 2px 2px;
}

#outputUnits1,
#outputUnits2,
#outputUnits3,
#outputUnits4 {
  /* border-bottom: 4px dashed #bdc3c7; */
  display: flex;
  justify-content: center;
  align-items: center;
  /*font-weight: bold;*/
  font-size: 1em;
  margin-top: 3px;
  letter-spacing: -0.07em;
  text-shadow: white 2px 2px 2px;
}

input[type="range"] {
  display: block;
  -webkit-appearance: none;
  background-color: #bdc3c7;
  width: 100%;
  height: 5px;
  border-radius: 5px;
  margin: 0 auto;
  outline: 0;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: #e74c3c;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 2px solid white;
  z-index: 10;
  cursor: pointer;
  transition: 0.3s ease-in-out;
}
​

/* Firefox Styling */
input[type="range"]::-moz-range-track {
  display: block;
  -webkit-appearance: none;
  background-color: #bdc3c7;
  width: 100%;
  height: 5px;
  border-radius: 5px;
  margin: 0 auto;
  outline: 0;
}

input[type="range"]::-moz-range-thumb {
  -webkit-appearance: none;
  background-color: #e74c3c;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 2px solid white;
  z-index: 10;
  cursor: pointer;
  transition: 0.3s ease-in-out;
}
​ input[type="range"]::-webkit-slider-thumb:hover {
  background-color: white;
  border: 2px solid #e74c3c;
}

input[type="range"]::-webkit-slider-thumb:active {
  transform: scale(1.2);
}

#tickmarks {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  width: 200px;
}

#tickmarks p {
  position: relative;
  display: flex;
  justify-content: center;
  text-align: center;
  width: 4px;
  background: #d3d3d3;
  z-index: 1;
  font-size: 14px;
  height: 20px;
  line-height: 55px;
  margin: 0 0 30px 0;
  cursor: pointer;
}

#tickmarks .thin {
  width: 2px;
}

#banner {
  grid-area: errors;

  align-self: center;
  text-align: center;
  width: 100%;
  /* padding: 1em; */

  justify-items: center;

  display: grid;
  grid-template-areas:
    "simMsg"
    "message";
}

.simMessage {
  grid-area: simMsg;
  display: none;
  text-align: center;
  text-decoration: underline;
  font-size: 2em;
  font-family: monospace;
  padding: 5px;
  /* line-height: 25px; */
}

.rainbow_text_animated {
  background: linear-gradient(to right, #fcb000, #f15300, #2fc8b9, #fc8e00);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbow_animation 6s ease-in-out infinite;
  background-size: 400% 100%;
}

@keyframes rainbow_animation {
  0%,
  100% {
    background-position: 0 0;
  }

  50% {
    background-position: 100% 0;
  }
}

#error-messages {
  grid-area: message;
  background-color: rgb(255, 232, 232);
  border: 1px solid red;
  color: red;
  display: none;
  /* align-self: left; */
  text-align: left;
  font-size: 12px;
  font-weight: bold;
  margin: auto;
  padding: 10px 25px;
  max-width: 250px;
}

#success-messages {
  grid-area: message;
  background-color: rgb(236, 255, 232);
  border: 1px solid green;
  color: green;
  display: none;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  margin: auto;
  padding: 10px 25px;
  max-width: 270px;
}

.input-error {
  box-shadow: 0 0 3px red;
  /* overflow: visible;
  outline-style: solid;
  outline-color: red; */
  -webkit-appearance: none;
}

.addLoading {
  background-color: #ffffff;
  background-image: url("http://loadinggif.com/images/image-selection/3.gif");
  background-size: 35px 35px;
  background-position: center center;
  background-repeat: no-repeat;
}

.patientNumInput::-webkit-inner-spin-button {
  opacity: 0;
}

.patientNumInput::-webkit-inner-spin-button,
.patientNumInput::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
}

.patientNumInput {
  -moz-appearance: textfield;
}

/* Chart js */
/* .chartWrapper {
    position: relative;
    max-width: 400px;
} */

/* .chartWrapper > canvas {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events:none;
} */
.pat1wrapper {
  overflow-x: scroll;
  position: relative;
  /* width: 100%; */
  max-width: 300px;
}

.pat1Area {
  position: relative;
  height: 200px;
}

/* ----------------------Desktop Styles -----------------------*/

body {
  line-height: 1;
  margin: 0;
  padding: 0;
  font-family: Helvetica, sans-serif;
  background-color: #eaedf0;
}

.menu {
  height: 90px;
  width: 100%;
  position: fixed;
  z-index: 100;
  top: 0;
  background-color: #fff;
  padding-left: 1%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "logo tfts nav";
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

.taskForceTitleSection {
  grid-area: tfts;
  justify-self: center;
  align-self: center;
  font-weight: 700;
  font-size: 2.2em;
}

.page {
  /* grid-template-rows: auto auto auto; */
  min-height: 100vh;
  margin-top: 2%;
  padding-top: 5%;
  background: radial-gradient(
    ellipse farthest-corner at 0 140%,
    #d6f5f2 0%,
    #acece5 70%,
    #83e2d8 90%
    /*#2fc8b9 90%*/
    /*#2fc8b9 0%,
    #316dc2 70%,
    #4e95d3 70%
*/
  );

  display: grid;
  grid-template-areas:
    "multiPatVentSum"
    "footer";
}

.multiPatVentSum {
  grid-area: multiPatVentSum;
  border-radius: 2%;
  padding: 1% 2% 1% 2%;

  display: grid;
  grid-template-rows: 100px auto auto 100px auto;
  grid-template-areas:
    "patientTitleSection"
    "patients"
    "resultBtnArea"
    "resultTitleSection"
    "results";
}

/*------------------ Patient Title Section */
.patientTitleSection {
  grid-area: patientTitleSection;
  background-color: white;

  display: grid;
  grid-template-rows: auto 1em;
  grid-template-areas:
    "patientTitle"
    "ptBreak";
}

.patientTitle {
  grid-area: patientTitle;
  align-self: center;
}

.ptBreak {
  grid-area: ptBreak;
  align-self: center;
  justify-self: center;

  width: 50%;
  height: 100%;
}

/*------------------ Patient Section */
.patients {
  grid-area: patients;
  padding: 2em;
  width: 100%;
  background-color: white;

  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 1em;
  justify-items: center;
  grid-row-gap: 30px;
  grid-template-areas:
    "patientNum patientsLungs ventset"
    "patientSettings patientSettings patientSettings";
}

.patientNum {
  grid-area: patientNum;
  text-align: center;
  align-self: center;
  /* padding: 1em; */

  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: repeat(4, min-content);
  grid-row-gap: 2em;
  grid-template-areas:
    "patientInst patientInst"
    "patientNumDesc patientNumDesc"
    "patientNumInputWwrap patientNumInputWwrap";
}

.patientInst {
  grid-area: patientInst;
  align-self: center;
  margin: 0.5em;
}

.patientNumDesc {
  grid-area: patientNumDesc;
  align-self: end;
}

.patientNumInputWwrap {
  grid-area: patientNumInputWwrap;
  align-self: center;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-row-gap: 1em;
  grid-template-rows: 0fr 2.1em;
  grid-template-areas:
    "patientNumTitle patientNumTitle patientNumTitle"
    "patientNumInput patientsNumUpAr patientsNumDwnAr";
}

.patientNumTitle {
  grid-area: patientNumTitle;
  justify-self: center;
  align-self: baseline;
}

.patientNumInput {
  grid-area: patientNumInput;
  border-bottom: 0.7px solid rgba(0, 0, 0, 0.4);
  justify-self: right;
  width: 1.5em;
  font-size: 2.2em;
  text-align: center;
}

.patientsNumUpAr {
  grid-area: patientsNumUpAr;
  justify-self: right;

  border-right: 0.7px solid rgba(0, 0, 0, 0.4);
}

.patientsNumDwnAr {
  grid-area: patientsNumDwnAr;
  justify-self: left;
}

.patientsLungs {
  grid-area: patientsLungs;
  justify-self: center;
}

.patientsLungsImage {
  width: 100%;
  height: 100%;
}

.patientSetting {
  grid-area: patientSettings;

  display: grid;
  grid-column-gap: 20px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-areas: "pat1 pat2 pat3 pat4";
}

/*------------------ Venting Setting Panel */
.ventset {
  grid-area: ventset;
  /* width: 300px; */

  display: grid;
  grid-template-rows: auto auto 1fr 1fr 1fr 1fr auto 1fr 1fr;
  grid-template-areas:
    "vtitle"
    "vsBreak"
    "insp"
    "peep"
    "rr"
    "ie"
    "vfbreak"
    "vftitle"
    "vfgauge";
}

.ventTitle {
  grid-area: vtitle;
  align-self: center;
}
.vsBreak {
  grid-area: vsBreak;
  align-self: center;
}
.insp {
  grid-area: insp;
  align-self: center;
}
.inspTitle {
  line-height: 1.5;
}
.peep {
  grid-area: peep;
  align-self: center;
}
.rr {
  grid-area: rr;
  align-self: center;
}
.ie {
  grid-area: ie;
  align-self: center;
}
.ieNum {
  text-align: center;
  text-align-last: center;
}
.vfBreak {
  grid-area: vfbreak;
  align-self: center;
}
.ventfTitle {
  grid-area: vftitle;
  align-self: center;
}
.ventfGauge {
  grid-area: vfgauge;
  align-self: center;
  justify-self: center;
}

/*------------------ Patient I Setting Panel */
.pat1 {
  grid-area: pat1;

  display: grid;
  grid-template-rows: auto auto 1em 1fr 2em 1fr auto auto 1fr;
  grid-template-areas:
    "pat1Title"
    "ps1Break"
    "pat1FlowValGaugeTitle"
    "pat1FlowValGauge"
    "pat1CompGaugeTitle"
    "pat1CompGauge"
    "endo1Break"
    "pat1EndoGaugeTitle"
    "pat1EndoGauge";
}

.pat1Title {
  grid-area: pat1Title;
  align-self: center;
}
.ps1Break {
  grid-area: ps1Break;
  align-self: center;
}
.pat1FlowValGaugeTitle {
  grid-area: pat1FlowValGaugeTitle;
  align-self: baseline;
}
.pat1CompGaugeTitle {
  grid-area: pat1CompGaugeTitle;
  align-self: baseline;
}
.endo1Break {
  grid-area: endo1Break;
}
.pat1EndoGaugeTitle {
  grid-area: pat1EndoGaugeTitle;
  padding-bottom: 1em;
  align-self: baseline;
  justify-self: center;
}
.pat1FlowValGauge {
  grid-area: pat1FlowValGauge;
  align-self: center;
  justify-self: center;
}
.pat1CompGauge {
  grid-area: pat1CompGauge;
  align-self: end;
  justify-self: center;
}
.pat1EndoGauge {
  grid-area: pat1EndoGauge;
  align-self: center;
  justify-self: center;

  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-row-gap: 1em;
  grid-template-areas:
    "ETTDselectTitle ETTDselect"
    "ETTLselectTitle ETTLselect";
}

.ETTDselectTitle {
  grid-area: ETTDselectTitle;
}
.ETTDselect {
  grid-area: ETTDselect;
}
.ETTLselectTitle {
  grid-area: ETTLselectTitle;
}
.ETTLselect {
  grid-area: ETTLselect;
}

/*------------------ Patient II Setting Panel */
.pat2 {
  grid-area: pat2;

  display: grid;
  grid-template-rows: auto auto 1em 1fr 2em 1fr auto auto 1fr;
  grid-template-areas:
    "pat2Title"
    "ps2Break"
    "pat2FlowValGaugeTitle"
    "pat2FlowValGauge"
    "pat2CompGaugeTitle"
    "pat2CompGauge"
    "endo2Break"
    "pat2EndoGaugeTitle"
    "pat2EndoGauge";
}

.pat2Title {
  grid-area: pat2Title;
  align-self: center;
}
.ps2Break {
  grid-area: ps2Break;
  align-self: center;
}
.pat2FlowValGaugeTitle {
  grid-area: pat2FlowValGaugeTitle;
  align-self: baseline;
}
.pat2FlowValGauge {
  grid-area: pat2FlowValGauge;
  align-self: center;
  justify-self: center;
}
.pat2CompGaugeTitle {
  grid-area: pat2CompGaugeTitle;
}
.pat2CompGauge {
  grid-area: pat2CompGauge;
  align-self: end;
  justify-self: center;
}
.endo2Break {
  grid-area: endo2Break;
}
.pat2EndoGaugeTitle {
  grid-area: pat2EndoGaugeTitle;
  padding-bottom: 1em;
  align-self: center;
  justify-self: center;
}
.pat2EndoGauge {
  grid-area: pat2EndoGauge;
  align-self: center;
  justify-self: center;

  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-row-gap: 1em;
  grid-template-areas:
    "ETTD2selectTitle ETTD2select"
    "ETTL2selectTitle ETTL2select";
}

.ETTD2selectTitle {
  grid-area: ETTD2selectTitle;
}
.ETTD2select {
  grid-area: ETTD2select;
}
.ETTL2selectTitle {
  grid-area: ETTL2selectTitle;
}
.ETTL2select {
  grid-area: ETTL2select;
}

/*------------------ Patient III Setting Panel */
.pat3 {
  grid-area: pat3;

  display: grid;
  grid-template-rows: auto auto 1em 1fr 2em 1fr auto auto 1fr;
  grid-template-areas:
    "pat3Title"
    "ps3Break"
    "pat3FlowValGaugeTitle"
    "pat3FlowValGauge"
    "pat3CompGaugeTitle"
    "pat3CompGauge"
    "endo3Break"
    "pat3EndoGaugeTitle"
    "pat3EndoGauge";
}

.pat3Title {
  grid-area: pat3Title;
  align-self: center;
}
.ps3Break {
  grid-area: ps3Break;
  align-self: center;
}
.pat3FlowValGaugeTitle {
  grid-area: pat3FlowValGaugeTitle;
  align-self: baseline;
}
.pat3FlowValGauge {
  grid-area: pat3FlowValGauge;
  align-self: center;
  justify-self: center;
}
.pat3CompGaugeTitle {
  grid-area: pat3CompGaugeTitle;
}
.pat3CompGauge {
  grid-area: pat3CompGauge;
  align-self: end;
  justify-self: center;
}
.endo3Break {
  grid-area: endo3Break;
}
.pat3EndoGaugeTitle {
  grid-area: pat3EndoGaugeTitle;
  padding-bottom: 1em;
  align-self: center;
  justify-self: center;
}
.pat3EndoGauge {
  grid-area: pat3EndoGauge;
  align-self: center;
  justify-self: center;

  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-row-gap: 1em;
  grid-template-areas:
    "ETTD3selectTitle ETTD3select"
    "ETTL3selectTitle ETTL3select";
}

.ETTD3selectTitle {
  grid-area: ETTD3selectTitle;
}
.ETTD3select {
  grid-area: ETTD3select;
}
.ETTL3selectTitle {
  grid-area: ETTL3selectTitle;
}
.ETTL3select {
  grid-area: ETTL3select;
}

/*------------------ Patient IV Setting Panel */
.pat4 {
  grid-area: pat4;

  display: grid;
  grid-template-rows: auto auto 1em 1fr 2em 1fr auto auto 1fr;
  grid-template-areas:
    "pat4Title"
    "ps4Break"
    "pat4FlowValGaugeTitle"
    "pat4FlowValGauge"
    "pat4CompGaugeTitle"
    "pat4CompGauge"
    "endo4Break"
    "pat4EndoGaugeTitle"
    "pat4EndoGauge";
}

.pat4Title {
  grid-area: pat4Title;
  align-self: center;
}
.ps4Break {
  grid-area: ps4Break;
  align-self: center;
}
.pat4FlowValGaugeTitle {
  grid-area: pat4FlowValGaugeTitle;
  align-self: baseline;
}
.pat4FlowValGauge {
  grid-area: pat4FlowValGauge;
  align-self: center;
  justify-self: center;
}
.pat4CompGaugeTitle {
  grid-area: pat4CompGaugeTitle;
}
.pat4CompGauge {
  grid-area: pat4CompGauge;
  align-self: end;
  justify-self: center;
}
.endo4Break {
  grid-area: endo4Break;
}
.pat4EndoGaugeTitle {
  grid-area: pat4EndoGaugeTitle;
  padding-bottom: 1em;
  align-self: center;
  justify-self: center;
}
.pat4EndoGauge {
  grid-area: pat4EndoGauge;
  align-self: center;
  justify-self: center;

  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-row-gap: 1em;
  grid-template-areas:
    "ETTD4selectTitle ETTD4select"
    "ETTL4selectTitle ETTL4select";
}

.ETTD4selectTitle {
  grid-area: ETTD4selectTitle;
}
.ETTD4select {
  grid-area: ETTD4select;
}
.ETTL4selectTitle {
  grid-area: ETTL4selectTitle;
}
.ETTL4select {
  grid-area: ETTL4select;
}

/*------------------ Run Botton */
.resultBtnArea {
  grid-area: resultBtnArea;
  background-color: white;
  padding: 0 5em;

  display: grid;
  grid-template-rows: 6em auto;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "scaleLegendsSection errors resultBtn"
    ". playPause .";
}

.resultBtn {
  grid-area: resultBtn;
  justify-self: right;
  align-self: center;
  -webkit-appearance: none;
  display: inline-block;
}

.playPause {
  grid-area: playPause;
  padding: 0.5em;

  display: none;
  grid-template-areas: "pause play replay forward";
  grid-column-gap: 0.5em;
  justify-self: center;
}

.playPauseStyle {
  padding: 6px;
  border: 1px solid white;
  color: white;
  border-radius: 1em;
  font-size: 2em;
  -webkit-appearance: none;
  transition: transform 0.3s;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

.pprBtnActive {
  opacity: 1 !important;
}

#replay,
#pause,
#play,
#forward {
  font-size: 2em;
  opacity: 0.5;
}

#replay:hover,
#pause:hover,
#play:hover,
#forward:hover {
  cursor: pointer;
  transform: scale(1.1);
  opacity: 1;
}

#play {
  grid-area: play;
  background-color: #00a613;
}

#pause {
  grid-area: pause;
  background-color: #f15300;
}

#replay {
  grid-area: replay;
  background-color: #fcb000;
}

#forward {
  grid-area: forward;
  background-color: darkorchid;
}

.yellowBtns {
  padding: 1.35em 1.2em;
  border: 2px solid white;
  background-color: #fc8e00;
  border-radius: 0.52em;
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: white;
  box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 5px;
  text-align: center;
  transition: all 0.2s;
  cursor: pointer;
}

.resultBtn:hover {
  background-color: #2fc8b9;
  border: 2px solid #2fc8b9;
  color: white;
}

.scaleLegendsSection {
  grid-area: scaleLegendsSection;
  justify-self: left;
  align-self: center;

  display: grid;
  /* grid-template-rows: 1fr 1fr; */
  grid-row-gap: 30px;
  grid-template-areas: 
    /* "scaleLegendsTitle" */ "scaleLegends";
}

.scaleLegendsTitle {
  grid-area: scaleLegendsTitle;
}
.scaleLegends {
  grid-area: scaleLegends;
  list-style-type: none;
  border: solid 1px black;
  padding: 5px;
  line-height: 1.2;
}

.scaleLegendsTitle {
  text-align: left;
  font-weight: bold;
}

/*------------------ Results Title Section */
.resultTitleSection {
  grid-area: resultTitleSection;
  background-color: white;

  display: grid;
  grid-template-rows: auto 20px;
  grid-template-areas:
    "resultTitle"
    "rtBreak";
}

.resultTitle {
  grid-area: resultTitle;
  align-self: center;
}

.rtBreak {
  grid-area: rtBreak;
  background-color: white;
  align-self: center;

  justify-self: center;
  width: 50%;
  height: 100%;
}

/*------------------ Results Section */
.results {
  grid-area: results;
  background-color: white;
  padding: 1em;

  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "pMessage"
    "simResults";
}

.pMessage {
  grid-area: pMessage;
}

.simResults {
  grid-area: simResults;
  justify-self: center;

  display: grid;
  grid-template-areas: "patPlots";
}

.patPlots {
  grid-area: patPlots;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  margin: 10px auto;
  position: relative;
  text-align: center;
}

.pat1Plots,
.pat2Plots,
.pat3Plots,
.pat4Plots {
  float: left;
}

#simResultsVideo {
  grid-area: simResultsVideo;
}
/*------------------Footer*/
.footerSection {
  display: grid;
  grid-template-areas: "privacy terms FAQ copyright";
  min-height: 50px;
}
.footerCard {
  grid-area: footer;
  align-self: end;
  width: 100%;
  background-color: #747474;
  margin-top: 2%;
}
.footerText {
  opacity: 0.75;
  align-self: center;
  justify-self: center;
  text-align: center;
  color: white;
}
#footerLink {
  text-decoration: none;
}

/*------------------------ Tablet Styles -----------------------*/
@media (max-width: 1400px) and (min-width: 1007px) {
  .patPlots {
    width: 70%;
  }
  .multiPatVentSum {
    padding: 1% 2% 1% 2%;
  }

  .patients {
    padding: 1em;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "patientNum patientNum"
      "patientsLungs patientsLungs"
      "ventset ventset"
      "patientSettings patientSettings";
  }

  .patientSetting {
    display: grid;
    grid-row-gap: 20px;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas:
      "pat1 pat2"
      "pat3 pat4";

    align-items: center;
  }

  .patientNum,
  .patientsLungs,
  .ventset {
    width: 50%;
  }

  @media (max-width: 1125px) and (min-width: 1007px) {
    .taskForceTitleSection {
      font-size: 1.8em;
    }
    .QLogo {
      height: 40px;
    }
  }
}

/*------------------------ Mobile Styles -----------------------*/
@media only screen and (max-width: 1007px) {
  .SupaTitles {
    font-size: 21px;
  }
  .titles {
    font-size: 1.2em;
  }
  .lilTitles {
    font-size: 1.2em;
  }
  .subTitles {
    font-size: 1.1em;
  }

  .page {
    background: white;
  }

  #scrollUpBtn,
  #scrollPatiBtn,
  #scrollResultBtn,
  #scrollPatiBtnLeft,
  #scrollPatiBtnRight,
  #scrollResultBtnLeft,
  #scrollResultBtnRight,
  #downloadBtn {
    width: 40px;
    height: 40px;
  }

  #scrollUpBtn::after,
  #scrollPatiBtn::after,
  #scrollResultBtn::after,
  #scrollPatiBtnLeft::after,
  #scrollPatiBtnRight::after,
  #scrollResultBtnLeft::after,
  #scrollResultBtnRight::after,
  #downloadBtn::after {
    font-size: 1.5em;
    line-height: 40px;
  }

  #scrollUpBtn,
  #scrollPatiBtn,
  #scrollResultBtn,
  #downloadBtn {
    right: 0;
  }

  #scrollUpBtn {
    bottom: 135px;
  }

  #scrollPatiBtn,
  #scrollPatiBtnRight {
    bottom: 90px;
    right: 0;
  }

  #scrollResultBtn,
  #scrollResultBtnRight {
    bottom: 45px;
    right: 0;
  }

  #downloadBtn {
    bottom: 0;
  }

  .multiPatVentSum {
    padding: 95px 0 0 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "patientTitleSection"
      "patients"
      "resultBtnArea"
      "resultTitleSection"
      "results";
  }

  .patients {
    padding: 0 1em;
    grid-template-columns: 1fr;
    grid-template-areas:
      "patientNum"
      "patientsLungs"
      "ventset"
      "patientSettings";
  }

  #pat2,
  #pat3,
  #pat4 {
    display: none;
  }

  .pat1Plots,
  .pat2Plots,
  .pat3Plots,
  .pat4Plots {
    float: none;
  }

  .patPlots {
    width: 50%;
  }
  .patientSetting {
    display: grid;
    grid-row-gap: 20px;
    grid-template-columns: auto;
    grid-template-areas:
      "pat1"
      "pat2"
      "pat3"
      "pat4";
  }

  .taskForceTitleSection {
    font-size: 1.5em;
    font-weight: 500;
  }

  .rtBreak,
  .ptBreak,
  .vsBreak,
  .vfBreak,
  .ps1Break,
  .endo1Break,
  .ps2Break,
  .endo2Break,
  .ps3Break,
  .endo3Break,
  .ps4Break,
  .endo4Break {
    width: 100%;
  }

  #simResultsVideo {
    width: 320px;
  }

  .results {
    padding: 0;
  }

  .resultBtnArea {
    padding: 0 2em;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-row-gap: 10px;
    grid-template-areas:
      "scaleLegendsSection"
      "errors"
      "resultBtn"
      "playPause";
  }

  .playPause {
    justify-self: center;
  }

  .resultBtn {
    justify-self: center;
    padding: 1em 1em;
    font-size: 18px;
  }

  .scaleLegendsSection {
    justify-self: center;
  }

  .logo2 {
    margin-right: auto;
    margin-left: auto;
  }
  .content {
    background-color: #eaedf0;
    height: auto;
    margin-top: 95px;
  }
  .welcome {
    grid-area: welcome;
    grid-template-areas:
      "title"
      "body";
    width: 100%;
    height: 100%;
    position: relative;
    padding-left: 15%;
    padding-right: 1%;
    padding-bottom: 20px;
    margin-left: 3%;
    margin-right: 3%;
    padding-top: 0;
  }

  .QLogo {
    height: 40px;
  }

  .menu {
    height: 100px;

    display: grid;
    grid-template-columns: auto;
    grid-template-areas:
      "logo"
      "tfts"
      "nav";
  }

  /*Main Content*/
  .ppTitle {
    display: grid;
    grid-area: title;
    margin-left: auto;
    margin-right: auto;
    grid-template-areas:
      "a"
      "b";
  }
  .pplabel {
    vertical-align: middle;
    font-size: 29px;
    font-weight: bold;
    float: left;
    grid-area: a;
    padding-top: 0px;
  }

  /*Career*/
  .ppCareerbody {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "job1"
      "job2"
      "job3";
    grid-row-gap: 20px;
  }

  /*Footer*/
  .footerCard {
    position: relative;
    bottom: 0;
    padding-bottom: 5%;
  }
  .footerSection {
    display: grid;
    grid-template-areas:
      "privacy"
      "terms"
      "FAQ"
      "copyright";
    min-height: 50px;
    grid-row-gap: 15%;
    padding-top: 10px;
    padding-bottom: 40px;
  }
}