body {
  --bs-body-bg: #eef5f7; /* very light teal tint */
  --bs-link-color-rgb: 2, 131, 151; /* #028397 VIAGS teal */
  --bs-link-hover-color-rgb: 1, 106, 122;
  --pngx-primary: #028397;
  --pngx-primary-hover: #016A7A;
  --pngx-primary-active: #01525E;
  /* VIAGS gold, darkened to 4.9:1 on white so it stays readable */
  --pngx-gold: #96680A;
  --pngx-border: #cfdde2;
}

.logo {
  height: auto;
  width: 110px;
  max-width: 45%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.app-name {
  color: var(--pngx-gold);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
  margin-bottom: 0;
}

/* short teal rule tying the gold title to the teal form below */
.app-name::after {
  content: "";
  display: block;
  width: 3rem;
  height: 3px;
  margin: 0.9rem auto 0;
  border-radius: 2px;
  background-color: var(--pngx-primary);
}

/* intro line above the fields ("Please sign in.") */
.form-accounts p {
  color: #6c757d;
  font-size: 0.875rem;
  margin: 1.1rem 0 1.25rem;
}

.byline {
  font-size: 0.6rem;
  letter-spacing: 0.1rem;
}

.text-primary {
  color: var(--pngx-primary) !important;
}

.form-control {
  --bs-body-bg: #fff;
}

.btn.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-bg: var(--pngx-primary);
  --bs-btn-border-color: var(--pngx-primary);
  --bs-btn-hover-bg: var(--pngx-primary-hover);
  --bs-btn-hover-border-color: #016A7A;
  --bs-btn-active-bg: var(--pngx-primary-active);
  --bs-btn-active-border-color: #01525E;
}

.btn-link {
  --bs-btn-color: var(--pngx-primary);
  --bs-btn-hover-color: var(--pngx-primary-hover);
  --bs-btn-active-color: var(--pngx-primary-active);
}

.form-accounts {
  max-width: 360px;
  min-width: 320px;
  background-color: #fff;
  border-radius: 1rem;
  padding: 2rem 1.75rem 1.75rem;
  box-shadow: 0 1.25rem 2.5rem rgba(1, 82, 94, 0.12);
}

/* Inputs: white on the teal-tinted page, with a teal focus ring */
.form-control {
  border-color: var(--pngx-border);
}

.form-control:focus {
  border-color: var(--pngx-primary);
  box-shadow: 0 0 0 0.2rem rgba(2, 131, 151, 0.2);
}

.form-floating > label {
  color: #6c757d;
}

/* Browsers paint autofilled fields pale blue - keep them white */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  box-shadow: 0 0 0 1000px #fff inset;
  -webkit-text-fill-color: #212529;
}

.form-stacked-top input {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.form-stacked-middle input {
  margin-bottom: -1px;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.form-stacked-bottom input {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

.form-accounts .form-floating input:focus {
  position: relative;
  z-index: 100;
}

.form-accounts .form-floating input:focus~label {
  z-index: 101;
}