html {
  font-size: 16px;
}

.code-preview__preview,
.live-example__example {
  --fkds-color-text-primary: #1b1e23;
  --fkds-color-text-secondary: #5f6165;
  --fkds-color-text-inverted: #ffffff;
  --fkds-color-text-disabled: #8d8e91;
  --fkds-color-background-primary: #ffffff;
  --fkds-color-background-secondary: #f4f4f4;
  --fkds-color-background-tertiary: #ddddde;
  --fkds-color-background-disabled: #f4f4f4;
  --fkds-color-border-primary: #8d8e91;
  --fkds-color-border-strong: #5f6165;
  --fkds-color-border-weak: #ddddde;
  --fkds-color-border-disabled: #8d8e91;
  --fkds-color-border-inverted: #ffffff;
  --fkds-color-action-text-primary-default: #4a52b6;
  --fkds-color-action-text-primary-hover: #3b4292;
  --fkds-color-action-text-primary-active: #3b4292;
  --fkds-color-action-text-primary-focus: #3b4292;
  --fkds-color-action-text-secondary-default: #1b1e23;
  --fkds-color-action-text-secondary-hover: #3b4292;
  --fkds-color-action-text-secondary-active: #3b4292;
  --fkds-color-action-text-secondary-focus: #3b4292;
  --fkds-color-action-text-inverted-default: #ffffff;
  --fkds-color-action-text-inverted-hover: #ffffff;
  --fkds-color-action-text-inverted-active: #ffffff;
  --fkds-color-action-text-inverted-focus: #ffffff;
  --fkds-color-action-background-primary-default: #4a52b6;
  --fkds-color-action-background-primary-hover: #3b4292;
  --fkds-color-action-background-primary-active: #3b4292;
  --fkds-color-action-background-primary-focus: #3b4292;
  --fkds-color-action-background-secondary-default: #f5f6fa;
  --fkds-color-action-background-secondary-hover: #e5e5f5;
  --fkds-color-action-background-secondary-active: #e5e5f5;
  --fkds-color-action-background-secondary-focus: #e5e5f5;
  --fkds-color-action-border-primary-default: #4a52b6;
  --fkds-color-action-border-primary-hover: #3b4292;
  --fkds-color-action-border-primary-active: #3b4292;
  --fkds-color-action-border-primary-focus: #3b4292;
  --fkds-color-feedback-background-neutral: #f4f4f4;
  --fkds-color-feedback-background-neutral-strong: #ddddde;
  --fkds-color-feedback-background-info: #f5f6fa;
  --fkds-color-feedback-background-info-strong: #4a52b6;
  --fkds-color-feedback-background-positive: #f3f8f5;
  --fkds-color-feedback-background-positive-strong: #35805b;
  --fkds-color-feedback-background-warning: #fffcf3;
  --fkds-color-feedback-background-warning-strong: #ffbe10;
  --fkds-color-feedback-background-negative: #fcf3f3;
  --fkds-color-feedback-background-negative-strong: #ca1515;
  --fkds-color-feedback-border-neutral: #8d8e91;
  --fkds-color-feedback-border-info: #4a52b6;
  --fkds-color-feedback-border-positive: #35805b;
  --fkds-color-feedback-border-warning: #ffbe10;
  --fkds-color-feedback-border-negative: #ca1515;
  --fkds-color-feedback-text-negative: #ca1515;
  --fkds-color-feedback-text-positive: #35805b;
  --fkds-color-select-background-primary-default: #4a52b6;
  --fkds-color-select-background-primary-hover: #e5e5f5;
  --fkds-color-select-background-primary-active: #e5e5f5;
  --fkds-color-select-background-primary-focus: #e5e5f5;
  --fkds-color-select-background-secondary-default: #35805b;
  --fkds-color-select-background-secondary-hover: #dbe9e2;
  --fkds-color-select-background-secondary-active: #dbe9e2;
  --fkds-color-select-background-secondary-focus: #dbe9e2;
  --fkds-icon-color-content-primary: #1b1e23;
  --fkds-icon-color-background-primary: #ffffff;
  --fkds-icon-color-border-primary: #1b1e23;
  --fkds-icon-color-content-disabled: #8d8e91;
  --fkds-icon-color-content-inverted: #ffffff;
  --fkds-icon-color-action-content-primary-default: #4a52b6;
  --fkds-icon-color-action-content-primary-hover: #3b4292;
  --fkds-icon-color-action-content-primary-active: #3b4292;
  --fkds-icon-color-action-content-primary-focus: #3b4292;
  --fkds-icon-color-action-content-secondary-default: #1b1e23;
  --fkds-icon-color-action-content-secondary-hover: #3b4292;
  --fkds-icon-color-action-content-secondary-active: #3b4292;
  --fkds-icon-color-action-content-secondary-focus: #3b4292;
  --fkds-icon-color-action-content-weak-default: #5f6165;
  --fkds-icon-color-action-content-inverted-default: #ffffff;
  --fkds-icon-color-action-content-inverted-hover: #ffffff;
  --fkds-icon-color-action-content-inverted-active: #ffffff;
  --fkds-icon-color-action-content-inverted-focus: #ffffff;
  --fkds-icon-color-feedback-content-info: #1b1e23;
  --fkds-icon-color-feedback-content-positive: #1b1e23;
  --fkds-icon-color-feedback-content-warning: #1b1e23;
  --fkds-icon-color-feedback-content-negative: #1b1e23;
  --fkds-icon-color-feedback-background-info: #f5f6fa;
  --fkds-icon-color-feedback-background-positive: #f3f8f5;
  --fkds-icon-color-feedback-background-warning: #fffcf3;
  --fkds-icon-color-feedback-background-negative: #fcf3f3;
  --fkds-icon-color-feedback-border-info: #4a52b6;
  --fkds-icon-color-feedback-border-positive: #35805b;
  --fkds-icon-color-feedback-border-warning: #ffbe10;
  --fkds-icon-color-feedback-border-negative: #ca1515;
  --f-text-color-default: #1b1e23;
  --f-text-color-default-inverted: #ffffff;
  --f-text-color-discrete: #5f6165;
  --f-text-color-error: #d23838;
  --f-text-color-link: #4a52b6;
  --f-text-color-link-hover: #1b1e23;
  --f-text-color-link-discrete: #1b1e23;
  --f-text-color-link-discrete-hover: #4a52b6;
  --f-text-color-heading-1: inherit;
  --f-text-color-heading-2: inherit;
  --f-text-color-heading-3: inherit;
  --f-text-color-heading-4: inherit;
  --f-text-color-heading-5: inherit;
  --f-text-color-heading-6: inherit;
  --f-text-color-input-disabled: #8d8e91;
  --f-text-color-heading-expandable-panel: #ffffff;
  --f-text-color-wizard-step-done: #35805b;
  --f-text-color-button-standard: #4a52b6;
  --f-text-color-button-discrete: #4a52b6;
  --f-text-color-button-discrete-disabled: #8d8e91;
  --f-text-color-button-discrete-hover: #3b4292;
  --f-text-color-button-discrete-inverted: #ffffff;
  --f-text-color-button-discrete-inverted-hover: #ffffff;
  --f-text-color-button-discrete-inverted-disabled: #e5e5f5;
  --f-text-color-menu: #1b1e23;
  --f-text-color-menu-hover: #1b1e23;
  --f-text-color-menu-horizontal-highlight: #1b1e23;
  --f-text-color-popupmenu: #1b1e23;
  --f-text-color-popupmenu-hover: #1b1e23;
  --f-text-color-close-button: #1b1e23;
  --f-icon-color-white: #ffffff;
  --f-icon-color-black: #1b1e23;
  --f-icon-color-info: #4a52b6;
  --f-icon-color-primary: #4a52b6;
  --f-icon-color-discrete: #5f6165;
  --f-icon-color-success: #35805b;
  --f-icon-color-error: #ca1515;
  --f-icon-color-input: #8d8e91;
  --f-icon-color-notice: #d34503;
  --f-icon-color-loader: #35805b;
  --f-icon-color-expandable-panel: #ffffff;
  --f-icon-color-expandable-paragraph: #35805b;
  --f-icon-color-table-header: #1b1e23;
  --f-icon-color-table-header-discrete: #8d8e91;
  --f-icon-color-sort-filter-dataset-close: #1b1e23;
  --f-icon-color-sort-filter-dataset-search: #8d8e91;
  --f-icon-color-wizard-step-pending: #f4f4f4;
  --f-icon-color-wizard-step-done: #35805b;
  --f-icon-color-success-background: #dbe9e2;
  --f-background-content: #ffffff;
  --f-background-input: #ffffff;
  --f-background-input-selected: #4a52b6;
  --f-background-input-selected-disabled: #8d8e91;
  --f-background-error: #fcf3f3;
  --f-background-success: #f3f8f5;
  --f-background-overlay: rgba(0, 0, 0, 0.75);
  --f-background-progress-file-item-ongoing: #ffc834;
  --f-background-pageheader-primary: #116a3e;
  --f-background-skiplink-focus: #f5f6fa;
  --f-background-heading-expandable-panel: #116a3e;
  --f-background-heading-expandable-panel-hover: #35805b;
  --f-background-expandable-panel: #ffffff;
  --f-background-heading-static-panel: #afcfb5;
  --f-background-code: #f4f4f4;
  --f-background-wizard-step-line: #5f6165;
  --f-background-button-discrete-hover: none;
  --f-background-sidepanel-button-tertiary-hover: #e5e5f5;
  --f-background-grid-default: #ffffff;
  --f-background-grid-active: #e5e5f5;
  --f-background-grid-hover: #f5f6fa;
  --f-background-grid-striped: #f4f4f4;
  --f-background-grid-header: #f4f4f4;
  --f-background-grid-focus-inner: #f5f6fa;
  --f-background-tab-active: #ffffff;
  --f-background-tab-inactive: #f5f6fa;
  --f-background-menu: #f4f4f4;
  --f-background-menu-vertical-hover: #ddddde;
  --f-background-menu-vertical-highlight: #e7f0e9;
  --f-background-popupmenu: #ffffff;
  --f-background-popupmenu-vertical-hover: #ddddde;
  --f-background-popupmenu-vertical-highlight: #e7f0e9;
  --f-background-dialogue-tree: #ffffff;
  --f-background-dialogue-tree-hover: #e5e5f5;
  --f-border-color-modal: #8d8e91;
  --f-border-color-success: #35805b;
  --f-border-color-error: #ca1515;
  --f-border-color-input: #8d8e91;
  --f-border-color-input-inner: #e5e5f5;
  --f-border-color-input-inner-selected: #e5e5f5;
  --f-border-color-input-inner-disabled: #ffffff;
  --f-border-color-card: #8d8e91;
  --f-border-color-dialogue-tree: #8d8e91;
  --f-border-color-progress-file-item-ongoing: #5f6165;
  --f-border-color-panel: #e7f0e9;
  --f-border-color-expandable-panel: #116a3e;
  --f-border-color-static-panel: #afcfb5;
  --f-border-color-separator: #ddddde;
  --f-border-color-separator-pageheader-primary: #ffffff;
  --f-border-color-separator-contextmenu: #8d8e91;
  --f-border-color-wizard-step-line: #5f6165;
  --f-border-color-link: #4a52b6;
  --f-border-color-link-hover: #8d8e91;
  --f-border-color-link-discrete: #8d8e91;
  --f-border-color-link-discrete-hover: #4a52b6;
  --f-border-color-grid: #8d8e91;
  --f-border-color-grid-header: #8d8e91;
  --f-border-color-grid-hover: #8d8e91;
  --f-border-color-grid-expanded: #ddddde;
  --f-border-color-expandable-panel-closed: none;
  --f-border-color-menu-horizontal: #116a3e;
  --f-border-color-menu-horizontal-hover: #afcfb5;
  --f-border-color-menu-horizontal-highlight: #116a3e;
  --f-border-color-popupmenu: #ddddde;
  --f-box-modal-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  --f-input-shadow-inset: inset 0 2px 3px rgba(0, 0, 0, 0.1);
  --f-font-family: "ExpFont", "NeueHass", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
  --f-font-family-code: "Consolas", "Liberation Mono", "Courier", monospace;
  --f-font-size-default-rem: 16px;
  --f-font-size-default-large-up-rem: 16px;
  --f-font-weight-normal: 400;
  --f-font-weight-medium: 700;
  --f-font-weight-bold: 900;
  --f-line-height-small: 1.25;
  --f-line-height-medium: 1.4;
  --f-line-height-large: 1.5;
  --f-font-size-h1: 2.5rem;
  --f-font-size-h2: 1.75rem;
  --f-font-size-xxx-large: 1.5rem;
  --f-font-size-h3: 1.375rem;
  --f-font-size-h4: 1.25rem;
  --f-font-size-large: 1.125rem;
  --f-font-size-standard: 1rem;
  --f-icon-size-x-small: 0.75rem;
  --f-icon-size-small: 1rem;
  --f-icon-size-medium: 1.25rem;
  --f-icon-size-large: 1.5rem;
  --f-icon-size-x-large: 2rem;
  --f-height-small: 0.75rem;
  --f-height-medium: 1.25rem;
  --f-height-large: 2.5rem;
  --f-width-full: 100%;
  --f-border-width-small: 1px;
  --f-border-width-medium: 2px;
  --f-border-radius-small: 2px;
  --f-border-radius-medium: 4px;
  --f-margin-component-bottom: 1.5rem;
  --padding-input-fields: 0 2.25rem 0 0.75rem;
  --f-color-focus: #1b1e23;
  --f-focus-box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #1b1e23, 0 0 0 6px #ffffff;
  --f-animation-duration-short: 150ms;
  --f-animation-duration-medium: 350ms;
  --f-animation-duration-long: 500ms;
  --f-animation-expand-open: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96) 0s;
  --f-animation-expand-close: all 500ms cubic-bezier(0.46, 0.03, 0.52, 0.96) 0s;
  --f-density-factor: 1;
  --f-static-panel-heading-border: none;
  --f-expandable-panel-heading-border-close: none;
  --f-expandable-panel-heading-border-open: none;
  --f-expandable-panel-heading-border-radius: 4px 4px 0 0;
  --f-label-message-margin-top: 0.25rem;
  --f-button-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  --f-button-shadow-hover: 0 1px 3px rgba(0, 0, 0, 0.3);
  --f-button-min-width: 9.5rem;
  --f-button-letter-spacing: 0.01rem;
  --f-button-default-line-height: 1.5rem;
  --f-button-discrete-radius-hover: none;
  --f-button-tertiary-table-column-action-icon-margin: 0 2px 0 2px;
  --f-button-tertiary-table-column-action-margin: 0 0 0 0.5rem;
  --f-button-default-padding-top: 1rem;
  --f-button-default-padding-right: 1.5rem;
  --f-button-default-padding-bottom: 1rem;
  --f-button-default-padding-left: 1.5rem;
  --f-button-primary-padding-top: 1rem;
  --f-button-primary-padding-right: 1.5rem;
  --f-button-primary-padding-bottom: 1rem;
  --f-button-primary-padding-left: 1.5rem;
  --f-button-secondary-padding-top: 1rem;
  --f-button-secondary-padding-right: 1.5rem;
  --f-button-secondary-padding-bottom: 1rem;
  --f-button-secondary-padding-left: 1.5rem;
  --f-button-standard-padding-top: 1rem;
  --f-button-standard-padding-right: 1.5rem;
  --f-button-standard-padding-bottom: 1rem;
  --f-button-standard-padding-left: 1.5rem;
  --f-button-tertiary-padding-top: 0.75rem;
  --f-button-tertiary-padding-right: 0.5rem;
  --f-button-tertiary-padding-bottom: 0.75rem;
  --f-button-tertiary-padding-left: 0.5rem;
  --f-button-discrete-padding-top: initial;
  --f-button-discrete-padding-right: initial;
  --f-button-discrete-padding-bottom: initial;
  --f-button-discrete-padding-left: initial;
  --f-button-discrete-black-padding-top: initial;
  --f-button-discrete-black-padding-right: initial;
  --f-button-discrete-black-padding-bottom: initial;
  --f-button-discrete-black-padding-left: initial;
  --f-modal-close-button-margin: 1rem 1rem 0;
  --f-modal-close-button-padding: none;
  --f-modal-size-small: 500px;
  --f-modal-size-medium: 700px;
  --f-modal-size-large: 1200px;
  --f-modal-size-fullwidth: 100%;
  --f-modal-title-font-size: 1.25rem;
  --f-tooltip-close-button-margin: 0.375rem 0.375rem 0.625rem 0.625rem;
  --f-tooltip-border-color: #8d8e91;
  --f-tooltip-border-width: var(--f-border-width-medium);
  --f-loader-size: 4rem;
  --f-loader-margin: 0 auto 3rem auto;
  --f-table-body-row-padding: 0.5rem;
  --f-list-item-itempane-padding: 1.25rem;
  --i-popup-error-offset: 24px;
  --f-tooltip-offset: 0px;
  --f-tooltip-icon-size: 0px;
  --f-logo-image-small: none;
  --f-logo-image-large: none;
  --f-logo-size-small: 0.8rem;
  --f-logo-size-large: 0.8rem 6.195rem;
  --size: 0;
  --min: 0;
  --max: 0;
  --f-logo-image-small:
      url("./images/fk-logo-primary-small.svg"),
      linear-gradient(var(--f-background-pageheader-primary), var(--f-background-pageheader-primary));
  --f-logo-image-large:
      url("./images/fk-logo-primary-large.svg"),
      linear-gradient(var(--f-background-pageheader-primary), var(--f-background-pageheader-primary));
}