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

    /* change some Bootstrap variables to match style and for accessibility */
    --bs-font-sans-serif: "Open Sans", sans-serif;
    --bs-body-line-height: 1.3rem;
    --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: #1478a8;
    --required-color: #AB0000;
}

body {
    background-color: #500000;
    font-size: 1rem;
    line-height: 1.3rem;
}

header {
    font-family: 'Crimson Text', serif;
}
footer {
    font-size: 1rem;
}

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

.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;
}

.content-layer { background-color: #FFF; }
.hide-on-load { display: none; }
.text-small-caps { font-variant: small-caps; }
.tooltip-inner { max-width: 400px; text-align: left; }
.w-15 { width: 15% !important; }


/* BREADCRUMBS */
.breadcrumb {
    background: #D9EDF7;
    border-radius: .25rem;
    font-size: .9rem;
}
.breadcrumb a {
    text-decoration: none;
    color: #0051c3;
}
.breadcrumb a:hover,
.breadcrumb a:focus {
    color: #003d94;
    text-decoration: underline;
}

#skip a
{
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}
#skip a:focus
{
    position:static;
    width:auto;
    height:auto;
}


/* FORM STUFF */
.date-field, .input-group > .date-field { width: 200px; }
.form-check { margin-top: .3rem; }
.form-error {
    margin-top: 10px;
    margin-bottom: 5px;
    color: var(--required-color);
}
.form-select, .input-group > .form-select { 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; }

.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;
}

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