:root {
    --co-body-bg: #eee;
    --co-body-text: #444;
    --co-body-accent: #6e5b4d;
    --co-body-accent-contrast: #fff;
    --co-textfld-bg: #fff;
    --co-textfld-border: #857474;
    --co-textfld-active-border: #aaa;
    --co-textfld-focus-border: var(--co-body-accent);
    --co-textfld-valid-border: hsl(140 50% 75%);
    --co-textfld-valid-active-border: hsl(140 50% 65%);
    --co-textfld-valid-focus-border: hsl(140 50% 50%);
    --co-textfld-invalid-border: hsl(20 65% 75%);
    --co-textfld-invalid-active-border: hsl(20 65% 65%);
    --co-textfld-invalid-focus-border: hsl(20 65% 50%);
    --co-btn-text: var(--co-body-accent-contrast);
    --co-btn-bg: var(--co-body-accent);
    --co-btn-active-bg: #8e7e73;
}
:root {
    box-sizing: border-box;
}
*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    font: 1em/160% Roboto, sans-serif;
    background-color: var(--co-body-bg);
    color: var(--co-body-text);
    padding: 1.5em;
    max-width: 140ch;
    margin: auto;
}

:root {
    --leading-inputs: 120%;
    --padding-inputs: 0.75em;
    --margin-label: 0.5em;
    --margin-form-gap: 1.5em;
    --margin-btn-gap: 1em;
    --width-input-border: 2px;
    --width-inputs: 400px;
    --width-textarea: 450px;
    --height-textarea: 250px;
    --opacity-input-disabled: 0.5;
    --transition-duration-inputs: 250ms;
    --transition-function-inputs: ease-in-out;
    --transition-inputs: color var(--transition-duration-inputs),
        background-color var(--transition-duration-inputs),
        border-color var(--transition-duration-inputs)
            var(--transition-function-inputs);
}

:read-only:not(
        a,
        label,
        button,
        input[type="button"],
        input[type="submit"],
        input[type="reset"]
    ) {
    cursor: default;
}

:disabled {
    opacity: var(--opacity-input-disabled);
    cursor: not-allowed;
}

/* All elemenets regardless of types */
input,
select,
option,
textarea,
button,
datalist,
fieldset,
legend,
optgroup,
output,
input::file-selector-button {
    font: inherit;
    color: inherit;
    accent-color: var(--co-body-accent);
    transition: var(--transition-inputs);
    line-height: var(--leading-inputs);
}

/* All elements with types */
/* Radio & Checkbox */
/* Buttons */
/* Select, Buttons and text-fields */
select,
textarea,
input[type="date"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
button,
input[type="reset"],
input[type="submit"],
input[type="button"],
input::file-selector-button,
.btn {
    border: var(--width-input-border) solid var(--co-textfld-border);
    padding: var(--padding-inputs);
    background-color: var(--co-textfld-bg);
}
select:focus,
textarea:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="email"]:focus,
input[type="month"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
input[type="week"]:focus,
button:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
input[type="button"]:focus,
input::file-selector-button:focus {
    outline: 0;
}

/* All text-fields x select */
select,
textarea,
input[type="date"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"] {
    width: var(--width-inputs);
    max-width: 100%;
}
.half_width {
    width: 200px;
}

select:hover:not([readonly], [disabled]),
select:active:not([readonly], [disabled]),
textarea:hover:not([readonly], [disabled]),
textarea:active:not([readonly], [disabled]),
input[type="date"]:hover:not([readonly], [disabled]),
input[type="date"]:active:not([readonly], [disabled]),
input[type="datetime-local"]:hover:not([readonly], [disabled]),
input[type="datetime-local"]:active:not([readonly], [disabled]),
input[type="email"]:hover:not([readonly], [disabled]),
input[type="email"]:active:not([readonly], [disabled]),
input[type="month"]:hover:not([readonly], [disabled]),
input[type="month"]:active:not([readonly], [disabled]),
input[type="number"]:hover:not([readonly], [disabled]),
input[type="number"]:active:not([readonly], [disabled]),
input[type="password"]:hover:not([readonly], [disabled]),
input[type="password"]:active:not([readonly], [disabled]),
input[type="search"]:hover:not([readonly], [disabled]),
input[type="search"]:active:not([readonly], [disabled]),
input[type="tel"]:hover:not([readonly], [disabled]),
input[type="tel"]:active:not([readonly], [disabled]),
input[type="text"]:hover:not([readonly], [disabled]),
input[type="text"]:active:not([readonly], [disabled]),
input[type="time"]:hover:not([readonly], [disabled]),
input[type="time"]:active:not([readonly], [disabled]),
input[type="url"]:hover:not([readonly], [disabled]),
input[type="url"]:active:not([readonly], [disabled]),
input[type="week"]:hover:not([readonly], [disabled]),
input[type="week"]:active:not([readonly], [disabled]) {
    border-color: var(--co-textfld-active-border);
}
select:focus:not([readonly], [disabled]),
textarea:focus:not([readonly], [disabled]),
input[type="date"]:focus:not([readonly], [disabled]),
input[type="datetime-local"]:focus:not([readonly], [disabled]),
input[type="email"]:focus:not([readonly], [disabled]),
input[type="month"]:focus:not([readonly], [disabled]),
input[type="number"]:focus:not([readonly], [disabled]),
input[type="password"]:focus:not([readonly], [disabled]),
input[type="search"]:focus:not([readonly], [disabled]),
input[type="tel"]:focus:not([readonly], [disabled]),
input[type="text"]:focus:not([readonly], [disabled]),
input[type="time"]:focus:not([readonly], [disabled]),
input[type="url"]:focus:not([readonly], [disabled]),
input[type="week"]:focus:not([readonly], [disabled]) {
    border-color: var(--co-textfld-focus-border);
}
select:required:valid:hover:not([readonly], [disabled]),
select:required:valid:active:not([readonly], [disabled]),
textarea:required:valid:hover:not([readonly], [disabled]),
textarea:required:valid:active:not([readonly], [disabled]),
input[type="date"]:required:valid:hover:not([readonly], [disabled]),
input[type="date"]:required:valid:active:not([readonly], [disabled]),
input[type="datetime-local"]:required:valid:hover:not([readonly], [disabled]),
input[type="datetime-local"]:required:valid:active:not([readonly], [disabled]),
input[type="email"]:required:valid:hover:not([readonly], [disabled]),
input[type="email"]:required:valid:active:not([readonly], [disabled]),
input[type="month"]:required:valid:hover:not([readonly], [disabled]),
input[type="month"]:required:valid:active:not([readonly], [disabled]),
input[type="number"]:required:valid:hover:not([readonly], [disabled]),
input[type="number"]:required:valid:active:not([readonly], [disabled]),
input[type="password"]:required:valid:hover:not([readonly], [disabled]),
input[type="password"]:required:valid:active:not([readonly], [disabled]),
input[type="search"]:required:valid:hover:not([readonly], [disabled]),
input[type="search"]:required:valid:active:not([readonly], [disabled]),
input[type="tel"]:required:valid:hover:not([readonly], [disabled]),
input[type="tel"]:required:valid:active:not([readonly], [disabled]),
input[type="text"]:required:valid:hover:not([readonly], [disabled]),
input[type="text"]:required:valid:active:not([readonly], [disabled]),
input[type="time"]:required:valid:hover:not([readonly], [disabled]),
input[type="time"]:required:valid:active:not([readonly], [disabled]),
input[type="url"]:required:valid:hover:not([readonly], [disabled]),
input[type="url"]:required:valid:active:not([readonly], [disabled]),
input[type="week"]:required:valid:hover:not([readonly], [disabled]),
input[type="week"]:required:valid:active:not([readonly], [disabled]) {
    border-color: var(--co-textfld-valid-active-border);
}
select:required:valid:focus:not([readonly], [disabled]),
textarea:required:valid:focus:not([readonly], [disabled]),
input[type="date"]:required:valid:focus:not([readonly], [disabled]),
input[type="datetime-local"]:required:valid:focus:not([readonly], [disabled]),
input[type="email"]:required:valid:focus:not([readonly], [disabled]),
input[type="month"]:required:valid:focus:not([readonly], [disabled]),
input[type="number"]:required:valid:focus:not([readonly], [disabled]),
input[type="password"]:required:valid:focus:not([readonly], [disabled]),
input[type="search"]:required:valid:focus:not([readonly], [disabled]),
input[type="tel"]:required:valid:focus:not([readonly], [disabled]),
input[type="text"]:required:valid:focus:not([readonly], [disabled]),
input[type="time"]:required:valid:focus:not([readonly], [disabled]),
input[type="url"]:required:valid:focus:not([readonly], [disabled]),
input[type="week"]:required:valid:focus:not([readonly], [disabled]) {
    border-color: var(--co-textfld-valid-focus-border);
}
select:required:invalid:hover,
select:required:invalid:active,
textarea:required:invalid:hover,
textarea:required:invalid:active,
input[type="date"]:required:invalid:hover,
input[type="date"]:required:invalid:active,
input[type="datetime-local"]:required:invalid:hover,
input[type="datetime-local"]:required:invalid:active,
input[type="email"]:required:invalid:hover,
input[type="email"]:required:invalid:active,
input[type="month"]:required:invalid:hover,
input[type="month"]:required:invalid:active,
input[type="number"]:required:invalid:hover,
input[type="number"]:required:invalid:active,
input[type="password"]:required:invalid:hover,
input[type="password"]:required:invalid:active,
input[type="search"]:required:invalid:hover,
input[type="search"]:required:invalid:active,
input[type="tel"]:required:invalid:hover,
input[type="tel"]:required:invalid:active,
input[type="text"]:required:invalid:hover,
input[type="text"]:required:invalid:active,
input[type="time"]:required:invalid:hover,
input[type="time"]:required:invalid:active,
input[type="url"]:required:invalid:hover,
input[type="url"]:required:invalid:active,
input[type="week"]:required:invalid:hover,
input[type="week"]:required:invalid:active {
    border-color: var(--co-textfld-invalid-active-border);
}
select:required:invalid:focus,
textarea:required:invalid:focus,
input[type="date"]:required:invalid:focus,
input[type="datetime-local"]:required:invalid:focus,
input[type="email"]:required:invalid:focus,
input[type="month"]:required:invalid:focus,
input[type="number"]:required:invalid:focus,
input[type="password"]:required:invalid:focus,
input[type="search"]:required:invalid:focus,
input[type="tel"]:required:invalid:focus,
input[type="text"]:required:invalid:focus,
input[type="time"]:required:invalid:focus,
input[type="url"]:required:invalid:focus,
input[type="week"]:required:invalid:focus {
    border-color: var(--co-textfld-invalid-focus-border);
}
select::selection,
textarea::selection,
input[type="date"]::selection,
input[type="datetime-local"]::selection,
input[type="email"]::selection,
input[type="month"]::selection,
input[type="number"]::selection,
input[type="password"]::selection,
input[type="search"]::selection,
input[type="tel"]::selection,
input[type="text"]::selection,
input[type="time"]::selection,
input[type="url"]::selection,
input[type="week"]::selection {
    background-color: var(--co-body-accent);
    color: var(--co-body-accent-contrast);
}

select:not([disabled], [readonly]) option:focus,
select:not([disabled], [readonly]) option:active,
select:not([disabled], [readonly]) option:hover,
select:not([disabled], [readonly]) option:checked {
    background-color: var(--co-body-accent);
    color: var(--co-body-accent-contrast);
}

button,
input[type="reset"],
input[type="submit"],
input[type="button"],
input::file-selector-button,
.btn {
    background-color: var(--co-btn-bg);
    color: var(--co-btn-text);
    cursor: pointer;
}
button:hover,
button:active,
input[type="reset"]:hover,
input[type="reset"]:active,
input[type="submit"]:hover,
input[type="submit"]:active,
input[type="button"]:hover,
input[type="button"]:active,
input::file-selector-button:hover,
input::file-selector-button:active,
.btn:hover {
    background-color: var(--co-btn-active-bg);
}
button:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
input[type="button"]:focus,
input::file-selector-button:focus,
.btn:focus {
    background-color: var(--co-btn-active-bg);
}

/* Labels */
label {
    display: block;
}
label + label,
label + input,
label + select,
label + button,
label + textarea {
    margin-top: var(--margin-label);
}

textarea {
    width: var(--width-textarea);
    height: var(--height-textarea);
}
textarea:read-only,
textarea:disabled {
    resize: none;
}

input::file-selector-button {
    margin-right: var(--margin-form-gap);
}

label:has(input:disabled) {
    opacity: var(--opacity-input-disabled);
    cursor: not-allowed;
}
label:has(input:disabled) :disabled {
    opacity: 1;
}

a {
    text-decoration: none;
    color: #725e50;
}

a:hover {
    text-decoration: underline;
}

a.btn {
    white-space: nowrap;
}

a.btn:hover {
    text-decoration: none;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

table {
    width: 100%;
    margin-top: 1rem;
    border-collapse: collapse;
    text-align: left;
}

.col {
    display: flex;
    flex-direction: row;
}

.col-primary {
    width: 65%;
}

.col-secondary {
    width: 35%;
    font-size: 0.85rem;
}

.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-content {
    display: none;
    position: absolute;
    top: 2.3rem;
    background-color: #f1f1f1;
    box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.2);
    z-index: 1;
}
.dropdown-content a {
    font-size: 1rem;
    color: var(--text-color);
    padding: 1rem;
    display: block;
}
.dropdown-content a:hover {
    background-color: #ddd;
}
.dropdown:hover .dropdown-content {
    display: block;
}

.errorlist {
    list-style-type: none;
}

/* Center */
/* .center label {
    float: none;
    text-align: initial;
    width: initial;
    padding-right: initial;
} */
/* .center input, .center select {
    width: 60%;
} */
/* .center input[type="checkbox"] {
    font-size: 1.5rem;
    width: initial;
    margin-right: 1rem;
} */

/* Touch */
div.touch {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.touch a, .touch th, .touch td {
    padding: 1rem;
    font-size: 1.5rem;
}

/* Keypad */
div:has(> #keypad) {
    display: flex;
    flex-direction: column;
    align-items: center;
}
table#keypad {
    max-width: 35ch;
    text-align: center;
    table-layout: fixed;
    border-spacing: 10px;
    border-collapse: separate;
}
#keypad tr:hover {
    background-color: initial;
}
#keypad td {
    cursor: pointer;
    background-color: var(--co-btn-bg);
    color: var(--co-btn-text);
    border: none;
    padding: 1rem;
}
#keypad td:hover {
    background-color: var(--co-btn-active-bg);
}

/* SURVEY */
div.separate > div > label {
    align-items: center;
    display: flex;
    height: 3rem;
    border: 1px solid #ccc;
    padding-left: 2rem;
    cursor: pointer;
}
div.separate > div > label:has(input:checked) {
    background-color: var(--co-btn-active-bg);
    color: var(--co-btn-text);
}
.separate label:hover {
    background: #ddd;
}
.survey button {
    width: 100%;
}
.survey input[type="radio"] {
    margin: 0;
    opacity: 0;
    width: 0;
}


/* Horizontal Form */
#formset-container > p {
    display:inline-block;
    width: 20%;
}