.login-card {
  min-width: min(460px, 100%);
}

.password-retrive-icon {
  font-size: 16px;
  color: var(--login-form-border);
}

#recover-back-button {
  background: transparent;
  border: 1px solid var(--input-border-color);
  color: var(--text-primary);
  min-width: 8rem;
  height: 3rem;
  border-radius: 0.35rem;
  cursor: pointer;
  font-size: var(--font-size3);
  transition: background 0.15s;
}

#recover-back-button:hover {
  background: var(--hover-bg-color);
}

#recover-confirm-button {
  background: var(--primary-color);
  color: var(--text-color-with-primary);
  min-width: 8rem;
  height: 3rem;
  border: none;
  border-radius: 0.35rem;
  cursor: pointer;
  font-size: var(--font-size3);
  transition: opacity 0.15s;
}

#recover-confirm-button:disabled {
  opacity: 0.5;
  cursor: default;
}

.recover-timer {
  font-size: var(--font-size2);
  color: var(--subtext-primary);
}

#forgot-password-button {
  margin-top: -12px;
  color: var(--subtext-primary);
  text-decoration: none;
  cursor: pointer;
}

#forgot-password-button:hover {
  color: var(--login-form-border);
}

#have-code-button {
  margin-top: -12px;
  color: var(--subtext-primary);
  text-decoration: none;
  cursor: pointer;
}

#have-code-button:hover {
  color: var(--login-form-border);
}

@media (max-width: 575.98px) {
  #recover-back-button,
  #recover-confirm-button {
    width: 100%;
    min-width: unset;
  }
}