/*
Theme Name: CIBG theme
Theme URI: 
Description: 
Author: Aiwos | olivier@aiwos.com
Version: 1.1.28
Tags: 
*/

@font-face {
  font-family:RijksSans;
  font-style:normal;
  font-weight:200 800;
  src:url("fonts/rijks-sans-regular.woff2") format("woff2")
}

@font-face {
  font-family:RijksSans;
  font-style:italic;
  font-weight:400;
  src:url("fonts/rijks-sans-italic.woff2") format("woff2")
}

@font-face{
    font-family:"CIBG Icons";
    font-style:normal;
    src:url("fonts/CIBG-icons-1.2.woff") format("woff")
}

html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, 
a, em, hr, img, figure, small, b, u, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, tr, th, td {
	background:transparent;
	border:0;
	margin:0;
	padding:0;
}

*, ::before, ::after {
	box-sizing: border-box;
	scroll-behavior:smooth;
}

body {
	--color-text:#212529;
	--color-brand:#01689b;
	--color-brand-active:#015782;
	--color-brand-2:#154273;
	--color-brand-contrast:#04857f;
	--color-black:#000;
	--color-white:#fff;
	--color-grey:#617286;
	--color-grey-0:#f8fafc;
	--color-grey-1:#f1f5f9;
	--color-grey-2:#e2e8f0;
	--color-grey-3:#64748b;
	--color-grey-4:#475569;
	--color-grey-5:#334155;
	--color-yellow:#ffb612;
	--color-light-yellow:#fff4dc;
	--color-red:#cc003d;
	--color-light-red:#f7d2dd;
	--color-green:#39870c;
	--color-light-green:#e1eddb;
	--color-blue:#007bc7;
	--color-light-blue:#d9ebf7;
	--color-btn-secondary:#0e7c77;

	font:1rem/1.625 RijksSans,Calibri,sans-serif;
	color:var(--color-text);
	counter-reset:step;

	&[data-variant]:before {
		position:absolute;
		font-size:1em;
		font-weight:bold;
		padding:.5em 1em;
		margin:15px;
		border-radius:5px;
		color:var(--color-white);
	}
	
		&[data-variant="local"]:before { 
			content:"Lokale omgeving"; 
			background:var(--color-blue);
		}
	
		&[data-variant="test"]:before { 
			content:"Testomgeving"; 
			background:var(--color-green);
		}

		&[data-variant="acc"]:before { 
			content:"Acceptatieomgeving"; 
			background:var(--color-brand-2);
		}

	&.tingle-enabled {
		overflow:hidden;
	}
}

:focus {
	outline: 2px dotted var(--color-black);
	outline-offset:5px;
}

h1, h2, h3, h4, h5, h6, .gf_step_label {
	font-weight:600;
	line-height:1.2;
	color:var(--color-brand-2);
}

	h1,
   	h2.step-title,
	.gf_step_label {
		font-size: 1.75em;
		line-height: 1.1429;
		padding: 0 0 .175em;
		margin:0;
	}

	h2,
   	h3.gsection_title {
		font-size: 1.25em;
	  	line-height: 1.2381;
	}

	h3 {
		font-size: 1.125em;
	  	line-height: 1.4444;
  	}

  	h4 {
		font-size:1em;
	}

	h5 {
		font-style:italic;
	}

a {
	cursor:pointer;
	color:var(--color-brand);
	text-decoration:none;

	&:hover {
		text-decoration:none;
	}

	&.external {
		white-space:nowrap;

		&::before {
			content: "\ea0b";
			font-family: "CIBG Icons",serif;
			display: inline-block;
			font-size: 10px;
			font-weight: 400;
			line-height: 10px;
			margin: -3px 3px 0;
			vertical-align: middle;
		}
	}

	img {
		border: none;
	}
}

b, strong {
	font-weight:600;
}

p {
	margin-bottom: .8125em;
	
	&.resume_form_link_wrapper {
		overflow:auto;
		text-overflow:ellipsis;
	}

	a {
		text-decoration:underline;
	}
}

ul, ol {
	margin:0 1em 1em;
}

.hidden,
.list-num-col-total-wrap,
.gform_heading {
	display:none;
}

.screen-reader-text,
.skip-link {
	position:absolute;
	opacity:0;
	pointer-events:none;

}

.skip-link {
	margin:1em;
	transition:all .2s;

	&:focus {
		opacity:1;
	}
}

main {
	padding:0 30px 100px;

	article {
		max-width:800px;
		margin:0 auto;

		&.full-width {
			max-width:initial;
		}
	}
}

/**
 * General form fields
 */ 
.gform_fields {
	padding:1em 1.5em;
	background:var(--color-grey-1);
}

.gfield {
	display:block;
	position:relative;
	margin:0 0 1em;
	clear:both;

	legend,
	label {
		display:block;
		width:33.33%;
		float:left;
		padding:.225rem 1em .225rem 0;
	}

		&.hidden_label label {
			display:none;
		}
	
	.ginput_container {
		width:66.66%;
		display:flex;
		padding-right:70px;
		padding-bottom:5px;

		&.ginput_container_text, 
		&.ginput_container_number, 
		&.ginput_container_textarea {
			flex-direction:column;
		}

		&.gpnf-nested-entries-container {
			display:block;
			padding-right:0;

			table {
				border-collapse:collapse;
				width:100%;

				th, td {
					padding:.5em 0;
				}

				th {
					border-bottom:1px solid var(--color-grey);
					padding-right:1em;
					text-align:left;

					&:last-child {
						padding-right:0;
					}
				}

				tr:not(:last-of-type) {
					border-bottom: 1px solid #0001;
				}
			}
		}

		.charleft {
			color:var(--color-btn-secondary);
			font-size: .85em;
		}
	}

	&.gfield_html {
		display:block;
		padding:0;

		&.gfield_html_formatted {

			&.intro {
				padding:1.5em;
				background:var(--color-white);
			}
		}

		ul {
			list-style:square;
			margin-bottom:1em;
		}

		/* Improve this? Verklaring requires non-standard styling */
		&.verklaring {
			padding:0;
			background:var(--color-grey-1);
			margin:0;
		}
	}

	&.hidden,
	&.gf_invisible,
	&.gfield_visibility_hidden, 
	&.gfield_visibility_administrative {
		display:none !important;
		position:absolute;
		pointer-events:none;
	}

	&::after {
		content:"";
		display:block;
		clear:both;
	}

	/* Aiwos custom CSS classes */
	&.gf_list_inline .ginput_container > div {
		display:flex;
	}

	&.gwp_monospace_input input {
		font:150% monospace;
		letter-spacing:10px;
		text-transform:uppercase;
		padding-left:10px;
	}

	&.gwp_field_full_width label,
	&.gwp_field_full_width .gfield_description,
	&.gwp_field_full_width .ginput_container {
		width:100%;
		margin-left:0 !important;
	}

	&.gwp_labelbold label {
		font-weight:bold;
	}

	&.gwp_hideinstruction .instruction {
		display:none;
	}

	&.geen_label {
		justify-content:end;
	}
}

/* Legacy GF columns */
.gfield--width-quarter {
	width:25%;
	display:inline-flex !important;

	p,
	.ginput_container {
		padding-right:1em;
	}
}

/* Steps */
body[data-step="1"] .gfield_html {
	font-size:1.125em;
}

body[data-step="2"] .gform-body {
	position:relative;
	
	&:before {
		content:"* verplichte velden";
		color:var(--color-grey);
		font-size: .95rem;
		font-weight: 400;
		position:absolute;
		z-index:1;
		top:-2.5em;
		right:0;
	}
}

.gform-footer,
.gform-page-footer {
	margin-top:1em;

	input {
		width:initial;
		height:2.5em;
		float:right;

		&.gform_previous_button {
			color:var(--color-brand);
			background:var(--color-white);
			float:left;
			
			&:hover {
				background:inherit;
				text-decoration:underline;
			}
		}
	}
}

article:not(.selectielijst) {
	.entry-title {
		color: var(--color-grey);
		display: block;
		font-size: 1.1rem;
		font-weight: 400;
		padding-bottom: .25em;

		&+ p {
			display:flex;
			gap:.5em;
			flex-wrap:wrap;
		}
	}

		.feedback + .entry-title {
			margin-top:1em;
		}
}

/**
 * Notices
 */
[class*="feedback"],
.gfield.gfield_html[class*="feedback"],
.gform_validation_errors,
.gfield_validation_message {
	position:relative;
	padding: 1.375rem 2.5rem 1.375rem 3.75rem;
	margin:0 0 1em;
	border:none;
	word-wrap: break-word;

	&::before {
		content:"";
		height: 1.375rem;
		width: 1.375rem;
		left: 1.325rem;
		position: absolute;
		top: 1.5rem;
		background-size:contain;
		background-repeat:no-repeat;
  	}

	&.feedback-warning {
		background:var(--color-light-yellow);

		&::before {
			background-image:url("images/icon-warning.svg");
			width: 1.6875rem;
		}
	}

	&.feedback-success {
		background:var(--color-light-green);

		&::before {
			background-image:url("images/icon-success.svg");
		}
	}

	&.feedback-error {
		background:var(--color-light-red);

		&::before {
			background-image:url("images/icon-error.svg");
		}
	}

	&.feedback-info,
   	&.gfield_description {
		background:var(--color-light-blue);

		&::before {
			background-image:url("images/icon-info.svg");
		}

		img {
			margin-top: -5px;
			position: relative;
			top: 5px;
			padding: 0 3px;
		}
	}

	&.feedback-compact {
		padding:.5rem 1.5rem .5rem 2.75rem;

		&:before {
			top: .75rem;
      		left: .75rem;
		}
	}

	/* May be undesirable */
	&:last-child,
	p:last-child {
		margin-bottom:0;
	}
}
	
/* Inline errors */
.gfield.gfield_error {
	div.gfield_validation_message {

		&.gfield_description {
			margin:0 70px 0 33.33%;
			padding:.5rem 1.5rem .5rem 2.75rem;
			background:var(--color-light-red);

			&::before {
				background-image:url("images/icon-error.svg");
				top:.75rem;
				left:.75rem;
			}
		}
	}
}

.gform_validation_errors {
	background:var(--color-light-red);

	&::before {
		background-image:url("images/icon-error.svg");
	}
}

.gform_validation_errors {
	margin:0.25em 0 2.75em;

	ol li {
		list-style-type: square;
	}

	.gform_submission_error {
		color:var(--color-black);
		font-size:1em;
		line-height: 1.625em;
	}
}

/** 
 * Steps 
 */
.gf_page_steps {
	position:relative;
	display: flex;
	flex-wrap: wrap;
	font-size: 1.1rem;
	list-style: none;
	margin:2.5rem 0 1rem;
	padding: 3px 0 0;

	.gf_step_number {
		counter-increment:step; 
		background-color: var(--color-white);
		border: 1px solid #ccc;
		border-radius: 50%;
		color: var(--color-grey);
		display: block;
		height: 2em;
		line-height: 1.85em;
		margin: 0 1em .25em 0;
		position: relative;
		text-align: center;
		text-decoration: none;
		width: 2em;

		&::before {
			content:"";
			display:block;
			height:2px;
			left:-1.5em;
			position:absolute;
			top:calc(50% - 1px);
			width:1.5em;
			z-index:-1;
			background-color:#ccc;
		}
	}

	.gf_step:first-child {
		.gf_step_number {
			&::before {
				display:none;
			}
		}
	}

	.gf_step_label,
   	.gf_step_hidden {
		display:none;
		position:absolute;
	}
	
	.gf_step_active {
		.gf_step_number {
			background:var(--color-brand);
			border-color:var(--color-brand);
			color:var(--color-white);
			font-weight:600;
		}

		.gf_step_label {
			display:block;
			top:-2.5rem;
			left:0;

			&::before {
				content:"Stap "counter(step)": "; 
			}
		}
	}

	.gf_step_pending {
		position:relative;
		cursor:default;

		&:hover {
			.gf_step_label {
				display:block;
				background:var(--color-grey-4);
				color:var(--color-white);
				font-size:0.875rem;
				top:-2.25rem;
				min-width:140px;
				text-align:center;
				z-index:1;
				border-radius:2px;
				padding:0.4rem;
				position:absolute;
				white-space:nowrap;
				transform: translateX(-40%);

				&::after {
					content:"";
					width:0;
					height:0;
					border-left:6px solid transparent;
					border-right:6px solid transparent;
					border-top:5px solid var(--color-grey-4);
					position:absolute;
					top:100%;
					left:50%;
					margin-left:-3px;
				}
			}
		}
	}
}

/**
 * Fields
 */
input,
button,
select,
textarea {
	font:1rem/1.625 RijksSans,Calibri,sans-serif;
	color:var(--color-text);
	appearance:none;
	width:100%;
	height: 2.25rem;
	border: 1px solid var(--color-grey);
	padding:.2rem .5rem;

	&:focus {
		border-color:var(--color-black);
		outline: 2px dotted var(--color-black);
		outline-offset: 2px;
	}

	&[readonly] {
		background: none;
		pointer-events:none;
	  	border: none;
		color:var(--color-grey-4);
	}

}

	input {
		&[type="date"] {
			width:initial;
			color:var(--color-grey-3);

			&:focus {
				color:initial;
			}
		}

		&.medium {
			width:50%;
		}

		&.datepicker_with_icon {
			width:100% !important;

			&+ img {
				position:absolute;
				margin:.5em 0 0 -1.5em !important;
				opacity:.5;
				transform: scale(.9);
			}
		}

		&.page-number {
			height:initial;
		}
	}

	textarea {
		height:initial;
		resize: none;
		margin:0;

		&.medium {
			height:192px;
		}
	}

	select {
		background:var(--color-white) url("images/caret.svg") no-repeat right .25rem center;
		background-size: 16px 12px;
		color: inherit;

		&[multiple] {
			background:var(--color-white);
			height:initial;
			padding:.5rem .25rem;
		}
	}

	button,
   	input[type="submit"] {
		cursor:pointer;
		width:initial;
		height:initial;
	}

/**
 * Select search
 */
.chosen-container {
	.chosen-single {
		background:var(--color-white) url("images/caret.svg") no-repeat right .25rem center;
		background-size: 16px 12px;
		border: 1px solid var(--color-grey);
		color: inherit;
		display: block;
		height: 40px;
		line-height:1.625;
		overflow: hidden;
		padding: 0 0 0 8px;
		position: relative;
		text-decoration: none;
		white-space: nowrap;
		
		span {
			display: block;
			line-height: 38.4px;
			margin-right: 24px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	.chosen-results {
		list-style:none;
		margin:0;
		background:var(--color-white);
		padding:.5rem .25rem;
		border:1px solid var(--color-grey);


		li {
			cursor:pointer;
			padding:0 .25rem;


			&:hover {
				background:var(--color-grey);
				color:var(--color-white);
			}
		}
	}

	.chosen-drop {
		display:none;

		.chosen-search {
			position:relative;
			border:1px solid var(--color-grey);
			top:-1px;

			&::after {
				content:"\EA02";
				font:.75rem/2.25rem "CIBG Icons",serif;
				position:absolute;
				right:.5rem;
				color:#444;
			}
		}
	}

	&.chosen-with-drop {
		.chosen-drop {
			display:block;
		}
	}
}

/**
 * Multiselect search
 */
.chosen-container-multi {
	border: 1px solid var(--color-grey);
	background:var(--color-white);

	.chosen-search-input {
		border:none;
		color:var(--color-grey-3);
	}

	.chosen-choices {
		list-style:none;
		margin:0;
		cursor:text;
		display:flex;
		align-items:center;
		gap:5px;
		padding:3px;

		li.search-choice {
			background:var(--color-btn-secondary);
			color:var(--color-white);
			cursor: default;
			padding: .4em 10px;
			display:flex;

			span {
				padding-right:5px;
			}

			a {
				display:inline-block;
				color:var(--color-white);
			
				&::after {
					content:" \ea18";
					font:.7rem/1 "CIBG Icons",serif;

				}
			}
		}
	}
}

/**
 * Checkbox & radio
 */
.ginput_container {
	&.ginput_container_radio {
		.gchoice {
			label {
				&::before,
			   	&::after {
					border-radius:100%;
				}
			}
		}
	}

	.gchoice {
		display:flex;
		position:relative;

		label {
			width:auto;
			padding-left:1.6em;
			position:relative;
			cursor:pointer;

			&::before,
			&::after	{
				content:"";
				display:block;
				height:1.1875rem;
				width:1.1875rem;
				border:1px solid #444;
				background:var(--color-white);
				position:absolute;
				left:0;
				top:.5rem;
				transition:.3s ease all;
			}

			&::after {
				content:"\EA32";
				font:.75rem/1.1875rem "CIBG Icons",serif;
				background:var(--color-brand);
				color:var(--color-white);
				text-align:center;
				opacity:0;
			}
		}

		input[type="checkbox"], 
		input[type="radio"] {
			border:0;
			position:absolute;
			width:1px;
			height:1px;
			outline:none;
			
			&:focus + label::before {
				outline: 2px dotted var(--color-black);
				outline-offset: 2px;
			}

			&:checked + label::after {
				opacity:1;
			}

			&:disabled + label::after {
				background:#aaa;
			}
		}
	}
}

[class*="buttonize"] .gfield_checkbox, 
[class*="buttonize"] .gfield_radio {
	display:flex;

	label {
		padding:0 .5em;
		border:1px solid;
		margin-right:.5em;
		background:var(--color-white);

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

	input:checked + label {
		background:var(--color-brand-contrast);
		color:var(--color-white);
	}
}
	
/**
 * Buttons
 */ 
.button,
.btn,
.wp-block-button > a {
	background:var(--color-brand);
	color:var(--color-white);
	border:1px solid transparent;
	cursor:pointer;
	display:inline-block;
	padding:.4em .5em;
	position:relative;
	touch-action:manipulation;
	transition:all 150ms ease;
	vertical-align:middle;
	white-space:nowrap;
	text-decoration:none;

	&:hover {
		background:var(--color-brand-active);
	}

	&.active {
		background:var(--color-btn-secondary);
	}

	&.gform_save_link, 
	&.gform_save_link:hover {
		position:fixed;
		right:15px;
		bottom:15px;
		background:url("images/icon-save.png");
		width:33px;
		height:33px;
		border:none;

		svg {
			opacity:0;
		}
	}

}

.gform_button_select_files {
	background:var(--color-btn-secondary);
}

/**
 * File uploads
 */
.gfield--type-fileupload {
	display: flex;
	flex-wrap:wrap;

	.ginput_container_fileupload {
		flex-direction:column;

		span {
			order:3;
			display:block;
			margin-bottom:.5em;

			&.gform_drop_instructions {
				display:none;
			}
		}

		div {
			order:3;

			span.screen-reader-text {
				display:none;
			}
		}

		button:hover {
			background:var(--color-btn-secondary);
		}

		.ginput_preview_list {
			order:2;

			.ginput_preview {
				position:relative;
				background:var(--color-white);
				margin-bottom: .375em;
				border-radius: 3px;
				box-shadow: 1px 1px 1px rgb(0 0 0 / 10%);
				padding: .375em .625em .625em;

				&:last-child {
					margin-bottom:1em;
				}

				.gfield_fileupload_filename {
					display:block;
					color:var(--color-brand);
					font-weight: 600;
					line-height: 1.125em;
					word-wrap:break-word;
					padding-right:1em;
				}

				.gfield_fileupload_filesize,
				.gfield_fileupload_progress {
					display:inline-block;
					color: var(--color-grey);
					font-size:.85em;

				}
					
					.gfield_fileupload_filesize::after {
						content:"|";
						display:inline-block;
						margin:0 5px;
					}

				.gfield_fileupload_progress {
					padding-right:.5em;
				}

				span {
					margin:0;
				}

				button {
					background:none;
					color: #d52b1e;
					position: absolute;
					top: 0;
					right: 0;
					border:none;
					padding:.35rem .5rem;
					line-height:1.75rem;
					cursor:pointer;

					span::before {
						content:"\EA20";
						font-family:"CIBG Icons",serif;
						font-size: 1.125rem;
					}
				}
			}
		}
	}

	.validation_message--hidden-on-empty {
		list-style:none;
		line-height:1.5;
		margin:0 0 .5em;

		li {
			margin-left:0 !important;
		}
	}

	&::after {
		display:none;
	}
}

/* Single upload */
input[type="file"] {
	border:none;
	padding:0;

	&+span + div.validation_message {
		display:none;
	}
}

.ginput_container_fileupload + div.validation_message {
	margin-bottom:.5em !important;
}

/**
 * Lists / Columns
 */
.ginput_list {
	&.ginput_container_list {
		padding-right:0;
	}

	.gfield_list_container {
		flex-grow:1;

		.gfield_list_header {
			display:none;
		}

		.gfield_list_group {
			margin-bottom:.25rem;

			&.gform-grid-row {
				display: flex;
				gap: .5rem;
				
				div {
					min-width:120px;
					flex-grow:1;

					&:before {
						content:attr(data-label);
					}

					&:last-child {
						flex-grow:0;
						min-width:80px;
					}
				}
			}

			button {
				border: navajowhite;
				background: none;
				font-size: .8rem;
				display:flex;
				padding:0;
				color:var(--color-btn-secondary);

				&::before {
					font-family:"CIBG Icons",serif;
					font-size: .65rem;
					padding-right:5px;
					position:relative;
					top:2px;
				}

				&.delete_list_item::before {
					content:"\EA10";
				}

				&.add_list_item::before {
					content:"\EA16";
				}
			}

			input.decimal_comma, 
			input.decimal_dot,
			input.currency {
				text-align:left;

				&[readonly] {
					padding-left:0;
				}
			}
		}

	}

	&.ginput_container_list--columns button {
		position:relative;
		top:2em;
	}
}

/* Single column list */
.single-column,
.dusi-list-display {
	.gform-grid-row {
		flex-direction:column;
		background: var(--color-grey-0);
		padding: 1em;
		margin-right: 70px;

		&+.gform-grid-row {
			margin-top:1em;
		}
	}

	.gfield_list_icons {
		display:flex;
		flex-direction:row;
	}

	button {
		top:0 !important;
		margin-right:.5rem;
	}
}

/* IBAN */
.gwp_iban + .ginput_container {
	flex-direction:column;
	padding-bottom:1em;

	label {
		width:auto;
	}
}

/**
 * Field descriptions and collapsibles
 */
.gwp_collapse {
	.gfield_description:not(.validation_message) {
		overflow:hidden;
		max-height:0;
		transition:.5s ease all;
	}

	&.active .gfield_description {
		max-height:350px;
	}

	.collapse-button {
		display:flex;
		background-color: var(--color-brand);
		color: #fff;
		width: 34px;
		height: 36px;
		position: absolute;
		right: 0;
		top:0;
		text-align:center;
		cursor:pointer;
		transition:.3s ease-in all;
		justify-content: center;
    	line-height: 1;
    	align-items: center;

		&::before {
			content:"\EA1F";
			font-family: "CIBG Icons",serif;
		}
	}

	&.active .collapse-button::before {
		content:"\EA19";
	}
}

.gwp_slider {
	input[type="range"] {
		appearance:none;
		-webkit-appearance:none;
		background: none;
		border:none;
		cursor:pointer;
		padding:0;

		&::-moz-range-track {
		  background:var(--color-grey);
		  height:1px;
		}

		&::-moz-range-thumb {
			border-radius:100%;
			border:none;
			width:20px;
			height:20px;
			margin-top:-10px;
			background:var(--color-white);
			box-shadow: inset 0 0 2px #333;
		}

		&::-webkit-slider-runnable-track {
		  background:var(--color-grey);
		  height:1px;
		}

		&::-webkit-slider-thumb {
			-webkit-appearance: none;
			border-radius:100%;
			width:20px;
			height:20px;
			margin-top:-10px;
			background:var(--color-white);
			box-shadow: inset 0 0 2px #333;
		}
	}

	output {
		display:flex;
		align-items: center;
		justify-content: center;
		border:1px solid var(--color-grey-3);
		background:var(--color-grey-1);
		border-radius:100%;
		width: 30px;
		height:30px;
		position:relative;
		color:var(--color-grey-4);
		font-size:1rem;

		&[data-label] {
			margin-top:1em;
		}

		&:after {
			content:attr(data-label);
			position:absolute;
			left:35px;
			color:var(--color-grey-4);
			font-weight:600;
		}

		&[data-label="Voldoende"] { background:var(--color-green); color:var(--color-white); }
		&[data-label="Twijfel"] { background:var(--color-yellow); color:var(--color-grey-4); }
		&[data-label="Onvoldoende"] { background:var(--color-red); color:var(--color-white); }
	}

	&+div + .instruction {
		display:none;
	}

	.gwp_slider_container {
		display:flex;
		gap:.5rem;
		align-items:center;

		&:before,
		&:after {
			font-size:.75em;
			font-weight:600;
			display:inline-block;
			width:15px;
			text-align:center;
			color:var(--color-grey);
		}
	}

	.markers {
		display:flex;
		margin: -15px 7px 0;
		list-style:none;
		opacity:.5;
		font-size:.75rem;

		li {
			margin-right:auto;
			width:10px;
			text-align:center;
			display:flex;
			flex-direction:column;

			&:before {
				content:"|";
			}

			&:last-child {
				margin-right:0;
			}

			i {
				position:absolute;
				transform:rotate(45deg);
			}
		}

	}
}

.gfield > div.gfield_description:not(.validation_message) {
	margin-left:33.33%;
	padding-right:2em;
}

/**
 * Tables & overviews
 */
dl {
	display:flex;
	flex-wrap:wrap;
	padding:.75rem 1rem;
	margin-bottom:1em;
	background:var(--color-white);

	dt, dd {
		border-bottom:1px solid var(--color-grey-1);
		padding: .5rem .75rem .5rem 0;
		overflow:hidden;
		text-overflow:ellipsis;
	}

		dt {
			color:var(--color-grey);
			width:33.33%;
		}

		dd {
			width:66.66%;
		}

		dt:first-of-type,
		dd:first-of-type {
			padding-top:0;
		}

		dt:last-of-type,
		dd:last-of-type {
			padding-bottom:0;
			border:none;
		}
}

.gfield_html table,
.gv-diy-view table {
	overflow:hidden;
	border-collapse:collapse;
	font-weight:400;

	thead {
		vertical-align:bottom;

		th {
			background-color:var(--color-grey-1);
			border:none;
			color:var(--color-grey-4);
			font-weight:600;
			padding:.25rem .775rem .5rem;
			padding-top:4px;
			text-align:left;
		}
	}

	td {
		border-bottom:1px solid var(--color-grey-2);
		padding:.775rem 1rem;
	}

	tr:hover {
		td {
			background:#f8fafc;
			color:var(--color-btn-secondary);
		}

		td:first-of-type {
			box-shadow: 3px 0 0 0 var(--color-btn-secondary) inset;
		}
	}
}

.gfield_html table {
	width:100%;
	margin-bottom:1em;
	background:var(--color-white);
}

/* Nested forms */
.gpnf-modal {
	position:fixed;
	top:0;
	left:0;
	background:#000c;
	padding:1rem;
	width:100vw;
	height:100vh;
	overflow-y:auto;

	.tingle-modal__close {
		position:fixed;
		top:0;
		right:0;
		width: 2em;
	  	height: 2em;
	  	overflow: hidden;
		
		span:last-child {
			display:none;
		}
	}

	.tingle-modal-box {
		background:var(--color-white);
		max-width:800px;
		margin:1em auto;
	}

	.gpnf-modal-header {
		color:var(--color-white);
		font-size:1.5rem;
		line-height:1;
		padding:1em 2rem;
		margin-bottom:1em;
	}

	.gform-body {
		padding:0 2rem;
	}

	.tingle-modal-box__footer {
		max-width:800px;
		width:100%;
		margin:0 auto;
		position:fixed;
		bottom:0;
		background:var(--color-grey-0);
		text-align:center;
		border-top:1px solid var(--color-btn-secondary);
		z-index:1;
		box-shadow:0 0 5px #0003;

		.gpnf-btn-cancel,
	   .gpnf-btn-delete	{
			margin:1em;
		}

		.gpnf-btn-cancel-mobile {
			display:none;
		}
	}

	input[type="submit"] {
		visibility:hidden;
	}
}

.gpnf-row-actions ul {
	list-style:none;
	display:flex;
	flex-direction:row !important;

	button {
		width:1.5rem;
		height:1.5rem;
		overflow:hidden;
		color:transparent;
		margin:0 !important;
		padding:0 !important;

		&:before {
			font-family: "CIBG Icons",serif;
		}

		&.edit-button:before {
			content:"\EA31";
		}

		&.delete-button:before {
			content:"\EA20";
		}
	}
}

.confirmation {
	display: inline-flex;
	align-items: center;
	background-color: var(--color-green);
	border-bottom: 4px solid #0003;
	font-size:1rem;
	padding:1rem 2.5rem 1rem 5rem;
	position: relative;
	margin-top:.5rem;

	h2 {
		color: var(--color-white);
		padding:0;
		font-size:1.5rem;
	}
}

.confirmation__checkmark {
	animation: confirmation-checkmark-fill 0.4s ease-in-out 0.4s forwards;
	border-radius:50%;
	height:34px;
	width:34px;
	left:2rem;
	position:absolute;
	stroke:var(--color-green);
	stroke-linecap:round;
	stroke-miterlimit:100;
	stroke-width:6;
}

.confirmation__checkmark-circle {
	animation: confirmation-checkmark-stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
	stroke: #c5f2b2;
	stroke-dasharray: 120;
	stroke-dashoffset: 120;
	stroke-miterlimit: 10;
	stroke-width: 5;
}

.confirmation__checkmark-check {
	animation: confirmation-checkmark-stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
	stroke-dasharray: 48;
	stroke-dashoffset: 48;
	transform-origin: 50% 50%;
}

@keyframes confirmation-checkmark-stroke {
	100% { stroke-dashoffset: 0; }
}

@keyframes confirmation-checkmark-fill {
	100% { box-shadow: inset 0 0 0 24px #c5f2b2; }
}

.gform_confirmation_message {
	margin-top:1em;
}

.gform_anchor {
	display:none;
}

.ui-datepicker {
	background:var(--color-white);
	font-size:.85rem;
	box-shadow:0 0 3px #0006;

	&[data-parent-form] {
		border: 1px solid var(--color-grey-3);
	}

	.ui-datepicker-header {

		.ui-datepicker-title {
			display:flex;

			select {
				border:none;
				background-color:transparent;
				font-size:.9rem;
				width:95px;
				margin-left:auto;
				
				&:last-of-type {
					width:65px;
					margin-left:10px;
					margin-right:auto;
				}
			}
		}

		a.ui-corner-all {
			float:left;
			font-size:.7rem;
			line-height:2.25rem;
			padding: 0 .5rem;
			color:var(--color-brand-contrast);

			&.ui-datepicker-next {
				float:right;
				
				&::before {
					content:"\EA09";
				}
			}

			&::before {
				content:"\EA06";
				font-family: "CIBG Icons",serif;
			}

			span {
				display:none;
			}
		}	
	}

	table {
		border-collapse:collapse;

		th {
			text-align:center;
			width:2rem;
			line-height:2rem;
			padding:0;
			background:var(--color-grey);
			color:var(--color-white);
		}

		td {
			padding:0;
			border:1px solid var(--color-grey-2);

			a, span {
				display:inline-block;
				width:2rem;
				line-height:2rem;
				text-align:center;
			}

			a {
				text-decoration:none;
				background:var(--color-grey-1);
				color:var(--color-text);

				&:hover,
				&[aria-current="true"] {
					background:var(--color-btn-secondary);
					color:var(--color-white);
				}
			}
		}

	}
}

/* Selectielijsten */
.selectielijst {
	max-width:960px;

	.gv-widgets-header form,
	.gv_search_item_container {
		background: var(--color-grey-1);
		padding: 1em 1em 1.25em;
	}

	.gv_search_item_container {
		margin-bottom:1em;

		.button {
			float:right;
		}
	}

	.gv-search-widget-area {
		gap:0 .5em;

		.gv-search-box {
			flex:0 0 !important;
			margin:initial !important;
			min-width:24% !important;
		}
	}
}
	
#wpadminbar {
	position:fixed;	
	top:-2rem;
	left:0;
	height:2rem;
	width:100%;
	background:var(--color-black);
	padding:0 2rem 0 .5rem;
	z-index:99;

	ul {
		display:flex;
		list-style:none;
		float:left;
		margin:0;

		&:last-of-type {
			float:right;

			div {
				right: -.3rem;

				span {
					display:block;
				}
			}
		}

		div {
			position:absolute;
			display:none;
			box-shadow: 0 3px 5px rgb(0 0 0 / 20%);
			background: #2c3338;
			padding: .3rem .3rem .3rem .25rem;
		  	margin-left: -.75rem;
		}	

		li {
			padding:0 .5rem;
			position:relative;
			white-space:nowrap;

			&:hover {
				background:#fff2;

				&> div {
					display:flex;
					flex-direction:column;
				}
			}

			.menupop::after {
				content:"\2192";
				color:var(--color-white);
				font-size:.85rem;
				padding-left:.25rem;
			}

			li .display-name:first-of-type {
				display:none;
			}
		}

		ul {
			flex-direction:column;
			position:relative;

			div {
				left: 100%;
				top: 0;
				margin: -.25rem 0 0;
			}
		}
	}

	a {
		color:var(--color-white);
		text-decoration:none;
		font-size:.875rem;
	}

	.screen-reader-shortcut {
		position:absolute;
		top:-1000em;
	}

	&::before {
		content:"\EA01";
		font-family: "CIBG Icons",serif;
		font-size:.75rem;
		color:var(--color-white);
		display:block;
		width:2rem;
		line-height:2rem;
		position:absolute;
		background:var(--color-black);
		right:0;
		top:2rem;
		text-align:center;
		cursor:pointer;
		opacity:.5;
	}
}

body.bar-active {
	padding-top:2rem; 

	#wpadminbar {
		top:0;

		&::before {
			top: 0;
			opacity:1;
		}
	}

	&.tingle-enabled #wpadminbar {
		display:none;
	}

	#testlinks {
		margin-top:2rem;
	}
}

#wp-admin-bar-search {
	display:none;
}

#logo {
	height:100px;
	background:url("images/beeldmerk.svg") no-repeat left top;
	background-size:auto 125px;
	color:var(--color-brand-2);
	font-size:0.9375rem;
	line-height:1.25;
	width:50px;
	margin:0 auto 30px;
	position:relative;

	p {
		position:absolute;
		margin:0;
		bottom:-2px;
		left:60px;
		width:280px;
	}

	span {
		display:inline-block;
		max-width:240px;
	}
}

#testlinks {
	position:absolute;
	top:.5rem;
	left:.5rem;
	transform-origin:top left;
	transform:scale(.75);
	display:flex;
	gap:.5rem;
}

footer {
	padding-top:50px;
}

.error404 {
	a:before {
		content:"\EA09";
		font-family: "CIBG Icons",serif;
		font-size:.75rem;
		padding-right:.5em;
	}

	small {
		color:var(--color-grey-4);
	}
}

@media (width >= 1200px) {
	body {
    	font-size: 112.5%;

		input,
		textarea,
		select,
		button {
			font-size:1em;
		}

		select {
			line-height:normal;
		}
  	}
}

@media only screen and (width <= 768px) {
	header {
		transform:scale(.875);
		transform-origin:center top;
		margin-bottom:-2em;

		#logo {
			height:140px;

			p {
				width:170px;
				top:48px;
			}

			span {
				width:150px;
			}
		}
	}

	main {
		padding-left:1em;
		padding-right:1em;
	}

	.gf_page_steps {
		padding:0;

		.gf_step_label {
			font-size:1.5rem;
			overflow:hidden;
			white-space:nowrap;
			text-overflow:ellipsis;
			width:100%;
		}
	}

	body[data-step="2"] .gform-body:before {
		position:relative;
		top:-.25em;
		display:block;
		text-align:right;
	}

	.gfield {
		.ginput_container {
			width:initial;
			padding-right:.25em;

			.gchoice label {
				&:before,
				&:after {
					top:.4rem;
				}
			}
		}

		legend,
		label {
			width:100%;
			height:initial;
		}

		&.gfield--type-fileupload {
			display:block;

			.ginput_container_fileupload {
				margin:0;
			}
		}

		&> div.gfield_description {
			margin-left:0 !important;
			margin-right:0 !important;
		}

		.gform-grid-row {
			flex-direction:column;
		}

		[readonly] {
			padding-left:0 !important;
		}

		&.gfield_html_formatted {
			overflow:auto;
		}
	}

	.gwp_collapse {
		.collapse-button {
			top:33.5px;
		}

		input {
			width: calc(100% - 34px);
		}
	}

	dl {
		dt {
			width:100%;
			border:none;
			padding:0;
			line-height:1;
		}

		dd {
			width:100%;
			margin-bottom:.5em;
			padding:.25em 0;

			&:last-child {
				margin-bottom:0;
			}
		}
	}

	#wp-admin-bar-gform-forms {
		a {
			line-height:1.625rem !important;
		}

		.gforms-menu-icon {
			display:none !important;
		}
	}
}