@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');


*{ margin:0; padding:0; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; outline:none;}
html,body {font-family: "Inter", sans-serif !important; color:#000; font-size:16px; margin:0; padding:0; font-weight:400; line-height:1.3; background:var(--OuterBg);}
body.login-wrapper {background-color:var(--OuterBg);}

:root {
    --PrimaryClr:#006CD1;
	--SecondaryClr:#163560;
    --ActiveLink:#006CD1;
    --ActiveLinkHvr:#000;
	--ButtonBlue:#006CD1;
	--ButtonBlueHov:#1163b0;    
    --PrimaryFont: "Inter", sans-serif;
    --mtop:60px;
    --mbottom:60px;
    --TableBorder:#e0e0e0;
    --BoxShadow:0px 4px 25px rgba(0, 0, 0, 0.1);
    --InnerBg:#eee;
    --OuterBg:#f3f6ff;
	--WhiteBg:#ffffff;    
    --BlackTextClr:#000000;
    --WhiteTextClr:#ffffff;}


/*Common*/
img {max-width:100%;}
.text-center{text-align: center;}
.vcenter{align-items: center !important;}
.mauto{margin:0 auto 50px!important;}
a, .alink{color: var(--ActiveLink);}
a:focus,a:visited,a:hover{ outline:none; text-decoration:none;transition: all linear .3s;-o-transition: all linear .3s;    -ms-transition: all linear .3s;-moz-transition: all linear .3s;-webkit-transition: all linear .3s;color: var(--ActiveLinkHvr);}
p, .para{margin-bottom:25px;line-height:1.6;}

p:empty{display:none;}
ul{margin:0;padding:0;list-style:none;}
h1, h2, h3, h4, h5, h6{margin: 0;padding: 0;}
h1{font-size: 40px;line-height: 1.1;margin-bottom: 15px;font-weight: 800;font-family: var(--PrimaryFont);text-transform: uppercase;}
h2{font-size: 30px;font-weight: 700; margin-bottom:20px;line-height:1.2;font-family: var(--PrimaryFont);color: var(--PrimaryClr);}
h3{font-size: 30px;font-weight: 700; margin-bottom:20px;line-height:1.2;font-family: var(--PrimaryFont);color: var(--PrimaryClr);}
h4{font-size: 24px;font-weight: 700; margin-bottom:20px;line-height:1.2;}
.mb6{margin-bottom: 60px;}
.mt6{margin-top: 60px;}
.mb2{margin-bottom: 20px !important;}
.mt2{margin-top: 20px !important;}
.text-left{text-align: left !important;}
.text-center{text-align: center !important;}
.text-right{text-align: right !important;}
.justify-center{justify-content: center !important;}	

.btn {border:1px solid var(--ButtonBlue);
    border-radius:12px;
    padding:10px 20px;
    margin:0 auto;
    text-align:center;
    background:var(--ButtonBlue);
    max-width:100%;
    height:48px;
    line-height:1;
    font-size:14px;
    font-weight:400;
    color:var(--WhiteTextClr); cursor:pointer;}
.btn:hover {border:1px solid var(--ButtonBlueHov); background:var(--ButtonBlueHov);}


/* Scrollbar width */
::-webkit-scrollbar {width:8px;}
/* Track */
::-webkit-scrollbar-track {background:#eee;} 
/* Handle */
::-webkit-scrollbar-thumb {background:#ddd; border-radius:10px;}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {background:#c8def4;}


::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color:#000; font-size:14px; font-weight:400;
}
::-moz-placeholder { /* Firefox 19+ */
  color:#000; font-size:14px; font-weight:400;
}
:-ms-input-placeholder { /* IE 10+ */
  color:#000; font-size:14px; font-weight:400;
}
:-moz-placeholder { /* Firefox 18- */
  color:#000; font-size:14px; font-weight:400;
}


.main-page {background:url('../images/login-bg.png') no-repeat left center;
    background-size:contain;
    min-height:760px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    height: 100%;}
.main-page .container {margin:0 auto; padding:0 20px; max-width:1200px !important;}
.login-page {background: none;
    margin: 0 auto;
    padding:60px 0 50px;
    max-width: 100%; 
    position: relative;
    display: flex;
    align-items: center;
    justify-content:space-between;
    flex-wrap: nowrap;
    width: 100%;
    max-height: inherit; min-height:700px;}
.login-left {
    margin:0;
    padding:0 4rem 0 0;
    max-width:50%;
    position:relative;
    display:block;}	
.login-left .login-logo {
    display: block;
    margin: 0;
    padding: 0 0 60px;
    width: 100%;}
.login-left .login-heading {
    display: block;
    margin: 0;
    padding:0 0 50px;
    width:100%;
	font-size: 30px;
    font-weight: 600;
    line-height: 45px;
    text-align: left; color:var(--SecondaryClr);}		
.login-left .login-banner {
    display:block;
    max-width:100%;
    margin:0;
    padding:0;}	
.login-right {
    margin:0;
    padding:0;
    max-width:50%;
    position:relative;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    justify-content:center;}
.login-box {box-shadow: 0px 24px 124px 0px #00000026;
    background: #fff;
    border-radius: 37px;
    padding:30px 50px 50px;
    box-sizing: border-box;
    width: 500px;
    margin: 0 auto;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;}	
.login-box .login-card-body {width:100%;}
.welcome-text {
    margin:0 auto 40px;
    padding: 0;
    text-align: center;
    width: 100%;
    position: relative;}	
.welcome-text h2 {font-size:32px; line-height:40px; display:block; text-align:center; font-weight:700; color:var(--BlackTextClr); padding:0; margin:0 0 10px;}	
.welcome-text .plan-text {font-size:16px; line-height:20px; font-weight:500; display:block; text-align:center; color:var(--BlackTextClr); padding:0; margin:0 auto;}	
.loginForm {
    margin:0 auto;
    padding:0;
    text-align:center;
    width:100%;
    position:relative;}
.loginForm .form-group {display:block; padding:0; margin:0 0 15px;}
.loginForm .form-group .input-field {border:1px solid var(--TableBorder);
    border-radius: 25px;
    padding: 10px 20px;
    margin: 0;
    text-align: left;
    background: #fff;
    max-width: 300px;
    width: 300px;
    height: 48px;
    line-height: 1;
    font-size: 14px;
    font-family: var(--PrimaryFont);
    font-weight: 500;
    color: #000;}
.loginForm .form-group .input-textarea	{border:1px solid var(--TableBorder);
    border-radius: 8px;
    padding: 10px 10px;
    margin: 0;
    text-align: left;
    background: #fff;
    max-width: 300px;
    width: 300px;
    height: 150px;
    line-height:1.3;
    font-size: 14px;
    font-family: var(--PrimaryFont);
    font-weight: 500;
    color: #000;}
.btn-sign {
    display: block;
    margin: 10px auto 0;
    padding: 0;
    width: 100%;}	
.btn-sign .btn {border:1px solid var(--ButtonBlue);
    border-radius:12px;
    padding:10px 20px;
    margin:0 auto;
    text-align:center;
    background:var(--ButtonBlue);
    max-width:100%;
    height:52px;
    line-height:1;
    font-size:16px;
    font-weight:500;
    color:var(--WhiteTextClr); cursor:pointer;}
.btn-sign .btn:hover {border:1px solid var(--ButtonBlueHov); background:var(--ButtonBlueHov);}
.login-box .form-group {margin-bottom:1rem;}
.login-box .form-group label {
    font-size: 14px;
    font-weight: 500;
    line-height: 18px; display:block; margin-bottom:5px;}
.form-group .form-control {
    background: #ededed;
    border-color: #ededed;
    height: 52px;
    line-height: 1;
    border-radius: 8px;
    padding: 10px 15px;}

.remember-pass {
    font-size: 14px;
    font-weight: 500;
    line-height: 17px;
    text-align: left;
    text-decoration: none;
    color: var(--BlackTextClr);
    margin: 0;
    padding:10px 0;}
.forgot-pass {
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    text-align: right;
    color:var(--PrimaryClr);
    margin:0;
    padding:10px 0;
	display:flex;
    align-items:flex-end;
    justify-content:flex-end;}	
.forgot-pass a {
    font-size: 14px;
    font-weight: 500;
    line-height: 17px;
    text-align: right;
    text-decoration: underline;
    color: var(--PrimaryClr); display:block;}		
.forgot-pass a:hover {text-decoration:none;}
    .forgot-pass .forgotBtn {
        font-size: 14px;
        font-weight: 500;
        line-height: 17px;
        text-align: right;
        text-decoration: underline;
        color: var(--PrimaryClr);
        display: block;
        background: none;
        border: none;
        cursor: pointer;
    }

.backLoginBtn {
    font-size: 14px;
    font-weight: 500;
    line-height: 17px;
    text-align: center;
    text-decoration: underline;
    color: var(--PrimaryClr);
    display: block;
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
    margin-top: 10px;
}		
.forgot-pass .forgotBtn:hover {text-decoration:none;}
.remember-pass input#remember {position:relative; top:1px;}

.login-box .form-group .input-group {
    display: block;
    width: 100%;
    position: relative;}
.login-box .form-group .input-group .form-control {
    width: 100%;
    background: #ededed;
    border-color: #ededed;
    height: 52px;
    line-height: 1;
    border-radius: 8px;
    padding: 10px 15px;}
.login-box .form-group .input-group #rfvPassword, .login-box .form-group .input-group #rfvEmail {
    background-color: #fff !important;
    color: #ff0000 !important;
    font-weight: 500;
    text-align: right;
    display: flex;
    width: 100%;
    align-items: flex-start;
    justify-content:flex-start;
    font-size: 12px;
    padding-top: 2px;}	
.error-msg {
    font-size: 13px;
    color: #ff0000;
    font-weight: 400;}		

@media only screen and (min-width:1400px)  {

.main-page {min-height:800px;}

}	

.login-back {
    display: block;
    margin: 20px auto 0;
    padding: 0; text-align:center;}
.login-back .backLoginBtn {font-size: 14px;
    font-weight: 500;
    line-height: 17px;
    text-align: center;
    text-decoration: underline;
    color: var(--PrimaryClr);
    display: block;
    background: none;
    border: none;
    cursor: pointer;
    margin: 0 auto;}	
.login-back .backLoginBtn:hover {text-decoration:none;}