:root {
  /* Setting the font size also in root because by default, rem takes the root value of font size.
     Since we don't have a default value, it was previously the browser defaut, wich was 16px */
  font-size: 14px !important;
}

body {
  /* We put "!important" to override bootstrap for react because they are on the same level*/
  font-family: var(--font-family) !important;
  font-size: 14px !important;
  letter-spacing: -0.01em !important;
}

input, button, select, optgroup, textarea {
  /* inherit to only use our default value */
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
}

/* Aligning numbers in td's */
td {
  font-variant-numeric: tabular-nums;
}

:root {

  /* z-index */
  --zindex-massive: 99999;
  --zindex-reactstrap-tooltip: 1670;
  --zindex-reactstrap-popover: 1660;
  --zindex-select-responsive-fullscreen: 1560;
  --zindex-hover-modal: 1504;
  --zindex-modal-confirmation: 1503;
  --zindex-modal: 1502;
  --zindex-modal-backdrop: 1501;
  --zindex-reactstrap-modal: 1500;
  --zindex-dialog: 1500;
  --zindex-reactstrap-modal-backdrop: 1499;
  --zindex-topbar-mobile: 1450;
  --zindex-sidebar-nav: 1400;
  --zindex-topbar-popper: 1330;
  --zindex-topbar: 1320;
  --zindex-topbar-mobilemenu: 1310;
  --zindex-search-resource: 1300;
  --zindex-sidebar-nav-under-modal: 1200;
  --zindex-select-menu-portal: 1502;
  --zindex-reactstrap-fixed: 1030;
  --zindex-reactstrap-sticky: 1020;
  --zindex-reactstrap-dropdown: 1010;
  --zindex-slidepanel: 600;
  --zindex-content: 300;
  --zindex-1: 1;

  --font-family: 'Inter', sans-serif;

  /* token: typo */
  --font-display-m: 400 24px/32px var(--font-family);
  --font-title-l: 500 24px/32px var(--font-family);
  --font-title-m: 500 20px/28px var(--font-family);
  --font-title-s: 500 18px/26px var(--font-family);
  --font-textBold-l: 500 16px/24px var(--font-family);
  --font-textBold-m: 500 14px/20px var(--font-family);
  --font-textBold-s: 500 12px/16px var(--font-family);
  --font-textBold-xs: 500 10px/14px var(--font-family);
  --font-text-l: 400 16px/24px var(--font-family);
  --font-text-m: 400 14px/20px var(--font-family);
  --font-text-s: 400 12px/16px var(--font-family);

  /* token: pal */
  --pal-white: #ffffff;
  --pal-black: #000000;
  --pal-grey100: #f0f3f8;
  --pal-grey200: #e0e5f2;
  --pal-grey300: #d0d6ed;
  --pal-grey400: #a4aec9;
  --pal-grey500: #676d84;
  --pal-grey600: #383a49;
  --pal-blue50: #f1f7fe;
  --pal-blue100: #e1eefd;
  --pal-blue200: #bddcfa;
  --pal-blue300: #83c0f6;
  --pal-blue400: #41a0ef;
  --pal-blue500: #1884df;
  --pal-blue600: #0c6ecb;
  --pal-blue700: #0a529a;
  --pal-blue800: #0d467f;
  --pal-blue900: #113c69;
  --pal-blue950: #0b2546;
  --pal-pink50: #fef1fb;
  --pal-pink100: #fee5f9;
  --pal-pink200: #ffcbf5;
  --pal-pink300: #ffa0eb;
  --pal-pink400: #ff65db;
  --pal-pink500: #fc38c7;
  --pal-pink600: #ed15a8;
  --pal-pink700: #bf077f;
  --pal-pink800: #aa0a70;
  --pal-pink900: #8e0d60;
  --pal-pink950: #570038;
  --pal-green50: #eefbf4;
  --pal-green100: #d6f5e3;
  --pal-green200: #b1e9cb;
  --pal-green300: #7dd8ae;
  --pal-green400: #46be8a;
  --pal-green500: #25a471;
  --pal-green600: #17845b;
  --pal-green700: #13694b;
  --pal-green800: #11543c;
  --pal-green900: #0f4533;
  --pal-green950: #07271d;
  --pal-orange50: #fef8ee;
  --pal-orange100: #fdf0d7;
  --pal-orange200: #fadcae;
  --pal-orange300: #f6c27b;
  --pal-orange400: #f2a654;
  --pal-orange500: #ed8322;
  --pal-orange600: #de6a18;
  --pal-orange700: #b85016;
  --pal-orange800: #934019;
  --pal-orange900: #763618;
  --pal-orange950: #401a0a;
  --pal-red50: #fef2f3;
  --pal-red100: #ffe1e2;
  --pal-red200: #ffb7ba;
  --pal-red300: #fea3a7;
  --pal-red400: #fb6e74;
  --pal-red500: #f24148;
  --pal-red600: #e0222a;
  --pal-red700: #bc1920;
  --pal-red800: #9b191e;
  --pal-red900: #811b1f;
  --pal-red950: #46090c;

  /* token: layers */
  --ly-level0: var(--pal-grey100);
  --ly-level1: var(--pal-white);
  --ly-level2: var(--pal-grey100);
  --ly-inset: var(--pal-grey200);
  --ly-overlay: var(--pal-white);

  /* token: sizes */
  --size-v16: 16px;
  --size-v24: 24px;
  --size-v32: 32px;
  --size-v40: 40px;
  --size-v48: 48px;
  --size-v56: 56px;

  /* token: spacings */
  --spacing-v4: 4px;
  --spacing-v8: 8px;
  --spacing-v16: 16px;
  --spacing-v24: 24px;
  --spacing-v32: 32px;
  --spacing-v40: 40px;

  /* token: radiuses */
  --radiuses-v4: 4px;
  --radiuses-v8: 8px;
  --radiuses-v16: 16px;
  --radiuses-v24: 24px;
  --radiuses-full: 9999px;

  /* token: background */
  --bg-white-default: var(--pal-white);
  --bg-grey-light-default: var(--pal-grey100);
  --bg-grey-light-hover: var(--pal-grey200);
  --bg-grey-strong-default: var(--pal-grey500);
  --bg-grey-strong-hover: var(--pal-grey600);
  --bg-blue-light-default: var(--pal-blue100);
  --bg-blue-light-hover: var(--pal-blue200);
  --bg-blue-medium-default: var(--pal-blue400);
  --bg-blue-medium-hover: var(--pal-blue500);
  --bg-blue-strong-default: var(--pal-blue600);
  --bg-blue-strong-hover: var(--pal-blue700);
  --bg-pink-light-default: var(--pal-pink100);
  --bg-pink-light-hover: var(--pal-pink200);
  --bg-pink-strong-default: var(--pal-pink700);
  --bg-pink-strong-hover: var(--pal-pink800);
  --bg-success-default: var(--pal-green100);
  --bg-success-hover: var(--pal-green200);
  --bg-success-strong-default: var(--pal-green600);
  --bg-success-strong-hover: var(--pal-green700);
  --bg-warning-light-default: var(--pal-orange100);
  --bg-warning-light-hover: var(--pal-orange200);
  --bg-warning-strong-default: var(--pal-orange600);
  --bg-warning-strong-hover: var(--pal-orange700);
  --bg-error-light-default: var(--pal-red100);
  --bg-error-light-hover: var(--pal-red200);
  --bg-error-strong-default: var(--pal-red600);
  --bg-error-strong-hover: var(--pal-red700);

  /* token: foreground */
  --fg-white-default: var(--pal-white);
  --fg-white-hover: var(--pal-white);
  --fg-white-disabled: var(--pal-grey200);
  --fg-greyLight-default: var(--pal-grey400);
  --fg-greyLight-hover: var(--pal-grey500);
  --fg-greyLight-disabled: var(--pal-grey200);
  --fg-greyMedium-default: var(--pal-grey500);
  --fg-greyMedium-hover: var(--pal-grey600);
  --fg-greyMedium-disabled: var(--pal-grey300);
  --fg-greyStrong-default: var(--pal-grey600);
  --fg-greyStrong-hover: var(--pal-grey600);
  --fg-greyStrong-disabled: var(--pal-grey400);
  --fg-blue-default: var(--pal-blue600);
  --fg-blue-hover: var(--pal-blue700);
  --fg-blue-disabled: var(--pal-blue300);
  --fg-pink-default: var(--pal-pink700);
  --fg-pink-hover: var(--pal-pink800);
  --fg-pink-disabled: var(--pal-pink300);
  --fg-success-default: var(--pal-green600);
  --fg-success-hover: var(--pal-green700);
  --fg-success-disabled: var(--pal-green300);
  --fg-warning-default: var(--pal-orange600);
  --fg-warning-hover: var(--pal-orange700);
  --fg-warning-disabled: var(--pal-orange300);
  --fg-error-default: var(--pal-red600);
  --fg-error-hover: var(--pal-red700);
  --fg-error-disabled: var(--pal-red300);

  /* token: overlay */
  --overlay-s: 420px;
  --overlay-m: 520px;
  --overlay-l: 620px;

  /* token: shadows */
  --shadow-default: 0.0px 2.0px 5.0px 0px rgba(103, 106, 132, 0.18);
  --shadow-overlay: 0.0px 5.0px 50.0px 0px rgba(56, 58, 73, 0.18);
  --shadow-layerLevel1: 0.0px 4.0px 10.0px 0px rgba(164, 174, 201, 0.05);

  /* token: borders */
  --br-grey-light: var(--pal-grey100);
  --br-grey-medium: var(--pal-grey300);
  --br-grey-strong: var(--pal-grey500);
  --br-blue-light: var(--pal-blue200);
  --br-blue-medium: var(--pal-blue300);
  --br-blue-strong: var(--pal-blue600);
  --br-pink-light: var(--pal-pink100);
  --br-pink-medium: var(--pal-pink300);
  --br-pink-strong: var(--pal-pink700);
  --br-success-light: var(--pal-green100);
  --br-success-medium: var(--pal-green300);
  --br-success-strong: var(--pal-green600);
  --br-warning-light: var(--pal-orange100);
  --br-warning-medium: var(--pal-orange300);
  --br-warning-strong: var(--pal-orange600);
  --br-error-light: var(--pal-red100);
  --br-error-medium: var(--pal-red300);
  --br-error-strong: var(--pal-red600);

  /* token: icons */
  --font-icon-xl: 300 20px/28px var(--font-family);
  --font-icon-l: 300 16px/24px var(--font-family);
  --font-icon-m: 300 14px/20px var(--font-family);
  --font-icon-s: 300 12px/16px var(--font-family);
  --font-icon-xs: 300 10px/16px var(--font-family);

  /* safe area */
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
}

@supports (font-variation-settings: normal) {
  :root {
    --font-family: 'Inter var', sans-serif;
  }
}

:root {
  --is-navbar-mobile: 0;
  --navbar-left-size: calc(2 * var(--spacing-v32) + var(--size-v48)); /* 112px */
  --navbar-bottom-size: 0px;
}

@media screen and (max-width: 767px) and (orientation: portrait) {
  :root {
    --is-navbar-mobile: 1;
    --navbar-bottom-size: calc(2 * var(--spacing-v8) + var(--size-v32) + var(--spacing-v4) + var(--spacing-v16) + var(--safe-area-bottom));
    --navbar-left-size: 0px;
  }
}

@media screen and (max-height: 520px) and (orientation: landscape) {
  :root {
    --is-navbar-mobile: 1;
    --navbar-bottom-size: 0px;
    --navbar-left-size: calc(2 * var(--spacing-v8) + var(--size-v32) + var(--spacing-v4) + var(--spacing-v16) + var(--safe-area-left));
  }
}

@media print {
  :root {
    --is-navbar-mobile: 0;
    --navbar-left-size: 0px;
    --navbar-bottom-size: 0px;
  }
}

/* Fonts */

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 100;
  font-display: swap;
  src: url("fonts/Inter-Thin.woff2") format("woff2"),
       url("fonts/Inter-Thin.woff") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 100;
  font-display: swap;
  src: url("fonts/Inter-ThinItalic.woff2") format("woff2"),
       url("fonts/Inter-ThinItalic.woff") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 200;
  font-display: swap;
  src: url("fonts/Inter-ExtraLight.woff2") format("woff2"),
       url("fonts/Inter-ExtraLight.woff") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 200;
  font-display: swap;
  src: url("fonts/Inter-ExtraLightItalic.woff2") format("woff2"),
       url("fonts/Inter-ExtraLightItalic.woff") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/Inter-Light.woff2") format("woff2"),
       url("fonts/Inter-Light.woff") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/Inter-LightItalic.woff2") format("woff2"),
       url("fonts/Inter-LightItalic.woff") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Inter-Regular.woff2") format("woff2"),
       url("fonts/Inter-Regular.woff") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Inter-Italic.woff2") format("woff2"),
       url("fonts/Inter-Italic.woff") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/Inter-Medium.woff2") format("woff2"),
       url("fonts/Inter-Medium.woff") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/Inter-MediumItalic.woff2") format("woff2"),
       url("fonts/Inter-MediumItalic.woff") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/Inter-SemiBold.woff2") format("woff2"),
       url("fonts/Inter-SemiBold.woff") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/Inter-SemiBoldItalic.woff2") format("woff2"),
       url("fonts/Inter-SemiBoldItalic.woff") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/Inter-Bold.woff2") format("woff2"),
       url("fonts/Inter-Bold.woff") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/Inter-BoldItalic.woff2") format("woff2"),
       url("fonts/Inter-BoldItalic.woff") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/Inter-ExtraBold.woff2") format("woff2"),
       url("fonts/Inter-ExtraBold.woff") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/Inter-ExtraBoldItalic.woff2") format("woff2"),
       url("fonts/Inter-ExtraBoldItalic.woff") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/Inter-Black.woff2") format("woff2"),
       url("fonts/Inter-Black.woff") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/Inter-BlackItalic.woff2") format("woff2"),
       url("fonts/Inter-BlackItalic.woff") format("woff");
}

@font-face {
  font-family: 'Inter var';
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  font-named-instance: 'Regular';
  src: url("fonts/Inter-roman.var.woff2") format("woff2");
}

@font-face {
  font-family: 'Inter var';
  font-weight: 100 900;
  font-display: swap;
  font-style: italic;
  font-named-instance: 'Italic';
  src: url("fonts/Inter-italic.var.woff2") format("woff2");
}