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

}

html,
body {
	background: url('/images/polygon_backgrounds/polygon_background_1.svg');
	/* Create the parallax scrolling effect */
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;

	padding: 0;
	margin: 0;
	font-size: small;
	font-family: "Avenir", Arial, Helvetica, sans-serif;
}

/* Basic text */
p, h1, h2, h3, h4, h5, h6 {
	padding: 0;
	margin: 0;
	color: hsl(0, 0%, 20%);
	cursor: default;
}

h1 {
	font-size: 32px;
}

h2 {
	font-size: 24px;
}

h3 {
	font-size: 18px;
}

h4 {
	font-size: 16px;
}

h5 {
	font-size: 13px;
}

h6 {
	font-size: 10px;
}

a:hover,
a:active {
	cursor: pointer;
	text-decoration: underline;
}

/* Basic input */
textarea,
input,
input.text,
input[type="text"],
input[type="button"],
input[type="submit"],
.input-checkbox {
	-webkit-appearance: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  box-shadow: inset 0 0 0 30px hsl(0, 0%, 93%);
}

button {
	background-color: hsl(22, 90%, 55%);
	padding: 0;
	color: white;
	font-size: 15px;
	cursor: pointer;
	outline: none;
}

/* Keyframes */
@-webkit-keyframes typing {

	from {

		width: 0px;
	}

}

@-webkit-keyframes blink-caret {

	50% {

		border-color: transparent;
	}

}

@-webkit-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	40% {
		-webkit-transform: translateY(-30px);
		transform: translateY(-30px);
	}

	60% {
		-webkit-transform: translateY(-15px);
		transform: translateY(-15px);
	}
}

/*-*-*-*- Main-intro -*-*-*-*/
#main-intro {
	position: relative;
	width: 100vw;
	height: 100vh;

	background: url('/images/polygon_backgrounds/polygon_background_1.svg');
	/* Create the parallax scrolling effect */
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;

	background-color: hsl(225, 55%, 25%);
}

#main-intro ul {
	position: absolute;
	top: 45%;
	left: 50%;
	width: 90vw;
	padding: 0;
	margin: 0;
	color: white;
	text-align: center;
	list-style: none;
	transform: translate(-50%, -50%);
}

#main-intro p {
	margin: 15px;
	color: white;
	font-size: 20px;
}

#main-intro input {
	width: 30vw;
	min-width: 200px;
	max-width: 400px;
	height: 40px;

	border: none;
	border-radius: 5px 0px 0px 5px;

	padding: 0;
	font-size: 15px;
	line-height: 40px;
	outline: none;
	text-indent: 10px;
}

#main-intro input.validator {
	display: none;
} 

#main-intro .button {
	display: inline-block;
	width: 10vw;
	min-width: 100px;
	max-width: 200px;
	height: 40px;

	background-color: hsl(22, 90%, 55%);
	border: none;
	border-radius: 0px 5px 5px 0px;

	padding: 0;
	color: white;
	font-size: 15px;
	cursor: pointer;
	outline: none;
	line-height: 40px;
	transition: .3s ease-in-out;
}

#main-intro .button:hover {
	box-shadow: inset 0 0 0 1px #cc4b00,
					  0 0 0 4px rgba(255,126,51,.6),
					  0 2px 3px -1px rgba(153,56,0,.6);
	
}

/* Main-intro-title */
#main-intro-title {
	margin-bottom: 5vw;
	color: white;
	font-size: 5vw;
	font-weight: lighter;
	cursor: default;
}

#main-intro-title:after {
	content:'_';
}

/* Main-intro-mail */
#main-intro-mail {
	display: none;
	position: absolute;
	left: 50%;

	min-width: 300px;

	border-radius: 5px;

	margin: 25px auto;
	text-align: center;
	transform: translate(-50%);
}

/* pijltje op div */
#main-intro-mail:after {
	content: ' ';
	position: absolute;

	bottom: 99%;
	left: 50%;

	height: 0;
	width: 0;

	border: 10px solid transparent;
	border-bottom-color: white;

	margin-left: -10px;
	pointer-events: none;
}

#main-intro-mail p {
	width: 100%;
	height: 40px;

	background-color: hsl(0, 0%, 98%);
	border-radius: 5px 5px 0px 0px;

	margin: auto;
	color: hsl(0, 0%, 20%);
	font-size: 15px;
	line-height: 40px;
}

#main-intro-mail a {
	display: block;
	padding: 5px;
	color: white;
	text-decoration: none;
}

#main-intro-mail input {
	border-radius: 0px 0px 0px 5px;

	padding: 0;
	text-indent: 10px;
	outline: none;
}

#main-intro-mail button {
	border-radius: 0px 0px 5px 0px;
}

#main-intro-message {
	width: fit-content;
	width: -moz-fit-content;

	background-color: rgba(255, 255, 255, .1);
	border: 1px solid white;
	border-radius: 10px;

	padding: 20px;
	margin: auto;
	text-align: center;
	z-index: 1;
}

#main-intro-message h1 {
	color: white;
	font-size: 35px;
}

#main-intro-message p {
	color: white;
	font-size: 20px;
	padding-top: 10px;
}

#main-intro-message img {
	width: 35px;
	height: 35px;

	padding: 0 10px;
	filter: invert(1);
	vertical-align: -10%;
}

#main-intro-mail-done {
	width: fit-content;

	background-color: rgba(255, 255, 255, .1);
	border: 1px solid white;
	border-radius: 10px;

	padding: 15px 15px 5px 15px;
	margin: 25px auto;
}

#main-intro-mail-done h1 {
	color: white;
	font-size: 40px;
}

#main-intro-mail-done img {
	width: 35px;
	height: 35px;

	filter: invert(1);
}

/*-*-*-*- Algemene-voorwaarden / #link-kapot -*-*-*-*/
#algemene-voorwaarden {
	display: none;
}

#link-kapot,
#algemene-voorwaarden {
	background-color: hsl(0, 0%, 98%);
	color: hsl(0, 0%, 20%);
}

#link-kapot h1,
#algemene-voorwaarden h1 {
	text-align: center;
}

#link-kapot ul,
#algemene-voorwaarden ul,
#link-kapot .content {
	max-width: 800px;
}

#algemene-voorwaarden button {
	display: flex;
	margin: auto;

	background-color: hsl(0, 0%, 98%);
	border: 1px solid rgba(254, 62, 75, 1);
	border-radius: 5px;

	padding: 10px;

	color: rgba(254, 62, 75, 1);
	font-size: 0.7em;
	letter-spacing: 2px;
	text-transform: uppercase;

	cursor: pointer;
	transition: 0.4s ease-out;
	outline: none;
}

#algemene-voorwaarden button:hover {
	border-color: rgba(0, 0, 0, 0.5);
	color: hsl(0, 0%, 20%);
}

/*-*-*-*- Scroll-down-arrow -*-*-*-*/
.scroll-down-arrow {
	position: absolute;
	top: 80vh;
	left: 50vw;
	padding: 0;
	margin: 0;
	animation: bounce 2.5s infinite;
}

.scroll-down-arrow img {
	width: 40px;
	height: 40px;
	transform: rotate(270deg);
	filter: invert(1);
}

/*-*-*-*- Parallax -*-*-*-*/
.parallax {
	position: relative;
	height: 15vw; 
	min-height: 100px;
	max-height: 300px; /* mozilla */
}

#banner-1 {
	background: url('/images/polygon_backgrounds/polygon_background_2.svg');
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

#banner-2 {
	background: url('/images/polygon_backgrounds/polygon_background_3.svg');
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.polygon-banner {
	position: absolute;
	bottom: -5px;
	left: 0;
	width: 100vw;
}

.polygon-banner-rotate {
	position: relative;
	top: -5px;
	left: 0;
	width: 100vw;
	transform: rotate(180deg);
}

/*-*-*-*- Section -*-*-*-*/
section {
	display: flex;

	background-color: hsl(0, 0%, 98%);

	padding: 0 20px;
	margin: 0 auto;

	font-size: 16px;
	line-height: 1.4;
}

section p {
	text-align: justify;
}

.content {
	padding: 40px 5vw;
	margin: auto;
}

#uitleg h1,
#voorbeelden h1 {
	text-align: center;
}

#watiseknip p {
	max-width: 800px;
	line-height: 28px;
}

#voorbeelden {
	height: 100%;
	max-height: 1000px;
}

/*-*-*-*- Stappenplan -*-*-*-*/
#stappenplan {
	margin-top: 60px;
}

#stappenplan h1,
#stappenplan h5 {
	text-align: center;
}

.stappenplan {
	display: flex;
	background: linear-gradient(to right, rgba(255, 177, 0, .9) 0%,rgba(232, 35, 200, .9) 50%, rgba(56, 131, 235, .9) 100%);
	border-radius: 5px;
	padding: 0;
}

.stappenplan p {
	color: white;
	text-align: center;
}

.stappenplan li {
	position: relative;

	width: 100%;
	min-width: 100px;

	height: auto;
	min-height: 100px;
	max-height: 250px;

	padding: 5px 25px;
	text-align: center;
	list-style: none;
}

.stappenplan li:after {
	content: " ";
	position: absolute;

	top: 50%;
	left: 100%;

	border: solid transparent;
	border-left-color: white;
	border-width: 10px;

	margin-top: -10px;
	pointer-events: none;
	z-index: 1;
}

.stappenplan li:first-child {
	border-right: 1px solid white;
}

.stappenplan li:last-child {
	border-left: 1px solid white;
}

.stappenplan li img {
	width: 40px;
	height: 40px;
	margin-top: 10px;
	filter: invert(1);
}

/*-*-*-*- Abonnementen -*-*-*-*/
.abonnementen-title {
	color: hsl(0, 0%, 20%);
	font-size: 35px;
	text-align: center;
}

.abonnementen {
	display: flex;
	padding: 0;
	text-align: center;
	cursor: pointer;
}

/* Voor pointer effect bij hover */
.abonnementen p,
.abonnementen h2,
.abonnementen h3,
.abonnementen h4,
.abonnementen h6 {
	cursor: pointer;
	color: white;
}

.abonnementen hr {
	width: 2px;
	background-color: rgba(221, 221, 221, 1);
	border: none;
	margin: 10px;
}

.abonnementen li {
	max-width: 280px;
	margin: auto;
	list-style: none;
	transition: all .4s;
}

.abonnementen p {
	padding: 5px;
	font-size: 18px;
	text-align: center;
}

.abonnementen-btw {
	text-align: center;
	margin-bottom: 30px;
	cursor: pointer;
}

/* Package */
.package-title {
	display: flex;
	position: relative;
	min-height: 75px;

	border-radius: 5px 5px 0px 0px;

	padding: 0px 18%;
	margin: auto;
	align-items: center; /* vertical alignment */
}

.package-title:after {
	content: " ";
	position: absolute;

	top: 100%;
	left: 50%;

	width: 0;
	height: 0;

	border: solid transparent;
	border-width: 10px;

	margin-left: -10px;
	pointer-events: none;
}

.package-title img {
	float: left;
	width: 45px;
	filter: invert(1);
}

.package-title h6 {
	float: right;
	line-height: 70px;
}

.package-box {
	padding: 20px 10px;
	margin: 0 auto;
}

.package-footer {
	display: flex;
	position: relative;
	min-height: 75px;

	border-radius: 0px 0px 5px 5px;

	padding: 0;
	margin: auto;
}

.package-footer:after {
	content: " ";
	position: absolute;

	bottom: 76%;
	left: 50%;

	height: 0;
	width: 0;

	border: solid transparent;
	border-width: 10px;
	border-top-color: white;

	margin-left: -10px;
	pointer-events: none;
}

.package-footer h3 {
	font-size: 10px;
}

.package-footer h4 {
	padding: 0 3px;
}

.package-footer h3 span {
	padding: 0 3px;
	font-size: 20px;
}

/* Package:hover */
#small:hover,
#medium:hover,
#large:hover {
	transform: scale(1.1);
}

/* Klein abonnement */
#small p {
	color: rgba(55, 143, 234, 1);
}

#small .package-title,
#small .package-footer {
	background-color: rgba(55, 143, 234, 1);
}

#small .package-title:after {
	border-top-color: rgba(55, 143, 234, 1);
}

/* Middel abonnement */
#medium p {
	color: rgba(16, 185, 99, 1);
}

#medium .package-title,
#medium .package-footer {
	background-color: rgba(16, 185, 99, 1);
}

#medium .package-title:after {
	border-top-color: rgba(16, 185, 99, 1);
}

/* Groot abonnement */
#large p {
	color: rgba(254, 62, 75, 1);
}

#large .package-title,
#large .package-footer {
	background-color: rgba(254, 62, 75, 1);
}

#large .package-title:after {
	border-top-color: rgba(254, 62, 75, 1);
}

/*-*-*-*- Voorwaarden & Tarieven -*-*-*-*/
#voorwaarden-tarieven {
	max-width: 800px;
	margin-top: 50px;
}

#voorwaarden-tarieven p {
	display: none;
	max-width: 730px;
	line-height: 28px;
}

#voorwaarden-tarieven a {
	cursor: pointer;
}

#voorwaarden-tarieven hr {
	height: 1px;
	background-color: rgba(200, 200, 200, 1);
	border: none;
}

.voorwaarden-tarieven-title {
	color: hsl(0, 0%, 20%);
	text-align: center;
}

/*-*-*-*- Help -*-*-*-*/
#help {
	display: none;
}

#help_body {
	margin: auto;
}

#help_body h1 {
	text-align: center;
}

#help_field {
	max-width: 1000px;
	margin-bottom: 10px;
	padding: 25px;
	border-radius: 10px;
	color: rgba(113, 113, 113, 1);
	text-align: justify;
	line-height: 25px;
}

#help_field hr {
	border: .5px solid rgba(0, 0, 0, 0.1);
	margin: 20px auto;
}

#help_field h2,
#help_field h4,
#help_field p {
	color: rgba(113, 113, 113, 1);
}

#help_field h3,
#help_field strong {
	color: rgba(28, 103, 236, 1);
}

/*-*-*-*- Alleen touchscreen -*-*-*-*/
@media (pointer: coarse) {

	#main-intro,
	#banner-1,
	#banner-2 {
		background-attachment: local;
	}

}

#copyright {
	display: none;
}

#copyright h1 {
	text-align: center;
}

#copyright p {
	max-width: 800px;
	line-height: 28px;
}

/*-*-*-*- Schermen met een maximum van 600px breed -*-*-*-*/
@media screen and (max-width: 600px) {

	#main-intro-title {
		font-size: 8vw;
	}

	#main-intro p {
		font-size: 15px;
	}

	section {
		display: block;
	}

	.content,
	.sidebar {
		display: block;
		width: auto;
		max-width: 100%;
	}

	/* Stappenplan */
	.stappenplan {
		display: block;
		background: linear-gradient(to bottom, rgba(255, 177, 0, .9) 0%, rgba(232, 35, 200, .9) 50%, rgba(56, 131, 235, .9) 100%);
	}

	#stappenplan h1 {
		font-size: 28px;
	}

	.stappenplan li {
		width: auto;
	}

	.stappenplan li:after,
	.stappenplan li:before {
		top: 100%;
		left: 50%;
	}

	.stappenplan li:after {
		top: 100%;
		left: 50%;

		border-left-color: transparent;
		border-top-color: white;
		border-width: 10px;

		margin-top: 0;
		margin-left: -10px;
	}

	.stappenplan li:first-child {
		border-bottom: 1px solid white;
	}

	.stappenplan li:last-child {
		border-top: 1px solid white;
	}

	/* Abonnementen */
	.abonnementen {
		display: block;
	}

	.abonnementen hr {
		width: 100%;
		height: 1px;
		margin: 15px 0px;
	}

}
/**#################################################################################**/
/** =====                                                                     ===== **/
/** ===== Algemene CSS die voor alle pagina's binnen het dashboard nodig zijn ===== **/
/** =====                                                                     ===== **/
/**#################################################################################**/


/* Standaard/Light layout colors */
:root {
    /** Main colors **/
    --eknip-main-color-1: hsl(225, 55%, 25%);
    --eknip-main-color-2: hsl(22, 90%, 55%);

    /** Background colors **/
    --eknip-background-color-1: hsl(240, 25%, 96%);
    --eknip-background-color-2: hsl(240, 25%, 100%);

    /** SVG colors **/
    --eknip-svg-color-1: invert(100%) sepia(4%) saturate(57%) hue-rotate(247deg) brightness(90%) contrast(89%);
}

/* Dark layout colors */
html[data-theme="dark"] {
    
}

/**##################**/
/** ===== HTML ===== **/
/**##################**/
html {
    scroll-behavior: smooth;
    color: var(--eknip-text-color);
    font-family: 'Avenir', Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    text-size-adjust: none;
  }

/**##################**/
/** ===== Body ===== **/
/**##################**/
body {
    background-color: var(--eknip-background-color-1);
    margin: 0;
    padding: 0 0 0 140px;
    box-sizing: border-box;
    transition: padding 0.25s cubic-bezier(0.75, 0, 0.175, 1);
}

body.small {
    padding-left: 85px;
}

a {
    text-decoration: none;
}

.show-hide {
	display: block;
	width: 24px;
	height: 24px;
	cursor: pointer;
	filter: invert(51%) sepia(54%) saturate(669%) hue-rotate(336deg) brightness(104%) contrast(103%);;
}

/**#########################**/
/** ===== All buttons ===== **/
/**#########################**/
[class^='button-'] {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 48px;
    min-height: 24px;
    background-color: var(--eknip-main-color-2);
    border: none;
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px hsl(22, 100%, 40%),
                0 2px 3px -1px hsla(22, 100%, 30%, .6);
    margin: 0;
    padding: 0 2rem;
    box-sizing: border-box;
    color: white;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    text-shadow: 0px 0px 2px hsl(22, 100%, 40%);
    cursor: pointer;
    outline: none;
    transition: all .2s ease-in-out;
    -webkit-appearance: none;
}

/** ===== button-1 ===== **/
.button-1:hover {
    box-shadow: inset 0 0 0 1px hsl(22, 100%, 40%),
                0 0 0 4px hsla(22, 100%, 60%, .6),
                0 2px 3px -1px hsla(22, 100%, 30%, .6);
}

.button-1:active{
    background-color: hsl(22, 85%, 45%);
    box-shadow: inset 0 0 0 1px hsl(22, 100%, 40%),
                0 0 0 4px hsla(22, 100%, 80%, .4),
                0 2px 3px -1px hsla(22, 100%, 30%, .6);
}

/** ===== button-2 ===== **/
.button-2 {
    background-color: hsl(22, 90%, 90%);
    box-shadow: inset 0 0 0 1px hsl(22, 100%, 55%),
                0 2px 3px -1px hsla(22, 100%, 30%, .6);
    color: hsl(22, 100%, 40%);
    text-shadow: 0px 0px 2px hsl(22, 100%, 80%);
}

.button-2:hover {
    background-color: hsl(22, 90%, 95%);
    box-shadow: inset 0 0 0 1px hsl(22, 100%, 55%),
                0 0 0 4px hsla(22, 100%, 80%, .4),
                0 2px 3px -1px hsla(22, 100%, 30%, .6);
}

/** ===== button-3 ===== **/
.button-3 {
    background-color: transparent;
    padding: 0 1rem;
    box-shadow: none;
    color: hsl(22, 100%, 40%);
    text-shadow: none;
}

.button-3:hover {
    box-shadow: inset 0 0 0 1px hsl(22, 100%, 65%),
                0 0 0 4px hsla(22, 100%, 80%, .4);
}

/**#########################**/
/** ===== Inputs ===== **/
/**#########################**/
input[type='text'],
textarea,
select {
    min-width: 48px;
    min-height: 24px;
    background-color: var(--eknip-background-color-1);
    border: 1px solid hsl(240, 10%, 85%);
    border-radius: 2px;
    box-shadow: inset 0 1px 2px 0 hsl(240, 10%, 85%);
    margin: 0;
    padding: 0 .4rem;
    box-sizing: border-box;
    color: hsl(0, 0%, 20%);
    font-size: 1rem;
    font-family: inherit;
    outline: none;
    transition: all .15s ease-in;
    -webkit-appearance: none;
}

select {
    max-width: 180px;
    padding: 0 .4rem;
    text-overflow: ellipsis;
    -webkit-appearance: listbox;
}

input[type='text']::placeholder,
textarea::placeholder {
    color: hsl(0, 0%, 50%);
}
  
input[type='text']:focus,
textarea:focus {
    border-color: var(--eknip-main-color-1);
}

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
/* Portrait and Landscape */
@media only screen and (max-device-width : 736px) {

	body {
		padding: 0;
	}

	main::after,
	main::before {
		display: none;
	}

}
/**####################################################################**/
/** =====                                                        ===== **/
/** ===== CSS die alleen voor de main (contentn) pagina nodig is ===== **/
/** =====                                                        ===== **/
/**####################################################################**/

/* Standaard/Light layout colors */
:root {
	/** Box-shadows **/
	--eknip-content-shadow: 0 10px 20px hsla(0, 0%, 0%, .2),
	                        0 6px 6px hsla(0, 0%, 0%, 0.25);
}

/** input met button er aan vast geplakt **/
.input-with-submit {
	all: unset;
	display: inline-flex;
	/* border-radius: 2px;
	overflow: hidden; */
}

.input-with-submit input[type='text'] {
	border-radius: 2px 0 0 2px;
}

.input-with-submit input[type='submit'],
.input-with-submit input[type='button'] {
	border-radius: 0 2px 2px 0;
}

.input-with-submit input[type='text']:focus {
	background-color: var(--eknip-background-color-2);
}

/* Voor in titels */
.highlight-text {
  color: hsl(25, 100%, 60%);
}

/**##################**/
/** ===== main ===== **/
/**##################**/
main::after,
main::before {
	content: "";
	position: fixed;
	top: 0;
	width: calc(100vw - 140px); /* Volledige breedte - navigatie */
	height: 100vh;
	border-top-left-radius: 30px;
	box-shadow: 0 0 0 18px var(--eknip-main-color-1),
				inset 0 18px 0 0 var(--eknip-main-color-1);
	pointer-events: none;
}

/**#####################**/
/** ===== Section ===== **/
/**#####################**/
section {
	display: flex;
	flex-wrap: wrap;
	border-top: 1px solid hsl(240, 10%, 85%);
	padding: 30px 20px;
}

section:last-of-type {
	margin: 0;
}

.section-head {
	flex: 100%;
	margin: 0;
	padding: 15px;
}

.section-head h1 {
	margin: 0;
	color: var(--eknip-main-color-1);
	font-size: 2.5rem;
	font-family: 'Avenir Next', 'Avenir', Arial, sans-serif;
	text-align: left;
	text-decoration: underline;
	text-decoration-thickness: 4px;
	filter: drop-shadow(2px 2px 0 hsl(225, 25%, 70%));
}

/**#######################**/
/** ===== Container ===== **/
/**#######################**/
.container {
	flex: 100%;
	display: flex;
	flex-direction: column;
	background-color: var(--eknip-background-color-2);
	border-radius: 4px;
	box-shadow: var(--eknip-content-shadow);
	margin: 15px;
	overflow: hidden;
}

/** ===== container-half ===== **/
.container-half {
	flex: calc(50% - 30px);
}

/**############################**/
/** ===== Container head ===== **/
/**############################**/
.container-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	background-color: var(--eknip-main-color-1);
	margin: 0;
	padding: 5px 0;
	color: white;
	text-align: left;
}

/** ===== container-head-title ===== **/
.container-head-title {
	all: unset;
	flex: 1;
	padding: 5px 15px;
	font-size: 1.4rem;
	font-weight: 500;
}

.container-head-title.line-through {
	text-decoration: line-through double var(--eknip-main-color-2);
}

.container-head-title a {
	color: var(--eknip-main-color-2);
}

.container-head > span {
	display: flex;
	padding: 5px 15px;
}

/**###############################**/
/** ===== Container content ===== **/
/**###############################**/
.container-content {
	/* display: flex;
	flex-direction: column; */
	flex: 1;
	padding: 10px;
}

/**#####################################**/
/** ===== Container content table ===== **/
/**#####################################**/
.container-content-table {
	border-spacing: 0;
	margin: auto;
}

.container-content-table td {
	padding: 15px;
}

.container-content-table td:first-of-type {
	vertical-align: middle;
	min-width: 100px;
	font-weight: bold;
	text-align: right;
	white-space: nowrap;
}

.container-content-table td input[type='text'],
.container-content-table td textarea,
.container-content-table td select {
	min-height: 30px;
}

.container-content-table tr:not(:first-of-type):not(:last-of-type) td {
	border-top: 1px solid hsl(240, 10%, 85%);
}

/**#############################################**/
/** ===== Container content table buttons ===== **/
/**#############################################**/
.container-content-table-buttons {
	justify-content: flex-end;
}

.container-content-table-buttons > * {
	margin: 5px;
	white-space: nowrap;
}

/**####################################**/
/** ===== Container content info ===== **/
/**####################################**/
.container-content-info {
	background-color: var(--eknip-background-color-1);
	border-radius: 4px;
	overflow: hidden;
}

/** Standaard de extra informatie verbergen tot er op de I gedrukt wordt **/
div[id$='-extrainfo'] {
	display: none;
}

/**##############################**/
/** ===== Section knipsels ===== **/
/**##############################**/
section#knipsels .knipsels-bron-cell img {
    width: 20px;
	filter: invert(40%) sepia(90%) saturate(4909%) hue-rotate(212deg) brightness(95%) contrast(95%);
}

#knipsels_container .section-head a {
	color: var(--eknip-main-color-2);
}

#knipsels_container .data img {
	width: 20px;
	filter: invert(40%) sepia(90%) saturate(4909%) hue-rotate(212deg) brightness(95%) contrast(95%);
}

span.knipsels-bron-cell {
	display: inline-flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

span.knipsels-bron-cell a[href^='/e-kopie'] {
	padding-left: 5px;
}

/**###############################**/
/** ===== Section zoektaken ===== **/
/**###############################**/
/** Cheat om $totalnrrecords te laten werken, want die moet bovenaan geinclude worden **/
section#zoektaken .container:nth-of-type(2) {
	order: 2;
}

b.mk0 {
	background-color: rgba(218, 52, 0, .2);
	color: rgba(218, 52, 0, 1);
}

b.mk1 {
	background-color: rgba(0, 177, 0, .2);
	color: rgba(0, 177, 0, 1);
}

b.mk2 {
	background-color: rgba(255, 113, 91, .2);
	color: rgba(255, 113, 91, 1);
}

b.mk3 {
	background-color: rgba(0, 156, 255, .2);
	color: rgba(0, 156, 255, 1);
}

b.mk4 {
	background-color: rgba(255, 134, 0, .2);
	color: rgba(255, 134, 0, 1);
}

b.mk5 {
	background-color: rgba(113, 113, 113, .3);
	color: hsl(0, 0%, 20%);
}

b.mk6 {
	background-color: rgba(255, 84, 144, .2);
	color: rgba(255, 84, 144, 1);
}

b.mk7 {
	background-color: rgba(65, 104, 165, .2);
	color: rgba(65, 104, 165, 1);
}

b.mk8 {
	background-color: rgba(66, 109, 52, .2);
	color: rgba(66, 109, 52, 1);
}

/*-*-*-*- Statistieken -*-*-*-*/
.csp_onChange {
	max-width: 100px;
}

section#statistieken p {
	color: hsl(0, 0%, 20%);
}

section#statistieken #date_filter p {
	display: inline;
}

section#statistieken #date_filter span input[value="Nu"] {
	border-radius: 2px 0 0 2px;
}

section#statistieken #date_filter span input[value="All"] {
	border-left: 1px solid hsl(41, 96%, 44%);
	border-radius: 0 2px 2px 0;
	margin-left: -5px;
}

.legendForm input[type=button] {
	border-radius: 0 2px 2px 0;
}

.legendForm input[type=button]:first-child {
	border-right: 1px solid rgba(220, 153, 4, 1);
	border-radius: 2px 0 0 2px;
}

.legendForm table {
	margin: 25px auto 0px auto;
}

.legendForm table td {
	text-align: left;
}

section#statistieken .container-content img {
	width: 18px;
	height: 18px;
	margin-bottom: -5px;
	cursor: pointer;
	filter: invert(36%) sepia(41%) saturate(6747%) hue-rotate(211deg) brightness(94%) contrast(97%);
}

#graph_legenda form {
	 display: inline;
}

/** Landcodes & Taalcodes **/
span#settings_landcodes-taalcodes h3,
span#settings_landcodes-taalcodes a {
	display: inline-block;
}

/*-*-*-*- Help -*-*-*-*/
section#help .container-content tr th {
	border-bottom: 1px solid hsl(225, 25%, 60%);
	color: var(--eknip-main-color-1);
	font-size: 1.2rem;
}

section#help .container-content tr td {
	padding: 10px;
}

section#help .container-content tr:not(:last-of-type) td:not(:first-of-type) {
	border-bottom: 1px solid hsl(225, 25%, 80%);
}

section#help strong {
	color: var(--eknip-main-color-2);
}

/**#############**/
/** Land & Taal **/
/**#############**/
#body_landcodes-taalcodes {
	max-width: 1500px;
	margin: auto;
}

#field_landcodes-taalcodes {
	background-color: var(--eknip-background-color-2);
    margin-bottom: 10px;
    padding: 25px;
    border-radius: 4px;
    color: hsl(0, 0%, 20%);
    line-height: 25px;
}

#field_landcodes-taalcodes h2,
#field_landcodes-taalcodes h4,
#field_landcodes-taalcodes p {
	color: hsl(0, 0%, 20%);
	text-align: left;
}

/* ----------- iPhone 6, 6S, 7 and 8 / iPad Pro 12.9" ----------- */
/* Portrait and Landscape */
@media only screen and (max-device-width: 1366px) {

	.container-content-table {
		width: 100%;
		margin: 0;
	}

	.container-content-table tr {
		display: flex;
		flex-direction: column;
		padding: 10px;
	}
	
	.container-content-table td {
		display: flex;
		padding: 0;
	}

	.container-content-table td:first-of-type {
		flex-wrap: wrap;
	}

	.container-content-table td input[type='text'],
	.container-content-table td textarea,
	.container-content-table td select {
		width: 100%;
		max-width: none;
	}

	.container-content-table tr:not(:first-of-type):not(:last-of-type) td {
		border-top: none;
	}

}

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
/* Portrait and Landscape */
@media only screen and (max-device-width : 736px) {

	section {
		padding-top: 20px;
		padding-right: 0;
		padding-left: 0;
	}

	.section-head {
		position: sticky;
		top: 0;
		background-color: hsl(240, 25%, 96%);
		z-index: 1;
	}

	.container {
		border-radius: 0;
		margin: 20px 0;
	}

	.container-half {
		flex: auto;
	}

	.container-head > span {
		flex: 100%;
	}

}

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