:root {
    --donb-red-rgb: 217, 15, 22;
}
.marker-cluster-small, .marker-cluster-medium { background-color: rgba(var(--donb-red-rgb), 0.8) !important; }
.marker-cluster-small div, .marker-cluster-medium div { background-color: white !important; color: black; }
.marker-cluster div { font-size: 14px !important; font-weight: bold !important; }

.leaflet-control-attribution a { font-weight: normal; }
#showinfo { position: relative; }
@media (min-width: 992px)
{
    #maparea { width: 600px; float: right; }
    #mapid { min-height: 600px; }
    #showinfo {
        position: absolute;
        left: 65px;
        top: 15px;
        max-height: 92%;
        width: 360px;
        overflow-y: auto;
        overflow-x: hidden;
        z-index: 9999;
        box-shadow: 8px 5px 5px #ddd;
    }
    #showinfo::-webkit-scrollbar-thumb {
        border-radius: 3px;
        background-image: -webkit-gradient(linear,
        left bottom,
        left top,
        color-stop(0.44, rgba(var(--donb-red-rgb), 0.4)),
        color-stop(0.72, rgba(var(--donb-red-rgb), 0.7)),
        color-stop(0.86, rgba(var(--donb-red-rgb), 0.9)));
    }
}
@media (min-width: 1200px) { #maparea { width: 750px; } }
#maparea { margin-bottom: 2rem; }
.info-visible { background-color: rgb(var(--donb-red-rgb)); }
.info-visible a.close-btn { color: #fff; }
#showinfo h4 { font-weight: bold;}
#showinfo .ezrichtext-field { font-size: 1.2rem; }