/**
 * 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;
    }

}

/*===============================/
/=                              =/
/=    idd checkboxes(IOS10)     =/
/=                              =/
/===============================*/


/* de checkbox element waar je op klikt */
.idd_checkbox {
	display: none;
}

/* De slider waar het bolletje inzit terwel de checkbox uitstaat (Grijs)*/
.idd_toggle {
	display: block;
	float: left;
	width: 35px; /* Moet het zelfde zijn als input[type='checkbox'] */
	height: 22px; /* Moet het zelfde zijn als input[type='checkbox'] */
	background-color: #ccc;
	border-radius: 80px;
	-webkit-transition: 0.3s; /* Tijdsduurt van de achtergrond kleur overgang */
	transition: 0.3s; /* Tijdsduurt van de achtergrond kleur overgang */
	margin-right: 5px;
	margin-bottom: 2px;
}

/* De slider waar het bolletje inzit terwel de checkbox aanstaat (Oranje)*/
.idd_checkbox:checked ~ .idd_toggle {
	background-color: #FD9449;
}

/* Zet het witte bolletje in de slider links als knop uitstaat (Wit)*/
.idd_toggle:before {
	content: "";
	display: block;
	width: 20px; /* De breedte van het bolletje moet 2 pixels minder zijn dan de hoogte van de slider */
	height: 20px; /* De hoogte van het bolletje moet 2 pixels minder zijn dan de hoogte van de slider */
	background-color: white;
	border-radius: 80px;
	-webkit-transition: 0.3s; /* Tijdsduurt van het balletje verplaatsen */
	transition: 0.3s; /* Tijdsduurt van het balletje verplaatsen */
	-webkit-transition-timing-function: cubic-bezier(0.54,1.85,0.5,1); /* de 'boing' effect van het bolletje */
	transition-timing-function: cubic-bezier(0.54,1.85,0.5,1); /* de 'boing' effect van het bolletje */
	margin-left: 1px;
	margin-top: 1px;
}

/* Zet het witte bolletje in de slider rechts als knop aanstaat (Wit)*/
.idd_checkbox:checked ~ .idd_toggle::before {
	transform: translateX(13px);
}

/*-#-*-#-*-#-*-#-*-#-*-#-*-#-*-#-*/
/*                               */
/*          iddRadiobutton       */
/*                               */
/*-#-*-#-*-#-*-#-*-#-*-#-*-#-*-#-*/

/*
	Deze radiobutton is simpel in gebruik door alleen een input met de class 'iddRadiobutton' toe te voegen
	en een label er onder met de tekst voor achter de radiobutton.
	De radiobutton bepaald zijn grote aan de hand van de tekst grote en is daarom altijd op het juiste formaat.
	In lokale CSS kan kan de radiobutton nog worden aangepast.
*/

/* de radiobutton element waar je op klikt hiden */
.iddRadiobutton {
	display: none;
}

/* Waar de nieuwe radiobutton en tekst in zitten */
.iddRadiobutton + label {
	position: relative;
	padding-left: 1.5em;
	color: rgb(100, 100, 100);
	text-align: left;
	cursor: pointer;
	user-select: none;/* Geen tekst select cursor bij tekst */
}

/* De radiobutton die je ziet */
.iddRadiobutton + label:before,
.iddRadiobutton + label:after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	box-sizing: border-box;
}

/* De box van de radiobutton */
.iddRadiobutton + label:before {
	width: 1.2em;
	height: 1.2em;
	background: rgba(255, 255, 255, .5);
	border: 1px solid rgb(100, 100, 100);
	border-radius: 50%;
	cursor: pointer;
	transition: background .3s;
	box-sizing: border-box;
}

/* Verander achtergrond van kleur bij active */
.iddRadiobutton:checked + label:before {
	background: rgb(100, 100, 100);
	border: none;/* Door hier none te doen en in after toe te voegen komt er een springent effect */
}

/* Voeg check teken toen wanneer active is */
.iddRadiobutton:checked + label:after {
	transform: translate(.38em, .38em);
	width: .46em;
	height: .46em;
	background-color: rgba(255, 255, 255);
	border-radius: 50%;
}

/* Checkbox wordt grijs en niet meer aanklikbaar als je disabled='disabled' aan de input toevoegd */
.iddRadiobutton:disabled + label:before {
	border-color: rgba(0, 0, 0, .26);
}

/* Zelfde verhaal maar dan als hij al gecheckt is */
.iddRadiobutton:disabled:checked + label:before {
	background: rgba(0, 0, 0, .26);
}


/*! 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;
}
html {
	height:100%;
	-ms-overflow-style:scrollbar;
	box-sizing: border-box; /* width and height properties include the padding and border (margin is not included) */
}

/* Alter the default box model (content-box) for all elements. Changing individual elements is possible */
*, *:before, *:after {
	box-sizing: inherit;
}

body {
	height:100%;
	color:black;
	font-size:16px;
	margin:0;
	text-decoration:none;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
	             "Droid Sans", "Helvetica Neue", sans-serif;
	background-color: #ffffff;
}

/* placed on body when 'schreefjes' is checked in menu/instellingen/apparaten */
.serif {
	font-family: Serif;
}

img {
	border:0;
}

input{
	border-radius: 0px;
}

fieldset {
	padding: 5px;
	font-size: 14px;
	border-radius: 3px;
	max-width: 1200px;
	min-width: 200px;
	margin: 0px auto;
	border: none;
	border-bottom: 1px solid #B5B5B5;
}

fieldset p {
	margin-top:2px;
}

legend {
	font-weight:bold;
	padding-right:5px;
	padding-left:5px;
	margin-left:10px;
}

ul {
	list-style-type:none;
	padding:0 0 0 8px;
	margin-top:0;
	margin-bottom:0;
}

li {
	list-style-type:square;
	color:#323232;
	line-height: 18px;
	margin: 0 0 6px 10px;
}

a {
	cursor: pointer;
	color:black;
	text-decoration:none;
}

th {
	text-align:left;
	background-color:#DADADA;
	padding: 0 5px;
}

th a {
	text-decoration:none;
	color:white;
	text-align:left;
	font-weight:normal;
}

th a:hover {
	text-decoration:none;
	color:#FE8027;
}

td {
	font-size:13px;
}

td img {
	padding:0px !important;
}

table.data {
	min-width:100%;
	max-width:1100px;
}

table.data td {
	padding:6px 5px;
}

table.search {
	padding:10px;
}

.imageColumnNarrow {
	width: 60px; /* 50px image + padding:6px 5px */
	max-width: 60px; /* make sure all tables have the same column width */
}

.imageColumnWide {
	width: 85px; /* 75px image + padding: 6px 5px; */
	max-width: 85px; /* make sure all tables have the same column width */
}

td.prioritycolumn {
	width: 50px;
}

hr {
	background-color:#d3d3d3;
	border:1px;
	min-width:100%;
	max-width:1100px;
}

input[type='submit'], button {
	color:#FFF;
	text-align: center;
	padding:10px;
	background-color:#FE8027;
	border: 0; /* avoid default button appearance*/
}

input[type='submit']:hover, button:hover {
	background-color:#FD9449;
}

input[type='submit']:active, button:active {
	box-shadow: 0 0 1px 1px rgba(0,0,0,0.2), 0 0 1px 2px rgba(0,0,0,0.2) inset; /* pressed */
	outline:0; /* avoid blue outline */
}

#wrapper {
	position: relative;
	min-height: 100%;
	margin: 0 auto;
	max-width: 1000px;
	background-color: white;
	overflow: auto; /* avoid horizontal elastic scrolling on iOS */
}

#container {
	padding-bottom:50px;
	position:relative;
	left:0;
	right:0;
	-webkit-transition: left 0.2s; /*<Chrome26,<Safari6.1,<iOSSafari7.1,<Android4.4*/
	transition: left 0.2s;
}

.wrapper {
	margin: 0 auto;
	max-width: 100%;
	padding: 0;
	padding-bottom:10px;
}

#timeline {
	width: 100%;
	margin: 15px 0 0;
}

/* overwrite plugin's font-family */
.gt-timeline {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
	             "Droid Sans", "Helvetica Neue", sans-serif;
}

header {
	position:relative;
	width: 100%;
	display: table;
	-webkit-transition: left 0.2s; /*<Chrome26,<Safari6.1,<iOSSafari7.1,<Android4.4*/
	transition: left 0.2s;
	border:2px;
	border-color:#323232;
	margin-bottom:0;
	background-color:#FFF;
	color:#FE8027;
}

.fixed_header {
	position: absolute;
}

header a {
	display:inline-block;
}

footer {
	clear: both;
	position: absolute;
	width: 100%;
	font-size: .9em;
	padding:10px 0;
	margin-top:20px;
	margin-bottom:0;
	text-align:center;
	bottom: 0;
	color:#FE8027;
	background-color:#FFF;
	-webkit-transition: left 0.2s; /*<Chrome26,<Safari6.1,<iOSSafari7.1,<Android4.4*/
	transition: left 0.2s;
	/* avoid text-select on useless things */
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.footer_wrapper {
	left:0;
	right:0;
	margin:0 auto;
	max-width:1000px;
}

footer a {
	color:#FE8027;
	text-decoration:none;
}

.viewLinks,
.quickLinks {
	padding: 5px; /* align with menu icon */
	background-color:#FFF;
	color:black;
}

.viewLinks a,
.viewLinks span,
.quickLinks a {
	color:#4c4c4c;
	font-weight:bold;
	text-decoration: none;
}

span.viewLinkTitle,
a.openSnelTags { /* must be aligned with menu icon! */
	color:#FE8027;
	font-size:13px;
}

a.openSnelTags:hover {
	text-decoration: underline;
}

label.shortLinks {
	color: #324D9C;
}

a.quickPersonalLinks {
	/* see a.quickShortLinks */
	color: #fff;
	margin-top: 5px;
	font-size: 15px;
	padding: 0px 6px;
	display: inline-block;
	font-weight:normal;
	background-color: #FE8027;
}

a.viewHiddenLinks,
a.viewShortLinks,
a.quickShortLinks {
	/* see a.quickPersonalLinks */
	color: #fff;
	margin-top: 5px;
	font-size: 15px;
	padding: 0px 6px;
	display: inline-block;
	font-weight:normal;
	background-color: #324D9C;
}

a.viewShortLinks {
	background-color: #3B9C02;
}

span.viewShortLinks {
	background-color: #97BC97 !important;
	color: #fff;
	margin-top: 5px;
	font-size: 15px;
	padding: 0px 6px;
	display: inline-block;
	font-weight:normal;
}

a.viewHiddenLinks {
	background-color: #DADADA;
}

a.copyTag {
	background-color: #FD2E2E !important;
}

.removeShowLines {
	margin-left: 19px;
	text-align:left;
}

.removeShowLines a {
	box-shadow:none !important;
	color: #FE8027 !important;
	margin:10px 0;
}

.badgeLinks {
	width:29%;
	text-align:center;
	display:inline-block;
	padding: 4px 0 0 3px;
}

.arrowTijd {
	width:25px !important;
	height:25px !important;
	margin-right: 0 !important;
	margin-top: 3px;
}

.arrowTijdNavigation {
	width:40px !important;
	height:40px !important;
	margin-right: 0 !important;
	margin-top: 3px;
}

.liveblogTime {
	margin-right:2px;
	font-weight: bold;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
	             "Droid Sans", "Helvetica Neue", sans-serif;
}

.liveblogTime td {
	display: table-cell;
	vertical-align: top;
}

div.headline {
	padding:0;
	font-size:16px;
	font-weight:bold;
	color:#4C4C4C;
}

.noWrap {
	white-space: nowrap;
}

.wrapIconsList { /* voor mijn tags */
	margin-top: 5px;
	float: left;
}

.linkToMap {
	background-image: url('/image/sprite.svg'), none;
	background-position: -130px -42px;
	background-repeat: no-repeat;
	width: 17px;
	height: 17px;
	margin-top: 3px;
}

/* img-btns */

.btn_wrapper {
	margin: 2px 0 2px 20px;
}

.img-btns {
	margin-top: 2px;
	display: inline-block;
}

.prioView {
	display: inline-block;
	width: 17px;
	height: 17px;
	border: solid black 1px;
	margin-right: 2px;
}

.img-globe {
	display: inline-block;
	margin-top: 0 !important; /* overwrite .linkToMap */
	margin-right: 1px;
}

.img-share-btn {
	display: inline-block;
	background-image:url('/image/sprite.svg'), none;
	background-position: -128px -77px;
	background-repeat:no-repeat;
	width:18px;
	height:18px;
	margin-right: 5px;
}

.img-edit-btn {
	display: inline-block;
	background-image:url('/image/sprite.svg'), none;
	background-position: -128px -95px;
	background-repeat:no-repeat;
	width:18px;
	height:18px;
	margin-right: 4px;
}

.readLater {
	display: inline-block;
	background-image: url('/image/sprite.svg'), none;
	background-position: -128px -60px;
	background-repeat: no-repeat;
	width: 18px;
	height: 17px; /* not 18px because it looks bad on iPhones */
	margin-right: 4px;
}

.img-save-btn {
	display: inline-block;
	background-image:url('/image/sprite.svg'), none;
	background-position: -128px -59px;
	background-repeat:no-repeat;
	width:18px;
	height:18px;
	margin-right: 4px;
}

.img-saved-btn {
	display: inline-block;
	background-image:url('/image/sprite.svg'), none;
	background-position: -76px -113px;
	background-repeat:no-repeat;
	width:18px;
	height:18px;
	margin-right: 2px;
}

.img-comment-btn {
	display: inline-block;
	background-image:url('/image/sprite.svg'), none;
	background-position: -100px -110px;
	background-repeat:no-repeat;
	width:18px;
	height:18px;
	margin-right: 2px;
}

.item-reacties {
	display: inline-block;
	margin-left: 2px;
	margin-right: 2px;
	color: #FF8027;
	vertical-align: top;
}

.img-time {
	display: inline-block;
	white-space: nowrap;
	vertical-align: top;
}

/* end img-btns */

.img-total-comment {
	background-image:url('/image/reactie_knop.svg');
	background-size:cover;
	margin-right: 6px;
	width:50px;
	height:40px;
}

.number-total-comment {
	position: absolute;
	color: black;
	margin-top: 6px;
	font-weight: bold;
	font-size: 20px;
	text-align: center;
	width: 49px;
}

#tagcloud {
	clear:both;
	padding:10px;
}

#tagcloud a.fake_tag {
	text-decoration: none;
	color: #FFF;
	padding: 1px 6px;
	margin-right: 3px;
	border: 1px solid rgb(244, 244, 245);
	display: inline-block;
	background-color:#3ba4ff; /* same as .listTags div span.list_item*/
}

#tagcloud a.fake_remove {
	font-size: 0.9em;
	margin-right: 3px;
	position: relative;
	top: -0.3em;
}

.filterCloud {
	clear:both;
	padding:10px;
}

.filterCloud a.fake_tag {
	text-decoration: none;
	color: #FFF;
	background-color: rgb(59,164,255);
	padding: 5px 15px;
	margin-right: 3px;
	border: 1px solid rgb(244, 244, 245);
	display: inline-block;
	background: #F00;
}
.filterCloud a.fake_remove {
	font-size: 0.9em;
	margin-right: 3px;
	position: relative;
	top: -0.3em;
}

a.fake_tagPersonal {
	font-size: 0.9em;
	position: relative;
	text-decoration: none;
	color: #FFF;
	padding: 5px 15px;
	margin-right: 3px;
	border: 1px solid rgb(244, 244, 245);
	display: inline-block;
	background-color: #FFB509;
}

table.data td.item { /* override table.data td */
	min-width:230px;
	padding: 6px 7px 0; /* text shouldn't be higher than the image */
}

.item ul {
	font-size: 14px;
}

.item .collapseSections {
	text-align: left;
	margin-top: 5px;
	margin-left: 2px; /* only 2px difference regarding the title*/
}

.underline {
	text-decoration: underline;
}

.strikethrough {
	text-decoration: line-through;
}

sup, sub {
	vertical-align: baseline;
	position: relative;
	top: -0.4em;
}

sub {
	top: 0.4em; 
}

.title {
	color:#4C4C4C;
	text-align:left;
	font-weight:bold; /* because title does not always contain a link */
	display: table;
}

.title span {
	color:red;
}

.titleLeft {
	display: table-cell;
	width:20px;
}

.titleRight {
	display: table-cell;
}

/* Links to news source in the title have blue color #175AA5. When the items are collapsed the title is black.
   Background-info links appear in green color.  On hover: show border-bottom */

.title a {
	color:#324D9C;
	text-decoration:none;
	font-weight:bold;
}

.title a:hover {
	color:#3653ab; /* color of links to news source */
	border-bottom: 1px solid #3653ab;
}

/* usually there are not reference/background links in the title, but they do exist */
.title a.ref {
	color: #2F770C; /* color for background-info */
}

.title a.ref:hover {
	border-bottom: 1px solid #2F770C;
}
/* Puts edits text on the left side */
.collapseSections {
	text-align: left;
	/* staan hier en niet in <a> zodat bold en underline tags ook nog invloed kunnen hebben op links */
	font-weight: normal;
	text-decoration: none;
}

/* not-background-info links have blue color */
.collapseSections a {
	color: #175AA5; /* same color as .title a:hover; */
}
.collapseSections a:hover {
	text-decoration: underline;
}

/* links to background info have green color */
.collapseSections a.ref {
	color: #2F770C; /* same color as .title a.ref */
}

.collapseSections a.ref:hover {
	text-decoration: underline;
}

/* dbv5 */

.dbv5-html-extracolinfo {
	display: inline;
	margin: 0;
	padding: 0;
}

.dbv5-html-header th, .dbv5-html-footer th, .dbv5-html-search-labels th {
	color:white;
	font-weight:normal;
}

/* dbv5 footer */

.endTable {
	border-top: #d3d3d3 2px solid;
}

.dbv5-html-nav-prevnext {
	margin-left: 3px;
	font-size: 16px;
	width: 96%; /* avoid scrollbar */
	clear: both;
}

.dbv5-html-hidcol {
	display: none;
}

.dbv5-html-hidcol a {
	color:white;
}

.extrainfo {
	margin-top: 15px;
	margin-left: 3px;
	font-size:16px;
}

.extrainfo a {
	padding-left:5px;
}

.dbv5-html-extracolinfo a {
	background-color: #3B9C02;
	padding: 0 6px; /* same as in .columnOptionDisabled */
}

.columnOptionDisabled {
	background-color: #97BC97 !important;
	padding: 0 6px; /* same as in .dbv5-html-extracolinfo a */
}

div.jscroll-added div[class^='dbv5-module-'] {
	display: none;
}

/* end dbv5 footer */

.dbv5-html-sort-desc:after {
   content: "\25BC";
}

.dbv5-html-sort-asc:after {
   content: "\25B2";
}

.dbv5-html-searchlabel-button {
	background:none;
}

.date_spacer {
	text-align:center;
	font-size:55px;
	padding:0 10px 0 0;
	margin:0 20px 10px;
	float:left;
	height:0em;
	display:block;
}

#period {
	float:left;
}
#period_bottom {
	font-weight:bold;
	text-decoration:none;
	padding:10px 0 15px 2px;
}

a.hidecol {
	 font-weight:normal;
	font-size:.85em;
	text-decoration:none;
	position:relative;
	top:-.3em;
	left:-.1em;
}
.hidecol {
	font-size:0.85em;
	font-weight:normal;
	text-decoration:none;
	position:relative;
	left:-0.1em;
	top: -0.3em;
}

.error {
	border: 1px solid #F00;
	color: #F00;
	font-weight: bold;
	padding: 3px;
}

ul.error > li {
	color: #F00 !important;
	list-style-type: none;
}

.succes {
	border: 1px solid #00F510;
	color: #00F510;
	font-weight: bold;
	padding: 3px;
}

ul.succes > li {
	color: #37DE43 !important;
	list-style-type: none;
}

fieldset div > label {
	margin: 4px 0;
	display: inline-block;
	width: 150px;
}

span.date {
	font-weight:bold;
	color:#808080;
	margin-left:2px;
}

div#edit {
	clear: both;
}

div.header_wrapper {
	margin-left:auto;
	margin-right:auto;
	max-width:100%;
	position:relative;
}

div.header_wrapper td {
	margin:0 !important;
	padding:0 !important;
}

table.header_container {
	height:48px;
}

/* HamburgerMenu */

.header_hamburger {
	display:block;
	position:relative;
	overflow:hidden;
	margin:0;
	padding:0;
	width:32px;
	height:32px;
	font-size:0;
	text-indent:-9999px;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	box-shadow:none;
	border-radius:0;
	border:none;
	background-color: white;
	cursor:pointer;
	transition: background-color .3s ease-in-out 0s;
}

.header_hamburger:focus {
	outline:none;
}

.header_hamburger:hover {
	background-color:white;
}
.header_hamburger span {
	display:block;
	position:absolute;
	top:12px;
	left:0px;
	right:0px;
	height:6px;
	background:#FE8029;
}

.header_hamburger span::before,
.header_hamburger span::after {
	position: absolute;
	display: block;
	left:0;
	width:100%;
	height:6px;
	background-color:#FE8029;
	content:"";
}

.header_hamburger span::before {
	top:-10px;
}

.header_hamburger span::after {
	bottom:-10px;
}

/* HamburgerMenu Close animation */
.header_hamburger span {
	-webkit-transition:background 0.0001s 0.3s;
	transition:background 0.0001s 0.3s;
}

/* transation tijd tussen de lijnen horizontal naar 45 graden */
.header_hamburger span::before,
.header_hamburger span::after {
	-webkit-transition-duration:0.3s, 0.3s;
	transition-duration:0.3s, 0.3s;
	-webkit-transition-delay:0.3s, 0.0001s;
	transition-delay:0.3s, 0.0001s;
}

.header_hamburger span::before {
	-webkit-transition-property:top, -webkit-transform;
	transition-property:top, transform;
}

.header_hamburger span::after {
	-webkit-transition-property:bottom, -webkit-transform;
	transition-property:bottom, transform;
}

/* laat de middelste lijn verdwijnen */
.header_hamburger.is_active span {
	background:none;
}

/* de twee lijnen laten draaien 45 graden */
.header_hamburger.is_active span::before {
	top:0;
	-webkit-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	transform:rotate(45deg);
}

.header_hamburger.is_active span::after {
	bottom:0;
	-webkit-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
	transform:rotate(-45deg);
}


.header_hamburger.is_active span::before,
.header_hamburger.is_active span::after {
	-webkit-transition-delay: 0.0001s, 0.3s;
	transition-delay: 0.0001s, 0.3s;
}

.header_notOverlap{
	width: 22px;
	z-index: 8000;
	position: relative;
	background-color: white;
}

div.header_lastnews {
	display:inline-block;
	background-image:url('/image/iilogo_header_48.png');
	background-image: url('/image/sprite.svg'), none;
	background-position: 0px 0px;
	margin-right:10px;
	width:48px !important;
	height:48px !important;
	margin:0 !important;
	float:right;
	padding:1px;
	background-repeat:no-repeat;
}

div.header_map {
	display:inline-block;
	background-image:url('/image/world_orange_v2.png');
	background-image: url('/image/sprite.svg'), none;
	background-position: 0px -88px;
	background-repeat: no-repeat;
	margin-right:6px; /* changing this can make the header wider than 100% on <400px viewports */
}

div.mapOpen {
	display:inline-block;
	background-image:url('/image/world_greyv5.png');
	background-image: url('/image/sprite.svg'), none;
	background-position: -88px 0px;
	background-repeat: no-repeat;
	margin-right:6px; /* changing this can make the header wider than 100% on <400px viewports */
}


div.header_settingscenterizer {
	height:30px;
	margin-left:5px;
	margin-right:5px;
}

div.header_searchcenterizer {
	margin-left:5px;
	height:22px;
}

div.header_search {
	display:inline-block;
	border:0;
	width:24px;
	height:24px;
	background:url('/image/search_white.png');
	/*background:url('/image/search_orane.svg'), none;*/
	background-image:url('/image/sprite.svg'), none;
	background-position: -70px -88px;
	background-repeat:no-repeat;
	vertical-align:middle;
}

a.header_search {
	display:inline-block;
	text-align:center;
	margin-left:10px;
}

div.header_navicenterizer {
	height:40px;
}

div.header_searchboxdiv {
	float: left;
	width: 38%;
	min-width: 65px;
	max-width: 100px;
}

div.header_advancedsearch {
	position:relative;
}

a.search_icon {
	font-size:16px;
	vertical-align:text-top;
	line-height: 0;
	margin-top: -3px;
	display:inline-block;
	color:#FE8027;
}

/* advanced search is expanded */

div#advancedsearch_div {
	display: none;
	position:relative;
	padding: 0 5px; /* aligned, see padding of elements in header and footer */
	width: 100%;
	max-width: 400px;
}

.header_advSearchTitle {
	margin: 3px 0;
	font-weight: bold;
}

.header_advSearchLabel {
	display: inline-block;
	width: 20%;
	margin: 2px 0;
}

.header_advSearchInput {
	display: inline-block;
	width: 80%;
	margin: 2px 0;
}

.header_advSearchInput input {
	width: 100%;
	border-radius: 0px;
}

.header_advSearchInput .acInput {
	display: inline-block;
}

.header_advSearchSubmit {
	margin: 3px 0;
}

/* end */

div.advancedsearch {
	width:30px;
	height:30px;
	margin-left:0;
	margin-top:-6px;
	cursor:pointer;
	background-image:url('/image/sprite.svg'), none;
	background-position: -40px -88px;
	background-repeat: no-repeat;
}

div.header_pijllinks {
	display:inline-block;
	background-image:url('/image/newsarrow_left_enabled.png');
	background-image:url('/image/sprite.svg'), none;
	background-position: -40px -48px;
	background-repeat: no-repeat;
	margin-right:5px;
}

div.header_pijllinks_uit {
	display:inline-block;
	background-image:url('/image/newsarrow_left_disabled.png');
	background-image:url('/image/sprite.svg'), none;
	background-position: 0px -48px;
	background-repeat: no-repeat;
	margin-right:5px;
}

div.header_pijlrechts {
	display:inline-block;
	background-image:url('/image/newsarrow_right_enabled.png');
	background-image:url('/image/sprite.svg'), none;
	background-position: -48px 0px;
	background-repeat: no-repeat;
	margin-right:5px;
}

div.header_pijlrechts_uit {
	display:inline-block;
	background-image:url('/image/newsarrow_right_disabled.png');
	background-image:url('/image/sprite.svg'), none;
	background-position: -88px -40px;
	background-repeat: no-repeat;
	margin-right:5px;
}

div.header_bigicon {
	background-repeat:no-repeat;
	width:40px;
	height:40px;
}

.header_logo {
	width:48px;
}

.header_logo a {
	float:right;
}

.date_block {
	font-size:20px;
	text-align:center;
	margin:2px 10px 10px 0;
	float:left;
	overflow:auto;
	display:block;
}

.searchnews {
	margin-left: 0;
	margin-top: -7px;
	display: inline-table;
	font-size: 10px;
	color: white;
}

.smallsearchmode {
	display: none;
}

.defaultFlag {
	width: 2em;
	height: 1.2em;
}

.header_searchfield {
	max-width:100%;
	height:22px;
	padding: 0 2%;
	color: black;
	margin-top:0;
	margin-bottom:0;
	border: 1px solid #FE8029;
}

.img-link {
	display: inline-block;
}

.comment_recent {
	padding: 5px; /* align with menu icon */
	color: #FE8027;
}

.comment_recent a {
	color: #FE8027;
	font-size: 13px; /* same as a.openSnelTags */
	font-weight:bold;
	text-decoration: none;
}

.comment_recent a:hover {
	color: #0f0; /* why? ask Chef */
	text-decoration: underline;
}

a.reageer:hover, a.reacties:hover {
	color: #FE8027;
	text-decoration: underline;
}

.collapsedAll .img-extra-icons {
	display: none;
}

.img-small-icons {
	display: none;
}

/* inline elements inside footer */

div.logged-as {
	width:35%;
	display:inline-block;
	text-align:left;
	padding-left: 5px; /* aligned, see left padding of elements in header and body */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

div.questions {
	width:30%;
	display:inline-block;
	text-align:center;
	padding: 0 5px;
	overflow: hidden;
	overflow: hidden;
	text-overflow: ellipsis;
}

div.manual {
	width:35%;
	display:inline-block;
	text-align:right;
	padding-right: 5px;
	overflow: hidden;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* end of inline elements inside footer */

.itemOffsetList {
	visibility: hidden;
	display: block;
	margin-top: -80px;
	position: absolute;
}

td.header_navigation {
	width:200px;
	white-space: nowrap;
	text-align: right;
}

#sharedby {
	color: white;
	margin-top: 3px;
	margin-left: 5px;
}

.editTags {
	margin-bottom: -5px;
	margin-right: 8px;
}
.hideTags {
	color:#F00;
}
.acInput {
	display: block;
}

/* Mak Alias aan melding */

#popup {
	position: fixed;
	padding: 20px;
	background: #fff;
	border-radius: 5px;
	max-width: 302px;
	display: none;
	z-index: 99999;
}

#popup_text {
	display: block;
	margin: auto;
	width: 40%;
}

.comment_post_alert {
	color: #FD9449;
	cursor: pointer;
}

/* share */

#share_background, #alias_background {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10000;
	background-color: #000;
	opacity: 0.8;
	display: none;
}

#share_container {
	position: fixed;
	background-color: #FFF;
	z-index: 10001;
	display: none;
	padding: 18px;
	border-radius: 5px;
	max-width: 322px;
}

#share_container h3 {
	margin-top: 0;
}

#share_close, #alias_close {
	float: right;
	border: solid black 1px;
	border-radius: 50%;
	padding: 1px 4px;
}

#share_title {
	font-weight: 200;
	font-size: 25px;
}

.share_directLink, .share_mails {
	margin-bottom: 10px;
	margin-top: 10px;
}

.share_sendMail {
	text-align: center;
	margin-top: -2px;
}

.share_directLink span, .share_mails span, .share_directLink a {
	display: inline-block;
	width: 50px;
}

.share_directLink a {
	color: #FE8027;
}

.share_directLink a:hover {
	text-decoration: underline;
}

.toShareMail {
	margin-bottom: 2px;
	margin-left: 54px;
	width: 227px;
	display: block;
	border-radius: 5px;
	border: solid lightgrey 2px;
}

#toShareMail {
	margin-bottom: 2px;
}

#sendShareMail, #saveAlias {
	border-radius: 5px;
	padding: 8px 20px;
}

#directShareLink, #toShareMail, .alias_input {
	width: 227px;
	border-radius: 5px;
	border: solid lightgrey 2px;
}

#shareError {
	display: none;
	color: red;
}

#shareSend {
	font-weight: lighter;
	font-size: 20px;
	display: none;
	color: green;
}

/* social media buttons (share) */

.socialButtons {
	margin-top: 10px;
}
.socialButtons #shareFacebook {
	float: left;
}
.socialButtons #shareTwitter {
	float: left;
	width: 18%;
}
.socialButtons #shareLinkedIn {
	float: left;
	margin-left: 10px;
}
.fb-like {
	width: 130px !important;
}

/* end share */

/* news */

a.linkNoImageEdit {
	min-height:50px;
	display:inline-block;
	margin-left:5px;
}

.info {
	text-align:left;
	font-size:11px;
	margin:5px 5px;
}

a.tag-type-1 {
	color: #CF10FF;
}
a.tag-type-2 {
	font-weight: bold;
}
a.tag-type-3 {
	color:#000;
	background-color:#FF0;
}

/* timeFrame */

.timeFrame {
	font-weight: bold;
	font-size: 15px;
	background-color:#FFF;
	padding: 2px 5px; /* align with menu icon */
	color:#FE8027;
	text-transform:uppercase;
}

.timeFrame_inline {
	display: inline-block;
	vertical-align: middle;
	line-height: 40px; /* same as .triangleMain, .triangleSession */
}

.timeFrame_searchPerDay {
	display: inline-block;
}

.timeFrame_label {
	padding: 0 5px;
}

.timeFrame_label a, div.jscroll-added a.goToSession {
	color:#FE8027;
}

.timeFrame_label a:hover, div.jscroll-added a.goToSession:hover {
	text-decoration: underline;
}

.timeFrame_leftArrow {
	width:20px !important;
	height:20px !important;
	background-image:url('/image/newsarrow_left_enabled.png');
	background-image:url('/image/sprite.svg'), none;
	background-position: -130px -20px;
	background-repeat: no-repeat;
}

.timeFrame_rightArrow {
	width:20px !important;
	height:20px !important;
	background-image:url('/image/newsarrow_right_enabled.png');
	background-image:url('/image/sprite.svg'), none;
	background-position: -128px 0px;
	background-repeat: no-repeat;
}

.timeFrame_rightArrowDisabled {
	width:20px !important;
	height:20px !important;
	background-image:url('/image/newsarrow_right_disabled.png');
	background-image:url('/image/sprite.svg'), none;
	background-position: -92px -88px;
	background-repeat: no-repeat;
}

.timeFrame_searchDate {
	border:0;
	padding:0;
	outline:0;
	width:85px;
	background:none;
	color:black;
	text-align: center;
	font-size: 13px;
}

.timeFrame_submit {
	visibility:hidden;
	width: 0;
	margin: 0;
	padding: 0 !important;
	position: absolute;
	border: 0 !important;
}

/* end timeFrame */

.small {
	font-size: 14px;
}

.fb-share-button span, .fb-share-button iframe {
	height: 20px !important;
	width: 100px !important;
}

/* autocomplete */
.acResults {
	z-index: 99999;
}
.acResults ul {
	list-style-type: none;
	background-color: #F6F6F6;
	border: 1px solid #666666;
	margin: 0;
	padding:0;
}
.acResults ul li {
	list-style-type: none;
	padding: 0 5px;
	margin: 0;
	font-size: 14px;
}

.acSelect {
	background-color: #BBBBBB;
}
.allResults{
	background-color: #e3e3e3 !important;
	color: #555555;
}
.acMatch {
	font-size: 15px;
}

/* -------- Ticker --------- */

div#ticker {
	overflow: hidden;
	position:relative;
	height:18px;
	line-height: 18px;
	background-color:#FFF;
}

div#ticker p {
	display: inline;
	white-space: nowrap;
	position: absolute;
	margin: 0;
	color:#ff8d20; /* separator between headlines*/
}

div#ticker p a {
	text-decoration:none;
	color:#4C4C4C;
}

/* -------- weather --------- */

.weather_wrapper {
	margin: 0 5px;
}

#weathertemp, #weatherrain, #weatherwind {
	font-weight: bold;
	display: inline-block;
	width: 310px;
	max-width: 310px;
	margin: 0 auto;
}

#weatherrain > img, #weathertemp > img, #weatherwind > img {
	height: 351px;
	width: 100%;
}

.weather_footer {
	font-size: 10px;
}

div.header_navicenterizer form {
	display: inline;
	vertical-align: top;
}

#weather_header_icon {
	margin-right: 9px;
	overflow: visible;
	height: 40px;
	width: 40px;
}

#weather_header_icon img {
	height: 40px;
	position: relative;
	float: right;
}


#weather_table {
	overflow: auto;
}

.idd_weather_info {
	margin: 0 5px;
}

.weather_wrapper a, .idd_weather_info a {
	color: #175AA5;
	text-decoration: none;
}

.weather_wrapper a:hover, .idd_weather_info a:hover {
	text-decoration: underline;
}

.securitySubmit {
	margin-top:5px;
}


#moreWeather {
	color: #FE8027;
	margin: 15px 0;
}

#header_item_count {
	background-color: #FD2E2E;
	color: #FFF;
	width: 20px;
	height: 20px;
	border-radius: 10px;
	line-height: 20px; /* must be equal to width and height */
	font-size: 11px;
	position: absolute;
	top: 5px;
	right: 5px;
	text-align:center;
	font-weight:bold;
}

.vooruitzichten{
	margin: 0 5px;
}

/* modify the weather table css of knmi.nl/nederland-nu/weer/verwachtingen */
/* change margin of weather table Vooruitzichten to fit all days */
.weather-map__table li {
    margin-left: 0px;
		list-style-type: none;
 }
 /* change text align of the weather table */
 .weather-map__table {
    text-align: left;
}

/* persoonlijke gegevens */
#emailReactivate {
	width: auto;
	display:block;
}

#genderMale {
	width: 50px;
}

#genderFemale {
	width: 5em;
}

.mytags {
	max-width:50%;
	min-width:50%;
	height:11px;
	border:1px solid black;
}

/* List mode */

#dbv5-no {
	overflow: auto;
}

.list .info {
	display:none;
}

.priority0, .priority1, .priority2, .priority3 {
	font-size:17px;
	line-height:21px;
}

.priority4 {
	font-size:20px;
	line-height:24px;
}

.priority5 {
	font-size:24px;
	line-height:28px;
}

.odd {
	background-color: #FFF;
	border-bottom: white 5.3pt solid; /* witruimte tussen de prio artikelen */
}

.even {
	background-color:#FFF;
	border-bottom: white 5.3pt solid; /* witruimte tussen de prio artikelen */
}

#dateNow {
	display:none;
}

/* Collapse/expand items in list mode  */
.triangleMain, .triangleSession {
	display:inline-block;
	vertical-align: middle;
	font-family: arial, "lucida console", sans-serif;
	font-style:normal;
	font-size:40px;
	cursor:pointer;
	color:#49C400; /* same as .triangleHeadline */
	margin-left: -5px; /* align with menu icon */
	line-height: 40px; /* same as timeFrame_inline */
}

.triangleHeadline {
	display:inline-block;
	vertical-align: middle;
	font-family: arial, "lucida console", sans-serif;
	font-style:normal;
	font-size:16px;
	cursor:pointer;
	color:#49C400; /* same as .triangleMain, .triangleSession */
}

.triangleMain:after, .triangleSession:after, .triangleHeadline:after {
	content: "\25BC"; /* 25B6 and 25C0 look different in iOS 8, 25ba looks thinner in Android */
}

.triangleValentijnMain:after, .triangleValentijnSession:after {
	content: url('/image/hartje.svg');
	padding-left: 10px;
}

.triangleValentijn:after {
	content: url('/image/hartje.svg');
	display: block;
	transform: scale(0.4);
	margin: -10px;
}

.trianglePasenMain:after, .trianglePasenSession:after {
	content: url('/image/eitje.svg');
}

.trianglePasen:after {
	content: url('/image/eitje.svg');
	display: block;
	transform: scale(0.4);
	margin: -10px;
}

.triangleKoningsdagMain:after, .triangleKoningsdagSession:after {
	content: url('/image/beer.svg');
}

.triangleKoningsdag:after {
	content: url('/image/beer.svg');
	display: block;
	transform: scale(0.4);
}

.triangleMain.triangleKoningsdagMain {
	margin-left: 0;
}

.collapseSections.collapsedItem {
	display: none;
}

.list_titleOfCollapsedItem a, .list_titleOfCollapsedItem a.ref {
	border-bottom:0 !important;
	color: black;
}

.list_titleOfCollapsedItem a:hover {
	color: #49C400; /* same as .triangleMain, .triangleSession and .triangleHeadline */
}

/* end of collapse/expand items in list mode  */

/* menu */

.triangle {
	display:inline-block;
	font-family: arial, "lucida console", sans-serif;
	font-style:normal;
	float:left;
	font-size:14px;
	color:#3B9C02;
	margin-top:1px;
	margin-right: 3px;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}

.menu-item-open .triangle {
	-ms-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}

.triangle:after {
	content: "\25BA"; /* 25BA looks thinner (but still good) in Android. 25B6 and 25C0 look different in iOS 8*/
}

#settingsMenu {
	background:white;
	z-index:99999;
	box-shadow: 0 1px 10px #888888; /* offset-x | offset-y | blur-radius | color */
	width:325px;
	height:100%;
	overflow-y: auto;
	position: fixed;
	left: -330px;
	-webkit-transition: left 0.2s; /*<Chrome26,<Safari6.1,<iOSSafari7.1,<Android4.4*/
	transition: left 0.2s;
}

.slideMenu {
	left:325px !important;
}

.settingQuickLink {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
	             "Droid Sans", "Helvetica Neue", sans-serif;
	display:block;
	font-size:16px;
	padding: 3px 10px;
	background-color: white;
	border-bottom: 1px solid #B5B5B5;
	text-align:left;
	color:black;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.settingQuickLink:first-letter {
	text-transform: uppercase;
}

.menuGuestLine {
	padding: 10px;
}

.menuGuestRegister {
	color: #3B9C02;
	font-weight: bold;
	font-size: 17px;
}

.moreFilterTags {
	display:inline-block;
}

.settingContent {
	z-index: 0;
	font-style:normal;
}

.hideSettingContent {
	display:none;
}

.menu-item-open {
	color:#FE8027;
	border-bottom:1px solid white;
	background-color:white !important;
}

div.optionsAccount {
	display:inline-block;
}

.childContent {
	padding-left:30px;
	padding-bottom:7px;
	padding-top:7px;
}
.settingQuickLink .menuTrending .childContent {
	color: #C9F;
}

.childContentSub {
	padding-left:60px;
	padding-bottom:7px;
	padding-top:7px;
}

.settingContent .title {
	display:none;
}

.settingContent .info {
	display:none;
}

.settingContent .collapseSections {
	padding-left:5px;
	margin-top:0px;
}

.settingContent .collapseSections li {
	list-style-type:none;
	margin-left:0px;
}

li.media {
	list-style-type: none;
	margin-left: -9px;
}

li.media .liveblogTime, li.media .dash {
	display: none;
}

.settingColoured {
	color: #FE8027;
}

.settingColoured.menuTrending {
	color:blueviolet;
}

.menuTrending {
	color:#CF10FF;
}

.menuTrendingChild {
	color:#CF10FF;
}

.menu-item-open + .settingContent {
	display: block;
}

#appCertain, #mailCertain {
	margin-top:7px;
	float:left;
}

.disabled {
	font-weight:bold;
	font-size:80px;
	color:#d3d3d3;
	opacity:0.5;
}

div.columnOfTags {
	float:left;
	min-width:130px;
}

div.tagCheckboxAndLabel {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.inviteWaitTime {
	display:inline-block;
}

label.labelsDataToInvite {
	width: 25%;
}

#invite_fullname, #invite_email {
	width: 100%;
	padding: 5px;
	margin-top: 5px;
}
.settingContent .inviteSubmitButton{
	margin-top: 6px;
	margin-bottom: 15px;
	margin-right: 0px;
	padding: 2px 7px;
	font-size: 16px;
}

label.removeTagLabel {
	width: 125px;
}

label.removeTagLabelPersonal {
	width:125px;
}

button.inviteSubmit {
	margin-left: 2px;
	/*width: 95%;  labelsDataToInvite + #invite-name/#invite-email */
}

.modifyInvitationForm input[type='submit'], .modifyInvitationForm button {
	color:#FE8027;
	text-align: left;
	width: 47.5%; /* half of button.inviteSubmit */
	padding: 0;
	background: none;
	border: none;
	box-shadow: none;
}

.inviteText {
	padding: 5px 0;
}

.listOfInvited {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
/* horizontal align the tags to eachother in the side menu */
.personals{
	margin-left: 5px;
}

.tags_personal{
	margin-left: 5px;
}
/* download apps */

div.downloadApps {
	padding: 10px 5px; /* align with text in the table footer and page footer */
}

#settingsMenu div.downloadApps {
	padding: 20px 10px; /* align with above elements in the menu */
}

#settingsMenu div.appTitle {
	font-size: 16px;
	font-weight: bold;
}

div.appExplanation {
	font-size:15px;
	margin: 10px 0;
}

.appContainer {
	display: inline-block;
	margin: 5px 0;
	width: 100%;
	max-width: 205px;
	height: 60px;
	vertical-align: middle;
	line-height: 35px;
	font-size: 15px;
}

.appContainer a {
	color: #FE8027;
	text-decoration: none;
}

.appContainer a:hover {
	text-decoration: underline;
}

.appBadge {
	float: left;
	width:20%;
	height: 60px;
	text-align:center;
}

.appleAppBadge {
	width: 53px;
	height: 60px;
}

.androidAppBadge {
	width: 55px;
	height: 60px;
}

.windowsAppBadge {
	width: 60px;
	height: 60px;
}


.appAppleLinks {
	vertical-align: middle;
	line-height: 30px;
	float: right;
	padding-left: 10px;
	width: 70%;
	text-align: left;
}

.appAppleLinks span {
	display: inline-block;
	width: 100%;
	line-height: 30px;
}

.appLinks {
	vertical-align: middle;
	line-height: 60px;
	float: right;
	padding-left: 10px;
	width: 70%;
	text-align: left;
}

.appLinks span {
	display: inline-block;
	width: 100%;
	line-height: 60px;
}

/* end of menu */

.itemsub_title {
	text-align: center;
	padding: 5px;
	font-weight: bold;
}

/* comment section */

.comment_header {
	padding: 4px 2px;
	border-bottom: solid 1px;
	border-color: gray;
}

.comment_header a{
	font-weight: bold;
	color: #324D9C;
}

.comment_header a:hover {
	text-decoration: underline;
}

#comment_wrapper {
	padding-top: 20px;
	font-size: 15px;
}

.comment_table {
	margin-top: 20px;
	width: 100%;
	padding-left: 0px !important;
	background-color: #f2f2f2;
}


.comment_table textarea {
	width: 100%;
}

.comment_table_focused {
	margin-top: 20px;
	width: 100%;
	padding-left: 0px !important;
	border: #FD9449 solid 2px;
	background-color: #f2f2f2;
}

.comment_table_focused textarea {
	width: 100%;
}

.subcomment_table {
	width: 100%;
	background-color: white;
}

.subcomment_table textarea {
	width: 100%;
}

.subcomment_table_focused {
	width: 100%;
	border: #FD9449 solid 2px;
	background-color: white;
}

.subcomment_table_focused textarea {
	width: 100%;
}

.comment_message {
	padding-left: 10px;
	padding-top: 10px;
	word-wrap: break-word; /* break long strings e.g. urls */
}

.comment_message a:hover{
	color: #49C400;
}

.comment_info {
	color: grey;
	padding-left: 10px;
	padding-bottom: 10px;
}

.comment_info span {
	color: #FD9449;
	cursor: pointer;
}

.comment_info a {
	color: grey;
}

.comment_info a:hover, .comment_info span:hover,
.subcomment_message a:hover, .subcomment_info a:hover {
	color: #49C400;
}

.subcomment_message {
	margin-top: 10px;
	background-color: white; /* Achtergrond kleur van de subcomments */
	padding-left: 10px;
	word-wrap: break-word; /* break long strings e.g. urls */
}

.subcomment_info {
	color: grey;
	margin-bottom: 10px;
	background-color: white; /* Achtergrond kleur van de subcomments */
	padding-left: 10px;
}

.subcomment_info span:hover {
	color: #49C400;
	cursor: pointer;
}

.subcomment_info span {
	color: #FD9449;
}

.subcomment_info a {
	color: grey;
}

.comment_textfield {
	display: none;
}

.comment_btn {
	color: #FD9449;
	font-size: 18px;
	font-weight: 600;
}

.comment_btn:hover {
	color: #0f0; /* same as .comment_recent:hover */
	cursor: pointer;
}

.comment_div {
	display: none;
}

.comment_div textarea {
	display: block !important;
	min-height: 50px !important;
	max-width: 100%;
}

#comment_filter {
	float: right;
	display: block;
	position: relative;
	top: 15px;
}

#comment_filter a {
	background-color: green;
	padding: 2px;
	padding-left: 5px;
	padding-right: 5px;
	color: white;
	margin-left: 5px;
}

#comment_filter a:hover {
	background-color: #49C400;
}

#comment_filter a.selected {
	display: none;
}

.comment_textfield textarea {
	display: block !important;
	min-height: 50px !important;
	max-width: 100%;
}

/* Subscription */

.sub_wrapper {
	width: 100%;
	height: 40px;
	display: block;
	margin-left: 6px;
}

.sub_title {
	float:right;
	margin-left: 1em;
	width: calc(100% - 40px - 1em);
}


.sub_checkbox {
	margin-top: 7px !important;
	float:left;
}

#sub_checkbox {
	margin-top: 7px !important;
	float:left;
}

.sub_checkbox:before {
	background-color: #FD9449 !important;
}

#sub_checkbox:before {
	background-color: #FD9449 !important;
}

/* Delete button */

.del_button{
	opacity:0;
	transition:opacity 0.2s;
	float: right;
	padding-right: 5px;
	cursor:pointer;
}

.sub_title:hover>.del_button{
	opacity:1;
}

.sub_overzicht a {
	color: #FE8027 !important;
	font-size: 13px;
}

.sub_overzicht a:hover {
	color: #49C400 !important;
}

/* Radio Button (ios10)*/
.check_gender {
	display: none;
}

.check_radio:before {
	position: absolute;
	content: '';
	width: 7px;
	height: 15px;
	margin-left: 2%;
	border: solid #CCC;
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
}

input[type=radio]:checked + .check_radio:before {
	border: solid #2F770C;
	border-width: 0 3px 3px 0;
}

/* small version of the form to send invitations */

.inviteMini_wrapper {
	width: 100%;
	padding: 0 5px;
}

.inviteMini_formLabels {
	display: inline-block;
	width: 80px;
	margin: 4px 0;
}

.inviteMini_wrapper .inviteSubmitButton{
	margin-left: -3px;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 10px;
	padding-right: 10px;
	margin-top: 5px;
}

#inviteMini_fullname, #inviteMini_email {
	width: 250px;
}

/* edit page */

#edit_wrapper {
	margin: 10px auto;
	padding: 0 5px;  /* aligned, see padding of elements in header and footer */
}

#edit_explanation, #edit_headerLinks, #edit_comment {
	margin: 5px 0 10px;
}

#edit_comment p {
	margin: 25px 0 10px;
}

.edit_textarea {
	resize: vertical;
	width: 100%;
	min-width: 300px;
}

#edit_sample {
	margin: 25px 0;
}

#edit_sample .collapseSections {
	font-size: 15px;
}

#edit_sample .titleLeft {
	display: none;
}

.tagsEdit div {
	margin-bottom: 3px;
	display: inline-block;
}

.tagsEdit div span.tag_item {
	font-weight: lighter;
	color: #FFF;
	background-color: rgb(59,164,255);
	padding: 0 3px;
	margin: 0 0 3px;
	border: 1px solid rgb(244, 244, 245);
}

.dbv5-html-data .tagsEdit span.remove {
	font-size: 0.9em;
	padding-right: 7px;
	padding-bottom: 5px;
}

.menu_edit_img {
	margin-bottom: -2.6px;
}

.tags {
	padding:3px 3px 0 3px;
	max-width:95%;
}

.tags div {
	margin-bottom: 3px;
	display: inline-block;
	padding: 4px 1px;
}

.tags div a.tag_item {
	font-weight: lighter;
	color: #FFF;
	background-color: #FD2E2E !important;
	padding: 1px 6px;
	margin: 1px 3px;
	border:0px;
}

.dbv5-html-data .tags span.remove {
	font-size: 0.9em;
	padding-bottom: 5px;
	color:#666666;
	padding:3px;
	padding-right:5px;
	padding-left:1px;
	cursor:pointer;
}

.tags span.remove:hover {
	font-weight:bold;
	color:#000000;
	padding-right:4px;
}

.listTags {
	white-space:nowrap;
	padding:3px 0;
	border:none;
	width:120px;
	clear:both;
}

.tagsmy {
	padding:3px 3px 0 5px;
	border:none;
	width:100px;
	max-width:90%;
	display:inline;
}

.tagsmy input {
	display:none;
}

.tagsmy span.remove, .listTags span.remove{
	color:#666666;
	padding:3px;
	padding-right:5px;
	padding-left:1px;
	cursor:pointer;
}

.tagsmyOpened .remove {
	display:inline !important;
}

.tagsmy span.remove:hover, .listTags span.remove:hover {
	font-weight:bold;
	color:#000000;
	padding-right:4px;
}

.tagsmy div, .listTags div {
	margin-bottom: 3px;
}

.listTags div span.list_item {
	font-weight: lighter;
	color: #FFF;
	background-color: #3ba4ff; /* same as #tagcloud a.fake_tag */
	padding: 0 3px;
	margin: 0 0 3px;
	border: 1px solid rgb(244, 244, 245);
	font-size:13px;
}

.dbv5-html-data .tagsmy span.remove,
.dbv5-html-data .listTags span.remove {
	font-size: 0.9em;
	padding-right: 7px;
	padding-bottom: 5px;
}

.tags_personal .acInput {
	display:none;
}

.tag_personal {
	border-style:inset;
}

.personal_tag_form, .filter_tag {
	margin-top:5px;
}

.filter_tag .acInput{
	display:none;
}

.tags_personal div {
	margin-bottom: 10px;
	display: inline-block;
}

.tags_personal div a.cloud_personal_tag {
	font-weight: lighter;
	color: #FFF;
	background-color:#FE8027 !important;
	padding: 1px 6px;
	margin: 1px 3px;
	border: 0px;
}

.dbv5-html-data .tags_personal span.remove {
	font-size: 0.9em;
	padding-right: 7px;
	padding-bottom: 5px;
}

.tags_column {
	max-width: 200px;
}

span.remove {
	cursor:pointer;
}

form .tags input {
	margin-bottom:3px;
	border:solid black 1px;
}
.padding10right {
	padding-right: 10px;
}

/* invite text at end of page */

.inviteMessage {
	padding: 10px 5px; /* align with text in the table footer and page footer */
	color: #323232;
	font-size: 15px;
}

.inviteMessage a {
	color: #FE8027;
	text-decoration: none;
}

.inviteMessage a:hover {
	text-decoration: underline;
}

#edit_headerLinks a {
	color: #fff;
	padding: 1px 6px;
	border: 1px solid #f4f4f5;
	display: inline-block;
	font-weight: normal;
	background-color: #2F770C;
}

/* end invite text at end of page */

/* media queries */

@media only screen and (max-width: 43em) {

	a.header_search {
		width: 40px;
	}

}

@media only screen and (max-width : 36em)  {

	div.header_searchboxdiv {
		min-width: 30px;
		max-width: 100px;
	}

	a.header_search {
		width: 32px;
	}

	div.header_searchcenterizer {
		margin-left: 2px;
	}


	td.padding10right {
		padding-right: 0;
	}

	.padding10left {
		padding-left: 0;
	}

	.news {
		margin:1.5%;
	}

	.slideMenu {
		left:225px !important;
	}

	#settingsMenu {
		width:225px;
	}

	/* size of headlines */

	.priority0, .priority1, .priority2, .priority3 {
		font-size:15px;
		line-height:19px;
	}

	.priority4 {
		font-size:17px;
		line-height:21px;
	}

	.priority5 {
		font-size:21px;
		line-height:25px;
	}

	.list_titleOfCollapsedItem.priority0, .list_titleOfCollapsedItem.priority0 a,
	.list_titleOfCollapsedItem.priority1, .list_titleOfCollapsedItem.priority1 a,
	.list_titleOfCollapsedItem.priority2, .list_titleOfCollapsedItem.priority2 a,
	.list_titleOfCollapsedItem.priority3, .list_titleOfCollapsedItem.priority3 a {
		font-size:14px;
		line-height:18px;
	}

	.list_titleOfCollapsedItem.priority4, .list_titleOfCollapsedItem.priority4 a {
		font-size:17px;
		line-height:21px;
	}

	.list_titleOfCollapsedItem.priority5, .list_titleOfCollapsedItem.priority5 a {
		font-size:21px;
		line-height:25px;
	}

}

@media screen and (max-width: 28em) {
	div.bigsearchmode {
		display: none;
	}

	div.smallsearchmode {
		display: block;
	}
}

@media screen and (max-width: 25em) {

	header {
		letter-spacing:-.5px
	}

	#period input[type=text] {
		width: 75px;
	}

	div.advancedsearch {
		text-align: center;
	}

	.loginForm {
		text-align: center;
	}

	.loginButton {
		text-align: center;
	}

	#genderText {
		width: 70px;
	}

	#emailReactivate {
		width: 10em
	}

	/* small invite form */
	.inviteMini_formLabels {
		width: 20%;
	}
	#inviteMini_fullname, #inviteMini_email {
		width: 80%;
	}

}

@media screen and (max-width: 23em) {
	.img-total-comment {
		display: none;
	}

}

/* web overlay (gijze vlak over hele pagina wanneer je klikt op de menu knop) */
.web_overlay{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:#000;
	opacity:0.25;
	filter:alpha(opacity=20);
	z-index:5300;
	display:none;
}

.media img {
	display: block;
	height: auto;
	max-width: 100%;
	padding: 6px 0 !important;
}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
	max-width: 698px;
}

.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 6px 0;
}

/* EDITOR */
.editor .urlcheck-result {
	margin-left: 5px;
	font-weight: bold;
	color: rgb(255, 119, 0);
	font-size: 8px;
}

.editor .tinymce {
	min-width: 450px;
	border: 1px solid #000;
	min-height: 60px;
	padding: 1px;
	margin: 1px;
}

.menuCadeau {
	color: #3B9C02;
	font-weight: bold;
	font-size: 1em;
}

/* TWITTER
 * https://dev.twitter.com/web/overview/css
 */
iframe.twitter-tweet {
	max-width: 100% !important;
}

blockquote.twitter-tweet {
	display: inline-block;
	padding: 16px;
	margin: 10px 0;
	max-width: 468px;
	border: #ddd 1px solid;
	border-top-color: #eee;
	border-bottom-color: #bbb;
	border-radius: 5px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.15);
	font: bold 14px/18px Helvetica, Arial, sans-serif;
	color: #000;
}

blockquote.twitter-tweet p {
	font: normal 18px/24px Georgia, "Times New Roman", Palatino, serif;
	margin: 0 5px 10px 0;
}

blockquote.twitter-tweet a[href^="https://twitter.com"] {
	font-weight: normal;
	color: #666;
	font-size: 12px;
}

.section_hasContent{
	font-weight: bold;
	padding-top: 5px;
}

.section_content{
	font-weight: normal;
}

/* image border prio color */
.breakingColor {
	background-color: #FD2E2E;
}

.prio5Color {
	background-color: #5A24FB;
}

.prio4Color {
	background-color: #F728AB;
}

.prio3Color {
	background-color: #FF6620;
}

.prio2Color {
	background-color: #FFA520;
}

.prio0Color, .prio1Color {
	background-color: #ffef20;
}

/* Popup */
.popup {
	position: fixed;
	background: #FFFFFF;
	box-shadow: 0px 0px 12px #666666;
	padding: 100px 0px;
	padding-top: 25px;
	padding-bottom: 30px;
	width: 80%;
	max-width: 400px;
	z-index: 7000;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	left: 50%;
	top: 50%;
	text-align: center;
}
.popup h2{
	padding: 5px;
}
.popup p{
	padding-top: 20px;
	padding-right: 50px;
	padding-left: 50px;
	font-size: 11pt;
	padding-bottom: 5px;
}
.popup button{
	width: 70%;
	max-width: 295px;
	padding: 2px 6px 3px;
	height: 35px;
}
.close-popup{
	cursor: pointer;
	position: absolute;
	right: 0;
	padding-right: 10px;
	margin-top: -10px;
	padding-bottom: 20px;
}

@media (pointer: coarse){
	.del_button{
		opacity:1;
		float: right;
		padding-right: 5px;
	}
}

.collapseRelAlerts {
	display: none;
}

.alertTriangle {
	float: left;
	margin-right: 15px;
}

.jscroll-added td {
	white-space: normal !important; 
}

td.date {
	min-width: 87px;
}

td.source {
	min-width: 170px;
	word-wrap: break-word;
	word-break: break-all;
}

.favImg {
	margin-left: 5px;
	width: 20px;
	height: 20px;
}

/**
 * Transition voor de overgang in markering naar invalidValue en terug.
**/
input[type='text'][class*='idd-datepicker-'] {
	position: relative;
	/* Kalender icon */
	background-image: url("data:image/svg+xml,%3Csvg width='24px' height='24px' viewBox='0 0 24 24' fill='hsl(212, 90%, 53%)' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z'/%3E%3C/svg%3E");
	background-size: 16px auto, 100%;
	background-position: right 3px top 50%, 0 0;
	background-repeat: no-repeat, repeat;
	transition: all .2s ease-in-out 0s;
}

/**
 * Markeer de input met rood, wanneer er een ongeldige invoer is.
**/
input[type='text'][class*='idd-datepicker-'].invalidValue {
	background-color: hsla(0, 70%, 50%, .1);
	border-color: hsl(0, 70%, 50%);
	color: hsl(0, 70%, 25%);
}

/**
 * Verduister de achtergrond bij datepicker op mobile.
**/
div#idd-datepicker-overlay {
	position: fixed;
	top: 0;
	left: 0;
	display: none;
	width: 100vw;
	height: 100vh;
	background-color: hsla(0, 0%, 0%, .2);
	z-index: 190;
}

.idd-datepicker {
	position: absolute;
	display: flex;
	white-space: nowrap;
	color: hsl(0, 0%, 20%);
	font-size: 14px;
	font-family: 'Avenir', Arial, sans-serif;
	font-weight: 500;
	line-height: 1.4;
	z-index: 99999;
}

/** Bij een timepicker krijgen we meer opties waar een grid structuur voor nodig is **/
.idd-datepicker.idd-timepicker {
	display: grid;
	grid-template-areas: 
	        "date"
	        "time";
	grid-gap: 8px;
}

/** Bij een startendpicker krijgen we meer opties waar een grid structuur voor nodig is **/
.idd-datepicker.idd-startendpicker {
	display: grid;
	grid-template-areas: 
	        "duration duration"
	        "tabGroup tabGroup"
	        "date preset"
	        "time time";
	grid-gap: 8px;
}

.idd-datepicker a {
	text-decoration: none;
}

/***************************************
    .idd-datepicker-panel
***************************************/
.idd-datepicker-panel {
	display: flex;
	background-color: white;
	border-radius: 4px;
	box-shadow: 0 5px 15px -5px hsla(0, 0%, 0%, .5);
}

/***************************************
    .idd-datepicker-nav
***************************************/
.idd-datepicker-nav {
	display: flex;
	justify-content: space-between;
	padding: 0 6px 0 8px;
	align-items: center;
	color: hsl(0, 0%, 10%);
}

.idd-datepicker-nav span {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	color: hsl(0, 0%, 20%);
	min-width: 32px;
	min-height: 32px;
	border-radius: 50px;
	font-size: 18px;
	font-weight: 600;
	cursor: pointer;
	outline: none;
	transition: all .2s;
	user-select: none;
}

.idd-datepicker-nav span.idd-datepicker-disabled {
	color: hsl(0, 0%, 85%);
	cursor: default;
}

.idd-datepicker-nav span:not(.idd-datepicker-disabled):hover {
	background-color: hsla(0, 0%, 30%, .25);
}

.idd-datepicker-headerTitles > span {
	margin: 0 -2px;
	padding: 0 6px;
	font-size: 22px;
	font-weight: 500;
}

span.idd-datepicker-yeartitle {
	color: hsl(210, 100%, 50%);
}

span.idd-datepicker-yeartitle:hover {
	background-color: hsla(210, 100%, 50%, .2);
}


/***************************************
    .idd-datepicker-calendar
***************************************/
.idd-datepicker-calendar {
	grid-area: date;
	display: flex;
	flex-direction: column;
	width: 260px;
	background-color: white;
	border-radius: 4px;
	box-shadow: 0 10px 20px hsla(0, 0%, 0%, .2),
	            0 6px 6px hsla(0, 0%, 0%, .25);
	padding: 6px;
}

.idd-datepicker-grid-row {
	display: flex;
	flex-wrap: wrap;
}

.idd-datepicker-grid-row:empty {
	display: none;
}

.idd-datepicker-cell {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 32px;
	min-height: 32px;
	border-radius: 6px;
	margin: 1px 0;
	padding: 0;
	box-sizing: border-box;
	color: hsl(0, 0%, 20%);
	cursor: pointer;
	transition: all .2s;
}

.idd-datepicker-cell.idd-datepicker-disabled {
	color: hsl(0, 0%, 85%);
	cursor: default;
}

.idd-datepicker-cell:not(.idd-datepicker-disabled):hover {
	color: hsl(210, 100%, 50%);
	font-weight: 800;
}

.idd-datepicker-cell:not(.idd-datepicker-disabled):active {
	background-color: hsl(210, 100%, 95%);
}

.idd-datepicker-cell:not(.idd-datepicker-disabled)::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 6px;
	box-shadow: inset 0 0 0 1px hsl(210, 100%, 50%);
	transform: scale(0);
	transition: all .2s;
}

.idd-datepicker-cell:not(.idd-datepicker-disabled):hover::after {
	transform: scale(1);
}

.idd-datepicker-cell:not(.idd-datepicker-disabled):active::after {
	box-shadow: inset 0 0 0 2px hsl(210, 100%, 50%);
}

/***************************************
    .idd-datepicker-view-days
***************************************/
.idd-datepicker-view-days {
	align-self: center;
}

.idd-datepicker-weekdays {
	padding-left: 22px;
}

.idd-datepicker-weekday {
	display: inline-block;
	font-size: 12px;
	text-align: center;
	width: 32px;
	height: 16px;
	color: hsl(0, 0%, 70%);
}

[class*='idd-datepicker-cell-day-weekNumber'] {
	width: 17px;
	min-width: auto;
	border-radius: 4px 0 0 4px;
	margin-left: 5px;
	color: hsl(0, 0%, 60%);
	font-size: 10px;
	cursor: default;
	user-select: none;
	pointer-events: none;
}

/** Today cell **/
[class$='-today'] {
	background-color: hsl(210, 100%, 95%);
	color: hsl(210, 100%, 50%);
	font-weight: 600;
}

[class*='idd-datepicker-cell-day-start'] {
	background-color: hsl(210, 100%, 50%);
	border-radius: 6px 0 0 6px;
	/* box-shadow: inset 0 0 0 1px hsl(210, 100%, 60%); */
	color: white;
}

[class*='idd-datepicker-cell-day-end'] {
	background-color: hsl(210, 100%, 50%);
	border-radius: 0 6px 6px 0;
	/* box-shadow: inset 0 0 0 1px hsl(210, 100%, 60%); */
	color: white;
}

[class*='idd-datepicker-cell-day-start']:hover,
[class*='idd-datepicker-cell-day-end']:hover {
	background-color: hsl(210, 100%, 60%);
	box-shadow: inset 0 0 0 2px hsl(210, 100%, 50%);
	color: white;
}

[class*='idd-datepicker-cell-day-start']::after,
[class*='idd-datepicker-cell-day-end']::after {
	display: none;
}

/** Between cell **/
[class*='idd-datepicker-cell-day-between'],
.idd-datepicker-cell-day-weekNumber-between {
	background-color: hsl(210, 100%, 60%);
	border-radius: 0;
	color: white;
}

.idd-datepicker-cell-day-between-today {
	background-color: hsl(210, 100%, 50%);
}

/** Rondje hoekjes links **/
[class*='idd-datepicker-cell-day-weekNumber'] {
	border-radius: 4px 0 0 4px;
}

/** Rondje hoekjes rechts **/
[class*='idd-datepicker-cell-day-between']:last-of-type {
	border-radius: 0 4px 4px 0;
}

/***************************************
    .idd-datepicker-time
***************************************/
.idd-datepicker-time {
	grid-area: time;
	display: flex;
	justify-content: space-around;
	background-color: white;
	border-radius: 4px;
	box-shadow: 0 10px 20px hsla(0, 0%, 0%, .2),
	            0 6px 6px hsla(0, 0%, 0%, .25);
	padding: 6px;
	z-index: 1;
}

.idd-datepicker-time-title {
	color: hsl(0, 0%, 50%);
	text-align: center;
}

.idd-datepicker-time-hours > div {
	width: 204px;
	border-right: 1px solid hsl(0, 0%, 85%);
}

.idd-datepicker-time-minutes > div {
	width: 102px;
}

/***************************************
    .idd-datepicker-view-years / .idd-datepicker-view-months
***************************************/
.idd-datepicker-view-months,
.idd-datepicker-view-years {
	padding: 8px;
}

.idd-datepicker-view-months .idd-datepicker-cell-month,
.idd-datepicker-view-years .idd-datepicker-cell-year {
	width: 25%;
	min-height: 40px;
}

/***************************************
    .idd-datepicker-controls
***************************************/
.idd-datepicker-controls {
	display: flex;
	justify-content: space-between;
	border-top: 1px solid hsl(0, 0%, 85%);
}

.idd-datepicker-controls button[class^='idd-datepicker-button-'] {
	width: 100%;
	background-color: hsl(210, 100%, 50%);
	box-shadow: inset 0 -.08em 0 .05em hsla(0, 0%, 0%, .05), inset 0 -.1em .1em .06em hsla(0, 0%, 0%, .15), inset 0 .7em 1.4em 0 hsla(0, 0%, 100%, .1), 0 .2em .6em -.2em hsla(0, 0%, 0%, .6);
	border-radius: .2em;
	margin: 6px;
	color: white;
	font-size: 14px;
	line-height: 20px;
	box-sizing: border-box;
	text-decoration: none;
	transition: all .2s;
	outline: none;
	cursor: pointer;
}

.idd-datepicker-controls button.idd-datepicker-button-cancel {
	background-color: white;
	box-shadow: none;
	color: hsl(210, 100%, 50%);
}

.idd-datepicker-controls button.idd-datepicker-button-save:hover {
	background-color: white;
	box-shadow: inset 0 0 0 1px hsl(210, 100%, 50%);
	color: hsl(210, 100%, 50%);
}

.idd-datepicker-sidebar {
	grid-area: preset;
	background-color: white;
	border-radius: 4px;
	box-shadow: 0 10px 20px hsla(0, 0%, 0%, .2),
	            0 6px 6px hsla(0, 0%, 0%, .25);
}

.idd-datepicker-sidebar > span {
	display: block;
	border-top: 1px solid hsl(0, 0%, 90%);
}

[class^='idd-datepicker-allDay'] {
	display: block;
	padding: 4px 6px;
	color: hsl(0, 0%, 60%);
	transition: all .2s;
	cursor: pointer;
}

[class^='idd-datepicker-allDay']:hover,
.idd-datepicker-allDay-active {
	background-color: hsl(210, 100%, 95%);
	color: hsl(210, 100%, 50%);
}

/**
 * Lichte achtergrond kleur voor feedback over wat je selecteerd.
**/
.idd-datepicker-allDay:hover label:before {
	background-color: hsla(210, 100%, 50%, .25);
	border-color: hsl(210, 100%, 50%);
}

/**
 * Waar de nieuwe checkbox en tekst in zitten.
**/
[class^='idd-datepicker-allDay'] label {
	position: relative;
	padding-left: 20px;
	font-size: 12px;
	line-height: 1em;
	cursor: pointer;
	pointer-events: none;
}

/**
 * De checkbox die je ziet.
**/
[class^='idd-datepicker-allDay'] label:before,
[class^='idd-datepicker-allDay'] label:after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	box-sizing: border-box;
}

/**
 * De box van de checkbox.
**/
[class^='idd-datepicker-allDay'] label:before {
	top: 0;
	width: 16px;
	height: 16px;
	background-color: white;
	box-shadow: inset 0 -.08em 0 0 hsla(0, 0%, 0%, .08), 0 .05em .1em .05em hsla(0, 0%, 0%, .1);
	border: .08em solid hsl(0, 0%, 65%);
	border-radius: .2em;
	cursor: pointer;
	transition: background-color .3s;
	box-sizing: border-box;
}

.idd-datepicker-allDay-active:hover {
	color: hsla(210, 100%, 50%, .5);
}

.idd-datepicker-allDay-active:hover label:before {
	background-color: hsla(210, 100%, 50%, .5);
}

/**
 * Verander achtergrond van kleur bij active.
**/
.idd-datepicker-allDay-active label:before {
	background-color: hsl(210, 100%, 50%);
	border: none;/* Door hier none te doen en in after toe te voegen komt er een springent effect */
}

/**
 * Voeg check teken toen wanneer active is.
**/
.idd-datepicker-allDay-active label:after {
	transform: translate(2px, 4px) rotate(-45deg);
	width: 12px;
	height: 6px;
	border: 2px solid white;
	border-top-style: none;
	border-right-style: none;
}

[class^='idd-datepicker-preset-']:empty {
	display: none;
}

a[class^='idd-datepicker-preset'] {
	display: block;
	padding: 4px 10px;
	color: hsl(0, 0%, 70%);
	font-size: 12px;
	white-space: nowrap;
	cursor: default;
	transition: all .2s ease-in-out;
}

a.idd-datepicker-preset {
	color: hsl(0, 0%, 35%);
	cursor: pointer;
}

a.idd-datepicker-preset:hover {
	background-color: hsl(210, 100%, 95%);
	color: hsl(210, 100%, 50%);
}

.idd-datepicker-duration {
	grid-area: duration;
	background-color: white;
	border-radius: 4px;
	box-shadow: 0 10px 20px hsla(0, 0%, 0%, .2),
	            0 6px 6px hsla(0, 0%, 0%, .25),
	            0 0 6px -2px hsla(0, 0%, 0%, .5);
	padding: 4px;
	text-align: center;
}

.idd-datepicker-tabGroup {
	grid-area: tabGroup;
	display: flex;
}

.idd-datepicker-tab {
	flex: 1;
	background-color: white;
	border-radius: 4px;
	box-shadow: 0 10px 20px hsla(0, 0%, 0%, .2),
	            0 6px 6px hsla(0, 0%, 0%, .25);
	padding: 4px 8px;
	color: hsl(0, 0%, 50%);
	cursor: pointer;
	transition: all .2s;
}

.idd-datepicker-tab + .idd-datepicker-tab {
	margin-left: 8px;
}

.idd-datepicker-tab.active-date {
	background-color: hsl(210, 100%, 50%);
	color: white;
}

.idd-datepicker-tab.inactive-date:hover {
	background-color: hsl(210, 100%, 95%);
	box-shadow: 0 10px 20px hsla(0, 0%, 0%, .2),
	            0 6px 6px hsla(0, 0%, 0%, .25),
	            inset 0 0 0 2px hsl(210, 100%, 50%);
	color: hsl(210, 100%, 50%);
}

.idd-datepicker-tab span.tab-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	font-size: 16px;
	font-weight: 500;
}

/** Month, day, time **/
.idd-datepicker-tab span.tab-row span#datetab-bottom-date {
	font-size: 18px;
	white-space: nowrap;
}

.idd-datepicker-tab span.tab-row button.clearBtn {
	background: transparent;
	border: none;
	margin: -1px -4px -1px 0;
	padding: 1px 4px 1px 4px;
	box-shadow: none;
	color: hsla(0, 0%, 100%, .5);
	font-size: 12px;
	cursor: pointer;
	outline: none;
	transition: all .2s ease-in-out;
}

.idd-datepicker-tab span.tab-row button.clearBtn:hover {
	background-color: hsla(0, 100%, 70%, .65);
	box-shadow: 0 0 0 1px hsl(0, 70%, 35%);
	color: hsl(0, 0%, 100%);
}

.idd-datepicker .idd-datepicker-hide {
	display: none;
}

@media (max-width: 768px) {

	.idd-datepicker {
		position: fixed;
		left: 50% !important; /* Inline css overschrijven */
		top: 50% !important; /* Inline css overschrijven */
		grid-gap: 20px;
		transform: translate(-50%, -50%);
		padding: 8px;
		box-sizing: border-box;
	}

}

/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg,
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer {
	max-width: none !important;
	}

.leaflet-container.leaflet-touch-zoom {
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	-ms-touch-action: pinch-zoom;
	}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	-ms-touch-action: none;
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	z-index: 800;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
	}


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-tile {
	will-change: opacity;
	}
.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	   -moz-transition: opacity 0.2s linear;
	     -o-transition: opacity 0.2s linear;
	        transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
	}
.leaflet-zoom-anim .leaflet-zoom-animated {
	will-change: transform;
	}
.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	     -o-transition:      -o-transform 0.25s cubic-bezier(0,0,0.25,1);
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	-webkit-transition: none;
	   -moz-transition: none;
	     -o-transition: none;
	        transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}


/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor: -webkit-grab;
	cursor:    -moz-grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline: 0;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-container a.leaflet-active {
	outline: 2px solid orange;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a,
.leaflet-bar a:hover {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}


/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-control-layers-toggle {
	background-image: url(images/layers.png);
	width: 36px;
	height: 36px;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(images/layers-2x.png);
	background-size: 26px 26px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */
.leaflet-default-icon-path {
	background-image: url(images/marker-icon.png);
	}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.7);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover {
	text-decoration: underline;
	}
.leaflet-container .leaflet-control-attribution,
.leaflet-container .leaflet-control-scale {
	font-size: 11px;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	font-size: 11px;
	white-space: nowrap;
	overflow: hidden;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;

	background: #fff;
	background: rgba(255, 255, 255, 0.5);
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 19px;
	line-height: 1.4;
	}
.leaflet-popup-content p {
	margin: 18px 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;

	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	     -o-transform: rotate(45deg);
	        transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	padding: 4px 4px 0 0;
	border: none;
	text-align: center;
	width: 18px;
	height: 14px;
	font: 16px/14px Tahoma, Verdana, sans-serif;
	color: #c3c3c3;
	text-decoration: none;
	font-weight: bold;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover {
	color: #999;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	border-bottom: 1px solid #ddd;
	border-top: 1px solid #ddd;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}
.leaflet-oldie .leaflet-popup-tip-container {
	margin-top: -1px;
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}


/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-clickable {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow {
	-webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in;
	-moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-in;
	-o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-in;
	transition: transform 0.3s ease-out, opacity 0.3s ease-in;
}

.leaflet-cluster-spider-leg {
	/* stroke-dashoffset (duration and function) should match with leaflet-marker-icon transform in order to track it exactly */
	-webkit-transition: -webkit-stroke-dashoffset 0.3s ease-out, -webkit-stroke-opacity 0.3s ease-in;
	-moz-transition: -moz-stroke-dashoffset 0.3s ease-out, -moz-stroke-opacity 0.3s ease-in;
	-o-transition: -o-stroke-dashoffset 0.3s ease-out, -o-stroke-opacity 0.3s ease-in;
	transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in;
}

.marker-cluster-small {
	background-color: rgba(181, 226, 140, 0.6);
	}
.marker-cluster-small div {
	background-color: rgba(110, 204, 57, 0.6);
	}

.marker-cluster-medium {
	background-color: rgba(241, 211, 87, 0.6);
	}
.marker-cluster-medium div {
	background-color: rgba(240, 194, 12, 0.6);
	}

.marker-cluster-large {
	background-color: rgba(253, 156, 115, 0.6);
	}
.marker-cluster-large div {
	background-color: rgba(241, 128, 23, 0.6);
	}

	/* IE 6-8 fallback colors */
.leaflet-oldie .marker-cluster-small {
	background-color: rgb(181, 226, 140);
	}
.leaflet-oldie .marker-cluster-small div {
	background-color: rgb(110, 204, 57);
	}

.leaflet-oldie .marker-cluster-medium {
	background-color: rgb(241, 211, 87);
	}
.leaflet-oldie .marker-cluster-medium div {
	background-color: rgb(240, 194, 12);
	}

.leaflet-oldie .marker-cluster-large {
	background-color: rgb(253, 156, 115);
	}
.leaflet-oldie .marker-cluster-large div {
	background-color: rgb(241, 128, 23);
}

.marker-cluster {
	background-clip: padding-box;
	border-radius: 20px;
	}
.marker-cluster div {
	width: 30px;
	height: 30px;
	margin-left: 5px;
	margin-top: 5px;

	text-align: center;
	border-radius: 15px;
	font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
	}
.marker-cluster span {
	line-height: 30px;
	}
/* general */

#map img {
	border-style: none;
	border-radius: 0;
} 

#map {
	width: 100%;
	height: 384px;
	border: none;
	padding: 0;
	display:none;
	background: white;
}

/* popup */

.leaflet-popup-content-wrapper {
	border-radius: 0px;
	box-shadow: 0px 1px 8px rgba(0,0,0,0.4);
}

.leaflet-popup-content {
	margin: 0px 0px 1px;
	line-height: 1;
}

.leaflet-container a.leaflet-popup-close-button {
	padding: 0;
	width: 10px;
	height: 10px;
	font: 10px Tahoma, Verdana, sans-serif;
}

.leaflet-popup-tip {
	box-shadow: none;
	width: 0px;
	height: 0px;
	border-width: 20px 5px 0px;
	border-style: solid solid dotted;
	border-color: #fff transparent transparent;
	background: transparent;
	padding: 0;
	margin: 0 15px;

	-webkit-transform: rotate(360deg);
	   -moz-transform: rotate(0deg);
	    -ms-transform: rotate(0deg);
	     -o-transform: rotate(0deg);
	        transform: rotate(0deg);
}

.leaflet-oldie .leaflet-popup-tip {
	width: 0px;
	height: 0px;
	border-width: 4px 4px 0px;
	border-style: solid;
	border-color: #fff transparent transparent;
	background: transparent;
	padding: 0px;

	-ms-filter: "none";
	filter: none;
}

.leaflet-popup-content-wrapper a:link {
	color:#4c4c4c;
	text-decoration:none;
}
.leaflet-popup-content-wrapper a:visited {
	color:#7a97b0;
}
.leaflet-popup-content-wrapper a:hover {
	color:#3ba4ff;
	text-decoration: underline;
}
.leaflet-popup-content-wrapper {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
	             "Droid Sans", "Helvetica Neue", sans-serif;
}

/* highlighted popup */

.popup-highlighted {
	z-index: 100;
}

.popup-highlighted-content {
	background: yellow;
	color: black;
}

.popup-highlighted > .leaflet-popup-content-wrapper {
	padding: 0;
	border: 1px solid yellow;
}

.popup-highlighted .leaflet-popup-content {
	margin: 0;
	border-bottom: 1px solid yellow;
}

.popup-highlighted .leaflet-popup-tip {
	border-color: yellow transparent transparent;
}

.popup-highlighted .leaflet-oldie .leaflet-popup-tip {
	border-color: yellow transparent transparent;
}

/* controls */

.leaflet-bar a,
.leaflet-bar a:hover {
	background-color: transparent;
	border-bottom: none;
}

.leaflet-bar a.leaflet-disabled {
	background-color: transparent;
}

.leaflet-container .leaflet-control-attribution {
	font-size: 20px;
	line-height: 1;
	padding: 0 3px;
	background: rgba(255, 255, 255, 0);
}

.control-close-button {
	font: bold 20px 'Lucida Console', Monaco, monospace;
	background: transparent;
	color: black;
}

.leaflet-oldie .control-close-button {
	border: 1px solid #999;
}

/* media queries */

@media screen and (max-width: 42em) {

	#map {
		height: 200px;
	}

	.leaflet-bar {
		border: none !important;
		box-shadow: none !important;
	}

	.control-close-button {
		font-size: 24px;
	}

	.leaflet-container .leaflet-control-attribution {
		padding: 1px 2px 0;
		font-size: 16px;
		background: rgba(255, 255, 255, 0);
	}

}

/* markercluster */

.marker-cluster-small {
	background-color: rgba(241, 211, 87, 0.6);
}
.marker-cluster-small div {
	background-color: rgba(240, 194, 12, 0.6);
}

.marker-cluster-medium {
	background-color: rgba(245, 200, 82, 0.6);
}
.marker-cluster-medium div {
	background-color: rgba(246, 160, 12, 0.6);
}
/*===( Service )===*/
#iddService {
  z-index: 10000;
  position: fixed;
  right: 0;
  bottom: 0;
  color: hsl(0, 0%, 30%);
  font: var(--common_font);
  font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
}


/*===( Icon )===*/
#iddService_icon {
  z-index: 1;
  position: absolute;
  right: 20px;
  bottom: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  box-sizing: border-box;
  background-color: coral;
  background-image: linear-gradient(135deg, transparent 0%,  hsl(35, 90%, 60%) 100%);
  box-shadow: 0 0 0 0 white, 0 2px 6px hsla(0, 0%, 0%, .2);
  border: none;
  border-radius: 50px;
  color: white;
  font-size: 30px;
  text-shadow: 0 2px 1px hsla(0, 0%, 0%, .2);
  cursor: pointer;
  user-select: none;
  transition-property: box-shadow, font-size;
  transition: .2s ease-in-out 0s;
}

/* Rondom highlight */
#iddService_icon:hover {
  box-shadow: 0 0 0 8px hsla(35, 100%, 50%, .25);
}

/* Indruk effect */
#iddService_icon:active {
  box-shadow: 0 0 0 6px hsla(35, 100%, 50%, .25);
  font-size: 25px;
}

/* Animatie voor in en uitbeeld brengen van element */
@keyframes scaleIn {

  0% {
    transform: scale(0);
  }

  70% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }

}

@keyframes scaleOut {

  0% {
    transform: scale(1);
  }

  30% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(0);
  }

}


/* Tekst ballon die aandacht trekt voor meer service vragen */
#iddService_balloon {
  position: relative;
  top: -80px;
  left: -60px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px 50px 0 50px;
  box-shadow: 0 4px 8px hsla(0, 0%, 0%, .2);
  background: linear-gradient(335deg, coral 0%, hsl(35, 90%, 60%) 100%) border-box;
  user-select: none;
  cursor: pointer;
  transform: scale(0);
  transform-origin: bottom right;
  animation-name: scaleIn;
  animation-duration: .5s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
  transition: box-shadow .2s ease-in-out 0s;
}

#iddService_balloon.scaleOut {
  animation-name: scaleOut;
  animation-delay: 0s;
}

/* Rondom highlight */
#iddService_balloon:hover {
  box-shadow: 0 0 0 8px hsla(35, 100%, 50%, .25);
}

/* Indruk effect */
#iddService_balloon:active {
  box-shadow: 0 0 0 6px hsla(35, 100%, 50%, .25);
}

#iddService_balloon > span {
  margin: 6px;
  padding: 12px;
  box-sizing: border-box;
  border-radius: inherit;
  box-shadow: inset 0 2px 6px hsla(0, 0%, 0%, .2);
  background-color: white;
}


/*===( Service Iframe )===*/
#serviceIframe {
  position: absolute;
  right: 20px;
  bottom: 50px;
  width: 440px;
  max-height: calc(100vh - 100px);
  box-shadow: 0 4px 8px hsla(0, 0%, 0%, .2);
  border: none;
  border-radius: 25px;
  transform: scale(0);
  transform-origin: bottom right;
  animation-duration: .5s;
  animation-fill-mode: forwards;
  transition: all .2s ease-in-out 0s;
}

#serviceIframe.scaleIn {
  animation-name: scaleIn;
}

#serviceIframe.scaleOut {
  animation-name: scaleOut;
}

/*===( Box )===*/
#iddService_box {
  max-width: 440px;
  background: linear-gradient(135deg, coral 0%,  hsl(35, 90%, 60%) 100%) border-box;
  border: none;
  border-radius: 25px;
  box-shadow: 0 6px 12px hsla(0, 0%, 0%, .2);
  margin: max(5vh, 20px) auto;
  padding: 10px;
  box-sizing: border-box;
  font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
}

/** Input velden **/
#iddService_box :is(input:is([type="text"],
                             [type="email"],
                             [type="url"]),
                    textarea) {
  width: auto;
  height: auto;
  background-color: white;
  box-shadow: 0 2px 4px hsla(0, 0%, 0%, .1);
  border: 1px solid lightgray;
  border-radius: 5px;

  padding: .4em;
  color: black;
  font-size: 16px;
  cursor: auto;
  resize: none;
  /* Zorgt er voor dat de buttons (inputs) er normaal uitzien op mobile */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/** Submit button **/
#iddService_box input[type="submit"] {
  background-image: linear-gradient(135deg, coral 0%,  hsl(35, 90%, 60%) 100%);
  width: 100%;
  box-shadow: 0 2px 6px hsla(0, 0%, 0%, .2);
  border:none;
  border-radius: 5px;
  padding: .5em 2em; /* Border van padding afhalen */
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: all .2s ease-out 0s;
  
  /* Zorgt er voor dat de buttons (inputs) er normaal uitzien op mobile */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/** Submit button bij hover **/
#iddService_box input[type="submit"]:hover {
  box-shadow: 0 0 0 6px hsla(15, 100%, 75%, .5);
}

/** Submit button bij activeren **/
#iddService_box input[type="submit"]:active {
  box-shadow: 0 0 0 4px hsla(15, 100%, 75%, .5);
}


/*===( Box > Head )===*/
#iddService_box-head {
  padding: 10px 20px 20px 20px;
  color: white;
  text-shadow: 0 1px 2px hsla(0, 0%, 0%, .25);
  text-align: center;
}

/** Titel boven in de border van het content vak **/
#iddService_box-head h1.title {
  margin: 0;
  font-size: 1.7em;
}

#iddService_box-head p {
  margin: 0;
}


/*===( Box > Content )===*/
#iddService_box-content {
  padding: 20px 40px;
  background-color: white;
  border-radius: 20px;
  box-shadow: inset 0 0 8px -4px black;
}

/** Opbouw in fieldset **/
#iddService_box-content ul {
  display: grid;
  gap: 20px;
  padding: 0;
  list-style: none;
}

/** niet ul li want te specifiek voor notabot.css */
#iddService_box-content li {
  display: flex;
  flex-direction: column;
}

#iddService_box-content ul li label {
  color: hsl(0, 0%, 40%);
  font-size: 1.2em;
  font-weight: 600;
}

#iddService_box-content ul li.service_info {
  display: none;
}

#iddService_box-content ul li#iddService_takeScreenshot {
  flex-direction: row;
}

#iddService_box-content ul li#iddService_takeScreenshot .material-icons {
  display: inline-flex;
  justify-content: center;
  border: solid 1px hsl(0, 0%, 40%);
  border-radius: 0.25em;
  width: 1em;
  height: 1em;
  margin: 0 10px 0 0;
  background-color: transparent;
  color: white;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: all .2s ease-in-out 0s;
}

#iddService_box-content ul li#iddService_takeScreenshot:hover .material-icons {
  box-shadow: 0 0 0 5px hsla(15, 100%, 75%, .5);
  border-color: coral;
}

#iddService_box-content ul li#iddService_takeScreenshot:hover {
  cursor: pointer;
  color: coral;
}

#iddService_box-content ul li#iddService_takeScreenshot:hover label {
  cursor: pointer;
}

/* foutmeldingtekst */
#iddService_box-content .service_error { 
  margin: 0;
  padding: 0;
  color: #F00;
}

/* expliciete inputs hierbij anders matcht het niet en zie je de rode border niet */
#iddService_box-content input.missing,
#iddService_box-content textarea.missing {
  border: solid 1px red;
  border-radius: 3px;
}

#iddService_box-content .service_error li {
  list-style: none;
}

/* Attachment */
#iddService_box-content #attachmentArea {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  border: 2px dashed hsl(0, 0%, 30%);
  border-radius: 12px;
  text-align: center;
  transition: background-color .3s ease-in-out;
  cursor: pointer;
}

/** Achtergrond groen bij hover **/
#iddService_box-content #attachmentArea:hover {
  background-color: hsl(135, 80%, 80%);
}

/** Maak gehele box aanklikbaar/dropbaar voor attachments **/
#iddService_box-content #attachmentArea input[type="file"] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* Titel van input */
#iddService_box-content ul li label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  transition: all .2s ease-in-out 0s;
}

/* Extra uitleg naast titel */
#iddService_box-content ul li label small {
  color: hsl(0, 0%, 60%);
  font-size: .8em;
}

#iddService_takeScreenshot {
  align-items: center;
}

#iddService_takeScreenshot i {
  margin-left: .5em;
  color: hsl(0, 0%, 60%);
  font-size: .8em;
  font-weight: 500;
}

@media screen and (max-width : 500px) {

  #serviceIframe {
    right: 10px;
    bottom: 10px;
  }

  #iddService_icon {
    right: 5px;
  }

  #iddService_box {
    margin: 0;
  }

}

@media print {

    #iddService_icon {
        display: none;
    }

}

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