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

/* Dit is nodig om gehele textarea klikbaar te maken ipv randje onder */
.input-reenabler {
  display: inline-block;
}

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

}

/**
 * Roboto license is located at https://iidesk.com/fonts/roboto/LICENSE
 **/

@font-face {
  font-family: "Roboto";
  src: url("/fonts/roboto/Roboto-Regular.woff2") format("woff2"),
       url("/fonts/roboto/Roboto-Regular.woff") format("woff");
}

@font-face {
  font-family: "Roboto-Italic";
  src: url("/fonts/roboto/Roboto-Italic.woff2") format("woff2"),
       url("/fonts/roboto/Roboto-Italic.woff") format("woff");
}

@font-face {
  font-family: "Roboto-Light";
  src: url("/fonts/roboto/Roboto-Light.woff2") format("woff2"),
       url("/fonts/roboto/Roboto-Light.woff") format("woff");
}

@font-face {
  font-family: "Roboto-LightItalic";
  src: url("/fonts/roboto/Roboto-LightItalic.woff2") format("woff2"),
       url("/fonts/roboto/Roboto-LightItalic.woff") format("woff");
}

@font-face {
  font-family: "Roboto-Thin";
  src: url("/fonts/roboto/Roboto-Thin.woff2") format("woff2"),
       url("/fonts/roboto/Roboto-Thin.woff") format("woff");
}

@font-face {
  font-family: "Roboto-ThinItalic";
  src: url("/fonts/roboto/Roboto-ThinItalic.woff2") format("woff2"),
       url("/fonts/roboto/Roboto-ThinItalic.woff") format("woff");
}

@font-face {
  font-family: "Roboto-Medium";
  src: url("/fonts/roboto/Roboto-Medium.woff2") format("woff2"),
       url("/fonts/roboto/Roboto-Medium.woff") format("woff");
}

@font-face {
  font-family: "Roboto-MediumItalic";
  src: url("/fonts/roboto/Roboto-MediumItalic.woff2") format("woff2"),
       url("/fonts/roboto/Roboto-MediumItalic.woff") format("woff");
}

@font-face {
  font-family: "Roboto-Bold";
  src: url("/fonts/roboto/Roboto-Bold.woff2") format("woff2"),
       url("/fonts/roboto/Roboto-Bold.woff") format("woff");
}

@font-face {
  font-family: "Roboto-BoldItalic";
  src: url("/fonts/roboto/Roboto-BoldItalic.woff2") format("woff2"),
       url("/fonts/roboto/Roboto-BoldItalic.woff") format("woff");
}

@font-face {
  font-family: "Roboto-Black";
  src: url("/fonts/roboto/Roboto-Black.woff2") format("woff2"),
       url("/fonts/roboto/Roboto-Black.woff") format("woff");
}

@font-face {
  font-family: "Roboto-BlackItalic";
  src: url("/fonts/roboto/Roboto-BlackItalic.woff2") format("woff2"),
       url("/fonts/roboto/Roboto-BlackItalic.woff") format("woff");
}

/**
 * Material Icons License
 * https://iidesk.com/fonts/materialicons/LICENSE.txt
 * http://www.apache.org/licenses/LICENSE-2.0.txt
 *
 * Material Icons Guide
 * https://developers.google.com/fonts/docs/material_icons
 *
 * Material Icons Overview
 * https://fonts.google.com/icons
 *
 * LET OP!
 * Het is ook mogelijk de class te verlengen met extra woorden en zo makkelijk te specificeren:
 * <span class='material-icons_home'>home</span>
 **/

@font-face {
  font-family: 'materialicons';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/materialicons/materialicons-regular-webfont.woff2) format('woff2'),
       url(/fonts/materialicons/materialicons-regular-webfont.woff)  format('woff');
}

@font-face {
  font-family: 'materialiconsoutlined';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/materialicons/materialiconsoutlined-regular-webfont.woff2) format('woff2'),
       url(/fonts/materialicons/materialiconsoutlined-regular-webfont.woff)  format('woff');
}

@font-face {
  font-family: 'materialiconsround';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/materialicons/materialiconsround-regular-webfont.woff2) format('woff2'),
       url(/fonts/materialicons/materialiconsround-regular-webfont.woff)  format('woff');
}

@font-face {
  font-family: 'materialiconssharp';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/materialicons/materialiconssharp-regular-webfont.woff2) format('woff2'),
       url(/fonts/materialicons/materialiconssharp-regular-webfont.woff)  format('woff');
}

@font-face {
  font-family: 'materialiconstwotone';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/materialicons/MaterialIconsTwoTone-Regular.otf)           format('opentype'),
       url(/fonts/materialicons/materialiconstwotone-regular-webfont.woff2) format('woff2'),
       url(/fonts/materialicons/materialiconstwotone-regular-webfont.woff)  format('woff');
}

/**
 * Standaard: <span class='material-icons'>home</span>
 * Specifiek: <span class='material-icons_home'>home</span>
**/
[class^="material-icons"] {
  font-family: 'materialicons';
  font-weight: normal;
  font-style: normal;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';
}

/**
 * Standaard: <span class='material-icons-outlined'>home</span>
 * Specifiek: <span class='material-icons-outlined_home'>home</span>
**/
[class^="material-icons-outlined"] {
  font-family: 'materialiconsoutlined';
}

/**
 * Standaard: <span class='material-icons-round'>home</span>
 * Specifiek: <span class='material-icons-round_home'>home</span>
**/
[class^="material-icons-round"] {
  font-family: 'materialiconsround';
}

/**
 * Standaard: <span class='material-icons-sharp'>home</span>
 * Specifiek: <span class='material-icons-sharp_home'>home</span>
**/
[class^="material-icons-sharp"] {
  font-family: 'materialiconssharp';
}

/**
 * Standaard: <span class='material-icons-two-tone'>home</span>
 * Specifiek: <span class='material-icons-two-tone_home'>home</span>
**/
[class^="material-icons-two-tone"] {
  font-family: 'materialiconstwotone';
}

:root {
  /** Fonts **/
  --roboto:       'Roboto',        'Helvetica Neue', Arial, Sans-Serif;
  --robotoMedium: 'Roboto-Medium', 'Helvetica Neue', Arial, Sans-Serif;
  --robotoBold:   'Roboto-Bold',   'Helvetica Neue', Arial, Sans-Serif;
  --robotoBlack:  'Roboto-Black',  'Helvetica Neue', Arial, Sans-Serif;

  --textColor: hsl(215, 10%, 20%);

  /** Grayscale **/
  --gray1: hsl(60, 1%, 85%);
  --gray2: hsl(60, 1%, 68%);
  --gray3: hsl(60, 1%, 47%);
  --gray4: hsl(60, 1%, 29%);
  --gray5: hsl(60, 1%, 10%);

  --nsg: hsl(172, 96%, 30%);
  --green: hsl(163, 46%, 60%);
  --blue: hsl(185, 65%, 35%);
  --orange: hsl(28, 92%, 42%);
}

html {
  font-size: 16px;
  font-family: var(--roboto);
  line-height: 1.2;
}

body {
  max-width: 1500px;
  display: flex;
  flex-direction: column;
  background: none;
  background-color: hsl(0, 0%, 98%);
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  color: var(--textColor);
}

h1 {
  margin: .5em 0;
  font-size: 1.9rem;
  font-family: var(--robotoMedium);
  font-weight: normal;
}

h2 {
  margin: .5em 0;
  font-size: 1.55rem;
  font-family: var(--robotoMedium);
  font-weight: normal;
}

h3 {
  margin: .5em 0;
  font-size: 1.25rem;
  font-family: var(--robotoMedium);
  font-weight: normal;
}

h4 {
  margin: .5em 0;
  font-size: 1rem;
  font-family: var(--robotoMedium);
  font-weight: normal;
}

h5 {
  margin: .5em 0;
  font-size: .85rem;
  font-family: var(--robotoMedium);
  font-weight: normal;
}

h6 {
  margin: .5em 0;
  font-size: .70rem;
  font-family: var(--robotoMedium);
  font-weight: normal;
}

strong {
  font-family: var(--robotoBold);
  font-weight: normal;
}

p, li { /** vaak gaan deze twee samen en het ziet er raar uit met verschillende regelhoogte **/
  line-height: 1.5;
}

a {
  color: var(--blue);
  text-decoration: none;
  transition: color .2s ease-in-out 0s;
}

input {
  color: hsl(215, 12%, 30%);
  font-size: 1rem;
}

.button-outlined {
  display: inline-block;
  margin: .5em 0;
  padding: .75em 1.25em;
  background-color: transparent;
  border: 2px solid white;
  border-radius: 5px;
  box-shadow: 0px 2px 6px hsla(0, 0%, 0%, 0.2);
  color: white;
  font-family: var(--robotoMedium);
  cursor: pointer;
  transition: all .2s ease-in-out 0s;
}

.button-outlined:hover {
  background-color: white;
  color: var(--blue);
}

video {
  width: 100%;
  height: auto;
}

.no-break {
  white-space: nowrap;
}

input[type='radio'], input[type='checkbox'] {
  margin-right: 5px;
}

textarea {
  resize: vertical;
}

ul {
  padding-left: 1em; /* Buller gelijk met tekst boven en onder */
}

footer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 30px 2vw;
  font-size: .8rem;
  color: var(--textColor);
}

footer :is(a, a:hover, a:visited) {
  margin: 0;
  padding: 0;
  color: var(--textColor);
  font-size: .8rem;
}

.rotatedArrow {
    transform: rotate(180deg);
    border-left-width: 0 !important;
}

.spamvalidate {
  display: none;
}

.rood {
  color: red; /*used for error messages, color must be easy to differentiate from the red/pinkish links*/
}

.bold {
  font-weight: bold;
}

.topError {
  margin: 10px 0;
}

.spaceTop {
  padding-top: 20px;
}

.inkoopordernummerTr td {
  padding-top: 15px;
}

.spaceLeft {
  padding-left: 20px;
}

.noMarginTop {
  margin-top: 0;
}

/* Social icons */
.socmedia img {
  vertical-align: middle;
  width:  24px;
  height: 24px;
  transition: transform .2s ease-in-out 0s;
}

.socmedia img:hover {
  transform: scale(1.2);
}

/* sound guide page */
.soundGuideResults {
  max-width: 100%; /* small viewports */
  overflow: auto; /* small viewports */
}

.soundGuideResults table {
  width: 100%;
}

.soundGuideResults hr {
  margin: 1.2em 0;
  border: 0;
  border-bottom: solid var(--blue) 1px;
}

.boxesSoundGuide {
  margin: 0.3em 0.25em 1.2em;
}

.boxesSoundGuide label {
  padding-right: 8px;
}

table.data th {
  text-align: left;
}

.soundGuideResults td[colspan]:not([colspan="1"]) {
  /* dbv5 no results */
  font-weight: normal !important;
  text-align: left !important;
}

/*===[ Table Navigation ]===*/
.dbv5-html-nav {
  background-color: white;
  border: 1px solid hsl(210, 10%, 65%);
  border-radius: 4px;
  box-shadow: 0 2px 3px -2px hsla(210, 10%, 20%, .4);
  overflow: hidden;
  cursor: default;
}

.dbv5-html-nav .hideIfCSSLoaded {
  display: none;
}

.dbv5-html-nav :where(a, label),
.dbv5-html-nav-active {
  all: unset;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 30px;
  padding: 2px 10px;
  box-sizing: border-box;
  transition: all .2s ease-in-out 0s;
}

.dbv5-html-nav a {
  color: var(--blue);
  cursor: pointer;
}

.dbv5-html-nav a:hover {
  color: var(--orange);
  transform: none;
}

/** Highlight geselecteerde pagina **/
.dbv5-html-nav-active {
  background-color: var(--orange);
  border-color: var(--orange);
  color: white;
  pointer-events: none;
}

.dbv5-html-nav span,
.dbv5-html-nav-breakdots {
  pointer-events: none;
}

.dbv5-html-nav-prevnext,
.dbv5-html-nav-all,
.dbv5-html-hidcol-all {
  padding: 2px 10px;
  font-weight: 600;
}

h2.sectionSoundGuide {
  margin-left: 0.25em;
  margin-bottom: 0.2em;
  margin-top: 0.8em;
  padding: 0;
}

.soundGuideSearch h1 {
  padding-bottom: 16px;
}

.soundGuideSearch h5 {
  padding-top: 4px;
  padding-bottom: 4px;
}

.category_form select {
  background: #f7f7f7;
  border: 1px solid #d1d1d1;
  color: #686868;
  font-size: 0.8rem;
  height: 28px;
  width: 100%;
}

.showDetailsPerson, .showDetailsCompany, .showDetailsGov {
  color: #e80092;
  text-decoration: none;
  cursor: pointer;
}

#detailContainer {
  position: fixed;
  background-color: white;
  z-index: 10001;
  display: none;
  padding: 12px;
  border-radius: 5px;
  width: 480px;
  max-width: calc(100% - 20px);
}

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

#detailContainer h3 {
  margin-top: 0;
}

#detailClose {
  float: right;
  padding: 1px 4px;
  font-size: 1.1rem;
}

#detailTitle {
  font-weight: bold;
  font-size: 1.1rem;
  text-transform: uppercase;
  padding-bottom: 12px;
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
}

#detailSubTitle {
  color: var(--textColor);
  font-weight: bold;
  font-size: 1rem;
  text-transform: uppercase;
  margin: 10px 0;
}

.detailLabel {
  display: inline-block;
  font-style: italic;
  font-size: 0.9rem;
  width: 200px;
}

.detailValue {
  display: inline-block;
  font-size: 0.9rem;
}

.bestelAfbeelding {
  text-align: center;
}

.block {
  padding-top: 15px;
}

input.amountInput {
  width: 45px;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0;
  padding: 0;
  text-align: center;
}

#logo {
  width: clamp(160px, 30vw, 220px);
  border-radius: 10px;
  color: black;
  filter: hue-rotate(8deg);/* Groen ietsjes blauwer maken */
  transition: all 0.2s ease-in-out 0s;
}

#logo img {
  width: 100%;
  height: 100%;
}

#logo:hover {
  background-color: hsl(60, 1%, 92%);
  box-shadow: 10px 0 0 10px hsl(60, 1%, 92%),
              -10px 0 0 10px hsl(60, 1%, 92%);
}

#menu-toggle {
  position: fixed;
  right: 20px;
  display: none;
  background-color: var(--blue);
  box-shadow: 0px 2px 6px hsla(0, 0%, 0%, 0.2),
              0px -3px 0px hsla(0, 0%, 0%, 0.2) inset;
  box-sizing: border-box;
  border: none;
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
  transition: background-color .5s,
              border-radius .5s,
              box-shadow .2s;
  z-index: 2;
}

#menu-toggle:hover {
  box-shadow: 0px 2px 6px hsla(0, 0%, 0%, 0.2),
              0px -3px 0px hsla(0, 0%, 0%, 0.2) inset,
              0px 100px 0px hsla(0, 0%, 100%, 0.1) inset;
}

#menu-toggle:active {
  box-shadow: 0px 2px 6px hsla(0, 0%, 0%, 0.2),
              0px 3px 0px hsla(0, 0%, 0%, 0.2) inset,
              0px 100px 0px hsla(0, 0%, 0%, 0.05) inset;
}

#menu-toggle span {
  color: white;
  font-size: 2.5rem;
  filter: drop-shadow(0px 1px 1px hsla(0, 0%, 0%, .4));
  user-select: none;
}

/*===[ Search ]===*/
#search {
  display: flex;
  height: 40px;
  background-color: white;
  box-shadow: 0px 2px 6px hsla(0, 0%, 0%, 0.2);
  border-radius: 50px;
  transition: box-shadow .2s ease-in-out 0s;
}

#search:hover {
  box-shadow: 0px 4px 8px hsla(0, 0%, 0%, 0.2);
}

#search:hover button {
  color: var(--blue);
}

#search input[type="text"] {
  width: clamp(100px, 10vw, 200px);
  background: none;
  border: none;
  padding: 0 15px;
  color: var(--gray3);
  outline: none;
  transition: color .2s ease-in-out 0s;
}

#search:hover input[type="text"],
#search input[type="text"]:focus {
  color: var(--blue);
}

#search input[type="submit"] {
  background: none;
  border: none;
  padding: 0 4px;
  color: var(--gray2);
  font-size: 24px;
  cursor: pointer;
  transition: color .2s ease-in-out 0s, transform .2s ease-in-out 0s;
}

#search input[type="submit"]:hover {
  transform: rotate(90deg);
}

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

  #search {
    opacity: 0;
  }

  #search input[type="text"] {
    width: 0;
  }

  #menu-toggle {
    display: block;
  }

}

main {
  display: flex;
  margin: 0;
  padding: 0;
}

.clearBoth {
  clear: both;
}

#breadcrumbs {
  display: inline-block;
  background-color: hsla(0, 0%, 100%, .1);
  border-radius: 10px;
  box-shadow: 0px 2px 6px hsla(0, 0%, 0%, 0.1);
  margin: 10px 0;
  padding: 4px 8px;
}

#breadcrumbs a,
#breadcrumbs span {
  color: white;
  font-size: .9rem;
  vertical-align: text-bottom;
}

/** Box **/
.box {
  flex: 1;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0px 2px 6px hsla(0, 0%, 0%, 0.2);
  padding: clamp(10px, .5vw, 20px) 30px;
  box-sizing: border-box;
}

.box h2.title {
  display: block;
  color: var(--textColor);
  font-family: var(--robotoBold);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 4px;
  text-decoration-color: var(--blue);

  &:hover {
    text-decoration-color: var(--orange);
  }
}

.box > ul {
  margin: 0;
  padding: 0;
}

.box > ul li {
  display: flex;
  justify-content: space-between;
  list-style: none;
}

.box > ul li + li {
  border-top: 1px solid hsl(60, 1%, 85%);
  margin-top: 10px;
  padding-top: 10px;
}

.box img {
  max-width: 100%;
  max-height: 100%;
}

/*===( Box items )===*/
.box .item {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 15px 0;
  box-shadow: 0 1px 0 0 var(--gray1);
  cursor: pointer;
}

.box .item:last-of-type {
  box-shadow: none;
}

.box .item p {
  margin: 5px 0;
  padding: 0;
}

.box .item a {
  position: relative;
}

.box .item a:hover {
  color: var(--orange);
}

.box .item .title {
  margin: 0;
  color: var(--blue);
  text-decoration: none;
}

.box .item .title:first-line {
  text-transform: capitalize;
}

.box .item .agenda-date {
  margin: 0 0 8px;
  color: var(--blue);
  font-family: var(--robotoMedium);
  text-transform: capitalize;
}

.box .item span {
  position: relative;
  color: black;
  font-family: var(--robotoMedium);
  transition: color 0.2s ease-in-out 0s;
  user-select: none;
  pointer-events: none;
}

.box .item::before {
  content: "";
  opacity: 0;
  position: absolute;
  top: -1px;
  right: -15px;
  bottom: -1px;
  left: -15px;
  background-color: hsl(60, 1%, 95%);
  border-radius: 10px;
  transition: all 0.2s ease-in-out 0s;
}

.box .item:hover::before {
  opacity: 1;
}

.box .item .readOnLink {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/** Frontpage **/
#frontpage {
  flex: 1;
  margin: 0;
}

#frontpage .content {
  display: grid;
  gap: clamp(20px, 2vw, 30px);
  grid-auto-flow: column;
  grid-template-columns: 1fr 2fr 2fr;
  justify-content: center;
  align-items: start;
  margin: -140px 0 0 0;
  padding: 0 clamp(20px, 2vw, 40px);

  .rightside {
    display: flex;
    align-items: baseline;
    gap: 20px;
   flex-wrap: wrap;
  }
}

#frontpage #banner {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--blue);
  border-radius: 50px;
  padding: clamp(40px, 2vh, 100px) clamp(40px, 4vw, 200px) 160px;
  box-sizing: content-box;
  color: white;
  overflow: hidden;
  z-index: -1;
}

#frontpage #banner span {
  margin: 20px;
}

#frontpage #banner img {
  width: 100%;
  max-width: 300px;
  max-height: 100%;
}

#frontpage #banner h1 {
  color: white;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 4px;
  text-decoration-color: var(--orange);
  text-shadow: 0px 2px 1px hsla(0, 0%, 0%, .4);
}

#frontpage #banner p {
  max-width: 600px;
  color: white;
  font-size: 1.25rem;
  text-shadow: 0px 1px 1px hsla(0, 0%, 0%, .4);
}

section {
  position: relative;
  width: 150%;
  padding: 10px clamp(10px, 2vw, 40px);
  box-sizing: border-box;
}

section::before {
  content: "";
  z-index: -1;
  position: absolute;
  top: -10px;
  right: 0;
  bottom: -10px;
  left: -120px;
  background-color: var(--blue);
  border-radius: 25px;
  box-shadow: 0px 2px 6px hsla(0, 0%, 0%, 0.2),
              0px -2px 0px inset hsla(0, 0%, 0%, 0.2);
  box-sizing: border-box;
}

section h1 {
  color: white;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 4px;
  text-decoration-color: var(--orange);
  text-shadow: 0px 2px 1px hsla(0, 0%, 0%, .4);
}

section article h1 {
  color: black;
  text-decoration-color: var(--blue);
  text-shadow: none;
}

section > p {
  color: white;
}

#section_head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.textbox,
article {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 6px 12px hsla(0, 0%, 0%, .2);
  margin: 20px 0;
  padding: clamp(20px, 1vw, 40px) clamp(8px, 2vw, 40px);
}

.textbox a:hover,
article a:hover {
  color: var(--orange);
}

article table :is(input[type="text"],
                  input[type="email"],
                  input[type="date"],
                  input[type="file"],
                  input[type="number"],
                  input[type="password"],
                  input[type="search"],
                  input[type="tel"],
                  input[type="url"],
                  textarea) {
  width: 100%;
}

.textbox {
  margin: 10px 0;
}

/*===[ formSubmit ]===*/
.formSubmit {
  padding: 10px 20px;
  background-color: var(--blue);
  border: none;
  border-radius: 5px;
  box-shadow: 0px 2px 6px hsla(0, 0%, 0%, 0.2);
  color: white;
  font-family: var(--robotoMedium);
  text-transform: uppercase;
}

.formSubmit:hover {
  background-color: #e80092;
}

.containerSubmit, .alignCenter {
  text-align: center;
}

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.ordersForm .pad {
  text-align: right;
}

.complaintForm {
  max-width: 100%;
  margin-top: 10px;
}

.complaintForm table {
  max-width: 100%;
}

.complaintForm .tableInputs {
  min-width: 600px;
}

.complaintTableBorder {
  border: 1px solid lightgrey;
  margin: 10px 0;
}

.editfield-radio span {
  white-space: normal !important;
}

.nieuws-date {
  color: var(--gray2);
  font-size: .8rem;
}

.site-sidebar {
  padding: 10px 10px 10px 5px;
}

.tags {
  border-top: 1px solid var(--gray1);
  margin-top: 18px;
  padding-top: 6px;
}

.tags label {
  color: hsl(0, 0%, 70%);
  font-size: .8rem;
}

.tags span {
  border-radius: 50px;
  box-shadow: 0 1px 3px hsla(0, 0%, 0%, .3);
  margin: 0 2px;
  padding: 2px 8px;
  color: hsl(0, 0%, 60%);
  font-size: .8rem;
}

.site-item {
  padding: 20px 0px;
  border-top: solid var(--blue) 3px;
}


.bestelformulier {
  hgroup {
    margin-bottom: 20px;
    font-style: italic;
    color: gray;

    p {
    margin: 0;
    }
  }

  .bestelTabel {
    width: 100%;
    margin: 20px 0;
    padding: 20px;
    background-color: hsl(60 1% 95%);
    border: none;
    border-radius: 10px;
    box-shadow: inset 0px 2px 6px hsl(0 0 0 / 20%);

    strong {
      display: block;
      margin-bottom: 10px;
      font-size: 1.125rem;
    }
  }
  
  .chooseProduct {
    margin-top: 20px;
  }
  
}

.number-spam-challenge {
  display: flex;
  align-items: center;
}

/*table row een kleurt geven zodat ze wat overzichtelijker zijn (zodra een input erin zit krijgt hij geen kleur)*/
.singleArticle tr:not(:has(input)):nth-child(2n) {
    background-color: hsl(0, 0%, 95%);
}

/* the menu goes under the logo */
@media (min-width: 1200px) and (max-width: 1500px) {
  #frontpage .content {
    grid-template-columns: 1fr 2fr 1fr;
  }
}

/* the menu goes under the logo */
@media (min-width: 800px) and (max-width: 1200px) {
  #frontpage .content {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (max-width: 800px) {

    #frontpage .content {
    grid-template-columns: 1fr 1fr;

      .rightside {
    flex-direction: column;
    align-items: unset;
  }
  }

  #frontpage #banner {
    padding-top: 10px;
  }

  #frontpage #banner img {
    display: none;
  }

  #frontpage #banner p {
    max-width: none;
  }

  section::before {
    top: 0;
    left: 0;
  }



  .site {
    margin: 0;
  }

  .complaintForm .tableInputs {
    min-width: 100%;
  }

  /* using an image's width and height attributes is not a good idea but it happens often */
  .singleArticle img {
    max-width: 100%;
    height: auto; /* avoid getting a distorted image */
  }

  /* using a table's width attribute is not a good idea but it happens often when they copy/paste */
  .singleArticle table {
    /* max-width does not work to overwrite table width */
    width: auto;
    word-break: break-word;
  }

  h1, h2, h3 {
    word-break: break-word;
  }

}

nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: baseline;
  align-items: baseline;
  gap: clamp(20px, 2vw, 30px);
  z-index: 1;
}

.sidemenu.box {
  flex-basis: 100%; /* overwrite flex: 1 (main.css) to avoid displaying two boxes above a long box */
}

nav .box .item {
  display: flex;
  align-items: center;
  padding: 15px 0;
  color: black;
  font-family: var(--robotoMedium);
}

nav .box .item:active {
  color: var(--orange);
}

nav .box .item.current {
  font-family: var(--robotoMedium);
}

nav .box .item.current::before {
  background-color: hsl(190, 70%, 90%);
  opacity: 1;
}

nav .box .item.current + .item {
  border-top-color: transparent;
}

nav .box .item.current label {
  color: var(--blue);
  font-family: var(--robotoMedium);
}

/* List */
nav .box .list {
  position: relative;
  border-radius: 10px;
}

nav .box .list::before {
  content: "";
  opacity: 0;
  position: absolute;
  top: -1px;
  right: -15px;
  bottom: -1px;
  left: -15px;
  background-color: hsl(60, 1%, 98%);
  box-shadow: 0 2px 6px 0 var(--gray1);
  border-radius: 10px;
  transition: all 0.2s ease-in-out 0s;
}

nav .box .list.show::before {
  opacity: 1;
}

nav .box .list .item ~ .item {
  opacity: 0;
  height: 0;
  padding: 0;
  box-sizing: border-box;
  transition: all .2s ease-in-out 0s;
}

nav .box .list.show .item ~ .item {
  opacity: 1;
  height: 100%;
  padding: 15px;
}

/* Arrow */
nav .box .list .material-icons {
  position: absolute;
  top: 4px;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background-color: transparent;
  border: none;
  border-radius: 10px;
  font-size: 1.5em;
  cursor: pointer;
  user-select: none;
  transform: rotateX(360deg);
  transition: transform .5s ease-in-out 0s;
}

nav .box .list .material-icons:hover {
  background-color: hsla(0, 0%, 0%, .1);
}

nav .box .list.show .material-icons {
  animation: flip .5s;
  transform: rotateX(180deg);
}

@keyframes flip {

  from {
      transform: rotateX(0deg);
    }

  to {
      transform: rotateX(180deg);
      
    }
  
}

@media (max-width: 800px) {

  nav {
    overflow-y: auto;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    padding: 100px 25px 25px 25px;
    background-color: hsla(0, 0%, 0%, 0.2);
    overflow-y: auto;
  }

  nav .box {
    flex: 1;
  }

}

.acResults {
	background-color: #fff;
	border: 1px solid rgb(200, 200, 200);
	border-radius: 0 0 5px 5px;
	padding: 0px;
	overflow: hidden;
	z-index: 100;
}

.acResults ul {
	list-style-position: outside;
	list-style: none;
	padding: 0;
	margin: 0;
}

.acResults li {
	margin: 0px;
	padding: 2px 5px;
	cursor: pointer;
	display: block;
	font: menu;
	font-size: 12px;
	overflow: hidden;
}

.acNoResults {
	background-color: rgb(255, 245, 245) !important;
	color: rgb(243, 22, 21) !important;
	text-align: center !important;
}

/* zodat de user kan zien welke boxen autocomplete zijn */
/* important zodat het altijd werkt - waah important oorlog*/
.acInput {
	border-left-style: double  !important;
	border-left-width: 3px     !important;
	border-right-style: double !important;
	border-right-width: 3px    !important;
	outline: none;
}

/* Loading animate rechts van het inputveld */
.acLoading {
	background-image: url('/icons/loading.gif');
	background-repeat: no-repeat;
	background-position: right center;
}

.acSelect {
	background-color: yellow;
	color: black;
}

.acMatch {
	font-weight: bold;
	background-color: #fcf513;
	color: #000;
}

.allResults {
	background-color: rgb(245, 245, 245) !important;
	border-top: 1px solid rgb(200, 200, 200);
	font-size: 10pt !important;
	text-align: center !important;
}

.auto-add-origin-container {
	
	display: inline-block;
	
	&.inactive {
		filter: brightness(0.8) grayscale(1) opacity(0.5);
		pointer-events: none;
		user-select: none;
	}
	
	.ind {
		color: #52de0c;
		font-weight: bold;
	}
}

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