/**
 * altijd ingeladen door de minifier
 * moet er dus zijn
 * 
 * ALLEEN dingen inzetten die /overal/ waar moeten zijn
 * 
 * dus niet dbv5 dingen
 * dus niet een standaard grid
 * dus niet een standaard header
 * dus niet een mooie css-reset library
 *
 */


/* ROOT
------------------------------------------------------------------------------*/
:root {
  --common_color--blue: hsl(210, 100%, 45%);
  --common_font: normal normal normal 14px/1.2 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/*===( Banner over de volledige breedte boven in de pagina )==*/
.idd_banner {
  z-index: 10;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  background-color: coral;
  background-image: linear-gradient(135deg, transparent 0%,  hsl(36, 90%, 60%) 100%);
  border-radius: 0 0 50% 50% / 0 0 25px 25px;
  box-shadow: 0 0 6px hsl(36 90% 36% / .3);
  padding: 1em;
  color: white;
  font: var(--common_font);
  font-size: 16px;
  font-family: "Avenir";
  font-weight: 500;
  text-shadow: 0 1px 1px hsl(36 90% 16%);
  text-align: center;
  line-height: normal;
  cursor: default;
}

.idd_banner a {
  color: inherit;
}

.idd_banner u {
 cursor: pointer;
}

/* Staat in requireme.php en wordt dus soms vaker aangeroepen */
.idd_banner:not(:first-child) {
  display: none;
}

/*===( Input )===*/
input[type="text"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="file"],
input[type="date"],
input[type="datetime-local"] {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  min-height: 22px;
  box-sizing: border-box;
  padding: 1px 4px;
  background-color: white;
  border: 1px solid hsl(210, 10%, 70%);
  border-radius: 3px;
  outline: 1px solid transparent;
  color: black;
  font: inherit;
  text-indent: 0;
  cursor: auto;
  transition: border-color 0.2s ease-in-out 0s,
              outline 0.2s ease-in-out 0s;
}

input[type="text"]:hover,
input[type="number"]:hover,
input[type="search"]:hover,
input[type="url"]:hover,
input[type="tel"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="month"]:hover,
input[type="week"]:hover,
input[type="time"]:hover,
input[type="date"]:hover,
input[type="datetime-local"]:hover {
  border-color: var(--common_color--blue);
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="date"]:focus,
input[type="file"]:focus,
input[type="button"]:focus,
input[type="submit"]:focus,
input[type="datetime-local"]:focus {
  border-color: var(--common_color--blue);
  outline: 1px solid var(--common_color--blue);
}

/* .editfield-invalid wordt gezet in common_functions.js als een element niet valideert met laden zodat men wel kan 
   saven */
input.editfield-invalid,
input[type="text"]:invalid,
input[type="number"]:invalid,
input[type="search"]:invalid,
input[type="url"]:invalid,
input[type="tel"]:invalid,
input[type="email"]:invalid,
input[type="password"]:invalid,
input[type="month"]:invalid,
input[type="week"]:invalid,
input[type="time"]:invalid,
input[type="date"]:invalid,
input[type="file"]:invalid,
input[type="datetime-local"]:invalid {
  border-color: red;
  outline-color: red;
}
input[type="radio"].editfield-invalid + label,
input[type="radio"]:invalid + label {
  color: red;
}

input[type="text"][readonly],
input[type="text"][disabled],
input[type="number"][readonly],
input[type="number"][disabled],
input[type="search"][readonly],
input[type="search"][disabled],
input[type="url"][readonly],
input[type="url"][disabled],
input[type="tel"][readonly],
input[type="tel"][disabled],
input[type="email"][readonly],
input[type="email"][disabled],
input[type="password"][readonly],
input[type="password"][disabled],
input[type="month"][readonly],
input[type="month"][disabled],
input[type="week"][readonly],
input[type="week"][disabled],
input[type="time"][readonly],
input[type="time"][disabled],
input[type="date"][readonly],
input[type="date"][disabled],
input[type="datetime-local"][readonly],
input[type="datetime-local"][disabled],
input[type="button"][readonly],
input[type="button"][disabled],
input[type="reset"][readonly],
input[type="reset"][disabled],
input[type="submit"][readonly],
input[type="submit"][disabled] {
  filter: brightness(0.8) grayscale(1) opacity(0.5);
  /* buttons en time-editors moeten niet werken */
  pointer-events: none; 
}

/* apart want ik wil de lijst hierboven compleet houden */
input[type="text"][readonly],
input[type="text"][disabled] {
  /* maar je wil wel copy/paste uit input kunnen doen */
  pointer-events: revert; 
}


/*===( Textarea )===*/
textarea {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  min-height: 22px;
  box-sizing: border-box;
  padding: 1px 4px;
  background-color: white;
  border: 1px solid hsl(210, 10%, 70%);
  border-radius: 3px;
  outline: 1px solid transparent;
  color: black;
  font: inherit;
  white-space: pre-wrap;
  text-indent: 0;
  cursor: auto;
  resize: both;
  transition: border-color 0.2s ease-in-out 0s,
              outline 0.2s ease-in-out 0s;
}

textarea:hover {
  border-color: var(--common_color--blue);
}

textarea:focus {
  border-color: var(--common_color--blue);
  outline: 1px solid var(--common_color--blue);
}

textarea[readonly],
textarea[disabled] {
  border: none;
  box-shadow: inset 0 0 0 1px hsl(210, 10%, 70%);
  filter: brightness(0.8) grayscale(1) opacity(0.5);
  /* deze is discutabel want tinymce moet het niet doen maar zo geen copy/paste met muis (wel met keyboard) */
  pointer-events: none;
}

textarea:invalid {
  border-color: red;
  outline-color: red;
}

/*===( Select )===*/
select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  margin: 0;
  padding: 1px 14px 1px 4px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z'/%3E%3C/svg%3E");
  background-repeat: no-repeat, repeat;
  background-position: right 5px top 50%, 0 0;
  background-size: 8px auto, 100%;
  border: 1px solid hsl(210, 10%, 70%);
  border-radius: 3px;
  outline: 1px solid transparent;
  color: black;
  text-indent: 0;
  cursor: pointer;
  transition: border-color 0.2s ease-in-out 0s,
              outline 0.2s ease-in-out 0s;
}

select:hover {
  border-color: var(--common_color--blue);
}

select:active {
  border-color: var(--common_color--blue);
  outline: 1px solid var(--common_color--blue);
}

select:focus {
  border-color: var(--common_color--blue);
  outline: 1px solid var(--common_color--blue);
}

/* Invalid select, rood maken */
select.editfield-invalid,
select:invalid {
  border-color: red;
  outline-color: red;
}

select[readonly],
select[disabled] {
  filter: brightness(0.8) grayscale(1) opacity(0.5);
  pointer-events: none;
}

/* of een inputveld of select of textarea veranderd is sinds het form geladen is 
   NIET rood of oranje maken, dat is error 
   niet inset maken want dat werkt niet op checkbox of input type=submit
*/
.fcChanged {
  box-shadow: 0 0 3px 2px hsl(120deg 33% 50% / 50%) !important;
}

/* waarschuwing op andere submits dat een inputveld of select of textarea in een ander form veranderd 
   is sinds het form geladen is 
*/
.fcOtherChangedWarningForSubmit {
  box-shadow: 0 0 3px 2px hsl(0deg 33% 50% / 75%) !important;
  filter: blur(0.5px) opacity(75%);
}

/* Default button opmaak */
.idd_button,
.idd_button:is(:hover, :active, :visited, [readonly], [disabled]) {
  position: relative;

  display: inline-flex;
  justify-content: center;
  align-items: center;

  width: fit-content;
  min-height: 24px;
  height: fit-content;

  margin: 0;
  padding: 0 1em 0.01em;
  box-sizing: border-box;

  background-color: var(--common_color--blue);
  border: 1px solid hsl(210, 100%, 35%);
  border-radius: 4px;
  box-shadow: 0 2px 3px -2px hsla(210, 100%, 10%, 0.8);
  outline: 0;

  color: white;
  font: var(--common_font);
  text-shadow: 0 0 2px hsl(210, 100%, 25%);
  text-align: center;
  text-decoration: none;

  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease-in-out 0s;
  -webkit-appearance: none;
}

.idd_button:is(:hover, :active) {
  background-color: hsl(210, 100%, 55%);
  box-shadow: 0 2px 3px -2px hsla(210, 100%, 10%, 0.8),
              inset 0 0 0 1px hsl(210, 100%, 45%);
}

.idd_button:active {
  transform: scale(0.95);
}

.idd_button:is([readonly], [disabled]) {
  pointer-events: none;
  filter: grayscale(1) opacity(0.5);
}


/*===( Clear text-inputs )===*/
/* Kruisje aan het einde van een text-input voor het leegmaken van diezelfde text-input */
input[type="text"] + .editfield-text-clear {
  position: absolute;
  width: 1.5em;
  height: 1.5em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: .2em 0 0 -18px;
  background-color: transparent;
  border-radius: 2px;
  color: transparent;
  font-size: .8em;
  cursor: pointer;
  user-select: none;
  transition: all .1s ease-in-out 0s;
}

/* Alleen voor safari */
@media not all and (min-resolution: .001dpcm) {
  @supports (-webkit-appearance: none) {
    input[type="text"] + .editfield-text-clear {
      margin: .45em 0 0 -20px;
    }
  }
}

/* Maak kruisje zichtbaar */
input[type="text"]:hover + .editfield-text-clear {
  background-color: white;
  color: hsla(0, 0%, 0%, .5);
}

/* Maak kruisje rood en bold */
input[type="text"] + .editfield-text-clear:hover {
  background-color: white;
  color: hsl(0, 70%, 50%);
  font-weight: bold;
}

/* Indruk-effect */
input[type="text"] + .editfield-text-clear:active {
  transform: scale(.5);
}


/* Blijkbaar niet standaard */
input[type="file"].editfield-file {
  cursor: pointer;
}

.editfield-file-message {
	font-size: smaller;
	font-style: italic;
}

/* == editfield preview image == */
.idd_file-preview-container {
  margin: 0;
  padding: 0;
}

/* Helemaal weg als er niks is om af te beelden */
.idd_file-preview-container:empty {
  display: none;
}

/** Waar het plaatje + de titel in zit **/
.idd_file-preview {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  vertical-align: middle;
  height: 50px;
  background-color: hsl(210deg 10% 98%);
  border-radius: 4px;
  box-shadow: inset 0 -2px hsl(210deg 10% 85%),
                    0 -2px hsl(210deg 10% 98% / .8),
                    0 0px 0 2px hsl(0deg 0% 75%);
  margin: 6px 8px 2px 0px;
  padding: 2px 8px 4px 2px;
  box-sizing: border-box;
  color: black;
  font-size: 12px;
  font-family: "Avenir";
  font-weight: 500;
  white-space: nowrap;
}

/** Titel van bestand **/
.idd_file-preview-content {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  font: inherit;
  white-space: nowrap;
}

/** Standaard icon **/
.idd_file-preview-icon {
  width: 15px;
  margin-left: 5px;
  font-size: 22px;
}

/** Plaatje zelf **/
.idd_file-preview-image {
  min-width: 20px;
  max-height: 100%;
  border-radius: 4px;
  box-shadow: 0 .5px 0 1px hsl(210deg 10% 0% / .1);
}

.idd_file-preview-image:hover {
  all: unset;
  z-index: 10;
  position: absolute;
  max-height: 50vh;
  box-shadow: 0 1px 3px hsl(210deg 10% 0% / .3);
  border: .1px solid hsl(210deg 10% 95%);
  border-radius: 1px;
}

/*===( Readonly/disabled labels )===*/
/** Ook de mogelijke label tekst meenemen **/
.readonly-label,
input[readonly] + label,
input[disabled] + label {
  opacity: .25;
  pointer-events: none;
}

/**
 * Geeft checkbox en radiobutton altijd 3px ruimte rondom. (In default is dit ook zo ongeveer)
 * Dit zodat er geen andere elementen zoals een label aan vastgeplakt zit.
 **/
input[type='checkbox'],
input[type='radio'] {
  margin: 3px;
}

/**
 * Extra ruimte achter label voor als er inline nog een element achter wordt gezet,
 * zo blijft het duidelijk gescheiden van elkaar.
 **/
input[type='checkbox'] + label,
input[type='radio'] + label {
  margin-right: 3px;
}

/**
 * Default wordt er bij een hover geen feedback gegeven met de cursor, maar dit werkt wel fijn.
 * Bij radiobutton doen we dit /niet/ als hij checked is, omdat hij dan niet meer klikbaar is.
 **/
input[type='checkbox'],
input[type='radio']:not(:checked),
input[type='checkbox'] + label,
input[type='radio']:not(:checked) + label {
  cursor: pointer;
}


/* .editfield-debugHighlight
------------------------------------------------------------------------------*/
/* Geeft in debug=1 aan welke elementen een editfield zijn */
:is(input:not([type="button"], [type="reset"], [type="submit"]), textarea, select).editfield-debugHighlight,
input:is([type="checkbox"], [type="radio"]).editfield-debugHighlight + label {
  border-style: dotted;
  border-color: red blue blue red;
}


/* .editfield-debugNoDBTable
------------------------------------------------------------------------------*/
/* Geeft in debug=1 aan bij welke elementen geen dbTable/dbField gezet is */
:is(input:not([type="button"], [type="reset"], [type="submit"]), textarea, select).editfield-debugNoDBTable,
input:is([type="checkbox"], [type="radio"]).editfield-debugNoDBTable + label {
  animation-name: rotatingBorder;
  animation-duration: 1s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-timing-function: step-start;
}


/* idd_print_r
 * staat hier omdat deze twee karakters in javascript neerzetten ingewikkeld is
------------------------------------------------------------------------------*/
/* uitgeklapt */
.idd_debug-content li[data-iddprintr-string] {
	list-style-type: "\1F425";
}

/* ingeklapt */
.idd_debug-content li[data-iddprintr-string].collapsed {
	list-style-type: "\1F423";
}

/* Draaiende border animatie
------------------------------------------------------------------------------*/
/* 0% en 100% zijn nodig om mogelijk overschijving van andere css te voorkomen */
@keyframes rotatingBorder {

  0% {
    border-style: dotted;
    border-color:  red blue blue red;
  }

  25% {
    border-style: dotted;
    border-color:  red red blue blue;
  }
  
  50% {
    border-style: dotted;
    border-color: blue red red blue;
  }
  
  75% {
    border-style: dotted;
    border-color: blue blue red red;
  }

  100% {
    border-style: dotted;
    border-color:  red blue blue red;
  }

}

/* del/ins met standaard kleurtjes */
del,
ins {
    text-decoration: none;
    margin: 0 0.05em;
}

del {
    background-color: #f77;
}

ins {
    background-color: #7f7;
}

/* --------- print styling --------- */

@media print {

    .idd_debugprint {
        display: none;
    }
    select.text {
        background-image: none;
        background-color: transparent;
        border: none;
    }

    input.text.editfield-text {
        border: none;
        background-color: transparent;
    }

}

/* styles that are shared between vademecum and tinymce

/* tables pasted to tinymce contain p tags for each cell */
table th > p,
table td > p {
	margin: 0 !important;
}

thead > td,
.tableHeader, .tableHeader td, .tableHeader th{
	background-color: #344d77 !important;
	border-right: 0pt !important;
	border-bottom: 0pt !important;
	color: #fff !important;
	border: 1pt solid #fff;
	padding: 7px;
}

thead > td p,
.tableHeader p{
	color: #fff !important;
}
.tableTotaal, .tableTotaal p{
	background-color: #D8E2F4 !important;
	color: #254882 !important;
	font-weight: 600;
}

/*!
 * Bootstrap v3.3.5 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

/*!
 * Generated using the Bootstrap Customizer (http://getbootstrap.com/customize/?id=9b1f2021e027ef5e798c)
 * Config saved to config.json and https://gist.github.com/9b1f2021e027ef5e798c
 */
/*!
 * Bootstrap v3.3.6 (http://getbootstrap.com)
 * Copyright 2011-2015 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.container {
	margin-right: auto;
	margin-left: auto;
	padding-left: 15px;
	padding-right: 15px;
}
@media (min-width: 768px) {
	.container {
		width: 750px;
	}
}
@media (min-width: 992px) {
	.container {
		width: 970px;
	}
}
@media (min-width: 1200px) {
	.container {
		width: 1170px;
	}
}
.container-fluid {
	margin-right: auto;
	margin-left: auto;
	padding-left: 15px;
	padding-right: 15px;
}
.row {
	margin-left: -15px;
	margin-right: -15px;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, 
.col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, 
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, 
.col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, 
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
	position: relative;
	min-height: 1px;
	padding-left: 15px;
	padding-right: 15px;
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, 
.col-xs-10, .col-xs-11, .col-xs-12 {
	float: left;
}
.col-xs-12 {
	width: 100%;
}
.col-xs-11 {
	width: 91.66666667%;
}
.col-xs-10 {
	width: 83.33333333%;
}
.col-xs-9 {
	width: 75%;
}
.col-xs-8 {
	width: 66.66666667%;
}
.col-xs-7 {
	width: 58.33333333%;
}
.col-xs-6 {
	width: 50%;
}
.col-xs-5 {
	width: 41.66666667%;
}
.col-xs-4 {
	width: 33.33333333%;
}
.col-xs-3 {
	width: 25%;
}
.col-xs-2 {
	width: 16.66666667%;
}
.col-xs-1 {
	width: 8.33333333%;
}
.col-xs-pull-12 {
	right: 100%;
}
.col-xs-pull-11 {
	right: 91.66666667%;
}
.col-xs-pull-10 {
	right: 83.33333333%;
}
.col-xs-pull-9 {
	right: 75%;
}
.col-xs-pull-8 {
	right: 66.66666667%;
}
.col-xs-pull-7 {
	right: 58.33333333%;
}
.col-xs-pull-6 {
	right: 50%;
}
.col-xs-pull-5 {
	right: 41.66666667%;
}
.col-xs-pull-4 {
	right: 33.33333333%;
}
.col-xs-pull-3 {
	right: 25%;
}
.col-xs-pull-2 {
	right: 16.66666667%;
}
.col-xs-pull-1 {
	right: 8.33333333%;
}
.col-xs-pull-0 {
	right: auto;
}
.col-xs-push-12 {
	left: 100%;
}
.col-xs-push-11 {
	left: 91.66666667%;
}
.col-xs-push-10 {
	left: 83.33333333%;
}
.col-xs-push-9 {
	left: 75%;
}
.col-xs-push-8 {
	left: 66.66666667%;
}
.col-xs-push-7 {
	left: 58.33333333%;
}
.col-xs-push-6 {
	left: 50%;
}
.col-xs-push-5 {
	left: 41.66666667%;
}
.col-xs-push-4 {
	left: 33.33333333%;
}
.col-xs-push-3 {
	left: 25%;
}
.col-xs-push-2 {
	left: 16.66666667%;
}
.col-xs-push-1 {
	left: 8.33333333%;
}
.col-xs-push-0 {
	left: auto;
}
.col-xs-offset-12 {
	margin-left: 100%;
}
.col-xs-offset-11 {
	margin-left: 91.66666667%;
}
.col-xs-offset-10 {
	margin-left: 83.33333333%;
}
.col-xs-offset-9 {
	margin-left: 75%;
}
.col-xs-offset-8 {
	margin-left: 66.66666667%;
}
.col-xs-offset-7 {
	margin-left: 58.33333333%;
}
.col-xs-offset-6 {
	margin-left: 50%;
}
.col-xs-offset-5 {
	margin-left: 41.66666667%;
}
.col-xs-offset-4 {
	margin-left: 33.33333333%;
}
.col-xs-offset-3 {
	margin-left: 25%;
}
.col-xs-offset-2 {
	margin-left: 16.66666667%;
}
.col-xs-offset-1 {
	margin-left: 8.33333333%;
}
.col-xs-offset-0 {
	margin-left: 0%;
}
@media (min-width: 768px) {
	.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9,
	.col-sm-10, .col-sm-11, .col-sm-12 {
		float: left;
	}
	.col-sm-12 {
		width: 100%;
	}
	.col-sm-11 {
		width: 91.66666667%;
	}
	.col-sm-10 {
		width: 83.33333333%;
	}
	.col-sm-9 {
		width: 75%;
	}
	.col-sm-8 {
		width: 66.66666667%;
	}
	.col-sm-7 {
		width: 58.33333333%;
	}
	.col-sm-6 {
		width: 50%;
	}
	.col-sm-5 {
		width: 41.66666667%;
	}
	.col-sm-4 {
		width: 33.33333333%;
	}
	.col-sm-3 {
		width: 25%;
	}
	.col-sm-2 {
		width: 16.66666667%;
	}
	.col-sm-1 {
		width: 8.33333333%;
	}
	.col-sm-pull-12 {
		right: 100%;
	}
	.col-sm-pull-11 {
		right: 91.66666667%;
	}
	.col-sm-pull-10 {
		right: 83.33333333%;
	}
	.col-sm-pull-9 {
		right: 75%;
	}
	.col-sm-pull-8 {
		right: 66.66666667%;
	}
	.col-sm-pull-7 {
		right: 58.33333333%;
	}
	.col-sm-pull-6 {
		right: 50%;
	}
	.col-sm-pull-5 {
		right: 41.66666667%;
	}
	.col-sm-pull-4 {
		right: 33.33333333%;
	}
	.col-sm-pull-3 {
		right: 25%;
	}
	.col-sm-pull-2 {
		right: 16.66666667%;
	}
	.col-sm-pull-1 {
		right: 8.33333333%;
	}
	.col-sm-pull-0 {
		right: auto;
	}
	.col-sm-push-12 {
		left: 100%;
	}
	.col-sm-push-11 {
		left: 91.66666667%;
	}
	.col-sm-push-10 {
		left: 83.33333333%;
	}
	.col-sm-push-9 {
		left: 75%;
	}
	.col-sm-push-8 {
		left: 66.66666667%;
	}
	.col-sm-push-7 {
		left: 58.33333333%;
	}
	.col-sm-push-6 {
		left: 50%;
	}
	.col-sm-push-5 {
		left: 41.66666667%;
	}
	.col-sm-push-4 {
		left: 33.33333333%;
	}
	.col-sm-push-3 {
		left: 25%;
	}
	.col-sm-push-2 {
		left: 16.66666667%;
	}
	.col-sm-push-1 {
		left: 8.33333333%;
	}
	.col-sm-push-0 {
		left: auto;
	}
	.col-sm-offset-12 {
		margin-left: 100%;
	}
	.col-sm-offset-11 {
		margin-left: 91.66666667%;
	}
	.col-sm-offset-10 {
		margin-left: 83.33333333%;
	}
	.col-sm-offset-9 {
		margin-left: 75%;
	}
	.col-sm-offset-8 {
		margin-left: 66.66666667%;
	}
	.col-sm-offset-7 {
		margin-left: 58.33333333%;
	}
	.col-sm-offset-6 {
		margin-left: 50%;
	}
	.col-sm-offset-5 {
		margin-left: 41.66666667%;
	}
	.col-sm-offset-4 {
		margin-left: 33.33333333%;
	}
	.col-sm-offset-3 {
		margin-left: 25%;
	}
	.col-sm-offset-2 {
		margin-left: 16.66666667%;
	}
	.col-sm-offset-1 {
		margin-left: 8.33333333%;
	}
	.col-sm-offset-0 {
		margin-left: 0%;
	}
}
@media (min-width: 992px) {
	.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, 
	.col-md-10, .col-md-11, .col-md-12 {
		float: left;
	}
	.col-md-12 {
		width: 100%;
	}
	.col-md-11 {
		width: 91.66666667%;
	}
	.col-md-10 {
		width: 83.33333333%;
	}
	.col-md-9 {
		width: 75%;
	}
	.col-md-8 {
		width: 66.66666667%;
	}
	.col-md-7 {
		width: 58.33333333%;
	}
	.col-md-6 {
		width: 50%;
	}
	.col-md-5 {
		width: 41.66666667%;
	}
	.col-md-4 {
		width: 33.33333333%;
	}
	.col-md-3 {
		width: 25%;
	}
	.col-md-2 {
		width: 16.66666667%;
	}
	.col-md-1 {
		width: 8.33333333%;
	}
	.col-md-pull-12 {
		right: 100%;
	}
	.col-md-pull-11 {
		right: 91.66666667%;
	}
	.col-md-pull-10 {
		right: 83.33333333%;
	}
	.col-md-pull-9 {
		right: 75%;
	}
	.col-md-pull-8 {
		right: 66.66666667%;
	}
	.col-md-pull-7 {
		right: 58.33333333%;
	}
	.col-md-pull-6 {
		right: 50%;
	}
	.col-md-pull-5 {
		right: 41.66666667%;
	}
	.col-md-pull-4 {
		right: 33.33333333%;
	}
	.col-md-pull-3 {
		right: 25%;
	}
	.col-md-pull-2 {
		right: 16.66666667%;
	}
	.col-md-pull-1 {
		right: 8.33333333%;
	}
	.col-md-pull-0 {
		right: auto;
	}
	.col-md-push-12 {
		left: 100%;
	}
	.col-md-push-11 {
		left: 91.66666667%;
	}
	.col-md-push-10 {
		left: 83.33333333%;
	}
	.col-md-push-9 {
		left: 75%;
	}
	.col-md-push-8 {
		left: 66.66666667%;
	}
	.col-md-push-7 {
		left: 58.33333333%;
	}
	.col-md-push-6 {
		left: 50%;
	}
	.col-md-push-5 {
		left: 41.66666667%;
	}
	.col-md-push-4 {
		left: 33.33333333%;
	}
	.col-md-push-3 {
		left: 25%;
	}
	.col-md-push-2 {
		left: 16.66666667%;
	}
	.col-md-push-1 {
		left: 8.33333333%;
	}
	.col-md-push-0 {
		left: auto;
	}
	.col-md-offset-12 {
		margin-left: 100%;
	}
	.col-md-offset-11 {
		margin-left: 91.66666667%;
	}
	.col-md-offset-10 {
		margin-left: 83.33333333%;
	}
	.col-md-offset-9 {
		margin-left: 75%;
	}
	.col-md-offset-8 {
		margin-left: 66.66666667%;
	}
	.col-md-offset-7 {
		margin-left: 58.33333333%;
	}
	.col-md-offset-6 {
		margin-left: 50%;
	}
	.col-md-offset-5 {
		margin-left: 41.66666667%;
	}
	.col-md-offset-4 {
		margin-left: 33.33333333%;
	}
	.col-md-offset-3 {
		margin-left: 25%;
	}
	.col-md-offset-2 {
		margin-left: 16.66666667%;
	}
	.col-md-offset-1 {
		margin-left: 8.33333333%;
	}
	.col-md-offset-0 {
		margin-left: 0%;
	}
}
@media (min-width: 1200px) {
	.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, 
	.col-lg-10, .col-lg-11, .col-lg-12 {
		float: left;
	}
	.col-lg-12 {
		width: 100%;
	}
	.col-lg-11 {
		width: 91.66666667%;
	}
	.col-lg-10 {
		width: 83.33333333%;
	}
	.col-lg-9 {
		width: 75%;
	}
	.col-lg-8 {
		width: 66.66666667%;
	}
	.col-lg-7 {
		width: 58.33333333%;
	}
	.col-lg-6 {
		width: 50%;
	}
	.col-lg-5 {
		width: 41.66666667%;
	}
	.col-lg-4 {
		width: 33.33333333%;
	}
	.col-lg-3 {
		width: 25%;
	}
	.col-lg-2 {
		width: 16.66666667%;
	}
	.col-lg-1 {
		width: 8.33333333%;
	}
	.col-lg-pull-12 {
		right: 100%;
	}
	.col-lg-pull-11 {
		right: 91.66666667%;
	}
	.col-lg-pull-10 {
		right: 83.33333333%;
	}
	.col-lg-pull-9 {
		right: 75%;
	}
	.col-lg-pull-8 {
		right: 66.66666667%;
	}
	.col-lg-pull-7 {
		right: 58.33333333%;
	}
	.col-lg-pull-6 {
		right: 50%;
	}
	.col-lg-pull-5 {
		right: 41.66666667%;
	}
	.col-lg-pull-4 {
		right: 33.33333333%;
	}
	.col-lg-pull-3 {
		right: 25%;
	}
	.col-lg-pull-2 {
		right: 16.66666667%;
	}
	.col-lg-pull-1 {
		right: 8.33333333%;
	}
	.col-lg-pull-0 {
		right: auto;
	}
	.col-lg-push-12 {
		left: 100%;
	}
	.col-lg-push-11 {
		left: 91.66666667%;
	}
	.col-lg-push-10 {
		left: 83.33333333%;
	}
	.col-lg-push-9 {
		left: 75%;
	}
	.col-lg-push-8 {
		left: 66.66666667%;
	}
	.col-lg-push-7 {
		left: 58.33333333%;
	}
	.col-lg-push-6 {
		left: 50%;
	}
	.col-lg-push-5 {
		left: 41.66666667%;
	}
	.col-lg-push-4 {
		left: 33.33333333%;
	}
	.col-lg-push-3 {
		left: 25%;
	}
	.col-lg-push-2 {
		left: 16.66666667%;
	}
	.col-lg-push-1 {
		left: 8.33333333%;
	}
	.col-lg-push-0 {
		left: auto;
	}
	.col-lg-offset-12 {
		margin-left: 100%;
	}
	.col-lg-offset-11 {
		margin-left: 91.66666667%;
	}
	.col-lg-offset-10 {
		margin-left: 83.33333333%;
	}
	.col-lg-offset-9 {
		margin-left: 75%;
	}
	.col-lg-offset-8 {
		margin-left: 66.66666667%;
	}
	.col-lg-offset-7 {
		margin-left: 58.33333333%;
	}
	.col-lg-offset-6 {
		margin-left: 50%;
	}
	.col-lg-offset-5 {
		margin-left: 41.66666667%;
	}
	.col-lg-offset-4 {
		margin-left: 33.33333333%;
	}
	.col-lg-offset-3 {
		margin-left: 25%;
	}
	.col-lg-offset-2 {
		margin-left: 16.66666667%;
	}
	.col-lg-offset-1 {
		margin-left: 8.33333333%;
	}
	.col-lg-offset-0 {
		margin-left: 0%;
	}
}
.clearfix:before,
.clearfix:after,
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after {
	content: " ";
	display: table;
}
.clearfix:after,
.container:after,
.container-fluid:after,
.row:after {
	clear: both;
}
.center-block {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.pull-right {
	float: right !important;
}
.pull-left {
	float: left !important;
}
.hide {
	display: none !important;
}
.show {
	display: block !important;
}
.invisible {
	visibility: hidden;
}
.text-hide {
	font: 0/0 a;
	color: transparent;
	text-shadow: none;
	background-color: transparent;
	border: 0;
}
.hidden {
	display: none !important;
}
.affix {
	position: fixed;
}

/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}
@font-face {
	font-family: "Roboto";
	src: url("/fonts/roboto/Roboto-Regular.woff2") format('woff2'),
	     url("/fonts/roboto/Roboto-Regular.woff") format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: "Roboto-Bold";
	src: url("/fonts/roboto/Roboto-Bold.woff2") format('woff2'),
	     url("/fonts/roboto/Roboto-Bold.woff") format('woff');
	font-weight: bold;
}
* {-webkit-font-smoothing: antialiased;}
body, html {
	margin: 0;
}
img{
	height: auto;
	max-width: 100% !important;
}
.article-section-content td{
	background-color: #e6ecf8;
	padding: 8px;
	border-right: white solid 2pt;
	font-family: 'roboto';
	border-bottom: white solid 2pt;
}

.responsive-table{
	max-width:  100%;
	overflow-x: auto;
	/* dit zou niets moeten doen (right?) maar een <table style='float:right'> in een <div> met deze class wordt na 
	   deze setting wel word-wrapped door de content ('documents'), zie cx 60975, zonder skipt de tekst en staat
	   er in FF47 een boel witruimte */
	display:    initial;
}

.tag{
	margin-right: 5px;
	margin-bottom: 5px;
	color: #FFF;
	display: block;
	float: left;
	padding: 5px;
	font-size: 13px;
	font-weight: bold;
	line-height: 1;
	text-align: center;
	white-space: nowrap;
	border-radius: 0.25em;
}
/* vademecum design */
.wrapper{
	position: relative;
	min-height: 100%;
	width: 100%;
	left: 0;
	-webkit-transition:  left 0.4s ease-in-out;
	-moz-transition:  left 0.4s ease-in-out;
	-ms-transition:  left 0.4s ease-in-out;
	-o-transition:  left 0.4s ease-in-out;
	transition:  left 0.4s ease-in-out;
}
.wrapper.open-sidebar {
	left: 270px;
}
/*Header*/
.header{
	background-color: #d8e2f4;
	width: 100%;
	height: 150px;
	position: relative;
	overflow: hidden;
	border-bottom: 3pt #a7b8d6 solid;
}
.brand{
	font-size: 18pt;
	max-width: 1330px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	margin-top: -115px;
	font-family: "Roboto";
	color: #344d77;
}
.brand a{
	text-decoration: none;
	color: #344d77;
}
.brand a:visited{
	text-decoration: none;
	color: #344d77;
}
.brand span{
	color: #a40000;
}
.search-header{
	font-family: 'Roboto';
	position: absolute;
	max-width: 1330px;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	margin-top: 65px;
}
.search-header form{
	border: 0;
	right: 0;
	position: absolute;
	margin-top: -27px;
	z-index: 10;
}

.search-input{
	font-size: 10pt;
	height: 31px;
	padding: 8px 40px 8px 20px;
	border-top-right-radius: 55px !important; /* overwrite common.css */
	border-bottom-right-radius: 55px !important; /* overwrite common.css */
	border: 0;
	background-color: #344d77;
	color: #d8e2f4;
	display: inline;
}
.search-input:focus{
	outline: none;
}

/*Change search placeholder color*/
.search-input::placeholder {
	color: #d8e2f4;
	opacity: 1;
	font-size: 10pt;
}

.icon-search {
	height: 31px;
	width: 40px;
	padding-top: 6px;
	border: 0;
	position: absolute;
	margin-left: -40px;
	border-left: 1pt #d8e2f4 solid;
	background-color: #182d51;
	border-top-right-radius: 55px;
	border-bottom-right-radius: 55px;
}
/*Menu*/
.nav{
	max-width: 1330px;
	height: 55px;
	background-color: #344d77;
	margin-left: auto;
	margin-right: auto;
	margin-top: 95px;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	overflow: hidden;
	position: relative;
}
#hamburger{
	display: none;
	cursor: pointer;
}
#menu {
	padding: 0;
	padding-top: 0;
	height: 100%;
	margin: 0;
	display: inline;
}
#menu li {
	display: inline;
}
#menu li a {
	background-color: #344d77;
	color: #e3e9f3;
	font-size: 13pt;
	padding: 35px 20px;
	padding-top: 17px;
	display: inline-block;
	font-family: 'Roboto';
	text-decoration: none;
	margin: 0;
	border-right: 1pt #d8e2f4 solid;
	font-weight: 600;
}
#menu li a:hover {
	background-color: #a40000;
	color: #ffffff;
}
#active{
	background-color: #a40000 !important;
	color: #ffffff !important;
}
.login{
	position: absolute;
	right: 0;
	display: inline;
	font-weight: 600;
	border-left: 1pt #d8e2f4 solid;
	padding-top: 17px;
	color: #D8E2F4;
	padding-left: 20px;
	padding-right: 60px;
	height: 100%;
	font-family: 'Roboto';
	font-size: 13pt;
	text-decoration: none;
}
.user{
	padding-right: 20px;
}
#login-icon{
	position: absolute;
	display: inline;
	right: 0;
	height: 40px;
	margin-right: 30px;
	top: 8px;
}
/* search icon button for mobile */
#search-icon-mobile{
	display: none;
}
/*mobile menu*/
@media (max-width: 1025px) {
	.nav{
		height: 50px;
		margin-top: 0;
		border-top-right-radius: 0;
		border-top-left-radius: 0;
	}
	#menu{
		display: none !important;
	}
	.brand{
		text-align: center;
		margin-top: -65px;
		position: absolute;
		width: 100%;
	}
	.login{
		right: initial;
		background-color: #182d51;
		padding-left: 15px;
		padding-right: 45px;
		padding-top: 14px;
		height: 50px;
		border-left: 3pt #344d77 solid;
	}
	.user{
		padding-right: 15px;
	}
	#login-icon{
		margin-right: 15px;
		top: 4px;
	}
	#hamburger{
		background-color: #182d51;
		height: 50px;
		width: 50px;
		display: inline-block;
	}
	.hamburger-icon {
		position: relative;
		display: inline-block;
		width: 26px;
		height: 2px;
		padding-bottom: 13px;
		margin-left: 10px;
		margin-right: 6px;
		margin-top: 16px;
		border-top: 0.2em solid #fff;
		border-bottom: 0.2em solid #fff;
	}
	.hamburger-icon:before {
		content: "";
		position: absolute;
		top: 0.3em;
		left: 0;
		width: 100%;
		border-top: 0.2em solid #fff;
	}
	#hamburger{
		background-color: #182d51;
		height: 50px;
		width: 50px;
		display: inline-block;
	}
	.hamburger-icon {
		position: relative;
		display: inline-block;
		width: 26px;
		height: 2px;
		padding-bottom: 13px;
		margin-left: 10px;
		margin-right: 6px;
		margin-top: 16px;
		border-top: 0.2em solid #fff;
		border-bottom: 0.2em solid #fff;
	}
	.hamburger-icon:before {
		content: "";
		position: absolute;
		top: 0.3em;
		left: 0;
		width: 100%;
		border-top: 0.2em solid #fff;
	}
	#search-icon-mobile{
		display: inline !important;
		position: absolute;
		height: 50px;
		width: 50px;
		padding: 15px;
		right: 0;
		background-color: #182d51;
	}
	.page-content{
		margin-top: 0 !important;
	}

	.icon-search {
		display: inline !important;
		position: absolute;
		height: 50px;
		width: 50px;
		top: 0;
		right: 0;
		padding-top: 6px;
		border: 0;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}
	
	.search-header form{
		margin-top: -65px;
		background-color: #344D77;
		height: 50px;
	}
	.search-input{
		width: 70%;
		margin-top: 12px;
		padding-top: 13px;
		padding-bottom: 13px;
		height: 25px;
		padding-left: 10px;
		color: #182D51 !important;
		background-color: #D8E2F4;
		padding: 6px 20px 6px 20px;
		right: 0;
		border: 0;
		display: none;
		border-radius: 3px !important;
	}

	.search-input::placeholder {
		color: #182D51;
		opacity: 0.7;
	}
}


/* Mobile side menu */
#mobile-sidebar {
	position: absolute;
	background: #d8e2f4;
	width: 270px;
	height: 100%;
	left: -270px;
	z-index: 20;
	box-sizing: border-box;
	box-shadow: inset -10px 0 5px -5px hsla(0, 0%, 0%, .20);
}
#mobile-sidebar ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
#mobile-sidebar ul li {
	margin: 0;
}
#mobile-sidebar ul li a {
	padding: 15px;
	padding-right: 5px;
	color: #254882;
	text-decoration: none !important;
	font-family: 'Roboto';
	font-weight: 700;
	display: block;
	border-bottom: 1px solid #828993;
	-webkit-transition:  background 0.3s ease-in-out;
	-moz-transition:  background 0.3s ease-in-out;
	-ms-transition:  background 0.3s ease-in-out;
	-o-transition:  background 0.3s ease-in-out;
	transition:  background 0.3s ease-in-out;
}
.mobile-parent-btn{
	cursor: pointer;
}

/*Body*/
.background-img{
	width: 100%;
	/*https://www.pexels.com/photo/sky-sunny-clouds-cloudy-3768/*/
	background: url("/images/wolk.jpg") center center no-repeat;
	background-size: cover;
	height: 500px;
	padding-top: 120px;
	padding-right: 10px;
	padding-left: 10px;
}
.inleiding{
	max-width: 1130px;
	padding-bottom: 10px;
	padding-top: 10px;
	border-radius: 12px;
	background-color: rgba(255, 255, 255, 0.62);
	margin-left: auto;
	margin-right: auto;
}
.inleiding h1{
	padding-top: 10px;
	color: #1c4180;
	font-size: 32pt;
	text-align: center;
	font-weight: 400;
	font-family: "Roboto";
}
.inleiding-inhoud{
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	font-size: 14pt;
	font-family: "Roboto";
	font-weight: lighter;
	line-height: 160%;
}
@media (max-width: 700px) {
	.inleiding h1{
		font-size: 28pt;
	}
	.inleiding-inhoud{
		font-size: 12pt;
	}
}
@media (max-width: 450px) {
	.inleiding h1{
		font-size: 28pt;
	}
	.inleiding-inhoud{
		font-size: 12pt;
	}
}
.home-information{
	max-width: 1350px;
	margin-left: auto;
	margin-right: auto;
	margin-top: -60px;
}
.home-information .row{
	margin-right: 0;
	margin-left: 0;
}
/* hier geen height, want dan gaat IE11 stuk */
.content-section{
	background-color: #D8E2F4;
	width: 99%;
	overflow: hidden;
	margin-right: auto;
	margin-left: auto;
	border-radius: 7px;
	margin-bottom: 10px;
	position: relative;
}
.home-information .content-section{
	min-height: 400px;
}
.home-information .content-links li{
	padding-right: 5px;
}
.content-section a{
	text-decoration: none;
}
.content-section h1{
	text-decoration: none;
	font-family: "Roboto";
	font-weight: 600;
	color: #254882;
	font-size: 24pt;
	padding: 20px;
	padding-top: 0;
	margin-top: 10px;
}
.content-section h2{
	font-family: "Roboto";
	font-weight: 600;
	margin-top: -40px;
	font-size: 11pt;
	color: #254882;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 0;
}
.content-links{
	margin-top: 10px;
	list-style-type: none;
	padding: 0;
	width: 100%;
	margin-bottom: 5px;
	display: none;
}
.content-links li a {
	color: #344d77;
}
.content-links li{
	font-family: "Roboto";
	position: relative;
	font-weight: 400;
	font-size: 12pt;
	margin-bottom: 6px;
	padding: 7px;
	padding-left: 20px;
	background-color: #e6ecf8;
	padding-right: 50px;
	color: #344d77;
}
.content-links-home{
	list-style-type: none;
	padding: 0;
	width: 100%;
	margin-bottom: 5px;
}
.content-links-home li a {
	color: #344d77;
}
.content-links-home li{
	font-family: "Roboto";
	position: relative;
	font-weight: 400;
	font-size: 12pt;
	margin-bottom: 6px;
	padding: 7px;
	padding-left: 20px;
	background-color: #e6ecf8;
	padding-right: 50px;
	color: #344d77;
}
.arrow-down{
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
	position: absolute;
	margin-right: 0;
	margin-top: 1px;
	right: 0;
	top: 0;
	transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	-webkit-transition: -webkit-transform 1s;
	transition: -webkit-transform 1s;
	transition: transform 1s;
	transition: transform 1s, -webkit-transform 1s;
}
.mobile-sub-parent .arrow-down{
	margin-top: 15px;
}
/*footer*/
.footer{
	width: 100%;
	height: 95px;
	background-color: #344d77;
	margin-top: 30px;
	color: #FFF;
	padding-top: 20px;
	font-size: 11pt;
	bottom: 0;
}
.footer-info{
	max-width: 1350px;
	margin-left: auto;
	margin-right: auto;
}
.footer a{
	text-decoration: none;
	color: #FFF;
	font-family: 'Roboto';
	font-size: 11pt;
	font-weight: 300;
}
.page-content {
	position: relative;
	margin-top: 100px;
	max-width: 1350px;
	margin-right: auto;
	margin-left: auto;
	overflow: auto;
}
@media (max-width: 1350px){
	.page-content {
		padding: 10px;
	}
	.article{
		padding-right: 10px !important;
	}
	.footer-info{
		padding-left: 10px;
	}
	.brand{
		padding-left: 10px;
	}
	.search-header{
		margin-right: 10px;
	}
}
/* Breadcrumbs */
.breadcrumb {
	list-style: none;
	font: 14px 'roboto';
	overflow: hidden;
	margin-left: -40px;
}
.breadcrumb li {
	float: left;
	padding-right: 5px;
	padding-bottom: 5px;
}
.breadcrumb li a {
	color: #FFF;
	text-decoration: none;
	font-weight: 600;
	padding: 3px 0 3px 55px;
	background: #344d77;
	position: relative;
	display: block;
	float: left;
	padding-left: 12px;
	padding-right: 3px;
	height: 24px;
}
.breadcrumb li a:after {
	content: " ";
	display: block;
	width: 0;
	height: 0;
	border-top: 14px solid transparent;
	border-bottom: 14px solid transparent;
	border-left: 12px solid #344d77;
	position: absolute;
	top: 25%;
	margin-top: -9px;
	left: 99%;
	z-index: 4;
}
.breadcrumb li a:before {
	content: " ";
	display: block;
	width: 0;
	height: 0;
	border-top: 14px solid transparent;
	border-bottom: 14px solid transparent;
	border-left: 12px solid white;
	position: absolute;
	top: 60%;
	margin-top: -17px;
	margin-left: -14px;
	z-index: 2;
}

/* 'u bevindt zich hier' */
.breadcrumb li:first-child a {
	color:                     #6c6c6c;
	background-color:          #E4E4E4;
	padding-left:              3px;
	border-top-left-radius:    2px;
	border-bottom-left-radius: 2px;
}

.breadcrumb li:first-child a:after {
	border-left-color: #e4e4e4;
 }

/* tussenliggers komen uit default*/

/* de laatste */
.breadcrumb li:last-child a {
	background:                 #a40000;
	border-top-right-radius:    5px;
	border-bottom-right-radius: 5px;
}

.breadcrumb li:last-child a:after {
	border-left-color: transparent;
}

@media (max-width: 400px) {
	.breadcrumb{
		font: 10px 'roboto';
	}
	.breadcrumb li a {
		height: auto;
	}
	.breadcrumb li a:before {
		border-top:    11px solid transparent;
		border-bottom: 11px solid transparent;
		border-left:   11px solid white;
		margin-top:    -12px;
	}
	.breadcrumb li a:after {
		border-top:    9px solid transparent;
		border-bottom: 9px solid transparent;
		border-left:   7px solid #344d77;
		margin-top:    -4px;
		left: 100%;
	}
	.sub-parent-btn{
		font-size: 8pt !important;
	}
}
.side-pageContent{
	width: 27%;
	min-width: 300px;
	float: left;
	margin-top: 20px;
}
.side-content{
	height: initial;
}
.expand-content{
	list-style-type: none;
	padding: 0;
	width: 100%;
	margin-bottom: 0;
	position: relative;
	bottom: 0;
}
.expand-content li{
	font-family: "Roboto";
	font-weight: 400;
	font-size: 12pt;
	height: 40px;
	padding: 7px;
	padding-left: 20px;
	background-color: #e6ecf8;
	padding-right: 50px;
	color: #344d77;
}
.expand-content .arrow-down-side{
	cursor: pointer;
}
.extend-child{
	margin-left: auto !important;
	margin-right: auto !important;
	left: 0;
	right: 0;
}
.article{
	position: relative;
	font-family: 'Roboto';
	padding-right: 10px;
	width: 70%;
	float: right;
}
.article h1{
	color: #254882;
}
.article h3{
	font-family: 'Roboto-Bold';
	font-size: 25pt;
	color: #254882;
}
.article h2{
	font-family: 'Roboto-Bold';
	font-size: 25pt;
	color: #254882;
}
.article h2 span{
	font-size: 12pt;
	font-family: 'Roboto';
}
.article p{
	color: #000;
}
.article hr{
	margin-top: 20px;
}
/* to prevent overlapping the icons by a p element, underneath the h1 article */
.sections-list p{
	margin-left: 20px;
}
.tags a{
	text-decoration: none;
}
.article p #section-up-img{
	color: #254882;
	left: 0;
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
}
.article-section{
	font-family: "Roboto";
	padding-top: 20px;
	font-size: 11pt;
	font-weight: lighter;
	padding-bottom: 10px;
}
.article-section h2{
	color: #254882;
}
.article-section-header{
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
	margin-bottom: 5px;
	padding-right: 50px;
	position: relative;
	font-size: 18pt;
	background-color: #D8E2F4;
	color: #254882;
	cursor: pointer;
}
.article .tag{
	font-family: 'Roboto';
	font-weight: lighter;
	background-color: #254882;
	padding: 7px;
	padding-left: 10px;
	padding-right: 10px;
}
.article .tag:hover{
	background-color: #a40000;
}
.arrow-section-header{
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
	position: absolute;
	margin-right: 15px;
	margin-top: 5px;
	right: 0;
	top: 0;
	transform-origin: 50% 50%;
	/* smooth transition between different rotate degrees (smooth animation)*/
	-ms-transform-origin: 50% 50%;
	-webkit-transition: -webkit-transform 1s;
	transition: -webkit-transform 1s;
	transition: transform 1s;
	transition: transform 1s, -webkit-transform 1s;
}

.section-go-top{
	text-decoration: none;
	position: relative;
	padding-top: 10px;
	text-align: right;
	display: block;
	padding-right: 25px;
	color: #254882;
}
#section-up-img{
	position: absolute;
	margin-top: -2px;
}
.col-md-3 .content-section > .content-links{
	display: block;
}
@media (max-width: 991px){
	/* change height of content sections in homepage, because content sections on mobile are minimized */
	.home-information .content-section{
		min-height: 100% !important;
	}
	.home-information .content-section .content-links{
		display: none;
	}
	.inleiding-inhoud{
		font-size: 12pt;
	}
	.content-links-home{
		display: none;
	}
	.background-img{
		height: 365px;
		padding-top: 35px;
	}
}
@media (min-width: 991px){
	.home-information .expand-content{
		display: none;
	}
.col-md-3 .content-section > .content-links{
		display: block;
	}
}
@media (max-width: 1025px){
	.side-pageContent{
		display: none;
	}
	.article{
		position: relative;
		width: 100%;
		padding-right: 0 !important;
	}
	.page-content{
		padding: 10px;
	}
}
@media (max-width: 600px){
	.article h2{
		font-size: 20pt;
	}
	.article h1{
		font-size: 19pt;
	}
	.article h2 span{
		font-size: 12pt;
	}
	.article{
		font-size: 11pt;
	}
	.article-section-header{
		font-size: 12pt;
		height: inherit;
		padding: 10px;
		padding-right: 50px;
	}
	.article-section{
		font-size: 10pt;
	}
	.article h2{
		font-size: 18pt;
	}
	.inleiding-inhoud{
		font-size: 10pt;
	}
}

@media (max-width: 767px) {
	.home-information{
		margin-top: 30px;
	}
}
.sub-content-links{
	display: none;
}
.mobile-sub-parent{
	font-size: 11pt !important;
}
.mobile-sub-parent .content-links .sub-parent a{
	border: 0pt !important;
	padding-left: 5px !important;
	font-size: 9pt;
}
.mobile-sub-parent .sub-parent .content-links li{
	font-size: 9pt;
}
.sub-parent{
	font-size: 11pt !important;
	padding-right: 35px !important;
}
.sub-parent li{
	padding-left: 10px;
	padding-right: 8px !important;
}
.sub-parent li .arrow-down{
	margin-right: -20px;
}
.arrow-btn {
	cursor: pointer;
}
.arrow-right {
	position: absolute;
	left: 0;
	padding-bottom: 0;
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
}
.arrow-down-side{
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
}
/* Largest dropdown icon of content section, animate */
.parent-down{
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
}
/* Arrow animate to pointing upwards */
.arrow-down-to-up{
	-ms-transform: rotate(-90deg) !important;
	transform: rotate(-90deg) !important;
}

.article-section.opened .arrow-section-header {
	-ms-transform: rotate(-90deg) !important;
	transform: rotate(-90deg) !important;
}

.sub-content-links li{
	font-size: 12pt;
	font-weight: 100;
	padding-left: 20px;
	padding-right: 5px;
}
.sub-parent-btn{
	text-decoration:none;
}
.sub-parent-btn:active{
	text-decoration: none;
	color: #344d77;
}
.sub-parent-btn:visited{
	text-decoration: none;
	color: #344d77;
}
.sub-active{
	background-color: #254882 !important;
	color: #FFF !important;
	margin-left: -20px;
	margin-right: -35px;
}
.sub-active a{
	color: #FFF !important;
	padding-left: 20px;
	display: inline-block;
}
.sub-active .content-links  li{
	background-color: #254882 !important;
}
.sub-active .arrow-down{
	-webkit-filter: grayscale(100%) brightness(5) brightness(10);
	filter: grayscale(100%) brightness(5) brightness(.9);
	margin-top: 1px;
	margin-right: 35px !important;
}
.mobile-sub-parent .sub-active .arrow-down{
	margin-right: 0 !important;
}
.mobile-sub-parent .sub-active .arrow-down{
	margin-top: 12px;
}
.mobile-sub-parent .sub-active:only-child .arrow-down{
	margin-top: 12px;
}
.sub-active-mobile{
	background-color: #254882 !important;
	width: 360px !important;
	padding-left: 40px !important;
	margin-left: -20px !important;
}
.sub-active-mobile a{
	color: #FFF !important;
}
.article-section-content{
	display: none;
}
.article-section-content p{
	margin-left: 0;
}
.article-section-content h3{
	font-size: 22px;
	padding-bottom: 0;
	margin-bottom: -5px;
	margin-top: 0;
}
.article-section-content a{
	color: #254882;
	text-decoration: none;
	font-weight: 900;
	font-family: "Roboto";
}
.section-go-top{
	float: right;
	padding-right: 25px;
}
.article-section-content a:hover{
	color: #a40000;
}
/* use a black color for every li element in article content instead of a default blue color, Thread 60457 */
.article-section-content li{
	color: #000;
}

.article-section.opened .article-section-content {
	display: block;
}

.sections-list{
	text-decoration: none;
	color: #254882;
}
.sections-list p{
	color: #254882;
}

/* Search page */
.dbv5-html-header th{
	padding: 10px;
	text-align: left;
	background-color: #a40000;
}
.dbv5-html-footer th{
	background-color: #a40000;
}
.dbv5-html-footer th a{
	color: white;
}
.dbv5-html-header th a{
	color: white;
	font-size: 15px;
	font-family: 'Roboto';
}
.dbv5-html-data a {
	text-decoration: none;
	color: #273b5c;
	font-family: 'Roboto';
}
tr:nth-child(even){
	background-color: #e7ebf2;
}
.data {
	width: 100%;
}
.dbv5-html-data {
	background-color: #d8e2f4;
}

.dbv5-html-data td {
	padding: 10px;
	padding-right: 25px;
}
.dbv5-html-nav-prevnext {
	text-decoration: none;
	color: #344D77;
	font-family: 'Roboto';
}

@media (max-width: 700px) {
	.brand{
		padding-left: 0;
	}
	.brand img{
		width: 80%;
	}
	.search-header{
		margin-right: auto;
	}
	.footer {
		text-align: center;
		padding-left: 0;
	}
}
/* Rotate animation */
.rotate_arrow_down{
	-moz-transform: rotate(90deg);
	-webkit-transform:rotate(90deg);
	-ms-transform:rotate(90deg);
	-o-transform:rotate(90deg);
}
/* Timeline */
.timeline_date{
	font-family: "roboto";
	color: #a40000;
	font-style: normal;
}
.block_title{
	font-weight: bold;
}
.timeline-next, .timeline-previous{
	font-family: "roboto";
	color: #254882;
	cursor: pointer;
}
div.gt-timeline div.event {
	background: none;
	background: url("/images/icons.svg");
	background-position: -77px -1px;
}
/* make timeline round icon bigger and red on hover */
div.gt-timeline div.event:hover {
	background-position: -40px -1px !important;
}
div.gt-timeline .message-pointer{
	background: url("/images/icons.svg") no-repeat -60px 0;
}
div.gt-timeline div.e-message {
	background-color: #254882;
}
.content-links .content-links{
	display: none;
}
/* link in h1, side sections */
.side-sections-h1{
	text-decoration: none;
	color: #254882;
}
.home-information .content-section {
	min-height: 340px;
}
.home-information .content-section{
	margin-bottom: 10px;
}
.home-information .content-section h1{
	margin-top: 30px;
}
/* Timeline item */
.timeline_items{
	font-family: 'Roboto';
	border: 1pt solid #98a7c1;
	border-radius: 6px;
	padding: 20px;
	font-size: 11pt !important;
}
.timeline_items h3{
	font-family: 'Roboto';
	font-weight: 600;
	margin-top: 10px;
	margin-bottom: 5px;
	font-size: 18pt;
}
/* ul fix padding */
.timeline_items .buttonless{
	padding-left: 20px;
}
/* override timeline default style */
.gt-timeline div.main_line{
	border-color: #254882 !important;
}
.gt-timeline div.horizontal-line{
	border-color: #254882 !important;
}
.e-message{
	border-radius: 5px;
}
.gt-timeline div.e-message .msg{
	font-family: 'Roboto';
	font-weight: 700;
	font-size: 11px !important;
}
.gt-timeline div.e-message .msg:hover{
	background-color: #a40000 !important;
}
.timeline_items a{
	color: #254882;
	text-decoration: none;
	font-weight: 900;
	font-family: "Roboto";
}
/* make timeline icon hover message red */
.timeline_items a:hover{
	color: #a40000;
}
.timeline-next{
	float: right;
}
/* make text "Tijdlijn" smaller */
.tijdlijn-title{
	font-size: 17pt;
	color: #254882 !important;
	font-weight: bolder;
}

/*abbo nummer*/
.abo-nummer-section{
	background-color: #D8E2F4;
	max-width: 600px;
	height: 300px;
	margin-left: auto;
	margin-right: auto;
	font-family: 'Roboto';
	border-radius: 5px;
}
.abo-nummer-section h1{
	padding-top: 20px;
	font-size: 18pt;
	text-align: center;
	color: #254885;
	font-weight: 600;
}
.abo-background-img{
	height: 600px;
}
.input-abo input{
	margin-top: 50px;
	width: 200px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	height: 30px;
}
.input-abo input[type=submit]{
	background-color: #344d77;
	border: 0pt;
	color: white;
}
.input-abo input[type=submit]:hover{
	background-color: #a40000;
}

.input-abo::placeholder {
	text-align: center;
}

/* Disclaimer and Colofon*/
.meer-btn{
	color: #254882;
	text-decoration: none;
	font-weight: 900;
	font-family: "Roboto";
}
.meer-btn:hover{
	color: #a40000;
}

.tableHeader a:link {
	color: white;
}

.tableHeader a:visited {
	color: white;
}

.tableHeader a:hover, .tableHeader a:active {
	color: #a40000;
}

.notFound {
	color: red;
	font-weight: bold;
	border: solid red 1px;
	background-color: #ffebe8;
	padding: 8px;
	margin: 20px 20px;
	text-align: center;
}
 
.articleNavButton {
	background-color: white;
	border: 2px solid hsl(218, 39%, 34%);
	color: hsl(218, 39%, 34%);
	font-family: 'Roboto';
	font-weight: 600;
	font-size: 13px;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	border-radius: 0.25em;
	display: block;
	float: right;
	padding: 5px 10px;
	margin: 2px;
}
 
.articleNavButton:hover {
	background-color: #254882;
	color: white;
}

//# sourceMappingURL=concat.css.map.json