/*!
 * smartadmin-compat.css
 *
 * Makes the markup that the portal still receives in SmartAdmin / Bootstrap 4 form look right on
 * NR4PortalShell (Bootstrap 5):
 *   - HTML built by NR4SharedComponents (panels, grids, tabs, report headers) and by the report
 *     generators in Code/*.cs, which this project keeps as they were for SmartAdmin;
 *   - Bootstrap 4 class names (ml-*, text-right, badge-primary, custom-control ...);
 *   - SmartAdmin's own utilities (fs-xl, fw-500, bg-primary-50, btn-icon, width-2 ...).
 *
 * Load it after Bootstrap and the shell's app.css. wwwroot/bs5/js/bs4-compat.js does the parts
 * CSS can't (data-toggle → data-bs-toggle, input-group-append, panel buttons).
 *
 * As NR4SharedComponents starts producing Bootstrap 5 markup for PortalVersion.Bootstrap5, the
 * rules here stop being used; delete a section once nothing emits its classes any more.
 */

:root {
    /* SmartAdmin's "fusion" gray and the base of the fusion-50 ... fusion-900 shades below. This is only the default:
       a stylesheet loaded after this one (theme.js's #app-theme-css) can set --app-fusion to the user's Dark color. */
    --app-fusion: #505050;
}

/* ============================================================== SmartAdmin panels
   Panels.GetPanelStart/GetPanelEnd (NR4SharedUtilities):
   <div class="panel"><div class="panel-hdr"><h2>Title</h2><div class="panel-toolbar">buttons</div></div>
   <div class="panel-container show"><div class="panel-content"> ... </div></div></div>
   Drawn like the shell's own panel (app.css .app-panel). */

.panel {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin-bottom: 1.5rem;
    background-color: var(--bs-body-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--bs-box-shadow-sm);
}


.panel-hdr {
    display: flex;
    align-items: center;
    gap: .25rem;
    min-height: 2.75rem;
    padding: .25rem .375rem .25rem 1rem;
    background: var(--app-panel-default-bg);
    color: var(--app-panel-default-fg);
    border-bottom: var(--bs-border-width) solid var(--app-panel-default-border);
    border-radius: calc(var(--bs-border-radius-lg) - 1px) calc(var(--bs-border-radius-lg) - 1px) 0 0;
}
.panel-hdr > h2 {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: inherit;
    overflow-wrap: anywhere;
    display: flex;
    align-items: center;
    gap: .25rem;
}
.panel-hdr > h2 small, .panel-hdr > h2 .fw-300 { font-weight: 400; opacity: .8; }
.panel-hdr[class*="bg-"] { color: inherit; }
.panel-hdr.text-white, .panel-hdr [class*="text-white"] { color: #fff; }

.panel-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    margin-left: auto;
}
.panel-toolbar .btn-icon.rounded-circle,
.panel-toolbar .btn-xs {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border-color: transparent;
    color: inherit;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.panel-toolbar .btn-icon.rounded-circle:hover { background-color: color-mix(in srgb, currentColor 16%, transparent); }

.panel-container { min-width: 0; }
.panel-container.collapse:not(.show) { display: none; }
.panel-content { padding: 1rem; min-width: 0; }
.panel-content > :last-child { margin-bottom: 0; }
.panel-content.no-padding, .panel-content.p-0 { padding: 0; }

.panel.panel-collapsed > .panel-container { display: none; }
.panel.panel-collapsed > .panel-hdr {
    border-bottom-color: transparent;
    border-radius: calc(var(--bs-border-radius-lg) - 1px);
}

/* Fullscreen (data-action="panel-fullscreen") */
.panel.panel-fullscreen {
    position: fixed !important;
    inset: 0;
    z-index: 1045;
    margin: 0;
    border-radius: 0;
    overflow: auto !important;
}
.panel.panel-fullscreen > .panel-hdr { position: sticky; top: 0; z-index: 2; border-radius: 0; }
body.panel-fullscreen-on { overflow: hidden; }

.panel-tag {
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    border-left: 3px solid var(--bs-success);
    background-color: var(--bs-tertiary-bg);
    border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
}
.panel-sortable-empty { min-height: 2rem; }

/* SmartAdmin 1.x widgets that a few reports still use */
.jarviswidget, .widget-body { min-width: 0; }
.widget-body-toolbar { padding: .5rem; margin-bottom: .5rem; border-bottom: var(--bs-border-width) solid var(--bs-border-color); }

/* ============================================================== Bootstrap 4 components */

.form-group { margin-bottom: 1rem; }
/* SmartAdmin's <label class="label"> heading above a row of fields: Bootstrap 4 gave every label a .5rem bottom margin, Bootstrap 5 none. */
label.label { margin-bottom: .5rem; }
/* ...and a plain <label> (no class) above a field, in page content and modals. Labels with classes (form-check-label, btn labels, input-group-text ...) are left alone. */
:where(#app-body, .modal) label:not([class]) { margin-bottom: .3rem; }
/* The last field of a modal form keeps no bottom margin: the footer's own padding is the gap above Cancel / Save (the margin made it about twice as tall as in SmartAdmin). */
.modal-body fieldset > .form-group:last-child,
.modal-body .row > * > .form-group:last-child { margin-bottom: 0; }
.form-row { display: flex; flex-wrap: wrap; margin-right: -5px; margin-left: -5px; }
.form-row > .col, .form-row > [class*="col-"] { padding-right: 5px; padding-left: 5px; }
.form-inline { display: flex; flex-flow: row wrap; align-items: center; gap: .5rem; }
/* SmartAdmin help text: small (.6875rem) and pale gray (#909090), a little closer under its field (.325rem) */
.help-block, .form-text-legacy { display: block; margin-top: .325rem; font-size: .6875rem; color: #909090; }
.no-gutters { --bs-gutter-x: 0; --bs-gutter-y: 0; }

.font-weight-bold { font-weight: 700 !important; }
.font-weight-bolder { font-weight: bolder !important; }
.font-weight-normal { font-weight: 400 !important; }
.font-weight-light { font-weight: 300 !important; }
.font-weight-lighter { font-weight: lighter !important; }
.font-italic { font-style: italic !important; }
.text-align-right { text-align: right !important; }
.text-align-left { text-align: left !important; }
.text-align-center { text-align: center !important; }
.pull-right { float: right !important; }
.pull-left { float: left !important; }

.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.sr-only-focusable:focus, .sr-only-focusable:active { position: static !important; width: auto !important; height: auto !important; margin: 0 !important; overflow: visible !important; clip: auto !important; white-space: normal !important; }

.badge-pill { border-radius: var(--bs-border-radius-pill) !important; }
.badge-primary { color: #fff; background-color: var(--bs-primary); }
.badge-secondary { color: #fff; background-color: var(--bs-secondary); }
.badge-success { color: #fff; background-color: var(--bs-success); }
.badge-danger { color: #fff; background-color: var(--bs-danger); }
.badge-warning { color: #212529; background-color: var(--bs-warning); }
/* Text on the colored badges / buttons as in SmartAdmin: white on primary, success, info, danger, secondary and dark;
   dark text only on warning and light. (Bootstrap 5 puts black text on info.) */
.badge-info { color: #fff; background-color: var(--bs-info); }
.badge.bg-info, .btn-info, .btn-info:hover, .btn-info:focus, .btn-info:active { color: #fff; }
.badge-light { color: #000; background-color: var(--bs-light); }
.badge-dark { color: #fff; background-color: var(--bs-dark); }
a.badge { text-decoration: none; }

/* ---- SmartAdmin text sizing in the page content.
   SmartAdmin's body text, form controls and buttons are .8125rem (13px) with .5rem .875rem / .5rem 1.125rem padding; Bootstrap 5's
   are 1rem. Scoped to the page area (#app-body) and modal dialogs (.modal) so the shell's header and menu keep their own sizes; buttons that ask for a size
   (btn-sm / btn-lg / btn-xs) keep it. */
:is(#app-body, .modal) {
    --bs-body-font-size: .8125rem;
    font-size: .8125rem;
}
:is(#app-body, .modal) :is(.form-control, .form-select, .input-group-text) {
    font-size: .8125rem;
    line-height: 1.47;
    padding-top: .5rem;
    padding-bottom: .5rem;
}
:is(#app-body, .modal) .btn:not([class*="btn-sm"]):not([class*="btn-lg"]):not([class*="btn-xs"]):not(.btn-icon):not(.btn-close) {
    --bs-btn-font-size: .8125rem;
    --bs-btn-padding-y: .5rem;
    --bs-btn-padding-x: 1.125rem;
    --bs-btn-line-height: 1.47;
}
/* Icon buttons keep their own width/height/padding but take SmartAdmin's .8125rem text size, so icons sized in em
   (fa-3x ...) come out at the same size as in SmartAdmin (e.g. the big magnifier in the Account Search header). */
:is(#app-body, .modal) .btn-icon:not([class*="btn-sm"]):not([class*="btn-lg"]):not([class*="btn-xs"]) { --bs-btn-font-size: .8125rem; }
.select2-container { font-size: .8125rem; }
/* Links in page content are not underlined (Bootstrap 5 underlines them; SmartAdmin did not). Any class such as
   .text-decoration-underline still wins, since :where() adds no specificity. */
:where(#app-body, .modal) a { text-decoration: none; }
/* Dropdown menus (the Test URL / API Match / History ... split buttons in report tables) as SmartAdmin sized them: .8125rem text, items with
   .75rem 1.5rem padding (airier than Bootstrap 5's), a borderless 4px card with a soft purple shadow, a pale divider, and a pale gray hover /
   pale primary active item. */
:is(#app-body, .modal) .dropdown-menu {
    --bs-dropdown-font-size: .8125rem;
    --bs-dropdown-padding-y: .3125rem;
    --bs-dropdown-border-width: 0;
    --bs-dropdown-border-radius: 4px;
    --bs-dropdown-item-padding-y: .75rem;
    --bs-dropdown-item-padding-x: 1.5rem;
    --bs-dropdown-divider-margin-y: .5rem;
    --bs-dropdown-divider-bg: #f3f3f3;
    --bs-dropdown-box-shadow: 0 0 15px 1px rgba(90, 80, 105, .2);
    /* Bootstrap 5.3 declares --bs-dropdown-box-shadow but never applies it to .dropdown-menu, so apply it here */
    box-shadow: var(--bs-dropdown-box-shadow);
    --bs-dropdown-link-hover-bg: #f3f3f3;
    --bs-dropdown-link-hover-color: color-mix(in srgb, var(--bs-primary) 85%, #000);
    --bs-dropdown-link-active-bg: color-mix(in srgb, var(--bs-primary) 13%, var(--bs-body-bg));
    --bs-dropdown-link-active-color: color-mix(in srgb, var(--bs-primary) 65%, #000);
}
/* Links that open in a tab (target="...", e.g. the dashboard / summary tiles) are medium weight in SmartAdmin (app.bundle.css: a[target]:not(.btn)). */
:where(#app-body, .modal) a[target]:not(.btn) { font-weight: 500; }
/* Font Awesome 5's .fa-lg (SmartAdmin's): 4/3 em with a .75em line box. Font Awesome 6's (1.25em, line-height .05em) leaves the icon
   riding at the top of a centered icon button (the Edit / View buttons in report tables). */
.fa-lg { font-size: 1.3333333333em; line-height: .75em; vertical-align: -.0667em; }
/* Icon buttons hold their icon in a wrapper (<a class="btn btn-icon"><span class="font-lg"><i class="fa-lg">): center that wrapper and give the
   icon a plain 1em line box, so the glyph sits in the middle of the button instead of riding on the text baseline. */
/* Bootstrap Toggle switches (the Approved / Denied sliders): the white handle is a half-visible .btn in the middle of the sliding group, so
   its size comes from the button padding. Draw it as SmartAdmin's soft rounded white tab (narrow, no border, a light lift) instead of a
   flat box with a colored outline. */
.toggle .toggle-handle {
    width: 0;
    padding-left: .625rem;
    padding-right: .625rem;
    border-width: 0;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, .25);
}
/* Split buttons (an icon button + a dropdown-toggle-split caret in a .btn-group, e.g. the Edit buttons in the failure tables): the icon
   button has a fixed height while the caret is sized by its padding, so they ended up different heights and the caret hung lower.
   Let the group's flex row stretch both to the same height. */
.btn-group > .btn-icon { height: auto; min-height: calc(2.1rem + 2px); align-self: stretch; }
/* the faint divider between the icon button and its caret (SmartAdmin: a darker 1px line); outline buttons already have a border */
.btn-group > .btn.dropdown-toggle-split:not(:first-child):not([class*="btn-outline"]) { border-left-color: rgba(0, 0, 0, .12); }
.btn-group > .dropdown-toggle-split { display: inline-flex; align-items: center; justify-content: center; align-self: stretch; }
/* .waves-effect (the ripple, defined further down) sets display:inline-block; keep the icon button a centering flex box when it has that class too. */
.btn-icon.waves-effect { display: inline-flex; }
.btn-icon > span { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
/* A status badge pinned to an icon button's corner (GetSharedIcon: <span class="badge rounded-pill position-absolute pos-bottom pos-left"> with a small
   check / x icon): about half the button's diameter and round, as in SmartAdmin. Bootstrap 5's .badge padding stretched it into a tall pill. */
.btn-icon > .badge.position-absolute {
    width: 1.125rem;
    height: 1.125rem;
    padding: 0;
    font-size: .625rem;
    line-height: 1;
}
.btn-icon > .badge.position-absolute > i { padding: 0 !important; line-height: 1; }
/* The corner is chosen by pos-top / pos-bottom (+ pos-left / pos-right); name the opposite edge as auto so the badge can't end up pinned to both
   or to the wrong one inside the button's flex box (the count badge on the Review Sites button belongs in the bottom-right corner, clear of the icon). */
.btn-icon > .badge.position-absolute.pos-bottom { top: auto; bottom: 0; }
.btn-icon > .badge.position-absolute.pos-top { top: 0; bottom: auto; }
.btn-icon > .badge.position-absolute.pos-right { right: 0; left: auto; }
.btn-icon > .badge.position-absolute.pos-left { left: 0; right: auto; }
/* Count badges on the right corners (Review Sites button: green = bottom-right, red 0 = top-right) bleed a little way out of the button, as in SmartAdmin. */
.btn-icon > .badge.position-absolute.pos-right { right: -.3rem; }
.btn-icon > .badge.position-absolute.pos-right.pos-bottom { bottom: -.3rem; }
.btn-icon > .badge.position-absolute.pos-right.pos-top { top: -.3rem; }
.btn-icon .fa-lg { line-height: 1; vertical-align: baseline; }
/* A large icon followed by the button's text (<button><i class="fa-lg fa-chrome"></i> Run Crux API): Font Awesome 6 sizes the glyph a little wider than the
   box it reserves, so it touched the label. Leave it a small gap, as SmartAdmin's (Font Awesome 5) box did. */
.btn > i.fa-lg { margin-right: .4em; }/* Side-opening menus (.dropend / .dropstart, from Bootstrap 4's dropright / dropleft): the menu markup carries SmartAdmin's .fadeindown slide-down animation
   (and an inline top/left for a bottom-start menu), so it first appeared under the button and slid sideways. Show it where it belongs at once. */
.dropend > .dropdown-menu.fadeindown,
.dropstart > .dropdown-menu.fadeindown { animation: none !important; }
/* ...but a quick fade (no movement) each time one opens, so clicking from one button's menu to another's reads as the first closing and the next appearing. */
.dropend > .dropdown-menu.fadeindown.show,
.dropstart > .dropdown-menu.fadeindown.show { animation: app-menu-fade .15s ease-out !important; }
@keyframes app-menu-fade { from { opacity: 0; } to { opacity: 1; } }
/* SmartAdmin's icon stack (GlobalGenerateHtml.GetAlert: <span class="icon-stack icon-stack-md"><i class="base-7 icon-stack-3x color-info-900"></i><i class="fa-info-circle icon-stack-1x text-white"></i>):
   a colored disc with a small white icon on top, in front of an alert's message. The disc was a glyph of SmartAdmin's "nextgen-icons" font; it is drawn here as a plain
   circle in the same (text) color, so the font isn't needed. */
.icon-stack { position: relative; display: inline-block; width: 1em; height: 1em; line-height: 1em; vertical-align: middle; text-align: center; }
.icon-stack-1x, .icon-stack-2x, .icon-stack-3x { position: absolute !important; left: 0; bottom: 0; width: 100%; text-align: center; line-height: inherit !important; }
.icon-stack-1x { font-size: .5em; }
/* the white glyph on an icon-stack badge (SmartAdmin .color-white) */
.color-white { color: #fff; }
.icon-stack-2x { font-size: .7em; }
.icon-stack-3x { font-size: 1em; }
.icon-stack-xl { font-size: 3.125rem; }
.icon-stack-lg { font-size: 2.5rem; }
.icon-stack-md { font-size: 2.125rem; }


.alert-icon { width: 2.5rem; }
.alert-icon + div { padding-left: .25rem; }
/* Alerts: a larger icon (an icon-stack in GetAlert, a plain <i class="fa-info-circle"> in the report banners) and the close x in the alert's top-right corner, even when it sits inside the alert's inner flex row. */
.alert-icon .icon-stack { font-size: 2.75rem; }
.alert-icon > i { font-size: 1.75rem; }
.alert-icon { width: 3.25rem; }
.alert-dismissible .close, .alert-dismissible .btn-close { position: absolute; top: 0; right: 0; z-index: 2; padding: .75rem 1rem; line-height: 1; }
/* Tabs in page content and modal dialogs: a tab that isn't the open one is plain text (not link-colored); it takes the primary color only while the pointer is over it. */
:is(#app-body, .modal) .nav-tabs .nav-link:not(.active) { color: var(--bs-body-color); }
:is(#app-body, .modal) .nav-tabs .nav-link:not(.active):hover,
:is(#app-body, .modal) .nav-tabs .nav-link:not(.active):focus-visible { color: var(--bs-primary); }
/* Text on SmartAdmin's tinted backgrounds (.bg-primary-300 ... -900, ...): white, as SmartAdmin drew it (e.g. the monthly text-message usage cards, which
   set a .bg-primary-N00 card with no text color of their own; Bootstrap 5 left the text dark on them). Only the lightest tints (50, 100, 200) keep dark text. */
.bg-primary-300,
.bg-primary-400,
.bg-primary-500,
.bg-primary-600,
.bg-primary-700,
.bg-primary-800,
.bg-primary-900,
.bg-success-300,
.bg-success-400,
.bg-success-500,
.bg-success-600,
.bg-success-700,
.bg-success-800,
.bg-success-900,
.bg-info-300,
.bg-info-400,
.bg-info-500,
.bg-info-600,
.bg-info-700,
.bg-info-800,
.bg-info-900,
.bg-danger-300,
.bg-danger-400,
.bg-danger-500,
.bg-danger-600,
.bg-danger-700,
.bg-danger-800,
.bg-danger-900,
.bg-fusion-300,
.bg-fusion-400,
.bg-fusion-500,
.bg-fusion-600,
.bg-fusion-700,
.bg-fusion-800,
.bg-fusion-900 { color: #fff; }
/* A select2 joined to an icon button (the Dashboard selector: <div class="input-group input-group-select2mwcalc"><select class="select2"> + <button class="btn-icon btn-default">):
   the select takes the free width and the button is attached to its right edge on SmartAdmin's pale gray, instead of floating apart as a separate white button. */
.input-group-select2mwcalc { flex-wrap: nowrap; align-items: stretch; }
.input-group-select2mwcalc > .select2-container { flex: 1 1 auto; width: 1% !important; min-width: 0; max-width: none; }
.input-group-select2mwcalc > .btn,
.input-group-select2mwcalc > .input-group-append > .btn {
    height: auto;
    align-self: stretch;
    margin-left: -1px;
    border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
    border-color: var(--bs-border-color);
    background-color: var(--bs-tertiary-bg);
}/* A card used as a link (gauge / number tiles): its text is link-colored, as Bootstrap 4 left it (Bootstrap 5's .card sets the body color). */
:where(#app-body) a > .card { color: var(--bs-link-color); }
/* Headings as SmartAdmin sizes them (Bootstrap 5's are 1.5-2.5rem): h1 1.5 / h2 1.375 / h3 1.1875 / h4 1.0625 / h5 .9375 / h6 .875rem,
   regular weight, tight line-height. :where() keeps the specificity of a plain element selector, so the shell's own heading
   classes (app-page-title, app-panel-title, ...) and the tile/panel rules below still win. */
:where(#app-body, .modal) h1, :where(#app-body, .modal) h2, :where(#app-body, .modal) h3, :where(#app-body, .modal) h4, :where(#app-body, .modal) h5, :where(#app-body, .modal) h6 {
    margin-bottom: .5rem;
    font-weight: 400;
    line-height: 1.3;
}
:where(#app-body, .modal) h1, :where(#app-body, .modal) .h1 { font-size: 1.5rem; }
:where(#app-body, .modal) h2, :where(#app-body, .modal) .h2 { font-size: 1.375rem; }
:where(#app-body, .modal) h3, :where(#app-body, .modal) .h3 { font-size: 1.1875rem; }
:where(#app-body, .modal) h4, :where(#app-body, .modal) .h4 { font-size: 1.0625rem; }
:where(#app-body, .modal) h5, :where(#app-body, .modal) .h5 { font-size: .9375rem; }
:where(#app-body, .modal) h6, :where(#app-body, .modal) .h6 { font-size: .875rem; }

/* Bootstrap 4 pages nest a column inside a padding-free column: <div class="row"><div class="col-sm-4 p-0"><label class="col-sm-12">
   <section class="col-sm-12">. Bootstrap 4 padded every .col-* (15px); Bootstrap 5 only pads direct children of .row, so there the inner
   label and field lost their padding: no gap between fields and labels flush against the field. Pad them the way .row > * is padded. */
.row > [class*="col-"].p-0 > [class*="col-"] {
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
}

/* Text inputs, selects and textareas in page content: a primary border on focus, as in SmartAdmin (SmartAdmin .form-control:focus), with no
   black keyboard-focus ring (the shell's global :focus-visible outline) and no Bootstrap glow.
   Input groups (the date pickers' calendar box + field, ...): while the field has focus the icon box also fills with the primary color
   and shows a white icon (SmartAdmin .input-group-prepend / .has-length). */
:is(#app-body, .modal) .form-control:focus,
:is(#app-body, .modal) .form-control:focus-visible,
:is(#app-body, .modal) .form-select:focus,
:is(#app-body, .modal) .form-select:focus-visible,
.swal2-container :is(.swal2-input, .swal2-textarea, .swal2-select):focus,
.swal2-container :is(.swal2-input, .swal2-textarea, .swal2-select):focus-visible {
    outline: none !important;
    border-color: var(--bs-primary);
    box-shadow: none;
}
:is(#app-body, .modal) .input-group .input-group-text { transition: all .15s ease-in-out; }
/* Modal dialogs as in SmartAdmin: no rule under the title or above the buttons, and a small close "x" (Bootstrap 5's is 1em wide). */
.modal .modal-header,
.modal .modal-footer { border-width: 0; }
.modal .modal-header .btn-close {
    background-size: .625em auto;
    opacity: .5;
}
.modal .modal-header .btn-close:hover { opacity: .75; }
/* Number fields: Chrome drew the spin arrows as heavy black boxes (dark color scheme); keep them in the light scheme in light mode. */
:root:not([data-bs-theme="dark"]) input[type="number"] { color-scheme: light; }
/* Plain checkboxes, radios and range sliders (no .form-check-input): the browser draws them itself, so give them the portal theme's primary color
   (SmartAdmin tinted them through its own CSS) and the portal's light / dark scheme, rather than the browser's black default. */
input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--bs-primary); }
:root:not([data-bs-theme="dark"]) :is(input[type="checkbox"], input[type="radio"], input[type="range"]) { color-scheme: light; }
:root[data-bs-theme="dark"] :is(input[type="checkbox"], input[type="radio"], input[type="range"]) { color-scheme: dark; }
/* The browser's color picker popup is drawn in the input's color-scheme (it opened dark on a light page): follow the portal's light / dark theme. */
:root:not([data-bs-theme="dark"]) :is(input[type="color"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"]) { color-scheme: light; }
:root[data-bs-theme="dark"] :is(input[type="color"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"]) { color-scheme: dark; }
/* Color pickers (GlobalGenerateHtml.GetColorpicker: <input type="color" class="form-control"> joined to a hex field): the browser gives a color input
   a fixed 23px height, so the swatch sat short and top-aligned beside the text field. Give it the same height as the field, as SmartAdmin did. */
:is(#app-body, .modal) .input-group > input[type="color"].form-control {
    height: calc(1.47em + 1rem + 2px);
    cursor: pointer;
}
:is(#app-body, .modal) .input-group:focus-within .input-group-text,
/* ...and it stays that way once the field has a value (the field must carry a placeholder, which :placeholder-shown needs), even after clicking away. */
:is(#app-body, .modal) .input-group:not(#userSettingsTabContent .input-group):not(:has(select, .select2)):has(> input.form-control[placeholder]:not(:placeholder-shown)) > :is(.input-group-text, .input-group-prepend > .input-group-text),
:is(#app-body, .modal) .input-group:not(#userSettingsTabContent .input-group):not(:has(select, .select2)):has(> input.form-control[placeholder]:not(:placeholder-shown)) .input-group-prepend .input-group-text {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

/* Bootstrap 4 padded every .col / .col-* by 15px, also when it sat in a plain flex container instead of a .row
   (<div class="d-flex flex-wrap"><div class="col border-right">...: Accounts by Category's side-by-side tables). Bootstrap 5 only pads
   direct children of .row, so such columns had no padding and the tables touched. :where() keeps this at zero specificity, so
   .row > * gutters and the p-0 rule above still win. */
:where(#app-body, .modal) :where(:not(.row)) > :is(.col, [class*="col-"]) {
    padding-right: .9375rem;
    padding-left: .9375rem;
}

/* SmartAdmin's btn-light: a white button with a thin gray border (Bootstrap 5's is a pale gray fill with a matching, invisible border), e.g. the Optimize buttons. */
.btn-light {
    --bs-btn-bg: var(--bs-body-bg);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-bg: var(--bs-tertiary-bg);
    --bs-btn-hover-border-color: var(--bs-border-color);
    --bs-btn-active-bg: var(--bs-secondary-bg);
    --bs-btn-active-border-color: var(--bs-border-color);
}
/* ... and in dark mode its text follows the page too: Bootstrap's btn-light text is black, which on the dark body color was unreadable (Request Listing Upgrade) */
:root[data-bs-theme="dark"] .btn-light {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-active-color: var(--bs-body-color);
    --bs-btn-disabled-color: var(--bs-body-color);
}
/* Cards lift slightly off the page, as SmartAdmin drew them (app.bundle.css: .card { box-shadow: 0 0 13px 0 rgba(74,53,107,.08) }); cards inside an accordion stay flat. */
.card { box-shadow: 0 0 13px 0 rgba(74, 53, 107, .08); }
.accordion > .card, .card-group > .card { box-shadow: none; }
[data-bs-theme="dark"] .card { box-shadow: 0 0 13px 0 rgba(0, 0, 0, .25); }.btn-block { display: block; width: 100%; }
.btn-default {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: var(--bs-body-bg);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--bs-tertiary-bg);
    --bs-btn-hover-border-color: var(--bs-border-color);
    --bs-btn-active-color: var(--bs-body-color);
    --bs-btn-active-bg: var(--bs-secondary-bg);
    --bs-btn-active-border-color: var(--bs-border-color);
}
.btn-default.active, .btn-default:active { box-shadow: inset 0 0 0 1px var(--bs-primary); }
.btn-outline-default {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--bs-tertiary-bg);
    --bs-btn-hover-border-color: var(--bs-border-color);
    --bs-btn-active-bg: var(--bs-secondary-bg);
    --bs-btn-active-border-color: var(--bs-border-color);
}
.btn-xs, .btn-group-xs > .btn {
    --bs-btn-padding-y: 1px;
    --bs-btn-padding-x: .844rem;
    --bs-btn-font-size: .7rem;
    --bs-btn-line-height: 1.5;
    --bs-btn-border-radius: .25rem;
}
.btn-md { --bs-btn-padding-y: .5rem; --bs-btn-padding-x: 1.125rem; }
/* Header search (Ctrl+K) and the Filter menu box: no black keyboard-focus ring (the shell's global :focus-visible outline);
   the primary border marks focus, as in the SmartAdmin portals. */
#site-search:focus,
#site-search:focus-visible,
#menu-search:focus,
#menu-search:focus-visible {
    outline: none !important;
    border-color: var(--bs-primary);
    box-shadow: none;
}
/* The header search lights up like the table search: primary icon box with a white icon while the field has focus. */
.app-header .app-header-search .input-group:focus-within .input-group-text {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary);
    color: #fff;
}
.app-header .app-header-search .input-group-text { transition: all .15s ease-in-out; }
/* Scrollbars everywhere (page, menu, select2 lists, wide tables, modals): a quiet gray thumb on a transparent track instead of the
   dark default. scrollbar-color is inherited, so setting it on the root reaches every scroll container; it follows the text color
   so it also works in the dark theme. */
:root {
    scrollbar-color: color-mix(in srgb, var(--bs-body-color) 24%, transparent) transparent;
}
/* Header search: the icon box is the pale gray one used by the table search (not white), and the Ctrl+K button has the same
   plain border as the input - no dark border, hover fill or focus ring. */
.app-header .app-header-search .input-group-text {
    background-color: var(--bs-tertiary-bg) !important;
    border-color: var(--bs-border-color);
}
.app-header-search .app-search-submit {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: var(--bs-border-color);
    --bs-btn-active-color: var(--bs-body-color);
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: var(--bs-border-color);
    border-color: var(--bs-border-color);
}
.app-header-search .app-search-submit:focus,
.app-header-search .app-search-submit:focus-visible {
    outline: none !important;
    box-shadow: none;
}
/* Rating Place Editor "Quick Nav" tray (on a primary background): outline buttons with warning text, as in SmartAdmin. */
#commandTray .btn-outline-warning {
    --bs-btn-color: var(--bs-warning);
    --bs-btn-border-color: var(--bs-warning);
    color: var(--bs-warning);
}
#commandTray .btn-outline-warning:hover,
#commandTray .btn-outline-warning:focus-visible,
#commandTray .btn-outline-warning:active { color: var(--bs-btn-hover-color); }
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(2.1rem + 2px);
    height: calc(2.1rem + 2px);
    padding: 0;
}
/* sizes as SmartAdmin set them (app.bundle.css): xs 1.15rem, sm 1.5rem, lg 3rem (+ border) */
.btn-icon.btn-xs { width: calc(1.15rem + 2px); height: calc(1.15rem + 2px); }
.btn-icon.btn-sm { width: calc(1.5rem + 2px); height: calc(1.5rem + 2px); }
.btn-icon.btn-lg { width: calc(3rem + 2px); height: calc(3rem + 2px); }
.shadow-hover:hover { box-shadow: var(--bs-box-shadow) !important; }
.rounded-plus { border-radius: .625rem !important; }
.rounded-left { border-top-left-radius: var(--bs-border-radius) !important; border-bottom-left-radius: var(--bs-border-radius) !important; }
.rounded-right { border-top-right-radius: var(--bs-border-radius) !important; border-bottom-right-radius: var(--bs-border-radius) !important; }
.border-left { border-left: var(--bs-border-width) solid var(--bs-border-color) !important; }
.border-right { border-right: var(--bs-border-width) solid var(--bs-border-color) !important; }
.border-left-0 { border-left: 0 !important; }
.border-right-0 { border-right: 0 !important; }
.border-faded { border-color: var(--bs-border-color-translucent) !important; }
.no-padding { padding: 0 !important; }
.no-margin { margin: 0 !important; }

/* <button class="close"> (bs4-compat.js also adds .btn-close) */
button.close:not(.btn-close) {
    float: right;
    padding: 0 .25rem;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: inherit;
    background: transparent;
    border: 0;
    opacity: .6;
}
button.close:not(.btn-close):hover { opacity: .9; }

/* Bootstrap 4's data-toggle="buttons" (radio/checkbox button groups; bs4-compat.js keeps .active in step) */
[data-toggle="buttons"] > .btn input[type="radio"],
[data-toggle="buttons"] > .btn input[type="checkbox"],
.btn-group-toggle > .btn input[type="radio"],
.btn-group-toggle > .btn input[type="checkbox"],
[data-toggle="buttons"] > .btn-group > .btn input[type="radio"],
[data-toggle="buttons"] > .btn-group > .btn input[type="checkbox"],
.btn-group-toggle > .btn-group > .btn input[type="radio"],
.btn-group-toggle > .btn-group > .btn input[type="checkbox"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}

/* input-group-append/prepend: bs4-compat.js unwraps them; this covers the moment before it runs */
.input-group-append, .input-group-prepend { display: flex; }
.input-group > .input-group-prepend > .input-group-text,
.input-group > .input-group-prepend > .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-append > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* custom-file (bs4-compat.js makes the input a .form-control and hides the fake label) */
.custom-file { position: relative; display: block; width: 100%; }

.embed-responsive { position: relative; width: 100%; overflow: hidden; }
.embed-responsive::before { content: ""; display: block; padding-top: 56.25%; }
.embed-responsive .embed-responsive-item, .embed-responsive iframe, .embed-responsive video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.jumbotron { padding: 2rem; margin-bottom: 1.5rem; background-color: var(--bs-tertiary-bg); border-radius: var(--bs-border-radius-lg); }
.media { display: flex; align-items: flex-start; }
.media-body { flex: 1; min-width: 0; }
.card-deck { display: flex; flex-wrap: wrap; gap: 1rem; }
.card-deck > .card { flex: 1 0 0%; }
.thead-light th { background-color: var(--bs-tertiary-bg); }
.thead-dark th { background-color: var(--bs-dark); color: #fff; }
.text-hide { font: 0/0 a; color: transparent; background-color: transparent; border: 0; }

/* ============================================================== SmartAdmin utilities */

.frame-wrap { padding: .5rem 0; margin-bottom: 1rem; background: var(--bs-body-bg); }
* > .frame-wrap:last-child { margin-bottom: 0 !important; } /* SmartAdmin: the last frame in a container leaves no gap under it (the Add Content check box / radio previews were left with an empty strip) */
.demo > * { margin: 0 .375rem .5rem 0 !important; }
.demo-v-spacing > * + * { margin-top: .5rem; }
.icon-prepend, .icon-append { display: inline-flex; align-items: center; justify-content: center; }
.header-icon { display: inline-flex; align-items: center; justify-content: center; }
.break-word { word-break: break-word; }

/* Accordions / collapse helpers (Collapse.cs, TabsAccordion.cs) */
/* Accordion.cs: <div class="accordion accordion-outline accordion-hover"><div class="card"><div class="card-header"><a class="card-title collapsed">
   icon + title + chevrons</a></div><div class="collapse"><div class="card-body">. SmartAdmin's accordion look (app.bundle.css):
   a card per section with a 2px pale border, the header link a flex row (icon, title, chevron at the far right) in gray while
   closed and a white-on-primary bar while open; hovering a closed one fills it a lighter primary. */
.accordion .card .card-header {
    cursor: pointer;
    margin: 0;
    padding: 0;
    border-bottom: 0;
    background-color: var(--bs-tertiary-bg);
}
.accordion .card .card-header .card-title {
    padding: 1rem;
    margin: 0;
    font-size: .875rem;
    font-weight: 500;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: var(--bs-primary);
    text-decoration: none;
}
.accordion .card .card-header .card-title.collapsed { color: color-mix(in srgb, var(--app-fusion) 80%, var(--bs-body-bg)); }
.accordion .card .card-header .card-title .ml-auto { margin-left: auto; }
.accordion.accordion-outline .card {
    margin-bottom: 1rem;
    border: 2px solid rgba(0, 0, 0, .08) !important;
    border-radius: 4px !important;
    box-shadow: none;
}
/* the big faded icon in a section's bottom-left corner (Accordion.GetFloatingIcon) is cut off by the card's edge, as in SmartAdmin */
.accordion .card { overflow: hidden; }
.accordion .card .card-body { position: relative; }
.accordion.accordion-hover .card-title { transition: background-color .5s ease; }
.accordion.accordion-hover .card-header { background: var(--bs-body-bg); }
.accordion.accordion-hover .card-header:hover .card-title.collapsed {
    color: #fff;
    background-color: color-mix(in srgb, var(--bs-primary) 80%, #fff);
}
.accordion.accordion-hover .card-title:not(.collapsed) { color: #fff; background-color: var(--bs-primary); }
/* accordion-clean (SmartAdmin): no side borders, no rule above the first section or below the last, a plain header and no side padding. */
.accordion.accordion-clean .card { border-left: 0; border-right: 0; border-radius: 0; box-shadow: none; }
.accordion.accordion-clean .card:first-child { border-top: 0; }
.accordion.accordion-clean .card:last-child { border-bottom: 0; }
.accordion.accordion-clean .card-header { background: var(--bs-body-bg); }
.accordion.accordion-clean:not(.accordion-outline):not(.accordion-hover) .card-title,
.accordion.accordion-clean:not(.accordion-outline):not(.accordion-hover) .card-body { padding-left: 0 !important; padding-right: 0 !important; }
.accordion.accordion-clean:not(.accordion-outline):not(.accordion-hover) .card-body { padding-top: 0; }
/* collapse toggle to reveal and hide elements (the chevrons in the toggle). Toggles without aria-expanded fall back to .collapsed. */
.collapsed-hidden { display: none; }
.collapsed .collapsed-hidden { display: inline-block; }
.collapsed .collapsed-reveal { display: none; }
[aria-expanded=false] ~ .collapsed-reveal,
[aria-expanded=false] .collapsed-reveal,
[aria-expanded=true] ~ .collapsed-hidden,
[aria-expanded=true] .collapsed-hidden { display: none; }
[aria-expanded=false] ~ .collapsed-hidden,
[aria-expanded=false] .collapsed-hidden,
[aria-expanded=true] ~ .collapsed-reveal,
[aria-expanded=true] .collapsed-reveal { display: block; }
.card-header .card-title { margin-bottom: 0; }
.card-header .card-title[data-bs-toggle], .card-header .card-title[data-toggle] { cursor: pointer; }

/* SmartAdmin 1.x "smart-form" (a few older forms) */
.smart-form fieldset { padding: 0; border: 0; margin: 0 0 1rem; }
.smart-form section { margin-bottom: 1rem; }
.smart-form .label { display: block; margin-bottom: .25rem; font-weight: 500; color: var(--bs-body-color); }
.smart-form .input input, .smart-form .select select, .smart-form .textarea textarea {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}
.smart-form footer { padding-top: .5rem; }

/* SmartAdmin position and line-height helpers */
.pos-top { top: 0; }
.pos-bottom { bottom: 0; }
.pos-left { left: 0; }
.pos-right { right: 0; }
.l-h-n { line-height: normal; }

/* ============================================================== dashboard status tiles
   WidgetGenerator.GetStatusInfo (NR4SharedReports) inside HomePage's widget-row-wrap:
   <div class="col-..."><a class="shadow-hover rounded"><div class="card p-2 mb-4 ..." style="height:110px">
     title (.easy-pie-title) / number (h1.display-4) / faded icon (i.position-absolute.pos-right.pos-bottom)
   </div></a></div>
   Sized like the SmartAdmin dashboard. The tile rules apply anywhere a page shows these widget rows (Dashboard, Favorites, Summary reports such as Failure Distribution). */
.ops-dashboard h2 { font-size: 1.4rem; font-weight: 400; margin: .75rem 0 .5rem; }
/* Sizing and wrapping as in SmartAdmin: the tiles' own grid classes (col-sm-6 col-md-4 col-lg-3 col-xl-2, same breakpoints in
   Bootstrap 4 and 5) make the columns fluid (2 / 3 / 4 / 6 per row), with Bootstrap 4's 30px gutter; each card keeps the
   height WidgetGenerator sets inline (110px) plus its own p-2 / mb-4, so nothing is fixed here. */
:is(.ops-dashboard, :where(#app-body, .modal)) :is(.container-fluid:has(> :is(.widget-row-wrap, .widget-row-nowrap)), .widget-row-wrap > .row, .widget-row-nowrap > .row) { --bs-gutter-x: 30px; --bs-gutter-y: 0; }
:is(.ops-dashboard, :where(#app-body, .modal)) :is(.widget-row-wrap, .widget-row-nowrap) a { display: block; }
/* the tile is a link: its text is link-colored (Bootstrap 4 let .card inherit the link color; Bootstrap 5's .card sets the body color) */
:is(.ops-dashboard, :where(#app-body, .modal)) :is(.widget-row-wrap, .widget-row-nowrap) a > .card { color: var(--bs-link-color); }
:is(.ops-dashboard, :where(#app-body, .modal)) :is(.widget-row-wrap, .widget-row-nowrap) .card .easy-pie-title {
    font-size: 13px;
    line-height: 1.2;
    color: var(--bs-link-color);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
:is(.ops-dashboard, :where(#app-body, .modal)) :is(.widget-row-wrap, .widget-row-nowrap) .card h1 {
    position: relative;
    z-index: 1;
    font-size: 2.2rem;
    font-weight: 500;
    line-height: 1.1;
    margin: 0;
    white-space: nowrap;
}
:is(.ops-dashboard, :where(#app-body, .modal)) :is(.widget-row-wrap, .widget-row-nowrap) .card h1 .font-xl { font-size: 1.25rem !important; }
:is(.ops-dashboard, :where(#app-body, .modal)) :is(.widget-row-wrap, .widget-row-nowrap) .card > div > i.position-absolute {
    font-size: 4.5rem !important;
    color: var(--bs-link-color);
    right: .375rem;
    bottom: .25rem;
    margin: 0 !important;
    line-height: 1;
    pointer-events: none;
}

/* Favorites (same tiles, .widget-row-nowrap rows): SmartAdmin's h1 is 1.5rem (Bootstrap 5's is ~2.5rem), names wrap
   onto a second line instead of clipping, and the faded background icon is the full 6rem GetStatusInfo asks for. */
.ops-dashboard.ops-favorites :is(.widget-row-wrap, .widget-row-nowrap) .card h1 {
    font-size: 1.5rem;
    line-height: normal;
    white-space: normal;
}
/* Background icon sits in the tile's bottom-right corner as in SmartAdmin (pos-right pos-bottom mb-n1 mr-n4:
   flush to the corner, pushed .25rem below and 1.5rem past the edge, clipped by the card's overflow:hidden). */
.ops-dashboard.ops-favorites :is(.widget-row-wrap, .widget-row-nowrap) .card > div > i.position-absolute {
    font-size: 6rem !important;
    right: 0;
    bottom: 0;
    margin: 0 -1.5rem -.25rem 0 !important;
}

/* The shell adds an <h1 class="app-page-heading"> ("Favorites", "Dashboard"...) to pages without a panel frame. the SmartAdmin portal
   had no such heading, so it is hidden visually; it stays in the DOM as the region's accessible name (aria-labelledby). */
.app-page-heading {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ============================================================== plugins */

/* select2 (4.0.13 default theme) drawn like a Bootstrap 5 .form-select */
/* SmartAdmin made select2 fill its column; the pages are laid out for that. */
.select2-container { width: 100% !important; max-width: 100%; }
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: calc(1.5em + 1rem + 2px);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}
.select2-container--default .select2-selection--single { height: calc(1.5em + 1rem + 2px); }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: calc(1.5em + 1rem); padding-left: .875rem; color: var(--bs-body-color); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: calc(1.5em + 1rem); }
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--bs-body-color); opacity: .75; }
/* Selected chips in a multi-select (the Online Visibility filter: "Google Business Profile x" ...): SmartAdmin's tinted primary chip with a primary border,
   dark-primary text and the x set off by a divider (select2.bundle.css), instead of Bootstrap-gray. */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    display: inline-flex;
    align-items: center;
    margin: 5px 3px;
    padding-right: 0;
    background: color-mix(in srgb, var(--bs-primary) 13%, var(--bs-body-bg));
    border-color: color-mix(in srgb, var(--bs-primary) 80%, white);
    color: color-mix(in srgb, var(--bs-primary) 65%, #000);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove {
    order: 1;
    margin: 0 0 0 5px;
    padding: 0 7px;
    font-size: 16px;
    border-left: 1px solid rgba(0, 0, 0, .1);
    color: color-mix(in srgb, var(--bs-primary) 75%, white);
    opacity: 1;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove:hover { color: var(--bs-primary); }
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: var(--bs-danger); opacity: 1; }
.select2-container--default.select2-container--focus .select2-selection,
.select2-container--default.select2-container--open .select2-selection {
    border-color: color-mix(in srgb, var(--bs-primary) 50%, var(--bs-border-color));
    box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--bs-primary) 25%, transparent);
    outline: 0;
}
.select2-dropdown {
    border-color: var(--bs-border-color);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    z-index: 1060;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--bs-primary);
    color: #fff;
}
/* the selected option: a pale tint of the primary color with dark primary text (SmartAdmin: #efebf5 / #563d7c);
   the highlighted (hovered / keyboard) option above stays solid primary with white text */
.select2-container--default .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) {
    background-color: color-mix(in srgb, var(--bs-primary) 13%, var(--bs-body-bg));
    color: color-mix(in srgb, var(--bs-primary) 65%, #000);
}
.select2-container--default .select2-search--dropdown .select2-search__field,
.select2-container--default .select2-search--inline .select2-search__field { color: var(--bs-body-color); background: transparent; }
/* Dropdown search field, as in SmartAdmin (select2.bundle.css): a magnifier inside the field, a pale border, no black
   keyboard-focus ring (the shell's global :focus-visible outline), and a primary-colored border around the open list. */
.select2-search--dropdown { padding: .875rem; }
.select2-search--dropdown:before {
    content: "\f002";
    font-family: "Font Awesome 6 Pro";
    font-weight: 300;
    position: absolute;
    left: calc(1rem + .875rem);
    top: calc(.6rem + .875rem);
    color: var(--bs-primary);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    display: block;
    width: 100%;
    height: calc(1.47em + 1rem + 2px);
    padding: .5rem .875rem .5rem 2.5rem;
    font-size: .8125rem;
    font-weight: 400;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: .25rem;
    box-shadow: inset 0 .25rem .125rem 0 rgba(33, 37, 41, .025);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus,
.select2-container--default .select2-search--dropdown .select2-search__field:focus-visible {
    outline: none !important;
    border-color: var(--bs-secondary-border-subtle, #ccc);
    box-shadow: inset 0 .25rem .125rem 0 rgba(33, 37, 41, .025);
}
.select2-results { padding: .875rem; }
.select2-search.select2-search--dropdown:not(.select2-search--hide) + .select2-results { padding-top: 0; }
.select2-container--open .select2-dropdown--above,
.select2-container--open .select2-dropdown--below { border-color: var(--bs-primary); }
.select2-container--open .select2-dropdown--below { box-shadow: 0 3px 8px 0 rgba(90, 80, 105, .1); }
.select2-container--open .select2-dropdown--above { box-shadow: 0 -3px 8px 0 rgba(90, 80, 105, .1); }
/* the select2 box itself: no black ring either */
.select2-container--default .select2-selection:focus,
.select2-container--default .select2-selection:focus-visible,
.select2-search__field:focus,
.select2-search__field:focus-visible { outline: none !important; }
.select2-search__field { width: 100% !important; }
.input-group > .select2-container { flex: 1 1 auto; width: 1% !important; }
.input-group > .select2-container .select2-selection { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* DataTables 3 (Bootstrap 5 styling): dt-search holds the label (the magnifier box) and the input side by side */
.dt-container .dt-search input { margin-left: 0; }
.dt-container .dt-length label { display: inline-flex; align-items: center; gap: .5rem; margin: 0; }
.dt-container .dt-search .input-group-text { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.dt-container .dt-search > label + input { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.dt-container .dt-length select { width: auto; display: inline-block; }
.dt-container .dt-buttons .btn { margin-right: .25rem; }
table.dataTable { width: 100% !important; }
.dtr-data > .text-end { text-align: left !important; display: inline; }

/* toastr sits above the shell header */
#toast-container { z-index: 1090; }
#toast-container.toast-top-right, #toast-container.toast-top-left, #toast-container.toast-top-center, #toast-container.toast-top-full-width { top: 4rem; }
#toast-container > div { opacity: .97; }

/* bootstrap4-toggle on Bootstrap 5 */
.toggle.btn { min-width: 3.5rem; }
.toggle-group .btn { border-radius: 0; }

/* The NR4 spinner and old-style loading placeholders keep their height */
.nr4-spinner-parent { min-height: 4rem; }

/* ============================================================== dark mode
   SmartAdmin pages hard-coded some light colors; soften the common ones in dark mode. */
[data-bs-theme="dark"] .bg-white { background-color: var(--bs-body-bg) !important; }
[data-bs-theme="dark"] .text-dark:not(.badge):not([class*="bg-"]) { color: var(--bs-emphasis-color) !important; }
[data-bs-theme="dark"] .table-light, [data-bs-theme="dark"] .thead-light th { --bs-table-bg: var(--bs-tertiary-bg); color: var(--bs-body-color); }

/* ============================================================== print */
@media print {
    .panel-toolbar, .noprint { display: none !important; }
    .panel { box-shadow: none; break-inside: avoid; }
}

/* ---- Bootstrap 4 spacing, text and float classes (Bootstrap 5 renamed them) ---- */
.ml-0 { margin-left: 0 !important; }
.mr-0 { margin-right: 0 !important; }
.pl-0 { padding-left: 0 !important; }
.pr-0 { padding-right: 0 !important; }
.ml-1 { margin-left: .25rem !important; }
.mr-1 { margin-right: .25rem !important; }
.pl-1 { padding-left: .25rem !important; }
.pr-1 { padding-right: .25rem !important; }
.ml-2 { margin-left: .5rem !important; }
.mr-2 { margin-right: .5rem !important; }
.pl-2 { padding-left: .5rem !important; }
.pr-2 { padding-right: .5rem !important; }
.ml-3 { margin-left: 1rem !important; }
.mr-3 { margin-right: 1rem !important; }
.pl-3 { padding-left: 1rem !important; }
.pr-3 { padding-right: 1rem !important; }
.ml-4 { margin-left: 1.5rem !important; }
.mr-4 { margin-right: 1.5rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.ml-5 { margin-left: 3rem !important; }
.mr-5 { margin-right: 3rem !important; }
.pl-5 { padding-left: 3rem !important; }
.pr-5 { padding-right: 3rem !important; }
.ml-auto { margin-left: auto !important; }
.mr-auto { margin-right: auto !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.float-left { float: left !important; }
.float-right { float: right !important; }
@media (min-width: 576px) {
  .ml-sm-0 { margin-left: 0 !important; }
  .mr-sm-0 { margin-right: 0 !important; }
  .pl-sm-0 { padding-left: 0 !important; }
  .pr-sm-0 { padding-right: 0 !important; }
  .ml-sm-1 { margin-left: .25rem !important; }
  .mr-sm-1 { margin-right: .25rem !important; }
  .pl-sm-1 { padding-left: .25rem !important; }
  .pr-sm-1 { padding-right: .25rem !important; }
  .ml-sm-2 { margin-left: .5rem !important; }
  .mr-sm-2 { margin-right: .5rem !important; }
  .pl-sm-2 { padding-left: .5rem !important; }
  .pr-sm-2 { padding-right: .5rem !important; }
  .ml-sm-3 { margin-left: 1rem !important; }
  .mr-sm-3 { margin-right: 1rem !important; }
  .pl-sm-3 { padding-left: 1rem !important; }
  .pr-sm-3 { padding-right: 1rem !important; }
  .ml-sm-4 { margin-left: 1.5rem !important; }
  .mr-sm-4 { margin-right: 1.5rem !important; }
  .pl-sm-4 { padding-left: 1.5rem !important; }
  .pr-sm-4 { padding-right: 1.5rem !important; }
  .ml-sm-5 { margin-left: 3rem !important; }
  .mr-sm-5 { margin-right: 3rem !important; }
  .pl-sm-5 { padding-left: 3rem !important; }
  .pr-sm-5 { padding-right: 3rem !important; }
  .ml-sm-auto { margin-left: auto !important; }
  .mr-sm-auto { margin-right: auto !important; }
  .text-sm-left { text-align: left !important; }
  .text-sm-right { text-align: right !important; }
  .float-sm-left { float: left !important; }
  .float-sm-right { float: right !important; }
}
@media (min-width: 768px) {
  .ml-md-0 { margin-left: 0 !important; }
  .mr-md-0 { margin-right: 0 !important; }
  .pl-md-0 { padding-left: 0 !important; }
  .pr-md-0 { padding-right: 0 !important; }
  .ml-md-1 { margin-left: .25rem !important; }
  .mr-md-1 { margin-right: .25rem !important; }
  .pl-md-1 { padding-left: .25rem !important; }
  .pr-md-1 { padding-right: .25rem !important; }
  .ml-md-2 { margin-left: .5rem !important; }
  .mr-md-2 { margin-right: .5rem !important; }
  .pl-md-2 { padding-left: .5rem !important; }
  .pr-md-2 { padding-right: .5rem !important; }
  .ml-md-3 { margin-left: 1rem !important; }
  .mr-md-3 { margin-right: 1rem !important; }
  .pl-md-3 { padding-left: 1rem !important; }
  .pr-md-3 { padding-right: 1rem !important; }
  .ml-md-4 { margin-left: 1.5rem !important; }
  .mr-md-4 { margin-right: 1.5rem !important; }
  .pl-md-4 { padding-left: 1.5rem !important; }
  .pr-md-4 { padding-right: 1.5rem !important; }
  .ml-md-5 { margin-left: 3rem !important; }
  .mr-md-5 { margin-right: 3rem !important; }
  .pl-md-5 { padding-left: 3rem !important; }
  .pr-md-5 { padding-right: 3rem !important; }
  .ml-md-auto { margin-left: auto !important; }
  .mr-md-auto { margin-right: auto !important; }
  .text-md-left { text-align: left !important; }
  .text-md-right { text-align: right !important; }
  .float-md-left { float: left !important; }
  .float-md-right { float: right !important; }
}
@media (min-width: 992px) {
  .ml-lg-0 { margin-left: 0 !important; }
  .mr-lg-0 { margin-right: 0 !important; }
  .pl-lg-0 { padding-left: 0 !important; }
  .pr-lg-0 { padding-right: 0 !important; }
  .ml-lg-1 { margin-left: .25rem !important; }
  .mr-lg-1 { margin-right: .25rem !important; }
  .pl-lg-1 { padding-left: .25rem !important; }
  .pr-lg-1 { padding-right: .25rem !important; }
  .ml-lg-2 { margin-left: .5rem !important; }
  .mr-lg-2 { margin-right: .5rem !important; }
  .pl-lg-2 { padding-left: .5rem !important; }
  .pr-lg-2 { padding-right: .5rem !important; }
  .ml-lg-3 { margin-left: 1rem !important; }
  .mr-lg-3 { margin-right: 1rem !important; }
  .pl-lg-3 { padding-left: 1rem !important; }
  .pr-lg-3 { padding-right: 1rem !important; }
  .ml-lg-4 { margin-left: 1.5rem !important; }
  .mr-lg-4 { margin-right: 1.5rem !important; }
  .pl-lg-4 { padding-left: 1.5rem !important; }
  .pr-lg-4 { padding-right: 1.5rem !important; }
  .ml-lg-5 { margin-left: 3rem !important; }
  .mr-lg-5 { margin-right: 3rem !important; }
  .pl-lg-5 { padding-left: 3rem !important; }
  .pr-lg-5 { padding-right: 3rem !important; }
  .ml-lg-auto { margin-left: auto !important; }
  .mr-lg-auto { margin-right: auto !important; }
  .text-lg-left { text-align: left !important; }
  .text-lg-right { text-align: right !important; }
  .float-lg-left { float: left !important; }
  .float-lg-right { float: right !important; }
}
@media (min-width: 1200px) {
  .ml-xl-0 { margin-left: 0 !important; }
  .mr-xl-0 { margin-right: 0 !important; }
  .pl-xl-0 { padding-left: 0 !important; }
  .pr-xl-0 { padding-right: 0 !important; }
  .ml-xl-1 { margin-left: .25rem !important; }
  .mr-xl-1 { margin-right: .25rem !important; }
  .pl-xl-1 { padding-left: .25rem !important; }
  .pr-xl-1 { padding-right: .25rem !important; }
  .ml-xl-2 { margin-left: .5rem !important; }
  .mr-xl-2 { margin-right: .5rem !important; }
  .pl-xl-2 { padding-left: .5rem !important; }
  .pr-xl-2 { padding-right: .5rem !important; }
  .ml-xl-3 { margin-left: 1rem !important; }
  .mr-xl-3 { margin-right: 1rem !important; }
  .pl-xl-3 { padding-left: 1rem !important; }
  .pr-xl-3 { padding-right: 1rem !important; }
  .ml-xl-4 { margin-left: 1.5rem !important; }
  .mr-xl-4 { margin-right: 1.5rem !important; }
  .pl-xl-4 { padding-left: 1.5rem !important; }
  .pr-xl-4 { padding-right: 1.5rem !important; }
  .ml-xl-5 { margin-left: 3rem !important; }
  .mr-xl-5 { margin-right: 3rem !important; }
  .pl-xl-5 { padding-left: 3rem !important; }
  .pr-xl-5 { padding-right: 3rem !important; }
  .ml-xl-auto { margin-left: auto !important; }
  .mr-xl-auto { margin-right: auto !important; }
  .text-xl-left { text-align: left !important; }
  .text-xl-right { text-align: right !important; }
  .float-xl-left { float: left !important; }
  .float-xl-right { float: right !important; }
}
@media (min-width: 1400px) {
  .ml-xxl-0 { margin-left: 0 !important; }
  .mr-xxl-0 { margin-right: 0 !important; }
  .pl-xxl-0 { padding-left: 0 !important; }
  .pr-xxl-0 { padding-right: 0 !important; }
  .ml-xxl-1 { margin-left: .25rem !important; }
  .mr-xxl-1 { margin-right: .25rem !important; }
  .pl-xxl-1 { padding-left: .25rem !important; }
  .pr-xxl-1 { padding-right: .25rem !important; }
  .ml-xxl-2 { margin-left: .5rem !important; }
  .mr-xxl-2 { margin-right: .5rem !important; }
  .pl-xxl-2 { padding-left: .5rem !important; }
  .pr-xxl-2 { padding-right: .5rem !important; }
  .ml-xxl-3 { margin-left: 1rem !important; }
  .mr-xxl-3 { margin-right: 1rem !important; }
  .pl-xxl-3 { padding-left: 1rem !important; }
  .pr-xxl-3 { padding-right: 1rem !important; }
  .ml-xxl-4 { margin-left: 1.5rem !important; }
  .mr-xxl-4 { margin-right: 1.5rem !important; }
  .pl-xxl-4 { padding-left: 1.5rem !important; }
  .pr-xxl-4 { padding-right: 1.5rem !important; }
  .ml-xxl-5 { margin-left: 3rem !important; }
  .mr-xxl-5 { margin-right: 3rem !important; }
  .pl-xxl-5 { padding-left: 3rem !important; }
  .pr-xxl-5 { padding-right: 3rem !important; }
  .ml-xxl-auto { margin-left: auto !important; }
  .mr-xxl-auto { margin-right: auto !important; }
  .text-xxl-left { text-align: left !important; }
  .text-xxl-right { text-align: right !important; }
  .float-xxl-left { float: left !important; }
  .float-xxl-right { float: right !important; }
}
/* Negative margins (Bootstrap 4 had them; Bootstrap 5 turned them off) */
.m-n1 { margin: -.25rem !important; }
.mt-n1 { margin-top: -.25rem !important; }
.mb-n1 { margin-bottom: -.25rem !important; }
.ml-n1 { margin-left: -.25rem !important; }
.mr-n1 { margin-right: -.25rem !important; }
.ms-n1 { margin-left: -.25rem !important; }
.me-n1 { margin-right: -.25rem !important; }
.mx-n1 { margin-left: -.25rem !important; margin-right: -.25rem !important; }
.my-n1 { margin-top: -.25rem !important; margin-bottom: -.25rem !important; }
.m-n2 { margin: -.5rem !important; }
.mt-n2 { margin-top: -.5rem !important; }
.mb-n2 { margin-bottom: -.5rem !important; }
.ml-n2 { margin-left: -.5rem !important; }
.mr-n2 { margin-right: -.5rem !important; }
.ms-n2 { margin-left: -.5rem !important; }
.me-n2 { margin-right: -.5rem !important; }
.mx-n2 { margin-left: -.5rem !important; margin-right: -.5rem !important; }
.my-n2 { margin-top: -.5rem !important; margin-bottom: -.5rem !important; }
.m-n3 { margin: -1rem !important; }
.mt-n3 { margin-top: -1rem !important; }
.mb-n3 { margin-bottom: -1rem !important; }
.ml-n3 { margin-left: -1rem !important; }
.mr-n3 { margin-right: -1rem !important; }
.ms-n3 { margin-left: -1rem !important; }
.me-n3 { margin-right: -1rem !important; }
.mx-n3 { margin-left: -1rem !important; margin-right: -1rem !important; }
.my-n3 { margin-top: -1rem !important; margin-bottom: -1rem !important; }
.m-n4 { margin: -1.5rem !important; }
.mt-n4 { margin-top: -1.5rem !important; }
.mb-n4 { margin-bottom: -1.5rem !important; }
.ml-n4 { margin-left: -1.5rem !important; }
.mr-n4 { margin-right: -1.5rem !important; }
.ms-n4 { margin-left: -1.5rem !important; }
.me-n4 { margin-right: -1.5rem !important; }
.mx-n4 { margin-left: -1.5rem !important; margin-right: -1.5rem !important; }
.my-n4 { margin-top: -1.5rem !important; margin-bottom: -1.5rem !important; }
.m-n5 { margin: -3rem !important; }
.mt-n5 { margin-top: -3rem !important; }
.mb-n5 { margin-bottom: -3rem !important; }
.ml-n5 { margin-left: -3rem !important; }
.mr-n5 { margin-right: -3rem !important; }
.ms-n5 { margin-left: -3rem !important; }
.me-n5 { margin-right: -3rem !important; }
.mx-n5 { margin-left: -3rem !important; margin-right: -3rem !important; }
.my-n5 { margin-top: -3rem !important; margin-bottom: -3rem !important; }
@media (min-width: 576px) {
  .m-sm-n1 { margin: -.25rem !important; }
  .mt-sm-n1 { margin-top: -.25rem !important; }
  .mb-sm-n1 { margin-bottom: -.25rem !important; }
  .ml-sm-n1 { margin-left: -.25rem !important; }
  .mr-sm-n1 { margin-right: -.25rem !important; }
  .ms-sm-n1 { margin-left: -.25rem !important; }
  .me-sm-n1 { margin-right: -.25rem !important; }
  .mx-sm-n1 { margin-left: -.25rem !important; margin-right: -.25rem !important; }
  .my-sm-n1 { margin-top: -.25rem !important; margin-bottom: -.25rem !important; }
  .m-sm-n2 { margin: -.5rem !important; }
  .mt-sm-n2 { margin-top: -.5rem !important; }
  .mb-sm-n2 { margin-bottom: -.5rem !important; }
  .ml-sm-n2 { margin-left: -.5rem !important; }
  .mr-sm-n2 { margin-right: -.5rem !important; }
  .ms-sm-n2 { margin-left: -.5rem !important; }
  .me-sm-n2 { margin-right: -.5rem !important; }
  .mx-sm-n2 { margin-left: -.5rem !important; margin-right: -.5rem !important; }
  .my-sm-n2 { margin-top: -.5rem !important; margin-bottom: -.5rem !important; }
  .m-sm-n3 { margin: -1rem !important; }
  .mt-sm-n3 { margin-top: -1rem !important; }
  .mb-sm-n3 { margin-bottom: -1rem !important; }
  .ml-sm-n3 { margin-left: -1rem !important; }
  .mr-sm-n3 { margin-right: -1rem !important; }
  .ms-sm-n3 { margin-left: -1rem !important; }
  .me-sm-n3 { margin-right: -1rem !important; }
  .mx-sm-n3 { margin-left: -1rem !important; margin-right: -1rem !important; }
  .my-sm-n3 { margin-top: -1rem !important; margin-bottom: -1rem !important; }
  .m-sm-n4 { margin: -1.5rem !important; }
  .mt-sm-n4 { margin-top: -1.5rem !important; }
  .mb-sm-n4 { margin-bottom: -1.5rem !important; }
  .ml-sm-n4 { margin-left: -1.5rem !important; }
  .mr-sm-n4 { margin-right: -1.5rem !important; }
  .ms-sm-n4 { margin-left: -1.5rem !important; }
  .me-sm-n4 { margin-right: -1.5rem !important; }
  .mx-sm-n4 { margin-left: -1.5rem !important; margin-right: -1.5rem !important; }
  .my-sm-n4 { margin-top: -1.5rem !important; margin-bottom: -1.5rem !important; }
  .m-sm-n5 { margin: -3rem !important; }
  .mt-sm-n5 { margin-top: -3rem !important; }
  .mb-sm-n5 { margin-bottom: -3rem !important; }
  .ml-sm-n5 { margin-left: -3rem !important; }
  .mr-sm-n5 { margin-right: -3rem !important; }
  .ms-sm-n5 { margin-left: -3rem !important; }
  .me-sm-n5 { margin-right: -3rem !important; }
  .mx-sm-n5 { margin-left: -3rem !important; margin-right: -3rem !important; }
  .my-sm-n5 { margin-top: -3rem !important; margin-bottom: -3rem !important; }
}
@media (min-width: 768px) {
  .m-md-n1 { margin: -.25rem !important; }
  .mt-md-n1 { margin-top: -.25rem !important; }
  .mb-md-n1 { margin-bottom: -.25rem !important; }
  .ml-md-n1 { margin-left: -.25rem !important; }
  .mr-md-n1 { margin-right: -.25rem !important; }
  .ms-md-n1 { margin-left: -.25rem !important; }
  .me-md-n1 { margin-right: -.25rem !important; }
  .mx-md-n1 { margin-left: -.25rem !important; margin-right: -.25rem !important; }
  .my-md-n1 { margin-top: -.25rem !important; margin-bottom: -.25rem !important; }
  .m-md-n2 { margin: -.5rem !important; }
  .mt-md-n2 { margin-top: -.5rem !important; }
  .mb-md-n2 { margin-bottom: -.5rem !important; }
  .ml-md-n2 { margin-left: -.5rem !important; }
  .mr-md-n2 { margin-right: -.5rem !important; }
  .ms-md-n2 { margin-left: -.5rem !important; }
  .me-md-n2 { margin-right: -.5rem !important; }
  .mx-md-n2 { margin-left: -.5rem !important; margin-right: -.5rem !important; }
  .my-md-n2 { margin-top: -.5rem !important; margin-bottom: -.5rem !important; }
  .m-md-n3 { margin: -1rem !important; }
  .mt-md-n3 { margin-top: -1rem !important; }
  .mb-md-n3 { margin-bottom: -1rem !important; }
  .ml-md-n3 { margin-left: -1rem !important; }
  .mr-md-n3 { margin-right: -1rem !important; }
  .ms-md-n3 { margin-left: -1rem !important; }
  .me-md-n3 { margin-right: -1rem !important; }
  .mx-md-n3 { margin-left: -1rem !important; margin-right: -1rem !important; }
  .my-md-n3 { margin-top: -1rem !important; margin-bottom: -1rem !important; }
  .m-md-n4 { margin: -1.5rem !important; }
  .mt-md-n4 { margin-top: -1.5rem !important; }
  .mb-md-n4 { margin-bottom: -1.5rem !important; }
  .ml-md-n4 { margin-left: -1.5rem !important; }
  .mr-md-n4 { margin-right: -1.5rem !important; }
  .ms-md-n4 { margin-left: -1.5rem !important; }
  .me-md-n4 { margin-right: -1.5rem !important; }
  .mx-md-n4 { margin-left: -1.5rem !important; margin-right: -1.5rem !important; }
  .my-md-n4 { margin-top: -1.5rem !important; margin-bottom: -1.5rem !important; }
  .m-md-n5 { margin: -3rem !important; }
  .mt-md-n5 { margin-top: -3rem !important; }
  .mb-md-n5 { margin-bottom: -3rem !important; }
  .ml-md-n5 { margin-left: -3rem !important; }
  .mr-md-n5 { margin-right: -3rem !important; }
  .ms-md-n5 { margin-left: -3rem !important; }
  .me-md-n5 { margin-right: -3rem !important; }
  .mx-md-n5 { margin-left: -3rem !important; margin-right: -3rem !important; }
  .my-md-n5 { margin-top: -3rem !important; margin-bottom: -3rem !important; }
}
@media (min-width: 992px) {
  .m-lg-n1 { margin: -.25rem !important; }
  .mt-lg-n1 { margin-top: -.25rem !important; }
  .mb-lg-n1 { margin-bottom: -.25rem !important; }
  .ml-lg-n1 { margin-left: -.25rem !important; }
  .mr-lg-n1 { margin-right: -.25rem !important; }
  .ms-lg-n1 { margin-left: -.25rem !important; }
  .me-lg-n1 { margin-right: -.25rem !important; }
  .mx-lg-n1 { margin-left: -.25rem !important; margin-right: -.25rem !important; }
  .my-lg-n1 { margin-top: -.25rem !important; margin-bottom: -.25rem !important; }
  .m-lg-n2 { margin: -.5rem !important; }
  .mt-lg-n2 { margin-top: -.5rem !important; }
  .mb-lg-n2 { margin-bottom: -.5rem !important; }
  .ml-lg-n2 { margin-left: -.5rem !important; }
  .mr-lg-n2 { margin-right: -.5rem !important; }
  .ms-lg-n2 { margin-left: -.5rem !important; }
  .me-lg-n2 { margin-right: -.5rem !important; }
  .mx-lg-n2 { margin-left: -.5rem !important; margin-right: -.5rem !important; }
  .my-lg-n2 { margin-top: -.5rem !important; margin-bottom: -.5rem !important; }
  .m-lg-n3 { margin: -1rem !important; }
  .mt-lg-n3 { margin-top: -1rem !important; }
  .mb-lg-n3 { margin-bottom: -1rem !important; }
  .ml-lg-n3 { margin-left: -1rem !important; }
  .mr-lg-n3 { margin-right: -1rem !important; }
  .ms-lg-n3 { margin-left: -1rem !important; }
  .me-lg-n3 { margin-right: -1rem !important; }
  .mx-lg-n3 { margin-left: -1rem !important; margin-right: -1rem !important; }
  .my-lg-n3 { margin-top: -1rem !important; margin-bottom: -1rem !important; }
  .m-lg-n4 { margin: -1.5rem !important; }
  .mt-lg-n4 { margin-top: -1.5rem !important; }
  .mb-lg-n4 { margin-bottom: -1.5rem !important; }
  .ml-lg-n4 { margin-left: -1.5rem !important; }
  .mr-lg-n4 { margin-right: -1.5rem !important; }
  .ms-lg-n4 { margin-left: -1.5rem !important; }
  .me-lg-n4 { margin-right: -1.5rem !important; }
  .mx-lg-n4 { margin-left: -1.5rem !important; margin-right: -1.5rem !important; }
  .my-lg-n4 { margin-top: -1.5rem !important; margin-bottom: -1.5rem !important; }
  .m-lg-n5 { margin: -3rem !important; }
  .mt-lg-n5 { margin-top: -3rem !important; }
  .mb-lg-n5 { margin-bottom: -3rem !important; }
  .ml-lg-n5 { margin-left: -3rem !important; }
  .mr-lg-n5 { margin-right: -3rem !important; }
  .ms-lg-n5 { margin-left: -3rem !important; }
  .me-lg-n5 { margin-right: -3rem !important; }
  .mx-lg-n5 { margin-left: -3rem !important; margin-right: -3rem !important; }
  .my-lg-n5 { margin-top: -3rem !important; margin-bottom: -3rem !important; }
}
@media (min-width: 1200px) {
  .m-xl-n1 { margin: -.25rem !important; }
  .mt-xl-n1 { margin-top: -.25rem !important; }
  .mb-xl-n1 { margin-bottom: -.25rem !important; }
  .ml-xl-n1 { margin-left: -.25rem !important; }
  .mr-xl-n1 { margin-right: -.25rem !important; }
  .ms-xl-n1 { margin-left: -.25rem !important; }
  .me-xl-n1 { margin-right: -.25rem !important; }
  .mx-xl-n1 { margin-left: -.25rem !important; margin-right: -.25rem !important; }
  .my-xl-n1 { margin-top: -.25rem !important; margin-bottom: -.25rem !important; }
  .m-xl-n2 { margin: -.5rem !important; }
  .mt-xl-n2 { margin-top: -.5rem !important; }
  .mb-xl-n2 { margin-bottom: -.5rem !important; }
  .ml-xl-n2 { margin-left: -.5rem !important; }
  .mr-xl-n2 { margin-right: -.5rem !important; }
  .ms-xl-n2 { margin-left: -.5rem !important; }
  .me-xl-n2 { margin-right: -.5rem !important; }
  .mx-xl-n2 { margin-left: -.5rem !important; margin-right: -.5rem !important; }
  .my-xl-n2 { margin-top: -.5rem !important; margin-bottom: -.5rem !important; }
  .m-xl-n3 { margin: -1rem !important; }
  .mt-xl-n3 { margin-top: -1rem !important; }
  .mb-xl-n3 { margin-bottom: -1rem !important; }
  .ml-xl-n3 { margin-left: -1rem !important; }
  .mr-xl-n3 { margin-right: -1rem !important; }
  .ms-xl-n3 { margin-left: -1rem !important; }
  .me-xl-n3 { margin-right: -1rem !important; }
  .mx-xl-n3 { margin-left: -1rem !important; margin-right: -1rem !important; }
  .my-xl-n3 { margin-top: -1rem !important; margin-bottom: -1rem !important; }
  .m-xl-n4 { margin: -1.5rem !important; }
  .mt-xl-n4 { margin-top: -1.5rem !important; }
  .mb-xl-n4 { margin-bottom: -1.5rem !important; }
  .ml-xl-n4 { margin-left: -1.5rem !important; }
  .mr-xl-n4 { margin-right: -1.5rem !important; }
  .ms-xl-n4 { margin-left: -1.5rem !important; }
  .me-xl-n4 { margin-right: -1.5rem !important; }
  .mx-xl-n4 { margin-left: -1.5rem !important; margin-right: -1.5rem !important; }
  .my-xl-n4 { margin-top: -1.5rem !important; margin-bottom: -1.5rem !important; }
  .m-xl-n5 { margin: -3rem !important; }
  .mt-xl-n5 { margin-top: -3rem !important; }
  .mb-xl-n5 { margin-bottom: -3rem !important; }
  .ml-xl-n5 { margin-left: -3rem !important; }
  .mr-xl-n5 { margin-right: -3rem !important; }
  .ms-xl-n5 { margin-left: -3rem !important; }
  .me-xl-n5 { margin-right: -3rem !important; }
  .mx-xl-n5 { margin-left: -3rem !important; margin-right: -3rem !important; }
  .my-xl-n5 { margin-top: -3rem !important; margin-bottom: -3rem !important; }
}
@media (min-width: 1400px) {
  .m-xxl-n1 { margin: -.25rem !important; }
  .mt-xxl-n1 { margin-top: -.25rem !important; }
  .mb-xxl-n1 { margin-bottom: -.25rem !important; }
  .ml-xxl-n1 { margin-left: -.25rem !important; }
  .mr-xxl-n1 { margin-right: -.25rem !important; }
  .ms-xxl-n1 { margin-left: -.25rem !important; }
  .me-xxl-n1 { margin-right: -.25rem !important; }
  .mx-xxl-n1 { margin-left: -.25rem !important; margin-right: -.25rem !important; }
  .my-xxl-n1 { margin-top: -.25rem !important; margin-bottom: -.25rem !important; }
  .m-xxl-n2 { margin: -.5rem !important; }
  .mt-xxl-n2 { margin-top: -.5rem !important; }
  .mb-xxl-n2 { margin-bottom: -.5rem !important; }
  .ml-xxl-n2 { margin-left: -.5rem !important; }
  .mr-xxl-n2 { margin-right: -.5rem !important; }
  .ms-xxl-n2 { margin-left: -.5rem !important; }
  .me-xxl-n2 { margin-right: -.5rem !important; }
  .mx-xxl-n2 { margin-left: -.5rem !important; margin-right: -.5rem !important; }
  .my-xxl-n2 { margin-top: -.5rem !important; margin-bottom: -.5rem !important; }
  .m-xxl-n3 { margin: -1rem !important; }
  .mt-xxl-n3 { margin-top: -1rem !important; }
  .mb-xxl-n3 { margin-bottom: -1rem !important; }
  .ml-xxl-n3 { margin-left: -1rem !important; }
  .mr-xxl-n3 { margin-right: -1rem !important; }
  .ms-xxl-n3 { margin-left: -1rem !important; }
  .me-xxl-n3 { margin-right: -1rem !important; }
  .mx-xxl-n3 { margin-left: -1rem !important; margin-right: -1rem !important; }
  .my-xxl-n3 { margin-top: -1rem !important; margin-bottom: -1rem !important; }
  .m-xxl-n4 { margin: -1.5rem !important; }
  .mt-xxl-n4 { margin-top: -1.5rem !important; }
  .mb-xxl-n4 { margin-bottom: -1.5rem !important; }
  .ml-xxl-n4 { margin-left: -1.5rem !important; }
  .mr-xxl-n4 { margin-right: -1.5rem !important; }
  .ms-xxl-n4 { margin-left: -1.5rem !important; }
  .me-xxl-n4 { margin-right: -1.5rem !important; }
  .mx-xxl-n4 { margin-left: -1.5rem !important; margin-right: -1.5rem !important; }
  .my-xxl-n4 { margin-top: -1.5rem !important; margin-bottom: -1.5rem !important; }
  .m-xxl-n5 { margin: -3rem !important; }
  .mt-xxl-n5 { margin-top: -3rem !important; }
  .mb-xxl-n5 { margin-bottom: -3rem !important; }
  .ml-xxl-n5 { margin-left: -3rem !important; }
  .mr-xxl-n5 { margin-right: -3rem !important; }
  .ms-xxl-n5 { margin-left: -3rem !important; }
  .me-xxl-n5 { margin-right: -3rem !important; }
  .mx-xxl-n5 { margin-left: -3rem !important; margin-right: -3rem !important; }
  .my-xxl-n5 { margin-top: -3rem !important; margin-bottom: -3rem !important; }
}
/* SmartAdmin hidden-*-up / hidden-*-down */
@media (min-width: 576px) { .hidden-sm-up { display: none !important; } }
@media (max-width: 767.98px) { .hidden-sm-down { display: none !important; } }
@media (min-width: 768px) { .hidden-md-up { display: none !important; } }
@media (max-width: 991.98px) { .hidden-md-down { display: none !important; } }
@media (min-width: 992px) { .hidden-lg-up { display: none !important; } }
@media (max-width: 1199.98px) { .hidden-lg-down { display: none !important; } }
@media (min-width: 1200px) { .hidden-xl-up { display: none !important; } }
.hidden-xl-down { display: none !important; }
/* ---- SmartAdmin color shades: the bg-, color-, text- and border- classes, 50 to 900 ---- */

/* ---------- SmartAdmin's --theme-* color variables ----------
   NR4SharedComponents' loading spinners (GetNR4SpinnerStyle) and Settings › Color Themes color things
   with var(--theme-primary-700) etc., which SmartAdmin's theme CSS defined. Same shades as the
   .bg-primary-700 classes below, from the live Bootstrap colors, so they follow the user's theme
   and light / dark mode. */
:root, [data-bs-theme] {
    --theme-primary: var(--bs-primary); --theme-primary-500: var(--bs-primary); --theme-primary-50: color-mix(in srgb, var(--bs-primary) 35%, var(--bs-body-bg)); --theme-primary-100: color-mix(in srgb, var(--bs-primary) 50%, var(--bs-body-bg)); --theme-primary-200: color-mix(in srgb, var(--bs-primary) 65%, var(--bs-body-bg)); --theme-primary-300: color-mix(in srgb, var(--bs-primary) 78%, var(--bs-body-bg)); --theme-primary-400: color-mix(in srgb, var(--bs-primary) 90%, var(--bs-body-bg)); --theme-primary-600: color-mix(in srgb, var(--bs-primary) 88%, #000); --theme-primary-700: color-mix(in srgb, var(--bs-primary) 76%, #000); --theme-primary-800: color-mix(in srgb, var(--bs-primary) 64%, #000); --theme-primary-900: color-mix(in srgb, var(--bs-primary) 52%, #000);
    --theme-secondary: var(--bs-secondary); --theme-secondary-500: var(--bs-secondary); --theme-secondary-50: color-mix(in srgb, var(--bs-secondary) 35%, var(--bs-body-bg)); --theme-secondary-100: color-mix(in srgb, var(--bs-secondary) 50%, var(--bs-body-bg)); --theme-secondary-200: color-mix(in srgb, var(--bs-secondary) 65%, var(--bs-body-bg)); --theme-secondary-300: color-mix(in srgb, var(--bs-secondary) 78%, var(--bs-body-bg)); --theme-secondary-400: color-mix(in srgb, var(--bs-secondary) 90%, var(--bs-body-bg)); --theme-secondary-600: color-mix(in srgb, var(--bs-secondary) 88%, #000); --theme-secondary-700: color-mix(in srgb, var(--bs-secondary) 76%, #000); --theme-secondary-800: color-mix(in srgb, var(--bs-secondary) 64%, #000); --theme-secondary-900: color-mix(in srgb, var(--bs-secondary) 52%, #000);
    --theme-success: var(--bs-success); --theme-success-500: var(--bs-success); --theme-success-50: color-mix(in srgb, var(--bs-success) 35%, var(--bs-body-bg)); --theme-success-100: color-mix(in srgb, var(--bs-success) 50%, var(--bs-body-bg)); --theme-success-200: color-mix(in srgb, var(--bs-success) 65%, var(--bs-body-bg)); --theme-success-300: color-mix(in srgb, var(--bs-success) 78%, var(--bs-body-bg)); --theme-success-400: color-mix(in srgb, var(--bs-success) 90%, var(--bs-body-bg)); --theme-success-600: color-mix(in srgb, var(--bs-success) 88%, #000); --theme-success-700: color-mix(in srgb, var(--bs-success) 76%, #000); --theme-success-800: color-mix(in srgb, var(--bs-success) 64%, #000); --theme-success-900: color-mix(in srgb, var(--bs-success) 52%, #000);
    --theme-info: var(--bs-info); --theme-info-500: var(--bs-info); --theme-info-50: color-mix(in srgb, var(--bs-info) 35%, var(--bs-body-bg)); --theme-info-100: color-mix(in srgb, var(--bs-info) 50%, var(--bs-body-bg)); --theme-info-200: color-mix(in srgb, var(--bs-info) 65%, var(--bs-body-bg)); --theme-info-300: color-mix(in srgb, var(--bs-info) 78%, var(--bs-body-bg)); --theme-info-400: color-mix(in srgb, var(--bs-info) 90%, var(--bs-body-bg)); --theme-info-600: color-mix(in srgb, var(--bs-info) 88%, #000); --theme-info-700: color-mix(in srgb, var(--bs-info) 76%, #000); --theme-info-800: color-mix(in srgb, var(--bs-info) 64%, #000); --theme-info-900: color-mix(in srgb, var(--bs-info) 52%, #000);
    --theme-warning: var(--bs-warning); --theme-warning-500: var(--bs-warning); --theme-warning-50: color-mix(in srgb, var(--bs-warning) 35%, var(--bs-body-bg)); --theme-warning-100: color-mix(in srgb, var(--bs-warning) 50%, var(--bs-body-bg)); --theme-warning-200: color-mix(in srgb, var(--bs-warning) 65%, var(--bs-body-bg)); --theme-warning-300: color-mix(in srgb, var(--bs-warning) 78%, var(--bs-body-bg)); --theme-warning-400: color-mix(in srgb, var(--bs-warning) 90%, var(--bs-body-bg)); --theme-warning-600: color-mix(in srgb, var(--bs-warning) 88%, #000); --theme-warning-700: color-mix(in srgb, var(--bs-warning) 76%, #000); --theme-warning-800: color-mix(in srgb, var(--bs-warning) 64%, #000); --theme-warning-900: color-mix(in srgb, var(--bs-warning) 52%, #000);
    --theme-danger: var(--bs-danger); --theme-danger-500: var(--bs-danger); --theme-danger-50: color-mix(in srgb, var(--bs-danger) 35%, var(--bs-body-bg)); --theme-danger-100: color-mix(in srgb, var(--bs-danger) 50%, var(--bs-body-bg)); --theme-danger-200: color-mix(in srgb, var(--bs-danger) 65%, var(--bs-body-bg)); --theme-danger-300: color-mix(in srgb, var(--bs-danger) 78%, var(--bs-body-bg)); --theme-danger-400: color-mix(in srgb, var(--bs-danger) 90%, var(--bs-body-bg)); --theme-danger-600: color-mix(in srgb, var(--bs-danger) 88%, #000); --theme-danger-700: color-mix(in srgb, var(--bs-danger) 76%, #000); --theme-danger-800: color-mix(in srgb, var(--bs-danger) 64%, #000); --theme-danger-900: color-mix(in srgb, var(--bs-danger) 52%, #000);
    --theme-fusion: var(--app-fusion); --theme-fusion-500: var(--app-fusion); --theme-fusion-50: color-mix(in srgb, var(--app-fusion) 35%, var(--bs-body-bg)); --theme-fusion-100: color-mix(in srgb, var(--app-fusion) 50%, var(--bs-body-bg)); --theme-fusion-200: color-mix(in srgb, var(--app-fusion) 65%, var(--bs-body-bg)); --theme-fusion-300: color-mix(in srgb, var(--app-fusion) 78%, var(--bs-body-bg)); --theme-fusion-400: color-mix(in srgb, var(--app-fusion) 90%, var(--bs-body-bg)); --theme-fusion-600: color-mix(in srgb, var(--app-fusion) 88%, #000); --theme-fusion-700: color-mix(in srgb, var(--app-fusion) 76%, #000); --theme-fusion-800: color-mix(in srgb, var(--app-fusion) 64%, #000); --theme-fusion-900: color-mix(in srgb, var(--app-fusion) 52%, #000);
}

.bg-primary-50 { background-color: color-mix(in srgb, var(--bs-primary) 35%, var(--bs-body-bg)) !important; } .color-primary-50, .text-primary-50 { color: color-mix(in srgb, var(--bs-primary) 35%, var(--bs-body-bg)) !important; } .border-primary-50 { border-color: color-mix(in srgb, var(--bs-primary) 35%, var(--bs-body-bg)) !important; }
.bg-primary-100 { background-color: color-mix(in srgb, var(--bs-primary) 50%, var(--bs-body-bg)) !important; } .color-primary-100, .text-primary-100 { color: color-mix(in srgb, var(--bs-primary) 50%, var(--bs-body-bg)) !important; } .border-primary-100 { border-color: color-mix(in srgb, var(--bs-primary) 50%, var(--bs-body-bg)) !important; }
.bg-primary-200 { background-color: color-mix(in srgb, var(--bs-primary) 65%, var(--bs-body-bg)) !important; } .color-primary-200, .text-primary-200 { color: color-mix(in srgb, var(--bs-primary) 65%, var(--bs-body-bg)) !important; } .border-primary-200 { border-color: color-mix(in srgb, var(--bs-primary) 65%, var(--bs-body-bg)) !important; }
.bg-primary-300 { background-color: color-mix(in srgb, var(--bs-primary) 78%, var(--bs-body-bg)) !important; } .color-primary-300, .text-primary-300 { color: color-mix(in srgb, var(--bs-primary) 78%, var(--bs-body-bg)) !important; } .border-primary-300 { border-color: color-mix(in srgb, var(--bs-primary) 78%, var(--bs-body-bg)) !important; }
.bg-primary-400 { background-color: color-mix(in srgb, var(--bs-primary) 90%, var(--bs-body-bg)) !important; } .color-primary-400, .text-primary-400 { color: color-mix(in srgb, var(--bs-primary) 90%, var(--bs-body-bg)) !important; } .border-primary-400 { border-color: color-mix(in srgb, var(--bs-primary) 90%, var(--bs-body-bg)) !important; }
.bg-primary-500 { background-color: var(--bs-primary) !important; } .color-primary-500, .text-primary-500 { color: var(--bs-primary) !important; } .border-primary-500 { border-color: var(--bs-primary) !important; }
.bg-primary-600 { background-color: color-mix(in srgb, var(--bs-primary) 88%, #000) !important; } .color-primary-600, .text-primary-600 { color: color-mix(in srgb, var(--bs-primary) 88%, #000) !important; } .border-primary-600 { border-color: color-mix(in srgb, var(--bs-primary) 88%, #000) !important; }
.bg-primary-700 { background-color: color-mix(in srgb, var(--bs-primary) 76%, #000) !important; } .color-primary-700, .text-primary-700 { color: color-mix(in srgb, var(--bs-primary) 76%, #000) !important; } .border-primary-700 { border-color: color-mix(in srgb, var(--bs-primary) 76%, #000) !important; }
.bg-primary-800 { background-color: color-mix(in srgb, var(--bs-primary) 64%, #000) !important; } .color-primary-800, .text-primary-800 { color: color-mix(in srgb, var(--bs-primary) 64%, #000) !important; } .border-primary-800 { border-color: color-mix(in srgb, var(--bs-primary) 64%, #000) !important; }
.bg-primary-900 { background-color: color-mix(in srgb, var(--bs-primary) 52%, #000) !important; } .color-primary-900, .text-primary-900 { color: color-mix(in srgb, var(--bs-primary) 52%, #000) !important; } .border-primary-900 { border-color: color-mix(in srgb, var(--bs-primary) 52%, #000) !important; }
.bg-secondary-50 { background-color: color-mix(in srgb, var(--bs-secondary) 35%, var(--bs-body-bg)) !important; } .color-secondary-50, .text-secondary-50 { color: color-mix(in srgb, var(--bs-secondary) 35%, var(--bs-body-bg)) !important; } .border-secondary-50 { border-color: color-mix(in srgb, var(--bs-secondary) 35%, var(--bs-body-bg)) !important; }
.bg-secondary-100 { background-color: color-mix(in srgb, var(--bs-secondary) 50%, var(--bs-body-bg)) !important; } .color-secondary-100, .text-secondary-100 { color: color-mix(in srgb, var(--bs-secondary) 50%, var(--bs-body-bg)) !important; } .border-secondary-100 { border-color: color-mix(in srgb, var(--bs-secondary) 50%, var(--bs-body-bg)) !important; }
.bg-secondary-200 { background-color: color-mix(in srgb, var(--bs-secondary) 65%, var(--bs-body-bg)) !important; } .color-secondary-200, .text-secondary-200 { color: color-mix(in srgb, var(--bs-secondary) 65%, var(--bs-body-bg)) !important; } .border-secondary-200 { border-color: color-mix(in srgb, var(--bs-secondary) 65%, var(--bs-body-bg)) !important; }
.bg-secondary-300 { background-color: color-mix(in srgb, var(--bs-secondary) 78%, var(--bs-body-bg)) !important; } .color-secondary-300, .text-secondary-300 { color: color-mix(in srgb, var(--bs-secondary) 78%, var(--bs-body-bg)) !important; } .border-secondary-300 { border-color: color-mix(in srgb, var(--bs-secondary) 78%, var(--bs-body-bg)) !important; }
.bg-secondary-400 { background-color: color-mix(in srgb, var(--bs-secondary) 90%, var(--bs-body-bg)) !important; } .color-secondary-400, .text-secondary-400 { color: color-mix(in srgb, var(--bs-secondary) 90%, var(--bs-body-bg)) !important; } .border-secondary-400 { border-color: color-mix(in srgb, var(--bs-secondary) 90%, var(--bs-body-bg)) !important; }
.bg-secondary-500 { background-color: var(--bs-secondary) !important; } .color-secondary-500, .text-secondary-500 { color: var(--bs-secondary) !important; } .border-secondary-500 { border-color: var(--bs-secondary) !important; }
.bg-secondary-600 { background-color: color-mix(in srgb, var(--bs-secondary) 88%, #000) !important; } .color-secondary-600, .text-secondary-600 { color: color-mix(in srgb, var(--bs-secondary) 88%, #000) !important; } .border-secondary-600 { border-color: color-mix(in srgb, var(--bs-secondary) 88%, #000) !important; }
.bg-secondary-700 { background-color: color-mix(in srgb, var(--bs-secondary) 76%, #000) !important; } .color-secondary-700, .text-secondary-700 { color: color-mix(in srgb, var(--bs-secondary) 76%, #000) !important; } .border-secondary-700 { border-color: color-mix(in srgb, var(--bs-secondary) 76%, #000) !important; }
.bg-secondary-800 { background-color: color-mix(in srgb, var(--bs-secondary) 64%, #000) !important; } .color-secondary-800, .text-secondary-800 { color: color-mix(in srgb, var(--bs-secondary) 64%, #000) !important; } .border-secondary-800 { border-color: color-mix(in srgb, var(--bs-secondary) 64%, #000) !important; }
.bg-secondary-900 { background-color: color-mix(in srgb, var(--bs-secondary) 52%, #000) !important; } .color-secondary-900, .text-secondary-900 { color: color-mix(in srgb, var(--bs-secondary) 52%, #000) !important; } .border-secondary-900 { border-color: color-mix(in srgb, var(--bs-secondary) 52%, #000) !important; }
.bg-success-50 { background-color: color-mix(in srgb, var(--bs-success) 35%, var(--bs-body-bg)) !important; } .color-success-50, .text-success-50 { color: color-mix(in srgb, var(--bs-success) 35%, var(--bs-body-bg)) !important; } .border-success-50 { border-color: color-mix(in srgb, var(--bs-success) 35%, var(--bs-body-bg)) !important; }
.bg-success-100 { background-color: color-mix(in srgb, var(--bs-success) 50%, var(--bs-body-bg)) !important; } .color-success-100, .text-success-100 { color: color-mix(in srgb, var(--bs-success) 50%, var(--bs-body-bg)) !important; } .border-success-100 { border-color: color-mix(in srgb, var(--bs-success) 50%, var(--bs-body-bg)) !important; }
.bg-success-200 { background-color: color-mix(in srgb, var(--bs-success) 65%, var(--bs-body-bg)) !important; } .color-success-200, .text-success-200 { color: color-mix(in srgb, var(--bs-success) 65%, var(--bs-body-bg)) !important; } .border-success-200 { border-color: color-mix(in srgb, var(--bs-success) 65%, var(--bs-body-bg)) !important; }
.bg-success-300 { background-color: color-mix(in srgb, var(--bs-success) 78%, var(--bs-body-bg)) !important; } .color-success-300, .text-success-300 { color: color-mix(in srgb, var(--bs-success) 78%, var(--bs-body-bg)) !important; } .border-success-300 { border-color: color-mix(in srgb, var(--bs-success) 78%, var(--bs-body-bg)) !important; }
.bg-success-400 { background-color: color-mix(in srgb, var(--bs-success) 90%, var(--bs-body-bg)) !important; } .color-success-400, .text-success-400 { color: color-mix(in srgb, var(--bs-success) 90%, var(--bs-body-bg)) !important; } .border-success-400 { border-color: color-mix(in srgb, var(--bs-success) 90%, var(--bs-body-bg)) !important; }
.bg-success-500 { background-color: var(--bs-success) !important; } .color-success-500, .text-success-500 { color: var(--bs-success) !important; } .border-success-500 { border-color: var(--bs-success) !important; }
.bg-success-600 { background-color: color-mix(in srgb, var(--bs-success) 92%, #000) !important; } .color-success-600, .text-success-600 { color: color-mix(in srgb, var(--bs-success) 92%, #000) !important; } .border-success-600 { border-color: color-mix(in srgb, var(--bs-success) 92%, #000) !important; }
.bg-success-700 { background-color: color-mix(in srgb, var(--bs-success) 83%, #000) !important; } .color-success-700, .text-success-700 { color: color-mix(in srgb, var(--bs-success) 83%, #000) !important; } .border-success-700 { border-color: color-mix(in srgb, var(--bs-success) 83%, #000) !important; }
.bg-success-800 { background-color: color-mix(in srgb, var(--bs-success) 74%, #000) !important; } .color-success-800, .text-success-800 { color: color-mix(in srgb, var(--bs-success) 74%, #000) !important; } .border-success-800 { border-color: color-mix(in srgb, var(--bs-success) 74%, #000) !important; }
.bg-success-900 { background-color: color-mix(in srgb, var(--bs-success) 64%, #000) !important; } .color-success-900, .text-success-900 { color: color-mix(in srgb, var(--bs-success) 64%, #000) !important; } .border-success-900 { border-color: color-mix(in srgb, var(--bs-success) 64%, #000) !important; }
.bg-info-50 { background-color: color-mix(in srgb, var(--bs-info) 35%, var(--bs-body-bg)) !important; } .color-info-50, .text-info-50 { color: color-mix(in srgb, var(--bs-info) 35%, var(--bs-body-bg)) !important; } .border-info-50 { border-color: color-mix(in srgb, var(--bs-info) 35%, var(--bs-body-bg)) !important; }
.bg-info-100 { background-color: color-mix(in srgb, var(--bs-info) 50%, var(--bs-body-bg)) !important; } .color-info-100, .text-info-100 { color: color-mix(in srgb, var(--bs-info) 50%, var(--bs-body-bg)) !important; } .border-info-100 { border-color: color-mix(in srgb, var(--bs-info) 50%, var(--bs-body-bg)) !important; }
.bg-info-200 { background-color: color-mix(in srgb, var(--bs-info) 65%, var(--bs-body-bg)) !important; } .color-info-200, .text-info-200 { color: color-mix(in srgb, var(--bs-info) 65%, var(--bs-body-bg)) !important; } .border-info-200 { border-color: color-mix(in srgb, var(--bs-info) 65%, var(--bs-body-bg)) !important; }
.bg-info-300 { background-color: color-mix(in srgb, var(--bs-info) 78%, var(--bs-body-bg)) !important; } .color-info-300, .text-info-300 { color: color-mix(in srgb, var(--bs-info) 78%, var(--bs-body-bg)) !important; } .border-info-300 { border-color: color-mix(in srgb, var(--bs-info) 78%, var(--bs-body-bg)) !important; }
.bg-info-400 { background-color: color-mix(in srgb, var(--bs-info) 90%, var(--bs-body-bg)) !important; } .color-info-400, .text-info-400 { color: color-mix(in srgb, var(--bs-info) 90%, var(--bs-body-bg)) !important; } .border-info-400 { border-color: color-mix(in srgb, var(--bs-info) 90%, var(--bs-body-bg)) !important; }
.bg-info-500 { background-color: var(--bs-info) !important; } .color-info-500, .text-info-500 { color: var(--bs-info) !important; } .border-info-500 { border-color: var(--bs-info) !important; }
.bg-info-600 { background-color: color-mix(in srgb, var(--bs-info) 88%, #000) !important; } .color-info-600, .text-info-600 { color: color-mix(in srgb, var(--bs-info) 88%, #000) !important; } .border-info-600 { border-color: color-mix(in srgb, var(--bs-info) 88%, #000) !important; }
.bg-info-700 { background-color: color-mix(in srgb, var(--bs-info) 76%, #000) !important; } .color-info-700, .text-info-700 { color: color-mix(in srgb, var(--bs-info) 76%, #000) !important; } .border-info-700 { border-color: color-mix(in srgb, var(--bs-info) 76%, #000) !important; }
.bg-info-800 { background-color: color-mix(in srgb, var(--bs-info) 64%, #000) !important; } .color-info-800, .text-info-800 { color: color-mix(in srgb, var(--bs-info) 64%, #000) !important; } .border-info-800 { border-color: color-mix(in srgb, var(--bs-info) 64%, #000) !important; }
.bg-info-900 { background-color: color-mix(in srgb, var(--bs-info) 52%, #000) !important; } .color-info-900, .text-info-900 { color: color-mix(in srgb, var(--bs-info) 52%, #000) !important; } .border-info-900 { border-color: color-mix(in srgb, var(--bs-info) 52%, #000) !important; }
.bg-warning-50 { background-color: color-mix(in srgb, var(--bs-warning) 35%, var(--bs-body-bg)) !important; } .color-warning-50, .text-warning-50 { color: color-mix(in srgb, var(--bs-warning) 35%, var(--bs-body-bg)) !important; } .border-warning-50 { border-color: color-mix(in srgb, var(--bs-warning) 35%, var(--bs-body-bg)) !important; }
.bg-warning-100 { background-color: color-mix(in srgb, var(--bs-warning) 50%, var(--bs-body-bg)) !important; } .color-warning-100, .text-warning-100 { color: color-mix(in srgb, var(--bs-warning) 50%, var(--bs-body-bg)) !important; } .border-warning-100 { border-color: color-mix(in srgb, var(--bs-warning) 50%, var(--bs-body-bg)) !important; }
.bg-warning-200 { background-color: color-mix(in srgb, var(--bs-warning) 65%, var(--bs-body-bg)) !important; } .color-warning-200, .text-warning-200 { color: color-mix(in srgb, var(--bs-warning) 65%, var(--bs-body-bg)) !important; } .border-warning-200 { border-color: color-mix(in srgb, var(--bs-warning) 65%, var(--bs-body-bg)) !important; }
.bg-warning-300 { background-color: color-mix(in srgb, var(--bs-warning) 78%, var(--bs-body-bg)) !important; } .color-warning-300, .text-warning-300 { color: color-mix(in srgb, var(--bs-warning) 78%, var(--bs-body-bg)) !important; } .border-warning-300 { border-color: color-mix(in srgb, var(--bs-warning) 78%, var(--bs-body-bg)) !important; }
.bg-warning-400 { background-color: color-mix(in srgb, var(--bs-warning) 90%, var(--bs-body-bg)) !important; } .color-warning-400, .text-warning-400 { color: color-mix(in srgb, var(--bs-warning) 90%, var(--bs-body-bg)) !important; } .border-warning-400 { border-color: color-mix(in srgb, var(--bs-warning) 90%, var(--bs-body-bg)) !important; }
.bg-warning-500 { background-color: var(--bs-warning) !important; } .color-warning-500, .text-warning-500 { color: var(--bs-warning) !important; } .border-warning-500 { border-color: var(--bs-warning) !important; }
.bg-warning-600 { background-color: color-mix(in srgb, var(--bs-warning) 97%, #000) !important; } .color-warning-600, .text-warning-600 { color: color-mix(in srgb, var(--bs-warning) 97%, #000) !important; } .border-warning-600 { border-color: color-mix(in srgb, var(--bs-warning) 97%, #000) !important; }
.bg-warning-700 { background-color: color-mix(in srgb, var(--bs-warning) 94%, #000) !important; } .color-warning-700, .text-warning-700 { color: color-mix(in srgb, var(--bs-warning) 94%, #000) !important; } .border-warning-700 { border-color: color-mix(in srgb, var(--bs-warning) 94%, #000) !important; }
.bg-warning-800 { background-color: color-mix(in srgb, var(--bs-warning) 90%, #000) !important; } .color-warning-800, .text-warning-800 { color: color-mix(in srgb, var(--bs-warning) 90%, #000) !important; } .border-warning-800 { border-color: color-mix(in srgb, var(--bs-warning) 90%, #000) !important; }
.bg-warning-900 { background-color: color-mix(in srgb, var(--bs-warning) 85%, #000) !important; } .color-warning-900, .text-warning-900 { color: color-mix(in srgb, var(--bs-warning) 85%, #000) !important; } .border-warning-900 { border-color: color-mix(in srgb, var(--bs-warning) 85%, #000) !important; }
.bg-danger-50 { background-color: color-mix(in srgb, var(--bs-danger) 35%, var(--bs-body-bg)) !important; } .color-danger-50, .text-danger-50 { color: color-mix(in srgb, var(--bs-danger) 35%, var(--bs-body-bg)) !important; } .border-danger-50 { border-color: color-mix(in srgb, var(--bs-danger) 35%, var(--bs-body-bg)) !important; }
.bg-danger-100 { background-color: color-mix(in srgb, var(--bs-danger) 50%, var(--bs-body-bg)) !important; } .color-danger-100, .text-danger-100 { color: color-mix(in srgb, var(--bs-danger) 50%, var(--bs-body-bg)) !important; } .border-danger-100 { border-color: color-mix(in srgb, var(--bs-danger) 50%, var(--bs-body-bg)) !important; }
.bg-danger-200 { background-color: color-mix(in srgb, var(--bs-danger) 65%, var(--bs-body-bg)) !important; } .color-danger-200, .text-danger-200 { color: color-mix(in srgb, var(--bs-danger) 65%, var(--bs-body-bg)) !important; } .border-danger-200 { border-color: color-mix(in srgb, var(--bs-danger) 65%, var(--bs-body-bg)) !important; }
.bg-danger-300 { background-color: color-mix(in srgb, var(--bs-danger) 78%, var(--bs-body-bg)) !important; } .color-danger-300, .text-danger-300 { color: color-mix(in srgb, var(--bs-danger) 78%, var(--bs-body-bg)) !important; } .border-danger-300 { border-color: color-mix(in srgb, var(--bs-danger) 78%, var(--bs-body-bg)) !important; }
.bg-danger-400 { background-color: color-mix(in srgb, var(--bs-danger) 90%, var(--bs-body-bg)) !important; } .color-danger-400, .text-danger-400 { color: color-mix(in srgb, var(--bs-danger) 90%, var(--bs-body-bg)) !important; } .border-danger-400 { border-color: color-mix(in srgb, var(--bs-danger) 90%, var(--bs-body-bg)) !important; }
.bg-danger-500 { background-color: var(--bs-danger) !important; } .color-danger-500, .text-danger-500 { color: var(--bs-danger) !important; } .border-danger-500 { border-color: var(--bs-danger) !important; }
.bg-danger-600 { background-color: color-mix(in srgb, var(--bs-danger) 94%, #000) !important; } .color-danger-600, .text-danger-600 { color: color-mix(in srgb, var(--bs-danger) 94%, #000) !important; } .border-danger-600 { border-color: color-mix(in srgb, var(--bs-danger) 94%, #000) !important; }
.bg-danger-700 { background-color: color-mix(in srgb, var(--bs-danger) 90%, #000) !important; } .color-danger-700, .text-danger-700 { color: color-mix(in srgb, var(--bs-danger) 90%, #000) !important; } .border-danger-700 { border-color: color-mix(in srgb, var(--bs-danger) 90%, #000) !important; }
.bg-danger-800 { background-color: color-mix(in srgb, var(--bs-danger) 85%, #000) !important; } .color-danger-800, .text-danger-800 { color: color-mix(in srgb, var(--bs-danger) 85%, #000) !important; } .border-danger-800 { border-color: color-mix(in srgb, var(--bs-danger) 85%, #000) !important; }
.bg-danger-900 { background-color: color-mix(in srgb, var(--bs-danger) 78%, #000) !important; } .color-danger-900, .text-danger-900 { color: color-mix(in srgb, var(--bs-danger) 78%, #000) !important; } .border-danger-900 { border-color: color-mix(in srgb, var(--bs-danger) 78%, #000) !important; }
.bg-fusion-50 { background-color: color-mix(in srgb, var(--app-fusion) 35%, var(--bs-body-bg)) !important; } .color-fusion-50, .text-fusion-50 { color: color-mix(in srgb, var(--app-fusion) 35%, var(--bs-body-bg)) !important; } .border-fusion-50 { border-color: color-mix(in srgb, var(--app-fusion) 35%, var(--bs-body-bg)) !important; }
.bg-fusion-100 { background-color: color-mix(in srgb, var(--app-fusion) 50%, var(--bs-body-bg)) !important; } .color-fusion-100, .text-fusion-100 { color: color-mix(in srgb, var(--app-fusion) 50%, var(--bs-body-bg)) !important; } .border-fusion-100 { border-color: color-mix(in srgb, var(--app-fusion) 50%, var(--bs-body-bg)) !important; }
.bg-fusion-200 { background-color: color-mix(in srgb, var(--app-fusion) 65%, var(--bs-body-bg)) !important; } .color-fusion-200, .text-fusion-200 { color: color-mix(in srgb, var(--app-fusion) 65%, var(--bs-body-bg)) !important; } .border-fusion-200 { border-color: color-mix(in srgb, var(--app-fusion) 65%, var(--bs-body-bg)) !important; }
.bg-fusion-300 { background-color: color-mix(in srgb, var(--app-fusion) 78%, var(--bs-body-bg)) !important; } .color-fusion-300, .text-fusion-300 { color: color-mix(in srgb, var(--app-fusion) 78%, var(--bs-body-bg)) !important; } .border-fusion-300 { border-color: color-mix(in srgb, var(--app-fusion) 78%, var(--bs-body-bg)) !important; }
.bg-fusion-400 { background-color: color-mix(in srgb, var(--app-fusion) 90%, var(--bs-body-bg)) !important; } .color-fusion-400, .text-fusion-400 { color: color-mix(in srgb, var(--app-fusion) 90%, var(--bs-body-bg)) !important; } .border-fusion-400 { border-color: color-mix(in srgb, var(--app-fusion) 90%, var(--bs-body-bg)) !important; }
.bg-fusion-500 { background-color: var(--app-fusion) !important; } .color-fusion-500, .text-fusion-500 { color: var(--app-fusion) !important; } .border-fusion-500 { border-color: var(--app-fusion) !important; }
.bg-fusion-600 { background-color: color-mix(in srgb, var(--app-fusion) 88%, #000) !important; } .color-fusion-600, .text-fusion-600 { color: color-mix(in srgb, var(--app-fusion) 88%, #000) !important; } .border-fusion-600 { border-color: color-mix(in srgb, var(--app-fusion) 88%, #000) !important; }
.bg-fusion-700 { background-color: color-mix(in srgb, var(--app-fusion) 76%, #000) !important; } .color-fusion-700, .text-fusion-700 { color: color-mix(in srgb, var(--app-fusion) 76%, #000) !important; } .border-fusion-700 { border-color: color-mix(in srgb, var(--app-fusion) 76%, #000) !important; }
.bg-fusion-800 { background-color: color-mix(in srgb, var(--app-fusion) 64%, #000) !important; } .color-fusion-800, .text-fusion-800 { color: color-mix(in srgb, var(--app-fusion) 64%, #000) !important; } .border-fusion-800 { border-color: color-mix(in srgb, var(--app-fusion) 64%, #000) !important; }
.bg-fusion-900 { background-color: color-mix(in srgb, var(--app-fusion) 52%, #000) !important; } .color-fusion-900, .text-fusion-900 { color: color-mix(in srgb, var(--app-fusion) 52%, #000) !important; } .border-fusion-900 { border-color: color-mix(in srgb, var(--app-fusion) 52%, #000) !important; }
.bg-fusion { background-color: var(--app-fusion) !important; color: #fff; } .color-fusion, .text-fusion { color: var(--app-fusion) !important; }
/* SmartAdmin opacity-5 ... opacity-95 */
.opacity-5 { opacity: 0.05 !important; }
.opacity-10 { opacity: 0.1 !important; }
.opacity-15 { opacity: 0.15 !important; }
.opacity-20 { opacity: 0.2 !important; }
.opacity-30 { opacity: 0.3 !important; }
.opacity-35 { opacity: 0.35 !important; }
.opacity-40 { opacity: 0.4 !important; }
.opacity-45 { opacity: 0.45 !important; }
.opacity-55 { opacity: 0.55 !important; }
.opacity-60 { opacity: 0.6 !important; }
.opacity-65 { opacity: 0.65 !important; }
.opacity-70 { opacity: 0.7 !important; }
.opacity-80 { opacity: 0.8 !important; }
.opacity-85 { opacity: 0.85 !important; }
.opacity-90 { opacity: 0.9 !important; }
.opacity-95 { opacity: 0.95 !important; }
/* SmartAdmin width-N / height-N (rem steps) */
.width-1 { width: 1.5rem !important; min-width: 1.5rem; } .height-1 { height: 1.5rem !important; }
.width-2 { width: 2rem !important; min-width: 2rem; } .height-2 { height: 2rem !important; }
.width-3 { width: 2.5rem !important; min-width: 2.5rem; } .height-3 { height: 2.5rem !important; }
.width-4 { width: 2.75rem !important; min-width: 2.75rem; } .height-4 { height: 2.75rem !important; }
.width-5 { width: 3rem !important; min-width: 3rem; } .height-5 { height: 3rem !important; }
.width-6 { width: 3.25rem !important; min-width: 3.25rem; } .height-6 { height: 3.25rem !important; }
.width-7 { width: 3.5rem !important; min-width: 3.5rem; } .height-7 { height: 3.5rem !important; }
.width-8 { width: 3.75rem !important; min-width: 3.75rem; } .height-8 { height: 3.75rem !important; }
.width-9 { width: 4rem !important; min-width: 4rem; } .height-9 { height: 4rem !important; }
.width-10 { width: 4.5rem !important; min-width: 4.5rem; } .height-10 { height: 4.5rem !important; }
.width-xs { min-width: 5rem; } .height-xs { min-height: 5rem; }
.width-sm { min-width: 10rem; } .height-sm { min-height: 10rem; }
.width-lg { min-width: 15rem; } .height-lg { min-height: 15rem; }
.width-xl { min-width: 20rem; } .height-xl { min-height: 20rem; }
/* SmartAdmin font weights and sizes */
.fw-100 { font-weight: 100 !important; }
.fw-200 { font-weight: 200 !important; }
.fw-300 { font-weight: 300 !important; }
.fw-400 { font-weight: 400 !important; }
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }
.fw-800 { font-weight: 800 !important; }
.fw-900 { font-weight: 900 !important; }
/* font sizes as in SmartAdmin (app.bundle.css) */
.fs-nano { font-size: .6875rem !important; }
.fs-xs { font-size: .75rem !important; }
.fs-sm { font-size: .78125rem !important; }
.fs-b { font-size: .8125rem !important; }
.fs-md { font-size: .875rem !important; }
.fs-lg { font-size: .9375rem !important; }
.fs-xl { font-size: 1rem !important; }
.fs-xxl { font-size: 1.75rem !important; }
.fs-xxxl { font-size: 2rem !important; }
/* .font-xs / -sm / -md / -lg are not defined by SmartAdmin (SmartAdmin-era markup carries them as no-ops, e.g. <span class='font-lg'> inside table buttons), so they are not defined here either. */
.font-xl { font-size: 1.25rem !important; }
/* SmartAdmin 1.x text colors still used in a few reports */
.txt-color-orange { color: #fd7e14 !important; } .bg-color-orange { background-color: #fd7e14 !important; }
.txt-color-red { color: #dc3545 !important; } .bg-color-red { background-color: #dc3545 !important; }
.txt-color-green { color: #198754 !important; } .bg-color-green { background-color: #198754 !important; }
.txt-color-blue { color: #0d6efd !important; } .bg-color-blue { background-color: #0d6efd !important; }
.txt-color-greenLight { color: #71843f !important; } .bg-color-greenLight { background-color: #71843f !important; }
.txt-color-greenDark { color: #496949 !important; } .bg-color-greenDark { background-color: #496949 !important; }
.txt-color-orangeDark { color: #a57225 !important; } .bg-color-orangeDark { background-color: #a57225 !important; }
.txt-color-redLight { color: #a65858 !important; } .bg-color-redLight { background-color: #a65858 !important; }
.txt-color-blueLight { color: #92a2a8 !important; } .bg-color-blueLight { background-color: #92a2a8 !important; }
.txt-color-blueDark { color: #4c4f53 !important; } .bg-color-blueDark { background-color: #4c4f53 !important; }
.txt-color-teal { color: #20c997 !important; } .bg-color-teal { background-color: #20c997 !important; }
.txt-color-yellow { color: #b09b5b !important; } .bg-color-yellow { background-color: #b09b5b !important; }
.txt-color-pink { color: #ac5287 !important; } .bg-color-pink { background-color: #ac5287 !important; }
.txt-color-purple { color: #6e587a !important; } .bg-color-purple { background-color: #6e587a !important; }
.txt-color-darken { color: #404040 !important; } .bg-color-darken { background-color: #404040 !important; }
.txt-color-lighten { color: #d5e7ec !important; } .bg-color-lighten { background-color: #d5e7ec !important; }
.txt-color-white { color: #fff !important; } .bg-color-white { background-color: #fff !important; }
.txt-color-grayDark { color: #525252 !important; } .bg-color-grayDark { background-color: #525252 !important; }
.txt-color-magenta { color: #6e3671 !important; } .bg-color-magenta { background-color: #6e3671 !important; }
.txt-color-gray { color: #999 !important; } .bg-color-gray { background-color: #999 !important; }

/*!
 * Waves v0.7.6
 * http://fian.my.id/Waves 
 * 
 * Copyright 2014-2018 Alfiana E. Sibuea and other contributors 
 * Released under the MIT license 
 * https://github.com/fians/Waves/blob/master/LICENSE */
.waves-effect {
    position: relative;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

    .waves-effect .waves-ripple {
        position: absolute;
        border-radius: 50%;
        width: 100px;
        height: 100px;
        margin-top: -50px;
        margin-left: -50px;
        opacity: 0;
        background: rgba(255, 255, 255, 0.6);
        background: radial-gradient(rgba(255, 255, 255, 0.3) 0, rgba(255, 255, 255, 0.4) 40%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.6) 60%, rgba(255, 255, 255, 0) 70%);
        -webkit-transition: all 0.5s ease-out;
        transition: all 0.5s ease-out;
        -webkit-transition-property: -webkit-transform, opacity;
        -webkit-transition-property: opacity, -webkit-transform;
        transition-property: opacity, -webkit-transform;
        transition-property: transform, opacity;
        transition-property: transform, opacity, -webkit-transform;
        -webkit-transform: scale(0) translate(0, 0);
        transform: scale(0) translate(0, 0);
        pointer-events: none;
    }

.waves-notransition {
    -webkit-transition: none !important;
    transition: none !important;
}

.waves-themed.btn-warning .waves-ripple, .waves-themed.btn-default .waves-ripple, .waves-themed.btn-outline-default .waves-ripple {
    background: rgba(0, 0, 0, 0.6);
    background: radial-gradient(rgba(0, 0, 0, 0.1) 0, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0) 70%);
}

.waves-themed.btn-primary .waves-ripple, .waves-themed.btn-outline-primary .waves-ripple, .waves-themed.btn-info .waves-ripple, .waves-themed.btn-outline-info .waves-ripple, .waves-themed.btn-danger .waves-ripple, .waves-themed.btn-outline-danger .waves-ripple, .waves-themed.btn-success .waves-ripple, .waves-themed.btn-outline-success .waves-ripple, .waves-themed.btn-dark .waves-ripple, .waves-themed.btn-outline-dark .waves-ripple {
    background: rgba(255, 255, 255, 0.6);
    background: radial-gradient(rgba(255, 255, 255, 0.3) 0, rgba(255, 255, 255, 0.4) 40%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.6) 60%, rgba(255, 255, 255, 0) 70%);
}

.page-sidebar .primary-nav .nav-menu li a.waves-themed .waves-ripple {
    background: rgba(39, 28, 55, 0.6);
    background: radial-gradient(rgba(39, 28, 55, 0.2) 0, rgba(39, 28, 55, 0.3) 40%, rgba(39, 28, 55, 0.4) 50%, rgba(39, 28, 55, 0.5) 60%, rgba(39, 28, 55, 0) 70%);
}

.panel-hdr:not([class^=bg-]):not([class*=" bg-"]) .waves-themed.btn-toolbar-master .waves-ripple,
.waves-themed.nav-link .waves-ripple {
    background: rgba(var(--bs-primary-rgb), 0.6);
    background: radial-gradient(rgba(var(--bs-primary-rgb), 0.2) 0, rgba(var(--bs-primary-rgb), 0.3) 40%, rgba(var(--bs-primary-rgb), 0.4) 50%, rgba(var(--bs-primary-rgb), 0.5) 60%, rgba(var(--bs-primary-rgb), 0) 70%);
}


/* SmartAdmin .fadeindown (used by PortalSession.UserIconHtml): a short fade in from above. */
@keyframes animateFadeInDown {
    from { opacity: 0; transform: translate3d(0, -5px, 0); }
    to { opacity: 1; transform: none; }
}
.fadeindown { animation: animateFadeInDown .5s; }
@media (prefers-reduced-motion: reduce) { .fadeindown { animation: none; } }

/* The responsive (+) column's header cell keeps the same underline as the other header cells, so the line runs from the table's left edge (NR4GlobalStyle's .table th:not(.control) rule skips it). */
table.dataTable thead th.control { border-bottom: 1px solid var(--bs-primary) !important; }

/* ============================================================== Legacy color mode
   Settings > Color Themes > Mode > Legacy = Light mode with the SmartAdmin-style full-color menu: the menu bar (side or top) is filled with
   a deep shade of the theme's primary color and its text, icons and filter box are white. <html data-app-menu="color"> is set from
   localStorage (Index.cshtml / SettingsColorThemes.cshtml); it only takes effect in light mode (the mode itself stays "light"). */
html[data-app-menu="color"][data-bs-theme="light"] .app-nav {
    background-image: linear-gradient(color-mix(in srgb, var(--bs-primary) 72%, #000), color-mix(in srgb, var(--bs-primary) 52%, #000));
    border-color: transparent;
    color: #fff;
    scrollbar-color: rgba(255, 255, 255, .35) transparent;
}
html[data-app-menu="color"][data-bs-theme="light"] .app-nav .app-menu-link { color: rgba(255, 255, 255, .88); }
html[data-app-menu="color"][data-bs-theme="light"] .app-nav .app-menu-link:hover {
    background-color: rgba(255, 255, 255, .12);
    color: #fff;
}
html[data-app-menu="color"][data-bs-theme="light"] .app-nav .app-menu-link[aria-current="page"] {
    background-color: rgba(255, 255, 255, .2);
    color: #fff;
    box-shadow: inset 3px 0 0 #fff;
}
html[data-app-menu="color"][data-bs-theme="light"] .app-nav .app-menu-empty { color: rgba(255, 255, 255, .7); }
html[data-app-menu="color"][data-bs-theme="light"] .app-nav .app-menu-text mark { background-color: #ffe08a; color: #000; }
/* the Filter menu box: a darker inset field with white text */
html[data-app-menu="color"][data-bs-theme="light"] .app-nav .app-nav-filter .form-control {
    background-color: rgba(0, 0, 0, .25);
    border-color: transparent;
    color: #fff;
}
html[data-app-menu="color"][data-bs-theme="light"] .app-nav .app-nav-filter .form-control::placeholder { color: rgba(255, 255, 255, .6); }
html[data-app-menu="color"][data-bs-theme="light"] .app-nav .app-nav-filter .form-control:focus { border-color: rgba(255, 255, 255, .6); }

/* ============================================================== Dark mode, as SmartAdmin's dark skin drew it
   (skin-master.css .mod-skin-dark): a lighter charcoal page (#37393e) with darker panels / cards (#26272b) and a #303136 panel header;
   table rows with a darker stripe (rgba(0,0,0,.15)), muted gray text, a primary-tinted hover and pale rules; the sorted column tinted with the primary color. */
[data-bs-theme="dark"] .app-main { background-color: #37393e; }
[data-bs-theme="dark"] .panel,
[data-bs-theme="dark"] .card { background-color: #26272b; }
[data-bs-theme="dark"] .panel .card { background-color: #37383e; }
[data-bs-theme="dark"] .panel-hdr { background: #303136; }
[data-bs-theme="dark"] .table,
[data-bs-theme="dark"] .table-striped,
[data-bs-theme="dark"] .table-hover {
    --bs-table-color: #c0c5c9;
    --bs-table-striped-color: #c0c5c9;
    --bs-table-striped-bg: rgba(0, 0, 0, .15);
    --bs-table-hover-color: inherit;
    --bs-table-hover-bg: color-mix(in srgb, var(--bs-primary) 15%, transparent);
    --bs-table-border-color: rgba(255, 255, 255, .25);
}
[data-bs-theme="dark"] table.dataTable thead > tr > th:is(.dt-ordering-asc, .dt-ordering-desc),
[data-bs-theme="dark"] .even .sorting_1 { background-color: color-mix(in srgb, var(--bs-primary) 10%, transparent); }
[data-bs-theme="dark"] .odd .sorting_1 { background-color: color-mix(in srgb, var(--bs-primary) 20%, transparent); }
[data-bs-theme="dark"] table.dataTable tr.dtrg-group td { background: rgba(0, 0, 0, .13); }

/* NOTE: the -600...-900 danger / warning / success shades above follow SmartAdmin's (barely darker for danger and warning, a stronger step for success), not an even mix with black. */
/* SmartAdmin's gray backgrounds (app.bundle.css); e.g. the not-yet-reached segments of the Online Visibility how-to progress bar use .bg-gray-300 */
.bg-gray-50 { background-color: #f9f9f9 !important; }
.bg-gray-100 { background-color: #f8f9fa !important; }
.bg-gray-200 { background-color: #e9ecef !important; }
.bg-gray-300 { background-color: #dee2e6 !important; }
.bg-gray-400 { background-color: #ced4da !important; }
.bg-gray-500 { background-color: #adb5bd !important; }
.bg-gray-600 { background-color: #6c757d !important; }
.bg-gray-700 { background-color: #495057 !important; }
.bg-gray-800 { background-color: #343a40 !important; }
.bg-gray-900 { background-color: #212529 !important; }

/* ============================================================== Font Awesome 5 names
   SmartAdmin's own stylesheets (loaded from the staticshared CDN: toastr's notification icons, sweetalert2, ...) draw their icons with font-family
   "Font Awesome 5 Pro" and FA 5 code points. These portals load Font Awesome 6 (family "Font Awesome 6 Pro"), so those icons came out as empty boxes.
   Alias the FA 5 family names to the FA 6 font files (the code points those stylesheets use are the same in 6). */
@font-face { font-family: "Font Awesome 5 Pro"; font-style: normal; font-weight: 300; font-display: block; src: url(../../webfonts/fa-light-300.woff2) format("woff2"); }
@font-face { font-family: "Font Awesome 5 Pro"; font-style: normal; font-weight: 400; font-display: block; src: url(../../webfonts/fa-regular-400.woff2) format("woff2"); }
@font-face { font-family: "Font Awesome 5 Pro"; font-style: normal; font-weight: 900; font-display: block; src: url(../../webfonts/fa-solid-900.woff2) format("woff2"); }
@font-face { font-family: "Font Awesome 5 Brands"; font-style: normal; font-weight: 400; font-display: block; src: url(../../webfonts/fa-brands-400.woff2) format("woff2"); }

/* SmartAdmin's "nextgen-icons" font: the .base-N badge shapes (hexagon, shield, circle...) that icon-stack badges and alerts are built from. */
@font-face { font-family: "nextgen-icons"; font-style: normal; font-weight: normal; font-display: block; src: url(../../webfonts/nextgen-icons.woff2) format("woff2"), url(../../webfonts/nextgen-icons.woff) format("woff"), url(../../webfonts/nextgen-icons.ttf) format("truetype"); }
[class^="base-"], [class*=" base-"] { font-family: "nextgen-icons"; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1; }
.base-19:before { content: "\e09b"; }
.base-18:before { content: "\e09c"; }
.base-17:before { content: "\e09d"; }
.base-16:before { content: "\e09e"; }
.base-15:before { content: "\e09f"; }
.base-14:before { content: "\e0a0"; }
.base-13:before { content: "\e0a1"; }
.base-12:before { content: "\f000"; }
.base-11:before { content: "\f00b"; }
.base-10:before { content: "\f00a"; }
.base-9:before { content: "\f1c8"; }
.base-8:before { content: "\f1e3"; }
.base-7:before { content: "\f413"; }
.base-6:before { content: "\f412"; }
.base-5:before { content: "\f411"; }
.base-4:before { content: "\f410"; }
.base-3:before { content: "\f409"; }
.base-2:before { content: "\f408"; }
.base-1:before { content: "\f405"; }

/* SmartAdmin status dots (<span class="status status-danger"></span> pinned to a button's corner, e.g. the unread dot on the Notify Contacts reply buttons):
   a 15px colored disc with a white ring, drawn by :before (app.bundle.css .status). */
.status { position: relative; }
.status:before { content: " "; position: absolute; width: 15px; height: 15px; display: block; top: -2px; right: -2px; background: #505050; border-radius: 50%; border: 2px solid #fff; }
.status.status-sm:before { width: 10px; height: 10px; border-width: 1px; top: 0; right: 0; }
.status.status-success:before { background: var(--bs-success); }
.status.status-danger:before { background: var(--bs-danger); }
.status.status-warning:before { background: var(--bs-warning); }

/* SmartAdmin .hover-bg: an inner panel that paints the page color over its colored parent (the Online Visibility Checkup cards are
   <div class="bg-primary-500 h-100"><div class="p-3 hover-bg">...; without it the whole card body showed solid primary). */
.hover-bg { background: var(--bs-body-bg); transition: all .1s ease-in; color: inherit; }
.hover-bg:hover { background: inherit; color: inherit; }
/* While the panel is hovered it shows the parent's solid color, so its text (and links) turn white to stay readable. */
.hover-bg:hover, .hover-bg:hover *:not(.btn):not([class*="btn-"]):not(.btn *):not([class*="btn-"] *):not(.input-group):not(.input-group *):not(.form-control):not(.form-select):not(.select2-container *):not(.frame-wrap):not(.frame-wrap *) { color: #fff !important; }
/* ...and form fields (the Add Content previews' icon + input groups, file inputs, selects) stay in their normal field colors, as in SmartAdmin. */
/* ...except buttons (anything with .btn or a btn-* class, and what is inside it), which keep their own text color: the report's action links are <a class="bg-white text-primary btn-outline-primary btn-primary"> with no .btn. */
.hover-bg .btn-default, .hover-bg .btn-default:hover, .hover-bg .btn-default:focus, .hover-bg .btn-default:active,
.hover-bg .btn-default *, .hover-bg .btn-default:hover * { color: var(--bs-body-color) !important; }
/* SmartAdmin's custom checkboxes/radios/switches (bs4-compat.js turns custom-control into form-check): ~1.125rem box with a visible gray border,
   Bootstrap 5's default 1em box with a faint border looks tiny on the Listings pages. */
.form-check:not(.form-switch) > .form-check-input { width: 1.125rem; height: 1.125rem; margin-top: .125rem; border: 2px solid #adb5bd; background-color: var(--bs-body-bg); }
.form-check:not(.form-switch) > .form-check-input:checked, .form-check:not(.form-switch) > .form-check-input[type="checkbox"]:indeterminate { border-color: var(--bs-primary); background-color: var(--bs-primary); }
.form-check:not(.form-switch):not(:has(> .form-check-label)) > .form-check-input { margin-top: 0; }

/* Checkbox + text label: Bootstrap 5's 1.5em gutter is narrower than the 1.125rem box plus border here, so the text touched the box. */
.form-check:not(.form-switch):has(> .form-check-input) { padding-left: 1.5rem; }
.form-check:not(.form-switch) > .form-check-input { margin-left: -1.5rem; }

/* Larger switch: add form-switch-lg to the wrapper (GlobalGenerateHtml.GetCheckBox additional_wrap_class). Knob and label stay centered on one line. */
.form-check.form-switch.form-switch-lg { display: inline-flex; align-items: center; min-height: 1.75rem; padding-left: 3.25em; }
.form-check.form-switch.form-switch-lg > .form-check-input { width: 2.75em; height: 1.5em; margin-top: 0; margin-left: -3.25em; }
.form-check.form-switch.form-switch-lg > .form-check-label { padding-left: .25rem; }
/* A checkbox inside an input-group-text (select-all) is just the box: no form-check min-height/margins, so the group stays button height. */
.input-group-text > .form-check:not(.form-switch):has(> .form-check-input) { min-height: 0; margin: 0; padding-left: 0; display: flex; align-items: center; }
.input-group-text > .form-check:not(.form-switch) > .form-check-input { float: none; margin: 0; }
.input-group-text > .form-check > .form-check-label:empty { display: none; }

/* SmartAdmin per-corner radius utilities (e.g. a button joined to an input-group-text: border-top-left-radius-0 border-bottom-left-radius-0) */
.border-radius-0 { border-radius: 0 !important; }
.border-top-left-radius-0 { border-top-left-radius: 0 !important; }
.border-top-right-radius-0 { border-top-right-radius: 0 !important; }
.border-bottom-left-radius-0 { border-bottom-left-radius: 0 !important; }
.border-bottom-right-radius-0 { border-bottom-right-radius: 0 !important; }

/* SmartAdmin side-panel modals (.modal-dialog-right / .modal-dialog-left, e.g. Select Report Columns): full-height panel pinned to the edge,
   slid in from that side. The width comes from the size class (modal-sm = 300px). */
.modal-dialog-right, .modal-dialog-left { position: absolute; top: 0; width: 100%; height: 100%; margin: 0 !important; }
.modal-dialog-right { right: 0; }
.modal-dialog-left { left: 0; }
.modal-dialog-right .modal-content, .modal-dialog-left .modal-content { min-height: 100%; border-width: 0; border-radius: 0; }
.modal-dialog-right:not(.modal-sm):not(.modal-lg):not(.modal-xl), .modal-dialog-left:not(.modal-sm):not(.modal-lg):not(.modal-xl) { max-width: var(--bs-modal-width, 500px); }
.modal.fade .modal-dialog-right { transform: translate(25%, 0); }
.modal.fade .modal-dialog-left { transform: translate(-25%, 0); }
.modal.show .modal-dialog-right, .modal.show .modal-dialog-left { transform: none; }

/* Chrome's autofill paints its own colors (dark-scheme in a dark browser): keep form fields in the portal's theme. */
:is(#app-body, .modal) .form-control:-webkit-autofill,
:is(#app-body, .modal) .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--bs-body-color);
    box-shadow: 0 0 0 1000px var(--bs-body-bg) inset;
    caret-color: var(--bs-body-color);
}

/* Campaign funnel cards (rw-cardbox): in dark mode every stage card is white text, including the light-stage ones that carry text-dark
   (the value, Stage N, heading and CTR); the colored value classes (text-warning / text-success) keep their colors. */
:root[data-bs-theme="dark"] .rw-cardbox,
:root[data-bs-theme="dark"] .rw-cardbox :is(.text-dark, .rw-head, .rw-meta, .fs-sm, .fs-md) { color: #fff !important; }

/* Bootstrap Toggle (Hide / Show switches): its "off" half and handle are .btn-light, which here follows the dark body color in dark mode
   (dark button, dim text) while the handle stayed white. SmartAdmin kept them light: white with dark text, in both themes. */
:root[data-bs-theme="dark"] .toggle .toggle-group > .toggle-handle.btn-light {
    --bs-btn-bg: #fff; --bs-btn-color: #212529; --bs-btn-border-color: #fff;
    --bs-btn-hover-bg: #f8f9fa; --bs-btn-hover-color: #212529; --bs-btn-hover-border-color: #f8f9fa;
    --bs-btn-active-bg: #f8f9fa; --bs-btn-active-color: #212529; --bs-btn-active-border-color: #f8f9fa;
    --bs-btn-disabled-bg: #fff; --bs-btn-disabled-color: #212529;
    background-color: #fff; color: #212529;
}

/* Wizard steps (nr4wizard: File Upload, Setup ...): round 3rem step buttons centered over their label. Bootstrap 5's nav-link/nav-item rules stretched the
   active one into a wide oval and dropped the outline on the others. Only the portal wizards' btn-lg steps: the review page's step pills are btn-xs / btn-xxs. */
.nr4wizard .nav-link.btn-icon.btn-lg {
    display: flex; flex: none; align-items: center; justify-content: center;
    width: 3rem; height: 3rem; padding: 0;
    margin-left: auto; margin-right: auto !important;
    border: 1px solid var(--bs-primary); border-radius: 50%;
}
.nr4wizard .nav-link.btn-icon.btn-lg.active { color: #fff; background-color: var(--bs-primary); }
.nr4wizard .nav-link.btn-icon.btn-lg:not(.active) { color: var(--bs-primary); background-color: var(--bs-body-bg); }
.nr4wizard .nav-link.btn-icon.btn-lg:not(.active):hover { color: #fff; background-color: var(--bs-primary); }
.nr4wizard .nav-item { text-align: center; }
/* Review page step pills (NR4Page: btn-xs, or btn-xxs for "small dots"): small circles in the page's outline button color, the current step filled,
   as SmartAdmin drew them. Bootstrap 5's nav-link dropped the border and nav-pills filled the active one with primary. */
.nr4wizard .nav-link.btn-icon:not(.btn-lg) {
    display: inline-flex; flex: none; padding: 0; font-size: .7rem;
    color: var(--bs-btn-color); background-color: var(--bs-btn-bg);
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color); border-radius: 50%;
}
.nr4wizard .nav-link.btn-icon:not(.btn-lg):hover {
    color: var(--bs-btn-hover-color); background-color: var(--bs-btn-hover-bg); border-color: var(--bs-btn-hover-border-color);
}
.nr4wizard .nav-link.btn-icon:not(.btn-lg).active {
    color: var(--bs-btn-active-color); background-color: var(--bs-btn-active-bg); border-color: var(--bs-btn-active-border-color);
}
.btn-icon.btn-xxs { width: calc(.5rem + 2px); height: calc(.5rem + 2px); font-size: 0; }

/* Progress bar track: Bootstrap 5's light gray (#e9ecef) glares on the dark theme; use a dark tint of the text color instead. */
:root[data-bs-theme="dark"] .progress { --bs-progress-bg: color-mix(in srgb, var(--bs-body-color) 16%, var(--bs-body-bg)); }

/* Bootstrap Toggle: the switch itself (.toggle.btn) takes its size from the two labels inside it, so it must not get the portal's button padding
   (that padded the whole switch by .5rem top and bottom, making it taller than SmartAdmin's). */
:is(#app-body, .modal) .toggle.btn:has(> .toggle-group) { padding: 0; font-size: .8125rem; }
/* Bootstrap 4's .btn was white-space: nowrap; Bootstrap 5's is not, so the toggle's labels wrapped to several lines while the plugin measured them and the switch came out tall. */
.toggle .toggle-on, .toggle .toggle-off { white-space: nowrap; }
/* The plugin writes an inline height measured from its labels (55px here, from the portal's button padding plus a taller line box). Pin the switch to SmartAdmin's height
   and center the labels in it. */
:is(#app-body, .modal) .toggle.btn:not(.btn-xs):not(.btn-sm):has(> .toggle-group) { height: 2.25rem !important; min-height: 0; }
:is(#app-body, .modal) .toggle:not(.btn-xs):not(.btn-sm) .toggle-on, :is(#app-body, .modal) .toggle:not(.btn-xs):not(.btn-sm) .toggle-off {
    padding-top: 0; padding-bottom: 0; line-height: calc(2.25rem - 2px); font-size: .8125rem;
}

/* SmartAdmin "gutter" spacing utilities (app.bundle.css): cards in the Add Content modal use mb-g for the gap between rows. */
.m-g { margin: 1.5rem; }
.mb-g { margin-bottom: 1.5rem !important; }
.mb-gb { margin-bottom: 3rem; }
.p-g { padding: 1.5rem; }

/* Bootstrap 4's custom file input (PageElement attach-file / photo fields): a bordered box showing the chosen file name with a "Browse" tab on its right;
   the real <input type=file> is invisible on top. Bootstrap 5 dropped it, so it is drawn here. */
.custom-file { position: relative; display: inline-block; width: 100%; height: calc(1.5em + 1rem + 2px); margin-bottom: 0; }
.input-group > .custom-file { display: flex; align-items: center; flex: 1 1 auto; width: 1%; min-width: 0; }
.custom-file-input { position: relative; z-index: 2; width: 100%; height: calc(1.5em + 1rem + 2px); margin: 0; overflow: hidden; opacity: 0; cursor: pointer; }
.custom-file-label {
    position: absolute; top: 0; right: 0; left: 0; z-index: 1; height: calc(1.5em + 1rem + 2px);
    padding: .5rem .875rem; font-size: .8125rem; font-weight: 400; line-height: 1.5; overflow: hidden; white-space: nowrap;
    color: var(--bs-body-color); background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius);
}
.custom-file-label::after {
    content: "Browse"; position: absolute; top: 0; right: 0; bottom: 0; z-index: 3; display: block; height: calc(1.5em + 1rem);
    padding: .5rem .875rem; line-height: 1.5; color: var(--bs-body-color); background-color: var(--bs-tertiary-bg);
    border-left: inherit; border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
}
.input-group > .custom-file:not(:first-child) .custom-file-label { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.custom-file-input:focus ~ .custom-file-label { border-color: var(--bs-primary); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25); }
.custom-file-input:disabled ~ .custom-file-label { background-color: var(--bs-secondary-bg); }

/* Disabled checkbox / radio labels (the Add Content previews): SmartAdmin showed them in the muted text color, not at half opacity. */
.form-check-input:disabled ~ .form-check-label, .form-check-input[disabled] ~ .form-check-label { opacity: 1; color: var(--bs-secondary-color); }

/* Check box / radio rows inside a frame (Add Content previews): Bootstrap 5's form-check has a 1.5rem min-height and a bottom margin, and inline-blocks sit on a text baseline,
   so the row was taller than the input-group rows in the neighboring cards. Lay them out in a flex row so the card matches the others' height. */
.frame-wrap:has(> .form-check-inline) { display: flex; flex-wrap: wrap; align-items: center; }
.frame-wrap > .form-check-inline { min-height: 0; margin-bottom: 0; }

/* Bootstrap 4 buttons never wrapped their text (.btn { white-space: nowrap }); Bootstrap 5's do, which broke "Secondary" into "Secondar / y" in the Button Color picker. */
:is(#app-body, .modal) .btn { white-space: nowrap; }
/* The color picker's fixed-width cells (btn-group width 6rem): the button fills its cell. */
.btn-group-toggle > .btn-group > .btn { flex: 1 1 auto; min-width: 0; }

/* Frames: the white panel behind the Add Content previews is for light mode only; in dark mode it showed as a dark box behind the Button Size / Button Color rows. */
:root[data-bs-theme="dark"] .frame-wrap { background: transparent; }
/* Button Color picker: SmartAdmin's btn-sm size (13px text, snug padding) inside the 6rem cells. */
.btn-group-toggle > .btn-group > .btn.btn-sm {
    --bs-btn-padding-y: .375rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .8125rem; --bs-btn-line-height: 1.5;
}

/* Collapsed accordion titles in dark mode: the light-mode blend of --app-fusion into the background goes nearly invisible on a dark page; use the body text color. */
:root[data-bs-theme="dark"] .accordion .card .card-header .card-title.collapsed { color: var(--bs-body-color); }
/* The Page Navigation Divider accordion title sits on a light gray block (bg-gray-300) in both themes, so its text and icon stay dark, also in dark mode. */
.accordion .card .card-header .card-title.bg-gray-300,
:root[data-bs-theme="dark"] .accordion .card .card-header .card-title.collapsed.bg-gray-300 { color: #343a40; }

/* SmartAdmin / Bootstrap 4 helpers the Page Builder element accordions use (PageElement templates) and Bootstrap 5 lacks. */
.flex-1 { flex: 1; }
.height-0 { height: 0; }
.hover-highlight:hover { background-image: linear-gradient(rgba(29, 33, 41, .03), rgba(29, 33, 41, .04)); }
.hover-highlight:active { background-image: linear-gradient(rgba(29, 33, 41, .05), rgba(29, 33, 41, .06)); }
:root[data-bs-theme="dark"] .hover-highlight:hover { background-image: linear-gradient(rgba(255, 255, 255, .03), rgba(255, 255, 255, .05)); }
.form-control-file { display: block; width: 100%; }

/* Text field with a pick-list button (GetTextInputGroupWithPickList: Email Subject, ...): the button is <button class="btn btn-default dropdown-toggle form-control">.
   Bootstrap 5's input-group made that .form-control as wide as the text field and drew its triangle caret; SmartAdmin sized it to its content and drew an FA chevron. */
.input-group > .btn.dropdown-toggle.form-control { flex: 0 0 auto; width: auto; }
.input-group > .btn.dropdown-toggle.form-control::after {
    content: "\f107"; border: 0; margin: 0; vertical-align: top;
    font-family: "Font Awesome 6 Pro"; font-weight: 900; font-size: 1em; line-height: 1;
}
.input-group > .btn.dropdown-toggle.form-control .caret { display: none; }
.input-group > .btn.dropdown-toggle.form-control { display: inline-flex; align-items: center; justify-content: center; }
.input-group > .btn.dropdown-toggle.form-control::after { vertical-align: middle; }

/* SmartAdmin (app.bundle.css): a form group that is the last (or only) child leaves no gap under it, anywhere, not only in modals. The Salutation row's
   select is aligned to the bottom of its column and sat a gap lower than the text field without it. */
.form-group:last-child, .form-group:only-child { margin-bottom: 0; }

/* Disabled controls as in SmartAdmin: grayed out (buttons lose their color) with the "not allowed" cursor on hover. Bootstrap 5 turns pointer-events off on a disabled
   button, which also hides the cursor, so keep them hoverable (a disabled button can't be clicked anyway). */
.form-control:disabled, .form-select:disabled,
:is(input, select, textarea, button, .btn):disabled, .btn.disabled, fieldset:disabled .btn { cursor: not-allowed; }
.form-control:disabled, .form-select:disabled { background-color: var(--bs-secondary-bg); opacity: 1; }
button.btn:disabled, input.btn:disabled { pointer-events: auto; filter: grayscale(100%); }
/* Help text pulled up under its field with mt-n4 (Image Description's ADA note): the full -1.5rem ran it into the field's bottom edge; -.5rem leaves SmartAdmin's small gap. */
.help-block.mt-n4 { margin-top: -.5rem !important; }

/* .bg-light stays #f8f9fa in Bootstrap 5's dark theme, so panels that use it (the Visibility Report's logo header, ...) glared white. SmartAdmin's dark skin drew them as a raised dark gray. */
:root[data-bs-theme="dark"] .bg-light { background-color: color-mix(in srgb, var(--bs-body-bg) 82%, #fff) !important; }
/* Unchecked check boxes / radios in dark mode: SmartAdmin drew a dark disc with a faint rim (the Visibility Report's "single or multi-location" choice), checked ones stay primary. */
:root[data-bs-theme="dark"] .form-check-input:not(:checked):not([type="checkbox"]:indeterminate):not(.form-switch .form-check-input) {
    background-color: color-mix(in srgb, var(--bs-body-bg) 82%, #000);
    background-image: none;
    border-color: color-mix(in srgb, var(--bs-body-color) 28%, var(--bs-body-bg));
}
/* A radio group with nothing selected matches :indeterminate; only a check box's indeterminate state is a "filled" look, so radios stay empty until chosen. */
/* Multi-select chips in dark mode: the light-mode tint (dark-primary text on a faint primary wash) is unreadable on a dark page; use a stronger primary wash with light text. */
:root[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: color-mix(in srgb, var(--bs-primary) 45%, var(--bs-body-bg));
    border-color: color-mix(in srgb, var(--bs-primary) 70%, var(--bs-body-bg));
    color: #fff;
}
:root[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove {
    color: rgba(255, 255, 255, .8);
    border-left-color: rgba(255, 255, 255, .25);
}
:root[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove:hover { color: #fff; }
/* SmartAdmin's color-fusion-N text utilities (the Require / Hidden labels, captions, help text ...) are shades of --app-fusion, which is a dark gray: fine on a light page, nearly invisible on a dark one.
   In dark mode the higher the number, the closer the text gets to the normal text color. */
:root[data-bs-theme="dark"] :is(.color-fusion-50, .text-fusion-50) { color: color-mix(in srgb, var(--bs-body-color) 25%, var(--bs-body-bg)) !important; }
:root[data-bs-theme="dark"] :is(.color-fusion-100, .text-fusion-100) { color: color-mix(in srgb, var(--bs-body-color) 35%, var(--bs-body-bg)) !important; }
:root[data-bs-theme="dark"] :is(.color-fusion-200, .text-fusion-200) { color: color-mix(in srgb, var(--bs-body-color) 50%, var(--bs-body-bg)) !important; }
:root[data-bs-theme="dark"] :is(.color-fusion-300, .text-fusion-300) { color: color-mix(in srgb, var(--bs-body-color) 65%, var(--bs-body-bg)) !important; }
:root[data-bs-theme="dark"] :is(.color-fusion-400, .text-fusion-400) { color: color-mix(in srgb, var(--bs-body-color) 78%, var(--bs-body-bg)) !important; }
:root[data-bs-theme="dark"] :is(.color-fusion-500, .text-fusion-500) { color: color-mix(in srgb, var(--bs-body-color) 88%, var(--bs-body-bg)) !important; }
:root[data-bs-theme="dark"] :is(.color-fusion-600, .text-fusion-600) { color: color-mix(in srgb, var(--bs-body-color) 92%, var(--bs-body-bg)) !important; }
:root[data-bs-theme="dark"] :is(.color-fusion-700, .text-fusion-700) { color: color-mix(in srgb, var(--bs-body-color) 96%, var(--bs-body-bg)) !important; }
:root[data-bs-theme="dark"] :is(.color-fusion-800, .text-fusion-800) { color: color-mix(in srgb, var(--bs-body-color) 100%, var(--bs-body-bg)) !important; }
:root[data-bs-theme="dark"] :is(.color-fusion-900, .text-fusion-900) { color: color-mix(in srgb, var(--bs-body-color) 100%, var(--bs-body-bg)) !important; }
:root[data-bs-theme="dark"] :is(.color-fusion, .text-fusion) { color: var(--bs-body-color) !important; }

/* Switches keep their knob when off (the rule above is for check boxes and radios): a light knob that shows on the dark track. */
:root[data-bs-theme="dark"] .form-switch .form-check-input:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='rgba%28255, 255, 255, 0.6%29'/></svg>");
    background-color: color-mix(in srgb, var(--bs-body-bg) 82%, #000);
    border-color: color-mix(in srgb, var(--bs-body-color) 28%, var(--bs-body-bg));
}
/* Range sliders (ion-rangeslider: Button Width, Image Size ...) in dark mode: the light gray track and the min / max limit chips glared on a dark page.
   Darker, still readable; the filled bar and the position badge keep the primary color. */
:root[data-bs-theme="dark"] .irs .irs-line { background-color: color-mix(in srgb, var(--bs-body-color) 24%, var(--bs-body-bg)); border-color: transparent; }
:root[data-bs-theme="dark"] .irs .irs-min,
:root[data-bs-theme="dark"] .irs .irs-max {
    background-color: color-mix(in srgb, var(--bs-body-color) 20%, var(--bs-body-bg));
    color: color-mix(in srgb, var(--bs-body-color) 78%, var(--bs-body-bg));
}
/* Color pick-lists (Divider color, Rating emoji color ...: a dropdown of "default / primary / secondary ..." entries) in dark mode: Bootstrap's dark gray .text-secondary / .text-dark
   names and the closed button's label vanished on the dark menu, and the menu's scrollbar was drawn in the light scheme. Light names, a dark scrollbar. */
:root[data-bs-theme="dark"] .dropdown-menu { color-scheme: dark; scrollbar-color: color-mix(in srgb, var(--bs-body-color) 40%, var(--bs-body-bg)) var(--bs-body-bg); }
:root[data-bs-theme="dark"] .dropdown-menu .dropdown-item .text-secondary { color: #b4bcc4 !important; }
:root[data-bs-theme="dark"] .dropdown-menu .dropdown-item .text-dark { color: #dee2e6 !important; }
:root[data-bs-theme="dark"] .btn-group.color-dark > .btn:first-child { color: var(--bs-body-color) !important; }
/* Color pick-lists, both themes. The closed button (btn-outline-secondary) filled with Bootstrap's dark gray on hover, which swallowed its colored label: a light hover instead.
   The list's scrollbar gets a visible track and thumb (the page-wide scrollbars are thin with a transparent track, which made this one hard to see). */
.btn-group.color-dark > .btn-outline-secondary {
    --bs-btn-hover-bg: var(--bs-tertiary-bg);
    --bs-btn-hover-border-color: var(--bs-border-color);
    --bs-btn-active-bg: var(--bs-secondary-bg);
    --bs-btn-active-border-color: var(--bs-border-color);
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-active-color: var(--bs-body-color);
}
.dropdown-menu { scrollbar-color: color-mix(in srgb, var(--bs-body-color) 45%, var(--bs-body-bg)) color-mix(in srgb, var(--bs-body-color) 8%, var(--bs-body-bg)); }
:root[data-bs-theme="dark"] .dropdown-menu { scrollbar-color: color-mix(in srgb, var(--bs-body-color) 45%, var(--bs-body-bg)) color-mix(in srgb, var(--bs-body-color) 10%, var(--bs-body-bg)); }
/* Dropdown item hover / selected colors in dark mode: the light-mode values (#f3f3f3 hover, dark-primary text) turned each option into a bright white tile. A slightly lifted dark hover with light-primary text instead. */
:root[data-bs-theme="dark"] .dropdown-menu {
    --bs-dropdown-link-hover-bg: color-mix(in srgb, var(--bs-body-bg) 95%, #fff);
    --bs-dropdown-link-hover-color: color-mix(in srgb, var(--bs-primary) 60%, #fff);
    --bs-dropdown-link-active-bg: color-mix(in srgb, var(--bs-primary) 32%, var(--bs-body-bg));
    --bs-dropdown-link-active-color: #fff;
}
/* Small Bootstrap Toggles (Approve / Clear in the review tables: data-size xs, 80 x 30): the plugin sizes them from data-width / data-height, so they keep SmartAdmin's compact look
   (11px text centered beside the handle). The "off" label is a gray tab in both themes (the portal's btn-light / btn-default are page-colored), the white handle keeps its soft lift. */
.toggle.btn-xs .toggle-on, .toggle.btn-xs .toggle-off {
    display: flex; align-items: center; justify-content: center;
    padding-top: 0; padding-bottom: 0; font-size: .6875rem; line-height: 1;
}
:root:not([data-bs-theme="dark"]) .toggle .toggle-group > .toggle-off:is(.btn-default, .btn-light) {
    --bs-btn-bg: #efefef; --bs-btn-color: #495057; --bs-btn-border-color: #efefef;
    --bs-btn-hover-bg: #e6e6e6; --bs-btn-hover-color: #495057; --bs-btn-hover-border-color: #e6e6e6;
    background-color: #efefef; color: #495057;
}
:root[data-bs-theme="dark"] .toggle .toggle-group > .toggle-off:is(.btn-default, .btn-light) {
    --bs-btn-bg: #62676c; --bs-btn-color: #f1f3f5; --bs-btn-border-color: #62676c;
    --bs-btn-hover-bg: #6c7176; --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: #6c7176;
    background-color: #62676c; color: #f1f3f5;
}
/* Hover on the small gray toggles: SmartAdmin lifted the "off" tab to a lighter face with a darker rim and a soft shadow (the label's own background was fixed above, so hover must set it too). */
.toggle.btn:hover { box-shadow: 0 2px 5px rgba(0, 0, 0, .18); }
:root:not([data-bs-theme="dark"]) .toggle.btn:hover { border-color: #b3b3b3; }
:root:not([data-bs-theme="dark"]) .toggle:hover .toggle-group > .toggle-off:is(.btn-default, .btn-light) { background-color: #f8f8f8; border-color: #b3b3b3; }
:root[data-bs-theme="dark"] .toggle.btn:hover { border-color: #8a9096; }
:root[data-bs-theme="dark"] .toggle:hover .toggle-group > .toggle-off:is(.btn-default, .btn-light) { background-color: #72777d; border-color: #8a9096; }
/* Boxed tabs (<ul class="nav nav-tabs bordered">: the Response Manager's Instructions / Assignment / AI Creator ... tabs): the plain text-only tabs were easy to overlook.
   Every tab is a visible box with a rim and a tinted face; the selected one is the page color with a primary top edge, and the box rows wrap with a small gap. */
.nav-tabs.bordered { gap: .25rem; border-bottom: 1px solid var(--bs-border-color); }
.nav-tabs.bordered .nav-link {
    margin-bottom: 0;
    border: 1px solid var(--bs-border-color);
    border-bottom-color: transparent;
    border-top-left-radius: .375rem; border-top-right-radius: .375rem;
    background-color: var(--bs-tertiary-bg);
    font-weight: 500;
}
.nav-tabs.bordered .nav-link:not(.active):hover { background-color: var(--bs-secondary-bg); border-color: var(--bs-border-color); border-bottom-color: transparent; }
.nav-tabs.bordered .nav-link.active {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    border-top: 2px solid var(--bs-primary);
    border-bottom-color: var(--bs-body-bg);
    margin-bottom: -1px;
    font-weight: 600;
}
/* An icon button (<button class="btn btn-icon"><i class="fa-lg ...">, no label): the gap rule for "icon + text" buttons (.btn > i.fa-lg { margin-right: .4em }) also hit it and pushed the icon left
   of center (the Response Library's Edit buttons). With no text beside it the icon needs no gap, and a plain line box keeps it vertically centered. */
.btn-icon > i.fa-lg, .btn.btn-icon > i { margin: 0; line-height: 1; vertical-align: middle; }
/* Response generator fragments (ResponseGenerator.cs: <select class="resizing_select btn-primary">): in Bootstrap 4 .btn-primary alone colored them (a primary pill with white text);
   in Bootstrap 5 .btn-primary only defines variables for a .btn, so the selects stayed the dark/default field color. Paint them from those variables, and keep the open list readable. */
select.resizing_select[class*="btn-"] {
    background-color: var(--bs-btn-bg);
    color: var(--bs-btn-color);
    border: 1px solid var(--bs-btn-border-color);
}
select.resizing_select[class*="btn-"]:hover { background-color: var(--bs-btn-hover-bg); color: var(--bs-btn-hover-color); }
select.resizing_select option { background-color: var(--bs-body-bg); color: var(--bs-body-color); }
/* Disabled select2 fields in dark mode (Auto Response Rule: "Apply Rule To", "Comment Length", "Response To Use" while the rule is active): select2's default disabled face is light gray,
   which glared as white boxes with faint text on the dark page. A barely lifted dark face with softened (still readable) text instead. */
:root[data-bs-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection--single,
:root[data-bs-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: color-mix(in srgb, var(--bs-body-bg) 94%, #fff);
    border-color: color-mix(in srgb, var(--bs-body-color) 12%, var(--bs-body-bg));
}
:root[data-bs-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection__rendered,
:root[data-bs-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection__placeholder {
    color: color-mix(in srgb, var(--bs-body-color) 62%, var(--bs-body-bg));
}
:root[data-bs-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection--multiple .select2-selection__choice {
    opacity: .75;
}

/* Small toggles (the testimonials Showing / Hidden sliders): SmartAdmin's .btn-sm text is .75rem; Bootstrap 5's .875rem made the label noticeably larger than the old one and so
   crowded the handle side of the switch. */
.toggle.btn-sm .toggle-on, .toggle.btn-sm .toggle-off { font-size: .8125rem; line-height: 18px; padding-top: 6px; padding-bottom: 6px; }
/* Fine tuning of the small toggles' text (testimonials Showing / Hidden): "Hidden" a few pixels left, "Showing" a few pixels right of where the plugin's side padding puts them. Moving the
   text by n px takes 2n px off the padding on the handle's side. */
:is(#app-body, .modal) .toggle.btn-sm .toggle-off.btn { padding-left: 16px !important; }
:is(#app-body, .modal) .toggle.btn-sm .toggle-on.btn { padding-right: 8px !important; }
/* Dropzone (Add Content: "DROP FILE HERE OR CLICK TO UPLOAD") in dark mode: the plugin's light face and gray text made a bright box with faint lettering on the dark panel.
   A see-through zone with a light dashed rim and light text, as SmartAdmin's dark skin drew it. */
:root[data-bs-theme="dark"] .dropzone {
    background: transparent;
    border-color: rgba(255, 255, 255, .75);
    color: var(--bs-body-color);
}
:root[data-bs-theme="dark"] .dropzone .dz-message,
:root[data-bs-theme="dark"] .dropzone .dz-message span,
:root[data-bs-theme="dark"] .dropzone .dz-message .dz-text { color: var(--bs-body-color); opacity: 1; }
:root[data-bs-theme="dark"] .dropzone .dz-message i,
:root[data-bs-theme="dark"] .dropzone .dz-message .fa-cloud-upload,
:root[data-bs-theme="dark"] .dropzone .dz-message [class*="fa-"] { color: var(--bs-body-color); }
/* FullCalendar (Social Media Calendar) column headers in dark mode: the day-name cells stayed white (the calendar's page color) over a dark grid. A raised dark gray instead. */
:root[data-bs-theme="dark"] .fc .fc-col-header,
:root[data-bs-theme="dark"] .fc .fc-col-header-cell,
:root[data-bs-theme="dark"] .fc .fc-scrollgrid-section-header > th,
:root[data-bs-theme="dark"] .fc .fc-scrollgrid-section-header > td {
    background-color: color-mix(in srgb, var(--bs-body-bg) 88%, #fff) !important;
}
/* Planned-content tiles in the Posts Calendar (Report_SocialMediaCalendar: <div class="card ... bg-warning-200 border-warning"> and the danger / success variants) in dark mode: SmartAdmin's dark skin drew
   them as a dark tile with a colored rim and normal light text, not a solid tint with washed-out text. */
:root[data-bs-theme="dark"] .card.bg-warning-200,
:root[data-bs-theme="dark"] .card.bg-danger-200,
:root[data-bs-theme="dark"] .card.bg-success-200 {
    background-color: color-mix(in srgb, var(--bs-body-bg) 94%, #fff) !important;
    color: var(--bs-body-color) !important;
}
:root[data-bs-theme="dark"] .card.bg-warning-200 *,
:root[data-bs-theme="dark"] .card.bg-danger-200 *,
:root[data-bs-theme="dark"] .card.bg-success-200 * { color: inherit !important; }
/* Dropdown menus in dark mode (the Notify Contacts "Action" menu ...): a near-black face with white text and a bright divider was too stark; the old portal's menu was a raised
   gray with softened text and a faint divider. */
:root[data-bs-theme="dark"] .dropdown-menu {
    --bs-dropdown-bg: color-mix(in srgb, var(--bs-body-bg) 88%, #fff);
    --bs-dropdown-border-color: color-mix(in srgb, var(--bs-body-bg) 80%, #fff);
    --bs-dropdown-color: color-mix(in srgb, var(--bs-body-color) 80%, var(--bs-body-bg));
    --bs-dropdown-link-color: color-mix(in srgb, var(--bs-body-color) 80%, var(--bs-body-bg));
    --bs-dropdown-divider-bg: rgba(255, 255, 255, .08);
}
:root[data-bs-theme="dark"] .dropdown-menu .dropdown-divider { border-top-color: rgba(255, 255, 255, .08); opacity: 1; }
/* Dropdown menus shown by the page's own script instead of Bootstrap's (the Notify Contacts chat box "Send" caret: togglePopup() just un-hides a .dropdown-menu): Bootstrap 4 placed
   them with top: 100% / left: 0 (right: 0 for dropdown-menu-right) inside the positioned button group; Bootstrap 5 leaves that to Popper, so the menu fell back to the start of its
   row, far from its button. Popper-driven menus set their own inline position, which wins over these. */
.dropdown-menu:not([data-bs-popper]) { top: 100%; left: 0; margin-top: .125rem; }
.dropdown-menu-end:not([data-bs-popper]) { right: 0; left: auto; }
/* A plain badge (<span class="badge" style="border:1px solid <color>; width:110px">: the Contacts Quality range labels "Over 90%", "80% to 89%" ...) has no background class. In Bootstrap 4 that
   left it as an outlined chip with the surrounding text color at its parent's size; Bootstrap 5's .badge is white, bold and .75em, which made it invisible against the page. */
.badge:not([class*="badge-"]):not([class*="bg-"]):not([class*="text-"]) {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    font-size: .75em;   /* Bootstrap 4's badge size (75% of the heading it sits in) */
    font-weight: 700;
    padding: .25em .4em;
    border-radius: .25rem;
}
/* GetAlert's icon badge (<div class="alert-icon width-3"><span class="icon-stack icon-stack-md">): back at its natural medium size (2.125rem, as in SmartAdmin) instead of 2.75rem, sized to its
   content and kept from shrinking (it was squeezed by the message text and overlapped it), with a small gap before the text. Alerts with a plain icon (<i class="fa-info-circle">) keep their wider box. */
.alert-icon .icon-stack.icon-stack-md { font-size: 2.125rem; }
.alert-icon:not(:has(> i)) { flex: 0 0 auto; width: auto !important; margin-right: .5rem; }
.alert-icon:not(:has(> i)) + div { padding-left: 0; }
/* Tags input: container stays white, so typed text must be dark in dark mode */
:root[data-bs-theme="dark"] .bootstrap-tagsinput input,
:root[data-bs-theme="dark"] .bootstrap-tagsinput .form-control {
    color: #212529 !important;
    background: transparent !important;
}
:root[data-bs-theme="dark"] .bootstrap-tagsinput input::placeholder { color: #6c757d; }
/* Outlined accordions in dark mode: the 8% black border and body-colored header vanish on a dark page; give them a visible rim and a slightly lifted header. */
:root[data-bs-theme="dark"] .accordion.accordion-outline .card {
    border-color: rgba(255, 255, 255, .22) !important;
}
:root[data-bs-theme="dark"] .accordion.accordion-hover .card-header,
:root[data-bs-theme="dark"] .accordion.accordion-outline .card-header {
    background: color-mix(in srgb, var(--bs-body-color) 10%, var(--bs-body-bg));
}
/* Default-size Bootstrap Toggles (e.g. Active / All Variables, data-height 37): the plugin writes an inline line-height from data-height, which pushed the label text up
   out of the switch. Center the labels with flex instead of relying on line-height. */
:is(#app-body, .modal) .toggle:not(.btn-xs):not(.btn-sm) .toggle-on,
:is(#app-body, .modal) .toggle:not(.btn-xs):not(.btn-sm) .toggle-off {
    display: flex; align-items: center; justify-content: center;
    padding-top: 0 !important; padding-bottom: 0 !important; line-height: 1 !important;
}
/* Review Process "How To" boxes (a.HowToBox.btn): Bootstrap 4's .btn wrapped text; the nowrap button rule made the descriptions run out of the 258px box. Wrap and center them, with a little space between boxes. */
a.HowToBox.btn { white-space: normal; text-align: center; margin: 4px; }
a.HowToBox .HowToTitle { margin-bottom: .5rem; }
/* The nowrap on .btn is more specific elsewhere and inherited by the box's text, so force wrapping on the box and its children. */
a.HowToBox.btn, a.HowToBox.btn .HowToTitle, a.HowToBox.btn .HowToDesc { white-space: normal !important; overflow-wrap: break-word; }
/* Online Visibility Checkup: the in-card action links are <a class="bg-white text-primary btn-outline-primary btn-primary">. Their white background is forced, but Bootstrap 5's
   outline-button hover color is white, so the label vanished while the card was hovered. Keep the primary label color. */
.hover-bg a.bg-white[class*="btn-"], .hover-bg a.bg-white[class*="btn-"]:hover, .hover-bg a.bg-white[class*="btn-"]:focus, .hover-bg a.bg-white[class*="btn-"]:active,
.hover-bg a.bg-white[class*="btn-"] * { color: var(--bs-primary) !important; }
/* Panel "Title and Color" popover (Panels.GetPanelAdditionalHeaderHtmlIconColorSettings): 7 theme colors x 5 shades in an even 5-column grid of short rounded swatches,
   then "No color" on the same row as Cancel and Save. The picker wrapper only groups the toggle buttons, so it lays out as if it were not there. */
.panel-color-form { gap: .5rem; }
.panel-color-picker { display: contents; }
.panel-color-grid { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .375rem; width: 100%; flex: 0 0 100%; }
.panel-color-grid > .btn { flex: none !important; width: 100% !important; height: 1.625rem !important; min-width: 0; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: .375rem !important;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); align-items: center; justify-content: center; font-size: .75rem; transition: transform .1s ease-out; }
.panel-color-grid > .btn:hover { transform: scale(1.08); }
.panel-color-grid > .btn.active, .panel-color-grid > .btn:has(input:checked) { box-shadow: 0 0 0 2px var(--bs-body-bg, #fff), 0 0 0 4px var(--bs-primary); }
.panel-color-none > .btn .fa-check { margin-right: .25rem; }
/* Dashboard / How To module cards (WelcomeBase.GetModuleCard): a <button class="btn btn-block ... position-relative overflow-hidden h-100"> holding a title and text.
   The portal's no-wrap button rule stopped the text wrapping, so it ran out of the card when the screen got narrower. */
.btn.btn-block.position-relative.overflow-hidden { white-space: normal; width: 100%; min-width: 0; }
.btn.btn-block.position-relative.overflow-hidden > div { min-width: 0; overflow-wrap: anywhere; }
/* The no-wrap button rule is more specific than the rule above, so force wrapping, and let the card's flex wrapper shrink to the panel instead of growing to the text's one-line width. */
.btn.btn-block.position-relative.overflow-hidden,
.btn.btn-block.position-relative.overflow-hidden * { white-space: normal !important; }
div:has(> .btn.btn-block.position-relative.overflow-hidden) { min-width: 0; max-width: 100%; }
/* Google Maps pin pop-ups (info windows) are white boxes in both themes; in dark mode their text inherited the page's light color and faded into the box.
   Give the pop-up the dark body color, as it was in SmartAdmin; text that sets its own color (the rank circles, links) is not touched. */
:root[data-bs-theme="dark"] .gm-style .gm-style-iw-c,
:root[data-bs-theme="dark"] .gm-style .gm-style-iw-d { color: #212529; }
:root[data-bs-theme="dark"] .gm-style .gm-style-iw-d .text-muted,
:root[data-bs-theme="dark"] .gm-style .gm-style-iw-d .text-body-secondary { color: #6c757d; }