/* The Google map of [[map]] (HoekEnSteenMap + js/map.js). Loaded by the component itself, so only
   on a page that holds a map. The measures and colours are those of the Avada map of the old site:
   full width, the height from the settings (MapHeight, --hs-gmap-height), and the "custom" info box
   in the site colours (--awb-color2 background, --awb-color5 text). */

.hs-gmap {
    width: 100%;
    height: var(--hs-gmap-height, 500px);
    margin: 0;
}

/* Avada: ".fusion-google-map img { max-width: none }". The site sets img { max-width: 100% },
   which squeezes the map tiles, the marker and the close button. */
.hs-gmap img {
    max-width: none;
}

/* The marker stands on its point with the bottom centre of the picture, like a Google marker icon. */
.hs-gmap__marker {
    position: absolute;
    transform: translate(-50%, -100%);
    cursor: pointer;
    height: auto;
}

/* The box InfoBox drew: 250 px wide, no own background, the close button floating right. */
.hs-gmap__infobox {
    position: absolute;
    width: 250px;
    background: none;
    opacity: 1;
    transform: translateZ(0);
}

.hs-gmap__close {
    float: right;
    position: relative;
    margin: 2px;
    cursor: pointer;
}

/* Avada: ".fusion-google-map .fusion-info-box", with the colours of the element on the old site. */
.hs-gmap__info {
    padding: 5px;
    border-radius: 5px;
    background-clip: padding-box;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .3);
    background-color: var(--awb-color2, #f9f6f3);
    color: var(--awb-color5, #814609);
    font-size: 13px;
    white-space: pre-line;
}