/* 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(--BackgroundColor);
}

    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;
        background-color: #F8F8F8;
        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: scrollbar thumb + track match side nav background (see tables.css WebKit rules) */
    scrollbar-width: thin;
    scrollbar-color: var(--SideNavBackground) var(--SideNavBackground);
}

.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: #fff #fff;
}

.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;
}

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

.wrapper .sidebar.inner-side-nav ul li a.active .title {
    color: 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 {
    background-color: var(--InnerNavActiveTabBackground, #EEF3FB) !important;
    color: 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 {
        margin-bottom: 16px;
        width: 100%;
        flex: 1 1 auto;
        max-width: 100%;
        /* Horizontal strip: beat base overflow-y:auto — swipe to reach all tabs */
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    /*
     * 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;
        min-width: min(100%, 200px);
    }

    /*
     * 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) {
        flex-wrap: wrap;
    }

    .d-flex > .tabbar.white-bg.tabbar-inner-nav:first-child {
        flex: 1 1 100%;
        min-width: 100%;
        max-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;
}

@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;
    }

        .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;
}

.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;
        }
}

.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;
    }
}

@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;
}

/* 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;
}

.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(--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;
}

.modal-popup-background {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #606060;
    z-index: 1100;
    opacity: .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;
}

    .back-btn svg {
        display: block;
    }

/*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(--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;
    }

/* 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: 3px;
}

/* 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;
}

/* 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 .gridbutton.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 */
.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%;
    padding-bottom: 0.5rem;
    box-sizing: border-box;
}

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

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

/* Quote deposit summary row: matches `invoice-summary-totals` width/alignment so the
   "Quote deposit" label + amount line up with the Sub Total / Tax / Total table above. */
.quote-deposit-summary .quote-deposit-amount-cell {
    white-space: nowrap;
}

    .quote-deposit-summary .quote-deposit-amount-value {
        display: inline-block;
        font-variant-numeric: tabular-nums;
    }

    .quote-deposit-summary .quote-deposit-remove-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: 8px;
        padding: 2px !important;
        line-height: 1;
        color: #6b7280;
        background: transparent;
        border: 0;
    }

        .quote-deposit-summary .quote-deposit-remove-btn:hover,
        .quote-deposit-summary .quote-deposit-remove-btn:focus {
            color: #b91c1c;
            background: transparent;
        }

        .quote-deposit-summary .quote-deposit-remove-btn svg {
            display: block;
        }

/* 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 {
    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;
    }

@media (max-width: 768px) {
    .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;
    }
}

@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: 1024px) {
    .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 {
        display: block !important;
    }

    .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 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;
    }

        .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::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;
    }

/* 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 .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, Point of Sale Settings, etc. */
.company-profile-sections .table-card + .table-card {
    margin-top: 1.5rem;
}

.company-profile-sections .table-card-body > .white-bg:not(.table-card-white-bg-flush) {
    padding: 16px 20px;
    box-sizing: border-box;
}

/* 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;
}

    /* 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,
    .table-card-header-actions .event-summary-toolbar-icon-btn:not(.event-summary-toolbar-icon-btn--save) svg path {
        fill: none !important;
        stroke: currentColor !important;
    }

/* 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 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    line-height: 1;
    font-size: 18px;
}

    .revenuereport-list-card button.button svg,
    .revenuereport-list-card button.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 #7d8a9c !important;
    background: #e6eaf0 !important;
    color: #1e2a3b !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;
}

.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: 16px 20px 18px;
    background: #eef1f5;
    border-bottom: 1px solid #e3e6ea;
}

    .revenuereport-summary-panel .summary-bar {
        margin-bottom: 0;
    }

    .revenuereport-summary-panel .summary-label {
        text-transform: none;
        letter-spacing: normal;
        font-weight: 600;
    }

.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: 104px;
    min-width: 104px;
    max-width: 104px;
    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;
}

.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;
    }
}