@media (max-width:430px){
    /* Standard css for all */
    .heading1{
        font-size: 34px;
        font-weight: 600; /* 700 */
        color: var(--primary-main-heading);
    }
    .heading2{
        font-size: 20px;
        font-weight: 600;  /* 700 */
        color: var(--primary-main-heading);
    }
    
    .themeHeading2{
        font-size: 28px;
        font-weight: 600;  /* 700 */
        color: var(--primary-theme-color);
    }
    
    .heading3{
        font-size: 22px;
        font-weight: 500;  /* 600 */
        color: var(--primary-main-heading);
    }
    
    .heading4{
        font-size: 18px;
        font-weight: 500;
        color: var(--primary-main-heading);
    }
    
    .heading5{
        font-size: 16px;
        font-weight: 500;  /* 600 */
        color: var(--primary-main-heading);
    }
    .heading5_1{
        font-size: 16px;
        font-weight: 500;  /* 600 */
        color: var(--primary-sub-heading);
    }
    .heading5_2{
        font-size: 16px;
        font-weight: 500;  /* 600 */
        color: var(--primary-theme-color);
    }
    
    .heading6{
        font-size: 14px;
        font-weight: 500;  /* 600 */
        color: var(--primary-main-heading);
    }
    .heading6_1{
        font-size: 14px;
        font-weight: 500;  /* 600 */
        color: var(--primary-sub-heading);
    }
    .heading6_2{
        font-size: 14px;
        font-weight: 500;  /* 600 */
        color: var(--list-heading-color);
    }
    .formHeading{
        position: static !important;
        transform: none !important;
        font-weight: 500;
        font-size: 24px;
        color: var(--primary-main-heading);
    }
    
    .leadText{
        font-size: 12px;
        font-weight: 400;
        color: var(--primary-sub-heading);
    }
    .leadText_1{
        font-size: 12px;
        font-weight: 400;
        color: var(--list-heading-color);
    }
    .standardText{
        font-size: 12px;
        font-weight: 500;
        color: var(--primary-sub-heading);
    }
    .standardText_2{
        font-size: 10px;
        font-weight: 500;
        color: var(--list-heading-color);
    }
    .standardText_3{
        font-size: 10px;
        font-weight: 500;
        color: var(--primary-main-heading);
    }
    .smallText{
        font-size: 10px;
        font-weight: 400;
        color: var(--list-heading-color);
    }
    .smallText_1{
        font-size: 10px;
        font-weight: 400;
        color: var(--primary-sub-heading);
    }
    .custom1{
        font-size: 32px;
        font-weight: 800;  /* 900 */
        color: var(--primary-sub-heading);
    }
    
    .customTheme1{
        font-size: 32px;
        font-weight: 800;  /* 900 */
        color: var(--primary-theme-color);
    }
    
    .custom2{
        font-size: 34px;
        font-weight: 400;
        color: var(--primary-sub-heading);
    }
    .custom3{
        font-size: 16px;
        font-weight: 400;
        color: var(--primary-sub-heading);
    }
    .custom4{
        font-size: 14px;
        font-weight: 400;
        color: var(--primary-sub-heading);
    }
    .custom4_1{
        font-size: 14px;
        font-weight: 400;
        color: var(--primary-main-heading);
    }
    .custom4_2{
        font-size: 14px;
        font-weight: 400;
        color: var(--list-heading-color);
    }
    .custom5{
        font-size: 12px;
        font-weight: 400;
        color: var(--list-heading-color);
    }
    .custom5_1{
        font-size: 12px;
        font-weight: 400;
        color: var(--primary-main-heading);
    }
    .custom6{
        font-size: 12px;
        font-weight: 500;
        color: var(--list-heading-color);
    }
    .custom6_1{
        font-size: 12px;
        font-weight: 500;
        color: var(--primary-sub-heading);
    }
    .custom6_2{
        font-size: 12px;
        font-weight: 500;
        color: var(--primary-main-heading);
    }
    .custom7{
        font-size: 12px;
        font-weight: 500;
        color: var(--primary-sub-heading) !important;
        font-family: 'Roboto Mono';
    }
    
    
    .primaryButton{
        padding: 6px 13px;
        font-size: 12px;
        min-width: 70px;
        white-space: nowrap;
    }
    
    .secondaryButton{
        padding: 3px 13px;
        font-size: 12px;
        min-width: 70px;
    }
    
    .outlineButton{
        padding: 3px 13px;
        font-size: 12px;
        min-width: 70px;
    }
    
    .orangeOutlineButton{
        padding: 5px 13px;
        font-size: 12px;
        min-width: 70px;
    }
    
    .cancelButton {
        padding: 5px 13px;
        font-size: 12px;
        min-width: 70px;
    }

    /* navbar css */
    .bodyMainContainer .mobNavBarOuter{
        display: flex !important;
        position: absolute;
        top: 0;
        border-bottom: 1px solid var(--primary-border-color);
        width: 100%;
        padding: 10px ;
        box-sizing: border-box;
        background: #fff;
    }

    .bodyMainContainer.form .mobNavBarOuter {
        display:none !important;
    }

    .navToggle{
        display: none !important;
    }
    
    #mobNavBarClose{
        display: block !important;
    }

    .mobNavBarOuter .mobProfileLogo img{
        width: 35px;
        height: 35px;
    }

    .profileBox{
        top: 62px;
        left: unset;
        right: 20px;
        bottom: unset;
        width: 200px;
    }

    .navbarOuter{
        display: none;
        position: absolute;
        /* width: 209px; */
        left: 0;
        z-index: 9999;
        width: 80%;

    }

    .navbarOuter .navbarInner{
        position: relative;
    }

    .profileMenu .profileMenuInner{
        display: none;
    }

    .quickAddDiv{
        top: 38px;
        right: unset;
        min-width: 98%;
    }
    
    .mainWrapperDiv{
        margin-top: 56px ;
        /* margin-bottom: 60px !important; */
        padding: 18px 10px 18px 10px !important;
        height: calc(100dvh - 56px) !important;
    }
    .formWrapperDiv{
        padding: 18px 10px 18px 10px;
        position: relative;
        /* margin-bottom: 60px !important; */
        padding: 10px;
        padding-bottom: 60px !important;
        height: 100vh !important;
    }
    .mainWrapperDivReports{
        margin-top: 0 !important;
        height: 100vh !important;

    }
    
    .mainHeading{
        flex-wrap: wrap;
        flex-direction: column;
        gap: 20px;
        align-items: start;
    }
    .mainHeading .formButtons {
        justify-content: end !important;
        width: 100%;
    }

    :not(.mainHeading) > .formButtons .cancelButton {
        width: 47% !important;
        padding: 8px 15px !important;
    }
    :not(.mainHeading) > .formButtons .primaryButton {
        width: 47% !important;
        padding: 8px 15px !important;
    }
    
    .breadCrumb{
        display: none !important;
    }
    .formButtons:has(> * :nth-child(2)) {
        justify-content: space-between !important;
      }

    .mainHeading .mobAdd{
        display: flex !important;
    }

    .mainHeading .addShort{
        display: none;
    }

    .mainHeading .mobHeading{
        width: 100%;
        margin-bottom: 20px;
    }

    .mainHeading .searchOptionsOuter{
        flex-wrap: wrap;
        width: 100%;
    }

    .mainHeading .searchOptions{
        width: 100%;
    }

    .mainHeading .searchOptions .simpleSearch{
        width: 48%;
    }

    .mainHeading .searchOptions .advanceFilter{
        width: 48%;
    }

    .mainHeading .searchOptions .simpleSearch input#keywordVal{
        width: 100px !important;
    }

    .listingSummary{
        display: none;
    }

    .recentInvoices{
        display: none !important;
    }

    .listHeading{
        display: none;
    }

    table.listingTable thead{
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    table.listingTable tbody{
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .listingData {
        display: flex;
        flex-wrap: wrap;
        height: fit-content !important;
        border: 1px solid var(--primary-border-color);
        padding: 10px;
        border-radius: 5px;
    }

    table.listingTable tr.listingData{
        position: relative;
    }

    table.listingTable tr.listingData td label.mobLabel{
        display: block !important;
    }

    table.listingTable tr.listingData td a{
        min-width: unset;
    }

    table.listingTable tr.listingData td.listCheckbox{
        padding-right: 0;
        position: absolute;
        left: 0;
    }

    table.listingTable tr.listingData td.listCheckbox input{
        display: block !important;
        margin-top: 0;
    }

    table.listingTable tr.listingData td.clientInvOuter{
        width: 100%;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--primary-border-color);
        padding-left: 20px;
        margin-bottom: 10px;
    }

    table.listingTable tr.listingData .clientInv .invListTooltip{
        display: none !important;
    }
    table.listingTableNew tr.listingDataNew .clientInv .invListTooltip{
        display: none !important;
    }

    table.listingTable tr.listingData td.created{
        width: 50% !important;
    }

    table.listingTable tr.listingData td.amount{
        padding-right: 0;
        width: 50%;
    }
    table.listingTable tr.listingData td.outstandingAmount{
        padding-right: 0;
        width: 50%;
        margin-top: 10px;
    }
    table.listingTable tr.listingData td.outstandingAmount a{
        padding: 0 !important;
    }

    table.listingTable tr.listingData td.cnAmt{
        margin-top: 10px;
        text-align: left;
    }

    table.listingTable tr.listingData td.productDesc{
        display: none !important;
    }

    table.listingTable tr.listingData td.receiver_status{
        margin-top: 10px;
        width: 50%;
    }

    table.listingTable tr.listingData td.recAmt{
        margin-top: 10px;
        text-align: start;
    }

    table.listingTable tr.listingData td.recAmt a{
        margin-left: unset !important;
    }

    table.listingTable tr.listingData td.receiver_status div{
        align-items: start;
    }

    table.listingTable tr.listingData td.autoBillDetail{
        margin-top: 10px;
        width: 50%;
        text-align: left;
    }

    table.listingTable tr.listingData td.priority{
        width: 100%;
    }
    
    table.listingTable tr.listingData td.invbtn .viewInvHover{
        display: flex !important;
    }
    table.listingTable tr.listingData td.email{
        width: 100%;
        order: 1;
        margin-top: 10px;
    }
    table.listingTable tr.listingData td.currency{
        width: 50%;
       
    }
    table.listingTable tr.listingData td.login{
        width: 50%;
        text-align: right !important;
    }



    table.listingTable tr.listingData td.invbtn{
        position: absolute;
        top: 10px;
        right: 0;
        padding-right: 0 !important;
    }

    .options.client .select-selected{
        width: 100%;
    }

    .paging > div{
        flex-wrap: wrap;
        justify-content: center !important;
        gap: 8px;
        align-items: center;
        flex-direction:column;
    }

    #pagination{
        flex-direction: column;
        gap: 10px;
        justify-content: center !important;
        align-items: center !important;
    }

    .advanceSearchOptions .optionsOuter .options{
        width: 48%;
    }

    .advanceSearchOptions .optionsOuter .options .select-selected{
        width: 100%;
    }

    .advanceSearchOptions .optionsOuter .options input{
        width: 100%;
    }

    .advanceSearchOptions .categoryOptionsOuter{
        flex-wrap: wrap;
    }

    .advanceSearchOptions .categoryOptionsOuter .options{
        width: 100% !important;
    }

    .options.client input {
        width: 100%;
    }

    .estAmtRange input{
        width: 47%;
    }

    .options .dateRangeBox input{
        width: 48%;
    }

    .advanceSearchOptions .optionsOuter .options .amtRangeInput{
        width: 42% !important;
    }

    .advance_search_outer{
        height: 100vh;
        right: 0;
        padding-bottom: 60px !important;
        top: 0px;
    }

    table.listingTable tr.listingData td.invbtn .moreOptions {
        position: fixed;
        left: 6%;
        bottom: 33px;
        z-index: 999;
        background: transparent;
        width: 88%;
        max-height: 330px;
        overflow: auto;
        right: unset;
        top: unset;
        flex-direction: column;
        border: none;
        gap: 10px;
        border-radius: 15px;
    }

    table.listingTable tr.listingData td.invbtn .moreOptions ul{
        background: #fff;
        border-radius: 15px;
    }

    table.listingTable tr.listingData td.invbtn .moreOptions ul li:last-child{
        border-bottom: none;
    }

    .overlayView{
        height: 100%;
        position: fixed;
        width: 100%;
        z-index: 998;
        background: rgba(0, 0, 0, 0.56);
        left: 0;
        top: 0;
    }

    table.listingTable tr.listingData td.invbtn .moreOptions .closebutton{
        border-radius: 15px;
        background: #FFF;
        padding: 16px;
        align-items: center;
        justify-content: center;
    }

    #mobClose{
        align-items: center;
        justify-content: center;
        background: #FFF;
        border-radius: 15px;
        width: 100%;
        padding: 18px 16px;
        margin-top: 10px;
    }

    .mobCheckFilterRow{
        background: #F6F8FA;
        margin-bottom: 20px;
        padding: 10px 0;
    }
    
    .list .checkFilter{
        padding: 0;
        flex-wrap: wrap;
        width: 88%;
        background: transparent;
        border: none;
        z-index: 1000;
    }

    .checkFilter .count{
        display: none;
    }

    .checkFilter button{
        display: none;
        position: absolute;
        top: 17px;
        right: 20px;
    }

    .checkFilterOptions{
        flex-wrap: wrap;
        width: 100%;
        /* margin-top: 10px; */
        background: #FFF;
        padding: 12px 20px;
        border-radius: 15px;
    }

    .checkFilterOptions div:not(:last-child) {
        width: 100%;
        border-bottom: 1px solid var(--primary-border-color);
    }

    .checkFilterOptions .hover {
        display: none !important;
    }

    .checkFilterOptions .mobActionImg {
        display: block !important;
    }

    .checkFilterOptions div a{
        color: var(--primary-sub-heading);
    }

    .previewWrappingDiv{
        padding: 0 !important;
    }

    .select-selected{
        font-size: 12px;
    }

    .select-items div{
        font-size: 12px;
    }

    .listHeadingNew{
        display: none;
    }

    table.listingTableNew thead{
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    table.listingTableNew tbody{
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .listingDataNew {
        display: flex;
        flex-wrap: wrap;
        height: fit-content !important;
        border: 1px solid var(--primary-border-color);
        padding: 10px;
        border-radius: 5px;
        gap: 10px;
    }

    table.listingTableNew tr.listingDataNew{
        position: relative;
    }

    table.listingTableNew tr.listingDataNew td label.mobLabel{
        display: block !important;
    }

    table.listingTableNew tr.listingDataNew td a{
        min-width: unset;
    }

    .invoicePreviewDiv{
        height: unset;
        overflow-y: unset;
        display: unset;
    }


    table.listingTableNew tr.listingDataNew td{
        width: 48%;
    }

    table.listingTableNew tr.listingDataNew td.status{
        text-align: start;
    }
    
    table.listingTableNew tr.listingDataNew td.mailTo{
        padding: 0 !important;
    }

    table.listingTableNew tr.listingDataNew td.mailSubject{
        display: none;
    }

    table.listingTableNew tr.listingDataNew td.outNo{
        width: 100%;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--primary-border-color);
    }

    table.listingTableNew tr.listingDataNew td.receiver_status div{
        align-items: start;
    }

    table.listingTableNew tr.listingDataNew td.outAmt{
        width: 30%;
        text-align: left;
        margin-top: 10px;
    }

    table.listingTableNew tr.listingDataNew td.action{
        text-align: left;
        margin-top: 10px;
    }

    table.listingTableNew tr.listingDataNew td.action a{
        margin-left: 0;
    }

    table.listingTableNew tbody.payHistoryDetail{
        border: 1px solid var(--primary-border-color);
        border-radius: 5px;
        margin-top: 20px;
        gap: unset;
    }

    table.listingTableNew tbody.payHistoryDetail tr {
        border: none;
        align-items: center;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--primary-border-color);
        border-radius: unset;
    }

    .listingTableNew .payHistoryDetail tr td:nth-child(1), .listingTableNew .payHistoryDetail tr td:nth-child(4){
        display: none;
    }

    .listingTableNew .payHistoryDetail tr td:nth-child(2), .listingTableNew .payHistoryDetail tr td:nth-child(3){
        width: 45%;
    }

    #pop_up_container_new{
        width: 100% !important;
        font-size: 12px;
    }

    .notification_area .form_row input{
        width: 100%;
    }

    .notification_area .form_row{
        overflow-x: auto;
    }

    .mailSectionInfo{
        flex-wrap: wrap;
    }

    .mailSectionInner{
        width: 100%;
    }

    .mailSectionInfo .mailSectionInner input{
        width: 100%;
    }

    .mailAttachmentInner{
        width: 100%;
    }

    .mailAttachmentInner input{
        width: 100%;
    }

    .creditForm .flexRow{
        flex-direction: column;
        align-items: start;
        gap: 5px;
        width: 100%;
    }

    .creditForm .flexRow .flexColumn {
        width: 100% !important;
    }

    .sendOffPayments{
        width:100%;
        min-width:unset;
    }

    .creditForm{
        margin-top: 20px;
    }

    .creditForm input{
        width: 100%;
    }

    .creditForm .invoicera-search-select{
        width: 100%;
    }

    .creditForm textarea{
        width: 100%;
    }

    .paymentSummaryLower{
        width: 100%;
    }

    .paymentSummaryLower .flexRow{
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .cnComment{
        width: 100%;
    }

    .productInfo{
        flex-direction: column;
        gap: 20px;
    }

    .productInfo div{
        width: 100% !important;
    }

    .productInfo div.inventoryManagement{
        padding-top: 20px;
        border-top: 1px solid var(--primary-border-color);
    }

    .productPreview .flexRow > label {
        width: unset;
    }

    .productPreview .flexRow > p {
        width: unset;
        text-align: end;
    }
    .dueDateWrapper{
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: center;
    }
    #clientPreviewDiv .bodyMainContainer > div {
        padding: 0 !important;
    }

    
	.previewHeading ul.button{
		width: 100%;
    	margin-top: 10px;
	}

	.prevOptions{
		position: absolute;
		right: 0;
		top: -45px;
	}

	.prevOptionsDiv{
		top: 0px;
		right: 0;
	}

    .ci_heading .invActionBtn {
		flex-wrap: wrap;
		width: 100%
	}

	.ci_heading .invActionBtn>div {
		flex: 1 1 30% !important;
		text-align: center
	}

	.ci_heading .invActionBtn a {
		white-space: nowrap;
		width: 100%;
		display: block
	}


	.ci_heading h2 img {
		width: 22px
	}

	.ci_heading .invActionBtn .convert_to_invoice {
		width: 48% !important;
		text-align: center
	}

	.ci_heading .invActionBtn .edit_po, .ci_heading .invActionBtn .send_po {
		width: 22% !important;
		text-align: center
	}
	.ci_heading {
		flex-direction: column;
		align-items: start;
		padding: 0;
		margin-top: 0
	}
    .importDiv{
        width: 85% !important;
    }
    .projectInfoContainer .clientPin{
        display: none !important;
    }
    .formLeftContainer{
        width: 100% !important;
    }
    .projectInfoContainer{
        padding: 10px !important;
        border: none !important;
        gap: 20px !important;
    }
    .expenseMerchant input{
        width: 100% !important;
        height: 43px;
        width: 100%;
        padding: 0;
        border: none;
        box-shadow: none;
        font-size: 12px !important;
        border-radius: 5px;
        border: 1px solid var(--Primary-Stroke, #E3E7EB);
        padding-left: 5px;
        margin: 0 !important;

    }
    .expenseMerchant input::placeholder{
        font-size: 12px !important;
        padding-left: 5px;
    }
    .expenseDesc textarea{
        border-radius: 5px;
        border: 1px solid var(--Primary-Stroke, #E3E7EB);
        width: 100% !important;
        height: 96px;
        padding: 10px;
        padding-left: 5px;
        font-size: 12px !important;
    }
    .expenseDate input{
        border: 1px solid var(--primary-border-color);
        height: 43px !important;
        width: 100% !important;
        border-radius: 5px !important;
        margin-top: 0 !important;
    }
    .expenseCategory .select-selected{
        border: 1px solid var(--primary-border-color);
    }

    .projectInfoContainer .selectedClient.expenseReceipt{
        transform: unset  !important;
        position: static !important;
        height: 43px;
        width: 100% !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        order: 2;
    }
    .expenseCategory .select-selected::placeholder{
        font-size: 12px !important;
    }
    .expenseAmount input{
        width: 48% !important;
        border: 1px solid var(--primary-border-color);
        padding-left: 5px;
        padding-right: 5px;
        border-radius: 5px;
        height: 43px !important;
        font-size: 12px !important;
    }
    .expenseFormInner {
        width: 100% !important;
        display: flex;
        flex-direction: column;
        gap: 5px;
        margin: 0 !important;
    }
    .expenseForm{
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .expenseFormInner label {
        font-size: 12px;
        font-weight: 500;
        color: var(--primary-sub-heading);
        display: block !important;

    }
    .formContainer{
        position: relative;
    }
    #rightSectionIntro{
        width: 100% !important;
    }

    .tooltips .tooltiptext{
        width: 161px !important;
    }
    .tooltips6 .tooltiptext{
        width: 161px !important;
        left: 37px !important;
    }

    .tooltips .tooltiptext::after{
        left: 18% !important;
    }
    .tooltips6 .tooltiptext::after{
        left: 18% !important;
    }
    .payGates{
        flex-direction: column !important;
        position: relative !important;
        max-width: unset;
        width: 100%;
    }
    .paymentSetupInner {
        max-width: 100% !important;
    }
    .payGates .pgLogo {
        padding: 0 !important;
    }
    .payGates .switch {
        position: absolute;
        top: 21px !important;
        right: 12px !important;
    }
    .inner-container .st2 .tax-info div{
        width: 47% !important;
    }

    .inner-container .st2 .tax-info div.invoicera-select {
        width: 100% !important;
    }
    .inner-container .st2 .tax-info div.invoicera-select div {
        width: 100% !important;
    }

    #taxes_data .group_taxes_btn{
        width: 100% !important;
    }

    .inner-container .st2 .tax-info div input{
        width: 100% !important;
    }
    .inner-container{
        padding: 0 !important;
    }
    .inner-container .st2 .tax-info{
        gap: 15px !important;
    }
    .inner-container .st2 .tax-info div .selectSpan{
        width: 100% !important;
    }
    .inner-container .st2 .tax-info  .editTax {
        width: 48% !important;
    }
    #chargeContainer{
        margin-top: 20px !important;
    }

    #lateFeeContainer{
        margin-top: 20px !important;
    }

    #payment_section_inner .tab li{
        width: fit-content !important;
    }

    #payment_section_inner .tab li a{
        float: none !important;
        padding: 5px !important;
        font-size: 12px !important;
    }
    .e_invoice .hero1{
        padding: 0 !important;
        margin-top: 20px;
        background-color: white;
        border: none !important;
    }

    .e_invoice .hero2 {
        width: 100%;
        border: none !important;
        padding: 0 !important;
        background-color: white;
        overflow-x: scroll;
    }
    .hero_section .hero_inner1{
        margin-top: 20px !important;
    }
    .hero_inner2 .flow_chart{
        width: 100%;
        border: none !important;
        padding: 0 !important;
        background-color: white;
        overflow-x: scroll;
    }
    .enable_einvoice_section{
        width: 95% !important;
        padding: 10px !important;
    }

    .enable_einvoice_section .date_section input {
        width: 100% !important;
    }
    .eway_portal_credential{
        width: 95% !important;
        padding: 10px !important;
    }

    .eway_credential_form .eway_credential_inner{
        width: 100% !important;
    }

    .eway_credential_form .eway_credential_inner input{
        width: 100% !important;
    }

    .eway_portal_credential .buttons{
        flex-wrap: wrap;
    }
    .eway_portal_credential .buttons p {
        width: 100% !important;
    }

    .gst_banner {
        width: 200% !important;
    }

    .new_ui_popup {
        width: 95% !important;
    }

    table.applyCreditTable tr.listingData td.clientInvOuter {
        padding-left: 0 !important;
    }

    .creditNoteRefundWrapper{
        min-width: unset !important;
        width: 100% !important;
    }
    .creditNoteRefundWrapper .creditBalance > div {
        width: fit-content !important;
        justify-content: space-between !important;
    }
    .creditNoteRefundWrapper  .paymentSummaryLower div {
        width: 100% !important;
    }
    .personalDetails{
        padding: 0 !important;
    }
    .personalDetails1 > div {
        width: 100% !important;
    }
    .personalDetails .personalDetails2{
        flex-direction: column !important;
    }
    .personalDetails2 > div {
        width: 100% !important;
    }
    .personalDetails .personalDetails2 div a{
        display: none !important;
    }
    .mainStaffInner{
        width: 100% !important;
    }
    .permissions{
        flex-direction: column !important;
        gap: 20px !important;
    }

    .accordation{
        width: 100% !important;
    }

    .permissions .permission1{
        width: 95% !important;
    }

    .expenseDesc {
        width: 100% !important;
    }
    .mobAdd.importInvoice{
        height: 33px;
        width: 33px;
        border: 1px solid #f76600;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .removeSampleData{
        flex-direction: column !important;
        gap: 8px !important;
    }
    .removeSampleData a{
        font-size: 12px !important;
    }
    .removeSampleData .horizontalSeperator{
        /* display: none !important; */
    }
    .upgradeWrapper {
        float: none !important;
    }
    .thankyou_header{
        height: fit-content !important;
        padding: 10px !important;
        flex-direction: column !important;
        gap: 20px !important;
    }
    .switch-header{
        padding: 10px !important;
    }
    #frmTemplateTextarea {
        width: 100% !important;
        height: 450px !important;
    }
    .topContainer .tcData {
        width: 100% !important;
    }
    .topContainer .tcData .invoicera-select{
        width: 100% !important;
    }

    .tcData .placeHolderDiv{
        flex-direction: column !important;
        gap: 20px !important;
    }
     .topContainer .tcData  input.custom6_2 {
        width: 100% !important;
    }
    #additionalDataDiv #frmExtra_Staff{
        width: 40px !important;
    }
    .col-md-9.coupon_div{
        flex-direction: column !important;
    }
    .new_ui_popup{
        padding: 20px !important
    }
    .generateReports{
        width: 100% !important;
    }

    .noFavReport{
        display: none !important;
    }
    .reportSubMenu{
        border: 1px solid var(--primary-border-color); 
        border-radius: 10px;
        gap: 0px !important;
        padding: 0px 10px;
        cursor: pointer;
    }
    .reportSubMenu .reportSubMenuHead{
        padding: 10px 0px;
        height: 55px;
        width: 100% !important;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid var(--primary-border-color) !important;
    }

    .reportSubMenu .reportSubMenuHead h3{
        font-size: 20px !important;
    }

    .reportSubMenu .reportSubMenuHead  img {
        width: 15px !important;
        transform: rotate(270deg);
    }
    .generateReportOuter{
       
        gap: 0px !important;
    }
    .generateReports{
        border: none !important;
        border-bottom: 1px solid var(--primary-border-color) !important;
        padding: 20px 10px !important;
    }
    .generateReportOuter .generateReports:last-child{
        border-bottom: none !important
    }
    .mobImage{
        display: block !important;
    }

    .reportContainerInner{
        width: 100% !important;
        
    }
    .reportsInner .multiselect-button{
        width: 100% !important;
    }

    .reportsInner input.fullWidth{
        width: 100% !important;
    }

    .checkboxArea {
        width: 100% !important;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .advanceSearchDetails .reportTabs{
        min-width:unset !important;
        width: 25% !important;
    }

    .reportData{
        padding: 10px !important;
    }

    .reportsRightContainer{
        display: none !important;
    }

    table.reportTable tbody{
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    table.reportTable thead {
        display:none;
    }

    table.reportTable tr.reportTableRow td label.mobLabel{
        display: block !important;
    }

    .reportTableRow {
        display: flex;
        flex-wrap: wrap;
        height: fit-content !important;
        border: 1px solid var(--primary-border-color);
        padding: 10px;
        border-radius: 5px;
    }

    table.reportTable tr.reportTableRow td.clientInvOuter{
        width: 100%;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--primary-border-color);
        margin-bottom: 10px;
    }

    table.reportTable tr.reportTableRow td{
        width: 33% ;
        text-align: left !important;
    }
    .perCurrencySummary .reportSum{
        width: 100% !important;
    } 
    .totalCurrReport{
        gap: 20px !important;
    }
    .totalCurrReport > div{
        width: 100% !important;
    }
    .advance_search_outer.reportsFilter{
        max-width: 100% !important;
        width: 100% !important;
        min-width: 100% !important;
    }
    .tabContent{
        width: 100% !important;
        padding: 10px !important;
        height: fit-content !important;
        max-height: calc(100vh - 60px) !important;
    }
    .reportsInnerRow .reportsInner{
        width: 48% !important;
    }

    .reportsInnerRow .customRange{
        width: 40% !important;
    }
    .reportsInner input.invDate{
        width: 100% !important;
    }
    .reportsInner .invoicera-select.small {
        width: 100% !important;
    }
    .reportsInner .small .select-selected {
        width: 100% !important;
    }
    .reportsOuter.scrollBar{
        width: 75% !important;
    }
    .reportsInner .select-selected{
        width: 100% !important;
    }
    td.clientBusiness{
        width: 65% !important;
    }

    .reportsInner textarea.fullWidth {
        width: 100% !important;
    }

    .reportSummary p:first-child{
        padding-left: 0 !important;
    }
    .recurringTable {
        min-width: 900px !important;
    }
    table.recurringTable tbody {
        display: table-row-group !important ;
    }
    .recurringTable .monthRow td{
        min-width: 75px !important;
    }
    ul.addOnGrid > li{
        max-width: 100% !important;
    }
    #left_addon.iner_ap{
        width: 100% !important;
    }

    .referEarnTabs .listingTabs a{
        padding: 6px 10px !important;
    }

    .referEarnTabs .listingTabs{
        width: 100% !important;
        overflow-x: auto !important;
    }
    .referEarnTabs .listingTabs::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }

    .referEarnTabs .separator{
        display: none !important;
    }
    .inviteAndEarnWrapper{
        flex-direction: column !important;
        gap: 20px !important;
    }
    .referEarnRight{
        display: none !important;
    }
    
    .taxSummary tr.taxSummaryDetail td:first-child{
        padding-left: 0 !important;
    }

    aside#right_addons.screenshot{
        width: 100% !important;
    }
    #left_addon .inner_app .lf_app {
        flex-direction: column !important;
    }
    .appMiddleRow{
        width: 100% !important;
        order: 1;
    }

    #left_addon .star_sec_big1 {
        width: 100% !important;
    }

    .favReports > div {
        width: 47% !important;
        height: fit-content !important;
    }
    .favReports > div .favFrame {
        width: 100% !important;
    }
    .favReportData p{
        width: 80% !important;
    }
}

@media (min-width: 660px) and (max-width: 1100px) {
    .navbarOuter{
        display: none;
        position: absolute;
        left: 0;
        z-index: 9999;
        width: 25% !important;
    }
    .bodyMainContainer .mobNavBarOuter {
        display: flex !important;
        position: absolute;
        top: 0;
        border-bottom: 1px solid var(--primary-border-color);
        width: 100%;
        padding: 10px ;
        box-sizing: border-box;
        background: #fff;
    }

        .navToggle{
        display: none !important;
    }

    .bodyMainContainer.form .mobNavBarOuter {
        display:none !important;
    }
    
    #mobNavBarClose{
        display: block !important;
    }

    .mobNavBarOuter .mobProfileLogo img{
        width: 35px;
        height: 35px;
    }

    .profileBox{
        top: 62px;
        left: unset;
        right: 20px;
        bottom: unset;
        width: 200px;
    }

    .navbarOuter{
        display: none;
        position: absolute;
        /* width: 209px; */
        left: 0;
        z-index: 9999;
        width: 80%;
    }

    .navbarOuter .navbarInner{
        position: relative;
    }

    .profileMenu .profileMenuInner{
        display: none;
    }

    .quickAddDiv{
        top: 38px;
        right: unset;
        min-width: 98%;
    }

    .mainWrapperDiv{
        margin-top: 56px !important;
        padding: 18px 10px 18px 10px !important;
        height: calc(100dvh - 56px) !important;
    }

    .formWrapperDiv{
        padding: 18px 10px 18px 10px;
        position: relative;
        padding: 10px;
        height: 100dvh;
    }
    .listingSummary{
        display: none;
    }

    .recentInvoices{
        display: none !important;
    }

    .previewWrappingDiv {
        padding: 0 !important;
    }
    .newInvoiceTemplateInner{
        padding: 25px !important;
    }
    .invoicePreviewDiv {
        height: unset;
        overflow-y: unset;
        display: unset;
    }

    table.listingTable tr.listHeading th.listCheckbox{
        padding-left: 0 !important;
    }

    table.listingTable tr.listHeading th.date{
        width: 20% !important;
    }

    table.listingTable tr.listHeading th.amount{
        padding-right: 60px !important;
    }

    table.listingTable tr.listingData td.listCheckbox{
        padding-left: 0 !important;
    }

    table.listingTable tr.listingData td.listCheckbox input{
        display: block !important;
    }

    table.listingTable tr.listingData td.amount{
        padding-right: 60px !important  ;
    }

    table.listingTable tr.listingData td.invbtn .viewInvHover{
        display: block !important;
    }
    #clientPreviewDiv .bodyMainContainer > div {
        padding: 0 !important;
    }
    .client_box1, .client_box2, .client_box3{
        width: 33% !important;
    }
    .client_box1, .client_box2{
        padding: 10px !important;
    }

    .list .checkFilter {
        width: 90% !important;
        padding: 12px 20px !important;
    }
    .advance_search_outer{
        height: 100vh;
        right: 0;
        padding-bottom: 60px !important;
        top: 0px;
    }
    
}