/* Color Variables */

:root {
  --nav-highlight: #92B6D4;
}

/* High Level Tags */

@media only screen and (min-width: 600px) {
  #main {
    padding: 33px !important;
    padding-top: 0 !important;
    margin: auto !important;
  }
}

#main {
  padding: 0 14px !important;
  margin: auto;
  max-width: 1200px;
}

#p {
  font-size: 16px;
  font-family: 'Karla-Regular', 'Segoe UI', sans;
}

div[role="main"] {
  background: url('/img/banner-clouds.png') repeat-x;
  background-position-y: 0%;
  background-position-y: 0px;
}

#footer {
  position: relative;
  background: #f9f9f9;
  border-top: 1px solid #d9d9d9;
  padding: 45px;
  min-height: 10vh;
  max-height: 10vh;
}

#footer > div {
  position: absolute;
  right: 10px;
  bottom: 10px;
  color: #bbb;
  font-family: 'Courier New',courier;
  font-size: 9px;
}

#footer span {
  opacity: .8
}

.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  text-align: center;
  content: "";
  background: no-repeat center center;
  background-size: 100% 100%;
}

.page-wrap {
  display: flex;
  flex-direction: column;
  min-height: 90vh;
}

#inner-page-wrapper {
  border-radius: 0 !important;
  border: none !important;
  padding: 20px !important;
  background: none !important;
}

@media (min-width: 769px) {
  #inner-page-wrapper {
    min-height: 700px;
  }
}

h1, h2, h3, h4, h5, h6 {
  color: #2d2c2c;
  font-weight: 400;
  font-family: "Lato-Bold";
}

h3, .h3 {
  font-size: 26px;
  padding-bottom: 18px;
  margin-bottom: 28px;
  font-weight: 400;
}

h2, .h2 {
  margin-bottom: 25px;
}

h5, .h5 {
  font-weight: 400;
}

/* Heading classes named for their role rather than their size, so the element can carry the
   correct outline level while the appearance is set here. The Mud variables keep the two
   component headings identical to the Typo values they replaced, and in step with OpusTheme. */
.page-title {
  font-size: 2rem;
  margin-bottom: 25px;
}

.form-header {
  font-size: var(--mud-typography-h5-size, 1.5rem);
  font-family: var(--mud-typography-h5-family);
  font-weight: var(--mud-typography-h5-weight, 400);
  line-height: var(--mud-typography-h5-lineheight, 1.334);
  letter-spacing: var(--mud-typography-h5-letterspacing, 0em);
}

.panel-header {
  font-size: var(--mud-typography-h6-size, 1.25rem);
  font-family: var(--mud-typography-h6-family);
  font-weight: var(--mud-typography-h6-weight, 500);
  line-height: var(--mud-typography-h6-lineheight, 1.6);
  letter-spacing: var(--mud-typography-h6-letterspacing, .0075em);
}

a {
  font-family: "Karla-Regular", 'Segoe UI', sans;
  text-decoration: underline !important;
}

a:hover {
  font-weight: bold;
}

/* A control that must POST, so it cannot be an anchor, styled to sit among the links. Not .btn-link:
   .btn below sets color:#fff, loads after Bootstrap, and ties on specificity — white on white. The
   color is taken from the surrounding text rather than named, because MudBlazor recolors every anchor
   to --mud-palette-text-primary and it loads after this file; a literal here goes its own way. */
.link-button {
  background: none;
  border: 0;
  padding: 0;
  font-family: "Karla-Regular", 'Segoe UI', sans;
  font-size: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.link-button:hover,
.link-button:focus {
  font-weight: bold;
}

.manage-facility-btn {
  text-decoration: none !important;
  color: white !important;
  /* Holds the bold hover width so the button cannot grow and shift the cells beside it. */
  min-width: 8.75rem;
}

.manage-facility-btn:hover {
  font-weight: bold;
  text-decoration: none !important;
  color: white !important;
}

/* Opt-in elevated button, safe on <a> as well as <button>: the text-decoration reset neutralizes the
   global `a { text-decoration: underline !important; }` above — same reason .manage-facility-btn
   exists. A separate class rather than an edit to .btn-primary, which Base shares with CT and WI
   through IncludeBaseWwwRoot. */
.btn-elevated {
  text-decoration: none !important;
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

/* !important is required to beat .btn-primary's own !important background/border. These colors darken
   .btn-primary's #09538b specifically; split this block if a non-primary use ever needs the elevation
   without them. */
.btn-elevated:hover,
.btn-elevated:focus {
  background-color: #073e6b !important;
  border-color: #073e6b !important;
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12);
}

/* The elevation above overrides Bootstrap's box-shadow focus ring, so focus needs its own indicator.
   An outline rather than another ring: it does not compete with the elevation for box-shadow, and
   box-shadow is dropped entirely in forced-colors mode where an outline survives. Deliberately not in
   the transition above — a focus indicator should appear at once. */
.btn-elevated:focus {
  outline: 0.1875rem solid #09538b;
  outline-offset: 0.125rem;
}

/* WCAG 2.5.8 states that standalone links need a 24x24px interactable box */
.content-link-standalone {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  min-width: 24px;
}

.dmv {
  min-width: fit-content;
}

img.responsive-image {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* TOP QUICK LINKS */

@media (max-width: 1280px) {
  .top-quick-links {
    display: block;
  }

  .banner-quick-links {
    display: none;
  }
}

@media (min-width: 1280px) {
  .top-quick-links {
    display: none;
  }

  .banner-quick-links {
    display: block;
  }
}

ul.dropdown-menu ul {
  padding-left: 40px !important;
  list-style-type: none !important;
}

ul, li {
  font-family: "Karla-Regular";
  font-size: 16px;
  line-height: 140%
}

body {
  top: 0 !important;
}

.btn {
  border-radius: 0.25rem;
  border: none;
  position: relative;
  color: #fff;
  font-family: "Karla-Bold";
  font-size: 0.75rem;
  font-weight: normal;
  line-height: 0.875rem;
  letter-spacing: 0.03188rem;
  padding: 0.6875rem 2rem;
  text-transform: uppercase;
  cursor: pointer;
  display: block;
  text-align: center;
}

.btn-primary {
  background-color: #09538b !important;
  border: 0.125rem solid #09538b !important;
}

@media only screen and (min-width: 64em) {
  .btn {
    font-size: 1rem;
    letter-spacing: 0.0375rem;
    padding: .375rem .75rem;
    line-height: 1.5;
    display: inline-block;
  }
}

/* Forms & Inputs */

#registerFacility input,
#registerFacility select,
#registerFacility textarea,
#registerFacility .mud-select-input,
#managePayments input,
#managePayments textarea,
#managePayments .mud-select-input {
  font-weight: normal !important;
}

.init {
  display: none;
}

section.inner-page {
  min-height: 700px;
}

#inner-page-wrapper > section {
  margin-left: 33px;
}

/* The selected payment tab, filled so it reads as chosen rather than relying on an underline.
   MudBlazor colours the active label primary via .mud-tab.mud-tab-active, which would be invisible
   against this fill -- it only switches to on-primary text when the whole bar is primary. Three
   classes to outrank it, and hover pinned so the fill does not tint. */
.mud-tab.mud-tab-active.payment-tab-active,
.mud-tab.mud-tab-active.payment-tab-active:hover {
  background-color: var(--mud-palette-primary);
  color: var(--mud-palette-primary-text);
  border-radius: 4px 4px 0 0;
}