/**
 * 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 {
	color: #000000;
	background-color: #FFFFFF;
}

a{
	color: blue;
}

div.dots{
	background-image: url(/red8x8.gif);
	background-repeat: repeat-x;
	/* because of gecko bug, http://stackoverflow.com/questions/10617573/firefox-background-image-bug */
	background-size: 16.01px 8px;
	margin-top: 5px;
	margin-bottom: 5px;
	height: 8px;
}

ul{
	list-style-image: url(/red8x8.gif);
	list-style-position: inside;
	list-style-type: circle;
}

div.sidebar {
	float: right;
	margin: 10px;
}

div.sidebarMobile {
		display: none;
	}

:is(div, blockquote).top {
	border: 1px solid #FF0000;
	width: 360px;
	margin: 20px 0 0 0;
	padding: 0 10px;
}

:is(div, blockquote).quote {
	border: 1px solid #FF0000;
	max-width: 475px;
	padding-left: 10px;
	padding-right: 10px;
	margin-top: 20px;
}

div.iinl {
	border: 1px solid #FF0000;
	width: 380px;
}

div.iinl iframe {
	border: none;
}

p.firstline{
	text-indent: -40px;
	margin-left: 40px;
}

.topAlign {
	vertical-align: top;
	min-width: 70px;
}

@media print {
	.noprint {
		display: none;
	}
	
	.history { 
		page-break-before: always;
		font-size: 75%
	}
	.quote {
		page-break-before: always;
	}
	
}

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

	div.sidebar {
		display: none;
	}

	div.sidebarMobile {
		display: block;
	}

}


/* Lijn met de vierkantjes */
[class*="cubeborder"] {
  all: unset;
  display: block;
  height: 8px;
  background-image: repeating-linear-gradient(90deg, red, red 8px, transparent 8px, transparent 16px);
}

.cubeborder-small {
  width: 128px;
}

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