:root {
  /* puzzlathlon variables */
  --puzzlathlon-color-blue: #3498db;
  --puzzlathlon-color-green: #7dcea0;
  --puzzlathlon-color-red: #a52a2a;
  --puzzlathlon-color-yellow: #cfc97d;
  --puzzlathlon-offwhite: #d9d9d9;
  --puzzlathlon-primary-archived: hsl(34, 17%, 40%);
  --puzzlathlon-primary-current: rgb(68, 136, 187);

  /* Material Design components variables */
  --mdc-theme-primary: #48b;
  --mdc-theme-surface: hsl(240 7% 30% / 1);
  --mdc-theme-text-primary-on-background: #d9d9d9;
  --mdc-switch-selected-track-color: var(--puzzlathlon-offwhite);
}

body {
  color: var(--puzzlathlon-offwhite);
  background-color: #1b1b1f;
  font-family: sans-serif;
  margin: 0px;
}

.mdc-drawer .mdc-deprecated-list-item,
.mdc-drawer .mdc-deprecated-list-item__graphic,
.mdc-menu .mdc-deprecated-list-item {
  color: var(--mdc-theme-text-primary-on-background) !important;
}

.mdc-menu .mdc-deprecated-list-item {
  justify-content: right;
}

.mdc-drawer .mdc-deprecated-list-item__text {
  overflow: visible;
}

.mdc-drawer-scrim {
  background-color: color-mix(in srgb, var(--mdc-theme-primary) 50%, transparent);
}

.mdc-deprecated-list-item.puzzlathlon-setting label {
  flex: 1 1;
}

#betaLabel {
  background-color: var(--mdc-theme-error);
  border-radius: 5px;
  font-size: x-small;
  padding: 3px;
  vertical-align: top;
  position: relative;
  top: -5px;
}

svg {
  /* color: white; */
  max-width: 100%;
  height: auto;
  display: block;
  margin: 5px auto;
}

select {
  flex: 1;
  align-self: center;
  text-align: center;
  width: 200px;
}

#controls {
  display: flex;
  width: 100%;
}

#controls button:first-child,
#controls button:last-child {
  margin: 0px;
}

#tooltip {
  padding: 15px;
  margin: 15px auto;
  width: 80%;
}

.puzzlathlon-settings-menu {
  right: 0 !important;
}

.puzzlathlon-menu-toggle {
  width: 100%;
}

.puzzlathlon-score-group-toggle-group button:nth-child(n + 2) {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}

.puzzlathlon-score-group-toggle-group button:nth-last-child(n + 2) {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

button.puzzlathlon-score-group-toggle.mdc-button--outlined {
  background-color: var(--puzzlathlon-offwhite);
}

#puzzlathlon-menu-game-dailypuzzlathlon::after {
  content: "beta";
  background-color: var(--mdc-theme-error);
  border-radius: 5px;
  font-size: x-small;
  padding: 3px;
  vertical-align: top;
  position: relative;
  top: -5px;
  left: 5px;
}

#puzzlathlon-menu-game-squareword::after {
  content: "new";
  background-color: var(--mdc-theme-secondary);
  border-radius: 5px;
  font-size: x-small;
  padding: 3px;
  vertical-align: top;
  position: relative;
  top: -5px;
  left: 5px;
}

svg #puzzlathlon_graph_xaxis path,
svg #puzzlathlon_graph_yaxis path {
  stroke-width: 1.5px;
}

svg #puzzlathlon_graph_touchAreas rect {
  fill: var(--mdc-theme-primary);
}

.puzzlathlon-graph-grid {
  stroke: currentColor;
  stroke-opacity: 30%;
}

.red circle,
rect.red {
  fill: var(--puzzlathlon-color-red);
}

.red path,
path.red,
line.red {
  stroke: var(--puzzlathlon-color-red);
}

span.red {
  color: var(--puzzlathlon-color-red);
}

.green circle,
rect.green {
  fill: var(--puzzlathlon-color-green);
}

.green path,
path.green,
line.green {
  stroke: var(--puzzlathlon-color-green);
}

span.green {
  color: var(--puzzlathlon-color-green);
}

.blue circle,
rect.blue {
  fill: var(--puzzlathlon-color-blue);
}

.blue path,
path.blue,
line.blue {
  stroke: var(--puzzlathlon-color-blue);
}

span.blue {
  color: var(--puzzlathlon-color-blue);
}

.yellow circle,
rect.yellow {
  fill: var(--puzzlathlon-color-yellow);
}

.yellow path,
path.yellow,
line.yellow {
  stroke: var(--puzzlathlon-color-yellow);
}

span.yellow {
  color: var(--puzzlathlon-color-yellow);
}

path {
  stroke-width: 4px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

path.scoreline {
  stroke-width: 2px;
  stroke-dasharray: 5, 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 70%;
}

path.streakline {
  stroke-width: 12px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

line.bestline {
  color: gold;
  stroke-opacity: 1;
}

text {
  font-size: x-large;
}