@charset "UTF-8";
/*---------------------------------------------------------------*/
/*-------------------------- manon-dev.scss ---------------------*/
/*---------------------------------------------------------------*/
/* Application color scheme */
/* Common basis for all builds */
/*---------------------------------------------------------------*/
/*-------------------------- shared.scss ------------------------*/
/*---------------------------------------------------------------*/
/* File import, general */
/*----------------------------------------------------------------------------------*/
/*-------------------------------- variables.scss ----------------------------------*/
/*----------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------*/
/*------------------------------- _functions.scss ----------------------------------*/
/*----------------------------------------------------------------------------------*/
/* Darker color of the application colors. For text white or black are used. */
/* Darker colored text on tinted backgrounds set to match the WCAG A requirements */
/* Darker colored text on tinted backgrounds set to match the WCAG AAA requirements */
/*----------------------------------------------------------------------------------*/
/*------------------------------ ro-branding.scss ----------------------------------*/
/*----------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------*/
/*--- Warning: Do not change this file unless the branding has been updated. ----*/
/*-------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------*/
/*-------------------------- ro-branding-colors.scss -------------------------------*/
/*----------------------------------------------------------------------------------*/
/* Colors */
/* See https://www.rijkshuisstijl.nl/basiselementen/basiselementen-online/online-kleuren for
a visual overview of the colors within the branding with */
/* Background colors */
/* Default size text with grey-6 or higher passed to WCAG compliance contrast requirements AA on a white background. */
/* Default size text with grey-7 or higher passed to WCAG compliance contrast requirements AAA a white background. */
/* Notification colors */
/* Notification colors - darker tint */
/* Notifiation intense color variant */
/* Use light text for contrast */
/* Use dark text for contrast */
/* Use light text for contrast */
/* Use light text for contrast */
/* Text color */
/* Ok to use on background up till grey-2 */
/* Link color */
/* Border color */
/* Full set of colors */
/* CTA */
/* Colors as defined in:  https://www.rijkshuisstijl.nl/basiselementen/basiselementen-online/online-kleuren*/
/*@import "branding/ro-branding-colors-WCAG-AA";*/
/* Colors adjustments to comply with WCAG AA requirements */
/*@import "branding/ro-branding-colors-WCAG-AAA";*/
/* Colors adjustments to comply with WCAG AAA requirements */
/* Fonts */
/* Font size */
/* E.g: Heading size for page headers */
/* E.g: Default heading size for headers of elements and sections */
/* E.g: Default header size for sub-headers within a section */
/* E.g: Headers within a summary of items like articles, where there are multiple headers near each other */
/* E.g: introduction paragraphs */
/* Slightly increased font size for readability. E.g: menu items */
/* Default text size */
/* E.g footnotes, meta data */
/* Font size combined with line-height and margins based on the fontsize.   */
/* Calculations used are from w3c suggestions. 								*/
/*   - Line-height at least 1.5 times the font size.						*/
/*   - Spacing underneath paragraph at least 2 times the font size. 		*/
/* Source:																	*/
/* https://www.w3.org/WAI/GL/low-vision-a11y-tf/wiki/Adapting_Text#:~:text=line%20height%20(line%20spacing)%20to,0.16%20times%20the%20font%20size */
/* The list of defined colors and variables specific for Rijksoverheid branding */
/* How to:
- Set the variables in this file to the colors/fonts of your choosing. 
- Choose one of the available variables or options from the list below.
	- Colors
		- purple
		- violet
		- ruby-red
		- pink
		- red
		- orange
		- dark-yellow
		- yellow
		- dark-brown
		- brown
		- dark-green
		- green
		- moss-green
		- mint-green
		- dark-blue
		- sky-blue
		- light-blue
	- Background colors
		- $white
		- $grey-1
		- $grey-2
		- $grey-3
		- $grey-4
		- $grey-5
		- $grey-6
		- $grey-7
	- Text colors
		- $text-dark
		- $text-light 
	- Fonts
		- $aplication-web-font
		- $application-online-magazin-font
	- Text size
		- $font-heading-size-large: 2.88651rem; E.g: Heading size for page headers
		- $font-heading-size-default: 2.02729rem; E.g: Default heading size for headers of elements and sections
		- $font-heading-size-medium: 1.80203rem; E.g: Default header size for sub-headers within a section
		- $font-heading-size-small: 1.60181rem; E.g: Headers within a summary of items like articles, where there are multiple headers near each other
		- $font-size-text-emphasized: 1.60181rem; E.g: introduction paragraphs 
		- $font-size-text-larger: 1.26562rem; Slightly increased font size for readability. E.g: menu items
		- $font-size-text: 1.125rem; Default text size
		- $font-size-text-de-emphasized: 0.88889rem; E.g footnotes, meta data
*/
/*-------------------------------------------------------------------------------*/
/*------------------------- Application settings --------------------------------*/
/*-------------------------------------------------------------------------------*/
/* Application color default tint */
/* Application color tint 1 */
/* Application color tint 2 */
/* Background colors */
/* Messaging colors intense */
/* Message colors intense, darker tint */
.tint-1,
.col {
  background-color: #efb2ce;
}

.tint-2 {
  background-color: #f7d9e7;
}

/* svg icon urls */
/* Icon styling within text */
/* Column break avoid browser compatability */
/* Layout */
/* when altering these values please update the bug fix in expando-rows-render-issue as well */
/* Spacing between elements */
/*----------------------------------------------------------------------------------*/
/*-------------------------------- ro-icons.scss -----------------------------------*/
/*----------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------*/
/*------------------------ icons/gezondheid-en-zorg.scss ---------------------------*/
/*----------------------------------------------------------------------------------*/
:root {
  --ro-icon-voor-elkaar-zorgen: "";
  --ro-icon-hart-met-oudere: "";
  --ro-icon-hart-tussen-2-uitgestoken-handen: "";
  --ro-icon-hoofd-silhouet-hoesten: "";
  --ro-icon-hoofd-silhouet-met-wattenstaafje-bij-mond: "";
  --ro-icon-jeugdzorg: "";
  --ro-icon-gezinszorg-met-oudere: "";
  --ro-icon-gezinszorg: "";
  --ro-icon-man-met-hart: "";
  --ro-icon-man-met-pleister1: "";
  --ro-icon-man-met-pot-met-deksel: "";
  --ro-icon-medisch-beroepsgeheim: "";
  --ro-icon-verzorgingstehuis: "";
  --ro-icon-langdurige-zorg: "";
  --ro-icon-persoon-in-rolstoel-en-munten: "";
  --ro-icon-persoon-met-rugpijn: "";
  --ro-icon-persoon-staand-met-hart: "";
  --ro-icon-rollator-bij-trap: "";
  --ro-icon-kinderbescherming: "";
  --ro-icon-verboden-te-roken: "";
  --ro-icon-vrouw-en-persoon-in-rolstoel: "";
  --ro-icon-mantelzorg: "";
  --ro-icon-ouderenzorg: "";
  --ro-icon-welzijnswerk-ouderen: "";
  --ro-icon-noodopvang: "";
  --ro-icon-opvang-en-nazorg: "";
  --ro-icon-hoofd-silhouet-met-wattenstaafje-bij-neus: "";
  --ro-icon-rokende-filtersigaret: "";
  --ro-icon-koorts: "";
  --ro-icon-benauwdheid: "";
  --ro-icon-geen-spatscherm: "";
  --ro-icon-schone-handen: "";
  --ro-icon-mondkapje: "";
  --ro-icon-man-met-mondkapje: "";
  --ro-icon-puber-met-mondkapje: "";
  --ro-icon-psychologische-hulp: "";
  --ro-icon-vrouw-met-pot-met-deksel: "";
  --ro-icon-coronavaccinsvg: "";
  --ro-icon-ehbo-aed: "";
  --ro-icon-ehbo-ruimte: "";
  --ro-icon-kolfruimte: "";
  --ro-icon-esculaap: "";
  --ro-icon-verbod-rolstoel: "";
}

.ro-icon:before {
  font-family: "RO Icons";
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 1.125rem;
  position: static;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Firefox */
  font-smoothing: antialiased;
  margin-right: 0.25rem;
  color: inherit;
}
.ro-icon.ro-icon-voor-elkaar-zorgen:before {
  content: "";
}
.ro-icon.ro-icon-hart-met-oudere:before {
  content: "";
}
.ro-icon.ro-icon-hart-tussen-2-uitgestoken-handen:before {
  content: "";
}
.ro-icon.ro-icon-hoofd-silhouet-hoesten:before {
  content: "";
}
.ro-icon.ro-icon-hoofd-silhouet-met-wattenstaafje-bij-mond:before {
  content: "";
}
.ro-icon.ro-icon-jeugdzorg:before {
  content: "";
}
.ro-icon.ro-icon-gezinszorg-met-oudere:before {
  content: "";
}
.ro-icon.ro-icon-gezinszorg:before {
  content: "";
}
.ro-icon.ro-icon-man-met-hart:before {
  content: "";
}
.ro-icon.ro-icon-man-met-pleister1:before {
  content: "";
}
.ro-icon.ro-icon-man-met-pot-met-deksel:before {
  content: "";
}
.ro-icon.ro-icon-medisch-beroepsgeheim:before {
  content: "";
}
.ro-icon.ro-icon-verzorgingstehuis:before {
  content: "";
}
.ro-icon.ro-icon-langdurige-zorg:before {
  content: "";
}
.ro-icon.ro-icon-persoon-in-rolstoel-en-munten:before {
  content: "";
}
.ro-icon.ro-icon-persoon-met-rugpijn:before {
  content: "";
}
.ro-icon.ro-icon-persoon-staand-met-hart:before {
  content: "";
}
.ro-icon.ro-icon-rollator-bij-trap:before {
  content: "";
}
.ro-icon.ro-icon-kinderbescherming:before {
  content: "";
}
.ro-icon.ro-icon-verboden-te-roken:before {
  content: "";
}
.ro-icon.ro-icon-vrouw-en-persoon-in-rolstoel:before {
  content: "";
}
.ro-icon.ro-icon-mantelzorg:before {
  content: "";
}
.ro-icon.ro-icon-ouderenzorg:before {
  content: "";
}
.ro-icon.ro-icon-welzijnswerk-ouderen:before {
  content: "";
}
.ro-icon.ro-icon-noodopvang:before {
  content: "";
}
.ro-icon.ro-icon-opvang-en-nazorg:before {
  content: "";
}
.ro-icon.ro-icon-hoofd-silhouet-met-wattenstaafje-bij-neus:before {
  content: "";
}
.ro-icon.ro-icon-rokende-filtersigaret:before {
  content: "";
}
.ro-icon.ro-icon-koorts:before {
  content: "";
}
.ro-icon.ro-icon-benauwdheid:before {
  content: "";
}
.ro-icon.ro-icon-koorts:before {
  content: "";
}
.ro-icon.ro-icon-geen-spatscherm:before {
  content: "";
}
.ro-icon.ro-icon-schone-handen:before {
  content: "";
}
.ro-icon.ro-icon-mondkapje:before {
  content: "";
}
.ro-icon.ro-icon-man-met-mondkapje:before {
  content: "";
}
.ro-icon.ro-icon-puber-met-mondkapje:before {
  content: "";
}
.ro-icon.ro-icon-psychologische-hulp:before {
  content: "";
}
.ro-icon.ro-icon-vrouw-met-pot-met-deksel:before {
  content: "";
}
.ro-icon.ro-icon-coronavaccinsvg:before {
  content: "";
}
.ro-icon.ro-icon-ehbo-aed:before {
  content: "";
}
.ro-icon.ro-icon-ehbo-ruimte:before {
  content: "";
}
.ro-icon.ro-icon-kolfruimte:before {
  content: "";
}
.ro-icon.ro-icon-esculaap:before {
  content: "";
}
.ro-icon.ro-icon-verbod-rolstoel:before {
  content: "";
}

/*----------------------------------------------------------------------------------*/
/*----------------------- icons/computer-en-internet.scss --------------------------*/
/*----------------------------------------------------------------------------------*/
:root {
  --ro-icon-chip: "";
  --ro-icon-computer: "";
  --ro-icon-oude-computer: "";
  --ro-icon-dataverkeer: "";
  --ro-icon-digitaal-onderzoek: "";
  --ro-icon-digitale-uitwisseling: "";
  --ro-icon-nieuwe-computer: "";
  --ro-icon-gamecontroller: "";
  --ro-icon-grafieken-op-beeldscherm: "";
  --ro-icon-beeldscherm-met-hartpng: "";
  --ro-icon-hybride-laptop: "";
  --ro-icon-informatie-op-internet: "";
  --ro-icon-internet: "";
  --ro-icon-ga-naar-www: "";
  --ro-icon-internet-archief: "";
  --ro-icon-laptop: "";
  --ro-icon-laptop-met-huis: "";
  --ro-icon-cybersecurity: "";
  --ro-icon-printer: "";
  --ro-icon-server: "";
  --ro-icon-smartphone: "";
  --ro-icon-smartphone-bedienen-met-vinger: "";
  --ro-icon-usb-lader: "";
  --ro-icon-tablet: "";
  --ro-icon-televisie: "";
  --ro-icon-website: "";
  --ro-icon-webwinkel: "";
  --ro-icon-ict: "";
  --ro-icon-computercode: "";
  --ro-icon-digitalisering: "";
  --ro-icon-ux-design: "";
  --ro-icon-database: "";
  --ro-icon-application: "";
  --ro-icon-basisregistratie: "";
  --ro-icon-gegevensuitwisseling: "";
  --ro-icon-smartphone-met-streep-erdoor: "";
  --ro-icon-beeldscherm-met-streep-erdoor: "";
  --ro-icon-inloggen: "";
  --ro-icon-online-leren: "";
  --ro-icon-online-groepstraining: "";
  --ro-icon-wifi: "";
  --ro-icon-beeldbellen: "";
  --ro-icon-zendmast: "";
}

.ro-icon:before {
  font-family: "RO Icons";
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 1.125rem;
  position: static;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Firefox */
  font-smoothing: antialiased;
  margin-right: 0.25rem;
  color: inherit;
}
.ro-icon.ro-icon-chip:before {
  content: "";
}
.ro-icon.ro-icon-computer:before {
  content: "";
}
.ro-icon.ro-icon-oude-computer:before {
  content: "";
}
.ro-icon.ro-icon-dataverkeer:before {
  content: "";
}
.ro-icon.ro-icon-digitaal-onderzoek:before {
  content: "";
}
.ro-icon.ro-icon-digitale-uitwisseling:before {
  content: "";
}
.ro-icon.ro-icon-nieuwe-computer:before {
  content: "";
}
.ro-icon.ro-icon-gamecontroller:before {
  content: "";
}
.ro-icon.ro-icon-grafieken-op-beeldscherm:before {
  content: "";
}
.ro-icon.ro-icon-beeldscherm-met-hartpng:before {
  content: "";
}
.ro-icon.ro-icon-hybride-laptop:before {
  content: "";
}
.ro-icon.ro-icon-informatie-op-internet:before {
  content: "";
}
.ro-icon.ro-icon-internet:before {
  content: "";
}
.ro-icon.ro-icon-ga-naar-www:before {
  content: "";
}
.ro-icon.ro-icon-internet-archief:before {
  content: "";
}
.ro-icon.ro-icon-laptop:before {
  content: "";
}
.ro-icon.ro-icon-laptop-met-huis:before {
  content: "";
}
.ro-icon.ro-icon-cybersecurity:before {
  content: "";
}
.ro-icon.ro-icon-printer:before {
  content: "";
}
.ro-icon.ro-icon-server:before {
  content: "";
}
.ro-icon.ro-icon-smartphone:before {
  content: "";
}
.ro-icon.ro-icon-smartphone-bedienen-met-vinger:before {
  content: "";
}
.ro-icon.ro-icon-usb-lader:before {
  content: "";
}
.ro-icon.ro-icon-tablet:before {
  content: "";
}
.ro-icon.ro-icon-televisie:before {
  content: "";
}
.ro-icon.ro-icon-website:before {
  content: "";
}
.ro-icon.ro-icon-webwinkel:before {
  content: "";
}
.ro-icon.ro-icon-ict:before {
  content: "";
}
.ro-icon.ro-icon-computercode:before {
  content: "";
}
.ro-icon.ro-icon-digitalisering:before {
  content: "";
}
.ro-icon.ro-icon-ux-design:before {
  content: "";
}
.ro-icon.ro-icon-database:before {
  content: "";
}
.ro-icon.ro-icon-application:before {
  content: "";
}
.ro-icon.ro-icon-basisregistratie:before {
  content: "";
}
.ro-icon.ro-icon-gegevensuitwisseling:before {
  content: "";
}
.ro-icon.ro-icon-smartphone-met-streep-erdoor:before {
  content: "";
}
.ro-icon.ro-icon-beeldscherm-met-streep-erdoor:before {
  content: "";
}
.ro-icon.ro-icon-inloggen:before {
  content: "";
}
.ro-icon.ro-icon-online-leren:before {
  content: "";
}
.ro-icon.ro-icon-online-groepstraining:before {
  content: "";
}
.ro-icon.ro-icon-wifi:before {
  content: "";
}
.ro-icon.ro-icon-beeldbellen:before {
  content: "";
}
.ro-icon.ro-icon-zendmast:before {
  content: "";
}

/*----------------------------------------------------------------------------------*/
/*------------------------------- icons/gebouwen.scss ------------------------------*/
/*----------------------------------------------------------------------------------*/
:root {
  --ro-icon-2-hoge-gebouwen-met-pijl-naar-rechts: "";
  --ro-icon-huurwoning: "";
  --ro-icon-bakkerijketens: "";
  --ro-icon-koopwoning: "";
  --ro-icon-cateringbedrijven: "";
  --ro-icon-circulaire-bouw: "";
  --ro-icon-dorp: "";
  --ro-icon-gemeente---en-provinciefonds: "";
  --ro-icon-leefbaarheid: "";
  --ro-icon-evenemententent: "";
  --ro-icon-festival-ehbo: "";
  --ro-icon-schone-industrie: "";
  --ro-icon-fabriek-aan-water: "";
  --ro-icon-fabriek-met-stapel-munten: "";
  --ro-icon-uw-cak: "";
  --ro-icon-gebouw-cjib: "";
  --ro-icon-gebouw-cvz: "";
  --ro-icon-gebouw-igz: "";
  --ro-icon-villa: "";
  --ro-icon-ambassade---consulaat: "";
  --ro-icon-school: "";
  --ro-icon-sector-speciaal-onderwijs: "";
  --ro-icon-rechtbank: "";
  --ro-icon-home: "";
  --ro-icon-overstroming-dreiging-1: "";
  --ro-icon-overstroming-dreiging-2: "";
  --ro-icon-overstroming-dreiging-3: "";
  --ro-icon-leegstand: "";
  --ro-icon-kleinschalig-wonen: "";
  --ro-icon-instortingsgevaar: "";
  --ro-icon-woninginbraak: "";
  --ro-icon-huis-visueel-gehandicapten: "";
  --ro-icon-huis-auditief-gehandicapten: "";
  --ro-icon-lokaal-welzijnswerk: "";
  --ro-icon-huis-psychiatrische-patienten: "";
  --ro-icon-verpleeghuis: "";
  --ro-icon-huis-verstandelijk-gehandicapten: "";
  --ro-icon-huis-lichamelijk-gehandicapten: "";
  --ro-icon-woning-gelijkvloers-wel-rollator: "";
  --ro-icon-rolstoel-toegankelijke-woning: "";
  --ro-icon-huurtoeslag: "";
  --ro-icon-adl-woning: "";
  --ro-icon-huisvesting: "";
  --ro-icon-woning-met-verdieping: "";
  --ro-icon-woning-met-traplift: "";
  --ro-icon-coffeeshop: "";
  --ro-icon-coffeeshop-in-wijk: "";
  --ro-icon-huiselijk-geweld: "";
  --ro-icon-beschermde-woonomgeving: "";
  --ro-icon-laag-huis: "";
  --ro-icon-grootstedelijk: "";
  --ro-icon-excellente-scholen: "";
  --ro-icon-gebouw-nvwa: "";
  --ro-icon-gebouw-vws: "";
  --ro-icon-gebouw-zini: "";
  --ro-icon-uitvoering: "";
  --ro-icon-hoog-huis: "";
  --ro-icon-basis-kantoorgebouw: "";
  --ro-icon-schade: "";
  --ro-icon-flat: "";
  --ro-icon-leegstand-en-tijdelijk-gebruik: "";
  --ro-icon-ziekenhuis: "";
  --ro-icon-gebouwenbeheer: "";
  --ro-icon-hoogbouw-met-pijl-naar-2-hoge-gebouwen: "";
  --ro-icon-man-torso-voor-hoogbouw: "";
  --ro-icon-gebouw-ggz: "";
  --ro-icon-zorgkantoor: "";
  --ro-icon-grote-brand: "";
  --ro-icon-actieve-gevel: "";
  --ro-icon-kantoor-vol-energie: "";
  --ro-icon-ondernemingen: "";
  --ro-icon-horecaketens: "";
  --ro-icon-toren: "";
  --ro-icon-moskee: "";
  --ro-icon-ontwerp: "";
  --ro-icon-rijtjeshuis: "";
  --ro-icon-industrie: "";
  --ro-icon-industrie-met-druppel-water: "";
  --ro-icon-schuur-met-silo-erachter: "";
  --ro-icon-stacaravan: "";
  --ro-icon-supermarktketens: "";
  --ro-icon-megastallen: "";
  --ro-icon-smartphone: "";
  --ro-icon-dreiging-van-buitenaf: "";
  --ro-icon-drie-personen-in-huis: "";
  --ro-icon-gebouw-met-busje: "";
  --ro-icon-gemeentehuissvg: "";
}

.ro-icon:before {
  font-family: "RO Icons";
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 1.125rem;
  position: static;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Firefox */
  font-smoothing: antialiased;
  margin-right: 0.25rem;
  color: inherit;
}
.ro-icon.ro-icon-2-hoge-gebouwen-met-pijl-naar-rechts:before {
  content: "";
}
.ro-icon.ro-icon-huurwoning:before {
  content: "";
}
.ro-icon.ro-icon-bakkerijketens:before {
  content: "";
}
.ro-icon.ro-icon-koopwoning:before {
  content: "";
}
.ro-icon.ro-icon-cateringbedrijven:before {
  content: "";
}
.ro-icon.ro-icon-circulaire-bouw:before {
  content: "";
}
.ro-icon.ro-icon-dorp:before {
  content: "";
}
.ro-icon.ro-icon-gemeente---en-provinciefonds:before {
  content: "";
}
.ro-icon.ro-icon-leefbaarheid:before {
  content: "";
}
.ro-icon.ro-icon-evenemententent:before {
  content: "";
}
.ro-icon.ro-icon-festival-ehbo:before {
  content: "";
}
.ro-icon.ro-icon-schone-industrie:before {
  content: "";
}
.ro-icon.ro-icon-fabriek-aan-water:before {
  content: "";
}
.ro-icon.ro-icon-fabriek-met-stapel-munten:before {
  content: "";
}
.ro-icon.ro-icon-uw-cak:before {
  content: "";
}
.ro-icon.ro-icon-gebouw-cjib:before {
  content: "";
}
.ro-icon.ro-icon-gebouw-cvz:before {
  content: "";
}
.ro-icon.ro-icon-gebouw-igz:before {
  content: "";
}
.ro-icon.ro-icon-villa:before {
  content: "";
}
.ro-icon.ro-icon-ambassade---consulaat:before {
  content: "";
}
.ro-icon.ro-icon-school:before {
  content: "";
}
.ro-icon.ro-icon-sector-speciaal-onderwijs:before {
  content: "";
}
.ro-icon.ro-icon-rechtbank:before {
  content: "";
}
.ro-icon.ro-icon-home:before {
  content: "";
}
.ro-icon.ro-icon-overstroming-dreiging-1:before {
  content: "";
}
.ro-icon.ro-icon-overstroming-dreiging-2:before {
  content: "";
}
.ro-icon.ro-icon-overstroming-dreiging-3:before {
  content: "";
}
.ro-icon.ro-icon-leegstand:before {
  content: "";
}
.ro-icon.ro-icon-kleinschalig-wonen:before {
  content: "";
}
.ro-icon.ro-icon-instortingsgevaar:before {
  content: "";
}
.ro-icon.ro-icon-woninginbraak:before {
  content: "";
}
.ro-icon.ro-icon-huis-visueel-gehandicapten:before {
  content: "";
}
.ro-icon.ro-icon-huis-auditief-gehandicapten:before {
  content: "";
}
.ro-icon.ro-icon-lokaal-welzijnswerk:before {
  content: "";
}
.ro-icon.ro-icon-huis-psychiatrische-patienten:before {
  content: "";
}
.ro-icon.ro-icon-verpleeghuis:before {
  content: "";
}
.ro-icon.ro-icon-huis-verstandelijk-gehandicapten:before {
  content: "";
}
.ro-icon.ro-icon-huis-lichamelijk-gehandicapten:before {
  content: "";
}
.ro-icon.ro-icon-woning-gelijkvloers-wel-rollator:before {
  content: "";
}
.ro-icon.ro-icon-rolstoel-toegankelijke-woning:before {
  content: "";
}
.ro-icon.ro-icon-huurtoeslag:before {
  content: "";
}
.ro-icon.ro-icon-adl-woning:before {
  content: "";
}
.ro-icon.ro-icon-huisvesting:before {
  content: "";
}
.ro-icon.ro-icon-woning-met-verdieping:before {
  content: "";
}
.ro-icon.ro-icon-woning-met-traplift:before {
  content: "";
}
.ro-icon.ro-icon-coffeeshop:before {
  content: "";
}
.ro-icon.ro-icon-coffeeshop-in-wijk:before {
  content: "";
}
.ro-icon.ro-icon-huiselijk-geweld:before {
  content: "";
}
.ro-icon.ro-icon-beschermde-woonomgeving:before {
  content: "";
}
.ro-icon.ro-icon-laag-huis:before {
  content: "";
}
.ro-icon.ro-icon-grootstedelijk:before {
  content: "";
}
.ro-icon.ro-icon-excellente-scholen:before {
  content: "";
}
.ro-icon.ro-icon-gebouw-nvwa:before {
  content: "";
}
.ro-icon.ro-icon-gebouw-vws:before {
  content: "";
}
.ro-icon.ro-icon-gebouw-zini:before {
  content: "";
}
.ro-icon.ro-icon-uitvoering:before {
  content: "";
}
.ro-icon.ro-icon-hoog-huis:before {
  content: "";
}
.ro-icon.ro-icon-basis-kantoorgebouw:before {
  content: "";
}
.ro-icon.ro-icon-schade:before {
  content: "";
}
.ro-icon.ro-icon-flat:before {
  content: "";
}
.ro-icon.ro-icon-leegstand-en-tijdelijk-gebruik:before {
  content: "";
}
.ro-icon.ro-icon-ziekenhuis:before {
  content: "";
}
.ro-icon.ro-icon-gebouwenbeheer:before {
  content: "";
}
.ro-icon.ro-icon-hoogbouw-met-pijl-naar-2-hoge-gebouwen:before {
  content: "";
}
.ro-icon.ro-icon-man-torso-voor-hoogbouw:before {
  content: "";
}
.ro-icon.ro-icon-gebouw-ggz:before {
  content: "";
}
.ro-icon.ro-icon-zorgkantoor:before {
  content: "";
}
.ro-icon.ro-icon-grote-brand:before {
  content: "";
}
.ro-icon.ro-icon-actieve-gevel:before {
  content: "";
}
.ro-icon.ro-icon-kantoor-vol-energie:before {
  content: "";
}
.ro-icon.ro-icon-ondernemingen:before {
  content: "";
}
.ro-icon.ro-icon-horecaketens:before {
  content: "";
}
.ro-icon.ro-icon-toren:before {
  content: "";
}
.ro-icon.ro-icon-moskee:before {
  content: "";
}
.ro-icon.ro-icon-ontwerp:before {
  content: "";
}
.ro-icon.ro-icon-rijtjeshuis:before {
  content: "";
}
.ro-icon.ro-icon-industrie:before {
  content: "";
}
.ro-icon.ro-icon-industrie-met-druppel-water:before {
  content: "";
}
.ro-icon.ro-icon-schuur-met-silo-erachter:before {
  content: "";
}
.ro-icon.ro-icon-stacaravan:before {
  content: "";
}
.ro-icon.ro-icon-supermarktketens:before {
  content: "";
}
.ro-icon.ro-icon-megastallen:before {
  content: "";
}
.ro-icon.ro-icon-smartphone:before {
  content: "";
}
.ro-icon.ro-icon-dreiging-van-buitenaf:before {
  content: "";
}
.ro-icon.ro-icon-drie-personen-in-huis:before {
  content: "";
}
.ro-icon.ro-icon-gebouw-met-busje:before {
  content: "";
}
.ro-icon.ro-icon-gemeentehuissvg:before {
  content: "";
}

:root {
  --ro-icon-ascending: "";
  --ro-icon-descending: "";
  --ro-icon-sort: "";
  --ro-icon-check: "";
  --ro-icon-home: "";
  --ro-icon-pinterest: "";
  --ro-icon-twitter: "";
  --ro-icon-twitter-inverse: "";
  --ro-icon-flickr: "";
  --ro-icon-youtube: "";
  --ro-icon-instagram: "";
  --ro-icon-facebook: "";
  --ro-icon-chevron-light-right: "";
  --ro-icon-chevron-light-left: "";
  --ro-icon-chevron-light-top: "";
  --ro-icon-chevron-light-bottom: "";
  --ro-icon-chevron-left: "";
  --ro-icon-hamburger: "";
  --ro-icon-chevron-right: "";
  --ro-icon-questionmark: "";
  --ro-icon-speech: "";
  --ro-icon-arrow-down: "";
  --ro-icon-arrow-up: "";
  --ro-icon-arrow-right: "";
  --ro-icon-arrow-left: "";
  --ro-icon-map: "";
  --ro-icon-outgoing: "";
  --ro-icon-pause: "";
  --ro-icon-trash: "";
  --ro-icon-user: "";
  --ro-icon-chevron-up: "";
  --ro-icon-chevron-down: "";
  --ro-icon-plus: "";
  --ro-icon-calendar: "";
  --ro-icon-download: "";
  --ro-icon-heart: "";
  --ro-icon-letter: "";
  --ro-icon-reset: "";
  --ro-icon-play: "";
  --ro-icon-search: "";
  --ro-icon-clock: "";
  --ro-icon-close: "";
  --ro-icon-line: "";
  --ro-icon-smartphone: "";
  --ro-icon-lock-closed: "";
  --ro-icon-on-off: "";
  --ro-icon-to-top: "";
  --ro-icon-grid: "";
  --ro-icon-csv-file: "";
  --ro-icon-html-file: "";
  --ro-icon-pdf-file: "";
  --ro-icon-document: "";
  --ro-icon-bar-graph: "";
  --ro-icon-tree-graph: "";
  --ro-icon-grid-view: "";
  --ro-icon-list-view: "";
}

.ro-icon:before {
  font-family: "RO Icons";
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 1.125rem;
  position: static;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Firefox */
  font-smoothing: antialiased;
  margin-right: 0.25rem;
  color: inherit;
}
.ro-icon.ro-icon-ascending:before {
  content: "";
}
.ro-icon.ro-icon-descending:before {
  content: "";
}
.ro-icon.ro-icon-sort:before {
  content: "";
}
.ro-icon.ro-icon-check:before {
  content: "";
}
.ro-icon.ro-icon-home:before {
  content: "";
}
.ro-icon.ro-icon-pinterest:before {
  content: "";
}
.ro-icon.ro-icon-twitter:before {
  content: "";
}
.ro-icon.ro-icon-twitter-inverse:before {
  content: "";
}
.ro-icon.ro-icon-flickr:before {
  content: "";
}
.ro-icon.ro-icon-youtube:before {
  content: "";
}
.ro-icon.ro-icon-instagram:before {
  content: "";
}
.ro-icon.ro-icon-facebook:before {
  content: "";
}
.ro-icon.ro-icon-chevron-light-right:before {
  content: "";
}
.ro-icon.ro-icon-chevron-light-left:before {
  content: "";
}
.ro-icon.ro-icon-chevron-light-top:before {
  content: "";
}
.ro-icon.ro-icon-chevron-light-bottom:before {
  content: "";
}
.ro-icon.ro-icon-chevron-left:before {
  content: "";
}
.ro-icon.ro-icon-hamburger:before {
  content: "";
}
.ro-icon.ro-icon-chevron-right:before {
  content: "";
}
.ro-icon.ro-icon-questionmark:before {
  content: "";
}
.ro-icon.ro-icon-speech:before {
  content: "";
}
.ro-icon.ro-icon-arrow-down:before {
  content: "";
}
.ro-icon.ro-icon-arrow-up:before {
  content: "";
}
.ro-icon.ro-icon-arrow-right:before {
  content: "";
}
.ro-icon.ro-icon-arrow-left:before {
  content: "";
}
.ro-icon.ro-icon-map:before {
  content: "";
}
.ro-icon.ro-icon-outgoing:before {
  content: "";
}
.ro-icon.ro-icon-pause:before {
  content: "";
}
.ro-icon.ro-icon-trash:before {
  content: "";
}
.ro-icon.ro-icon-user:before {
  content: "";
}
.ro-icon.ro-icon-chevron-up:before {
  content: "";
}
.ro-icon.ro-icon-chevron-down:before {
  content: "";
}
.ro-icon.ro-icon-plus:before {
  content: "";
}
.ro-icon.ro-icon-calendar:before {
  content: "";
}
.ro-icon.ro-icon-download:before {
  content: "";
}
.ro-icon.ro-icon-heart:before {
  content: "";
}
.ro-icon.ro-icon-letter:before {
  content: "";
}
.ro-icon.ro-icon-reset:before {
  content: "";
}
.ro-icon.ro-icon-play:before {
  content: "";
}
.ro-icon.ro-icon-search:before {
  content: "";
}
.ro-icon.ro-icon-clock:before {
  content: "";
}
.ro-icon.ro-icon-close:before {
  content: "";
}
.ro-icon.ro-icon-line:before {
  content: "";
}
.ro-icon.ro-icon-smartphone:before {
  content: "";
}
.ro-icon.ro-icon-lock-closed:before {
  content: "";
}
.ro-icon.ro-icon-on-off:before {
  content: "";
}
.ro-icon.ro-icon-to-top:before {
  content: "";
}
.ro-icon.ro-icon-grid:before {
  content: "";
}
.ro-icon.ro-icon-list:before {
  content: "";
}
.ro-icon.ro-icon-csv-file:before {
  content: "";
}
.ro-icon.ro-icon-html-file:before {
  content: "";
}
.ro-icon.ro-icon-pdf-file:before {
  content: "";
}
.ro-icon.ro-icon-document:before {
  content: "";
}
.ro-icon.ro-icon-bar-graph:before {
  content: "";
}
.ro-icon.ro-icon-tree-graph:before {
  content: "";
}
.ro-icon.ro-icon-grid-view:before {
  content: "";
}
.ro-icon.ro-icon-list-view:before {
  content: "";
}

/* The list of defined icons within Rijksoverheid branding */
/*---------------------------------------------------------------*/
/*--------------------- animation.scss --------------------------*/
/*---------------------------------------------------------------*/
.fadeout-shrink {
  -webkit-animation: fadeoutShrink 1s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadeoutShrink 1s;
  /* Firefox < 16 */
  -o-animation: fadeoutShrink 1s;
  /* Opera < 12.1 */
  animation: fadeoutShrink 1s;
  animation-fill-mode: forwards;
  animation-delay: 8s;
}

@keyframes fadeoutShrink {
  from {
    opacity: 1;
    height: 64px;
  }
  to {
    opacity: 0;
    height: 0px;
    padding: 0;
  }
}
/* Firefox < 16 */
@-moz-keyframes fadeoutShrink {
  from {
    opacity: 1;
    height: 64px;
  }
  to {
    opacity: 0;
    height: 0px;
    padding: 0;
  }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadeoutShrink {
  from {
    opacity: 1;
    height: 64px;
  }
  to {
    opacity: 0;
    height: 0px;
    padding: 0;
  }
}
.fadeout {
  -webkit-animation: fadeout 1s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadeout 1s;
  /* Firefox < 16 */
  -o-animation: fadeout 1s;
  /* Opera < 12.1 */
  animation: fadeout 1s;
  animation-fill-mode: forwards;
  animation-delay: 8s;
}

@keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
/* Firefox < 16 */
@-moz-keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
/*---------------------------------------------------------------*/
/*------------------------- base.scss ---------------------------*/
/*---------------------------------------------------------------*/
body {
  margin: 0;
  font-family: "RO Sans", Calibri, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  /* Set to a white because some browsers (e.g: firefox on linux) do not use white as a default color but the branding requires it.*/
  font-size: 1.125rem;
  line-height: 1.75rem;
}
body > main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

main:focus {
  outline: 0;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  hyphens: auto;
}

h1,
h2,
h3 {
  margin: 2rem 0 1rem 0;
}
@media (min-width: 24rem) {
  h1,
h2,
h3 {
    margin: 4rem 0 2rem 0;
  }
}

h4,
h5,
h6 {
  margin: 1rem 0 0.75rem 0;
}
@media (min-width: 24rem) {
  h4,
h5,
h6 {
    margin: 2rem 0 1rem 0;
  }
}

h1,
h1 > a {
  font-size: 2.02729rem;
}

.header h1,
.header h1 > a {
  font-size: 2.88651rem;
}
h2,
h2 > a {
  font-size: 1.80203rem;
}

h3,
h3 > a {
  font-size: 1.60181rem;
}

h4,
h4 > a {
  font-size: 1.26562rem;
}

h5,
h6,
h5 > a,
h6 > a {
  font-size: 1.125rem;
  font-weight: bold;
}
h5,
h5 > a {
  color: #1d1d1d;
}

h6,
h6 > a {
  color: #535353;
}

/* Default text size */
p,
a,
span,
li,
input {
  margin: 2.5rem 0;
  max-width: 50rem;
  /* For readability, lines of text should never be too long. */
  hyphens: auto;
}
@media (min-width: 24rem) {
  p,
a,
span,
li,
input {
    hyphens: none;
    word-wrap: normal;
  }
}

p:first-of-type {
  margin-top: 0;
}
p:last-of-type {
  margin-bottom: 0;
}

.de-emphasized {
  font-size: 0.88889rem;
  line-height: 1.5rem;
  margin: 1rem 0;
  color: #696969;
  font-weight: 400;
}

.emphasized {
  font-size: 1.60181rem;
  line-height: 2.5rem;
  margin: 3.2rem 0;
}

i {
  font-style: italic;
}

.font-de-emphasized {
  font-size: 0.88889rem;
  color: #696969;
}

li,
input {
  margin: unset;
}

input {
  padding: 0 1rem;
  border-radius: 0;
  border: 0;
  min-width: 0;
  box-sizing: border-box;
  font-family: inherit;
}

a {
  color: #01689b;
  cursor: pointer;
  position: relative;
  min-height: 22px;
  /* Set for accecibility, according to the WCAG guidelines */
  /*min-width: 44px;*/
  /* Set for accecibility, according to the WCAG guidelines */
  /*text-align: center;*/
  /* Aligning small links within the min-width */
  display: inline-block;
  margin: 0 0.25rem;
  white-space: break;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}
a:hover, a.hover {
  color: #004161;
}
a:active, a.active {
  outline: 2px dotted #cccccc;
  outline-offset: 0.25rem;
  /* Adding some spacing between the content and the outline */
  z-index: 1;
  /* Laying the focussed area on top of any follow up messages */
}
a[rel~=external] {
  padding-left: 1.5rem;
  margin-left: 0.5rem;
}
a[rel~=external]:before {
  content: "";
  font-family: "RO Icons";
  font-size: 0.7rem;
  color: #01689b;
  position: absolute;
  left: 0;
  top: calc(50% - 0.8rem);
  width: 1rem;
  height: 1.31rem;
  padding: 0 0.25rem;
}
a:visited, a.visited,
a:visited > h1,
a:visited > h2,
a:visited > h3,
a:visited > h4,
a:visited > h5,
a:visited > h6,
a.visited > h1,
a.visited > h2,
a.visited > h3,
a.visited > h4,
a.visited > h5,
a.visited > h6 {
  color: #814081;
}
a:visited:hover, a:visited.hover, a.visited:hover, a.visited.hover,
a:visited > h1:hover,
a:visited > h2:hover,
a:visited > h3:hover,
a:visited > h4:hover,
a:visited > h5:hover,
a:visited > h6:hover,
a.visited > h1:hover,
a.visited > h2:hover,
a.visited > h3:hover,
a.visited > h4:hover,
a.visited > h5:hover,
a.visited > h6:hover,
a:visited > h1.hover,
a:visited > h2.hover,
a:visited > h3.hover,
a:visited > h4.hover,
a:visited > h5.hover,
a:visited > h6.hover,
a.visited > h1.hover,
a.visited > h2.hover,
a.visited > h3.hover,
a.visited > h4.hover,
a.visited > h5.hover,
a.visited > h6.hover {
  color: #653165;
}
a:visited:before, a.visited:before,
a:visited > h1:before,
a:visited > h2:before,
a:visited > h3:before,
a:visited > h4:before,
a:visited > h5:before,
a:visited > h6:before,
a.visited > h1:before,
a.visited > h2:before,
a.visited > h3:before,
a.visited > h4:before,
a.visited > h5:before,
a.visited > h6:before {
  color: #814081;
}
a > h1,
a > h2,
a > h3,
a > h4,
a > h5,
a > h6 {
  color: #01689b;
}

img {
  max-width: 100%;
}

/* Lists */
ul li,
ol li {
  padding: 0.5rem;
}

ul {
  margin: 0;
  display: flex;
  flex-direction: column;
}
ul > li {
  list-style: square;
}
ul > li h1 {
  font-size: 1.60181rem;
}
ul > li h2 {
  font-size: 1.125rem;
}
ul > li + li {
  margin-top: 0;
}
ul > li:last-of-type {
  margin-bottom: 0;
}

ol > li {
  display: list-item;
}

nav {
  margin: 1.5rem 0;
}
@media (min-width: 24rem) {
  nav {
    margin: 2.5rem 0;
  }
}

nav ul,
nav ol {
  padding-left: 1rem;
}
nav ul li,
nav ol li {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}
nav ul li > a,
nav ol li > a {
  margin: 0;
  text-decoration: none;
  /* No underline needed when the link has a ">" */
  position: relative;
  line-height: 1.5rem;
  text-align: left;
}
nav ul li > a:before,
nav ol li > a:before {
  content: "";
  font-family: "RO Icons";
  font-size: 0.7rem;
  color: #01689b;
  position: absolute;
  left: -1.5rem;
  top: 0;
  width: 1rem;
  height: 1.31rem;
  padding: 0 0.25rem;
}

nav ul li {
  list-style: none;
}

nav ol li {
  list-style: decimal;
  display: list-item;
  margin-left: 0.5rem;
  /* Reserving extra space for the numbering of the items */
}
nav ol li > a {
  margin-left: 1.5rem;
}
nav ol li:before {
  left: -2.5rem;
  /* Reserving extra space for the numbering of the items */
}

/*  Section background color to add structure to the page */
.bg-color-offset {
  background-color: #f3f3f3;
}
.bg-color-offset form {
  background-color: #e6e6e6;
}

/* Changing the color to match the text color and contrast the background-color. */
body > header > nav .outline-dotted,
body > header > nav a:focus,
body > header > nav button:focus,
body > header > nav input:focus,
body > header > nav select:focus,
body > header > nav textarea:focus,
body > footer .outline-dotted,
body > footer a:focus,
body > footer button:focus,
body > footer input:focus,
body > footer select:focus,
body > footer textarea:focus,
.test-cases article > footer .outline-dotted,
.test-cases article > header .outline-dotted,
.test-cases article > footer a:focus,
.test-cases article > header a:focus,
.test-cases article > footer button:focus,
.test-cases article > header button:focus,
.test-cases article > footer input:focus,
.test-cases article > header input:focus,
.test-cases article > footer select:focus,
.test-cases article > header select:focus,
.test-cases article > footer textarea:focus,
.test-cases article > header textarea:focus {
  outline-color: #fff;
}

/* Keeping the outline within the header nav elements. */
header nav .outline-dotted,
header nav a:focus,
header nav a.button:focus,
header nav input[type=button]:focus,
header nav span.button:focus,
header nav input[type=submit]:focus,
header nav input[type=reset]:focus,
header nav button:focus,
header nav input:focus,
header nav select:focus,
header nav textarea:focus {
  outline-offset: -2px;
}

/* Description list */
dl > div {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.5rem;
  padding: 0.5rem 1rem;
}
@media (min-width: 42rem) {
  dl > div {
    flex-direction: row;
  }
}
dl > div:nth-child(odd) {
  background-color: #f3f3f3;
}
dl dt,
dl dd {
  white-space: pre-wrap;
  word-break: break-word;
}
dl dt {
  font-weight: bolder;
}
dl dd {
  margin-left: 0;
}
@media (min-width: 42rem) {
  dl dt {
    min-width: 40%;
    width: 40%;
  }
  dl dd {
    margin-left: 2rem;
    width: calc(60% - 2rem);
  }
}

/* Exception classes */
.horizontal-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  margin: 1.5rem 0;
  /* Horizontal scroll can use collapsed margins, while it's content can not. */
}
.horizontal-scroll > *:first-child {
  margin: 0;
}

hr {
  border: 0;
  border-bottom: 1px solid #e6e6e6;
}

/*---------------------------------------------------------------*/
/*------------------------- fonts.scss --------------------------*/
/*---------------------------------------------------------------*/
/* Ro Sans */
@font-face {
  font-family: "RO Sans";
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/RO-SansWebText-Regular.woff2") format("woff2"), url("../fonts/RO-SansWebText-Regular.woff") format("woff");
}
@font-face {
  font-family: "RO Sans";
  font-weight: normal;
  font-style: italic;
  font-display: swap;
  src: url("../fonts/RO-SansWebText-Italic.woff2") format("woff2"), url("../fonts/RO-SansWebText-Italic.woff") format("woff");
}
@font-face {
  font-family: "RO Sans";
  font-weight: bold;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/RO-SansWebText-Bold.woff2") format("woff2"), url("../fonts/RO-SansWebText-Bold.woff") format("woff");
}
/* Ro Serif */
@font-face {
  font-family: "RO Serif";
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/RO-SerifWeb-Regular.woff2") format("woff2"), url("../fonts/RO-SerifWeb-Regular.woff") format("woff");
}
@font-face {
  font-family: "RO Serif";
  font-weight: normal;
  font-style: italic;
  font-display: swap;
  src: url("../fonts/RO-SerifWeb-Italic.woff2") format("woff2"), url("../fonts/RO-SerifWeb-Italic.woff") format("woff");
}
@font-face {
  font-family: "RO Serif";
  font-weight: bold;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/RO-SerifWeb-Bold.woff2") format("woff2"), url("../fonts/RO-SerifWeb-Bold.woff") format("woff");
}
/* Ro Icons */
@font-face {
  font-family: "RO Icons";
  font-weight: normal;
  font-style: normal;
  src: url("../fonts/ro-icons-3.6.eot");
  src: url("../fonts/ro-icons-3.6.woff") format("woff"), url("../fonts/ro-icons-3.6.ttf") format("truetype"), url("../fonts/ro-icons-3.6.svg#ro-icons-31") format("svg");
}
/*---------------------------------------------------------------*/
/*-------------------------- layout.scss ------------------------*/
/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/
/*--------------------- layouts/article.scss --------------------*/
/*---------------------------------------------------------------*/
article {
  align-items: center;
}
article > div {
  max-width: 50rem;
  padding: 3rem 3%;
}
@media (min-width: 55rem) {
  article > div {
    margin: 0 auto;
    padding: 3rem 0;
    width: 100%;
    padding: 3rem 3.5rem;
  }
}

/*---------------------------------------------------------------*/
/*---------------------- layouts/auth.scss ----------------------*/
/*---------------------------------------------------------------*/
.auth {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
}
.auth > div {
  margin: 0 auto;
  width: 100%;
  padding: 3rem 3%;
  max-width: 42rem;
}
@media (min-width: 42rem) {
  .auth > div {
    padding: 3rem 3.5rem;
  }
}

/*---------------------------------------------------------------*/
/*-------------------- layouts/columns.scss ---------------------*/
/*---------------------------------------------------------------*/
section > div .column-2,
section > div .column-3,
section > div .column-4,
article > div .column-2,
article > div .column-3,
article > div .column-4,
.hero > div .column-2,
.hero > div .column-3,
.hero > div .column-4,
footer > div .column-2,
footer > div .column-3,
footer > div .column-4,
header nav > div .column-2,
header nav > div .column-3,
header nav > div .column-4 {
  /* Negative margin until flex gap becomes supported cross browser. (e.g Safari) */
  min-width: 104%;
  margin: 0 -2%;
}
section > div .column-2 > *,
section > div .column-3 > *,
section > div .column-4 > *, section > div.column-2 > *, section > div.column-3 > *, section > div.column-4 > *,
article > div .column-2 > *,
article > div .column-3 > *,
article > div .column-4 > *,
article > div.column-2 > *,
article > div.column-3 > *,
article > div.column-4 > *,
.hero > div .column-2 > *,
.hero > div .column-3 > *,
.hero > div .column-4 > *,
.hero > div.column-2 > *,
.hero > div.column-3 > *,
.hero > div.column-4 > *,
footer > div .column-2 > *,
footer > div .column-3 > *,
footer > div .column-4 > *,
footer > div.column-2 > *,
footer > div.column-3 > *,
footer > div.column-4 > *,
header nav > div .column-2 > *,
header nav > div .column-3 > *,
header nav > div .column-4 > *,
header nav > div.column-2 > *,
header nav > div.column-3 > *,
header nav > div.column-4 > * {
  box-sizing: border-box;
  margin: 1rem 2%;
}

/* Column behaviour */
.column-4, .column-3, .column-2 {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.column-4 h1, .column-3 h1, .column-2 h1 {
  margin-top: 0;
  margin-bottom: 1rem;
}
.column-4 img, .column-3 img, .column-2 img {
  min-height: 15rem;
  object-fit: cover;
  margin-bottom: 1rem;
}

/*---------------------------------------------------------------*/
/*------------------- layouts/column-2.scss ---------------------*/
/*---------------------------------------------------------------*/
@media (min-width: 42rem) {
  .column-2 > * {
    width: 46%;
  }
}
/*---------------------------------------------------------------*/
/*------------------- layouts/column-3.scss ---------------------*/
/*---------------------------------------------------------------*/
@media (min-width: 42rem) {
  .column-3 > * {
    width: 46%;
  }
}
@media (min-width: 60rem) {
  .column-3 > * {
    width: 29.33%;
  }
}
/*---------------------------------------------------------------*/
/*------------------- layouts/column-4.scss ---------------------*/
/*---------------------------------------------------------------*/
@media (min-width: 42rem) {
  .column-4 > * {
    width: 46%;
  }
}
@media (min-width: 60rem) {
  .column-4 > * {
    width: 29.33%;
  }
}
@media (min-width: 70rem) {
  .column-4 > * {
    width: 21%;
  }
}
/*---------------------------------------------------------------*/
/*------------------ layouts/form-view.scss ---------------------*/
/*---------------------------------------------------------------*/
.form-view > div {
  margin: 0 auto;
  width: 100%;
  padding: 3rem 3%;
}

.form-view {
  align-items: center;
}
.form-view > div {
  max-width: 55rem;
}
@media (min-width: 55rem) {
  .form-view > div {
    padding: 3rem 3.5rem;
  }
}

/*---------------------------------------------------------------*/
/*------------ layouts/one-third-two-thirds.scss ----------------*/
/*---------------------------------------------------------------*/
section.one-third-two-thirds > div,
article.one-third-two-thirds > div,
.hero.one-third-two-thirds > div,
footer.one-third-two-thirds > div,
header nav.one-third-two-thirds > div, div.one-third-two-thirds {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 1.5rem;
}
section.one-third-two-thirds > div > *,
article.one-third-two-thirds > div > *,
.hero.one-third-two-thirds > div > *,
footer.one-third-two-thirds > div > *,
header nav.one-third-two-thirds > div > *, div.one-third-two-thirds > * {
  flex-grow: 1;
}
section.one-third-two-thirds > div > *:first-child,
article.one-third-two-thirds > div > *:first-child,
.hero.one-third-two-thirds > div > *:first-child,
footer.one-third-two-thirds > div > *:first-child,
header nav.one-third-two-thirds > div > *:first-child, div.one-third-two-thirds > *:first-child {
  max-width: unset;
}
@media (min-width: 55rem) {
  section.one-third-two-thirds > div,
article.one-third-two-thirds > div,
.hero.one-third-two-thirds > div,
footer.one-third-two-thirds > div,
header nav.one-third-two-thirds > div, div.one-third-two-thirds {
    flex-wrap: nowrap;
    gap: 2.5rem;
  }
  section.one-third-two-thirds > div > *:first-child,
article.one-third-two-thirds > div > *:first-child,
.hero.one-third-two-thirds > div > *:first-child,
footer.one-third-two-thirds > div > *:first-child,
header nav.one-third-two-thirds > div > *:first-child, div.one-third-two-thirds > *:first-child {
    max-width: 33.33%;
  }
}

/* One third / two thirds layout */
article > .one-third-two-thirds {
  padding: 1rem 3.5rem;
}

/*---------------------------------------------------------------*/
/*------------ layouts/two-thirds-one-third.scss ----------------*/
/*---------------------------------------------------------------*/
section.two-thirds-one-third > div,
article.two-thirds-one-third > div,
.hero.two-thirds-one-third > div,
footer.two-thirds-one-third > div,
header nav.two-thirds-one-third > div, div.two-thirds-one-third {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 1.5rem;
}
section.two-thirds-one-third > div > *,
article.two-thirds-one-third > div > *,
.hero.two-thirds-one-third > div > *,
footer.two-thirds-one-third > div > *,
header nav.two-thirds-one-third > div > *, div.two-thirds-one-third > * {
  flex-grow: 1;
}
section.two-thirds-one-third > div > *:first-child,
article.two-thirds-one-third > div > *:first-child,
.hero.two-thirds-one-third > div > *:first-child,
footer.two-thirds-one-third > div > *:first-child,
header nav.two-thirds-one-third > div > *:first-child, div.two-thirds-one-third > *:first-child {
  max-width: unset;
}
@media (min-width: 55rem) {
  section.two-thirds-one-third > div,
article.two-thirds-one-third > div,
.hero.two-thirds-one-third > div,
footer.two-thirds-one-third > div,
header nav.two-thirds-one-third > div, div.two-thirds-one-third {
    flex-wrap: nowrap;
    gap: 2.5rem;
  }
  section.two-thirds-one-third > div > *:last-child,
article.two-thirds-one-third > div > *:last-child,
.hero.two-thirds-one-third > div > *:last-child,
footer.two-thirds-one-third > div > *:last-child,
header nav.two-thirds-one-third > div > *:last-child, div.two-thirds-one-third > *:last-child {
    max-width: 33.33%;
  }
}

/* One third / two thirds layout */
article > .two-thirds-one-third {
  padding: 1rem 3.5rem;
}

section > div,
article > div,
.hero > div,
footer > div,
header nav > div {
  padding: 3rem 3%;
  padding-left: 3%;
  padding-right: 3%;
  width: 100%;
  box-sizing: border-box;
  flex-grow: 1;
}
section > div > h1,
article > div > h1,
.hero > div > h1,
footer > div > h1,
header nav > div > h1 {
  font-size: 1.80203rem;
}
section > div > h1:first-child,
article > div > h1:first-child,
.hero > div > h1:first-child,
footer > div > h1:first-child,
header nav > div > h1:first-child {
  font-size: 2.02729rem;
}
section > div > h1 + p,
article > div > h1 + p,
.hero > div > h1 + p,
footer > div > h1 + p,
header nav > div > h1 + p {
  font-size: 1.60181rem;
  line-height: 2.5rem;
  margin: 3.2rem 0;
}
section > div > h1 + p a,
section > div > h1 + p span,
article > div > h1 + p a,
article > div > h1 + p span,
.hero > div > h1 + p a,
.hero > div > h1 + p span,
footer > div > h1 + p a,
footer > div > h1 + p span,
header nav > div > h1 + p a,
header nav > div > h1 + p span {
  font-size: 1.60181rem;
  line-height: 2.5rem;
  margin: 3.2rem 0;
}
section > div > h1 + p a,
article > div > h1 + p a,
.hero > div > h1 + p a,
footer > div > h1 + p a,
header nav > div > h1 + p a {
  margin: 0;
}
@media (min-width: 84rem) {
  section > div,
article > div,
.hero > div,
footer > div,
header nav > div {
    max-width: 82rem;
    margin: 0 auto;
    padding: 3rem 3.5rem;
    width: 100%;
  }
}
section.condensed > div,
article.condensed > div,
.hero.condensed > div,
footer.condensed > div,
header nav.condensed > div {
  padding: 1rem 3%;
}

section.error + article > div:only-child, section.error + section > div:only-child, section.warning + article > div:only-child, section.warning + section > div:only-child, section.confirmation + article > div:only-child, section.confirmation + section > div:only-child, section.explanation + article > div:only-child, section.explanation + section > div:only-child, section.primary + article > div:only-child, section.primary + section > div:only-child,
div.error + article > div:only-child,
div.error + section > div:only-child,
div.warning + article > div:only-child,
div.warning + section > div:only-child,
div.confirmation + article > div:only-child,
div.confirmation + section > div:only-child,
div.explanation + article > div:only-child,
div.explanation + section > div:only-child,
div.primary + article > div:only-child,
div.primary + section > div:only-child {
  border-top: 0;
}

.bg-color-offset {
  background-color: #f3f3f3;
}
.bg-color-offset form {
  background-color: #e6e6e6;
}

/*---------------------------------------------------------------*/
/*---------------------- transition.scss ------------------------*/
/*---------------------------------------------------------------*/
/* Components */
/*---------------------------------------------------------------*/
/*--------------- components/action-button.scss -----------------*/
/*---------------------------------------------------------------*/
table.action-buttons button,
table.action-buttons a.button,
table.action-buttons input[type=button],
table.action-buttons input[type=submit],
table.action-buttons input[type=reset], button.action-button.ro-icon,
a.button.action-button.ro-icon,
input[type=button].action-button.ro-icon,
input[type=submit].action-button.ro-icon,
input[type=reset].action-button.ro-icon {
  background: transparent;
  border: 0;
  margin-top: 0;
  margin-bottom: 0;
}
table.action-buttons button:before,
table.action-buttons a.button:before,
table.action-buttons input[type=button]:before,
table.action-buttons input[type=submit]:before,
table.action-buttons input[type=reset]:before, button.action-button.ro-icon:before,
a.button.action-button.ro-icon:before,
input[type=button].action-button.ro-icon:before,
input[type=submit].action-button.ro-icon:before,
input[type=reset].action-button.ro-icon:before {
  color: #535353;
  font-size: 0.9rem;
}
table.action-buttons button:hover,
table.action-buttons a.button:hover,
table.action-buttons input[type=button]:hover,
table.action-buttons input[type=submit]:hover,
table.action-buttons input[type=reset]:hover, button.action-button.ro-icon:hover,
a.button.action-button.ro-icon:hover,
input[type=button].action-button.ro-icon:hover,
input[type=submit].action-button.ro-icon:hover,
input[type=reset].action-button.ro-icon:hover {
  background: transparent;
  border: 0;
}
table.action-buttons button:hover:before,
table.action-buttons a.button:hover:before,
table.action-buttons input[type=button]:hover:before,
table.action-buttons input[type=submit]:hover:before,
table.action-buttons input[type=reset]:hover:before, button.action-button.ro-icon:hover:before,
a.button.action-button.ro-icon:hover:before,
input[type=button].action-button.ro-icon:hover:before,
input[type=submit].action-button.ro-icon:hover:before,
input[type=reset].action-button.ro-icon:hover:before {
  color: #000;
}

/* Style a specific button within a table */
/* Style all buttons within a tabel */
/*---------------------------------------------------------------*/
/*------------------ components/attention.scss ------------------*/
/*---------------------------------------------------------------*/
.attention {
  border-left: 0.625rem solid #01689b;
  padding-left: 1rem;
  display: block;
  min-width: 100%;
  box-sizing: border-box;
}
@media (min-width: 24rem) {
  .attention {
    padding-left: 2.5rem;
  }
}

table tr.attention th:first-child,
table tr.attention td:first-child, table th.attention,
table td.attention {
  display: table-cell;
  border-left: 0;
  position: relative;
  padding-left: 1rem;
  min-width: unset;
  /* 
  	Placing the visual attention element in an after because browsers render borders differently.
      e.g in chrome a border is rendered from the center of the left border, and therefor runs out of
      the table. box-sizing: border-box isn't supported by all browsers
  */
}
table tr.attention th:first-child:after,
table tr.attention td:first-child:after, table th.attention:after,
table td.attention:after {
  content: "";
  width: 0.4rem;
  /* using a smaller width within table elements to keep the content inline with the rest of the content */
  background-color: #01689b;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

table {
  /* Using the secondary color on headers so the attention color will always have the right contrast */
}
table th.attention:after,
table tr.attention th:first-child:after {
  background-color: #fff;
}
table tr.attention {
  display: table-row;
  border-left: 0;
  padding-left: 1rem;
}
/*---------------------------------------------------------------*/
/*------------------ components/button.scss ---------------------*/
/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/
/*-------------- components/buttons/base.scss -------------------*/
/*---------------------------------------------------------------*/
button,
a.button,
input[type=button],
input[type=submit],
input[type=reset] {
  /* Reset ios button styling */
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  box-sizing: border-box;
  display: inline-flex;
  flex-grow: 0;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  /* A min height for buttons is required for usability. See https://www.rijkshuisstijl.nl/basiselementen/basiselementen-online/online-componenten/buttons for more information */
  position: relative;
  padding: 0.5rem 0.75rem;
  background-color: #ca005d;
  color: #fff;
  border: 2px solid #ca005d;
  font-size: 1.125rem;
  line-height: 1.26rem;
  font-family: "RO Sans", Calibri, sans-serif;
  text-decoration: none;
  /* No underline needed when a link is styled like a button */
  cursor: pointer;
  /* Resetting margin for elements used directly within buttons */
  /* In some cases an img within a button is needed. For example uzi card img */
}
button:not(.ro-icon),
a.button:not(.ro-icon),
input[type=button]:not(.ro-icon),
input[type=submit]:not(.ro-icon),
input[type=reset]:not(.ro-icon) {
  gap: 0.5rem;
}
button:visited,
a.button:visited,
input[type=button]:visited,
input[type=submit]:visited,
input[type=reset]:visited {
  color: #fff;
}
button:hover, button.hover,
a.button:hover,
a.button.hover,
input[type=button]:hover,
input[type=button].hover,
input[type=submit]:hover,
input[type=submit].hover,
input[type=reset]:hover,
input[type=reset].hover {
  background-color: #8d0041;
  border-color: #8d0041;
  -webkit-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}
button:active, button.active,
a.button:active,
a.button.active,
input[type=button]:active,
input[type=button].active,
input[type=submit]:active,
input[type=submit].active,
input[type=reset]:active,
input[type=reset].active {
  outline: 2px dotted #000;
  background-color: #8d0041;
  border-color: #8d0041;
  -webkit-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}
button:focus, button.focus,
a.button:focus,
a.button.focus,
input[type=button]:focus,
input[type=button].focus,
input[type=submit]:focus,
input[type=submit].focus,
input[type=reset]:focus,
input[type=reset].focus {
  outline-offset: 0;
}
button.selected,
a.button.selected,
input[type=button].selected,
input[type=submit].selected,
input[type=reset].selected {
  background-color: #8d0041;
  border-color: #8d0041;
  -webkit-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}
button > *,
a.button > *,
input[type=button] > *,
input[type=submit] > *,
input[type=reset] > * {
  margin: 0;
}
button > img,
a.button > img,
input[type=button] > img,
input[type=submit] > img,
input[type=reset] > img {
  max-width: 30%;
  /* Limiting the use of images within buttons for readability. */
}

/*---------------------------------------------------------------*/
/*-------------- components/buttons/cta.scss --------------------*/
/*---------------------------------------------------------------*/
button.cta,
a.button.cta,
input[type=button].cta,
input[type=submit].cta,
input[type=reset].cta {
  background-color: #39870c;
  border-color: #39870c;
  color: #fff;
}
button.cta:hover,
a.button.cta:hover,
input[type=button].cta:hover,
input[type=submit].cta:hover,
input[type=reset].cta:hover {
  background-color: #285f08;
  border-color: #285f08;
}

/*---------------------------------------------------------------*/
/*--------- components/buttons/secondary.scss -------------------*/
/*---------------------------------------------------------------*/
button.secondary,
a.button.secondary,
input[type=button].secondary,
input[type=submit].secondary,
input[type=reset].secondary {
  border: 2px solid #ca005d;
  background-color: #fff;
  color: #ca005d;
}
button.secondary:visited,
a.button.secondary:visited,
input[type=button].secondary:visited,
input[type=submit].secondary:visited,
input[type=reset].secondary:visited {
  color: #ca005d;
}
button.secondary:hover, button.secondary.hover,
a.button.secondary:hover,
a.button.secondary.hover,
input[type=button].secondary:hover,
input[type=button].secondary.hover,
input[type=submit].secondary:hover,
input[type=submit].secondary.hover,
input[type=reset].secondary:hover,
input[type=reset].secondary.hover {
  background-color: #ca005d;
  color: #fff;
  -webkit-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}
button.secondary:active, button.secondary.active,
a.button.secondary:active,
a.button.secondary.active,
input[type=button].secondary:active,
input[type=button].secondary.active,
input[type=submit].secondary:active,
input[type=submit].secondary.active,
input[type=reset].secondary:active,
input[type=reset].secondary.active {
  background-color: #ca005d;
  color: #fff;
  -webkit-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}
button.secondary.selected,
a.button.secondary.selected,
input[type=button].secondary.selected,
input[type=submit].secondary.selected,
input[type=reset].secondary.selected {
  background-color: #ca005d;
  color: #fff;
  -webkit-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}

/*---------------------------------------------------------------*/
/*----------- components/buttons/ro-icon.scss -------------------*/
/*---------------------------------------------------------------*/
button.ro-icon,
a.button.ro-icon,
input[type=button].ro-icon,
input[type=submit].ro-icon,
input[type=reset].ro-icon {
  font-size: 0;
}
button.ro-icon:before,
a.button.ro-icon:before,
input[type=button].ro-icon:before,
input[type=submit].ro-icon:before,
input[type=reset].ro-icon:before {
  font-size: 0.75rem;
  text-align: center;
  margin-right: 0;
  color: inherit;
  width: 0.75rem;
}
@media (min-width: 50rem) {
  button.ro-icon:before,
a.button.ro-icon:before,
input[type=button].ro-icon:before,
input[type=submit].ro-icon:before,
input[type=reset].ro-icon:before {
    font-size: 1rem;
  }
}

/*---------------------------------------------------------------*/
/*------------- components/button-container.scss ----------------*/
/*---------------------------------------------------------------*/
.button-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.button-container.action-buttons {
  padding: 0;
  justify-content: flex-end;
}
.button-container.action-buttons > button,
.button-container.action-buttons > a.button,
.button-container.action-buttons > input[type=button],
.button-container.action-buttons > input[type=submit],
.button-container.action-buttons > input[type=reset] {
  min-height: 2rem;
  width: 2rem;
  height: 2rem;
  justify-content: center;
  padding: 0;
}

form:not(.line-form) > .button-container:last-child {
  margin-bottom: -2rem;
}
form:not(.line-form) > .button-container:last-child button,
form:not(.line-form) > .button-container:last-child a.button,
form:not(.line-form) > .button-container:last-child input[type=button],
form:not(.line-form) > .button-container:last-child input[type=submit],
form:not(.line-form) > .button-container:last-child input[type=reset] {
  margin: 0.5rem 0.5rem 0 0;
}

/* Exception for button-containers within a line-form */
.button-container form.line-form .button-container {
  margin: -0.5rem 0 0 0;
}

/*---------------------------------------------------------------*/
/*------------------ components/filters.scss --------------------*/
/*---------------------------------------------------------------*/
.filter > form[hidden] {
  display: none;
}
.filter > div {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #535353;
  padding: 0;
  margin: 0;
  width: 100%;
}
.filter > div p,
.filter > div > p:first-of-type {
  margin: 0.5rem 0;
  font-size: 1.60181rem;
  color: #696969;
}
.filter > div p > span,
.filter > div > p:first-of-type > span {
  font-size: 2.02729rem;
  color: #000;
}
.filter > div button {
  display: none;
  background-color: transparent;
  color: #000;
  border: 0;
  padding: 0;
  min-height: 0;
  margin-left: auto;
}

.js-filters-loaded .filter > div > button {
  display: inline-flex;
}

main > .filter {
  background-color: pink;
}

/*---------------------------------------------------------------*/
/*---------------- components/code-snippet.scss -----------------*/
/*---------------------------------------------------------------*/
/* Code */
code {
  background-color: #f3f3f3;
  padding: 0 0.5rem;
  word-break: break-all;
}
@media (min-width: 24rem) {
  code {
    word-break: break-word;
  }
}

pre,
div.code-block {
  display: flex;
  padding: 1rem;
  margin: 2.5rem 0;
  background-color: #f3f3f3;
  border: 1px solid #e6e6e6;
  overflow: auto;
  background-color: #f3f3f3;
}
pre > code,
div.code-block > code {
  white-space: unset;
}

div.code-block {
  font-family: monospace;
  white-space: pre;
  margin: 1em 0px;
}

.bg-color-offset pre,
.bg-color-offset div.code-block,
.bg-color-offset code {
  background-color: #fff;
}

/*---------------------------------------------------------------*/
/*----------------- components/focus-only.scss ------------------*/
/*---------------------------------------------------------------*/
*.focus-only,
*.button.focus-only {
  position: absolute;
  transform: scale(1, 1);
  font-size: inherit;
  padding: inherit;
}
*.focus-only:not(:focus),
*.button.focus-only:not(:focus) {
  transform: scale(1, 0);
  font-size: 0;
  padding: 0;
  min-height: 0;
}

/*---------------------------------------------------------------*/
/*------------------- components/footer.scss --------------------*/
/*---------------------------------------------------------------*/
/* Footer */
body > footer,
.test-cases article > footer {
  background-color: #ca005d;
  color: #fff;
  padding: 0.75rem;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 4rem;
}
body > footer > p,
.test-cases article > footer > p {
  font-size: 0.88889rem;
}
body > footer > div,
.test-cases article > footer > div {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
body > footer > div > *,
.test-cases article > footer > div > * {
  margin: 1rem;
}
body > footer > div > span,
.test-cases article > footer > div > span {
  font-family: "RO Serif", serif;
  font-weight: 400;
  font-size: 1.80203rem;
  font-style: italic;
  -webkit-font-smoothing: antialiased;
  margin-right: 2rem;
}
@media (min-width: 24rem) {
  body > footer > div > span,
.test-cases article > footer > div > span {
    min-width: 20rem;
  }
}
body > footer > div > div,
.test-cases article > footer > div > div {
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
}
body > footer > div > div > *,
.test-cases article > footer > div > div > * {
  margin: 1rem;
}
@media (min-width: 45rem) {
  body > footer > div > div,
.test-cases article > footer > div > div {
    justify-content: flex-end;
  }
}
body > footer > div > div.meta,
.test-cases article > footer > div > div.meta {
  width: 100%;
  margin: 0;
  margin-bottom: -3rem;
  margin-top: 3rem;
  border-top: 1px solid #fff;
}
body > footer > div > div a,
body > footer > div > div a:visited,
body > footer > div > nav a,
body > footer > div > nav a:visited,
.test-cases article > footer > div > div a,
.test-cases article > footer > div > nav a {
  color: #fff;
}
body > footer > div > div a:before, body > footer > div > div a:hover,
body > footer > div > div a:visited:before,
body > footer > div > div a:visited:hover,
body > footer > div > nav a:before,
body > footer > div > nav a:hover,
body > footer > div > nav a:visited:before,
body > footer > div > nav a:visited:hover,
.test-cases article > footer > div > div a:before,
.test-cases article > footer > div > div a:hover,
.test-cases article > footer > div > nav a:before,
.test-cases article > footer > div > nav a:hover {
  color: #fff;
}
body > footer > div > div a:hover,
body > footer > div > div a:visited:hover,
body > footer > div > nav a:hover,
body > footer > div > nav a:visited:hover,
.test-cases article > footer > div > div a:hover,
.test-cases article > footer > div > nav a:hover {
  text-decoration: underline;
}
body > footer > div > div h1,
body > footer > div > nav h1,
.test-cases article > footer > div > div h1,
.test-cases article > footer > div > nav h1 {
  color: #fff;
  margin-top: 0;
  font-size: 1.60181rem;
  font-weight: normal;
}

/*---------------------------------------------------------------*/
/*-------------------- components/form.scss ---------------------*/
/*---------------------------------------------------------------*/
/* Form variables */
/* Importing form components */
/*---------------------------------------------------------------*/
/*--------------- components/form-button.scss -------------------*/
/*---------------------------------------------------------------*/
form {
  /* Grouped buttons */
}
form button,
form a.button,
form input[type=button],
form input[type=submit],
form input[type=reset] {
  align-self: flex-start;
  width: auto;
}
form > button:last-child,
form > a.button:last-child,
form > input[type=button]:last-child,
form > input[type=submit]:last-child,
form > input[type=reset]:last-child {
  margin-bottom: -2rem;
  margin-top: 2rem;
}
form fieldset > .button-container button,
form fieldset > .button-container a.button,
form fieldset > .button-container input[type=button],
form fieldset > .button-container input[type=submit],
form fieldset > .button-container input[type=reset],
form > .button-container button,
form > .button-container a.button,
form > .button-container input[type=button],
form > .button-container input[type=submit],
form > .button-container input[type=reset] {
  margin-top: 0;
}
form fieldset > .button-container button:first-child,
form fieldset > .button-container a.button:first-child,
form fieldset > .button-container input[type=button]:first-child,
form fieldset > .button-container input[type=submit]:first-child,
form fieldset > .button-container input[type=reset]:first-child,
form > .button-container button:first-child,
form > .button-container a.button:first-child,
form > .button-container input[type=button]:first-child,
form > .button-container input[type=submit]:first-child,
form > .button-container input[type=reset]:first-child {
  margin-left: 0;
}
form fieldset > .button-container:last-child,
form > .button-container:last-child {
  /*margin-bottom: -2rem;*/
}
form fieldset > .button-container:last-child > button,
form fieldset > .button-container:last-child > a.button,
form fieldset > .button-container:last-child > input[type=button],
form fieldset > .button-container:last-child > input[type=submit],
form fieldset > .button-container:last-child > input[type=reset],
form > .button-container:last-child > button,
form > .button-container:last-child > a.button,
form > .button-container:last-child > input[type=button],
form > .button-container:last-child > input[type=submit],
form > .button-container:last-child > input[type=reset] {
  margin-bottom: 0;
}
form.horizontal-view fieldset > .button-container button,
form.horizontal-view fieldset > .button-container a.button,
form.horizontal-view fieldset > .button-container input[type=button],
form.horizontal-view fieldset > .button-container input[type=submit],
form.horizontal-view fieldset > .button-container input[type=reset], form.horizontal-view > .button-container button,
form.horizontal-view > .button-container a.button,
form.horizontal-view > .button-container input[type=button],
form.horizontal-view > .button-container input[type=submit],
form.horizontal-view > .button-container input[type=reset] {
  margin-left: 0;
}
@media (min-width: 50rem) {
  form.horizontal-view fieldset > .button-container, form.horizontal-view > .button-container {
    margin-left: calc(33.33% - 0.25rem);
    max-width: 66.66%;
  }
}

/*---------------------------------------------------------------*/
/*---------------- components/form-color-input.scss -------------*/
/*---------------------------------------------------------------*/
/* color input */
form input[type=color] {
  flex-direction: column;
  align-items: stretch;
  border: none;
  cursor: pointer;
}

/*---------------------------------------------------------------*/
/*--------------- components/combined-fields.scss ---------------*/
/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/
/*------- components/combined-fields-horizontal-form.scss -------*/
/*---------------------------------------------------------------*/
form.horizontal-view fieldset.column-2,
form.horizontal-view fieldset.column-3 {
  /* Grouped input fields */
}
@media (min-width: 50rem) {
  form.horizontal-view fieldset.column-2 legend,
form.horizontal-view fieldset.column-3 legend {
    max-width: 33.33%;
    top: 2.5rem;
  }
}
form.horizontal-view fieldset.column-2 > div,
form.horizontal-view fieldset.column-3 > div {
  margin-top: 0;
}
form.horizontal-view fieldset.column-2 > div span,
form.horizontal-view fieldset.column-3 > div span {
  max-width: 100%;
}
@media (min-width: 50rem) {
  form.horizontal-view fieldset.column-2 > div,
form.horizontal-view fieldset.column-3 > div {
    max-width: 66.66%;
    float: right;
  }
  form.horizontal-view fieldset.column-2 > div > div,
form.horizontal-view fieldset.column-3 > div > div {
    float: left;
  }
}

/*---------------------------------------------------------------*/
/*------------ components/combined-fields-help.scss -------------*/
/*---------------------------------------------------------------*/
form.help fieldset.column-2,
form.help fieldset.column-3 {
  position: relative;
  margin: 1rem 0;
  /* Required */
}
form.help fieldset.column-2 .help-button,
form.help fieldset.column-3 .help-button {
  top: 4.5rem;
  display: block;
  width: auto;
}
form.help fieldset.column-2.required .help-button,
form.help fieldset.column-3.required .help-button {
  top: 6.25rem;
  /* Increased to allow space for the additional label above the field */
}

/*---------------------------------------------------------------*/
/*---- components/combined-fields-help-horizontal-form.scss -----*/
/*---------------------------------------------------------------*/
form.help.horizontal-view fieldset.column-2 .help-button,
form.help.horizontal-view fieldset.column-3 .help-button {
  top: 4.5rem;
}
@media (min-width: 50rem) {
  form.help.horizontal-view fieldset.column-2 .help-button,
form.help.horizontal-view fieldset.column-3 .help-button {
    top: 1.75rem;
  }
}
form.help.horizontal-view fieldset.column-2.required .help-button,
form.help.horizontal-view fieldset.column-3.required .help-button {
  top: 6.25rem;
  /* Increased to allow space for the additional label above the field */
}
@media (min-width: 50rem) {
  form.help.horizontal-view fieldset.column-2.required .help-button,
form.help.horizontal-view fieldset.column-3.required .help-button {
    top: 3.5rem;
  }
}

/* Horizontally aligned input fields base styling */
form fieldset.column-2,
form fieldset.column-3 {
  position: relative;
  margin: 0;
  min-width: unset;
  /* Visually style the legend as the label */
  /* Grouped input fields */
}
form fieldset.column-2 > div,
form fieldset.column-2 > legend,
form fieldset.column-3 > div,
form fieldset.column-3 > legend {
  margin-left: 0;
  margin-right: 0;
}
form fieldset.column-2 legend,
form fieldset.column-3 legend {
  font-size: 1.125rem;
  font-weight: normal;
  float: left;
  width: 100%;
  word-break: break-word;
  padding-right: 1rem;
  box-sizing: border-box;
}
form fieldset.column-2 > div,
form fieldset.column-3 > div {
  width: 100%;
  max-width: 100%;
  margin-top: 0;
  /* Input field and label combined */
}
form fieldset.column-2 > div > div,
form fieldset.column-3 > div > div {
  min-width: 0;
  width: 100%;
  float: left;
  margin-right: 1rem;
}
form fieldset.column-2 > div > div:last-of-type,
form fieldset.column-3 > div > div:last-of-type {
  margin-right: 0;
}
form fieldset.column-2 > div > div label,
form fieldset.column-3 > div > div label {
  width: 100%;
}

form fieldset.column-2 {
  /* Grouped input fields */
}
form fieldset.column-2 > div {
  /* Input field and label combined */
}
form fieldset.column-2 > div > div:nth-of-type(even) {
  margin-right: 0;
}
@media (min-width: 30rem) {
  form fieldset.column-2 > div > div {
    min-width: 7rem;
    max-width: calc(50% - 0.5rem);
  }
}

form fieldset.column-3 {
  /* Grouped input fields */
}
form fieldset.column-3 > div {
  /* Input field and label combined */
}
form fieldset.column-3 > div > div:nth-of-type(3n + 3) {
  margin-right: 0;
}
@media (min-width: 38rem) {
  form fieldset.column-3 > div > div {
    min-width: 8rem;
    max-width: calc( 					33.33% - 0.666rem 				);
    /* 100% divided in three, margin-right (2rem) divided in three */
  }
}

/*---------------------------------------------------------------*/
/*----- components/form-component/element-messsage.scss ---------*/
/*---------------------------------------------------------------*/
form {
  /* When a message is placed in a group with an element it uses the aligment of that group */
}
form fieldset > div > div > .nota-bene,
form > div > div > .nota-bene {
  margin: 0;
}

/*---------------------------------------------------------------*/
/*-------------- components/form-fieldset.scss ------------------*/
/*---------------------------------------------------------------*/
/* Fieldset styling is a bit different compared to the default form styling.
This is because of a couple of styling restrictions and issues concerning fieldsets and it's children.
- Fieldsets can't use flexbox 
- When elements within the fieldset use flexbox, unwanted white-space appears at the bottom of the fieldset.
The amount of whitespace depends on the length of the fieldset before flex positioning took place. And will not be removed after. 

The usage of fieldsets is recommended because it is the semantically correct element to use for form grouping.
As well as it improves the experience for users who are using a screenreader to navigate the form. 

To prevent these issues to cause unexpected behaviour the fieldset and it's children within this set do no use flexbox for their positioning.
But the alternative styling as you can see below.

For more information on the bug see: https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers
and: https://bugs.chromium.org/p/chromium/issues/detail?id=262679 */
form fieldset {
  padding: 0;
  border: 0;
  margin: 2rem 0 0 0;
  display: inline-block;
  position: relative;
  min-width: 0;
  width: 100%;
}
form fieldset legend {
  padding-left: 0;
  /* Overwriting default browser padding because it's not needed when the fieldset doesn't have border */
  font-weight: bold;
  font-size: 1.26562rem;
  z-index: 1;
  position: relative;
}
form fieldset > * {
  margin-top: 1.5rem;
}
form fieldset > *:first-child {
  margin-top: 0;
}
form fieldset label,
form fieldset input,
form fieldset textarea,
form fieldset select {
  width: 100%;
}
form fieldset label {
  display: inline-block;
}
form fieldset button,
form fieldset a.button,
form fieldset input[type=button],
form fieldset input[type=submit],
form fieldset input[type=reset] {
  width: auto;
  display: block;
}
form fieldset button:before,
form fieldset a.button:before,
form fieldset input[type=button]:before,
form fieldset input[type=submit]:before,
form fieldset input[type=reset]:before {
  vertical-align: middle;
}
form fieldset input[type=radio],
form fieldset input[type=checkbox] {
  vertical-align: top;
}
form fieldset > fieldset {
  width: 100%;
}
form fieldset > fieldset div.error, form fieldset > fieldset div.warning, form fieldset > fieldset div.confirmation, form fieldset > fieldset div.explanation,
form fieldset > fieldset p.error,
form fieldset > fieldset p.warning,
form fieldset > fieldset p.confirmation,
form fieldset > fieldset p.explanation {
  float: left;
}
form fieldset div.error, form fieldset div.warning, form fieldset div.confirmation, form fieldset div.explanation,
form fieldset p.error,
form fieldset p.warning,
form fieldset p.confirmation,
form fieldset p.explanation {
  float: left;
}
form fieldset .button-container {
  display: block;
  float: left;
}
form fieldset .button-container > * {
  margin-right: 0.5rem;
}
form fieldset .button-container button,
form fieldset .button-container a.button,
form fieldset .button-container input[type=button],
form fieldset .button-container input[type=submit],
form fieldset .button-container input[type=reset] {
  display: block;
  float: left;
  text-align: left;
}
form fieldset .column-2,
form fieldset .column-3,
form fieldset .column-4 {
  box-sizing: border-box;
}
form fieldset .column-2 > *,
form fieldset .column-3 > *,
form fieldset .column-4 > * {
  width: 100%;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
@media (min-width: 42rem) {
  form fieldset .column-2 > *,
form fieldset .column-3 > * {
    width: 46%;
  }
}
@media (min-width: 60rem) {
  form fieldset .column-3 > *,
form fieldset .column-4 > * {
    width: 29.33%;
  }
}
@media (min-width: 60rem) {
  form fieldset .column-4 > * {
    width: 21%;
  }
}
@media (min-width: 50rem) {
  form.horizontal-view {
    /* Aliging grouped choice list */
  }
  form.horizontal-view input[type=checkbox],
form.horizontal-view input[type=radio] {
    margin-left: 33.33%;
  }
}
form.horizontal-view fieldset > div {
  margin-top: 2rem;
  float: left;
  /* used to re-render the div so long labels won't run out of the div */
  width: 100%;
}
form.horizontal-view fieldset > div.required label {
  padding-top: 1.75rem;
  /* Reserving space for the nota bene text */
}
form.horizontal-view fieldset > div.required input[type=radio] + label,
form.horizontal-view fieldset > div.required input[type=checkbox] + label {
  padding-top: 0;
}
form.horizontal-view fieldset > div.required > div span.nota-bene {
  max-width: 100%;
}
form.horizontal-view fieldset > div label,
form.horizontal-view fieldset > div input,
form.horizontal-view fieldset > div textarea,
form.horizontal-view fieldset > div select {
  max-width: 100%;
}
form.horizontal-view fieldset > div input[type=radio],
form.horizontal-view fieldset > div input[type=checkbox] {
  width: 1.25rem;
}
form.horizontal-view fieldset > div input[type=radio] + label,
form.horizontal-view fieldset > div input[type=checkbox] + label {
  float: none;
  width: calc(100% - 2.2rem);
}
@media (min-width: 50rem) {
  form.horizontal-view fieldset > div input[type=radio] + label,
form.horizontal-view fieldset > div input[type=checkbox] + label {
    width: calc(66.66% - 2.2rem);
  }
}
form.horizontal-view fieldset > div input[type=color] {
  width: 44px;
}
form.horizontal-view fieldset > div > span {
  max-width: 100%;
}
@media (min-width: 50rem) {
  form.horizontal-view fieldset > div > span {
    margin-bottom: 0;
  }
}
@media (min-width: 50rem) {
  form.horizontal-view fieldset > div {
    /* Overwriting input button width, can not use :not selector because safari doesn't support double selectors at this moment. */
  }
  form.horizontal-view fieldset > div label {
    width: 33.33%;
    min-width: 33.33%;
    float: left;
    display: inline-block;
  }
  form.horizontal-view fieldset > div > input,
form.horizontal-view fieldset > div > textarea,
form.horizontal-view fieldset > div > div,
form.horizontal-view fieldset > div select {
    width: 66.66%;
  }
  form.horizontal-view fieldset > div > input[type=submit],
form.horizontal-view fieldset > div > input[type=reset],
form.horizontal-view fieldset > div > input[type=button] {
    width: auto;
  }
  form.horizontal-view fieldset > div span.nota-bene {
    max-width: 66.66%;
    float: right;
  }
  form.horizontal-view fieldset > div > div {
    float: right;
    margin-left: 0;
  }
  form.horizontal-view fieldset > div > div a,
form.horizontal-view fieldset > div > div p,
form.horizontal-view fieldset > div > div span,
form.horizontal-view fieldset > div > div button,
form.horizontal-view fieldset > div > div a.button,
form.horizontal-view fieldset > div > div input[type=button],
form.horizontal-view fieldset > div > div input[type=submit],
form.horizontal-view fieldset > div > div input[type=reset] {
    max-width: 100%;
    float: none;
    margin-left: 0;
  }
  form.horizontal-view fieldset > div > div input,
form.horizontal-view fieldset > div > div textarea,
form.horizontal-view fieldset > div > div select {
    width: 100%;
  }
  form.horizontal-view fieldset > div > div input[type=radio],
form.horizontal-view fieldset > div > div input[type=checkbox] {
    margin-left: 0;
  }
  form.horizontal-view fieldset > div > div input[type=radio] + label,
form.horizontal-view fieldset > div > div input[type=checkbox] + label {
    width: calc(100% - 2.2rem);
  }
}
form.horizontal-view fieldset fieldset {
  display: inline-block;
}
form.horizontal-view fieldset fieldset legend {
  font-size: 1.125rem;
}
form.horizontal-view fieldset fieldset > label,
form.horizontal-view fieldset fieldset > div {
  width: 100%;
}
@media (min-width: 50rem) {
  form.horizontal-view fieldset > a,
form.horizontal-view fieldset > p,
form.horizontal-view fieldset > button,
form.horizontal-view fieldset > a.button,
form.horizontal-view fieldset > input[type=button],
form.horizontal-view fieldset > input[type=submit],
form.horizontal-view fieldset > input[type=reset] {
    max-width: 66.66%;
    float: left;
    margin-left: 33.33%;
    clear: both;
  }
  form.horizontal-view fieldset > div > a,
form.horizontal-view fieldset > div > p,
form.horizontal-view fieldset > div > button,
form.horizontal-view fieldset > div > a.button,
form.horizontal-view fieldset > div > input[type=button],
form.horizontal-view fieldset > div > input[type=submit],
form.horizontal-view fieldset > div > input[type=reset] {
    max-width: 66.66%;
    float: left;
    margin-left: 33.33%;
  }
  form.horizontal-view fieldset fieldset > label,
form.horizontal-view fieldset fieldset > div {
    float: left;
    margin-top: 1rem;
  }
}
form.help fieldset {
  /* Messages within grouped lists (e.g radio buttons and checkboxlists) */
}
form.help fieldset > div {
  position: relative;
  min-height: 2.75rem;
  /* collapsed help buttons within lists of checkboxes or radio buttons */
}
form.help fieldset > div input[type=radio],
form.help fieldset > div input[type=checkbox] {
  margin-top: 0.5rem;
}
form.help fieldset > div input[type=radio] + label,
form.help fieldset > div input[type=checkbox] + label {
  margin-bottom: 1rem;
  margin-top: 0.5rem;
}
form.help fieldset > div input[type=radio] + label:last-child,
form.help fieldset > div input[type=checkbox] + label:last-child {
  margin-bottom: 0.5rem;
}
form.help fieldset > label + div > p {
  margin-left: 0;
  max-width: 100%;
}
form.help > fieldset > button.help-button {
  margin-top: 1.5rem;
}

form.horizontal-view fieldset label:first-of-type {
  margin-top: 0;
}

/*---------------------------------------------------------------*/
/*---------------- components/form-layout.scss ------------------*/
/*---------------------------------------------------------------*/
form.horizontal-view {
  /* Grouped form elements */
}
form.horizontal-view > div {
  /* Group behaviour */
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-top: 2rem;
  width: 100%;
  position: relative;
  /* Grouped elements within the grouped form elements */
}
form.horizontal-view > div:first-child {
  margin-top: 0;
}
form.horizontal-view > div:last-of-type + button {
  margin-top: 1.5rem;
}
@media (min-width: 50rem) {
  form.horizontal-view > div {
    /* Aligning button with the inputfields if there are grouped input fields */
  }
  form.horizontal-view > div input {
    width: auto;
  }
  form.horizontal-view > div.required label {
    padding-top: 1.5rem;
    /* Reserving space for the nota bene text */
  }
  form.horizontal-view > div label {
    width: 33.33%;
  }
  form.horizontal-view > div > a,
form.horizontal-view > div > p,
form.horizontal-view > div > span {
    text-align: left;
    margin-left: 33.33%;
  }
  form.horizontal-view > div > a.error > span, form.horizontal-view > div > a.warning > span, form.horizontal-view > div > a.confirmation > span, form.horizontal-view > div > a.explanation > span, form.horizontal-view > div > a.primary > span,
form.horizontal-view > div > p.error > span,
form.horizontal-view > div > p.warning > span,
form.horizontal-view > div > p.confirmation > span,
form.horizontal-view > div > p.explanation > span,
form.horizontal-view > div > p.primary > span,
form.horizontal-view > div > span.error > span,
form.horizontal-view > div > span.warning > span,
form.horizontal-view > div > span.confirmation > span,
form.horizontal-view > div > span.explanation > span,
form.horizontal-view > div > span.primary > span {
    float: none;
    margin-left: 0;
  }
  form.horizontal-view > div + button, form.horizontal-view > div + a.button, form.horizontal-view > div + input[type=button], form.horizontal-view > div + input[type=submit], form.horizontal-view > div + input[type=reset] {
    margin-left: 33.33%;
  }
}
form.horizontal-view > div > div {
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
  min-height: 2.75rem;
  /* Grouped checkboxes with a label */
  /* Grouped input fields with an additional element. eg cancel or retrieve data button */
}
@media (min-width: 50rem) {
  form.horizontal-view > div > div {
    max-width: 66.66%;
  }
}
form.horizontal-view > div > div .checkbox {
  padding-left: 0;
  flex-direction: column;
}
form.horizontal-view > div > div .checkbox label {
  width: 100%;
}
form.horizontal-view > div > div > div {
  display: flex;
}
form.horizontal-view > div > div > div button,
form.horizontal-view > div > div > div a.button,
form.horizontal-view > div > div > div input[type=button],
form.horizontal-view > div > div > div input[type=submit],
form.horizontal-view > div > div > div input[type=reset] {
  margin: 0 0 0 1rem;
}
form.horizontal-view > div > div a,
form.horizontal-view > div > div p,
form.horizontal-view > div > div span,
form.horizontal-view > div > div button {
  text-align: left;
  margin-left: 0;
}
@media (min-width: 50rem) {
  form.horizontal-view {
    /* Checkbox alignment when grouped */
    /* Aligning button with the inputfields if there are grouped input fields */
  }
  form.horizontal-view > div > input[type=checkbox],
form.horizontal-view > div > input[type=radio] {
    margin-left: 33.33%;
  }
  form.horizontal-view > div > input[type=checkbox] + label,
form.horizontal-view > div > input[type=radio] + label {
    padding-top: 0;
    max-width: calc(66.66% - 2rem);
  }
  form.horizontal-view > div > input[type=checkbox] ~ p,
form.horizontal-view > div > input[type=radio] ~ p {
    margin-left: 33.33%;
  }
  form.horizontal-view > div + a, form.horizontal-view > div + p, form.horizontal-view > div + span {
    margin-left: 33%;
    text-align: left;
  }
}
@media (min-width: 50rem) and (min-width: 50rem) {
  form.horizontal-view > button,
form.horizontal-view > input[type=button],
form.horizontal-view > input[type=submit],
form.horizontal-view > input[type=reset],
form.horizontal-view > a,
form.horizontal-view > p,
form.horizontal-view > span {
    margin-left: 33.33%;
  }
  form.horizontal-view > a,
form.horizontal-view > p,
form.horizontal-view > span {
    width: 100%;
    /* Preventing elements from aligning on the same row */
  }
}
form.horizontal-view > fieldset > label,
form.horizontal-view > fieldset > div {
  float: left;
  margin-top: 1rem;
  width: 100%;
}
@media (min-width: 50rem) {
  form.horizontal-view > fieldset > label {
    width: 33.33%;
  }
  form.horizontal-view > fieldset > label + div {
    max-width: 66.66%;
  }
  form.horizontal-view > fieldset > label + div > div {
    max-width: 100%;
    width: 100%;
  }
  form.horizontal-view > fieldset > label + div > div input[type=radio] + label,
form.horizontal-view > fieldset > label + div > div input[type=checkbox] + label {
    width: calc(100% - 2.2rem);
  }
}
form.horizontal-view.help button.ro-icon {
  min-width: 2.75rem;
  justify-content: center;
}

/*---------------------------------------------------------------*/
/*------------- components/grouped-choice-list.scss -------------*/
/*---------------------------------------------------------------*/
/* Used within a form to visually style the legend as a label for grouped-choice-list elements such as checkboxlists or radiobutton lists. */
form fieldset.grouped-choice-list legend {
  font-size: 1.125rem;
  font-weight: normal;
}
@media (min-width: 50rem) {
  form.horizontal-view fieldset.grouped-choice-list legend {
    margin-bottom: -2rem;
    top: 0;
    max-width: 33.33%;
    position: absolute;
    padding-right: 1rem;
    box-sizing: border-box;
  }
  form.horizontal-view fieldset.grouped-choice-list legend + div {
    margin-top: 0;
  }
}

/*---------------------------------------------------------------*/
/*-------- components/form-component/form-headings.scss ---------*/
/*---------------------------------------------------------------*/
form h1,
form h2,
form h3 {
  margin-top: 1.5rem;
}
form h1 {
  font-size: 1.60181rem;
}
form h2,
form h3 {
  font-size: 1.26562rem;
}

/*---------------------------------------------------------------*/
/*--------------- components/form-help.scss ---------------------*/
/*---------------------------------------------------------------*/
form.help {
  position: relative;
  padding-right: 3.5rem;
}
form.help > div,
form.help > fieldset {
  position: relative;
}
form.help > div .help-button,
form.help > fieldset .help-button {
  top: 0;
  right: -3.5rem;
  border: 0;
  position: absolute;
  margin: 0;
}
form.help > div.required .help-button,
form.help > fieldset.required .help-button {
  top: 1.5rem;
}
form.help > div p.explanation.collapsed,
form.help > div div.explanation.collapsed,
form.help > fieldset p.explanation.collapsed,
form.help > fieldset div.explanation.collapsed {
  display: none;
}
@media (min-width: 50rem) {
  form.help > div .help-button,
form.help > fieldset .help-button {
    right: -4rem;
  }
}
@media (min-width: 50rem) {
  form.help {
    padding-right: 4rem;
  }
}
form.help fieldset {
  max-width: 100%;
  min-width: 0;
}

/* required fields */
form.help .required .help-button {
  top: 3.5rem;
}
@media (min-width: 50rem) {
  form.help.horizontal-view .required .help-button {
    top: 1.5rem;
    /* Decreased when label is positioned next to the field */
  }
}

/* Horizontal view */
form.horizontal-view.help > div .help-button,
form.horizontal-view.help > fieldset .help-button {
  top: 1.75rem;
}
@media (min-width: 50rem) {
  form.horizontal-view.help > div .help-button,
form.horizontal-view.help > fieldset .help-button {
    top: 0;
  }
}
form.horizontal-view.help > div.required .help-button,
form.horizontal-view.help > fieldset.required .help-button {
  top: 1.5rem;
}
form.horizontal-view.help > div > div .help-button {
  top: 0;
}
form.horizontal-view.help fieldset .required .help-button {
  top: 3.5rem;
}
@media (min-width: 50rem) {
  form.horizontal-view.help fieldset .required .help-button {
    top: 1.75rem;
  }
}
form.horizontal-view.help fieldset button.ro-icon {
  height: 2.75rem;
  width: 2.75rem;
}

/*---------------------------------------------------------------*/
/*------------- components/form-component/input.scss ------------*/
/*---------------------------------------------------------------*/
/* Input behaviour */
form input {
  box-sizing: border-box;
  padding: 0 0.75rem;
  font-size: inherit;
  font-family: inherit;
  flex-grow: 1;
  min-height: 44px;
  border: 1px solid #01689b;
  /* A border is needed to comply with the WCAG SC 1.4.11 rules concerning the contrast between the field and the surrounding color*/
  width: 100%;
  max-width: 100%;
  text-overflow: ellipsis;
}
form input:active, form input.active {
  outline: 2px dotted #000;
}
form input[type=color] {
  padding: 0;
  flex-grow: unset;
  width: auto;
  min-width: 44px;
}
form input[type=file] {
  padding: 1rem;
  background-color: #fff;
}
form input[type=range] {
  -webkit-appearance: none;
  height: 2px;
  min-height: 0;
  border-radius: 5px;
  background: #01689b;
  outline: none;
  padding: 0;
}
form input[type=range] ~ output {
  margin-left: 1rem;
}
form input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: #01689b;
  cursor: pointer;
}
form input[type=range]::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #01689b;
  cursor: pointer;
}
form input[type=range]:disabled {
  background: #cccccc;
}
form input[type=range]:disabled::-moz-range-thumb {
  background: #cccccc;
}
form input[type=range]:disabled::-webkit-slider-thumb {
  background: #cccccc;
}

/*---------------------------------------------------------------*/
/*---------------- components/form-label.scss -------------------*/
/*---------------------------------------------------------------*/
form {
  /* grouped input styling if the form doesn't use columns, but contains a group with a input field and help buttons or messages */
}
form label {
  width: 100%;
  margin-top: 2rem;
  padding-right: 1rem;
  box-sizing: border-box;
  word-break: break-word;
  display: inline-block;
}
form label:first-child {
  margin-top: 0;
}
form > label + div + button {
  margin-left: 0;
}

/*---------------------------------------------------------------*/
/*--------- components/form-component/line-element.scss ---------*/
/*---------------------------------------------------------------*/
/* Grouped input fields with an additional element. eg cancel or retrieve data button */
.line-element {
  display: flex;
}
.line-element button,
.line-element a.button,
.line-element input[type=button],
.line-element input[type=submit],
.line-element input[type=reset] {
  margin: 0 0 0 1rem;
}

fieldset .line-element,
.horizontal-view fieldset .line-element {
  display: block;
}
fieldset .line-element input,
fieldset .line-element text-area,
.horizontal-view fieldset .line-element input,
.horizontal-view fieldset .line-element text-area {
  max-width: calc(100% - 4rem);
  float: left;
}
fieldset .line-element button,
fieldset .line-element a.button,
fieldset .line-element input[type=button],
fieldset .line-element input[type=submit],
fieldset .line-element input[type=reset],
.horizontal-view fieldset .line-element button,
.horizontal-view fieldset .line-element a.button,
.horizontal-view fieldset .line-element input[type=button],
.horizontal-view fieldset .line-element input[type=submit],
.horizontal-view fieldset .line-element input[type=reset] {
  width: 3rem;
  margin: 0 0 0 1rem;
  float: left;
  padding: 0;
}

/*---------------------------------------------------------------*/
/*-------- components/form-component/messages.scss --------------*/
/*---------------------------------------------------------------*/
/* Default message styling within forms*/
form {
  /* Styling for messages placed directly within the form */
}
form > div.error, form > div.warning, form > div.confirmation, form > div.explanation {
  margin: 1rem 0 0 0;
}
form div.error, form div.warning, form div.confirmation, form div.explanation,
form p.error,
form p.warning,
form p.confirmation,
form p.explanation {
  width: 100%;
  box-sizing: border-box;
  margin-left: 0;
}
@media (min-width: 50rem) {
  form div.error,
form p.error {
    margin-bottom: 0;
  }
}
form.horizontal-view > div.error, form.horizontal-view > div.warning, form.horizontal-view > div.confirmation, form.horizontal-view > div.explanation {
  align-items: flex-start;
}
form.horizontal-view > div.error > a,
form.horizontal-view > div.error > p,
form.horizontal-view > div.error > span, form.horizontal-view > div.warning > a,
form.horizontal-view > div.warning > p,
form.horizontal-view > div.warning > span, form.horizontal-view > div.confirmation > a,
form.horizontal-view > div.confirmation > p,
form.horizontal-view > div.confirmation > span, form.horizontal-view > div.explanation > a,
form.horizontal-view > div.explanation > p,
form.horizontal-view > div.explanation > span {
  margin-left: 0;
}

/*---------------------------------------------------------------*/
/*------- components/form-radio-button-and-checkbox.scss --------*/
/*---------------------------------------------------------------*/
form label.radio {
  width: initial;
  min-height: 1.125rem;
  position: relative;
  padding-left: 2rem;
  padding-right: 2rem;
  cursor: pointer;
  margin-bottom: 0.5rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
form label.radio:hover input ~ span {
  background-color: #e6e6e6;
}
form label.radio input:disabled ~ span {
  background-color: #e6e6e6;
  border-color: #b4b4b4;
}
form label.radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
form label.radio input ~ span {
  position: absolute;
  top: 0;
  left: 0;
  height: 1.5rem;
  width: 1.5rem;
  background-color: #fff;
  margin: 0;
  border: 2px solid #535353;
  box-sizing: border-box;
}
form label.radio input ~ span:after {
  content: "";
  position: absolute;
  display: none;
}
form label.radio input[type=radio] ~ span {
  border-radius: 50%;
}
form label.radio input[type=radio] ~ span:after {
  top: 0.4rem;
  left: 0.4rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: #01689b;
}
form label.radio input[type=radio]:checked ~ span {
  background-color: #fff;
}
form label.radio input[type=radio]:checked ~ span:after {
  display: block;
}
form input[type=radio],
form input[type=checkbox] {
  margin-right: 0.5rem;
  margin-top: 0;
  padding: 0;
  align-self: flex-start;
  vertical-align: top;
}
form input[type=radio] + label,
form input[type=checkbox] + label {
  width: auto;
  cursor: pointer;
  margin-top: 0;
  max-width: calc(100% - 2.2rem);
  padding-right: 0;
}
form input[type=radio] + label + .error, form input[type=radio] + label + .warning, form input[type=radio] + label + .confirmation, form input[type=radio] + label + .explanation, form input[type=radio] + label + .primary,
form input[type=checkbox] + label + .error,
form input[type=checkbox] + label + .warning,
form input[type=checkbox] + label + .confirmation,
form input[type=checkbox] + label + .explanation,
form input[type=checkbox] + label + .primary {
  margin-top: 0.5rem;
}
form input[type=radio]:required,
form input[type=checkbox]:required {
  order: inherit;
}
form .required input[type=radio],
form .required input[type=checkbox] {
  margin-top: 0.75rem;
}
form .required input[type=radio] + label,
form .required input[type=checkbox] + label {
  margin-top: 0.75rem;
}
@supports (appearance: none) or (-webkit-appearance: none) or (-moz-appearance: none) {
  form input[type=radio],
form input[type=checkbox] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: 1.25rem;
    height: 1.25rem;
    min-width: 1.25rem;
    border: 0.125rem solid black;
    cursor: pointer;
    background-color: white;
    min-height: auto;
    flex-grow: 0;
  }
  form input[type=radio]:disabled,
form input[type=checkbox]:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
  }
  form input[type=radio] {
    border-radius: 100%;
    width: 1.4375rem;
    /* 23px by rem size 16px*/
    height: 1.4375rem;
    min-width: 1.4375rem;
    /* Specified to prevent radio buttons to become ovals on long labels */
  }
  form input[type=checkbox]:checked {
    border-color: #01689b;
    background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAyNCIgaGVpZ2h0PSIxMDI0IiB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8Zz4KICA8cGF0aAogICAgIGQ9Ik0gOTEyLjM1MTQ1LDI5Mi43MzA2IDM4OS4yMjU1NCw4MTkuMTQxNDIgMTExLjY0ODU1LDU0MC43NDMxOSAxOTkuNTIwNTUsNDUyLjg3MTE4IDM4Ny41ODMwOCw2NDAuOTMzNyA4MjIuODM2OTYsMjA0Ljg1ODU5IFoiCiAgICAgZmlsbD0iI2ZmZiIvPgo8L2c+Cjwvc3ZnPgo="), linear-gradient(#01689b, #01689b);
    background-size: contain;
  }
  form input[type=radio]:checked {
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIj4KPGNpcmNsZSByPSI1NSIgY3k9IjEwMCIgY3g9IjEwMCIgZmlsbD0iIzAxNjg5YiIgLz4KPC9zdmc+"), linear-gradient(#fff, #fff);
  }
}
form > label + div input[type=checkbox] {
  margin-left: 0;
}

/*---------------------------------------------------------------*/
/*------------------- components/select.scss --------------------*/
/*---------------------------------------------------------------*/
form select {
  cursor: pointer;
  flex-grow: 1;
  font-family: inherit;
  font-size: inherit;
  width: 100%;
}

/*---------------------------------------------------------------*/
/*----------------- components/textarea.scss --------------------*/
/*---------------------------------------------------------------*/
form textarea {
  resize: vertical;
  box-sizing: border-box;
  padding: 0.75rem;
  font-size: inherit;
  font-family: inherit;
  flex-grow: 1;
  min-height: 2.75rem;
  width: 100%;
  border-color: #01689b;
  /* A border is needed to comply with the WCAG SC 1.4.11 rules concerning the contrast between the field and the surrounding color*/
}
form.horizontal-view {
  /* Textareas that have been grouped within a div */
}
@media (min-width: 50rem) {
  form.horizontal-view textarea,
form.horizontal-view select {
    max-width: 66.66%;
  }
}
form.horizontal-view > div > div textarea,
form.horizontal-view > div > div select {
  max-width: 100%;
}

/*---------------------------------------------------------------*/
/*------- components/form-compontent/description-list.scss ------*/
/*---------------------------------------------------------------*/
form dl {
  display: inline-block;
  width: 100%;
}
form dl > div {
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
}
form dl > div:nth-child(odd) {
  background-color: #e6e6e6;
}
form dl > div:last-child {
  margin-bottom: 0;
}
form dt,
form dd {
  white-space: pre-wrap;
  word-break: break-word;
}
form dd {
  margin-left: 0;
}
@media (min-width: 42rem) {
  form dt,
form dd {
    float: left;
  }
  form dt {
    min-width: 40%;
    width: 40%;
    font-weight: normal;
  }
  form dd {
    margin-left: 2rem;
    width: calc(60% - 2rem);
  }
}
@media (min-width: 42rem) {
  form.horizontal-view dt {
    min-width: 33.33%;
    width: 33.33%;
    padding-right: 1rem;
    box-sizing: border-box;
  }
}
@media (min-width: 42rem) {
  form.horizontal-view dd {
    margin-left: 0;
    width: 66.66%;
  }
}

/* Form styling */
form {
  display: flex;
  flex-wrap: wrap;
  font-size: 1.125rem;
  font-family: inherit;
  padding: 2rem;
  background-color: #f3f3f3;
  margin: 2rem 0;
  flex-direction: column;
  /* state exceptions */
}
form *:focus,
form *:focus + label:before {
  outline-offset: 0;
}
form > * {
  margin-top: 1.5rem;
  max-width: 100%;
}
form > *:first-child {
  margin-top: 0;
}
form > label + div {
  margin-top: 0.5rem;
}
form p {
  margin: 0;
}
form > p {
  margin: 1rem 0 0 0;
}
form > div {
  line-height: 1.5rem;
}
form.line-form {
  padding: 0;
  background-color: unset;
}

/* General form styling for forms within other elements */
header form,
table form,
.hero form {
  padding: 0;
  margin: 0;
  background-color: transparent;
  flex-direction: row;
}
header form input,
table form input,
.hero form input {
  border: 0;
}
header form button:last-child,
header form a.button:last-child,
header form input[type=button]:last-child,
header form input[type=submit]:last-child,
header form input[type=reset]:last-child,
table form button:last-child,
table form a.button:last-child,
table form input[type=button]:last-child,
table form input[type=submit]:last-child,
table form input[type=reset]:last-child,
.hero form button:last-child,
.hero form a.button:last-child,
.hero form input[type=button]:last-child,
.hero form input[type=submit]:last-child,
.hero form input[type=reset]:last-child {
  /* witin a table the button doesn't need to be aligned with the bottom of the form. 
  Therefor the default styling can be overwritten when inside a table. */
  margin-bottom: 0;
  margin-top: 0;
}

/*---------------------------------------------------------------*/
/*------------------- components/header.scss --------------------*/
/*---------------------------------------------------------------*/
body > header,
.test-cases article > header {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
body > header > section > div,
.test-cases article > header > section > div {
  border-top: 0;
}

/*---------------------------------------------------------------*/
/*--------------------- components/hero.scss --------------------*/
/*---------------------------------------------------------------*/
.hero {
  /* Default hero styling, without a photo */
  position: relative;
  background-color: #01689b;
  color: #fff;
  display: flex;
  flex-direction: column;
  color: #fff;
  min-height: 12rem;
  /* Adding a cover photo through css instead of html is possible by using the css below */
  /* background-image: url('../img/loremipsum.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;*/
  /* Only show styling when an coverphoto is available */
}
.hero img {
  min-height: 12rem;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero img:only-child {
  position: absolute;
}
.hero > div {
  color: #fff;
  z-index: 1;
}
.hero > div > h1 {
  color: inherit;
}
.hero > div:only-child {
  background-color: transparent;
}
.hero > div:only-child button.secondary,
.hero > div:only-child a.button.secondary,
.hero > div:only-child input[type=button].secondary,
.hero > div:only-child span.button.secondary,
.hero > div:only-child input[type=submit].secondary,
.hero > div:only-child input[type=reset].secondary {
  border: 2px solid #fff;
  color: #fff;
}
.hero > div .tile {
  margin-bottom: auto;
}
@media (min-width: 42rem) {
  .hero > div {
    padding: 3rem 3%;
  }
}
.hero form.search {
  flex-grow: inherit;
  flex-wrap: nowrap;
}
.hero form.search button,
.hero form.search a.button,
.hero form.search input[type=button],
.hero form.search input[type=submit],
.hero form.search input[type=reset] {
  font-size: 0;
}
.hero form.search button:before,
.hero form.search a.button:before,
.hero form.search input[type=button]:before,
.hero form.search input[type=submit]:before,
.hero form.search input[type=reset]:before {
  margin-right: 0;
}
.hero form.search input {
  margin: 0;
}
@media (min-width: 42rem) {
  .hero form.search input {
    max-width: 20rem;
  }
}
.hero img + div {
  display: flex;
}
.hero img + div > h1 {
  color: #000;
  align-self: flex-end;
  color: inherit;
}
@media (min-width: 42rem) {
  .hero {
    min-height: 30rem;
    /* Only show styling when an coverphoto is available */
  }
  .hero img + div:before {
    content: "";
    top: 0;
    left: 0;
    background-color: #000;
    opacity: 0.4;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
  }
  .hero img {
    position: absolute;
  }
  .hero > div {
    background-color: transparent;
    color: #fff;
  }
  .hero img + div > h1 {
    color: inherit;
    font-size: 2.88651rem;
  }
}

/*---------------------------------------------------------------*/
/*-------------------- components/label.scss --------------------*/
/*---------------------------------------------------------------*/
.critical,
.high,
.medium,
.low,
.very-low,
.recommendation {
  padding: 0 0.5rem;
  min-width: 7rem;
  display: inline-block;
  font-size: 0.88889rem;
  text-align: center;
  margin: 0;
}

.critical {
  background-color: #42145f;
  color: #fff;
}

.high {
  background-color: #d52b1e;
  color: #fff;
}

.medium {
  background-color: #e17000;
  color: #000;
}

.low {
  background-color: #f9e11e;
  color: #000;
}

.very-low {
  background-color: #fdf6bb;
  color: #000;
}

.recommendation {
  background-color: #cce0f1;
  color: #000;
}

/*----------------------------------------------------------------------------------*/
/*----------------------------- components/icon-set.scss ---------------------------*/
/*----------------------------------------------------------------------------------*/
.icon-set .ro-icon:before {
  font-size: 1.5rem;
}

/*---------------------------------------------------------------*/
/*-------------------- components/language.scss -----------------*/
/*---------------------------------------------------------------*/
.language {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  flex-wrap: wrap;
  background-color: #f3f3f3;
  width: auto;
  flex-grow: initial;
  margin: 0;
  padding: 0;
  /* Remove default margin from span's and p's to keep the language bar's height to a minimum */
}
.language a {
  margin: 0 0.5rem;
  white-space: nowrap;
}
.language > span,
.language > p {
  margin: 0;
}

/*---------------------------------------------------------------*/
/*------------------ components/login-meta.scss -----------------*/
/*---------------------------------------------------------------*/
.login-meta {
  flex-direction: row;
  justify-content: flex-end;
  padding: 0 0 0 1rem;
  width: auto;
  max-width: unset;
  flex-grow: initial;
  margin: 0;
}

/*---------------------------------------------------------------*/
/*------------------ components/ro-logo.scss --------------------*/
/*---------------------------------------------------------------*/
/* Size and behaviour set to Rijksoverheid branding specifications:
https://www.rijkshuisstijl.nl/basiselementen/basiselementen-online/logo */
.ro-logo {
  display: flex;
  align-items: center;
  font-size: 0;
  margin-bottom: 0.625rem;
  text-decoration: none;
  font-family: "RO Serif", serif;
  color: #000;
  width: 100%;
}
.ro-logo:visited, .ro-logo:hover, .ro-logo:visited:hover {
  color: #000;
}
@media (min-width: 30rem) {
  .ro-logo {
    margin-bottom: 1.44rem;
    font-size: inherit;
  }
}
@media (min-width: 48rem) {
  .ro-logo {
    margin-bottom: 1.56rem;
  }
}
.ro-logo img {
  min-width: 2.5rem;
  height: 3.75rem;
  align-self: flex-end;
  overflow: hidden;
  object-fit: cover;
  object-position: bottom;
  margin-left: calc( 			50% - 1.25rem 		);
  /* Half the screen minus half the size of the logo */
}
@media (min-width: 30rem) {
  .ro-logo img {
    min-width: 2.8125rem;
    height: 5.625rem;
    margin-right: 1rem;
    margin-left: calc( 				50% - 1.40625rem 			);
    /* Half the screen minus half the size of the logo */
  }
}
@media (min-width: 48rem) {
  .ro-logo img {
    min-width: 3.125rem;
    height: 6.25rem;
    margin-left: calc( 				50% - 1.5625rem 			);
    /* Half the screen minus half the size of the logo */
  }
}

/*---------------------------------------------------------------*/
/*------------ components/message-counter.scss ------------------*/
/*---------------------------------------------------------------*/
.message-counter {
  background-color: #d52a1e;
  color: #fff;
  border-radius: 1.125rem;
  min-width: 1.125rem;
  height: 1.125rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-grow: 0;
  padding: 0.25rem;
  font-size: 0.88889rem;
  margin: 0;
}

/*---------------------------------------------------------------*/
/*----------------- components/navigation.scss ------------------*/
/*---------------------------------------------------------------*/
main nav > h1 {
  font-size: 1.60181rem;
  font-weight: normal;
  color: #01689b;
}

body > header,
.test-cases article > header {
  position: relative;
  /* Making sure basic html structures are presented properly */
  /* Breadcrumb menu */
  /** Tab menu */
}
body > header button,
body > header a.button,
body > header input[type=button],
body > header input[type=submit],
body > header input[type=reset],
.test-cases article > header button,
.test-cases article > header a.button,
.test-cases article > header input[type=button],
.test-cases article > header input[type=submit],
.test-cases article > header input[type=reset] {
  margin: 0;
  min-height: 3.5rem;
}
body > header button:hover,
body > header a.button:hover,
body > header input[type=button]:hover,
body > header input[type=submit]:hover,
body > header input[type=reset]:hover,
.test-cases article > header button:hover,
.test-cases article > header a.button:hover,
.test-cases article > header input[type=button]:hover,
.test-cases article > header input[type=submit]:hover,
.test-cases article > header input[type=reset]:hover {
  background-color: #efb2ce;
  color: #000;
  border-color: #efb2ce;
}
@media (min-width: 42rem) {
  body > header button,
body > header a.button,
body > header input[type=button],
body > header input[type=submit],
body > header input[type=reset],
.test-cases article > header button,
.test-cases article > header a.button,
.test-cases article > header input[type=button],
.test-cases article > header input[type=submit],
.test-cases article > header input[type=reset] {
    font-size: 1.125rem;
  }
  body > header button:before,
body > header a.button:before,
body > header input[type=button]:before,
body > header input[type=submit]:before,
body > header input[type=reset]:before,
.test-cases article > header button:before,
.test-cases article > header a.button:before,
.test-cases article > header input[type=button]:before,
.test-cases article > header input[type=submit]:before,
.test-cases article > header input[type=reset]:before {
    font-size: 0.9rem;
    margin-right: 0.5rem;
  }
}
body > header .focus-only,
.test-cases article > header .focus-only {
  left: 10%;
  top: 2.25rem;
  /* Height of the header - 50% height of the button */
}
body > header nav > div,
body > header section > div,
.test-cases article > header nav > div,
.test-cases article > header section > div {
  padding: 0 3%;
}
@media (min-width: 84rem) {
  body > header nav > div,
body > header section > div,
.test-cases article > header nav > div,
.test-cases article > header section > div {
    padding: 0;
  }
}
body > header > section,
.test-cases article > header > section {
  background-color: #ca005d;
  color: #fff;
  width: 100%;
}
body > header > section > div,
.test-cases article > header > section > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}
body > header > section > div form input,
.test-cases article > header > section > div form input {
  margin-bottom: 0;
}
body > header > section > div form button,
body > header > section > div form a.button,
body > header > section > div form input[type=button],
body > header > section > div form input[type=submit],
body > header > section > div form input[type=reset],
.test-cases article > header > section > div form button,
.test-cases article > header > section > div form a.button,
.test-cases article > header > section > div form input[type=button],
.test-cases article > header > section > div form input[type=submit],
.test-cases article > header > section > div form input[type=reset] {
  background-color: transparent;
}
body > header > section > div form button:hover,
body > header > section > div form a.button:hover,
body > header > section > div form input[type=button]:hover,
body > header > section > div form input[type=submit]:hover,
body > header > section > div form input[type=reset]:hover,
.test-cases article > header > section > div form button:hover,
.test-cases article > header > section > div form a.button:hover,
.test-cases article > header > section > div form input[type=button]:hover,
.test-cases article > header > section > div form input[type=submit]:hover,
.test-cases article > header > section > div form input[type=reset]:hover {
  background-color: #efb2ce;
  color: #000;
}
@media (min-width: 42rem) {
  body > header > section > div form button,
body > header > section > div form a.button,
body > header > section > div form input[type=button],
body > header > section > div form input[type=submit],
body > header > section > div form input[type=reset],
.test-cases article > header > section > div form button,
.test-cases article > header > section > div form a.button,
.test-cases article > header > section > div form input[type=button],
.test-cases article > header > section > div form input[type=submit],
.test-cases article > header > section > div form input[type=reset] {
    background-color: transparent;
    height: 100%;
  }
  body > header > section > div form button:hover,
body > header > section > div form a.button:hover,
body > header > section > div form input[type=button]:hover,
body > header > section > div form input[type=submit]:hover,
body > header > section > div form input[type=reset]:hover,
.test-cases article > header > section > div form button:hover,
.test-cases article > header > section > div form a.button:hover,
.test-cases article > header > section > div form input[type=button]:hover,
.test-cases article > header > section > div form input[type=submit]:hover,
.test-cases article > header > section > div form input[type=reset]:hover {
    background-color: #efb2ce;
    color: #000;
  }
  body > header > section > div form button:hover:before,
body > header > section > div form a.button:hover:before,
body > header > section > div form input[type=button]:hover:before,
body > header > section > div form input[type=submit]:hover:before,
body > header > section > div form input[type=reset]:hover:before,
.test-cases article > header > section > div form button:hover:before,
.test-cases article > header > section > div form a.button:hover:before,
.test-cases article > header > section > div form input[type=button]:hover:before,
.test-cases article > header > section > div form input[type=submit]:hover:before,
.test-cases article > header > section > div form input[type=reset]:hover:before {
    color: inherit;
  }
}
body > header > section > div form.search,
.test-cases article > header > section > div form.search {
  flex-wrap: nowrap;
  margin: 0.5rem;
}
@media (min-width: 42rem) {
  body > header > section > div form.search,
.test-cases article > header > section > div form.search {
    width: unset;
    margin: 0;
  }
}
body > header > section > div form.search input,
.test-cases article > header > section > div form.search input {
  margin: 0;
}
@media (min-width: 42rem) {
  body > header > section > div form.search input,
.test-cases article > header > section > div form.search input {
    display: none;
  }
}
body > header > section > div form.search button,
body > header > section > div form.search a.button,
body > header > section > div form.search input[type=button],
body > header > section > div form.search input[type=submit],
body > header > section > div form.search input[type=reset],
.test-cases article > header > section > div form.search button,
.test-cases article > header > section > div form.search a.button,
.test-cases article > header > section > div form.search input[type=button],
.test-cases article > header > section > div form.search input[type=submit],
.test-cases article > header > section > div form.search input[type=reset] {
  background-color: #404040;
  min-height: auto;
}
body > header > section > div form.search button:hover,
body > header > section > div form.search a.button:hover,
body > header > section > div form.search input[type=button]:hover,
body > header > section > div form.search input[type=submit]:hover,
body > header > section > div form.search input[type=reset]:hover,
.test-cases article > header > section > div form.search button:hover,
.test-cases article > header > section > div form.search a.button:hover,
.test-cases article > header > section > div form.search input[type=button]:hover,
.test-cases article > header > section > div form.search input[type=submit]:hover,
.test-cases article > header > section > div form.search input[type=reset]:hover {
  background-color: #000;
}
body > header > section > div form.search button:hover:before,
body > header > section > div form.search a.button:hover:before,
body > header > section > div form.search input[type=button]:hover:before,
body > header > section > div form.search input[type=submit]:hover:before,
body > header > section > div form.search input[type=reset]:hover:before,
.test-cases article > header > section > div form.search button:hover:before,
.test-cases article > header > section > div form.search a.button:hover:before,
.test-cases article > header > section > div form.search input[type=button]:hover:before,
.test-cases article > header > section > div form.search input[type=submit]:hover:before,
.test-cases article > header > section > div form.search input[type=reset]:hover:before {
  color: #fff;
}
@media (min-width: 42rem) {
  body > header > section > div form.search button,
body > header > section > div form.search a.button,
body > header > section > div form.search input[type=button],
body > header > section > div form.search input[type=submit],
body > header > section > div form.search input[type=reset],
.test-cases article > header > section > div form.search button,
.test-cases article > header > section > div form.search a.button,
.test-cases article > header > section > div form.search input[type=button],
.test-cases article > header > section > div form.search input[type=submit],
.test-cases article > header > section > div form.search input[type=reset] {
    background-color: transparent;
    height: 100%;
  }
  body > header > section > div form.search button:hover,
body > header > section > div form.search a.button:hover,
body > header > section > div form.search input[type=button]:hover,
body > header > section > div form.search input[type=submit]:hover,
body > header > section > div form.search input[type=reset]:hover,
.test-cases article > header > section > div form.search button:hover,
.test-cases article > header > section > div form.search a.button:hover,
.test-cases article > header > section > div form.search input[type=button]:hover,
.test-cases article > header > section > div form.search input[type=submit]:hover,
.test-cases article > header > section > div form.search input[type=reset]:hover {
    background-color: #efb2ce;
    color: #000;
  }
  body > header > section > div form.search button:hover:before,
body > header > section > div form.search a.button:hover:before,
body > header > section > div form.search input[type=button]:hover:before,
body > header > section > div form.search input[type=submit]:hover:before,
body > header > section > div form.search input[type=reset]:hover:before,
.test-cases article > header > section > div form.search button:hover:before,
.test-cases article > header > section > div form.search a.button:hover:before,
.test-cases article > header > section > div form.search input[type=button]:hover:before,
.test-cases article > header > section > div form.search input[type=submit]:hover:before,
.test-cases article > header > section > div form.search input[type=reset]:hover:before {
    color: inherit;
  }
}
body > header nav,
.test-cases article > header nav {
  background-color: #ca005d;
  color: #fff;
  display: flex;
  box-sizing: border-box;
  min-height: 2.75rem;
  max-width: 100%;
  flex-grow: 1;
  margin: 0;
  /* Menu base styles */
}
body > header nav ul,
body > header nav ol,
.test-cases article > header nav ul,
.test-cases article > header nav ol {
  padding: 0;
}
body > header nav ul li,
body > header nav ol li,
.test-cases article > header nav ul li,
.test-cases article > header nav ol li {
  padding: 0;
  margin: 0;
  justify-content: center;
  min-height: 1.75rem;
  max-width: 100%;
  /* Overwriting the default max width that is used to keep text under a certain width for readability. Menu items are smaller content wise but should visually fill the entire width. */
}
body > header nav ul li a,
body > header nav ol li a,
.test-cases article > header nav ul li a,
.test-cases article > header nav ol li a {
  font-size: 1.26562rem;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body > header nav ul li a:hover,
body > header nav ol li a:hover,
.test-cases article > header nav ul li a:hover,
.test-cases article > header nav ol li a:hover {
  color: #fff;
  /* Overwriting the default hover color because it's not needed here due to the underline instead of color feedback */
}
body > header nav ul li a:visited,
body > header nav ol li a:visited,
.test-cases article > header nav ul li a:visited,
.test-cases article > header nav ol li a:visited {
  color: inherit;
}
body > header nav ul li a:visited:before,
body > header nav ol li a:visited:before,
.test-cases article > header nav ul li a:visited:before,
.test-cases article > header nav ol li a:visited:before {
  color: inherit;
}
body > header nav ul li a:before,
body > header nav ol li a:before,
.test-cases article > header nav ul li a:before,
.test-cases article > header nav ol li a:before {
  content: none;
  /* The header links don't need the default link icon */
}
body > header nav ul li:first-child a:before,
body > header nav ol li:first-child a:before,
.test-cases article > header nav ul li:first-child a:before,
.test-cases article > header nav ol li:first-child a:before {
  content: "";
  font-family: "RO Icons";
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 1.125rem;
  position: static;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Firefox */
  font-smoothing: antialiased;
  margin-right: 0.25rem;
  color: inherit;
  font-size: 0.9rem;
}
body > header > nav,
.test-cases article > header > nav {
  width: 100%;
}
body > header.breadcrumbs nav,
.test-cases article > header.breadcrumbs nav {
  margin-right: auto;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
}
body > header.breadcrumbs nav ul,
body > header.breadcrumbs nav ol,
.test-cases article > header.breadcrumbs nav ul,
.test-cases article > header.breadcrumbs nav ol {
  flex-direction: row;
  flex-wrap: wrap;
  display: flex;
  margin: 0;
}
body > header.breadcrumbs nav ul li,
body > header.breadcrumbs nav ol li,
.test-cases article > header.breadcrumbs nav ul li,
.test-cases article > header.breadcrumbs nav ol li {
  list-style: none;
  /* Only showing the home icon on wider screens, as requested within the style guide */
}
@media (min-width: 42rem) {
  body > header.breadcrumbs nav ul li:first-child,
body > header.breadcrumbs nav ol li:first-child,
.test-cases article > header.breadcrumbs nav ul li:first-child,
.test-cases article > header.breadcrumbs nav ol li:first-child {
    margin-left: 2rem;
    /* Reserving space for the home icon */
  }
  body > header.breadcrumbs nav ul li:first-child a:before,
body > header.breadcrumbs nav ol li:first-child a:before,
.test-cases article > header.breadcrumbs nav ul li:first-child a:before,
.test-cases article > header.breadcrumbs nav ol li:first-child a:before {
    content: "";
    position: absolute;
    /* Removing the button from the flow to prevent an underline on hover */
    left: -2rem;
    width: 1rem;
    height: 1.5rem;
    top: calc(50% - 0.75rem);
    /* Set to center */
  }
}
body > header.breadcrumbs nav ul li a,
body > header.breadcrumbs nav ol li a,
.test-cases article > header.breadcrumbs nav ul li a,
.test-cases article > header.breadcrumbs nav ol li a {
  word-break: break-word;
  /* Break words that won't fit the available space */
  position: relative;
  margin-right: 2rem;
  padding: 1rem 0;
  /* Padding set for spacing as well as a min height for usability */
}
body > header.breadcrumbs nav ul li a:hover,
body > header.breadcrumbs nav ol li a:hover,
.test-cases article > header.breadcrumbs nav ul li a:hover,
.test-cases article > header.breadcrumbs nav ol li a:hover {
  text-decoration: underline;
  color: #fff;
}
body > header.breadcrumbs nav ul li a:after,
body > header.breadcrumbs nav ol li a:after,
.test-cases article > header.breadcrumbs nav ul li a:after,
.test-cases article > header.breadcrumbs nav ol li a:after {
  content: "";
  font-family: "RO Icons";
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 1.125rem;
  position: static;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Firefox */
  font-smoothing: antialiased;
  margin-right: 0.25rem;
  color: inherit;
  display: inline;
  text-align: center;
  width: 1rem;
  position: absolute;
  right: -1.5rem;
  margin: 0;
}
body > header.breadcrumbs nav ul li a:before,
body > header.breadcrumbs nav ol li a:before,
.test-cases article > header.breadcrumbs nav ul li a:before,
.test-cases article > header.breadcrumbs nav ol li a:before {
  content: none;
}
body > header.breadcrumbs nav ul li:last-child a,
body > header.breadcrumbs nav ol li:last-child a,
.test-cases article > header.breadcrumbs nav ul li:last-child a,
.test-cases article > header.breadcrumbs nav ol li:last-child a {
  font-weight: bold;
}
body > header.breadcrumbs nav ul li:last-child a:after,
body > header.breadcrumbs nav ol li:last-child a:after,
.test-cases article > header.breadcrumbs nav ul li:last-child a:after,
.test-cases article > header.breadcrumbs nav ol li:last-child a:after {
  content: none;
}
body > header.breadcrumbs nav + button, body > header.breadcrumbs nav + a.button, body > header.breadcrumbs nav + input[type=button], body > header.breadcrumbs nav + input[type=submit], body > header.breadcrumbs nav + input[type=reset],
.test-cases article > header.breadcrumbs nav + button,
.test-cases article > header.breadcrumbs nav + a.button,
.test-cases article > header.breadcrumbs nav + input[type=button],
.test-cases article > header.breadcrumbs nav + input[type=submit],
.test-cases article > header.breadcrumbs nav + input[type=reset] {
  display: none;
}
body > header:not(.breadcrumbs) nav,
.test-cases article > header:not(.breadcrumbs) nav {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-end;
  /* Mobile first */
  /* No-JS responsive version */
  /* JS responsive version */
  /* JS menu collapsed behaviour */
  /* JS menu toggle */
}
body > header:not(.breadcrumbs) nav ul,
body > header:not(.breadcrumbs) nav ol,
.test-cases article > header:not(.breadcrumbs) nav ul,
.test-cases article > header:not(.breadcrumbs) nav ol {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin: 1rem 0;
}
body > header:not(.breadcrumbs) nav ul li,
body > header:not(.breadcrumbs) nav ol li,
.test-cases article > header:not(.breadcrumbs) nav ul li,
.test-cases article > header:not(.breadcrumbs) nav ol li {
  border-bottom: 1px solid #fff;
}
body > header:not(.breadcrumbs) nav ul li:not(:first-child),
body > header:not(.breadcrumbs) nav ol li:not(:first-child),
.test-cases article > header:not(.breadcrumbs) nav ul li:not(:first-child),
.test-cases article > header:not(.breadcrumbs) nav ol li:not(:first-child) {
  display: flex;
}
body > header:not(.breadcrumbs) nav ul li [aria-current],
body > header:not(.breadcrumbs) nav ol li [aria-current],
.test-cases article > header:not(.breadcrumbs) nav ul li [aria-current],
.test-cases article > header:not(.breadcrumbs) nav ol li [aria-current] {
  background-color: #efb2ce;
  color: #000;
}
body > header:not(.breadcrumbs) nav ul li a,
body > header:not(.breadcrumbs) nav ol li a,
.test-cases article > header:not(.breadcrumbs) nav ul li a,
.test-cases article > header:not(.breadcrumbs) nav ol li a {
  width: 100%;
  max-width: 100%;
  padding: 0.25rem 0;
}
body > header:not(.breadcrumbs) nav ul li a:hover,
body > header:not(.breadcrumbs) nav ol li a:hover,
.test-cases article > header:not(.breadcrumbs) nav ul li a:hover,
.test-cases article > header:not(.breadcrumbs) nav ol li a:hover {
  background-color: #efb2ce;
  color: #000;
}
@media (min-width: 42rem) {
  body > header:not(.breadcrumbs) nav ul:first-child,
body > header:not(.breadcrumbs) nav ol:first-child,
.test-cases article > header:not(.breadcrumbs) nav ul:first-child,
.test-cases article > header:not(.breadcrumbs) nav ol:first-child {
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0;
  }
  body > header:not(.breadcrumbs) nav ul:first-child li,
body > header:not(.breadcrumbs) nav ol:first-child li,
.test-cases article > header:not(.breadcrumbs) nav ul:first-child li,
.test-cases article > header:not(.breadcrumbs) nav ol:first-child li {
    align-items: stretch;
    border: 0;
  }
  body > header:not(.breadcrumbs) nav ul:first-child li a,
body > header:not(.breadcrumbs) nav ol:first-child li a,
.test-cases article > header:not(.breadcrumbs) nav ul:first-child li a,
.test-cases article > header:not(.breadcrumbs) nav ol:first-child li a {
    width: auto;
    margin: 0;
    align-items: center;
    padding: 1rem;
    white-space: nowrap;
    display: flex;
    max-width: 100%;
    overflow: hidden;
  }
}
body > header:not(.breadcrumbs) nav:not(.collapsible-menu) button.menu_toggle,
.test-cases article > header:not(.breadcrumbs) nav:not(.collapsible-menu) button.menu_toggle {
  display: none;
}
body > header:not(.breadcrumbs) nav:not(.collapsible-menu) ul,
body > header:not(.breadcrumbs) nav:not(.collapsible-menu) ol,
.test-cases article > header:not(.breadcrumbs) nav:not(.collapsible-menu) ul,
.test-cases article > header:not(.breadcrumbs) nav:not(.collapsible-menu) ol {
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0;
}
body > header:not(.breadcrumbs) nav:not(.collapsible-menu) ul li,
body > header:not(.breadcrumbs) nav:not(.collapsible-menu) ol li,
.test-cases article > header:not(.breadcrumbs) nav:not(.collapsible-menu) ul li,
.test-cases article > header:not(.breadcrumbs) nav:not(.collapsible-menu) ol li {
  align-items: stretch;
  border: 0;
}
body > header:not(.breadcrumbs) nav:not(.collapsible-menu) ul li a,
body > header:not(.breadcrumbs) nav:not(.collapsible-menu) ol li a,
.test-cases article > header:not(.breadcrumbs) nav:not(.collapsible-menu) ul li a,
.test-cases article > header:not(.breadcrumbs) nav:not(.collapsible-menu) ol li a {
  width: auto;
  margin: 0;
  align-items: center;
  padding: 1rem;
  display: flex;
  max-width: 100%;
  overflow: hidden;
}
body > header:not(.breadcrumbs) nav.collapsible-menu button[aria-expanded=false] + ul, body > header:not(.breadcrumbs) nav.collapsible-menu button[aria-expanded=false] + ol,
.test-cases article > header:not(.breadcrumbs) nav.collapsible-menu button[aria-expanded=false] + ul,
.test-cases article > header:not(.breadcrumbs) nav.collapsible-menu button[aria-expanded=false] + ol {
  display: none;
}
body > header:not(.breadcrumbs) nav button.menu_toggle,
.test-cases article > header:not(.breadcrumbs) nav button.menu_toggle {
  float: right;
  /* For 'nav > div > button' variant */
}
body > header:not(.breadcrumbs) nav button.menu_toggle:after,
.test-cases article > header:not(.breadcrumbs) nav button.menu_toggle:after {
  font-family: "RO Icons";
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 1.125rem;
  position: static;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Firefox */
  font-smoothing: antialiased;
  margin-right: 0.25rem;
  color: inherit;
  margin: 0;
  content: "";
}
body > header:not(.breadcrumbs) nav button.menu_toggle[aria-expanded=true]:after,
.test-cases article > header:not(.breadcrumbs) nav button.menu_toggle[aria-expanded=true]:after {
  content: "";
}
body > header > div,
body > header > section > div > div,
body > header > article > div > div,
.test-cases article > header > div,
.test-cases article > header > section > div > div,
.test-cases article > header > article > div > div {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  align-self: stretch;
}
body > header > div > *,
body > header > section > div > div > *,
body > header > article > div > div > *,
.test-cases article > header > div > *,
.test-cases article > header > section > div > div > *,
.test-cases article > header > article > div > div > * {
  margin: 0 0 0.25rem 0;
}
@media (min-width: 24rem) {
  body > header > div > *,
body > header > section > div > div > *,
body > header > article > div > div > *,
.test-cases article > header > div > *,
.test-cases article > header > section > div > div > *,
.test-cases article > header > article > div > div > * {
    margin: 0 0 0 0.25rem;
  }
}

/*---------------------------------------------------------------*/
/*--------------- components/nota-bene.scss ---------------------*/
/*---------------------------------------------------------------*/
/* de-emphasized messages within the flow */
.nota-bene {
  font-size: 0.88889rem;
  color: #404040;
  margin: 0 0 -1rem 0;
  /* Overwriting te default margin on form elements to visually connect the messag to the corrosponding element */
  display: inline-block;
}

form {
  /* Aligning message that are ungrouped. e.g checkbox without a label */
}
form div > .nota-bene {
  width: 100%;
  min-width: 100%;
}

form.horizontal-view div > .nota-bene {
  min-width: unset;
}

/*---------------------------------------------------------------*/
/*--------------- components/notification.scss ------------------*/
/*---------------------------------------------------------------*/
/* Notification layout */
/*---------------------------------------------------------------*/
/*------- components/notification/absolute-icon.scss ------------*/
/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/
/*---------- components/notification/message-icon.scss ----------*/
/*---------------------------------------------------------------*/
table .error:before,
table .warning:before,
table .confirmation:before,
table .explanation:before,
table .primary:before, div.error:before, div.warning:before, div.confirmation:before, div.explanation:before, div.primary:before,
p.error:before,
p.warning:before,
p.confirmation:before,
p.explanation:before,
p.primary:before,
span.error:before,
span.warning:before,
span.confirmation:before,
span.explanation:before,
span.primary:before, body > p.error > div:before, body > p.warning > div:before, body > p.confirmation > div:before, body > p.explanation > div:before, body > p.primary > div:before,
body > span.error > div:before,
body > span.warning > div:before,
body > span.confirmation > div:before,
body > span.explanation > div:before,
body > span.primary > div:before,
body > section.error > div:before,
body > section.warning > div:before,
body > section.confirmation > div:before,
body > section.explanation > div:before,
body > section.primary > div:before,
main > p.error > div:before,
main > p.warning > div:before,
main > p.confirmation > div:before,
main > p.explanation > div:before,
main > p.primary > div:before,
main > span.error > div:before,
main > span.warning > div:before,
main > span.confirmation > div:before,
main > span.explanation > div:before,
main > span.primary > div:before,
main > section.error > div:before,
main > section.warning > div:before,
main > section.confirmation > div:before,
main > section.explanation > div:before,
main > section.primary > div:before, button.error:before, button.warning:before, button.confirmation:before, button.explanation:before, button.primary:before,
a.button.error:before,
a.button.warning:before,
a.button.confirmation:before,
a.button.explanation:before,
a.button.primary:before,
input[type=button].error:before,
input[type=button].warning:before,
input[type=button].confirmation:before,
input[type=button].explanation:before,
input[type=button].primary:before,
input[type=submit].error:before,
input[type=submit].warning:before,
input[type=submit].confirmation:before,
input[type=submit].explanation:before,
input[type=submit].primary:before,
input[type=reset].error:before,
input[type=reset].warning:before,
input[type=reset].confirmation:before,
input[type=reset].explanation:before,
input[type=reset].primary:before {
  content: "";
  background-image: url(../img/notification_icons.svg);
  background-size: 100%;
  width: 1.5rem;
  min-width: 1.5rem;
  height: 1.5rem;
  min-height: 1.5rem;
  margin-right: 1rem;
}
@media (min-width: 50rem) {
  table .error:before,
table .warning:before,
table .confirmation:before,
table .explanation:before,
table .primary:before, div.error:before, div.warning:before, div.confirmation:before, div.explanation:before, div.primary:before,
p.error:before,
p.warning:before,
p.confirmation:before,
p.explanation:before,
p.primary:before,
span.error:before,
span.warning:before,
span.confirmation:before,
span.explanation:before,
span.primary:before, body > p.error > div:before, body > p.warning > div:before, body > p.confirmation > div:before, body > p.explanation > div:before, body > p.primary > div:before,
body > span.error > div:before,
body > span.warning > div:before,
body > span.confirmation > div:before,
body > span.explanation > div:before,
body > span.primary > div:before,
body > section.error > div:before,
body > section.warning > div:before,
body > section.confirmation > div:before,
body > section.explanation > div:before,
body > section.primary > div:before,
main > p.error > div:before,
main > p.warning > div:before,
main > p.confirmation > div:before,
main > p.explanation > div:before,
main > p.primary > div:before,
main > span.error > div:before,
main > span.warning > div:before,
main > span.confirmation > div:before,
main > span.explanation > div:before,
main > span.primary > div:before,
main > section.error > div:before,
main > section.warning > div:before,
main > section.confirmation > div:before,
main > section.explanation > div:before,
main > section.primary > div:before, button.error:before, button.warning:before, button.confirmation:before, button.explanation:before, button.primary:before,
a.button.error:before,
a.button.warning:before,
a.button.confirmation:before,
a.button.explanation:before,
a.button.primary:before,
input[type=button].error:before,
input[type=button].warning:before,
input[type=button].confirmation:before,
input[type=button].explanation:before,
input[type=button].primary:before,
input[type=submit].error:before,
input[type=submit].warning:before,
input[type=submit].confirmation:before,
input[type=submit].explanation:before,
input[type=submit].primary:before,
input[type=reset].error:before,
input[type=reset].warning:before,
input[type=reset].confirmation:before,
input[type=reset].explanation:before,
input[type=reset].primary:before {
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
    min-height: 2rem;
    margin-right: 1rem;
  }
}

/*---------------------------------------------------------------*/
/*------- components/notification/block-message.scss ------------*/
/*---------------------------------------------------------------*/
div.error, div.warning, div.confirmation, div.explanation, div.primary, div.system-notification, body > p.error > div, body > p.warning > div, body > p.confirmation > div, body > p.explanation > div, body > p.primary > div,
body > span.error > div,
body > span.warning > div,
body > span.confirmation > div,
body > span.explanation > div,
body > span.primary > div,
body > section.error > div,
body > section.warning > div,
body > section.confirmation > div,
body > section.explanation > div,
body > section.primary > div,
main > p.error > div,
main > p.warning > div,
main > p.confirmation > div,
main > p.explanation > div,
main > p.primary > div,
main > span.error > div,
main > span.warning > div,
main > span.confirmation > div,
main > span.explanation > div,
main > span.primary > div,
main > section.error > div,
main > section.warning > div,
main > section.confirmation > div,
main > section.explanation > div,
main > section.primary > div {
  margin: 1.5rem 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  padding: 4.5rem 3% 1.5rem 3%;
}
div.error:before, div.warning:before, div.confirmation:before, div.explanation:before, div.primary:before, div.system-notification:before, body > p.error > div:before, body > p.warning > div:before, body > p.confirmation > div:before, body > p.explanation > div:before, body > p.primary > div:before,
body > span.error > div:before,
body > span.warning > div:before,
body > span.confirmation > div:before,
body > span.explanation > div:before,
body > span.primary > div:before,
body > section.error > div:before,
body > section.warning > div:before,
body > section.confirmation > div:before,
body > section.explanation > div:before,
body > section.primary > div:before,
main > p.error > div:before,
main > p.warning > div:before,
main > p.confirmation > div:before,
main > p.explanation > div:before,
main > p.primary > div:before,
main > span.error > div:before,
main > span.warning > div:before,
main > span.confirmation > div:before,
main > span.explanation > div:before,
main > span.primary > div:before,
main > section.error > div:before,
main > section.warning > div:before,
main > section.confirmation > div:before,
main > section.explanation > div:before,
main > section.primary > div:before {
  position: absolute;
  margin-right: 0;
}
@media (min-width: 24rem) {
  div.error, div.warning, div.confirmation, div.explanation, div.primary, div.system-notification, body > p.error > div, body > p.warning > div, body > p.confirmation > div, body > p.explanation > div, body > p.primary > div,
body > span.error > div,
body > span.warning > div,
body > span.confirmation > div,
body > span.explanation > div,
body > span.primary > div,
body > section.error > div,
body > section.warning > div,
body > section.confirmation > div,
body > section.explanation > div,
body > section.primary > div,
main > p.error > div,
main > p.warning > div,
main > p.confirmation > div,
main > p.explanation > div,
main > p.primary > div,
main > span.error > div,
main > span.warning > div,
main > span.confirmation > div,
main > span.explanation > div,
main > span.primary > div,
main > section.error > div,
main > section.warning > div,
main > section.confirmation > div,
main > section.explanation > div,
main > section.primary > div {
    padding: 1.5rem 3% 1.5rem calc(3% + 3rem);
  }
}
div.error > *, div.warning > *, div.confirmation > *, div.explanation > *, div.primary > *, div.system-notification > *, body > p.error > div > *, body > p.warning > div > *, body > p.confirmation > div > *, body > p.explanation > div > *, body > p.primary > div > *,
body > span.error > div > *,
body > span.warning > div > *,
body > span.confirmation > div > *,
body > span.explanation > div > *,
body > span.primary > div > *,
body > section.error > div > *,
body > section.warning > div > *,
body > section.confirmation > div > *,
body > section.explanation > div > *,
body > section.primary > div > *,
main > p.error > div > *,
main > p.warning > div > *,
main > p.confirmation > div > *,
main > p.explanation > div > *,
main > p.primary > div > *,
main > span.error > div > *,
main > span.warning > div > *,
main > span.confirmation > div > *,
main > span.explanation > div > *,
main > span.primary > div > *,
main > section.error > div > *,
main > section.warning > div > *,
main > section.confirmation > div > *,
main > section.explanation > div > *,
main > section.primary > div > * {
  margin: 0;
}
div.error h1, div.warning h1, div.confirmation h1, div.explanation h1, div.primary h1, div.system-notification h1, body > p.error > div h1, body > p.warning > div h1, body > p.confirmation > div h1, body > p.explanation > div h1, body > p.primary > div h1,
body > span.error > div h1,
body > span.warning > div h1,
body > span.confirmation > div h1,
body > span.explanation > div h1,
body > span.primary > div h1,
body > section.error > div h1,
body > section.warning > div h1,
body > section.confirmation > div h1,
body > section.explanation > div h1,
body > section.primary > div h1,
main > p.error > div h1,
main > p.warning > div h1,
main > p.confirmation > div h1,
main > p.explanation > div h1,
main > p.primary > div h1,
main > span.error > div h1,
main > span.warning > div h1,
main > span.confirmation > div h1,
main > span.explanation > div h1,
main > span.primary > div h1,
main > section.error > div h1,
main > section.warning > div h1,
main > section.confirmation > div h1,
main > section.explanation > div h1,
main > section.primary > div h1 {
  font-size: 1.60181rem;
}
@media (min-width: 24rem) {
  div.error, div.warning, div.confirmation, div.explanation, div.primary, div.system-notification, body > p.error > div, body > p.warning > div, body > p.confirmation > div, body > p.explanation > div, body > p.primary > div,
body > span.error > div,
body > span.warning > div,
body > span.confirmation > div,
body > span.explanation > div,
body > span.primary > div,
body > section.error > div,
body > section.warning > div,
body > section.confirmation > div,
body > section.explanation > div,
body > section.primary > div,
main > p.error > div,
main > p.warning > div,
main > p.confirmation > div,
main > p.explanation > div,
main > p.primary > div,
main > span.error > div,
main > span.warning > div,
main > span.confirmation > div,
main > span.explanation > div,
main > span.primary > div,
main > section.error > div,
main > section.warning > div,
main > section.confirmation > div,
main > section.explanation > div,
main > section.primary > div {
    margin: 2.5rem 0;
    align-items: flex-start;
  }
}

/* Message types */
/*---------------------------------------------------------------*/
/*------------- components/notification/error.scss --------------*/
/*---------------------------------------------------------------*/
/* Error notification color */
.error {
  background-color: #f9dfdd;
  border-color: #d52a1e;
}
.error:before {
  background-position: 0 3rem;
}
@media (min-width: 50rem) {
  .error:before {
    background-position: 0 4rem;
  }
}

/*---------------------------------------------------------------*/
/*----------- components/notification/warning.scss --------------*/
/*---------------------------------------------------------------*/
.warning {
  background-color: #fff4dc;
  border-color: #ffb71a;
}
.warning:before {
  background-image: url(../img/notification_icons_dark.svg);
  background-position: 0 0;
}
@media (min-width: 50rem) {
  .warning:before {
    background-position: 0 0;
  }
}
.warning img {
  object-position: 0 0;
}

/*---------------------------------------------------------------*/
/*--------- components/notification/confirmation.scss -----------*/
/*---------------------------------------------------------------*/
.confirmation {
  background-color: #e1eddb;
  border-color: #358734;
}
.confirmation:before {
  background-position: 0 1.5rem;
}
@media (min-width: 50rem) {
  .confirmation:before {
    background-position: 0 2rem;
  }
}

/*---------------------------------------------------------------*/
/*---------- components/notification/explanation.scss -----------*/
/*---------------------------------------------------------------*/
.explanation {
  background-color: #d9ebf7;
  border-color: #007bc7;
}
.explanation:before {
  background-position: 0 4.5rem;
}
@media (min-width: 50rem) {
  .explanation:before {
    background-position: 0 6rem;
  }
}

/*---------------------------------------------------------------*/
/*----------- components/notification/primary.scss --------------*/
/*---------------------------------------------------------------*/
.primary {
  background-color: #ca005d;
  color: #fff;
}
.primary a,
.primary a:visited {
  color: #000;
}
.primary a:visited,
.primary a:visited:visited {
  color: #6a366a;
}

input.primary,
select.primary,
textarea.primary,
input[type=checkbox]:not(:checked).primary,
input[type=radio]:not(:checked).primary {
  background-color: #fff;
  color: #000;
  border: 1px solid #ca005d;
}
input.primary a,
select.primary a,
textarea.primary a,
input[type=checkbox]:not(:checked).primary a,
input[type=radio]:not(:checked).primary a {
  color: #000;
}
input.primary a:visited,
select.primary a:visited,
textarea.primary a:visited,
input[type=checkbox]:not(:checked).primary a:visited,
input[type=radio]:not(:checked).primary a:visited {
  color: #6a366a;
}

/* Specific element behaviour */
/*---------------------------------------------------------------*/
/*----- components/notification/button-notification.scss --------*/
/*---------------------------------------------------------------*/
/* Buttons */
button.error:before, button.warning:before, button.confirmation:before, button.explanation:before, button.primary:before,
a.button.error:before,
a.button.warning:before,
a.button.confirmation:before,
a.button.explanation:before,
a.button.primary:before,
input[type=button].error:before,
input[type=button].warning:before,
input[type=button].confirmation:before,
input[type=button].explanation:before,
input[type=button].primary:before,
input[type=submit].error:before,
input[type=submit].warning:before,
input[type=submit].confirmation:before,
input[type=submit].explanation:before,
input[type=submit].primary:before,
input[type=reset].error:before,
input[type=reset].warning:before,
input[type=reset].confirmation:before,
input[type=reset].explanation:before,
input[type=reset].primary:before {
  width: 1.5rem;
  min-width: 1.5rem;
  height: 1.5rem;
  min-height: 1.5rem;
}
button.error > span, button.warning > span, button.confirmation > span, button.explanation > span, button.primary > span,
a.button.error > span,
a.button.warning > span,
a.button.confirmation > span,
a.button.explanation > span,
a.button.primary > span,
input[type=button].error > span,
input[type=button].warning > span,
input[type=button].confirmation > span,
input[type=button].explanation > span,
input[type=button].primary > span,
input[type=submit].error > span,
input[type=submit].warning > span,
input[type=submit].confirmation > span,
input[type=submit].explanation > span,
input[type=submit].primary > span,
input[type=reset].error > span,
input[type=reset].warning > span,
input[type=reset].confirmation > span,
input[type=reset].explanation > span,
input[type=reset].primary > span {
  margin: 0 0.5rem 0 0;
}
button.error,
a.button.error,
input[type=button].error,
input[type=submit].error,
input[type=reset].error {
  background-color: #d52a1e;
  border-color: #d52a1e;
  color: #fff;
}
button.error:before,
a.button.error:before,
input[type=button].error:before,
input[type=submit].error:before,
input[type=reset].error:before {
  background-image: url(../img/notification_icons_light.svg);
  background-position: 0 3rem;
}
button.error:hover,
a.button.error:hover,
input[type=button].error:hover,
input[type=submit].error:hover,
input[type=reset].error:hover {
  background-color: #951d15;
  border-color: #951d15;
}
button.warning,
a.button.warning,
input[type=button].warning,
input[type=submit].warning,
input[type=reset].warning {
  background-color: #ffb71a;
  border-color: #ffb71a;
  color: #000;
}
button.warning:before,
a.button.warning:before,
input[type=button].warning:before,
input[type=submit].warning:before,
input[type=reset].warning:before {
  background-image: url(../img/notification_icons_dark.svg);
}
button.warning:hover,
a.button.warning:hover,
input[type=button].warning:hover,
input[type=submit].warning:hover,
input[type=reset].warning:hover {
  background-color: #b38012;
  border-color: #b38012;
  color: #fff;
}
button.confirmation,
a.button.confirmation,
input[type=button].confirmation,
input[type=submit].confirmation,
input[type=reset].confirmation {
  background-color: #358734;
  border-color: #358734;
  color: #fff;
}
button.confirmation:before,
a.button.confirmation:before,
input[type=button].confirmation:before,
input[type=submit].confirmation:before,
input[type=reset].confirmation:before {
  background-image: url(../img/notification_icons_light.svg);
  background-position: 0 4.5rem;
}
button.confirmation:hover,
a.button.confirmation:hover,
input[type=button].confirmation:hover,
input[type=submit].confirmation:hover,
input[type=reset].confirmation:hover {
  background-color: #255f24;
  border-color: #255f24;
}
button.explanation,
a.button.explanation,
input[type=button].explanation,
input[type=submit].explanation,
input[type=reset].explanation {
  background-color: #007bc7;
  border-color: #007bc7;
  color: #fff;
}
button.explanation:before,
a.button.explanation:before,
input[type=button].explanation:before,
input[type=submit].explanation:before,
input[type=reset].explanation:before {
  background-image: url(../img/notification_icons_light.svg);
  background-position: 0 1.5rem;
}
button.explanation:hover,
a.button.explanation:hover,
input[type=button].explanation:hover,
input[type=submit].explanation:hover,
input[type=reset].explanation:hover {
  background-color: #00568b;
  border-color: #00568b;
  border-color: #00568b;
}
button.primary,
a.button.primary,
input[type=button].primary,
input[type=submit].primary,
input[type=reset].primary {
  background-color: #ca005d;
  color: #fff;
}

/*---------------------------------------------------------------*/
/*------- components/notification/form-elements.scss ------------*/
/*---------------------------------------------------------------*/
input.error, input.warning, input.confirmation, input.explanation, input.primary,
select.error,
select.warning,
select.confirmation,
select.explanation,
select.primary,
textarea.error,
textarea.warning,
textarea.confirmation,
textarea.explanation,
textarea.primary,
input[type=checkbox]:not(:checked).error,
input[type=checkbox]:not(:checked).warning,
input[type=checkbox]:not(:checked).confirmation,
input[type=checkbox]:not(:checked).explanation,
input[type=checkbox]:not(:checked).primary,
input[type=radio]:not(:checked).error,
input[type=radio]:not(:checked).warning,
input[type=radio]:not(:checked).confirmation,
input[type=radio]:not(:checked).explanation,
input[type=radio]:not(:checked).primary {
  border-width: 1px;
  border-style: solid;
  background-color: #fff;
}
/*---------------------------------------------------------------*/
/*------------- components/notification/table.scss --------------*/
/*---------------------------------------------------------------*/
table th.error.error, table th.warning.error, table th.confirmation.error, table th.explanation.error, table th.primary.error {
  background-color: #d52a1e;
  border-color: #d52a1e;
  color: #fff;
}
table th.error.warning, table th.warning.warning, table th.confirmation.warning, table th.explanation.warning, table th.primary.warning {
  background-color: #ffb71a;
  border-color: #ffb71a;
  color: #000;
}
table th.error.confirmation, table th.warning.confirmation, table th.confirmation.confirmation, table th.explanation.confirmation, table th.primary.confirmation {
  background-color: #358734;
  border-color: #358734;
  color: #fff;
}
table th.error.explanation, table th.warning.explanation, table th.confirmation.explanation, table th.explanation.explanation, table th.primary.explanation {
  background-color: #007bc7;
  border-color: #007bc7;
  color: #fff;
}
table th.error.primary, table th.warning.primary, table th.confirmation.primary, table th.explanation.primary, table th.primary.primary {
  background-color: #ca005d;
  color: #fff;
}
table td.error, table td.warning, table td.confirmation, table td.explanation {
  border-color: #e6e6e6;
}
table td.primary {
  background-color: #f7d9e7;
  color: #000;
}
table tr.error:before, table tr.warning:before, table tr.confirmation:before, table tr.explanation:before, table tr.primary:before {
  content: none;
}
table tr.error th:first-of-type:before,
table tr.error td:first-of-type:before, table tr.warning th:first-of-type:before,
table tr.warning td:first-of-type:before, table tr.confirmation th:first-of-type:before,
table tr.confirmation td:first-of-type:before, table tr.explanation th:first-of-type:before,
table tr.explanation td:first-of-type:before, table tr.primary th:first-of-type:before,
table tr.primary td:first-of-type:before {
  content: "";
  background-image: url(../img/notification_icons.svg);
  background-size: 100%;
  display: block;
  float: left;
  width: 1.5rem;
  min-width: 1.5rem;
  height: 1.5rem;
  min-height: 1.5rem;
  margin-right: 1rem;
}
table tr.error th:first-of-type:before, table tr.warning th:first-of-type:before, table tr.confirmation th:first-of-type:before, table tr.explanation th:first-of-type:before, table tr.primary th:first-of-type:before {
  background-image: url(../img/notification_icons_light.svg);
}
table tr.error th:before,
table tr.error td:first-of-type:before {
  background-position: 0 3rem;
}
table tr.warning th:before,
table tr.warning td:first-of-type:before {
  background-position: 0 0;
}
table tr.confirmation th:before,
table tr.confirmation td:first-of-type:before {
  background-position: 0 1.5rem;
}
table tr.explanation th:before,
table tr.explanation td:first-of-type:before {
  background-position: 0 4.5rem;
}
table tr.primary th:before,
table tr.primary td:first-of-type:before {
  background-position: 0 0;
}
table tr:nth-child(even) td.error {
  background-color: #f4c2be;
}
table tr:nth-child(even) td.warning {
  background-color: #ffe7b3;
}
table tr:nth-child(even) td.confirmation {
  background-color: #d5e5cc;
}
table tr:nth-child(even) td.explanation {
  background-color: #c0def2;
}
table tr:nth-child(even) td.primary {
  background-color: #f7d9e7;
  color: #000;
}

/*---------------------------------------------------------------*/
/*----- components/notification/top-level-messages.scss ---------*/
/*---------------------------------------------------------------*/
body > p.error, body > p.warning, body > p.confirmation, body > p.explanation, body > p.primary,
body > span.error,
body > span.warning,
body > span.confirmation,
body > span.explanation,
body > span.primary,
body > section.error,
body > section.warning,
body > section.confirmation,
body > section.explanation,
body > section.primary,
main > p.error,
main > p.warning,
main > p.confirmation,
main > p.explanation,
main > p.primary,
main > span.error,
main > span.warning,
main > span.confirmation,
main > span.explanation,
main > span.primary,
main > section.error,
main > section.warning,
main > section.confirmation,
main > section.explanation,
main > section.primary {
  width: 100%;
  max-width: 100%;
  margin: 0;
  box-sizing: border-box;
  /* Message block on high level */
}
body > p.error > div, body > p.warning > div, body > p.confirmation > div, body > p.explanation > div, body > p.primary > div,
body > span.error > div,
body > span.warning > div,
body > span.confirmation > div,
body > span.explanation > div,
body > span.primary > div,
body > section.error > div,
body > section.warning > div,
body > section.confirmation > div,
body > section.explanation > div,
body > section.primary > div,
main > p.error > div,
main > p.warning > div,
main > p.confirmation > div,
main > p.explanation > div,
main > p.primary > div,
main > span.error > div,
main > span.warning > div,
main > span.confirmation > div,
main > span.explanation > div,
main > span.primary > div,
main > section.error > div,
main > section.warning > div,
main > section.confirmation > div,
main > section.explanation > div,
main > section.primary > div {
  flex-grow: 1;
  position: relative;
  padding: 1.5rem 3% 1.5rem calc(3% + 3rem);
  margin: 0 auto;
}
@media (min-width: 84rem) {
  body > p.error > div, body > p.warning > div, body > p.confirmation > div, body > p.explanation > div, body > p.primary > div,
body > span.error > div,
body > span.warning > div,
body > span.confirmation > div,
body > span.explanation > div,
body > span.primary > div,
body > section.error > div,
body > section.warning > div,
body > section.confirmation > div,
body > section.explanation > div,
body > section.primary > div,
main > p.error > div,
main > p.warning > div,
main > p.confirmation > div,
main > p.explanation > div,
main > p.primary > div,
main > span.error > div,
main > span.warning > div,
main > span.confirmation > div,
main > span.explanation > div,
main > span.primary > div,
main > section.error > div,
main > section.warning > div,
main > section.confirmation > div,
main > section.explanation > div,
main > section.primary > div {
    padding: 1.5rem 1rem 1.5rem 4rem;
  }
}
body > p.error > div:before, body > p.warning > div:before, body > p.confirmation > div:before, body > p.explanation > div:before, body > p.primary > div:before,
body > span.error > div:before,
body > span.warning > div:before,
body > span.confirmation > div:before,
body > span.explanation > div:before,
body > span.primary > div:before,
body > section.error > div:before,
body > section.warning > div:before,
body > section.confirmation > div:before,
body > section.explanation > div:before,
body > section.primary > div:before,
main > p.error > div:before,
main > p.warning > div:before,
main > p.confirmation > div:before,
main > p.explanation > div:before,
main > p.primary > div:before,
main > span.error > div:before,
main > span.warning > div:before,
main > span.confirmation > div:before,
main > span.explanation > div:before,
main > span.primary > div:before,
main > section.error > div:before,
main > section.warning > div:before,
main > section.confirmation > div:before,
main > section.explanation > div:before,
main > section.primary > div:before {
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  min-height: 2rem;
  left: 3%;
}
@media (min-width: 84rem) {
  body > p.error > div:before, body > p.warning > div:before, body > p.confirmation > div:before, body > p.explanation > div:before, body > p.primary > div:before,
body > span.error > div:before,
body > span.warning > div:before,
body > span.confirmation > div:before,
body > span.explanation > div:before,
body > span.primary > div:before,
body > section.error > div:before,
body > section.warning > div:before,
body > section.confirmation > div:before,
body > section.explanation > div:before,
body > section.primary > div:before,
main > p.error > div:before,
main > p.warning > div:before,
main > p.confirmation > div:before,
main > p.explanation > div:before,
main > p.primary > div:before,
main > span.error > div:before,
main > span.warning > div:before,
main > span.confirmation > div:before,
main > span.explanation > div:before,
main > span.primary > div:before,
main > section.error > div:before,
main > section.warning > div:before,
main > section.confirmation > div:before,
main > section.explanation > div:before,
main > section.primary > div:before {
    left: 1rem;
  }
}
body > p.error > div p > span:first-of-type, body > p.warning > div p > span:first-of-type, body > p.confirmation > div p > span:first-of-type, body > p.explanation > div p > span:first-of-type, body > p.primary > div p > span:first-of-type,
body > span.error > div p > span:first-of-type,
body > span.warning > div p > span:first-of-type,
body > span.confirmation > div p > span:first-of-type,
body > span.explanation > div p > span:first-of-type,
body > span.primary > div p > span:first-of-type,
body > section.error > div p > span:first-of-type,
body > section.warning > div p > span:first-of-type,
body > section.confirmation > div p > span:first-of-type,
body > section.explanation > div p > span:first-of-type,
body > section.primary > div p > span:first-of-type,
main > p.error > div p > span:first-of-type,
main > p.warning > div p > span:first-of-type,
main > p.confirmation > div p > span:first-of-type,
main > p.explanation > div p > span:first-of-type,
main > p.primary > div p > span:first-of-type,
main > span.error > div p > span:first-of-type,
main > span.warning > div p > span:first-of-type,
main > span.confirmation > div p > span:first-of-type,
main > span.explanation > div p > span:first-of-type,
main > span.primary > div p > span:first-of-type,
main > section.error > div p > span:first-of-type,
main > section.warning > div p > span:first-of-type,
main > section.confirmation > div p > span:first-of-type,
main > section.explanation > div p > span:first-of-type,
main > section.primary > div p > span:first-of-type {
  font-weight: bold;
}
body > p.error > span,
body > p.error > a, body > p.warning > span,
body > p.warning > a, body > p.confirmation > span,
body > p.confirmation > a, body > p.explanation > span,
body > p.explanation > a, body > p.primary > span,
body > p.primary > a,
body > span.error > span,
body > span.error > a,
body > span.warning > span,
body > span.warning > a,
body > span.confirmation > span,
body > span.confirmation > a,
body > span.explanation > span,
body > span.explanation > a,
body > span.primary > span,
body > span.primary > a,
body > section.error > span,
body > section.error > a,
body > section.warning > span,
body > section.warning > a,
body > section.confirmation > span,
body > section.confirmation > a,
body > section.explanation > span,
body > section.explanation > a,
body > section.primary > span,
body > section.primary > a,
main > p.error > span,
main > p.error > a,
main > p.warning > span,
main > p.warning > a,
main > p.confirmation > span,
main > p.confirmation > a,
main > p.explanation > span,
main > p.explanation > a,
main > p.primary > span,
main > p.primary > a,
main > span.error > span,
main > span.error > a,
main > span.warning > span,
main > span.warning > a,
main > span.confirmation > span,
main > span.confirmation > a,
main > span.explanation > span,
main > span.explanation > a,
main > span.primary > span,
main > span.primary > a,
main > section.error > span,
main > section.error > a,
main > section.warning > span,
main > section.warning > a,
main > section.confirmation > span,
main > section.confirmation > a,
main > section.explanation > span,
main > section.explanation > a,
main > section.primary > span,
main > section.primary > a {
  margin: 0;
}
body > section.error > span:first-of-type, body > section.warning > span:first-of-type, body > section.confirmation > span:first-of-type, body > section.explanation > span:first-of-type, body > section.primary > span:first-of-type,
body > p.error > span:first-of-type,
body > p.warning > span:first-of-type,
body > p.confirmation > span:first-of-type,
body > p.explanation > span:first-of-type,
body > p.primary > span:first-of-type,
body > span.error > span:first-of-type,
body > span.warning > span:first-of-type,
body > span.confirmation > span:first-of-type,
body > span.explanation > span:first-of-type,
body > span.primary > span:first-of-type,
main > section.error > span:first-of-type,
main > section.warning > span:first-of-type,
main > section.confirmation > span:first-of-type,
main > section.explanation > span:first-of-type,
main > section.primary > span:first-of-type,
main > p.error > span:first-of-type,
main > p.warning > span:first-of-type,
main > p.confirmation > span:first-of-type,
main > p.explanation > span:first-of-type,
main > p.primary > span:first-of-type,
main > span.error > span:first-of-type,
main > span.warning > span:first-of-type,
main > span.confirmation > span:first-of-type,
main > span.explanation > span:first-of-type,
main > span.primary > span:first-of-type {
  font-weight: bold;
  margin-right: 0.25rem;
}
body > section.error:before, body > section.warning:before, body > section.confirmation:before, body > section.explanation:before, body > section.primary:before,
body > p.error:before,
body > p.warning:before,
body > p.confirmation:before,
body > p.explanation:before,
body > p.primary:before,
body > span.error:before,
body > span.warning:before,
body > span.confirmation:before,
body > span.explanation:before,
body > span.primary:before,
main > section.error:before,
main > section.warning:before,
main > section.confirmation:before,
main > section.explanation:before,
main > section.primary:before,
main > p.error:before,
main > p.warning:before,
main > p.confirmation:before,
main > p.explanation:before,
main > p.primary:before,
main > span.error:before,
main > span.warning:before,
main > span.confirmation:before,
main > span.explanation:before,
main > span.primary:before {
  position: static;
  display: inline-block;
  margin-right: 2rem;
  margin-left: 3rem;
}
body > section,
main > section {
  /* Error */
  /* Warning */
  /* Confirmation */
  /* Explanation */
}
body > section.error > div:before,
main > section.error > div:before {
  background-position: 0 4rem;
}
body > section.warning > div:before,
main > section.warning > div:before {
  background-position: 0 0;
}
body > section.confirmation > div:before,
main > section.confirmation > div:before {
  background-position: 0 2rem;
}
body > section.explanation > div:before,
main > section.explanation > div:before {
  background-position: 0 6rem;
}
body > section.primary > div,
main > section.primary > div {
  background-color: #fff;
  color: #000;
  border: 1px solid #ca005d;
}
body > p.error, body > p.warning, body > p.confirmation, body > p.explanation, body > p.primary,
body > span.error,
body > span.warning,
body > span.confirmation,
body > span.explanation,
body > span.primary,
main > p.error,
main > p.warning,
main > p.confirmation,
main > p.explanation,
main > p.primary,
main > span.error,
main > span.warning,
main > span.confirmation,
main > span.explanation,
main > span.primary {
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: flex-start;
  padding: 1.5rem 3%;
}
@media (min-width: 84rem) {
  body > p.error, body > p.warning, body > p.confirmation, body > p.explanation, body > p.primary,
body > span.error,
body > span.warning,
body > span.confirmation,
body > span.explanation,
body > span.primary,
main > p.error,
main > p.warning,
main > p.confirmation,
main > p.explanation,
main > p.primary,
main > span.error,
main > span.warning,
main > span.confirmation,
main > span.explanation,
main > span.primary {
    padding-left: calc( 					(100% - 80rem) / 2 				);
    /* Mimicking the alignment of having a container inside to center the content with a max width of 82rem  */
  }
}
body > p.error:before, body > p.warning:before, body > p.confirmation:before, body > p.explanation:before, body > p.primary:before,
body > span.error:before,
body > span.warning:before,
body > span.confirmation:before,
body > span.explanation:before,
body > span.primary:before,
main > p.error:before,
main > p.warning:before,
main > p.confirmation:before,
main > p.explanation:before,
main > p.primary:before,
main > span.error:before,
main > span.warning:before,
main > span.confirmation:before,
main > span.explanation:before,
main > span.primary:before {
  margin-right: 1rem;
  margin-left: 0;
}

/* message block styling */
/* Styling for all notifications and messages. E.g: Errors, warnings, confirmations and additional information */
.error,
.warning,
.confirmation,
.explanation,
.system-notification,
.primary {
  color: #000;
  box-sizing: border-box;
  max-width: 100%;
}
.error.hidden,
.warning.hidden,
.confirmation.hidden,
.explanation.hidden,
.system-notification.hidden,
.primary.hidden {
  display: none;
}
.error a,
.warning a,
.confirmation a,
.explanation a,
.system-notification a,
.primary a {
  color: #01496d;
}
.error a:hover,
.warning a:hover,
.confirmation a:hover,
.explanation a:hover,
.system-notification a:hover,
.primary a:hover {
  color: #002131;
}
.error a:visited,
.warning a:visited,
.confirmation a:visited,
.explanation a:visited,
.system-notification a:visited,
.primary a:visited {
  color: #6f3272;
}
.error a:visited:hover,
.warning a:visited:hover,
.confirmation a:visited:hover,
.explanation a:visited:hover,
.system-notification a:visited:hover,
.primary a:visited:hover {
  color: #502552;
}
.error a:visited:before,
.warning a:visited:before,
.confirmation a:visited:before,
.explanation a:visited:before,
.system-notification a:visited:before,
.primary a:visited:before {
  color: inherit;
}

/* Message notification color */
.error {
  background-color: #f9dfdd;
}

.warning {
  background-color: #fff4dc;
}

.confirmation {
  background-color: #e1eddb;
}

.explanation {
  background-color: #d9ebf7;
}

.primary {
  background-color: #ca005d;
  color: #fff;
}

.system-notification {
  background-color: #e6e6e6;
}

/* Elements with an icon */
div.error:before, div.warning:before, div.confirmation:before, div.explanation:before, div.primary:before,
p.error:before,
p.warning:before,
p.confirmation:before,
p.explanation:before,
p.primary:before,
span.error:before,
span.warning:before,
span.confirmation:before,
span.explanation:before,
span.primary:before {
  top: 1.5rem;
}
@media (min-width: 24rem) {
  div.error:before, div.warning:before, div.confirmation:before, div.explanation:before, div.primary:before,
p.error:before,
p.warning:before,
p.confirmation:before,
p.explanation:before,
p.primary:before,
span.error:before,
span.warning:before,
span.confirmation:before,
span.explanation:before,
span.primary:before {
    left: 3%;
  }
}
div.primary,
p.primary,
span.primary {
  background-color: #fff;
  color: #000;
  border: 1px solid #ca005d;
}
div.system-notification,
p.system-notification,
span.system-notification {
  padding: 1.5rem 3%;
}
div.system-notification:before,
p.system-notification:before,
span.system-notification:before {
  display: none;
  content: none;
}

/* Element specific styling */
p.error, p.warning, p.confirmation, p.explanation, p.primary {
  position: relative;
  padding: 1.5rem 3% 1.5rem calc(3% + 3rem);
}
p.error:before, p.warning:before, p.confirmation:before, p.explanation:before, p.primary:before {
  top: calc(50% - 1rem);
  position: absolute;
  display: block;
  float: left;
  left: 1rem;
}
p.error > span:first-of-type, p.warning > span:first-of-type, p.confirmation > span:first-of-type, p.explanation > span:first-of-type, p.primary > span:first-of-type {
  font-weight: bold;
}

table .error:before,
table .warning:before,
table .confirmation:before,
table .explanation:before,
table .primary:before {
  display: block;
  float: left;
  width: 1.5rem;
  min-width: 1.5rem;
  height: 1.5rem;
  min-height: 1.5rem;
}
table .error:before {
  background-position: 0 3rem;
}
table .confirmation:before {
  background-position: 0 1.5rem;
}
table .explanation:before {
  background-position: 0 4.5rem;
}
table thead tr.error:nth-child(even),
table tbody tr.error:nth-child(even),
table tfoot tr.error:nth-child(even) {
  background-color: #f4c2be;
}
table thead tr.error th,
table tbody tr.error th,
table tfoot tr.error th {
  background-color: #d52a1e;
  border-color: #d52a1e;
  color: #fff;
}
table thead tr.warning:nth-child(even),
table tbody tr.warning:nth-child(even),
table tfoot tr.warning:nth-child(even) {
  background-color: #ffe7b3;
}
table thead tr.warning th,
table tbody tr.warning th,
table tfoot tr.warning th {
  background-color: #ffb71a;
  border-color: #ffb71a;
  color: #000;
}
table thead tr.confirmation:nth-child(even),
table tbody tr.confirmation:nth-child(even),
table tfoot tr.confirmation:nth-child(even) {
  background-color: #d5e5cc;
}
table thead tr.confirmation th,
table tbody tr.confirmation th,
table tfoot tr.confirmation th {
  background-color: #358734;
  border-color: #358734;
  color: #fff;
}
table thead tr.explanation:nth-child(even),
table tbody tr.explanation:nth-child(even),
table tfoot tr.explanation:nth-child(even) {
  background-color: #c0def2;
}
table thead tr.explanation th,
table tbody tr.explanation th,
table tfoot tr.explanation th {
  background-color: #007bc7;
  border-color: #007bc7;
  color: #fff;
}
table thead th.error,
table tbody th.error,
table tfoot th.error {
  background-color: #d52a1e;
  border-color: #d52a1e;
  color: #fff;
}
table thead th.error:before,
table tbody th.error:before,
table tfoot th.error:before {
  background-image: url(../img/notification_icons_light.svg);
}
table thead th.warning,
table tbody th.warning,
table tfoot th.warning {
  background-color: #ffb71a;
  border-color: #ffb71a;
  color: #000;
}
table thead th.warning:before,
table tbody th.warning:before,
table tfoot th.warning:before {
  background-image: url(../img/notification_icons_dark.svg);
}
table thead th.confirmation,
table tbody th.confirmation,
table tfoot th.confirmation {
  background-color: #358734;
  border-color: #358734;
  color: #fff;
}
table thead th.confirmation:before,
table tbody th.confirmation:before,
table tfoot th.confirmation:before {
  background-image: url(../img/notification_icons_light.svg);
}
table thead th.explanation,
table tbody th.explanation,
table tfoot th.explanation {
  background-color: #007bc7;
  border-color: #007bc7;
  color: #fff;
}
table thead th.explanation:before,
table tbody th.explanation:before,
table tfoot th.explanation:before {
  background-image: url(../img/notification_icons_light.svg);
}

input.error,
select.error,
textarea.error,
input[type=checkbox]:not(:checked).error,
input[type=radio]:not(:checked).error {
  border-color: #d52a1e;
}
input.warning,
select.warning,
textarea.warning,
input[type=checkbox]:not(:checked).warning,
input[type=radio]:not(:checked).warning {
  border-color: #ffb71a;
}
input.confirmation,
select.confirmation,
textarea.confirmation,
input[type=checkbox]:not(:checked).confirmation,
input[type=radio]:not(:checked).confirmation {
  border-color: #358734;
}
input.explanation,
select.explanation,
textarea.explanation,
input[type=checkbox]:not(:checked).explanation,
input[type=radio]:not(:checked).explanation {
  border-color: #007bc7;
}
input.primary,
select.primary,
textarea.primary,
input[type=checkbox]:not(:checked).primary,
input[type=radio]:not(:checked).primary {
  background-color: #fff;
  color: #000;
  border: 1px solid #ca005d;
}

input.error, input.warning, input.confirmation, input.explanation, input.primary,
select.error,
select.warning,
select.confirmation,
select.explanation,
select.primary,
textarea.error,
textarea.warning,
textarea.confirmation,
textarea.explanation,
textarea.primary {
  border-width: 1px;
  border-style: solid;
  background-color: #fff;
}

button.error, button.warning, button.confirmation, button.explanation,
a.button.error,
a.button.warning,
a.button.confirmation,
a.button.explanation,
input[type=button].error,
input[type=button].warning,
input[type=button].confirmation,
input[type=button].explanation,
input[type=submit].error,
input[type=submit].warning,
input[type=submit].confirmation,
input[type=submit].explanation,
input[type=reset].error,
input[type=reset].warning,
input[type=reset].confirmation,
input[type=reset].explanation {
  color: #000;
}
button.error,
a.button.error,
input[type=button].error,
input[type=submit].error,
input[type=reset].error {
  background-color: #d52a1e;
  border-color: #d52a1e;
  color: #fff;
}
button.error:hover,
a.button.error:hover,
input[type=button].error:hover,
input[type=submit].error:hover,
input[type=reset].error:hover {
  background-color: #951d15;
  border-color: #951d15;
}
button.warning,
a.button.warning,
input[type=button].warning,
input[type=submit].warning,
input[type=reset].warning {
  background-color: #ffb71a;
  border-color: #ffb71a;
  color: #000;
}
button.warning:hover,
a.button.warning:hover,
input[type=button].warning:hover,
input[type=submit].warning:hover,
input[type=reset].warning:hover {
  background-color: #b38012;
  border-color: #b38012;
  color: #fff;
}
button.confirmation,
a.button.confirmation,
input[type=button].confirmation,
input[type=submit].confirmation,
input[type=reset].confirmation {
  background-color: #358734;
  border-color: #358734;
  color: #fff;
}
button.confirmation:hover,
a.button.confirmation:hover,
input[type=button].confirmation:hover,
input[type=submit].confirmation:hover,
input[type=reset].confirmation:hover {
  background-color: #255f24;
  border-color: #255f24;
}
button.explanation,
a.button.explanation,
input[type=button].explanation,
input[type=submit].explanation,
input[type=reset].explanation {
  background-color: #007bc7;
  border-color: #007bc7;
  color: #fff;
}
button.explanation:hover,
a.button.explanation:hover,
input[type=button].explanation:hover,
input[type=submit].explanation:hover,
input[type=reset].explanation:hover {
  background-color: #00568b;
  border-color: #00568b;
  border-color: #00568b;
}
button.primary,
a.button.primary,
input[type=button].primary,
input[type=submit].primary,
input[type=reset].primary {
  background-color: #ca005d;
  color: #fff;
}

/*---------------------------------------------------------------*/
/*------------------------- nowrap.scss -------------------------*/
/*---------------------------------------------------------------*/
table tr.nowrap, table th.nowrap, table td.nowrap, table tfoot.nowrap th,
table tfoot.nowrap td, table tbody.nowrap th,
table tbody.nowrap td, table thead.nowrap th, table.nowrap th,
table.nowrap td,
.nowrap {
  white-space: nowrap;
}

/*---------------------------------------------------------------*/
/*------------------ components/page-meta.scss ------------------*/
/*---------------------------------------------------------------*/
.page-meta {
  background-color: #f3f3f3;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0.25rem 1rem;
  box-sizing: border-box;
  flex-wrap: wrap;
  color: #000;
  min-height: 1.5rem;
}
.page-meta > div {
  width: auto;
  padding: 0;
}
.page-meta > div > p,
.page-meta > div > span {
  margin-top: 0;
  margin-bottom: 0;
}

/*---------------------------------------------------------------*/
/*------------------ components/search.scss ---------------------*/
/*---------------------------------------------------------------*/
.search {
  flex-grow: 1;
  display: flex;
  max-width: 100%;
  width: unset;
  justify-content: flex-end;
  align-items: flex-start;
}
.search input {
  flex-grow: 1;
  display: block;
  margin-bottom: 0;
  min-height: 44px;
}
.search button,
.search a.button,
.search input[type=button],
.search input[type=submit],
.search input[type=reset] {
  font-size: 0;
  background-color: #404040;
  border: 0;
  margin-left: 0;
  color: #fff;
}
.search button:hover,
.search a.button:hover,
.search input[type=button]:hover,
.search input[type=submit]:hover,
.search input[type=reset]:hover {
  background-color: #000;
}
.search button:hover:before,
.search a.button:hover:before,
.search input[type=button]:hover:before,
.search input[type=submit]:hover:before,
.search input[type=reset]:hover:before {
  color: inherit;
}
.search button:before,
.search a.button:before,
.search input[type=button]:before,
.search input[type=submit]:before,
.search input[type=reset]:before {
  content: "";
  font-family: "RO Icons";
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 1.125rem;
  position: static;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Firefox */
  font-smoothing: antialiased;
  margin-right: 0.25rem;
  color: inherit;
}
@media (min-width: 42rem) {
  .search button,
.search a.button,
.search input[type=button],
.search input[type=submit],
.search input[type=reset] {
    background-color: #ca005d;
    color: #fff;
  }
  .search button:hover,
.search a.button:hover,
.search input[type=button]:hover,
.search input[type=submit]:hover,
.search input[type=reset]:hover {
    background-color: #8d0041;
  }
}
@media (min-width: 42rem) {
  .search {
    margin: 0;
    flex-grow: unset;
  }
  .search button,
.search a.button,
.search input[type=button],
.search input[type=submit],
.search input[type=reset] {
    font-size: 1.125rem;
  }
  .search button:before,
.search a.button:before,
.search input[type=button]:before,
.search input[type=submit]:before,
.search input[type=reset]:before {
    margin-right: 0.5rem;
  }
}

/*---------------------------------------------------------------*/
/*------------------ components/sidemenu.scss -------------------*/
/*---------------------------------------------------------------*/
main.sidemenu {
  flex-direction: row;
  flex-wrap: wrap;
}
main.sidemenu .to-top {
  margin-left: auto;
}
@media (min-width: 55rem) {
  main.sidemenu {
    flex-wrap: nowrap;
  }
  main.sidemenu .to-top {
    margin-left: unset;
  }
}
main.sidemenu > div {
  margin: auto;
  width: 100%;
  max-width: 100%;
}
@media (min-width: 55rem) {
  main.sidemenu > div {
    min-width: 0;
    /* Preventing unnecessary overflow of the flexed parent */
    max-width: calc(100% - 18rem);
  }
}
main.sidemenu > nav {
  display: none;
}
@media (min-width: 55rem) {
  main.sidemenu > nav {
    margin: 0;
    display: block;
    border-right: 1px solid #e6e6e6;
    background-color: #fff;
    box-sizing: border-box;
    width: 18rem;
    position: relative;
  }
  main.sidemenu > nav > ul {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    padding: 2rem;
    max-height: 90vh;
    overflow: auto;
    display: block;
    /* Solves a bug in older safari versions where position sticky blocks overflow auto */
  }
  main.sidemenu > nav button + ul {
    margin-top: -4rem;
    /* Compensating for the reserved space for the icon. Position sticky still reserves the space within the flow. */
  }
  main.sidemenu > nav .sidemenu-toggle {
    position: -webkit-sticky;
    position: sticky;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem 0 0 18rem;
    top: 1rem;
    z-index: 2;
  }
}
@media (min-width: 55rem) {
  main.sidemenu.sidemenu-closed > nav {
    border: 0;
    width: 0;
  }
  main.sidemenu.sidemenu-closed > nav > ul {
    display: none;
  }
  main.sidemenu.sidemenu-closed > nav .sidemenu-toggle {
    margin-left: 0;
  }
  main.sidemenu.sidemenu-closed > div {
    max-width: 100%;
  }
}

/*---------------------------------------------------------------*/
/*-------------- components/skip-to-content.scss ----------------*/
/*---------------------------------------------------------------*/
.skip-to-content {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

/*---------------------------------------------------------------*/
/*-------------------- components/table.scss --------------------*/
/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/
/*-------- components/table-component/sticky-header.scss --------*/
/*---------------------------------------------------------------*/
.sticky-header {
  max-height: 100vh;
  position: relative;
}
.sticky-header th {
  position: sticky;
  top: -1px;
  background-color: #ca005d;
  color: #fff;
}

/*---------------------------------------------------------------*/
/*-------- components/table-component/expando-rows.scss ---------*/
/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/
/*-------- components/expando-rows-render-issue.scss ------------*/
/*---------------------------------------------------------------*/
/* This bit of css solves a render issue that appears when a dl containing a
dd is used within a expando row. 

Issue:  
When the width of the dd has been set as a 
percentage, the rest of the table (th and td) will change their width when the 
expando row is opened. 

Cause/findings:
There are a couple of issues found concerning this bug:
- A table set to 100% width is rendered as 100% - 1px width
  - Removing borders and adding box-sizing: border-box; or changing the table-layout 
    do not seem to make a difference.
- An element within the table set to 100% width is also rendered as 100% - 1px width
- When using a calc(100% - 1px) the computed value is correct, however the
width of the th and td still change. 
- When setting a px or rem value the th's and td's keep their original width

Using fixed values isn't ideal percentages would be less prone to issues when the width
of parent elements are altered. Suggestions on how this bug can be solved instead of patched
are welcome.
*/
table tr.expando-row td dl > div > dd,
table.condensed tr.expando-row td dl > div > dd,
table.sticky tr.expando-row td dl > div > dd {
  max-width: calc(82rem - 35rem);
}

article table tr.expando-row td dl > div > dd,
article table.condensed tr.expando-row td dl > div > dd,
article table.sticky tr.expando-row td dl > div > dd {
  max-width: calc(50rem - 20rem);
}

.auth table tr.expando-row td dl > div > dd,
.auth table.condensed tr.expando-row td dl > div > dd,
.auth table.sticky tr.expando-row td dl > div > dd {
  max-width: calc(42rem - 5rem);
}

.form-view table tr.expando-row td dl > div > dd,
.form-view table.condensed tr.expando-row td dl > div > dd,
.form-view table.sticky tr.expando-row td dl > div > dd {
  max-width: calc(55rem - 10rem);
}

table button.expando-button,
table.condensed button.expando-button,
table.sticky button.expando-button {
  display: none;
}
table tr.expando-row,
table.condensed tr.expando-row,
table.sticky tr.expando-row {
  display: table-layout;
}
table tr.expando-row td,
table.condensed tr.expando-row td,
table.sticky tr.expando-row td {
  background-color: #eeeeee;
  padding: 2rem 1rem;
  position: relative;
}
table tr.expando-row td .meta,
table.condensed tr.expando-row td .meta,
table.sticky tr.expando-row td .meta {
  position: absolute;
  top: 0;
  right: 1rem;
  width: auto;
  display: flex;
  color: #696969;
}
table tr.expando-row td .meta dt,
table tr.expando-row td .meta dd,
table.condensed tr.expando-row td .meta dt,
table.condensed tr.expando-row td .meta dd,
table.sticky tr.expando-row td .meta dt,
table.sticky tr.expando-row td .meta dd {
  margin: 0;
  white-space: nowrap;
  width: auto;
}
table tr.expando-row td .meta dt,
table.condensed tr.expando-row td .meta dt,
table.sticky tr.expando-row td .meta dt {
  margin-right: 0.5rem;
}
table tr.expando-row td .meta dt:after,
table.condensed tr.expando-row td .meta dt:after,
table.sticky tr.expando-row td .meta dt:after {
  content: ":";
}
@media (min-width: 24rem) {
  table tr.expando-row td,
table.condensed tr.expando-row td,
table.sticky tr.expando-row td {
    padding: 2rem 3rem;
  }
}
table tr.expando-row td h1,
table.condensed tr.expando-row td h1,
table.sticky tr.expando-row td h1 {
  font-size: 1.60181rem;
  margin: 1rem 0;
}
table tr.expando-row td h2,
table.condensed tr.expando-row td h2,
table.sticky tr.expando-row td h2 {
  font-size: 1.26562rem;
}
table tr.expando-row td > div,
table.condensed tr.expando-row td > div,
table.sticky tr.expando-row td > div {
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
}
table tr.expando-row td > div .button-container,
table.condensed tr.expando-row td > div .button-container,
table.sticky tr.expando-row td > div .button-container {
  justify-content: flex-end;
  margin-top: -2rem;
  /* Overwriting the default margin to visually group the buttons with the occurences */
  margin-bottom: 0;
}
table tr.expando-row td dl,
table.condensed tr.expando-row td dl,
table.sticky tr.expando-row td dl {
  width: 100%;
  margin: 1rem 0;
}
table tr.expando-row td dl > div,
table.condensed tr.expando-row td dl > div,
table.sticky tr.expando-row td dl > div {
  padding: 0.5rem 0;
}
table tr.expando-row td dl > div:nth-child(odd),
table.condensed tr.expando-row td dl > div:nth-child(odd),
table.sticky tr.expando-row td dl > div:nth-child(odd) {
  background-color: transparent;
}
table tr.expando-row td dl > div dd ul,
table.condensed tr.expando-row td dl > div dd ul,
table.sticky tr.expando-row td dl > div dd ul {
  flex-grow: 1;
  padding: 0;
}
table tr.expando-row td dl > div dd ul li,
table.condensed tr.expando-row td dl > div dd ul li,
table.sticky tr.expando-row td dl > div dd ul li {
  list-style: none;
  background-color: #fff;
  margin: 0.5rem 0;
  padding: 0;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /* Header */
  /* Body - expandable content */
}
table tr.expando-row td dl > div dd ul li > div:first-child,
table.condensed tr.expando-row td dl > div dd ul li > div:first-child,
table.sticky tr.expando-row td dl > div dd ul li > div:first-child {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  border-bottom: 1px solid #e6e6e6;
  padding: 0 1rem;
}
table tr.expando-row td dl > div dd ul li > div:last-child,
table.condensed tr.expando-row td dl > div dd ul li > div:last-child,
table.sticky tr.expando-row td dl > div dd ul li > div:last-child {
  padding: 1rem 2rem;
  display: flex;
}
table tr.expando-row td dl > div dd ul li > div:last-child > dl,
table.condensed tr.expando-row td dl > div dd ul li > div:last-child > dl,
table.sticky tr.expando-row td dl > div dd ul li > div:last-child > dl {
  display: flex;
  flex-direction: column;
  margin: 0;
}
table tr.expando-row td dl > div dd ul li > div:last-child > dl > div,
table.condensed tr.expando-row td dl > div dd ul li > div:last-child > dl > div,
table.sticky tr.expando-row td dl > div dd ul li > div:last-child > dl > div {
  background-color: transparent;
}
table tr.expando-row td dl > div dd ul li > button,
table.condensed tr.expando-row td dl > div dd ul li > button,
table.sticky tr.expando-row td dl > div dd ul li > button {
  padding: 0 1rem;
  min-height: 1rem;
}
@media (min-width: 42rem) {
  table tr.expando-row td dl > div dt,
table.condensed tr.expando-row td dl > div dt,
table.sticky tr.expando-row td dl > div dt {
    min-width: 30%;
    width: 30%;
  }
  table tr.expando-row td dl > div dd,
table.condensed tr.expando-row td dl > div dd,
table.sticky tr.expando-row td dl > div dd {
    margin-left: 2rem;
    width: calc(70% - 2rem);
  }
}
@media (min-width: 65rem) {
  table tr.expando-row td dl > div dt,
table.condensed tr.expando-row td dl > div dt,
table.sticky tr.expando-row td dl > div dt {
    min-width: 20%;
    width: 20%;
  }
  table tr.expando-row td dl > div dd,
table.condensed tr.expando-row td dl > div dd,
table.sticky tr.expando-row td dl > div dd {
    margin-left: 2rem;
    width: calc(80% - 2rem);
  }
}

.js-expando-rows-loaded table tr.expando-row[hidden],
.js-expando-rows-loaded table.condensed tr.expando-row[hidden] {
  display: none;
}
.js-expando-rows-loaded table button.expando-button:not([hidden]),
.js-expando-rows-loaded table.condensed button.expando-button:not([hidden]) {
  display: inline-flex;
}

/*---------------------------------------------------------------*/
/*-------- components/table-component/summary.scss --------------*/
/*---------------------------------------------------------------*/
table.summary,
table.condensed.summary {
  width: auto;
}
table.summary tbody,
table.condensed.summary tbody {
  border-bottom: 1px solid #e6e6e6;
  /* This border will only be visible when there is no tfoot */
}
table.summary tbody tr:last-child td,
table.condensed.summary tbody tr:last-child td {
  border-bottom: 0;
}
table.summary tbody tr td,
table.condensed.summary tbody tr td {
  border-left: 0;
  border-right: 0;
}
table.summary tfoot td,
table.condensed.summary tfoot td {
  border-top: 1px solid black;
  border-bottom: 0;
  border-left: 0;
  border-right: 0;
}

/* Table */
table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 1.125rem;
  overflow: auto;
  background-color: #fff;
  margin: 1.5rem 0;
  /* Zebra striping whith opacity to keep background color. e.g for warnings or errors */
  /* sortable */
}
table th,
table td {
  padding: 0.5rem 1rem;
  border: 1px solid #e6e6e6;
}
table th > div,
table td > div {
  display: inline-flex;
  align-items: flex-end;
}
table th > div > * + *,
table td > div > * + * {
  margin: 0 0 0 0.5rem;
}
table tr:nth-child(even):not(.odd), table tr:nth-child(odd).even {
  background-color: rgba(148, 148, 148, 0.1);
}
table th.sortable > button, table th.ascending > button, table th.descending > button {
  color: transparent;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: top;
  margin: 0;
  background: transparent;
  font-size: 0;
  min-height: 0;
  padding: 0;
}
table th.sortable > button:hover, table th.ascending > button:hover, table th.descending > button:hover {
  color: transparent;
}
table th.sortable > button:before, table th.ascending > button:before, table th.descending > button:before {
  font-family: "RO Icons";
  display: inline;
  color: inherit;
  font-size: 0.8rem;
  position: static;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Firefox */
  color: #fff;
  margin: 0 0.25rem;
}
table th.sortable > button:before {
  content: "";
  font-size: 1rem;
}
table th.ascending > button:before {
  content: "";
}
table th.descending > button:before {
  content: "";
}
table thead {
  background-color: #ca005d;
  color: #fff;
  border: 1px solid #e6e6e6;
}
table thead th {
  border: 1px solid #efb2ce;
}
table thead a,
table thead a:visited,
table thead a:hover {
  color: #fff;
}
table thead a:before,
table thead a:visited:before,
table thead a:hover:before {
  color: #fff;
}
table.condensed th,
table.condensed td {
  padding: 0.125rem 1rem;
}
table .number {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
table td.number input {
  text-align: inherit;
}
table tfoot {
  font-weight: bold;
}
table tfoot th {
  background-color: #cccccc;
}
table tfoot td {
  background-color: transparent;
  border: 1px solid #e6e6e6;
}
table form + form {
  margin-top: 0.5rem;
}
table form button:last-child,
table form a.button:last-child,
table form input[type=button]:last-child,
table form input[type=submit]:last-child,
table form input[type=reset]:last-child {
  /* A condensed button within tables */
  padding: 0 0.5rem;
}

/* Caption */
caption {
  padding: 1rem 0 0.5rem 0;
  text-align: left;
  font-size: 0.88889rem;
}

/*----------------------------------------------------------------------------------*/
/*---------------------------------- hidden.scss -----------------------------------*/
/*----------------------------------------------------------------------------------*/
.hidden {
  display: none !important;
  /* !important added to solve/prevent any specificity issues. */
}

/*---------------------------------------------------------------*/
/*-------------- components/visually-hidden.scss -----------------*/
/*---------------------------------------------------------------*/
.visually-hidden,
.sr-only {
  clip-path: inset(50%);
  white-space: nowrap;
  overflow: hidden;
  width: 0;
  height: 0;
  max-width: 0;
  max-height: 0;
  /* Overwriting any specifics that might have been set.    */
  /* !important is used here to solve any specificity issues */
  min-width: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  padding: 0 !important;
  position: absolute !important;
}

/*---------------------------------------------------------------*/
/*---------------- components/accordion.scss --------------------*/
/*---------------------------------------------------------------*/
/* Overwrite default styling for specific elements so they can be used as an accordion element */
.accordion > div {
  margin: 0;
  width: 100%;
}

.accordion {
  margin: 2rem 0;
  padding-left: 0;
}
.accordion > * {
  list-style: none;
  padding: 0;
  display: flex;
  align-items: center;
  align-items: stretch;
  flex-direction: column;
  justify-content: center;
}
.accordion > * > button {
  color: #8d0041;
  font-size: 1.60181rem;
  text-decoration: none;
  padding-left: 1rem;
  margin: 0;
  min-height: 2.75rem;
  padding: 0.5rem;
  text-align: left;
  line-height: initial;
  background-color: #efb2ce;
  border: 2px solid #ca005d;
}
.accordion > * > button + div {
  padding: 1.5rem;
  border-color: #cccccc;
  border-style: solid;
  border-width: 0 1px;
}
.accordion > * > button + div > h1 {
  margin: 0;
}
.accordion > * > button:before {
  content: "";
  font-family: "RO Icons";
  font-size: 0.7rem;
  padding-right: 1rem;
  padding-left: 0.5rem;
}
.accordion.icon-type-plus > * > button:before {
  background-color: #8d0041;
  content: "";
  color: #fff;
  height: 1.4rem;
  width: 1.4rem;
  min-width: 0;
  padding: 0;
  margin-right: 1rem;
  border-radius: 50%;
  padding: 0.25rem;
  box-sizing: border-box;
  text-align: center;
  line-height: 0.88889rem;
  vertical-align: middle;
}

/* The expanded state */
/* Collapsed state (only when JavaScript is loaded) */
.js-accordion-loaded {
  /* The expanded state */
}
.js-accordion-loaded .accordion > * > button[aria-expanded=false] {
  border: 0;
  background-color: #f7d9e7;
  border-bottom: 1px solid #efb2ce;
}
.js-accordion-loaded .accordion > * > button[aria-expanded=false]:before {
  content: "";
}
.js-accordion-loaded .accordion > * > button[aria-expanded=false] + div {
  display: none;
}
.js-accordion-loaded .accordion.icon-type-plus > * > button[aria-expanded=false]:before {
  content: "";
}

/* Styling the last element */
.accordion > *:last-child > button + div {
  border-bottom: 1px solid #cccccc;
}

.js-accordion-loaded .accordion > *:last-child > button[aria-expanded=false] {
  border-bottom: 0;
}

/*---------------------------------------------------------------*/
/*------------------- components/tiles.scss ---------------------*/
/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/
/*------------------ components/tiles/tile.scss -----------------*/
/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/
/*------------ components/tile/grouped-content.scss -------------*/
/*---------------------------------------------------------------*/
.tile > div, ul.tiles > li > div, .tiles > div > div {
  border-top: 1px solid #f3f3f3;
  margin-top: 1rem;
  display: flex;
  padding: 1rem 0 0 0;
  gap: 0.5rem;
}
.tile > div > *, ul.tiles > li > div > *, .tiles > div > div > * {
  margin: 0;
}

/*---------------------------------------------------------------*/
/*------------ components/tile/horizontal-view.scss -------------*/
/*---------------------------------------------------------------*/
.horizontal-view.horizontal-view {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/*---------------------------------------------------------------*/
/*------------ components/tile/tile-actions.scss ----------------*/
/*---------------------------------------------------------------*/
.tile > div, ul.tiles > li > div, .tiles > div > div {
  margin-top: auto;
}
.tile > div form, ul.tiles > li > div form, .tiles > div > div form {
  margin: 0;
  background-color: transparent;
  padding: 0;
}
.tile > div form button, ul.tiles > li > div form button, .tiles > div > div form button {
  margin: 0;
}

.tile, ul.tiles > li, .tiles > div {
  border: 1px solid #f3f3f3;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
  color: #000;
  gap: 1rem;
  /* Grouped content within a tile */
}
.tile > *, ul.tiles > li > *, .tiles > div > * {
  margin: 1rem;
  padding: 0;
}
.tile h1, ul.tiles > li h1, .tiles > div h1 {
  font-size: 1.125rem;
}
.tile > img:first-child, ul.tiles > li > img:first-child, .tiles > div > img:first-child {
  margin: 0 0 0.5rem 0;
  max-height: 12rem;
  object-fit: cover;
  object-position: center;
}
.tile > button, ul.tiles > li > button, .tiles > div > button {
  padding: 0.75rem 1rem;
  margin-right: auto;
}
.tile ul, ul.tiles > li ul, .tiles > div ul {
  padding-left: 2rem;
}

.tiles {
  /* render each div directly within a tiles group as a tile */
}
ul.tiles {
  padding-left: 0;
}
ul.tiles > li > a {
  color: #000;
  text-decoration: none;
}

/* The posibility to render a single element as a tile */
/* Layout exceptions */
.auth > .tile, .auth.tiles,
.auth > tiles,
.form-view > .tile,
.form-view.tiles,
.form-view > tiles {
  padding: 0;
  margin-bottom: 1rem;
}
.auth.tiles > div,
.auth.tiles > ul,
.form-view.tiles > div,
.form-view.tiles > ul {
  padding: 0;
  margin-bottom: 1rem;
}

.hero .tile {
  border: 0;
}
.hero .tile h1 {
  font-size: 1.60181rem;
}

/*---------------------------------------------------------------*/
/*----------------- components/to-top.scss ----------------------*/
/*---------------------------------------------------------------*/
button.to-top,
a.button.to-top {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  border: 2px solid white;
  align-self: flex-end;
  /* If the back to top button is an icon-button */
}
button.to-top.ro-icon,
a.button.to-top.ro-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  height: 2.75rem;
  width: 2.75rem;
}
button.to-top.ro-icon:before,
a.button.to-top.ro-icon:before {
  font-size: 1.25rem;
}

/*---------------------------------------------------------------*/
/*-------------- components/toggle-switch.scss ------------------*/
/*---------------------------------------------------------------*/
.toggle-switch label {
  padding-right: 0;
  line-height: 1.5rem;
  cursor: pointer;
  margin-top: 1rem;
}
.toggle-switch label > span {
  width: 33.33%;
  display: block;
  float: left;
  margin: 0;
}
.toggle-switch label > span:last-child {
  width: auto;
  float: left;
  position: relative;
}
.toggle-switch label > span:last-child input {
  vertical-align: middle;
  float: left;
  border-radius: 50%;
  border: 0;
  margin: 0;
  margin-right: 0.5rem;
  z-index: 1;
  position: relative;
  position: absolute;
  left: 0.125rem;
  top: 0.125rem;
}
.toggle-switch label > span:last-child input:checked {
  float: right;
  right: 0.125rem;
  left: auto;
  background: #fff;
  margin-right: 0;
}
.toggle-switch label > span:last-child input:checked + .false {
  display: none;
}
.toggle-switch label > span:last-child input:checked + span + .true {
  display: inline-block;
}
.toggle-switch label > span:last-child span {
  border-radius: 2rem;
  padding: 0 1rem;
  min-height: 1.375rem;
  display: inline-block;
  margin: 0;
}
.toggle-switch label > span:last-child span.false {
  padding-left: 2rem;
  background-color: #cccccc;
}
.toggle-switch label > span:last-child span.true {
  background-color: #01689b;
  color: #fff;
  padding-right: 2rem;
  display: none;
}

fieldset.toggle-switch legend {
  margin-bottom: 1rem;
}

/*---------------------------------------------------------------*/
/*---------------- components/questionnaire.scss -----------------*/
/*---------------------------------------------------------------*/
.questionnaire {
  background-color: #f3f3f3;
  max-width: 100%;
}

section > .questionnaire,
article > .questionnaire {
  padding: 0;
}
section > .questionnaire > form,
article > .questionnaire > form {
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
}
section > .questionnaire > form fieldset > div > div,
article > .questionnaire > form fieldset > div > div {
  float: left;
  margin-right: 1rem;
}
section > .questionnaire > form fieldset > div > div input,
article > .questionnaire > form fieldset > div > div input {
  margin-top: 0;
}
section > .questionnaire > form fieldset > div > div label,
article > .questionnaire > form fieldset > div > div label {
  display: inline;
  margin: 0;
}

section > .questionnaire > form {
  max-width: 82rem;
}

article > .questionnaire > form {
  max-width: 50rem;
}

section.auth > .questionnaire,
article.auth > .questionnaire {
  max-width: 100%;
}
section.auth > .questionnaire > form,
article.auth > .questionnaire > form {
  max-width: 42rem;
}

section.form-view > .questionnaire,
article.form-view > .questionnaire {
  max-width: 100%;
}
section.form-view > .questionnaire > form,
article.form-view > .questionnaire > form {
  max-width: 55rem;
}

/* Additional supporting components */
/*-------------------------------------------------------------*/
/*---------------- components/ro-select.scss ------------------*/
/*-------------------------------------------------------------*/
/* Rijksoverheid styling for select

Please note that: Overwriting styling on the select element isn't recommended due to
browser,system and context specific behaviour and styling.

The Rijksoverheid's branding guide does not specify styling for the select element and as such
overwriting the default styling isn't required. 

On government sites currently in use, the select is overwritten with specific styling. For the usage of
this library within these websites it is recommened to revert back to default selects (with no additional stylinng added).
But if additional styling is inevitable and required the styles below offer a work around/ version. However, 
please be aware that the consistency in different browsers and within different contexts and systems can 
not be guaranteed and are not fully tested. So proceed with caution and test thoroughly. */
/* To use the additional styling, add a div around the select with the classname "ro-select". This will
trigger the styling as shown within this file. */
.ro-select {
  position: relative;
  background-color: #fff;
  border: 1px solid #01689b;
  /* A border is needed to comply with the WCAG SC 1.4.11 rules concerning the contrast between the field and the surrounding color*/
}
.ro-select select {
  padding-right: 44px;
  border-radius: 0;
  background: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  z-index: 1;
  min-height: 44px;
  padding: 0 44px 0 1rem;
  box-sizing: border-box;
  width: 100%;
}
.ro-select select:disabled {
  opacity: 0.2;
}
.ro-select:after {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "RO Icons";
  content: "";
  width: 44px;
  height: 44px;
  background-color: white;
  color: #01689b;
  z-index: 0;
  font-size: 1rem;
}
@media (min-width: 50rem) {
  .ro-select {
    /* Aligning button with the inputfields if there are grouped input fields */
  }
  .ro-select + button, .ro-select + a.button, .ro-select + input[type=button], .ro-select + input[type=submit], .ro-select + input[type=reset] {
    margin-left: 0;
  }
}

/* States */
/*---------------------------------------------------------------*/
/*------------------------- states.scss -------------------------*/
/*---------------------------------------------------------------*/
/* Focus */
*:focus,
*.focus,
.outline-dotted {
  outline: 2px dotted #000;
  outline-offset: 0.25rem;
  /* Adding some spacing between the content and the outline */
  z-index: 1;
  /* Laying the focussed area on top of any follow up messages */
  position: relative;
}
*:focus + label:before,
*.focus + label:before,
.outline-dotted + label:before {
  outline: 2px dotted #000;
  z-index: 1;
  /* Laying the focussed area on top of any follow up messages */
  position: relative;
}

/* Disabled */
*:disabled,
*.disabled {
  cursor: not-allowed !important;
  /* Overwriting more specific selectors e.g "a.button" */
  opacity: 0.4;
}
*:disabled + label, *:disabled + label:before,
*.disabled + label,
*.disabled + label:before {
  opacity: 0.4;
  cursor: not-allowed;
}

/*---------------------------------------------------------------*/
/*-------------------------- print.scss -------------------------*/
/*---------------------------------------------------------------*/
@media print {
  body > header > nav {
    display: none;
  }
  body > footer {
    display: none;
  }
  body > main.sidemenu > nav {
    display: none;
  }

  button.to-top.ro-icon,
a.button.to-top.ro-icon {
    display: none;
  }

  pre {
    break-inside: avoid;
  }

  div.code-block, div.error, div.warning, div.explanation, div.confirmation, div.primary,
p.code-block,
p.error,
p.warning,
p.explanation,
p.confirmation,
p.primary {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .error,
.warning,
.explanation,
.confirmation,
.primary {
    -webkit-print-color-adjust: exact;
  }

  .no-print {
    display: none;
  }
}
/* Styles needed for the documentation */
/*---------------------------------------------------------------*/
/*------------------ components/test-cases.scss -----------------*/
/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/
/*-------------- components/test-cases-colors.scss --------------*/
/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/
/*--------- components/test-cases-colors-darker.scss ------------*/
/*---------------------------------------------------------------*/
.purple {
  background-color: #42145f;
  color: #fff;
}

.purple-tint-1 {
  background-color: #c6b8cf;
  color: #000;
}

.purple-tint-2 {
  background-color: #e3dce7;
  color: #000;
}

.purple-tint-colored-text {
  color: #170721;
}

.violet {
  background-color: #a90061;
  color: #fff;
}

.violet-tint-1 {
  background-color: #e5b2cf;
  color: #000;
}

.violet-tint-2 {
  background-color: #f2d9e7;
  color: #000;
}

.violet-tint-colored-text {
  color: #3b0022;
}

.ruby-red {
  background-color: #ca005d;
  color: #fff;
}

.ruby-red-tint-1 {
  background-color: #efb2ce;
  color: #000;
}

.ruby-red-tint-2 {
  background-color: #f7d9e7;
  color: #000;
}

.ruby-red-tint-colored-text {
  color: #470021;
}

.pink {
  background-color: #f092cd;
  color: #000;
}

.pink-tint-1 {
  background-color: #fadef0;
  color: #000;
}

.pink-tint-2 {
  background-color: #fdeff8;
  color: #000;
}

.pink-tint-colored-text {
  color: #543348;
}

.red {
  background-color: #d52b1e;
  color: #fff;
}

.red-tint-1 {
  background-color: #f2bfbb;
  color: #000;
}

.red-tint-2 {
  background-color: #f9dfdd;
  color: #000;
}

.red-tint-colored-text {
  color: #4b0f0b;
}

.orange {
  background-color: #e17000;
  color: #000;
}

.orange-tint-1 {
  background-color: #f6d4b2;
  color: #000;
}

.orange-tint-2 {
  background-color: #fbead9;
  color: #000;
}

.orange-tint-colored-text {
  color: #4f2700;
}

.dark-yellow {
  background-color: #ffb612;
  color: #000;
}

.dark-yellow-tint-1 {
  background-color: #ffe9b7;
  color: #000;
}

.dark-yellow-tint-2 {
  background-color: #fff4dc;
  color: #000;
}

.dark-yellow-tint-colored-text {
  color: #594006;
}

.yellow {
  background-color: #f9e11e;
  color: #000;
}

.yellow-tint-1 {
  background-color: #fdf6bb;
  color: #000;
}

.yellow-tint-2 {
  background-color: #fefbdd;
  color: #000;
}

.yellow-tint-colored-text {
  color: #574f0b;
}

.dark-brown {
  background-color: #673327;
  color: #fff;
}

.dark-brown-tint-1 {
  background-color: #d1c1be;
  color: #000;
}

.dark-brown-tint-2 {
  background-color: #e8e1df;
  color: #000;
}

.dark-brown-tint-colored-text {
  color: #24120e;
}

.brown {
  background-color: #94710a;
  color: #fff;
}

.brown-tint-1 {
  background-color: #dfd4b5;
  color: #000;
}

.brown-tint-2 {
  background-color: #efeada;
  color: #000;
}

.brown-tint-colored-text {
  color: #342804;
}

.dark-green {
  background-color: #275937;
  color: #fff;
}

.dark-green-tint-1 {
  background-color: #becdc3;
  color: #000;
}

.dark-green-tint-2 {
  background-color: #dfe6e1;
  color: #000;
}

.dark-green-tint-colored-text {
  color: #0e1f13;
}

.green {
  background-color: #39870c;
  color: #fff;
}

.green-tint-1 {
  background-color: #c3dbb6;
  color: #000;
}

.green-tint-2 {
  background-color: #e1eddb;
  color: #000;
}

.green-tint-colored-text {
  color: #142f04;
}

.moss-green {
  background-color: #777c00;
  color: #000;
}

.moss-green-tint-1 {
  background-color: #d6d7b2;
  color: #000;
}

.moss-green-tint-2 {
  background-color: #ebebd9;
  color: #000;
}

.moss-green-tint-colored-text {
  color: #2a2b00;
}

.mint-green {
  background-color: #76d2b6;
  color: #000;
}

.mint-green-tint-1 {
  background-color: #d6f1e9;
  color: #000;
}

.mint-green-tint-2 {
  background-color: #ebf8f4;
  color: #000;
}

.mint-green-tint-colored-text {
  color: #294a40;
}

.dark-blue {
  background-color: #01689b;
  color: #fff;
}

.dark-blue-tint-1 {
  background-color: #cce0f1;
  color: #000;
}

.dark-blue-tint-2 {
  background-color: #e5f0f9;
  color: #000;
}

.dark-blue-tint-colored-text {
  color: #002436;
}

.sky-blue {
  background-color: #007bc7;
  color: #fff;
}

.sky-blue-tint-1 {
  background-color: #b2d7ee;
  color: #000;
}

.sky-blue-tint-2 {
  background-color: #d9ebf7;
  color: #000;
}

.sky-blue-tint-colored-text {
  color: #002b46;
}

.light-blue {
  background-color: #8fcae7;
  color: #000;
}

.light-blue-tint-1 {
  background-color: #ddeff8;
  color: #000;
}

.light-blue-tint-2 {
  background-color: #eef7fb;
  color: #000;
}

.light-blue-tint-colored-text {
  color: #324751;
}

.test-cases article {
  /* Header */
  /* Side menu */
  /* Footer */
}
.test-cases article > header {
  /* Test case specific styling */
}
.test-cases article > header + header {
  margin-top: 1rem;
}
.test-cases article > header + header:last-of-type {
  margin-bottom: 1rem;
}
.test-cases article.test-case-sidemenu > main, .test-cases article.test-case-sidemenu-collapsible > main {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  position: relative;
  border: 1px solid #e6e6e6;
}
.test-cases article.test-case-sidemenu > main.no-js button.sidemenu-toggle, .test-cases article.test-case-sidemenu-collapsible > main.no-js button.sidemenu-toggle {
  display: none;
}
.test-cases article.test-case-sidemenu > main.no-js button.sidemenu-toggle + ul, .test-cases article.test-case-sidemenu-collapsible > main.no-js button.sidemenu-toggle + ul {
  margin-top: 0;
}
.test-cases article > footer {
  margin-top: 1rem;
}
.test-cases article:last-child > footer {
  margin-bottom: 1rem;
}
.test-cases article > section .column-2 p {
  margin: 2%;
}

/* Test classes for testing color contrast */
.color-overview {
  padding-left: 0;
}
.color-overview li {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}
.color-overview li div {
  padding: 0.5rem 1rem;
  width: 100%;
}
@media (min-width: 37.5rem) {
  .color-overview li div {
    width: unset;
    flex-grow: 1;
  }
}
.color-overview.color-block li {
  display: flex;
}
@media (min-width: 50rem) {
  .color-overview.color-block li {
    flex-wrap: nowrap;
    justify-content: space-between;
  }
}
.color-overview.color-block li > div {
  width: 100%;
  display: flex;
}
@media (min-width: 50rem) {
  .color-overview.color-block li > div {
    width: unset;
    flex-wrap: nowrap;
  }
}
.color-overview.color-block li > div > div {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0;
  padding: 0;
  flex-grow: 0;
}
.color-overview.color-block li > div p {
  margin: 0 0 0 0.5rem;
}