:root {
    --unnamed-color-ef9303: #EF9303;
    --unnamed-color-707070: #707070;
    --unnamed-color-ffffff: #FFFFFF;
    --unnamed-color-555555: #555555;
    --cta: #128AAE;
    --unnamed-color-1ad94e: #1AD94E;
    --warnung: #FF8181;
    --eos-blue-light-–-f2f6ff: #BABABA;
    --eos-blue-dark-1266ae: #1266AE;
    --eos-blue-dark-rgba05-1266ae: rgba(18, 102, 174, 0.5);
    --unnamed-color-383838: #383838;
    --unnamed-color-0070b4: #0070B4;
    --unnamed-color-efefef: #EFEFEF;
    --unnamed-alphacolor-00000067: #00000067;
    --border-radius: 3pt;

    /* Font/text values */
    --unnamed-font-family-noto-sans: Noto Sans;
    --unnamed-font-style-normal: normal;
    --unnamed-font-weight-medium: medium;
    --unnamed-font-weight-normal: normal;
    --unnamed-font-size-14: 14px;
    --unnamed-character-spacing-0: 0px;
    --unnamed-character-spacing-0-7: 0.7px;
    --unnamed-line-spacing-19: 19px;
    --unnamed-text-transform-uppercase: uppercase;
}

@font-face {
    font-family: "Noto Sans";
    src: url("/fonts/NotoSans/NotoSans-Regular.woff2") format("woff2");
    font-display: swap;
}

html,
body {
    font-family: var(--unnamed-font-family-noto-sans);
    font-size: var(--unnamed-font-size-14);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-707070);
    position: relative;
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
}

#eosLogin::before {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color: var(--eos-blue-dark-rgba05-1266ae);
    background: linear-gradient(0deg, var(--eos-blue-dark-rgba05-1266ae), var(--eos-blue-dark-rgba05-1266ae)),url("/images/login/wallpapers/pexels-bri-schneiter-346529.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    filter: blur(0.2em);
    transform: scale(1.1);
    overflow: hidden;
}

#eosLogin {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: relative;

    #eosLoginForm {
        width: clamp(300px, 20%, 350px);
        position: relative;

        & form {

            .loginMsg:first-of-type {
                margin-top: 1em;
            }

            .loginMsg > h4 {
                margin: 0;
                color: var(--unnamed-color-ef9303);
            }

            .loginMsg > p {
                margin: 0;
                color: var(--unnamed-color-ef9303);
            }

            #username.readonly,
            #username:read-only {
                background-color: rgba(200, 200, 200, 0.35);
            }

            > img {
                width: 40%;
            }

            .inputWrap {
                position: relative;
                margin-top: 1em;
            }

            .inputWrap#usernameWrapper {
                margin-top: 1.5em;
            }

            .inputWrap > label {
                font-size: var(--unnamed-font-size-14);
                position: absolute;
                top: 1em;
                left: 1em;
                margin: 0;
                pointer-events: none;
                transition: 0.3s ease all;
                color: var(--unnamed-color-707070);
                opacity: 1;
            }

            & input:focus ~ label,
            & input:not(:focus):valid ~ label,
            & input:-webkit-autofill ~ label {
                top: 0.75em;
                left: 1.5em;
                font-size: 0.75em;
                opacity: 1;
            }

            & input,
            & select,
            #loginButton {
                font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-normal) 13px/18px var(--unnamed-font-family-noto-sans);
                font-size: var(--unnamed-font-size-14);
                letter-spacing: var(--unnamed-character-spacing-0);
                box-sizing: border-box;
                width: 100%;
                height: 3.5em;
                border: none;
                border-radius: var(--border-radius);
            }

            & input,
            & select {
                color: var(--unnamed-color-707070);
                background: transparent linear-gradient(180deg, #F9F9F9 0%, #F5F5F5 100%) 0 0 no-repeat padding-box;
            }

            & input[type="text"]:focus,
            & input[type="password"]:focus,
            & select:focus {
                color: var(--unnamed-color-707070);
                background-color: #FFFFFF;
                box-shadow: none;
                -moz-box-shadow: none;
                -webkit-box-shadow: none;
                outline: 0;
            }

            & input {
                padding: 1.5em 1em 0.5em 1em;
            }

            & select,
            #loginButton {
                padding: 1em;
            }

            & select {
                appearance: none;
                background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
                background-repeat: no-repeat;
                background-position: right 1rem center;
                background-size: 1em;
                background-color: #FFFFFF;
            }

            & option {
                color: var(--unnamed-color-707070);
                line-height: 2rem;
                padding: 0.5rem;
            }

            #loginButton {
                color: #FFFFFF;
                background: var(--unnamed-color-ef9303) 0 0 no-repeat padding-box;
                cursor: pointer;

                #loginBtnIcon {
                    width: 1em;
                }

                #loginBtnIcon.fa-circle-chevron-right:before {
                    font-size: calc(var(--unnamed-font-size-14) - 1px);
                }

                .activated {
                    cursor: not-allowed;
                    pointer-events: none;
                }

                .handwrite {
                    animation: handwrite 1s ease-out;
                    background-image: linear-gradient(90deg, white 50%, transparent 50%);
                    background-size: 200% 100%;
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                }
            }


            #loginButton.disabled,
            #loginButton[disabled],
            #loginButton.locked {
                pointer-events: none;
                cursor: not-allowed;
                -webkit-box-shadow: none;
                box-shadow: none;
                -webkit-touch-callout: none; /* iOS Safari */
                -webkit-user-select: none; /* Safari */
                -moz-user-select: none; /* Old versions of Firefox */
                user-select: none;
                opacity: .65;
                filter: alpha(opacity=65);
            }

            & input:focus-visible,
            & select:focus-visible,
            #loginButton:focus-visible {
                outline: 1pt auto;
            }

            #usernameTextWrapper {
                color: #FFF;
                font-size: 1em;
            }

            #usernameTextWrapper > button {
                font-size: 1em;
                color: #FFF;
                cursor: pointer;
                padding: 0.2em 0.2em 0.2em 0;
                background: no-repeat;
                border: none;
            }

            .removeFromScreen {
                position: fixed;
                bottom: 0;
                right: 0;
                height: 0 !important;
                width: 0 !important;
                overflow: hidden;
                opacity: 0;
                filter: alpha(opacity=0);
            }

        }
    }
}

/**
 * Alert- and confirm boxes (dialog)
 */
dialog.eosDialog,
.bootbox.modal {
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
    color: var(--unnamed-color-707070);
    border-radius: var(--border-radius);
    border: none;
    background-color: var(--unnamed-color-ffffff);
    box-shadow: 0 -1px 2px 0 hsl(220 40% 2% / calc(10% + 2%)), 0 3px 2px -2px hsl(220 40% 2% / calc(10% + 3%)), 0 7px 5px -2px hsl(220 40% 2% / calc(10% + 3%)), 0 12px 10px -2px hsl(220 40% 2% / calc(10% + 4%)), 0 22px 18px -2px hsl(220 40% 2% / calc(10% + 5%)), 0 41px 33px -2px hsl(220 40% 2% / calc(10% + 6%)), 0 100px 80px -2px hsl(220 40% 2% / calc(10% + 7%));
    margin: auto;
    padding: 0;
    position: fixed;
    inset: 0;
    min-width: 20ch;
    max-inline-size: 90vw;
    max-block-size: min(80vh, 100%);
    overflow: hidden;
    outline: none;
    transition: margin-top .5s ease-in;

    > button {
        color: var(--unnamed-color-ffffff);
        position: absolute;
        right: 0.5rem;
        top: 0.5rem;
        font-size: 1.5rem;
        line-height: 1;
        border-radius: unset;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 1021;
    }

    > section {
        flex-grow: 1;
        display: grid;
        grid-template-rows: auto 1fr auto;
        align-items: stretch;
        max-block-size: 80vh;
    }

    & header,
    & .modal-header{

        display: flex;
        gap: 1rem;
        justify-content: space-between;
        align-items: flex-start;
        font-size: 1.8rem;
        color: var(--unnamed-color-ffffff);
        background: var(--eos-blue-dark-1266ae);
        border-bottom: 2px solid var(--unnamed-color-ef9303);
        padding-block: 1rem;
        padding-inline: 1.5rem;

        & a {
            cursor:pointer;
        }
    }

    > section > header > h1,
    > section > header > h2,
    > section > header > h3,
    > section > header > h4,
    > section > header > h5 {
        margin: 0.5em;
    }

    > section > header .dialog-buttons-top button {
        cursor: pointer;
    }

    & .dialogMain {
          background-color: var(--unnamed-color-ffffff);
    }

    > section > article {
        display: grid;
        max-block-size: 100%; /* safari */
        overscroll-behavior-y: contain;
        justify-items: flex-start;
        gap: 1rem;
        padding-inline: 1.5rem;
        padding-block: 1rem;
        z-index: 1002;
    }

    > section > article:not(iframe) {
        padding-inline: 1.5rem;
        padding-block: 1rem;
    }

    > section > article fieldset {
        border: 0;
        padding: 0;
        margin: 0;
        text-align: left;
    }

    > section > footer,
    & footer,
    & .modal-footer{
        display: flex;
        background-color: var(--unnamed-color-ffffff);
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: flex-end;
        align-items: flex-start;
        padding-inline: 1.5rem;
        padding-block: 1rem;
    }

    > section > footer > menu,
    & footer > menu {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        margin: 0;
        padding-inline-start: 0;
    }

    > section > footer > menu > .btn-secondary {
        background: var(--unnamed-color-707070) 0 0 no-repeat padding-box;
    }

    > section > footer > menu > .btn-secondary:hover {
        background: var(--unnamed-color-555555) 0 0 no-repeat padding-box;
    }

    > section > footer > menu:only-child {
        margin-inline-start: auto;
    }
}

dialog.eosDialog:not([open]) {
    pointer-events: none;
    opacity: 0;
}
dialog.eosDialog[open] {
    animation: slide-in-up .5s cubic-bezier(.25, 0, .3, 1) forwards;
}
dialog.eosDialog::backdrop{
    background-color: rgba(0, 0, 0, 0.6);
}
html:has(dialog.eosDialog:not(.bootboxNotification)[open]) {
    overflow: hidden;
}

#devBy {
    color: var(--unnamed-color-ffffff);
    display: flex;
    flex-flow: column nowrap;
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 1em;

    > a > img {
        height: auto;
        max-width: 150px;
    }

    > span {
        font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-normal) 13px/18px var(--unnamed-font-family-noto-sans);
        font-size: var(--unnamed-font-size-14);
        text-align: right;
        padding-bottom: 0.5em;
    }
}

main {
    #notSupported {
        display: none;

        article {
            position: fixed;
            top: 0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100vw;
            height: 100dvh;
            background-color: rgba(0, 0, 0, 0.5);

            > div {
                box-sizing: border-box;
                width: clamp(30ch, 45ch, 95vw);
                padding: 2em;
                color: var(--unnamed-color-efefef);
                background-color: var(--eos-blue-dark-1266ae);
                border-radius: var(--border-radius);

                & h1 {
                    margin: 0;
                    font-size: 1.8em;
                    color: var(--unnamed-color-ef9303);
                    text-wrap: balance;
                }
            }
        }
    }
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: inherit;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: inherit;
    opacity: 1;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: inherit;
    opacity: 1;
}

.heartbeat {
    animation: heartbeat 1s infinite;
}

/**
 * Animations
 */
@keyframes scale-down {
    to {
        transform: scale(.75)
    }
}

@keyframes slide-in-up {
    0% {
        transform: translateY(100%)
    }
}

@keyframes slide-out-up {
    100% {
        transform: translateY(-10rem);
    }
}

@keyframes heartbeat {
    0% {
        transform: scale(1);
    }
    20% {
        transform: scale(1.25);
    }
    40% {
        transform: scale(1);
    }
    60% {
        transform: scale(1.25);
    }
    80% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes handwrite {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: 0 0;
    }
}