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

html {
  min-height: 100%;
}
body {
  font-family: "sans regular";
  height: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
.wrapper {
  margin: 10px;
  width: 444px;
  min-height: 434px;
  background-color: var(--white-smoke);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.wrapper__shape {
  width: 800px;
  height: 800px;
  background-color: var(--blue);
  border-radius: 110px;
  transform: rotate(-24deg);
  position: absolute;
  left: 140px;
  top: -150px;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 5px 0px,
    rgba(0, 0, 0, 0.3) 0px 0px 1px 0px;
  transition: all 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.wrapper__shape--rotate {
  transform: rotate(156deg);
}
.wrapper__login-svg-wrapper,
.wrapper__forgotpass-svg-wrapper {
  padding: 10px;
  background-color: var(--light-blue);
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px;
  border-radius: 50%;
  position: absolute;
  width: fit-content;
  left: 20px;
  top: 50px;
  color: var(--white-smoke);
}
.login__text,
.forgotpass__text {
  font-family: "sans bold";
  font-size: 20px;
  color: var(--white-smoke);
  align-self: flex-start;
}
.login__input-wrapper,
.forgotpass__input-wrapper {
  overflow: hidden;
  text-align: right;
  width: 100%;
}
.login,
.forgotpass {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  margin-left: 80px;
  margin-top: 50px;
  opacity: 1;
}
.element-deactive {
  display: none;
}
.element-active {
  display: flex;
}
.icon-tabler-mail,
.icon-tabler-lock {
  position: absolute;
  color: var(--white-smoke);
  z-index: -1;
}
.login__email,
.forgotpass__email,
.login__password {
  background-color: transparent;
  outline: none;
  border: none;
  border-bottom: 3px solid var(--white-smoke);
  padding-bottom: 5px;
  padding-left: 30px;
  color: var(--dark-blue);
  font-family: "sans medium";
}
.login__email,
.forgotpass__email,
.login__password {
  width: 100%;
}
.login__email::placeholder,
.forgotpass__email::placeholder,
.login__password::placeholder {
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.2s;
}

.login__email:focus.login__email::placeholder,
.forgotpass__email:focus.forgotpass__email::placeholder,
.login__password:focus.login__password::placeholder {
  color: var(--dark-gray);
  font-size: 12px;
}
.login__error-message,
.forgotpass__error-message {
  text-align: right;
  color: var(--dark-blue);
  font-family: "sans bold";
  font-size: 14px;
}
.login__btn,
.forgotpass__btn {
  width: 80%;
  margin-top: 15px;
  background-color: var(--blue-plus);
  color: var(--white-smoke);
  border: none;
  outline: none;
  padding: 6px;
  font-family: "sans medium";
  font-size: 17px;
  transition: all 0.2s;
  border-radius: 12px;
  line-height: 1.5;
}
.login__btn:hover,
.forgotpass__btn:hover {
  background-color: var(--dark-blue);
}
.login__forgot-password-btn,
.forgotpass__back-btn {
  text-align: right;
  font-family: "sans medium";
  color: var(--white);
  margin: 10px 0px;
  cursor: pointer;
  width: fit-content;
  align-self: flex-end;
}
.forgotpass__back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}
.login__forgot-password-btn:hover,
.forgotpass__back-btn:hover {
  color: var(--light-gray);
}

@media only screen and (max-width: 575px) {
  .wrapper {
    min-height: 391px;
  }
}