/*!
 * bs3-compat.css — Bootstrap 3 compatibility layer for the OPAC running on Bootstrap 5.3.8
 *
 * WHY THIS EXISTS
 * The OPAC shares partials in both directions with the `main` (admin), `default`,
 * `search`, `reservation`, `chat`, `forms` and `form_preview` themes, and those themes
 * are still on Bootstrap 3.3.7. Their shared markup therefore cannot be renamed to BS5
 * class names — it has to keep rendering in both worlds. This file reinstates the BS3
 * class names Bootstrap 5 deleted, implemented on top of BS5, so that markup renders
 * unchanged on BS5 pages.
 *
 * LOAD ORDER (opac/partials/links_bs5.blade.php)
 *   bootstrap.min.css | bootstrap.rtl.min.css   <- BS5 5.3.8
 *   bs3-compat.css                              <- this file
 *   themes/light.css, style.css, ...            <- site CSS, must still win
 * It must load AFTER Bootstrap and BEFORE the site stylesheets: the site's own
 * overrides are authored against BS3 and have to keep the last word.
 *
 * EVERY VALUE HERE IS MEASURED, NOT RECALLED. They were captured from
 * themes/opac/assets/css/bootstrap.min.css (3.3.7) rendered in an isolated iframe and
 * diffed against 5.3.8 — see plans/opac-bootstrap-5-migration.md §4.2 and
 * public_html/bs5-probe.js. Target is pixel parity with BS3, not BS5's look.
 *
 * DIRECTION HANDLING
 * Physical properties plus a [dir="rtl"] override, mirroring how Bootstrap itself
 * ships separate LTR and RTL builds. Logical `float: inline-start` is avoided on
 * purpose: it needs Chrome 118+ / Safari 17.4+, which is too new for an OPAC's
 * visitors. `margin-inline-*` / `padding-inline-*` are used where support is old
 * enough (2020+) to be safe.
 * Measured in this app, the RTL sheet flips `.col-*`, `.pull-*`, `.close`,
 * `.caret`, `.nav-tabs > li`, `.pagination > li > a`, `.input-group-addon`,
 * `.list-inline` and `.modal-footer` — but does NOT flip `.text-left` / `.text-right`.
 *
 * REMOVAL CONDITION
 * Section A can be dropped once the OPAC's own markup is native BS5 and the design
 * is allowed to move to BS5 metrics. Sections B and C can only be dropped when the
 * `main` theme migrates to Bootstrap 5 — every Class B partial listed in the plan's
 * §3.3 depends on them. Do not delete either section piecemeal without re-running the
 * §11 verification sweep.
 */

/* ==========================================================================
   SECTION A — Bootstrap 3 base metrics
   These classes still exist in BS5, with different values. Restoring the BS3
   numbers is what keeps 220 KB of style.css — all of it authored against BS3 —
   rendering as it did. This is the section to delete first when the OPAC is
   eventually allowed to adopt BS5's own proportions.
   ========================================================================== */

/* Bootstrap 3 ships the unusual `html { font-size: 10px }` so that 1rem = 10px,
   and every rem in this app's CSS was authored against that. BS5 dropped the rule,
   which silently multiplies every rem by 1.6. Measured symptom: the announcement
   ticker's `--ticker-height: 3.5rem` went from 35px to 56px, growing the header on
   every page. Only eight rem values exist across the OPAC stylesheets, so this is
   cheap to restore and matches BS3 exactly.

   Caveat for whoever removes Section A: Bootstrap 5's own components size
   themselves in rem, so they render at 10/16 scale under this rule. That is
   intentional — the OPAC renders BS3 markup through this compat layer, not native
   BS5 components. Any BS5 component adopted later needs its metrics pinned here. */
html {
    font-size: 10px;
}

/* Typography. BS3: 14px/20px #333. BS5: 16px/24px #212529. Left alone, every
   piece of text on the OPAC would grow by 2px and reflow. style.css sets only
   font-family, so Bootstrap really is what governs size and colour here. */
body {
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
}

/* BS5 drops the fixed container ladder in favour of its own breakpoints.
   BS3 widths: 750 / 970 / 1170 at 768 / 992 / 1200.

   Declared as `width`, NOT `max-width`, deliberately — BS3 used `width`, and site
   CSS relies on being able to beat it. style_presets.blade.php gives
   `.container.opacSearchHeaderCustomStyle { width: 100% }`, which overrode BS3's
   `width: 1170px` and rendered that container full-bleed. A `max-width` here would
   clamp it to 1170px no matter what the site CSS says, which measured as a 735px
   width regression on the home page header. */
.container {
    padding-right: 15px;
    padding-left: 15px;
    /* BS3 sized containers with `width` alone and never set a max-width. BS5 adds
       one (up to 1320px), which silently caps any container the site widens by
       class — `.container.slider_container` and
       `.container.opacSearchHeaderCustomStyle` both carry `width: 100%` and were
       1905px wide under BS3, but got clamped to 1320px. */
    max-width: none;
    /* BS3 set no base width at all, so a container with margins shrank to fit. BS5
       adds `width: 100%`, and with border-box that overflows by the margins: the
       `.container.data_section` on /my_account/my_issues carries `margin: 0 28px`
       and pushed 28px off-screen below 768px, where BS3 scrolled cleanly. The
       media queries below restore BS3's width ladder from 768px up. */
    width: auto;
}

@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}

@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}

@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}

.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    width: auto;
}

/* --------------------------------------------------------------------------
   A.2 Reboot / base elements
   Bootstrap 5's Reboot restyles bare HTML elements differently from BS3's, and
   markup that uses no classes at all still shifts. Found by measuring, not by
   guessing: search-result cards grew ~100px each because BS5 adds
   `dd { margin-bottom: .5rem }`, and every advanced-search fieldset shrank
   because BS5 floats <legend> and sizes it with a viewport-relative
   `calc(1.275rem + .3vw)` instead of BS3's flat 21px.
   Values lifted from bootstrap.min.css 3.3.7.
   -------------------------------------------------------------------------- */

/* BS5 underlines every link by default; BS3 did not. */
a {
    color: #337ab7;
    text-decoration: none;
}

a:hover,
a:focus {
    color: #23527c;
    text-decoration: underline;
}

p {
    margin: 0 0 10px;
}

ul,
ol {
    margin-top: 0;
    margin-bottom: 10px;
}

/* BS5 adds margin-bottom to <dd>; BS3 only zeroed its indent. */
dl {
    margin-top: 0;
    margin-bottom: 20px;
}

dt,
dd {
    line-height: 1.42857143;
}

dt {
    font-weight: 700;
}

dd {
    margin-bottom: 0;
    margin-left: 0;
}

fieldset {
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
}

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

hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
    opacity: 1;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    margin-bottom: 10px;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}

h1, h2, h3,
.h1, .h2, .h3 {
    margin-top: 20px;
}

h4, h5, h6,
.h4, .h5, .h6 {
    margin-top: 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; }

small,
.small {
    font-size: 85%;
}

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

/* BS5 sets `th { text-align: inherit }`; BS3 pinned it, and the RTL sheet flipped it. */
th {
    text-align: left;
}

caption {
    padding-top: 8px;
    padding-bottom: 8px;
    color: #777;
    text-align: left;
}

[dir="rtl"] th,
[dir="rtl"] caption {
    text-align: right;
}

/* The grid (.row and every .col-*) lives in section B.1 — BS3's is float based and
   BS5's is flex, so it needs replacing wholesale rather than retuning. */

/* Forms. BS3 control height is 34px; BS5's is 38px. Anything that lines a
   control up against a button, an addon or a select2 shell depends on 34px. */
.form-control {
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

textarea.form-control,
select[multiple].form-control {
    height: auto;
}

/* BS3 only paired line-height with height on the sized variants (.form-group-sm /
   -lg), never on the base select. A 34px line box inside the 20px content box that
   34px height and 6px padding leave over clips the text - visibly so in Arabic, and
   unconditionally once appearance: none makes the control honour line-height. */
select.form-control {
    height: 34px;
    line-height: 1.42857143;
}

/* BS5 renders file inputs and colour pickers through .form-control too, where a
   fixed 34px would clip the button. */
input[type="file"].form-control,
input[type="color"].form-control {
    height: auto;
}

/* Checkboxes and radios that also carry .form-control. Bootstrap 3's reboot pinned
   them back with `input[type=checkbox], input[type=radio] { padding: 0 }` — an
   attribute selector, specificity 0-1-1, which outranks .form-control at 0-1-0.
   Bootstrap 5's reboot dropped that rule, so the control picked up the full text-input
   box instead. Measured on /new_search: the 21 .save-checkbox.form-control per-result
   checkboxes went from `border-width: 0; padding: 0` on BS3 to a 1px #ccc border with
   a 4px radius and 6px/12px padding on BS5 — a visible grey box around every one.
   Height is deliberately NOT reset: BS3's rule only zeroed the padding, so these kept
   .form-control's 34px, and `height: auto` collapses them to 0. */
input[type="checkbox"].form-control,
input[type="radio"].form-control {
    padding: 0;
    border-width: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Buttons. BS3: 6px/12px, 14px, radius 4px — 34px tall, matching .form-control. */
.btn {
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    border-radius: 4px;
}

.btn-lg {
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px;
}

.btn-sm {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

/* Tables. BS3 pads cells 8px and adds a top border; BS5 uses a shadow-based
   striping model with different padding. */
.table {
    margin-bottom: 20px;
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd;
}

.table > thead > tr > th {
    vertical-align: bottom;
    border-bottom: 2px solid #ddd;
}

.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > td {
    border-top: 0;
}

/* Alerts. BS3 keeps a flat 15px box with solid variant colours; BS5 recolours
   them through --bs-alert-* and pads differently. */
.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;
}

/* Badges. BS3 is a grey pill; BS5 is a square primary-coloured chip. */
.badge {
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background-color: #777;
    border-radius: 10px;
}

/* Modal chrome. BS5 moved to a --bs-modal-* variable model with different
   padding and a bordered footer that uses gap instead of float. */
.modal-header {
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
}

.modal-title {
    margin: 0;
    line-height: 1.42857143;
}

.modal-body {
    position: relative;
    padding: 15px;
}

.modal-footer {
    padding: 15px;
    text-align: right;
    border-top: 1px solid #e5e5e5;
}

[dir="rtl"] .modal-footer {
    text-align: left;
}

/* Tabs and pagination keep BS3 metrics; their legacy `li > a` structure is
   reinstated in section B. */
.nav-tabs {
    border-bottom: 1px solid #ddd;
}

.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
}

/* ==========================================================================
   SECTION B — class names Bootstrap 5 deleted outright
   Without these the markup in the plan's Class B (frozen) list renders as
   unstyled div soup: panels lose their box, labels lose their colour, columns
   lose their width, and .collapse.in never opens.
   ========================================================================== */

/* @generated bs3-grid start */

/* Bootstrap 3's grid is FLOAT based; Bootstrap 5's is FLEX. That single difference
   is the largest behavioural change in the whole migration, because every column
   in this app - and the ~15 .col-* overrides in style.css - assumes floats.
   Measured symptom before this section existed: the footer's .row shrink-wrapped to
   310px instead of filling 1789px, its columns collapsed to 155/52/103px, and the
   footer grew 952px taller. Forcing display:block on that row restored it exactly.

   So the BS3 grid is reinstated wholesale rather than half-adopting BS5's:
     - .row goes back to a block box with a clearfix and -15px side margins
     - every .col-* floats and takes an explicit width
     - BS5's flex declarations on .row / .row > * are neutralised
     - BS3's breakpoints are restored: sm 768, md 992, lg 1200. BS5 moved md to
       768px, so an unpatched .col-md-6 would go half-width a full breakpoint early.

   Generated by tmp/gen_bs3_grid.js - regenerate rather than hand-editing. */

.row {
    --bs-gutter-x: 30px;
    display: block;
    margin-right: -15px;
    margin-left: -15px;
}

.row::before,
.row::after {
    display: table;
    content: " ";
}

.row::after {
    clear: both;
}

/* The RTL float rules below are written `:where([dir="rtl"]) .col-*`, not
   `[dir="rtl"] .col-*`, so they weigh the same as a plain `.col-*` (0-1-0) the way
   Bootstrap 3's separate RTL sheet did. The bare attribute selector scores 0-2-0 and
   silently outranks site rules BS3 let win — `.col-centered { float: none }` in
   style.css is the one that matters here, and losing it re-floated every centred
   column on the home page. Keep `:where()` on any RTL variant added later. */

/* BS3's responsive-table reset, which BS5 dropped along with the float grid. A
   `td`/`th` carrying a .col-* class must stay a table cell instead of being floated
   out of the table: `<th class="col-xs-4">` on /my_account/profile went table-cell
   229x40 under BS3 and block 47x64 without this, costing the page 72px at 768. */
table td[class*="col-"],
table th[class*="col-"] {
    position: static;
    display: table-cell;
    float: none;
}

/* BS5 gives every direct child of .row width:100% and flex sizing. Under the float
   grid those children must size from their own .col-* rule instead. */
.row > * {
    flex-shrink: initial;
    width: auto;
    max-width: none;
    padding-right: 0;
    padding-left: 0;
    margin-top: 0;
}

/* Shared column box: BS3 puts the gutter on the column as padding. */
.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,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

/* Neutralisers first, ON PURPOSE. Bootstrap 5 starts `md` at 768px and `lg` at
   992px, where Bootstrap 3 starts them at 992px and 1200px, so BS5 has already
   sized a .col-md-* before BS3 would. These blocks undo that early sizing.

   They MUST precede every width declaration below, including .col-xs-*. When they
   sat after the width blocks, `width: auto` also clobbered the width a smaller tier
   had legitimately set: a `col-md-2 col-sm-6` shrank to its content in the 768-991
   band instead of taking 50%, which collapsed the open-access section on the home
   page from 4000px to 200px. Same trap for `col-lg-* col-md-*` between 992 and 1199,
   and for `col-xs-* col-md-*` below 992. */

/* Below 768px a .col-sm-* is full width in BS3; BS5 may already have sized it. */
@media (max-width: 767px) {
    .col-sm-1,
    .col-sm-2,
    .col-sm-3,
    .col-sm-4,
    .col-sm-5,
    .col-sm-6,
    .col-sm-7,
    .col-sm-8,
    .col-sm-9,
    .col-sm-10,
    .col-sm-11,
    .col-sm-12 {
        float: none;
        width: auto;
    }
}

/* Below 992px a .col-md-* is full width in BS3; BS5 may already have sized it. */
@media (max-width: 991px) {
    .col-md-1,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-md-10,
    .col-md-11,
    .col-md-12 {
        float: none;
        width: auto;
    }
}

/* Below 1200px a .col-lg-* is full width in BS3; BS5 may already have sized it. */
@media (max-width: 1199px) {
    .col-lg-1,
    .col-lg-2,
    .col-lg-3,
    .col-lg-4,
    .col-lg-5,
    .col-lg-6,
    .col-lg-7,
    .col-lg-8,
    .col-lg-9,
    .col-lg-10,
    .col-lg-11,
    .col-lg-12 {
        float: none;
        width: auto;
    }
}

/* .col-xs-* applies at every width. */
.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 {
    float: left;
}

:where([dir="rtl"]) .col-xs-1,
:where([dir="rtl"]) .col-xs-2,
:where([dir="rtl"]) .col-xs-3,
:where([dir="rtl"]) .col-xs-4,
:where([dir="rtl"]) .col-xs-5,
:where([dir="rtl"]) .col-xs-6,
:where([dir="rtl"]) .col-xs-7,
:where([dir="rtl"]) .col-xs-8,
:where([dir="rtl"]) .col-xs-9,
:where([dir="rtl"]) .col-xs-10,
:where([dir="rtl"]) .col-xs-11,
:where([dir="rtl"]) .col-xs-12 {
    float: right;
}

.col-xs-12 { width: 100%; }
.col-xs-11 { width: 91.66666667%; }
.col-xs-10 { width: 83.33333333%; }
.col-xs-9 { width: 75%; }
.col-xs-8 { width: 66.66666667%; }
.col-xs-7 { width: 58.33333333%; }
.col-xs-6 { width: 50%; }
.col-xs-5 { width: 41.66666667%; }
.col-xs-4 { width: 33.33333333%; }
.col-xs-3 { width: 25%; }
.col-xs-2 { width: 16.66666667%; }
.col-xs-1 { width: 8.33333333%; }

.col-xs-offset-12 { margin-inline-start: 100%; }
.col-xs-offset-11 { margin-inline-start: 91.66666667%; }
.col-xs-offset-10 { margin-inline-start: 83.33333333%; }
.col-xs-offset-9 { margin-inline-start: 75%; }
.col-xs-offset-8 { margin-inline-start: 66.66666667%; }
.col-xs-offset-7 { margin-inline-start: 58.33333333%; }
.col-xs-offset-6 { margin-inline-start: 50%; }
.col-xs-offset-5 { margin-inline-start: 41.66666667%; }
.col-xs-offset-4 { margin-inline-start: 33.33333333%; }
.col-xs-offset-3 { margin-inline-start: 25%; }
.col-xs-offset-2 { margin-inline-start: 16.66666667%; }
.col-xs-offset-1 { margin-inline-start: 8.33333333%; }
.col-xs-offset-0 { margin-inline-start: 0; }

@media (min-width: 768px) {
    .col-sm-1,
    .col-sm-2,
    .col-sm-3,
    .col-sm-4,
    .col-sm-5,
    .col-sm-6,
    .col-sm-7,
    .col-sm-8,
    .col-sm-9,
    .col-sm-10,
    .col-sm-11,
    .col-sm-12 {
        float: left;
    }

    :where([dir="rtl"]) .col-sm-1,
    :where([dir="rtl"]) .col-sm-2,
    :where([dir="rtl"]) .col-sm-3,
    :where([dir="rtl"]) .col-sm-4,
    :where([dir="rtl"]) .col-sm-5,
    :where([dir="rtl"]) .col-sm-6,
    :where([dir="rtl"]) .col-sm-7,
    :where([dir="rtl"]) .col-sm-8,
    :where([dir="rtl"]) .col-sm-9,
    :where([dir="rtl"]) .col-sm-10,
    :where([dir="rtl"]) .col-sm-11,
    :where([dir="rtl"]) .col-sm-12 {
        float: right;
    }

    .col-sm-12 { width: 100%; }
    .col-sm-11 { width: 91.66666667%; }
    .col-sm-10 { width: 83.33333333%; }
    .col-sm-9 { width: 75%; }
    .col-sm-8 { width: 66.66666667%; }
    .col-sm-7 { width: 58.33333333%; }
    .col-sm-6 { width: 50%; }
    .col-sm-5 { width: 41.66666667%; }
    .col-sm-4 { width: 33.33333333%; }
    .col-sm-3 { width: 25%; }
    .col-sm-2 { width: 16.66666667%; }
    .col-sm-1 { width: 8.33333333%; }

    .col-sm-offset-12 { margin-inline-start: 100%; }
    .col-sm-offset-11 { margin-inline-start: 91.66666667%; }
    .col-sm-offset-10 { margin-inline-start: 83.33333333%; }
    .col-sm-offset-9 { margin-inline-start: 75%; }
    .col-sm-offset-8 { margin-inline-start: 66.66666667%; }
    .col-sm-offset-7 { margin-inline-start: 58.33333333%; }
    .col-sm-offset-6 { margin-inline-start: 50%; }
    .col-sm-offset-5 { margin-inline-start: 41.66666667%; }
    .col-sm-offset-4 { margin-inline-start: 33.33333333%; }
    .col-sm-offset-3 { margin-inline-start: 25%; }
    .col-sm-offset-2 { margin-inline-start: 16.66666667%; }
    .col-sm-offset-1 { margin-inline-start: 8.33333333%; }
    .col-sm-offset-0 { margin-inline-start: 0; }
}

@media (min-width: 992px) {
    .col-md-1,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-md-10,
    .col-md-11,
    .col-md-12 {
        float: left;
    }

    :where([dir="rtl"]) .col-md-1,
    :where([dir="rtl"]) .col-md-2,
    :where([dir="rtl"]) .col-md-3,
    :where([dir="rtl"]) .col-md-4,
    :where([dir="rtl"]) .col-md-5,
    :where([dir="rtl"]) .col-md-6,
    :where([dir="rtl"]) .col-md-7,
    :where([dir="rtl"]) .col-md-8,
    :where([dir="rtl"]) .col-md-9,
    :where([dir="rtl"]) .col-md-10,
    :where([dir="rtl"]) .col-md-11,
    :where([dir="rtl"]) .col-md-12 {
        float: right;
    }

    .col-md-12 { width: 100%; }
    .col-md-11 { width: 91.66666667%; }
    .col-md-10 { width: 83.33333333%; }
    .col-md-9 { width: 75%; }
    .col-md-8 { width: 66.66666667%; }
    .col-md-7 { width: 58.33333333%; }
    .col-md-6 { width: 50%; }
    .col-md-5 { width: 41.66666667%; }
    .col-md-4 { width: 33.33333333%; }
    .col-md-3 { width: 25%; }
    .col-md-2 { width: 16.66666667%; }
    .col-md-1 { width: 8.33333333%; }

    .col-md-offset-12 { margin-inline-start: 100%; }
    .col-md-offset-11 { margin-inline-start: 91.66666667%; }
    .col-md-offset-10 { margin-inline-start: 83.33333333%; }
    .col-md-offset-9 { margin-inline-start: 75%; }
    .col-md-offset-8 { margin-inline-start: 66.66666667%; }
    .col-md-offset-7 { margin-inline-start: 58.33333333%; }
    .col-md-offset-6 { margin-inline-start: 50%; }
    .col-md-offset-5 { margin-inline-start: 41.66666667%; }
    .col-md-offset-4 { margin-inline-start: 33.33333333%; }
    .col-md-offset-3 { margin-inline-start: 25%; }
    .col-md-offset-2 { margin-inline-start: 16.66666667%; }
    .col-md-offset-1 { margin-inline-start: 8.33333333%; }
    .col-md-offset-0 { margin-inline-start: 0; }
}

@media (min-width: 1200px) {
    .col-lg-1,
    .col-lg-2,
    .col-lg-3,
    .col-lg-4,
    .col-lg-5,
    .col-lg-6,
    .col-lg-7,
    .col-lg-8,
    .col-lg-9,
    .col-lg-10,
    .col-lg-11,
    .col-lg-12 {
        float: left;
    }

    :where([dir="rtl"]) .col-lg-1,
    :where([dir="rtl"]) .col-lg-2,
    :where([dir="rtl"]) .col-lg-3,
    :where([dir="rtl"]) .col-lg-4,
    :where([dir="rtl"]) .col-lg-5,
    :where([dir="rtl"]) .col-lg-6,
    :where([dir="rtl"]) .col-lg-7,
    :where([dir="rtl"]) .col-lg-8,
    :where([dir="rtl"]) .col-lg-9,
    :where([dir="rtl"]) .col-lg-10,
    :where([dir="rtl"]) .col-lg-11,
    :where([dir="rtl"]) .col-lg-12 {
        float: right;
    }

    .col-lg-12 { width: 100%; }
    .col-lg-11 { width: 91.66666667%; }
    .col-lg-10 { width: 83.33333333%; }
    .col-lg-9 { width: 75%; }
    .col-lg-8 { width: 66.66666667%; }
    .col-lg-7 { width: 58.33333333%; }
    .col-lg-6 { width: 50%; }
    .col-lg-5 { width: 41.66666667%; }
    .col-lg-4 { width: 33.33333333%; }
    .col-lg-3 { width: 25%; }
    .col-lg-2 { width: 16.66666667%; }
    .col-lg-1 { width: 8.33333333%; }

    .col-lg-offset-12 { margin-inline-start: 100%; }
    .col-lg-offset-11 { margin-inline-start: 91.66666667%; }
    .col-lg-offset-10 { margin-inline-start: 83.33333333%; }
    .col-lg-offset-9 { margin-inline-start: 75%; }
    .col-lg-offset-8 { margin-inline-start: 66.66666667%; }
    .col-lg-offset-7 { margin-inline-start: 58.33333333%; }
    .col-lg-offset-6 { margin-inline-start: 50%; }
    .col-lg-offset-5 { margin-inline-start: 41.66666667%; }
    .col-lg-offset-4 { margin-inline-start: 33.33333333%; }
    .col-lg-offset-3 { margin-inline-start: 25%; }
    .col-lg-offset-2 { margin-inline-start: 16.66666667%; }
    .col-lg-offset-1 { margin-inline-start: 8.33333333%; }
    .col-lg-offset-0 { margin-inline-start: 0; }
}

/* @generated bs3-grid end */

/* --------------------------------------------------------------------------
   B.2 Floats, centring, alignment, visibility
   -------------------------------------------------------------------------- */

/* Measured: the RTL sheet flips these, so `.pull-right` really does float left
   in Arabic. Reproduced rather than "corrected" — 59 occurrences depend on it. */
.pull-left {
    float: left;
}

.pull-right {
    float: right;
}

[dir="rtl"] .pull-left {
    float: right;
}

[dir="rtl"] .pull-right {
    float: left;
}

.center-block {
    display: block;
    margin-right: auto;
    margin-left: auto;
}

/* Deliberately physical, NOT logical. Measured: the RTL sheet leaves these
   alone, and ltr.css:166-171 inverts them for English with !important. Using
   BS5's logical `text-start`/`text-end` semantics here would silently re-align
   every English page. ltr.css still wins because these are unprefixed. */
.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

/* BS3 applied a clearfix to every container that was expected to hold floats.
   BS5 dropped all of them, because a flex container contains its children without
   help — but this compat layer puts the float grid back, so the clearfixes have to
   come back with it. Measured symptom: the navbar collapsed from 97px to 50px
   because its floated contents no longer expanded it, and each such collapse
   shifted everything below.
   This is BS3's exact list, minus .row and .panel-body which are handled where
   they are defined. */
.clearfix::before,
.clearfix::after,
.container::before,
.container::after,
.container-fluid::before,
.container-fluid::after,
.navbar::before,
.navbar::after,
.navbar-header::before,
.navbar-header::after,
.navbar-collapse::before,
.navbar-collapse::after,
.nav::before,
.nav::after,
.form-horizontal .form-group::before,
.form-horizontal .form-group::after,
.btn-toolbar::before,
.btn-toolbar::after,
.btn-group-vertical > .btn-group::before,
.btn-group-vertical > .btn-group::after,
.pager::before,
.pager::after,
.modal-footer::before,
.modal-footer::after {
    display: table;
    content: " ";
}

.clearfix::after,
.container::after,
.container-fluid::after,
.navbar::after,
.navbar-header::after,
.navbar-collapse::after,
.nav::after,
.form-horizontal .form-group::after,
.btn-toolbar::after,
.btn-group-vertical > .btn-group::after,
.pager::after,
.modal-footer::after {
    clear: both;
}

/* BS3's plain display utilities, replaced by d-none in BS5. 16 elements under
   themes/opac use them. Measured symptom: the profile page's
   `input[type=file].form-control.hide` became visible and 34px tall, because
   nothing was hiding it any more.

   BS3's counterpart `.show { display: block !important }` is deliberately NOT
   reinstated: Bootstrap 5 uses `.show` as component state for modals, dropdowns,
   collapses and offcanvas, and forcing display:block on it would break all of
   them. Verified safe — no OPAC markup uses `show` as a bare utility class
   (only `show-tick`, `show-on-mobile`, `show-on-tablet`). */
.hide {
    display: none !important;
}

.hidden {
    display: none !important;
    visibility: hidden !important;
}

.invisible {
    visibility: hidden;
}

.text-hide {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}

/* BS3 responsive visibility. BS5 replaced these with d-none/d-*-block, so
   without these rules `.visible-xs` content shows on desktop — the opposite of
   what the markup intends. */
.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: 767px) {
    .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; }
    .hidden-xs { display: none !important; }
}

@media (min-width: 768px) and (max-width: 991px) {
    .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; }
    .hidden-sm { display: none !important; }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .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; }
    .hidden-md { display: none !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; }
    .hidden-lg { display: none !important; }
}

/* BS5 draws the dropdown arrow with a ::after on .dropdown-toggle; BS3 expected
   an explicit <span class="caret">. */
.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-inline-start: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

/* --------------------------------------------------------------------------
   B.3 Images
   -------------------------------------------------------------------------- */
.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

.img-circle {
    border-radius: 50%;
}

.img-rounded {
    border-radius: 6px;
}

.thumbnail {
    display: block;
    padding: 4px;
    margin-bottom: 20px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: border 0.2s ease-in-out;
}

.thumbnail > img,
.thumbnail a > img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-right: auto;
    margin-left: auto;
}

.thumbnail .caption {
    padding: 9px;
    color: #333;
}

/* --------------------------------------------------------------------------
   B.4 Panels, wells and the other removed containers
   63 blade occurrences of panel* — the single largest deleted-class group.
   -------------------------------------------------------------------------- */
.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.panel-body {
    padding: 15px;
}

.panel-body::before,
.panel-body::after {
    display: table;
    content: " ";
}

.panel-body::after {
    clear: both;
}

.panel-heading {
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.panel-heading > .dropdown .dropdown-toggle {
    color: inherit;
}

.panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
    color: inherit;
}

.panel-title > a,
.panel-title > small,
.panel-title > .small,
.panel-title > small > a,
.panel-title > .small > 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,
.panel-group .panel-heading + .panel-collapse > .list-group {
    border-top: 1px solid #ddd;
}

.panel-group .panel-footer {
    border-top: 0;
}

.panel-group .panel-footer + .panel-collapse .panel-body {
    border-bottom: 1px solid #ddd;
}

.panel-default {
    border-color: #ddd;
}

.panel-default > .panel-heading {
    color: #333;
    background-color: #f5f5f5;
    border-color: #ddd;
}

.panel-default > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #ddd;
}

.panel-default > .panel-footer + .panel-collapse > .panel-body {
    border-bottom-color: #ddd;
}

.panel-primary {
    border-color: #337ab7;
}

.panel-primary > .panel-heading {
    color: #fff;
    background-color: #337ab7;
    border-color: #337ab7;
}

.panel-primary > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #337ab7;
}

.panel-success {
    border-color: #d6e9c6;
}

.panel-success > .panel-heading {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

.panel-success > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #d6e9c6;
}

.panel-info {
    border-color: #bce8f1;
}

.panel-info > .panel-heading {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}

.panel-info > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #bce8f1;
}

.panel-warning {
    border-color: #faebcc;
}

.panel-warning > .panel-heading {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}

.panel-warning > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #faebcc;
}

.panel-danger {
    border-color: #ebccd1;
}

.panel-danger > .panel-heading {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

.panel-danger > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #ebccd1;
}

.panel > .table,
.panel > .table-responsive > .table,
.panel > .panel-collapse > .table {
    margin-bottom: 0;
}

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

.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-body {
    width: 10000px;
}

.media-body,
.media-left,
.media-right {
    display: table-cell;
    vertical-align: top;
}

/* --------------------------------------------------------------------------
   B.4a Card metrics pinned to BS3 panel values
   The mirror image of B.4: B.4 keeps BS3 names alive for the frozen Class B
   partials, this keeps migrated `card` markup rendering at BS3 panel pixels.
   BS5's card differs from BS3's panel on every axis we can measure — display
   block -> flex column, margin-bottom 20px -> 0, radius 4px -> 6px, body
   padding 15px -> 16px, header padding 10/15 -> 8/16 plus a new rgba(0,0,0,.03)
   background, and no box-shadow at all. Without this block every panel->card
   rename moves the page.

   BS3's colour modifiers (panel-default, panel-primary) have no BS5 counterpart
   and are NOT reinstated here — `.card` keeps `.panel`'s transparent border and
   the four call sites that needed a visible one set border-color locally.

   Delete alongside B.4 when the `main` theme migrates and the OPAC can take
   Bootstrap 5's own card look.
   -------------------------------------------------------------------------- */
.card {
    position: static;
    display: block;
    min-width: auto;
    margin-bottom: 20px;
    color: inherit;
    overflow-wrap: normal;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.card-body {
    flex: none;
    padding: 15px;
}

.card-body::before,
.card-body::after {
    display: table;
    content: " ";
}

.card-body::after {
    clear: both;
}

.card-header,
.card-header:first-child {
    padding: 10px 15px;
    background-color: transparent;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.card-header > .dropdown .dropdown-toggle {
    color: inherit;
}

.card-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
    color: inherit;
}

.card-title > a,
.card-title > small,
.card-title > .small,
.card-title > small > a,
.card-title > .small > a {
    color: inherit;
}

.card-footer,
.card-footer:last-child {
    padding: 10px 15px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}

.card > .table,
.card > .table-responsive > .table,
.card > .collapse > .table {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   B.4b Navbar
   The single biggest source of drift measured after the swap: the home page grew
   1552px because BS5's `.navbar-nav` is `flex-direction: column` unless it sits
   inside a `.navbar-expand-*`, so a horizontal nav stacked into a 789px-tall
   column and pushed the whole page down. BS3's navbar is a block box with floated
   children, and style.css has ~170 `.navbar*` rules written against exactly that.
   These rules restore the BS3 box model; style.css still overrides on top.
   -------------------------------------------------------------------------- */
.navbar {
    position: relative;
    display: block;
    min-height: 50px;
    padding: 0;
    margin-bottom: 20px;
    border: 1px solid transparent;
    flex-wrap: nowrap;
}

@media (min-width: 768px) {
    .navbar {
        border-radius: 4px;
    }
}

/* BS5 makes the navbar's direct container flex; BS3 left it a block. */
.navbar > .container,
.navbar > .container-fluid {
    display: block;
    flex-wrap: nowrap;
}

.navbar-header::before,
.navbar-header::after,
.navbar-collapse::before,
.navbar-collapse::after {
    display: table;
    content: " ";
}

.navbar-header::after,
.navbar-collapse::after {
    clear: both;
}

.navbar-collapse {
    padding-right: 15px;
    padding-left: 15px;
    overflow-x: visible;
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    -webkit-overflow-scrolling: touch;
    flex-basis: auto;
    flex-grow: 0;
    align-items: stretch;
}

.navbar-collapse.in {
    overflow-y: auto;
}

@media (min-width: 768px) {
    .navbar-header {
        float: left;
    }

    [dir="rtl"] .navbar-header {
        float: right;
    }

    .navbar-collapse {
        width: auto;
        border-top: 0;
        box-shadow: none;
    }

    /* BS3 forced an always-open collapse above the breakpoint. Without this the
       BS5 .collapse rule keeps the desktop nav hidden. */
    .navbar-collapse.collapse {
        display: block !important;
        height: auto !important;
        padding-bottom: 0;
        overflow: visible !important;
        visibility: visible !important;
    }

    .navbar-collapse.in {
        overflow-y: visible;
    }
}

/* BS3 never made .nav or .navbar-nav a flex container, so any site rule that opts
   into flex — style.css does exactly that at `@media (min-width: 1248px)
   .navbar-nav { display: flex }` — used to inherit the INITIAL flex values: row and
   nowrap. BS5 sets `flex-direction: column` and `flex-wrap: wrap` on those same
   classes, so the site's own `display: flex` suddenly produced a wrapped vertical
   column 588px tall. Resetting both back to their initial values is what makes the
   site's flex opt-in behave the way it did under BS3. */
.navbar-nav {
    display: block;
    padding-left: 0;
    margin: 7.5px -15px;
    list-style: none;
    flex-direction: row;
    flex-wrap: nowrap;
}

.navbar-nav > li {
    position: relative;
    display: block;
}

.navbar-nav > li > a {
    position: relative;
    display: block;
    padding: 10px 15px;
    line-height: 20px;
    text-decoration: none;
}

@media (min-width: 768px) {
    .navbar-nav {
        float: left;
        margin: 0;
    }

    /* No [dir="rtl"] flip for the .navbar-nav container itself, on purpose.
       BS3's RTL sheet did flip it to float:right, but style.css overrides that with
       `.navbar-nav { float: left }` at min-width 1246/1248, and under BS3 that override
       won because both rules are specificity 0-1-0 and style.css loads last. So the
       menu sat on the LEFT in Arabic, which is the design: ltr.css flips it back to
       float:right for English, where the logo is on the left.
       Reinstating the flip here as `[dir="rtl"] .navbar-nav` (0-2-0) outranked
       style.css and dragged the Arabic menu over to the right, next to the logo.
       The `> li` flip below is still needed — items must read right-to-left inside
       the menu regardless of which side the menu itself sits on. */

    .navbar-nav > li {
        float: left;
    }

    [dir="rtl"] .navbar-nav > li {
        float: right;
    }

    .navbar-nav > li > a {
        padding-top: 15px;
        padding-bottom: 15px;
    }
}

/* BS5 adds `.navbar-nav .dropdown-menu { position: static }` so submenus stack
   inside a collapsed navbar. BS3 had no such rule, so the menu stayed absolute and
   out of flow. This theme's menus are hover-driven and style.css already forces
   `.navbar-nav > li > .dropdown-menu { display: block }`; static positioning
   therefore dropped a 588px-tall submenu into the flow, stretched its <li>, and —
   because the site makes the nav a flex row — stretched every sibling to match.
   That single declaration accounted for most of the measured page-height growth. */
.navbar-nav .dropdown-menu {
    position: absolute;
}

.navbar-brand {
    float: left;
    height: 50px;
    padding: 15px;
    font-size: 18px;
    line-height: 20px;
}

[dir="rtl"] .navbar-brand {
    float: right;
}

.navbar-brand > img {
    display: block;
}

/* In this theme `.navbar-toggle` is a class on an <a> used as a modal trigger, not
   a real BS3 collapse toggler — but it still needs the BS3 box. */
.navbar-toggle {
    position: relative;
    float: right;
    padding: 9px 10px;
    margin-top: 8px;
    margin-right: 15px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

[dir="rtl"] .navbar-toggle {
    float: left;
    margin-right: 0;
    margin-left: 15px;
}

.navbar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
}

.navbar-toggle .icon-bar + .icon-bar {
    margin-top: 4px;
}

@media (min-width: 768px) {
    .navbar-toggle {
        display: none;
    }
}

.navbar-text {
    margin-top: 15px;
    margin-bottom: 15px;
}

@media (min-width: 768px) {
    .navbar-text {
        float: left;
        margin-right: 15px;
        margin-left: 15px;
    }

    .navbar-left {
        float: left !important;
    }

    .navbar-right {
        float: right !important;
        margin-right: -15px;
    }

    [dir="rtl"] .navbar-left {
        float: right !important;
    }

    [dir="rtl"] .navbar-right {
        float: left !important;
        margin-right: 0;
        margin-left: -15px;
    }
}

.navbar-default {
    background-color: #f8f8f8;
    border-color: #e7e7e7;
}

.navbar-default .navbar-brand,
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-text {
    color: #777;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #555;
    background-color: #e7e7e7;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #333;
    background-color: transparent;
}

.navbar-default .navbar-toggle {
    border-color: #ddd;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #888;
}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
    border-color: #e7e7e7;
}

.navbar-static-top {
    z-index: 1000;
    border-width: 0 0 1px;
}

.navbar-fixed-top,
.navbar-fixed-bottom {
    position: fixed;
    right: 0;
    left: 0;
    z-index: 1030;
}

.navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
}

.navbar-fixed-bottom {
    bottom: 0;
    margin-bottom: 0;
    border-width: 1px 0 0;
}

@media (min-width: 768px) {
    .navbar-static-top,
    .navbar-fixed-top,
    .navbar-fixed-bottom {
        border-radius: 0;
    }
}

/* --------------------------------------------------------------------------
   B.5 Labels — 34 blade occurrences of `label label-*`
   Note the element-vs-class collision: BS3 styles the <label> ELEMENT and the
   .label CLASS differently, and BS5 removed the class entirely. The class rules
   are scoped to non-label elements so form labels are not turned into chips.
   -------------------------------------------------------------------------- */
span.label,
a.label,
div.label,
small.label,
strong.label,
em.label,
b.label,
i.label,
p.label {
    display: inline;
    padding: 0.2em 0.6em 0.3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.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; }

/* BS3 styled every <label> element with a bottom margin and bold weight, and
   the site CSS is spaced on that assumption. BS5's reboot drops both. */
label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   B.6 Buttons BS5 removed — 17 `btn-default`, 10 `btn-xs`
   -------------------------------------------------------------------------- */
.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

.btn-default:hover,
.btn-default:focus {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}

.btn-default:active,
.btn-default.active {
    color: #333;
    background-color: #d4d4d4;
    border-color: #8c8c8c;
}

.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
    opacity: 0.65;
}

.btn-xs {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

/* --------------------------------------------------------------------------
   B.7 Form structure BS5 removed
   89 `form-group`, 44 `input-group-addon` / `input-group-btn`.
   -------------------------------------------------------------------------- */
.form-group {
    margin-bottom: 15px;
}

.control-label {
    margin-bottom: 5px;
    font-weight: 700;
}

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

/* BS3 validation state wrappers. BS5 replaced them with is-invalid on the
   control plus a sibling .invalid-feedback, which this markup does not have. */
.has-success .help-block,
.has-success .control-label,
.has-success .radio,
.has-success .checkbox,
.has-success .radio-inline,
.has-success .checkbox-inline {
    color: #3c763d;
}

.has-success .form-control {
    border-color: #3c763d;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.has-warning .help-block,
.has-warning .control-label,
.has-warning .radio,
.has-warning .checkbox,
.has-warning .radio-inline,
.has-warning .checkbox-inline {
    color: #8a6d3b;
}

.has-warning .form-control {
    border-color: #8a6d3b;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.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;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

/* BS3 input groups are display:table; BS5 rebuilt them as flex with
   .input-group-text and no .input-group-btn wrapper. */
.input-group {
    position: relative;
    display: table;
    border-collapse: separate;
}

.input-group .form-control {
    position: relative;
    z-index: 2;
    float: left;
    width: 100%;
    margin-bottom: 0;
}

.input-group-addon,
.input-group-btn,
.input-group .form-control {
    display: table-cell;
}

.input-group-addon:not(:first-child):not(:last-child),
.input-group-btn:not(:first-child):not(:last-child),
.input-group .form-control:not(:first-child):not(:last-child) {
    border-radius: 0;
}

.input-group-addon,
.input-group-btn {
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
}

.input-group-addon {
    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;
}

.input-group-addon.input-group-sm {
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 3px;
}

.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group-addon:first-child {
    border-right: 0;
}

.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group > .btn,
.input-group-btn:last-child > .dropdown-toggle,
.input-group-btn:first-child > .btn:not(:first-child),
.input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group-addon:last-child {
    border-left: 0;
}

/* Mirror of the two radius blocks above for Arabic, matching the measured
   behaviour of the current bootstrap-rtl.min.css. */
[dir="rtl"] .input-group .form-control:first-child,
[dir="rtl"] .input-group-addon:first-child,
[dir="rtl"] .input-group-btn:first-child > .btn,
[dir="rtl"] .input-group-btn:first-child > .dropdown-toggle {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

[dir="rtl"] .input-group-addon:first-child {
    border-right: 1px solid #ccc;
    border-left: 0;
}

[dir="rtl"] .input-group .form-control:last-child,
[dir="rtl"] .input-group-addon:last-child,
[dir="rtl"] .input-group-btn:last-child > .btn,
[dir="rtl"] .input-group-btn:last-child > .dropdown-toggle {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

[dir="rtl"] .input-group-addon:last-child {
    border-left: 1px solid #ccc;
    border-right: 0;
}

.input-group-btn {
    position: relative;
    font-size: 0;
    white-space: nowrap;
}

.input-group-btn > .btn {
    position: relative;
}

.input-group-btn > .btn + .btn {
    margin-inline-start: -1px;
}

.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group {
    margin-inline-end: -1px;
}

.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group {
    z-index: 2;
    margin-inline-start: -1px;
}

/* BS3 checkbox/radio wrappers. BS5 uses .form-check with a very different box
   model, so the legacy markup needs its own rules. */
.radio,
.checkbox {
    position: relative;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
}

.radio label,
.checkbox label {
    min-height: 20px;
    padding-inline-start: 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-top: 4px;
    margin-inline-start: -20px;
}

.radio + .radio,
.checkbox + .checkbox {
    margin-top: -5px;
}

.radio-inline,
.checkbox-inline {
    position: relative;
    display: inline-block;
    padding-inline-start: 20px;
    margin-bottom: 0;
    font-weight: 400;
    vertical-align: middle;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   B.8 Legacy nav / dropdown / pagination structure
   BS5 expects .nav-link and .dropdown-item directly on the <a>; this markup
   still nests them inside <li>. 29 `dropdown-menu > li > a`, 18 `nav-tabs > li > a`.
   -------------------------------------------------------------------------- */
.nav {
    display: block;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    flex-direction: row;
    flex-wrap: nowrap;
}

/* BS5 introduced .nav-link, which BS3 had no concept of — legacy markup that
   happens to carry the class (the OPAC's custom menu does, 10 occurrences on the
   home page) would otherwise pick up BS5 link colouring and padding that was never
   there. Geometry is already governed by `.nav > li > a` above; this keeps the
   colour inherited from the site CSS as it was. */
.nav > li > .nav-link,
.navbar-nav .nav-link {
    color: inherit;
    background: none;
    border: 0;
}

.nav > li {
    position: relative;
    display: block;
}

.nav > li > a {
    position: relative;
    display: block;
    padding: 10px 15px;
    text-decoration: none;
}

.nav > li > a:hover,
.nav > li > a:focus {
    text-decoration: none;
    background-color: #eee;
}

.nav-tabs > li {
    float: left;
    margin-bottom: -1px;
}

[dir="rtl"] .nav-tabs > li {
    float: right;
}

.nav-tabs > li > a {
    margin-inline-end: 2px;
    line-height: 1.42857143;
    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;
    cursor: default;
    background-color: #fff;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
}

.nav-pills > li {
    float: left;
}

[dir="rtl"] .nav-pills > li {
    float: right;
}

.nav-pills > li > a {
    border-radius: 4px;
}

.nav-pills > li + li {
    margin-inline-start: 2px;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    color: #fff;
    background-color: #337ab7;
}

/* The legacy `li > a` items inside a BS5 .dropdown-menu get no styling at all,
   which is what bootstrap-select 1.13.14 generates. */
.dropdown-menu > li > a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    color: #262626;
    background-color: #f5f5f5;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    color: #fff;
    text-decoration: none;
    background-color: #337ab7;
    outline: 0;
}

.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
    color: #777;
}

.dropdown-menu .divider {
    height: 1px;
    margin: 9px 0;
    overflow: hidden;
    background-color: #e5e5e5;
}

.dropdown-header {
    display: block;
    padding: 3px 20px;
    font-size: 12px;
    line-height: 1.42857143;
    color: #777;
    white-space: nowrap;
}

.pagination > li {
    display: inline;
}

.pagination > li > a,
.pagination > li > span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-inline-start: -1px;
    line-height: 1.42857143;
    color: #337ab7;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
}

[dir="rtl"] .pagination > li > a,
[dir="rtl"] .pagination > li > span {
    float: right;
}

.pagination > li:first-child > a,
.pagination > li:first-child > span {
    margin-inline-start: 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;
}

[dir="rtl"] .pagination > li:first-child > a,
[dir="rtl"] .pagination > li:first-child > span {
    border-radius: 0 4px 4px 0;
}

[dir="rtl"] .pagination > li:last-child > a,
[dir="rtl"] .pagination > li:last-child > span {
    border-radius: 4px 0 0 4px;
}

.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
    z-index: 2;
    color: #23527c;
    background-color: #eee;
    border-color: #ddd;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    z-index: 3;
    color: #fff;
    cursor: default;
    background-color: #337ab7;
    border-color: #337ab7;
}

.pagination > .disabled > span,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
    color: #777;
    cursor: not-allowed;
    background-color: #fff;
    border-color: #ddd;
}

/* BS5's .list-inline requires .list-inline-item on each child; BS3 styled the
   bare <li>. */
.list-inline {
    padding-left: 0;
    margin-inline-start: -5px;
    list-style: none;
}

.list-inline > li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
}

/* --------------------------------------------------------------------------
   B.9 Tables, modal close button, collapse and carousel state classes
   -------------------------------------------------------------------------- */
.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
    padding: 5px;
}

.table-responsive {
    min-height: 0.01%;
    overflow-x: auto;
}

/* 9 occurrences of `class="close"` survive in frozen partials, always with a
   `&times;` text child — which is why this cannot become BS5's .btn-close
   (that draws its own X via background-image and expects empty content). */
.close {
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    background: transparent;
    border: 0;
    opacity: 0.2;
    -webkit-appearance: none;
    appearance: none;
}

[dir="rtl"] .close {
    float: left;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    opacity: 0.5;
}

button.close {
    padding: 0;
    cursor: pointer;
}

/* THE critical state-class rename: BS3 opens things with .in, BS5 with .show.
   Without this a `.collapse.in` block stays collapsed and a `.modal.fade.in`
   never becomes visible — measured as 0x0 height under plain BS5. */
.collapse.in {
    display: block;
}

tr.collapse.in {
    display: table-row;
}

tbody.collapse.in {
    display: table-row-group;
}

.fade.in {
    opacity: 1;
}

.modal.in .modal-dialog {
    transform: translate(0, 0);
}

/* BS3 marked an open dropdown with .open on the parent; BS5 uses .show on the
   menu. bootstrap-select 1.13.14 still toggles .open. */
.open > .dropdown-menu {
    display: block;
}

.open > a {
    outline: 0;
}

/* BS3 carousel item and control names. BS5 renamed .item to .carousel-item and
   split .carousel-control into -prev / -next. */
.carousel-inner > .item {
    position: relative;
    display: none;
    transition: 0.6s ease-in-out left;
}

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
    display: block;
    max-width: 100%;
    height: auto;
    line-height: 1;
}

.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
    display: block;
}

.carousel-inner > .active {
    left: 0;
}

.carousel-control {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 15%;
    font-size: 20px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    background-color: transparent;
    opacity: 0.5;
}

.carousel-control.right {
    right: 0;
    left: auto;
}

.carousel-control:hover,
.carousel-control:focus {
    color: #fff;
    text-decoration: none;
    outline: 0;
    opacity: 0.9;
}

.carousel-indicators {
    position: absolute;
    right: auto;
    bottom: 10px;
    left: 50%;
    z-index: 15;
    width: 60%;
    padding-left: 0;
    margin-bottom: 0;
    margin-inline-start: -30%;
    margin-inline-end: 0;
    text-align: center;
    list-style: none;
}

/* BS5 styles indicators by attribute — `.carousel-indicators [data-bs-target]` —
   so it also hits BS3's `<li data-bs-target>` and turns the 10px dot into a 30x3px
   bar with 10px transparent borders. That selector is specificity 0-2-0, so a plain
   `.carousel-indicators li` (0-1-1) loses to it no matter how late this file loads.
   The `li[data-bs-target]` variants below exist purely to outrank it. */
.carousel-indicators li,
.carousel-indicators li[data-bs-target] {
    box-sizing: border-box;
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 1px;
    text-indent: -999px;
    cursor: pointer;
    background-color: transparent;
    border: 1px solid #fff;
    border-radius: 10px;
    flex: 0 0 auto;
    padding: 0;
    opacity: 1;
}

.carousel-indicators .active,
.carousel-indicators li[data-bs-target].active {
    width: 12px;
    height: 12px;
    margin: 0;
    background-color: #fff;
    opacity: 1;
}

/* ==========================================================================
   SECTION C — bridges for plugins that target Bootstrap 3
   ========================================================================== */

/* bootstrap-notify 3.1.5 builds BS3 alert markup and positions itself with
   col-xs-*; both are covered above. It also relies on .alert-dismissible
   having room for a floated .close. */
.alert-dismissible,
.alert-dismissable {
    padding-right: 35px;
}

[dir="rtl"] .alert-dismissible,
[dir="rtl"] .alert-dismissable {
    padding-right: 15px;
    padding-left: 35px;
}

.alert-dismissible > .close,
.alert-dismissable > .close {
    position: relative;
    top: -2px;
    right: -21px;
    color: inherit;
}

[dir="rtl"] .alert-dismissible > .close,
[dir="rtl"] .alert-dismissable > .close {
    right: auto;
    left: -21px;
}

/* select2 sizes its rendered control off .form-control metrics, which section A
   pins back to 34px. This only re-aligns the single-select shell, which reads
   its height from the theme rather than from the input. */
.select2-container--default .select2-selection--single {
    height: 34px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 32px;
}