@media (min-width: 1000px) {
    .nav-profile i {
        display: none;
    }
}

@media (max-width: 1000px) {
    .overX {
        margin-bottom: 6px;
    }
    .bill-search-bar{
        width: 95%;
    }
    .customDate{
        width: 95%;
    }
    #inputSname.form-select{
        width: 95%;
    }
}



@media (max-width: 430px) {
    .passChangeButtons {
        flex-direction: column;
    }
}

@media (max-width: 767px) {
    .introjs-tooltip {
        min-width: 300px !important;
    }
    div#leftFilt {
        padding-left: 0;
    }
    div.dataTables_wrapper div.dataTables_paginate ul.pagination{
        margin-bottom: 20px;
    }
    .overflx{
        overflow-x: scroll;
        /* padding-bottom: 20px; */
        margin-bottom: 20px;
    }
    .tdCardData p:nth-child(2) {
        text-align: right;
    }
    .dashboard_week label.checkbox-inline{
        width: 100%;
        font-size: 12px;
    }
    .dashboard_week_select{
        display: inline-block !important;
        width:100% !important;
    }

    .dashboard_week_select select{
        margin-left: 0px !important;
        margin-bottom: 10px;
    }
    .searchWrapper button {
        width: 100%;
        text-align: left;
    }
    .paidBy {
        justify-content: flex-start;
    }   
    .mNone{
        display: none !important;
    }
    p.mb-0 br {
        display: block;
    }
    .radioContainer .rdCheckmark:after {
        top: 38px;
        left: 10px;
    }
    div#portalUserTable_info, div#invoiceSummary_info, div#cStaff_info {
        position: static;
        margin-bottom: 10px;
    }
    .payAmnt {
        position: static;
    }
    div#makePayment button.btn.btn-secondary {
        padding-left: 0;
    }
    div#makePayment .modal-footer {
        justify-content: center;
    }
    .totalInv {
        position: static;
        line-height: 20px;
        margin-bottom: 10px;
    }
    label.switch.leftmob {
        display: block;
        margin-bottom: 16px;
    }.carddLeft{
        width: 100%;
    }
    .searchWrapper {
        width: 100%;
      }
    .textStyle2,
    h2.invCompName {
        font-size: 20px;
    }

    div#invoiceAccordian {
        height: auto;
        max-height: 400px;
        overflow: auto;
    }

    .height500 .col-md-9 {
        margin-top: 16px;
    }

    .topRightButtons {
        flex-direction: column;
        margin-top: 10px;
    }

    .topRightButtons button,
    .topRightButtons div,
    .topRightButtons .selectCont,
    .topRightButtons select {
        width: 100% !important;
        max-width: 500px;
        margin-right: auto;
    }

    .collapse .invoiTable {
        display: none;
    }

    .show .invoiTable {
        display: block !important;
    }

    .btnHeader p span {
        display: block;
    }

    .totalDiv p {
        padding: 11px;
        font-size: 14px;
    }

    .totalDiv {
        margin-top: 10px;
    }

    .paidBy p {
        font-size: 12px;
    }

    .height100 {
        height: auto;
    }

    .height500 {
        height: auto;
    }

    .invoiceGreenTable {
        flex-direction: column;
        height: auto;
        align-items: flex-start;
        padding: 16px;
        border: 0 !important;
    }

    .btnHeader {
        flex-direction: column;
        align-items: flex-start;
    }

    .btnHeader p {
        text-align: left;
        font-size: 14px;
    }

    .invCol {
        width: 100%;
        padding: 0;
        border: 0 !important;
    }

    .invCol h2 span {
        display: inline-block;
    }

    .invCol h2 {
        font-size: 14px;
    }

    .invoicePage .text-right p,
    .invoicePage .text-right h2 {
        text-align: left;
    }

    .drop-container {
        padding-left: 107px;
    }

    .payBy {
        flex-wrap: nowrap;
    }

    div#raiseDispute .modal-footer.position-relative,
    div#changePaymentMethod .modal-footer.position-relative {
        justify-content: center;
        margin-top: 30px;
    }

    button.btn.removePay {
        top: -31px;
        width: 100%;
        text-align: center;
        padding: 0;
        margin: 0;
    }

    img.userImg {
        display: block;
        margin: 0 auto;
        margin-bottom: 10px !important;
    }

    .updDet {
        width: 100%;
    }

    form.updateUserDetails button {
        width: 100%;
    }

    .UserDetails p,
    .UserDetails {
        text-align: center;
    }

    .headRight img {
        width: 50px;
        height: 50px;
    }

    .card {
        height: calc(100% - 16px);
    }

    .mobCol {
        justify-content: flex-start !important;
        flex-direction: column !important;
        align-items: flex-start;
        gap: 7px;
    }

    .lastYear {
        max-width: 100%;
    }

    .filt1 .col-sm-4 {
        padding-left: 0;
    }

    .card {
        margin-bottom: 16px !important;
    }

    .pagetitle {
        padding: 0 12px;
    }

    .stafPerm {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
        padding: 0 20px;
        margin-left: 0;
        row-gap: 8px;
        column-gap: 21px;
    }

    h5.sPrm {
        text-align: left;
        margin-bottom: 16px;
    }

    .stafPerm .col-md-4 .row .col-md-3 {
        all: initial;
    }

    .stafPerm .col-md-4 .row p {
        text-align: left;
        padding: 0 0 0 5px;
        margin: 0;
    }

    .stafPerm .col-md-4 .row {
        /* justify-content: center; */
        flex-wrap: nowrap;
        margin-bottom: 10px;
    }

    .addNewClient .modal-body {
        padding: 16px 18px;
    }

    .stafPerm .col-md-4 {
        flex: 1 0 46%;
        padding: 0;
        margin-bottom: 6px;
    }

    .collapse:not(.show) {
        opacity: 0 !important;
        left: -100% !important;
        display: block !important;
    }




    .addNewClient .col-md-9 {
        margin-top: 10px;
    }

    div#cStaff_paginate {
        margin-top: 11px !important;
    }

    label.form-label {
        text-align: left;
        margin-bottom: -8px;
    }

    .dataTables_scrollBody {
        height: 70vh !important;
    }

    .customDate input.form-control {
		margin-left:10px;
    }

    nav.header-nav li.nav-item.dropdown.pe-3 {
        padding: 0 !important;
    }

    .customDate {
        width: 100%;
        margin-bottom: 10px;
    }

    #avgWeek .card-title{
        font-size: 13px;
    }

    .centerNav {
        order: -1;
        z-index: 9;
    }

    .tableFooter {
        flex-direction: column;
        gap: 10px;
    }



    .tableFooter nav {
        flex-direction: column;
    }

    .fillLeft {
        flex-direction: column;
    }

    .fillLeft input,
    .fillLeft select {
        width: 100% !important;
        min-width: auto;
        max-width: 100%;
    }

    div#cStaff_length {
        text-align: center !important;
        margin-top: 16px;
    }

    .bill-search-bar {
        width: 100%;
    }

    div#cStaff_info {
        position: static !important;
    }


    .main_inner {
        padding: 14px 16px;
    }



    .addNewClient {
        text-align: center !important;
        margin-top: 20px !important;
    }

    thead tr th {
        min-width: 130px;
    }

    .customDate input {
        padding: 0 65px 0 37px !important;
        border: none;
        font-size: 14px !important;
    }
}

@media (min-width: 994px) {
    .assign_client_li{ margin-right:20px; }
}
@media (max-width: 994px) {
    .assign_client_li{ padding: 15px; }
}

@media (min-width: 768px) {
    .dropdown-menu-arrow::before {
        content: "";
        width: 13px;
        height: 13px;
        background: #fff;
        position: absolute;
        top: -7px;
        right: 20px;
        transform: rotate(45deg);
        border-top: 1px solid #eaedf1;
        border-left: 1px solid #eaedf1;
    }
    
}




@media (max-width: 1199px) {
    .header .search-bar {
        position: fixed;
        top: 50px;
        left: 0;
        right: 0;
        padding: 20px;
        box-shadow: 0px 0px 15px 0px rgba(1, 41, 112, 0.1);
        background: white;
        z-index: 9999;
        transition: 0.3s;
        visibility: hidden;
        opacity: 0;
    }

    .header .search-bar-show {
        top: 60px;
        visibility: visible;
        opacity: 1;
    }

    .sidebar {
        left: -300px;
    }

    .toggle-sidebar .sidebar {
        left: 0;
    }
}

@media (min-width: 1200px) {

    .toggle-sidebar #main,
    .toggle-sidebar #footer {
        margin-left: 0;
    }

    .toggle-sidebar .sidebar {
        left: -300px;
    }
}

@media (min-width: 992px) {
    .error-404 img {
        max-width: 50%;
    }
}


@media (max-width: 990px) {
    .topFilters {
        display: none !important;
    }

    div#navbarSupportedContent:before {
        content: '';
        width: 75%;
        height: 100%;
        background: #fff;
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1;
        pointer-events: none;
    }

    div#navbarSupportedContent:after {
        content: '';
        width: 100%;
        height: 100%;
        background: #000;
        opacity: 0.6;
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        z-index: -2;
        pointer-events: none;
    }

    .mob_header {
        display: flex;
    }

    p.reqBy span {
        display: block;
    }

    .mobSignout {
        display: block;
    }

    .pagetitle nav {
        display: none;
    }

    span.notofy {
        float: right;
        color: #fff;
        width: 25px;
        height: 25px;
        line-height: 27px;
    }

    .centerNav ul li a {
        color: #000 !important;
        font-size: 16px;
        border-bottom: 1px solid #ced4da;
        border-radius: 0;
        margin: 0;
        padding: 20px !important;
    }

    .centerNav ul li a:hover {
        background: #d9e2e1;
    }

    .centerNav ul li a.active {
        background: #d9e2e1;
        color: #000 !important;
    }

    a.logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .centerNav {
        order: -1;
    }

    .header {
        padding: 10px 16px !important;
    }

    span.navbar-toggler-icon {
        margin-top: 10px;
    }

    div#navbarSupportedContent {
        position: fixed;
        transition: all 0.3s ease-in-out;
        top: 0;
        left: 0;
        background: #fff;
        width: 75%;
        height: 100vh;
        overflow-x: scroll;
    }

    div#navbarSupportedContent .navbar-nav{

        overflow-y: scroll;
        height: 65vh;
    }

    .mobFilter {
        display: flex !important;
    }

    .pagetitle h1 {
        font-size: 18px;
    }

    .tableHead p {
        text-align: left !important;
    }

    .loginTooltip {
        position: static;
        margin-bottom: 10px;
    }

    .pagetitle {
        flex-direction: column;
        align-items: flex-start;
    }

    .filt1 .row {
        --bs-gutter-y: 10px !important;
    }

    .billDetails {
        flex-direction: column;
        align-items: flex-start;
    }

    .changeBill {
        width: 100%;
        margin-top: 16px;
    }

    .card.debitCard {
        min-height: 264px;
    }

    .visaImg {
        max-width: 46px;
    }

    img.elipses {
        max-width: 180px;
    }

    .dcTop {
        flex-direction: column;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: flex-start !important;
    }

    .passChangeButtons button {
        height: auto !important;
        max-height: initial !important;
        padding: 8px;
        flex: 1;
    }

    hr.mt-5.mb-4 {
        margin: 30px 0px 24px 0px !important;
    }

    .btn-primary {
        padding: 0 10px;
    }

    .scheuleRadio {
        /* flex-direction: column; */
        align-items: baseline;
    }

    div#invoiceSummary_info,
    div#cStaff_info {
        position: static;
        margin-bottom: 10px;
    }

    .defCard {
        gap: 10px;
        flex-direction: column;
    }

    .cardDetNUm h2 {
        font-size: 15px;
    }

    .cardDetNUm p {
        font-size: 12px;
    }

    .carddLeft {
        gap: 6px;
    }

    .invoiceTabs {
        display: flex;
        overflow: auto;
        padding-bottom: 5px;
    }

    .invoiceTabs a {
        flex: 0 0 auto;
    }

    button.borderBtn {
        width: 100%;
    }

    .buttonContainer {
        flex-direction: column;
    }
}
@media only screen and (max-width: 800px) {
    
    /* Force table to not be like tables anymore */
    #no-more-tables table, 
    #no-more-tables thead, 
    #no-more-tables tbody, 
    #no-more-tables th, 
    #no-more-tables td, 
    #no-more-tables tr { 
        display: block; 
    }
 
    /* Hide table headers (but not display: none;, for accessibility) */
    #no-more-tables thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
 
    #no-more-tables tr { border: 1px solid #ccc; }
 
    #no-more-tables td { 
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        padding-left: 50%; 
        white-space: normal;
        text-align:right;
    }
 
    #no-more-tables td:before { 
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%; 
        padding-right: 10px; 
        white-space: nowrap;
        text-align:left;
        font-weight: bold;
    }
 
    /*
    Label the data
    */
    #no-more-tables td:before { content: attr(data-title); }
}
@media only screen and (max-width: 800px) {
    
    /* Force table to not be like tables anymore */
    #no-more-tables-past-past table, 
    #no-more-tables-past thead, 
    #no-more-tables-past tbody, 
    #no-more-tables-past th, 
    #no-more-tables-past td, 
    #no-more-tables-past tr { 
        display: block; 
    }
 
    /* Hide table headers (but not display: none;, for accessibility) */
    #no-more-tables-past thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
 
    #no-more-tables-past tr { border: 1px solid #ccc; }
 
    #no-more-tables-past td { 
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        padding-left: 50%; 
        white-space: normal;
        text-align:right;
    }
 
    #no-more-tables-past td:before { 
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%; 
        padding-right: 10px; 
        white-space: nowrap;
        text-align:left;
        font-weight: bold;
    }
 
    /*
    Label the data
    */
    #no-more-tables-past td:before { content: attr(data-title); }
}
@media only screen and (max-width: 800px) {
    
    /* Force table to not be like tables anymore */
    #no-more-tables-aging table, 
    #no-more-tables-aging thead, 
    #no-more-tables-aging tbody, 
    #no-more-tables-aging th, 
    #no-more-tables-aging td, 
    #no-more-tables-aging tr { 
        display: block; 
    }
 
    /* Hide table headers (but not display: none;, for accessibility) */
    #no-more-tables-aging thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
 
    #no-more-tables-aging tr { border: 1px solid #ccc; }
 
    #no-more-tables-aging td { 
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        padding-left: 50%; 
        white-space: normal;
        text-align:right;
    }
 
    #no-more-tables-aging td:before { 
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%; 
        padding-right: 10px; 
        white-space: nowrap;
        text-align:left;
        font-weight: bold;
    }
 
    /*
    Label the data
    */
    #no-more-tables-aging td:before { content: attr(data-title); }

    #agingTable .text-center{
        text-align: right !important;
    }
}
/** Ipad Landscape **/
@media screen and (min-width: 1000px) and (max-width: 1396px) {
    .pagetitle{
        margin-top: 20px;
    }
    .centerNav ul li a{
        padding: 8px 6px !important;
        font-size: 10px;
    }
    .adminNav ul li a{
        padding: 8px 16px !important;
        font-size: 14px;
    }
    .topRightButtons button, .topRightButtons #saveInvoice a{
        display: block;
        min-width: max-content;
        font-size: 14px;
    }
    #invoice_pagi_btn{ margin-top: 0px !important }
}
@media (min-width: 770px) and (max-width: 980px) {
    div.dataTables_wrapper div.dataTables_paginate ul.pagination{
        margin-bottom: 50px;
    }
    #change_address{ margin-top:-15px; }
    .topRightButtons button, .topRightButtons #saveInvoice a{
        min-width: max-content;
        font-size: 14px;
    }
    .tdCardData{ display: block; }
}
@media (max-width: 765px) {
    #invoiceSummary_paginate ul.pagination{
        margin-bottom: 25px;
    }
}

@media only screen and (max-width:1000px) and (orientation:portrait) {
 #warning-message {
  display:none
 }
 .nested_boxes{ display:block; }
 #assign_client_ipad{ display:none; }
}
@media (orientation: portrait) {
   .nested_boxes{ display:block; }
  #assign_client_ipad{ display:none; }
}
@media (orientation: landscape) {
    .nested_boxes{ display:none; }
     #assign_client_ipad{ display:block; }
}

@media only screen and (max-width:1000px) and (orientation:landscape) {
 #warning-message {
  display:flex;
 }
 #next-content-section {
  display: none;
 }
}