@media only screen and (max-width: 1583px) {
    .main-wrap {
        padding-left: 18rem;
    }
    .sidebar {
        width: 18rem;
    }
    .dashboard .due-balance-chart .header {
        margin: 0 2rem;
    }
    .workplace .tax-amounts-page {
        width: 80%;
    }

    .workplace .load-page .page-search.identity .input-text {
        -ms-flex-preferred-size: 18rem;
        flex-basis: 18rem;
    }
    .workplace .load-page .page-search.receipt .input-text {
        -ms-flex-preferred-size: 10rem;
        flex-basis: 10rem;
    }
    .workplace .load-page .page-search.payment .input-text {
        -ms-flex-preferred-size: 10rem;
        flex-basis: 10rem;
    }
    .workplace .load-page .page-search.other-income .input-text {
        -ms-flex-preferred-size: 10rem;
        flex-basis: 10rem;
    }

    .workplace
        .load-page
        .dynamic-area.identity
        .column.id-label
        .truncate-div {
        width: 300px;
    }
    .workplace .load-page .dynamic-area.identity .column.id-code .truncate-div {
        width: 130px;
    }
    .workplace
        .load-page
        .dynamic-area.identity
        .column.added-by
        .truncate-div {
        width: 260px;
    }
    .workplace
        .load-page
        .dynamic-area.identity
        .column.updated-by
        .truncate-div {
        width: 300px;
    }

    .workplace .load-page .dynamic-area.user .column.username .truncate-div {
        width: 110px;
    }
    .workplace .load-page .dynamic-area.user .column.mobile-num .truncate-div {
        width: 120px;
    }
    .workplace .load-page .dynamic-area.user .column.office .truncate-div {
        width: 160px;
    }
    .workplace .load-page .dynamic-area.user .column.logged-in .truncate-div {
        width: 130px;
    }
    .workplace .the-form.add-user {
        width: 100%;
    }

    .workplace .the-form.add-project .aato-ref-date {
        width: calc(35% - 0.35rem);
    }
    .workplace .the-form.add-project .purpose-service {
        width: calc(65% - 0.35rem);
    }
    .workplace .the-form.add-project .form-section.buy-amount {
        width: calc(35% - 0.35rem);
    }
    .workplace .the-form.add-project .form-section.tax-amounts {
        width: calc(65% - 0.35rem);
    }
    .workplace .the-form .form-section .tab-content .content-part {
        width: 100%;
    }

    .workplace .show-page.view-project .aato-qr-code .img-wrapper {
        -ms-flex-preferred-size: 7rem;
        flex-basis: 7rem;
    }
    .workplace .show-page.view-project .aato-qr-code .text-wrapper {
        -ms-flex-preferred-size: calc(100% - 7rem);
        flex-basis: calc(100% - 7rem);
    }
    .workplace .show-page.view-project .aato-qr-code .gen-qrcode-btn {
        min-height: 6rem;
    }

    .workplace .show-page .show-content .user-managed .row-view.flex {
        display: block;
    }

    .popup-overlay.add-localgov-amount .popup-canvas {
        width: 40%;
    }
    .popup-overlay.add-mof-amount .popup-canvas {
        width: 40%;
    }
    .popup-overlay.edit-bola-amount .popup-canvas {
        width: 30%;
    }
    .popup-overlay.edit-racfaan-amount .popup-canvas {
        width: 30%;
    }
    .popup-overlay.edit-doctaker-amount .popup-canvas {
        width: 30%;
    }
    .popup-overlay.edit-user-grants .popup-canvas {
        width: 70%;
    }

    .popup-overlay.edit-project-info .popup-canvas {
        width: 30%;
    }
    .popup-overlay.edit-ref-num .popup-canvas {
        width: 30%;
    }
    .popup-overlay.edit-project-service .popup-canvas {
        width: 30%;
    }
    .popup-overlay.edit-service-amount .popup-canvas {
        width: 30%;
    }
    .popup-overlay.edit-buy-amount-4-dhul .popup-canvas {
        width: 30%;
    }
    .popup-overlay.edit-buy-amount-4-not-dhul .popup-canvas {
        width: 30%;
    }
    .popup-overlay.edit-amount-inwords .popup-canvas {
        width: 30%;
    }
    .popup-overlay.edit-project-remarks .popup-canvas {
        width: 30%;
    }
    .popup-overlay.add-aato-client .popup-canvas {
        width: 60%;
    }
    .popup-overlay.add-aato-land .popup-canvas {
        width: 60%;
    }
    .popup-overlay.add-complete-photos .popup-canvas {
        width: 30%;
    }
    .popup-overlay.add-witness .popup-canvas {
        width: 40%;
    }

    .popup-overlay.add-aato-land .popup-canvas {
        width: 60%;
    }
    .popup-overlay.add-template .popup-canvas {
        width: 30%;
    }

    .workplace .the-form.add-receipt {
        width: 100%;
    }
    .workplace .the-form.add-payment {
        width: 100%;
    }
    .workplace .the-form.add-other-income {
        width: 100%;
    }
    .workplace .the-form.add-doc-payment {
        width: 100%;
    }
    .popup-overlay.add-shelf-box .popup-canvas {
        width: 30%;
    }
    .popup-overlay.add-shelf-folder .popup-canvas {
        width: 30%;
    }
    .workplace .the-form.add-archive {
        width: 100%;
    }
    .workplace .setting-page {
        width: 100%;
    }
    .popup-overlay.edit-doc-payment .popup-canvas {
        width: 35%;
    }

    .workplace .report-page .selectors {
        -ms-flex-preferred-size: 25%;
        flex-basis: 25%;
    }
    .workplace .report-page .filters {
        -ms-flex-preferred-size: 75%;
        flex-basis: 75%;
    }

    .workplace .show-page.profile .show-content {
        width: 100%;
    }
    .workplace .show-page.profile .profile-pic .img-change-btn {
        height: 2rem;
        line-height: 2rem;
    }
    .workplace .show-page.profile .img-change-btn input[type="file"] {
        height: 2rem;
    }

    .workplace .show-page.view-pay-document .left-side {
        width: 32%;
    }
    .workplace .show-page.view-pay-document .right-side {
        width: 68%;
    }

    .popup-overlay.edit-project-remarks .popup-canvas {
        width: 38%;
    }
    .popup-overlay.add-aato-rule .popup-canvas {
        width: 35%;
    }
    .popup-overlay.add-template-item .popup-canvas {
        width: 35%;
    }

}

@media only screen and (max-width: 1440px) {
    .login-page {
        padding-bottom: 0;
    }
    .login-page main {
        padding: 5rem 3rem;
    }
    .login-page .the-form {
        width: 28rem;
    }

    .main-wrap {
        padding-left: 17rem;
    }
    .sidebar {
        width: 17rem;
    }

    .dashboard .dash-row .data-entry.finance {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    }
    .dashboard .dash-row .data-entry.clerk {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    }
    .dashboard .dash-row .total-amounts.finance {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        gap: 0.8rem;
    }
    .dashboard .dash-row .total-amounts.clerk {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        gap: 0.8rem;
    }
    .dashboard .dash-row .summary-card {
        width: calc(25% - 0.6rem);
        padding: 0.75rem;
    }
    .dashboard .dash-row .total-amounts.clerk .summary-card {
        width: calc(50% - 0.4rem);
    }
    .dashboard .dash-row .total-amounts.finance .summary-card .icon {
        -ms-flex-preferred-size: 4rem;
        flex-basis: 4rem;
    }
    .dashboard .dash-row .total-amounts.finance .summary-card .texts {
        -ms-flex-preferred-size: calc(100% - 4.5rem);
        flex-basis: calc(100% - 4.5rem);
    }

    .dashboard .income-expense {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    }
    .dashboard .dash-row .due-balance-chart {
        -ms-flex-preferred-size: calc(35% - 0.8rem);
        flex-basis: calc(35% - 0.8rem);
    }
    .dashboard .dash-row .latest-projects {
        -ms-flex-preferred-size: 65%;
        flex-basis: 65%;
    }
    .dashboard .dash-row .latest-finance {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    }

    .dashboard .due-balance-chart .header {
        margin: 0 1rem;
    }
    .dashboard .due-balance-chart .chart-legends {
        margin: 0;
    }

    .dashboard .dash-row .latest-projects.clerk {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    }
    .dashboard .dash-row .latest-archive {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    }
    .dashboard .data-list.clerk {
        height: 18rem;
    }

    .workplace .the-form {
        width: 100%;
    }
    .workplace .tax-amounts-page {
        width: 100%;
    }

    .workplace
        .load-page
        .dynamic-area.identity
        .column.id-label
        .truncate-div {
        width: 200px;
    }
    .workplace .load-page .dynamic-area.identity .column.id-code .truncate-div {
        width: 100px;
    }
    .workplace
        .load-page
        .dynamic-area.identity
        .column.added-by
        .truncate-div {
        width: 200px;
    }
    .workplace
        .load-page
        .dynamic-area.identity
        .column.updated-by
        .truncate-div {
        width: 200px;
    }

    .workplace .load-page .dynamic-area.nationality .column.label .truncate-div {
        width: 300px;
    }
    .workplace .load-page .dynamic-area.nationality .column.status .truncate-div {
        width: 150px;
    }
    .workplace .load-page .dynamic-area.nationality .column.added-by .truncate-div {
        width: 250px;
    }
    .workplace .load-page .dynamic-area.nationality .column.updated-by .truncate-div {
        width: 250px;
    }

    .workplace .load-page .page-search.receipt .input-text {
        -ms-flex-preferred-size: 7rem;
        flex-basis: 7rem;
    }
    .workplace .load-page .page-search.receipt .drop-box.work-year {
        width: 9rem;
    }
    .workplace .load-page .page-search.payment .input-text {
        -ms-flex-preferred-size: 7rem;
        flex-basis: 7rem;
    }
    .workplace .load-page .page-search.payment .drop-box.work-year {
        width: 9rem;
    }
    .workplace .load-page .page-search.other-income .input-text {
        -ms-flex-preferred-size: 7rem;
        flex-basis: 7rem;
    }
    .workplace .load-page .page-search.other-income .drop-box.work-year {
        width: 9rem;
    }

    .workplace
        .load-page
        .dynamic-area.other-income
        .column.purpose
        .truncate-div {
        width: 180px;
    }
    .workplace
        .load-page
        .dynamic-area.other-income
        .column.client-name
        .truncate-div {
        width: 200px;
    }

    .workplace .the-form.add-fnc-account .form-section .tab-content {
        padding-bottom: 2rem;
    }
    .workplace .the-form.update-fnc-account .form-section .tab-content .part {
        -ms-flex-preferred-size: 60%;
        flex-basis: 60%;
    }
    .workplace .the-form.update-fnc-account .form-section .tab-content .part .form-row {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .workplace .the-form.add-project .aato-ref-date {
        width: calc(32% - 0.35rem);
    }
    .workplace .the-form.add-project .purpose-service {
        width: calc(68% - 0.35rem);
    }
    .workplace .the-form.add-project .form-section.buy-amount {
        width: calc(32% - 0.35rem);
    }
    .workplace .the-form.add-project .form-section.tax-amounts {
        width: calc(68% - 0.35rem);
    }
    .workplace .the-form.add-project .tax-amount .input-text {
        width: 6rem;
    }
    .workplace .the-form.add-project .client-name {
        -ms-flex-preferred-size: calc(65% - 3.6rem);
        flex-basis: calc(65% - 3.6rem);
    }
    .workplace .the-form.add-project .client-phone {
        -ms-flex-preferred-size: 35%;
        flex-basis: 35%;
    }

    .workplace .archive-page .single-box {
        min-width: calc(25% - 0.8rem);
    }

    .workplace .report-page .filters .filter .filter-controls {
        -ms-flex-preferred-size: calc(100% - 12rem);
        flex-basis: calc(100% - 12rem);
    }
    .workplace .report-page .filters .filter .input-text,
    .workplace .report-page .filters .filter .drop-box {
        width: 12rem;
    }
    .workplace .report-page .filters .filter .invoice-service,
    .workplace .report-page .filters .filter .receipt-type,
    .workplace .report-page .filters .filter .expense-account,
    .workplace .report-page .filters .filter .income-account {
        width: 24.5rem;
    }
    .workplace .report-page .filters .filter .srch-client-by {
        width: 10rem;
    }
    .workplace .report-page .filters .filter .client-srch-input {
        width: 16rem;
    }
    .workplace .report-page .filters .filter .client-activity-year {
        width: 9rem;
    }

    .workplace .show-page .left-side {
        width: 30%;
    }
    .workplace .show-page .right-side {
        width: 70%;
    }
    .workplace .show-page.view-user .fieldset {
        -ms-flex-preferred-size: calc(50% - 1rem);
        flex-basis: calc(50% - 1rem);
    }
    .popup-overlay.edit-user-info .popup-canvas {
        width: 40%;
    }
    .popup-overlay.edit-user-pass .popup-canvas {
        width: 40%;
    }

    .workplace .show-page .view-header .cmd-wrapper {
        -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
    }

    .workplace .load-page .page-search.project .input-text {
        -ms-flex-preferred-size: 9rem;
        flex-basis: 9rem;
    }
    
    .workplace .show-page.view-project .prj-left-side {
        width: 30%;
    }
    .workplace .show-page.view-project .prj-right-side {
        width: 70%;
    }
    .workplace .show-page.view-project .show-card.buy-amount-card {
        width: 100%;
    }
    .workplace .show-page.view-project .show-card.tax-amount-card {
        width: 100%;
    }
    .workplace .show-page.view-project .daraf-content .daraf-col {
        display: block;
    }

    .workplace .show-page.view-project .show-card.user-managed {
        width: 30%;
    }
    .workplace .show-page.view-project .aato-remarks {
        width: 70%;
    }

    .workplace .show-page.view-project .show-card.tax-amount-card.realestate-hibo .card-content {
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }
    .workplace .show-page.view-project .show-card.tax-amount-card.realestate-hibo .content-part {
        width: calc(50% - 0.8rem);
    }
    .workplace .show-page.view-project .show-card.tax-amount-card.realestate-hibo .content-part.three {
        padding-left: 0;
        width: calc(50% - 1.8rem);
        margin-top: 0.5rem;
    }
    .workplace .show-page.view-project .show-card .divider-v.before-three {
        display: none;
    }
    .workplace .show-page.view-project .show-card.only-moj-amount .content-part {
        width: 50%;
    }

    .popup-overlay.edit-tax-amount-4-dhul-hibo .popup-canvas {
        width: 32%;
    }
    .popup-overlay.edit-only-moj-amount .popup-canvas {
        width: 32%;
    }
    .popup-overlay.edit-project-remarks .popup-canvas {
        width: 42%;
    }

    .workplace .show-page.view-complete .show-card.brief-left {
        width: calc(35% - 0.25rem);
    }
    .workplace .show-page.view-complete .show-card.summary-right {
        width: calc(65% - 0.25rem);
    }
    .workplace .show-page.view-complete .show-card.aato-remarks {
        width: 100%;
    }
    .workplace .show-page.view-complete .daraf-content .daraf-col {
        display: block;
    }
    .workplace .show-page.view-complete .show-card.witness {
        width: 100%;
    }
    .workplace .show-page.view-complete .show-card.user-managed {
        width: 100%;
    }

    .popup-overlay.edit-complete-date .popup-canvas {
        width: 35%;
    }
    .popup-overlay.edit-complete-info .popup-canvas {
        width: 35%;
    }
    .popup-overlay.edit-complete-info-wo-amount .popup-canvas {
        width: 35%;
    }
    .popup-overlay.add-qeyb-dhaxal .popup-canvas {
        width: 30%;
    }
    .popup-overlay.add-wakaalad .popup-canvas {
        width: 60%;
    }
    .popup-overlay.add-tasdiiq .popup-canvas {
        width: 35%;
    }
    .popup-overlay.add-aato-land .popup-canvas {
        width: 65%;
    }
    .popup-overlay.add-aato-saami .popup-canvas {
        width: 50%;
    }
    .popup-overlay.add-aato-vehicle .popup-canvas {
        width: 60%;
    }
    .popup-overlay.add-aato-template .popup-canvas {
        width: 45%;
    }
    .popup-overlay.add-aato-damanad-wkld-details .popup-canvas {
        width: 35%;
    }
    .popup-overlay.edit-aato-rahan-details .popup-canvas {
        width: 75%;
    }

    .workplace .show-page.view-template .show-content.flex {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .workplace .show-page.view-template .cols-wrapper {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        width: 100%;
    }
    .workplace .show-page.view-template .show-card.summary {
        width: 75%;
    }
    .workplace .show-page.view-template .show-card.user-managed {
        width: 25%;
    }
    .workplace .show-page.view-template .show-card.list {
        width: 100%;
    }

    .workplace .show-page.view-receipt .left-side {
        width: 30%;
    }
    .workplace .show-page.view-receipt .right-side {
        width: 70%;
    }
    .workplace .show-page.view-payment .left-side {
        width: 30%;
    }
    .workplace .show-page.view-payment .right-side {
        width: 70%;
    }
    .popup-overlay.edit-payment .popup-canvas {
        width: 40%;
    }
    .workplace .show-page.view-otherincome .left-side {
        width: 30%;
    }
    .workplace .show-page.view-otherincome .right-side {
        width: 70%;
    }
    .popup-overlay.edit-otherincome .popup-canvas {
        width: 40%;
    }

    .workplace .show-page.view-pay-document .left-side {
        width: 35%;
    }
    .workplace .show-page.view-pay-document .right-side {
        width: 65%;
    }

    .popup-overlay.edit-doc-payment .popup-canvas.w-30 {
        width: 40%;
    }
    .workplace .show-page.view-pay-document .image-part {
        width: 30%;
    }
    .workplace .show-page.view-pay-document .taker-part {
        width: 70%;
    }

    .workplace .show-page.view-archive .left-side {
        width: 35%;
    }
    .workplace .show-page.view-archive .right-side {
        width: 65%;
    }

    .popup-overlay.settings .popup-canvas {
        width: 35%;
    }
    .popup-overlay.settings.office .form-row {
        display: block;
    }
}

@media only screen and (max-width: 1024px) {
    .login-page {
        height: calc(100vh - 2rem);
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        padding: 2rem;
    }
    .login-page main {
        width: 100%;
        height: 100%;
    }
    .login-page .the-form {
        width: 100%;
    }

    .main-wrap {
        padding-left: 0;
    }
    .sidebar {
        -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        transform: translateX(-100%);
        width: 18rem;
    }
    .sidebar.active {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
    .menu-toggle {
        display: inline-block;
    }

    .middlebar .top-bar .left-area {
        width: 90%;
    }

    .dashboard .dash-row .data-entry .notary-service {
        -ms-flex-preferred-size: calc(33.33% - 0.6rem);
        flex-basis: calc(33.33% - 0.6rem);
    }
    .dashboard .dash-row .data-entry.clerk .notary-service {
        -ms-flex-preferred-size: calc(33.33% - 0.8rem);
        flex-basis: calc(33.33% - 0.8rem);
    }
    .dashboard .dash-row .summary-card {
        width: calc(50% - 0.4rem);
    }
    .dashboard .dash-row .due-balance-chart {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    }
    .dashboard .dash-row .latest-projects {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    }

    .workplace .two-cols-page .col {
        width: 100%;
    }
    .workplace .two-cols-page .dynamic-data {
        height: auto;
    }
}

@media only screen and (max-width: 767px) {
    .login-page {
        padding: 1.5rem;
    }
    .login-page main {
        padding: 5rem 1.5rem;
    }
    .login-page .welcome-guide {
        font-size: 0.95rem;
    }

    .middlebar .top-bar .left-area .filter {
        min-width: 0;
    }
    .middlebar .top-bar .left-area .filter summary {
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
    .middlebar .top-icons .drop-down {
        width: 22rem;
    }
    .dashboard .dash-row .data-entry .notary-service {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    }
    .dashboard .dash-row .data-entry.clerk .notary-service {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    }
    .dashboard .dash-row .summary-card {
        width: 100%;
    }
    .dashboard .dash-row .total-amounts.clerk .summary-card {
        width: 100%;
    }
}