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

    /* change some Bootstrap variables to ours */
    --bs-font-sans-serif: "Open Sans", sans-serif;
    --bs-body-line-height: 1.3rem;
    --bs-highlight-color: #FF9;
}
html, body {
    background-color: #005480;
    color: #000;
    font-size: 1rem;
    line-height: 1.3rem;
}
/* TAG STYLES */
footer {
    margin-top: 20px;
    border-top: 1px solid #000;
    margin-bottom: 20px;
}
footer p {
    margin-top: 2px;
    margin-bottom: 2px;
    color: #333;
    font-size: small;
    text-align: center;
}
h1, h2, h3, h4, h5, h6 {
    font-family: "Roboto Slab", serif;
}
h1, h2, h3, h4, h5 {
    letter-spacing: 1px;
    line-height: normal;
    margin-top: 0.25rem;
    margin-bottom: 0.125rem;
}
h1 { font-size: 2.25rem; }
h2 { font-size: 2.0rem; }
h3 {
    font-size: 1.75rem;
    font-variant: small-caps;
    color: #337cb9;
}
h4 {
    font-size: 1.5rem;
    font-variant: small-caps;
    color: #036;
}
h5 {
    font-size: 1.25rem;
    font-variant: small-caps;
}
header {
    font-family: "Roboto Slab", serif;
    margin-bottom: 10px;
    height: 105px;
    padding-top: 10px;
    color: #000;
}
header h1 a, header h1 a:hover {
    color: #000;
    text-decoration: none;
}
img { margin: 5px; }
p { margin: 5px auto 10px; }

/* classes */
.btn-login { margin-left: 2em; }
.btn-login img {
    width: 100px;
    height: 100px;
    margin: 5px;
}
.container { background-color: #FFF; }
.hide-on-load { display: none; }
.page-title {
    color: #500000;
    font-family: "Roboto Slab", serif;
    margin-top: 10px;
    margin-bottom: 0.125rem;
    font-size: 2rem;
}

/* FORM STUFF */
fieldset {
    margin-top: 20px;
    margin-bottom: 10px;
}
input:checked {
    background-color: #c90000;
}
legend {
    border-bottom: 1px solid #003;
    font-family: "Roboto Slab", serif;
    font-size: 1.5rem;
    margin-bottom: .5rem;
    padding-bottom: .125rem;
}
.col-form-label { text-align: right; }
/*noinspection CssUnusedSymbol */
.date-field, .input-group > .date-field { width: 150px; }
.form-check { margin-top: .3rem; }
.form-check-input { border: var(--bs-border-width) solid #000102; }
.form-check-label {
    font-weight: normal;
    margin-top: .3rem;
}
.form-error { margin-top: 10px; margin-bottom: 5px; }
.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 to override input groups automatically being full width */
.input-group > .date-field,
.input-group > .date-time-field,
    .input-group > .input-100,
    .input-group > .input-200,
    .input-group > .input-300,
    .input-group > .input-400,
    .input-group > .input-500,
    .input-group > .input-600 {
        position: unset;
        flex: none;
}

/* CORE TABLES */
table.sdg-table, table.sdg-table.dataTable {
    border-collapse: separate;
    border-spacing: 0;
}
.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 #337cb9;
        border-bottom: 2px solid #337cb9;
        border-top-width: 0;
        color: #FFF;
        font-variant: small-caps;
        font-weight: bold;
        letter-spacing: 1px;
        padding-right: 20px;
        text-align: center;
        white-space: nowrap;
}
table.sdg-table > tfoot > tr > th,
    table.sdg-table.dataTable > tfoot > tr > th {
        background-color: #d7ffd5;
        font-weight: bold;
        border: 0 solid #337CB9;
        border-top-width: 2px;
        border-right-width: 1px;
}
table.sdg-table.table-bordered {
    border: 1px solid #337cb9;
}
table.sdg-table.table-bordered > tbody > tr > td,
    table.sdg-table.table-bordered > tbody > tr > th {
        border: 1px solid #337cb9;
        border-left-width: 0;
        border-bottom-width: 0;
}
table.sdg-table.table-bordered th:last-child,
    table.sdg-table.table-bordered td:last-child,
    table.sdg-table.dataTable.table-bordered th:last-child,
    table.sdg-table.dataTable.table-bordered td:last-child {
        border-right: none;
}

/* Flip the strip colors so color is second not first, and change the color*/
table.sdg-table.table-striped > tbody > tr:nth-of-type(2n+1) > *,
    table.sdg-table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1) > * {
        background-color: #FFF;
        box-shadow: none;
}
table.sdg-table.table-striped > tbody > tr:nth-of-type(2n) > *,
    table.sdg-table.dataTable.table-striped > tbody > tr:nth-of-type(2n) > * {
        background-color: #E2E8FC;
        box-shadow: none;
}

table.sdg-table.table-striped > tbody > tr.selected > *,
    table.sdg-table.dataTable.table-striped > tbody > tr.selected > * {
        background-color: #0d6efd !important;
        font-weight: bold;
}

/* Change hover to yellow */
table.sdg-table.table-hover > tbody > tr:hover > *,
    table.dataTable.table-hover > tbody > tr:hover > * {
        background-color: #FF9 !important;
        opacity: 1;
}

/* Change table cell and default padding  */
table.sdg-table > tr > td,
    table.sdg-table > tr > th,
    table.sdg-table > tbody > tr > td,
    table.sdg-table > tbody > tr > th,
    table.sdg-table > tfoot > tr > td,
    table.sdg-table > tfoot > tr > th,
    table.sdg-table > thead > tr > td,
    table.sdg-table > thead > tr > th,
    table.sdg-table.dataTable > tr > td,
    table.sdg-table.dataTable > tr > th,
    table.sdg-table.dataTable > tbody > tr > td,
    table.sdg-table.dataTable > tbody > tr > th,
    table.sdg-table.dataTable > tfoot > tr > td,
    table.sdg-table.dataTable > tfoot > tr > th,
    table.sdg-table.dataTable > thead > tr > td,
    table.sdg-table.dataTable > thead > tr > th { /* excessive selectors?  Maybe, but deals with stuff */
        font-size: 0.90625rem;
        line-height: 1.2rem;
        padding: 5px 8px;
}

table.sdg-table > thead > tr > th.text-end,
    table.sdg-table.dataTable > thead > tr > th.text-end {
        padding-right: 20px;
}

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

/* Move selector more rightward */
table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order,
table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order,
table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order,
table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order,
table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order,
table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order,
table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order,
table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order {
    right: 5px;
}

/* TOP MENU BAR */
.top-menu {
    border: 1px solid #036;
    border-radius: 0;
    margin-bottom: 10px;
    padding: 0 3px 0 0;
}
.top-menu.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.nav-item > a {
    background: none;
    color: #020202;
    font-family: "Roboto Slab", serif;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
}
.top-menu.navbar .dropdown-menu > a:focus,
.top-menu.navbar .dropdown-menu > a:hover,
.top-menu.navbar .navbar-nav > li.nav-item > a:hover,
.top-menu.navbar .navbar-nav > li.nav-item > a:focus {
    color: #FFF;
    background-color: #036;
}
.top-menu.navbar .navbar-nav > li.nav-item > a.active,
    .top-menu.navbar .navbar-nav > li.nav-item > a.active:hover,
    .top-menu.navbar .navbar-nav > li.nav-item > a.active:focus {
        background-color: #91c8ff;
}
.top-menu > .navbar-collapse > .navbar-nav > .nav-item > .dropdown-menu > .dropdown > a:focus,
    .top-menu > .navbar-collapse > .navbar-nav > .nav-item > .dropdown-menu > .dropdown > a:hover,
    .top-menu > .navbar-collapse > .navbar-nav > li.nav-item > a:hover,
    .top-menu > .navbar-collapse > .navbar-nav > li.nav-item > 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;
}

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

/* Pagination hover/focus background colors a bit bluer */
.pagination > li > a:focus,
    .pagination > li > a:hover,
    .pagination > li > span:focus,
    .pagination > li > span:hover {
        background-color: #E3ECF4;
}
/* Make the various data tables elements bold and smaller */
div.dt-container {
    margin-bottom: 3rem;
}

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: 700;
}

/* Customizations to Bootstrap styles */


/* BREADCRUMBS */
.breadcrumb {
    background: #D9EDF7;
    border-radius: .25rem;
    font-size: .9rem;
}
.breadcrumb a {
    text-decoration: none;
}

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

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

/* CARDS */
.card { margin-bottom: 20px; }
.card-header { padding-bottom: 5px; padding-top: 5px; }
.text-white > .card-title { color: #FFF; }
.card-title { margin: 0; }
.card-body { padding: 5px; }