/* font imports */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Sorts+Mill+Goudy:ital@0;1&display=swap');

/* responsive type size */
html { font-size: 16px }
@media screen and (min-width: 320px) {
  html { font-size: calc(16px + 6 * ((100vw - 320px) / 680)); }
  text { font-size: calc(24px + 8 * ((100vw - 320px) / 680)); }
  }
@media screen and (min-width: 1000px) {
  html { font-size: 22px; }
  text { font-size: 32px; }
  }

@media screen and (max-device-width: 600px) {
  }
@media screen and (max-device-width: 992px) {
  }
div#poslchart { 
  position: relative;
  }
div#poslchart div.legend button {
  margin-right: 4px;
  margin-bottom: 4px;
  padding: 0.25em;
  font-size: 10px;
/* font-family: "Gill Sans", sans-serif;*/
  font-family: "Open Sans", sans-serif;
/*   font-size: 100%; */
  background-color: #ffc0c0;
  white-space: nowrap;
  text-align: left;
  border: 2px outset #ff8080;
  }
div#poslchart div.legend button.scale {
  background-color: #c0c0ff;
  border: 2px outset #8080ff;
  }
div#poslchart div.legend button.enabled {
  background-color: #c0ffc0; 
  border: inset #80ff80;
  margin-bottom: 2px;
  margin-right: 2px;
  }
div#poslchart div.legend button.series._all {
  font-weight: bold;
  }
div#poslchart div.legend button.series {
  }
div#poslchart div.legend button.series.enabled {
  }
div#poslchart div.info {
  background-color: #ffffc0;
  border: 1px solid black;
  display: none;
  opacity: 80%;
  position: absolute;
  padding: 1em;
  }
svg.PoslMedChart {
  color: red;
  height: 90vh;
  width: 90vw;
  }
svg.PoslMedChart line.axis {
  stroke: black;
  stroke-width: 5;
  stroke-linecap: round;
  }
svg.PoslMedChart line.tick {
  stroke: black;
  stroke-width: 5;
  stroke-linecap: round;
  }
svg.PoslMedChart g.y.ticks text.label {
  display: none;
  }
svg.PoslMedChart.epidemic g.y.ticks text.label,
svg.PoslMedChart g.y.ticks.unique text.label.enabled {
  display: block;
  }
svg.PoslMedChart rect.ref {
  fill: #e0ffe0;
  }
svg.PoslMedChart line.grid {
  stroke: black;
  stroke-width: 1;
  stroke-linecap: round;
  }
svg.PoslMedChart text.label {
/*   font-size: 3vh; */
/* font-family: "Gill Sans", sans-serif;*/
  font-family: "Open Sans", sans-serif;
  }
svg.PoslMedChart text.x.label {
  dominant-baseline: middle;
  text-anchor: end;
  }
svg.PoslMedChart.epidemic text.x.label {
  text-anchor: middle;
  }
svg.PoslMedChart text.y.label {
  dominant-baseline: middle;
  text-anchor: end;
  }
svg.PoslMedChart.epidemic text.y.label {
  dominant-baseline: middle;
  text-anchor: middle;
  }
svg.PoslMedChart text.marker {
/*   font-size: 3vh; */
  font-weight: bold;
  opacity: 0.8;
/* font-family: "Gill Sans", sans-serif;*/
  font-family: "Open Sans", sans-serif;
  cursor: pointer;
  }
svg.PoslMedChart.epidemic text.marker {
  font-size: 5vh;
  opacity: 0.7;
  }
svg.PoslMedChart.epidemic._COVIDTrackingcom text.marker {
  font-size: 2.5vh;
  opacity: 0.7;
  }
svg.PoslMedChart.epidemic text.marker.past { display: none; }
svg.PoslMedChart.epidemic._past text.marker.past { display: block; font-size: 2vh; }
svg.PoslMedChart.epidemic text.marker.present { display: none; }
svg.PoslMedChart.epidemic._present text.marker.present { display: block; }
svg.PoslMedChart.epidemic text.marker.future { display: none; }
svg.PoslMedChart.epidemic._future text.marker.future { display: block; }

svg.PoslMedChart.epidemic text.marker.predicted.day1 { opacity: 0.30; font-size: 4.7vh; }
svg.PoslMedChart.epidemic text.marker.predicted.day2 { opacity: 0.25; font-size: 4.4vh; }
svg.PoslMedChart.epidemic text.marker.predicted.day3 { opacity: 0.20; font-size: 4.1vh; }
svg.PoslMedChart.epidemic text.marker.predicted.day4 { opacity: 0.18; font-size: 3.8vh; }
svg.PoslMedChart.epidemic text.marker.predicted.day5 { opacity: 0.15; font-size: 3.5vh; }
svg.PoslMedChart.epidemic text.marker.predicted.day6 { opacity: 0.12; font-size: 3.2vh; }
svg.PoslMedChart.epidemic text.marker.predicted.day7 { opacity: 0.10; font-size: 2.9vh; }
svg.PoslMedChart.epidemic text.marker.past { opacity: 0.50; }
svg.PoslMedChart.epidemic text.marker.recent.past { opacity: 1.00; }

svg.PoslMedChart.epidemic._COVIDtrackingcom text.marker.predicted.day1 { opacity: 0.30; font-size: 2.4vh; }
svg.PoslMedChart.epidemic._COVIDtrackingcom text.marker.predicted.day2 { opacity: 0.25; font-size: 2.3vh; }
svg.PoslMedChart.epidemic._COVIDtrackingcom text.marker.predicted.day3 { opacity: 0.20; font-size: 2.2vh; }
svg.PoslMedChart.epidemic._COVIDtrackingcom text.marker.predicted.day4 { opacity: 0.18; font-size: 2.1vh; }
svg.PoslMedChart.epidemic._COVIDtrackingcom text.marker.predicted.day5 { opacity: 0.15; font-size: 2.0vh; }
svg.PoslMedChart.epidemic._COVIDtrackingcom text.marker.predicted.day6 { opacity: 0.12; font-size: 1.9vh; }
svg.PoslMedChart.epidemic._COVIDtrackingcom text.marker.predicted.day7 { opacity: 0.10; font-size: 1.8vh; }
svg.PoslMedChart text.marker.glucose {
  font-size: 1.7em;
  }
div.legend span.sodium { 
  color: #808000; 
  }
svg.PoslMedChart text.marker.sodium {
  fill: #808000;
  }
div.legend span.potassium { font-weight: bold; color: #800080; }
svg.PoslMedChart text.marker.potassium {
  fill: #800080;
  }
div.legend span.creatinine { color: #c04000; font-size: 150%; }
svg.PoslMedChart text.marker.creatinine {
  font-size: 300%;
  fill: #c04000;
  }
svg.PoslMedChart text.marker.magnesium {
  /* stroke: black; fill: white; */
  }
svg.PoslMedChart text.marker.phosphate {
  stroke: #808080; fill: #80ffff;
  }
div.legend span.chloride { font-weight: bold; color: #008000; }
svg.PoslMedChart text.marker.chloride {
  stroke: #c0ffc0;
  fill: #008000;
  }
svg.PoslMedChart text.marker.bicarbonate {
  /* stroke: #808080; */
  }
svg.PoslMedChart text.marker.albumin {
  }
svg.PoslMedChart text.marker.calcium {
  }
button.series span.Alabama { color: #c00000; }
svg.PoslMedChart text.marker.Alabama { font-size: 80%; fill: #c00000; }
button.series span.Ontario { color: #0000c0; }
svg.PoslMedChart text.marker.Ontario { font-size: 80%; fill: #0000c0; }
svg.PoslMedChart._CMAJActivevsActive text.marker.Ontario,
svg.PoslMedChart._CMAJNewvsActive text.marker.Ontario,
svg.PoslMedChart text.marker.Ontario      { font-size: 5vh; }
svg.PoslMedChart text.marker.British.Columbia     { fill: #00c000; }
svg.PoslMedChart text.marker.Alberta      { fill: #009030; }
svg.PoslMedChart text.marker.Saskatchewan { fill: #006060; }
svg.PoslMedChart text.marker.Manitoba     { fill: #003090; }
svg.PoslMedChart text.marker.Ontario      { fill: #0000c0; }
svg.PoslMedChart text.marker.Quebec       { fill: #300090; }
svg.PoslMedChart text.marker.Brunswick    { fill: #600060; }
svg.PoslMedChart text.marker.Scotia       { fill: #900030; }
svg.PoslMedChart text.marker.Island       { fill: #c00000; }
svg.PoslMedChart text.marker.Labrador     { fill: #903000; }
svg.PoslMedChart text.marker.Yukon        { fill: #606000; }
svg.PoslMedChart text.marker.Nunavut      { fill: #309000; }
svg.PoslMedChart text.marker.Northwest    { fill: #404040; }
svg.PoslMedChart._COVIDTrackingcomActivevsActive text.marker { font-size: 2vh; }
svg.PoslMedChart._COVIDTrackingcomActivevsActive text.marker.AL { fill: #DC143C; }
svg.PoslMedChart._COVIDTrackingcomActivevsActive text.marker.CA { fill: blue; }
svg.PoslMedChart._COVIDTrackingcomActivevsActive text.marker.NY { fill: navy; }
svg.PoslMedChart._COVIDTrackingcomActivevsActive text.marker.OH { fill: #00694E; }
svg.PoslMedChart._COVIDTrackingcomActivevsActive text.marker.TX { fill: #bf5700; }
svg.PoslMedChart .series line { opacity: 5%; stroke-width: 1; }
svg.PoslMedChart.epidemic .series line { opacity: 0%; }
svg.PoslMedChart.epidemic._past .series line { opacity: 10%; }

h1 { font-family: "Adobe Garamond Pro", "Sorts Mill Goudy", serif; display: none; }
div, p, li { font-family: "Sorts Mill Goudy", serif; }

div#poslchart {
  display: flex;
  align-items: center;
  align-content: center;
  }
div.legend {
  display: flex;
  flex-wrap: wrap;
  }
div.legend > div {
  display: flex;
  flex-wrap: wrap;
  }
div.legend > div.legendHead { 
  display: block;
  }
div.legendHead > div { 
  display: inline-block;
  }
div.legendHead > div.scale { 
  display: block;
  }
div.legend div.legendSubhead {
  display: block;
  font-size: 80%;
  margin-top: 3px;
  padding: 0.5em;
  background-color: #e0e0e0;
  line-height: 100%;
  }
div.legendSubhead code {
  font-size: 60%;
  letter-spacing:-0.05em;
  }
@media (orientation: landscape) {
  div#poslchart {
    flex-direction: row;
    }
  div.legend {
    display: block;
    height: calc(90vh - 4em);
    width: 12em;
    }
  div.legendHead {
    height: 5em;
    }
  div.legendSubhead code {
    height: 10em;
    overflow-y: auto;
    }
  div.legend > div.legendBody {
    height: calc(90vh - 20em);
    overflow-y: auto;
    background-color: #f0f0ff;
    margin-top: 3px;
    padding: 0.5em;
    flex-wrap: nowrap;
    display: block;
    }
  div.legend button {
/*  width: 100%;
    display: block; */
    }
  div.legend div.legendHead button {
    width: auto;
    display: inline-block;
    }
  div.legend div.legendHead button.source {
    width: auto;
    display: block;
    }
  div.legend > div {
    flex-direction: column;
    }
  }

@media (orientation: portrait) {
  div#poslchart {
    flex-direction: column;
    }
  div.legend {
    flex-direction: row;
    justify-content: center;
    }
  div.legend > div {
    flex-direction: row;
    justify-content: center;
    }
  div.legend div.legendHead div.scale {
    float: right; 
    }
  div.legend > div.legendBody {
    max-height: calc(5em);
    overflow-y: auto;
    background-color: #f0f0ff;
    margin-top: 3px;
    padding: 0.5em;
    /*
    flex-wrap: nowrap;
    display: block;
    */
    }
  }

svg.PoslMedChart text.marker.oob {
  }