.afbeelding_met_mapping { 
    overflow-x: clip;
}

.jumbotron.afbeelding_met_mapping.jumbo-padding {
	padding-bottom: 0;
}


.stijl_achtergrondkleur_f0f8fe + .afbeelding_met_mapping:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(2 * var(--jumbotron-standard-margin));
    background: var(--lichtblauw);
    z-index: -1;
} 

.image_map_container {
	position: relative; 
    anchor-name: --parent;
}

.image_map_point {
    position: absolute;
    background:var(--blauw);
	color: var(--wit);
	border-radius: 50%;
	display: flex;
	border:0.2rem solid var(--wit);
    transform: translate(-50%, -50%);
	padding: 1rem;
	align-items: center;
    justify-content: center; 
    transition:all 0.3s ease-in-out;
    position-anchor: --parent;
    anchor-name: --child;
}

.image_map_point_tooltip{
    position-anchor: --child;
    position: absolute;
    top: anchor(bottom);
    left: anchor(center);
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 15;
    transition: 0.3s all;
    padding: 2rem;
}

.image_map_point_tooltip > .image_map_point_tooltip_container {
    background: #fff;
    max-width: 32rem;
    overflow: auto;
    max-height: 70vh;
}

.image_map_point_tooltip_content_container {
	padding: 1.5rem;
    text-align: left;
    font-size: 1.4rem;
    line-height: 2.2rem;
}

.image_map_point_tooltip_content_container p {
	margin-top: 0.5rem !important;
}

.image_map_point_tooltip_content_container .image_map_point_tooltip_content_titel {
	padding-bottom: 0rem;
	font-weight: 700;
}

.image_map_point:hover + .image_map_point_tooltip,
.image_map_point_tooltip:hover{
	opacity: 1;
	visibility: visible;
	pointer-events: all;
}

.image_map_container:after {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--jumbotron-standard-margin) / 1) calc(-1 * var(--jumbotron-standard-margin) / 1) 0 calc(-1 * var(--jumbotron-standard-margin) / 1);
    background: linear-gradient(180deg, #D3ECFF 0%, #FFF 100%);
    z-index: -1;
}

.image_map_container img {
    width: 100% !important;
}

.image_map_point:before {
    content: " ";
    position: absolute;
    border: 0.2rem solid var(--wit);
    width: calc(100% + 1.4rem);
    height: calc(100% + 1.4rem);
    border-radius: 50%;
    display: flex;
    opacity: 0.6;
	transition:all 0.3s ease-in-out;
}

 

.image_map_point span.minus_1 {
    transition: all 0.3s ease-in-out;
    position: absolute; 
    width: 1rem;
    height: 0.1rem; 
	transform: rotate(0deg);
    background-color: var(--wit);
}

.image_map_point span.minus_2 {
    transition: all 0.3s ease-in-out;
    position: absolute; 
    width: 1rem;
    height: 0.1rem;  
	transform: rotate(90deg);
    background-color: var(--wit);
}

.image_map_point:hover {
	cursor: pointer;
}

 
.image_map_point:hover span.minus_1 {
	opacity: 0; 
}

.image_map_point:hover span.minus_2 {
	animation: spin-to-minus2 0.6s ease-in-out forwards;
	
}

@keyframes spin-to-minus {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate( 360deg); /* 360 + 90 → visually 0deg */
    }
}

@keyframes spin-to-minus2 {
    from {
        transform: rotate(90deg);
    }
    to {
        transform: rotate( 360deg); /* 360 + 90 → visually 0deg */
    }
}
 
 
.image_map_point:hover:before {
	opacity: 1; 
	width: calc(100% + 2rem);
    height: calc(100% + 2rem);
}


@media (max-width:767px)
{		 
    .image_map_point_tooltip{
        position-anchor: --parent;
        left: anchor(left);
        transform: translateY(-6rem);
        padding-inline: 0;
		box-shadow: 0px 0px 40px -20px rgba(0,0,0,0.75);
    }
	
	.image_map_point_tooltip {
        position-anchor: --parent;
        left: anchor(left);
        background-color: #fff; 
        display: flex;
        transform: translateY(-6rem);
        padding-inline: 0;
        z-index: 999;
        box-shadow: 0px 0px 40px -20px rgba(0, 0, 0, 0.75);
        justify-content: center;
    }
	
    .image_map_point:hover + .image_map_point_tooltip, .image_map_point_tooltip:hover{
        transform: translateY(0);        
    }
	
}

@media (max-width:576px)
{		
	.afbeelding_met_mapping .container {
		padding: 0;
        margin: 0;
	}
	
	.image_map_container:after {
		display: none;
	}
	
	.afbeelding_met_mapping {
		z-index: 2;
		margin-top: calc(var(--jumbotron-standard-margin) * -3.4) !important;
		padding-bottom: 0 !important;
	}
	
}

@media (min-width:768px) and (max-width:991px)
{
	
}

@media (min-width:992px) and (max-width:1199px)
{
	
}

@media (min-width:1200px) and (max-width:1399px)
{
    
}

@media (min-width:1400px)
{
    
}