:root {
  --plot-legend-color: #667;
  --plot-legend-background: #f3f3f3;
  --plot-tooltip-background: #fffcd0;
  --plot-tooltip-border: 1px solid #ddd;
  --plot-line-color: #48e; /* #69f */
  --plot-secondary-line-color: #c3c;
  --plot-grid-color: #838383;
  --plot-grid-border-color: #545454;
}
@media (prefers-color-scheme: dark) {
  :root {
    --plot-legend-color: #bbb;
    --plot-legend-background: #484848;
    --plot-tooltip-background: #fffcd0;
    --plot-tooltip-border: 1px solid #686868;
    --plot-line-color: #48e; /* #69f */
    --plot-secondary-line-color: #c3c;
    --plot-grid-color: #686868;
    --plot-grid-border-color: #aaa;
  }
}
.hidden {
  display: none;
}
.legendLabel,
.legend-label {
  font:
    normal 11px / 1.5 Helvetica,
    Arial,
    sans-serif;
  color: var(--plot-legend-color);
}
.plot-tooltip {
  display: none;
  font:
    normal 10px Arial,
    sans-serif;
  background: var(--plot-tooltip-background);
  border: var(--plot-tooltip-border);
  padding: 1px 6px;
  position: absolute;
}
.plot {
  width: 100%;
  height: 220px;
  font:
    normal 11px / 1.5 Helvetica,
    Arial,
    sans-serif; /*background: #f8f8f8; border: 1px solid #f0f0f0;*/
  margin: 1.25em auto 1.5em auto;
  box-sizing: border-box;
}
textarea {
  display: block;
  width: 100%;
  max-width: none;
  height: 80px;
  margin: 1.25em auto 1.5em auto;
}
textarea.plot-placeholder {
  height: 220px;
}
textarea.hidden {
  display: none;
}
@media (max-width: 500px) {
  .plot,
  textarea.plot-placeholder {
    height: 160px;
  }
}