/* ===========================
   Background
=========================== */
.bg-image {
    background-image: url('../imgs/background/bg.webp') !important;
    background-size: cover !important;
    background-position: bottom !important;
}

/* ===========================
   Card
=========================== */
.login-card {
    position: relative;
    background: transparent;
    overflow: hidden;
    border: none;
}

.login-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(2, 8, 6, 0.62);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(184, 218, 200, 0.685);
    border-radius: 22px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, .45);
    z-index: 0;
}

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

/* ===========================
   Logo
=========================== */
.logo-login {
    max-width: 320px;
    width: 100%;
}

/* ===========================
   Inputs
=========================== */
.login-input {
    overflow: hidden;
}

.login-input label {
    color: white;
}

.login-input .input-group-text {
    background: rgba(255, 255, 255, .08);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .15);
    border-right: 0 !important;
    box-shadow: none !important;
}

.login-input .form-control {
    height: 54px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .15);
    border-left: 0 !important;
    background-clip: border-box;
}

.login-input .form-control::placeholder {
    color: #ccc;
}

.login-input .form-control:focus {
    background: rgba(255, 255, 255, .10);
    color: #fff;
    box-shadow: none !important;
}

.login-input .btn {
    border: 1px solid rgba(255, 255, 255, .15);
    border-left: none;
    background: rgba(255, 255, 255, .08);
}

.login-input .btn:hover {
    background: rgba(255, 255, 255, .15);
}

.form-password-action-icon {
    background-color: #fff !important;
}

.form-password-action:hover,
.form-password-action:focus,
.form-password-action:active {
    background: transparent !important;
    box-shadow: none !important;
}

/* ===========================
   Checkbox
=========================== */
.form-check-input:checked {
    background-color: #198754 !important;
    border-color: #198754 !important;
}

/* ===========================
   Animação
=========================== */

.fadeInDown {
    animation: fadeInDown .8s;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}