/* active class for toggle effect */
.active2 {
  display: block !important;
}
#eye {
  position: relative;
  top: 0;
  left: -30px;
}
.Login-sec {
  position: relative;
  /* top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); */
  width: 100%;
  display: flex;
  border: 2px solid black;
  box-shadow: 2px 1px 15px black;
}
.Form-div {
  height: 60vh;
  flex: 0 0 50%;
  width: 50%;
  text-align: center;
  position: relative;
}
.Form {
  width: 80%;
  margin: 30px auto 0 auto;
}
.login-form {
  width: 100%;
  position: absolute;
  justify-content: center;
  text-align: center;
  transform: translateX(0);
  transition: 4s ease-in;
  display: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sliding-effect {
  transform: translateX(100%);
  transition: 4s ease-out;
}
.slidingeffect2 {
  transform: translateX(-100%) !important;
  transition: 4s ease-out !important;
}
.slidingeffect3 {
  transform: translateX(0%) !important;
  transition: 4s ease-out !important;
}
.label1 {
  float: left;
}
.Input-box {
  float: right;
  text-align: center;
}
.signup-button {
  width: 100%;
  height: 100%;
  position: relative;
  text-align: center;
  background: linear-gradient(
    to right,
    #89253e,
    #3a6186
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  transform: translateX(0%);
  transition: 4s ease-in;
}
.signup-btn {
  background: none;
  padding: 10px 20px;
  border: black 2px solid;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.signup-btn:hover {
  border: white 2px solid;
  background: black;
  color: white;
}
.submit {
  border: 2px solid black;
  background: none;
  margin: 25px auto 0 auto;
  padding: 5px 60px;
}
.SubmitDIV {
  width: 50%;
  margin: 0 auto;
}
.SubmitDIV button {
  font-size: 2rem;
}
.submit:hover {
  border: 2px solid white;
  color: white;
  background: black;
}

/* Css code for signup sliding section */
.Buttons-div {
  height: 60vh;
  flex: 0 0 50%;
  width: 50%;
  position: relative;
}
.signup-form {
  /* flex: 0 0 50%; */
  /* max-width: 100%; */
  position: absolute;
  width: 100%;
  justify-content: center;
  text-align: center;
  transform: translateX(0);
  transition: 4s ease-in;
  display: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.signup {
  width: 85%;
  margin: 30px auto 0 auto;
}
.login-button {
  width: 100%;
  height: 100%;
  position: relative;
  text-align: center;
  background: linear-gradient(
    to right,
    #89253e,
    #3a6186
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.login-btn {
  background: none;
  border: 2px solid black;
  padding: 10px 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.login-btn:hover {
  border: 2px solid white;
  color: white;
  background-color: black;
}
.Input-box2 {
  text-align: center;
  float: right;
}
.Hide {
  display: none;
}
.outer-box2,
.outer-box {
  text-align: left;
}
@media only screen and (min-width: 780px) and (max-width: 992px) {
  .Input-box2 {
    width: 56%;
  }
  #eye {
    left: -22px;
  }
}
@media only screen and (max-width: 792px) {
  .Login-sec {
    display: block;
  }
  .Form-div {
    width: 100%;
  }
  .Buttons-div {
    width: 100%;
  }
  .SubmitDIV {
    width: fit-content;
  }
  .sliding-effect {
    transform: translateY(100%);
    transition: 4s ease-out;
  }
  .slidingeffect2 {
    transform: translateY(-100%) !important;
    transition: 4s ease-out !important;
  }
  .signup {
    margin: 0 auto 0 auto;
  }
  .submit {
    margin: 20px auto 0 auto;
  }
}

@media only screen and (max-width: 440px) {
  .Input-box {
    width: 50% !important;
  }
  .Input-box2 {
    width: 50% !important;
  }
  #eye {
    left: 4px;
  }
}