:root {
  --hsl-brand: 347 77.2% 49.8%; /* rose-600 */
  --hsl-brand-foreground: 0 0% 100%; /* white */
  --hsl-primary: 179 100% 41%; /* turquoise-500 */
  --hsl-primary-foreground: 186 100% 10.4%; /* turquoise-950 */
  --hsl-secondary: 193 26.6% 42.7%; /* shark-500 */
  --hsl-secondary-foreground: 0 0% 100%; /* white */
  --hsl-link: 185 90% 35%;

  /* shark */
  --hsl-shark-50: 180 26.3% 96.3%;
  --hsl-shark-100: 189 26.5% 90.4%;
  --hsl-shark-200: 192 26.9% 81.8%;
  --hsl-shark-300: 191 25.3% 69%;
  --hsl-shark-400: 192 24.4% 53.3%;
  --hsl-shark-500: 193 26.6% 42.7%;
  --hsl-shark-600: 195 25.8% 36.5%;
  --hsl-shark-700: 198 22.8% 31%;
  --hsl-shark-800: 198 18.8% 27.1%;
  --hsl-shark-900: 200 17.4% 23.7%;
  --hsl-shark-950: 201 22.1% 15.1%;

  --bs-body-font-family: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

body {
  height: 100%;
}

h1,
h2,
h3,
h4 {
  font-family: "Kanit";
}

.form-group {
  margin: 1rem 0;
}

.btn.btn-link.btn-link-inline {
  display: inline;
  line-height: inherit;
  vertical-align: baseline;
  padding: 0;
  margin: 0;
}

.modal-content.terms h2 {
  font-size: 1.6rem;
}
.modal-content.terms h3 {
  font-size: 1.15rem;
}

footer.footer {
  overflow: hidden;
}

.password-toggle a,
.password-toggle a:hover {
  color: #333;
  text-decoration: none;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
}
.input-group-text {
  position: relative;
} /* constrain the "absolute" icon above */

/* MISSING BOOTSTRAP RULE... i don't know why */
.input-group > .input-group-append > .btn,
.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-prepend:first-child > .btn:not(:first-child),
.input-group
  > .input-group-prepend:first-child
  > .input-group-text:not(:first-child),
.input-group > .input-group-prepend:not(:first-child) > .btn,
.input-group > .input-group-prepend:not(:first-child) > .input-group-text {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.password-req-list {
  font-size: 0.8rem;
  color: #888;
  padding-left: 1rem;
  margin: 0.5rem 0;
}

.validation-message {
  font-size: 0.8rem;
}

footer {
  bottom: 0;
  position: fixed;
  width: 100%;
  padding: 0.5rem 0;
}

.btn-primary,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: hsl(var(--hsl-primary-foreground));
  background-color: hsl(var(--hsl-primary));
  border: none;
}
.btn-primary:hover {
  color: hsl(var(--hsl-primary-foreground));
  background-color: hsl(var(--hsl-primary) / 0.5);
  /* border:none; */
}

.btn-link,
.nav-link,
a {
  color: hsl(var(--hsl-link));
}
.btn-link:hover,
.nav-link:hover,
a:hover {
  color: hsl(var(--hsl-primary));
}

.bg-light {
  background-color: hsl(var(--hsl-shark-100)) !important;
}

.bg-brand {
  background-color: hsl(var(--hsl-brand));
}

.text-brand-foreground {
  color: hsl(var(--hsl-brand-foreground));
}

.\!text-brand-foreground {
  color: hsl(var(--hsl-brand-foreground)) !important;
}

.form-control:focus {
  color: #212529;
  background-color: #fff;
  border-color: hsl(var(--hsl-primary));
  outline: 0;
  box-shadow: 0 0 0 0.25rem hsl(var(--hsl-primary) / 0.25);
}

input[type="checkbox"] {
  accent-color: hsl(var(--hsl-primary));
}