:root {
    --clr_text: #333333;

    --clr_primary_light: #f0f7e8;
    --clr_primary: #65b32e;
    --clr_primary_dark: #5fad27;
    --clr_secondary: #293d4f;
    --clr_alert: #b92d00;
    --clr_alert_light: #f2b2ac;
    --clr_notice: #d9a405;
    --clr_notice_light: #f4d167;

    --fs_small: 0.875rem;
    --fs_regular: 1rem;
    --fs_large: clamp(1.5rem, 4vw, 2rem);

    --fw_regular: 400;
    --fw_semi_bold: 600;
    --fw_bold: 800;

    --border_radius: 0.5em;
    --border_radius_small: 0.25em;
    --border_style: dotted;

    --lh_reset: 1.1;
    --lh_regular: 1.3;
}

/*
    Sticky Bar
*/

.fd_sso_bar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 10000;
    padding: 0.75em 1em;
    color: white;
    font-family: inherit;
    font-size: var(--fs_small);
    box-shadow: 0px -5px 10px 0px rgba(0, 0, 0, 0.2);
    background-color: var(--clr_secondary);
}

.fd_sso_bar__inner {
    display: flex;
    justify-content: center;
    margin-inline: auto;
    width: min(1360px, 100%);
}

@media (min-width: 30em) {
    .fd_sso_bar__inner {
        justify-content: start;
        background: transparent url(../images/meinportal.webp) 100% 50%
            no-repeat;
        background-size: 9em;
    }
}

.fd_sso_bar__user {
    display: inline-block;
    margin: 0 0.5em 0 0.25em;
}

.fd_sso_bar__links {
    display: flex;
    justify-content: space-between;
}

.fd_sso_bar__link {
    margin-inline: 0.5em;
    text-decoration: underline;
}

.fd_sso_bar__link:where(:focus, :hover) {
    text-decoration: none;
}

.fd_sso_bar__link::after {
    content: '\007C';
    position: relative;
    text-decoration: none;
    right: -0.5em;
}

.fd_sso_bar__link:last-child:after {
    display: none;
}

.fd_sso_bar--animated {
    animation: bubble-animation 0.5s 1 forwards;
}

@keyframes bubble-animation {
    from,
    to {
        transform: scale(1, 1);
    }
    25% {
        transform: scale(0.95, 1.05);
    }
    50% {
        transform: scale(1.05, 0.95);
    }
    75% {
        transform: scale(0.98, 1.01);
    }
}

/*
    Login Page
*/

.fd_sso_login {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    background: transparent url(../images/background.webp) 0 0 no-repeat;
    background-size: cover;
}

.fd_sso_login__inner {
    position: relative;
    width: min(600px, 90%);
    margin-inline: auto;
    padding: 3em 2em;
    margin-block-start: 6em;
    border-radius: var(--border_radius);
    box-shadow: 0 0 20px 0 #b3b3b3;
    background-color: white;
    z-index: 1;
    font-size: var(--fs_regular);
    line-height: var(--lh_regular);
    text-align: center;
}

.fd_sso_login__title {
    font-size: var(--fs_large);
    line-height: var(--lh_reset);
    margin-block-end: 1em;
}

.fd_sso_login__subtitle {
    font-size: var(--fs_regular);
}

.fd_sso_login__submit {
    padding: 1.65em 3em;
    border: 0 none;
    color: white;
    font-weight: var(--fw_bold);
    cursor: pointer;
    border-radius: var(--border_radius_small) !important;
    text-transform: uppercase;
    background-color: var(--clr_primary);
}

.fd_sso_login__submit:where(:focus, :hover) {
    background-color: var(--clr_primary_dark);
}

.fd_sso_login__message {
    margin-block-end: 2em;
    padding: 1em;
    border-radius: var(--border_radius_small);
    color: inherit;
    border: 1px var(--border_style);
}

.fd_sso_login__alert {
    color: var(--clr_alert);
    border-color: var(--clr_alert_light);
}

.fd_sso_login__notice {
    color: var(--clr_notice);
    border-color: var(--clr_notice_light);
}

/*
    Helper Classes 
*/

.clr_alert {
    color: var(--clr_alert);
}

.clr_notice {
    color: var(--clr_notice);
}