/* Optional: Makes the sample page fill the window. */
html,
body {
    height: 100%; /* Makes sure the html and body take full height of the viewport */
    margin: 0; /* Removes default margin */
    padding: 0; /* Removes default padding */
    overflow: hidden; /* Prevents scrolling on the entire body */
}

/* Details Page */

#allData {
    height: 100% !important; /* Full height for container and columns */
}

#allListings {
    overflow-y: auto; /* Enables scrolling for listings */
    height: 100%; 
}

#searchContainer {
    position: relative; /* Ensures that the searchResults are positioned relative to this container */
}

/*#searchResults {
    position: absolute;
    top: 100%;*/ /* Adjust this value as needed to position just below the input field */
    /*left: 0;
    width: 100%;*/ /* Adjust width as necessary */
    /*z-index: 1000;*/ /* High index to ensure it's on top */
    /*display: none;*/ /* Keeps the element hidden until needed */
    /*background-color: white;*/ /* Optional: for better visibility */
    /*max-height: 300px;*/ /* Set a fixed height */
    /*overflow-y: auto;*/ /* Enable vertical scrolling */
    /*padding-left: calc(var(--bs-gutter-x) * .5);
}*/

/* Always set the map height explicitly to define the size of the div element that contains the map. */
#map {
    height: 86%; /* Ensures the map takes full height of its container */
    position: relative; /* If necessary, for other positioning needs */
    z-index: 0; /* Ensure the map is below the search results */
}

.gm-style img{
    max-width: 100%;
}

.gm-style-iw-d {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.btn-outline-dark {
    --bs-btn-hover-bg: rgb(16, 86, 148) !important;
}

.btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active {
    background-color: #0069d9 !important;
}

#toggleButton {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1000;
    display: none; /* Initially hidden, will be visible on mobile */
}

@media (max-width: 768px) {
    #toggleButton {
        display: block; /* Show the toggle button on mobile */
    }
}

#dropdownMenuButton,
#dropdownMenuButton.show {
    color: black;
    border-color: black;
    box-shadow: none;
    background-color: white !important;
}