.login-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    max-width: 900px;
    width: 100%;
}

.login-left {
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
}

    .login-left img {
        max-width: 100%;
        height: auto;
    }

.login-right {
    padding: 40px;
}

.btn-login {
    background: #171a63;
    color: #fff;
    border-radius: 8px;
    font-weight: 500;
    width: 100%;
    padding: 10px;
}



    .btn-login:hover,
    .btn-login:active,
    .btn-login:focus {
        background: #171a63 !important;
        color: #fff !important;
        box-shadow: 0 10px 20px rgba(30, 58, 138, 0.3);
        transform: translateY(-2px);
        outline: none;
    }


.form-control {
    border-radius: 8px;
}

.links {
    font-size: 14px;
}

.remember {
    font-size: 14px;
}

.gradient {
    position: fixed;
    inset: 0;
    background: linear-gradient(225deg, rgb(0, 166, 214,0.2), rgb(186, 31, 181,0.2));
}
/* Enable scrolling on small screens by making gradient container flow */
@@media (max-width: 768px) {
    .gradient {
        position: static;
        min-height: 100vh;
        overflow-y: auto;
    }

    body {
        overflow-y: auto;
    }
}

.refreshbg {
    background: url(assets/media/icons/ic_captcha_refresh.png) no-repeat center !important;
    background-size: 20px 20px !important;
}

.input-group-textbg {
    align-items: center;
    font-weight: 500;
    line-height: 1.5;
    color: #3f4254;
    text-align: center;
    white-space: nowrap;
    background-color: #f5f8fa !important;
    border: 1px solid #e4e6ef;
}

.form-controlhs {
    padding: .75rem 1rem;
    margin-left: 60px;
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.5;
    color: #5e6278;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #e4e6ef;
    appearance: none;
    border-radius: .75rem;
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 8%);
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

#dntCaptchaImg {
    border: 1px solid #e4e6ef;
    background-color: #FFFFFF;
    border-radius: .75rem;
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 8%);
}

.otp-input {
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 24px;
    margin: 0 5px;
    border-radius: 5px;
}

.timer {
    font-size: 14px;
    color: #555;
}

.resend-link {
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    color: #007bff;
}

    .resend-link.disabled {
        pointer-events: none;
        color: grey;
    }

.terms-text a {
    color: #00A6D6;
    text-decoration: underline;
}

/* Custom checkbox styles */
.form-check-input {
    width: 20px; /* adjust size */
    height: 20px; /* adjust size */
    border: 1px solid #00A6D6; /* custom border color */
    background-color: #fff; /* background when unchecked */
}

    .form-check-input:checked {
        background-color: #00A6D6; /* background when checked */
        border-color: #00A6D6; /* border color when checked */
    }

/* Remove browser autofill yellow/blue background so prefilled looks same */
input.form-control:-webkit-autofill,
input.form-control:-webkit-autofill:hover,
input.form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: #5e6278;
    -webkit-box-shadow: 0 0 0px 1000px #e9f2f8 inset; /* matches custom background */

    transition: background-color 9999s ease-in-out 0s;
    caret-color: #5e6278;
}

input.form-control:-moz-autofill {
    box-shadow: 0 0 0px 1000px #e9f2f8 inset;
    -moz-text-fill-color: #5e6278;
    caret-color: #5e6278;
}

/* Force Organization Code text to display in uppercase */
/*input[name="GroupCode"] {
    text-transform: uppercase;
}
*/

/* Custom input background to match screenshot (light blue pill) */
.form-control,
.form-control.form-control-solid {
    background-color: #e9f2f8 !important; /* light blue */
    border-color: transparent !important;
}

    .form-control:focus,
    .form-control.form-control-solid:focus {
        background-color: #e9f2f8 !important;
        border-color: #d7e8f2 !important;
        outline: 0;
    }