/* ========================================
   Login Page Styles
   ======================================== */

/* Hero Background Image */
.login-hero {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* Input Group with Icons */
.input-icon-wrapper {
    position: relative;
    display: flex;
    align-items: stretch;
}

    .input-icon-wrapper .input-icon {
        position: absolute;
        left: 0;
        top: 0;
        height: calc(3.5rem + 2px);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        color: #6c757d;
        border: 1px solid #ced4da;
        border-radius: 50rem 0 0 50rem;
        background-color: #fff;
        z-index: 5;
    }

    .input-icon-wrapper .form-floating {
        flex: 1;
    }

        .input-icon-wrapper .form-floating .form-control {
            padding-left: 60px;
        }

        .input-icon-wrapper .form-floating label {
            padding-left: 60px;
        }

        .input-icon-wrapper .form-floating > .form-control:focus ~ label,
        .input-icon-wrapper .form-floating > .form-control:not(:placeholder-shown) ~ label {
            padding-left: 60px;
        }

    .input-icon-wrapper:focus-within .input-icon {
        border-color: var(--bs-primary);
        color: var(--bs-primary);
    }

    .input-icon-wrapper:has(.is-valid) .input-icon {
        border-color: var(--bs-success);
        color: var(--bs-success);
    }

    .input-icon-wrapper:has(.is-invalid) .input-icon {
        border-color: var(--bs-danger);
        color: var(--bs-danger);
    }

.card.shadow-none {
    box-shadow: none !important;
}