.login-page-shell {
    min-height: 100vh;
    background: linear-gradient(rgba(13,27,42,.58),rgba(13,27,42,.58)),url('/images/TrainocateLoginBg.jpg') center center/cover no-repeat
}

.login-container-center {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px
}

.login-container {
    width: 100%;
    max-width: 490px;
    padding: 30px 28px;
    text-align: center;
    border-radius: 20px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(255,255,255,.55);
    backdrop-filter: blur(10px);
    box-shadow: 0 20px 48px rgba(0,0,0,.22)
}

    .login-container h3 {
        margin: 8px 0 19px;
        font-weight: 500;
        color: #e94b22;
        letter-spacing: .9px;
        font-size: 30px
    }

    .login-container p {
        font-size: 13px;
        letter-spacing: .3px
    }

.login-badge {
    display: inline-block;
    margin-bottom: 10px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(233,75,34,.12);
    color: #bf3f20;
    font-size: 12px;
    font-weight: 600
}

.login-subtext {
    margin-bottom: 18px;
    font-size: 13px;
    color: #4b5563
}

.button-section {
    padding-bottom: 8px;
    display: flex;
    gap: 16px;
    flex-direction: column;
    padding-top: 0
}

.button-section-otp button.e-control, .login-btn {
    width: 100%;
    min-width: 200px;
    height: 42px;
    padding: 10px 20px;
    background: #fff;
    color: #303030;
    cursor: pointer;
    display: flex;
    gap: 10px;
    transition: transform .2s,box-shadow .2s,background-color .2s;
    max-width: 250px;
    text-transform: capitalize;
    font-weight: 600
}

.login-btn {
    border: 1px solid #e94b22;
    border-radius: 100px;
    font-size: 12px;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    letter-spacing: .9px
}

    .login-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 18px rgba(233,75,34,.2)
    }

    .login-btn:disabled, .refresh-captcha:disabled, .resend-otp:disabled, .send-otp:disabled, .verify-otp:disabled {
        opacity: .65;
        cursor: not-allowed;
        pointer-events: none
    }

.ms-btn {
    background: #fff;
    gap: 30px;
    margin: 0 auto
}

.loginOtp-btn {
    color: #fff;
    background: linear-gradient(135deg,#1c2164,#e94b22);
    border-color: #3523b6
}

.microsoft {
    width: 8px;
    height: 8px;
    position: relative;
    top: -6px;
    left: 5px;
    background-color: #f25022;
    box-shadow: 13px 0 0 0 #7fba00,0 13px 0 0 #00a4ef,13px 13px 0 0 #ffb900
}

.divider {
    margin: 18px 0;
    font-size: 14px;
    color: #777
}

.captcha-box {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background: #fbfbfb
}

.otp-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 18px 0 8px
}

.login-status {
    margin-bottom: 0;
    font-size: 13px
}

.login-note {
    margin-top: 16px;
    margin-bottom: 0;
    font-size: 12px;
    color: #4b5563
}

.refresh-captcha, .resend-otp {
    min-height: 42px;
    border-radius: 6px;
    color: #2f3c4f;
    background-color: #f4f6f8;
    border-color: #d9dfe7;
    transition: .2s
}

.send-otp, .verify-otp {
    min-height: 42px;
    border-radius: 6px;
    color: #fff;
    transition: .2s
}

.send-otp {
    background: linear-gradient(135deg,#f1643e,#e94b22);
    border-color: #e94b22
}

.verify-otp {
    background: linear-gradient(135deg,#2ca85a,#178d45);
    border-color: #178d45
}

.otp-login-title {
    margin: 0 0 10px;
    color: #e94b22;
    font-size: 34px;
    font-weight: 800;
    text-align: center;
    letter-spacing: .2px
}

.loginOtp-btn i.bi {
    margin-right: 7px;
    font-size: 22px
}

.login-otp-section .e-control-wrapper {
    border-radius: 30px !important;
    box-shadow: 0 0 2px 0 #0000001a
}

.captcha-box {
    height: 40px;
    border-radius: 30px;
    box-shadow: 0 0 2px 0 #0000001a;
    border: 1px solid #dee2e6
}

    .captcha-box button.e-control .e-icons {
        font-size: 24px !important;
        color: #e94b22
    }

    .captcha-box button.refresh-captcha.e-icon-btn {
        background-color: transparent !important;
        max-width: 30px
    }

.button-section-otp button.e-control.loginOtp-btn, button.e-control.e-btn.e-lib.e-outline.e-forward-arrow {
    color: #fff;
    background: linear-gradient(135deg,rgb(79 81 114),#e94b22);
    border-color: #3523b6
}

    .button-section-otp button.e-control.loginOtp-btn.verify-otp {
        color: #fff;
        background: green;
        border-color: rgb(36 74 17)
    }

.button-section-otp button.e-control {
    border-radius: 100px;
    border: 1px solid #e94b22;
    font-size: 13px;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    letter-spacing: 1px
}

.button-section-otp .otp-actions {
    margin: 0
}

.text-start.section-captcha {
    padding-bottom: 22px
}

.row.button-section.login-otp-section {
    padding-top: 15px
}

.login-otp-section .e-control-wrapper input {
    height: 100% !important;
    padding-inline: 14px !important
}

.loginOtp-btn span.e-icons.e-icon-left {
    margin: 0;
    max-width: 20px
}

.back-btn-wrap .back-login-section {
    background-color: transparent !important;
    color: #8686f6 !important;
    border: none;
    box-shadow: none;
    border-bottom: 1px solid #8686f6 !important;
    padding: 0;
    border-radius: 0;
    font-size: 16px;
    letter-spacing: .8px;
    line-height: 25px
}

.otp-actions span.e-icons.e-send.e-btn-icon {
    font-size: 17px;
    margin: 0;
    width: 15px;
    top: 1px;
    position: relative
}

@media (max-width:580px) {
    .login-container-center {
        padding: 16px
    }

    .login-container {
        margin: 0 12px;
        padding: 22px 16px
    }

    .login-btn {
        min-width: 100%
    }
}

.e-input-group, .e-input-group.e-control-wrapper {
    height: 2.5rem !important
}