@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
.loginPage{
    position: relative;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
    z-index: 9999;
}
.loginPage:before{
    content: '';
    position: absolute;
    top: -10%;
    width: 100%;
    height: 100%;
    background: url(../images/login-top-shape.svg) no-repeat;
    background-size: 100%;
}

.loginPage .container-fluid{
    padding: 0;
    position: relative;
    z-index: 1;
}
.loginPage .row.mx-0{ padding:0;}
.loginPage .imgleft, .loginPage .imgright{
    display: flex;
    justify-content: end;
    justify-content: flex-end;
    align-items: end;
    align-items: flex-end;
}
.loginPage .imgleft div{
    width: 100%;
    padding-right: 12%;
}
.loginPage .imgright div{
    width: 100%;
    padding-left: 12%;
}
.imgleft img{
    float: left;
    max-width: 100%;
    width: 100%;
}
.imgright img{
    float: right;
    max-width: 100%;
    width: 100%;
}

.loginbox {
    width: 100%;
    margin-top: 15%;
    padding: 0 6%;
}

.loginbox .boxcntr h1{
    color: #fff;
    font-size: 36px;
    font-weight: 600;
    line-height: 42px;
    margin: 0 0 4px;
}
.loginbox .boxcntr p{
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}
.loginbox img{
    max-width: 100%;
}
.loginbox .whiteBox{
    width: 100%;
    background: #fff;
    box-shadow: 6px 10px 20px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    border-bottom: 10px solid #B2382D;
    padding: 30px 25px 50px 25px;
    margin-top: 2rem;
}
.loginbox .logo{
    margin: 0 0 30px;
}
.loginbox .logo img{
    max-height: 50px;
    display: block;
    margin: 0 auto;
}
.loginbox .btn{
    min-width: 120px;
    height: 40px;
    background: #42599D;
    padding: 0 20px;
    color: #fff;
    border:0;
    border-radius: 5px;
    font-size: 14px;
    box-shadow: none;
    text-decoration: none;
}
.loginbox .btn:hover{
    background: #B2382D;
    border: 0;
    text-decoration: none;
}

.loginbox .label{
    color: rgba(66, 89, 157, 0.5);
    font-size: 14px;
    line-height: 17px;
    margin: 0;
    text-align: left;
    width: 100%;
}

.loginbox .form-control{
    box-shadow: none!important;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid #42599D;
    font-size: 16px;
    font-weight: 500;
    color: #42599D;
    font-family: 'Inter', sans-serif;
    padding-left: 0;    
}

.form-check-label{
    color: rgba(66, 89, 157, 0.5);
    font-size: 11px;
    line-height: 18px;
}
.forgetpass{
    color: #42599D;
    opacity: 0.5;
    font-size: 11px;
    line-height: 18px;
}
.forgetpass:hover{
    opacity: 1;
}

.loginPage #forgot_modal{
  background: rgba(0, 0, 0, 0.5);
  padding: 15px;
}
.loginPage + .modal-backdrop{
    opacity: 0 !important;;
}
#forgot_modal .modal-header{
    border-bottom: 0;
}
#forgot_modal .modal-header .close{
    position: absolute;
    top: 8px;
    right: 14px;
}
#forgot_modal .modal-header h2{
    padding: 15px 0 0;
    font-weight: 600;
}

#forgot_modal .modal-title{
    color: #42599D;
}
#forgot_modal .modal-body{
    padding: 20px 25px;
    border: 0;
    border-bottom: 10px solid #B2382D;
    border-radius: 0 0 10px 10px;
}

#forgot_modal .modal-dialog{
    max-width: 440px;
    margin-top: 6rem;
}
#forgot_modal .modal-content{
    border-radius: 8px 8px 14px 14px;
}
.backTo a{
    color: #42599D;
    font-size: 14px;
}
.backTo a:hover{
    color: #B2382D;
}
.text-danger {
	font-size: 14px;
    padding-top: 2px;
    text-align: left;
}
.alert-dismissible .close {
	padding: 0 0.6rem;
}
.alert {
	padding: 0.5rem 2rem!important;
	font-size: 14px;
}
.resendOtp{
    width: 100%;
    display: inline-block;
    text-align: center;
    padding: 10px 0 0;
    font-size: 14px;
}
.resendOtp a{
    color: #B2382D;
}
.resendOtp a:hover{
    color: #42599D;
    text-decoration: underline;
}

.adminCards .col-xl-2 {
	flex: 0 0 20%;
	max-width: 20%;
}
.adminCards .card-body .row {
  padding:0;
}
table-new th, table-new td{ text-align: center; }


@media(max-width:1140px){
.loginPage::before {top: 0%;}	
.loginPage .imgleft, .loginPage .imgright {width: 25%;max-width: 25%; flex:0 0 25%;}
.loginPage .col-md-4:nth-child(2){width: 50%;max-width: 50%; flex:0 0 50%}
.loginbox { margin-top:25px;}
.adminCards .card-body .text-xs{ min-height:34px;}
}
@media(max-width:979px){
.loginPage .imgleft, .loginPage .imgright { display:none;}
.loginPage .col-md-4:nth-child(2){width: 100%;max-width: 100%; flex:0 0 100%}
.loginPage::before {width: 130%;left: -15%;}
.loginbox .boxcntr h1 {font-size: 28px;line-height: 34px;}
.loginbox .boxcntr p {font-size: 13px;}
.loginbox .form-control {font-size: 14px;}
.loginbox .whiteBox {border-bottom-width: 7px;padding: 25px 20px 35px 20px;}

#forgot_modal .modal-header h2{font-size: 26px;line-height: 34px;}
#forgot_modal .modal-header p{ font-size:13px; margin:10px 0;}
#forgot_modal .modal-body {padding: 20px 15px;}
.text-danger {font-size: 12px;}
}

@media(max-width:767px){
.loginbox {padding: 0 4%;}
.loginPage::before {width: 200%;left: -50%;}
.loginbox {margin-top: 20px;}
.loginbox .whiteBox {margin-top: 25px;}
.loginbox .boxcntr h1 {font-size: 26px;line-height: 32px;}
.adminCards .col-xl-2 {flex: 0 0 100%;max-width: 100%;}
.adminCards .card-body .text-xs{ min-height:initial;}

}