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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (max-width: 768px) {

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

}


#idd_notABot .material-icons {
  display: inline-flex;
  justify-content: center;
  border: solid 2px;
  border-radius: 0.25em;
  /* om zelfde grootte te laten hebben als 'kale' checkbox */
  width: 0.8em;
  /* om zelfde grootte te laten hebben als 'kale' checkbox */
  height: 0.8em;    
  margin: 0 10px 0 0;
  background-color: transparent;
  color: white;
  font-weight: 600;
  /* om verticaal uit te lijnen zodat vinkje niet border raakt */
  line-height: 0.8; 
  cursor: pointer;
  transition: all .2s ease-in-out 0s;
  border-color: var(--isHumanBorderColor, hsl(0, 0%, 50%));
}

#idd_notABot .material-icons:hover {
  border-color: var(--isHumanBorderColor, hsl(0, 0%, 50%));
}

/* hier moeten meer dingen bij als je bv ook <div> wilt meegeven aan htCreateElements */
li#idd_notABot, span#idd_notABot {
  align-items: center;
  display: flex;
  margin: 0;
  flex-direction: row;
}



#idd_notABot .isHuman {
  border-color: var(--isHumanBorderColor, hsl(0, 0%, 60%));

  /* 
  dit moet CSS4 system color AccentColor zijn ipv common_color--blue maar dat snapt Chrome niet, 
  die maakt er wit van, ook met diverse workarounds. voorlopig maar opgegeven.
  */
  background-color: var(--isHumanBackgroundColor, var(--common_color--blue, blue));
  padding: 0;
}

#idd_notABot .material-icons.throbber {
  border: none;
  color: unset;
  width: 1em;
  height: 1em;    
  line-height: 1; 
  
  animation: spin 2s linear infinite;
}

@keyframes spin {

  0% {
    transform: rotate(0deg);
  }
  
  100% {
    transform: rotate(360deg);
  }
  
}

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

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