.vck-melding-form .gf_page_steps {
display: flex;
flex-wrap: wrap;
gap: 24px 16px;
justify-content: space-between;
padding: 24px 0 40px;
border: none;
}
.vck-melding-form .gf_step {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 8px;
flex: 1 1 0;
min-width: 0;
max-width: 160px;
}
.vck-melding-form .gf_step_number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 14px;
border: none;
background: #dbeafe;
color: #4054B2;
font-weight: 700;
font-size: 20px;
flex: 0 0 56px;
line-height: 1;
position: relative;
}
.vck-melding-form .gf_step_active .gf_step_number {
background: #4054B2 !important;
border-color: #4054B2 !important;
color: #fff !important;
} .vck-melding-form .gf_step_completed .gf_step_number {
background: #dbeafe !important;
border-color: transparent !important;
color: transparent !important;
font-size: 0 !important;
}
.vck-melding-form .gf_step_completed .gf_step_number::before {
content: "✓" !important;
background: none !important;
border: none !important;
width: auto !important;
height: auto !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
position: static !important;
display: inline-block !important;
font-family: inherit !important;
font-size: 20px !important;
color: #4054B2 !important;
font-weight: 700 !important;
line-height: 1 !important;
}
.vck-melding-form .gf_step_completed .gf_step_number::after {
content: none !important;
display: none !important;
}
.vck-melding-form .gf_step_label {
text-transform: none !important;
letter-spacing: 0 !important;
font-weight: 500;
color: #9ca3af;
font-size: 13px;
line-height: 1.35;
}
.vck-melding-form .gf_step_active .gf_step_label,
.vck-melding-form .gf_step_completed .gf_step_label {
color: #111827;
font-weight: 600;
} .vck-melding-form .gform_footer {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
margin-top: 24px;
}
.vck-melding-form .gform_previous_button {
background: #f3f4f6 !important;
color: #374151 !important;
border: none !important;
border-radius: 10px !important;
padding: 12px 32px !important;
font-weight: 500 !important;
}
.vck-melding-form .gform_next_button,
.vck-melding-form .gform_button[type=submit] {
background: #4054B2 !important;
color: #fff !important;
border: none !important;
border-radius: 10px !important;
padding: 12px 32px !important;
font-weight: 600 !important;
}
.vck-melding-form .gform_next_button:hover,
.vck-melding-form .gform_button[type=submit]:hover {
background: #2c3d8a !important;
} .vck-melding-form .gfield_label {
font-weight: 500;
color: #374151;
font-size: 15px;
}
.vck-melding-form .gfield_required_text {
display: none !important;
}
.vck-melding-form .gfield_label > .gfield_required {
font-size: 0 !important;
color: transparent !important;
display: inline-block;
}
.vck-melding-form .gfield_label > .gfield_required::after {
content: "*";
color: #dc2626;
font-weight: 700;
font-size: 16px;
margin-left: 4px;
} .vck-melding-form .vck-step-title {
font-size: 32px;
font-weight: 600;
color: #111827;
margin: 0 0 4px;
line-height: 1.2;
}
.vck-melding-form .vck-step-subtitle {
font-size: 14px;
color: #6b7280;
margin: 0 0 24px;
font-weight: 400;
} .vck-melding-form .gfield .ginput_container,
.vck-melding-form .gfield .ginput_complex {
width: 100% !important;
max-width: 100% !important;
}
.vck-melding-form .gfield input[type=text],
.vck-melding-form .gfield input[type=email],
.vck-melding-form .gfield input[type=tel],
.vck-melding-form .gfield input[type=number],
.vck-melding-form .gfield input[type=date],
.vck-melding-form .gfield input[type=url],
.vck-melding-form .gfield textarea,
.vck-melding-form .gfield select {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box;
} .vck-melding-form .gfield .ginput_container_date {
display: block !important;
position: relative !important;
width: 100% !important;
}
.vck-melding-form .gfield .ginput_container_date input {
padding-right: 40px !important;
width: 100% !important;
}
.vck-melding-form .gfield .ginput_container_date img.ui-datepicker-trigger,
.vck-melding-form .gfield .ginput_container_date .ui-datepicker-trigger,
.vck-melding-form .gfield .ginput_container_date .gform-datepicker-icon,
.vck-melding-form .gfield .ginput_container_date .gform-datepicker__icon {
position: absolute !important;
right: 12px !important;
top: 50% !important;
transform: translateY(-50%) !important;
margin: 0 !important;
cursor: pointer !important;
z-index: 2 !important;
} .vck-melding-form .gfield {
display: flex !important;
flex-direction: column !important;
}
.vck-melding-form .gfield .ginput_container {
margin-top: auto !important;
} .vck-melding-form .gform_validation_container,
.vck-melding-form .gfield--type-honeypot {
display: none !important;
}
.vck-melding-form .gfield_instruction,
.vck-melding-form .gfield_description.instruction,
.vck-melding-form [id^=gfield_instruction_] {
display: none !important;
} .vck-melding-form .vck-summary {
margin-top: 8px;
}
.vck-melding-form .vck-summary h3 {
margin: 32px 0 8px;
font-size: 18px;
color: #111827;
font-weight: 600;
}