/*
 * css/bootstrap-legacy.css: Bootstrap 3 compatibility layer on top of Bootstrap 5.3.8.
 *
 * Loaded by every public theme layout, the course engine and the error pages, right after
 * jscripts/bootstrap/5.3.8/css/bootstrap.min.css and before newmain.css and the theme stylesheet.
 *
 * The public site was designed on Bootstrap 3 and never set its own base metrics, so this file
 * has two jobs:
 *   1. Parity. It pins Bootstrap 3's base metrics (14px body, BS3 headings, 750/970/1170 containers,
 *      30px gutters, links without underline, BS3 form, button, alert and navbar metrics and colors)
 *      so pages render as they did. Theme stylesheets load after it and still win.
 *   2. Legacy classes. It defines the Bootstrap 3 class names that stay in use, either on purpose
 *      (hidden-* and visible-*, radio/checkbox(-inline), form-group, well, btn-default, btn-xs: see the
 *      note on each) or inside HTML stored in the database (classroom notes, course abstracts,
 *      catalog messages, custom pages) that no code change can convert: col-xs-*, the offsets,
 *      pull-*, img-responsive, glyphicon-*, panel-*, label-*, table-condensed, btn-block, text-left.
 *
 * Values are Bootstrap 3.4.1's (MIT, Twitter Inc.). Remove a block only when every use of its
 * classes is gone, including the database content.
 */

/* 1. Base metrics ------------------------------------------------------------------------ */

/* Bootstrap 3 set the root font size to 10px and every theme stylesheet was written in rem on
   that assumption (2rem = 20px). Bootstrap 5 leaves the browser default (16px), which would
   scale every rem value by 1.6. Keep the root the pages were built on; the Bootstrap 5
   components that size themselves in rem are pinned in px in section 7b. */
html {
    font-size: 10px;
}

:root {
    --bs-body-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --bs-body-font-size: 14px;
    --bs-body-line-height: 1.42857143;
    --bs-body-color: #333;
    --bs-link-color: #337ab7;
    --bs-link-color-rgb: 51, 122, 183;
    --bs-link-hover-color: #23527c;
    --bs-link-hover-color-rgb: 35, 82, 124;
}

a {
    text-decoration: none;
}
a:hover,
a:focus {
    text-decoration: underline;
}
/* ...but not on the elements Bootstrap 3 kept plain on hover. */
a.btn:hover, a.btn:focus,
a.nav-link:hover, a.nav-link:focus,
a.navbar-brand:hover, a.navbar-brand:focus,
a.dropdown-item:hover, a.dropdown-item:focus,
a.page-link:hover, a.page-link:focus,
a.list-group-item:hover, a.list-group-item:focus,
a.badge:hover, a.badge:focus {
    text-decoration: none;
}
/* Bootstrap 5 turns href-less, class-less anchors (FAQ toggles) black; Bootstrap 3 coloured them. */
a:not([href]):not([class]) {
    color: rgba(var(--bs-link-color-rgb), 1);
    cursor: pointer;
}
a:not([href]):not([class]):hover,
a:not([href]):not([class]):focus {
    color: rgba(var(--bs-link-hover-color-rgb), 1);
    text-decoration: underline;
}
b,
strong {
    font-weight: 700;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}
h1, .h1, h2, .h2, h3, .h3 {
    margin-top: 20px;
    margin-bottom: 10px;
}
h4, .h4, h5, .h5, h6, .h6 {
    margin-top: 10px;
    margin-bottom: 10px;
}
h1, .h1 { font-size: 36px; }
h2, .h2 { font-size: 30px; }
h3, .h3 { font-size: 24px; }
h4, .h4 { font-size: 18px; }
h5, .h5 { font-size: 14px; }
h6, .h6 { font-size: 12px; }

p {
    margin: 0 0 10px;
}
.lead {
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.4;
}
@media (min-width: 768px) {
    .lead {
        font-size: 21px;
    }
}
small,
.small {
    font-size: 85%;
}
.text-muted {
    color: #777 !important;
}

/* The public reset (css/reset.css, Blueprint) indents lists 3.333em; Bootstrap 3 never touched
   the indent, Bootstrap 5's reboot sets 2rem. Keep the indent the pages were built with. */
ul,
ol {
    margin-top: 0;
    margin-bottom: 10px;
    padding-left: 3.333em;
}
ul ul, ol ul, ul ol, ol ol {
    margin-bottom: 0;
}
dl {
    margin-top: 0;
    margin-bottom: 20px;
}
dt,
dd {
    line-height: 1.42857143;
}
dd {
    margin-left: 0;
    margin-bottom: 0;
}
hr {
    margin: 20px 0;
    border: 0;
    border-top: 1px solid #eee;
    opacity: 1;
}
blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
}
address {
    margin-bottom: 20px;
    font-style: normal;
    line-height: 1.42857143;
}
legend {
    display: block;
    float: none;
    width: 100%;
    padding: 0;
    margin-bottom: 20px;
    font-size: 21px;
    line-height: inherit;
    color: #333;
    border: 0;
    border-bottom: 1px solid #e5e5e5;
}
legend + * {
    clear: none;
}
label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}
th {
    text-align: left;
}
input[type="radio"],
input[type="checkbox"] {
    margin: 4px 0 0;
    line-height: normal;
}

/* 2. Layout: Bootstrap 3 container widths and 30px gutters -------------------------------- */

.container,
.container-fluid,
.row {
    --bs-gutter-x: 30px;
}
/* Bootstrap 3 clearfix on containers: keeps a first child's top margin from collapsing through. */
.container::before,
.container::after,
.container-fluid::before,
.container-fluid::after {
    display: table;
    content: " ";
}
.container::after,
.container-fluid::after {
    clear: both;
}
/* ...but never inside a navbar, whose container is a flex row (they would become flex items and
   push the brand to the middle). A theme that turns a navbar container back into a float layout adds
   its own ::after clearfix (later in the cascade, so it wins). */
.navbar > .container::before,
.navbar > .container::after,
.navbar > .container-fluid::before,
.navbar > .container-fluid::after {
    content: none;
}
/* Bootstrap 3 columns were position: relative (absolutely positioned children anchor to them). */
.row > * {
    position: relative;
}
@media (min-width: 576px) and (max-width: 767.98px) {
    .container {
        max-width: none;
    }
}
@media (min-width: 768px) {
    .container {
        max-width: 750px;
    }
}
@media (min-width: 992px) {
    .container {
        max-width: 970px;
    }
}
@media (min-width: 1200px) {
    .container {
        max-width: 1170px;
    }
}

/* 3. Buttons: Bootstrap 3 metrics and colors; .btn-default and .btn-xs as regular variants ---
   .btn-default is the site's plain white button (used by 150+ views and restyled per theme);
   Bootstrap 5 has no equivalent look, so it stays a first-class variant. */

.btn {
    --bs-btn-padding-x: 12px;
    --bs-btn-padding-y: 6px;
    --bs-btn-font-size: 14px;
    --bs-btn-line-height: 1.42857143;
    --bs-btn-font-weight: 400;
    --bs-btn-border-radius: 4px;
}
.btn-lg,
.btn-group-lg > .btn {
    --bs-btn-padding-x: 16px;
    --bs-btn-padding-y: 10px;
    --bs-btn-font-size: 18px;
    --bs-btn-line-height: 1.3333333;
    --bs-btn-border-radius: 6px;
}
.btn-sm,
.btn-group-sm > .btn {
    --bs-btn-padding-x: 10px;
    --bs-btn-padding-y: 5px;
    --bs-btn-font-size: 12px;
    --bs-btn-line-height: 1.5;
    --bs-btn-border-radius: 3px;
}
.btn-xs,
.btn-group-xs > .btn {
    --bs-btn-padding-x: 5px;
    --bs-btn-padding-y: 1px;
    --bs-btn-font-size: 12px;
    --bs-btn-line-height: 1.5;
    --bs-btn-border-radius: 3px;
}
.btn-default {
    --bs-btn-color: #333;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #ccc;
    --bs-btn-hover-color: #333;
    --bs-btn-hover-bg: #e6e6e6;
    --bs-btn-hover-border-color: #adadad;
    --bs-btn-focus-shadow-rgb: 140, 140, 140;
    --bs-btn-active-color: #333;
    --bs-btn-active-bg: #d4d4d4;
    --bs-btn-active-border-color: #8c8c8c;
    --bs-btn-disabled-color: #333;
    --bs-btn-disabled-bg: #fff;
    --bs-btn-disabled-border-color: #ccc;
}
.btn-primary {
    --bs-btn-bg: #337ab7;
    --bs-btn-border-color: #2e6da4;
    --bs-btn-hover-bg: #286090;
    --bs-btn-hover-border-color: #204d74;
    --bs-btn-focus-shadow-rgb: 82, 143, 197;
    --bs-btn-active-bg: #204d74;
    --bs-btn-active-border-color: #122b40;
    --bs-btn-disabled-bg: #337ab7;
    --bs-btn-disabled-border-color: #2e6da4;
}
.btn-success {
    --bs-btn-bg: #5cb85c;
    --bs-btn-border-color: #4cae4c;
    --bs-btn-hover-bg: #449d44;
    --bs-btn-hover-border-color: #398439;
    --bs-btn-focus-shadow-rgb: 116, 195, 116;
    --bs-btn-active-bg: #398439;
    --bs-btn-active-border-color: #255625;
    --bs-btn-disabled-bg: #5cb85c;
    --bs-btn-disabled-border-color: #4cae4c;
}
.btn-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: #5bc0de;
    --bs-btn-border-color: #46b8da;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #31b0d5;
    --bs-btn-hover-border-color: #269abc;
    --bs-btn-focus-shadow-rgb: 116, 200, 226;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #269abc;
    --bs-btn-active-border-color: #1b6d85;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #5bc0de;
    --bs-btn-disabled-border-color: #46b8da;
}
.btn-warning {
    --bs-btn-color: #fff;
    --bs-btn-bg: #f0ad4e;
    --bs-btn-border-color: #eea236;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #ec971f;
    --bs-btn-hover-border-color: #d58512;
    --bs-btn-focus-shadow-rgb: 240, 173, 78;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #d58512;
    --bs-btn-active-border-color: #985f0d;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #f0ad4e;
    --bs-btn-disabled-border-color: #eea236;
}
.btn-danger {
    --bs-btn-bg: #d9534f;
    --bs-btn-border-color: #d43f3a;
    --bs-btn-hover-bg: #c9302c;
    --bs-btn-hover-border-color: #ac2925;
    --bs-btn-focus-shadow-rgb: 225, 108, 105;
    --bs-btn-active-bg: #ac2925;
    --bs-btn-active-border-color: #761c19;
    --bs-btn-disabled-bg: #d9534f;
    --bs-btn-disabled-border-color: #d43f3a;
}
.btn-link {
    --bs-btn-color: #337ab7;
    --bs-btn-hover-color: #23527c;
}
.btn-block {
    display: block;
    width: 100%;
}
.btn-block + .btn-block {
    margin-top: 5px;
}

/* 4. Forms ------------------------------------------------------------------------------- */

.form-control {
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
textarea.form-control,
select[multiple].form-control,
select[size].form-control {
    height: auto;
}
/* Bootstrap 5 strips the native arrow from any .form-control; the site's selects keep it. */
select.form-control {
    -webkit-appearance: menulist;
    appearance: auto;
}
.form-control:focus {
    border-color: #66afe9;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}
.form-control::placeholder {
    color: #999;
}
.form-control-sm,
.input-sm {
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}
.form-control-lg,
.input-lg {
    height: 46px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px;
}
/* .form-group stays: it is the site's field wrapper (700 uses) and DB content uses it too. */
.form-group {
    margin-bottom: 15px;
}
.form-horizontal .control-label {
    padding-top: 7px;
    margin-bottom: 0;
}
@media (min-width: 768px) {
    .form-horizontal .control-label {
        text-align: right;
    }
}
.help-block {
    display: block;
    margin-top: 5px;
    margin-bottom: 10px;
    color: #737373;
}
.form-control-static {
    min-height: 34px;
    padding-top: 7px;
    padding-bottom: 7px;
    margin-bottom: 0;
}
.input-group-addon {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #555;
    text-align: center;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
}
/* .radio / .checkbox / .radio-inline / .checkbox-inline stay: Bootstrap 5's form-check restyles
   the native controls, and the site's forms were built around the native look. */
.radio,
.checkbox {
    position: relative;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
}
.radio label,
.checkbox label {
    min-height: 20px;
    padding-left: 20px;
    margin-bottom: 0;
    font-weight: 400;
    cursor: pointer;
}
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
    position: absolute;
    margin-left: -20px;
}
.radio + .radio,
.checkbox + .checkbox {
    margin-top: -5px;
}
.radio-inline,
.checkbox-inline {
    position: relative;
    display: inline-block;
    padding-left: 20px;
    margin-bottom: 0;
    font-weight: 400;
    vertical-align: middle;
    cursor: pointer;
}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
    margin-top: 0;
    margin-left: 10px;
}
.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline {
    color: #a94442;
}
.has-error .form-control {
    border-color: #a94442;
}

/* 5. Tables ------------------------------------------------------------------------------ */

/* Bootstrap 3 tables: transparent cells, inherited text colour, #ddd rules, BS3 stripe/hover/contextual tints.
   (Bootstrap 5 paints every cell with the body background and emphasis colour, which also hid theme
   rules like `table thead th { background: #ddd }` written at element specificity.) */
.table {
    --bs-table-bg: transparent;
    --bs-table-border-color: #ddd;
    --bs-table-striped-bg: #f9f9f9;
    --bs-table-hover-bg: #f5f5f5;
    --bs-table-active-bg: #f5f5f5;
    margin-bottom: 20px;
    color: inherit;
}
.table > :not(caption) > * > * {
    color: inherit;
}
.table > :not(caption) > .active > *,
.table > :not(caption) > * > .active { background-color: #f5f5f5; }
.table > :not(caption) > .success > *,
.table > :not(caption) > * > .success { background-color: #dff0d8; }
.table > :not(caption) > .info > *,
.table > :not(caption) > * > .info { background-color: #d9edf7; }
.table > :not(caption) > .warning > *,
.table > :not(caption) > * > .warning { background-color: #fcf8e3; }
.table > :not(caption) > .danger > *,
.table > :not(caption) > * > .danger { background-color: #f2dede; }
.table > :not(caption) > * > * {
    padding: 8px;
    line-height: 1.42857143;
}
.table-condensed > :not(caption) > * > *,
.table-sm > :not(caption) > * > * {
    padding: 5px;
}

/* 6. Alerts: Bootstrap 3 metrics and colors ----------------------------------------------- */

.alert {
    --bs-alert-padding-x: 15px;
    --bs-alert-padding-y: 15px;
    --bs-alert-margin-bottom: 20px;
    --bs-alert-border-radius: 4px;
}
.alert-success {
    --bs-alert-color: #3c763d;
    --bs-alert-bg: #dff0d8;
    --bs-alert-border-color: #d6e9c6;
    --bs-alert-link-color: #2b542c;
}
.alert-info {
    --bs-alert-color: #31708f;
    --bs-alert-bg: #d9edf7;
    --bs-alert-border-color: #bce8f1;
    --bs-alert-link-color: #245269;
}
.alert-warning {
    --bs-alert-color: #8a6d3b;
    --bs-alert-bg: #fcf8e3;
    --bs-alert-border-color: #faebcc;
    --bs-alert-link-color: #66512c;
}
.alert-danger {
    --bs-alert-color: #a94442;
    --bs-alert-bg: #f2dede;
    --bs-alert-border-color: #ebccd1;
    --bs-alert-link-color: #843534;
}
/* Bootstrap 3 alert internals: no bottom margin on p/ul, 5px between paragraphs, bold headings inherit. */
.alert > p,
.alert > ul {
    margin-bottom: 0;
}
.alert > p + p {
    margin-top: 5px;
}
.alert h4 {
    margin-top: 0;
    color: inherit;
}

/* Bootstrap 3 painted a contextual class on its own (views toggle .alert-info as a row highlight). */
.alert-success,
.alert-info,
.alert-warning,
.alert-danger {
    color: var(--bs-alert-color);
    background-color: var(--bs-alert-bg);
    border-color: var(--bs-alert-border-color);
}
/* Bootstrap 3 contextual backgrounds were pale tints, not the solid Bootstrap 5 fills. */
.bg-primary { color: #fff; background-color: #337ab7 !important; }
.bg-success { background-color: #dff0d8 !important; }
.bg-info { background-color: #d9edf7 !important; }
.bg-warning { background-color: #fcf8e3 !important; }
.bg-danger { background-color: #f2dede !important; }

/* 7. Navbar: Bootstrap 3 metrics for the converted Bootstrap 5 navbars ---------------------
   .navbar-default and .navbar-inverse stay as theme hooks (every theme stylesheet targets them). */

.navbar {
    --bs-navbar-padding-x: 0;
    --bs-navbar-padding-y: 0;
    min-height: 50px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}
.navbar.fixed-top,
.navbar.sticky-top {
    margin-bottom: 0;
    border-width: 0 0 1px;
    border-radius: 0;
}
.navbar-default {
    --bs-navbar-color: #777;
    --bs-navbar-hover-color: #333;
    --bs-navbar-active-color: #555;
    --bs-navbar-brand-color: #777;
    --bs-navbar-brand-hover-color: #5e5e5e;
    background-color: #f8f8f8;
    border-color: #e7e7e7;
}
.navbar-default .navbar-nav .nav-link.active {
    color: #555;
    background-color: #e7e7e7;
}
.navbar-inverse {
    --bs-navbar-color: #9d9d9d;
    --bs-navbar-hover-color: #fff;
    --bs-navbar-active-color: #fff;
    --bs-navbar-brand-color: #9d9d9d;
    --bs-navbar-brand-hover-color: #fff;
    background-color: #222;
    border-color: #080808;
}
.navbar-inverse .navbar-nav .nav-link.active {
    color: #fff;
    background-color: #080808;
}
/* Same specificity as Bootstrap 3 had, so theme .navbar-brand rules still win by source order. */
.navbar-brand {
    height: 50px;
    padding: 15px;
    margin-right: 0;
    font-size: 18px;
    line-height: 20px;
}
/* Bootstrap 3 icon-bar stack: 22px wide, 14px tall (three 2px bars, 4px gaps). */
.navbar .navbar-toggler-icon {
    width: 22px;
    height: 14px;
}
.navbar .navbar-nav .nav-link {
    padding: 10px 15px;
    line-height: 20px;
}
.navbar .navbar-toggler {
    margin: 8px 15px 8px 0;
    padding: 9px 10px;
    border-radius: 4px;
}
@media (min-width: 768px) {
    .navbar .navbar-nav .nav-link {
        padding-top: 15px;
        padding-bottom: 15px;
    }
    /* Bootstrap 3 reset the list margin here; css/reset.css gives every ul a 1.5em right margin. */
    .navbar .navbar-nav {
        margin: 0;
    }
    .navbar > .container .navbar-brand,
    .navbar > .container-fluid .navbar-brand {
        margin-left: -15px;
    }
}
@media (max-width: 767.98px) {
    .navbar .navbar-collapse {
        padding-right: 15px;
        padding-left: 15px;
        border-top: 1px solid transparent;
    }
    .navbar-default .navbar-collapse {
        border-color: #e7e7e7;
    }
    .navbar-inverse .navbar-collapse {
        border-color: #101010;
    }
    .navbar .navbar-nav {
        margin: 7.5px -15px;
    }
    /* Bootstrap 3 pulled the brand and toggle 15px out to the container edge (.navbar-header margin). */
    .navbar > .container .navbar-brand,
    .navbar > .container-fluid .navbar-brand {
        margin-left: -15px;
    }
    .navbar > .container .navbar-toggler,
    .navbar > .container-fluid .navbar-toggler {
        margin-right: 0;
    }
    /* A fixed navbar's open menu scrolled inside 340px instead of growing past the viewport. */
    .navbar.fixed-top .navbar-collapse,
    .navbar.sticky-top .navbar-collapse {
        max-height: 340px;
        overflow-y: auto;
    }
    /* Dropdowns inside the collapsed menu were flat lists, not floating boxes. */
    .navbar-nav .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        margin-top: 0;
        background-color: transparent;
        border: 0;
        box-shadow: none;
    }
    .navbar-nav .dropdown-menu .dropdown-item,
    .navbar-nav .dropdown-menu > li > a {
        padding: 5px 15px 5px 25px;
        line-height: 20px;
    }
    /* Responsive tables scrolled sideways rather than wrapping cell text. */
    .table-responsive > .table > :not(caption) > * > * {
        white-space: nowrap;
    }
}

/* Plain .nav lists (tabs, pills, stacked menus): Bootstrap 3 link metrics and hover; BS3 active colors.
   :where() keeps these at Bootstrap 3's low specificity so theme rules written against `li a` still win. */
:where(.nav) .nav-link {
    padding: 10px 15px;
}
:where(.nav .nav-link:hover, .nav .nav-link:focus) {
    text-decoration: none;
    background-color: #eee;
}
.nav-tabs {
    --bs-nav-tabs-border-color: #ddd;
    --bs-nav-tabs-link-hover-border-color: #eee #eee #ddd;
    --bs-nav-tabs-link-active-color: #555;
    --bs-nav-tabs-link-active-bg: #fff;
    --bs-nav-tabs-link-active-border-color: #ddd #ddd #fff;
}
.nav-tabs .nav-link {
    margin-right: 2px;
    border-radius: 4px 4px 0 0;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-link.active:hover,
.nav-tabs .nav-link.active:focus {
    background-color: #fff;
}
.nav-pills {
    --bs-nav-pills-border-radius: 4px;
    --bs-nav-pills-link-active-bg: #337ab7;
}
:where(.nav-justified) .nav-link {
    margin-bottom: 5px;
    text-align: center;
}
/* reset.css gives every ul a right margin; Bootstrap 3 made the justified bar full width. */
.nav-justified {
    margin-right: 0;
}
@media (max-width: 767.98px) {
    .nav-justified {
        flex-direction: column;
    }
    .nav-justified .nav-item,
    .nav-justified > .nav-link {
        flex-basis: auto;
    }
}
@media (min-width: 768px) {
    :where(.nav-justified) .nav-link {
        margin-bottom: 0;
    }
    /* Bootstrap 3 sized the cells to their content and shared the rest; BS5 makes them equal. */
    .nav-justified .nav-item,
    .nav-justified > .nav-link {
        flex-basis: auto;
    }
}

/* 7b. Bootstrap 5 components that size themselves in rem, pinned to Bootstrap 3 metrics ---- */

.dropdown-menu {
    --bs-dropdown-min-width: 160px;
    --bs-dropdown-padding-y: 5px;
    --bs-dropdown-font-size: 14px;
    --bs-dropdown-border-radius: 4px;
    --bs-dropdown-border-color: rgba(0, 0, 0, .15);
    --bs-dropdown-item-padding-x: 20px;
    --bs-dropdown-item-padding-y: 3px;
    --bs-dropdown-link-color: #333;
    --bs-dropdown-link-hover-color: #262626;
    --bs-dropdown-link-hover-bg: #f5f5f5;
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: #337ab7;
    --bs-dropdown-divider-margin-y: 9px;
    --bs-dropdown-divider-bg: #e5e5e5;
    --bs-dropdown-header-padding-x: 20px;
    --bs-dropdown-header-padding-y: 3px;
    margin-top: 2px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.modal {
    --bs-modal-width: 600px;
    --bs-modal-padding: 15px;
    --bs-modal-margin: 10px;
    --bs-modal-border-radius: 6px;
    --bs-modal-inner-border-radius: 5px;
    --bs-modal-header-padding: 15px;
    --bs-modal-header-border-color: #e5e5e5;
    --bs-modal-footer-border-color: #e5e5e5;
    --bs-modal-footer-gap: 5px;
    --bs-modal-title-line-height: 1.42857143;
}
.modal-footer {
    padding: 15px;
}
@media (min-width: 576px) and (max-width: 767.98px) {
    .modal-dialog {
        max-width: none;
        margin: 10px;
    }
}
@media (min-width: 768px) {
    .modal-dialog {
        margin: 30px auto;
    }
}
/* converted panels */
.card {
    --bs-card-spacer-y: 15px;
    --bs-card-spacer-x: 15px;
    --bs-card-title-spacer-y: 0;
    --bs-card-border-color: #ddd;
    --bs-card-border-radius: 4px;
    --bs-card-inner-border-radius: 3px;
    --bs-card-cap-padding-y: 10px;
    --bs-card-cap-padding-x: 15px;
    --bs-card-cap-bg: #f5f5f5;
    margin-bottom: 20px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.card-title {
    font-size: 16px;
}
.accordion {
    --bs-accordion-btn-padding-x: 15px;
    --bs-accordion-btn-padding-y: 10px;
    --bs-accordion-body-padding-x: 15px;
    --bs-accordion-body-padding-y: 15px;
    --bs-accordion-border-radius: 4px;
    --bs-accordion-inner-border-radius: 3px;
}
.input-group-text {
    padding: 6px 12px;
    font-size: 14px;
    color: #555;
    background-color: #eee;
    border-color: #ccc;
    border-radius: 4px;
}
.form-text {
    margin-top: 5px;
    margin-bottom: 10px;
    font-size: 14px;
    color: #737373;
}
.pagination {
    --bs-pagination-padding-x: 12px;
    --bs-pagination-padding-y: 6px;
    --bs-pagination-font-size: 14px;
    --bs-pagination-color: #337ab7;
    --bs-pagination-border-color: #ddd;
    --bs-pagination-border-radius: 4px;
    --bs-pagination-hover-color: #23527c;
    --bs-pagination-hover-bg: #eee;
    --bs-pagination-hover-border-color: #ddd;
    --bs-pagination-active-bg: #337ab7;
    --bs-pagination-active-border-color: #337ab7;
    margin: 20px 0;
}
.breadcrumb {
    --bs-breadcrumb-padding-x: 15px;
    --bs-breadcrumb-padding-y: 8px;
    --bs-breadcrumb-margin-bottom: 20px;
    --bs-breadcrumb-bg: #f5f5f5;
    --bs-breadcrumb-border-radius: 4px;
    --bs-breadcrumb-divider-color: #ccc;
    --bs-breadcrumb-item-padding-x: 5px;
    --bs-breadcrumb-item-active-color: #777;
}
.list-group {
    --bs-list-group-item-padding-x: 15px;
    --bs-list-group-item-padding-y: 10px;
    --bs-list-group-border-radius: 4px;
    margin-bottom: 20px;
}
.progress {
    --bs-progress-height: 20px;
    --bs-progress-font-size: 12px;
    --bs-progress-bg: #f5f5f5;
    --bs-progress-border-radius: 4px;
    --bs-progress-bar-bg: #337ab7;
    margin-bottom: 20px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}
.tooltip {
    --bs-tooltip-padding-x: 8px;
    --bs-tooltip-padding-y: 3px;
    --bs-tooltip-font-size: 12px;
    --bs-tooltip-max-width: 200px;
    --bs-tooltip-border-radius: 4px;
}
.popover {
    --bs-popover-max-width: 276px;
    --bs-popover-font-size: 14px;
    --bs-popover-border-radius: 6px;
    --bs-popover-inner-border-radius: 5px;
    --bs-popover-header-padding-x: 14px;
    --bs-popover-header-padding-y: 8px;
    --bs-popover-header-font-size: 14px;
    --bs-popover-header-bg: #f7f7f7;
    --bs-popover-body-padding-x: 14px;
    --bs-popover-body-padding-y: 9px;
}
.img-thumbnail {
    padding: 4px;
    border-radius: 4px;
}
.carousel-caption {
    right: 15%;
    bottom: 20px;
    left: 15%;
    padding-top: 20px;
    padding-bottom: 20px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.carousel-indicators {
    margin-bottom: 10px;
}
.carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    margin: 1px;
    border: 1px solid #fff;
    border-radius: 10px;
    background-color: transparent;
    opacity: 1;
}
.carousel-indicators .active {
    width: 12px;
    height: 12px;
    margin: 0;
    background-color: #fff;
}
/* Bootstrap 3 carousel controls: gradient backdrop and 30px chevrons. */
.carousel-control-prev {
    background-image: linear-gradient(to right, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
}
.carousel-control-next {
    background-image: linear-gradient(to left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 30px;
    height: 30px;
}

/* 8. Legacy utilities: kept on purpose or present in database content ----------------------
   hidden-* / visible-* stay because Bootstrap 5 has no utility that hides an element only within
   one breakpoint range without forcing a display value on the others. Breakpoints are Bootstrap 3's. */

.pull-right {
    float: right !important;
}
.pull-left {
    float: left !important;
}
.center-block {
    display: block;
    margin-right: auto;
    margin-left: auto;
}
.text-left {
    text-align: left !important;
}
.text-right {
    text-align: right !important;
}
.hide,
.hidden {
    display: none !important;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}
/* Every converted image was a block-level .img-responsive; keep it block (no inline line-box gap). */
.img-fluid {
    display: block;
}
.img-circle {
    border-radius: 50%;
}
.img-rounded {
    border-radius: 6px;
}

@media (max-width: 767.98px) {
    .hidden-xs { display: none !important; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .hidden-sm { display: none !important; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .hidden-md { display: none !important; }
}
@media (min-width: 1200px) {
    .hidden-lg { display: none !important; }
}
.visible-xs, .visible-sm, .visible-md, .visible-lg,
.visible-xs-block, .visible-xs-inline, .visible-xs-inline-block,
.visible-sm-block, .visible-sm-inline, .visible-sm-inline-block,
.visible-md-block, .visible-md-inline, .visible-md-inline-block,
.visible-lg-block, .visible-lg-inline, .visible-lg-inline-block {
    display: none !important;
}
@media (max-width: 767.98px) {
    .visible-xs { display: block !important; }
    table.visible-xs { display: table !important; }
    tr.visible-xs { display: table-row !important; }
    th.visible-xs, td.visible-xs { display: table-cell !important; }
    .visible-xs-block { display: block !important; }
    .visible-xs-inline { display: inline !important; }
    .visible-xs-inline-block { display: inline-block !important; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .visible-sm { display: block !important; }
    table.visible-sm { display: table !important; }
    tr.visible-sm { display: table-row !important; }
    th.visible-sm, td.visible-sm { display: table-cell !important; }
    .visible-sm-block { display: block !important; }
    .visible-sm-inline { display: inline !important; }
    .visible-sm-inline-block { display: inline-block !important; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .visible-md { display: block !important; }
    table.visible-md { display: table !important; }
    tr.visible-md { display: table-row !important; }
    th.visible-md, td.visible-md { display: table-cell !important; }
    .visible-md-block { display: block !important; }
    .visible-md-inline { display: inline !important; }
    .visible-md-inline-block { display: inline-block !important; }
}
@media (min-width: 1200px) {
    .visible-lg { display: block !important; }
    table.visible-lg { display: table !important; }
    tr.visible-lg { display: table-row !important; }
    th.visible-lg, td.visible-lg { display: table-cell !important; }
    .visible-lg-block { display: block !important; }
    .visible-lg-inline { display: inline !important; }
    .visible-lg-inline-block { display: inline-block !important; }
}

/* 9. Bootstrap 3 grid classes still present in database content ----------------------------
   Inside a Bootstrap 5 .row they behave as columns; outside one they float like they used to. */
/* Any column written outside a .row (Bootstrap 3 allowed it) keeps its Bootstrap 3 float and gutter. */
:not(.row) > [class^="col-"],
:not(.row) > [class*=" col-"] {
    position: relative;
    float: left;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6,
.col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
    position: relative;
    float: left;
    flex: 0 0 auto;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
.col-xs-1 { width: 8.33333333%; }
.col-xs-2 { width: 16.66666667%; }
.col-xs-3 { width: 25%; }
.col-xs-4 { width: 33.33333333%; }
.col-xs-5 { width: 41.66666667%; }
.col-xs-6 { width: 50%; }
.col-xs-7 { width: 58.33333333%; }
.col-xs-8 { width: 66.66666667%; }
.col-xs-9 { width: 75%; }
.col-xs-10 { width: 83.33333333%; }
.col-xs-11 { width: 91.66666667%; }
.col-xs-12 { width: 100%; }
.col-xs-offset-0 { margin-left: 0; }
.col-xs-offset-1 { margin-left: 8.33333333%; }
.col-xs-offset-2 { margin-left: 16.66666667%; }
.col-xs-offset-3 { margin-left: 25%; }
.col-xs-offset-4 { margin-left: 33.33333333%; }
.col-xs-offset-5 { margin-left: 41.66666667%; }
.col-xs-offset-6 { margin-left: 50%; }
.col-xs-offset-7 { margin-left: 58.33333333%; }
.col-xs-offset-8 { margin-left: 66.66666667%; }
.col-xs-offset-9 { margin-left: 75%; }
.col-xs-offset-10 { margin-left: 83.33333333%; }
.col-xs-offset-11 { margin-left: 91.66666667%; }
/* Bootstrap 5's own tier widths restated AFTER the col-xs block, so DB content written as
   "col-xs-12 col-sm-6 col-md-4" keeps the Bootstrap 3 source-order cascade (xs first, then up). */
@media (min-width: 576px) {
    .col-sm-1 { flex: 0 0 auto; width: 8.33333333%; }
    .col-sm-2 { flex: 0 0 auto; width: 16.66666667%; }
    .col-sm-3 { flex: 0 0 auto; width: 25%; }
    .col-sm-4 { flex: 0 0 auto; width: 33.33333333%; }
    .col-sm-5 { flex: 0 0 auto; width: 41.66666667%; }
    .col-sm-6 { flex: 0 0 auto; width: 50%; }
    .col-sm-7 { flex: 0 0 auto; width: 58.33333333%; }
    .col-sm-8 { flex: 0 0 auto; width: 66.66666667%; }
    .col-sm-9 { flex: 0 0 auto; width: 75%; }
    .col-sm-10 { flex: 0 0 auto; width: 83.33333333%; }
    .col-sm-11 { flex: 0 0 auto; width: 91.66666667%; }
    .col-sm-12 { flex: 0 0 auto; width: 100%; }
}
@media (min-width: 768px) {
    .col-md-1 { flex: 0 0 auto; width: 8.33333333%; }
    .col-md-2 { flex: 0 0 auto; width: 16.66666667%; }
    .col-md-3 { flex: 0 0 auto; width: 25%; }
    .col-md-4 { flex: 0 0 auto; width: 33.33333333%; }
    .col-md-5 { flex: 0 0 auto; width: 41.66666667%; }
    .col-md-6 { flex: 0 0 auto; width: 50%; }
    .col-md-7 { flex: 0 0 auto; width: 58.33333333%; }
    .col-md-8 { flex: 0 0 auto; width: 66.66666667%; }
    .col-md-9 { flex: 0 0 auto; width: 75%; }
    .col-md-10 { flex: 0 0 auto; width: 83.33333333%; }
    .col-md-11 { flex: 0 0 auto; width: 91.66666667%; }
    .col-md-12 { flex: 0 0 auto; width: 100%; }
}
@media (min-width: 992px) {
    .col-lg-1 { flex: 0 0 auto; width: 8.33333333%; }
    .col-lg-2 { flex: 0 0 auto; width: 16.66666667%; }
    .col-lg-3 { flex: 0 0 auto; width: 25%; }
    .col-lg-4 { flex: 0 0 auto; width: 33.33333333%; }
    .col-lg-5 { flex: 0 0 auto; width: 41.66666667%; }
    .col-lg-6 { flex: 0 0 auto; width: 50%; }
    .col-lg-7 { flex: 0 0 auto; width: 58.33333333%; }
    .col-lg-8 { flex: 0 0 auto; width: 66.66666667%; }
    .col-lg-9 { flex: 0 0 auto; width: 75%; }
    .col-lg-10 { flex: 0 0 auto; width: 83.33333333%; }
    .col-lg-11 { flex: 0 0 auto; width: 91.66666667%; }
    .col-lg-12 { flex: 0 0 auto; width: 100%; }
}
@media (min-width: 1200px) {
    .col-xl-1 { flex: 0 0 auto; width: 8.33333333%; }
    .col-xl-2 { flex: 0 0 auto; width: 16.66666667%; }
    .col-xl-3 { flex: 0 0 auto; width: 25%; }
    .col-xl-4 { flex: 0 0 auto; width: 33.33333333%; }
    .col-xl-5 { flex: 0 0 auto; width: 41.66666667%; }
    .col-xl-6 { flex: 0 0 auto; width: 50%; }
    .col-xl-7 { flex: 0 0 auto; width: 58.33333333%; }
    .col-xl-8 { flex: 0 0 auto; width: 66.66666667%; }
    .col-xl-9 { flex: 0 0 auto; width: 75%; }
    .col-xl-10 { flex: 0 0 auto; width: 83.33333333%; }
    .col-xl-11 { flex: 0 0 auto; width: 91.66666667%; }
    .col-xl-12 { flex: 0 0 auto; width: 100%; }
}
@media (min-width: 1400px) {
    .col-xxl-1 { flex: 0 0 auto; width: 8.33333333%; }
    .col-xxl-2 { flex: 0 0 auto; width: 16.66666667%; }
    .col-xxl-3 { flex: 0 0 auto; width: 25%; }
    .col-xxl-4 { flex: 0 0 auto; width: 33.33333333%; }
    .col-xxl-5 { flex: 0 0 auto; width: 41.66666667%; }
    .col-xxl-6 { flex: 0 0 auto; width: 50%; }
    .col-xxl-7 { flex: 0 0 auto; width: 58.33333333%; }
    .col-xxl-8 { flex: 0 0 auto; width: 66.66666667%; }
    .col-xxl-9 { flex: 0 0 auto; width: 75%; }
    .col-xxl-10 { flex: 0 0 auto; width: 83.33333333%; }
    .col-xxl-11 { flex: 0 0 auto; width: 91.66666667%; }
    .col-xxl-12 { flex: 0 0 auto; width: 100%; }
}
@media (min-width: 768px) {
    .col-sm-offset-0 { margin-left: 0; }
    .col-sm-offset-1 { margin-left: 8.33333333%; }
    .col-sm-offset-2 { margin-left: 16.66666667%; }
    .col-sm-offset-3 { margin-left: 25%; }
    .col-sm-offset-4 { margin-left: 33.33333333%; }
    .col-sm-offset-5 { margin-left: 41.66666667%; }
    .col-sm-offset-6 { margin-left: 50%; }
    .col-sm-offset-7 { margin-left: 58.33333333%; }
    .col-sm-offset-8 { margin-left: 66.66666667%; }
    .col-sm-offset-9 { margin-left: 75%; }
    .col-sm-offset-10 { margin-left: 83.33333333%; }
    .col-sm-offset-11 { margin-left: 91.66666667%; }
}
@media (min-width: 992px) {
    .col-md-offset-0 { margin-left: 0; }
    .col-md-offset-1 { margin-left: 8.33333333%; }
    .col-md-offset-2 { margin-left: 16.66666667%; }
    .col-md-offset-3 { margin-left: 25%; }
    .col-md-offset-4 { margin-left: 33.33333333%; }
    .col-md-offset-5 { margin-left: 41.66666667%; }
    .col-md-offset-6 { margin-left: 50%; }
    .col-md-offset-7 { margin-left: 58.33333333%; }
    .col-md-offset-8 { margin-left: 66.66666667%; }
    .col-md-offset-9 { margin-left: 75%; }
    .col-md-offset-10 { margin-left: 83.33333333%; }
    .col-md-offset-11 { margin-left: 91.66666667%; }
}
@media (min-width: 1200px) {
    .col-lg-offset-0 { margin-left: 0; }
    .col-lg-offset-1 { margin-left: 8.33333333%; }
    .col-lg-offset-2 { margin-left: 16.66666667%; }
    .col-lg-offset-3 { margin-left: 25%; }
    .col-lg-offset-4 { margin-left: 33.33333333%; }
    .col-lg-offset-5 { margin-left: 41.66666667%; }
    .col-lg-offset-6 { margin-left: 50%; }
    .col-lg-offset-7 { margin-left: 58.33333333%; }
    .col-lg-offset-8 { margin-left: 66.66666667%; }
    .col-lg-offset-9 { margin-left: 75%; }
    .col-lg-offset-10 { margin-left: 83.33333333%; }
    .col-lg-offset-11 { margin-left: 91.66666667%; }
}

/* 10. Legacy components ----------------------------------------------------------------- */

/* .well stays: the engine restyles it as its card (css/engine/main.css) and public views use it. */
.well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}
.well blockquote {
    border-color: rgba(0, 0, 0, .15);
}
.well-lg {
    padding: 24px;
    border-radius: 6px;
}
.well-sm {
    padding: 9px;
    border-radius: 3px;
}

.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.panel-body {
    padding: 15px;
}
.panel-heading {
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
    color: inherit;
}
.panel-title > a {
    color: inherit;
}
.panel-footer {
    padding: 10px 15px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}
.panel-group {
    margin-bottom: 20px;
}
.panel-group .panel {
    margin-bottom: 0;
    border-radius: 4px;
}
.panel-group .panel + .panel {
    margin-top: 5px;
}
.panel-group .panel-heading {
    border-bottom: 0;
}
.panel-group .panel-heading + .panel-collapse > .panel-body {
    border-top: 1px solid #ddd;
}
.panel-default {
    border-color: #ddd;
}
.panel-default > .panel-heading {
    color: #333;
    background-color: #f5f5f5;
    border-color: #ddd;
}
.panel-primary {
    border-color: #337ab7;
}
.panel-primary > .panel-heading {
    color: #fff;
    background-color: #337ab7;
    border-color: #337ab7;
}
.panel-success {
    border-color: #d6e9c6;
}
.panel-success > .panel-heading {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}
.panel-info {
    border-color: #bce8f1;
}
.panel-info > .panel-heading {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}
.panel-warning {
    border-color: #faebcc;
}
.panel-warning > .panel-heading {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}
.panel-danger {
    border-color: #ebccd1;
}
.panel-danger > .panel-heading {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

.label {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}
.label-default { background-color: #777; }
.label-primary { background-color: #337ab7; }
.label-success { background-color: #5cb85c; }
.label-info { background-color: #5bc0de; }
.label-warning { background-color: #f0ad4e; }
.label-danger { background-color: #d9534f; }

.page-header {
    padding-bottom: 9px;
    margin: 40px 0 20px;
    border-bottom: 1px solid #eee;
}
.jumbotron {
    padding: 30px 15px;
    margin-bottom: 30px;
    color: inherit;
    background-color: #eee;
}
@media (min-width: 768px) {
    .jumbotron {
        padding: 48px 60px;
    }
}
.thumbnail {
    display: block;
    padding: 4px;
    margin-bottom: 20px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.thumbnail > img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-right: auto;
    margin-left: auto;
}
.media {
    display: flex;
    align-items: flex-start;
    margin-top: 15px;
}
.media:first-child {
    margin-top: 0;
}
.media-body {
    flex: 1;
}
.media-left {
    padding-right: 10px;
}
.media-right {
    padding-left: 10px;
}
.list-inline {
    padding-left: 0;
    margin-left: -5px;
    list-style: none;
}
.list-inline > li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
}
@media (min-width: 768px) {
    .dl-horizontal dt {
        float: left;
        width: 160px;
        clear: left;
        overflow: hidden;
        text-align: right;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .dl-horizontal dd {
        margin-left: 180px;
    }
}

/* Bootstrap 3 caret. A .dropdown-toggle already draws its own in Bootstrap 5, so a leftover
   caret span inside one is hidden rather than doubled. */
.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}
.dropdown-toggle .caret {
    display: none;
}
/* Bootstrap 3 dropdown items and dividers written without .dropdown-item / .dropdown-divider */
.dropdown-menu > li > a:not(.dropdown-item) {
    display: block;
    width: 100%;
    padding: 4px 16px;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}
.dropdown-menu > li > a:not(.dropdown-item):hover,
.dropdown-menu > li > a:not(.dropdown-item):focus {
    color: #1e2125;
    background-color: #e9ecef;
}
.dropdown-menu > li.divider {
    height: 1px;
    margin: 9px 0;
    overflow: hidden;
    background-color: #e5e5e5;
}
/* Bootstrap 3 "×" close button written without .btn-close */
button.close {
    float: right;
    padding: 0;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    background: transparent;
    border: 0;
    opacity: .2;
}
button.close:hover,
button.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    opacity: .5;
}
/* Bootstrap 3 open-state class */
.collapse.in {
    display: block;
}
.fade.in {
    opacity: 1;
}

/* 11. Glyphicons rendered with Font Awesome 7 ----------------------------------------------
   The glyphicon font is gone with Bootstrap 3; every page loads Font Awesome. Repo views were
   converted to <i class="fas fa-..."> directly; this keeps glyphicons inside database content
   (and anything missed) rendering. */

.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: "Font Awesome 7 Free";
    font-style: normal;
    font-weight: 900;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.glyphicon-alert::before,
.glyphicon-warning-sign::before { content: "\f071"; }
.glyphicon-arrow-left::before { content: "\f060"; }
.glyphicon-arrow-right::before { content: "\f061"; }
.glyphicon-asterisk::before { content: "\2a"; }
.glyphicon-bell::before { content: "\f0f3"; }
.glyphicon-blackboard::before { content: "\f51b"; }
.glyphicon-book::before { content: "\f02d"; }
.glyphicon-bookmark::before { content: "\f02e"; }
.glyphicon-briefcase::before { content: "\f0b1"; }
.glyphicon-calendar::before { content: "\f133"; }
.glyphicon-certificate::before { content: "\f0a3"; }
.glyphicon-check::before,
.glyphicon-ok::before { content: "\f00c"; }
.glyphicon-chevron-down::before { content: "\f078"; }
.glyphicon-chevron-left::before { content: "\f053"; }
.glyphicon-chevron-right::before { content: "\f054"; }
.glyphicon-chevron-up::before { content: "\f077"; }
.glyphicon-cloud-download::before { content: "\f0ed"; }
.glyphicon-cog::before { content: "\f013"; }
.glyphicon-comment::before { content: "\f075"; }
.glyphicon-copy::before,
.glyphicon-duplicate::before { content: "\f0c5"; }
.glyphicon-credit-card::before { content: "\f09d"; }
.glyphicon-download-alt::before,
.glyphicon-download::before { content: "\f019"; }
.glyphicon-earphone::before,
.glyphicon-phone::before { content: "\f095"; }
.glyphicon-edit::before { content: "\f044"; }
.glyphicon-education::before { content: "\f19d"; }
.glyphicon-envelope::before { content: "\f0e0"; }
.glyphicon-exclamation-sign::before { content: "\f06a"; }
.glyphicon-eye-open::before { content: "\f06e"; }
.glyphicon-file::before { content: "\f15b"; }
.glyphicon-filter::before { content: "\f0b0"; }
.glyphicon-flag::before { content: "\f024"; }
.glyphicon-folder-close::before { content: "\f07b"; }
.glyphicon-folder-open::before { content: "\f07c"; }
.glyphicon-gift::before { content: "\f06b"; }
.glyphicon-globe::before { content: "\f0ac"; }
.glyphicon-heart::before { content: "\f004"; }
.glyphicon-home::before { content: "\f015"; }
.glyphicon-info-sign::before { content: "\f05a"; }
.glyphicon-link::before { content: "\f0c1"; }
.glyphicon-list::before { content: "\f03a"; }
.glyphicon-list-alt::before { content: "\f022"; }
.glyphicon-lock::before { content: "\f023"; }
.glyphicon-log-in::before { content: "\f2f6"; }
.glyphicon-log-out::before { content: "\f2f5"; }
.glyphicon-map-marker::before { content: "\f3c5"; }
.glyphicon-menu-hamburger::before { content: "\f0c9"; }
.glyphicon-minus::before { content: "\f068"; }
.glyphicon-off::before { content: "\f011"; }
.glyphicon-ok-circle::before { content: "\f058"; }
.glyphicon-paperclip::before { content: "\f0c6"; }
.glyphicon-pencil::before { content: "\f303"; }
.glyphicon-play::before { content: "\f04b"; }
.glyphicon-play-circle::before { content: "\f144"; }
.glyphicon-plus::before { content: "\2b"; }
.glyphicon-print::before { content: "\f02f"; }
.glyphicon-question-sign::before { content: "\f059"; }
.glyphicon-refresh::before { content: "\f021"; }
.glyphicon-remove::before { content: "\f00d"; }
.glyphicon-remove-circle::before { content: "\f057"; }
.glyphicon-search::before { content: "\f002"; }
.glyphicon-share::before { content: "\f064"; }
.glyphicon-shopping-cart::before { content: "\f07a"; }
.glyphicon-star::before { content: "\f005"; }
.glyphicon-tag::before { content: "\f02b"; }
.glyphicon-tags::before { content: "\f02c"; }
.glyphicon-th-list::before { content: "\f00b"; }
.glyphicon-thumbs-up::before { content: "\f164"; }
.glyphicon-time::before { content: "\f017"; }
.glyphicon-trash::before { content: "\f1f8"; }
.glyphicon-triangle-bottom::before { content: "\f0d7"; }
.glyphicon-triangle-right::before { content: "\f0da"; }
.glyphicon-triangle-top::before { content: "\f0d8"; }
.glyphicon-usd::before { content: "\24"; }
.glyphicon-user::before { content: "\f007"; }
.glyphicon-volume-up::before { content: "\f028"; }