/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Aug 26 2026 | 09:46:41 */
#jw-keuzehulp {
	--jw-font: inherit;              /* erft themafont; of bv. 'Poppins',sans-serif */
	--jw-primary: #185FA5;            /* hoofdblauw   */
	--jw-primary-dark: #0F3D6B;       /* donkerblauw  */
	--jw-primary-hover: #15528f;
	--jw-cta: #2E9E5B;                /* groene CTA   */
	--jw-cta-dark: #258049;
	--jw-cta-soft: #e9f6ee;
	--jw-accent: #e0683a;             /* oranje accent */
	--jw-accent-soft: #fdf0e9;
	--jw-grad-end: #3a2e55;
	--jw-amber: #c0873a;
	--jw-warn: #c0521f; 
	--jw-warn-bg: #fff4ec; 
	--jw-warn-border: #f4c9ac; 
	--jw-warn-text: #8a3c14;
	--jw-text: #1c2530; 
	--jw-text-muted: #6b7785;
	--jw-border: #e4e8ee; 
	--jw-bg: #eef1f5; 
	--jw-card: #fff; 
	--jw-surface-soft: #f5f7fa;
	--jw-grey-1: #8a96a3; 
	--jw-grey-2: #90a0b0; 
	--jw-grey-3: #9fb0c2; 
	--jw-grey-4: #c3ccd6;
	--jw-grey-5: #cfd6de; 
	--jw-grey-6: #d4dbe3; 
	--jw-grey-7: #dfe4ea;
	--jw-blue-25: #f3f8ff; 
	--jw-blue-50: #eaf2fc; 
	--jw-blue-60: #eef2f7; 
	--jw-blue-100: #dbe6f3;
	--jw-blue-200: #c2d3e8; 
	--jw-blue-210: #c4d4e8;
	--jw-radius: 16px;
	--jw-shadow: 0 2px 10px rgba(15,61,107,.06);
	--jw-shadow-lg: 0 8px 28px rgba(15,61,107,.10);
}

#jw-keuzehulp {
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent
}

#jw-keuzehulp {
	margin: 0;
	background: var(--jw-bg);
	color: var(--jw-text);
	line-height: 1.45;
	font-family: var(--jw-font);
	overflow-y: auto;
	height: 100vh;
}

#jw-keuzehulp .wrap {
	max-width: 460px;
	margin: 0 auto;
	min-height: 100vh
}

#jw-keuzehulp .hdr {
	background: linear-gradient(135deg, var(--jw-primary-dark) 0%, var(--jw-primary-hover) 60%, var(--jw-grad-end) 100%);
	color: #fff;
	padding: 18px 20px;
	display: flex;
	gap: 14px;
	align-items: center
}

#jw-keuzehulp .hdr .ic {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	flex: none;
	background: rgba(255, 255, 255, .10);
	border: 1px solid rgba(255, 255, 255, .18);
	display: flex;
	align-items: center;
	justify-content: center
}

#jw-keuzehulp .hdr h1 {
	font-size: 18px;
	margin: 0;
	line-height: 1.15;
	font-weight: 700;
	color: #fff;
}

#jw-keuzehulp .hdr p {
	margin: 2px 0 0;
	font-size: 13px;
	color: var(--jw-blue-210);
}

#jw-keuzehulp .prog {
	padding: 16px 20px 4px
}

#jw-keuzehulp .prog .row {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--jw-text-muted);
	font-weight: 600;
	margin-bottom: 8px
}

#jw-keuzehulp .bar {
	height: 6px;
	border-radius: 99px;
	background: var(--jw-grey-7);
	overflow: hidden
}

#jw-keuzehulp .bar > i {
	display: block;
	height: 100%;
	border-radius: 99px;
	background: linear-gradient(90deg, var(--jw-primary), var(--jw-accent));
	transition: width .35s cubic-bezier(.4, 0, .2, 1)
}

#jw-keuzehulp .stage {
	padding: 18px 16px 130px
}

#jw-keuzehulp .card { 
	background: var(--jw-card);
	border-radius: var(--jw-radius);
	box-shadow: var(--jw-shadow);
	padding: 22px 20px
}

#jw-keuzehulp h2.q {
	font-size: 23px;
	line-height: 1.2;
	margin: 0 0 6px;
	font-weight: 800;
	letter-spacing: -.01em
}

#jw-keuzehulp .sub {
	color: var(--jw-text-muted);
	font-size: 14.5px;
	margin: 0 0 20px
}

#jw-keuzehulp .opt {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	width: 100%;
	text-align: left;
	background: var(--jw-card);
	border: 1.5px solid var(--jw-border);
	border-radius: 14px;
	padding: 16px;
	margin-bottom: 12px;
	cursor: pointer;
	transition: .15s;
	justify-content: left;
}

#jw-keuzehulp .opt:hover {
	border-color: var(--jw-blue-200)
}

#jw-keuzehulp .opt.sel {
	border-color: var(--jw-primary);
	background: var(--jw-blue-25);
	box-shadow: 0 0 0 1px var(--jw-primary) inset
}

#jw-keuzehulp .opt .dot {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2px solid var(--jw-grey-4);
	flex: none;
	margin-top: 1px;
	transition: .15s
}

#jw-keuzehulp .opt.sel .dot {
	border-color: var(--jw-primary);
	background: var(--jw-primary)
}

#jw-keuzehulp .opt.sel .dot::after {
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fff;
	margin: 5px auto
}

#jw-keuzehulp .opt .box {
	border-radius: 7px;
	display: flex;
	align-items: center;
	justify-content: center
}

#jw-keuzehulp .opt.sel .box::after { 
	content: ""; 
	width: 11px;
	height: 6px;
	border-left: 2.5px solid #fff;
	border-bottom: 2.5px solid #fff;
	transform: rotate(-45deg);
	margin-top: -2px
}

#jw-keuzehulp .opt .ttl {
	font-weight: 700;
	font-size: 16.5px
}

#jw-keuzehulp .opt .desc {
	color: var(--jw-text-muted);
	font-size: 13.5px;
	margin-top: 3px;
	display: block
}

#jw-keuzehulp .opt .pill {
	margin-left: auto;
	font-size: 12px;
	font-weight: 700;
	color: var(--jw-primary);
	background: var(--jw-blue-50);
	padding: 3px 9px;
	border-radius: 99px;
	align-self: center;
	white-space: nowrap
}

#jw-keuzehulp .dims { 
	display: flex;
	gap: 10px
}

#jw-keuzehulp .dimField {
	flex: 1
}

#jw-keuzehulp .dimField label { 
	display: block;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--jw-text-muted);
	font-weight: 700;
	margin-bottom: 6px
}

#jw-keuzehulp .sliderbox {
	background: var(--jw-surface-soft);
	border: 1px solid var(--jw-border);
	border-radius: 14px; 
	padding: 20px 18px
}

#jw-keuzehulp .sliderbox .lab {
	display: flex;
	justify-content: space-between;
	align-items: baseline
}

#jw-keuzehulp .sliderbox .lab span {
	font-size: 12px;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--jw-text-muted);
	font-weight: 700
}

#jw-keuzehulp .sliderbox .val {
	font-size: 34px;
	font-weight: 800
}

#jw-keuzehulp .sliderbox .val small {
	font-size: 16px;
	font-weight: 600;
	color: var(--jw-text-muted)
}

#jw-keuzehulp input[type=range] {
	-webkit-appearance: none;
	width: 100%;
	height: 6px;
	border-radius: 99px;
	background: var(--jw-grey-6);
	margin: 18px 0 6px;
	outline: none
}

#jw-keuzehulp input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--jw-accent);
	border: 4px solid #fff;
	box-shadow: 0 1px 6px rgba(0, 0, 0, .25);
	cursor: pointer
}

#jw-keuzehulp input[type=range]::-moz-range-thumb {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--jw-accent);
	border: 4px solid #fff;
	box-shadow: 0 1px 6px rgba(0, 0, 0 ,.25);
	cursor: pointer
}

#jw-keuzehulp .ends {
	display: flex;
	justify-content: space-between;
	color: var(--jw-text-muted);
	font-size: 13px
}

#jw-keuzehulp .counter {
	background: var(--jw-surface-soft);
	border: 1px solid var(--jw-border);
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px
}

#jw-keuzehulp .counter button {
	width: 60px;
	height: 60px;
	border-radius: 14px;
	border: 1.5px solid var(--jw-border);
	background: #fff;
	font-size: 30px;
	color: var(--jw-primary);
	cursor: pointer;
	line-height: 1;
	font-weight: 300
}

#jw-keuzehulp .counter .num {
	font-size: 42px;
	font-weight: 800
}

#jw-keuzehulp .ctr {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--jw-surface-soft);
	border: 1px solid var(--jw-border);
	border-radius: 12px;
	padding: 11px 12px 11px 15px;
	margin-bottom: 12px
}

#jw-keuzehulp .ctr .lbl {
	font-weight: 600;
	font-size: 15px;
	padding-right: 10px
}

#jw-keuzehulp .ctr .lbl small {
	display: block;
	color: var(--jw-text-muted);
	font-weight: 400;
	font-size: 12.5px;
	margin-top: 1px
}

#jw-keuzehulp .ctr .ctrl {
	display: flex;
	align-items: center;
	gap:12px; 
	flex:none
}

#jw-keuzehulp .ctr button {
	width: 42px;
	height: 42px;
	border-radius: 10px;
	border: 1.5px solid var(--jw-border);
	background: #fff;
	font-size: 22px;
	color: var(--jw-primary);
	cursor: pointer;
	line-height: 1;
	font-weight: 300
}

#jw-keuzehulp .ctr .v {
	font-size: 22px;
	font-weight: 800;
	min-width: 22px;
	text-align: center
}

@media(max-width: 767.98px){
	#jw-keuzehulp .wrap .line {
		flex-direction: column;
		align-items: start;
	}
}