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

    /* 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: #FFF;
    color: #000;
    font-size: 1rem;
    line-height: 1.4rem;
}
/* TAG STYLES */
footer {
    border-top: 1px solid #630;
    margin-bottom: 20px;
    margin-top: 20px;
}
footer p {
    color: #333;
    font-size: small;
    margin-bottom: 2px;
    margin-top: 2px;
    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 {
    color: #443D3A;
}
h2 {
    color: #800000;
}
h3 {
    font-variant: small-caps;
    color: #A0915D;
}
h4 {
    font-variant: small-caps;
    color: #3f2f16;
}
h5 {
    font-variant: small-caps;
}
header {
    border-bottom: 1px solid #630;
    padding-bottom: 10px;
    margin-bottom: 20px;
}
img { margin: 5px; }
p { margin: 5px 5px 10px; }

/* classes */
.btn-login { margin-left: 2em; }
.btn-login img {
    width: 100px;
    height: 100px;
    margin: 5px;
}
.hide-on-load { display: none; }
.page-title {
    color: #5D0025;
    font-family: "Roboto Slab", serif;
    margin-top: 0;
    margin-bottom: 0.125rem;
    font-size: 2rem;
}
.subtitle {
    font-style: italic;
    font-weight: bold;
    margin-bottom: 2px;
    margin-top: 2px;
    text-align: center;
}
.two-column {
    column-count: 2;
}

.schedule-display h4 {
    text-align: left;
    margin-top: 20px;
    margin-bottom: 5px;
    font-variant: none;
}
.schedule-display p {
    font-size: 90%;
    margin: 2px 0 2px 20px;
}
.schedule-display p:last-child {
    margin-bottom: 20px;
}

/* MAIN MENU */
.sidebar-nav > .nav {
    border-right: 1px solid #650000;
    font-family: Arial, sans-serif;
    font-variant: small-caps;
    letter-spacing: .025rem;
}
.sidebar-nav .nav .nav-item {
    margin: 12px;
}
.sidebar-nav .child-menu {
    list-style: none;
    padding: 0;
}
.sidebar-nav .nav > li > a,
.sidebar-nav .nav .child-menu > li > a {
    color: #000;
    background-color: #EBE9DE;
}

.sidebar-nav .nav .child-menu-header {
    background-color: #3F2F16;
    color: #FFF;
}
.sidebar-nav .nav .child-menu > .nav-item {
    margin-left: 0;
    margin-right: 0;
}
.sidebar-nav .nav .child-menu > li > a {
    padding: 6px 40px;
}
.sidebar-nav .nav-pills .nav-item .child-menu .nav-item .nav-link.active {
    color: #FFF;
}
.sidebar-nav .nav > li > a:hover,
    .sidebar-nav .nav > li > a:focus,
    .sidebar-nav .nav .child-menu > li > a:hover,
    .sidebar-nav .nav .child-menu > li > a:focus,
    .sidebar-nav .nav .child-menu-header > a:hover,
    .sidebar-nav .nav .child-menu-header > a:focus {
    color: #FF0;
    background-color: #3F2F16;
}
.sidebar-nav .divider {
    background: #650000;
    border-top: 1px solid #650000;
    margin: 5px auto;
    width: 90%;
}

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

/* 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 {
    font-family: "Open Sans", sans-serif;
}
.btn:not(.btn-link) {
    font-weight: 700;
    letter-spacing: .06rem;
    text-decoration: none;
    text-transform: uppercase;
    white-space: normal;
}