/***********************************************************************************************************************************************************/
/* Global overrides to standard Bootstrap Dialog library styles */
/***********************************************************************************************************************************************************/

.bootstrap-dialog .modal-dialog {
    margin-top: 7rem !important;
}

.bootstrap-dialog .modal-lg .bootstrap4-dialog-button:first-child {
    margin-top: auto;
}

.bootstrap-dialog {
    z-index: 999999 !important;
}

    .bootstrap-dialog button.btn.btn-warning {
        color: var(--bs-white);
    }

.modal-header {
    text-transform: none;
    font-weight: 500;
}

.modal-footer button {
    text-transform: none;
}

.modal-footer .btn:not(.dropdown-toggle) {
    min-width: var(--btn-min-width);
}

/* Generic BootstrapDialog scrollbar styling */
.bootstrap-dialog .modal-body::-webkit-scrollbar {
    width: 14px;
}

.bootstrap-dialog .modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.bootstrap-dialog .modal-body::-webkit-scrollbar-thumb {
    background-color: var(--modern-accent-interactive);
    background-clip: padding-box;
    border: 2px solid transparent;
    border-left-width: 4px;
    border-right-width: 3px;
    border-radius: 999px;
}

/* Match the right summary panel's hover/selected thumb tone (soft muted
   blue-gray) instead of a saturated blue. Cover :active so dragging the
   thumb doesn't fall back to the browser's darker default. */
.bootstrap-dialog .modal-body::-webkit-scrollbar-thumb:hover,
.bootstrap-dialog .modal-body::-webkit-scrollbar-thumb:active {
    background-color: var(--modern-btn-primary-hover);
    background-clip: padding-box;
}

.modal-header.bg-info + .modal-body::-webkit-scrollbar {
    width: 14px;
}

.modal-header.bg-info + .modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.modal-header.bg-info + .modal-body::-webkit-scrollbar-thumb {
    background-color: var(--modern-accent-interactive);
    background-clip: padding-box;
    border: 2px solid transparent;
    border-left-width: 4px;
    border-right-width: 3px;
    border-radius: 999px;
}

.bootstrap-dialog.type-danger .modal-dialog .modal-content .modal-header + .modal-body::-webkit-scrollbar {
    width: 14px;
}

.bootstrap-dialog.type-danger > .modal-dialog > .modal-content > .modal-header + .modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.bootstrap-dialog.type-danger > .modal-dialog > .modal-content > .modal-header + .modal-body::-webkit-scrollbar-thumb {
    background-color: var(--modern-accent-interactive);
    background-clip: padding-box;
    border: 2px solid transparent;
    border-left-width: 4px;
    border-right-width: 3px;
    border-radius: 999px;
}

.modal.bootstrap-dialog.type-danger .btn-close {
    filter: invert(1) brightness(2);
    opacity: 1;
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.modal-header .btn-close {
    opacity: 1;
    color: currentColor;
    border-radius: 50%;
    filter: invert(1) brightness(2);
    transition: transform 0.15s ease, background-color 0.15s ease;
}

    .modal-header .btn-close:focus,
    .modal-header .btn-close:focus-visible,
    .modal-header .btn-close:active {
        box-shadow: none !important;
        outline: 0 !important;
    }

    .modal-header .btn-close:hover {
        background-color: var(--modern-white-10);
        transform: scale(1.15);
    }

.modal-header .btn-resize,
.modal-header .btn-reset {
    border: none;
    background-color: transparent;
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    padding: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: invert(1) brightness(2);
    transition: transform 0.15s ease, background-color 0.15s ease;
}

    .modal-header .btn-resize:focus,
    .modal-header .btn-resize:focus-visible,
    .modal-header .btn-resize:active,
    .modal-header .btn-reset:focus,
    .modal-header .btn-reset:focus-visible,
    .modal-header .btn-reset:active {
        box-shadow: none !important;
        outline: 0 !important;
    }

    .modal-header .btn-resize:hover,
    .modal-header .btn-reset:hover {
        background-color: var(--modern-white-12);
        transform: scale(1.15);
    }

    .modal-header .btn-resize i,
    .modal-header .btn-reset i {
        font-size: 1.1rem;
        padding-top: 2px;
        color: currentColor;
    }

    .modal-header .btn-reset i {
        color: var(--modern-border-neutral);
        opacity: 1;
    }

        .modal-header .btn-reset i.dirty {
            color: var(--modern-chart-slate);
            opacity: 1;
            -webkit-text-stroke-width: .6px;
        }

.modal-header .btn.btn-reset:active,
.modal-header .btn.btn-resize:active {
    background-color: var(--modern-white-12) !important;
    box-shadow: none !important;
    transform: scale(1);
}

.modal-header .btn-close + .btn-resize + .btn-reset {
    margin-right: 0.25rem;
}

/* BootstrapDialog close wrapper originally relied on float:right. Since modal
   headers are flex containers, float has no effect and the close button can sit
   next to the title. Push the wrapper to the far right for all dialogs (legacy
   and modern) at the shared library layer. */
.bootstrap-dialog .bootstrap-dialog-close-button {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.modal-header .modal-title.ui-draggable-handle {
    cursor: move !important;
}

.alert .btn-close {
    opacity: .75;
    color: currentColor;
    filter: none;
    transition: background-size 0.15s ease, background-color 0.15s ease;
}

    .alert .btn-close:hover {
        opacity: 1;
        transform: none;
    }

.modal-dialog .modal-footer .btn:hover {
    transition: text-shadow 0.2s ease;
}

.bootstrap-dialog.type-success .modal-header {
    background-color: var(--modern-success-toast-bg) !important;
    border-bottom: 1px solid var(--modern-success-toast-border);
}

.bootstrap-dialog.type-success .bootstrap-dialog-title {
    color: var(--modern-success-toast-text) !important;
}

.modal-header.bootstrap-dialog-draggable {
    cursor: move;
}

.modal-header:not(.bootstrap-dialog-draggable), .modal-header:hover:not(.bootstrap-dialog-draggable) {
    cursor: default;
}

/* Bootstrap modal overrides */
.modal .modal-header {
    padding: 12px 12px;
    border-bottom: 1px solid var(--bs-gray-200);
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.modalWindow.show, .modal.bootstrap-dialog.show {
    background-color: var(--modern-shadow-black-rgb-25) !important;
}

/* ===================================================================
   Modern BootstrapDialog skinning (migrated from modern.css,
   de-scoped from body:has(.modern-form) so it applies site-wide).
   Covers .bootstrap-dialog danger / warning / info / wait families.
   =================================================================== */
/* Modern pages: danger BootstrapDialog (e.g. session timeout / operation failed).
   These are NOT Bootstrap modals ù they are BootstrapDialog library components
   (.bootstrap-dialog.type-danger) appended to <body>, outside .
   We scope with so the modern treatment only applies on
   modern pages while still reaching the body-level dialog. Mirror the info modal
   anatomy: light red header tint + dark red title so it reads urgent, not alarming. */
.bootstrap-dialog.type-danger .modal-header {
    background-color: var(--modern-danger-header-bg) !important;
    border-bottom: 1px solid var(--modern-danger-border);
}

.bootstrap-dialog.type-danger .modal-dialog {
    margin-top: 2rem !important;
    margin-bottom: 2rem;
    max-height: min(34rem, calc(100vh - 4rem));
}

.bootstrap-dialog.type-danger .modal-content {
    max-height: min(34rem, calc(100vh - 4rem));
    overflow: hidden;
}

.bootstrap-dialog.type-danger .modal-body {
    overflow-y: auto;
}

.bootstrap-dialog.type-danger .bootstrap-dialog-title {
    color: var(--modern-dialog-secondary-text) !important;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Close "X": .bootstrap-dialog-header is display:contents and .modal-header is
   flex, so the library's float:right is a no-op and the X collapses next to the
   title. Push the wrapper to the far right. */
.bootstrap-dialog.type-danger .bootstrap-dialog-close-button {
    margin-left: auto;
    display: flex;
    align-items: center;
}

/* The glyph is a Bootstrap 5 <button class="btn-close btn-close-white">; it is
   an SVG mask whose white tint comes from btn-close-white's filter:invert(1).
   Strip the filter (like the serial-lookup modal) so it renders dark, then tune
   opacity/scale for a clean modern close affordance. Neutralize Bootstrap's
   default -0.5rem right margin so the X's right edge aligns with the footer's
   OK button rather than overshooting past it. */
.bootstrap-dialog.type-danger .bootstrap-dialog-close-button .btn-close,
.bootstrap-dialog.type-danger .bootstrap-dialog-close-button .btn-close-white {
    filter: none !important;
    opacity: 0.6 !important;
    box-shadow: none !important;
    margin-right: 0 !important;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.bootstrap-dialog.type-danger .bootstrap-dialog-close-button .btn-close:hover {
    opacity: 0.9 !important;
    background-color: var(--modern-shadow-black-08) !important;
    transform: scale(1.15);
}

.bootstrap-dialog.type-danger .bootstrap-dialog-close-button .btn-close:focus,
.bootstrap-dialog.type-danger .bootstrap-dialog-close-button .btn-close:focus-visible {
    box-shadow: none !important;
    outline: none !important;
}

/* Footer action buttons sit flush as a joined group: remove the inter-button gap
   so Copy to Clipboard and OK share a seam. Soften the divider to a hairline that
   matches the header seam for top/bottom symmetry. */
.bootstrap-dialog.type-danger .modal-footer {
    gap: 0;
    border-top: 1px solid var(--modern-danger-border);
}

/* Toned danger action button: deeper red from the palette + modern focus,
   consistent with the primary OK button treatment in other modals. When joined
   with a button to its left it squares its left corners and overlaps the seam;
   a lone OK keeps full rounding. */
.bootstrap-dialog.type-danger .modal-footer .btn.btn-danger,
.bootstrap-dialog.type-danger .btn.btn-danger {
    position: relative;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.4rem 1.5rem;
    border-radius: 0.3rem;
    transition: all 0.15s ease;
    background-color: var(--modern-danger-btn-bg) !important;
    border-color: var(--modern-danger-btn-bg) !important;
    color: var(--modern-white) !important;
}

.bootstrap-dialog.type-danger .modal-footer .btn.btn-danger:not(:first-child),
.bootstrap-dialog.type-danger .btn.btn-danger:not(:first-child) {
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.bootstrap-dialog.type-danger .modal-footer .btn.btn-danger:hover,
.bootstrap-dialog.type-danger .btn.btn-danger:hover {
    z-index: 1;
    background-color: var(--modern-danger-btn-hover) !important;
    border-color: var(--modern-danger-btn-hover) !important;
}

.bootstrap-dialog.type-danger .btn.btn-danger:focus,
.bootstrap-dialog.type-danger .btn.btn-danger:focus-visible {
    z-index: 2;
    box-shadow: 0 0 0 0.2rem var(--modern-danger-shadow-25) !important;
    outline: none !important;
}

/* Body icon matches the action button so the alert reads as one color key
   instead of clashing with Bootstrap's bright vendor red. */
.bootstrap-dialog.type-danger .modal-body i.text-danger {
    color: var(--modern-danger-btn-bg) !important;
}

/* Copy to Clipboard (.btn-outline-secondary): on the danger alert this stays a
   neutral secondary (white fill, subtle gray border, dark text) so it reads as
   the quiet option. Hover/focus use the same blue accent as the copy icon so it
   remains visually distinct from the red OK button. Right corners squared to join with OK. */
.bootstrap-dialog.type-danger .btn.btn-outline-secondary {
    position: relative;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.4rem 1.25rem;
    border-top-left-radius: 0.3rem;
    border-bottom-left-radius: 0.3rem;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    transition: all 0.15s ease;
    background-color: var(--modern-white) !important;
    border-color: var(--form-control-border-color) !important;
    color: var(--modern-dialog-secondary-text) !important;
}

.bootstrap-dialog.type-danger .btn.btn-outline-secondary:hover {
    z-index: 1;
    background-color: var(--modern-white) !important;
    border-color: var(--modern-info-btn-bg) !important;
    color: var(--modern-info-btn-bg) !important;
}

.bootstrap-dialog.type-danger .btn.btn-outline-secondary:focus,
.bootstrap-dialog.type-danger .btn.btn-outline-secondary:focus-visible {
    box-shadow: 0 0 0 0.2rem var(--modern-accent-primary-25) !important;
    outline: none !important;
}

/* Modern pages: warning BootstrapDialog (e.g. validation/operation warnings).
   Same anatomy and structural treatment as the danger dialog, but in a soft
   amber key. Light amber header tint + deep amber title/buttons so it reads as
   a caution, not an error. */
.bootstrap-dialog.type-warning .modal-header {
    background-color: var(--modern-warning-header-bg) !important;
    border-bottom: 1px solid var(--modern-warning-border);
}

.bootstrap-dialog.type-warning .bootstrap-dialog-title {
    color: var(--modern-dialog-secondary-text) !important;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Close "X": same structural fix as danger ù push the wrapper right. */
.bootstrap-dialog.type-warning .bootstrap-dialog-close-button {
    margin-left: auto;
    display: flex;
    align-items: center;
}

/* Strip the btn-close-white invert filter so the glyph renders dark. Neutralize
   Bootstrap's default -0.5rem right margin so the X aligns with the OK button. */
.bootstrap-dialog.type-warning .bootstrap-dialog-close-button .btn-close,
.bootstrap-dialog.type-warning .bootstrap-dialog-close-button .btn-close-white {
    filter: none !important;
    opacity: 0.6 !important;
    box-shadow: none !important;
    margin-right: 0 !important;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.bootstrap-dialog.type-warning .bootstrap-dialog-close-button .btn-close:hover {
    opacity: 0.9 !important;
    background-color: var(--modern-shadow-black-08) !important;
    transform: scale(1.15);
}

.bootstrap-dialog.type-warning .bootstrap-dialog-close-button .btn-close:focus,
.bootstrap-dialog.type-warning .bootstrap-dialog-close-button .btn-close:focus-visible {
    box-shadow: none !important;
    outline: none !important;
}

/* Footer buttons sit flush as a joined group. Soften the divider to a hairline
   that matches the header seam for top/bottom symmetry. */
.bootstrap-dialog.type-warning .modal-footer {
    gap: 0;
    border-top: 1px solid var(--modern-warning-border);
}

/* Amber action button (OK). When joined with a button to its left it squares
   its left corners and overlaps the seam; a lone OK keeps full rounding. */
.bootstrap-dialog.type-warning .modal-footer .btn.btn-warning,
.bootstrap-dialog.type-warning .btn.btn-warning {
    position: relative;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.4rem 1.5rem;
    border-radius: 0.3rem;
    transition: all 0.15s ease;
    background-color: var(--modern-warning-btn-bg) !important;
    border-color: var(--modern-warning-btn-bg) !important;
    color: var(--modern-white) !important;
}

.bootstrap-dialog.type-warning .modal-footer .btn.btn-warning:not(:first-child),
.bootstrap-dialog.type-warning .btn.btn-warning:not(:first-child) {
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.bootstrap-dialog.type-warning .modal-footer .btn.btn-warning:hover,
.bootstrap-dialog.type-warning .btn.btn-warning:hover {
    z-index: 1;
    background-color: var(--modern-warning-btn-hover) !important;
    border-color: var(--modern-warning-btn-hover) !important;
    color: var(--modern-white) !important;
}

.bootstrap-dialog.type-warning .btn.btn-warning:focus,
.bootstrap-dialog.type-warning .btn.btn-warning:focus-visible {
    z-index: 2;
    box-shadow: 0 0 0 0.2rem var(--modern-focus-warning-25) !important;
    outline: none !important;
}

/* Body icon matches the action button so the alert reads as one color key
   instead of clashing with Bootstrap's bright vendor amber. */
.bootstrap-dialog.type-warning .modal-body i.text-warning {
    color: var(--modern-warning-btn-bg) !important;
}

/* Secondary (e.g. Copy to Clipboard): neutral at rest, warms to amber border on
   hover. Right corners squared to join with OK. */
.bootstrap-dialog.type-warning .btn.btn-outline-secondary {
    position: relative;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.4rem 1.25rem;
    border-top-left-radius: 0.3rem;
    border-bottom-left-radius: 0.3rem;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    transition: all 0.15s ease;
    background-color: var(--modern-white) !important;
    border-color: var(--form-control-border-color) !important;
    color: var(--modern-dialog-secondary-text) !important;
}

.bootstrap-dialog.type-warning .btn.btn-outline-secondary:hover {
    z-index: 1;
    background-color: var(--modern-white) !important;
    border-color: var(--modern-warning-btn-bg) !important;
    color: var(--modern-warning-btn-bg) !important;
}

.bootstrap-dialog.type-warning .btn.btn-outline-secondary:focus,
.bootstrap-dialog.type-warning .btn.btn-outline-secondary:focus-visible {
    box-shadow: 0 0 0 0.2rem var(--modern-focus-warning-25) !important;
    outline: none !important;
}

/* Modern pages: info BootstrapDialog (e.g. informational notices). Same anatomy
   and structural treatment as danger/warning, but in a soft teal key derived
   from the app's primary accent ù a gentler take on the harsh vendor cyan. */
.bootstrap-dialog.type-info .modal-header {
    background-color: var(--modern-info-header-bg) !important;
    border-bottom: 1px solid var(--modern-info-border);
}

.bootstrap-dialog.type-info .bootstrap-dialog-title {
    color: var(--modern-dialog-secondary-text) !important;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.bootstrap-dialog.type-info.wait-dialog .bootstrap-dialog-title {
    text-transform: none;
    font-weight: 600;
    letter-spacing: 0.2px;
}

/* Loading/wait dialogs (type-info): keep the same modern info family but tone
   down the old saturated/striped loader for a cleaner modern surface. */
.bootstrap-dialog.type-info .modal-body {
    color: var(--modern-text);
}

.bootstrap-dialog.type-info.wait-dialog .modal-body {
    padding-top: 1.15rem;
    padding-bottom: 1rem;
}

.bootstrap-dialog.type-info .bootstrap-dialog-title .spinner-border {
    width: 0.95rem;
    height: 0.95rem;
    border-width: 0.14em;
    color: var(--modern-info-btn-bg);
    vertical-align: -0.08em;
}

.bootstrap-dialog.type-info.wait-dialog .bootstrap-dialog-title .spinner-border {
    animation: spinner-border 1.4s linear infinite, wait-title-pulse 1.35s ease-in-out infinite;
}

.bootstrap-dialog.type-info .modal-body .progress {
    height: 0.9rem;
    border-radius: 999px;
    background-color: var(--modern-info-surface-emphasis);
    box-shadow: inset 0 1px 2px var(--modern-shadow-black-08);
}

.bootstrap-dialog.type-info .modal-body .progress .progress-bar {
    background-color: var(--modern-info-btn-bg) !important;
    background-image: none !important;
    color: transparent;
    border-radius: 999px;
}

.bootstrap-dialog.type-info .modal-body .progress .progress-bar.progress-bar-animated,
.bootstrap-dialog.type-info .modal-body .progress .progress-bar.progress-bar-striped {
    background-image: linear-gradient(90deg, var(--modern-white-14) 0%, var(--modern-white-05) 100%) !important;
    animation-duration: 1.4s;
}

    .bootstrap-dialog.type-info .modal-body .progress .progress-bar.progress-bar-animated {
        animation: none;
    }

/* Close "X": push the wrapper right. */
.bootstrap-dialog.type-info .bootstrap-dialog-close-button {
    margin-left: auto;
    display: flex;
    align-items: center;
}

/* Strip the btn-close-white invert filter so the glyph renders dark. Neutralize
   Bootstrap's default -0.5rem right margin so the X aligns with the OK button. */
.bootstrap-dialog.type-info .bootstrap-dialog-close-button .btn-close,
.bootstrap-dialog.type-info .bootstrap-dialog-close-button .btn-close-white {
    filter: none !important;
    opacity: 0.6 !important;
    box-shadow: none !important;
    margin-right: 0 !important;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.bootstrap-dialog.type-info .bootstrap-dialog-close-button .btn-close:hover {
    opacity: 0.9 !important;
    background-color: var(--modern-shadow-black-08) !important;
    transform: scale(1.15);
}

.bootstrap-dialog.type-info .bootstrap-dialog-close-button .btn-close:focus,
.bootstrap-dialog.type-info .bootstrap-dialog-close-button .btn-close:focus-visible {
    box-shadow: none !important;
    outline: none !important;
}

/* Modern form: shared joined-button geometry for Bootstrap dialog footers.
   Keep this generic so every dialog type gets consistent seam/radius behavior
   without per-dialog patching. Color/theming remains in type-specific rules. */
.bootstrap-dialog .modal-footer {
    gap: 0;
}

.bootstrap-dialog .modal-footer > .btn:not(:last-child):not(.collapse):not(.d-none):not([style*="display: none"]),
.bootstrap-dialog .modal-footer .btn-group > .btn:not(:last-child):not(.collapse):not(.d-none):not([style*="display: none"]) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.bootstrap-dialog .modal-footer > .btn:not(.collapse):not(.d-none):not([style*="display: none"]):not(:has(~ .btn:not(.collapse):not(.d-none):not([style*="display: none"]))),
.bootstrap-dialog .modal-footer .btn-group > .btn:not(.collapse):not(.d-none):not([style*="display: none"]):not(:has(~ .btn:not(.collapse):not(.d-none):not([style*="display: none"]))) {
    border-top-right-radius: 0.3rem;
    border-bottom-right-radius: 0.3rem;
}

.bootstrap-dialog .modal-footer > .btn + .btn,
.bootstrap-dialog .modal-footer .btn-group > .btn + .btn {
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Footer buttons sit flush as a joined group. Soften the divider to a hairline
   that matches the header seam for top/bottom symmetry. */
.bootstrap-dialog.type-info .modal-footer {
    gap: 0;
    border-top: 1px solid var(--modern-info-border);
}

/* Teal action button (OK). When joined with a button to its left it squares its
   left corners and overlaps the seam; a lone OK keeps full rounding. */
.bootstrap-dialog.type-info .modal-footer .btn.btn-info,
.bootstrap-dialog.type-info .btn.btn-info {
    position: relative;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.4rem 1.5rem;
    border-radius: 0.3rem;
    transition: all 0.15s ease;
    background-color: var(--modern-info-btn-bg) !important;
    border-color: var(--modern-info-btn-bg) !important;
    color: var(--modern-white) !important;
}

.bootstrap-dialog.type-info .modal-footer .btn.btn-info:not(:first-child),
.bootstrap-dialog.type-info .btn.btn-info:not(:first-child) {
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.bootstrap-dialog.type-info .modal-footer .btn.btn-info:hover,
.bootstrap-dialog.type-info .btn.btn-info:hover {
    z-index: 1;
    background-color: var(--modern-info-btn-hover) !important;
    border-color: var(--modern-info-btn-hover) !important;
    color: var(--modern-white) !important;
}

.bootstrap-dialog.type-info .btn.btn-info:focus,
.bootstrap-dialog.type-info .btn.btn-info:focus-visible {
    z-index: 2;
    box-shadow: 0 0 0 0.2rem var(--modern-accent-primary-25) !important;
    outline: none !important;
}

/* Secondary (e.g. Copy to Clipboard): neutral at rest, warms to teal border on
   hover. Right corners squared to join with OK. */
.bootstrap-dialog.type-info .btn.btn-outline-secondary {
    position: relative;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.4rem 1.25rem;
    border-top-left-radius: 0.3rem;
    border-bottom-left-radius: 0.3rem;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    transition: all 0.15s ease;
    background-color: var(--modern-white) !important;
    border-color: var(--form-control-border-color) !important;
    color: var(--modern-dialog-secondary-text) !important;
}

.bootstrap-dialog.type-info .btn.btn-outline-secondary:hover {
    z-index: 1;
    background-color: var(--modern-white) !important;
    border-color: var(--modern-info-btn-bg) !important;
    color: var(--modern-info-btn-bg) !important;
}

.bootstrap-dialog.type-info .btn.btn-outline-secondary:focus,
.bootstrap-dialog.type-info .btn.btn-outline-secondary:focus-visible {
    box-shadow: 0 0 0 0.2rem var(--modern-accent-primary-25) !important;
    outline: none !important;
}