body {padding: 0;margin: 0; font-family: Avenir, Arial;}
html, body, #map {height: 100%; width: 100vw;}
h3,h4{margin-bottom:0;}
.leaflet-control-layers-overlays{line-height: 2.6em; padding-right: 30px;}
.leaflet-control-layers-overlays img{height: 30px; margin-top: 0px;}
.leaflet-control-layers-overlays div{right: 10px; display: inline-block; position: absolute;}
#divOverlay{
    display: none;
    left: 0;
    top: 0;
    bottom: 0;
    height: 0;
    width: calc(100vw - 40px);
    margin: 20px;
    position: fixed;
    z-index: 999; 
    background: rgba(255, 255, 255, 0.95);
    font: 14px/18px Tahoma, Verdana, sans-serif; /*  font-size: 0.9em; */
    border-radius: 10px;
    transition: height 0.25s ease-in;
}
    #divOverlay.full{
        display: block;
        height: auto;
        
    }
.overlay-close-button{position: fixed; top: 30px; right: 30px; text-decoration: none; text-align: center; font-size: 2rem; color: #757575; z-index: 1000;}
    #divOverlay-wrapper{
        top: 40px;
        bottom: 40px;
        width: calc(100vw - 80px);
        padding: 0 20px;
        position: fixed;
        overflow-y: scroll;
    }
    #divOverlay p{margin: 0;}
    #divOverlay h2 + br,#divOverlay h3 + br,#divOverlay h4 + br{display: none;}
    /* #divOverlay h3,#divOverlay h4{margin-bottom:-1em;} */
    #divOverlay img{max-width: calc(100vw - 80px); max-height: 80vh; display: block;}
    #divOverlay img + br{display: none;}
    #divOverlay-content sup{display: inline;} /* voetnoten, kunnen evt verborgen worden */
.leaflet-control-custom img{width: 18px; margin: 6px}

#customPopup{
    height: 200px;
    width: 90%;
    bottom: 0;
    margin: 0 5% 5%;
    display: none;
    position: fixed;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    font-size: 0.9em;
    z-index: 999;
}
.customPopupContent{
    position: fixed;
    left: -100%; /* Start off-screen */
    transition: left 0.3s ease-out; /* Add transition for smooth animation */
    width: 80%
}
    .customPopupContent.toCenter {left: 10%; /* Position when in view */}
    .customPopupContent.toRight {left: 300%; /* Position when flying out */ transition: left 0.3s ease-in-out;} /* Add transition for smooth animation */
    div.preview{display: flex;}
    div.preview div+div{padding-left: 10px;}
    .preview img{max-height: 8em; max-width: 30vw;}
    .button-more{display: block;}
    img.afbeelding{max-width: 100% !important; max-height: revert !important;}