#map_details.expanded.fullscreen-mode { position: fixed; top: 20px; right: 20px; }
#map-canvas:fullscreen #map_details.expanded { height: 50vh; margin-top: -50vh; }
#map-canvas:fullscreen #map { height: 100vh !important; }
#map-canvas { margin: 0 auto; max-width: 1600px; width: 100%; padding: 0 0 30px 0; }
#map-canvas #map { background-image: none; border: 1px black solid; height: auto; margin: 0; min-height: 600px; }
#map_details { background-color: #f7f5f3; display: flex; font-family: Montserrat, sans-serif; font-size: 16px; height: 0; line-height: 1.5; overflow-y: auto; position: relative; transition: all 0.5s ease; z-index: 10; }
#map_details.expanded { height: 250px; margin-top: -250px; border: 1px #000000 solid; }
#map_details .closebtn { background-color: #ae0000; border: 2px #ae0000 solid; color: #ffffff; display: flex; font-size: 36px; height: 36px; border-radius: 5px; right: 20px; line-height: 1; position: absolute; top: 7px; width: 36px; z-index: 2; align-items: center; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; cursor: pointer; }
#map_details .closebtn:hover { background-color: #ffffff; color: #ae0000; }
#detail_container { display: flex; flex-direction: row; padding: 1em; overflow-y: auto; width: 100%; }
#detail_container #heading h2 { margin: 0; text-wrap: pretty; }
#detail_container #heading h3 { margin: .5rem 0; text-wrap: pretty; }
#detail_container #heading p { font-size: 1rem; margin-top: 0.5rem; text-wrap: pretty; }
#detail_container #heading, #detail_container #room_information, #detail_container #image_holder { padding: 1em; }
#detail_container #image_holder:has(img) { min-width: 223px; min-height: 216px }
#detail_container #image_holder img { width: auto; height: 100%; max-width: initial; }
#detail_container #room_information { }
#detail_container #room_information h4 { margin: 0; font-weight: 600; text-wrap: pretty; }
#detail_container #room_information p { margin: 0 0 0 0.3rem; text-wrap: pretty; }
#detail_container #room_information p.xtra-padding { margin-top: 1rem; }
#detail_container #room_information p + h4 { margin-top: 0.5em; }
#detail_container #room_information ul { align-self: flex-start; list-style: circle; margin: 0; padding-left: 1.25em; }
.mapboxgl-popup-content { height: 33%; overflow-y: scroll; }
.menuIcon { display: none; }
.mapboxgl-ctrl-top-right { width: 100%; }

/* Mapbox search box custom styles/Overrides */
.mapboxgl-ctrl-geocoder--suggestion-title, .mapboxgl-ctrl-geocoder--suggestion-address { text-indent: -20px; padding-left: 20px; white-space: normal; }
.mapboxgl-ctrl-geocoder { width: 94%; }

/* Hide image_holder when empty */
#detail_container > #image_holder:empty { display: none !important; }

ul.suggestions div.mapboxgl-ctrl-geocoder--suggestion { letter-spacing:normal;font-family: "Montserrat", Arial, sans-serif; }


    @media screen and (max-width: 480px) {
        #global-navigation .hamburger { font-size: 1em; }
        #detail_container #heading, #detail_container #room_information { padding: 0; }
        #detail_container #heading h2 { font-size: 1.2rem; }
        #detail_container #heading h3 { font-size: 1.1rem; }
        #detail_container #image_holder { padding: 1em 0 0 0; }
        #detail_container #image_holder img { width: 80%; }
        #map_details #room_information { padding: 1em 0 0 0; }
        #map_details { flex-direction: column; padding: 0; line-height: 1.5; }
        #map_details.expanded #image_holder { display: flex; max-height: 100%; padding: 17px; max-width: 100%; }
        #map-canvas { width: 100%; }
    }

    @media only screen and (max-height: 480px) and (orientation: landscape) {
        #map { min-height: 79vh; }
        #map_details .closebtn { font-size: 2em; }
    }

    @media screen and (min-width: 360px) and (max-width: 767px) {
        #detail_container { padding: 0.5em; width: 100%; }
        #map_details .closebtn { right: 7px; top: 7px; }
    }

    @media screen and (min-width: 768px) {
        #detail_container:has(#image_holder:empty) > div:not(#image_holder) { flex: 0 1 50%; max-width: 50%; }
    }

    @media screen and (max-width: 1365px) {
        #map-canvas { padding: 0 30px 30px; margin: 0; max-width: 100%; }
        #tamuv-ctas { display: none; }
    }

    @media screen and (min-width: 1366px) {
        #map-canvas { padding: 0 140px 30px 30px; margin: 0; max-width: 100%; }
    }

    @media screen and (max-width: 1024px) {
        #detail_container { flex-direction: column; }
    }

    @media screen and (min-width: 1024px) {
        #map-canvas { padding: 0 150px 30px 30px; margin: auto; }
    }

    @media screen and (min-width: 1850px) {
        #map-canvas { padding: 0 0 30px 0; margin: 0 auto; max-width: var(--max-content-width); width: 100%; }
    }