*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html,
body {
  font-family: Arial, sans-serif;
}

html {
  font-size: 16px;
}

body {
  font-weight: normal;
  line-height: 1.5rem;
  letter-spacing: 0.019rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

#root {
  isolation: isolate;
}

:root {
  /* alpha */
  --cortex-alpha-none: 0%;
  --cortex-alpha-low: 25%;
  --cortex-alpha-medium: 50%;
  --cortex-alpha-high: 75%;

  /* animation */
  --cortex-animation-default: cubic-bezier(0.645, 0.045, 0.355, 1);

  /* colors */
  --cortex-colors-primary-A25: #d8ffee;
  --cortex-colors-primary-A50: #97ffd8;
  --cortex-colors-primary-A100: #00fabd;
  --cortex-colors-primary-A200: #00dfa9;
  --cortex-colors-primary-A300: #00c696;
  --cortex-colors-primary-A400: #00b482;
  --cortex-colors-primary-A500: #00a97a;
  --cortex-colors-primary-A600: #009771;
  --cortex-colors-primary-A700: #008762;
  --cortex-colors-primary-A800: #007154;
  --cortex-colors-primary-A900: #00664a;
  --cortex-colors-primary-A1000: #00513b;
  --cortex-colors-primary-A1100: #003929;
  --cortex-colors-secondary-A25: #fbf4fb;
  --cortex-colors-secondary-A50: #f3e6f6;
  --cortex-colors-secondary-A100: #ead1ef;
  --cortex-colors-secondary-A200: #e1b6e9;
  --cortex-colors-secondary-A300: #d76eeb;
  --cortex-colors-secondary-A400: #bd32d9;
  --cortex-colors-secondary-A500: #9e2ab5;
  --cortex-colors-secondary-A600: #832b93;
  --cortex-colors-secondary-A700: #711e82;
  --cortex-colors-secondary-A800: #5e2669;
  --cortex-colors-secondary-A900: #4a1e52;
  --cortex-colors-secondary-A1000: #36163c;
  --cortex-colors-secondary-A1100: #4a1e52;
  --cortex-colors-neutral-A25: #ffffff;
  --cortex-colors-neutral-A50: #f9f9f9;
  --cortex-colors-neutral-A100: #ececec;
  --cortex-colors-neutral-A200: #dbdbdb;
  --cortex-colors-neutral-A300: #c6c6c6;
  --cortex-colors-neutral-A400: #b0b0b0;
  --cortex-colors-neutral-A500: #9a9a9a;
  --cortex-colors-neutral-A600: #868686;
  --cortex-colors-neutral-A700: #737373;
  --cortex-colors-neutral-A800: #636363;
  --cortex-colors-neutral-A900: #545454;
  --cortex-colors-neutral-A1000: #454545;
  --cortex-colors-neutral-A1100: #202020;
  --cortex-colors-success-A25: #d8ffee;
  --cortex-colors-success-A50: #97ffd8;
  --cortex-colors-success-A100: #00fabd;
  --cortex-colors-success-A200: #00dfa9;
  --cortex-colors-success-A300: #00c696;
  --cortex-colors-success-A400: #00b482;
  --cortex-colors-success-A500: #00a97a;
  --cortex-colors-success-A600: #009771;
  --cortex-colors-success-A700: #008762;
  --cortex-colors-success-A800: #007154;
  --cortex-colors-success-A900: #00664a;
  --cortex-colors-success-A1000: #00513b;
  --cortex-colors-success-A1100: #003929;
  --cortex-colors-warning-A25: #f9f6ef;
  --cortex-colors-warning-A50: #f7ead0;
  --cortex-colors-warning-A100: #f7d59b;
  --cortex-colors-warning-A200: #f7b95a;
  --cortex-colors-warning-A300: #f29000;
  --cortex-colors-warning-A400: #e18123;
  --cortex-colors-warning-A500: #cb6c13;
  --cortex-colors-warning-A600: #b15d0e;
  --cortex-colors-warning-A700: #994f0a;
  --cortex-colors-warning-A800: #824307;
  --cortex-colors-warning-A900: #6f3805;
  --cortex-colors-warning-A1000: #4f2602;
  --cortex-colors-warning-A1100: #321801;
  --cortex-colors-critical-A25: #fbf5f5;
  --cortex-colors-critical-A50: #f6e8e8;
  --cortex-colors-critical-A100: #f2d2d3;
  --cortex-colors-critical-A200: #f0b6b9;
  --cortex-colors-critical-A300: #f2949b;
  --cortex-colors-critical-A400: #f66c7d;
  --cortex-colors-critical-A500: #f7385f;
  --cortex-colors-critical-A600: #e40147;
  --cortex-colors-critical-A700: #ba2749;
  --cortex-colors-critical-A800: #9c243f;
  --cortex-colors-critical-A900: #832036;
  --cortex-colors-critical-A1000: #5e1525;
  --cortex-colors-critical-A1100: #290003;
  --cortex-colors-info-A25: #e3f3ff;
  --cortex-colors-info-A50: #d3ecff;
  --cortex-colors-info-A100: #aadeff;
  --cortex-colors-info-A200: #6eceff;
  --cortex-colors-info-A300: #04bcf4;
  --cortex-colors-info-A400: #06adea;
  --cortex-colors-info-A500: #2da0d3;
  --cortex-colors-info-A600: #278eb4;
  --cortex-colors-info-A700: #02708e;
  --cortex-colors-info-A800: #035877;
  --cortex-colors-info-A900: #01526c;
  --cortex-colors-info-A1000: #013c50;
  --cortex-colors-info-A1100: #012632;

  /* box-shadow */
  --cortex-box-shadow-none: none;
  --cortex-box-shadow-xs: 0px 0px 4px 0px rgba(8, 14, 18, 0.2);
  --cortex-box-shadow-s: 0px 2px 6px 0px rgba(8, 14, 18, 0.12);
  --cortex-box-shadow-m: 0px 4px 10px 0px rgba(8, 14, 18, 0.2);
  --cortex-box-shadow-l: 0px 0px 2px 0px rgba(0, 0, 0, 0.2), 0px 4px 20px 0px rgba(0, 0, 0, 0.2);
  --cortex-box-shadow-xl:
    0px 0px 32px 0px rgba(8, 14, 18, 0.4), 0px 16px 24px 0px rgba(0, 0, 0, 0.04);

  /* border-width */
  --cortex-border-width-none: 0px;
  --cortex-border-width-s: 1px;
  --cortex-border-width-m: 2px;
  --cortex-border-width-l: 4px;

  /* outline */
  --cortex-outline-none: 0;
  --cortex-outline-s: 25;
  --cortex-outline-m: 50;
  --cortex-outline-l: 75;

  /* dimension */
  --cortex-dimension-none: 0px;
  --cortex-dimension-xxs: 4px;
  --cortex-dimension-xs: 8px;
  --cortex-dimension-s: 12px;
  --cortex-dimension-m: 16px;
  --cortex-dimension-l: 24px;
  --cortex-dimension-xl: 32px;
  --cortex-dimension-xxl: 40px;
  --cortex-dimension-xxl-2: 48px;
  --cortex-dimension-xxl-3: 56px;
  --cortex-dimension-xxl-4: 64px;
  --cortex-dimension-xxl-5: 72px;
  --cortex-dimension-xxl-6: 80px;
  --cortex-dimension-xxl-7: 88px;
  --cortex-dimension-xxl-8: 96px;
  --cortex-dimension-xxl-9: 104px;
  --cortex-dimension-xxl-10: 112px;
  --cortex-dimension-xxl-11: 120px;

  /* typography */
  --cortex-typography-font-weight-regular: 400;
  --cortex-typography-font-weight-medium: 500;
  --cortex-typography-font-weight-semibold: 600;
  --cortex-typography-font-weight-bold: bold;
  --cortex-typography-h1-font-size: 3rem;
  --cortex-typography-h1-line-height: 4.125rem;
  --cortex-typography-h1-letter-spacing: -0.025rem;
  --cortex-typography-h2-font-size: 24px;
  --cortex-typography-h2-line-height: 54;
  --cortex-typography-h2-letter-spacing: -0.025rem;
  --cortex-typography-h3-font-size: 2rem;
  --cortex-typography-h3-line-height: 2.75rem;
  --cortex-typography-h3-letter-spacing: -0.013rem;
  --cortex-typography-h4-font-size: 1.5rem;
  --cortex-typography-h4-line-height: 2.25rem;
  --cortex-typography-h4-letter-spacing: 0;
  --cortex-typography-h5-font-size: 1.125rem;
  --cortex-typography-h5-line-height: 1.625rem;
  --cortex-typography-h5-letter-spacing: 0.019rem;
  --cortex-typography-small-font-size: 0.875rem;
  --cortex-typography-small-line-height: 1.375rem;
  --cortex-typography-small-letter-spacing: 0.019rem;
  --cortex-typography-xsmall-font-size: 0.75rem;
  --cortex-typography-xsmall-line-height: 1rem;
  --cortex-typography-xsmall-letter-spacing: 0.031rem;

  /* alert */
  --cortex-alert-padding-horizontal: var(--cortex-dimension-m);
  --cortex-alert-padding-vertical: var(--cortex-dimension-m);
  --cortex-alert-border-radius: var(--cortex-dimension-xxs);
  --cortex-alert-border-width: var(--cortex-border-width-s);
  --cortex-alert-neutral-background-color: var(--cortex-colors-neutral-A50);
  --cortex-alert-neutral-border-color: var(--cortex-colors-neutral-A500);
  --cortex-alert-neutral-icon-color: var(--cortex-colors-neutral-A500);
  --cortex-alert-neutral-text-color: var(--cortex-colors-neutral-A1100);
  --cortex-alert-info-background-color: var(--cortex-colors-info-A50);
  --cortex-alert-info-border-color: var(--cortex-colors-info-A500);
  --cortex-alert-info-icon-color: var(--cortex-colors-info-A500);
  --cortex-alert-info-text-color: var(--cortex-colors-info-A1100);
  --cortex-alert-success-background-color: var(--cortex-colors-success-A50);
  --cortex-alert-success-border-color: var(--cortex-colors-success-A500);
  --cortex-alert-success-icon-color: var(--cortex-colors-success-A500);
  --cortex-alert-success-text-color: var(--cortex-colors-neutral-A1100);
  --cortex-alert-warning-background-color: var(--cortex-colors-warning-A50);
  --cortex-alert-warning-border-color: var(--cortex-colors-warning-A500);
  --cortex-alert-warning-icon-color: var(--cortex-colors-warning-A500);
  --cortex-alert-warning-text-color: var(--cortex-colors-neutral-A1100);
  --cortex-alert-critical-background-color: var(--cortex-colors-critical-A50);
  --cortex-alert-critical-border-color: var(--cortex-colors-critical-A500);
  --cortex-alert-critical-icon-color: var(--cortex-colors-critical-A500);
  --cortex-alert-critical-text-color: var(--cortex-colors-neutral-A1100);

  /* button */
  --cortex-button-big-padding-horizontal: var(--cortex-dimension-l);
  --cortex-button-big-padding-vertical: var(--cortex-dimension-s);
  --cortex-button-medium-padding-horizontal: var(--cortex-dimension-m);
  --cortex-button-medium-padding-vertical: var(--cortex-dimension-xs);
  --cortex-button-small-padding-horizontal: var(--cortex-dimension-m);
  --cortex-button-small-padding-vertical: var(--cortex-dimension-xs);
  --cortex-button-primary-background-color-enabled: var(--cortex-colors-primary-A500);
  --cortex-button-primary-background-color-disabled: var(--cortex-colors-neutral-A50);
  --cortex-button-primary-background-color-hover: var(--cortex-colors-primary-A600);
  --cortex-button-primary-background-color-focused: var(--cortex-colors-primary-A500);
  --cortex-button-primary-background-color-pressed: var(--cortex-colors-primary-A800);
  --cortex-button-primary-background-color-loading: var(--cortex-colors-primary-A500);
  --cortex-button-primary-text-color-enabled: var(--cortex-colors-neutral-A25);
  --cortex-button-primary-text-color-disabled: var(--cortex-colors-neutral-A200);
  --cortex-button-primary-text-color-hover: var(--cortex-colors-neutral-A25);
  --cortex-button-primary-text-color-focused: var(--cortex-colors-neutral-A25);
  --cortex-button-primary-text-color-pressed: var(--cortex-colors-neutral-A25);
  --cortex-button-primary-border-color-enabled: transparent;
  --cortex-button-primary-border-color-disabled: transparent;
  --cortex-button-primary-border-color-hover: transparent;
  --cortex-button-primary-border-color-focused: transparent;
  --cortex-button-primary-border-color-pressed: transparent;
  --cortex-button-primary-border-color-loading: transparent;
  --cortex-button-primary-border-width: var(--cortex-border-width-none);
  --cortex-button-primary-icon-color-enabled: var(--cortex-colors-neutral-A25);
  --cortex-button-primary-icon-color-disabled: var(--cortex-colors-neutral-A200);
  --cortex-button-primary-icon-color-hover: var(--cortex-colors-neutral-A25);
  --cortex-button-primary-icon-color-focused: var(--cortex-colors-neutral-A25);
  --cortex-button-primary-icon-color-pressed: var(--cortex-colors-neutral-A25);
  --cortex-button-primary-icon-color-loading: var(--cortex-colors-neutral-A25);
  --cortex-button-secondary-background-color-enabled: var(--cortex-colors-neutral-A25);
  --cortex-button-secondary-background-color-disabled: var(--cortex-colors-neutral-A50);
  --cortex-button-secondary-background-color-hover: var(--cortex-colors-neutral-A50);
  --cortex-button-secondary-background-color-focused: var(--cortex-colors-neutral-A25);
  --cortex-button-secondary-background-color-pressed: var(--cortex-colors-neutral-A25);
  --cortex-button-secondary-background-color-loading: var(--cortex-colors-neutral-A25);
  --cortex-button-secondary-text-color-enabled: var(--cortex-colors-neutral-A500);
  --cortex-button-secondary-text-color-disabled: var(--cortex-colors-neutral-A200);
  --cortex-button-secondary-text-color-hover: var(--cortex-colors-neutral-A600);
  --cortex-button-secondary-text-color-focused: var(--cortex-colors-neutral-A500);
  --cortex-button-secondary-text-color-pressed: var(--cortex-colors-neutral-A800);
  --cortex-button-secondary-border-color-enabled: var(--cortex-colors-neutral-A500);
  --cortex-button-secondary-border-color-disabled: var(--cortex-colors-neutral-A200);
  --cortex-button-secondary-border-color-hover: var(--cortex-colors-neutral-A600);
  --cortex-button-secondary-border-color-focused: var(--cortex-colors-neutral-A500);
  --cortex-button-secondary-border-color-pressed: var(--cortex-colors-neutral-A800);
  --cortex-button-secondary-border-color-loading: var(--cortex-colors-neutral-A500);
  --cortex-button-secondary-border-width: var(--cortex-border-width-s);
  --cortex-button-secondary-icon-color-enabled: var(--cortex-colors-neutral-A500);
  --cortex-button-secondary-icon-color-disabled: var(--cortex-colors-neutral-A200);
  --cortex-button-secondary-icon-color-hover: var(--cortex-colors-neutral-A600);
  --cortex-button-secondary-icon-color-focused: var(--cortex-colors-neutral-A500);
  --cortex-button-secondary-icon-color-pressed: var(--cortex-colors-neutral-A800);
  --cortex-button-secondary-icon-color-loading: var(--cortex-colors-neutral-A500);
  --cortex-button-tertiary-background-color-enabled: transparent;
  --cortex-button-tertiary-background-color-disabled: transparent;
  --cortex-button-tertiary-background-color-hover: transparent;
  --cortex-button-tertiary-background-color-focused: transparent;
  --cortex-button-tertiary-background-color-pressed: transparent;
  --cortex-button-tertiary-background-color-loading: transparent;
  --cortex-button-tertiary-text-color-enabled: var(--cortex-colors-primary-A500);
  --cortex-button-tertiary-text-color-disabled: var(--cortex-colors-neutral-A200);
  --cortex-button-tertiary-text-color-hover: var(--cortex-colors-primary-A600);
  --cortex-button-tertiary-text-color-focused: var(--cortex-colors-primary-A500);
  --cortex-button-tertiary-text-color-pressed: var(--cortex-colors-primary-A800);
  --cortex-button-tertiary-border-color-enabled: transparent;
  --cortex-button-tertiary-border-color-disabled: transparent;
  --cortex-button-tertiary-border-color-hover: transparent;
  --cortex-button-tertiary-border-color-focused: transparent;
  --cortex-button-tertiary-border-color-pressed: transparent;
  --cortex-button-tertiary-border-color-loading: transparent;
  --cortex-button-tertiary-border-width: var(--cortex-border-width-none);
  --cortex-button-tertiary-icon-color-enabled: var(--cortex-colors-primary-A500);
  --cortex-button-tertiary-icon-color-disabled: var(--cortex-colors-neutral-A200);
  --cortex-button-tertiary-icon-color-hover: var(--cortex-colors-primary-A600);
  --cortex-button-tertiary-icon-color-focused: var(--cortex-colors-primary-A500);
  --cortex-button-tertiary-icon-color-pressed: var(--cortex-colors-primary-A800);
  --cortex-button-tertiary-icon-color-loading: var(--cortex-colors-primary-A500);
  --cortex-button-border-radius: var(--cortex-dimension-xxl-9);
  --cortex-button-outline-color: var(--cortex-colors-info-A200);
  --cortex-button-outline-width: var(--cortex-border-width-m);
  --cortex-button-font-weight: var(--cortex-typography-font-weight-bold);

  /* card */
  --cortex-card-alpha-disabled: var(--cortex-alpha-medium);
  --cortex-card-border-color-hover: var(--cortex-colors-info-A500);
  --cortex-card-border-color-focused: var(--cortex-colors-info-A500);
  --cortex-card-border-radius: var(--cortex-dimension-xxs);
  --cortex-card-border-width: var(--cortex-border-width-s);
  --cortex-card-background-color-enabled: var(--cortex-colors-neutral-A25);
  --cortex-card-background-color-hover: var(--cortex-colors-neutral-A25);
  --cortex-card-background-color-focused: var(--cortex-colors-neutral-A25);
  --cortex-card-background-color-pressed: var(--cortex-colors-neutral-A25);
  --cortex-card-background-color-disabled: var(--cortex-colors-neutral-A25);
  --cortex-card-outline-color: var(--cortex-colors-info-A500);
  --cortex-card-outline-width: var(--cortex-outline-width-m);
  --cortex-card-elevated-border-color-enabled: transparent;
  --cortex-card-elevated-border-color-pressed: var(--cortex-colors-neutral-A800);
  --cortex-card-elevated-border-color-disabled: transparent;
  --cortex-card-elevated-drop-shadow: var(--cortex-box-shadow-xs);
  --cortex-card-outlined-border-color-enabled: var(--cortex-colors-neutral-A300);
  --cortex-card-outlined-border-color-pressed: var(--cortex-colors-neutral-A800);
  --cortex-card-outlined-border-color-disabled: var(--cortex-colors-neutral-A300);
  --cortex-card-outlined-drop-shadow: var(--cortex-box-shadow-none);

  /* spinner */
  --cortex-spinner-accent-color: var(--cortex-colors-primary-A500);
  --cortex-spinner-light-color: var(--cortex-colors-neutral-A25);
  --cortex-spinner-dark-color: var(--cortex-colors-neutral-A500);
  --cortex-spinner-small-border-width: var(--cortex-border-width-m);
  --cortex-spinner-small-size: var(--cortex-dimension-m);
  --cortex-spinner-medium-border-width: var(--cortex-border-width-m);
  --cortex-spinner-medium-size: var(--cortex-dimension-l);
  --cortex-spinner-big-border-width: var(--cortex-border-width-l);
  --cortex-spinner-big-size: var(--cortex-dimension-xl);

  /* icon */
  --cortex-icon-big-size: var(--cortex-dimension-l);
  --cortex-icon-medium-size: var(--cortex-dimension-m);
  --cortex-icon-small-size: var(--cortex-dimension-s);
  --cortex-icon-xsmall-size: var(--cortex-dimension-xs);
}

.tiptap p.is-editor-empty:first-child::before {
  color: var(--cortex-colors-neutral-A500);
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
  font-size: var(--cortex-typography-h5-font-size);
  position: absolute;
  top: var(--cortex-dimension-l);
}

.tiptap p.is-editor-empty:first-child::after {
  color: var(--cortex-colors-neutral-A500);
  content: attr(data-placeholder-subtitle);
  float: left;
  height: 0;
  pointer-events: none;
  font-size: var(--cortex-typography-small-font-size);
}