/* 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: 24px;
    line-height: 100%;
    color: var(--PageTitleTextColor);
    text-align: left;
    display: flex;
    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);
    }


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

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

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


    @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: 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 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: #fff;
                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: 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::-webkit-scrollbar {
        width: 10px;
    }

    .sidebar::-webkit-scrollbar-track {
        box-shadow: inset 0 0 2px grey;
        border-radius: 10px;
    }
    /* Handle */
    .sidebar::-webkit-scrollbar-thumb {
        background: var(--SideNavTextColor);
        border-radius: 10px;
    }
        /* Handle on hover */
        .sidebar::-webkit-scrollbar-thumb:hover {
            background: white;
        }
    /* sidebar heading */
    .sidebar-heading {
        padding: 5px 10px;
        color: #fff;
        font-size: 18px;
    }

    .wrapper.collapseSideBar .sidebar-heading {
        transition: all 0.5s;
        opacity: 0;
        visibility: none;
    }
    /*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: 12px 32px;
        }
    }

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

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

    .buttonlink a {
        color: black;
        text-decoration: underline !important;
    }

    a:hover, a:focus {
        text-decoration: none;
    }

    a:hover {
        text-decoration: underline;
    }

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

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

    .outer-width {
        margin-right: auto;
        margin-left: auto;
        width: 100%;
        float: left;
    }

        .outer-width:before, .outer-width:after {
            content: " "; /* 1 */
            display: table; /* 2 */
        }

        .outer-width:after {
            clear: both;
        }
    /*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);
    }

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

        .dark-bg .formlabel {
            background: var(--whitebgtext) !important;
        }
    /* Tables */
    .lesspadding td {
        padding: 2px !important;
    }

    .tablegroupheader td {
        padding: 5px !important;
        text-align: center;
        background-color: var(--SectionHeaderBackGround);
        color: var(--SectionHeaderTextColor);
    }

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

    .tablestyle {
        text-align: left;
        width: 100%;
        border-radius: 4px;
        border-radius: 4px;
        position: relative;
    }

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

    /*.white-bg .tablestyle th:first-child {
    border-radius: 0 0 0 0 !important;
}

.white-bg .tablestyle th:last-child {
    border-radius: 0 0 0 0 !important;
}

.white-bg .tablestyle .roundheader th:first-child {
    border-radius: 10px 0 0 0 !important;
}

.white-bg .tablestyle .roundheader th:last-child {
    border-radius: 0 10px 0 0 !important;
}*/

    .white-bg .tablestyle .roundheader th {
        border-top: none;
    }

    .tablestyle table {
        width: 100%;
    }



    .tablestyle th {
        text-transform: uppercase;
        white-space: nowrap;
        background-color: var(--TableHeaderBackground) !important;
        color: var(--TableHeaderText) !important;
    }

        .tablestyle th .buttonaslink {
            text-transform: uppercase;
            white-space: nowrap;
            color: var(--TableHeaderText) !important;
        }



        .tablestyle th a {
            color: white !important;
        }

            .tablestyle th a:hover {
                color: white !important;
            }

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

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

    .buttoncolumn {
        width: 1px;
    }

    .selectedrow {
        background-color: var(--SelectedRow) !important;
    }

    .innerformtable th {
        background-color: var(--InnerFormTableHeaderBackgroundColor);
        color: var(--InnerFormTableHeaderTextColor);
        padding: 7px;
        vertical-align: top;
        border: 1px solid #AAA;
    }

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

    .secondarycolor th {
        background-color: var(--secondarycolor);
        color: #FFFFFF;
        padding: 7px;
        vertical-align: top;
    }

    .tablestyle td {
        padding: 7px 10px;
        border-top: 1px solid #CCC;
        vertical-align: top;
        font-weight: 500;
        font-size: 12px;
        background: var(--Surface-3) !important;
        color: var(--whitebgtext);
    }

        .tablestyle td .gridbutton a, .tablestyle td .smallbutton a {
            color: var(--bs-white) !important;
            /*        background: var(--buttonprimarybackground) !important;*/
            text-decoration: none !important;
        }

        .tablestyle td .gridbutton:hover a, .tablestyle td .smallbutton:hover a {
            color: #FFF !important;
            /*        background: var(--buttonprimarybackground) !important;*/
            text-decoration: none !important;
        }

        .tablestyle td a {
            color: var(--Interactive-Default) !important;
            text-decoration: underline;
            font-weight: bold;
        }

    .bottomborder {
        border-bottom: 1px solid #AAA;
    }

    td {
        padding: 8px;
        vertical-align: top;
    }

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

    .tablestyle a {
        color: black;
        text-decoration: none;
    }

        .tablestyle a:hover {
            text-decoration: underline;
        }

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

        .scroll-tabel table thead {
            position: sticky;
            top: 0;
        }

            .scroll-tabel table thead tr {
                width: 100%;
                table-layout: fixed;
            }

        .scroll-tabel table tbody tr {
            width: 100%;
            table-layout: fixed;
        }

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

        .scroll-tabel1 table thead {
            position: sticky;
            top: 0;
        }

            .scroll-tabel1 table thead tr, .scroll-tabel1 table tbody tr {
                /*  display: table;*/
                width: 100%;
                table-layout: fixed;
            }

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

    .editremove {
        width: 170px;
    }

    .singlebutton {
        width: 1px;
    }

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

    .validation-message {
        color: red;
        text-align: center;
        width: 100%;
        font-style: italic;
    }

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

    .required {
        color: var(--ErrorText);
    }

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

    /*.sidebar-dropdown {
    border-bottom: 1px solid #fff;
}*/
    /* Buttons */
    .buttons {
        text-align: center;
    }

    .button, .filterbutton, .button-white {
        background-color: var(--buttonprimarybackground);
        color: var(--buttonprimarytext);
        font-weight: 500;
        padding: 6px 12px;
        border-radius: 6px;
        font-size: 13px;
        text-align: center;
        margin-right: 5px;
        border: 1px solid var(--buttonbordercolor);
        transition: background-color 0.2s ease;
    }

        .button:hover {
            background-color: #dbe8f5; /* slightly darker on hover */
        }


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

    .button a, .filterbutton a, .button-white a {
        color: var(--WhiteButtonTextColor) !important;
        text-decoration: none !important;
    }

    .button:hover, .filterbutton:hover, .button-white:hover {
        background-color: var(--WhiteButtonTextColor);
        color: var(--Heading);
    }

        .button:hover a, .filterbutton:hover a, .button-white:hover a {
            text-decoration: none !important;
            color: var(--Heading);
            background-color: var(--WhiteButtonTextColor) !important;
        }

    .gridbutton, .smallbutton, .storeitem-btn {
        /* font-family: 'Open Sans', sans-serif; */
        cursor: pointer;
        text-align: center;
        text-transform: none;
        display: inline-block;
        line-height: 1.45;
        position: relative;
        overflow: hidden;
        border-radius: 8px;
        font-weight: 600;
        margin: 0px 3px 0px 3px;
        padding: 0px;
        /* box-shadow: rgb(0 0 0 / 20%) 1px 2px 4px, rgb(0 0 0 / 8%) 1px 2px 4px; */
        background-color: var(--buttonprimarybackground);
        color: var(--buttonprimarytext);
        border: 1px solid var(--buttonbordercolor);
        font-weight: 500;
        padding: 6px 12px;
        border-radius: 6px;
        font-size: 13px;
        /*    height: 20px;*/
    }

        .gridbutton:hover, .smallbutton:hover, .storeitem-btn:hover {
            background-color: var(--WhiteButtonTextColor);
            color: var(--Heading);
        }

        .gridbutton a, .smallbutton a, .storeitem-btn a {
            color: var(--WhiteButtonTextColor) !important;
            /*        background: #FFF !important;*/
            text-decoration: none !important;
        }

        .gridbutton:hover a, .smallbutton:hover a, .storeitem-btn:hover a {
            text-decoration: none !important;
            color: #FFF !important;
            /*        background-color: var(--WhiteButtonTextColor) !important;*/
        }

    .button-link {
        font-family: 'Open Sans', sans-serif;
        cursor: pointer;
        text-align: center;
        padding: 3px 5px;
        font-size: 12px;
        margin: 0 5px 10px 0;
        background-color: var(--ButtonBackgroundColor);
        border: 1px solid var(--ButtonBorderColor);
        color: var(--ButtonTextColor);
        min-width: 70px;
        text-transform: none;
        display: inline-block;
        line-height: 1.45;
        position: relative;
        overflow: hidden;
        border-radius: 8px;
    }

        .button-link:hover {
            background: transparent;
            border: 1px solid white;
            transition: all 0.5s;
            background-color: var(--ButtonTextColor);
            color: var(--ButtonBackgroundColor);
        }

    .buttonaslink {
        color: var(--Interactive-Default) !important;
        text-decoration: underline;
        font-weight: bold;
        border: none;
        background-color: transparent;
    }

        .buttonaslink a {
            color: black;
            text-decoration: underline;
            color: var(--ButtonBackgroundColor);
        }

            .buttonaslink a:hover {
                color: black;
                text-decoration: underline;
            }


    .dropdown-menu {
        /*    border: solid 1px var(--ButtonBackgroundColor);*/
    }
    /* Form Layout */
    .center-table table {
        width: 100%;
    }

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

            .center-table table tr td {
                padding: 3px;
            }

    .input-form {
        padding: 15px;
    }

        .input-form table {
            width: 100%;
            padding: 15px;
        }

            .input-form table tr {
                display: flex;
                justify-content: center;
            }

                .input-form table tr td {
                    /*                max-width: 500px;*/
                    width: 100%;
                    padding: 0 5px;
                    margin-bottom: 5px;
                }
        /* Form Fields*/
        .input-form input[type=text] {
            width: 100%;
            height: 35px;
        }

        .input-form input[type=number] {
            width: 100%;
            height: 35px;
        }

        .input-form input[type=password] {
            width: 100%;
            height: 35px;
        }

        .input-form table {
            width: 100%;
        }

            .input-form table tr {
                display: flex;
                justify-content: center;
            }

                .input-form table tr td {
                    /*                max-width: 500px;*/
                    width: 100%;
                    padding: 0 5px;
                }

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

        .input-form input[type=date] {
            width: 100%;
            height: 35px;
        }

        .input-form input[type=datetime] {
            width: 100%;
            height: 35px;
        }

        .input-form input[type=number] {
            width: 100%;
            height: 35px;
        }

        .input-form input[type=password] {
            width: 100%;
            height: 35px;
        }

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

    input[type="date"] {
        /*    width: 100%;
    height: 35px;
    padding: 0 5px;
    border-radius: 5px;
    border: 1px solid #000;*/
        /*    max-width: 125px;*/
    }

    input[type="time"] {
        /*    width: 100%;
    height: 35px;
    padding: 0 5px;
    border-radius: 5px;
    border: 1px solid #000;*/
        max-width: 125px;
    }

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

    .formlabel, .filter-label {
        color: var(--FormLabelColor);
        margin-bottom: 5px;
        margin-top: 0;
        text-align: left;
        font-weight: 600;
        font-size: 12px;
        line-height: 100%;
        vertical-align: bottom;
        text-transform: uppercase;
    }

    .inlineformlabel {
        color: black;
        font-size: 14px;
        text-align: left;
        font-weight: 600;
        color: var(--FormLabelColor);
    }

    .strikethrough {
        position: relative;
        display: inline-block;
    }

        .strikethrough::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 50%;
            width: 100%;
            height: 1px;
            background-color: red;
        }

    .cursorpointer {
        cursor: pointer;
    }

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



    input[type=text] {
        width: 100%;
        height: 37px;
        border-radius: 4px;
        border: 1px solid var(--BorderColor);
        font-weight: 400;
        font-size: 14px;
        color: var(--Text);
        padding: 8px 12px;
        box-shadow: none;
        outline: none;
    }

    input[type=search] {
        border: 1px solid #000;
        border-radius: 5px;
        padding: 5px 20px;
        appearance: none;
        font-size: 12px;
        overflow-y: hidden;
    }

    input [type=tel] {
        padding: 3px;
        border: 1px solid #505050;
        border-radius: 5px;
        width: 100%;
        height: 35px;
        max-width: 500px;
        font-weight: 500;
    }

    input[type=password] {
        padding: 3px;
        border: 1px solid #505050;
        border-radius: 5px;
        width: 100%;
        height: 35px;
        max-width: 500px;
        font-weight: 500;
    }

    input[type=number] {
        padding: 3px;
        border: 1px solid #505050;
        border-radius: 5px;
        width: 100%;
        height: 35px;
        max-width: 500px;
        font-weight: 500;
    }

    .number {
        width: 85px !important;
    }

    textarea {
        height: 100px;
        padding: 8px 12px;
        border: 1px solid var(--BorderColor);
        border-radius: 5px;
        font-weight: 500;
        width: 100%;
        color: var(--Text);
        outline: none;
    }

        textarea:focus {
            border-color: var(--Interactive-Default)
        }


    .time {
        text-align: left;
    }

        .time select {
            width: 70px !important;
        }

    select {
        width: 100%;
        height: 37px !important;
        border-radius: 4px;
        border: 1px solid var(--BorderColor) !important;
        font-weight: 400;
        font-size: 14px !important;
        color: var(--Text) !important;
        padding: 8px 12px;
        box-shadow: none !important;
        outline: none;
    }

        select:focus {
            border-color: var(--Interactive-Default) !important;
        }

    .currency-input {
        position: relative;
    }

        .currency-input input {
            width: 100px !important;
        }

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

    .currency-input input {
        padding-left: 20px !important;
    }


    /*Mutli Select Drop Down START */
    .check-box-section {
        display: flex;
        flex-wrap: wrap;
    }

        .check-box-section input {
            width: auto;
            height: auto;
        }

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

        .form-feild .dropdown-check-list .form-control {
            border: 1px solid #000;
            border-radius: 5px;
            padding: 5px 20px;
            appearance: none;
            font-size: 12px;
            overflow-y: hidden;
        }
    /*Multi Select Drop Down END */
    .center-table table {
        width: 100%;
    }

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

            .center-table table tr td {
                padding: 3px;
            }

    .input-form {
        padding: 16px 10px;
    }

        .input-form table {
            width: 100%;
            padding: 15px;
        }

            .input-form table tr {
                display: flex;
                justify-content: center;
            }

                .input-form table tr td {
                    /*                max-width: 500px;*/
                    width: 100%;
                    padding: 0 5px;
                    margin-bottom: 12px;
                }

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

        .input-form input[type=number] {
            width: 100%;
            height: 35px;
        }

        .input-form input[type=password] {
            width: 100%;
            height: 35px;
        }

        .input-form table {
            width: 100%;
        }

            .input-form table tr {
                display: flex;
                justify-content: center;
            }

                .input-form table tr td {
                    /*                max-width: 500px;*/
                    width: 100%;
                    padding: 0 6px;
                }

    input[type=text], input[type=date], input[type=number], input[type="time"], .check-box-section .anchor {
        width: 100%;
        height: 37px;
        border-radius: 4px;
        border: 1px solid var(--BorderColor);
        font-weight: 400;
        font-size: 14px;
        color: var(--Text);
        padding: 8px 12px;
        box-shadow: none;
        outline: none;
    }

        input[type=text]:focus, input[type=date]:focus, input[type="time"]:focus {
            border-color: var(--Interactive-Default)
        }

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


    .input-form input[type=date] {
        /*            width: 100%;
            height: 35px;
            width: 125px;*/
    }

    .height350 {
        height: 350px !important;
    }

    .shortinput {
        height: 25px !important;
    }

    .shortdropdown {
        height: 30px !important;
    }

    .width50 {
        width: 70px !important;
    }

    .width75 {
        width: 75px !important;
    }

    .width90 {
        width: 90px !important;
    }

    .width100 {
        width: 100px !important;
    }

    .width125 {
        width: 125px !important;
    }

    .width130 {
        width: 130px !important;
    }

    .width150 {
        width: 220px !important;
    }

    .width160 {
        width: 160px !important;
    }

    .width167 {
        width: 167px !important;
    }

    .width175 {
        width: 175px !important;
    }

    .width200 {
        width: 200px !important;
    }

    .width225 {
        width: 225px !important;
    }

    .width240 {
        width: 240px !important;
    }

    .width250 {
        width: 250px !important;
    }

    .width275 {
        width: 275px !important;
    }

    .width300 {
        width: 300px !important;
    }

    .width325 {
        width: 325px !important;
    }

    .width350 {
        width: 350px !important;
    }

    .width375 {
        width: 375px !important;
    }

    .width400 {
        width: 400px !important;
    }

    .width425 {
        width: 425px !important;
    }

    .width450 {
        width: 450px !important;
    }

    .width475 {
        width: 475px !important;
    }

    .width500 {
        width: 500px !important;
    }

    .width600 {
        width: 600px !important;
        max-width: 100%;
    }

    .width700 {
        width: 700px !important;
        max-width: 100%;
    }

    .width800 {
        width: 800px !important;
        max-width: 100%;
    }

    .width900 {
        width: 900px !important;
        max-width: 100%;
    }

    .width1000 {
        width: 1000px !important;
        max-width: 100%;
    }

    .width1100 {
        width: 1100px !important;
        max-width: 100%;
    }

    .width1200 {
        width: 1200px !important;
        max-width: 100%;
    }

    .width1400 {
        width: 1400px !important;
        max-width: 100%;
    }

    .maxwidth {
        max-width: 100% !important;
    }

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

        .filters select {
            width: 300px !important;
        }
    }
    /* Tabs */
    /* 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;
    }

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

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

    .row-sec .button {
        margin-bottom: 15px;
    }

    /*.Email-container {
    display: flex;
    flex-direction: row;
    gap: 10px;
}*/
    /* Mobile Phones */
    @media (max-width: 600px) {
        .Email-container {
            flex-direction: column;
            gap: 10px;
        }
    }
    /* Tablets */
    @media (min-width: 601px) and (max-width: 768px) {
        .Email-container {
            flex-direction: column;
            gap: 10px;
        }
    }
    /* Small Laptops */
    @media (min-width: 769px) and (max-width: 1024px) {
        .Email-container {
            flex-direction: column;
            gap: 10px;
        }
    }

    .currency-sign {
        position: absolute;
        left: 7px;
        top: 5px;
    }
    /* Desktops */
    @media (min-width: 1025px) {
        .Email-container {
            flex-direction: row;
            /*        gap: 10px;*/
        }
    }

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

    .paymentform .formlabel {
        color: black;
        font-weight: 400;
        font-size: 16px;
    }

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

    /* On screens < 768px, make buttons full width */
    @media (max-width: 767.98px) {
        .product-filters button {
            flex: 0 0 100% !important;
        }
    }



    .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;
    }
    /* Desktops */
    /*@media (min-width: 1025px) {
    .Email-container {
        flex-direction: row;
        gap: 10px;
    }
}*/

    .scroll-tabel {
        max-height: 1500px;
        overflow-y: scroll;
        min-height: 250px;
    }


        .scroll-tabel table thead {
            position: sticky;
            top: 0;
        }

            .scroll-tabel table thead tr {
                width: 100%;
                table-layout: fixed;
            }

        .scroll-tabel table tbody tr {
            width: 100%;
            table-layout: fixed;
        }

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

        .scroll-tabel1 table thead {
            position: sticky;
            top: 0;
        }

            .scroll-tabel1 table thead tr, .scroll-tabel1 table tbody tr {
                /*  display: table;*/
                width: 100%;
                table-layout: fixed;
            }

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

        .paymentform .formlabel {
            margin-bottom: 0px;
            margin-left: 5px;
            font-size: 16px;
            font-weight: 400;
        }



    .zipcode input {
        width: 100px !important;
    }

    .paymentform td {
        padding: 0px;
    }

    .paymentbackground {
        background-image: url("../../images/CCPaymentBackGround.png");
        padding: 10px;
        background-repeat: no-repeat;
        background-size: cover;
        width: 365px;
        height: 510px;
        padding-left: 75px;
        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;
    }

    .paymentform .formlabel {
        color: black;
        font-weight: 400;
        font-size: 16px;
        margin-top: 0px !important;
    }

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

        .ccpaymentform .formlabel {
            margin-bottom: 0px;
            margin-left: 5px;
            font-size: 16px;
            font-weight: 400;
        }

        .ccpaymentform td {
            padding: 0px;
        }

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

    .ccpaymentform .formlabel {
        color: black;
        font-weight: 400;
        font-size: 16px;
    }
    /* Signatures */
    @media (min-width:600px) {
        .form-600 .signature {
            width: 320px;
            z-index: 10000;
            position: absolute;
            left: 125px;
            top: -400px;
        }
    }

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

        .workflowtabs .label {
            position: absolute;
            bottom: -30px;
            font-weight: 900;
            text-align: center;
            width: 100%;
        }

        .workflowtabs .circle.unselected {
            background-color: var(--WorkflowStepInActiveTextColor);
        }

        .workflowtabs .circle.selected {
            background-color: var(--WorkflowStepActiveTextColor);
            color: var(--SideNavSelectedItemTextColor);
        }

            .workflowtabs .circle.selected .selectedlabel {
                color: var(--TableHeaderBackgroundColor);
            }

        .workflowtabs .circle.unselected .unselectedlabel {
            color: var(--WorkflowStepInActiveTextColor);
        }

    .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 .selectedcircle {
            width: 97px;
            height: 97px;
            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;
        }

        .quotesteps .label {
            position: absolute;
            bottom: -55px;
            font-weight: 900;
            text-align: center;
            /*width: 100%;*/
        }

        .quotesteps .circle.unselected {
            background-color: var(--WorkflowStepInActiveTextColor);
        }

        .quotesteps .selectedcircle.selected {
            background-color: var(--WorkflowStepActiveTextColor);
        }

    .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;
        }
    }
    /*Job Assignment*/
    @media (max-width: 480px) {
        #datePicker {
            width: 100px !important;
            font-size: 12px;
            padding: 4px;
        }

        #btnPrevious,
        #btnNext {
            font-size: 12px;
            padding: 4px 8px;
        }

        #dateNavBar label {
            font-size: 12px;
        }
    }

    /*EmailCalendar*/
@media (max-width: 768px) {
    .calendar-day-header, .calendar-slot-cell {
        min-width: 120px;
    }

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

@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-wrapper p > strong {
                font-size: 16px;
            }

    .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-table {
        padding: 15px 0;
        border-bottom: 4px solid #5a5b5b;
        overflow: auto;
    }

        .quote-table table {
            width: 100%;
        }

        .quote-table tr:first-child {
            background: #737373;
            color: #fff;
        }

        .quote-table tr th {
            padding: 8px 10px;
            font-size: 14px;
            font-weight: 500;
            line-height: 1;
        }

        .quote-table tr td {
            font-size: 14px;
            padding: 3px 10px;
            vertical-align: initial;
        }

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

    .remove-width {
        width: auto !important;
    }

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

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

    .overflowscroll {
        overflow: scroll;
    }

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


    /* Calendars*/
    @media (min-width: 1280px) and (max-width: 374px) {
        .calendarWidth {
            width: 1280px;
        }
    }

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

    .Keyboardtablestyle td {
        max-width: 10px;
        border-bottom: 1px solid #AAA;
        vertical-align: top;
        font-weight: 400;
    }

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

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



    .training {
        padding-left: 15px !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.active svg path {
            stroke: #000;
        }

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

    .user-auth .d-flex {
        align-items: center;
        gap: 12px;
    }

    .user-auth .user-img {
        background: var(--UserImage);
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-weight: 600;
        font-size: 14px;
        line-height: 20px;
    }

    .user-auth .user-auth-name {
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        color: var(--Heading);
    }

    .user-auth .d-flex .auth-arrow {
        margin-left: auto;
    }

    .user-auth {
        padding: 9px 16px;
        border-bottom: 1px solid var(--Outline);
        height: 61px;
        overflow: hidden;
        min-height: 61px;
        padding-top: 50px;
        position: relative;
        background-color: var(--LogoBackground);
    }


    .search-area {
        position: relative;
    }

        .search-area .btn-search {
            position: absolute;
            left: 16px;
            top: 0;
            background-color: transparent;
            border: 0;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 36px;
        }

        .search-area .form-control {
            background-color: var(--Surface-2);
            border: 0;
            width: 279px;
            max-width: 100%;
            border-radius: 8px;
            height: 36px;
            font-weight: 500;
            font-size: 14px;
            padding-left: 40px;
            color: var(--Text);
            box-shadow: none !important;
        }

    .user-auth-area .btn {
        background: var(--buttonprimarybackground);
        color: var(--buttonprimarytext);
        font-weight: 600;
        font-size: 14px;
        color: #F6F6F6;
        min-height: 36px;
        display: block;
        border-radius: 4px;
    }

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


    @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 .tab-menu .dropdown-box-header button.select-dropdown__button {
                border: none;
                background: transparent;
                display: block;
            }

                .tabs-top-dashboard-sec .tab-menu .dropdown-box-header button.select-dropdown__button svg {
                    display: block;
                }

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


    /*********dropdown********/



    .select-dropdown {
        position: relative;
        display: block;
        max-width: 100%;
    }
    /*.select-dropdown__button {
padding: 10px 35px 10px 15px;
background-color: #fff;
color: #616161;
border: 1px solid #cecece;
border-radius: 3px;
cursor: pointer;
width: 210px;
text-align: left;
}*/
    .select-dropdown__button::focus {
        outline: none;
    }

    .select-dropdown__button .zmdi-chevron-down {
        position: absolute;
        right: 10px;
        top: 12px;
    }

    .select-dropdown__list {
        position: absolute;
        display: block;
        left: 0;
        right: 0;
        max-height: 500px;
        overflow: auto;
        margin: 10px 0 0;
        list-style-type: none;
        opacity: 0;
        pointer-events: none;
        transform-origin: top left;
        transform: scale(1, 0);
        transition: all ease-in-out 0.3s;
        z-index: 2;
        min-width: 400px;
        background: #fff;
        padding: 12px;
        border-radius: 4px;
        box-shadow: 0px 8px 24px 0px #3330301A;
    }

        .select-dropdown__list.active {
            opacity: 1;
            pointer-events: auto;
            transform: scale(1, 1);
        }

    .select-dropdown__list-item {
        display: block;
        list-style-type: none;
        padding: 10px 15px;
        background: #fff;
        border-top: 1px solid #e6e6e6;
        font-size: 14px;
        line-height: 1.4;
        cursor: pointer;
        color: #616161;
        transition: all ease-in-out 0.3s;
    }






    .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 li .btn {
        border: 1px solid #F0F0F0;
        padding: 11px 16px;
        border-radius: 4px;
        background: #F6F6F6;
        color: #000;
        letter-spacing: 0;
    }

    .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-foot ul li .btn.btn-dark {
            background: #000;
            color: #fff;
        }

    .inner-filter-box .filter-body input {
        border: 1px solid #F0F0F0;
        background: #F6F6F6;
        width: 100%;
        padding: 8px 12px;
        font-weight: 400;
        font-size: 14px;
        line-height: 150%;
        letter-spacing: -.2px;
        color: #707271;
        outline: none !important;
        box-sizing: border-box;
    }

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

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

        .inner-filter-box .filter-body label {
            font-weight: 600;
            font-size: 12px;
            line-height: 100%;
            letter-spacing: 0;
            vertical-align: bottom;
            text-transform: uppercase;
            margin-bottom: 6px;
            display: block;
        }

        .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.active svg path {
            stroke: var(--Interactive-Default);
        }

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









    /* New css updated */
    .tabs-controls {
        background-color: var(--Surface-1);
        padding: 4px;
        border-radius: 4px;
        margin-bottom: 12px;
    }

        .tabs-controls.pl-1.d-flex {
            margin-bottom: 0px;
        }

        .tabs-controls li .nav-link {
            font-weight: 600;
            font-size: 14px;
            line-height: 100%;
            letter-spacing: 0px;
            text-transform: uppercase;
            padding: 7px 16px;
            color: var(--Text);
        }

        .tabs-controls li {
            list-style: none;
        }

            .tabs-controls li .nav-link:hover {
                color: var(--Heading);
            }

            .tabs-controls li .nav-link.active {
                background-color: var(--buttonsecondary);
                color: var(--Heading);
                box-shadow: 0px 1px 4px 0px #090C0B14;
            }

    .sec-filter .btn-filter-drop {
        background: var(--Surface-1);
        padding: 0;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        margin-left: 12px;
        box-shadow: none;
    }

        .sec-filter .btn-filter-drop .btn {
            box-shadow: none !important;
        }


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

                .nav-view-toggle li .nav-link.active svg path {
                    stroke: #000000;
                }

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

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

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



    .dropdown.btn-filter-drop.show [aria-expanded="true"] {
        background: transparent;
        box-shadow: none !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;
    }

    .form-signle label {
        font-weight: 600;
        font-size: 12px;
        line-height: 100%;
        text-transform: uppercase;
        margin-bottom: 6px;
        color: var(--Heading);
    }

    .form-signle .form-control {
        /*    height: 37px;
    border-radius: 4px;
    border: 1px solid var(--Divider);
    font-weight: 400;
    font-size: 14px;
    color: var(--Text);
    padding: 8px 12px;
    background-color: var(--Surface-3);
    box-shadow: none;*/
    }

    /*    .form-signle .form-control::placeholder {
        color: var(--Text);
    }*/

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

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

    .btn-theme {
        font-weight: 600;
        font-size: 14px;
        line-height: 100%;
        padding: 10px 16px;
        border: 1px solid;
        text-transform: uppercase;
    }

        .btn-theme:focus {
            box-shadow: none !important;
        }


        .btn-theme.button-tertiary {
            border-color: var(--Divider);
            color: var(--buttontexttertiary);
            background-color: var(--buttontextprimary);
        }

        .btn-theme.button-primary {
            background-color: var(--buttonprimarybackground);
            color: var(--buttonprimarytext);
            box-shadow: var(--ShadowPrimitivesxs);
        }

    .gap-8 {
        gap: 8px;
    }

    .btn-more-flex {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .user-auth-area .btn {
        display: flex;
        align-items: center;
        gap: 5px;
    }


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


    /* Table css start */

    .tabulator, .tabulator-table .tabulator-tableholder {
        border: none !important;
        margin-bottom: 0;
        padding-bottom: 0;
        background: var(--Surface-4) !important;
    }

    .tabulator-tableholder {
        border-bottom: none !important;
        box-shadow: none !important;
    }


    .tabulator-cell {
        overflow: visible !important;
        position: relative; /* ensure tooltip positioning is relative to the cell */
        z-index: 1; /* help stacking above rows */
    }

        .tabulator-cell a {
            color: var(--Tabulatorell) !important;
        }

    .tabulator-footer {
        background-color: white; /* or match table background */
        border-top: none; /* remove if not needed */
        height: 0px; /* if you want to hide it completely */
    }

    /* Row background and hover behavior */
    .tabulator .tabulator-row {
        background: var(--Surface-4) !important;
        cursor: default !important;
    }

        .tabulator .tabulator-row:hover {
            background: var(--Surface-4) !important;
        }

    /* Clean up all cell and header borders */
    .tabulator .tabulator-cell,
    .tabulator .tabulator-row,
    .tabulator .tabulator-col,
    .tabulator .tabulator-header {
        border: none !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        border-bottom: 1px solid var(--Divider) !important;
        background: var(--Surface-4) !important;
    }

    .tabulator-col-title {
        color: var(--TableHeaderText) !important;
    }

    .tablestyle th, .tablestyle td, .tabulator-row .tabulator-cell, .tabulator-col-content {
        font-weight: 600;
        font-size: 14px;
        line-height: 20px;
        padding: 14px 12px !important;
        color: var(--Tabulatorell) !important;
        vertical-align: middle !important;
        text-align: left !important;
        border-color: var(--Divider);
        box-shadow: none !important;
        outline: none !important;
        vertical-align: top !important;
    }

    .tablestyle th {
        background: var(--TableHeaderBackground);
    }

    .tablestyle td {
        background: var(--Surface-3);
    }



    /*.table-custom-main {
    border-radius: 4px;
    overflow: hidden;
}
*/
    .table-custom-main thead th {
        border-bottom: 1px solid var(--Divider);
    }

    .table-icon {
        flex: 0 0 auto;
        width: 16px;
    }

        .table-icon svg {
            display: block;
        }

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




    .tablestyle .td-dropdown {
        width: 101px;
        max-width: 101px;
        text-align: center;
    }

    .dropdown.custom-dropdown .btn {
        padding: 0;
        text-align: center;
        border: 0;
        box-shadow: none;
        width: 20px;
        color: var(--IconDefault)
    }

    .table-responsive.table-custom-main-wrapper .dt-layout-start,
    .table-responsive.table-custom-main-wrapper .dt-layout-end {
        display: none !important;
    }

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

        .form-check-container input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
        }

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

        .form-check-container input:checked ~ .checkmark:after {
            display: block;
        }

        .form-check-container input:checked ~ .checkmark {
            background-color: var(--buttonprimarybackground);
            border-color: var(--buttonprimarybackground);
        }

    .table-custom-main-wrapper .col-12.dt-layout-full.col-md {
        padding-left: 0px;
    }



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

    .tablestyle th br {
        display: none;
    }

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

    .btn.p-0 {
        box-shadow: none;
    }

    .icon-button, .icon-button svg {
        color: var(--IconDefault)
    }

        .icon-button svg {
            width: 16px;
            height: 16px;
            display: block;
        }


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


    /* Table css end */


    /*Profile page css start*/


    .button-links {
        gap: 1px;
    }

        .button-links .btn {
            width: 36px;
            height: 36px;
            padding: 2px;
            box-shadow: none;
            display: flex;
            align-items: center;
            border-radius: 0px;
            justify-content: center;
            background-color: var(--Surface-1);
        }

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

    .button-links .btn svg {
        display: block;
    }

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

    .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 svg path {
        stroke: var(--Interactive-Default)
    }

    .tabbar .icon-arrow svg path {
        stroke: var(--Interactive-Default)
    }

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


    .gridbutton.dropdown-toggle svg {
        width: 20px;
        height: 20px;
    }

    .gridbutton.dropdown-toggle::after {
        display: none;
    }

    .gridbutton.dropdown-toggle {
        border: 0;
        background: transparent;
        color: #989998;
        box-shadow: none;
        padding: 0px;
        margin: 0;
    }



    /*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 a.active svg path {
                    stroke: #000;
                }

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




    /* Profile Sidebar css start */
    .button-interactive-red {
        background-color: var(--Interactive-Red-1);
        color: #fff;
        border: 0;
    }

        .button-interactive-red:hover {
            color: #fff;
        }

    .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: 4px;
        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-footer .btn {
            margin: 0;
        }

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

    .auth-head {
        gap: 8px;
        margin-bottom: 16px;
    }

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

    .auth-head .mid-text {
        flex: 1;
    }

        .auth-head .mid-text p {
            font-weight: 400;
            font-size: 14px;
            line-height: 20px;
            letter-spacing: 0px;
            color: var(--Text);
            vertical-align: middle;
        }

    .upload-button input {
        position: absolute;
        right: 0;
        opacity: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
        top: -40px;
    }

    .upload-button {
        position: relative;
        overflow: hidden;
    }

        .upload-button .btn {
            margin: 0;
        }

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

    .modal.modal-sidebar-profile .tabs-controls {
        margin-bottom: 24px;
    }

    .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 .form-control {
            padding-left: 36px;
        }

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

    .sidebar-table-content .form-800 {
        padding: 0px;
    }



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

    .buttons-social .button {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0;
        margin: 0px;
        background-color: var(--Surface-3);
        border: 1px solid var(--Divider);
    }

    .buttons-social {
        display: flex;
        align-items: center;
        gap: 8px;
    }

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

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

    .buttons-social .text-connect {
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        color: var(--Text);
    }


    .btn-add {
        font-weight: 600;
        font-size: 14px;
        line-height: 100%;
        margin: 0px;
        background-color: transparent !important;
        border: 0;
        gap: 8px;
        color: var(--Interactive-Default) !important;
    }

        .btn-add svg {
            margin-right: 5px;
        }

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

    .item-list-payment .formlabel {
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 0px;
    }


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

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

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

    input:checked + .slider {
        background-color: var(--Interactive-Default);
    }

        input:checked + .slider::before {
            transform: translateX(24px);
        }



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


    .button-box {
        margin-left: 20px;
    }

        .button-box .btn svg {
            display: block;
        }

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

    .tabulator-row .tabulator-cell svg {
        min-width: 16px;
    }







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

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

    .truncated-text {
        display: inline;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

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

    /********new css**********/


    /*.formlabel + input {
    width: 100%;
    height: 37px;
    border-radius: 4px;
    border: 1px solid var(--Divider);
    font-weight: 400;
    font-size: 14px;
    color: var(--Text);
    padding: 8px 12px;
    background-color: var(--Surface-3);
    box-shadow: none;
}*/

    .formlabel {
        color: var(--FormLabelColor);
        margin-bottom: 7px;
        margin-top: 0;
        text-align: left;
        font-weight: 600;
        font-size: 12px;
        line-height: 100%;
        vertical-align: bottom;
        text-transform: uppercase;
    }




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

    .button svg, .filterbutton svg, .button-white svg {
        display: block;
    }

    .gridbutton svg, .smallbutton svg, .storeitem-btn svg {
        display: block;
    }

    .sectionheader .button {
        background-color: transparent;
        color: var(--buttonicon);
        border: none;
        align-items: center;
        gap: 5px;
        padding: 5px !important;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

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


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

        .d-flex.align-items-center.gap-8.group-btns .button.dropdown-toggle {
            min-width: 102px;
            justify-content: space-between;
        }


    .action-with-filter .controls-setting-right.ml-auto {
        margin-bottom: 0;
    }



    .buttons .button-primary {
        background: transparent;
        color: var(--buttonicon);
        border: none;
        padding: 0px 12px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-weight: 500;
        font-size: 13px;
        border-radius: 6px;
    }

    .button-primary svg {
        fill: var(--buttonicon) !important;
        stroke: var(--buttonicon) !important;
    }

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

    .sectionheader button {
        background-color: transparent;
        border: none;
    }

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

    .btn-group.icon-button .button.dropdown-toggle {
        background-color: var(--buttonprimarybackground);
        color: var(--buttonprimarytext);
        border: 1px solid #cbd5e1;
        font-weight: 500;
        padding: 8px 12px !important;
        border-radius: 6px;
        font-size: 13px;
    }


    .controls-setting-right .buttons {
        display: flex;
        align-items: center;
    }


    .controls-setting-right {
        margin-bottom: 12px;
    }

    .dropdown.btn-filter-drop [data-toggle="dropdown"] {
        padding-top: 0;
        padding-bottom: 0;
        box-shadow: none;
    }

        .dropdown.btn-filter-drop [data-toggle="dropdown"] svg {
            display: block;
        }

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

    /*.button svg path { stroke: var(--buttontextprimary);}*/

    .input-form {
        position: relative;
    }

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

    .form-outline .formlabel {
        margin-top: 10px;
    }




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

    table.product-table > tr {
        display: table;
    }

    .input-form table table.product-table tr {
        display: table-row;
        width: 100%;
    }

    .input-form table table.product-table table.tablestyle.lesspadding td {
        width: auto;
    }


    .tablestyle .tablestyle.mytablestyle tr td {
        border: 0;
    }

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


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

    .user-auth img {
        width: 100%;
        height: 100%;
        right: 0;
        max-width: calc(100% - 15px);
        max-height: calc(100% - 15px);
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }


    .scroll-tabel .sticky-top td {
        border: 0;
    }


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

    .sidebar-table-content.email-sidebar {
        width: 100%;
    }

    .tablestyle td.box-ic-left {
        text-align: center !important;
        font-size: 10px;
    }

        .tablestyle td.box-ic-left i {
            display: block
        }

    .details .field {
        margin-bottom: 12px;
    }

    .white-bg .d-flex.group-btns .button {
        background-color: var(--buttonprimarybackground);
        color: var(--buttonprimarytext);
        border: 1px solid #cbd5e1;
        font-weight: 500;
        padding: 6px 12px !important;
        border-radius: 6px;
        font-size: 13px;
        text-align: center;
        transition: background-color 0.2s ease;
    }

        .white-bg .d-flex.group-btns .button:hover {
            background-color: var(--WhiteButtonTextColor);
            color: var(--Heading);
        }

    .gap-8.group-btns .icon-button {
        margin-right: 16px;
    }


    .details .field .btn-view {
        position: absolute;
        display: flex;
        align-items: center;
        gap: 5px;
        top: 30px;
        right: 15px;
        color: var(--Interactive-Hover);
    }

        .details .field .btn-view span {
            line-height: 13px;
        }

    .top-filed .formlabel {
        color: var(--Text);
    }

    .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-product-table .flex-grow-1 {
        padding-left: 15px;
    }

    .input-form .icon-box {
        margin-bottom: 15px;
    }

    .sec-action-box {
        display: flex;
        justify-content: end;
    }

        .sec-action-box .button.dropdown-toggle {
            margin-right: 0;
        }

    .button-list-new-message .button {
        margin-bottom: 5px;
    }

    .tabs-controls.mx-width {
        width: max-content;
        margin-left: auto;
    }

    .sec-prodcut-main .full-screen-bx .button {
        white-space: nowrap;
    }



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

        .sidebar-table-content {
            width: calc(100% - 200px);
        }

        .tablestyle th, .tablestyle td, .tabulator-row .tabulator-cell, .tabulator-col-content {
            font-size: 13px;
            padding: 8px 5px !important;
            white-space: normal;
            word-break: break-all;
            width: auto !important;
        }

        .tablestyle .icon-button {
            text-align: right;
        }

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

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