body {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    background-color: #f5f5f5;
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    padding: 10px 20px;
    border-bottom: 1px solid #ddd;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar-logo {
    display: flex;
    align-items: center;
}

.logo-image {
    height: 1.5em;
    /* Adjust height relative to text */
    margin-right: 5px;
    /* Space between logo and text */
}

.logo-text {
    font-size: 1em;
    /* Adjust text size */
}

.navbar-messages {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 10px;
    max-width: 400px;
    /* Limit the width */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.navbar-message {
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    background-color: #28a745;
    /* Green background */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.navbar-message.error {
    background-color: #dc3545;
    /* Red background for error */
}

.error-messages {
    margin-top: 20px;
    /* Add spacing from the footer */
    padding: 10px;
    background-color: #fff;
    /* Optional: Background to differentiate */
    border-top: 1px solid #ccc;
    /* Optional: Visual separation */
}

.error-messages .w3-panel {
    margin-bottom: 10px;
}

/* Modal Menu */
.menu-modal {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 30%;
    max-width: 300px;
    background-color: white;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);
}

.menu-modal-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-start;
    padding: 20px;
    gap: 10px;
}

.close-menu {
    align-self: flex-end;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    margin-bottom: 20px;
}

/* Vertical Menu Items */
.menu-items-horizontal {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
}

.menu-items-horizontal .menu-item {
    text-decoration: none;
    color: #333;
    padding: 0;
    /* Remove padding */
    text-align: left;
    /* Align text to the left */
    font-size: 16px;
    transition: color 0.3s;
}

.menu-items-horizontal .menu-item:hover {
    color: #007BFF;
}

/* Adjust modal for smaller screen sizes */
@media (max-width: 600px) {
    .menu-modal {
        width: 70%;
        max-width: none;
    }

    .menu-items-horizontal {
        gap: 10px;
    }
}

.custom-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    /* Dim background */
    overflow: auto;
    /* Add scrolling for small screens */
}

.custom-modal-content {
    margin: 10% auto;
    background-color: white;
    border-radius: 5px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 400px;
}

.custom-modal-content header {
    font-size: 18px;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.custom-modal-content button {
    padding: 10px 15px;
    font-size: 14px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.custom-modal-content button:hover {
    background-color: #0056b3;
}

.property-image {
    width: 100%;
    height: 250px;
    /* Example height */
    object-fit: cover;
    display: block;
}

.property-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    /* Adjust as needed */
    justify-content: space-between;
}

.property-card {
    flex: 0 0 calc(33.333% - 16px);
    /* Ensure equal size */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.property-card img {
    margin: 0;
    border-bottom: 1px solid #ddd;
}

.property-card .w3-container {
    padding: 16px;
}

.property-card h3,
.property-card p {
    margin: 8px 0;
}

/* property dashboard preferred contact style::after */
.contact-method-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.contact-method-inline {
    display: inline-flex;
    align-items: center;
    margin-right: 10px;
}

.badge {
    background-color: red;
    color: white;
    padding: 2px 6px;
    border-radius: 50%;
    font-size: 0.8em;
    vertical-align: super;
}

/* Fixed sidebar on large screens */
#mySidebar {
    position: fixed;
    /* ensure it's fixed on the left */
    top: 80px;
    /* matches your main container margin-top */
    left: 0;
    width: 260px;
    /* match main margin-left */
    height: calc(100vh - 80px);
    /* fill the rest of the viewport */
    overflow-y: auto;
    /* scroll inside sidebar */
    z-index: 2;
    /* above background, not insanely high */
}

/* Main content to the right of sidebar */
.book-main {
    margin-left: 260px;
    /* same as #mySidebar width */
}

/* On smaller screens, stack sidebar and main content */
@media (max-width: 992px) {
    #mySidebar {
        position: static;
        width: 100%;
        height: auto;
    }

    .book-main {
        margin-left: 0;
    }
}

/* Generic wrapper for file fields (optional, if you use it in the template) */
.profile-file-field {
    max-width: 100%;
    overflow: hidden;
}

/* Make the actual <input type="file"> respect the container width */
.profile-file-input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: block;
}

/* For some browsers the filename part can still be visually wide,
   but this keeps the control itself inside the column. */
.profile-file-input::-webkit-file-upload-button {
    white-space: nowrap;
}

/* If your profile form is in a narrow column, make sure the column
   itself has no overflow issues */
.profile-column {
    max-width: 100%;
    overflow: hidden;
}

/* in custom.css */
.w3-button.w3-teal.w3-small {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}