/* This document is generated by script */

/* NORMALIZE.CSS */

/* TF normalize settings */
* {
  box-sizing: border-box;
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections */

/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
  * Correct the inability to style clickable types in iOS and Safari.
  */
button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type='checkbox'],
[type='radio'] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc */

/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}


/* FTJ_VALUES.CSS */

/**
 * These are the raw values for the standard colors that we want.
**/
.theme-ftj {
  --page-max-width: 1176px;
  --gutter-s: 0.75rem;
  --gutter-l: 1.5rem;

  /* Spacings */
  /* https://www.figma.com/file/rNvpernOG8A8EB8xAhv1o9/SL-Foundation-Library?node-id=885%3A0 */
  --space-xxxs: 4px;
  --space-xxs: 8px;
  --space-xs: 16px;
  --space-s: 24px;
  --space-m: 32px;
  --space-l: 40px;
  --space-xl: 48px;
  --space-xxl: 64px;
  --space-xxxl: 72px;
  --space-xxxxl: 80px;

  /* Form Spacings */
  --form-space-xxs: 4px;
  --form-space-xs: 8px;
  --form-space-s: 12px;
  --form-space-m: 16px;
  --form-space-l: 24px;
  --form-space-xl: 32px;
  --form-space-xxl: 40px;
  --form-element-min-height: 44px;
  --space-before-footer: 80px;
  /*  --b_xs: screen and (max-width: 575px);
  --b_sm: screen and (min-width: 576px);
  --b_md: screen and (min-width: 768px);
  --b_lg: screen and (min-width: 1024px);
  --b_xl: screen and (min-width: 1176px);

  --b_sm_max: screen and (max-width: 767px);
  --b_md_max: screen and (max-width: 1023px);
  --b_lg_max: screen and (max-width: 1175px); */

  /* === Z-INDEX === */
  --z_context_menu: 1500;

  /* BASE COLORS */

  --color-red-100: #b01411;
  --color-red-60: #d2755a;
  --color-red-30: #e9bba8;
  --color-red-10: #f8e8e1;

  --color-purple-100: #68286e;
  --color-purple-60: #b596b7;
  --color-purple-30: #d2c0d5;
  --color-purple-10: #f0eaf2;

  --color-blue-100: #164194;
  --color-blue-60: #999fd0;
  --color-blue-30: #c3c5e4;
  --color-blue-10: #ebebf7;

  --color-green-100: #005f74;
  --color-green-60: #92aebc;
  --color-green-30: #bcccd6;
  --color-green-10: #e8eef2;

  --color-cta-100: #0036dc;
  --color-cta-60: #6686ea;
  --color-cta-30: #b3c3f5;
  --color-cta-10: #e6ebfc;

  --color-cta-original: #e6007e;

  --color-neutral-100: #ffffff;
  --color-neutral-200: #f1f2f3;
  --color-neutral-300: #d8dadc;
  --color-neutral-400: #c0c2c6;
  --color-neutral-500: #73777d;
  --color-neutral-600: #4c5157;
  --color-neutral-700: #20252c;
  --color-neutral-800: #12151a;
  --color-neutral-900: #000000;

  --color-warning-100: #fff0e5;
  --color-warning-300: #fb9e53;
  --color-warning-400: #d07432;

  --color-highlight-100: #fdf6d8;
  --color-highlight-300: #f7dd5f;
  --color-highlight-400: #f5cf39;

  --color-error-100: #fdecec;
  --color-error-300: #f05555;
  --color-error-400: #ce3333;

  --color-success-100: #e2f3eb;
  --color-success-300: #1d9f64;
  --color-success-400: #197e50;

  /* The following transport color variables should be the same in all environments.
   * If you make a change here, make sure to do the same in the other files.
   */
  --color-metro-blue: #007db8;
  --color-metro-red: #d71d24;
  --color-metro-green: #148541;
  --color-tram-saltsjobanan: #028387;
  --color-tram-roslagsbanan: #9f599a;
  --color-tram-sparvagcity: #747770;
  --color-tram-nockebybanan: #627892;
  --color-tram-lidingobanan: #a54905;
  --color-tram-tvarbanan: #b65f1f;
  --color-train-commuterrail: #cc417f;
  --color-bus-replacement: #fb9e53;
  --color-boat-pendel: #007db8;
  --color-boat-waab: #95c11f;
  --color-waab-pink: #c64388;
  --color-waab-sky: #1b7db1;
  --color-waab-ocean: #08837b;
  --color-waab-olive: #498228;
  --color-waab-maroon: #bc550c;
  --color-waab-deep-red: #d2471c;
  --color-waab-deep-blue: #006daa;
  --color-waab-ash: #5f6e74;
  --color-waab-mustard: #f9c623;
  --color-bus-dark: #000000;
  --color-bus-light: #ffffff;
  --color-unknown: #c0c2c6;
  --color-walk: #000000;
  --color-bike: #fbff00;

  /* BORDERS */

  --border-width-default: 0.125rem;
  --border-width-thin: 0.0625rem;
  --border-width-thick: 0.25rem;
  --border-width-stripe: 0.5rem;

  --border-radius-link: 0.125rem;
  --border-radius-inline: 0.25rem;
  --border-radius-input: 0.5rem;
  --border-radius-button: 0.5rem;
  --border-radius-card: 0.5rem;
  --border-radius-panel: 1rem;

  --outline-offset: 0.125rem;

  --hover-on-inverse-opacity: 50%;

  /* EFFECTS */

  --hover-translate-distance: -0.1875rem;
  --anim-duration-short: 100ms;

  --shadow-none: 0 0 0 rgb(0 0 0 / 0%);
  --shadow-300: 0 0.125rem 0.25rem rgb(0 0 0 / 15%);
  /* --alpha-overlay */

  --logo-graphic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 60 60'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='white' d='M60 30a30 30 0 1 1-60 0 30 30 0 0 1 60 0Z'/%3E%3Cpath fill='%233778C5' d='M31.04 2.73h.55v3.45c0 .38.25.57.6.57h1.15v.53h-1.25c-.39 0-1.05-.24-1.05-1.21V2.73Z'/%3E%3Cpath fill='%233778C5' d='M30.18 2.73h.54v3.46c0 .67.49 1.43 1.43 1.43h1.19v.53h-1.13c-1.02 0-2.03-.63-2.03-2.03v-3.4ZM28.99 2.73h-.54v3.45c0 .38-.26.57-.6.57H26.7v.53h1.24c.4 0 1.05-.24 1.05-1.21V2.73Z'/%3E%3Cpath fill='%233778C5' d='M29.85 2.73h-.53v3.46a1.4 1.4 0 0 1-1.43 1.43h-1.2v.53h1.13c1.02 0 2.03-.63 2.03-2.03v-3.4Z'/%3E%3Cpath fill='%23ED1C24' d='M19.23 17.52c1.85.12 3.46.2 3.46 2.8V39.4c0 2.44-1.22 2.56-3.46 2.8v.98h14.16v-.99c-2.75-.12-4.32-.2-4.32-2.8v-9.17c4.95 0 5.58 2.87 6.02 6.1h.98V23h-.98c-.55 3.15-1.15 5.95-6.02 5.87v-9.14c0-1.7.7-1.85 2.83-1.85 6.77 0 7.83 2.48 8.7 6.58h.94v-7.92H19.23v.98Z'/%3E%3Cpath fill='%233778C5' d='m6.32 40.1 1.62-.62-.06-.16c-.55.13-.74.06-.96-.51l-.39-1.02 1.55-.6c.21-.07.26-.03.32.14l.37.95c.3.78.25 1-.33 1.34l.07.18 1-.4-1.43-3.71-.14.05c.14.45.16.63-.39.84l-3.02 1.17c-.58.22-.71.17-.94-.34l-.13.05.75 1.95.13-.05c-.17-.5-.14-.67.38-.87l1.53-.59.38 1.02c.2.52.19.72-.37 1.02l.06.16ZM11.03 40.24c-.12.08-.26.28-.12.5.1.17.33.23.51.12.17-.1.23-.34.12-.52-.13-.2-.39-.18-.5-.1Zm.8 1.26c-.13.08-.27.29-.13.5.1.17.33.23.51.12.17-.1.23-.34.12-.51-.13-.21-.39-.19-.5-.11Zm-3.7 4.9c-.16-.29-.14-.42.2-.91l2.61-3.84-.08-.12-3.94.62c-.35.06-.94.15-1.19.1a.5.5 0 0 1-.34-.23l-.12.07.78 1.26.13-.08c-.09-.13-.27-.43 0-.6a.83.83 0 0 1 .26-.1l.93-.17 1.04 1.67-.45.64c-.06.09-.22.3-.32.37-.24.14-.37-.06-.52-.3l-.12.08 1 1.62.13-.08Zm-.43-4.05 2.2-.36L8.6 43.8l-.91-1.46ZM12.54 50.96a.82.82 0 0 1-.22-.7l.25-2.43c.33.21 1.14.78 1.85.07.81-.82.05-1.8-.42-2.27l-1.46-1.46-.1.1c.33.4.37.53-.03.92l-2.29 2.3c-.4.39-.53.48-.98.08l-.1.1 1.46 1.46.1-.1c-.4-.44-.35-.6 0-.95l1.05-1.04.3.29-.37 2.88.85.85.1-.1Zm.6-5.42c.16-.15.24-.14.52.14.22.22.9.93.2 1.63-.76.75-1.57-.03-2.02-.47l1.3-1.3ZM13.64 51.98l1.82 1.1c1.96 1.17 3.22.22 3.74-.63.86-1.44.26-2.75-1.28-3.67l-1.73-1.04-.07.12c.47.33.5.44.21.91l-1.7 2.85c-.28.45-.42.5-.92.24l-.07.12Zm3.48-3.02c.07-.13.14-.25.45-.07.8.48 1.06.87 1.2 1.33.2.66.05 1.28-.28 1.82-1.12 1.86-2.7.91-3.1.67-.31-.19-.36-.28-.23-.5l1.96-3.25ZM22.66 56.1c-.6-.2-.63-.37-.48-.86l1.18-3.63.39.12c.78.26.94.45.83 1.28l.17.06.36-1.23-4.02-1.3-.43 1.2.17.05c.4-.72.64-.8 1.43-.54l.38.12-1.16 3.56c-.17.53-.24.68-.9.5l-.04.14 2.07.67.05-.13ZM27.62 52.96c.07-.55.18-.62.76-.58l.02-.14-2.13-.26-.02.14c.6.1.68.22.61.75l-.42 3.44c-.05.38-.17.47-.35.45-.28-.03-.02-.63-.53-.7-.21-.02-.36.19-.38.33-.01.1.02.22.12.37.07.1.24.22.55.26.2.02 1.26.13 1.43-1.31l.34-2.75ZM29.7 51.35c0 .15.11.37.37.37.2-.01.36-.18.36-.4 0-.2-.19-.36-.39-.35-.25 0-.35.24-.35.38Zm1.48-.05c0 .15.12.37.37.36.2 0 .37-.17.36-.38 0-.2-.18-.37-.38-.37-.25.01-.35.25-.35.4Zm2.4 5.65c-.33-.01-.44-.09-.7-.63l-2-4.18h-.15l-1.43 3.73c-.13.34-.34.9-.51 1.08a.5.5 0 0 1-.38.18v.14l1.49-.05v-.14c-.16 0-.51.02-.52-.3 0-.08.01-.18.05-.28l.3-.89 1.97-.07.33.71c.05.1.15.35.16.47 0 .27-.24.29-.52.3v.14l1.91-.07v-.14Zm-3.73-1.65.8-2.09.93 2.03-1.73.06ZM38.73 50.61l-1.69.49.04.13c.5-.1.72-.1.96.73l.69 2.4h-.02l-3.74-2.67-1.23.35.04.14c.28-.08.4-.08.8.2l.92 3.17c.22.77.1.93-.44 1.12l.04.13 1.7-.48-.05-.14c-.53.13-.73.02-.94-.72l-.8-2.8.01-.01 4.3 3.03.12-.03-1.09-3.79c-.24-.84-.02-.93.42-1.11l-.04-.14ZM41.95 48.66l-.14.07c.03.08.07.25-.11.35-.17.09-.64.05-1.04.26-.6.32-1 1-.6 1.76.35.65.93.72 1.72.75 1.27.05 1.5.22 1.7.6.19.35.13.87-.4 1.15-.9.47-1.69-.2-1.98-.45l-.15.08.94 1.3.15-.08c-.06-.1-.05-.26.09-.33.2-.1.64-.05 1.14-.32.94-.5 1.06-1.37.76-1.93-.72-1.36-3-.32-3.53-1.3-.21-.42.01-.8.34-.98.7-.37 1.44 0 1.84.48l.16-.08-.9-1.33ZM48.56 49.62c-.48.4-.65.36-.98-.02l-2.56-2.84.3-.27c.6-.55.85-.6 1.52-.09l.14-.12-.89-.91-3.13 2.82.81.98.14-.12c-.43-.72-.37-.96.24-1.51l.3-.27 2.5 2.78c.37.41.47.55-.01 1.03l.09.1 1.62-1.46-.1-.1ZM52.34 43.28l-.12.17c.43.7.4 1.14-.13 1.9-.64.92-.65.91-.9.74l-1.52-1.07.67-.93c.36-.5.51-.54 1.06-.27l.1-.14-1.43-1-.1.15c.4.37.5.53.11 1.08l-.66.94-1.36-.95c-.2-.15-.15-.22-.06-.35l.58-.83c.47-.68.68-.77 1.3-.48l.1-.15-.89-.6-2.28 3.26.12.08c.3-.37.44-.49.92-.15l2.72 1.9c.48.34.43.52.18.93l.12.08 2.32-3.31-.85-1ZM51.79 35.63l-.66 1.63.13.06c.23-.46.36-.63 1.16-.31l2.31.94v.01l-4.41 1.3-.48 1.2.13.05c.11-.28.2-.38.66-.52l3.05 1.23c.75.3.8.5.62 1.04l.13.05.66-1.63-.13-.05c-.23.5-.44.58-1.15.29l-2.7-1.1 5.03-1.52.05-.12-3.65-1.48c-.81-.32-.75-.56-.62-1.01l-.13-.06ZM2.32 29.13v-.54h3.45c.38 0 .57-.26.57-.6v-1.16h.53v1.25c0 .4-.24 1.05-1.21 1.05H2.32Z'/%3E%3Cpath fill='%233778C5' d='M2.32 30v-.54h3.46a1.4 1.4 0 0 0 1.43-1.43v-1.2h.54v1.13C7.75 28.98 7.1 30 5.7 30h-3.4ZM2.32 31.18v.55h3.45c.38 0 .57.25.57.6v1.15h.53v-1.25c0-.39-.24-1.05-1.21-1.05H2.32Z'/%3E%3Cpath fill='%233778C5' d='M2.32 30.32v.54h3.46c.67 0 1.43.49 1.43 1.43v1.2h.54v-1.14c0-1.02-.64-2.03-2.04-2.03h-3.4ZM57.68 31.22v.54h-3.45c-.38 0-.57.26-.57.6v1.15h-.53v-1.24c0-.4.24-1.05 1.21-1.05h3.34Z'/%3E%3Cpath fill='%233778C5' d='M57.68 30.36v.53h-3.46a1.4 1.4 0 0 0-1.43 1.43v1.2h-.54v-1.14c0-1.01.64-2.02 2.04-2.02h3.4ZM57.68 29.16v-.54h-3.45c-.38 0-.57-.26-.57-.6v-1.15h-.53v1.24c0 .4.24 1.05 1.21 1.05h3.34Z'/%3E%3Cpath fill='%233778C5' d='M57.68 30.03v-.54h-3.46a1.4 1.4 0 0 1-1.43-1.43v-1.2h-.54V28c0 1.01.64 2.03 2.04 2.03h3.4ZM11.33 10.03l.39-.39 2.44 2.45c.26.26.58.22.83-.03l.8-.81.38.37-.88.88c-.28.28-.91.58-1.6-.1l-2.36-2.37Z'/%3E%3Cpath fill='%233778C5' d='m10.72 10.64.38-.38 2.45 2.45a1.4 1.4 0 0 0 2.02 0l.84-.85.38.38-.8.8c-.72.72-1.88.99-2.87 0l-2.4-2.4ZM9.88 11.48l-.39.38 2.45 2.45c.26.26.22.58-.03.83l-.81.8.37.38.88-.88c.28-.28.58-.91-.1-1.6l-2.37-2.36Z'/%3E%3Cpath fill='%233778C5' d='m10.49 10.87-.38.38 2.45 2.45a1.4 1.4 0 0 1 0 2.02l-.85.84.38.38.8-.8c.72-.72.99-1.88 0-2.87l-2.4-2.4ZM50.15 11.5l.38.39-2.44 2.44c-.27.27-.22.58.02.83l.82.81-.38.37-.88-.88c-.28-.28-.57-.91.11-1.6l2.37-2.36Z'/%3E%3Cpath fill='%233778C5' d='m49.54 10.9.38.37-2.45 2.45a1.4 1.4 0 0 0 0 2.02l.84.84-.38.38-.8-.8c-.72-.71-.98-1.88 0-2.87l2.4-2.4ZM48.7 10.05l-.4-.38-2.43 2.44c-.27.27-.59.22-.83-.03l-.81-.8-.38.36.89.89c.27.27.9.57 1.6-.12l2.35-2.36Z'/%3E%3Cpath fill='%233778C5' d='m49.3 10.66-.38-.38-2.44 2.45a1.4 1.4 0 0 1-2.02 0l-.85-.84-.38.38.8.8c.72.71 1.88.98 2.88-.01l2.4-2.4ZM20.53 4.41l.5-.2 1.3 3.2c.14.35.45.43.77.3l1.07-.43.2.49-1.16.47c-.37.14-1.07.17-1.43-.73l-1.25-3.1Z'/%3E%3Cpath fill='%233778C5' d='m19.73 4.73.5-.2 1.3 3.21a1.4 1.4 0 0 0 1.85.8l1.11-.46.2.5-1.05.43c-.94.38-2.11.17-2.64-1.13l-1.27-3.15ZM18.63 5.18l-.5.2 1.29 3.2c.14.36-.03.63-.35.76L18 9.77l.2.49 1.16-.47c.36-.14.88-.61.52-1.51l-1.25-3.1Z'/%3E%3Cpath fill='%233778C5' d='m19.42 4.86-.5.2 1.3 3.2c.26.63.09 1.52-.79 1.87l-1.1.45.2.5 1.05-.43c.94-.38 1.64-1.35 1.12-2.65l-1.28-3.14ZM41.4 5.2l.51.2-1.3 3.2c-.13.35.03.62.35.75l1.07.43-.2.5-1.16-.48c-.36-.14-.88-.61-.52-1.5a2855 2855 0 0 1 1.26-3.1Z'/%3E%3Cpath fill='%233778C5' d='m40.6 4.87.5.2-1.3 3.2a1.4 1.4 0 0 0 .8 1.87l1.1.45-.2.5-1.05-.43c-.94-.38-1.64-1.34-1.11-2.65l1.27-3.14ZM39.5 4.42l-.5-.2-1.3 3.2c-.14.35-.45.43-.77.3l-1.06-.43-.2.5 1.16.46c.36.15 1.06.17 1.42-.73l1.25-3.1Z'/%3E%3Cpath fill='%233778C5' d='m40.3 4.75-.5-.2-1.3 3.2a1.4 1.4 0 0 1-1.85.8l-1.1-.45-.21.5 1.05.42c.94.38 2.12.17 2.64-1.13l1.27-3.14ZM55.67 20.41l.22.5-3.18 1.35c-.35.15-.43.46-.29.78l.45 1.06-.49.2-.48-1.15c-.16-.36-.2-1.06.7-1.44l3.07-1.3Z'/%3E%3Cpath fill='%233778C5' d='m55.34 19.62.2.49-3.18 1.35a1.4 1.4 0 0 0-.76 1.87l.47 1.1-.5.21-.44-1.04c-.4-.93-.2-2.11 1.09-2.66l3.12-1.32ZM54.87 18.52l-.21-.5-3.18 1.35c-.35.15-.63-.02-.76-.34l-.45-1.05-.48.2.48 1.15c.16.36.63.87 1.53.5l3.07-1.31Z'/%3E%3Cpath fill='%233778C5' d='m55.2 19.31-.2-.49-3.19 1.35a1.4 1.4 0 0 1-1.87-.75l-.47-1.1-.5.2.45 1.05c.4.93 1.37 1.62 2.66 1.07l3.13-1.33ZM5.14 18.49l.21-.5 3.18 1.35c.35.15.63-.02.76-.34l.45-1.05.49.2-.5 1.15c-.14.36-.62.87-1.51.5l-3.08-1.31Z'/%3E%3Cpath fill='%233778C5' d='m4.8 19.28.22-.5 3.18 1.36c.62.27 1.5.11 1.88-.76l.46-1.1.5.22-.44 1.04c-.4.93-1.38 1.62-2.67 1.07L4.8 19.28ZM4.34 20.38l-.21.5 3.18 1.35c.35.15.42.46.28.78l-.44 1.05.48.21.49-1.15c.15-.36.19-1.06-.7-1.44l-3.08-1.3Z'/%3E%3Cpath fill='%233778C5' d='m4.68 19.58-.21.5 3.18 1.35c.63.26 1.13 1 .76 1.87l-.47 1.1.5.21.44-1.04c.4-.93.21-2.11-1.08-2.66l-3.12-1.33Z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='white' d='M0 0h60v60H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");

  --input-height: 44px;
  --f_weight-bold-label: 700;
}

.tokens-ftj {
  /****  COLOR : BACKGROUND  ****/

  --color-background-primary: var(--color-neutral-100);
  --color-background-secondary: var(--color-green-10);
  --color-background-tertiary: var(--color-neutral-200);
  --color-background-inverse: var(--color-neutral-700);
  --color-background-inverse-secondary: var(--color-neutral-800);

  --color-brand-primary: var(--color-purple-100);
  --color-brand-accent: var(--color-cta-original);

  /****  COLOR : TEXT  ****/

  --color-text-primary: var(--color-neutral-900);
  --color-text-muted: var(--color-neutral-600);
  --color-text-disabled: var(--color-neutral-500);
  --color-text-on-inverse: var(--color-neutral-100);

  --color-title-xxl: var(--color-brand-primary);
  --color-title-xl: var(--color-brand-primary);
  --color-title-l: var(--color-brand-primary);
  --color-title-m: var(--color-brand-primary);

  /****  COLOR : INTERACTION  ****/

  --color-interaction-cta: var(--color-cta-100);
  --color-interaction-cta-hover: var(--color-cta-100);
  --color-interaction-cta-focus: var(--color-cta-100);

  --color-interaction-link: var(--color-cta-100);

  --color-interaction-disabled-background: var(--color-neutral-200);
  --color-interaction-disabled-border: var(--color-neutral-300);

  /****  COLOR : FEEDBACK  ****/

  --color-feedback-error-primary: var(--color-error-400);
  --color-feedback-error-background: var(--color-error-100);
  --color-feedback-warning-primary: var(--color-warning-400);
  --color-feedback-warning-background: var(--color-warning-100);
  --color-feedback-highlight-primary: var(--color-highlight-400);
  --color-feedback-highlight-background: var(--color-highlight-100);
  --color-feedback-success-primary: var(--color-success-400);
  --color-feedback-success-background: var(--color-success-100);

  /****  BORDERS  ****/

  --border-color-default: var(--color-neutral-300);
  --border-color-tertiary: var(--color-neutral-300);
  --border-color-input: var(--color-neutral-700);
  --border-color-stripe: var(--color-purple-100);

  --border-color-hover: var(--color-cta-30);
  --border-color-focus: var(--color-cta-100);

  /* Hover on inverse color is derived from --border-color-focus-on-inverse
   with opacity that is described in variable --hover-on-inverse-opacity */
  --border-color-focus-on-inverse: var(--color-neutral-100);

  /****  EFFECTS  ****/

  --shadow-nav-secondary: var(--shadow-300);
  --shadow-card: var(--shadow-300);
}


/* TYPOGRAPHY-FTJ.CSS */

html {
  font-size: 1rem;
  font-family: 'SL Gothic';
}

body {
  font-size: 1.125rem;
  font-family: 'SL Gothic';
}

.body-maxWidth {
  max-width: 34.5rem;
}
.body-margin {
  margin: 0 0 1rem 0;
}
.body-padding {
  padding: 0;
}
.body-fontWeight {
  font-weight: normal;
}
.nullMargin {
  margin: 0;
}

/* REGULAR */
@font-face {
  font-family: 'SL Gothic';
  src: url('slgothictext2-regular.woff2') format('woff2'), url('slgothictext2-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* BOLD */
@font-face {
  font-family: 'SL Gothic';
  src: url('slgothictext2-bold.woff2') format('woff2'), url('slgothictext2-bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* SL Gothic Display  */
@font-face {
  font-family: 'SL Gothic Display';
  src: url('slgothicdisplay-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: bold;
  font-display: swap;
}

/* BOLD */
@font-face {
  font-family: 'FT Display';
  src: url('FTDisplay.woff2') format('woff2'), url('FTDisplay.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

.heading-xxl {
  font-family: 'FT Display';
  padding: 0;
  margin: 0;
  font-weight: bold;
  font-size: 4.5rem;
  line-height: 4.5rem;
  font-size: clamp(3rem, 2.836879vw + 2.265957rem, 4.5rem);
  line-height: clamp(3.25rem, 2.364066vw + 2.638298rem, 4.5rem);
} /* Fallback media-query - 414px is the lower calculated bound for fluid */
@media screen and (max-width: 414px) {
  .heading-xxl {
    font-size: 3rem;
    line-height: 3.25rem;
  }
}

.heading-xxl-base {
  font-family: 'FT Display';
  font-size: 4.5rem;
  line-height: 4.5rem;
  font-size: clamp(3rem, 2.836879vw + 2.265957rem, 4.5rem);
  line-height: clamp(3.25rem, 2.364066vw + 2.638298rem, 4.5rem);
} /* Fallback media-query - 414px is the lower calculated bound for fluid */
@media screen and (max-width: 414px) {
  .heading-xxl {
    font-size: 3rem;
    line-height: 3.25rem;
  }
}

.heading-xl {
  font-family: 'FT Display';
  padding: 0;
  margin: 0;
  font-weight: bold;
  font-size: 3.75rem;
  line-height: 4rem;
  font-size: clamp(2.5rem, 2.364066vw + 1.888298rem, 3.75rem);
  line-height: clamp(2.75rem, 2.364066vw + 2.138298rem, 4rem);
} /* Fallback media-query - 414px is the lower calculated bound for fluid */
@media screen and (max-width: 414px) {
  .heading-xl {
    font-size: 2.5rem;
    line-height: 2.75rem;
  }
}

.heading-xl-base {
  font-family: 'FT Display';
  font-size: 3.75rem;
  line-height: 4rem;
  font-size: clamp(2.5rem, 2.364066vw + 1.888298rem, 3.75rem);
  line-height: clamp(2.75rem, 2.364066vw + 2.138298rem, 4rem);
} /* Fallback media-query - 414px is the lower calculated bound for fluid */
@media screen and (max-width: 414px) {
  .heading-xl {
    font-size: 2.5rem;
    line-height: 2.75rem;
  }
}

.heading-l {
  font-family: 'FT Display';
  padding: 0;
  margin: 0;
  font-weight: bold;
  font-size: 3rem;
  line-height: 3.25rem;
  font-size: clamp(2rem, 1.891253vw + 1.510638rem, 3rem);
  line-height: clamp(2.25rem, 1.891253vw + 1.760638rem, 3.25rem);
} /* Fallback media-query - 414px is the lower calculated bound for fluid */
@media screen and (max-width: 414px) {
  .heading-l {
    font-size: 2rem;
    line-height: 2.25rem;
  }
}

.heading-l-base {
  font-family: 'FT Display';
  font-size: 3rem;
  line-height: 3.25rem;
  font-size: clamp(2rem, 1.891253vw + 1.510638rem, 3rem);
  line-height: clamp(2.25rem, 1.891253vw + 1.760638rem, 3.25rem);
} /* Fallback media-query - 414px is the lower calculated bound for fluid */
@media screen and (max-width: 414px) {
  .heading-l {
    font-size: 2rem;
    line-height: 2.25rem;
  }
}

.heading-m {
  font-family: 'FT Display';
  padding: 0;
  margin: 0;
  font-weight: bold;
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-size: clamp(1.5rem, 1.41844vw + 1.132979rem, 2.25rem);
  line-height: clamp(2rem, 0.945626vw + 1.755319rem, 2.5rem);
} /* Fallback media-query - 414px is the lower calculated bound for fluid */
@media screen and (max-width: 414px) {
  .heading-m {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

.heading-m-base {
  font-family: 'FT Display';
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-size: clamp(1.5rem, 1.41844vw + 1.132979rem, 2.25rem);
  line-height: clamp(2rem, 0.945626vw + 1.755319rem, 2.5rem);
} /* Fallback media-query - 414px is the lower calculated bound for fluid */
@media screen and (max-width: 414px) {
  .heading-m {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

.heading-s {
  font-family: 'FT Display';
  padding: 0;
  margin: 0;
  font-weight: bold;
  font-size: 1.5rem;
  line-height: 1.75rem;
  font-size: clamp(1.25rem, 0.472813vw + 1.12766rem, 1.5rem);
  line-height: clamp(1.5rem, 0.472813vw + 1.37766rem, 1.75rem);
} /* Fallback media-query - 414px is the lower calculated bound for fluid */
@media screen and (max-width: 414px) {
  .heading-s {
    font-size: 1.25rem;
    line-height: 1.5rem;
  }
}

.heading-s-base {
  font-family: 'FT Display';
  font-size: 1.5rem;
  line-height: 1.75rem;
  font-size: clamp(1.25rem, 0.472813vw + 1.12766rem, 1.5rem);
  line-height: clamp(1.5rem, 0.472813vw + 1.37766rem, 1.75rem);
} /* Fallback media-query - 414px is the lower calculated bound for fluid */
@media screen and (max-width: 414px) {
  .heading-s {
    font-size: 1.25rem;
    line-height: 1.5rem;
  }
}

.heading-xs {
  font-family: 'SL Gothic';
  padding: 0;
  margin: 0;
  font-weight: bold;
  font-size: 1.25rem;
  line-height: 1.5rem;
  font-size: clamp(1rem, 0.472813vw + 0.87766rem, 1.25rem);
  line-height: clamp(1.25rem, 0.472813vw + 1.12766rem, 1.5rem);
} /* Fallback media-query - 414px is the lower calculated bound for fluid */
@media screen and (max-width: 414px) {
  .heading-xs {
    font-size: 1rem;
    line-height: 1.25rem;
  }
}

.heading-xs-base {
  font-family: 'SL Gothic';
  font-size: 1.25rem;
  line-height: 1.5rem;
  font-size: clamp(1rem, 0.472813vw + 0.87766rem, 1.25rem);
  line-height: clamp(1.25rem, 0.472813vw + 1.12766rem, 1.5rem);
} /* Fallback media-query - 414px is the lower calculated bound for fluid */
@media screen and (max-width: 414px) {
  .heading-xs {
    font-size: 1rem;
    line-height: 1.25rem;
  }
}

.body {
  font-family: 'SL Gothic';
  padding: 0;
  margin: 0 0 1rem 0;
  font-weight: normal;
  font-size: 1.125rem;
  line-height: 1.75rem;
  max-width: 34.5rem;
  font-size: clamp(1rem, 0.236407vw + 0.93883rem, 1.125rem);
  line-height: clamp(1.5rem, 0.472813vw + 1.37766rem, 1.75rem);
} /* Fallback media-query - 414px is the lower calculated bound for fluid */
@media screen and (max-width: 414px) {
  .body {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

.body-base {
  font-family: 'SL Gothic';
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-size: clamp(1rem, 0.236407vw + 0.93883rem, 1.125rem);
  line-height: clamp(1.5rem, 0.472813vw + 1.37766rem, 1.75rem);
} /* Fallback media-query - 414px is the lower calculated bound for fluid */
@media screen and (max-width: 414px) {
  .body {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

.body-s {
  font-family: 'SL Gothic';
  padding: 0;
  margin: 0 0 1rem 0;
  font-weight: normal;
  font-size: 1rem;
  line-height: 1.5rem;
  max-width: 34.5rem;
  font-size: clamp(1rem, 0vw + 1rem, 1rem);
  line-height: clamp(1.5rem, 0vw + 1.5rem, 1.5rem);
} /* Fallback media-query - 414px is the lower calculated bound for fluid */
@media screen and (max-width: 414px) {
  .body-s {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

.body-s-base {
  font-family: 'SL Gothic';
  font-size: 1rem;
  line-height: 1.5rem;
  font-size: clamp(1rem, 0vw + 1rem, 1rem);
  line-height: clamp(1.5rem, 0vw + 1.5rem, 1.5rem);
} /* Fallback media-query - 414px is the lower calculated bound for fluid */
@media screen and (max-width: 414px) {
  .body-s {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

.preamble {
  font-family: 'SL Gothic';
  padding: 0;
  margin: 0 0 2rem 0;
  font-weight: normal;
  font-size: 1.5rem;
  line-height: 2rem;
  max-width: 34.5rem;
  font-size: clamp(1.25rem, 0.472813vw + 1.12766rem, 1.5rem);
  line-height: clamp(1.75rem, 0.472813vw + 1.62766rem, 2rem);
} /* Fallback media-query - 414px is the lower calculated bound for fluid */
@media screen and (max-width: 414px) {
  .preamble {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

.preamble-base {
  font-family: 'SL Gothic';
  font-size: 1.5rem;
  line-height: 2rem;
  font-size: clamp(1.25rem, 0.472813vw + 1.12766rem, 1.5rem);
  line-height: clamp(1.75rem, 0.472813vw + 1.62766rem, 2rem);
} /* Fallback media-query - 414px is the lower calculated bound for fluid */
@media screen and (max-width: 414px) {
  .preamble {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

/** Remove margin for last paragraph in a text **/
p.body:last-child,
p.body-s:last-child,
p.preamble:last-child {
  margin: 0;
}

/** Spacing bottom **/
.heading-xxl,
.heading-xl,
.heading-l {
  margin-bottom: 1rem;
}
@media screen and (max-width: 576px) {
  .heading-xxl,
  .heading-xl,
  .heading-l {
    margin-bottom: 1rem;
  }
}

/** Spacing bottom **/
.heading-m,
.heading-s,
.heading-xs {
  margin-bottom: 1rem;
}
@media screen and (max-width: 576px) {
  .heading-m,
  .heading-s,
  .heading-xs {
    margin-bottom: 0.5rem;
  }
}

/** 
  * Spacing top (headings: heading-xxl heading-xl heading-l).
  * Contextually added if a heading follows a paragraph, unordered list or ordered list
  **/
p + .heading-xxl,
ul + .heading-xxl,
ol + .heading-xxl,
p + .heading-xl,
ul + .heading-xl,
ol + .heading-xl,
p + .heading-l,
ul + .heading-l,
ol + .heading-l {
  padding-top: 1.5rem;
}
@media screen and (max-width: 576px) {
  p + .heading-xxl,
  ul + .heading-xxl,
  ol + .heading-xxl,
  p + .heading-xl,
  ul + .heading-xl,
  ol + .heading-xl,
  p + .heading-l,
  ul + .heading-l,
  ol + .heading-l {
    padding-top: 1rem;
  }
}

/** 
  * Spacing top (headings: heading-m heading-s heading-xs).
  * Contextually added if a heading follows a paragraph, unordered list or ordered list
  **/
p + .heading-m,
ul + .heading-m,
ol + .heading-m,
p + .heading-s,
ul + .heading-s,
ol + .heading-s,
p + .heading-xs,
ul + .heading-xs,
ol + .heading-xs {
  padding-top: 1rem;
}
@media screen and (max-width: 576px) {
  p + .heading-m,
  ul + .heading-m,
  ol + .heading-m,
  p + .heading-s,
  ul + .heading-s,
  ol + .heading-s,
  p + .heading-xs,
  ul + .heading-xs,
  ol + .heading-xs {
    padding-top: 0.5rem;
  }
}
