: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;
}