/*************** FORMS ***************/

.form-control {
	border-radius: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
	border: none;
}

.disabled input,
.disabled select {
	pointer-events: none;
	background: #f8f8f8;
	border: 1px solid #dddddd;
	outline: none;
}

.gform_wrapper .hidelabel label.gfield_label {
	display: none;
}

.gform_wrapper .gf_progressbar {
	padding: 0;
	border-radius: 6px;
	box-shadow: none;
	background: none;
}

.gform_wrapper .gf_progressbar_percentage {
	border-radius: 6px 0 0 6px;
	background: none;
}

.gform_wrapper .gf_progressbar_percentage span {
	margin-top: 3px;
	line-height: 18px;
}


.gform_wrapper .gf_progressbar:after {
	box-shadow: none;
	border-radius: 6px;
}

.gform_wrapper .gf_progressbar_percentage.percentbar_100 {
	border-top-right-radius: 6px;
	border-bottom-right-radius: 6px;
}

/* Kleuren komen overeen met merk kleuren - zie boven in css */
.gform_wrapper .gf_progressbar_percentage.percentbar_blue 	{ background-color: #2196F3; }
.gform_wrapper .gf_progressbar_percentage.percentbar_gray 	{ background-color: gray; }
.gform_wrapper .gf_progressbar_percentage.percentbar_green 	{ background-color: #767f22; }
.gform_wrapper .gf_progressbar_percentage.percentbar_orange { background-color: #df9a19; }
.gform_wrapper .gf_progressbar_percentage.percentbar_red 	{ background-color: #c10016; }

.gform_wrapper .gf_progressbar_wrapper h3.gf_progressbar_title {
	font: normal normal 12px/24px 'Palanquin', Arial, Helvetica, Verdana, sans-serif;
	color: #333333;
	margin: 0 0 8px 0 !important;
}

/* Hide the browser's default checkbox/radio */
form .hasradio input,
form .hascheckbox input,
.gfield_radio input,
.gfield_checkbox input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

form .hasradio label,
form .hascheckbox label,
.gform_wrapper .gfield_radio li label,
.gform_wrapper .gfield_checkbox li label {
	margin-left: 26px !important;
	padding-right: 26px;
}

form .hasradio input.disabled + label,
form .hascheckbox input.disabled + label,
fieldset[disabled] input[type=checkbox] + label, 
fieldset[disabled] input[type=radio] + label, 
input[type=checkbox].disabled + label, 
input[type=checkbox][disabled] + label, 
input[type=radio].disabled + label, 
input[type=radio][disabled] + label {
	opacity: 0.6 !important;
}

form .hasradio label,
form .hascheckbox label,
.gform_wrapper .gfield_checkbox li label,
.gform_wrapper .gfield_radio li label,
label {
	font-size: 1em !important;
	font-weight: 400;
}

.gsurvey-rating:not(:checked) > label, 
.gsurvey-rating:not(:checked) > label:hover, 
.gsurvey-rating:not(:checked) > label:hover ~ label, 
.gsurvey-rating > input:checked ~ label {
	width: 15px;
	line-height: 30px;
	background-size: 30px 30px;
}
.gsurvey-rating:not(:checked) > label:nth-of-type(1), 
.gsurvey-rating:not(:checked) > label:nth-of-type(1):hover, 
.gsurvey-rating:not(:checked) > label:nth-of-type(3), 
.gsurvey-rating:not(:checked) > label:nth-of-type(3):hover, 
.gsurvey-rating:not(:checked) > label:nth-of-type(5), 
.gsurvey-rating:not(:checked) > label:nth-of-type(5):hover,
.gsurvey-rating:not(:checked) > label:nth-of-type(7), 
.gsurvey-rating:not(:checked) > label:nth-of-type(7):hover,
.gsurvey-rating:not(:checked) > label:nth-of-type(9), 
.gsurvey-rating:not(:checked) > label:nth-of-type(9):hover {
	background-position: right !important;
}
.gsurvey-rating:not(:checked) > label:nth-of-type(2), 
.gsurvey-rating:not(:checked) > label:nth-of-type(2):hover, 
.gsurvey-rating:not(:checked) > label:nth-of-type(4), 
.gsurvey-rating:not(:checked) > label:nth-of-type(4):hover, 
.gsurvey-rating:not(:checked) > label:nth-of-type(6), 
.gsurvey-rating:not(:checked) > label:nth-of-type(6):hover,
.gsurvey-rating:not(:checked) > label:nth-of-type(8), 
.gsurvey-rating:not(:checked) > label:nth-of-type(8):hover,
.gsurvey-rating:not(:checked) > label:nth-of-type(10), 
.gsurvey-rating:not(:checked) > label:nth-of-type(10):hover {
	background-position: left !important;
}
.gsurvey-rating:not(:checked) > label {
	background-image: url('images/star0.png');
}
.gsurvey-rating > input:checked ~ label {
	background-image: url('images/star2.png');
}
.gsurvey-rating:not(:checked) > label:hover, 
.gsurvey-rating:not(:checked) > label:hover ~ label {
	background-image: url('images/star2.png');
}


.gform_wrapper .gfield_checkbox li label, .gform_wrapper .gfield_radio li label {
	max-width: 100%;
}

.gform_wrapper ul.gfield_checkbox li,
.gform_wrapper ul.gfield_radio li {
	padding: 4px 0 !important;
}


.gform_wrapper li.gfield_html,
.gform_wrapper li.gfield_html_formatted {
	width: 100% !important;
}

/* Create a custom checkbox */
form .hasradio label,
form .hascheckbox label,
.gfield_checkbox label,
.gfield_radio label {
	position: relative;	
}


form .hascheckbox label:before,
.gfield_checkbox label:before {
	content: " ";
	position: absolute;
	top: 3px;
	left: -26px;
	height: 18px;
	width: 18px;
	background-color: #f5f5f5;
	border: 1px solid #ccc;
	margin-left: 1px;
}

form .hasradio label:before,
.gfield_radio label:before {
	content: " ";
	position: absolute;
	top: 1px;
	left: -26px;
	height: 20px;
	width: 20px;
	background-color: #f5f5f5;
	border: 1px solid #ccc;
}

.gform_wrapper li.gfield.gf_list_2col ul.gfield_checkbox li label,
.gform_wrapper li.gfield.gf_list_2col ul.gfield_radio li label,
.gform_wrapper li.gfield.gf_list_3col ul.gfield_checkbox li label,
.gform_wrapper li.gfield.gf_list_3col ul.gfield_radio li label,
.gform_wrapper li.gfield.gf_list_4col ul.gfield_checkbox li label,
.gform_wrapper li.gfield.gf_list_4col ul.gfield_radio li label {
	overflow: unset;
}
.gform_wrapper li.gfield.gf_list_2col ul.gfield_checkbox li label:before, 
.gform_wrapper li.gfield.gf_list_3col ul.gfield_checkbox li label:before,
.gform_wrapper li.gfield.gf_list_4col ul.gfield_checkbox li label:before {
	top: 0;
}
.gform_wrapper li.gfield.gf_list_2col ul.gfield_radio li label:before,
.gform_wrapper li.gfield.gf_list_3col ul.gfield_radio li label:before,
.gform_wrapper li.gfield.gf_list_4col ul.gfield_radio li label:before {
	top: -1px;
}


form .hasradio.input-center label {
	display: block;
	margin: 0 !important;
}

form .hasradio.input-center label:before {
	left: 0;
	right: 0;
	top: 0;
	margin: 0 auto 0;
}

/* Create a custom radio */
form .hasradio label:before,
.gfield_radio label:before {
	border-radius: 11px;
}

/* On mouse-over, add a grey background color */
form .hasradio label:hover:before,
form .hascheckbox label:hover:before,
.ginput_container .gfield_radio li:hover label:before,
.ginput_container .gfield_checkbox li:hover label:before {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
form .hasradio input:checked + label:before,
form .hascheckbox input:checked + label:before,
.ginput_container .gfield_radio input:checked + label:before,
.ginput_container .gfield_checkbox input:checked + label:before {
    background-color: #2196F3 !important;
}

/* Create the checkmark/indicator (hidden when not checked) */
form .hasradio label:after,
form .hascheckbox label:after,
.gfield_radio label:after,
.gfield_checkbox label:after {
	content: " ";
	position: absolute;
	display: none;
}

/* Show the checkmark when checked */
form .hasradio input:checked + label:after,
form .hascheckbox input:checked + label:after,
.ginput_container .gfield_radio input:checked + label:after,
.ginput_container .gfield_checkbox input:checked + label:after {
	display: block;
}

/* Style the checkmark/indicator */
form .hascheckbox label:after,
.gfield_checkbox label:after {
	left: -20px;
	top: 4px;
	width: 8px;
	height: 12px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.gform_wrapper li.gfield.gf_list_2col ul.gfield_checkbox li label:after, 
.gform_wrapper li.gfield.gf_list_3col ul.gfield_checkbox li label:after,
.gform_wrapper li.gfield.gf_list_4col ul.gfield_checkbox li label:after {
	top: 1px;
}

form .hasradio label:after,
.gfield_radio label:after {
	left: -21px;
	top: 6px;
	width: 10px;
	height: 10px;
	background: #fff;
	border-radius: 10px;
}
.gform_wrapper li.gfield.gf_list_2col ul.gfield_radio li label:after,
.gform_wrapper li.gfield.gf_list_3col ul.gfield_radio li label:after,
.gform_wrapper li.gfield.gf_list_4col ul.gfield_radio li label:after {
	top: 4px;
}

form .hasradio.input-center label:after {
	left: 0;
	right: 0;
	top: 5px;
	margin: 0 auto 0;
}

/* Width of 2 Name field (Firstname and lastname not 49...% ), and not wider on errors, when left labels in use */
.gform_wrapper ul.gform_fields:not(.top_label) div.ginput_complex.ginput_container.gf_name_has_2 span,
.gform_wrapper ul.gform_fields:not(.top_label) li.gfield.gfield_error div.ginput_complex.ginput_container.gf_name_has_2 span {
	width: 47% !important;
}
.gform_wrapper ul.gform_fields:not(.top_label) li.gfield.gfield_error div.ginput_complex.ginput_container.gf_name_has_2 {
	width: 70%;
}



/* Placeholders */
::-webkit-input-placeholder { color: #ccc !important; }
:-ms-input-placeholder { color: #ccc !important; }
::-moz-placeholder { color: #ccc !important; }
:-moz-placeholder { color: #ccc !important; }


/* border inputs */
.woocommerce input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
.woocommerce select,
.woocommerce textarea,
.gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
.gform_wrapper select,
.gform_wrapper textarea {
	border: 1px solid #ccc;
	line-height: inherit !important;
	padding: 5px 4px !important;
}

body .gform_wrapper ul li.gfield,
.gform_wrapper ul li.gfield.field_sublabel_above.field_description_below+li.gfield {
	padding: 0 16px 0 0 !important;
	margin: 14px 0 !important;
}

body .gform_wrapper ul li.field_description_below div.ginput_container_checkbox,
body .gform_wrapper ul li.field_description_below div.ginput_container_radio {
	margin-top: 14px !important;
	margin-bottom: 14px !important;
}

.gform_wrapper ul.gform_fields:not(.top_label) .gfield_label {
	margin: 5px 0;
}

/* Asterix */
.gform_wrapper .gfield_required {
}

.gform_body li.gfield.gfield_error.gfield_contains_required div.ginput_container {
	margin-top: 0;
}


/* Inputs */

.gform_wrapper input[type=file].medium,
.gform_wrapper .left_label input.large,
.gform_wrapper .left_label select.large,
.gform_wrapper .left_label textarea.textarea,
.gform_wrapper .right_label input.large,
.gform_wrapper .right_label select.large,
.gform_wrapper .right_label textarea.textarea,
.gform_wrapper ul.gform_fields:not(.top_label) li ul.gfield_checkbox,
.gform_wrapper ul.gform_fields:not(.top_label) li ul.gfield_radio,
.gform_wrapper .left_label .gfield_error input.large,
.gform_wrapper .left_label .gfield_error select.large,
.gform_wrapper .left_label .gfield_error textarea.textarea,
.gform_wrapper .right_label .gfield_error input.large,
.gform_wrapper .right_label .gfield_error select.large,
.gform_wrapper .right_label .gfield_error textarea.textarea {
	width: 90%;
}

.gform_wrapper .ginput_complex.ginput_container.gf_name_has_3 {
	display: flex;
}

/* Multi Name input */
.gform_wrapper .ginput_complex.ginput_container.gf_name_has_3 span.name_first  { width: 28%; margin-right: 3% !important; padding-right: 0; }
.gform_wrapper .ginput_complex.ginput_container.gf_name_has_3 span.name_middle { width: 18%; margin-right: 3% !important; padding-right: 0; }
.gform_wrapper .ginput_complex.ginput_container.gf_name_has_3 span.name_last   { width: 38%; margin-right:  0 !important; padding-right: 0; }

/* Date selects */
.gform_body ul.left_label .gfield_date_dropdown_month	{ width: 28%; margin-right: 3% !important; padding-right: 0; }
.gform_body ul.left_label .gfield_date_dropdown_day		{ width: 28%; margin-right: 3% !important; padding-right: 0; }
.gform_body ul.left_label .gfield_date_dropdown_year	{ width: 28%; margin-right:  0 !important; padding-right: 0; }

.gform_body ul.top_label .gfield_date_dropdown_month	{ width: 32%; margin-top: 0 !important; margin-right: 2% !important; padding-right: 0; }
.gform_body ul.top_label .gfield_date_dropdown_day		{ width: 32%; margin-top: 0 !important; margin-right: 2% !important; padding-right: 0; }
.gform_body ul.top_label .gfield_date_dropdown_year		{ width: 32%; margin-top: 0 !important; margin-right:  0 !important; padding-right: 0; }

.gform_body .gfield_date_dropdown_month select,
.gform_body .gfield_date_dropdown_day select,
.gform_body .gfield_date_dropdown_year select { width: 100%; }

/* No sub labels address */
.gform_wrapper .ginput_complex label {
	display: none !important;
}

.ginput_container_address .address_line_1 input[type=text] {
	margin-bottom: 14px !important;
	width: 90% !important;
}


ul.top_label .ginput_container_address .address_line_1 input[type=text] {
	margin-bottom: 14px !important;
	width: 100% !important;
}


ul.left_label .gform_wrapper .ginput_complex .ginput_left {
	width: 43% !important;
	margin-left: 0 !important;
	margin-right: 3% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
ul.left_label .gform_wrapper .ginput_complex .ginput_right {
	width: 44% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}


.gform_legacy_markup_wrapper .clear-multi {
	margin-left: 0 !important;
	width: 100% !important;
}





/* Validate style */

.gform_wrapper div.validation_error {
	color: #a94442;
	background-color: #f2dede;
	border: 1px solid #ebccd1;
	border-radius: 3px;
	text-align: left;
	padding: 15px;
}

.gform_body li.gfield {
	position: relative;
}

 /* Input container zonder background en borders */
.gform_wrapper li.gfield.gfield_error, 
.gform_body li.gfield.gfield_error {
	background-color: transparent !important;
	border: none !important;
	padding: 0 16px 0 0 !important;
	margin: 14px 0 !important;
}

/*  */
.gform_wrapper.gform_validation_error .gform_body ul li.gfield.gfield_error:not(.gf_left_half):not(.gf_right_half) {
	max-width: 100% !important;
}

.gform_wrapper li.gfield.gfield_error.gfield_contains_required div.ginput_container,
.gform_wrapper li.gfield.gfield_error.gfield_contains_required label.gfield_label {
 	/* margin: 5px 0 !important; */
	margin-top: 5px !important;
	margin-bottom: 5px !important;
	color: #000000 !important;
}

.gform_wrapper .field_description_below .gfield_description {
	padding-top: 0 !important;
}

.gform_wrapper .gfield_error input[type=email], 
.gform_wrapper .gfield_error input[type=number],
.gform_wrapper .gfield_error input[type=password],
.gform_wrapper .gfield_error input[type=tel],
.gform_wrapper .gfield_error input[type=text],
.gform_wrapper .gfield_error input[type=url],
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea,
.gform_wrapper li.gfield_error.field_sublabel_above .ginput_complex input[type=text] {
	margin-bottom: 0 !important;
}

.gform_wrapper .ginput_complex.ginput_container.has_street.has_city.has_zip.ginput_container_address span:first-of-type input[type=text] {
	margin-bottom: 14px !important;
}

.gform_wrapper ul.gform_fields li.gfield div.ginput_complex span.ginput_left select,
.gform_wrapper ul.gform_fields li.gfield div.ginput_complex span.ginput_right select,
.gform_wrapper ul.gform_fields li.gfield input[type=radio],
.gform_wrapper ul.gform_fields li.gfield select {
	margin-left: 0 !important;
}

.gform_wrapper .gfield_radio li label,
.gform_wrapper .gfield_checkbox li label {
	margin-top: 2px;
}

.gform_wrapper form ul.left_label li ul.gfield_checkbox li,
.gform_wrapper form ul.left_label li ul.gfield_radio li,
.gform_wrapper form ul.right_label li ul.gfield_checkbox li,
.gform_wrapper form ul.right_label li ul.gfield_radio li,
.gform_wrapper ul.left_label li ul.gfield_checkbox li,
.gform_wrapper ul.left_label li ul.gfield_radio li,
.gform_wrapper ul.right_label li ul.gfield_checkbox li,
.gform_wrapper ul.right_label li ul.gfield_radio li {
	margin-bottom: 4px;
}

.gform_body li.gfield_validate input[type=text], 
.gform_body li.gfield_validate input[type=url], 
.gform_body li.gfield_validate input[type=email], 
.gform_body li.gfield_validate input[type=tel], 
.gform_body li.gfield_validate input[type=number], 
.gform_body li.gfield_validate input[type=password], 
.gform_body li.gfield_validate textarea,
.gform_body li.gfield_validate select {
	border: 1px solid green !important;
	background-color: #ffffff !important;
	padding: 6px 2px;
}

.gform_body li.gfield.gfield_completevalidate::after,
.gform_body li.gfield.gfield_completeerror::after,
.gform_body li.gfield.gfield_validate::after,
.gform_body li.gfield.gfield_error::after {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 20px;
	line-height: 26px;
	position: absolute;
	right: 20px;
	top: 0;
}

.gform_body ul.top_label li.gfield.gfield_completevalidate::after,
.gform_body ul.top_label li.gfield.gfield_completeerror::after,
.gform_body ul.top_label li.gfield.gfield_validate::after,
.gform_body ul.top_label li.gfield.gfield_error::after {
	right: -30px;
	top: 33px;
}

.gform_body li.gfield.gfield_completevalidate::after,
.gform_body li.gfield.gfield_validate::after {
	content: "\f00c"; /* v */
	color: green;
	margin: 4px 15px 0 0;
}

.gform_body li.gfield.gfield_completeerror::after,
.gform_body li.gfield.gfield_error::after {
	content: "\f00d"; /* x */
	color: #c40000;
	margin: 5px 17px 0 0;
}

.gform_wrapper input.gfield_partialvalidate,
.gform_wrapper .gfield_partialvalidate select {
	border: 1px solid green !important;
	background-color: #ffffff !important;
	padding: 5px 2px;
}

.gform_wrapper input.gfield_partialerror,
.gform_wrapper .gfield_partialerror select {
	border: 1px solid #c40000 !important;
	background-color: #ffffff !important;
	padding: 5px 2px;
}





/* Tooltip */
.has-tooltip {
	position: relative;
}

.has-tooltip .ginput_container::after {
	font-family: FontAwesome;
	font-size: 20px;
	line-height: 26px;
	float: right;
	content: "\f05a";
	color: #2196F3;
	margin: 3px 15px 0 0;
}

.has-tooltip .ginput_container:hover:after {
	cursor: pointer;
}

.has-tooltip .gfield_description {
	display: block;
	position: absolute;
	width: 66% !important;
	padding: 5px !important;
	text-align: center;
	background-color: #2196F3;
	color: #ffffff;
	border: 0;
	opacity: 0;
	transition: opacity 0.2s;
	pointer-events: none;
	z-index: +1;
}


.has-tooltip .gfield_description::before {
	content: " ";
	position: absolute;
	bottom: 100%; /* At the bottom of the tooltip */
	right: 9px;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: transparent transparent #2196F3 transparent;
}


.has-tooltip .ginput_container:hover + .gfield_description {
	opacity: 1;
	transition: opacity 0.2s;
}



/* o.a. Aanmeld formulier Mijnihelp */

.gform_wrapper .ginput_complex label {
	display: block !important;
}
.gform_wrapper .ginput_container_password button {
	width: 20px;
	right: 22px !important;
	top: 2px;
}
.gform_wrapper .ginput_container_password button .dashicons {
	color: #999999;
}
.gform_wrapper .ginput_container_password button:hover {
	background: none;
}
.gform_wrapper .ginput_container_password button:hover .dashicons {
	color: #555555;
}
.gform_wrapper ul.left_label li.gfield .gfield_password_strength, .gform_wrapper ul.right_label li.gfield .gfield_password_strength {
	width: 63%;
	margin-top: 0;
	padding: 4px 6px;
}


.gform_wrapper ul.gform_fields:not(.top_label) div.ginput_complex.ginput_container.gf_name_has_2 span, 
.gform_wrapper ul.gform_fields:not(.top_label) li.gfield.gfield_error div.ginput_complex.ginput_container.gf_name_has_2 span,
.gform_wrapper .ginput_complex .ginput_left, .gform_wrapper .ginput_complex .ginput_right {
	width: calc(50% - 17px) !important;
	padding-top: 0;
	padding-right: 8px;
	padding-left: 0;
	margin-right: 0 !important;
}

.gform_wrapper ul.gform_fields:not(.top_label) li.gfield.gfield_error div.ginput_complex.ginput_container.ginput_container_email {
	width: 70%;
}




/******* breakpoint gravity forms *******/  
@media all and (max-width: 640px) {

	.gform_wrapper.gf_login_form .gform_footer,
	.gform_wrapper .gform_footer, .gform_wrapper.gf_login_form .gform_footer {
		margin-left: 0% !important;
	}

	body .gform_wrapper ul li.gfield, .gform_wrapper ul li.gfield.field_sublabel_above.field_description_below+li.gfield,
	.gform_wrapper .left_label input.large, .gform_wrapper .left_label select.large, .gform_wrapper .left_label textarea.textarea, 
	.gform_wrapper .right_label input.large, .gform_wrapper .right_label select.large, .gform_wrapper .right_label textarea.textarea, 
	.gform_wrapper ul.gform_fields:not(.top_label) li ul.gfield_checkbox, .gform_wrapper ul.gform_fields:not(.top_label) li ul.gfield_radio, 
	.gform_wrapper .left_label .gfield_error input.large, .gform_wrapper .left_label .gfield_error select.large, .gform_wrapper .left_label 
	.gfield_error textarea.textarea, .gform_wrapper .right_label .gfield_error input.large, .gform_wrapper .right_label .gfield_error select.large, .gform_wrapper .right_label .gfield_error textarea.textarea,
	.gform_wrapper ul.gform_fields:not(.top_label) li.gfield.gfield_error div.ginput_complex.ginput_container.ginput_container_email,
	.gform_wrapper .ginput_complex .ginput_left, .gform_wrapper .ginput_complex .ginput_right {
		width: 100% !important;
		padding-right: 0 !important;
	}

	



}

