:root {
        --color-primary: #780000;
        --color-accent: #c1121f;
        --color-background: #fdf0d5;
    }

    body,
    html {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    .bg-login-side {
        background-color: var(--color-primary);
    }

    .login-form-container {
        background-color: var(--color-background);
    }

    .btn-primary {
        background-color: var(--color-accent);
        border-color: var(--color-accent);
    }

    .btn-primary:hover {
        opacity: 0.9;
        background-color: var(--color-accent);
        border-color: var(--color-accent);
    }

    .form-control:focus {
        border-color: var(--color-accent);
        box-shadow: 0 0 0 0.25rem rgba(193, 18, 31, 0.25);
    }

    .password-wrapper {
        position: relative;
    }

    .password-toggle-icon {
        position: absolute;
        top: 50%;
        right: 1rem;
        transform: translateY(-50%);
        cursor: pointer;
        color: #6c757d;
    }

        input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus,
        input:-webkit-autofill:active {
            -webkit-box-shadow: 0 0 0 30px white inset !important;
            -webkit-text-fill-color: #212529 !important;
            transition: background-color 5000s ease-in-out 0s;
        }

    @media (max-width: 576px) {

        body,
        .btn {
            font-size: 0.9rem;
        }
    }