.login_section {
    width: 100%;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("/dist/img/Desktop-Log-In-Page.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.login_section .row {
    display: flex;
    align-items: center;
    justify-content: center;
}

.loginBox a.logo img {
    max-width: 100%;
    height: 100%;
    width: 60%;
}

.loginBox {
    box-shadow: 2px 5px 12px 2px rgba(0, 0, 0, 0.9);
    border-radius: 0.8rem;
}

.loginBox .card {
    border-radius: 0.8rem;
    box-shadow: none !important;
    margin: 0;
    border: 2px solid #06065e;
    background-color: rgb(255, 255, 255, 0.9);
}

.loginBox .card .card-header {
    border: 0;
}

.loginBox .card .card-header {
    padding: 1.2rem 2rem 0rem;
    display: flex;
    flex-direction: column;
    row-gap: 0.5rem;
}

.loginBox .card .card-header a.backArrow {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    padding-left: 1rem;
    transition-duration: 150ms;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    color: #8692A6;
}

.loginBox .card .card-header a.backArrow:hover{
    color: #45a6ff;
}

.loginBox input.form-control:focus {
    z-index: 0;
}

.loginBox .card .card-body{
    padding: 1.25rem 3rem;
}
.loginBox .backArrow i{
    font-size: 0.8rem;
    position: absolute;
    top: 8px;
    left: 0;
    font-weight: 600;
}


.loginBox .backArrow:hover i {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    transform: translateX(-0.2rem);
}
.loginBox p.login-box-msg {
    text-align: left;
    padding-left: 0;
    font-size: 0.875rem;
    color: #8692A6;
}

.loginBox .card .card-body h1 {
    font-size: 2rem;
    line-height: 1.6;
    font-weight: 600;
    color: #8692A6;
    margin-bottom: 0;
}

.loginBox #buSubmit {
    background-color: #fa803b;
    width: 200px;
    margin: 0 auto;
    border: 1px solid #fa803b;
    border-radius: 6px;
    box-shadow: 0 3px 5px 0px rgba(0, 0, 0, 0.7);
}

.loginBox #buSubmit:hover{
    background-color: #2c7ce5;
    border-color: #2c7ce5;
}

.forgotPass{
    font-size: 0.875rem;
}

.loginBox .icheck-primary label {
    display: flex;
    align-items: center;
    color: #696F79;
    font-weight: 500;
}

.loginBox .icheck-primary label.remember_Text::before{
    border-radius: 3px;
    border-color: #8692A6 !important;
}

.loginBox .icheck-primary label::before {
    width: 16px !important;
    height: 16px !important;
    top: 4px;
    border-color: #333 !important;
}

.loginBox .icheck-primary label::after {
    font-size: 10px;
    width: 5px !important;
    left: -2px !important;
    top: 1px !important;
}

.loginBox input.form-control {
    background-color: #fff;
    border: 1px solid #e6ecf4;
    box-shadow: 0 0 1px 0 #0003;
    height: 40px;
    padding: 0 .875rem;
    width: 100%;
    border-radius: 6px !important;
}

.loginBox form .input-group {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 0.8rem !important;
    justify-content: center;
    gap: 0.5rem;
}

.loginBox form .input-group .input-group-append {
    position: absolute;
    right: 0;
    height: 100%;
}

.loginBox form .input-group .input-group-append .input-group-text {
    background: transparent;
    border: 0;
}

.loginBox form .input-group .input-group-append .input-group-text span {
    color: #b1b1b1;
}

.loginBox .form_buttons .form-group{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
}

.form_buttons .form_group{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
}

button#verifyOtpBtn {
    width: 100%;
}

button#resendOtp{
    width: 100%;
    padding: .375rem .2rem;
}

.loginBox form .input-group input.form-control {
    border: 0 !important;
    background-color: #f0f5ff !important;
    box-shadow: 0 2px 6px 1px #c9c9c9 !important;
    height: 40px !important;
    padding: 0 .875rem !important;
    width: 100% !important;
    border-radius: 6px !important;
}

.loginBox input.form-control {
    border: 0 !important;
    background-color: #f0f5ff !important;
    box-shadow: 0 2px 6px 1px #c9c9c9 !important;
    height: 40px !important;
    padding: 0 .875rem !important;
    width: 100% !important;
    border-radius: 6px !important;
}

button:focus {
    outline: 0;
}


/*forgot password page design start*/

.forgotPass_section {
    width: 100%;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("/dist/img/forgotPass_bg.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.forgotPass_section input.form-control {
    background-color: #fff;
    border: 1px solid #e6ecf4;
    box-shadow: 0 0 1px 0 #0003;
    height: 40px;
    padding: 0 .875rem;
    width: 100%;
    border-radius: 6px !important;
}

.forgotPass_section .row {
    display: flex;
    align-items: center;
    justify-content: center;
}

.forgotPass_section a.logo img {
    max-width: 100%;
    height: 100%;
    width: 60%;
}

.forgotPassBox {
    box-shadow: 2px 5px 12px 2px rgba(0, 0, 0, 0.9);
    border-radius: 0.8rem;
}

.forgotPassBox .card {
    border-radius: 0.8rem;
    box-shadow: none !important;
    margin: 0;
    border: 2px solid #06065e;
    background-color: rgb(255, 255, 255, 0.9);
}

.forgotPassBox .card .card-header {
    border: 0;
}

.forgotPassBox .card .card-header {
    padding: 1.2rem 2rem 0rem;
    display: flex;
    flex-direction: column;
    row-gap: 0.5rem;
}

.forgotPassBox .card .card-header a.backArrow {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    padding-left: 1rem;
    transition-duration: 150ms;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    color: #8692A6;
}

.forgotPassBox .card .card-header a.backArrow:hover{
    color: #45a6ff;
}

.forgotPassBox .card .card-body{
    padding: 1.25rem 3rem;
}
.forgotPassBox .backArrow i{
    font-size: 0.8rem;
    position: absolute;
    top: 8px;
    left: 0;
    font-weight: 600;
}


.forgotPassBox .backArrow:hover i {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    transform: translateX(-0.2rem);
}
.forgotPassBox p.login-box-msg {
    text-align: left;
    padding-left: 0;
    font-size: 0.875rem;
    color: #8692A6;
}

.forgotPassBox .card .card-body h1 {
    font-size: 2rem;
    line-height: 1.6;
    font-weight: 600;
    color: #8692A6;
    margin-bottom: 0;
}

.forgotPassBox .btnNewPass {
    background-color: #2c7ce5;
    width: 200px;
    margin: 0 auto;
    border: 1px solid #2c7ce5;
    border-radius: 6px;
    box-shadow: 0 3px 5px 0px rgba(0, 0, 0, 0.7);
}

.forgotPassBox .btnNewPass:hover{
    background-color: #fa803b;
    border-color: #fa803b;
}

.forgotPassBox .btnLogin {
    background-color: #fa803b;
    width: 200px;
    margin: 0 auto;
    border: 1px solid #fa803b;
    border-radius: 6px;
    box-shadow: 0 3px 5px 0px rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 0.4rem;
    text-align: center;
}

.forgotPassBox .btnLogin:hover{
    background-color: #2c7ce5;
    border-color: #2c7ce5;
}

.forgotPassBox form .input-group {
    display: flex;
    align-items: center;
    position: relative;
}
.forgotPassBox form .input-group .input-group-append {
    position: absolute;
    right: 0;
    height: 100%;
}

.forgotPassBox form .input-group .input-group-append .input-group-text {
    background: transparent;
    border: 0;
}

.forgotPassBox form .input-group .input-group-append .input-group-text span {
    color: #b1b1b1;
}

.forgotPassBox input.form-control:focus {
    z-index: 0;
}


/*error page css start*/
.error_wrapper{
    width: 100%;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("/dist/img/errorBG.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20%;
    position: relative;
}
.error_wrapper .content-header{
    text-align: center;
}

.error_wrapper .text-warning{
    margin-top: 20rem;
}

.error_wrapper h1{
    font-size: 3rem;
    line-height: 1.6;
    font-weight: 600;
    color: #db0000;
    margin-bottom: 0;
    text-shadow: 2px 2px 5px #626262;
}

.error_wrapper p{
    text-align: center;
    padding-left: 0;
    font-size: 1rem;
    color: #8692A6;
}

.error_wrapper .homeBtn{
    background-color: #fa803b;
    width: 200px;
    margin: 0 auto;
    border: 1px solid #fa803b;
    border-radius: 6px;
    box-shadow: 0 3px 5px 0px rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 0.4rem 1rem;
    text-align: center;
}

.error_wrapper .homeBtn:hover{
    background-color: #2c7ce5;
    border-color: #2c7ce5;
}

.loginBox form .input-group .otp-box {
    width: 40px !important;
    height: 40px !important;
    text-align: center;
    font-size: 20px;
    margin: 5px;
}

.loginBox form .input-group .otp-box:focus{
    outline: 0;
}

/*viw verify otp alert page css*/
.main_containerAlert .row {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100dvh;
}

.main_containerAlert .viewErrorOtp_Box {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.main_containerAlert .viewErrorOtp_Box .form_buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

#otp-form .login_section .row{
    width: 100%;
}

#otp-form .form_buttons .form_group{
    width: 100%;
    gap: 1rem;
}

#otp-form button#verifyOtpBtn {
    width: auto;
}

#otp-form button#resendOtp {
    width: auto;
    padding: .375rem .75rem;
}

img.payGateUpi_Logo {
    width: 60% !important;
}