@import "https://www.zwitserleven.nl/siteassets/css/formulieren.css";



/* ---------- DRIP only ---------- */

/* headings */

.paragraphblock h1 {
  margin-bottom: var(--spacing-50);
}

html[data-funnel-page$="/summary"] h1.step-1 {
  display: none;
}

html[data-funnel-page$="/summary"] h1.step-2 {
  display: block;
  margin-block: unset;
}



/* service */

.paragraphblock.displaymode-one-quarter {
  --divider-margin-block: 0;
  display: none;
}

@media (min-width: 1024px) {
  main section .container > .row > .paragraphblock.displaymode-one-quarter {
    display: block;
    grid-column: 9 / span 3;
    grid-row: 1 / span 3;
  }

  main section .container > .row > .paragraphblock.displaymode-one-quarter > div {
    position: sticky;
    top: var(--spacing-70);
  }
}

.paragraphblock.displaymode-one-quarter a[data-label] {
  display: inline-flex;
  gap: var(--spacing-15);
  margin-top: var(--spacing-5);
  position: relative;
  text-decoration: none;
}

.paragraphblock.displaymode-one-quarter a[data-label]::after {
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  color: var(--colors-body-primary);
  content: attr(data-label);
  font-size: .75rem;
  padding: 0 var(--spacing-15);
  text-decoration: none;
  text-transform: uppercase;
}

.paragraphblock.displaymode-one-quarter a[data-available="true"]::after {
  background: var(--colors-notification-success, #C4E4D7);
}

.paragraphblock.displaymode-one-quarter a[data-available="false"]::after {
  background-color: var(--colors-support-03-100, #FFB8B8);
  color: var(--colors-brand-secondary-500);
}

.paragraphblock.displaymode-one-quarter:has(~ .formbuilderblock summary-data) .box-content :not(h1) {
  display: block;
}

.paragraphblock:has(~ .formbuilderblock summary-data) .box-content a {
  display: inline-flex !important;
}



/* whitespace */

.formbuilderblock section#funnel {
  padding-top: unset !important;
}

html:where([data-funnel-page="/pensioen-kopen/vast-pensioen-voor-pensioengenieters/proefberekening/"],[data-funnel-page="/pensioen-kopen/vast-pensioen-voor-pensioengenieters/voorstel/"],[data-funnel-page="/pensioen-kopen/vast-pensioen-voor-pensioengenieters/kennistoets/"], [data-funnel-page="/pensioen-kopen/vast-pensioen-voor-pensioengenieters/kennistoets-hoog-laag/"]) .formbuilderblock section#funnel {
  padding-bottom: unset;
}

.formbuilderblock br {
  display: none;
}

.formbuilderblock .box-content > hr {
  margin-top: unset !important;
}



/* intro sections */

.formbuilderblock form fieldset {
  background-color: transparent;
  padding: unset;
  font-size: var(--body-large);
}

.formbuilderblock form fieldset legend,
.formbuilderblock h3 {
  font-size: var(--heading-5) !important;
  font-weight: 600;
  line-height: 105%;
  letter-spacing: -.02em;
  margin-bottom: var(--heading-5-margin-bottom) !important;
}

.formbuilderblock fieldset legend {
  border-top: 1px solid var(--colors-divider-primary);
  margin-top: var(--spacing-20);
  padding-top: var(--spacing-70);
  width: 100%;
}

.formbuilderblock form fieldset legend:has(+ div > p[hidden]) {
  margin-bottom: unset;
}

.formbuilderblock form fieldset legend + div:has(> p[hidden]) {
  display: none;
}

[data-page*="voorstel"] form-builder-renderer line-separator hr,
[data-page*="kennistoets"] form-builder-renderer line-separator hr {
  margin-top: var(--spacing-20) !important;
}

.formbuilderblock form fieldset:has(.proposal) legend {
  display: none;
}

.formbuilderblock fieldset p {
  color: var(--colors-body-secondary);
}



/* summary */

.formbuilderblock div:has(> summary-data) {
  background-color: var(--colors-neutral-50) !important;
  border: 1px solid var(--colors-divider-secondary);
  padding: var(--spacing-40);
}

.formbuilderblock div:has(> summary-data) ~ div {
  margin-top: var(--spacing-40) !important;
}

html .formbuilderblock summary-data h3 {
  border-top: unset !important;
  border-bottom: 1px solid var(--colors-divider-primary) !important;
  font-size: var(--heading-6);
  margin-top: 0 !important;
  padding-top: unset;
  padding-bottom: var(--spacing-30);
}

.formbuilderblock summary-item ~ summary-item:not(:empty) {
  margin-top: var(--spacing-20) !important;
}

@media (min-width: 640px) {
  .formbuilderblock .summary-item-label {
    font-size: var(--body-medium);
  }
}



/* selectbox placeholder */

.formbuilderblock formcontrol-select .mat-mdc-select-min-line:empty::before {
  color: var(--colors-body-secondary);
  content: "Maak een keuze";
  font: inherit;
  visibility: visible;
}



/* selectbox group */

.formbuilderblock {
  --selectbox-gap: var(--spacing-10);
}

.formbuilderblock span:has(+ span > formcontrol-select) > formcontrol-select .mat-mdc-form-field {
  width: calc(50% - var(--selectbox-gap) / 2);
}

.formbuilderblock span:has(> formcontrol-select mat-error:not(:empty)) + span:has(> formcontrol-select) {
  display: block;
  margin-top: -6.5rem;
  margin-bottom: var(--spacing-80);
}

.formbuilderblock span:has(> formcontrol-select mat-error:empty) + span:has(> formcontrol-select) {
  display: block;
  margin-top: -6.5rem;
}

.formbuilderblock span:has(+ span > formcontrol-select mat-error:not(:empty)) > formcontrol-select .mat-mdc-form-field {
  position: relative;
  top: 1.9rem;
}

.formbuilderblock span:has(> formcontrol-select) + span > formcontrol-select .mat-mdc-form-field {
  transform: translateX(calc(100% + var(--selectbox-gap)));
  width: calc(50% - var(--selectbox-gap) / 2);
}

.formbuilderblock span:has(+ span > formcontrol-select) > formcontrol-select .mat-mdc-select-min-line:empty::before,
.formbuilderblock span:has(> formcontrol-select) + span > formcontrol-select .mat-mdc-select-min-line:empty::before {
  visibility: visible;
  color: var(--colors-body-secondary);
}

.formbuilderblock span:has(+ span > formcontrol-select) > formcontrol-select .mat-mdc-select-min-line:empty::before {
  content: "Maand";
}

.formbuilderblock span:has(> formcontrol-select) + span > formcontrol-select .mat-mdc-select-min-line:empty::before {
  content: "Jaar";
}



/* kennistoets */

@media (max-width: 1023px) {
  .paragraphblock:has(h1, #kennistoets) {
    --grid-columns: 12;
  }
}

@media (min-width: 1280px) {
  #kennistoets {
    --grid-columns: 6;
    display: grid;
    grid-column: span var(--grid-columns);
    grid-row-gap: var(--grid-row-gap);
    max-width: calc(var(--grid-column-width)*var(--grid-columns) + var(--grid-column-gap)*(var(--grid-columns) - 1));
    width: 100%;
  }
}

#kennistoets-start[hidden] {
  display: none;
}

.content:has([data-testid="additionalFields.knowledgeTestShow-option2"] input:checked) .formbuilderblock + .paragraphblock .button-container label.button,
html:not(:where(
[data-funnel-page="/pensioen-kopen/vast-pensioen-voor-pensioengenieters/proefberekening/"],
[data-funnel-page="/pensioen-kopen/vast-pensioen-voor-pensioengenieters/kennistoets/"],
[data-funnel-page="/pensioen-kopen/vast-pensioen-voor-pensioengenieters/kennistoets-hoog-laag/"])) 
.formbuilderblock + .paragraphblock .button-container .button {
  display: none;
}

.content:not(:has([data-testid="additionalFields.knowledgeTestShow-option2"] input:checked)) .formbuilderblock + .paragraphblock .button-container #naar-samenvatting:not(:first-child) {
  display: none;
}

[data-step="0"] {
  background-color: var(--colors-neutral-50); 
  border: .125rem solid var(--colors-divider-secondary); 
  border-radius: var(--radius-10);
  padding: var(--spacing-40) var(--spacing-30); 
}

[data-step="0"]:is(p, h3) {
  font-size: var(--body-medium);
}

[data-step="0"] h3 {
  margin-block: var(--spacing-50) var(--spacing-10);
}
 
[data-step="0"] h3 + p {
  margin-top: var(--spacing-10);
}

[data-step="0"] .button-container {
  margin-top: var(--spacing-50);
}

html[data-funnel-page*="kennistoets"] #kennistoets-uitstellen {
  display: none;
}

[data-step],
[data-step] .neutral,
[data-step] .error,
.summary,
.result {
  display: none;
}

[data-step] fieldset {
  border: 0 none;
  display: inline-flex;
  flex-direction: column;  
  margin: unset;
  padding: unset;
  width: 100%;
}

[data-step] legend {
  display: flex;
  flex-direction: column;
  font-size: var(--heading-6);
  font-weight: 600;
  gap: var(--spacing-20);
  line-height: 105%; 
  margin-bottom: var(--spacing-40);
}

[data-step] legend:has(+ p){
  margin-bottom: unset;
}

[data-step] legend + p {
  margin-block: var(--spacing-20) var(--spacing-40);
}

[data-step] legend span {
  color: var(--colors-body-secondary);
  display: block;
  font-size: var(--body-large);
  font-weight: 600;
  line-height: 105%;
}

[data-step] label:not(.button) {
  background-color: var(--colors-neutral-50);
  background-color: transparent;
  border: .125rem solid var(--colors-neutral-200);
  border-radius: var(--radius-10);
  display: block;
  font-size: var(--body-large);
  line-height: 140%; 
  outline: .375rem solid transparent;
  padding: var(--spacing-40) var(--spacing-30) var(--spacing-40) var(--spacing-90);
  position: relative;
  transition: var(--transition-default);
}

[data-step] label:not(.button):focus,
[data-step] label:not(.button):hover {
  border-color: var(--colors-cta-primary-default);
}

[data-step] label:not(.button):focus-visible {
  border-color: var(--colors-neutral-800) !important;
  outline-color: var(--colors-cta-primary-hover_outline);
}

[data-step] label:not(.button) + label:not(.button) {
  margin-top: var(--spacing-20);
}

[data-step] .button-container {
  margin-top: var(--spacing-50);
}

[data-step] label:not(.button)::before,
[data-step] label:not(.button)::after {
  border-radius: 50%;
  box-sizing: border-box;
  content: "";
  display: block;
  outline-offset: 0;
  position: absolute;
  left: var(--spacing-30);
  top: var(--spacing-40);
}

[data-step] label:not(.button)::before {
  background-color: var(--radio-outer-background-color, var(--colors-neutral-50, #FFFBF8));
  border: var(--radio-border-width, .0625rem) solid var(--radio-border-color, var(--colors-input-default));
  height: var(--spacing-30);
  outline: .375rem solid var(--radio-outline-color, transparent);
  width: var(--spacing-30);
}

[data-step] label:not(.button)::after {
  background-color: var(--radio-inner-background-color, transparent);
  height: var(--spacing-15);
  margin: .375rem;
  width: var(--spacing-15);
}

[data-step] label.button[hidden] {
  /* display: none; */
}

[data-step="10"] {
  /* display: flex; */
  flex-direction: column;
  row-gap: var(--grid-row-gap);
}

.content:has([data-testid="additionalFields.knowledgeTestShow-option1"] :checked) [data-step="0"] .form > label:nth-of-type(1),
.content:has([data-testid="additionalFields.knowledgeTestShow-option2"] :checked) [data-step="0"] .form > label:nth-of-type(2),
.content:has([data-testid="state.knowledgeTest0-option1"] :checked) [data-step="0"] .form > label:nth-of-type(1),
.content:has([data-testid="state.knowledgeTest0-option2"] :checked) [data-step="0"].form > label:nth-of-type(2),
.content:has([data-testid="additionalFields.knowledgeTest1-option1"] :checked) [data-step="1"] .form > label:nth-of-type(1),
.content:has([data-testid="additionalFields.knowledgeTest1-option2"] :checked) [data-step="1"] .form > label:nth-of-type(2),
.content:has([data-testid="state.knowledgeTest1-option1"] :checked) [data-step="1"] .form > label:nth-of-type(1),
.content:has([data-testid="state.knowledgeTest1-option2"] :checked) [data-step="1"] .form > label:nth-of-type(2),
.content:has([data-testid="additionalFields.knowledgeTest2-option1"] :checked) [data-step="2"] .form > label:nth-of-type(1),
.content:has([data-testid="additionalFields.knowledgeTest2-option2"] :checked) [data-step="2"] .form > label:nth-of-type(2),
.content:has([data-testid="state.knowledgeTest2-option1"] :checked) [data-step="2"] .form > label:nth-of-type(1),
.content:has([data-testid="state.knowledgeTest2-option2"] :checked) [data-step="2"] .form > label:nth-of-type(2),
.content:has([data-testid="additionalFields.knowledgeTest3-option1"] :checked) [data-step="3"] .form > label:nth-of-type(1),
.content:has([data-testid="additionalFields.knowledgeTest3-option2"] :checked) [data-step="3"] .form > label:nth-of-type(2),
.content:has([data-testid="state.knowledgeTest3-option1"] :checked) [data-step="3"] .form > label:nth-of-type(1),
.content:has([data-testid="state.knowledgeTest3-option2"] :checked) [data-step="3"] .form > label:nth-of-type(2),
.content:has([data-testid="additionalFields.knowledgeTest4-option1"] :checked) [data-step="4"] .form > label:nth-of-type(1),
.content:has([data-testid="additionalFields.knowledgeTest4-option2"] :checked) [data-step="4"] .form > label:nth-of-type(2),
.content:has([data-testid="state.knowledgeTest4-option1"] :checked) [data-step="4"] .form > label:nth-of-type(1),
.content:has([data-testid="state.knowledgeTest4-option2"] :checked) [data-step="4"] .form > label:nth-of-type(2),
.content:has([data-testid="additionalFields.knowledgeTest5-option1"] :checked) [data-step="5"] .form > label:nth-of-type(1),
.content:has([data-testid="additionalFields.knowledgeTest5-option2"] :checked) [data-step="5"] .form > label:nth-of-type(2),
.content:has([data-testid="state.knowledgeTest5-option1"] :checked) [data-step="5"] .form > label:nth-of-type(1),
.content:has([data-testid="state.knowledgeTest5-option2"] :checked) [data-step="5"] .form > label:nth-of-type(2),
.content:has([data-testid="additionalFields.knowledgeTest6-option1"] :checked) [data-step="6"] .form > label:nth-of-type(1),
.content:has([data-testid="additionalFields.knowledgeTest6-option2"] :checked) [data-step="6"] .form > label:nth-of-type(2),
.content:has([data-testid="state.knowledgeTest6-option1"] :checked) [data-step="6"] .form > label:nth-of-type(1),
.content:has([data-testid="state.knowledgeTest6-option2"] :checked) [data-step="6"] .form > label:nth-of-type(2),
.content:has([data-testid="additionalFields.knowledgeTest7-option1"] :checked) [data-step="7"] .form > label:nth-of-type(1),
.content:has([data-testid="additionalFields.knowledgeTest7-option2"] :checked) [data-step="7"] .form > label:nth-of-type(2),
.content:has([data-testid="state.knowledgeTest7-option1"] :checked) [data-step="7"] .form > label:nth-of-type(1),
.content:has([data-testid="state.knowledgeTest7-option2"] :checked) [data-step="7"] .form > label:nth-of-type(2),
.content:has([data-testid="additionalFields.knowledgeTest8-option1"] :checked) [data-step="8"] .form > label:nth-of-type(1),
.content:has([data-testid="additionalFields.knowledgeTest8-option2"] :checked) [data-step="8"] .form > label:nth-of-type(2),
.content:has([data-testid="state.knowledgeTest8-option1"] :checked) [data-step="8"] .form > label:nth-of-type(1),
.content:has([data-testid="state.knowledgeTest8-option2"] :checked) [data-step="8"] .form > label:nth-of-type(2),
.content:has([data-testid="additionalFields.knowledgeTest9-option1"] :checked) [data-step="9"] .form > label:nth-of-type(1),
.content:has([data-testid="additionalFields.knowledgeTest9-option2"] :checked) [data-step="9"] .form > label:nth-of-type(2),
.content:has([data-testid="state.knowledgeTest9-option1"] :checked) [data-step="9"] .form > label:nth-of-type(1),
.content:has([data-testid="state.knowledgeTest9-option2"] :checked) [data-step="9"] .form > label:nth-of-type(2),
.content:has([data-testid="additionalFields.knowledgeTest10-option1"] :checked) [data-step="10"] .form > label:nth-of-type(1),
.content:has([data-testid="additionalFields.knowledgeTest10-option2"] :checked) [data-step="10"] .form > label:nth-of-type(2) {
  --radio-outer-background-color: var(--colors-neutral-50, #FFFBF8);
  --radio-inner-background-color: var(--colors-input-active, #3BA478); 
  --radio-border-color: var(--colors-input-activeoutline, #C4E4D7);
  --radio-border-width: .125rem;
  background-color: var(--colors-neutral-50);
  border-color: var(--colors-cta-primary-default);
}

.form > .error {
  color: var(--colors-input-error);
  display: flex;
  flex-direction: row;
  gap: var(--spacing-10);
  font-size: var(--body-large);
  letter-spacing: -.02em;
  line-height: 140%;
  margin-block: calc(var(--spacing-10) * -1) var(--spacing-30);
}

.form > .error[hidden] {
  display: none;
}

.form > .error::before {
  aspect-ratio: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3.75C7.44365 3.75 3.75 7.44365 3.75 12C3.75 16.5563 7.44365 20.25 12 20.25C16.5563 20.25 20.25 16.5563 20.25 12C20.25 7.44365 16.5563 3.75 12 3.75ZM2.25 12C2.25 6.61522 6.61522 2.25 12 2.25C17.3848 2.25 21.75 6.61522 21.75 12C21.75 17.3848 17.3848 21.75 12 21.75C6.61522 21.75 2.25 17.3848 2.25 12Z' fill='%23DB0512'/%3E%3Cpath d='M13 16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16C11 15.4477 11.4477 15 12 15C12.5523 15 13 15.4477 13 16Z' fill='%23002D36'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 13.75C11.5858 13.75 11.25 13.4142 11.25 13L11.25 8C11.25 7.58579 11.5858 7.25 12 7.25C12.4142 7.25 12.75 7.58579 12.75 8V13C12.75 13.4142 12.4142 13.75 12 13.75Z' fill='%23DB0512'/%3E%3C/svg%3E");
  content: "";
  height: var(--spacing-30);
  width: var(--spacing-30);  
}

.content:has([data-testid="additionalFields.knowledgeTest1"] :valid) [data-step="1"] .form > .error,
.content:has([data-testid="additionalFields.knowledgeTest2"] :valid) [data-step="2"] .form > .error,
.content:has([data-testid="additionalFields.knowledgeTest3"] :valid) [data-step="3"] .form > .error,
.content:has([data-testid="additionalFields.knowledgeTest4"] :valid) [data-step="4"] .form > .error,
.content:has([data-testid="additionalFields.knowledgeTest5"] :valid) [data-step="5"] .form > .error,
.content:has([data-testid="additionalFields.knowledgeTest6"] :valid) [data-step="6"] .form > .error,
.content:has([data-testid="additionalFields.knowledgeTest7"] :valid) [data-step="7"] .form > .error,
.content:has([data-testid="additionalFields.knowledgeTest8"] :valid) [data-step="8"] .form > .error,
.content:has([data-testid="additionalFields.knowledgeTest9"] :valid) [data-step="9"] .form > .error {
  display: none;
}

[data-step] .form .button-container button {
  display: none;
}

.content:has([data-testid="additionalFields.knowledgeTest1"] :invalid) [data-step="1"] .form .button-container button,
.content:has([data-testid="additionalFields.knowledgeTest2"] :invalid) [data-step="2"] .form .button-container button,
.content:has([data-testid="additionalFields.knowledgeTest3"] :invalid) [data-step="3"] .form .button-container button,
.content:has([data-testid="additionalFields.knowledgeTest4"] :invalid) [data-step="4"] .form .button-container button,
.content:has([data-testid="additionalFields.knowledgeTest5"] :invalid) [data-step="5"] .form .button-container button,
.content:has([data-testid="additionalFields.knowledgeTest6"] :invalid) [data-step="6"] .form .button-container button,
.content:has([data-testid="additionalFields.knowledgeTest7"] :invalid) [data-step="7"] .form .button-container button,
.content:has([data-testid="additionalFields.knowledgeTest8"] :invalid) [data-step="8"] .form .button-container button,
.content:has([data-testid="additionalFields.knowledgeTest9"] :invalid) [data-step="9"] .form .button-container button {
  display: inline-flex;
}

.content:has([data-testid="additionalFields.knowledgeTest1"] :invalid) [data-step="1"] .form .button-container label,
.content:has([data-testid="additionalFields.knowledgeTest2"] :invalid) [data-step="2"] .form .button-container label,
.content:has([data-testid="additionalFields.knowledgeTest3"] :invalid) [data-step="3"] .form .button-container label,
.content:has([data-testid="additionalFields.knowledgeTest4"] :invalid) [data-step="4"] .form .button-container label,
.content:has([data-testid="additionalFields.knowledgeTest5"] :invalid) [data-step="5"] .form .button-container label,
.content:has([data-testid="additionalFields.knowledgeTest6"] :invalid) [data-step="6"] .form .button-container label,
.content:has([data-testid="additionalFields.knowledgeTest7"] :invalid) [data-step="7"] .form .button-container label,
.content:has([data-testid="additionalFields.knowledgeTest8"] :invalid) [data-step="8"] .form .button-container label,
.content:has([data-testid="additionalFields.knowledgeTest9"] :invalid) [data-step="9"] .form .button-container label {
  display: none;
}

.notification {
  align-items: center;
  border-radius: var(--radius-5);
  color: var(--colors-body-primary);
  font-size: var(--body-large);
  display: flex;
  gap: var(--spacing-20);
  letter-spacing: -0.02em;
  line-height: 140%;
  margin-block: var(--spacing-30) var(--spacing-50);
  padding: var(--spacing-20);
}

[data-step="10"] .notification::before {
  aspect-ratio: 1;
  content: "";
  height: var(--spacing-30);
  width: var(--spacing-30);  
}

.success .notification {
  background-color: var(--colors-notification-success);
}

.success .notification::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3.75C7.44365 3.75 3.75 7.44365 3.75 12C3.75 16.5563 7.44365 20.25 12 20.25C16.5563 20.25 20.25 16.5563 20.25 12C20.25 7.44365 16.5563 3.75 12 3.75ZM2.25 12C2.25 6.61522 6.61522 2.25 12 2.25C17.3848 2.25 21.75 6.61522 21.75 12C21.75 17.3848 17.3848 21.75 12 21.75C6.61522 21.75 2.25 17.3848 2.25 12Z' fill='%23002D36'/%3E%3Cpath d='M13 16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16C11 15.4477 11.4477 15 12 15C12.5523 15 13 15.4477 13 16Z' fill='%23002D36'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 13.75C11.5858 13.75 11.25 13.4142 11.25 13L11.25 8C11.25 7.58579 11.5858 7.25 12 7.25C12.4142 7.25 12.75 7.58579 12.75 8V13C12.75 13.4142 12.4142 13.75 12 13.75Z' fill='%23002D36'/%3E%3C/svg%3E");
}

[data-step="9"] .summary .notification {
  background-color: var(--colors-notification-warning);
}

.error .notification,
.failed .notification {
  background-color: var(--colors-notification-error);
}

.error .notification::before,
.failed .notification::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3.75C7.44365 3.75 3.75 7.44365 3.75 12C3.75 16.5563 7.44365 20.25 12 20.25C16.5563 20.25 20.25 16.5563 20.25 12C20.25 7.44365 16.5563 3.75 12 3.75ZM2.25 12C2.25 6.61522 6.61522 2.25 12 2.25C17.3848 2.25 21.75 6.61522 21.75 12C21.75 17.3848 17.3848 21.75 12 21.75C6.61522 21.75 2.25 17.3848 2.25 12Z' fill='%23002D36'/%3E%3Cpath d='M13 16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16C11 15.4477 11.4477 15 12 15C12.5523 15 13 15.4477 13 16Z' fill='%23002D36'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 13.75C11.5858 13.75 11.25 13.4142 11.25 13L11.25 8C11.25 7.58579 11.5858 7.25 12 7.25C12.4142 7.25 12.75 7.58579 12.75 8V13C12.75 13.4142 12.4142 13.75 12 13.75Z' fill='%23002D36'/%3E%3C/svg%3E");
}

.summary > ul {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-30);
  list-style: none;
  margin-bottom: var(--spacing-50);
  padding-left: unset;
}

.summary > ul > li {
  background-color: var(--colors-neutral-50);
  border: .125rem solid var(--colors-neutral-200);
  border-radius: var(--radius-10);
  display: block;
  font-size: var(--body-large);
  line-height: 140%; 
  padding: var(--spacing-40) var(--spacing-30);
}

.summary > ul > li > p:not(.notification) {
  display: flex;
  gap: var(--spacing-30);
  margin-bottom: unset;
}

.summary > ul > li:has(.success, .error) > p:not(.notification):first-child::before {
  aspect-ratio: 1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: var(--spacing-30);
  content: "";
  display: none;
  height: var(--spacing-30);
  width: var(--spacing-30);
}

.summary > ul > li:has(.success) > p:not(.notification):first-child::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20.0867 5.81293C20.3796 6.10582 20.3796 6.5807 20.0867 6.87359L9.48008 17.4802C9.33943 17.6208 9.14866 17.6999 8.94975 17.6999C8.75084 17.6999 8.56007 17.6208 8.41942 17.4802L3.46967 12.5304C3.17678 12.2376 3.17678 11.7627 3.46967 11.4698C3.76256 11.1769 4.23744 11.1769 4.53033 11.4698L8.94975 15.8892L19.026 5.81293C19.3189 5.52004 19.7938 5.52004 20.0867 5.81293Z' fill='%23007345'/%3E%3C/svg%3E");
}

.summary > ul > li:has(.error) > p:not(.notification):first-child::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.46967 5.46967C5.76256 5.17678 6.23744 5.17678 6.53033 5.46967L18.5303 17.4696C18.8232 17.7625 18.8232 18.2374 18.5303 18.5303C18.2374 18.8232 17.7625 18.8232 17.4696 18.5303L5.46967 6.53033C5.17678 6.23744 5.17678 5.76256 5.46967 5.46967Z' fill='%23DB0512'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.5304 5.46967C18.8233 5.76256 18.8233 6.23744 18.5304 6.53033L6.53033 18.5304C6.23744 18.8233 5.76256 18.8233 5.46967 18.5304C5.17678 18.2375 5.17678 17.7626 5.46967 17.4697L17.4697 5.46967C17.7626 5.17678 18.2375 5.17678 18.5304 5.46967Z' fill='%23DB0512'/%3E%3C/svg%3E");
}

.summary > ul > li .notification {
  border-radius: var(--radius-5);
  color: var(--colors-body-primary);
  display: none;
  font-size: var(--body-medium);
  letter-spacing: -0.02em;
  line-height: 140%;
  margin-bottom: unset;
  padding: var(--spacing-20);
}

.summary > ul > li .notification * {
  --body-medium-margin-block: var(--spacing-20);
  color: var(--colors-body-primary);
  font-size: var(--body-medium);
  letter-spacing: -0.02em;
  line-height: 140%;
}

.summary > ul > li .notification ul {
  padding-left: var(--spacing-20);
}

.summary > ul > li .notification ul li::marker {
  content: "\2013  ";
}

.summary > ul > li:has(.success) .notification {
  background-color: var(--colors-notification-success);
}

.summary > ul > li:has(.neutral) .notification {
  --colors-notification-neutral: var(--colors-brand-tertiary-01-100);
  background-color: var(--colors-notification-neutral);
}

.summary > ul > li:has(.warning) .notification {
  background-color: var(--colors-notification-warning);
}

.summary > ul > li:has(.error) .notification {
  background-color: var(--colors-notification-error);
}

.summary > ul > li > p:not(.notification) span {  
  margin-left: auto;
  white-space: nowrap;
}

.summary > ul > li > p:not(.notification) span.success {
  color: var(--colors-brand-tertiary-01-700);
}

.summary > ul > li > p:not(.notification) span.error {
  color: var(--colors-brand-secondary-500);
}

.result p {
  color: var(--colors-body-primary);
  display: flex;
  font-size: var(--body-medium);
  font-weight: 700;
  gap: var(--spacing-10);
}

.result p .error {
  align-items: center;
  color: var(--colors-body-input-error);
  display: inline-flex;
}

.result p .error::before {
  aspect-ratio: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.46967 5.46967C5.76256 5.17678 6.23744 5.17678 6.53033 5.46967L18.5303 17.4696C18.8232 17.7625 18.8232 18.2374 18.5303 18.5303C18.2374 18.8232 17.7625 18.8232 17.4696 18.5303L5.46967 6.53033C5.17678 6.23744 5.17678 5.76256 5.46967 5.46967Z' fill='%23DB0512'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.5304 5.46967C18.8233 5.76256 18.8233 6.23744 18.5304 6.53033L6.53033 18.5304C6.23744 18.8233 5.76256 18.8233 5.46967 18.5304C5.17678 18.2375 5.17678 17.7626 5.46967 17.4697L17.4697 5.46967C17.7626 5.17678 18.2375 5.17678 18.5304 5.46967Z' fill='%23DB0512'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: var(--spacing-30);
  content: "";
  height: var(--spacing-30);
  width: var(--spacing-30);
  display: block;
}

.paragraphblock:has(#kennistoets),
#kennistoets .header, 
#kennistoets .header .intro {
  display: none;
}

#kennistoets .header .intro hr {
  margin-block: var(--spacing-50);
}

@media (min-width: 1280px){
  #kennistoets .header .intro hr {
    margin-bottom: 0;
  } 
}

form-builder-renderer {
  display: block;
}

.content:has([data-testid="additionalFields.knowledgeTestShow-option1"] :checked) .paragraphblock:has(#kennistoets),
.content:has([data-testid="additionalFields.knowledgeTestShow-option1"] :checked)  #kennistoets .header,
.content:has([data-testid="additionalFields.knowledgeTestShow-option1"] :checked) [data-step="0"] {
  display: block;
}

.content:has([data-testid="additionalFields.knowledgeTestShow-option1"] :checked) .paragraphblock:has(h1), 
.content:has([data-testid="additionalFields.knowledgeTestShow-option1"] :checked) form-builder-renderer form,
.content:has([data-testid="additionalFields.knowledgeTestShow-option1"] :checked) .button-container:has(label[for="mat-radio-0-input"]) {
  display: none;
}

.content:not(:has([data-testid="state.knowledgeTest0-option1"] :checked)) #kennistoets .header h1 {
  margin-bottom: unset;
}

.content:has([data-testid="state.knowledgeTest0-option1"] :checked) #kennistoets .header .intro {
  display: block;
}

.content:has([data-testid="state.knowledgeTest0-option1"] :checked) [data-step="0"],
.content:has([data-testid="state.knowledgeTest0-option2"] :checked) [data-step="0"] {
  display: none;
}

.content:has([data-testid="state.knowledgeTest0-option1"] :checked) [data-step="1"],
.content:has([data-testid="state.knowledgeTest1-option1"] :checked) [data-step="1"] .summary,
.content:has([data-testid="additionalFields.knowledgeTest1-option1"] :checked) [data-step="1"] .summary li:nth-child(1) p:not(.notification):first-child::before,
.content:has([data-testid="additionalFields.knowledgeTest1-option2"] :checked) [data-step="1"] .summary li:nth-child(2) p:not(.notification):first-child::before,
.content:has([data-testid="additionalFields.knowledgeTest1-option1"] :checked) [data-step="1"] .summary li:nth-child(1) span,
.content:has([data-testid="additionalFields.knowledgeTest1-option2"] :checked) [data-step="1"] .summary li:nth-child(2) span,
/* .content:has([data-testid="state.knowledgeTest1-option1"] :checked) [data-step="1"] .summary li:nth-child(1) span, */
.content:has([data-testid="additionalFields.knowledgeTest1-option1"] :checked) [data-step="1"] .summary li:nth-child(1) .notification,
.content:has([data-testid="additionalFields.knowledgeTest1-option2"] :checked) [data-step="1"] .summary li:nth-child(2) .notification {
  display: block;
}

.content:has([data-testid="additionalFields.knowledgeTest1-option1"] :checked) [data-step="1"] .summary li:nth-child(1) {
  border-color: var(--colors-input-activeoutline);
}

.content:has([data-testid="additionalFields.knowledgeTest1-option2"] :checked) [data-step="1"] .summary li:nth-child(2) {
  border-color: var(--colors-input-activeoutline);
}


.content:has([data-testid="state.knowledgeTest1-option1"] :checked) [data-step="0"][hidden] + [data-step="1"] .form,
.content:has([data-testid="state.knowledgeTest1-option1"] :checked) [data-step="0"]:not([hidden]) + [data-step="1"] .form,
.content:has([data-testid="state.knowledgeTest1-option2"] :checked) [data-step="0"][hidden] + [data-step="1"],
.content:has([data-testid="state.knowledgeTest1-option2"] :checked) [data-step="0"]:not([hidden]) + [data-step="1"] {
  display: none;
}

.content:has([data-testid="state.knowledgeTest0-option2"] :checked) [data-step="1"][hidden] + [data-step="2"],
.content:has([data-testid="state.knowledgeTest1-option2"] :checked) [data-step="1"]:not([hidden]) + [data-step="2"],
.content:has([data-testid="state.knowledgeTest2-option1"] :checked) [data-step="2"] .summary,
.content:has([data-testid="additionalFields.knowledgeTest2-option1"] :checked) [data-step="2"] .summary li:nth-child(1) p:not(.notification):first-child::before,
.content:has([data-testid="additionalFields.knowledgeTest2-option2"] :checked) [data-step="2"] .summary li:nth-child(2) p:not(.notification):first-child::before,
.content:has([data-testid="additionalFields.knowledgeTest2-option1"] :checked) [data-step="2"] .summary li:nth-child(1) span,
.content:has([data-testid="additionalFields.knowledgeTest2-option2"] :checked) [data-step="2"] .summary li:nth-child(2) span,
/* .content:has([data-testid="state.knowledgeTest2-option1"] :checked) [data-step="2"] .summary li:nth-child(1) span, */
.content:has([data-testid="additionalFields.knowledgeTest2-option1"] :checked) [data-step="2"] .summary li:nth-child(1) .notification,
.content:has([data-testid="additionalFields.knowledgeTest2-option2"] :checked) [data-step="2"] .summary li:nth-child(2) .notification {
  display: block;
}

.content:has([data-testid="additionalFields.knowledgeTest2-option1"] :checked) [data-step="2"] .summary li:nth-child(1) {
  border-color: var(--colors-input-activeoutline);
}

.content:has([data-testid="additionalFields.knowledgeTest2-option2"] :checked) [data-step="2"] .summary li:nth-child(2) {
  border-color: var(--colors-input-activeoutline);
}

.content:has([data-testid="state.knowledgeTest2-option1"] :checked) [data-step="1"][hidden] + [data-step="2"] .form,
.content:has([data-testid="state.knowledgeTest2-option1"] :checked) [data-step="1"]:not([hidden]) + [data-step="2"] .form,
.content:has([data-testid="state.knowledgeTest2-option2"] :checked) [data-step="1"][hidden] + [data-step="2"],
.content:has([data-testid="state.knowledgeTest2-option2"] :checked) [data-step="1"]:not([hidden]) + [data-step="2"] {
  display: none;
}

.content:has([data-testid="state.knowledgeTest1-option2"] :checked) [data-step="2"][hidden] + [data-step="3"],
.content:has([data-testid="state.knowledgeTest2-option2"] :checked) [data-step="2"]:not([hidden]) + [data-step="3"],
.content:has([data-testid="state.knowledgeTest3-option1"] :checked) [data-step="3"] .summary,
.content:has([data-testid="additionalFields.knowledgeTest3-option1"] :checked) [data-step="3"] .summary li:nth-child(1) p:not(.notification):first-child::before,
.content:has([data-testid="additionalFields.knowledgeTest3-option2"] :checked) [data-step="3"] .summary li:nth-child(2) p:not(.notification):first-child::before,
.content:has([data-testid="additionalFields.knowledgeTest3-option1"] :checked) [data-step="3"] .summary li:nth-child(1) span,
.content:has([data-testid="additionalFields.knowledgeTest3-option2"] :checked) [data-step="3"] .summary li:nth-child(2) span,
.content:has([data-testid="state.knowledgeTest3-option1"] :checked) [data-step="3"] .summary li:nth-child(1) span,
.content:has([data-testid="additionalFields.knowledgeTest3-option1"] :checked) [data-step="3"] .summary li:nth-child(1) .notification,
.content:has([data-testid="additionalFields.knowledgeTest3-option2"] :checked) [data-step="3"] .summary li:nth-child(2) .notification {
  display: block;
}

.content:has([data-testid="additionalFields.knowledgeTest3-option1"] :checked) [data-step="3"] .summary li:nth-child(1) {
  border-color: var(--colors-input-activeoutline);
}

.content:has([data-testid="additionalFields.knowledgeTest3-option2"] :checked) [data-step="3"] .summary li:nth-child(2) {
  border-color: var(--colors-support-03-100);
}

.content:has([data-testid="state.knowledgeTest3-option1"] :checked) [data-step="2"][hidden] + [data-step="3"] .form,
.content:has([data-testid="state.knowledgeTest3-option1"] :checked) [data-step="2"]:not([hidden]) + [data-step="3"] .form,
.content:has([data-testid="state.knowledgeTest3-option2"] :checked) [data-step="2"][hidden] + [data-step="3"],
.content:has([data-testid="state.knowledgeTest3-option2"] :checked) [data-step="2"]:not([hidden]) + [data-step="3"] {
  display: none;
}

.content:has([data-testid="state.knowledgeTest2-option2"] :checked) [data-step="3"][hidden] + [data-step="4"],
.content:has([data-testid="state.knowledgeTest3-option2"] :checked) [data-step="3"]:not([hidden]) + [data-step="4"],
.content:has([data-testid="state.knowledgeTest4-option1"] :checked) [data-step="4"] .summary,
.content:has([data-testid="additionalFields.knowledgeTest4-option1"] :checked) [data-step="4"] .summary li:nth-child(1) p:not(.notification):first-child::before,
.content:has([data-testid="additionalFields.knowledgeTest4-option2"] :checked) [data-step="4"] .summary li:nth-child(2) p:not(.notification):first-child::before,
.content:has([data-testid="additionalFields.knowledgeTest4-option1"] :checked) [data-step="4"] .summary li:nth-child(1) span,
.content:has([data-testid="additionalFields.knowledgeTest4-option2"] :checked) [data-step="4"] .summary li:nth-child(2) span,
.content:has([data-testid="state.knowledgeTest4-option1"] :checked) [data-step="4"] .summary li:nth-child(1) span,
.content:has([data-testid="additionalFields.knowledgeTest4-option1"] :checked) [data-step="4"] .summary li:nth-child(1) .notification,
.content:has([data-testid="additionalFields.knowledgeTest4-option2"] :checked) [data-step="4"] .summary li:nth-child(2) .notification {
  display: block;
}

.content:has([data-testid="additionalFields.knowledgeTest4-option1"] :checked) [data-step="4"] .summary li:nth-child(1) {
  border-color: var(--colors-input-activeoutline);
}

.content:has([data-testid="additionalFields.knowledgeTest4-option2"] :checked) [data-step="4"] .summary li:nth-child(2) {
  border-color: var(--colors-support-03-100);
}

.content:has([data-testid="state.knowledgeTest4-option1"] :checked) [data-step="3"][hidden] + [data-step="4"] .form,
.content:has([data-testid="state.knowledgeTest4-option1"] :checked) [data-step="3"]:not([hidden]) + [data-step="4"] .form,
.content:has([data-testid="state.knowledgeTest4-option2"] :checked) [data-step="3"][hidden] + [data-step="4"],
.content:has([data-testid="state.knowledgeTest4-option2"] :checked) [data-step="3"]:not([hidden]) + [data-step="4"] {
  display: none;
}

.content:has([data-testid="state.knowledgeTest3-option2"] :checked) [data-step="4"][hidden] + [data-step="5"],
.content:has([data-testid="state.knowledgeTest4-option2"] :checked) [data-step="4"]:not([hidden]) + [data-step="5"],
.content:has([data-testid="state.knowledgeTest5-option1"] :checked) [data-step="5"] .summary,
.content:has([data-testid="additionalFields.knowledgeTest5-option1"] :checked) [data-step="5"] .summary li:nth-child(1) p:not(.notification):first-child::before,
.content:has([data-testid="additionalFields.knowledgeTest5-option2"] :checked) [data-step="5"] .summary li:nth-child(2) p:not(.notification):first-child::before,
.content:has([data-testid="additionalFields.knowledgeTest5-option1"] :checked) [data-step="5"] .summary li:nth-child(1) span,
.content:has([data-testid="additionalFields.knowledgeTest5-option2"] :checked) [data-step="5"] .summary li:nth-child(2) span,
.content:has([data-testid="state.knowledgeTest5-option1"] :checked) [data-step="5"] .summary li:nth-child(2) span,
.content:has([data-testid="additionalFields.knowledgeTest5-option1"] :checked) [data-step="5"] .summary li:nth-child(1) .notification,
.content:has([data-testid="additionalFields.knowledgeTest5-option2"] :checked) [data-step="5"] .summary li:nth-child(2) .notification {
  display: block;
}

.content:has([data-testid="additionalFields.knowledgeTest5-option1"] :checked) [data-step="5"] .summary li:nth-child(1) {
  border-color: var(--colors-support-03-100);
}

.content:has([data-testid="additionalFields.knowledgeTest5-option2"] :checked) [data-step="5"] .summary li:nth-child(2) {
  border-color: var(--colors-input-activeoutline);
}

.content:has([data-testid="state.knowledgeTest5-option1"] :checked) [data-step="4"][hidden] + [data-step="5"] .form,
.content:has([data-testid="state.knowledgeTest5-option1"] :checked) [data-step="4"]:not([hidden]) + [data-step="5"] .form,
.content:has([data-testid="state.knowledgeTest5-option2"] :checked) [data-step="4"][hidden] + [data-step="5"],
.content:has([data-testid="state.knowledgeTest5-option2"] :checked) [data-step="4"]:not([hidden]) + [data-step="5"] {
  display: none;
}

.content:has([data-testid="state.knowledgeTest4-option2"] :checked) [data-step="5"][hidden] + [data-step="6"],
.content:has([data-testid="state.knowledgeTest5-option2"] :checked) [data-step="5"]:not([hidden]) + [data-step="6"],
.content:has([data-testid="state.knowledgeTest6-option1"] :checked) [data-step="6"] .summary,
.content:has([data-testid="additionalFields.knowledgeTest6-option1"] :checked) [data-step="6"] .summary li:nth-child(1) p:not(.notification):first-child::before,
.content:has([data-testid="additionalFields.knowledgeTest6-option2"] :checked) [data-step="6"] .summary li:nth-child(2) p:not(.notification):first-child::before,
.content:has([data-testid="additionalFields.knowledgeTest6-option1"] :checked) [data-step="6"] .summary li:nth-child(1) span,
.content:has([data-testid="additionalFields.knowledgeTest6-option2"] :checked) [data-step="6"] .summary li:nth-child(2) span,
.content:has([data-testid="state.knowledgeTest6-option1"] :checked) [data-step="6"] .summary li:nth-child(1) span,
.content:has([data-testid="additionalFields.knowledgeTest6-option1"] :checked) [data-step="6"] .summary li:nth-child(1) .notification,
.content:has([data-testid="additionalFields.knowledgeTest6-option2"] :checked) [data-step="6"] .summary li:nth-child(2) .notification {
  display: block;
}

.content:has([data-testid="additionalFields.knowledgeTest6-option1"] :checked) [data-step="6"] .summary li:nth-child(1) {
  border-color: var(--colors-input-activeoutline);
}

.content:has([data-testid="additionalFields.knowledgeTest6-option2"] :checked) [data-step="6"] .summary li:nth-child(2) {
  border-color: var(--colors-support-03-100);
}

.content:has([data-testid="state.knowledgeTest6-option1"] :checked) [data-step="5"][hidden] + [data-step="6"] .form,
.content:has([data-testid="state.knowledgeTest6-option1"] :checked) [data-step="5"]:not([hidden]) + [data-step="6"] .form,
.content:has([data-testid="state.knowledgeTest6-option2"] :checked) [data-step="5"][hidden] + [data-step="6"],
.content:has([data-testid="state.knowledgeTest6-option2"] :checked) [data-step="5"]:not([hidden]) + [data-step="6"] {
  display: none;
}

.content:has([data-testid="state.knowledgeTest5-option2"] :checked) [data-step="6"][hidden] + [data-step="7"],
.content:has([data-testid="state.knowledgeTest6-option2"] :checked) [data-step="6"]:not([hidden]) + [data-step="7"],
.content:has([data-testid="state.knowledgeTest7-option1"] :checked) [data-step="7"] .summary,
.content:has([data-testid="additionalFields.knowledgeTest7-option1"] :checked) [data-step="7"] .summary li:nth-child(1) p:not(.notification):first-child::before,
.content:has([data-testid="additionalFields.knowledgeTest7-option2"] :checked) [data-step="7"] .summary li:nth-child(2) p:not(.notification):first-child::before,
.content:has([data-testid="additionalFields.knowledgeTest7-option1"] :checked) [data-step="7"] .summary li:nth-child(1) span,
.content:has([data-testid="additionalFields.knowledgeTest7-option2"] :checked) [data-step="7"] .summary li:nth-child(2) span,
.content:has([data-testid="state.knowledgeTest7-option1"] :checked) [data-step="7"] .summary li:nth-child(2) span,
.content:has([data-testid="additionalFields.knowledgeTest7-option1"] :checked) [data-step="7"] .summary li:nth-child(1) .notification,
.content:has([data-testid="additionalFields.knowledgeTest7-option2"] :checked) [data-step="7"] .summary li:nth-child(2) .notification {
  display: block;
}

.content:has([data-testid="additionalFields.knowledgeTest7-option1"] :checked) [data-step="7"] .summary li:nth-child(1) {
  border-color: var(--colors-support-03-100);
}

.content:has([data-testid="additionalFields.knowledgeTest7-option2"] :checked) [data-step="7"] .summary li:nth-child(2) {
  border-color: var(--colors-input-activeoutline);
}

.content:has([data-testid="state.knowledgeTest7-option1"] :checked) [data-step="6"][hidden] + [data-step="7"] .form,
.content:has([data-testid="state.knowledgeTest7-option1"] :checked) [data-step="6"]:not([hidden]) + [data-step="7"] .form,
.content:has([data-testid="state.knowledgeTest7-option2"] :checked) [data-step="6"][hidden] + [data-step="7"],
.content:has([data-testid="state.knowledgeTest7-option2"] :checked) [data-step="6"]:not([hidden]) + [data-step="7"] {
  display: none;
}

.content:has([data-testid="state.knowledgeTest6-option2"] :checked) [data-step="7"][hidden] + [data-step="8"],
.content:has([data-testid="state.knowledgeTest7-option2"] :checked) [data-step="7"]:not([hidden]) + [data-step="8"],
.content:has([data-testid="state.knowledgeTest8-option1"] :checked) [data-step="8"] .summary,
.content:has([data-testid="additionalFields.knowledgeTest8-option1"] :checked) [data-step="8"] .summary li:nth-child(1) p:not(.notification):first-child::before,
.content:has([data-testid="additionalFields.knowledgeTest8-option2"] :checked) [data-step="8"] .summary li:nth-child(2) p:not(.notification):first-child::before,
.content:has([data-testid="additionalFields.knowledgeTest8-option1"] :checked) [data-step="8"] .summary li:nth-child(1) span,
.content:has([data-testid="additionalFields.knowledgeTest8-option2"] :checked) [data-step="8"] .summary li:nth-child(2) span,
.content:has([data-testid="state.knowledgeTest8-option1"] :checked) [data-step="8"] .summary li:nth-child(2) span,
.content:has([data-testid="additionalFields.knowledgeTest8-option1"] :checked) [data-step="8"] .summary li:nth-child(1) .notification,
.content:has([data-testid="additionalFields.knowledgeTest8-option2"] :checked) [data-step="8"] .summary li:nth-child(2) .notification {
  display: block;
}

.content:has([data-testid="additionalFields.knowledgeTest8-option1"] :checked) [data-step="8"] .summary li:nth-child(1) {
  border-color: var(--colors-support-03-100);
}

.content:has([data-testid="additionalFields.knowledgeTest8-option2"] :checked) [data-step="8"] .summary li:nth-child(2) {
  border-color: var(--colors-input-activeoutline);
}

.content:has([data-testid="state.knowledgeTest8-option1"] :checked) [data-step="7"][hidden] + [data-step="8"] .form,
.content:has([data-testid="state.knowledgeTest8-option1"] :checked) [data-step="7"]:not([hidden]) + [data-step="8"] .form,
.content:has([data-testid="state.knowledgeTest8-option2"] :checked) [data-step="7"][hidden] + [data-step="8"],
.content:has([data-testid="state.knowledgeTest8-option2"] :checked) [data-step="7"]:not([hidden]) + [data-step="8"] {
  display: none;
}

.content:has([data-testid="state.knowledgeTest7-option2"] :checked) [data-step="8"][hidden] + [data-step="9"],
.content:has([data-testid="state.knowledgeTest8-option2"] :checked) [data-step="8"]:not([hidden]) + [data-step="9"],
.content:has([data-testid="state.knowledgeTest9-option1"] :checked) [data-step="9"] .summary,
.content:has([data-testid="additionalFields.knowledgeTest9-option1"] :checked) [data-step="9"] .summary li:nth-child(1) p:not(.notification):first-child::before,
.content:has([data-testid="additionalFields.knowledgeTest9-option2"] :checked) [data-step="9"] .summary li:nth-child(2) p:not(.notification):first-child::before,
.content:has([data-testid="additionalFields.knowledgeTest9-option1"] :checked) [data-step="9"] .summary li:nth-child(1) span,
.content:has([data-testid="additionalFields.knowledgeTest9-option2"] :checked) [data-step="9"] .summary li:nth-child(2) span,
.content:has([data-testid="state.knowledgeTest9-option1"] :checked) [data-step="9"] .summary li:nth-child(1) span,
.content:has([data-testid="additionalFields.knowledgeTest9-option1"] :checked) [data-step="9"] .summary li:nth-child(1) .notification,
.content:has([data-testid="additionalFields.knowledgeTest9-option2"] :checked) [data-step="9"] .summary li:nth-child(2) .notification {
  display: block;
}

.content:has([data-testid="additionalFields.knowledgeTest9-option1"] :checked) [data-step="9"] label[for="mat-radio-38-input"],
.content:has([data-testid="additionalFields.knowledgeTest9-option2"] :checked) [data-step="9"] label[for="mat-radio-39-input"] {
  display: none;
}

.content:has([data-testid="additionalFields.knowledgeTest9-option1"] :checked) [data-step="9"] .summary li:nth-child(1) {
  border-color: var(--colors-input-activeoutline);
}

.content:has([data-testid="additionalFields.knowledgeTest9-option2"] :checked) [data-step="9"] .summary li:nth-child(2) {
  border-color: var(--colors-input-activeoutline);
}

.content:has([data-testid="state.knowledgeTest9-option1"] :checked) [data-step="8"][hidden] + [data-step="9"] legend,
.content:has([data-testid="state.knowledgeTest9-option1"] :checked) [data-step="8"][hidden] + [data-step="9"] fieldset > p,
.content:has([data-testid="state.knowledgeTest9-option1"] :checked) [data-step="8"][hidden] + [data-step="9"] .form,
.content:has([data-testid="state.knowledgeTest9-option1"] :checked) [data-step="8"]:not([hidden]) + [data-step="9"] legend,
.content:has([data-testid="state.knowledgeTest9-option1"] :checked) [data-step="8"]:not([hidden]) + [data-step="9"] fieldset > p,
.content:has([data-testid="state.knowledgeTest9-option1"] :checked) [data-step="8"]:not([hidden]) + [data-step="9"] .form,
.content:has([data-testid="state.knowledgeTest9-option2"] :checked) [data-step="8"][hidden] + [data-step="9"],
.content:has([data-testid="state.knowledgeTest9-option2"] :checked) [data-step="8"]:not([hidden]) + [data-step="9"] {
  display: none;
}

[data-step="9"] .summary,
.content:has([data-testid="state.knowledgeTest9-option2"] :checked) [data-step="10"],
.content:has([data-testid="additionalFields.knowledgeTest10-option1"] :checked) [data-step="10"]{
  padding: var(--spacing-40);
  flex-direction: column;
  align-items: flex-start;
  background: var(--colors-neutral-50);
  box-shadow: var(--shadow-md);
}

.content:has([data-testid="state.knowledgeTest9-option2"] :checked) [data-step="10"],
.content:has([data-testid="additionalFields.knowledgeTest10-option1"] :checked) [data-step="10"]{
  display: block;
}

.content:has([data-testid="state.knowledgeTest9-option2"] :checked) [data-step="10"] .success,
.content:has([data-testid="state.knowledgeTest9-option2"] :checked) [data-step="10"] .error,
.content:has([data-testid="state.knowledgeTest9-option2"] :checked) [data-step="10"] .failed {
  display: none;
  gap: var(--spacing-20);
  flex-direction: column;
}

.content:has([data-testid="state.knowledgeTest9-option2"] :checked):not(:has([data-testid="additionalFields.knowledgeTest10-option1"] :checked)):has([data-testid^="additionalFields.knowledgeTest"] input[value="false"]:checked) [data-step="10"] .error,
.content:has([data-testid="additionalFields.knowledgeTest10-option1"] :checked):has([data-testid^="additionalFields.knowledgeTest"] input[value="false"]:checked) [data-step="10"] .failed {
  display: block !important;
}

.content:has([data-testid="state.knowledgeTest9-option2"] :checked):not(:has([data-testid^="additionalFields.knowledgeTest"] input[value="false"]:checked)) [data-step="10"] .success {
  display: block;
}

.content:has([data-testid="state.knowledgeTest9-option2"] :checked) [data-step="10"] label {
  margin-top: var(--spacing-20);
}

/*
.content:not(:has([data-testid="additionalFields.knowledgeTestShow-option2"] :checked)) form + .button-container-right {
  display: none;
}
*/

html:not(:where([data-page*="voorstel"])) .formbuilderblock form + .button-container-right {
  display: none;
}

.content:has([data-testid="additionalFields.knowledgeTest10-option1"] :checked):not(:has([data-testid^="additionalFields.knowledgeTest"] input[value="false"]:checked)):not(:has([data-testid^="state"] :invalid)):not(:has([data-testid^="state"] input[value="summary"]:checked)) form + .button-container-right
/*, .content:has([data-testid^="additionalFields.knowledgeTest"] :checked):not(:has([data-testid^="additionalFields.knowledgeTest"] input[value="false"]:checked)):not(:has([data-testid^="state"] :invalid)):not(:has([data-testid^="state"] input[value="summary"]:checked)) form + .button-container-right */ {
  /*
  display: flex;
  flex-direction: unset;
  */
}



/* resultaat */

.content:has([data-testid="state.knowledgeTest9-option2"] :checked):not(:has([data-testid="additionalFields.knowledgeTest10-option1"] :checked)):has([data-testid="additionalFields.knowledgeTest1"] input[value="false"]:checked) [data-step="1"],
.content:has([data-testid="state.knowledgeTest9-option2"] :checked):not(:has([data-testid="additionalFields.knowledgeTest10-option1"] :checked)):has([data-testid="additionalFields.knowledgeTest2"] input[value="false"]:checked) [data-step="2"],
.content:has([data-testid="state.knowledgeTest9-option2"] :checked):not(:has([data-testid="additionalFields.knowledgeTest10-option1"] :checked)):has([data-testid="additionalFields.knowledgeTest3"] input[value="false"]:checked) [data-step="3"],
.content:has([data-testid="state.knowledgeTest9-option2"] :checked):not(:has([data-testid="additionalFields.knowledgeTest10-option1"] :checked)):has([data-testid="additionalFields.knowledgeTest4"] input[value="false"]:checked) [data-step="4"],
.content:has([data-testid="state.knowledgeTest9-option2"] :checked):not(:has([data-testid="additionalFields.knowledgeTest10-option1"] :checked)):has([data-testid="additionalFields.knowledgeTest5"] input[value="false"]:checked) [data-step="5"],
.content:has([data-testid="state.knowledgeTest9-option2"] :checked):not(:has([data-testid="additionalFields.knowledgeTest10-option1"] :checked)):has([data-testid="additionalFields.knowledgeTest6"] input[value="false"]:checked) [data-step="6"],
.content:has([data-testid="state.knowledgeTest9-option2"] :checked):not(:has([data-testid="additionalFields.knowledgeTest10-option1"] :checked)):has([data-testid="additionalFields.knowledgeTest7"] input[value="false"]:checked) [data-step="7"],
.content:has([data-testid="state.knowledgeTest9-option2"] :checked):not(:has([data-testid="additionalFields.knowledgeTest10-option1"] :checked)):has([data-testid="additionalFields.knowledgeTest8"] input[value="false"]:checked) [data-step="8"],
.content:has([data-testid="state.knowledgeTest9-option2"] :checked):not(:has([data-testid="additionalFields.knowledgeTest10-option1"] :checked)):has([data-testid="additionalFields.knowledgeTest9"] input[value="false"]:checked) [data-step="9"] {
  background-color: var(--colors-neutral-50);
  border: .125rem solid var(--colors-neutral-200);
  border-radius: var(--radius-10);
  display: block;
  padding: var(--spacing-40) var(--spacing-30);
}

.content:has([data-testid="state.knowledgeTest9-option2"] :checked):not(:has([data-testid="additionalFields.knowledgeTest10-option1"] :checked)) .form,
.content:has([data-testid="state.knowledgeTest9-option2"] :checked):not(:has([data-testid="additionalFields.knowledgeTest10-option1"] :checked)) .summary {
  display: none;
}

.content:has([data-testid="state.knowledgeTest9-option2"] :checked):not(:has([data-testid="additionalFields.knowledgeTest10-option1"] :checked)) .result {
  display: block;
}

.content:has([data-testid="state.knowledgeTest9-option2"] :checked):not(:has([data-testid="additionalFields.knowledgeTest10-option1"] :checked)) .result p {
  color: var(--colors-body-primary);
  display: flex;
  font-size: var(--body-medium);
  font-weight: 700;
  gap: var(--spacing-10);
}

.content:has([data-testid="state.knowledgeTest9-option2"] :checked):not(:has([data-testid="additionalFields.knowledgeTest10-option1"] :checked)) .result p .error {
  align-items: center;
  color: var(--colors-body-input-error);
  display: inline-flex;
}

.content:has([data-testid="state.knowledgeTest9-option2"] :checked):not(:has([data-testid="additionalFields.knowledgeTest10-option1"] :checked)) .result p .error::before {
  aspect-ratio: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.46967 5.46967C5.76256 5.17678 6.23744 5.17678 6.53033 5.46967L18.5303 17.4696C18.8232 17.7625 18.8232 18.2374 18.5303 18.5303C18.2374 18.8232 17.7625 18.8232 17.4696 18.5303L5.46967 6.53033C5.17678 6.23744 5.17678 5.76256 5.46967 5.46967Z' fill='%23DB0512'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.5304 5.46967C18.8233 5.76256 18.8233 6.23744 18.5304 6.53033L6.53033 18.5304C6.23744 18.8233 5.76256 18.8233 5.46967 18.5304C5.17678 18.2375 5.17678 17.7626 5.46967 17.4697L17.4697 5.46967C17.7626 5.17678 18.2375 5.17678 18.5304 5.46967Z' fill='%23DB0512'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: var(--spacing-30);
  content: "";
  height: var(--spacing-30);
  width: var(--spacing-30);
  display: block;
}

[data-retry="true"] {
  display: block;
}

[data-retry="true"] ~ [data-step] {
  display: none !important;
}

[data-step]:not([data-retry="true"]) ~ [data-step="10"] .error {
  display: none !important;
}

[data-step] .button[disabled] {
  display: none;
}

formcontrol-switch:has([data-testid*="knowledge"]) {
  display: none;
}

/* .content:has(#mat-radio-40-input:checked):not(:has([data-testid^="additionalFields.knowledgeTest"] input[value="false"]:checked)):not(:has([data-testid^="state"] :invalid)):not(:has([data-testid^="state"] input[value="summary"]:checked)) form + .button-container-right, */
.content:has([data-testid="additionalFields.knowledgeTest10-option1"] :checked)):not(:has([data-testid^="additionalFields.knowledgeTest"] input[value="false"]:checked)):not(:has([data-testid^="state"] :invalid)):not(:has([data-testid^="state"] input[value="summary"]:checked)) form + .button-container-right {
  display: flex;
  flex-direction: unset;
}



/* ---------- Leadcatcher ---------- */

.paragraphblock:has(#newsletter) {
  display: none;
}

form-builder-renderer:has(#newsletter-intro, #expired) span:has(formcontrol-select) ~ span:not(:has(#newsletter-intro, #expired)),
.content:has(#newsletter-intro, #expired) .paragraphblock:has(#naar-samenvatting) {
  display: none !important;
}

form-builder-renderer:has(#newsletter-intro, #expired) {
}

.content:has(#newsletter-intro) .paragraphblock:has(#newsletter) {
  display: block;
}

.notification:has(~ #newsletter-intro, ~ #expired) {
  background-color: var(--colors-notification-warning);
  margin-bottom: var(--spacing-20);
  width: 100%;
}

.notification:has(~ #newsletter-intro, ~ #expired) ~ p {
  float: none;
}

.notification:has(~ #newsletter-intro, ~ #expired) ~ h3 {
  margin-bottom: unset !important;
}



/*

form-builder-renderer {
  background-color: var(--colors-neutral-100);
  display: block;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1000;
  max-height: 100%;
  overflow: auto;
}

form-builder-renderer form {
  display: block !important;
}

formcontrol-switch:has([data-testid*="knowledge"]) {
  display: block;
}

*/



/* ----------- 1768113 ---------- */
/*

html[data-page] .mat-calendar#mat-datepicker-0 .mat-calendar-previous-button[disabled], 
html[data-page] .mat-calendar#mat-datepicker-0 .mat-calendar-next-button[disabled] {
    color: var(--mat-datepicker-calendar-date-disabled-state-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent));
}

html[data-page] .mat-calendar#mat-datepicker-0 button[aria-label="Previous 24 years"], 
html[data-page] .mat-calendar#mat-datepicker-0 button[aria-label="Next 24 years"],
html[data-page] .mat-calendar#mat-datepicker-0:has(.range-start) .mat-calendar-header button[aria-label="Previous month"],
html[data-page] .mat-calendar#mat-datepicker-0:has(.range-end) .mat-calendar-header button[aria-label="Next month"] {
    color: var(--mat-datepicker-calendar-date-disabled-state-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent)) !important;
    fill: var(--mat-datepicker-calendar-date-disabled-state-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent)) !important;
    pointer-events: none;
}

html[data-page] .mat-calendar#mat-datepicker-0 button.mat-calendar-body-disabled {
    pointer-events: none;
}

*/