h1 {
	font-weight: bold;
}

.stap {
	margin: 80px 0;
}

.formsection {
	padding: 48px;
	background-color: var(--bst-achtergrond);
	border-radius: var(--bst-border-radius);
	position: relative;
	width: calc(80% - 32px);
	max-width: 752px;
	box-sizing: border-box;
}

.commoninfo {
	display: inline-flex;
	gap: 32px;
	width: 100%;
}

.commoninfo + .formsection {
	margin-top: 64px;
}

.toggle_box {
	background-color: white;
	box-shadow: rgba(0, 0, 0, 0.06);
	border-radius: var(--bst-border-radius);
	padding: 4px;
	position: relative;
	box-shadow: 0px 3px 24px rgba(0, 0, 0, 0.06);
	margin-bottom: 56px;
	width: fit-content;
}
.toggle_box input {
	position: absolute;
	visibility: hidden;
}
.toggle_box label {
	display: flex;
	cursor: pointer;
	position: relative;
}
.toggle_box span {
	flex: 1 0 50%;
	padding: 12px;
	color: var(--bst-secundair);
	border-radius: var(--bst-border-radius);
	white-space: nowrap;
	font-size: 14px;
	line-height: 15px;
	opacity: 0.6;
	font-weight: bold;
	box-sizing: border-box;
	min-width: 160px;
	text-align: center;
	z-index: 2;
	position: relative;
	transition: 0.2s;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.toggle_box label:before {
	content: '';
	position: absolute;
	height: 100%;
	transition: 0.2s;
	width: 160px;
	background-color: grey;
	background-color: var(--bst-achtergrond);
	border-radius: var(--bst-border-radius);
	left: 0;
	top: 0;
	z-index: 1;
}

.toggle_box input:not(:checked) + label > span:first-child {
	opacity: 1;
}
.toggle_box input:checked + label > span:last-child {
	opacity: 1;
}
.toggle_box input:checked + label:before {
	left: 160px;
}

.formsection:has(.addressinfo) {
	display: inline-flex;
}

.addressinfo {
	border-radius: var(--bst-border-radius);
	border: 1px solid #CECECE;
	padding: 40px;
	flex: 1;
	display: none;
/* 	max-width: 304px; */
	box-sizing: border-box;
}

.addressinfo .address {
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 16px;
}

.addressinfo .address:before {
	content: '';
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='17.328'%3E%3Cpath d='M19.31 15.995h-1.311V6.663a1.333 1.333 0 0 0-1.333-1.333H13a.333.333 0 0 0-.333.333v10.332h-1.333V1.365a1.369 1.369 0 0 0-.516-1.083 1.333 1.333 0 0 0-1.56-.057L2.592 4.664a1.333 1.333 0 0 0-.59 1.108v10.22H.691a.682.682 0 0 0-.689.622.667.667 0 0 0 .667.711h18.663a.667.667 0 0 0 .667-.711.682.682 0 0 0-.689-.622m-13.642-2a.667.667 0 0 1-.711.667.682.682 0 0 1-.622-.69v-1.284a.682.682 0 0 1 .622-.689.667.667 0 0 1 .711.667Zm0-4.666a.667.667 0 0 1-.711.667.682.682 0 0 1-.622-.69V8.019a.682.682 0 0 1 .622-.689.667.667 0 0 1 .711.667Zm3.333 4.666a.667.667 0 0 1-.711.667.682.682 0 0 1-.623-.687v-1.287a.682.682 0 0 1 .622-.688.667.667 0 0 1 .711.667Zm0-4.666a.667.667 0 0 1-.711.667.682.682 0 0 1-.622-.688V8.019a.682.682 0 0 1 .622-.688.667.667 0 0 1 .711.667Z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	width: 20px;
	height: 20px;
	margin-right: 12px;
	display: inline-block;
	vertical-align: middle;
	filter: var(--bst-primair-filter);
}

p.feedback {
	margin: 12px 0 0 0;
	color: red;
	font-size: 16px;
}

.inforow {
	display: inline-flex;
	align-items: center;
	border-top: 1px solid #CECECE;
	padding: 16px 0;
	width: 100%;
}

.inforow p.label {
	width: 50%;
}

.inforow p {
	margin: 0;
	font-size: 14px;
}

.formsection + .formsection {
	margin-top: 64px;
}

.formsection > span {
	font-size: 32px;
	font-weight: bold;
	border: 6px solid var(--bst-primair);
	color: var(--bst-secundair);
	border-radius: 100%;
	width: 56px;
	height: 56px;
	box-sizing: border-box;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: -16px;
	top: -16px;
}

.formsection .velden {
	display: flex;
	gap: 12px;
}

.formsection.algemeen .velden {
	max-width: 80%;
}

@media (max-width: 800px) {
	.formsection .velden {
		max-width: 100%;
	}
}

@media (max-width: 600px) {
	.formsection .velden {
		flex-direction: column;
	}
}

.formsection .velden .veld {
	flex: 1;
}

.formsection .velden .veld label {
	font-size: 14px;
}

.formsection .velden .veld :is(input[type="text"], input[type="number"]) {
	width: 100%;
	box-sizing: border-box;
	font-size: 14px;
	color: #010040;
}

.formsection .velden .veld :is(input[type="text"], input[type="number"]):focus {
	border: 1px solid #19398A;
}

.formsection .velden.algemeen .veld:first-child {
	flex: 2;
}

.formsection .veld .icon {
	position: relative;
}

.formsection .veld .icon:before {
	content: '';
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14.4' height='16'%3E%3Cpath d='m3.2 16 3.2-6L0 9.2 9.6 0h1.6L8 6l6.4.8L4.8 16Z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	width: 21px;
	height: 21px;
	position: absolute;
	top: 14px;
	left: 16px;
	filter: var(--bst-primair-filter);
}

.formsection .veld .icon.gas:before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13.037' height='16'%3E%3Cpath d='M9.91 2.629A16.389 16.389 0 0 0 6.823.085a.593.593 0 0 0-.61 0 16.389 16.389 0 0 0-3.087 2.544A10.076 10.076 0 0 0 0 9.482a6.519 6.519 0 0 0 13.037 0A10.076 10.076 0 0 0 9.91 2.629m-5.762 9.816a5.407 5.407 0 0 1 2.37-4.022 5.4 5.4 0 0 1 2.37 4.022 2.37 2.37 0 1 1-4.741 0' data-name='gas'/%3E%3C/svg%3E");
}

.formsection .veld .icon.stadswarmte:before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12.627' height='17.222'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-width='2' data-name='Group 1'%3E%3Cpath d='M11.128 15.813a6.511 6.511 0 0 1-1.19-4.217c.085-2.713 1.624-3.788 1.686-6.03a7.828 7.828 0 0 0-1.287-4.173' data-name='Path 2'/%3E%3Cpath d='M6.662 15.813a6.511 6.511 0 0 1-1.19-4.217c.085-2.713 1.624-3.788 1.686-6.03a7.828 7.828 0 0 0-1.287-4.173' data-name='Path 3'/%3E%3Cpath d='M2.195 15.813a6.511 6.511 0 0 1-1.19-4.217c.085-2.713 1.624-3.788 1.686-6.03a7.828 7.828 0 0 0-1.287-4.173' data-name='Path 4'/%3E%3C/g%3E%3C/svg%3E");
}

.formsection .veld .icon span {
	position: absolute;
	right: 16px;
	top: 10px;
	color: #7C7A99;
	font-size: 14px;
}

.formsection .veld .icon span.euro {
	left: 38px;
	right: unset;
}

.formsection .veld .icon :is(input[type="text"], input[type="number"]) {
	padding-left: 48px;
	padding-right: 80px;
}

.formsection p {
	line-height: 1.2em;
}
.formsection p > i {
	font-size: 14px;
}

.formsection > *:last-of-type:is(p) {
	margin-bottom: 0;
}

.formsection.voorwaarden {
	padding-top: 24px;
	padding-bottom: 24px;
}
.formsection.voorwaarden input {
	width: 16px;
	height: 16px;
	margin-right: 8px;
}
.formsection.voorwaarden label {
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#energielabel {
	color: #FFF;
	font-weight: bold;
	font-style: italic;
	position: relative;
}

#energielabel:after {
	content: '';
	width: calc(100% + 16px);
	height: 24px;
	background-color: var(--bst-energielabel-a);
	border-radius: 5px;
	position: absolute;
	z-index: -1;
	left: -8px;
	top: 2px;
}

#energielabel.b:after {
	background-color: var(--bst-energielabel-b);
}

#energielabel.c:after {
	background-color: var(--bst-energielabel-c);
}

#energielabel.d:after {
	background-color: var(--bst-energielabel-d);
}

#energielabel.e:after {
	background-color: var(--bst-energielabel-e);
}

#energielabel.f:after {
	background-color: var(--bst-energielabel-f);
}

#energielabel.g:after {
	background-color: var(--bst-energielabel-g);
}

.formsection h4 {
	font-size: 24px;
	line-height: 1.2;
}

.arrowright {
	margin-top: 32px;
}

.arrowright:after {
	content: '';
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='15.697'%3E%3Cpath d='M15 8.849H1a1 1 0 0 1-1-1 1 1 0 0 1 1-1h14a1 1 0 0 1 1 1 1 1 0 0 1-1 1Z' data-name='Line 71'/%3E%3Cpath d='M7.537 15.7a1 1 0 0 1-.661-1.751l6.927-6.1L6.88 1.751a1 1 0 1 1 1.322-1.5l7.249 6.382a1.623 1.623 0 0 1 0 2.434l-7.25 6.382a1 1 0 0 1-.664.251Z' data-name='Path 22668'/%3E%3C/svg%3E");
	display: inline-block;
	height: 16px;
	width: 16px;
	margin-left: 12px;
	margin-bottom: -2px;
	filter: brightness(0) invert(1);
} 

/* stap 2 */

.stap2 {
	display: none;
}

.bc-link {
	display: inline-flex;
	justify-content: end;
	width: 100%;
	margin-bottom: 24px;
}

.bc-link a {
	color: var(--bst-secundair);
}

.arrowleft:before {
	content: '';
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='15.697'%3E%3Cpath d='M1 6.848h14a1 1 0 0 1 1 1 1 1 0 0 1-1 1H1a1 1 0 0 1-1-1 1 1 0 0 1 1-1Z' data-name='Line 71'/%3E%3Cpath d='M8.463-.003a1 1 0 0 1 .661 1.751l-6.927 6.1 6.923 6.098a1 1 0 1 1-1.322 1.5L.549 9.064a1.623 1.623 0 0 1 0-2.434L7.799.248a1 1 0 0 1 .664-.251Z' data-name='Path 22668'/%3E%3C/svg%3E");
	display: inline-block;
	height: 16px;
	width: 16px;
	margin-right: 12px;
	margin-bottom: -2px;
	filter: var(--bst-secundair-filter);
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.arrowleft:hover:before {
	margin-right: 18px;
}

.besparingscontainer {
	display: flex;
	border-radius: var(--bst-border-radius);
	overflow: hidden;
	background-color: var(--bst-achtergrond);
}

.besparingscontainer .overline {
	text-transform: uppercase;
	color: var(--bst-secundair);
	font-weight: bold;
	font-size: 14px;
	margin-bottom: 12px;
}

.besparingscontainer .besparing {
	font-size: 14px;
	margin-bottom: 32px;
	color: #7C7A99;
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	gap: 32px;
}

@media (max-width: 600px) {
	.besparingscontainer .besparing {
		flex-direction: column;
	}	
}

.besparingscontainer .verbruiklabel {
	font-size: 16px;
}

.huidigverbruik, 
.toekomstigverbruik {
	display: flex;
	gap: 8px;
	padding-bottom: 32px;
}

.toekomstigverbruik {
	border-bottom: 1px solid #CECECE;
	padding-bottom: 40px;
}

.huidigverbruik_balk,
.toekomstigverbruik_balk {
	border-radius: 12px;
	background-color: #BEB3A3;
	flex: 1;
	height: 18px;
	margin-top: 8px;
}

.toekomstigverbruik_balk {
	background-color: var(--bst-actie);
}

.besparingscontainer .huidigverbruikwaarde,
.besparingscontainer .toekomstigverbruikwaarde {
	font-size: 14px;
}

.besparingscontainer .huidigverbruikwaarde > span,
.besparingscontainer .toekomstigverbruikwaarde > span {
	font-size: 24px;
	font-weight: bold;
	font-style: italic;
	margin-right: 6px;
}

.besparingscontainer .huidigverbruikwaarde > p,
.besparingscontainer .toekomstigverbruikwaarde > p {
	color: #7C7A99;
	font-size: 14px;
	line-height: 12px;
	font-weight: 600;
	margin: 0;
}

.besparingscontainer .besparing .ineuro {
	font-size: 64px;
	color: var(--bst-actie);
	font-weight: bold;
	font-style: italic;
}
.besparingscontainer .besparing > span {
	display: block;
	font-weight: 600;
	width: 100%;
}

.besparingscontainer .overline:before {
	content: '';
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21'%3E%3Cpath d='M13 21a7.662 7.662 0 0 1-2.638-.45A8.2 8.2 0 0 1 8.1 19.3l-1.4 1.4a.99.99 0 1 1-1.4-1.4l1.4-1.4a8.219 8.219 0 0 1-1.25-2.262A7.657 7.657 0 0 1 5 13a7.574 7.574 0 0 1 2.388-5.725A7.871 7.871 0 0 1 13 5h8v8a7.912 7.912 0 0 1-.588 3A8.07 8.07 0 0 1 16 20.413 7.9 7.9 0 0 1 13 21ZM4.5 9A4.481 4.481 0 0 1 9 4.5a4.34 4.34 0 0 1-3.188-1.313A4.336 4.336 0 0 1 4.5 0a4.34 4.34 0 0 1-1.313 3.188A4.336 4.336 0 0 1 0 4.5a4.34 4.34 0 0 1 3.188 1.313A4.336 4.336 0 0 1 4.5 9Zm8.8 2.3-4.475 4.475a.914.914 0 0 0-.287.7 1.059 1.059 0 0 0 .287.7 1.008 1.008 0 0 0 .7.313.913.913 0 0 0 .7-.288l4.475-4.5a.99.99 0 1 0-1.4-1.4Z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	width: 21px;
	height: 21px;
	margin-right: 12px;
	display: inline-block;
	vertical-align: sub;
	filter: var(--bst-actie-filter);
}

.bc-child {
	padding: 48px;
	flex: 1;
}

.bc-child.image {
	background-size: cover;
	display: flex;
	justify-content: end;
}

.bc-child .contact {
	display: inline-flex;
	background-color: #FFF;
	border-radius: var(--bst-border-radius);
	padding: 28px;
	max-width: 80%;
	align-self: start;
	gap: 24px;
	flex-direction: column;
}

.bc-child .contact > div:not(.buttons) {
	display: inline-flex;
	gap: 24px;
}

.bc-child .contact img {
	border-radius: 100%;
	border: 4px solid #FFF;
	max-width: 58px;
	max-height: 58px;
	box-shadow: 0px 0px 12px #0000000F;
	aspect-ratio: 1;
}

.bc-child .contact .person {
	display: inline-flex;
	flex-direction: column;
	justify-content: space-between;
	color: var(--bst-secundair);
	font-size: 14px;
	padding-bottom: 4px;
}

.bc-child .contact .person span {
	font-size: 20px;
	font-weight: bold;
	font-style: italic;
}

.besparingscontainer .buttons {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 16px;
}

.besparingscontainer .gform_wrapper {
	padding: 0;
	background-color: transparent;
}

.bc-child h4 {
	font-size: 24px;
	line-height: 1.2;
	margin: 0;
}

/* Form */

.gform_wrapper.gravity-theme .gfield_label {
	font-size: 14px !important;
	margin-bottom: 0 !important;
	text-indent: 0 !important;
}



@media (max-width: 1100px) {
	.commoninfo {
		flex-direction: column;
	}

	.formsection {
		width: 100%;
		max-width: unset;
	}

	.formsection.algemeen .velden {
		max-width: 100%;
	}

	.besparingscontainer {
		flex-direction: column;
	}

	.formsection, 
	.bc-child {
		padding: 48px 24px;
	}

	.bc-child .contact {
		margin-bottom: 80px;
	}
}