@font-face {
  font-family: Inter;
  font-weight: 300;
  src: url("./fonts/Inter-Light.woff2") format("woff2");
}
@font-face {
  font-family: Inter;
  font-weight: 400;
  src: url("./fonts/Inter-Regular.woff2") format("woff2");
}
@font-face {
  font-family: Inter;
  font-weight: 500;
  src: url("./fonts/Inter-Medium.woff2") format("woff2");
}
@font-face {
  font-family: Inter;
  font-weight: 600;
  src: url("./fonts/Inter-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: Inter;
  font-weight: 700;
  src: url("./fonts/Inter-Bold.woff2") format("woff2");
}
@media (prefers-color-scheme: light) {
  .code-preview__preview,
  .live-example__example,
  .user-theme {
    --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-icon-color-success: #35805b;
    --f-icon-color-success-background: #dbe9e2;
    --f-background-overlay: rgba(0, 0, 0, 0.75);
    --f-background-sidepanel-button-tertiary-hover: #e5e5f5;
    --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: 600;
    --f-font-weight-bold: 700;
    --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-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 8px 0 2px;
    --f-button-tertiary-table-column-action-margin: 0 0 0 0.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-tertiary-padding-top: 1rem;
    --f-button-tertiary-padding-right: 1.5rem;
    --f-button-tertiary-padding-bottom: 1rem;
    --f-button-tertiary-padding-left: 1.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;
    --f-calendar-height: 21rem;
    --size: 0;
    --min: 0;
    --max: 0;
    --fkds-color-text-primary: #1b1e23;
    --fkds-color-text-secondary: #606876;
    --fkds-color-text-inverted: #ffffff;
    --fkds-color-text-disabled: #606876;
    --fkds-color-background-primary: #ffffff;
    --fkds-color-background-secondary: #f7f7f8;
    --fkds-color-background-tertiary: #ecedef;
    --fkds-color-background-disabled: #ecedef;
    --fkds-color-border-primary: #777f8d;
    --fkds-color-border-strong: #494f5b;
    --fkds-color-border-weak: #d6d8dc;
    --fkds-color-border-disabled: #8e949f;
    --fkds-color-border-inverted: #ffffff;
    --fkds-color-action-text-primary-default: #2358af;
    --fkds-color-action-text-primary-hover: #1b478d;
    --fkds-color-action-text-primary-active: #14336c;
    --fkds-color-action-text-primary-focus: #2358af;
    --fkds-color-action-text-secondary-default: #1b1e23;
    --fkds-color-action-text-secondary-hover: #1b478d;
    --fkds-color-action-text-secondary-active: #14336c;
    --fkds-color-action-text-secondary-focus: #1b1e23;
    --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: #2358af;
    --fkds-color-action-background-primary-hover: #1b478d;
    --fkds-color-action-background-primary-active: #14336c;
    --fkds-color-action-background-primary-focus: #2358af;
    --fkds-color-action-background-secondary-default: #ffffff;
    --fkds-color-action-background-secondary-hover: #dee9f7;
    --fkds-color-action-background-secondary-active: #97bbe7;
    --fkds-color-action-background-secondary-focus: #ffffff;
    --fkds-color-action-border-primary-default: #2358af;
    --fkds-color-action-border-primary-hover: #1b478d;
    --fkds-color-action-border-primary-active: #14336c;
    --fkds-color-action-border-primary-focus: #2358af;
    --fkds-color-feedback-background-neutral: #ffffff;
    --fkds-color-feedback-background-neutral-strong: #d6d8dc;
    --fkds-color-feedback-background-info: #f3f7fc;
    --fkds-color-feedback-background-info-strong: #3472d5;
    --fkds-color-feedback-background-positive: #f5faf7;
    --fkds-color-feedback-background-positive-strong: #1b7e4d;
    --fkds-color-feedback-background-warning: #fffbf0;
    --fkds-color-feedback-background-warning-strong: #f1b604;
    --fkds-color-feedback-background-negative: #fdf3f3;
    --fkds-color-feedback-background-negative-strong: #df3035;
    --fkds-color-feedback-border-neutral: #777f8d;
    --fkds-color-feedback-border-info: #3472d5;
    --fkds-color-feedback-border-positive: #248f59;
    --fkds-color-feedback-border-warning: #f1b604;
    --fkds-color-feedback-border-negative: #df3035;
    --fkds-color-feedback-text-negative: #df3035;
    --fkds-color-feedback-text-positive: #1b7e4d;
    --fkds-color-feedback-text-on-warning: #1b1e23;
    --fkds-color-select-background-primary-default: #2358af;
    --fkds-color-select-background-primary-hover: #dee9f7;
    --fkds-color-select-background-primary-active: #97bbe7;
    --fkds-color-select-background-primary-focus: #dee9f7;
    --fkds-color-select-background-secondary-default: #1b7e4d;
    --fkds-color-select-background-secondary-hover: #d9ede3;
    --fkds-color-select-background-secondary-active: #96cfb2;
    --fkds-color-select-background-secondary-focus: #d9ede3;
    --fkds-color-interactive-surface-background-primary-default: #f7f7f8;
    --fkds-color-interactive-surface-background-primary-hover: #ecedef;
    --fkds-color-interactive-surface-background-primary-active: #ecedef;
    --fkds-color-interactive-surface-background-primary-focus: #ecedef;
    --fkds-color-navigation-border-hover: #96cfb2;
    --fkds-color-navigation-border-selected: #1b7e4d;
    --fkds-color-navigation-background-hover: #96cfb2;
    --fkds-color-navigation-background-selected: #1b7e4d;
    --fkds-color-header-background-primary: #1b7e4d;
    --fkds-color-header-text-primary: #ffffff;
    --fkui-theme-default-version: "6.45.0";
  }
}
@media (prefers-color-scheme: dark) {
  .code-preview__preview,
  .live-example__example,
  .user-theme {
    --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-icon-color-success: #35805b;
    --f-icon-color-success-background: #dbe9e2;
    --f-background-overlay: rgba(0, 0, 0, 0.75);
    --f-background-sidepanel-button-tertiary-hover: #e5e5f5;
    --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: 600;
    --f-font-weight-bold: 700;
    --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-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 8px 0 2px;
    --f-button-tertiary-table-column-action-margin: 0 0 0 0.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-tertiary-padding-top: 1rem;
    --f-button-tertiary-padding-right: 1.5rem;
    --f-button-tertiary-padding-bottom: 1rem;
    --f-button-tertiary-padding-left: 1.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;
    --f-calendar-height: 21rem;
    --size: 0;
    --min: 0;
    --max: 0;
    --fkds-color-text-primary: #ecedef;
    --fkds-color-text-secondary: #afb3bb;
    --fkds-color-text-inverted: #1b1e23;
    --fkds-color-text-disabled: #afb3bb;
    --fkds-color-background-primary: #1b1e23;
    --fkds-color-background-secondary: #2d3139;
    --fkds-color-background-tertiary: #494f5b;
    --fkds-color-background-disabled: #2d3139;
    --fkds-color-border-primary: #8e949f;
    --fkds-color-border-strong: #d6d8dc;
    --fkds-color-border-weak: #606876;
    --fkds-color-border-disabled: #777f8d;
    --fkds-color-border-inverted: #1b1e23;
    --fkds-color-action-text-primary-default: #76a6e0;
    --fkds-color-action-text-primary-hover: #97bbe7;
    --fkds-color-action-text-primary-active: #97bbe7;
    --fkds-color-action-text-primary-focus: #76a6e0;
    --fkds-color-action-text-secondary-default: #ecedef;
    --fkds-color-action-text-secondary-hover: #d6d8dc;
    --fkds-color-action-text-secondary-active: #d6d8dc;
    --fkds-color-action-text-secondary-focus: #ecedef;
    --fkds-color-action-text-inverted-default: #1b1e23;
    --fkds-color-action-text-inverted-hover: #1b1e23;
    --fkds-color-action-text-inverted-active: #1b1e23;
    --fkds-color-action-text-inverted-focus: #1b1e23;
    --fkds-color-action-background-primary-default: #76a6e0;
    --fkds-color-action-background-primary-hover: #97bbe7;
    --fkds-color-action-background-primary-active: #97bbe7;
    --fkds-color-action-background-primary-focus: #76a6e0;
    --fkds-color-action-background-secondary-default: #1b1e23;
    --fkds-color-action-background-secondary-hover: #2d3139;
    --fkds-color-action-background-secondary-active: #2d3139;
    --fkds-color-action-background-secondary-focus: #1b1e23;
    --fkds-color-action-border-primary-default: #76a6e0;
    --fkds-color-action-border-primary-hover: #97bbe7;
    --fkds-color-action-border-primary-active: #97bbe7;
    --fkds-color-action-border-primary-focus: #76a6e0;
    --fkds-color-feedback-background-neutral: #2d3139;
    --fkds-color-feedback-background-neutral-strong: #606876;
    --fkds-color-feedback-background-info: #061023;
    --fkds-color-feedback-background-info-strong: #578edb;
    --fkds-color-feedback-background-positive: #041f12;
    --fkds-color-feedback-background-positive-strong: #3eac75;
    --fkds-color-feedback-background-warning: #231c00;
    --fkds-color-feedback-background-warning-strong: #f2cc4d;
    --fkds-color-feedback-background-negative: #220506;
    --fkds-color-feedback-background-negative-strong: #e85b60;
    --fkds-color-feedback-border-neutral: #8e949f;
    --fkds-color-feedback-border-info: #578edb;
    --fkds-color-feedback-border-positive: #3eac75;
    --fkds-color-feedback-border-warning: #f2cc4d;
    --fkds-color-feedback-border-negative: #e85b60;
    --fkds-color-feedback-text-negative: #e85b60;
    --fkds-color-feedback-text-positive: #3eac75;
    --fkds-color-feedback-text-on-warning: #1b1e23;
    --fkds-color-select-background-primary-default: #76a6e0;
    --fkds-color-select-background-primary-hover: #494f5b;
    --fkds-color-select-background-primary-active: #2d3139;
    --fkds-color-select-background-primary-focus: #1b1e23;
    --fkds-color-select-background-secondary-default: #5eba8c;
    --fkds-color-select-background-secondary-hover: #494f5b;
    --fkds-color-select-background-secondary-active: #2d3139;
    --fkds-color-select-background-secondary-focus: #1b1e23;
    --fkds-color-interactive-surface-background-primary-default: #2d3139;
    --fkds-color-interactive-surface-background-primary-hover: #494f5b;
    --fkds-color-interactive-surface-background-primary-active: #494f5b;
    --fkds-color-interactive-surface-background-primary-focus: #494f5b;
    --fkds-color-navigation-border-hover: #96cfb2;
    --fkds-color-navigation-border-selected: #248f59;
    --fkds-color-navigation-background-hover: #96cfb2;
    --fkds-color-navigation-background-selected: #248f59;
    --fkds-color-header-background-primary: #3eac75;
    --fkds-color-header-text-primary: #ffffff;
    --fkui-theme-default-version: "6.45.0";
  }
}
:root {
  --f-font-family: "Inter", arial, "Helvetica Neue", sans-serif;
  --f-font-weight-normal: 400;
  --f-font-weight-medium: 600;
  --f-font-weight-bold: 700;
}

.code-preview__preview,
.live-example__example,
.user-theme {
  --f-font-family: "Inter", arial, "Helvetica Neue", sans-serif;
  --f-font-weight-normal: 400;
  --f-font-weight-medium: 600;
  --f-font-weight-bold: 700;
  --f-logo-image-small: url("./images/fk-logo-primary-small.svg"), linear-gradient(var(--fkds-color-header-background-primary), var(--fkds-color-header-background-primary));
  --f-logo-image-large: url("./images/fk-logo-primary-large.svg"), linear-gradient(var(--fkds-color-header-background-primary), var(--fkds-color-header-background-primary));
  font-family: var(--f-font-family);
}