/* ---------- EPi page ---------- */ 

@media (min-width: 1280px) {
  .formbuilderblock {
    --grid-columns: 6;
  }
}

.formbuilderblock section#funnel {
  padding-block: calc(var(--spacing-130) - var(--grid-row-gap));
}



/* vervolgstappen */

.paragraphblock:has(~ .formbuilderblock summary-data):not(:has(h1)),
.paragraphblock:has(~ .formbuilderblock summary-data) .box-content :not(h1) {
  display: none;
}

.paragraphblock:has(~ .formbuilderblock summary-data):not(:has(h1)) ~ .formbuilderblock section#funnel {
  padding-block: unset;
}

.paragraphblock:has(~ .formbuilderblock athora-nx-feature-post-succes) {
  display: none;
}

main .content:has(athora-nx-feature-post-succes h1, athora-nx-feature-post-succes h2) h1:not(athora-nx-feature-post-succes h1) {
  display: none;
}

main .content:has(athora-nx-feature-post-succes h1, athora-nx-feature-post-succes h2) section#funnel {
  padding-top: unset;
}



/* ---------- formbuilder ---------- */

.formbuilderblock {
  --mdc-filled-text-field-container-color: var(--colors-neutral-50, #FFFBF8);
  --mdc-outlined-text-field-outline-color: var(--colors-input-default, #6E6E6E);
  --mdc-outlined-text-field-hover-outline-color: var(--colors-input-hover, #232323);
  --mdc-outlined-text-field-disabled-outline-color: var(--colors-input-disabled, #D9D9D9);
  --mdc-outlined-text-field-input-text-placeholder-color: rgba(84, 114, 119, 1);
  --mdc-outlined-text-field-input-text-color: var(--colors-body-input-filled, #002D36);
  --mdc-outlined-text-field-disabled-input-text-color: var(--colors-body-input-disabled-secondary, #D9D9D9);
  --mdc-outlined-text-field-caret-color: currentColor;
  --mat-form-field-container-text-line-height: 140%;
  --mat-form-field-container-text-tracking: -.02em;
  --mat-radio-ripple-color: transparent;
  --mat-radio-checked-ripple-color: transparent;
  --mat-radio-disabled-label-color: var(--colors-body-input-disabled-secondary, #D9D9D9);
  --mat-radio-label-text-color: var(--colors-body-input-filled, #002D36);
  --mat-radio-label-text-line-height: 140%;
  --mat-radio-label-text-size: var(--body-large, 1.125rem);
  --mat-radio-label-text-tracking: -.02em;  
  --mdc-radio-disabled-selected-icon-color: var(--colors-input-disabled, #D9D9D9);
  --mdc-radio-disabled-unselected-icon-color: var(--colors-input-disabled, #D9D9D9);
  --mdc-radio-unselected-hover-icon-color: var(--colors-input-hover, #232323);
  --mdc-radio-unselected-focus-icon-color: var(--colors-input-hover, #232323);
  --mdc-radio-unselected-icon-color: var(--colors-input-default, #6E6E6E);
  --mdc-radio-unselected-pressed-icon-color:  var(--colors-input-fover, #232323);
  --mdc-radio-selected-focus-icon-color: var(--colors-input-active, #3CA579) !important;
  --mdc-radio-selected-hover-icon-color: var(--colors-input-active, #3CA579) !important;
  --mdc-radio-selected-icon-color: var(--colors-input-active, #3CA579) !important;
  --mdc-radio-selected-pressed-icon-color: var(--colors-input-active, #3CA579) !important;
  --mdc-radio-state-layer-size: 2.75rem;
  --mdc-radio-disabled-selected-icon-opacity: 1;
  --mdc-radio-disabled-unselected-icon-opacity: 1;
  --mat-filled-button-state-layer-color: transparent;
  --mdc-filled-button-label-text-tracking: -.02em;
  --mat-select-trigger-text-tracking: -.02em;
}

.formbuilderblock .mat-mdc-form-field {
  --mdc-outlined-text-field-container-shape: calc(var(--spacing-70) / 2);
  font-variant-numeric: tabular-nums; 
}

.formbuilderblock .mat-mdc-form-field-flex {
  transition: all .1s ease-out;
}

.formbuilderblock .mat-mdc-form-field .mdc-notched-outline,
.formbuilderblock .mat-mdc-form-field .mdc-notched-outline .mdc-notched-outline__leading,
.formbuilderblock .mat-mdc-form-field .mdc-notched-outline .mdc-notched-outline__notch,
.formbuilderblock .mat-mdc-form-field .mdc-notched-outline .mdc-notched-outline__trailing {
  transition: inherit;
}

.formbuilderblock .mat-focused {
  --mdc-outlined-text-field-input-text-placeholder-color: rgba(84, 114, 119, 1);
}



/* grid */

.formbuilderblock funnel-form-field-wrapper {
  align-items: baseline;
  column-gap: var(--grid-column-gap);
  grid-template-areas:
    "label" 
    "input";
  margin-bottom: var(--grid-row-gap); /* gap? */
  row-gap: var(--spacing-10);
}

.formbuilderblock .ng-invalid funnel-form-field-wrapper:has(mat-error:not(:empty)) {
  grid-template-areas:
    "label"
    "error" 
    "input";
}

@media (min-width: 768px) {
  .formbuilderblock funnel-form-field-wrapper {
    grid-template-areas:
      "label label" 
      "input .";
  }
  
  .formbuilderblock .ng-invalid funnel-form-field-wrapper:has(mat-error:not(:empty)) {
    grid-template-areas:
      "label label"  
      "error error"
      "input .";
  }

  .formbuilderblock funnel-form-field-wrapper:has(textarea, .upload-input) {
    grid-template-areas:
      "label label" 
      "input input";
  }

  .formbuilderblock .ng-invalid funnel-form-field-wrapper:has(mat-error:not(:empty)):has(textarea, .upload-input) {
    grid-template-areas:
      "label label"
      "error error"
      "input input";
  }
}

.formbuilderblock funnel-form-field-wrapper > span {
  grid-area: label;
}

.formbuilderblock funnel-form-field-wrapper > mat-form-field,
.formbuilderblock funnel-form-field-wrapper > div {
  grid-area: input;
}

.formbuilderblock funnel-form-field-wrapper > mat-error {
  grid-area: error;
}



/* padding velden */

.formbuilderblock .mdc-text-field,
.formbuilderblock .mdc-text-field--outlined {
  background-color: var(--mdc-filled-text-field-container-color);
  padding-inline: var(--spacing-30);
}



/* labels */

.formbuilderblock mat-label {  
  color: var(--colors-body-input-filled);
  font-size: var(--body-large) !important;
  line-height: 140% !important;
  letter-spacing: -.02em;  
  margin-block: unset !important;
}

@media (min-width: 1440px){
  .formbuilderblock mat-label {  
    font-size: var(--body-large) !important;
    line-height: 140% !important;
  }
}

.formbuilderblock funnel-form-field-wrapper mat-label {
  font-weight: 400 !important;
}

.formbuilderblock funnel-form-field-wrapper mat-label ~ .optionlabel  {
  color: var(--colors-body-secondary);

}

.formbuilderblock .mat-mdc-radio-button .mdc-form-field .mdc-label {
  padding-right: unset;
}

.formbuilderblock .mat-internal-form-field > label {
  padding-left: unset;
}



/* labels + i-tje */

.formbuilderblock .mat-icon {
  height: var(--spacing-30);
  width: var(--spacing-30);
}

.formbuilderblock funnel-form-field-wrapper > :first-child:has(mat-label + info-button:not(:empty)) {
  display: flex;
  column-gap: var(--spacing-10);
}

.formbuilderblock funnel-form-field-wrapper mat-label + info-button:not(:empty) {
  position: relative;
  flex: 0 0 2.75rem;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: -.625rem;
  outline: .125rem solid transparent;
  outline-offset: -.375rem;
  transition: all .1s ease-out;
}

.formbuilderblock funnel-form-field-wrapper mat-label + info-button:not(:empty):focus-visible {
  outline-color: var(--colors-neutral-800);
}

.formbuilderblock funnel-form-field-wrapper mat-label + info-button .info-button-mat-icon {
  color: var(--colors-body-primary);
  font-size: 1.5rem;
  margin: unset;
  outline: .125rem solid transparent;
  outline-offset: .25rem;
  vertical-align: baseline;
  transition: all .1s ease-out;
}

.formbuilderblock funnel-form-field-wrapper mat-label + info-button:focus .info-button-mat-icon,
.formbuilderblock funnel-form-field-wrapper mat-label + info-button:hover .info-button-mat-icon {
  color: var(--colors-body-secondary);
}

.formbuilderblock funnel-form-field-wrapper mat-label + info-button .info-button-mat-icon:focus-visible {
  color: var(--colors-body-primary);
  outline-color: var(--colors-neutral-800);
}

.formbuilderblock info-button:empty {
  display: none;
}



/* radio buttons */

.formbuilderblock .mat-mdc-radio-button {
  --mat-radio-checked-ripple-color: transparent;
  --mdc-radio-selected-icon-color: var(--colors-brand-tertiary-01-500);
  --mdc-radio-selected-hover-icon-color: var(--colors-brand-tertiary-01-500);
  --mdc-radio-selected-pressed-icon-color: var(--colors-brand-tertiary-01-500);
}

.formbuilderblock .mat-radio-group--horizontal {
  column-gap: var(--grid-column-gap);
  row-gap: var(--spacing-10);
  flex-wrap: wrap;
}

.formbuilderblock .mat-radio-group--horizontal .mat-radio-button {
  flex: 1;
  max-width: unset;
}

.formbuilderblock .mat-internal-form-field {
  gap: var(--spacing-10);  
}

.formbuilderblock .mat-mdc-radio-button .mdc-radio {
  height: var(--spacing-30);
  padding: unset;
  width: var(--spacing-30);
}

.formbuilderblock .mat-mdc-radio-touch-target {
  height: 2.75rem;
  width: 2.75rem;
}

.formbuilderblock .mat-mdc-radio-button .mdc-radio__native-control {
  border-width: 1px;
  height: var(--spacing-30);
  inset: 50%;
  transform: translate(-50%, -50%);
  width: var(--spacing-30);
}
  
.formbuilderblock .mat-mdc-radio-button .mdc-radio__background {
  height: var(--spacing-30);
  width: var(--spacing-30);
  outline: 0 none !important;
}

.formbuilderblock .mat-mdc-radio-button .mdc-radio__background::before {
  height: 2.25rem;
  left: -.375rem;
  top: -.375rem;
  transition: none;
  width: 2.25rem;
}

.formbuilderblock .mat-mdc-radio-button .mdc-radio__outer-circle {
  background-color: var(--colors-neutral-50, #FFFBF8);
  border-width: 1px;
  outline: .375rem solid transparent;
  transition: outline .1s ease-out;
}

.formbuilderblock .mat-mdc-radio-button .mdc-radio__inner-circle {
  background-color: transparent;
  border-width: 0;
  height: .75rem;
  inset: 50%;
  transform: translate(-50%, -50%);
  width: .75rem;
}

.formbuilderblock .mat-mdc-radio-button .mdc-radio__native-control:checked + .mdc-radio__background .mdc-radio__inner-circle {
  background-color: var(--colors-input-active, #3CA579);
  transform: translate(-50%, -50%);
}

.formbuilderblock .mat-mdc-radio-button .mdc-radio__native-control:checked + .mdc-radio__background .mdc-radio__outer-circle {
  background-color: var(--colors-neutral-50, #FFFBF8);
  border: 2px solid var(--colors-input-activeoutline, #C4E4D7) !important;
}

.formbuilderblock .mat-mdc-radio-button:not(.mat-mdc-radio-checked).cdk-focused .mdc-radio {
  border: 0 none !important;
}

.formbuilderblock .mat-mdc-radio-button.cdk-focused .mdc-radio__native-control:not(:checked) + .mdc-radio__background .mdc-radio__outer-circle {
  outline-color: var(--colors-cta-primary-hover_outline, #FFEFC5);
  border: 2px solid var(--mdc-outlined-text-field-focus-outline-color, #232323) !important;
}

.formbuilderblock .mat-mdc-radio-button.cdk-focused .mdc-radio__native-control:checked + .mdc-radio__background .mdc-radio__outer-circle {
  ----colors-input-activeoutline: var(--colors-brand-tertiary-01-300, oklch(62.85% .116 176.08/24%));
  outline-color: var(--colors-input-activeoutline);
  border: 2px solid var(--colors-input-active, #3CA579) !important;
}



/* textarea */

.formbuilderblock .mdc-text-field:has(textarea) {
  --mdc-shape-small: var(--radius-20) !important;
  --mdc-outlined-text-field-container-shape: var(--radius-20);
  border-radius: var(--mdc-shape-small) !important;
}

.formbuilderblock .mdc-text-field textarea {
  height: auto !important;
  min-height: 7rem !important;
  vertical-align: baseline;
}

@supports (field-sizing: content) {
  textarea {
    field-sizing: content;
  }
}



/* file upload */

.formbuilderblock .file-upload-box {
  --colors-link: var(--colors-body-primary);
  --colors-link-hover: var(--colors-body-primary);
  align-items: center;
  background-color: transparent !important;
  border: 1px dashed var(--colors-input-default) !important;
  border-radius: var(--radius-20) !important;
  box-shadow: 0 0 0 .375rem transparent;
  display: flex !important;
  flex-direction: column;
  color: var(--colors-body-primary);
  cursor: pointer;
  font-size: var(--body-large);
  font-weight: 400;
  justify-content: center;
  letter-spacing: -.02em;
  line-height: 140%;
  margin: unset !important;
  min-height: 9rem !important;
  outline: .125rem solid transparent;
  outline-offset: -.125rem;
  padding: var(--spacing-50) var(--spacing-30) !important;
  transition: all .1s ease-out;
}

.formbuilderblock .file-upload-box:focus,
.formbuilderblock .file-upload-box:hover {
  border: 1px solid var(--colors-brand-tertiary-01-700) !important; 
}

.formbuilderblock .file-upload-box:focus-visible {
  border: 1px solid transparent !important;
  box-shadow: 0 0 0 .375rem var(--colors-brand-primary-100);
  outline-color: var(--colors-brand-primary-500);  
}

.formbuilderblock .file-upload-box .droptarget {
  order: -1;
  width: var(--spacing-40) !important;
  height: var(--spacing-40) !important;
  margin: 0 auto var(--spacing-20) !important;
  content: 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='M7 3.75C6.30964 3.75 5.75 4.30964 5.75 5V19C5.75 19.6904 6.30964 20.25 7 20.25H17C17.6904 20.25 18.25 19.6904 18.25 19V8.31066L13.6893 3.75H7ZM4.25 5C4.25 3.48122 5.48122 2.25 7 2.25H14C14.1989 2.25 14.3897 2.32902 14.5303 2.46967L19.5303 7.46967C19.671 7.61032 19.75 7.80109 19.75 8V19C19.75 20.5188 18.5188 21.75 17 21.75H7C5.48122 21.75 4.25 20.5188 4.25 19V5Z' fill='%23002D36'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13 2.25C13.4142 2.25 13.75 2.58579 13.75 3L13.75 8C13.75 8.13807 13.8619 8.25 14 8.25L19 8.25C19.4142 8.25 19.75 8.58579 19.75 9C19.75 9.41421 19.4142 9.75 19 9.75L14 9.75C13.0335 9.75 12.25 8.9665 12.25 8L12.25 3C12.25 2.58579 12.5858 2.25 13 2.25Z' fill='%23002D36'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.4697 11.4697C11.7626 11.1768 12.2374 11.1768 12.5303 11.4697L15.5303 14.4697C15.8232 14.7626 15.8232 15.2374 15.5303 15.5303C15.2374 15.8232 14.7626 15.8232 14.4697 15.5303L12.75 13.8107V18C12.75 18.4142 12.4142 18.75 12 18.75C11.5858 18.75 11.25 18.4142 11.25 18L11.25 13.8107L9.53033 15.5303C9.23744 15.8232 8.76256 15.8232 8.46967 15.5303C8.17678 15.2374 8.17678 14.7626 8.46967 14.4697L11.4697 11.4697Z' fill='%23002D36'/%3E%3C/svg%3E") !important;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: -.02em;
}

.formbuilderblock .file-upload-box + mat-label {
  margin-block: var(--spacing-30) var(--spacing-10) !important;
  display: block;
  font-weight: 700 !important;
}

.formbuilderblock .file-upload-box ~ .chosen-file {
  color: var(--colors-body-secondary) !important;  
  align-items: baseline;
  word-break: break-all;
  gap: var(--grid-column-gap);
  transition: all .3s ease-out;
}

.formbuilderblock .file-upload-box ~ .chosen-file:has(.remove-file-btn:hover) {
  color: var(--colors-brand-tertiary-03-300) !important;  
}

.formbuilderblock .file-upload-box ~ .chosen-file + .chosen-file {
  border-top: 1px solid var(--colors-divider-secondary);
  margin-top: var(--spacing-20);
  padding-top: var(--spacing-20);
}

.formbuilderblock .file-upload-box ~ .chosen-file .remove-file-btn {
  --layer-size: 2.75rem;
  --icon-size: 1rem;
  --icon-offset: calc((var(--layer-size) - var(--icon-size)) / 2);
  cursor: pointer;
  width: var(--icon-size);
  height: var(--icon-size);
  flex: 0 0 var(--icon-size);
  top: calc((var(--body-medium) * 1.4 - var(--icon-size)) / 2 );
  position: relative;
  content: none;
  margin: unset;
  outline-offset: .375rem;
}

.formbuilderblock .file-upload-box ~ .chosen-file .remove-file-btn::after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.46967 3.46967C3.76256 3.17678 4.23744 3.17678 4.53033 3.46967L12.5303 11.4696C12.8232 11.7625 12.8232 12.2374 12.5303 12.5303C12.2374 12.8232 11.7625 12.8232 11.4696 12.5303L3.46967 4.53033C3.17678 4.23744 3.17678 3.76256 3.46967 3.46967Z' fill='%23002D36'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.5304 3.46967C12.8232 3.76256 12.8232 4.23744 12.5304 4.53033L4.53033 12.5304C4.23744 12.8232 3.76256 12.8232 3.46967 12.5304C3.17678 12.2375 3.17678 11.7626 3.46967 11.4697L11.4697 3.46967C11.7626 3.17678 12.2375 3.17678 12.5304 3.46967Z' fill='%23002D36'/%3E%3C/svg%3E"); 
  width: var(--icon-size);
  height: var(--icon-size);
  padding: var(--icon-offset);
  position: absolute;
  inset: calc(var(--icon-offset) * -1);
}

.formbuilderblock .file-upload-box ~ .chosen-file .remove-file-btn:focus::after,
.formbuilderblock .file-upload-box ~ .chosen-file .remove-file-btn:hover::after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.46967 3.46967C3.76256 3.17678 4.23744 3.17678 4.53033 3.46967L12.5303 11.4696C12.8232 11.7625 12.8232 12.2374 12.5303 12.5303C12.2374 12.8232 11.7625 12.8232 11.4696 12.5303L3.46967 4.53033C3.17678 4.23744 3.17678 3.76256 3.46967 3.46967Z' fill='%23db0512'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.5304 3.46967C12.8232 3.76256 12.8232 4.23744 12.5304 4.53033L4.53033 12.5304C4.23744 12.8232 3.76256 12.8232 3.46967 12.5304C3.17678 12.2375 3.17678 11.7626 3.46967 11.4697L11.4697 3.46967C11.7626 3.17678 12.2375 3.17678 12.5304 3.46967Z' fill='%23db0512'/%3E%3C/svg%3E");
}

.formbuilderblock .file-upload-box ~ .chosen-file .remove-file-btn:focus-visible {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.46967 3.46967C3.76256 3.17678 4.23744 3.17678 4.53033 3.46967L12.5303 11.4696C12.8232 11.7625 12.8232 12.2374 12.5303 12.5303C12.2374 12.8232 11.7625 12.8232 11.4696 12.5303L3.46967 4.53033C3.17678 4.23744 3.17678 3.76256 3.46967 3.46967Z' fill='%23002D36'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.5304 3.46967C12.8232 3.76256 12.8232 4.23744 12.5304 4.53033L4.53033 12.5304C4.23744 12.8232 3.76256 12.8232 3.46967 12.5304C3.17678 12.2375 3.17678 11.7626 3.46967 11.4697L11.4697 3.46967C11.7626 3.17678 12.2375 3.17678 12.5304 3.46967Z' fill='%23002D36'/%3E%3C/svg%3E");   
}



/* subkoppen */

.formbuilderblock h3 {
  font-size: var(--heading-4,1.5rem);
  font-weight: 600;
  line-height: 100%;
  letter-spacing: -.02em;
  margin-bottom: var(--grid-row-gap) !important;
}



/* buttons */

a[mat-flat-button], 
button[mat-flat-button] {
  font-family: inherit;
  font-size: var(--font-size-base,1rem);
  font-weight: 600 !important;
  letter-spacing: -.02em;
  line-height: 105%;
  padding: var(--spacing-20) var(--spacing-50) !important;
}

a[mat-flat-button]:not([disabled]), 
button[mat-flat-button]:not([disabled]) {
  box-shadow: 0 0 0 .375rem transparent;
  transition: all .1s ease-out;
  outline: .125rem solid transparent;
  outline-offset: -.125rem;
}

a[mat-flat-button]:not([disabled]):focus-visible, 
button[mat-flat-button]:not([disabled]):focus-visible {
  outline-color: var(--colors-neutral-800, #0A0A0A);
  box-shadow: 0 0 0 .375rem var(--colors-cta-primary-hover_outline);
}

.mat-mdc-icon-button .mat-mdc-button-persistent-ripple::before {
  background-color: transparent !important;
}



/* icon buttons */

.mat-mdc-icon-button {
  --mdc-icon-button-state-layer-size: 2.75rem;
  --mdc-icon-button-icon-size: 1.5rem;
}

.mat-mdc-icon-button {
  border-radius: unset !important;
}

.mat-mdc-icon-button:focus path, 
.mat-mdc-icon-button:hover path {
  fill: var(--colors-icon-hover, #547277);
}

.mat-mdc-icon-button:focus-visible {
  color: var(--colors-icon-primary, #002D36);
  outline: .125rem solid var(--colors-neutral-800);
  outline-offset: -.125rem;
}

.mat-mdc-icon-button .mat-mdc-button-touch-target {
  --mdc-icon-button-state-layer-size: 2.75rem;
  --mdc-icon-button-icon-size: 1.5rem;
  height: 2.75rem !important;
  width: 2.75rem !important;
}



/* button datepicker */

.formbuilderblock .mat-mdc-form-field-flex:has(button:focus, button:hover, button:focus-visible) {
  --mdc-outlined-text-field-outline-color: var(--colors-neutral-300, #BBB);
  --mdc-outlined-text-field-hover-outline-color: var(--colors-neutral-300, #BBB);
  transition: all .3s ease-out;
}

.formbuilderblock .mat-mdc-form-field .mat-mdc-form-field-icon-suffix {
  padding: 0 0 0 var(--grid-column-gap);
}

.formbuilderblock mat-datepicker-toggle {
  margin: unset !important;
}

.formbuilderblock mat-datepicker-toggle button {
  background-color: transparent;
  border-radius: 50% !important;
  color: var(--colors-body-cta-brand);
  padding: unset;
  align-items: center;
  justify-content: center;
  display: flex;
  width: var(--spacing-70);
  height: var(--spacing-70);  
}

.formbuilderblock mat-datepicker-toggle button:focus,
.formbuilderblock mat-datepicker-toggle button:hover {
  box-shadow: inset 0 0 0 1px var(--colors-input-default, #6E6E6E);
}

.formbuilderblock mat-datepicker-toggle button:focus-visible {
  box-shadow: inset 0 0 0 2px var(--colors-cta-primary, #FCBE31);
  outline: .375rem solid var(--colors-cta-primary-hover_outline, var(--colors-brand-primary-100a));
  outline-offset: unset;
}

.formbuilderblock mat-datepicker-toggle button .mat-mdc-button-touch-target {
  width: var(--spacing-70);
  height: var(--spacing-70);    
}

.formbuilderblock mat-datepicker-toggle button:focus path,
.formbuilderblock mat-datepicker-toggle button:hover path {
  fill: var(--colors-body-cta-brand);
}



/* select */

.formbuilderblock .mat-mdc-select .mat-mdc-select-arrow {
  width: var(--spacing-20);
  height: var(--spacing-20);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.80301 5.46967C3.0959 5.17678 3.57077 5.17678 3.86367 5.46967L8 9.60601L12.1363 5.46967C12.4292 5.17678 12.9041 5.17678 13.197 5.46967C13.4899 5.76256 13.4899 6.23744 13.197 6.53033L8.53033 11.197C8.38968 11.3376 8.19892 11.4167 8 11.4167C7.80109 11.4167 7.61033 11.3376 7.46967 11.197L2.80301 6.53033C2.51011 6.23744 2.51011 5.76256 2.80301 5.46967Z' fill='%23A0560F'/%3E%3C/svg%3E");
  background-size: var(--spacing-20);
  transform: unset;
}




/* errors */

.formbuilderblock mat-error {
  font-size: var(--body-medium) !important;
  line-height: 140% !important;
  letter-spacing: -.02em;  
  margin-block: unset !important;
  position: relative;
  top: calc(var(--spacing-5) * -1);
}

.formbuilderblock mat-error:empty {
  display: none;
  grid-area: unset !important;
}

.formbuilderblock .ng-invalid funnel-form-field-wrapper:has(mat-error:not(:empty)) .mdc-text-field:not(.mdc-text-field--focused), 
.formbuilderblock .ng-invalid funnel-form-field-wrapper:has(mat-error:not(:empty)) .mdc-text-field--outlined:not(.mdc-text-field--focused) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cg clip-path='url(%23clip0_5626_1314)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 1.65385C4.49512 1.65385 1.65385 4.49512 1.65385 8C1.65385 11.5049 4.49512 14.3462 8 14.3462C11.5049 14.3462 14.3462 11.5049 14.3462 8C14.3462 4.49512 11.5049 1.65385 8 1.65385ZM0.5 8C0.5 3.85786 3.85786 0.5 8 0.5C12.1421 0.5 15.5 3.85786 15.5 8C15.5 12.1421 12.1421 15.5 8 15.5C3.85786 15.5 0.5 12.1421 0.5 8Z' fill='%23DB0512'/%3E%3Cpath d='M8.5 11C8.5 11.2761 8.27614 11.5 8 11.5C7.72386 11.5 7.5 11.2761 7.5 11C7.5 10.7239 7.72386 10.5 8 10.5C8.27614 10.5 8.5 10.7239 8.5 11Z' fill='%23DB0512'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 9.5C7.72386 9.5 7.5 9.2417 7.5 8.92308L7.5 5.07692C7.5 4.7583 7.72386 4.5 8 4.5C8.27614 4.5 8.5 4.7583 8.5 5.07692L8.5 8.92308C8.5 9.2417 8.27614 9.5 8 9.5Z' fill='%23DB0512'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_5626_1314'%3E%3Crect width='16' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center left 1.125rem;
  background-size: 1rem;
  padding-left: var(--spacing-70);
}



/* dialog */ 

.cdk-overlay-container {
  --grid-content-columns: 12;
  --dialog-margin: var(--spacing-20);
  --mat-dialog-container-elevation-shadow: none;
  --mat-dialog-container-max-width: calc(var(--grid-column-width)*var(--grid-content-columns) + var(--grid-column-gap)*(var(--grid-content-columns) - 1));
  --mat-dialog-container-small-max-width: calc(var(--grid-column-width)*var(--grid-content-columns) + var(--grid-column-gap)*(var(--grid-content-columns) - 1));
}

@media (min-width: 640px){
  .cdk-overlay-container {
    --grid-content-columns: 10;  
    --dialog-margin: var(--spacing-40);
  }
}

@media (min-width: 1024px){
  .cdk-overlay-container {
    --grid-content-columns: 8;  
    --dialog-margin: var(--spacing-60);
  }
}

@media (min-width: 1280px){
  .cdk-overlay-container {
    --grid-content-columns: 6;
    --dialog-margin: var(--spacing-80);
  }
}

.mat-mdc-dialog-surface {
  --mdc-dialog-container-color: var(--dialog-background-color, #fffaf1);
  --mdc-dialog-subhead-color: var(--colors-heading-primary, #002d36);
  --mdc-dialog-supporting-text-color: #504534;
  --mdc-dialog-subhead-line-height: 105%;
  --mdc-dialog-subhead-size: var(--heading-5, 1.125rem);
  --mdc-dialog-subhead-weight: 600;
  --mdc-dialog-subhead-tracking: -.02em;
  --mdc-dialog-container-shape: 0;
  --mdc-dialog-supporting-text-color: var(--colors-body-secondary, #547277);
  --mdc-dialog-supporting-text-size: var(--body-large, 1.125rem);
  --mdc-dialog-supporting-text-line-height: 140%;
  --mdc-dialog-supporting-text-tracking: -.02em;
  --mat-dialog-container-elevation-shadow: var(--modal-box-shadow, 0 .25rem 1.5625rem 0 rgba(0, 0, 0, .1));
  --mat-dialog-content-padding: var(--dialog-padding, 2rem 2.5rem);
}

@layer cdk-overlay {
  --mdc-dialog-container-color: purple;
  
  .cdk-overlay-dark-backdrop {
    background-color: var(--modal-backdrop-color, #0000004d) !important;
  }
}

mat-dialog-container .mat-mdc-dialog-content {
  max-height: calc(100vh - var(--dialog-margin) * 2);
}

mat-dialog-container .container__button-close {
  position: absolute;
  right: var(--spacing-5);
  top: var(--spacing-5);
}

mat-dialog-container #mat-dialog-content-title {
  color: var(--colors-heading-primary, #002d36);
  font-size: var(--heading-5, 1.125rem);
  font-weight: 600;
  line-height: 105%;
  letter-spacing: -.02em;
  margin-bottom: var(--heading-5-margin-bottom);
}



/* summary */

.formbuilderblock summary-data h3 {
  margin-block: var(--heading-4-margin-block) !important;
}

.formbuilderblock summary-data h3:empty {
    display: none;
}

.formbuilderblock div:first-child  > summary-data h3:first-child {
  border: unset;
  margin-top: unset !important;
  padding-top: unset;  
}

.formbuilderblock summary-data h3 {
  border-top: 1px solid var(--colors-divider-primary);
  margin-block: var(--spacing-70) var(--heading-4-margin-bottom) !important;
  padding-top: var(--spacing-70);  
}

.formbuilderblock .summary-group-label {
  padding: unset !important;
  font-size: var(--heading-6) !important;
  margin-block: var(--heading-6-margin-block) !important;
  display: none;
}

.formbuilderblock summary-item {
  column-gap: var(--grid-column-gap);
  row-gap: 0;
}

.formbuilderblock summary-item + summary-item:not(:empty) {
  margin-top: var(--spacing-30);
}

.formbuilderblock .summary-item-label {
  margin: unset !important;
  color: var(--colors-body-secondary) !important;
  font-size: var(--body-medium);
  line-height: 140%;
  letter-spacing: -.02em;
  font-weight: 400 !important;
}

.formbuilderblock .summary-item-value {
  color: var(--colors-body-primary) !important;
  font-size: var(--body-large);
  line-height: 140%;
  letter-spacing: -.02em;
  word-break: break-word;
}

@media (min-width: 640px){
  .formbuilderblock summary-item {
    grid-template-columns: 1fr 1fr;
  }
  
  .formbuilderblock summary-item +  summary-item:not(:empty) {
    margin-top: unset;
  }
  
  .formbuilderblock .summary-item-label {
    font-size: var(--body-large);
  }

  .formbuilderblock .summary-item-value {
    color: var(--colors-body-primary) !important;
  }
}

@media (min-width: 1920px){
  .formbuilderblock summary-item {
    grid-template-columns: 1fr 2fr;
  }
}

div:has(> summary-data) ~ .button-container {
  margin-top: var(--spacing-70);
  align-items: center;
}

div:has(> summary-data) ~ .button-container .button--prev {
  align-items: center;
  background-color: var(--colors-cta-secondary-default);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23002D36'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.53049 2.80298C8.82339 3.09588 8.82339 3.57075 8.53049 3.86364L5.14416 7.24998H12.6668C13.081 7.24998 13.4168 7.58577 13.4168 7.99998C13.4168 8.41419 13.081 8.74998 12.6668 8.74998H5.14416L8.53049 12.1363C8.82339 12.4292 8.82339 12.9041 8.53049 13.197C8.2376 13.4899 7.76273 13.4899 7.46983 13.197L2.80317 8.53031C2.51027 8.23742 2.51027 7.76254 2.80317 7.46965L7.46983 2.80298C7.76273 2.51009 8.2376 2.51009 8.53049 2.80298Z' fill='%23fcbd31'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
  border: 0 none;
  border-radius: 50%;
  box-shadow: inset 0 0 0 .125rem transparent;
  color: var(--colors-body-cta-secondary);
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  height: var(--spacing-60);
  justify-content: center;
  outline: .375rem solid transparent;
  outline-offset: unset;
  transition: all .1s ease-out;
  width: var(--spacing-60);
}

div:has(> summary-data) ~ .button-container .button--prev:focus,
div:has(> summary-data) ~ .button-container .button--prev:hover {
  outline-color: var(--colors-cta-secondary-hover);
}

div:has(> summary-data) ~ .button-container .button--prev:focus-visible {
  box-shadow: inset 0 0 0 .125rem var(--colors-neutral-50);
  outline-color: var(--colors-cta-secondary-hover);
}

div:has(> summary-data) ~ .button-container .mat-flat-button {
  align-items: center;
  background-color: var(--colors-cta-primary-default);
  border: 0 none;
  border-radius: var(--radius-full);
  box-shadow: inset 0 0 0 .125rem transparent;
  color: var(--colors-body-cta-primary);
  cursor: pointer;
  justify-content: center;
  outline: .375rem solid transparent;
  padding: var(--spacing-20) var(--spacing-50);
  text-decoration: unset;
  transition: var(--cta-transition);
  width: 100%;
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 105%;
  height: unset;
  width: auto;
}

div:has(> summary-data) ~ .button-container .mat-flat-button:focus,
div:has(> summary-data) ~ .button-container .mat-flat-button:hover {
  outline-color: var(--colors-brand-primary-100a);
}

div:has(> summary-data) ~ .button-container .mat-flat-button:focus-visible {
  box-shadow: inset 0 0 0 .125rem var(--colors-neutral-800);
  outline-color: var(--colors-brand-primary-100a);
}



/* server errors */

athora-nx-feature-post-failed {
    background-color: var(--colors-notification-error, #ffb7b7);
    display: block;
    width: 100%;
    padding: var(--spacing-30);
}

athora-nx-feature-post-failed p strong {
    font-size: var(--heading-5, 1.125rem);
    font-weight: 600;
    line-height: 105%;
    letter-spacing: -.02em;
    margin-block: var(--heading-5-margin-block);
}






/*

- labels boven velden
- focus states selectbox

*/



.formbuilderblock fieldset {
  background-color: var(--colors-brand-tertiary-01-100, #E7EEEB);
  border: 0 none;
  margin-inline: unset;
  margin-bottom: var(--spacing-40);
  padding: var(--spacing-20);
  position: relative;
}

.formbuilderblock fieldset legend {
  float: left;
  font-weight: 700;
}

.formbuilderblock fieldset div {
  float: left;
}

.formbuilderblock fieldset p {
  color: var(--colors-body-primary);
  font-size: inherit;
  line-height: inherit;
  float: left;
}

.formbuilderblock hr {
  margin-block: var(--spacing-70) !important;
}



/* ---------- 1656598 ---------- */

@keyframes show {
}

@keyframes hide {
}

.zwitserleven .container__button-close,
.funnel-brand-Zwitserleven .container__button-close {
  animation-name: show;
}

.zwitserleven .container__button-close--close-animation,
.funnel-brand-Zwitserleven .container__button-close--close-animation {
  animation-name: hide;
}



/* ---------- 1647138 ---------- */

html[data-page] {
  --mat-datepicker-calendar-date-selected-state-text-color: var(--colors-body-cta-primary, #002D36);
  --mat-datepicker-calendar-date-selected-state-background-color: var(--colors-cta-primary-default, #FCBE31);
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: var(--colors-cta-primary-disabled, #FFEEC5);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: var(--colors-cta-primary-default, #FCBE31);
  --mat-datepicker-calendar-date-focus-state-background-color: transparent;
  --mat-datepicker-calendar-date-hover-state-background-color: transparent;
  --mat-datepicker-toggle-icon-color: var(--colors-body-cta-brand, #A0560F);
  --mat-datepicker-toggle-active-state-icon-color: var(--colors-body-secondary, #547277);
  --mat-datepicker-toggle-focus-state-icon-color: var(--colors-body-cta-primary, #002D36);
  --mat-datepicker-toggle-hover-state-icon-color: var(--colors-body-secondary, #547277);
  --mat-datepicker-calendar-date-in-range-state-background-color: var(--colors-brand-primary-100, #ffeec5);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: var(--colors-brand-tertiary-01-100, #E7EEEB); 
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: var(--colors-brand-primary-300, #fcd989); 
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: var(--colors-cta-primary-default, #FCBE31);
  --mat-datepicker-calendar-body-label-text-color: var(--colors-body-primary, #002D36);
  --mat-datepicker-calendar-period-button-text-color: var(--colors-body-cta-primary, #002D36);
  --mat-datepicker-calendar-period-button-icon-color: var(--colors-body-cta-primary, #002D36);
  --mat-datepicker-calendar-navigation-button-icon-color: var(--colors-body-cta-brand, #A0560F);
  --mat-datepicker-calendar-header-text-color: var(--colors-body-secondary, #547277);
  --mat-datepicker-calendar-date-today-outline-color: transparent;
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: transparent;
  --mat-datepicker-calendar-date-text-color: var(--colors-body-cta-primary, #002D36);
  --mat-datepicker-calendar-date-disabled-state-text-color: var(--colors-neutral-300, #bbb);
  --mat-datepicker-calendar-date-preview-state-outline-color: var(--colors-neutral-800, #09090a); 
  --mat-datepicker-range-input-separator-color: var(--colors-body-input-filled, #002D36);
  --mat-datepicker-range-input-disabled-state-separator-color: var(--colors-body-input-disabled, #6E6E6E);
  --mat-datepicker-range-input-disabled-state-text-color: var(--colors-body-input-disabled, #6E6E6E);
  --mat-datepicker-calendar-container-background-color: var(--colors-neutral-50, #FFFCF9);
  --mat-datepicker-calendar-container-text-color: var(--colors-body-secondary, #547277);
  --mat-datepicker-calendar-text-font: RMNeue;
  --mat-datepicker-calendar-text-size: var(--body-small, .875rem);
  --mat-datepicker-calendar-body-label-text-size: var(--body-small, .875rem);
  --mat-datepicker-calendar-body-label-text-weight: 600;
  --mat-datepicker-calendar-period-button-text-size: var(--body-small, .875rem);
  --mat-datepicker-calendar-period-button-text-weight: 600;
  --mat-datepicker-calendar-header-text-size: var(--body-small, .875rem);
  --mat-datepicker-calendar-header-text-weight: 400;
  --mat-datepicker-calendar-container-shape: 0;
  --mat-datepicker-calendar-container-touch-shape: 50%;
  --mat-datepicker-calendar-container-elevation-shadow: var(--shadow, 0 .1875rem .9375rem 0 rgba(0, 0, 0, .1));
  --mat-datepicker-calendar-container-touch-elevation-shadow: none;
  --mat-datepicker-calendar-header-divider-color: var(--colors-divider-secondary, #d9d9d9);
  --mat-datepicker-calendar-date-outline-color: transparent;
}

html[data-page] .mat-datepicker-toggle button {
  --mdc-icon-button-icon-color: var(--mat-datepicker-toggle-icon-color);
}

html[data-page] .mat-datepicker-toggle button[aria-expanded="true"] {
  --mdc-icon-button-icon-color: var(--mat-datepicker-toggle-active-state-icon-color);
}

html[data-page] .mat-datepicker-toggle button:focus {
  color: var(--mat-datepicker-toggle-focus-state-icon-color);
}

html[data-page] .mat-datepicker-toggle button:hover {
  color: var(--mat-datepicker-toggle-hover-state-icon-color);
}

html[data-page] .mat-calendar-header {
  padding: var(--spacing-20, 1rem);
}

html[data-page] .mat-calendar-header .mat-mdc-button {
  --mdc-text-button-label-text-size: var(--mat-datepicker-calendar-period-button-text-size);
  --mdc-text-button-label-text-tracking: -.02em;
  --mdc-text-button-label-text-weight: var(--mat-datepicker-calendar-period-button-text-weight);
  --mat-text-button-hover-state-layer-opacity: 0;
  --mat-text-button-state-layer-color: transparent;
  --mat-text-button-horizontal-padding: var(--spacing-20, 1rem);
  --mdc-text-button-container-height: var(--spacing-50, 2.5rem);
}

html[data-page] .mat-calendar-header .mat-mdc-icon-button {
  --mat-icon-button-hover-state-layer-opacity: 0;
  --mat-icon-button-state-layer-color: transparent;
  --mdc-icon-button-state-layer-size: 2.75rem;
  --mdc-icon-button-icon-size: 1.5rem;
}

html[data-page] .mat-calendar-header .mat-mdc-icon-button .mat-focus-indicator {
  border: 1px solid var(--datepicker-calendar-navigation-button-outline-color, transparent);
  box-shadow: 0 0 0 .1875rem var(--datepicker-calendar-navigation-button-shadow-color, transparent);
  transition: all .1s ease-out; 
}

html[data-page] .mat-calendar-header .mat-mdc-icon-button:focus-visible .mat-focus-indicator {
  --datepicker-calendar-navigation-button-shadow-color: var(--colors-brand-primary-100a, lch(80.36% 82.85 77.93/19%));
  --datepicker-calendar-navigation-button-outline-color: var(--colors-neutral-800, #09090a);
}

html[data-page] .mat-calendar-header .mat-ripple,
html[data-page] .mat-calendar-header .mat-ripple-element {
  display: none;
}

html[data-page] .mat-calendar-controls {
  margin: unset;
}

html[data-page] .mat-calendar-header .mat-mdc-button {
  --mdc-text-button-container-height: var(--spacing-40, 2rem);
  --mdc-text-button-container-shape: var(--radius-full, 99rem);
  color: var(--mat-datepicker-calendar-period-button-text-color, var(--mat-sys-on-surface-variant));
  text-decoration: unset;
  border-radius: var(--mdc-text-button-container-shape) !important;
}

html[data-page] .mat-calendar-header .mat-mdc-button:focus-visible {
  outline: unset;
}

html[data-page] .mat-calendar-header .mat-mdc-button .mat-mdc-button-touch-target {
  height: 2.75rem;
}

html[data-page] .mat-calendar-header .mat-calendar-period-button {
  font-family: var(--Font-Family-Font-Family, "RM Neue");
  font-size: var(--body-small, .875rem);
  font-style: normal;
  font-weight: 600;
  height: auto;
  line-height: 140%;
  margin: auto;
  padding: var(--spacing-10) var(--mat-text-button-horizontal-padding, 1rem);
}

html[data-page] .mat-calendar-header .mat-calendar-period-button .mat-focus-indicator {
  border: .0625rem solid var(--datepicker-calendar-period-button-outline-color, transparent);
  border-radius: inherit;
  box-shadow: 0 0 0 .1875rem var(--datepicker-calendar-period-button-shadow-color, transparent);
  transition: all .1s ease-out;
}

html[data-page] .mat-calendar-header .mat-calendar-period-button:focus .mat-focus-indicator,
html[data-page] .mat-calendar-header .mat-calendar-period-button:hover .mat-focus-indicator {
  --datepicker-calendar-period-button-shadow-color: var(--colors-brand-primary-100a, lch(80.36% 82.85 77.93/19%));
  --datepicker-calendar-period-button-outline-color: var(--colors-cta-primary-default, #FCBE31);
}

html[data-page] .mat-calendar-header .mat-calendar-period-button:focus-visible .mat-focus-indicator {
  --datepicker-calendar-period-button-shadow-color: var(--colors-brand-primary-100a, lch(80.36% 82.85 77.93/19%));
  --datepicker-calendar-period-button-outline-color: var(--colors-neutral-800, #09090a);
}

html[data-page] .mat-calendar-header .mat-calendar-period-button .mat-calendar-arrow {
  margin-left: var(--spacing-10);
}

html[data-page] .mat-calendar-header button[mat-icon-button] {
  background-color: unset;
  transition: all .1s ease-out;
}

html[data-page] .mat-calendar-header button[mat-icon-button]:hover, 
html[data-page] .mat-calendar-header button[mat-icon-button]:focus {
  box-shadow: unset;
}

html[data-page] .mat-calendar-content {
  padding: 0 var(--spacing-20, 1rem) var(--spacing-20, 1rem);
}

html[data-page] .mat-calendar-table-header th {
  padding-bottom: var(--spacing-20, 1rem);
}

html[data-page] .mat-calendar-table-header-divider::after {
  left: 0;
  right: 0;
}

html[data-page] .mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
  color: var(--colors-body-cta-brand, #A0560F);
}

html[data-page] .mat-calendar-content button:not(.mat-calendar-body-disabled):focus-visible {
  outline: 0 none !important;
}

html[data-page] .mat-calendar-content button .mat-calendar-body-cell-content {
  box-shadow: 0 0 0 .1875rem var(--datepicker-calendar-date-shadow-color, transparent);
  transition: all .1s ease-out;
}

html[data-page] .mat-calendar-content button:not(.mat-calendar-body-disabled):focus .mat-calendar-body-cell-content,
html[data-page] .mat-calendar-content button:not(.mat-calendar-body-disabled):hover .mat-calendar-body-cell-content {
  --datepicker-calendar-date-shadow-color: var(--colors-brand-primary-100a, lch(80.36% 82.85 77.93/19%));
  --mat-datepicker-calendar-date-outline-color: var(--colors-cta-primary-default, #FCBE31);
  --mat-datepicker-calendar-date-today-outline-color: var(--mat-datepicker-calendar-date-outline-color);
}

html[data-page] .mat-calendar-content button:not(.mat-calendar-body-disabled):focus-visible .mat-calendar-body-cell-content {
  --datepicker-calendar-date-shadow-color: var(--colors-brand-primary-100a, lch(80.36% 82.85 77.93/19%));
  --mat-datepicker-calendar-date-outline-color: var(--colors-neutral-800, #09090a);
  --mat-datepicker-calendar-date-today-outline-color: var(--mat-datepicker-calendar-date-outline-color);
}

html[data-page] .mat-datepicker-content .mat-datepicker-close-button {
  background-color: var(--colors-cta-secondary-default);
  box-shadow: var(--shadow, 0 .1875rem .9375rem 0 rgba(0, 0, 0, .1));
  color: var(--colors-body-cta-secondary);
  height: auto;
  left: 50%;
  line-height: 140%;
  margin-top: var(--spacing-15, .75rem);
  padding: var(--spacing-10) var(--spacing-30);
  transform: translate(-50%, 0);
}