:root {
    /*-------------------------------------*/
    /*-----------*Primary styles*----------*/
    /*-------------------------------------*/
    --primaryColor: #005288;
    --secondaryColor: #FFCC33;
    --tertiaryColor: #FFFFFF;
    --containerBGColor: #FFFFFF;
    --containerBGColorAlt: #FFFFFF;
    --containerBGColorTertiary: #EBEBEB;
    --appBodyBGColor: #EBEBEB;
    --appHeaderBGColor: #FFFFFF;
    --signonCredentialsBoxBGColor: #FFFFFF;
    --appContentWidth: 1200px;
    /*-------------------------------------*/
    /*-----------*Text Styles*-------------*/
    /*-------------------------------------*/
    --textColorMain: #333333;
    --textColorAlt: #FFFFFF;
    --textColorTertiary: #333333;
    --linkColor: #333333;
    --linkHoverColor: #000000;
    /*-------------------------------------*/
    /*----------*Wip page styles*----------*/
    /*-------------------------------------*/
    --wipFiltersBGColor: #FFFFFF;
    --WipFiltersBGAltColor: #C7C8CA;
    --wipFormTableHeaderBGColor: #C7C8CA;
    --wipFormTableBodyBGColor: #FFFFFF;
    --wipFormTableItemsBGColor: #C7C8CA;
    --wipTableOddColor: #FFFFFF;
    --wipTableEvenColor: #F5F5F5;
    /*-------------------------------------*/
    /*----------*LC Page Styles*-----------*/
    /*-------------------------------------*/
    --lcNavBarBGColor: #555555;
    --lcNavBarTextColor: #FFFFFF;
    --lcSectionHeaderBGColor: #C7C8CA;
    /*-------------------------------------*/
    /*-----------*Button Styles*-----------*/
    /*-------------------------------------*/
    --buttonsBGColor: #d4d4d4;
    --buttonsBGColorHover: #bbbbbb;
    --buttonsTextColor: #000000;
    --buttonDisabledColor: #d4d4d4b5;
    /*-------------------------------------*/
    /*--------*Admin Table Styles*---------*/
    /*-------------------------------------*/
    --tableHeaderBGColor: #555555;
    --tableHeaderTextColor: #FFFFFF;
    --tableSubItemsBGColor: #888888;
    /*-------------------------------------*/
    /*-------*AppPage Navbar Styles*-------*/
    /*-------------------------------------*/
    --navMenuHeaderBGColor: #C7C8CA;
    --navMenuHeaderTextColor: #333333;
    --navMenuSubHeaderBGColor: #C7C8CA;
    --navMenuSubHeaderTextColor: #333333;
    --navMenuSubItemBGColor: #333333;
    --navMenuTextColor: #333333;
    --navMenuHoverColor: #888888;
    --navMenuItemBGHoverColor: #e8e8e8;
    /*-------------------------------------*/
    /*-----------*AppPage Styles*----------*/
    /*-------------------------------------*/
    --appPageHeaderBGColor: #FFFFFF;
    --appPageHeaderBGColorAlt: #005288;
    --appPageHeaderTextColorPrimary: #333333;
    --appPageHeaderTextColorSecondary: #FFFFFF;
    --appPageHeaderTextColorTertiary: #005288;
    /*-------------------------------------*/
    /*---------*Calendar Styles*-----------*/
    /*-------------------------------------*/
    --calHeaderBGColor: #555555;
    --calBodyBGColor: #FFFFFF;
    --calTodayBG: #fff0aa;
    /*-------------------------------------*/
    /*-----------*Header Styles*-----------*/
    /*-------------------------------------*/
    --bankLogo: url('../Images/LE/CMZ/IccLogo_CMZ.jpg');
    --headerFillerImage: none;
    --bankLogoHeight: 50px;
    --bankLogoWidth: 150px;
    --bankLogoMarginLeft: 15px;
    --signonFormMarginLeft: 150px;
    --headerBGColorPrimary: #FFFFFF;
    --headerBGColorSecondary: #FFFFFF;
    --headerBGColorTertiary: #FFFFFF;
    --signonHeaderBGColor: #FFFFFF;
    --HeaderBGColor: #FFFFFF;
    /*-------------------------------------*/
    /*------------*Footer Styles*----------*/
    /*-------------------------------------*/
    --footerBGColor: #FFFFFF;
}

/* Sign-on page: logo floats right, sized naturally */
body:has(#SignonContainer) .header-logo {
    flex: 0 0 auto;
    height: 40px;
    width: auto;
    max-height: none;
    margin-left: 0;
    margin-right: 15px;
}

/* --- Yellow header filler band (replaces CMZYellowBar from legacy site) --- */
.header-filler-image {
    background-image: none !important;
    background-color: #FFCC33;
}

/* --- Sign-on page: product name LEFT, logo RIGHT, yellow stripe below --- */
body:has(#SignonContainer) .bank-header-logo.header-bg {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    height: auto;
}
body:has(#SignonContainer) .header-container {
    height: auto;
}
body:has(#SignonContainer) .header-title-text {
    flex: 1 1 auto;
    padding-left: 15px;
    font-size: 28px;
    font-weight: bold;
    color: #000000;
    line-height: 70px;
}
body:has(#SignonContainer) .header-filler-image {
    flex: 0 0 100%;
    height: 40px;
}
/* Product name is now in the header bar — hide the h1 above the form */
body:has(#SignonContainer) #SignonContainer h1 {
    display: none;
}

/* --- Sign-on section headings: black, not CMZ blue --- */
body:has(#SignonContainer) td.SignonMessageHeading,
body:has(#SignonContainer) .SignonMessageHeading {
    color: #000000 !important;
}

/* --- All Buttontext buttons: light grey with dark border --- */
/* Save/Quit buttons use btn-success/btn-danger and are unaffected */
.Buttontext {
    background-color: #eeeeee !important;
    color: #000000 !important;
    border: 1px solid #000000 !important;
}
.Buttontext:hover {
    background-color: #d4d4d4 !important;
    color: #000000 !important;
}

/* ============================================================ */
/* CMZ Master-page header: heading LEFT | logo RIGHT | yellow   */
/* Applies to all master pages via #BaseHeader.                 */
/* Sign-on is excluded — it renders page_header.ascx directly  */
/* in <body> with no #BaseHeader wrapper.                       */
/* ============================================================ */

/* #BaseHeader grid:
   col 1 (1fr) : heading text (IccAppPages only) or empty white
   col 2 (auto): logo (page_header.ascx .header-container)
   row 1 (56px): white area
   row 2 (32px): yellow stripe via ::after
   user-info / header-actions are position:absolute, repositioned
   below the yellow stripe via top offsets.                     */
#BaseHeader {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: 56px 32px;
    position: relative;
    overflow: visible;
    padding-bottom: 30px; /* reserve height for user-info row */
    background-color: #FFFFFF;
    border-bottom: 1px solid #000000;
    margin-bottom: 6px;
}

/* Yellow stripe: spans both columns as the second grid row */
#BaseHeader::after {
    content: '';
    grid-column: 1 / -1;
    grid-row: 2;
    background-color: #FFCC33;
}

/* Heading (IccAppPages.Master only — ignored on masters that
   don't put .app-header inside #BaseHeader)                   */
#BaseHeader .app-header {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    padding-left: 15px;
}
#BaseHeader .app-header h3 {
    margin: 0;
}

/* Logo container: right column, row 1 */
#BaseHeader .header-container {
    grid-column: 2;
    grid-row: 1;
    height: 56px;
    display: flex;
    align-items: center;
    padding-right: 15px;
    margin-bottom: 0;
}

/* Logo image: natural aspect ratio, fixed height */
#BaseHeader .header-logo {
    height: 32px;
    width: auto;
    max-height: none;
    margin-left: 0;
}

/* Logo wrapper: row direction (sign-on uses column) */
#BaseHeader .bank-header-logo.header-bg {
    flex-direction: row !important;
    height: auto;
    align-items: center;
}

/* Hide filler image: yellow handled by #BaseHeader::after */
#BaseHeader .header-filler-image {
    display: none !important;
}

/* Notification banner: span full width below yellow */
#BaseHeader #banner {
    grid-column: 1 / -1;
    grid-row: 3;
}

/* User info: sits below the yellow stripe, left-aligned */
#BaseHeader .user-info {
    position: absolute;
    top: 91px;
    height: 30px;
    left: 15px;
    right: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    color: #333333;
}

/* Each label flows inline, overriding the base display: table-row */
#BaseHeader .user-data-label {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    font-size: 13px;
    font-weight: bold;
    gap: 4px; /* space between ::before label text and value span */
}

/* Values (spans inside labels) are normal weight */
#BaseHeader .user-data-label span {
    font-weight: normal;
}

/* Pipe separator via ::after (frees ::before for label-name injection) */
#BaseHeader .user-data-label::after {
    content: ' | ';
    margin: 0 8px;
    font-weight: normal;
}
#BaseHeader .user-data-label:last-child::after {
    content: '';
    margin: 0;
}

/* Label prefixes injected via ::before on the three unlabelled items */
#BaseHeader .user-info .user-data-label:nth-child(1)::before { content: 'User:'; }
#BaseHeader .user-info .user-data-label:nth-child(2)::before { content: 'Company:'; }
#BaseHeader .user-info .user-data-label:nth-child(3)::before { content: 'Server Date:'; }
/* Label 4 (Last Signon) already carries its label text in the HTML markup */

/* Print | Sign Off | Help: below yellow stripe, right side */
#BaseHeader .header-actions {
    position: absolute;
    top: 91px;
    right: 15px;
    left: auto;
}

/* ============================================================ */
/* CMZ inner pages: product name LEFT, logo RIGHT               */
/* Triggered when page_header.HeaderTitle is set (CMZ only).   */
/* ============================================================ */

/* Stretch header-container to span both grid columns */
#BaseHeader:has(.header-title-text) .header-container {
    grid-column: 1 / -1;
}
/* Make bank-header-logo fill the full container width */
#BaseHeader:has(.header-title-text) .bank-header-logo.header-bg {
    flex: 1 1 auto;
}
/* Title text: large bold, left side of flex row */
#BaseHeader .header-title-text {
    flex: 1 1 auto;
    padding-left: 15px;
    font-size: 28px;
    font-weight: bold;
    color: #000000;
    line-height: 56px;
}
/* Hide IccAppPages page-title heading when product name fills the header */
#BaseHeader:has(.header-title-text) .app-header {
    display: none;
}

/* --- Documents list: header row matches LC section header grey --- */
.InqTableHead {
    background-color: var(--lcSectionHeaderBGColor) !important;
}

/* --- LC nav bar: Jump to Section button — light grey, no white border --- */
#LCNavBar .nav-link,
#navbarNavDropdown .nav-link {
    background-color: #d4d4d4;
    color: #333333;
    border: 1px solid #aaaaaa;
}
#LCNavBar .nav-link:hover,
#navbarNavDropdown .nav-link:hover {
    background-color: #bbbbbb;
    color: #000000;
    border-color: #888888;
}

/* --- Active leaf nav item: Commerzbank yellow highlight + black text --- */
A.MainMenuBotOpen {
    background-color: #FFCC33 !important;
    color: #000000 !important;
}

.MainMenuMidOpen .MainMenuBotOpen {
    background-color: #FFCC33 !important;
}

/* --- Section header links: now on light grey bg, need dark text --- */
a.MainMenuTopOpen, a.MainMenuTopClosed {
    color: #333333 !important;
}

/* --- Applications header: light grey bg with dark bold text --- */
.AppMenuTableHeader {
    color: #333333 !important;
    font-weight: bold !important;
}

/* --- Hide Selection Filters tab: light grey bg needs dark text (already bold in base) --- */
.FilterNavBar {
    color: #333333 !important;
}

/* --- WIP table/filter column headers: light grey bg needs dark bold text --- */
TH.WipTableHeader,
TD.WipTableHeader {
    color: #333333 !important;
    font-weight: bold !important;
}
A.WipTableHeader {
    color: #333333 !important;
}

/* --- Inactive leaf items: white bg (overrides base #f6f6f6) --- */
.MainMenuMidOpen .MainMenuBotClosed {
    background-color: #FFFFFF !important;
}

/* --- Save button: CMZ blue, darkens on hover --- */
.btn-success {
    background-color: var(--buttonsBGColor) !important;
    border-color: var(--buttonsBGColor) !important;
    color: var(--buttonsTextColor) !important;
}
.btn-success:hover {
    background-color: var(--buttonsBGColorHover) !important;
    border-color: var(--buttonsBGColorHover) !important;
    color: var(--buttonsTextColor) !important;
}

/* --- Quit button: white with dark border/text, fills on hover --- */
.btn-danger {
    background-color: #FFFFFF !important;
    border-color: #aaaaaa !important;
    color: #333333 !important;
}
.btn-danger:hover {
    background-color: var(--buttonsBGColorHover) !important;
    border-color: #888888 !important;
    color: var(--textColorAlt) !important;
}

/* --- Calendar: override ASP.NET inline blue on header cells --- */
table[title="Calendar"] td[colspan="7"] table,
table[title="Calendar"] td[colspan="7"] table td {
    background-color: var(--calHeaderBGColor) !important;
}
table[title="Calendar"] th {
    background-color: var(--calHeaderBGColor) !important;
}
table[title="Calendar"] {
    color: var(--textColorMain) !important;
    border-color: var(--calHeaderBGColor) !important;
}