@open-inwoner/design-tokens/dist/css/index.css

Design tokens for Open Inwoner

/**
 * Do not edit directly, this file was auto-generated.
 */

.openinwoner-theme {
  --oip-color-primary: hsl(var(--oip-color-primary-h), var(--oip-color-primary-s), var(--oip-color-primary-l)); /** The primary color #0065BD makes up a large part of the theme, it is used in buttons for example. */
  --oip-color-primary-h: 210; /** Primary color hue value */
  --oip-color-primary-s: 100%; /** Primary color saturation value */
  --oip-color-primary-l: 37%; /** Primary color lightness value */
  --oip-color-primary-lighter: hsl(var(--oip-color-primary-h), var(--oip-color-primary-s), calc(var(--oip-color-primary-l) + 30%)); /** Lighter version of primary color */
  --oip-color-primary-darker: hsl(var(--oip-color-primary-h), var(--oip-color-primary-s), calc(var(--oip-color-primary-l) - 10%)); /** Darker version of primary color */
  --oip-color-secondary: hsl(var(--oip-color-secondary-h), var(--oip-color-secondary-s), var(--oip-color-secondary-l)); /** The secondary color #006A0F compliments the primary color and serves as the default for text-links. */
  --oip-color-secondary-h: 207; /** Secondary color hue value */
  --oip-color-secondary-s: 80%; /** Secondary color saturation value */
  --oip-color-secondary-l: 35%; /** Secondary color lightness value */
  --oip-color-secondary-darker: hsl(var(--oip-color-secondary-h), var(--oip-color-secondary-s), calc(var(--oip-color-secondary-l) - 10%)); /** Darker version of secondary color */
  --oip-color-accent: hsl(var(--oip-color-accent-h), var(--oip-color-accent-s), var(--oip-color-accent-l)); /** The accent color #E10019 is usually the main identity color for a municipality */
  --oip-color-accent-h: 50; /** Accent color hue value */
  --oip-color-accent-s: 94%; /** Accent color saturation value */
  --oip-color-accent-l: 57%; /** Accent color lightness value */
  --oip-color-accent-darker: hsl(var(--oip-color-accent-h), var(--oip-color-accent-s), calc(var(--oip-color-accent-l) - 10%)); /** Darker version of accent color */
  --oip-color-accent-lighter: hsl(var(--oip-color-accent-h), var(--oip-color-accent-s), calc(var(--oip-color-accent-l) + 10%)); /** Lighter version of accent color */
  --oip-color-info: #2566A7; /** The dark blue text color for informational states and/or messages. */
  --oip-color-info-light: #D5E6F6; /** The light blue background color for informational states and/or messages. */
  --oip-color-success: #4A7746; /** The dark green text color for success states and/or messages. */
  --oip-color-success-light: #ecf4ec; /** The light green background color for success states and/or messages. */
  --oip-color-warning: #704000; /** The dark orange text color for warning states and/or messages. */
  --oip-color-warning-light: #ffdcad; /** The light orange background color for warning states and/or messages. */
  --oip-color-danger: #5c000f; /** The dark red text color for error/critical states and/or messages. */
  --oip-color-danger-h: 34; /** Danger color hue value */
  --oip-color-danger-s: 100%; /** Danger color saturation value */
  --oip-color-danger-l: 27%; /** Danger color lightness value */
  --oip-color-danger-light: hsl(var(--oip-color-danger-h), var(--oip-color-danger-s), calc(var(--oip-color-danger-l) + 13%)); /** The light red background color for error/critical states and/or messages. */
  --oip-color-danger-lightest: hsl(var(--oip-color-danger-h), var(--oip-color-danger-s), calc(var(--oip-color-danger-l) + 57%)); /** Lightest version of danger color */
  --oip-color-bg: #ffffff; /** Background color for the (main) user interface. */
  --oip-color-fg: #4b4b4b; /** Blackish/gray-dark foreground color for the (main) user interface. */
  --oip-color-fg-font-primary: #ffffff; /** White font color for texts inside primary buttons. */
  --oip-color-fg-font-secondary: #ffffff; /** White font color for texts inside secondary buttons. */
  --oip-color-fg-font-accent: #4b4b4b; /** Dark gray font color for texts inside areas with a very light accent color as a light background-color. */
  --oip-color-fg-lighter: #676767; /** Blackish 90% gray foreground color for lighter text elements (eg date). */
  --oip-color-fg-muted: #757575; /** Font/foreground color for non-actionable or less-important content. */
  --oip-color-fg-heading: #000000; /** Black foreground color for fully black elements, like headings. */
  --oip-color-border: #d2d2d2; /** Default color for borders. */
  --oip-color-gray: #d2d2d2; /** Default 80% gray for borders. */
  --oip-color-gray-lighter: #7a7a7a; /** Default light-gray for table text. */
  --oip-color-gray-lightest: #f3f3f3; /** Very lightest gray for hover styles. */
  --oip-color-red-notification: #e50026; /** The bright red color for notification badges and texts. */
  --oip-layout-bg: #FFFFFF;
  --oip-spacing-tiny: 2px;
  --oip-spacing-small: 4px;
  --oip-spacing-medium: 8px;
  --oip-spacing-large: 16px;
  --oip-spacing-extra-large: 24px;
  --oip-spacing-giant: 32px;
  --oip-spacing-mega: 80px;
  --oip-heading-font-family: "Heading", "Arial", sans-serif;
  --oip-text-margin: 20px;
  --oip-text-font-size: 16px;
  --oip-text-big-font-size: 24px;
  --oip-text-small-font-size: 0.875rem;
  --oip-text-line-height: 24px;
  --oip-typography-sans-serif-font-family: "Body", "Arial", sans-serif;
  --oip-typography-heading-font-family: "Heading", "Arial", sans-serif;
  --oip-accordion-margin-block-start: 40px;
  --oip-accordion-margin-block-end: 0;
  --oip-accordion-heading-font-size: 20px;
  --oip-accordion-heading-font-weight: bold;
  --oip-accordion-heading-line-height: initial;
  --oip-accordion-heading-margin-block-start: 0;
  --oip-accordion-heading-margin-block-end: 0;
  --oip-accordion-heading-margin-inline-start: 0;
  --oip-accordion-heading-margin-inline-end: 0;
  --oip-accordion-summary-border-bottom-width: 1px;
  --oip-accordion-summary-border-bottom-style: solid;
  --oip-accordion-summary-font-size: 16px;
  --oip-accordion-summary-font-weight: normal;
  --oip-accordion-summary-line-height: initial;
  --oip-accordion-summary-margin-block-end: 8px;
  --oip-accordion-summary-padding-block-start: 16px;
  --oip-accordion-summary-padding-block-end: 8px;
  --oip-combobox-border-radius: 3px;
  --oip-combobox-border-style: solid;
  --oip-combobox-border-width: 1px;
  --oip-combobox-display: block;
  --oip-combobox-inline-size: 100%;
  --oip-combobox-font-weight: normal;
  --oip-combobox-line-height: initial;
  --oip-combobox-max-inline-size: 550px;
  --oip-combobox-position: relative;
  --oip-combobox-popover-border-style: solid;
  --oip-combobox-popover-border-width: 1px;
  --oip-combobox-popover-margin-block-start: 0;
  --oip-combobox-popover-margin-block-end: 0;
  --oip-combobox-popover-margin-inline-start: 0;
  --oip-combobox-popover-margin-inline-end: 0;
  --oip-combobox-popover-padding-block-end: 0;
  --oip-combobox-popover-padding-block-start: 0;
  --oip-combobox-popover-padding-inline-end: 0;
  --oip-combobox-popover-padding-inline-start: 0;
  --oip-combobox-popover-background-color: #FFFFFF;
  --oip-combobox-popover-block-size: fit-content;
  --oip-combobox-popover-inline-size: fit-content;
  --oip-combobox-popover-inset: 0;
  --oip-combobox-popover-overflow: auto;
  --oip-combobox-popover-position: static;
  --oip-combobox-popover-z-index: 1;
  --oip-combobox-popover-block-end-inset-block-start: 100%;
  --oip-combobox-popover-hidden-display: none !important;
  --oip-combobox-popover-listbox-list-margin-block-start: 0;
  --oip-combobox-popover-listbox-list-margin-block-end: 0;
  --oip-combobox-popover-listbox-list-margin-inline-start: 0;
  --oip-combobox-popover-listbox-list-margin-inline-end: 0;
  --oip-combobox-popover-listbox-list-padding-block-end: 0;
  --oip-combobox-popover-listbox-list-padding-block-start: 0;
  --oip-combobox-popover-listbox-list-padding-inline-end: 0;
  --oip-combobox-popover-listbox-list-padding-inline-start: 0;
  --oip-combobox-popover-listbox-list-option-selected-icon-size: 16px;
  --oip-combobox-icon-size: 16px;
  --oip-external-link-background-color: #ffffff;
  --oip-external-link-color: #000000;
  --oip-external-link-border-radius: 3px;
  --oip-external-link-border-style: solid;
  --oip-external-link-border-width: 1px;
  --oip-external-link-box-shadow: none;
  --oip-external-link-display: flex;
  --oip-external-link-flex-direction: row;
  --oip-external-link-font-weight: bold;
  --oip-external-link-align-items: center;
  --oip-external-link-row-gap: 8px;
  --oip-external-link-column-gap: 32px;
  --oip-external-link-text-decoration: none;
  --oip-external-link-hover-background-color: #ffffff;
  --oip-external-link-hover-text-decoration-thickness: bold;
  --oip-external-link-hover-border-style: solid;
  --oip-external-link-hover-border-width-block-start: 1px;
  --oip-external-link-hover-border-width-block-end: 1px;
  --oip-external-link-hover-border-width-inline-start: 3px;
  --oip-external-link-hover-border-width-inline-end: 1px;
  --oip-external-link-hover-border-radius: 3px;
  --oip-external-link-hover-margin-inline-start: -2px;
  --oip-external-link-focus-visible-background-color: #f3f3f3;
  --oip-external-link-focus-visible-text-decoration-thickness: bold;
  --oip-external-link-body-margin-block-start: 0;
  --oip-external-link-body-margin-block-end: 0;
  --oip-external-link-body-margin-inline-start: 0;
  --oip-external-link-body-margin-inline-end: 0;
  --oip-external-link-body-padding-block-start: 24px;
  --oip-external-link-body-padding-block-end: 24px;
  --oip-external-link-body-padding-inline-start: 16px;
  --oip-external-link-body-padding-inline-end: 16px;
  --oip-external-link-list-margin-block-start: 24px;
  --oip-external-link-list-margin-block-end: 0;
  --oip-external-link-list-margin-inline-start: 0;
  --oip-external-link-list-margin-inline-end: 0;
  --oip-external-link-list-padding-block-start: 0;
  --oip-external-link-list-padding-block-end: 0;
  --oip-external-link-list-padding-inline-start: 0;
  --oip-external-link-list-padding-inline-end: 0;
  --oip-external-link-list-item-margin-block-start: 0;
  --oip-external-link-list-item-margin-block-end: 0;
  --oip-external-link-list-item-margin-inline-start: 0;
  --oip-external-link-list-item-margin-inline-end: 0;
  --oip-external-link-list-item-padding-block-start: 0;
  --oip-external-link-list-item-padding-block-end: 0;
  --oip-external-link-list-item-padding-inline-start: 0;
  --oip-external-link-list-item-padding-inline-end: 0;
  --oip-external-link-list-item-border-radius: 3px;
  --oip-external-link-list-item-border-style: solid;
  --oip-external-link-list-item-border-width: 1px;
  --oip-external-link-custom-icon-color: #000000;
  --oip-external-link-custom-icon-display: inline-block;
  --oip-external-link-custom-icon-font-size: 24px;
  --oip-external-link-custom-icon-margin-block-start: 4px;
  --oip-external-link-custom-icon-margin-block-end: 0;
  --oip-external-link-custom-icon-margin-inline-start: 0;
  --oip-external-link-custom-icon-margin-inline-end: 8px;
  --oip-external-link-custom-icon-padding-block-start: 0;
  --oip-external-link-custom-icon-padding-block-end: 0;
  --oip-external-link-custom-icon-padding-inline-start: 0;
  --oip-external-link-custom-icon-padding-inline-end: 0;
  --oip-external-link-content-color: #000000;
  --oip-external-link-content-font-size: 20px;
  --oip-external-link-content-margin-block-start: 0;
  --oip-external-link-content-margin-block-end: 0;
  --oip-external-link-content-margin-inline-start: 0;
  --oip-external-link-content-margin-inline-end: 0;
  --oip-external-link-content-padding-block-start: 0;
  --oip-external-link-content-padding-block-end: 0;
  --oip-external-link-content-padding-inline-start: 0;
  --oip-external-link-content-padding-inline-end: 0;
  --oip-external-link-arrow-icon-font-size: 16px;
  --oip-external-link-arrow-icon-margin-block-start: 0;
  --oip-external-link-arrow-icon-margin-block-end: 0;
  --oip-external-link-arrow-icon-margin-inline-start: auto; /** Make icon align to the relative end inside a flex-box. */
  --oip-external-link-arrow-icon-margin-inline-end: 0;
  --oip-external-link-arrow-icon-padding-block-start: 0;
  --oip-external-link-arrow-icon-padding-block-end: 0;
  --oip-external-link-arrow-icon-padding-inline-start: 0;
  --oip-external-link-arrow-icon-padding-inline-end: 0;
  --oip-fieldset-horizontal-display: flex;
  --oip-fieldset-horizontal-flex-direction: row;
  --oip-fieldset-horizontal-gap: 7px;
  --oip-fieldset-horizontal-margin-block-end: 20px;
  --oip-filter-button-border-radius: 3px;
  --oip-filter-button-font-weight: 400;
  --oip-filter-button-padding: 10px 12px;
  --oip-filter-button-min-width: 204px;
  --oip-filter-button-max-width: 220px;
  --oip-filter-button-icon-size: 20px;
  --oip-filter-button-active-active: 600;
  --oip-filter-choices-border-radius: 3px;
  --oip-filter-choices-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  --oip-filter-dropdown-min-width: 200px;
  --oip-filter-title-font-weight: 400;
  --oip-filter-option-border-color: transparent;
  --oip-filter-option-border-radius: 3px;
  --oip-filter-option-padding-inline: 12px;
  --oip-filter-option-padding-block: 8px;
  --oip-filter-option-gap: 8px;
  --oip-filter-option-icon-size: 24px;
  --oip-filter-chips-clear-button-font-weight: 400;
  --oip-filter-modal-padding: 1rem;
  --oip-filter-modal-gap: 2rem;
  --oip-filter-modal-border-radius: 8px;
  --oip-filter-modal-header-gap: 2rem;
  --oip-filter-modal-heading-font-size: 18px;
  --oip-filter-modal-heading-font-weight: 500;
  --oip-filter-modal-close-button-size: 32px;
  --oip-filter-modal-content-gap: 32px;
  --oip-filter-modal-footer-padding-bottom: 32px;
  --oip-filter-modal-backdrop-background-color: rgb(0 0 0 / 0.4);
  --oip-filter-bar-background-color: transparent;
  --oip-filter-bar-border-radius: 3px;
  --oip-filter-bar-gap: 1rem;
  --oip-filter-bar-padding-block-start: 1rem;
  --oip-filter-bar-padding-block-end: 1rem;
  --oip-filter-bar-padding-inline-start: 1rem;
  --oip-filter-bar-padding-inline-end: 1rem;
  --oip-filter-bar-label-color: #000;
  --oip-filter-bar-label-font-weight: 400;
  --oip-filter-chip-background-color: transparent;
  --oip-filter-chip-border-radius: 3px;
  --oip-filter-chip-font-size: 14px;
  --oip-filter-chip-gap: 8px;
  --oip-filter-chip-line-height: 20px;
  --oip-filter-chip-padding-block-start: 8px;
  --oip-filter-chip-padding-block-end: 8px;
  --oip-filter-chip-padding-inline-start: 8px;
  --oip-filter-chip-padding-inline-end: 8px;
  --oip-filter-chip-desktop-padding-block-start: 8px;
  --oip-filter-chip-desktop-padding-block-end: 8px;
  --oip-filter-chip-desktop-padding-inline-start: 1rem;
  --oip-filter-chip-desktop-padding-inline-end: 1rem;
  --oip-filter-chip-group-font-weight: 600;
  --oip-filter-chip-label-font-weight: 400;
  --oip-filter-chip-remove-icon-size: 16px;
  --oip-plugin-card-background-color: #ffffff;
  --oip-plugin-card-color: #4b4b4b;
  --oip-plugin-card-max-inline-size: 100%;
  --oip-plugin-card-border-style: solid;
  --oip-plugin-card-border-width: 1px;
  --oip-plugin-card-border-radius: 3px;
  --oip-plugin-card-box-shadow: none;
  --oip-plugin-card-inline-size: 100%;
  --oip-plugin-card-row-gap: 24px;
  --oip-plugin-card-heading-padding-inline-start: 16px;
  --oip-plugin-card-heading-padding-inline-end: 16px;
  --oip-plugin-card-hover-background-color: #ffffff;
  --oip-plugin-card-hover-color: #4b4b4b;
  --oip-plugin-card-hover-border-style: solid;
  --oip-plugin-card-hover-border-width-block-start: 1px;
  --oip-plugin-card-hover-border-width-block-end: 1px;
  --oip-plugin-card-hover-border-width-inline-start: 3px;
  --oip-plugin-card-hover-border-width-inline-end: 1px;
  --oip-plugin-card-hover-border-radius: 3px;
  --oip-plugin-card-hover-box-shadow: none;
  --oip-plugin-card-hover-margin-inline-start: -2px;
  --oip-plugin-card-link-padding: 0;
  --oip-plugin-card-link-hover-text-decoration-thickness: 1px;
  --oip-plugin-card-link-hover-text-decoration-line: underline;
  --oip-plugin-card-link-hover-text-underline-offset: auto;
  --oip-plugin-card-content-gap: 24px;
  --oip-plugin-card-content-padding-block-start: 24px;
  --oip-plugin-card-content-padding-block-end: 24px;
  --oip-plugin-card-content-padding-inline-start: 16px;
  --oip-plugin-card-content-padding-inline-end: 16px;
  --oip-plugin-card-body-padding-inline-start: 16px;
  --oip-plugin-card-body-padding-inline-end: 16px;
  --oip-plugin-card-list-grid-template-columns: repeat(1, 1fr);
  --oip-plugin-card-list-grid-template-columns-desktop: repeat(2, 1fr);
  --oip-plugin-card-list-list-style-type: none;
  --oip-plugin-card-list-margin-block-start: 0;
  --oip-plugin-card-list-margin-block-end: 0;
  --oip-plugin-card-list-padding-inline-start: 0;
  --oip-plugin-card-list-grid-row-gap: 8px;
  --oip-plugin-card-list-grid-column-gap: 32px;
  --oip-plugin-header-margin-block-start: 0;
  --oip-plugin-header-margin-block-end: 0;
  --oip-plugin-header-margin-inline-start: 0;
  --oip-plugin-header-margin-inline-end: 0;
  --oip-plugin-header-padding-block-start: 0;
  --oip-plugin-header-padding-block-end: 0;
  --oip-plugin-header-padding-inline-start: 0;
  --oip-plugin-header-padding-inline-end: 24px;
  --oip-plugin-header-align-items: center;
  --oip-plugin-header-word-break-mobile: normal;
  --oip-plugin-header-overflow-wrap-mobile: break-word;
  --oip-plugin-header-indicator-notification-indicator-font-size: 12px;
  --oip-plugin-header-indicator-notification-indicator-vertical-align: super;
  --oip-plugin-header-indicator-display-inline: inline-block;
  --oip-plugin-header-indicator-overflow: visible;
  --oip-plugin-header-indicator-position: relative;
  --oip-plugin-header-heading-margin-block-start: 0;
  --oip-plugin-header-heading-margin-block-end: 0;
  --oip-plugin-header-heading-margin-inline-start: 0;
  --oip-plugin-header-heading-margin-inline-end: 0;
  --oip-plugin-header-heading-padding-block-start: 0;
  --oip-plugin-header-heading-padding-block-end: 0;
  --oip-plugin-header-heading-padding-inline-start: 0;
  --oip-plugin-header-heading-padding-inline-end: 0;
  --oip-plugin-grid-list-style-type: none;
  --oip-plugin-grid-margin-block-start: 0;
  --oip-plugin-grid-margin-block-end: 0;
  --oip-plugin-grid-padding-inline-start: 0;
  --oip-plugin-grid-padding-inline-end: 0;
  --oip-plugin-grid-row-gap: 16px;
  --oip-plugin-grid-column-gap: 32px;
  --oip-utrecht-unordered-list-marker-content: none;
  --oip-utrecht-unordered-list-nested-margin-inline-start: 0;
  --oip-utrecht-unordered-list-nested-padding-inline-start: 16px;
  --denhaag-action-border-style: solid;
  --denhaag-action-border-width: 1px;
  --denhaag-action-padding-block-start: 12px;
  --denhaag-action-padding-block-end: 12px;
  --denhaag-action-lg-padding-block-start: 16px;
  --denhaag-action-lg-padding-block-end: 16px;
  --denhaag-action-gap: 8px;
  --denhaag-action-lg-gap: 16px;
  --denhaag-action-actions-gap: 16px;
  --denhaag-action-link-icon-width: 16px;
  --denhaag-file-border-width: 1px;
  --denhaag-file-border-style: solid;
  --denhaag-file-focus-outline-width: 1px;
  --denhaag-file-focus-outline-style: solid;
  --denhaag-file-link-icon-width: 20px;
  --denhaag-side-navigation-display: flex;
  --denhaag-side-navigation-flex-direction: column;
  --denhaag-side-navigation-min-width: 14.5rem;
  --denhaag-side-navigation-row-gap: 30px;
  --denhaag-side-navigation-mobile-display: none;
  --denhaag-side-navigation-item-font-weight: normal;
  --denhaag-side-navigation-item-height: 48px;
  --denhaag-side-navigation-item-line-height: 1.5;
  --denhaag-side-navigation-item-margin-block-start: 0;
  --denhaag-side-navigation-item-margin-block-end: 0;
  --denhaag-side-navigation-item-margin-inline-start: 0;
  --denhaag-side-navigation-item-margin-inline-end: 0;
  --denhaag-side-navigation-link-label-gap: 30px;
  --denhaag-side-navigation-link-padding-block-start: 12px;
  --denhaag-side-navigation-link-padding-block-end: 12px;
  --denhaag-side-navigation-link-active-font-weight: bold;
  --nl-number-badge-background-color: #f3f3f3;
  --nl-number-badge-border-color: #f3f3f3;
  --nl-number-badge-border-radius: 3px;
  --nl-number-badge-border-width: 1px;
  --nl-number-badge-font-weight: bold;
  --nl-number-badge-min-size: 1em;
  --nl-number-badge-min-block-size: 1em;
  --nl-number-badge-min-inline-size: max-content;
  --nl-number-badge-padding-block: 0.5em;
  --nl-number-badge-padding-inline: 0.5em;
  --nl-paragraph-font-weight: normal;
  --nl-paragraph-line-height: 1.5;
  --nl-paragraph-margin-block-end: 0;
  --nl-paragraph-margin-block-start: 0;
  --nl-paragraph-lead-font-size: 1.25rem;
  --nl-paragraph-lead-font-weight: normal;
  --nl-paragraph-lead-line-height: 1.4286;
  --nl-paragraph-lead-margin-block-end: 0;
  --nl-paragraph-lead-margin-block-start: 0;
  --utrecht-button-background-color: transparent;
  --utrecht-button-border-color: transparent;
  --utrecht-button-border-radius: 3px;
  --utrecht-button-border-width: 1px;
  --utrecht-button-cursor: pointer;
  --utrecht-button-min-block-size: 0;
  --utrecht-button-min-inline-size: 0;
  --utrecht-button-padding-block-start: 16px;
  --utrecht-button-padding-block-end: 16px;
  --utrecht-button-padding-inline-start: 32px;
  --utrecht-button-padding-inline-end: 32px;
  --utrecht-button-focus-border-color: transparent;
  --utrecht-button-hover-background-color: transparent;
  --utrecht-button-hover-border-color: transparent;
  --utrecht-button-primary-action-color: #ffffff;
  --utrecht-button-primary-action-hover-color: #ffffff;
  --utrecht-button-primary-action-focus-color: #ffffff;
  --utrecht-button-secondary-action-color: #ffffff;
  --utrecht-button-secondary-action-hover-color: #ffffff;
  --utrecht-button-secondary-action-focus-color: #ffffff;
  --utrecht-button-disabled-color: #ffffff;
  --utrecht-form-fieldset-margin-block-end: 0;
  --utrecht-form-fieldset-margin-block-start: 0;
  --utrecht-form-fieldset-section-background-color: #FFFFFF;
  --utrecht-form-fieldset-legend-font-weight: normal;
  --utrecht-form-fieldset-legend-line-height: 21px;
  --utrecht-form-fieldset-legend-margin-block-end: 0;
  --utrecht-form-fieldset-legend-margin-block-start: 0;
  --utrecht-form-label-font-weight: normal;
  --utrecht-form-label-font-size: 16px;
  --utrecht-heading-font-weight: bold;
  --utrecht-heading-margin-block-end: 0;
  --utrecht-heading-margin-block-start: 0;
  --utrecht-heading-1-font-size: 32px;
  --utrecht-heading-1-font-weight: bold;
  --utrecht-heading-1-line-height: 41px;
  --utrecht-heading-1-margin-block-end: 0;
  --utrecht-heading-1-margin-block-start: 40px;
  --utrecht-heading-2-font-size: 24px;
  --utrecht-heading-2-font-weight: bold;
  --utrecht-heading-2-letter-spacing: normal;
  --utrecht-heading-2-line-height: 34px;
  --utrecht-heading-2-margin-block-end: 0;
  --utrecht-heading-2-margin-block-start: 0;
  --utrecht-heading-3-font-size: 20px;
  --utrecht-heading-3-font-weight: bold;
  --utrecht-heading-3-line-height: 30px;
  --utrecht-heading-3-margin-block-end: 0;
  --utrecht-heading-3-margin-block-start: 0;
  --utrecht-heading-4-font-size: 16px;
  --utrecht-heading-4-font-weight: bold;
  --utrecht-heading-4-line-height: 26px;
  --utrecht-heading-4-margin-block-end: 0;
  --utrecht-heading-4-margin-block-start: 0;
  --utrecht-link-list-margin-block-start: 0;
  --utrecht-link-list-margin-block-end: 0;
  --utrecht-link-list-row-gap: 8px;
  --utrecht-link-list-link-column-gap: 8px;
  --utrecht-link-list-link-font-weight: bold;
  --utrecht-link-list-link-text-decoration: none;
  --utrecht-link-list-icon-size: 14px;
  --utrecht-listbox-background-color: transparent;
  --utrecht-listbox-border-color: transparent;
  --utrecht-listbox-border-radius: 3px;
  --utrecht-listbox-border-width: 1px;
  --utrecht-listbox-font-weight: 16px;
  --utrecht-listbox-inline-size: fit-content;
  --utrecht-listbox-max-block-size: 550px;
  --utrecht-listbox-padding-block-end: 8px;
  --utrecht-listbox-padding-block-start: 8px;
  --utrecht-listbox-padding-inline-end: 12px;
  --utrecht-listbox-padding-inline-start: 0;
  --utrecht-listbox-group-margin-block-end: 0;
  --utrecht-listbox-group-label-font-weight: normal;
  --utrecht-listbox-group-label-margin-inline-start: 8px;
  --utrecht-listbox-option-background-color: #ffffff;
  --utrecht-listbox-option-min-block-size: 100px;
  --utrecht-listbox-option-padding-block-end: 16px;
  --utrecht-listbox-option-padding-block-start: 16px;
  --utrecht-listbox-option-padding-inline-end: 16px;
  --utrecht-listbox-option-padding-inline-start: 16px;
  --utrecht-listbox-option-disabled-background-color: #eeeeee;
  --utrecht-listbox-option-disabled-color: #ffffff;
  --utrecht-listbox-option-selected-background-color: #ffffff;
  --utrecht-listbox-option-selected-disabled-background-color: #eeeeee;
  --utrecht-listbox-option-icon-size: 16px;
  --utrecht-ordered-list-margin-block-start: 0;
  --utrecht-ordered-list-margin-block-end: 0;
  --utrecht-ordered-list-padding-inline-start: 16px;
  --utrecht-ordered-list-item-margin-block-start: 4px;
  --utrecht-ordered-list-item-margin-block-end: 4px;
  --utrecht-ordered-list-item-padding-inline-start: 0;
  --utrecht-select-background-color: #ffffff;
  --utrecht-select-border-bottom-width: 1px;
  --utrecht-select-border-radius: 3px;
  --utrecht-select-border-width: 1px;
  --utrecht-select-font-weight: normal;
  --utrecht-select-line-height: initial;
  --utrecht-select-min-block-size: 36px;
  --utrecht-select-max-inline-size: 500px;
  --utrecht-select-padding-block-end: 0;
  --utrecht-select-padding-block-start: 0;
  --utrecht-select-padding-inline-end: 0;
  --utrecht-select-padding-inline-start: 0;
  --utrecht-skip-link-color: #fff;
  --utrecht-skip-link-min-block-size: 0;
  --utrecht-skip-link-min-inline-size: 0;
  --utrecht-skip-link-padding-block-start: 24px;
  --utrecht-skip-link-padding-block-end: 24px;
  --utrecht-skip-link-padding-inline-start: 16px;
  --utrecht-skip-link-padding-inline-end: 16px;
  --utrecht-skip-link-text-decoration: underline;
  --utrecht-skip-link-z-index: 5000;
  --utrecht-skip-link-focus-color: #fff;
  --utrecht-skip-link-focus-text-decoration: underline;
  --utrecht-skip-link-focus-visible-color: #fff;
  --utrecht-skip-link-focus-visible-text-decoration: underline;
  --utrecht-table-border-color: transparent;
  --utrecht-table-border-width: 0;
  --utrecht-table-font-size: 16px;
  --utrecht-table-line-height: 24px;
  --utrecht-table-margin-block-end: 0;
  --utrecht-table-margin-block-start: 0;
  --utrecht-table-caption-font-weight: 700;
  --utrecht-table-caption-font-size: 16px;
  --utrecht-table-caption-color: #000000;
  --utrecht-table-caption-line-height: 130%;
  --utrecht-table-caption-text-align: left;
  --utrecht-table-caption-margin-block-end: 0;
  --utrecht-table-header-font-weight: bold;
  --utrecht-table-header-background-color: transparent;
  --utrecht-table-header-color: #000000;
  --utrecht-table-header-text-transform: none;
  --utrecht-table-header-border-block-end-width: 2px;
  --utrecht-table-header-sticky-background-color: transparent;
  --utrecht-table-header-sticky-color: #000000;
  --utrecht-table-header-sticky-border-block-end-width: 2px;
  --utrecht-table-footer-background-color: #ffffff;
  --utrecht-table-footer-color: #000000;
  --utrecht-table-footer-sticky-color: #000000;
  --utrecht-table-header-cell-font-size: 16px;
  --utrecht-table-header-cell-font-weight: bold;
  --utrecht-table-header-cell-color: #000000;
  --utrecht-table-header-cell-text-transform: none;
  --utrecht-table-cell-line-height: 24px;
  --utrecht-table-cell-padding-block-end: 12px;
  --utrecht-table-cell-padding-block-start: 12px;
  --utrecht-table-cell-padding-inline-end: 8px;
  --utrecht-table-cell-padding-inline-start: 8px;
  --utrecht-table-cell-selected-color: #000000;
  --utrecht-table-cell-icon-size: 16px;
  --utrecht-table-row-border-block-end-width: 1px;
  --utrecht-table-row-padding-inline-end: 8px;
  --utrecht-table-row-padding-inline-start: 8px;
  --utrecht-table-row-alternate-odd-background-color: #FFFFFF;
  --utrecht-textbox-background-color: transparent;
  --utrecht-textbox-border-block-end-width: 1px;
  --utrecht-textbox-border-bottom-width: 1px;
  --utrecht-textbox-border-color: transparent;
  --utrecht-textbox-border-radius: 3px;
  --utrecht-textbox-border-width: 1px;
  --utrecht-textbox-font-weight: normal;
  --utrecht-textbox-line-height: initial;
  --utrecht-textbox-max-inline-size: fit-content;
  --utrecht-textbox-padding-block-end: 8px;
  --utrecht-textbox-padding-block-start: 8px;
  --utrecht-textbox-padding-inline-end: 16px;
  --utrecht-textbox-padding-inline-start: 16px;
  --utrecht-textbox-focus-background-color: #ffffff;
  --utrecht-document-font-size: 16px; /** The body font-size for the theme. */
  --utrecht-document-font-weight: normal; /** The body font-weight for the theme. */
  --utrecht-document-color: #4b4b4b;
  --utrecht-document-line-height: 24px; /** Default body line-height. */
  --utrecht-typography-sans-serif-font-family: "Body", "Arial", sans-serif;
  --utrecht-typography-scale-sm-font-size: 14px;
  --utrecht-typography-scale-md-font-size: 16px;
  --utrecht-typography-scale-lg-font-size: 24px;
  --utrecht-typography-scale-xl-font-size: 20px;
  --utrecht-typography-scale-2xl-font-size: 32px;
  --utrecht-typography-scale-3xl-font-size: 40px;
  --utrecht-typography-weight-scale-bold-font-weight: bold;
  --utrecht-typography-weight-scale-normal-font-weight: normal;
  --utrecht-typography-font-style-normal: normal;
  --utrecht-typography-font-style-inherit: inherit;
  --utrecht-typography-line-height-xs: 16px;
  --utrecht-typography-line-height-sm: 22px;
  --utrecht-typography-line-height-md: 24px;
  --utrecht-typography-line-height-lg: 32px;
  --utrecht-unordered-list-margin-block-start: 0;
  --utrecht-unordered-list-margin-block-end: 0;
  --utrecht-unordered-list-padding-inline-start: 0;
  --utrecht-unordered-list-item-margin-block-start: 0;
  --utrecht-unordered-list-item-margin-block-end: 0;
  --utrecht-unordered-list-item-padding-inline-start: 0;
  --utrecht-unordered-list-marker-color: transparent;
  --oip-heading-fg: var(--oip-color-fg);
  --oip-accordion-heading-color: var(--oip-color-fg);
  --oip-accordion-heading-font-family: var(--oip-typography-heading-font-family);
  --oip-accordion-summary-border-bottom-color: var(--oip-color-gray);
  --oip-accordion-summary-color: var(--oip-color-fg);
  --oip-accordion-summary-font-family: var(--oip-typography-sans-serif-font-family); /** If summary is not a true heading, the body font is used. */
  --oip-combobox-border-color: var(--oip-color-fg);
  --oip-combobox-font-family: var(--oip-typography-sans-serif-font-family);
  --oip-combobox-font-size: var(--oip-text-font-size);
  --oip-combobox-popover-border-color: var(--oip-color-fg);
  --oip-combobox-popover-color: var(--oip-color-fg);
  --oip-combobox-popover-listbox-list-option-selected-icon-color: var(--oip-color-fg);
  --oip-combobox-icon-color: var(--oip-color-fg);
  --oip-external-link-border-color: var(--oip-color-border);
  --oip-external-link-font-family: var(--oip-typography-sans-serif-font-family);
  --oip-external-link-hover-border-color: var(--oip-color-primary);
  --oip-external-link-list-item-border-color: var(--oip-color-border);
  --oip-external-link-content-font-family: var(--oip-typography-heading-font-family);
  --oip-external-link-arrow-icon-color: var(--oip-color-primary);
  --oip-filter-wrapper-gap: var(--oip-spacing-large);
  --oip-filter-wrapper-font-family: var(--oip-typography-sans-serif-font-family);
  --oip-filter-button-background-color: var(--oip-color-bg);
  --oip-filter-button-color: var(--oip-color-fg);
  --oip-filter-button-border-color: var(--oip-color-gray);
  --oip-filter-button-font-family: var(--oip-typography-sans-serif-font-family);
  --oip-filter-button-font-size: var(--oip-text-font-size);
  --oip-filter-button-gap: var(--oip-spacing-large);
  --oip-filter-button-hover-background-color: var(--oip-color-gray-lightest);
  --oip-filter-button-active-color: var(--oip-color-primary);
  --oip-filter-button-active-border-color: var(--oip-color-primary);
  --oip-filter-choices-background-color: var(--oip-color-bg);
  --oip-filter-choices-color: var(--oip-color-fg);
  --oip-filter-choices-border-color: var(--oip-color-gray);
  --oip-filter-choices-gap: var(--oip-spacing-small);
  --oip-filter-mobile-gap: var(--oip-spacing-medium);
  --oip-filter-title-font-size: var(--oip-text-font-size);
  --oip-filter-title-color: var(--oip-color-fg);
  --oip-filter-option-background-color: var(--oip-color-bg);
  --oip-filter-option-color: var(--oip-color-fg);
  --oip-filter-option-hover-background-color: var(--oip-color-gray-lightest);
  --oip-filter-option-checked-border-color: var(--oip-color-secondary);
  --oip-filter-option-checked-icon-color: var(--oip-color-secondary);
  --oip-filter-option-icon-color: var(--oip-color-fg);
  --oip-filter-option-label-color: var(--oip-color-fg);
  --oip-filter-option-label-gap: var(--oip-spacing-small);
  --oip-filter-chips-gap: var(--oip-spacing-medium);
  --oip-filter-modal-background-color: var(--oip-color-gray-lightest);
  --oip-filter-modal-heading-color: var(--oip-color-fg-heading);
  --oip-filter-bar-label-font-family: var(--oip-typography-sans-serif-font-family);
  --oip-filter-chip-border-color: var(--oip-color-primary);
  --oip-filter-chip-color: var(--oip-color-fg);
  --oip-filter-chip-desktop-font-size: var(--oip-text-font-size);
  --oip-filter-chip-desktop-line-height: var(--oip-text-line-height);
  --oip-nl-paragraph-muted-color: var(--oip-color-fg-muted);
  --oip-nl-paragraph-small-font-size: var(--oip-text-small-font-size);
  --oip-plugin-card-border-color: var(--oip-color-border);
  --oip-plugin-card-heading-color: var(--oip-color-fg-heading);
  --oip-plugin-card-hover-border-color: var(--oip-color-primary);
  --oip-plugin-header-font-family: var(--oip-typography-heading-font-family);
  --oip-plugin-header-indicator-notification-indicator-color: var(--oip-color-red-notification);
  --oip-plugin-header-heading-color: var(--oip-color-fg-heading);
  --oip-plugin-header-heading-font-family: var(--oip-typography-heading-font-family);
  --denhaag-action-background-color: var(--oip-color-bg);
  --denhaag-action-color: var(--oip-color-fg);
  --denhaag-action-border-color: var(--oip-color-border);
  --denhaag-action-single-padding-block-start: var(--denhaag-action-padding-block-start);
  --denhaag-action-single-padding-block-end: var(--denhaag-action-padding-block-end);
  --denhaag-action-single-hover-background-color: var(--oip-color-gray-lightest);
  --denhaag-action-lg-single-padding-block-start: var(--denhaag-action-lg-padding-block-start);
  --denhaag-action-lg-single-padding-block-end: var(--denhaag-action-lg-padding-block-end);
  --denhaag-action-multi-padding-block-start: var(--denhaag-action-padding-block-start);
  --denhaag-action-multi-padding-block-end: var(--denhaag-action-padding-block-end);
  --denhaag-action-lg-multi-padding-block-start: var(--denhaag-action-lg-padding-block-start);
  --denhaag-action-lg-multi-padding-block-end: var(--denhaag-action-lg-padding-block-end);
  --denhaag-action-link-icon-color: var(--oip-color-primary);
  --denhaag-file-border-color: var(--oip-color-border);
  --denhaag-file-hover-color: var(--oip-color-primary-darker);
  --denhaag-file-focus-outline-color: var(--oip-color-border);
  --denhaag-file-left-padding-inline-start: var(--oip-spacing-large);
  --denhaag-file-left-padding-inline-end: var(--oip-spacing-large);
  --denhaag-file-left-background-color: var(--oip-color-gray-lightest);
  --denhaag-file-right-gap: var(--oip-spacing-tiny);
  --denhaag-file-right-padding-block-start: var(--oip-spacing-large);
  --denhaag-file-right-padding-block-end: var(--oip-spacing-large);
  --denhaag-file-right-padding-inline-start: var(--oip-spacing-large);
  --denhaag-file-right-padding-inline-end: var(--oip-spacing-large);
  --denhaag-file-link-color: var(--oip-color-primary);
  --denhaag-file-link-gap: var(--oip-spacing-small);
  --denhaag-side-navigation-item-font-family: var(--oip-typography-sans-serif-font-family);
  --denhaag-side-navigation-item-font-size: var(--oip-text-font-size);
  --denhaag-side-navigation-link-color: var(--oip-color-fg);
  --denhaag-side-navigation-link-hover-color: var(--oip-color-primary);
  --denhaag-side-navigation-link-active-color: var(--oip-color-primary);
  --nl-number-badge-color: var(--oip-color-fg);
  --nl-number-badge-font-family: var(--oip-typography-sans-serif-font-family);
  --nl-number-badge-font-size: var(--oip-text-font-size);
  --nl-paragraph-color: var(--oip-color-fg);
  --nl-paragraph-font-family: var(--oip-typography-sans-serif-font-family);
  --nl-paragraph-font-size: var(--oip-text-font-size);
  --utrecht-button-color: var(--oip-color-secondary);
  --utrecht-button-font-size: var(--oip-text-font-size);
  --utrecht-button-font-family: var(--oip-typography-sans-serif-font-family);
  --utrecht-button-line-height: var(--oip-text-line-height);
  --utrecht-button-focus-color: var(--oip-color-secondary);
  --utrecht-button-hover-color: var(--oip-color-secondary);
  --utrecht-button-primary-action-background-color: var(--oip-color-primary);
  --utrecht-button-primary-action-border-color: var(--oip-color-primary); /** The primary button-background color determined by the configuration. */
  --utrecht-button-primary-action-hover-background-color: var(--oip-color-primary-darker);
  --utrecht-button-primary-action-hover-border-color: var(--oip-color-primary-darker);
  --utrecht-button-primary-action-focus-background-color: var(--oip-color-primary-darker);
  --utrecht-button-primary-action-focus-border-color: var(--oip-color-primary-darker);
  --utrecht-button-primary-action-warning-background-color: var(--oip-color-danger-lightest);
  --utrecht-button-primary-action-warning-border-color: var(--oip-color-danger-lightest);
  --utrecht-button-primary-action-warning-color: var(--oip-color-danger);
  --utrecht-button-primary-action-warning-hover-background-color: var(--oip-color-danger);
  --utrecht-button-primary-action-warning-hover-border-color: var(--oip-color-danger);
  --utrecht-button-primary-action-warning-hover-color: var(--oip-color-danger-lightest);
  --utrecht-button-secondary-action-background-color: var(--oip-color-secondary);
  --utrecht-button-secondary-action-border-color: var(--oip-color-secondary); /** The secondary button-background color determined by the configuration. */
  --utrecht-button-secondary-action-hover-background-color: var(--oip-color-secondary-darker);
  --utrecht-button-secondary-action-hover-border-color: var(--oip-color-secondary-darker);
  --utrecht-button-secondary-action-focus-background-color: var(--oip-color-secondary-darker);
  --utrecht-button-secondary-action-focus-border-color: var(--oip-color-secondary-darker);
  --utrecht-button-disabled-background-color: var(--oip-color-gray);
  --utrecht-button-disabled-border-color: var(--oip-color-gray); /** Default gray for disabled elements */
  --utrecht-form-fieldset-section-color: var(--oip-color-fg-lighter);
  --utrecht-form-fieldset-legend-color: var(--oip-color-fg-lighter);
  --utrecht-form-fieldset-legend-font-family: var(--oip-typography-sans-serif-font-family);
  --utrecht-form-fieldset-legend-font-size: var(--oip-text-small-font-size);
  --utrecht-form-label-color: var(--oip-color-fg);
  --utrecht-heading-color: var(--oip-color-fg-heading);
  --utrecht-heading-font-family: var(--oip-typography-heading-font-family);
  --utrecht-heading-1-color: var(--oip-color-fg-heading);
  --utrecht-heading-1-font-family: var(--oip-typography-heading-font-family);
  --utrecht-heading-2-color: var(--oip-color-fg-heading);
  --utrecht-heading-2-font-family: var(--oip-typography-heading-font-family);
  --utrecht-heading-3-color: var(--oip-color-fg-heading);
  --utrecht-heading-3-font-family: var(--oip-typography-heading-font-family);
  --utrecht-heading-4-color: var(--oip-color-fg-heading);
  --utrecht-heading-4-font-family: var(--oip-typography-heading-font-family);
  --utrecht-listbox-color: var(--oip-color-gray);
  --utrecht-listbox-group-label-color: var(--oip-color-fg);
  --utrecht-listbox-group-label-font-size: var(--oip-text-font-size);
  --utrecht-listbox-option-color: var(--oip-color-fg);
  --utrecht-listbox-option-active-background-color: var(--oip-color-gray-lightest);
  --utrecht-listbox-option-active-color: var(--oip-color-fg);
  --utrecht-listbox-option-hover-background-color: var(--oip-color-gray-lightest);
  --utrecht-listbox-option-hover-color: var(--oip-color-fg);
  --utrecht-listbox-option-selected-color: var(--oip-color-fg);
  --utrecht-listbox-option-selected-disabled-color: var(--oip-color-fg-muted);
  --utrecht-listbox-option-selected-hover-background-color: var(--oip-color-info-light);
  --utrecht-listbox-option-selected-hover-color: var(--oip-color-fg);
  --utrecht-listbox-option-icon-color: var(--oip-color-fg);
  --utrecht-ordered-list-font-size: var(--oip-text-font-size);
  --utrecht-ordered-list-font-family: var(--oip-typography-sans-serif-font-family);
  --utrecht-ordered-list-line-height: var(--oip-text-line-height);
  --utrecht-select-border-color: var(--oip-color-fg);
  --utrecht-select-color: var(--oip-color-fg);
  --utrecht-select-font-family: var(--oip-typography-sans-serif-font-family);
  --utrecht-select-font-size: var(--oip-text-font-size);
  --utrecht-skip-link-background-color: var(--oip-color-accent);
  --utrecht-skip-link-focus-background-color: var(--oip-color-accent);
  --utrecht-skip-link-focus-visible-background-color: var(--oip-color-accent);
  --utrecht-table-font-family: var(--oip-typography-sans-serif-font-family);
  --utrecht-table-caption-font-family: var(--oip-typography-sans-serif-font-family);
  --utrecht-table-header-border-block-end-color: var(--oip-color-gray);
  --utrecht-table-header-sticky-border-block-end-color: var(--oip-color-gray);
  --utrecht-table-footer-sticky-background-color: var(--oip-color-gray);
  --utrecht-table-cell-selected-background-color: var(--oip-color-gray);
  --utrecht-table-row-border-block-end-color: var(--oip-color-gray);
  --utrecht-table-row-alternate-odd-color: var(--oip-color-fg);
  --utrecht-table-row-alternate-even-background-color: var(--oip-color-gray-lightest);
  --utrecht-table-row-alternate-even-color: var(--oip-color-fg);
  --utrecht-textbox-color: var(--oip-color-fg);
  --utrecht-textbox-font-family: var(--oip-typography-sans-serif-font-family);
  --utrecht-textbox-font-size: var(--oip-text-font-size);
  --utrecht-textbox-placeholder-color: var(--oip-color-fg-muted);
  --utrecht-textbox-focus-border-color: var(--oip-color-secondary);
  --utrecht-textbox-focus-color: var(--oip-color-fg);
  --utrecht-document-font-family: var(--oip-typography-sans-serif-font-family); /** The body font-style for the theme. */
  --utrecht-unordered-list-font-size: var(--oip-text-font-size);
  --utrecht-unordered-list-font-family: var(--oip-typography-sans-serif-font-family);
  --utrecht-unordered-list-line-height: var(--oip-text-line-height);
}