:root {
    --bg-primary: #fefdff;
    --bg-secondary: #fbfbff;
    --text-primary: #000000;
    --text-secondary: #333333;
    --text-disabled: #868686;

    --bg-highlight: #eeeeee73;
    --bg-active: #bdbdbd73;

    --bg-green: #319b00;
    --bg-green-highlight: #36aa00;
    --bg-green-active: #3cbe00;

    --border-primary: #383838;
    --border-light: #38383848;
    --border-x-light: #8f8f8f28;
    --border-active: #0060df;
    --border-green: #319b00;
    --border-orange: #975600;
    --border-red: #970000;

    --text-red: #8b0000;
    --text-green: #006400;
    --text-blue: #00008b;

    --header-bg: #e0e0e0;
    --nav-bg: #e0e0e0;

    --spinner-svg: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48c3R5bGU+LnNwaW5uZXJfYWpQWXt0cmFuc2Zvcm0tb3JpZ2luOmNlbnRlcjthbmltYXRpb246c3Bpbm5lcl9BdGFCIC43NXMgaW5maW5pdGUgbGluZWFyfUBrZXlmcmFtZXMgc3Bpbm5lcl9BdGFCezEwMCV7dHJhbnNmb3JtOnJvdGF0ZSgzNjBkZWcpfX08L3N0eWxlPjxwYXRoIGQ9Ik0xMiwxQTExLDExLDAsMSwwLDIzLDEyLDExLDExLDAsMCwwLDEyLDFabTAsMTlhOCw4LDAsMSwxLDgtOEE4LDgsMCwwLDEsMTIsMjBaIiBvcGFjaXR5PSIuMjUiLz48cGF0aCBkPSJNMTAuMTQsMS4xNmExMSwxMSwwLDAsMC05LDguOTJBMS41OSwxLjU5LDAsMCwwLDIuNDYsMTIsMS41MiwxLjUyLDAsMCwwLDQuMTEsMTAuN2E4LDgsMCwwLDEsNi42Ni02LjYxQTEuNDIsMS40MiwwLDAsMCwxMiwyLjY5aDBBMS41NywxLjU3LDAsMCwwLDEwLjE0LDEuMTZaIiBjbGFzcz0ic3Bpbm5lcl9halBZIi8+PC9zdmc+');
    --caret-right-svg: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktY2FyZXQtcmlnaHQtZmlsbCIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJtMTIuMTQgOC43NTMtNS40ODIgNC43OTZjLS42NDYuNTY2LTEuNjU4LjEwNi0xLjY1OC0uNzUzVjMuMjA0YTEgMSAwIDAgMSAxLjY1OS0uNzUzbDUuNDggNC43OTZhMSAxIDAgMCAxIDAgMS41MDZ6Ii8+Cjwvc3ZnPg0K');
    --caret-down-svg: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktY2FyZXQtZG93bi1maWxsIiB2aWV3Qm94PSIwIDAgMTYgMTYiPgogIDxwYXRoIGQ9Ik03LjI0NyAxMS4xNCAyLjQ1MSA1LjY1OEMxLjg4NSA1LjAxMyAyLjM0NSA0IDMuMjA0IDRoOS41OTJhMSAxIDAgMCAxIC43NTMgMS42NTlsLTQuNzk2IDUuNDhhMSAxIDAgMCAxLTEuNTA2IDB6Ii8+Cjwvc3ZnPg0K');
    --link-svg: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktbGluayIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNNi4zNTQgNS41SDRhMyAzIDAgMCAwIDAgNmgzYTMgMyAwIDAgMCAyLjgzLTRIOXEtLjEzIDAtLjI1LjAzMUEyIDIgMCAwIDEgNyAxMC41SDRhMiAyIDAgMSAxIDAtNGgxLjUzNWMuMjE4LS4zNzYuNDk1LS43MTQuODItMXoiLz4KICA8cGF0aCBkPSJNOSA1LjVhMyAzIDAgMCAwLTIuODMgNGgxLjA5OEEyIDIgMCAwIDEgOSA2LjVoM2EyIDIgMCAxIDEgMCA0aC0xLjUzNWE0IDQgMCAwIDEtLjgyIDFIMTJhMyAzIDAgMSAwIDAtNnoiLz4KPC9zdmc+DQo=');
}

input {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px groove var(--border-light);
    border-radius: 2px;
    padding: 10px;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    margin: 0;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
}

#main {
    box-shadow: 0 0 1px 1px var(--border-primary);
    width: 350px;
    min-width: 30vw;
    max-width: 100vw;
    box-sizing: border-box;
    padding: 40px;
    margin: auto;
}

#logo {
    text-align: center;
    margin-bottom: 40px;
}

#logo > img {
    height: 3em;
}

#loading {
    text-align: center;
}

#main > form button {
    margin-top: 20px;
}

#main > form > :last-child {
    text-align: center;
}

.cf-turnstile {
    margin: auto;
}

#error {
    color: var(--text-red);
    font-size: small;
}

fieldset {
    border: none;
    display: flex;
    gap: 10px;
    align-items: baseline;
    margin-bottom: 8px;
    flex-wrap: wrap;
    flex: auto 1 1;
}

fieldset > input:only-of-type,
fieldset > select:only-of-type,
fieldset > label:not(.button):only-of-type,
fieldset > textarea:only-of-type,
fieldset > .inputlist:only-of-type,
fieldset > *:only-child {
    width: 100%;
}

form.checked fieldset:invalid {
    border-left: 1px solid var(--text-red);
}

form.checked fieldset[data-invalid]::after {
    content: attr(data-invalid);
    width: 0;
    flex-basis: 100%;
    font-size: 9pt;
    color: var(--text-red);
}

.button {
    font-size: 14px;
    margin: 5px;
    padding: 5px 20px;
    border-radius: 5px;
    border: 1px solid var(--border-light);
    cursor: pointer;
}

.button:not(:disabled):hover {
    background: var(--bg-highlight);
}

.button:not(:disabled):active {
    background: var(--bg-active);
}

.button:disabled {
    opacity: 0.7;
    color: var(--text-disabled);
}

.button:focus-visible {
    outline: 1px solid var(--border-active);
}

.button svg {
    width: 1em;
    height: min-content;
    vertical-align: -.125em;
}

.dialog-box {
    margin: auto;
    padding: 20px;
    background: var(--bg-secondary);
    box-shadow: 0 0 2px 1px var(--border-primary);
    border-radius: 10px;
    min-width: 250px;
    max-width: 500px;
    max-height: 500px;
    text-align: center;
    position: relative;
    overflow: auto;
}