@import url("./variables.css");
@import url("./reset.css");
body, html {
  height: 100vh;
  width: 100vw;
  background-color: var(--body-bg-color);
}

.main-app {
  display: flex;
  height: 100vh;
  width: 100vw;
  flex-direction: row;
  justify-content: space-evenly;
}

#signup-form-btn, .login-form-btn, #reset-password-form-btn, #otp-form-btn {
  color: orange;
  cursor: pointer;
}

#signup-form-btn:hover, .login-form-btn:hover, #reset-password-form-btn:hover, #otp-form-btn:hover {
  text-decoration: underline;
}

.otp-field {
  text-align: center;
  width: calc(3 * 1rem * 10 / var(--std));
  height: calc(4 * 1rem * 10 / var(--std));
  margin: calc(0.5 * 1rem * 10 / var(--std));
  padding: calc(0.5 * 1rem * 10 / var(--std));
  font-size: calc(1.5 * 1rem * 10 / var(--std));
}

.artwork {
  background-color: var(--body-bg-color);
  width: 60vw;
  border-right: 1px solid var(--border-color);
}

.log-process {
  background-color: var(--body-bg-color);
  width: 40vw;
  padding: calc(1 * 1rem * 10 / var(--std));
}

.artwork, .log-process {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.logo-wrapper {
  height: fit-content;
  width: auto;
  background-color: transparent;
}

.logo-img {
  height: calc(20 * 1rem * 10 / var(--std));
  width: auto;
}

.countdown-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 9.5rem;
  height: 2rem;
  text-align: center;
  border-radius: 0.5rem;
  border: 1px solid #393d41;
  background-color: #212529;
}

@media (max-width: 1000px) {
  html {
    font-size: 14px;
  }
  .artwork {
    border: none;
    width: 100vw;
    height: 30vh;
  }
  .main-app {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }
  .log-process {
    width: 100vw;
    height: 50vh;
    align-items: flex-start;
  }
  .logo-img {
    height: calc(18 * 1rem * 10 / var(--std));
    width: auto;
  }
}
@media (max-width: 480px) {
  html {
    font-size: 11px;
  }
  .main-app {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }
  .log-process {
    width: 100vw;
    height: 40vh;
  }
  .logo-img {
    height: calc(18 * 1rem * 10 / var(--std));
    width: auto;
  }
}
.eyes {
  position: absolute;
  right: 0.5rem;
  top: 0.6rem;
  z-index: 80;
  height: 1rem;
  width: 1rem;
  background-color: transparent;
  cursor: pointer;
}

.eye {
  position: absolute;
  z-index: 80;
}

.keep-connected {
  padding-top: 0.4rem;
  height: 1rem;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.keep-connected span {
  margin-left: 0.5rem;
}

.input-group {
  position: relative;
}

/*# sourceMappingURL=login.css.map */