:root {
    --cl-red: #d31b34;
    --fg-red: white;

    --cl-green: rgb(81, 151, 152);
    --fg-green: white;

    --cl-gray: silver;
    --fg-gray: white;

    --cl-darkgray: #0f0f0f;
    --fg-darkgray: white;

    --cl-white: white;
    --fg-white: #0f0f0f;

    --cl-black: 16, 16, 16;
    --fg-black: white;

    --fg-black-highlight: #f0f0f0;
    --cl-highlight: maroon;

    --cl-lightgray: #f0f0f0;
    --fg-lightgray: #0f0f0f;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;

    background-color: var(--cl-lightgray);
    color: var(--fg-lightgray);
}

h1, h2, h3, h4, h5, h6, details.h2 summary {
    font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
}

h2, details.h2 summary {
    display: block;
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0;
    margin-inline-end: 0;
    font-weight: bold;
}

details.h2 {
    padding-bottom: .5em;
}

details.h2 summary {
    cursor: pointer;
}

details.h2 summary:before {
    content: "▶ ";
}

details[open].h2 summary:before {
    content: "▼ ";
}

html, body, p, td, th, div.paragraph {
    font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
    font-size: 14px;
    font-weight: normal;
    line-height: 140%;
}

a {
    color: var(--cl-red);
    text-decoration: underline;
}

a:hover {
    color: var(--cl-red);
    text-decoration: none;
}

a[onclick] {
    cursor: pointer;
}

textarea {
    vertical-align: top;
    font-family: inherit;
    background-color: var(--fg-black);
    resize: none;
}

textarea:hover, input[type=text]:hover {
    background-color: var(--fg-black-highlight);
    transition: background-color;
    transition-duration: 500ms;
}

textarea:focus, input[type=text]:focus {
    border-color: var(--cl-highlight);
    background-color: var(--fg-black-highlight);
    transition: background-color, border-color;
    transition-duration: 500ms;
    outline: 1px solid var(--cl-highlight);
}

input:is([type=text], [type=password], [type=number], [type=date], [type=datetime-local]), select, textarea, .combobox {
    border: 1px solid #bdbdbd;
    background-color: var(--fg-black);
    padding: 1px 2px;
    font-size: 14px;
    line-height: 14px;
    box-sizing: border-box;
}

input[type=text], input[type=password], select {
    height: 26px;
}

input[type=text]:disabled, input[type=password]:disabled, select:disabled {
    opacity: 0.5;
    background-color: var(--cl-lightgray);
}

.disabled input[type=text]:disabled, .disabled input[type=password]:disabled, .disabled select:disabled {
    opacity: 1.0;
}

.disabled {
    opacity: 0.5;
}

input[type=text], input[type=password] {
    width: 100%;
}

input[type=submit], input[type=button], button, .page .main .navi ul li, a.button {
    box-sizing: border-box;
    background-color: var(--cl-red);
    color: var(--cl-white);
    letter-spacing: 1px;
    text-transform: uppercase;
    border: none;
    height: 26px;
    font-size: 12px;
    line-height: 14px;
    padding: 6px 12px;
    cursor: pointer;
    vertical-align: middle;
    text-decoration: none;
}

input[type=submit].outline {
    background-color: var(--cl-white);
    border: 1px solid var(--cl-red);
    color: var(--cl-red);
}

:is(input[type=submit], input[type=button], button, .page .main .navi ul li, a.button).greenbutton {
    background-color: darkgreen;
}

:disabled {
    cursor: default !important;
}

input[type=button]:disabled {
    opacity: 0.7;
}

.hidden {
    display: none !important;
}

label {
    cursor: pointer;
}

.list tr:hover td {
    background-color: var(--cl-lightgray);
    transition: background-color, color;
    transition-duration: 500ms;
}

h1 span.extra, h2 span.extra, h3 span.extra, h4 span.extra {
    font-size: 14px;
    font-weight: normal;
}

div.file {
    border-top: 50px solid var(--cl-white);
    background-color: var(--cl-lightgray);
    margin-top: 1em;
}

div.file > h1:first-child, div.file > h2:first-child, div.file > h3:first-child {
    margin-top: -40px;
    padding: .5em;
    float: left;
    clear: left;
    background-color: var(--cl-lightgray);
}

div.file > .file_contents {
    clear: left;
    padding-bottom: .5em;
    margin: .5em .5em;
}

dl {
    margin: 0;
    /*break-inside: avoid-column;*/
}

dt {
    font-weight: bold;
}