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

.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 {
        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%;
                align-items: center;
            }

                .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;
    border-right: 1px solid var(--Outline);
}



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

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

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


.wrapper .main-Content {
    width: calc(100% - 224px);
    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;
    }



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

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;
    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 {
    margin-bottom: 0px;
    z-index: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 100%;
    background-color: var(--Surface-3);
}

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


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


@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 {
    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;
    background-color: var(--buttonprimarybackground);
    color: var(--buttonprimarytext);
    border: 1px solid var(--buttonbordercolor);
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
}

    .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;
        text-decoration: none !important;
    }

    .gridbutton:hover a,
    .smallbutton:hover a,
    .storeitem-btn:hover a {
        text-decoration: none !important;
        color: #FFF !important;
    }

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


/* 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 {
                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 {
                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;
        padding-left: 20px !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 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 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 {
                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 {
                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;
}


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




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









/* 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: black !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: #555;
    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;
}


.modal .modal-body {padding: 0px;}



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

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


.tabbar.tabbar-global .activetab .icon-arrow {
    display: none;
}