/* b: #009CBF o: #F75F00 g: #00A388 --tint-1: #333; --tint-2: #666; --tint-3: #999; --tint-4: #ccc; --tint-5: #e6e6e6; --tint-6: #f2f2f2; */
@font-face {
 font-family: ABCSansNovaRegular;
 src: url(../fonts/ABCSansNova-Regular.otf);
}
@font-face {
 font-family: ABCSansNovaBlack;
 src: url(../fonts/ABCSansNova-Black.otf);
}
@font-face {
 font-family: ABCSansNovaLight;
 src: url(../fonts/ABCSansNova-Light.otf);
}
:root {
  font-size: 1em;
  font-family: ABCSansNovaRegular, Helvetica, sans-serif;
  color: #333;
  box-sizing: border-box;
}
body {
  margin-bottom: .5rem;
  overflow: hidden;
}
#container {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: .5rem;
  padding: .5rem;
  display: flex;
  flex-flow: column;
  background: #f2f2f2;
  border: solid 1pt #999;
}
#chart {
  height: 100%;
}
h1, p {
  margin: 0;
}
#selector {
  display: flex;
  justify-content: center;
  margin-bottom: .5rem;
}
#header {
  text-align: center;
  font-family: ABCSansNovaBlack, "Arial Black", Helvetica, sans-serif;
  font-size: 1.25rem;
  margin-bottom: .5rem;
}
.choice {
  background: white;
  color: #333;
  padding: 2px 4px;
  width: 100px;
  text-align: center;
  font-weight: bold;
  font-size: .9rem;
  border-radius: .5rem;
  border: solid .5px #333;
  margin-right: .5rem;
}
.choice.selected, .choice.selected:hover {
  background: #333;
  color: white;
  pointer-events: none;
}
.choice:hover {
  background: #FFB300;
  color: #333;
}
.choice:last-child {
 margin-right: 0;
}
.axis .domain {
  stroke: none;
}
.axis .tick line {
  stroke: #999;
  stroke-dasharray: 2 3;
}
.axis .tick text {
  fill: #333;
  font-size: .8rem;
}
.outcome {
  pointer-events: none;
}
.outcome.dead {
  fill: #333;
}
.outcome.ventilated {
  fill: darkred;
}
.outcome.icu {
  fill: red;
}
.outcome.hospitalised {
  fill: #FF6100;
}
.outcome.active {
  fill: #FFB300;
}
#footer {
  margin-top: .5rem;
  display: flex;
  justify-content: center;
}
#footer .key {
  padding: 1px 2px;
  border-radius: .25rem;
  font-weight: bold;
  font-size: .9rem;
  color: white;
  width: 135px;
  text-align: center;
  margin-right: .5rem;
}
#footer .key:last-child {
  margin-right: 0;
}
#footer .key.dead {
  background: #333;
}
#footer .key.icu {
  background: red;
}
#footer .key.hospitalised {
  background: #FF6100;
}
#footer .key.second {
  background: #FF6100;
}
#footer .key.active {
  background: #FFB300;
  color: #333;
}
#tip span.active {
  color: #333;
}
#tip span.hospitalised {
  color: #F75F00;
}
#tip span.icu {
  color: red;
}
#tip span.ventilated {
  color: darkred;
}
#tip span.dead {
  color: #333;
}
#footer .key.first {
  background: #FFB300;
  color: #333;
}
#averageLine {
  stroke: #FF6100;
  stroke-width: 4;
  stroke-linecap: round;
  fill: none;
  pointer-events: none;
}
#footer .key.average {
  background: #FF6100;
}
#footer .key.cases {
  background: #248BC9;
}
.caseBar {
  fill: #248BC9;
  stroke-width: .5;
  stroke: white;
  pointer-events: none;
}
.backgroundBar {
  fill: #e6e6e6;
}
.secondBar {
  fill: #FF6100;
  pointer-events: none;
}
.firstBar {
  fill: #FFB300;
  pointer-events: none;
}
#yAxisGroup .tick text.vax {
  fill: white;
  text-anchor: start;
  font-family: ABCSansNovaBlack, "Arial Black", Helvetica, sans-serif;
  font-size: 1rem;
}
#notes {
  text-align: center;
  margin-top: .5rem;
  font-size: .9rem;
  color: #666;
}
.barLabel {
  text-anchor: end;
  alignment-baseline: central;
  font-size: .85rem;
  pointer-events: none;
}
.firstLabel {
  fill: #333;
}
.secondLabel {
  fill: white;
}
.touchBar {
  fill: rgba(0, 0, 0, 0);
}
.barGroup.selected .caseBar {
  fill: #FFB300;
}
#tip {
  position: absolute;
  opacity: 0;
  color: #333;
  background: white;
  box-shadow: 1px 1px 4px #666;
  padding: 3px 6px;
  border-radius: .25rem;
  pointer-events: none;
}
#tip h1 {
  font-family: ABCSansNovaBlack, "Arial Black", Helvetica, sans-serif;
  font-size: .85rem;
}
#tip p {
  font-weight: normal;
  font-size: .8rem;
}
#tip span {
  font-weight: bold;
}
#tip span.cases {
  color: #248BC9;
}
#tip span.average {
  color: #F75F00;
}
.outcomePoint {
  fill: #FFB300;
  stroke: #333;
  pointer-events: none;
  opacity: 0;
}
.outcomeLine {
  stroke: #333;
  stroke-dasharray: 4 2;
  pointer-events: none;
  opacity: 0;
}
.outcomeCell {
  fill: rgba(0, 0, 0, 0);
}
.outcomeMarker.selected .outcomePoint, .outcomeMarker.selected .outcomeLine {
  opacity: 1;
}
@media only screen and (max-width: 500px) {
  #selector {
    margin-bottom: .25rem;
  }
  #header {
    font-size: 1.15rem;
    margin-bottom: .25rem;
  }
  .choice {
    padding: 1px 3px;
    font-size: .85rem;
    border-radius: .5rem;
    margin-right: .25rem;
  }
  .axis .tick text {
    font-size: .75rem;
  }
  #footer {
    margin-top: 0;
    display: flex;
    flex-flow: wrap;
    justify-content: center;
  }
  #footer .key {
    margin-top: .25rem;
    margin-right: .25rem;
    font-size: .85rem;
  }
  #averageLine {
    stroke-width: 3;
  }
  .caseBar {
    stroke-width: .25;
  }
  #yAxisGroup .tick text.vax {
    font-size: .9rem;
  }
  #notes {
    font-size: .8rem;
  }
  .barLabel {
    font-size: .8rem;
  }
  #tip {
    position: absolute;
    opacity: 0;
    color: #333;
    background: white;
    box-shadow: 1px 1px 4px #666;
    padding: 3px 6px;
    border-radius: .25rem;
    pointer-events: none;
  }
}
@media only screen and (min-width: 750px) {
  body {
    margin-bottom: 0;
  }
  #container {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 750px;
    height: 550px;
    padding: 1rem;
  }
  #selector {
    margin-bottom: 1rem;
  }
  #header {
    font-size: 1.75rem;
    margin-bottom: 1rem;
  }
  .choice {
    padding: 3px 6px;
    width: 150px;
    font-size: 1.1rem;
    border-radius: .75rem;
    margin-right: 1rem;
  }
  .axis .tick text {
    font-size: .9rem;
  }
  #footer {
    margin-top: 1rem;
  }
  #footer .key {
    padding: 2px 4px;
    border-radius: .5rem;
    font-size: 1rem;
    width: 150px;
    margin-right: 1rem;
  }
  #averageLine {
    stroke-width: 6;
  }
  #yAxisGroup .tick text.vax {
    font-size: 1.5rem;
  }
  #notes {
    margin-top: 1rem;
    font-size: 1rem;
  }
  .barLabel {
    font-size: 1rem;
  }
  #tip {
    padding: 4px 8px;
    border-radius: .5rem;
  }
  #tip h1 {
    font-size: 1rem;
  }
  #tip p {
    font-weight: normal;
    font-size: .9rem;
  }
}