/* ------ Login container CSS ------ */
.login-container {
    position: relative;
    background-color: #dcdcdc;
    overflow: hidden;
}

[data-bs-theme="dark"] .login-container::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: rgba(0,0,0,0.75);
}

.login-container .login-footer {
    align-self: center;
}

@media (min-width: 768px) {
    .login-container {
        background: url("../images/login-bg.jpg") no-repeat bottom / cover;
        background-color: #c9c9c9;
    }

        .login-container .login-footer {
            align-self: end;
        }
}

.login-container .login-logo {
    color: var(--bs-body-color);
    height: 30px;
}

.login-container .login-graphic {
    max-height: 20vh;
}

.login-container > * {
    position: relative;
    z-index: 1;
}

@keyframes fadeInScale {
    0% {
        opacity: 0.1;
        transform: scale(0.98);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.login-container .login-card {
    animation: fadeInScale 0.5s ease forwards;
}

/* ------ More switch sizes ------ */
.form-check-input {
    clear: left;
}

.form-switch.form-switch-sm {
    margin-bottom: 0.5rem;
}

    .form-switch.form-switch-sm .form-check-input {
        height: 1rem;
        width: calc(1rem + 0.75rem);
        border-radius: 2rem;
    }

.form-switch.form-switch-md {
    margin-bottom: 1rem;
}

    .form-switch.form-switch-md .form-check-input {
        height: 1.5rem;
        width: calc(2rem + 0.75rem);
        border-radius: 3rem;
    }

.form-switch.form-switch-lg {
    margin-bottom: 1.5rem;
}

    .form-switch.form-switch-lg .form-check-input {
        height: 2rem;
        width: calc(3rem + 0.75rem);
        border-radius: 4rem;
    }

.form-switch.form-switch-xl {
    margin-bottom: 2rem;
}

    .form-switch.form-switch-xl .form-check-input {
        height: 2.5rem;
        width: calc(4rem + 0.75rem);
        border-radius: 5rem;
    }