/* ============================================================================
 *  Bootstrap 5 -> Bootstrap 3 visual compatibility shim
 *  ----------------------------------------------------------------------------
 *  Re-applies BS3-era visual defaults on top of Bootstrap 5 so existing markup
 *  keeps its prior look after the BS5 upgrade. Load order matters:
 *
 *      <link href="bootstrap.min.css">    (BS5 CDN)
 *      <link href="bs3-compat.css">       (this file - shims BS5 back to BS3)
 *      <link href="styles.css">           (project custom CSS, overrides shim)
 *
 *  Each section corresponds to a Bootstrap component or utility whose default
 *  changed between BS3 and BS5. To remove the shim later, delete this file and
 *  the <link> tag.
 *  ========================================================================== */


/* ----------------------------------------------------------------------------
 *  Base typography: BS3 uses 14px / 1.42857 / #333; BS5 uses 1rem / 1.5 / var
 * -------------------------------------------------------------------------- */
body {
    font-size: 14px;
    line-height: 1.428571429;
    color: #333;
    background-color: #fff;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    margin-top: 20px;
    margin-bottom: 10px;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}
/* BS5's .row > * { margin-top: var(--bs-gutter-y) } resets to 0 — restore
   margin-top on headings that are direct children of .row */
.row > h1, .row > h2, .row > h3, .row > h4, .row > h5, .row > h6,
.row > .h1, .row > .h2, .row > .h3, .row > .h4, .row > .h5, .row > .h6 {
    margin-top: 20px;
}
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; }

/* Paragraphs and lists: BS3 spacing */
p {
    margin: 0 0 10px;
}
ul, ol {
    margin-top: 0;
    margin-bottom: 10px;
}
dl {
    margin-top: 0;
    margin-bottom: 20px;
}
dt, dd {
    line-height: 1.428571429;
}
dt {
    font-weight: 700;
}

/* Links: BS3 link color (#337ab7), no underline by default */
a {
    color: #337ab7;
    text-decoration: none;
}
a:hover,
a:focus {
    color: #23527c;
    text-decoration: underline;
}
a:focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

/* abbr, mark, address — BS3 chrome */
abbr[title],
abbr[data-original-title] {
    cursor: help;
    border-bottom: 1px dotted #777;
}
mark, .mark {
    padding: 0.2em;
    background-color: #fcf8e3;
}
address {
    margin-bottom: 20px;
    font-style: normal;
    line-height: 1.428571429;
}

/* Blockquote: BS3 styling */
blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
}
blockquote p:last-child,
blockquote ul:last-child,
blockquote ol:last-child {
    margin-bottom: 0;
}

/* Inline code / preformatted blocks */
code, kbd, pre, samp {
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}
code {
    padding: 2px 4px;
    font-size: 90%;
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 4px;
}
kbd {
    padding: 2px 4px;
    font-size: 90%;
    color: #fff;
    background-color: #333;
    border-radius: 3px;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}
pre {
    display: block;
    padding: 9.5px;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.428571429;
    color: #333;
    word-break: break-all;
    word-wrap: break-word;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 4px;
}


/* ----------------------------------------------------------------------------
 *  Container max-widths: BS3 was slightly wider than BS5
 * -------------------------------------------------------------------------- */
@media (min-width: 768px)  { .container { max-width: 750px; } }
@media (min-width: 992px)  { .container { max-width: 970px; } }
@media (min-width: 1200px) { .container { max-width: 1170px; } }


/* ----------------------------------------------------------------------------
 *  Grid: ensure .row uses BS5 flex layout AND fills its parent.
 *  Some legacy CSS in this project sets .row margins without preserving
 *  display:flex, which breaks column sizing.
 * -------------------------------------------------------------------------- */
.row {
    display: flex !important;
    flex-wrap: wrap !important;
    box-sizing: border-box !important;
}
/* Force min-width: 100% only on rows without inline width — so rows like
   <div class="row" style="width:50%; float:left;"> keep their declared width. */
.row:not([style*="width"]) {
    min-width: 100% !important;
}


/* ----------------------------------------------------------------------------
 *  Form controls: BS3 sizing and chrome
 * -------------------------------------------------------------------------- */
.form-control {
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    height: 34px;
    color: #555;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.form-control:focus {
    border-color: #66afe9;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
textarea.form-control,
select[multiple].form-control {
    height: auto;
}
/* BS5 dropped the dropdown chevron from <select class="form-control">
   (moved it to .form-select). Restore it so legacy markup still renders an arrow. */
select.form-control:not([multiple]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("../img/chevron-down.svg");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.25rem;
}


/* ----------------------------------------------------------------------------
 *  Form group spacing (BS5 dropped the .form-group class entirely)
 * -------------------------------------------------------------------------- */
.form-group {
    margin-bottom: 15px;
}


/* ----------------------------------------------------------------------------
 *  Labels: BS3 had a base <label> rule (bold, 5px bottom margin) that BS5
 *  dropped. Restore it. .col-form-label was .control-label.
 * -------------------------------------------------------------------------- */
label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}

.col-form-label,
label.control-label {
    padding-top: 7px;
    padding-bottom: 0;
    margin-bottom: 5px;
    font-weight: 700;
    line-height: 1.428571429;
}


/* ----------------------------------------------------------------------------
 *  Helper text: .form-text was .help-block
 * -------------------------------------------------------------------------- */
.form-text {
    display: block;
    margin-top: 5px;
    margin-bottom: 10px;
    color: #737373;
    font-size: 14px;
}


/* ----------------------------------------------------------------------------
 *  Buttons: BS3 sizing
 * -------------------------------------------------------------------------- */
.btn {
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
}
.btn-sm { padding: 5px 10px; font-size: 12px; line-height: 1.5;   border-radius: 3px; }
.btn-lg { padding: 10px 16px; font-size: 18px; line-height: 1.333; border-radius: 6px; }
.btn-xs { padding: 1px 5px;  font-size: 12px; line-height: 1.5;   border-radius: 3px; }

/* btn-secondary (was btn-default) -> BS3 default button colors */
.btn-secondary,
.btn-secondary:focus {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}
.btn-secondary:hover {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}

/* BS3 button color variants (left untouched for project's custom .btn-primary) */
.btn-success { color: #fff; background-color: #5cb85c; border-color: #4cae4c; }
.btn-success:hover, .btn-success:focus { color: #fff; background-color: #449d44; border-color: #398439; }

.btn-info { color: #fff; background-color: #5bc0de; border-color: #46b8da; }
.btn-info:hover, .btn-info:focus { color: #fff; background-color: #31b0d5; border-color: #269abc; }

.btn-warning { color: #fff; background-color: #f0ad4e; border-color: #eea236; }
.btn-warning:hover, .btn-warning:focus { color: #fff; background-color: #ec971f; border-color: #d58512; }

.btn-danger { color: #fff; background-color: #d9534f; border-color: #d43f3a; }
.btn-danger:hover, .btn-danger:focus { color: #fff; background-color: #c9302c; border-color: #ac2925; }


/* ----------------------------------------------------------------------------
 *  Input groups: BS5 uses flex; legacy CSS may override .input-group display
 *  but not the children, so the icon prefix breaks onto its own row. Force
 *  the BS5 flex layout so icon and input sit side by side as in BS3.
 * -------------------------------------------------------------------------- */
.input-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    position: relative !important;
}
.input-group > .input-group-text,
.input-group > .form-control,
.input-group > .form-select,
.input-group > input,
.input-group > select {
    display: flex !important;
    align-items: center !important;
}
.input-group > .form-control,
.input-group > .form-select,
.input-group > input,
.input-group > select {
    flex: 1 1 auto !important;
    width: 1%;
    min-width: 0;
}
.input-group > .input-group-text {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

/* .input-group-text was .input-group-addon -> BS3 visual */
.input-group-text {
    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;
}


/* ----------------------------------------------------------------------------
 *  Cards: were panels in BS3. .card-* classes get .panel-* visuals.
 * -------------------------------------------------------------------------- */
.card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
}
.card-header {
    padding: 10px 15px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    color: #333;
}
.card-body {
    padding: 15px;
}
.card-footer {
    padding: 10px 15px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}
.card-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
    color: inherit;
    font-weight: 500;
}


/* ----------------------------------------------------------------------------
 *  Modals: BS3 padding / borders
 * -------------------------------------------------------------------------- */
.modal-content {
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    background-color: #fff;
}
.modal-header {
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
}
.modal-header .modal-title {
    margin: 0;
    line-height: 1.428571429;
}
.modal-body {
    padding: 15px;
    position: relative;
}
.modal-footer {
    padding: 15px;
    text-align: right;
    border-top: 1px solid #e5e5e5;
}
.modal-footer .btn + .btn {
    margin-left: 5px;
}


/* ----------------------------------------------------------------------------
 *  Dropdowns: BS3 chrome
 *  BS3 had NO automatic arrow on .dropdown-toggle — markup used explicit
 *  <span class="caret"> for the indicator. BS5 added a CSS ::after arrow,
 *  which now duplicates any existing explicit caret/icon. Suppress it.
 * -------------------------------------------------------------------------- */
.dropdown-toggle::after {
    display: none;
}
.dropdown-menu {
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}
.dropdown-item {
    padding: 3px 20px;
    font-weight: 400;
    color: #333;
    white-space: nowrap;
}
.dropdown-item:hover,
.dropdown-item:focus {
    color: #262626;
    background-color: #f5f5f5;
}
.dropdown-divider {
    margin: 9px 0;
    border-top: 1px solid #e5e5e5;
}


/* ----------------------------------------------------------------------------
 *  Nav (.nav, .nav-tabs, .nav-pills): BS3 styled <li> > <a> directly. BS5
 *  switched to .nav-link on the anchors, so legacy markup loses styling.
 *  Re-apply BS3's rules to <li> > <a>.
 * -------------------------------------------------------------------------- */
.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
.nav > li {
    position: relative;
    display: block;
}
.nav > li > a {
    position: relative;
    display: block;
    padding: 10px 15px;
    color: #337ab7;
    text-decoration: none;
}
.nav > li > a:hover,
.nav > li > a:focus {
    text-decoration: none;
    background-color: #eee;
}
.nav > li.disabled > a {
    color: #777;
}
.nav > li.disabled > a:hover,
.nav > li.disabled > a:focus {
    color: #777;
    text-decoration: none;
    cursor: not-allowed;
    background-color: transparent;
}

.nav-tabs {
    border-bottom: 1px solid #ddd;
}
.nav-tabs > li {
    float: left;
    margin-bottom: -1px;
}
.nav-tabs > li > a {
    margin-right: 2px;
    line-height: 1.428571429;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
}
.nav-tabs > li > a:hover {
    border-color: #eee #eee #ddd;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: #555;
    background-color: #fff;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
    cursor: default;
}

.nav-pills > li {
    float: left;
}
.nav-pills > li > a {
    border-radius: 4px;
}
.nav-pills > li + li {
    margin-left: 2px;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    color: #fff;
    background-color: #337ab7;
}


/* ----------------------------------------------------------------------------
 *  Tables: BS3 cell padding and borders
 * -------------------------------------------------------------------------- */
.table {
    width: 100%;
    margin-bottom: 20px;
    background-color: transparent;
    /* BS3 set this so adjacent cells share borders. BS5 omits it, falling
       back to browser default (separate + 2px spacing) which creates the
       "boxed" cell look. Restore BS3 behavior. */
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}
/* BS5 paints each cell with `background-color: var(--bs-table-bg)` (white) and
   adds a `box-shadow: inset 0 0 0 9999px var(...)` overlay for striping/hover.
   Together they make every cell look like its own white box on top of the row.
   Make cells inherit the row's background so BS3-era striping (set via
   `tr` background-color) shows through, and disable the overlay. */
.table > :not(caption) > * > * {
    background-color: inherit;
    box-shadow: none;
}
.table > tbody > tr > td,
.table > tbody > tr > th,
.table > thead > tr > td,
.table > thead > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th {
    padding: 8px;
    line-height: 1.428571429;
    vertical-align: top;
    border-top: 1px solid #ddd;
}
.table > thead > tr > th {
    border-bottom: 2px solid #ddd;
    vertical-align: bottom;
}
.table-bordered,
.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > thead > tr > th {
    border: 1px solid #ddd;
}
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #f9f9f9;
}
.table-hover > tbody > tr:hover {
    background-color: #f5f5f5;
}


/* ----------------------------------------------------------------------------
 *  Alerts: BS3 padding and color variants
 * -------------------------------------------------------------------------- */
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}
.alert-success { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; }
.alert-info    { color: #31708f; background-color: #d9edf7; border-color: #bce8f1; }
.alert-warning { color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc; }
.alert-danger  { color: #a94442; background-color: #f2dede; border-color: #ebccd1; }


/* ----------------------------------------------------------------------------
 *  Navbar: BS3 navbar-default visual (the project keeps .navbar-default as a
 *  CSS hook even though BS5 has no such class).
 * -------------------------------------------------------------------------- */
.navbar {
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    min-height: 50px;
    padding: 0;
}
.navbar-default {
    background-color: #f8f8f8;
    border-color: #e7e7e7;
}
.navbar-default .navbar-nav > li > a {
    color: #777;
    padding: 15px;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #333;
    background-color: transparent;
}
/* BS5's .navbar > .container-fluid is display:flex with justify-content:
   space-between. .navbar-header (BS3 div) was a flex item at content width,
   so float:right on the toggler had no room to push. Make navbar-header
   fill the navbar so the toggler floats to the right edge — but only below
   the navbar-expand-lg breakpoint (where the toggle is visible). At lg+ the
   toggle is hidden and we want menu items flush left, so navbar-header
   collapses back to content width. */
@media (max-width: 991.98px) {
    .navbar-header {
        flex: 1;
    }
}
.navbar-toggler {
    padding: 9px 10px;
    margin: 8px 15px 8px 0;
    background-color: transparent;
    background-image: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    float: right;
}
/* BS5 ships the toggler icon at 1.5em (24px); BS3's three icon-bars stack
   was only 14px tall. Shrink to match so the navbar height matches BS3. */
.navbar-toggler-icon {
    width: 22px;
    height: 20px;
    background-image: url("../img/navbar-toggler-icon.svg");
    background-size: contain;
}

/* BS5 disables the collapse transition when prefers-reduced-motion is set
   (accessibility default). BS3 didn't have this rule, so the animation
   always ran. Restore BS3 behavior so users always see the slide animation
   regardless of OS reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
    .collapsing {
        transition: height 0.35s ease;
    }
}
.navbar-toggler:focus {
    outline: 0;
    box-shadow: none;
}


/* ----------------------------------------------------------------------------
 *  Wells & thumbnails: BS5 removed these classes entirely. Restore.
 * -------------------------------------------------------------------------- */
.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, 0.05);
}
.thumbnail {
    display: block;
    padding: 4px;
    margin-bottom: 20px;
    line-height: 1.428571429;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: border 0.2s ease-in-out;
}


/* ----------------------------------------------------------------------------
 *  Pagination: BS3 chrome (PagedList.Mvc renders BS3-style markup)
 * -------------------------------------------------------------------------- */
.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
}
.pagination > li {
    display: inline;
}
.pagination > li > a,
.pagination > li > span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.428571429;
    color: #337ab7;
    background-color: #fff;
    border: 1px solid #ddd;
    text-decoration: none;
}
.pagination > li:first-child > a,
.pagination > li:first-child > span {
    margin-left: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.pagination > .active > a,
.pagination > .active > span {
    z-index: 2;
    color: #fff;
    background-color: #337ab7;
    border-color: #337ab7;
    cursor: default;
}


/* ----------------------------------------------------------------------------
 *  Caret indicators (BS5 has no .caret; views were migrated to .fa-caret-down,
 *  but if any decorative <span class="caret"> remains, give it BS3 size)
 * -------------------------------------------------------------------------- */
.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}


/* ============================================================================
 *  Additional BS3 rules (extracted from twitter-bootstrap@3.4.1 source)
 *  Filling gaps in the shim discovered after walking the BS3 stylesheet.
 *  ========================================================================== */


/* ----------------------------------------------------------------------------
 *  Buttons: hover/focus/active behavior + variants
 * -------------------------------------------------------------------------- */
.btn:hover,
.btn:focus,
.btn.focus {
    color: #333;
    text-decoration: none;
}
.btn:active,
.btn.active {
    background-image: none;
    outline: 0;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.btn:disabled,
.btn.disabled,
fieldset[disabled] .btn {
    cursor: not-allowed;
    opacity: 0.65;
    box-shadow: none;
}
.btn-link {
    font-weight: 400;
    color: #337ab7;
    border-radius: 0;
    background-color: transparent;
    border-color: transparent;
}
.btn-link:hover,
.btn-link:focus {
    color: #23527c;
    text-decoration: underline;
    background-color: transparent;
}
.btn-block {
    display: block;
    width: 100%;
}
.btn-block + .btn-block {
    margin-top: 5px;
}


/* ----------------------------------------------------------------------------
 *  Form controls: disabled / readonly / size variants
 * -------------------------------------------------------------------------- */
.form-control:disabled,
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
    background-color: #eee;
    opacity: 1;
}
.form-control:disabled,
.form-control[disabled],
fieldset[disabled] .form-control {
    cursor: not-allowed;
}
.input-sm,
.form-control-sm {
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}
.input-lg,
.form-control-lg {
    height: 46px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px;
}
.form-control-static {
    min-height: 34px;
    padding-top: 7px;
    padding-bottom: 7px;
    margin-bottom: 0;
}


/* ----------------------------------------------------------------------------
 *  Validation states: apply BS3 visuals to BOTH the legacy BS3 names
 *  (.has-error / .has-success) AND the BS5 equivalents (.is-invalid /
 *  .is-valid) so either markup style works. Selectors below reference
 *  BS5 child class names (.col-form-label, .form-text) since the migration
 *  renamed BS3's .control-label and .help-block.
 *  .has-warning has no BS5 equivalent — only legacy name available.
 * -------------------------------------------------------------------------- */

/* Error / invalid */
.has-error .col-form-label,
.has-error .form-text,
.is-invalid ~ .form-text,
.was-validated .form-control:invalid ~ .form-text {
    color: #a94442;
}
.has-error .form-control,
.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: #a94442;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-error .form-control:focus,
.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus {
    border-color: #843534;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
}
.has-error .input-group-text,
.is-invalid ~ .input-group-text {
    color: #a94442;
    background-color: #f2dede;
    border-color: #a94442;
}

/* Success / valid */
.has-success .col-form-label,
.has-success .form-text,
.is-valid ~ .form-text,
.was-validated .form-control:valid ~ .form-text {
    color: #3c763d;
}
.has-success .form-control,
.form-control.is-valid,
.was-validated .form-control:valid {
    border-color: #3c763d;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-success .form-control:focus,
.form-control.is-valid:focus,
.was-validated .form-control:valid:focus {
    border-color: #2b542c;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
}
.has-success .input-group-text,
.is-valid ~ .input-group-text {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #3c763d;
}

/* Warning — BS3-only (BS5 dropped this state) */
.has-warning .col-form-label,
.has-warning .form-text {
    color: #8a6d3b;
}
.has-warning .form-control {
    border-color: #8a6d3b;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-warning .form-control:focus {
    border-color: #66512c;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
}
.has-warning .input-group-text {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #8a6d3b;
}


/* ----------------------------------------------------------------------------
 *  Radio / checkbox spacing (BS3 had explicit spacing; BS5 form-check differs)
 * -------------------------------------------------------------------------- */
.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;
    margin-top: 4px \9;
}


/* ----------------------------------------------------------------------------
 *  Modal dialog widths: BS3 was 600px at sm+, 900px for .modal-lg, 300px sm
 * -------------------------------------------------------------------------- */
.modal-dialog {
    position: relative;
    width: auto;
    margin: 10px;
}
@media (min-width: 768px) {
    .modal-dialog {
        width: 600px;
        margin: 30px auto;
    }
    .modal-sm { width: 300px; }
}
@media (min-width: 992px) {
    .modal-lg { width: 900px; }
}


/* ----------------------------------------------------------------------------
 *  Dropdown menu: BS3 used <li> > <a> structure; BS5 uses .dropdown-item.
 *  Cover both so legacy markup keeps working.
 * -------------------------------------------------------------------------- */
.dropdown-menu > li > a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.428571429;
    color: #333;
    white-space: nowrap;
    text-decoration: none;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    color: #262626;
    background-color: #f5f5f5;
    text-decoration: none;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    color: #fff;
    background-color: #337ab7;
    outline: 0;
}


/* ----------------------------------------------------------------------------
 *  Modal close button: BS3 had a styled ✕; we migrated markup to .btn-close
 *  which uses BS5's SVG. Keep BS5's clean look (no override). However if any
 *  legacy <button class="close"> remains, give it BS3 styling.
 * -------------------------------------------------------------------------- */
.close {
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: 0.2;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
}
.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    opacity: 0.5;
}


/* ----------------------------------------------------------------------------
 *  Typography utilities (BS3 colors and sizes)
 * -------------------------------------------------------------------------- */
.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; }
.text-primary { color: #337ab7; }
.text-success { color: #3c763d; }
.text-info    { color: #31708f; }
.text-warning { color: #8a6d3b; }
.text-danger  { color: #a94442; }

.bg-primary { color: #fff; background-color: #337ab7; }
.bg-success { background-color: #dff0d8; }
.bg-info    { background-color: #d9edf7; }
.bg-warning { background-color: #fcf8e3; }
.bg-danger  { background-color: #f2dede; }


/* ----------------------------------------------------------------------------
 *  Horizontal rule (BS3 chrome)
 * -------------------------------------------------------------------------- */
hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
    opacity: 1;
}


/* ----------------------------------------------------------------------------
 *  List utilities
 * -------------------------------------------------------------------------- */
.list-unstyled {
    padding-left: 0;
    list-style: none;
}
.list-inline {
    padding-left: 0;
    list-style: none;
    margin-left: -5px;
}
.list-inline > li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
}


/* ----------------------------------------------------------------------------
 *  Page header (BS3 only — BS5 dropped this class)
 * -------------------------------------------------------------------------- */
.page-header {
    padding-bottom: 9px;
    margin: 40px 0 20px;
    border-bottom: 1px solid #eee;
}


/* ----------------------------------------------------------------------------
 *  Image utilities (BS5 renamed; cover both names)
 * -------------------------------------------------------------------------- */
.img-rounded { border-radius: 6px; }
.img-circle  { border-radius: 50%; }


/* ----------------------------------------------------------------------------
 *  Screen-reader-only (BS3 .sr-only -> BS5 .visually-hidden; cover both)
 * -------------------------------------------------------------------------- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ----------------------------------------------------------------------------
 *  Text alignment utilities (BS3 names; BS5 renamed left/right -> start/end)
 * -------------------------------------------------------------------------- */
.text-left   { text-align: left; }
.text-right  { text-align: right; }
.text-center { text-align: center; }
.text-justify { text-align: justify; }
.text-nowrap { white-space: nowrap; }
.text-lowercase  { text-transform: lowercase; }
.text-uppercase  { text-transform: uppercase; }
.text-capitalize { text-transform: capitalize; }


/* ----------------------------------------------------------------------------
 *  Display / visibility utilities (BS3 names; BS5 renamed/removed some)
 * -------------------------------------------------------------------------- */
.center-block {
    display: block;
    margin-right: auto;
    margin-left: auto;
}
.show {
    display: block !important;
}
.hidden {
    display: none !important;
}
.invisible {
    visibility: hidden;
}
.text-hide {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}


/* ----------------------------------------------------------------------------
 *  Clearfix (BS3 used for float-based grids; BS5 dropped since it's flex)
 * -------------------------------------------------------------------------- */
.clearfix:before,
.clearfix:after {
    display: table;
    content: " ";
}
.clearfix:after {
    clear: both;
}


/* ----------------------------------------------------------------------------
 *  Form element font inheritance (BS3 reboot)
 * -------------------------------------------------------------------------- */
input,
button,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}