body {
  --bs-body-font-family: sans-serif;
  --hover-brightness: 1.2;
  --active-brightness: 0.8;
  --color1: #ffffff;
  --color2: #000000;
  --textcolor1: #000000;
  --color-grey: #ccc;
  --color-black: #000;
  --spacing0: 0rem;
  --spacing1: 1.5rem;
  --spacing2: 0.5rem;
  --vertical-page-width-min: 520px;
  --vertical-page-width-max: calc(1200px + 4.5rem);
}

a {
  color: var(--color2);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--textcolor1);
}

h1 {
  font-weight: bold;
}

.site-topnav {
  padding: var(--spacing2) 0;
  background-color: var(--color1);
  border-bottom: 0.5px solid var(--color2);
}
.site-topnav .container {
  max-width: var(--vertical-page-width-max);
}
.site-topnav a {
  color: var(--color2);
  display: inline-block;
  margin-right: 1em;
  text-decoration: none;
  font-weight:bold;
}

#main-container {
  display: flex;
  flex-direction: column;
  max-width: var(--vertical-page-width-max);
}

.form-check-input {
  background-color: var(--color2);
  border-color: var(--color2);
}

.form-check-input:checked {
  background-color: var(--color2);
  border-color: var(--color2);
}

.form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--color2);
  border-color: var(--color2);
}

.form-range::webkit-slider-thumb,
.form-range::moz-range-thumb {
  background-color: var(--color2);
}

.btn-primary {
  background-color: var(--color1);
  border-color: var(--color1);
}

.btn-primary.disabled,
.btn-primary:disabled {
  background-color: var(--color1);
  border-color: var(--color1);
}

.btn-primary:focus {
  background-color: var(--color2);
}

.btn-outline-primary {
  color: var(--color1);
  border-color: var(--color1);
}

.btn-outline-primary:hover {
  background-color: var(--color1);
  border-color: var(--color1);
}

.btn-check:active + .btn-outline-primary,
.btn-check:checked + .btn-outline-primary,
.btn-ourline-primary.active,
.btn-outline-primary.dropdown-toggle.show,
.btn-outline-primary:active {
  background-color: var(--color1);
  border-color: var(--color1);
}

.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
  color: var(--color1);
}

.btn-link {
  color: var(--color2);
}

.dropdown-item:active,
.dropdown-item.active {
  background-color: var(--color1);
}

.dropdown-menu-dark .dropdown-item-active,
.dropdown-menu-dark .dropdown-menu:active {
  background-color: var(--color1);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--color1);
}

.page-link {
  color: var(--color1);
}

.page-item.active .page-link {
  background-color: var(--color1);
  border-color: var(--color1);
}

.progress-bar {
  background-color: var(--color1);
}

.list-group-item.active {
  background-color: var(--color1);
  border-color: var(--color1);
}

.link-primary {
  color: var(--color1);
}

.border-primary {
  border-color: var(--color1) !important;
}

a:hover,
.link-primary:hover {
  color: var(--color2);
  text-decoration: underline;
}

a:active,
.link-primary:active {
  color: var(--color2);
  text-decoration: underline;
}

.btn-primary {
  background-color: var(--color1);
  border-color: var(--color2);
  color: var(--color2);
}

.btn-primary:hover {
  background-color: var(--color1);
  border-color: var(--color2);
  color: var(--color2);
}

.btn-primary:active {
  background-color: var(--color1);
  border-color: var(--color2);
  color: var(--color2);
}

/* Reports and Metrics */
.metrics-report-table-wrapper {
  overflow-x: scroll;
}

/* Nav-tabs */
.nav-tabs {
  border-bottom: 1px solid var(--color-black);
}

.site-nav-tab {
  flex-basis: 0;
  flex-grow: 1;
  text-align: center;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  background-color: var(--color-grey);
  color: var(--color-black);
  padding: var(--spacing2);
  border: 1px solid var(--color-black);
  border-bottom: none;
}

.site-nav-tab:not(.active) {
  border-bottom: 1px solid #dee2e6;
}

.site-nav-tab:not(.active):hover {
  filter: initial;
}

.site-nav-tab.active {
  background-color: var(--color1);
  color: var(--color2);
}

.site-nav-tab.active:hover {
  filter: initial;
}

button.site-nav-tab {
  background-color: var(--color-grey);
  color: var(--color-black);
  flex-grow: 0;
}

button.site-nav-tab:not(.active) {
  border-bottom: none;
}

/* Bootstrap overrides */
.badge {
  padding: 0.5em 0.65em !important;
}