@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/*
 * Suncoast Tampa Association of REALTORS®
 * RAMCO Portal — Central Theme Stylesheet
 *
 * Replace the repository's existing styles.css with this file.
 * Page-specific modules below only activate when their matching RAMCO IDs exist.
 */

/* =========================================================
   1. SHARED STAR DESIGN TOKENS
   ========================================================= */

:root {
    --star-coral: #f56d73;
    --star-coral-dark: #dc5961;
    --star-coral-light: #fff1f2;

    --star-navy: #21465f;
    --star-navy-dark: #173548;
    --star-navy-light: #4faec3;

    --star-text: #25333d;
    --star-text-muted: #64727c;

    --star-border: #e4e9ec;
    --star-surface: #ffffff;
    --star-surface-soft: #f7f9fa;

    --star-card-shadow:
        0 12px 30px rgba(23, 53, 72, 0.09),
        0 3px 8px rgba(23, 53, 72, 0.06);

    --star-dialog-shadow:
        0 24px 70px rgba(23, 53, 72, 0.24),
        0 8px 24px rgba(23, 53, 72, 0.12);
}


/* =========================================================
   2. GLOBAL PORTAL THEME
   ========================================================= */

body {
    background-image: url('https://cdn.jsdelivr.net/gh/michaelgappatampa/SuncoastTampaRAMCOPortalGenericCustomURLs@main/star-portal-background-optimized.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;

    color: #666666;
    font-family: 'Poppins', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
}

header#header {
    padding-bottom: 0 !important;
    background: var(--star-surface) !important;
}

.social-icons {
    color: #111111 !important;
}

.large-notice {
    font-size: 18px;
}

.large-setupnotice p {
    color: #ffffff !important;
    font-family: 'Poppins', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
    font-size: 18pt;
    font-weight: 400;
    line-height: 1.65;
}

/* Preserve legacy table-cell typography where RAMCO requires it. */
td.my-cell span,
td.my-cell font {
    all: revert;
    color: inherit;
    font: inherit;
}

#login {
    background: #f6f6f6;
}

#sponsorBlock {
    background: var(--star-coral);
    color: #ffffff;
    font-weight: 700;
}

#top-line {
    background: var(--star-coral) !important;
}

#FormContentPlaceHolder_LoginEditForm_LoginButtonStrip_LoginButton,
#FormContentPlaceHolder_A1,
.button.color {
    border-color: var(--star-navy) !important;
    background: var(--star-navy) !important;
    color: #ffffff !important;
}

#FormContentPlaceHolder_LoginEditForm_LoginButtonStrip_LoginButton:hover,
#FormContentPlaceHolder_LoginEditForm_LoginButtonStrip_LoginButton:focus,
#FormContentPlaceHolder_A1:hover,
#FormContentPlaceHolder_A1:focus,
.button.color:hover,
.button.color:focus {
    border-color: var(--star-navy-dark) !important;
    background: var(--star-navy-dark) !important;
    color: #ffffff !important;
}

.button.gray,
.highlight.gray {
    background: var(--star-navy-light) !important;
    color: #ffffff !important;
}

#footer-bottom {
    background: var(--star-navy) !important;
    color: #ffffff !important;
}

#footer-bottom .copyright,
#footer-bottom .copyright *,
#sub-menu ul li,
#sub-menu ul li a {
    color: #ffffff !important;
}


/* =========================================================
   PRIMARY PORTAL NAVIGATION
   ========================================================= */

nav#navigation {
    position: relative !important;
    z-index: 100 !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin-top: 15px !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 12px !important;

    background:
        linear-gradient(
            135deg,
            var(--star-navy, #21465f),
            var(--star-navy-dark, #173548)
        ) !important;

    box-shadow:
        0 9px 22px rgba(23, 53, 72, 0.18) !important;

    overflow: visible !important;
    box-sizing: border-box !important;
}

/* Remove the old Nevia corner decorations. */
nav#navigation > .left-corner,
nav#navigation > .right-corner {
    display: none !important;
}

/* Remove the previous CSS-generated mobile heading. */
nav#navigation::before {
    display: none !important;
    content: none !important;
}


/* =========================================================
   TOP-LEVEL MENU
   ========================================================= */

nav#navigation ul#TabMenu {
    position: relative !important;

    display: flex !important;
    align-items: stretch !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;

    background: transparent !important;

    overflow: visible !important;
    box-sizing: border-box !important;
}

nav#navigation ul#TabMenu > li {
    position: relative !important;

    flex: 1 1 auto !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    list-style: none !important;

    background: transparent !important;
}


/* =========================================================
   TOP-LEVEL LINKS
   ========================================================= */

nav#navigation ul#TabMenu > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 50px !important;

    margin: 0 !important;
    padding: 10px 12px !important;

    border: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.13) !important;
    border-radius: 0 !important;

    background: transparent !important;
    color: #ffffff !important;

    font-family:
        "Poppins",
        "Open Sans",
        Verdana,
        Arial,
        sans-serif !important;

    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-align: center !important;
    text-decoration: none !important;
    text-shadow: none !important;
    white-space: nowrap !important;

    box-shadow: none !important;

    box-sizing: border-box !important;

    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease !important;
}

nav#navigation ul#TabMenu > li:first-child > a {
    border-radius: 12px 0 0 12px !important;
}

nav#navigation ul#TabMenu > li:last-child > a {
    border-right: 0 !important;
    border-radius: 0 12px 12px 0 !important;
}

nav#navigation ul#TabMenu > li > a i {
    flex: 0 0 auto !important;
}


/* =========================================================
   ACTIVE, HOVER AND KEYBOARD STATES
   ========================================================= */

nav#navigation ul#TabMenu > li.active > a {
    background:
        linear-gradient(
            135deg,
            var(--star-coral, #f56d73),
            #f77f84
        ) !important;

    color: #ffffff !important;

    box-shadow:
        inset 0 -3px 0 rgba(220, 89, 97, 0.55) !important;
}

nav#navigation ul#TabMenu > li:not(.active):hover > a,
nav#navigation ul#TabMenu > li:not(.active):focus-within > a {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #ffffff !important;
}

nav#navigation ul#TabMenu > li > a:focus-visible {
    position: relative !important;
    z-index: 2 !important;

    outline: 3px solid rgba(79, 174, 195, 0.40) !important;
    outline-offset: -3px !important;
}


/* =========================================================
   DESKTOP DROPDOWNS
   ========================================================= */

/*
 * Keep every submenu collapsed by default.
 * Visibility is used instead of display so transitions work.
 */
nav#navigation ul#TabMenu > li > ul {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    z-index: 1000 !important;

    display: block !important;

    width: max-content !important;
    min-width: 220px !important;
    max-width: 310px !important;

    margin: 0 !important;
    padding: 8px !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-radius: 11px !important;

    background: #ffffff !important;

    box-shadow:
        0 14px 34px rgba(23, 53, 72, 0.18) !important;

    list-style: none !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transform: translateY(-7px) !important;

    box-sizing: border-box !important;

    transition:
        opacity 0.15s ease,
        visibility 0.15s ease,
        transform 0.15s ease !important;
}

/* Prevent menus near the right edge from extending offscreen. */
nav#navigation ul#TabMenu > li:nth-last-child(-n + 2) > ul {
    right: 0 !important;
    left: auto !important;
}

/* Open only the submenu belonging to the hovered/focused item. */
nav#navigation ul#TabMenu > li:hover > ul,
nav#navigation ul#TabMenu > li:focus-within > ul {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    transform: translateY(0) !important;
}

nav#navigation ul#TabMenu > li > ul > li {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    list-style: none !important;
}

nav#navigation ul#TabMenu > li > ul > li > a {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 11px 12px !important;

    border: 0 !important;
    border-radius: 7px !important;

    background: transparent !important;
    color: var(--star-navy, #21465f) !important;

    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-align: left !important;
    text-decoration: none !important;
    white-space: normal !important;

    box-sizing: border-box !important;
}

nav#navigation ul#TabMenu > li > ul > li > a:hover,
nav#navigation ul#TabMenu > li > ul > li > a:focus {
    background: var(--star-coral-light, #fff1f2) !important;
    color: var(--star-navy-dark, #173548) !important;

    outline: none !important;
}


/* =========================================================
   HIDE LEGACY SELECTNAV OUTPUT
   ========================================================= */

/*
 * The CSS menu below is the responsive fallback.
 * Hide any duplicate selectnav field generated by the theme.
 */
nav#navigation .selectnav,
nav#navigation select[id^="selectnav"] {
    display: none !important;
}


/* =========================================================
   MOBILE PORTAL NAVIGATION — COLLAPSIBLE
   767PX AND BELOW
   ========================================================= */

@media screen and (max-width: 767px),
screen and (max-device-width: 767px) {

    nav#navigation {
        position: relative !important;
        z-index: 100 !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin-top: 10px !important;
        padding: 0 !important;

        border: 0 !important;
        border-radius: 10px !important;

        background:
            linear-gradient(
                135deg,
                var(--star-navy, #21465f),
                var(--star-navy-dark, #173548)
            ) !important;

        box-shadow:
            0 8px 22px rgba(23, 53, 72, 0.18) !important;

        overflow: visible !important;
        box-sizing: border-box !important;
    }

    nav#navigation > .left-corner,
    nav#navigation > .right-corner {
        display: none !important;
    }

    /* Remove any older generated Menu heading. */
    nav#navigation::before {
        display: none !important;
        content: none !important;
    }


    /* =====================================================
       MOBILE MENU BUTTON
       ===================================================== */

    nav#navigation .portal-menu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;

        width: 100% !important;
        min-height: 50px !important;

        margin: 0 !important;
        padding: 13px 15px !important;

        border: 0 !important;
        border-radius: 10px !important;

        background: transparent !important;
        color: #ffffff !important;

        font-family:
            "Poppins",
            "Open Sans",
            Verdana,
            Arial,
            sans-serif !important;

        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        text-align: left !important;

        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    nav#navigation .portal-menu-toggle::before {
        content: "☰" !important;

        font-size: 18px !important;
        font-weight: 400 !important;
        line-height: 1 !important;
    }

    nav#navigation .portal-menu-toggle::after {
        content: "▾" !important;

        margin-left: auto !important;

        font-size: 14px !important;
        line-height: 1 !important;

        transition: transform 0.18s ease !important;
    }

    nav#navigation.mobile-menu-open
    .portal-menu-toggle {
        border-radius: 10px 10px 0 0 !important;

        background: rgba(0, 0, 0, 0.10) !important;
    }

    nav#navigation.mobile-menu-open
    .portal-menu-toggle::after {
        transform: rotate(180deg) !important;
    }

    nav#navigation .portal-menu-toggle:focus-visible {
        outline: 3px solid rgba(79, 174, 195, 0.38) !important;
        outline-offset: -3px !important;
    }


    /* =====================================================
       COLLAPSED TOP-LEVEL MENU
       ===================================================== */

    nav#navigation ul#TabMenu {
        position: static !important;

        display: none !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 8px !important;

        border: 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
        border-radius: 0 0 10px 10px !important;

        background: var(--star-navy-dark, #173548) !important;

        list-style: none !important;

        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    nav#navigation.mobile-menu-open
    ul#TabMenu {
        display: block !important;
    }


    /* =====================================================
       TOP-LEVEL ITEMS
       ===================================================== */

    nav#navigation ul#TabMenu > li {
        position: relative !important;

        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 0 0 5px !important;
        padding: 0 !important;

        border: 0 !important;

        background: transparent !important;

        list-style: none !important;
        box-sizing: border-box !important;
    }

    nav#navigation ul#TabMenu > li:last-child {
        margin-bottom: 0 !important;
    }

    nav#navigation ul#TabMenu > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 9px !important;

        width: 100% !important;
        min-width: 0 !important;
        min-height: 46px !important;

        margin: 0 !important;
        padding: 11px 42px 11px 13px !important;

        border: 1px solid rgba(255, 255, 255, 0.10) !important;
        border-radius: 8px !important;

        background: rgba(255, 255, 255, 0.04) !important;
        color: #ffffff !important;

        font-size: 11.5px !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
        text-align: left !important;
        text-decoration: none !important;
        white-space: normal !important;

        box-shadow: none !important;

        box-sizing: border-box !important;
    }

    nav#navigation ul#TabMenu > li > a > i {
        flex: 0 0 auto !important;

        margin: 0 !important;
    }

    nav#navigation ul#TabMenu > li.active > a {
        border-color: var(--star-coral, #f56d73) !important;

        background:
            linear-gradient(
                135deg,
                var(--star-coral, #f56d73),
                #f77f84
            ) !important;

        color: #ffffff !important;
    }

    nav#navigation ul#TabMenu > li > a:hover,
    nav#navigation ul#TabMenu > li > a:focus {
        background: rgba(255, 255, 255, 0.11) !important;
        color: #ffffff !important;

        outline: none !important;
    }


    /* =====================================================
       SUBMENU ARROW
       ===================================================== */

    nav#navigation ul#TabMenu
    > li.has-portal-submenu
    > a::after {
        position: absolute !important;
        top: 50% !important;
        right: 15px !important;

        content: "▾" !important;

        color: rgba(255, 255, 255, 0.86) !important;

        font-size: 13px !important;
        line-height: 1 !important;

        transform: translateY(-50%) !important;

        transition: transform 0.18s ease !important;
    }

    nav#navigation ul#TabMenu
    > li.has-portal-submenu.submenu-open
    > a::after {
        transform:
            translateY(-50%)
            rotate(180deg) !important;
    }


    /* =====================================================
       COLLAPSIBLE SUBMENUS
       ===================================================== */

    nav#navigation ul#TabMenu > li > ul {
        position: static !important;

        display: none !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 5px 0 2px !important;
        padding: 6px !important;

        border: 1px solid rgba(255, 255, 255, 0.10) !important;
        border-radius: 8px !important;

        background: #ffffff !important;

        box-shadow: none !important;

        list-style: none !important;

        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        transform: none !important;

        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /*
     * Open only when JavaScript applies .submenu-open.
     * Hover and focus no longer control mobile submenus.
     */
    nav#navigation ul#TabMenu
    > li.submenu-open
    > ul {
        display: block !important;
    }

    nav#navigation ul#TabMenu
    > li:hover
    > ul,
    nav#navigation ul#TabMenu
    > li:focus-within
    > ul {
        display: none !important;
    }

    nav#navigation ul#TabMenu
    > li.submenu-open:hover
    > ul,
    nav#navigation ul#TabMenu
    > li.submenu-open:focus-within
    > ul {
        display: block !important;
    }

    nav#navigation ul#TabMenu > li > ul > li {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;

        list-style: none !important;
    }

    nav#navigation ul#TabMenu
    > li
    > ul
    > li
    > a {
        display: block !important;

        width: 100% !important;
        min-height: 40px !important;

        margin: 0 !important;
        padding: 10px 11px !important;

        border: 0 !important;
        border-radius: 6px !important;

        background: transparent !important;
        color: var(--star-navy, #21465f) !important;

        font-size: 11px !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;
        text-align: left !important;
        text-decoration: none !important;
    }

    nav#navigation ul#TabMenu
    > li
    > ul
    > li
    > a:hover,
    nav#navigation ul#TabMenu
    > li
    > ul
    > li
    > a:focus {
        background: var(--star-coral-light, #fff1f2) !important;
        color: var(--star-navy-dark, #173548) !important;

        outline: none !important;
    }


    /* Hide duplicate selectnav output. */
    nav#navigation .selectnav,
    nav#navigation select[id^="selectnav"] {
        display: none !important;
    }
}

/* =========================================================
   TABLET NAVIGATION — 768PX TO 959PX
   ========================================================= */

@media screen and (min-width: 768px) and (max-width: 959px) {

    nav#navigation {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin-top: 12px !important;
        padding: 0 !important;

        border-radius: 11px !important;

        overflow: visible !important;
        box-sizing: border-box !important;
    }

    /*
     * Display the eight navigation items as two rows
     * of four items instead of squeezing them into one row.
     */
    nav#navigation ul#TabMenu {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        gap: 0 !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;
        box-sizing: border-box !important;
    }

    nav#navigation ul#TabMenu > li {
        position: static !important;

        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }

    nav#navigation ul#TabMenu > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;

        width: 100% !important;
        min-width: 0 !important;
        min-height: 48px !important;

        margin: 0 !important;
        padding: 8px 7px !important;

        border: 0 !important;
        border-right: 1px solid rgba(255, 255, 255, 0.13) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.13) !important;
        border-radius: 0 !important;

        background: transparent !important;
        color: #ffffff !important;

        font-size: 10.5px !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
        text-align: center !important;
        white-space: normal !important;

        box-sizing: border-box !important;
    }

    /*
     * Keep the navigation icons small enough that they
     * do not compete with the wording.
     */
    nav#navigation ul#TabMenu > li > a > i {
        flex: 0 0 auto !important;

        margin: 0 !important;

        transform: scale(0.88) !important;
        transform-origin: center !important;
    }

    /* Remove the right border from items 4 and 8. */
    nav#navigation ul#TabMenu > li:nth-child(4n) > a {
        border-right: 0 !important;
    }

    /* Remove the bottom border from the second row. */
    nav#navigation ul#TabMenu > li:nth-child(n + 5) > a {
        border-bottom: 0 !important;
    }

    /* Correct tablet corner rounding. */
    nav#navigation ul#TabMenu > li:nth-child(1) > a {
        border-radius: 11px 0 0 0 !important;
    }

    nav#navigation ul#TabMenu > li:nth-child(4) > a {
        border-radius: 0 11px 0 0 !important;
    }

    nav#navigation ul#TabMenu > li:nth-child(5) > a {
        border-radius: 0 0 0 11px !important;
    }

    nav#navigation ul#TabMenu > li:nth-child(8) > a {
        border-radius: 0 0 11px 0 !important;
    }

    nav#navigation ul#TabMenu > li.active > a {
        border-color: rgba(255, 255, 255, 0.15) !important;

        background:
            linear-gradient(
                135deg,
                var(--star-coral, #f56d73),
                #f77f84
            ) !important;

        color: #ffffff !important;

        box-shadow:
            inset 0 -3px 0 rgba(220, 89, 97, 0.48) !important;
    }

    nav#navigation ul#TabMenu > li:not(.active):hover > a,
    nav#navigation ul#TabMenu > li:not(.active):focus-within > a {
        background: rgba(255, 255, 255, 0.10) !important;
        color: #ffffff !important;
    }


    /* =====================================================
       TABLET DROPDOWNS
       ===================================================== */

    /*
     * Because the navigation now has two rows, place opened
     * dropdowns beneath the entire navigation instead of
     * overlapping the second row.
     */
    nav#navigation ul#TabMenu > li > ul {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        right: 0 !important;
        left: 0 !important;
        z-index: 1000 !important;

        display: grid !important;
        grid-template-columns:
            repeat(auto-fit, minmax(150px, 1fr)) !important;
        gap: 5px !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 9px !important;

        border: 1px solid var(--star-border, #e4e9ec) !important;
        border-radius: 11px !important;

        background: #ffffff !important;

        box-shadow:
            0 14px 34px rgba(23, 53, 72, 0.20) !important;

        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;

        transform: translateY(-6px) !important;

        box-sizing: border-box !important;
    }

    nav#navigation ul#TabMenu > li:hover > ul,
    nav#navigation ul#TabMenu > li:focus-within > ul {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        transform: translateY(0) !important;
    }

    nav#navigation ul#TabMenu > li > ul > li {
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    nav#navigation ul#TabMenu > li > ul > li > a {
        display: flex !important;
        align-items: center !important;

        width: 100% !important;
        min-height: 42px !important;

        margin: 0 !important;
        padding: 10px 12px !important;

        border-radius: 7px !important;

        color: var(--star-navy, #21465f) !important;

        font-size: 11px !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;
        white-space: normal !important;

        box-sizing: border-box !important;
    }
}

/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media screen and (max-width: 420px),
screen and (max-device-width: 420px) {

    nav#navigation {
        padding: 6px !important;
    }

    nav#navigation ul#TabMenu {
        gap: 5px !important;
    }

    nav#navigation ul#TabMenu > li > a {
        min-height: 50px !important;

        padding: 9px !important;

        font-size: 10.5px !important;
    }
}

/* =========================================================
   ORDERS PAGE — MODERN TABLE LAYOUT (TABLET + DESKTOP)
   Mobile card rules below 768px remain unchanged.
   ========================================================= */

@media screen and (min-width: 768px) {
    /* ---------- Orders page heading and renewal notice ---------- */

    body:has(#FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid)
    #pageTitleDiv {
        margin: 0 0 14px !important;
        color: var(--star-navy) !important;
        font-size: 30px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        letter-spacing: -0.02em !important;
    }

    body:has(#FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid)
    #intrdouctionTextPageTextDiv {
        position: relative !important;
        margin: 0 0 6px !important;
        padding: 20px 22px 20px 26px !important;
        border: 1px solid rgba(245, 109, 115, 0.28) !important;
        border-left: 5px solid var(--star-coral) !important;
        border-radius: 14px !important;
        background: linear-gradient(135deg, var(--star-coral-light), #ffffff 72%) !important;
        box-shadow: 0 8px 24px rgba(23, 53, 72, 0.06) !important;
        box-sizing: border-box !important;
    }

    body:has(#FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid)
    #intrdouctionTextPageTextDiv h2 {
        margin: 0 0 8px !important;
        padding: 0 !important;
        color: var(--star-navy) !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        line-height: 1.45 !important;
    }

    body:has(#FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid)
    #intrdouctionTextPageTextDiv h2 strong {
        color: var(--star-navy) !important;
        font-weight: 700 !important;
    }

    body:has(#FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid)
    #intrdouctionTextPageTextDiv > div:not(:last-child) {
        display: none !important;
    }

    body:has(#FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid)
    #intrdouctionTextPageTextDiv > div:last-child {
        margin: 0 !important;
        color: var(--star-text-muted) !important;
        font-size: 13px !important;
        line-height: 1.65 !important;
    }

    /* ---------- Main orders content ---------- */

    #FormContentPlaceHolder_Panel {
        padding-bottom: 36px !important;
    }

    #FormContentPlaceHolder_Panel .editForm {
        padding-top: 4px !important;
    }

    #FormContentPlaceHolder_Panel h3.desc {
        margin: 38px 0 5px !important;
        color: var(--star-coral-dark) !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        letter-spacing: 0.09em !important;
        text-transform: uppercase !important;
    }

    #FormContentPlaceHolder_Panel .section {
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    #FormContentPlaceHolder_Panel .section h3 {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        margin: 0 0 16px !important;
        padding: 0 !important;
        color: var(--star-navy) !important;
        font-size: 24px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        letter-spacing: -0.015em !important;
    }

    #FormContentPlaceHolder_Panel .section h3::before {
        content: "" !important;
        flex: 0 0 10px !important;
        width: 10px !important;
        height: 10px !important;
        border-radius: 50% !important;
        background: var(--star-coral) !important;
        box-shadow: 0 0 0 5px rgba(245, 109, 115, 0.13) !important;
    }

    #FormContentPlaceHolder_Panel .section h3::after {
        content: "" !important;
        flex: 1 1 auto !important;
        height: 1px !important;
        background: linear-gradient(90deg, var(--star-border), transparent) !important;
    }

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGridFormAjaxGridUpdatePanelli,
    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGridFormAjaxGridUpdatePanelli {
        margin-bottom: 38px !important;
    }

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGridFormAjaxGridUpdatePanel > div:first-child,
    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGridFormAjaxGridUpdatePanel > div:first-child {
        width: 100% !important;
        max-width: 100% !important;
        border: 1px solid var(--star-border) !important;
        border-radius: 16px !important;
        background: var(--star-surface) !important;
        box-shadow: var(--star-card-shadow) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGridFormAjaxGridUpdatePanel > div:first-child {
        border-top: 4px solid var(--star-coral) !important;
    }

    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGridFormAjaxGridUpdatePanel > div:first-child {
        border-top: 4px solid var(--star-navy-light) !important;
    }

    /* ---------- Shared desktop table styling ---------- */

    table#FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid,
    table#FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border: 0 !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        background: var(--star-surface) !important;
        box-sizing: border-box !important;
    }

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid
    > tbody > tr.HeaderStyle > th,
    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid
    > tbody > tr.HeaderStyle > th {
        padding: 15px 14px !important;
        border: 0 !important;
        border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
        background: linear-gradient(135deg, var(--star-navy), var(--star-navy-dark)) !important;
        color: #ffffff !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        letter-spacing: 0.055em !important;
        text-align: left !important;
        text-transform: uppercase !important;
        vertical-align: middle !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid
    > tbody > tr.HeaderStyle > th:last-child,
    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid
    > tbody > tr.HeaderStyle > th:last-child {
        border-right: 0 !important;
    }

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid
    > tbody > tr.RowStyle > td,
    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid
    > tbody > tr.RowStyle > td {
        padding: 16px 14px !important;
        border: 0 !important;
        border-bottom: 1px solid var(--star-border) !important;
        background: #ffffff !important;
        color: var(--star-text) !important;
        font-size: 13px !important;
        line-height: 1.55 !important;
        vertical-align: middle !important;
        box-sizing: border-box !important;
        transition: background-color 0.15s ease !important;
    }

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid
    > tbody > tr.RowStyle:hover > td,
    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid
    > tbody > tr.RowStyle:hover > td {
        background: #f8fbfc !important;
    }

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid
    > tbody > tr.RowStyle > td:nth-child(3),
    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid
    > tbody > tr.RowStyle > td:nth-child(4),
    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid
    > tbody > tr.RowStyle > td:nth-child(6),
    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid
    > tbody > tr.RowStyle > td:nth-child(7),
    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid
    > tbody > tr.RowStyle > td:nth-child(2),
    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid
    > tbody > tr.RowStyle > td:nth-child(3) {
        white-space: nowrap !important;
    }

    /* ---------- Open orders column sizing ---------- */

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid
    > tbody > tr.HeaderStyle > th:nth-child(1) {
        width: 118px !important;
        font-size: 0 !important;
        text-align: center !important;
    }

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid
    > tbody > tr.HeaderStyle > th:nth-child(1)::after {
        content: "Action" !important;
        font-size: 11px !important;
    }

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid
    > tbody > tr.HeaderStyle > th:nth-child(1) input {
        display: none !important;
    }

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid
    > tbody > tr.HeaderStyle > th:nth-child(3) {
        width: 112px !important;
    }

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid
    > tbody > tr.HeaderStyle > th:nth-child(4) {
        width: 92px !important;
    }

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid
    > tbody > tr.HeaderStyle > th:nth-child(6) {
        width: 128px !important;
    }

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid
    > tbody > tr.HeaderStyle > th:nth-child(7) {
        width: 104px !important;
    }

    /* ---------- Order-name links ---------- */

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid
    > tbody > tr.RowStyle > td:nth-child(2) a,
    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid
    > tbody > tr.RowStyle > td:nth-child(1) a {
        color: var(--star-navy) !important;
        font-weight: 600 !important;
        line-height: 1.5 !important;
        text-decoration: none !important;
        overflow-wrap: anywhere !important;
    }

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid
    > tbody > tr.RowStyle > td:nth-child(2) a:hover,
    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid
    > tbody > tr.RowStyle > td:nth-child(2) a:focus,
    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid
    > tbody > tr.RowStyle > td:nth-child(1) a:hover,
    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid
    > tbody > tr.RowStyle > td:nth-child(1) a:focus {
        color: var(--star-coral-dark) !important;
        text-decoration: underline !important;
        text-decoration-thickness: 2px !important;
        text-underline-offset: 3px !important;
    }

    /* ---------- Primary action button ---------- */

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid
    > tbody > tr.RowStyle > td:nth-child(1) {
        text-align: center !important;
    }

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid
    > tbody > tr.RowStyle > td:nth-child(1) > a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 92px !important;
        min-height: 38px !important;
        padding: 8px 14px !important;
        border: 1px solid var(--star-coral) !important;
        border-radius: 8px !important;
        background: linear-gradient(135deg, var(--star-coral), #f77f84) !important;
        color: #ffffff !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        text-align: center !important;
        text-decoration: none !important;
        box-shadow: 0 5px 14px rgba(245, 109, 115, 0.24) !important;
        box-sizing: border-box !important;
        transition: transform 0.1s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
    }

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid
    > tbody > tr.RowStyle > td:nth-child(1) > a:hover,
    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid
    > tbody > tr.RowStyle > td:nth-child(1) > a:focus {
        border-color: var(--star-coral-dark) !important;
        background: linear-gradient(135deg, var(--star-coral-dark), var(--star-coral)) !important;
        color: #ffffff !important;
        text-decoration: none !important;
        box-shadow: 0 8px 18px rgba(245, 109, 115, 0.32) !important;
        transform: translateY(-1px) !important;
    }

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid
    > tbody > tr.RowStyle > td:nth-child(1) > a:focus-visible {
        outline: 3px solid rgba(245, 109, 115, 0.28) !important;
        outline-offset: 3px !important;
    }

    /* ---------- Status badge ---------- */

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid
    > tbody > tr.RowStyle > td:nth-child(6) {
        text-align: center !important;
    }

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid
    > tbody > tr.RowStyle > td:nth-child(6) a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-height: 32px !important;
        padding: 6px 11px !important;
        border: 1px solid rgba(33, 70, 95, 0.18) !important;
        border-radius: 999px !important;
        background: rgba(33, 70, 95, 0.07) !important;
        color: var(--star-navy) !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        text-align: center !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
    }

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid
    > tbody > tr.RowStyle > td:nth-child(6) a:hover,
    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid
    > tbody > tr.RowStyle > td:nth-child(6) a:focus {
        border-color: rgba(33, 70, 95, 0.32) !important;
        background: rgba(33, 70, 95, 0.12) !important;
        color: var(--star-navy-dark) !important;
        text-decoration: none !important;
    }

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid
    > tbody > tr.RowStyle > td:nth-child(4),
    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid
    > tbody > tr.RowStyle > td:nth-child(7),
    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid
    > tbody > tr.RowStyle > td:nth-child(3) {
        color: var(--star-navy-dark) !important;
        font-weight: 600 !important;
    }

    /* ---------- Open-order totals panel ---------- */

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid
    > tbody > tr.FooterStyle > td {
        padding: 0 !important;
        border: 0 !important;
        background: var(--star-surface-soft) !important;
    }

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid
    > tbody > tr.FooterStyle > td > table {
        width: 100% !important;
        margin: 0 !important;
        border: 0 !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        background: transparent !important;
    }

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid
    > tbody > tr.FooterStyle > td > table > tbody > tr > td:first-child {
        display: none !important;
    }

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid
    > tbody > tr.FooterStyle > td > table > tbody > tr > td:last-child {
        width: 100% !important;
        padding: 18px 20px !important;
        border: 0 !important;
        background: transparent !important;
    }

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid
    > tbody > tr.FooterStyle > td > table > tbody > tr > td:last-child > table {
        width: auto !important;
        min-width: 330px !important;
        margin-left: auto !important;
        border: 1px solid var(--star-border) !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        border-radius: 11px !important;
        background: #ffffff !important;
        box-shadow: 0 6px 18px rgba(23, 53, 72, 0.07) !important;
        overflow: hidden !important;
    }

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid
    > tbody > tr.FooterStyle .TableSubHeader {
        padding: 8px 11px !important;
        border: 0 !important;
        background: #ffffff !important;
        color: var(--star-text) !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
        white-space: nowrap !important;
    }

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid_orderBalanceRow
    > td {
        border-top: 1px solid var(--star-border) !important;
    }

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid_balanceLabel {
        color: var(--star-coral-dark) !important;
        font-size: 16px !important;
        font-weight: 700 !important;
    }

    /* ---------- Paid-order pager ---------- */

    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid
    > tbody > tr.PagerStyle > td {
        padding: 14px 18px !important;
        border: 0 !important;
        background: var(--star-surface-soft) !important;
    }

    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid
    > tbody > tr.PagerStyle > td > table {
        width: 100% !important;
        border: 0 !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        background: transparent !important;
    }

    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid
    > tbody > tr.PagerStyle > td > table > tbody > tr > td {
        padding: 4px !important;
        border: 0 !important;
        background: transparent !important;
        color: var(--star-text-muted) !important;
        font-size: 12px !important;
    }

    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid
    .PagerStyle a,
    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid
    .PagerStyle > td > table > tbody > tr > td:first-child > span {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 34px !important;
        height: 34px !important;
        padding: 0 9px !important;
        border: 1px solid var(--star-border) !important;
        border-radius: 7px !important;
        background: #ffffff !important;
        color: var(--star-navy) !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
    }

    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid
    .PagerStyle > td > table > tbody > tr > td:first-child > span {
        border-color: var(--star-coral) !important;
        background: var(--star-coral) !important;
        color: #ffffff !important;
    }

    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid
    .PagerStyle select {
        min-height: 38px !important;
        margin-left: 6px !important;
        padding: 7px 30px 7px 10px !important;
        border: 1px solid var(--star-border) !important;
        border-radius: 7px !important;
        background: #ffffff !important;
        color: var(--star-text) !important;
        font: 600 12px/1.3 'Poppins', sans-serif !important;
        box-sizing: border-box !important;
    }
}

/* Keep table columns readable on tablet-sized viewports. */
@media screen and (min-width: 768px) and (max-width: 959px) {
    table#FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid {
        min-width: 860px !important;
    }

    table#FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid {
        min-width: 640px !important;
    }
}



/* =========================================================
   5. TABLET NORMALIZATION
   Keep tables as tables from 768px through 959px.
   ========================================================= */

@media screen and (min-width: 768px) and (max-width: 959px) {
    #content > .container.floated,
    #content .grid,
    #content .grid > .row,
    #updatePanel,
    #formPanel,
    #SingleColumnLayout,
    #SingleColumnLayout > .sixteen,
    #FormContentPlaceHolder_PanelDiv,
    #FormContentPlaceHolder_Panel,
    #FormContentPlaceHolder_Panel .editForm,
    #FormContentPlaceHolder_Panel .row,
    #FormContentPlaceHolder_Panel .span10,
    #FormContentPlaceHolder_panelDiv,
    #FormContentPlaceHolder_panel,
    #FormContentPlaceHolder_panel .editForm,
    #FormContentPlaceHolder_panel .row,
    #FormContentPlaceHolder_panel .span10 {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        float: none !important;
        box-sizing: border-box !important;
    }

    #content > .container.floated {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGridFormAjaxGridUpdatePanel > div:first-child,
    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGridFormAjaxGridUpdatePanel > div:first-child,
    #FormContentPlaceHolder_panel_GridFormAjaxGridUpdatePanel > div:first-child {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}


/* =========================================================
   6. SHARED MOBILE LAYOUT NORMALIZATION
   The max-device-width clause helps pages that lack a viewport meta tag.
   ========================================================= */

@media screen and (max-width: 767px),
       screen and (max-device-width: 767px) {
    html,
    body,
    #body,
    #form,
    #wrapper,
    #content,
    #content > .container,
    #content > .container.floated,
    #content .grid,
    #content .grid > .row,
    #updatePanel,
    #formPanel,
    #SingleColumnLayout,
    #SingleColumnLayout > .sixteen,
    #SingleColumnLayout > .sixteen.floated,
    #FormContentPlaceHolder_PanelDiv,
    #FormContentPlaceHolder_Panel,
    #FormContentPlaceHolder_Panel .editForm,
    #FormContentPlaceHolder_Panel .row,
    #FormContentPlaceHolder_Panel .span10,
    #FormContentPlaceHolder_panelDiv,
    #FormContentPlaceHolder_panel,
    #FormContentPlaceHolder_panel .editForm,
    #FormContentPlaceHolder_panel .row,
    #FormContentPlaceHolder_panel .span10 {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        float: none !important;
        box-sizing: border-box !important;
    }

    #content > .container,
    #content > .container.floated {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    #content,
    #content > .container,
    #content > .container.floated,
    #content .grid,
    #content .grid > .row,
    #updatePanel,
    #formPanel {
        overflow-x: visible !important;
    }

    #FormContentPlaceHolder_Panel h3.desc,
    #FormContentPlaceHolder_panel h3.desc {
        margin: 28px 0 8px !important;
        color: var(--star-navy) !important;
        font-size: 22px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        letter-spacing: -0.01em !important;
    }

    #FormContentPlaceHolder_Panel .section h3,
    #FormContentPlaceHolder_panel .section h3 {
        margin: 0 0 16px !important;
        color: var(--star-text) !important;
        font-size: 17px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
    }
}


/* =========================================================
   7. ORDERS PAGE — MOBILE CARDS
   ========================================================= */

@media screen and (max-width: 767px),
       screen and (max-device-width: 767px) {
    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGridFormAjaxGridUpdatePanelli,
    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGridFormAjaxGridUpdatePanelli,
    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGridFormAjaxGridUpdatePanel,
    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGridFormAjaxGridUpdatePanel,
    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGridFormAjaxGridUpdatePanel > div:first-child,
    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGridFormAjaxGridUpdatePanel > div:first-child {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    table#FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid,
    table#FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid,
    table#FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid > tbody,
    table#FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid > tbody {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        border: 0 !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    table#FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid > tbody > tr.HeaderStyle,
    table#FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid > tbody > tr.HeaderStyle,
    table#FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid > tbody > tr.HeaderStyle > th,
    table#FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid > tbody > tr.HeaderStyle > th {
        display: none !important;
    }

    /* ---------- Open-order cards ---------- */

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid > tbody > tr.RowStyle {
        position: relative !important;
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 0 20px !important;
        padding: 22px !important;
        border: 1px solid var(--star-border) !important;
        border-radius: 16px !important;
        background: linear-gradient(180deg, #ffffff 0%, #ffffff 75%, #fbfcfd 100%) !important;
        box-shadow: var(--star-card-shadow) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid > tbody > tr.RowStyle::before {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 4px !important;
        background: linear-gradient(90deg, var(--star-coral), #ff9a9f) !important;
    }

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid > tbody > tr.RowStyle:hover {
        background: linear-gradient(180deg, #ffffff 0%, #ffffff 75%, #fbfcfd 100%) !important;
    }

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid > tbody > tr.RowStyle > td {
        display: block !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 13px 0 !important;
        border: 0 !important;
        border-bottom: 1px solid var(--star-border) !important;
        color: var(--star-text) !important;
        text-align: left !important;
        white-space: normal !important;
        box-sizing: border-box !important;
    }

    /* Order */
    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid tr.RowStyle > td:nth-child(2) {
        order: 1;
        flex: 0 0 100% !important;
        width: 100% !important;
        padding-top: 4px !important;
        color: var(--star-navy) !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1.45 !important;
    }

    /* Order date */
    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid tr.RowStyle > td:nth-child(3) {
        order: 2;
        flex: 0 0 50% !important;
        width: 50% !important;
        padding-right: 16px !important;
    }

    /* Total */
    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid tr.RowStyle > td:nth-child(4) {
        order: 3;
        flex: 0 0 50% !important;
        width: 50% !important;
        padding-left: 16px !important;
    }

    /* Source */
    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid tr.RowStyle > td:nth-child(5) {
        order: 4;
        flex: 0 0 100% !important;
        width: 100% !important;
    }

    /* Balance */
    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid tr.RowStyle > td:nth-child(7) {
        order: 5;
        flex: 0 0 50% !important;
        width: 50% !important;
        padding-right: 16px !important;
    }

    /* Status */
    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid tr.RowStyle > td:nth-child(6) {
        order: 6;
        flex: 0 0 50% !important;
        width: 50% !important;
        padding-left: 16px !important;
    }

    /* Primary action */
    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid tr.RowStyle > td:nth-child(1) {
        order: 7;
        flex: 0 0 100% !important;
        width: 100% !important;
        margin-top: 8px !important;
        padding: 18px 0 0 !important;
        border-bottom: 0 !important;
    }

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid tr.RowStyle > td::before {
        display: block !important;
        margin-bottom: 6px !important;
        color: var(--star-text-muted) !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        letter-spacing: 0.065em !important;
        text-transform: uppercase !important;
    }

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid tr.RowStyle > td:nth-child(1)::before { content: "Available Action"; }
    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid tr.RowStyle > td:nth-child(2)::before { content: "Order"; }
    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid tr.RowStyle > td:nth-child(3)::before { content: "Order Date"; }
    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid tr.RowStyle > td:nth-child(4)::before { content: "Total"; }
    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid tr.RowStyle > td:nth-child(5)::before { content: "Source"; }
    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid tr.RowStyle > td:nth-child(6)::before { content: "Current Status"; }
    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid tr.RowStyle > td:nth-child(7)::before { content: "Balance"; }

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid tr.RowStyle > td:nth-child(2) a {
        color: var(--star-navy) !important;
        font-weight: 700 !important;
        line-height: 1.45 !important;
        text-decoration: none !important;
    }

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid tr.RowStyle > td:nth-child(2) a:hover,
    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid tr.RowStyle > td:nth-child(2) a:focus {
        color: var(--star-coral-dark) !important;
        text-decoration: underline !important;
        text-underline-offset: 3px !important;
    }

    /* Status pill */
    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid tr.RowStyle > td:nth-child(6) a {
        display: inline-flex !important;
        align-items: center !important;
        width: auto !important;
        min-height: 32px !important;
        padding: 6px 12px !important;
        border: 1px solid rgba(33, 70, 95, 0.18) !important;
        border-radius: 999px !important;
        background: rgba(33, 70, 95, 0.07) !important;
        color: var(--star-navy) !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        text-align: left !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
    }

    /* Coral primary button */
    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid tr.RowStyle > td:nth-child(1) > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 50px !important;
        padding: 14px 20px !important;
        border: 1px solid var(--star-coral) !important;
        border-radius: 10px !important;
        background: linear-gradient(135deg, var(--star-coral), #f77f84) !important;
        color: #ffffff !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 20px !important;
        letter-spacing: 0.01em !important;
        text-align: center !important;
        text-decoration: none !important;
        text-shadow: none !important;
        box-shadow: 0 8px 18px rgba(245, 109, 115, 0.26) !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
        transition:
            background-color 0.15s ease,
            border-color 0.15s ease,
            box-shadow 0.15s ease,
            transform 0.08s ease !important;
    }

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid tr.RowStyle > td:nth-child(1) > a:hover {
        border-color: var(--star-coral-dark) !important;
        background: linear-gradient(135deg, var(--star-coral-dark), var(--star-coral)) !important;
        color: #ffffff !important;
        box-shadow: 0 10px 24px rgba(245, 109, 115, 0.34) !important;
        transform: translateY(-1px) !important;
    }

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid tr.RowStyle > td:nth-child(1) > a:focus {
        border-color: var(--star-coral-dark) !important;
        color: #ffffff !important;
        outline: 3px solid rgba(245, 109, 115, 0.28) !important;
        outline-offset: 3px !important;
    }

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid tr.RowStyle > td:nth-child(1) > a:active {
        box-shadow: 0 4px 10px rgba(245, 109, 115, 0.24) !important;
        transform: translateY(1px) !important;
    }

    /* ---------- Paid-order cards ---------- */

    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid > tbody > tr.RowStyle {
        position: relative !important;
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 0 18px !important;
        padding: 20px !important;
        border: 1px solid var(--star-border) !important;
        border-radius: 16px !important;
        background: linear-gradient(180deg, #ffffff 0%, #ffffff 75%, #fbfcfd 100%) !important;
        box-shadow: var(--star-card-shadow) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid > tbody > tr.RowStyle::before {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 4px !important;
        background: linear-gradient(90deg, var(--star-navy), var(--star-navy-light)) !important;
    }

    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid > tbody > tr.RowStyle:hover {
        background: linear-gradient(180deg, #ffffff 0%, #ffffff 75%, #fbfcfd 100%) !important;
    }

    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid > tbody > tr.RowStyle > td {
        display: block !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 13px 0 !important;
        border: 0 !important;
        border-bottom: 1px solid var(--star-border) !important;
        color: var(--star-text) !important;
        text-align: left !important;
        white-space: normal !important;
        box-sizing: border-box !important;
    }

    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid tr.RowStyle > td:nth-child(1) {
        order: 1;
        flex: 0 0 100% !important;
        width: 100% !important;
        padding-top: 4px !important;
        color: var(--star-navy) !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1.45 !important;
    }

    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid tr.RowStyle > td:nth-child(2) {
        order: 2;
        flex: 0 0 50% !important;
        width: 50% !important;
        padding-right: 16px !important;
        border-bottom: 0 !important;
    }

    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid tr.RowStyle > td:nth-child(3) {
        order: 3;
        flex: 0 0 50% !important;
        width: 50% !important;
        padding-left: 16px !important;
        border-bottom: 0 !important;
    }

    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid tr.RowStyle > td::before {
        display: block !important;
        margin-bottom: 6px !important;
        color: var(--star-text-muted) !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        letter-spacing: 0.065em !important;
        text-transform: uppercase !important;
    }

    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid tr.RowStyle > td:nth-child(1)::before { content: "Order"; }
    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid tr.RowStyle > td:nth-child(2)::before { content: "Date Paid"; }
    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid tr.RowStyle > td:nth-child(3)::before { content: "Total"; }

    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid tr.RowStyle > td:nth-child(1) a {
        color: var(--star-navy) !important;
        font-weight: 700 !important;
        text-decoration: none !important;
    }

    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid tr.RowStyle > td:nth-child(1) a:hover,
    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid tr.RowStyle > td:nth-child(1) a:focus {
        color: var(--star-coral-dark) !important;
        text-decoration: underline !important;
        text-underline-offset: 3px !important;
    }

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid tr.RowStyle td *,
    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid tr.RowStyle td * {
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    /* ---------- Orders footer and pager ---------- */

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid > tbody > tr.FooterStyle,
    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid > tbody > tr.FooterStyle > td,
    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid > tbody > tr.PagerStyle,
    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid > tbody > tr.PagerStyle > td {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid .FooterStyle > td,
    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid .PagerStyle > td {
        margin-top: 4px !important;
        padding: 16px !important;
        border: 1px solid var(--star-border) !important;
        border-radius: 14px !important;
        background: var(--star-surface-soft) !important;
    }

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid .FooterStyle table,
    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid .PagerStyle table {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid .FooterStyle .TableSubHeader {
        padding: 7px 4px !important;
        border: 0 !important;
        color: var(--star-text) !important;
        font-size: 14px !important;
    }

    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid .PagerStyle select {
        min-height: 40px !important;
        padding: 7px 30px 7px 10px !important;
        border: 1px solid var(--star-border) !important;
        border-radius: 7px !important;
        background: #ffffff !important;
        color: var(--star-text) !important;
        box-sizing: border-box !important;
    }
}


/* =========================================================
   8. COMMITTEES PAGE — MOBILE CARDS
   Exact grid ID from the committee page.
   ========================================================= */

@media screen and (max-width: 767px),
       screen and (max-device-width: 767px) {
    #FormContentPlaceHolder_panel_GridFormAjaxGridUpdatePanelli,
    #FormContentPlaceHolder_panel_GridFormAjaxGridUpdatePanel,
    #FormContentPlaceHolder_panel_GridFormAjaxGridUpdatePanel > div:first-child {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    table#FormContentPlaceHolder_panel_Grid,
    table#FormContentPlaceHolder_panel_Grid > tbody {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        border: 0 !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    table#FormContentPlaceHolder_panel_Grid > tbody > tr.HeaderStyle,
    table#FormContentPlaceHolder_panel_Grid > tbody > tr.HeaderStyle > th {
        display: none !important;
    }

    #FormContentPlaceHolder_panel_Grid > tbody > tr.RowStyle {
        position: relative !important;
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 0 18px !important;
        padding: 20px !important;
        border: 1px solid var(--star-border) !important;
        border-radius: 16px !important;
        background: linear-gradient(180deg, #ffffff 0%, #ffffff 78%, #fbfcfd 100%) !important;
        box-shadow: var(--star-card-shadow) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    #FormContentPlaceHolder_panel_Grid > tbody > tr.RowStyle::before {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 4px !important;
        background: linear-gradient(90deg, var(--star-navy), var(--star-navy-light)) !important;
    }

    #FormContentPlaceHolder_panel_Grid > tbody > tr.RowStyle:hover {
        background: linear-gradient(180deg, #ffffff 0%, #ffffff 78%, #fbfcfd 100%) !important;
    }

    #FormContentPlaceHolder_panel_Grid > tbody > tr.RowStyle > td {
        display: block !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 13px 0 !important;
        border: 0 !important;
        border-bottom: 1px solid var(--star-border) !important;
        color: var(--star-text) !important;
        text-align: left !important;
        white-space: normal !important;
        box-sizing: border-box !important;
    }

    /* Committee name */
    #FormContentPlaceHolder_panel_Grid tr.RowStyle > td:nth-child(1) {
        order: 1;
        flex: 0 0 100% !important;
        width: 100% !important;
        padding-top: 4px !important;
        color: var(--star-navy) !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1.45 !important;
    }

    /* Description is blank in the supplied markup, so omit it on mobile. */
    #FormContentPlaceHolder_panel_Grid tr.RowStyle > td:nth-child(2) {
        display: none !important;
    }

    /* Status */
    #FormContentPlaceHolder_panel_Grid tr.RowStyle > td:nth-child(3) {
        order: 2;
        flex: 0 0 100% !important;
        width: 100% !important;
        border-bottom: 0 !important;
    }

    /* Volunteer and nomination stay hidden unless RAMCO outputs an action. */
    #FormContentPlaceHolder_panel_Grid tr.RowStyle > td:nth-child(4),
    #FormContentPlaceHolder_panel_Grid tr.RowStyle > td:nth-child(5) {
        display: none !important;
    }

    #FormContentPlaceHolder_panel_Grid tr.RowStyle > td:nth-child(4):has(a[href], button, input, select, textarea),
    #FormContentPlaceHolder_panel_Grid tr.RowStyle > td:nth-child(5):has(a[href], button, input, select, textarea) {
        display: block !important;
        order: 3;
        flex: 0 0 100% !important;
        width: 100% !important;
        padding-top: 16px !important;
        border-bottom: 0 !important;
    }

    #FormContentPlaceHolder_panel_Grid tr.RowStyle > td::before {
        display: block !important;
        margin-bottom: 6px !important;
        color: var(--star-text-muted) !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        letter-spacing: 0.065em !important;
        text-transform: uppercase !important;
    }

    #FormContentPlaceHolder_panel_Grid tr.RowStyle > td:nth-child(1)::before { content: "Committee"; }
    #FormContentPlaceHolder_panel_Grid tr.RowStyle > td:nth-child(3)::before { content: "Status"; }
    #FormContentPlaceHolder_panel_Grid tr.RowStyle > td:nth-child(4)::before { content: "Volunteer"; }
    #FormContentPlaceHolder_panel_Grid tr.RowStyle > td:nth-child(5)::before { content: "Nomination"; }

    #FormContentPlaceHolder_panel_Grid tr.RowStyle > td:nth-child(1) a {
        color: var(--star-navy) !important;
        font-weight: 700 !important;
        line-height: 1.45 !important;
        text-decoration: none !important;
    }

    #FormContentPlaceHolder_panel_Grid tr.RowStyle > td:nth-child(1) a:hover,
    #FormContentPlaceHolder_panel_Grid tr.RowStyle > td:nth-child(1) a:focus {
        color: var(--star-coral-dark) !important;
        text-decoration: underline !important;
        text-underline-offset: 3px !important;
    }

    #FormContentPlaceHolder_panel_Grid tr.RowStyle > td:nth-child(3) .labeldesc {
        display: inline-flex !important;
        align-items: center !important;
        min-height: 32px !important;
        padding: 6px 12px !important;
        border: 1px solid rgba(33, 70, 95, 0.18) !important;
        border-radius: 999px !important;
        background: rgba(33, 70, 95, 0.07) !important;
        color: var(--star-navy) !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        box-sizing: border-box !important;
    }

    #FormContentPlaceHolder_panel_Grid tr.RowStyle > td:nth-child(4) a,
    #FormContentPlaceHolder_panel_Grid tr.RowStyle > td:nth-child(5) a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 46px !important;
        padding: 12px 16px !important;
        border: 1px solid var(--star-coral) !important;
        border-radius: 9px !important;
        background: linear-gradient(135deg, var(--star-coral), #f77f84) !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        text-align: center !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
    }

    #FormContentPlaceHolder_panel_Grid tr.RowStyle td * {
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    /* Committee pager */
    #FormContentPlaceHolder_panel_Grid > tbody > tr.PagerStyle,
    #FormContentPlaceHolder_panel_Grid > tbody > tr.PagerStyle > td {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #FormContentPlaceHolder_panel_Grid .PagerStyle > td {
        margin-top: 4px !important;
        padding: 16px !important;
        border: 1px solid var(--star-border) !important;
        border-radius: 14px !important;
        background: var(--star-surface-soft) !important;
    }

    #FormContentPlaceHolder_panel_Grid .PagerStyle > td > table {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #FormContentPlaceHolder_panel_Grid .PagerStyle > td > table > tbody,
    #FormContentPlaceHolder_panel_Grid .PagerStyle > td > table > tbody > tr {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        width: 100% !important;
        gap: 8px !important;
    }

    #FormContentPlaceHolder_panel_Grid .PagerStyle > td > table > tbody > tr > td {
        display: block !important;
        width: auto !important;
        padding: 4px !important;
        border: 0 !important;
        white-space: normal !important;
    }

    #FormContentPlaceHolder_panel_Grid .PagerStyle a,
    #FormContentPlaceHolder_panel_Grid .PagerStyle > td > table > tbody > tr > td:first-child span {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 36px !important;
        height: 36px !important;
        padding: 0 10px !important;
        border: 1px solid var(--star-border) !important;
        border-radius: 7px !important;
        background: #ffffff !important;
        color: var(--star-navy) !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
    }

    #FormContentPlaceHolder_panel_Grid .PagerStyle > td > table > tbody > tr > td:first-child span {
        border-color: var(--star-coral) !important;
        background: var(--star-coral) !important;
        color: #ffffff !important;
    }

    #FormContentPlaceHolder_panel_Grid .PagerStyle select {
        min-height: 40px !important;
        padding: 7px 30px 7px 10px !important;
        border: 1px solid var(--star-border) !important;
        border-radius: 7px !important;
        background: #ffffff !important;
        color: var(--star-text) !important;
        box-sizing: border-box !important;
    }
}


/* =========================================================
   9. VERY SMALL PHONES
   ========================================================= */

@media screen and (max-width: 520px),
       screen and (max-device-width: 520px) {
    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid > tbody > tr.RowStyle,
    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid > tbody > tr.RowStyle,
    #FormContentPlaceHolder_panel_Grid > tbody > tr.RowStyle {
        padding: 18px !important;
        border-radius: 14px !important;
    }

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid tr.RowStyle > td:nth-child(3),
    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid tr.RowStyle > td:nth-child(4),
    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid tr.RowStyle > td:nth-child(6),
    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid tr.RowStyle > td:nth-child(7),
    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid tr.RowStyle > td:nth-child(2),
    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid tr.RowStyle > td:nth-child(3) {
        flex: 0 0 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid tr.RowStyle > td:nth-child(6),
    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid tr.RowStyle > td:nth-child(3) {
        border-bottom: 0 !important;
    }
}


/* =========================================================
   10. SESSION-EXPIRATION DIALOG
   These rules are intentionally outside the mobile media query.
   ========================================================= */

.ui-widget-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(135deg, rgba(23, 53, 72, 0.78), rgba(33, 70, 95, 0.62)) !important;
    opacity: 1 !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 1000000 !important;
}

.ui-dialog[aria-describedby="timeout"] {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: calc(100% - 32px) !important;
    min-width: 0 !important;
    max-width: 500px !important;
    height: auto !important;
    max-height: calc(100vh - 32px) !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translate(-50%, -50%) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 18px !important;
    background: var(--star-surface) !important;
    box-shadow: var(--star-dialog-shadow) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    z-index: 1000001 !important;
    animation: starDialogOpen 0.22s ease-out both;
}

@keyframes starDialogOpen {
    from {
        opacity: 0;
        transform: translate(-50%, -47%) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.ui-dialog[aria-describedby="timeout"] .ui-resizable-handle {
    display: none !important;
}

.ui-dialog[aria-describedby="timeout"] .ui-dialog-titlebar {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 60px !important;
    padding: 12px 16px 12px 20px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: linear-gradient(135deg, var(--star-navy), var(--star-navy-dark)) !important;
    box-sizing: border-box !important;
}

.ui-dialog[aria-describedby="timeout"] .ui-dialog-titlebar::before {
    content: "Session Expiring" !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.01em !important;
}

.ui-dialog[aria-describedby="timeout"] .ui-dialog-titlebar::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, var(--star-coral), #ff9a9f) !important;
}

.ui-dialog[aria-describedby="timeout"] .ui-dialog-title {
    display: none !important;
}

.ui-dialog[aria-describedby="timeout"] .ui-dialog-titlebar-close {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    font-size: 0 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease !important;
}

.ui-dialog[aria-describedby="timeout"] .ui-dialog-titlebar-close::before,
.ui-dialog[aria-describedby="timeout"] .ui-dialog-titlebar-close::after {
    content: "" !important;
    position: absolute !important;
    width: 16px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
}

.ui-dialog[aria-describedby="timeout"] .ui-dialog-titlebar-close::before {
    transform: rotate(45deg) !important;
}

.ui-dialog[aria-describedby="timeout"] .ui-dialog-titlebar-close::after {
    transform: rotate(-45deg) !important;
}

.ui-dialog[aria-describedby="timeout"] .ui-dialog-titlebar-close .ui-icon,
.ui-dialog[aria-describedby="timeout"] .ui-dialog-titlebar-close .ui-button-icon,
.ui-dialog[aria-describedby="timeout"] .ui-dialog-titlebar-close .ui-button-icon-space {
    display: none !important;
}

.ui-dialog[aria-describedby="timeout"] .ui-dialog-titlebar-close:hover {
    border-color: rgba(255, 255, 255, 0.75) !important;
    background: rgba(255, 255, 255, 0.2) !important;
    transform: rotate(4deg) !important;
}

.ui-dialog[aria-describedby="timeout"] .ui-dialog-titlebar-close:focus {
    border-color: #ffffff !important;
    background: rgba(255, 255, 255, 0.2) !important;
    outline: 3px solid rgba(245, 109, 115, 0.5) !important;
    outline-offset: 3px !important;
}

.ui-dialog[aria-describedby="timeout"] #timeout.ui-dialog-content {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: calc(100vh - 220px) !important;
    margin: 0 !important;
    padding: 34px 34px 28px !important;
    border: 0 !important;
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 72%, #fbfcfd 100%) !important;
    color: var(--star-text) !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
}

.ui-dialog[aria-describedby="timeout"] #timeout.ui-dialog-content::before {
    content: "!" !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 54px !important;
    height: 54px !important;
    margin: 0 0 20px !important;
    border-radius: 50% !important;
    background: var(--star-coral-light) !important;
    color: var(--star-coral) !important;
    font-size: 30px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}

.ui-dialog[aria-describedby="timeout"] #timeout h1 {
    margin: 0 0 12px !important;
    padding: 0 !important;
    color: var(--star-navy) !important;
    font-family: inherit !important;
    font-size: clamp(26px, 5vw, 34px) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
}

.ui-dialog[aria-describedby="timeout"] #timeout p {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--star-text-muted) !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
}

.ui-dialog[aria-describedby="timeout"] .ui-dialog-buttonpane {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 20px 34px 30px !important;
    border: 0 !important;
    border-top: 1px solid var(--star-border) !important;
    background: var(--star-surface-soft) !important;
    box-sizing: border-box !important;
}

.ui-dialog[aria-describedby="timeout"] .ui-dialog-buttonpane .ui-dialog-buttonset {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
}

.ui-dialog[aria-describedby="timeout"] .ui-dialog-buttonpane button {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 13px 22px !important;
    border: 1px solid var(--star-coral) !important;
    border-radius: 9px !important;
    background: linear-gradient(135deg, var(--star-coral), #f77f84) !important;
    color: #ffffff !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 20px !important;
    letter-spacing: 0.01em !important;
    text-align: center !important;
    text-shadow: none !important;
    cursor: pointer !important;
    box-shadow: 0 8px 18px rgba(245, 109, 115, 0.26) !important;
    box-sizing: border-box !important;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.08s ease !important;
}

.ui-dialog[aria-describedby="timeout"] .ui-dialog-buttonpane button:hover {
    border-color: var(--star-coral-dark) !important;
    background: linear-gradient(135deg, var(--star-coral-dark), var(--star-coral)) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(245, 109, 115, 0.34) !important;
    transform: translateY(-1px) !important;
}

.ui-dialog[aria-describedby="timeout"] .ui-dialog-buttonpane button:focus {
    border-color: var(--star-coral-dark) !important;
    color: #ffffff !important;
    outline: 3px solid rgba(245, 109, 115, 0.28) !important;
    outline-offset: 3px !important;
}

.ui-dialog[aria-describedby="timeout"] .ui-dialog-buttonpane button:active {
    box-shadow: 0 4px 10px rgba(245, 109, 115, 0.24) !important;
    transform: translateY(1px) !important;
}

.ui-dialog[aria-describedby="timeout"] .ui-dialog-buttonpane button .ui-button-text {
    padding: 0 !important;
}

.ui-dialog[aria-describedby="timeout"] .ui-dialog-buttonpane button .ui-icon,
.ui-dialog[aria-describedby="timeout"] .ui-dialog-buttonpane button .ui-button-icon-space {
    display: none !important;
}


/* =========================================================
   11. SESSION DIALOG — MOBILE ADJUSTMENTS
   ========================================================= */

@media screen and (max-width: 767px),
       screen and (max-device-width: 767px) {
    .ui-dialog[aria-describedby="timeout"] {
        width: calc(100% - 28px) !important;
        max-width: 460px !important;
        border-radius: 16px !important;
    }

    .ui-dialog[aria-describedby="timeout"] #timeout.ui-dialog-content {
        padding: 30px 28px 24px !important;
    }

    .ui-dialog[aria-describedby="timeout"] .ui-dialog-buttonpane {
        padding: 18px 28px 26px !important;
    }
}

@media screen and (max-width: 520px),
       screen and (max-device-width: 520px) {
    .ui-dialog[aria-describedby="timeout"] {
        width: calc(100% - 20px) !important;
        max-height: calc(100vh - 20px) !important;
        border-radius: 14px !important;
    }

    .ui-dialog[aria-describedby="timeout"] .ui-dialog-titlebar {
        min-height: 54px !important;
        padding: 9px 12px 9px 16px !important;
    }

    .ui-dialog[aria-describedby="timeout"] .ui-dialog-titlebar::before {
        font-size: 15px !important;
    }

    .ui-dialog[aria-describedby="timeout"] .ui-dialog-titlebar-close {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
    }

    .ui-dialog[aria-describedby="timeout"] #timeout.ui-dialog-content {
        max-height: calc(100vh - 190px) !important;
        padding: 25px 22px 21px !important;
    }

    .ui-dialog[aria-describedby="timeout"] #timeout.ui-dialog-content::before {
        width: 48px !important;
        height: 48px !important;
        margin-bottom: 17px !important;
        font-size: 26px !important;
    }

    .ui-dialog[aria-describedby="timeout"] #timeout h1 {
        margin-bottom: 10px !important;
        font-size: 26px !important;
    }

    .ui-dialog[aria-describedby="timeout"] #timeout p {
        font-size: 14px !important;
        line-height: 1.55 !important;
    }

    .ui-dialog[aria-describedby="timeout"] .ui-dialog-buttonpane {
        padding: 16px 22px 22px !important;
    }

    .ui-dialog[aria-describedby="timeout"] .ui-dialog-buttonpane button {
        min-height: 48px !important;
        padding: 12px 18px !important;
        border-radius: 8px !important;
    }
}


/* =========================================================
   12. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .ui-dialog[aria-describedby="timeout"] {
        animation: none !important;
    }

    .ui-dialog[aria-describedby="timeout"] .ui-dialog-titlebar-close,
    .ui-dialog[aria-describedby="timeout"] .ui-dialog-buttonpane button,
    #FormContentPlaceHolder_Panel_OpenOrders_salesOrderGrid tr.RowStyle > td:nth-child(1) > a {
        transition: none !important;
    }
}


/* =========================================================
   HOME PAGE - DYNAMIC-SAFE MEMBER DASHBOARD

   This module is designed for the RAMCO Home page markup,
   including cards and notices inserted after page load.

   Key behavior:
   - CSS automatically applies to elements added later by JS.
   - #topRow stays visible when alerts or notices are present.
   - Script-only validation wrappers do not create blank space.
   - Event styles apply only to cards containing recent-blog.
   - JS-created sponsorship/history cards receive their own style.
   - Inline padding, floats, margins, and widths are overridden.
   ========================================================= */

/* ---------- Page title ---------- */

body:has(#TwoColumnHomePageLayout) #introDiv {
    margin-bottom: 0 !important;
}

body:has(#TwoColumnHomePageLayout) #introDiv .page-title {
    padding-bottom: 16px !important;
    border-bottom: 1px solid var(--star-border, #e4e9ec) !important;
}

body:has(#TwoColumnHomePageLayout) #pageTitleDiv {
    margin: 0 !important;
    color: var(--star-navy, #21465f) !important;
    font-family: inherit !important;
    font-size: clamp(24px, 3vw, 30px) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.025em !important;
}

/* ---------- Main dashboard layout ---------- */

#TwoColumnHomePageLayout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 22px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 0 30px !important;
    box-sizing: border-box !important;
}

#TwoColumnHomePageLayout #topRow {
    display: block !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
}

/* Hide the row only when it truly contains no elements. */
#TwoColumnHomePageLayout #topRow:not(:has(*)) {
    display: none !important;
}

#TwoColumnHomePageLayout #leftMiddleContent,
#TwoColumnHomePageLayout #rightMiddleContent {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: start !important;
    gap: 22px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
}

/* =========================================================
   TOP-ROW ALERTS AND JS-GENERATED VALIDATION CONTENT
   ========================================================= */

#topMiddleContentPlaceHolder_ctl00_ValidationSummarySection {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

#topMiddleContentPlaceHolder_ctl00_ValidationSummarySection ul,
#topMiddleContentPlaceHolder_ctl00_ValidationSummarySection li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    box-sizing: border-box !important;
}

#topMiddleContentPlaceHolder_ctl00_ValidationSummarySection > ul {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
}

/* A script is stored inside the first validation item. Keep it in the
   document, but remove list spacing around its nonvisual wrappers. */
#topMiddleContentPlaceHolder_ctl00_ValidationSummarySection
> ul > li:has(script) {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    line-height: 0 !important;
}

#topMiddleContentPlaceHolder_ctl00_ValidationSummarySection
> ul > li:has(script)
span,
#topMiddleContentPlaceHolder_ctl00_ValidationSummarySection
> ul > li:has(script)
ul,
#topMiddleContentPlaceHolder_ctl00_ValidationSummarySection
> ul > li:has(script)
li {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    line-height: 0 !important;
}

/* Business Journal/member-benefit notice. */
#topMiddleContentPlaceHolder_ctl00_ValidationSummarySection
> ul > li:has([data-teams]) {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

#topMiddleContentPlaceHolder_ctl00_ValidationSummarySection
[data-teams],
#topMiddleContentPlaceHolder_ctl00_ValidationSummarySection
[data-teams] span,
#topMiddleContentPlaceHolder_ctl00_ValidationSummarySection
[data-teams] center {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    white-space: normal !important;
    text-align: left !important;
}

#topMiddleContentPlaceHolder_ctl00_ValidationSummarySection
[data-teams] p {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--star-text, #25333d) !important;
    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    white-space: normal !important;
}

/* Premier Strategic Partner banner. */
#topMiddleContentPlaceHolder_ctl00_ValidationSummarySection
.premier-member-banner {
    position: relative !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px 12px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 17px 20px !important;
    border: 1px solid rgba(245, 109, 115, 0.3) !important;
    border-left: 5px solid var(--star-coral, #f56d73) !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #fff5f5 0%, #ffffff 100%) !important;
    color: var(--star-text, #25333d) !important;
    box-shadow: 0 8px 22px rgba(23, 53, 72, 0.07) !important;
    box-sizing: border-box !important;
}

#topMiddleContentPlaceHolder_ctl00_ValidationSummarySection
.premier-member-banner strong {
    color: var(--star-coral-dark, #dc5961) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
}

#topMiddleContentPlaceHolder_ctl00_ValidationSummarySection
.premier-member-banner span {
    color: var(--star-text-muted, #64727c) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}
/* =========================================================
   ALERT PADDING AND ROUNDED CORNERS
   ========================================================= */

/* Ensure all RAMCO alert wrappers preserve the rounded shape. */
#topMiddleContentPlaceHolder_ctl00_ValidationSummarySection
> ul
> li
> span.successSummary,
#topMiddleContentPlaceHolder_ctl00_ValidationSummarySection
> ul
> li
> span.errorSummary {
    display: block !important;
    width: 100% !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

#topMiddleContentPlaceHolder_ctl00_ValidationSummarySection
span.successSummary > ul,
#topMiddleContentPlaceHolder_ctl00_ValidationSummarySection
span.errorSummary > ul {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: inherit !important;
    overflow: hidden !important;
    list-style: none !important;
    box-sizing: border-box !important;
}

/* Apply the visible shape directly to the alert box. */
#topMiddleContentPlaceHolder_ctl00_ValidationSummarySection
span.successSummary > ul > li.success:not(:has(script)),
#topMiddleContentPlaceHolder_ctl00_ValidationSummarySection
span.errorSummary > ul > li.error:not(:has(script)) {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 16px 18px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background-clip: padding-box !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
}

@media screen and (max-width: 639px) {
    #topMiddleContentPlaceHolder_ctl00_ValidationSummarySection
    > ul
    > li
    > span.successSummary,
    #topMiddleContentPlaceHolder_ctl00_ValidationSummarySection
    > ul
    > li
    > span.errorSummary,
    #topMiddleContentPlaceHolder_ctl00_ValidationSummarySection
    span.successSummary > ul > li.success:not(:has(script)),
    #topMiddleContentPlaceHolder_ctl00_ValidationSummarySection
    span.errorSummary > ul > li.error:not(:has(script)) {
        border-radius: 10px !important;
    }

    #topMiddleContentPlaceHolder_ctl00_ValidationSummarySection
    span.successSummary > ul > li.success:not(:has(script)),
    #topMiddleContentPlaceHolder_ctl00_ValidationSummarySection
    span.errorSummary > ul > li.error:not(:has(script)) {
        padding: 14px 15px !important;
    }
}
/* =========================================================
   SHARED HOME-PAGE CARD SURFACE
   ========================================================= */

#TwoColumnHomePageLayout #leftMiddleContent > .large-notice,
#TwoColumnHomePageLayout #rightMiddleContent > .large-notice {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 24px !important;
    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 78%, #fbfcfd 100%) !important;
    color: var(--star-text, #25333d) !important;
    box-shadow: var(
        --star-card-shadow,
        0 12px 30px rgba(23, 53, 72, 0.09),
        0 3px 8px rgba(23, 53, 72, 0.06)
    ) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

#TwoColumnHomePageLayout .large-notice h2 {
    color: var(--star-navy, #21465f) !important;
    font-family: inherit !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.015em !important;
}

#TwoColumnHomePageLayout .large-notice p,
#TwoColumnHomePageLayout .large-notice li,
#TwoColumnHomePageLayout .large-notice h5 {
    color: var(--star-text-muted, #64727c) !important;
    font-family: inherit !important;
}

/* Every card gets a top accent. More specific rules below choose color. */
#TwoColumnHomePageLayout #leftMiddleContent > .large-notice::before,
#TwoColumnHomePageLayout #rightMiddleContent > .large-notice::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 5px !important;
    background: linear-gradient(
        90deg,
        var(--star-navy, #21465f),
        var(--star-navy-light, #4faec3)
    ) !important;
}

/* =========================================================
   PROFILE CARD
   ========================================================= */

#TwoColumnHomePageLayout #leftMiddleContent
> .large-notice:has(a[href*="/Profile/Update/Form.aspx"]) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 104px !important;
    grid-template-areas: "profile-content profile-photo" !important;
    align-items: start !important;
    gap: 22px !important;
    padding-top: 28px !important;
}

#TwoColumnHomePageLayout #leftMiddleContent
> .large-notice:has(a[href*="/Profile/Update/Form.aspx"])
> div:has(> img) {
    grid-area: profile-photo !important;
    width: 104px !important;
    margin: 0 !important;
    float: none !important;
    justify-self: end !important;
}

#TwoColumnHomePageLayout #leftMiddleContent
> .large-notice:has(a[href*="/Profile/Update/Form.aspx"])
> div:has(> img) > img {
    display: block !important;
    width: 104px !important;
    height: 104px !important;
    max-width: none !important;
    object-fit: cover !important;
    border: 4px solid #ffffff !important;
    border-radius: 18px !important;
    background: var(--star-surface-soft, #f7f9fa) !important;
    box-shadow:
        0 10px 25px rgba(23, 53, 72, 0.16),
        0 0 0 1px rgba(33, 70, 95, 0.08) !important;
    box-sizing: border-box !important;
}

#TwoColumnHomePageLayout #leftMiddleContent
> .large-notice:has(a[href*="/Profile/Update/Form.aspx"])
> div:has(> h2) {
    grid-area: profile-content !important;
    min-width: 0 !important;
    margin: 0 !important;
    float: none !important;
}

#TwoColumnHomePageLayout #leftMiddleContent
> .large-notice:has(a[href*="/Profile/Update/Form.aspx"])
h2 {
    margin: 0 0 8px !important;
    font-size: 22px !important;
}

#TwoColumnHomePageLayout #leftMiddleContent
> .large-notice:has(a[href*="/Profile/Update/Form.aspx"])
ul.memberlinks {
    margin: 0 0 18px !important;
    padding: 0 !important;
    list-style: none !important;
}

#TwoColumnHomePageLayout #leftMiddleContent
> .large-notice:has(a[href*="/Profile/Update/Form.aspx"])
ul.memberlinks li {
    margin: 0 !important;
    padding: 1px 0 !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}

#TwoColumnHomePageLayout #leftMiddleContent
> .large-notice:has(a[href*="/Profile/Update/Form.aspx"])
ul.memberlinks li:first-child {
    color: var(--star-text, #25333d) !important;
    font-weight: 600 !important;
}

/* Correct and reinforce the page's inline COE-hiding rule. */
#TwoColumnHomePageLayout #leftMiddleContent
> .large-notice:has(a[href*="/Profile/Update/Form.aspx"])
ul.memberlinks li:nth-child(n + 3) {
    display: none !important;
}

#TwoColumnHomePageLayout #leftMiddleContent
> .large-notice:has(a[href*="/Profile/Update/Form.aspx"])
ul.plus-list {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

#TwoColumnHomePageLayout #leftMiddleContent
> .large-notice:has(a[href*="/Profile/Update/Form.aspx"])
a.button.small.color {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 10px 16px !important;
    border: 1px solid var(--star-navy, #21465f) !important;
    border-radius: 9px !important;
    background: linear-gradient(
        135deg,
        var(--star-navy, #21465f),
        var(--star-navy-dark, #173548)
    ) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 20px !important;
    text-align: center !important;
    text-decoration: none !important;
    text-shadow: none !important;
    box-shadow: 0 7px 16px rgba(33, 70, 95, 0.2) !important;
    box-sizing: border-box !important;
    transition:
        transform 0.12s ease,
        box-shadow 0.16s ease,
        background-color 0.16s ease !important;
}

#TwoColumnHomePageLayout #leftMiddleContent
> .large-notice:has(a[href*="/Profile/Update/Form.aspx"])
a.button.small.color:hover,
#TwoColumnHomePageLayout #leftMiddleContent
> .large-notice:has(a[href*="/Profile/Update/Form.aspx"])
a.button.small.color:focus {
    border-color: var(--star-navy-dark, #173548) !important;
    background: var(--star-navy-dark, #173548) !important;
    color: #ffffff !important;
    box-shadow: 0 9px 20px rgba(33, 70, 95, 0.27) !important;
    transform: translateY(-1px) !important;
    outline: 3px solid rgba(79, 174, 195, 0.22) !important;
    outline-offset: 2px !important;
}

/* =========================================================
   ACCOUNT BALANCE CARD
   ========================================================= */

#TwoColumnHomePageLayout #leftMiddleContent
> .large-notice:has(a[href*="/Sales/Orders.aspx"]) {
    padding-top: 28px !important;
    border-color: rgba(245, 109, 115, 0.24) !important;
    background: linear-gradient(
        145deg,
        #ffffff 0%,
        #fff9f9 100%
    ) !important;
}

#TwoColumnHomePageLayout #leftMiddleContent
> .large-notice:has(a[href*="/Sales/Orders.aspx"])::before {
    background: linear-gradient(
        90deg,
        var(--star-coral, #f56d73),
        #ff9a9f
    ) !important;
}

/* Account balance content layout. */
#TwoColumnHomePageLayout #leftMiddleContent
> .large-notice:has(a[href*="/Sales/Orders.aspx"])
> div {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    grid-template-areas:
        "balance-icon balance-title"
        "balance-icon balance-copy"
        "balance-icon balance-action" !important;
    align-items: start !important;
    column-gap: 16px !important;
    row-gap: 5px !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;

    float: none !important;
    box-sizing: border-box !important;
}

/* Account balance icon. */
#TwoColumnHomePageLayout #leftMiddleContent
> .large-notice:has(a[href*="/Sales/Orders.aspx"])
.large-notice-icon {
    grid-area: balance-icon !important;

    display: block !important;

    width: 54px !important;
    height: 54px !important;

    margin: 0 !important;
    padding: 10px !important;

    float: none !important;

    border-radius: 15px !important;
    background: var(--star-coral-light, #fff1f2) !important;

    object-fit: contain !important;
    box-sizing: border-box !important;
}

/* Account balance heading. */
#TwoColumnHomePageLayout #leftMiddleContent
> .large-notice:has(a[href*="/Sales/Orders.aspx"])
h2 {
    grid-area: balance-title !important;

    margin: 0 !important;

    font-size: 20px !important;
    line-height: 1.3 !important;
}

/* Account balance description. */
#TwoColumnHomePageLayout #leftMiddleContent
> .large-notice:has(a[href*="/Sales/Orders.aspx"])
p {
    grid-area: balance-copy !important;

    margin: 0 !important;
    padding: 0 0 8px !important;

    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* Payment action container. */
#TwoColumnHomePageLayout #leftMiddleContent
> .large-notice:has(a[href*="/Sales/Orders.aspx"])
> div
> div:has(> a[href*="/Sales/Orders.aspx"]) {
    grid-area: balance-action !important;

    margin: 0 !important;
    padding: 0 !important;
}

/* Payment button. */
#TwoColumnHomePageLayout #leftMiddleContent
> .large-notice:has(a[href*="/Sales/Orders.aspx"])
a.button.small.color {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 44px !important;

    margin: 0 !important;
    padding: 11px 17px !important;

    border: 1px solid var(--star-navy, #21465f) !important;
    border-radius: 9px !important;

    background: linear-gradient(
        135deg,
        var(--star-navy, #21465f),
        var(--star-navy-dark, #173548)
    ) !important;

    color: #ffffff !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 20px !important;

    text-align: center !important;
    text-decoration: none !important;
    text-shadow: none !important;

    box-shadow:
        0 8px 18px rgba(33, 70, 95, 0.25) !important;

    box-sizing: border-box !important;

    transition:
        transform 0.12s ease,
        box-shadow 0.16s ease,
        filter 0.16s ease !important;
}

/* Payment button hover and keyboard focus. */
#TwoColumnHomePageLayout #leftMiddleContent
> .large-notice:has(a[href*="/Sales/Orders.aspx"])
a.button.small.color:hover,
#TwoColumnHomePageLayout #leftMiddleContent
> .large-notice:has(a[href*="/Sales/Orders.aspx"])
a.button.small.color:focus {
    border-color: var(--star-navy-dark, #173548) !important;

    background: var(--star-navy-dark, #173548) !important;
    color: #ffffff !important;

    box-shadow:
        0 10px 22px rgba(33, 70, 95, 0.34) !important;

    transform: translateY(-1px) !important;

    outline: 3px solid rgba(79, 174, 195, 0.24) !important;
    outline-offset: 2px !important;
}

/* =========================================================
   JS-CREATED SPONSORSHIP / HISTORY ACTION CARDS
   ========================================================= */

#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice:has(button.button.small.color) {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 28px !important;
    border-color: rgba(245, 109, 115, 0.24) !important;
    background: linear-gradient(145deg, #ffffff 0%, #fff8f8 100%) !important;
}

#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice:has(button.button.small.color)::before {
    background: linear-gradient(
        90deg,
        var(--star-coral, #f56d73),
        #ff9a9f
    ) !important;
}

/* Overrides JS inline float, margin-left, and the 65.5px padding. */
#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice:has(button.button.small.color)
> div {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice:has(button.button.small.color)
h2 {
    margin: 0 0 9px !important;
    color: var(--star-navy, #21465f) !important;
    font-size: 21px !important;
}

#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice:has(button.button.small.color)
p {
    margin: 12px 0 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}

/* The JS currently creates a button containing an anchor. These rules
   make the nested structure render as one consistent action control. */
#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice:has(button.button.small.color)
button.button.small.color {
    display: inline-flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    min-height: 44px !important;
    margin: 14px 10px 0 0 !important;
    padding: 0 !important;
    border: 1px solid var(--star-coral, #f56d73) !important;
    border-radius: 9px !important;
    background: linear-gradient(
        135deg,
        var(--star-coral, #f56d73),
        #f77f84
    ) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(245, 109, 115, 0.25) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
}

#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice:has(button.button.small.color)
button.button.small.color > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    padding: 10px 16px !important;
    color: #ffffff !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 20px !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: normal !important;
    box-sizing: border-box !important;
}

#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice:has(button.button.small.color)
button.button.small.color > br {
    display: none !important;
}

#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice:has(button.button.small.color)
button.button.small.color:hover,
#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice:has(button.button.small.color)
button.button.small.color:focus-within {
    border-color: var(--star-coral-dark, #dc5961) !important;
    background: var(--star-coral-dark, #dc5961) !important;
    box-shadow: 0 10px 22px rgba(245, 109, 115, 0.34) !important;
    transform: translateY(-1px) !important;
    outline: 3px solid rgba(245, 109, 115, 0.22) !important;
    outline-offset: 2px !important;
}
/* =========================================================
   OFFICE / ORGANIZATION CARDS
   ========================================================= */

#TwoColumnHomePageLayout
.large-notice:has(.tile-content) {
    padding-top: 28px !important;
}

/* Reset the RAMCO list wrapping the organization cards. */
#TwoColumnHomePageLayout
.large-notice:has(.tile-content)
> ul {
    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;

    list-style: none !important;
    box-sizing: border-box !important;
}

/* Shared organization-card layout. */
#TwoColumnHomePageLayout
.large-notice:has(.tile-content)
.tile-content {
    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;

    box-sizing: border-box !important;
}

/* The first card does not need additional spacing. */
#TwoColumnHomePageLayout
.large-notice:has(.tile-content)
.tile-content:first-child {
    padding: 0 !important;
}

/* Separate every additional organization card. */
#TwoColumnHomePageLayout
.large-notice:has(.tile-content)
.tile-content + .tile-content {
    margin: 22px 0 0 !important;
    padding: 22px 0 0 !important;

    border-top: 1px solid
        var(--star-border, #e4e9ec) !important;
}

#TwoColumnHomePageLayout
.large-notice:has(.tile-content)
.tile-content > h2 {
    margin: 0 0 10px !important;

    font-size: 20px !important;
    line-height: 1.3 !important;
}

#TwoColumnHomePageLayout
.large-notice:has(.tile-content)
.tile-content > p {
    margin: 0 0 7px !important;
    padding: 0 !important;

    font-size: 14px !important;
    line-height: 1.55 !important;
}

/* Organization action buttons. */
#TwoColumnHomePageLayout
.large-notice:has(.tile-content)
.tile-content > ul.plus-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 9px !important;

    margin: 16px 0 0 !important;
    padding: 0 !important;

    list-style: none !important;
}

#TwoColumnHomePageLayout
.large-notice:has(.tile-content)
.tile-content > ul.plus-list > li {
    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}

/* Hide empty placeholder links generated by RAMCO. */
#TwoColumnHomePageLayout
.large-notice:has(.tile-content)
.tile-content
> ul.plus-list
> li:has(> a[href="#"]:empty) {
    display: none !important;
}

/* Office and membership action links. */
#TwoColumnHomePageLayout
.large-notice:has(.tile-content)
.tile-content
> ul.plus-list
> li
> a:not(:empty) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 38px !important;

    padding: 8px 13px !important;

    border: 1px solid rgba(33, 70, 95, 0.18) !important;
    border-radius: 8px !important;

    background:
        var(--star-surface-soft, #f7f9fa) !important;

    color: var(--star-navy, #21465f) !important;

    font-size: 12.5px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;

    text-align: center !important;
    text-decoration: none !important;

    box-sizing: border-box !important;
}

/* Office and membership action link interaction. */
#TwoColumnHomePageLayout
.large-notice:has(.tile-content)
.tile-content
> ul.plus-list
> li
> a:not(:empty):hover,
#TwoColumnHomePageLayout
.large-notice:has(.tile-content)
.tile-content
> ul.plus-list
> li
> a:not(:empty):focus {
    border-color:
        var(--star-navy-light, #4faec3) !important;

    background: #ffffff !important;
    color: var(--star-navy-dark, #173548) !important;

    outline:
        3px solid rgba(79, 174, 195, 0.18) !important;
    outline-offset: 2px !important;
}
/* =========================================================
   UPCOMING EVENTS CARD
   ========================================================= */

#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice:has(article.recent-blog) {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    grid-template-areas:
        "events-icon events-title"
        "events-list events-list" !important;
    align-content: start !important;
    column-gap: 16px !important;
    row-gap: 4px !important;
    min-height: 0 !important;
    height: auto !important;
    padding-top: 28px !important;
}

#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice:has(article.recent-blog)::before {
    background: linear-gradient(
        90deg,
        var(--star-navy-light, #4faec3),
        var(--star-navy, #21465f)
    ) !important;
}

#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice:has(article.recent-blog)
> .large-notice-icon {
    grid-area: events-icon !important;
    display: block !important;
    width: 54px !important;
    height: 54px !important;
    margin: 0 !important;
    padding: 9px !important;
    float: none !important;
    border-radius: 15px !important;
    background: rgba(79, 174, 195, 0.12) !important;
    object-fit: contain !important;
    box-sizing: border-box !important;
}

#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice:has(article.recent-blog)
> h2 {
    grid-area: events-title !important;
    align-self: center !important;
    margin: 0 !important;
    font-size: 22px !important;
}

#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice:has(article.recent-blog)
> ul {
    grid-area: events-list !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice:has(article.recent-blog)
> ul > li {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

#TwoColumnHomePageLayout article.recent-blog {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 15px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 14px 15px !important;
    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-radius: 13px !important;
    background: #ffffff !important;
    box-shadow: 0 3px 10px rgba(23, 53, 72, 0.045) !important;
    box-sizing: border-box !important;
    transition:
        transform 0.14s ease,
        border-color 0.16s ease,
        box-shadow 0.16s ease !important;
}

#TwoColumnHomePageLayout article.recent-blog:hover {
    border-color: rgba(79, 174, 195, 0.42) !important;
    box-shadow: 0 8px 18px rgba(23, 53, 72, 0.09) !important;
    transform: translateY(-1px) !important;
}

#TwoColumnHomePageLayout article.recent-blog > section.date {
    position: static !important;
    display: grid !important;
    grid-template-rows: auto auto !important;
    width: 56px !important;
    min-width: 56px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    border: 1px solid rgba(33, 70, 95, 0.12) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

#TwoColumnHomePageLayout article.recent-blog > section.date .day,
#TwoColumnHomePageLayout article.recent-blog > section.date .month {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

#TwoColumnHomePageLayout article.recent-blog > section.date .day {
    padding: 8px 5px 5px !important;
    background: var(--star-surface-soft, #f7f9fa) !important;
    color: var(--star-navy, #21465f) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
}

#TwoColumnHomePageLayout article.recent-blog > section.date .month {
    padding: 5px !important;
    background: var(--star-coral, #f56d73) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}

#TwoColumnHomePageLayout article.recent-blog > a {
    display: block !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    text-decoration: none !important;
}

#TwoColumnHomePageLayout article.recent-blog > a > div {
    min-width: 0 !important;
}

#TwoColumnHomePageLayout article.recent-blog h4 {
    display: block !important;
    margin: 1px 0 6px !important;
    color: var(--star-navy, #21465f) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    overflow-wrap: anywhere !important;
}

#TwoColumnHomePageLayout article.recent-blog h5 {
    display: block !important;
    margin: 0 !important;
    color: var(--star-text-muted, #64727c) !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    overflow-wrap: anywhere !important;
}

#TwoColumnHomePageLayout article.recent-blog p:empty {
    display: none !important;
}

#TwoColumnHomePageLayout article.recent-blog a:hover h4,
#TwoColumnHomePageLayout article.recent-blog a:focus h4 {
    color: var(--star-coral-dark, #dc5961) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}

/* =========================================================
   DESKTOP
   ========================================================= */

@media screen and (min-width: 960px) {
    #TwoColumnHomePageLayout {
        grid-template-columns:
            minmax(300px, 0.9fr)
            minmax(0, 1.25fr) !important;
        align-items: start !important;
        gap: 24px !important;

        /*
         * Restore an outside gutter around the dashboard.
         * Width must be auto so the margins do not create
         * horizontal overflow.
         */
        width: auto !important;
        margin-left: 16px !important;
        margin-right: 16px !important;
    }

    #TwoColumnHomePageLayout #topRow {
        grid-column: 1 / -1 !important;
    }

    #TwoColumnHomePageLayout #leftMiddleContent,
    #TwoColumnHomePageLayout #rightMiddleContent,
    #TwoColumnHomePageLayout #rightMiddleContent > .large-notice {
        min-height: 0 !important;
        height: auto !important;
    }
}

@media screen and (min-width: 1180px) {
    #TwoColumnHomePageLayout {
        grid-template-columns:
            minmax(330px, 0.82fr)
            minmax(0, 1.38fr) !important;
        gap: 28px !important;
    }

    #TwoColumnHomePageLayout #leftMiddleContent > .large-notice,
    #TwoColumnHomePageLayout #rightMiddleContent > .large-notice {
        padding: 28px !important;
    }
}
/* =========================================================
   TABLET
   ========================================================= */

@media screen and (min-width: 640px) and (max-width: 959px) {
    #TwoColumnHomePageLayout #leftMiddleContent {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: stretch !important;
    }

    #TwoColumnHomePageLayout #leftMiddleContent
    > .large-notice:has(.tile-content) {
        grid-column: 1 / -1 !important;
    }

    #TwoColumnHomePageLayout #leftMiddleContent
    > .large-notice:has(a[href*="/Profile/Update/Form.aspx"]) {
        grid-template-columns: minmax(0, 1fr) 82px !important;
        gap: 16px !important;
    }

    #TwoColumnHomePageLayout #leftMiddleContent
    > .large-notice:has(a[href*="/Profile/Update/Form.aspx"])
    > div:has(> img) {
        width: 82px !important;
    }

    #TwoColumnHomePageLayout #leftMiddleContent
    > .large-notice:has(a[href*="/Profile/Update/Form.aspx"])
    > div:has(> img) > img {
        width: 82px !important;
        height: 82px !important;
        border-radius: 15px !important;
    }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 639px) {
    #TwoColumnHomePageLayout {
        gap: 16px !important;
        padding-bottom: 22px !important;
    }

    #TwoColumnHomePageLayout #leftMiddleContent,
    #TwoColumnHomePageLayout #rightMiddleContent {
        gap: 16px !important;
    }

    #TwoColumnHomePageLayout #leftMiddleContent > .large-notice,
    #TwoColumnHomePageLayout #rightMiddleContent > .large-notice {
        padding: 19px !important;
        border-radius: 15px !important;
    }

    #topMiddleContentPlaceHolder_ctl00_ValidationSummarySection
    > ul
    > li:has([data-teams]) {
        padding: 0 !important;
    }

    #topMiddleContentPlaceHolder_ctl00_ValidationSummarySection
    .premier-member-banner {
        display: block !important;
        padding: 15px 16px !important;
    }

    #topMiddleContentPlaceHolder_ctl00_ValidationSummarySection
    .premier-member-banner strong,
    #topMiddleContentPlaceHolder_ctl00_ValidationSummarySection
    .premier-member-banner span {
        display: block !important;
    }

    #topMiddleContentPlaceHolder_ctl00_ValidationSummarySection
    .premier-member-banner strong {
        margin-bottom: 4px !important;
    }

    #TwoColumnHomePageLayout #leftMiddleContent
    > .large-notice:has(a[href*="/Profile/Update/Form.aspx"]) {
        grid-template-columns: 76px minmax(0, 1fr) !important;
        grid-template-areas: "profile-photo profile-content" !important;
        gap: 16px !important;
        padding-top: 23px !important;
    }

    #TwoColumnHomePageLayout #leftMiddleContent
    > .large-notice:has(a[href*="/Profile/Update/Form.aspx"])
    > div:has(> img) {
        width: 76px !important;
        justify-self: start !important;
    }

    #TwoColumnHomePageLayout #leftMiddleContent
    > .large-notice:has(a[href*="/Profile/Update/Form.aspx"])
    > div:has(> img) > img {
        width: 76px !important;
        height: 76px !important;
        border-width: 3px !important;
        border-radius: 14px !important;
    }

    #TwoColumnHomePageLayout #leftMiddleContent
    > .large-notice:has(a[href*="/Profile/Update/Form.aspx"])
    h2 {
        font-size: 19px !important;
    }

    #TwoColumnHomePageLayout #leftMiddleContent
    > .large-notice:has(a[href*="/Profile/Update/Form.aspx"])
    ul.memberlinks li {
        font-size: 13px !important;
    }

    #TwoColumnHomePageLayout #leftMiddleContent
    > .large-notice:has(a[href*="/Profile/Update/Form.aspx"])
    a.button.small.color,
    #TwoColumnHomePageLayout #leftMiddleContent
    > .large-notice:has(a[href*="/Sales/Orders.aspx"])
    a.button.small.color,
    #TwoColumnHomePageLayout #rightMiddleContent
    > .large-notice:has(button.button.small.color)
    button.button.small.color {
        width: 100% !important;
    }

    #TwoColumnHomePageLayout #rightMiddleContent
    > .large-notice:has(button.button.small.color)
    button.button.small.color {
        margin-right: 0 !important;
    }

    #TwoColumnHomePageLayout #rightMiddleContent
    > .large-notice:has(button.button.small.color)
    button.button.small.color > a {
        width: 100% !important;
    }

    #TwoColumnHomePageLayout #leftMiddleContent
    > .large-notice:has(a[href*="/Sales/Orders.aspx"])
    > div {
        grid-template-columns: 50px minmax(0, 1fr) !important;
        column-gap: 13px !important;
    }

    #TwoColumnHomePageLayout #leftMiddleContent
    > .large-notice:has(a[href*="/Sales/Orders.aspx"])
    .large-notice-icon {
        width: 48px !important;
        height: 48px !important;
        padding: 8px !important;
        border-radius: 13px !important;
    }

    #TwoColumnHomePageLayout #leftMiddleContent
    > .large-notice:has(a[href*="/Sales/Orders.aspx"])
    h2,
    #TwoColumnHomePageLayout #rightMiddleContent
    > .large-notice:has(article.recent-blog)
    > h2 {
        font-size: 19px !important;
    }

    #TwoColumnHomePageLayout #rightMiddleContent
    > .large-notice:has(article.recent-blog) {
        grid-template-columns: 50px minmax(0, 1fr) !important;
        column-gap: 13px !important;
        padding-top: 23px !important;
    }

    #TwoColumnHomePageLayout #rightMiddleContent
    > .large-notice:has(article.recent-blog)
    > .large-notice-icon {
        width: 48px !important;
        height: 48px !important;
        padding: 8px !important;
        border-radius: 13px !important;
    }

    #TwoColumnHomePageLayout #rightMiddleContent
    > .large-notice:has(article.recent-blog)
    > ul {
        margin-top: 14px !important;
        gap: 10px !important;
    }

    #TwoColumnHomePageLayout article.recent-blog {
        grid-template-columns: 50px minmax(0, 1fr) !important;
        gap: 12px !important;
        padding: 12px !important;
        border-radius: 11px !important;
    }

    #TwoColumnHomePageLayout article.recent-blog > section.date {
        width: 50px !important;
        min-width: 50px !important;
        border-radius: 10px !important;
    }

    #TwoColumnHomePageLayout article.recent-blog h4 {
        font-size: 14px !important;
    }

    #TwoColumnHomePageLayout article.recent-blog h5 {
        font-size: 12px !important;
    }

    #TwoColumnHomePageLayout .large-notice:has(.tile-content)
    ul.plus-list {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    #TwoColumnHomePageLayout .large-notice:has(.tile-content)
    ul.plus-list a:not(:empty) {
        width: 100% !important;
    }
}

/* =========================================================
   VERY NARROW PHONES
   ========================================================= */

@media screen and (max-width: 390px) {
    #TwoColumnHomePageLayout #leftMiddleContent
    > .large-notice:has(a[href*="/Profile/Update/Form.aspx"]) {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "profile-photo"
            "profile-content" !important;
    }

    #TwoColumnHomePageLayout #leftMiddleContent
    > .large-notice:has(a[href*="/Profile/Update/Form.aspx"])
    > div:has(> img) {
        width: 84px !important;
    }

    #TwoColumnHomePageLayout #leftMiddleContent
    > .large-notice:has(a[href*="/Profile/Update/Form.aspx"])
    > div:has(> img) > img {
        width: 84px !important;
        height: 84px !important;
    }

    #TwoColumnHomePageLayout #leftMiddleContent
    > .large-notice:has(a[href*="/Sales/Orders.aspx"])
    > div {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "balance-icon"
            "balance-title"
            "balance-copy"
            "balance-action" !important;
    }

    #TwoColumnHomePageLayout #rightMiddleContent
    > .large-notice:has(article.recent-blog) {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "events-icon"
            "events-title"
            "events-list" !important;
    }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    #TwoColumnHomePageLayout .button.small.color,
    #TwoColumnHomePageLayout button.button.small.color,
    #TwoColumnHomePageLayout article.recent-blog {
        transition: none !important;
    }
}

/* =========================================================
   STAR PORTAL — PAGINATION CORRECTION

   Why this exists:
   RAMCO outputs the active page as a direct <span> in whichever
   page cell is current. The earlier selector assumed that the
   active page was always in the first cell, which fails on page 2+
   and can make the pager look partially unstyled.

   This module safely styles:
   - My Orders > Order History pager
   - Committee grid pager
   - Any current page, regardless of its position
   ========================================================= */

/* ---------- Shared pager containers ---------- */

#FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid
.PagerStyle > td,
#FormContentPlaceHolder_panel_Grid
.PagerStyle > td {
    padding: 14px 18px !important;
    border: 0 !important;
    border-top: 1px solid var(--star-border, #e4e9ec) !important;
    background: var(--star-surface-soft, #f7f9fa) !important;
    box-sizing: border-box !important;
}

#FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid
.PagerStyle > td > table,
#FormContentPlaceHolder_panel_Grid
.PagerStyle > td > table,
#FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid
.PagerStyle > td > table > tbody,
#FormContentPlaceHolder_panel_Grid
.PagerStyle > td > table > tbody {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

#FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid
.PagerStyle > td > table > tbody > tr,
#FormContentPlaceHolder_panel_Grid
.PagerStyle > td > table > tbody > tr {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 8px !important;
}

#FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid
.PagerStyle > td > table > tbody > tr > td,
#FormContentPlaceHolder_panel_Grid
.PagerStyle > td > table > tbody > tr > td {
    display: block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--star-text-muted, #64727c) !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    box-sizing: border-box !important;
}

/* ---------- Page-number buttons ---------- */

/* A linked page number, such as <a>1</a>. */
#FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid
.PagerStyle > td > table > tbody > tr > td > a,
#FormContentPlaceHolder_panel_Grid
.PagerStyle > td > table > tbody > tr > td > a,

/* The active page, such as <span>2</span>. This direct-child
   selector deliberately excludes "Page Size" and item-count spans. */
#FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid
.PagerStyle > td > table > tbody > tr > td > span,
#FormContentPlaceHolder_panel_Grid
.PagerStyle > td > table > tbody > tr > td > span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 10px !important;
    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: var(--star-navy, #21465f) !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-decoration: none !important;
    box-shadow: 0 2px 5px rgba(23, 53, 72, 0.06) !important;
    box-sizing: border-box !important;
}

#FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid
.PagerStyle > td > table > tbody > tr > td > a:hover,
#FormContentPlaceHolder_panel_Grid
.PagerStyle > td > table > tbody > tr > td > a:hover {
    border-color: var(--star-navy-light, #4faec3) !important;
    background: rgba(79, 174, 195, 0.1) !important;
    color: var(--star-navy-dark, #173548) !important;
    text-decoration: none !important;
    transform: translateY(-1px) !important;
}

#FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid
.PagerStyle > td > table > tbody > tr > td > a:focus,
#FormContentPlaceHolder_panel_Grid
.PagerStyle > td > table > tbody > tr > td > a:focus {
    border-color: var(--star-navy-light, #4faec3) !important;
    outline: 3px solid rgba(79, 174, 195, 0.24) !important;
    outline-offset: 2px !important;
}

/* The current page can be in the first, second, third, or later cell. */
#FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid
.PagerStyle > td > table > tbody > tr > td > span,
#FormContentPlaceHolder_panel_Grid
.PagerStyle > td > table > tbody > tr > td > span {
    border-color: var(--star-coral, #f56d73) !important;
    background: linear-gradient(
        135deg,
        var(--star-coral, #f56d73),
        #f77f84
    ) !important;
    color: #ffffff !important;
    box-shadow: 0 5px 12px rgba(245, 109, 115, 0.22) !important;
}

/* ---------- Page-size control ---------- */

/* The page-size cell is always the second-to-last cell. */
#FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid
.PagerStyle > td > table > tbody > tr > td:nth-last-child(2),
#FormContentPlaceHolder_panel_Grid
.PagerStyle > td > table > tbody > tr > td:nth-last-child(2) {
    flex: 0 1 auto !important;
    margin-left: auto !important;
}

#FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid
.PagerStyle > td > table > tbody > tr > td:nth-last-child(2) > div,
#FormContentPlaceHolder_panel_Grid
.PagerStyle > td > table > tbody > tr > td:nth-last-child(2) > div {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    min-width: 0 !important;
    gap: 8px !important;
    color: var(--star-text-muted, #64727c) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

#FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid
.PagerStyle select,
#FormContentPlaceHolder_panel_Grid
.PagerStyle select {
    min-width: 78px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 7px 32px 7px 11px !important;
    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
    color: var(--star-text, #25333d) !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    box-shadow: 0 2px 5px rgba(23, 53, 72, 0.05) !important;
    box-sizing: border-box !important;
}

#FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid
.PagerStyle select:focus,
#FormContentPlaceHolder_panel_Grid
.PagerStyle select:focus {
    border-color: var(--star-navy-light, #4faec3) !important;
    outline: 3px solid rgba(79, 174, 195, 0.2) !important;
    outline-offset: 1px !important;
}

/* ---------- Item count ---------- */

/* The item-count cell is always the final cell. */
#FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid
.PagerStyle > td > table > tbody > tr > td:last-child,
#FormContentPlaceHolder_panel_Grid
.PagerStyle > td > table > tbody > tr > td:last-child {
    flex: 0 1 auto !important;
    margin-left: 4px !important;
}

#FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid
.PagerStyle > td > table > tbody > tr > td:last-child > div,
#FormContentPlaceHolder_panel_Grid
.PagerStyle > td > table > tbody > tr > td:last-child > div {
    width: auto !important;
    min-width: 0 !important;
    color: var(--star-text-muted, #64727c) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    text-align: right !important;
    white-space: nowrap !important;
}

/* ---------- Mobile pager layout ---------- */

@media screen and (max-width: 767px),
       screen and (max-device-width: 767px) {
    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid
    .PagerStyle > td,
    #FormContentPlaceHolder_panel_Grid
    .PagerStyle > td {
        margin-top: 4px !important;
        padding: 14px !important;
        border: 1px solid var(--star-border, #e4e9ec) !important;
        border-radius: 14px !important;
        background: var(--star-surface-soft, #f7f9fa) !important;
    }

    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid
    .PagerStyle > td > table > tbody > tr,
    #FormContentPlaceHolder_panel_Grid
    .PagerStyle > td > table > tbody > tr {
        align-items: center !important;
        gap: 8px !important;
    }

    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid
    .PagerStyle > td > table > tbody > tr > td:nth-last-child(2),
    #FormContentPlaceHolder_panel_Grid
    .PagerStyle > td > table > tbody > tr > td:nth-last-child(2),
    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid
    .PagerStyle > td > table > tbody > tr > td:last-child,
    #FormContentPlaceHolder_panel_Grid
    .PagerStyle > td > table > tbody > tr > td:last-child {
        flex: 1 1 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
    }

    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid
    .PagerStyle > td > table > tbody > tr > td:nth-last-child(2),
    #FormContentPlaceHolder_panel_Grid
    .PagerStyle > td > table > tbody > tr > td:nth-last-child(2) {
        padding-top: 8px !important;
    }

    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid
    .PagerStyle > td > table > tbody > tr > td:nth-last-child(2) > div,
    #FormContentPlaceHolder_panel_Grid
    .PagerStyle > td > table > tbody > tr > td:nth-last-child(2) > div {
        display: flex !important;
        justify-content: space-between !important;
        width: 100% !important;
        white-space: normal !important;
    }

    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid
    .PagerStyle > td > table > tbody > tr > td:last-child > div,
    #FormContentPlaceHolder_panel_Grid
    .PagerStyle > td > table > tbody > tr > td:last-child > div {
        width: 100% !important;
        padding-top: 2px !important;
        text-align: left !important;
        white-space: normal !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #FormContentPlaceHolder_Panel_FulfilledOrders_salesOrderGrid
    .PagerStyle > td > table > tbody > tr > td > a,
    #FormContentPlaceHolder_panel_Grid
    .PagerStyle > td > table > tbody > tr > td > a {
        transition: none !important;
        transform: none !important;
    }
}


/* =========================================================
   HOME PAGE — JAVASCRIPT-GENERATED ACTION CARDS

   Append this module after the existing Home-page styles.
   CSS automatically applies when JavaScript inserts matching
   elements later. The legacy selectors also support the old
   script until it is replaced.
   ========================================================= */

/* Shared surface: new class-based markup plus the legacy markup. */
#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice.star-generated-card,
#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice:has(a[href*="Sponsorship+Opportunity"]),
#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice:has(a[href*="/Education/History/MyClasses.aspx"]),
#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice:has(a[href*="/Meetings/MyMeetings.aspx"]) {
    position: relative !important;
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;

    margin: 0 !important;
    padding: 28px !important;

    border: 1px solid rgba(245, 109, 115, 0.24) !important;
    border-radius: 18px !important;

    background: linear-gradient(
        145deg,
        #ffffff 0%,
        #fff8f8 100%
    ) !important;

    color: var(--star-text, #25333d) !important;

    box-shadow: var(
        --star-card-shadow,
        0 12px 30px rgba(23, 53, 72, 0.09),
        0 3px 8px rgba(23, 53, 72, 0.06)
    ) !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Coral top accent. */
#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice.star-generated-card::before,
#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice:has(a[href*="Sponsorship+Opportunity"])::before,
#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice:has(a[href*="/Education/History/MyClasses.aspx"])::before,
#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice:has(a[href*="/Meetings/MyMeetings.aspx"])::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 5px !important;
    background: linear-gradient(
        90deg,
        var(--star-coral, #f56d73),
        #ff9a9f
    ) !important;
}

/* Use a navy/blue accent for the history card. */
#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice.star-history-card::before {
    background: linear-gradient(
        90deg,
        var(--star-navy, #21465f),
        var(--star-navy-light, #4faec3)
    ) !important;
}

/* Override the inline float, margin, and padding from the old script. */
#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice.star-generated-card > .star-card-content,
#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice.star-generated-card > div,
#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice:has(a[href*="Sponsorship+Opportunity"]) > div,
#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice:has(a[href*="/Education/History/MyClasses.aspx"]) > div,
#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice:has(a[href*="/Meetings/MyMeetings.aspx"]) > div {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
}

#TwoColumnHomePageLayout .star-generated-card .star-card-title,
#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice:has(a[href*="Sponsorship+Opportunity"]) h2,
#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice:has(a[href*="/Education/History/MyClasses.aspx"]) h2,
#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice:has(a[href*="/Meetings/MyMeetings.aspx"]) h2 {
    margin: 0 0 10px !important;
    color: var(--star-navy, #21465f) !important;
    font-family: inherit !important;
    font-size: 21px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.015em !important;
}

#TwoColumnHomePageLayout .star-generated-card .star-card-copy,
#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice:has(a[href*="Sponsorship+Opportunity"]) p,
#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice:has(a[href*="/Education/History/MyClasses.aspx"]) p,
#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice:has(a[href*="/Meetings/MyMeetings.aspx"]) p {
    margin: 0 0 14px !important;
    padding: 0 !important;
    color: var(--star-text-muted, #64727c) !important;
    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}

#TwoColumnHomePageLayout .star-generated-card .star-card-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 16px 0 0 !important;
    padding: 0 !important;
}

#TwoColumnHomePageLayout .star-generated-card .star-card-action-group {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: start !important;
    gap: 8px !important;
    flex: 1 1 220px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

#TwoColumnHomePageLayout .star-generated-card
.star-card-action-group .star-card-copy {
    margin: 0 !important;
}

/* New markup: the anchor itself is the button. */
#TwoColumnHomePageLayout .star-generated-card a.star-card-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 46px !important;
    padding: 11px 17px !important;

    border: 1px solid var(--star-coral, #f56d73) !important;
    border-radius: 9px !important;

    background: linear-gradient(
        135deg,
        var(--star-coral, #f56d73),
        #f77f84
    ) !important;

    color: #ffffff !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 20px !important;
    text-align: center !important;
    text-decoration: none !important;
    text-shadow: none !important;
    white-space: normal !important;

    box-shadow: 0 8px 18px rgba(245, 109, 115, 0.25) !important;
    cursor: pointer !important;
    box-sizing: border-box !important;

    transition:
        transform 0.12s ease,
        box-shadow 0.16s ease,
        background-color 0.16s ease !important;
}

#TwoColumnHomePageLayout .star-generated-card
a.star-card-action:hover,
#TwoColumnHomePageLayout .star-generated-card
a.star-card-action:focus {
    border-color: var(--star-coral-dark, #dc5961) !important;
    background: var(--star-coral-dark, #dc5961) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(245, 109, 115, 0.34) !important;
    transform: translateY(-1px) !important;
    outline: 3px solid rgba(245, 109, 115, 0.22) !important;
    outline-offset: 2px !important;
}

#TwoColumnHomePageLayout .star-generated-card
a.star-card-action:active {
    transform: translateY(1px) !important;
}

/* Legacy markup: button containing an anchor. */
#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice:has(a[href*="Sponsorship+Opportunity"])
button.button.small.color,
#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice:has(a[href*="/Education/History/MyClasses.aspx"])
button.button.small.color,
#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice:has(a[href*="/Meetings/MyMeetings.aspx"])
button.button.small.color {
    display: inline-flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;

    min-height: 46px !important;
    margin: 14px 10px 0 0 !important;
    padding: 0 !important;

    border: 1px solid var(--star-coral, #f56d73) !important;
    border-radius: 9px !important;

    background: linear-gradient(
        135deg,
        var(--star-coral, #f56d73),
        #f77f84
    ) !important;

    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(245, 109, 115, 0.25) !important;
    overflow: hidden !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice:has(a[href*="Sponsorship+Opportunity"])
button.button.small.color > a,
#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice:has(a[href*="/Education/History/MyClasses.aspx"])
button.button.small.color > a,
#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice:has(a[href*="/Meetings/MyMeetings.aspx"])
button.button.small.color > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 44px !important;
    padding: 11px 17px !important;

    color: #ffffff !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 20px !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: normal !important;
    box-sizing: border-box !important;
}

#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice:has(a[href*="Sponsorship+Opportunity"])
button.button.small.color > br,
#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice:has(a[href*="/Education/History/MyClasses.aspx"])
button.button.small.color > br,
#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice:has(a[href*="/Meetings/MyMeetings.aspx"])
button.button.small.color > br {
    display: none !important;
}

#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice:has(a[href*="Sponsorship+Opportunity"])
button.button.small.color:hover,
#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice:has(a[href*="Sponsorship+Opportunity"])
button.button.small.color:focus-within,
#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice:has(a[href*="/Education/History/MyClasses.aspx"])
button.button.small.color:hover,
#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice:has(a[href*="/Education/History/MyClasses.aspx"])
button.button.small.color:focus-within,
#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice:has(a[href*="/Meetings/MyMeetings.aspx"])
button.button.small.color:hover,
#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice:has(a[href*="/Meetings/MyMeetings.aspx"])
button.button.small.color:focus-within {
    border-color: var(--star-coral-dark, #dc5961) !important;
    background: var(--star-coral-dark, #dc5961) !important;
    box-shadow: 0 10px 22px rgba(245, 109, 115, 0.34) !important;
    transform: translateY(-1px) !important;
    outline: 3px solid rgba(245, 109, 115, 0.22) !important;
    outline-offset: 2px !important;
}

@media screen and (max-width: 639px) {
    #TwoColumnHomePageLayout #rightMiddleContent
    > .large-notice.star-generated-card,
    #TwoColumnHomePageLayout #rightMiddleContent
    > .large-notice:has(a[href*="Sponsorship+Opportunity"]),
    #TwoColumnHomePageLayout #rightMiddleContent
    > .large-notice:has(a[href*="/Education/History/MyClasses.aspx"]),
    #TwoColumnHomePageLayout #rightMiddleContent
    > .large-notice:has(a[href*="/Meetings/MyMeetings.aspx"]) {
        padding: 20px !important;
        border-radius: 15px !important;
    }

    #TwoColumnHomePageLayout .star-generated-card
    .star-card-actions,
    #TwoColumnHomePageLayout .star-generated-card
    .star-card-action-group {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
    }

    #TwoColumnHomePageLayout .star-generated-card
a.star-card-action,
    #TwoColumnHomePageLayout #rightMiddleContent
    > .large-notice:has(a[href*="Sponsorship+Opportunity"])
    button.button.small.color,
    #TwoColumnHomePageLayout #rightMiddleContent
    > .large-notice:has(a[href*="/Education/History/MyClasses.aspx"])
    button.button.small.color,
    #TwoColumnHomePageLayout #rightMiddleContent
    > .large-notice:has(a[href*="/Meetings/MyMeetings.aspx"])
    button.button.small.color {
        width: 100% !important;
        margin-right: 0 !important;
    }

    #TwoColumnHomePageLayout #rightMiddleContent
    > .large-notice:has(a[href*="Sponsorship+Opportunity"])
    button.button.small.color > a,
    #TwoColumnHomePageLayout #rightMiddleContent
    > .large-notice:has(a[href*="/Education/History/MyClasses.aspx"])
    button.button.small.color > a,
    #TwoColumnHomePageLayout #rightMiddleContent
    > .large-notice:has(a[href*="/Meetings/MyMeetings.aspx"])
    button.button.small.color > a {
        width: 100% !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #TwoColumnHomePageLayout .star-generated-card a.star-card-action,
    #TwoColumnHomePageLayout #rightMiddleContent
    > .large-notice:has(button.button.small.color)
    button.button.small.color {
        transition: none !important;
    }
}


/* =========================================================
   HOME PAGE — DYNAMIC ACTION BUTTON CORRECTION

   Keeps the following buttons visually identical to
   "Update Your Profile":
   - Sponsorship Opportunity Calendar
   - Class Sponsorship History
   - Event Sponsorship History

   Supports both the current anchor-based markup and the
   original nested <button><a> JavaScript markup.
   ========================================================= */

/* Keep the generated history actions compact and vertically grouped. */
#TwoColumnHomePageLayout #rightMiddleContent
> .star-action-card .star-card-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

#TwoColumnHomePageLayout #rightMiddleContent
> .star-action-card .star-card-action-group {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

#TwoColumnHomePageLayout #rightMiddleContent
> .star-action-card .star-card-copy {
    margin: 0 0 8px !important;
    padding: 0 !important;
    color: var(--star-text-muted, #64727c) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}

/* Current markup: the anchor itself is the action button. */
#TwoColumnHomePageLayout #rightMiddleContent
> .star-action-card a.star-action-link.button.small.color,
#TwoColumnHomePageLayout #rightMiddleContent
> .star-action-card a.star-card-action {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 215px !important;
    max-width: 100% !important;
    min-height: 42px !important;

    margin: 0 !important;
    padding: 10px 16px !important;
    float: none !important;

    border: 1px solid var(--star-navy, #21465f) !important;
    border-radius: 9px !important;

    background: linear-gradient(
        135deg,
        var(--star-navy, #21465f),
        var(--star-navy-dark, #173548)
    ) !important;

    color: #ffffff !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 20px !important;
    letter-spacing: 0 !important;

    text-align: center !important;
    text-decoration: none !important;
    text-shadow: none !important;
    white-space: normal !important;

    box-shadow: 0 7px 16px rgba(33, 70, 95, 0.2) !important;
    cursor: pointer !important;
    box-sizing: border-box !important;

    transition:
        transform 0.12s ease,
        box-shadow 0.16s ease,
        background-color 0.16s ease !important;
}

#TwoColumnHomePageLayout #rightMiddleContent
> .star-action-card a.star-action-link.button.small.color:hover,
#TwoColumnHomePageLayout #rightMiddleContent
> .star-action-card a.star-action-link.button.small.color:focus,
#TwoColumnHomePageLayout #rightMiddleContent
> .star-action-card a.star-card-action:hover,
#TwoColumnHomePageLayout #rightMiddleContent
> .star-action-card a.star-card-action:focus {
    border-color: var(--star-navy-dark, #173548) !important;
    background: var(--star-navy-dark, #173548) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    box-shadow: 0 9px 20px rgba(33, 70, 95, 0.27) !important;
    transform: translateY(-1px) !important;
    outline: 3px solid rgba(79, 174, 195, 0.22) !important;
    outline-offset: 2px !important;
}

#TwoColumnHomePageLayout #rightMiddleContent
> .star-action-card a.star-action-link.button.small.color:active,
#TwoColumnHomePageLayout #rightMiddleContent
> .star-action-card a.star-card-action:active {
    box-shadow: 0 4px 10px rgba(33, 70, 95, 0.2) !important;
    transform: translateY(1px) !important;
}

/* Legacy markup: make the outer button invisible and style its anchor. */
#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice button.button.small.color:has(> a[href*="Sponsorship"]),
#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice button.button.small.color:has(> a[href*="/Education/History/MyClasses.aspx"]),
#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice button.button.small.color:has(> a[href*="/Meetings/MyMeetings.aspx"]) {
    display: inline-block !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    transform: none !important;
    outline: 0 !important;
}

#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice button.button.small.color > a[href*="Sponsorship"],
#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice button.button.small.color > a[href*="/Education/History/MyClasses.aspx"],
#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice button.button.small.color > a[href*="/Meetings/MyMeetings.aspx"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 215px !important;
    max-width: 100% !important;
    min-height: 42px !important;

    padding: 10px 16px !important;

    border: 1px solid var(--star-navy, #21465f) !important;
    border-radius: 9px !important;

    background: linear-gradient(
        135deg,
        var(--star-navy, #21465f),
        var(--star-navy-dark, #173548)
    ) !important;

    color: #ffffff !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 20px !important;

    text-align: center !important;
    text-decoration: none !important;
    text-shadow: none !important;
    white-space: normal !important;

    box-shadow: 0 7px 16px rgba(33, 70, 95, 0.2) !important;
    box-sizing: border-box !important;

    transition:
        transform 0.12s ease,
        box-shadow 0.16s ease,
        background-color 0.16s ease !important;
}

#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice button.button.small.color > a[href*="Sponsorship"]:hover,
#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice button.button.small.color > a[href*="Sponsorship"]:focus,
#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice button.button.small.color > a[href*="/Education/History/MyClasses.aspx"]:hover,
#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice button.button.small.color > a[href*="/Education/History/MyClasses.aspx"]:focus,
#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice button.button.small.color > a[href*="/Meetings/MyMeetings.aspx"]:hover,
#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice button.button.small.color > a[href*="/Meetings/MyMeetings.aspx"]:focus {
    border-color: var(--star-navy-dark, #173548) !important;
    background: var(--star-navy-dark, #173548) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    box-shadow: 0 9px 20px rgba(33, 70, 95, 0.27) !important;
    transform: translateY(-1px) !important;
    outline: 3px solid rgba(79, 174, 195, 0.22) !important;
    outline-offset: 2px !important;
}

#TwoColumnHomePageLayout #rightMiddleContent
> .large-notice button.button.small.color > br {
    display: none !important;
}

@media screen and (max-width: 600px) {
    #TwoColumnHomePageLayout #rightMiddleContent
    > .star-action-card a.star-action-link.button.small.color,
    #TwoColumnHomePageLayout #rightMiddleContent
    > .star-action-card a.star-card-action,
    #TwoColumnHomePageLayout #rightMiddleContent
    > .large-notice button.button.small.color > a[href*="Sponsorship"],
    #TwoColumnHomePageLayout #rightMiddleContent
    > .large-notice button.button.small.color > a[href*="/Education/History/MyClasses.aspx"],
    #TwoColumnHomePageLayout #rightMiddleContent
    > .large-notice button.button.small.color > a[href*="/Meetings/MyMeetings.aspx"] {
        width: 100% !important;
        min-width: 0 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #TwoColumnHomePageLayout #rightMiddleContent
    > .star-action-card a.star-action-link,
    #TwoColumnHomePageLayout #rightMiddleContent
    > .star-action-card a.star-card-action,
    #TwoColumnHomePageLayout #rightMiddleContent
    > .large-notice button.button.small.color > a[href*="Sponsorship"],
    #TwoColumnHomePageLayout #rightMiddleContent
    > .large-notice button.button.small.color > a[href*="/Education/History/MyClasses.aspx"],
    #TwoColumnHomePageLayout #rightMiddleContent
    > .large-notice button.button.small.color > a[href*="/Meetings/MyMeetings.aspx"] {
        transition: none !important;
    }
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar {
    --star-calendar-active: 1;
}

/* =========================================================
   EVENT CALENDAR — DESKTOP FORM WIDTH
   ========================================================= */

@media screen and (min-width: 960px) {

    /*
     * Center the complete calendar form and maintain
     * an equal 16px gutter on both sides.
     */
    .sixteen.floated:has(> #FormContentPlaceHolder_EditForm) {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        float: none !important;
        clear: both !important;
        box-sizing: border-box !important;
    }

    /*
     * Allow the form and its inner rows to fit within
     * the available width.
     */
    #FormContentPlaceHolder_EditForm,
    #FormContentPlaceHolder_EditForm > .editForm,
    #FormContentPlaceHolder_EditForm > .editForm > .row,
    #FormContentPlaceHolder_EditForm > .editForm > .row > .span10,
    #FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendarli {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        float: none !important;
        box-sizing: border-box !important;
    }
}
#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendarli {
    clear: both !important;
}

#FormContentPlaceHolder_EditForm .event-filters.horizontal {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.5fr) minmax(220px, 0.75fr) !important;
    align-items: end !important;
    gap: 18px !important;
    width: 100% !important;
    margin: 0 0 24px !important;
    padding: 22px !important;
    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%) !important;
    box-shadow: var(--star-card-shadow, 0 12px 30px rgba(23, 53, 72, 0.09)) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    z-index: 20 !important;
}

#FormContentPlaceHolder_EditForm .event-filters.horizontal::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    border-radius: 16px 16px 0 0 !important;
    background: linear-gradient(
        90deg,
        var(--star-navy, #21465f),
        var(--star-navy-light, #4faec3)
    ) !important;
}

#FormContentPlaceHolder_EditForm .event-filters.horizontal > .clearfix {
    display: none !important;
}

#FormContentPlaceHolder_EditForm .event-filters.horizontal .widget-search,
#FormContentPlaceHolder_EditForm .event-filters.horizontal .widget {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_Filters_EventFiltersControls_SearchFilter_SearchFilter > h4,
#FormContentPlaceHolder_EditForm_EventsCalendar_Filters_EventFiltersControls_TypeFilter_CategoryFilter > h4 {
    display: block !important;
    min-height: 18px !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    color: var(--star-navy, #21465f) !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.065em !important;
    text-transform: uppercase !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_Filters_EventFiltersControls_SearchFilter_SearchFilter > h4::before {
    content: "Search events" !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_Filters_EventFiltersControls_TypeFilter_CategoryFilter > h4::before {
    content: "Event type" !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_Filters_EventFiltersControls_SearchFilter_SearchTextBox {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 54px 0 15px !important;
    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: var(--star-text, #25333d) !important;
    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 48px !important;
    box-shadow: inset 0 1px 2px rgba(23, 53, 72, 0.04) !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_Filters_EventFiltersControls_SearchFilter_SearchTextBox:hover {
    border-color: rgba(33, 70, 95, 0.42) !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_Filters_EventFiltersControls_SearchFilter_SearchTextBox:focus {
    border-color: var(--star-navy-light, #4faec3) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 3px rgba(79, 174, 195, 0.2) !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_Filters_EventFiltersControls_SearchFilter_SearchLinkButton {
    position: absolute !important;
    top: 30px !important;
    right: 5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--star-coral, #f56d73) !important;
    border-radius: 8px !important;
    background: var(--star-coral, #f56d73) !important;
    background-image: none !important;
    color: #ffffff !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    box-shadow: 0 5px 12px rgba(245, 109, 115, 0.22) !important;
    box-sizing: border-box !important;
    z-index: 2 !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.08s ease !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_Filters_EventFiltersControls_SearchFilter_SearchLinkButton::before {
    content: "" !important;
    position: absolute !important;
    width: 12px !important;
    height: 12px !important;
    border: 2px solid #ffffff !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_Filters_EventFiltersControls_SearchFilter_SearchLinkButton::after {
    content: "" !important;
    position: absolute !important;
    width: 8px !important;
    height: 2px !important;
    margin: 11px 0 0 11px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    transform: rotate(45deg) !important;
    transform-origin: center !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_Filters_EventFiltersControls_SearchFilter_SearchLinkButton:hover,
#FormContentPlaceHolder_EditForm_EventsCalendar_Filters_EventFiltersControls_SearchFilter_SearchLinkButton:focus {
    border-color: var(--star-coral-dark, #dc5961) !important;
    background: var(--star-coral-dark, #dc5961) !important;
    outline: 3px solid rgba(245, 109, 115, 0.24) !important;
    outline-offset: 2px !important;
    transform: translateY(-1px) !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_Filters_EventFiltersControls_SearchFilter_SearchTextBoxvcusp {
    margin: 6px 0 0 !important;
    padding: 0 !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_Filters_EventFiltersControls_TypeFilter_CategoryFilter .filters-dropdown {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    z-index: 30 !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_Filters_EventFiltersControls_TypeFilter_CategoryFilter .filters-dropdown > span {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 44px 0 15px !important;
    border: 1px solid #d3d9dd !important;
    border-radius: 10px !important;
    background: #eef1f3 !important;
    background-image: none !important;
    color: #68737b !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
    box-shadow: inset 0 1px 2px rgba(23, 53, 72, 0.04) !important;
    box-sizing: border-box !important;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_Filters_EventFiltersControls_TypeFilter_CategoryFilter .filters-dropdown > span::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    right: 18px !important;
    width: 8px !important;
    height: 8px !important;
    margin-top: -6px !important;
    border-right: 2px solid #77828a !important;
    border-bottom: 2px solid #77828a !important;
    transform: rotate(45deg) !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_Filters_EventFiltersControls_TypeFilter_CategoryFilter .filters-dropdown:hover > span,
#FormContentPlaceHolder_EditForm_EventsCalendar_Filters_EventFiltersControls_TypeFilter_CategoryFilter .filters-dropdown:focus-within > span {
    border-color: #bcc5ca !important;
    background: #e5e9ec !important;
    color: #4f5b63 !important;
    box-shadow: 0 0 0 3px rgba(100, 114, 124, 0.13) !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_Filters_EventFiltersControls_TypeFilter_CategoryFilter #filterlist {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-height: 260px !important;
    margin: 0 !important;
    padding: 7px !important;
    list-style: none !important;
    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: 0 16px 34px rgba(23, 53, 72, 0.18) !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    z-index: 999 !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_Filters_EventFiltersControls_TypeFilter_CategoryFilter #filterlist > li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_Filters_EventFiltersControls_TypeFilter_CategoryFilter #filterlist > li > a {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 11px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: var(--star-text, #25333d) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_Filters_EventFiltersControls_TypeFilter_CategoryFilter #filterlist > li > a:hover,
#FormContentPlaceHolder_EditForm_EventsCalendar_Filters_EventFiltersControls_TypeFilter_CategoryFilter #filterlist > li > a:focus {
    background: rgba(79, 174, 195, 0.12) !important;
    color: var(--star-navy, #21465f) !important;
    outline: 0 !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_Filters_EventFiltersControls_TypeFilter_CategoryFilter #filterlist > li > a.selected {
    border: 1px solid #d3d9dd !important;
    background: #eef1f3 !important;
    color: #59656d !important;
    font-weight: 700 !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 22px !important;
    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    color: var(--star-text, #25333d) !important;
    font-family: inherit !important;
    box-shadow: var(--star-card-shadow, 0 12px 30px rgba(23, 53, 72, 0.09)) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 5px !important;
    border-radius: 18px 18px 0 0 !important;
    background: linear-gradient(
        90deg,
        var(--star-coral, #f56d73),
        var(--star-navy-light, #4faec3)
    ) !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar,
#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar *,
#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar *::before,
#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar *::after {
    box-sizing: border-box !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-toolbar.fc-header-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    grid-template-areas: "navigation title views" !important;
    align-items: center !important;
    gap: 18px !important;
    width: 100% !important;
    min-height: 48px !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-toolbar .fc-left,
#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-toolbar .fc-center,
#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-toolbar .fc-right {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-toolbar .fc-left {
    grid-area: navigation !important;
    justify-self: start !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-toolbar .fc-center {
    grid-area: title !important;
    justify-self: center !important;
    text-align: center !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-toolbar .fc-right {
    grid-area: views !important;
    justify-self: end !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-toolbar .fc-center h2 {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--star-navy, #21465f) !important;
    font-family: inherit !important;
    font-size: clamp(22px, 2.7vw, 30px) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.025em !important;
    white-space: nowrap !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-button-group {
    display: inline-flex !important;
    align-items: stretch !important;
    gap: 5px !important;
    margin: 0 !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-button-group > * {
    margin: 0 !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    background-image: none !important;
    color: var(--star-navy, #21465f) !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-transform: capitalize !important;
    text-shadow: none !important;
    box-shadow: 0 2px 6px rgba(23, 53, 72, 0.07) !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.08s ease !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-button:hover,
#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-button:focus,
#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-button.fc-state-hover {
    border-color: var(--star-navy, #21465f) !important;
    background: var(--star-navy, #21465f) !important;
    color: #ffffff !important;
    outline: 0 !important;
    transform: translateY(-1px) !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-button:focus-visible {
    outline: 3px solid rgba(79, 174, 195, 0.28) !important;
    outline-offset: 2px !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-button.fc-state-active,
#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-button.fc-state-down {
    border-color: var(--star-coral, #f56d73) !important;
    background: linear-gradient(135deg, var(--star-coral, #f56d73), #f77f84) !important;
    color: #ffffff !important;
    box-shadow: 0 5px 12px rgba(245, 109, 115, 0.22) !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-button.fc-state-disabled,
#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-button:disabled {
    border-color: var(--star-border, #e4e9ec) !important;
    background: var(--star-surface-soft, #f7f9fa) !important;
    color: var(--star-text-muted, #64727c) !important;
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-icon {
    color: inherit !important;
    font-size: 1.1em !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-view-container {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-radius: 13px !important;
    background: #ffffff !important;
    overflow: hidden !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-view,
#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-view > table,
#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-row > div > table,
#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-content-skeleton > table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar.fc-unthemed th,
#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar.fc-unthemed td,
#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar.fc-unthemed thead,
#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar.fc-unthemed tbody,
#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar.fc-unthemed .fc-divider,
#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar.fc-unthemed .fc-row,
#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar.fc-unthemed .fc-content,
#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar.fc-unthemed .fc-popover,
#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar.fc-unthemed .fc-list-view,
#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar.fc-unthemed .fc-list-heading td {
    border-color: var(--star-border, #e4e9ec) !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-head-container,
#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-day-header {
    border-color: rgba(255, 255, 255, 0.15) !important;
    background: linear-gradient(135deg, var(--star-navy, #21465f), var(--star-navy-dark, #173548)) !important;
    color: #ffffff !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-day-header {
    height: 44px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 44px !important;
    letter-spacing: 0.045em !important;
    text-align: center !important;
    text-transform: uppercase !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-day-header span {
    color: #ffffff !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-bg .fc-day {
    background: #ffffff !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-bg .fc-sun,
#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-bg .fc-sat {
    background: #fafcfd !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-bg .fc-other-month {
    background: #f5f7f8 !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-bg .fc-today {
    background: var(--star-coral-light, #fff1f2) !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-row.fc-week {
    min-height: 108px !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-day-top {
    padding: 5px 5px 0 !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-day-number {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    padding: 0 7px !important;
    border-radius: 999px !important;
    color: var(--star-navy, #21465f) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-day-top.fc-today .fc-day-number {
    background: var(--star-coral, #f56d73) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(245, 109, 115, 0.22) !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-day-top.fc-other-month .fc-day-number {
    color: #a6b0b7 !important;
    opacity: 0.78 !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-month-view .fc-day-grid-container {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-event {
    border: 0 !important;
    border-left: 4px solid var(--star-coral, #f56d73) !important;
    border-radius: 7px !important;
    background: linear-gradient(135deg, var(--star-navy, #21465f), #2e6b8d) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    text-shadow: none !important;
    box-shadow: 0 4px 10px rgba(23, 53, 72, 0.17) !important;
    overflow: hidden !important;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-day-grid-event {
    margin: 2px 5px 4px !important;
    padding: 7px 8px !important;
    white-space: normal !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-event .fc-content {
    min-width: 0 !important;
    color: #ffffff !important;
    white-space: normal !important;
    overflow: hidden !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-event .fc-time {
    display: block !important;
    margin: 0 0 4px !important;
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 9px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    white-space: normal !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-event .fc-title {
    display: -webkit-box !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow: hidden !important;
    overflow-wrap: anywhere !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-event .fc-title > br:first-child,
#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-event .fc-title > br:last-child {
    display: none !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-event:hover,
#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-event:focus {
    border-left-color: var(--star-navy, #21465f) !important;
    background: linear-gradient(135deg, var(--star-coral-dark, #dc5961), var(--star-coral, #f56d73)) !important;
    color: #ffffff !important;
    outline: 0 !important;
    box-shadow: 0 7px 16px rgba(245, 109, 115, 0.28) !important;
    transform: translateY(-1px) !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-event:focus-visible {
    outline: 3px solid rgba(79, 174, 195, 0.34) !important;
    outline-offset: 2px !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-more {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 26px !important;
    margin: 3px 5px !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
    background: var(--star-coral-light, #fff1f2) !important;
    color: var(--star-coral-dark, #dc5961) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-more:hover,
#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-more:focus {
    background: var(--star-coral, #f56d73) !important;
    color: #ffffff !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-agenda-view .fc-axis,
#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-time-grid .fc-slats td {
    color: var(--star-text-muted, #64727c) !important;
    font-size: 11px !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-agenda-view .fc-axis {
    background: var(--star-surface-soft, #f7f9fa) !important;
    font-weight: 600 !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-time-grid .fc-slats td {
    height: 3em !important;
    border-color: var(--star-border, #e4e9ec) !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-time-grid-event {
    padding: 5px 7px !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-agenda-view .fc-event .fc-time,
#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-agenda-view .fc-event .fc-title {
    font-size: 11px !important;
    -webkit-line-clamp: initial !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-popover {
    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 18px 44px rgba(23, 53, 72, 0.22) !important;
    overflow: hidden !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-popover .fc-header {
    padding: 11px 13px !important;
    border: 0 !important;
    background: linear-gradient(135deg, var(--star-navy, #21465f), var(--star-navy-dark, #173548)) !important;
    color: #ffffff !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-popover .fc-title,
#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-popover .fc-close {
    color: #ffffff !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-popover .fc-body {
    padding: 8px !important;
    background: #ffffff !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-list-view {
    border: 0 !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-list-heading td {
    padding: 10px 12px !important;
    background: var(--star-surface-soft, #f7f9fa) !important;
    color: var(--star-navy, #21465f) !important;
    font-weight: 700 !important;
}

#FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-list-item:hover td {
    background: rgba(79, 174, 195, 0.08) !important;
}

@media screen and (max-width: 959px) {
    #FormContentPlaceHolder_EditForm,
    #FormContentPlaceHolder_EditForm > .editForm,
    #FormContentPlaceHolder_EditForm > .editForm > .row,
    #FormContentPlaceHolder_EditForm > .editForm > .row > .span10 {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        float: none !important;
        box-sizing: border-box !important;
    }

    #FormContentPlaceHolder_EditForm .event-filters.horizontal {
        grid-template-columns: minmax(0, 1fr) minmax(210px, 0.72fr) !important;
        padding: 20px !important;
    }

    #FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar {
        padding: 20px !important;
    }
}

@media screen and (max-width: 767px) {
    #FormContentPlaceHolder_EditForm .event-filters.horizontal {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 15px !important;
        margin-bottom: 18px !important;
        padding: 18px !important;
        border-radius: 14px !important;
    }

    #FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar {
        padding: 17px !important;
        border-radius: 15px !important;
    }

    #FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-toolbar.fc-header-toolbar {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        grid-template-areas:
            "title title"
            "navigation views" !important;
        gap: 13px 10px !important;
        margin-bottom: 16px !important;
    }

    #FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-toolbar .fc-center {
        width: 100% !important;
    }

    #FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-toolbar .fc-left,
    #FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-toolbar .fc-right {
        width: 100% !important;
    }

    #FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-toolbar .fc-right {
        justify-self: stretch !important;
    }

    #FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-toolbar .fc-left .fc-button-group,
    #FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-toolbar .fc-right .fc-button-group {
        display: flex !important;
        width: 100% !important;
    }

    #FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-toolbar .fc-right .fc-button,
    #FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-toolbar .fc-left .fc-today-button {
        flex: 1 1 auto !important;
    }

    #FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-view-container {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-color: var(--star-navy-light, #4faec3) var(--star-surface-soft, #f7f9fa) !important;
        scrollbar-width: thin !important;
    }

    #FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-month-view,
    #FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-agendaWeek-view {
        min-width: 720px !important;
    }

    #FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-agendaDay-view {
        min-width: 560px !important;
    }

    #FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-month-view .fc-time {
        display: none !important;
    }

    #FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-row.fc-week {
        min-height: 96px !important;
    }
}

@media screen and (max-width: 520px) {
    #FormContentPlaceHolder_EditForm .event-filters.horizontal {
        padding: 16px !important;
    }

    #FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar {
        padding: 14px !important;
        border-radius: 13px !important;
    }

    #FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-toolbar.fc-header-toolbar {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            "title"
            "navigation"
            "views" !important;
        gap: 11px !important;
    }

    #FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-toolbar .fc-left,
    #FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-toolbar .fc-right {
        justify-self: stretch !important;
    }

    #FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-toolbar .fc-left .fc-button-group,
    #FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-toolbar .fc-right .fc-button-group {
        width: 100% !important;
    }

    #FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-toolbar .fc-button {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    #FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-toolbar .fc-center h2 {
        font-size: 22px !important;
    }

    #FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-month-view,
    #FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-agendaWeek-view {
        min-width: 680px !important;
    }

    #FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-agendaDay-view {
        min-width: 520px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #FormContentPlaceHolder_EditForm_EventsCalendar_Filters_EventFiltersControls_SearchFilter_SearchTextBox,
    #FormContentPlaceHolder_EditForm_EventsCalendar_Filters_EventFiltersControls_SearchFilter_SearchLinkButton,
    #FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-button,
    #FormContentPlaceHolder_EditForm_EventsCalendar_EventCalendar .fc-event {
        transition: none !important;
    }
}

/* =========================================================
   PROFILE PAGES — COMPLETE RESPONSIVE LAYOUT
   ========================================================= */

/*
 * Normalize the full profile page container.
 * Mobile and tablet use one column by default.
 * Desktop changes to a sidebar and content grid below.
 */
#LeftSidebarLayout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 16px !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 10px 0 28px !important;

    box-sizing: border-box !important;
}


/* =========================================================
   LEGACY SIDEBAR COLUMNS
   ========================================================= */

/*
 * RAMCO assigns:
 * - four floated sidebar left
 * - twelve floated right
 *
 * Remove those legacy widths, floats, and positioning.
 */
#leftSidebarLeftContent,
#leftSidebarRightContent {
    display: block !important;
    position: static !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    inset: auto !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
    clear: none !important;

    overflow: visible !important;
    box-sizing: border-box !important;
}

#leftSidebarRightContent {
    align-self: start !important;
}


/* Hide the unused Home Page layout rendered after profile pages. */
#formPanel:has(> #LeftSidebarLayout)
> #TwoColumnHomePageLayout {
    display: none !important;
}


/* =========================================================
   PROFILE SECTION MENU
   ========================================================= */

#leftSidebar {
    position: static !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 18px !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-top: 4px solid var(--star-navy-light, #4faec3) !important;
    border-radius: 16px !important;

    background: var(--star-surface, #ffffff) !important;

    box-shadow:
        var(
            --star-card-shadow,
            0 12px 30px rgba(23, 53, 72, 0.09)
        ) !important;

    box-sizing: border-box !important;
}

#leftSidebar > h4 {
    margin: 0 0 14px !important;
    padding: 0 !important;

    color: var(--star-navy, #21465f) !important;

    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

#LeftSidebarLeftContentPlaceHolder_profileUpdateMenu,
#LeftSidebarLeftContentPlaceHolder_profileUpdateMenu nav.widget {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
    box-sizing: border-box !important;
}

#LeftSidebarLeftContentPlaceHolder_profileUpdateMenu
ul.categories {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}

#LeftSidebarLeftContentPlaceHolder_profileUpdateMenu
ul.categories > li {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;

    list-style: none !important;
    box-sizing: border-box !important;
}


ul.categories > li > a {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 11px 13px !important;

    border: 1px solid transparent !important;
    border-radius: 9px !important;

    background: transparent !important;
    color: var(--star-navy, #21465f) !important;

    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;

    text-decoration: none !important;

    box-sizing: border-box !important;

    transition:
        border-color 0.15s ease,
        background-color 0.15s ease,
        color 0.15s ease !important;
}

#LeftSidebarLeftContentPlaceHolder_profileUpdateMenu
ul.categories > li > a:hover,
#LeftSidebarLeftContentPlaceHolder_profileUpdateMenu
ul.categories > li > a:focus {
    border-color: rgba(79, 174, 195, 0.28) !important;
    background: rgba(79, 174, 195, 0.10) !important;
    color: var(--star-navy-dark, #173548) !important;

    outline: none !important;
}

#LeftSidebarLeftContentPlaceHolder_profileUpdateMenu
ul.categories > li.current > a {
    border-color: #21465f !important;
    background: #21465f !important;
    color: #ffffff !important;
    box-shadow: 0 5px 14px rgba(33, 70, 95, 0.24) !important;
}


/* =========================================================
   PROFILE FORM CARD
   ========================================================= */

#LeftSidebarRightContentPlaceHolder_PanelDiv,
#LeftSidebarRightContentPlaceHolder_Panel {
    display: block !important;
    position: static !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;

    margin: 0 !important;

    float: none !important;
    clear: both !important;

    box-sizing: border-box !important;
}

#LeftSidebarRightContentPlaceHolder_PanelDiv {
    padding: 0 !important;
    overflow: visible !important;
}

#LeftSidebarRightContentPlaceHolder_Panel {
    padding: 18px 15px !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-top: 4px solid var(--star-coral, #f56d73) !important;
    border-radius: 14px !important;

    background: var(--star-surface, #ffffff) !important;

    box-shadow:
        var(
            --star-card-shadow,
            0 12px 30px rgba(23, 53, 72, 0.09)
        ) !important;

    overflow: visible !important;
}

#LeftSidebarRightContentPlaceHolder_Panel
> .editForm {
    display: block !important;
    position: static !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
    clear: both !important;

    overflow: visible !important;
    box-sizing: border-box !important;
}


/* =========================================================
   FORM ROWS
   Applies to every profile page.
   ========================================================= */

#LeftSidebarRightContentPlaceHolder_Panel
.editForm > .row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 18px !important;

    position: static !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;

    margin: 0 0 20px !important;
    padding: 0 !important;

    float: none !important;
    clear: both !important;

    overflow: visible !important;
    box-sizing: border-box !important;
}

/*
 * Remove every legacy span width and float used inside
 * the direct form rows.
 */
#LeftSidebarRightContentPlaceHolder_Panel
.editForm > .row > [class^="span"],
#LeftSidebarRightContentPlaceHolder_Panel
.editForm > .row > [class*=" span"] {
    display: block !important;
    position: static !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
    clear: none !important;

    overflow: visible !important;
    box-sizing: border-box !important;
}

/*
 * A span10 or single child always occupies the complete row.
 */
#LeftSidebarRightContentPlaceHolder_Panel
.editForm > .row > .span10,
#LeftSidebarRightContentPlaceHolder_Panel
.editForm > .row > :only-child {
    grid-column: 1 / -1 !important;
}
/* Remove legacy clearfix elements from profile grid rows. */
#LeftSidebarRightContentPlaceHolder_Panel
.editForm > .row::before,
#LeftSidebarRightContentPlaceHolder_Panel
.editForm > .row::after {
    display: none !important;
    content: none !important;
}

/* =========================================================
   LABELS
   ========================================================= */

#LeftSidebarRightContentPlaceHolder_Panel
.editForm > .row
> [class^="span"] > h3,
#LeftSidebarRightContentPlaceHolder_Panel
.editForm > .row
> [class*=" span"] > h3,
#LeftSidebarRightContentPlaceHolder_Panel
h3.desc {
    margin: 0 0 7px !important;
    padding: 0 !important;

    color: var(--star-navy, #21465f) !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;

    letter-spacing: 0.01em !important;
    text-transform: none !important;
}

#LeftSidebarRightContentPlaceHolder_Panel
h3 span {
    color: var(--star-text-muted, #64727c) !important;

    font-size: 11px !important;
    font-weight: 500 !important;
}

#LeftSidebarRightContentPlaceHolder_Panel
.editForm > .row
> [class^="span"]
> .input-control + h3,
#LeftSidebarRightContentPlaceHolder_Panel
.editForm > .row
> [class*=" span"]
> .input-control + h3 {
    margin-top: 20px !important;
}


/* =========================================================
   INPUT CONTROL WRAPPERS
   ========================================================= */

#LeftSidebarRightContentPlaceHolder_Panel
.input-control {
    display: block !important;
    position: relative !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;

    margin: 0 !important;

    float: none !important;

    box-sizing: border-box !important;
}

#LeftSidebarRightContentPlaceHolder_Panel
.input-control.seventy,
#LeftSidebarRightContentPlaceHolder_Panel
.input-control.thirty {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;

    box-sizing: border-box !important;
}


/* =========================================================
   TEXT INPUTS, SELECTS, AND TEXTAREAS
   ========================================================= */

#LeftSidebarRightContentPlaceHolder_Panel
.input-control input[type="text"],
#LeftSidebarRightContentPlaceHolder_Panel
.input-control input[type="email"],
#LeftSidebarRightContentPlaceHolder_Panel
.input-control input[type="tel"],
#LeftSidebarRightContentPlaceHolder_Panel
.input-control input[type="password"],
#LeftSidebarRightContentPlaceHolder_Panel
.input-control input[type="number"],
#LeftSidebarRightContentPlaceHolder_Panel
.input-control select,
#LeftSidebarRightContentPlaceHolder_Panel
.input-control textarea {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 10px 13px !important;

    border: 1px solid #ccd8de !important;
    border-radius: 9px !important;

    background-color: #ffffff !important;
    color: var(--star-text, #25333d) !important;

    font-family:
        "Poppins",
        "Open Sans",
        Verdana,
        Arial,
        sans-serif !important;

    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;

    box-shadow:
        0 1px 2px rgba(23, 53, 72, 0.04) !important;

    box-sizing: border-box !important;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease !important;
}

#LeftSidebarRightContentPlaceHolder_Panel
.input-control input[type="text"],
#LeftSidebarRightContentPlaceHolder_Panel
.input-control input[type="email"],
#LeftSidebarRightContentPlaceHolder_Panel
.input-control input[type="tel"],
#LeftSidebarRightContentPlaceHolder_Panel
.input-control input[type="password"],
#LeftSidebarRightContentPlaceHolder_Panel
.input-control input[type="number"],
#LeftSidebarRightContentPlaceHolder_Panel
.input-control select {
    min-height: 44px !important;
}

#LeftSidebarRightContentPlaceHolder_Panel
.input-control textarea {
    min-height: 110px !important;
    resize: vertical !important;
}

#LeftSidebarRightContentPlaceHolder_Panel
.input-control input:focus,
#LeftSidebarRightContentPlaceHolder_Panel
.input-control select:focus,
#LeftSidebarRightContentPlaceHolder_Panel
.input-control textarea:focus {
    border-color: var(--star-navy-light, #4faec3) !important;

    outline: none !important;

    box-shadow:
        0 0 0 3px rgba(79, 174, 195, 0.17) !important;
}


/* Disabled and read-only profile fields. */
#LeftSidebarRightContentPlaceHolder_Panel
.input-control input:disabled,
#LeftSidebarRightContentPlaceHolder_Panel
.input-control input.aspNetDisabled,
#LeftSidebarRightContentPlaceHolder_Panel
.input-control select:disabled,
#LeftSidebarRightContentPlaceHolder_Panel
.input-control textarea:disabled {
    border-color: var(--star-border, #e4e9ec) !important;

    background: #f1f4f5 !important;
    color: #76848d !important;

    cursor: not-allowed !important;
    opacity: 1 !important;
}


/* Hide the empty RAMCO helper buttons beside inputs. */
#LeftSidebarRightContentPlaceHolder_Panel
.input-control > button.helper {
    display: none !important;
}


/* =========================================================
   OFFICE PHONE AND EXTENSION
   ========================================================= */

#LeftSidebarRightContentPlaceHolder_Panel
[id$="_CompositePhoneli"]
> .input-control {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px !important;

    width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   PLACEHOLDERS AND VALIDATION
   ========================================================= */

#LeftSidebarRightContentPlaceHolder_Panel
.phholder {
    pointer-events: none !important;
}

#LeftSidebarRightContentPlaceHolder_Panel
.placeholder {
    color: #8a969e !important;

    font-size: 12px !important;
    line-height: 1.4 !important;
}

#LeftSidebarRightContentPlaceHolder_Panel
p.error {
    margin: 5px 0 0 !important;
    padding: 0 !important;

    color: var(--star-coral-dark, #dc5961) !important;

    font-size: 11px !important;
    line-height: 1.45 !important;
}


/* =========================================================
   SAVE AND CANCEL BUTTONS
   ========================================================= */

#LeftSidebarRightContentPlaceHolder_Panel
[id$="_WizardNavigationli"] {
    width: 100% !important;

    margin: 8px 0 0 !important;
    padding: 20px 0 0 !important;

    border-top: 1px solid var(--star-border, #e4e9ec) !important;

    box-sizing: border-box !important;
}

#LeftSidebarRightContentPlaceHolder_Panel
[id$="_WizardNavigationli"]
.button-set,
#LeftSidebarRightContentPlaceHolder_Panel
[id$="_WizardNavigationli"]
.button-set.place-left,
#LeftSidebarRightContentPlaceHolder_Panel
[id$="_WizardNavigationli"]
> .button-set {
    display: flex !important;
    flex-direction: column-reverse !important;
    justify-content: flex-start !important;
    gap: 10px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;

    box-sizing: border-box !important;
}

#LeftSidebarRightContentPlaceHolder_Panel
[id$="_WizardNavigationli"]
input.button {
    display: block !important;

    width: 100% !important;
    min-height: 43px !important;

    margin: 0 !important;
    padding: 9px 18px !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-radius: 9px !important;

    background: var(--star-surface-soft, #f7f9fa) !important;
    color: var(--star-navy, #21465f) !important;

    font-family:
        "Poppins",
        "Open Sans",
        Verdana,
        Arial,
        sans-serif !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;

    cursor: pointer !important;
    box-sizing: border-box !important;
}

#LeftSidebarRightContentPlaceHolder_Panel
[id$="_WizardNavigationli"]
input.button.active {
    border-color: var(--star-coral, #f56d73) !important;

    background:
        linear-gradient(
            135deg,
            var(--star-coral, #f56d73),
            #f77f84
        ) !important;

    color: #ffffff !important;

    box-shadow:
        0 6px 16px rgba(245, 109, 115, 0.25) !important;
}

#LeftSidebarRightContentPlaceHolder_Panel
[id$="_WizardNavigationli"]
input.button:hover,
#LeftSidebarRightContentPlaceHolder_Panel
[id$="_WizardNavigationli"]
input.button.active {
    border-color: #21465f !important;
    background: #21465f !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(33, 70, 95, 0.25) !important;
}


/* =========================================================
   TABLET — 640px TO 959px
   ========================================================= */

@media screen and (min-width: 640px) and (max-width: 959px) {

    #LeftSidebarLayout {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 18px !important;

        padding: 14px !important;
    }

    #leftSidebarLeftContent,
    #leftSidebarRightContent {
        grid-column: 1 !important;

        position: static !important;
        inset: auto !important;

        width: 100% !important;

        margin: 0 !important;

        float: none !important;
        clear: none !important;
    }

    #leftSidebar {
        position: static !important;
    }

    #LeftSidebarLeftContentPlaceHolder_profileUpdateMenu
    ul.categories {
        display: grid !important;
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    /*
     * Keep profile forms stacked on tablets.
     * This prevents the legacy columns from scattering fields.
     */
    #LeftSidebarRightContentPlaceHolder_Panel
    .editForm > .row {
        grid-template-columns:
            minmax(0, 1fr) !important;
    }

    #LeftSidebarRightContentPlaceHolder_Panel {
        padding: 22px !important;
    }

    #LeftSidebarRightContentPlaceHolder_Panel
    [id$="_WizardNavigationli"]
    .button-set,
    #LeftSidebarRightContentPlaceHolder_Panel
    [id$="_WizardNavigationli"]
    .button-set.place-left,
    #LeftSidebarRightContentPlaceHolder_Panel
    [id$="_WizardNavigationli"]
    > .button-set {
        flex-direction: row !important;
        justify-content: flex-end !important;
    }

    #LeftSidebarRightContentPlaceHolder_Panel
    [id$="_WizardNavigationli"]
    input.button {
        width: auto !important;
        min-width: 110px !important;
    }
}


/* =========================================================
   DESKTOP — 960px AND WIDER
   ========================================================= */

@media screen and (min-width: 960px) {

    /*
     * Sidebar on the left and complete profile form on the right.
     */
    #LeftSidebarLayout {
        grid-template-columns:
            minmax(220px, 250px)
            minmax(0, 1fr) !important;

        align-items: start !important;
        gap: 24px !important;

        padding: 18px 16px 36px !important;
    }

    #leftSidebarLeftContent {
        grid-column: 1 !important;
        grid-row: 1 !important;

        position: static !important;
        inset: auto !important;

        width: 100% !important;

        margin: 0 !important;

        float: none !important;
        clear: none !important;
    }

    #leftSidebarRightContent {
        grid-column: 2 !important;
        grid-row: 1 !important;

        position: static !important;
        inset: auto !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 0 !important;

        float: none !important;
        clear: none !important;

        align-self: start !important;
    }

    #leftSidebar {
        position: sticky !important;
        top: 18px !important;
    }

    #LeftSidebarRightContentPlaceHolder_Panel {
        padding: 28px !important;
    }

    /*
     * Rows containing two span5 elements become two columns.
     * Single-child and span10 rows still remain full width.
     */
    #LeftSidebarRightContentPlaceHolder_Panel
    .editForm > .row {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 20px 24px !important;
    }

    #LeftSidebarRightContentPlaceHolder_Panel
    .editForm > .row > .span10,
    #LeftSidebarRightContentPlaceHolder_Panel
    .editForm > .row > :only-child {
        grid-column: 1 / -1 !important;
    }

    #LeftSidebarRightContentPlaceHolder_Panel
    [id$="_CompositePhoneli"]
    > .input-control {
        grid-template-columns:
            minmax(0, 2fr)
            minmax(85px, 0.75fr) !important;
    }

    #LeftSidebarRightContentPlaceHolder_Panel
    [id$="_WizardNavigationli"]
    .button-set,
    #LeftSidebarRightContentPlaceHolder_Panel
    [id$="_WizardNavigationli"]
    .button-set.place-left,
    #LeftSidebarRightContentPlaceHolder_Panel
    [id$="_WizardNavigationli"]
    > .button-set {
        flex-direction: row !important;
        justify-content: flex-end !important;
    }

    #LeftSidebarRightContentPlaceHolder_Panel
    [id$="_WizardNavigationli"]
    input.button {
        width: auto !important;
        min-width: 110px !important;
    }
}

/* =========================================================
   MOBILE — BELOW 640px
   ========================================================= */

@media screen and (max-width: 639px) {
    #LeftSidebarLayout {
        display: block !important;
        padding: 10px 0 28px !important;
    }

    #leftSidebar {
        position: static !important;
        padding: 14px !important;
        border-radius: 13px !important;
    }

    #leftSidebarRightContent {
        margin-top: 16px !important;
    }

    #LeftSidebarRightContentPlaceHolder_Panel {
        padding: 18px 15px !important;
        border-radius: 14px !important;
    }

    #LeftSidebarLayout:has(
        #LeftSidebarRightContentPlaceHolder_Panel_ContactInfoControl_ContactInfoPanel_FirstNameli
    )
    #LeftSidebarRightContentPlaceHolder_Panel
    [id$="_CompositePhoneli"] > .input-control {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    #LeftSidebarLayout:has(
        #LeftSidebarRightContentPlaceHolder_Panel_ContactInfoControl_ContactInfoPanel_FirstNameli
    )
    #LeftSidebarRightContentPlaceHolder_Panel_Panel_WizardNavigationli
    .button-set {
        flex-direction: column-reverse !important;
    }

    #LeftSidebarLayout:has(
        #LeftSidebarRightContentPlaceHolder_Panel_ContactInfoControl_ContactInfoPanel_FirstNameli
    )
    #LeftSidebarRightContentPlaceHolder_Panel_Panel_WizardNavigationli
    input.button {
        width: 100% !important;
    }
}
/* =========================================================
   LOGIN / ACCOUNT SETUP PAGE
   ========================================================= */

/*
 * Normalize the legacy single-column wrapper.
 */
body:has(#SingleColumnLayout #login)
#SingleColumnLayout {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 24px 16px 40px !important;

    box-sizing: border-box !important;
}

body:has(#SingleColumnLayout #login)
#SingleColumnLayout > .sixteen.floated,
body:has(#SingleColumnLayout #login)
#SingleColumnLayout > .sixteen.floated > .editForm {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
    clear: both !important;

    box-sizing: border-box !important;
}

/* Hide the unused empty row above the login cards. */
body:has(#SingleColumnLayout #login)
#SingleColumnLayout
> .sixteen.floated
> .editForm
> .row:first-child {
    display: none !important;
}

/*
 * Remove legacy clearfix pseudo-elements before turning
 * the row into a grid.
 */
body:has(#SingleColumnLayout #login)
#SingleColumnLayout
> .sixteen.floated
> .editForm
> .row::before,
body:has(#SingleColumnLayout #login)
#SingleColumnLayout
> .sixteen.floated
> .editForm
> .row::after {
    display: none !important;
    content: none !important;
}

/* Login and account-setup card layout. */
body:has(#SingleColumnLayout #login)
#SingleColumnLayout
> .sixteen.floated
> .editForm
> .row:has(#login) {
    display: grid !important;
    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(280px, 0.65fr) !important;

    align-items: stretch !important;
    gap: 24px !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
    clear: both !important;

    box-sizing: border-box !important;
}

/* Reset legacy span widths and floats. */
body:has(#SingleColumnLayout #login)
#SingleColumnLayout
.row:has(#login)
> .span8,
body:has(#SingleColumnLayout #login)
#SingleColumnLayout
.row:has(#login)
> .span4 {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
    clear: none !important;

    box-sizing: border-box !important;
}


/* =========================================================
   LOGIN CARD
   ========================================================= */

body:has(#SingleColumnLayout #login)
#login {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 100% !important;

    margin: 0 !important;
    padding: 30px !important;

    float: none !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-top: 4px solid var(--star-navy-light, #4faec3) !important;
    border-radius: 18px !important;

    background: var(--star-surface, #ffffff) !important;

    box-shadow:
        var(
            --star-card-shadow,
            0 12px 30px rgba(23, 53, 72, 0.1)
        ) !important;

    box-sizing: border-box !important;
}

body:has(#SingleColumnLayout #login)
#login > h2 {
    margin: 0 0 22px !important;
    padding: 0 !important;

    color: var(--star-navy, #21465f) !important;

    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
}

body:has(#SingleColumnLayout #login)
#FormContentPlaceHolder_LoginEditForm,
body:has(#SingleColumnLayout #login)
#FormContentPlaceHolder_LoginEditForm > .editForm {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}

/* Login form rows. */
body:has(#SingleColumnLayout #login)
#FormContentPlaceHolder_LoginEditForm
.editForm > .row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 0 18px !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}

body:has(#SingleColumnLayout #login)
#FormContentPlaceHolder_LoginEditForm
.editForm > .row::before,
body:has(#SingleColumnLayout #login)
#FormContentPlaceHolder_LoginEditForm
.editForm > .row::after {
    display: none !important;
    content: none !important;
}

/* Reset nested legacy columns. */
body:has(#SingleColumnLayout #login)
#FormContentPlaceHolder_LoginEditForm
.editForm > .row
> .span5,
body:has(#SingleColumnLayout #login)
#FormContentPlaceHolder_LoginEditForm
.editForm > .row
> .span10 {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;

    box-sizing: border-box !important;
}


/* =========================================================
   LOGIN INPUTS
   ========================================================= */

body:has(#SingleColumnLayout #login)
#FormContentPlaceHolder_LoginEditForm
.input-control {
    display: block !important;
    position: relative !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;

    box-sizing: border-box !important;
}

body:has(#SingleColumnLayout #login)
#FormContentPlaceHolder_LoginEditForm
.input-control input[type="text"],
body:has(#SingleColumnLayout #login)
#FormContentPlaceHolder_LoginEditForm
.input-control input[type="password"] {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 48px !important;

    margin: 0 !important;
    padding: 11px 14px !important;

    border: 1px solid #ccd8de !important;
    border-radius: 10px !important;

    background: #ffffff !important;
    color: var(--star-text, #25333d) !important;

    font-family:
        "Poppins",
        "Open Sans",
        Verdana,
        Arial,
        sans-serif !important;

    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;

    box-shadow:
        0 1px 2px rgba(23, 53, 72, 0.04) !important;

    box-sizing: border-box !important;
}

body:has(#SingleColumnLayout #login)
#FormContentPlaceHolder_LoginEditForm
.input-control input:focus {
    border-color: var(--star-navy-light, #4faec3) !important;

    outline: none !important;

    box-shadow:
        0 0 0 3px rgba(79, 174, 195, 0.18) !important;
}

/* Hide the unused helper buttons beside text fields. */
body:has(#SingleColumnLayout #login)
#FormContentPlaceHolder_LoginEditForm
.input-control.text > button.helper,
body:has(#SingleColumnLayout #login)
#FormContentPlaceHolder_LoginEditForm
.input-control.password > button.helper {
    display: none !important;
}

/* Legacy placeholders. */
body:has(#SingleColumnLayout #login)
#FormContentPlaceHolder_LoginEditForm
.phholder {
    pointer-events: none !important;
}

body:has(#SingleColumnLayout #login)
#FormContentPlaceHolder_LoginEditForm
.placeholder {
    color: #83919a !important;

    font-size: 13px !important;
    line-height: 1.4 !important;
}


/* =========================================================
   REMEMBER ME
   ========================================================= */

body:has(#SingleColumnLayout #login)
#FormContentPlaceHolder_LoginEditForm_RememberMeli {
    margin: 2px 0 0 !important;
}

body:has(#SingleColumnLayout #login)
#FormContentPlaceHolder_LoginEditForm_RememberMeli
label.input-control.checkbox {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;

    width: auto !important;
    min-width: 0 !important;

    margin: 0 !important;

    color: var(--star-navy, #21465f) !important;

    font-size: 13px !important;
    font-weight: 600 !important;

    cursor: pointer !important;
}

body:has(#SingleColumnLayout #login)
#FormContentPlaceHolder_LoginEditForm_RememberMeli
input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;

    margin: 0 !important;

    accent-color: var(--star-navy, #21465f) !important;
}


/* =========================================================
   LOGIN BUTTON
   ========================================================= */

body:has(#SingleColumnLayout #login)
#FormContentPlaceHolder_LoginEditForm_LoginButtonStripli {
    width: 100% !important;

    margin: 4px 0 0 !important;
    padding: 20px 0 0 !important;

    border-top: 1px solid var(--star-border, #e4e9ec) !important;

    box-sizing: border-box !important;
}

body:has(#SingleColumnLayout #login)
#FormContentPlaceHolder_LoginEditForm_LoginButtonStripli
.button-set {
    display: flex !important;
    justify-content: flex-end !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
}

body:has(#SingleColumnLayout #login)
#FormContentPlaceHolder_LoginEditForm_LoginButtonStrip_LoginButton {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 130px !important;
    min-height: 44px !important;

    margin: 0 !important;
    padding: 10px 22px !important;

    border: 1px solid var(--star-navy, #21465f) !important;
    border-radius: 9px !important;

    background: linear-gradient(
        135deg,
        var(--star-navy, #21465f),
        var(--star-navy-dark, #173548)
    ) !important;

    color: #ffffff !important;

    font-family:
        "Poppins",
        "Open Sans",
        Verdana,
        Arial,
        sans-serif !important;

    font-size: 13px !important;
    font-weight: 700 !important;

    box-shadow:
        0 8px 18px rgba(33, 70, 95, 0.25) !important;

    cursor: pointer !important;
    box-sizing: border-box !important;
}

body:has(#SingleColumnLayout #login)
#FormContentPlaceHolder_LoginEditForm_LoginButtonStrip_LoginButton:hover,
body:has(#SingleColumnLayout #login)
#FormContentPlaceHolder_LoginEditForm_LoginButtonStrip_LoginButton:focus {
    border-color: var(--star-navy-dark, #173548) !important;
    background: var(--star-navy-dark, #173548) !important;

    transform: translateY(-1px) !important;

    outline: 3px solid rgba(79, 174, 195, 0.2) !important;
    outline-offset: 2px !important;
}


/* =========================================================
   NEW MEMBER / ACCOUNT SETUP CARD
   ========================================================= */

body:has(#SingleColumnLayout #login)
#sponsorBlock {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 100% !important;

    margin: 0 !important;
    padding: 30px !important;

    float: none !important;

    border: 1px solid rgba(79, 174, 195, 0.24) !important;
    border-top: 4px solid var(--star-coral, #f56d73) !important;
    border-radius: 18px !important;

    background: linear-gradient(
        145deg,
        #ffffff 0%,
        #f7fbfc 100%
    ) !important;

    box-shadow:
        var(
            --star-card-shadow,
            0 12px 30px rgba(23, 53, 72, 0.1)
        ) !important;

    text-align: center !important;
    box-sizing: border-box !important;
}

body:has(#SingleColumnLayout #login)
#sponsorBlock p {
    max-width: 300px !important;

    margin: 0 0 22px !important;

    color: var(--star-text, #25333d) !important;

    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.65 !important;
}

/* Hide the legacy line break controlling the spacing. */
body:has(#SingleColumnLayout #login)
#sponsorBlock > br {
    display: none !important;
}

body:has(#SingleColumnLayout #login)
#sponsorBlock a.button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 150px !important;
    min-height: 44px !important;

    margin: 0 !important;
    padding: 10px 20px !important;

    border: 1px solid var(--star-navy, #21465f) !important;
    border-radius: 9px !important;

    background: var(--star-navy, #21465f) !important;
    color: #ffffff !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;

    text-decoration: none !important;

    box-shadow:
        0 8px 18px rgba(33, 70, 95, 0.22) !important;

    box-sizing: border-box !important;
}

body:has(#SingleColumnLayout #login)
#sponsorBlock a.button:hover,
body:has(#SingleColumnLayout #login)
#sponsorBlock a.button:focus {
    border-color: var(--star-navy-dark, #173548) !important;
    background: var(--star-navy-dark, #173548) !important;
    color: #ffffff !important;

    transform: translateY(-1px) !important;

    outline: 3px solid rgba(79, 174, 195, 0.2) !important;
    outline-offset: 2px !important;
}


/* Hide the unused Home Page layout on the login page. */
body:has(#SingleColumnLayout #login)
#formPanel > #TwoColumnHomePageLayout {
    display: none !important;
}


/* =========================================================
   TABLET — 640px TO 959px
   ========================================================= */

@media screen and (min-width: 640px) and (max-width: 959px) {
    body:has(#SingleColumnLayout #login)
    #SingleColumnLayout
    > .sixteen.floated
    > .editForm
    > .row:has(#login) {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 18px !important;
    }

    body:has(#SingleColumnLayout #login)
    #login,
    body:has(#SingleColumnLayout #login)
    #sponsorBlock {
        min-height: 0 !important;
    }
}


/* =========================================================
   MOBILE — BELOW 640px
   ========================================================= */

@media screen and (max-width: 639px) {
    body:has(#SingleColumnLayout #login)
    #SingleColumnLayout {
        padding: 12px 0 30px !important;
    }

    body:has(#SingleColumnLayout #login)
    #SingleColumnLayout
    > .sixteen.floated
    > .editForm
    > .row:has(#login) {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px !important;
    }

    body:has(#SingleColumnLayout #login)
    #login,
    body:has(#SingleColumnLayout #login)
    #sponsorBlock {
        min-height: 0 !important;
        padding: 22px 18px !important;
        border-radius: 14px !important;
    }

    body:has(#SingleColumnLayout #login)
    #login > h2 {
        font-size: 23px !important;
    }

    body:has(#SingleColumnLayout #login)
    #FormContentPlaceHolder_LoginEditForm_LoginButtonStripli
    .button-set {
        display: block !important;
    }

    body:has(#SingleColumnLayout #login)
    #FormContentPlaceHolder_LoginEditForm_LoginButtonStrip_LoginButton,
    body:has(#SingleColumnLayout #login)
    #sponsorBlock a.button {
        width: 100% !important;
    }
}

/* =========================================================
   LOGIN FIELD SPACING
   ========================================================= */

/* Add space between Username and Password. */
body:has(#SingleColumnLayout #login)
#FormContentPlaceHolder_LoginEditForm
.editForm > .row:first-child
> .span5:first-child
> .input-control + .input-control {
    margin-top: 14px !important;
}

/* Add space above Remember Me. */
body:has(#SingleColumnLayout #login)
#FormContentPlaceHolder_LoginEditForm_RememberMeli {
    margin-top: 16px !important;
}

/* Add breathing room before the Login button area. */
body:has(#SingleColumnLayout #login)
#FormContentPlaceHolder_LoginEditForm_LoginButtonStripli {
    margin-top: 8px !important;
}

/* =========================================================
   LOGIN INSTRUCTIONS
   ========================================================= */

/*
 * If the instructions are injected into the first row,
 * do not allow the previous empty-row rule to hide them.
 */
body:has(#SingleColumnLayout #login)
#SingleColumnLayout
> .sixteen.floated
> .editForm
> .row:first-child:has(#star-login-help) {
    display: block !important;
}

/* Normalize the legacy row containing the injected content. */
body:has(#SingleColumnLayout #login)
#SingleColumnLayout
> .sixteen.floated
> .editForm
> .row:has(#star-login-help) {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
    float: none !important;
    clear: both !important;
    box-sizing: border-box !important;
}

body:has(#SingleColumnLayout #login)
#SingleColumnLayout
> .sixteen.floated
> .editForm
> .row:has(#star-login-help)::before,
body:has(#SingleColumnLayout #login)
#SingleColumnLayout
> .sixteen.floated
> .editForm
> .row:has(#star-login-help)::after {
    display: none !important;
    content: none !important;
}

body:has(#SingleColumnLayout #login)
#SingleColumnLayout
.row:has(#star-login-help)
> .span10 {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
}


/* =========================================================
   INSTRUCTION CARD
   ========================================================= */

#star-login-help {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 28px !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-top: 4px solid var(--star-navy-light, #4faec3) !important;
    border-radius: 18px !important;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f8fbfc 100%
        ) !important;

    color: var(--star-text, #25333d) !important;

    box-shadow:
        0 12px 30px rgba(23, 53, 72, 0.09) !important;

    box-sizing: border-box !important;
}


/* =========================================================
   HEADER
   ========================================================= */

#star-login-help .star-login-help__header {
    margin: 0 0 22px !important;
}

#star-login-help .star-login-help__eyebrow {
    display: block !important;
    margin: 0 0 5px !important;

    color: var(--star-navy-light, #4faec3) !important;

    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

#star-login-help h2 {
    margin: 0 0 7px !important;
    padding: 0 !important;

    color: var(--star-navy, #21465f) !important;

    font-size: 25px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
}

#star-login-help .star-login-help__header p {
    max-width: 720px !important;
    margin: 0 !important;

    color: var(--star-text-muted, #64727c) !important;

    font-size: 14px !important;
    line-height: 1.6 !important;
}


/* =========================================================
   IMPORTANT NOTICE
   ========================================================= */

#star-login-help .star-login-help__notice {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 13px !important;

    margin: 0 0 24px !important;
    padding: 15px 17px !important;

    border: 1px solid rgba(245, 109, 115, 0.30) !important;
    border-radius: 12px !important;

    background: var(--star-coral-light, #fff1f2) !important;

    box-sizing: border-box !important;
}

#star-login-help .star-login-help__notice-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 32px !important;
    height: 32px !important;

    border-radius: 50% !important;

    background: var(--star-coral, #f56d73) !important;
    color: #ffffff !important;

    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

#star-login-help .star-login-help__notice strong {
    display: block !important;
    margin: 0 0 3px !important;

    color: var(--star-navy, #21465f) !important;

    font-size: 13px !important;
    font-weight: 700 !important;
}

#star-login-help .star-login-help__notice p {
    margin: 0 !important;

    color: var(--star-text, #25333d) !important;

    font-size: 13px !important;
    line-height: 1.55 !important;
}

#star-login-help .star-login-help__notice a {
    color: var(--star-navy, #21465f) !important;
    font-weight: 700 !important;
    overflow-wrap: anywhere !important;
}


/* =========================================================
   NUMBERED STEPS
   ========================================================= */

#star-login-help .star-login-help__steps {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;

    margin: 0 0 22px !important;
    padding: 0 !important;

    list-style: none !important;
}

#star-login-help .star-login-help__steps > li {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 11px !important;

    margin: 0 !important;
    padding: 16px !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-radius: 12px !important;

    background: #ffffff !important;

    list-style: none !important;
    box-shadow: 0 4px 12px rgba(23, 53, 72, 0.05) !important;

    box-sizing: border-box !important;
}

#star-login-help .star-login-help__step-number {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 32px !important;
    height: 32px !important;

    border-radius: 9px !important;

    background: var(--star-navy, #21465f) !important;
    color: #ffffff !important;

    font-size: 13px !important;
    font-weight: 700 !important;
}

#star-login-help .star-login-help__steps strong {
    display: block !important;
    margin: 1px 0 5px !important;

    color: var(--star-navy, #21465f) !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

#star-login-help .star-login-help__steps p {
    margin: 0 !important;

    color: var(--star-text-muted, #64727c) !important;

    font-size: 12.5px !important;
    line-height: 1.55 !important;
}


/* =========================================================
   SUPPORT AND EXAMPLE
   ========================================================= */

#star-login-help .star-login-help__details {
    display: grid !important;
    grid-template-columns: minmax(0, 1.4fr) minmax(230px, 0.6fr) !important;
    gap: 14px !important;

    margin: 0 0 16px !important;
}

#star-login-help .star-login-help__support,
#star-login-help .star-login-help__example {
    margin: 0 !important;
    padding: 16px 18px !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-radius: 12px !important;

    background: var(--star-surface-soft, #f7f9fa) !important;

    box-sizing: border-box !important;
}

#star-login-help .star-login-help__details h3 {
    margin: 0 0 6px !important;

    color: var(--star-navy, #21465f) !important;

    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

#star-login-help .star-login-help__support p {
    margin: 0 !important;

    color: var(--star-text-muted, #64727c) !important;

    font-size: 13px !important;
    line-height: 1.55 !important;
}

#star-login-help .star-login-help__example dl {
    margin: 0 !important;
}

#star-login-help .star-login-help__example dl > div {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;

    padding: 5px 0 !important;
}

#star-login-help .star-login-help__example dt {
    color: var(--star-text-muted, #64727c) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

#star-login-help .star-login-help__example dd {
    margin: 0 !important;
}

#star-login-help .star-login-help__example code {
    padding: 4px 7px !important;

    border: 1px solid #d5e0e5 !important;
    border-radius: 6px !important;

    background: #ffffff !important;
    color: var(--star-navy, #21465f) !important;

    font-size: 12px !important;
}


/* =========================================================
   COOKIES NOTE
   ========================================================= */

#star-login-help .star-login-help__cookies {
    margin: 0 !important;
    padding: 11px 14px !important;

    border-left: 4px solid var(--star-navy-light, #4faec3) !important;
    border-radius: 0 8px 8px 0 !important;

    background: rgba(79, 174, 195, 0.08) !important;
    color: var(--star-text, #25333d) !important;

    font-size: 12.5px !important;
    line-height: 1.5 !important;
}


/* =========================================================
   TABLET AND MOBILE
   ========================================================= */

@media screen and (max-width: 959px) {
    #star-login-help .star-login-help__steps {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    #star-login-help .star-login-help__details {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media screen and (max-width: 639px) {
    #star-login-help {
        padding: 20px 16px !important;
        border-radius: 14px !important;
    }

    #star-login-help h2 {
        font-size: 22px !important;
    }

    #star-login-help .star-login-help__notice {
        grid-template-columns: 30px minmax(0, 1fr) !important;
        padding: 14px !important;
    }

    #star-login-help .star-login-help__notice-icon {
        width: 28px !important;
        height: 28px !important;
        font-size: 15px !important;
    }

    #star-login-help .star-login-help__steps > li {
        padding: 14px !important;
    }
}
/* =========================================================
   LOGIN PAGE TITLE SPACING
   ========================================================= */

body:has(#SingleColumnLayout #login)
#pageTitleDiv {
    width: 100% !important;
    margin: 0 0 24px !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid var(--star-border, #e4e9ec) !important;
    box-sizing: border-box !important;
}

/* Remove unpredictable heading margins inside the title wrapper. */
body:has(#SingleColumnLayout #login)
#pageTitleDiv h1,
body:has(#SingleColumnLayout #login)
#pageTitleDiv h2,
body:has(#SingleColumnLayout #login)
#pageTitleDiv h3 {
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure the instruction card does not pull toward the page title. */
body:has(#SingleColumnLayout #login)
#star-login-help {
    margin-top: 0 !important;
}

@media screen and (max-width: 639px) {
    body:has(#SingleColumnLayout #login)
    #pageTitleDiv {
        margin-bottom: 18px !important;
        padding-bottom: 12px !important;
    }
}
/* =========================================================
   COMMITTEE DIRECTORY TABLE
   ========================================================= */

/* Normalize the legacy form wrappers around this table. */
#FormContentPlaceHolder_panel_GridFormAjaxGridUpdatePanelli,
#FormContentPlaceHolder_panel_GridFormAjaxGridUpdatePanel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Scroll container for smaller screens. */
#FormContentPlaceHolder_panel_GridFormAjaxGridUpdatePanel
> div:first-child {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-radius: 16px !important;

    background: #ffffff !important;

    box-shadow:
        0 10px 26px rgba(23, 53, 72, 0.08) !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    box-sizing: border-box !important;
}


/* =========================================================
   TABLE BASE
   ========================================================= */

#FormContentPlaceHolder_panel_Grid {
    width: 100% !important;
    min-width: 820px !important;

    margin: 0 !important;

    border: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;

    background: #ffffff !important;

    font-family:
        "Poppins",
        "Open Sans",
        Verdana,
        Arial,
        sans-serif !important;

    box-sizing: border-box !important;
}

#FormContentPlaceHolder_panel_Grid
th,
#FormContentPlaceHolder_panel_Grid
td {
    vertical-align: middle !important;

    border: 0 !important;
    border-bottom: 1px solid var(--star-border, #e4e9ec) !important;

    box-sizing: border-box !important;
}


/* =========================================================
   TABLE HEADER
   ========================================================= */

#FormContentPlaceHolder_panel_Grid
tr.HeaderStyle {
    background: var(--star-navy, #21465f) !important;
}

#FormContentPlaceHolder_panel_Grid
tr.HeaderStyle > th {
    padding: 15px 16px !important;

    background: var(--star-navy, #21465f) !important;
    color: #ffffff !important;

    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: 0.03em !important;
    text-align: left !important;
    text-transform: uppercase !important;

    white-space: nowrap !important;
}

#FormContentPlaceHolder_panel_Grid
tr.HeaderStyle > th:first-child {
    border-top-left-radius: 15px !important;
}

#FormContentPlaceHolder_panel_Grid
tr.HeaderStyle > th:last-child {
    border-top-right-radius: 15px !important;
}

/* Center the short status/action columns. */
#FormContentPlaceHolder_panel_Grid
tr.HeaderStyle > th:nth-child(n + 3) {
    text-align: center !important;
}


/* =========================================================
   TABLE ROWS
   ========================================================= */

#FormContentPlaceHolder_panel_Grid
tr.RowStyle {
    background: #ffffff !important;
    transition:
        background-color 0.15s ease,
        box-shadow 0.15s ease !important;
}

#FormContentPlaceHolder_panel_Grid
tr.RowStyle:nth-child(odd) {
    background: var(--star-surface-soft, #f7f9fa) !important;
}

/*
 * The HTML has inline JavaScript that changes the row to yellow.
 * These !important rules replace that old hover effect.
 */
#FormContentPlaceHolder_panel_Grid
tr.RowStyle:hover {
    background: rgba(79, 174, 195, 0.10) !important;
}

#FormContentPlaceHolder_panel_Grid
tr.RowStyle > td {
    padding: 14px 16px !important;

    background: transparent !important;
    color: var(--star-text, #25333d) !important;

    font-size: 13px !important;
    line-height: 1.5 !important;
    text-align: left !important;
}

/* Center the status and action columns. */
#FormContentPlaceHolder_panel_Grid
tr.RowStyle > td:nth-child(n + 3) {
    text-align: center !important;
}


/* =========================================================
   COMMITTEE LINKS
   ========================================================= */

#FormContentPlaceHolder_panel_Grid
tr.RowStyle > td:first-child a {
    color: var(--star-navy, #21465f) !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;

    text-decoration: none !important;
}

#FormContentPlaceHolder_panel_Grid
tr.RowStyle > td:first-child a:hover,
#FormContentPlaceHolder_panel_Grid
tr.RowStyle > td:first-child a:focus {
    color: var(--star-navy-light, #4faec3) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;

    outline: none !important;
}


/* =========================================================
   STATUS BADGE
   ========================================================= */

#FormContentPlaceHolder_panel_Grid
.labeldesc {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 70px !important;
    min-height: 28px !important;

    padding: 5px 10px !important;

    border: 1px solid #d6dfe4 !important;
    border-radius: 999px !important;

    background: #eef2f4 !important;
    color: #5e6d76 !important;

    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: center !important;

    box-sizing: border-box !important;
}


/* =========================================================
   PAGER
   ========================================================= */

#FormContentPlaceHolder_panel_Grid
tr.PagerStyle > td {
    padding: 14px 16px !important;

    border-bottom: 0 !important;

    background: var(--star-surface-soft, #f7f9fa) !important;
}

#FormContentPlaceHolder_panel_Grid
tr.PagerStyle > td > table {
    width: 100% !important;
    margin: 0 !important;

    border-collapse: collapse !important;
}

#FormContentPlaceHolder_panel_Grid
tr.PagerStyle > td > table > tbody > tr {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;

    width: 100% !important;
}

#FormContentPlaceHolder_panel_Grid
tr.PagerStyle > td > table > tbody > tr > td {
    display: block !important;

    width: auto !important;
    padding: 0 !important;

    border: 0 !important;

    font-size: 12px !important;
}

/* Current page and page links. */
#FormContentPlaceHolder_panel_Grid
tr.PagerStyle > td > table > tbody > tr > td
> span,
#FormContentPlaceHolder_panel_Grid
tr.PagerStyle > td > table > tbody > tr > td
> a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 34px !important;
    height: 34px !important;

    padding: 0 9px !important;

    border: 1px solid #d4dfe4 !important;
    border-radius: 8px !important;

    background: #ffffff !important;
    color: var(--star-navy, #21465f) !important;

    font-size: 12px !important;
    font-weight: 700 !important;
    text-decoration: none !important;

    box-sizing: border-box !important;
}

/* Selected page number. */
#FormContentPlaceHolder_panel_Grid
tr.PagerStyle > td > table > tbody > tr > td
> span {
    border-color: var(--star-navy, #21465f) !important;
    background: var(--star-navy, #21465f) !important;
    color: #ffffff !important;
}

#FormContentPlaceHolder_panel_Grid
tr.PagerStyle a:hover,
#FormContentPlaceHolder_panel_Grid
tr.PagerStyle a:focus {
    border-color: var(--star-navy-light, #4faec3) !important;
    background: rgba(79, 174, 195, 0.10) !important;

    outline: 3px solid rgba(79, 174, 195, 0.15) !important;
    outline-offset: 1px !important;
}

/* Page-size and result-summary sections. */
#FormContentPlaceHolder_panel_Grid
tr.PagerStyle > td > table > tbody > tr
> td:nth-last-child(2) {
    margin-left: auto !important;
}

#FormContentPlaceHolder_panel_Grid
tr.PagerStyle select {
    min-height: 34px !important;

    margin-left: 7px !important;
    padding: 5px 30px 5px 9px !important;

    border: 1px solid #ccd8de !important;
    border-radius: 8px !important;

    background-color: #ffffff !important;
    color: var(--star-text, #25333d) !important;

    font-size: 12px !important;

    box-sizing: border-box !important;
}

#FormContentPlaceHolder_panel_Grid
tr.PagerStyle div,
#FormContentPlaceHolder_panel_Grid
tr.PagerStyle div > span {
    color: var(--star-text-muted, #64727c) !important;

    font-size: 12px !important;
    line-height: 1.4 !important;
}


/* =========================================================
   TABLET AND MOBILE
   ========================================================= */

@media screen and (max-width: 959px) {
    #FormContentPlaceHolder_panel_Grid {
        min-width: 760px !important;
    }

    #FormContentPlaceHolder_panel_Grid
    tr.PagerStyle > td > table > tbody > tr {
        flex-wrap: wrap !important;
    }

    #FormContentPlaceHolder_panel_Grid
    tr.PagerStyle > td > table > tbody > tr
    > td:nth-last-child(2) {
        margin-left: 0 !important;
    }

    #FormContentPlaceHolder_panel_Grid
    tr.PagerStyle > td > table > tbody > tr
    > td:nth-last-child(-n + 2) {
        flex: 1 1 100% !important;
        margin-top: 8px !important;
    }

    #FormContentPlaceHolder_panel_Grid
    tr.PagerStyle > td > table > tbody > tr
    > td:last-child > div {
        text-align: left !important;
    }
}

@media screen and (max-width: 639px) {
    #FormContentPlaceHolder_panel_GridFormAjaxGridUpdatePanel
    > div:first-child {
        border-radius: 12px !important;
    }

    #FormContentPlaceHolder_panel_Grid
    th,
    #FormContentPlaceHolder_panel_Grid
    td {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}
/* =========================================================
   MEMBER DIRECTORY — SEARCH FORM AND RESULTS
   ========================================================= */

/*
 * Scope this section only to the Member Directory page.
 */
body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
#SingleColumnLayout {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 24px 16px 40px !important;

    box-sizing: border-box !important;
}

/* Reset the legacy 16-column wrapper. */
body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
#SingleColumnLayout > .sixteen.floated {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
    clear: both !important;

    box-sizing: border-box !important;
}


/* =========================================================
   DIRECTORY FORM CARD
   ========================================================= */

body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
#FormContentPlaceHolder_editForm {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
#FormContentPlaceHolder_editForm > .editForm {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 28px !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-top: 4px solid var(--star-navy-light, #4faec3) !important;
    border-radius: 18px !important;

    background: var(--star-surface, #ffffff) !important;

    box-shadow:
        var(
            --star-card-shadow,
            0 12px 30px rgba(23, 53, 72, 0.09)
        ) !important;

    box-sizing: border-box !important;
}


/* =========================================================
   DIRECTORY FORM ROWS
   ========================================================= */

body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
#FormContentPlaceHolder_editForm
> .editForm
> .row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: 22px 26px !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 0 24px !important;
    padding: 0 !important;

    float: none !important;
    clear: both !important;

    box-sizing: border-box !important;
}

/*
 * Remove legacy clearfix pseudo-elements.
 * Otherwise they become invisible grid items and shift fields.
 */
body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
#FormContentPlaceHolder_editForm
> .editForm
> .row::before,
body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
#FormContentPlaceHolder_editForm
> .editForm
> .row::after {
    display: none !important;
    content: none !important;
}

/* Reset legacy span widths and inline padding. */
body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
#FormContentPlaceHolder_editForm
> .editForm
> .row
> .span5,
body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
#FormContentPlaceHolder_editForm
> .editForm
> .row
> .span10 {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
    clear: none !important;

    box-sizing: border-box !important;
}

/* Button and results rows occupy the full form width. */
body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
#FormContentPlaceHolder_editForm
> .editForm
> .row:has(> .span10) {
    grid-template-columns: minmax(0, 1fr) !important;
}

body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
#FormContentPlaceHolder_editForm
> .editForm
> .row
> .span10 {
    grid-column: 1 / -1 !important;
}


/* =========================================================
   LABELS
   ========================================================= */

body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
#FormContentPlaceHolder_editForm
h3,
body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
#FormContentPlaceHolder_editForm
h3.desc {
    margin: 0 0 7px !important;
    padding: 0 !important;

    color: var(--star-navy, #21465f) !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;

    letter-spacing: 0.01em !important;
    text-transform: none !important;
}

body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
#FormContentPlaceHolder_editForm
h3 span {
    color: var(--star-text-muted, #64727c) !important;

    font-size: 11px !important;
    font-weight: 500 !important;
}

/* Add spacing between multiple fields in the same column. */
body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
#FormContentPlaceHolder_editForm
.span5 > .input-control + h3,
body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
#FormContentPlaceHolder_editForm
.span5 > div + h3 {
    margin-top: 20px !important;
}


/* =========================================================
   INPUT CONTROL WRAPPERS
   ========================================================= */

body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
#FormContentPlaceHolder_editForm
.input-control {
    display: block !important;
    position: relative !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;

    float: none !important;

    box-sizing: border-box !important;
}


/* =========================================================
   TEXT INPUTS AND SELECTS
   ========================================================= */

body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
#FormContentPlaceHolder_editForm
.input-control input[type="text"],
body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
#FormContentPlaceHolder_editForm
.input-control select {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 46px !important;

    margin: 0 !important;
    padding: 10px 13px !important;

    border: 1px solid #ccd8de !important;
    border-radius: 9px !important;

    background-color: #ffffff !important;
    color: var(--star-text, #25333d) !important;

    font-family:
        "Poppins",
        "Open Sans",
        Verdana,
        Arial,
        sans-serif !important;

    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;

    box-shadow:
        0 1px 2px rgba(23, 53, 72, 0.04) !important;

    box-sizing: border-box !important;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease !important;
}

body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
#FormContentPlaceHolder_editForm
.input-control input:focus,
body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
#FormContentPlaceHolder_editForm
.input-control select:focus {
    border-color: var(--star-navy-light, #4faec3) !important;

    outline: none !important;

    box-shadow:
        0 0 0 3px rgba(79, 174, 195, 0.17) !important;
}

/* Hide the unused helper buttons beside text fields. */
body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
#FormContentPlaceHolder_editForm
.input-control.text > button.helper {
    display: none !important;
}


/* =========================================================
   SERVICES PROVIDED CHECKBOXES
   ========================================================= */

body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
#FormContentPlaceHolder_editForm_servicesProvidedli {
    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
#FormContentPlaceHolder_editForm_servicesProvided {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;

    border: 0 !important;
    border-collapse: collapse !important;

    background: transparent !important;
}

body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
#FormContentPlaceHolder_editForm_servicesProvided
tbody,
body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
#FormContentPlaceHolder_editForm_servicesProvided
tr {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;

    width: 100% !important;
}

body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
#FormContentPlaceHolder_editForm_servicesProvided
td {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
}

body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
#FormContentPlaceHolder_editForm_servicesProvided
label.input-control.checkbox {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;

    width: 100% !important;
    min-height: 44px !important;

    margin: 0 !important;
    padding: 10px 12px !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-radius: 9px !important;

    background: var(--star-surface-soft, #f7f9fa) !important;
    color: var(--star-navy, #21465f) !important;

    font-size: 12.5px !important;
    font-weight: 600 !important;

    cursor: pointer !important;
    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
#FormContentPlaceHolder_editForm_servicesProvided
input[type="checkbox"] {
    flex: 0 0 auto !important;

    width: 18px !important;
    height: 18px !important;

    margin: 0 !important;

    accent-color: var(--star-navy, #21465f) !important;
}

body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
#FormContentPlaceHolder_editForm_servicesProvided
span.helper {
    display: inline !important;

    color: inherit !important;

    font-size: inherit !important;
    line-height: 1.35 !important;
}


/* =========================================================
   VALIDATION
   ========================================================= */

body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
#FormContentPlaceHolder_editForm
p.error {
    margin: 5px 0 0 !important;
    padding: 0 !important;

    color: var(--star-coral-dark, #dc5961) !important;

    font-size: 11px !important;
    line-height: 1.45 !important;
}


/* =========================================================
   SEARCH AND CANCEL BUTTONS
   ========================================================= */

body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
#FormContentPlaceHolder_editForm_initialSearchButtonStripli {
    width: 100% !important;

    margin: 4px 0 0 !important;
    padding: 20px 0 0 !important;

    border-top: 1px solid var(--star-border, #e4e9ec) !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
#FormContentPlaceHolder_editForm_initialSearchButtonStripli::before,
body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
#FormContentPlaceHolder_editForm_initialSearchButtonStripli::after {
    display: none !important;
    content: none !important;
}

body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
#FormContentPlaceHolder_editForm_initialSearchButtonStripli
.button-set {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
#FormContentPlaceHolder_editForm_initialSearchButtonStripli
input.button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 110px !important;
    min-height: 43px !important;

    margin: 0 !important;
    padding: 9px 18px !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-radius: 9px !important;

    background: var(--star-surface-soft, #f7f9fa) !important;
    color: var(--star-navy, #21465f) !important;

    font-family:
        "Poppins",
        "Open Sans",
        Verdana,
        Arial,
        sans-serif !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;

    cursor: pointer !important;
    box-sizing: border-box !important;
}

/* Search button. */
body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
#FormContentPlaceHolder_editForm_initialSearchButtonStrip_searchButton {
    border-color: var(--star-navy, #21465f) !important;

    background: linear-gradient(
        135deg,
        var(--star-navy, #21465f),
        var(--star-navy-dark, #173548)
    ) !important;

    color: #ffffff !important;

    box-shadow:
        0 7px 16px rgba(33, 70, 95, 0.23) !important;
}

body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
#FormContentPlaceHolder_editForm_initialSearchButtonStripli
input.button:hover,
body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
#FormContentPlaceHolder_editForm_initialSearchButtonStripli
input.button:focus {
    border-color: var(--star-navy-light, #4faec3) !important;

    outline: 3px solid rgba(79, 174, 195, 0.17) !important;
    outline-offset: 2px !important;
}


/* =========================================================
   DIRECTORY RESULTS
   ========================================================= */

body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
#FormContentPlaceHolder_editForm_resultsGridFormAjaxGridUpdatePanelli,
body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
#FormContentPlaceHolder_editForm_resultsGridFormAjaxGridUpdatePanel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}

/*
 * This applies when RAMCO inserts the directory results table
 * into the update panel after a search.
 */
body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
#FormContentPlaceHolder_editForm_resultsGridFormAjaxGridUpdatePanel
table.standard-table {
    width: 100% !important;
    min-width: 760px !important;

    margin: 0 !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 14px !important;

    background: #ffffff !important;

    overflow: hidden !important;

    font-family:
        "Poppins",
        "Open Sans",
        Verdana,
        Arial,
        sans-serif !important;
}

body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
#FormContentPlaceHolder_editForm_resultsGridFormAjaxGridUpdatePanel
table.standard-table
tr.HeaderStyle > th {
    padding: 14px 15px !important;

    border: 0 !important;
    border-bottom: 1px solid #16394f !important;

    background: var(--star-navy, #21465f) !important;
    color: #ffffff !important;

    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    text-align: left !important;
    text-transform: uppercase !important;
}

body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
#FormContentPlaceHolder_editForm_resultsGridFormAjaxGridUpdatePanel
table.standard-table
tr.RowStyle > td {
    padding: 13px 15px !important;

    border: 0 !important;
    border-bottom: 1px solid var(--star-border, #e4e9ec) !important;

    background: #ffffff !important;
    color: var(--star-text, #25333d) !important;

    font-size: 13px !important;
    line-height: 1.5 !important;
}

body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
#FormContentPlaceHolder_editForm_resultsGridFormAjaxGridUpdatePanel
table.standard-table
tr.RowStyle:nth-child(odd) > td {
    background: var(--star-surface-soft, #f7f9fa) !important;
}

body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
#FormContentPlaceHolder_editForm_resultsGridFormAjaxGridUpdatePanel
table.standard-table
tr.RowStyle:hover > td {
    background: rgba(79, 174, 195, 0.10) !important;
}


/* Hide the unused Home Page layout rendered below this page. */
body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
#formPanel > #TwoColumnHomePageLayout {
    display: none !important;
}


/* =========================================================
   TABLET — 640px TO 959px
   ========================================================= */

@media screen and (min-width: 640px) and (max-width: 959px) {
    body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
    #FormContentPlaceHolder_editForm
    > .editForm
    > .row {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 20px !important;
    }

    body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
    #FormContentPlaceHolder_editForm
    > .editForm {
        padding: 22px !important;
    }
}


/* =========================================================
   MOBILE — BELOW 640px
   ========================================================= */

@media screen and (max-width: 639px) {
    body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
    #SingleColumnLayout {
        padding: 12px 0 30px !important;
    }

    body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
    #FormContentPlaceHolder_editForm
    > .editForm {
        padding: 18px 15px !important;
        border-radius: 14px !important;
    }

    body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
    #FormContentPlaceHolder_editForm
    > .editForm
    > .row {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 18px !important;
    }

    body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
    #FormContentPlaceHolder_editForm_servicesProvided
    tbody,
    body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
    #FormContentPlaceHolder_editForm_servicesProvided
    tr {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
    #FormContentPlaceHolder_editForm_initialSearchButtonStripli
    .button-set {
        flex-direction: column-reverse !important;
    }

    body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
    #FormContentPlaceHolder_editForm_initialSearchButtonStripli
    input.button {
        width: 100% !important;
    }

    body:has(#FormContentPlaceHolder_editForm_memberTypePicklist)
    #FormContentPlaceHolder_editForm_resultsGridFormAjaxGridUpdatePanel {
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }
}
/* =========================================================
   CONTRIBUTION PAGE — CURRENT AND PAST CYCLES
   ========================================================= */

/* Normalize the contribution form and legacy rows. */
body:has(#FormContentPlaceHolder_editForm_currentCyclesGrid)
#FormContentPlaceHolder_editForm,
body:has(#FormContentPlaceHolder_editForm_currentCyclesGrid)
#FormContentPlaceHolder_editForm > .editForm {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_editForm_currentCyclesGrid)
#FormContentPlaceHolder_editForm
> .editForm
> .row {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
    float: none !important;
    clear: both !important;
    box-sizing: border-box !important;
}

/* Remove legacy clearfix items. */
body:has(#FormContentPlaceHolder_editForm_currentCyclesGrid)
#FormContentPlaceHolder_editForm
> .editForm
> .row::before,
body:has(#FormContentPlaceHolder_editForm_currentCyclesGrid)
#FormContentPlaceHolder_editForm
> .editForm
> .row::after {
    display: none !important;
    content: none !important;
}

/* Reset the legacy full-width span. */
body:has(#FormContentPlaceHolder_editForm_currentCyclesGrid)
#FormContentPlaceHolder_editForm
> .editForm
> .row
> .span10 {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
}


/* =========================================================
   TABLE WRAPPERS
   ========================================================= */

#FormContentPlaceHolder_editForm_currentCyclesGridFormAjaxGridUpdatePanelli,
#FormContentPlaceHolder_editForm_currentCyclesGridFormAjaxGridUpdatePanel,
#FormContentPlaceHolder_editForm_pastLevelsGridFormAjaxGridUpdatePanelli,
#FormContentPlaceHolder_editForm_pastLevelsGridFormAjaxGridUpdatePanel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Visible table containers. */
#FormContentPlaceHolder_editForm_currentCyclesGridFormAjaxGridUpdatePanel
> div:first-child,
#FormContentPlaceHolder_editForm_pastLevelsGridFormAjaxGridUpdatePanel
> div:first-child {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-radius: 16px !important;

    background: #ffffff !important;

    box-shadow:
        0 10px 26px rgba(23, 53, 72, 0.08) !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    box-sizing: border-box !important;
}


/* =========================================================
   CONTRIBUTION TABLE BASE
   ========================================================= */

#FormContentPlaceHolder_editForm_currentCyclesGrid,
#FormContentPlaceHolder_editForm_pastLevelsGrid {
    width: 100% !important;
    min-width: 620px !important;

    margin: 0 !important;

    border: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;

    background: #ffffff !important;

    font-family:
        "Poppins",
        "Open Sans",
        Verdana,
        Arial,
        sans-serif !important;

    box-sizing: border-box !important;
}

#FormContentPlaceHolder_editForm_currentCyclesGrid th,
#FormContentPlaceHolder_editForm_currentCyclesGrid td,
#FormContentPlaceHolder_editForm_pastLevelsGrid th,
#FormContentPlaceHolder_editForm_pastLevelsGrid td {
    vertical-align: middle !important;

    border: 0 !important;
    border-bottom: 1px solid var(--star-border, #e4e9ec) !important;

    box-sizing: border-box !important;
}


/* =========================================================
   CURRENT CYCLE HEADER
   ========================================================= */

#FormContentPlaceHolder_editForm_currentCyclesGrid
tr.HeaderStyle {
    background: var(--star-navy, #21465f) !important;
}

#FormContentPlaceHolder_editForm_currentCyclesGrid
tr.HeaderStyle > th {
    padding: 15px 17px !important;

    background: var(--star-navy, #21465f) !important;
    color: #ffffff !important;

    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: 0.03em !important;
    text-align: left !important;
    text-transform: uppercase !important;

    white-space: nowrap !important;
}

#FormContentPlaceHolder_editForm_currentCyclesGrid
tr.HeaderStyle > th:first-child {
    border-top-left-radius: 15px !important;
}

#FormContentPlaceHolder_editForm_currentCyclesGrid
tr.HeaderStyle > th:last-child {
    border-top-right-radius: 15px !important;
}

/* Center contribution amount and level columns. */
#FormContentPlaceHolder_editForm_currentCyclesGrid
tr.HeaderStyle > th:nth-child(n + 2) {
    text-align: center !important;
}


/* =========================================================
   CURRENT CYCLE ROWS
   ========================================================= */

#FormContentPlaceHolder_editForm_currentCyclesGrid
tr.RowStyle {
    background: #ffffff !important;

    transition:
        background-color 0.15s ease,
        box-shadow 0.15s ease !important;
}

/* Override the legacy inline yellow hover effect. */
#FormContentPlaceHolder_editForm_currentCyclesGrid
tr.RowStyle:hover {
    background: rgba(79, 174, 195, 0.10) !important;
}

#FormContentPlaceHolder_editForm_currentCyclesGrid
tr.RowStyle > td {
    padding: 17px !important;

    background: transparent !important;
    color: var(--star-text, #25333d) !important;

    font-size: 13px !important;
    line-height: 1.5 !important;
    text-align: left !important;
}

/* Center contribution amount and level values. */
#FormContentPlaceHolder_editForm_currentCyclesGrid
tr.RowStyle > td:nth-child(n + 2) {
    text-align: center !important;
}


/* =========================================================
   CYCLE LINK
   ========================================================= */

#FormContentPlaceHolder_editForm_currentCyclesGrid
tr.RowStyle > td:first-child a {
    display: inline-flex !important;
    align-items: center !important;

    color: var(--star-navy, #21465f) !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;

    text-decoration: none !important;
}

#FormContentPlaceHolder_editForm_currentCyclesGrid
tr.RowStyle > td:first-child a:hover,
#FormContentPlaceHolder_editForm_currentCyclesGrid
tr.RowStyle > td:first-child a:focus {
    color: var(--star-navy-light, #4faec3) !important;

    text-decoration: underline !important;
    text-underline-offset: 3px !important;

    outline: none !important;
}


/* =========================================================
   CONTRIBUTION AMOUNT
   ========================================================= */

#FormContentPlaceHolder_editForm_currentCyclesGrid
tr.RowStyle > td:nth-child(2) {
    color: var(--star-navy, #21465f) !important;

    font-size: 14px !important;
    font-weight: 700 !important;
}


/* =========================================================
   EMPTY PAST-CONTRIBUTION STATE
   ========================================================= */

#FormContentPlaceHolder_editForm_pastLevelsGrid {
    min-width: 0 !important;
}

#FormContentPlaceHolder_editForm_pastLevelsGrid
tr.EmptyRowStyle > td {
    padding: 34px 22px !important;

    border-bottom: 0 !important;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            var(--star-surface-soft, #f7f9fa) 100%
        ) !important;

    color: var(--star-text-muted, #64727c) !important;

    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.55 !important;
    text-align: center !important;
}

#FormContentPlaceHolder_editForm_pastLevelsGrid
tr.EmptyRowStyle > td::before {
    display: block !important;

    width: 42px !important;
    height: 42px !important;

    margin: 0 auto 12px !important;

    border-radius: 50% !important;

    background:
        rgba(79, 174, 195, 0.12) !important;

    color: var(--star-navy-light, #4faec3) !important;

    content: "—" !important;

    font-size: 23px !important;
    font-weight: 700 !important;
    line-height: 42px !important;
    text-align: center !important;
}


/* =========================================================
   LOADING INDICATORS
   ========================================================= */

#FormContentPlaceHolder_editForm_currentCyclesGridFormAjaxGridUpdateProgress,
#FormContentPlaceHolder_editForm_pastLevelsGridFormAjaxGridUpdateProgress {
    width: 100% !important;
    min-width: 0 !important;
}


/* =========================================================
   TABLET AND MOBILE
   ========================================================= */

@media screen and (max-width: 959px) {
    #FormContentPlaceHolder_editForm_currentCyclesGrid {
        min-width: 580px !important;
    }
}

@media screen and (max-width: 639px) {
    #FormContentPlaceHolder_editForm_currentCyclesGridFormAjaxGridUpdatePanel
    > div:first-child,
    #FormContentPlaceHolder_editForm_pastLevelsGridFormAjaxGridUpdatePanel
    > div:first-child {
        border-radius: 12px !important;
    }

    #FormContentPlaceHolder_editForm_currentCyclesGrid
    tr.HeaderStyle > th,
    #FormContentPlaceHolder_editForm_currentCyclesGrid
    tr.RowStyle > td {
        padding-left: 13px !important;
        padding-right: 13px !important;
    }

    #FormContentPlaceHolder_editForm_pastLevelsGrid
    tr.EmptyRowStyle > td {
        padding: 28px 16px !important;
    }
}
/* =========================================================
   RPAC CONTRIBUTION FORM
   ========================================================= */

/* Normalize the legacy outer column on this page. */
body:has(#FormContentPlaceHolder_panel_amountTextBox)
.sixteen.floated:has(#FormContentPlaceHolder_panel) {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 24px 16px 40px !important;
    float: none !important;
    clear: both !important;
    box-sizing: border-box !important;
}


/* =========================================================
   FORM CARD
   ========================================================= */

body:has(#FormContentPlaceHolder_panel_amountTextBox)
#FormContentPlaceHolder_panelDiv,
body:has(#FormContentPlaceHolder_panel_amountTextBox)
#FormContentPlaceHolder_panel {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_panel_amountTextBox)
#FormContentPlaceHolder_panel {
    max-width: 760px !important;
    margin: 0 auto !important;
    padding: 28px !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-top: 4px solid var(--star-navy-light, #4faec3) !important;
    border-radius: 18px !important;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f9fbfc 100%
        ) !important;

    box-shadow:
        0 12px 30px rgba(23, 53, 72, 0.09) !important;
}

body:has(#FormContentPlaceHolder_panel_amountTextBox)
#FormContentPlaceHolder_panel > .editForm {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}


/* =========================================================
   FORM ROWS
   ========================================================= */

body:has(#FormContentPlaceHolder_panel_amountTextBox)
#FormContentPlaceHolder_panel
> .editForm
> .row {
    display: block !important;
    position: static !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 0 22px !important;
    padding: 0 !important;

    float: none !important;
    clear: both !important;

    box-sizing: border-box !important;
}

/* Remove legacy clearfix elements. */
body:has(#FormContentPlaceHolder_panel_amountTextBox)
#FormContentPlaceHolder_panel
> .editForm
> .row::before,
body:has(#FormContentPlaceHolder_panel_amountTextBox)
#FormContentPlaceHolder_panel
> .editForm
> .row::after {
    display: none !important;
    content: none !important;
}

/* Reset legacy span widths and floats. */
body:has(#FormContentPlaceHolder_panel_amountTextBox)
#FormContentPlaceHolder_panel
> .editForm
> .row
> .span10 {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
    clear: none !important;

    box-sizing: border-box !important;
}

/* Remove unnecessary spacing from empty validation rows. */
body:has(#FormContentPlaceHolder_panel_amountTextBox)
#FormContentPlaceHolder_panel
> .editForm
> .row:has(#FormContentPlaceHolder_panel_validationSummaryli:empty) {
    display: none !important;
}


/* =========================================================
   CONTRIBUTION SECTION HEADING
   ========================================================= */

body:has(#FormContentPlaceHolder_panel_amountTextBox)
#FormContentPlaceHolder_panel_contributionSectionli {
    position: relative !important;

    width: 100% !important;

    margin: 0 0 4px !important;
    padding: 0 0 18px !important;

    border-bottom: 1px solid var(--star-border, #e4e9ec) !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_panel_amountTextBox)
#FormContentPlaceHolder_panel_contributionSectionli::before {
    display: block !important;

    width: 42px !important;
    height: 4px !important;

    margin: 0 0 12px !important;

    border-radius: 999px !important;

    background: var(--star-navy-light, #4faec3) !important;

    content: "" !important;
}

body:has(#FormContentPlaceHolder_panel_amountTextBox)
#FormContentPlaceHolder_panel_contributionSectionli h3 {
    margin: 0 !important;
    padding: 0 !important;

    color: var(--star-navy, #21465f) !important;

    font-size: 23px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}


/* =========================================================
   FIELD LABELS
   ========================================================= */

body:has(#FormContentPlaceHolder_panel_amountTextBox)
#FormContentPlaceHolder_panel
h3.desc {
    margin: 0 0 8px !important;
    padding: 0 !important;

    color: var(--star-navy, #21465f) !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

body:has(#FormContentPlaceHolder_panel_amountTextBox)
#FormContentPlaceHolder_panel
h3.desc span {
    color: var(--star-text-muted, #64727c) !important;

    font-size: 11px !important;
    font-weight: 500 !important;
}


/* =========================================================
   CARD TYPE RADIO BUTTONS
   ========================================================= */

body:has(#FormContentPlaceHolder_panel_amountTextBox)
#FormContentPlaceHolder_panel_contributionTypeRadioButtonli {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_panel_amountTextBox)
#FormContentPlaceHolder_panel_contributionTypeRadioButton {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_panel_amountTextBox)
#FormContentPlaceHolder_panel_contributionTypeRadioButton
label.input-control.radio {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;

    margin: 0 !important;
    padding: 11px 14px !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-radius: 10px !important;

    background: var(--star-surface-soft, #f7f9fa) !important;
    color: var(--star-navy, #21465f) !important;

    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;

    cursor: pointer !important;
    box-sizing: border-box !important;

    transition:
        border-color 0.15s ease,
        background-color 0.15s ease,
        box-shadow 0.15s ease !important;
}

body:has(#FormContentPlaceHolder_panel_amountTextBox)
#FormContentPlaceHolder_panel_contributionTypeRadioButton
label.input-control.radio:hover {
    border-color: var(--star-navy-light, #4faec3) !important;
    background: rgba(79, 174, 195, 0.08) !important;
}

body:has(#FormContentPlaceHolder_panel_amountTextBox)
#FormContentPlaceHolder_panel_contributionTypeRadioButton
input[type="radio"] {
    flex: 0 0 auto !important;

    width: 18px !important;
    height: 18px !important;

    margin: 0 !important;

    accent-color: var(--star-navy, #21465f) !important;
}

body:has(#FormContentPlaceHolder_panel_amountTextBox)
#FormContentPlaceHolder_panel_contributionTypeRadioButton
input[type="radio"]:checked
~ span:last-child {
    color: var(--star-navy, #21465f) !important;
    font-weight: 700 !important;
}

/* Hide the empty legacy helper span beside each radio. */
body:has(#FormContentPlaceHolder_panel_amountTextBox)
#FormContentPlaceHolder_panel_contributionTypeRadioButton
label.input-control.radio
> span.helper:empty {
    display: none !important;
}


/* =========================================================
   CONTRIBUTION AMOUNT
   ========================================================= */

body:has(#FormContentPlaceHolder_panel_amountTextBox)
#FormContentPlaceHolder_panel_amountTextBoxli {
    position: relative !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_panel_amountTextBox)
#FormContentPlaceHolder_panel_amountTextBoxli::before {
    position: absolute !important;
    top: 0 !important;
    left: 14px !important;
    z-index: 2 !important;

    display: flex !important;
    align-items: center !important;

    height: 48px !important;

    color: var(--star-navy, #21465f) !important;

    content: "$" !important;

    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    pointer-events: none !important;
}

body:has(#FormContentPlaceHolder_panel_amountTextBox)
#FormContentPlaceHolder_panel_amountTextBox {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 48px !important;

    margin: 0 !important;
    padding: 11px 14px 11px 31px !important;

    border: 1px solid #ccd8de !important;
    border-radius: 10px !important;

    background: #ffffff !important;
    color: var(--star-text, #25333d) !important;

    font-family:
        "Poppins",
        "Open Sans",
        Verdana,
        Arial,
        sans-serif !important;

    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;

    box-shadow:
        0 1px 2px rgba(23, 53, 72, 0.04) !important;

    box-sizing: border-box !important;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease !important;
}

body:has(#FormContentPlaceHolder_panel_amountTextBox)
#FormContentPlaceHolder_panel_amountTextBox:focus {
    border-color: var(--star-navy-light, #4faec3) !important;

    outline: none !important;

    box-shadow:
        0 0 0 3px rgba(79, 174, 195, 0.17) !important;
}

/* Hide the legacy helper button beside the amount input. */
body:has(#FormContentPlaceHolder_panel_amountTextBox)
#FormContentPlaceHolder_panel_amountTextBoxli
> button.helper {
    display: none !important;
}


/* =========================================================
   VALIDATION
   ========================================================= */

body:has(#FormContentPlaceHolder_panel_amountTextBox)
#FormContentPlaceHolder_panel
p.error {
    margin: 6px 0 0 !important;
    padding: 0 !important;

    color: var(--star-coral-dark, #dc5961) !important;

    font-size: 11px !important;
    line-height: 1.45 !important;
}


/* =========================================================
   CANCEL AND CONTINUE BUTTONS
   ========================================================= */

body:has(#FormContentPlaceHolder_panel_amountTextBox)
#FormContentPlaceHolder_panel_panel_WizardNavigationli {
    width: 100% !important;

    margin: 6px 0 0 !important;
    padding: 22px 0 0 !important;

    border-top: 1px solid var(--star-border, #e4e9ec) !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_panel_amountTextBox)
#FormContentPlaceHolder_panel_panel_WizardNavigationli::before,
body:has(#FormContentPlaceHolder_panel_amountTextBox)
#FormContentPlaceHolder_panel_panel_WizardNavigationli::after {
    display: none !important;
    content: none !important;
}

body:has(#FormContentPlaceHolder_panel_amountTextBox)
#FormContentPlaceHolder_panel_panel_WizardNavigationli
.button-set {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_panel_amountTextBox)
#FormContentPlaceHolder_panel_panel_WizardNavigationli
input.button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 115px !important;
    min-height: 44px !important;

    margin: 0 !important;
    padding: 10px 19px !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-radius: 9px !important;

    background: var(--star-surface-soft, #f7f9fa) !important;
    color: var(--star-navy, #21465f) !important;

    font-family:
        "Poppins",
        "Open Sans",
        Verdana,
        Arial,
        sans-serif !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;

    cursor: pointer !important;
    box-sizing: border-box !important;
}

/* Continue button. */
body:has(#FormContentPlaceHolder_panel_amountTextBox)
#FormContentPlaceHolder_panel_panel_WizardNavigation__WizardContinueButton {
    border-color: var(--star-navy, #21465f) !important;

    background:
        linear-gradient(
            135deg,
            var(--star-navy, #21465f),
            var(--star-navy-dark, #173548)
        ) !important;

    color: #ffffff !important;

    box-shadow:
        0 7px 16px rgba(33, 70, 95, 0.23) !important;
}

body:has(#FormContentPlaceHolder_panel_amountTextBox)
#FormContentPlaceHolder_panel_panel_WizardNavigationli
input.button:hover,
body:has(#FormContentPlaceHolder_panel_amountTextBox)
#FormContentPlaceHolder_panel_panel_WizardNavigationli
input.button:focus {
    border-color: var(--star-navy-light, #4faec3) !important;

    transform: translateY(-1px) !important;

    outline:
        3px solid rgba(79, 174, 195, 0.17) !important;

    outline-offset: 2px !important;
}


/* =========================================================
   UNUSED LIGHTBOX ROW
   ========================================================= */

body:has(#FormContentPlaceHolder_panel_amountTextBox)
#FormContentPlaceHolder_panel
> .editForm
> .row:has(#FormContentPlaceHolder_panel_panelLightboxli) {
    display: none !important;
}


/* =========================================================
   TABLET AND MOBILE
   ========================================================= */

@media screen and (max-width: 959px) {
    body:has(#FormContentPlaceHolder_panel_amountTextBox)
    #FormContentPlaceHolder_panel {
        max-width: 100% !important;
    }
}

@media screen and (max-width: 639px) {
    body:has(#FormContentPlaceHolder_panel_amountTextBox)
    .sixteen.floated:has(#FormContentPlaceHolder_panel) {
        padding: 12px 0 30px !important;
    }

    body:has(#FormContentPlaceHolder_panel_amountTextBox)
    #FormContentPlaceHolder_panel {
        padding: 20px 16px !important;
        border-radius: 14px !important;
    }

    body:has(#FormContentPlaceHolder_panel_amountTextBox)
    #FormContentPlaceHolder_panel_contributionSectionli h3 {
        font-size: 20px !important;
    }

    body:has(#FormContentPlaceHolder_panel_amountTextBox)
    #FormContentPlaceHolder_panel_contributionTypeRadioButton {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body:has(#FormContentPlaceHolder_panel_amountTextBox)
    #FormContentPlaceHolder_panel_panel_WizardNavigationli
    .button-set {
        flex-direction: column-reverse !important;
    }

    body:has(#FormContentPlaceHolder_panel_amountTextBox)
    #FormContentPlaceHolder_panel_panel_WizardNavigationli
    input.button {
        width: 100% !important;
    }
}
/* =========================================================
   RPAC CONTRIBUTION — PAYMENT INFORMATION
   ========================================================= */

/* Normalize the single-column page wrapper. */
body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#SingleColumnLayout {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 24px 16px 40px !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
.sixteen.floated:has(#FormContentPlaceHolder_panel) {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
    clear: both !important;

    box-sizing: border-box !important;
}


/* =========================================================
   PAYMENT FORM CARD
   ========================================================= */

body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panelDiv,
body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panel {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panel {
    max-width: 980px !important;

    margin: 0 auto !important;
    padding: 30px !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-top: 4px solid var(--star-navy-light, #4faec3) !important;
    border-radius: 18px !important;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f9fbfc 100%
        ) !important;

    box-shadow:
        0 12px 30px rgba(23, 53, 72, 0.09) !important;
}

body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panel > .editForm {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   FORM ROWS AND COLUMNS
   ========================================================= */

body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panel
> .editForm
> .row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: 24px !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 0 26px !important;
    padding: 0 !important;

    float: none !important;
    clear: both !important;

    box-sizing: border-box !important;
}

/* Remove legacy clearfix pseudo-elements. */
body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panel
> .editForm
> .row::before,
body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panel
> .editForm
> .row::after {
    display: none !important;
    content: none !important;
}

/* Reset legacy span widths and inline padding. */
body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panel
> .editForm
> .row
> .span5,
body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panel
> .editForm
> .row
> .span10 {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
    clear: none !important;

    box-sizing: border-box !important;
}

/* Full-width rows. */
body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panel
> .editForm
> .row:has(> .span10) {
    grid-template-columns: minmax(0, 1fr) !important;
}

body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panel
> .editForm
> .row
> .span10 {
    grid-column: 1 / -1 !important;
}

/* Hide the empty validation row when there are no messages. */
body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panel
> .editForm
> .row:has(#FormContentPlaceHolder_panel_validationSummaryli:empty) {
    display: none !important;
}


/* =========================================================
   FIELD LABELS
   ========================================================= */

body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panel
h3.desc {
    margin: 0 0 8px !important;
    padding: 0 !important;

    color: var(--star-navy, #21465f) !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panel
h3.desc span {
    color: var(--star-text-muted, #64727c) !important;

    font-size: 11px !important;
    font-weight: 500 !important;
}

/* Space between fields stacked inside the same column. */
body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panel
.span5
> .input-control
+ h3.desc,
body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panel
.span5
> div
+ h3.desc {
    margin-top: 21px !important;
}


/* =========================================================
   INPUT CONTROL WRAPPERS
   ========================================================= */

body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panel
.input-control {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;

    float: none !important;

    box-sizing: border-box !important;
}


/* =========================================================
   TEXT FIELDS AND SELECTS
   ========================================================= */

body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panel
.input-control
input[type="text"],
body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panel
.input-control
select {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 47px !important;

    margin: 0 !important;
    padding: 10px 13px !important;

    border: 1px solid #ccd8de !important;
    border-radius: 9px !important;

    background-color: #ffffff !important;
    color: var(--star-text, #25333d) !important;

    font-family:
        "Poppins",
        "Open Sans",
        Verdana,
        Arial,
        sans-serif !important;

    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;

    box-shadow:
        0 1px 2px rgba(23, 53, 72, 0.04) !important;

    box-sizing: border-box !important;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease !important;
}

body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panel
.input-control
input[type="text"]:focus,
body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panel
.input-control
select:focus {
    border-color: var(--star-navy-light, #4faec3) !important;

    outline: none !important;

    box-shadow:
        0 0 0 3px rgba(79, 174, 195, 0.17) !important;
}

/* Hide unused helper buttons beside text fields. */
body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panel
.input-control.text
> button.helper {
    display: none !important;
}

/*
 * Preserve the hidden state/province text field until RAMCO
 * changes its inline display setting.
 */
body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panel_creditCardInformation_addressControl_StateProvinceDropDownTextBox[style*="display:none"],
body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panel_creditCardInformation_addressControl_StateProvinceDropDownTextBox[style*="display: none"] {
    display: none !important;
}


/* =========================================================
   EXPIRATION DATE
   ========================================================= */

body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panel_creditCardInformation_expirationDateDatePickerli {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(110px, 0.65fr) !important;
    gap: 10px !important;

    width: 100% !important;
}

body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panel_creditCardInformation_expirationDateDatePickerli
p.error {
    grid-column: 1 / -1 !important;
}


/* =========================================================
   SAVE CARD CHECKBOX
   ========================================================= */

body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panel_creditCardInformation_createProfileCheckBoxli {
    width: 100% !important;

    margin: 0 !important;
    padding: 15px 17px !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-radius: 11px !important;

    background: var(--star-surface-soft, #f7f9fa) !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panel_creditCardInformation_createProfileCheckBoxli
label.input-control.checkbox {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;

    width: auto !important;

    margin: 0 !important;

    color: var(--star-navy, #21465f) !important;

    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;

    cursor: pointer !important;
}

body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panel_creditCardInformation_createProfileCheckBoxli
input[type="checkbox"] {
    flex: 0 0 auto !important;

    width: 18px !important;
    height: 18px !important;

    margin: 0 !important;

    accent-color: var(--star-navy, #21465f) !important;
}


/* =========================================================
   SAME-AS ADDRESS OPTIONS
   ========================================================= */

body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panel_creditCardInformation_addressControl_SameAsDropDownli {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panel_creditCardInformation_addressControl_SameAsDropDown {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 11px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panel_creditCardInformation_addressControl_SameAsDropDown
label.input-control.radio {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;

    margin: 0 !important;
    padding: 11px 13px !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-radius: 10px !important;

    background: var(--star-surface-soft, #f7f9fa) !important;
    color: var(--star-navy, #21465f) !important;

    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;

    cursor: pointer !important;

    box-sizing: border-box !important;

    transition:
        border-color 0.15s ease,
        background-color 0.15s ease,
        box-shadow 0.15s ease !important;
}

body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panel_creditCardInformation_addressControl_SameAsDropDown
label.input-control.radio:hover {
    border-color: var(--star-navy-light, #4faec3) !important;
    background: rgba(79, 174, 195, 0.08) !important;
}

body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panel_creditCardInformation_addressControl_SameAsDropDown
label.input-control.radio:has(input:checked) {
    border-color: var(--star-navy, #21465f) !important;
    background: rgba(33, 70, 95, 0.08) !important;

    box-shadow:
        inset 0 0 0 1px rgba(33, 70, 95, 0.08) !important;
}

body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panel_creditCardInformation_addressControl_SameAsDropDown
input[type="radio"] {
    flex: 0 0 auto !important;

    width: 18px !important;
    height: 18px !important;

    margin: 0 !important;

    accent-color: var(--star-navy, #21465f) !important;
}

/* Hide the empty helper span beside each radio. */
body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panel_creditCardInformation_addressControl_SameAsDropDown
label.input-control.radio
> span.helper:empty {
    display: none !important;
}


/* =========================================================
   BILLING ADDRESS SECTION
   ========================================================= */

body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panel
> .editForm
> .row:has(
    #FormContentPlaceHolder_panel_creditCardInformation_addressControl_Street1Textli
) {
    margin-top: 4px !important;
    padding-top: 26px !important;

    border-top: 1px solid var(--star-border, #e4e9ec) !important;
}


/* =========================================================
   VALIDATION MESSAGES
   ========================================================= */

body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panel
p.error {
    margin: 6px 0 0 !important;
    padding: 0 !important;

    color: var(--star-coral-dark, #dc5961) !important;

    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
}


/* =========================================================
   SAVED CARD PROFILES
   ========================================================= */

body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panel_creditCardInformation_creditCardProfilesFormAjaxGridUpdatePanelli,
body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panel_creditCardInformation_creditCardProfilesFormAjaxGridUpdatePanel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}

/* Remove spacing when no saved-card table is rendered. */
body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panel
> .editForm
> .row:has(
    #FormContentPlaceHolder_panel_creditCardInformation_creditCardProfilesFormAjaxGridUpdatePanel
):not(:has(table.standard-table)) {
    margin-bottom: 0 !important;
}

/* Style the saved-card table when RAMCO renders one. */
body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panel_creditCardInformation_creditCardProfilesFormAjaxGridUpdatePanel
table.standard-table {
    width: 100% !important;

    margin: 0 0 24px !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 12px !important;

    background: #ffffff !important;

    overflow: hidden !important;
}

body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panel_creditCardInformation_creditCardProfilesFormAjaxGridUpdatePanel
table.standard-table
tr.HeaderStyle
> th {
    padding: 13px 15px !important;

    border: 0 !important;

    background: var(--star-navy, #21465f) !important;
    color: #ffffff !important;

    font-size: 12px !important;
    font-weight: 700 !important;
    text-align: left !important;
    text-transform: uppercase !important;
}

body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panel_creditCardInformation_creditCardProfilesFormAjaxGridUpdatePanel
table.standard-table
tr.RowStyle
> td {
    padding: 13px 15px !important;

    border: 0 !important;
    border-bottom: 1px solid var(--star-border, #e4e9ec) !important;

    background: #ffffff !important;
    color: var(--star-text, #25333d) !important;

    font-size: 13px !important;
}


/* =========================================================
   BACK AND CONTINUE BUTTONS
   ========================================================= */

body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panel_panel_WizardNavigationli {
    width: 100% !important;

    margin: 4px 0 0 !important;
    padding: 22px 0 0 !important;

    border-top: 1px solid var(--star-border, #e4e9ec) !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panel_panel_WizardNavigationli::before,
body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panel_panel_WizardNavigationli::after {
    display: none !important;
    content: none !important;
}

body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panel_panel_WizardNavigationli
.button-set {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panel_panel_WizardNavigationli
input.button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 115px !important;
    min-height: 44px !important;

    margin: 0 !important;
    padding: 10px 19px !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-radius: 9px !important;

    background: var(--star-surface-soft, #f7f9fa) !important;
    color: var(--star-navy, #21465f) !important;

    font-family:
        "Poppins",
        "Open Sans",
        Verdana,
        Arial,
        sans-serif !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;

    cursor: pointer !important;

    box-sizing: border-box !important;

    transition:
        transform 0.12s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease !important;
}

/* Continue button. */
body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panel_panel_WizardNavigation__WizardContinueButton {
    border-color: var(--star-navy, #21465f) !important;

    background:
        linear-gradient(
            135deg,
            var(--star-navy, #21465f),
            var(--star-navy-dark, #173548)
        ) !important;

    color: #ffffff !important;

    box-shadow:
        0 7px 16px rgba(33, 70, 95, 0.23) !important;
}

body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panel_panel_WizardNavigationli
input.button:hover,
body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#FormContentPlaceHolder_panel_panel_WizardNavigationli
input.button:focus {
    border-color: var(--star-navy-light, #4faec3) !important;

    transform: translateY(-1px) !important;

    outline: 3px solid rgba(79, 174, 195, 0.17) !important;
    outline-offset: 2px !important;
}


/* Hide the unused Home layout below the payment form. */
body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
#formPanel
> #TwoColumnHomePageLayout {
    display: none !important;
}


/* =========================================================
   TABLET — 640px TO 959px
   ========================================================= */

@media screen and (min-width: 640px) and (max-width: 959px) {
    body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
    #FormContentPlaceHolder_panel {
        max-width: 100% !important;
        padding: 24px !important;
    }

    body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
    #FormContentPlaceHolder_panel
    > .editForm
    > .row {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 20px !important;
    }

    body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
    #FormContentPlaceHolder_panel_creditCardInformation_addressControl_SameAsDropDown {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}


/* =========================================================
   MOBILE — BELOW 640px
   ========================================================= */

@media screen and (max-width: 639px) {
    body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
    #SingleColumnLayout {
        padding: 12px 0 30px !important;
    }

    body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
    #FormContentPlaceHolder_panel {
        padding: 20px 16px !important;
        border-radius: 14px !important;
    }

    body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
    #FormContentPlaceHolder_panel
    > .editForm
    > .row {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 18px !important;

        margin-bottom: 22px !important;
    }

    body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
    #FormContentPlaceHolder_panel_creditCardInformation_expirationDateDatePickerli {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
    #FormContentPlaceHolder_panel_creditCardInformation_addressControl_SameAsDropDown {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
    #FormContentPlaceHolder_panel_panel_WizardNavigationli
    .button-set {
        flex-direction: column-reverse !important;
    }

    body:has(#FormContentPlaceHolder_panel_creditCardInformation_cardTypeDropDown)
    #FormContentPlaceHolder_panel_panel_WizardNavigationli
    input.button {
        width: 100% !important;
    }
}
/* =========================================================
   STAR BENEFITS PAGE
   ========================================================= */

#star-benefits-page {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 1180px !important;

    margin: 0 auto !important;
    padding: 0 0 40px !important;

    color: var(--star-text, #25333d) !important;

    font-family:
        "Poppins",
        "Open Sans",
        Verdana,
        Arial,
        sans-serif !important;

    box-sizing: border-box !important;
}

#star-benefits-page *,
#star-benefits-page *::before,
#star-benefits-page *::after {
    box-sizing: border-box !important;
}


/* =========================================================
   PAGE HERO
   ========================================================= */

#star-benefits-page .star-benefits__hero {
    position: relative !important;

    margin: 0 0 24px !important;
    padding: 28px 30px !important;

    border: 1px solid rgba(79, 174, 195, 0.25) !important;
    border-top: 4px solid var(--star-navy-light, #4faec3) !important;
    border-radius: 18px !important;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f4fafb 100%
        ) !important;

    box-shadow:
        0 12px 30px rgba(23, 53, 72, 0.08) !important;

    overflow: hidden !important;
}

#star-benefits-page .star-benefits__hero::after {
    position: absolute !important;
    top: -70px !important;
    right: -70px !important;

    width: 190px !important;
    height: 190px !important;

    border-radius: 50% !important;

    background:
        rgba(79, 174, 195, 0.08) !important;

    content: "" !important;

    pointer-events: none !important;
}

#star-benefits-page .star-benefits__eyebrow,
#star-benefits-page .star-benefits__section-label {
    display: block !important;

    margin: 0 0 6px !important;

    color: var(--star-navy-light, #4faec3) !important;

    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.09em !important;
    text-transform: uppercase !important;
}

#star-benefits-page .star-benefits__hero h2 {
    position: relative !important;
    z-index: 1 !important;

    margin: 0 0 8px !important;
    padding: 0 !important;

    color: var(--star-navy, #21465f) !important;

    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
}

#star-benefits-page .star-benefits__hero p {
    position: relative !important;
    z-index: 1 !important;

    max-width: 760px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: var(--star-text-muted, #64727c) !important;

    font-size: 14px !important;
    line-height: 1.65 !important;
}


/* =========================================================
   QUICK-LINK CARDS
   ========================================================= */

#star-benefits-page .star-benefits__quick-links {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;

    margin: 0 0 34px !important;
}

#star-benefits-page .star-benefits__feature-card {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 14px !important;

    margin: 0 !important;
    padding: 20px !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-radius: 15px !important;

    background: #ffffff !important;

    box-shadow:
        0 8px 22px rgba(23, 53, 72, 0.07) !important;
}

#star-benefits-page .star-benefits__icon,
#star-benefits-page .star-benefits__benefit-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 44px !important;
    height: 44px !important;

    border-radius: 12px !important;

    background: rgba(79, 174, 195, 0.12) !important;
    color: var(--star-navy, #21465f) !important;

    font-size: 19px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

#star-benefits-page .star-benefits__feature-card h3 {
    margin: 0 0 7px !important;
    padding: 0 !important;

    color: var(--star-navy, #21465f) !important;

    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

#star-benefits-page .star-benefits__feature-card p {
    margin: 0 0 15px !important;
    padding: 0 !important;

    color: var(--star-text-muted, #64727c) !important;

    font-size: 12.5px !important;
    line-height: 1.6 !important;
}


/* =========================================================
   SECTION HEADINGS
   ========================================================= */

#star-benefits-page .star-benefits__section {
    margin: 0 0 36px !important;
}

#star-benefits-page .star-benefits__section-heading {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 24px !important;

    margin: 0 0 17px !important;
    padding: 0 2px 14px !important;

    border-bottom: 1px solid var(--star-border, #e4e9ec) !important;
}

#star-benefits-page .star-benefits__section-heading h2 {
    margin: 0 !important;
    padding: 0 !important;

    color: var(--star-navy, #21465f) !important;

    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

#star-benefits-page .star-benefits__section-heading > p {
    max-width: 480px !important;

    margin: 0 !important;

    color: var(--star-text-muted, #64727c) !important;

    font-size: 12.5px !important;
    line-height: 1.55 !important;
    text-align: right !important;
}


/* =========================================================
   GOVERNING DOCUMENTS
   ========================================================= */

#star-benefits-page .star-benefits__resource-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

#star-benefits-page .star-benefits__resource-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;

    min-height: 84px !important;

    margin: 0 !important;
    padding: 16px 18px !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-radius: 12px !important;

    background: #ffffff !important;
    color: var(--star-text, #25333d) !important;

    text-decoration: none !important;

    box-shadow:
        0 4px 13px rgba(23, 53, 72, 0.05) !important;

    transition:
        transform 0.12s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease !important;
}

#star-benefits-page a.star-benefits__resource-card:hover,
#star-benefits-page a.star-benefits__resource-card:focus {
    border-color: var(--star-navy-light, #4faec3) !important;

    box-shadow:
        0 8px 20px rgba(23, 53, 72, 0.10) !important;

    transform: translateY(-1px) !important;

    outline: 3px solid rgba(79, 174, 195, 0.15) !important;
    outline-offset: 2px !important;
}

#star-benefits-page .star-benefits__resource-card strong {
    display: block !important;

    margin: 0 0 4px !important;

    color: var(--star-navy, #21465f) !important;

    font-size: 13.5px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

#star-benefits-page .star-benefits__resource-card small {
    display: block !important;

    color: var(--star-text-muted, #64727c) !important;

    font-size: 11.5px !important;
    line-height: 1.45 !important;
}

#star-benefits-page .star-benefits__arrow {
    flex: 0 0 auto !important;

    color: var(--star-navy-light, #4faec3) !important;

    font-size: 20px !important;
    font-weight: 700 !important;
}

#star-benefits-page .star-benefits__resource-card--disabled {
    border-style: dashed !important;

    background: var(--star-surface-soft, #f7f9fa) !important;

    box-shadow: none !important;
}

#star-benefits-page .star-benefits__status {
    flex: 0 0 auto !important;

    padding: 5px 9px !important;

    border-radius: 999px !important;

    background: var(--star-coral-light, #fff1f2) !important;
    color: var(--star-coral-dark, #dc5961) !important;

    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}


/* =========================================================
   EXCLUSIVE BENEFIT CARDS
   ========================================================= */

#star-benefits-page .star-benefits__benefit-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

#star-benefits-page .star-benefits__benefit-card {
    display: flex !important;
    flex-direction: column !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 22px !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-radius: 16px !important;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fafcfd 100%
        ) !important;

    box-shadow:
        0 8px 22px rgba(23, 53, 72, 0.07) !important;
}

/* The app card is wider because it contains detailed steps. */
#star-benefits-page
.star-benefits__benefit-card:first-child {
    grid-row: span 2 !important;
}

#star-benefits-page .star-benefits__benefit-header {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 13px !important;

    margin: 0 0 16px !important;
}

#star-benefits-page .star-benefits__badge {
    display: inline-block !important;

    margin: 0 0 4px !important;
    padding: 4px 8px !important;

    border-radius: 999px !important;

    background: rgba(79, 174, 195, 0.10) !important;
    color: var(--star-navy-light, #4faec3) !important;

    font-size: 9.5px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}

#star-benefits-page .star-benefits__benefit-card h3 {
    margin: 0 !important;
    padding: 0 !important;

    color: var(--star-navy, #21465f) !important;

    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

#star-benefits-page .star-benefits__benefit-card > p {
    margin: 0 0 15px !important;
    padding: 0 !important;

    color: var(--star-text-muted, #64727c) !important;

    font-size: 12.5px !important;
    line-height: 1.65 !important;
}

#star-benefits-page .star-benefits__fine-print {
    padding: 12px 14px !important;

    border-left: 3px solid var(--star-navy-light, #4faec3) !important;

    background: rgba(79, 174, 195, 0.07) !important;

    font-size: 11.5px !important;
}


/* =========================================================
   MEMBER HUB STEPS
   ========================================================= */

#star-benefits-page .star-benefits__steps {
    margin: 0 0 20px !important;
    padding: 0 !important;

    list-style: none !important;
    counter-reset: benefit-step !important;
}

#star-benefits-page .star-benefits__steps > li {
    position: relative !important;

    margin: 0 !important;
    padding: 0 0 14px 40px !important;

    color: var(--star-text, #25333d) !important;

    font-size: 12.5px !important;
    line-height: 1.6 !important;

    counter-increment: benefit-step !important;
}

#star-benefits-page .star-benefits__steps > li::before {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 27px !important;
    height: 27px !important;

    border-radius: 8px !important;

    background: var(--star-navy, #21465f) !important;
    color: #ffffff !important;

    content: counter(benefit-step) !important;

    font-size: 11px !important;
    font-weight: 700 !important;
}

#star-benefits-page .star-benefits__steps > li:not(:last-child)::after {
    position: absolute !important;
    top: 29px !important;
    bottom: 2px !important;
    left: 13px !important;

    width: 1px !important;

    background: var(--star-border, #e4e9ec) !important;

    content: "" !important;
}


/* =========================================================
   BUTTONS
   ========================================================= */

#star-benefits-page .star-benefits__button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: fit-content !important;
    min-height: 40px !important;

    margin: auto 0 0 !important;
    padding: 9px 14px !important;

    border-radius: 8px !important;

    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-align: center !important;
    text-decoration: none !important;

    box-sizing: border-box !important;

    transition:
        transform 0.12s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease !important;
}

#star-benefits-page .star-benefits__button--primary {
    border: 1px solid var(--star-navy, #21465f) !important;

    background:
        linear-gradient(
            135deg,
            var(--star-navy, #21465f),
            var(--star-navy-dark, #173548)
        ) !important;

    color: #ffffff !important;

    box-shadow:
        0 7px 16px rgba(33, 70, 95, 0.22) !important;
}

#star-benefits-page .star-benefits__button--secondary {
    border: 1px solid rgba(33, 70, 95, 0.20) !important;

    background: var(--star-surface-soft, #f7f9fa) !important;
    color: var(--star-navy, #21465f) !important;
}

#star-benefits-page .star-benefits__button:hover,
#star-benefits-page .star-benefits__button:focus {
    border-color: var(--star-navy-light, #4faec3) !important;

    transform: translateY(-1px) !important;

    outline: 3px solid rgba(79, 174, 195, 0.16) !important;
    outline-offset: 2px !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media screen and (max-width: 959px) {
    #star-benefits-page .star-benefits__quick-links {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    #star-benefits-page .star-benefits__section-heading {
        display: block !important;
    }

    #star-benefits-page .star-benefits__section-heading > p {
        max-width: none !important;

        margin-top: 8px !important;

        text-align: left !important;
    }

    #star-benefits-page .star-benefits__benefit-list {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    #star-benefits-page
    .star-benefits__benefit-card:first-child {
        grid-row: auto !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 639px) {
    #star-benefits-page {
        padding-bottom: 24px !important;
    }

    #star-benefits-page .star-benefits__hero {
        padding: 22px 18px !important;
        border-radius: 14px !important;
    }

    #star-benefits-page .star-benefits__hero h2 {
        font-size: 23px !important;
    }

    #star-benefits-page .star-benefits__resource-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    #star-benefits-page .star-benefits__feature-card,
    #star-benefits-page .star-benefits__benefit-card {
        padding: 17px !important;
    }

    #star-benefits-page .star-benefits__feature-card {
        grid-template-columns: 40px minmax(0, 1fr) !important;
    }

    #star-benefits-page .star-benefits__icon,
    #star-benefits-page .star-benefits__benefit-icon {
        width: 40px !important;
        height: 40px !important;
    }

    #star-benefits-page .star-benefits__button {
        width: 100% !important;
    }

    #star-benefits-page .star-benefits__resource-card {
        min-height: 0 !important;
        padding: 14px !important;
    }
}
/* =========================================================
   ORDER SUMMARY / PAYMENT PAGE
   ========================================================= */

/* Normalize the legacy outer column. */
body:has(#FormContentPlaceHolder_Panel_FeeSummary_detailGrid)
.sixteen.floated:has(#FormContentPlaceHolder_Panel) {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 24px 16px 40px !important;

    float: none !important;
    clear: both !important;

    box-sizing: border-box !important;
}


/* =========================================================
   ORDER SUMMARY CARD
   ========================================================= */

body:has(#FormContentPlaceHolder_Panel_FeeSummary_detailGrid)
#FormContentPlaceHolder_PanelDiv,
body:has(#FormContentPlaceHolder_Panel_FeeSummary_detailGrid)
#FormContentPlaceHolder_Panel {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_Panel_FeeSummary_detailGrid)
#FormContentPlaceHolder_Panel {
    max-width: 1000px !important;

    margin: 0 auto !important;
    padding: 30px !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-top: 4px solid var(--star-navy-light, #4faec3) !important;
    border-radius: 18px !important;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f9fbfc 100%
        ) !important;

    box-shadow:
        0 12px 30px rgba(23, 53, 72, 0.09) !important;
}

body:has(#FormContentPlaceHolder_Panel_FeeSummary_detailGrid)
#FormContentPlaceHolder_Panel > .editForm {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   LEGACY ROW AND COLUMN RESET
   ========================================================= */

body:has(#FormContentPlaceHolder_Panel_FeeSummary_detailGrid)
#FormContentPlaceHolder_Panel
> .editForm
> .row {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 0 24px !important;
    padding: 0 !important;

    float: none !important;
    clear: both !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_Panel_FeeSummary_detailGrid)
#FormContentPlaceHolder_Panel
> .editForm
> .row::before,
body:has(#FormContentPlaceHolder_Panel_FeeSummary_detailGrid)
#FormContentPlaceHolder_Panel
> .editForm
> .row::after {
    display: none !important;
    content: none !important;
}

body:has(#FormContentPlaceHolder_Panel_FeeSummary_detailGrid)
#FormContentPlaceHolder_Panel
> .editForm
> .row
> .span5,
body:has(#FormContentPlaceHolder_Panel_FeeSummary_detailGrid)
#FormContentPlaceHolder_Panel
> .editForm
> .row
> .span10 {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
    clear: none !important;

    box-sizing: border-box !important;
}

/* Hide the empty validation row when no message exists. */
body:has(#FormContentPlaceHolder_Panel_FeeSummary_detailGrid)
#FormContentPlaceHolder_Panel
> .editForm
> .row:has(#FormContentPlaceHolder_Panel_ValidationSummaryli:empty) {
    display: none !important;
}


/* =========================================================
   ORDER INFORMATION
   ========================================================= */

body:has(#FormContentPlaceHolder_Panel_FeeSummary_detailGrid)
#FormContentPlaceHolder_Panel
> .editForm
> .row:has(#FormContentPlaceHolder_Panel_OrderDateli) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;

    margin-bottom: 22px !important;
    padding: 16px 18px !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-radius: 12px !important;

    background: var(--star-surface-soft, #f7f9fa) !important;
}

body:has(#FormContentPlaceHolder_Panel_FeeSummary_detailGrid)
#FormContentPlaceHolder_Panel_OrderDateli,
body:has(#FormContentPlaceHolder_Panel_FeeSummary_detailGrid)
#FormContentPlaceHolder_Panel_OrderNumberli {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

body:has(#FormContentPlaceHolder_Panel_FeeSummary_detailGrid)
#FormContentPlaceHolder_Panel_OrderDate,
body:has(#FormContentPlaceHolder_Panel_FeeSummary_detailGrid)
#FormContentPlaceHolder_Panel_OrderNumber {
    display: block !important;

    margin: 0 !important;

    float: none !important;

    color: var(--star-text, #25333d) !important;

    font-size: 13px !important;
    line-height: 1.5 !important;
}

body:has(#FormContentPlaceHolder_Panel_FeeSummary_detailGrid)
#FormContentPlaceHolder_Panel_OrderNumber {
    text-align: right !important;
}

body:has(#FormContentPlaceHolder_Panel_FeeSummary_detailGrid)
#FormContentPlaceHolder_Panel_OrderDate strong,
body:has(#FormContentPlaceHolder_Panel_FeeSummary_detailGrid)
#FormContentPlaceHolder_Panel_OrderNumber strong {
    color: var(--star-navy, #21465f) !important;
    font-weight: 700 !important;
}


/* =========================================================
   ORDER TABLE WRAPPER
   ========================================================= */

#FormContentPlaceHolder_Panel_FeeSummary_detailGridFormAjaxGridUpdatePanelli,
#FormContentPlaceHolder_Panel_FeeSummary_detailGridFormAjaxGridUpdatePanel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}

#FormContentPlaceHolder_Panel_FeeSummary_detailGridFormAjaxGridUpdatePanel
> div:first-child {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-radius: 15px !important;

    background: #ffffff !important;

    box-shadow:
        0 8px 22px rgba(23, 53, 72, 0.07) !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    box-sizing: border-box !important;
}


/* =========================================================
   ORDER TABLE
   ========================================================= */

#FormContentPlaceHolder_Panel_FeeSummary_detailGrid {
    width: 100% !important;
    min-width: 720px !important;

    margin: 0 !important;

    border: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;

    background: #ffffff !important;

    font-family:
        "Poppins",
        "Open Sans",
        Verdana,
        Arial,
        sans-serif !important;

    box-sizing: border-box !important;
}

#FormContentPlaceHolder_Panel_FeeSummary_detailGrid
> tbody
> tr.HeaderStyle {
    background: var(--star-navy, #21465f) !important;
}

#FormContentPlaceHolder_Panel_FeeSummary_detailGrid
> tbody
> tr.HeaderStyle
> th {
    padding: 15px 16px !important;

    border: 0 !important;
    border-bottom: 1px solid var(--star-navy-dark, #173548) !important;

    background: var(--star-navy, #21465f) !important;
    color: #ffffff !important;

    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;

    white-space: nowrap !important;
}

#FormContentPlaceHolder_Panel_FeeSummary_detailGrid
> tbody
> tr.HeaderStyle
> th:first-child {
    border-top-left-radius: 14px !important;
}

#FormContentPlaceHolder_Panel_FeeSummary_detailGrid
> tbody
> tr.HeaderStyle
> th:last-child {
    border-top-right-radius: 14px !important;
}


/* =========================================================
   PRODUCT ROW
   ========================================================= */

#FormContentPlaceHolder_Panel_FeeSummary_detailGrid
> tbody
> tr.RowStyle {
    background: #ffffff !important;

    transition:
        background-color 0.15s ease !important;
}

/* Override the legacy yellow JavaScript hover. */
#FormContentPlaceHolder_Panel_FeeSummary_detailGrid
> tbody
> tr.RowStyle:hover {
    background: rgba(79, 174, 195, 0.10) !important;
}

#FormContentPlaceHolder_Panel_FeeSummary_detailGrid
> tbody
> tr.RowStyle
> td {
    padding: 17px 16px !important;

    border: 0 !important;
    border-bottom: 1px solid var(--star-border, #e4e9ec) !important;

    background: transparent !important;
    color: var(--star-text, #25333d) !important;

    font-size: 13px !important;
    line-height: 1.5 !important;
}

/* Product name. */
#FormContentPlaceHolder_Panel_FeeSummary_detailGrid
> tbody
> tr.RowStyle
> td:first-child {
    color: var(--star-navy, #21465f) !important;
    font-weight: 700 !important;
}

/* Price and quantity columns. */
#FormContentPlaceHolder_Panel_FeeSummary_detailGrid
> tbody
> tr.RowStyle
> td:nth-child(2),
#FormContentPlaceHolder_Panel_FeeSummary_detailGrid
> tbody
> tr.RowStyle
> td:nth-child(3),
#FormContentPlaceHolder_Panel_FeeSummary_detailGrid
> tbody
> tr.RowStyle
> td:nth-child(4) {
    text-align: center !important;
}

/* Line total. */
#FormContentPlaceHolder_Panel_FeeSummary_detailGrid
> tbody
> tr.RowStyle
> td:last-child {
    color: var(--star-navy, #21465f) !important;

    font-size: 14px !important;
    font-weight: 700 !important;
    text-align: right !important;
}


/* =========================================================
   ORDER TOTALS
   ========================================================= */

#FormContentPlaceHolder_Panel_FeeSummary_detailGrid
> tbody
> tr.FooterStyle
> td {
    padding: 0 !important;

    border: 0 !important;

    background:
        linear-gradient(
            145deg,
            #f8fafb 0%,
            #ffffff 100%
        ) !important;
}

#FormContentPlaceHolder_Panel_FeeSummary_detailGrid
> tbody
> tr.FooterStyle
> td
> table {
    width: 100% !important;
    max-width: 430px !important;

    margin: 0 0 0 auto !important;
    padding: 14px 16px !important;

    border: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;

    background: transparent !important;
}

#FormContentPlaceHolder_Panel_FeeSummary_detailGrid
> tbody
> tr.FooterStyle
> td
> table
> tbody
> tr
> td {
    padding: 7px 5px !important;

    border: 0 !important;

    background: transparent !important;
    color: var(--star-text-muted, #64727c) !important;

    font-size: 12.5px !important;
    line-height: 1.4 !important;
}

#FormContentPlaceHolder_Panel_FeeSummary_detailGrid
> tbody
> tr.FooterStyle
> td
> table
> tbody
> tr
> td:first-child {
    width: 100% !important;
    text-align: right !important;
}

#FormContentPlaceHolder_Panel_FeeSummary_detailGrid
> tbody
> tr.FooterStyle
> td
> table
> tbody
> tr
> td:last-child {
    min-width: 95px !important;

    color: var(--star-text, #25333d) !important;
    text-align: right !important;
    white-space: nowrap !important;
}

/* Total row. */
#FormContentPlaceHolder_Panel_FeeSummary_detailGrid
> tbody
> tr.FooterStyle
> td
> table
> tbody
> tr:has(#FormContentPlaceHolder_Panel_FeeSummary_detailGrid_ordertotalLabel)
> td {
    padding-top: 12px !important;

    border-top: 1px solid var(--star-border, #e4e9ec) !important;

    color: var(--star-navy, #21465f) !important;

    font-size: 14px !important;
    font-weight: 700 !important;
}

/* Balance row. */
#FormContentPlaceHolder_Panel_FeeSummary_detailGrid
> tbody
> tr.FooterStyle
> td
> table
> tbody
> tr:has(#FormContentPlaceHolder_Panel_FeeSummary_detailGrid_balanceLabel)
> td {
    padding-top: 10px !important;
    padding-bottom: 10px !important;

    color: var(--star-navy, #21465f) !important;

    font-size: 16px !important;
    font-weight: 800 !important;
}

/* Highlight the balance value. */
#FormContentPlaceHolder_Panel_FeeSummary_detailGrid_balanceLabel {
    display: inline-block !important;

    padding: 5px 9px !important;

    border-radius: 7px !important;

    background: rgba(33, 70, 95, 0.09) !important;
    color: var(--star-navy, #21465f) !important;
}

/* Hide unused empty footer rows. */
#FormContentPlaceHolder_Panel_FeeSummary_detailGrid_Tr1,
#FormContentPlaceHolder_Panel_FeeSummary_detailGrid_Tr2 {
    display: none !important;
}


/* =========================================================
   TOTAL SAVINGS MESSAGE
   ========================================================= */

body:has(#FormContentPlaceHolder_Panel_FeeSummary_detailGrid)
#FormContentPlaceHolder_Panel_FeeSummary_totalSavingLabelli {
    width: 100% !important;

    margin: 0 !important;
    padding: 14px 17px !important;

    border: 1px solid rgba(79, 174, 195, 0.26) !important;
    border-left: 4px solid var(--star-navy-light, #4faec3) !important;
    border-radius: 10px !important;

    background: rgba(79, 174, 195, 0.08) !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_Panel_FeeSummary_detailGrid)
#FormContentPlaceHolder_Panel_FeeSummary_totalSavingLabel {
    display: block !important;

    color: var(--star-text, #25333d) !important;

    font-size: 13px !important;
    line-height: 1.5 !important;
}

body:has(#FormContentPlaceHolder_Panel_FeeSummary_detailGrid)
#FormContentPlaceHolder_Panel_FeeSummary_totalSavingLabel strong {
    color: var(--star-navy, #21465f) !important;

    font-size: 15px !important;
    font-weight: 800 !important;
}


/* =========================================================
   BACK, PRINT AND PAY NOW BUTTONS
   ========================================================= */

body:has(#FormContentPlaceHolder_Panel_FeeSummary_detailGrid)
#FormContentPlaceHolder_Panel_Panel_WizardNavigationli {
    width: 100% !important;

    margin: 2px 0 0 !important;
    padding: 22px 0 0 !important;

    border-top: 1px solid var(--star-border, #e4e9ec) !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_Panel_FeeSummary_detailGrid)
#FormContentPlaceHolder_Panel_Panel_WizardNavigationli::before,
body:has(#FormContentPlaceHolder_Panel_FeeSummary_detailGrid)
#FormContentPlaceHolder_Panel_Panel_WizardNavigationli::after {
    display: none !important;
    content: none !important;
}

body:has(#FormContentPlaceHolder_Panel_FeeSummary_detailGrid)
#FormContentPlaceHolder_Panel_Panel_WizardNavigationli
.button-set {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_Panel_FeeSummary_detailGrid)
#FormContentPlaceHolder_Panel_Panel_WizardNavigationli
input.button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 105px !important;
    min-height: 44px !important;

    margin: 0 !important;
    padding: 10px 18px !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-radius: 9px !important;

    background: var(--star-surface-soft, #f7f9fa) !important;
    color: var(--star-navy, #21465f) !important;

    font-family:
        "Poppins",
        "Open Sans",
        Verdana,
        Arial,
        sans-serif !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;

    cursor: pointer !important;

    box-sizing: border-box !important;

    transition:
        transform 0.12s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease !important;
}

/* Print button. */
body:has(#FormContentPlaceHolder_Panel_FeeSummary_detailGrid)
#FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardPrintButton {
    border-color: rgba(33, 70, 95, 0.20) !important;

    background: #ffffff !important;
    color: var(--star-navy, #21465f) !important;
}

/* Pay Now button. */
body:has(#FormContentPlaceHolder_Panel_FeeSummary_detailGrid)
#FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardContinueButton {
    min-width: 125px !important;

    border-color: var(--star-navy, #21465f) !important;

    background:
        linear-gradient(
            135deg,
            var(--star-navy, #21465f),
            var(--star-navy-dark, #173548)
        ) !important;

    color: #ffffff !important;

    box-shadow:
        0 7px 16px rgba(33, 70, 95, 0.24) !important;
}

body:has(#FormContentPlaceHolder_Panel_FeeSummary_detailGrid)
#FormContentPlaceHolder_Panel_Panel_WizardNavigationli
input.button:hover,
body:has(#FormContentPlaceHolder_Panel_FeeSummary_detailGrid)
#FormContentPlaceHolder_Panel_Panel_WizardNavigationli
input.button:focus {
    border-color: var(--star-navy-light, #4faec3) !important;

    transform: translateY(-1px) !important;

    outline: 3px solid rgba(79, 174, 195, 0.17) !important;
    outline-offset: 2px !important;
}


/* =========================================================
   TABLET AND MOBILE
   ========================================================= */

@media screen and (max-width: 959px) {
    body:has(#FormContentPlaceHolder_Panel_FeeSummary_detailGrid)
    #FormContentPlaceHolder_Panel {
        max-width: 100% !important;
        padding: 24px !important;
    }
}

@media screen and (max-width: 639px) {
    body:has(#FormContentPlaceHolder_Panel_FeeSummary_detailGrid)
    .sixteen.floated:has(#FormContentPlaceHolder_Panel) {
        padding: 12px 0 30px !important;
    }

    body:has(#FormContentPlaceHolder_Panel_FeeSummary_detailGrid)
    #FormContentPlaceHolder_Panel {
        padding: 20px 16px !important;
        border-radius: 14px !important;
    }

    body:has(#FormContentPlaceHolder_Panel_FeeSummary_detailGrid)
    #FormContentPlaceHolder_Panel
    > .editForm
    > .row:has(#FormContentPlaceHolder_Panel_OrderDateli) {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;

        padding: 14px !important;
    }

    body:has(#FormContentPlaceHolder_Panel_FeeSummary_detailGrid)
    #FormContentPlaceHolder_Panel_OrderNumber {
        text-align: left !important;
    }

    #FormContentPlaceHolder_Panel_FeeSummary_detailGrid {
        min-width: 680px !important;
    }

    #FormContentPlaceHolder_Panel_FeeSummary_detailGrid
    > tbody
    > tr.FooterStyle
    > td
    > table {
        max-width: 100% !important;
        padding: 12px !important;
    }

    body:has(#FormContentPlaceHolder_Panel_FeeSummary_detailGrid)
    #FormContentPlaceHolder_Panel_Panel_WizardNavigationli
    .button-set {
        flex-direction: column-reverse !important;
    }

    body:has(#FormContentPlaceHolder_Panel_FeeSummary_detailGrid)
    #FormContentPlaceHolder_Panel_Panel_WizardNavigationli
    input.button {
        width: 100% !important;
    }
}
/* =========================================================
   PAYMENT FORM — CREDIT CARD INFORMATION
   ========================================================= */

/* Normalize the legacy page wrapper. */
body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
.sixteen.floated:has(#FormContentPlaceHolder_Panel) {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 24px 16px 40px !important;

    float: none !important;
    clear: both !important;

    box-sizing: border-box !important;
}


/* =========================================================
   PAGE TITLE
   ========================================================= */

body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#pageTitleDiv {
    width: 100% !important;

    margin: 0 0 24px !important;
    padding: 0 0 16px !important;

    border-bottom: 1px solid var(--star-border, #e4e9ec) !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#pageTitleDiv h1,
body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#pageTitleDiv h2,
body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#pageTitleDiv h3 {
    margin: 0 !important;
    padding: 0 !important;

    color: var(--star-navy, #21465f) !important;

    font-size: 27px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
}


/* =========================================================
   PAYMENT FORM CARD
   ========================================================= */

body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_PanelDiv,
body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel {
    max-width: 980px !important;

    margin: 0 auto !important;
    padding: 30px !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-top: 4px solid var(--star-navy-light, #4faec3) !important;
    border-radius: 18px !important;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f9fbfc 100%
        ) !important;

    box-shadow:
        0 12px 30px rgba(23, 53, 72, 0.09) !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel > .editForm {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   FORM ROWS
   ========================================================= */

body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel
> .editForm
> .row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: 24px !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 0 26px !important;
    padding: 0 !important;

    float: none !important;
    clear: both !important;

    box-sizing: border-box !important;
}

/* Prevent legacy clearfix elements from becoming grid items. */
body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel
> .editForm
> .row::before,
body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel
> .editForm
> .row::after {
    display: none !important;
    content: none !important;
}

/* Reset legacy span widths and inline padding. */
body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel
> .editForm
> .row
> .span5,
body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel
> .editForm
> .row
> .span10 {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
    clear: none !important;

    box-sizing: border-box !important;
}

/* Full-width rows containing span10. */
body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel
> .editForm
> .row:has(> .span10) {
    grid-template-columns: minmax(0, 1fr) !important;
}

body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel
> .editForm
> .row
> .span10 {
    grid-column: 1 / -1 !important;
}

/* Hide the empty validation row. */
body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel
> .editForm
> .row:has(#FormContentPlaceHolder_Panel_validationSummaryli:empty) {
    display: none !important;
}


/* =========================================================
   FIELD LABELS
   ========================================================= */

body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel
h3.desc {
    margin: 0 0 8px !important;
    padding: 0 !important;

    color: var(--star-navy, #21465f) !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel
h3.desc span {
    color: var(--star-text-muted, #64727c) !important;

    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
}

/* Space between stacked fields in each column. */
body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel
.span5
> .input-control
+ h3.desc,
body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel
.span5
> div
+ h3.desc {
    margin-top: 22px !important;
}


/* =========================================================
   INPUT CONTROL WRAPPERS
   ========================================================= */

body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel
.input-control {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;

    float: none !important;

    box-sizing: border-box !important;
}


/* =========================================================
   TEXT FIELDS AND SELECTS
   ========================================================= */

body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel
.input-control
input[type="text"],
body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel
.input-control
select {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 47px !important;

    margin: 0 !important;
    padding: 10px 13px !important;

    border: 1px solid #ccd8de !important;
    border-radius: 9px !important;

    background-color: #ffffff !important;
    color: var(--star-text, #25333d) !important;

    font-family:
        "Poppins",
        "Open Sans",
        Verdana,
        Arial,
        sans-serif !important;

    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;

    box-shadow:
        0 1px 2px rgba(23, 53, 72, 0.04) !important;

    box-sizing: border-box !important;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease !important;
}

body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel
.input-control
input[type="text"]:hover,
body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel
.input-control
select:hover {
    border-color: #afc2cb !important;
}

body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel
.input-control
input[type="text"]:focus,
body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel
.input-control
select:focus {
    border-color: var(--star-navy-light, #4faec3) !important;

    outline: none !important;

    box-shadow:
        0 0 0 3px rgba(79, 174, 195, 0.17) !important;
}

/* Hide unused RAMCO helper buttons. */
body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel
.input-control.text
> button.helper {
    display: none !important;
}


/* =========================================================
   EXPIRATION DATE
   ========================================================= */

body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel_CCInfo_expirationDateDatePickerli {
    display: grid !important;
    grid-template-columns: minmax(0, 1.25fr) minmax(115px, 0.75fr) !important;
    gap: 10px !important;

    width: 100% !important;
}

body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel_CCInfo_expirationDateDatePickerli
p.error {
    grid-column: 1 / -1 !important;
}


/* =========================================================
   SAVED CARD PROFILE AREA
   ========================================================= */

body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel_CCInfo_creditCardProfilesFormAjaxGridUpdatePanelli,
body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel_CCInfo_creditCardProfilesFormAjaxGridUpdatePanel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}

/* Remove the row when no saved-card table exists. */
body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel
> .editForm
> .row:has(
    #FormContentPlaceHolder_Panel_CCInfo_creditCardProfilesFormAjaxGridUpdatePanel
):not(:has(table.standard-table)) {
    display: none !important;
}


/* =========================================================
   SAVE CARD CHECKBOX
   ========================================================= */

body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel_CCInfo_createProfileCheckBoxli {
    width: 100% !important;

    margin: 0 !important;
    padding: 14px 17px !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-radius: 11px !important;

    background: var(--star-surface-soft, #f7f9fa) !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel_CCInfo_createProfileCheckBoxli
label.input-control.checkbox {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;

    width: auto !important;
    min-width: 0 !important;

    margin: 0 !important;

    color: var(--star-navy, #21465f) !important;

    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;

    cursor: pointer !important;
}

body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel_CCInfo_createProfileCheckBoxli
input[type="checkbox"] {
    flex: 0 0 auto !important;

    width: 18px !important;
    height: 18px !important;

    margin: 0 !important;

    accent-color: var(--star-navy, #21465f) !important;
}


/* =========================================================
   SAME-AS ADDRESS OPTIONS
   ========================================================= */

body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel_CCInfo_addressControl_SameAsDropDownli {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel_CCInfo_addressControl_SameAsDropDown {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 11px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel_CCInfo_addressControl_SameAsDropDown
label.input-control.radio {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;

    margin: 0 !important;
    padding: 11px 13px !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-radius: 10px !important;

    background: var(--star-surface-soft, #f7f9fa) !important;
    color: var(--star-navy, #21465f) !important;

    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;

    cursor: pointer !important;

    box-sizing: border-box !important;

    transition:
        border-color 0.15s ease,
        background-color 0.15s ease,
        box-shadow 0.15s ease !important;
}

body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel_CCInfo_addressControl_SameAsDropDown
label.input-control.radio:hover {
    border-color: var(--star-navy-light, #4faec3) !important;

    background: rgba(79, 174, 195, 0.08) !important;
}

body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel_CCInfo_addressControl_SameAsDropDown
label.input-control.radio:has(input:checked) {
    border-color: var(--star-navy, #21465f) !important;

    background: rgba(33, 70, 95, 0.08) !important;

    box-shadow:
        inset 0 0 0 1px rgba(33, 70, 95, 0.08) !important;
}

body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel_CCInfo_addressControl_SameAsDropDown
input[type="radio"] {
    flex: 0 0 auto !important;

    width: 18px !important;
    height: 18px !important;

    margin: 0 !important;

    accent-color: var(--star-navy, #21465f) !important;
}

/* Hide the empty radio helper graphic. */
body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel_CCInfo_addressControl_SameAsDropDown
label.input-control.radio
> span.helper:empty {
    display: none !important;
}


/* =========================================================
   BILLING ADDRESS SECTION
   ========================================================= */

body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel
> .editForm
> .row:has(
    #FormContentPlaceHolder_Panel_CCInfo_addressControl_Street1Textli
) {
    margin-top: 2px !important;
    padding-top: 26px !important;

    border-top: 1px solid var(--star-border, #e4e9ec) !important;
}

/*
 * Keep the alternate State/Province text field hidden until
 * RAMCO changes its inline display value.
 */
body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel_CCInfo_addressControl_StateProvinceDropDownTextBox[
    style*="display:none"
],
body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel_CCInfo_addressControl_StateProvinceDropDownTextBox[
    style*="display: none"
] {
    display: none !important;
}


/* =========================================================
   VALIDATION MESSAGES
   ========================================================= */

body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel
p.error {
    margin: 6px 0 0 !important;
    padding: 0 !important;

    color: var(--star-coral-dark, #dc5961) !important;

    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
}


/* =========================================================
   BACK, CANCEL AND CONTINUE BUTTONS
   ========================================================= */

body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel_Panel_WizardNavigationli {
    width: 100% !important;

    margin: 3px 0 0 !important;
    padding: 22px 0 0 !important;

    border-top: 1px solid var(--star-border, #e4e9ec) !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel_Panel_WizardNavigationli::before,
body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel_Panel_WizardNavigationli::after {
    display: none !important;
    content: none !important;
}

body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel_Panel_WizardNavigationli
.button-set {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel_Panel_WizardNavigationli
input.button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 110px !important;
    min-height: 44px !important;

    margin: 0 !important;
    padding: 10px 19px !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-radius: 9px !important;

    background: var(--star-surface-soft, #f7f9fa) !important;
    color: var(--star-navy, #21465f) !important;

    font-family:
        "Poppins",
        "Open Sans",
        Verdana,
        Arial,
        sans-serif !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;

    cursor: pointer !important;

    box-shadow: none !important;
    box-sizing: border-box !important;

    transition:
        transform 0.12s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease !important;
}

/* Cancel button receives a subtle coral treatment. */
body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardCancelButton {
    border-color: rgba(245, 109, 115, 0.30) !important;

    background: var(--star-coral-light, #fff1f2) !important;
    color: var(--star-coral-dark, #dc5961) !important;
}

/* Continue button. */
body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardContinueButton {
    min-width: 125px !important;

    border-color: var(--star-navy, #21465f) !important;

    background:
        linear-gradient(
            135deg,
            var(--star-navy, #21465f),
            var(--star-navy-dark, #173548)
        ) !important;

    color: #ffffff !important;

    box-shadow:
        0 7px 16px rgba(33, 70, 95, 0.24) !important;
}

body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel_Panel_WizardNavigationli
input.button:hover,
body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel_Panel_WizardNavigationli
input.button:focus {
    border-color: var(--star-navy-light, #4faec3) !important;

    transform: translateY(-1px) !important;

    outline: 3px solid rgba(79, 174, 195, 0.17) !important;
    outline-offset: 2px !important;
}


/* =========================================================
   UNUSED CANCEL LIGHTBOX ROW
   ========================================================= */

body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel
> .editForm
> .row:has(#FormContentPlaceHolder_Panel_PanelLightboxli) {
    display: none !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media screen and (min-width: 640px) and (max-width: 959px) {
    body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
    #FormContentPlaceHolder_Panel {
        max-width: 100% !important;
        padding: 24px !important;
    }

    body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
    #FormContentPlaceHolder_Panel
    > .editForm
    > .row {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 20px !important;
    }

    body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
    #FormContentPlaceHolder_Panel_CCInfo_addressControl_SameAsDropDown {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 639px) {
    body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
    .sixteen.floated:has(#FormContentPlaceHolder_Panel) {
        padding: 12px 0 30px !important;
    }

    body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
    #pageTitleDiv {
        margin-bottom: 18px !important;
        padding-bottom: 12px !important;
    }

    body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
    #pageTitleDiv h1,
    body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
    #pageTitleDiv h2,
    body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
    #pageTitleDiv h3 {
        font-size: 23px !important;
    }

    body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
    #FormContentPlaceHolder_Panel {
        padding: 20px 16px !important;
        border-radius: 14px !important;
    }

    body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
    #FormContentPlaceHolder_Panel
    > .editForm
    > .row {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 18px !important;

        margin-bottom: 22px !important;
    }

    body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
    #FormContentPlaceHolder_Panel_CCInfo_expirationDateDatePickerli {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
    #FormContentPlaceHolder_Panel_CCInfo_addressControl_SameAsDropDown {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
    #FormContentPlaceHolder_Panel_Panel_WizardNavigationli
    .button-set {
        flex-direction: column-reverse !important;
    }

    body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
    #FormContentPlaceHolder_Panel_Panel_WizardNavigationli
    input.button {
        width: 100% !important;
    }
}
/* =========================================================
   PAYMENT FORM — FIELD SPACING
   ========================================================= */

/* Add consistent spacing after each form control. */
body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel
.span5
> .input-control {
    margin-bottom: 22px !important;
}

/* Avoid extra space after the final field in each column. */
body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel
.span5
> .input-control:last-child {
    margin-bottom: 0 !important;
}

/* Keep labels close to their corresponding fields. */
body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel
h3.desc {
    margin: 0 0 9px !important;
}

/* Prevent the previous heading rule from doubling the spacing. */
body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel
.span5
> .input-control
+ h3.desc,
body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel
.span5
> div
+ h3.desc {
    margin-top: 0 !important;
}

/* Space between expiration month and year. */
body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel_CCInfo_expirationDateDatePickerli {
    column-gap: 12px !important;
    row-gap: 12px !important;
}

/* Add more separation between major form sections. */
body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel
> .editForm
> .row {
    margin-bottom: 30px !important;
}

/* Keep the action-button row from having excess bottom spacing. */
body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
#FormContentPlaceHolder_Panel
> .editForm
> .row:has(#FormContentPlaceHolder_Panel_Panel_WizardNavigationli) {
    margin-bottom: 0 !important;
}

@media screen and (max-width: 639px) {
    body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
    #FormContentPlaceHolder_Panel
    .span5
    > .input-control {
        margin-bottom: 18px !important;
    }

    body:has(#FormContentPlaceHolder_Panel_CCInfo_cardTypeDropDown)
    #FormContentPlaceHolder_Panel
    > .editForm
    > .row {
        margin-bottom: 24px !important;
    }
}
/* =========================================================
   PAYMENT REVIEW / ORDER SUMMARY PAGE
   ========================================================= */

/* Normalize the page column. */
body:has(#FormContentPlaceHolder_Panel_Orders_salesOrderGrid)
#SingleColumnLayout,
body:has(#FormContentPlaceHolder_Panel_Orders_salesOrderGrid)
#SingleColumnLayout > .sixteen.floated {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
    clear: both !important;

    box-sizing: border-box !important;
}


/* =========================================================
   REVIEW CARD
   ========================================================= */

body:has(#FormContentPlaceHolder_Panel_Orders_salesOrderGrid)
#FormContentPlaceHolder_PanelDiv,
body:has(#FormContentPlaceHolder_Panel_Orders_salesOrderGrid)
#FormContentPlaceHolder_Panel {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_Panel_Orders_salesOrderGrid)
#FormContentPlaceHolder_Panel {
    max-width: 1000px !important;

    margin: 24px auto 40px !important;
    padding: 30px !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-top: 4px solid var(--star-navy-light, #4faec3) !important;
    border-radius: 18px !important;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f9fbfc 100%
        ) !important;

    box-shadow:
        0 12px 30px rgba(23, 53, 72, 0.09) !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_Panel_Orders_salesOrderGrid)
#FormContentPlaceHolder_Panel > .editForm {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   LEGACY ROW RESET
   ========================================================= */

body:has(#FormContentPlaceHolder_Panel_Orders_salesOrderGrid)
#FormContentPlaceHolder_Panel
> .editForm
> .row {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 0 24px !important;
    padding: 0 !important;

    float: none !important;
    clear: both !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_Panel_Orders_salesOrderGrid)
#FormContentPlaceHolder_Panel
> .editForm
> .row::before,
body:has(#FormContentPlaceHolder_Panel_Orders_salesOrderGrid)
#FormContentPlaceHolder_Panel
> .editForm
> .row::after {
    display: none !important;
    content: none !important;
}

body:has(#FormContentPlaceHolder_Panel_Orders_salesOrderGrid)
#FormContentPlaceHolder_Panel
> .editForm
> .row
> .span10 {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;

    box-sizing: border-box !important;
}

/* Hide the unused validation row when empty. */
body:has(#FormContentPlaceHolder_Panel_Orders_salesOrderGrid)
#FormContentPlaceHolder_Panel
> .editForm
> .row:has(#FormContentPlaceHolder_Panel_validationSummaryli:empty) {
    display: none !important;
}


/* =========================================================
   ORDER SUMMARY HEADING
   ========================================================= */

body:has(#FormContentPlaceHolder_Panel_Orders_salesOrderGrid)
#FormContentPlaceHolder_Panel_Orders_TitleSectionli {
    position: relative !important;

    margin: 0 !important;
    padding: 0 0 18px !important;

    border-bottom: 1px solid var(--star-border, #e4e9ec) !important;
}

body:has(#FormContentPlaceHolder_Panel_Orders_salesOrderGrid)
#FormContentPlaceHolder_Panel_Orders_TitleSectionli::before {
    display: block !important;

    width: 44px !important;
    height: 4px !important;

    margin: 0 0 12px !important;

    border-radius: 999px !important;

    background: var(--star-navy-light, #4faec3) !important;

    content: "" !important;
}

body:has(#FormContentPlaceHolder_Panel_Orders_salesOrderGrid)
#FormContentPlaceHolder_Panel_Orders_TitleSectionli h3 {
    margin: 0 !important;
    padding: 0 !important;

    color: var(--star-navy, #21465f) !important;

    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}


/* =========================================================
   TABLE CONTAINER
   ========================================================= */

#FormContentPlaceHolder_Panel_Orders_salesOrderGridFormAjaxGridUpdatePanelli,
#FormContentPlaceHolder_Panel_Orders_salesOrderGridFormAjaxGridUpdatePanel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}

#FormContentPlaceHolder_Panel_Orders_salesOrderGridFormAjaxGridUpdatePanel
> div:first-child {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-radius: 15px !important;

    background: #ffffff !important;

    box-shadow:
        0 8px 22px rgba(23, 53, 72, 0.07) !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    box-sizing: border-box !important;
}


/* =========================================================
   ORDER TABLE
   ========================================================= */

#FormContentPlaceHolder_Panel_Orders_salesOrderGrid {
    width: 100% !important;
    min-width: 720px !important;

    margin: 0 !important;

    border: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;

    background: #ffffff !important;

    font-family:
        "Poppins",
        "Open Sans",
        Verdana,
        Arial,
        sans-serif !important;

    box-sizing: border-box !important;
}


/* =========================================================
   TABLE HEADER
   ========================================================= */

#FormContentPlaceHolder_Panel_Orders_salesOrderGrid
> tbody
> tr.HeaderStyle {
    background: var(--star-navy, #21465f) !important;
}

#FormContentPlaceHolder_Panel_Orders_salesOrderGrid
> tbody
> tr.HeaderStyle
> th {
    padding: 15px 17px !important;

    border: 0 !important;
    border-bottom: 1px solid var(--star-navy-dark, #173548) !important;

    background: var(--star-navy, #21465f) !important;
    color: #ffffff !important;

    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;

    white-space: nowrap !important;
}

#FormContentPlaceHolder_Panel_Orders_salesOrderGrid
> tbody
> tr.HeaderStyle
> th:first-child {
    border-top-left-radius: 14px !important;
    text-align: left !important;
}

#FormContentPlaceHolder_Panel_Orders_salesOrderGrid
> tbody
> tr.HeaderStyle
> th:last-child {
    border-top-right-radius: 14px !important;
}

#FormContentPlaceHolder_Panel_Orders_salesOrderGrid
> tbody
> tr.HeaderStyle
> th:not(:first-child) {
    text-align: center !important;
}


/* =========================================================
   ORDER ROW
   ========================================================= */

#FormContentPlaceHolder_Panel_Orders_salesOrderGrid
> tbody
> tr.RowStyle {
    background: #ffffff !important;

    transition:
        background-color 0.15s ease !important;
}

/* Replace the legacy yellow JavaScript hover. */
#FormContentPlaceHolder_Panel_Orders_salesOrderGrid
> tbody
> tr.RowStyle:hover {
    background: rgba(79, 174, 195, 0.10) !important;
}

#FormContentPlaceHolder_Panel_Orders_salesOrderGrid
> tbody
> tr.RowStyle
> td {
    padding: 17px !important;

    border: 0 !important;
    border-bottom: 1px solid var(--star-border, #e4e9ec) !important;

    background: transparent !important;
    color: var(--star-text, #25333d) !important;

    font-size: 13px !important;
    line-height: 1.55 !important;

    vertical-align: middle !important;
}

/* Order name. */
#FormContentPlaceHolder_Panel_Orders_salesOrderGrid
> tbody
> tr.RowStyle
> td:first-child {
    color: var(--star-navy, #21465f) !important;
    font-weight: 700 !important;
    text-align: left !important;
}

/* Order date. */
#FormContentPlaceHolder_Panel_Orders_salesOrderGrid
> tbody
> tr.RowStyle
> td:nth-child(2) {
    text-align: center !important;
}

/* Total and balance. */
#FormContentPlaceHolder_Panel_Orders_salesOrderGrid
> tbody
> tr.RowStyle
> td:nth-child(3),
#FormContentPlaceHolder_Panel_Orders_salesOrderGrid
> tbody
> tr.RowStyle
> td:nth-child(4) {
    color: var(--star-navy, #21465f) !important;

    font-size: 14px !important;
    font-weight: 700 !important;
    text-align: right !important;
}

/* Highlight the outstanding balance. */
#FormContentPlaceHolder_Panel_Orders_salesOrderGrid
[id*="_orderbalance_"] {
    display: inline-block !important;

    min-width: 68px !important;

    padding: 5px 9px !important;

    border-radius: 7px !important;

    background: rgba(245, 109, 115, 0.11) !important;
    color: var(--star-coral-dark, #dc5961) !important;

    text-align: center !important;
}


/* =========================================================
   TABLE TOTALS FOOTER
   ========================================================= */

#FormContentPlaceHolder_Panel_Orders_salesOrderGrid
> tbody
> tr.FooterStyle
> td {
    padding: 0 !important;

    border: 0 !important;

    background:
        linear-gradient(
            145deg,
            #f7fafb 0%,
            #ffffff 100%
        ) !important;
}

#FormContentPlaceHolder_Panel_Orders_salesOrderGrid
> tbody
> tr.FooterStyle
> td
> table {
    border: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;

    background: transparent !important;
}

/* Outer footer layout. */
#FormContentPlaceHolder_Panel_Orders_salesOrderGrid
> tbody
> tr.FooterStyle
> td
> table:first-child {
    width: 100% !important;

    margin: 0 !important;
    padding: 14px 17px !important;
}

/* Hide the unused left footer column. */
#FormContentPlaceHolder_Panel_Orders_salesOrderGrid
> tbody
> tr.FooterStyle
> td
> table:first-child
> tbody
> tr
> td:first-child {
    display: none !important;
}

/* Align the totals block to the right. */
#FormContentPlaceHolder_Panel_Orders_salesOrderGrid
> tbody
> tr.FooterStyle
> td
> table:first-child
> tbody
> tr
> td:last-child {
    width: 100% !important;
    padding: 0 !important;
}

/* Inner totals table. */
#FormContentPlaceHolder_Panel_Orders_salesOrderGrid
> tbody
> tr.FooterStyle
> td
> table:first-child
> tbody
> tr
> td:last-child
> table {
    width: 100% !important;
    max-width: 390px !important;

    margin: 0 0 0 auto !important;
}

#FormContentPlaceHolder_Panel_Orders_salesOrderGrid
tr.FooterStyle
#FormContentPlaceHolder_Panel_Orders_salesOrderGrid_orderTotalRow
> td,
#FormContentPlaceHolder_Panel_Orders_salesOrderGrid
tr.FooterStyle
#FormContentPlaceHolder_Panel_Orders_salesOrderGrid_orderBalanceRow
> td {
    padding: 8px 5px !important;

    border: 0 !important;

    background: transparent !important;

    font-size: 13px !important;
    line-height: 1.4 !important;
}

#FormContentPlaceHolder_Panel_Orders_salesOrderGrid
tr.FooterStyle
#FormContentPlaceHolder_Panel_Orders_salesOrderGrid_orderTotalRow
> td:first-child,
#FormContentPlaceHolder_Panel_Orders_salesOrderGrid
tr.FooterStyle
#FormContentPlaceHolder_Panel_Orders_salesOrderGrid_orderBalanceRow
> td:first-child {
    width: 100% !important;

    color: var(--star-text-muted, #64727c) !important;

    text-align: right !important;
}

#FormContentPlaceHolder_Panel_Orders_salesOrderGrid
tr.FooterStyle
#FormContentPlaceHolder_Panel_Orders_salesOrderGrid_orderTotalRow
> td:last-child,
#FormContentPlaceHolder_Panel_Orders_salesOrderGrid
tr.FooterStyle
#FormContentPlaceHolder_Panel_Orders_salesOrderGrid_orderBalanceRow
> td:last-child {
    min-width: 100px !important;

    color: var(--star-navy, #21465f) !important;

    text-align: right !important;
    white-space: nowrap !important;
}

/* Outstanding balance row. */
#FormContentPlaceHolder_Panel_Orders_salesOrderGrid_orderBalanceRow
> td {
    padding-top: 12px !important;

    border-top: 1px solid var(--star-border, #e4e9ec) !important;

    color: var(--star-navy, #21465f) !important;

    font-size: 15px !important;
    font-weight: 800 !important;
}

#FormContentPlaceHolder_Panel_Orders_salesOrderGrid_balanceLabel {
    display: inline-block !important;

    padding: 6px 10px !important;

    border-radius: 7px !important;

    background: rgba(245, 109, 115, 0.12) !important;
    color: var(--star-coral-dark, #dc5961) !important;
}


/* =========================================================
   CREDIT CARD AND BILLING SUMMARY
   ========================================================= */

body:has(#FormContentPlaceHolder_Panel_Orders_salesOrderGrid)
#FormContentPlaceHolder_Panel
> .editForm
> .row:has(#FormContentPlaceHolder_Panel_CCInfoSummary_CardInformationLabelli),
body:has(#FormContentPlaceHolder_Panel_Orders_salesOrderGrid)
#FormContentPlaceHolder_Panel
> .editForm
> .row:has(#FormContentPlaceHolder_Panel_CCInfoSummary_BillingInformationLabelli) {
    padding: 18px 20px !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-radius: 13px !important;

    background: var(--star-surface-soft, #f7f9fa) !important;

    box-shadow:
        0 4px 13px rgba(23, 53, 72, 0.04) !important;
}

body:has(#FormContentPlaceHolder_Panel_Orders_salesOrderGrid)
#FormContentPlaceHolder_Panel
h3.Summary {
    margin: 0 0 10px !important;
    padding: 0 0 9px !important;

    border-bottom: 1px solid var(--star-border, #e4e9ec) !important;

    color: var(--star-navy, #21465f) !important;

    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

#FormContentPlaceHolder_Panel_CCInfoSummary_CardInformationLabel,
#FormContentPlaceHolder_Panel_CCInfoSummary_BillingInformationLabel {
    display: block !important;

    color: var(--star-text, #25333d) !important;

    font-size: 13px !important;
    line-height: 1.75 !important;
}


/* =========================================================
   BACK, CANCEL AND SUBMIT PAYMENT BUTTONS
   ========================================================= */

body:has(#FormContentPlaceHolder_Panel_Orders_salesOrderGrid)
#FormContentPlaceHolder_Panel_Panel_WizardNavigationli {
    width: 100% !important;

    margin: 2px 0 0 !important;
    padding: 22px 0 0 !important;

    border-top: 1px solid var(--star-border, #e4e9ec) !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_Panel_Orders_salesOrderGrid)
#FormContentPlaceHolder_Panel_Panel_WizardNavigationli::before,
body:has(#FormContentPlaceHolder_Panel_Orders_salesOrderGrid)
#FormContentPlaceHolder_Panel_Panel_WizardNavigationli::after {
    display: none !important;
    content: none !important;
}

body:has(#FormContentPlaceHolder_Panel_Orders_salesOrderGrid)
#FormContentPlaceHolder_Panel_Panel_WizardNavigationli
.button-set {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_Panel_Orders_salesOrderGrid)
#FormContentPlaceHolder_Panel_Panel_WizardNavigationli
input.button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 110px !important;
    min-height: 44px !important;

    margin: 0 !important;
    padding: 10px 19px !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-radius: 9px !important;

    background: var(--star-surface-soft, #f7f9fa) !important;
    color: var(--star-navy, #21465f) !important;

    font-family:
        "Poppins",
        "Open Sans",
        Verdana,
        Arial,
        sans-serif !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;

    cursor: pointer !important;

    box-sizing: border-box !important;

    transition:
        transform 0.12s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease !important;
}

/* Cancel button. */
body:has(#FormContentPlaceHolder_Panel_Orders_salesOrderGrid)
#FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardCancelButton {
    border-color: rgba(245, 109, 115, 0.30) !important;

    background: var(--star-coral-light, #fff1f2) !important;
    color: var(--star-coral-dark, #dc5961) !important;
}

/* Submit Payment button. */
body:has(#FormContentPlaceHolder_Panel_Orders_salesOrderGrid)
#FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardContinueButton {
    min-width: 155px !important;

    border-color: var(--star-navy, #21465f) !important;

    background:
        linear-gradient(
            135deg,
            var(--star-navy, #21465f),
            var(--star-navy-dark, #173548)
        ) !important;

    color: #ffffff !important;

    box-shadow:
        0 7px 16px rgba(33, 70, 95, 0.24) !important;
}

body:has(#FormContentPlaceHolder_Panel_Orders_salesOrderGrid)
#FormContentPlaceHolder_Panel_Panel_WizardNavigationli
input.button:hover,
body:has(#FormContentPlaceHolder_Panel_Orders_salesOrderGrid)
#FormContentPlaceHolder_Panel_Panel_WizardNavigationli
input.button:focus {
    border-color: var(--star-navy-light, #4faec3) !important;

    transform: translateY(-1px) !important;

    outline: 3px solid rgba(79, 174, 195, 0.17) !important;
    outline-offset: 2px !important;
}


/* Hide the unused cancel-confirmation lightbox row. */
body:has(#FormContentPlaceHolder_Panel_Orders_salesOrderGrid)
#FormContentPlaceHolder_Panel
> .editForm
> .row:has(#FormContentPlaceHolder_Panel_PanelLightboxli) {
    display: none !important;
}


/* =========================================================
   TABLET AND MOBILE
   ========================================================= */

@media screen and (max-width: 959px) {
    body:has(#FormContentPlaceHolder_Panel_Orders_salesOrderGrid)
    #FormContentPlaceHolder_Panel {
        max-width: 100% !important;
        padding: 24px !important;
    }
}

@media screen and (max-width: 639px) {
    body:has(#FormContentPlaceHolder_Panel_Orders_salesOrderGrid)
    #FormContentPlaceHolder_Panel {
        margin-top: 14px !important;
        padding: 20px 16px !important;

        border-radius: 14px !important;
    }

    body:has(#FormContentPlaceHolder_Panel_Orders_salesOrderGrid)
    #FormContentPlaceHolder_Panel_Orders_TitleSectionli h3 {
        font-size: 21px !important;
    }

    #FormContentPlaceHolder_Panel_Orders_salesOrderGrid {
        min-width: 680px !important;
    }

    #FormContentPlaceHolder_Panel_Orders_salesOrderGrid
    > tbody
    > tr.FooterStyle
    > td
    > table:first-child {
        padding: 12px !important;
    }

    #FormContentPlaceHolder_Panel_Orders_salesOrderGrid
    > tbody
    > tr.FooterStyle
    > td
    > table:first-child
    > tbody
    > tr
    > td:last-child
    > table {
        max-width: 100% !important;
    }

    body:has(#FormContentPlaceHolder_Panel_Orders_salesOrderGrid)
    #FormContentPlaceHolder_Panel_Panel_WizardNavigationli
    .button-set {
        flex-direction: column-reverse !important;
    }

    body:has(#FormContentPlaceHolder_Panel_Orders_salesOrderGrid)
    #FormContentPlaceHolder_Panel_Panel_WizardNavigationli
    input.button {
        width: 100% !important;
    }
}
/* =========================================================
   PAYMENT FEE SUMMARY TABLE
   ========================================================= */

/* Ajax and table wrappers. */
#FormContentPlaceHolder_panel_feeSummary_detailGridFormAjaxGridUpdatePanelli,
#FormContentPlaceHolder_panel_feeSummary_detailGridFormAjaxGridUpdatePanel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}

/* Visible scrolling container. */
#FormContentPlaceHolder_panel_feeSummary_detailGridFormAjaxGridUpdatePanel
> div:first-child {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-radius: 15px !important;

    background: #ffffff !important;

    box-shadow:
        0 8px 22px rgba(23, 53, 72, 0.07) !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    box-sizing: border-box !important;
}


/* =========================================================
   TABLE BASE
   ========================================================= */

#FormContentPlaceHolder_panel_feeSummary_detailGrid {
    width: 100% !important;
    min-width: 720px !important;

    margin: 0 !important;

    border: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;

    background: #ffffff !important;

    font-family:
        "Poppins",
        "Open Sans",
        Verdana,
        Arial,
        sans-serif !important;

    box-sizing: border-box !important;
}


/* =========================================================
   TABLE HEADER
   ========================================================= */

#FormContentPlaceHolder_panel_feeSummary_detailGrid
> tbody
> tr.HeaderStyle {
    background: var(--star-navy, #21465f) !important;
}

#FormContentPlaceHolder_panel_feeSummary_detailGrid
> tbody
> tr.HeaderStyle
> th {
    padding: 15px 16px !important;

    border: 0 !important;
    border-bottom:
        1px solid var(--star-navy-dark, #173548) !important;

    background: var(--star-navy, #21465f) !important;
    color: #ffffff !important;

    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;

    white-space: nowrap !important;
    vertical-align: middle !important;
}

#FormContentPlaceHolder_panel_feeSummary_detailGrid
> tbody
> tr.HeaderStyle
> th:first-child {
    border-top-left-radius: 14px !important;
    text-align: left !important;
}

#FormContentPlaceHolder_panel_feeSummary_detailGrid
> tbody
> tr.HeaderStyle
> th:last-child {
    border-top-right-radius: 14px !important;
    text-align: right !important;
}

#FormContentPlaceHolder_panel_feeSummary_detailGrid
> tbody
> tr.HeaderStyle
> th:nth-child(2),
#FormContentPlaceHolder_panel_feeSummary_detailGrid
> tbody
> tr.HeaderStyle
> th:nth-child(3),
#FormContentPlaceHolder_panel_feeSummary_detailGrid
> tbody
> tr.HeaderStyle
> th:nth-child(4) {
    text-align: center !important;
}


/* =========================================================
   PRODUCT ROW
   ========================================================= */

#FormContentPlaceHolder_panel_feeSummary_detailGrid
> tbody
> tr.RowStyle {
    background: #ffffff !important;

    transition:
        background-color 0.15s ease !important;
}

/* Override the legacy yellow JavaScript hover. */
#FormContentPlaceHolder_panel_feeSummary_detailGrid
> tbody
> tr.RowStyle:hover {
    background: rgba(79, 174, 195, 0.10) !important;
}

#FormContentPlaceHolder_panel_feeSummary_detailGrid
> tbody
> tr.RowStyle
> td {
    padding: 17px 16px !important;

    border: 0 !important;
    border-bottom:
        1px solid var(--star-border, #e4e9ec) !important;

    background: transparent !important;
    color: var(--star-text, #25333d) !important;

    font-size: 13px !important;
    line-height: 1.5 !important;
    vertical-align: middle !important;
}

/* Product name. */
#FormContentPlaceHolder_panel_feeSummary_detailGrid
> tbody
> tr.RowStyle
> td:first-child {
    color: var(--star-navy, #21465f) !important;

    font-weight: 700 !important;
    text-align: left !important;
}

/* List Price, Your Price and Quantity. */
#FormContentPlaceHolder_panel_feeSummary_detailGrid
> tbody
> tr.RowStyle
> td:nth-child(2),
#FormContentPlaceHolder_panel_feeSummary_detailGrid
> tbody
> tr.RowStyle
> td:nth-child(3),
#FormContentPlaceHolder_panel_feeSummary_detailGrid
> tbody
> tr.RowStyle
> td:nth-child(4) {
    text-align: center !important;
}

/* Line-item total. */
#FormContentPlaceHolder_panel_feeSummary_detailGrid
> tbody
> tr.RowStyle
> td:last-child {
    color: var(--star-navy, #21465f) !important;

    font-size: 14px !important;
    font-weight: 700 !important;
    text-align: right !important;
}


/* =========================================================
   TOTALS FOOTER
   ========================================================= */

#FormContentPlaceHolder_panel_feeSummary_detailGrid
> tbody
> tr.FooterStyle
> td {
    padding: 0 !important;

    border: 0 !important;

    background:
        linear-gradient(
            145deg,
            #f7fafb 0%,
            #ffffff 100%
        ) !important;
}

#FormContentPlaceHolder_panel_feeSummary_detailGrid
> tbody
> tr.FooterStyle
> td
> table {
    width: 100% !important;
    max-width: 430px !important;

    margin: 0 0 0 auto !important;
    padding: 14px 16px !important;

    border: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;

    background: transparent !important;

    box-sizing: border-box !important;
}

#FormContentPlaceHolder_panel_feeSummary_detailGrid
> tbody
> tr.FooterStyle
> td
> table
> tbody
> tr
> td {
    padding: 7px 5px !important;

    border: 0 !important;

    background: transparent !important;
    color: var(--star-text-muted, #64727c) !important;

    font-size: 12.5px !important;
    line-height: 1.4 !important;
    vertical-align: middle !important;
}

/* Footer labels. */
#FormContentPlaceHolder_panel_feeSummary_detailGrid
> tbody
> tr.FooterStyle
> td
> table
> tbody
> tr
> td:first-child {
    width: 100% !important;

    text-align: right !important;
}

/* Footer values. */
#FormContentPlaceHolder_panel_feeSummary_detailGrid
> tbody
> tr.FooterStyle
> td
> table
> tbody
> tr
> td:last-child {
    min-width: 95px !important;

    color: var(--star-text, #25333d) !important;

    font-weight: 600 !important;
    text-align: right !important;
    white-space: nowrap !important;
}


/* =========================================================
   ORDER TOTAL
   ========================================================= */

#FormContentPlaceHolder_panel_feeSummary_detailGrid
> tbody
> tr.FooterStyle
> td
> table
> tbody
> tr:has(
    #FormContentPlaceHolder_panel_feeSummary_detailGrid_ordertotalLabel
)
> td {
    padding-top: 12px !important;

    border-top:
        1px solid var(--star-border, #e4e9ec) !important;

    color: var(--star-navy, #21465f) !important;

    font-size: 14px !important;
    font-weight: 700 !important;
}

#FormContentPlaceHolder_panel_feeSummary_detailGrid_ordertotalLabel {
    color: var(--star-navy, #21465f) !important;

    font-size: 14px !important;
    font-weight: 800 !important;
}


/* =========================================================
   BALANCE
   ========================================================= */

#FormContentPlaceHolder_panel_feeSummary_detailGrid
> tbody
> tr.FooterStyle
> td
> table
> tbody
> tr:has(
    #FormContentPlaceHolder_panel_feeSummary_detailGrid_balanceLabel
)
> td {
    padding-top: 10px !important;
    padding-bottom: 10px !important;

    color: var(--star-navy, #21465f) !important;

    font-size: 15px !important;
    font-weight: 800 !important;
}

#FormContentPlaceHolder_panel_feeSummary_detailGrid_balanceLabel {
    display: inline-block !important;

    min-width: 72px !important;

    padding: 6px 10px !important;

    border-radius: 8px !important;

    background: rgba(245, 109, 115, 0.12) !important;
    color: var(--star-coral-dark, #dc5961) !important;

    font-size: 15px !important;
    font-weight: 800 !important;
    text-align: center !important;
}


/* =========================================================
   EMPTY FOOTER ROWS
   ========================================================= */

#FormContentPlaceHolder_panel_feeSummary_detailGrid_Tr1,
#FormContentPlaceHolder_panel_feeSummary_detailGrid_Tr2 {
    display: none !important;
}


/* =========================================================
   LOADING INDICATOR
   ========================================================= */

#FormContentPlaceHolder_panel_feeSummary_detailGridFormAjaxGridUpdateProgress {
    width: 100% !important;
    min-width: 0 !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 639px) {
    #FormContentPlaceHolder_panel_feeSummary_detailGridFormAjaxGridUpdatePanel
    > div:first-child {
        border-radius: 12px !important;
    }

    #FormContentPlaceHolder_panel_feeSummary_detailGrid {
        min-width: 680px !important;
    }

    #FormContentPlaceHolder_panel_feeSummary_detailGrid
    > tbody
    > tr.HeaderStyle
    > th,
    #FormContentPlaceHolder_panel_feeSummary_detailGrid
    > tbody
    > tr.RowStyle
    > td {
        padding-left: 13px !important;
        padding-right: 13px !important;
    }

    #FormContentPlaceHolder_panel_feeSummary_detailGrid
    > tbody
    > tr.FooterStyle
    > td
    > table {
        max-width: 100% !important;
        padding: 12px !important;
    }
}
/* =========================================================
   CANCEL CONFIRMATION MODAL
   ========================================================= */

/* Normalize the modal page. */
body:has(
    #FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardContinueButton[
        value*="Confirm"
    ]
) {
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #f7fafb !important;
    color: var(--star-text, #25333d) !important;
}


/* =========================================================
   MODAL CONTENT WRAPPER
   ========================================================= */

body:has(
    #FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardContinueButton[
        value*="Confirm"
    ]
)
#content {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 100vh !important;

    margin: 0 !important;
    padding: 24px !important;

    background:
        linear-gradient(
            145deg,
            #f7fafb 0%,
            #eef5f7 100%
        ) !important;

    box-sizing: border-box !important;
}

body:has(
    #FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardContinueButton[
        value*="Confirm"
    ]
)
#content
> .container.floated {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 600px !important;

    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;

    float: none !important;

    box-sizing: border-box !important;
}


/* =========================================================
   MODAL TITLE AND DESCRIPTION
   ========================================================= */

body:has(
    #FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardContinueButton[
        value*="Confirm"
    ]
)
#introDiv {
    position: relative !important;

    margin: 0 auto !important;
    padding: 0 !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-bottom: 0 !important;
    border-top: 4px solid var(--star-coral, #f56d73) !important;
    border-radius: 16px 16px 0 0 !important;

    background: #ffffff !important;

    box-shadow:
        0 12px 30px rgba(23, 53, 72, 0.10) !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
}

body:has(
    #FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardContinueButton[
        value*="Confirm"
    ]
)
#introDiv
> .sixteen.floated.page-title {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 26px 26px 22px !important;

    float: none !important;

    box-sizing: border-box !important;
}

body:has(
    #FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardContinueButton[
        value*="Confirm"
    ]
)
#pageTitleDiv {
    margin: 0 0 8px !important;
    padding: 0 !important;

    border: 0 !important;

    color: var(--star-navy, #21465f) !important;

    font-size: 25px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
}

body:has(
    #FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardContinueButton[
        value*="Confirm"
    ]
)
#intrdouctionTextPageTextDiv {
    margin: 0 !important;
    padding: 0 !important;

    color: var(--star-text-muted, #64727c) !important;

    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
}


/* =========================================================
   FORM CONTAINER
   ========================================================= */

body:has(
    #FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardContinueButton[
        value*="Confirm"
    ]
)
#introDiv
+ .container.floated {
    margin-top: 0 !important;
}

body:has(
    #FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardContinueButton[
        value*="Confirm"
    ]
)
.grid,
body:has(
    #FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardContinueButton[
        value*="Confirm"
    ]
)
.grid
> .row,
body:has(
    #FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardContinueButton[
        value*="Confirm"
    ]
)
#updatePanel,
body:has(
    #FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardContinueButton[
        value*="Confirm"
    ]
)
#formPanel,
body:has(
    #FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardContinueButton[
        value*="Confirm"
    ]
)
#SingleColumnLayout,
body:has(
    #FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardContinueButton[
        value*="Confirm"
    ]
)
#SingleColumnLayout
> .sixteen.floated {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
    clear: both !important;

    box-sizing: border-box !important;
}


/* =========================================================
   CONFIRMATION CARD
   ========================================================= */

body:has(
    #FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardContinueButton[
        value*="Confirm"
    ]
)
#FormContentPlaceHolder_PanelDiv,
body:has(
    #FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardContinueButton[
        value*="Confirm"
    ]
)
#FormContentPlaceHolder_Panel {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;

    box-sizing: border-box !important;
}

body:has(
    #FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardContinueButton[
        value*="Confirm"
    ]
)
#FormContentPlaceHolder_Panel {
    padding: 22px 26px 26px !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-top: 1px solid var(--star-border, #e4e9ec) !important;
    border-radius: 0 0 16px 16px !important;

    background: #ffffff !important;

    box-shadow:
        0 12px 30px rgba(23, 53, 72, 0.10) !important;
}

body:has(
    #FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardContinueButton[
        value*="Confirm"
    ]
)
#FormContentPlaceHolder_Panel
> .editForm {
    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   LEGACY ROW RESET
   ========================================================= */

body:has(
    #FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardContinueButton[
        value*="Confirm"
    ]
)
#FormContentPlaceHolder_Panel
> .editForm
> .row {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
    clear: both !important;

    box-sizing: border-box !important;
}

body:has(
    #FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardContinueButton[
        value*="Confirm"
    ]
)
#FormContentPlaceHolder_Panel
> .editForm
> .row::before,
body:has(
    #FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardContinueButton[
        value*="Confirm"
    ]
)
#FormContentPlaceHolder_Panel
> .editForm
> .row::after {
    display: none !important;
    content: none !important;
}

body:has(
    #FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardContinueButton[
        value*="Confirm"
    ]
)
#FormContentPlaceHolder_Panel
> .editForm
> .row
> .span10 {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;

    box-sizing: border-box !important;
}


/* =========================================================
   CONFIRMATION BUTTONS
   ========================================================= */

body:has(
    #FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardContinueButton[
        value*="Confirm"
    ]
)
#FormContentPlaceHolder_Panel_Panel_WizardNavigationli {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}

body:has(
    #FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardContinueButton[
        value*="Confirm"
    ]
)
#FormContentPlaceHolder_Panel_Panel_WizardNavigationli::before,
body:has(
    #FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardContinueButton[
        value*="Confirm"
    ]
)
#FormContentPlaceHolder_Panel_Panel_WizardNavigationli::after {
    display: none !important;
    content: none !important;
}

body:has(
    #FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardContinueButton[
        value*="Confirm"
    ]
)
#FormContentPlaceHolder_Panel_Panel_WizardNavigationli
.button-set {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;

    box-sizing: border-box !important;
}

body:has(
    #FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardContinueButton[
        value*="Confirm"
    ]
)
#FormContentPlaceHolder_Panel_Panel_WizardNavigationli
input.button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 110px !important;
    min-height: 44px !important;

    margin: 0 !important;
    padding: 10px 18px !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-radius: 9px !important;

    background: var(--star-surface-soft, #f7f9fa) !important;
    color: var(--star-navy, #21465f) !important;

    font-family:
        "Poppins",
        "Open Sans",
        Verdana,
        Arial,
        sans-serif !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;

    cursor: pointer !important;

    box-shadow: none !important;
    box-sizing: border-box !important;

    transition:
        transform 0.12s ease,
        border-color 0.15s ease,
        background-color 0.15s ease,
        box-shadow 0.15s ease !important;
}

/* Close button. */
body:has(
    #FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardContinueButton[
        value*="Confirm"
    ]
)
#FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardBackButton {
    background: #ffffff !important;
    color: var(--star-navy, #21465f) !important;
}

/* Confirm cancellation button. */
body:has(
    #FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardContinueButton[
        value*="Confirm"
    ]
)
#FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardContinueButton {
    min-width: 175px !important;

    border-color: var(--star-coral-dark, #dc5961) !important;

    background:
        linear-gradient(
            135deg,
            var(--star-coral, #f56d73),
            var(--star-coral-dark, #dc5961)
        ) !important;

    color: #ffffff !important;

    box-shadow:
        0 7px 16px rgba(245, 109, 115, 0.27) !important;
}

body:has(
    #FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardContinueButton[
        value*="Confirm"
    ]
)
#FormContentPlaceHolder_Panel_Panel_WizardNavigationli
input.button:hover,
body:has(
    #FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardContinueButton[
        value*="Confirm"
    ]
)
#FormContentPlaceHolder_Panel_Panel_WizardNavigationli
input.button:focus {
    border-color: var(--star-navy-light, #4faec3) !important;

    transform: translateY(-1px) !important;

    outline: 3px solid rgba(79, 174, 195, 0.17) !important;
    outline-offset: 2px !important;
}


/* =========================================================
   UNUSED LAYOUTS
   ========================================================= */

body:has(
    #FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardContinueButton[
        value*="Confirm"
    ]
)
#formPanel
> #TwoColumnHomePageLayout {
    display: none !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 639px) {
    body:has(
        #FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardContinueButton[
            value*="Confirm"
        ]
    )
    #content {
        padding: 14px !important;
    }

    body:has(
        #FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardContinueButton[
            value*="Confirm"
        ]
    )
    #introDiv
    > .sixteen.floated.page-title {
        padding: 21px 18px 18px !important;
    }

    body:has(
        #FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardContinueButton[
            value*="Confirm"
        ]
    )
    #pageTitleDiv {
        font-size: 22px !important;
    }

    body:has(
        #FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardContinueButton[
            value*="Confirm"
        ]
    )
    #FormContentPlaceHolder_Panel {
        padding: 18px !important;
    }

    body:has(
        #FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardContinueButton[
            value*="Confirm"
        ]
    )
    #FormContentPlaceHolder_Panel_Panel_WizardNavigationli
    .button-set {
        flex-direction: column-reverse !important;
    }

    body:has(
        #FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardContinueButton[
            value*="Confirm"
        ]
    )
    #FormContentPlaceHolder_Panel_Panel_WizardNavigationli
    input.button {
        width: 100% !important;
    }
}
/* =========================================================
   LOWERCASE PANEL — ORDER SUMMARY ACTIONS
   ========================================================= */

/* Normalize rows surrounding this order-summary page. */
body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
#FormContentPlaceHolder_panel
> .editForm
> .row {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 0 24px !important;
    padding: 0 !important;

    float: none !important;
    clear: both !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
#FormContentPlaceHolder_panel
> .editForm
> .row::before,
body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
#FormContentPlaceHolder_panel
> .editForm
> .row::after {
    display: none !important;
    content: none !important;
}

body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
#FormContentPlaceHolder_panel
> .editForm
> .row
> .span5,
body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
#FormContentPlaceHolder_panel
> .editForm
> .row
> .span10 {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;

    box-sizing: border-box !important;
}


/* =========================================================
   ORDER SUMMARY HEADING
   ========================================================= */

body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
#FormContentPlaceHolder_panel_formSectionli {
    margin: 0 !important;
    padding: 0 0 18px !important;

    border-bottom:
        1px solid var(--star-border, #e4e9ec) !important;
}

body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
#FormContentPlaceHolder_panel_formSectionli::before {
    display: block !important;

    width: 44px !important;
    height: 4px !important;

    margin: 0 0 12px !important;

    border-radius: 999px !important;

    background:
        var(--star-navy-light, #4faec3) !important;

    content: "" !important;
}

body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
#FormContentPlaceHolder_panel_formSectionli
h3 {
    margin: 0 !important;
    padding: 0 !important;

    color: var(--star-navy, #21465f) !important;

    font-size: 23px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}


/* =========================================================
   SAVINGS MESSAGE
   ========================================================= */

body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
#FormContentPlaceHolder_panel_feeSummary_totalSavingLabelli {
    width: 100% !important;

    margin: 0 !important;
    padding: 14px 17px !important;

    border:
        1px solid rgba(79, 174, 195, 0.26) !important;
    border-left:
        4px solid var(--star-navy-light, #4faec3) !important;
    border-radius: 10px !important;

    background: rgba(79, 174, 195, 0.08) !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
#FormContentPlaceHolder_panel_feeSummary_totalSavingLabel {
    display: block !important;

    color: var(--star-text, #25333d) !important;

    font-size: 13px !important;
    line-height: 1.5 !important;
}

body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
#FormContentPlaceHolder_panel_feeSummary_totalSavingLabel
strong {
    color: var(--star-navy, #21465f) !important;

    font-size: 15px !important;
    font-weight: 800 !important;
}


/* =========================================================
   COUPON FIELD
   ========================================================= */

body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
#FormContentPlaceHolder_panel_Coupon_CouponControlli {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
#FormContentPlaceHolder_panel_Coupon_CouponControlli
.CouponComposite {
    display: grid !important;
    grid-template-columns:
        minmax(0, 1fr)
        auto !important;
    align-items: start !important;
    gap: 10px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 16px !important;

    border:
        1px solid var(--star-border, #e4e9ec) !important;
    border-radius: 12px !important;

    background:
        var(--star-surface-soft, #f7f9fa) !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
#FormContentPlaceHolder_panel_Coupon_CouponControl_couponCodeTextboxli {
    position: relative !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
#FormContentPlaceHolder_panel_Coupon_CouponControl_couponCodeTextbox {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;

    margin: 0 !important;
    padding: 10px 13px !important;

    border: 1px solid #ccd8de !important;
    border-radius: 9px !important;

    background: #ffffff !important;
    color: var(--star-text, #25333d) !important;

    font-family:
        "Poppins",
        "Open Sans",
        Verdana,
        Arial,
        sans-serif !important;

    font-size: 13px !important;
    font-weight: 500 !important;

    box-shadow:
        0 1px 2px rgba(23, 53, 72, 0.04) !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
#FormContentPlaceHolder_panel_Coupon_CouponControl_couponCodeTextbox:focus {
    border-color:
        var(--star-navy-light, #4faec3) !important;

    outline: none !important;

    box-shadow:
        0 0 0 3px rgba(79, 174, 195, 0.17) !important;
}

/* Hide the unused helper button beside the coupon input. */
body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
#FormContentPlaceHolder_panel_Coupon_CouponControl_couponCodeTextboxli
> button.helper {
    display: none !important;
}

/* Apply Coupon button uses uppercase class="Button". */
body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
#FormContentPlaceHolder_panel_Coupon_CouponControl_ApplyRemoveCouponButton {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 130px !important;
    min-height: 44px !important;

    margin: 0 !important;
    padding: 10px 17px !important;

    border:
        1px solid var(--star-navy, #21465f) !important;
    border-radius: 9px !important;

    background: #ffffff !important;
    color: var(--star-navy, #21465f) !important;

    font-family:
        "Poppins",
        "Open Sans",
        Verdana,
        Arial,
        sans-serif !important;

    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;

    cursor: pointer !important;

    box-shadow:
        0 4px 11px rgba(33, 70, 95, 0.10) !important;

    box-sizing: border-box !important;

    transition:
        transform 0.12s ease,
        border-color 0.15s ease,
        background-color 0.15s ease,
        box-shadow 0.15s ease !important;
}

body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
#FormContentPlaceHolder_panel_Coupon_CouponControl_ApplyRemoveCouponButton:hover,
body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
#FormContentPlaceHolder_panel_Coupon_CouponControl_ApplyRemoveCouponButton:focus {
    border-color:
        var(--star-navy-light, #4faec3) !important;

    background:
        rgba(79, 174, 195, 0.08) !important;

    transform: translateY(-1px) !important;

    outline:
        3px solid rgba(79, 174, 195, 0.16) !important;
    outline-offset: 2px !important;
}


/* =========================================================
   BACK, CANCEL AND PAY NOW BUTTONS
   ========================================================= */

body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
#FormContentPlaceHolder_panel_panel_WizardNavigationli {
    width: 100% !important;

    margin: 2px 0 0 !important;
    padding: 22px 0 0 !important;

    border-top:
        1px solid var(--star-border, #e4e9ec) !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
#FormContentPlaceHolder_panel_panel_WizardNavigationli::before,
body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
#FormContentPlaceHolder_panel_panel_WizardNavigationli::after {
    display: none !important;
    content: none !important;
}

body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
#FormContentPlaceHolder_panel_panel_WizardNavigationli
.button-set {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
#FormContentPlaceHolder_panel_panel_WizardNavigationli
input.button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 110px !important;
    min-height: 44px !important;

    margin: 0 !important;
    padding: 10px 19px !important;

    border:
        1px solid var(--star-border, #e4e9ec) !important;
    border-radius: 9px !important;

    background:
        var(--star-surface-soft, #f7f9fa) !important;
    color: var(--star-navy, #21465f) !important;

    font-family:
        "Poppins",
        "Open Sans",
        Verdana,
        Arial,
        sans-serif !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;

    cursor: pointer !important;

    box-shadow: none !important;
    box-sizing: border-box !important;

    transition:
        transform 0.12s ease,
        border-color 0.15s ease,
        background-color 0.15s ease,
        box-shadow 0.15s ease !important;
}

/* Back button. */
body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
#FormContentPlaceHolder_panel_panel_WizardNavigation__WizardBackButton {
    border-color: rgba(33, 70, 95, 0.20) !important;

    background: #ffffff !important;
    color: var(--star-navy, #21465f) !important;
}

/* Cancel button. */
body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
#FormContentPlaceHolder_panel_panel_WizardNavigation__WizardCancelButton {
    border-color:
        rgba(245, 109, 115, 0.30) !important;

    background:
        var(--star-coral-light, #fff1f2) !important;
    color:
        var(--star-coral-dark, #dc5961) !important;
}

/* Pay Now button. */
body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
#FormContentPlaceHolder_panel_panel_WizardNavigation__WizardContinueButton {
    min-width: 130px !important;

    border-color:
        var(--star-navy, #21465f) !important;

    background:
        linear-gradient(
            135deg,
            var(--star-navy, #21465f),
            var(--star-navy-dark, #173548)
        ) !important;

    color: #ffffff !important;

    box-shadow:
        0 7px 16px rgba(33, 70, 95, 0.24) !important;
}

body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
#FormContentPlaceHolder_panel_panel_WizardNavigationli
input.button:hover,
body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
#FormContentPlaceHolder_panel_panel_WizardNavigationli
input.button:focus {
    border-color:
        var(--star-navy-light, #4faec3) !important;

    transform: translateY(-1px) !important;

    outline:
        3px solid rgba(79, 174, 195, 0.17) !important;
    outline-offset: 2px !important;
}

/* Slightly darken Pay Now on interaction. */
body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
#FormContentPlaceHolder_panel_panel_WizardNavigation__WizardContinueButton:hover,
body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
#FormContentPlaceHolder_panel_panel_WizardNavigation__WizardContinueButton:focus {
    border-color:
        var(--star-navy-dark, #173548) !important;

    background:
        var(--star-navy-dark, #173548) !important;

    color: #ffffff !important;

    box-shadow:
        0 9px 20px rgba(33, 70, 95, 0.30) !important;
}


/* =========================================================
   UNUSED CANCEL LIGHTBOX
   ========================================================= */

body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
#FormContentPlaceHolder_panel
> .editForm
> .row:has(#FormContentPlaceHolder_panel_panelLightboxli) {
    display: none !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 639px) {
    body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
    #FormContentPlaceHolder_panel_Coupon_CouponControlli
    .CouponComposite {
        grid-template-columns:
            minmax(0, 1fr) !important;
    }

    body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
    #FormContentPlaceHolder_panel_Coupon_CouponControl_ApplyRemoveCouponButton {
        width: 100% !important;
    }

    body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
    #FormContentPlaceHolder_panel_panel_WizardNavigationli
    .button-set {
        flex-direction: column-reverse !important;
    }

    body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
    #FormContentPlaceHolder_panel_panel_WizardNavigationli
    input.button {
        width: 100% !important;
    }
}
/* =========================================================
   LOWERCASE ORDER SUMMARY — WIDTH / OVERFLOW CORRECTION
   ========================================================= */

/*
 * Constrain every major legacy wrapper to the available
 * page width. This prevents padding and old float widths
 * from making the form wider than the white content area.
 */
body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
#SingleColumnLayout,
body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
#SingleColumnLayout > .sixteen.floated,
body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
#FormContentPlaceHolder_panelDiv,
body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
#FormContentPlaceHolder_panel,
body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
#FormContentPlaceHolder_panel > .editForm {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    float: none !important;
    clear: both !important;

    box-sizing: border-box !important;
}


/* =========================================================
   ROW CONTAINMENT
   ========================================================= */

body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
#FormContentPlaceHolder_panel
> .editForm
> .row {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
#FormContentPlaceHolder_panel
> .editForm
> .row
> .span5,
body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
#FormContentPlaceHolder_panel
> .editForm
> .row
> .span10 {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;

    float: none !important;

    box-sizing: border-box !important;
}


/* =========================================================
   TABLE CONTAINMENT
   ========================================================= */

#FormContentPlaceHolder_panel_feeSummary_detailGridFormAjaxGridUpdatePanelli,
#FormContentPlaceHolder_panel_feeSummary_detailGridFormAjaxGridUpdatePanel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}

#FormContentPlaceHolder_panel_feeSummary_detailGridFormAjaxGridUpdatePanel
> div:first-child {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain !important;

    box-sizing: border-box !important;
}


/*
 * Allow the table to fit the desktop page.
 * The previous 720px minimum width caused it to push outside
 * narrower content containers.
 */
#FormContentPlaceHolder_panel_feeSummary_detailGrid {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    table-layout: fixed !important;

    box-sizing: border-box !important;
}

/* Assign predictable column widths. */
#FormContentPlaceHolder_panel_feeSummary_detailGrid
> tbody
> tr.HeaderStyle
> th:nth-child(1),
#FormContentPlaceHolder_panel_feeSummary_detailGrid
> tbody
> tr.RowStyle
> td:nth-child(1) {
    width: 46% !important;
}

#FormContentPlaceHolder_panel_feeSummary_detailGrid
> tbody
> tr.HeaderStyle
> th:nth-child(2),
#FormContentPlaceHolder_panel_feeSummary_detailGrid
> tbody
> tr.RowStyle
> td:nth-child(2) {
    width: 14% !important;
}

#FormContentPlaceHolder_panel_feeSummary_detailGrid
> tbody
> tr.HeaderStyle
> th:nth-child(3),
#FormContentPlaceHolder_panel_feeSummary_detailGrid
> tbody
> tr.RowStyle
> td:nth-child(3) {
    width: 14% !important;
}

#FormContentPlaceHolder_panel_feeSummary_detailGrid
> tbody
> tr.HeaderStyle
> th:nth-child(4),
#FormContentPlaceHolder_panel_feeSummary_detailGrid
> tbody
> tr.RowStyle
> td:nth-child(4) {
    width: 9% !important;
}

#FormContentPlaceHolder_panel_feeSummary_detailGrid
> tbody
> tr.HeaderStyle
> th:nth-child(5),
#FormContentPlaceHolder_panel_feeSummary_detailGrid
> tbody
> tr.RowStyle
> td:nth-child(5) {
    width: 17% !important;
}

/* Prevent long product names from widening the table. */
#FormContentPlaceHolder_panel_feeSummary_detailGrid
> tbody
> tr.RowStyle
> td:first-child {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}


/* =========================================================
   TOTALS FOOTER CONTAINMENT
   ========================================================= */

#FormContentPlaceHolder_panel_feeSummary_detailGrid
> tbody
> tr.FooterStyle
> td {
    width: 100% !important;
    max-width: 100% !important;

    box-sizing: border-box !important;
}

#FormContentPlaceHolder_panel_feeSummary_detailGrid
> tbody
> tr.FooterStyle
> td
> table {
    width: 100% !important;
    max-width: 430px !important;

    margin-left: auto !important;
    margin-right: 0 !important;

    box-sizing: border-box !important;
}

#FormContentPlaceHolder_panel_feeSummary_detailGrid
> tbody
> tr.FooterStyle
> td
> table
> td:first-child {
    width: auto !important;
}

#FormContentPlaceHolder_panel_feeSummary_detailGrid
> tbody
> tr.FooterStyle
> td
> table
> td:last-child {
    width: 95px !important;
    min-width: 95px !important;
}


/* =========================================================
   SAVINGS AND COUPON WIDTH
   ========================================================= */

body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
#FormContentPlaceHolder_panel_feeSummary_totalSavingLabelli,
body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
#FormContentPlaceHolder_panel_Coupon_CouponControlli,
body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
#FormContentPlaceHolder_panel_Coupon_CouponControlli
.CouponComposite {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    box-sizing: border-box !important;
}

/* Keep the coupon button from pushing outside the page. */
body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
#FormContentPlaceHolder_panel_Coupon_CouponControlli
.CouponComposite {
    grid-template-columns:
        minmax(0, 1fr)
        minmax(130px, auto) !important;
}

body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
#FormContentPlaceHolder_panel_Coupon_CouponControl_couponCodeTextboxli {
    min-width: 0 !important;
    max-width: 100% !important;
}

body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
#FormContentPlaceHolder_panel_Coupon_CouponControl_couponCodeTextbox {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}


/* =========================================================
   BUTTON CONTAINMENT
   ========================================================= */

body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
#FormContentPlaceHolder_panel_panel_WizardNavigationli {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
#FormContentPlaceHolder_panel_panel_WizardNavigationli
.button-set {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;

    box-sizing: border-box !important;
}


/* =========================================================
   SMALL TABLET AND MOBILE
   ========================================================= */

@media screen and (max-width: 760px) {
    /*
     * On smaller screens, allow horizontal table scrolling
     * instead of squeezing all five columns too tightly.
     */
    #FormContentPlaceHolder_panel_feeSummary_detailGrid {
        min-width: 680px !important;
        max-width: none !important;

        table-layout: auto !important;
    }

    #FormContentPlaceHolder_panel_feeSummary_detailGrid
    > tbody
    > tr.HeaderStyle
    > th,
    #FormContentPlaceHolder_panel_feeSummary_detailGrid
    > tbody
    > tr.RowStyle
    > td {
        width: auto !important;
    }
}

@media screen and (max-width: 639px) {
    body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
    #FormContentPlaceHolder_panel_Coupon_CouponControlli
    .CouponComposite {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
    #FormContentPlaceHolder_panel_panel_WizardNavigationli
    .button-set {
        flex-direction: column-reverse !important;
    }

    body:has(#FormContentPlaceHolder_panel_feeSummary_detailGrid)
    #FormContentPlaceHolder_panel_panel_WizardNavigationli
    input.button {
        width: 100% !important;
    }
}
/* =========================================================
   MEMBER DIRECTORY — RESPONSIVE RESULTS TABLE
   ========================================================= */

/* Normalize the row and column containing the results. */
body:has(#FormContentPlaceHolder_editForm_resultsGrid)
#FormContentPlaceHolder_editForm
> .editForm
> .row:has(#FormContentPlaceHolder_editForm_resultsGrid) {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
    clear: both !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_editForm_resultsGrid)
#FormContentPlaceHolder_editForm
> .editForm
> .row:has(#FormContentPlaceHolder_editForm_resultsGrid)::before,
body:has(#FormContentPlaceHolder_editForm_resultsGrid)
#FormContentPlaceHolder_editForm
> .editForm
> .row:has(#FormContentPlaceHolder_editForm_resultsGrid)::after {
    display: none !important;
    content: none !important;
}

body:has(#FormContentPlaceHolder_editForm_resultsGrid)
#FormContentPlaceHolder_editForm
> .editForm
> .row:has(#FormContentPlaceHolder_editForm_resultsGrid)
> .span10 {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;

    box-sizing: border-box !important;
}


/* =========================================================
   AJAX AND TABLE WRAPPERS
   ========================================================= */

#FormContentPlaceHolder_editForm_resultsGridFormAjaxGridUpdatePanelli,
#FormContentPlaceHolder_editForm_resultsGridFormAjaxGridUpdatePanel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}

#FormContentPlaceHolder_editForm_resultsGridFormAjaxGridUpdatePanel
> div:first-child {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-radius: 15px !important;

    background: #ffffff !important;

    box-shadow:
        0 8px 22px rgba(23, 53, 72, 0.07) !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
}


/* =========================================================
   TABLE BASE
   ========================================================= */

#FormContentPlaceHolder_editForm_resultsGrid {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;

    border: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;

    table-layout: fixed !important;

    background: #ffffff !important;

    font-family:
        "Poppins",
        "Open Sans",
        Verdana,
        Arial,
        sans-serif !important;

    box-sizing: border-box !important;
}

#FormContentPlaceHolder_editForm_resultsGrid
th,
#FormContentPlaceHolder_editForm_resultsGrid
td {
    box-sizing: border-box !important;
}


/* =========================================================
   COLUMN WIDTHS
   ========================================================= */

#FormContentPlaceHolder_editForm_resultsGrid
> tbody
> tr.HeaderStyle
> th:nth-child(1),
#FormContentPlaceHolder_editForm_resultsGrid
> tbody
> tr.RowStyle
> td:nth-child(1) {
    width: 25% !important;
}

#FormContentPlaceHolder_editForm_resultsGrid
> tbody
> tr.HeaderStyle
> th:nth-child(2),
#FormContentPlaceHolder_editForm_resultsGrid
> tbody
> tr.RowStyle
> td:nth-child(2) {
    width: 45% !important;
}

#FormContentPlaceHolder_editForm_resultsGrid
> tbody
> tr.HeaderStyle
> th:nth-child(3),
#FormContentPlaceHolder_editForm_resultsGrid
> tbody
> tr.RowStyle
> td:nth-child(3) {
    width: 30% !important;
}


/* =========================================================
   TABLE HEADER
   ========================================================= */

#FormContentPlaceHolder_editForm_resultsGrid
> tbody
> tr.HeaderStyle {
    background: var(--star-navy, #21465f) !important;
}

#FormContentPlaceHolder_editForm_resultsGrid
> tbody
> tr.HeaderStyle
> th {
    padding: 14px 15px !important;

    border: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-bottom: 1px solid var(--star-navy-dark, #173548) !important;

    background: var(--star-navy, #21465f) !important;
    color: #ffffff !important;

    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: 0.04em !important;
    text-align: left !important;
    text-transform: uppercase !important;

    vertical-align: middle !important;
}

#FormContentPlaceHolder_editForm_resultsGrid
> tbody
> tr.HeaderStyle
> th:last-child {
    border-right: 0 !important;
}

#FormContentPlaceHolder_editForm_resultsGrid
> tbody
> tr.HeaderStyle
> th:first-child {
    border-top-left-radius: 14px !important;
}

#FormContentPlaceHolder_editForm_resultsGrid
> tbody
> tr.HeaderStyle
> th:last-child {
    border-top-right-radius: 14px !important;
}

/* Sortable heading links. */
#FormContentPlaceHolder_editForm_resultsGrid
> tbody
> tr.HeaderStyle
> th
> a {
    display: block !important;

    color: #ffffff !important;

    font: inherit !important;
    text-decoration: none !important;

    overflow-wrap: anywhere !important;
}

#FormContentPlaceHolder_editForm_resultsGrid
> tbody
> tr.HeaderStyle
> th
> a:hover,
#FormContentPlaceHolder_editForm_resultsGrid
> tbody
> tr.HeaderStyle
> th
> a:focus {
    color: #ffffff !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;

    outline: none !important;
}


/* =========================================================
   DIRECTORY ROWS
   ========================================================= */

#FormContentPlaceHolder_editForm_resultsGrid
> tbody
> tr.RowStyle {
    background: #ffffff !important;

    transition:
        background-color 0.15s ease !important;
}

#FormContentPlaceHolder_editForm_resultsGrid
> tbody
> tr.RowStyle:nth-child(odd) {
    background: var(--star-surface-soft, #f7f9fa) !important;
}

/* Replace the legacy yellow JavaScript hover. */
#FormContentPlaceHolder_editForm_resultsGrid
> tbody
> tr.RowStyle:hover {
    background: rgba(79, 174, 195, 0.10) !important;
}

#FormContentPlaceHolder_editForm_resultsGrid
> tbody
> tr.RowStyle
> td {
    padding: 13px 15px !important;

    border: 0 !important;
    border-bottom: 1px solid var(--star-border, #e4e9ec) !important;

    background: transparent !important;
    color: var(--star-text, #25333d) !important;

    font-size: 12.5px !important;
    line-height: 1.5 !important;
    text-align: left !important;
    vertical-align: middle !important;

    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

/* Directory links. */
#FormContentPlaceHolder_editForm_resultsGrid
> tbody
> tr.RowStyle
> td
> a {
    color: #0070c9 !important;

    font-size: inherit !important;
    font-weight: 500 !important;
    line-height: inherit !important;

    text-decoration: none !important;

    overflow-wrap: anywhere !important;
}

#FormContentPlaceHolder_editForm_resultsGrid
> tbody
> tr.RowStyle
> td:first-child
> a {
    font-weight: 600 !important;
}

#FormContentPlaceHolder_editForm_resultsGrid
> tbody
> tr.RowStyle
> td
> a:hover,
#FormContentPlaceHolder_editForm_resultsGrid
> tbody
> tr.RowStyle
> td
> a:focus {
    color: var(--star-navy, #21465f) !important;

    text-decoration: underline !important;
    text-underline-offset: 3px !important;

    outline: none !important;
}

#FormContentPlaceHolder_editForm_resultsGrid
> tbody
> tr.RowStyle
> td:nth-child(3)
> span {
    display: block !important;

    color: var(--star-text, #25333d) !important;

    overflow-wrap: anywhere !important;
}


/* =========================================================
   DIRECTORY PAGER
   ========================================================= */

#FormContentPlaceHolder_editForm_resultsGrid
> tbody
> tr.PagerStyle
> td {
    padding: 14px 15px !important;

    border: 0 !important;

    background: #ffffff !important;

    box-sizing: border-box !important;
}

#FormContentPlaceHolder_editForm_resultsGrid
> tbody
> tr.PagerStyle
> td
> table {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;

    border: 0 !important;
    border-collapse: collapse !important;

    background: transparent !important;
}

#FormContentPlaceHolder_editForm_resultsGrid
> tbody
> tr.PagerStyle
> td
> table
> tbody {
    display: block !important;
    width: 100% !important;
}

#FormContentPlaceHolder_editForm_resultsGrid
> tbody
> tr.PagerStyle
> td
> table
> tbody
> tr {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;

    width: 100% !important;
    min-width: 0 !important;
}

#FormContentPlaceHolder_editForm_resultsGrid
> tbody
> tr.PagerStyle
> td
> table
> tbody
> tr
> td {
    display: block !important;

    width: auto !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;

    font-size: 12px !important;
}

/* Page links and selected page. */
#FormContentPlaceHolder_editForm_resultsGrid
> tbody
> tr.PagerStyle
> td
> table
> tbody
> tr
> td
> a,
#FormContentPlaceHolder_editForm_resultsGrid
> tbody
> tr.PagerStyle
> td
> table
> tbody
> tr
> td
> span:not(:only-child),
#FormContentPlaceHolder_editForm_resultsGrid
> tbody
> tr.PagerStyle
> td
> table
> tbody
> tr
> td
> span:only-child {
    text-decoration: none !important;
}

#FormContentPlaceHolder_editForm_resultsGrid
> tbody
> tr.PagerStyle
> td
> table
> tbody
> tr
> td
> a,
#FormContentPlaceHolder_editForm_resultsGrid
> tbody
> tr.PagerStyle
> td
> table
> tbody
> tr
> td
> span:only-child {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 32px !important;
    height: 32px !important;

    padding: 0 8px !important;

    border: 1px solid #d7e1e6 !important;
    border-radius: 7px !important;

    background: #ffffff !important;
    color: var(--star-navy, #21465f) !important;

    font-size: 11px !important;
    font-weight: 700 !important;

    box-sizing: border-box !important;
}

#FormContentPlaceHolder_editForm_resultsGrid
> tbody
> tr.PagerStyle
> td
> table
> tbody
> tr
> td
> a:hover,
#FormContentPlaceHolder_editForm_resultsGrid
> tbody
> tr.PagerStyle
> td
> table
> tbody
> tr
> td
> a:focus {
    border-color: var(--star-navy-light, #4faec3) !important;

    background: rgba(79, 174, 195, 0.10) !important;

    outline: 3px solid rgba(79, 174, 195, 0.14) !important;
    outline-offset: 1px !important;
}

/* Current page number. */
#FormContentPlaceHolder_editForm_resultsGrid
> tbody
> tr.PagerStyle
> td
> table
> tbody
> tr
> td
> span:only-child {
    border-color: var(--star-navy, #21465f) !important;

    background: var(--star-navy, #21465f) !important;
    color: #ffffff !important;
}


/* =========================================================
   PAGE SIZE AND RESULT COUNT
   ========================================================= */

#FormContentPlaceHolder_editForm_resultsGrid
> tbody
> tr.PagerStyle
> td
> table
> tbody
> tr
> td:nth-last-child(2) {
    margin-left: auto !important;
}

#FormContentPlaceHolder_editForm_resultsGrid
> tbody
> tr.PagerStyle
> td
> table
> tbody
> tr
> td:nth-last-child(2)
> div {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;

    width: auto !important;
}

#FormContentPlaceHolder_editForm_resultsGrid
> tbody
> tr.PagerStyle
> td
> table
> tbody
> tr
> td:nth-last-child(2)
span {
    display: inline !important;

    width: auto !important;
    height: auto !important;
    min-width: 0 !important;

    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    color: var(--star-text-muted, #64727c) !important;

    font-size: 11.5px !important;
    font-weight: 500 !important;
}

#FormContentPlaceHolder_editForm_resultsGrid
tr.PagerStyle
select {
    width: auto !important;
    min-width: 64px !important;
    min-height: 34px !important;

    margin: 0 !important;
    padding: 5px 26px 5px 8px !important;

    border: 1px solid #ccd8de !important;
    border-radius: 7px !important;

    background-color: #ffffff !important;
    color: var(--star-text, #25333d) !important;

    font-family:
        "Poppins",
        "Open Sans",
        Verdana,
        Arial,
        sans-serif !important;

    font-size: 11.5px !important;

    box-sizing: border-box !important;
}

#FormContentPlaceHolder_editForm_resultsGrid
> tbody
> tr.PagerStyle
> td
> table
> tbody
> tr
> td:last-child {
    margin-left: 12px !important;
}

#FormContentPlaceHolder_editForm_resultsGrid
> tbody
> tr.PagerStyle
> td
> table
> tbody
> tr
> td:last-child
> div {
    width: auto !important;

    color: var(--star-text-muted, #64727c) !important;

    font-size: 11.5px !important;
    line-height: 1.4 !important;
    text-align: right !important;
}


/* =========================================================
   MOBILE DIRECTORY CARDS — BELOW 700px
   ========================================================= */

@media screen and (max-width: 700px) {
    #FormContentPlaceHolder_editForm_resultsGridFormAjaxGridUpdatePanel
    > div:first-child {
        border: 0 !important;
        border-radius: 0 !important;

        background: transparent !important;

        box-shadow: none !important;

        overflow: visible !important;
    }

    #FormContentPlaceHolder_editForm_resultsGrid {
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        background: transparent !important;

        table-layout: auto !important;
    }

    #FormContentPlaceHolder_editForm_resultsGrid
    > tbody {
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
    }

    /* Column headings are replaced with labels inside each card. */
    #FormContentPlaceHolder_editForm_resultsGrid
    > tbody
    > tr.HeaderStyle {
        display: none !important;
    }

    #FormContentPlaceHolder_editForm_resultsGrid
    > tbody
    > tr.RowStyle {
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;

        margin: 0 0 12px !important;

        border: 1px solid var(--star-border, #e4e9ec) !important;
        border-radius: 12px !important;

        background: #ffffff !important;

        box-shadow:
            0 5px 15px rgba(23, 53, 72, 0.06) !important;

        overflow: hidden !important;
    }

    #FormContentPlaceHolder_editForm_resultsGrid
    > tbody
    > tr.RowStyle:hover {
        background: #ffffff !important;
    }

    #FormContentPlaceHolder_editForm_resultsGrid
    > tbody
    > tr.RowStyle
    > td {
        display: grid !important;
        grid-template-columns: 82px minmax(0, 1fr) !important;
        align-items: start !important;
        gap: 12px !important;

        width: 100% !important;

        padding: 12px 14px !important;

        border: 0 !important;
        border-bottom: 1px solid var(--star-border, #e4e9ec) !important;

        background: #ffffff !important;

        font-size: 12.5px !important;
        text-align: left !important;

        box-sizing: border-box !important;
    }

    #FormContentPlaceHolder_editForm_resultsGrid
    > tbody
    > tr.RowStyle
    > td:last-child {
        border-bottom: 0 !important;
    }

    #FormContentPlaceHolder_editForm_resultsGrid
    > tbody
    > tr.RowStyle
    > td::before {
        color: var(--star-navy, #21465f) !important;

        font-size: 10px !important;
        font-weight: 700 !important;
        line-height: 1.5 !important;
        letter-spacing: 0.05em !important;
        text-transform: uppercase !important;
    }

    #FormContentPlaceHolder_editForm_resultsGrid
    > tbody
    > tr.RowStyle
    > td:nth-child(1)::before {
        content: "Name" !important;
    }

    #FormContentPlaceHolder_editForm_resultsGrid
    > tbody
    > tr.RowStyle
    > td:nth-child(2)::before {
        content: "Office" !important;
    }

    #FormContentPlaceHolder_editForm_resultsGrid
    > tbody
    > tr.RowStyle
    > td:nth-child(3)::before {
        content: "Location" !important;
    }


    /* Mobile pager card. */
    #FormContentPlaceHolder_editForm_resultsGrid
    > tbody
    > tr.PagerStyle {
        display: block !important;

        width: 100% !important;

        margin-top: 16px !important;
    }

    #FormContentPlaceHolder_editForm_resultsGrid
    > tbody
    > tr.PagerStyle
    > td {
        display: block !important;

        width: 100% !important;

        padding: 14px !important;

        border: 1px solid var(--star-border, #e4e9ec) !important;
        border-radius: 12px !important;

        background: #ffffff !important;

        box-shadow:
            0 5px 15px rgba(23, 53, 72, 0.05) !important;
    }

    #FormContentPlaceHolder_editForm_resultsGrid
    > tbody
    > tr.PagerStyle
    > td
    > table
    > tbody
    > tr {
        justify-content: center !important;
    }

    #FormContentPlaceHolder_editForm_resultsGrid
    > tbody
    > tr.PagerStyle
    > td
    > table
    > tbody
    > tr
    > td:nth-last-child(2),
    #FormContentPlaceHolder_editForm_resultsGrid
    > tbody
    > tr.PagerStyle
    > td
    > table
    > tbody
    > tr
    > td:last-child {
        flex: 1 1 100% !important;

        width: 100% !important;

        margin: 8px 0 0 !important;
    }

    #FormContentPlaceHolder_editForm_resultsGrid
    > tbody
    > tr.PagerStyle
    > td
    > table
    > tbody
    > tr
    > td:nth-last-child(2)
    > div {
        justify-content: center !important;
    }

    #FormContentPlaceHolder_editForm_resultsGrid
    > tbody
    > tr.PagerStyle
    > td
    > table
    > tbody
    > tr
    > td:last-child
    > div {
        text-align: center !important;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media screen and (max-width: 420px) {
    #FormContentPlaceHolder_editForm_resultsGrid
    > tbody
    > tr.RowStyle
    > td {
        grid-template-columns: 70px minmax(0, 1fr) !important;

        gap: 9px !important;
        padding: 11px 12px !important;
    }

    #FormContentPlaceHolder_editForm_resultsGrid
    > tbody
    > tr.PagerStyle
    > td {
        padding: 12px !important;
    }

    #FormContentPlaceHolder_editForm_resultsGrid
    > tbody
    > tr.PagerStyle
    > td
    > table
    > tbody
    > tr {
        gap: 5px !important;
    }

    #FormContentPlaceHolder_editForm_resultsGrid
    > tbody
    > tr.PagerStyle
    > td
    > table
    > tbody
    > tr
    > td
    > a,
    #FormContentPlaceHolder_editForm_resultsGrid
    > tbody
    > tr.PagerStyle
    > td
    > table
    > tbody
    > tr
    > td
    > span:only-child {
        min-width: 30px !important;
        height: 30px !important;

        padding: 0 7px !important;
    }
}
/* =========================================================
   DIRECTORY TABLE — LOCATION COLUMN FIX
   ========================================================= */

/*
 * Higher-specificity override for the older 760px minimum-width
 * rule that is causing the Location column to be clipped.
 */
body:has(#FormContentPlaceHolder_editForm_resultsGrid)
#FormContentPlaceHolder_editForm_resultsGridFormAjaxGridUpdatePanel
table#FormContentPlaceHolder_editForm_resultsGrid.standard-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    table-layout: fixed !important;

    box-sizing: border-box !important;
}

/* Give Location more room while keeping Office readable. */
body:has(#FormContentPlaceHolder_editForm_resultsGrid)
#FormContentPlaceHolder_editForm_resultsGrid
> tbody
> tr.HeaderStyle
> th:nth-child(1),
body:has(#FormContentPlaceHolder_editForm_resultsGrid)
#FormContentPlaceHolder_editForm_resultsGrid
> tbody
> tr.RowStyle
> td:nth-child(1) {
    width: 25% !important;
}

body:has(#FormContentPlaceHolder_editForm_resultsGrid)
#FormContentPlaceHolder_editForm_resultsGrid
> tbody
> tr.HeaderStyle
> th:nth-child(2),
body:has(#FormContentPlaceHolder_editForm_resultsGrid)
#FormContentPlaceHolder_editForm_resultsGrid
> tbody
> tr.RowStyle
> td:nth-child(2) {
    width: 41% !important;
}

body:has(#FormContentPlaceHolder_editForm_resultsGrid)
#FormContentPlaceHolder_editForm_resultsGrid
> tbody
> tr.HeaderStyle
> th:nth-child(3),
body:has(#FormContentPlaceHolder_editForm_resultsGrid)
#FormContentPlaceHolder_editForm_resultsGrid
> tbody
> tr.RowStyle
> td:nth-child(3) {
    width: 34% !important;
}

/* Allow Office and Location values to wrap instead of being cut off. */
body:has(#FormContentPlaceHolder_editForm_resultsGrid)
#FormContentPlaceHolder_editForm_resultsGrid
> tbody
> tr.RowStyle
> td:nth-child(2),
body:has(#FormContentPlaceHolder_editForm_resultsGrid)
#FormContentPlaceHolder_editForm_resultsGrid
> tbody
> tr.RowStyle
> td:nth-child(3) {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

body:has(#FormContentPlaceHolder_editForm_resultsGrid)
#FormContentPlaceHolder_editForm_resultsGrid
> tbody
> tr.RowStyle
> td:nth-child(2)
> a,
body:has(#FormContentPlaceHolder_editForm_resultsGrid)
#FormContentPlaceHolder_editForm_resultsGrid
> tbody
> tr.RowStyle
> td:nth-child(3)
> span {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;

    white-space: normal !important;
    overflow-wrap: anywhere !important;
}


/* =========================================================
   TABLET — 701px TO 959px
   ========================================================= */

@media screen and (min-width: 701px) and (max-width: 959px) {
    body:has(#FormContentPlaceHolder_editForm_resultsGrid)
    #FormContentPlaceHolder_editForm_resultsGrid
    > tbody
    > tr.HeaderStyle
    > th,
    body:has(#FormContentPlaceHolder_editForm_resultsGrid)
    #FormContentPlaceHolder_editForm_resultsGrid
    > tbody
    > tr.RowStyle
    > td {
        padding: 11px 10px !important;
    }

    /* Slightly increase Location at narrower tablet widths. */
    body:has(#FormContentPlaceHolder_editForm_resultsGrid)
    #FormContentPlaceHolder_editForm_resultsGrid
    > tbody
    > tr.HeaderStyle
    > th:nth-child(1),
    body:has(#FormContentPlaceHolder_editForm_resultsGrid)
    #FormContentPlaceHolder_editForm_resultsGrid
    > tbody
    > tr.RowStyle
    > td:nth-child(1) {
        width: 25% !important;
    }

    body:has(#FormContentPlaceHolder_editForm_resultsGrid)
    #FormContentPlaceHolder_editForm_resultsGrid
    > tbody
    > tr.HeaderStyle
    > th:nth-child(2),
    body:has(#FormContentPlaceHolder_editForm_resultsGrid)
    #FormContentPlaceHolder_editForm_resultsGrid
    > tbody
    > tr.RowStyle
    > td:nth-child(2) {
        width: 39% !important;
    }

    body:has(#FormContentPlaceHolder_editForm_resultsGrid)
    #FormContentPlaceHolder_editForm_resultsGrid
    > tbody
    > tr.HeaderStyle
    > th:nth-child(3),
    body:has(#FormContentPlaceHolder_editForm_resultsGrid)
    #FormContentPlaceHolder_editForm_resultsGrid
    > tbody
    > tr.RowStyle
    > td:nth-child(3) {
        width: 36% !important;
    }

    body:has(#FormContentPlaceHolder_editForm_resultsGrid)
    #FormContentPlaceHolder_editForm_resultsGrid
    > tbody
    > tr.HeaderStyle
    > th {
        font-size: 10px !important;
    }

    body:has(#FormContentPlaceHolder_editForm_resultsGrid)
    #FormContentPlaceHolder_editForm_resultsGrid
    > tbody
    > tr.RowStyle
    > td {
        font-size: 11px !important;
    }
}
/* =========================================================
   DIRECTORY — MOBILE CARD WIDTH CORRECTION
   ========================================================= */

@media screen and (max-width: 700px) {

    /*
     * Override the desktop percentage-based column widths.
     * Every table cell must occupy the full card width.
     */
    body:has(#FormContentPlaceHolder_editForm_resultsGrid)
    #FormContentPlaceHolder_editForm_resultsGrid
    > tbody
    > tr.RowStyle
    > td:nth-child(1),
    body:has(#FormContentPlaceHolder_editForm_resultsGrid)
    #FormContentPlaceHolder_editForm_resultsGrid
    > tbody
    > tr.RowStyle
    > td:nth-child(2),
    body:has(#FormContentPlaceHolder_editForm_resultsGrid)
    #FormContentPlaceHolder_editForm_resultsGrid
    > tbody
    > tr.RowStyle
    > td:nth-child(3) {
        display: grid !important;
        grid-template-columns: 84px minmax(0, 1fr) !important;
        align-items: start !important;
        gap: 12px !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        padding: 12px 14px !important;

        white-space: normal !important;
        overflow: visible !important;

        box-sizing: border-box !important;
    }

    /*
     * Prevent member names, offices, and locations from
     * breaking between every character.
     */
    body:has(#FormContentPlaceHolder_editForm_resultsGrid)
    #FormContentPlaceHolder_editForm_resultsGrid
    > tbody
    > tr.RowStyle
    > td
    > a,
    body:has(#FormContentPlaceHolder_editForm_resultsGrid)
    #FormContentPlaceHolder_editForm_resultsGrid
    > tbody
    > tr.RowStyle
    > td
    > span {
        display: block !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;

        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        hyphens: none !important;

        line-height: 1.5 !important;
    }

    /* Keep the card itself within the available page width. */
    body:has(#FormContentPlaceHolder_editForm_resultsGrid)
    #FormContentPlaceHolder_editForm_resultsGrid
    > tbody
    > tr.RowStyle {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        box-sizing: border-box !important;
    }

    /* Reset desktop column widths on the hidden header as well. */
    body:has(#FormContentPlaceHolder_editForm_resultsGrid)
    #FormContentPlaceHolder_editForm_resultsGrid
    > tbody
    > tr.HeaderStyle
    > th:nth-child(1),
    body:has(#FormContentPlaceHolder_editForm_resultsGrid)
    #FormContentPlaceHolder_editForm_resultsGrid
    > tbody
    > tr.HeaderStyle
    > th:nth-child(2),
    body:has(#FormContentPlaceHolder_editForm_resultsGrid)
    #FormContentPlaceHolder_editForm_resultsGrid
    > tbody
    > tr.HeaderStyle
    > th:nth-child(3) {
        width: auto !important;
    }
}


/* =========================================================
   DIRECTORY — SMALL MOBILE
   ========================================================= */

@media screen and (max-width: 420px) {

    body:has(#FormContentPlaceHolder_editForm_resultsGrid)
    #FormContentPlaceHolder_editForm_resultsGrid
    > tbody
    > tr.RowStyle
    > td:nth-child(1),
    body:has(#FormContentPlaceHolder_editForm_resultsGrid)
    #FormContentPlaceHolder_editForm_resultsGrid
    > tbody
    > tr.RowStyle
    > td:nth-child(2),
    body:has(#FormContentPlaceHolder_editForm_resultsGrid)
    #FormContentPlaceHolder_editForm_resultsGrid
    > tbody
    > tr.RowStyle
    > td:nth-child(3) {
        grid-template-columns: 72px minmax(0, 1fr) !important;
        gap: 9px !important;

        padding: 11px 12px !important;
    }
}
/* =========================================================
   OFFICE DETAILS PAGE
   ========================================================= */

/* Normalize the page layout. */
body:has(#FormContentPlaceHolder_Panel_officeDetails_resultsGrid)
#SingleColumnLayout,
body:has(#FormContentPlaceHolder_Panel_officeDetails_resultsGrid)
#SingleColumnLayout > .sixteen.floated {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
    clear: both !important;

    box-sizing: border-box !important;
}


/* =========================================================
   OFFICE DETAILS CARD
   ========================================================= */

body:has(#FormContentPlaceHolder_Panel_officeDetails_resultsGrid)
#FormContentPlaceHolder_PanelDiv,
body:has(#FormContentPlaceHolder_Panel_officeDetails_resultsGrid)
#FormContentPlaceHolder_Panel {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_Panel_officeDetails_resultsGrid)
#FormContentPlaceHolder_Panel {
    max-width: 1100px !important;

    margin: 24px auto 40px !important;
    padding: 28px !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-top: 4px solid var(--star-navy-light, #4faec3) !important;
    border-radius: 18px !important;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f9fbfc 100%
        ) !important;

    box-shadow:
        0 12px 30px rgba(23, 53, 72, 0.09) !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_Panel_officeDetails_resultsGrid)
#FormContentPlaceHolder_Panel > .editForm {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   LEGACY ROW RESET
   ========================================================= */

body:has(#FormContentPlaceHolder_Panel_officeDetails_resultsGrid)
#FormContentPlaceHolder_Panel
> .editForm
> .row {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 0 24px !important;
    padding: 0 !important;

    float: none !important;
    clear: both !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_Panel_officeDetails_resultsGrid)
#FormContentPlaceHolder_Panel
> .editForm
> .row::before,
body:has(#FormContentPlaceHolder_Panel_officeDetails_resultsGrid)
#FormContentPlaceHolder_Panel
> .editForm
> .row::after {
    display: none !important;
    content: none !important;
}

body:has(#FormContentPlaceHolder_Panel_officeDetails_resultsGrid)
#FormContentPlaceHolder_Panel
> .editForm
> .row
> .span5,
body:has(#FormContentPlaceHolder_Panel_officeDetails_resultsGrid)
#FormContentPlaceHolder_Panel
> .editForm
> .row
> .span10 {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
    clear: none !important;

    box-sizing: border-box !important;
}


/* =========================================================
   OFFICE CONTACT INFORMATION
   ========================================================= */

/* First row contains address, phone, fax and webpage. */
body:has(#FormContentPlaceHolder_Panel_officeDetails_resultsGrid)
#FormContentPlaceHolder_Panel
> .editForm
> .row:first-child {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 18px !important;

    margin-bottom: 26px !important;
}

/* Each half becomes an information card. */
body:has(#FormContentPlaceHolder_Panel_officeDetails_resultsGrid)
#FormContentPlaceHolder_Panel
> .editForm
> .row:first-child
> .span5 {
    padding: 20px !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-radius: 13px !important;

    background: var(--star-surface-soft, #f7f9fa) !important;

    box-shadow:
        0 4px 13px rgba(23, 53, 72, 0.04) !important;
}

/* Office address. */
body:has(#FormContentPlaceHolder_Panel_officeDetails_resultsGrid)
#FormContentPlaceHolder_Panel_officeDetails_addressLiteralli {
    margin: 0 0 20px !important;
    padding: 0 0 17px !important;

    border-bottom: 1px solid var(--star-border, #e4e9ec) !important;

    color: var(--star-text, #25333d) !important;

    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.7 !important;
}

body:has(#FormContentPlaceHolder_Panel_officeDetails_resultsGrid)
#FormContentPlaceHolder_Panel_officeDetails_addressLiteralli::before {
    display: block !important;

    margin: 0 0 7px !important;

    color: var(--star-navy, #21465f) !important;

    content: "Office Address" !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

/* Contact-information headings. */
body:has(#FormContentPlaceHolder_Panel_officeDetails_resultsGrid)
#FormContentPlaceHolder_Panel
h3.desc {
    margin: 0 0 7px !important;
    padding: 0 !important;

    color: var(--star-navy, #21465f) !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;

    text-transform: none !important;
}

/* Add spacing between stacked contact fields. */
body:has(#FormContentPlaceHolder_Panel_officeDetails_resultsGrid)
#FormContentPlaceHolder_Panel_officeDetails_faxNumberLabelli
+ h3.desc,
body:has(#FormContentPlaceHolder_Panel_officeDetails_resultsGrid)
#FormContentPlaceHolder_Panel_officeDetails_officeNumberLabelli
+ h3.desc {
    margin-top: 20px !important;
}

/* Office phone, fax and website values. */
body:has(#FormContentPlaceHolder_Panel_officeDetails_resultsGrid)
#FormContentPlaceHolder_Panel_officeDetails_officeNumberLabelli,
body:has(#FormContentPlaceHolder_Panel_officeDetails_resultsGrid)
#FormContentPlaceHolder_Panel_officeDetails_faxNumberLabelli,
body:has(#FormContentPlaceHolder_Panel_officeDetails_resultsGrid)
#FormContentPlaceHolder_Panel_officeDetails_webPageLabelli {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_Panel_officeDetails_resultsGrid)
#FormContentPlaceHolder_Panel_officeDetails_officeNumberLabel,
body:has(#FormContentPlaceHolder_Panel_officeDetails_resultsGrid)
#FormContentPlaceHolder_Panel_officeDetails_faxNumberLabel,
body:has(#FormContentPlaceHolder_Panel_officeDetails_resultsGrid)
#FormContentPlaceHolder_Panel_officeDetails_webPageLabel {
    display: block !important;

    color: var(--star-text, #25333d) !important;

    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.55 !important;

    overflow-wrap: anywhere !important;
}

/* Website link. */
body:has(#FormContentPlaceHolder_Panel_officeDetails_resultsGrid)
#FormContentPlaceHolder_Panel_officeDetails_webPageLabel
a {
    color: #0070c9 !important;

    font-weight: 600 !important;
    text-decoration: none !important;

    overflow-wrap: anywhere !important;
}

body:has(#FormContentPlaceHolder_Panel_officeDetails_resultsGrid)
#FormContentPlaceHolder_Panel_officeDetails_webPageLabel
a:hover,
body:has(#FormContentPlaceHolder_Panel_officeDetails_resultsGrid)
#FormContentPlaceHolder_Panel_officeDetails_webPageLabel
a:focus {
    color: var(--star-navy, #21465f) !important;

    text-decoration: underline !important;
    text-underline-offset: 3px !important;

    outline: none !important;
}


/* =========================================================
   AGENT TABLE WRAPPERS
   ========================================================= */

#FormContentPlaceHolder_Panel_officeDetails_resultsGridFormAjaxGridUpdatePanelli,
#FormContentPlaceHolder_Panel_officeDetails_resultsGridFormAjaxGridUpdatePanel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}

#FormContentPlaceHolder_Panel_officeDetails_resultsGridFormAjaxGridUpdatePanel
> div:first-child {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-radius: 15px !important;

    background: #ffffff !important;

    box-shadow:
        0 8px 22px rgba(23, 53, 72, 0.07) !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
}


/* =========================================================
   AGENT TABLE BASE
   ========================================================= */

#FormContentPlaceHolder_Panel_officeDetails_resultsGrid {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;

    border: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;

    table-layout: fixed !important;

    background: #ffffff !important;

    font-family:
        "Poppins",
        "Open Sans",
        Verdana,
        Arial,
        sans-serif !important;

    box-sizing: border-box !important;
}

#FormContentPlaceHolder_Panel_officeDetails_resultsGrid
th,
#FormContentPlaceHolder_Panel_officeDetails_resultsGrid
td {
    box-sizing: border-box !important;
}


/* =========================================================
   AGENT TABLE COLUMN WIDTHS
   ========================================================= */

#FormContentPlaceHolder_Panel_officeDetails_resultsGrid
> tbody
> tr.HeaderStyle
> th:nth-child(1),
#FormContentPlaceHolder_Panel_officeDetails_resultsGrid
> tbody
> tr.RowStyle
> td:nth-child(1) {
    width: 24% !important;
}

#FormContentPlaceHolder_Panel_officeDetails_resultsGrid
> tbody
> tr.HeaderStyle
> th:nth-child(2),
#FormContentPlaceHolder_Panel_officeDetails_resultsGrid
> tbody
> tr.RowStyle
> td:nth-child(2) {
    width: 56% !important;
}

#FormContentPlaceHolder_Panel_officeDetails_resultsGrid
> tbody
> tr.HeaderStyle
> th:nth-child(3),
#FormContentPlaceHolder_Panel_officeDetails_resultsGrid
> tbody
> tr.RowStyle
> td:nth-child(3) {
    width: 20% !important;
}


/* =========================================================
   AGENT TABLE HEADER
   ========================================================= */

#FormContentPlaceHolder_Panel_officeDetails_resultsGrid
> tbody
> tr.HeaderStyle {
    background: var(--star-navy, #21465f) !important;
}

#FormContentPlaceHolder_Panel_officeDetails_resultsGrid
> tbody
> tr.HeaderStyle
> th {
    padding: 14px 15px !important;

    border: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-bottom: 1px solid var(--star-navy-dark, #173548) !important;

    background: var(--star-navy, #21465f) !important;
    color: #ffffff !important;

    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: 0.04em !important;
    text-align: left !important;
    text-transform: uppercase !important;

    vertical-align: middle !important;
}

#FormContentPlaceHolder_Panel_officeDetails_resultsGrid
> tbody
> tr.HeaderStyle
> th:first-child {
    border-top-left-radius: 14px !important;
}

#FormContentPlaceHolder_Panel_officeDetails_resultsGrid
> tbody
> tr.HeaderStyle
> th:last-child {
    border-top-right-radius: 14px !important;
    border-right: 0 !important;
}


/* =========================================================
   AGENT TABLE ROWS
   ========================================================= */

#FormContentPlaceHolder_Panel_officeDetails_resultsGrid
> tbody
> tr.RowStyle {
    background: #ffffff !important;

    transition:
        background-color 0.15s ease !important;
}

#FormContentPlaceHolder_Panel_officeDetails_resultsGrid
> tbody
> tr.RowStyle:nth-child(odd) {
    background: var(--star-surface-soft, #f7f9fa) !important;
}

/* Replace the legacy yellow hover. */
#FormContentPlaceHolder_Panel_officeDetails_resultsGrid
> tbody
> tr.RowStyle:hover {
    background: rgba(79, 174, 195, 0.10) !important;
}

#FormContentPlaceHolder_Panel_officeDetails_resultsGrid
> tbody
> tr.RowStyle
> td {
    padding: 13px 15px !important;

    border: 0 !important;
    border-bottom: 1px solid var(--star-border, #e4e9ec) !important;

    background: transparent !important;
    color: var(--star-text, #25333d) !important;

    font-size: 12.5px !important;
    line-height: 1.55 !important;
    text-align: left !important;
    vertical-align: top !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

/* Agent name links. */
#FormContentPlaceHolder_Panel_officeDetails_resultsGrid
> tbody
> tr.RowStyle
> td:first-child
a {
    color: #0070c9 !important;

    font-size: inherit !important;
    font-weight: 600 !important;
    line-height: inherit !important;

    text-decoration: none !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

#FormContentPlaceHolder_Panel_officeDetails_resultsGrid
> tbody
> tr.RowStyle
> td:first-child
a:hover,
#FormContentPlaceHolder_Panel_officeDetails_resultsGrid
> tbody
> tr.RowStyle
> td:first-child
a:focus {
    color: var(--star-navy, #21465f) !important;

    text-decoration: underline !important;
    text-underline-offset: 3px !important;

    outline: none !important;
}

/* Designations. */
#FormContentPlaceHolder_Panel_officeDetails_resultsGrid
> tbody
> tr.RowStyle
> td:nth-child(2) {
    color: var(--star-text-muted, #64727c) !important;
}

/* Phone number. */
#FormContentPlaceHolder_Panel_officeDetails_resultsGrid
> tbody
> tr.RowStyle
> td:nth-child(3) {
    color: var(--star-navy, #21465f) !important;

    font-weight: 600 !important;
    white-space: nowrap !important;
}


/* =========================================================
   BACK BUTTON
   ========================================================= */

body:has(#FormContentPlaceHolder_Panel_officeDetails_resultsGrid)
#FormContentPlaceHolder_Panel_Panel_WizardNavigationli {
    width: 100% !important;

    margin: 2px 0 0 !important;
    padding: 22px 0 0 !important;

    border-top: 1px solid var(--star-border, #e4e9ec) !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_Panel_officeDetails_resultsGrid)
#FormContentPlaceHolder_Panel_Panel_WizardNavigationli::before,
body:has(#FormContentPlaceHolder_Panel_officeDetails_resultsGrid)
#FormContentPlaceHolder_Panel_Panel_WizardNavigationli::after {
    display: none !important;
    content: none !important;
}

body:has(#FormContentPlaceHolder_Panel_officeDetails_resultsGrid)
#FormContentPlaceHolder_Panel_Panel_WizardNavigationli
.button-set {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_Panel_officeDetails_resultsGrid)
#FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardBackButton {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 115px !important;
    min-height: 44px !important;

    margin: 0 !important;
    padding: 10px 19px !important;

    border: 1px solid var(--star-navy, #21465f) !important;
    border-radius: 9px !important;

    background:
        linear-gradient(
            135deg,
            var(--star-navy, #21465f),
            var(--star-navy-dark, #173548)
        ) !important;

    color: #ffffff !important;

    font-family:
        "Poppins",
        "Open Sans",
        Verdana,
        Arial,
        sans-serif !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;

    box-shadow:
        0 7px 16px rgba(33, 70, 95, 0.23) !important;

    cursor: pointer !important;
    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_Panel_officeDetails_resultsGrid)
#FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardBackButton:hover,
body:has(#FormContentPlaceHolder_Panel_officeDetails_resultsGrid)
#FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardBackButton:focus {
    border-color: var(--star-navy-dark, #173548) !important;

    background: var(--star-navy-dark, #173548) !important;
    color: #ffffff !important;

    transform: translateY(-1px) !important;

    outline: 3px solid rgba(79, 174, 195, 0.17) !important;
    outline-offset: 2px !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media screen and (min-width: 701px) and (max-width: 959px) {
    body:has(#FormContentPlaceHolder_Panel_officeDetails_resultsGrid)
    #FormContentPlaceHolder_Panel {
        max-width: 100% !important;
        padding: 23px !important;
    }

    #FormContentPlaceHolder_Panel_officeDetails_resultsGrid
    > tbody
    > tr.HeaderStyle
    > th,
    #FormContentPlaceHolder_Panel_officeDetails_resultsGrid
    > tbody
    > tr.RowStyle
    > td {
        padding: 11px 10px !important;
    }

    #FormContentPlaceHolder_Panel_officeDetails_resultsGrid
    > tbody
    > tr.HeaderStyle
    > th:nth-child(1),
    #FormContentPlaceHolder_Panel_officeDetails_resultsGrid
    > tbody
    > tr.RowStyle
    > td:nth-child(1) {
        width: 25% !important;
    }

    #FormContentPlaceHolder_Panel_officeDetails_resultsGrid
    > tbody
    > tr.HeaderStyle
    > th:nth-child(2),
    #FormContentPlaceHolder_Panel_officeDetails_resultsGrid
    > tbody
    > tr.RowStyle
    > td:nth-child(2) {
        width: 53% !important;
    }

    #FormContentPlaceHolder_Panel_officeDetails_resultsGrid
    > tbody
    > tr.HeaderStyle
    > th:nth-child(3),
    #FormContentPlaceHolder_Panel_officeDetails_resultsGrid
    > tbody
    > tr.RowStyle
    > td:nth-child(3) {
        width: 22% !important;
    }
}


/* =========================================================
   MOBILE AGENT CARDS
   ========================================================= */

@media screen and (max-width: 700px) {
    body:has(#FormContentPlaceHolder_Panel_officeDetails_resultsGrid)
    #FormContentPlaceHolder_Panel {
        margin-top: 14px !important;
        padding: 18px 15px !important;

        border-radius: 14px !important;
    }

    /* Stack the office contact cards. */
    body:has(#FormContentPlaceHolder_Panel_officeDetails_resultsGrid)
    #FormContentPlaceHolder_Panel
    > .editForm
    > .row:first-child {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
    }

    body:has(#FormContentPlaceHolder_Panel_officeDetails_resultsGrid)
    #FormContentPlaceHolder_Panel
    > .editForm
    > .row:first-child
    > .span5 {
        padding: 17px !important;
    }

    /* Remove the desktop table container treatment. */
    #FormContentPlaceHolder_Panel_officeDetails_resultsGridFormAjaxGridUpdatePanel
    > div:first-child {
        border: 0 !important;
        border-radius: 0 !important;

        background: transparent !important;

        box-shadow: none !important;

        overflow: visible !important;
    }

    #FormContentPlaceHolder_Panel_officeDetails_resultsGrid {
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        background: transparent !important;

        table-layout: auto !important;
    }

    #FormContentPlaceHolder_Panel_officeDetails_resultsGrid
    > tbody {
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
    }

    #FormContentPlaceHolder_Panel_officeDetails_resultsGrid
    > tbody
    > tr.HeaderStyle {
        display: none !important;
    }

    #FormContentPlaceHolder_Panel_officeDetails_resultsGrid
    > tbody
    > tr.RowStyle {
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 0 0 12px !important;

        border: 1px solid var(--star-border, #e4e9ec) !important;
        border-radius: 12px !important;

        background: #ffffff !important;

        box-shadow:
            0 5px 15px rgba(23, 53, 72, 0.06) !important;

        overflow: hidden !important;

        box-sizing: border-box !important;
    }

    #FormContentPlaceHolder_Panel_officeDetails_resultsGrid
    > tbody
    > tr.RowStyle:hover {
        background: #ffffff !important;
    }

    #FormContentPlaceHolder_Panel_officeDetails_resultsGrid
    > tbody
    > tr.RowStyle
    > td:nth-child(1),
    #FormContentPlaceHolder_Panel_officeDetails_resultsGrid
    > tbody
    > tr.RowStyle
    > td:nth-child(2),
    #FormContentPlaceHolder_Panel_officeDetails_resultsGrid
    > tbody
    > tr.RowStyle
    > td:nth-child(3) {
        display: grid !important;
        grid-template-columns: 96px minmax(0, 1fr) !important;
        align-items: start !important;
        gap: 11px !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        padding: 12px 14px !important;

        border: 0 !important;
        border-bottom: 1px solid var(--star-border, #e4e9ec) !important;

        background: #ffffff !important;

        white-space: normal !important;

        box-sizing: border-box !important;
    }

    #FormContentPlaceHolder_Panel_officeDetails_resultsGrid
    > tbody
    > tr.RowStyle
    > td:last-child {
        border-bottom: 0 !important;
    }

    #FormContentPlaceHolder_Panel_officeDetails_resultsGrid
    > tbody
    > tr.RowStyle
    > td::before {
        color: var(--star-navy, #21465f) !important;

        font-size: 10px !important;
        font-weight: 700 !important;
        line-height: 1.5 !important;
        letter-spacing: 0.05em !important;
        text-transform: uppercase !important;
    }

    #FormContentPlaceHolder_Panel_officeDetails_resultsGrid
    > tbody
    > tr.RowStyle
    > td:nth-child(1)::before {
        content: "Agent" !important;
    }

    #FormContentPlaceHolder_Panel_officeDetails_resultsGrid
    > tbody
    > tr.RowStyle
    > td:nth-child(2)::before {
        content: "Designations" !important;
    }

    #FormContentPlaceHolder_Panel_officeDetails_resultsGrid
    > tbody
    > tr.RowStyle
    > td:nth-child(3)::before {
        content: "Phone" !important;
    }

    /* Prevent values from breaking one character per line. */
    #FormContentPlaceHolder_Panel_officeDetails_resultsGrid
    > tbody
    > tr.RowStyle
    > td
    > a {
        display: block !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;

        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        hyphens: none !important;
    }

    #FormContentPlaceHolder_Panel_officeDetails_resultsGrid
    > tbody
    > tr.RowStyle
    > td:nth-child(2) {
        color: var(--star-text-muted, #64727c) !important;
    }

    #FormContentPlaceHolder_Panel_officeDetails_resultsGrid
    > tbody
    > tr.RowStyle
    > td:nth-child(3) {
        white-space: normal !important;
    }

    body:has(#FormContentPlaceHolder_Panel_officeDetails_resultsGrid)
    #FormContentPlaceHolder_Panel_Panel_WizardNavigationli
    .button-set {
        display: block !important;
    }

    body:has(#FormContentPlaceHolder_Panel_officeDetails_resultsGrid)
    #FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardBackButton {
        width: 100% !important;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media screen and (max-width: 420px) {
    #FormContentPlaceHolder_Panel_officeDetails_resultsGrid
    > tbody
    > tr.RowStyle
    > td:nth-child(1),
    #FormContentPlaceHolder_Panel_officeDetails_resultsGrid
    > tbody
    > tr.RowStyle
    > td:nth-child(2),
    #FormContentPlaceHolder_Panel_officeDetails_resultsGrid
    > tbody
    > tr.RowStyle
    > td:nth-child(3) {
        grid-template-columns: 80px minmax(0, 1fr) !important;

        gap: 9px !important;
        padding: 11px 12px !important;
    }
}
/* =========================================================
   MEMBER DETAILS PAGE
   ========================================================= */

/* Normalize the legacy single-column layout. */
body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#SingleColumnLayout,
body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#SingleColumnLayout > .sixteen.floated {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
    clear: both !important;

    box-sizing: border-box !important;
}


/* =========================================================
   MEMBER DETAILS CARD
   ========================================================= */

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_PanelDiv,
body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel {
    max-width: 1000px !important;

    margin: 24px auto 40px !important;
    padding: 28px !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-top: 4px solid var(--star-navy-light, #4faec3) !important;
    border-radius: 18px !important;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f9fbfc 100%
        ) !important;

    box-shadow:
        0 12px 30px rgba(23, 53, 72, 0.09) !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel > .editForm {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   LEGACY ROW AND COLUMN RESET
   ========================================================= */

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel
> .editForm
> .row {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 0 24px !important;
    padding: 0 !important;

    float: none !important;
    clear: both !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel
> .editForm
> .row::before,
body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel
> .editForm
> .row::after {
    display: none !important;
    content: none !important;
}

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel
> .editForm
> .row
> .span5,
body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel
> .editForm
> .row
> .span10 {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
    clear: none !important;

    box-sizing: border-box !important;
}


/* =========================================================
   MAIN MEMBER INFORMATION LAYOUT
   ========================================================= */

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel
> .editForm
> .row:first-child {
    display: grid !important;
    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(270px, 0.75fr) !important;
    align-items: stretch !important;
    gap: 18px !important;

    margin-bottom: 26px !important;
}


/* =========================================================
   MEMBER PROFILE SUMMARY
   ========================================================= */

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel
> .editForm
> .row:first-child
> .span5:first-child {
    display: grid !important;
    grid-template-columns: 150px minmax(0, 1fr) !important;
    grid-template-areas:
        "member-photo member-name"
        "member-photo member-association"
        "member-photo member-address"
        "member-photo member-email" !important;
    align-items: start !important;
    column-gap: 22px !important;
    row-gap: 12px !important;

    padding: 22px !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-radius: 15px !important;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f5fafb 100%
        ) !important;

    box-shadow:
        0 7px 20px rgba(23, 53, 72, 0.06) !important;
}


/* =========================================================
   MEMBER PHOTO
   ========================================================= */

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli {
    grid-area: member-photo !important;

    width: 150px !important;
    min-width: 150px !important;

    margin: 0 !important;
    padding: 5px !important;

    border: 1px solid rgba(79, 174, 195, 0.28) !important;
    border-radius: 16px !important;

    background: #ffffff !important;

    box-shadow:
        0 8px 20px rgba(23, 53, 72, 0.12) !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli
img {
    display: block !important;

    width: 100% !important;
    height: 180px !important;

    margin: 0 !important;

    border-radius: 11px !important;

    object-fit: cover !important;
    object-position: center top !important;

    box-sizing: border-box !important;
}


/* =========================================================
   MEMBER NAME AND LICENSE
   ========================================================= */

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_memberNameLiteralli {
    grid-area: member-name !important;

    margin: 0 !important;
    padding: 0 0 14px !important;

    border-bottom: 1px solid var(--star-border, #e4e9ec) !important;

    color: var(--star-navy, #21465f) !important;

    line-height: 1.4 !important;
}

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_memberNameLiteralli
b:first-of-type {
    display: block !important;

    margin: 0 0 5px !important;

    color: var(--star-navy, #21465f) !important;

    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_memberNameLiteralli
b:last-of-type {
    display: inline-flex !important;
    align-items: center !important;

    padding: 5px 9px !important;

    border-radius: 999px !important;

    background: rgba(79, 174, 195, 0.10) !important;
    color: var(--star-navy, #21465f) !important;

    font-size: 10.5px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}


/* =========================================================
   PRIMARY ASSOCIATION
   ========================================================= */

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_primaryAssociationLabelli {
    grid-area: member-association !important;

    margin: 0 !important;
    padding: 0 !important;
}

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_primaryAssociationLabel {
    display: block !important;

    color: var(--star-navy, #21465f) !important;

    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.55 !important;
    letter-spacing: 0.01em !important;
}


/* =========================================================
   OFFICE AND ADDRESS
   ========================================================= */

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_addressLiteralli {
    grid-area: member-address !important;

    margin: 0 !important;
    padding: 13px 14px !important;

    border-left: 3px solid var(--star-navy-light, #4faec3) !important;
    border-radius: 0 9px 9px 0 !important;

    background: rgba(79, 174, 195, 0.07) !important;
    color: var(--star-text, #25333d) !important;

    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1.65 !important;

    overflow-wrap: anywhere !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_addressLiteralli
a {
    color: #0070c9 !important;

    font-weight: 700 !important;
    text-decoration: none !important;
}

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_addressLiteralli
a:hover,
body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_addressLiteralli
a:focus {
    color: var(--star-navy, #21465f) !important;

    text-decoration: underline !important;
    text-underline-offset: 3px !important;

    outline: none !important;
}


/* =========================================================
   MEMBER EMAIL
   ========================================================= */

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_emailLiteralli {
    grid-area: member-email !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow-wrap: anywhere !important;
}

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_emailLiteralli
a {
    display: inline-flex !important;
    align-items: center !important;

    max-width: 100% !important;

    padding: 8px 11px !important;

    border: 1px solid rgba(33, 70, 95, 0.15) !important;
    border-radius: 8px !important;

    background: #ffffff !important;
    color: #0070c9 !important;

    font-size: 11.5px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-decoration: none !important;

    overflow-wrap: anywhere !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_emailLiteralli
a:hover,
body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_emailLiteralli
a:focus {
    border-color: var(--star-navy-light, #4faec3) !important;

    color: var(--star-navy, #21465f) !important;

    outline: 3px solid rgba(79, 174, 195, 0.15) !important;
    outline-offset: 2px !important;
}


/* =========================================================
   DESIGNATIONS AND PHONE INFORMATION
   ========================================================= */

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel
> .editForm
> .row:first-child
> .span5:last-child {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-content: start !important;
    gap: 12px !important;

    padding: 20px !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-radius: 15px !important;

    background: var(--star-surface-soft, #f7f9fa) !important;

    box-shadow:
        0 7px 20px rgba(23, 53, 72, 0.05) !important;
}

/* Labels are recreated on the value cards below. */
body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel
> .editForm
> .row:first-child
> .span5:last-child
> h3.desc {
    display: none !important;
}

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_designationsLabelli,
body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_contactLabelli,
body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_officeLabelli,
body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_faxLabelli {
    position: relative !important;

    min-width: 0 !important;
    min-height: 88px !important;

    margin: 0 !important;
    padding: 36px 15px 14px !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-radius: 11px !important;

    background: #ffffff !important;

    box-shadow:
        0 3px 10px rgba(23, 53, 72, 0.04) !important;

    box-sizing: border-box !important;
}

/* Designations use the full card width. */
body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_designationsLabelli {
    grid-column: 1 / -1 !important;
}

/* Recreate field labels. */
body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_designationsLabelli::before,
body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_contactLabelli::before,
body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_officeLabelli::before,
body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_faxLabelli::before {
    position: absolute !important;
    top: 13px !important;
    left: 15px !important;

    color: var(--star-text-muted, #64727c) !important;

    font-size: 9.5px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
}

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_designationsLabelli::before {
    content: "Designations" !important;
}

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_contactLabelli::before {
    content: "Contact" !important;
}

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_officeLabelli::before {
    content: "Office" !important;
}

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_faxLabelli::before {
    content: "Fax" !important;
}

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_designationsLabel,
body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_contactLabel,
body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_officeLabel,
body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_faxLabel {
    display: block !important;

    color: var(--star-navy, #21465f) !important;

    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.55 !important;

    white-space: normal !important;
    overflow-wrap: break-word !important;
}


/* =========================================================
   MEMBER BIOGRAPHY
   ========================================================= */

/* Hide the biography row when RAMCO returns no content. */
body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel
> .editForm
> .row:has(
    #FormContentPlaceHolder_Panel_memberDetails_biographyLiteralli:empty
) {
    display: none !important;
}

/* Style the biography when content exists. */
body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_biographyLiteralli:not(:empty) {
    position: relative !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 50px 20px 20px !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-radius: 13px !important;

    background: #ffffff !important;
    color: var(--star-text, #25333d) !important;

    font-size: 13px !important;
    line-height: 1.75 !important;

    box-shadow:
        0 5px 15px rgba(23, 53, 72, 0.05) !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_biographyLiteralli:not(:empty)::before {
    position: absolute !important;
    top: 17px !important;
    left: 20px !important;

    color: var(--star-navy, #21465f) !important;

    content: "Biography" !important;

    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}


/* =========================================================
   BACK BUTTON
   ========================================================= */

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_Panel_WizardNavigationli {
    width: 100% !important;

    margin: 0 !important;
    padding: 22px 0 0 !important;

    border-top: 1px solid var(--star-border, #e4e9ec) !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_Panel_WizardNavigationli::before,
body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_Panel_WizardNavigationli::after {
    display: none !important;
    content: none !important;
}

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_Panel_WizardNavigationli
.button-set {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardBackButton {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 115px !important;
    min-height: 44px !important;

    margin: 0 !important;
    padding: 10px 19px !important;

    border: 1px solid var(--star-navy, #21465f) !important;
    border-radius: 9px !important;

    background:
        linear-gradient(
            135deg,
            var(--star-navy, #21465f),
            var(--star-navy-dark, #173548)
        ) !important;

    color: #ffffff !important;

    font-family:
        "Poppins",
        "Open Sans",
        Verdana,
        Arial,
        sans-serif !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;

    box-shadow:
        0 7px 16px rgba(33, 70, 95, 0.23) !important;

    cursor: pointer !important;
    box-sizing: border-box !important;

    transition:
        transform 0.12s ease,
        border-color 0.15s ease,
        background-color 0.15s ease,
        box-shadow 0.15s ease !important;
}

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardBackButton:hover,
body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardBackButton:focus {
    border-color: var(--star-navy-dark, #173548) !important;

    background: var(--star-navy-dark, #173548) !important;
    color: #ffffff !important;

    box-shadow:
        0 9px 20px rgba(33, 70, 95, 0.30) !important;

    transform: translateY(-1px) !important;

    outline: 3px solid rgba(79, 174, 195, 0.17) !important;
    outline-offset: 2px !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media screen and (min-width: 701px) and (max-width: 959px) {
    body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
    #FormContentPlaceHolder_Panel {
        max-width: 100% !important;
        padding: 23px !important;
    }

    body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
    #FormContentPlaceHolder_Panel
    > .editForm
    > .row:first-child {
        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(240px, 0.85fr) !important;
    }

    body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
    #FormContentPlaceHolder_Panel
    > .editForm
    > .row:first-child
    > .span5:first-child {
        grid-template-columns: 125px minmax(0, 1fr) !important;
        column-gap: 17px !important;
        padding: 18px !important;
    }

    body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
    #FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli {
        width: 125px !important;
        min-width: 125px !important;
    }

    body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
    #FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli
    img {
        height: 155px !important;
    }

    body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
    #FormContentPlaceHolder_Panel
    > .editForm
    > .row:first-child
    > .span5:last-child {
        grid-template-columns: minmax(0, 1fr) !important;
        padding: 18px !important;
    }

    body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
    #FormContentPlaceHolder_Panel_memberDetails_designationsLabelli {
        grid-column: auto !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 700px) {
    body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
    #FormContentPlaceHolder_Panel {
        margin-top: 14px !important;
        padding: 18px 15px !important;

        border-radius: 14px !important;
    }

    body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
    #FormContentPlaceHolder_Panel
    > .editForm
    > .row:first-child {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
    }

    body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
    #FormContentPlaceHolder_Panel
    > .editForm
    > .row:first-child
    > .span5:first-child {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            "member-photo"
            "member-name"
            "member-association"
            "member-address"
            "member-email" !important;

        justify-items: stretch !important;

        padding: 18px !important;
    }

    body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
    #FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli {
        justify-self: center !important;

        width: 150px !important;
        min-width: 150px !important;

        margin-bottom: 5px !important;
    }

    body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
    #FormContentPlaceHolder_Panel_memberDetails_memberNameLiteralli,
    body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
    #FormContentPlaceHolder_Panel_memberDetails_primaryAssociationLabelli {
        text-align: center !important;
    }

    body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
    #FormContentPlaceHolder_Panel
    > .editForm
    > .row:first-child
    > .span5:last-child {
        grid-template-columns: minmax(0, 1fr) !important;
        padding: 17px !important;
    }

    body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
    #FormContentPlaceHolder_Panel_memberDetails_designationsLabelli {
        grid-column: auto !important;
    }

    body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
    #FormContentPlaceHolder_Panel_Panel_WizardNavigationli
    .button-set {
        display: block !important;
    }

    body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
    #FormContentPlaceHolder_Panel_Panel_WizardNavigation__WizardBackButton {
        width: 100% !important;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media screen and (max-width: 420px) {
    body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
    #FormContentPlaceHolder_Panel {
        padding: 15px 12px !important;
    }

    body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
    #FormContentPlaceHolder_Panel
    > .editForm
    > .row:first-child
    > .span5:first-child,
    body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
    #FormContentPlaceHolder_Panel
    > .editForm
    > .row:first-child
    > .span5:last-child {
        padding: 15px !important;
    }

    body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
    #FormContentPlaceHolder_Panel_memberDetails_memberNameLiteralli
    b:first-of-type {
        font-size: 20px !important;
    }

    body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
    #FormContentPlaceHolder_Panel_memberDetails_emailLiteralli
    a {
        display: block !important;

        width: 100% !important;

        text-align: center !important;
    }
}
/* =========================================================
   MEMBER DETAILS — CORRECTED LAYOUT
   ========================================================= */

/* Keep the complete member-details page within its container. */
body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel,
body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel > .editForm,
body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel > .editForm > .row,
body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel > .editForm > .row > .span5,
body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel > .editForm > .row > .span10 {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}


/* =========================================================
   PRIMARY TWO-COLUMN LAYOUT
   ========================================================= */

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel
> .editForm
> .row:first-child {
    display: grid !important;
    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(280px, 0.85fr) !important;
    align-items: stretch !important;
    gap: 18px !important;

    width: 100% !important;
    margin: 0 0 18px !important;
}


/* =========================================================
   LEFT MEMBER PROFILE CARD
   ========================================================= */

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel
> .editForm
> .row:first-child
> .span5:first-child {
    display: grid !important;
    grid-template-columns: 120px minmax(0, 1fr) !important;
    grid-template-areas:
        "member-photo member-name"
        "member-photo member-association"
        "member-photo member-address"
        "member-photo member-email" !important;
    align-content: start !important;
    align-items: start !important;
    column-gap: 18px !important;
    row-gap: 12px !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 20px !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-radius: 14px !important;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f8fbfc 100%
        ) !important;

    box-shadow:
        0 6px 18px rgba(23, 53, 72, 0.05) !important;

    overflow: hidden !important;
}


/* =========================================================
   MEMBER PHOTO — COLLAPSE FIX
   ========================================================= */

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli {
    grid-area: member-photo !important;
    align-self: start !important;
    justify-self: start !important;

    display: block !important;

    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;

    height: 150px !important;
    min-height: 150px !important;
    max-height: 150px !important;

    margin: 0 !important;
    padding: 4px !important;

    border: 1px solid rgba(79, 174, 195, 0.30) !important;
    border-radius: 12px !important;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #edf6f8
        ) !important;

    box-shadow:
        0 6px 16px rgba(23, 53, 72, 0.11) !important;

    font-size: 0 !important;
    line-height: 0 !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli
> img {
    position: static !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;

    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 8px !important;

    object-fit: cover !important;
    object-position: center top !important;

    transform: none !important;
    clip: auto !important;

    box-sizing: border-box !important;
}


/* =========================================================
   NAME AND LICENSE
   ========================================================= */

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_memberNameLiteralli {
    grid-area: member-name !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 0 13px !important;

    border-bottom: 1px solid var(--star-border, #e4e9ec) !important;

    overflow-wrap: break-word !important;
}

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_memberNameLiteralli
b:first-of-type {
    display: block !important;

    margin: 0 0 8px !important;

    color: var(--star-navy, #21465f) !important;

    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_memberNameLiteralli
b:last-of-type {
    display: inline-flex !important;
    align-items: center !important;

    margin: 0 !important;
    padding: 5px 8px !important;

    border-radius: 999px !important;

    background: rgba(79, 174, 195, 0.10) !important;
    color: var(--star-navy, #21465f) !important;

    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}


/* =========================================================
   ASSOCIATION, ADDRESS AND EMAIL
   ========================================================= */

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_primaryAssociationLabelli {
    grid-area: member-association !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_primaryAssociationLabel {
    display: block !important;

    color: var(--star-navy, #21465f) !important;

    font-size: 10.5px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;

    overflow-wrap: break-word !important;
}

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_addressLiteralli {
    grid-area: member-address !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 12px 13px !important;

    border-left: 3px solid var(--star-navy-light, #4faec3) !important;
    border-radius: 0 8px 8px 0 !important;

    background: rgba(79, 174, 195, 0.08) !important;
    color: var(--star-text, #25333d) !important;

    font-size: 12px !important;
    line-height: 1.6 !important;

    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_addressLiteralli
a {
    color: #0070c9 !important;

    font-weight: 700 !important;
    text-decoration: none !important;

    white-space: normal !important;
    overflow-wrap: break-word !important;
}

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_emailLiteralli {
    grid-area: member-email !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_emailLiteralli
a {
    display: block !important;

    width: fit-content !important;
    min-width: 0 !important;
    max-width: 100% !important;

    padding: 8px 10px !important;

    border: 1px solid rgba(33, 70, 95, 0.15) !important;
    border-radius: 8px !important;

    background: #ffffff !important;
    color: #0070c9 !important;

    font-size: 10.5px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-decoration: none !important;

    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;

    box-sizing: border-box !important;
}


/* =========================================================
   RIGHT CONTACT DETAILS CARD
   ========================================================= */

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel
> .editForm
> .row:first-child
> .span5:last-child {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-content: start !important;
    align-items: stretch !important;
    gap: 10px !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 15px !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-radius: 14px !important;

    background: var(--star-surface-soft, #f7f9fa) !important;

    box-shadow:
        0 6px 18px rgba(23, 53, 72, 0.05) !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Hide the original headings and recreate compact labels. */
body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel
> .editForm
> .row:first-child
> .span5:last-child
> h3.desc {
    display: none !important;
}

/* Style all current and optional member-detail values. */
body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel
> .editForm
> .row:first-child
> .span5:last-child
> div[id*="_memberDetails_"] {
    position: relative !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 72px !important;

    margin: 0 !important;
    padding: 31px 12px 12px !important;

    border: 1px solid var(--star-border, #e4e9ec) !important;
    border-radius: 10px !important;

    background: #ffffff !important;

    box-shadow:
        0 3px 10px rgba(23, 53, 72, 0.04) !important;

    white-space: normal !important;
    overflow: hidden !important;

    box-sizing: border-box !important;
}

/* Designations use the complete row. */
body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_designationsLabelli {
    grid-column: 1 / -1 !important;
}

/* Any optional website field uses the complete row. */
body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel
> .editForm
> .row:first-child
> .span5:last-child
> div[id*="_memberDetails_"]:has(a[href^="http"]) {
    grid-column: 1 / -1 !important;
    min-height: 0 !important;
}


/* =========================================================
   RIGHT CARD LABELS
   ========================================================= */

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_designationsLabelli::before,
body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_contactLabelli::before,
body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_officeLabelli::before,
body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_faxLabelli::before,
body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel
> .editForm
> .row:first-child
> .span5:last-child
> div[id*="_memberDetails_"]:has(a[href^="http"])::before {
    position: absolute !important;
    top: 11px !important;
    left: 12px !important;

    color: var(--star-text-muted, #64727c) !important;

    font-size: 8.5px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
}

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_designationsLabelli::before {
    content: "Designations" !important;
}

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_contactLabelli::before {
    content: "Contact" !important;
}

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_officeLabelli::before {
    content: "Office" !important;
}

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel_memberDetails_faxLabelli::before {
    content: "Fax" !important;
}

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel
> .editForm
> .row:first-child
> .span5:last-child
> div[id*="_memberDetails_"]:has(a[href^="http"])::before {
    content: "Website" !important;
}


/* =========================================================
   RIGHT CARD VALUES AND WEBSITE OVERFLOW FIX
   ========================================================= */

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel
> .editForm
> .row:first-child
> .span5:last-child
span.labeldesc,
body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel
> .editForm
> .row:first-child
> .span5:last-child
a {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    color: var(--star-navy, #21465f) !important;

    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;

    box-sizing: border-box !important;
}

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel
> .editForm
> .row:first-child
> .span5:last-child
a {
    color: #0070c9 !important;
    text-decoration: none !important;
}


/* =========================================================
   EMPTY BIOGRAPHY ROW
   ========================================================= */

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel
> .editForm
> .row:has(#FormContentPlaceHolder_Panel_memberDetails_biographyLiteralli:empty) {
    display: none !important;
}


/* =========================================================
   NAVIGATION ROW
   ========================================================= */

body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
#FormContentPlaceHolder_Panel
> .editForm
> .row:has(#FormContentPlaceHolder_Panel_Panel_WizardNavigationli) {
    margin: 0 !important;
    padding: 16px 0 0 !important;

    border-top: 1px solid var(--star-border, #e4e9ec) !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media screen and (min-width: 701px) and (max-width: 959px) {
    body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
    #FormContentPlaceHolder_Panel
    > .editForm
    > .row:first-child {
        grid-template-columns:
            minmax(0, 1.25fr)
            minmax(250px, 0.75fr) !important;
    }

    body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
    #FormContentPlaceHolder_Panel
    > .editForm
    > .row:first-child
    > .span5:first-child {
        grid-template-columns: 105px minmax(0, 1fr) !important;
    }

    body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
    #FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli {
        width: 105px !important;
        min-width: 105px !important;
        max-width: 105px !important;

        height: 135px !important;
        min-height: 135px !important;
        max-height: 135px !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 700px) {
    body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
    #FormContentPlaceHolder_Panel
    > .editForm
    > .row:first-child {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
    #FormContentPlaceHolder_Panel
    > .editForm
    > .row:first-child
    > .span5:first-child {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            "member-photo"
            "member-name"
            "member-association"
            "member-address"
            "member-email" !important;

        justify-items: stretch !important;
    }

    body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
    #FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli {
        justify-self: center !important;

        width: 135px !important;
        min-width: 135px !important;
        max-width: 135px !important;

        height: 165px !important;
        min-height: 165px !important;
        max-height: 165px !important;
    }

    body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
    #FormContentPlaceHolder_Panel_memberDetails_memberNameLiteralli,
    body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
    #FormContentPlaceHolder_Panel_memberDetails_primaryAssociationLabelli {
        text-align: center !important;
    }

    body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
    #FormContentPlaceHolder_Panel
    > .editForm
    > .row:first-child
    > .span5:last-child {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
    #FormContentPlaceHolder_Panel_memberDetails_designationsLabelli,
    body:has(#FormContentPlaceHolder_Panel_memberDetails_memberImageLiteralli)
    #FormContentPlaceHolder_Panel
    > .editForm
    > .row:first-child
    > .span5:last-child
    > div[id*="_memberDetails_"] {
        grid-column: auto !important;
    }
}
/* =========================================================
   PORTAL NAVIGATION TOGGLE VISIBILITY FIX
   ========================================================= */

/* Hide the JavaScript-generated toggle by default. */
nav#navigation .portal-menu-toggle {
    display: none !important;
}

/* Show it only on mobile. */
@media screen and (max-width: 767px),
screen and (max-device-width: 767px) {
    nav#navigation .portal-menu-toggle {
        display: flex !important;
    }
}
/* =========================================================
   PORTAL NAVIGATION — TABLET HEIGHT AND VISIBILITY FIX
   768PX TO 959PX
   ========================================================= */

/* Keep the JavaScript toggle mobile-only. */
@media screen and (min-width: 768px) {
    nav#navigation .portal-menu-toggle {
        display: none !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 959px) {

    /*
     * Reset the fixed height inherited from the legacy theme.
     * The navigation must grow to contain both rows.
     */
    nav#navigation,
    nav#navigation.style-1 {
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 96px !important;
        max-height: none !important;

        margin-top: 12px !important;
        margin-bottom: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        border-radius: 11px !important;

        background:
            linear-gradient(
                135deg,
                var(--star-navy, #21465f),
                var(--star-navy-dark, #173548)
            ) !important;

        overflow: visible !important;
        float: none !important;
        clear: both !important;

        box-sizing: border-box !important;
    }

    /*
     * Force all eight links into a contained two-row grid.
     */
    nav#navigation ul#TabMenu {
        position: relative !important;

        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(2, minmax(48px, auto)) !important;
        grid-auto-flow: row !important;
        align-items: stretch !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 96px !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        border-radius: 11px !important;

        background: transparent !important;

        list-style: none !important;

        overflow: visible !important;
        float: none !important;
        clear: both !important;

        box-sizing: border-box !important;
    }

    nav#navigation ul#TabMenu > li {
        position: static !important;

        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 48px !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;

        background: transparent !important;

        float: none !important;
        clear: none !important;

        box-sizing: border-box !important;
    }

    /*
     * Explicitly restore the second row in case an older
     * responsive rule hides later navigation items.
     */
    nav#navigation ul#TabMenu > li:nth-child(n + 5) {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    nav#navigation ul#TabMenu > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: 100% !important;
        min-height: 48px !important;

        margin: 0 !important;
        padding: 8px 7px !important;

        border: 0 !important;
        border-right: 1px solid rgba(255, 255, 255, 0.13) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.13) !important;
        border-radius: 0 !important;

        background: transparent !important;
        color: #ffffff !important;

        font-size: 10.5px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        text-align: center !important;
        text-decoration: none !important;
        text-shadow: none !important;
        white-space: normal !important;

        visibility: visible !important;
        opacity: 1 !important;

        box-sizing: border-box !important;
    }

    nav#navigation ul#TabMenu > li > a > i {
        flex: 0 0 auto !important;

        margin: 0 !important;

        visibility: visible !important;
        opacity: 1 !important;

        transform: scale(0.88) !important;
        transform-origin: center !important;
    }

    /* Remove right borders from items 4 and 8. */
    nav#navigation ul#TabMenu > li:nth-child(4n) > a {
        border-right: 0 !important;
    }

    /* Remove bottom borders from the second row. */
    nav#navigation ul#TabMenu > li:nth-child(n + 5) > a {
        border-bottom: 0 !important;
    }

    /* Tablet corner rounding. */
    nav#navigation ul#TabMenu > li:nth-child(1) > a {
        border-radius: 11px 0 0 0 !important;
    }

    nav#navigation ul#TabMenu > li:nth-child(4) > a {
        border-radius: 0 11px 0 0 !important;
    }

    nav#navigation ul#TabMenu > li:nth-child(5) > a {
        border-radius: 0 0 0 11px !important;
    }

    nav#navigation ul#TabMenu > li:nth-child(8) > a {
        border-radius: 0 0 11px 0 !important;
    }

    nav#navigation ul#TabMenu > li.active > a {
        background:
            linear-gradient(
                135deg,
                var(--star-coral, #f56d73),
                #f77f84
            ) !important;

        color: #ffffff !important;

        box-shadow:
            inset 0 -3px 0 rgba(220, 89, 97, 0.48) !important;
    }


    /* =====================================================
       TABLET DROPDOWNS
       ===================================================== */

    nav#navigation ul#TabMenu > li > ul {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        right: 0 !important;
        left: 0 !important;
        z-index: 1000 !important;

        display: grid !important;
        grid-template-columns:
            repeat(auto-fit, minmax(150px, 1fr)) !important;
        gap: 5px !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 9px !important;

        border: 1px solid var(--star-border, #e4e9ec) !important;
        border-radius: 11px !important;

        background: #ffffff !important;

        box-shadow:
            0 14px 34px rgba(23, 53, 72, 0.20) !important;

        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;

        transform: translateY(-6px) !important;

        box-sizing: border-box !important;
    }

    nav#navigation ul#TabMenu > li:hover > ul,
    nav#navigation ul#TabMenu > li:focus-within > ul {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        transform: translateY(0) !important;
    }
}
/* =========================================================
   TABLET NAVIGATION — TWO-ROW CONTAINMENT FIX
   768PX THROUGH 959PX
   ========================================================= */

@media screen and (min-width: 768px) and (max-width: 959px) {

    /*
     * Allow the navigation background to contain both rows.
     */
    nav#navigation,
    nav#navigation.style-1 {
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 96px !important;
        max-height: none !important;

        margin-top: 12px !important;
        padding: 0 !important;

        border-radius: 11px !important;

        overflow: visible !important;

        float: none !important;
        clear: both !important;

        box-sizing: border-box !important;
    }

    nav#navigation ul#TabMenu {
        position: relative !important;

        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(2, 48px) !important;
        grid-auto-flow: row !important;
        align-items: stretch !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: 96px !important;
        min-height: 96px !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;

        border-radius: 11px !important;

        overflow: visible !important;

        float: none !important;
        clear: both !important;

        box-sizing: border-box !important;
    }

    nav#navigation ul#TabMenu > li {
        position: relative !important;

        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: 48px !important;
        min-height: 48px !important;

        margin: 0 !important;
        padding: 0 !important;

        float: none !important;
        clear: none !important;

        box-sizing: border-box !important;
    }

    /*
     * Explicitly restore items five through eight in case
     * legacy responsive rules attempt to hide them.
     */
    nav#navigation ul#TabMenu > li:nth-child(n + 5) {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    nav#navigation ul#TabMenu > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: 48px !important;
        min-height: 48px !important;

        margin: 0 !important;
        padding: 8px 7px !important;

        border: 0 !important;
        border-right:
            1px solid rgba(255, 255, 255, 0.13) !important;
        border-bottom:
            1px solid rgba(255, 255, 255, 0.13) !important;
        border-radius: 0 !important;

        background: transparent !important;
        color: #ffffff !important;

        font-size: 10.5px !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
        text-align: center !important;
        text-decoration: none !important;
        white-space: normal !important;

        visibility: visible !important;
        opacity: 1 !important;

        box-sizing: border-box !important;
    }

    nav#navigation ul#TabMenu > li > a > i {
        flex: 0 0 auto !important;

        margin: 0 !important;

        visibility: visible !important;
        opacity: 1 !important;

        transform: scale(0.88) !important;
        transform-origin: center !important;
    }

    /* Remove the right border from items four and eight. */
    nav#navigation ul#TabMenu > li:nth-child(4n) > a {
        border-right: 0 !important;
    }

    /* Remove the bottom border from the second row. */
    nav#navigation ul#TabMenu > li:nth-child(n + 5) > a {
        border-bottom: 0 !important;
    }

    /* Correct the outside corners. */
    nav#navigation ul#TabMenu > li:nth-child(1) > a {
        border-radius: 11px 0 0 0 !important;
    }

    nav#navigation ul#TabMenu > li:nth-child(4) > a {
        border-radius: 0 11px 0 0 !important;
    }

    nav#navigation ul#TabMenu > li:nth-child(5) > a {
        border-radius: 0 0 0 11px !important;
    }

    nav#navigation ul#TabMenu > li:nth-child(8) > a {
        border-radius: 0 0 11px 0 !important;
    }

    nav#navigation ul#TabMenu > li.active > a {
        background:
            linear-gradient(
                135deg,
                var(--star-coral, #f56d73),
                #f77f84
            ) !important;

        color: #ffffff !important;

        box-shadow:
            inset 0 -3px 0 rgba(220, 89, 97, 0.48) !important;
    }


    /* =====================================================
       TABLET DROPDOWNS
       ===================================================== */

    nav#navigation ul#TabMenu > li > ul {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        right: 0 !important;
        left: 0 !important;
        z-index: 1000 !important;

        display: grid !important;
        grid-template-columns:
            repeat(auto-fit, minmax(150px, 1fr)) !important;
        gap: 5px !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 9px !important;

        border: 1px solid var(--star-border, #e4e9ec) !important;
        border-radius: 11px !important;

        background: #ffffff !important;

        box-shadow:
            0 14px 34px rgba(23, 53, 72, 0.20) !important;

        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;

        transform: translateY(-6px) !important;

        box-sizing: border-box !important;
    }

    nav#navigation ul#TabMenu > li:hover > ul,
    nav#navigation ul#TabMenu > li:focus-within > ul {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        transform: translateY(0) !important;
    }
}
/* =========================================================
   FINAL TABLET NAVIGATION FIX
   768PX THROUGH 959PX
   ========================================================= */

@media screen and (min-width: 768px) and (max-width: 959px) {

    /*
     * Keep the legacy navigation at one physical row,
     * then reserve another 48px for the overflowing grid row.
     * This prevents the page content from overlapping row two.
     */
    nav#navigation,
    nav#navigation.style-1 {
        position: relative !important;
        z-index: 100 !important;

        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;

        margin-top: 12px !important;
        margin-bottom: 48px !important;
        padding: 0 !important;

        border: 0 !important;
        border-radius: 11px !important;

        background: transparent !important;

        overflow: visible !important;

        float: none !important;
        clear: both !important;

        box-sizing: border-box !important;
    }

    /* Keep the JavaScript toggle mobile-only. */
    nav#navigation .portal-menu-toggle {
        display: none !important;
    }


    /* =====================================================
       TWO-ROW TABLET GRID
       ===================================================== */

    nav#navigation ul#TabMenu {
        position: relative !important;
        z-index: 1 !important;

        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(2, 48px) !important;
        grid-auto-flow: row !important;
        align-items: stretch !important;
        gap: 0 !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: 96px !important;
        min-height: 96px !important;
        max-height: 96px !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        border-radius: 11px !important;

        background: transparent !important;

        list-style: none !important;

        overflow: visible !important;

        float: none !important;
        clear: both !important;

        box-sizing: border-box !important;
    }

    nav#navigation ul#TabMenu > li {
        position: static !important;

        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;

        background: transparent !important;

        float: none !important;
        clear: none !important;

        box-sizing: border-box !important;
    }

    nav#navigation ul#TabMenu > li:nth-child(n + 5) {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }


    /* =====================================================
       TABLET LINKS
       ===================================================== */

    nav#navigation ul#TabMenu > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;

        margin: 0 !important;
        padding: 8px 7px !important;

        border: 0 !important;
        border-right:
            1px solid rgba(255, 255, 255, 0.13) !important;
        border-bottom:
            1px solid rgba(255, 255, 255, 0.13) !important;
        border-radius: 0 !important;

        /*
         * Give every link its own background.
         * Do not rely on the height of the nav container.
         */
        background:
            linear-gradient(
                135deg,
                var(--star-navy, #21465f),
                var(--star-navy-dark, #173548)
            ) !important;

        color: #ffffff !important;

        font-size: 10.5px !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
        text-align: center !important;
        text-decoration: none !important;
        text-shadow: none !important;
        white-space: normal !important;

        visibility: visible !important;
        opacity: 1 !important;

        box-shadow: none !important;

        box-sizing: border-box !important;
    }

    nav#navigation ul#TabMenu > li > a > i {
        flex: 0 0 auto !important;

        margin: 0 !important;

        visibility: visible !important;
        opacity: 1 !important;

        transform: scale(0.88) !important;
        transform-origin: center !important;
    }

    nav#navigation ul#TabMenu > li:not(.active) > a:hover,
    nav#navigation ul#TabMenu > li:not(.active) > a:focus {
        background: var(--star-navy, #21465f) !important;
        color: #ffffff !important;
    }

    nav#navigation ul#TabMenu > li.active > a {
        background:
            linear-gradient(
                135deg,
                var(--star-coral, #f56d73),
                #f77f84
            ) !important;

        color: #ffffff !important;

        box-shadow:
            inset 0 -3px 0 rgba(220, 89, 97, 0.48) !important;
    }


    /* =====================================================
       TABLET BORDERS AND CORNERS
       ===================================================== */

    nav#navigation ul#TabMenu > li:nth-child(4n) > a {
        border-right: 0 !important;
    }

    nav#navigation ul#TabMenu > li:nth-child(n + 5) > a {
        border-bottom: 0 !important;
    }

    nav#navigation ul#TabMenu > li:nth-child(1) > a {
        border-radius: 11px 0 0 0 !important;
    }

    nav#navigation ul#TabMenu > li:nth-child(4) > a {
        border-radius: 0 11px 0 0 !important;
    }

    nav#navigation ul#TabMenu > li:nth-child(5) > a {
        border-radius: 0 0 0 11px !important;
    }

    nav#navigation ul#TabMenu > li:nth-child(8) > a {
        border-radius: 0 0 11px 0 !important;
    }


    /* =====================================================
       TABLET DROPDOWNS
       ===================================================== */

    /*
     * Top-level list items are position: static, so these
     * dropdowns are positioned relative to the navigation.
     */
    nav#navigation ul#TabMenu > li > ul {
        position: absolute !important;
        top: 104px !important;
        right: 0 !important;
        left: 0 !important;
        z-index: 1000 !important;

        display: grid !important;
        grid-template-columns:
            repeat(auto-fit, minmax(150px, 1fr)) !important;
        gap: 5px !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 9px !important;

        border:
            1px solid var(--star-border, #e4e9ec) !important;
        border-radius: 11px !important;

        background: #ffffff !important;

        box-shadow:
            0 14px 34px rgba(23, 53, 72, 0.20) !important;

        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;

        transform: translateY(-6px) !important;

        box-sizing: border-box !important;
    }

    nav#navigation ul#TabMenu > li:hover > ul,
    nav#navigation ul#TabMenu > li:focus-within > ul {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        transform: translateY(0) !important;
    }

    nav#navigation ul#TabMenu > li > ul > li {
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    nav#navigation ul#TabMenu > li > ul > li > a {
        display: flex !important;
        align-items: center !important;

        width: 100% !important;
        min-height: 42px !important;

        margin: 0 !important;
        padding: 10px 12px !important;

        border: 0 !important;
        border-radius: 7px !important;

        background: transparent !important;
        color: var(--star-navy, #21465f) !important;

        font-size: 11px !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;
        text-align: left !important;
        white-space: normal !important;

        box-sizing: border-box !important;
    }
}
/* =========================================================
   DESKTOP NAVIGATION — DROPDOWN HOVER BRIDGE
   ========================================================= */

@media screen and (min-width: 960px) {

    /*
     * Preserve the visual spacing while creating an
     * invisible hoverable bridge between the parent item
     * and its submenu.
     */
    nav#navigation ul#TabMenu > li > ul::before {
        content: "" !important;

        position: absolute !important;
        top: -10px !important;
        right: 0 !important;
        left: 0 !important;

        display: block !important;

        width: 100% !important;
        height: 10px !important;

        background: transparent !important;

        pointer-events: auto !important;
    }

    /*
     * Keep the parent item highlighted while the pointer
     * is over the dropdown.
     */
    nav#navigation ul#TabMenu > li:hover > a,
    nav#navigation ul#TabMenu > li:focus-within > a {
        background: rgba(255, 255, 255, 0.10) !important;
        color: #ffffff !important;
    }
}
/* =========================================================
   LOGIN PAGE — SPACING AND PLACEHOLDER ALIGNMENT FIX
   ========================================================= */

/*
 * Add more room inside the actual Login card.
 */
body:has(#SingleColumnLayout #login)
#login {
    padding: 38px 36px 42px !important;
}

/*
 * Add more separation between the Login Instructions card
 * and the row containing the Login and account setup cards.
 */
body:has(#SingleColumnLayout #login)
#SingleColumnLayout
> .sixteen.floated
> .editForm
> .row:has(#star-login-help) {
    margin-bottom: 36px !important;
}

/*
 * Use a broader password selector. The previous rule only
 * worked when both fields were direct siblings inside one
 * specific first-row column.
 */
body:has(#SingleColumnLayout #login)
#FormContentPlaceHolder_LoginEditForm
.input-control.password {
    margin-top: 16px !important;
}


/* =========================================================
   LOGIN INPUTS
   ========================================================= */

body:has(#SingleColumnLayout #login)
#FormContentPlaceHolder_LoginEditForm
.input-control.text,
body:has(#SingleColumnLayout #login)
#FormContentPlaceHolder_LoginEditForm
.input-control.password {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 48px !important;

    box-sizing: border-box !important;
}

body:has(#SingleColumnLayout #login)
#FormContentPlaceHolder_LoginEditForm
.input-control
input[type="text"],
body:has(#SingleColumnLayout #login)
#FormContentPlaceHolder_LoginEditForm
.input-control
input[type="password"] {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;

    margin: 0 !important;
    padding: 0 14px !important;

    font-family:
        "Poppins",
        "Open Sans",
        Verdana,
        Arial,
        sans-serif !important;

    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: normal !important;

    box-sizing: border-box !important;
}


/* =========================================================
   LEGACY RAMCO PLACEHOLDERS
   ========================================================= */

/*
 * RAMCO uses JavaScript to show and hide these placeholder
 * elements. Do not apply !important to display, because that
 * prevents RAMCO's inline display:none from taking effect.
 */

body:has(#SingleColumnLayout #login)
#FormContentPlaceHolder_LoginEditForm
.input-control
.phholder {
    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    z-index: 2 !important;

    display: flex;
    align-items: center !important;

    width: 100% !important;
    height: 48px !important;

    margin: 0 !important;
    padding: 0 14px !important;

    pointer-events: none !important;

    transform: none !important;

    box-sizing: border-box !important;
}

body:has(#SingleColumnLayout #login)
#FormContentPlaceHolder_LoginEditForm
.input-control
.phholder
.placeholder {
    position: static !important;

    display: block;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #83919a !important;

    font-family:
        "Poppins",
        "Open Sans",
        Verdana,
        Arial,
        sans-serif !important;

    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;

    transform: none !important;
}


/*
 * Fallback for pages where .placeholder is directly inside
 * the input-control instead of inside .phholder.
 */
body:has(#SingleColumnLayout #login)
#FormContentPlaceHolder_LoginEditForm
.input-control
> .placeholder {
    position: absolute !important;

    top: 0 !important;
    right: 14px !important;
    bottom: auto !important;
    left: 14px !important;
    z-index: 2 !important;

    display: flex;
    align-items: center !important;

    height: 48px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #83919a !important;

    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;

    pointer-events: none !important;

    transform: none !important;
}


/*
 * Immediate fallback: hide the custom placeholder whenever
 * its field has focus, even before RAMCO updates its inline
 * display state.
 */
body:has(#SingleColumnLayout #login)
#FormContentPlaceHolder_LoginEditForm
.input-control:focus-within
.phholder,
body:has(#SingleColumnLayout #login)
#FormContentPlaceHolder_LoginEditForm
.input-control:focus-within
> .placeholder {
    display: none !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 639px) {
    body:has(#SingleColumnLayout #login)
    #login {
        padding: 28px 20px 32px !important;
    }

    body:has(#SingleColumnLayout #login)
    #SingleColumnLayout
    > .sixteen.floated
    > .editForm
    > .row:has(#star-login-help) {
        margin-bottom: 24px !important;
    }
}

/* =========================================================
   LOGIN PAGE — PAGE TITLE ALIGNMENT
   ========================================================= */

body:has(#SingleColumnLayout #login)
#introDiv
> .sixteen.floated.page-title {
    padding-right: 24px !important;
    padding-left: 24px !important;

    box-sizing: border-box !important;
}

body:has(#SingleColumnLayout #login)
#introDiv
> .sixteen.floated.page-title
h1 {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

@media screen and (max-width: 639px) {
    body:has(#SingleColumnLayout #login)
    #introDiv
    > .sixteen.floated.page-title {
        padding-right: 16px !important;
        padding-left: 16px !important;
    }
}