:root {
  --spacing-default: 16px;
  --spacing-top: var(--spacing-default);
  --spacing-left: var(--spacing-default);
  --spacing-right: var(--spacing-default);
  --spacing-bottom: var(--spacing-default);
  --spacing-top-offset: -0.7;
  --spacing-left-offset: 0.5;
}
.vpSignUpform{
  height: 55%;
  width: 71%;
  justify-content: space-evenly;
}
#loginForm{
  height: 55%;
  width: 61%;
  justify-content: space-evenly;
}
.unauthorizeForm{
  height: 55%;
  width: 61%;
  justify-content: space-evenly;
}
#resetPasswordModal{
  height: 55%;
  width: 61%;
  justify-content: space-evenly;
}

.SignUpForm2{
  height: 55%;
  width: 61%;
  justify-content: space-evenly;
}
.vpForgotPasswordForm {
  height: 55%;
    width: 61%;
    justify-content: space-evenly;;
}
.loginForm{
  background: #fff;
}
.vpSignUpform form{
  justify-content: space-around;
  padding: 6% 0;
}
.signUpStep.signUpStep1{
  height: 70%;
  justify-content: space-evenly;
}
h3{
  color: #333;
  font-family: 'Montserrat-large'!important;
  font-size: 3vh !important;
  font-weight: 800!important;
  font-style: normal!important;
}
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px white inset;
}

input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px white inset,0 0 0 50px white inset;
  -webkit-text-fill-color: #333;
} 
input#UserEmail, input#UserPassword, input#SignUpFullName, input#SignUpEmail , input#userEmailF, input#SignUpPassword, input#SignUpConfirmPassword{
  border-radius: 6px !important;
  border: 1px solid #c2c8d0 !important;
  box-shadow: none !important;
  background: #efefef !important;
  width: 100%;
  /* height: 7.5vh; */
  outline: none !important;
}
input {
  padding-block: var(--spacing-top) var(--spacing-bottom);
  padding-inline: var(--spacing-right) var(--spacing-left);
}
.vp-input:focus  label, .vp-input:valid  label, .input-has-value, .input-focused label {
  top: calc(var(--spacing-top) * var(--spacing-top-offset));
  left: calc(var(--spacing-left) * var(--spacing-left-offset));
  font-size: 15px;
  background-color: #fff;
  color: #6f7780;
  padding-inline: 4px;
}
input:focus ~ label,
input:valid ~ label,.validationError label {
  top: calc(var(--spacing-top) * var(--spacing-top-offset));
  left: calc(var(--spacing-left) * var(--spacing-left-offset));
  background: #fff;
  padding-inline: 4px;
}
input:focus  label, input:valid  label, .input-has-value, .input-focused label {
  top: calc(var(--spacing-top) * var(--spacing-top-offset));
  left: calc(var(--spacing-left) * var(--spacing-left-offset));
  font-size: 15px;
  background-color: #fff;
  color: #6f7780;
  padding-inline: 4px;
}
label {
  position: absolute;
  top: var(--spacing-top);
  left: var(--spacing-left);
  pointer-events: none;
  transition: 0.2s ease;
  color: #83B06D;;
}
.forgotpass-text{
  color: #333;
}
.forgotPassText, .forgotPassword{
  color: #83B06D;
  margin-right: 0.3vw;
}
.forgotPassword {
  margin-top: 0.5vw;
}
.socialMenu.forgotLink{
  justify-content: space-between;
  width: 60%;
}

.forgotpass-text{
  margin-top: 1vh;
}

.auth-text{
 width: 22vw;
}

button#userLoginButton, .userLandingButton2, .userForgotButton1, .addhover .signUpNext, .resetButton, .registerUserForSchool{
  width: 100%;
  background: #83B06D;
  height: 6.5vh;
}
.loginChangeDiv{
  display: none!important;
}
.loginLogo{
  height: 6%;
  width: 6%;
}
.loginLogo img{
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  animation: animate 3s linear infinite;
}
.loginForm{
  flex-direction: column;
  justify-content: center; 
  max-width: 700px;
}
.forgotpass-text a{
  color: #83B06D;
}
#UserEmail:hover, #userEmailF:hover{
  border: 0.1px #456434!important;
  box-shadow: 0 0 0.1rem #83B06D, 0 0 0.1rem #456434, 0 0 0.1rem #83B06D, 0 0 0.2rem #A1C57D, 0 0 0.3rem #E2EECC !important;
}