:root {
    font-family: "Open Sans", sans-serif;
    font-size: 100%;
    line-height: 110%;

    /* change some Bootstrap variables to ours */
    --bs-font-sans-serif: "Open Sans", sans-serif;
    --bs-body-line-height: 1.5rem;
    --bs-highlight-color: #FF9;
    --bs-link-color: #0051c3;
    --bs-link-color-rgb: 0, 81, 195;
    --bs-link-hover-color: #003d94;
    --bs-link-hover-color-rgb: 0, 61, 148;
    --brand-maroon: #500000;
    --brand-blue: #005480;
    --brand-dark-blue: #02233B;
    --brand-dark-gray: #333333;
    --brand-light-blue: #1688B8;
    --required-color: #AB0000;
}
html, body {
    background-color: #FFF;
    color: #000;
    font-size: 1.125rem;
}
header {
    font-family: "Proza Libre", serif;
    margin-bottom: 2px;
    padding-bottom: 5px;
    padding-left: 20px;
    padding-top: 5px;
}
header h1 a, header h1 a:hover {
    color: #000;
    text-decoration: none;
}
footer p {
    color: #333;
    font-size: .9rem;
    margin-bottom: 20px;
    margin-top: 2px;
    text-align: center;
}
footer ul {
    line-height: 1.2;
    list-style: none outside none;
    margin-bottom: 1.25rem;
    margin-left: 1.1rem;
    text-align: center;
}
footer ul li {
    display: inline-block;
    font-size: .9rem;
    margin-right: .5em;
    text-align: -webkit-match-parent;
}
h1, h2, h3, h4, h5, h6, table thead th, .page-title {
    font-family: "Proza Libre", serif;
}
h1, h2, h3, h4, h5 {
    letter-spacing: 1px;
    line-height: normal;
    margin-top: 0.25rem;
    margin-bottom: 0.125rem;
}
h1 {
    font-size: 2.5rem;
    color: var(--brand-maroon);
}
h2 {
    font-size: 2.25rem;
    color: var(--brand-blue);
}
h3 {
    font-size: 2.0rem;
    font-variant: small-caps;
    color: var(--brand-dark-blue);
}
h4, .popover-title, .tab-section-header {
    font-size: 1.75rem;
    font-variant: small-caps;
    color: var(--brand-light-blue);
}
h5 {
    font-size: 1.5rem;
    font-variant: small-caps;
}
img { margin: 5px; }
p { margin: 5px auto 10px; }
pre { white-space: pre-wrap; }
table { background-color: #FFF; color: #000; }
blockquote {
    display: block;
    margin: 1em 40px;
}

.btn-login {
    border-color: #A6D3D7;
    font-weight: 600;
    letter-spacing: 1px;
    margin: 5px 20px;
    text-decoration: none;
    text-transform: uppercase;
    white-space: normal;
}
.btn-login img {
    height: 100px;
    margin: 5px;
    width: 100px;
}
.container { background-color: #FFF; }
.hide-on-load { display: none; }
.page-title {
    margin-top: 10px;
    margin-bottom: 0.125rem;
}
.site-logo {
    max-width: 100%;
    height: auto;
}

/* FORM STUFF */
form {
    margin-bottom: 1rem;
    margin-top: 0.625rem;
}
fieldset {
    margin-top: 20px;
    margin-bottom: 10px;
}
input:checked {
    background-color: var(--required-color);
}
legend:not(.col-form-label) {
    border-bottom: 1px solid #003 !important;
    font-size: 1.5rem;
    margin-bottom: .5rem;
    padding-bottom: .125rem;
}
legend .modified-box {
    float: right;
    font-size: .8rem;
    margin-bottom: 0;
    padding: 0;
    width: auto;
}
legend .modified-box p {
    margin-bottom: 0 !important;
}
legend.col-form-label {
    font-weight: bold;
    padding: 0 10px;
}
.col-form-label { text-align: right; }
.date-field, .input-group > .date-field { width: 200px; }
.form-check { margin-top: .3rem; }
.form-check-input { border: var(--bs-border-width) solid #000102; }
.form-check-label {
    font-weight: normal;
    margin-top: .3rem;
    display: inline;
}
.form-error {
    margin-top: 10px;
    margin-bottom: 5px;
    color: var(--required-color);
}
.form-select, .input-group > .form-select { width: auto; }
.input-group-as > .form-select {
    flex: none;
}
.input-group-as {
    width: auto;
}
.input-50, .input-group > .input-50 { width: 50px; }
.input-100, .input-group > .input-100 { width: 100px; }
.input-150, .input-group > .input-150 { width: 150px; }
.input-200, .input-group > .input-200 { width: 200px; }
.input-250, .input-group > .input-250 { width: 250px; }
.input-300, .input-group > .input-300 { width: 300px; }
.input-350, .input-group > .input-350 { width: 350px; }
.input-400, .input-group > .input-400 { width: 400px; }
.input-450, .input-group > .input-450 { width: 450px; }
.input-500, .input-group > .input-500 { width: 500px; }
.input-550, .input-group > .input-550 { width: 550px; }
.input-600, .input-group > .input-600 { width: 600px; }
.required-field-label {
    font-weight: 600;
    color: var(--required-color);
}
.col-form-label.required {
    color: var(--required-color);
    font-weight: bold;
}
.col-form-label.required::before {
    content: "* ";
    color: var(--required-color);
    font-weight: bold;
    display: inline;
}

/* TOP MENU BAR */
.top-menu.navbar {
    border: 1px solid #036;
    border-radius: 0;
    margin-bottom: 10px;
    min-height: 35px;
    padding: 0 3px 0 0;
}
.navbar .navbar-nav .nav-item {
    border-right: 1px solid #036;
}
.top-menu.navbar .navbar-nav .nav-item:last-child {
    border-right: none;
}
.top-menu.navbar .navbar-nav > li> a {
    font-family: "Proza Libre", serif;
    font-variant: small-caps;
    color: #020202;
    font-weight: 600;
    font-size: 1.125rem;
    letter-spacing: .5pt;
}
.top-menu.navbar .navbar-nav .dropdown-menu { font-size: 1.125rem; }
.top-menu.navbar .dropdown-menu > a:focus,
.top-menu.navbar .dropdown-menu > a:hover,
.top-menu.navbar .navbar-nav > li> a:hover,
.top-menu.navbar .navbar-nav > li> a:focus {
    color: #FFF;
    background-color: #036;
}
.top-menu.navbar .navbar-nav > li> a.active,
    .top-menu.navbar .navbar-nav > li> a.active:hover,
    .top-menu.navbar .navbar-nav > li> a.active:focus {
        background-color: #91c8ff;
}
.top-menu > .navbar-collapse > .navbar-nav > > .dropdown-menu > .dropdown > a:focus,
    .top-menu > .navbar-collapse > .navbar-nav > > .dropdown-menu > .dropdown > a:hover,
    .top-menu > .navbar-collapse > .navbar-nav > li> a:hover,
    .top-menu > .navbar-collapse > .navbar-nav > li> a:focus,
    .top-menu .dropdown-menu > a:focus,
    .top-menu .dropdown-menu > a:hover,
    .top-menu .dropdown-item:hover,
    .top-menu .dropdown-item:focus {
        color: #FFF;
        background-color: #036;
}

/* BREADCRUMBS */
.breadcrumb {
    background: #D9EDF7;
    border-radius: .25rem;
    font-size: .9rem;
    margin: 20px 0;
    padding: .75rem 1rem;
}
.breadcrumb a {
    color: #0051c3;
    font-weight: bold;
}
.breadcrumb a:hover,
.breadcrumb a:focus {
    color: #003d94;
}

/* DATATABLES */
div.dt-info {
    padding-top: 0;
    white-space: nowrap;
}

.pagination > li > a:focus,
    .pagination > li > a:hover,
    .pagination > li > span:focus,
    .pagination > li > span:hover {
        background-color: #E0E6FC;
}

div.dt-container {
    margin-bottom: 3rem;
    margin-top: 1rem;
}

div.dt-container div.dt-paging,
    div.dt-container div.dt-length,
    div.dt-container div.dt-search,
    div.dt-container div.dt-info,
    div.dt-container div.dt-length label,
    div.dt-container div.dt-search label,
    .dt-rempty {
        font-size: 1rem;
        font-weight: 600;
}

/* BUTTONS */
.btn:not(.btn-link) {
    font: 1rem/1.5rem "Open Sans", sans-serif;
    font-weight: 600;
    letter-spacing: .06rem;
    text-transform: uppercase;
}
.btn-primary,
    .btn-secondary,
    .btn-success,
    .btn-danger,
    .btn-warning,
    .btn-info,
    .btn-light,
    .btn-dark {
        font-weight: 600;
        white-space: normal;
}

/* make outline buttons text always black */
[class*="btn-outline-"] {
    font-weight: 600;
    white-space: normal;
}

/* CORE TABLES */
table.sdg-table, table.sdg-table.dataTable {
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid #dee2e6; /* Bootstrap's default border color */
    font-size: 1rem;
}
table caption {
    caption-side: top;
    font-family: 'Proza Libre', serif;
    font-size: 1.25rem;
    margin-top: 10px;
    margin-bottom: 0;
    font-weight: 500;
}
table.sdg-table > tbody > tr:last-child > td {
    border-bottom: 1px solid #dee2e6;
}

/* Ensure all cells have borders */
table.sdg-table td,
table.sdg-table th {
    border: 1px solid #dee2e6;
}
.sdg-table > tbody > tr > td { vertical-align: top; }

/* Make headers dark blue with white, bold text and lighter blue borders */
table.sdg-table > thead > tr > th,
    table.sdg-table.dataTable > thead > tr > th {
        background-color: #286090;
        border: 1px solid #8E8E8E;
        border-bottom: 2px solid #8E8E8E;
        border-top-width: 0;
        color: #FFF;
        font-variant: small-caps;
        font-weight: bold;
        padding-right: 20px;
        text-align: center !important;
        white-space: nowrap;
}

/* Remove DataTables box-shadow and ensure white background for odd rows */
table.table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1) > *,
table.sdg-table.table-striped > tbody > tr:nth-of-type(odd) > *,
table.sdg-table.dataTable.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-striped-bg: #FFFFFF;
    background-color: #FFFFFF;
    box-shadow: none !important;
}

/* Ensure consistent even row styling */
table.sdg-table.table-striped > tbody > tr:nth-of-type(even) > *,
table.sdg-table.dataTable.table-striped > tbody > tr:nth-of-type(even) > * {
    --bs-table-striped-bg: #CBD6FA;
    background-color: #CBD6FA;
    box-shadow: none !important;
}

/* Make sorts darker */
table.sdg-table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order::before,
    table.sdg-table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order::before,
    table.sdg-table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order::after,
    table.sdg-table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order::after
{
    opacity: 1;
}
table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order::before,
    table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order::after,
    table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order::before,
    table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order::after,
    table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order::before,
    table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order::after,
    table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order::before,
    table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order::after,
    table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order::before,
    table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order::after,
    table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order::before,
    table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order::after,
    table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order::before,
    table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order::after,
    table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order::before,
    table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order::after
{
    opacity: .25;
}

table.dataTable thead th,
table.dataTable thead td {
    position: relative !important;
    text-align: left !important;
    padding-right: 30px !important;
}

/* Force the arrow container to the far-right side of the cell */
table.dataTable thead .dt-column-order {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    left: auto !important; /* Override type-based left positioning */
}

/* DATATABLES SELECTED ROWS */
table.sdg-table.dataTable tbody > tr.selected > *,
table.sdg-table.dataTable tbody > tr > td.selected {
    background-color: #cce5ff !important;
    color: #000 !important;
    box-shadow: none !important;
}

/* Keep selected state visible on hover */
table.sdg-table.dataTable tbody > tr.selected:hover > * {
    background-color: #b3d7ff !important;
    color: #000 !important;
    box-shadow: none !important;
}

/* Ensure the checkbox column reflects selection clearly */
table.sdg-table.dataTable tbody > tr.selected > td:first-child {
    background-color: #cce5ff !important;
}

/* Native progress element styled to match Bootstrap progress bar */
progress.progress {
    display: block;
    border: none;
    border-radius: 0.375rem;
    background-color: #e9ecef;
    overflow: hidden;
}

/* Indeterminate state — animated fill */
progress.progress:indeterminate {
    background: linear-gradient(
        to right,
        #e9ecef 0%,
        #0d6efd 40%,
        #e9ecef 80%
    );
    background-size: 200% 100%;
    animation: progress-indeterminate 1.5s linear infinite;
}

/* WebKit needs the pseudo-element for the fill color */
progress.progress::-webkit-progress-bar {
    background-color: #e9ecef;
    border-radius: 0.375rem;
}

progress.progress::-webkit-progress-value {
    background-color: #0d6efd;
    border-radius: 0.375rem;
}

/* Firefox fill color */
progress.progress::-moz-progress-bar {
    background-color: #0d6efd;
    border-radius: 0.375rem;
}

@keyframes progress-indeterminate {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.nav-tabs {
    border-bottom: none;
    margin-bottom: 0;
}
.tab-content {
    border: 1px solid #3072AB;
    border-radius: 4px 4px 4px 4px;
    padding: 0.5em;
}
.nav-tabs .nav-link {
    margin-right: .5em;
    border: 1px solid var(--brand-blue);
    background: var(--brand-blue);
    color: #FFF;
    font-weight: bold;
    border-radius: 4px 4px 0 0;
}
.nav-tabs .nav-link:hover, .nav-tabs > .active > a:hover, .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus {
    color: #FFF;
    border: 1px solid var(--brand-blue);
    cursor: default;
    background: var(--brand-dark-blue);
}
.nav-tabs .nav-link.active, .nav-tabs .nav-link:focus {
    color: #2F71A9;
    background-color: #FFF;
    border: 1px solid var(--brand-blue);
    cursor: default;
}
.nav-tabs .active:hover {
    color: #31708f;
    border: 1px solid var(--brand-blue);
    cursor: default;
    background: #D9EDF7;
}
/* Match Select2 appearance */
.ts-wrapper.single .ts-control {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 0.375rem 0.75rem;
    background-color: #fff;
    cursor: text;
}

.ts-wrapper.single .ts-control:after {
    display: none; /* Remove Tom Select's default arrow */
}

.ts-wrapper.focus .ts-control {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}