:root {
    --clBodyBg: #dfd6ce;
    --clBodyText: #000;
    --clPanelBG: #b1a79f;
    --clButtonFace: #cac1bb;
    --clButtonFaceHover: #b3a7a0;
    --clButtonFaceActive: #c6b5aa;
    --clButtonText: #000000;
    /*--clButtonBlend: color-dodge;*/
    --clButtonDisabled: #000;
    --clInputBG: #f1eae4;
    --clShadow: rgba(0, 0, 0, 0.2);
    --clErrorBG: #644;
    --clErrorText: #F00;
    --clLink: #002587;
    --clLinkHover: #0047bd;
    --clLinkVisited: #770077;
}

@media (prefers-color-scheme: dark) {
    :root {
        --clBodyBg: #333;
        --clBodyText: #CCC;
        --clPanelBG: #444;
        --clButtonFace: #555;
        --clButtonFaceHover: #666;
        --clButtonFaceActive: #444;
        --clButtonText: #CCC;
        /*--clButtonBlend: color-dodge;*/
        --clButtonDisabled: #000;
        --clInputBG: #202020;
        --clShadow: rgba(0, 0, 0, 0.4);
        --clErrorBG: #644;
        --clErrorText: #F00;
        --clLink: #8AF;
        --clLinkHover: #9BF;
        --clLinkVisited: #FAF;
    }
}

.panel {
    background: var(--clPanelBG);
    border-radius: 5px;
    padding: 2px 4px;
    margin: 5px;
}

body {
    background: var(--clBodyBg);
    color: var(--clBodyText);
    padding: 0;
    margin: 0;
    font-size: 16px;
    font-family: sans-serif;
}

textarea {
    font-size: 16px;
}

/*h1, h2, h3, h4, h5, h6 {*/
/*    margin: 0;*/
/*    padding: 0;*/
/*}*/

a {
    color: var(--clLink);
    cursor: pointer;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:visited {
    color: var(--clLinkVisited);
}

input {
    font-size: 16px;
    padding: 0 4px;
    vertical-align: middle;
}

input[type=submit],
button {
    color: var(--clButtonText);
    background: var(--clButtonFace);
    border: none;
    border-radius: 4px;
    box-shadow: 2px 2px 3px var(--clShadow);
    margin: 0 2px;
    user-select: none;
    mix-blend-mode: var(--clButtonBlend);
}

button:disabled, button[disabled] {
    opacity: 0.5;
}

button:hover:enabled {
    cursor: pointer;
    background: var(--clButtonFaceHover);
}

button:active:enabled {
    background: var(--clButtonFaceActive);
    box-shadow: 0 0 3px var(--clShadow);
    transform: translate(1px, 1px);
}

input[type='text'], input[type='password'], textarea, option, select {
    color: var(--clBodyText);
    border: none;
    border-radius: 4px;
    margin: 0 2px;
    background: var(--clInputBG);
}

.overlay-errors {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 200px;
    margin-top: -100px;
    margin-left: -200px;
    color: var(--clErrorText);
    background: var(--clErrorBG);
    border-radius: 4px;
    padding: 2px 4px;
    overflow: scroll;
    box-shadow: 2px 2px 10px var(--clShadow);
}

.overlay-errors-close {
    position: absolute;
    width: 80px;
    top: calc(100% - 24px);
    left: calc(50% - 40px);
}

.form-field {
    vertical-align: top;
    margin: 2px 0;
}

.form-field > input {
}

.form-field-error {
    color: var(--clErrorText);
    font-size: 10px;
    padding: 2px 4px;
    border-radius: 2px;
    overflow: scroll;
}