@import "https://fonts.googleapis.com/css2?family=Itim&display=swap";
@import "https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600&display=swap";

* {
    margin: 0;
    padding: 0;
    outline: none;
    border: none;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif
}

:root {
    --black: #000;
    --primary-blue: #3498db;
    --primary-dark-blue: #2980b9;
    --secondary-green: #2ecc71;
    --secondary-dark-green: #279e60;
    --accent-orange: #e67e22;
    --accent-dark-orange: #d35400;
    --neutral-light-gray: #f5f6fa;
    --neutral-white: #fff;
    --neutral-dark-gray: #2c3e50;
    --neutral-gray: #7f8c8d;
    --neutral-light-gray: #ecf0f1;
    --status-green: #2ecc71;
    --status-yellow: #f1c40f;
    --status-red: #e74c3c;
    --status-blue: #3498db;
    --light-purple: #A020F0;
    --dark-purple: #4B0082;
    --primary-color: #2d2d3d;
    --secondary-color: #f0f0f0;
    --accent-color: #ff9800;
    --text-color: #333;
    --text-light-color: #777;
    --background-color: #fff;
    --border-color: #eee
}

html {
    width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 50%;
    text-size-adjust: 50%
}

body {
    display: flex;
    width: 100%;
    height: 100%;
    color: var(--neutral-dark-gray);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    position: relative
}

input, select, textarea {
    font-size: 15px !important
}

@supports (-webkit-touch-callout: none) {
    input, textarea {
        font-size: 15px !important
    }
}

@media screen and (max-width: 480px) {
    html {
        -webkit-text-size-adjust: none;
        text-size-adjust: none
    }

    input, button, textarea, select {
        min-height: 44px
    }
}

form {
    width: 100%
}

.notification-overlay {
    position: fixed;
    top: 20px;
    right: -400px;
    width: 350px;
    padding: 15px 20px;
    border-radius: 8px 8px 0 8px;
    box-shadow: 0 4px 12px #00000026;
    opacity: 0;
    transition: right .5s ease-out, opacity .5s ease-out;
    z-index: 1000;
    display: flex;
    align-items: center
}

.notification-overlay.show {
    right: 20px;
    opacity: 1
}

.notification-overlay.success {
    background-color: #e6ffe6;
    color: #28a745;
    border: 1px solid #a3e6a3
}

.notification-overlay.error {
    background-color: #ffe6e6;
    color: #dc3545;
    border: 1px solid #e6a3a3
}

.notification-content {
    display: flex;
    align-items: center;
    gap: 10px
}

.notification-icon {
    font-size: 20px;
    line-height: 1
}

.notification-message {
    flex-grow: 1;
    font-size: 15px;
    font-weight: 500
}

::-webkit-scrollbar {
    width: .1px
}

::-webkit-scrollbar-track {
    background-color: #2a2a37;
    border-radius: 2px
}

::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 2px
}

::-webkit-scrollbar-thumb:hover {
    background-color: #777
}

.scrollable-container {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch
}

.scrollable-item {
    flex: 0 0 auto;
    width: 80%;
    scroll-snap-align: start
}

.admin_body {
    width: 100%;
    height: 100%
}

.admin_body .admin_head {
    width: 100%;
    height: 80px;
    padding: 10px 50px;
    box-shadow: #64646f33 0 7px 29px 0;
    position: fixed;
    background: var(--neutral-white)
}

.admin_body .admin_head .admin_head_flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%
}

.admin_body .admin_head .admin_head_flex .first_head_flex .logo {
    width: 120px;
    height: 60px
}

.admin_body .admin_head .admin_head_flex .first_head_flex .logo img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.admin_body .admin_head .admin_head_flex .last_head_flex .last_head_flex_flex {
    display: flex;
    justify-content: center;
    align-items: center
}

.admin_body .admin_head .admin_head_flex .last_head_flex .last_head_flex_flex .prof_pic {
    width: 60px;
    height: 60px
}

.admin_body .admin_head .admin_head_flex .last_head_flex .last_head_flex_flex .prof_pic img {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    object-fit: contain;
    padding: 2px;
    border: 1px solid var(--secondary-green)
}

.admin_body .admin_head .admin_head_flex .last_head_flex .last_head_flex_flex .prof_name {
    font-size: 15px;
    color: var(--neutral-gray);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 10px;
    font-weight: 700;
    text-transform: capitalize
}

.admin_body .admin_head .admin_head_flex .last_head_flex .last_head_flex_flex .menu {
    font-size: 20px;
    color: var(--neutral-gray);
    display: none;
    justify-content: center;
    align-items: center;
    margin: 0 10px;
    font-weight: 700
}

.fist_body_cont {
    width: 100%;
    height: 100%;
    padding: 0;
    background: var(--light-gray)
}

.fist_body_cont .fist_body_cont_flex {
    width: 100%;
    height: 100%;
    display: flex
}

.fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_one {
    position: fixed;
    width: 25%;
    height: 100%;
    background: var(--neutral-gray);
    padding: 30px 0
}

.fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_one .fist_body_cont_flex_one_sub a {
    display: block;
    padding: 20px 50px;
    text-decoration: none;
    color: #fff;
    border-bottom: 1px solid var(--neutral-light-gray);
    transition: .5s ease-out;
    font-weight: 550
}

.fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_one .fist_body_cont_flex_one_sub a:hover {
    color: var(--neutral-white);
    background: var(--neutral-dark-gray);
    font-size: 16px;
    font-weight: 600
}

.fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_one .fist_body_cont_flex_one_sub .fia {
    font-size: 18px;
    margin: 0 10px
}

.fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_one .fist_body_cont_flex_one_sub a:active {
    color: var(--neutral-white);
    background: var(--neutral-dark-gray);
    font-size: 16px;
    font-weight: 550
}

.fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two {
    width: 75%;
    height: 100%;
    margin-left: 25%
}

.fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .fist_body_cont_flex_two_cont {
    width: 100%;
    height: 100%;
    padding: 0 50px 0 10px
}

.fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .profile_bg_dp {
    width: 100%;
    height: 250px;
    background: #279e60;
    position: relative;
    border-radius: 10px;
    border: 1px solid var(--neutral-gray);
    margin: 0 0 100px
}

.fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .profile_bg_dp img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    bottom: 0;
    left: 0
}

.fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .profile_bg_dp .dpp {
    width: 100px;
    height: 100px;
    position: absolute;
    bottom: -40px;
    left: 20px
}

.fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .profile_bg_dp .dpp .fa_image {
    position: absolute;
    right: -8px;
    bottom: 30%;
    transform: translateY(50%);
    background: var(--secondary-dark-green);
    color: #fff;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff
}

.fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .profile_bg_dp .dpp img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--secondary-dark-green)
}

.fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .profile_bg_dp .usernam_edit {
    bottom: 0;
    right: 0;
    position: absolute;
    padding: 20px 10px;
    font-size: 18px;
    color: var(--neutral-dark-gray);
    font-weight: 650;
    text-transform: capitalize
}

.fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .profile_bg_dp .menu_icon {
    top: 0;
    left: 0;
    position: absolute;
    padding: 20px 10px;
    font-size: 25px;
    color: var(--neutral-dark-gray);
    font-weight: 650;
    display: none
}

.close_icon {
    top: 0;
    right: 0;
    position: absolute;
    padding: 20px 10px;
    font-size: 25px;
    color: var(--neutral-dark-gray);
    font-weight: 650;
    display: none
}

.fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .profile_bg_dp .butt_edi_hom {
    display: flex;
    justify-content: flex-end;
    align-items: center
}

.fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .profile_bg_dp .butt_edi_hom .edit {
    padding: 10px 20px;
    color: var(--neutral-white);
    background: var(--neutral-gray);
    text-decoration: none;
    text-transform: capitalize;
    border-radius: 5px;
    margin: 5px 10px 0;
    font-size: 13px;
    font-weight: 650;
    transition: .5s ease-out
}

.fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .profile_bg_dp .butt_edi_hom .edit:hover {
    background: var(--neutral-dark-gray)
}

.fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .profile_bg_dp .butt_edi_hom .upload {
    padding: 10px 20px;
    color: var(--neutral-white);
    background: #2E3A87;
    text-decoration: none;
    text-transform: capitalize;
    border-radius: 5px;
    margin: 5px 10px 0 0;
    font-size: 13px;
    font-weight: 650;
    transition: .5s ease-out
}

.fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .profile_bg_dp .butt_edi_hom .upload:hover {
    background: var(--neutral-dark-gray)
}

.fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .profile_bg_dp .butt_edi_hom .home {
    padding: 10px 20px;
    color: var(--neutral-white);
    background: var(--accent-orange);
    text-decoration: none;
    text-transform: capitalize;
    border-radius: 5px;
    margin: 5px 0 0;
    font-size: 13px;
    font-weight: 650;
    transition: .5s ease-out
}

.fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .profile_bg_dp .butt_edi_hom .home:hover {
    background: var(--accent-dark-orange)
}

.fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .Bookings_cont.form {
    border: 1px solid var(--neutral-gray);
    border-radius: 10px;
    margin: 10px 0;
    max-height: max-content
}

.fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .Bookings_cont {
    border: 1px solid var(--neutral-gray);
    border-radius: 10px;
    margin: 10px 0;
    max-height: 300px;
    overflow-x: auto
}

.fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .Bookings_cont h2 {
    background-color: var(--neutral-gray);
    color: var(--neutral-white);
    padding: 10px 20px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    font-weight: 600;
    font-size: 17px
}

.fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .Bookings_cont .details_personal {
    padding: 0 10px
}

.fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .Bookings_cont .details_personal .det_flex {
    display: flex;
    justify-content: flex-start;
    padding: 5px 0
}

.fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .Bookings_cont .details_personal .det_flex .tag {
    font-size: 17px;
    color: var(--neutral-dark-gray);
    font-weight: 650;
    padding: 0 10px 0 0
}

.fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .Bookings_cont .details_personal .det_flex .respon {
    font-size: 17px;
    font-weight: 600;
    color: var(--neutral-gray)
}

.admin_table {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: #fff;
    border-radius: 12px;
    box-shadow: #959da533 0 8px 24px;
    margin: 20px 0;
    overflow: hidden;
    padding: 20px
}

.admin_table h2 {
    color: #1a1a1a;
    margin: 0 0 20px;
    font-size: 22px;
    font-weight: 600;
    display: flex;
    align-items: center
}

.admin_table h2::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 20px;
    background: #2E3A87;
    margin-right: 12px;
    border-radius: 2px
}

.table-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 8px
}

.table-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    display: block;
    position: relative
}

table {
    width: 100%;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 15px
}

thead {
    position: sticky;
    top: 0;
    z-index: 10
}

th {
    background: #2E3A87;
    color: #fff;
    padding: 14px 16px;
    text-align: left;
    font-weight: 500;
    font-size: 14px;
    text-transform: capitalize;
    border: none;
    position: sticky;
    top: 0
}

th:first-child {
    border-top-left-radius: 8px
}

th:last-child {
    border-top-right-radius: 8px
}

tbody tr {
    background: #fff;
    transition: all .2s ease
}

tbody tr:nth-child(even) {
    background: #f9fafc
}

tbody tr:hover {
    background: #f0f3ff;
    transform: translateX(2px)
}

td {
    padding: 14px 16px;
    color: #4a4a4a;
    font-size: 14px;
    border-bottom: 1px solid #eaeef5;
    white-space: nowrap
}

.btn_flex_mp {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    min-width: max-content
}

.btn_flex_mp button {
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: all .2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    margin: 2px 0;
    flex-shrink: 0
}

.status-paid {
    color: #4CAF50;
    font-weight: 500
}

.status-overdue {
    color: #FF5722;
    font-weight: 500
}

.collapsed-table {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative
}

.collapsed-table::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to bottom, #fff0, #ffffffe6);
    pointer-events: none
}

.expanded .collapsed-table {
    max-height: none
}

.expanded .collapsed-table::after {
    display: none
}

.view-more-btn {
    background: #f8fafc;
    color: #2E3A87;
    border: 1px solid #e2e8f0;
    padding: 10px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    margin-top: 15px;
    transition: all .3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px
}

@media (max-width: 768px) {
    .admin_table {
        padding: 15px
    }

    th, td {
        padding: 10px 12px;
        font-size: 13px
    }

    .table-scroll-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
    }

    .btn_flex_mp {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: visible
    }

    .btn_flex_mp button {
        padding: 6px 10px;
        font-size: 12px
    }

    .collapsed-table {
        overflow-y: auto;
        overflow-x: auto
    }
}

.fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .Bookings_cont .support_cont_form {
    display: flex;
    width: 100%;
    justify-content: flex-start
}

.fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .Bookings_cont .support_cont_form .support_cont_form_flex {
    width: 100%
}

.support_input_cont {
    width: 95%;
    margin: 10px
}

.error-tag {
    color: red;
    font-size: 13px;
    font-style: italic
}

.support_input_cont input {
    width: 100%;
    padding: 10px 12px 10px 14px;
    border: 1px solid gray;
    border-radius: 8px;
    outline: none;
    font-size: 16px;
    transition: border-color .3s ease;
    color: var(--neutral-dark-gray);
    font-family: "Itim", serif
}

.support_input_cont input:focus {
    border-color: var(--neutral-dark-gray)
}

.support_input_cont input:focus+label {
    top: -10px;
    left: 12px;
    font-size: 12px;
    color: var(--neutral-dark-gray);
    padding: 0 4px
}

.support_input_cont select {
    width: 100%;
    padding: 10px 12px 10px 14px;
    border: 1px solid gray;
    border-radius: 8px;
    color: var(--neutral-dark-gray);
    font-family: "Itim", serif;
    outline: none;
    font-size: 16px;
    transition: border-color .3s ease
}

.support_input_cont select:focus {
    border-color: var(--neutral-dark-gray)
}

.support_input_cont select:focus+label {
    top: -10px;
    left: 12px;
    font-size: 12px;
    color: var(--neutral-dark-gray);
    padding: 0 4px
}

.support_input_cont textarea {
    width: 100%;
    padding: 14px 12px;
    border: 1px solid gray;
    border-radius: 8px;
    color: var(--neutral-dark-gray);
    font-family: "Itim", serif;
    outline: none;
    font-size: 16px;
    transition: border-color .3s ease
}

.support_input_cont textarea:focus {
    border-color: var(--neutral-dark-gray)
}

.support_input_cont textarea:focus+label {
    top: -10px;
    left: 12px;
    font-size: 12px;
    color: var(--neutral-dark-gray);
    padding: 0 4px
}

.support_input_cont label {
    position: absolute;
    top: 14px;
    left: 14px;
    font-size: 16px;
    color: gray;
    pointer-events: none;
    transition: all .3s ease
}

.support_input_cont input::placeholder {
    color: var(--neutral-dark-gray)
}

.support_input_cont input:not(:placeholder-shown)+label, .support_input_cont input:focus+label {
    top: -10px;
    left: 12px;
    font-size: 12px;
    color: #fff;
    background-color: var(--neutral-dark-gray);
    padding: 0 4px;
    top: -10px;
    left: 12px;
    font-size: 12px;
    color: #fff;
    background-color: var(--neutral-dark-gray);
    padding: 0 4px
}

.support_input_cont textarea:not(:placeholder-shown)+label, .support_input_cont textarea:focus+label {
    top: -10px;
    left: 12px;
    font-size: 12px;
    color: #fff;
    background-color: var(--neutral-dark-gray);
    padding: 0 4px
}

.support_input_cont .eye-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--neutral-dark-gray);
    font-size: 18px
}

.support_input_cont .eye-icon:hover {
    color: var(--neutral-dark-gray)
}

.support_button {
    display: flex;
    justify-content: flex-end;
    margin: 10px
}

.support_button button {
    padding: 10px 20px;
    margin: 10px;
    border-radius: 10px;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--neutral-white);
    background: var(--accent-orange);
    transition: .5s ease-out
}

.support_button button:hover {
    color: var(--neutral-white);
    background: var(--accent-dark-orange)
}

.form_cont {
    width: 100%;
    height: 100vh;
    background: #1e1e2d;
    display: flex
}

.form_cont .form_flex {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative
}

.form_cont .form_flex .form_flex_cont_one {
    width: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    position: fixed;
    background: #1e1e2d
}

.form_cont .form_flex .form_flex_cont_one .form_flex_cont_one_img_txt .form_flex_cont_one_img {
    width: 550px;
    height: 550px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 25px #0006
}

.form_cont .form_flex .form_flex_cont_one .form_flex_cont_one_img_txt .form_flex_cont_one_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .8
}

.form_cont .form_flex .form_flex_cont_one .form_flex_cont_one_img_txt .form_flex_cont_one_txt {
    text-align: center;
    font-size: 25px;
    font-weight: 750;
    font-family: "Itim", serif;
    color: #ff7f50;
    margin-top: 20px;
    text-shadow: 0 2px 4px #0000004d
}

.form_cont .form_flex .form_flex_cont_two {
    width: 40%;
    height: 100vh;
    background: #2d2d3d;
    padding: 50px 70px;
    right: 0;
    position: fixed;
    overflow-y: auto;
    box-shadow: -5px 0 15px #0003
}

.form_cont .form_flex .form_flex_cont_two h4 {
    font-size: 25px;
    font-weight: 650;
    color: #ff7f50;
    margin: 0 0 40px;
    text-transform: capitalize;
    text-align: center
}

.login_input_cont {
    position: relative;
    width: 100%;
    margin: 25px 0
}

.login_input_cont input {
    width: 100%;
    padding: 14px 12px;
    border: 1px solid #3a3a4a;
    border-radius: 8px;
    color: #fff;
    outline: none;
    font-size: 16px;
    transition: all .3s ease;
    background: #2d2d3d;
    font-family: "Itim", serif
}

.login_input_cont input:focus {
    border-color: #ff7f50;
    box-shadow: 0 0 0 2px #ff7f5033
}

.login_input_cont input::placeholder {
    color: #aaa
}

.login_input_cont label {
    position: absolute;
    top: 14px;
    left: 14px;
    font-size: 16px;
    color: #aaa;
    pointer-events: none;
    transition: all .3s ease;
    background: #2d2d3d;
    padding: 0 5px
}

.login_input_cont input:not(:placeholder-shown)+label, .login_input_cont input:focus+label {
    top: -10px;
    left: 12px;
    font-size: 12px;
    color: #ff7f50
}

.login_input_cont .eye-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #aaa;
    font-size: 18px
}

.login_input_cont .eye-icon:hover {
    color: #ff7f50
}

.login_input_cont .error {
    color: #ff6b6b;
    font-size: 14px;
    font-weight: 600;
    font-style: italic;
    margin: 10px 0 0;
    display: none
}

.submit_log {
    text-align: center;
    font-size: 18px;
    padding: 16px;
    border-radius: 8px;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    width: 100%;
    background: #ff7f50;
    transition: all .3s ease;
    margin: 35px 0 15px;
    border: none;
    cursor: pointer;
    letter-spacing: .5px;
    font-family: "Itim", serif
}

.submit_log:hover {
    background: #ff7a4d;
    box-shadow: 0 4px 12px #ff7f504d
}

.form_flex_cont_form .ext {
    font-size: 16px;
    color: #aaa;
    margin: 10px 0;
    text-align: center
}

.form_flex_cont_form .ext a {
    font-family: "Itim", serif;
    color: #ff7f50;
    font-weight: 650;
    text-decoration: none;
    transition: color .3s ease
}

.form_flex_cont_form .ext a:hover {
    color: #ff7a4d;
    text-decoration: underline
}

@media (max-width: 1200px) {
    .form_cont .form_flex .form_flex_cont_one .form_flex_cont_one_img_txt .form_flex_cont_one_img {
        width: 450px;
        height: 450px
    }
}

@media (max-width: 992px) {
    .form_cont .form_flex .form_flex_cont_one {
        width: 50%
    }

    .form_cont .form_flex .form_flex_cont_two {
        width: 50%;
        padding: 40px 50px
    }
}

@media (max-width: 768px) {
    uploads/propertyimgs/ .form_flex {
        flex-direction: column
    }

    .form_cont .form_flex .form_flex_cont_one {
        display: none
    }

    .form_cont .form_flex .form_flex_cont_two {
        width: 100%;
        position: relative;
        height: auto;
        padding: 40px 30px;
        box-shadow: none
    }
}

@media (max-width: 480px) {
    .form_cont .form_flex .form_flex_cont_two {
        padding: 30px 20px
    }

    .form_cont .form_flex .form_flex_cont_two h4 {
        font-size: 22px;
        margin-bottom: 30px
    }

    .submit_log {
        padding: 14px;
        font-size: 16px
    }
}

.login_input_cont select {
    width: 100%;
    padding: 14px 12px;
    border: 1px solid #3a3a4a;
    border-radius: 8px;
    color: #fff;
    outline: none;
    font-size: 16px;
    transition: all .3s ease;
    background: #2d2d3d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-family: "Itim", serif;
    cursor: pointer
}

.login_input_cont select:focus {
    border-color: #ff7f50;
    box-shadow: 0 0 0 2px #ff7f5033
}

.login_input_cont select option {
    background: #2d2d3d;
    color: #fff;
    padding: 10px;
    font-family: "Itim", serif
}

.login_input_cont select option[value=""] {
    color: #aaa
}

.login_input_cont.select-label label {
    position: absolute;
    top: 14px;
    left: 14px;
    font-size: 16px;
    color: #aaa;
    pointer-events: none;
    transition: all .3s ease;
    background: #2d2d3d;
    padding: 0 5px
}

.login_input_cont.select-label select:focus+label, .login_input_cont.select-label select:not([value=""])+label {
    top: -10px;
    left: 12px;
    font-size: 12px;
    color: #ff7f50
}

.login_input_cont select.error-state {
    border-color: #ff6b6b
}

.login_input_cont select:disabled {
    background-color: #334;
    color: #aaa;
    cursor: not-allowed;
    opacity: .8
}

@media (max-width: 768px) {
    .login_input_cont select {
        padding: 12px 10px;
        font-size: 15px;
        background-position: right 10px center
    }
}

@media (max-width: 480px) {
    .login_input_cont select {
        padding: 12px 8px;
        font-size: 14px
    }
}

.code_input_cont {
    width: 100%;
    margin: 30px 0;
    display: flex;
    flex-direction: column;
    align-items: center
}

.code_inputs {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px
}

.code_inputs input.code_input {
    width: 50px;
    height: 60px;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    border: 2px solid #3a3a4a;
    border-radius: 8px;
    background: #2d2d3d;
    color: #fff;
    outline: none;
    transition: all .3s ease;
    font-family: "Itim", serif
}

.code_inputs input.code_input:focus {
    border-color: #ff7f50;
    box-shadow: 0 0 0 2px #ff7f5033;
    transform: translateY(-2px)
}

.code_inputs input.code_input.filled {
    border-color: #ff7f50;
    background: #ff7f501a
}

.code_input_cont .instructions {
    color: #aaa;
    font-size: 14px;
    text-align: center;
    margin-bottom: 15px;
    font-family: "Itim", serif
}

.code_input_cont .error {
    color: #ff6b6b;
    font-size: 14px;
    font-weight: 600;
    font-style: italic;
    margin: 10px 0 0;
    display: none;
    text-align: center
}

.code_input_cont .resend_code {
    color: #ff7f50;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: color .3s ease;
    font-family: "Itim", serif;
    margin-top: 15px;
    display: inline-block
}

.code_input_cont .resend_code:hover {
    color: #ff7a4d;
    text-decoration: underline
}

.code_input_cont .timer {
    color: #aaa;
    font-size: 14px;
    margin-top: 10px;
    font-family: "Itim", serif
}

@media (max-width: 768px) {
    .code_inputs {
        gap: 8px
    }

    .code_inputs input.code_input {
        width: 40px;
        height: 50px;
        font-size: 20px
    }
}

@media (max-width: 480px) {
    .code_inputs {
        gap: 6px
    }

    .code_inputs input.code_input {
        width: 35px;
        height: 45px;
        font-size: 18px
    }

    .code_input_cont .instructions {
        font-size: 13px
    }

    .code_input_cont .resend_code, .code_input_cont .timer {
        font-size: 13px
    }
}

.dashboard_cont {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: hidden
}

.dashboard_body_cont {
    display: flex;
    width: 100vw
}

.dashboard_body_cont .dash_ove_body {
    padding: 10px 50px 0;
    width: 100%
}

.dashboard_body_cont .welcome_ad {
    width: 100%
}

.dashboard_body_cont .welcome_ad .welcome_ad_flex {
    display: flex;
    justify-content: center;
    align-items: center
}

.dashboard_body_cont .welcome_ad .welcome_ad_flex .welcome_ad_cont:not(:first-child) {
    display: none
}

.dashboard_body_cont .welcome_ad .welcome_ad_flex .welcome_ad_cont {
    width: 100%;
    position: relative;
    height: 300px;
    margin: 20px 0;
    border-radius: 5px;
    border: 1px solid var(--neutral-gray);
    background: var(--neutral-light-gray)
}

.dashboard_body_cont .welcome_ad .welcome_ad_flex .welcome_ad_cont .wel_ad_img {
    width: 100%;
    height: 100%
}

.dashboard_body_cont .welcome_ad .welcome_ad_flex .welcome_ad_cont .wel_ad_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px
}

.dashboard_body_cont .welcome_ad .welcome_ad_flex .welcome_ad_cont .wel_ad_txt {
    position: absolute;
    left: 0;
    bottom: 0;
    margin: 20px;
    background-color: #33333380;
    background-color: hsl(0 0% 20% / 50%);
    background-image: linear-gradient(to bottom, hsl(0 0% 20% / 60%), hsl(0 0% 20% / 40%));
    backdrop-filter: blur(8px);
    transition: background-color .3s ease;
    padding: 20px 10px;
    border-radius: 3px;
    width: 300px;
    max-width: 300px
}

.dashboard_body_cont .welcome_ad .welcome_ad_flex .welcome_ad_cont .wel_ad_txt h4 {
    font-size: 17px;
    color: var(--accent-dark-orange);
    text-align: left;
    font-family: "Itim", serif
}

.dashboard_body_cont .welcome_ad .welcome_ad_flex .welcome_ad_cont .wel_ad_txt .location {
    text-align: left;
    margin: 5px 0;
    font-size: 15px;
    color: var(--neutral-white);
    font-family: "Itim", serif
}

.dashboard_body_cont .welcome_ad .welcome_ad_flex .welcome_ad_cont .wel_ad_txt .availlability {
    text-align: left;
    margin: 5px 0;
    font-size: 15px;
    color: var(--neutral-white);
    font-family: "Itim", serif
}

.dashboard_body_cont .welcome_ad .welcome_ad_flex .welcome_ad_cont .wel_ad_txt .cost {
    text-align: left;
    margin: 5px 0;
    font-size: 15px;
    color: var(--neutral-white);
    font-family: "Itim", serif
}

.dashboard_body_cont .welcome_ad .welcome_ad_flex .welcome_ad_cont .wel_ad_txt .btn {
    width: 100%;
    margin: 20px 0 10px;
    background: var(--accent-orange);
    padding: 10px 20px;
    border-radius: 3px;
    color: var(--neutral-white);
    font-family: "Itim", serif
}

.dashboard_body_cont .welcome_ad .welcome_ad_flex .welcome_ad_cont .wel_ad_txt .btn a {
    font-size: 15px;
    font-weight: 600;
    width: 100%;
    text-decoration: none;
    color: var(--neutral-white)
}

.filter {
    width: 100%;
    margin: -5px 0 10px
}

.filter .flex_filter {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.filter .flex_filter .welcome {
    font-size: 19px;
    font-weight: 650;
    color: var(--neutral-gray)
}

.filter .filters {
    padding: 10px 15px;
    color: var(--neutral-white);
    border-radius: 5px;
    background: var(--accent-orange);
    font-size: 16px;
    font-weight: 650;
    transition: .5s ease-out;
    cursor: pointer
}

.filter .filters:hover {
    background: var(--accent-dark-orange)
}

.filter .login {
    padding: 10px 15px;
    color: var(--neutral-white);
    border-radius: 5px;
    background: var(--status-green);
    font-size: 16px;
    font-weight: 650;
    transition: .5s ease-out;
    cursor: pointer
}

.filter .login:hover {
    background: var(--secondary-dark-green)
}

.filter .register {
    padding: 10px 15px;
    color: var(--neutral-white);
    border-radius: 5px;
    background: #2E3A87;
    font-size: 16px;
    font-weight: 650;
    transition: .5s ease-out;
    cursor: pointer
}

.filter .register:hover {
    background: var(--neutral-dark-gray)
}

.filter .profile {
    padding: 10px 15px;
    color: var(--neutral-white);
    border-radius: 5px;
    background: var(--neutral-gray);
    font-size: 16px;
    font-weight: 650;
    transition: .5s ease-out;
    cursor: pointer
}

.filter .profile:hover {
    background: var(--neutral-dark-gray)
}

.filter_form {
    padding: 10px;
    width: 100%
}

.filter_form .filter_form_inp_flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%
}

.filter_form .filter_form_inp_flex .filter_form_inp {
    width: 50%
}

.filter_form .filter_form_inp_flex .filter_form_inp select {
    width: 99%;
    padding: 12px 10px;
    border: 1px solid var(--neutral-gray);
    margin: 0 5px 10px 0;
    border-radius: 5px;
    font-family: "Itim", serif
}

.filter_form .filter_form_inp_flex .filter_form_inp select option {
    color: var(--neutral-gray);
    font-size: 17px;
    font-family: "Itim", serif
}

.filter_form .filter_form_inp_block input {
    font-family: "Itim", serif;
    font-size: 17px;
    width: 99.5%;
    padding: 12px 10px;
    border: 1px solid var(--neutral-gray);
    margin: 0 5px 10px 0;
    border-radius: 5px;
    color: var(--neutral-gray)
}

.filter_form .filter_form_inp_block input:focus {
    border: 1px solid var(--neutral-dark-gray)
}

.filter_end {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 10px 0 5px
}

.filter_end button {
    padding: 10px 15px;
    border-radius: 5px;
    color: var(--neutral-white);
    background: var(--accent-orange);
    font-size: 15px;
    font-weight: 600;
    transition: .5s ease-out;
    text-transform: capitalize
}

.filter_end button:hover {
    background: var(--accent-dark-orange)
}

.category_dash_cont {
    width: 100%;
    margin: 0 0 15px
}

.category_dash_cont_min {
    width: 100%;
    border: 1px solid var(--neutral-gray);
    border-radius: 5px;
    background: var(--neutral-white)
}

.category_dash_cont_min h4 {
    font-size: 17px;
    font-weight: 650;
    text-transform: capitalize;
    background: var(--neutral-dark-gray);
    color: var(--neutral-light-gray);
    padding: 15px 10px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px
}

.category_dash_cont_min .category_dash_cont_min_flex {
    font-family: 'Roboto', sans-serif;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    padding: 10px
}

.category_dash_cont_min .category_dash_cont_min_flex.showMore {
    font-family: 'Roboto', sans-serif;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 10px
}

.category_dash_cont_min .category_dash_cont_min_flex .dash_cont_min {
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    box-shadow: 0 4px 12px #00000014;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0
}

.category_dash_cont_min .category_dash_cont_min_flex.showMore .dash_cont_min {
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    box-shadow: 0 4px 12px #00000014;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0
}

@media (max-width: 992px) {
    .category_dash_cont_min .category_dash_cont_min_flex.showMore {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (max-width: 768px) {
    .category_dash_cont_min .category_dash_cont_min_flex.showMore {
        display: block
    }

    .category_dash_cont_min .category_dash_cont_min_flex.showMore .dash_cont_min {
        margin-bottom: 15px
    }
}

.category_dash_cont_min .category_dash_cont_min_flex .dash_cont_min {
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    box-shadow: 0 4px 12px #00000014;
    margin: 10px;
    width: calc(100% / 4 - 20px);
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
    position: relative;
    display: flex;
    flex-direction: column
}

@media (max-width: 1200px) {
    .category_dash_cont_min .category_dash_cont_min_flex .dash_cont_min {
        width: calc(100% / 3 - 20px)
    }
}

@media (max-width: 768px) {
    .category_dash_cont_min .category_dash_cont_min_flex .dash_cont_min {
        width: calc(100% / 2 - 20px)
    }
}

@media (max-width: 480px) {
    .category_dash_cont_min .category_dash_cont_min_flex .dash_cont_min {
        width: calc(100% - 20px)
    }
}

.category_dash_cont_min .category_dash_cont_min_flex .dash_cont_min:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 20px #0000001f
}

.category_dash_cont_min .category_dash_cont_min_flex .dash_cont_min .cont_img_des {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    width: 100%;
    text-align: left;
    flex-grow: 1
}

.category_dash_cont_min .category_dash_cont_min_flex .dash_cont_min .img {
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative
}

.category_dash_cont_min .category_dash_cont_min_flex .dash_cont_min .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
    display: block
}

.category_dash_cont_min .category_dash_cont_min_flex .dash_cont_min:hover .img img {
    transform: scale(1.1)
}

.category_dash_cont_min .category_dash_cont_min_flex .dash_cont_min .tag_top {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #2d2d3dcc;
    color: #fff;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    z-index: 2;
    box-shadow: 0 2px 5px #0003;
    display: flex;
    align-items: center
}

.category_dash_cont_min .category_dash_cont_min_flex .dash_cont_min h5 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
    margin: 15px 15px 8px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis
}

.category_dash_cont_min .category_dash_cont_min_flex .dash_cont_min .desc {
    font-size: 14px;
    color: var(--text-light-color);
    margin: 0 15px 15px;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.category_dash_cont_min .category_dash_cont_min_flex .dash_cont_min .desc div {
    display: flex;
    align-items: center;
    gap: 8px
}

.category_dash_cont_min .category_dash_cont_min_flex .dash_cont_min .enquiry {
    background-color: var(--accent-color);
    color: #fff;
    padding: 12px;
    margin: 0;
    border: none;
    border-radius: 0 0 5px 5px;
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .3s ease, transform .2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%
}

.category_dash_cont_min .category_dash_cont_min_flex .dash_cont_min .enquiry:hover {
    background-color: #f57c00;
    transform: translateY(-2px)
}

.category_dash_cont_min .category_dash_cont_min_flex .dash_cont_min .enquiry i {
    font-size: 16px
}

.category_dash_cont_min .dash_cat_cont_form {
    width: 100%;
    padding: 10px 15px
}

.category_dash_cont_min .dash_cat_cont_form .dash_cat_cont_input {
    width: 100%;
    padding: 10px 0
}

.category_dash_cont_min .dash_cat_cont_form .dash_cat_cont_input input {
    padding: 10px 5px;
    width: 100%;
    border: 1px solid var(--neutral-gray);
    border-radius: 5px;
    font-family: "Itim", serif;
    font-size: 15px;
    color: var(--neutral-dark-gray);
    transition: .5s ease-out
}

.category_dash_cont_min .dash_cat_cont_form .dash_cat_cont_input input:focus {
    border: .13rem solid var(--neutral-dark-gray)
}

.category_dash_cont_min .dash_cat_cont_form .dash_cat_cont_input .error {
    font-size: 13px;
    padding: 3px 0 0;
    font-style: italic;
    color: #d35400;
    display: none
}

.category_dash_cont_min .dash_cat_cont_form .dash_cat_cont_input textarea {
    padding: 10px 5px;
    width: 100%;
    height: 150px;
    border: 1px solid var(--neutral-gray);
    border-radius: 5px;
    font-family: "Itim", serif;
    font-size: 15px;
    color: var(--neutral-dark-gray);
    transition: .5s ease-out
}

.category_dash_cont_min .dash_cat_cont_form .dash_cat_cont_input textarea:focus {
    border: .13rem solid var(--neutral-dark-gray)
}

.category_dash_cont_min .dash_cat_cont_form .contact_bt {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    text-align: center
}

.category_dash_cont_min .dash_cat_cont_form .contact_bt button {
    padding: 7px 15px;
    color: var(--neutral-white);
    background: var(--accent-orange);
    border-radius: 5px;
    font-weight: 650;
    font-size: 15px;
    transition: .5s ease-out;
    cursor: pointer
}

.category_dash_cont_min .dash_cat_cont_form .contact_bt button:hover {
    background: var(--accent-dark-orange)
}

.dashboard_footerr_cont {
    width: 100%;
    background: linear-gradient(135deg, #070119 0%, #1a0938 100%);
    color: #fff;
    padding: 60px 20px 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    position: relative
}

.dashboard_footerr_cont .footer_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto 40px
}

.dashboard_footerr_cont .footer_gridd {
    margin-bottom: 30px
}

.dashboard_footerr_cont .footer_gridd h4 {
    font-size: 18px;
    font-weight: 650;
    margin-bottom: 20px;
    color: #fff;
    position: relative;
    padding-bottom: 10px
}

.dashboard_footerr_cont .footer_gridd h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 2px;
    background: #6e45e2
}

.dashboard_footerr_cont .footer_gridd p {
    color: #b8b8b8;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 15px
}

.dashboard_footerr_cont .footer_gridd a {
    display: block;
    padding: 8px 0;
    font-size: 15px;
    font-weight: 500;
    color: #b8b8b8;
    text-decoration: none;
    transition: all .3s ease
}

.dashboard_footerr_cont .footer_gridd a:hover {
    color: #6e45e2;
    transform: translateX(5px)
}

.dashboard_footerr_cont .footer_gridd a i, .dashboard_footerr_cont .contact_info i {
    margin-right: 10px;
    color: #6e45e2;
    width: 20px;
    text-align: center
}

.dashboard_footerr_cont .contact_info p {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    color: #b8b8b8;
    font-size: 14px
}

.dashboard_footerr_cont .footer_grid3_flex {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 15px
}

.dashboard_footerr_cont .social_heading {
    margin-top: 25px
}

.dashboard_footerr_cont .footer_grid3_flex a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #ffffff1a;
    border-radius: 50%;
    color: #fff;
    font-size: 16px;
    transition: all .3s ease;
    margin: 0 !important
}

.dashboard_footerr_cont .footer_grid3_flex a:hover {
    background: #6e45e2;
    transform: translateY(-3px);
    font-size: 16px !important
}

.dashboard_footerr_cont .sub_form_cont {
    margin: 20px 0
}

.dashboard_footerr_cont .sub_form_cont form {
    display: flex;
    width: 100%
}

.dashboard_footerr_cont .sub_form_cont input {
    flex: 1;
    padding: 12px 15px;
    border: none;
    border-radius: 4px 0 0 4px;
    background: #ffffff1a;
    color: #fff;
    font-size: 14px;
    outline: none
}

.dashboard_footerr_cont .sub_form_cont input::placeholder {
    color: #b8b8b8
}

.dashboard_footerr_cont .subscribe_mail_but {
    padding: 12px 20px;
    background: #6e45e2;
    color: #fff;
    border: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    transition: all .3s ease;
    font-weight: 600;
    width: auto !important
}

.dashboard_footerr_cont .subscribe_mail_but:hover {
    background: #8a6eff
}

.dashboard_footerr_cont .footer_map_container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0 40px
}

.dashboard_footerr_cont .footer_map_container h4 {
    font-size: 18px;
    font-weight: 650;
    margin-bottom: 15px;
    color: #fff;
    position: relative;
    padding-bottom: 10px
}

.dashboard_footerr_cont .footer_map_container h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 2px;
    background: #6e45e2
}

.dashboard_footerr_cont .footer_map {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px #0003;
    height: 300px
}

.dashboard_footerr_cont .footer_map iframe {
    width: 100%;
    height: 100%;
    border: none
}

.dashboard_footerr_cont .footer_bottom {
    border-top: 1px solid #ffffff1a;
    padding: 20px 0;
    text-align: center
}

.dashboard_footerr_cont .payment_methods {
    margin-bottom: 15px
}

.dashboard_footerr_cont .payment_methods i {
    font-size: 24px;
    margin: 0 10px;
    color: #b8b8b8;
    transition: all .3s ease
}

.dashboard_footerr_cont .payment_methods i:hover {
    color: #6e45e2
}

.dashboard_footerr_cont .footer_copyright {
    color: #b8b8b8;
    font-size: 14px
}

.dashboard_footerr_cont .footer_copyright a {
    color: #b8b8b8;
    text-decoration: none;
    transition: all .3s ease
}

.dashboard_footerr_cont .footer_copyright a:hover {
    color: #6e45e2
}

@media (max-width: 768px) {
    .dashboard_footerr_cont .footer_grid {
        grid-template-columns: 1fr 1fr
    }

    .dashboard_footerr_cont {
        padding: 40px 15px
    }

    .dashboard_footerr_cont .footer_map {
        height: 250px
    }
}

@media (max-width: 480px) {
    .dashboard_footerr_cont .footer_grid {
        grid-template-columns: 1fr
    }

    .dashboard_footerr_cont .footer_gridd h4 {
        font-size: 16px
    }

    .dashboard_footerr_cont .footer_gridd a, .dashboard_footerr_cont .footer_gridd p {
        font-size: 14px
    }

    .dashboard_footerr_cont .footer_grid3_flex a {
        width: 32px;
        height: 32px;
        font-size: 14px
    }

    .dashboard_footerr_cont .sub_form_cont input, .dashboard_footerr_cont .subscribe_mail_but {
        padding: 10px 12px
    }

    .dashboard_footerr_cont .footer_map {
        height: 200px
    }
}

.enquiry-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00000080;
    backdrop-filter: blur(5px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000
}

.enquiry-modal.active {
    opacity: 1;
    display: flex
}

.enquiry-box {
    width: 80%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    background-color: #1e1e2d;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 5px 25px #0006
}

.enq_flex_head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #2d2d3d
}

.enq_flex_head h3 {
    margin: 0;
    font-size: 1.4rem;
    color: #ff7f50
}

.enq_flex_head .close .cancel-btn {
    background: transparent;
    border: none;
    color: #ff7f50;
    font-size: 1.5rem;
    cursor: pointer;
    transition: transform .2s ease
}

.enq_flex_head .close .cancel-btn:hover {
    transform: scale(1.1)
}

#enquiryForm {
    display: grid;
    gap: 15px
}

.input_enq_mod {
    margin-bottom: 10px
}

.input_enq_mod input {
    width: 100%;
    padding: 12px 15px;
    border-radius: 6px;
    border: 1px solid #3a3a4a;
    background: #2d2d3d;
    color: #fff;
    font-size: .95rem;
    transition: all .3s ease
}

.input_enq_mod input:focus {
    border-color: #ff7f50;
    outline: none;
    box-shadow: 0 0 0 2px #ff7f5033
}

.input_enq_mod input[readonly] {
    background-color: #334;
    color: #aaa;
    cursor: not-allowed
}

.enq_submit {
    padding: 12px 30px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all .3s ease;
    background: #ff7f50;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: .9rem;
    margin-top: 10px
}

.enq_submit:hover {
    background: #ff7a4d;
    box-shadow: 0 4px 12px #ff7f504d
}

@media (max-width: 768px) {
    .enquiry-box {
        width: 90%;
        padding: 20px
    }
}

@media (max-width: 480px) {
    .enquiry-box {
        width: 95%;
        padding: 15px
    }

    .enq_flex_head h3 {
        font-size: 1.2rem
    }

    .input_enq_mod input {
        padding: 10px 12px
    }

    .enq_submit {
        padding: 10px 20px;
        font-size: .85rem
    }
}

.image-upload-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000b3;
    backdrop-filter: blur(5px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000
}

.image-upload-box {
    width: 90%;
    max-width: 500px;
    background-color: #1e1e2d;
    padding: 30px;
    box-shadow: 0 4px 25px #0006;
    border-radius: 10px
}

.image-upload-modal.active .image-upload-box {
    transform: translateY(0)
}

.upload-flex-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #2d2d3d
}

.upload-flex-head h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #ff7f50;
    margin: 0
}

.upload-flex-head .cancel-btn {
    background: transparent;
    border: none;
    color: #ff7f50;
    font-size: 1.5rem;
    cursor: pointer;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all .2s ease
}

.upload-flex-head .cancel-btn:hover {
    background: #ff7f501a;
    transform: scale(1.1)
}

.preview-container {
    width: 100%;
    height: 300px;
    border: 2px dashed #444;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    overflow: hidden;
    position: relative;
    background-color: #252538;
    transition: border-color .3s ease
}

.preview-container:hover {
    border-color: #ff7f50
}

.upload-placeholder {
    text-align: center;
    color: #666
}

.upload-placeholder i {
    font-size: 3rem;
    color: #444;
    margin-bottom: 10px;
    transition: color .3s ease
}

.preview-container:hover .upload-placeholder i {
    color: #ff7f50
}

.upload-placeholder p {
    margin: 0;
    font-size: .9rem
}

#imagePreview {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain
}

.input-upload-mod {
    width: 100%;
    margin-bottom: 15px
}

.input-upload-mod input {
    width: 100%;
    padding: 12px;
    border-radius: 5px;
    border: 1px solid #444;
    background: #2d2d3d;
    color: #fff;
    font-family: "Itim", serif;
    transition: all .3s ease
}

.input-upload-mod input:focus {
    border-color: #ff7f50;
    outline: none;
    box-shadow: 0 0 0 2px #ff7f5033
}

.upload-submit {
    width: 100%;
    border-radius: 5px;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    padding: 14px;
    background: #ff7f50;
    border: none;
    cursor: pointer;
    transition: all .3s ease;
    text-transform: uppercase;
    letter-spacing: .5px
}

.upload-submit:hover {
    background: #ff7f50;
    box-shadow: 0 4px 12px #ff7f504d
}

.upload-submit:disabled {
    background: #444;
    color: #666;
    cursor: not-allowed;
    box-shadow: none
}

.preview-container.drag-over {
    border-color: #ff7f50;
    background-color: #ff7f500d
}

.preview-container.drag-over .upload-placeholder i, .preview-container.drag-over .upload-placeholder p {
    color: #ff7f50
}

@media (max-width: 768px) {
    .image-upload-box {
        width: 95%;
        padding: 20px
    }

    .preview-container {
        height: 250px
    }
}

@media (max-width: 480px) {
    .upload-flex-head h3 {
        font-size: 1.3rem
    }

    .preview-container {
        height: 200px
    }
}

.status-confirm-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000b3;
    z-index: 1000;
    justify-content: center;
    align-items: center
}

.status-confirm-modal.active {
    opacity: 1;
    display: flex
}

.status-confirm-box {
    width: 450px;
    max-width: 90%;
    background-color: #1e1e2d;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 5px 25px #0000004d;
    transform: translateY(-20px);
    transition: transform .3s ease
}

.status-confirm-modal.active .status-confirm-box {
    transform: translateY(0)
}

.status-confirm-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #2d2d3d
}

.status-confirm-head h3 {
    margin: 0;
    font-size: 1.4rem;
    color: #ff7f50;
    font-weight: 600
}

.status-confirm-head .cancel-btn {
    background: transparent;
    border: 1px solid #ff7f50;
    color: #ff7f50;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s ease
}

.status-confirm-head .cancel-btn:hover {
    background: #ff7f501a
}

#statusModalMessage {
    font-size: 1rem;
    line-height: 1.5;
    color: #e0e0e0;
    margin: 20px 0
}

.status-confirm-box .upload-submit {
    padding: 10px 20px;
    background: #ff7f50;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-weight: 500;
    cursor: pointer;
    transition: background .2s ease
}

.status-confirm-box .upload-submit:hover {
    background: #ff7f50
}

.status-confirm-box .cancel-btn {
    padding: 10px 20px;
    background: transparent;
    color: #aaa;
    border: 1px solid #444;
    border-radius: 5px;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s ease
}

.status-confirm-box .cancel-btn:hover {
    background: #2d2d3d;
    color: #eee
}

@media (max-width: 500px) {
    .status-confirm-box {
        padding: 20px
    }

    .status-confirm-head h3 {
        font-size: 1.2rem
    }

    #statusModalMessage {
        font-size: .9rem
    }
}

@media only screen and (max-width: 1200px) {
    .image-upload-box {
        width: 50%
    }
}

@media only screen and (max-width: 992px) {
    .image-upload-box {
        width: 60%;
        padding: 30px 15px
    }

    .preview-container {
        height: 250px
    }

    .upload-flex-head h3 {
        font-size: 22px
    }
}

@media only screen and (max-width: 768px) {
    .image-upload-box {
        width: 70%;
        padding: 25px 15px
    }

    .preview-container {
        height: 220px
    }

    #imageUploadForm .upload-submit {
        padding: 12px;
        font-size: 16px
    }
}

@media only screen and (max-width: 576px) {
    .image-upload-box {
        width: 85%;
        padding: 20px 15px
    }

    .preview-container {
        height: 200px;
        margin-bottom: 15px
    }

    .upload-flex-head {
        padding: 0 0 20px
    }

    .upload-flex-head h3 {
        font-size: 20px
    }

    #imageUploadForm .input-upload-mod input {
        padding: 12px 10px;
        font-size: 14px
    }

    #imageUploadForm .upload-submit {
        padding: 10px;
        font-size: 15px;
        margin: 15px 0
    }
}

@media only screen and (max-width: 400px) {
    .image-upload-box {
        width: 90%;
        padding: 15px 10px
    }

    .preview-container {
        height: 180px
    }

    .upload-placeholder i {
        font-size: 40px
    }

    .upload-placeholder p {
        font-size: 14px
    }
}

.property-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000e6;
    backdrop-filter: blur(5px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity .3s ease
}

.property-overlay.active {
    opacity: 1;
    display: flex
}

.overlay-backdrop {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    cursor: pointer
}

.overlay-content {
    width: 90%;
    max-width: 1000px;
    max-height: 90vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px #0003;
    padding: 25px;
    position: relative;
    transform: translateY(20px);
    transition: transform .3s ease
}

.property-overlay.active .overlay-content {
    transform: translateY(0)
}

.close_flex_ov {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eaeaea
}

.close_flex_ov h4 {
    color: #333;
    font-size: 1.5rem;
    margin: 0;
    font-weight: 600
}

.close-btn {
    background: none;
    border: none;
    color: #666;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all .3s ease;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
}

.close-btn:hover {
    color: #333;
    background-color: #f5f5f5
}

.property-header {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 25px
}

.property-image-container {
    position: relative;
    border-radius: 10px;
    overflow: hidden
}

.property-image {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden
}

.property-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease
}

.property-image:hover img {
    transform: scale(1.02)
}

.image-nav-buttons {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none
}

.image-nav-buttons .nav-btn {
    pointer-events: all;
    background: #fffc;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0 15px;
    color: #333;
    transition: all .3s ease
}

.image-nav-buttons .nav-btn:hover {
    background: #ffff;
    transform: scale(1.1)
}

.multiple_images {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 10px;
    scrollbar-width: thin;
    scrollbar-color: #ccc #f5f5f5
}

.multiple_images::-webkit-scrollbar {
    height: 5px
}

.multiple_images::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 3px
}

.multiple_images .img {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all .3s ease;
    position: relative;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden
}

.multiple_images .img::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 6px;
    border: 2px solid transparent;
    transition: all .3s ease
}

.multiple_images .img.active::after, .multiple_images .img:hover::after {
    border-color: #3a86ff
}

.multiple_images .img img {
    width: 100px;
    height: 75px;
    object-fit: cover;
    transition: all .3s ease
}

.multiple_images .img:hover img {
    transform: scale(1.05)
}

.property-basic-info {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    background: #f9f9f9;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #eaeaea
}

.property-basic-info>div {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #333;
    font-size: .95rem;
    padding: 8px 15px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 5px #0000000d
}

.property-basic-info i {
    color: #3a86ff;
    font-size: 1rem
}

.price {
    font-weight: 700;
    font-size: 1.2rem !important;
    background: #fff !important;
    color: #000 !important;
    padding: 10px 20px !important
}

.price i {
    color: #000 !important
}

.property-meta {
    display: flex;
    gap: 15px;
    width: 100%;
    margin-top: 5px
}

.property-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #555;
    font-size: .9rem;
    padding: 6px 12px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 5px #0000000d
}

.property-details {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-bottom: 25px
}

.section {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px #0000000d;
    border: 1px solid #eaeaea
}

.section h4 {
    color: #333;
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 10px
}

.section h4 i {
    color: #3a86ff;
    font-size: 1.1em
}

.section p {
    color: #555;
    line-height: 1.7;
    margin: 0;
    font-size: .95rem
}

.features-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none
}

.features-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #555;
    padding: 8px 12px;
    background: #f9f9f9;
    border-radius: 6px;
    transition: all .2s ease
}

.features-list li:hover {
    background: #f0f0f0
}

.features-list i {
    color: #3a86ff;
    font-size: .9rem
}

.map-container {
    width: 100%;
    height: 300px;
    border-radius: 8px;
    overflow: hidden
}

.action-buttons {
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
    border-top: 1px solid #eaeaea
}

.btn-primary {
    padding: 12px 25px;
    background: #3a86ff;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all .3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .95rem
}

.btn-primary:hover {
    background: #2a75ee;
    transform: translateY(-2px)
}

.btn-secondary {
    padding: 12px 25px;
    background: #f5f5f5;
    color: #333;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all .3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .95rem
}

.btn-secondary:hover {
    background: #eaeaea;
    transform: translateY(-2px)
}

.image-viewer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000f2;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1100;
    opacity: 0;
    transition: opacity .3s ease
}

.image-viewer-overlay.active {
    opacity: 1;
    display: flex
}

.image-viewer-backdrop {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    cursor: pointer
}

.image-viewer-container {
    position: relative;
    max-width: 90%;
    max-height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center
}

.image-viewer-container img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 10px 30px #0009
}

.close-image-viewer {
    position: absolute;
    top: -50px;
    right: 0;
    background: #fff3;
    border: none;
    color: #fff;
    font-size: 1.8rem;
    cursor: pointer;
    transition: all .3s ease;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
}

.close-image-viewer:hover {
    background: #ffffff4d;
    transform: rotate(90deg)
}

.image-viewer-container .nav-btn {
    position: absolute;
    background: #fffc;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #333;
    transition: all .3s ease;
    z-index: 1
}

.image-viewer-container .nav-btn:hover {
    background: #ffff;
    transform: scale(1.1)
}

.image-viewer-container .prev-btn {
    left: 20px
}

.image-viewer-container .next-btn {
    right: 20px
}

.overlay-content::-webkit-scrollbar {
    width: 8px
}

.overlay-content::-webkit-scrollbar-track {
    background: #f5f5f5;
    border-radius: 10px
}

.overlay-content::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px
}

.overlay-content::-webkit-scrollbar-thumb:hover {
    background: #aaa
}

@media (max-width: 900px) {
    .overlay-content {
        width: 92%;
        padding: 20px
    }

    .property-image {
        height: 350px
    }
}

@media (max-width: 768px) {
    .overlay-content {
        width: 95%;
        padding: 18px
    }

    .property-image {
        height: 300px
    }

    .features-list {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr))
    }

    .property-basic-info>div {
        padding: 8px 12px;
        font-size: .9rem
    }
}

@media (max-width: 576px) {
    .overlay-content {
        width: 98%;
        padding: 15px;
        border-radius: 8px
    }

    .property-image {
        height: 250px
    }

    .features-list {
        grid-template-columns: 1fr
    }

    .property-basic-info {
        flex-direction: column;
        gap: 10px
    }

    .btn-primary, .btn-secondary {
        width: 100%;
        justify-content: center;
        padding: 12px 20px
    }

    .action-buttons {
        flex-direction: column-reverse;
        gap: 10px
    }

    .close_flex_ov h4 {
        font-size: 1.3rem
    }

    .section {
        padding: 15px
    }

    .map-container {
        height: 200px
    }
}

.error-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000c;
    backdrop-filter: blur(5px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 0;
    transition: opacity .3s ease
}

.error-modal.active {
    opacity: 1;
    display: flex
}

.error-modal-box {
    width: 90%;
    max-width: 500px;
    background-color: #2a2a3a;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 25px #0006;
    border-top: 4px solid #ff4d4d
}

.error-modal-header {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #252538
}

.error-modal-header h3 {
    margin: 0;
    color: #ff4d4d;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    gap: 10px
}

.error-close-btn {
    background: transparent;
    border: none;
    color: #ccc;
    font-size: 1.5rem;
    cursor: pointer;
    transition: transform .2s ease
}

.error-close-btn:hover {
    transform: scale(1.1);
    color: #ff4d4d
}

.error-modal-body {
    padding: 25px
}

.error-modal-body p {
    color: #eee;
    margin: 0;
    line-height: 1.5
}

.error-modal-footer {
    padding: 15px 20px;
    display: flex;
    justify-content: flex-end;
    background-color: #252538;
    border-top: 1px solid #3a3a4a
}

.error-confirm-btn {
    padding: 8px 20px;
    border-radius: 5px;
    background-color: #ff4d4d;
    color: #fff;
    border: none;
    cursor: pointer;
    font-weight: 500;
    transition: all .3s ease
}

.error-confirm-btn:hover {
    background-color: #f33
}

.success-notification {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000c;
    backdrop-filter: blur(5px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 0;
    transition: opacity .3s ease
}

.success-notification.active {
    opacity: 1;
    display: flex
}

.success-notification-box {
    width: 90%;
    max-width: 500px;
    background-color: #2a2a3a;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 25px #0006;
    border-top: 4px solid #4CAF50
}

.success-notification-header {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #252538
}

.success-notification-header h3 {
    margin: 0;
    color: #4CAF50;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    gap: 10px
}

.success-close-btn {
    background: transparent;
    border: none;
    color: #ccc;
    font-size: 1.5rem;
    cursor: pointer;
    transition: transform .2s ease
}

.success-close-btn:hover {
    transform: scale(1.1);
    color: #4CAF50
}

.success-notification-body {
    padding: 25px
}

.success-notification-body p {
    color: #eee;
    margin: 0;
    line-height: 1.5;
    font-size: 1rem
}

.success-notification-footer {
    padding: 15px 20px;
    display: flex;
    justify-content: flex-end;
    background-color: #252538;
    border-top: 1px solid #3a3a4a
}

.success-confirm-btn {
    padding: 8px 20px;
    border-radius: 5px;
    background-color: #4CAF50;
    color: #fff;
    border: none;
    cursor: pointer;
    font-weight: 500;
    transition: all .3s ease
}

.success-confirm-btn:hover {
    background-color: #45a049;
    box-shadow: 0 2px 10px #4caf504d
}

.success-notification-header h3 i {
    animation: bounceIn .5s
}

@keyframes bounceIn {
    0% {
        transform: scale(0.5);
        opacity: 0
    }

    60% {
        transform: scale(1.2);
        opacity: 1
    }

    100% {
        transform: scale(1)
    }
}

#successNotification {
    position: fixed;
    z-index: 9999
}

#statusConfirmModal {
    z-index: 1000
}

.property-edit-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(5px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity .3s ease
}

.property-edit-modal.active {
    opacity: 1;
    display: flex
}

.property-edit-box {
    width: 80%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    background-color: #1e1e2d;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 5px 25px #0006
}

.property-edit-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #2d2d3d
}

.property-edit-head h3 {
    margin: 0;
    font-size: 1.5rem;
    color: #ff7f50
}

.property-edit-head .cancel-btn {
    background: transparent;
    border: none;
    color: #ff7f50;
    font-size: 1.5rem;
    cursor: pointer;
    transition: transform .2s ease
}

.property-edit-head .cancel-btn:hover {
    transform: scale(1.1)
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px
}

.form-section {
    margin-bottom: 20px;
    background: #252538;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px #0003
}

.form-section h4 {
    color: #ff7f50;
    margin-bottom: 15px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 8px
}

.form-section h4 i {
    font-size: .9em
}

.input-group {
    margin-bottom: 15px
}

.input-group label {
    display: block;
    margin-bottom: 5px;
    color: #ccc;
    font-size: .9rem
}

.input-group input, .input-group textarea, .input-group select {
    width: 100%;
    padding: 12px;
    border-radius: 5px;
    border: 1px solid #444;
    background: #2d2d3d;
    color: #fff;
    transition: border-color .3s ease
}

.input-group input:focus, .input-group textarea:focus, .input-group select:focus {
    border-color: #ff7f50;
    outline: none
}

.input-group textarea {
    min-height: 100px;
    resize: vertical
}

.price-input {
    position: relative
}

.price-input::before {
    content: "KES";
    position: absolute;
    left: 12px;
    top: 38px;
    color: #ccc;
    z-index: 1;
    font-size: 13px
}

.price-input input {
    padding-left: 35px !important
}

.image-upload-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px
}

.image-upload-group {
    margin-bottom: 15px
}

.image-upload-group label {
    display: block;
    margin-bottom: 5px;
    color: #ccc;
    font-size: .9rem
}

.image-preview {
    width: 100%;
    height: 150px;
    border: 2px dashed #444;
    border-radius: 5px;
    margin-bottom: 10px;
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-position: center;
    transition: border-color .3s ease
}

.image-preview:hover {
    border-color: #ff7f50
}

.image-preview.empty::before {
    content: "No image selected";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #666;
    font-size: .9rem
}

.image-input {
    width: 100%
}

.status-toggle {
    display: flex;
    align-items: center;
    gap: 10px
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #444;
    transition: .4s;
    border-radius: 24px
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: #fff;
    transition: .4s;
    border-radius: 50%
}

input:checked+.slider {
    background-color: #ff7f50
}

input:checked+.slider:before {
    transform: translateX(26px)
}

.form-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px
}

.submit-btn {
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all .3s ease;
    background: #ff7f50;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: .9rem
}

.submit-btn:hover {
    background: #ff7f50;
    box-shadow: 0 4px 12px #ff7f504d
}

.prop_edit_error {
    color: #ff6b6b;
    font-size: .8rem;
    margin-top: 5px;
    min-height: 18px;
    display: none
}

.input-group input:invalid, .input-group textarea:invalid, .image-input:invalid {
    border-color: #ff6b6b
}

.input-group.has-error input, .input-group.has-error textarea, .image-upload-group.has-error .image-input {
    border-color: #ff6b6b;
    background-color: #ff6b6b1a
}

.input-group.has-error .prop_edit_error, .image-upload-group.has-error .prop_edit_error {
    display: block
}

@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr
    }

    .property-edit-box {
        width: 95%;
        padding: 20px
    }
}

.property-upload-overlay {
    overflow-y: auto;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000c;
    backdrop-filter: blur(5px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity .3s ease
}

.property-upload-overlay.active {
    opacity: 1;
    display: flex
}

.property-upload-container {
    width: 80%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    background-color: #1e1e2d;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 5px 25px #0006
}

.property-upload-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #2d2d3d
}

.property-upload-header h3 {
    margin: 0;
    font-size: 1.5rem;
    color: #ff7f50
}

.property-upload-header .close-btn {
    background: transparent;
    border: none;
    color: #ff7f50;
    font-size: 1.5rem;
    cursor: pointer;
    transition: transform .2s ease
}

.property-upload-header .close-btn:hover {
    transform: scale(1.1)
}

.form-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px
}

.form-section {
    margin-bottom: 20px;
    background: #252538;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px #0003
}

.form-section h4 {
    color: #ff7f50;
    margin-bottom: 15px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 8px
}

.form-section h4 i {
    font-size: .9em
}

.input-field {
    margin-bottom: 15px
}

.input-field label {
    display: block;
    margin-bottom: 5px;
    color: #ccc;
    font-size: .9rem
}

.input-field input, .input-field textarea, .input-field select {
    width: 100%;
    padding: 12px;
    border-radius: 5px;
    border: 1px solid #444;
    background: #2d2d3d;
    color: #fff;
    transition: border-color .3s ease
}

.input-field input:focus, .input-field textarea:focus, .input-field select:focus {
    border-color: #ff7f50;
    outline: none
}

.input-field textarea {
    min-height: 100px;
    resize: vertical
}

.error-message {
    color: #ff6b6b;
    font-size: .8rem;
    margin-top: 5px;
    height: 15px
}

.price-input {
    position: relative
}

.price-input::before {
    content: "KES";
    position: absolute;
    left: 12px;
    top: 38px;
    color: #ccc;
    z-index: 1;
    font-size: 13px
}

.price-input input {
    padding-left: 35px !important
}

.image-upload-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px
}

.image-upload-field {
    margin-bottom: 15px
}

.image-upload-field label {
    display: block;
    margin-bottom: 5px;
    color: #ccc;
    font-size: .9rem
}

.image-preview {
    width: 100%;
    height: 150px;
    border: 2px dashed #444;
    border-radius: 5px;
    margin-bottom: 10px;
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-position: center;
    transition: border-color .3s ease;
    background-color: #2d2d3d
}

.image-preview:hover {
    border-color: #ff7f50
}

.image-preview.empty::before {
    content: "No image selected";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #666;
    font-size: .9rem
}

.image-upload-input {
    width: 100%
}

.image-overview-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #000c;
    justify-content: center;
    align-items: center;
    transition: opacity .3s ease-in-out;
    opacity: 0
}

.image-overview-modal.active {
    opacity: 1
}

.modal-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 90%;
    position: relative
}

#overviewModalImage {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
    display: block
}

.close-modal-btn {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: 700;
    transition: .3s;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0
}

.close-modal-btn:hover, .close-modal-btn:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px
}

.submit-btn {
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all .3s ease;
    background: #ff7f50;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: .9rem
}

.submit-btn:hover {
    background: #ff7f50;
    box-shadow: 0 4px 12px #ff7f504d
}

@media (max-width: 768px) {
    .form-layout {
        grid-template-columns: 1fr
    }

    .property-upload-container {
        width: 95%;
        padding: 20px
    }

    .image-upload-layout {
        grid-template-columns: 1fr
    }
}

.caretaker-registration-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000c;
    backdrop-filter: blur(5px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity .3s ease
}

.caretaker-registration-overlay.active {
    opacity: 1;
    display: flex
}

.caretaker-registration-container {
    width: 80%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    background-color: #1e1e2d;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 5px 25px #0006
}

.caretaker-registration-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #2d2d3d
}

.caretaker-registration-header h3 {
    margin: 0;
    font-size: 1.5rem;
    color: #ff7f50
}

.caretaker-registration-header .close-btn {
    background: transparent;
    border: none;
    color: #ff7f50;
    font-size: 1.5rem;
    cursor: pointer;
    transition: transform .2s ease
}

.caretaker-registration-header .close-btn:hover {
    transform: scale(1.1)
}

.form-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px
}

.form-section {
    margin-bottom: 20px;
    background: #252538;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px #0003
}

.form-section h4 {
    color: #ff7f50;
    margin-bottom: 15px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 8px
}

.form-section h4 i {
    font-size: .9em
}

.input-field {
    margin-bottom: 15px
}

.input-field label {
    display: block;
    margin-bottom: 5px;
    color: #ccc;
    font-size: .9rem
}

.input-field input, .input-field textarea, .input-field select {
    width: 100%;
    padding: 12px;
    border-radius: 5px;
    border: 1px solid #444;
    background: #2d2d3d;
    color: #fff;
    transition: border-color .3s ease
}

.input-field input:focus, .input-field textarea:focus, .input-field select:focus {
    border-color: #ff7f50;
    outline: none
}

.input-field textarea {
    min-height: 100px;
    resize: vertical
}

.error-message {
    color: #ff6b6b;
    font-size: .8rem;
    margin-top: 5px;
    height: 15px
}

.price-input {
    position: relative
}

.price-input::before {
    content: "KES";
    position: absolute;
    left: 12px;
    top: 38px;
    color: #ccc;
    z-index: 1;
    font-size: 13px
}

.price-input input {
    padding-left: 35px !important
}

.image-upload-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px
}

.image-upload-field {
    margin-bottom: 15px
}

.image-upload-field label {
    display: block;
    margin-bottom: 5px;
    color: #ccc;
    font-size: .9rem
}

.image-preview {
    width: 100%;
    height: 150px;
    border: 2px dashed #444;
    border-radius: 5px;
    margin-bottom: 10px;
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-position: center;
    transition: border-color .3s ease;
    background-color: #2d2d3d
}

.image-preview:hover {
    border-color: #ff7f50
}

.image-preview.empty::before {
    content: "No file selected";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #666;
    font-size: .9rem
}

.image-upload-input {
    width: 100%
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px
}

.submit-btn {
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all .3s ease;
    background: #ff7f50;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: .9rem
}

.submit-btn:hover {
    background: #ff7f50;
    box-shadow: 0 4px 12px #ff7f504d
}

.loading-indicator {
    margin-top: 5px;
    font-size: .9em;
    color: #666;
    padding: 5px;
    display: flex;
    align-items: center;
    gap: 8px
}

.property-response {
    margin-top: 5px;
    font-size: .9em;
    padding: 5px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 8px
}

.fa-spinner {
    animation: spin 1s linear infinite
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

@media (max-width: 768px) {
    .form-layout {
        grid-template-columns: 1fr
    }

    .caretaker-registration-container {
        width: 95%;
        padding: 20px
    }

    .image-upload-layout {
        grid-template-columns: 1fr
    }
}

.tenant-registration-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000c;
    backdrop-filter: blur(5px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity .3s ease
}

.tenant-registration-overlay.active {
    opacity: 1;
    display: flex
}

.tenant-registration-container {
    width: 80%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    background-color: #1e1e2d;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 5px 25px #0006
}

.tenant-registration-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #2d2d3d
}

.tenant-registration-header h3 {
    margin: 0;
    font-size: 1.5rem;
    color: #ff7f50
}

.tenant-registration-header .close-btn {
    background: transparent;
    border: none;
    color: #ff7f50;
    font-size: 1.5rem;
    cursor: pointer;
    transition: transform .2s ease
}

.tenant-registration-header .close-btn:hover {
    transform: scale(1.1)
}

.form-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px
}

.form-section {
    margin-bottom: 20px;
    background: #252538;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px #0003
}

.form-section h4 {
    color: #ff7f50;
    margin-bottom: 15px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 8px
}

.form-section h4 i {
    font-size: .9em
}

.input-field {
    margin-bottom: 15px
}

.input-field label {
    display: block;
    margin-bottom: 5px;
    color: #ccc;
    font-size: .9rem
}

.input-field input, .input-field textarea, .input-field select {
    width: 100%;
    padding: 12px;
    border-radius: 5px;
    border: 1px solid #444;
    background: #2d2d3d;
    color: #fff;
    transition: border-color .3s ease
}

.input-field input:focus, .input-field textarea:focus, .input-field select:focus {
    border-color: #ff7f50;
    outline: none
}

.otp-input-container {
    display: flex;
    position: relative;
    width: 100%
}

.otp-input-container input {
    flex: 1;
    padding: 12px 110px 12px 12px;
    border-radius: 5px 5px 5px 5px;
    border: 1px solid #444;
    border-right: none;
    background: #2d2d3d;
    color: #fff;
    transition: border-color .3s ease;
    height: 42px;
    box-sizing: border-box
}

.otp-input-container input:focus {
    border-color: #4CAF50;
    outline: none
}

.otp-button {
    position: absolute;
    right: 0;
    height: 42px;
    padding: 0 15px;
    border-radius: 0 5px 5px 0;
    background: #4CAF50;
    color: #fff;
    border: 1px solid #4CAF50;
    cursor: pointer;
    font-size: .8rem;
    font-weight: 500;
    white-space: nowrap;
    transition: all .3s ease
}

.otp-button:hover {
    background: #45a049;
    border-color: #45a049
}

@media (max-width: 480px) {
    .otp-input-container input {
        padding-right: 90px
    }

    .otp-button {
        padding: 0 10px;
        font-size: .7rem
    }
}

.error-message {
    color: #ff6b6b;
    font-size: .8rem;
    margin-top: 5px;
    height: 15px
}

.price-input {
    position: relative
}

.price-input::before {
    content: "KES";
    position: absolute;
    left: 12px;
    top: 38px;
    color: #ccc;
    z-index: 1;
    font-size: 13px
}

.price-input input {
    padding-left: 35px !important
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px
}

.submit-btn {
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all .3s ease;
    background: #ff7f50;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: .9rem
}

@media (max-width: 768px) {
    .form-layout {
        grid-template-columns: 1fr
    }

    .tenant-registration-container {
        width: 95%;
        padding: 20px
    }
}

.custom-registration-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000c;
    backdrop-filter: blur(5px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity .3s ease
}

.custom-registration-overlay.active {
    opacity: 1;
    display: flex
}

.custom-registration-container {
    width: 80%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    background-color: #1e1e2d;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 5px 25px #0006
}

.custom-registration-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #2d2d3d
}

.custom-registration-header h3 {
    margin: 0;
    font-size: 1.5rem;
    color: #ff7f50
}

.custom-registration-header .custom-close-btn {
    background: transparent;
    border: none;
    color: #ff7f50;
    font-size: 1.5rem;
    cursor: pointer;
    transition: transform .2s ease
}

.custom-registration-header .custom-close-btn:hover {
    transform: scale(1.1)
}

.custom-form-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px
}

.custom-form-section {
    margin-bottom: 20px;
    background: #252538;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px #0003
}

.custom-form-section h4 {
    color: #ff7f50;
    margin-bottom: 15px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 8px
}

.custom-form-section h4 i {
    font-size: .9em
}

.custom-input-field {
    margin-bottom: 15px
}

.custom-input-field label {
    display: block;
    margin-bottom: 5px;
    color: #ccc;
    font-size: .9rem
}

.custom-input-field input, .custom-input-field textarea, .custom-input-field select {
    width: 100%;
    padding: 12px;
    border-radius: 5px;
    border: 1px solid #444;
    background: #2d2d3d;
    color: #fff;
    transition: border-color .3s ease
}

.custom-input-field input:focus, .custom-input-field textarea:focus, .custom-input-field select:focus {
    border-color: #ff7f50;
    outline: none
}

.custom-error-message {
    color: #ff6b6b;
    font-size: .8rem;
    margin-top: 5px;
    height: 15px
}

.custom-price-input {
    position: relative
}

.custom-price-input::before {
    content: "KES";
    position: absolute;
    left: 12px;
    top: 38px;
    color: #ccc;
    z-index: 1;
    font-size: 13px
}

.custom-price-input input {
    padding-left: 35px !important
}

.custom-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px
}

.custom-submit-btn {
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all .3s ease;
    background: #ff7f50;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: .9rem
}

.custom-submit-btn:hover {
    background: #ff7f50
}

.validation-status {
    font-size: .85em;
    margin-top: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all .3s ease;
    box-shadow: 0 2px 4px #0000000d;
    font-weight: 500;
    width: 100%;
    max-width: 300px
}

.validation-status::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center
}

.validation-status.checking {
    color: #5c6bc0;
    background-color: #e8eaf6;
    border-left: 4px solid #5c6bc0
}

.validation-status.checking::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235c6bc0'%3E%3Cpath d='M12 2A10 10 0 1 0 22 12A10 10 0 0 0 12 2Zm0 18A8 8 0 1 1 20 12A8 8 0 0 1 12 20Z' opacity='.5'/%3E%3Cpath d='M20 12h2A10 10 0 0 0 12 2V4A8 8 0 0 1 20 12Z'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='1s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E")
}

.validation-status.valid {
    color: #388e3c;
    background-color: #e8f5e9;
    border-left: 4px solid #388e3c;
    animation: pulse .5s ease
}

.validation-status.valid::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23388e3c'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E")
}

.validation-status.invalid {
    color: #d32f2f;
    background-color: #ffebee;
    border-left: 4px solid #d32f2f;
    animation: shake .4s ease
}

.validation-status.invalid::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d32f2f'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E")
}

.validation-status.error {
    color: #f57c00;
    background-color: #fff3e0;
    border-left: 4px solid #f57c00
}

.validation-status.error::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f57c00'%3E%3Cpath d='M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z'/%3E%3C/svg%3E")
}

@keyframes pulse {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.02)
    }

    100% {
        transform: scale(1)
    }
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0)
    }

    20%, 60% {
        transform: translateX(-4px)
    }

    40%, 80% {
        transform: translateX(4px)
    }
}

@media (max-width: 768px) {
    .custom-form-layout {
        grid-template-columns: 1fr
    }

    .custom-registration-container {
        width: 95%;
        padding: 20px
    }
}

.landlord-registration-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000c;
    backdrop-filter: blur(5px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity .3s ease
}

.landlord-registration-overlay.active {
    opacity: 1;
    display: flex
}

.landlord-registration-container {
    width: 80%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    background-color: #1e1e2d;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 5px 25px #0006
}

.landlord-registration-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #2d2d3d
}

.landlord-registration-header h3 {
    margin: 0;
    font-size: 1.5rem;
    color: #ff7f50
}

.landlord-registration-header .landlord-close-btn {
    background: transparent;
    border: none;
    color: #ff7f50;
    font-size: 1.5rem;
    cursor: pointer;
    transition: transform .2s ease
}

.landlord-registration-header .landlord-close-btn:hover {
    transform: scale(1.1)
}

.landlord-form-flex-container {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.landlord-input-container {
    position: relative;
    margin-bottom: 15px
}

.landlord-input-container label {
    position: absolute;
    top: -10px;
    left: 10px;
    background-color: #1e1e2d;
    padding: 0 5px;
    color: #ccc;
    font-size: .8rem;
    z-index: 1
}

.landlord-input-container input {
    width: 100%;
    padding: 12px;
    border-radius: 5px;
    border: 1px solid #444;
    background: #2d2d3d;
    color: #fff;
    transition: border-color .3s ease
}

.landlord-input-container input:focus {
    border-color: #ff7f50;
    outline: none
}

.landlord-error-message {
    color: #ff6b6b;
    font-size: .8rem;
    margin-top: 5px;
    height: 15px
}

.landlord-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px
}

.landlord-submit-btn {
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all .3s ease;
    background: #ff7f50;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: .9rem
}

.landlord-submit-btn:hover {
    background: #ff7f50
}

@media (max-width: 768px) {
    .landlord-registration-container {
        width: 95%;
        padding: 20px
    }
}

.unit-addition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000c;
    backdrop-filter: blur(5px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity .3s ease
}

.unit-addition-overlay.active {
    opacity: 1;
    display: flex
}

.unit-addition-container {
    width: 80%;
    max-width: 700px;
    max-height: 90vh;
    overflow-y: auto;
    background-color: #1e1e2d;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 5px 25px #0006
}

.unit-addition-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #2d2d3d
}

.unit-addition-header h3 {
    margin: 0;
    font-size: 1.4rem;
    color: #ff7f50;
    display: flex;
    align-items: center;
    gap: 10px
}

.unit-addition-header .unit-close-btn {
    background: transparent;
    border: none;
    color: #ff7f50;
    font-size: 1.5rem;
    cursor: pointer;
    transition: transform .2s ease
}

.unit-addition-header .unit-close-btn:hover {
    transform: scale(1.1)
}

.unit-form-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px
}

.unit-form-section {
    margin-bottom: 15px;
    background: #252538;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px #0003
}

.unit-form-section h4 {
    color: #ff7f50;
    margin-bottom: 15px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 8px
}

.unit-form-section h4 i {
    font-size: .9em
}

.unit-input-field {
    margin-bottom: 15px
}

.unit-input-field label {
    display: block;
    margin-bottom: 8px;
    color: #ddd;
    font-size: .9rem;
    font-weight: 500
}

.unit-input-field input, .unit-input-field select {
    width: 100%;
    padding: 12px 15px;
    border-radius: 6px;
    border: 1px solid #3a3a4a;
    background: #2d2d3d;
    color: #fff;
    font-size: .95rem;
    transition: all .3s ease
}

.unit-input-field input:focus, .unit-input-field select:focus {
    border-color: #ff7f50;
    outline: none;
    box-shadow: 0 0 0 2px #ff7f5033
}

.unit-input-field input[readonly] {
    background-color: #334;
    color: #aaa;
    cursor: not-allowed
}

.unit-error-message {
    color: #ff6b6b;
    font-size: .8rem;
    margin-top: 5px;
    height: 15px
}

.unit-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #2d2d3d
}

.unit-add-btn {
    padding: 12px 30px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all .3s ease;
    background: #ff7f50;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: 8px
}

.unit-add-btn:hover {
    background: #ff7a4d;
    box-shadow: 0 4px 12px #ff7f504d
}

@media (max-width: 768px) {
    .unit-addition-container {
        width: 90%;
        padding: 20px
    }

    .unit-form-section {
        padding: 15px
    }
}

@media (max-width: 480px) {
    .unit-addition-container {
        width: 95%;
        padding: 15px
    }

    .unit-addition-header h3 {
        font-size: 1.2rem
    }

    .unit-input-field input, .unit-input-field select {
        padding: 10px 12px
    }

    .unit-add-btn {
        padding: 10px 20px;
        font-size: .85rem
    }
}

.payment-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000c;
    backdrop-filter: blur(5px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity .3s ease
}

.payment-overlay.active {
    opacity: 1;
    display: flex
}

.payment-container {
    width: 80%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    background-color: #1e1e2d;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 5px 25px #0006
}

.payment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #2d2d3d
}

.payment-header h3 {
    margin: 0;
    font-size: 1.5rem;
    color: #ff7f50
}

.payment-header .payment-close-btn {
    background: transparent;
    border: none;
    color: #ff7f50;
    font-size: 1.5rem;
    cursor: pointer;
    transition: transform .2s ease
}

.payment-header .payment-close-btn:hover {
    transform: scale(1.1)
}

.payment-form-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px
}

.payment-form-section {
    margin-bottom: 20px;
    background: #252538;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px #0003
}

.payment-form-section h4 {
    color: #ff7f50;
    margin-bottom: 15px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 8px
}

.payment-form-section h4 i {
    font-size: .9em
}

.payment-input-field {
    margin-bottom: 15px
}

.payment-input-field label {
    display: block;
    margin-bottom: 5px;
    color: #ccc;
    font-size: .9rem
}

.payment-input-field input, .payment-input-field textarea, .payment-input-field select {
    width: 100%;
    padding: 12px;
    border-radius: 5px;
    border: 1px solid #444;
    background: #2d2d3d;
    color: #fff;
    transition: border-color .3s ease
}

.payment-input-field input:focus, .payment-input-field textarea:focus, .payment-input-field select:focus {
    border-color: #ff7f50;
    outline: none
}

.payment-error-message {
    color: #ff6b6b;
    font-size: .8rem;
    margin-top: 5px;
    height: 15px
}

.price-input {
    position: relative
}

.price-input::before {
    content: "KES";
    position: absolute;
    left: 12px;
    top: 38px;
    color: #ccc;
    z-index: 1;
    font-size: 13px
}

.price-input input {
    padding-left: 35px !important
}

.payment-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px
}

.payment-add-btn {
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all .3s ease;
    background: #ff7f50;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: .9rem
}

.payment-add-btn:hover {
    background: #e06a3e;
    box-shadow: 0 4px 12px #ff7f504d
}

@media (max-width: 768px) {
    .payment-form-layout {
        grid-template-columns: 1fr
    }

    .payment-container {
        width: 95%;
        padding: 20px
    }
}

@media (max-width: 480px) {
    .payment-container {
        width: 95%;
        padding: 15px
    }

    .payment-header h3 {
        font-size: 1.2rem
    }

    .payment-input-field input, .payment-input-field select {
        padding: 10px 12px
    }

    .payment-add-btn {
        padding: 10px 20px;
        font-size: .85rem
    }
}

.update-payment-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000c;
    backdrop-filter: blur(5px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity .3s ease
}

.update-payment-overlay.active {
    opacity: 1;
    display: flex
}

.update-payment-container {
    width: 80%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    background-color: #1e1e2d;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 5px 25px #0006
}

.update-payment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #2d2d3d
}

.update-payment-header h3 {
    margin: 0;
    font-size: 1.5rem;
    color: #ff7f50
}

.update-payment-header .update-payment-close-btn {
    background: transparent;
    border: none;
    color: #ff7f50;
    font-size: 1.5rem;
    cursor: pointer;
    transition: transform .2s ease
}

.update-payment-header .update-payment-close-btn:hover {
    transform: scale(1.1)
}

.update-payment-form-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px
}

.update-payment-form-section {
    margin-bottom: 20px;
    background: #252538;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px #0003
}

.update-payment-form-section h4 {
    color: #ff7f50;
    margin-bottom: 15px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 8px
}

.update-payment-form-section h4 i {
    font-size: .9em
}

.update-payment-input-field {
    margin-bottom: 15px
}

.update-payment-input-field label {
    display: block;
    margin-bottom: 5px;
    color: #ccc;
    font-size: .9rem
}

.update-payment-input-field input, .update-payment-input-field textarea, .update-payment-input-field select {
    width: 100%;
    padding: 12px;
    border-radius: 5px;
    border: 1px solid #444;
    background: #2d2d3d;
    color: #fff;
    transition: border-color .3s ease
}

.update-payment-input-field input:focus, .update-payment-input-field textarea:focus, .update-payment-input-field select:focus {
    border-color: #ff7f50;
    outline: none
}

.update-payment-input-field select:disabled {
    opacity: .7;
    cursor: not-allowed
}

.update-payment-error-message {
    color: #ff6b6b;
    font-size: .8rem;
    margin-top: 5px;
    height: 15px
}

.update-price-input {
    position: relative
}

.update-price-input::before {
    content: "KES";
    position: absolute;
    left: 12px;
    top: 38px;
    color: #ccc;
    z-index: 1;
    font-size: 13px
}

.update-price-input input {
    padding-left: 35px !important
}

.update-payment-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    gap: 15px
}

.update-payment-save-btn {
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all .3s ease;
    background: #ff7f50;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: .9rem
}

.update-payment-save-btn:hover {
    background: #e06a3e;
    box-shadow: 0 4px 12px #ff7f504d
}

.update-payment-cancel-btn {
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all .3s ease;
    background: #444;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: .9rem
}

.update-payment-cancel-btn:hover {
    background: #555;
    box-shadow: 0 4px 12px #0003
}

@media (max-width: 768px) {
    .update-payment-form-layout {
        grid-template-columns: 1fr
    }

    .update-payment-container {
        width: 95%;
        padding: 20px
    }
}

@media (max-width: 480px) {
    .update-payment-container {
        width: 95%;
        padding: 15px
    }

    .update-payment-header h3 {
        font-size: 1.2rem
    }

    .update-payment-input-field input, .update-payment-input-field select {
        padding: 10px 12px
    }

    .update-payment-save-btn, .update-payment-cancel-btn {
        padding: 10px 20px;
        font-size: .85rem
    }

    .update-payment-form-actions {
        gap: 10px
    }
}

.edit-profile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000c;
    backdrop-filter: blur(5px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity .3s ease
}

.edit-profile-overlay.active {
    opacity: 1;
    display: flex
}

.edit-profile-container {
    width: 80%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    background-color: #1e1e2d;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 5px 25px #0006
}

.edit-profile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #2d2d3d
}

.edit-profile-header h3 {
    margin: 0;
    font-size: 1.5rem;
    color: #ff7f50
}

.edit-profile-header .edit-profile-close-btn {
    background: transparent;
    border: none;
    color: #ff7f50;
    font-size: 1.5rem;
    cursor: pointer;
    transition: transform .2s ease
}

.edit-profile-header .edit-profile-close-btn:hover {
    transform: scale(1.1)
}

.edit-profile-form-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px
}

.edit-profile-form-section {
    margin-bottom: 20px;
    background: #252538;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px #0003
}

.edit-profile-form-section h4 {
    color: #ff7f50;
    margin-bottom: 15px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 8px
}

.edit-profile-form-section h4 i {
    font-size: .9em
}

.edit-profile-input-field {
    margin-bottom: 15px
}

.edit-profile-input-field label {
    display: block;
    margin-bottom: 5px;
    color: #ccc;
    font-size: .9rem
}

.edit-profile-input-field input, .edit-profile-input-field textarea, .edit-profile-input-field select {
    width: 100%;
    padding: 12px;
    border-radius: 5px;
    border: 1px solid #444;
    background: #2d2d3d;
    color: #fff;
    transition: border-color .3s ease
}

.edit-profile-input-field input:focus, .edit-profile-input-field textarea:focus, .edit-profile-input-field select:focus {
    border-color: #ff7f50;
    outline: none
}

.edit-profile-input-field select:disabled {
    opacity: .7;
    cursor: not-allowed
}

.edit-profile-error-message {
    color: #ff6b6b;
    font-size: .8rem;
    margin-top: 5px;
    height: 15px
}

.profile-pic-preview {
    margin-top: 10px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #ff7f50
}

.profile-pic-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.edit-profile-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    gap: 15px
}

.edit-profile-save-btn {
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all .3s ease;
    background: #ff7f50;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: .9rem
}

.edit-profile-save-btn:hover {
    background: #e06a3e;
    box-shadow: 0 4px 12px #ff7f504d
}

.edit-profile-cancel-btn {
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all .3s ease;
    background: #444;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: .9rem
}

.edit-profile-cancel-btn:hover {
    background: #555;
    box-shadow: 0 4px 12px #0003
}

@media (max-width: 768px) {
    .edit-profile-form-layout {
        grid-template-columns: 1fr
    }

    .edit-profile-container {
        width: 95%;
        padding: 20px
    }
}

@media (max-width: 480px) {
    .edit-profile-container {
        width: 95%;
        padding: 15px
    }

    .edit-profile-header h3 {
        font-size: 1.2rem
    }

    .edit-profile-input-field input, .edit-profile-input-field select {
        padding: 10px 12px
    }

    .edit-profile-save-btn, .edit-profile-cancel-btn {
        padding: 10px 20px;
        font-size: .85rem
    }

    .edit-profile-form-actions {
        gap: 10px
    }
}

.bill-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000c;
    backdrop-filter: blur(5px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity .3s ease
}

.bill-overlay.active {
    opacity: 1;
    display: flex
}

.bill-container {
    width: 80%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    background-color: #1e1e2d;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 5px 25px #0006
}

.bill-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #2d2d3d
}

.bill-header h3 {
    margin: 0;
    font-size: 1.5rem;
    color: #ff7f50
}

.bill-header .bill-close-btn {
    background: transparent;
    border: none;
    color: #ff7f50;
    font-size: 1.5rem;
    cursor: pointer;
    transition: transform .2s ease
}

.bill-header .bill-close-btn:hover {
    transform: scale(1.1)
}

.bill-form-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px
}

.bill-form-section {
    margin-bottom: 20px;
    background: #252538;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px #0003
}

.bill-form-section h4 {
    color: #ff7f50;
    margin-bottom: 15px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 8px
}

.bill-form-section h4 i {
    font-size: .9em
}

.bill-input-field {
    margin-bottom: 15px
}

.bill-input-field label {
    display: block;
    margin-bottom: 5px;
    color: #ccc;
    font-size: .9rem
}

.bill-input-field input, .bill-input-field textarea, .bill-input-field select {
    width: 100%;
    padding: 12px;
    border-radius: 5px;
    border: 1px solid #444;
    background: #2d2d3d;
    color: #fff;
    transition: border-color .3s ease
}

.bill-input-field input:focus, .bill-input-field textarea:focus, .bill-input-field select:focus {
    border-color: #4CAF50;
    outline: none
}

.bill-error-message {
    color: #ff6b6b;
    font-size: .8rem;
    margin-top: 5px;
    height: 15px
}

.price-input {
    position: relative
}

.unit-input {
    position: relative
}

.price-input::before {
    content: "KES";
    position: absolute;
    left: 12px;
    top: 38px;
    color: #ccc;
    z-index: 1;
    font-size: 13px
}

.unit-input::before {
    content: "UNITS";
    position: absolute;
    left: 12px;
    top: 38px;
    color: #ccc;
    z-index: 1;
    font-size: 13px
}

.price-input input {
    padding-left: 35px !important
}

.unit-input input {
    padding-left: 55px !important
}

.bill-form-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 20px
}

.bill-calculate-btn {
    padding: 12px 20px;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all .3s ease;
    background: #2196F3;
    color: #fff;
    font-size: .9rem
}

.bill-calculate-btn:hover {
    background: #0b7dda;
    box-shadow: 0 4px 12px #2196f34d
}

.bill-generate-btn {
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all .3s ease;
    background: #ff7f50;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: .9rem
}

.bill-generate-btn:hover {
    background: #ee4305;
    box-shadow: 0 4px 12px #fa4300
}

@media (max-width: 768px) {
    .bill-form-layout {
        grid-template-columns: 1fr
    }

    .bill-container {
        width: 95%;
        padding: 20px
    }
}

@media (max-width: 480px) {
    .bill-container {
        width: 95%;
        padding: 15px
    }

    .bill-header h3 {
        font-size: 1.2rem
    }

    .bill-input-field input, .bill-input-field select {
        padding: 10px 12px
    }

    .bill-generate-btn, .bill-calculate-btn {
        padding: 10px 15px;
        font-size: .85rem
    }

    .bill-form-actions {
        flex-direction: column;
        gap: 10px
    }

    .bill-form-actions button {
        width: 100%
    }
}

.bill-display-field {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #eee
}

.bill-display-field.total {
    font-weight: 700;
    border-top: 1px solid #ddd;
    padding-top: 12px;
    margin-top: 8px
}

.bill-calculated {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    font-size: 13px;
    color: #2E3A87
}

.bill-input-field.total {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #ddd
}

.bill-input-field.total input {
    font-weight: 700;
    font-size: 16px
}

.bill-edit-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000c;
    backdrop-filter: blur(5px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity .3s ease
}

.bill-edit-overlay.active {
    opacity: 1;
    display: flex
}

.bill-edit-container {
    width: 80%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    background-color: #1e1e2d;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 5px 25px #0006
}

.bill-edit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #2d2d3d
}

.bill-edit-header h3 {
    margin: 0;
    font-size: 1.5rem;
    color: #4CAF50
}

.bill-edit-header .bill-edit-close-btn {
    background: transparent;
    border: none;
    color: #4CAF50;
    font-size: 1.5rem;
    cursor: pointer;
    transition: transform .2s ease
}

.bill-edit-header .bill-edit-close-btn:hover {
    transform: scale(1.1)
}

.bill-edit-form-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px
}

.bill-edit-form-section {
    margin-bottom: 20px;
    background: #252538;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px #0003
}

.bill-edit-form-section h4 {
    color: #4CAF50;
    margin-bottom: 15px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 8px
}

.bill-edit-form-section h4 i {
    font-size: .9em
}

.bill-edit-input-field {
    margin-bottom: 15px
}

.bill-edit-input-field label {
    display: block;
    margin-bottom: 5px;
    color: #ccc;
    font-size: .9rem
}

.bill-edit-input-field input, .bill-edit-input-field textarea, .bill-edit-input-field select {
    width: 100%;
    padding: 12px;
    border-radius: 5px;
    border: 1px solid #444;
    background: #2d2d3d;
    color: #fff;
    transition: border-color .3s ease
}

.bill-edit-input-field input:focus, .bill-edit-input-field textarea:focus, .bill-edit-input-field select:focus {
    border-color: #4CAF50;
    outline: none
}

.bill-edit-error-message {
    color: #ff6b6b;
    font-size: .8rem;
    margin-top: 5px;
    height: 15px
}

.bill-edit-input-field.price-input {
    position: relative
}

.bill-edit-input-field.unit-input {
    position: relative
}

.bill-edit-input-field.price-input::before {
    content: "KES";
    position: absolute;
    left: 12px;
    top: 38px;
    color: #ccc;
    z-index: 1;
    font-size: 13px
}

.bill-edit-input-field.unit-input::before {
    content: "UNITS";
    position: absolute;
    left: 12px;
    top: 38px;
    color: #ccc;
    z-index: 1;
    font-size: 13px
}

.bill-edit-input-field.price-input input {
    padding-left: 35px !important
}

.bill-edit-input-field.unit-input input {
    padding-left: 55px !important
}

.bill-edit-form-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 20px
}

.bill-edit-calculate-btn {
    padding: 12px 20px;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all .3s ease;
    background: #2196F3;
    color: #fff;
    font-size: .9rem
}

.bill-edit-calculate-btn:hover {
    background: #0b7dda;
    box-shadow: 0 4px 12px #2196f34d
}

.bill-edit-generate-btn {
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all .3s ease;
    background: #4CAF50;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: .9rem
}

.bill-edit-generate-btn:hover {
    background: #3e8e41;
    box-shadow: 0 4px 12px #4caf504d
}

.bill-edit-display-field {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #3d3d4d
}

.bill-edit-display-field.total {
    font-weight: 700;
    border-top: 1px solid #3d3d4d;
    padding-top: 12px;
    margin-top: 8px
}

.bill-edit-calculated {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    font-size: 13px;
    color: #4CAF50
}

.bill-edit-input-field.total {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #3d3d4d
}

.bill-edit-input-field.total input {
    font-weight: 700;
    font-size: 16px
}

@media (max-width: 768px) {
    .bill-edit-form-layout {
        grid-template-columns: 1fr
    }

    .bill-edit-container {
        width: 95%;
        padding: 20px
    }
}

@media (max-width: 480px) {
    .bill-edit-container {
        width: 95%;
        padding: 15px
    }

    .bill-edit-header h3 {
        font-size: 1.2rem
    }

    .bill-edit-input-field input, .bill-edit-input-field select {
        padding: 10px 12px
    }

    .bill-edit-generate-btn, .bill-edit-calculate-btn {
        padding: 10px 15px;
        font-size: .85rem
    }

    .bill-edit-form-actions {
        flex-direction: column;
        gap: 10px
    }

    .bill-edit-form-actions button {
        width: 100%
    }
}

.invoice-paid-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000c;
    backdrop-filter: blur(5px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity .3s ease
}

.invoice-paid-overlay.active {
    opacity: 1;
    display: flex
}

.invoice-paid-container {
    width: 80%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    background-color: #1e1e2d;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 5px 25px #0006
}

.invoice-paid-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #2d2d3d
}

.invoice-paid-header h3 {
    margin: 0;
    font-size: 1.5rem;
    color: #ff7f50
}

.invoice-paid-header .invoice-paid-close-btn {
    background: transparent;
    border: none;
    color: #ff7f50;
    font-size: 1.5rem;
    cursor: pointer;
    transition: transform .2s ease
}

.invoice-paid-header .invoice-paid-close-btn:hover {
    transform: scale(1.1)
}

.invoice-paid-form-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px
}

.invoice-paid-form-section {
    margin-bottom: 20px;
    background: #252538;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px #0003
}

.invoice-paid-form-section h4 {
    color: #ff7f50;
    margin-bottom: 15px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 8px
}

.invoice-paid-form-section h4 i {
    font-size: .9em
}

.invoice-paid-input-field {
    margin-bottom: 15px
}

.invoice-paid-input-field label {
    display: block;
    margin-bottom: 5px;
    color: #ccc;
    font-size: .9rem
}

.invoice-paid-input-field input, .invoice-paid-input-field textarea, .invoice-paid-input-field select {
    width: 100%;
    padding: 12px;
    border-radius: 5px;
    border: 1px solid #444;
    background: #2d2d3d;
    color: #fff;
    transition: border-color .3s ease
}

.invoice-paid-input-field input:focus, .invoice-paid-input-field textarea:focus, .invoice-paid-input-field select:focus {
    border-color: #ff7f50;
    outline: none
}

.invoice-paid-input-field.price-input {
    position: relative
}

.invoice-paid-input-field.price-input::before {
    content: "KES";
    position: absolute;
    left: 12px;
    top: 38px;
    color: #ccc;
    z-index: 1;
    font-size: 13px
}

.invoice-paid-input-field.price-input input {
    padding-left: 45px !important
}

.invoice-paid-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    gap: 15px
}

.invoice-paid-cancel-btn {
    padding: 12px 25px;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all .3s ease;
    background: #f44336;
    color: #fff;
    font-size: .9rem
}

.invoice-paid-cancel-btn:hover {
    background: #d32f2f;
    box-shadow: 0 4px 12px #f443364d
}

.invoice-paid-update-btn {
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all .3s ease;
    background: #ff7f50;
    color: #fff;
    font-size: .9rem
}

.invoice-paid-update-btn:hover {
    background: #ff7f50;
    box-shadow: 0 4px 12px #2196f34d
}

@media (max-width: 768px) {
    .invoice-paid-form-layout {
        grid-template-columns: 1fr
    }

    .invoice-paid-container {
        width: 95%;
        padding: 20px
    }
}

@media (max-width: 480px) {
    .invoice-paid-container {
        width: 95%;
        padding: 15px
    }

    .invoice-paid-header h3 {
        font-size: 1.2rem
    }

    .invoice-paid-input-field input, .invoice-paid-input-field select {
        padding: 10px 12px
    }

    .invoice-paid-update-btn, .invoice-paid-cancel-btn {
        padding: 10px 15px;
        font-size: .85rem
    }

    .invoice-paid-form-actions {
        flex-direction: column;
        gap: 10px
    }

    .invoice-paid-form-actions button {
        width: 100%
    }
}

.receipt-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000d9;
    backdrop-filter: blur(8px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 1;
    transition: opacity .4s ease;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow-y: hidden;
    padding: 0
}

.receipt-overlay.receipt {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000d9;
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 1;
    transition: opacity .4s ease;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow-y: hidden;
    padding: 0
}

.receipt-overlay.active {
    opacity: 1;
    display: flex
}

.receipt-container {
    width: 85%;
    max-width: 900px;
    background: linear-gradient(135deg, #fff 0%, #f8f8f8 100%);
    padding: 0;
    box-shadow: 0 10px 40px #0000004d;
    position: relative;
    overflow: hidden;
    color: #333;
    margin: 20px auto;
    height: 100%;
    overflow-y: auto;
    padding-right: 20px
}

.receipt-container.for-pdf-export {
    width: 210mm !important;
    max-width: 210mm !important;
    margin: 0 auto !important;
    box-shadow: none !important;
    border: none !important;
    overflow: visible !important;
    height: auto !important;
    padding: 0 !important;
    background: #fff !important
}

.zigzag-top, .zigzag-bottom {
    height: 12px;
    width: 100%;
    background: linear-gradient(135deg, #4a6bff 0%, #ff6b6b 100%);
    position: relative
}

.zigzag-top::before, .zigzag-bottom::before {
    content: " ";
    position: absolute;
    left: 0;
    right: 0;
    height: 12px;
    font-size: 18px;
    letter-spacing: 2px;
    overflow: hidden;
    text-align: center;
    line-height: 12px;
    color: #fff;
    text-shadow: 1px 1px 1px #0000004d
}

.zigzag-top::before {
    top: -6px
}

.zigzag-bottom::before {
    bottom: -6px
}

.receipt-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    background: linear-gradient(to right, #4a6bff, #6b4aff);
    color: #fff
}

.receipt-logo {
    display: flex;
    align-items: center;
    gap: 12px
}

.receipt-logo i {
    font-size: 28px
}

.receipt-logo h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600
}

.receipt-close-btn {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    transition: transform .2s ease;
    padding: 5px
}

.receipt-close-btn:hover {
    transform: scale(1.1)
}

.receipt-body {
    display: flex;
    padding: 25px 30px
}

.receipt-details {
    flex: 2;
    padding-right: 30px
}

.receipt-qr-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    border-left: 1px dashed #ccc;
    padding-left: 30px
}

.receipt-section {
    margin-bottom: 25px
}

.receipt-section h4 {
    margin: 0 0 15px;
    font-size: 1.1rem;
    color: #4a6bff;
    display: flex;
    align-items: center;
    gap: 8px
}

.receipt-section h4 i {
    font-size: .9em
}

.detail-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee
}

.detail-label {
    font-weight: 500;
    color: #666
}

.detail-value {
    font-weight: 600;
    text-align: right
}

.bill-breakdown-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px
}

.bill-breakdown-table th, .bill-breakdown-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid #eee
}

.bill-breakdown-table th {
    background-color: #f5f7ff;
    color: #4a6bff;
    font-weight: 600
}

.bill-breakdown-table tr:last-child td {
    border-bottom: none
}

.bill-breakdown-table .total-row {
    background-color: #f5f7ff
}

.transaction-history-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: .9rem
}

.transaction-history-table th, .transaction-history-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid #eee
}

.transaction-history-table th {
    background-color: #f5f7ff;
    color: #4a6bff;
    font-weight: 600
}

.transaction-history-table tr:last-child td {
    border-bottom: none
}

.qr-container {
    text-align: center;
    margin-bottom: 30px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center
}

.qr-container svg {
    max-width: 100%;
    height: auto
}

.qr-container canvas {
    border: 1px solid #eee;
    padding: 10px;
    background: #fff;
    box-shadow: 0 2px 10px #0000000d;
    max-width: 100%;
    height: auto
}

.qr-note {
    font-size: .8rem;
    color: #666;
    margin-top: 8px
}

.receipt-stamp {
    width: 100px;
    height: 100px;
    border: 4px solid #4a6bff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotate(15deg);
    margin-top: 20px
}

.stamp-inner {
    width: 80px;
    height: 80px;
    border: 4px solid #ff6b6b;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    color: #ff6b6b;
    font-size: 1.2rem
}

.receipt-footer {
    text-align: center;
    padding: 20px 30px;
    background: #f5f7ff;
    border-top: 1px solid #eee
}

.receipt-footer p {
    margin: 5px 0;
    color: #666;
    font-size: .9rem
}

.receipt-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 25px;
    flex-wrap: wrap
}

.receipt-btn {
    padding: 12px 25px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all .3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .95rem
}

.receipt-btn i {
    font-size: 1rem
}

.print-btn {
    background: #4a6bff;
    color: #fff
}

.print-btn:hover {
    background: #3a5bef;
    box-shadow: 0 4px 15px #4a6bff4d
}

.download-btn {
    background: #28a745;
    color: #fff
}

.download-btn:hover {
    background: #218838;
    box-shadow: 0 44px 15px #28a7454d
}

.share-btn {
    background: #6c757d;
    color: #fff
}

.share-btn:hover {
    background: #5a6268;
    box-shadow: 0 4px 15px #6c757d4d
}

.receipt-notes {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #ddd;
    text-align: left;
    font-size: .8rem;
    color: #666
}

.receipt-note {
    margin: 5px 0;
    line-height: 1.4
}

.receipt-note strong {
    color: #4a6bff
}

.status-verified {
    color: #28a745;
    font-weight: 700
}

.status-declined {
    color: #dc3545;
    font-weight: 700
}

.status-pending {
    color: #ffc107;
    font-weight: 700
}

.no-transactions {
    text-align: center;
    color: #6c757d;
    padding: 10px
}

.receipt-watermark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    transform: rotate(-45deg);
    font-size: 20px;
    color: #00000008;
    pointer-events: none;
    z-index: 1;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .5px;
    line-height: 1.2;
    text-align: center;
    overflow: hidden;
    padding: 10px;
    display: block
}

@media (max-width: 768px) {
    .receipt-overlay {
        align-items: flex-start;
        padding-top: 20px
    }

    .receipt-container {
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 0;
        height: calc(100% - 100px)
    }

    .receipt-body {
        flex-direction: column;
        padding: 20px
    }

    .receipt-details {
        padding-right: 0;
        margin-bottom: 25px
    }

    .receipt-qr-section {
        border-left: none;
        border-top: 1px dashed #ccc;
        padding-left: 0;
        padding-top: 25px;
        align-items: center
    }

    .receipt-actions {
        position: fixed;
        bottom: 20px;
        left: 0;
        right: 0;
        z-index: 2001;
        padding: 0 20px
    }

    .receipt-btn {
        flex: 1;
        max-width: 45%
    }

    .transaction-history-table {
        display: block;
        overflow-x: auto
    }

    .receipt-watermark {
        font-size: .7em;
        line-height: 1.1
    }
}

@media (max-width: 480px) {
    .receipt-header {
        padding: 15px 20px
    }

    .receipt-logo h3 {
        font-size: 1.2rem
    }

    .receipt-body {
        padding: 15px
    }

    .detail-row {
        flex-direction: column;
        gap: 4px;
        padding-bottom: 8px
    }

    .detail-value {
        text-align: left
    }

    .receipt-actions {
        flex-direction: row;
        gap: 10px
    }

    .receipt-btn {
        max-width: 100%;
        padding: 12px 15px;
        font-size: .85rem
    }

    .receipt-watermark {
        font-size: .6em;
        line-height: 1
    }
}

@media print {
    body {
        margin: 0 !important;
        padding: 0 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important
    }

    .receipt-overlay {
        position: static !important;
        background-color: transparent !important;
        backdrop-filter: none !important;
        display: block !important;
        opacity: 1 !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        height: auto !important;
        max-width: none !important
    }

    .receipt-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        box-shadow: none !important;
        border: none !important;
        overflow: visible !important;
        height: auto !important;
        padding: 0 !important
    }

    .receipt-actions, .receipt-close-btn {
        display: none !important
    }

    .receipt-header {
        background: linear-gradient(to right, #4a6bff, #6b4aff) !important;
        color: #fff !important
    }

    .bill-breakdown-table th, .bill-breakdown-table .total-row {
        background-color: #f5f7ff !important;
        color: #4a6bff !important
    }

    .receipt-stamp {
        border-color: #4a6bff !important
    }

    .stamp-inner {
        border-color: #ff6b6b !important;
        color: #ff6b6b !important
    }

    .receipt-section, .transaction-history-table {
        page-break-inside: avoid
    }

    .transaction-history-table tbody tr, .bill-breakdown-table tbody tr {
        page-break-inside: avoid
    }

    @page {
        size: A4;
        margin: 10mm
    }
}

.property-receipt-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000d9;
    backdrop-filter: blur(8px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 1;
    transition: opacity .4s ease;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow-y: hidden;
    padding: 0
}

.property-receipt-overlay.receipt {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000d9;
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 1;
    transition: opacity .4s ease;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow-y: hidden;
    padding: 0
}

.property-receipt-overlay.active {
    opacity: 1;
    display: flex
}

.property-receipt-container {
    width: 85%;
    max-width: 900px;
    background: linear-gradient(135deg, #fff 0%, #f8f8f8 100%);
    padding: 0;
    box-shadow: 0 10px 40px #0000004d;
    position: relative;
    overflow: hidden;
    color: #333;
    margin: 20px auto;
    height: 100%;
    overflow-y: auto;
    padding-right: 20px
}

.property-receipt-container.for-pdf-export {
    width: 210mm !important;
    max-width: 210mm !important;
    margin: 0 auto !important;
    box-shadow: none !important;
    border: none !important;
    overflow: visible !important;
    height: auto !important;
    padding: 0 !important;
    background: #fff !important
}

.property-zigzag-top, .property-zigzag-bottom {
    height: 12px;
    width: 100%;
    background: linear-gradient(135deg, #4a6bff 0%, #ff6b6b 100%);
    position: relative
}

.property-zigzag-top::before, .property-zigzag-bottom::before {
    content: " ";
    position: absolute;
    left: 0;
    right: 0;
    height: 12px;
    font-size: 18px;
    letter-spacing: 2px;
    overflow: hidden;
    text-align: center;
    line-height: 12px;
    color: #fff;
    text-shadow: 1px 1px 1px #0000004d
}

.property-zigzag-top::before {
    top: -6px
}

.property-zigzag-bottom::before {
    bottom: -6px
}

.property-receipt-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    background: linear-gradient(to right, #4a6bff, #6b4aff);
    color: #fff
}

.property-receipt-logo {
    display: flex;
    align-items: center;
    gap: 12px
}

.property-receipt-logo i {
    font-size: 28px
}

.property-receipt-logo h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600
}

.property-receipt-close-btn {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    transition: transform .2s ease;
    padding: 5px
}

.property-receipt-close-btn:hover {
    transform: scale(1.1)
}

.property-receipt-body {
    display: flex;
    padding: 25px 30px
}

.property-receipt-details {
    flex: 2;
    padding-right: 30px
}

.property-receipt-qr-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    border-left: 1px dashed #ccc;
    padding-left: 30px
}

.property-receipt-section {
    margin-bottom: 25px
}

.property-receipt-section h4 {
    margin: 0 0 15px;
    font-size: 1.1rem;
    color: #4a6bff;
    display: flex;
    align-items: center;
    gap: 8px
}

.property-receipt-section h4 i {
    font-size: .9em
}

.property-detail-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee
}

.property-detail-label {
    font-weight: 500;
    color: #666
}

.property-detail-value {
    font-weight: 600;
    text-align: right
}

.bill-breakdown-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px
}

.bill-breakdown-table th, .bill-breakdown-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid #eee
}

.bill-breakdown-table th {
    background-color: #f5f7ff;
    color: #4a6bff;
    font-weight: 600
}

.bill-breakdown-table tr:last-child td {
    border-bottom: none
}

.bill-breakdown-table .total-row {
    background-color: #f5f7ff
}

.transaction-history-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: .9rem
}

.transaction-history-table th, .transaction-history-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid #eee
}

.transaction-history-table th {
    background-color: #f5f7ff;
    color: #4a6bff;
    font-weight: 600
}

.transaction-history-table tr:last-child td {
    border-bottom: none
}

.property-qr-container {
    text-align: center;
    margin-bottom: 30px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center
}

.property-qr-container svg {
    max-width: 100%;
    height: auto
}

.property-qr-container canvas {
    border: 1px solid #eee;
    padding: 10px;
    background: #fff;
    box-shadow: 0 2px 10px #0000000d;
    max-width: 100%;
    height: auto
}

.property-qr-note {
    font-size: .8rem;
    color: #666;
    margin-top: 8px
}

.property-receipt-stamp {
    width: 100px;
    height: 100px;
    border: 4px solid #4a6bff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotate(15deg);
    margin-top: 20px
}

.property-stamp-inner {
    width: 80px;
    height: 80px;
    border: 4px solid #ff6b6b;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    color: #ff6b6b;
    font-size: 1.2rem
}

.property-receipt-footer {
    text-align: center;
    padding: 20px 30px;
    background: #f5f7ff;
    border-top: 1px solid #eee
}

.property-receipt-footer p {
    margin: 5px 0;
    color: #666;
    font-size: .9rem
}

.property-receipt-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 25px;
    flex-wrap: wrap
}

.property-receipt-btn {
    padding: 12px 25px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all .3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .95rem
}

.property-receipt-btn i {
    font-size: 1rem
}

.property-print-btn {
    background: #4a6bff;
    color: #fff
}

.property-print-btn:hover {
    background: #3a5bef;
    box-shadow: 0 4px 15px #4a6bff4d
}

.property-download-btn {
    background: #28a745;
    color: #fff
}

.property-download-btn:hover {
    background: #218838;
    box-shadow: 0 44px 15px #28a7454d
}

.property-share-btn {
    background: #6c757d;
    color: #fff
}

.property-share-btn:hover {
    background: #5a6268;
    box-shadow: 0 4px 15px #6c757d4d
}

.property-receipt-notes {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #ddd;
    text-align: left;
    font-size: .8rem;
    color: #666
}

.property-receipt-note {
    margin: 5px 0;
    line-height: 1.4
}

.property-receipt-note strong {
    color: #4a6bff
}

.status-verified {
    color: #28a745;
    font-weight: 700
}

.status-declined {
    color: #dc3545;
    font-weight: 700
}

.status-pending {
    color: #ffc107;
    font-weight: 700
}

.no-transactions {
    text-align: center;
    color: #6c757d;
    padding: 10px
}

.property-receipt-watermark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    transform: rotate(-45deg);
    font-size: 20px;
    color: #00000008;
    pointer-events: none;
    z-index: 1;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .5px;
    line-height: 1.2;
    text-align: center;
    overflow: hidden;
    padding: 10px;
    display: block
}

@media (max-width: 768px) {
    .property-receipt-overlay {
        align-items: flex-start;
        padding-top: 20px
    }

    .property-receipt-container {
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 0;
        height: calc(100% - 100px)
    }

    .property-receipt-body {
        flex-direction: column;
        padding: 20px
    }

    .property-receipt-details {
        padding-right: 0;
        margin-bottom: 25px
    }

    .property-receipt-qr-section {
        border-left: none;
        border-top: 1px dashed #ccc;
        padding-left: 0;
        padding-top: 25px;
        align-items: center
    }

    .property-receipt-actions {
        position: fixed;
        bottom: 20px;
        left: 0;
        right: 0;
        z-index: 2001;
        padding: 0 20px
    }

    .property-receipt-btn {
        flex: 1;
        max-width: 45%
    }

    .transaction-history-table {
        display: block;
        overflow-x: auto
    }

    .property-receipt-watermark {
        font-size: .7em;
        line-height: 1.1
    }
}

@media (max-width: 480px) {
    .property-receipt-header {
        padding: 15px 20px
    }

    .property-receipt-logo h3 {
        font-size: 1.2rem
    }

    .property-receipt-body {
        padding: 15px
    }

    .property-detail-row {
        flex-direction: column;
        gap: 4px;
        padding-bottom: 8px
    }

    .property-detail-value {
        text-align: left
    }

    .property-receipt-actions {
        flex-direction: row;
        gap: 10px
    }

    .property-receipt-btn {
        max-width: 100%;
        padding: 12px 15px;
        font-size: .85rem
    }

    .property-receipt-watermark {
        font-size: .6em;
        line-height: 1
    }
}

@media print {
    body {
        margin: 0 !important;
        padding: 0 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important
    }

    .property-receipt-overlay {
        position: static !important;
        background-color: transparent !important;
        backdrop-filter: none !important;
        display: block !important;
        opacity: 1 !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        height: auto !important;
        max-width: none !important
    }

    .property-receipt-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        box-shadow: none !important;
        border: none !important;
        overflow: visible !important;
        height: auto !important;
        padding: 0 !important
    }

    .property-receipt-actions, .property-receipt-close-btn {
        display: none !important
    }

    .property-receipt-header {
        background: linear-gradient(to right, #4a6bff, #6b4aff) !important;
        color: #fff !important
    }

    .bill-breakdown-table th, .bill-breakdown-table .total-row {
        background-color: #f5f7ff !important;
        color: #4a6bff !important
    }

    .property-receipt-stamp {
        border-color: #4a6bff !important
    }

    .property-stamp-inner {
        border-color: #ff6b6b !important;
        color: #ff6b6b !important
    }

    .property-receipt-section, .transaction-history-table {
        page-break-inside: avoid
    }

    .transaction-history-table tbody tr, .bill-breakdown-table tbody tr {
        page-break-inside: avoid
    }

    @page {
        size: A4;
        margin: 10mm
    }
}

.booking-receipt-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000d9;
    backdrop-filter: blur(8px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 1;
    transition: opacity .4s ease;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow-y: hidden;
    padding: 0
}

.booking-receipt-overlay.receipt {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000d9;
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 1;
    transition: opacity .4s ease;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow-y: hidden;
    padding: 0
}

.booking-receipt-overlay.active {
    opacity: 1;
    display: flex
}

.booking-receipt-container {
    width: 85%;
    max-width: 900px;
    background: linear-gradient(135deg, #fff 0%, #f8f8f8 100%);
    padding: 0;
    box-shadow: 0 10px 40px #0000004d;
    position: relative;
    overflow: hidden;
    color: #333;
    margin: 20px auto;
    height: 100%;
    overflow-y: auto;
    padding-right: 20px
}

.booking-receipt-container.for-pdf-export {
    width: 210mm !important;
    max-width: 210mm !important;
    margin: 0 auto !important;
    box-shadow: none !important;
    border: none !important;
    overflow: visible !important;
    height: auto !important;
    padding: 0 !important;
    background: #fff !important
}

.booking-zigzag-top, .booking-zigzag-bottom {
    height: 12px;
    width: 100%;
    background: linear-gradient(135deg, #4a6bff 0%, #ff6b6b 100%);
    position: relative
}

.booking-zigzag-top::before, .booking-zigzag-bottom::before {
    content: " ";
    position: absolute;
    left: 0;
    right: 0;
    height: 12px;
    font-size: 18px;
    letter-spacing: 2px;
    overflow: hidden;
    text-align: center;
    line-height: 12px;
    color: #fff;
    text-shadow: 1px 1px 1px #0000004d
}

.booking-zigzag-top::before {
    top: -6px
}

.booking-zigzag-bottom::before {
    bottom: -6px
}

.booking-receipt-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    background: linear-gradient(to right, #4a6bff, #6b4aff);
    color: #fff
}

.booking-receipt-logo {
    display: flex;
    align-items: center;
    gap: 12px
}

.booking-receipt-logo i {
    font-size: 28px
}

.booking-receipt-logo h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600
}

.booking-receipt-close-btn {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    transition: transform .2s ease;
    padding: 5px
}

.booking-receipt-close-btn:hover {
    transform: scale(1.1)
}

.booking-receipt-body {
    display: flex;
    padding: 25px 30px
}

.booking-receipt-details {
    flex: 2;
    padding-right: 30px
}

.booking-receipt-qr-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    border-left: 1px dashed #ccc;
    padding-left: 30px
}

.booking-receipt-section {
    margin-bottom: 25px
}

.booking-receipt-section h4 {
    margin: 0 0 15px;
    font-size: 1.1rem;
    color: #4a6bff;
    display: flex;
    align-items: center;
    gap: 8px
}

.booking-receipt-section h4 i {
    font-size: .9em
}

.booking-detail-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee
}

.booking-detail-label {
    font-weight: 500;
    color: #666
}

.booking-detail-value {
    font-weight: 600;
    text-align: right
}

.booking-bill-breakdown-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px
}

.booking-bill-breakdown-table th, .booking-bill-breakdown-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid #eee
}

.booking-bill-breakdown-table th {
    background-color: #f5f7ff;
    color: #4a6bff;
    font-weight: 600
}

.booking-bill-breakdown-table tr:last-child td {
    border-bottom: none
}

.booking-bill-breakdown-table .total-row {
    background-color: #f5f7ff
}

.booking-transaction-history-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: .9rem
}

.booking-transaction-history-table th, .booking-transaction-history-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid #eee
}

.booking-transaction-history-table th {
    background-color: #f5f7ff;
    color: #4a6bff;
    font-weight: 600
}

.booking-transaction-history-table tr:last-child td {
    border-bottom: none
}

.booking-qr-container {
    text-align: center;
    margin-bottom: 30px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center
}

.booking-qr-container svg {
    max-width: 100%;
    height: auto
}

.booking-qr-container canvas {
    border: 1px solid #eee;
    padding: 10px;
    background: #fff;
    box-shadow: 0 2px 10px #0000000d;
    max-width: 100%;
    height: auto
}

.booking-qr-note {
    font-size: .8rem;
    color: #666;
    margin-top: 8px
}

.booking-receipt-stamp {
    width: 100px;
    height: 100px;
    border: 4px solid #4a6bff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotate(15deg);
    margin-top: 20px
}

.booking-stamp-inner {
    width: 80px;
    height: 80px;
    border: 4px solid #ff6b6b;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    color: #ff6b6b;
    font-size: 1.2rem
}

.booking-receipt-footer {
    text-align: center;
    padding: 20px 30px;
    background: #f5f7ff;
    border-top: 1px solid #eee
}

.booking-receipt-footer p {
    margin: 5px 0;
    color: #666;
    font-size: .9rem
}

.booking-receipt-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 25px;
    flex-wrap: wrap
}

.booking-receipt-btn {
    padding: 12px 25px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all .3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .95rem
}

.booking-receipt-btn i {
    font-size: 1rem
}

.booking-print-btn {
    background: #4a6bff;
    color: #fff
}

.booking-print-btn:hover {
    background: #3a5bef;
    box-shadow: 0 4px 15px #4a6bff4d
}

.booking-download-btn {
    background: #28a745;
    color: #fff
}

.booking-download-btn:hover {
    background: #218838;
    box-shadow: 0 44px 15px #28a7454d
}

.booking-share-btn {
    background: #6c757d;
    color: #fff
}

.booking-share-btn:hover {
    background: #5a6268;
    box-shadow: 0 4px 15px #6c757d4d
}

.booking-receipt-notes {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #ddd;
    text-align: left;
    font-size: .8rem;
    color: #666
}

.booking-receipt-note {
    margin: 5px 0;
    line-height: 1.4
}

.booking-receipt-note strong {
    color: #4a6bff
}

.booking-status-confirmed {
    color: #28a745;
    font-weight: 700
}

.booking-status-pending {
    color: #ffc107;
    font-weight: 700
}

.booking-status-cancelled {
    color: #dc3545;
    font-weight: 700
}

.no-bookings {
    text-align: center;
    color: #6c757d;
    padding: 10px
}

.booking-receipt-watermark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    transform: rotate(-45deg);
    font-size: 20px;
    color: #00000008;
    pointer-events: none;
    z-index: 1;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .5px;
    line-height: 1.2;
    text-align: center;
    overflow: hidden;
    padding: 10px;
    display: block
}

@media (max-width: 768px) {
    .booking-receipt-overlay {
        align-items: flex-start;
        padding-top: 20px
    }

    .booking-receipt-container {
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 0;
        height: calc(100% - 100px)
    }

    .booking-receipt-body {
        flex-direction: column;
        padding: 20px
    }

    .booking-receipt-details {
        padding-right: 0;
        margin-bottom: 25px
    }

    .booking-receipt-qr-section {
        border-left: none;
        border-top: 1px dashed #ccc;
        padding-left: 0;
        padding-top: 25px;
        align-items: center
    }

    .booking-receipt-actions {
        position: fixed;
        bottom: 20px;
        left: 0;
        right: 0;
        z-index: 2001;
        padding: 0 20px
    }

    .booking-receipt-btn {
        flex: 1;
        max-width: 45%
    }

    .booking-transaction-history-table {
        display: block;
        overflow-x: auto
    }

    .booking-receipt-watermark {
        font-size: .7em;
        line-height: 1.1
    }
}

@media (max-width: 480px) {
    .booking-receipt-header {
        padding: 15px 20px
    }

    .booking-receipt-logo h3 {
        font-size: 1.2rem
    }

    .booking-receipt-body {
        padding: 15px
    }

    .booking-detail-row {
        flex-direction: column;
        gap: 4px;
        padding-bottom: 8px
    }

    .booking-detail-value {
        text-align: left
    }

    .booking-receipt-actions {
        flex-direction: row;
        gap: 10px
    }

    .booking-receipt-btn {
        max-width: 100%;
        padding: 12px 15px;
        font-size: .85rem
    }

    .booking-receipt-watermark {
        font-size: .6em;
        line-height: 1
    }
}

@media print {
    body {
        margin: 0 !important;
        padding: 0 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important
    }

    .booking-receipt-overlay {
        position: static !important;
        background-color: transparent !important;
        backdrop-filter: none !important;
        display: block !important;
        opacity: 1 !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        height: auto !important;
        max-width: none !important
    }

    .booking-receipt-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        box-shadow: none !important;
        border: none !important;
        overflow: visible !important;
        height: auto !important;
        padding: 0 !important
    }

    .booking-receipt-actions, .booking-receipt-close-btn {
        display: none !important
    }

    .booking-receipt-header {
        background: linear-gradient(to right, #4a6bff, #6b4aff) !important;
        color: #fff !important
    }

    .booking-bill-breakdown-table th, .booking-bill-breakdown-table .total-row {
        background-color: #f5f7ff !important;
        color: #4a6bff !important
    }

    .booking-receipt-stamp {
        border-color: #4a6bff !important
    }

    .booking-stamp-inner {
        border-color: #ff6b6b !important;
        color: #ff6b6b !important
    }

    .booking-receipt-section, .booking-transaction-history-table {
        page-break-inside: avoid
    }

    .booking-transaction-history-table tbody tr, .booking-bill-breakdown-table tbody tr {
        page-break-inside: avoid
    }

    @page {
        size: A4;
        margin: 10mm
    }
}

.payment-analytics-container {
    width: 100%;
    padding: 25px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px #00000014;
    margin-bottom: 30px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}

.payment-analytics-header {
    margin-bottom: 30px
}

.payment-analytics-title {
    color: #2E3A87;
    font-size: 24px;
    margin: 0 0 5px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700
}

.payment-analytics-subtitle {
    color: #6c757d;
    font-size: 14px;
    margin: 0;
    padding-left: 32px
}

.payment-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 30px
}

.payment-card {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 12px #0000000d;
    display: flex;
    align-items: flex-start;
    transition: transform .3s ease, box-shadow .3s ease;
    position: relative;
    overflow: hidden
}

.payment-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px
}

.payment-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px #0000001a
}

.card-total-revenue::before {
    background: linear-gradient(90deg, #4e73df, #7a9eff)
}

.card-payment-collection::before {
    background: linear-gradient(90deg, #1cc88a, #3fe0b0)
}

.card-outstanding-balance::before {
    background: linear-gradient(90deg, #36b9cc, #5fd3e5)
}

.card-overdue-invoices::before {
    background: linear-gradient(90deg, #f6c23e, #ffd56a)
}

.card-water-usage::before {
    background: linear-gradient(90deg, #e74a3b, #ff6b5b)
}

.card-payment-methods::before {
    background: linear-gradient(90deg, #6f42c1, #9b6bff)
}

.payment-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-size: 20px;
    color: #fff;
    flex-shrink: 0
}

.card-total-revenue .payment-card-icon {
    background: linear-gradient(135deg, #4e73df, #7a9eff)
}

.card-payment-collection .payment-card-icon {
    background: linear-gradient(135deg, #1cc88a, #3fe0b0)
}

.card-outstanding-balance .payment-card-icon {
    background: linear-gradient(135deg, #36b9cc, #5fd3e5)
}

.card-overdue-invoices .payment-card-icon {
    background: linear-gradient(135deg, #f6c23e, #ffd56a)
}

.card-water-usage .payment-card-icon {
    background: linear-gradient(135deg, #e74a3b, #ff6b5b)
}

.card-payment-methods .payment-card-icon {
    background: linear-gradient(135deg, #6f42c1, #9b6bff)
}

.payment-card-content {
    flex: 1
}

.payment-card-title {
    font-size: 14px;
    color: #6c757d;
    margin-bottom: 8px;
    font-weight: 600
}

.payment-card-value {
    font-size: 26px;
    font-weight: 700;
    color: #2E3A87;
    margin: 0 0 5px;
    line-height: 1
}

.payment-card-change {
    font-size: 12px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 4px
}

.payment-card-change.positive {
    color: #1cc88a
}

.payment-card-change.negative {
    color: #e74a3b
}

.payment-card-change.neutral {
    color: #6c757d
}

.payment-charts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px
}

@media (max-width: 768px) {
    .payment-charts-grid {
        grid-template-columns: 1fr
    }
}

.payment-chart-container {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 12px #0000000d
}

.payment-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px
}

.payment-chart-title {
    font-size: 16px;
    color: #495057;
    margin: 0;
    font-weight: 600
}

.payment-chart-actions {
    display: flex;
    gap: 8px
}

.payment-chart-action-btn {
    background: #f8f9fa;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    cursor: pointer;
    transition: all .2s ease
}

.payment-chart-action-btn:hover {
    background: #e9ecef;
    color: #2E3A87
}

.payment-chart-wrapper {
    position: relative;
    height: 280px;
    width: 100%
}

.payment-chart-footer {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end
}

.payment-chart-note {
    font-size: 12px;
    color: #6c757d;
    display: flex;
    align-items: center;
    gap: 5px
}

.payment-breakdown-container {
    width: 100%;
    overflow-x: auto;
    margin-top: 20px;
    -webkit-overflow-scrolling: touch
}

.payment-breakdown-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 800px
}

.payment-breakdown-table th {
    background-color: #f8f9fa;
    color: #495057;
    font-weight: 600;
    padding: 12px 15px;
    text-align: left;
    border-bottom: 2px solid #e9ecef
}

.payment-breakdown-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #e9ecef;
    color: #6c757d
}

.payment-breakdown-table tr:last-child td {
    border-bottom: none
}

.payment-breakdown-table .positive {
    color: #1cc88a
}

.payment-breakdown-table .negative {
    color: #e74a3b
}

.payment-breakdown-table .highlight {
    background-color: #f8f9fa;
    font-weight: 600
}

.payment-period-selector {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    align-items: center
}

.payment-period-btn {
    padding: 8px 15px;
    border-radius: 6px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    color: #495057;
    cursor: pointer;
    transition: all .2s ease
}

.payment-period-btn:hover {
    background: #e9ecef
}

.payment-period-btn.active {
    background: #2E3A87;
    color: #fff;
    border-color: #2E3A87
}

.payment-custom-date {
    display: flex;
    gap: 10px;
    align-items: center
}

.payment-custom-date input {
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #e9ecef
}

.landlord-analytics-container {
    width: 100%;
    padding: 25px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px #00000014;
    margin-bottom: 30px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}

.analytics-header {
    margin-bottom: 30px
}

.analytics-section-title {
    color: #2E3A87;
    font-size: 24px;
    margin: 0 0 5px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700
}

.analytics-subtitle {
    color: #6c757d;
    font-size: 14px;
    margin: 0;
    padding-left: 32px
}

.section-subtitle {
    color: #495057;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 15px;
    display: flex;
    align-items: center;
    gap: 8px
}

.analytics-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 30px
}

.analytics-card {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 12px #0000000d;
    display: flex;
    align-items: flex-start;
    transition: transform .3s ease, box-shadow .3s ease;
    position: relative;
    overflow: hidden
}

.analytics-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px
}

.analytics-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px #0000001a
}

.card-total-properties::before {
    background: linear-gradient(90deg, #4e73df, #7a9eff)
}

.card-occupancy-rate::before {
    background: linear-gradient(90deg, #1cc88a, #3fe0b0)
}

.card-monthly-revenue::before {
    background: linear-gradient(90deg, #36b9cc, #5fd3e5)
}

.card-pending-bookings::before {
    background: linear-gradient(90deg, #f6c23e, #ffd56a)
}

.analytics-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-size: 20px;
    color: #fff;
    flex-shrink: 0
}

.card-total-properties .analytics-card-icon {
    background: linear-gradient(135deg, #4e73df, #7a9eff)
}

.card-occupancy-rate .analytics-card-icon {
    background: linear-gradient(135deg, #1cc88a, #3fe0b0)
}

.card-monthly-revenue .analytics-card-icon {
    background: linear-gradient(135deg, #36b9cc, #5fd3e5)
}

.card-pending-bookings .analytics-card-icon {
    background: linear-gradient(135deg, #f6c23e, #ffd56a)
}

.analytics-card-content {
    flex: 1
}

.analytics-card-title {
    font-size: 14px;
    color: #6c757d;
    margin-bottom: 8px;
    font-weight: 600
}

.analytics-card-value {
    font-size: 26px;
    font-weight: 700;
    color: #2E3A87;
    margin: 0 0 5px;
    line-height: 1
}

.analytics-card-change {
    font-size: 12px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 4px
}

.analytics-card-change.positive {
    color: #1cc88a
}

.analytics-card-change.negative {
    color: #e74a3b
}

.analytics-card-change.neutral {
    color: #6c757d
}

.analytics-charts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px
}

@media (max-width: 768px) {
    .analytics-charts-grid {
        grid-template-columns: 1fr
    }
}

.analytics-chart-container {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 12px #0000000d
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px
}

.chart-title {
    font-size: 16px;
    color: #495057;
    margin: 0;
    font-weight: 600
}

.chart-actions {
    display: flex;
    gap: 8px
}

.chart-action-btn {
    background: #f8f9fa;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    cursor: pointer;
    transition: all .2s ease
}

.chart-action-btn:hover {
    background: #e9ecef;
    color: #2E3A87
}

.chart-wrapper {
    position: relative;
    height: 280px;
    width: 100%
}

.chart-footer {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end
}

.chart-note {
    font-size: 12px;
    color: #6c757d;
    display: flex;
    align-items: center;
    gap: 5px
}

.analytistylenvas {
    width: 100% !important;
    height: 100% !important
}

.analytics-metrics-container {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 12px #0000000d
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px
}

.metric-box {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    transition: all .3s ease;
    border-top: 4px solid;
    box-shadow: 0 2px 8px #0000000d;
    position: relative
}

.metric-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px #0000001a
}

.metric-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    color: #fff;
    font-size: 16px
}

.metric-avg-occupancy {
    border-color: #4e73df
}

.metric-avg-occupancy .metric-icon {
    background: linear-gradient(135deg, #4e73df, #7a9eff)
}

.metric-revenue-per-unit {
    border-color: #1cc88a
}

.metric-revenue-per-unit .metric-icon {
    background: linear-gradient(135deg, #1cc88a, #3fe0b0)
}

.metric-vacancy-rate {
    border-color: #f6c23e
}

.metric-vacancy-rate .metric-icon {
    background: linear-gradient(135deg, #f6c23e, #ffd56a)
}

.metric-top-property {
    border-color: #e74a3b
}

.metric-top-property .metric-icon {
    background: linear-gradient(135deg, #e74a3b, #ff6b5b)
}

.metric-label {
    font-size: 14px;
    color: #6c757d;
    margin-bottom: 8px;
    font-weight: 600
}

.metric-value {
    font-size: 20px;
    font-weight: 700;
    color: #2E3A87;
    margin-bottom: 8px
}

.metric-comparison {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 12px;
    background: #f8f9fa
}

.metric-comparison.positive {
    color: #1cc88a;
    background: #1cc88a1a
}

.metric-comparison.negative {
    color: #e74a3b;
    background: #e74a3b1a
}

.property-analytics-container {
    width: 100%;
    padding: 25px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px #00000014;
    margin-bottom: 30px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}

.property-analytics-header {
    margin-bottom: 30px
}

.property-analytics-title {
    color: #2E3A87;
    font-size: 24px;
    margin: 0 0 5px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700
}

.property-analytics-subtitle {
    color: #6c757d;
    font-size: 14px;
    margin: 0;
    padding-left: 32px
}

.property-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 30px
}

.property-card {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 12px #0000000d;
    display: flex;
    align-items: flex-start;
    transition: transform .3s ease, box-shadow .3s ease;
    position: relative;
    overflow: hidden
}

.property-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px
}

.property-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px #0000001a
}

.card-occupancy-rate::before {
    background: linear-gradient(90deg, #4e73df, #7a9eff)
}

.card-total-revenue::before {
    background: linear-gradient(90deg, #1cc88a, #3fe0b0)
}

.card-vacancy-rate::before {
    background: linear-gradient(90deg, #36b9cc, #5fd3e5)
}

.card-rent-duration::before {
    background: linear-gradient(90deg, #f6c23e, #ffd56a)
}

.card-maintenance::before {
    background: linear-gradient(90deg, #e74a3b, #ff6b5b)
}

.card-satisfaction::before {
    background: linear-gradient(90deg, #6f42c1, #9b6bff)
}

.property-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-size: 20px;
    color: #fff;
    flex-shrink: 0
}

.card-occupancy-rate .property-card-icon {
    background: linear-gradient(135deg, #4e73df, #7a9eff)
}

.card-total-revenue .property-card-icon {
    background: linear-gradient(135deg, #1cc88a, #3fe0b0)
}

.card-vacancy-rate .property-card-icon {
    background: linear-gradient(135deg, #36b9cc, #5fd3e5)
}

.card-rent-duration .property-card-icon {
    background: linear-gradient(135deg, #f6c23e, #ffd56a)
}

.card-maintenance .property-card-icon {
    background: linear-gradient(135deg, #e74a3b, #ff6b5b)
}

.card-satisfaction .property-card-icon {
    background: linear-gradient(135deg, #6f42c1, #9b6bff)
}

.property-card-content {
    flex: 1
}

.property-card-title {
    font-size: 14px;
    color: #6c757d;
    margin-bottom: 8px;
    font-weight: 600
}

.property-card-value {
    font-size: 26px;
    font-weight: 700;
    color: #2E3A87;
    margin: 0 0 5px;
    line-height: 1
}

.property-card-change {
    font-size: 12px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 4px
}

.property-card-change.positive {
    color: #1cc88a
}

.property-card-change.negative {
    color: #e74a3b
}

.property-card-change.neutral {
    color: #6c757d
}

.property-charts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px
}

@media (max-width: 768px) {
    .property-charts-grid {
        grid-template-columns: 1fr
    }
}

.property-chart-container {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 12px #0000000d
}

.property-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px
}

.property-chart-title {
    font-size: 16px;
    color: #495057;
    margin: 0;
    font-weight: 600
}

.property-chart-actions {
    display: flex;
    gap: 8px
}

.property-chart-action-btn {
    background: #f8f9fa;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    cursor: pointer;
    transition: all .2s ease
}

.property-chart-action-btn:hover {
    background: #e9ecef;
    color: #2E3A87
}

.property-chart-wrapper {
    position: relative;
    height: 280px;
    width: 100%
}

.property-chart-footer {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end
}

.property-chart-note {
    font-size: 12px;
    color: #6c757d;
    display: flex;
    align-items: center;
    gap: 5px
}

.property-breakdown-container {
    width: 100%;
    overflow-x: auto;
    margin-top: 20px;
    -webkit-overflow-scrolling: touch
}

.property-breakdown-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px
}

.property-breakdown-table th {
    background-color: #f8f9fa;
    color: #495057;
    font-weight: 600;
    padding: 12px 15px;
    text-align: left;
    border-bottom: 2px solid #e9ecef
}

.property-breakdown-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #e9ecef;
    color: #6c757d
}

.property-breakdown-table tr:last-child td {
    border-bottom: none
}

.property-breakdown-table .positive {
    color: #1cc88a
}

.property-breakdown-table .negative {
    color: #e74a3b
}

.property-breakdown-table .neutral {
    color: #6c757d
}

.property-breakdown-table .highlight {
    background-color: #f8f9fa;
    font-weight: 600
}

.property-period-selector {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    align-items: center;
    flex-wrap: wrap
}

.property-period-btn {
    padding: 8px 15px;
    border-radius: 6px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    color: #495057;
    cursor: pointer;
    transition: all .2s ease;
    font-size: 14px
}

.property-period-btn:hover {
    background: #e9ecef
}

.property-period-btn.active {
    background: #2E3A87;
    color: #fff;
    border-color: #2E3A87
}

.property-custom-date {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap
}

.property-custom-date input {
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    font-size: 14px
}

.property-custom-date span {
    color: #6c757d;
    font-size: 14px
}

#apply-property-date {
    padding: 8px 15px;
    background: #2E3A87;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background .2s ease
}

#apply-property-date:hover {
    background: #1a2357
}

.filtered-products-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000b3;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000
}

.filtered-products-content {
    background-color: #fff;
    width: 90%;
    max-width: 1200px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 8px;
    padding: 20px;
    position: relative;
    animation: slideIn .3s ease-out
}

.filtered-results-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 15px;
    padding: 20px 0
}

.filtered-results-container .dash_cont_min {
    border: 1px solid #eee;
    border-radius: 5px;
    height: 320px;
    width: calc(25% - 10px);
    padding: 5px 10px;
    box-shadow: #64646f33 0 7px 29px 0;
    margin: 0
}

.filtered-results-container .dash_cont_min button {
    width: 100%;
    background-color: var(--neutral-white);
    text-align: left
}

.filtered-results-container .dash_cont_min .img {
    width: 100%;
    height: 150px
}

.filtered-results-container .dash_cont_min .img img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.filtered-results-container .dash_cont_min button h5 {
    font-size: 17px;
    font-weight: 550;
    color: var(--accent-orange);
    margin: 10px 0
}

.filtered-results-container .dash_cont_min button .desc {
    font-size: 15px;
    font-weight: 500;
    color: var(--neutral-gray);
    margin: 0 0 10px
}

.filtered-results-container .dash_cont_min .enquiry {
    width: 100%;
    padding: 10px;
    margin: 0 0 10px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--neutral-white);
    background-color: var(--accent-orange);
    border-radius: 5px;
    cursor: pointer;
    transition: .5s ease-out;
    text-transform: capitalize
}

.filtered-results-container .dash_cont_min .enquiry:hover {
    background: var(--accent-dark-orange)
}

@media (max-width: 768px) {
    .filtered-results-container .dash_cont_min {
        width: 100%
    }
}

section.pdf {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

.pdf_cont {
    margin: 50px 0;
    width: 900px;
    height: 100%;
    padding: 50px 100px;
    background: var(--neutral-light-gray)
}

.pdf_cont .pdf_first_cont {
    width: 100%
}

.pdf_fir_cont_flex {
    display: flex;
    justify-content: space-between
}

.pdf_fir_cont_flex .pdf_fir_cont_flex_fir .bi {
    font-size: 20px;
    font-weight: 600;
    color: var(--neutral-gray);
    text-transform: capitalize
}

.pdf_fir_cont_flex .pdf_fir_cont_flex_fir .status {
    border: 1px solid var(--neutral-gray);
    border-radius: 5px;
    padding: 3px 5px;
    margin: 0 10px;
    font-size: 13px;
    font-weight: 650;
    color: var(--status-green)
}

.pdf_fir_cont_flex_sec .bookings .bookings_date {
    font-size: 16px;
    font-weight: 600px;
    color: var(--neutral-gray)
}

.pdf_sec_cont {
    margin: 50px 0
}

.pdf_sec_cont .pdf_sec_cont_flex {
    display: flex;
    justify-content: space-between
}

.pdf_sec_cont .pdf_sec_cont_flex .pdf_sec_cont_flex_fir h4 {
    font-size: 17px;
    color: var(--black);
    font-weight: 650;
    margin: 10px 0
}

.pdf_sec_cont .pdf_sec_cont_flex .pdf_sec_cont_flex_fir .pdf_sec_cont_flex_fir_li_flex {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    color: var(--neutral-gray);
    font-weight: 500;
    margin: 10px 0
}

.pdf_sec_cont .pdf_sec_cont_flex .pdf_sec_cont_flex_fir .pdf_sec_cont_flex_fir_li_flex .pdf_sec_cont_flex_fir_li_flex_title {
    margin: 0 10px
}

.pdf_sec_cont .pdf_sec_cont_flex .pdf_sec_cont_flex_sec h4 {
    font-size: 17px;
    color: var(--black);
    font-weight: 650;
    margin: 10px 0
}

.pdf_sec_cont .pdf_sec_cont_flex .pdf_sec_cont_flex_sec .pdf_sec_cont_flex_sec_li_flex {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    color: var(--neutral-gray);
    font-weight: 500;
    margin: 10px 0
}

.pdf_sec_cont .pdf_sec_cont_flex .pdf_sec_cont_flex_sec .pdf_sec_cont_flex_sec_li_flex .pdf_sec_cont_flex_sec_li_flex_title {
    margin: 0 10px
}

.pdf_sec_cont_flex_sec .qr_code .img {
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: flex-end
}

.pdf_sec_cont_flex_sec .qr_code .img img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.pdf_thir_cont {
    margin: 20px 0
}

.copyright_pdf {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    font-style: italic
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@media (max-width: 768px) {
    .property-header {
        flex-direction: column
    }

    .action-buttons {
        flex-direction: column
    }

    .btn-primary, .btn-secondary {
        width: 100%
    }
}

@media(max-width: 767px) {
    .admin_body {
        width: 100%;
        height: 100%
    }

    .fist_body_cont {
        width: 100%;
        height: 100%;
        padding: 20px 0;
        background: var(--light-gray);
        position: relative
    }

    .fist_body_cont .fist_body_cont_flex {
        width: 100%;
        height: 100%;
        display: flex;
        position: relative
    }

    .fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_one {
        position: fixed;
        width: 250px;
        height: 100%;
        background: var(--neutral-gray);
        padding: 30px 0;
        z-index: 1000;
        left: -250px;
        transition: left .3s ease
    }

    .fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_one.active {
        left: 0;
        width: 350px
    }

    .fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_one .fist_body_cont_flex_one_sub a {
        font-size: 13px
    }

    .fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two {
        width: 100%;
        height: 100%;
        margin-left: 0;
        transition: margin-left .3s ease
    }

    .fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_one.active+.fist_body_cont_flex_two {
        margin-left: 350px
    }

    .fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .fist_body_cont_flex_two_cont {
        width: 100%;
        height: 100%;
        padding: 0 20px
    }

    .fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .profile_bg_dp .menu_icon {
        display: block;
        cursor: pointer
    }

    .close_icon {
        display: none;
        cursor: pointer
    }

    .fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .profile_bg_dp {
        width: 100%;
        height: 200px
    }

    .fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .profile_bg_dp img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
        bottom: 0;
        left: 0
    }

    .fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .profile_bg_dp .dpp {
        width: 80px;
        height: 80px;
        position: absolute;
        bottom: -30px;
        left: 10px
    }

    .fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .profile_bg_dp .dpp .fa_image {
        position: absolute;
        right: -12px;
        bottom: 36%;
        transform: translateY(50%);
        background: transparent;
        padding: -5px 0;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #fff;
        width: 30px;
        height: 10px;
        box-sizing: border-box;
    }

    .fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .profile_bg_dp .dpp .fa_image .fa-camera {
        font-size: 30px;
        font-weight: 700;
        color: #fff;
        display: flex;
        /* Ensures icon is centered */
        align-items: center;
        justify-content: center;
        color: var(--secondary-dark-green);
        
    }

    .fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .profile_bg_dp .usernam_edit {
        bottom: 0;
        right: 0;
        position: absolute;
        padding: 20px 10px;
        font-size: 18px;
        color: var(--neutral-dark-gray);
        font-weight: 650;
        text-transform: capitalize
    }

    .fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .profile_bg_dp .menu_icon {
        top: 0;
        left: 0;
        position: absolute;
        padding: 20px 10px;
        font-size: 35px;
        color: var(--neutral-dark-gray);
        font-weight: 650;
        display: block
    }

    .close_icon {
        top: 0;
        left: 0;
        position: absolute;
        padding: 20px 10px;
        font-size: 25px;
        color: var(--neutral-dark-gray);
        font-weight: 650;
        display: none
    }

    .fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .profile_bg_dp .butt_edi_hom {
        display: flex;
        justify-content: flex-end;
        align-items: center
    }

    .fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .profile_bg_dp .butt_edi_hom .edit {
        padding: 10px 5px;
        color: var(--neutral-white);
        background: var(--neutral-gray);
        text-decoration: none;
        text-transform: capitalize;
        border-radius: 5px;
        margin: 5px 3px 0;
        font-size: 10px;
        font-weight: 650;
        transition: .5s ease-out
    }

    .fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .profile_bg_dp .butt_edi_hom .edit:hover {
        background: var(--neutral-dark-gray)
    }

    .fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .profile_bg_dp .butt_edi_hom .upload {
        padding: 10px 5px;
        color: var(--neutral-white);
        background: #2E3A87;
        text-transform: capitalize;
        border-radius: 5px;
        margin: 5px 3px 0;
        font-size: 10px;
        font-weight: 650;
        transition: .5s ease-out
    }

    .fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .profile_bg_dp .butt_edi_hom .upload:hover {
        background: var(--neutral-dark-gray)
    }

    .fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .profile_bg_dp .butt_edi_hom .home {
        padding: 10px 5px;
        color: var(--neutral-white);
        background: var(--accent-orange);
        text-transform: capitalize;
        border-radius: 5px;
        margin: 5px 0 0 3px;
        font-size: 10px;
        font-weight: 650;
        transition: .5s ease-out
    }

    .fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .profile_bg_dp .butt_edi_hom .home:hover {
        background: var(--accent-dark-orange)
    }

    .fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .Bookings_cont.form {
        border: 1px solid var(--neutral-gray);
        border-radius: 10px;
        margin: 10px 0;
        max-height: max-content
    }

    .fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .Bookings_cont {
        border: 1px solid var(--neutral-gray);
        border-radius: 10px;
        margin: 10px 0
    }

    .fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .Bookings_cont h2 {
        background-color: var(--neutral-gray);
        color: var(--neutral-white);
        padding: 10px 20px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        font-weight: 600;
        font-size: 15px;
        width: 100%
    }

    .fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .Bookings_cont .details_personal {
        padding: 0 10px
    }

    .fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .Bookings_cont .details_personal .det_flex {
        display: flex;
        justify-content: flex-start;
        padding: 5px 0
    }

    .fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .Bookings_cont .details_personal .det_flex .tag {
        font-size: 15px;
        color: var(--neutral-dark-gray);
        font-weight: 650;
        padding: 0 10px 0 0
    }

    .fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .Bookings_cont .details_personal .det_flex .respon {
        font-size: 15px;
        font-weight: 600;
        color: var(--neutral-gray);
        text-transform: none
    }

    .fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .Bookings_cont table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 20px;
        overflow-x: auto;
        overflow-x: auto;
        max-height: 350px;
        overflow-x: auto
    }

    .fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .Bookings_cont th, td {
        padding: 10px;
        text-align: left;
        border-bottom: 1px solid #ddd
    }

    .fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .Bookings_cont th {
        background-color: #2E3A87;
        color: #FFF;
        font-size: 13px
    }

    .fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .Bookings_cont td {
        font-size: 13px
    }

    .fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .Bookings_cont tbody tr:nth-child(odd) {
        background-color: #F5F5F5
    }

    .fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .Bookings_cont tbody tr:nth-child(even) {
        background-color: #FFF
    }

    .fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .Bookings_cont .status-paid {
        color: #4CAF50;
        font-weight: 700
    }

    .fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .Bookings_cont .status-overdue {
        color: #FF5252;
        font-weight: 700
    }

    .fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .Bookings_cont .status-pending {
        color: #FF6F61;
        font-weight: 700
    }

    .fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .Bookings_cont tbody tr:hover {
        background-color: #E0E0E0;
        transition: background-color .3s ease
    }

    .fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .Bookings_cont .support_cont_form {
        display: block;
        width: 100%;
        justify-content: flex-start
    }

    .fist_body_cont .fist_body_cont_flex .fist_body_cont_flex_two .Bookings_cont .support_cont_form .support_cont_form_flex {
        width: 100%
    }

    .support_input_cont {
        width: 95%;
        margin: 10px
    }

    .support_input_cont input {
        width: 100%;
        padding: 14px 12px;
        border: 1px solid gray;
        border-radius: 8px;
        outline: none;
        font-size: 13px;
        transition: border-color .3s ease;
        color: var(--neutral-dark-gray)
    }

    .support_input_cont input:focus {
        border-color: var(--neutral-dark-gray)
    }

    .support_input_cont select {
        font-size: 13px
    }

    .support_input_cont select:focus {
        border-color: var(--neutral-dark-gray)
    }

    .support_input_cont textarea {
        font-size: 13px
    }

    .support_input_cont .eye-icon {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        color: var(--neutral-dark-gray);
        font-size: 18px
    }

    .support_input_cont .eye-icon:hover {
        color: var(--neutral-dark-gray)
    }

    .support_button {
        display: flex;
        justify-content: flex-end;
        margin: 10px
    }

    .support_button button {
        padding: 10px 20px;
        margin: 10px;
        border-radius: 10px;
        font-weight: 600;
        text-transform: capitalize;
        color: var(--neutral-white);
        background: var(--accent-orange);
        transition: .5s ease-out
    }

    .support_button button:hover {
        color: var(--neutral-white);
        background: var(--accent-dark-orange)
    }

    .dashboard_body_cont .dash_ove_body {
        padding: 10px 10px 0
    }

    .dashboard_body_cont .welcome_ad .welcome_ad_flex .welcome_ad_cont {
        height: 200px;
        margin: 10px 0 20px;
        border-radius: 5px
    }

    .dashboard_body_cont .welcome_ad .welcome_ad_flex .welcome_ad_cont .wel_ad_txt {
        position: absolute;
        margin: 5px;
        padding: 5px;
        width: 170px;
        max-width: 170px
    }

    .dashboard_body_cont .welcome_ad .welcome_ad_flex .welcome_ad_cont .wel_ad_txt h4 {
        font-size: 15px
    }

    .dashboard_body_cont .welcome_ad .welcome_ad_flex .welcome_ad_cont .wel_ad_txt .location {
        margin: 2px 0;
        font-size: 13px
    }

    .dashboard_body_cont .welcome_ad .welcome_ad_flex .welcome_ad_cont .wel_ad_txt .availlability {
        margin: 2px 0;
        font-size: 13px
    }

    .dashboard_body_cont .welcome_ad .welcome_ad_flex .welcome_ad_cont .wel_ad_txt .cost {
        margin: 2px 0;
        font-size: 13px
    }

    .dashboard_body_cont .welcome_ad .welcome_ad_flex .welcome_ad_cont .wel_ad_txt .btn {
        width: 100%;
        margin: 10px 0 5px;
        padding: 5px 20px;
        border-radius: 3px
    }

    .dashboard_body_cont .welcome_ad .welcome_ad_flex .welcome_ad_cont .wel_ad_txt .btn a {
        font-size: 13px;
        font-weight: 550
    }

    .filter {
        width: 100%;
        margin: -5px 0 5px
    }

    .filter .flex_filter .welcome {
        font-size: 12px;
        font-weight: 550
    }

    .filter .filters {
        padding: 5px 10px;
        border-radius: 3px;
        font-size: 11px;
        font-weight: 500
    }

    .filter .login {
        padding: 5px 10px;
        border-radius: 3px;
        font-size: 11px;
        font-weight: 500
    }

    .filter .register {
        padding: 5px 10px;
        border-radius: 3px;
        font-size: 11px;
        font-weight: 500
    }

    .filter .profile {
        padding: 5px 10px;
        border-radius: 3px;
        font-size: 11px;
        font-weight: 500
    }

    .filter_form .filter_form_inp_flex .filter_form_inp {
        width: 50%
    }

    .filter_form .filter_form_inp_flex .filter_form_inp select {
        padding: 8px 5px;
        margin: 0 7px 10px 0;
        border-radius: 5px
    }

    .filter_form .filter_form_inp_flex .filter_form_inp select option {
        font-size: 13px
    }

    .filter_form .filter_form_inp_block input {
        font-size: 13px;
        padding: 8px 5px
    }

    .filter_form .filter_form_inp_block input:focus {
        border: 1px solid var(--neutral-dark-gray)
    }

    .filter_end {
        margin: 5px 0
    }

    .filter_end button {
        padding: 10px 15px;
        border-radius: 5px;
        font-size: 13px
    }

    .filter_end button:hover {
        background: var(--accent-dark-orange)
    }

    .category_dash_cont {
        width: 100%;
        margin: 0 0 15px
    }

    .category_dash_cont_min h4 {
        font-size: 15px;
        font-weight: 600;
        padding: 10px 5px
    }

    .category_dash_cont_min .category_dash_cont_min_flex {
        display: block
    }

    .category_dash_cont_min .category_dash_cont_min_flex .dash_cont_min {
        height: 360px;
        margin: 5px 5px 10px;
        width: 97%;
        padding: 5px 10px;
        box-shadow: #64646f33 0 7px 29px 0
    }

    .category_dash_cont_min .category_dash_cont_min_flex .dash_cont_min .img {
        width: 100%;
        height: 180px
    }

    .category_dash_cont_min .category_dash_cont_min_flex .dash_cont_min .img img {
        border-radius: 3px
    }

    .category_dash_cont_min .category_dash_cont_min_flex .dash_cont_min button h5 {
        font-size: 15px;
        margin: 10px 0
    }

    .category_dash_cont_min .category_dash_cont_min_flex .dash_cont_min button .desc {
        font-size: 13px;
        margin: 0 0 10px
    }

    .category_dash_cont_min .category_dash_cont_min_flex .dash_cont_min .enquiry {
        padding: 12px;
        font-size: 13px
    }

    .category_dash_cont_min .dash_cat_cont_form .dash_cat_cont_input input {
        font-size: 13px
    }

    .category_dash_cont_min .dash_cat_cont_form .dash_cat_cont_input .error {
        font-size: 13px;
        padding: 3px 0 0;
        font-style: italic;
        color: #d35400;
        display: none
    }

    .category_dash_cont_min .dash_cat_cont_form .dash_cat_cont_input textarea {
        font-size: 13px
    }
}