html {
  height: initial;
}

body {
  background: #444 scroll no-repeat center center;
  background-size: cover;
}
@media (max-width: 992px) {
  body {
    font-size: 40px;
  }
}
@media (max-width: 460px) {
  body {
    font-size: 21px;
  }
}

/* Zero the padding rather than inherit .container's, which is asymmetric:
 * legacy/bootstrap.css gives it `padding-left: 0` against `padding-right: 1rem`.
 * Bootstrap 3's container-fixed mixin splits the gutter with floor()/ceil() to
 * divide an odd PIXEL gutter, but this repo set $grid-gutter-width to 1.875rem
 * and Sass rounds to a whole number regardless of unit - so floor(0.9375rem)
 * gave 0 and ceil(0.9375rem) gave 16px. The auth shells are where it shows,
 * because .login-promo lays a full-width plate over the background photo and
 * the missing 16px reads as a torn-off top-right corner. Nothing cancels it
 * either: make-row's negative margins and make-grid-columns' padding are both
 * commented out in that mixin file, so the grid is de-guttered everywhere
 * except the container. Fixing it at source means changing .container and
 * .container-fluid, which moves content on all 40 templates that use them. */
.login-container {
  height: 100%;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.login-promo {
  /* A light bar let a light tenant background photo wash out the white title
   * (1.5:1 on a sky image). At 55% black the title keeps 4.7:1 even over a
   * pure white photo, so it meets WCAG AA whatever background is uploaded. */
  background: rgba(0, 0, 0, 0.55);
  font-weight: 600;
  line-height: 40px;
  font-size: 20px;
  padding: 3px 10px 5px;
  color: #fff;
  margin-top: 10px;
  margin-bottom: 0;
}
@media (max-width: 992px) {
  .login-promo {
    font-size: 60px;
    line-height: 80px;
  }
}
@media screen and (max-width: 460px) {
  .login-promo {
    font-size: 30px;
    line-height: 40px;
  }
}
.login-seperator {
  height: 100px;
}
.login-form {
  background: #333;
  padding: 30px;
  color: #fff;
  margin-bottom: 20px;
}
.login-form .login-password-reset-link {
  color: #fff;
  text-decoration: underline;
}
/* Every link on the dark #333 panel, including links in tenant welcome and
 * form texts. The default link blue is 1.28:1 there and its focus ring about
 * 2:1, below WCAG 1.4.3 and 1.4.11. White holds 12.6:1. The ring is set on
 * :focus, not only :focus-visible, so focus moved by script and older Safari
 * get it too. */
.login-form a,
.login-form a:hover,
.login-form a:focus {
  color: #fff;
  text-decoration: underline;
}
.login-form a:focus {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
/* Nested under the panel so it outranks the white panel link colour. */
.login-form .login-back-link,
.login-form .login-back-link:hover,
.login-form .login-back-link:focus {
  color: aquamarine;
}

/* DBSSANDBO-46: optional light grey log-in panel so dark logos stay visible */
.login-bg-light .login-form {
  background: #e6e6e6;
  color: #333;
}
.login-bg-light .login-form .login-password-reset-link,
.login-bg-light .login-form .login-back-link {
  color: #1f5fae;
}
/* The white panel links and focus ring vanish on the light panel. #1f5fae
 * holds 5.1:1 on #e6e6e6, above both the 4.5:1 text and 3:1 ring minimums. */
.login-bg-light .login-form a,
.login-bg-light .login-form a:hover,
.login-bg-light .login-form a:focus {
  color: #1f5fae;
}
.login-bg-light .login-form a:focus {
  outline-color: #1f5fae;
}
.login-form img {
  max-width: 100%;
  max-height: 200px;
  height: auto;
}
.login-form .has-error .help-block {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.login-intro {
  text-align: center;
  font-weight: 400;
}
/* The welcome text is tenant HTML with its own paragraphs, so it cannot sit
 * inside a heading. The .h1 class in the markup keeps the old h1 spacing,
 * including its smaller margins on phones. */
.login-intro-text {
  font-size: 20px;
}
/* The generate-password link sits beside the label rather than inside it, so
 * the field's name stays "Password". The row carries the label's bottom
 * margin so a wrapped link spaces its lines as it did inside the label. */
.login-label-row {
  margin-bottom: 5px;
  font-weight: 700;
}
.login-label-row label {
  display: inline;
  margin: 0;
}
.login-qr {
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 10px;
}
.login-back-row {
  margin-top: 1.2rem;
}

.reset-form-control {
  padding: 0;
  width: auto;
  display: inline;
  min-height: auto;
}

#google-signin2 {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 992px) {
  label,
  button,
  input,
  select,
  .login-intro-text {
    font-size: 40px;
  }
}
@media screen and (max-width: 992px) and (max-width: 460px) {
  label,
  button,
  input,
  select,
  .login-intro-text {
    font-size: 21px;
  }
}
@media (max-width: 992px) {
  input, select {
    height: 80px;
  }
}
@media screen and (max-width: 992px) and (max-width: 460px) {
  input, select {
    height: 24px;
  }
}