:root {
    /* Font */
    /* Colors */
    --main-blue: #2E58A7;
    --main-white: #FFFFFF;
    --support-blue: #1B395A;
    --support-blue-lighter: #1B436E;
    --support-brown: #363435;
    --input-white: #E8F1F6;
    --error-fill: #FFD3D3;
    --error-border: #8F1C1C;
    --error-text: #821A1A;
}

body {
    background: var(--main-white) !important;
}

.btn {
    border: var(--bs-btn-border-width) solid var(--main-blue) !important;
    background-color: var(--main-blue) !important;
    --bs-btn-padding-x: 5rem !important;
}

    .btn:hover {
        border: var(--bs-btn-border-width) solid var(--support-blue-lighter) !important;
        background-color: var(--support-blue-lighter) !important;
    }

#login-form {
    margin-bottom: 1rem;
}

.login-form-max-width {
    max-width: 400px;
}

.form-control {
    border: 1px solid transparent !important;
    background-color: var(--input-white) !important;
}

.login-card-container {
    color: var(--support-brown);
}

.login-bottom-links-container {
    color: var(--support-brown);
}

    .login-bottom-links-container a {
        text-decoration: none;
        color: var(--support-brown);
        transition: all 0.3s ease;
    }

        .login-bottom-links-container a:hover {
            color: var(--support-blue-lighter);
        }

.svg-container {
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
    margin-top: 4rem;
}

    .svg-container svg {
        width: 100%;
        height: auto;
        display: block;
    }

.login-notification-container {
    min-height: 4rem;
    transition: all 0.3s ease;
}

.login-notification-content {
    visibility: visible;
    opacity: 0;
    text-align: left;
    padding: 0.375rem 0.75rem;
    background: var(--error-fill);
    border: 1px solid var(--error-border);
    border-radius: 0.375rem;
    transition: all 0.3s ease;
}

.notification-in {
    animation: fade-notification-in 0.5s ease-out;
    animation-fill-mode: forwards;
}

.notification-out {
    animation: fade-notification-out 0.5s ease-in;
    animation-fill-mode: forwards;
}

.error-message-text {
    color: var(--error-text);
    margin: 0;
}

/* ========== */
/* Animations */
/* ========== */
@keyframes fade-notification-in {
    0% {
        opacity: 0;
        filter: blur(5px);
    }

    50% {
        filter: blur(0);
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade-notification-out {
    0% {
        opacity: 1;
        filter: blur(0);
    }

    100% {
        filter: blur(5px);
        opacity: 0;
    }
}



/* ============= */
/* Media Queries */
/* ============= */
@media (max-width: 1920px) {
    .svg-container {
        /*visibility: hidden;*/
        max-width: 300px;
    }
}