@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: 21px;
        font-weight: 500;  /* 600 */
        color: var(--primary-sub-heading);
    }
    .heading6_2{
        font-size: 21px;
        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;
    }
    
}
@media (min-width: 2000px) and (max-width: 2570px) {
    input[type=checkbox] {
        width: 21px !important ;
        height: 21px !important;
    }
    input[type=radio]{
        width: 18px !important ;
        height: 18px !important;
    }
    .g5{
        gap:8px;
     }
     .g10{
        gap:16px;
     }
     .g15{
        gap:24px;
     }
     .g20{
        gap:32px;
     }
    
     .g25{
        gap: 40px;
     }
     .g30{
        gap: 48px;
     }
     .g35{
        gap: 56px;
     }
     .g40{
        gap: 64px;
     }
    .breadCrumb{
        padding-bottom: 20px !important;
        margin-bottom: 25px !important;
    }
    .multiselect-button{
        font-size: 21px !important;
        padding: 12px 24px !important;
        line-height: 24px !important;
    }
    .multiselect-menu .options-list li label{
        font-size: 21px !important;
    }
    .multiselect-menu .search-box{
        height: 40px !important;
        font-size: 21px !important;
        padding: 10px !important;
    }
    .multiselect-menu .options-list li{
        height: 60px !important;
    }
    .select-items .selectOptions{
        height: 60px;
        font-size: 21px !important;
    }
    .select-selected{
        font-size: 21px !important;
        padding: 12px 10px !important;
        line-height: 24px !important;
    }
    .primaryButton{
        font-size: 21px !important;
        padding: 12px 24px !important;
        line-height: 24px !important;
    }
    .secondaryButton{
        font-size: 21px !important;
        padding: 12px 24px !important;
        line-height: 24px !important;
    }
    .outlineButton{
        font-size: 21px !important;
        padding: 12px 24px !important;
        line-height: 24px !important;
    }
    .orangeOutlineButton{
        font-size: 21px !important;
        padding: 12px 24px !important;
        line-height: 24px !important;
    }
    .cancelButton{
        font-size: 21px !important;
        padding: 12px 24px !important;
        line-height: 24px !important;
    }
    .greyOutlineButton{
        font-size: 21px !important;
        padding: 12px 24px !important;
        line-height: 24px !important;
    }

    .heading1{
        font-size: 54px;
        font-weight: 600; /* 700 */
        color: var(--primary-main-heading);
    }
    .heading2{
        font-size: 45px !important;
        font-weight: 600 !important;  /* 700 */
        color: var(--primary-main-heading);
    }
    
    .heading2_1{
        font-size: 42px;
        font-weight: 500;  /* 700 */
        color: var(--primary-main-heading);
    }
    
    .themeHeading2{
        font-size: 45px;
        font-weight: 600;  /* 700 */
        color: var(--primary-theme-color);
    }
    
    .heading3{
        font-size: 36px;
        font-weight: 500;  /* 600 */
        color: var(--primary-main-heading);
    }
    
    .heading3_1{
        font-size: 36px;
        font-weight: 500;  /* 600 */
        color: var(--primary-sub-heading);
    }
    
    
    .heading4{
        font-size: 30px;
        font-weight: 500;
        color: var(--primary-main-heading);
    }
    
    .heading5{
        font-size: 27px;
        font-weight: 500;  /* 600 */
        color: var(--primary-main-heading);
    }
    .heading5_1{
        font-size: 27px;
        font-weight: 500;  /* 600 */
        color: var(--primary-sub-heading);
    }
    .heading5_2{
        font-size: 27px;
        font-weight: 500;  /* 600 */
        color: var(--primary-theme-color);
    }
    
    .heading6{
        font-size: 24px;
        font-weight: 500;  /* 600 */
        color: var(--primary-main-heading);
    }
    .heading6_1{
        font-size: 24px;
        font-weight: 500;  /* 600 */
        color: var(--primary-sub-heading);
    }
    .heading6_2{
        font-size: 24px;
        font-weight: 500;  /* 600 */
        color: var(--list-heading-color);
    }
    .formHeading{
        position: static !important;
        transform: none !important;
        font-weight: 500;
        font-size: 39px;
        color: var(--primary-main-heading);
    }
    
    .leadText{
        font-size: 21px;
        font-weight: 400;
        color: var(--primary-sub-heading);
    }
    .leadText_1{
        font-size: 21px;
        font-weight: 400;
        color: var(--list-heading-color);
    }
    .leadText_2{
        font-size: 21px;
        font-weight: 400;
        color: var(--primary-sub-heading);
    }
    .standardText{
        font-size: 18px;
        font-weight: 500;
        color: var(--primary-sub-heading);
    }
    .standardText_2{
        font-size: 18px;
        font-weight: 500;
        color: var(--list-heading-color);
    }
    .standardText_3{
        font-size: 18px;
        font-weight: 500;
        color: var(--primary-main-heading);
    }
    .smallText{
        font-size: 18px;
        font-weight: 400;
        color: var(--list-heading-color);
    }
    .smallText_1{
        font-size: 18px;
        font-weight: 400;
        color: var(--primary-sub-heading);
    }
    .smallText_2{
        font-size: 18px;
        font-weight: 400;
        color: var(--primary-main-heading);
    }
    
    .smallText_3{
        font-size: 18px;
        font-weight: 400;
        color: var(--primary-theme-color);
    }
    .custom1{
        font-size: 51px;
        font-weight: 800;  /* 900 */
        color: var(--primary-sub-heading);
    }
    
    .customTheme1{
        font-size: 51px;
        font-weight: 800;  /* 900 */
        color: var(--primary-theme-color);
    }
    
    .custom2{
        font-size: 54px;
        font-weight: 400;
        color: var(--primary-sub-heading);
    }
    .custom3{
        font-size: 27px;
        font-weight: 400;
        color: var(--primary-sub-heading);
    }
    .custom4{
        font-size: 24px;
        font-weight: 400;
        color: var(--primary-sub-heading);
    }
    .custom4_1{
        font-size: 24px;
        font-weight: 400;
        color: var(--primary-main-heading);
    }
    .custom4_2{
        font-size: 24px;
        font-weight: 400;
        color: var(--list-heading-color);
    }
    .custom5{
        font-size: 21px;
        font-weight: 400;
        color: var(--list-heading-color);
    }
    .custom5_1{
        font-size: 21px;
        font-weight: 400;
        color: var(--primary-main-heading);
    }
    
    .custom5_2{
        font-size: 21px;
        font-weight: 400;
        color: var(--primary-sub-heading);
    }
    .custom5_3{
        font-size: 21px !important;
        font-weight: 400;
        color: var(--primary-theme-color);
    }
    
    .custom6{
        font-size: 21px;
        font-weight: 500;
        color: var(--list-heading-color);
    }
    .custom6_1{
        font-size: 21px;
        font-weight: 500;
        color: var(--primary-sub-heading);
    }
    .custom6_2{
        font-size: 21px;
        font-weight: 500;
        color: var(--primary-main-heading);
    }
    .custom6_3{
        font-size: 21px !important;
        font-weight: 500;
        color: var(--primary-theme-color);
    }
    .custom6_4{
        font-size: 21px;
        font-weight: 400;
        color: var(--primary-main-heading);
    }
    .custom6_5{
        font-size: 21px;
        font-weight: 400;
        color: #D1D5DC;
    }
    .custom7{
        font-size: 21px;
        font-weight: 500;
        color: var(--primary-sub-heading) !important;
        font-family: 'Roboto Mono';
    }
    .formButtons{
        gap: 20px !important;
    }

    .dashboard_new .sm-box .sm-inner p{
        font-size: 21px !important;
    }

    .dashboard_new .lgRecentActivity .lg-content ul div a.recentTab{
        font-size: 21px !important;
    }

    .reportData{
        padding: 53px !important;
    }

    .advanceSearchDetails .reportTabs span{
        padding: 25px !important;
    }
    .tabContent>form{
        gap: 25px !important;
    }
    
    .reportsInner input.invDate{
        height: 60px !important;
    }

    .reportsInner .multiselect-button {
        height: 60px !important;
    }
    .reportsInner .select-selected {
        height: 60px !important;
    }   
    .reportsInner input.fullWidth{
        height: 60px !important;
    }


    .tabContent{
        padding: 25px 30px 25px 30px !important;
    }

    .reportsInnerRow{
        gap: 20px !important;
    }

    .navbarOuter .navbarInner{
        gap: 18px !important;
    }
    .navbarOuter .navbarInner .navLink{
        padding: 0px 10px !important;
    }
    .navbarOuter .navbarInner .navTab{
        padding: 12px 10px !important;
    }

    .navbarOuter .navbarInner .navLink span{
        gap: 15px;
    }
    .navbarOuter .navSubMenu{
        max-height: 450px !important;
    }

    .navbarOuter .navSubMenu li{
        padding: 12px 8px !important;
        margin-bottom: 8px !important; 
    }
    .navbarOuter .navSubMenu li a.name{
        gap: 15px !important;
    }
    .navbarOuter .navbarInner .navLink .subMenuOptions img{
        width: 10px;
    }
    .navbarOuter .navbarInner .navLink span img{
        width: 23px;
    }
    .addMore1{
        padding: 12px 20px !important;
    }
    .addMore1 .activeLink{
        width: 23px;
    }
    .moreProfileOptions div{
        padding: 15px !important;
    }
    .moreProfileOptions img{
        width: 30px;
        height: 30px;
    }
    .navBarTop{
        gap: 45px !important;
        padding: 22px 30px !important;
    }

    .reportSummary{
        height: 55px !important;
    }

    .reportTable thead tr{
        height: 70px !important;
    }
    .reportTable tbody tr{
        height: 70px !important;
    }
    .taxSummary tr{
        height: 70px !important;
    }
    .reportsInner textarea.fullWidth{
        height: 60px !important;
        resize: none !important;
    }
    .advanceSearchOptions{
        height: calc(100vh - 200px) !important;
    }
    .optionsOuter .options .select-selected {
        width: 100% !important;
        height: 60px !important;
    }
    .optionsOuter .options input {
        width: 100% !important;
        height: 60px !important;
    }
    table.listingTable tr.listingData{
        height: 124px !important;
    }
    table.listingTable tr.listingData.singleRow{
        height: 91px !important;
    }
    table.listingTableNew tr.listingDataNew{
        height: 91px !important;
    }
    .checkFilterOptions div a{
        font-size: 18px !important;
    }

    .checkFilter .count p{
        font-size: 18px !important;
    }
    .list .checkFilter{
        padding: 18px 75px !important;
    }
    .mainHeading .searchOptions{
        padding: 0 24px;
        height: 48px !important;
    }
    .mainHeading .searchOptions .simpleSearch input.searchBox{
        font-size: 18px !important;
        width: 70px !important  ;
    }

    .mainHeading .searchOptions .simpleSearch input::placeholder{
        font-size: 18px !important;
    }
    table.listingTable tr.listingData td a.status{
        padding: 10px 15px !important;
        height: fit-content !important;
    }
    .invFooter .addInfo .infoData textarea{
        font-size: 18px !important;
    }
    .invFooter .addInfo .infoHead{
        font-size: 21px !important;
    }
    table.invdetail tr.head td{
        font-size: 24px !important;
    }
   
    table.invdetail tr.head{
        height: 70px !important;
    }
    .inv_template  table.invdetail tr.head{
        height: 70px !important;
    }
    .amountCol .amount {
        font-size: 21px !important;
    }

    table.invdetail tr.headData{
        height: 95px !important;
    }
    .inv_template  table.invdetail tr.headData{
        height: 95px !important;
    }
    .advanceSearchOptions .options .select-selected{
        height: 60px !important;
    }
    .advanceSearchOptions .options input{
        height: 60px !important;
    }

    .ipTemplate .invTempOuter .select-selected{
        height: 60px !important;
    }
    .ipTemplate .invTmp {
        font-size: 18px !important;
    }
    .subMenu .actives, .subMenu div{
        font-size: 21px !important;
    }
    #pop_up_container_new{
        width: 850px !important;
    }
    .content_area_outer .alertmeassage {
        font-size: 21px !important;
        color: var(--primary-sub-heading) !important;
    }
    .bottomActionBtn ul li.downloadIP p{
        font-size: 21px !important;
    }
    .bottomActionBtn ul li a {
        font-size: 21px !important;
    }
    .bottomActionBtn ul div.downloadOptions li{
        font-size: 21px !important;
    }
    .bottomActionBtn ul li.downloadIP{
        height: 60px !important;
    }
    .bottomActionBtn ul li a{
        height: 60px !important;
    }
    .bottomActionBtn ul div.downloadOptions li{
        padding: 8px 10px !important;
    }
    table.invdetail tr.headData td{
        font-size: 21px !important;
    }
    table.invdetail tr.headData td:nth-child(1) span{
        font-size: 18px !important;
    }
    table.invdetail tr.headData td:nth-child(1){
        gap: 8px !important;
    }
    .mainBillTable tr{
        height: 45px !important;
    }
    .mainBillTable tr td.first{
        font-size: 21px !important;
    }
    .mainBillTable tr td.second {
        font-size: 21px !important;
        width: 150px !important;
    }
    .mainBillTable tr td.second input{
        font-size: 21px !important;
    }
    .invMoreInfo .data {
        font-size: 21px !important;
        line-height: 40px !important;
    }
    .invMoreInfo .data input {
        font-size: 21px !important;
        height: 40px !important;
    }
    .addNewField td button{
        font-size: 21px !important;
        padding: 8px 14px !important;
    }
    .invMoreInfo tr{
        height: 43px !important;
    }
    .invMoreInfo .moreInfo {
        font-size: 21px !important;
    }
    .tempHeading{
        font-size: 21px !important;
    }
    .tempHeading .data{
        font-size: 21px !important;
    }
    .businessAddress h3{
        font-size: 24px !important;
    }
    .businessAddress p{
        font-size: 21px !important;
    }

    .ipTemplate .tabs .options div label{
        font-size: 21px !important;
    }
    .prevOptions > img {
        width: 58px !important;
        height: 58px !important;
    }

    .paging p{
        font-size: 21px !important;
    }
    .paging .page2 span{
        width: 48px;
        height: 48px;
        font-size: 21px !important;
        line-height: 48px !important;
    }
    .paging .page2 a{
        font-size: 21px !important;
        width: 30px !important;
    }
    .paging .page2{
        height: 42px !important;
        gap: 10px !important;
    }
    .listingTabs p{
        line-height: 30px;
        padding: 12px 35px !important;
    }
    .stylish-select ul.newList a{
        font-size: 18px !important;
        padding: 12px !important;
    }
    .mainBillTable tr td .selectedTxt{
        font-size: 21px !important;
    }
    table.invdetail tr.headData td input{
        height: 45px !important;
        font-size: 18px !important;
        color: var(--primary-main-heading) !important;
    }
    .inv_template table.invdetail tr.headData td.tax .newListSelected{
        height: 45px !important;
        width: 145px !important;
    }
    .selectedTxt{
        font-size: 18px !important;
    }
    .stylish-select ul.newList a.firstElement{
        padding: 12px 0 12px 22px !important;
    }
    .inv_template .stylish-select ul.newList a.firstElement{
        padding: 12px 0 12px 22px !important;
    }
    .titleOnly input.invTitle{
        font-size: 24px !important;
        height: 60px !important;
    }
    .ui-combobox.addCustomer{
        height: 60px !important;
    }
    .createRow a{
        font-size: 21px !important;
    }
    .createRow{
        padding: 8px 8px !important;
    }
    .ui-combobox input{
        font-size: 21px !important;
    }

    .prodService textarea{
        font-size: 18px !important;
    }
    .invAttach label{
        font-size: 18px !important;
    }
    .titleOnly input.invTitle::placeholder{
        font-size: 22px !important;
    }

    .moreOptions{
        gap: 25px !important;
    }
    .font .select-selected{
        height: 70px !important;
    }
    .popUpMessageBeta{
        width: 30vw !important;
        padding: 40px !important;
        gap: 30px !important;
    }
    .popUpMessageBeta .popup_icon_warning{
        height: 70px !important;
        width: 70px !important;
    }
    .popUpMessageBeta .popup_icon_success{
        height: 70px !important;
        width: 70px !important;
    }
    .popUpMessageBeta .formButtons{
        padding-top: 25px !important;
    }
    table.listingTable tr.listingData td.listCheckbox input{
        margin-top: 35px !important;
    }
    .clientForm input{
        height: 60px !important;
        width: 520px ;
    }
    .clientForm .select-selected {
        height: 60px !important;
        width: 520px ;
    }
    .clientForm .ui-combobox{
        height: 60px !important;
        width: 520px ;
    }
    .rightSectionInner .img2{
        width: 30px;
        height: 30px;
    }
    .rightSectionInner .img1{
        width: 30px;
        height: 30px;
    }
    .rightContainerInner{
        gap: 16px !important;
    }
    #clinet_status .tab ul.tabbing li a.current{
        font-size: 21px !important;
    }
    #personalDetails tr {
        height: 45px !important;
    }
    .clientBusinessInfo{
        padding-top: 25px !important;
        padding-bottom: 5px !important;
    }
    .client_box1{
        gap: 20px !important;
    }
    .prevOptionsDiv a img{
        width: 20px;
        height: 20px;
    }
    .clientGraphMonth{
        font-size: 18px !important;
    }
    a.add_info_button{
        font-size: 18px !important;
    }
    .importDiv{
        width: 1361px;
    }
    .import_input_div p{
        font-size: 24px !important;
    }
    .import_div h3{
        font-size: 24px !important;
    }
    .import_div a {
        font-size: 24px !important;
    }
    .import_input_div p label{
        font-size: 24px !important;
    }
    .reset_button a{
        height: 60px !important;
        width: 200px;
        font-size: 18px !important;
    }

    .orgData input:not([type="checkbox"]):not([type="radio"]){
        height: 60px !important;
        width: 620px !important;
    }
    .orgData textarea{
        height: 150px !important;
        width: 620px !important;
    }
    .orgData .select-selected{
        height: 60px !important;
        width: 620px !important;
    }
    .orgData .systemCurrency{
        height: 60px !important;
        width: 620px !important;
    }
    .profileImg{
        width: 380px !important;
    }
    .invSettingContent div.inputData span{
        font-size: 18px !important;
    }

    .orgData label{
        min-width: 420px !important;
    }
    .customFieldInner input{
        height: 65px !important;
    }
    #customFieldRowContainer #custom_id {
        padding: 25px 0 !important;
        height: 40px;
        display: block !important;
    }

    .invoiceSettingForm .smallInput{
        width: 130px !important;
        height: 60px !important;
    }
    .increaseValue {
        left: 108px !important;
    }
    .decreaseValue {
        left: 108px !important;
    }
    .invoiceSettingForm{
        width: 1040px !important;
    }
    .invoiceSettingForm textarea{
        height: 120px !important;
        width: 520px !important;
    }
    .preferenceSettingMob .invoicera-select{
        width: 400px !important;
    }
    .preferenceSettingMob .select-selected{
        height: 60px !important;
    }
    .invoiceSettingForm .largeInput{
        width: 520px !important;
        height: 60px !important;
    }
    .taxTable tr td{
        height: 65px !important;
    }
    .addTaxContainer{
        min-width: 750px !important;
        padding: 30px 10px !important;
    }
    .addTaxInner input{
        height: 60px !important;
    }
    .addTaxInner .select-selected {
        height: 60px !important;
    }
    .groupTaxRow{
        height: 65px !important;
    }
    .settingsContainer {
        gap:30px
    }
    .settingsContainer .modules{
        width: calc((100% - 120px) / 5);
    }
    .modules .settingOptions .settingInner{
        padding: 12px !important    ;
    }
    .settingSearch input{
        height: 60px !important;
        width: 300px !important;
        background: url(../../../images/search.svg) no-repeat 12px 25px #fff;
    }
    .helpSupport{
        width: 400px !important;
    }
    .helpSupport .head h4{
        font-size: 18px !important;
    }

    .helpSupport p{
        font-size: 18px !important;
    }
    .helpSupport .data a{
        font-size: 18px !important;
    }
    .setupSMTP ul li{
        font-size: 18px !important;
    }
    .smtpHelpSupport{
        font-size: 18px !important;
        gap: 15px !important;
    }
    .payGates{
        padding: 25px !important;
    }
    .payGates .pgLogo img{
        width: 175px !important ;
    }
    .paymentSetupInner .nonAutoPG p{
        font-size: 18px !important;
    }
    .slider{
        height: 33px !important;
        width: 50px !important;
    }
    .slider:before{
        height: 23px !important;
        width: 23px !important;
        bottom: 5px !important;
    }
    input:checked+.slider:before{
        transform: translateX(19px) !important;
    }
    .subscription_section{
        width: 1300px !important;
        max-width: 100% !important;
    }
    .toggle_tab p{
        font-size: 18px !important;
    }

    .featureDetail{
        height: 60px;
    }
    .subPlanInfo{
        max-width: 440px !important;
    }
    #upgradeError{
        height: 80px !important;
    }
    .subPlan2{
        min-width: 750px !important;
    }
    .subOrderSummary{
        min-width: 750px !important;
    }
    .creditForm input{
        height: 60px !important;
        width: 520px !important;
    }
    .creditForm textarea{
        height: 120px !important;
        width: 520px !important;
    }
    .creditForm input[type="checkbox"] {
        height: 25px !important;
        width: 25px !important;
    }
    .toggle_tabs label{
        font-size: 21px !important;
    }
    .otherDetailsBottom{
        height: 130px !important;
    }
    .projectContent .projectOtherDetails{
        padding: 30px 30px 25px 30px !important;
    }
    .projectContent .projectInfo .projectInfo1{
        padding: 25px 30px !important;
    }
    .projectContent .projectInfo .projectInfo2{
        padding: 25px 30px !important;
        height: 158px !important;
    }
    .otherDetailsTop1 .toggleGraph{
        width:280px !important;
        height: 45px !important;
    }
    .otherDetailsTop .toggleGraph label{
        font-size: 18px !important;
    }
    .otherDetailsTop .toggleGraph label#hoursSection{
        width: 151px !important;
    }
    .otherDetailsTop .toggleGraph label#profitSection{
        width: 151px !important;
    }
    .generateInvoiceFormDiv{
        width: 1550px !important;
    }
    .timeEntriesInformation table tbody tr{
        height: 150px !important;
    }
    .timeEntriesInformation{
        max-height: 530px !important;
    }
    .timeEntryInfo {
        gap: 16px !important;
    }
    .billedUnbilled{
        max-width: 450px !important;
    }
    #file{
        max-width: 450px !important;
    }
    .taskFormInner.name input{
        height: 60px !important;
    }
    .taskFormInner input{
        height: 60px !important;
    }
    .projectInnerAbsolute, .taskInnerAbsolute{
        height: 60px !important;
        display: flex;
        align-items: center;
    }
    h3.additionalOptions{
        font-size: 21px !important;
    }
    .multi-select-header, .multi-select-header-staff{
        height: 60px !important;
        font-size: 21px;
        padding: 16px  !important;
    }
    .projectFormInner .select-selected, .taskFormInner .select-selected{
        height: 60px !important;
    }
    .options .billed .select-selected{
        width: 100% !important;
    }
    .addOnContainer{
        width: calc(33% - 16px) !important;
    }
}

@media (min-width: 1400px) and (max-width: 1450px) {
    .navBarTop{
        padding: 15px 10px !important;
    }
}

@media (min-width: 1350px) and (max-width: 1370px) {
    /* input[type=checkbox] {
        width: 21px !important ;
        height: 21px !important;
    }
    input[type=radio]{
        width: 18px !important ;
        height: 18px !important;
    } */

    .mainWrapperDiv{
        padding: 18px 15px !important;
    }
    .multiselect-button{
        font-size: 12px !important;
        line-height: 24px !important;
    }
    .multiselect-menu .options-list li label{
        font-size: 12px !important;
    }
    .multiselect-menu .search-box{
        font-size: 12px !important;
    }
    .select-items .selectOptions{
        font-size: 12px !important;
    }
    .select-selected{
        font-size: 12px !important;
        line-height: 24px !important;
    }
    .primaryButton{
        font-size: 12px !important;
        line-height: 24px !important;
    }
    .secondaryButton{
        font-size: 12px !important;
        line-height: 24px !important;
    }
    .outlineButton{
        font-size: 12px !important;
        line-height: 24px !important;
    }
    .orangeOutlineButton{
        font-size: 12px !important;
        line-height: 24px !important;
    }
    .cancelButton{
        font-size: 12px !important;
        line-height: 24px !important;
    }
    .greyOutlineButton{
        font-size: 12px !important;
        line-height: 24px !important;
    }

    .heading1{
        font-size: 34px;
        font-weight: 600; /* 700 */
        color: var(--primary-main-heading);
    }
    .heading2{
        font-size: 28px !important;
        font-weight: 600 !important;  /* 700 */
        color: var(--primary-main-heading);
    }
    
    .heading2_1{
        font-size: 26px;
        font-weight: 500;  /* 700 */
        color: var(--primary-main-heading);
    }

    .themeHeading2{
        font-size: 45px;
        font-weight: 600;  /* 700 */
        color: var(--primary-theme-color);
    }
    
    .heading3{
        font-size: 22px;
        font-weight: 500;  /* 600 */
        color: var(--primary-main-heading);
    }
    
    .heading3_1{
        font-size: 22px;
        font-weight: 500;  /* 600 */
        color: var(--primary-sub-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);
    }
    .leadText_2{
        font-size: 12px;
        font-weight: 400;
        color: var(--primary-sub-heading);
    }
    .standardText{
        font-size: 10px;
        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);
    }
    .smallText_2{
        font-size: 10px;
        font-weight: 400;
        color: var(--primary-main-heading);
    }
    
    .smallText_3{
        font-size: 10px;
        font-weight: 400;
        color: var(--primary-theme-color);
    }
    .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);
    }
    
    .custom5_2{
        font-size: 12px;
        font-weight: 400;
        color: var(--primary-sub-heading);
    }
    .custom5_3{
        font-size: 12px !important;
        font-weight: 400;
        color: var(--primary-theme-color);
    }
    
    .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);
    }
    .custom6_3{
        font-size: 12px !important;
        font-weight: 500;
        color: var(--primary-theme-color);
    }
    .custom6_4{
        font-size: 12px;
        font-weight: 400;
        color: var(--primary-main-heading);
    }
    .custom6_5{
        font-size: 12px;
        font-weight: 400;
        color: #D1D5DC;
    }
    .custom7{
        font-size: 12px;
        font-weight: 500;
        color: var(--primary-sub-heading) !important;
        font-family: 'Roboto Mono';
    }
    .ui-state-default, .ui-widget-content .ui-state-default{
        font-size: 13px !important;
    }
    .ui-state-active, .ui-widget-content .ui-state-active{
        font-size: 13px !important;
    }
    table.ui-datepicker-calendar tr td{
        width: 38px !important;
        height: 38px !important;
    }
    .ui-datepicker{
        padding: 5px !important;
        width: 290px !important;
    }
    .generateReports{
        padding: 15px !important;
    }

    .navbarOuter {
        min-width: 100% !important;
    }

    .dashboard_new .md-box .md-content tr.md-inner{
        height: 35px !important;
    }
    .dashboard_new .md-box{
        gap: 0 !important;
    }
    .dashboard_new .lgRecentActivity{
        height: 328px !important;
    }
    #horizontalChart{
        margin-top: 30px;
    }

    .navBarTop{
        gap: 45px !important;
        padding: 15px 10px !important;
    }
    table.invdetail tr.head td{
        font-size: 14px !important;
    }
    .newInvoiceTemplateInner{
        padding: 15px !important;
    }

    .clientForm .multilingual1 .select-selected{
        width: 292px !important;
    }
    .multi-select-options-staff li{
        height: 50px !important;
    }
    .multi-select-container-staff {
        height: 417px !important;
    }

    /* .reportData{
        padding: 53px !important;
    }

    .advanceSearchDetails .reportTabs span{
        padding: 25px !important;
    }
    .tabContent>form{
        gap: 25px !important;
    }
    
    .reportsInner input.invDate{
        height: 60px !important;
    }

    .reportsInner .multiselect-button {
        height: 60px !important;
    }
    .reportsInner .select-selected {
        height: 60px !important;
    }   
    .reportsInner input.fullWidth{
        height: 60px !important;
    }


    .tabContent{
        padding: 25px 30px 25px 30px !important;
    }

    .reportsInnerRow{
        gap: 20px !important;
    }

    .navbarOuter .navbarInner{
        gap: 18px !important;
    }
    .navbarOuter .navbarInner .navLink{
        padding: 0px 10px !important;
    }
    .navbarOuter .navbarInner .navTab{
        padding: 12px 10px !important;
    }

    .navbarOuter .navbarInner .navLink span{
        gap: 15px;
    }
    .navbarOuter .navSubMenu{
        max-height: 450px !important;
    }

    .navbarOuter .navSubMenu li{
        padding: 12px 8px !important;
        margin-bottom: 8px !important; 
    }
    .navbarOuter .navSubMenu li a.name{
        gap: 15px !important;
    }
    .navbarOuter .navbarInner .navLink .subMenuOptions img{
        width: 10px;
    }
    .navbarOuter .navbarInner .navLink span img{
        width: 23px;
    }
    .addMore1{
        padding: 12px 20px !important;
    }
    .addMore1 .activeLink{
        width: 23px;
    }
    .moreProfileOptions div{
        padding: 15px !important;
    }
    .moreProfileOptions img{
        width: 30px;
        height: 30px;
    }


    .reportSummary{
        height: 55px !important;
    }

    .reportTable thead tr{
        height: 70px !important;
    }
    .reportTable tbody tr{
        height: 70px !important;
    }
    .taxSummary tr{
        height: 70px !important;
    }
    .reportsInner textarea.fullWidth{
        height: 60px !important;
        resize: none !important;
    } */
}