@charset "UTF-8";
@media (max-width: 768px) {
  .content .block .auth-wrapper {
    width: 100%;
    min-height: 300px;
    padding: 0.5rem;
  }
  .content .block .auth-wrapper .input-wrapper {
    padding: 0.5rem;
  }
}
.block {
  align-items: center;
  font-family: "Readex Pro", sans-serif;
}
.block .auth-wrapper {
  display: flex;
  flex-direction: column;
  width: clamp(300px, 100%, 700px);
  min-height: 300px;
}
.block .auth-wrapper .auth--title {
  font-weight: 700;
  margin-bottom: 1rem;
}
.block .auth-wrapper .input-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #263037;
  border-radius: 1rem;
  width: 100%;
  padding: 2rem;
}

.form-group {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.form-group .label-group {
  color: #fdfdfd;
  display: flex;
  align-items: flex-end;
  width: 40%;
  padding: 1rem;
  border-right: 1px solid #3a4a52;
  flex-direction: column;
}
.form-group .label-group .inputMeta {
  margin: 0;
  font-size: 0.75rem;
  color: #7c7c7c;
}
.form-group .input-group {
  width: 60%;
  padding: 1rem;
}
.form-group .input-group input {
  font-family: "Readex Pro", sans-serif;
  width: 100%;
  background: #1b2327;
  border: 0;
  height: 2rem;
  border-radius: 0.5rem;
  padding: 0.5rem;
  color: #7246f2;
  font-weight: 500;
  font-size: 1rem;
}
.form-group .input-group input:focus {
  outline: none;
  box-shadow: 0px 2px 0px 0px #7246f2;
}
.form-group .input-group .auth-error span::before {
  content: "❌";
  color: crimson;
}
.form-group .input-group .auth-error.active span::before {
  content: "✓";
  color: #00ff00;
}

.lr-separated {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
}
.lr-separated button[type=submit] {
  all: unset;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  display: block;
  padding: 1rem 1.5rem 1rem 1.5rem;
  background-color: #263037;
  color: white;
  text-decoration: none;
  font-weight: 500;
  border-radius: 0.5rem;
  transition: all 0.25s ease;
}
.lr-separated button[type=submit][disabled] {
  cursor: not-allowed;
  background: #3a4a52;
}
.lr-separated button[type=submit][disabled]:hover {
  background: #3a4a52;
}
.lr-separated button[type=submit]:hover {
  background: #2b3840;
}
.lr-separated button[type=submit]:hover a, .lr-separated button[type=submit]:hover i {
  color: #7246f2;
}
.lr-separated a {
  color: #fdfdfd;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.25s ease;
}
.lr-separated a:hover {
  color: #7246f2;
}

.password-requirement {
  padding: 0.25rem;
}

.auth-wrapper {
  display: flex;
  flex-direction: column;
  width: clamp(300px, 100%, 700px);
  min-height: 300px;
}
.auth-wrapper .auth--title {
  font-weight: 700;
  margin-bottom: 1rem;
}
.auth-wrapper .input-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #263037;
  border-radius: 1rem;
  width: 100%;
  padding: 2rem;
}
.auth-wrapper .input-wrapper .form-group .input-group a {
  text-decoration: none;
  cursor: pointer;
  color: #fff;
  font-size: 0.875rem;
  transition: all 0.25s ease;
}
.auth-wrapper .input-wrapper .form-group .input-group a:hover {
  color: #7246f2;
}

.error, .success {
  color: crimson;
  font-size: 0.875rem;
  margin-top: 0.5rem;
}

.success {
  color: #00ff00;
}

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