:root {
    --admintools-bg: rgba(0, 0, 255, 0.03);
    --blue-font: darkblue;
    --declaratie-gradient-1: rgba(0, 0, 255, 0.02);
    --declaratie-gradient-2: rgba(242, 250, 255, 1);
    --declaratie-solid-bg: rgba(0, 0, 225, 0.05);
    --default-grey-bg: gainsboro;
    --disabled-bg: lightgrey;
    --document-cell-bg: #ebf4fd;
    --error-font: #b70000;
    --success: #008c00;
    --form-table-separator: rgba(0, 0, 0, 0.05);
    --foto-albuminfo-bg: rgba(255, 255, 255, 0.8);
    --foto-button-bg: rgb(29, 51, 51);
    --foto-button-borders: darkgrey;
    --foto-lightbox-bg: rgba(128, 128, 128, 0.9);
    --foto-lightbox-loadicon-bg: rgba(100, 100, 100, 0.7);
    --foto-lightbox-side-bg: rgba(32, 54, 54, 0.9);
    --foto-lightbox-topbottom-bg: rgba(47, 79, 79, 0.9);
    --foto-thumbnail-shadow: #2c2c44;
    --foto-upload-prog-bg: lightgrey;
    --foto-upload-prog-border: white;
    --foto-upload-prog-fill: royalblue;
    --header: #0a4490;
    --header-dark: #0a2790;
    --hr-border: #eeeeee;
    --input-border: #c8bfc4;
    --input-font: #54444e;
    --input-group-left-bg: #eeeeee;
    --input-shadow: #ddd8dc;
    --link-font: #0000ee;
    --main-bg-1: #ffffff;
    --main-bg-2: #e9f4ff;
    --mobile-menu-bg: #1f1f1f;
    --mobile-menu-dropdown-bg: #4c3737;
    --nav-link-clicked: #93dbce;
    --nav-link-font: #d0d0b8;
    --nav-link-hover: #dbba93;
    --news-bg: rgba(121, 160, 224, 0.05);
    --newsitem-gradient-end: #dcedff;
    --newsitem-gradient-middle: #eef6ff;
    --newsitem-gradient-start: #ddeeff;
    --stem-table-bg: #eeeeff;
    --stem-block-results: #1faa1f;
    --stuk-bg: #2473c1;
    --stuk-hidden-bg: darkgrey;
    --stuk-link: #00fefe;
    --stukje-adminoptions-bg: #c5def7;
    --table-archdiff-blank: rgba(0, 0, 0, 0.1);
    --table-archdiff-deleted: crimson;
    --table-archdiff-inserted: lightgreen;
    --table-archdiff-lineinfo: rgba(0, 0, 0, 0.75);
    --table-archdiff-unmodified: transparent;
    --table-head: #4d8ac7;
    --table-row-disabled: #aad1d2;
}

@font-face {
    font-family: Coolvetica;
    src: url(../ttf/coolvetica.ttf);
}
@font-face {
    font-family: Cabin;
    src: url(../ttf/Cabin-Regular.ttf);
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: Cabin;
    src: url(../ttf/Cabin-Bold.ttf);
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: Cabin;
    src: url(../ttf/Cabin-Italic.ttf);
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: Cabin;
    src: url(../ttf/Cabin-BoldItalic.ttf);
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: BPreplay;
    src: url(../ttf/BPreplay.otf);
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: BPreplay;
    src: url(../ttf/BPreplayBold.otf);
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: BPreplay;
    src: url(../ttf/BPreplayItalics.otf);
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: BPreplay;
    src: url(../ttf/BPreplayBoldItalics.otf);
    font-weight: bold;
    font-style: italic;
}

html {
    width: 100%;
    height: 100%;
    scroll-behavior: smooth;
    text-size-adjust: none;
}

body {
    position: relative;
    margin: 0;
    width: 100%;
    min-height: 100%;
    max-width: 100%;
    background-color: var(--main-bg-2);
    background-image:
        url(../img/STUK_wit.svg),
        -moz-linear-gradient(top, var(--main-bg-1), var(--main-bg-2));
    background-image:
        url(../img/STUK_wit.svg),
        -o-linear-gradient(top, var(--main-bg-1), var(--main-bg-2));
    background-image:
        url(../img/STUK_wit.svg),
        -webkit-linear-gradient(top, var(--main-bg-1), var(--main-bg-2));
    background-repeat: no-repeat;
    background-position:
        99% calc(99% - 38px),
        0% 0%;
    background-attachment: fixed;
    background-size:
        auto 8%,
        115%;
    font-family: Cabin;
}

body.trans-body {
    background: transparent;
}

header {
    display: flex;
    width: 100%;
    height: 131px;
    background-color: var(--header);
}

header a#banner {
    display: flex;
    width: 100%;
    height: 100%;
}

header a#sponsorkliks {
    position: absolute;
    right: 0;
    height: 131px;
}

header img {
    display: block;
    width: auto;
    height: 90%;
    margin: auto auto;
}

nav {
    background-color: var(--header);
    background-image: -moz-linear-gradient(top, var(--header), var(--header-dark));
    background-image: -o-linear-gradient(top, var(--header), var(--header-dark));
    background-image: -webkit-linear-gradient(top, var(--header), var(--header-dark));
    display: flex;
    padding-left: 0.5%;
    padding-right: 0.5%;
    height: 43px;
}

nav.only_computer {
    position: static; /*unsupported*/
    position: -webkit-sticky; /*Safari*/
    position: sticky; /*others*/
    top: 0;
    z-index: 99;
}

nav a {
    padding: 10px;
    float: left;
}

nav a:link,
nav a:visited {
    color: var(--nav-link-font);
    text-shadow: 0 0 3px black;
    text-decoration: none;
    font: 1.2em Coolvetica;
    height: 23px;
    position: relative;
    top: 0;
    transition:
        height 0.2s,
        top 0.2s;
}

nav a:hover,
nav a:active {
    color: black;
    text-shadow: none;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    box-shadow: 1px 1px 3px 0px black;
    height: 26px;
    top: -3px;
}

nav a:hover {
    background-color: var(--nav-link-hover);
}

nav a:active {
    background-color: var(--nav-link-clicked);
}

nav div.dropdown {
    position: relative;
    display: inline-block;
}

nav div.dropdown a.dropbtn i,
div#mobile_menu_block div.dropdown a.dropbtn i {
    font-size: 0.8em;
    transform: none;
    transition: transform 0.2s;
}

nav div.dropdown:hover a.dropbtn i,
div#mobile_menu_block div.dropdown.dropped a.dropbtn i {
    transform: rotate(90deg);
}

nav div.dropdown div.dropdown-content {
    visibility: hidden;
    position: absolute;
    width: 138px;
    padding: 5px 0px;
    background-color: var(--header-dark);
    top: 40px;
    z-index: 1;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    box-shadow: 1px 1px 3px 0px black;
    transition: top 0.2s;
}

nav div.dropdown:hover div.dropdown-content {
    visibility: visible;
    top: 43px;
}

nav div.dropdown div.dropdown-content a {
    transition: padding-left 0.2s;
}

nav div.dropdown div.dropdown-content a:hover,
nav div.dropdown div.dropdown-content a:active {
    height: 23px;
    padding-left: 13px;
    border-top-left-radius: 0px;
    border-bottom-right-radius: 5px;
    top: 0;
}

nav div.divider {
    flex: 1 0 0px;
}

article {
    margin: 3vh auto 0 auto;
    display: table;
    max-width: 95%;
    padding-bottom: 7vh;
    word-break: break-word;
}

article.login_form,
article.logout_page {
    text-align: center;
}

article#stukken,
article#stuk,
article.thin,
section.thin,
p.thin {
    max-width: 650px;
}

article.mild_thin,
section.mild_thin,
p.mild_thin {
    max-width: 950px;
}

article.min_width {
    min-width: 450px;
}

section form.login_form p {
    line-height: 40px;
    display: inline;
    margin-right: 10px;
}

section form.login_form p.last_in_row {
    margin-right: 0;
}

section form.login_form input,
section form.login_form button {
    height: 20px;
}

section form.login_form input[type="submit"] {
    height: 24px;
    font-weight: bold;
}

section.stuk {
    background-color: var(--stuk-bg);
    border: 1px solid black;
    border-radius: 10px;
    margin-block-end: 15px;
    color: white;
    cursor: pointer;
}

section.stuk.hidden {
    background-color: var(--stuk-hidden-bg);
}

section.stuk.stem.hidden.results {
    background-color: var(--stem-block-results);
}

section.stuk.linkless {
    padding: 20px;
    cursor: initial;
}

section.stuk:not(.hidden) a {
    color: var(--stuk-link);
}

section.stuk:not(.stem) a {
    color: white;
    text-decoration: none;
    padding: 20px;
    display: block;
}

section.stuk a h2 {
    text-decoration: underline;
}

section.stuk.stukje a {
    padding: inherit;
}

section.stuk.stukje div.admin-options {
    background-color: var(--stukje-adminoptions-bg);
    color: black;
    width: 50%;
    margin: 0 auto 1em;
    border: 1px solid black;
    border-radius: 10px;
}

section.stuk.stem {
    position: relative;
}

section.stuk.stem p,
section.stuk.stem h2 {
    margin-block-start: 0;
    margin-block-end: 0;
}

section.admintools {
    border: 1px solid black;
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 15px;
    background-color: var(--admintools-bg);
    box-shadow: inset 1px -1px 4px 0px black;
}

section.admintools h2 {
    text-align: center;
    margin-block-start: 0;
}

section#diff-sec p {
    margin-left: auto;
    margin-right: auto;
    max-width: 650px;
}

section#declaraties {
    text-align: center;
    max-width: 1600px;
}

section#eventContent {
    width: 650px;
    float: left;
}

section#enrollmentContent {
    width: 700px;
    float: right;
    margin-left: 20px;
}

@media screen and (max-width: 1500px) {
    section#eventContent {
        width: 700px;
        float: none;
    }
    section#enrollmentContent {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}

section#news {
    width: 650px;
    float: left;
    margin-bottom: 3vh;
    margin-top: 14px;
    background-color: var(--news-bg);
    padding: 14px 14px 1em;
    border-radius: 15px;
}

section#news h2 {
    margin-block-start: 0;
}

section#news div.newsitem {
    background-color: var(--main-bg-2);
    background-image: linear-gradient(
        175deg,
        var(--newsitem-gradient-start) 0%,
        var(--newsitem-gradient-middle) 88%,
        var(--newsitem-gradient-end) 100%
    );
    margin-block-start: 1em;
    margin-left: -7px;
    padding: 7px;
    border-radius: 10px;
}

section#news div.newsitem h3 {
    margin-block-start: 0;
    text-shadow: 1px 1px 5px #0000002e;
}

section#calendar_section {
    width: 700px;
    float: right;
    margin-left: 20px;
}

@media screen and (max-width: 1500px) {
    section#news {
        width: 700px;
        float: none;
    }
    section#calendar_section {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}

section.thin-line-table table p {
    margin-block-start: 0;
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: white;
    background-color: var(--header);
}

footer p {
    margin-block-start: 9px;
}

h1 {
    font-size: 26pt;
    text-align: center;
}

h1#welcome {
    font-size: 35pt;
    margin-block-end: 0;
}

h2#subwelcome {
    font-size: 23pt;
}

article.faq {
    max-width: 900px;
}

article.faq h2 {
    font-style: italic;
}

p.inline {
    display: inline;
    margin-right: 10px;
}

p.last_in_row {
    margin-right: 0;
}

p.news_tag {
    margin-block-start: -0.8em;
    margin-block-end: -0.8em;
    font-size: 0.9em;
}

p.adminbuttons {
    margin-block-end: -0.8em;
}

p.adminbuttons img,
td.adminbuttons img,
a.stem-delete img,
a.auth-delete img {
    width: 20px;
    height: 20px;
}

p.small_line_margin.bottom {
    margin-block-end: 1em;
}

p.auth-form {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

span.news_creator {
    font-style: italic;
}

span.news_date {
    font-weight: bold;
}

a:not(.ignore-a) {
    color: var(--link-font);
}
a.ignore-a {
    color: inherit;
}

a.stem-delete {
    position: absolute;
    right: -10px;
    top: -10px;
}

ol li,
ul li {
    margin-block-start: 0.3em;
}

input,
button,
select,
textarea {
    color: var(--input-font);
    border: 1px solid var(--input-border);
    border-radius: 4px;
    box-shadow: inset 1px 1px 2px var(--input-shadow);
    background: #fff;
    font-family: Cabin;
}

input[type="number"] {
    width: 5em;
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="date"],
textarea,
select {
    padding-left: 3px;
}

input[type="checkbox"] {
    zoom: 1.2;
}

button,
input[type="button"],
input[type="submit"],
select {
    height: 25px;
}

select {
    min-width: 50px;
}

button:focus,
button:active,
input[type="button"]:focus,
input[type="button"]:active,
input[type="submit"]:focus,
input[type="submit"]:active {
    background: #ddd;
}

input#id,
input#titel,
input#naam,
input#repetities,
input#regisseur,
input#assistent {
    width: 232px;
}

input#delete_user_button {
    font-size: 1.8em;
}

input.delete_button {
    font-size: 3em;
    padding: 10px 22px;
    height: auto;
    border-radius: 20px;
    margin-inline-start: 10px;
    margin-inline-end: 10px;
}

input.thin_input {
    width: 30% !important;
}

table#overzicht {
    border: 2px solid var(--table-head);
    border-collapse: collapse;
    margin-bottom: 5%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 4vh;
}

table#overzicht thead {
    background-color: var(--table-head);
}

table#overzicht tr:nth-child(even) {
    background-color: var(--main-bg-2);
}

table#overzicht tr.disabled {
    background-color: var(--table-row-disabled);
}

table#overzicht td,
table#overzicht th {
    padding: 8px;
}

table.line_margin tr > td > p {
    margin-block-start: 0.15em;
    margin-block-end: 0.15em;
}

table.stem-table {
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;

    tr.unauthorized {
        color: darkgray;
    }

    td.img {
        padding: 0;
    }

    img {
        width: 25px;
        height: 25px;
    }
}

table.light-table {
    color: black;
    background-color: var(--stem-table-bg);
    border-radius: 10px;
    border: 1px solid black;
    border-left: 0;
    border-spacing: 0;
}
table.light-table thead {
    display: table-header-group;
    border-color: inherit;
}
table.light-table tr {
    display: table-row;
    border-color: inherit;
}
table.light-table th,
table.light-table td {
    padding: 5px;
    text-align: left;
    border-left: 1px solid black;
}
table.light-table td {
    border-top: 1px solid black;
}
table.light-table thead:first-child tr:first-child th:first-child,
table.light-table tbody:first-child tr:first-child td:first-child {
    border-top-left-radius: 10px;
}
table.light-table thead:last-child tr:last-child th:first-child,
table.light-table tbody:last-child tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

table.diff {
    text-align: left;
    text-align-last: left;
}
table.diff td br {
    display: block;
    margin: 3px 0;
    content: "";
}
table.diff td.diffUnmodified span {
    background-color: var(--table-archdiff-unmodified);
}
table.diff td.diffDeleted span {
    background-color: var(--table-archdiff-deleted);
    text-decoration: line-through;
}
table.diff td.diffInserted span {
    background-color: var(--table-archdiff-inserted);
}
table.diff td.diffBlank {
    background-color: var(--table-archdiff-blank);
}
table.diff td.diffLineInfo {
    background-color: var(--table-archdiff-lineinfo);
    color: white;
    font-weight: bold;
    border-top: 3px solid black;
}

/* Show icons next to sortable columns' headers */
table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after {
    content: " \25B4\25BE";
}
/* Display a row number in sortable tables */
table.sortable tbody {
    counter-reset: sortabletablescope;
}
table.sortable thead tr::before {
    content: "#";
    display: table-cell;
    padding: 8px;
}
table.sortable tbody tr::before {
    content: counter(sortabletablescope);
    counter-increment: sortabletablescope;
    display: table-cell;
    padding: 10px; /* 8 px padding plus 2 px border */
}

form table,
table.rows-separated,
table.cols-separated {
    border-collapse: collapse;
}
form table tr,
table.rows-separated tr {
    border-bottom: 1px solid var(--form-table-separator);
}
table.cols-separated td {
    border-left: 1px solid var(--form-table-separator);
    border-right: 1px solid var(--form-table-separator);
}
table.with-cell-space td {
    padding: 2px 8px 2px 4px;
}

fieldset#declaratie,
fieldset#uitschrijven,
fieldset#stem {
    background-color: var(--declaratie-solid-bg);
    background-image: linear-gradient(
        to right,
        var(--declaratie-gradient-1) 0%,
        var(--declaratie-gradient-2) 50%,
        var(--declaratie-gradient-1) 100%
    );
    border-radius: 10px;
    margin-bottom: 20px;
}

fieldset#uitschrijven {
    max-width: 500px;
}

div#image_preview_container {
    width: 200px;
    height: 200px;
    border: 2px solid black;
    position: relative;
}

div#image_preview_container > img#image_preview {
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

div#event_image_container {
    height: 500px;
    margin: auto;
    position: relative;
}

div#event_image_container > img#event_image {
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border: 2px solid black;
    border-radius: 10px;
}

iframe#calendar {
    border: 2px solid black;
    border-radius: 10px;
    width: 700px;
    height: 500px;
}

img#loadimg-decl {
    display: none;
    margin: auto;
}

div.input_group {
    display: table;
    width: 100%;
}

div#donutchart,
div#columnchart {
    width: 800px;
    height: 500px;
}

div.declaratie {
    border: 1px solid black;
    border-radius: 15px;
    margin: 15px;
    padding: 15px;
    display: inline-block;
    width: 200px;
    text-align: left;
    background-color: var(--declaratie-gradient-1);
    position: relative;
}

div.declaratie h2 {
    font-size: 1.1em;
}

div.declaratie h2 a {
    text-decoration: none;
}

div.declaratie h2 br {
    display: block;
    border-top: 1px solid black;
    content: "";
}

div.declaratie a.decl-delete {
    position: absolute;
    background-image: url(../img/trash-red.svg);
    top: 15px;
    right: 15px;
    width: 30px;
    height: 30px;
}

div.declaratie a.decl-dl {
    position: absolute;
    background-image: url(../img/download.svg);
    right: 15px;
    bottom: 15px;
    width: 60px;
    height: 60px;
}

div#newevent-form img {
    height: 20px;
}

pre.feedback {
    white-space: pre-wrap; /* Since CSS 2.1 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -o-pre-wrap; /* Opera 7+ */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

.blessed-vla-element::before {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url(../img/vla.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color: inherit;
    background-blend-mode: multiply;
    opacity: 0.05;
}

.input_group.group_left,
.input_group.group_right {
    display: table-cell;
    margin: 0;
}

.input_group.group_left {
    border: 1px solid var(--input-border);
    border-radius: 4px;
    background-color: var(--input-group-left-bg);
    padding-right: 8px;
    padding-left: 8px;
    width: 1%;
}

.input_group.group_right {
    height: 25px;
    width: 100%;
}

.error {
    color: var(--error-font) !important;
    font-weight: bold;
}

.blue {
    color: var(--blue-font) !important;
    font-weight: bold;
}

.center,
.centered {
    text-align: center;
    text-align-last: center;
}

.justify {
    text-align: justify;
}

.left {
    text-align: left;
    text-align-last: left;
}

.right {
    text-align: right;
    text-align-last: right;
}

.mono {
    font-family: monospace;
}

.grey-bg,
.gray-bg {
    background-color: var(--default-grey-bg);
}

.bold {
    font-weight: bold;
}

.italic {
    font-style: italic;
}

.full_width,
.fullwidth {
    width: 100%;
}

.normal-cursor {
    cursor: auto;
}

.w_150px {
    width: 150px;
}

.zoom {
    zoom: 140%;
}

.inline_block {
    display: inline-block;
}

.flex {
    display: flex;
}

.flex-center {
    align-items: center;
}

.small_line_margin {
    margin-block-start: 0.4em;
    margin-block-end: 0em;
}

.small_line_margin.top {
    margin-block-start: inherit;
}

.small_line_margin.bottom {
    margin-block-end: inherit;
}

.bigger_top_margin {
    margin-block-start: 1.1em;
}

.pointer_on_hover:hover {
    cursor: pointer;
}

.auto_auto {
    margin-left: auto;
    margin-right: auto;
}

.no-word-wrap {
    word-break: normal !important;
}

.small-font {
    font-size: 0.8rem;
}

.display-none {
    display: none;
}

:disabled {
    background-color: var(--disabled-bg);
}