:root {
  --osi-text: #367DA2;
  --osi-body-bg: #367DA2;
  --osi-navbar-border: #367DA2;
}
[data-bs-theme=dark] {
    --osi-text: #49AADE;
    --osi-body-bg: #255670;
    --osi-navbar-border: #49AADE;
}

/* This activates cross-document View Transitions. It ensures any element that’s the same from one page to the next stays exactly in place. It keeps the background color of the site constant. And then anything that’s different — new elements appearing, old elements disappearing, page background changing to a different color — by default, all of these changes happen in a crossfade. */
@view-transition {
  navigation: auto;
}

body {
  background-color: var(--osi-body-bg);
  font-family: "Atkinson Hyperlegible Next", var(--bs-body-font-family);
}
.navbar {
  background-color: var(--bs-body-bg);
  border-bottom-color: var(--osi-text) !important;
}
.navbar .navbar-nav .nav-link:hover {
  background-color: var(--osi-body-bg);
  color: #fff;
}
.navbar-brand, .navbar-brand:focus, .navbar-brand:hover {
  color: var(--osi-text);
}
.navbar-brand {
  display: block;
  height: 4rem;
  width: 24.25rem;
  background-image: url('/logo/logo-full.svg');
  background-size: 100% 100%;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  font-size: 2rem !important;
}
.nav-link i {
  font-size:1.35em;
}


/* Front page logos */
.large-logo {
  background-color: var(--osi-body-bg);
}
.large-logo img {
  width:100%;
}
.transition-navbar {
  top: -1px;
}
.transition-navbar a.navbar-brand {
  opacity: 0;
  height: 0;
  transition: all 500ms;
}
.show-navbar a.navbar-brand {
  opacity: 1;
  height: 4rem;
  transition: all 1s;
}


.bg-lightgreen { background-color: #41ae38; }
.bg-subtle-warning { background-color: var(--bs-alert-border-color); }
.all-small-caps {
  font-variant-caps: all-small-caps;
}
.fontSize-1-5rem { font-size: 1.5em; }
.fontSize-2-0rem { font-size: 2em; }
.imgLineHeight {
  height: 1.5em;
  height: 1lh;
}
.processing-spinner {
  width: 1.5rem;
  height: 1.5rem;
  border-width: 0.15em;
}
.form-floating>.notes {
  height: 6em;
}
.notes-result {
  border:1px solid #ddd;
  border-radius: 5px;
  padding:1em;
}

#map {
  height: 500px;
  width: 100%;
  overflow: hidden;
  border: thin solid #333;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}


.tooltip-inner {
  text-align: start;
}
/* dark/light mode toggle */
.bi {
  vertical-align: -.125em;
  fill: currentColor;
}
.bd-mode-toggle {
  z-index: 1500;
}
.bd-mode-toggle .dropdown-menu .active .bi {
  display: block !important;
}



/* accordion buttons */
.accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v5.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V4.5z' clip-rule='evenodd'/%3e%3c/svg%3e");
}
.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' d='M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v5.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V4.5z' clip-rule='evenodd'/%3e%3c/svg%3e");
}



/* fonts */
h1, h2, h3, h4, h5, h6 {
  font-family: "Night Sans", "Poppins", var(--bs-body-font-family);
}
/*
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: "Night Sans", "Poppins", var(--bs-body-font-family);
  font-weight: 300;
  font-style: normal;
}
*/


.poppins-thin {
  font-family: "Poppins", serif;
  font-weight: 100;
  font-style: normal;
}

.poppins-extralight {
  font-family: "Poppins", serif;
  font-weight: 200;
  font-style: normal;
}

.poppins-light {
  font-family: "Poppins", serif;
  font-weight: 300;
  font-style: normal;
}

.poppins-regular {
  font-family: "Poppins", serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", serif;
  font-weight: 700;
  font-style: normal;
}

.poppins-extrabold {
  font-family: "Poppins", serif;
  font-weight: 800;
  font-style: normal;
}

.poppins-black {
  font-family: "Poppins", serif;
  font-weight: 900;
  font-style: normal;
}

.poppins-thin-italic {
  font-family: "Poppins", serif;
  font-weight: 100;
  font-style: italic;
}

.poppins-extralight-italic {
  font-family: "Poppins", serif;
  font-weight: 200;
  font-style: italic;
}

.poppins-light-italic {
  font-family: "Poppins", serif;
  font-weight: 300;
  font-style: italic;
}

.poppins-regular-italic {
  font-family: "Poppins", serif;
  font-weight: 400;
  font-style: italic;
}

.poppins-medium-italic {
  font-family: "Poppins", serif;
  font-weight: 500;
  font-style: italic;
}

.poppins-semibold-italic {
  font-family: "Poppins", serif;
  font-weight: 600;
  font-style: italic;
}

.poppins-bold-italic {
  font-family: "Poppins", serif;
  font-weight: 700;
  font-style: italic;
}

.poppins-extrabold-italic {
  font-family: "Poppins", serif;
  font-weight: 800;
  font-style: italic;
}

.poppins-black-italic {
  font-family: "Poppins", serif;
  font-weight: 900;
  font-style: italic;
}