body {
    --site-brand-color: #3A4735;
    --site-brand-colorlay: #ffffff;
    --site-background-color: #ffffff;
    --site-brand-black: #000000;
    --site-brand-white: #ffffff;
    --site-brand-context-muted: #888888;
    --site-brand-font-family: Agbalumo, Arial, sans-serif;
    --site-link-color: var(--site-brand-black);
    --site-link-text-decoration: underline;
    --site-topnav-background: var(--site-brand-color);
    --site-topnav-color: var(--site-brand-colorlay);
    --site-basebar-background: var(--site-brand-color);
    --site-basebar-color: var(--site-brand-colorlay);
    --spacing: 1rem;

    --bs-body-font-family: sans-serif;
    --hover-brightness: 1.2;
    --active-brightness: 0.8;
    --color1: var(--site-background-color);
    --color2: var(--site-brand-white);
    --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);
}

html {
    overflow-x: hidden;
    overflow-y: auto;
    height: auto;
}

body {
    overflow-x: hidden;
    overflow-y: visible;
    height: auto;
    margin: 0;
}

a {
    color: var(--site-link-color);
    text-decoration: var(--site-link-text-decoration);
}

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

h1 {
    font-weight: bold;
}

.brand-font {
    font-family: var(--site-brand-font-family);
}

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

.site-topnav a:hover {
    color: var(--site-topnav-color);
}

#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(--site-brand-color);
    color: var(--site-brand-colorlay);
    border-color: var(--site-brand-color);
}

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

.btn-primary:focus {
    background-color: var(--site-brand-color);
    color: var(--site-brand-colorlay);
    border-color: var(--site-brand-color);
}

.btn-primary:active {
    background-color: var(--site-brand-color);
    color: var(--site-brand-colorlay);
    border-color: var(--site-brand-color);
}

.btn-primary:hover {
    background-color: var(--site-brand-color);
    color: var(--site-brand-colorlay);
    border-color: var(--site-brand-color);
}

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

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

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

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

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

.btn-huge {
    padding: calc(var(--spacing) *1) calc(var(--spacing) *2);
    font-size: calc(var(--spacing) *1.6);
}

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

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

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

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

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

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

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

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

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

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

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

/* 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;
}

/* Flex */
.flex-1 { flex: 1; }
.flex-2 { flex: 2; }
.flex-3 { flex: 3; }

/* Length */
.w-100vw { width: 100vw; }

/* Page Tron is full width and made to sit under the top bar */
/* Make a different thing for a midpage version of this */

.pagetron {
    height: 25vh;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--site-brand-color);
    margin: -1.5rem -100rem 1.5rem;
    color: var(--site-brand-colorlay);

}

.pagetron h1 {
    color: var(--site-brand-colorlay) !important;
    font-size: calc(var(--spacing)*4);
    max-width: 75vw;
}

.pagetron span {
    font-size: calc(var(--spacing)*1.3);
}

/* Site Page Row is a Row based building block */

#main-container > .site-page-row:last-of-type {
    padding-bottom: calc(var(--spacing)*2);
}

.site-page-row {
    padding: calc(var(--spacing) *1.5) 0;
    display: flex;
}

.site-page-row.row-color-inverse {
    background-color: var(--site-brand-color);
    color: var(--site-brand-colorlay);
    margin-left: -1000px;
    margin-right: -1000px;
}

.site-page-row.row-color-inverse .container {
    max-width: var(--vertical-page-width-max);
}

.site-page-row.row-color-inverse h1,
.site-page-row.row-color-inverse h2,
.site-page-row.row-color-inverse h3,
.site-page-row.row-color-inverse h4,
.site-page-row.row-color-inverse h5,
.site-page-row.row-color-inverse h6 {
    color: var(--site-brand-colorlay);
}

.site-page-row-heading {
    margin-bottom: var(--spacing);
}

.site-img {
    max-width: 100%;
}