@media screen and (min-width: 1699px) {
    .landLord-tabs-header .nav-tabs {
        flex-wrap: nowrap;
    }
}

@media screen and (min-width: 768px) and (max-width: 1699px) {

    .property-description-left {
        flex-direction: column;
        align-items: flex-start;
    }

    .property-detail-description {
        margin-top: 6rem;
    }

    .property-document h2 {
        font-size: 2rem;
    }


    .information-info-content h3 {
        font-size: 2rem;
        margin-bottom: 1.1rem;
    }

    .information-info-content ul li img {
        max-width: 1.8rem;
    }

    .landlord-information-left h2 {
        font-size: 1.7rem;
        margin-left: 0.8rem;
    }

    .landlord-information-right {
        margin-top: 0.6rem;
    }

    .landlord-information-right .btn.default-button {
        font-size: 1.7rem;
    }

    .landlord-information-right .btn.default-button img {
        width: 1.5rem;
    }

    .landlord-information-left img {
        width: 1.5rem;
    }

    .information-info-head {
        align-items: baseline;
    }

    .segun-avtar {
        font-size: 1.3rem;
        margin-bottom: 1.2rem;
        width: 3.6rem;
        height: 3.6rem;
    }

    .information-info-content {
        margin-left: 1rem;
        width: 100%;
    }

    .landlord-information {
        padding: 1.5rem 1rem;
    }

    .information-info-content ul li {
        font-size: 1.7rem;
    }

    /* .landLord-tabs-header .nav-item {
        width: calc(100% / 4);
    } */
    .landLord-tabs-header .nav-item {
        width: fit-content;
    }

    .landLord-tabs-header .nav-tabs {
        justify-content: space-between;
    }

    .property-detail-card-link li img {
        max-width: 2rem;
    }

    .property-icon img {
        max-width: 5.6rem;
    }

    .mark-btns {
        white-space: nowrap;
    }

    .maintenance-dashboard .stats-icon img {
        max-width: 5.6rem;
    }

    .upload-area img {
        max-width: 3rem;
    }

    .payment-button {
        margin-bottom: 0.8rem;
    }

    .chart-head {
        margin-bottom: 2rem;
    }

    .chart-card.chart-card-two canvas {
        height: 90% !important;
    }

    .chart-card {
        height: 100%;
    }

}

@media screen and (min-width: 768px) and (max-width: 1499px) {
    html {
        font-size: 56.5%;
    }

    #sidebar-wrapper {
        width: 25rem;
    }

    #page-content-wrapper {
        padding-left: 25rem;
    }

    .sidebar-logo {
        width: 17rem;
        margin: auto;
    }

    .dashboard-table {
        position: relative;
        overflow-x: auto;
        overflow-y: visible !important;
    }

    .dashboard-table table {
        width: 100%;
        border-collapse: collapse;
    }

    .table-action {
        position: unset;
        right: 0;
        background: white;
        z-index: 5;
    }

    .table-action .dropdown-menu {
        position: fixed !important;
        /* take dropdown outside overflow clipping */
        top: auto !important;
        right: 2rem !important;
        transform: none !important;
        z-index: 9999 !important;
        max-width: 9rem;
        min-width: unset;
    }

    .table-action.show .dropdown-menu {
        display: block;
    }






    .property-description-left {
        flex-direction: column;
        align-items: flex-start;
    }

    .property-detail-description {
        margin-top: 6rem;
    }

    .property-document h2 {
        font-size: 2rem;
    }


    .information-info-content h3 {
        font-size: 2rem;
        margin-bottom: 1.1rem;
    }

    .information-info-content ul li img {
        max-width: 1.8rem;
    }

    .landlord-information-left h2 {
        font-size: 1.7rem;
        margin-left: 0.8rem;
    }

    .landlord-information-right {
        margin-top: 0.6rem;
    }

    .landlord-information-right .btn.default-button {
        font-size: 1.7rem;
    }

    .landlord-information-right .btn.default-button img {
        width: 1.5rem;
    }

    .landlord-information-left img {
        width: 1.5rem;
    }

    .information-info-head {
        align-items: baseline;
    }

    .segun-avtar {
        font-size: 1.3rem;
        margin-bottom: 1.2rem;
        width: 3.6rem;
        height: 3.6rem;
    }

    .information-info-content {
        margin-left: 1rem;
        width: 100%;
    }

    .landlord-information {
        padding: 1.5rem 1rem;
    }

    .information-info-content ul li {
        font-size: 1.7rem;
    }

    .dashboard-header-leftside .side-collapse-btn {
        display: block;
    }
}

@media screen and (min-width: 768px) and (max-width: 1399px) {
    .page-heading-right {
        width: calc(45% - 1rem);
    }

    .page-heading-left {
        width: calc(55% - 1rem);
    }

    .sidebar-logo img {
        width: 14rem;
        margin: auto;
    }

    .sidebar-nav li a .dash-icon {
        width: calc(var(--space-14) * 3);
    }

    .sidebar-nav li a {
        font-size: var(--font-size-lg);
    }

    .sidebar-header {
        justify-content: center;
        padding: var(--space-14) var(--space-20);
    }

    #sidebar-wrapper {
        width: 23rem;
    }

    #page-content-wrapper {
        padding-left: 23rem;
    }

    .stats-icon img {
        width: 40px;
    }

    .sidebar-nav li a span {
        margin-left: 0;
    }

    .sidebar-nav li a span.badge {
        margin-left: 1rem;
    }

    .tenant-dashboard-stats-wrapper .stats-card {
        align-items: center;
    }

    .chart-card canvas {
        height: 250px !important;
    }


    .dashboard-stats-wrapper {
        gap: 1.4rem;
    }

    .stats-card {
        width: calc(25% - 1.1rem);
    }



    .property-description-left {
        flex-direction: column;
        align-items: flex-start;
    }

    .property-detail-description {
        margin-top: 6rem;
    }

    .property-document h2 {
        font-size: 2rem;
    }


    .information-info-content h3 {
        font-size: 2rem;
        margin-bottom: 1.1rem;
    }

    .information-info-content ul li img {
        max-width: 1.8rem;
    }

    .landlord-information-left h2 {
        font-size: 1.5rem;
        margin-left: 0.8rem;
    }

    .landlord-information-right {
        margin-top: 0.6rem;
    }

    .landlord-information-right .btn.default-button {
        font-size: 1.5rem;
    }

    .landlord-information-right .btn.default-button img {
        width: 1.5rem;
    }

    .landlord-information-left img {
        width: 1.5rem;
    }

    .information-info-head {
        align-items: baseline;
    }

    .segun-avtar {
        font-size: 1.3rem;
        margin-bottom: 1.2rem;
        width: 3.6rem;
        height: 3.6rem;
    }

    .information-info-content {
        margin-left: 1rem;
        width: 100%;
    }

    .landlord-information {
        padding: 1.5rem 1rem;
    }

    .information-info-content ul li {
        font-size: 1.5rem;
    }

    .dash-profile-info {
        align-items: flex-start;
    }

    .page-heading-right.page-heading-right2 {
        width: fit-content;
    }

}

@media screen and (min-width: 768px) and (max-width: 1299px) {
    .toggled #sidebar-wrapper {
        left: -23rem;
    }

    .toggled.active #sidebar-wrapper {
        left: 0;
    }

    .toggled.active #page-content-wrapper {
        padding-left: 23rem;
    }

    .toggled #page-content-wrapper {
        padding-left: 0;
    }


    .page-heading-left {
        width: fit-content;
    }

    .page-heading {
        flex-wrap: nowrap;
    }




    .sky-alert-box .btn {
        white-space: nowrap;
    }

    .sky-alert-box {
        gap: 2rem;
    }
}

@media screen and (min-width: 768px) and (max-width: 1099px) {
    html {
        font-size: 53.5%;
    }



    .property-detail-card.tenant-property-detail-card .property-detail-title {
        flex-wrap: wrap;
        gap: 1rem 0;
    }

    .property-detail-card.tenant-property-detail-card ul li {
        flex-direction: column;
        gap: 0.1rem;
    }

    .property-detail-card.tenant-property-detail-card ul li p {
        max-width: 100%;
        text-align: left;
        line-height: normal;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .page-heading-left {
        width: 100%;
    }

    .page-heading-right {
        width: 100%;
    }

    .stats-card {
        width: calc(50% - 0.7rem);
    }

    .chart-card canvas {
        height: 200px !important;
    }

    .property-description-left {
        flex-direction: column;
        align-items: flex-start;
    }

    .property-detail-description {
        margin-top: 6rem;
    }

    .property-document h2 {
        font-size: 2rem;
    }


    .information-info-content h3 {
        font-size: 2rem;
        margin-bottom: 1.1rem;
        /* text-align: center; */
    }

    .information-info-content ul li img {
        max-width: 1.8rem;
    }

    .landlord-information-left h2 {
        font-size: 1.5rem;
        margin-left: 0.8rem;
    }

    .landlord-information-right {
        margin-top: 0.6rem;
    }

    .landlord-information-right .btn.default-button {
        font-size: 1.5rem;
    }

    .landlord-information-right .btn.default-button img {
        width: 1.5rem;
    }

    .landlord-information-left img {
        width: 1.5rem;
    }

    .information-info-head {
        flex-direction: column;
    }

    .segun-avtar {
        font-size: 1.7rem;
        margin-bottom: 1.2rem;
        width: 5rem;
        height: 5rem;
    }

    .information-info-content {
        margin-left: 0;
        width: 100%;
    }

    .landlord-information {
        padding: 1.5rem 1rem;
    }

    .information-info-content ul li {
        font-size: 1.3rem;
    }

    .information-info-body {
        flex-direction: column;

    }


    .dash-profile-info {
        align-items: flex-start;
    }

    .dash-profile-details {
        width: 100%;
    }

    .pagelinks-card {
        overflow: auto;
    }

    .pagelinks-card ul li {
        width: fit-content;
        white-space: nowrap;
    }

    .page-heading {
        align-items: flex-end;
    }

    .page-heading-right {
        width: fit-content;
    }

    .page-heading-left {
        width: fit-content;
    }


    .page-heading-right .add-btns {
        white-space: nowrap;
    }


    .transaction-table-filter .row {
        gap: 2rem 0;
    }

}

@media screen and (min-width: 300px) and (max-width: 767px) {

    html {
        font-size: 50%;
    }

    html,
    body {
        overflow-x: hidden;
    }

    .sidebar-logo {
        width: 17rem;
        margin: auto;
    }

    .sidebar-nav li a span {
        margin-left: 0;
    }

    .sidebar-nav li a span.badge {
        margin-left: 1rem;
    }

    #sidebar-wrapper {
        width: 25rem;
    }

    #page-content-wrapper {
        padding-left: 25rem;
    }

    .toggled #sidebar-wrapper {
        left: -25rem;
    }

    .toggled.active #sidebar-wrapper {
        left: 0;
    }

    .toggled.active #page-content-wrapper {
        padding-left: 25rem;
    }

    .toggled #page-content-wrapper {
        padding-left: 0;
    }

    .page-heading-left {
        width: 100%;
    }

    .page-heading-right {
        width: 100%;
        justify-content: flex-start;
    }

    .stats-card {
        width: 100%;
    }

    .stats-icon {
        width: 5.5rem;
    }

    .tenant-dashboard-stats-wrapper .stats-card {
        align-items: center;
    }

    .dashboard-stats-wrapper {
        gap: 1.6rem;
        flex-direction: column;
    }

    .btn {
        padding: var(--space-10) var(--space-10);
    }

    .page-wrapper {
        padding: 12px 12px;
    }

    .main-dashboard-page-heading-right a span {
        margin-left: 4px;
    }

    .page-heading-right .add-btns svg {
        width: 13px;
    }

    .chart-card canvas {
        width: 100% !important;
        height: auto !important;
        max-height: 250px;
    }

    .chart-card {
        padding: 12px 12px;
        margin-bottom: 15px;
    }

    .chart-card.chart-card2 {
        height: auto;
    }

    .account-dropdown .dropdown-toggle .user-name {
        display: none;
    }

    .dashboard-header {
        padding: 10px 12px;
    }

    .dashboard-header-leftside {
        width: calc(100% - 7rem);
        padding-right: 2.5rem;
    }

    .dashboard-header-rightside {
        width: 7rem;
    }

    .dashboard-table {
        position: relative;
        overflow-x: auto;
        overflow-y: visible !important;
    }

    .dashboard-table table {
        width: 100%;
        border-collapse: collapse;
    }

    .table-action {
        position: sticky;
        right: 0;
        background: white;
        z-index: 5;
    }

    .table-action .dropdown-menu {
        /* position: fixed !important; */
        top: auto !important;
        right: 2rem !important;
        transform: none !important;
        z-index: 9999 !important;
        max-width: 9rem;
        min-width: unset;
    }

    .table-action.show .dropdown-menu {
        display: block;
    }

    .table-filters {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .table-filters .search-box {
        width: 100%;
        padding: 0;
    }

    .filter-select-box {
        width: calc(50% - 0.5rem);
    }

    .account-dropdown .user-avatar {
        margin-right: 0;
    }

    .stepperFormModal .modalWrapper {
        margin: 0;
    }

    .modal {
        padding: 0 15px;
    }


    .property-description-left {
        flex-direction: column;
        align-items: flex-start;
    }

    .property-detail-description {
        margin-top: 6rem;
    }

    .property-document h2 {
        font-size: 2rem;
    }


    .information-info-content h3 {
        font-size: 1.9rem;
        margin-bottom: 1.1rem;
    }

    .information-info-content ul li img {
        max-width: 1.8rem;
    }

    .landLord-tabs-header .nav-item {
        width: calc(100% / 2);
    }

    .dash-profile-details ul li.spacer {
        display: none;
    }


    .dash-profile-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 2rem;
    }

    .dash-profile-details {
        width: 100%;
    }

    .pagelinks-card {
        overflow: auto;
    }

    .pagelinks-card ul li {
        width: fit-content;
        white-space: nowrap;
    }


    .property-detail-card-link li img {
        max-width: 2rem;
    }

    .payment-rent-card {
        margin-bottom: 2rem;
    }

    .property-icon img {
        max-width: 5.6rem;
    }

    .maintenance-dashboard .stats-card {
        width: 100%;
    }

    .mark-btns {
        white-space: nowrap;
    }

    .maintenance-dashboard .stats-icon img {
        max-width: 5.6rem;
    }

    .upload-area img {
        max-width: 3rem;
    }

    .communication-card span:first-child img {
        width: 4.4rem;
    }

    .communication-card-content {
        width: calc(100% - 4.4rem);
    }

    .communication-list a {
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
        display: block;
        text-align: left;
    }

    .communication-list a i {
        display: none;
    }

    .payment-button {
        margin-bottom: 0.8rem;
    }

    .sky-alert-box {
        flex-direction: column;
        gap: 2rem;
    }

    .chart-card.chart-card-two canvas {
        height: unset !important;
    }

    .chart-head {
        margin-bottom: 2rem;
    }

    .landlord-my-properties-stats-wrapper .stats-card {
        width: 100%;
    }

    .transaction-table-filter .row {
        gap: 2.9rem 0;
    }


    .landlord-avatar {
        width: fit-content;
        height: fit-content;
        padding: .8rem;
    }

    .table tbody td.td_lg {
        width: fit-content;
        max-width: fit-content;
    }

    .property-detail-card.tenant-property-detail-card {
        margin-top: 2.4rem;
    }

    .dashboard-header-leftside .side-collapse-btn {
        display: block;
    }
}