/* LAYOUT & UTILITIES STYLES */

/* Start Page Layout */
:root {
    scroll-behavior: unset;
    scroll-behavior: inherit !important;
}

body {
    font-family: 'Switzer', sans-serif !important;
}

body {
    position: relative;
    overflow-x: hidden;
    font-size: 15px;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    background-color: var(--BodyBackground);
}

    body.body-overflow .wrapper {
        transition: all 0.5s ease 0s;
        opacity: 1;
        transition-delay: 0.1s;
        background: #ffffff;
    }

.body {
    background-color: var(--BodyBackground);
    font-weight: 500;
}

.pagetitle {
    min-height: 61px;
    background: var(--PageTitleBackgroundColor);
    z-index: 10;
    border-bottom: solid 1px var(--Outline);
    font-weight: 500;
    text-align: left;
    font-weight: 500;
    font-size: 20px;
    line-height: 100%;
    color: var(--PageTitleTextColor);
    text-align: left;
    display: flex;
    align-items: center;
    padding: 12px 32px;
}

.center-pagetitle {
    min-height: 61px;
    background: var(--PageTitleBackgroundColor);
    z-index: 10;
    border-bottom: solid 1px var(--Outline);
    font-weight: 500;
    text-align: left;
    font-weight: 500;
    font-size: 20px;
    line-height: 100%;
    color: var(--PageTitleTextColor);
    text-align: center;
    align-items: center;
    padding: 12px 32px;
}

@media (max-width:800px) {
    .wrapper {
        max-width: 1435px;
        margin: auto;
        /* Was a hard #F8F8F8, which showed as a near-white band between 768px and 800px - below
           767px the wrapper is already put back on the theme background. */
        background-color: var(--BodyBackground);
        min-height: 100vh;
    }
}

@media (min-width: 800px) and (max-width: 1200px) {


    .ipadadjustment {
        position: relative;
        top: 55px !important;
    }




    .wrapper .top_navbar .top_menu .logo {
        color: var(--primarycolor);
        font-size: 20px;
        font-weight: 700;
        letter-spacing: 3px;
    }
}

@media (max-width: 768px) {
    #pointofsale-table .tabulator-cell {
        padding: 6px 8px !important;
    }

    #pointofsale-table .tabulator-header {
        display: none; /* optional: hide headers for mobile */
    }
}

.sidebar {
    background-color: var(--SideNavBackground) !important;
    color: var(--SideNavTextColor);
    /* Firefox: neutral grey scrollbar (not brand / side-nav colors) */
    scrollbar-width: thin;
    scrollbar-color: #9ca3af rgba(255, 255, 255, 0.08);
}

.svg-icon svg {
    fill: var(--SideNavTextColor);
}

/* Primary / inner nav: outline icons inherit link text color */
.svg-icon svg.nav-outline-icon {
    display: block;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    overflow: visible;
}

.wrapper .sidebar ul li a span.icon .svg-icon:has(svg.nav-outline-icon),
.wrapper .sidebar.inner-side-nav ul li a span.icon .svg-icon:has(svg.nav-outline-icon) {
    width: 20px;
    margin-right: 8px;
}

/* Inner side nav (customer profile, invoice nav, user settings): white rail; text uses --InnerNavText (see skins/*/colors.css), else --SideNavBackground */
.wrapper .sidebar.inner-side-nav {
    background-color: #fff !important;
    color: var(--InnerNavText, var(--SideNavBackground));
    border-right: 1px solid var(--Outline);
    scrollbar-color: #c4c4c4 #f0f0f0;
}

.wrapper .sidebar.inner-side-nav .user-auth {
    background-color: #fff !important;
    border-bottom: 1px solid var(--Outline);
}

.wrapper .sidebar.inner-side-nav ul li {
    border-bottom: none;
}

.wrapper .sidebar.inner-side-nav ul li a {
    color: var(--InnerNavText, var(--SideNavBackground));
    padding: 8px 12px;
}

.wrapper .sidebar.inner-side-nav ul li a .svg-icon svg path {
    fill: var(--IconDefault) !important;
}

.wrapper .sidebar.inner-side-nav ul li a:hover .svg-icon svg path,
.wrapper .sidebar.inner-side-nav ul li a.active .svg-icon svg path {
    fill: var(--SideNavBackground) !important;
}

.wrapper .sidebar.inner-side-nav ul li a .svg-icon svg.nav-outline-icon,
.wrapper .sidebar.inner-side-nav ul li a .svg-icon svg.nav-outline-icon *,
.wrapper .sidebar.inner-side-nav ul li a:hover .svg-icon svg.nav-outline-icon,
.wrapper .sidebar.inner-side-nav ul li a:hover .svg-icon svg.nav-outline-icon *,
.wrapper .sidebar.inner-side-nav ul li a.active .svg-icon svg.nav-outline-icon,
.wrapper .sidebar.inner-side-nav ul li a.active .svg-icon svg.nav-outline-icon * {
    fill: none !important;
    stroke: currentColor !important;
}

/* Glyphs supplied at a different grid size are drawn inside a transform, and a transform scales
   the stroke along with the geometry — the menu's 1.5px outline came out at 0.64px on the
   member/shooter types icon, a sub-pixel hairline that antialiases to a pale wash. This holds the
   stroke at its true width so the icon matches the weight and colour of the rest of the set. */
.svg-icon svg.nav-outline-icon .nav-icon-scaled {
    vector-effect: non-scaling-stroke;
}

.wrapper .sidebar.inner-side-nav ul li a:hover {
    color: var(--InnerNavText, var(--SideNavBackground)) !important;
    background-color: var(--InnerNavActiveTabBackground, #EEF3FB) !important;
}

.wrapper .sidebar.inner-side-nav ul li a.active {
    color: var(--InnerNavActiveTabText, var(--InnerNavText, var(--SideNavBackground))) !important;
    background-color: var(--InnerNavActiveTabBackground, #EEF3FB) !important;
}

.wrapper .sidebar.inner-side-nav ul li a.active .title {
    color: var(--InnerNavActiveTabText, var(--InnerNavText, var(--SideNavBackground)));
}

.wrapper .sidebar.inner-side-nav .arrow-func {
    box-shadow: 2px -2px 0 var(--SideNavBackground);
}

.wrapper .sidebar.inner-side-nav ul li a:hover .arrow-func,
.wrapper .sidebar.inner-side-nav .sidebar-dropdown.active > a .arrow-func {
    box-shadow: 2px -2px 0 var(--InnerNavText, var(--SideNavBackground));
}

.wrapper .sidebar.inner-side-nav .logout {
    color: var(--InnerNavText, var(--SideNavBackground));
}

.wrapper .sidebar.inner-side-nav .logout a {
    color: var(--InnerNavText, var(--SideNavBackground));
}

.wrapper.collapseSideBar .sidebar.inner-side-nav ul li a {
    padding: 7px 10px;
}

/*
 * Vertical tab rail (Tabs.cshtml): same rhythm as primary .sidebar — compact rows, no divider strips.
 * Used on CRM customer pages (TemplateLayout) where the inner column is .tabbar, not .sidebar.inner-side-nav.
 * Label color: var(--InnerNavText, var(--SideNavBackground)) so light-on-dark page titles do not bleed into this white rail.
 */
.tabbar.white-bg.tabbar-inner-nav {
    background-color: #fff !important;
    color: var(--InnerNavText, var(--SideNavBackground));
    border: 1px solid var(--Outline);
    border-radius: 10px;
    box-shadow: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 10px;
    align-self: flex-start;
    font-size: 14px;
    width: 220px;
    flex: 0 0 220px;
    max-width: 100%;
    box-sizing: border-box;
    /* Vertical rail: scroll when many items. Mobile row layout overrides in max-width:767px. */
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Customer tab rail: feature group labels (same vocabulary as primary .sidebar-nav-section-title, light theme) */
.tabbar.tabbar-inner-nav .tabbar-nav-section-label {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    pointer-events: none;
    flex-shrink: 0;
}

.tabbar.tabbar-inner-nav .tabbar-nav-section-title {
    display: block;
    padding: 12px 12px 4px 12px;
    color: var(--InnerNavTextMuted, var(--SideNavBackground));
    opacity: var(--InnerNavSectionTitleOpacity, 0.55);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.2;
}

.tabbar.tabbar-inner-nav > .onethird.activetab,
.tabbar.tabbar-inner-nav > .onethird.inactivetab {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    align-self: stretch;
}

.tabbar.tabbar-inner-nav .activetab,
.tabbar.tabbar-inner-nav .inactivetab {
    min-height: 0;
    padding: 8px 12px !important;
    margin-right: 0 !important;
    border-bottom: none !important;
    border-radius: 0;
    background-color: transparent !important;
    color: var(--InnerNavText, var(--SideNavBackground)) !important;
    font-weight: 500;
}

/* Row owns padding/hover; label link fills remaining width (no nested .inactivetab on <a>) */
.tabbar.tabbar-inner-nav .activetab > a.flex-grow-1,
.tabbar.tabbar-inner-nav .inactivetab > a.flex-grow-1 {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    min-width: 0;
    flex: 1 1 auto;
    background: transparent !important;
    border: none !important;
    font-weight: inherit !important;
}

.tabbar.tabbar-inner-nav .activetab,
.tabbar.white-bg.tabbar-inner-nav .activetab {
    background-color: var(--InnerNavActiveTabBackground, #EEF3FB) !important;
    color: var(--InnerNavActiveTabText, var(--InnerNavText, var(--SideNavBackground))) !important;
    font-weight: 600;
}

.tabbar.tabbar-inner-nav .inactivetab:hover {
    background-color: var(--InnerNavActiveTabBackground, #EEF3FB) !important;
}

.tabbar.tabbar-inner-nav .activetab a,
.tabbar.tabbar-inner-nav .inactivetab a {
    color: inherit !important;
}

/* Beat .white-bg a { color: #222 } for CRM customer tab rail */
.tabbar.white-bg.tabbar-inner-nav a {
    color: var(--InnerNavText, var(--SideNavBackground)) !important;
}

.tabbar.tabbar-inner-nav .icon {
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin-right: 8px;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tabbar.tabbar-inner-nav .icon .svg-icon.svg-icon--twemoji {
    width: 20px;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tabbar.tabbar-inner-nav .icon .svg-icon svg.nav-outline-icon {
    width: 20px;
    height: 20px;
    display: block;
}

/* Contacts list: tag row — colored dot (hue from CompanyTag.Id in markup) */
.tabbar.tabbar-inner-nav .icon.contact-tag-nav-icon .contact-tag-nav-dot {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.contact-tag-nav-dot {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Contacts grid: tag pills (inline colors from ContactTagColorHelper) */
.contact-tag-pill-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.contact-tag-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    max-width: 100%;
    word-break: break-word;
}

.tabbar.tabbar-inner-nav .activetab .icon {
    border-color: transparent !important;
}

.tabbar.tabbar-inner-nav .icon svg path[stroke] {
    stroke: var(--IconDefault) !important;
}

.tabbar.tabbar-inner-nav .activetab .icon svg path[stroke] {
    stroke: var(--SideNavBackground) !important;
}

.tabbar.tabbar-inner-nav .icon svg path[fill]:not([fill="none"]) {
    fill: var(--IconDefault) !important;
}

.tabbar.tabbar-inner-nav .activetab .icon svg path[fill]:not([fill="none"]) {
    fill: var(--SideNavBackground) !important;
}

.tabbar.tabbar-inner-nav .icon svg#fi_17855001,
.tabbar.tabbar-inner-nav .icon svg#fi_17855001 path {
    fill: var(--IconDefault) !important;
}

.tabbar.tabbar-inner-nav .activetab .icon svg#fi_17855001,
.tabbar.tabbar-inner-nav .activetab .icon svg#fi_17855001 path {
    fill: var(--SideNavBackground) !important;
}

.tabbar.tabbar-inner-nav .icon-arrow svg path {
    stroke: var(--InnerNavText, var(--SideNavBackground)) !important;
    opacity: 0.45;
}

.tabbar.tabbar-inner-nav .activetab .icon-arrow svg path {
    stroke: var(--InnerNavText, var(--SideNavBackground)) !important;
    opacity: 1;
}

/* Secondary nav outline icons: match tab label color (overrides path[stroke] rules above) */
.tabbar.tabbar-inner-nav .inactivetab .icon .svg-icon svg.nav-outline-icon,
.tabbar.tabbar-inner-nav .inactivetab .icon .svg-icon svg.nav-outline-icon *,
.tabbar.tabbar-inner-nav .activetab .icon .svg-icon svg.nav-outline-icon,
.tabbar.tabbar-inner-nav .activetab .icon .svg-icon svg.nav-outline-icon * {
    fill: none !important;
    stroke: currentColor !important;
}

.tabbar.tabbar-inner-nav .activetab .flex-grow-1,
.tabbar.tabbar-inner-nav .inactivetab .flex-grow-1 {
    color: inherit !important;
    /* Beat .tabbar .inactivetab .flex-grow-1 { flex-direction: column } — column + align-items:center looked centered */
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

.tabbar.tabbar-inner-nav .activetab .flex-grow-1 span,
.tabbar.tabbar-inner-nav .inactivetab .flex-grow-1 span {
    color: inherit !important;
}

/* Legacy rows still using nested <a class="inactivetab"> (e.g. invoice sidebar) */
.tabbar.tabbar-inner-nav .inactivetab .inactivetab {
    background: transparent !important;
}

@media only screen and (max-width: 767px) {
    .tabbar.white-bg.tabbar-inner-nav {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        margin-bottom: 16px;
        width: 100%;
        flex: 1 1 auto;
        max-width: 100%;
        min-width: 0;
        /* Horizontal strip: beat base overflow-y:auto — swipe to reach all tabs */
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        touch-action: pan-x pan-y;
    }

    .tabbar.white-bg.tabbar-inner-nav.customer-profile-inner-nav {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /*
     * Horizontal inner nav strip: hide non-interactive section groupings (e.g. "ACCOUNT", "Overview")
     * so only real tabs scroll — matches desktop semantics without cluttering the slider.
     */
    .tabbar.tabbar-inner-nav .tabbar-nav-section-label {
        display: none !important;
    }

    /* Direct or wrapped rows (e.g. <a class="onethird"> or <span class="onethird">) */
    .tabbar.tabbar-inner-nav .onethird.activetab,
    .tabbar.tabbar-inner-nav .onethird.inactivetab {
        width: auto;
        max-width: none;
        flex: 0 0 auto;
        align-self: center;
        /* Size to label — a 200px min left a large gap between short items (Profile / Brand Colors). */
        min-width: max-content;
        white-space: nowrap;
    }

    /* Horizontal strip: chevron is desktop-rail affordance; hide so margin-left:auto does not inflate tabs. */
    .tabbar.tabbar-inner-nav .icon-arrow {
        display: none !important;
    }

    /*
     * Wrappers that still use Bootstrap .d-flex on small screens: menu + content stayed side-by-side,
     * crushing the tabbar to a narrow column. Stack full-width so horizontal nav is usable.
     */
    .d-flex:has(> .tabbar.white-bg.tabbar-inner-nav),
    .d-md-flex:has(> .tabbar.white-bg.tabbar-inner-nav) {
        flex-wrap: wrap;
        min-width: 0;
    }

    .d-flex > .tabbar.white-bg.tabbar-inner-nav:first-child,
    .d-md-flex > .tabbar.white-bg.tabbar-inner-nav:first-child {
        flex: 1 1 100%;
        min-width: 0;
        max-width: 100%;
        width: 100%;
    }
}

.active .svg-icon svg {
    fill: var(--SideNavSelectedItemTextColor);
}

.active .svg-icon svg.nav-outline-icon,
.active .svg-icon svg.nav-outline-icon * {
    fill: none !important;
    stroke: currentColor !important;
}

.wrapper .sidebar ul li a:hover .svg-icon svg {
    fill: var(--SideNavSelectedItemTextColor);
}

.wrapper .sidebar ul li a:hover .svg-icon svg.nav-outline-icon,
.wrapper .sidebar ul li a:hover .svg-icon svg.nav-outline-icon * {
    fill: none !important;
    stroke: currentColor !important;
}

/* Solid/filled nav icons (e.g. Admin) reuse .nav-outline-icon's sizing/spacing rules but must render as a
   solid fill, not the stroke-outline twemoji style. Override the outline-forcing rules above (and their
   min-width:1201px duplicate) for icons that also carry .nav-solid-icon — each selector mirrors the rule it
   overrides with one extra class so specificity always wins regardless of source order. */
.wrapper .sidebar ul li a .svg-icon svg.nav-outline-icon.nav-solid-icon,
.wrapper .sidebar ul li a .svg-icon svg.nav-outline-icon.nav-solid-icon *,
.wrapper .sidebar ul li a.active .svg-icon svg.nav-outline-icon.nav-solid-icon,
.wrapper .sidebar ul li a.active .svg-icon svg.nav-outline-icon.nav-solid-icon *,
.wrapper .sidebar ul li a:hover .svg-icon svg.nav-outline-icon.nav-solid-icon,
.wrapper .sidebar ul li a:hover .svg-icon svg.nav-outline-icon.nav-solid-icon *,
.active .svg-icon svg.nav-outline-icon.nav-solid-icon,
.active .svg-icon svg.nav-outline-icon.nav-solid-icon * {
    fill: currentColor !important;
    stroke: none !important;
}

@media (min-width: 1201px) {
    .wrapper {
        /*max-width: 1435px;*/
        margin: auto;
        min-height: 100vh;
    }

        .wrapper .top_navbar {
            height: 55px;
            display: flex;
            z-index: 10;
            width: 235px;
        }

            .wrapper .top_navbar .top_menu {
                width: calc(100%);
                background-color: var(--LogoBackground);
                height: 100%;
                /*display: flex;*/
                /* justify-content: space-between;*/
                align-items: center;
                /*box-shadow: 0px 1px 1px rgba(0, 0, 0, .1);*/
            }

                .wrapper .top_navbar .top_menu .logo {
                    color: var(--primarycolor);
                    font-size: 20px;
                    font-weight: 700;
                    letter-spacing: 3px;
                    height: 50px;
                }
}

.sidebar-submenu ul li a {
    padding: 5px 5px 5px 20px !important;
}

.wrapper .sidebar {
    position: fixed;
    background: var(--whitebg);
    width: 224px;
    background: var(--BodyBackground);
    height: 100%;
    transition: all .3s ease;
    /* box-shadow: rgb(0 0 0 / 5%) 0px 15px 25px, rgb(0 0 0 / 5%) 0px 5px 10px; */
    border-right: 1px solid var(--Outline);
}

    /*    .wrapper .sidebar ul li:first-child {
        border-top: 1px solid #CCC;
    }

*/

    /*    .wrapper .sidebar ul li {
        border-bottom: 1px solid #EEE;
    }

*/

    .wrapper .sidebar ul li a {
        display: block;
        padding: 8px 12px;
        position: relative;
        color: var(--SideNavTextColor);
        white-space: nowrap;
        cursor: pointer;
        /* Pinned here rather than left to the bare `a` rule in global.css: pages that show an email
           preview inject the email template's own <style> into the document
           (@Html.Raw of Email.BuildEmailTemplate — see CommonClasses/Classes/Email.cs), and it carries
           `a { text-decoration: underline }`. A late, equally-specific rule beats global.css, which
           underlined every nav link on the Email designer pages. */
        text-decoration: none;
    }

        .wrapper .sidebar ul li a::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 3px;
            height: 100%;
            background: blue;
            display: none;
        }

        .wrapper .sidebar ul li a span.icon {
            /*                margin-right: 10px;*/
            /*                width: 20px;*/
            display: flex;
            align-items: center;
        }

        .wrapper .sidebar ul li a .svg-icon svg path {
            fill: var(--SideNavIconColor) !important;
        }

        .wrapper .sidebar ul li a .svg-icon svg.nav-outline-icon,
        .wrapper .sidebar ul li a .svg-icon svg.nav-outline-icon *,
        .wrapper .sidebar ul li a.active .svg-icon svg.nav-outline-icon,
        .wrapper .sidebar ul li a.active .svg-icon svg.nav-outline-icon *,
        .wrapper .sidebar ul li a:hover .svg-icon svg.nav-outline-icon,
        .wrapper .sidebar ul li a:hover .svg-icon svg.nav-outline-icon * {
            fill: none !important;
            stroke: currentColor !important;
        }

            .wrapper .sidebar ul li a span.icon > img {
                width: 25px;
            }

            .wrapper .sidebar ul li a span.icon i {
                font-size: 18px;
            }

        .wrapper .sidebar ul li a span.title {
            display: inline-block;
            font-size: 14px;
            font-weight: 500;
            text-decoration: none;
            line-height: 1;
            /*                margin-top: 3px;
                margin-bottom: 3px;*/
        }

        .wrapper .sidebar ul li a.active,
        .wrapper .sidebar ul li a:hover {
            color: var(--SideNavSelectedItemTextColor);
            background-color: var(--SideNavSelectedItemBackgroundColor);
            font-weight: 600;
            /*background-color: #E8E8E8;*/
            text-decoration: none;
        }

            .wrapper .sidebar ul li a.active .title {
                font-weight: 600;
            }

.wrapper .main-Content {
    width: calc(100% - 224px);
    /*margin-top: 60px;*/
    margin-left: 224px;
    transition: all 0.5s ease;
}

.sidebar-submenu ul li {
    border-bottom: none !important;
}

.wide {
    max-width: 1635px;
}

.sticky {
    position: fixed;
    top: 0;
}

.wrapper .top_navbar .hamburger {
    width: 70px;
    padding: 16px 20px;
    background-color: white;
    cursor: pointer;
    position: relative;
    z-index: 20;
}

    .wrapper .top_navbar .hamburger div {
        width: 28px;
        height: 3px;
        background-color: var(--PageTitleColor);
        margin: 4px 0;
        border-radius: 5px;
    }

.page-sub-heading {
    color: var(--secondarycolor)
}

.wrapper .main-Content .item {
    background: #fff;
    margin-bottom: 10px;
    padding: 15px;
    font-size: 14px;
    line-height: 22px;
}

.wrapper.collapseSideBar .sidebar ul li a {
    text-align: left;
    padding: 7px 10px;
}

    .wrapper.collapseSideBar .sidebar ul li a span.title {
        display: none;
    }

.wrapper.collapseSideBar .main-Content {
    /*    width: calc(100% - 90px);
    margin-left: 80px;*/
}

.logininfo {
    color: white !important;
    padding-top: 15px;
}

    .logininfo a {
        color: white !important;
    }

.sidebar-submenu {
    display: none;
    border-top: solid 1px white;
    background: var(--whitebg);
}

    .sidebar-submenu a {
        color: white;
    }

    .sidebar-submenu .title {
        padding-left: 0px;
        padding-top: 2px;
        padding-bottom: 2px;
        font-size: 14px !important;
    }

/* sidebar heading */
.sidebar-heading {
    padding: 5px 10px;
    color: #fff;
    font-size: 18px;
}

.wrapper.collapseSideBar .sidebar-heading {
    transition: all 0.5s;
    opacity: 0;
    visibility: none;
}

/* Primary nav: feature group labels (non-clickable) */
.sidebar-nav-section-label {
    list-style: none;
    pointer-events: none;
}

.sidebar-nav-section-title {
    display: block;
    padding: 14px 18px 6px 18px;
    color: var(--MenuSectionColor);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.2;
}

/* Desktop collapsed rail: hide group labels (mobile drawer uses collapseSideBar too — see max-width: 1200px). */
@media (min-width: 1201px) {
    .wrapper.collapseSideBar .sidebar-nav-section-title {
        transition: opacity 0.35s;
        opacity: 0;
        height: 0;
        padding: 0;
        margin: 0;
        overflow: hidden;
    }
}

/*sidebar img */
.sidebar-img img {
    width: 17px;
    height: 17px;
}

@media (max-width:1200px) {



    .wrapper.collapseSideBar .sidebar ul li a {
        text-align: left;
        padding-left: 15%;
    }

        .wrapper.collapseSideBar .sidebar ul li a span.title {
            display: inline-block;
        }

    .wrapper.collapseSideBar .sidebar-nav-section-title {
        opacity: 1;
        height: auto;
        padding: 14px 18px 6px 18px;
        margin: 0;
        overflow: visible;
    }
}

.arrow-func {
    width: 7px;
    height: 7px;
    transition: .5s;
    display: inline-block;
    box-shadow: 2px -2px 0px var(--SideNavTextColor);
    transform: rotate(45deg);
    position: relative;
    right: 5px;
}

.sidebar-dropdown.active .arrow-func {
    transform: rotate(135deg);
    transition: .5s;
}

.form-fullscreen {
    width: calc(100% - 40px) !important;
}

@media (max-width: 1875px) {
    .form-1600 {
        width: 100% !important;
    }
}

@media (max-width: 1675px) {
    .form-1600, .form-1400 {
        width: 100% !important;
    }
}

@media (max-width: 1475px) {
    .form-fullscreen, .form-1600, .form-1400, .form-1200 {
        width: 100% !important;
    }
}

@media (max-width: 1275px) {
    .form-1600, .form-1400, .form-1200 {
        width: 100% !important;
    }
}

@media (max-width: 1040px) {
    .form-1600, .form-1400, .form-1200, .form-1000 {
        width: 100% !important;
    }
}

@media (max-width: 875px) {
    .form-1600, .form-1400, .form-1200, .form-1000, .form-800 .form-600 {
        width: 100% !important;
    }
}

@media (max-width: 625px) {
    .form-1600, .form-1400, .form-1200, .form-1000, .form-800 .form-600 .form-450 {
        width: 100% !important;
    }
}

@media (min-width: 1875px) {
    /*    .form-1600 {
        width: 1600px !important;
        position: relative;
        left: 50%;
        margin-left: -800px;
    }*/
}

@media (min-width: 1675px) {
    .form-1400 {
        /*        width: 1400px !important;
        position: relative;
        left: 50%;
        margin-left: -700px;*/
    }
}

@media (min-width: 1475px) {
    .form-1200 {
        /*        width: 1200px !important;
        position: relative;
        left: 50%;
        margin-left: -600px;*/
    }
}

@media (min-width: 1000px) {
    .modal .form-1200 {
        width: 1200px !important;
        position: relative;
        left: 50%;
        margin-left: -600px;
    }
}

@media (min-width: 1040px) and (max-width: 1200px) {
    .form-1000 {
        width: 1000px !important;
        position: relative;
        left: 50%;
        margin-left: -500px;
    }

    /* Nested form-1000 inside event list (and similar sub-nav layouts) must stay in the content column */
    .event-section .sidebar-table-content > .form-1000 {
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
        left: auto !important;
        margin-left: 0 !important;
    }
}

@media (min-width: 1275px) {
    .form-1000 {
        /*        width: 1000px !important;
        position: relative;
        left: 50%;
        margin-left: -500px;*/
    }
}

@media (min-width: 840px) {
    .form-800 {
        /*        width: 800px !important;
        position: relative;
        left: 50%;
        margin-left: -400px;*/
    }
}

@media (min-width: 640px) {
    .form-600 {
        /*        width: 600px !important;
        position: relative;
        left: 50%;
        margin-left: -300px;*/
    }
}

@media (min-width: 490px) {
    .form-450 {
        width: 450px !important;
        position: relative;
        left: 50%;
        margin-left: -225px;
    }
}

@media (min-width: 1401px) {
    .form-1600, .form-1400, .form-1200, .form-1000, .form-800, .form-600, .form-450 {
        padding: 15px;
    }
}

@media (max-width: 501px) {
    .form-1600, .form-1400, .form-1200, .form-1000, .form-800, .form-600, .form-450 {
        /*        padding-top: 10px;*/
        padding: 15px;
    }
}

@media (max-width: 501px) {
    .mobileportrait {
    }

    .mobilewide {
        display: none;
    }

    .mobilewide-desktop {
        display: none;
    }

    .desktop {
        display: none !important;
    }
}

@media (max-width: 800px) and (min-width: 502px) {
    .mobileportrait {
        display: none;
    }

    .desktop {
        display: none !important;
    }
}

@media (min-width: 801px) {
    .mobileportrait {
        display: none;
    }

    .mobilewide {
        display: none;
    }

    .mobileportrait-mobilewide {
        display: none !important;
    }
}

/* Portrait mobile: Invoice / Quote / Request title row with rule under (matches billing header) */
.mobileportrait .mobile-invoice-title-wrap {
    font-size: 34px;
    color: #000;
    padding-top: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}

/* Start Page Layout */
/* General Tag Styles */
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

* {
    margin: 0;
    list-style: none;
    padding: 0;
    text-decoration: none;
    /*    font-family: 'Montserrat',sans-serif;*/
}

p {
    font-weight: 500;
    margin: 0px;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    margin: 0;
    margin-bottom: 5px;
}

h1, .h1 {
    font-size: 45px;
    line-height: normal;
}

h2, .h2 {
    font-size: 44px;
    line-height: 1.2;
    margin: 0 0 10px;
    font-weight: 500;
}

h3, .h3 {
    font-size: 30px;
    font-weight: 600;
    margin: 0 0 15px;
}

h4, .h4 {
    font-size: 20px;
    line-height: normal;
    font-weight: 500;
}

h5, .h5 {
    font-size: 18px;
}

h6, .h6 {
    font-size: 16px;
}

ul, ol {
    margin: 0;
    padding: 0;
    line-height: normal;
}

    ul ul, ol ul, ul ol, ol ol {
        margin-bottom: 0;
        line-height: normal;
    }

.list-unstyled {
    padding-left: 0;
    list-style: none;
}

a {
    color: var(--primarycolor );
    text-decoration: none;
}

    a:hover {
        text-decoration: underline;
    }

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

    .clearfix:before, .clearfix:after {
        content: " ";
        display: table;
    }

    .clearfix:after {
        clear: both;
    }

.clearfix {
    *zoom: 1;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

/*common spacing start*/
.space-between-sec {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.check-box-sec {
    display: flex;
    gap: 20px;
    align-items: center;
}

.justify-space-between-end {
    display: flex;
    justify-content: space-between;
    align-items: end;
}

.wrapper .sidebar ul li a.space-between-sec {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.content-space-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.content-left-section {
    display: flex;
    justify-content: left;
    align-items: center;
}

.content-right-section {
    display: flex;
    justify-content: right;
    align-items: center;
    gap: 10px;
}

.content-align-center {
    display: flex;
    align-items: center;
}

.text-center {
    text-align: center;
}

.center {
    text-align: center !important;
}

/* Visible Fields / column-settings popups — saving status after Save */
.visible-fields-saving-status {
    margin-top: 0.75rem;
    padding-bottom: 1.25rem;
    margin-bottom: 0;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 600;
    font-style: normal;
    color: var(--CardHeaderText, #154a7e);
}

.visible-fields-saving-status .loading-dots span {
    opacity: 0.2;
    animation: visibleFieldsDot 1.2s ease-in-out infinite;
}

.visible-fields-saving-status .loading-dots span:nth-child(1) {
    animation-delay: 0s;
}

.visible-fields-saving-status .loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.visible-fields-saving-status .loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes visibleFieldsDot {
    0%, 80%, 100% { opacity: 0.2; }
    40% { opacity: 1; }
}

/* filters and background */
.filters {
    /*    background: var(--whitebg);
    box-shadow: rgb(0 0 0 / 5%) 0px 15px 25px, rgb(0 0 0 / 5%) 0px 5px 10px;*/
    margin-bottom: 0px;
    z-index: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 100%;
    background-color: var(--Surface-3);
}

/*.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto {
    padding-right: 0px;
}

*/

.StoreTileBg > * {
    background: var(--StoreTileBg) !important;
    background-color: var(--StoreTileBg) !important;
    color: var(--whitebgtext);
}

.white-bg {
    background: var(--Surface-3);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 15px;
    z-index: 0;
    border-radius: 4px;
    color: var(--whitebgtext);
}

/* Broadcasts list + Send Message: show shell (--BodyBackground) around comms cards */
.comm-broadcasts-layout > .d-flex > .sidebar-table-content,
.comm-broadcasts-layout > .d-md-flex > .sidebar-table-content {
    background: transparent;
    padding: 0 0 20px 0;
    box-sizing: border-box;
}

@media (min-width: 992px) {
    .comm-broadcasts-layout > .d-flex > .sidebar-table-content,
    .comm-broadcasts-layout > .d-md-flex > .sidebar-table-content {
        padding: 0 12px 24px 12px;
    }
}

/* Short pages (e.g. broadcast sent): fill viewport so body/wrapper white does not show under the shell */
.comm-broadcasts-layout.form-1400,
.comm-broadcasts-layout.form-1200 {
    background: var(--BodyBackground);
    min-height: calc(100vh - 61px);
    box-sizing: border-box;
}

/* Communications section: audit notes (created/updated by + date) at page footers */
.d-flex:has(> .tabbar.tabbar-inner-nav) .sidebar-table-content .comm-audit-note,
.comm-broadcasts-layout .comm-audit-note,
.comm-campaign-edit-layout .comm-audit-note,
.edit-campaign-layout .comm-audit-note {
    margin-top: 5px;
}

.d-flex:has(> .tabbar.tabbar-inner-nav) .sidebar-table-content .comm-audit-note,
.d-flex:has(> .tabbar.tabbar-inner-nav) .sidebar-table-content .comm-audit-note div,
.d-flex:has(> .tabbar.tabbar-inner-nav) .sidebar-table-content .comm-audit-note span,
.comm-broadcasts-layout .comm-audit-note,
.comm-broadcasts-layout .comm-audit-note div,
.comm-broadcasts-layout .comm-audit-note span {
    font-size: 12px !important;
    line-height: 1.45 !important;
    color: #6b7280 !important;
    font-weight: 400 !important;
}

/* Created / Updated by — same baseline when shown side by side at card footers */
.comm-audit-note.space-between-sec {
    align-items: center;
    column-gap: 24px;
    row-gap: 8px;
}

.comm-audit-note.space-between-sec > div {
    padding-top: 0 !important;
    margin: 0;
}

/* Communications section: field helper text (match Send Communication) */
.comm-broadcasts-layout .text-muted.small,
.comm-broadcasts-layout .table-card-body .white-bg .text-muted.small,
.comm-broadcasts-layout .table-card-body .white-bg .text-muted,
.comm-campaign-edit-layout .text-muted.small,
.comm-campaign-edit-layout .table-card-body .white-bg .text-muted.small,
.comm-campaign-edit-layout .table-card-body .white-bg .text-muted,
.edit-campaign-layout .text-muted.small,
.edit-campaign-layout .text-muted,
.input-form .cm-campaign-form-root .text-muted.small,
.input-form .cm-campaign-form-root .text-muted,
.input-form .ct-field .text-muted.small,
.input-form .ct-field .text-muted {
    color: #6b7280;
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.45;
}

.comm-broadcasts-layout .text-muted.small,
.comm-broadcasts-layout .table-card-body .white-bg .text-muted.small,
.comm-campaign-edit-layout .text-muted.small,
.comm-campaign-edit-layout .table-card-body .white-bg .text-muted.small,
.edit-campaign-layout .text-muted.small,
.input-form .cm-campaign-form-root .text-muted.small,
.input-form .ct-field .text-muted.small {
    margin-top: 8px;
}

.comm-broadcasts-layout .text-muted.small.broadcast-intake-help,
.edit-campaign-layout .text-muted.small.broadcast-intake-help,
.input-form .cm-campaign-form-root .text-muted.small.broadcast-intake-help {
    font-style: italic;
}

/* Communications list tables: full-width row dividers with 28px cell inset (Templates, Sent Messages, Campaigns) */
.comm-list-table-card .table-card-body {
    padding: 0;
}

.comm-list-table-card .table-card-body > .white-bg.table-card-body-white-bg,
.comm-list-table-card.white-bg.table-card-body-white-bg {
    padding: 0;
    box-sizing: border-box;
}

.comm-list-table-card .table-card-data-table,
.comm-list-table-card #messages-table.tablestyle {
    width: 100%;
}

.comm-list-table-card .table-card-data-table tr:first-child th,
.comm-list-table-card .table-card-data-table tr:first-child td,
.comm-list-table-card #messages-table.tablestyle tr:first-child th,
.comm-list-table-card #messages-table.tablestyle tr:first-child td {
    padding-top: 18px !important;
}

.comm-list-table-card .table-card-data-table tr:last-child td,
.comm-list-table-card #messages-table.tablestyle tr:last-child td {
    padding-bottom: 18px !important;
}

.comm-list-table-card .table-card-data-table th:first-child,
.comm-list-table-card .table-card-data-table td:first-child,
.comm-list-table-card #messages-table.tablestyle th:first-child,
.comm-list-table-card #messages-table.tablestyle td:first-child {
    padding-left: 28px !important;
}

.comm-list-table-card .table-card-data-table th:last-child,
.comm-list-table-card .table-card-data-table td:last-child,
.comm-list-table-card #messages-table.tablestyle th:last-child,
.comm-list-table-card #messages-table.tablestyle td:last-child {
    padding-right: 28px !important;
}

@media (max-width: 1024px) {
    .comm-list-table-card .table-card-data-table th:first-child,
    .comm-list-table-card .table-card-data-table td:first-child,
    .comm-list-table-card #messages-table.tablestyle th:first-child,
    .comm-list-table-card #messages-table.tablestyle td:first-child {
        padding-left: 14px !important;
    }

    .comm-list-table-card .table-card-data-table th:last-child,
    .comm-list-table-card .table-card-data-table td:last-child,
    .comm-list-table-card #messages-table.tablestyle th:last-child,
    .comm-list-table-card #messages-table.tablestyle td:last-child {
        padding-right: 14px !important;
    }
}

@media (max-width: 640px) {
    .comm-list-table-card .table-card-data-table th:first-child,
    .comm-list-table-card .table-card-data-table td:first-child,
    .comm-list-table-card #messages-table.tablestyle th:first-child,
    .comm-list-table-card #messages-table.tablestyle td:first-child {
        padding-left: 12px !important;
    }

    .comm-list-table-card .table-card-data-table th:last-child,
    .comm-list-table-card .table-card-data-table td:last-child,
    .comm-list-table-card #messages-table.tablestyle th:last-child,
    .comm-list-table-card #messages-table.tablestyle td:last-child {
        padding-right: 12px !important;
    }
}

/* Communications: sent-message status preview (top of Send Communication page) */
.comm-text-message-preview-box {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14), 0 10px 28px rgba(0, 0, 0, 0.2);
    padding: 16px 20px;
    color: #000;
    white-space: pre-wrap;
    word-break: break-word;
    max-width: 100%;
    box-sizing: border-box;
    text-align: left;
    font-size: 14px;
    line-height: 1.5;
}

/* Send Communication — lower Text Preview card (narrow device mockup, #FBFBFB canvas) */
#textmessagepreview .table-card-body {
    padding: 0;
}

#textmessagepreview .msg-text-preview-frame {
    padding: 0;
    margin: 0;
    background: transparent;
    box-shadow: none;
}

.msg-text-preview-canvas {
    background: #FBFBFB;
    padding: 15px 5px;
    box-sizing: border-box;
}

.msg-text-preview-device {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    background: #ffffff;
    border: none;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14), 0 10px 28px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    overflow: hidden;
}

.msg-text-preview-bubble {
    padding: 20px 10px;
    color: #000;
    white-space: pre-wrap;
    word-break: break-word;
    text-align: left;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
}

/* Send Communication — Email Preview card (wide draft-style inner card, #FBFBFB canvas) */
#emailpreview .table-card-body {
    padding: 0;
}

#emailpreview .msg-email-preview-frame {
    padding: 0;
    margin: 0;
    background: transparent;
    box-shadow: none;
}

.msg-email-preview-canvas {
    background: #FBFBFB;
    padding: 15px 20px;
    box-sizing: border-box;
}

.msg-email-preview-document {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    background: #ffffff;
    border: none;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
    overflow: hidden;
    padding: 24px 28px;
    color: #111827;
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
    word-break: break-word;
    overflow-wrap: break-word;
}

    .msg-email-preview-document table {
        max-width: 100%;
    }

    .msg-email-preview-document img {
        max-width: 100%;
        height: auto;
    }

    /* Standard-mode preview HTML often ships 16px body text — scale down inside the draft card */
    .msg-email-preview-document,
    .msg-email-preview-document p,
    .msg-email-preview-document li,
    .msg-email-preview-document td,
    .msg-email-preview-document th,
    .msg-email-preview-document div,
    .msg-email-preview-document span {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    /* Designer preview wrappers: hide outer gray canvas so only the inner card shows */
    .msg-email-preview-document > div[bgcolor="#999999"],
    .msg-email-preview-document > div[style*="background-color:#999999"],
    .msg-email-preview-document > div[style*="background-color: #999999"] {
        background-color: transparent !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
    }

.light {
    background-color: var(--Surface-4) !important;
}

.white-bg a {
    color: #222;
}

.white-bg ul {
    padding-left: 15px;
}

.white-bg li {
    list-style: disc;
}

.white-bg ul ul li {
    list-style: circle;
}

.dark-bg {
    background: var(--darkbackground);
    box-shadow: rgb(0 0 0 / 5%) 0px 15px 25px, rgb(0 0 0 / 5%) 0px 5px 10px;
    padding-bottom: 1px;
    margin-bottom: 10px;
    color: #fff;
}

.dashboard-scroll-tabel {
    max-height: 300px;
    overflow-y: scroll;
}

.shadow {
    border-radius: 10px;
    box-shadow: rgb(0 0 0 / 5%) 0px 15px 25px, rgb(0 0 0 / 5%) 0px 5px 10px;
}

.dropdown-item a {
    text-decoration: none !important;
    color: #333 !important;
}

.bottomborder {
    border-bottom: 2px solid #e5e7eb !important;
}


.bordersides {
    border-left: 1px solid #AAA;
    border-right: 1px solid #AAA;
}

.scroll-tabel {
    max-height: 300px;
    overflow-y: scroll;
}

.scroll-tabel1 {
    max-height: 500px;
    overflow-y: scroll;
}

@media screen and (max-width: 1366px) {
    .scroll-tabel table thead tr th, .scroll-tabel table tbody tr td {
        font-size: 12px;
        line-height: 14px
    }
}

/* Validation */
.error-message {
    color: var(--ErrorText);
    text-align: center;
    font-weight: bold;
    width: 100%;
    font-style: italic;
}

.success-message {
    color: var(--SuccessText);
    text-align: center;
    width: 100%;
    font-weight: bold;
}

.edit-currency .currency-sign {
    top: 8px;
}

/*.sidebar-dropdown {
    border-bottom: 1px solid #fff;
}

@media (min-width: 1199px) {
    .filters .filterbutton {
        position: relative;
        margin-right: 10px !important;
        top: 15px
    }
}

.dropdown-menu {
    /*    border: solid 1px var(--ButtonBackgroundColor);*/
}

@media screen and (max-width: 560px) {
    .input-form table tr {
        flex-direction: column;
    }

    .input-form input[type="date"] {
        max-width: 100%;
    }

    .input-form input[type=text] {
        max-width: 100%;
    }
}

@media screen and (max-width: 560px) {
    .user-form table tr {
        flex-direction: column;
    }

        .user-form table tr td {
            padding: 5px;
        }
}

.date-pickers {
    height: 37px;
    padding: 5px;
    position: relative;
    top: -7px;
    border-radius: 5px;
}

.cursorpointer {
    cursor: pointer;
}

.secondary-text {
    color: var(--secondarycolor) !important;
    font-weight: 600;
    margin-right: 8px !important;
}

.number {
    width: 85px !important;
}

.time {
    text-align: left;
}

.currency-sign {
    position: absolute;
    left: 10px;
    top: 10px;
}

.inline-currency-sign {
    position: absolute;
    left: 10px;
    top: -2px;
}

.datagrid-currency-sign {
    position: absolute;
    left: 8px;
    top: 5px;
}

.check-box-section .anchor {
    /*        padding: 5px;
        border: 1px solid #505050;
        border-radius: 5px;
        width: 100%;
        height: 35px;
        color: black;*/
}

.check-box-section span {
    align-items: center;
    display: flex;
    gap: 5px;
    padding-right: 5px;
}

.check-box-section.dropdown-check-list {
    position: relative;
    cursor: pointer;
}

.check-box-section..dropdown-check-list ul.itm {
    padding: 5px 5px 0px 5px;
    width: 100%;
}

.dropdown-check-list .anchor:after {
    position: absolute;
    content: "";
    border-left: 2px solid var(--BorderColor);
    border-top: 2px solid var(--BorderColor);
    padding: 3.9px;
    right: 10px;
    top: 35%;
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

/*.dropdown-check-list .anchor:active:after {
    right: 8px;
    top: 21%;
}

*/

.dropdown-check-list ul.itm {
    padding: 0;
    display: none;
    margin: 0;
    border: 1px solid var(--BorderColor);
    border-top: none;
    z-index: 99;
    position: absolute;
    top: 42px;
    background: #fff;
    padding: 5px;
    left: 0;
    right: 0;
    width: 100%;
}

    .dropdown-check-list ul.itm li {
        list-style: none;
    }

.dropdown-check-list.visible .itm {
    display: block;
    overflow-y: scroll;
    height: 100px;
}

.form-feild {
    margin-bottom: 35px;
    position: relative;
}

.check-box-section.visible .anchor {
    border-color: var(--Interactive-Default)
}

.height350 {
    height: 350px !important;
}

@media (max-width:500px) {
    .filters input {
        width: 300px !important;
    }

    .filters select {
        width: 300px !important;
    }
}

/* Link visuals */
.nav-item .nav-link {
    text-align: center;
    color: #888;
    font-size: 0.85rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: none;
    background-color: var(--InactiveTabBackground);
    color: var(--InactiveTabText);
    border-radius: 10px;
    margin-right: 15px !important;
}

    .nav-item .nav-link svg {
        margin-bottom: .25rem;
        fill: #888;
    }

    .nav-item .nav-link.active {
        background-color: var(--ActiveTabBackground) !important;
        color: var(--ActiveTabText) !important;
      
       
    }

    .nav-item .nav-link.inactive {
        color: #333;
        border-right: 1px solid var(--Divider);
        background-color: var(--InactiveTabBackground);
        color: var(--InActiveTabText);
        border-radius: 10px;
        margin-right: 15px !important;
    }

/* Tabs */
.tabbar {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    width: 250px;
    max-width: 100%;
    /*border-radius: 4px;
    background-color: var(--Surface-2);
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);*/ /* added */
    height: fit-content;
}

    .tabbar a {
        text-decoration: none !important;
    }

    .tabbar .inactivetab {
        color: var(--Heading) !important;
    }

    .tabbar a:hover {
        color: var(--LinkText, var(--Interactive-Default)) !important;
    }

.activetab {
    font-size: 14px;
    font-weight: 600;
    display: block;
    cursor: pointer;
    color: var(--ActiveTabText) !important;
    padding: 3px 9px;
    background-color: var(--ActiveTabBackground);
    border-radius: 0;
    border-bottom: solid 1px var(--Divider);
    margin-right: 2px;
    min-height: 64px;
    display: flex;
    align-items: center;
    /*border-right: 2px solid var(--Interactive-Default)*/
}

    .activetab a {
        text-decoration: none !important;
        color: var(--ActiveTabTextColor) !important;
    }

        .activetab a:hover {
            text-decoration: none !important;
            color: var(--ActiveTabTextColor) !important;
        }

.inactivetab {
    font-size: 14px;
    font-weight: 600;
    display: block;
    cursor: pointer;
    color: var(--Text);
    padding: 3px 9px;
    background-color: var(--Surface-4);
    border-radius: 0;
    border-bottom: solid 1px var(--Divider);
    margin-right: 2px;
    min-height: 64px;
    display: flex;
    align-items: center;
    border-right: 2px solid transparent;
}

    .inactivetab a {
        text-decoration: none !important;
        color: var(--InactiveTabTextColor) !important;
    }

        .inactivetab a:hover {
            text-decoration: none !important;
            color: var(--ActiveTabBackGroundColor) !important;
        }

/*Section Headers and Titles*/
.sectionheader {
    /*font-size: 17px;*/
    /*font-weight: bold;*/
    /*text-align: center;
    padding: 10px;*/
    text-transform: uppercase;
    color: var(--SectionHeaderTextColor);
    background-color: var(--Surface-3);
    /*   min-height: 61px;*/
    /*background: var(--BodyBackground);*/
    z-index: 10;
    /*border-bottom: solid 1px var(--Outline);*/
    font-weight: 600;
    text-align: left;
    font-size: 16px;
    line-height: 100%;
    color: var(--Heading);
    padding: 12px 10px;
    vertical-align: central;
}

    .sectionheader span {
        margin-top: 5px;
    }

    .sectionheader a {
        color: white !important;
    }

.sectiontitle {
    font-weight: 600;
    font-size: 20px;
    margin-top: 5px;
    margin-bottom: 5px;
    color: var(--SectionTitleColor);
}

hr {
    border-top: 1px solid white;
    margin-top: 10px;
    margin-bottom: 10px;
}

.logout {
    padding-top: 15px;
    text-align: center;
    color: var(--SideNavTextColor);
    font-size: 12px;
}

    .logout a {
        color: var(--SideNavTextColor);
        text-decoration: underline;
        font-size: 12px;
    }

.errormessage {
    padding-top: 10px;
    padding-bottom: 10px;
    color: lightcoral;
}

.validation {
    color: lightcoral;
}

/* Above table-card header (z-index 200) and sticky .table-toolbar (998); below Bootstrap .modal-backdrop (1040). */
.popup-background {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #606060;
    z-index: 1030;
    opacity: .5;
}

/* Event Time Slots page: the content column takes all the width beside the settings rail (the shell's own 1200px width is
   commented out app-wide, so nothing else limits it), because the list has several columns. */
.event-timeslots-stack {
    width: 100%;
}

.modal-popup-background {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #606060;
    z-index: 1100;
    opacity: .5;
}

/*
 * Grey overlay behind ANY open popup/modal, app-wide. Many flows call removeBackdrop()
 * (stripping .modal-backdrop) which left popups floating over a white page. Painting the
 * dim onto the open .modal element itself restores the overlay without touching the
 * fragile popup/Ajax JS, and works whether or not a .modal-backdrop is present.
 */
.modal.show,
.modal.in,
.modal[style*="display: block"],
.modal[style*="display:block"] {
    background-color: rgba(96, 96, 96, 0.5);
}

/*.Email-container {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.currency-sign {
    position: absolute;
    left: 7px;
    top: 5px;
}

.autocomplete-items {
    position: absolute;
    border: 1px solid #ddd;
    border-top: none;
    z-index: 99;
    background: white;
    max-height: 200px;
    overflow-y: auto;
    width: calc(100% - 2px);
}

.autocomplete-items div {
        padding: 10px;
        cursor: pointer;
        border-bottom: 1px solid #ddd;
    }

.autocomplete-items div:hover {
            background-color: #f1f1f1;
        }

/*Point Of Sale */

.store-item-content {
    text-align: center;
    background-color: #FFF;
}

    .store-item-content p {
        font-size: 14px;
    }

    .store-item-content .add-my-store-btn {
        display: block;
        margin: 10px auto 0;
    }

.content-center {
    display: flex;
    justify-content: center;
}

@media (min-width:800px) {

    .sticky-container {
        position: sticky;
        top: 0;
        z-index: 50;
    }
}

@media (max-width: 1399.98px) {
    .product-filters > .d-flex {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
    }

    .product-filters button {
        box-sizing: border-box;
        flex: 0 0 calc(50% - 6px); /* ensures 2 per row with spacing */
        margin-bottom: 10px;
    }
}

.pagetitle_new_order {
    font-weight: bold;
    font-size: 25px;
    padding-top: 8px;
    padding-bottom: 8px;
    text-align: left;
    text-align: center;
    color: var(--secondarycolor);
}

.store-page-section {
    background-color: #FAFAFA;
}

    .store-page-section .row {
        margin: 0;
    }

.page-sub-heading {
    color: var(--secondarycolor)
}

/*
    .store-card {
        height: 265px;
        margin-bottom: 20px;
        box-shadow: rgb(0 0 0 / 15%) 0px 2px 8px;
        width: 100%
    }

*/

/*.store-card-order {
        height: 100%;
        margin-bottom: 20px;
        box-shadow: rgb(0 0 0 / 15%) 0px 2px 8px;
        width: 100%
    }

.store-card-neworder {*/
/*min-height: 350px;*/
/*margin-bottom: 20px;
        box-shadow: rgb(0 0 0 / 15%) 0px 2px 8px;
        width: 100%;
        height: 225px;
        padding: 10px;
        background-color: #FFF;
    }

*/

.item-image {
    position: relative;
    padding-top: 60%;
}

.item-image-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
    text-align: center;
}

    .item-image-inner img {
        /*width: 100%;*/
        height: 120px;
        object-fit: cover;
        margin-left: auto;
        margin-right: auto;
    }

/* End - Point of Sale*/
.currency-sign {
    position: absolute;
    left: 7px;
    top: 5px;
}

*/

.scroll-tabel {
    min-height: 250px;
    max-height: calc(100vh - 250px); /* 200px = height of header + margins above table */
    overflow-y: auto;
}

.scroll-tabel1 {
    max-height: 500px;
    overflow-y: scroll;
}

@media screen and (max-width: 1366px) {
    .scroll-tabel table thead tr th, .scroll-tabel table tbody tr td {
        font-size: 12px;
        line-height: 14px
    }
}

/*margins and padding*/
.m-0 {
    margin: 0;
}

.mt-0 {
    margin-top: 0;
}

.mb-0 {
    margin-bottom: 0;
}

.mtb-0 {
    margin-bottom: 0;
    margin-top: 0;
}

.mr-0 {
    margin-right: 0;
}

.ml-0 {
    margin-left: 0;
}

.margintop-5 {
    margin-top: 10px;
}

.margin-5 {
    margin: 5px;
}

.marginbottom-5 {
    margin-bottom: 5px;
}

.marginright-5 {
    margin-right: 5px;
}

.mnarginleft-5 {
    margin-left: 5px;
}

.margintop-5 {
    margin-top: 5px;
}

.mb-10 {
    margin-bottom: 5px;
}

.m-10 {
    margin: 10px;
}

.mr-10 {
    margin-right: 10px;
}

.ml-10 {
    margin-left: 10px;
}

.mt-10 {
    margin-top: 10px;
}

.mb-10 {
    margin-bottom: 10px;
}

.m-15 {
    margin: 15px;
}

.mt-15 {
    margin-top: 15px;
}

.mb-15 {
    margin-bottom: 15px;
}

.mr-15 {
    margin-right: 15px;
}

.ml-15 {
    margin-left: 15px;
}

.m-20 {
    margin: 20px;
}

.mt-20 {
    margin-top: 20px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mr-20 {
    margin-right: 20px;
}

.ml-20 {
    margin-left: 20px;
}

.m-25 {
    margin: 25px;
}

.mt-25 {
    margin-top: 25px;
}

.mb-25 {
    margin-bottom: 25px;
}

.mr-25 {
    margin-right: 25px;
}

.ml-25 {
    margin-left: 25px;
}

.m-30 {
    margin: 30px;
}

.mt-30 {
    margin-top: 30px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mr-30 {
    margin-right: 30px;
}

.ml-30 {
    margin-left: 30px;
}

.mb-35 {
    margin-bottom: 35px;
}

.mb-40 {
    margin-bottom: 40px;
}

.p-0 {
    padding: 0;
}

.pt-0 {
    padding-top: 0;
}

.pb-0 {
    padding-bottom: 0;
}

.pr-0 {
    padding-right: 0;
}

.pl-0 {
    padding-left: 0;
}

.paddingtop-5 {
    padding-top: 10px;
}

.padding-5 {
    padding: 5px;
}

.paddingbottom-5 {
    padding-bottom: 5px;
}

.paddingrright-5 {
    padding-right: 5px;
}

.paddingleft-5 {
    padding-left: 5px;
}

.paddingttop-5 {
    padding-top: 5px;
}

.p-10 {
    padding: 10px;
}

.pr-10 {
    padding-right: 10px;
}

.pl-10 {
    padding-left: 10px;
}

.pt-10 {
    padding-top: 10px;
}

.pb-10 {
    padding-bottom: 10px;
}

.p-15 {
    padding: 15px;
}

.pt-15 {
    padding-top: 15px;
}

.pb-15 {
    padding-bottom: 15px;
}

.pr-15 {
    padding-right: 15px;
}

.pl-15 {
    padding-left: 15px;
}

.p-20 {
    padding: 20px;
}

.pt-20 {
    padding-top: 20px;
}

.pb-20 {
    padding-bottom: 20px;
}

.pr-20 {
    padding-right: 20px;
}

.pl-20 {
    padding-left: 20px;
}

.p-25 {
    padding: 25px;
}

.pt-25 {
    padding-top: 25px;
}

.pb-25 {
    padding-bottom: 25px;
}

.pr-25 {
    padding-right: 25px;
}

.pl-25 {
    padding-left: 25px;
}

.p-30 {
    padding: 30px;
}

.pt-30 {
    padding-top: 30px;
}

.pb-30 {
    padding-bottom: 30px;
}

.pr-30 {
    padding-right: 30px;
}

.pl-30 {
    padding-left: 30px;
}

/*Payment*/
.paymentform {
    display: flex;
    justify-content: center;
    width: 100%;
    align-items: center;
}

.paymentbackground {
    background-image: url("../../images/CCPaymentBackGround.png");
    padding: 10px;
    background-repeat: no-repeat;
    background-size: cover;
    width: 300px;
    height: 510px;
    padding-left: 30px;
    padding-bottom: 120px;
    padding-top: 50px;
}

.achpaymentbackground {
    background-image: url("../../images/ACHPaymentBackGround.png");
    padding: 10px;
    background-repeat: no-repeat;
    background-size: cover;
    width: 350px;
    height: 510px;
    padding-left: 75px;
    padding-bottom: 120px;
    padding-top: 50px;
}

.ccpaymentform {
    display: flex;
    justify-content: center;
    width: 100%;
    align-items: center;
}

.ccpaymentbackground {
    background-image: url("../../images/CCPaymentBackGround.png");
    padding: 10px;
    background-repeat: no-repeat;
    background-size: cover;
    width: 350px;
    padding-left: 75px;
    padding-bottom: 120px;
    padding-top: 40px;
}

@media (max-width:600px) {
    .form-600 .signature {
        width: 320px;
        z-index: 10000;
        position: absolute;
        left: calc(100%/2 - 160px);
        top: -400px;
    }
}

@media (min-width:800px) {
    .form-800 .signature {
        width: 320px;
        z-index: 10000;
        position: absolute;
        left: 225px;
        top: -400px;
    }
}

@media (max-width:800px) {
    .form-800 .signature {
        width: 320px;
        z-index: 10000;
        position: absolute;
        left: calc(100%/2 - 160px);
        top: -400px;
    }
}

@media (min-width:1000px) {
    .form-1000 .signature {
        width: 320px;
        z-index: 10000;
        position: absolute;
        left: 325px;
        top: -400px;
    }
}

@media (max-width:1000px) {
    .form-1000 .signature {
        width: 320px;
        z-index: 10000;
        position: absolute;
        left: calc(100%/2 - 160px);
        top: -400px;
    }
}

@media (min-width:1200px) {
    .form-1200 .signature {
        width: 320px;
        z-index: 10000;
        position: absolute;
        left: 425px;
        top: -400px;
    }
}

@media (max-width:1200px) {
    .form-1200 .signature {
        width: 320px;
        z-index: 10000;
        position: absolute;
        left: calc(100%/2 - 160px);
        top: -400px;
    }
}

@media (min-width:1400px) {
    .form-1400 .signature {
        width: 320px;
        z-index: 10000;
        position: absolute;
        left: 525px;
        top: -400px;
    }
}

@media (max-width:1400px) {
    .form-1400 .signature {
        width: 320px;
        z-index: 10000;
        position: absolute;
        left: calc(100%/2 - 160px);
        top: -400px;
    }
}

.signature-pad {
    margin: auto;
}

.signature-pad--body {
    min-height: 250px;
}

.signature-pad--actions {
    overflow: hidden;
}

    .signature-pad--actions > div:first-child {
        float: left;
    }

    .signature-pad--actions > div:last-child {
        float: right;
    }

*,
*::before,
*::after {
    box-sizing: border-box;
}

.signaturetabbar {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
}

.activesignaturetab {
    font-size: 14px;
    font-weight: bold;
    color: var(--ActiveTabTextColor) !important;
    display: inline-block;
    cursor: pointer;
    padding-top: 8px;
    padding-bottom: 8px;
    background: var(--ActiveTabBackGroundColor);
    border: solid 1px #666;
    width: calc((100%)/2);
}

.inactivesignaturetab {
    font-size: 14px;
    font-weight: bold;
    color: var(--InactiveTabTextColor);
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
    padding-top: 8px;
    padding-bottom: 8px;
    background: var(--InactiveTabBackGroundColor);
    border: solid 1px #666;
    width: calc((100%)/2);
}

.signaturebody {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    width: 300px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin: 0;
    padding: 5px 5px;
    background-color: #b3b3b3;
    font-family: Helvetica, Sans-Serif;
}

.signature-pad {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    font-size: 10px;
    width: 100%;
    height: 100%;
    border: 1px solid #e8e8e8;
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.08) inset;
    border-radius: 4px;
    padding: 0px;
}

    .signature-pad::before,
    .signature-pad::after {
        position: absolute;
        z-index: -1;
        content: "";
        width: 40%;
        height: 0px;
        bottom: 0px;
        background: transparent;
        box-shadow: 0 8px 12px rgb(0, 0, 0);
    }

    .signature-pad::before {
        left: 0px;
        -webkit-transform: skew(-3deg) rotate(-3deg);
        transform: skew(-3deg) rotate(-3deg);
    }

    .signature-pad::after {
        right: 0px;
        -webkit-transform: skew(3deg) rotate(3deg);
        transform: skew(3deg) rotate(3deg);
    }

.signature-pad--body {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    border: 1px solid #f4f4f4;
}

    .signature-pad--body
    canvas {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 250px;
        border-radius: 4px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset;
    }

.signature-pad--footer {
    color: #C3C3C3;
    text-align: center;
    font-size: 1.2em;
    margin-top: 8px;
}

.signature-pad--actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 8px;
}

/* Workflow Status */
.appointmentstatus-color-indicator {
    display: inline-block;
    width: 10px;
    height: 20px;
}

.quote-type-color-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.workflowtabs {
    display: flex;
    align-items: center;
    justify-content: center;
}

    .workflowtabs .circle {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        cursor: pointer;
    }

        .workflowtabs .circle img {
            width: 70px;
            height: 70px;
        }

    .workflowtabs .line {
        height: 6px;
        width: 160px;
        background-color: #1e4e79;
        display: flex;
        justify-content: center;
    }

.smallcircle {
    height: 15px;
    width: 15px;
    border-radius: 50%;
    border: 2px solid black;
    background-color: white;
    margin-top: -3px;
}

.quotesteps {
    display: flex;
    align-items: center;
    justify-content: center;
}

    .quotesteps .circle {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        cursor: pointer;
    }

    .quotesteps .completedcircle {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        cursor: pointer;
        background-color: green;
    }

    .quotesteps .circle img {
        width: 70px;
        height: 70px;
    }

    .quotesteps .line {
        height: 6px;
        width: 50px;
        background-color: #1e4e79;
        display: flex;
        justify-content: center;
    }

.quote-step-font {
    font-size: 17px;
    font-weight: bold;
    text-align: center;
    padding: 5px;
    color: white;
}

.scrollable-Job {
    height: 630px;
    overflow-y: auto;
}

.customer-name b:hover {
    color: #000000;
    font-weight: 900;
    cursor: pointer;
}

@media (max-width: 768px) {
    .quotesteps .circle,
    .quotesteps .completedcircle {
        width: 50px;
        height: 50px;
    }

    .quotesteps .selectedcircle {
        width: 64px;
        height: 64px;
    }

    .quotesteps .line {
        height: 6px;
        width: 40px;
        background-color: #1e4e79;
        display: flex;
        justify-content: center;
    }

    .quotesteps .label {
        font-size: 10px;
        bottom: -35px;
    }

    .salesinfo img {
        max-width: 300px !important;
    }

    .salesinfo table tr td {
        max-width: 350px !important;
    }

    .salesinfo iframe {
        width: 350px !important;
    }
}

@media (max-width: 480px) {
    .calendar-day-header, .calendar-slot-cell {
        min-width: 100px;
    }

    .time-column {
        min-width: 45px;
    }
}

.salesinfo h2 {
    font-size: 30px !important;
}

/* Invoice Print */
.quote-wrapper {
    margin: 50px auto 0;
    border: 1px solid #5a5b5b;
    padding: 0 15px;
}

    .quote-wrapper p {
        font-size: 14px;
    }

.quote-header {
    font-size: 40px;
    padding: 20px;
    border-bottom: 4px solid #5a5b5b;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.quote-info {
    padding: 15px 0;
    border-bottom: 4px solid #5a5b5b;
}

    .quote-info p, .quote-info h6 {
        margin-bottom: 3px;
    }

.quote-detail {
    background-color: #a5a5a5;
    color: #ffffff;
    padding: 10px;
    border: 3px solid #505252;
    margin-bottom: 10px;
}

    .quote-detail h6 {
        margin-bottom: 0;
    }

    .quote-detail > div {
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;
    }

.quote-total {
    margin-bottom: 10px;
}

.Quote-Pricing {
    padding: 15px 0;
    border-bottom: 4px solid #5a5b5b;
}

.quote-calc > div {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
}

    .quote-calc > div h6, .quote-calc > div p {
        margin-bottom: 0;
    }

    .quote-calc > div h6 {
        width: 80px;
        text-align: right;
    }

.quote-calc {
    padding-bottom: 10px;
    border-bottom: 3px solid #5a5b5b;
    padding-right: 15px;
}

.req-dep {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    padding-right: 15px;
}

    .req-dep h6, .req-dep p {
        margin-bottom: 0;
    }

.cus-sig {
    display: flex;
    width: 100%;
    align-items: flex-end;
    justify-content: space-between;
}

    .cus-sig p {
        margin-bottom: 0;
        line-height: 1;
    }

    .cus-sig span {
        background: #5a5b5b;
        height: 3px;
        width: calc(100% - 131px);
    }

.cont-info h6, .cont-info p {
    margin-bottom: 2px;
}

.quote-footer {
    padding: 15px 0;
}

.quote-fnotes {
    height: 100%;
    display: flex;
    align-items: center;
}

    .quote-fnotes p {
        margin-bottom: 0;
    }

.cont-info {
    border-left: 2px solid #5a5b5b;
    padding-left: 25px;
}

@media screen and (max-width: 800px) {
    .quote-wrapper {
        margin: 10px;
    }
}

@media screen and (max-width: 600px) {
    .quote-wrapper {
        padding: 0 10px;
    }

        .quote-wrapper h6 {
            font-size: 14px;
        }

        .quote-wrapper p {
            font-size: 12px;
        }

    .quote-table tr td {
        font-size: 13px;
        padding: 3px 5px;
    }

    .quote-wrapper .col-5, .quote-wrapper .col-6, .quote-wrapper .col-7 {
        padding: 0 10px;
    }

    .quote-info .row, .Quote-Pricing .row, .quote-footer .row {
        margin: 0 -10px;
    }

    .quote-detail {
        padding: 5px;
    }
}

.DivCenter {
    display: flex;
    justify-content: center !important;
}

.sch-bg {
    background-color: #3facf433 !important;
    color: white;
    text-align: center;
    vertical-align: middle;
    border-right: 1px solid #fff;
}

.quote-type-color-indicator {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.appointment-slot-bg-gray {
    background-color: #606060;
    overflow: hidden;
}

.appointment-slot-bg-white {
    background-color: #f0fcff !important;
    overflow: hidden;
}

.scrollable-Sec {
    height: 650px;
    overflow-y: auto;
}

.appointment-slot-bg-blue {
    background-color: #cae7fb !important;
    overflow: hidden;
}

.greyDiv {
    background-color: lightgray !important;
}

.cont {
    display: flex;
    justify-content: flex-end;
}

.overflowscroll {
    overflow: scroll;
}

.bmpui-ui-watermark {
    display: none;
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .calendarWidth {
        width: 1024px;
    }
}

@media (min-width: 912px) and (max-width: 1023px) {
    .calendarWidth {
        width: 912px;
    }
}

@media (min-width: 853px) and (max-width: 374px) {
    .calendarWidth {
        width: 853px;
    }
}

@media (min-width: 820px) and (max-width: 852px) {
    .calendarWidth {
        width: 820px;
    }
}

@media (min-width: 768px) and (max-width: 819px) {
    .calendarWidth {
        width: 768px;
    }
}

@media (min-width: 540px) and (max-width: 767px) {
    .calendarWidth {
        width: 540px;
    }
}

@media (min-width: 430px) and (max-width: 539px) {
    .calendarWidth {
        width: 430px;
    }
}

@media (min-width: 414px) and (max-width: 429px) {
    .calendarWidth {
        width: 414px;
    }
}

@media (min-width: 412px) and (max-width: 413px) {
    .calendarWidth {
        width: 412px;
    }
}

@media (min-width: 390px) and (max-width: 411px) {
    .calendarWidth {
        width: 390px;
    }
}

@media (min-width: 375px) and (max-width: 389px) {
    .calendarWidth {
        width: 375px;
    }
}

@media (min-width: 360px) and (max-width: 374px) {
    .calendarWidth {
        width: 360px;
    }
}

@media (min-width: 344px) and (max-width: 359px) {
    .calendarWidth {
        width: 344px;
    }
}

/* Check-In Page Styles */
.student-list-profile-img {
    width: 120px;
    height: 120px;
}

    .student-list-profile-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top;
    }

.keyboardstyle {
    cursor: pointer;
    font-size: 40px;
}

.dropdown-check-list .itm {
    height: auto !important;
}

/*New chgnes css start*/

.wrapper .sidebar ul li a .arrow-func {
    display: none;
}

.main-listing {
    padding: 12px 8px;
}

/*.wrapper .sidebar .logout {
    display: none;
}

*/

.wrapper .sidebar {
    overflow-x: hidden !important;
}

    .wrapper .sidebar ul li a span.icon .svg-icon {
        flex: 0 0 auto;
        width: 16px;
        margin-right: 8px;
    }

        .wrapper .sidebar ul li a span.icon .svg-icon svg {
            display: block;
        }

.search-area {
    position: relative;
}

@import url('https://fonts.cdnfonts.com/css/switzer');

body {
    font-family: 'Switzer', sans-serif !important;
}

/*@font-face {
  font-family: 'Switzer';
  src: url('../../font/font/Switzer-Black.eot');
  src: url('../../font/font/Switzer-Black.eot?#iefix') format('embedded-opentype'), 
      url('../../font/font/Switzer-Black.woff2') format('woff2'), 
      url('../../font/font/Switzer-Black.woff') format('woff'), 
      url('../../font/font/Switzer-Black.ttf') format('truetype'),
      url('../../font/font/Switzer-Black.svg#Switzer-Black') format('svg');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Switzer';
  src: url('../../font/font/Switzer-Black.eot');
  src: url('../../font/font/Switzer-Black.eot?#iefix') format('embedded-opentype'),
      url('../../font/font/Switzer-Black.woff2') format('woff2'), 
      url('../../font/font/Switzer-Black.woff') format('woff'), 
      url('../../font/font/Switzer-Black.ttf') format('truetype'), 
      url('../../font/font/Switzer-Black.svg#Switzer-Black') format('svg');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

*/


.tab {
    display: none;
}

.tab-active {
    display: block;
}

.tabs-top-dashboard-sec ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.tabs-top-dashboard-sec {
    padding: 12px 32px;
    background: #F0F0F0;
}

    .tabs-top-dashboard-sec .tabs-header-dashboard .tab-menu {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .tabs-top-dashboard-sec .tabs-header-dashboard {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
    }

    .tabs-top-dashboard-sec .tab-menu ul {
        display: flex;
        align-items: center;
        background: #E8E8E8;
        border-radius: 4px;
        padding: 4px;
    }

        .tabs-top-dashboard-sec .tab-menu ul li a {
            padding: 7px 16px;
            font-weight: 600;
            font-size: 14px;
            line-height: 100%;
            letter-spacing: 0px;
            text-transform: uppercase;
            text-decoration: none;
            color: #707271;
            display: block;
            border-radius: 4px;
            vertical-align: bottom;
        }

            .tabs-top-dashboard-sec .tab-menu ul li a.active-a {
                background: #fff;
                color: #1B1E1D;
            }

    .tabs-top-dashboard-sec .tab-menu .dropdown-box-header {
        display: block;
        background: #E8E8E8;
        border-radius: 4px;
        padding: 7px 4px;
    }

    .tabs-top-dashboard-sec .right-dashboard-box ul {
        display: flex;
        align-items: center;
        background: #E8E8E8;
        border-radius: 4px;
        padding: 4px;
    }

        .tabs-top-dashboard-sec .right-dashboard-box ul li a {
            padding: 7px 8px;
            font-weight: 600;
            font-size: 14px;
            line-height: 100%;
            letter-spacing: 0px;
            text-transform: uppercase;
            text-decoration: none;
            color: #707271;
            display: block;
            border-radius: 4px;
            vertical-align: bottom;
        }

            .tabs-top-dashboard-sec .right-dashboard-box ul li a svg {
                display: block;
            }

            .tabs-top-dashboard-sec .right-dashboard-box ul li a.active {
                background: #fff;
                color: #1B1E1D;
            }

.tabs-details-sec {
    margin: 12px 0;
}

    .tabs-details-sec .tabs-details-box {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }

        .tabs-details-sec .tabs-details-box .tabs-card {
            background: #fff;
            width: calc(25% - 9px);
            border-radius: 4px;
        }

            .tabs-details-sec .tabs-details-box .tabs-card .card-space {
                padding: 16px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 10px;
            }

                .tabs-details-sec .tabs-details-box .tabs-card .card-space .subHeading {
                    font-weight: 600;
                    font-size: 12px;
                    line-height: 100%;
                    letter-spacing: 0;
                    vertical-align: bottom;
                    text-transform: uppercase;
                    color: #707271;
                }

                .tabs-details-sec .tabs-details-box .tabs-card .card-space h2 {
                    font-weight: 500;
                    font-size: 32px;
                    line-height: 100%;
                    letter-spacing: -0.4px;
                    vertical-align: bottom;
                    margin: 0;
                    color: #1B1E1D;
                }

                .tabs-details-sec .tabs-details-box .tabs-card .card-space .year-update {
                    font-weight: 600;
                    font-size: 14px;
                    line-height: 20px;
                    letter-spacing: 0px;
                    vertical-align: bottom;
                    color: #4CB367;
                    display: flex;
                    align-items: center;
                    gap: 3px;
                }

                .tabs-details-sec .tabs-details-box .tabs-card .card-space p {
                    margin: 0;
                    font-weight: 400;
                    font-size: 12px;
                    line-height: 16px;
                    letter-spacing: 0px;
                    text-align: right;
                    vertical-align: bottom;
                }

.inner-filter-box .filter-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid #F0F0F0;
}

    .inner-filter-box .filter-head h2 {
        margin: 0;
        font-weight: 600;
        font-size: 16px;
        line-height: 100%;
        letter-spacing: 0px;
        vertical-align: bottom;
        text-transform: uppercase;
        color: #1B1E1D;
    }

.inner-filter-box .filter-foot ul {
    background: transparent;
    padding: 0;
    margin: 0;
    justify-content: end;
    gap: 8px;
    border-top: 1px solid #F0F0F0;
    padding-top: 12px;
}

.inner-filter-box .filter-body {
    padding: 12px 0;
}

    .inner-filter-box .filter-body .from-group {
        margin-bottom: 12px;
    }

    .inner-filter-box .filter-body .two-box-group {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .inner-filter-box .filter-body .from-btn .more-btn {
        display: flex;
        align-items: center;
        font-weight: 600;
        font-size: 14px;
        line-height: 100%;
        letter-spacing: 0px;
        vertical-align: bottom;
        text-transform: uppercase;
        background: #f6f6f6;
        color: #000;
        padding: 10px 12px;
        width: max-content;
        gap: 10px;
        text-decoration: none;
    }

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

    .tabs-top-dashboard-sec {
        padding: 12px;
    }

        .tabs-top-dashboard-sec .tab-menu ul li a {
            padding: 7px 8px;
            font-size: 13px;
        }

        .tabs-top-dashboard-sec .tab-menu .dropdown-box-header {
            padding: 6px 4px 7px;
        }

    .tabs-details-sec .tabs-details-box .tabs-card {
        width: calc(50% - 9px);
    }

        .tabs-details-sec .tabs-details-box .tabs-card .card-space {
            padding: 12px;
        }

            .tabs-details-sec .tabs-details-box .tabs-card .card-space .subHeading {
                font-size: 10px;
            }

            .tabs-details-sec .tabs-details-box .tabs-card .card-space h2 {
                font-size: 22px;
                line-height: 125%;
            }

    .select-dropdown__list {
        margin: 10px auto 0;
        left: -160px;
        right: 0;
        min-width: 300px;
    }
}

/* New css updated */
/*New chgnes css start*/

.wrapper .sidebar ul li a .arrow-func {
    /*  display: none;*/
}

.main-listing {
    padding: 12px 8px;
}

.wrapper .sidebar .logout {
    /* display: none;*/
}

.wrapper .sidebar {
    overflow-x: hidden !important;
}

    .wrapper .sidebar ul li a span.icon .svg-icon {
        flex: 0 0 auto;
        width: 16px;
        margin-right: 8px;
    }

        .wrapper .sidebar ul li a span.icon .svg-icon svg {
            display: block;
        }

body {
    font-family: 'Switzer' !important;
}

@font-face {
    font-family: 'Switzer';
    src: url('../fonts/switzer/Switzer-Black.eot');
    src: url('../fonts/switzer/Switzer-Black.eot?#iefix') format('embedded-opentype'), url('../fonts/switzer/Switzer-Black.woff2') format('woff2'), url('../fonts/switzer/Switzer-Black.woff') format('woff'), url('../fonts/switzer/Switzer-Black.ttf') format('truetype'), url('../fonts/switzer/Switzer-Black.svg#Switzer-Black') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Switzer';
    src: url('../fonts/switzer/Switzer-Semibold.eot');
    src: url('../fonts/switzer/Switzer-Semibold.eot?#iefix') format('embedded-opentype'), url('../fonts/switzer/Switzer-Semibold.woff2') format('woff2'), url('../fonts/switzer/Switzer-Semibold.woff') format('woff'), url('../fonts/switzer/Switzer-Semibold.ttf') format('truetype'), url('../fonts/switzer/Switzer-Semibold.svg#Switzer-Semibold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Switzer';
    src: url('../fonts/switzer/Switzer-Regular.eot');
    src: url('../fonts/switzer/Switzer-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/switzer/Switzer-Regular.woff2') format('woff2'), url('../fonts/switzer/Switzer-Regular.woff') format('woff'), url('../fonts/switzer/Switzer-Regular.ttf') format('truetype'), url('../fonts/switzer/Switzer-Regular.svg#Switzer-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Switzer';
    src: url('../fonts/switzer/Switzer-Medium.eot');
    src: url('../fonts/switzer/Switzer-Medium.eot?#iefix') format('embedded-opentype'), url('../fonts/switzer/Switzer-Medium.woff2') format('woff2'), url('../fonts/switzer/Switzer-Medium.woff') format('woff'), url('../fonts/switzer/Switzer-Medium.ttf') format('truetype'), url('../fonts/switzer/Switzer-Medium.svg#Switzer-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Switzer';
    src: url('../fonts/switzer/Switzer-Bold.eot');
    src: url('../fonts/switzer/Switzer-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/switzer/Switzer-Bold.woff2') format('woff2'), url('../fonts/switzer/Switzer-Bold.woff') format('woff'), url('../fonts/switzer/Switzer-Bold.ttf') format('truetype'), url('../fonts/switzer/Switzer-Bold.svg#Switzer-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Switzer';
    src: url('../fonts/switzer/Switzer-Light.eot');
    src: url('../fonts/switzer/Switzer-Light.eot?#iefix') format('embedded-opentype'), url('../fonts/switzer/Switzer-Light.woff2') format('woff2'), url('../fonts/switzer/Switzer-Light.woff') format('woff'), url('../fonts/switzer/Switzer-Light.ttf') format('truetype'), url('../fonts/switzer/Switzer-Light.svg#Switzer-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

.nav-view-toggle {
    background-color: var(--Surface-1);
    padding: 4px;
    border-radius: 4px;
}

    .nav-view-toggle li .nav-link {
        width: 32px;
        height: 28px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        background-color: transparent;
    }

        .nav-view-toggle li .nav-link.active {
            background-color: var(--buttonsecondary);
        }

.stat-card {
    background: var(--Surface-4);
    padding: 16px;
    border-radius: 4px;
    display: block;
    height: 100%;
    text-decoration: none !important;
    outline: none;
}

    .stat-card .value {
        font-weight: 500;
        font-size: 32px;
        line-height: 100%;
        color: var(--Heading);
    }

    .stat-card .change {
        display: flex;
        align-items: center;
        justify-content: end;
        gap: 4px;
    }

        .stat-card .change .txt {
            font-weight: 600;
            font-size: 14px;
            line-height: 20px;
        }

        .stat-card .change .text-green {
            color: var(--InteractiveGreen1);
        }

    .stat-card .note {
        font-weight: 400;
        font-size: 12px;
        line-height: 16px;
        letter-spacing: 0px;
        text-align: right;
        color: var(--Text);
    }

.filter-card-form {
    width: 600px;
    box-shadow: 0px 8px 24px 0px #3330301A;
    border-radius: 4px;
    padding: 0;
    border: 0;
    background-color: var(--Surface-4);
    /*    transform: none !important;
    top: 100% !important;*/
}

    .filter-card-form .form-filter-head {
        display: flex;
        align-items: center;
        padding: 12px 20px;
        border-bottom: 1px solid var(--Outline);
    }

        .filter-card-form .form-filter-head .filter-ttl {
            font-weight: 600;
            font-size: 16px;
            line-height: 100%;
            color: var(--Heading);
            margin: 0;
        }

.filter-close {
    flex: 0 0 auto;
    width: 16px;
    margin-left: auto;
    cursor: pointer;
}

    .filter-close svg {
        display: block;
    }

.form-filter-body {
    padding: 16px;
}

*/

.mb-12 {
    margin-bottom: 12px;
}

.form-filter-footer {
    border-top: 1px solid var(--Divider);
    padding: 12px 16px;
}

.gap-8 {
    gap: 8px;
}

.stats-grid .row {
    margin: 0px -6px;
}

.stats-grid [class*='col-'] {
    padding: 0px 6px;
}

.bar.bar-3 {
    margin-bottom: 0;
}

.bar.bar-1 {
    margin-top: 0;
}

.form-filter-body .row {
    margin: 0px -6px 12px -6px;
}

    .form-filter-body .row [class*='col'] {
        padding: 0px 12px;
    }

.headings {
    color: var(--Heading);
}

.text {
    color: var(--Text);
}

.interactive-Orange-1 {
    color: var(--interactive-Orange-1);
}

.icon-default {
    color: var(--IconDefault);
}

.badges-box {
    font-weight: 600;
    font-size: 12px;
    line-height: 100%;
    border: 1px solid;
    border-radius: 16px;
    padding: 4px 8px;
    display: inline-block;
}

.form-check-container {
    margin-bottom: 0px;
    position: relative;
    width: 14px;
    height: 14px;
}

    .form-check-container .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 14px;
        width: 14px;
        border: 1px solid var(--Outline);
        border-radius: 2px;
        cursor: pointer;
    }

        .form-check-container .checkmark:after {
            left: 4px;
            top: 1px;
            width: 5px;
            height: 8px;
            content: "";
            position: absolute;
            display: none;
            border: solid #fff;
            border-width: 0 2px 2px 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        }

.custom-dropdown {
    margin-left: auto;
}

.main-wrapper .white-bg {
    box-shadow: none;
}

.rounded-4 {
    border-radius: 4px;
}

.tabbar .activetab, .tabbar .inactivetab {
    display: flex;
}

    .tabbar .activetab .flex-grow-1, .tabbar .inactivetab .flex-grow-1 {
        display: flex;
        flex-direction: column;
    }

        .tabbar .activetab .flex-grow-1 span, .tabbar .inactivetab .flex-grow-1 span {
            font-size: 14px;
            font-weight: 400;
            color: var(--Text);
        }

.tabbar .icon {
    width: 36px;
    height: 36px;
    background-color: var(--Surface-3);
    border: 1px solid var(--Divider);
    display: flex;
    align-items: center;
    margin-right: 12px;
    border-radius: 4px;
    justify-content: center;
}

.tabbar .icon-arrow {
    flex: 0 0 auto;
    width: 16px;
    margin-left: auto;
    opacity: 0;
}

.tabbar .activetab .icon {
    box-shadow: var(--ShadowPrimitivesxs);
    border-color: var(--Interactive-Hover)
}

.tabbar .activetab .flex-grow-1 {
    /*color: var(--Heading)*/
}

.tabbar .activetab .icon-arrow {
    opacity: 21;
}

.tabbar .inactivetab .inactivetab {
    padding: 0;
    margin: 0;
    min-height: inherit;
    border: 0;
    flex: 1;
}

.back-btn {
    flex: 0 0 auto;
    width: 20px;
    margin-right: 20px;
    outline: none;
    border: 0;
    background-color: transparent;
    color: var(--PageTitleTextColor, #989998);
}

    .back-btn svg {
        display: block;
        color: inherit;
    }

    .back-btn svg path[stroke] {
        stroke: currentColor;
    }

/*Profile page css end*/



.list-menu-top li a {
    font-weight: 600;
    font-size: 14px;
    line-height: 100%;
    text-transform: uppercase;
    display: block;
    padding: 0px 12px;
    text-decoration: none;
    color: var(--Text);
    position: relative;
}

    .list-menu-top li a:before {
        position: absolute;
        content: "";
        left: 0;
        right: 0;
        bottom: -25px;
        height: 2px;
        width: 100%;
        opacity: 0;
        background: var(--Interactive-Default);
    }

    .list-menu-top li a.active {
        color: var(--LinkText, var(--Interactive-Default));
    }

        .list-menu-top li a.active:before {
            opacity: 1;
        }

.list-menu-top {
    margin-left: 40px;
}

.card-profile {
    border-bottom: 1px solid var(--Surface-1);
    padding-bottom: 18px;
}

.profile-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-right: 28px;
}

    .profile-info .avatar {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: #ccc;
    }

    .profile-info .profile-details h3 {
        font-weight: 500;
        font-size: 20px;
        line-height: 32px;
        color: var(--Heading);
        margin-bottom: 0px;
    }

    .profile-info .profile-details p {
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        color: var(--Text);
        margin-bottom: 0px;
    }

.edit-profile {
    flex: 0 0 auto;
    width: 16px;
}

.row.stats {
    flex: 1;
}

    .row.stats p {
        font-weight: 600;
        font-size: 12px;
        line-height: 100%;
        margin-bottom: 4px;
        color: var(--Text);
        text-transform: uppercase;
    }

    .row.stats span {
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        color: var(--Heading);
        gap: 8px;
    }

        .row.stats span span {
            font-weight: 600;
        }

.image-uniform {
    width: 20px;
    height: 20px;
    display: inline-block;
    background: darkgrey;
    border-radius: 3px;
}

.row.stats .bedge-box {
    padding: 0px 8px;
    border: 1px solid;
    border-radius: 20px;
    font-size: 12px;
    text-transform: uppercase;
}

.bedge-green {
    color: var(--InteractiveGreen1) !important;
}

.tabbar-mobile {
    overflow: auto;
    border-top: 1px solid var(--Surface-1);
    border-bottom: 1px solid var(--Surface-1);
    padding: 8px 0px;
    margin: 12px 0px;
}

.tabbar-mobile-menu {
    display: flex;
    align-items: center;
}

    .tabbar-mobile-menu li .icon {
        flex: 0 0 auto;
        width: 16px;
    }

    .tabbar-mobile-menu li a {
        display: flex;
        align-items: center;
        padding: 8px 12px;
        border-radius: 4px;
        gap: 12px;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        white-space: nowrap;
        color: var(--Text);
    }

        .tabbar-mobile-menu li a.active {
            background-color: var(--buttonsecondary);
        }

    .tabbar-mobile-menu li .icon svg {
        display: block;
    }

.modal.modal-sidebar-profile .modal-header {
    border-bottom-color: var(--Surface-1);
}

.modal.modal-sidebar-profile .modal-dialog {
    position: fixed;
    top: 20px;
    right: 20px;
    margin: 0;
    max-width: 438px;
    width: 438px;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
}

.modal.modal-sidebar-profile .modal-title {
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0px;
    vertical-align: bottom;
    text-transform: uppercase;
}

.modal.modal-sidebar-profile .modal-header {
    padding: 12px 20px;
}

    .modal.modal-sidebar-profile .modal-header .close {
        padding: 0;
        margin: 0;
    }

        .modal.modal-sidebar-profile .modal-header .close svg {
            display: block;
        }

.modal.modal-sidebar-profile.show .modal-dialog {
    transform: translateX(0);
}

.modal.modal-sidebar-profile .modal-content {
    overflow-x: hidden;
    overflow-y: auto;
    height: calc(100vh - 40px);
    border-radius: 8px !important;
    box-shadow: none;
    border: none;
    background-color: var(--Surface-2);
}

.modal.modal-sidebar-profile .modal-footer {
    padding: 12px 16px;
    border-top-color: var(--Surface-1);
    background-color: var(--BodyBackground);
}

.modal.modal-sidebar-profile .modal-body {
    padding: 20px;
    overflow: auto;
}

.modal-content .sectionheader {
    border-radius: 8px !important;
}
.userImg {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    display: block;
    border-radius: 50%;
    background: #ccc;
}

    .userImg img {
        width: 48px;
        height: 48px;
        display: block;
        border-radius: 50%;
        background: #ccc;
    }

.modal.modal-sidebar-profile .modal-footer {
    padding: 12px 16px;
    border-top-color: var(--Surface-1);
    background-color: var(--BodyBackground);
}

.modal.modal-sidebar-profile .nav-item {
    flex: 1;
}

    .modal.modal-sidebar-profile .nav-item .nav-link {
        display: block;
        text-align: center;
    }

.list-checkbox-modal [class*='col-'] {
    padding: 0px 15px;
    margin-bottom: 20px;
}

.list-checkbox-modal .form-check-container {
    width: auto;
    padding-left: 20px;
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 14px;
    color: var(--Text);
    cursor: pointer;
}

.icon-filed {
    position: relative;
}

    .icon-filed .filed-icon {
        flex: 0 0 auto;
        width: 16px;
        position: absolute;
        top: 34px;
        left: 12px;
    }

        .icon-filed .filed-icon svg {
            display: block;
        }

/* Profile Sidebar css end */


.card-footer-box {
    padding: 12px;
    border-top: 1px solid var(--Divider);
    margin: 0px -10px;
}

    .card-footer-box .d-flex {
        gap: 8px;
    }

.sectionheader h3 {
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 0;
    color: var(--Heading)
}

.sectionheader p {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0px;
    vertical-align: bottom;
    color: var(--Text);
    text-transform: capitalize;
}

.top-header-block {
    padding: 12px;
}

    .top-header-block .sectionheader {
        padding: 0;
    }

.wedge-box {
    position: absolute;
    right: 10px;
    top: 5px;
}

.form-check-container.check-box {
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    padding-left: 28px;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
}

    .form-check-container.check-box .checkmark {
        width: 20px;
        height: 20px;
    }

        .form-check-container.check-box .checkmark:after {
            width: 6px;
            height: 10px;
            left: 6px;
            top: 2px;
        }

.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--Surface-1);
    transition: 0.4s;
    border-radius: 34px;
}

    .slider::before {
        position: absolute;
        content: "";
        height: 22px;
        width: 22px;
        left: 2px;
        bottom: 2px;
        background-color: white;
        transition: 0.4s;
        border-radius: 50%;
    }

.card-billing {
    background-color: var(--Surface-4);
    border-radius: 4px;
}

    .card-billing .card-lead-title {
        font-weight: 600;
        font-size: 16px;
        line-height: 100%;
        border-radius: 4px;
        text-transform: uppercase;
    }

.card-header-box {
    padding: 14px 20px;
    border-bottom: 1px solid var(--Divider);
}

.card-billing .card-body {
    padding: 16px;
}

.card-billing .title-lead {
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: var(--Heading);
    margin-bottom: 4px;
}

.card-billing .lead-text {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--Text)
}

.title-account-type {
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    text-align: right;
    margin-bottom: 4px;
    color: var(--Text)
}

.title-payment-type {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0px;
    text-align: right;
    color: var(--Text)
}

@media only screen and (max-width: 767px) {
    .tabs-controls {
        justify-content: center;
    }

        .tabs-controls .nav-item {
            flex: 1;
            text-align: center;
        }

    .wrapper {
        background: var(--BodyBackground);
    }



    .search-area .form-control {
        display: none;
    }

    .search-area .btn-search {
        position: static;
        height: auto;
    }

        .search-area .btn-search svg {
            width: 24px;
            height: auto;
        }

    .user-auth-area {
        margin-left: 12px;
    }



        .user-auth-area .dropdown-toggle::after {
            display: none;
        }

        .user-auth-area .btn {
            width: 36px;
            padding: 5px;
            justify-content: center;
        }

    .hamburger .bar {
        width: 100%;
        color: #989998;
        margin: 5px 0;
        border: 1.33px solid;
        display: block;
    }

    .hamburger {
        width: 16px;
        /*        margin-right: 8px;*/
    }

    .collapseSideBar .hamburger {
        order: 3;
        margin-right: 0;
        margin-left: 8px;
    }

    .sec-filter .btn-filter-drop {
        margin-left: 0px;
    }

    .dropdown-menu.filter-card-form.show {
        display: flex;
        flex-direction: column;
    }

    .filter-card-form {
        max-width: 100%;
        min-width: 300px;
        width: 100%;
        position: fixed !important;
        top: 0 !important;
        transform: none !important;
        height: 100vh;
        margin: 0px;
    }

    .form-filter-footer {
        margin-top: auto;
    }

    .form-filter-body {
        height: 100%;
        overflow: auto;
    }


        .form-filter-body .row {
            margin: 0px -6px 12px -6px;
        }

/*    .card-tabs-box {
        margin-bottom: 12px;
    }*/



    /*.mobileportrait-mobilewide > div {
    flex: 0 0 100%;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 10px 5px;
    margin: 0px -5px;
}*/

    /*.mobileportrait-mobilewide > div:not(:last-child) {
        border-bottom: 1px solid var(--Divider);
    }*/

    .mobileportrait-mobilewide > div .page-sub-heading {
        text-align: left;
        font-size: 16px !important;
        color: var(--Text) !important
    }

    .mobileportrait-mobilewide .secondary-text {
        color: var(--Heading) !important;
    }





    .wrapper .sidebar {
        top: 0px;
    }

    .wrapper .top_navbar .top_menu .logo {
        text-align: left
    }

    .tablestyle td .table-content.d-flex span {
        white-space: nowrap;
    }

    .wrapper.collapseSideBar .sidebar ul li a {
        padding-left: 10px;
    }


    .profile-info {
        margin-right: 0px;
        margin-bottom: 20px;
    }

    .row.stats {
        padding-bottom: 8px;
    }

        .row.stats [class*='col-'] {
            margin-bottom: 12px;
            padding: 0 15px;
        }

    .card-profile .btn-theme svg {
        margin-right: 8px;
    }

    .tabbar {
        display: flex;
        width: 100%;
        flex-direction: row;
        overflow: auto;
        margin-bottom: 30px;
    }

        .tabbar .activetab, .tabbar .inactivetab {
            white-space: nowrap;
        }

    .activetab, .inactivetab {
        min-height: 50px;
    }

    .card-profile .btn-theme.button-tertiary {
        border-color: var(--Outline);
    }

    .down-arrow:not(.collapsed) svg {
        transform: rotate(180deg);
    }

    .sidebar-table-content {
        flex: 1;
        padding-left: 0;
    }

    .card-tabs-box.order-1 {
        margin-top: 12px;
    }

    .modal.modal-sidebar-profile .modal-dialog {
        width: 100%;
        right: 0;
        top: 0;
        bottom: 0;
    }

    .modal.modal-sidebar-profile .modal-content {
        border-radius: 0;
        height: calc(100vh - 0px);
    }

    .modal.modal-sidebar-profile .modal-body {
        padding: 16px;
    }

    .pagetitle {
        padding: 12px 20px;
    }

    .center-pagetitle {
        padding: 12px 20px;
    }

    .list-menu-top {
        margin-left: 12px;
    }

        .list-menu-top li a {
            font-size: 12px;
            padding: 0px 6px;
        }
}

.tooltip-wrapper {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

#floating-tooltip {
    position: absolute;
    z-index: 9999;
    background-color: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    display: none;
    max-width: 800px;
    white-space: pre-wrap;
    pointer-events: none; /* Ensures mouse events pass through */
}

.tag-chip {
    background-color: #f0f0f0;
    padding: 2px 6px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    display: inline-block;
    margin-right: 4px;
    color: #333;
}

.tag-badge {
    background-color: #1976D2; /* blue notification style */
    color: white;
    border-radius: 12px;
    padding: 1px 6px;
    font-size: 11px;
    font-weight: bold;
    vertical-align: middle;
}

.white-bg .white-bg {
    box-shadow: none;
}

.d-flex.align-items-center.gap-8.group-btns {
    flex-wrap: wrap;
    justify-content: end;
    min-width: 260px;
}

.sectionheader svg {
    fill: none !important;
    stroke: var(--buttonicon) !important;
}

.dropdown-item {
    padding: 5px 10px;
    font-size: 14px;
}

.dropdown-toggle::after {
    border-top: 0.4em solid;
    border-right: 0.4em solid transparent;
    border-left: 0.4em solid transparent;
}

.tabbar.tabbar-inner-main {
    flex-direction: row;
    box-shadow: none;
    margin-bottom: 30px;
    width: max-content;
}

    .tabbar.tabbar-inner-main .activetab, .tabbar.tabbar-inner-main .inactivetab {
        min-width: 160px;
        text-align: center;
        flex: 1;
        justify-content: center;
    }

.tabbar .icon svg {
    width: 16px;
    height: auto;
}

.px-6 {
    padding: 0px 6px;
}

.form-signle .autocomplete-items {
    position: static;
}

.tb-prt-overflow {
    margin-bottom: 15px;
}

.invoice-body-pad {
    padding: 16px;
}

@media (min-width: 769px) {
    .invoice-body-pad {
        padding-top: 12px;
    }
}

@media (max-width: 768px) {
    .invoice-body-pad {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* Invoice / Quote / Request: “Add Item” primary control + Bootstrap caret */
.add-item-dropdown .button.dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .add-item-dropdown .button.dropdown-toggle::after {
        margin-left: 0;
        border-top-color: currentColor;
    }

/* Quote / Request / Invoice footer Actions menu: lift content pane while open so the menu is not clipped. */
.sidebar-table-content:has(.quote-admin-url-actions .dropdown-menu.show),
.sidebar-table-content:has(.add-item-dropdown .dropdown-menu.show) {
    position: relative;
    z-index: 50;
    overflow: visible;
}

.form-outline:has(.add-item-dropdown .dropdown-menu.show),
.invoice-body-pad:has(.add-item-dropdown .dropdown-menu.show) {
    overflow: visible;
}

/* Billing: Add Item dropdown + Add Image trigger on one row (3px between items) */
.billing-add-item-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

/* Notes + totals: top-align columns so the left column does not stretch with the summary table (removes dead space under Notes) */
.row.billing-notes-totals-row {
    align-items: flex-start;
}

/* Invoice date / notes edit icon (pencil) + Notes heading (Invoice, Quote, Request) */
.invoice-edit-date-row {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
}

.invoice-edit-date-tooltip {
    position: relative;
    display: inline-block;
    margin-left: 10px;
}

.invoice-edit-date-btn {
    padding: 0 !important;
    line-height: 1;
    position: relative;
    top: -3px;
    vertical-align: baseline;
}

.invoice-edit-date-tooltip .tooltip-box {
    background: rgba(0, 0, 0, 0.75) !important;
    color: #fff !important;
    border: none !important;
    font-size: 11px !important;
    padding: 4px 8px !important;
}

.quote-notes-heading {
    margin-top: 25px;
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    font-size: 13px;
    font-weight: 500;
    text-transform: none;
}

/* Overrides .form-outline .formlabel { margin-top: 10px } so spacing above Notes stays 25px; bottom tightened vs former 25px */
.form-outline .formlabel.quote-notes-heading {
    margin-top: 25px;
    margin-bottom: 10px;
}

.form-outline .formlabel.quote-notes-heading.quote-notes-heading--editing,
.quote-notes-heading.quote-notes-heading--editing {
    margin-bottom: 8px;
}

.form-outline .formlabel.quote-notes-heading.quote-notes-heading--has-displayed-notes,
.quote-notes-heading.quote-notes-heading--has-displayed-notes {
    margin-bottom: 10px;
}

.quote-notes-displayed-body {
    margin-bottom: 10px;
}

.billing-add-item-toolbar .quote-notes-add-image-btn {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Billing: light rule between notes/add-image block and Email/Print action row */
.invoice-notes-actions-divider {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin: 8px 0;
    padding: 0;
    height: 0;
    width: 100%;
    box-sizing: border-box;
    flex: 0 0 100%;
    max-width: 100%;
}

/* Quote / invoice: block below notes divider — full width of white card content; agreement vs deposit space-between */
.invoice-footer {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 10px 10px 0;
}

.quote-invoice-bottom-actions {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-bottom: 10px;
}

.quote-invoice-bottom-actions__agreement-deposit-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    column-gap: 1rem;
    row-gap: 0.5rem;
    width: 100%;
    max-width: 100%;
    margin-top: 10px;
    padding-bottom: 0.5rem;
    box-sizing: border-box;
}

/* Mobile: vertically center the deposit button against the agreement checkbox (desktop keeps top-alignment) */
@media (max-width: 767px) {
    .quote-invoice-bottom-actions__agreement-deposit-row {
        align-items: center;
    }
}

.quote-invoice-bottom-actions__agreement-cluster {
    flex: 0 1 auto;
    min-width: 0;
}

.quote-invoice-bottom-actions__agreement-cluster .quote-require-agreement-label {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    color: #1f2937;
    text-transform: none;
    letter-spacing: normal;
}

.quote-invoice-bottom-actions__agreement-cluster select.width250 {
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    font-size: 13px;
    color: #374151;
}

.quote-approval-requirement-wrap {
    margin-top: 16px;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    max-width: 100%;
}

.quote-approval-requirement-block {
    padding: 12px 14px;
    border-radius: 8px;
    background: #F3F4F6;
    box-sizing: border-box;
    width: fit-content;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
}

.quote-approval-requirement-agreement-ddl {
    flex: 0 1 auto;
    min-width: 0;
}

.quote-approval-requirement-wrap .quote-require-agreement-label {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    color: #1f2937;
    text-transform: none;
    letter-spacing: normal;
}

.cq-quote-approved-sig {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #d7eadf;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cq-quote-approved-sig-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 280px;
    min-height: 96px;
    padding: 12px 16px;
    box-sizing: border-box;
    border: 1px solid var(--Divider, #d0d1d2);
    border-radius: 8px;
    background: #fff;
    order: 1;
}

.cq-quote-approved-sig-box .cq-quote-approved-sig-img {
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
    max-height: 72px;
    border: none;
    border-radius: 0;
    background: transparent;
    object-fit: contain;
}

.cq-quote-staff-approval-block {
    display: inline-block;
    max-width: 100%;
    margin-top: 12px;
    margin-bottom: 4px;
    padding: 12px 16px;
    text-align: left;
    /* Match .qh-pill--approved fill */
    background: #e6f4ec;
    border: 1px solid #d5e8dc;
    border-radius: 8px;
    box-shadow: inset 3px 0 0 #1d7a54;
    box-sizing: border-box;
}

.cq-quote-staff-approval-meta {
    display: block;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 1.45;
}

/* Match .qh-pill--approved text; agreement line stays muted grey */
.cq-quote-staff-approval-meta > .cq-quote-staff-approval-line {
    color: #1d7a54;
    font-weight: 700;
}

.cq-quote-staff-approval-meta .formlabel {
    margin-top: 8px !important;
    margin-bottom: 0;
    color: #6b7280;
    font-weight: 500;
}

.cq-quote-staff-approval-meta .formlabel strong {
    color: #6b7280;
    font-weight: 700;
}

.cq-quote-staff-approval-meta a {
    font-weight: 600;
    text-decoration: underline;
}

.cq-quote-staff-approval-block .cq-quote-approved-sig {
    margin-top: 12px;
}

.cq-quote-approved-sig.cq-quote-approved-sig--staff {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.cq-quote-approved-sig-affirm {
    font-size: 12px;
    color: #4b5563;
    font-style: italic;
    margin-bottom: 8px;
    order: 0;
}

.cq-quote-approved-sig.cq-quote-approved-sig--staff .cq-quote-approved-sig-box {
    max-width: 320px;
}

.cq-quote-approved-sig.cq-quote-approved-sig--staff img,
.cq-quote-approved-sig.cq-quote-approved-sig--staff .cq-quote-approved-sig-img {
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
}

.cq-quote-approved-sig.cq-quote-approved-sig--staff .cq-quote-approved-sig-label {
    width: 100%;
    text-align: center;
}

.cq-quote-approved-sig-label {
    font-weight: 500;
    font-size: 13px;
    color: #6b7280;
    margin-top: 8px;
    margin-bottom: 0;
    order: 2;
}

.cq-quote-approved-sig > img {
    max-width: 280px;
    width: 100%;
    height: auto;
    border: 1px solid var(--Divider, #d0d1d2);
    border-radius: 8px;
    background: #fff;
    order: 1;
}

/* Quote non-billable items — framed card, open rows (no vertical rules).
   Lives in layout.css so it always applies (not only via Ajax-injected <style>). */
.quote-nonbillable-section {
    margin-top: 16px !important;
    padding: 16px 14px 12px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    background: #F5F5F6 !important;
    background-color: #F5F5F6 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.quote-nonbillable-section .quote-nonbillable-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 10px;
    padding: 0 4px;
}

.quote-nonbillable-section .quote-nonbillable-title {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    line-height: 1.3;
}

.quote-nonbillable-section .quote-nonbillable-pill {
    font-size: 11px;
    font-weight: 500;
    color: #6b7280;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    padding: 2px 9px;
    white-space: nowrap;
}

.quote-nonbillable-section .tablestyle.quote-nonbillable-table {
    width: 100% !important;
    margin-bottom: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
}

.quote-nonbillable-section .tablestyle.quote-nonbillable-table th,
.quote-nonbillable-section .tablestyle.quote-nonbillable-table td {
    border-left: none !important;
    border-right: none !important;
    background: transparent !important;
    background-color: transparent !important;
}

.quote-nonbillable-section .tablestyle.quote-nonbillable-table th {
    color: #9ca3af !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    border-top: none !important;
    border-bottom: 1px solid #d4d4d4 !important;
    padding: 8px 10px 10px !important;
    vertical-align: bottom;
}

.quote-nonbillable-section .tablestyle.quote-nonbillable-table td {
    border-top: none !important;
    border-bottom: 1px solid #d4d4d4 !important;
    padding: 14px 10px !important;
    vertical-align: top;
    color: #1f2937;
    font-weight: 400;
    font-size: 13px;
}

.quote-nonbillable-section .tablestyle.quote-nonbillable-table tr:not(.quote-nonbillable-subtotal) > td:first-child {
    font-weight: 600;
}

.quote-nonbillable-section .tablestyle.quote-nonbillable-table th:nth-child(n+3),
.quote-nonbillable-section .tablestyle.quote-nonbillable-table td:nth-child(n+3) {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.quote-nonbillable-section .tablestyle.quote-nonbillable-table td.quote-cost-cell {
    color: #4b5563 !important;
    font-size: 13px !important;
    font-style: normal !important;
    text-align: right;
    white-space: nowrap;
}

.quote-nonbillable-section .tablestyle.quote-nonbillable-table td.quote-nonbillable-total {
    color: #111827 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    font-style: normal !important;
}

.quote-nonbillable-section .tablestyle.quote-nonbillable-table tr.quote-nonbillable-subtotal td {
    border-top: 1px solid #cfcfcf !important;
    border-bottom: none !important;
    padding-top: 14px !important;
    padding-bottom: 6px !important;
    font-weight: 600;
    color: #111827;
}

.quote-nonbillable-section .tablestyle.quote-nonbillable-table tr:has(+ tr.quote-nonbillable-subtotal) td {
    border-bottom: none !important;
}

.quote-invoice-bottom-actions__deposit-cluster {
    flex: 0 0 auto;
    margin-left: auto;
    text-align: right;
}

@media (max-width: 767px) {
    .quote-deposit-unset,
    .quote-discount-controls {
        max-width: 100%;
    }
}

/* Quote discount row: label lines up with Total:; actions stay right-aligned. */
.quote-discount-controls {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    width: 100%;
    max-width: 19rem;
    margin: 8px 0 0 auto;
    padding-left: 4px;
    box-sizing: border-box;
}

.quote-discount-controls-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    width: 100%;
    max-width: 100%;
}

.quote-discount-controls-label {
    width: 100%;
    text-align: left;
    font-size: 13px;
    line-height: 1.3;
}

.quote-discount-controls-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    width: 100%;
}

.quote-discount-controls-actions.quote-discount-type-actions {
    flex-wrap: nowrap;
    gap: 4px;
    white-space: nowrap;
}

.quote-discount-controls-actions.quote-discount-type-actions > .smallbutton,
.quote-discount-controls-actions.quote-discount-type-actions > .button-secondary-light,
.quote-discount-controls-actions.quote-discount-type-actions > .quote-discount-cancel-icon {
    margin: 0;
    flex: 0 0 auto;
}

.quote-discount-controls-actions.quote-discount-type-actions > .quote-discount-cancel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    background: transparent;
    border: 0;
    padding: 0 !important;
}

/* Discount editor sits in the totals table Discount row (same label style as read-only). */
.invoice-summary-totals.quote-summary-totals tr.quote-discount-edit-row > td.quote-discount-edit-cell,
.invoice-summary-totals.quote-summary-totals tr.quote-discount-edit-row > td.quote-summary-amount.quote-discount-edit-cell {
    width: auto !important;
    min-width: 11.5rem;
    max-width: none !important;
    white-space: nowrap;
}

.invoice-summary-totals.quote-summary-totals tr.quote-discount-edit-row .quote-discount-controls-actions {
    width: auto;
    max-width: none;
    flex-wrap: nowrap;
    justify-content: flex-end;
    white-space: nowrap;
}

/* Let Fixed / Percent / X widen the amount column without breaking the two-column grid. */
.invoice-summary-totals.quote-summary-totals:has(tr.quote-discount-edit-row) {
    max-width: 24rem;
}

.quote-discount-controls-actions .quote-discount-percent-input {
    width: 70px !important;
}

.quote-discount-controls-actions .quote-discount-icon-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.quote-discount-controls--add,
.quote-discount-deposit-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-left: 0;
}

.quote-discount-controls--add .button-secondary-light,
.quote-discount-deposit-actions .button-secondary-light {
    flex: 0 0 auto;
    white-space: nowrap;
    margin: 0;
}

/* Empty deposit row: same width as totals; "No deposit set" left, secondary button right. */
.quote-deposit-unset {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    max-width: 19rem;
    margin: 8px 0 0 auto;
    box-sizing: border-box;
}

.quote-deposit-unset-label {
    color: #6b7280;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    white-space: nowrap;
}

.quote-deposit-unset .button-secondary-light {
    flex: 0 0 auto;
    white-space: nowrap;
    margin: 0;
}

/* Quote deposit summary: standalone table, or rows inside the main totals table. */
.quote-deposit-summary {
    margin-top: 4px;
}

.invoice-summary-totals.quote-summary-totals tr.invoice-summary-totals-grand + tr.quote-deposit-summary-row > td,
.invoice-summary-totals.quote-summary-totals tr.editTable-border-top + tr.quote-deposit-summary-row > td {
    padding-top: 8px !important;
    padding-bottom: 4px !important;
}

/* Slight air under Total before Deposit due. */
.invoice-summary-totals.quote-summary-totals tr.invoice-summary-totals-grand:has(+ tr.quote-deposit-summary-row) > td {
    padding-bottom: 4px !important;
}

.quote-deposit-summary .quote-deposit-label-cell,
.quote-deposit-summary-row .quote-deposit-label-cell,
.invoice-summary-totals.quote-summary-totals td:has(> .quote-summary-label-row),
.invoice-summary-totals.quote-summary-totals td:has(> .quote-deposit-label-row) {
    white-space: nowrap;
    vertical-align: top;
    overflow: visible;
}

.quote-deposit-summary .quote-deposit-label-row,
.quote-deposit-summary-row .quote-deposit-label-row,
.quote-summary-label-row {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.25;
}

/* Trash hangs left of the label so "Deposit due:" / % lines share the same
   right edge as Sub Total / Tax / Total (icon does not take flow width). */
.quote-deposit-summary .quote-deposit-label-row > .quote-deposit-remove-btn,
.quote-deposit-summary-row .quote-deposit-label-row > .quote-deposit-remove-btn,
.quote-summary-label-row > .quote-summary-remove-btn {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 6px;
}

.quote-deposit-summary .quote-deposit-amount-cell,
.quote-deposit-summary-row .quote-deposit-amount-cell {
    white-space: nowrap;
    text-align: right;
    vertical-align: top;
}

.quote-deposit-summary .quote-deposit-amount-value,
.quote-deposit-summary-row .quote-deposit-amount-value {
    display: block;
    width: 100%;
    margin: 0;
    text-align: right;
    font-size: inherit;
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
}

.quote-deposit-summary .quote-deposit-amount-value strong,
.quote-deposit-summary-row .quote-deposit-amount-value strong {
    font-size: inherit;
    font-weight: 700;
}

.quote-deposit-summary .quote-deposit-change-link,
.quote-deposit-summary-row .quote-deposit-change-link {
    display: block;
    width: 100%;
    margin-top: 2px;
    font-size: 12px;
    text-align: right;
    text-decoration: underline;
    cursor: pointer;
    line-height: 1.2;
}

.quote-deposit-summary .quote-deposit-remove-btn,
.quote-deposit-summary-row .quote-deposit-remove-btn,
.quote-summary-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin: 0;
    padding: 0 !important;
    line-height: 0;
    color: #6b7280;
    background: transparent;
    border: 0;
}

.quote-deposit-summary .quote-deposit-remove-btn:hover,
.quote-deposit-summary .quote-deposit-remove-btn:focus,
.quote-deposit-summary-row .quote-deposit-remove-btn:hover,
.quote-deposit-summary-row .quote-deposit-remove-btn:focus,
.quote-summary-remove-btn:hover,
.quote-summary-remove-btn:focus {
    color: #b91c1c;
    background: transparent;
}

.quote-deposit-summary .quote-deposit-remove-btn svg,
.quote-deposit-summary-row .quote-deposit-remove-btn svg,
.quote-summary-remove-btn svg {
    display: block;
    width: 14px;
    height: 14px;
}

/* Shared amount column for quote Sub Total / Tax / Total / Deposit — one right edge. */
.invoice-summary-totals.quote-summary-totals > tbody > tr > td.quote-summary-amount,
.invoice-summary-totals.quote-summary-totals > tr > td.quote-summary-amount {
    width: 7.5rem;
    text-align: right !important;
    vertical-align: baseline;
    white-space: nowrap;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
}

/* Quote totals: no boxed Total / divider lines (columns only). */
.invoice-summary-totals.quote-summary-totals tr.invoice-summary-totals-grand > td,
.invoice-summary-totals.quote-summary-totals tr.invoice-summary-totals-grand > td:first-child,
.invoice-summary-totals.quote-summary-totals tr.invoice-summary-totals-grand > td:last-child,
.invoice-summary-totals.quote-summary-totals tr.borderbottom > td {
    border: none !important;
}

.invoice-summary-totals.quote-summary-totals td.quote-summary-amount p,
.invoice-summary-totals.quote-summary-totals td.quote-summary-amount p.text-end,
.invoice-summary-totals.quote-summary-totals td.quote-summary-amount .quote-deposit-amount-value {
    margin: 0;
    text-align: right !important;
    font-size: 15px;
}

.invoice-summary-totals.quote-summary-totals td.quote-summary-amount .quote-deposit-amount-value strong {
    font-size: 15px;
    font-weight: 700;
}

/* Deposit > option total: extends global `.error-message` (Validation section above) — explicit color so
   nested quote/table rules (e.g. `.sidebar-table-content` / `td` / `p`) cannot override `var(--ErrorText)`. */
.quote-deposit-summary .quote-deposit-pay-in-full-notice.error-message,
.quote-deposit-summary-row .quote-deposit-pay-in-full-notice.error-message {
    color: var(--ErrorText, #d32f2f) !important;
    font-weight: bold;
    font-style: italic;
    text-align: right;
    width: auto;
    max-width: 100%;
    font-size: 13px;
    line-height: 1.4;
}

.quote-invoice-bottom-actions__buttons {
    width: 100%;
    max-width: 100%;
    text-align: left;
    box-sizing: border-box;
}

/* Invoice / Quote summary totals — receipt style: narrow block, flush right, labels aligned to gutter, amounts aligned */
.invoice-summary-totals {
    width: 100%;
    max-width: 19rem;
    margin-left: auto !important;
    margin-right: 0 !important;
    border-collapse: collapse;
    table-layout: fixed;
}

    .invoice-summary-totals tr:not(:has(td[colspan="4"])) > td:first-child {
        text-align: right;
        padding: 8px 10px 8px 4px !important;
        vertical-align: top;
        box-sizing: border-box;
    }

    .invoice-summary-totals tr:not(:has(td[colspan="4"])) > td:last-child {
        width: 44%;
        text-align: right;
        padding: 8px 0 8px 6px !important;
        vertical-align: top;
        font-variant-numeric: tabular-nums;
        box-sizing: border-box;
    }

    .invoice-summary-totals tr:not(:has(td[colspan="4"])) > td:last-child p.text-end {
        margin: 0;
        text-align: right;
    }

    .invoice-summary-totals tr.invoice-summary-totals-grand > td {
        border-top: 2px solid var(--ButtonBackgroundColor);
        border-bottom: 2px solid var(--ButtonBackgroundColor);
    }

    .invoice-summary-totals tr.invoice-summary-totals-grand > td:first-child {
        border-left: 2px solid var(--ButtonBackgroundColor);
        padding: 10px 10px 10px 4px !important;
    }

    .invoice-summary-totals tr.invoice-summary-totals-grand > td:last-child {
        border-right: 2px solid var(--ButtonBackgroundColor);
        padding: 10px 0 10px 6px !important;
    }

/* Payment actions under invoice totals — same width/position as summary table so buttons align with "Total:" */
.invoice-summary-payment-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 19rem;
    margin: 8px 0 0 auto;
    padding-left: 4px;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .invoice-summary-payment-actions {
        max-width: 100%;
    }

    .invoice-summary-totals {
        max-width: 100%;
    }

    .invoice-summary-totals tr:not(:has(td[colspan="4"])) > td:first-child {
        width: 56%;
    }

    .invoice-summary-totals tr:not(:has(td[colspan="4"])) > td:last-child {
        width: 44%;
    }
}

/*Tabs css start*/

.tabbar.tabbar-global {
    flex-direction: row;
    width: auto;
    box-shadow: none;
    margin-bottom: 0px;
    background-color: var(--Surface-2);
    padding: 4px;
    border-radius: 4px;
    flex-wrap: wrap;
    display: inline-flex;
}

    .tabbar.tabbar-global .tabbar .icon-arrow {
        display: none;
    }

    .tabbar.tabbar-global .activetab, .tabbar.tabbar-global .inactivetab {
        min-height: auto;
        background-color: transparent;
        border: 0;
        font-weight: 600;
        font-size: 14px;
        line-height: 100%;
        letter-spacing: 0px;
        text-transform: uppercase;
        background-color: var(--Surface-3);
        text-align: center;
        padding: 3px 8px;
        color: var(--Text) !important;
    }

        .tabbar.tabbar-global .activetab .icon, .tabbar.tabbar-global .inactivetab .icon {
            display: none;
        }

    .tabbar.tabbar-global .activetab {
        background-color: var(--buttonsecondary);
        color: var(--Heading) !important;
        box-shadow: 0px 1px 4px 0px #090C0B14;
        border-radius: .25rem;
    }

/*Tabs css End*/

.scroll-tabel .container.m-2 {
    max-width: 100%;
}

body {
    padding: 0 !important;
    margin: 0px !important;
}

.tabbar.tabbar-global .activetab .icon-arrow {
    display: none;
}

.details .field {
    margin-bottom: 12px;
}

.status-row .status {
    font-size: 20px;
}

.summary-item {
    color: var(--Text);
    padding: 2px 0px;
}

    .summary-item .fw-bold {
        color: var(--Heading);
    }

.card-deail-box {
    flex: 0 0 auto;
    width: 350px;
}

.sec-action-box {
    display: flex;
    justify-content: end;
}

@media (max-width: 1400px) {
    .form-1600, .form-1400, .form-1200, .form-1000, .form-800, .form-600, .form-450 {
        padding: 12px;
    }
}

/* Extra bottom scroll room so the last card/content can scroll clear of the fixed chat-bot icon
   (bottom-right). A longhand placed after the responsive `padding` shorthands above, so it overrides
   only the bottom side at every breakpoint and applies to every page form container. */
.form-fullscreen, .form-1600, .form-1400, .form-1200, .form-1000, .form-800, .form-600, .form-450 {
    padding-bottom: 100px;
}

@media (max-width: 1600px) {
    .wrapper .sidebar {
        width: 200px;
    }

    .wrapper .main-Content {
        width: calc(100% - 200px);
        margin-left: 200px;
    }



    .tablestyle th, .tablestyle td, .tabulator-row .tabulator-cell, .tabulator-col-content {
        font-size: 13px;
        padding: 8px 5px !important;
        white-space: normal;
        word-break: normal;
        overflow-wrap: break-word;
    }

    .tablestyle.billing-items-table th,
    .tablestyle.billing-items-table td {
        padding: 8px 10px !important;
    }

    .tablestyle .icon-button {
        text-align: right;
    }

    .pagetitle, .center-pagetitle {
        font-size: 16px;
    }

    .wrapper .sidebar ul li a span.title {
        font-size: 13px;
    }

    .tabbar .activetab, .tabbar .inactivetab {
        font-size: 13px;
    }
}

@media (min-width: 991px) {
    .widedesktop {
        display: none
    }
}

@media (max-width: 1199px) {
    .tabbar {
        width: 250px;
    }
}

@media (max-width: 1199px) {
    .wrapper .top_navbar .hamburger {
        height: 30px;
        padding: 0;
        width: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: transparent;
    }

        .wrapper .top_navbar .hamburger div {
            background-color: #666;
            height: 2px;
        }

    .widedesktop .top_navbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px;
        border-bottom: 1px solid 1px var(--Outline);
        background: var(--white);
    }

        .widedesktop .top_navbar .top_menu {
            order: -1;
        }
}

@media (max-width: 991px) {
    .wrapper .sidebar {
        transform: translateX(-100%);
        top: 0px;
        z-index: 1021;
        /* Drawer taller than viewport: explicit height + momentum scroll (body.open-menu is position:fixed on mobile) */
        height: 100vh;
        max-height: 100vh;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .wrapper.collapseSideBar .sidebar {
        transform: translateX(0px);
    }

    .wrapper .main-Content {
        width: 100%;
        margin-left: 0;
    }

    body.open-menu {
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        right: 0;
    }

    .open-menu .mobile-overlay {
        background: rgb(0 0 0 / 52%);
        position: fixed;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .open-menu .wrapper .top_navbar .hamburger div:first-child {
        -webkit-transform: rotate(135deg);
        -moz-transform: rotate(135deg);
        -o-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
        transform: rotate(45deg);
        position: absolute;
    }

    .open-menu .wrapper .top_navbar .hamburger div:last-child {
        -webkit-transform: rotate(-135deg);
        -moz-transform: rotate(-135deg);
        -o-transform: rotate(-135deg);
        -ms-transform: rotate(-135deg);
        transform: rotate(-45deg);
        position: absolute;
    }

    .open-menu .wrapper .top_navbar .hamburger div:nth-child(2) {
        display: none;
    }
}

@media (max-width: 767px) {

    .wrapper .top_navbar .top_menu .logo img {
        height: 29px;
    }

    .sidebar-table-content {
        width: 100%;
    }

    .tabbar {
        width: 100%;
    }

    .pagetitle, center-pagetitle {
        font-size: 16px;
        padding: 15px;
        min-height: inherit;
    }

    .form-1600 > .d-flex, .form-1400 > .d-flex, .form-1200 > .d-flex, .form-1000 > .d-flex, .form-800 > .d-flex, .form-600 > .d-flex, .form-450 > .d-flex,
    .form-1600 > .d-md-flex, .form-1400 > .d-md-flex, .form-1200 > .d-md-flex, .form-1000 > .d-md-flex, .form-800 > .d-md-flex, .form-600 > .d-md-flex, .form-450 > .d-md-flex {
        display: block !important;
    }

    .d-flex:has(> .tabbar.white-bg.tabbar-inner-nav),
    .d-md-flex:has(> .tabbar.white-bg.tabbar-inner-nav) {
        display: block !important;
        min-width: 0;
        max-width: 100%;
        /* clip, not hidden: position: sticky resolves against the nearest ancestor
           scrollport, and overflow: hidden creates one -- which stranded the pinned inner
           nav strip inside this wrapper (it simply never stuck). clip does the same visual
           job without creating a scrollport. Same reason the settings rail carries an
           overflow-x: clip override further down this file. */
        overflow-x: clip;
    }

    .d-flex:has(> .tabbar.white-bg.tabbar-inner-nav) > .sidebar-table-content,
    .d-md-flex:has(> .tabbar.white-bg.tabbar-inner-nav) > .sidebar-table-content {
        width: 100% !important;
        max-width: 100%;
        min-width: 0;
        padding-left: 0 !important;
        box-sizing: border-box;
    }

    .tabbar.tabbar-global {
        flex-wrap: nowrap;
    }

    .d-flex.block-head-email.gap-8 {
        display: flex !important;
        flex-direction: column-reverse;
    }

    .card-deail-box {
        width: 100%;
    }

    .sec-product-table .flex-grow-1 {
        padding-left: 0;
    }

    .sec-mobile-message .desktop {
        display: block !important;
    }

    .table-lesson-mobile.tablestyle td {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 10px;
    }

        .table-lesson-mobile.tablestyle td .gridbutton {
            margin: 0px;
        }

    .filters-custom.filters input {
        width: 100% !important;
    }

    .filters-custom .mycontentsection {
        display: grid;
        grid-template-columns: 50% 50%;
        grid-gap: 5px;
    }

    .sec-prodcut-main .white-bg.scroll-sensitive-header.desktop {
        display: block !important;
    }

    .sec-prodcut-main .new-store-sec.sticky-top {
        position: static !important;
    }

    .sec-prodcut-main .tabs-controls li .nav-link {
        white-space: nowrap;
    }

    .sec-prodcut-main .tabs-controls .nav-item {
        flex: 0 0 auto;
    }

    .sec-prodcut-main .full-screen-bx {
        margin-bottom: 12px;
    }


    .filter-column [class*='col-'] {
        margin-top: 15px;
    }

    .sec-prodcut-main .space-between-sec .tabs-controls {
        flex-wrap: nowrap;
    }

    .sec-prodcut-main .card-tabs-box {
        overflow: auto;
    }

    .sec-prodcut-main .mobileportrait-mobilewide {
        margin-top: 10px;
    }
}

body {
    padding: 0 !important;
    margin: 0px !important;
}

.tabbar.tabbar-global .activetab .icon-arrow {
    display: none;
}

.notes-clip {
    white-space: nowrap;
    cursor: help;
}

/* Contact list: table-layout fixed + colgroup — Type stays 120px; Notes col absorbs remaining width.
   Global .table-card-data-table th,td sets overflow:visible !important — override for this table. */
#contact-table.table-card-data-table {
    table-layout: fixed;
    width: 100%;
}

#contact-table.table-card-data-table > thead > tr > th:not(.contact-th-actions),
#contact-table.table-card-data-table > tbody > tr > td:not(.row-actions) {
    overflow: hidden !important;
}

#contact-table.table-card-data-table > thead > tr > th.contact-th-actions,
#contact-table.table-card-data-table > tbody > tr > td.row-actions {
    overflow: visible !important;
}

#contact-table th.contact-th-type,
#contact-table td.type {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    box-sizing: border-box;
}

#contact-table td.name,
#contact-table td.company {
    vertical-align: top;
    box-sizing: border-box;
}

#contact-table td.name a,
#contact-table td.company a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

#contact-table td.type {
    text-overflow: ellipsis;
    white-space: nowrap !important;
}

/* Notes column: no fixed pixel width — colgroup leaves this col flexible */
#contact-table th.contact-th-notes,
#contact-table td.notes-cell {
    width: auto;
    min-width: 0;
    white-space: normal !important;
    vertical-align: top;
    box-sizing: border-box;
}

#contact-table .notes-cell-stack {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    max-width: 100%;
}

#contact-table .notes-meta-line {
    font-size: 12px;
    color: #4a5568;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

#contact-table .notes-list-html-wrap {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.25;
    max-width: 100%;
    cursor: help;
}

#contact-table .notes-list-html-wrap p {
    margin: 0;
}

.sticky-container {
    position: sticky;
    top: 0;
    z-index: 1;
}

.popup-hidden {
    display: none;
}

.hidden-popup-trigger {
    display: none;
}

.contact-import-label-col {
    width: 150px;
}

.contact-import-progress {
    display: none;
    text-align: center;
    margin-top: 10px;
    font-weight: 600;
    color: #374151;
}

.table-action-col {
    width: 5%;
}

.filter-action-list {
    list-style: none;
}

.row-action-hidden {
    display: none;
}

/* =========================
   Empty State - Global Reusable
   ========================= */

.empty-state-wrap {
    width: 100%;
    background: #ffffff;
    padding: 12px 12px 20px;
    border-radius: 8px;
    box-shadow: 0px 8px 24px 0px rgba(51, 48, 48, 0.102);
}

.empty-state-wrap--compact {
    padding: 24px 12px 28px;
    margin-top: 14px;
    border: 1px solid #e2e8f0;
}

.empty-state-card {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.empty-state-icon {
    width: 100%;
    max-width: 320px;
    min-height: 0;
    height: auto;
    margin: 0 auto 10px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .empty-state-icon::after {
        content: "";
        position: absolute;
        width: 220px;
        height: 54px;
        border-radius: 50%;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        pointer-events: none; /* decorative shadow — must not block clicks on title/actions below */
    }

/* Artwork slot held open on full empty states that ship without an illustration:
   matches the rendered art height on Customers, and art dropped in later is capped
   to the slot so the card keeps the same height. */
.empty-state-icon--placeholder {
    height: 205px;
}

    .empty-state-icon--placeholder .empty-state-image {
        max-height: 100%;
    }

    /* While the slot is still empty, split it evenly above and below the copy so the
       copy reads as centred; adding an <img> hands the whole slot back to the artwork
       and drops the copy under it, at the same overall height. */
    .empty-state-icon--placeholder:empty {
        height: 107.5px;
        margin-bottom: 0;
    }

.empty-state-card:has(.empty-state-icon--placeholder:empty)::after {
    content: "";
    height: 107.5px;
    flex-shrink: 0;
}

/* Artwork bounds match Products list empty state (not the icon wrapper box) */
.empty-state-image {
    max-width: min(308px, 100%);
    max-height: 240px;
    width: auto;
    height: auto;
    object-fit: contain;
    position: relative;
    z-index: 1;
    display: block;
    margin: 0 auto;
}

.empty-state-image--products {
    max-width: min(308px, 100%);
    max-height: 240px;
}

/* Slightly larger illustration: categories, packages, pricing tiers, vendors */
.empty-state-image--lg {
    max-width: min(320px, 100%);
    max-height: 260px;
}

/* Invoice/report empty states — same artwork scale as Product page */
.invoice-empty-icon,
.revenuereport-empty-icon {
    width: 100%;
    max-width: 320px;
    min-height: 0;
    height: auto;
    margin: 0 auto 20px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .invoice-empty-icon::after,
    .revenuereport-empty-icon::after {
        content: "";
        position: absolute;
        width: 220px;
        height: 54px;
        border-radius: 50%;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        pointer-events: none;
    }

    .invoice-empty-icon img,
    .revenuereport-empty-icon img {
        max-width: min(308px, 100%);
        max-height: 240px;
        width: auto;
        height: auto;
        object-fit: contain;
        position: relative;
        z-index: 1;
        display: block;
        margin: 0 auto;
    }

.empty-state-title {
    font-weight: 800;
    font-size: 28px;
    line-height: 1.2;
    margin: 0 0 10px;
    position: relative;
    z-index: 2;
    color: #0f172a;
}

.empty-state-title--compact {
    font-size: 24px;
}

.empty-state-help {
    margin: 0 auto 18px;
    font-size: 14px;
    color: #64748b;
    line-height: 1.5;
    max-width: 560px;
}

.empty-state-help--compact {
    font-size: 14px;
}

.empty-state-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    position: relative;
    z-index: 3; /* above empty-state-title (::after shadow lives in icon column but keep actions reliably clickable) */
}


    .empty-state-actions .button,
    .empty-state-actions a.button,
    .empty-state-actions .button-primary,
    .empty-state-actions .button-white,
    .empty-state-actions .button-secondary-light {
        display: inline-flex;
        align-items: center;
        justify-content: center;    
        gap: 8px;
        height: 34px;
        min-width: 118px;
        border-radius: 5px;
        line-height: 1;
        font-weight: 500;
        text-decoration: none;
        /* body sets Switzer, but a <button> does not inherit font-family from it: the UA stylesheet
           puts its own font on form controls, which beats inheritance. Almost every empty-state action
           is a <button>, so their labels were rendering in the browser default font while the card's
           title and help text rendered in Switzer. */
        font-family: inherit;
    }

        .empty-state-actions .button svg,
        .empty-state-actions a.button svg,
        .empty-state-actions .button-primary svg,
        .empty-state-actions .button-white svg {
            width: 14px;
            height: 14px;
            flex-shrink: 0;
        }


@media (max-width: 768px) {
    .empty-state-wrap {
        padding: 40px 12px 60px;
    }

    .empty-state-icon {
        max-width: 260px;
        margin-bottom: 16px;
    }

    .empty-state-icon--placeholder {
        height: 133px;
    }

    .empty-state-icon--placeholder:empty {
        height: 74.5px;
    }

    .empty-state-card:has(.empty-state-icon--placeholder:empty)::after {
        height: 74.5px;
    }

        .empty-state-icon::after {
            width: 200px;
            height: 48px;
        }

    .empty-state-image {
        max-width: 200px;
        max-height: 160px;
    }

    .empty-state-image--lg {
        max-width: 212px;
        max-height: 172px;
    }

    .invoice-empty-icon,
    .revenuereport-empty-icon {
        max-width: 260px;
        margin-bottom: 16px;
    }

        .invoice-empty-icon::after,
        .revenuereport-empty-icon::after {
            width: 200px;
            height: 48px;
        }

        .invoice-empty-icon img,
        .revenuereport-empty-icon img {
            max-width: 200px;
            max-height: 160px;
        }

    .empty-state-title {
        font-size: 24px;
    }

    .empty-state-title--compact {
        font-size: 20px !important;
    }
}


/* Card Styles */
.app-card-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.app-card {
    border: 1px solid var(--Outline);
    border-radius: 8px;
    overflow: hidden;
    background-color: #FBFBFB;
}

    .app-card > .sectionheader,
    .app-card-header {
        background-color: #F0F2F6 !important;
        border-bottom: 1px solid var(--Outline);
        margin: 0;
        padding: 12px 14px 12px 28px;
    }

/*
 * Event Settings: several settings cards drawn as ONE list under a single "Event settings" header. The cards inside keep
 * their own markup (the scripts and styles that drive them are written against it) but lose their chrome and their
 * titles, so the settings read as one continuous list.
 */
.event-settings-group > .app-card-body {
    padding: 0;
}

.event-settings-group .app-card {
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent;
    box-shadow: none;
}

.event-settings-group .app-card > .sectionheader {
    display: none !important;
}

/* form-800 card headers: consistent row height (Contact Details icon row is tallest reference) */
.form-800 .app-card > .sectionheader,
.form-800 .white-bg > .sectionheader {
    min-height: 56px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.form-800 .app-card > .sectionheader span,
.form-800 .white-bg > .sectionheader span {
    margin-top: 0 !important;
}

/* form-1200 (Event edit): same section header row height as form-800 / Intake edit toolbar */
.form-1200 .app-card > .sectionheader,
.form-1200 .white-bg > .sectionheader {
    min-height: 56px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.form-1200 .app-card > .sectionheader span,
.form-1200 .white-bg > .sectionheader span {
    margin-top: 0 !important;
}

/*
 * Intake edit + Event edit: primary toolbar + app-card titles match list table-card chrome
 * (same as .table-card-header h3 — pairs visually with .table-card-body .white-bg list areas).
 */
.form-800 .sidebar-table-content > .white-bg > .sectionheader,
.form-1200 .sidebar-table-content > .white-bg > .sectionheader,
.event-form-shell .white-bg > .sectionheader,
.form-800 .app-card > .sectionheader,
.form-1200 .app-card > .sectionheader,
.event-form-shell .app-card > .sectionheader {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--CardHeaderText);
    /* Title case from markup — same as Contact edit card h3 / CRM app-cards (beats global .sectionheader uppercase) */
    text-transform: none;
    letter-spacing: normal;
}

/* Contact pages only: align headers and non-table body content with field labels (global td { padding: 8px } in tables.css) */
.form-800.contact-page-form .app-card > .sectionheader,
.form-800.contact-page-form .white-bg > .sectionheader {
    padding: 12px 22px 12px 36px;
}

.form-800.contact-page-form .app-card-body {
    padding: 12px 22px 12px 36px;
}

.form-800.contact-page-form .app-card-body > table.responsive-form-table td {
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 0;
    padding-right: 8px;
}

.form-800.contact-page-form .app-card-body > table.responsive-form-table td + td {
    padding-left: 8px;
}

/* Questionnaire builder (Edit Questionnaire): category blocks match app-card — grey header, card chrome, header inset matches .tablestyle th/td (12px horizontal) */
.form-800.questionnaire-builder .white-bg {
    border: 1px solid var(--Outline);
    border-radius: 8px;
    overflow: hidden;
    background-color: #FBFBFB;
    margin-bottom: 10px;
    box-shadow: none;
}

.form-800.questionnaire-builder .white-bg > .sectionheader {
    background-color: #F0F2F6 !important;
    border-bottom: 1px solid var(--Outline);
    margin: 0;
    padding: 12px 12px 12px 28px;
    line-height: 1.25;
}

.form-800.questionnaire-builder .white-bg > .sectionheader .space-between-sec {
    width: 100%;
    align-items: center;
}

.form-800.questionnaire-builder .questionaire-actions {
    padding: 12px 12px 12px 28px;
    background: #F0F2F6 !important;
    border-top: 1px solid var(--Outline);
    border-bottom: none;
}

/* Full-width table: row background (Surface-3) runs to the card edge — no side margins */
.form-800.questionnaire-builder .white-bg > .tablestyle {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

.form-800.questionnaire-builder .white-bg .tablestyle th,
.form-800.questionnaire-builder .white-bg .tablestyle td {
    border-left: none !important;
    border-right: none !important;
    padding-left: 28px !important;
}

/* Column title row + question rows: same light grey (Surface-3) */
.form-800.questionnaire-builder .white-bg .tablestyle tr:first-child th {
    background: var(--Surface-3) !important;
    border-bottom: 1px solid var(--Outline) !important;
    font-weight: 600 !important;
}

.form-800.questionnaire-builder .white-bg .tablestyle tr:not(:first-child) td {
    background: var(--Surface-3) !important;
}

.form-800.questionnaire-builder .white-bg .tablestyle tr:first-child + tr td {
    border-top: none !important;
}

.app-card-body {
    padding: 12px 28px 12px 28px;
    background-color: #FBFBFB;
}

    .app-card-body > table {
        width: 100%;
    }

    .app-card-body table,
    .app-card-body table td {
        background-color: #FBFBFB !important;
    }

    .app-card-body table {
        padding: 0 !important;
        margin: 0;
    }

        .app-card-body table tr td {
            margin-bottom: 5px;
        }

        .app-card-body table tr:last-child td {
            margin-bottom: 0 !important;
        }
}

/* Events module (#partialview.event-section on Event controller pages): title case on section/table/tab chrome */
.event-section .sidebar-table-content > .form-1000 {
    width: 100% !important;
    max-width: 100% !important;
    position: static !important;
    left: auto !important;
    margin-left: 0 !important;
}

.event-section .sectionheader,
.event-section .app-card > .sectionheader {
    text-transform: none;
}

.event-section .tablestyle th,
.event-section .tablestyle th .buttonaslink {
    text-transform: none;
}

/* Event list (EventList_Partial): form-1000 — match Contact List table-card toolbar sizing / icon color */
.event-section .form-1000 .table-card-header .table-card-header-actions {
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.event-section .form-1000 .btn.table-card-outline-btn:not(.table-card-filter-btn) {
    min-height: 36px;
    padding: 0 12px !important;
    gap: 8px !important;
    line-height: 1.2;
}

.event-section .form-1000 .dropdown.btn-filter-drop > .btn.table-card-outline-btn.table-card-filter-btn {
    min-height: 36px !important;
    width: 36px !important;
    min-width: 36px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: center;
    align-items: center;
}

.event-section .form-1000 .table-card-header .table-card-header-actions > .buttons .btn.table-card-outline-btn svg path {
    stroke: currentColor;
}

.event-section .event-list-signup-banner {
    padding: 10px 12px;
}

/* Event Details flyer / calendar: no grey gutters around groups (match white card body) */
.event-section .table-group.event-details-table-group {
    margin: 0;
    padding: 0;
    background: transparent;
}

/* Section band headers (Event Flyer, Calendar Invite): match outer .table-card-header */
.event-section .table-group-header.event-details-table-group-header.event-details-band-header {
    padding: 20px 20px;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background: var(--CardHeaderBackground) !important;
    border: 1px solid var(--Outline, #e5e5e5);
}

/* Event Flyer + Calendar Invite: round top corners to match .table-card-header (beat .table-group-header { border-radius: 0 !important } in tables.css) */
.event-section .table-group-header.event-details-table-group-header.event-details-band-header.event-details-band-round-top {
    border-radius: var(--table-card-chrome-radius, 11px) var(--table-card-chrome-radius, 11px) 0 0 !important;
}

    .event-section .table-group-header.event-details-table-group-header.event-details-band-header h3 {
        margin: 0;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.3;
        color: var(--CardHeaderText);
        text-transform: none;
    }


/* Calendar Invite Quill — match band header Outline (1px), single seam under header */
.event-section .event-details-calendar-editor .matrix-quill-wrapper {
    border-top: none !important;
    border-left: 1px solid var(--Outline, #e5e5e5) !important;
    border-right: 1px solid var(--Outline, #e5e5e5) !important;
    border-bottom: 1px solid var(--Outline, #e5e5e5) !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: var(--table-card-chrome-radius, 11px) !important;
    border-bottom-right-radius: var(--table-card-chrome-radius, 11px) !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

.event-section .event-details-calendar-editor .matrix-quill-toolbar {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    box-shadow:
        0 2px 3px rgba(34, 47, 62, 0.12),
        0 6px 10px rgba(34, 47, 62, 0.07) !important;
}

.event-section .event-details-calendar-editor .matrix-quill-editor {
    border-bottom-left-radius: var(--table-card-chrome-radius, 11px) !important;
    border-bottom-right-radius: var(--table-card-chrome-radius, 11px) !important;
    min-height: 400px;
}


/* Outer frame shares the seam under the flyer header (no double 1px line) */
.event-section .event-details-unlayer-builder {
    border-left: 1px solid var(--Outline, #e5e5e5);
    border-right: 1px solid var(--Outline, #e5e5e5);
    border-bottom: 1px solid var(--Outline, #e5e5e5);
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: var(--table-card-chrome-radius, 11px);
    border-bottom-right-radius: var(--table-card-chrome-radius, 11px);
    box-sizing: border-box;
    overflow: hidden;
    margin-bottom: 15px;
}

/* Company Profile Settings, Company Settings, Point of Sale Settings, etc. */
.company-profile-sections .table-card + .table-card {
    margin-top: 1.5rem;
}

.company-profile-sections > .table-card:first-child {
    margin-top: 0;
}

.company-profile-sections .table-card-body > .white-bg:not(.table-card-white-bg-flush) {
    padding: 16px 20px;
    box-sizing: border-box;
    text-align: left;
}

.company-profile-sections .table-card-body .white-bg .table-responsive {
    padding: 0;
    margin: 0;
}

.company-profile-sections .table-card-body .white-bg .tablestyle.lesspadding {
    border: 0;
    background: transparent;
}

.company-profile-sections .table-card-body .white-bg .tablestyle.lesspadding td {
    padding: 10px 8px !important;
    vertical-align: top;
    text-align: left;
}

.company-profile-sections .table-card-body .white-bg .tablestyle.lesspadding tr td:first-child {
    padding-left: 0 !important;
}

.company-profile-sections .table-card-body .white-bg .tablestyle.lesspadding tr td:last-child {
    padding-right: 0 !important;
}

.company-profile-sections .table-card-body .white-bg .tablestyle.lesspadding tr:first-child td {
    padding-top: 0 !important;
}

.company-profile-sections .table-card-body .white-bg .tablestyle.lesspadding tr:last-child td {
    padding-bottom: 0 !important;
}

.company-profile-sections .table-card-body .white-bg .formlabel {
    margin-bottom: 6px;
    line-height: 1.4;
    text-align: left;
}

.company-profile-sections .table-card-body .white-bg .text-muted.small,
.company-profile-sections .table-card-body .white-bg .text-muted {
    color: #6b7280;
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
}

.company-profile-sections .table-card-body .white-bg .d-flex.align-items-center .formlabel,
.company-profile-sections .table-card-body .white-bg td.d-flex .formlabel,
.company-profile-sections .table-card-body .white-bg h4.formlabel {
    margin-bottom: 0;
}

.company-profile-sections .table-card-body .white-bg td.d-flex {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding-left: 0 !important;
}

.company-profile-sections .table-card-body .white-bg td.d-flex .formvalue {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.company-profile-sections .table-card-body .white-bg .text-muted ul {
    line-height: 1.45;
    padding-left: 18px;
    margin-bottom: 0;
}

.company-profile-sections .company-profile-form-table td {
    width: 25%;
    vertical-align: top;
    border-top: none !important;
    border-bottom: none !important;
}

.company-profile-sections .company-profile-form-table {
    border: none !important;
}

/* Company custom-field multi-selects: do not clip the absolute .itm panel (table-responsive did),
   and restore a normal dropdown max-height — global layout.css sets height:auto !important and
   overflow-y:scroll on .visible .itm, which paints a forced scrollbar even for 3 options. */
.company-profile-sections .company-profile-custom-fields {
    overflow: visible;
    position: relative;
    z-index: 2;
}

.company-profile-sections .company-profile-custom-fields .dropdown-check-list {
    max-width: 100%;
}

.company-profile-sections .company-profile-custom-fields .dropdown-check-list .anchor {
    overflow: hidden;
}

.company-profile-sections .company-profile-custom-fields .dropdown-check-list.visible .itm {
    max-height: 220px !important;
    height: auto !important;
    overflow-y: auto !important;
    z-index: 300;
}

/* Profile card multi-select (.visible): .table-card-body overflow:hidden clips the absolute
   .itm panel; the next .table-card sibling paints on top. Mirror tables.css #leadStageList.open. */
.company-profile-sections .table-card:has(.company-profile-custom-fields .dropdown-check-list.visible) {
    position: relative;
    z-index: calc(var(--table-card-z-header-elevated, 5) + 1);
}

.company-profile-sections .table-card:has(.company-profile-custom-fields .dropdown-check-list.visible) .table-card-body {
    overflow: visible !important;
    overflow-clip-margin: unset;
    z-index: calc(var(--table-card-z-header-elevated, 5) + 1);
}

.company-profile-sections .table-card:has(.company-profile-custom-fields .dropdown-check-list.visible) .table-card-body > .white-bg {
    overflow: visible;
}

.company-profile-sections .company-profile-custom-fields:has(.dropdown-check-list.visible) {
    z-index: calc(var(--table-card-z-header-elevated, 5) + 2);
}

.company-profile-logo-preview-image {
    max-width: 100%;
    overflow: hidden;
}

.company-profile-logo-preview-image img,
.company-profile-logo-preview-image canvas {
    display: block;
    max-width: 100%;
    max-height: 75px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Account Contacts: pin row action icons to the card's right inset (12px). */
.company-profile-sections #company-account-contacts-table {
    table-layout: fixed;
    width: 100%;
}

/* Smaller screens: horizontal-scroll safety net so the columns never crush the
   Roles text into the action icons (the table stacks into cards below 768px). */
.company-profile-sections .account-contacts-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 768px) {
    /* Explicit column widths so the fixed layout reserves room for every column
       (Name / Email / Phone / Roles) and always leaves the actions column clear. */
    .company-profile-sections #company-account-contacts-table {
        min-width: 720px;
    }

    .company-profile-sections #company-account-contacts-table th:nth-child(1),
    .company-profile-sections #company-account-contacts-table td:nth-child(1) {
        width: 23%;
    }

    .company-profile-sections #company-account-contacts-table th:nth-child(2),
    .company-profile-sections #company-account-contacts-table td:nth-child(2) {
        width: 28%;
    }

    .company-profile-sections #company-account-contacts-table th:nth-child(3),
    .company-profile-sections #company-account-contacts-table td:nth-child(3) {
        width: 17%;
    }

    .company-profile-sections #company-account-contacts-table th:nth-child(4),
    .company-profile-sections #company-account-contacts-table td:nth-child(4) {
        width: 26%;
    }
}

.company-profile-sections #company-account-contacts-table .account-contact-roles-col {
    white-space: normal !important;
    word-break: break-word;
    overflow: hidden !important;
}

.company-profile-sections #company-account-contacts-table .account-contact-roles {
    line-height: 1.45;
}

.company-profile-sections #company-account-contacts-table .account-contact-roles__line + .account-contact-roles__line {
    margin-top: 2px;
}

.company-profile-sections #company-account-contacts-table th.row-actions,
.company-profile-sections #company-account-contacts-table td.row-actions {
    width: 1% !important;
    min-width: 72px;
    max-width: 88px;
    white-space: nowrap;
    padding-right: 12px !important;
    padding-left: 8px !important;
    text-align: right;
    vertical-align: middle;
}

.company-profile-sections #company-account-contacts-table td.row-actions .icon-button {
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 0;
}

.company-profile-sections #company-account-contacts-table td.row-actions .icon-button .btn.ml-2 {
    margin-left: 0 !important;
}

@media (max-width: 767px) {
    .company-profile-sections #company-account-contacts-table td.row-actions {
        justify-content: flex-end !important;
        padding-right: 12px !important;
    }

    .company-profile-sections #company-account-contacts-table td.row-actions .icon-button {
        justify-content: flex-end !important;
        gap: 8px !important;
        width: auto !important;
        margin-left: auto;
    }
}

/* Event Summary / table-card toolbar: outline icon buttons (same border chrome as Customer list .table-card-outline-btn) */
.event-section .table-card-header-actions .button,
.table-card-header-actions .button {
    background: transparent !important;
    color: var(--buttonicon);
    border: 1px solid var(--Outline) !important;
    border: 1px solid color-mix(in srgb, var(--buttonbordercolor) 72%, var(--Heading) 28%) !important;
    border-radius: 8px !important;
    box-sizing: border-box;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    /* Icon-only: whitespace between <button> and <svg> becomes a flex item and pins the icon top-left */
    line-height: 0;
    font-size: 0;
}

/* POS order Items toolbar carries labelled buttons (Refund Items, Undo Complete Status, Save),
   so the icon-only sizing above (36×36, font-size: 0) has to be undone or the labels vanish. */
.pos-order-items-card .table-card-header-actions .button {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    white-space: nowrap;
    flex-shrink: 0;
    background: var(--buttonprimarybackground) !important;
    border: 1px solid var(--buttonbordercolor) !important;
    color: var(--buttonprimarytext);
}

    .pos-order-items-card .table-card-header-actions .button:hover {
        background: var(--WhiteButtonTextColor) !important;
        border-color: var(--buttonbordercolor) !important;
        color: var(--Heading) !important;
    }

.pos-order-items-card .table-card-header-actions .button-secondary-light {
    white-space: nowrap;
    flex-shrink: 0;
}

    /* Icon toolbar: grid centers the SVG box in the 36×36 hit target; flex+absolute was flaky across browsers */
    .event-section .table-card-header-actions .event-summary-toolbar-icon-btn,
    .table-card-header-actions .event-summary-toolbar-icon-btn {
        display: grid !important;
        place-content: center;
        place-items: center;
        padding: 0 !important;
    }

    .event-section .table-card-header-actions .button:hover,
    .table-card-header-actions .button:hover {
        background: var(--Surface-2) !important;
        border-color: var(--Outline) !important;
        border-color: color-mix(in srgb, var(--buttonbordercolor) 55%, var(--Heading) 45%) !important;
        color: var(--buttonicon) !important;
    }

    .event-section .table-card-header-actions .button svg,
    .table-card-header-actions .button svg {
        fill: var(--buttonicon) !important;
        stroke: var(--buttonicon) !important;
        display: block;
        flex-shrink: 0;
        overflow: visible;
    }

    /* Remove: same SVG as Product list row — stroke-only; do not apply svg { fill } from rule above or paths read as solid */
    .event-section .table-card-header-actions .event-summary-toolbar-icon-btn:not(.event-summary-toolbar-icon-btn--save) svg,
    .table-card-header-actions .event-summary-toolbar-icon-btn:not(.event-summary-toolbar-icon-btn--save) svg {
        fill: none !important;
    }

    .event-section .table-card-header-actions .event-summary-toolbar-icon-btn:not(.event-summary-toolbar-icon-btn--save) svg path,
    .event-section .table-card-header-actions .event-summary-toolbar-icon-btn:not(.event-summary-toolbar-icon-btn--save) svg rect,
    .table-card-header-actions .event-summary-toolbar-icon-btn:not(.event-summary-toolbar-icon-btn--save) svg path,
    .table-card-header-actions .event-summary-toolbar-icon-btn:not(.event-summary-toolbar-icon-btn--save) svg rect {
        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 1 !important;
    }

    /* Save: fill-only floppy disk — drop stroke so global svg { stroke } does not thicken lines */
    .event-section .table-card-header-actions .event-summary-toolbar-icon-btn--save svg path,
    .table-card-header-actions .event-summary-toolbar-icon-btn--save svg path {
        stroke: none !important;
    }

/*
 * Event module tablet / iPad (<1500px): inner event tab rail becomes a horizontal strip above content.
 * Primary nav stays visible until 1200px (see max-width: 1199px block below).
 */
@media (max-width: 1499px) {
    .event-section .form-1400 > .d-flex,
    .event-section .form-1400 > .d-md-flex,
    .event-section .form-1000 > .d-flex,
    .event-section .form-1000 > .d-md-flex,
    .event-section .form-1200 > .d-flex,
    .event-section .form-1200 > .d-md-flex,
    .event-section .event-list-page-shell > .d-flex,
    .event-section .event-list-page-shell > .d-md-flex,
    .event-section .d-flex:has(> .tabbar.tabbar-inner-nav.events-inner-nav),
    .event-section .d-md-flex:has(> .tabbar.tabbar-inner-nav.events-inner-nav) {
        display: block !important;
    }

    .event-section .sidebar-table-content {
        width: 100% !important;
        padding-left: 0 !important;
        margin-top: 0 !important;
    }

    .event-section .tabbar.white-bg.tabbar-inner-nav {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-self: stretch;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        flex: 1 1 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        margin-bottom: 0 !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    /* Events / Event Templates sub-nav: sit flush on top of the list card (no gray gap). */
    .event-section .tabbar.tabbar-inner-nav.events-inner-nav {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-bottom: none;
    }

    .event-section .event-list-page-shell .sidebar-table-content > .form-1000 > .table-card:first-child {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        margin-top: 0;
    }

    .event-section .form-1400 > .d-flex > .tabbar.white-bg.tabbar-inner-nav:first-child,
    .event-section .form-1400 > .d-md-flex > .tabbar.white-bg.tabbar-inner-nav:first-child,
    .event-section .form-1000 > .d-flex > .tabbar.white-bg.tabbar-inner-nav:first-child,
    .event-section .form-1000 > .d-md-flex > .tabbar.white-bg.tabbar-inner-nav:first-child,
    .event-section .form-1200 > .d-flex > .tabbar.white-bg.tabbar-inner-nav:first-child,
    .event-section .form-1200 > .d-md-flex > .tabbar.white-bg.tabbar-inner-nav:first-child,
    .event-section .event-list-page-shell > .d-flex > .tabbar.white-bg.tabbar-inner-nav:first-child,
    .event-section .event-list-page-shell > .d-md-flex > .tabbar.white-bg.tabbar-inner-nav:first-child {
        flex: 1 1 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }

    .event-section .tabbar.tabbar-inner-nav .tabbar-nav-section-label {
        display: none !important;
    }

    .event-section .tabbar.tabbar-inner-nav .onethird.activetab,
    .event-section .tabbar.tabbar-inner-nav .onethird.inactivetab {
        width: auto;
        max-width: none;
        flex: 0 0 auto;
        align-self: center;
        min-width: max-content;
        white-space: nowrap;
    }

    /* Inner nav / sub-nav strip stacks above list content; lift the content pane while a row or header menu is open. */
    .event-section .sidebar-table-content:has(.dropdown-menu.show) {
        position: relative;
        z-index: 50;
    }
}

/*
 * Revenue Reports inner nav: same behavior as the Event inner nav above.
 * Below 1500px the left rail (RevenueReportsMenu, .revenue-reports-inner-nav) collapses to a
 * horizontal, swipeable top strip and the report content goes full width. Scoped to the menu's
 * own class so it applies to every Revenue Reports page (and the other hosts of this menu)
 * without per-page markup changes.
 */
@media (max-width: 1499px) {
    .d-md-flex:has(> .tabbar.tabbar-inner-nav.revenue-reports-inner-nav) {
        display: block !important;
    }

    .d-md-flex:has(> .tabbar.tabbar-inner-nav.revenue-reports-inner-nav) > .sidebar-table-content {
        width: 100%;
        padding-left: 0 !important;
    }

    .tabbar.white-bg.tabbar-inner-nav.revenue-reports-inner-nav {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-self: stretch;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        flex: 1 1 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        margin-bottom: 16px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .tabbar.tabbar-inner-nav.revenue-reports-inner-nav .tabbar-nav-section-label {
        display: none !important;
    }

    .tabbar.tabbar-inner-nav.revenue-reports-inner-nav .onethird.activetab,
    .tabbar.tabbar-inner-nav.revenue-reports-inner-nav .onethird.inactivetab {
        width: auto;
        max-width: none;
        flex: 0 0 auto;
        align-self: center;
        min-width: max-content;
        white-space: nowrap;
    }

    /*
     * Revenue Dashboard uses metrics-layout-root (grid col-md-3) instead of d-md-flex;
     * without this, Bootstrap keeps the nav column at ~25% width below 1500px.
     */
    .metrics-layout-root .dashboard-card.row > .col-md-3:first-child,
    .metrics-layout-root .dashboard-card.row > .col-md-4,
    .metrics-layout-root .dashboard-card.row > .col-md-5,
    .metrics-layout-root .dashboard-card.row > .dashboard-topbar {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/*
 * Contacts inner nav: same behavior as the Event / Revenue Reports inner nav above.
 * Below 1500px the left rail (contacts-inner-nav) collapses to a horizontal, swipeable top
 * strip above the contact list, and the list goes full width. Scoped to the nav's own class
 * (via :has on the d-md-flex wrapper) so no per-page markup change is needed beyond the class.
 */
@media (max-width: 1499px) {
    .d-md-flex:has(> .tabbar.tabbar-inner-nav.contacts-inner-nav) {
        display: block !important;
    }

    .d-md-flex:has(> .tabbar.tabbar-inner-nav.contacts-inner-nav) > .sidebar-table-content {
        width: 100%;
        padding-left: 0 !important;
    }

    .tabbar.white-bg.tabbar-inner-nav.contacts-inner-nav {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-self: stretch;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        flex: 1 1 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        margin-bottom: 16px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .tabbar.tabbar-inner-nav.contacts-inner-nav .tabbar-nav-section-label {
        display: none !important;
    }

    .tabbar.tabbar-inner-nav.contacts-inner-nav .onethird.activetab,
    .tabbar.tabbar-inner-nav.contacts-inner-nav .onethird.inactivetab {
        width: auto;
        max-width: none;
        flex: 0 0 auto;
        align-self: center;
        min-width: max-content;
        white-space: nowrap;
    }
}

/*
 * Communications inner nav (Broadcasts, Campaigns, Templates, Email Branding, Video):
 * same behavior as Contacts / Revenue Reports / Quotes. Below 1500px the left rail
 * (CommunicationMenu, .communications-inner-nav) collapses to a horizontal, swipeable strip
 * at the top and the content goes full width. Most Communications pages wrap the menu in a
 * plain .d-flex rather than .d-md-flex, so both wrappers are covered - a .d-flex stays
 * side-by-side at every width on its own and is what left the rail squeezed on tablets.
 */
@media (max-width: 1499px) {
    .d-flex:has(> .tabbar.tabbar-inner-nav.communications-inner-nav),
    .d-md-flex:has(> .tabbar.tabbar-inner-nav.communications-inner-nav) {
        display: block !important;
    }

    .d-flex:has(> .tabbar.tabbar-inner-nav.communications-inner-nav) > .sidebar-table-content,
    .d-md-flex:has(> .tabbar.tabbar-inner-nav.communications-inner-nav) > .sidebar-table-content {
        width: 100%;
        padding-left: 0 !important;
    }

    .tabbar.white-bg.tabbar-inner-nav.communications-inner-nav {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-self: stretch;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        flex: 1 1 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        margin-bottom: 16px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .tabbar.tabbar-inner-nav.communications-inner-nav .tabbar-nav-section-label {
        display: none !important;
    }

    .tabbar.tabbar-inner-nav.communications-inner-nav .onethird.activetab,
    .tabbar.tabbar-inner-nav.communications-inner-nav .onethird.inactivetab {
        width: auto;
        max-width: none;
        flex: 0 0 auto;
        align-self: center;
        min-width: max-content;
        white-space: nowrap;
    }
}

/*
 * Quotes inner nav: same behavior as Contacts / Revenue Reports / customer profile.
 * Below 1500px the left rail (QuotesMenu, .quotes-inner-nav) collapses to a horizontal,
 * swipeable top strip and the quotes content goes full width. Covers both the d-md-flex
 * pages (ViewQuote, Templates, ViewTemplate) and the crm-metrics-layout-root list.
 */
@media (max-width: 1499px) {
    .d-flex:has(> .tabbar.tabbar-inner-nav.quotes-inner-nav),
    .d-md-flex:has(> .tabbar.tabbar-inner-nav.quotes-inner-nav) {
        display: block !important;
    }

    .d-flex:has(> .tabbar.tabbar-inner-nav.quotes-inner-nav) > .sidebar-table-content,
    .d-md-flex:has(> .tabbar.tabbar-inner-nav.quotes-inner-nav) > .sidebar-table-content {
        width: 100%;
        padding-left: 0 !important;
    }

    /*
     * Quotes list uses crm-metrics-layout-root (grid col-md-3) instead of d-md-flex;
     * without this, the 768px+ grid keeps the nav column at ~220px below 1500px.
     */
    .crm-metrics-layout-root:has(.quotes-inner-nav) .dashboard-card.row {
        display: block !important;
        grid-template-columns: none !important;
    }

    .crm-metrics-layout-root:has(.quotes-inner-nav) .dashboard-card.row > .col-md-3:first-child,
    .crm-metrics-layout-root:has(.quotes-inner-nav) .dashboard-card.row > .col-md-9 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        grid-column: auto !important;
        grid-row: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .tabbar.white-bg.tabbar-inner-nav.quotes-inner-nav {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-self: stretch;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        flex: 1 1 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        margin-bottom: 16px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .tabbar.tabbar-inner-nav.quotes-inner-nav .onethird.activetab,
    .tabbar.tabbar-inner-nav.quotes-inner-nav .onethird.inactivetab {
        width: auto;
        max-width: none;
        flex: 0 0 auto;
        align-self: center;
        min-width: max-content;
        white-space: nowrap;
    }

    /* Horizontal strip: chevron is desktop-rail affordance; hide so it does not inflate tabs. */
    .tabbar.tabbar-inner-nav.quotes-inner-nav .icon-arrow {
        display: none !important;
    }
}

/*
 * Event module (<1200px): primary nav moves behind hamburger top bar; content goes full width.
 */
@media (max-width: 1199px) {
    body:has(#partialview.event-section) .widedesktop {
        display: block !important;
    }

    body:has(#partialview.event-section) .wrapper .sidebar {
        transform: translateX(-100%);
        top: 0;
        z-index: 1021;
        height: 100vh;
        max-height: 100vh;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    body:has(#partialview.event-section) .wrapper.collapseSideBar .sidebar {
        transform: translateX(0);
    }

    body:has(#partialview.event-section) .wrapper .main-Content {
        width: 100%;
        margin-left: 0;
    }

    body:has(#partialview.event-section).open-menu {
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        right: 0;
    }

    body:has(#partialview.event-section) .open-menu .mobile-overlay {
        background: rgb(0 0 0 / 52%);
        position: fixed;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    body:has(#partialview.event-section) .open-menu .wrapper .top_navbar .hamburger div:first-child {
        transform: rotate(45deg);
        position: absolute;
    }

    body:has(#partialview.event-section) .open-menu .wrapper .top_navbar .hamburger div:last-child {
        transform: rotate(-45deg);
        position: absolute;
    }

    body:has(#partialview.event-section) .open-menu .wrapper .top_navbar .hamburger div:nth-child(2) {
        display: none;
    }
}

/*
 * Customer profile inner nav tablet / iPad (768px–1499px): the shared customer-profile tab rail
 * (Sections/Tabs.cshtml + the inlined copy on Edit Quote, both marked .customer-profile-inner-nav)
 * becomes a horizontal, swipeable strip above the content and the content pane goes full width.
 * Same recipe as the Event / Revenue Reports inner-nav blocks above. Applies through phone widths
 * so Edit Quote / View Quote cannot keep a leftover left rail beside the quote card.
 * Primary nav stays visible until 1200px (see the max-width: 1199px block below).
 */
@media (max-width: 1499px) {
    .d-flex:has(> .tabbar.tabbar-inner-nav.customer-profile-inner-nav),
    .d-md-flex:has(> .tabbar.tabbar-inner-nav.customer-profile-inner-nav) {
        display: block !important;
        min-width: 0;
        max-width: 100%;
        overflow-x: visible;
    }

    .d-flex:has(> .tabbar.tabbar-inner-nav.customer-profile-inner-nav) > .sidebar-table-content,
    .d-md-flex:has(> .tabbar.tabbar-inner-nav.customer-profile-inner-nav) > .sidebar-table-content {
        width: 100% !important;
        padding-left: 0 !important;
        margin-top: 0 !important;
    }

    .tabbar.white-bg.tabbar-inner-nav.customer-profile-inner-nav {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-self: stretch;
        width: 100% !important;
        max-width: 100% !important;
        /* min-width:0 lets the strip stay viewport-width so overflow-x scrolls (not expand with tabs). */
        min-width: 0 !important;
        flex: 0 0 auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        /* Trailing space so the last tab clears the right edge instead of clipping under the scrollbar. */
        padding-right: 16px;
        margin-bottom: 16px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        touch-action: pan-x pan-y;
    }

    .tabbar.tabbar-inner-nav.customer-profile-inner-nav .tabbar-nav-section-label {
        display: none !important;
    }

    .tabbar.tabbar-inner-nav.customer-profile-inner-nav .onethird.activetab,
    .tabbar.tabbar-inner-nav.customer-profile-inner-nav .onethird.inactivetab {
        width: auto;
        max-width: none;
        flex: 0 0 auto;
        align-self: center;
        /* Size each tab to its label (was a forced 200px min, which pushed the last tab off-screen). */
        min-width: max-content;
        white-space: nowrap;
    }

    /* Strip stacks above list content; lift the content pane while a row or header menu is open. */
    .d-flex:has(> .tabbar.tabbar-inner-nav.customer-profile-inner-nav) > .sidebar-table-content:has(.dropdown-menu.show),
    .d-md-flex:has(> .tabbar.tabbar-inner-nav.customer-profile-inner-nav) > .sidebar-table-content:has(.dropdown-menu.show) {
        position: relative;
        z-index: 50;
    }
}

/*
 * Customer profile (<1200px): primary nav moves behind the hamburger top bar; content full width.
 * Mirrors the Event module block above, scoped via the .customer-profile-inner-nav marker so it
 * applies to every customer-profile tab (Dashboard, Contacts, Orders, Edit Quote, Edit Invoice, ...).
 */
@media (max-width: 1199px) {
    body:has(.tabbar.tabbar-inner-nav.customer-profile-inner-nav) .widedesktop {
        display: block !important;
    }

    body:has(.tabbar.tabbar-inner-nav.customer-profile-inner-nav) .wrapper .sidebar {
        transform: translateX(-100%);
        top: 0;
        z-index: 1021;
        height: 100vh;
        max-height: 100vh;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    body:has(.tabbar.tabbar-inner-nav.customer-profile-inner-nav) .wrapper.collapseSideBar .sidebar {
        transform: translateX(0);
    }

    body:has(.tabbar.tabbar-inner-nav.customer-profile-inner-nav) .wrapper .main-Content {
        width: 100%;
        margin-left: 0;
    }

    body:has(.tabbar.tabbar-inner-nav.customer-profile-inner-nav).open-menu {
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        right: 0;
    }

    body:has(.tabbar.tabbar-inner-nav.customer-profile-inner-nav) .open-menu .mobile-overlay {
        background: rgb(0 0 0 / 52%);
        position: fixed;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    body:has(.tabbar.tabbar-inner-nav.customer-profile-inner-nav) .open-menu .wrapper .top_navbar .hamburger div:first-child {
        transform: rotate(45deg);
        position: absolute;
    }

    body:has(.tabbar.tabbar-inner-nav.customer-profile-inner-nav) .open-menu .wrapper .top_navbar .hamburger div:last-child {
        transform: rotate(-45deg);
        position: absolute;
    }

    body:has(.tabbar.tabbar-inner-nav.customer-profile-inner-nav) .open-menu .wrapper .top_navbar .hamburger div:nth-child(2) {
        display: none;
    }
}

/* Contact edit — embedded events table (same chrome + title case as Event list app-card) */
.contact-page-form .contact-edit-events-panel.app-card > .sectionheader {
    text-transform: none;
}

.contact-page-form .contact-edit-events-panel .tablestyle th,
.contact-page-form .contact-edit-events-panel .tablestyle th .buttonaslink {
    text-transform: none;
}

/* Event Create: bordered panel like intake */
.event-form-shell {
    padding: 12px 12px 28px;
    box-sizing: border-box;
    max-width: 100%;
}

    .event-form-shell .white-bg {
        border: 1px solid var(--Outline);
        border-radius: 8px;
        overflow: hidden;
        background-color: #ffffff;
        box-shadow: 0px 8px 24px 0px rgba(51, 48, 48, 0.102);
        margin-bottom: 0;
        z-index: 0;
        color: var(--Heading);
    }

    .event-form-shell .white-bg > .sectionheader,
    .event-form-shell .app-card > .sectionheader {
        border-bottom: 1px solid var(--Outline);
    }

    .event-form-shell .white-bg > .sectionheader {
        min-height: 56px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
    }

    .event-form-shell .white-bg > .sectionheader span {
        margin-top: 0 !important;
    }

    .event-form-shell .white-bg > .input-form {
        padding: 20px 24px 28px;
    }

    .event-form-shell .event-builder-shell {
        padding: 0 0 8px;
    }

/* =============================================================================
   Revenue reports shared shell — Invoices list + Invoice Items report
   (classes: revenuereport-*)
   ============================================================================= */

.button.revenuereport-add-invoice {
    color: #fff;
    transition: color .12s ease;
}

    .button.revenuereport-add-invoice:hover {
        color: #000;
    }

.revenuereport-list-card button.button,
.revenuereport-list-card button.button-primary,
.revenuereport-list-card a.button-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    line-height: 1;
    font-size: 18px;
    text-decoration: none;
}

    .revenuereport-list-card button.button svg,
    .revenuereport-list-card button.button-primary svg,
    .revenuereport-list-card a.button-primary svg {
        display: inline-block;
        flex: 0 0 auto;
    }

.revenuereport-page-header-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
}

.revenuereport-page-header-left .revenuereport-section-header-title {
    font-size: 16px;
    font-weight: 600;
    color: #1e2a3b;
    line-height: 1.2;
}

.revenuereport-page-header--mobile .revenuereport-page-header-mobile-inner {
    width: 100%;
}

@media (max-width: 768px) {
    .revenuereport-page-header--mobile .revenuereport-mobile-top {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .revenuereport-page-header--mobile .revenuereport-mobile-top .revenuereport-select-wrap {
            flex: 1 1 auto;
            min-width: 0;
        }
}

.revenuereport-tab-select {
    height: 36px;
    padding: 6px 12px;
    border: 1px solid #e5e5e5;
    border-radius: 18px;
    background: #fff;
    font-weight: 600;
    font-size: 13px;
    outline: none;
    width: 100%;
}

.revenuereport-empty-wrap {
    width: 100%;
    background: #ffffff;
    border-radius: 8px;
    padding: 30px 12px 40px;
}

.revenuereport-empty-wrap--invoices-empty .revenuereport-empty-icon {
    margin-bottom: 5px; /* Billing Invoices empty state only */
}

.revenuereport-empty-state {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.revenuereport-empty-title {
    font-weight: 800;
    font-size: 28px;
    line-height: 1.2;
    margin: 8px 0 10px;
    color: #0f172a;
}

.revenuereport-empty-help {
    margin: 0 auto 18px;
    font-size: 14px;
    color: #64748b;
    line-height: 1.5;
    max-width: 560px;
}

@media (max-width: 768px) {
    .revenuereport-empty-wrap {
        padding: 40px 12px 60px;
    }

    .revenuereport-empty-title {
        font-size: 24px;
    }
}

/* Compact empty state (e.g. Revenue by Package subsection tables) — ~half height of default */
.revenuereport-empty-wrap.revenuereport-empty-wrap--compact {
    padding: 15px 12px 20px;
}

    .revenuereport-empty-wrap--compact .revenuereport-empty-state {
        max-width: 360px;
    }

    .revenuereport-empty-wrap--compact .revenuereport-empty-title {
        font-size: 14px !important;
        font-weight: 700;
        margin: 4px 0 6px;
    }

    .revenuereport-empty-wrap--compact .revenuereport-empty-help {
        font-size: 11px !important;
        margin: 0 auto 8px;
    }

    .revenuereport-empty-wrap--compact .revenuereport-empty-icon {
        max-width: 160px;
        margin-bottom: 10px;
    }

        .revenuereport-empty-wrap--compact .revenuereport-empty-icon::after {
            width: 110px;
            height: 27px;
        }

        .revenuereport-empty-wrap--compact .revenuereport-empty-icon img {
            max-width: 154px;
            max-height: 120px;
        }

@media (max-width: 768px) {
    .revenuereport-empty-wrap.revenuereport-empty-wrap--compact {
        padding: 20px 12px 30px;
    }

    .revenuereport-empty-wrap--compact .revenuereport-empty-title {
        font-size: 13px !important;
    }

    .revenuereport-empty-wrap--compact .revenuereport-empty-icon {
        max-width: 130px;
    }

        .revenuereport-empty-wrap--compact .revenuereport-empty-icon::after {
            width: 100px;
            height: 24px;
        }

        .revenuereport-empty-wrap--compact .revenuereport-empty-icon img {
            max-width: 100px;
            max-height: 80px;
        }
}

.revenuereport-tabs.tabs-controls {
    background: transparent !important;
    box-shadow: none !important;
}

/* Pills: border on inactive; title case (overrides global tabs-controls uppercase) */
.revenuereport-list-card .table-card-header .revenuereport-tabs.tabs-controls {
    padding: 0 !important;
    margin-bottom: 0 !important;
    gap: 8px;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
}

.revenuereport-list-card .table-card-header .revenuereport-tabs .nav-link {
    text-transform: none !important;
    letter-spacing: normal !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 6px 14px !important;
    line-height: 1.2 !important;
}

.revenuereport-list-card .table-card-header .revenuereport-tabs .nav-link:not(.active) {
    border: 1px solid #94a0b0 !important;
    background: #fff !important;
    color: #1e2a3b !important;
    box-shadow: none !important;
}

.revenuereport-list-card .table-card-header .revenuereport-tabs .nav-link:not(.active):hover {
    border-color: #7d8a9c !important;
    background: #f8fafc !important;
    color: #1e2a3b !important;
}

.revenuereport-list-card .table-card-header .revenuereport-tabs .nav-link.active {
    border: 1px solid #1e2a3b !important;
    background: #1e2a3b !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

.revenuereport-list-card .table-card-header-actions .buttons .btn-group.icon-button .btn.dropdown-toggle,
.revenuereport-list-card .table-card-header-actions .buttons button:not(.dropdown-item),
.revenuereport-list-card .table-card-header-actions .dropdown .btn {
    background: #f1f3f7 !important;
    border: 1px solid #94a0b0 !important;
    padding: 6px 14px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer;
    color: #1e2a3b !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin: 0 !important;
    box-shadow: none !important;
    line-height: 1.2 !important;
}

.revenuereport-list-card .table-card-header-actions .buttons .btn-group.icon-button .btn.dropdown-toggle:hover,
.revenuereport-list-card .table-card-header-actions .buttons button:not(.dropdown-item):hover,
.revenuereport-list-card .table-card-header-actions .dropdown .btn:hover {
    border-color: #7d8a9c !important;
    background: #e6eaf0 !important;
    color: #1e2a3b !important;
}

.revenuereport-list-card .table-card-header-actions .buttons .btn-group.icon-button .btn.dropdown-toggle:focus,
.revenuereport-list-card .table-card-header-actions .buttons button:not(.dropdown-item):focus,
.revenuereport-list-card .table-card-header-actions .dropdown .btn:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
}

.revenuereport-list-card .table-card-header-actions .buttons .btn-group.icon-button {
    display: inline-flex;
    vertical-align: middle;
}

.revenuereport-list-card .table-card-header-actions .buttons button:not(.dropdown-item) svg path {
    stroke: currentColor;
}

.revenuereport-list-card .table-card-header-actions .dropdown.btn-filter-drop .btn {
    padding: 6px 10px !important;
}

/* The Search (Apply Filters) button inside the header filter dropdown stays a solid
   primary button — the gray header-button rules above would otherwise flatten it. */
.revenuereport-list-card .table-card-header-actions .dropdown .btn.btn-theme.button-primary,
.revenuereport-list-card .table-card-header.revenuereport-page-header--mobile .dropdown .btn.btn-theme.button-primary {
    background: var(--buttonprimarybackground) !important;
    border-color: var(--buttonprimarybackground) !important;
    color: var(--buttonprimarytext) !important;
}

.revenuereport-list-card .table-card-header-actions .dropdown .btn.btn-theme.button-primary:hover,
.revenuereport-list-card .table-card-header.revenuereport-page-header--mobile .dropdown .btn.btn-theme.button-primary:hover {
    filter: brightness(0.92);
}

/* Filter funnel icon — match Invoices list (light #989998), not header text / outline-btn color */
.revenuereport-list-card .dropdown.btn-filter-drop .btn svg path[fill]:not([fill="none"]) {
    fill: #989998 !important;
    stroke: none !important;
}

.revenuereport-list-card .table-card-header.revenuereport-page-header--mobile .buttons .btn-group.icon-button .btn.dropdown-toggle,
.revenuereport-list-card .table-card-header.revenuereport-page-header--mobile .buttons button:not(.dropdown-item),
.revenuereport-list-card .table-card-header.revenuereport-page-header--mobile .dropdown .btn {
    background: #f1f3f7 !important;
    border: 1px solid #94a0b0 !important;
    padding: 6px 14px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer;
    color: #1e2a3b !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin: 0 !important;
    box-shadow: none !important;
    line-height: 1.2 !important;
}

.revenuereport-list-card .table-card-header.revenuereport-page-header--mobile .buttons .btn-group.icon-button .btn.dropdown-toggle:hover,
.revenuereport-list-card .table-card-header.revenuereport-page-header--mobile .buttons button:not(.dropdown-item):hover,
.revenuereport-list-card .table-card-header.revenuereport-page-header--mobile .dropdown .btn:hover {
    border-color: #7d8a9c !important;
    background: #e6eaf0 !important;
    color: #1e2a3b !important;
}

.revenuereport-list-card .table-card-header.revenuereport-page-header--mobile .buttons .btn-group.icon-button .btn.dropdown-toggle:focus,
.revenuereport-list-card .table-card-header.revenuereport-page-header--mobile .buttons button:not(.dropdown-item):focus,
.revenuereport-list-card .table-card-header.revenuereport-page-header--mobile .dropdown .btn:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
}

.revenuereport-list-card .table-card-header.revenuereport-page-header--mobile .buttons .btn-group.icon-button {
    display: inline-flex;
    vertical-align: middle;
}

.revenuereport-list-card .table-card-header.revenuereport-page-header--mobile .buttons button:not(.dropdown-item) svg path {
    stroke: currentColor;
}

.revenuereport-list-card .table-card-header.revenuereport-page-header--mobile .dropdown.btn-filter-drop .btn {
    padding: 6px 10px !important;
}

.revenuereport-list-card.table-card {
    border: 1px solid #e3e6ea;
    border-radius: 12px;
    margin-bottom: 0;
}

.revenuereport-list-card .table-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 20px;
    background: #f0f2f6;
    border-bottom: 1px solid #e3e6ea;
}

.revenuereport-list-card .table-card-header-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

    .revenuereport-list-card .table-card-header-actions .buttons {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
    }

.revenuereport-summary-panel {
    padding: 12px 20px 14px;
    background: #eef1f5;
    border-bottom: 1px solid #e3e6ea;
}

    .revenuereport-summary-panel .summary-bar {
        margin-bottom: 0;
    }

    .revenuereport-summary-panel .summary-card {
        padding: 10px 14px 8px;
        border-radius: 10px;
    }

    .revenuereport-summary-panel .summary-label {
        text-transform: none;
        letter-spacing: normal;
        font-weight: 600;
        margin-bottom: 2px;
    }

    .revenuereport-summary-panel .summary-value {
        font-size: 1.05rem;
        line-height: 1.2;
    }

.revenuereport-list-card .table-card-body {
    padding: 0;
}

/* Inner sections (e.g. Revenue by Package: Packages Sold / Package Items Sold) */
.revenuereport-list-card .table-card-body .revenuereport-subsection + .revenuereport-subsection {
    border-top: 1px solid #e3e6ea;
}

.revenuereport-subsection-header {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    background: #f0f2f6;
    border-bottom: 1px solid #e3e6ea;
}

.revenuereport-subsection-title {
    font-size: 16px;
    font-weight: 600;
    color: #1e2a3b;
    line-height: 1.2;
}

.revenuereport-list-card .table-card-body .revenuereport-subsection .white-bg {
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

    .revenuereport-list-card .table-card-body .white-bg {
        margin-bottom: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .revenuereport-list-card .table-card-body #revenuereport-list > input.search.form-control {
        margin-bottom: 0 !important;
        margin-top: 0 !important;
        border-radius: 0 !important;
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
    }

    .revenuereport-list-card .table-card-body .tablestyle {
        border-radius: 0 !important;
        margin-bottom: 0 !important;
    }

@media (max-width: 768px) {
    .revenuereport-list-card .table-card-header .dropdown-menu.filter-card-form {
        max-height: 80vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
}

/* Invoice Items report: filter dropdown host is moved by script */
#invoiceItemsFilterSingle {
    display: none;
}

@media (max-width: 768px) {
    #invoiceItemsFilterSingle .dropdown-menu.filter-card-form {
        max-height: 92vh !important;
        overflow-y: auto !important;
    }
}

/* ----- Invoices list: List.js table ----- */
#revenuereport-list .tablestyle thead.desktop.roundheader th {
    text-transform: none;
    letter-spacing: normal;
    font-size: 15px;
    font-weight: 600;
    color: #1e2a3b;
    vertical-align: middle;
}

#revenuereport-list .tablestyle thead.desktop.roundheader th .sort.buttonaslink {
    text-transform: none;
    letter-spacing: normal;
    font-size: 15px;
    font-weight: 600;
    color: #1e2a3b;
    text-decoration: none !important;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}

    #revenuereport-list .tablestyle thead.desktop.roundheader th .sort.buttonaslink:hover {
        color: #0f172a;
    }

#revenuereport-list table td {
    position: relative;
}

#revenuereport-list table td .revenuereport-sort-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    user-select: none;
    -webkit-user-select: none;
}

.revenuereport-list-card .tablestyle th,
.revenuereport-list-card .tablestyle td,
.revenuereport-list-card .tablestyle .buttonaslink,
.revenuereport-list-card .tablestyle .secondary-text,
.revenuereport-list-card .tablestyle .invoice-items div,
.revenuereport-list-card .tablestyle .customer,
.revenuereport-list-card .tablestyle .payments,
.revenuereport-list-card .tablestyle .quickbooks-id {
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.revenuereport-list-card .tablestyle .amount,
.revenuereport-list-card .tablestyle .tax,
.revenuereport-list-card .tablestyle .service-fee,
.revenuereport-list-card .tablestyle .status {
    white-space: nowrap;
}

#revenuereport-list .revenuereport-total-cell {
    white-space: normal !important;
    vertical-align: top;
}

#revenuereport-list .revenuereport-total-breakdown > div {
    line-height: 1.4;
    font-size: inherit;
}

#revenuereport-list .revenuereport-total-breakdown .revenuereport-total-final {
    font-weight: 600;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid #e3e6ea;
}

#revenuereport-list .revenuereport-total-breakdown .revenuereport-total-final.revenuereport-total-final--solo {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

#revenuereport-list .tablestyle th.revenuereport-col-date,
#revenuereport-list .tablestyle td.revenuereport-col-date {
    width: 8%;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#revenuereport-list .tablestyle th.revenuereport-col-qbid,
#revenuereport-list .tablestyle td.revenuereport-col-qbid {
    width: 88px;
    min-width: 88px;
    max-width: 88px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Invoice list: halve the "#" column (was report-col-w-10 = 10%) and hand that
   freed space to the Payments column so it renders wider. */
#revenuereport-list .tablestyle th.report-col-w-10,
#revenuereport-list .tablestyle td.invoice-number {
    width: 7% !important;
}

#revenuereport-list .tablestyle th.revenuereport-col-payments,
#revenuereport-list .tablestyle td.payments {
    width: 15%;
}

.revenuereport-selected-row {
    background-color: #fff8dc !important;
    transition: background-color 0.3s ease;
}

.revenuereport-list-card .status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: white;
    font-size: 12px;
}

.revenuereport-list-card .paid { background-color: green; }
.revenuereport-list-card .declined { background-color: red; }
.revenuereport-list-card .refund { background-color: orange; }

/* ----- Invoice Items + Revenue by Category + Revenue by Customer + Revenue by Product: List.js sortable table ----- */
/* Shared markup: #revenuereport-list > table.revenuereport-sort-table (see partials). Customer/Product use --customer / --product for first-column width. */
#revenuereport-list table.revenuereport-sort-table.tablestyle thead tr.roundheader th {
    text-transform: none;
    letter-spacing: normal;
    font-size: 15px;
    font-weight: 600;
    color: #1e2a3b;
    vertical-align: middle;
}

#revenuereport-list table.revenuereport-sort-table.tablestyle thead tr.roundheader th .sort.buttonaslink {
    text-transform: none;
    letter-spacing: normal;
    font-size: 15px;
    font-weight: 600;
    color: #1e2a3b;
    text-decoration: none !important;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}

    #revenuereport-list table.revenuereport-sort-table.tablestyle thead tr.roundheader th .sort.buttonaslink:hover {
        color: #0f172a;
    }

#revenuereport-list table.revenuereport-sort-table td {
    position: relative;
}

#revenuereport-list table.revenuereport-sort-table td .revenuereport-sort-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    user-select: none;
    -webkit-user-select: none;
}

.revenuereport-account-number-copy-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#revenuereport-list .revenuereport-copy-btn,
#revenuereport-list .revenuereport-account-number-cell button.revenuereport-copy-btn,
.revenuereport-list-card .revenuereport-copy-btn,
.revenuereport-list-card .revenuereport-account-number-cell button.revenuereport-copy-btn,
.funding-transaction-detail-table .revenuereport-copy-btn,
.revenuereport-account-number-cell .revenuereport-copy-btn {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
    -webkit-appearance: none;
    appearance: none;
}

.revenuereport-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border: none !important;
    box-shadow: none !important;
    background: transparent;
    color: #989998;
    cursor: pointer;
    line-height: 0;
    border-radius: 4px;
    vertical-align: middle;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
}

.revenuereport-copy-btn:hover,
.revenuereport-copy-btn:focus,
.revenuereport-copy-btn:focus-visible {
    color: #333;
    background: #f0f0f0;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.revenuereport-copy-btn.is-copied {
    color: #2e7d32;
}

/* First column (names): native <button> centers label text; keep left-aligned for long values */
#revenuereport-list table.revenuereport-sort-table.tablestyle thead tr.roundheader th:first-child,
#revenuereport-list table.revenuereport-sort-table.tablestyle tbody td:first-child,
#revenuereport-list table.revenuereport-sort-table.tablestyle tfoot td:first-child {
    text-align: left !important;
}

#revenuereport-list table.revenuereport-sort-table.tablestyle thead tr.roundheader th:first-child .sort.buttonaslink {
    text-align: left;
    width: 100%;
}

#revenuereport-list table.revenuereport-sort-table.tablestyle tbody td:first-child .buttonaslink {
    text-align: left;
}

/* Revenue by Customer: wider first column (fixed-layout table was splitting columns evenly) */
@media (min-width: 768px) {
    #revenuereport-list table.revenuereport-sort-table.revenuereport-sort-table--customer.tablestyle thead tr.roundheader th:first-child,
    #revenuereport-list table.revenuereport-sort-table.revenuereport-sort-table--customer.tablestyle tbody td:first-child,
    #revenuereport-list table.revenuereport-sort-table.revenuereport-sort-table--customer.tablestyle tfoot td:first-child {
        width: 40%;
        min-width: 300px;
        max-width: 55%;
        box-sizing: border-box;
    }

    /* Revenue by Product: product name column */
    #revenuereport-list table.revenuereport-sort-table.revenuereport-sort-table--product.tablestyle thead tr.roundheader th:first-child,
    #revenuereport-list table.revenuereport-sort-table.revenuereport-sort-table--product.tablestyle tbody td:first-child,
    #revenuereport-list table.revenuereport-sort-table.revenuereport-sort-table--product.tablestyle tfoot td:first-child {
        width: 22%;
        min-width: 200px;
        max-width: 40%;
        box-sizing: border-box;
    }
}

/* Edit Campaign Message (/CampainMessage/Edit) — after generic .form-1200 padding shorthands */
.comm-campaign-edit-layout.form-1200 {
    background: var(--BodyBackground);
    min-height: calc(100vh - 61px);
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
}

.comm-campaign-edit-layout.form-1400 {
    background: var(--BodyBackground);
    min-height: calc(100vh - 61px);
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
}

.comm-campaign-edit-layout.form-1200 > .d-flex > .sidebar-table-content,
.comm-campaign-edit-layout.form-1200 > .d-md-flex > .sidebar-table-content {
    background: transparent !important;
    padding: 0 20px 20px 20px !important;
    box-sizing: border-box;
}

.comm-campaign-edit-layout .table-card-body .input-form.text-left {
    padding: 16px 20px 10px 20px;
}

.comm-campaign-edit-layout .comm-audit-note,
.comm-campaign-edit-layout .comm-audit-note div,
.comm-campaign-edit-layout .comm-audit-note span {
    font-size: 12px !important;
    line-height: 1.45 !important;
    color: #6b7280 !important;
    font-weight: 400 !important;
    text-align: left;
}

.comm-campaign-edit-layout .comm-audit-note {
    margin-top: 5px;
}

/* ===== Email preview "See more / See less" collapse =====
   Applied to the inner content card of every email preview card
   (Send Communication, System Communications, Campaign Message,
   Communication Template, and the sent-message confirmation screen).
   The .epc-root wrapper + toggle are injected by emailPreviewCollapse
   in JavaScriptFunctions.js when the email is taller than ~10 lines. */
.epc-root {
    position: relative;
}

.epc-content {
    transition: max-height 0.18s ease;
}

.epc-toggle-wrap {
    display: flex;
    justify-content: center;
    /* space between the end of the last visible row and the See more text */
    margin-top: 12px;
}

.epc-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 500;
    color: var(--Interactive-Default, #2E75B6);
}

    .epc-toggle:hover {
        text-decoration: underline;
    }

    .epc-toggle .epc-caret {
        flex-shrink: 0;
        transition: transform 0.18s ease;
    }

    .epc-toggle.epc-expanded .epc-caret {
        transform: rotate(180deg);
    }


/* ============================================================================
   Settings rail — in-page section index for long settings pages.

   A pinned row of pills above the settings, built from the sections already on the
   page. Same shape and the same active-tab colours as .tabbar-inner-nav so it reads
   as furniture this app already has rather than a new idea.

   STICKY: .settings-rail-wrap has to be a normal block child of the TALL element
   holding the sections. A sticky element is bounded by its containing block, so
   giving it its own grid row means a containing block exactly its own height —
   zero room to travel, and it silently never sticks.
   ============================================================================ */

.settings-rail-wrap {
    position: sticky;
    top: var(--settings-rail-offset, 0px);
    z-index: 3;
    /* Sits above the card, so the ground behind it is the page, not the card. */
    background: var(--BodyBackground, #f4f6f8);
    padding: 6px 0 8px;
    margin: 0 0 14px;
    border-bottom: 1px solid var(--Outline);
    /* Reads as a rule under the pills rather than another hairline. Mixed toward the
       text colour instead of hard-coded, so it gains contrast on light skins and on
       dark ones alike; browsers without color-mix keep the plain --Outline above. */
    border-bottom-color: color-mix(in srgb, var(--Outline) 55%, var(--Text));
    transition: border-bottom-color .15s ease;
}

/* Resting-state separator only. Once the page moves, the rule would be drawn across
   content sliding underneath it, so it goes. Toggled from the rail's own scroll
   handler rather than a scroll-driven animation, which Safari and Firefox still
   do not ship. */
.settings-rail-wrap[data-scrolled="true"] {
    border-bottom-color: transparent;
}

.settings-rail {
    display: flex;
    flex-wrap: nowrap;
    /* Spread evenly across the card while there is room. Once the pills outgrow the
       width there is no free space left to distribute, so this quietly becomes
       flex-start and the row scrolls instead — no second rule needed. */
    justify-content: space-between;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .settings-rail::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }

.settings-rail-item {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 5px 10px;
    border: 1px solid var(--Outline);
    border-radius: 999px;
    background: var(--whitebg, #fff);
    color: var(--InnerNavText, var(--SideNavBackground));
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
}

    .settings-rail-item:hover,
    .settings-rail-item:focus {
        text-decoration: none;
        background: var(--InnerNavActiveTabBackground, #EEF3FB);
        color: var(--InnerNavText, var(--SideNavBackground));
    }

    .settings-rail-item:focus-visible {
        outline: 2px solid var(--primarycolor);
        outline-offset: 1px;
    }

    .settings-rail-item[aria-current="true"] {
        background: var(--InnerNavActiveTabBackground, #EEF3FB);
        border-color: var(--InnerNavActiveTabBackground, #EEF3FB);
        color: var(--InnerNavActiveTabText, var(--InnerNavText, var(--SideNavBackground)));
        font-weight: 600;
    }

/* A rail that runs past its edge looks like a rail that ends there. Drawn as an
   overlay in the rail's own colour, never a CSS mask — a mask would let the settings
   scrolling underneath show through the fade. */
.settings-rail-wrap::before,
.settings-rail-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 8px;
    width: 28px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
    z-index: 1;
}

.settings-rail-wrap::before {
    left: 0;
    background: linear-gradient(to right, var(--BodyBackground, #f4f6f8), transparent);
}

.settings-rail-wrap::after {
    right: 0;
    background: linear-gradient(to left, var(--BodyBackground, #f4f6f8), transparent);
}

.settings-rail-wrap[data-edge~="left"]::before {
    opacity: 1;
}

.settings-rail-wrap[data-edge~="right"]::after {
    opacity: 1;
}

/* Jump targets clear the pinned rail instead of landing behind it. Set from JS,
   because the rail's height changes with the width it has to wrap into. */
.es-section {
    scroll-margin-top: calc(var(--settings-rail-h, 0px) + var(--settings-rail-offset, 0px) + 12px);
}

/* Condense before scrolling: the pills give up padding, then gap, and only start
   scrolling once there is nothing left to give. */
@media (max-width: 1279.98px) {
    .settings-rail {
        gap: 4px;
    }

    .settings-rail-item {
        padding: 5px 8px;
    }
}

@media (max-width: 767px) {
    .settings-rail-wrap {
        margin-bottom: 10px;
    }

    .settings-rail {
        gap: 3px;
    }

    .settings-rail-item {
        font-size: 12px;
        padding: 4px 8px;
    }
}

/* position: sticky resolves against the nearest ancestor scrollport, and ANY overflow
   other than visible/clip creates one. Under 768px the inner-nav rule puts
   overflow-x: hidden on this flex row, which would strand the rail; clip does the same
   visual job without creating a scrollport.

   Kept INSIDE that breakpoint on purpose. Applied at every width it also clipped the
   settings card between roughly 768px and 1290px, where the row is allowed to overflow
   rather than being cut off. Above 768px the row has no overflow rule to counteract,
   so there is nothing to fix there. */
@media (max-width: 767.98px) {
    .d-flex:has(.settings-rail-wrap),
    .d-md-flex:has(.settings-rail-wrap) {
        /* !important: the rule setting overflow-x:hidden here is
           .d-md-flex:has(> .tabbar.white-bg.tabbar-inner-nav) = (0,4,0), which
           outranks this selector on specificity. */
        overflow-x: clip !important;
    }
}

/* ============================================================================
   Sticky inner navigation

   The inner nav (Company Admin, Products, Revenue Reports, Communications, Contacts,
   Events, customer tabs, ...) is one shared component -- .tabbar.white-bg.tabbar-inner-nav,
   base rules near the top of this file -- so it is pinned once, here, for every page
   that renders it.

   It has two shapes, and they need different pinning:

     RAIL MODE (vertical column beside the content) -- pin it and cap its height, so a
     menu longer than the screen scrolls ITSELF instead of running past the fold. The
     rail sits in a column that is already reserved, so pinning costs no page space.

     STRIP MODE (full-width horizontal row above the content) -- pin to the very top,
     and hide on scroll down / show on scroll up. A permanently pinned ~50px band is a
     lot of screen on a phone; this gives it back while reading and returns it the
     moment the reader heads back up. Strip mode starts at 1499px for the four page
     families that flip early (events / revenue reports / contacts / communications)
     and at 767px for everything else -- the same breakpoints that already lay the
     strip out, kept in step with them deliberately.

   STICKY: the containing block is the .d-flex row (block at mobile widths) holding the
   nav plus .sidebar-table-content, and it is as tall as the content column -- that is
   what gives the nav room to travel. The nav has to stay a DIRECT child of that row:
   wrapping it in anything only its own height means zero travel, and it silently never
   sticks. Same trap documented on .settings-rail-wrap above.

   Nothing is pinned above the nav on desktop (the 55px .top_navbar lives inside the
   left sidebar column, it is not a full-width header), so --inner-nav-top is just a
   breathing gutter and a page can retune it without new CSS.
   ============================================================================ */

/* body carries overflow-x: hidden (near the top of this file) to keep wide content from
   scrolling the page sideways. That makes body a scrollport: hidden on one axis forces the
   used value of the other axis from visible to auto, and body is exactly as tall as its
   content, so a sticky descendant resolves against a box with zero travel and never sticks.
   Measured on Company Profile before this rule: the rail scrolled straight off the top.

   clip does the same visual job -- wide content still cannot scroll the page sideways -- but
   it is compatible with visible, so overflow-y stays visible, no scrollport is created, and
   sticky resolves against the viewport as intended. Scoped with :has() to the pages that
   actually render an inner nav rather than changing body everywhere. Fixed-position furniture
   (left sidebar, modals, chat widgets) is unaffected: its containing block is the viewport, so
   it escapes an ancestor's clip exactly as it escapes hidden today. */
body:has(.tabbar.tabbar-inner-nav) {
    overflow-x: clip;
}

.tabbar.white-bg.tabbar-inner-nav {
    position: sticky;
    top: var(--inner-nav-top, 16px);
    /* Pairs with the overflow-y: auto already on the base rule. dvh second so browsers
       that have it use the stable viewport unit. */
    max-height: calc(100vh - var(--inner-nav-top, 16px) - 16px);
    max-height: calc(100dvh - var(--inner-nav-top, 16px) - 16px);
    /* Above the content column's static furniture; below sticky table toolbars (998)
       and every popup background (1030+), so it never covers a modal. */
    z-index: 2;
}

/* The rail is a flex COLUMN whose rows default to flex-shrink: 1, and they also carry
   min-height: 0 (.tabbar.tabbar-inner-nav .activetab, above). So the moment the viewport cap
   bit, flex squashed every row instead of letting the rail scroll -- measured on Custom
   Fields: 20 rows crushed from 36px to 16px inside a 398px box, text clipped, and a
   scrollHeight that had shrunk with them. Pinning the rows at their natural height sends the
   overflow where it belongs: the rail's own scrollport. Strip mode already sets flex: 0 0 auto
   on its items, so this agrees with it rather than fighting it. */
.tabbar.white-bg.tabbar-inner-nav > * {
    flex-shrink: 0;
}

/* Strip mode, early-flipping page families. */
@media (max-width: 1499px) {
    .event-section .tabbar.white-bg.tabbar-inner-nav,
    .tabbar.white-bg.tabbar-inner-nav.revenue-reports-inner-nav,
    .tabbar.white-bg.tabbar-inner-nav.contacts-inner-nav,
    .tabbar.white-bg.tabbar-inner-nav.communications-inner-nav {
        top: 0;
        /* One row, not a tall rail -- drop the rail-mode viewport cap. */
        max-height: none;
        z-index: 20;
        transition: transform .2s ease;
    }

    html[data-innernav="hidden"] .event-section .tabbar.white-bg.tabbar-inner-nav,
    html[data-innernav="hidden"] .tabbar.white-bg.tabbar-inner-nav.revenue-reports-inner-nav,
    html[data-innernav="hidden"] .tabbar.white-bg.tabbar-inner-nav.contacts-inner-nav,
    html[data-innernav="hidden"] .tabbar.white-bg.tabbar-inner-nav.communications-inner-nav {
        transform: translateY(calc(-100% - 4px));
    }
}

/* Strip mode, everything else. */
@media (max-width: 767px) {
    .tabbar.white-bg.tabbar-inner-nav {
        top: 0;
        max-height: none;
        z-index: 20;
        transition: transform .2s ease;
    }

    /* -100% clears the nav's own border box; the extra 4px takes the border-radius'
       bottom edge with it so no sliver is left hanging under the top of the screen. */
    html[data-innernav="hidden"] .tabbar.white-bg.tabbar-inner-nav {
        transform: translateY(calc(-100% - 4px));
    }
}

/* The nav still hides and shows -- it just does not slide there. */
@media (prefers-reduced-motion: reduce) {
    .tabbar.white-bg.tabbar-inner-nav {
        transition: none !important;
    }
}