/* Shared look for the plain HTML pages (log in, register, onboarding survey, password reset). Loaded after Bootstrap
   or Vuetify on those pages so these rules win. Colors and fonts follow the shared RWL style sheet. */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800&family=Inter:wght@400;500;600&display=swap');

:root {
  --rwl-purple: #613892;
  --rwl-purple-deep: #3E2360;
  --rwl-lilac: #F1EBF8;
  --rwl-leaf: #3F7A25;
  --rwl-ink: #2B2433;
  --rwl-muted: #6B6475;
  --rwl-line: #E6E0EC;
  --rwl-ground: #FAF8FC;
}

html body,
html body .v-main,
html body .v-application {
  background: var(--rwl-ground) !important;
  font-family: 'Inter', sans-serif !important;
  color: var(--rwl-ink);
  height: auto !important;
  min-height: 100vh;
  font-size: 16px;
}

body h1, body h2, body h3, body h4,
body .v-card__title {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800 !important;
  color: var(--rwl-ink) !important;
}

body a {
  color: var(--rwl-purple);
  font-weight: 600;
}

/* The white card that holds each form */
body [id$="-box"],
body .rwl-auth-card,
body .v-card {
  height: auto !important;
  max-width: 480px !important;
  margin: 24px auto 48px !important;
  padding: 24px 20px !important;
  background: #fff !important;
  border: 1px solid var(--rwl-line) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}
body [id$="-box"] > form {
  padding: 0 !important;
}

body label {
  color: var(--rwl-ink) !important;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
}
body a.rwl-text-purple {
  color: var(--rwl-purple) !important;
}
body h3.rwl-text-purple {
  font-size: 24px;
  margin: 0 16px;
}
body label + br {
  display: none;
}

body .form-group {
  display: block !important;
  margin-bottom: 16px;
}
body .text-center {
  text-align: center;
}
body .text-right {
  text-align: right;
}
body .text-center img {
  margin: 0 auto;
}

body .form-control,
body input[type="text"],
body input[type="email"],
body input[type="password"],
body input[type="number"],
body input[type="date"],
body textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #CFC6DA !important;
  border-radius: 10px !important;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: var(--rwl-ink);
  background: #fff;
  box-sizing: border-box;
}
body textarea {
  min-height: 88px;
}
body .form-control:focus,
body input:focus,
body textarea:focus {
  outline: none;
  border-color: var(--rwl-purple) !important;
  box-shadow: 0 0 0 3px var(--rwl-lilac) !important;
}

body input[type="submit"],
body .btn,
body .rwl-btn-info {
  display: block;
  width: 100%;
  min-height: 48px;
  float: none !important;
  margin-top: 8px;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--rwl-purple) !important;
  color: #fff !important;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 16px;
  text-transform: none;
  cursor: pointer;
}
body input[type="submit"]:hover,
body .btn:hover {
  background: var(--rwl-purple-deep) !important;
}

body .error {
  color: #B42318;
}

body img[alt="ResoluteWL"] {
  width: 200px;
  display: block;
  margin: 0 auto;
}
body #login-form > a[href*="reset"] {
  display: block !important;
  float: none !important;
  text-align: center;
}
body h3.pt-5,
body h3.mt-5 {
  padding-top: 32px !important;
  margin-top: 0 !important;
}