/*
 * HorseRecords theme for Bootstrap 5.3.8, in CSS variables (no Sass build).
 *
 * Loaded straight after css/bootstrap5/bootstrap.min.css in every base template.
 * The values come from the old custom Bootstrap 4.3 build (css/bootstrap.css,
 * deleted with this file's first commit), compared against stock 4.3.1:
 *   - primary (and blue) #172552 in place of #007bff, with every shade derived from it
 *   - links #172552, hover #060a16
 *   - focus border #3352b6, focus ring rgba(23, 37, 82, 0.25)
 *   - navbar-dark links brighter: rgba(255, 255, 255, 0.75), hover #fff
 *   - square corners everywhere ($enable-rounded: false); softened here on purpose
 * Bootstrap 5.3 hard-codes the primary colour in many component variables, so each
 * one is set again below.
 *
 * Everything else stays as Bootstrap 4 looked: the Bootstrap 4 palette (5.3 changed
 * success, info, dark, pink and every derived tint), fixed heading and display sizes,
 * small at 80%, the muted grey, and containers capped at 1140px. Only the corners
 * change on purpose.
 */

/* ---------- Global variables ---------- */

:root,
[data-bs-theme=light] {
    --bs-blue: #172552;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #e83e8c;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #28a745;
    --bs-teal: #20c997;
    --bs-cyan: #17a2b8;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-primary: #172552;
    --bs-primary-rgb: 23, 37, 82;
    --bs-secondary: #6c757d;
    --bs-secondary-rgb: 108, 117, 125;
    --bs-success: #28a745;
    --bs-success-rgb: 40, 167, 69;
    --bs-info: #17a2b8;
    --bs-info-rgb: 23, 162, 184;
    --bs-warning: #ffc107;
    --bs-warning-rgb: 255, 193, 7;
    --bs-danger: #dc3545;
    --bs-danger-rgb: 220, 53, 69;
    --bs-light: #f8f9fa;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark: #343a40;
    --bs-dark-rgb: 52, 58, 64;
    --bs-primary-text-emphasis: #0c132b;
    --bs-primary-bg-subtle: #d1d3dc;
    --bs-primary-border-subtle: #bec2cf;
    --bs-secondary-text-emphasis: #383d41;
    --bs-secondary-bg-subtle: #e2e3e5;
    --bs-secondary-border-subtle: #d6d8db;
    --bs-success-text-emphasis: #155724;
    --bs-success-bg-subtle: #d4edda;
    --bs-success-border-subtle: #c3e6cb;
    --bs-info-text-emphasis: #0c5460;
    --bs-info-bg-subtle: #d1ecf1;
    --bs-info-border-subtle: #bee5eb;
    --bs-warning-text-emphasis: #856404;
    --bs-warning-bg-subtle: #fff3cd;
    --bs-warning-border-subtle: #ffeeba;
    --bs-danger-text-emphasis: #721c24;
    --bs-danger-bg-subtle: #f8d7da;
    --bs-danger-border-subtle: #f5c6cb;
    --bs-light-text-emphasis: #818182;
    --bs-light-bg-subtle: #fefefe;
    --bs-light-border-subtle: #fdfdfe;
    --bs-dark-text-emphasis: #1b1e21;
    --bs-dark-bg-subtle: #d6d8d9;
    --bs-dark-border-subtle: #c6c8ca;

    /* Bootstrap 4 muted grey (.text-muted, form-text, placeholders); 5.3 uses 75% body colour. */
    --bs-secondary-color: #6c757d;
    --bs-secondary-color-rgb: 108, 117, 125;

    --bs-link-color: #172552;
    --bs-link-color-rgb: 23, 37, 82;
    --bs-link-hover-color: #060a16;
    --bs-link-hover-color-rgb: 6, 10, 22;

    --bs-focus-ring-color: rgba(23, 37, 82, 0.25);

    /* The Bootstrap 4 system font stack (it includes Noto Sans, which Linux renders). */
    --bs-font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-body-font-size: 1rem;

    /* Softer than the old square corners, smaller than Bootstrap 5's defaults. */
    --bs-border-radius: 0.25rem;
    --bs-border-radius-sm: 0.2rem;
    --bs-border-radius-lg: 0.3rem;
    --bs-border-radius-xl: 0.4rem;
    --bs-border-radius-xxl: 0.5rem;
}

/* ---------- Layout parity with Bootstrap 4 ---------- */

/* 30px gutters, as Bootstrap 4. Rows with a g-* or gx-* class keep their own. */
.row:not([class^="g-"]):not([class*=" g-"]):not([class^="gx-"]):not([class*=" gx-"]):not(.hr-form-row),
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
    --bs-gutter-x: 30px;
}

/* g-0 replaced Bootstrap 4's no-gutters, whose ".no-gutters > .col { padding: 0 }"
   also beat a page's own padding on the columns (the task calendar cells rely on it). */
.row.g-0 > .col,
.row.g-0 > [class*="col-"],
.row.gx-0 > .col,
.row.gx-0 > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
}

/* hr-form-row is Bootstrap 4's .form-row: 10px between columns (5px each side). */
.row.hr-form-row {
    --bs-gutter-x: 10px;
}

/* Labels keep Bootstrap 4's space below them (5.3 moved it to .form-label).
   Check labels sit level with their box, as in Bootstrap 4. */
label {
    margin-bottom: 0.5rem;
}

.form-check-label {
    margin-bottom: 0;
}

/* Button labels in a toggle group, as Bootstrap 4's .btn-group-toggle > .btn. */
.btn-group > label.btn,
.btn-check + label.btn {
    margin-bottom: 0;
}

/* Links are not underlined until hover, as Bootstrap 4. */
a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Components that Bootstrap 4 kept plain on hover. */
a:not([href]):not([class]):hover,
.btn:hover,
.nav-link:hover,
.nav-link:focus,
.navbar-brand:hover,
.navbar-brand:focus,
.dropdown-item:hover,
.dropdown-item:focus,
.page-link:hover,
.list-group-item-action:hover,
.list-group-item-action:focus,
.card-link:hover,
a.badge:hover,
a.badge:focus {
    text-decoration: none;
}

/* .btn-link: Bootstrap 5 underlines it always, Bootstrap 4 only on hover. */
.btn-link {
    --bs-btn-focus-shadow-rgb: 23, 37, 82;
    text-decoration: none;
}

.btn-link:hover,
.btn-link:focus {
    text-decoration: underline;
}

/* ---------- Buttons (theme colour variants are further down) ---------- */

.btn-close {
    --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(23, 37, 82, 0.25);
}

/* ---------- Navigation ---------- */

.nav-pills {
    --bs-nav-pills-link-active-bg: #172552;
}

.nav-link:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(23, 37, 82, 0.25);
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: #172552;
}

.pagination {
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(23, 37, 82, 0.25);
    --bs-pagination-active-bg: #172552;
    --bs-pagination-active-border-color: #172552;
}

.list-group {
    --bs-list-group-active-bg: #172552;
    --bs-list-group-active-border-color: #172552;
}

/* Bootstrap 4 build: navbar-dark links at 75% white, white on hover. */
.navbar-dark,
.navbar[data-bs-theme=dark] {
    --bs-navbar-color: rgba(255, 255, 255, 0.75);
    --bs-navbar-hover-color: #fff;
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ---------- Forms ---------- */

.form-control:focus,
.form-select:focus {
    border-color: #3352b6;
    box-shadow: 0 0 0 0.25rem rgba(23, 37, 82, 0.25);
}

.form-check-input:focus {
    border-color: #3352b6;
    box-shadow: 0 0 0 0.25rem rgba(23, 37, 82, 0.25);
}

/* Checked colours are with the checkbox sizes further down (native blue, or navy
   for custom-check). */

.form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%233352b6'/%3e%3c/svg%3e");
}

.form-range::-webkit-slider-thumb {
    background-color: #172552;
}

.form-range::-webkit-slider-thumb:active {
    background-color: #4e6ccd;
}

.form-range::-moz-range-thumb {
    background-color: #172552;
}

.form-range::-moz-range-thumb:active {
    background-color: #4e6ccd;
}

.form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(23, 37, 82, 0.25);
}

.form-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(23, 37, 82, 0.25);
}

/* ---------- Other components ---------- */

.progress,
.progress-stacked {
    --bs-progress-bar-bg: #172552;
}

.accordion {
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(23, 37, 82, 0.25);
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230c132b' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* .bg-primary, .text-bg-primary, .text-primary and .border-primary read
   --bs-primary-rgb, so the global variable above covers them. */

/* ---------- Component spacing and colours as Bootstrap 4 ----------
   Bootstrap 5 tightened the padding of several components and darkened a few
   greys; these put the Bootstrap 4 values back so pages keep their old size. */

:root,
[data-bs-theme=light] {
    /* Card, list group and toast borders: Bootstrap 4 used 12.5% black. */
    --bs-border-color-translucent: rgba(0, 0, 0, 0.125);
    --bs-code-color: #e83e8c;
}

/* Bootstrap 5 dropped the navbar's side padding (it expects a container inside). */
.navbar {
    --bs-navbar-padding-x: 1rem;
}

.breadcrumb {
    --bs-breadcrumb-padding-x: 1rem;
    --bs-breadcrumb-padding-y: 0.75rem;
    --bs-breadcrumb-bg: #e9ecef;
    --bs-breadcrumb-divider-color: #6c757d;
    --bs-breadcrumb-item-active-color: #6c757d;
}

/* Bootstrap 4 kept the divider in the text flow (5 floats it), so a link's
   leading space still showed after it. */
.breadcrumb-item + .breadcrumb-item::before {
    display: inline-block;
    float: none;
}

.card {
    --bs-card-spacer-y: 1.25rem;
    --bs-card-spacer-x: 1.25rem;
    --bs-card-title-spacer-y: 0.75rem;
    --bs-card-cap-padding-y: 0.75rem;
    --bs-card-cap-padding-x: 1.25rem;
    --bs-card-img-overlay-padding: 1.25rem;
    --bs-card-cap-bg: rgba(0, 0, 0, 0.03);
}

.list-group {
    --bs-list-group-item-padding-x: 1.25rem;
    --bs-list-group-item-padding-y: 0.75rem;
    --bs-list-group-action-color: #495057;
    --bs-list-group-action-hover-color: #495057;
    --bs-list-group-action-active-color: #212529;
    --bs-list-group-action-active-bg: #e9ecef;
}

/* Bootstrap 4's close button was a small bold times sign; draw the cross that size
   and weight. */
.btn-close {
    --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath stroke='%23000' stroke-width='3' d='M2 2l12 12M14 2 2 14'/%3e%3c/svg%3e");
    background-size: 0.625em auto;
}

.alert {
    --bs-alert-padding-x: 1.25rem;
    --bs-alert-padding-y: 0.75rem;
}

.alert-dismissible {
    padding-right: 4rem;
}

.alert-dismissible .btn-close {
    padding: 1rem 1.25rem;
}

.badge {
    --bs-badge-padding-x: 0.4em;
    --bs-badge-padding-y: 0.25em;
}

/* Bootstrap 4's badge-pill (now badge rounded-pill) was wider. */
.badge.rounded-pill {
    --bs-badge-padding-x: 0.6em;
}

.dropdown-menu {
    --bs-dropdown-item-padding-x: 1.5rem;
    --bs-dropdown-header-padding-x: 1.5rem;
    --bs-dropdown-border-color: rgba(0, 0, 0, 0.15);
    --bs-dropdown-divider-bg: #e9ecef;
    --bs-dropdown-link-color: #212529;
    --bs-dropdown-link-hover-color: #16181b;
}

/* Menu dropdowns sat straight under their link in the old build. */
.navbar .dropdown-menu {
    --bs-dropdown-spacer: 0;
}

.popover {
    --bs-popover-border-color: rgba(0, 0, 0, 0.2);
    --bs-popover-header-padding-x: 0.75rem;
    --bs-popover-header-bg: #f7f7f7;
    --bs-popover-body-padding-x: 0.75rem;
    --bs-popover-body-padding-y: 0.5rem;
    --bs-popover-body-color: #212529;
}

.modal {
    --bs-modal-border-color: rgba(0, 0, 0, 0.2);
}

/* Bootstrap 4 modal header: title top-aligned, close button in a 1rem pad. */
.modal-header {
    align-items: flex-start;
}

.modal-header .btn-close {
    padding: 1.4375rem 1rem 0.5625rem;
    margin: -1rem -1rem -1rem auto;
}

.pagination {
    --bs-pagination-hover-bg: #e9ecef;
    --bs-pagination-disabled-bg: #fff;
    --bs-pagination-disabled-color: #6c757d;
}

.nav-tabs {
    --bs-nav-tabs-link-active-color: #495057;
}

hr {
    border-top-color: rgba(0, 0, 0, 0.1);
    opacity: 1;
}

/* Tables: Bootstrap 4 cell padding, text colour, transparent background (the page
   shows through, as in Bootstrap 4) and borders (a line above each
   row, two pixels under the header, none under the last row). */
/* Not on the colour variants (table-dark and the rest), which set their own. */
.table:not(.table-primary):not(.table-secondary):not(.table-success):not(.table-info):not(.table-warning):not(.table-danger):not(.table-light):not(.table-dark) {
    --bs-table-color: #212529;
    --bs-table-bg: transparent;
    --bs-table-striped-color: #212529;
    --bs-table-active-color: #212529;
    --bs-table-hover-color: #212529;
}

.table > :not(caption) > * > * {
    padding: 0.75rem;
}

.table-sm > :not(caption) > * > * {
    padding: 0.3rem;
}

.table:not(.table-bordered):not(.table-borderless) > :not(caption) > * > * {
    border-top-width: var(--bs-border-width);
    border-bottom-width: 0;
}

.table:not(.table-bordered):not(.table-borderless) > thead > tr > *,
.table-bordered > thead > tr > * {
    border-bottom-width: 2px;
}

/* Bootstrap 4's ".table thead th" bottom-aligned header cells, beating page rules
   such as "td, th { vertical-align: middle }"; Bootstrap 5 only sets it on thead. */
.table thead th {
    vertical-align: bottom;
}

/* Form controls: Bootstrap 4's grey text and darker border. */
.form-control,
.form-select,
.input-group-text {
    --bs-border-color: #ced4da;
    color: #495057;
}

.input-group-text {
    background-color: #e9ecef;
}

/* Bootstrap 4 fixed the control height; Bootstrap 5 lets the line box set it, which
   lands the text 1px higher in Chrome. */
.form-control,
.form-select {
    height: calc(1.5em + 0.75rem + 2px);
}

.form-control-sm,
.form-select-sm {
    height: calc(1.5em + 0.5rem + 2px);
}

.form-control-lg,
.form-select-lg {
    height: calc(1.5em + 1rem + 2px);
}

/* Bootstrap 5's reboot strips the browser's padding from the parts of a date field,
   which squeezes "09/01/2015" 4px narrower and 1px to the left. */
::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field {
    padding: revert;
}

textarea.form-control,
.form-control[type=file],
.form-control[multiple],
.form-control[size],
.form-select[multiple],
.form-select[size]:not([size="1"]) {
    height: auto;
}

/* Selects in {% crispy %} forms were Bootstrap 4 custom-selects, with small up and
   down triangles; the select-arrows class (bootstrap5/field.html) brings them back.
   Other selects keep Bootstrap 5's chevron, close to the browser arrow they had. */
.form-select.select-arrows {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
    padding-right: 1.75rem;
    background-size: 8px 10px;
}

/* Every other select was a plain .form-control select under Bootstrap 4, drawn by the
   browser: text 4px further in and 1px lower, a narrower arrow area and a small
   dark chevron close to the edge. Same size and text position as before. */
.form-select:not(.select-arrows) {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 7'%3e%3cpath fill='none' stroke='%23333' stroke-width='1.5' d='M1 1.5l4 4 4-4'/%3e%3c/svg%3e");
    padding-top: calc(0.375rem + 0.5px);
    padding-bottom: calc(0.375rem - 0.5px);
    padding-left: calc(0.75rem + 4px);
    padding-right: calc(0.75rem + 20px);
    background-position: right 6px center;
    background-size: 10px 7px;
}

.form-select:not(.select-arrows)[multiple],
.form-select:not(.select-arrows)[size]:not([size="1"]) {
    padding-right: 0.75rem;
}

.form-select.select-arrows[multiple],
.form-select.select-arrows[size]:not([size="1"]) {
    padding-right: 0.75rem;
}

/* hr-inline-form is Bootstrap 4's .form-inline, which Bootstrap 5 dropped: controls
   stack full width on phones and sit on one line, at their own width, from 576px. */
.hr-inline-form {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}

@media (min-width: 576px) {
    .hr-inline-form label {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0;
    }

    .hr-inline-form .form-control,
    .hr-inline-form .form-select {
        display: inline-block;
        width: auto;
        vertical-align: middle;
    }
}

/* Rows of cards that replaced Bootstrap 4's card deck (row gy-3 hr-cards):
   15px between stacked cards and 15px under the last one on phones, as the deck had. */
.row.hr-cards {
    --bs-gutter-y: 15px;
}

@media (max-width: 575.98px) {
    .row.hr-cards {
        padding-bottom: 15px;
    }
}


.form-text {
    font-size: 80%;
}

/* Plain Bootstrap 4 checkboxes and radios (.form-check) were the browser's own:
   13px, darker grey edge, 1.25rem indent, stacked with no space between. */
.form-check {
    margin-bottom: 0;
    padding-left: 1.25rem;
}

.form-check .form-check-input {
    margin-left: -1.25rem;
}

.form-check-input {
    --bs-border-color: #767676;
    width: 13px;
    height: 13px;
    margin-top: 0.3rem;
}

/* The browser's own tick colour, as the old plain checkboxes showed. */
.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
    background-color: #0075ff;
    border-color: #0075ff;
}

.form-check-inline:not(.custom-check) {
    display: inline-flex;
    align-items: center;
    padding-left: 0;
    margin-right: 0.75rem;
}

.form-check-inline:not(.custom-check) .form-check-input {
    float: none;
    margin: 0 0.3125rem 0 0;
}

/* custom-check marks what was a Bootstrap 4 custom-control (the {% crispy %} tag's
   checkboxes and radios, and a few hand-written ones): a 1rem box, navy when ticked,
   which is Bootstrap 5's own form-check. */
.form-check.custom-check {
    padding-left: 1.5rem;
}

.form-check.custom-check .form-check-input {
    width: 1rem;
    height: 1rem;
    margin-top: 0.25rem;
    margin-left: -1.5rem;
}

.form-check.custom-check .form-check-input:checked,
.form-check.custom-check .form-check-input[type=checkbox]:indeterminate {
    background-color: #172552;
    border-color: #172552;
}

.form-check.form-switch {
    padding-left: 2.5em;
}

.form-check.form-switch .form-check-input {
    width: 2em;
    height: 1em;
    margin-top: 0.25em;
    margin-left: -2.5em;
}

/* ---------- Typography and container widths as Bootstrap 4 ---------- */

/* Fixed heading sizes: 5.3 scales them with the viewport below 1200px. */
h1, .h1 { font-size: 2.5rem; }
h2, .h2 { font-size: 2rem; }
h3, .h3 { font-size: 1.75rem; }
h4, .h4 { font-size: 1.5rem; }
h5, .h5 { font-size: 1.25rem; }
h6, .h6 { font-size: 1rem; }

.display-1 { font-size: 6rem; font-weight: 300; line-height: 1.2; }
.display-2 { font-size: 5.5rem; font-weight: 300; line-height: 1.2; }
.display-3 { font-size: 4.5rem; font-weight: 300; line-height: 1.2; }
.display-4 { font-size: 3.5rem; font-weight: 300; line-height: 1.2; }

small, .small { font-size: 80%; font-weight: 400; }

/* Bootstrap 5's reboot indents lists 2rem; Bootstrap 4 left the browser's 40px.
   Component lists (.list-unstyled, .nav, .list-group, .breadcrumb, .pagination,
   .dropdown-menu ...) set their own padding with a class, which still wins. */
ol, ul { padding-left: 40px; }

/* No xxl step: containers stop at Bootstrap 4's 1140px. */
@media (min-width: 1400px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        max-width: 1140px;
    }
}

/* ---------- Theme colour variants, Bootstrap 4 values ----------
   Buttons, outline buttons, alert links, list-group items, tables, badges
   (.text-bg-*) and .link-* hovers for all eight theme colours, copied from
   the old build (stock Bootstrap 4.3.1 apart from the navy primary).
   Alerts read the --bs-*-text-emphasis / bg-subtle / border-subtle globals. */

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #172552;
    --bs-btn-border-color: #172552;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0f1834;
    --bs-btn-hover-border-color: #0c132a;
    --bs-btn-focus-shadow-rgb: 58, 70, 108;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0c132a;
    --bs-btn-active-border-color: #090f20;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #172552;
    --bs-btn-disabled-border-color: #172552;
}

.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #6c757d;
    --bs-btn-border-color: #6c757d;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #5a6268;
    --bs-btn-hover-border-color: #545b62;
    --bs-btn-focus-shadow-rgb: 130, 138, 145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #545b62;
    --bs-btn-active-border-color: #4e555b;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #6c757d;
    --bs-btn-disabled-border-color: #6c757d;
}

.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: #28a745;
    --bs-btn-border-color: #28a745;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #218838;
    --bs-btn-hover-border-color: #1e7e34;
    --bs-btn-focus-shadow-rgb: 72, 180, 97;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #1e7e34;
    --bs-btn-active-border-color: #1c7430;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #28a745;
    --bs-btn-disabled-border-color: #28a745;
}

.btn-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: #17a2b8;
    --bs-btn-border-color: #17a2b8;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #138496;
    --bs-btn-hover-border-color: #117a8b;
    --bs-btn-focus-shadow-rgb: 58, 176, 195;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #117a8b;
    --bs-btn-active-border-color: #10707f;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #17a2b8;
    --bs-btn-disabled-border-color: #17a2b8;
}

.btn-warning {
    --bs-btn-color: #212529;
    --bs-btn-bg: #ffc107;
    --bs-btn-border-color: #ffc107;
    --bs-btn-hover-color: #212529;
    --bs-btn-hover-bg: #e0a800;
    --bs-btn-hover-border-color: #d39e00;
    --bs-btn-focus-shadow-rgb: 222, 170, 12;
    --bs-btn-active-color: #212529;
    --bs-btn-active-bg: #d39e00;
    --bs-btn-active-border-color: #c69500;
    --bs-btn-disabled-color: #212529;
    --bs-btn-disabled-bg: #ffc107;
    --bs-btn-disabled-border-color: #ffc107;
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: #dc3545;
    --bs-btn-border-color: #dc3545;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #c82333;
    --bs-btn-hover-border-color: #bd2130;
    --bs-btn-focus-shadow-rgb: 225, 83, 97;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #bd2130;
    --bs-btn-active-border-color: #b21f2d;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #dc3545;
    --bs-btn-disabled-border-color: #dc3545;
}

.btn-light {
    --bs-btn-color: #212529;
    --bs-btn-bg: #f8f9fa;
    --bs-btn-border-color: #f8f9fa;
    --bs-btn-hover-color: #212529;
    --bs-btn-hover-bg: #e2e6ea;
    --bs-btn-hover-border-color: #dae0e5;
    --bs-btn-focus-shadow-rgb: 216, 217, 219;
    --bs-btn-active-color: #212529;
    --bs-btn-active-bg: #dae0e5;
    --bs-btn-active-border-color: #d3d9df;
    --bs-btn-disabled-color: #212529;
    --bs-btn-disabled-bg: #f8f9fa;
    --bs-btn-disabled-border-color: #f8f9fa;
}

.btn-dark {
    --bs-btn-color: #fff;
    --bs-btn-bg: #343a40;
    --bs-btn-border-color: #343a40;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #23272b;
    --bs-btn-hover-border-color: #1d2124;
    --bs-btn-focus-shadow-rgb: 82, 88, 93;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #1d2124;
    --bs-btn-active-border-color: #171a1d;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #343a40;
    --bs-btn-disabled-border-color: #343a40;
}

.btn-outline-primary {
    --bs-btn-color: #172552;
    --bs-btn-border-color: #172552;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #172552;
    --bs-btn-hover-border-color: #172552;
    --bs-btn-focus-shadow-rgb: 23, 37, 82;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #172552;
    --bs-btn-active-border-color: #172552;
    --bs-btn-disabled-color: #172552;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #172552;
}

.btn-outline-secondary {
    --bs-btn-color: #6c757d;
    --bs-btn-border-color: #6c757d;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #6c757d;
    --bs-btn-hover-border-color: #6c757d;
    --bs-btn-focus-shadow-rgb: 108, 117, 125;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #6c757d;
    --bs-btn-active-border-color: #6c757d;
    --bs-btn-disabled-color: #6c757d;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #6c757d;
}

.btn-outline-success {
    --bs-btn-color: #28a745;
    --bs-btn-border-color: #28a745;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #28a745;
    --bs-btn-hover-border-color: #28a745;
    --bs-btn-focus-shadow-rgb: 40, 167, 69;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #28a745;
    --bs-btn-active-border-color: #28a745;
    --bs-btn-disabled-color: #28a745;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #28a745;
}

.btn-outline-info {
    --bs-btn-color: #17a2b8;
    --bs-btn-border-color: #17a2b8;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #17a2b8;
    --bs-btn-hover-border-color: #17a2b8;
    --bs-btn-focus-shadow-rgb: 23, 162, 184;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #17a2b8;
    --bs-btn-active-border-color: #17a2b8;
    --bs-btn-disabled-color: #17a2b8;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #17a2b8;
}

.btn-outline-warning {
    --bs-btn-color: #ffc107;
    --bs-btn-border-color: #ffc107;
    --bs-btn-hover-color: #212529;
    --bs-btn-hover-bg: #ffc107;
    --bs-btn-hover-border-color: #ffc107;
    --bs-btn-focus-shadow-rgb: 255, 193, 7;
    --bs-btn-active-color: #212529;
    --bs-btn-active-bg: #ffc107;
    --bs-btn-active-border-color: #ffc107;
    --bs-btn-disabled-color: #ffc107;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #ffc107;
}

.btn-outline-danger {
    --bs-btn-color: #dc3545;
    --bs-btn-border-color: #dc3545;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #dc3545;
    --bs-btn-hover-border-color: #dc3545;
    --bs-btn-focus-shadow-rgb: 220, 53, 69;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #dc3545;
    --bs-btn-active-border-color: #dc3545;
    --bs-btn-disabled-color: #dc3545;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #dc3545;
}

.btn-outline-light {
    --bs-btn-color: #f8f9fa;
    --bs-btn-border-color: #f8f9fa;
    --bs-btn-hover-color: #212529;
    --bs-btn-hover-bg: #f8f9fa;
    --bs-btn-hover-border-color: #f8f9fa;
    --bs-btn-focus-shadow-rgb: 248, 249, 250;
    --bs-btn-active-color: #212529;
    --bs-btn-active-bg: #f8f9fa;
    --bs-btn-active-border-color: #f8f9fa;
    --bs-btn-disabled-color: #f8f9fa;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #f8f9fa;
}

.btn-outline-dark {
    --bs-btn-color: #343a40;
    --bs-btn-border-color: #343a40;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #343a40;
    --bs-btn-hover-border-color: #343a40;
    --bs-btn-focus-shadow-rgb: 52, 58, 64;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #343a40;
    --bs-btn-active-border-color: #343a40;
    --bs-btn-disabled-color: #343a40;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #343a40;
}

.alert-primary {
    --bs-alert-link-color: #010103;
}

.alert-secondary {
    --bs-alert-link-color: #202326;
}

.alert-success {
    --bs-alert-link-color: #0b2e13;
}

.alert-info {
    --bs-alert-link-color: #062c33;
}

.alert-warning {
    --bs-alert-link-color: #533f03;
}

.alert-danger {
    --bs-alert-link-color: #491217;
}

.alert-light {
    --bs-alert-link-color: #686868;
}

.alert-dark {
    --bs-alert-link-color: #040505;
}

.list-group-item-primary {
    --bs-list-group-color: #0c132b;
    --bs-list-group-bg: #bec2cf;
    --bs-list-group-border-color: rgba(0, 0, 0, 0.125);
    --bs-list-group-action-hover-color: #0c132b;
    --bs-list-group-action-hover-bg: #afb4c4;
    --bs-list-group-action-active-color: #0c132b;
    --bs-list-group-action-active-bg: #afb4c4;
    --bs-list-group-active-color: #fff;
    --bs-list-group-active-bg: #0c132b;
    --bs-list-group-active-border-color: #0c132b;
}

.list-group-item-secondary {
    --bs-list-group-color: #383d41;
    --bs-list-group-bg: #d6d8db;
    --bs-list-group-border-color: rgba(0, 0, 0, 0.125);
    --bs-list-group-action-hover-color: #383d41;
    --bs-list-group-action-hover-bg: #c8cbcf;
    --bs-list-group-action-active-color: #383d41;
    --bs-list-group-action-active-bg: #c8cbcf;
    --bs-list-group-active-color: #fff;
    --bs-list-group-active-bg: #383d41;
    --bs-list-group-active-border-color: #383d41;
}

.list-group-item-success {
    --bs-list-group-color: #155724;
    --bs-list-group-bg: #c3e6cb;
    --bs-list-group-border-color: rgba(0, 0, 0, 0.125);
    --bs-list-group-action-hover-color: #155724;
    --bs-list-group-action-hover-bg: #b1dfbb;
    --bs-list-group-action-active-color: #155724;
    --bs-list-group-action-active-bg: #b1dfbb;
    --bs-list-group-active-color: #fff;
    --bs-list-group-active-bg: #155724;
    --bs-list-group-active-border-color: #155724;
}

.list-group-item-info {
    --bs-list-group-color: #0c5460;
    --bs-list-group-bg: #bee5eb;
    --bs-list-group-border-color: rgba(0, 0, 0, 0.125);
    --bs-list-group-action-hover-color: #0c5460;
    --bs-list-group-action-hover-bg: #abdde5;
    --bs-list-group-action-active-color: #0c5460;
    --bs-list-group-action-active-bg: #abdde5;
    --bs-list-group-active-color: #fff;
    --bs-list-group-active-bg: #0c5460;
    --bs-list-group-active-border-color: #0c5460;
}

.list-group-item-warning {
    --bs-list-group-color: #856404;
    --bs-list-group-bg: #ffeeba;
    --bs-list-group-border-color: rgba(0, 0, 0, 0.125);
    --bs-list-group-action-hover-color: #856404;
    --bs-list-group-action-hover-bg: #ffe8a1;
    --bs-list-group-action-active-color: #856404;
    --bs-list-group-action-active-bg: #ffe8a1;
    --bs-list-group-active-color: #fff;
    --bs-list-group-active-bg: #856404;
    --bs-list-group-active-border-color: #856404;
}

.list-group-item-danger {
    --bs-list-group-color: #721c24;
    --bs-list-group-bg: #f5c6cb;
    --bs-list-group-border-color: rgba(0, 0, 0, 0.125);
    --bs-list-group-action-hover-color: #721c24;
    --bs-list-group-action-hover-bg: #f1b0b7;
    --bs-list-group-action-active-color: #721c24;
    --bs-list-group-action-active-bg: #f1b0b7;
    --bs-list-group-active-color: #fff;
    --bs-list-group-active-bg: #721c24;
    --bs-list-group-active-border-color: #721c24;
}

.list-group-item-light {
    --bs-list-group-color: #818182;
    --bs-list-group-bg: #fdfdfe;
    --bs-list-group-border-color: rgba(0, 0, 0, 0.125);
    --bs-list-group-action-hover-color: #818182;
    --bs-list-group-action-hover-bg: #ececf6;
    --bs-list-group-action-active-color: #818182;
    --bs-list-group-action-active-bg: #ececf6;
    --bs-list-group-active-color: #fff;
    --bs-list-group-active-bg: #818182;
    --bs-list-group-active-border-color: #818182;
}

.list-group-item-dark {
    --bs-list-group-color: #1b1e21;
    --bs-list-group-bg: #c6c8ca;
    --bs-list-group-border-color: rgba(0, 0, 0, 0.125);
    --bs-list-group-action-hover-color: #1b1e21;
    --bs-list-group-action-hover-bg: #b9bbbe;
    --bs-list-group-action-active-color: #1b1e21;
    --bs-list-group-action-active-bg: #b9bbbe;
    --bs-list-group-active-color: #fff;
    --bs-list-group-active-bg: #1b1e21;
    --bs-list-group-active-border-color: #1b1e21;
}

.table-primary {
    --bs-table-color: #212529;
    --bs-table-bg: #bec2cf;
    --bs-table-border-color: #868ea5;
    --bs-table-striped-bg: #b4b8c5;
    --bs-table-striped-color: #212529;
    --bs-table-active-bg: #abafba;
    --bs-table-active-color: #212529;
    --bs-table-hover-bg: #afb4c4;
    --bs-table-hover-color: #212529;
}

.table-secondary {
    --bs-table-color: #212529;
    --bs-table-bg: #d6d8db;
    --bs-table-border-color: #b3b7bb;
    --bs-table-striped-bg: #cbcdd0;
    --bs-table-striped-color: #212529;
    --bs-table-active-bg: #c1c2c5;
    --bs-table-active-color: #212529;
    --bs-table-hover-bg: #c8cbcf;
    --bs-table-hover-color: #212529;
}

.table-success {
    --bs-table-color: #212529;
    --bs-table-bg: #c3e6cb;
    --bs-table-border-color: #8fd19e;
    --bs-table-striped-bg: #b9dac1;
    --bs-table-striped-color: #212529;
    --bs-table-active-bg: #b0cfb7;
    --bs-table-active-color: #212529;
    --bs-table-hover-bg: #b1dfbb;
    --bs-table-hover-color: #212529;
}

.table-info {
    --bs-table-color: #212529;
    --bs-table-bg: #bee5eb;
    --bs-table-border-color: #86cfda;
    --bs-table-striped-bg: #b4dadf;
    --bs-table-striped-color: #212529;
    --bs-table-active-bg: #abced4;
    --bs-table-active-color: #212529;
    --bs-table-hover-bg: #abdde5;
    --bs-table-hover-color: #212529;
}

.table-warning {
    --bs-table-color: #212529;
    --bs-table-bg: #ffeeba;
    --bs-table-border-color: #ffdf7e;
    --bs-table-striped-bg: #f2e2b1;
    --bs-table-striped-color: #212529;
    --bs-table-active-bg: #e6d6a7;
    --bs-table-active-color: #212529;
    --bs-table-hover-bg: #ffe8a1;
    --bs-table-hover-color: #212529;
}

.table-danger {
    --bs-table-color: #212529;
    --bs-table-bg: #f5c6cb;
    --bs-table-border-color: #ed969e;
    --bs-table-striped-bg: #e9bcc1;
    --bs-table-striped-color: #212529;
    --bs-table-active-bg: #dcb2b7;
    --bs-table-active-color: #212529;
    --bs-table-hover-bg: #f1b0b7;
    --bs-table-hover-color: #212529;
}

.table-light {
    --bs-table-color: #212529;
    --bs-table-bg: #fdfdfe;
    --bs-table-border-color: #fbfcfc;
    --bs-table-striped-bg: #f0f0f1;
    --bs-table-striped-color: #212529;
    --bs-table-active-bg: #e4e4e5;
    --bs-table-active-color: #212529;
    --bs-table-hover-bg: #ececf6;
    --bs-table-hover-color: #212529;
}

.table-dark {
    --bs-table-color: #fff;
    --bs-table-bg: #343a40;
    --bs-table-border-color: #454d55;
    --bs-table-striped-bg: #3a4047;
    --bs-table-striped-color: #fff;
    --bs-table-active-bg: #424850;
    --bs-table-active-color: #fff;
    --bs-table-hover-bg: #3f454c;
    --bs-table-hover-color: #fff;
}

.text-bg-primary {
    color: #fff !important;
}

.text-bg-secondary {
    color: #fff !important;
}

.text-bg-success {
    color: #fff !important;
}

.text-bg-info {
    color: #fff !important;
}

.text-bg-warning {
    color: #212529 !important;
}

.text-bg-danger {
    color: #fff !important;
}

.text-bg-light {
    color: #212529 !important;
}

.text-bg-dark {
    color: #fff !important;
}

.link-primary:hover,
.link-primary:focus {
    color: RGBA(6, 10, 22, var(--bs-link-opacity, 1)) !important;
    text-decoration-color: RGBA(6, 10, 22, var(--bs-link-underline-opacity, 1)) !important;
}

.link-secondary:hover,
.link-secondary:focus {
    color: RGBA(73, 79, 84, var(--bs-link-opacity, 1)) !important;
    text-decoration-color: RGBA(73, 79, 84, var(--bs-link-underline-opacity, 1)) !important;
}

.link-success:hover,
.link-success:focus {
    color: RGBA(25, 105, 44, var(--bs-link-opacity, 1)) !important;
    text-decoration-color: RGBA(25, 105, 44, var(--bs-link-underline-opacity, 1)) !important;
}

.link-info:hover,
.link-info:focus {
    color: RGBA(15, 102, 116, var(--bs-link-opacity, 1)) !important;
    text-decoration-color: RGBA(15, 102, 116, var(--bs-link-underline-opacity, 1)) !important;
}

.link-warning:hover,
.link-warning:focus {
    color: RGBA(186, 139, 0, var(--bs-link-opacity, 1)) !important;
    text-decoration-color: RGBA(186, 139, 0, var(--bs-link-underline-opacity, 1)) !important;
}

.link-danger:hover,
.link-danger:focus {
    color: RGBA(167, 29, 42, var(--bs-link-opacity, 1)) !important;
    text-decoration-color: RGBA(167, 29, 42, var(--bs-link-underline-opacity, 1)) !important;
}

.link-light:hover,
.link-light:focus {
    color: RGBA(203, 211, 218, var(--bs-link-opacity, 1)) !important;
    text-decoration-color: RGBA(203, 211, 218, var(--bs-link-underline-opacity, 1)) !important;
}

.link-dark:hover,
.link-dark:focus {
    color: RGBA(18, 20, 22, var(--bs-link-opacity, 1)) !important;
    text-decoration-color: RGBA(18, 20, 22, var(--bs-link-underline-opacity, 1)) !important;
}

/* Current page and open dropdown in the navbar. Templates mark the current page with
   <li class="nav-item active">; Bootstrap 4 painted its link white, Bootstrap 5 only
   styles .nav-link.active, so restore it (BS4 also did this for .show > .nav-link). */
.navbar-nav .nav-item.active > .nav-link,
.navbar-nav .nav-item.show > .nav-link {
    color: var(--bs-navbar-active-color);
}