/* *, body {

margin: 0;

padding: 0;

font-family: Campton;

font-weight: 400;

box-sizing: border-box;

} */

section.login{
  width: 100%;
  height: 100%;
  background-image: url('../images/login-bg-new-x2.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top left;
}

.pageWrapper{

  width: 100%;
  overflow: hidden;

}



.inputGroup{

  position: relative;

}

.inputGroup input, .inputGroup select, .inputGroup textarea {

  display: block;

  padding: 15px 40px 17px 20px;

  width: 100%;

  background: #FFFFFF;

  border: 1px solid #DADCE0;

  border-radius: 3px;

  color: #0F0F0F;

  outline: none;

  font-size: 14px;

  line-height: 16px;

  max-height: 50px;

  -webkit-appearance: none;

  position: relative;

}

.login .flexInput div{

  flex-basis: 50%;

}

.login a.loginModelButton {

  font-weight: 500;

  font-size: 14px;

  line-height: 16px;

  color: #1877F2;

  text-decoration: none;

}

.login a.loginModelButton.signUpBTn {

  text-decoration: underline;

}

.divRight{

  width: 100%;
  height: 100%;

}


.leftMob {
  display: none;
}

.allForms form{
  max-width: 377px;
  width: 100%;
  padding: 30px 31px;
  background: #fff;
  box-shadow: 0px 4px 16px rgba(0,0,0,0.1);
  border-radius: 3px;
  min-height: 520px;
  position: absolute;
  top: 170px;
  right: -100%;
  transition: all ease 0.5s;
}

form.signup{

  max-width: 482px;

}

form.active{

  right:12%;

}

p.pageDesc{

  font-size: 16px;

  line-height: 19px;

  color: #3F3F3F;

  margin-bottom: 14px;

}
.allForms {
  position: relative;
  left: auto!important;
  width: 100%;
  min-height: 1000px;
}

.allForms .inputGroup label{

  position: absolute;

  font-weight: 400;

  font-size: 16px;

  line-height: 19px;

  color: #5F636C;

  z-index: 1;

  top: 15px;

  left: 20px;

  margin-bottom: 0;

  transition: all ease .3s;

}

.allForms .inputGroup label.focused {

  left: 15px;

  top: -9px;

  padding: 0 5px;

  background: #fff;

  color: #02837A;

}

p.loginRedirect{

  position: relative;

  left: 0;

  width: 100%;

}


form#forgetPassForm {
  padding-top: 70px;
}
.allForms img.forValid {

  top: 15px;

}

section.recoverMsg {

  position: fixed;

  width: 100%;

  height: 100%;

  top: 0;

  left: 0;

  z-index: 9;

  display: none;

}

.recoverOverlay{

  width: 100%;

  height: 100%;

  background: rgba(0,0,0,0.3);

  display: block;

  transition: all ease .3s;

}

.msgBox {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  padding: 16px 82px 50px;

  background: #fff;

  border-radius: 3px;

}

.msgBox p{

  font-size: 18px;

  line-height: 26px;

  color: #333638;

  text-align: center;

}

.msgBox button.getStarted{

  margin: 15px auto 0;

  max-width: 213px;

}

.forgetPassLogin h2.pageHead{

  max-width: 100%;

}

.allForms p.showPassTxt {

  font-weight: 400;

  margin-left: 8px;

  font-size: 14px;

  line-height: 16px;

  color: #0F0F0F;

}

.login .flexInput div{

  max-width: 200px;

}

img.msgGif{

  display: block;

  margin: 0 auto;

  max-width: 140px;

  object-fit: contain;

  height: 140px;

  position: relative;

}

.gifBox{

  position: relative;

}

.gifBox::before{

  position: absolute;

  content: '';

  width: 70px;

  height: 70px;

  border-radius: 50%;

  background: #F9E52F;

  top: 35px;

  left: 55px;

}
.allForms form{
  visibility: hidden;
}
form.active{
  visibility: visible;
}


.showPassCheck input {
  min-height: 16px;
}
.flexInput.pass_check {
  margin-top: 5px;
}
input#r_phone{
  max-width: calc(100% - 77px);
  margin-left: auto;
  padding: 17px 40px 16px 15px;
}
.signup .inputGroup label[for="r_phone"]{
  left: 118px;
  top: 16px;
}
.signup .inputGroup label[for="r_phone"].focused {
  left: 90px;
}
#login_form a.forgotPass.loginModelButton{
  display: block;
}

@media (max-width:1366px) {
  section.login{
    background-image: url(../images/login-bg-new.png);
    height: auto;
  }
  form.active{
    left: unset!important;
  }
  form.active#register_form {
    right:2%;
  }
}

@media (max-width:991px) {
  section.login {
    background-image: none;
    background-color: #f8f8f8;
  }
  form.active,  form.active#register_form  {
    right: 50%;
    transform: translateX(50%);
  }
}
@media (max-height:900px) {

  .allForms form{

    top: 60px;

  }



}

@media (max-height:800px) {

  .allForms form, form#register_form{

    top: 150px !important;

  }

}
@media (max-height:800px) and (max-width: 430px) {

  .allForms form, form#register_form{

    top: 0 !important;

  }

}

@media (max-width:767px) {
  form {
    max-width: max-content!important;
  }
  .leftMob {
    display: block;
    text-align: center;
  }
  .pageWrapper {
    padding-top: 100px;
  }
  section.login {
    height: auto;
  }
  form {
    top: 20px!important;
  }
}
@media (max-width:575px) {
  .allForms form{
    max-width: 100%;
    width: 100%;
  }
  .login .signup .inputGroup label,.login .signin .inputGroup label{
    font-size: 13px;
    left: 12px;
  }
  #account_password{
    margin-right: 5px!important;
  }

  .pageWrapper{

    display: block;
    padding-bottom: 30px;

  }

  .divRight{

    background: none;

    padding: 0 15px;

  }

  .divRight .allForms{

    left: 0;

  }
  .login .flexInput div {
    flex-basis: 48%;
  }

}
@media (max-width:430px) {
  button.getStarted {
    padding: 10px 0!important;
  }
  p.pageDesc {
    margin-bottom: 17px;
    line-height: 22px;
  }
  .allForms{
    min-height: 700px;
  }
}
@media (max-width:392px) {
  .login a.loginModelButton{
    display: block;
    margin-top: 5px;
  }
  .login .signup .inputGroup label{
    font-size: 12px;
  }
  #account_password{
    margin-right: 0 !important;
  }
}