/* @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap"); */

* {
  margin    : 0;
  padding   : 0;
  box-sizing: border-box;
}

/* 
body,
input {
  font-family: "Poppins", sans-serif;
} */

.container {
  position        : relative;
  width           : 100%;
  background-color: #fff;
  min-height      : 100vh;
  overflow        : hidden;
}

.forms-container {
  position: absolute;
  width   : 100%;
  height  : 100%;
  top     : 0;
  left    : 0;
}

.signin-signup {
  position             : absolute;
  top                  : 50%;
  transform            : translate(-50%, -50%);
  left                 : 75%;
  width                : 50%;
  transition           : 1s 0.7s ease-in-out;
  display              : grid;
  grid-template-columns: 1fr;
  z-index              : 5;
}

form {
  display        : flex;
  justify-content: center;
  align-items    : center;
  flex-direction : column;
  padding        : 0rem 5rem;
  transition     : all 0.2s 0.7s;
  overflow       : hidden;
  grid-column    : 1 / 2;
  grid-row       : 1 / 2;
}

form.sign-up-form {
  opacity: 0;
  z-index: 1;
}

form.sign-in-form {
  z-index: 2;
}

.title {
  font-size    : 2.2rem;
  color        : #444;
  margin-bottom: 10px;
}

.input-field {
  max-width            : 380px;
  width                : 100%;
  background-color     : #f0f0f0;
  margin               : 15px 0;
  height               : 55px;
  border-radius        : 55px;
  display              : grid;
  grid-template-columns: 15% auto;
  padding              : 0 0.4rem;
  position             : relative;
}

.input-field i {
  text-align : center;
  line-height: 55px;
  color      : #acacac;
  transition : 0.5s;
  font-size  : 1.1rem;
}

.input-field input {
  background : none;
  outline    : none;
  border     : none;
  line-height: 1;
  font-weight: 600;
  font-size  : 1.1rem;
  color      : #333;
}

.input-field input::placeholder {
  color      : #aaa;
  font-weight: 500;
}

.social-text span {
  padding        : 0 0.6rem;
  font-size      : 0.2rem;
  font-weight    : bold;
  color          : gray;
  text-decoration: none;
}

.social-text:hover {
  color          : crimson;
  text-decoration: underline;
}

.social-media {
  display        : flex;
  justify-content: center;
}

.social-icon {
  height         : 46px;
  width          : 46px;
  display        : flex;
  justify-content: center;
  align-items    : center;
  margin         : 0 0.45rem;
  color          : #333;
  border-radius  : 50%;
  border         : 1px solid #333;
  text-decoration: none;
  font-size      : 1.1rem;
  transition     : 0.3s;
}

.social-icon:hover {
  color       : #4481eb;
  border-color: #4481eb;
}

.btn {
  width           : 150px;
  background-color: #5995fd;
  border          : none;
  outline         : none;
  height          : 49px;
  border-radius   : 49px;
  color           : #fff;
  text-transform  : uppercase;
  font-weight     : 600;
  margin          : 20px 0;
  cursor          : pointer;
  transition      : 0.5s;
}

.btn:hover {
  background-color: #4d84e2;
}

.panels-container {
  position             : absolute;
  height               : 100%;
  width                : 100%;
  top                  : 0;
  left                 : 0;
  display              : grid;
  grid-template-columns: repeat(2, 1fr);
}

.container:before {
  content         : "";
  position        : absolute;
  height          : 2000px;
  width           : 2000px;
  top             : -10%;
  right           : 48%;
  transform       : translateY(-50%);
  background-image: linear-gradient(-45deg, #076b1d 0%, #04fe96 100%);
  transition      : 1.8s ease-in-out;
  border-radius   : 50%;
  z-index         : 6;
}

.image {
  width           : 100%;
  transition      : transform 1.1s ease-in-out;
  transition-delay: 0.4s;
}

.panel {
  display        : flex;
  flex-direction : column;
  align-items    : flex-end;
  justify-content: space-around;
  text-align     : center;
  z-index        : 6;
}

.left-panel {
  pointer-events: all;
  padding       : 3rem 17% 2rem 12%;
}

.right-panel {
  pointer-events: none;
  padding       : 3rem 12% 2rem 17%;
}

.panel .content {
  color           : #fff;
  transition      : transform 0.9s ease-in-out;
  transition-delay: 0.6s;
}

.panel h3 {
  font-weight: 600;
  line-height: 1;
  font-size  : 1.5rem;
}

.panel p {
  font-size: 0.95rem;
  padding  : 0.7rem 0;
}

.btn.transparent {
  margin     : 0;
  background : none;
  border     : 2px solid #fff;
  width      : 130px;
  height     : 41px;
  font-weight: 600;
  font-size  : 0.8rem;
}

.right-panel .image,
.right-panel .content {
  transform: translateX(800px);
}

/* ANIMATION */

.container.sign-up-mode:before {
  transform: translate(100%, -50%);
  right    : 52%;
}

.container.sign-up-mode .left-panel .image,
.container.sign-up-mode .left-panel .content {
  transform: translateX(-800px);
}

.container.sign-up-mode .signin-signup {
  left: 25%;
}

.container.sign-up-mode form.sign-up-form {
  opacity: 1;
  z-index: 2;
}

.container.sign-up-mode form.sign-in-form {
  opacity: 0;
  z-index: 1;
}

.container.sign-up-mode .right-panel .image,
.container.sign-up-mode .right-panel .content {
  transform: translateX(0%);
}

.container.sign-up-mode .left-panel {
  pointer-events: none;
}

.container.sign-up-mode .right-panel {
  pointer-events: all;
}

@media (max-width: 870px) {
  .container {
    min-height: 800px;
    height    : 100vh;
  }

  .signin-signup {
    width     : 100%;
    top       : 95%;
    transform : translate(-50%, -100%);
    transition: 1s 0.8s ease-in-out;
  }

  .signin-signup,
  .container.sign-up-mode .signin-signup {
    left: 50%;
  }

  .panels-container {
    grid-template-columns: 1fr;
    grid-template-rows   : 1fr 2fr 1fr;
  }

  .panel {
    flex-direction : row;
    justify-content: space-around;
    align-items    : center;
    padding        : 2.5rem 8%;
    grid-column    : 1 / 2;
  }

  .right-panel {
    grid-row: 3 / 4;
  }

  .left-panel {
    grid-row: 1 / 2;
  }

  .image {
    width           : 200px;
    transition      : transform 0.9s ease-in-out;
    transition-delay: 0.6s;
  }

  .panel .content {
    padding-right   : 15%;
    transition      : transform 0.9s ease-in-out;
    transition-delay: 0.8s;
  }

  .panel h3 {
    font-size: 1.2rem;
  }

  .panel p {
    font-size: 0.7rem;
    padding  : 0.5rem 0;
  }

  .btn.transparent {
    width    : 110px;
    height   : 35px;
    font-size: 0.7rem;
  }

  .container:before {
    width     : 1500px;
    height    : 1500px;
    transform : translateX(-50%);
    left      : 30%;
    bottom    : 68%;
    right     : initial;
    top       : initial;
    transition: 2s ease-in-out;
  }

  .container.sign-up-mode:before {
    transform: translate(-50%, 100%);
    bottom   : 32%;
    right    : initial;
  }

  .container.sign-up-mode .left-panel .image,
  .container.sign-up-mode .left-panel .content {
    transform: translateY(-300px);
  }

  .container.sign-up-mode .right-panel .image,
  .container.sign-up-mode .right-panel .content {
    transform: translateY(0px);
  }

  .right-panel .image,
  .right-panel .content {
    transform: translateY(300px);
  }

  .container.sign-up-mode .signin-signup {
    top      : 5%;
    transform: translate(-50%, 0);
  }
}

@media (max-width: 570px) {
  form {
    padding: 0 1.5rem;
  }

  .image {
    display: none;
  }

  .panel .content {
    padding: 0.5rem 1rem;
  }

  .container {
    padding: 1.5rem;
  }

  .container:before {
    bottom: 72%;
    left  : 50%;
  }

  .container.sign-up-mode:before {
    bottom: 28%;
    left  : 50%;
  }

}

label.is-invalid {
  display              : grid;
  grid-template-columns: max-content;
  color                : red;
  font-weight          : bold;
  padding-top          : 0.2rem;
}

input.is-valid {
  color: green !important;
}

div.input-field .is-invalid {
  color: crimson !important;
}

div.input-field .is-valid {
  color: green !important;
}

#login-btn:hover,
#register-btn:hover,
#reset-btn:hover {
  background-color: whitesmoke;
  border          : 1px#4d84e2 solid;
  color           : #4d84e2;
}

#google-btn {
  margin-left     : 0.4rem;
  background-color: crimson;
}

#google-btn:hover {
  background-color: whitesmoke;
  border          : 1px crimson solid;
  color           : crimson;
}

p {
  font-size: 0.8rem;
}

a {
  text-decoration: none;
  font-size      : 0.8rem;
}

a:hover {
  color      : crimson;
  font-weight: bold;
}

#password-view,
#password-view-confirm,
#password-view-register,
#password-view-reset,
#password-view-reset-confirm {
  cursor  : pointer;
  position: absolute;
  width   : 40px;
  right   : 0.6rem;
}

.flex-center {
  display        : flex;
  justify-content: center;
  align-items    : center;
}

.flex-between {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
}

.flex-even {
  display        : flex;
  justify-content: space-evenly;
  align-items    : center;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-justify {
  text-align: justify;
}

.p-0 {
  padding: 0 !important;
}

.p-1 {
  padding: 0.4rem;
}

.p-2 {
  padding: 1rem;
}

.p-3 {
  padding: 1.8rem;
}

.p-4 {
  padding: 2.8rem;
}

.py-0 {
  padding-top   : 0 !important;
  padding-bottom: 0 !important;
}

.py-1 {
  padding: 0.4rem 0;
}

.py-2 {
  padding: 1rem 0;
}

.py-3 {
  padding: 1.8rem 0;
}

.py-4 {
  padding: 2.8rem 0;
}

.px-0 {
  padding-left : 0 !important;
  padding-right: 0 !important;
}

.px-1 {
  padding: 0 0.4rem;
}

.px-2 {
  padding: 0 1rem;
}

.px-3 {
  padding: 0 1.8rem;
}

.px-4 {
  padding: 0 2.8rem;
}