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


[data-o3-brand="professional"] {
  --o3-color-palette-ft-pink: #fcd0b1; /** FT Pink is used for the FT logo */
  --o3-color-palette-ft-grey: #333333;
  --o3-color-palette-white: #ffffff;
  --o3-color-palette-black: #000000;
  /**
   * Claret is the main branding colour for MyFT related products. It should be used sparingly and never be used as a background colour.
   * 
   * Usage example: MyFT branding; MyFT CTAs
   */
  --o3-color-palette-claret: #990f3d;
  --o3-color-palette-teal: #0d7680; /** Teal is the most striking colour and main CTA colour on ft.com. It is reserved for important action items that need to stand out: buttons, text links and other critical functional use cases. */
  /**
   * Oxford is used to denote opinion pieces (in combination with Sky). It is used on the homepage and in articles. Use for information and callouts in general.
   * 
   * Usage example: opinion branding; opinion topic tags.
   */
  --o3-color-palette-oxford: #0f5499;
  --o3-color-palette-slate: #262a33; /** Slate is a warmer version of black. It is used as inverse backgrounds for editorial content and as a theme option(Mono) for buttons. */
  --o3-color-palette-paper: #fff1e5; /** Paper, as it’s name implies, is the FT’s main background colour. It is the main expression of the brand colour on product. It is a lighter, more legible shade of FT Pink and can be seen as a kind of replacement of white. */
  --o3-color-palette-mandarin: #ff8833;
  --o3-color-palette-light-blue: #00a0dd;
  --o3-color-palette-crimson: #cc0000;
  --o3-color-palette-graphics-dark-blue: #006f9b;
  --o3-color-palette-wheat: #f2dfce;
  --o3-color-palette-candy: #ff7faa;
  --o3-color-palette-wasabi: #96cc28;
  --o3-color-palette-jade: #00994d;
  --o3-color-palette-velvet: #593380;
  --o3-color-palette-lemon: #ffec1a;
  --o3-color-palette-sky: #cce6ff;
  --o3-color-palette-matisse-blue: #355778;
  --o3-color-palette-black-5: #f2e5da;
  --o3-color-palette-black-10: #e6d9ce;
  --o3-color-palette-black-20: #ccc1b7;
  --o3-color-palette-black-30: #b3a9a0;
  --o3-color-palette-black-40: #999189;
  --o3-color-palette-black-50: #807973;
  --o3-color-palette-black-60: #66605c;
  --o3-color-palette-black-70: #4d4845;
  --o3-color-palette-black-80: #33302e;
  --o3-color-palette-black-90: #1a1817;
  --o3-color-palette-white-10: #fff2e8;
  --o3-color-palette-white-20: #fff4ea;
  --o3-color-palette-white-40: #fff7ef;
  --o3-color-palette-white-60: #fff9f5;
  --o3-color-palette-white-80: #fffcfa;
  --o3-color-palette-oxford-30: #082a4d;
  --o3-color-palette-oxford-40: #0a3866;
  --o3-color-palette-oxford-50: #0d4680;
  --o3-color-palette-oxford-60: #0f5499;
  --o3-color-palette-oxford-70: #1262b3;
  --o3-color-palette-oxford-80: #1470cc;
  --o3-color-palette-oxford-90: #177ee6;
  --o3-color-palette-oxford-100: #1a8cff;
  --o3-color-palette-teal-20: #052f33;
  --o3-color-palette-teal-30: #08474d;
  --o3-color-palette-teal-40: #0a5e66;
  --o3-color-palette-teal-50: #0d7680;
  --o3-color-palette-teal-60: #0f8e99;
  --o3-color-palette-teal-70: #12a5b3;
  --o3-color-palette-teal-80: #14bdcc;
  --o3-color-palette-teal-90: #17d4e6;
  --o3-color-palette-teal-100: #1aecff;
  --o3-color-palette-claret-30: #4d081f;
  --o3-color-palette-claret-40: #660a29;
  --o3-color-palette-claret-50: #800d33;
  --o3-color-palette-claret-60: #990f3d;
  --o3-color-palette-claret-70: #b31247;
  --o3-color-palette-claret-80: #cc1452;
  --o3-color-palette-claret-90: #e6175c;
  --o3-color-palette-claret-100: #ff1a66;
  --o3-color-palette-wheat-100: #ffebd9;
  --o3-color-palette-mint: #c0efd8;
  --o3-color-palette-mint-80: #a4ccb8;
  --o3-color-palette-mint-70: #8fb3a1;
  --o3-color-palette-mint-60: #7b998a;
  --o3-color-palette-mint-50: #668073;
  --o3-color-palette-mint-40: #52665c;
  --o3-color-palette-mint-30: #3d4d45;
  --o3-color-use-case-link-inverse-text-focus: #8fb3a1;
  --o3-color-use-case-muted-inverse-text: #a8aaad; /** "Muted" text is less prominent, for example credits and captions. */
  --o3-color-use-case-button-foreground-disabled: #fff7ef;
  --o3-color-use-case-button-hover: #515257;
  --o3-color-use-case-button-pressed: #7d7a7a;
  --o3-color-use-case-button-disabled: #d4c9c1;
  --o3-color-use-case-error-background: rgba(204, 0, 0, 0.06);
  --o3-color-use-case-success-background: #d7f0d1;
  --o3-color-use-case-success-foreground: #00572c;
  --o3-spacing-5xs: 0.25rem;
  --o3-spacing-4xs: 0.5rem;
  --o3-spacing-3xs: 0.75rem;
  --o3-spacing-2xs: 1rem;
  --o3-spacing-xs: 1.25rem;
  --o3-spacing-s: 1.5rem;
  --o3-spacing-m: 2rem;
  --o3-spacing-l: 2.5rem;
  --o3-spacing-xl: 3rem;
  --o3-spacing-2xl: 4rem;
  --o3-spacing-3xl: 5rem;
  --o3-spacing-4xl: 6rem;
  --o3-type-label-text-case: uppercase; /** Use this style for labels such as badges and metadata in teasers and toppers (e.g., "Live," "Premium," or the main timestamp). Avoid using full sentences. */
  --o3-type-body-content-base-font-family: Georgia; /** Use this style only for the body copy of content pages, such as articles, live news and other content experience page. */
  --o3-type-body-content-base-font-weight: Regular; /** Use this style only for the body copy of content pages, such as articles, live news and other content experience page. */
  --o3-type-body-content-highlight-font-family: Georgia; /** Use this style only for the body copy of content pages, such as articles, live news and other content experience page. */
  --o3-type-body-content-highlight-font-weight: Bold; /** Use this style only for the body copy of content pages, such as articles, live news and other content experience page. */
  --o3-type-body-content-emphasis-font-family: Georgia; /** Use this style only for the body copy of content pages, such as articles, live news and other content experience page. */
  --o3-type-body-content-emphasis-font-weight: Regular; /** Use this style only for the body copy of content pages, such as articles, live news and other content experience page. */
  --o3-type-body-content-emphasis-font-style: italic; /** Use this style only for the body copy of content pages, such as articles, live news and other content experience page. */
  --o3-font-family-metric: 'metric 2 VF', sans-serif;
  --o3-font-family-financier-display: 'financier display VF', serif;
  --o3-font-family-georgia: georgia, serif;
  --o3-font-weight-light: 300;
  --o3-font-weight-regular: 400;
  --o3-font-weight-medium: 500;
  --o3-font-weight-semibold: 700;
  --o3-font-weight-bold: 800;
  --o3-font-lineheight-0: 1.25rem;
  --o3-font-lineheight-1: 1.25rem;
  --o3-font-lineheight-2: 1.5rem;
  --o3-font-lineheight-3: 1.75rem;
  --o3-font-lineheight-4: 2rem;
  --o3-font-lineheight-5: 2rem;
  --o3-font-lineheight-6: 2.5rem;
  --o3-font-lineheight-7: 3rem;
  --o3-font-lineheight-8: 3.5rem;
  --o3-font-lineheight-9: 4.5rem;
  --o3-font-lineheight-10: 5.25rem;
  --o3-font-lineheight-negative-2: 1rem;
  --o3-font-lineheight-negative-1: 1rem;
  --o3-font-size-0: 1rem;
  --o3-font-size-1: 1.125rem;
  --o3-font-size-2: 1.25rem;
  --o3-font-size-3: 1.5rem;
  --o3-font-size-4: 1.75rem;
  --o3-font-size-5: 2rem;
  --o3-font-size-6: 2.5rem;
  --o3-font-size-7: 3rem;
  --o3-font-size-8: 3.5rem;
  --o3-font-size-9: 4.5rem;
  --o3-font-size-10: 5.25rem;
  --o3-font-size-negative-2: 0.75rem;
  --o3-font-size-negative-1: 0.875rem;
  --o3-font-lineheight-metric2-0: 1.5rem;
  --o3-font-lineheight-metric2-1: 1.5rem;
  --o3-font-lineheight-metric2-2: 1.75rem;
  --o3-font-lineheight-metric2-3: 2rem;
  --o3-font-lineheight-metric2-4: 2rem;
  --o3-font-lineheight-metric2-5: 2.5rem;
  --o3-font-lineheight-metric2-6: 3rem;
  --o3-font-lineheight-metric2-7: 3.5rem;
  --o3-font-lineheight-metric2-8: 4.5rem;
  --o3-font-lineheight-metric2-9: 5.25rem;
  --o3-font-lineheight-metric2-negative-2: 1rem;
  --o3-font-lineheight-metric2-negative-1: 1.25rem;
  --o3-font-size-metric2-0: 1rem;
  --o3-font-size-metric2-1: 1.125rem;
  --o3-font-size-metric2-2: 1.25rem;
  --o3-font-size-metric2-3: 1.5rem;
  --o3-font-size-metric2-4: 1.75rem;
  --o3-font-size-metric2-5: 2rem;
  --o3-font-size-metric2-6: 2.5rem;
  --o3-font-size-metric2-7: 3rem;
  --o3-font-size-metric2-8: 4rem;
  --o3-font-size-metric2-9: 4.5rem;
  --o3-font-size-metric2-negative-2: 0.75rem;
  --o3-font-size-metric2-negative-1: 0.875rem;
  --o3-border-radius-1: 0.125rem; /** for default radius on interactive elements */
  --o3-border-radius-2: 0.25rem; /** for the outer radius of interactive elements that have both inner and outer boundaries as in box radio button  */
  --o3-color-use-case-link-text: var(--o3-color-palette-slate);
  --o3-color-use-case-link-text-hover: var(--o3-color-palette-slate);
  --o3-color-use-case-link-text-focus: var(--o3-color-palette-slate);
  --o3-color-use-case-link-underline: var(--o3-color-palette-mint-80);
  --o3-color-use-case-link-underline-hover: var(--o3-color-palette-mint-80);
  --o3-color-use-case-link-underline-focus: var(--o3-color-palette-black);
  --o3-color-use-case-link-inverse-text: var(--o3-color-palette-mint);
  --o3-color-use-case-link-inverse-text-hover: var(--o3-color-palette-mint-70);
  --o3-color-use-case-link-inverse-underline: var(--o3-color-palette-mint);
  --o3-color-use-case-link-inverse-underline-hover: var(--o3-color-palette-mint-70);
  --o3-color-use-case-link-inverse-underline-focus: var(--o3-color-palette-black);
  --o3-color-use-case-page-background: var(--o3-color-palette-paper);
  --o3-color-use-case-page-inverse-background: var(--o3-color-palette-slate);
  --o3-color-use-case-body-text: var(--o3-color-palette-black-80);
  --o3-color-use-case-body-inverse-text: var(--o3-color-palette-white);
  --o3-color-use-case-support-text: var(--o3-color-palette-black-70);
  --o3-color-use-case-support-inverse-text: #e9eaeb;
  --o3-color-use-case-muted-text: var(--o3-color-palette-black-50); /** "Muted" text is less prominent, for example credits and captions. */
  --o3-color-use-case-heading-text: var(--o3-color-palette-black-80);
  --o3-color-use-case-heading-inverse-text: var(--o3-color-palette-white);
  --o3-color-use-case-footer-text: var(--o3-color-palette-black-80);
  --o3-color-use-case-caption-text: var(--o3-color-palette-black-80);
  --o3-color-use-case-button-foreground: var(--o3-color-palette-white);
  --o3-color-use-case-button-default: var(--o3-color-palette-slate);
  --o3-color-use-case-error-text: var(--o3-color-palette-crimson);
  --o3-color-use-case-error: var(--o3-color-palette-crimson); /** [DEPRECATED] This token is going to be looked at in the upcoming audit. */
  --o3-type-display-lg-font-family: var(--o3-font-family-financier-display); /** Use this style for large screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages. */
  --o3-type-display-lg-font-weight: var(--o3-font-weight-bold); /** Use this style for large screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages. */
  --o3-type-display-lg-font-size: var(--o3-font-size-7); /** Use this style for large screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages. */
  --o3-type-display-lg-line-height: var(--o3-font-lineheight-7); /** Use this style for large screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages. */
  --o3-type-display-md-font-family: var(--o3-font-family-financier-display); /** Use this style for medium screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages. */
  --o3-type-display-md-font-weight: var(--o3-font-weight-bold); /** Use this style for medium screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages. */
  --o3-type-display-md-font-size: var(--o3-font-size-6); /** Use this style for medium screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages. */
  --o3-type-display-md-line-height: var(--o3-font-lineheight-6); /** Use this style for medium screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages. */
  --o3-type-display-sm-font-family: var(--o3-font-family-financier-display); /** Use this style for small screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages. */
  --o3-type-display-sm-font-weight: var(--o3-font-weight-bold); /** Use this style for small screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages. */
  --o3-type-display-sm-font-size: var(--o3-font-size-5); /** Use this style for small screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages. */
  --o3-type-display-sm-line-height: var(--o3-font-lineheight-5); /** Use this style for small screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages. */
  --o3-type-headline-lg-font-family: var(--o3-font-family-financier-display); /** Use this style for large screens headlines in standard-sized teasers and text only toppers (eg. Opinion and News). */
  --o3-type-headline-lg-font-weight: var(--o3-font-weight-light); /** Use this style for large screens headlines in standard-sized teasers and text only toppers (eg. Opinion and News). */
  --o3-type-headline-lg-font-size: var(--o3-font-size-6); /** Use this style for large screens headlines in standard-sized teasers and text only toppers (eg. Opinion and News). */
  --o3-type-headline-lg-line-height: var(--o3-font-lineheight-6); /** Use this style for large screens headlines in standard-sized teasers and text only toppers (eg. Opinion and News). */
  --o3-type-headline-md-font-family: var(--o3-font-family-financier-display); /** Use this style for medium screens headlines in smaller teasers and text only toppers (eg. Opinion and News). */
  --o3-type-headline-md-font-weight: var(--o3-font-weight-light); /** Use this style for medium screens headlines in smaller teasers and text only toppers (eg. Opinion and News). */
  --o3-type-headline-md-font-size: var(--o3-font-size-5); /** Use this style for medium screens headlines in smaller teasers and text only toppers (eg. Opinion and News). */
  --o3-type-headline-md-line-height: var(--o3-font-lineheight-5); /** Use this style for medium screens headlines in smaller teasers and text only toppers (eg. Opinion and News). */
  --o3-type-headline-sm-font-family: var(--o3-font-family-financier-display); /** Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News). */
  --o3-type-headline-sm-font-weight: var(--o3-font-weight-light); /** Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News). */
  --o3-type-headline-sm-font-size: var(--o3-font-size-2); /** Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News). */
  --o3-type-headline-sm-line-height: var(--o3-font-lineheight-2); /** Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News). */
  --o3-type-title-lg-font-family: var(--o3-font-family-metric); /** Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints. */
  --o3-type-title-lg-font-weight: var(--o3-font-weight-semibold); /** Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints. */
  --o3-type-title-lg-font-size: var(--o3-font-size-metric2-4); /** Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints. */
  --o3-type-title-lg-line-height: var(--o3-font-lineheight-metric2-3); /** Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints. */
  --o3-type-title-md-font-family: var(--o3-font-family-metric); /** Use this style as H3 or subtitles within the content body to break paragraphs, or for titles of components like forms, tables and cards across all breakpoints. */
  --o3-type-title-md-font-weight: var(--o3-font-weight-regular); /** Use this style as H3 or subtitles within the content body to break paragraphs, or for titles of components like forms, tables and cards across all breakpoints. */
  --o3-type-title-md-font-size: var(--o3-font-size-metric2-3); /** Use this style as H3 or subtitles within the content body to break paragraphs, or for titles of components like forms, tables and cards across all breakpoints. */
  --o3-type-title-md-line-height: var(--o3-font-lineheight-metric2-3); /** Use this style as H3 or subtitles within the content body to break paragraphs, or for titles of components like forms, tables and cards across all breakpoints. */
  --o3-type-title-sm-font-family: var(--o3-font-family-metric); /** Use H6 for subtitles within the content body to break up paragraphs, and H2 for subheadings on stream pages or as subtitles for components such as forms, tables, and cards across all breakpoints. */
  --o3-type-title-sm-font-weight: var(--o3-font-weight-regular); /** Use H6 for subtitles within the content body to break up paragraphs, and H2 for subheadings on stream pages or as subtitles for components such as forms, tables, and cards across all breakpoints. */
  --o3-type-title-sm-line-height: var(--o3-font-lineheight-metric2-2); /** Use H6 for subtitles within the content body to break up paragraphs, and H2 for subheadings on stream pages or as subtitles for components such as forms, tables, and cards across all breakpoints. */
  --o3-type-title-sm-font-size: var(--o3-font-size-metric2-2); /** Use H6 for subtitles within the content body to break up paragraphs, and H2 for subheadings on stream pages or as subtitles for components such as forms, tables, and cards across all breakpoints. */
  --o3-type-body-lg-font-family: var(--o3-font-family-metric); /** Use primarily for the stand-first (introductory summary or highlight) in topper component, as larger body text in components, or section description. */
  --o3-type-body-lg-font-weight: var(--o3-font-weight-regular); /** Use primarily for the stand-first (introductory summary or highlight) in topper component, as larger body text in components, or section description. */
  --o3-type-body-lg-font-size: var(--o3-font-size-metric2-1); /** Use primarily for the stand-first (introductory summary or highlight) in topper component, as larger body text in components, or section description. */
  --o3-type-body-lg-line-height: var(--o3-font-lineheight-metric2-1); /** Use primarily for the stand-first (introductory summary or highlight) in topper component, as larger body text in components, or section description. */
  --o3-type-body-base-font-family: var(--o3-font-family-metric); /** Use this style for the stand-first in teasers and as the default body copy style across components such as location in the byline. */
  --o3-type-body-base-font-weight: var(--o3-font-weight-regular); /** Use this style for the stand-first in teasers and as the default body copy style across components such as location in the byline. */
  --o3-type-body-base-font-size: var(--o3-font-size-metric2-0); /** Use this style for the stand-first in teasers and as the default body copy style across components such as location in the byline. */
  --o3-type-body-base-line-height: var(--o3-font-lineheight-metric2-0); /** Use this style for the stand-first in teasers and as the default body copy style across components such as location in the byline. */
  --o3-type-body-highlight-font-family: var(--o3-font-family-metric); /** Use this style for bold formatting in body copy or for small interactive elements, such as Topic tags and Author names. */
  --o3-type-body-highlight-font-weight: var(--o3-font-weight-semibold); /** Use this style for bold formatting in body copy or for small interactive elements, such as Topic tags and Author names. */
  --o3-type-body-highlight-font-size: var(--o3-font-size-metric2-0); /** Use this style for bold formatting in body copy or for small interactive elements, such as Topic tags and Author names. */
  --o3-type-body-highlight-line-height: var(--o3-font-lineheight-metric2-0); /** Use this style for bold formatting in body copy or for small interactive elements, such as Topic tags and Author names. */
  --o3-type-detail-font-family: var(--o3-font-family-metric); /** Use this style for caption in visual assets such as image and video and for small text elements, such as secondary metadata, caveats, or footnotes. */
  --o3-type-detail-font-weight: var(--o3-font-weight-regular); /** Use this style for caption in visual assets such as image and video and for small text elements, such as secondary metadata, caveats, or footnotes. */
  --o3-type-detail-font-size: var(--o3-font-size-metric2-negative-1); /** Use this style for caption in visual assets such as image and video and for small text elements, such as secondary metadata, caveats, or footnotes. */
  --o3-type-detail-line-height: var(--o3-font-lineheight-metric2-negative-1); /** Use this style for caption in visual assets such as image and video and for small text elements, such as secondary metadata, caveats, or footnotes. */
  --o3-type-label-font-family: var(--o3-font-family-metric); /** Use this style for labels such as badges and metadata in teasers and toppers (e.g., "Live," "Premium," or the main timestamp). Avoid using full sentences. */
  --o3-type-label-font-weight: var(--o3-font-weight-regular); /** Use this style for labels such as badges and metadata in teasers and toppers (e.g., "Live," "Premium," or the main timestamp). Avoid using full sentences. */
  --o3-type-label-font-size: var(--o3-font-size-metric2-negative-1); /** Use this style for labels such as badges and metadata in teasers and toppers (e.g., "Live," "Premium," or the main timestamp). Avoid using full sentences. */
  --o3-type-label-line-height: var(--o3-font-lineheight-metric2-negative-1); /** Use this style for labels such as badges and metadata in teasers and toppers (e.g., "Live," "Premium," or the main timestamp). Avoid using full sentences. */
  --o3-type-body-content-base-font-size: var(--o3-font-size-2); /** Use this style only for the body copy of content pages, such as articles, live news and other content experience page. */
  --o3-type-body-content-base-line-height: var(--o3-font-lineheight-4); /** Use this style only for the body copy of content pages, such as articles, live news and other content experience page. */
  --o3-type-body-content-highlight-font-size: var(--o3-font-size-2); /** Use this style only for the body copy of content pages, such as articles, live news and other content experience page. */
  --o3-type-body-content-highlight-line-height: var(--o3-font-lineheight-4); /** Use this style only for the body copy of content pages, such as articles, live news and other content experience page. */
  --o3-type-body-content-emphasis-font-size: var(--o3-font-size-2); /** Use this style only for the body copy of content pages, such as articles, live news and other content experience page. */
  --o3-type-body-content-emphasis-line-height: var(--o3-font-lineheight-4); /** Use this style only for the body copy of content pages, such as articles, live news and other content experience page. */
  --o3-focus-use-case-ring-inner: 0px 0px 0px 4px #ffffff;
  --o3-focus-use-case-ring-outer: 0px 0px 0px 8px #4d4845;
  --o3-focus-use-case-ring-inverse-inner: 0px 0px 0px 4px #4d4845;
  --o3-focus-use-case-ring-inverse-outer: 0px 0px 0px 8px #ffffff;
  --o3-focus-use-case-outline-color: 0px 0px 0px 2px #807973;
  --o3-focus-use-case-outline-inverse-color: 0px 0px 0px 2px #ffffff;
}
