@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

    :root {
        --clr-primary: #c52127;
        --clr-white: #fff;
        --clr-white2: #f9f9f9;
        --clr-white3: #f3f7ff;
        --clr-black: #01040d;
        --clr-black2: #171717;
        --clr-black3: #344054;
        --clr-gray: #525252;
        --clr-gray1: #737373;
        --clr-gray2: #d4d4d4;
        --clr-gray3: #f5f5f5;
        --clr-gray4: #f4f5f7;
        --clr-gray5: #a3a3a3;
        --clr-violet: rgba(130, 49, 211, 1);
        --clr-violet-light: rgba(130, 49, 211, 0.12);
        --clr-green: #01b81a;
        --clr-green-light: rgba(1, 184, 26, 0.12);
        --clr-orange: #ff6565;
        --clr-orange-light: rgba(255, 116, 62, 0.12);
        --clr-red: #ef4444;
        --ff: "Inter", sans-serif;
    }

    .primary {
        color: var(--clr-primary);
    }

    html {
        overflow-x: hidden;
        padding: 0px;
        margin: 0px;
    }

    .bg-green-one {
        background: #04f204 !important;
    }

    body {
        margin: 0;
        padding: 0 !important;
        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 25px;
        letter-spacing: 0px;
        word-spacing: 0px;
        word-wrap: break-word;
        background: #f9f9f9;
    }

    #main-wrapper {
        background: #fff;
    }

    /* Chrome, Safari, Edge, Opera */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Firefox */
    input[type="number"] {
        -moz-appearance: textfield;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin: 0;
        padding: 0;
        font-weight: 400;
        color: #000000;
    }

    h1 {
        font-size: 36px;
        line-height: 36px;
    }

    h2 {
        font-size: 28px;
        line-height: 38px;
    }

    h3 {
        font-size: 22px;
        line-height: 32px;
    }

    h4 {
        font-size: 20px;
        line-height: 30px;
    }

    h5 {
        font-size: 18px;
        line-height: 28px;
    }

    h6 {
        font-size: 16px;
        line-height: 27px;
    }

    p {
        font-size: 14px;
        font-weight: 400;
        margin: 0;
        padding: 0;
        line-height: 24px;
        color: #505050;
    }

    ul,
    ol {
        margin: 0;
        padding: 0;
    }

    ul li,
    ol li {
        list-style: none;
    }

    a,
    button,
    .btn,
    ol li a,
    ul li a {
        letter-spacing: 0;
        text-decoration: none;
        outline: none !important;
        cursor: pointer;
        color: #000000;
        -webkit-transition: all 0.4s ease;
        transition: all 0.4s ease;
    }

    a:hover,
    .btn:hover,
    ol li a:hover,
    ul li a:hover {
        outline: none !important;
        text-decoration: none;
        color: #000000;
    }

    label.img-label {
        background-color: transparent !important;
    }

    .nowrap.table td {
        white-space: nowrap !important;
    }

    .generates-view table th,
    .generates-view table td {
        text-align: left;
        white-space: pre-wrap;
        overflow-x: auto;
    }

    .business-content {
        padding: 10% 2%;
        width: 100%;
    }

    .btn,
    .btn:focus {
        outline: none !important;
        -webkit-box-shadow: 0 0 0 0em rgba(0, 123, 255, 0.25) !important;
        box-shadow: 0 0 0 0em rgba(0, 123, 255, 0.25) !important;
    }

    svg {
        /* fill: #000000; */
        --svg-font-size: 14px;
        width: var(--svg-font-size);
        height: var(--svg-font-size);
        margin-top: -4px;
        -webkit-transition: all 0.4s ease;
        transition: all 0.4s ease;
    }

    .b-radious-24 {
        border-radius: 24px !important;
    }

    .m-h-48 {
        min-height: 48px !important;
    }

    .p-16 {
        padding: 10px 16px;
    }

    .p-16-0 {
        padding: 16px 0px;
    }

    .margin-l-16 {
        margin-left: 16px;
    }

    .card {
        min-height: 100vh;
    }

    .return-card {
        min-height: 85vh !important;
        background-color: white;
    }

    .w-52 {
        width: 52px !important;
    }

    .text-blue {
        color: #2db0f6 !important;
    }

    .text-green {
        color: #23b100 !important;
    }

    .text-green-sm {
        color: #00ae1c !important;
    }

    .text-violet {
        color: #9d31ff !important;
    }

    .text-orange {
        color: #ee6002 !important;
    }

    .text-red {
        color: #ff3030 !important;
    }

    .text-blue {
        color: #4875ff !important;
    }

    .cancel-btn {
        border: 1px solid var(--clr-primary);
        border-radius: 5px;
        color: var(--clr-primary) !important;
        padding: 6px 22px;
        margin-right: 10px;
        background-color: transparent;
    }

    .cancel-btn:hover {
        background-color: var(--clr-primary);
        color: white !important;
    }

    .save-btn {
        background: #2db0f6;
        color: #fff;
        border-radius: 5px;
        padding: 6px 30px;
    }

    .pos-up-down-arrow {
        position: relative;
    }

    .pos-up-down-arrow span {
        border-bottom: 2px solid #999;
        border-right: 2px solid #999;
        pointer-events: none;
        content: "";
        position: absolute;
        top: 30%;
        right: 20px;
        height: 10px;
        width: 10px;
        -webkit-transform-origin: 66% 66%;
        -ms-transform-origin: 66% 66%;
        transform-origin: 66% 66%;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-transition: all 0.15s ease-in-out;
        transition: all 0.15s ease-in-out;
    }

    .pos-up-down-arrow:hover span {
        transform: rotate(225deg);
    }

    .modal-custom-design .btn-close {
        background: transparent url("../images/icons/modal-cross-btn.svg") !important;
    }

    .modal-custom-design h1 {
        color: #2e2e3e;
        font-size: 20px !important;
        font-style: normal;
        font-weight: 500;
        line-height: 30px;
    }

    .business-thead {
        border-top: 1px solid #d8d8d8;
        border-bottom: 1px solid #d8d8d8;
    }

    .modal-custom-design label {
        color: #2e2e3e;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }

    .modal-custom-design .form-control:focus {
        border-color: #ced4da;
        box-shadow: none !important;
    }

    .m-h-100 {
        min-height: 100vh;
    }

    .table-search .position-absolute {
        top: 50%;
        transform: translateY(-50%) !important;
        right: 1%;
        height: 30px;
        width: 30px;
        /* background: var(--clr-primary); */
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
    }

    .dropdown-item.active,
    .dropdown-item:active,
    .nav-pills .nav-link.active,
    .nav-pills .show>.nav-link,
    .btn-primary {
        background-color: var(--clr-primary) !important;
        border: none;
    }

    /*=====================
        3 Side Bar
    =======================*/
    /* sidebar menu end css */
    .side-bar {
        /* padding: 0 10px; */
        position: fixed;
        top: 0;
        left: 0;
        width: 15%;
        height: 100%;
        z-index: 10;
        overflow-y: auto;
        overflow-x: hidden;
        opacity: 1;
        visibility: visible;
        background: #131313;
        box-shadow: 0px 0px 5px rgba(45, 51, 103, 0.15);
        transition: all 0.4s ease;
        font-family: Inter !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        line-height: 22px !important;
        text-align: left !important;
    }

    /* Scrollbar Styling */
    .side-bar::-webkit-scrollbar {
        width: 1px;
    }

    .side-bar::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
    }

    .side-bar::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.8);
    }

    .side-bar::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.3);
    }

    .padding-top-bottom {
        margin-top: 24px;
        margin-bottom: 24px;
    }

    .side-bar-logo {
        padding: 16px 12px;
        border-bottom: 1px solid #757575;
        background-color: transparent;
    }

    .side-bar-logo img {
        height: 40px;
        width: auto;
    }

    .pos-logo {
        display: none;
    }

    .pos-logo img {
        height: 44px;
        width: auto;
        object-fit: contain;
    }

    .padding-tb {
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .business-stat-container {
        background-color: white;
        border-radius: 12px;
        padding: 2%;
        width: 100%;
        box-shadow: 0px 4px 30px 0px #2020200d;
    }

    .business-stat {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        height: auto;
        width: 100%;
    }

    .business-stat.columns-1 {
        grid-template-columns: 1fr;
    }

    .business-stat.columns-2 {
        grid-template-columns: 1fr 1fr;
    }

    .business-stat.columns-3 {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .business-stat.columns-4 {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    .table-product-qt {
        color: var(--clr-primary) !important;
    }

    .dashboard-chart {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px;
    }

    .dashboard-chart h4 {
        font-size: 18px;
        font-weight: 600;
    }

    .tab-table-container {
        background-color: white;
        border-radius: 12px;
        height: 350px;
    }

    .table-container {
        max-height: 260px;
        overflow-y: auto;
    }

    /* table tab */
    .custom-tabs {
        display: flex;
        border-bottom: 1px solid #d8d8d8;
    }

    .custom-tabs .tab-item {
        padding: 10px 20px;
        cursor: pointer;
        color: #555;
        font-weight: bold;
        border: none;
        background: transparent;
        outline: none;
        transition: color 0.3s ease;
    }

    .custom-tabs .tab-item.active {
        color: var(--clr-primary);
        border-bottom: 2px solid var(--clr-primary);
        background: linear-gradient(180deg,
                rgba(197, 33, 39, 0.012) 0%,
                rgba(197, 33, 39, 0.045) 55.15%,
                rgba(197, 33, 39, 0.12) 100%);
    }

    .dashboard-tab {
        display: none;
    }

    .dashboard-tab.active {
        display: block;
    }

    .nav-name {
        font-size: 14px;
        font-weight: 600;
        color: #121212;
    }

    .nav-greeting {
        font-size: 14px;
        font-weight: 400;
        color: #4d4d4d;
    }

    @media (max-width: 1200px) {
        .business-stat {
            grid-template-columns: 1fr 1fr 1fr 1fr;
        }
    }

    @media (max-width: 1024px) {
        .business-stat {
            grid-template-columns: 1fr 1fr 1fr;
        }
    }

    @media (max-width: 768px) {
        .business-stat {
            grid-template-columns: 1fr 1fr !important;
        }

        .loss-profit-container {
            flex-wrap: wrap;
        }
    }

    @media (max-width: 480px) {
        .business-stat {
            grid-template-columns: 1fr !important;
        }
    }

    .bus-stat-title {
        color: #4d4d4d !important;
        font-size: 15px !important;
        font-weight: 400 !important;
        line-height: 23px !important;
        white-space: nowrap !important;
    }

    .bus-month-title {
        color: #4d4d4d !important;
    }

    .bus-stat-count {
        color: #121212 !important;
        font-size: 20px !important;
        font-weight: 600 !important;
        line-height: 24.2px !important;
    }

    .bus-profit {
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 21px !important;
    }

    .bus-profit .profit {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #34c759 !important;
    }

    .bus-content {
        color: #4d4d4d !important;
    }

    .bus-profit .loss {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #ff3b30 !important;
    }

    .dashboard-table-header {
        /* background-color: white; */
        padding: 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .dashboard-table-header h3 {
        font-size: 18px;
        font-weight: 600;
    }

    .dashboard-table-header i {
        padding-left: 8px;
        font-weight: 400;
    }

    .dashboard-table-header a {
        color: var(--clr-primary);
    }

    .dashborad-table-container {
        background-color: white;
        border-radius: 12px;
        box-shadow: 0px 4px 30px 0px #2020200d;
        min-height: 330px;
        max-height: 370px;
        height: auto;
        overflow-y: auto;
    }

    .p-tb {
        padding: 10px 10px;
    }

    .dashboard-table-content {
        height: 100px !important;
    }

    .category-brand-img {
        height: 24px;
        width: 24px;
    }

    .close-btn {
        background: none;
        border: none;
        outline: none;
        color: #fff;
        font-size: 20px;
        position: absolute;
        right: 15px;
        top: 15px;
        display: none;
    }

    .multiple-button-group .reset-btn,
    .button-group .reset-btn {
        border: 1px solid #ef4444 !important;
        color: #ef4444 !important;
        min-width: 110px !important;
        font-size: 14px !important;
        padding: 9px 15px;
    }

    .multiple-button-group .multi-delete-btn,
    .multiple-button-group .multi-delete-btn {
        background: var(--clr-primary) !important;
        color: #fff !important;
        min-width: 110px !important;
        font-size: 14px !important;
    }

    .side-bar-manu .dropdown::before {
        content: "\f105";
        font-family: "Font Awesome 5 Pro";
        font-weight: 400;
        color: #aaabae;
        position: absolute;
        right: 15px;
        font-size: 16px;
        display: block;
        z-index: 3;
        top: 10px;
    }

    .side-bar-manu .dropdown.active>.dropdown-menu {
        display: block;
    }

    .side-bar-manu .dropdown.active>.dropdown-menu .dropdown {
        background: none;
    }

    .side-bar-manu .dropdown.active>.dropdown-menu .dropdown.active>a,
    .side-bar-manu .dropdown.active>.dropdown-menu .dropdown.active .active {
        background: var(--clr-primary);
    }

    .side-bar-manu .dropdown.active .active {
        background-color: var(--clr-primary);
    }

    .side-bar-manu li {
        position: relative;
        font-size: 11px !important;
        margin: 5px 0;
    }

    .side-bar-manu li a {
        position: relative;
        display: block;
        padding: 10px 18px;
        color: #fff;
        border-radius: 4px;
        z-index: 2;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        font-size: 0.9rem;
        font-weight: 400 !important;
        white-space: nowrap !important;
    }

    @media (max-width: 1400px) {
        .side-bar-manu li a {
            font-size: 0.8rem;
        }

        .side-bar {
            width: 17%;
        }

        /* .section-container {
            padding-left: 17% !important;
        } */
    }

    .side-bar-manu li a .sidebar-icon {
        display: inline-block;
        margin-right: 10px;
    }

    .side-bar-manu li a i {
        margin-right: 10px;
    }

    .side-bar-manu li:hover:before,
    .side-bar-manu li.active:before {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        -webkit-transition: all 0.4s ease;
        transition: all 0.4s ease;
        color: #fff;
    }

    .barcode-header {
        border-bottom: 1px solid #d8d8d8;
    }

    .barcode-table-th {
        background-color: #ffff !important;
    }

    .barcode-table .input-date {
        background-color: #f7f7f7 !important;
        height: 28px !important;
        padding: 5px;
    }

    .barcode-info input {
        height: 44px !important;
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
    }

    .barcode-info h5 {
        height: 44px !important;
        background-color: #f7f7f7;
        width: 62px;
        color: #121535;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #d8d8d8;
        border-right: 0;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
    }

    .barcode-container {
        margin: 20px;
    }

    .barcode-content {
        border: 1px solid #d8d8d880;
        border-radius: 4px;
        padding: 8px;
        text-align: center;
    }

    .barcode-content .title {
        font-size: 15px;
        color: #121535;
    }

    .barcode-content .price {
        font-size: 14px;
        color: #121535;
    }

    .barcode-content .price span {
        font-size: 14px;
        font-weight: 600;
        color: #121535;
    }

    .barcode-content .date {
        font-size: 12px;
        font-weight: 400;
        color: #121535;
    }

    .barcode-content img {
        width: 120px;
        height: 32px;
        object-fit: contain;
        margin-top: 4px;
        margin-bottom: 4px;
    }

    .no-product-alert {
        background-color: red;
        padding: 10px;
        border-radius: 4px;
        text-align: center;
        color: #121535;
        font-size: 16px;
        width: 100% !important;
    }

    .side-bar-manu li:hover>a,
    .side-bar-manu li.active>a {
        background-color: var(--clr-primary);
        color: #fff !important;
    }

    .side-bar-manu li .dropdown-menu {
        margin-left: 20px;
        /* border-left: 1px solid #fff; */
    }

    .side-bar-manu li .dropdown-menu li .dropdown-menu {
        margin-left: 0 !important;
        border: none !important;
    }

    .side-bar-manu li .dropdown-menu li .dropdown-menu .dropdown .dropdown-menu .dropdown {
        background: none !important;
        padding-left: 0 !important;
    }

    .side-bar-manu {
        padding: 0 10px;
        padding-top: 10px;
    }

    .side-bar-manu li .dropdown-menu li {
        padding-left: 15px !important;
    }

    .side-bar-manu li .dropdown-menu li a {
        color: #fff;
        padding: 5px 15px;
        position: relative;
    }

    .side-bar-manu li .dropdown-menu li a:hover,
    .side-bar-manu li .dropdown-menu li a.active {
        color: #fff !important;
    }

    .side-bar-manu li .dropdown-menu li li:hover:before,
    .side-bar-manu li .dropdown-menu li li.active:before {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    .side-bar-manu li .dropdown-menu li li:hover>a,
    .side-bar-manu li .dropdown-menu li li.active>a {
        background-color: var(--clr-primary);
        color: #fff !important;
    }

    .side-bar-manu .dropdown-menu {
        padding: 0;
        border-radius: 0;
        background: transparent;
    }

    .side-bar-manu .dropdown.active>.dropdown-menu .dropdown {
        background: none !important;
    }

    .side-bar .dropdown-menu {
        position: unset;
    }

    .side-bar li ul {
        display: none;
    }

    .side-bar-manu .sidebar-icon svg {
        fill: #fff;
        width: 18px;
        height: 18px;
    }

    .side-bar.active {
        width: 60px;
    }

    .side-bar.active .side-bar-manu .dropdown::before {
        opacity: 0;
    }

    .side-bar.active .side-bar-manu li a .sidebar-icon {
        margin-right: 30px;
        position: relative;
        left: -10px;
    }

    .side-bar.active .sidebar-icon img {
        width: 22px;
    }

    .side-bar.active:hover {
        width: 15.625%;
    }

    .side-bar.active:hover .side-bar-manu .dropdown::before {
        opacity: 1;
    }

    .side-bar.active:hover .side-bar-manu li a .sidebar-icon {
        margin-right: 10px;
        position: relative;
        left: 0px;
    }

    .side-bar.active:hover .sidebar-icon img {
        width: 16px;
    }

    .section-container {
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

    .section-container.active {
        padding-left: 60px;
    }

    .category-name {
        max-width: 100px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .brand-name {
        max-width: 100px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .nav-pills .nav-link.active,
    .nav-pills .show>.nav-link {
        background-color: var(--clr-primary);
    }

    .nav-link {
        color: var(--clr-primary);
    }

    /* sidebar menu end css */
    /* header  start css */
    .header-wrapper {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 33% 33% 33%;
        grid-template-columns: 33% 33% 33%;
    }

    .main-header-section {
        padding: 14px 20px;
        background: #fff;
        -webkit-box-shadow: 8px 10px 80px rgba(0, 15, 55, 0.04);
        box-shadow: 8px 10px 80px rgba(0, 15, 55, 0.04);
    }

    .main-header-section .profile-info img {
        height: 50px;
        width: 50px;
        min-width: 50px;
        border-radius: 50%;
    }

    .main-header-section .profile-info img span {
        font-size: 16px;
    }

    .main-header-section .profile-info .dropdown-menu {
        background: #fff;
        -webkit-box-shadow: 0px 0px 7px -5px rgba(0, 0, 0, 0.75);
        box-shadow: 0px 0px 7px -5px rgba(0, 0, 0, 0.75);
        min-width: 160px;
    }

    .main-header-section .profile-info .dropdown-menu li {
        border-bottom: 1px solid #454a54;
        font-size: 12px;
        padding: 0;
        display: block;
        border-bottom: 1px solid #ccc;
    }

    .main-header-section .profile-info .dropdown-menu li a {
        display: block;
        color: #000;
        padding: 8px 10px;
    }

    .main-header-section .profile-info .dropdown-menu li a i {
        margin-right: 10px;
    }

    .main-header-section .profile-info .dropdown-menu li a:hover {
        color: var(--clr-primary);
    }

    .main-header-section .dropdown-menu {
        top: 60% !important;
        border: none;
        border-radius: 2px !important;
        padding: 0;
        min-width: 220px;
    }

    .main-header-section .business-profile {
        position: absolute;
        margin-top: 25px;
    }

    .p-lr {
        padding: 0 1%;
    }

    @media (max-width: 767px) {
        .view-website {
            display: none;
        }

        .notifications {
            display: none;
        }

        .greet-name {
            display: none;
        }

        .pos-logo {
            display: block;
        }

        .menu-opener {
            display: none !important;
        }
    }

    @media (max-width: 767px) {
        .menu-openerr {
            display: block !important;
        }
    }

    @media (min-width: 992px) {
        .return-card {
            min-height: 100vh;
        }
    }

    .menu-openerr {
        display: none;
    }

    .header-button {
        border: 1px solid var(--clr-primary);
        display: flex;
        align-items: center;
        gap: 6px;
        color: var(--clr-primary);
    }

    .header-button:hover {
        color: var(--clr-primary);
        border: 1px solid var(--clr-primary);
    }

    .header-left {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .header-right {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }

    .language-change {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .language-change img {
        height: 24px;
        width: 24px;
        border-radius: 50%;
        object-fit: cover;
    }

    .language-btn {
        border: none;
    }

    .language-container {
        border-radius: 10px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .notification-container {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .language-change .nice-select {
        background: none;
        border: none;
    }

    .language-change .nice-select:after {
        border-color: #000;
        height: 7px;
        top: 46%;
        width: 7px;
    }

    .header-calender {
        height: 45px;
        width: 45px;
        line-height: 45px;
        text-align: center;
        cursor: pointer;
    }

    .notifications.dropdown>a {
        position: relative;
        display: block;
        padding: 0;
        color: #737881;
        height: 45px;
        width: 45px;
        text-align: center;
        line-height: 45px;
    }

    .notifications.dropdown>a.show {
        background-color: #eee;
        -webkit-border-radius: 3px 3px 0 0;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 3px 3px 0 0;
        -moz-background-clip: padding;
        border-radius: 3px 3px 0 0;
        background-clip: padding-box;
    }

    .bg-info {
        background: #21a9e1;
        color: #fff;
    }

    .text-red {
        color: red !important;
    }

    .notifications {
        margin-left: 10px;
    }

    .notifications .dropdown-toggleer {
        position: relative;
    }

    .notifications .dropdown-toggleer span {
        display: block;
        height: 17px;
        width: 17px;
        border-radius: 50%;
        line-height: 17px;
        text-align: center;
        font-size: 10px;
        position: absolute;
        top: 2px;
        right: 6px;
    }

    .dark-icon {
        margin: 0 0 0 10px;
        display: block;
    }

    .notifications .dropdown-menu {
        top: 0 !important;
        background: #eee;
        min-width: 370px;
    }

    .notifications ul li a {
        padding: 10px 20px;
        display: block;
        border-top: 1px solid #ddd;
    }

    .notifications ul li a span,
    .notifications ul li a strong {
        display: block;
        font-size: 12px;
    }

    .notifications ul li a span {
        color: #888888;
        line-height: 1;
        margin-top: 5px;
    }

    .notification-header {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 10px;
        background: #eee;
    }

    .notification-header p {
        font-size: 12px;
    }

    .notification-header a {
        font-size: 12px;
    }

    .bg-red {
        background: #ee4749;
        color: #fff;
    }

    .notification-footer {
        background: #fff;
        padding: 10px;
        line-height: 1;
    }

    .notification-footer a {
        font-size: 12px;
        line-height: 1;
    }

    .msg-items {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .msg-items .content {
        width: 100%;
    }

    .msg-items .content strong {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .msg-items .content strong span {
        margin: 0;
        margin-left: 10px;
        font-weight: 400;
    }

    .msg-items img {
        height: 50px;
        width: 50px;
        min-width: 50px;
        border-radius: 50%;
        margin-left: 15px;
    }

    .bg-yellow {
        background: yellow;
    }

    .sidebar-opner {
        cursor: pointer;
        font-size: 20px;
        color: #000;
        margin-left: 10px;
        margin-right: 15px;
    }

    .header-middle input {
        background: none !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
    }

    .search-btn {
        background: var(--clr-primary) !important;
        color: #fff !important;
    }

    /* header  end css */
    .section-container {
        padding-left: 15%;
    }

    @media (max-width: 768px) {
        .amount-container {
            grid-template-columns: 1fr 1fr;
        }
    }

    .erp-state-overview-section {
        padding-top: 30px;
    }

    .erp-state-overview-wrapper {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr 30px 1fr 30px 1fr 30px 1fr 30px 1fr;
        grid-template-columns: repeat(5, 1fr);
        gap: 30px;
    }

    .container-fluid {
        padding: 1.5%;
        width: 100%;
    }

    .state-overview-box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        background: #ffffff;
        -webkit-box-shadow: 0px 0px 1px rgba(12, 26, 75, 0.24),
            0px 3px 8px -1px rgba(71, 50, 50, 0.05);
        box-shadow: 0px 0px 1px rgba(12, 26, 75, 0.24),
            0px 3px 8px -1px rgba(71, 50, 50, 0.05);
        border-radius: 25px;
        padding: 10px;
        gap: 15px;
    }

    .state-overview-box .icons {
        height: 100px;
        width: 100px;
        min-width: 100px;
        background: rgba(255, 16, 188, 0.1);
        border-radius: 17px;
        text-align: center;
        line-height: 100px;
    }

    .state-overview-box h2 {
        font-weight: 500;
        font-size: 30px;
        line-height: 35px;
        color: #0c1928;
    }

    .state-overview-box p {
        font-weight: 400;
        font-size: 18px;
        line-height: 21px;
        color: #555e69;
    }

    .state-overview-box:nth-child(2) .icons {
        background: rgba(255, 206, 42, 0.1);
    }

    .state-overview-box:nth-child(3) .icons {
        background: rgba(23, 218, 148, 0.1);
    }

    .state-overview-box:nth-child(4) .icons {
        background: rgba(23, 218, 148, 0.1);
    }

    .state-overview-box:nth-child(5) .icons {
        background: rgba(3, 169, 244, 0.1);
    }

    .erp-graph-box {
        margin-top: 30px;
        background: #ffffff;
        -webkit-box-shadow: 0px 0px 1px rgba(12, 26, 75, 0.24),
            0px 3px 8px -1px rgba(71, 50, 50, 0.05);
        box-shadow: 0px 0px 1px rgba(12, 26, 75, 0.24),
            0px 3px 8px -1px rgba(71, 50, 50, 0.05);
        border-radius: 25px;
    }

    .erp-graph-box .graph-header {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        background: rgba(255, 73, 128, 0.1);
        -webkit-box-shadow: 8px 10px 80px rgba(0, 15, 55, 0.04);
        box-shadow: 8px 10px 80px rgba(0, 15, 55, 0.04);
        border-radius: 25px 25px 0px 0px;
        padding: 15px 20px;
    }

    .erp-graph-box .graph-header h4 {
        font-weight: 400;
        font-size: 16px;
        line-height: 21px;
        color: #0c1928;
    }

    .erp-graph-box .graph-header .nice-select {
        height: auto;
        line-height: 1;
        background: none;
        border: none;
        font-size: 16px;
        color: #0c1928;
    }

    .erp-graph-box .graph-header .nice-select:after {
        height: 7px;
        width: 7px;
        border-color: #000;
        top: 45%;
    }

    .erp-graph-box .erp-box-content {
        padding: 15px;
        overflow: auto;
    }

    .erp-box-content .top-customer-table {
        overflow: auto;
    }

    .yearly-status .graph-header {
        background: rgba(175, 73, 255, 0.1);
    }

    .top-customer .graph-header {
        background: rgba(209, 255, 26, 0.2);
        -webkit-box-shadow: 8px 10px 80px rgba(0, 15, 55, 0.04);
        box-shadow: 8px 10px 80px rgba(0, 15, 55, 0.04);
    }

    .new-order .graph-header {
        background: rgba(14, 180, 255, 0.1);
        color: #0eb4ff;
    }

    .table-profile {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .table-profile .user-img {
        margin-right: 10px;
    }

    .table-profile .user-img img {
        height: 40px;
        width: 40px;
        min-width: 40px;
        border-radius: 50%;
    }

    .table-profile span {
        font-weight: 400;
        font-size: 12px;
        line-height: 14px;
        color: #03a9f4;
        display: block;
        opacity: 0.6;
    }

    .table-profile strong {
        font-weight: 400;
        font-size: 16px;
        line-height: 19px;
        color: #0c1928;
        opacity: 0.7;
    }

    .table-profile-order {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        text-align: left;
    }

    .table-profile-order .user-img {
        margin-right: 10px;
    }

    .table-profile-order .user-img img {
        height: 40px;
        width: 40px;
        min-width: 40px;
        border-radius: 5px;
    }

    .table-profile-order span {
        font-weight: 400;
        font-size: 12px;
        line-height: 14px;
        color: #03a9f4;
        display: block;
        opacity: 0.6;
    }

    .table-profile-order strong {
        font-weight: 400;
        font-size: 16px;
        line-height: 19px;
        color: #0c1928;
        opacity: 0.7;
    }

    .top-customer-table td {
        font-weight: 400;
        font-size: 14px;
        line-height: 16px;
        color: #0c1928;
        text-align: center;
        vertical-align: middle;
        padding: 5px;
        border: none;
    }

    .top-customer-table a {
        color: #03a9f4;
    }

    .status-btn {
        font-weight: 400;
        font-size: 12px;
        line-height: 16px;
        text-align: center;
        padding: 8px 20px;
        border-radius: 8px;
        border: none;
        line-height: 1;
        border-radius: 8px;
        min-width: 90px;
    }

    .m-lr {
        margin-right: 12px;
        margin-left: 12px;
    }

    .pending {
        background: rgba(255, 164, 28, 0.2) !important;
        color: #ffa41c !important;
    }

    .aproved {
        background: rgba(37, 212, 169, 0.1) !important;
        color: #25d4a9 !important;
    }

    /* table css start css */
    .erp-table-section {
        /* padding-top: 30px; */
        font-family: "Inter", sans-serif;
    }

    .erp-table-section.dashboard .card {
        min-height: 0 !important;
    }

    .table-header {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        /* padding-bottom: 15px; */
        border-bottom: 1px solid rgba(126, 126, 126, 0.3) !important;
    }

    .privacy-condition-header {
        border-bottom: 1px solid rgba(126, 126, 126, 0.3);
    }

    .table-header h4 {
        font-weight: 600;
        font-size: 20px;
        text-transform: capitalize;
        color: #191919;
        font-family: "Inter", sans-serif;
        white-space: nowrap;
    }

    .table-header.p-16 {
        padding: 16px;
    }

    .table-header h3 {
        font-weight: 600;
    }

    .table-header .button-group {
        border-bottom: 1px solid var(--clr-primary);
    }

    .table-header .button-group a {
        background: none !important;
        color: #7e7e7e !important;
        border-radius: 6px 6px 0px 0px;
    }

    .table-header .button-group a.active {
        background: var(--clr-primary) !important;
        color: #fff !important;
    }

    .erp-table-section .searchResults .w-60 {
        text-align: left !important;
    }

    .add-order-btn {
        background: var(--clr-primary) !important;
        color: #fff !important;
        font-size: 16px;
        font-weight: 600;
        line-height: 24px;
        padding: 6px 12px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .grid-5 {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .table-top-form {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .table-top-form form {
        max-width: 1100px;
    }

    .table-top-form .form-control {
        height: 37px;
        line-height: 1;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        color: #4d4d4d;
        font-weight: 500;
        font-size: 14px;
    }

    .table-top-form .nice-select .list {
        width: 100%;
    }

    .input-wrapper {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        width: 100%;
    }

    .form-control:focus {
        box-shadow: none !important;
        outline: 0 !important;
        border-color: #e4e5e7 !important;
    }

    .input-wrapper>.form-control,
    .input-wrapper .form-select {
        position: relative;
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        width: 1%;
        min-width: 0;
        margin: 0 10px;
    }

    .table-top-btn-group ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 10px;
        align-items: end;
    }

    .table-top-btn-group {
        display: flex;
        align-items: end;
        justify-content: end;
    }

    /* .mybazar-login-section {
        background-color: red;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    } */

    .responsive-table {
        overflow: auto;
        margin-top: 20px;
        min-height: 100vh;
    }

    .responsive-table table tr th:first-child {
        width: 0;
        text-align: left;
    }

    .table th {
        font-style: normal;
        font-weight: 600;
        font-size: 15px;
        line-height: 24px;
        text-transform: capitalize;
        color: #121212;
        background: rgba(31, 31, 31, 0.05);
    }

    .table th,
    .table td {
        border-bottom: 1px solid rgba(31, 31, 31, 0.1);
        vertical-align: middle;
        text-align: center;
        white-space: nowrap;
    }

    .table td {
        font-weight: 400;
        font-size: 15px;
        line-height: 24px;
        color: #424242;
        text-align: center;
    }

    .table-two td {
        font-weight: 500;
        font-size: 10px;
        line-height: 22px;
        text-transform: capitalize;
        color: #191919;
        vertical-align: middle !important;
    }

    .table-two th,
    .table-two td {
        border: 1px solid rgba(0, 0, 0, 0.5);
        background: none;
    }

    .table-two th {
        font-weight: 500;
        font-size: 14px !important;
        line-height: 22px;
        text-transform: capitalize;
        color: #191919;
    }

    .table-two thead td {
        font-weight: 500;
        font-size: 12px;
        line-height: 20px;
        text-transform: capitalize;
        color: #191919;
        white-space: pre-wrap;
        vertical-align: bottom;
    }

    .loss-profit-table td,
    .loss-profit-table th {
        min-width: 100px !important;
        font-size: 12px;
    }

    .table-img {
        height: 40px;
        width: 40px;
        object-fit: cover;
        border-radius: 4px;
    }

    .table-product-img {
        height: 40px;
        width: 40px;
        border-radius: 4px;
        object-fit: cover;
    }

    .yes-badge {
        background-color: #34c759;
        color: white;
        padding: 6px;
        height: 24px;
        width: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 3px;
    }

    .no-badge {
        background-color: #ff3b30;
        color: white;
        padding: 6px;
        height: 24px;
        width: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 3px;
    }

    .view-website {
        border: 1px solid var(--clr-primary);
        padding: 6px;
        border-radius: 4px;
    }

    .table-action button {
        font-size: 22px;
        background: none;
        border: none;
        outline: none;
        text-align: center;
        display: block;
        width: 100%;
    }

    .table-action .dropdown-menu {
        min-width: 200px;
        padding: 0;
        background: #ffffff;
        -webkit-box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.05);
        box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.05);
        border-radius: 4px;
        padding: 10px;
        padding: 0;
        z-index: 2;
    }

    .sales-input {
        width: 75px !important;
    }

    .table-action .dropdown-menu a {
        font-weight: 400;
        font-size: 12px;
        line-height: 16px;
        color: #7e7e7e;
        display: block;
        padding: 10px 15px;
    }

    /* .table {
        table-layout: fixed;
        width: 100%;
    } */

    .table-action .dropdown-menu a i {
        margin-right: 7px;
        margin-left: 3px;
        color: #4d4d4d !important;
        font-weight: 500;
    }

    .table-action .dropdown-menu a img {
        margin-right: 6px;
        /* height: 12px;
        width: 12px; */
    }

    .table-action .dropdown-menu a:hover {
        background: #eee;
    }

    .pagination {
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }

    .pagination .page-link {
        font-weight: 500;
        font-size: 16px;
        line-height: 22px;
        color: #7e7e7e;
        border: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        background: none;
    }

    .pagination .page-item.active .page-link {
        color: #fff;
        width: 30px;
        height: 30px;
        background: var(--clr-primary);
        border-radius: 50%;
        line-height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pagination .page-link.active,
    .pagination .page-link:hover {
        color: var(--clr-primary);
        background: none;
    }

    .ui-widget.ui-widget-content {
        z-index: 3 !important;
    }

    /* dashboard home page css start */
    .gpt-overview-section {
        padding-top: 30px;
    }

    .counter-grid-6 {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 10px;
    }

    .gpt-dashboard-card .couter-box {
        border-radius: 16px;
        background: #fff;
        padding: 18px;
        -webkit-box-pack: stretch;
        -ms-flex-pack: stretch;
        justify-content: stretch;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .gpt-dashboard-card .couter-box p {
        color: #fff;
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: 28px;
    }

    .gpt-dashboard-card .couter-box h5 {
        color: #fff;
        font-size: 24px;
        line-height: 32px;
        font-style: normal;
        font-weight: 700;
    }

    .gpt-dashboard-card .couter-box .icons {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        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;
        align-items: center;
        background-color: rgba(255, 255, 255, 0.2);
    }

    .gpt-dashboard-card .couter-box .icons img {
        height: 30px;
        width: 30px;
    }

    .gpt-dashboard-card .couter-box:nth-child(1) {
        background: linear-gradient(270deg, #ff7db8 0%, #ee2a7b 100%);
    }

    .gpt-dashboard-card .couter-box:nth-child(2) {
        background: linear-gradient(270deg, #e100ff 0%, #7f00ff 100%);
    }

    .gpt-dashboard-card .couter-box:nth-child(3) {
        background: linear-gradient(270deg, #00aeef 0%, #2d388a 100%);
    }

    .gpt-dashboard-card .couter-box:nth-child(4) {
        background: linear-gradient(270deg, #fbb040 0%, #ef4136 100%);
    }

    .gpt-dashboard-card .couter-box:nth-child(5) {
        background: linear-gradient(270deg, #00f39c 0%, #009af3 100%);
    }

    .gpt-dashboard-card .couter-box:nth-child(6) {
        background-color: #ffe7c8;
    }

    .gpt-dashboard-chart .new-card {
        border: none !important;
        background-color: #fff;
        -webkit-box-shadow: 0px 0px 1px rgba(12, 26, 75, 0.24),
            0px 3px 8px -1px rgba(71, 50, 50, 0.05);
        box-shadow: 0px 0px 1px rgba(12, 26, 75, 0.24),
            0px 3px 8px -1px rgba(71, 50, 50, 0.05);
    }

    .gpt-dashboard-chart .new-card .four-card-content {
        min-height: 351px;
    }

    .gpt-dashboard-chart .new-card .col-sm-6:nth-child(1) .four-card {
        background-color: #ffe9e0;
    }

    .gpt-dashboard-chart .new-card .col-sm-6:nth-child(2) .four-card {
        background-color: #dafcff;
    }

    .gpt-dashboard-chart .new-card .col-sm-6:nth-child(3) .four-card {
        background-color: #e3e9fe;
    }

    .gpt-dashboard-chart .new-card .col-sm-6:nth-child(4) .four-card {
        background-color: #def5eb;
    }

    .gpt-dashboard-chart .new-card .four-card h6 {
        color: #585865;
        font-size: 17px;
        font-style: normal;
        font-weight: 500;
        line-height: 27px;
    }

    .gpt-dashboard-chart .new-card .four-card h4 {
        color: #2e2e3e;
        font-size: 22px;
        font-style: normal;
        font-weight: 500;
        line-height: 30px;
    }

    .gpt-dashboard-chart .new-card .four-card span {
        color: #525252;
        font-size: 13px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px;
    }

    .gpt-dashboard-chart .new-card .four-card .time p {
        color: #585865;
        font-size: 15px;
        font-style: normal;
        font-weight: 400;
        line-height: 25px;
    }

    .gpt-dashboard-chart .new-card .four-card .time h6 {
        color: #2e2e3e;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 26px;
    }

    .gpt-dashboard-chart .card-header {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        gap: 15px;
        padding: 10px 20px !important;
        background-color: #fff;
        border-bottom: 1px solid #dedede;
    }

    .gpt-dashboard-chart .feedback .table td {
        padding: 1px 15px;
    }

    .gpt-dashboard-chart .table th {
        background-color: #fcfbfb;
        text-align: left;
        border: none;
        color: #2e2e3e;
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 18px;
        padding: 15px;
    }

    .gpt-dashboard-chart .table td {
        text-align: left;
        color: #585865;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px;
        padding: 11.5px 15px;
    }

    .dashboard-table-content thead th {
        background-color: #fcfbfb;
        text-align: left;
        border: none;
        color: #2e2e3e;
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 18px;
        padding: 15px;
        padding-left: 50px;
        border-bottom: 1px solid #d8d8d8;
    }

    .dashboard-table-content tbody td {
        text-align: left;
        color: #585865;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px;
        padding: 11.5px 15px;
        padding-left: 50px;
    }

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

    .gpt-dashboard-chart .view-all p {
        color: #585865;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
    }

    .gpt-dashboard-chart .view-all p a {
        color: #2db0f6;
    }

    .gpt-dashboard-chart .view-all p img {
        margin-top: -3px;
    }

    .gpt-dashboard-chart .top-five-country h6,
    .gpt-dashboard-chart .notice h6 {
        color: #2e2e3e;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
    }

    .gpt-dashboard-chart .top-five-country p,
    .gpt-dashboard-chart .notice p {
        color: #585865;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
    }

    .gpt-dashboard-chart .content {
        max-height: 300px;
        min-height: 300px;
    }

    .gpt-dashboard-chart .content #revenueChart {
        max-height: 300px;
        min-height: 300px;
    }

    .gpt-dashboard-chart .overallContent #Overallreports {
        max-height: 300px;
        min-height: 300px;
    }

    .gpt-dashboard-chart .overallContent {
        min-height: 270px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    @media (max-width: 991px) {
        .gpt-dashboard-chart .overallContent {
            max-height: 400px;
            min-height: 400px;
        }

        .overall-level-container {
            display: flex;
            gap: 16px;
            flex-direction: row !important;
            justify-content: center;
            flex-wrap: wrap;
        }
    }

    .overall-level-container {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .profit-bulet {
        height: 10px;
        width: 10px;
        border-radius: 3px;
        background-color: #a507ff;
    }

    .loss-bulet {
        height: 10px;
        width: 10px;
        border-radius: 3px;
        background-color: #ff3b30;
    }

    .purchase-bulet {
        height: 10px;
        width: 10px;
        border-radius: 50%;
        background-color: #fd8d00;
    }

    .sales-bulet {
        height: 10px;
        width: 10px;
        border-radius: 50%;
        background-color: #8554ff;
    }

    .income-bulet {
        height: 10px;
        width: 10px;
        border-radius: 50%;
        background-color: #08c738;
    }

    .expense-bulet {
        height: 10px;
        width: 10px;
        border-radius: 50%;
        background-color: #ff3b30;
    }

    .gpt-dashboard-chart .top-five-country div {
        padding: 12px 0;
    }

    .gpt-dashboard-chart .top-five-country div:first-child {
        padding-top: 0;
    }

    .gpt-dashboard-chart .top-five-country div:last-child {
        padding-bottom: 0;
    }

    .gpt-dashboard-chart .notice .notice-content div {
        border-bottom: 1px solid #dedede;
        padding: 12px 0;
    }

    .gpt-dashboard-chart .notice .notice-content div:first-child {
        padding-top: 0;
    }

    .gpt-dashboard-chart .notice .notice-content div:last-child {
        padding-bottom: 0;
        border: 0;
    }

    .gpt-dashboard-chart .card-header .form-control:focus {
        border-color: #ced4da !important;
        box-shadow: none !important;
    }

    .gpt-dashboard-chart .card-header .gpt-up-down-arrow span {
        top: 30% !important;
    }

    .grid-5 .gpt-up-down-arrow span {
        top: 24% !important;
    }

    .gpt-dashboard-chart .card ::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }

    .gpt-dashboard-chart .card ::-webkit-scrollbar-button {
        background: #ccc;
    }

    .gpt-dashboard-chart .card ::-webkit-scrollbar-track-piece {
        background: #888;
    }

    .gpt-dashboard-chart .card ::-webkit-scrollbar-thumb {
        background: #eee;
    }

    .gpt-dashboard-chart .users-header {
        border-bottom: none !important;
        padding: 10px 20px !important;
        background-color: #ffa31a26;
    }

    .order-form-section label,
    .permission label,
    .role-input-label label {
        font-weight: 400;
        font-size: 14px;
        line-height: 22px;
        text-align: center;
        color: #191919;
        background: #fff;
        position: relative;
        left: 20px;
        top: 11px;
        padding: 0 10px;
        z-index: 2;
        line-height: 1;
    }

    .modal-body label {
        font-weight: 400;
        font-size: 14px;
        line-height: 22px;
        text-align: center;
        color: #191919;
        background: #fff;
        position: relative;
        left: 10px;
        top: 7px;
        padding: 0 10px;
        z-index: 2;
        line-height: 1;
    }

    .delete-cancel-group {
        position: absolute;
        bottom: 16px;
    }

    .search-product {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 8px;
    }

    .search-product-card {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
    }

    @media (max-width: 1600px) {
        .search-product-card {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    @media (max-width: 1200px) {
        .search-product-card {
            grid-template-columns: repeat(4, 1fr);
        }

        .products .single-product .pro-img img {
            height: 130px;
        }
    }

    @media (max-width: 900px) {
        .search-product-card {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    @media (max-width: 480px) {
        .search-product-card {
            grid-template-columns: repeat(2, 1fr);
        }

        .search-product {
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }

        .search-product {
            grid-template-columns: 1fr;
        }
    }

    .order-form-section .feature-list label {
        top: 0px !important;
    }

    .order-form-section .feature-list .accordion-item {
        margin-bottom: 20px !important;
        border: 1px solid #dedede !important;
        padding: 10px;
        gap: 8px;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0px 3px 8px -1px rgba(50, 57, 71, 0.05),
            0px 0px 1px 0px rgba(65, 76, 105, 0.24);
    }

    .order-form-section .features-input {
        position: relative;
        top: -25px;
        width: 39%;
        padding: 0px 3px !important;
    }

    .order-form-section .feature-list .accordion-button:focus {
        box-shadow: none !important;
    }

    .order-form-section .feature-list .accordion-button:not(.collapsed) {
        color: #231f20 !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }

    .order-form-section .feature-list .accordion-button {
        color: #231f20;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 26px;
        padding: 0 !important;
    }

    .order-form-section .feature-list .accordion-body {
        padding: 0 !important;
    }

    .order-form-section .feature-list .accordion-button::after {
        background-image: url("../images/icons/accordin-arrow-down.svg") !important;
        position: absolute;
        right: 100px;
    }

    .order-form-section .feature-list .accordion-button:not(.collapsed)::after {
        background-image: url("../images/icons/accordin-arrow-up.svg") !important;
    }

    .order-form-section .feature-list .accordion-header input {
        color: #2e2e3e;
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: 28px;
    }

    .order-form-section .feature-list .accordion-body input {
        color: #585865;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
    }

    .order-form-section .form-control,
    .role-input-label .form-control {
        -webkit-box-shadow: none;
        box-shadow: none;
        background: #ffffff;
        border: 1px solid #e4e5e7;
        border-radius: 6px;
        /* padding: 12px 15px; */
        height: 48px;
        font-weight: 400;
        line-height: 37px;
    }

    .permission .form-control {
        -webkit-box-shadow: none;
        box-shadow: none;
        background: #ffffff;
        border: 1px solid #e4e5e7;
        border-radius: 6px;
        /* padding: 12px 15px; */
        height: 48px;
        font-weight: 400;
        line-height: 37px;
    }

    .modal-body .form-control {
        -webkit-box-shadow: none;
        box-shadow: none;
        background: #ffffff;
        border: 1px solid #e4e5e7;
        border-radius: 6px;
        padding: 12px 15px;
        font-weight: 400;
    }

    .order-form-section .form-control:focus {
        background-color: transparent !important;
        z-index: 0;
    }

    .order-form-section .form-control .form-control {
        padding: 0px 1px;
    }

    .order-form-section .form-control::-webkit-input-placeholder {
        font-weight: 400;
        font-size: 13px;
        line-height: 20px;
        color: #7e7e7e;
    }

    .order-form-section .form-control::-moz-placeholder {
        font-weight: 400;
        font-size: 13px;
        line-height: 20px;
        color: #7e7e7e;
    }

    .order-form-section .form-control:-ms-input-placeholder {
        font-weight: 400;
        font-size: 13px;
        line-height: 20px;
        color: #7e7e7e;
    }

    .order-form-section .form-control::-ms-input-placeholder {
        font-weight: 400;
        font-size: 13px;
        line-height: 20px;
        color: #7e7e7e;
    }

    .order-form-section .form-control::placeholder {
        font-weight: 400;
        font-size: 13px;
        line-height: 20px;
        color: #7e7e7e;
    }

    .order-form-section .table-select {
        height: 48px;
        line-height: 24px;
    }

    .order-form-section h6 {
        font-weight: 600;
    }

    .upload-img {
        margin-top: 10px;
        top: 0 !important;
        left: 0 !important;
        background: #ffffff;
        border: 2px solid rgba(126, 126, 126, 0.4);
        border-radius: 10px;
        display: block;
        height: 206px;
        cursor: pointer;
        position: relative;
        text-align: center;
    }

    .upload-img i {
        position: absolute;
        font-size: 30px;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    .upload-img p {
        position: absolute;
        bottom: 15px;
        left: 0;
        width: 100%;
        font-weight: 400;
        line-height: 22px;
        text-transform: capitalize;
        color: #555e69;
    }

    .loss-profit-container {
        background-color: white;
        padding: 16px 16px;
        border-radius: 12px;
        box-shadow: 0px 4px 24px 0px #e4c3c30d;
    }

    @media (max-width: 576px) {
        .loss-profit-date-range {
            flex-wrap: wrap;
        }
    }

    .upload-img .image-thumb {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    .add-color-btn {
        border: 1px solid var(--clr-primary);
        border-radius: 3px;
        padding: 2px 8px;
        font-size: 10px;
        color: var(--clr-primary);
        cursor: pointer;
        display: inline-block;
        line-height: 1.6;
    }

    input[type="date"] {
        min-width: 125px !important;
    }

    .theme-btn {
        min-width: 134px;
        background: var(--clr-primary) !important;
        border-radius: 8px;
        color: #fff;
        border: none;
        padding: 10px;
        font-size: 16px;
        font-weight: 600;
        display: inline-block;
        text-align: center;
    }

    .theme-btn:hover {
        color: white;
    }

    @media (max-width: 425px) {
        .theme-btn {
            padding: 6px;
        }
    }

    .border-btn {
        border: 1px solid #ff3b30;
        border-radius: 8px;
        background: none !important;
        color: #ff3b30;
    }

    .border-btn:hover {
        color: var(--clr-primary);
    }

    .table-title {
        text-align: center;
        background: #ffe6cc;
        border-radius: 5px 5px 0px 0px;
        font-weight: 600;
        font-size: 14px;
        line-height: 22px;
        text-transform: capitalize;
        color: #191919;
        padding: 5px 10px;
    }

    .status-btn {
        display: inline-block;
        font-weight: 500;
        font-size: 13px;
        line-height: 18px;
        text-transform: capitalize;
        padding: 3px 10px;
        border-radius: 4px;
        min-width: 72px;
    }

    .pending2 {
        color: #555e69;
        background: rgba(85, 94, 105, 0.1);
    }

    .complete {
        background: rgba(6, 178, 75, 0.1);
        color: #06b34b;
    }

    .canceled {
        background: rgba(255, 98, 125, 0.1);
        color: #ff627d;
    }

    .select-tow {
        height: 36px;
        line-height: 16px;
        width: 100%;
        font-weight: 600;
    }

    .select-tow .list {
        width: 100%;
    }

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

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

    .border-none {
        border: none;
    }

    .border-none:focus {
        border: none;
        outline: none;
    }

    .clr-black {
        color: #191919 !important;
        font-weight: 500;
    }

    .clr-black td,
    .clr-black th {
        color: #191919 !important;
    }

    b,
    strong {
        color: #191919 !important;
    }

    .small-table tr td {
        font-family: "Manrope";
        font-style: normal;
        font-weight: 500;
        font-size: 12px;
        line-height: 20px;
        text-transform: capitalize;
        color: #191919;
        text-align: left;
        padding: 5px 10px;
        word-wrap: wrap;
        white-space: pre-wrap !important;
    }

    .small-table tr td:first-child {
        max-width: 270px;
        width: 200px;
    }

    .small-table tbody th {
        text-align: left;
        font-size: 12px;
    }

    .small-table th {
        background: none;
        word-wrap: wrap;
        white-space: pre-wrap !important;
        color: #191919;
        font-weight: 700;
        font-size: 12px;
    }

    .clr-gray td {
        color: #7e7e7e !important;
    }

    .theme-border {
        border-color: var(--clr-primary);
        color: var(--clr-primary);
    }

    .title-four {
        text-align: center;
        font-family: "Manrope";
        font-style: normal;
        font-weight: 600;
        font-size: 20px;
        line-height: 30px;
        text-transform: capitalize;
        color: #191919;
        background: rgba(31, 31, 31, 0.05);
    }

    .signature {
        max-width: 200px;
        margin: 0 auto;
        border-top: 1px solid #000;
        text-align: center;
    }

    .add-suplier-wrapper {
        position: relative;
    }

    .add-suplier-wrapper .nice-select:after {
        right: 60px;
    }

    .add-suplier-wrapper .add-suplier-modal {
        position: absolute;
        right: 15px;
        top: 14px;
        height: 24px;
        width: 24px;
        line-height: 24px;
        text-align: center;
        background: rgba(255, 132, 0, 0.5);
    }

    .nice-select:after {
        height: 10px;
        width: 10px;
        top: 43%;
        right: 20px;
    }

    .feature-btn {
        border-radius: 4px;
        background: var(--primary-100, #eaecff);
        padding: 0 15px;
        color: var(--clr-primary);
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        border: 1px solid #d4d4d4;
    }

    /* .modal-body {
        padding-top: 0;
    } */

    .modal-content {
        padding-bottom: 20px;
    }

    .upload-img-v2 {
        height: 100%;
    }

    .upload-img-v2 label {
        height: 130px;
        border-radius: 5px;
        border: 1px solid var(--neutral-300, #d4d4d4);
        background: #fff;
        overflow: hidden;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 20px;
        cursor: pointer;
        padding: 0px;
    }

    label.upload-img-label {
        position: absolute;
        top: -1px;
        z-index: 3;
        left: 10px;
        background-color: white;
    }

    .upload-img-v2 .image-height {
        height: 138px !important;
    }

    .upload-v4 .img-wrp {
        background: transparent !important;
        padding: 25px;
        height: 140px;
        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;
        align-items: center;
        min-width: 140px;
    }

    .upload-img-container {
        height: 150px;
    }

    /* .table-top-left.d-flex.gap-3.margin-l-16{
        flex-wrap: wrap;
    } */
    .cards {
        background-color: white;
    }

    .shadow {
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    }

    .cards-header {
        padding: 16px;
        background-color: #fff;
        border-radius: 12px;
    }

    .upload-v4 .img-wrp img {
        width: 80px;
        height: 80px;
        border: none;
    }

    .upload-img-v2 label img {
        width: 150px;
        height: 141px;
        border-radius: 5px;
        border-right: 1px solid var(--neutral-300, #d4d4d4);
    }

    .settings-image-upload {
        position: relative;
        margin-top: 10px;
    }

    .settings-image-upload .title {
        position: absolute;
        background-color: #fff;
        z-index: 3;
        left: 21px;
        top: 4px;
    }

    .upload-img-v2 .settings-upload-v4 {
        height: 100px;
        display: flex;
        justify-content: center;
        border: 1px dashed var(--neutral-300, #d4d4d4);
        left: 0 !important;
    }

    .upload-img-v2 .settings-upload-v4 .img-wrp {
        background: transparent !important;
        min-width: auto !important;
    }

    .upload-img-v2 .settings-upload-v4 .img-wrp img {
        height: 48px;
        width: auto;
    }

    /* role-reset-btn */
    .role-reset-btn {
        font-weight: bold;
        color: var(--clr-primary);
        border: 1px solid var(--clr-primary);
        padding: 0.2rem 0.5rem !important;
    }

    .role-reset-btn:hover {
        color: #fff !important;
        background-color: var(--clr-primary);
        border: 1px solid transparent;
    }

    .costing-price-wrapper {
        padding: 30px 0;
    }

    .costing-list li {
        display: block;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        margin-top: 15px;
    }

    .costing-list span {
        min-width: 165px !important;
        display: inline-block;
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 18px;
        text-transform: capitalize;
        color: #191919;
    }

    @media (max-width: 768px) {
        .costing-list span {
            min-width: 105px !important;
        }
    }

    .costing-list span:nth-child(2) {
        text-align: center;
        min-width: 40px !important;
    }

    .mark-style {
        background: #ffe6cc !important;
        color: #7e7e7e !important;
    }

    .t-shirt-thumb {
        max-width: 240px;
        height: 250px;
        border: 1px solid rgba(126, 126, 126, 0.5);
        border-radius: 6px;
        text-align: center;
        padding: 15px 25px;
        margin-left: auto;
    }

    .t-shirt-thumb img {
        width: 100%;
        height: 100%;
    }

    .table-title-three {
        background: #f4f4f4;
        border-radius: 5px 5px 0px 0px;
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: (1fr) [3];
        grid-template-columns: repeat(3, 1fr);
        padding: 5px 15px;
        margin-top: 25px;
    }

    .table-title-three h5 {
        font-weight: 600;
        font-size: 14px;
        line-height: 22px;
        color: #191919;
    }

    .table-two.table-bordered {
        border-color: #fff;
    }

    .table-two.table-bordered td,
    .table-two.table-bordered th {
        border: 1px solid rgba(126, 126, 126, 0.4);
    }

    .t-header {
        background: #f4f4f4 !important;
        color: #191919 !important;
        font-weight: 500 !important;
    }

    .bank-account-info {
        padding: 15px;
        background: #ffffff;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 6px;
        margin-top: 20px;
    }

    .bank-account-info .costing-list span {
        min-width: 130px;
    }

    .bank-account-info .add-order-btn {
        font-size: 14px;
        width: auto;
        margin-left: auto;
    }

    .title-five {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 20px 0;
        padding-bottom: 0;
    }

    .add-suplier-modal-wrapper .nice-select {
        line-height: 23px;
    }

    .add-suplier-modal-wrapper .nice-select .list {
        width: 100%;
    }

    .order-form-section .costing-list {
        margin: 20px auto;
    }

    .order-form-section .costing-list span {
        min-width: 180px;
        word-break: break-word;
    }

    .order-form-section .payment-gateway h4 {
        font-weight: 700;
    }

    .text-success {
        color: #06b34b !important;
    }

    .free-badge {
        background-color: #00bf7126;
        color: #00bf71;
        padding: 5px 12px;
        border-radius: 6px;
    }

    .standard-badge {
        background-color: #8752ee26;
        color: #8752ee;
        padding: 5px 12px;
        border-radius: 6px;
    }

    .premium-badge {
        background-color: #ff5f0026;
        color: #ff5f00;
        padding: 5px 12px;
        border-radius: 6px;
    }

    .w-140 {
        width: 160px;
        display: inline-block;
        margin: 0;
    }

    .loan-view-modal-wrapper .bank-status-list span {
        color: #7e7e7e !important;
        font-size: 14px !important;
    }

    .loan-view-modal-wrapper .bank-status-list .w-140 {
        color: #0c1928 !important;
    }

    th table th {
        background: none !important;
        padding: 7px 0 !important;
        text-align: center;
        border: 1px solid rgba(31, 31, 31, 0.1);
    }

    .top-customer-table .table th,
    .top-customer-table .table td {
        border-bottom: 1px solid #d8d8d8 !important;
        border-top: 1px solid #d8d8d8 !important;
        padding: 12px;
    }

    .top-customer-table .table {
        border: none !important;
    }

    .feature-btn {
        border-radius: 4px;
        background: var(--primary-100, #eaecff);
        padding: 0 15px;
        color: var(--clr-primary);
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        border: 1px solid #d4d4d4;
    }

    /*switch btn start*/

    .order-form-section .radio-switcher .switch {
        top: 0px;
    }

    .switch {
        position: relative;
        display: inline-block;
        width: 44px;
        min-width: 44px;
        height: 24px;
    }

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

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--clr-gray2);
        -webkit-transition: 0.4s;
        transition: 0.4s;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 20px;
        width: 20px;
        left: 2px;
        bottom: 2px;
        background-color: var(--clr-white);
        -webkit-transition: 0.4s;
        transition: 0.4s;
    }

    input:checked+.slider {
        background-color: var(--clr-primary);
    }

    input:checked+.slider:before {
        -webkit-transform: translateX(19px);
        transform: translateX(19px);
    }

    /* Rounded sliders */
    .slider.round {
        border-radius: 12px;
    }

    .slider.round:before {
        border-radius: 50%;
    }

    /*switch btn end*/

    /* ---- gpt-up-down-arrow css start --- */
    .table-top-left .form-control {
        height: 38px;
        border: 1px solid #d8d8d8 !important;
        border-radius: 8px;
    }

    .gpt-up-down-arrow select {
        cursor: pointer;
    }

    .gpt-up-down-arrow span {
        border-bottom: 2px solid #999;
        border-right: 2px solid #999;
        pointer-events: none;
        content: "";
        position: absolute;
        top: 30%;
        right: 16px;
        height: 10px;
        width: 10px;
        -webkit-transform-origin: 66% 66%;
        -ms-transform-origin: 66% 66%;
        transform-origin: 66% 66%;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-transition: all 0.15s ease-in-out;
        transition: all 0.15s ease-in-out;
    }

    .gpt-up-down-arrow:hover span {
        transform: rotate(225deg);
    }

    /*--------------------------------------
        - login css start
    ----------------------------------------*/
    .footer {
        min-height: 100vh;
        background-color: var(--clr-primary);
    }

    .footer .footer-logo {
        width: 90%;
        margin: auto;
    }

    .footer .footer-logo img {
        margin-top: 20px;
        height: 48px;
        width: auto;
    }

    .mybazar-login-section {
        height: calc(100vh - 120px);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    @media only screen and (min-width: 1200px) and (max-width: 1500px) {

        .mybazar-login-section .mybazar-login-avatar,
        .mybazar-login-section .mybazar-login-wrapper {
            width: 50% !important;
        }

        .mybazar-login-wrapper {
            display: flex;
            align-items: center;
            justify-content: end;
        }
    }

    @media (max-width: 1200px) {
        .mybazar-login-section {
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    .mybazar-login-section .mybazar-login-avatar {
        text-align: center;
        width: 60%;
    }

    .mybazar-login-section .mybazar-login-avatar img {
        width: 90%;
        height: 480px;
        object-fit: contain;
    }

    .mybazar-login-section .mybazar-login-wrapper {
        width: 40%;
        position: relative;
        z-index: 2;
        margin-right: 80px;
        /* display: flex;
        align-items: center;
        justify-content: center; */
    }

    .mybazar-login-section .login-wrapper {
        max-width: 630px;
        background: #fff;
        box-shadow: -16px 0px 50px 0px #0000000d;
        border-radius: 16px;
        padding: 24px 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mybazar-login-section .login-wrapper h2 {
        font-weight: 600;
        font-size: 30px;
        line-height: 38px;
        color: #101828;
    }

    .mybazar-login-section .login-wrapper h2 span {
        color: var(--clr-primary);
        margin-left: 10px;
    }

    .mybazar-login-section .login-wrapper h6 {
        font-weight: 400;
        font-size: 20px;
        line-height: 30px;
        color: #667085;
        margin-bottom: 20px;
        margin-top: 10px;
    }

    .mybazar-login-section .login-wrapper p {
        color: #0c1928;
        opacity: 0.5;
        text-align: center;
    }

    .mybazar-login-section .login-wrapper .input-group {
        position: relative;
        margin: 0;
        margin-top: 10px;
        border: 1px solid #98a2b3;
        background-color: #f4f5f7;
    }

    .mybazar-login-section .login-wrapper .input-group span {
        position: absolute;
        top: 50%;
        left: 15px;
        z-index: 5;
        -webkit-transform: translate(0, -50%);
        transform: translate(0, -50%);
    }

    .mybazar-login-section .login-wrapper .input-group .hide-pass {
        position: absolute;
        top: 50%;
        left: auto;
        right: 15px;
        z-index: 5;
        -webkit-transform: translate(0, -50%);
        transform: translate(0, -50%);
    }

    .mybazar-login-section .login-wrapper .input-group .form-control {
        padding: 12px 15px;
        -webkit-box-shadow: none;
        box-shadow: none;
        padding-left: 12px;
        height: 48px;
        border-radius: 0px !important;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
    }

    .mybazar-login-section .login-wrapper .input-group .form-control::placeholder {
        color: #4d4d4d !important;
    }

    .mybazar-login-section .login-wrapper .input-group input {
        border-left: 1px solid #98a2b3 !important;
        border: none;
        margin-left: 50px !important;
    }

    .mybazar-login-section .button-group {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: auto 10px auto 10px auto 10px auto;
        grid-template-columns: auto auto auto auto;
        gap: 10px;
    }

    .mybazar-login-section .forget-password {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .mybazar-login-section .back-to-login {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 10px;
    }

    .mybazar-login-section .forget-password a,
    .mybazar-login-section .back-to-login a {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        color: #475467;
        display: inline-block;
        margin: 5px;
    }

    .mybazar-login-section .forget-password a:hover,
    .mybazar-login-section .back-to-login a:hover {
        text-decoration: underline;
    }

    .mybazar-login-section .forget-password label {
        display: flex;
        align-items: center;
        cursor: pointer;
    }

    .mybazar-login-section .login-btn {
        display: block;
        font-size: 18px;
        font-weight: 600;
        line-height: 24px;
        color: #fff !important;
        background: var(--clr-primary);
        border-radius: 8px;
        padding: 12px 20px;
        width: 100%;
        margin-top: 15px;
        height: 50px;
    }

    .forget-password .custom-control-label span {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        color: #475467;
    }

    .mybazar-login-wrapper .input-group input:focus-visible {
        border: 1px solid var(--clr-primary) !important;
    }

    .mybazar-login-section .button-group {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: auto 10px auto 10px auto 10px auto;
        grid-template-columns: auto auto auto auto;
        gap: 10px;
    }

    .mybazar-login-section .button-group a {
        background: #25d4a9;
    }

    .login-button-list li:nth-child(1) a {
        background: #00c796 !important;
    }

    .login-button-list li:nth-child(2) a {
        background: #ff8400 !important;
    }

    .login-button-list li:nth-child(3) a {
        background: #4876ff !important;
    }

    @media (max-width: 575px) {
        .gpt-dashboard-chart .card-header {
            flex-wrap: wrap;
        }

        .mybazar-login-section .button-group {
            -ms-grid-columns: 50% auto;
            grid-template-columns: 50% auto;
        }

        .mybazar-login-section .maan-main-content {
            padding: 25px 10px;
        }
    }

    .mybazar-login-section .hide-pass img:last-child {
        display: none;
    }

    .mybazar-login-section .show-pass img:first-child {
        display: none;
    }

    .mybazar-login-section .show-pass img:last-child {
        display: block;
    }

    .mybazar-login-section .hide-pass {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    /*--------------------------------------
        - login css end
    ----------------------------------------*/
    .login-button-list {
        margin-top: 20px;
    }

    .login-button-list .theme-btn {
        min-width: 100% !important;
        border-radius: 12px;
        color: #fff !important;
    }

    .login-button-list li {
        display: inline-block;
    }

    .login-button-list ul {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 13px;
    }

    .login-footer img {
        margin-right: 10px;
    }

    @media (max-width: 476px) {
        .login-button-list ul {
            display: grid;
            grid-template-columns: repeat(1, 1fr);
        }

        .sup-addon {
            top: -6px !important;
        }
    }

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

    .aler-icons {
        height: 50px;
        width: 50px;
        line-height: 50px;
        color: red;
        border: 1px solid red;
        border-radius: 50%;
        margin: 0 auto;
        margin-bottom: 15px;
    }

    .erp-dashboard-profile img {
        width: 100%;
    }

    .erp-dashboard-profile .profile-bg {
        height: 150px;
    }

    .erp-dashboard-profile .profile-bg img {
        height: 150px;
        -o-object-fit: cover;
        object-fit: cover;
    }

    .erp-dashboard-profile .profile-img {
        height: 80px;
        width: 80px;
        border-radius: 50%;
        overflow: hidden;
        margin: 0 auto;
        margin-top: -40px;
        border: 2px solid var(--clr-primary);
    }

    .erp-dashboard-profile-section {
        padding: 20px;
    }

    .order-summary-tab {
        margin-top: -34px;
    }

    .bg-gray {
        background: rgba(31, 31, 31, 0.05) !important;
        color: #000 !important;
    }

    /* print css end css*/
    .table-footer-last {
        max-width: 350px;
        margin-left: auto;
        margin-top: 100px;
    }

    .table-footer-last td {
        text-align: left;
        font-weight: 500;
        color: #000;
    }

    .table-footer-last td:last-child {
        text-align: right;
        font-weight: 700;
        color: #000;
    }

    .modal-btn-ctg {
        height: 100%;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        color: #fff !important;
        background: var(--clr-primary);
    }

    .input-group .form-control {
        border-top-left-radius: 6px !important;
        border-bottom-left-radius: 6px !important;
    }

    .daily-transaction-between-wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 15px;
    }

    .daily-transaction-between-wrapper .between-wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        border: 1px solid #ced4da;
        overflow: hidden;
        border-radius: 6px;
    }

    .daily-transaction-between-wrapper .between-wrapper input {
        border: none;
        padding: 0;
        margin: 0 10px;
        min-width: 90px !important;
        text-align: center;
        outline: none;
    }

    .daily-transaction-between-wrapper .between-wrapper input[type="date"]::-webkit-inner-spin-button,
    .daily-transaction-between-wrapper .between-wrapper input[type="date"]::-webkit-calendar-picker-indicator {
        display: none;
        -webkit-appearance: none;
    }

    .daily-transaction-between-wrapper .between-wrapper span {
        background: #6c6d78;
        display: inline-block;
        padding: 6px 10px;
        color: #fff;
    }

    .daily-transaction-between-wrapper .between-wrapper .nice-select {
        height: 37px;
        border-radius: 6px;
    }

    .this-month-select {
        padding-left: 0;
    }

    .this-month-select .current {
        font-weight: 500;
    }

    .total-count-area {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 20px;
        margin-top: 20px;
    }

    .total-count-area .count-item {
        border-radius: 10px;
        max-width: 190px;
        padding: 15px 20px;
        width: 100%;
    }

    .total-count-area .count-item h5 {
        font-weight: 600;
        font-size: 23px;
        line-height: 31px;
        color: #2e2e3e;
        margin-bottom: 5px;
    }

    .total-count-area .count-item p {
        font-size: 16px;
        font-weight: 500;
    }

    .light-blue {
        background: rgba(45, 176, 246, 0.2);
    }

    .light-green {
        background: rgba(21, 205, 117, 0.2);
    }

    .light-orange {
        background: rgba(255, 140, 0, 0.2);
    }

    .light-red {
        background: rgba(255, 37, 37, 0.2);
    }

    .input-group> :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
        margin-left: 0;
    }

    .add-suplier-modal-wrapper .input-group {
        border: 1px solid #ced4da;
        border-radius: 6px;
        margin-left: 0 !important;
    }

    .add-suplier-modal-wrapper .input-group .nice-select {
        border: none;
        background: none;
    }

    .add-suplier-modal-wrapper .input-group .input-group-text {
        border: none;
    }

    .service-btn-possition {
        background: var(--clr-primary) !important;
        color: #fff !important;
        font-size: 20px;
        height: 40px;
        width: 40px;
        border: none;
        outline: none;
    }

    .grid-5 {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr 15px 1fr 15px 1fr 15px 1fr 15px 1fr;
        grid-template-columns: repeat(5, 1fr);
        gap: 15px;
    }

    .date-filters-container {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .custom-date-filter {
        display: inline-block;
        position: relative;
    }

    .calendar-icon {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        color: #fff;
        /* আইকনের রং */
    }

    .custom-date-filter select {
        appearance: none;
        background-color: var(--clr-primary) !important;
        color: white !important;
        padding: 10px 30px;
        border: none;
        border-radius: 5px;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        width: 100%;
    }

    .custom-date-filter span {
        border-bottom: 2px solid #fff !important;
        border-right: 2px solid #fff !important;
    }

    .custom-date-filter select:focus {
        outline: none;
    }

    .custom-date-filter::after {
        font-size: 14px;
        color: white;
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
    }

    .custom-date-filter select option {
        background: white;
        color: black;
        padding: 10px;
    }

    .custom-date-filter select option:hover {
        appearance: none !important;
        color: var(--clr-primary) !important;
        background-color: #fef0f1 !important;
    }

    /* Tablet View (Max 768px) */
    @media (max-width: 768px) {
        .date-filters-container {
            grid-template-columns: repeat(2, 1fr) !important;
            /* 2 columns */
        }
    }

    /* Mobile View (Max 480px) */
    @media (max-width: 480px) {
        .date-filters-container {
            grid-template-columns: repeat(1, 1fr) !important;
            /* 1 column */
        }
    }

    .grid-10 {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr 15px 1fr 15px 1fr 15px 1fr 15px 1fr 15px 1fr 15px 1fr 15px 1fr 15px 1fr 15px 1fr;
        grid-template-columns: repeat(10, 1fr);
        gap: 15px;
    }

    .grid-4 {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr 15px 1fr 15px 1fr 15px 1fr;
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
    }

    .grid-3 {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr 15px 1fr 15px 1fr;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }

    .feature-row {
        position: relative;
        padding-right: 60px;
    }

    .feature-row .remove-btn-features {
        position: absolute;
        top: 10px;
        right: 0;
    }

    .loss-profit .nice-select,
    .loss-profit select {
        min-width: 180px;
    }

    .loss-profit .current {
        line-height: 1.5;
    }

    .form-check-input:focus {
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .form-switch {
        margin: 0;
        padding: 0;
    }

    .form-switch .form-check-input {
        margin: 0 auto;
        padding: 0;
        height: 20px;
        width: 40px !important;
        float: none;
        border: 1px solid #ddd !important;
    }

    .nice-select,
    select {
        min-width: 120px;
    }

    .ledger-detais-date {
        max-width: 300px;
        margin: 0 auto;
        margin-top: 20px;
    }

    .ledger-detais-date .input-wrapper-between input {
        min-width: unset !important;
        width: 90px;
    }

    .ledger-detais-date .input-wrapper-between small {
        font-weight: 500;
        font-size: 15px;
    }

    .form-switch .form-check-input:checked {
        background-color: var(--clr-primary);
    }

    .commercial-invoice tr,
    .commercial-invoice td,
    .commercial-invoice th {
        font-size: 16px;
        text-align: left;
        white-space: normal !important;
        height: 40px;
    }

    .commercial-invoice tr p,
    .commercial-invoice td p,
    .commercial-invoice th p {
        font-size: 16px;
        line-height: 30px;
    }

    .commercial-invoice.text-center td,
    .commercial-invoice.text-center th,
    .commercial-invoice.text-center tr {
        text-align: center;
    }

    .sample-form-wrp {
        padding-right: 180px;
    }

    .sample-form-wrp .service-btn-possition {
        position: absolute;
        right: 60px;
        top: 40px;
    }

    .sample-form-wrp .remove-btn-features {
        top: 40px;
        right: 15px;
    }

    table input {
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        outline: none !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        font-size: 12px !important;
    }

    .mw-1000 {
        min-width: 1000px;
    }

    .table-form-section {
        position: relative;
    }

    .table-form-section .responsive-table {
        padding-left: 20px;
    }

    .table-form-section .add-btn-one,
    .table-form-section .add-btn-two,
    .table-form-section .add-btn-three,
    .table-form-section .add-btn-four,
    .table-form-section .add-btn-five,
    .table-form-section .add-btn-six,
    .table-form-section .add-btn-seven {
        position: absolute;
        left: -20px;
        top: 0px;
        height: 20px;
        width: 20px;
        background: rgba(255, 132, 0, 0.5);
        border-radius: 3px;
        color: #000;
        text-align: center;
        line-height: 20px;
        cursor: pointer;
    }

    td.position-relative,
    tr.position-relative {
        padding: 0;
    }

    td.position-relative td,
    tr.position-relative td {
        padding: 0;
    }

    .w-120 {
        min-width: 120px;
    }

    .form-table-sm tr td:first-child {
        width: 140px;
    }

    .tr-remove-btn {
        position: absolute;
        left: -20px;
        top: 30px;
        color: red;
        cursor: pointer;
        height: 20px;
        width: 20px;
        text-align: center;
        line-height: 20px;
        display: none;
    }

    .dataTables_wrapper .dt-buttons {
        float: right;
        margin-bottom: 30px;
    }

    .dataTables_wrapper .dt-buttons button {
        border: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        outline: none;
        background: none;
        font-size: 18px;
        color: rgba(12, 25, 40, 0.5);
    }

    .dataTables_wrapper .dataTables_filter {
        float: left;
        margin-bottom: 30px;
        width: 200px;
        margin-left: 15px;
    }

    .dataTables_wrapper .dataTables_filter label {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 10px;
        color: #fff;
        height: 40px;
    }

    .dataTables_wrapper .dataTables_filter label input {
        position: absolute;
        left: 0;
        bottom: 0;
    }

    .dataTables_wrapper .dataTables_length {
        float: left;
        margin-bottom: 30px;
        width: 150px;
    }

    .dataTables_wrapper .dataTables_length label {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 10px;
        color: #fff;
        position: relative;
        min-height: 40px;
    }

    .dataTables_wrapper .dataTables_length label select {
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 1;
    }

    .dataTables_wrapper select,
    .dataTables_wrapper input {
        display: block;
        width: 100%;
        padding: 0.375rem 0.75rem;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #212529;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid #ced4da;
        border-radius: 0.375rem;
        -webkit-transition: border-color 0.15s ease-in-out,
            -webkit-box-shadow 0.15s ease-in-out;
        transition: border-color 0.15s ease-in-out,
            -webkit-box-shadow 0.15s ease-in-out;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out,
            -webkit-box-shadow 0.15s ease-in-out;
        outline: none;
        padding-right: 15px;
    }

    .dataTables_info {
        font-size: 14px;
        font-weight: 400;
        opacity: 0.7;
        float: left;
    }

    .dashboard-chart-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        border-bottom: 1px solid #d8d8d8;
    }

    .dashboard-chart-header h4 {
        font-size: 20px;
        font-weight: 600;
    }

    .income-container {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 6px;
        font-weight: 400;
        font-size: 14px;
        color: #333;
    }

    .income-dot {
        width: 12px;
        height: 12px;
        background-color: var(--clr-primary);
        border-radius: 50%;
        margin-right: 8px;
    }

    .income-value {
        font-weight: bold;
    }

    .dataTables_paginate {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        float: right;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 3px 10px;
        display: inline-block;
        border: none !important;
        border: 1px solid #eee !important;
        line-height: 20px;
        margin: 0;
        color: #f88808 !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.current,
    .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
        background: #f88808;
        color: #fff !important;
    }

    .nice-select .list {
        width: 100%;
    }

    .A4-paper {
        max-width: 1100px;
        margin: 0 auto;
    }

    .w-400 {
        max-width: 400px;
    }

    /* invoice css start */
    .invoice-section {
        max-width: 800px;
        margin: 0 auto;
    }

    .invoice-header {
        background: #dbeef4;
        padding: 5px 0;
    }

    .invoice-header h1 {
        font-family: "Manrope";
        font-weight: 600;
        font-size: 24px;
        line-height: 68px;
        color: #191919;
        text-align: right;
    }

    .invoice-header h2 {
        font-family: "Manrope";
        font-weight: 700;
        font-size: 20px;
        line-height: 30px;
        color: #191919;
    }

    .invoice-header p {
        font-family: "Manrope";
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        color: #555e69;
    }

    .invoice-address-section {
        padding: 10px 0;
    }

    .invoice-address-section li {
        font-family: "Manrope";
        font-weight: 400;
        font-size: 13px;
        line-height: 23px;
        color: #0c1928;
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .invoice-address-section li p,
    .invoice-address-section li span {
        font-family: "Manrope";
        font-weight: 400;
        font-size: 13px;
        line-height: 23px;
        color: #0c1928;
    }

    .invoice-table thead th {
        border: 1px solid #7e7e7e;
        background: #dbeef4;
        font-style: normal;
        font-weight: 500;
        font-size: 10px;
        line-height: 24px;
        color: #191919;
        padding: 0px 5px;
    }

    .invoice-table tbody td {
        font-style: normal;
        font-weight: 400;
        font-size: 10px;
        line-height: 20px;
        color: #475467;
        border: 1px solid #7e7e7e;
        text-align: left;
        white-space: normal;
        padding: 0px 5px;
    }

    .invoice-table tbody td p,
    .invoice-table tbody td span {
        font-size: 10px !important;
    }

    .invoice-table tbody td:last-child {
        text-align: right;
    }

    .invoice-table tfoot th {
        border: 1px solid #7e7e7e;
        background: #dbeef4;
        font-style: normal;
        font-weight: 600;
        font-size: 10px;
        line-height: 24px;
        color: #191919;
        padding: 0px 5px;
    }

    .invoice-table tfoot td {
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 20px;
        color: #475467;
        border: 1px solid #7e7e7e;
        text-align: left;
        white-space: normal;
    }

    .invoice-table tfoot td:last-child {
        text-align: right;
    }

    .invoice-table tfoot td span,
    .invoice-table tfoot td p {
        max-width: 100% !important;
        font-size: 10px;
    }

    .invoice-bank-details {
        margin-top: 10px;
    }

    .invoice-bank-details h4 {
        display: inline-block;
        font-family: "Manrope";
        font-style: normal;
        font-weight: 600;
        font-size: 20px;
        line-height: 33px;
        color: #0c1928;
        border-bottom: 1px solid #0c1928;
        margin-bottom: 10px;
    }

    .invoice-bank-details li {
        margin: 0;
    }

    .invoice-bank-details li span,
    .invoice-bank-details li p {
        max-width: 100%;
        color: #0c1928;
    }

    .invoice-others-section {
        padding: 20px 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .invoice-others-section h6 {
        font-family: "Manrope";
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        max-width: 220px;
        line-height: 1.4;
        color: #0c1928;
    }

    .invoice-signature-section {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        padding: 30px 0;
    }

    .invoice-signature-section p {
        display: inline-block;
        color: #0c1928;
        border-top: 1px solid #0c1928;
    }

    .invoice-footer {
        background: #dbeef4;
        padding: 10px 0;
        text-align: center;
        margin-top: 30px;
    }

    .invoice-footer a {
        font-size: 10px;
        color: #0c1928 !important;
    }

    /* manageplan edit css start */
    .form-control.manage-plan input {
        position: absolute;
        top: -25px;
        width: auto;
    }

    .custom-manageswitch {
        position: absolute;
        right: 20px;
        top: 12px;
    }

    .subscription-plan-edit-custom-input {
        padding: 0 10px !important;
        top: -23px !important;
        height: auto !important;
        min-width: auto !important;
    }

    /* invoice css end */
    @media (max-width: 1700px) {
        .state-overview-box .icons {
            height: 70px;
            width: 70px;
            min-width: 70px;
            line-height: 70px;
        }

        .state-overview-box .icons img {
            height: 40px;
        }

        .state-overview-box {
            padding: 8px;
        }

        .state-overview-box h2 {
            font-size: 20px;
        }

        .state-overview-box p {
            font-size: 14px;
        }
    }

    @media only screen and (min-width: 1424px) {
        .gpt-dashboard-card.counter-grid-6 {
            grid-template-columns: repeat(5, 1fr);
        }
    }

    @media only screen and (min-width: 880px) and (max-width: 1424px) {
        .gpt-dashboard-card.counter-grid-6 {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    @media only screen and (min-width: 650px) and (max-width: 880px) {
        .gpt-dashboard-card.counter-grid-6 {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media only screen and (min-width: 1423px) and (max-width: 1700px) {
        .gpt-dashboard-card .couter-box .icons {
            height: 44px;
            width: 44px;
        }

        .gpt-dashboard-card .couter-box h5 {
            font-size: 18px;
            line-height: 28px;
        }

        .gpt-dashboard-card .couter-box p {
            font-size: 14px;
            line-height: 24px;
        }
    }

    @media (max-width: 650px) {
        .gpt-dashboard-card.counter-grid-6 {
            grid-template-columns: repeat(1, 1fr);
        }
    }

    @media (max-width: 1400px) {
        .erp-state-overview-wrapper {
            -ms-grid-columns: (1fr) [3];
            grid-template-columns: repeat(3, 1fr);
        }
    }

    @media (max-width: 1200px) {
        .mybazar-login-section {
            height: 100vh;
            background-size: cover;
        }

        .footer .footer-logo {
            display: none;
        }

        .mybazar-login-section .mybazar-login-avatar {
            display: none;
        }

        .mybazar-login-section .mybazar-login-wrapper {
            max-width: 100% !important;
            width: 100%;
            display: flex;
            justify-content: center;
            margin: 30px 30px 30px 14px;
        }

        .mybazar-login-section .mybazar-login-wrapper .login-wrapper {
            padding: 30px;
        }
    }

    @media (max-width: 520px) {
        .mybazar-login-section .mybazar-login-wrapper {
            margin: 30px 13px 30px 12px !important;
        }
    }

    @media (max-width: 400px) {
        .mybazar-login-section .mybazar-login-wrapper .login-wrapper {
            padding: 17px !important;
        }

        .login-button-list ul {
            gap: 5px !important;
        }
    }

    @media (max-width: 992px) {
        .mybazar-login-section .forget-password {
            margin-top: 15px;
        }

        .settings-image-upload {
            margin-bottom: 10px;
        }

        .loss-flex {
            flex-wrap: wrap;
        }
    }

    @media (max-width: 1400px) {
        .table-top-form {
            display: block;
        }
    }

    @media (max-width: 1150px) {
        .table-top-btn-group ul {
            margin-top: 20px;
        }

        .grid-5,
        .grid-3,
        .grid-4 {
            -ms-grid-columns: 1fr 15px 1fr;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }

        .table-top-form .form-control {
            margin: 0;
        }

        .side-bar {
            left: -100%;
        }

        .section-container {
            padding-left: 0 !important;
        }

        .header-middle {
            display: none;
        }

        .header-wrapper {
            -ms-grid-columns: 50% 50%;
            grid-template-columns: 50% 50%;
        }

        .language-change {
            display: none;
        }

        .dark-icon {
            display: none !important;
        }

        .w-50 {
            width: 100% !important;
        }

        .side-bar {
            width: 300px !important;
        }

        .side-bar .side-bar-manu .dropdown::before {
            opacity: 1 !important;
        }

        .side-bar .sidebar-icon img {
            width: 16px !important;
        }

        .side-bar .side-bar-manu li a .sidebar-icon {
            left: 0 !important;
            margin-right: 10px !important;
        }

        .side-bar.active {
            left: 0;
        }

        .close-btn {
            display: block;
            font-size: 20px;
            cursor: pointer;
        }

        .grid-5 {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            gap: 15px;
        }
    }

    @media (max-width: 645px) {
        .table-search {
            width: 100% !important;
        }
    }

    @media (max-width: 768px) {
        .total-count-area {
            display: -ms-grid;
            display: grid;
            -ms-grid-columns: (1fr) [2];
            grid-template-columns: repeat(2, 1fr);
        }

        /* .order-summary-tab {
            margin-top: 25px;
        } */

        .grid-5 {
            -ms-grid-columns: (1fr) [1];
            grid-template-columns: repeat(1, 1fr);
        }

        .table-header .button-group {
            margin-top: 20px;
        }

        .container-fluid {
            padding: 15px 15px;
        }

        .add-suplier-modal-wrapper {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
        }

        .add-suplier-modal-wrapper .row {
            -webkit-box-ordinal-group: 3;
            -ms-flex-order: 2;
            order: 2;
        }

        .add-suplier-modal-wrapper .add-profile-photo {
            -webkit-box-ordinal-group: 2;
            -ms-flex-order: 1;
            order: 1;
            margin: 0 auto !important;
        }

        .erp-state-overview-wrapper {
            -ms-grid-columns: (1fr) [2];
            grid-template-columns: repeat(2, 1fr);
        }

        .total-count-area .count-item {
            max-width: 100%;
        }

        .daily-transaction-between-wrapper {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
        }

        .daily-transaction-between-wrapper .between-wrapper input {
            font-size: 12px;
        }
    }

    @media (max-width: 575px) {
        .table-header {
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 10px;
        }

        .erp-state-overview-wrapper {
            -ms-grid-columns: (1fr) [1];
            grid-template-columns: repeat(1, 1fr);
        }

        .voucher-big-box-wrapper {
            gap: 20px;
        }

        .mybazar-login-section .login-wrapper h2 {
            font-size: 24px;
            line-height: 34px;
        }

        .mybazar-login-section .login-wrapper h6 {
            font-size: 14px;
            line-height: 20px;
            margin-bottom: 15px;
        }
    }

    .main-header-section {
        z-index: 5;
    }

    /* new invoice css start */
    .erp-new-invice {
        max-width: 800px;
        margin: 0 auto;
        position: relative;
        min-height: 1000px;
    }

    .erp-new-invice .table-header h3 strong {
        color: #000;
        font-size: 25px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        font-family: "Lato", sans-serif;
    }

    .erp-new-invice .table-header p {
        color: #000;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        font-family: "Lato", sans-serif;
    }

    .erp-new-invice .bill-invoice-wrp {
        text-align: center;
        margin: 15px 0;
        position: relative;
    }

    .erp-new-invice .bill-invoice-wrp .paking-date {
        position: absolute;
        right: 0;
        top: 0;
        color: #000;
        font-family: Lato;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-transform: uppercase;
    }

    .erp-new-invice .bill-invoice-wrp h2 {
        color: #000;
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        font-family: "Lato", sans-serif;
    }

    .erp-new-invice .bill-invoice-wrp hr {
        margin: 0;
        max-width: 170px;
        margin: 0 auto;
        height: 2px;
        border-top: 2px solid #000;
        opacity: 1;
    }

    .erp-new-invice .invice-detaisl {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        font-family: "Lato", sans-serif;
        gap: 50px;
    }

    .erp-new-invice .invice-detaisl .bill-left-side,
    .erp-new-invice .invice-detaisl .bill-right-side {
        width: 50%;
        margin-bottom: 15px;
    }

    .erp-new-invice .invice-detaisl .bill-left-side p,
    .erp-new-invice .invice-detaisl .bill-right-side p {
        line-height: 19px;
        color: #000;
    }

    .erp-new-invice .invice-detaisl .address-items {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        margin-bottom: 5px;
    }

    .erp-new-invice .invice-detaisl .address-items strong {
        display: block;
        width: 130px;
        color: #000;
        font-size: 12px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        font-family: "Lato", sans-serif;
    }

    .erp-new-invice .invice-detaisl .address-items p {
        color: #000;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        font-family: "Lato", sans-serif;
    }

    .erp-new-invice .bill-right-side {
        margin-left: auto;
        text-align: right;
    }

    .erp-new-invice th {
        background: transparent;
        border: 1px solid #000;
        color: #000;
        font-size: 12px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        font-family: "Lato", sans-serif;
    }

    .erp-new-invice tr {
        border: none;
    }

    .erp-new-invice td {
        color: #000;
        font-family: Lato;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        font-family: "Lato", sans-serif;
        border: none;
        border-right: 1px solid #000;
        border-left: 1px solid #000;
    }

    .erp-new-invice td p {
        color: #000;
        font-family: Lato;
        font-size: 13px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        font-family: "Lato", sans-serif;
    }

    .erp-new-invice td small {
        color: #000;
        font-family: "Lato", sans-serif;
        font-size: 10px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .erp-new-invice table .address-items {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .erp-new-invice table .address-items p,
    .erp-new-invice table .address-items strong {
        font-size: 13px;
        color: #000;
        line-height: 1;
    }

    .erp-new-invice table hr {
        opacity: 1;
        margin: 0;
        margin-bottom: 10px;
    }

    .erp-new-invice .signature {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 100% !important;
        max-width: 100% !important;
        border: none;
        position: absolute;
        top: auto;
        bottom: 0;
    }

    .erp-new-invice .signature p {
        display: inline-block;
        border-top: 1px solid #000;
        color: #000;
        font-size: 13px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        padding-top: 10px;
        font-family: "Lato", sans-serif;
    }

    .erp-new-invice .table-header img {
        max-width: 300px;
    }

    .erp-new-invice .invoice-text {
        background: #f4efe5;
        text-align: right;
        padding-right: 100px;
        margin-bottom: 30px;
    }

    .erp-new-invice .invoice-text h2 {
        color: #000;
        font-family: Lato;
        font-size: 35px;
        font-style: normal;
        font-weight: 800;
        line-height: normal;
        text-transform: uppercase;
        display: inline-block;
        padding: 0 15px;
        background: #fff;
    }

    .invoice-two thead th {
        background: rgba(172, 133, 55, 0.13) !important;
    }

    .invoice-two td {
        border: 1px solid #000;
    }

    .invoice-two th h2 {
        color: #1f1f1f;
        font-family: Lato;
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .qty-new {
        min-width: 120px;
    }

    .invoice-payment-details h3 {
        display: inline-block;
        border-bottom: 1px solid #000;
        color: #1f1f1f;
        font-family: Lato;
        font-size: 26px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        padding-bottom: 10px;
        margin-bottom: 20px;
    }

    .invoice-payment-details p {
        color: #000;
        font-family: Lato;
        font-size: 15px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .new-invoice-others {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        margin-top: 40px;
    }

    .new-invoice-others h5 {
        max-width: 340px;
        color: #000;
        font-family: Lato;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .new-invoice-footer {
        text-align: center;
        margin-top: 40px;
    }

    .new-invoice-footer p {
        background: rgba(172, 133, 55, 0.13);
        padding: 15px 0;
        color: #000;
        font-family: Lato;
        font-size: 19px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .production-report-header {
        border: 1px solid #000;
        background: #ffe6cd;
        padding: 10px;
        color: #000;
        font-family: Lato;
        font-size: 25px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .paking-detail-table td {
        border: 1px solid #000;
    }

    .closing-balance {
        color: #000;
        text-align: right;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        gap: 80px;
    }

    /* new invoice css end */

    .table-search {
        width: 338px;
    }

    .table-search svg {
        height: 18px;
        width: 18px;
    }

    .table-search .form-control {
        border-radius: 8px;
        border: 1px solid #d4d4d4;
        /*height: 35px;*/
        padding: 5px 10px;
    }

    .table-search button {
        width: 29px;
        border-radius: 6px;
        background: var(--clr-primary);
        color: #fff;
        position: absolute;
        top: 3px;
        right: 3px;
        border: 0;
    }

    .table-search .clearSearchInput {
        position: absolute;
        background: none;
        font-size: 12px;
        right: 30px;
    }

    /* new css start 14/08/2023 */
    .order-form-section .form-control {
        min-width: 70px;
    }

    .table td {
        vertical-align: middle;
    }

    /* new css end 14/08/2023 */
    .notifications ul {
        overflow: auto;
        max-height: 620px;
    }

    /* new dashboard css start */
    .erp-overview-grid-6 {
        display: -ms-grid;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
        -ms-grid-columns: 1fr 25px 1fr 25px 1fr 25px 1fr 25px 1fr 25px 1fr;
        grid-template-columns: repeat(6, 1fr);
        gap: 25px;
    }

    .erp-overview-item {
        border-radius: 12px;
        background: #fff;
        -webkit-box-shadow: 0px 4px 24px 0px rgba(195, 208, 228, 0.3);
        box-shadow: 0px 4px 24px 0px rgba(195, 208, 228, 0.3);
        padding: 15px;
        -webkit-box-pack: stretch;
        -ms-flex-pack: stretch;
        justify-content: stretch;
    }

    .erp-overview-item .overview-icon {
        height: 54px;
        width: 54px;
        padding: 10px;
        border-radius: 10px;
        background: #edd9ff;
        margin-bottom: 15px;
    }

    .erp-overview-item .overview-icon img {
        width: 100%;
    }

    .erp-overview-item p {
        color: #344054;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
        margin-bottom: 6px;
    }

    .erp-overview-item h6 {
        color: #101828;
        font-size: 24px;
        font-style: normal;
        font-weight: 600;
        line-height: 34px;
    }

    .erp-overview-item:nth-child(2) .overview-icon {
        background: #e1dfff;
    }

    .erp-overview-item:nth-child(3) .overview-icon {
        background: #ffe9de;
    }

    .erp-overview-item:nth-child(4) .overview-icon {
        background: #cbffeb;
    }

    .erp-overview-item:nth-child(5) .overview-icon {
        background: #ddecff;
    }

    .erp-overview-item:nth-child(6) .overview-icon {
        background: #fde7fc;
    }

    .erp-overview-item:nth-child(7) .overview-icon {
        background: #ddecff;
    }

    .erp-overview-item:nth-child(8) .overview-icon {
        background: #ffe4fe;
    }

    .erp-overview-item:nth-child(9) .overview-icon {
        background: #edd9ff;
    }

    .erp-overview-item:nth-child(10) .overview-icon {
        background: #d5edff;
    }

    .erp-overview-item:nth-child(11) .overview-icon {
        background: #e1dfff;
    }

    .erp-overview-item:nth-child(12) .overview-icon {
        background: #cbffeb;
    }

    .dashboard-card {
        background: #ffffff;
        -webkit-box-shadow: 0px 0px 1px rgba(65, 76, 105, 0.24),
            0px 3px 8px -1px rgba(50, 57, 71, 0.05);
        box-shadow: 0px 0px 1px rgba(65, 76, 105, 0.24),
            0px 3px 8px -1px rgba(50, 57, 71, 0.05);
        border-radius: 12px;
        padding: 20px;
    }

    .dashboard-card .table-responsive {
        border-radius: 8px;
        -webkit-box-shadow: 0px 0px 1px rgba(65, 76, 105, 0.24),
            0px 3px 8px -1px rgba(50, 57, 71, 0.05);
        box-shadow: 0px 0px 1px rgba(65, 76, 105, 0.24),
            0px 3px 8px -1px rgba(50, 57, 71, 0.05);
    }

    .dashboard-card .dashboard-card-header {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        gap: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid #eaecf0;
    }

    .dashboard-card .dashboard-card-header p,
    .dashboard-card .dashboard-card-footer p {
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        color: #667085;
    }

    .dashboard-card-footer {
        text-align: right;
        padding-top: 15px;
    }

    .dashboard-card .dashboard-card-header a,
    .dashboard-card .dashboard-card-footer a {
        color: #1570ef !important;
        font-weight: 400;
    }

    .dashboard-card .dashboard-card-header h4 {
        font-style: normal;
        font-weight: 400;
        font-size: 20px;
        line-height: 30px;
        color: #101828;
    }

    .dashboard-card .dashboard-card-header .nice-select {
        background: #ffffff;
        border: 1px solid #f4f5f7;
        -webkit-box-shadow: 0px 0px 1px rgba(65, 76, 105, 0.24),
            0px 3px 8px -1px rgba(50, 57, 71, 0.05);
        box-shadow: 0px 0px 1px rgba(65, 76, 105, 0.24),
            0px 3px 8px -1px rgba(50, 57, 71, 0.05);
        border-radius: 6px;
        -webkit-box-shadow: none;
        box-shadow: none;
        height: 36px;
        line-height: 24px;
    }

    .dashboard-card .dashboard-card-header .nice-select::after {
        height: 10px;
        width: 10px;
        border-width: 1px;
        border-color: #667085;
        top: 40%;
    }

    @media (max-width: 644px) {
        .table-search .position-absolute {
            right: 2%;
        }
    }

    @media (max-width: 1366px) {
        .header-wrapper {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
        }

        .erp-overview-item h6 {
            font-size: 20px;
        }

        .erp-overview-grid-6 {
            grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
        }
    }

    @media (max-width: 767px) {
        .erp-overview-grid-6 {
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 15px;
            gap: 15px;
        }

        .erp-overview-item .overview-icon {
            margin-bottom: 5px;
            height: 40px;
            width: 40px;
        }

        .erp-overview-item p {
            font-size: 12px;
        }

        .erp-overview-item h6 {
            font-size: 16px;
            line-height: 1;
        }

        .dashboard-card {
            padding: 15px;
        }

        .dashboard-card .dashboard-card-header h4 {
            font-size: 13px;
        }
    }

    /* new dashboard css end */

    .erp-new-invice .table-header p {
        display: none;
    }

    /* end */

    .nav-link:focus,
    .nav-link:hover {
        color: var(--clr-primary);
    }

    .subscription-plan-tabs .nav-tabs {
        border: var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color) !important;
        border-radius: 10px !important;
    }

    .subscription-plan-tabs .nav-tabs .nav-link:focus,
    .subscription-plan-tabs .nav-tabs .nav-link:hover,
    .subscription-plan-tabs .nav-tabs .nav-item.show .nav-link,
    .subscription-plan-tabs .nav-tabs .nav-link.active {
        border: none !important;
        color: #2db0f6 !important;
        background-color: transparent !important;
        border-bottom: 1px solid #2db0f6 !important;
    }

    .subscription-plan-tabs .nav-tabs .nav-link {
        margin-bottom: 0 !important;
        border: none !important;
        margin: 0 5px !important;
    }

    .subscription-plan-tabs .nav-tabs .nav-link {
        color: #585865;
        text-align: center;
        font-size: 15px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        text-transform: uppercase;
    }

    .subscription-plan-tabs .content {
        border-radius: 8px;
        border: 1px solid rgba(125, 125, 125, 0.4);
        background: #fff;
    }

    .subscription-plan-tabs .content.active {
        position: relative;
        border: 1px solid #9d31ff !important;
        border-radius: 0 0 8px 8px !important;
    }

    .subscription-plan-tabs .content.active .most-popular {
        width: 100%;
        outline: 1px solid #9d31ff;
        background-color: #9d31ff;
        color: #fff;
        text-align: center;
        border-radius: 8px 8px 0 0;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        padding: 10px 0;
        position: absolute;
        top: -43px;
    }

    .subscription-plan-tabs .content h4 {
        font-size: 25px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .subscription-plan-tabs .content .price h4 {
        color: #2e2e3e;
    }

    .subscription-plan-tabs .content p {
        color: #656565;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }

    .subscription-plan-tabs .content .main-price {
        color: #97979f;
        font-size: 14px;
    }

    .subscription-plan-tabs .content .features p {
        color: #585865;
        font-size: 14px;
    }

    .subscription-plan-tabs .content .features {
        max-height: 300px;
        height: 300px;
        overflow-y: auto;
        scrollbar-width: thin;
    }

    .subscription-plan-tabs .content .features .alert-circle svg {
        fill: #fff !important;
        cursor: pointer;
    }

    .subscription-plan-tabs .content .features .alert-circle svg:hover path {
        stroke: #ff3030 !important;
        transition: 0.5s;
    }

    .subscription-plan-tabs .content .features::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }

    .subscription-plan-tabs .content .features::-webkit-scrollbar-button {
        background: #ccc;
    }

    .subscription-plan-tabs .content .features::-webkit-scrollbar-track-piece {
        background: #888;
    }

    .subscription-plan-tabs .content .features::-webkit-scrollbar-thumb {
        background: #eee;
    }

    .subscription-plan-tabs .content button {
        padding: 7px 20px;
        border-radius: 8px;
        border: 1px solid transparent;
        background: #2db0f6;
        color: #fff;
        text-align: center;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .subscription-plan-tabs .title button {
        border-radius: 24px;
        background: rgba(255, 95, 0, 0.1);
        color: #ff5f00;
        text-align: center;
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        padding: 5px 10px;
    }

    .subscription-plan-tabs .content .btns button:first-child {
        color: #ff3030;
        border-color: #ff3030;
        background-color: transparent;
    }

    .subscription-plan-tabs .content .btns button:last-child {
        padding: 7px 30px;
    }

    @media only screen and (min-width: 1400px) and (max-width: 1550px) {
        .subscription-plan-tabs .content h4 {
            font-size: 21px;
        }

        .subscription-plan-tabs .content p {
            font-size: 14px;
        }

        .subscription-plan-tabs .content .main-price {
            font-size: 13px;
        }

        .subscription-plan-tabs .content .w-52 {
            width: 20% !important;
        }
    }

    .gpt-dashboard-chart .card.dashboard-card,
    .gpt-dashboard-chart .card.sms-report {
        min-height: 90px !important;
    }

    .selectAllCheckbox,
    .checkbox-item {
        height: 20px;
        width: 20px;
        border-radius: 16px;
        border: 1px solid red !important;
    }

    .modal-title {
        font-size: 18px;
        font-weight: 600;
    }

    .modal-close-btn {
        color: var(--clr-primary) !important;
    }

    .option-title {
        font-size: 20px;
        font-weight: 600;
    }

    .disc-btn {
        width: 50px;
        height: 50px;
        border: 1px solid #d8d8d8;
        border-radius: 8px;
    }

    .disc-btn:hover {
        background-color: #fef0f1;
        border: 1px solid var(--clr-primary);
        color: var(--clr-primary);
    }

    .custom-per {
        border: 1px solid rgba(216, 216, 216, 1);
        color: rgba(77, 77, 77, 1);
        height: 32px;
        width: 32px;
        display: flex;
        padding: 5px;
        border-radius: 5px;
        align-items: center;
        justify-content: center;
    }

    .custom-per-active {
        border: 1px solid rgba(197, 33, 39, 1);
        background-color: rgba(254, 240, 241, 1);
        color: rgba(197, 33, 39, 1);
        height: 32px;
        width: 32px;
        display: flex;
        padding: 5px;
        border-radius: 5px;
        align-items: center;
        justify-content: center;
    }

    .square-btn {
        z-index: 0;
    }

    /* .amount-info-container {
        height: 290px;
    } */

    .sales-main-container {
        display: grid;
        grid-template-columns: 100%;
    }

    @media (max-width: 1200px) {
        .sales-main-container {
            grid-template-columns: 100%;
        }
    }

    @media (max-width: 992px) {
        .sales-main-container {
            grid-template-columns: 100%;
        }
    }

    @media (max-width: 768px) {
        .sales-main-container {
            grid-template-columns: 100%;
        }
    }

    @media (max-width: 576px) {
        .sales-main-container {
            grid-template-columns: 100%;
        }
    }

    .select-variations-container {
        display: flex;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
    }

    .select-variations-container .select-variations-content {
        display: flex;
        align-items: center;
        position: relative;
    }

    .select-variations-container .select-variations-content .variations-input {
        position: absolute;
        top: 3px;
        z-index: 2;
    }

    .select-variations-container .select-variations-content .variations-label {
        z-index: 0;
        padding-left: 15px;
    }

    .custome-table-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px !important;
        border-bottom: 1px solid #d0d5dd;
        flex-wrap: wrap;
    }

    .daily-transaction-between-wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 15px;
        padding: 16px;
    }

    .table-top-form form {
        max-width: 1100px;
    }

    .grid-5 {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr 15px 1fr 15px 1fr 15px 1fr 15px 1fr;
        grid-template-columns: repeat(5, 1fr);
        gap: 15px;
    }

    .input-wrapper {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        width: 100%;
    }

    .word-amount-container {
        position: absolute !important;
    }

    .header-label {
        position: absolute;
        top: -7px;
        left: 10px;
        z-index: 4;
        background: white;
        line-height: 1;
        padding: 0 4px;
    }

    .delete-pop {
        background-color: #ffe3e4;
        border-radius: 8px;
        padding: 10px 15px;
    }

    .delete-pop-btn {
        border: none;
        background-color: var(--clr-primary);
        color: white;
        padding: 6px 15px;
        border-radius: 6px;
    }

    .delete-pop-btn:hover {
        background-color: #a6161b;
    }

    .select-row-pera {
        color: var(--clr-primary);
        font-weight: 600;
        font-size: 15px;
    }

    .final-total {
        font-size: 16px;
        font-weight: 700;
        color: #1c1c1c;
    }

    .input-wrapper input {
        background-color: white;
    }

    .summary-container {
        display: flex;
        justify-content: space-between;
    }

    @media (max-width: 768px) {
        .summary-container {
            flex-direction: column;
            align-items: center;
        }
    }

    @media (max-width: 480px) {
        .summary-container {
            flex-direction: column;
            align-items: stretch;
            gap: 8px;
        }

        .grid-5 {
            display: -ms-grid;
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            gap: 15px;
        }
    }

    .custome-table-header h4 {
        font-size: 20px;
        font-weight: 600;
        line-height: 30px;
        color: #101828;
    }

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

    .save-plan h6 {
        background-color: #ff5f00;
        font-size: 20px;
        font-weight: 500;
        color: white;
        padding: 6px;
        border-top-left-radius: 9px;
        border-bottom-right-radius: 9px;
    }

    /* .mb-24 {
        margin-top: 24px;
    } */

    /* loss profit card design */
    .loss-profit-form-container {
        display: flex;
        align-items: center;
        gap: 12px !important;
    }

    /* .details-img {
        height: 40px;
        width: 40px;
        border-radius: 50%;
        object-fit: contain;
    } */
    @media (max-width: 993px) {
        .loss-profit-form-container {
            display: block;
            gap: 10px !important;
        }

        .table-top-left {
            margin-bottom: 16px;
        }
    }

    .loss-card {
        background: #d5effd;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        /* width: 150px; */
    }

    .profit-card {
        background: #d0f5e3;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        /* width: 150px; */
    }

    .sales-card {
        background: #ffe8cc;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        /* width: 150px; */
    }

    .stat-title {
        font-size: 20px;
        font-weight: 600;
        margin: 0;
        opacity: 0.9;
        color: #121212;
    }

    .stat-value {
        font-size: 16px;
        font-weight: 500;
        margin: 0;
        opacity: 1;
        color: #4d4d4d;
    }

    .unpaid-badge {
        background-color: #ff9500;
        color: white;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2px 6px;
        border-radius: 4px;
    }

    .unpaid-badge-2 {
        background-color: #dc3545;
        color: white;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2px 6px;
        border-radius: 4px;
    }

    .paid-badge {
        background-color: #34c759;
        color: white;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2px 6px;
        border-radius: 4px;
    }

    .sup-addon {
        font-size: 10px;
        background-color: yellow;
        color: black;
        position: relative;
        border: none;
        position: absolute;
        top: -16px;
        left: 4px;
        height: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0px 4px;
        position: absolute;
        border-radius: 4px;
    }

    @keyframes pulse {
        0% {
            transform: scale(0.95);
            box-shadow: 0 0 0 0 rgba(255, 255, 0, 0.7);
        }

        70% {
            transform: scale(1);
            box-shadow: 0 0 0 10px rgba(255, 255, 0, 0);
        }

        100% {
            transform: scale(0.95);
            box-shadow: 0 0 0 0 rgba(255, 255, 0, 0);
        }
    }

    .table-dot-border th {
        border-top: 1px dashed #d8d8d8 !important;
        border-bottom: 1px dashed #d8d8d8 !important;
    }

    .table-dot-border td {
        border-bottom: 1px dashed #d8d8d8 !important;
    }

    .purchase-invoice-container {
        padding: 20px 15px;
    }

    .invoice-container {
        width: 80mm;
        margin: 0 auto;
        padding: 15px 8px;
        background-color: white;
        font-weight: 600;
        font-size: 12px;
        line-height: 1.3;
    }

    .invoice-container table td,
    .invoice-container table th {
        font-weight: 600;
        font-size: 12px !important;
        border-bottom: none;
        line-height: inherit;
    }

    .invoice-container td {
        white-space: normal;
    }

    .invoice-container .in-table-row-bottom td {
        font-size: 12px;
    }

    .invoice-content {
        padding: 0;
        position: relative;
        width: 100%;
    }

    .in-main-container {
        width: 1120px;
        margin: auto;
    }

    .invoice-logo {
        width: 54px;
        object-fit: contain;
        height: 54px;
    }

    @media (max-width: 768px) {
        .invoice-logo {
            width: 45px;
            height: 45px;
        }
    }

    .logo {
        padding-top: 12px;
        margin-bottom: 26px;
    }

    .logo h3 {
        font-size: 24px;
        font-weight: 700;
    }

    .business-footer {
        position: relative;
        z-index: 2;
    }

    .right-invoice {
        font-size: 30px;
        font-weight: 600;
        color: white;
        background-color: #000000;
        right: 0px;
        top: 100px;
        padding: 8px 18px;
        border-radius: 30px 0 0 30px;
        position: absolute;
        margin: 0;
    }

    @media (max-width: 768px) {
        .right-invoice {
            top: 130px;
            font-size: 22px;
        }
    }

    .in-table-row td {
        border: none !important;
        font-size: 12px !important;
        padding: 0px;
    }

    .paid-by {
        max-width: 400px;
        white-space: wrap !important;
    }

    @media (max-width: 536px) {
        .paid-by {
            padding-top: 45px !important;
        }
    }

    .in-table-row-bottom td {
        border: none !important;
        font-size: 14px !important;
        font-weight: 600;
        padding: 0px;
    }

    .in-table-row-bottom .total-amound {
        background-color: var(--clr-primary);
        color: white;
        padding: 3px;
    }

    .in-table-header .head-red {
        background-color: var(--clr-primary) !important;
        color: white;
        padding: 12px 14px;
        font-weight: 800;
        border: 1px solid gray;
    }

    .in-table-header .head-black {
        background-color: black !important;
        color: white;
        padding: 12px 14px;
        font-weight: 800;
        border: 1px solid gray;
    }

    .in-print-btn {
        background-color: #f9f9f9;
        color: black;
        height: 32px;
        width: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10%;
        font-size: 18px;
    }

    .in-print-btn-container {
        position: absolute;
    }

    .in-table-body-container {
        border: 1.5px solid #d9d9d9 !important;
    }

    .in-table-body td {
        padding: 5px 14px;
        border-left: 1.5px solid #d9d9d9;
    }

    .in-footer {
        bottom: 0px;
        left: 0;
        background-color: var(--clr-primary);
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 14px;
        font-weight: 500;
        padding: 6px;
    }

    .in-hr {
        margin: 0px !important;
    }

    .in-signature h4 {
        font-size: 14px !important;
        font-weight: 500;
    }

    .in-signature-container {
        bottom: 50px;
        width: 100%;
        right: 0px;
    }

    .word-amount {
        top: -2px;
        line-height: 20px;
        position: absolute;
        font-size: 14px;
        font-weight: 600;
        max-width: 450px;
        text-wrap: auto;
    }

    @media (max-width: 576px) {
        .word-amount {
            max-width: 120px;
        }
    }

    .word-amount::first-letter {
        text-transform: uppercase;
    }

    /* custom tooltip css start */
    /* ------------tooltip custom css start -----------------*/
    .tooltip-inner {
        background-color: #fff;
        color: #525252;
        /* Optional: to change the text color */
        border-radius: 4px;
        /* box-shadow: 0px 3px 8px -1px #4732320D; */
        box-shadow: 0px 0px 1px 0px #0c1a4b3d;
        font-size: 16px;
        font-weight: 400;
        line-height: 20px;
        padding: 10px;
    }

    .tooltip-arrow::before {
        display: none;
    }

    .delete-item .delete-item-show {
        display: flex;
        justify-content: space-between;
        background: #ffe3e4;
        padding: 10px;
        margin: 10px;
        align-items: center;
        border-radius: 8px;
    }

    .p-lr2 {
        padding-left: 12px;
        padding-right: 12px;
    }

    .p-lr {
        padding: 0 1%;
    }

    .right-start-input {
        text-align: right;
    }

    .delete-item .delete-item-show p {
        font-size: 14px;
        color: #1f1f1f;
        font-weight: 500;
        line-height: 20px;
    }

    .delete-item .delete-item-show button {
        padding: 8px 16px;
        border-radius: 6px;
        font-size: 16px;
        color: white;
        background: var(--clr-primary);
        font-weight: 600;
        border: none;
    }

    .quick-actions-container a {
        max-width: 150px !important;
    }

    .quick-actions-container {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .multi-delete {
        /* Remove default appearance */
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        border: 1px solid #d8d8d8 !important;
        /* border-radius: 4px; */
        background-color: #fff;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
    }

    .multi-delete:checked {
        background-color: var(--clr-primary);
        border-color: var(--clr-primary);
        position: relative;
    }

    .multi-delete:checked::after {
        content: "";
        display: block;
        background-image: url("../images/icons/Icon.svg") !important;
        background-size: contain;
        background-repeat: no-repeat;
        position: absolute;
        width: 14px;
        height: 14px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -40%);
        /* icon to the center */
    }

    .user-check-box {
        /* Remove default appearance */
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        border: 1px solid #d8d8d8 !important;
        /* border-radius: 4px; */
        background-color: #fff;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
    }

    .user-check-box:checked {
        background-color: var(--clr-primary);
        border-color: var(--clr-primary);
        position: relative;
    }

    .user-check-box:checked::after {
        content: "";
        display: block;
        background-image: url("../images/icons/Icon.svg") !important;
        background-size: contain;
        background-repeat: no-repeat;
        position: absolute;
        width: 14px;
        height: 14px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -40%);
        /* icon to the center */
    }

    .barcode-info-row p {
        color: #000000;
        font-size: 15px;
        font-weight: 500;
    }

    /********* subscription plan code start  *********/
    .subscription-header {
        padding: 10px;
        border-bottom: 1px solid #dedede;
    }

    .subscription-header h4 {
        font-size: 20px;
        font-weight: 600;
    }

    .plan-stat {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        justify-content: center;
        background-color: #fef0f1;
        border: 1px solid var(--clr-primary) 29;
        border-radius: 8px;
    }

    @media (max-width: 768px) {
        .plan-stat {
            grid-template-columns: 1fr;
            text-align: center;
        }

        .left-plan-stat .premium-plan {
            text-align: left;
            font-size: 20px;
        }

        .right-plan-stat h4 {
            text-align: left;
            font-size: 18px;
        }

        .left-plan-stat {
            flex-wrap: wrap;
            gap: 12px;
        }

        .right-plan-stat {
            flex-wrap: wrap;
            gap: 12px;
        }
    }

    .right-plan-stat {
        border-left: 1px solid var(--clr-primary) 29;
    }

    .right-plan-stat h4 {
        font-size: 20px;
        font-weight: 500;
    }

    .right-plan-stat .plan-btn {
        background-color: var(--clr-primary);
        color: white;
        font-weight: 600;
        font-size: 14px;
    }

    .left-plan-stat h4 {
        font-size: 24px;
        font-weight: 600;
    }

    .left-plan-stat p {
        font-size: 18px;
        color: #4d4d4d;
        font-weight: 500;
    }

    .left-plan-stat .pack-pera {
        padding-top: 6px;
    }

    .left-plan-stat span {
        color: var(--clr-primary);
    }

    .left-days {
        background-color: var(--clr-primary);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 91px;
        width: 91px;
        border-radius: 50%;
        color: white;
    }

    .left-days h2 {
        font-size: 30px;
        font-weight: 600;
        color: white;
    }

    .left-days p {
        font-size: 14px;
        font-weight: 600;
        color: white;
    }

    .package-features-container h4 {
        font-size: 18px;
        font-weight: 600;
    }

    .package-features-content {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 14px;
    }

    @media (max-width: 1024px) {
        .package-features-content {
            grid-template-columns: 1fr 1fr;
        }
    }

    @media (max-width: 768px) {
        .package-features-content {
            grid-template-columns: 1fr;
        }
    }

    .package-features-content .inner-content {
        box-shadow: 0px 3px 8px -1px #4732320d;
        padding: 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-radius: 6px;
        border: 1px solid #4732320d;
    }

    .inner-content p {
        font-weight: 400;
        font-size: 16px;
    }

    /************** Purchase Premium Plan code start  **************/
    .premium-plan-container {
        max-width: 1270px;
        margin: auto;
    }

    .premium-plan-content {
        margin: 18px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 14px;
    }

    .footer-acn {
        color: var(--clr-primary);
    }

    @media (max-width: 1024px) {
        .premium-plan-content {
            grid-template-columns: 1fr 1fr;
        }
    }

    @media (max-width: 768px) {
        .premium-plan-content {
            grid-template-columns: 1fr;
        }
    }

    .plan-single-content {
        border: 1px solid #d8d8d8;
        padding: 40px 18px;
        border-radius: 12px;
        box-shadow: 0px 4px 24px 0px #0000000a;
        transition: 0.3s;
        position: relative;
    }

    .recommended-banner-container {
        position: absolute;
        right: -10px;
        top: 10px;
    }

    .recommended-banner {
        position: relative;
        background-color: #d72626;
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        padding: 5px 10px;
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        display: inline-block;
    }

    .recommended-banner::after {
        content: "";
        position: absolute;
        right: 0;
        top: 100%;
        border-width: 10px 10px 0 0;
        border-style: solid;
        border-color: #b21818 transparent transparent transparent;
    }

    .discount-text {
        position: absolute;
        top: 25px;
        left: 14px;
        font-size: 26px;
        color: white;
        font-weight: 500;
    }

    .discount-badge {
        position: relative;
    }

    .discount-badge-content {
        position: absolute;
        top: 40px;
        right: 15px;
    }

    .discount-arrow {
        position: absolute;
        left: -40px;
        bottom: -68px;
    }

    .plan-single-content:hover {
        border: 1px solid var(--clr-primary);
        background-color: #fff3f4;
    }

    .plan-single-content:hover .plan-buy-btn {
        background-color: var(--clr-primary);
        color: white;
    }

    .plans p {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        text-align: left;
        color: #121212;
    }

    .plans {
        margin-top: 20px;
        margin-bottom: 8px;
    }

    .plan-buy-btn {
        border: 1px solid var(--clr-primary);
        color: var(--clr-primary);
        font-weight: 600;
        font-size: 16px;
    }

    .plan-buy-btn:hover {
        border: 1px solid var(--clr-primary);
        color: white;
        background-color: var(--clr-primary);
    }

    .search-icon {
        position: absolute;
        top: 14px;
        right: 10px;
        font-weight: 400;
        background-color: white;
    }

    .category-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 10px;
        margin-top: 16px;
        /* max-height: 560px; */
        /* overflow-y: auto; */
    }

    .category-brand-scroll {
        max-height: 879px;
        overflow-y: auto;
    }

    .category-brand-scroll::-webkit-scrollbar {
        width: 8px;
    }

    .category-brand-scroll::-webkit-scrollbar-thumb {
        background-color: #4d4d4d;
        border-radius: 4px;
    }

    .category-brand-scroll::-webkit-scrollbar-track {
        background: #f0f0f0;
    }

    .category-brand-scroll {
        scrollbar-width: thin;
        scrollbar-color: #4d4d4d #f0f0f0;
    }

    .category-container::-webkit-scrollbar {
        width: 2px;
    }

    .category-container::-webkit-scrollbar-thumb {
        background-color: #888;
        border-radius: 10px;
    }

    .category-container::-webkit-scrollbar-thumb:hover {
        background-color: #555;
    }

    .category-container::-webkit-scrollbar-track {
        background-color: #f0f0f0;
        border-radius: 10px;
    }

    .category-container {
        scrollbar-width: thin;
        scrollbar-color: #888 #f0f0f0;
    }

    .category-container .category-content {
        border: 1px solid #d8d8d8;
        background-color: #f5f3f34d;
        padding: 12px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 8px;
        transition: 0.3s;
        cursor: pointer;
        height: 100%;
    }

    .category-container .category-content:hover {
        border: 1px solid var(--clr-primary);
    }

    .category-container .category-content:hover h6 {
        color: var(--clr-primary);
    }

    /* collapse */

    .side-bar-manu .dropdown::before {
        content: "\f105";
        font-family: "Font Awesome 5 Pro";
        font-weight: 400;
        color: #aaabae;
        position: absolute;
        right: 15px;
        font-size: 16px;
        display: block;
        z-index: 3;
        top: 10px;
    }

    .side-bar-manu .dropdown.active>.dropdown-menu .dropdown {
        background: none;
    }

    @media (min-width: 1150px) {

        .side-bar.active ul li a .title,
        .side-bar.active .dropdown-menu {
            display: none !important;
        }

        .side-bar.active:hover ul li a .title {
            display: unset !important;
        }

        .side-bar.active:hover .dropdown.active .dropdown-menu {
            display: block !important;
        }
    }

    .custom-image-bg {
        padding: 5%;
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        display: flex;
        border-radius: 0.5rem;
    }

    .color-1 {
        background: linear-gradient(216.62deg, #ac93ff 9.08%, #6426fc 91.45%);
    }

    .color-2 {
        background: linear-gradient(209.98deg, #ffa872 8.23%, #ff620d 90.64%);
    }

    .color-3 {
        background: linear-gradient(217.23deg, #13eb78 7.36%, #00bb58 91.39%);
    }

    .color-4 {
        background: linear-gradient(214.57deg, #ff8282 9.64%, #e71c1c 90.41%);
    }

    .color-5 {
        background: linear-gradient(215.25deg, #72d5fd 9.01%, #098cc1 91.38%);
    }

    .color-6 {
        background: linear-gradient(208.26deg, #d1e243 6.99%, #7bac00 90.82%);
    }

    .color-7 {
        background: linear-gradient(209.98deg, #8499ff 8.23%, #3641ff 90.64%);
    }

    .color-8 {
        background: linear-gradient(209.98deg, #ff86f3 8.23%, #e707d8 90.64%);
    }

    .custom-image-bg img {
        width: 21.5px;
        height: 21.5px;
    }

    .custom-height {
        height: 300px !important;
    }

    @media (min-width: 1200px) {
        .business-content .bus-stat-title {
            font-size: 13px !important;
            line-height: 20px !important;
            white-space: normal !important;
        }

        .bus-profit {
            display: block !important;
        }

        .new-card {
            padding: 1rem 0px;
        }
    }

    @media (max-width: 1200px) {
        .custom-image-bg {
            width: 30px;
            height: 30px;
        }

        .bus-stat-count {
            font-size: 16px !important;
            line-height: 18px !important;
            font-weight: 600 !important;
        }
    }

    @media (max-width: 1199px) {
        .left-margin-top {
            margin-top: 20px !important;
        }

        .right-margin-top {
            margin-top: 18px !important;
        }
    }

    @media (min-width: 991px) and (max-width: 1199px) {
        .col-lg-8 {
            width: 64% !important;
        }
    }

    @media (max-width: 1400px) {
        .card.new-card.dashboard-card {
            padding-top: 1.5rem !important;
            /* padding-bottom: 1.5rem !important; */
        }
    }

    @media (min-width: 1025px) {
        .business-stat .business-content:nth-child(1) {
            border-width: 1px 0px 1px 1px;
            border-style: solid;
            border-color: #d8d8d8;
            border-radius: 10px 0 0 0;
        }

        .business-stat .business-content:nth-child(2) {
            border-width: 1px 0px 1px 1px;
            border-style: solid;
            border-color: #d8d8d8;
        }

        .business-stat .business-content:nth-child(3) {
            border-width: 1px 0px 1px 1px;
            border-style: solid;
            border-color: #d8d8d8;
        }

        .business-stat .business-content:nth-child(4) {
            border-width: 1px 1px 1px 1px;
            border-style: solid;
            border-color: #d8d8d8;
            border-radius: 0 10px 0 0;
        }

        .business-stat .business-content:nth-child(5) {
            border-width: 0px 0px 1px 1px;
            border-style: solid;
            border-color: #d8d8d8;
            border-radius: 0 0 0 10px;
        }

        .business-stat .business-content:nth-child(6) {
            border-width: 0px 0px 1px 1px;
            border-style: solid;
            border-color: #d8d8d8;
        }

        .business-stat .business-content:nth-child(7) {
            border-width: 0px 0px 1px 1px;
            border-style: solid;
            border-color: #d8d8d8;
        }

        .business-stat .business-content:nth-child(8) {
            border-width: 0px 1px 1px 1px;
            border-style: solid;
            border-color: #d8d8d8;
            border-radius: 0 0 10px 0;
        }
    }

    @media (min-width: 768px) and (max-width: 1024px) {
        .business-stat .business-content:nth-child(1) {
            border-width: 1px 0px 1px 1px;
            border-style: solid;
            border-color: #d8d8d8;
            border-radius: 10px 0 0 0;
        }

        .business-stat .business-content:nth-child(2) {
            border-width: 1px 0px 1px 1px;
            border-style: solid;
            border-color: #d8d8d8;
        }

        .business-stat .business-content:nth-child(3) {
            border-width: 1px 1px 1px 1px;
            border-style: solid;
            border-color: #d8d8d8;
            border-radius: 0 10px 0 0;
        }

        .business-stat .business-content:nth-child(4) {
            border-width: 0px 0px 1px 1px;
            border-style: solid;
            border-color: #d8d8d8;
        }

        .business-stat .business-content:nth-child(5) {
            border-width: 0px 0px 1px 1px;
            border-style: solid;
            border-color: #d8d8d8;
        }

        .business-stat .business-content:nth-child(6) {
            border-width: 0px 1px 1px 1px;
            border-style: solid;
            border-color: #d8d8d8;
        }

        .business-stat .business-content:nth-child(7) {
            border-width: 0px 0px 1px 1px;
            border-style: solid;
            border-color: #d8d8d8;
            border-radius: 0 0 0 10px;
        }

        .business-stat .business-content:nth-child(8) {
            border-width: 0px 1px 1px 1px;
            border-style: solid;
            border-color: #d8d8d8;
            border-radius: 0 0 10px 0;
        }
    }

    @media (max-width: 768px) {
        .business-stat .business-content:nth-child(1) {
            border-width: 1px 0px 1px 1px;
            border-style: solid;
            border-color: #d8d8d8;
            border-radius: 10px 0 0 0;
        }

        .business-stat .business-content:nth-child(2) {
            border-width: 1px 1px 1px 1px;
            border-style: solid;
            border-color: #d8d8d8;
            border-radius: 0 10px 0 0;
        }

        .business-stat .business-content:nth-child(3) {
            border-width: 0px 0px 1px 1px;
            border-style: solid;
            border-color: #d8d8d8;
        }

        .business-stat .business-content:nth-child(4) {
            border-width: 0px 1px 1px 1px;
            border-style: solid;
            border-color: #d8d8d8;
        }

        .business-stat .business-content:nth-child(5) {
            border-width: 0px 0px 1px 1px;
            border-style: solid;
            border-color: #d8d8d8;
        }

        .business-stat .business-content:nth-child(6) {
            border-width: 0px 1px 1px 1px;
            border-style: solid;
            border-color: #d8d8d8;
        }

        .business-stat .business-content:nth-child(7) {
            border-width: 0px 0px 1px 1px;
            border-style: solid;
            border-color: #d8d8d8;
            border-radius: 0 0 0 10px;
        }

        .business-stat .business-content:nth-child(8) {
            border-width: 0px 1px 1px 1px;
            border-style: solid;
            border-color: #d8d8d8;
            border-radius: 0 0 10px 0;
        }

        .business-stat .business-content:nth-child(4) {
            /* border: 1px solid #d8d8d8; */
            border-top: 1px solid transparent !important;
        }

        .business-stat .business-content:nth-child(3) {
            /* border: 1px solid #d8d8d8; */
            border-top: 1px solid transparent !important;
        }
    }

    @media (max-width: 480px) {
        .business-stat .business-content:nth-child(1) {
            border-width: 1px 1px 1px 1px;
            border-style: solid;
            border-color: #d8d8d8;
            border-radius: 10px 10px 0 0;
        }

        .business-stat .business-content:nth-child(2) {
            border-width: 0px 1px 1px 1px;
            border-style: solid;
            border-color: #d8d8d8;
            border-radius: 0 0 0 0;
        }

        .business-stat .business-content:nth-child(3) {
            border-width: 0px 1px 1px 1px;
            border-style: solid;
            border-color: #d8d8d8;
        }

        .business-stat .business-content:nth-child(4) {
            border-style: solid;
            border-color: #d8d8d8;
        }

        .business-stat .business-content:nth-child(5) {
            border-width: 0px 1px 1px 1px;
            border-style: solid;
            border-color: #d8d8d8;
        }

        .business-stat .business-content:nth-child(6) {
            border-width: 0px 1px 1px 1px;
            border-style: solid;
            border-color: #d8d8d8;
        }

        .business-stat .business-content:nth-child(7) {
            border-width: 0px 1px 1px 1px;
            border-style: solid;
            border-color: #d8d8d8;
            border-radius: 0 0 0 0;
        }

        .business-stat .business-content:nth-child(8) {
            border-width: 0px 1px 1px 1px;
            border-style: solid;
            border-color: #d8d8d8;
            border-radius: 0 0 10px 10px;
        }

        .business-stat .business-content:nth-child(2) {
            border-top: 1px solid transparent !important;
        }
    }

    .business-stat .business-content:last-child {
        border: 1px solid #d8d8d8;
        border-top: 1px solid transparent;
        border-radius: 0 0 10px 0;
    }

    .business-stat .business-content:nth-child(4) {
        border-top: 1px solid #d8d8d8;
        /* border-radius: 0 10px 10px 0; */
    }

    .business-stat .business-content:nth-child(3) {
        border-top: 1px solid #d8d8d8;
    }

    .business-stat .business-content:nth-child(2) {
        border-top: 1px solid #d8d8d8;
    }

    .business-stat .business-content:nth-child(1) {
        border-top: 1px solid #d8d8d8;
    }

    @media (max-width: 992px) {
        .overallContent {
            height: 250px !important;
        }
    }

    .print-btn {
        color: #fff !important;
        font-size: 16px;
        font-weight: 500;
        line-height: 20px;
        padding: 8px 15px;
        display: flex;
        align-items: center;
        gap: 6px;
        border-radius: 4px;
        min-width: 30px;
    }

    .custom-print-btn {
        background-color: #567df4 !important;
        display: flex;
        align-items: center;
        gap: 8px;
        border: none;
        border-radius: 5px;
        color: white;
        cursor: pointer;
        text-align: center;
    }

    .custom-print-btn:hover {
        color: white;
    }

    .print-btn-1 {
        background-color: #f68a3d !important;
        white-space: nowrap;
    }

    .print-btn-2 {
        background-color: var(--clr-primary) !important;
    }

    .pdf-btn {
        background-color: #f68a3d !important;
    }

    .Money-Receipt {
        font-size: 20px;
        font-weight: 600;
        line-height: 30px;
        text-align: left;
    }

    @media print {
        /* @page {
            size: 80mm auto;
            margin: 0;
        }

        body {
            margin: 0;
            padding: 0;
            width: 72mm;
            font-size: 12px;
            font-family: monospace;
            line-height: 1.4;
        } */

        .print-container {
            display: none !important;
        }

        .custom-invoice-table {
            overflow-x: none;
        }

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

        .logo img.invoice-logo {
            max-height: 60px;
        }

        .side-bar,
        .main-header-section,
        .print-btn {
            display: none;
        }

        .section-container {
            padding: 0;
        }

        .responsive-table {
            overflow: visible !important;
            text-align: center !important;
        }

        .daily-transaction-between-wrapper,
        .total-count-area {
            display: none;
        }

        .table-two thead td {
            font-size: 8px !important;
            padding: 5px !important;
            line-height: 14px;
        }

        .table-two th {
            font-size: 10px !important;
            padding: 5px !important;
            line-height: 14px;
        }

        .invoice-address-section li {
            margin: 0;
        }

        .invoice-address-section p,
        .invoice-address-section span {
            font-size: 10px !important;
            line-height: 20px;
            max-width: 200px !important;
        }

        .invoice-address-section span {
            min-width: 110px !important;
        }

        .invoice-table thead th {
            font-size: 10px;
        }

        .invoice-table tbody td {
            font-size: 10px;
            text-align: center;
        }

        .invoice-header h1 {
            text-align: right;
        }
    }

    .logo img.invoice-logo {
        max-height: 60px;
    }

    /* @page {
        size: A4;
        width: 21cm;
        height: 29.7cm;
    } */

    .pdf-footer {
        margin-top: 20px;
    }

    .large-td {
        width: 100px !important;
        max-width: fit-content;
    }

    /* print css start css */
    .print-wrapper .table th,
    .print-wrapper .table td {
        white-space: pre-wrap;
        vertical-align: middle;
    }

    .print-wrapper .daily-production-table-print th,
    .print-wrapper .daily-production-table-print td {
        padding: 5px !important;
    }

    .print-wrapper .container {
        margin: 0 auto;
    }

    .print-wrapper .print-btn {
        position: absolute;
        right: 30px;
        top: 30px;
        float: none;
    }

    .print-wrapper .ml-auto {
        margin-left: auto;
    }

    .print-signature-wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        /* margin-top: 100px; */
    }

    .print-signature-wrapper p {
        border-top: 1px solid #000;
        width: 200px;
        text-align: center;
        padding-top: 15px;
    }

    .print-btn i {
        margin-right: 6px;
    }

    .print-img {
        margin-left: 50px;
    }

    .print-wrapper {
        min-height: 1000px;
        position: relative;
    }

    .print-signature-wrapper {
        position: absolute;
        top: auto;
        bottom: 0;
        width: 100%;
        left: 0;
    }

    .print-logo {
        width: 35px;
    }

    .print-logo-text {
        font-size: 18px;
        font-weight: 700;
    }

    .print-th {
        background-color: white !important;
    }

    .print-tr td {
        border: none !important;
        color: #4d4d4d;
    }

    .print-greeting {
        font-weight: 600;
        font-size: 16px;
    }

    .print-wrapper .responsive-table {
        min-height: unset;
    }

    .print-wrapper .table th,
    .print-wrapper .table td {
        white-space: nowrap;
    }

    .print-wrapper {
        min-height: 700px !important;
    }

    .table-content {
        /* height: 800px; */
    }

    /* CSS for email verification pin */

    .pin-container {
        display: flex;
        justify-content: center;
        gap: 10px;
    }

    .pin-input {
        width: 40px;
        height: 50px;
        text-align: center;
        font-size: 20px;
        border: 2px solid #ccc;
        border-radius: 5px;
        outline: none;
    }

    .pin-input:focus {
        border-color: #007bff;
    }

    .verify-modal-body .code-input input {
        width: 51px;
        height: 58px;
        padding: 14px 15px;
        border-radius: 10px;
        border: 1px solid #d8d8d8;
        box-shadow: none !important;
    }

    .verify-modal-body .code-input input:focus {
        border: 1px solid var(--clr-primary) !important;
    }

    .verify-modal-body .code-input input:focus-visible {
        border: 1px solid var(--clr-primary) !important;
    }

    .verify-modal-body .des span {
        color: #121212;
    }

    .search-container {
        position: relative;
    }

    #barcode-search-input {
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 16px;
    }

    .barcode-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: white;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
        max-height: 200px;
        overflow-y: auto;
        z-index: 1000;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .barcode-dropdown li {
        padding: 10px;
        cursor: pointer;
        transition: background-color 0.2s;
    }

    .barcode-dropdown li:hover {
        background-color: #f0f0f0;
    }

    .search-hidden {
        display: none;
    }

    /* sidebar plan upgrade css start*/
    .sidebar-free-plan {
        background-image: url("../images/icons/update-bg.svg") !important;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        border-radius: 12px;
        margin-top: 12px;
        margin-bottom: 12px;
    }

    .sidebar-free-plan h3 {
        font-size: 1.2rem;
        font-weight: 700;
        color: white;
    }

    .sidebar-free-plan h5 {
        font-size: 0.8rem;
        font-weight: 500;
        color: white;
    }

    .sidebar-free-plan a {
        background-color: white;
        color: black !important;
        margin-top: 20px;
        border-radius: 10px;
        padding: 0px 10 !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }

    .sidebar-free-plan a:hover {
        border: 1px solid white;
        color: white !important;
    }

    /* sidebar plan upgrade css end*/

    .vatlist-body {
        min-height: 300px !important;
        /* overflow-y: auto; */
    }

    .hide-show-icon {
        top: 10px;
        right: 10px;
        position: absolute;
    }

    .custom-invoice-table {
        overflow-x: auto;
    }

    .bulk-upload-container {
        background-color: #fff;
        padding: 16px;
        box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.05);
        border-radius: 12px;
    }

    .bulk-upload-container .bulk-input {
        max-width: 500px;
    }

    .download-file-btn {
        background-color: #00a96e;
        color: white;
        padding: 10px 14px;
        border: none;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    .instruction-header h5 {
        font-size: 22px;
        font-weight: 500;
    }

    .instruction-header h6 {
        font-size: 15px;
        font-weight: 600;
    }

    .square-btn {
        background-color: var(--clr-primary);
        border: 1px solid var(--clr-primary);
    }

    .square-btn:hover {
        background-color: var(--clr-primary);
        border: 1px solid var(--clr-primary);
    }

    .login-social {
        border: 1px solid #9999994d !important;
        background-color: transparent !important;
        border-radius: 10px !important;
        padding: 10px !important;
        color: #121535 !important;
        font-size: 14px !important;
        font-weight: 500;
    }

    .login-social img {
        height: 24px;
        width: 24px;
        margin-right: 10px;
        border-radius: 20px;
    }

    .inventory-input {
        border: 1px solid #d8d8d8 !important;
        padding: 12px !important;
    }

    .inventory-card-container {
        padding: 24px;
    }

    .inventory-amount-info-container input {
        padding: 12px 6px;
        height: 36px !important;
        border: 1px solid #d8d8d8 !important;
    }

    .inventory-amount-info-container select {
        /* padding: 12px 6px; */
        height: 36px !important;
        border: 1px solid #d8d8d8 !important;
    }

    .social-login {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    @media (max-width: 768px) {
        .social-login {
            grid-template-columns: 1fr;
        }

        .sub-total-container {
            margin-top: 0 !important;
        }
    }

    @media (max-width: 768px) {}

    .sub-plan {
        background-color: #ffffff36;
        padding: 7px;
        border-radius: 6px;
        margin: 28px 0;
        display: none;
        margin-top: 20px !important;
        background-image: url("../images/icons/plan-bg.svg") !important;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .side-bar-addon {
        right: 30px;
        font-size: 10px !important;
        top: 13px;
        border-radius: 3px !important;
        color: black;
    }

    .side-bar:hover .side-bar-addon {
        display: block !important;
    }

    .side-bar:hover .sub-plan {
        display: none !important;
    }

    .side-bar:hover .lg-sub-plan {
        display: block !important;
    }