.tablewrapper {
    overflow-x: auto;
}

img {
    max-inline-size: 100%;
}

a {
    text-decoration: underline;
}

nav h1 {
    text-align: center;
}

.leftnav {
    display: flex;
    flex-direction: column;

    .buttons {
        display: flex;
        flex-direction: column;
        gap: .5rem;
    }

    .userselect {
        display: flex;
        flex-wrap: wrap;
    }
}

body {
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: 1rem;
    padding-block: 3rem;
}

:root,
body.light {
    --primary:#00696a;--on-primary:#ffffff;--primary-container:#6ff6f7;--on-primary-container:#002020;--secondary:#4a6363;--on-secondary:#ffffff;--secondary-container:#cce8e7;--on-secondary-container:#041f20;--tertiary:#4c607c;--on-tertiary:#ffffff;--tertiary-container:#d3e3ff;--on-tertiary-container:#051c35;--error:#ba1a1a;--on-error:#ffffff;--error-container:#ffdad6;--on-error-container:#410002;--background:#fafdfc;--on-background:#191c1c;--surface:#f7faf9;--on-surface:#191c1c;--surface-variant:#dae5e4;--on-surface-variant:#3f4948;--outline:#6f7979;--outline-variant:#bec8c8;--shadow:#000000;--scrim:#000000;--inverse-surface:#2d3131;--inverse-on-surface:#eff1f0;--inverse-primary:#4cdadb;--surface-dim:#d8dada;--surface-bright:#f7faf9;--surface-container-lowest:#ffffff;--surface-container-low:#f2f4f3;--surface-container:#eceeee;--surface-container-high:#e6e9e8;--surface-container-highest:#e0e3e2;
}

body.dark {
    --primary:#4cdadb;--on-primary:#003737;--primary-container:#004f50;--on-primary-container:#6ff6f7;--secondary:#b0cccb;--on-secondary:#1b3435;--secondary-container:#324b4b;--on-secondary-container:#cce8e7;--tertiary:#b3c8e9;--on-tertiary:#1d314b;--tertiary-container:#344863;--on-tertiary-container:#d3e3ff;--error:#ffb4ab;--on-error:#690005;--error-container:#93000a;--on-error-container:#ffb4ab;--background:#191c1c;--on-background:#e0e3e2;--surface:#101414;--on-surface:#e0e3e2;--surface-variant:#3f4948;--on-surface-variant:#bec8c8;--outline:#889392;--outline-variant:#3f4948;--shadow:#000000;--scrim:#000000;--inverse-surface:#e0e3e2;--inverse-on-surface:#2d3131;--inverse-primary:#00696a;--surface-dim:#101414;--surface-bright:#363a3a;--surface-container-lowest:#0b0f0f;--surface-container-low:#191c1c;--surface-container:#1d2020;--surface-container-high:#272b2a;--surface-container-highest:#323535;
}

@media print {
    button,
    .button {
        display: none;
    }
}

.ok,
.error {
    max-width: 30rem;
    padding: 1rem;
    border: 1px solid rgb(from var(--messagecolor) r g b);
    background-color: rgb(from var(--messagecolor) r g b / 0.4);
}

.ok {
    --messagecolor: green;
}

.error {
    --messagecolor: red;
}