@media (max-width: 1440px) {
    .sign-up-left {
        width: 450px;
    }


    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper {
        width: 235px;
    }

    .page-wrapper.compact-wrapper .page-body-wrapper .page-body {
        margin-left: 240px;
    }

    .page-wrapper.compact-wrapper .page-header {
        margin-left: 235px;
        width: calc(100% - 235px);
    }

    .page-wrapper .page-body-wrapper {
        margin-top: 7rem;
    }

    .dataTables_wrapper table.dataTable th,
    .dataTables_wrapper table.dataTable td {
        padding: 6px;
    }

    .dataTables_wrapper table.dataTable th,
    .dataTables_wrapper table.dataTable td {
        padding: 5px;
        gap: 1px;
    }

    .terminallogo {
        margin-left: auto;
    }

    td.copy-invoice {
        display: flex;
        border: 0;
        align-items: center;
        justify-content: center;
        height: 100%;
    }


    body {
        font-size: 12px;
    }

    .badge {
        padding: 4px 9px;
    }

    span.badge.paid-badge {
        font-size: 12px;
    }

    span.badge.unpaid-badge {
        font-size: 12px;
    }

    #basic-2 thead.table-dark th {
        font-size: 10px;
        text-wrap: nowrap;
    }

    .dataTables_wrapper .dataTables_filter {
        margin-bottom: 12px;
        margin-left: 15px;
    }

    /*static dashboard css  */
    .statics-tabs {
        gap: 4px;
        height: 50px;
        margin-bottom: 8px;
    }

    .statics-tabs .static-content {
        font-size: 11px;
    }

    .statics-tabs span img {
        max-width: 20px;
    }

    .page-wrapper .page-body-wrapper .page-body {
        padding: 0px 6px;
    }

    .static-dashboard .table thead th {
        font-size: 12px;
        padding: 4px 8px;
    }

    .seller-details {
        gap: 7px;
    }

    .seller-details .name {
        font-size: 12px;
    }

    span.seller-profile img {
        max-width: 50px;
    }

    span.seller-date {}

    .sell-date {
        font-size: 12px;
    }

    .invoice-status .status-mark {
        font-size: 12px;
        line-height: normal;
        height: 22px;
    }

    .sell-amount .amount {
        font-size: 12px;
    }

    .spacing-table td {
        padding: 4px 8px !important;
    }

    .static-dashboard .table thead th {}

    .Statics-monthly-sell .Statics-content {
        font-size: 14px;
    }

    span.Monthly-Sales button {
        width: 100px;
        font-size: 12px;
        height: 28px;
    }

    .statics-meter {
        height: 365px;
        padding: 16px 25px;
    }

    canvas.canvasjs-chart-canvas {
        width: 100% !important;
        height: 310px !important;
        object-fit: contain;
    }

    .total-amount {
        top: 170px;
    }

    .total-amount span.total-amount-price {
        font-size: 20px;
    }

    span.total-tag {
        font-size: 14px;
    }

    .statics-tabs a span.fa {
        font-size: 17px !important;
    }

    .statics-tabs a {
        gap: 2px !important;
    }

    .statics-tabs a span.fa-regular {
        font-size: 17px !important;
    }

    .row.statics-tabs-parents .col-6 {
        width: 25%;
    }

    .view-account {
        width: 64rem;
        overflow-x: scroll;
    }

    table#static-table {
        width: 95rem !important;
    }

    .services-view table#static-table {
        width: 65rem !important;
    }

    .project-box .card-header {
        gap: 12px;
    }

    .project-box .content {
        padding: 12px;
    }

    .invoice-main-text {
        /* padding: 50px 25px 20px 20px !important; */
    }

    .invoice-view-detail {
        max-width: 64rem;
        overflow-x: scroll;
    }

    .tab-content {
        width: 74rem;
    }

    form#createProjectForm label {
        font-size: 15px;
    }

    .invoice-view-card div#top-tabContent {
        width: unset;
    }

}



@media (max-width: 1199px) {
    .appointment-table.table-responsive {
        height: 100%;
    }

    .card.pay-now-sec .card-body {
        overflow-x: unset;
    }

    .card .card-body::-webkit-scrollbar-thumb {
        background: #fe0000bf;
        border-radius: 80px;
    }

    .card .card-body::-webkit-scrollbar {
        width: 5px;
        height: 8px;
        background-color: #fe00004d;
    }

    .scroller {
        width: 1440px;
    }

    .card .card-body {
        /* overflow-x: scroll; */
    }

    .second-chart-list.third-news-update .card-body {
        overflow-x: scroll;
    }

    .appointment .card .card-body {
        overflow: hidden;
    }

    .appointment-table table tr td p,
    .appointment-table table tr td .btn {
        padding: 0px 0px;
    }

    .card-body.scroller-parent {
        overflow-x: scroll;
    }

    .page-body.static-dashboard .main-row-static {
        flex-direction: column-reverse;
        justify-content: center !important;
        align-items: center !important;
    }

    .statics-meter {
        margin-bottom: 3rem;
    }

    .view-account {
        width: 45rem;
    }

    .services-view table#static-table {
        width: 50rem !important;
    }

    .project-box a h6 {
        font-size: 12px;
    }

    .project-box a small {
        font-size: 12px !important;
    }

    .project-box .card-header {
        flex-wrap: wrap;
    }

    .project-box .customers ul {
        flex-wrap: wrap;
        text-align: left;
        justify-content: start;
        gap: 2px;
    }

    .project-box .customers ul li {
        width: 30px;
        height: 30px;
        font-size: 12px !important;
    }

    .project-box .customers ul li a i {
        font-size: 15px !important;
    }

    .invoice-main-text {
        /* padding: 30px 20px 20px 10px !important; */
    }

    .invoice-heading-text:before {
        /* width: 440px !important; */
        /* top: -70px !important; */
        /* transform: skew(-30deg, 0deg) !important; */
    }

    .invoice-heading-text::after {
        /* width: 295px !important; */
        /* transform: skew(-29deg, 0deg) !important; */
    }

    .invoice-heading-text p {
        /* font-size: 12px !important; */
    }

    .invoice-heading-text h1 {
        /* font-size: 25px !important; */
        /* padding-bottom: 15px !important; */
    }

    .invoice-main-text-black img {
        /* max-width: 250px !important; */
    }

    .before-styling:before {
        /* width: 30% !important; */
        /* transform: skewX(-30deg) !important; */
    }

    .before-styling:after {
        /* transform: skewX(-30deg) !important; */
        /* width: 80% !important; */
        /* left: 250px !important; */
    }

    .table-responsive-sm.srollable-table-parent {
        /* padding-bottom: 200px !important; */
    }

    table.table.table-clear tr.extra-bord td {
        padding: 15px 15px !important;
    }

    .editing-invoice strong {
        /* font-size: 20px !important; */
    }

    .invoice-view-detail {
        max-width: 45rem;
    }

    .editing-invoice p {
        width: 80% !important;
    }

    .payment-ct-form-style .card-body {
        padding: 10px !important;
    }
}


@media (max-width: 991px) {
    .sign-up-left {
        width: 360px;
    }

    .log-in-content h1 {
        font-size: 36px;
    }

    .log-in-content p {
        font-size: 14px;
    }

    .log-in-foam .cridentials label {
        left: 30px;
    }

    .log-in-foam .cridentials input {
        padding: 6px 28px;
    }

    .cridentials span.icons {
        right: 30px;
    }

    .left-header img {
        margin: 0px;
    }

    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .logo-wrapper {
        padding: 0px 0px;
    }

    .second-chart-list.third-news-update .appointment-sec .card-body {
        overflow-x: scroll;
    }

    .card .card-body {
        /* padding: 10px !important; */
    }

    .btn {
        margin-bottom: 10px;
    }

    .total-amount span.total-amount-price {
        font-size: 16px;
    }

    span.total-tag {
        font-size: 12px;
    }

    .total-amount {
        top: 172px;
    }

    .invoice-heading-text:before {
        /* width: 510px !important; */
        /* height: 170px !important; */
    }

    .invoice-heading-text::after {
        /* width: 360px !important; */
    }

    .invoice-heading-text p {
        /* font-size: 15px !important; */
    }


    .tab-content {
        width: 65rem;
    }

    .section-header {
        padding-bottom: 0 !important;
    }

    .section-header h3 {
        margin-top: 50px !important;
    }

}

@media (max-width: 767px) {

    .right-content {
        width: 100%;
        display: block;
        height: auto;
    }

    .slider-main-colum {
        display: none;
    }

    .sign-up-left {
        width: 100%;
        padding: 0 16px;
        height: 100vh;
        justify-content: center;
    }

    .sign-in-sec {
        height: auto;
    }

    .Need-Help {
        position: unset;
        margin-top: 2rem;
    }

    .log-in-content {
        margin: 30px 0 20px;
    }

    .log-in-content h1 {
        font-size: 2rem;
    }

    .log-in-content p {
        font-size: 14px;
    }

    .log-in-foam .cridentials input {
        padding: 6px 20px;
        height: 55px;
    }

    .cridentials span.icons {
        right: 20px;
    }

    .log-in-foam .cridentials label {
        left: 13px;
        padding: 0 7px;
    }

    .logo-container {
        width: 50%;
    }

    .dataTables_wrapper .dataTables_length {
        float: left;
    }

    .dataTables_wrapper .dataTables_filter {
        margin: 0;
    }

    div.dataTables_wrapper div.dataTables_filter label {
        float: right;
    }

    div.dataTables_wrapper div.dataTables_paginate {
        float: left;
        margin: 0 !important;
        margin-left: 1rem !important;
    }

    .statics-tabs .static-content {
        font-size: 11px;
    }

    .statics-tabs {
        gap: 3px;
        height: 40px;
    }

    .total-amount span.total-amount-price {
        font-size: 30px;
    }

    span.total-tag {
        font-size: 16px;
    }

    .static-dashboard .card .card-body {
        overflow-x: scroll;
    }

    .static-dashboard .card .card-body #static-table {
        width: 750px !important;
    }

    .statics-meter {
        height: 380px;
    }

    .view-account {
        width: 33.5rem;
    }

    .project-box .card-header {
        display: block;
    }

    .project-box .customers ul {
        justify-content: center;
        margin-top: 10px;
    }

    .project-box .badge {
        line-height: 20px;
    }

    .project-box .badge {
        display: unset !important;
    }

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

    .invoice-heading-text:before {
        /* width: 430px !important; */
    }

    .invoice-heading-text::after {
        /* width: 275px !important; */
    }

    .invoice-heading-text p {
        /* font-size: 11px !important; */
    }

    .invoice-main-text-black img {
        /* max-width: 190px !important; */
    }

    .mb-3.invoice-extra.pb-3.border-bottom {
        /* padding-top: 30px; */
    }

    table.table.srollable-table tr th {
        /* font-size: 12px !important; */
    }

    .before-styling:before {
        /* width: 35% !important; */
    }

    .editing-invoice strong {
        /* font-size: 17px !important; */
    }
}

@media (max-width: 575px) {
    .card.payment_new a {
        font-size: 16px !important;
    }

    ul.ks-cboxtags li label {
        padding: 2px 8px !important;
        font-size: 12px !important;
    }

    .select2-container .select2-selection--single .select2-selection__rendered {
        padding: 12px 18px;
    }

    .right-content {
        width: 100%;
        display: block;
        height: auto;
    }

    .slider-main-colum {
        display: none;
    }

    .sign-up-left {
        width: 100%;
        padding: 0 16px;
        height: 100vh;
        justify-content: center;
    }

    .sign-in-sec {
        height: auto;
    }

    .Need-Help {
        position: unset;
        margin-top: 2rem;
    }

    .log-in-content {
        margin: 30px 0 20px;
    }

    .log-in-content h1 {
        font-size: 2rem;
    }

    .log-in-content p {
        font-size: 14px;
    }

    .log-in-foam .cridentials input {
        padding: 6px 20px;
        height: 55px;
    }

    .cridentials span.icons {
        right: 20px;
    }

    .log-in-foam .cridentials label {
        left: 13px;
        padding: 0 7px;
    }

    .logo-container {
        width: 50%;
    }

    .card .card-body::-webkit-scrollbar-thumb {
        background: #fe0000bf;
        border-radius: 80px;
    }

    .card .card-body::-webkit-scrollbar {
        width: 5px;
        height: 8px;
        background-color: #fe00004d;
    }

    div.dataTables_wrapper div.dataTables_filter label {
        margin: 0px 25px;
    }

    td.copy-invoice {
        /* justify-content: space-evenly; */
    }

    .dataTables_wrapper .dataTables_length {
        margin: 0 12px;
    }

    div.dataTables_wrapper .dataTables_filter {
        margin-bottom: 0px;
    }

    .balance-box {
        height: auto;
        padding: 0px 0;
        overflow: hidden;
    }

    .border-box {
        padding: 8px !important;
    }

    .page-wrapper .page-body-wrapper {
        margin-top: 4rem;
    }

    .project-list .border-tab.nav-tabs .nav-item .nav-link {
        margin: 0;
    }

    .project-list .border-tab.nav-tabs .nav-item .nav-link {
        margin: 0;
    }

    .project-cards .card .card-body {
        overflow-x: unset;
    }

    .card .card-body {
        /* padding: 9px !important; */
    }

    .dataTables_wrapper {
        width: 1440px;
    }

    .border-box {
        padding: 8px;
    }

    .btn {
        padding: 9px 10px;
        font-size: 11px;
        text-wrap: nowrap;
    }

    .card {
        padding: 0rem;
    }

    .submit-payment {
        padding: 8px 20px;
        font-size: 22px;
        border-radius: 44px;
        width: 100%;
        margin: auto;
        text-align: center;
    }

    .card.pay-now-sec .card-body {
        overflow-x: unset;
    }

    .submit-payment {
        padding: 10px 10px !important;
    }

    .card.pay-now-sec .section-header h1 {
        font-size: 21px;
    }

    .card.pay-now-sec .section-header img {
        width: 100% !important;
    }

    .section-header {
        margin-bottom: 0px;
    }

    .terminallogo {
        margin-left: auto;
    }

    .srollable-table {
        /* width: 724px; */
    }

    .srollable-table-parent::-webkit-scrollbar-thumb {
        background: #fe0000bf;
        border-radius: 80px;
    }

    .srollable-table-parent::-webkit-scrollbar {
        width: 5px;
        height: 8px;
        background-color: #fe00004d;
    }

    img.brand-img {
        margin-top: 1rem !important;
    }

    ol.breadcrumb {
        justify-content: start !important;
        margin-top: 12px !important;
    }

    .project-list .border-tab.nav-tabs .nav-item .nav-link {
        margin: 6px 0;
    }

    .page-wrapper .page-body-wrapper .page-title .row h3 {
        text-align: center;
    }

    .statics-tabs {
        margin-bottom: 24px;
        gap: 16px;
    }

    .statics-meter {
        margin-bottom: 2rem;
        margin-top: 2rem;
    }

    .static-dashboard .card .card-body {
        overflow-x: scroll;
    }

    .static-dashboard .card .card-body #static-table {
        width: 750px !important;
    }

    .statics-meter {
        height: 380px;
        padding: 18px 25px;
    }

    .row.statics-tabs-parents .col-6 {
        width: 50%;
    }

    .total-amount {
        top: 168px;
    }

    .total-amount span.total-amount-price {
        font-size: 24px;
    }

    .select2-container .select2-selection--single {
        border-radius: 0.25rem !important;
        border-color: #efefef;
        height: 47px !important;
        padding: 0px;
    }

    .view-account {
        width: 24.5rem;
    }

    .services-view table#static-table {
        width: 45rem !important;
    }

    .project-box .customers ul {
        justify-content: start;
    }

    .project-box .customers ul li {
        width: 35px;
    }

    .invoice-main-text {
        /* display: block !important; */
    }

    .invoice-heading-text:before {
        /* width: 95% !important; */
        /* left: 10px !important; */
        /* top: 5px !important; */
        /* transform: skew(0deg, 0deg) !important; */
        /* height: 100px !important; */
    }

    .invoice-heading-text::after {
        /* width: 100% !important; */
        /* left: 0 !important; */
        /* top: 0 !important; */
        /* transform: skew(0deg, 0deg) !important; */
        /* height: 110px !important; */
    }

    .invoice-heading-text {
        /* padding: 25px; */
    }

    .invoice-view-detail {
        max-width: 25rem;
    }
}