html {
  font-family: Lato, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --calcite-font-family: Lato, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Abril Text', serif;
  font-weight: 600;
  font-variant: lining-nums;
}
body {
  margin: 0;
}
#pageArea {
  display: flex;
  flex-direction: column;
  height: 100vh;
  --header-height: 30px;
  --content-height: calc(100vh - var(--header-height));
}

@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
    background-color: #212121;
    color: #e0e0e0;
  }
  a {
    color: rgb(160, 178, 238);
  }
  a:visited {
    color: rgb(190, 160, 238);
  }
}

input.toggle-switch {
  flex-shrink: 0;
}

/* progress bar styles */
#nprogress {
  position: fixed;
  top: 0;
  height: 3px;
  left: 0;
  width: 100%;
  z-index: 998;
  --color-hsl: var(--fds-accent-dark-1);
  background-color: hsla(var(--color-hsl), 0.1);
}
#nprogress .peg {
  height: 2px;
  background-color: hsla(var(--color-hsl), 1);
}
@media (prefers-color-scheme: dark) {
  #nprogress {
    --color-hsl: var(--fds-accent-light-2);
  }
}

/* combobo box dropdown */
.combo-box-dropdown {
  overflow: auto;
}

/* use box shadow instead of border so that the pixel size is always correct */
/* darker underline */
:root .button.style-standard {
  border: none !important;
  --fds-control-stroke-secondary-overlay: hsla(0, 0%, 0%, 10.44%);
  box-shadow: inset 0 0 0 1px var(--fds-control-stroke-default),
    inset 0 -1px 0 0 var(--fds-control-stroke-secondary-overlay);
  /* padding: 5px 12px 6.5px 12px; */
}
@media (prefers-color-scheme: dark) {
  :root .button.style-standard {
    --fds-control-stroke-secondary-overlay: hsla(0, 0%, 0%, 2.32%);
  }
}
/* uniform underline */
:root .button.style-standard:active,
:root .text-box-container {
  border: none !important;
  box-shadow: inset 0 0 0 1px var(--fds-control-stroke-default);
}
:root .checkbox[type='checkbox']:not(:checked) {
  border: none !important;
  box-shadow: inset 0 0 0 1px var(--fds-control-strong-stroke-default);
}
:root .text-box-underline {
  block-size: calc(100% + 0px) !important;
  inline-size: calc(100% + 0px) !important;
  inset-block-start: 0px !important;
  inset-inline-start: 0px !important;
}
:root .text-box-underline::after {
  border: none !important;
  box-shadow: inset 0 -1px 0 0 var(--fds-control-strong-stroke-default);
}
:root .text-box-container:focus-within .text-box-underline:after {
  border: none !important;
  box-shadow: inset 0 -2px 0 0 var(--fds-accent-default);
}