html {
}
button {
    height: 4em;
}

@media (min-width: 768px) {
  html {
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

/* Header sizing: phones (the default) get a compact, thumb-tappable header; the Zebra gun gets
   the original giant one. The gun is detected as body.is-zebra (set server-side from the user
   agent and client-side when the Enterprise Browser hardware scanner initializes) because the
   EB-reported viewport width has proven unreliable across versions -- don't use breakpoints
   to tell the gun apart from a phone. */
header .fs-1 { font-size: 1.1rem !important; }
header .fs-2 { font-size: 1rem !important; }
header .btn { height: auto; min-height: 48px; }   /* comfortable thumb target */

body.is-zebra header .fs-1 { font-size: 2.5rem !important; }
body.is-zebra header .fs-2 { font-size: 2rem !important; }
body.is-zebra header .btn { height: 4em; min-height: 0; }

/* desktop browsers (used for testing) get the big header too */
@media (min-width: 992px) {
  header .fs-1 { font-size: 2.5rem !important; }
  header .fs-2 { font-size: 2rem !important; }
  header .btn { height: 4em; min-height: 0; }
}

body {
  margin-bottom: 60px;
}