:root {
    --brak-dark-blue: #28647d; /* Hintergrund, Schrift, Icons */
    --brak-light-blue: #ecf5f7; /* hellblauer Hintergrund */
    --brak-medium-blue: #A7D2E3; /* hellblauer Buttons "ausgegraut" */
    --brak-greyed-white: #F7F7F7; /* Hellgrau für Eingabefelder */
    --brak-red: #C00000;
    --brak-green: #3C763D;
    --brak-yellow: #f0b101;
    --brak-dark-grey: #707070;
    --brak-light-grey: #D0CECE;
    --brak-medium-grey: #AFABAB;

    --brak-white: #ffffff;
    --brak-black: #000000;

    --brak-site-padding: 100px;

    --brak-top-bar-height: 30px;
    --brak-top-bar-container-height: calc(3 * var(--brak-top-bar-height));

    --brak-logo-margin-top: 30px;
    --brak-logo-height: 60px;

    --brak-header-height: calc(var(--brak-top-bar-container-height) + var(--brak-logo-margin-top) + var(--brak-logo-height));

    --brak-footer-height: 190px;
    --brak-footer-linkbanner-line-height: 25px;
    --brak-copyright-font-size: .75rem;

    --brak-main-padding-top: calc(30px + var(--brak-header-height));
    --brak-main-padding-bottom: calc(30px + var(--brak-footer-height));
}

body, #web-dialogs-app, header, main, footer {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    font-family: "Open Sans", sans-serif;
}

#web-dialogs-app {
    min-height: 100%;
    position: relative;
}

header {
    height: var(--brak-header-height);
    text-align: center;
    position: absolute;
    top: 0;
    width: 100%;
}

main {
    padding: var(--brak-main-padding-top) var(--brak-site-padding) var(--brak-main-padding-bottom);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

main > *:first-child {
    margin-top: 0;
}

footer {
    height: var(--brak-footer-height);
    position: absolute;
    bottom: 0;
    width: 100%;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 10px;
    margin-bottom: 5px;
    text-align: center;
}

h1 {
    font-weight: bold;
}

a, .form-check-label {
    cursor: pointer;
    user-select: none;
}

form {
    width: 100%;
}

/* Hide password toggle icon in WebKit-based browsers */
input[type="password"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    display: none;
}

/* Hide password toggle icon in Microsoft Edge and Internet Explorer */
input[type="password"]::-ms-reveal {
    display: none;
}

.ellipsis, .ellipsis * {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.avoid-line-break {
    display: inline-block;
}

.modal-header {
    background-color: var(--brak-dark-blue);
    color: #fff;
}

.modal-title {
    line-height: 100%;
    font-weight: bold;
    margin-top: 0;
}

.modal-title > .svelte-fa:first-child {
    margin-right: 0.5em;
}

.modal-header h1,
.modal-header h2,
.modal-header h3,
.modal-header h4,
.modal-header h5,
.modal-header h6 {
    margin: 0;
}

.modal-header .btn-close {
    filter: invert(93%) sepia(7%) saturate(0%) hue-rotate(159deg) brightness(107%) contrast(107%);
}

.modal-footer {
    background-color: var(--brak-greyed-white);
}