/* CAI++ 31032026 - Modern Theme Override for 1055 Classes */
/* This CSS overrides existing 1055 classes to provide a modern look without changing HTML/JS */

/* ===== CSS Variables ===== */
:root
{
    --cai-primary: #252b2e; /* CAI 27042026 - dark theme primary, was pink #ffe5e4 */
    --cai-primary-light: #4f5559; /* CAI 27042026 - lighter dark shade, was pink #fff0ef */
    --cai-primary-dark: #1a1a1a; /* CAI 27042026 - darker dark shade, was pink #f5cdcb */
    --cai-accent: #1a1a1a;
    --cai-accent-hover: #333333;
    --cai-bg: #f5f5f5;
    --cai-card-bg: #ffffff;
    --cai-border: #8c8c8c; /* CAI 27052026 - WCAG 1.4.11 control-boundary token; raised from a pale near-white (~1.18:1 vs white) to ~3.20:1 vs white */
    --cai-border-light: #f0f0f0; /* decorative separator only — not used as UI-component boundary */
    --cai-text: #1a1a1a;
    --cai-text-light: #555555;
    --cai-text-muted: #888888;
    --cai-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    --cai-shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.12);
    --cai-radius: 8px;
    --cai-radius-sm: 4px;
    --cai-radius-lg: 12px;
    --cai-transition: all 0.25s ease;
    --cai-font: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    --cai-success: #27ae60;
    --cai-danger: #e74c3c;
    --cai-info: #3b67aa; /* CAI 27042026 - readable link blue, was pink #f5cdcb */
    --cai-warning: #f39c12;
}

/* ===== CAI++ 26052026 - Global focus indicator (WCAG 2.4.7 audit fix) =====
   Universal :focus-visible style for every keyboard-focusable element that
   doesn't already have a more-specific focus rule. Uses :focus-visible (not
   :focus) so it only fires for keyboard navigation — mouse clicks don't get
   the outline, preserving the existing visual UX.
   Excludes:
     - .a11y-panel * (the accessibility widget styles itself)
     - :where(input, select, textarea) for which a tighter ring is already
       defined further down in this file (border + box-shadow combo).
   The rule is low specificity on purpose so any per-control focus style
   defined elsewhere wins. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible,
[role="checkbox"]:focus-visible,
[role="radio"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
summary:focus-visible
{
    outline: 2px solid #6c5ce7;
    outline-offset: 2px;
    border-radius: 2px;
}

/* CAI 26052026 - the accessibility widget's own button + panel set their
   own focus via inline styles; keep the global rule from touching them. */
#caiA11yBtn:focus-visible,
#caiA11yPanel *:focus-visible
{
    outline: 3px solid #fff;
    outline-offset: -3px;
}

/* ===== CAI++ 26052026 - Screen-reader-only utility (WCAG 1.3.1 / 2.4.6) =====
   Visually hides content while keeping it in the accessible tree. Used by
   the master pages to emit a top-level <h1> derived from Page.Title so every
   page in the CAI corpus has a document outline for screen readers, without
   disturbing the existing visual layout. Pattern based on the widely-used
   "sr-only" utility (Bootstrap 4 / WebAIM). */
.cai-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;
}

/* ===== Global Reset & Base ===== */
body
{
    font-family: var(--cai-font) !important;
    background-color: var(--cai-bg) !important;
    color: var(--cai-text) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--cai-bg); }
::-webkit-scrollbar-thumb { background: #bcc3ce; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #8899aa; }

/* ===== Breadcrumb / Menu Path ===== */
.cssMenuPath_1055
{
    background-color: transparent !important;
    background: none !important;
    height: auto !important;
    padding: 12px 8px !important;
    font-size: 13px !important;
    color: var(--cai-text-light) !important;
    border-bottom: 1px solid var(--cai-border) !important;
    margin-bottom: 16px !important;
}

.cssMenuPath_1055 .line1 td
{
    height: auto !important;
    padding: 4px 8px !important;
    color: var(--cai-text-light) !important;
    font-family: var(--cai-font) !important;
    font-size: 13px !important;
}

.cssMenuPath_1055 a
{
    color: var(--cai-info) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: var(--cai-transition);
}

.cssMenuPath_1055 a:hover
{
    color: var(--cai-accent) !important;
}

/* ===== Main Section Header ===== */
.cssMainDiv_1055
{
    background-color: #252b2e !important; /* CAI 25042026, dark theme #252b2e — was pink #ffe5e4 */
    background: #252b2e !important; /* CAI 25042026, replaced pink gradient with solid #252b2e */
    border: none !important;
    border-radius: var(--cai-radius-lg) var(--cai-radius-lg) 0 0 !important;
    height: 44px !important;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.cssMainDivHeading_1055
{
    font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif !important; /* CAI 25042026, Apple system font stack */
    font-size: 16px !important; /* CAI 25042026, bumped from 15px */
    font-weight: 600 !important;
    color: #ffffff !important; /* CAI 25042026, white on dark band — was #000000 */
    margin: 0 0 0 20px !important; /* CAI 14052026 - was margin-left:20px only; the legacy <p class="cssMainDivHeading_1055"> markup carries an inline margin-top:10px (plus the <p>'s UA margin-bottom) that fought the flex align-items:center on .cssMainDiv_1055 and pushed the heading text to the top of the band — zero every margin except the 20px left indent */
    height: auto !important; /* CAI 14052026 - the legacy inline height:100% on the <p> made it fill the 44px band, so its text sat at the band's top edge instead of centering; size it to content so the flex centering takes effect */
    letter-spacing: 0.3px;
}

/* CAI++ 31032026 - Table Scroll Container */
.cssDivSearchOption_1055,
.cssDivSearchOptionInner_1055
{
    overflow-x: auto !important;
}

/* ===== Search/Filter Panel ===== */
.cssDivSearchOption_1055
{
    border: 1px solid var(--cai-border) !important;
    border-top: none !important;
    background-color: var(--cai-card-bg) !important;
    border-radius: 0 0 var(--cai-radius-lg) var(--cai-radius-lg) !important;
    box-shadow: var(--cai-shadow) !important;
    overflow: hidden;
}

.cssDivSearchOptionInner_1055
{
    border: none !important;
    margin: 0 !important;
    padding: 16px 20px !important;
    background-color: var(--cai-card-bg) !important;
}

/* ===== Form Fields Layout ===== */
.cssTDSearchLeft
{
    font-size: 13px !important;
    font-family: var(--cai-font) !important;
    text-align: right !important;
    color: var(--cai-text) !important;
    font-weight: 500 !important;
    background-color: var(--cai-card-bg) !important;
    padding: 10px 16px 10px 8px !important;
    width: 140px !important;
    height: auto !important;
    border-bottom: 1px solid var(--cai-border-light) !important;
    border-top: none !important;
    vertical-align: middle;
}

.cssTDSearchRight
{
    font-size: 13px !important;
    font-family: var(--cai-font) !important;
    text-align: left !important;
    color: var(--cai-text) !important;
    padding: 10px 8px 10px 16px !important;
    height: auto !important;
    border-bottom: 1px solid var(--cai-border-light) !important;
    vertical-align: middle;
}

/* CAI 02042026 - Form Inputs (excludes accessibility panel) */
input[type="text"]:not(.a11y-panel *):not(.a11y-help-panel *),
input[type="password"]:not(.a11y-panel *):not(.a11y-help-panel *),
select:not(.a11y-panel *):not(.a11y-help-panel *)
{
    font-family: var(--cai-font) !important;
    font-size: 13px !important;
    padding: 6px 10px !important;
    border: 1px solid var(--cai-border) !important;
    border-radius: var(--cai-radius-sm) !important;
    color: var(--cai-text) !important;
    background-color: #ffffff !important;
    transition: var(--cai-transition);
    outline: none;
    min-height: 32px;
}

input[type="text"]:not(.a11y-panel *):focus,
input[type="password"]:not(.a11y-panel *):focus,
select:not(.a11y-panel *):focus
{
    border-color: #252b2e !important; /* CAI 27042026 - dark theme focus, was var(--cai-primary) pink */
    box-shadow: 0 0 0 3px rgba(37, 43, 46, 0.18) !important; /* CAI 27042026 - dark focus glow, was rgba(255,229,228,0.12) pink */
}

input[type="text"]:not(.a11y-panel *):hover,
select:not(.a11y-panel *):hover
{
    border-color: #5f6368 !important; /* CAI 27052026 - hover must remain darker than default #8c8c8c; was #b0b8c4 */
}

/* CAI++ 13052026 - Z-index layering hierarchy (top wins). Everything below is global so any CAI page that loads this stylesheet gets the same ordering without needing the rule inlined in every master:
       99999999  - Accessibility widget (#caiA11yBtn, #caiA11yPanel)         ← top, beats dialogs so users can adjust a11y from inside a modal
        9999999  - jQuery UI dialog (.ui-dialog)                              ← beats every sticky/fixed bar below
        9999998  - jQuery UI overlay (.ui-widget-overlay)
         999999  - .cai-header / sticky page header
         999998  - .cai-nav / user menu
         999997  - .cai-footer
       The a11y widget has inline z-index:9999999 (no !important) on every master, so without the rule below the dialog's external !important would win and hide it. Bumping the widget to 99999999 here (one rule, all masters covered) plus the .ui-dialog/.ui-widget-overlay rules makes the layering explicit and centralized. */
#caiA11yBtn,
#caiA11yPanel
{
    z-index: 99999999 !important;
}

.ui-widget-overlay
{
    z-index: 9999998 !important;
}

.ui-dialog
{
    z-index: 9999999 !important;
}

/* CAI++ 13052026 - Disabled / readonly inputs get a light-grey fill so the user can tell at a glance the field is not editable. !important needed to beat the white background set on the base input rule above. */
input[type="text"]:not(.a11y-panel *):disabled,
input[type="text"]:not(.a11y-panel *)[readonly],
input[type="password"]:not(.a11y-panel *):disabled,
input[type="password"]:not(.a11y-panel *)[readonly],
select:not(.a11y-panel *):disabled,
textarea:not(.a11y-panel *):disabled,
textarea:not(.a11y-panel *)[readonly]
{
    background-color: #e9ecef !important;
    color: #6c757d !important;
    border-color: #8c8c8c !important; /* CAI 27052026 - WCAG 1.4.11 disabled border, was #ced4da (~1.50:1) */
    cursor: not-allowed;
}

/* CAI 02042026 - Buttons (excludes accessibility panel) */
input[type="button"]:not(.a11y-panel *):not(.a11y-help-panel *):not([id*="divPagingIndex"] *):not([id*="divPagingIndexGroup"] *),
.cssButton:not(.a11y-panel *):not(.a11y-help-panel *)
{
    font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif !important; /* CAI 25042026, Apple system font stack */
    font-size: 14px !important; /* CAI 25042026, bumped from 13px */
    font-weight: 600 !important;
    padding: 8px 20px !important;
    min-width: fit-content !important;
    white-space: nowrap !important;
    overflow: visible !important;
    border: none !important;
    border-radius: var(--cai-radius-sm) !important;
    background: linear-gradient(135deg, #252b2e 0%, #4f5559 100%) !important; /* CAI 25042026, dark theme — was pink primary gradient */
    color: #ffffff !important; /* CAI 25042026, white on dark — was #000000 */
    cursor: pointer !important;
    transition: var(--cai-transition);
    letter-spacing: 0.3px;
    text-transform: none !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25); /* CAI 25042026, dark shadow tint */
}

input[type="button"]:not(.a11y-panel *):not([id*="divPagingIndex"] *):not([id*="divPagingIndexGroup"] *):hover,
.cssButton:not(.a11y-panel *):hover
{
    background: linear-gradient(135deg, #4f5559 0%, #252b2e 100%) !important; /* CAI 25042026, hover is reversed dark gradient */
    box-shadow: 0 4px 8px rgba(0,0,0,0.35) !important; /* CAI 25042026, dark shadow tint */
    transform: translateY(-1px);
}

input[type="button"]:not(.a11y-panel *):not([id*="divPagingIndex"] *):not([id*="divPagingIndexGroup"] *):active,
.cssButton:not(.a11y-panel *):active
{
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0,0,0,0.25) !important; /* CAI 25042026, dark shadow tint */
}

/* ===== Data Table ===== */
.cssTableList_1055
{
    width: 100% !important;
    border: none !important;
    font: 12px var(--cai-font) !important;
    background-color: var(--cai-card-bg) !important;
    color: var(--cai-text) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: var(--cai-radius) !important;
    box-shadow: var(--cai-shadow) !important;
}


.cssTableList_1055 thead tr
{
    background: #252b2e !important; /* CAI 25042026, dark header #252b2e — was var(--cai-primary) pink */
}

.cssTableList_1055 th
{
    text-align: center;
    padding: 10px 12px !important;
    color: #ffffff !important; /* CAI 25042026, white text on dark — was #000000 */
    font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif !important; /* CAI 25042026, Apple system font stack */
    font-weight: 600 !important;
    font-size: 13px !important; /* CAI 25042026, bumped from 12px */
    border: none !important;
    border-right: 1px solid rgba(255,255,255,0.15) !important;
    border-bottom: 1px solid rgba(255,255,255,0.2) !important;
    background: #252b2e !important; /* CAI 25042026, dark header #252b2e — was var(--cai-primary) pink */
    /* DJT-- 03062026 white-space: nowrap !important;*/
    text-transform: none; /* CAI 25042026, preserve original heading casing — was uppercase */
    letter-spacing: 0.5px;
}

.cssTableList_1055 th:last-child
{
    border-right: none !important;
}

.cssTableList_1055 th a
{
    color: #ffffff !important; /* CAI 25042026, white text on dark — was #000000 */
    text-decoration: none !important;
}

.cssTableList_1055 td
{
    padding: 8px 12px !important;
    border-bottom: 1px solid var(--cai-border-light) !important;
    border-right: none !important;
    border-top: none !important;
    border-left: none !important;
    font-size: 12px !important;
    vertical-align: middle;
    transition: var(--cai-transition);
}

.cssTableList_1055 tr:nth-child(odd)
{
    background-color: #ffffff; /*CAI 17042026 - removed !important so inline styles can override*/
}

.cssTableList_1055 tr:nth-child(even)
{
    background-color: #e4e7ec; /*CAI 27042026, AYAN - darkened from #f8f9fb for better odd/even contrast*/
}

tr.cssHover:hover,
.cssTableList_1055 tbody tr:hover
{
    background-color: #e5e5e5 !important; /* CAI 25042026, light grey hover — was pink #ffe5e4 */
}

.cssTableList_1055 {
    border: 2px solid var(--cai-border-light) !important;
    border-collapse: collapse !important;
}

.cssTableList_1055 th,
.cssTableList_1055 td {
        border: 1px solid var(--cai-border-light) !important;
    }

/* ===== Paging ===== */ /* CAI 16042026 - same as old style, only active color is CAI primary */

/* ===== Notice / Info Box ===== */
.style6
{
    font-family: var(--cai-font) !important;
    text-align: center !important;
    color: var(--cai-text-light) !important;
    background-color: #fff8e1 !important;
    padding: 10px 16px !important;
    border: 1px solid #ffe082 !important;
    border-radius: var(--cai-radius-sm) !important;
    font-size: 12px !important;
}

/* ===== Feedback / No Records ===== */
[id*="fntFeedback"]
{
    font-family: var(--cai-font) !important;
    color: var(--cai-danger) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 8px !important;
}

/* ===== Progress Indicator ===== */
.cssUpdateProgress2
{
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 999999 !important;
    background: rgba(255,255,255,0.95) !important;
    padding: 20px !important;
    border-radius: var(--cai-radius) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15) !important;
}

/* CAI 06042026 - Links (excludes accessibility panel and nav menu) */
a:not(.a11y-panel *):not(.a11y-help-panel *):not(.a11y-widget-toggle):not(.oe_menu *):not(.cai-nav *):not(.cai-header *):not(.cai-footer *)
{
    color: var(--cai-info);
    transition: var(--cai-transition);
}

a:not(.a11y-panel *):not(.a11y-help-panel *):not(.a11y-widget-toggle):not(.oe_menu *):not(.cai-nav *):not(.cai-header *):not(.cai-footer *):hover
{
    color: var(--cai-accent-hover);
}

/* CAI 02042026 - Checkboxes & Radio Buttons (excludes accessibility panel) */
input[type="checkbox"]:not(.a11y-panel *),
input[type="radio"]:not(.a11y-panel *)
{
    accent-color: #252b2e; /* CAI 25042026, dark grey-black to match heading band — was var(--cai-primary) pink */
    cursor: pointer;
}

label:not(.a11y-panel *):not(.a11y-help-panel *)
{
    cursor: pointer;
}

/* ===== Header Bar (Top Navigation) ===== */
.cai-header
{
    background: #ffffff !important;
    color: var(--cai-text) !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999999 !important; /* CAI 31032026 - highest z-index to stay in front */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    border-bottom: 1px solid var(--cai-border) !important;
}

.cai-header-inner
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: 60px;
    max-width: 100%;
}

.cai-logo-area
{
    display: flex;
    align-items: center;
    gap: 12px;
}

.cai-logo-area img
{
    height: 44px;
    width: auto;
}

.cai-user-area
{
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    background: var(--cai-accent);
    color: rgba(255,255,255,0.9);
    padding: 6px 16px;
    border-radius: var(--cai-radius-sm);
}

.cai-user-area .cai-username
{
    font-weight: 500;
    color: #ffffff;
}

.cai-signout-btn
{
    background: rgba(255,255,255,0.2) !important; /* CAI 02042026 */
    border: 1px solid rgba(255,255,255,0.4) !important; /* CAI 02042026 */
    color: #ffffff !important; /* CAI 02042026 */
    padding: 6px 14px !important; /* CAI 02042026 */
    border-radius: var(--cai-radius-sm) !important; /* CAI 02042026 */
    cursor: pointer !important; /* CAI 02042026 */
    font-size: 12px !important; /* CAI 02042026 */
    font-family: var(--cai-font) !important; /* CAI 02042026 */
    transition: var(--cai-transition);
    text-decoration: none !important; /* CAI 02042026 */
    display: inline-flex !important; /* CAI 02042026 */
    align-items: center !important; /* CAI 02042026 */
    gap: 6px !important; /* CAI 02042026 */
    white-space: nowrap !important; /* CAI 02042026 */
}

.cai-signout-btn:hover
{
    background: rgba(255,255,255,0.25);
    border-color: rgba(255,255,255,0.4);
    color: #ffffff;
}

/* ===== Navigation Menu ===== */
.cai-nav
{
    background: var(--cai-primary);
    position: fixed !important;
    top: 60px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999998 !important; /* CAI 31032026 - just below header */
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    overflow: visible !important; /* CAI 06042026 - visible for dropdown submenus */
}

/* CAI++ 06042026 - Desktop: horizontal menu */
.cai-nav ul.oe_menu
{
    white-space: nowrap !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    float: none !important;
    min-width: max-content !important; /* CAI 06042026 - prevent items from compressing */
}

.cai-nav ul.oe_menu > li
{
    float: none !important;
    flex-shrink: 0 !important; /* CAI 06042026 */
}

/* CAI++ 06042026 - Dropdown submenus stay absolute to parent */
.cai-nav ul.oe_menu > li > div
{
    z-index: 999999 !important; /* CAI 06042026 */
}

.cai-nav ul.oe_menu > li > a
{
    white-space: nowrap;
    display: flex !important; /* CAI 06042026 */
    align-items: center !important; /* CAI 06042026 */
    gap: 6px !important; /* CAI 06042026 */
    padding: 10px 12px !important; /* CAI 06042026 */
    font-size: 12px !important; /* CAI 06042026 */
}

.cai-nav .MenuHeaderName
{
    display: inline !important; /* CAI++ 06042026 - ensure menu text is visible */
    font-size: 12px !important; /* CAI 06042026 */
    vertical-align: middle !important; /* CAI 06042026 */
}

/* CAI++ 31032026 - Hamburger button (hidden on desktop) */
.cai-hamburger
{
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 8px;
    cursor: pointer;
    text-decoration: none;
}

.cai-hamburger span
{
    display: block;
    width: 20px;
    height: 2px;
    background: var(--cai-text);
    border-radius: 2px;
    transition: var(--cai-transition);
}

/* CAI++ 31032026 - Sidebar close button (hidden on desktop) */
.cai-sidebar-close
{
    display: none;
}

/* CAI++ 31032026 - Overlay (hidden on desktop) */
.cai-nav-overlay
{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 499998;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cai-nav-overlay-show
{
    display: block !important;
    opacity: 1;
}

/* ===== Main Content Area ===== */
.cai-content-wrapper
{
    margin-top: 16px;
    padding: 0 20px 80px 20px;
    min-height: calc(100vh - 180px);
}

/* CAI++ 20042026 - override fixed 1000px width from MainStyle.css */
.cssDivExportOption_1055
{
    width: 100% !important;
    max-width: 1000px !important;
    box-sizing: border-box !important;
    margin: 15px auto !important;
}

/* ===== Footer ===== */
.cai-footer
{
    position: fixed !important; /* CAI 02042026 */
    right: 0 !important; /* CAI 02042026 */
    bottom: 0 !important; /* CAI 02042026 */
    left: 0 !important; /* CAI 02042026 */
    background: var(--cai-accent) !important; /* CAI 02042026 */
    color: rgba(255,255,255,0.7) !important; /* CAI 02042026 */
    font-size: 12px !important; /* CAI 02042026 */
    padding: 10px 0 !important; /* CAI 02042026 */
    text-align: center !important; /* CAI 02042026 */
    z-index: 999997 !important; /* CAI 02042026 */
    border-top: 2px solid var(--cai-primary) !important; /* CAI 02042026 */
}

.cai-footer a
{
    color: rgba(255,255,255,0.85) !important;
    text-decoration: none !important;
    font-weight: 500;
    margin: 0 8px;
    transition: var(--cai-transition);
}

.cai-footer a:hover
{
    color: #ffffff !important;
}

.cai-footer .cai-version
{
    font-size: 10px;
    color: rgba(255,255,255,0.4);
    margin-top: 4px;
}

/* ===== Export Icons Area ===== */
[id*="divPagingContainer"] > table
{
    background-color: var(--cai-card-bg) !important;
    border: 1px solid var(--cai-border) !important;
    border-radius: var(--cai-radius-sm) !important;
    box-shadow: none !important;
}

/* ===== Popup Page Styling ===== */
#site_content_popup_page
{
    background: var(--cai-card-bg) !important;
    min-height: auto !important;
    padding: 16px !important;
}

/* CAI++ 31032026 - jQuery UI Tabs */
.ui-tabs
{
    border: none !important;
    background: none !important;
    padding: 0 !important;
}

.ui-tabs .ui-tabs-nav
{
    background: none !important;
    border: none !important;
    border-bottom: 2px solid #252b2e !important; /* CAI 25042026, dark accent — was var(--cai-primary) pink */
    padding: 0 !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
}

.ui-tabs .ui-tabs-nav li
{
    margin: 0 4px 0 0 !important;
    border: 1px solid var(--cai-border) !important;
    border-bottom: none !important;
    background: #f5f5f5 !important;
    border-radius: var(--cai-radius-sm) var(--cai-radius-sm) 0 0 !important;
}

.ui-tabs .ui-tabs-nav li a
{
    padding: 10px 24px !important;
    font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif !important; /* CAI 25042026, Apple system font stack */
    font-size: 14px !important; /* CAI 25042026, bumped from 13px */
    font-weight: 600 !important;
    color: var(--cai-text-light) !important;
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
    transition: var(--cai-transition);
}

/* CAI 27052026 - WCAG 2.4.7 (Focus Visible): the rule above sets outline:none !important on jQuery UI tab anchors and there is no focus-state substitute, so keyboard focus on a tab was invisible. The 3-class selector also beats the global a:focus-visible rule on specificity alone. Add an explicit :focus-visible companion that paints a 2px outline tightly inside the tab. Uses !important to override the default rule's outline:none !important. outline-offset is NEGATIVE so the ring renders inside the tab's border box and doesn't clip against adjacent tabs. */
.ui-tabs .ui-tabs-nav li a:focus-visible
{
    outline: 2px solid #6c5ce7 !important;
    outline-offset: -2px !important;
    border-radius: 2px !important;
}

.ui-tabs .ui-tabs-nav li a:hover
{
    color: #ffffff !important; /* CAI 25042026, white on dark hover — was #000000 */
    background: #4f5559 !important; /* CAI 25042026, lighter dark hover wash — was rgba(255,229,228,0.08) pink wash */
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active
{
    background: #252b2e !important; /* CAI 25042026, dark active tab — was var(--cai-primary) pink */
    border-color: #252b2e !important; /* CAI 25042026, dark active border — was var(--cai-primary) pink */
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active a
{
    color: #ffffff !important; /* CAI 25042026, white on dark active tab — was #000000 */
    font-weight: 700 !important;
}

.ui-tabs .ui-tabs-panel
{
    border: 1px solid var(--cai-border) !important;
    border-top: none !important;
    background: var(--cai-card-bg) !important;
    padding: 16px !important;
    border-radius: 0 0 var(--cai-radius-sm) var(--cai-radius-sm) !important;
}

/* ===== jQuery UI Overrides ===== */
.ui-widget
{
    font-family: var(--cai-font) !important;
}

/* CAI++ 27042026 - Universal jQuery UI dialog styling so every __glb_fnShowDialogMessage popup gets the same look:
   - red titlebar (#ce0606) with white title + visible close button
   - solid red border + soft shadow + rounded corners
   - white body, scrollable when content exceeds viewport (handles both numeric and "auto" heights)
   - dim backdrop on modal dialogs
   This matches the design reference shared on 2026-04-27. */
/* CAI 27042026 - titlebar/border color switched from #252b2e to #ce0606 per user request */
.ui-dialog
{
    border: 2px solid #ce0606 !important;
    border-radius: 8px !important;
    padding: 0 !important;
    background: #ffffff !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.35) !important;
    overflow: hidden !important; /* keeps the rounded corners crisp */
    display: flex; /* CAI 27042026 - no !important: jQuery UI sets inline style="display:none" on .dialog("close"); without this fix, !important made dialogs un-closable */
    flex-direction: column !important;
    max-height: 90vh !important; /* cap so dialogs opened with height:"auto" stay inside the viewport */
}
/*DPP 20052026*/
/* CAI 11052026 - rule chained with .ui-widget-header (jQuery UI auto-adds this to the titlebar) to gain extra specificity and beat any cascade that might override the red band */
    .ui-dialog .ui-dialog-titlebar, 
    .ui-dialog .ui-dialog-titlebar.ui-widget-header,
    .ui-dialog > .ui-dialog-titlebar.ui-widget-header {
        background: #ce0606 !important;
        background-color: #ce0606 !important; /* CAI++ 11052026 - explicit longhand so a later background-color in another stylesheet can't override the red */
        background-image: none !important; /* CAI++ 11052026 - kill the redmond .ui-widget-header sprite if any cached copy still applies it */
        color: #ffffff !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 4px 12px !important; /* CAI 11052026 - was 10px; slight bump so titlebar visually reads on mobile when the title text is short */
        position: relative !important;
        flex-shrink: 0 !important;
        overflow: hidden !important; /* contain the float so the band sizes to the title row */
        font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif !important;
        min-height: 32px !important; /* CAI 11052026 - was 48; tall enough that the red band always reads as a header band, not a thin line */ /*DPP 20052026*/
        display: block !important; /* CAI++ 11052026 - defensive: stop any cascade from setting display:flex (which can collapse min-height) */
        visibility: visible !important; /* CAI++ 11052026 - defensive in case a stylesheet hides the titlebar */
        opacity: 1 !important; /* CAI++ 11052026 - defensive against fade-out cascades */
    }

.ui-dialog .ui-dialog-titlebar .ui-dialog-title
{
    visibility: visible !important; /* CAI++ 11052026 - defensive: keep title text visible */
    opacity: 1 !important;
}

/* CAI 27042026 - follow jQuery UI's own .ui-dialog-title pattern: float-left + width + ellipsis, so long titles truncate cleanly instead of stretching the band or wrapping */
    .ui-dialog .ui-dialog-title {
        color: #ffffff !important;
        font-size: 13px !important; /*DPP 20052026*/
        font-weight: 600 !important;
        letter-spacing: 0.2px; /* CAI 27052026 - WCAG 1.4.12: demoted from !important so user text-spacing settings (0.12em letter-spacing) can win */
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.3; /* CAI 27052026 - WCAG 1.4.12: demoted from !important; 1.3 ratio scales correctly under user text-spacing settings (1.5x line-height) */
        float: left !important;
        width: calc(100% - 40px) !important; /* leaves room for the 28px close button + ~12px gap */
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

/* CAI 11052026 - inverted close-button colors (white bg, red ×) for contrast against red banner; uses a fixed top offset instead of top:50% because transform-based accessibility zoom on .ui-dialog creates a new containing block, which made the % resolve against the whole dialog and pushed the button into the content area */
    .ui-dialog .ui-dialog-titlebar-close {
        position: absolute !important; /*DPP 20052026*/
        top: 4px !important; /*DPP 20052026*/ /* CAI 11052026 - was top:50% + translateY(-50%); fixed offset avoids transform-containing-block bug */
        right: 12px !important; /*DPP 20052026*/
        width: 24px !important; /* CAI 11052026 - was 28px */
        height: 24px !important; /* CAI 11052026 - was 28px */
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important; /* CAI 11052026 - was #ce0606 */
        border: 2px solid #ffffff !important; /* CAI 11052026 - was 1px */
        border-radius: 4px !important;
        color: #ce0606 !important; /* CAI 11052026 - was #ffffff */
        cursor: pointer !important;
        transition: background 0.15s ease, color 0.15s ease !important;
        overflow: hidden !important;
        text-indent: 0 !important; /* override jQuery UI's text-indent:-99999px so our × renders */
        background-image: none !important; /* hide the default sprite */
        z-index: 10 !important; /* CAI++ 11052026 - keep button above title-bar imagery */
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) !important; /* CAI++ 11052026 - subtle ring for extra separation from banner image */
        transform: none !important; /* CAI++ 11052026 - explicitly disable any inherited transform so the button uses fixed top/right */
    }

.ui-dialog .ui-dialog-titlebar-close::before /*DPP 20052026*/
{
    content: "\00d7"; /* × */
    display: block;
    width: 100%;
    height: 100%;
    line-height: 18px; /* CAI 11052026 - matches 32px height minus 2px border each side */
    text-align: center;
    font-size: 22px; /* CAI 11052026 - was 20px */
    font-weight: 800;
    color: #ce0606; /* CAI 11052026 - was #ffffff */
}

.ui-dialog .ui-dialog-titlebar-close:hover
{
    background: #ce0606 !important; /* CAI 11052026 - inverted: was #ffffff */
}

.ui-dialog .ui-dialog-titlebar-close:hover::before
{
    color: #ffffff; /* CAI 11052026 - inverted: was #ce0606 */
}

/* hide the default sprite icon span jQuery UI injects inside the close button */
.ui-dialog .ui-dialog-titlebar-close .ui-icon,
.ui-dialog .ui-dialog-titlebar-close .ui-button-icon-space
{
    display: none !important;
}

.ui-dialog .ui-dialog-content
{
    background: #ffffff !important;
    padding: 18px !important;
    overflow-y: auto !important;
    flex: 1 1 auto !important;
    min-height: 0 !important; /* required for flex child to scroll instead of overflow */
}

/* dim, slightly bluish backdrop for modal dialogs */
.ui-widget-overlay
{
    background: rgba(15, 18, 20, 0.55) !important;
    opacity: 1 !important;
}

.ui-datepicker
{
    background-color: #ffffff !important; /* CAI++ 20052026 - explicit white panel; was rendering transparent on pages where the dialog cascade stripped .ui-widget-content's background */
    border-radius: var(--cai-radius) !important;
    box-shadow: var(--cai-shadow-hover) !important;
    border: 1px solid var(--cai-border) !important;
    z-index: 99999999 !important; /* CAI++ 20052026 - sit above .ui-dialog (9999999) and .ui-widget-overlay (9999998) so the calendar is always on top when triggered from a field inside a jQuery UI dialog */
}

/* CAI++ 20052026 - datepicker title bar (month + year + prev/next arrows). Without this rule the header inherits whatever .ui-widget-header is set to, which is overridden to red elsewhere ONLY for dialog titlebars (.ui-dialog .ui-dialog-titlebar.ui-widget-header) - leaving the datepicker header unstyled. Forcing CAI red so it matches the other CAI report datepickers (e.g. txtFromDate_CLL). */
.ui-datepicker .ui-datepicker-header
{
    background-color: #cc0000 !important;
    background-image: none !important;
    color: #ffffff !important;
    border: 0 !important;
}

.ui-datepicker .ui-datepicker-title,
.ui-datepicker .ui-datepicker-title select
{
    color: #ffffff !important;
}

.ui-datepicker .ui-datepicker-prev .ui-icon,
.ui-datepicker .ui-datepicker-next .ui-icon
{
    filter: invert(1) brightness(2); /* CAI 20052026 - invert the default dark sprite icons so the prev/next arrows are visible on the red header band */
}

/* CAI++ 22042026, CAI 20052026 - day cells: red #cc0000 numbers on white cells, matching the canonical report-datepicker look (txtFromDate_CLL etc.). Strengthens earlier #e36c66-only rule by also forcing the cell background + a transparent border slot for hover/today/active states to fill. Day numbers were rendering washed out / cells transparent on pages where the dialog cascade strips .ui-widget-content. */
.ui-datepicker .ui-datepicker-calendar td a,
.ui-datepicker .ui-datepicker-calendar td span,
.ui-datepicker .ui-state-default,
.ui-datepicker .ui-state-active,
.ui-datepicker .ui-state-hover
{
    background: #ffffff !important;
    background-image: none !important;
    color: #cc0000 !important;
    border: 1px solid transparent !important;
    text-align: center;
    font-weight: 600;
}

/* CAI 20052026 - hover: soft slate fill + light border */
.ui-datepicker .ui-datepicker-calendar td a.ui-state-hover
{
    background: #f4f5f6 !important;
    border-color: #8c8c8c !important;
}

/* CAI 20052026 - today: amber pill highlight */
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-today a
{
    background: #fff4e0 !important;
    color: #cc0000 !important;
    border-color: #f0c270 !important;
}

/* CAI 20052026 - selected day: solid CAI red with white text */
.ui-datepicker .ui-datepicker-calendar td a.ui-state-active
{
    background: #cc0000 !important;
    background-image: none !important;
    color: #ffffff !important;
    border-color: #cc0000 !important;
}

/* CAI 20052026 - day-name header row (Su Mo Tu...): soft slate band with dark text */
.ui-datepicker .ui-datepicker-calendar thead th
{
    background: #f4f5f6 !important;
    color: #252b2e !important;
    border-bottom: 1px solid #8c8c8c;
    font-weight: 600;
}

.ui-autocomplete
{
    border-radius: var(--cai-radius-sm) !important;
    box-shadow: var(--cai-shadow-hover) !important;
    border: 1px solid var(--cai-border) !important;
    max-height: 300px;
    overflow-y: auto;
}

.ui-menu-item
{
    padding: 6px 12px !important;
    transition: var(--cai-transition);
}

.ui-menu-item:hover
{
    background-color: #252b2e !important; /* CAI 27042026 - dark hover for autocomplete/dropdown items, was pink #ffe5e4 */
    color: #ffffff !important; /* CAI 27042026 - white text on dark hover */
}

/* ===== Last Column Icons Inline ===== */
.cssTableList_1055 td:last-child
{
    white-space: nowrap !important;
}

.cssTableList_1055 td:last-child a,
.cssTableList_1055 td:last-child img,
.cssTableList_1055 td:last-child div
{
    display: inline-block; /*DJT 16042026*/
    vertical-align: middle; /*DJT 16042026*/
}

/* ===== Responsive - Tablet ===== */
@media screen and (max-width: 1024px)
{
    .cai-content-wrapper
    {
        padding: 0 10px 70px 10px !important;
    }

    div[style*="width: 90%"]
    {
        width: 100% !important;
    }
}

/* ===== Responsive - Mobile ===== */
@media screen and (max-width: 768px)
{
    /* CAI++ 31032026 - Header responsive */
    .cai-header-inner
    {
        padding: 0 6px !important;
        height: 48px !important;
        gap: 4px !important;
    }

    .cai-logo-area
    {
        flex-shrink: 1 !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .cai-logo-area img
    {
        height: 24px !important;
    }

    .cai-user-area
    {
        padding: 3px 6px !important;
        gap: 4px !important;
        font-size: 10px !important;
        flex-shrink: 0 !important;
        max-width: 50% !important;
    }

    .cai-user-area .cai-username
    {
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 9px !important;
    }

    .cai-signout-btn
    {
        padding: 2px 6px !important;
        font-size: 9px !important;
        gap: 2px !important;
        white-space: nowrap !important;
    }

    /* CAI++ 31032026 - Show hamburger on mobile */
    .cai-hamburger
    {
        display: flex !important;
    }

    /* CAI++ 31032026 - Nav becomes sidebar on mobile */
    .cai-nav
    {
        position: fixed !important;
        top: 0 !important;
        left: -280px !important;
        width: 280px !important;
        height: 100vh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        transition: left 0.3s ease !important;
        z-index: 500001 !important;
        box-shadow: none !important;
        padding-top: 50px !important;
    }

    .cai-nav.cai-nav-open
    {
        left: 0 !important;
        box-shadow: 4px 0 20px rgba(0,0,0,0.3) !important;
    }

    /* CAI++ 31032026 - Close button inside sidebar */
    .cai-sidebar-close
    {
        display: block !important;
        position: absolute;
        top: 10px;
        right: 12px;
        font-size: 28px;
        color: #ffffff;
        text-decoration: none;
        z-index: 500002;
        line-height: 1;
    }

    .cai-sidebar-close:hover
    {
        color: rgba(255,255,255,0.7);
    }

    /* CAI++ 31032026 - Menu items stack vertically in sidebar */
    .cai-nav ul.oe_menu
    {
        display: flex !important;
        flex-direction: column !important;
        white-space: normal !important;
        width: 100% !important;
    }

    .cai-nav ul.oe_menu > li
    {
        width: 100% !important;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .cai-nav ul.oe_menu > li > a
    {
        padding: 12px 16px !important;
        font-size: 13px !important;
        border-radius: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    .cai-nav ul.oe_menu > li > a img
    {
        height: 20px !important;
        width: auto !important;
        margin-right: 8px !important;
    }

    /* CAI++ 31032026 - Dropdown submenus in sidebar */
    .cai-nav ul.oe_menu div
    {
        position: relative !important;
        width: 100% !important;
        border-radius: 0 !important;
        padding: 8px !important;
        border: none !important;
        border-bottom: none !important;
    }

    .cai-nav ul.oe_menu div ul
    {
        width: 100% !important;
        float: none !important;
    }

    .cai-nav ul.oe_menu div ul li a
    {
        color: #333 !important;
        padding: 8px 12px !important;
        font-size: 12px !important;
    }

    /* CAI++ 06042026 - Fix long menu item text clipping in sidebar */
    .cai-nav ul.oe_menu div ul li
    {
        white-space: normal !important;
        word-wrap: break-word !important;
    }

    .cai-nav ul.oe_menu div ul li a
    {
        white-space: normal !important;
        word-wrap: break-word !important;
    }

    /* CAI++ 06042026 - Add text labels next to icon-only menu items in sidebar */
    #liHelpAndSupport > a::after
    {
        content: "Help & Support" !important;
        color: #ffffff !important;
        font-size: 12px !important;
        font-weight: bold !important;
        margin-left: 8px !important;
    }

    #liContactUs > a::after
    {
        content: "Contact Us" !important;
        color: #ffffff !important;
        font-size: 12px !important;
        font-weight: bold !important;
        margin-left: 8px !important;
    }

    #liSignout > a::after
    {
        content: "Sign Out" !important;
        color: #ffffff !important;
        font-size: 12px !important;
        font-weight: bold !important;
        margin-left: 8px !important;
    }

    /* AMM++ 05052026, show "Home" label next to the home icon in the mobile sidebar (icon-only by default) */
    #liHome > a::after
    {
        content: "Home" !important;
        color: #ffffff !important;
        font-size: 12px !important;
        font-weight: bold !important;
        margin-left: 8px !important;
    }

    /* AMM++ 05052026, reorder so the menu search box sits at the top of the mobile sidebar (parent is flex-direction:column from line 989) */
    .cai-nav ul.oe_menu > li#liSearch
    {
        order: -1 !important;
    }

    /* Spacer */
    .cai-content-wrapper
    {
        padding: 0 5px 60px 5px !important;
        margin-top: 8px !important;
    }

    /* CAI++ 06042026 - jQuery UI Dialog responsive on mobile */
    /* CAI 27042026 - clip-fix: dialog was being hidden behind the fixed .cai-header (z-index 999999, ~80px tall on mobile). Switching to position:fixed + top below header + capped max-height keeps the titlebar visible and the dialog inside the viewport. */
    .ui-dialog
    {
        width: 95vw !important;
        max-width: 95vw !important;
        left: 2.5vw !important;
        top: 90px !important; /* below 60px desktop / ~80-90px mobile header */
        margin: 0 !important;
        position: fixed !important; /* lock to viewport so jQuery UI's inline absolute positioning can't drift it under the fixed header */
        max-height: calc(100vh - 110px) !important; /* leave room for header at top + ~20px breathing space at bottom */
    }

    .ui-dialog .ui-dialog-content
    {
        width: 100% !important;
        overflow-x: auto !important;
    }

    /* CAI 02042026 - Form labels stack or shrink */
    .cssTDSearchLeft
    {
        width: 90px !important;
        font-size: 11px !important;
        padding: 6px 8px 6px 4px !important;
    }

    .cssTDSearchRight
    {
        font-size: 12px !important;
        padding: 6px 4px 6px 8px !important;
    }

    /* Form labels - unchanged */

    /* Inputs */
    input[type="text"],
    select
    {
        max-width: 100% !important;
        font-size: 12px !important;
        min-height: 28px !important;
    }

    /* Buttons */
    input[type="button"]:not([id*="divPagingIndex"] *):not([id*="divPagingIndexGroup"] *),
    .cssButton
    {
        padding: 6px 12px !important;
        font-size: 11px !important;
    }

    /* Tables */
    .cssTableList_1055
    {
        font-size: 10px !important;
    }

    .cssTableList_1055 th
    {
        font-size: 10px !important;
        padding: 6px 8px !important;
        letter-spacing: 0; /* CAI 27052026 - WCAG 1.4.12: demoted from !important so user text-spacing (0.12em letter-spacing) is no longer reset to 0 */
    }

    .cssTableList_1055 td
    {
        font-size: 10px !important;
        padding: 4px 6px !important;
    }

    /* Section header */
    .cssMainDiv_1055
    {
        height: 36px !important;
    }

    .cssMainDivHeading_1055
    {
        font-size: 13px !important;
        margin-left: 12px !important;
    }

    /* Search panel */
    .cssDivSearchOptionInner_1055
    {
        padding: 8px 10px !important;
    }

    /* CAI++ 28042026 - on mobile, the form labels collapse to auto-width, so the action-row spacer (which mirrors the desktop label column) must hide so buttons start at the row's left edge */
    .cai-form-actions-spacer
    {
        display: none !important;
    }

    /* Tabs */
    .ui-tabs .ui-tabs-nav li a
    {
        padding: 8px 14px !important;
        font-size: 12px !important;
    }

    /* Paging - uses old input button style, no CAI overrides needed */ /* CAI 16042026 */

    /* Footer */
    .cai-footer
    {
        font-size: 10px !important;
        padding: 6px 0 !important;
    }

    .cai-footer a
    {
        margin: 0 4px !important;
        font-size: 10px !important;
    }

    /* CAI 11052026 - Dialog sizing on mobile: floor at 65vh so short messages still feel substantial (was height:auto which made the SEBI alert collapse to a few lines), cap at 85vh so tall dialogs scroll inside the viewport. Width fills the viewport minus a small inset so banner-style title images stay legible. */
    .ui-dialog
    {
        height: auto !important;
        min-height: 65vh !important; /* CAI++ 11052026 - mobile floor so dialogs read as full panels, not tiny chips */
        max-height: 85vh !important;
        width: calc(100vw - 24px) !important; /* CAI 11052026 - was width:auto which collapsed banner titles; now fixed mobile width so the title image always has room to render */
        max-width: calc(100vw - 24px) !important;
        left: 12px !important; /* CAI++ 11052026 - keep dialog centered with the new fixed width (overrides jQuery UI's pixel-based left positioning that assumes JS-passed width) */
        right: 12px !important;
    }

    /* CAI++ 11052026 - Dialog body horizontal padding cut from 18px -> 8px on mobile so wide flex rows (like the 6-cell OTP digit row) have enough content-area width to stay on one line instead of wrapping their last cell to a new row. Top/bottom padding stays at 18px so vertical breathing room is unchanged. */
    .ui-dialog .ui-dialog-content
    {
        padding: 18px 8px !important;
    }

    /* CAI++ 11052026 - Dialog close button: larger touch target on mobile (WCAG 2.5.5 AAA = 44x44) anchored to the top of the titlebar with a fixed offset (no top:50% so transform-zoom can't push it into the content area) and stronger contrast ring so it is unmistakable against banner-image titles */
        .ui-dialog .ui-dialog-titlebar,
        .ui-dialog .ui-dialog-titlebar.ui-widget-header {
            background: #ce0606 !important; /* CAI++ 11052026 - re-assert inside media query so a more specific cached redmond rule can't beat it on mobile */
            background-color: #ce0606 !important;
            background-image: none !important;
            color: #ffffff !important;
            padding: 4px 12px !important; /* CAI 11052026 - reserve 60px right for the larger 44px close button so the title image/text can't overlap it */
            min-height: 32px !important; /* CAI 11052026 - guarantees the 44px close button + 8px top inset fits inside the red band */
            display: block !important;
        }

        .ui-dialog .ui-dialog-title {
            color: #ffffff !important;
            font-size: 13px !important;
            font-weight: 600 !important;
            height: 24px !important;
            line-height: 24px !important; /*DPP 20052026*/
            margin: 0 !important;
            padding: 0 !important;
            float: left !important;
            width: calc(100% - 60px) !important; /* CAI 11052026 - matches padding so banner images stop before the close button */
        }

        /*DPP 22052026*/
        .ui-dialog .ui-dialog-titlebar-close {
            top: 4px !important;
            right: 6px !important;
            width: 20px !important;
            height: 20px !important;
            min-width: 20px !important;
            min-height: 20px !important;
            border-radius: 4px !important;
            border-width: 1px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 0 0 0 10px !important;
        }
        /*DPP 22052026*/
        .ui-dialog .ui-dialog-titlebar-close::before {
            font-size: 16px !important;
            line-height: 18px !important;
        }
}