@charset "UTF-8";
/*----------------------------------------**
|  Global Emergency / Noodmeldingen module  |
**----------------------------------------*/
/*-----------------**
|  Global variables  |
**-----------------*/
/*****************
* Theming colors *
*****************/
/*----------------------------------------------------------**
|  Protype base variabelen voor de skin.css = prototype skin  |
**----------------------------------------------------------*/
/*******
* Grid *
*******/
/********
* Links *
********/
/**************
* transitions *
**************/
/************
* separator *
************/
/*-----------------------------**
|  Variables protype typography  |
**-----------------------------*/
/*---------------**
|  Globale option  |
**---------------*/
/* color output */
/* Scafolding */
/*--------------------------------**
|  Globale base colors for theming  |
**--------------------------------*/
/*-----------------------**
|  Globale base variables  |
**-----------------------*/
/*---------------------**
|  Globale base z-index  |
**---------------------*/
/*-------------------------**
|  Globale base Transitions  |
**-------------------------*/
/*----------------**
|  Globale Shadows  |
**----------------*/
/*------------------------**
|  Globale Spacing partial  |
**------------------------*/
/*------------------------**
|  Global base grid system  |
**------------------------*/
/*-----------------------**
|  Globale Border styling  |
**-----------------------*/
/*----------------------**
|  Global base separator  |
**----------------------*/
/*---------------------------**
|  Globale Base Focus styling  |
**---------------------------*/
/*----------------------**
|  Global link variables  |
**----------------------*/
/*-------------------**
|  Globale Typography  |
**-------------------*/
/* Font-family */
/*--------------------------------------------------------------------**
|  Use `inspect` for lists so that quoted items keep the quotes.        |
|  See https://github.com/sass/sass/issues/2383#issuecomment-336349172  |
**--------------------------------------------------------------------*/
/* Font weight */
/* font-size */
/* Headings style */
/*------------------**
| headings h1,h2,h3  |
**------------------*/
/*-------------------------**
|  Base variables voor Body  |
**-------------------------*/
/*--------------------**
|  Globale Breakpoints  |
**--------------------*/
/**************************************************************************
* Grid containers                                                         *
* // Define the maximum width of `.container` for different screen sizes. *
**************************************************************************/
/*--------------------------**
|  Globale Helpers variables  |
**--------------------------*/
/*---------------------------**
|  Base helper view variables  |
**---------------------------*/
/*-----------------------**
|  Globale core variables  |
**-----------------------*/
/*----------------------**
|  Global icon Variables  |
**----------------------*/
/* Icon size */
/* Icon text-padding (spacing between icon and text) */
/* Icon base styling */
/* variables base cbo font */
/*--------**w
|  New add  |
**--------*/
/* External [target="_blank"] icons base icon */
/* Inplace editing */
/*---------------------------**
|  Global core List variables  |
**---------------------------*/
/*------------------------------**
|  Global core buttons variables  |
**------------------------------*/
/*--------------------------**
|  Global core box Variables  |
**--------------------------*/
/*----------------------------**
|  Globale alert-box variables  |
**----------------------------*/
/*-----------------------**
|  Global Table Variables  |
**-----------------------*/
/*-------------------------**
|  Global overlay variables  |
**-------------------------*/
/*----------------------------------**
|  Globale navigation core variables  |
**----------------------------------*/
/* Nav-tabs */
/*--------------------------**
|  Global dropdown variables  |
**--------------------------*/
/*------------------------**
|  Global Scroll variables  |
**------------------------*/
/*----------------------------**
|  Breadcrumb Global variables  |
**----------------------------*/
/* Padding niet op a want staat inline dus op de wrapper */
/*-----------------------**
|  Global Media variables  |
**-----------------------*/
/*----------------------**
|  Global Status styling  |
**----------------------*/
/*-----------------------**
|  Globale form variables  |
**-----------------------*/
/* label variables */
/* Input variables */
/*----------------------------**
|  Global myinterest variables  |
**----------------------------*/
/*----------------------------**
|  Global favorites variables  |
**----------------------------*/
/*---------------------------------**
|  Global ticket__from-icon styling  |
**---------------------------------*/
.box-bulletin-board-react,
.box-comments-notifications {
  background-color: var(--color1-lighter);
  border-color: var(--color1-lighter);
}

/*--------------------------**
|  Global variable Accordion  |
**--------------------------*/
/*-----------------------**
|  Global steps variables  |
**-----------------------*/
/*--------------------**
|  Global variables poi  |
**--------------------*/
/*--------------------------**
|  Global taxonmie variables  |
**--------------------------*/
/*-------------------------------------------------------------------------**
|  Globale Variables for frontend-scss\scss\layout\components\_anchors.scss  |
**-------------------------------------------------------------------------*/
/*--------------------------**
|  Global Base Caret styling  |
**--------------------------*/
/*------------------------**
|  Globale Badge variables  |
**------------------------*/
/*-----------------------**
|  Global image variables  |
**-----------------------*/
/*---------------------------**
|  Global copyright variables  |
**---------------------------*/
/*------------------------------**
|  Global base loading indicator  |
**------------------------------*/
/*--------------------------------------**
|  Globale Download components variables  |
**--------------------------------------*/
/*-----------------------**
|  Globale date variables  |
**-----------------------*/
/*-------------------------**
|  Globale Toggle variables  |
**-------------------------*/
/*-------------------------**
|  Global partial variables  |
**-------------------------*/
/* Partial */
/* partial-grid layout */
/*-----------------------**
|  Global event variables  |
**-----------------------*/
/*------------------------------**
|  Global hall finder variables  |
**------------------------------*/
/* modules cordis */
/*----------------------------------------------------------------**
|  Globale variables voor de vrije content zone via de class .info  |
**----------------------------------------------------------------*/
/*-------------------------**
|  Globale Social variables  |
**-------------------------*/
/*------------------------**
|  Globale share variables  |
**------------------------*/
/*------------------------**
|  Global cookie variables  |
**------------------------*/
/*-----------------------------**
|  Global alertbanner variables  |
**-----------------------------*/
/*---------------------------**
|  Globale Contact variabelen  |
**---------------------------*/
/* Streetmap base dimensions */
/* hours styling */
/*--------------------------**
|  Global Calendar variables |
**--------------------------*/
/*------------------------------**
|  Global progress bar variables  |
**------------------------------*/
/* modules intranet */
/*--------------------------------------------**
|  Globale Prikbord / bulletin-board variables  |
**--------------------------------------------*/
/*---------------------------**
|  Globale birthday variables  |
**---------------------------*/
/*-------------------------------**
|  Global inout persons variables  |
**-------------------------------*/
/*------------------------------------------**
|  Global applications/ toepassing variables  |
**------------------------------------------*/
/* modules school */
/*-------------------------**
|  Globale header variables  |
**-------------------------*/
/*------------------------**
|  Global search variables  |
**------------------------*/
/*--------------------------------**
|  Global main structure variables  |
**--------------------------------*/
/*------------------------**
|  Global Footer variables  |
**------------------------*/
/*---------------------------**
|  Global home page variables  |
**---------------------------*/
/*-------------------------------**
|  Globale page sitemap variables  |
**-------------------------------*/
/* Global Components */
/*----------------------------------**
|  Global variables Component swiper  |
**----------------------------------*/
/* Global modules */
/*---------------------------------**
|  Global content-blocks variabelen  |
**---------------------------------*/
/*----------------------------**
|  Variable pagebuilder pb.css  |
**----------------------------*/
/*---------------------------------------**
|  Globale Variables Slideshow / bxslider  |
**---------------------------------------*/
/*-------------------------**
|  Globale variables filter  |
**-------------------------*/
/*---------------------------------------**
|  Globale Variables AI Search  |
**---------------------------------------*/
/*----------------------------------------**
|  Global Local tiles standalone variables  |
**----------------------------------------*/
/*------------------------------------**
|  Global static standalone atoz pages  |
**------------------------------------*/
/* Icordis */
/*--------------------------**
|  Globale sorting variables  |
**--------------------------*/
/*-----------------------------------------------------------------------------**
|  Variables global widget overrule + toekomst depc door vervanging pagebuilder  |
**-----------------------------------------------------------------------------*/
/*------------------------**
|  Globale Theme variables  |
**------------------------*/
/*--------------------------------------**
|  Global Theme specific overrule option  |
**--------------------------------------*/
/*----------------------------------------------------------------------**
|  Global thema variables for contrast op basis van globale base kleuren  |
**----------------------------------------------------------------------*/
/*-----------------------**
|  Global Theme variables  |
**-----------------------*/
/*-----------------------**
|  Theming base variables  |
**-----------------------*/
/*---------------------**
|  Globale theme base z-index  |
**---------------------*/
/*-------------------------**
|  Globale THEME base Transitions  |
**-------------------------*/
/*----------------**
|  Globale Shadows  |
**----------------*/
/*------------------------**
|  Global theme base grid system  |
**------------------------*/
/*------------------------**
|  Globale theme Spacing partial  |
**------------------------*/
/*-----------------------------**
|  Globale theme border styling  |
**-----------------------------*/
/*----------------------**
|  theme base separator  |
**----------------------*/
/*---------------------------**
|  Globale Base Focus styling  |
**---------------------------*/
/*----------------------------**
|  Global theme link variables  |
**----------------------------*/
/*------------------------------------**
|  Variables Typography Theming portal  |
**------------------------------------*/
/* Font weight */
/* font-size */
/* Headings style */
/*------------------**
| headings h1,h2,h3  |
**------------------*/
/*----------------------------**
|  Global Theme body variables  |
**----------------------------*/
/*------------------**
|  Theme breakpoints  |
**------------------*/
/*--------------------------**
|  Theme Helpers variables  |
**--------------------------*/
/*----------------------**
|  Theme view base helper  |
**----------------------*/
/*---------------------**
|  Theme core variables  |
**---------------------*/
/*----------------------**
|  Variables theme icons  |
**----------------------*/
/*-----------------------**
|  Variables list Theming  |
**-----------------------*/
/*------------------------------------------------**
|  Global Variabels core theming component buttons  |
**------------------------------------------------*/
/*--------------------------------**
|  Global variables theme core box   |
**--------------------------------*/
/*--------------------------------**
|  Global variables theme alertbox  |
**--------------------------------*/
/***************************
* Theming component tables *
***************************/
/*-----------------------------**
|  Theming component navigation  |
**-----------------------------*/
/*********************
* Variabels dropdown *
*********************/
/********************************************
* Define theme colors for dropdown variants *
********************************************/
/******************
* Variable Scroll *
******************/
/*----------------------------------**
|  Breadcrumb Global Theme variables  |
**----------------------------------*/
/*****************
* Variable media *
*****************/
/*******************
* Variables Status *
*******************/
/*-------------------------------------------------**
|  Variables theme forms for formbuilder standalone  |
**-------------------------------------------------*/
/*---------------------------------**
|  Global ticket__from-icon styling  |
**---------------------------------*/
/*----------------------------------**
|  Variables theme Component buttons  |
**----------------------------------*/
/*---------------------------------------------------------------------------------------------------------**
|  Make button kleur variant op basis van basis gedefinieerde button gedfinieerd core viriables van buttons  |
|  zie => \scss\variables\core\_buttons.scss                                                                  |
**---------------------------------------------------------------------------------------------------------*/
/*------------------------------**
|  Variables theme Component box  |
**------------------------------*/
/*------------------------------------------**
|  Global Variables theme Component alertbox  |
**------------------------------------------*/
/*----------------------------------------**
|  Global Variables theme Component tables  |
**----------------------------------------*/
/********************
* Variables anchors *
********************/
/*------------------------------**
|  Globale theme caret variables  |
**------------------------------*/
/*------------------------------**
|  Globale theme badge variables  |
**------------------------------*/
/*-----------------------------**
|  Global theme image variables  |
**-----------------------------*/
/*---------------------------------**
|  Global Theme copyright variables  |
**---------------------------------*/
/*******************************
* Variables loading indicators *
*******************************/
/************
* Variables *
************/
/*---------------------**
|  Variables date theme  |
**---------------------*/
/*------------------------------**
|  Global theme toggle variables  |
**------------------------------*/
/*---------------------------------------------------**
|  Global Theme variables for style, portal overrules  |
**---------------------------------------------------*/
/* Partial */
/* partial-grid layout */
/********************
* Variables overlay *
********************/
/*----------------------**
|  Theme Tiles variables  |
**----------------------*/
/*------------------------**
|  Theme popover variables  |
**------------------------*/
/*******************
* Variables Letter *
*******************/
/***********************
* Variables accordions *
***********************/
/*----------------**
|  Variables Steps  |
**----------------*/
/*----------------------**
|  Variable progress-bar  |
**----------------------*/
/* progress-bar used for stand alone eloket */
/***********************************
* Variable voor vrije content zone *
***********************************/
/*------------------------------**
|  Global theme social variables  |
**------------------------------*/
/*------------**
|  theme share  |
**------------*/
/*-----------------------------------**
|  Global theme variables Alertbanner  |
**-----------------------------------*/
/*-----------------------**
|  Theme variables cookie  |
**-----------------------*/
/********************
* Variables Contact *
********************/
/*******************
* Variables events *
*******************/
/*******************
* Variables events *
*******************/
/**********************
* Variables roadworks *
**********************/
/********************
* Variables Persons *
********************/
/*--------------------------------------**
|  Global Theme Agendanotullen Variables  |
**--------------------------------------*/
/*--------------------------------------------**
|  Theme Prikbord / bulletin-board variables  |
**--------------------------------------------*/
/*-------------------------**
|  Global Theme birthday variables  |
**-------------------------*/
/*------------------------------**
|  Global Theme header variables  |
**------------------------------*/
/*------------------------------**
|  Global theme search variables  |
**------------------------------*/
/*-----------------------**
|  global Theme footer variables  |
**-----------------------*/
/*----------------------------------------**
|  Global home page portal theme variables  |
**----------------------------------------*/
/* Global modules */
/*---------------------------------**
|  Global theme content-blocks variabelen  |
**---------------------------------*/
/*---------------------------------------------**
|  Global theme variables slideshow / bx slider  |
**---------------------------------------------*/
/*--------------------------------**
|  Global theme calendar variables |
**--------------------------------*/
/*-----------------------**
|  Theme filter variables  |
**-----------------------*/
/* streetmap variables */
/*---------------------------**
|  Core base button Variables  |
**---------------------------*/
/*--------------------------**
|  Define global base colors  |
**--------------------------*/
/*-----------------------------------------------------**
|  Protype base variabelen voor de skin.css = streetmap |
**-----------------------------------------------------*/
/***********************
* Make button variants *
***********************/
/******************************************
* Define theme colors for button variants *
******************************************/
/* Input variables */
/*****************
* Variable Poi *
*****************/
/*-------------------------**
|  Base Streetmap variables  |
**-------------------------*/
/*-----------------**
|  filter streetmap variables  |
**-----------------*/
/*-----------**
|  Base Mixin  |
**-----------*/
/***************
* Mixin colors *
***************/
.leaflet__info > div:not(:last-child) {
  margin-bottom: var(--paragraph-margin-vertical, var(--paragraph-margin-vertical-bottom, 1.6rem));
}

.cookie-compliance__wrapper > :not(:last-child) {
  margin-bottom: var(--paragraph-margin-vertical, var(--paragraph-margin-vertical-bottom, 1.6rem));
}

h4, h5, h6, .title {
  margin-top: 0;
  font-family: var(--headings-font-family, Georgia, "Times New Roman", Times, serif);
  color: var(--headings-color, var(--color1-base));
  font-weight: var(--headings-font-weight, 700);
  line-height: var(--headings-line-height, 1.2);
}
h4:not(:last-child), h5:not(:last-child), h6:not(:last-child), .title:not(:last-child) {
  margin-bottom: var(--headings-margin-vertical, var(--headings-margin-vertical-bottom, 0.3em));
}
h4::before, h5::before, h6::before, .title::before {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-top: calc((1 - 1.2) * 0.5em);
}

/*---------**
|  position  |
**---------*/
/*--------**
|  z-index  |
**--------*/
/*------------------------**
|  Text typography styling  |
**------------------------*/
/* Text truncate */
/* Text alignment */
/***********************
* Mixins Screenreaders *
***********************/
/*************************
* Mixin toggling content *
*************************/
/*----------------**
|  Mixin tab-focus  |
**----------------*/
.leaflet__link {
  box-shadow: none !important;
}
.leaflet__link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: var(--linktag-zindex, 1070);
}
.leaflet__link:active {
  outline: none;
}
select:focus, .form-control:not(.search__input):focus-visible, a:focus-visible,
button:focus-visible, .group-checkbox .control-wrapper:focus-within input[type=checkbox],
.group-radiobox .control-wrapper:focus-within input[type=checkbox],
.group-checkbox .control-wrapper:focus-within input[type=radio],
.group-radiobox .control-wrapper:focus-within input[type=radio], .leaflet__link:focus-visible::after {
  box-shadow: var(--ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--shadow, 0 0 rgba(0, 0, 0, 0));
}

a:active, .leaflet__link:active::after {
  outline-offset: var(--outline-offset, 0.2rem);
  outline: 0.2rem dotted var(--outline-color);
}

/*
%focus-style-within {
	--ring-within-inset: var(--ring-inset);
    --ring-within-color: hsla(var(--hsla(var(--focus-h), var(--focus-s), var(--focus-l), var(--focus-a))-h), var(--hsla(var(--focus-h), var(--focus-s), var(--focus-l), var(--focus-a))-s), var(--hsla(var(--focus-h), var(--focus-s), var(--focus-l), var(--focus-a))-l), var(--ring-alpha-within, 0.8));
    --ring-within-color-offset: var(--ring-color-offset);
    --ring-within-width: var(--ring-width);
    --ring-within-width-offset: var(--ring-width-offset);
    --ring-within-offset-shadow: var(--ring-within-inset) 0 0 0 var(--ring-within-width-offset) var(--ring-within-color-offset);
    --ring-within-shadow: var(--ring-within-inset) 0 0 0 calc(var(--ring-within-width) + var(--ring-within-width-offset)) var(--ring-within-color); //0 0 #0000;
	box-shadow: var(--ring-within-offset-shadow, 0 0 #0000), var(--ring-within-shadow, 0 0 #0000), outputCssvar($shadow-none, shadow);
}

%focus-within  {
	&:focus-within {
		@extend %focus-style-within;
		// @include border-radius($border-radius);
    }
}
*/
/****************
* Border radius *
****************/
/*--------------------------------**
|  Border-radius mixin the new way  |
**--------------------------------*/
/************
* Gradients *
************/
/************************
* Mixin flex properties *
************************/
/*-----------**
|  mixin icon  |
**-----------*/
input[type=checkbox],
input[type=radio], svg {
  position: relative;
  flex-shrink: 0;
  top: var(--icon-position-top, 0);
  display: var(--icon-display, inline-flex);
  width: var(--icon-size-width, var(--icon-size-square, 1.6rem));
  height: var(--icon-size-height, var(--icon-size-square, 1.6rem));
  min-width: var(--icon-size-width, var(--icon-size-square, 1.6rem));
}
input[type=checkbox]:first-child,
input[type=radio]:first-child, svg:first-child {
  margin-right: var(--icon-margin-horizontal, var(--icon-margin-horizontal-right, 0));
}
input[type=checkbox]:last-child,
input[type=radio]:last-child, svg:last-child {
  margin-left: var(--icon-margin-horizontal, var(--icon-margin-horizontal-left, 0));
}

.select2-selection__arrow::before, .streetmap .poi-svg__wrapper::before, [class*=btn-]:not(.btn-sorting,
.toolbar-list [class*=btn-],
.btn-rss)[target=_blank]::after,
button:not(.btn-sorting,
.toolbar-list [class*=btn-],
.btn-rss)[target=_blank]::after {
  content: "";
  position: var(--icon-position, relative);
  top: var(--icon-position-top, auto);
  right: var(--icon-position-right, auto);
  bottom: var(--icon-position-bottom, auto);
  left: var(--icon-position-left, auto);
  top: var(--icon-position-top, 0);
  display: var(--icon-display, inline-flex);
  flex-shrink: 0;
}

/*----------**
|  Mixin box  |
**----------*/
/***********
* Alertbox *
***********/
/*-----------------**
|  Mixin navigation  |
**-----------------*/
/******************
* Mixins Dropdown *
******************/
/**********
* Mixins navigations *
**********/
/*-------------------------**
|  Mixin status box styling  |
**-------------------------*/
/*------------**
|  Mixins form  |
**------------*/
.group-checkbox .control-wrapper,
.group-radiobox .control-wrapper {
  --label-font-weight: 400;
}
/*------------**
|  Float mixin  |
**------------*/
/***************
* Mixin Scroll *
***************/
/*----------------**
|  Mixin Container  |
**----------------*/
/*-------------------**
|  Mixin Grid layouts  |
**-------------------*/
/*---------**
|  CSS grid  |
**---------*/
/*----------------**
|  Globale helpers  |
**----------------*/
/*****************
* Layout helpers *
*****************/
.bg-full {
  position: relative;
  background-color: var(--full-background-color, var(--gray-lighter));
  padding-top: var(--full-padding-vertical, var(--full-padding-vertical-top, 1cqh));
  padding-bottom: var(--full-padding-vertical, var(--full-padding-vertical-bottom, 1cqh));
}
.bg-full::before, .bg-full::after {
  content: "";
  position: absolute;
  top: var(--full-top, 0);
  width: var(--full-size-width, 100vw);
  height: var(--full-size-height, 100%);
  z-index: -1;
  background-color: var(--full-background-color, var(--gray-lighter));
}
.bg-full::before {
  left: 100%;
}
.bg-full::after {
  right: 100%;
}

.pull-right {
  float: var(--float, right);
}

.pull-left {
  float: var(--float, left);
}

.to-fix {
  position: relative;
  border: 2px dotted PaleGreen;
}
.to-fix:before {
  position: absolute;
  z-index: 2;
  right: 0;
  top: 0;
  content: "TO FIX!";
  background-color: PaleGreen;
  padding-top: var(--padding-vertical, var(--padding-vertical-top, 0.5rem));
  padding-bottom: var(--padding-vertical, var(--padding-vertical-bottom, 0.5rem));
  padding-left: var(--padding-horizontal, var(--padding-horizontal-left, 0.5rem));
  padding-right: var(--padding-horizontal, var(--padding-horizontal-right, 0.5rem));
}

@media (min-width: 48em) {
  .has-controls {
    display: var(--display, flex);
    justify-content: var(--justify-content, flex-start);
    flex-direction: var(--flex-direction, row);
    gap: var(--gap, 1.2rem);
  }
  .has-controls > :last-child {
    flex-shrink: var(--flex-shrink, 0);
  }
}

.embed__container {
  position: var(--embed-position, relative);
  top: var(--embed-position-top, auto);
  right: var(--embed-position-right, auto);
  bottom: var(--embed-position-bottom, auto);
  left: var(--embed-position-left, auto);
  padding-top: var(--embed-padding-vertical, var(--embed-padding-vertical-top, max(60%, 326px)));
  width: 100%;
  height: 0;
}
.embed__container--meetingburger-net {
  --embed-padding-vertical-top: max(100%, 700px);
}
.embed__container iframe {
  position: var(--embed-position, absolute);
  top: var(--embed-position-top, 0);
  right: var(--embed-position-right, 0);
  bottom: var(--embed-position-bottom, 0);
  left: var(--embed-position-left, 0);
  width: var(--frame-size-square, var(--frame-size-width, 100%));
  height: var(--frame-size-square, var(--frame-size-height, 100%));
  min-width: var(--frame-size-square, var(--frame-size-width, 100%));
  border: none;
}
.external {
  /*
  @include icon-svg-base(
  	$icon-svg-path: $icon-external-svg-url,
  	$icon-text-spacing: $icon-external-text-padding,
  	$icon-position-top: $icon-external-position-top,
  	// $icon-size: null,
  	// $icon-color: null,
  	$icon-svg-mask-position: right,
  );
  @include link-hover {
  	@include icon-svg-mask-variant(
  		$icon-svg-color: $link-color-hover,
  	);
  }
  */
  /*
  	&.has-icon {
  		@include define-cssvar(center, align-items);
  	}

  	&:not(.has-icon) {
  		@include display(inline-flex);
  		&::after {
  			@include icon-base(
  				$icon-text-spacing: 0,
  				$icon-position-top: $icon-position-top,
  				// $icon-size: $inplace-editing-icon-size,
  				$icon-color: cssvar(link-color),
  			);
  			transform:  scale(60%, 60%);
  			opacity: 0.3;
  			content: "";
  			-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><path d='M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v9l-3.794-3.793-5.999 6-1.414-1.414 5.999-6L12 3h9z' /></svg>");
  			mask-image:
  			url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><path d='M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v9l-3.794-3.793-5.999 6-1.414-1.414 5.999-6L12 3h9z' /></svg>");
  			background-size: contain;
  			background-color: var(--icon-color);
  			display: block;
  			@include square($icon-svg-base, icon-);
  			transition: $transition-base;
  			transition-property: background-color, opacity;

  		}
  		&:hover {
  			&:after {
  				opacity: 1;
  				@include define-cssvar(cssvar(link-color-hover), icon-color);
  			}

  		}
  	}
  */
}

/****************************
* Screenreader only helpers *
****************************/
.sr-only,
.sr-only-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/*********************
* Typography Helpers *
*********************/
.text-bold {
  font-family: var(--font-family, Georgia, "Times New Roman", Times, serif);
  font-weight: var(--font-weight, 700);
}

.text-hyphenate {
  -webkit-hyphens: auto;
  hyphens: auto;
}

.text-balance {
  text-wrap: var(--text-wrap, balance);
}

.text-pretty {
  text-wrap: var(--text-wrap, pretty);
}

/***************************
* Toggling content helpers *
***************************/
.show {
  display: block !important;
}

.hide,
.hidden,
.masked {
  display: none !important;
}

.invisible,
.invisibility {
  visibility: hidden !important;
}

.visible,
.visibility {
  visibility: visible !important;
}

.pointer-none {
  pointer-events: none;
}

.pointer-visible {
  pointer-events: visible;
}

@media (max-width: 31.98em) {
  .hide-mobile {
    display: none !important;
  }
}

@media (max-width: 31.98em) {
  .show-mobile {
    display: inline-flex !important;
  }
}

.visible-print {
  display: none !important;
}
@media print {
  .visible-print {
    display: block !important;
  }
  table.visible-print {
    display: table !important;
  }
  tr.visible-print {
    display: table-row !important;
  }
  th.visible-print,
  td.visible-print {
    display: table-cell !important;
  }
}

.visible-print-block {
  display: block !important;
}
@media print {
  .visible-print-block {
    display: block !important;
  }
}

.visible-print-inline {
  display: inline !important;
}
@media print {
  .visible-print-inline {
    display: inline !important;
  }
}

.visible-print-inline-block {
  display: inline-block !important;
}
@media print {
  .visible-print-inline-block {
    display: inline-block !important;
  }
}

@media print {
  .hidden-print {
    display: none !important;
  }
}

/*-------------**
|  View helpers  |
**-------------*/
@media (min-width: 48em) {
  .view-row {
    display: flex;
    align-items: baseline;
  }
  .view-row .heading {
    flex: 0 0 var(--view-heading-width, 25rem);
  }
  .view-row > *:not(.heading) {
    flex-grow: var(--flex-grow, 1);
  }
}
.view-row .heading {
  font-size: var(--font-size, 1.6rem);
  margin-right: var(--margin-horizontal, var(--margin-horizontal-right, 1.2rem));
}
.view-row .list-overview > li:only-child .list__icon {
  display: none;
}

[data-read-more=true] {
  display: block;
  display: -webkit-box;
  font-size: 1.6rem;
  line-height: 1.5em;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*****************
* Cursor helpers *
*****************/
.cursor-none {
  pointer-events: none;
}

.link-hover {
  position: relative;
}

/*------------------------**
|  helper classe voor icon  |
**------------------------*/
.icon-pos-r svg {
  order: 2;
  margin-right: initial;
  margin-left: var(--icon-margin-horizontal, var(--icon-margin-horizontal-left, 0));
}
.icon-pos-r :not(svg) {
  order: 1;
}

.icon-pos-l svg {
  order: 1;
  margin-left: initial;
  margin-right: var(--icon-margin-horizontal, var(--icon-margin-horizontal-right, 0));
}
.icon-pos-l :not(svg) {
  order: 2;
}

.has-icon {
  display: var(--display, flex);
  justify-content: var(--justify-content, flex-start);
  align-items: var(--align-items, flex-start);
  --icon-margin-horizontal: 0.5rem;
}

/*----------------------------------**
|  Vrije content zone helper classes  |
**----------------------------------*/
.info--clearfix {
  overflow: hidden;
}

.isolate {
  isolation: isolate;
}

/*----------------**
|  Standalone Skin  |
**----------------*/
/* base reset, root variables, tab-focus, scafolding, typo, animation, container, grid */
/***
	The new CSS reset - version 1.8.5 (last updated 14.6.2023)
	GitHub page: https://github.com/elad2412/the-new-css-reset
***/
/*
	Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
	- The "symbol *" part is to solve Firefox SVG sprite bug
	- The "html" attribute is exclud, because otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36)
*/
*:where(:not(iframe, canvas, img, video, audio, hr, sup, sub):not(svg *, symbol *)) {
  all: unset;
  display: revert;
}

/* Preferred box-sizing value */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Reapply the pointer cursor for anchor tags */
a, button {
  cursor: revert;
}

/* For images to not be able to exceed their container */
img,
video,
svg,
canvas,
iframe {
  max-width: 100%;
}

/* removes spacing between cells in tables */
table {
  border-collapse: collapse;
}

/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
input, textarea {
  -webkit-user-select: auto;
}

/* revert the 'white-space' property for textarea elements on Safari */
textarea {
  white-space: revert;
}

select {
  appearance: revert;
  user-select: revert;
}

/* minimum style to allow to style meter element */
meter {
  -webkit-appearance: revert;
  appearance: revert;
}

/* preformatted text - use only for this feature */
:where(pre) {
  all: revert;
}

/* reset default text opacity of input placeholder */
::placeholder {
  color: unset;
}

/* remove default dot (•) sign */
::marker {
  content: initial;
}

/* fix the feature of 'hidden' attribute.
   display:revert; revert to element instead of attribute */
:where([hidden]) {
  display: none;
}

/* revert for bug in Chromium browsers
- fix for the content editable attribute will work properly.
- webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
:where([contenteditable]:not([contenteditable=false])) {
  -moz-user-modify: read-write;
  -webkit-user-modify: read-write;
  overflow-wrap: break-word;
  -webkit-line-break: after-white-space;
  -webkit-user-select: auto;
}

/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable=true]) {
  -webkit-user-drag: element;
}

/* Revert Modal native behavior */
:where(dialog:modal) {
  all: revert;
}

/*
//- Create a root stacking context
//- https://www.joshwcomeau.com/css/custom-css-reset/
*/
#root, #__next {
  isolation: isolate;
}

/*****************
* base root file *
*****************/
:root {
  --container-gutter-horizontal: 3rem;
  --gutter-horizontal: 3rem;
  --gutter-vertical: 3rem;
  --font-family: Arial, Helvetica, "Helvetica Neue", sans-serif;
  --headings-font-family: Georgia, "Times New Roman", Times, serif;
  --body-color: var(--black);
  --body-background: var(--white);
  --paragraph-margin: 1.6rem;
  --icon-color: var(--white);
  --transition-duration-base: 0.2s;
  --transition-timing-function: ease-in-out;
  --padding-horizontal-base: 1.2rem;
  --padding-vertical-base: 0.8rem;
  --border-width-base: 2px;
  --border-color-base: var(--gray-light);
  --border-style-base: solid;
  --border-radius-base: 2px;
  --pb-gutter-horizontal: var(--gutter-horizontal);
  --pb-gutter-vertical: var(--gutter-horizontal);
  --main-section-margin-vertical-bottom: 6rem;
  --main-content-margin-vertical-bottom: 4rem;
}

* {
  --white-h: 0deg;
  --white-s: 0%;
  --white-l: 100%;
  --white-a: 100%;
  --white: hsla(var(--white-h),var(--white-s), var(--white-l), var(--white-a));
  --black-h: 0deg;
  --black-s: 0%;
  --black-l: 0%;
  --black-a: 100%;
  --black: hsla(var(--black-h),var(--black-s), var(--black-l), var(--black-a));
  --focus-h: 190.0440528634deg;
  --focus-s: 89.7233201581%;
  --focus-l: 49.6078431373%;
  --focus-a: 100%;
  --focus: hsla(var(--focus-h),var(--focus-s), var(--focus-l), var(--focus-a));
  --color1-darker-h: 210deg;
  --color1-darker-s: 3.8461538462%;
  --color1-darker-l: 10.1960784314%;
  --color1-darker-a: 100%;
  --color1-darker: hsla(var(--color1-darker-h),var(--color1-darker-s), var(--color1-darker-l), var(--color1-darker-a));
  --color1-dark-h: 195deg;
  --color1-dark-s: 2.5641025641%;
  --color1-dark-l: 30.5882352941%;
  --color1-dark-a: 100%;
  --color1-dark: hsla(var(--color1-dark-h),var(--color1-dark-s), var(--color1-dark-l), var(--color1-dark-a));
  --color1-base-h: 188.5714285714deg;
  --color1-base-s: 2.7888446215%;
  --color1-base-l: 50.7843137255%;
  --color1-base-a: 100%;
  --color1-base: hsla(var(--color1-base-h),var(--color1-base-s), var(--color1-base-l), var(--color1-base-a));
  --color1-light-h: 195deg;
  --color1-light-s: 2.6666666667%;
  --color1-light-l: 70.5882352941%;
  --color1-light-a: 100%;
  --color1-light: hsla(var(--color1-light-h),var(--color1-light-s), var(--color1-light-l), var(--color1-light-a));
  --color1-lighter-h: 0deg;
  --color1-lighter-s: 0%;
  --color1-lighter-l: 95.2941176471%;
  --color1-lighter-a: 100%;
  --color1-lighter: hsla(var(--color1-lighter-h),var(--color1-lighter-s), var(--color1-lighter-l), var(--color1-lighter-a));
  --color2-darker-h: 210deg;
  --color2-darker-s: 10.8108108108%;
  --color2-darker-l: 14.5098039216%;
  --color2-darker-a: 100%;
  --color2-darker: hsla(var(--color2-darker-h),var(--color2-darker-s), var(--color2-darker-l), var(--color2-darker-a));
  --color2-dark-h: 210deg;
  --color2-dark-s: 8.75%;
  --color2-dark-l: 31.3725490196%;
  --color2-dark-a: 100%;
  --color2-dark: hsla(var(--color2-dark-h),var(--color2-dark-s), var(--color2-dark-l), var(--color2-dark-a));
  --color2-base-h: 0deg;
  --color2-base-s: 0%;
  --color2-base-l: 64.7058823529%;
  --color2-base-a: 100%;
  --color2-base: hsla(var(--color2-base-h),var(--color2-base-s), var(--color2-base-l), var(--color2-base-a));
  --color2-light-h: 210deg;
  --color2-light-s: 13.9534883721%;
  --color2-light-l: 83.137254902%;
  --color2-light-a: 100%;
  --color2-light: hsla(var(--color2-light-h),var(--color2-light-s), var(--color2-light-l), var(--color2-light-a));
  --color2-lighter-h: 210deg;
  --color2-lighter-s: 10.3448275862%;
  --color2-lighter-l: 88.6274509804%;
  --color2-lighter-a: 100%;
  --color2-lighter: hsla(var(--color2-lighter-h),var(--color2-lighter-s), var(--color2-lighter-l), var(--color2-lighter-a));
  --gray-darker-h: 210deg;
  --gray-darker-s: 3.8461538462%;
  --gray-darker-l: 10.1960784314%;
  --gray-darker-a: 100%;
  --gray-darker: hsla(var(--gray-darker-h),var(--gray-darker-s), var(--gray-darker-l), var(--gray-darker-a));
  --gray-dark-h: 195deg;
  --gray-dark-s: 2.5641025641%;
  --gray-dark-l: 30.5882352941%;
  --gray-dark-a: 100%;
  --gray-dark: hsla(var(--gray-dark-h),var(--gray-dark-s), var(--gray-dark-l), var(--gray-dark-a));
  --gray-base-h: 188.5714285714deg;
  --gray-base-s: 2.7888446215%;
  --gray-base-l: 50.7843137255%;
  --gray-base-a: 100%;
  --gray-base: hsla(var(--gray-base-h),var(--gray-base-s), var(--gray-base-l), var(--gray-base-a));
  --gray-light-h: 195deg;
  --gray-light-s: 2.6666666667%;
  --gray-light-l: 70.5882352941%;
  --gray-light-a: 100%;
  --gray-light: hsla(var(--gray-light-h),var(--gray-light-s), var(--gray-light-l), var(--gray-light-a));
  --gray-lighter-h: 0deg;
  --gray-lighter-s: 0%;
  --gray-lighter-l: 95.2941176471%;
  --gray-lighter-a: 100%;
  --gray-lighter: hsla(var(--gray-lighter-h),var(--gray-lighter-s), var(--gray-lighter-l), var(--gray-lighter-a));
  --ring-color: hsla(var(--focus-h), var(--focus-s), var(--focus-l), var(--focus-a));
  --focus-a: 0.8;
  --ring-color-offset: hsla(var(--white-h), var(--white-s), var(--white-l), var(--white-a));
  --ring-width: 0.2rem;
  --ring-width-offset: 0rem;
  --ring-inset: var(--inset-empty, );
  --ring-offset-shadow: var(--ring-inset) 0 0 0 var(--ring-width-offset) var(--ring-color-offset);
  --ring-shadow: var(--ring-inset) 0 0 0 calc(var(--ring-width) + var(--ring-width-offset)) var(--ring-color);
  --outline-color: #ced4da;
}

/*****************
* Main tab focus *
*****************/
/***********************************************************
* base structure en scaffolding met reset/normalise in één *
***********************************************************/
html,
body {
  height: 100%;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
  /* Prevent font scaling in landscape while allowing user zoom */
  scroll-padding-top: var(--scroll-padding-top, 1.5rem);
}
html.no-scroll {
  overflow: hidden;
  position: relative;
}

body {
  position: relative;
  -webkit-font-smoothing: antialiased;
  font-family: var(--font-family);
  font-size: var(--body-font-size, 1.6rem);
  color: var(--body-color, var(--black));
  font-weight: var(--body-font-weight, normal);
  background-color: var(--body-background, var(--gray-light));
  font-weight: var(--body-font-weight, normal);
  line-height: var(--body-line-height, 1.5);
  min-width: var(--min-width, 320px);
}
body:has(.header__nav.is-active) .header__search {
  visibility: hidden;
}
body:has(.selected), body:has(.header__nav.is-active) {
  --zindex: -1;
  --linktag-zindex: -1;
}
@media (max-width: 31.98em) {
  body {
    -webkit-text-size-adjust: 100%;
  }
}

hr {
  border: none;
  border-top: var(--hr-border-width, var(--border-width-base)) var(--hr-border-style, var(--border-style-base)) var(--hr-border-color, var(--border-color-base));
  margin-top: var(--hr-margin-vertical, var(--hr-margin-vertical-top, 0));
  margin-bottom: var(--hr-margin-vertical, var(--hr-margin-vertical-bottom, 0));
}

img,
a {
  transition: all var(--transition-duration-base) var(--transition-timing-function);
}

img {
  transition-property: opacity;
  transition-property: opacity, transform;
}

a {
  color: var(--link-color, var(--gray-base));
  text-decoration-line: var(--link-decoration, underline);
  text-decoration-color: var(--link-decoration-color, var(--color1-base));
  text-underline-offset: var(--link-decoration-offset, 0.1rem);
  text-decoration-thickness: var(--link-decoration-thickness, 0.1rem);
  transition-property: background-color, color, border, text-decoration;
}
a:hover, a:focus-visible {
  color: var(--link-color-hover, var(--gray-dark));
}
a:hover, a:focus-visible {
  text-decoration-color: var(--link-decoration-color-hover, var(--color2-base));
}
a:hover, a:focus-visible {
  color: var(--link-color-hover, var(--gray-dark));
}

a:focus-visible,
button:focus-visible {
  outline: none;
}

@media (min-width: 48em) {
  p {
    max-width: var(--info-char-max-width, 100ch);
    text-wrap: pretty;
  }
}

sub,
sup {
  font-size: 70%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/********************
* Description Lists *
********************/
/*
dt,
dd {}
*/
dt {
  float: left;
  margin-right: 1.2rem;
}

b,
strong {
  font-weight: 700;
}

em,
i {
  font-style: italic;
}

/********************
* Reduced Motion *
********************/
@media (prefers-reduced-motion: reduce), (update: slow) {
  :root {
    --transition-duration-base: 0.02s;
  }
}
h4.has-icon, h5.has-icon, h6.has-icon, .title.has-icon {
  --icon-margin-horizontal: 1.2rem;
  --icon-position-top: 0.05em;
  --icon-size-square: 2.4rem;
  --icon-color-primary: var(--color1-base);
}

h1,
h2,
h3 {
  margin-top: 0;
  line-height: var(--headings-line-height, 1.2);
}
h1:not(:last-child),
h2:not(:last-child),
h3:not(:last-child) {
  margin-bottom: var(--headings-margin-vertical, var(--headings-margin-vertical-bottom, 0.3em));
}
h1::before,
h2::before,
h3::before {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-top: calc((1 - 1.2) * 0.5em);
}

h1 {
  font-size: var(--h1-font-size, var(--font-size, 4rem));
  font-family: var(--h1-headings-font-family, var(--headings-font-family, Georgia, "Times New Roman", Times, serif));
  color: var(--h1-headings-color, var(--headings-color, var(--color1-base)));
  font-weight: var(--h1-headings-font-weight, var(--headings-font-weight, 700));
}

h2 {
  font-size: var(--h2-font-size, var(--font-size, 3.2rem));
  font-family: var(--h2-headings-font-family, var(--headings-font-family, Georgia, "Times New Roman", Times, serif));
  color: var(--h2-headings-color, var(--headings-color, var(--color1-base)));
  font-weight: var(--h2-headings-font-weight, var(--headings-font-weight, 700));
}

h3 {
  font-size: var(--h3-font-size, var(--font-size, 2.4rem));
  font-family: var(--h3-headings-font-family, var(--headings-font-family, Georgia, "Times New Roman", Times, serif));
  color: var(--h3-headings-color, var(--headings-color, var(--color1-base)));
  font-weight: var(--h3-headings-font-weight, var(--headings-font-weight, 700));
}

h4 {
  font-size: var(--font-size, 2.2rem);
}

h5 {
  font-size: var(--font-size, 1.8rem);
}

h6 {
  font-size: var(--font-size, 1.6rem);
}

/*****************
* Animations *
*****************/
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes loading-bounce {
  0%, 50%, 100% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
/**********************************************************************************
* Set Container widths                                                            *
* // Set the container width, and override it for fixed navbars in media queries. *
**********************************************************************************/
.container,
.container-fluid {
  width: 100%;
  padding-left: var(--container-gutter-horizontal, 3rem);
  padding-right: var(--container-gutter-horizontal, 3rem);
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 48em) {
  .container,
  .container-fluid {
    --container-gutter-horizontal: 4rem;
  }
}
@media (min-width: 64em) {
  .container,
  .container-fluid {
    --container-gutter-horizontal: 6rem;
  }
}

@media (min-width: 90em) {
  .container {
    max-width: 1600px;
  }
}

/*******************
* Set grid classes *
*******************/
/************************
* Widget grid Structure *
************************/
.widget-row {
  --widget-gutter-vertical: var(--gutter-horizontal, 3rem);
  --widget-gutter-horizontal: var(--gutter-horizontal, 3rem);
  --gutter-vertical: 3rem;
  --gutter-horizontal: 3rem;
}

/* Definieer root variablen op basis van de theming variables (colors, font, ..) */
:root {
  /* forms */
  --input-text-color: var(--body-color);
  --input-background-color: var(--gray-lighter);
  --input-border-color: var(--gray-light);
  --input-border-style: solid;
  --input-border-width: 0.1rem;
  --input-font-weight: 400;
  --input-padding-vertical: 0.8rem;
  --input-padding-horizontal: 1.2rem;
  --input-font-size: 1.6rem;
  --input-border-radius-top: var(--border-radius-base);
  --input-border-radius-bottom: var(--border-radius-base);
  --label-font-weight: 700;
  --form-icon-border-color: var(--gray-light);
  --form-icon-background-color: var(--white);
  --form-icon-color: var(--gray-light);
}

* {
  --white-h: 0deg;
  --white-s: 0%;
  --white-l: 100%;
  --white-a: 100%;
  --white: hsla(var(--white-h),var(--white-s), var(--white-l), var(--white-a));
  --black-h: 0deg;
  --black-s: 0%;
  --black-l: 0%;
  --black-a: 100%;
  --black: hsla(var(--black-h),var(--black-s), var(--black-l), var(--black-a));
  --focus-h: 190.0440528634deg;
  --focus-s: 89.7233201581%;
  --focus-l: 49.6078431373%;
  --focus-a: 100%;
  --focus: hsla(var(--focus-h),var(--focus-s), var(--focus-l), var(--focus-a));
  --color1-darker-h: 210deg;
  --color1-darker-s: 3.8461538462%;
  --color1-darker-l: 10.1960784314%;
  --color1-darker-a: 100%;
  --color1-darker: hsla(var(--color1-darker-h),var(--color1-darker-s), var(--color1-darker-l), var(--color1-darker-a));
  --color1-dark-h: 195deg;
  --color1-dark-s: 2.5641025641%;
  --color1-dark-l: 30.5882352941%;
  --color1-dark-a: 100%;
  --color1-dark: hsla(var(--color1-dark-h),var(--color1-dark-s), var(--color1-dark-l), var(--color1-dark-a));
  --color1-base-h: 188.5714285714deg;
  --color1-base-s: 2.7888446215%;
  --color1-base-l: 50.7843137255%;
  --color1-base-a: 100%;
  --color1-base: hsla(var(--color1-base-h),var(--color1-base-s), var(--color1-base-l), var(--color1-base-a));
  --color1-light-h: 195deg;
  --color1-light-s: 2.6666666667%;
  --color1-light-l: 70.5882352941%;
  --color1-light-a: 100%;
  --color1-light: hsla(var(--color1-light-h),var(--color1-light-s), var(--color1-light-l), var(--color1-light-a));
  --color1-lighter-h: 0deg;
  --color1-lighter-s: 0%;
  --color1-lighter-l: 95.2941176471%;
  --color1-lighter-a: 100%;
  --color1-lighter: hsla(var(--color1-lighter-h),var(--color1-lighter-s), var(--color1-lighter-l), var(--color1-lighter-a));
  --color2-darker-h: 210deg;
  --color2-darker-s: 10.8108108108%;
  --color2-darker-l: 14.5098039216%;
  --color2-darker-a: 100%;
  --color2-darker: hsla(var(--color2-darker-h),var(--color2-darker-s), var(--color2-darker-l), var(--color2-darker-a));
  --color2-dark-h: 210deg;
  --color2-dark-s: 8.75%;
  --color2-dark-l: 31.3725490196%;
  --color2-dark-a: 100%;
  --color2-dark: hsla(var(--color2-dark-h),var(--color2-dark-s), var(--color2-dark-l), var(--color2-dark-a));
  --color2-base-h: 0deg;
  --color2-base-s: 0%;
  --color2-base-l: 64.7058823529%;
  --color2-base-a: 100%;
  --color2-base: hsla(var(--color2-base-h),var(--color2-base-s), var(--color2-base-l), var(--color2-base-a));
  --color2-light-h: 210deg;
  --color2-light-s: 13.9534883721%;
  --color2-light-l: 83.137254902%;
  --color2-light-a: 100%;
  --color2-light: hsla(var(--color2-light-h),var(--color2-light-s), var(--color2-light-l), var(--color2-light-a));
  --color2-lighter-h: 210deg;
  --color2-lighter-s: 10.3448275862%;
  --color2-lighter-l: 88.6274509804%;
  --color2-lighter-a: 100%;
  --color2-lighter: hsla(var(--color2-lighter-h),var(--color2-lighter-s), var(--color2-lighter-l), var(--color2-lighter-a));
  --gray-darker-h: 210deg;
  --gray-darker-s: 3.8461538462%;
  --gray-darker-l: 10.1960784314%;
  --gray-darker-a: 100%;
  --gray-darker: hsla(var(--gray-darker-h),var(--gray-darker-s), var(--gray-darker-l), var(--gray-darker-a));
  --gray-dark-h: 195deg;
  --gray-dark-s: 2.5641025641%;
  --gray-dark-l: 30.5882352941%;
  --gray-dark-a: 100%;
  --gray-dark: hsla(var(--gray-dark-h),var(--gray-dark-s), var(--gray-dark-l), var(--gray-dark-a));
  --gray-base-h: 188.5714285714deg;
  --gray-base-s: 2.7888446215%;
  --gray-base-l: 50.7843137255%;
  --gray-base-a: 100%;
  --gray-base: hsla(var(--gray-base-h),var(--gray-base-s), var(--gray-base-l), var(--gray-base-a));
  --gray-light-h: 195deg;
  --gray-light-s: 2.6666666667%;
  --gray-light-l: 70.5882352941%;
  --gray-light-a: 100%;
  --gray-light: hsla(var(--gray-light-h),var(--gray-light-s), var(--gray-light-l), var(--gray-light-a));
  --gray-lighter-h: 0deg;
  --gray-lighter-s: 0%;
  --gray-lighter-l: 95.2941176471%;
  --gray-lighter-a: 100%;
  --gray-lighter: hsla(var(--gray-lighter-h),var(--gray-lighter-s), var(--gray-lighter-l), var(--gray-lighter-a));
  --ring-color: hsla(var(--focus-h), var(--focus-s), var(--focus-l), var(--focus-a));
  --focus-a: 0.8;
  --ring-color-offset: hsla(var(--white-h), var(--white-s), var(--white-l), var(--white-a));
  --ring-width: 0.2rem;
  --ring-width-offset: 0rem;
  --ring-inset: var(--inset-empty, );
  --ring-offset-shadow: var(--ring-inset) 0 0 0 var(--ring-width-offset) var(--ring-color-offset);
  --ring-shadow: var(--ring-inset) 0 0 0 calc(var(--ring-width) + var(--ring-width-offset)) var(--ring-color);
  --outline-color: #ced4da;
}

/*--------------------------------**
|  Streetmap scafolding aanpassing  |
**---------------------------------*/
body {
  font-family: roboto;
  background-color: var(--gray-lighter);
  height: 100dvh;
  container: body/inline-size;
}
@container body (inline-size > 1024px) {
  body .map {
    flex-direction: row;
  }
}
body > * {
  scrollbar-color: var(--gray-lighter) transparent;
}

/*-----------------------------**
|  Streetmap Typo specific skin  |
**-----------------------------*/
h1, h2, h3, h4, h5, h6, .title {
  color: var(--black);
  font-family: roboto;
}

/* core used for streetmap */
/*************
* core icons *
*************/
/*--------------------------**
|  Core image / picuture tag  |
**--------------------------*/
picture {
  width: var(--size-square, var(--size-width, 100%));
  height: var(--size-square, var(--size-height, 100%));
  min-width: var(--size-square, var(--size-width, 100%));
  display: var(--photo-display, flex);
  justify-content: var(--photo-justify-content, center);
}

/****************
* Core List *
****************/
[class*=list-] {
  --link-color: var(--body-color);
  --link-decoration-color: var(--body-color);
}
[class*=list-],
[class*=list-] ul {
  --list-padding-horizontal: 0;
  padding-left: var(--list-padding-horizontal, 0);
  list-style: none;
}

/**************
* Core button *
**************/
[class*=btn-],
button {
  display: var(--display, inline-flex);
  justify-content: var(--btn-justify-content, center);
  align-items: var(--btn-align-items, center);
  cursor: pointer;
  color: var(--btn-text-color, var(--black));
  background-color: var(--btn-background-color, var(--color1-base));
  font-weight: var(--btn-font-weight, 400);
  border-width: var(--btn-border-width, var(--border-width-base));
  border-style: var(--btn-border-style, var(--border-style-base));
  border-color: var(--btn-border-color, var(--color1-base));
  padding-top: var(--btn-padding-vertical, var(--btn-padding-vertical-top, 0.5rem));
  padding-bottom: var(--btn-padding-vertical, var(--btn-padding-vertical-bottom, 0.5rem));
  padding-left: var(--btn-padding-horizontal, var(--btn-padding-horizontal-left, 0.5rem));
  padding-right: var(--btn-padding-horizontal, var(--btn-padding-horizontal-right, 0.5rem));
  font-size: var(--btn-font-size, var(--font-size, 1.6rem));
  border-top-left-radius: var(--btn-border-radius-top, var(--btn-border-radius-top-left, var(--border-radius-base)));
  border-top-right-radius: var(--btn-border-radius-top, var(--btn-border-radius-top-right, var(--border-radius-base)));
  border-bottom-left-radius: var(--btn-border-radius-bottom, var(--btn-border-radius-bottom-left, var(--border-radius-base)));
  border-bottom-right-radius: var(--btn-border-radius-bottom, var(--btn-border-radius-bottom-right, var(--border-radius-base)));
  text-decoration-line: var(--btn-link-decoration, none);
  text-decoration-color: var(--btn-link-decoration-color, var(--color1-base));
  text-underline-offset: var(--btn-link-decoration-offset, 0.1rem);
  text-decoration-thickness: var(--btn-link-decoration-thickness, 0.1rem);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
  --icon-margin-horizontal: var(--btn-icon-margin-horizontal, 0.5rem);
  --icon-color-primary: var(--btn-icon-color-primary, var(--black));
  --icon-color-hover: var(--btn-icon-color-hover, var(--black));
}
[class*=btn-]:hover:not(span), [class*=btn-]:focus-visible:not(span),
button:hover:not(span),
button:focus-visible:not(span) {
  color: var(--btn-text-color-hover, var(--black));
  background-color: var(--btn-background-color-hover, var(--color1-base));
  --icon-color-primary: var(--icon-color-hover);
  border-color: var(--btn-border-color-hover, var(--color1-base));
}
[class*=btn-]:hover, [class*=btn-]:focus-visible,
button:hover,
button:focus-visible {
  text-decoration-color: var(--btn-link-decoration-color-hover, var(--color2-base));
}
[class*=btn-]:disabled,
button:disabled {
  cursor: not-allowed;
  opacity: 0.36;
  /* //disabled layout experimenteel af
  @include button-variant(
  	$text-color: $btn-text-color,
  	$background-color: $btn-background-default,
  	$border-color: $btn-border-default,
  	// $text-color-hover: if($text-color == null, null, $text-color),
  	// $background-color-hover: if($background-color == null, null, $background-color),
  	// $border-color-hover: if($border-color == null, null, $border-color)
  );

  @include icon-variant($icon-color: $btn-text-color, $icon-color-hover: $btn-text-color);
  */
}
[class*=btn-]:not(.btn-sorting,
.toolbar-list [class*=btn-],
.btn-rss)[target=_blank]::after,
button:not(.btn-sorting,
.toolbar-list [class*=btn-],
.btn-rss)[target=_blank]::after {
  --icon-position-top: -0.1rem;
  -webkit-mask-image: var(--icon-background-url, url("data:image/svg+xml;utf8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath d='M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v9l-3.794-3.793-5.999 6-1.414-1.414 5.999-6L12 3h9z' /%3e%3c/svg%3e"));
  mask-image: var(--icon-background-url, url("data:image/svg+xml;utf8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath d='M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v9l-3.794-3.793-5.999 6-1.414-1.414 5.999-6L12 3h9z' /%3e%3c/svg%3e"));
  background-repeat: no-repeat;
  background-color: var(--icon-color-primary, var(--icon-color));
  background-size: var(--icon-size-width, var(--icon-size-square, 1.6rem)) var(--icon-size-height, var(--icon-size-square, 1.6rem));
  width: var(--icon-size-width, var(--icon-size-square, 1.6rem));
  height: var(--icon-size-height, var(--icon-size-square, 1.6rem));
  min-width: var(--icon-size-width, var(--icon-size-square, 1.6rem));
  transition: all var(--transition-duration-base) var(--transition-timing-function);
  margin-left: var(--icon-margin-horizontal, var(--icon-margin-horizontal-left, 0.5rem));
}
[class*=btn-]:not(.btn-sorting,
.toolbar-list [class*=btn-],
.btn-rss)[target=_blank]:not([class*=btn-]):hover, [class*=btn-]:not(.btn-sorting,
.toolbar-list [class*=btn-],
.btn-rss)[target=_blank]:not([class*=btn-]):focus-visible,
button:not(.btn-sorting,
.toolbar-list [class*=btn-],
.btn-rss)[target=_blank]:not([class*=btn-]):hover,
button:not(.btn-sorting,
.toolbar-list [class*=btn-],
.btn-rss)[target=_blank]:not([class*=btn-]):focus-visible {
  --icon-color-primary: var(--gray-dark);
}

/***********
* Core Box *
***********/
[class*=box-] {
  color: var(--box-text-color, var(--body-color));
  background-color: var(--box-background-color, var(--white));
  border-width: var(--box-border-width, var(--border-width-base));
  border-style: var(--box-border-style, var(--border-style-base));
  border-color: var(--box-border-color, var(--border-color-base));
  --link-color: var(--box-link-color, var(--gray-base));
  --link-decoration-color: var(--box-link-color, var(--gray-base));
  padding-top: var(--box-padding-vertical, var(--box-padding-vertical-top, 1cqh));
  padding-bottom: var(--box-padding-vertical, var(--box-padding-vertical-bottom, 1cqh));
  padding-left: var(--box-padding-horizontal, var(--box-padding-horizontal-left, 0.8cqw));
  padding-right: var(--box-padding-horizontal, var(--box-padding-horizontal-right, 0.8cqw));
  border-top-left-radius: var(--box-border-radius-top, var(--box-border-radius-top-left, 2px));
  border-top-right-radius: var(--box-border-radius-top, var(--box-border-radius-top-right, 2px));
  border-bottom-left-radius: var(--box-border-radius-bottom, var(--box-border-radius-bottom-left, 2px));
  border-bottom-right-radius: var(--box-border-radius-bottom, var(--box-border-radius-bottom-right, 2px));
}

label {
  display: var(--label-display, inline-block);
}

.control-label,
label {
  font-size: var(--label-font-size, var(--font-size, var(--body-font-size)));
  font-weight: var(--label-font-weight, 700);
  color: var(--label-text-color, var(--body-color));
  margin-bottom: var(--label-margin-vertical, var(--label-margin-vertical-bottom, 0.5rem));
  transition: all var(--transition-duration-base) var(--transition-timing-function);
}

legend {
  float: left;
  width: 100%;
  padding: 0;
  font-size: var(--font-size, var(--body-font-size));
  color: var(--label-text-color, var(--body-color));
  font-weight: var(--label-font-weight, 700);
  margin-bottom: var(--margin-vertical, var(--margin-vertical-bottom, 0.5rem));
  line-height: inherit;
  border: none;
}
legend + * {
  clear: left;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

.form-control {
  display: block;
  color: var(--input-text-color, var(--body-color));
  background-color: var(--input-background-color, var(--gray-lighter));
  font-weight: var(--input-font-weight, 400);
  border-width: var(--input-border-width, 0.1rem);
  border-style: var(--input-border-style, solid);
  border-color: var(--input-border-color, var(--gray-light));
  padding-top: var(--input-padding-vertical, var(--input-padding-vertical-top, 0.8rem));
  padding-bottom: var(--input-padding-vertical, var(--input-padding-vertical-bottom, 0.8rem));
  padding-left: var(--input-padding-horizontal, var(--input-padding-horizontal-left, 1.2rem));
  padding-right: var(--input-padding-horizontal, var(--input-padding-horizontal-right, 1.2rem));
  font-size: var(--input-font-size, var(--font-size, 1.6rem));
  border-top-left-radius: var(--input-border-radius-top, var(--input-border-radius-top-left, var(--border-radius-base)));
  border-top-right-radius: var(--input-border-radius-top, var(--input-border-radius-top-right, var(--border-radius-base)));
  border-bottom-left-radius: var(--input-border-radius-bottom, var(--input-border-radius-bottom-left, var(--border-radius-base)));
  border-bottom-right-radius: var(--input-border-radius-bottom, var(--input-border-radius-bottom-right, var(--border-radius-base)));
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-control:not([size]) {
  width: 100%;
}
@media (max-width: 31.98em) {
  .form-control:not(.search__input) {
    width: 100% !important;
  }
}
.form-control[type=file] {
  overflow: hidden;
}
.form-control[type=file]:not(:disabled):not([readonly]) {
  cursor: var(--cursor, pointer);
}
select.form-control:focus, select.form-control:focus-visible {
  border-bottom-right-radius: var(--border-radius-bottom, 0);
  border-bottom-left-radius: var(--border-radius-bottom, 0);
}

.group-checkbox .control-wrapper,
.group-radiobox .control-wrapper {
  --label-font-weight: 400;
}
.group-checkbox .control-wrapper,
.group-radiobox .control-wrapper {
  display: var(--display, flex);
}

.form-control--disabled {
  color: var(--form-control-disabled);
  --cursor: not-allowed;
}

input[type=checkbox],
input[type=radio] {
  /* Add if not using autoprefixer */
  /* Remove most all native input styles */
  appearance: none;
  /* For iOS < 15 */
  background-color: var(--form-icon-background-color, var(--white));
  /* Not removed via appearance */
  margin: 0;
  font: inherit;
  color: currentColor;
  width: var(--form-icon-size-square, var(--form-icon-size-width, 1.6rem));
  height: var(--form-icon-size-square, var(--form-icon-size-height, 1.6rem));
  min-width: var(--form-icon-size-square, var(--form-icon-size-width, 1.6rem));
  border: var(--form-icon-border-width, 0.1rem) solid var(--form-icon-border-color, var(--gray-light));
  align-items: center;
  justify-content: center;
  --icon-margin-horizontal: 0.8rem;
  --icon-position-top: 0.4rem;
}
input[type=checkbox] + label, input[type=checkbox]:not(:disabled):not([readonly]),
input[type=radio] + label,
input[type=radio]:not(:disabled):not([readonly]) {
  cursor: var(--cursor, pointer);
}
input[type=checkbox]::before,
input[type=radio]::before {
  content: "";
  width: var(--form-icon-size-square, var(--form-icon-size-width, 0.9rem));
  height: var(--form-icon-size-square, var(--form-icon-size-height, 0.9rem));
  min-width: var(--form-icon-size-square, var(--form-icon-size-width, 0.9rem));
  transform: scale(0) translate(-50%, -50%);
  transform-origin: bottom left;
  transition: 120ms transform ease-in-out;
  box-shadow: inset 0.9rem 0.9rem var(--form-icon-color, var(--gray-light));
  background-color: var(--form-icon-color, var(--gray-light));
  position: absolute;
  left: 50%;
  top: 50%;
  /* Windows High Contrast Mode */
}
input[type=checkbox]:checked,
input[type=radio]:checked {
  --form-icon-background-color: var(--form-icon-background-color-checked, var(--white));
  --form-icon-border-color: var(--form-icon-border-color-checked, var(--input-border-color));
}
input[type=checkbox]:checked::before,
input[type=radio]:checked::before {
  transform: scale(1) translate(-50%, -50%);
}
input[type=checkbox]:disabled,
input[type=radio]:disabled {
  --form-control-color: var(--form-control-disabled);
  color: var(--form-control-disabled);
  cursor: var(--cursor, not-allowed);
}

input[type=checkbox] {
  border-radius: var(--border-radius, var(--gray-light));
}
input[type=checkbox]::before {
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

input[type=radio] {
  border-radius: 50%;
}
input[type=radio]::before {
  border-radius: 50%;
}

.group-btn {
  margin-top: var(--margin-vertical, var(--margin-vertical-top, 1.6rem));
}

.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}
.input-group .form-control,
.input-group .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
  border-top-right-radius: var(--input-border-radius-right, var(--input-border-radius-top-right, 0));
  border-bottom-right-radius: var(--input-border-radius-right, var(--input-border-radius-bottom-right, 0));
}
.input-group .form-control:focus,
.input-group .form-select:focus {
  z-index: 3;
}
.input-group [class*=btn-],
.input-group button {
  position: relative;
  z-index: 2;
  border-top-left-radius: var(--input-border-radius-left, var(--input-border-radius-top-left, 0));
  border-bottom-left-radius: var(--input-border-radius-left, var(--input-border-radius-bottom-left, 0));
}
.input-group [class*=btn-]:focus,
.input-group button:focus {
  z-index: 3;
}
.input-group__btn {
  margin-left: -0.1rem;
  display: flex;
}

select:focus {
  outline: none;
}

label,
legend {
  position: relative;
  max-width: 100%;
}
label .label-required > span,
legend .label-required > span {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
label .label-required:before,
legend .label-required:before {
  content: "*";
  color: var(--alertbox-danger-text-color);
}

.is-readonly label,
.is-readonly .form-control {
  cursor: var(--cursor, pointer);
  --cursor: not-allowed;
}
.is-readonly input {
  opacity: 0.3;
}
.is-readonly:hover input, .is-readonly:focus-visible input, .is-readonly:focus-within input {
  opacity: 1;
}

.hide-label label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.has-errors:not(:focus):not(:focus-within) {
  --input-text-color: var(--alertbox-danger-text-color);
  --input-background-color: var(--alertbox-danger-background-color);
  --input-border-color: var(--alertbox-danger-border-color);
}

.text-alert,
.text-danger {
  padding-top: var(--padding-vertical, var(--padding-vertical-top, 0.5rem));
  color: var(--text-color, var(--alertbox-danger-text-color));
}

/* components used for streetmap */
/*------------------**
|  Streetmap buttons |
**------------------*/
.btn-toggle-panel {
  --btn-text-color: var(--black);
  --btn-background-color: transparent;
  --btn-border-color: transparent;
  --btn-text-color-hover: var(--black);
  --btn-background-color-hover: transparent;
  --btn-border-color-hover: transparent;
  --icon-color-primary: var(--black);
  --icon-color-hover: var(--black);
  --btn-icon-color-primary: var(--black);
  --btn-icon-color-hover: var(--black);
}

.btn-link {
  --btn-text-color: var(--btn-link-text-color, var(--gray-base));
  --btn-background-color: var(--btn-link-background-color, transparent);
  --btn-border-color: var(--btn-link-border-color, transparent);
  --btn-text-color-hover: var(--btn-link-text-color-hover, var(--gray-dark));
  --btn-background-color-hover: var(--btn-link-background-color-hover, transparent);
  --btn-border-color-hover: var(--btn-link-border-color, transparent);
  --icon-color-primary: var(--btn-link-text-color, var(--gray-base));
  --icon-color-hover: var(--btn-link-text-color-hover, var(--gray-dark));
  --btn-icon-color-primary: var(--btn-link-text-color, var(--gray-base));
  --btn-icon-color-hover: var(--btn-link-text-color-hover, var(--gray-dark));
  border-width: 0;
  font-size: 1.4rem;
  justify-content: flex-start;
  --btn-padding-horizontal: 0;
  --btn-border-radius-top: 0;
  --btn-border-radius-bottom: 0;
  --btn-icon-color-primary: var(--btn-link-text-color);
  --btn-icon-color-hover: var(--btn-link-text-color-hover);
  text-decoration-line: var(--btn-link-decoration, underline);
  text-decoration-color: var(--btn-link-decoration-color, var(--color1-base));
  text-underline-offset: var(--btn-link-decoration-offset, 0.1rem);
  text-decoration-thickness: var(--btn-link-decoration-thickness, 0.1rem);
  transition-property: background-color, color, border, text-decoration;
}
.btn-link:hover, .btn-link:focus-visible {
  text-decoration-color: var(--btn-link-decoration-color-hover, var(--color2-base));
}
.btn-link svg use {
  fill: var(--gray-base);
}
.btn-link:hover {
  text-decoration-color: var(--gray-dark);
}
.btn-link:hover svg use {
  fill: var(--gray-dark);
}
@container body (inline-size <= 1024px) {
  .btn-link {
    font-size: 1.6rem;
  }
}

.btn-primary {
  font-size: 1.6rem;
  --btn-text-color: var(--gray-base);
  --btn-background-color: var(--white);
  --btn-border-color: var(--gray-base);
  --btn-text-color-hover: var(--white);
  --btn-background-color-hover: var(--gray-base);
  --btn-border-color-hover: var(--gray-base);
  --btn-border-style: solid;
  --btn-border-width: 1px;
  --icon-color-primary: var(--gray-base);
  --icon-color-hover: var(--white);
  --btn-icon-color-primary: var(--gray-base);
  --btn-icon-color-hover: var(--white);
  border-radius: 2px;
}
@container body (inline-size <= 1024px) {
  .btn-primary {
    font-size: clamp(1.6rem, 2cqi, 1.8rem);
  }
}
.btn-primary svg use {
  fill: var(--gray-base);
}
.btn-primary:hover {
  color: var(--white) !important;
}
.btn-primary:hover svg use {
  fill: var(--white) !important;
}

.btn-secondary {
  --btn-text-color: var(--black);
  --btn-background-color: var(--white);
  --btn-border-color: var(--white);
  --btn-text-color-hover: var(--white);
  --btn-background-color-hover: csvvar(black);
  --btn-border-color-hover: csvvar(black);
  --icon-color-primary: var(--black);
  --icon-color-hover: var(--white);
  --btn-icon-color-primary: var(--black);
  --btn-icon-color-hover: var(--white);
  --btn-background-color-hover: var(--black);
  --btn-border-color-hover: var(--black);
  border-radius: 2px;
  padding: 0.5cqh 0.5cqw;
  gap: 0.5cqw;
}
.btn-secondary .svg__icon {
  --icon-margin-horizontal: 0;
}
.btn-secondary:hover .svg__icon, .btn-secondary:focus-visible .svg__icon {
  --icon-color-primary: var(--white);
}
.btn-secondary:hover .svg__icon use, .btn-secondary:focus-visible .svg__icon use {
  fill: var(--white);
}
.btn-secondary.active {
  background-color: var(--black);
  color: var(--white);
  border-color: var(--black);
}
.btn-secondary.active .svg__icon {
  --icon-color-primary: var(--white);
}
.btn-secondary.active .svg__icon use {
  fill: var(--white);
}

.toggle__view, .toggle__layers {
  z-index: 1;
  position: absolute;
  background-color: var(--white);
  display: flex;
  flex-direction: row;
  gap: 0.5cqw;
  align-items: center;
  font-size: 1.4rem;
}
@container body (inline-size <= 1024px) {
  .toggle__view, .toggle__layers {
    font-size: 1.6rem;
    padding: 0.5cqh 1cqw;
  }
}
.toggle__view {
  top: 1cqh;
  right: 1cqw;
  box-shadow: -2px 2px 5px var(--gray-base);
}
@container body (inline-size <= 1024px) {
  .toggle__view {
    top: auto;
    bottom: 1cqh;
    right: auto;
    left: 1cqw;
    box-shadow: -2px -2px 5px var(--gray-base);
  }
}
.toggle__layers {
  bottom: 1cqh;
  left: 1cqw;
  box-shadow: -2px -2px 5px var(--gray-base);
}
@container body (inline-size <= 1024px) {
  .toggle__layers {
    top: 7.2rem;
    bottom: auto;
    left: auto;
    right: 1cqw;
    box-shadow: -2px 2px 5px var(--gray-base);
  }
  .toggle__layers span {
    display: none;
  }
}

a {
  text-decoration-color: var(--gray-base);
}

[class*=btn-]:not(.btn-sorting, .toolbar-list [class*=btn-])[target=_blank]::after, button:not(.btn-sorting, .toolbar-list [class*=btn-])[target=_blank]::after {
  display: none;
}

/**********************
* Poi *
**********************/
.streetmap .poi-svg__wrapper {
  width: var(--size-width, 4rem);
  height: var(--size-height, 4.8rem);
  position: relative;
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
  --icon-color-primary: var(--white);
  --icon-size-width: 4rem;
  --icon-size-height: 4.8rem;
}
.streetmap .poi-svg__wrapper::before, .streetmap .poi-svg__wrapper::after {
  content: "";
}
.streetmap .poi-svg__wrapper::before {
  -webkit-mask-image: var(--icon-background-url, url("data:image/svg+xml;utf8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42.716 51.563'%3e%3cpath d='M39.461,38.461l-15.1,15.1-15.1-15.1a21.358,21.358,0,1,1,30.205,0Z' transform='translate%28-3 -2%29' fill='%23fff'/%3e%3c/svg%3e"));
  mask-image: var(--icon-background-url, url("data:image/svg+xml;utf8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42.716 51.563'%3e%3cpath d='M39.461,38.461l-15.1,15.1-15.1-15.1a21.358,21.358,0,1,1,30.205,0Z' transform='translate%28-3 -2%29' fill='%23fff'/%3e%3c/svg%3e"));
  background-repeat: no-repeat;
  background-color: var(--icon-color-primary, var(--icon-color));
  background-size: var(--icon-size-width, var(--icon-size-square, 2.4rem)) var(--icon-size-height, var(--icon-size-square, 2.4rem));
  width: var(--icon-size-width, var(--icon-size-square, 2.4rem));
  height: var(--icon-size-height, var(--icon-size-square, 2.4rem));
  min-width: var(--icon-size-width, var(--icon-size-square, 2.4rem));
  transition: all var(--transition-duration-base) var(--transition-timing-function);
}
.streetmap .poi-svg__wrapper.poi-hover {
  --poi-background-color: var(--gray-light);
  transform: scale(1.25) !important;
}
.streetmap .poi-svg__wrapper.poi-hover.active::before {
  --icon-color-primary: var(--gray-light);
}
.streetmap .poi-svg__wrapper.active {
  transform: scale(1.25) !important;
}
.streetmap .poi-svg__wrapper.active::before {
  background-color: var(--poi-background-color, var(--gray-base));
}
.streetmap .poi-svg__holder {
  width: var(--size-square, var(--size-width, 100%));
  height: var(--size-square, var(--size-height, 100%));
  min-width: var(--size-square, var(--size-width, 100%));
  position: absolute;
  left: 0;
  top: 0;
}
.streetmap .poi-svg__holder::before {
  width: var(--size-square, var(--size-width, calc(4rem - 0.6rem)));
  height: var(--size-square, var(--size-height, calc(4rem - 0.6rem)));
  min-width: var(--size-square, var(--size-width, calc(4rem - 0.6rem)));
  border-radius: var(--border-radius, 50%);
  content: "";
  position: absolute;
  top: calc(0.6rem / 2);
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--poi-background-color, var(--gray-base));
  z-index: 3;
}
.streetmap .poi-svg__icon {
  fill: var(--white);
  width: 2.5rem !important;
  height: 2.5rem !important;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0.8rem;
  z-index: 4;
  padding: 2px;
}
.streetmap .poi:has(.logo) {
  width: auto !important;
  height: auto !important;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  row-gap: 1rem;
  z-index: 2147483646 !important;
}
.streetmap .logo {
  padding-top: var(--box-padding-vertical, var(--box-padding-vertical-top, 1cqh));
  padding-bottom: var(--box-padding-vertical, var(--box-padding-vertical-bottom, 1cqh));
  padding-left: var(--box-padding-horizontal, var(--box-padding-horizontal-left, 0.8cqw));
  padding-right: var(--box-padding-horizontal, var(--box-padding-horizontal-right, 0.8cqw));
  border-top-left-radius: var(--box-border-radius-top, var(--box-border-radius-top-left, 2px));
  border-top-right-radius: var(--box-border-radius-top, var(--box-border-radius-top-right, 2px));
  border-bottom-left-radius: var(--box-border-radius-bottom, var(--box-border-radius-bottom-left, 2px));
  border-bottom-right-radius: var(--box-border-radius-bottom, var(--box-border-radius-bottom-right, 2px));
  background-color: var(--white);
}
.streetmap .logo img {
  width: 12rem;
  height: auto;
}

.marker-cluster div {
  width: var(--size-width, 5rem);
  height: var(--size-height, 5.8rem);
  position: relative;
  width: var(--size-square, var(--size-width, 100%));
  height: var(--size-square, var(--size-height, 100%));
  min-width: var(--size-square, var(--size-width, 100%));
  position: absolute;
  left: 0;
  top: 0;
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
}
.marker-cluster div::before {
  width: var(--size-square, var(--size-width, calc(5rem - 0.6rem)));
  height: var(--size-square, var(--size-height, calc(5rem - 0.6rem)));
  min-width: var(--size-square, var(--size-width, calc(5rem - 0.6rem)));
  border-radius: var(--border-radius, 50%);
  border: solid 3px var(--white);
  content: "";
  position: absolute;
  top: calc(0.6rem / 2);
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--poi-background-color, var(--gray-base));
  z-index: 3;
}
.marker-cluster span {
  color: var(--white);
  font-size: 1.8rem !important;
  font-weight: bold;
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translateX(-50%);
  z-index: 4;
}

[data-animate="1"] .poi-svg__wrapper {
  opacity: 0;
  animation-name: poiEntrance;
  animation-duration: 2.2s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-delay: var(--poi-animation-delay, 0.2s);
  animation-timing-function: ease-out;
}
[data-animate="1"] .poi-svg__wrapper::after {
  animation-name: poiEntranceShadow;
  animation-duration: 2.2s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-delay: var(--poi-animation-delay, 0.2s);
  animation-timing-function: ease-out;
}
[data-animate="1"] .poi-svg__wrapper.highlight {
  opacity: 1;
  animation-name: poiHighlight;
  animation-duration: 2.2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}
[data-animate="1"] .poi-svg__wrapper.highlight::after {
  animation-name: poiHighlightShadow;
  animation-duration: 2.2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}

@keyframes poiEntrance {
  0% {
    transform: translateY(-4rem);
    opacity: 0;
  }
  35% {
    transform: translateY(-4rem);
    opacity: 0;
  }
  50% {
    transform: translateY(0);
    opacity: 1;
  }
  52% {
    transform: translateY(0);
  }
  61% {
    transform: translateY(-2.2rem);
  }
  62% {
    transform: translateY(-2.2rem);
  }
  70% {
    transform: translateY(0);
  }
  72% {
    transform: translateY(0);
  }
  81% {
    transform: translateY(-0.8rem);
  }
  82% {
    transform: translateY(-0.8rem);
  }
  86% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes poiEntranceShadow {
  0% {
    width: var(--size-width, calc(4rem / 2));
    height: var(--size-height, calc(4rem / 6.5));
    opacity: 0;
    transform: translate(-50%, 4rem);
  }
  35% {
    width: var(--size-width, calc(4rem / 2));
    height: var(--size-height, calc(4rem / 6.5));
    opacity: 0;
    transform: translate(-50%, 4rem);
  }
  50% {
    width: var(--size-width, calc(4rem / 1.5));
    height: var(--size-height, calc(4rem / 5));
    opacity: 1;
    transform: translate(-50%, 0);
  }
  52% {
    width: var(--size-width, calc(4rem / 1.5));
    height: var(--size-height, calc(4rem / 5));
    opacity: 1;
    transform: translate(-50%, 0);
  }
  61% {
    width: var(--size-width, calc(4rem / 2));
    height: var(--size-height, calc(4rem / 6));
    opacity: 0.6;
    transform: translate(-50%, 2.2rem);
  }
  62% {
    width: var(--size-width, calc(4rem / 2));
    height: var(--size-height, calc(4rem / 6));
    opacity: 0.6;
    transform: translate(-50%, 2.2rem);
  }
  70% {
    width: var(--size-width, calc(4rem / 1.5));
    height: var(--size-height, calc(4rem / 5));
    opacity: 1;
    transform: translate(-50%, 0);
  }
  72% {
    width: var(--size-width, calc(4rem / 1.5));
    height: var(--size-height, calc(4rem / 5));
    opacity: 1;
    transform: translate(-50%, 0);
  }
  81% {
    width: var(--size-width, calc(4rem / 2));
    height: var(--size-height, calc(4rem / 5.5));
    opacity: 0.8;
    transform: translate(-50%, 0.8rem);
  }
  82% {
    width: var(--size-width, calc(4rem / 2));
    height: var(--size-height, calc(4rem / 5.5));
    opacity: 0.8;
    transform: translate(-50%, 0.8rem);
  }
  86% {
    width: var(--size-width, calc(4rem / 1.5));
    height: var(--size-height, calc(4rem / 5));
    opacity: 1;
    transform: translate(-50%, 0);
  }
  100% {
    width: var(--size-width, calc(4rem / 1.5));
    height: var(--size-height, calc(4rem / 5));
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
@keyframes poiHighlight {
  0% {
    transform: translateY(0);
  }
  12% {
    transform: translateY(0);
  }
  21% {
    transform: translateY(-0.8rem);
  }
  22% {
    transform: translateY(-0.8rem);
  }
  30% {
    transform: translateY(0);
  }
  32% {
    transform: translateY(0);
  }
  41% {
    transform: translateY(-0.8rem);
  }
  42% {
    transform: translateY(-0.8rem);
  }
  50% {
    transform: translateY(0);
  }
  52% {
    transform: translateY(0);
  }
  61% {
    transform: translateY(-0.8rem);
  }
  62% {
    transform: translateY(-0.8rem);
  }
  70% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes poiHighlightShadow {
  0% {
    width: var(--size-width, calc(4rem / 1.5));
    height: var(--size-height, calc(4rem / 5));
    opacity: 1;
    transform: translate(-50%, 0);
  }
  12% {
    width: var(--size-width, calc(4rem / 1.5));
    height: var(--size-height, calc(4rem / 5));
    opacity: 1;
    transform: translate(-50%, 0);
  }
  21% {
    width: var(--size-width, calc(4rem / 2));
    height: var(--size-height, calc(4rem / 5.5));
    opacity: 0.8;
    transform: translate(-50%, 0.8421052632rem);
  }
  22% {
    width: var(--size-width, calc(4rem / 2));
    height: var(--size-height, calc(4rem / 5.5));
    opacity: 0.8;
    transform: translate(-50%, 0.8421052632rem);
  }
  30% {
    width: var(--size-width, calc(4rem / 1.5));
    height: var(--size-height, calc(4rem / 5));
    opacity: 1;
    transform: translate(-50%, 0);
  }
  32% {
    width: var(--size-width, calc(4rem / 1.5));
    height: var(--size-height, calc(4rem / 5));
    opacity: 1;
    transform: translate(-50%, 0);
  }
  41% {
    width: var(--size-width, calc(4rem / 2));
    height: var(--size-height, calc(4rem / 5.5));
    opacity: 0.8;
    transform: translate(-50%, 0.8421052632rem);
  }
  42% {
    width: var(--size-width, calc(4rem / 2));
    height: var(--size-height, calc(4rem / 5.5));
    opacity: 0.8;
    transform: translate(-50%, 0.8421052632rem);
  }
  50% {
    width: var(--size-width, calc(4rem / 1.5));
    height: var(--size-height, calc(4rem / 5));
    opacity: 1;
    transform: translate(-50%, 0);
  }
  52% {
    width: var(--size-width, calc(4rem / 1.5));
    height: var(--size-height, calc(4rem / 5));
    opacity: 1;
    transform: translate(-50%, 0);
  }
  61% {
    width: var(--size-width, calc(4rem / 2));
    height: var(--size-height, calc(4rem / 5.5));
    opacity: 0.8;
    transform: translate(-50%, 0.8421052632rem);
  }
  62% {
    width: var(--size-width, calc(4rem / 2));
    height: var(--size-height, calc(4rem / 5.5));
    opacity: 0.8;
    transform: translate(-50%, 0.8421052632rem);
  }
  70% {
    width: var(--size-width, calc(4rem / 1.5));
    height: var(--size-height, calc(4rem / 5));
    opacity: 1;
    transform: translate(-50%, 0);
  }
  100% {
    width: var(--size-width, calc(4rem / 1.5));
    height: var(--size-height, calc(4rem / 5));
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
@media (min-width: 32em) {
  .leaflet__info {
    padding-left: var(--padding-horizontal, var(--padding-horizontal-left, 1.2rem));
    padding-right: var(--padding-horizontal, var(--padding-horizontal-right, 1.2rem));
  }
}
.leaflet__info > div:not(:last-child) {
  --paragraph-margin-vertical-bottom: 0.5rem;
}
.leaflet__title {
  font-weight: var(--title-font-weight, 700);
  font-size: var(--title-font-size, 1.8rem);
  color: var(--title-color, var(--link-color));
  padding-right: var(--padding-horizontal, var(--padding-horizontal-right, 2rem));
}
.leaflet__short {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* number of lines to show */
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.leaflet__short + .leaflet__short {
  font-size: var(--title-font-size, 1.4rem);
  color: var(--address-color, #6c757d);
}
.leaflet-container--temp {
  position: relative;
  width: var(--size-square, var(--size-width, 80rem));
  height: var(--size-square, var(--size-height, 80rem));
  min-width: var(--size-square, var(--size-width, 80rem));
}
.leaflet-container .leaflet-popup-content-wrapper {
  border-radius: var(--border-radius, 1px);
}
.leaflet-container .leaflet-popup-content {
  position: relative;
  width: 45rem !important;
  padding-top: var(--padding-vertical, var(--padding-vertical-top, 0.5rem));
  padding-bottom: var(--padding-vertical, var(--padding-vertical-bottom, 0.5rem));
  padding-left: var(--padding-horizontal, var(--padding-horizontal-left, 0.8rem));
  padding-right: var(--padding-horizontal, var(--padding-horizontal-right, 0.8rem));
  margin-top: var(--margin-vertical, var(--margin-vertical-top, 0));
  margin-bottom: var(--margin-vertical, var(--margin-vertical-bottom, 0));
  margin-left: var(--margin-horizontal, var(--margin-horizontal-left, 0));
  margin-right: var(--margin-horizontal, var(--margin-horizontal-right, 0));
  display: var(--display, flex);
}
@media (max-width: 31.98em) {
  .leaflet-container .leaflet-popup-content {
    max-width: 32rem !important;
  }
}
@media (max-width: 31.98em) {
  .leaflet-container .leaflet-popup-content {
    flex-direction: var(--flex-direction, column);
  }
}
.leaflet-container .leaflet-popup a.leaflet-popup-close-button {
  width: var(--size-square, var(--size-width, 4.2rem));
  height: var(--size-square, var(--size-height, 4.2rem));
  min-width: var(--size-square, var(--size-width, 4.2rem));
  border-radius: var(--border-radius, 50%);
  display: var(--display, flex);
  align-items: var(--align-items, center);
  justify-content: var(--justify-content, center);
  font-size: var(--font-size, 1.6rem);
  background-color: var(--close-background-color, var(--link-color));
  color: var(--close-color, var(--white));
  padding-top: var(--padding-vertical, var(--padding-vertical-top, 0));
  padding-bottom: var(--padding-vertical, var(--padding-vertical-bottom, 0));
  padding-left: var(--padding-horizontal, var(--padding-horizontal-left, 0));
  padding-right: var(--padding-horizontal, var(--padding-horizontal-right, 0));
  position: var(--position, absolute);
  top: var(--position-top, -0.5rem);
  right: var(--position-right, -0.5rem);
  bottom: var(--position-bottom, auto);
  left: var(--position-left, auto);
  z-index: 1080;
}
.leaflet-container .leaflet-popup a.leaflet-popup-close-button:hover {
  --close-background-color: var(--link-color-hover);
  color: var(--close-color, var(--white));
}
.leaflet-container .one-media {
  width: var(--size-square, var(--size-width, 15rem));
  height: var(--size-square, var(--size-height, 15rem));
  min-width: var(--size-square, var(--size-width, 15rem));
  --media-border-radius-top: 1px;
  --media-border-radius-bottom: 1px;
}
.leaflet-container .link-hover:hover .leaflet__title, .leaflet-container .link-hover:focus-visible .leaflet__title, .leaflet-container .link-hover:focus-within .leaflet__title {
  --title-color: var(--link-color-hover);
}
.detail {
  position: absolute;
  z-index: 2147483646;
  background-color: var(--white);
  border-radius: 2px;
  top: 7cqh;
  right: 1cqw;
  min-width: 10cqw;
  max-width: 35rem;
  max-height: 90cqh;
  overflow-y: auto;
}
.detail__content {
  padding-top: var(--box-padding-vertical, var(--box-padding-vertical-top, 1cqh));
  padding-bottom: var(--box-padding-vertical, var(--box-padding-vertical-bottom, 1cqh));
  padding-left: var(--box-padding-horizontal, var(--box-padding-horizontal-left, 1cqw));
  padding-right: var(--box-padding-horizontal, var(--box-padding-horizontal-right, 1cqw));
  border-top-left-radius: var(--box-border-radius-top, var(--box-border-radius-top-left, 2px));
  border-top-right-radius: var(--box-border-radius-top, var(--box-border-radius-top-right, 2px));
  border-bottom-left-radius: var(--box-border-radius-bottom, var(--box-border-radius-bottom-left, 2px));
  border-bottom-right-radius: var(--box-border-radius-bottom, var(--box-border-radius-bottom-right, 2px));
}
.detail__content .header__wrapper {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.5rem;
}
.detail__close {
  padding: 0;
}
.detail__close svg {
  margin-right: 0;
}
.detail__image img {
  object-fit: cover;
  aspect-ratio: 1/1;
  border-radius: 2px;
}
.detail__info {
  margin-top: 1cqh;
  display: flex;
  flex-direction: column;
  row-gap: 1cqh;
}
.detail__info-genre {
  font-size: 1.4rem;
  font-weight: 500;
}
.detail__info h3 {
  font-size: 1.6rem;
  margin-bottom: 0;
}
.detail__info .adres {
  justify-content: flex-start;
  padding: 0;
  margin: 0;
}
.detail__info .adres:hover {
  color: var(--gray-dark) !important;
  text-decoration-color: var(--gray-dark);
}
.detail__info a:not(.btn-primary) {
  color: var(--gray-base);
}
.detail__info a:not(.btn-primary):hover {
  color: var(--gray-dark);
}
.detail__info-text {
  font-size: 1.6rem;
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  width: 100%;
  overflow-wrap: break-word;
}
.detail__info-text a {
  text-decoration-color: var(--gray-base);
}
.detail__info-text center {
  order: 1;
}
.detail__info-text center img {
  object-fit: cover;
  aspect-ratio: 1/1;
  border-radius: 2px;
}
.detail__info-text ul {
  margin-left: 1.8rem;
}
.detail__info-text.big {
  display: none;
}
.detail__info-text.big.open {
  display: flex;
}
.detail__info-leesmeer {
  justify-content: flex-start;
}
.detail__adres {
  font-size: 1.4rem;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
}
.detail__btn {
  width: 100%;
}
@container body (inline-size <= 1024px) {
  .detail {
    top: 12.2rem;
    max-height: 55cqh;
    box-shadow: -2px 2px 5px var(--gray-base);
  }
  .detail__btn {
    --btn-text-color: var(--white);
    --btn-background-color: var(--gray-base);
    --btn-border-color: var(--gray-base);
    --btn-text-color-hover: var(--white);
    --btn-background-color-hover: var(--gray-base);
    --btn-border-color-hover: var(--gray-base);
    --btn-border-style: solid;
    --btn-border-width: 1px;
    --icon-color-primary: var(--white);
    --icon-color-hover: var(--white);
    --btn-icon-color-primary: var(--white);
    --btn-icon-color-hover: var(--white);
  }
  .detail__btn svg use {
    fill: var(--white);
  }
}
@container body (inline-size <= 640px) {
  .detail {
    top: auto;
    bottom: 0;
    max-height: 60cqh;
    min-width: 100vw;
    left: 0;
    border-radius: 0;
    overflow-y: visible;
    box-shadow: -2px -2px 5px var(--gray-base);
  }
  .detail__content {
    max-width: 35rem;
    margin: auto;
    overflow-y: scroll;
    max-height: 58cqh;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .detail__content .header__wrapper {
    flex-basis: 100%;
  }
  .detail__content:has(img) .detail__image {
    flex-basis: 50%;
  }
  .detail__content:has(img) .detail__image img {
    width: 100%;
  }
  .detail__content:has(img) .detail__info-header {
    flex-basis: calc(50% - 1rem);
    margin-left: 1rem;
  }
  .detail__content:has(img) .detail__info-other {
    flex-basis: 100%;
    width: 100%;
  }
  .detail__content:has(img) .detail__info-other .detail__btn {
    width: 100%;
    padding: 0.5rem auto;
  }
  .detail__info-header {
    flex-basis: 100%;
  }
  .detail__info-other {
    flex-basis: 100%;
  }
  .detail__close {
    position: absolute;
    border-radius: 2px;
    box-shadow: -2px -2px 5px var(--gray-base);
    padding: 0.5rem 0.5rem;
    text-decoration: none;
    --btn-text-color: var(--white);
    --btn-background-color: var(--black);
    --btn-border-color: var(--black);
    --btn-text-color-hover: var(--white);
    --btn-background-color-hover: var(--gray-base);
    --btn-border-color-hover: var(--gray-base);
    --btn-border-style: solid;
    --btn-border-width: 1px;
    --icon-color-primary: var(--white);
    --icon-color-hover: var(--white);
    --btn-icon-color-primary: var(--white);
    --btn-icon-color-hover: var(--white);
    top: -4rem;
    z-index: 2147483646;
  }
  .detail__close svg use {
    fill: var(--white);
  }
}

/* Structure */
/*-----------------**
|  Header streetmap |
**-----------------*/
.search {
  display: flex;
  column-gap: 1cqw;
  --icon-color: var(--black);
  border-radius: 2px;
}
@container body (inline-size <= 1024px) {
  .search {
    --input-background-color: var(--white);
    --input-border-style: none;
  }
}

.select2-container--default {
  width: 100% !important;
}

.searchbar__btn {
  --btn-background-color: var(--gray-lighter);
  --btn-border-color: var(--gray-lighter);
  --btn-background-color-hover: var(--gray-light);
  --btn-border-color-hover: var(--gray-light);
  --btn-border-width: 0.1rem;
}
.searchbar__btn svg {
  margin: auto;
}

.select2 {
  border-radius: 2px;
}
.select2-dropdown {
  border-radius: 2px;
}
@container body (inline-size <= 1024px) {
  .select2-dropdown {
    --input-background-color: var(--white);
    --input-border-style: none;
    box-shadow: -2px 2px 5px var(--gray-base) !important;
  }
}
.select2-selection {
  border-radius: 2px;
}
.select2-selection__arrow {
  height: 1.5rem !important;
  width: 1.5rem !important;
  right: 1.2rem !important;
}
.select2-selection__arrow::before {
  --icon-position-top: -10%;
  -webkit-mask-image: var(--icon-background-url, url("data:image/svg+xml;utf8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath d='M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15z' /%3e%3c/svg%3e"));
  mask-image: var(--icon-background-url, url("data:image/svg+xml;utf8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath d='M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15z' /%3e%3c/svg%3e"));
  background-repeat: no-repeat;
  background-color: var(--icon-color-primary, var(--gray-base));
  background-size: var(--icon-size-width, var(--icon-size-square, 1.5rem)) var(--icon-size-height, var(--icon-size-square, 1.5rem));
  width: var(--icon-size-width, var(--icon-size-square, 1.5rem));
  height: var(--icon-size-height, var(--icon-size-square, 1.5rem));
  min-width: var(--icon-size-width, var(--icon-size-square, 1.5rem));
  transition: all var(--transition-duration-base) var(--transition-timing-function);
}
.select2-selection__arrow b {
  display: none;
}
.select2-selection__clear {
  margin-right: 25px !important;
  height: 100% !important;
}

@container body (inline-size > 1024px) {
  .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--gray-light) !important;
    color: var(--black) !important;
  }
}
@container body (inline-size <= 1024px) {
  .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--gray-lighter) !important;
    color: var(--black) !important;
  }
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border-bottom: 1px solid var(--gray-light) !important;
  border: none !important;
  background-color: var(--white) !important;
}
@container body (inline-size <= 1024px) {
  .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--gray-lighter) !important;
  }
}

body:has(.select2-container) {
  overflow: hidden;
}

.footer {
  background-color: transparent;
  width: 100%;
  font-size: 1.4rem;
  padding-top: var(--padding-vertical, var(--padding-vertical-top, 0.5cqh));
  padding-bottom: var(--padding-vertical, var(--padding-vertical-bottom, 0.5cqh));
  flex-grow: 0;
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.5cqw;
  font-size: 1.1rem;
}
.footer__links {
  display: flex;
  flex-direction: row;
  column-gap: 1cqw;
  flex-wrap: wrap;
}
.footer__links a {
  color: var(--gray-base);
  text-decoration-color: var(--gray-base);
}
.footer__links a:hover {
  color: var(--black);
  text-decoration-color: var(--black);
}

.list {
  container: list/inline-size;
  padding: 1cqh 0.8cqw;
  order: 4;
  display: none;
  background-color: var(--white);
  flex-basis: 35%;
  container: list/inline-size;
  overflow: hidden;
  border-radius: 2px;
}
.list.active {
  display: block;
}
.list__content {
  display: flex;
  flex-direction: column;
  row-gap: 1cqh;
}
.list__content .header__wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
@container list (inline-size <= 200px) {
  .list__content .header__wrapper {
    flex-direction: column;
    align-items: flex-start;
  }
}
.list__content .header__wrapper span {
  font-size: 1.6rem;
  font-weight: bold;
}
.list .item {
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  padding-top: var(--box-padding-vertical, var(--box-padding-vertical-top, 1cqh));
  padding-bottom: var(--box-padding-vertical, var(--box-padding-vertical-bottom, 1cqh));
  padding-left: var(--box-padding-horizontal, var(--box-padding-horizontal-left, calc(3cqw + 5px)));
  padding-right: var(--box-padding-horizontal, var(--box-padding-horizontal-right, calc(3cqw + 5px)));
  border-top-left-radius: var(--box-border-radius-top, var(--box-border-radius-top-left, 2px));
  border-top-right-radius: var(--box-border-radius-top, var(--box-border-radius-top-right, 2px));
  border-bottom-left-radius: var(--box-border-radius-bottom, var(--box-border-radius-bottom-left, 2px));
  border-bottom-right-radius: var(--box-border-radius-bottom, var(--box-border-radius-bottom-right, 2px));
  background-color: var(--white);
}
.list .item:hover {
  background-color: var(--gray-lighter);
}
.list .item__list {
  display: flex;
}
.list .item::after {
  bottom: 0;
  width: 100%;
  left: 50%;
  background-color: var(--gray-base);
  height: 2px;
  position: absolute;
}
.list .item__info {
  text-wrap: pretty;
  font-size: clamp(1.6rem, 4cqi, 2rem);
  display: flex;
  flex-direction: column;
}
.list .item__info-title {
  font-weight: 600;
}
.list .item__info-wrapper {
  display: flex;
  flex-direction: column;
}
.list .item__info .adres {
  font-size: clamp(1.2rem, 4cqi, 1.4rem);
  color: var(--black);
  text-decoration-color: var(--black);
}
.list .item__info .straat {
  font-size: clamp(1.2rem, 4cqi, 1.4rem);
}
.list .item__info .gemeente {
  font-size: clamp(1.2rem, 4cqi, 1.4rem);
}
.list .item__info .btn-link {
  font-size: 1.4rem;
}
.list .item__info .btn-primary {
  font-size: 1.4rem;
}
.list .item__buttons-wrapper {
  margin-top: 1cqh;
  width: 100%;
  display: flex;
  flex-direction: row;
  column-gap: 2cqw;
}
.list .item.active {
  background-color: var(--gray-lighter);
}
.list .item.active:before {
  top: 0;
  left: 0;
  height: 100%;
  width: 5px;
  background-color: var(--color-primary, var(--color1-base));
  border-radius: 2px 0 0 2px;
  content: "";
  position: absolute;
}
@container body (inline-size > 1024px) {
  .list {
    max-width: 60rem;
  }
  .list .item {
    column-gap: 2.5cqw;
    align-items: flex-start;
    flex-direction: row-reverse;
    justify-content: space-between;
  }
  .list .item:not(:has(img)) .item__info {
    width: 100%;
  }
  .list .item__info {
    width: 65%;
    row-gap: 0.2cqh;
    align-items: flex-start;
  }
  .list .item__info-wrapper {
    width: 100%;
  }
  .list .item__info-title, .list .item__info-genre, .list .item__info .straat, .list .item__info .gemeente {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
  }
  .list .item__list {
    flex-direction: column;
    row-gap: 3cqh;
    height: 90cqh;
    overflow-y: auto;
  }
  .list .item img {
    object-fit: cover;
    aspect-ratio: 1/1;
    width: 30%;
    border-radius: 2px;
  }
}
@container body (inline-size <= 1024px) {
  .list {
    width: 100%;
    container: list/inline-size;
    padding: 2rem 0.8cqw;
    flex-basis: fit-content;
    padding-bottom: 2rem;
  }
  .list__content {
    height: fit-content;
    padding-bottom: 3.5rem;
  }
  .list .item {
    min-width: 32rem;
    max-width: 32rem;
    flex-direction: row;
    align-items: flex-start;
    column-gap: 1.5rem;
    padding-left: var(--padding-horizontal, var(--padding-horizontal-left, calc(1.5rem + 7px)));
    padding-right: var(--padding-horizontal, var(--padding-horizontal-right, calc(1.5rem + 7px)));
    padding-top: var(--padding-vertical, var(--padding-vertical-top, 1cqh));
    padding-bottom: var(--padding-vertical, var(--padding-vertical-bottom, 1cqh));
    border-radius: 2px;
  }
  .list .item__list {
    flex-direction: row;
    column-gap: 1cqw;
    overflow-x: auto;
    width: 100%;
    overflow-y: hidden;
  }
  .list .item:not(:has(img)) .item__info {
    width: calc(32rem - (1.5rem + 7px) * 2);
  }
  .list .item__info {
    width: calc(23.5rem - (1.5rem + 7px) * 2);
    height: fit-content;
  }
  .list .item__info-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
  }
  .list .item img {
    object-fit: cover;
    aspect-ratio: 1/1;
    border-radius: 2px;
    width: 7rem;
    height: auto;
  }
  .list .item:nth-child(2n) {
    background-color: var(--gray-lighter);
  }
  .list .item.active:before {
    width: 7px;
  }
}
@container body (inline-size <= 640px) {
  .list .item {
    min-width: 25rem;
    max-width: 25rem;
    column-gap: 1.5rem;
    padding-left: var(--padding-horizontal, var(--padding-horizontal-left, 0.8rem));
    padding-right: var(--padding-horizontal, var(--padding-horizontal-right, 0.8rem));
    padding-top: var(--padding-vertical, var(--padding-vertical-top, 1cqh));
    padding-bottom: var(--padding-vertical, var(--padding-vertical-bottom, 1cqh));
  }
  .list .item__info {
    width: calc(16.5rem - (1.5rem + 7px) * 2);
  }
  .list .item:not(:has(img)) .item__info {
    width: calc(25rem - (1.5rem + 7px) * 2);
  }
}

/* Global modules used for streetmap */
/*-------------------------------**
|  Frontend-website cookie module  |
**-------------------------------*/
.cookie-compliance {
  color: var(--box-text-color, var(--black));
  background-color: var(--box-background-color, var(--white));
  --link-color: var(--box-link-color, var(--black));
  --link-color-hover: var(--box-link-color-hover, hsla(var(--black-h), var(--black-s), var(--black-l), 85%));
  --link-decoration-color: var(--box-link-color, var(--black));
  --link-decoration-color-hover: var(--box-link-color-hover, hsla(var(--black-h), var(--black-s), var(--black-l), 85%));
  --btn-link-text-color: var(--black);
  --btn-link-text-color-hover: hsla(var(--black-h), var(--black-s), var(--black-l), 85%);
  --btn-link-background-color-hover: transparent;
  --btn-link-background-color: transparent;
  --btn-link-decoration-color: var(--black);
  --btn-link-decoration-color-hover: hsla(var(--black-h), var(--black-s), var(--black-l), 85%);
  --btn-icon-color-primary: var(--black);
  --btn-icon-color-hover: hsla(var(--black-h), var(--black-s), var(--black-l), 85%);
  padding-top: var(--box-padding-vertical, var(--box-padding-vertical-top, 1.4rem));
  padding-bottom: var(--box-padding-vertical, var(--box-padding-vertical-bottom, 1.4rem));
  padding-left: var(--box-padding-horizontal, var(--box-padding-horizontal-left, 1.6rem));
  padding-right: var(--box-padding-horizontal, var(--box-padding-horizontal-right, 1.6rem));
  font-size: var(--box-font-size, var(--font-size, 1.4rem));
  border-top-left-radius: var(--box-border-radius-top, var(--box-border-radius-top-left, 0));
  border-top-right-radius: var(--box-border-radius-top, var(--box-border-radius-top-right, 0));
  border-bottom-left-radius: var(--box-border-radius-bottom, var(--box-border-radius-bottom-left, 0));
  border-bottom-right-radius: var(--box-border-radius-bottom, var(--box-border-radius-bottom-right, 0));
}
.cookie-compliance__wrapper {
  --paragraph-margin-vertical-bottom: 0.8rem;
}
@media (min-width: 48em) {
  .cookie-compliance__wrapper {
    text-align: center;
  }
}
@media (max-width: 31.98em) {
  .cookie-compliance__link, .cookie-compliance__btn {
    width: 100%;
  }
}
.cookie-compliance__actions.list-inline {
  --list-inline-gutter-vertical: 0.8rem;
  --list-inline-justify-content: center;
}
@media (min-width: 32em) {
  .cookie-compliance__actions {
    text-align: center;
  }
}
.cookie-compliance .btn-link {
  --btn-font-size: 1.4rem;
}
.cookie-compliance__btn {
  --btn-text-color: var(--black);
  --btn-background-color: var(--white);
  --btn-border-color: var(--color1-light);
  --btn-text-color-hover: var(--black);
  --btn-background-color-hover: var(--color1-light);
  --btn-border-color-hover: var(--color1-light);
  --icon-color-primary: var(--black);
  --icon-color-hover: var(--black);
  --btn-icon-color-primary: var(--black);
  --btn-icon-color-hover: var(--black);
  --btn-padding-vertical: 0.3rem;
  --btn-font-size: 1.4rem;
  --btn-border-radius-top: 0px;
  --btn-border-radius-bottom: 0px;
}

.box-your-cookie-settings .cookie-settings__info {
  font-size: var(--font-size, 1.4rem);
  display: flex;
}
.box-your-cookie-settings .cookie-settings__icon {
  --icon-margin-horizontal: 0.5rem;
  --icon-position-top: 0.4rem;
}

.filters {
  order: 1;
  flex-basis: 35%;
  container: bar/inline-size;
  overflow: hidden;
  height: 100%;
  --box-background-color: var(--white);
  --box-background-color-hover: var(--white);
  --box-border-width: 0;
}
.filters__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-basis: content;
  flex-grow: 0;
}
@container bar (width <=250px) {
  .filters__header {
    flex-direction: column;
    align-items: flex-start;
  }
}
.filters__header-title {
  font-weight: bold;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  gap: 0.5cqw;
}
.filters__wrapper {
  width: 100%;
  height: 100%;
}
.filters__content {
  display: flex;
  flex-direction: column;
  row-gap: 1cqh;
  height: 100%;
  flex: auto;
}
.filters__content .searchbar {
  margin-bottom: 1cqh;
}
.filters__content form {
  flex-grow: 1;
  overflow: hidden;
}
.filters__content-info {
  height: 100%;
}
.filters__content-items {
  height: calc(100% - 6rem);
  overflow-y: auto;
  overflow-x: hidden;
}
.filters__content-items:has(.filter-group.open) {
  height: auto;
}
.filters .list-filter {
  margin-left: var(--margin-horizontal, var(--margin-horizontal-left, 5px));
  margin-right: var(--margin-horizontal, var(--margin-horizontal-right, 5px));
  display: flex;
  flex-direction: column;
  row-gap: 1cqh;
  padding: 0.5cqh 0;
}
.filters .filter-group {
  position: relative;
}
.filters .filter .title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  background-color: var(--gray-lighter);
  padding: 0.5rem 0.5rem;
  border-radius: 2px;
  z-index: 2;
}
.filters .filter .title button {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.filters .filter .title svg {
  margin-left: 0;
}
.filters .filter .checkboxlist-item {
  --display: inline;
}
.filters .filter .checkboxlist-item .filter-item {
  display: flex;
  align-items: center;
}
.filters .filter .checkboxlist-item .filter-item:has(:not(.filter-item--sub)) {
  container-type: inline-size;
}
.filters .filter .checkboxlist-item .filter-item__info {
  --label-margin-vertical: 0;
  width: 100%;
  display: flex;
  justify-content: flex-start;
}
.filters .filter .checkboxlist-item .filter-item__info .title-wrapper {
  display: flex;
  align-items: center;
}
.filters .filter .checkboxlist-item .filter-item__info .poi-svg__wrapper {
  width: 4.5cqw;
  height: 4.5cqw;
  min-width: 2.5rem;
  min-height: 2.5rem;
  border-radius: 50% 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: var(--color1-base);
  margin-right: 2cqw;
}
.filters .filter .checkboxlist-item .filter-item__info .poi-svg__wrapper svg {
  display: inline-block;
  margin: 0 auto;
  min-width: 1.6rem;
  min-height: 1.6rem;
  width: 2.5cqw;
  height: 2.5cqw;
}
.filters .filter .checkboxlist-item .filter-item__info .poi-svg__wrapper svg use {
  --icon-color-primary: var(--white) !important;
}
.filters .filter .checkboxlist-item .filter-item__info:has(.btn-chklist-toggle) {
  justify-content: space-between;
}
.filters .filter .checkboxlist-item .filter-item__info:has(.btn-chklist-toggle) .btn-chklist-toggle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50% 50%;
  display: flex;
  align-self: center;
  background-color: var(--white);
}
.filters .filter .checkboxlist-item .filter-item__info:has(.btn-chklist-toggle) .btn-chklist-toggle svg {
  margin-right: 0;
}
.filters .filter .checkboxlist-item .filter-item__title {
  text-wrap: wrap;
  color: var(--black);
}
.filters .filter .checkboxlist-item .filter-item input {
  border-color: var(--black);
  --icon-position-top: auto;
  margin-right: 1.5rem;
  border-radius: 3px;
}
.filters .filter .checkboxlist-item .filter-item input:checked {
  background-color: var(--black);
}
.filters .filter .checkboxlist-item .filter-item input:before {
  background-color: var(--white);
  box-shadow: none;
}
.filters .filter .checkboxlist-item:has(.list-sub-filter:not(.hidden)) .btn-chklist-toggle {
  transition: all 0.2s ease-in-out;
  background-color: var(--gray-lighter);
}
.filters .filter .checkboxlist-item:has(.list-sub-filter) .list-sub-filter {
  margin-left: 5cqw;
  row-gap: 1cqh;
  padding: 0.8cqh 0;
  display: flex;
  flex-direction: column;
  position: relative;
}
.filters .filter .checkboxlist-item:has(.list-sub-filter) .list-sub-filter .checkboxlist-item:not(:last-child) {
  position: relative;
}
.filters .filter .checkboxlist-item:has(.list-sub-filter) .list-sub-filter .checkboxlist-item:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: -0.5cqh;
  width: 100%;
  height: 1px;
  border-radius: 2px;
  background-color: var(--gray-lighter);
}
@container body (inline-size > 1024px) {
  .filters {
    max-width: 60rem;
  }
  .filters__header-button {
    display: none;
  }
  .filters .filter .checkboxlist-item:has(:not(.filter-item--sub)) {
    width: 100%;
  }
  .filters .filter .checkboxlist-item__info .title-wrapper {
    align-items: flex-start;
  }
  .filters .filter .checkboxlist-item .filter-item__title {
    font-size: clamp(1.4rem, 4cqi, 1.6rem);
  }
  .filters .filter .title {
    width: 97cqw;
  }
  .filters .filter .title span {
    font-size: 1.6rem;
  }
  .filters .filter .list-filter .checkboxlist-item .title-wrapper .poi-svg__wrapper {
    width: 6cqi;
    height: 6cqi;
    min-width: 2.5rem;
    min-height: 2.5rem;
  }
  .filters .filter .list-filter .checkboxlist-item .title-wrapper .poi-svg__wrapper svg {
    width: 4cqi;
    height: 4cqi;
    min-width: 2rem;
    min-height: 2rem;
    padding: 2px;
  }
}
@container body (inline-size <=1024px) {
  .filters {
    height: fit-content;
    width: 100dvw;
    padding: 0;
    z-index: 2147483646;
    overflow: visible;
    background-color: transparent;
    position: absolute;
    left: 0;
    top: 0;
    padding: 1rem 1cqw;
  }
  .filters:has(.filters__content-info.open) {
    height: 100dvh;
  }
  .filters:has(.filters__content-info.open) .filters__content .filters__header .filters-clear {
    display: inline-block;
  }
  .filters__content {
    row-gap: 0.2cqh;
  }
  .filters__content-info {
    display: none;
  }
  .filters__content-info.open {
    display: flex;
    position: absolute;
    background-color: #fff;
    z-index: calc(2147483646 - 1);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    flex-direction: column;
  }
  .filters__content-items {
    margin-top: 9rem;
    padding: 0 1cqw;
    width: 100%;
    height: calc(100dvh - 10rem) !important;
  }
  .filters__content .searchbar {
    z-index: 2147483646;
    width: 100%;
    margin-bottom: 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    border-radius: 2px;
    background-color: var(--white);
    box-shadow: -2px 2px 5px var(--gray-base);
  }
  .filters__content form {
    overflow: visible;
  }
  .filters__apply-button {
    margin: 1cqh 1cqw;
    background-color: var(--black);
    color: var(--white);
    border-color: var(--black);
  }
  .filters__header-title {
    display: none;
  }
  .filters__header-button {
    box-shadow: -2px 2px 5px var(--gray-base);
    z-index: 2147483646;
  }
  @container bar (inline-size <=430px) {
    .filters__header-button {
      padding: 0 1.5rem;
    }
    .filters__header-button span {
      display: none;
    }
  }
  .filters__info:has(.btn-chklist-toggle) .btn-chklist-toggle svg {
    min-width: 1.8rem;
    min-height: 1.8rem;
    width: 2.5cqi;
    height: 2.5cqi;
  }
  .filters__form-wrapper {
    height: 4.5rem;
    display: flex;
    column-gap: 2cqw;
    z-index: 2147483646;
  }
  .filters-clear {
    z-index: 2147483646;
    display: none;
    position: fixed;
    right: 1cqw;
    top: 6.5rem;
    --btn-padding-horizontal: 0.5rem;
    --btn-background-color: var(--white);
    --btn-border-color: var(--white);
    --btn-background-color-hover: var(--white);
    --btn-border-color-hover: var(--white);
  }
  .filters .filter-group {
    height: calc(100vh - 13cqh);
  }
  .filters .filter-group .title span {
    font-size: clamp(1.8rem, 4cqi, 2.8rem);
  }
  .filters .filter-group .title button {
    height: 4rem;
  }
  .filters .filter-group .filter-item {
    padding: 0.5rem 0;
    min-height: 3rem;
  }
  .filters .filter-group .filter-item input {
    min-width: 1.8rem;
    min-height: 1.8rem;
    width: 2.5cqi;
    height: 2.5cqi;
  }
  .filters .filter-group .filter-item__title {
    font-size: clamp(1.6rem, 4cqi, 2.5rem);
  }
  .filters .filter-group .control-wrapper {
    padding-top: 0.5rem;
  }
  .filters .list-filter {
    margin: 0.5cqh 0;
  }
}

.map__block {
  order: 2;
  overflow: hidden;
  flex-basis: 100%;
  background-color: var(--gray-base);
  position: relative;
  z-index: 1;
  border-radius: 2px;
}

.cookie-compliance {
  z-index: 2147483647;
  position: absolute;
  bottom: 6rem;
  right: 1cqw;
  margin-left: 1cqw;
  padding: 1cqh 1.5cqw;
  box-shadow: -2px -2px 5px var(--gray-base);
  border-radius: 2px;
}
.cookie-compliance .container {
  --container-gutter-horizontal: 0;
}
.cookie-compliance__text {
  padding: 1rem 0;
}
.cookie-compliance-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 1rem;
  row-gap: 0.5rem;
  justify-content: center;
}
.cookie-compliance-actions button {
  flex-basis: calc(50% - 0.5rem);
}
.cookie-compliance-actions a {
  flex-basis: auto;
  margin: 0;
  color: var(--gray-base);
  text-decoration-color: var(--gray-base);
}
.cookie-compliance-actions a:hover {
  color: var(--gray-dark);
  text-decoration-color: var(--gray-dark);
}
.cookie-compliance__btn {
  border-radius: 1px;
  --btn-text-color: var(--black);
  --btn-background-color: var(--white);
  --btn-border-color: var(--color-primary, var(--color1-base));
  --btn-text-color-hover: var(--black);
  --btn-background-color-hover: var(--white);
  --btn-border-color-hover: var(--color-primary, var(--color1-base));
  --btn-border-style: solid;
  --btn-border-width: 2px;
  --icon-color-primary: var(--black);
  --icon-color-hover: var(--black);
  --btn-icon-color-primary: var(--black);
  --btn-icon-color-hover: var(--black);
}

.layer-options {
  z-index: 2147483646;
  position: absolute;
  bottom: 5rem;
  left: 1cqw;
}
@container body (inline-size <= 1024px) {
  .layer-options {
    top: 11.1rem;
    bottom: auto;
    left: auto;
    right: 1cqw;
  }
}
.layer-options ul {
  list-style: none;
}
.layer-options ul label {
  color: var(--white);
  cursor: pointer;
  font-weight: normal;
}
.layer-options__content {
  margin-bottom: 1cqh;
  padding-top: var(--box-padding-vertical, var(--box-padding-vertical-top, 0.5cqh));
  padding-bottom: var(--box-padding-vertical, var(--box-padding-vertical-bottom, 0.5cqh));
  padding-left: var(--box-padding-horizontal, var(--box-padding-horizontal-left, 1cqi));
  padding-right: var(--box-padding-horizontal, var(--box-padding-horizontal-right, 1cqi));
  font-size: var(--box-font-size, var(--font-size, clamp(1.2rem, 4cqi, 1.6rem)));
  border-top-left-radius: var(--box-border-radius-top, var(--box-border-radius-top-left, 2px));
  border-top-right-radius: var(--box-border-radius-top, var(--box-border-radius-top-right, 2px));
  border-bottom-left-radius: var(--box-border-radius-bottom, var(--box-border-radius-bottom-left, 2px));
  border-bottom-right-radius: var(--box-border-radius-bottom, var(--box-border-radius-bottom-right, 2px));
  background-color: var(--black);
  box-shadow: -2px -2px 5px var(--gray-base);
}
@container body (inline-size <= 1024px) {
  .layer-options__content {
    margin-top: 1cqh;
    box-shadow: -2px 2px 5px var(--gray-base);
  }
}

/* layout page streetmap */
/*----------------------------------**
|  Index pagina van streetmap module  |
**----------------------------------*/
.map {
  font-size: 1.8rem;
  margin: 1cqh 1cqh;
  height: calc(100dvh - 2cqh);
  container-type: inline-size;
  display: flex;
  column-gap: 1cqi;
  position: relative;
  overflow: hidden;
}
@container body (inline-size > 1024px) {
  .map {
    flex-direction: row;
  }
}
@container body (inline-size <= 1024px) {
  .map {
    flex-direction: column;
    margin: 0;
    height: 100dvh;
    gap: 0;
    position: relative;
  }
}
@container body (inline-size <= 640px) {
  .map:has(.detail:not(.hidden)) .list.active {
    display: none;
  }
}

.streetmap {
  height: 100%;
  flex-basis: 75%;
  z-index: -1;
}

#streetmap-interaction-info {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--white);
  border-radius: 2px;
  z-index: 2147483647;
  width: 60%;
  left: 20%;
  top: 1cqh;
  padding: 1cqh 0;
  box-shadow: -2px 2px 5px var(--gray-base);
}

.leaflet-control {
  margin: 0 !important;
  box-shadow: -2px 2px 5px var(--gray-base) !important;
  border: none !important;
  border-radius: 2px !important;
}
.leaflet-control:has(.footer) a {
  color: var(--gray-base) !important;
}
.leaflet-control:has(.footer) a:hover, .leaflet-control:has(.footer) a:focus-visible {
  --link-color-hover: var(--gray-dark);
}
.leaflet-top {
  top: 1cqh !important;
}
@container body (inline-size <= 1024px) {
  .leaflet-top {
    top: 7.2rem !important;
  }
}
.leaflet-left {
  left: 1cqw !important;
}
.leaflet-bottom .leaflet-control {
  border-radius: 2px 2px 0 0;
}
/*# sourceMappingURL=../../maps/layout/modules/streetmap.css.map */