/*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
#map {
    height: 25rem;
    width: 100%;
}

.mapContainer {
    height: 45rem;
}

.marker {
    background-image: url('./assets/images/map-marker1.png');
    background-size: cover;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    cursor: pointer;
}

.mapboxgl-popup {
    max-width: 200px;
    color: black;
    overflow-wrap: break-word ;
}

.mapboxgl-popup a {
    /* text-decoration: none; */
    color: black;
}

.mapboxgl-popup h3:focus-visible{
    outline: none;
}
.mapboxgl-popup a:focus-visible{
    outline: none;
}

.mapboxgl-popup-content {
    text-align: center;
    font-family: 'Open Sans', sans-serif;
}