/* The By Location map. Leaflet's own look comes from /Scripts/leaflet/leaflet.css;
   this only sizes the map and keeps it from leaking over the rest of the page. */

#LocationMap {
    width: 100%;
    height: 70vh;
    min-height: 22rem;
    min-height: min(22rem, 60vh); /* on a short landscape phone, leave room to scroll past */
    max-height: 50rem;
    margin: 1rem 0;
    border: 1px solid #888;
    border-radius: 4px;
    background: #ddd;
    /* Leaflet's panes and controls use z-index up to 1000; isolating the map keeps them
       from riding over a sticky header or menu as the page scrolls. */
    position: relative;
    isolation: isolate;
}

/* The right margin leaves room for Leaflet's close button, which is drawn over the
   content's top-right corner; with less, the end of a long title sits under it. */
#LocationMap .leaflet-popup-content {
    margin: 0.6rem 1.8rem 0.6rem 0.9rem;
    line-height: 1.35;
}

#LocationMap .LocationPlace {
    font-size: 0.85em;
    opacity: 0.75;
}

.LocationNote {
    font-size: 0.85em;
}