img {
    width: 100%;
    height: auto;
}

#qrcode {
  min-width: 80px;
  min-height: 80px;
  width: 8vw;
  height: 8vw;
}

#logo {
  height: 1.1em;
  width: 1.1em;
}

/* Styling for select dropdown options */
optgroup {
    color: #3498db;
}

option {
    color: black;
}

/* Colors */
.blue { color: blue; }
.green { color: lime; }
.red { color: red; }
.yellow { color: yellow; }
.white { color: white; }

.blueback { background-color: blue; }
.greenback { background-color: lime; }
.greyback { background-color: grey; }
.redback { background-color: red; }
.yellowback { background-color: yellow; }
.whiteback { background-color: white; }


/* Elements on control page */

.btn_black_border {
    border-style: solid;
    border-color: #222222;
    border-width: 2px;
}

/* Disable double-tap zoom */
.btn_minus { touch-action: manipulation; }
.btn_plus { touch-action: manipulation; }

.flash_border {
animation-name: flash_border;
animation-duration: 2.5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}

@Keyframes flash_border {
0% { border-style: solid; border-width: medium; border-color: red; }
50% { border-style: solid; border-width: medium; border-color: white; }
100% { border-style: solid; border-width: medium; border-color: red; }
}


/* Elements on monitor page*/
.card-body {
    position: relative;
}

.half_height {
  font-size: 70%;
}

.horizontal_line {
    width: 100%;
    height: 3px;
    position: absolute;
    top: 50%;
}

.vital_sign {
    font-size: 3.2vw;
    font-size: clamp(20pt, 3.2vw, 5vw);
    font-weight: bold;
}

.waveform {
    position: relative;
}

/* Chart styling */
.ct-chart{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

/* Set colour of waveform traces*/
.ecg_waveform .ct-line {stroke: lime}
.pleth_waveform .ct-line {stroke: yellow}
.bp_waveform .ct-line {stroke: red}
.etco2_waveform .ct-line {stroke: white}

/* Animations for waveforms*/
.wipe_out svg {
  animation-name: wipe_out;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-fill-mode: both;
}

.etco2_waveform.wipe_out svg {
  animation-duration: 10s;
}

@keyframes wipe_out {
  0% { clip-path: inset(0% 0% 0% 0%); }
  97% { clip-path: inset(0% 0% 0% 100%); }
  100% { clip-path: inset(0% 0% 0% 100%); }
}

.wipe_in svg {
  animation-name: wipe_in;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-fill-mode: both;
}

.etco2_waveform.wipe_in svg {
  animation-duration: 10s;
}

@keyframes wipe_in {
  0% { clip-path: inset(0% 100% 0% 0%); }
  3% { clip-path: inset(0% 100% 0% 0%); }
  100% { clip-path: inset(0% 0% 0% 0%); }
}


/* Blackout squares for hiding vitals/waveforms */
.blackout_vitals {
    background-color: #303030;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
}

.blackout_wave {
    background-color: #222222;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
}


/* Hide certain elements on small screens  */
@media only screen and (max-width: 520px) {
  .hide_sml {
    display: none;
  }
}