/*= Gform ===================== */

.hide-offscreen{
	position: fixed !important;
	overflow: hidden;
	width: 0 !important;
	height: 0 !important;
	left: -150vw;
	top: -150vh;
}

.ct-widget > .gform_widget {
	display: -webkit-box !important;
	display: -moz-box !important;
	display: -ms-flexbox !important;
	display: -webkit-flex !important;
	display: flex !important;
	-webkit-flex-direction: column !important;
	-moz-flex-direction: column !important;
	-ms-flex-direction: column !important;
	flex-direction: column !important;
	-webkit-justify-content: start !important;
	justify-content: start !important;
	-webkit-align-items: center !important;
	align-items: center !important;
}

.gform_wrapper {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: left;
	text-align: left;
	font-family: sndtfontstack;
  	font-size: 16px;
 	margin: 32px 0px;
	padding: 6px;
	max-width: max(750px,96vw); 
}

.gfield{
	border: none;
}
.ginput_container{
	margin-top: 5px !important;
}

.inschrijving_formwidget input[type=email]{
	width: 100% !important;
}



/* GENERAL */

.gfield{
  border: none;
  margin: 16px 0px;
  padding: 0px;
  
}

.gfield > legend, .gfield > label {
  font-family: inherit;
  font-weight: 700;
  letter-spacing: -0.18pt;		
}

.ginput_container label {
	font-size: 80%;
	letter-spacing: -0.18pt;
}

.gsection{
	margin-top: 0.2em;
	margin-bottom: 0.2em;
}
.gsection_title{
	margin-top: 0;
	margin-bottom: 0;
}



/*
 * #gform_53 .gform_page_footer, #gform_53 .gform_page_footer{
	position: relative;
}
#gform_53 .gform_ajax_spinner{
	position: absolute;
	top: 2rem;
	left: 50%;
	transform: translateX(-50%);
}
 * */
 #gform_57 .ginput_product_price_label{
	display: none;
}

/**
 * input field settings
 * */

.gform_wrapper input[type=text], 
.gform_wrapper input[type=email],
.gform_wrapper input[type=password], 
.gform_wrapper input[type=radio], 
.gform_wrapper input[type=checkbox], 
.gform_wrapper textarea, 
.gform_wrapper select {
	background-color: var(--light);
	height: 2.5em;
	border: 1px solid #c8c8c8;
}

@media screen and (max-width: 641px){
	.gform_wrapper.gravity-theme .gfield input.medium, .gform_wrapper.gravity-theme .gfield select.medium{
	   width: 100%;
	}
  }


.gform_body input:not(.button):read-only, 
.gform_body input:not(.button):read-only:focus{
	border: 1px solid transparent !important;
	box-shadow: none;
	outline: none;
	cursor: default;
}

.gform_wrapper input:focus, 
.gform_wrapper textarea:focus, 
.gform_wrapper select:focus {
	outline: none;
	box-shadow: 1px 2px 3px 1px var(--shadow);
	border: 1px solid var(--dark);
}

/* don't bolden text for checked checkboxes */
input[type="checkbox"]:checked + label{
   font-weight:  inherit; 
}


.gfield_validation_message{
	display: block;
	font-weight: 600;
	color: black;
	background-color: peachpuff;
	border: 1px solid red;
}

/* name fields */ 

.inschrijving_namen  {
  display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.inschrijving_namen div {
  display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	flex-grow: 1;
}

.inschrijving_namen div span {
	width: 100% !important;
	
}

.ginput_container_name {
   display : flex; 
   flex-wrap: wrap;
}

.ginput_container_name span{
   display: flex;
   flex-direction: column;
}

.ginput_container_name span:first-child{
   margin-right: 12px;   
}

/* consent fields */

.gf_hidden_consent_description   .gfield_consent_description {
   display: none;
}

/* DATE FIELDS */
/*classname must be added manually to field settings - sigh*/
.gfield_date .ginput_complex {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	gap: 8px;
}

.gfield_date_day, 
.gfield_date_month{
 width: 4em;
}

.gfield_date_year{
 width: 6em;
}

.gfield_date input{
	width: 3em;
}
.gfield_date .gfield_date_year input{
	width: 5em;
}

/* spinner animations */
img.gform_ajax_spinner[src$=".png"] {
	-webkit-animation: sndt_gf_spin 1.2s linear infinite;
	-moz-animation: sndt_gf_spin 1.2s linear infinite;
	animation: sndt_gf_spin 1.2s linear infinite;
	padding: 0px;
	margin: 0px;
    height: 32px;
    width: 32px;	
}
@-moz-keyframes sndt_gf_spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes sndt_gf_spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes sndt_gf_spin { 100% { transform:rotate(360deg); } }


.phone_number .charleft{
  font-size: smaller;
  color: grey;
}

/* Buttonize Radio & Checkbox Fields */
.buttonized {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: stretch;
	position: relative;
}

.buttonized .ginput_container{
    width: 100%;
	margin: 0px auto;
}

.buttonized .gfield_radio {
	display: flex;
	flex-grow: 1;
	justify-content: space-between;
	flex-wrap: wrap;
}


.buttonized .gchoice {
   display: flex;
   justify-content: center;
   flex-grow: 1;
}

.buttonized input {
   position: absolute;
   left: -9999px;
}

.buttonized label{
	cursor: pointer;
}

.buttonized .gchoice label {
	flex-grow: 1;
	min-width: 12em;
    justify-content: center;
    padding: 12px;
	background-color: var(--light);
	border-radius: 8px;	
	border: 1px solid var(--dark);
	margin: 6px;
	font-weight: 700;
    font-size: 22px;
	color: var(--dark);
	text-align: center;
	line-height: 1.2;
	cursor:pointer;
	transition: all ease-in 150ms;
}

@media screen and (max-width:414px){
	.buttonized .gchoice label {
		min-width: 6em;
	}
}

.buttonized input:active+label{
   border-color: var(--dark);
   color: var(--dark);	
   background-color: #f8f8f8;
}

.buttonized input:focus+label {
   border-color: var(--dark);
   color: var(--dark);	
}

.buttonized input:checked+label {
   border-color: var(--dark);
   color: var(--light);	
   background-color: var(--dark);		
}

/*
 * SWITCHES 
 * apply class m-toggle
 * */

 .m-toggle{
	--width: 60px;
	--borderw: 1px;
	--color_border: #888;
	--color_bg_on_state: #010101;
	--color_bg_off_state: #ddd;
	--color_knob_off: #fff;
	--color_knob_on: #fff;
	--round_knob_shape: 50%;
	--round_element_shape:  calc(0.5 * var(--width));
	--square_knob_corner: 2px;
	--rect_element_corner: 2px;
	--knob_shape: var(--round_knob_shape);
	--element_shape: var(--round_element_shape);
  
}

.m-toggle .gfield_checkbox input, .m-toggle .ginput_container_consent input {
	position: absolute;
	margin-left: -9999px;
}
/*the visible backdrop behind the element. effectively the border around it.
* note padding and width calc  ginput_container_consent
* */

.m-toggle .gchoice, .m-toggle .ginput_container_consent{
   position: relative;
   min-height: 2rem;

}

.m-toggle .gchoice + .gchoice{
   margin-top: 8px;
}

.m-toggle .gfield_checkbox input + label, .m-toggle .ginput_container_consent input + label {
	display: block;
	position: relative;
	left: calc(var(--width) + 1rem);
	width: calc(100% - var(--width) - 1rem);
	height: auto;
	cursor: pointer;
	outline: none; 
}
/*all visible elements */
.m-toggle .gfield_checkbox input + label::before, 
 .m-toggle .gfield_checkbox input + label::after,
 .m-toggle .ginput_container_consent input + label::before,
 .m-toggle .ginput_container_consent input + label::after {
	transform: translateX(calc(-1 * var(--width) - 1rem ));
	top: 0px;
	display: block;
	position: absolute;
	content: "";
}
/*the background of the element*/
.m-toggle .gfield_checkbox input + label:before, 
 .m-toggle .ginput_container_consent input + label::before {
	width: calc( ( 2 *  var(--borderw) ) + var(--width));
	height: calc(0.5 * var(--width));
	top:  var(--borderw);
	left:  var(--borderw);
	bottom:  var(--borderw);
	right:  var(--borderw);
	background-color: var(--color_bg_off_state);
	border-radius: var(--element_shape);
	transition: background 0.4s;
}
/*the knob */
.m-toggle .gfield_checkbox input + label:after,
.m-toggle .ginput_container_consent input + label::after{
	--pad: calc( 2 *  var(--borderw) );
	top: var(--pad);
	left:  var(--pad);
	bottom:  var(--pad);
	width: calc((0.5 * var(--width)) - var(--pad) );
	height: calc(0.5 * var(--width) - var(--pad));
	background-color: var(--color_knob_off);
	border-radius: var(--knob_shape);
	transition: margin 0.4s, background 0.4s;
}

.m-toggle .gfield_checkbox input:checked + label,
.m-toggle .ginput_container_consent input:checked + label {
	background-color: inherit;
}

.m-toggle .gfield_checkbox input:checked + label:before,
.m-toggle .ginput_container_consent input:checked + label::before{
	background-color: var(--color_bg_on_state);
}

.m-toggle .gfield_checkbox input:checked + label:after,
 .m-toggle .ginput_container_consent input:checked + label::after{
	margin-left:  calc(0.5 * var(--width));
	background-color: var(--color_knob_on);
}


#gform_confirmation_wrapper_36  {
	min-height: 300px;
	display: flex;
	justify-content: center;
	align-items: center;	
}

#gform_confirmation_message_36 {
	font-size: 36px;
	font-family: 'sndtfontstack';
	margin: 64px auto 64px auto;
}

#gform_wrapper_36 .gform_page_footer, #gform_wrapper_36 .gform_page_header {
	background-color: var(--light);
	display: flex;
	justify-content: space-around;
	
}

.gfield_visibility_hidden{
	display: none;
}

.hidden_label legend{
	display: none;
}


/* display order summary fields 
* these are number fields with a label and a description.
* the number field should be inline with the description. 
*/

.summary{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.summary > label {
	display: block;
	width: 100%;
}

.summary > *:not(label){
	display: block;
	flex: 1 1 10em;
}

/* OTHER FORM TYPES*/

.gf_single_button_form{
	display: flex;
}

.gf_single_button_form * {
	margin: 0px;
	padding: 0px;
}

/* this is the honeypot */
.gform_validation_container, .gform_hidden_field{
	overflow: hidden;
	position: absolute;
	width: 1px;
	height: 1px;
	left: -100000px;
}


/*handle legacy bs*/
.gform_wrapper ul{
	list-style-type: none;
}

.gform_page_footer{
	display: flex;
	gap: 1em;
}

.gform_page_footer .button{
	flex: 1 1 8em;
	margin-left: 0 !important;
	margin-right: 0 !important;
	margin-top: 8px;
}
@media screen and (min-width: 414px){
	.gform_page_footer .button{
		max-width: 12em;
	}

}

.gform_wrapper .button {
    font-family: sndtfontstack;
    text-transform: uppercase;
    font-weight: 700;
    color: #101010;
	border: 2px solid #101010;
    background-color: #ffffff;
    font-size: 18px;
	height: 40px;
	cursor: pointer;
}

.gform_wrapper .button:hover{
   color: var(--light);
   background-color: #101010;	
}

.gform_wrapper .button:active{
 transform: translate(2px, 3px);
}

.gform_wrapper .button:disabled{
 cursor: default;
 background-color: #f3f3f3;
 border-color: #808080;
 color: #808080;	 
}

.gfield-choice-input:disabled ~ label{
	background-color: #e6e6e6;
	box-shadow: none;
	color: #f8f8f8;
	position: relative;
	cursor: default;
}

.gfield-choice-input:disabled ~label::after{
	content: 'UITVERKOCHT';
	color: #666;
	margin-left: 0.2em;
	position: absolute;
	width:100%;
	height: 100%;
	inset: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* RESPONSIVE SIZES */



.gform_wrapper {
	--max-form-width: min(100%, 95vw);
	--medium-field-width: 25ch;
	--small-field-width: 10ch;
	--large-field-width: 100%;
}

@media screen and (max-width: 996px) {
	
	.gform_wrapper {
		--max-form-width: min(100%, 95vw);
		--medium-field-width: 25ch;
		--small-field-width: 10ch;
		--large-field-width: 100%;
	}
}

@media screen and (max-width: 768px) {
	
	.gform_wrapper {
		--max-form-width: min(100%, 95vw);
		--medium-field-width: 100%;
		--small-field-width: 50%;
		--large-field-width: 100%;
	}
}

@media screen and (max-width: 414px) {
	
	.gform_wrapper {
		--max-form-width: min(100%, 95vw);
		--medium-field-width: 100%;
		--small-field-width: 100%;
		--large-field-width: 100%;
	}
}

.gform_wrapper {
  max-width: var(--max-form-width) !important;

}

.gform_wrapper form .gform_fields .ginput_container .small {
	width: var(--small-field-width);
}

.gform_wrapper form .gform_fields .ginput_container .medium {
	width: var(--medium-field-width);
}

.gform_wrapper form .gform_fields .ginput_container .large {
	width: var(--large-field-width);
}