.monitor-chart {
  margin: 2rem 0;
  font: normal 0.9rem/1.4 system-ui, sans-serif;
  text-align: left;
  color: #20252a;
}
.monitor-chart figcaption {
  margin: 0 0 0.9rem;
  color: inherit;
  font: inherit;
  font-size: 1.1rem;
  text-align: left;
}
.monitor-chart figcaption small { display: block; font-size: 0.85rem; }
.monitor-chart fieldset { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.monitor-chart legend { padding: 0; }
.monitor-chart fieldset > label { cursor: pointer; margin-right: 0.7rem; }
.monitor-chart input[type="radio"] { accent-color: #225779; }
.monitor-chart .mc-data { margin-top: 0.7rem; }
.monitor-chart .mc-type-real:checked ~ .mc-synthetic,
.monitor-chart .mc-type-synthetic:checked ~ .mc-real { display: none; }
.monitor-chart table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  margin: 0;
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: inherit;
}
.monitor-chart caption {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%);
}
.monitor-chart th, .monitor-chart td {
  padding: 0.55rem 0.45rem;
  border: 0;
  border-bottom: 1px solid #d5d9db;
  text-align: left;
  vertical-align: middle;
  overflow-wrap: break-word;
}
.monitor-chart thead th { font-size: 0.8rem; vertical-align: bottom; }
.monitor-chart .mc-short-heading { display: none; }
.monitor-chart thead th:first-child { width: 29%; }
.monitor-chart tbody th { font-weight: 500; }
.monitor-chart .mc-value { display: block; font-weight: 650; }
.monitor-chart .mc-range, .monitor-chart .mc-note { color: #4d555b; font-size: 0.78rem; }
.monitor-chart .mc-note { margin: 0.6rem 0 0; }
.monitor-chart .mc-track {
  position: relative;
  display: block;
  height: 0.5rem;
  margin: 0.25rem 0;
  background: #edf0f1;
}
.monitor-chart .mc-track::before {
  content: "";
  display: block; width: var(--mc-value); height: 100%; background: var(--mc-series);
}
.monitor-chart .mc-interval {
  position: absolute; top: 50%; left: var(--mc-low); right: calc(100% - var(--mc-high));
  border-top: 1px solid #17232a;
}
.monitor-chart .mc-interval::before, .monitor-chart .mc-interval::after {
  content: ""; position: absolute; top: -3px; height: 5px; border-left: 1px solid #17232a;
}
.monitor-chart .mc-interval::after { right: 0; }
.monitor-chart .mc-series-1 { --mc-series: #286483; }
.monitor-chart .mc-series-2 { --mc-series: #7aaaba; }
.monitor-chart .mc-series-3 { --mc-series: #b46b32; }
.monitor-chart.mc-models .mc-series-1 { --mc-series: #338077; }
.monitor-chart.mc-models .mc-series-2 { --mc-series: #af6f37; }
.monitor-chart.mc-models .mc-series-3 { --mc-series: #4e658b; }
@media (max-width: 520px) {
  .monitor-chart table { font-size: 0.78rem; }
  .monitor-chart thead th, .monitor-chart .mc-range { font-size: 0.7rem; }
  .monitor-chart td, .monitor-chart th { padding: 0.45rem 0.2rem; }
  .monitor-chart thead th { overflow-wrap: normal; }
  .monitor-chart:not(.mc-models) thead th:last-child { width: 27%; }
  .monitor-chart .mc-full-heading { display: none; }
  .monitor-chart .mc-short-heading { display: inline; }
  .monitor-chart tbody th { hyphens: auto; }
  .monitor-chart tbody td { vertical-align: top; }
  .monitor-chart fieldset > label { white-space: nowrap; margin-right: 0.2rem; font-size: 0.83rem; }
  .monitor-chart fieldset > input { margin-inline: 0.2rem; }
}
@media print {
  .monitor-chart fieldset > label, .monitor-chart fieldset > input, .monitor-chart legend { display: none; }
  .monitor-chart .mc-data { display: block !important; }
  .monitor-chart caption { position: static; width: auto; height: auto; clip-path: none; }
  .monitor-chart tr { break-inside: avoid; }
}
