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

:root {
  --pillow-core-color-neutral-25: #ffffff;
  --pillow-core-color-neutral-50: #f5f5f5;
  --pillow-core-color-neutral-100: #e2e2e2;
  --pillow-core-color-neutral-150: #cdcdcd;
  --pillow-core-color-neutral-200: #b3b3b3;
  --pillow-core-color-neutral-250: #969696;
  --pillow-core-color-neutral-300: #787878;
  --pillow-core-color-neutral-400: #5c5c5c;
  --pillow-core-color-neutral-500: #434343;
  --pillow-core-color-neutral-600: #313131;
  --pillow-core-color-neutral-700: #272727;
  --pillow-core-color-neutral-800: #1b1b1b;
  --pillow-core-color-blue-25: #e9f8fc;
  --pillow-core-color-blue-50: #d0ecf8;
  --pillow-core-color-blue-100: #b1dff6;
  --pillow-core-color-blue-150: #91d4f9;
  --pillow-core-color-blue-200: #67c1f5;
  --pillow-core-color-blue-250: #3db1f3;
  --pillow-core-color-blue-300: #019cde;
  --pillow-core-color-blue-400: #0281c0;
  --pillow-core-color-blue-500: #006ba8;
  --pillow-core-color-blue-600: #004c7e;
  --pillow-core-color-blue-700: #003760;
  --pillow-core-color-blue-800: #102948;
  --pillow-core-color-red-25: #fcf3f2;
  --pillow-core-color-red-50: #ffdfdb;
  --pillow-core-color-red-100: #ffccc6;
  --pillow-core-color-red-150: #ffb6ae;
  --pillow-core-color-red-200: #ff9f95;
  --pillow-core-color-red-250: #ff8278;
  --pillow-core-color-red-300: #fe746c;
  --pillow-core-color-red-400: #db5148;
  --pillow-core-color-red-500: #bb3c34;
  --pillow-core-color-red-600: #982720;
  --pillow-core-color-red-700: #700e09;
  --pillow-core-color-red-800: #5a0800;
  --pillow-core-color-green-25: #dffce8;
  --pillow-core-color-green-50: #c3ffd6;
  --pillow-core-color-green-100: #aafcc2;
  --pillow-core-color-green-150: #91f3ac;
  --pillow-core-color-green-200: #76e492;
  --pillow-core-color-green-250: #5cd177;
  --pillow-core-color-green-300: #44ba5e;
  --pillow-core-color-green-400: #2aa043;
  --pillow-core-color-green-500: #12852b;
  --pillow-core-color-green-600: #066b19;
  --pillow-core-color-green-700: #005208;
  --pillow-core-color-green-800: #053d03;
  --pillow-core-color-yellow-25: #faf2e9;
  --pillow-core-color-yellow-50: #ffe3c3;
  --pillow-core-color-yellow-100: #ffd7a6;
  --pillow-core-color-yellow-150: #ffca86;
  --pillow-core-color-yellow-200: #ffbd63;
  --pillow-core-color-yellow-250: #f0ad4e;
  --pillow-core-color-yellow-300: #e09e47;
  --pillow-core-color-yellow-400: #c98a3e;
  --pillow-core-color-yellow-500: #ad7433;
  --pillow-core-color-yellow-600: #8f5c27;
  --pillow-core-color-yellow-700: #6c421b;
  --pillow-core-color-yellow-800: #432912;
  --pillow-core-color-transparent: #1b1b1b00;
  --pillow-core-dimension-0: 0;
  --pillow-core-dimension-6: 1px;
  --pillow-core-dimension-12: 2px;
  --pillow-core-dimension-25: 4px;
  --pillow-core-dimension-37: 6px;
  --pillow-core-dimension-50: 8px;
  --pillow-core-dimension-57: 9px;
  --pillow-core-dimension-75: 12px;
  --pillow-core-dimension-100: 16px;
  --pillow-core-dimension-125: 20px;
  --pillow-core-dimension-150: 24px;
  --pillow-core-dimension-175: 28px;
  --pillow-core-dimension-200: 32px;
  --pillow-core-dimension-225: 36px;
  --pillow-core-dimension-250: 40px;
  --pillow-core-dimension-300: 48px;
  --pillow-core-dimension-350: 56px;
  --pillow-core-dimension-400: 64px;
  --pillow-core-dimension-450: 72px;
  --pillow-core-dimension-500: 80px;
  --pillow-core-dimension-600: 96px;
  --pillow-core-dimension-700: 112px;
  --pillow-core-dimension-800: 128px;
  --pillow-core-dimension-900: 144px;
  --pillow-core-dimension-1000: 160px;
  --pillow-core-dimension-1100: 176px;
  --pillow-core-dimension-1200: 192px;
  --pillow-core-dimension-1300: 208px;
  --pillow-core-dimension-1400: 224px;
  --pillow-core-dimension-1500: 240px;
  --pillow-core-dimension-1600: 256px;
  --pillow-core-dimension-2000: 320px;
  --pillow-core-dimension-2400: 384px;
  --pillow-core-dimension-base: 0.16px;
  --pillow-core-size-scale: 16px; /* base-scale of all size-related tokens (size, space, dimension). The default is 1rem = 16(px). If you change it, it will change all size-related tokens. :) */
  --pillow-core-font-size-rem: 16px; /* 👀 If you change this core font size, it will change all font-related tokens. */
  --pillow-core-font-size-scaled-0-5x: 8px;
  --pillow-core-font-size-scaled-0-56x: 9px;
  --pillow-core-font-size-scaled-0-62x: 10px;
  --pillow-core-font-size-scaled-0-68x: 11px;
  --pillow-core-font-size-scaled-0-75x: 12px;
  --pillow-core-font-size-scaled-0-81x: 13px;
  --pillow-core-font-size-scaled-0-87x: 14px;
  --pillow-core-font-size-scaled-1x: 16px;
  --pillow-core-font-size-scaled-1-25x: 20px;
  --pillow-core-font-size-scaled-1-5x: 24px;
  --pillow-core-font-size-scaled-1-75x: 28px;
  --pillow-core-font-size-scaled-2x: 32px;
  --pillow-core-font-size-scaled-2-25x: 36px;
  --pillow-core-font-size-scaled-2-5x: 40px;
  --pillow-core-font-size-scaled-2-75x: 44px;
  --pillow-core-font-size-scaled-3x: 48px;
  --pillow-core-font-size-scaled-3-25x: 52px;
  --pillow-core-font-size-scaled-3-5x: 56px;
  --pillow-core-font-size-scaled-3-75x: 60px;
  --pillow-core-font-size-scaled-4x: 64px;
  --pillow-core-font-size-scaled-4-5x: 72px;
  --pillow-core-font-size-scaled-5x: 80px;
  --pillow-core-font-size-scaled-5-5x: 88px;
  --pillow-core-font-size-scaled-6x: 96px;
  --pillow-core-font-size-scaled-base: 0.16px;
  --pillow-core-paragraph-spacing-none: 0;
  --pillow-core-paragraph-spacing-small: 0.25px;
  --pillow-core-paragraph-spacing-medium: 0.5px;
  --pillow-core-paragraph-spacing-large: 0.75px;
  --pillow-core-paragraph-spacing-extra-large: 1px;
  --pillow-core-font-family-manrope: Manrope;
  --pillow-core-font-weight-regular: 400;
  --pillow-core-font-weight-medium: 500;
  --pillow-core-font-weight-strong: 700;
  --pillow-core-line-height-extra-small: 1;
  --pillow-core-line-height-small: 1.1;
  --pillow-core-line-height-medium: 1.3;
  --pillow-core-line-height-large: 1.5;
  --pillow-border-radius-container-none: 0;
  --pillow-border-radius-container-0-12x: 2px;
  --pillow-border-radius-container-0-25x: 4px;
  --pillow-border-radius-container-0-37x: 6px;
  --pillow-border-radius-container-0-50x: 8px;
  --pillow-border-radius-container-0-57x: 9px;
  --pillow-border-radius-container-1x: 16px;
  --pillow-border-radius-container-pill: 1000px;
  --pillow-border-width-base-none: 0;
  --pillow-border-width-base-s: 1px;
  --pillow-border-width-base-sm: 1.5px;
  --pillow-border-width-base-m: 2px;
  --pillow-border-width-icon-stroke-s: 1px;
  --pillow-border-width-icon-stroke-m: 1.25px;
  --pillow-border-width-icon-stroke-l: 1.5px;
  --pillow-border-action-transparent: 1px solid #1b1b1b00;
  --pillow-border-action-default: 1px solid #0281c0;
  --pillow-border-action-disabled: 1px solid #cdcdcd;
  --pillow-border-action-focused: 2px solid #3db1f3;
  --pillow-border-action-selected: 1px solid #0281c0;
  --pillow-border-action-error: 1px solid #982720;
  --pillow-border-action-warning: 1px solid #ad7433;
  --pillow-border-action-info: 1px solid #004c7e;
  --pillow-border-action-success: 1px solid #066b19;
  --pillow-border-action-brand: 2px solid #019cde;
  --pillow-border-action-primary: 1px solid #003760;
  --pillow-border-action-input: 1px solid #b3b3b3;
  --pillow-border-base-default: 1px solid #434343;
  --pillow-border-base-subtle: 1px solid #969696;
  --pillow-border-base-muted: 1px solid #e2e2e2;
  --pillow-box-shadow-container-selected: inset 0 0 0 2px #0281c0;
  --pillow-sizing-viewport-breakpoints-576: 576px;
  --pillow-sizing-viewport-breakpoints-768: 768px;
  --pillow-sizing-viewport-breakpoints-1024: 1024px;
  --pillow-sizing-viewport-breakpoints-1200: 1200px;
  --pillow-sizing-viewport-breakpoints-1400: 1400px;
  --pillow-sizing-viewport-breakpoints-1728: 1728px;
  --pillow-spacing-container-none: 0;
  --pillow-spacing-container-0-12x: 2px;
  --pillow-spacing-container-0-25x: 4px;
  --pillow-spacing-container-0-37x: 6px;
  --pillow-spacing-container-0-5x: 8px;
  --pillow-spacing-container-0-75x: 12px;
  --pillow-spacing-container-1x: 16px;
  --pillow-spacing-container-1-25x: 20px;
  --pillow-spacing-container-1-5x: 24px;
  --pillow-spacing-container-2x: 32px;
  --pillow-spacing-container-2-5x: 40px;
  --pillow-spacing-container-auto: AUTO;
  --pillow-spacing-page-margin-none: 0; /* This is basically your page margin (in breakpoints-speak). */
  --pillow-spacing-page-margin-1x: 16px;
  --pillow-spacing-page-margin-1-5x: 24px;
  --pillow-spacing-page-margin-2x: 32px;
  --pillow-spacing-page-margin-3x: 48px;
  --pillow-spacing-page-padding-none: 0; /* This is basically your page gutter (in breakpoints-speak). */
  --pillow-spacing-page-padding-0-25x: 4px;
  --pillow-spacing-page-padding-0-5x: 8px;
  --pillow-spacing-page-padding-1x: 16px;
  --pillow-spacing-page-padding-2x: 32px;
  --pillow-spacing-page-padding-4x: 64px;
  --pillow-spacing-page-padding-8x: 128px;
  --pillow-spacing-page-padding-16x: 256px;
  --pillow-dimension-action-height-1-25x: 20px;
  --pillow-dimension-action-height-1-5x: 24px;
  --pillow-dimension-action-height-1-75x: 28px;
  --pillow-dimension-action-height-2-25x: 36px;
  --pillow-dimension-action-height-3x: 48px;
  --pillow-dimension-action-width-1-5x: 24px;
  --pillow-dimension-action-width-1-75x: 28px;
  --pillow-dimension-action-width-2-25x: 36px;
  --pillow-dimension-input-height-3x: 48px;
  --pillow-dimension-icon-0-37x: 6px;
  --pillow-dimension-icon-0-5x: 12px;
  --pillow-dimension-icon-0-75x: 16px;
  --pillow-dimension-icon-1x: 20px;
  --pillow-dimension-spinner-0-5x: 12px;
  --pillow-dimension-spinner-0-75x: 16px;
  --pillow-dimension-spinner-1x: 20px;
  --pillow-typography-title-xxs: 700 12px/1.3 Manrope; /* singleline text, used for labels on top of inputs, as titles inside components, pages or panels */
  --pillow-typography-title-xs: 700 14px/1.3 Manrope; /* singleline text, used for labels on top of inputs, as titles inside components, pages or panels */
  --pillow-typography-title-small: 700 16px/1.3 Manrope; /* singleline text, used for labels on top of inputs, as titles inside components, pages or panels */
  --pillow-typography-title-medium: 700 20px/1.3 Manrope; /* singleline text, used for labels on top of inputs, as titles inside components, pages or panels */
  --pillow-typography-title-large: 700 24px/1.3 Manrope; /* singleline text, used for labels on top of inputs, as titles inside components, pages or panels */
  --pillow-typography-title-xxl: 700 40px/1.3 Manrope; /* singleline text, used for labels on top of inputs, as titles inside components, pages or panels */
  --pillow-typography-title-xxxl: 700 48px/1.3 Manrope; /* singleline text, used for labels on top of inputs, as titles inside components, pages or panels */
  --pillow-typography-body-small: 400 12px/1.5 Manrope; /* multiline text, used for paragraphes inside components, pages or panels */
  --pillow-typography-body-medium: 400 14px/1.5 Manrope; /* multiline text, used for paragraphes inside components, pages or panels */
  --pillow-typography-body-large: 400 16px/1.5 Manrope; /* multiline text, used for paragraphes inside components, pages or panels */
  --pillow-typography-body-xlarge: 400 20px/1.5 Manrope; /* multiline text, used for paragraphes inside components, pages or panels */
  --pillow-typography-interactive-default-small: 400 12px/1 Manrope; /* singleline text, used for button labels, breadcrumbs, chips and everything that is clickable. */
  --pillow-typography-interactive-default-medium: 400 14px/1 Manrope; /* singleline text, used for button labels, breadcrumbs, chips and everything that is clickable. */
  --pillow-typography-interactive-default-large: 400 16px/1 Manrope; /* singleline text, used for button labels, breadcrumbs, chips and everything that is clickable. */
  --pillow-typography-interactive-default-xl: 400 20px/1 Manrope; /* singleline text, used for button labels, breadcrumbs, chips and everything that is clickable. */
  --pillow-typography-interactive-default-xxl: 400 24px/1 Manrope; /* singleline text, used for button labels, breadcrumbs, chips and everything that is clickable. */
  --pillow-typography-interactive-medium-small: 500 12px/1 Manrope; /* singleline text, used for button labels, breadcrumbs, chips and everything that is clickable. */
  --pillow-typography-interactive-medium-medium: 500 14px/1 Manrope; /* singleline text, used for button labels, breadcrumbs, chips and everything that is clickable. */
  --pillow-typography-interactive-medium-large: 500 16px/1 Manrope; /* singleline text, used for button labels, breadcrumbs, chips and everything that is clickable. */
  --pillow-typography-interactive-medium-xl: 500 20px/1 Manrope; /* singleline text, used for button labels, breadcrumbs, chips and everything that is clickable. */
  --pillow-typography-interactive-medium-xxl: 500 24px/1 Manrope; /* singleline text, used for button labels, breadcrumbs, chips and everything that is clickable. */
  --pillow-typography-interactive-strong-small: 700 12px/1 Manrope; /* singleline text, used for button labels, breadcrumbs, chips and everything that is clickable. */
  --pillow-typography-interactive-strong-medium: 700 14px/1 Manrope; /* singleline text, used for button labels, breadcrumbs, chips and everything that is clickable. */
  --pillow-typography-interactive-strong-large: 700 16px/1 Manrope; /* singleline text, used for button labels, breadcrumbs, chips and everything that is clickable. */
  --pillow-typography-interactive-strong-xl: 700 20px/1 Manrope; /* singleline text, used for button labels, breadcrumbs, chips and everything that is clickable. */
  --pillow-typography-interactive-strong-xxl: 700 24px/1 Manrope; /* singleline text, used for button labels, breadcrumbs, chips and everything that is clickable. */
  --pillow-color-surface-default: #ffffff;
  --pillow-color-surface-muted: #f5f5f5;
  --pillow-color-surface-subtle: #e2e2e2;
  --pillow-color-background-page-default: #f5f5f5;
  --pillow-color-background-neutral-initial: #1b1b1b00;
  --pillow-color-background-neutral-hover: #43434329;
  --pillow-color-background-neutral-active: #4343433d;
  --pillow-color-background-neutral-bold-initial: #cdcdcd;
  --pillow-color-background-neutral-bold-hover: #969696;
  --pillow-color-background-neutral-bold-active: #787878;
  --pillow-color-background-primary-initial: #d0ecf8; /* Primary color to ber used for main CTAs and promotional content, e.g. badges. */
  --pillow-color-background-primary-hover: #bed7e2; /* Primary hover color to ber used for main CTAs and promotional content, e.g. badges. */
  --pillow-color-background-primary-active: #abc2cc; /* Primary color to ber used for main CTAs and promotional content, e.g. badges. */
  --pillow-color-background-primary-bold-initial: #0281c0; /* Primary color to ber used for main CTAs and promotional content, e.g. badges. */
  --pillow-color-background-primary-bold-hover: #146b9e; /* Primary hover color to ber used for main CTAs and promotional content, e.g. badges. */
  --pillow-color-background-primary-bold-active: #1a5176; /* Primary color to ber used for main CTAs and promotional content, e.g. badges. */
  --pillow-color-background-selected-initial: #e9f8fc;
  --pillow-color-background-selected-hover: #d4e2e5;
  --pillow-color-background-selected-active: #c0cccf;
  --pillow-color-background-selected-bold-initial: #0281c0;
  --pillow-color-background-selected-bold-hover: #146b9e;
  --pillow-color-background-selected-bold-active: #1a5176;
  --pillow-color-background-danger-initial: #fcf3f2;
  --pillow-color-background-danger-hover: #e5dddc;
  --pillow-color-background-danger-active: #cfc8c7;
  --pillow-color-background-danger-bold-initial: #db5148;
  --pillow-color-background-danger-bold-hover: #b5453d;
  --pillow-color-background-danger-bold-active: #87372f;
  --pillow-color-background-warning-initial: #faf2e9;
  --pillow-color-background-warning-hover: #e3dcd4;
  --pillow-color-background-warning-active: #cdc7c0;
  --pillow-color-background-warning-bold-initial: #ad7433;
  --pillow-color-background-warning-bold-hover: #8f612c;
  --pillow-color-background-warning-bold-active: #6c4a24;
  --pillow-color-background-success-initial: #dffce8;
  --pillow-color-background-success-hover: #cbe5d3;
  --pillow-color-background-success-active: #b8cfbf;
  --pillow-color-background-success-bold-initial: #12852b;
  --pillow-color-background-success-bold-hover: #176f26;
  --pillow-color-background-success-bold-active: #19541f;
  --pillow-color-background-info-initial: #e9f8fc;
  --pillow-color-background-info-hover: #d4e2e5;
  --pillow-color-background-info-active: #c0cccf;
  --pillow-color-background-info-bold-initial: #019cde;
  --pillow-color-background-info-bold-hover: #1781b7;
  --pillow-color-background-info-bold-active: #1d6188;
  --pillow-color-background-brand-initial: #019cde;
  --pillow-color-background-brand-hover: #1781b7;
  --pillow-color-background-brand-active: #1d6188;
  --pillow-color-background-disabled-default: #cdcdcd7a;
  --pillow-color-text-and-icon-primary: #0281c0; /* Primary text and icon color to be used on main CTAs and promotional content, e.g. badges. */
  --pillow-color-text-and-icon-primary-inverted: #e9f8fc; /* Primary text and icon color to be used on main CTAs and promotional content, e.g. badges. */
  --pillow-color-text-and-icon-neutral: #313131;
  --pillow-color-text-and-icon-neutral-inverted: #f5f5f5;
  --pillow-color-text-and-icon-muted: #787878;
  --pillow-color-text-and-icon-selected: #0281c0;
  --pillow-color-text-and-icon-selected-inverted: #d0ecf8;
  --pillow-color-text-and-icon-warning: #ad7433;
  --pillow-color-text-and-icon-warning-inverted: #ffd7a6;
  --pillow-color-text-and-icon-danger: #bb3c34;
  --pillow-color-text-and-icon-danger-inverted: #fcf3f2;
  --pillow-color-text-and-icon-success: #005208;
  --pillow-color-text-and-icon-success-inverted: #dffce8;
  --pillow-color-text-and-icon-disabled: #969696;
  --pillow-color-text-and-icon-brand: #019cde;
  --pillow-color-text-and-icon-info: #003760;
  --pillow-color-border-primary: #0281c0; /* Primary text and icon color to be used on main CTAs and promotional content, e.g. badges. */
  --pillow-color-border-primary-bold: #003760; /* Primary text and icon color to be used on main CTAs and promotional content, e.g. badges. */
  --pillow-color-border-neutral: #434343;
  --pillow-color-border-subtle: #969696;
  --pillow-color-border-muted: #e2e2e2; /* added defualt, subtle muted border colors */
  --pillow-color-border-selected: #e9f8fc;
  --pillow-color-border-selected-bold: #0281c0;
  --pillow-color-border-warning: #ffbd63;
  --pillow-color-border-warning-bold: #ad7433;
  --pillow-color-border-danger: #ff9f95;
  --pillow-color-border-danger-bold: #982720;
  --pillow-color-border-success: #76e492;
  --pillow-color-border-success-bold: #066b19;
  --pillow-color-border-info: #67c1f5;
  --pillow-color-border-info-bold: #004c7e;
  --pillow-color-border-disabled: #cdcdcd;
  --pillow-color-border-transparent: #1b1b1b00;
  --pillow-color-border-input: #b3b3b3;
  --pillow-color-border-brand: #019cde;
  --pillow-color-focus-outline: #3db1f3; /* Used to be applied to the focus state of elements. */
  --pillow-color-blanket-default: #1b1b1bcc;
  --pillow-color-textfield-background-default: #ffffff;
  --pillow-color-textfield-background-disabled: #fafafa;
  --pillow-shadow-default: 0 0 1px 0 rgba(20,20,20,0.08), 0 1px 8px 2px rgba(20,20,20,0.08);
  --pillow-border-box-shadow-action-textfield-initial: inset 0 0 0 1px #b3b3b3;
  --pillow-border-box-shadow-action-textfield-hover: inset 0 0 0 1.5px #969696;
  --pillow-border-box-shadow-action-textfield-selected: inset 0 0 0 2px #0281c0;
  --pillow-border-box-shadow-action-textfield-error: inset 0 0 0 2px #982720;
  --pillow-border-box-shadow-action-textfield-disabled: inset 0 0 0 1px #cdcdcd;
}