:root {
    --bs-primary: #56baed;
    --bs-primary-rgb: 86, 186, 237;
    --bs-focus-ring-color: #56baed;
}

.main-content-box {
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15);
    border-radius: 15px
}

button.btn-login {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    box-shadow: 0 4px 16px 0 rgba(95, 186, 233, 0.5);
    padding: 15px;
    font-size: 14px;
    transition: all 0.2s ease-in-out;

    &:hover {
        filter: brightness(1.05);
    }
    &:active {
        filter: brightness(1.1);
        transform: scale(0.95);
    }
    &:disabled {
        filter: brightness(0.80);
    }
}

.fadeInScale {
    animation: fadeInScale 0.3s ease-in-out;
}

@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.login-invalid {
    animation: shake 0.3s cubic-bezier(0.34, 0.09, 0.15, 0.98) both;
    transform: translate3d(0, 0, 0);
}

@keyframes shake {
    15% {
        transform: translate3d(12px, 0, 0);
    }
    30% {
        transform: translate3d(-12px, 0, 0);
    }
    45% {
        transform: translate3d(12px, 0, 0);
    }
    60% {
        transform: translate3d(-9px, 0, 0);
    }
    75% {
        transform: translate3d(6px, 0, 0);
    }
    90% {
        transform: translate3d(-3px, 0, 0);
    }
}