/*
 * Body
**/
div.container section {
  padding-bottom: 1em;
}

div.container section h3 {
  font-size: 1.3rem;
}

div.container section h4 {
  font-size: 1.15rem;
}

div.container section ul {
  font-size: 0.95rem;
}

div.container section + section {
  border-top: 4px solid #eee;
  margin-top: 1em;
  padding-top: 1em;
}

/*
 * Nav Pills
**/
ul#pills-tab {
  padding-bottom: 1rem;
}

ul#pills-tab .nav-link {
  color: #e08600;
}

ul#pills-tab .nav-link:focus, ul#pills-tab .nav-link:hover {
  color: #ff8c00;
}

ul#pills-tab .nav-link.active, ul#pills-tab .show > .nav-link {
  color: white;
  background-color: #e08600;
}

/*
 * Tables
**/
table th {
  text-align: center;
  font-size: 0.9em;
}

table td {
  font-size: 0.8em;
  text-align: center;
  font-family: monospace;
  vertical-align: middle;
}

table caption {
  padding-left: 2em;
  font-size: 0.9em;
}

table .sub-th {
  display: block;
  font-size: 0.8em;
  font-weight: normal;
}

table span.note {
  display: block;
  font-size: 0.8em;
}

table span.delta {
  font-weight: bold;
}

table thead th.capstone {
  width: 10px;
}

table tbody tr th.capstone {
  writing-mode: vertical-lr;
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  text-align: baseline;
  vertical-align: middle;
  font-weight: normal;
}

/*
 * Trends Table
**/
table.metrics tr {
  border-color: #eee;
}

table.metrics thead {
  border-top: 2px solid  #ad6800;
}

table.metrics thead tr {
  background-color: #ffffff;
}

table.metrics tbody,
table.metrics thead th,
table.metrics tr.cases {
  border-bottom: 2px solid  #ad6800;
}

table.metrics span.value {
  font-weight: bold;
}

table.metrics span.postfix {
  font-weight: normal;
}

table tbody tr.rate th.capstone {
  background-color: #ffe6bf
}

table tbody tr.hospitalizations th.capstone {
  background-color: #e8a440
}

table.metrics td.level span.value,
table.metrics td.trend span.value {
  text-transform: capitalize;
  font-weight: bold;
  color: black;
}

table.metrics td.rising { background-color: #eeb0b1; }
table.metrics td.flat { background-color: #ffdf8b; }
table.metrics td.falling { background-color: #ade7ca; }
table.metrics td.erratic { background-color: #e8a440; }

table.metrics td.low { background-color: #ade7ca; }
table.metrics td.moderate { background-color: #ffdf8b; }
table.metrics td.high { background-color: #eeb0b1; }
table.metrics td.very-high { background-color: #ff4b53; }

table.metrics tr.rate th { background-color: #fff2df; }
table.metrics tr.wastewater th { background-color: #ffe6bf; }
table.metrics tr.cases th { background-color: #ffcc80; }
table.metrics tr.hospitalizations th { background-color: #ecb360; }
table.metrics tr.icus th { background-color: #e8a440; }
table.metrics tr.deaths th { background-color: #e08600; }

/*
 * Trends Table
**/
table.trends td span.delta {
  margin-left: 0.5rem;
}

table.trends td.falling span.delta,
table.trends td.admin-tests.rising span.delta {
  color: ForestGreen;
}

table.trends td.rising span.delta,
table.trends td.admin-tests.falling span.delta {
  color: DarkRed;
}

table.trends td.test-positive-rate.falling {
  background-color: LightGreen;
}

table.trends td.test-positive-rate.rising {
  background-color: LightCoral;
}

/*
 * Waves / Phases Table
**/
/* table.waves tr.wave {
  background-color: #ff000025
}

table.waves tr.lull {
  background-color: #e0860025
} */

table.waves td {
  padding: 0rem .25rem;
}

table.waves td {
  padding: 0rem .25rem;
}

/* https://stackoverflow.com/a/41263493/1093087 */
table.waves td.index span.circled {
  background: #666; /* Overridden below */
  height: 28px;
  width: 28px;
  font-family: var(--bs-body-font-family);
  color: white;
  font-weight: bold;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  text-align: center;
  display: flex;
}

table.waves tr.rising td.index span.circled {
  background: #cb3c2c;
}

table.waves tr.flat td.index span.circled {
  background: #f1c78a;
}

table.waves tr.falling td.index span.circled {
  background: #1967d2;
}

table.waves td.chart {
  text-align: center;
}

table.waves td.chart div.chart-wrapper {
  display: inline-block;
}

section#oc-covid-phases tr td.trend {
  font-weight: bold;
}

section#oc-covid-phases tr.rising td.trend {
  color: #cb3c2c;
}

section#oc-covid-phases tr.flat td.trend {
  color: #e08600;
}

section#oc-covid-phases tr.falling td.trend {
  color: #1967d2;
}

section#oc-covid-phases td.notes {
  font-family: var(--bs-body-font-family);
}

section#oc-covid-phases td.notes a.variant {
  font-weight: bold;
  color: #cb3c2c;
  text-decoration: none;
}

section#oc-covid-phases td.notes a.variant:hover {
  text-decoration: underline;
}

/*
 * Waves Chart
**/
div.chart-block {
  height: 300px;
  margin: 2rem 0;
}