/**
 * Do not edit directly
 * Generated on Fri, 22 Nov 2024 08:14:50 GMT
 */

:root {
  --group-text-shadow-normal: 0px 0px 4px rgba(0, 0, 0, 0.15), 0px 4px 12px rgba(0, 0, 0, 0.25),
    0px 0px 80px rgba(0, 0, 0, 0.5); /* Increases readability when used on a image background. */
  --group-shadow-large: 0 0 30px 0 rgba(0, 7, 57, 0.15); /* Large shadow are used for hover effects. */
  --group-shadow-normal: 0 0 10px 0 rgba(0, 7, 57, 0.15); /* Default shadow size to elevate an element. */
  --group-shadow-small: 0px 2px 5px 1px rgba(0, 7, 57, 0.12);
  --group-opacity-100: 1;
  --group-opacity-80: 0.8;
  --group-opacity-60: 0.6;
  --group-opacity-50: 0.5;
  --group-opacity-40: 0.4;
  --group-opacity-30: 0.3;
  --group-opacity-0: 0;
  --group-font-family-text: 'UniversNextforHSBC-Regular', sans-serif;
  --group-font-family-title: 'UniversNextforHSBC-Bold', sans-serif;
  --group-animation-transition-easing: cubic-bezier(0.25, 0.8, 0.5, 1);
  --group-animation-transition-duration: 300ms;
  --group-z-index-tooltip: 1300; /* Default z-index for tooltips. */
  --group-z-index-toast: 1200; /* Default z-index for toast and snackbar messages. */
  --group-z-index-modal: 1100; /* Default z-index for modals that stacks on top of overlays and other elements, but still allows popups to be visible. */
  --group-z-index-popup: 1000; /* Default z-index for popups that stacks on top of all other elements. */
  --group-z-index-navigation: 400; /* Default z-index for navigation. */
  --group-z-index-sticky: 300; /* Default z-index for sticky interface elements. */
  --group-z-index-mask: 200; /* Default z-index for masking interface elements. */
  --group-z-index-masked: 100; /* Default z-index for masked interface elements. */
  --group-z-index: 1; /* The default z-index for components and elements inside components. */
  --group-z-index-deep: -999999; /* Deep z-index is used to stack something behind everything else. */
  --group-space-xx-large-desktop: 4rem;
  --group-space-xx-large-tablet: 3.5rem;
  --group-space-xx-large: 3rem;
  --group-space-x-large-desktop: 3rem;
  --group-space-x-large-tablet: 2.5rem;
  --group-space-x-large: 2rem; /* Space between heading and card */
  --group-space-large-desktop: 2rem;
  --group-space-large: 1.5rem; /* Space between cards */
  --group-space-medium-desktop: 1.5rem;
  --group-space-medium: 1.25rem; /* Inner padding of cards */
  --group-space-normal: 1rem; /* Space between large headings and content. */
  --group-space-small: 0.75rem;
  --group-space-x-small: 0.5rem; /* Space between text and icons or headings and content or clickable elements */
  --group-space-xx-small: 0.25rem; /* Minimum space between two elements */
  --group-radius-rounded: 9999px; /* The rounded radius token embraces a curvier design language, introducing a high degree of softness and fluidity to your elements. */
  --group-radius-large: 0.75rem; /* The large radius token makes a bold visual statement by significantly rounding the corners of elements. */
  --group-container-size-fluid: 100%; /* The container for fullscreen application with a large table for example. */
  --group-container-size-normal: 1496px; /* The default container size is versatile and suitable for various applications and website pages. */
  --group-container-size-compact: 896px; /* Tailored container size designed for form wizard applications or pages. */
  --group-breakpoint-fullhd: 1920px; /* Crafted for Full HD displays, this breakpoint strikes a balance between detail and performance. */
  --group-breakpoint-widescreen: 1440px; /* Tailored for widescreen monitors, this breakpoint offers a panoramic view that accommodates expansive content layouts. */
  --group-breakpoint-high-definition: 1280px; /* Designed for high-definition displays, this breakpoint elevates your interface to a level of visual richness and clarity. */
  --group-breakpoint-desktop: 1024px; /* Optimized for desktop screens, this breakpoint provides a spacious canvas for your design, allowing for more intricate layouts and detailed content presentation. */
  --group-breakpoint-tablet: 769px; /* Tailored for tablet devices, this breakpoint ensures a seamless and optimized user experience on medium-sized screens. */
  --group-scale-3-elevation-functional-spread: 0rem;
  --group-scale-3-elevation-functional-blur: 1rem;
  --group-scale-3-elevation-functional-y: 0rem;
  --group-scale-3-elevation-functional-x: 0rem;
  --group-scale-3-elevation-decorative-spread: 0rem;
  --group-scale-3-elevation-decorative-blur: 0.5rem;
  --group-scale-3-elevation-decorative-y: 0rem;
  --group-scale-3-elevation-decorative-x: 0rem;
  --group-scale-3-icon-large-width: 2.25rem;
  --group-scale-3-icon-large-height: 2.25rem;
  --group-scale-3-icon-medium-width: 1.5rem;
  --group-scale-3-icon-medium-height: 1.5rem;
  --group-scale-3-icon-small-width: 1.125rem;
  --group-scale-3-icon-small-height: 1.125rem;
  --group-scale-3-icon-xsmall-width: 0.75rem;
  --group-scale-3-icon-xsmall-height: 0.75rem;
  --group-scale-3-icon-arrow-font-7-height: 0.5625rem;
  --group-scale-3-icon-arrow-font-7-width: 0.28125rem;
  --group-scale-3-icon-arrow-font-6-height: 0.625rem;
  --group-scale-3-icon-arrow-font-6-width: 0.3125rem;
  --group-scale-3-icon-arrow-font-5-height: 0.75rem;
  --group-scale-3-icon-arrow-font-5-width: 0.375rem;
  --group-scale-3-icon-arrow-font-4-height: 0.75rem;
  --group-scale-3-icon-arrow-font-4-width: 0.375rem;
  --group-scale-3-icon-arrow-font-3-height: 1rem;
  --group-scale-3-icon-arrow-font-3-width: 0.5rem;
  --group-scale-3-icon-arrow-font-2-height: 1.375rem;
  --group-scale-3-icon-arrow-font-2-width: 0.6875rem;
  --group-scale-3-icon-arrow-font-1-height: 1.75rem;
  --group-scale-3-icon-arrow-font-1-width: 0.875rem;
  --group-scale-3-typography-letter-spacing-font-7: 0rem;
  --group-scale-3-typography-letter-spacing-font-6: 0rem;
  --group-scale-3-typography-letter-spacing-font-5: 0rem;
  --group-scale-3-typography-letter-spacing-font-4: 0rem;
  --group-scale-3-typography-letter-spacing-font-3: 0rem;
  --group-scale-3-typography-letter-spacing-font-2: 0rem;
  --group-scale-3-typography-letter-spacing-font-1: 0rem;
  --group-scale-3-typography-paragraph-spacing-font-7: 0.5rem;
  --group-scale-3-typography-paragraph-spacing-font-6: 0.625rem;
  --group-scale-3-typography-paragraph-spacing-font-5: 0.75rem;
  --group-scale-3-typography-paragraph-spacing-font-4: 1.0625rem;
  --group-scale-3-typography-paragraph-spacing-font-3: 1.3125rem;
  --group-scale-3-typography-paragraph-spacing-font-2: 1.625rem;
  --group-scale-3-typography-paragraph-spacing-font-1: 2rem;
  --group-scale-3-typography-line-height-font-7: 1rem;
  --group-scale-3-typography-line-height-font-6: 1.25rem;
  --group-scale-3-typography-line-height-font-5: 1.5rem;
  --group-scale-3-typography-line-height-font-4: 2.125rem;
  --group-scale-3-typography-line-height-font-3: 2.625rem;
  --group-scale-3-typography-line-height-font-2: 3.25rem;
  --group-scale-3-typography-line-height-font-1: 4.125rem;
  --group-scale-3-typography-font-size-font-7: 0.75rem;
  --group-scale-3-typography-font-size-font-6: 0.875rem;
  --group-scale-3-typography-font-size-font-5: 1rem;
  --group-scale-3-typography-font-size-font-4: 1.5rem;
  --group-scale-3-typography-font-size-font-3: 2rem;
  --group-scale-3-typography-font-size-font-2: 2.6875rem;
  --group-scale-3-typography-font-size-font-1: 3.5625rem;
  --group-scale-3-typography-font-weight-bold: String value;
  --group-scale-3-typography-font-weight-medium: medium;
  --group-scale-3-typography-font-weight-regular: regular;
  --group-scale-3-typography-font-weight-light: light;
  --group-scale-3-typography-font-weight-thin: thin;
  --group-scale-3-typography-font-family: Univers Next for HSBC;
  --group-scale-3-border-width-large: 0.25rem;
  --group-scale-3-border-width-medium: 0.125rem;
  --group-scale-3-border-width-small: 0.0625rem;
  --group-scale-3-border-radius: 0rem;
  --group-scale-3-padding-arrow-font-7-left: 0.25rem;
  --group-scale-3-padding-arrow-font-7-top: 0.25rem;
  --group-scale-3-padding-arrow-font-6-left: 0.3125rem;
  --group-scale-3-padding-arrow-font-6-top: 0.375rem;
  --group-scale-3-padding-arrow-font-5-left: 0.375rem;
  --group-scale-3-padding-arrow-font-5-top: 0.4375rem;
  --group-scale-3-padding-arrow-font-4-left: 0.375rem;
  --group-scale-3-padding-arrow-font-4-top: 0.9375rem;
  --group-scale-3-padding-arrow-font-3-left: 0.5rem;
  --group-scale-3-padding-arrow-font-3-top: 1.125rem;
  --group-scale-3-padding-arrow-font-2-left: 0.6875rem;
  --group-scale-3-padding-arrow-font-2-top: 1.375rem;
  --group-scale-3-padding-arrow-font-1-left: 0.875rem;
  --group-scale-3-padding-arrow-font-1-top: 1.8125rem;
  --group-scale-3-padding-fixed-xlarge: 1.5rem;
  --group-scale-3-padding-fixed-large: 1.25rem;
  --group-scale-3-padding-fixed-medium: 1rem;
  --group-scale-3-padding-fixed-small: 0.75rem;
  --group-scale-3-padding-responsive-xlarge: 2rem;
  --group-scale-3-padding-responsive-large: 1.75rem;
  --group-scale-3-padding-responsive-medium: 1.5rem;
  --group-scale-3-padding-responsive-small: 1.25rem;
  --group-scale-3-padding-responsive-xsmall: 1.1875rem;
  --group-scale-3-padding-responsive-xxsmall: 1.0625rem;
  --group-scale-3-padding-responsive-xxxsmall: 0.625rem;
  --group-scale-3-gap-responsive-section-xlarge: 8.5rem;
  --group-scale-3-gap-responsive-section-large: 7.25rem;
  --group-scale-3-gap-responsive-section-medium: 6rem;
  --group-scale-3-gap-responsive-section-small: 5rem;
  --group-scale-3-gap-responsive-section-xsmall: 4rem;
  --group-scale-3-gap-responsive-subsection-large: 4rem;
  --group-scale-3-gap-responsive-subsection-medium: 3.5rem;
  --group-scale-3-gap-responsive-subsection-small: 2.5rem;
  --group-scale-3-gap-responsive-subsection-xsmall: 2rem;
  --group-scale-3-gap-responsive-content-xxlarge: 2rem;
  --group-scale-3-gap-responsive-content-xlarge: 1.75rem;
  --group-scale-3-gap-responsive-content-large: 1.5rem;
  --group-scale-3-gap-responsive-content-medium: 1.25rem;
  --group-scale-3-gap-responsive-content-small: 1rem;
  --group-scale-3-gap-responsive-content-xsmall: 0.75rem;
  --group-scale-3-gap-fixed-section-xlarge: 7.5rem;
  --group-scale-3-gap-fixed-section-large: 6.25rem;
  --group-scale-3-gap-fixed-section-medium: 5rem;
  --group-scale-3-gap-fixed-section-small: 4rem;
  --group-scale-3-gap-fixed-section-xsmall: 3rem;
  --group-scale-3-gap-fixed-subsection-large: 3rem;
  --group-scale-3-gap-fixed-subsection-medium: 2.5rem;
  --group-scale-3-gap-fixed-subsection-small: 2rem;
  --group-scale-3-gap-fixed-subsection-xsmall: 1.5rem;
  --group-scale-3-gap-fixed-content-medium: 0.75rem;
  --group-scale-3-gap-fixed-content-small: 0.5rem;
  --group-scale-3-gap-fixed-content-xsmall: 0.25rem;
  --group-scale-3-gap-fixed-content-xxsmall: 0.125rem;
  --group-scale-3-layout-app-columns: 0.75rem;
  --group-scale-3-layout-app-gutter: 1rem;
  --group-scale-3-layout-app-margin: 1rem;
  --group-scale-3-layout-web-columns: 0.75rem;
  --group-scale-3-layout-web-gutter: 1.5rem;
  --group-scale-3-layout-web-margin: 1.5rem;
  --group-scale-2-elevation-functional-spread: 0rem;
  --group-scale-2-elevation-functional-blur: 1rem;
  --group-scale-2-elevation-functional-y: 0rem;
  --group-scale-2-elevation-functional-x: 0rem;
  --group-scale-2-elevation-decorative-spread: 0rem;
  --group-scale-2-elevation-decorative-blur: 0.5rem;
  --group-scale-2-elevation-decorative-y: 0rem;
  --group-scale-2-elevation-decorative-x: 0rem;
  --group-scale-2-icon-large-width: 2.25rem;
  --group-scale-2-icon-large-height: 2.25rem;
  --group-scale-2-icon-medium-width: 1.5rem;
  --group-scale-2-icon-medium-height: 1.5rem;
  --group-scale-2-icon-small-width: 1.125rem;
  --group-scale-2-icon-small-height: 1.125rem;
  --group-scale-2-icon-xsmall-width: 0.75rem;
  --group-scale-2-icon-xsmall-height: 0.75rem;
  --group-scale-2-icon-arrow-font-7-height: 0.5625rem;
  --group-scale-2-icon-arrow-font-7-width: 0.28125rem;
  --group-scale-2-icon-arrow-font-6-height: 0.625rem;
  --group-scale-2-icon-arrow-font-6-width: 0.3125rem;
  --group-scale-2-icon-arrow-font-5-height: 0.75rem;
  --group-scale-2-icon-arrow-font-5-width: 0.375rem;
  --group-scale-2-icon-arrow-font-4-height: 0.6875rem;
  --group-scale-2-icon-arrow-font-4-width: 0.34375rem;
  --group-scale-2-icon-arrow-font-3-height: 0.875rem;
  --group-scale-2-icon-arrow-font-3-width: 0.4375rem;
  --group-scale-2-icon-arrow-font-2-height: 1.125rem;
  --group-scale-2-icon-arrow-font-2-width: 0.5625rem;
  --group-scale-2-icon-arrow-font-1-height: 1.375rem;
  --group-scale-2-icon-arrow-font-1-width: 0.6875rem;
  --group-scale-2-typography-letter-spacing-font-7: 0rem;
  --group-scale-2-typography-letter-spacing-font-6: 0rem;
  --group-scale-2-typography-letter-spacing-font-5: 0rem;
  --group-scale-2-typography-letter-spacing-font-4: 0rem;
  --group-scale-2-typography-letter-spacing-font-3: 0rem;
  --group-scale-2-typography-letter-spacing-font-2: 0rem;
  --group-scale-2-typography-letter-spacing-font-1: 0rem;
  --group-scale-2-typography-paragraph-spacing-font-7: 0.5rem;
  --group-scale-2-typography-paragraph-spacing-font-6: 0.625rem;
  --group-scale-2-typography-paragraph-spacing-font-5: 0.75rem;
  --group-scale-2-typography-paragraph-spacing-font-4: 1rem;
  --group-scale-2-typography-paragraph-spacing-font-3: 1.125rem;
  --group-scale-2-typography-paragraph-spacing-font-2: 1.3125rem;
  --group-scale-2-typography-paragraph-spacing-font-1: 1.5625rem;
  --group-scale-2-typography-line-height-font-7: 1rem;
  --group-scale-2-typography-line-height-font-6: 1.25rem;
  --group-scale-2-typography-line-height-font-5: 1.5rem;
  --group-scale-2-typography-line-height-font-4: 1.9375rem;
  --group-scale-2-typography-line-height-font-3: 2.25rem;
  --group-scale-2-typography-line-height-font-2: 2.625rem;
  --group-scale-2-typography-line-height-font-1: 3.125rem;
  --group-scale-2-typography-font-size-font-7: 0.75rem;
  --group-scale-2-typography-font-size-font-6: 0.875rem;
  --group-scale-2-typography-font-size-font-5: 1rem;
  --group-scale-2-typography-font-size-font-4: 1.375rem;
  --group-scale-2-typography-font-size-font-3: 1.75rem;
  --group-scale-2-typography-font-size-font-2: 2.1875rem;
  --group-scale-2-typography-font-size-font-1: 2.75rem;
  --group-scale-2-typography-font-weight-bold: bold;
  --group-scale-2-typography-font-weight-medium: medium;
  --group-scale-2-typography-font-weight-regular: regular;
  --group-scale-2-typography-font-weight-light: light;
  --group-scale-2-typography-font-weight-thin: thin;
  --group-scale-2-typography-font-family: Univers Next for HSBC;
  --group-scale-2-border-width-large: 0.25rem;
  --group-scale-2-border-width-medium: 0.125rem;
  --group-scale-2-border-width-small: 0.0625rem;
  --group-scale-2-border-radius: 0rem;
  --group-scale-2-padding-arrow-font-7-left: 0.25rem;
  --group-scale-2-padding-arrow-font-7-top: 0.25rem;
  --group-scale-2-padding-arrow-font-6-left: 0.3125rem;
  --group-scale-2-padding-arrow-font-6-top: 0.375rem;
  --group-scale-2-padding-arrow-font-5-left: 0.375rem;
  --group-scale-2-padding-arrow-font-5-top: 0.4375rem;
  --group-scale-2-padding-arrow-font-4-left: 0.3125rem;
  --group-scale-2-padding-arrow-font-4-top: 0.875rem;
  --group-scale-2-padding-arrow-font-3-left: 0.4375rem;
  --group-scale-2-padding-arrow-font-3-top: 1rem;
  --group-scale-2-padding-arrow-font-2-left: 0.5625rem;
  --group-scale-2-padding-arrow-font-2-top: 1.125rem;
  --group-scale-2-padding-arrow-font-1-left: 0.6875rem;
  --group-scale-2-padding-arrow-font-1-top: 1.3125rem;
  --group-scale-2-padding-fixed-xlarge: 1.5rem;
  --group-scale-2-padding-fixed-large: 1.25rem;
  --group-scale-2-padding-fixed-medium: 1rem;
  --group-scale-2-padding-fixed-small: 0.75rem;
  --group-scale-2-padding-responsive-xlarge: 1.75rem;
  --group-scale-2-padding-responsive-large: 1.5rem;
  --group-scale-2-padding-responsive-medium: 1.25rem;
  --group-scale-2-padding-responsive-small: 1rem;
  --group-scale-2-padding-responsive-xsmall: 0.9375rem;
  --group-scale-2-padding-responsive-xxsmall: 0.8125rem;
  --group-scale-2-padding-responsive-xxxsmall: 0.5rem;
  --group-scale-2-gap-responsive-section-xlarge: 8rem;
  --group-scale-2-gap-responsive-section-large: 6.75rem;
  --group-scale-2-gap-responsive-section-medium: 5.5rem;
  --group-scale-2-gap-responsive-section-small: 4.5rem;
  --group-scale-2-gap-responsive-section-xsmall: 3.5rem;
  --group-scale-2-gap-responsive-subsection-large: 3.5rem;
  --group-scale-2-gap-responsive-subsection-medium: 3rem;
  --group-scale-2-gap-responsive-subsection-small: 2.25rem;
  --group-scale-2-gap-responsive-subsection-xsmall: 1.75rem;
  --group-scale-2-gap-responsive-content-xxlarge: 1.75rem;
  --group-scale-2-gap-responsive-content-xlarge: 1.5rem;
  --group-scale-2-gap-responsive-content-large: 1.25rem;
  --group-scale-2-gap-responsive-content-medium: 1rem;
  --group-scale-2-gap-responsive-content-small: 0.75rem;
  --group-scale-2-gap-responsive-content-xsmall: 0.5rem;
  --group-scale-2-gap-fixed-section-xlarge: 7.5rem;
  --group-scale-2-gap-fixed-section-large: 6.25rem;
  --group-scale-2-gap-fixed-section-medium: 5rem;
  --group-scale-2-gap-fixed-section-small: 4rem;
  --group-scale-2-gap-fixed-section-xsmall: 3rem;
  --group-scale-2-gap-fixed-subsection-large: 3rem;
  --group-scale-2-gap-fixed-subsection-medium: 2.5rem;
  --group-scale-2-gap-fixed-subsection-small: 2rem;
  --group-scale-2-gap-fixed-subsection-xsmall: 1.5rem;
  --group-scale-2-gap-fixed-content-medium: 0.75rem;
  --group-scale-2-gap-fixed-content-small: 0.5rem;
  --group-scale-2-gap-fixed-content-xsmall: 0.25rem;
  --group-scale-2-gap-fixed-content-xxsmall: 0.125rem;
  --group-scale-2-layout-app-columns: 0.75rem;
  --group-scale-2-layout-app-gutter: 1rem;
  --group-scale-2-layout-app-margin: 1rem;
  --group-scale-2-layout-web-columns: 0.75rem;
  --group-scale-2-layout-web-gutter: 1.25rem;
  --group-scale-2-layout-web-margin: 1.25rem;
  --group-scale-1-elevation-functional-spread: 0rem;
  --group-scale-1-elevation-functional-blur: 1rem;
  --group-scale-1-elevation-functional-y: 0rem;
  --group-scale-1-elevation-functional-x: 0rem;
  --group-scale-1-elevation-decorative-spread: 0rem;
  --group-scale-1-elevation-decorative-blur: 0.5rem;
  --group-scale-1-elevation-decorative-y: 0rem;
  --group-scale-1-elevation-decorative-x: 0rem;
  --group-scale-1-icon-large-width: 2.25rem;
  --group-scale-1-icon-large-height: 2.25rem;
  --group-scale-1-icon-medium-width: 1.5rem;
  --group-scale-1-icon-medium-height: 1.5rem;
  --group-scale-1-icon-small-width: 1.125rem;
  --group-scale-1-icon-small-height: 1.125rem;
  --group-scale-1-icon-xsmall-width: 0.75rem;
  --group-scale-1-icon-xsmall-height: 0.75rem;
  --group-scale-1-icon-arrow-font-7-height: 0.5625rem;
  --group-scale-1-icon-arrow-font-7-width: 0.28125rem;
  --group-scale-1-icon-arrow-font-6-height: 0.625rem;
  --group-scale-1-icon-arrow-font-6-width: 0.3125rem;
  --group-scale-1-icon-arrow-font-5-height: 0.75rem;
  --group-scale-1-icon-arrow-font-5-width: 0.375rem;
  --group-scale-1-icon-arrow-font-4-height: 0.625rem;
  --group-scale-1-icon-arrow-font-4-width: 0.3125rem;
  --group-scale-1-icon-arrow-font-3-height: 0.75rem;
  --group-scale-1-icon-arrow-font-3-width: 0.375rem;
  --group-scale-1-icon-arrow-font-2-height: 0.875rem;
  --group-scale-1-icon-arrow-font-2-width: 0.4375rem;
  --group-scale-1-icon-arrow-font-1-height: 1.0625rem;
  --group-scale-1-icon-arrow-font-1-width: 0.53125rem;
  --group-scale-1-typography-letter-spacing-font-7: 0rem;
  --group-scale-1-typography-letter-spacing-font-6: 0rem;
  --group-scale-1-typography-letter-spacing-font-5: 0rem;
  --group-scale-1-typography-letter-spacing-font-4: 0rem;
  --group-scale-1-typography-letter-spacing-font-3: 0rem;
  --group-scale-1-typography-letter-spacing-font-2: 0rem;
  --group-scale-1-typography-letter-spacing-font-1: 0rem;
  --group-scale-1-typography-paragraph-spacing-font-7: 0.5rem;
  --group-scale-1-typography-paragraph-spacing-font-6: 0.625rem;
  --group-scale-1-typography-paragraph-spacing-font-5: 0.75rem;
  --group-scale-1-typography-paragraph-spacing-font-4: 0.875rem;
  --group-scale-1-typography-paragraph-spacing-font-3: 0.9375rem;
  --group-scale-1-typography-paragraph-spacing-font-2: 1.125rem;
  --group-scale-1-typography-paragraph-spacing-font-1: 1.25rem;
  --group-scale-1-typography-line-height-font-7: 1rem;
  --group-scale-1-typography-line-height-font-6: 1.25rem;
  --group-scale-1-typography-line-height-font-5: 1.5rem;
  --group-scale-1-typography-line-height-font-4: 1.6875rem;
  --group-scale-1-typography-line-height-font-3: 1.875rem;
  --group-scale-1-typography-line-height-font-2: 2.25rem;
  --group-scale-1-typography-line-height-font-1: 2.5rem;
  --group-scale-1-typography-font-size-font-7: 0.75rem;
  --group-scale-1-typography-font-size-font-6: 0.875rem;
  --group-scale-1-typography-font-size-font-5: 1rem;
  --group-scale-1-typography-font-size-font-4: 1.1875rem;
  --group-scale-1-typography-font-size-font-3: 1.4375rem;
  --group-scale-1-typography-font-size-font-2: 1.75rem;
  --group-scale-1-typography-font-size-font-1: 2.0625rem;
  --group-scale-1-typography-font-weight-bold: bold;
  --group-scale-1-typography-font-weight-medium: medium;
  --group-scale-1-typography-font-weight-regular: regular;
  --group-scale-1-typography-font-weight-light: light;
  --group-scale-1-typography-font-weight-thin: thin;
  --group-scale-1-typography-font-family: Univers Next for HSBC;
  --group-scale-1-border-width-large: 0.25rem;
  --group-scale-1-border-width-medium: 0.125rem;
  --group-scale-1-border-width-small: 0.0625rem;
  --group-scale-1-border-radius: 0rem;
  --group-scale-1-padding-arrow-font-7-left: 0.25rem;
  --group-scale-1-padding-arrow-font-7-top: 0.25rem;
  --group-scale-1-padding-arrow-font-6-left: 0.3125rem;
  --group-scale-1-padding-arrow-font-6-top: 0.375rem;
  --group-scale-1-padding-arrow-font-5-left: 0.375rem;
  --group-scale-1-padding-arrow-font-5-top: 0.4375rem;
  --group-scale-1-padding-arrow-font-4-left: 0.3125rem;
  --group-scale-1-padding-arrow-font-4-top: 0.6875rem;
  --group-scale-1-padding-arrow-font-3-left: 0.375rem;
  --group-scale-1-padding-arrow-font-3-top: 0.8125rem;
  --group-scale-1-padding-arrow-font-2-left: 0.4375rem;
  --group-scale-1-padding-arrow-font-2-top: 1rem;
  --group-scale-1-padding-arrow-font-1-left: 0.5rem;
  --group-scale-1-padding-arrow-font-1-top: 1.0625rem;
  --group-scale-1-padding-fixed-xlarge: 1.5rem;
  --group-scale-1-padding-fixed-large: 1.25rem;
  --group-scale-1-padding-fixed-medium: 1rem;
  --group-scale-1-padding-fixed-small: 0.75rem;
  --group-scale-1-padding-responsive-xlarge: 1.5rem;
  --group-scale-1-padding-responsive-large: 1.25rem;
  --group-scale-1-padding-responsive-medium: 1rem;
  --group-scale-1-padding-responsive-small: 0.75rem;
  --group-scale-1-padding-responsive-xsmall: 0.6875rem;
  --group-scale-1-padding-responsive-xxsmall: 0.5625rem;
  --group-scale-1-padding-responsive-xxxsmall: 0.375rem;
  --group-scale-1-gap-responsive-section-xlarge: 7.5rem;
  --group-scale-1-gap-responsive-section-large: 6.25rem;
  --group-scale-1-gap-responsive-section-medium: 5rem;
  --group-scale-1-gap-responsive-section-small: 4rem;
  --group-scale-1-gap-responsive-section-xsmall: 3rem;
  --group-scale-1-gap-responsive-subsection-large: 3rem;
  --group-scale-1-gap-responsive-subsection-medium: 2.5rem;
  --group-scale-1-gap-responsive-subsection-small: 2rem;
  --group-scale-1-gap-responsive-subsection-xsmall: 1.5rem;
  --group-scale-1-gap-responsive-content-xxlarge: 1.5rem;
  --group-scale-1-gap-responsive-content-xlarge: 1.25rem;
  --group-scale-1-gap-responsive-content-large: 1rem;
  --group-scale-1-gap-responsive-content-medium: 0.75rem;
  --group-scale-1-gap-responsive-content-small: 0.5rem;
  --group-scale-1-gap-responsive-content-xsmall: 0.25rem;
  --group-scale-1-gap-fixed-section-xlarge: 7.5rem;
  --group-scale-1-gap-fixed-section-large: 6.25rem;
  --group-scale-1-gap-fixed-section-medium: 5rem;
  --group-scale-1-gap-fixed-section-small: 4rem;
  --group-scale-1-gap-fixed-section-xsmall: 3rem;
  --group-scale-1-gap-fixed-subsection-large: 3rem;
  --group-scale-1-gap-fixed-subsection-medium: 2.5rem;
  --group-scale-1-gap-fixed-subsection-small: 2rem;
  --group-scale-1-gap-fixed-subsection-xsmall: 1.5rem;
  --group-scale-1-gap-fixed-content-medium: 0.75rem;
  --group-scale-1-gap-fixed-content-small: 0.5rem;
  --group-scale-1-gap-fixed-content-xsmall: 0.25rem;
  --group-scale-1-gap-fixed-content-xxsmall: 0.125rem;
  --group-scale-1-layout-app-columns: 0.75rem;
  --group-scale-1-layout-app-gutter: 1rem;
  --group-scale-1-layout-app-margin: 1rem;
  --group-scale-1-layout-web-columns: 0.75rem;
  --group-scale-1-layout-web-gutter: 1rem;
  --group-scale-1-layout-web-margin: 1rem;
  --group-light-elevation-border: #ffffff00;
  --group-light-elevation-functional: #00000033;
  --group-light-elevation-decorative: #00000033;
  --group-light-image-opacity-disabled: 20;
  --group-light-image-opacity: 100;
  --group-light-overlay-on-light-version2: #000000d9;
  --group-light-overlay-on-light-version1: #00000080;
  --group-hsbc-colour-rag-dark-blue-tint: #000d1b;
  --group-hsbc-colour-rag-dark-green-tint: #001615;
  --group-hsbc-colour-rag-dark-amber-tint: #221701;
  --group-hsbc-colour-rag-dark-red-tint: #260005;
  --group-hsbc-colour-rag-blue-tint: #ebeff4;
  --group-hsbc-colour-rag-blue: #305a85;
  --group-hsbc-colour-rag-green-tint: #e5f2f2;
  --group-hsbc-colour-rag-green: #00847f;
  --group-hsbc-colour-rag-amber-tint: #fff8ea;
  --group-hsbc-colour-rag-amber: #ffbb33;
  --group-hsbc-colour-rag-red-tint: #f9f2f3;
  --group-hsbc-colour-rag-red: #a8000b;
  --group-hsbc-colour-data-vis-green-4: #74a157;
  --group-hsbc-colour-data-vis-green-3: #4da90f;
  --group-hsbc-colour-data-vis-green-2: #518827;
  --group-hsbc-colour-data-vis-green-1: #356512;
  --group-hsbc-colour-data-vis-orange-4: #ec7046;
  --group-hsbc-colour-data-vis-orange-3: #ed500d;
  --group-hsbc-colour-data-vis-orange-2: #c64d24;
  --group-hsbc-colour-data-vis-orange-1: #9b4822;
  --group-hsbc-colour-data-vis-pink-4: #e76e84;
  --group-hsbc-colour-data-vis-pink-3: #f14e73;
  --group-hsbc-colour-data-vis-pink-2: #c03954;
  --group-hsbc-colour-data-vis-pink-1: #933d4f;
  --group-hsbc-colour-data-vis-purple-4: #b184c7;
  --group-hsbc-colour-data-vis-purple-3: #a752cf;
  --group-hsbc-colour-data-vis-purple-2: #8738ab;
  --group-hsbc-colour-data-vis-purple-1: #7c4386;
  --group-hsbc-colour-data-vis-blue-4: #509ebc;
  --group-hsbc-colour-data-vis-blue-3: #1494c6;
  --group-hsbc-colour-data-vis-blue-2: #347893;
  --group-hsbc-colour-data-vis-blue-1: #266076;
  --group-hsbc-colour-illustration-complimentary-cream-8: #5a493b;
  --group-hsbc-colour-illustration-complimentary-cream-7: #725d4b;
  --group-hsbc-colour-illustration-complimentary-cream-6: #987b64;
  --group-hsbc-colour-illustration-complimentary-cream-5: #b59377;
  --group-hsbc-colour-illustration-complimentary-cream-4: #f8dbbb;
  --group-hsbc-colour-illustration-complimentary-cream-3: #fee8cf;
  --group-hsbc-colour-illustration-complimentary-cream-2: #fef0e0;
  --group-hsbc-colour-illustration-complimentary-cream-1: #fff7ee;
  --group-hsbc-colour-illustration-complimentary-tan-8: #523821;
  --group-hsbc-colour-illustration-complimentary-tan-7: #6d4a2a;
  --group-hsbc-colour-illustration-complimentary-tan-6: #956539;
  --group-hsbc-colour-illustration-complimentary-tan-5: #ae7d54;
  --group-hsbc-colour-illustration-complimentary-tan-4: #edb97f;
  --group-hsbc-colour-illustration-complimentary-tan-3: #f1cca5;
  --group-hsbc-colour-illustration-complimentary-tan-2: #f5dbc0;
  --group-hsbc-colour-illustration-complimentary-tan-1: #f8e5d2;
  --group-hsbc-colour-illustration-complimentary-mid-brown-8: #43290e;
  --group-hsbc-colour-illustration-complimentary-mid-brown-7: #5d3811;
  --group-hsbc-colour-illustration-complimentary-mid-brown-6: #794817;
  --group-hsbc-colour-illustration-complimentary-mid-brown-5: #915d31;
  --group-hsbc-colour-illustration-complimentary-mid-brown-4: #bc8145;
  --group-hsbc-colour-illustration-complimentary-mid-brown-3: #cfa67c;
  --group-hsbc-colour-illustration-complimentary-mid-brown-2: #ddc1a3;
  --group-hsbc-colour-illustration-complimentary-mid-brown-1: #e7d2bd;
  --group-hsbc-colour-illustration-complimentary-brown-8: #28170f;
  --group-hsbc-colour-illustration-complimentary-brown-7: #462918;
  --group-hsbc-colour-illustration-complimentary-brown-6: #5e3620;
  --group-hsbc-colour-illustration-complimentary-brown-5: #724732;
  --group-hsbc-colour-illustration-complimentary-brown-4: #885c46;
  --group-hsbc-colour-illustration-complimentary-brown-3: #aa8c7d;
  --group-hsbc-colour-illustration-complimentary-brown-2: #c3aea4;
  --group-hsbc-colour-illustration-complimentary-brown-1: #d4c5be;
  --group-hsbc-colour-illustration-orange-8: #461700;
  --group-hsbc-colour-illustration-orange-7: #6e2e11;
  --group-hsbc-colour-illustration-orange-6: #954017;
  --group-hsbc-colour-illustration-orange-5: #be511d;
  --group-hsbc-colour-illustration-orange-4: #e8804c;
  --group-hsbc-colour-illustration-orange-3: #fbad8d;
  --group-hsbc-colour-illustration-orange-2: #f7d5c4;
  --group-hsbc-colour-illustration-orange-1: #fcede5;
  --group-hsbc-colour-illustration-yellow-8: #4a3800;
  --group-hsbc-colour-illustration-yellow-7: #7f5f00;
  --group-hsbc-colour-illustration-yellow-6: #a87c00;
  --group-hsbc-colour-illustration-yellow-5: #d1a033;
  --group-hsbc-colour-illustration-yellow-4: #fdc530;
  --group-hsbc-colour-illustration-yellow-3: #ffdd82;
  --group-hsbc-colour-illustration-yellow-2: #ffe8ab;
  --group-hsbc-colour-illustration-yellow-1: #fff4d7;
  --group-hsbc-colour-illustration-pink-8: #3f2f34;
  --group-hsbc-colour-illustration-pink-7: #8f6470;
  --group-hsbc-colour-illustration-pink-6: #b67e8f;
  --group-hsbc-colour-illustration-pink-5: #d199a9;
  --group-hsbc-colour-illustration-pink-4: #f8bfce;
  --group-hsbc-colour-illustration-pink-3: #fad8e1;
  --group-hsbc-colour-illustration-pink-2: #fbe4ea;
  --group-hsbc-colour-illustration-pink-1: #fdf1f4;
  --group-hsbc-colour-illustration-green-8: #0b3322;
  --group-hsbc-colour-illustration-green-7: #114f35;
  --group-hsbc-colour-illustration-green-6: #176a47;
  --group-hsbc-colour-illustration-green-5: #1c7f55;
  --group-hsbc-colour-illustration-green-4: #28b67a;
  --group-hsbc-colour-illustration-green-3: #7ed3af;
  --group-hsbc-colour-illustration-green-2: #bee9d7;
  --group-hsbc-colour-illustration-green-1: #e5f6ef;
  --group-hsbc-colour-illustration-blue-8: #152932;
  --group-hsbc-colour-illustration-blue-7: #264a5c;
  --group-hsbc-colour-illustration-blue-6: #366982;
  --group-hsbc-colour-illustration-blue-5: #4587a7;
  --group-hsbc-colour-illustration-blue-4: #63c2ef;
  --group-hsbc-colour-illustration-blue-3: #a1daf6;
  --group-hsbc-colour-illustration-blue-2: #c7e9fa;
  --group-hsbc-colour-illustration-blue-1: #e8f6fd;
  --group-hsbc-colour-neutral-dark-new-grey: #5e5e5e;
  --group-hsbc-colour-neutral-dark-grey-8: #101010;
  --group-hsbc-colour-neutral-dark-grey-7: #1d1d1d;
  --group-hsbc-colour-neutral-dark-grey-6: #212121;
  --group-hsbc-colour-neutral-black: #000000;
  --group-hsbc-colour-neutral-grey-5: #333333;
  --group-hsbc-colour-neutral-grey-4: #767676;
  --group-hsbc-colour-neutral-grey-3: #d7d8d6;
  --group-hsbc-colour-neutral-grey-2: #ededed;
  --group-hsbc-colour-neutral-grey-1: #f3f3f3;
  --group-hsbc-colour-neutral-white: #ffffff;
  --group-hsbc-colour-complimentary-red-3: #730014;
  --group-hsbc-colour-complimentary-red-2: #ba1110;
  --group-hsbc-colour-complimentary-red-1: #e31e22;
  --group-hsbc-colour-core-white: #ffffff;
  --group-hsbc-colour-core-black: #000000;
  --group-hsbc-colour-core-hsbc-red: #db0011;
  --group-dark-elevation-functional: #00000033;
  --group-dark-elevation-decorative: #00000000;
  --group-dark-image-opacity-disabled: 20;
  --group-dark-image-opacity: 100;
  --group-dark-overlay-on-light-version2: #000000d9;
  --group-dark-overlay-on-light-version1: #00000080;
  --group-line-height-size-7-desktop: var(--group-scale-3-typography-line-height-font-7);
  --group-line-height-size-7-tablet: var(--group-scale-2-typography-line-height-font-7);
  --group-line-height-size-7: var(
    --group-scale-1-typography-line-height-font-7
  ); /* Should only be used for helper texts or validation messages of a form control. */
  --group-line-height-size-6-desktop: var(--group-scale-3-typography-line-height-font-6);
  --group-line-height-size-6-tablet: var(--group-scale-2-typography-line-height-font-6);
  --group-line-height-size-6: var(
    --group-scale-1-typography-line-height-font-6
  ); /* Should only be used for label texts. */
  --group-line-height-size-5-desktop: var(--group-scale-3-typography-line-height-font-5);
  --group-line-height-size-5-tablet: var(--group-scale-2-typography-line-height-font-5);
  --group-line-height-size-5: var(
    --group-scale-1-typography-line-height-font-5
  ); /* Should only be used for label texts. */
  --group-line-height-size-4-desktop: var(--group-scale-3-typography-line-height-font-4);
  --group-line-height-size-4-tablet: var(--group-scale-2-typography-line-height-font-4);
  --group-line-height-size-4: var(
    --group-scale-1-typography-line-height-font-4
  ); /* Should only be used in a 2/3 grid column to improve readability. */
  --group-line-height-size-3-desktop: var(--group-scale-3-typography-line-height-font-3);
  --group-line-height-size-3-tablet: var(--group-scale-2-typography-line-height-font-3);
  --group-line-height-size-3: var(
    --group-scale-1-typography-line-height-font-3
  ); /* Should only be used for standard card titles and headings of level 4 or for lead text/paragraphs after a heading. */
  --group-line-height-size-2-desktop: var(--group-scale-3-typography-line-height-font-2);
  --group-line-height-size-2-tablet: var(--group-scale-2-typography-line-height-font-2);
  --group-line-height-size-2: var(
    --group-scale-1-typography-line-height-font-2
  ); /* Should only be used for form titles, quick link navigation's and headings of level 3. */
  --group-line-height-size-1-desktop: var(--group-scale-3-typography-line-height-font-1);
  --group-line-height-size-1-tablet: var(--group-scale-2-typography-line-height-font-1);
  --group-line-height-size-1: var(
    --group-scale-1-typography-line-height-font-1
  ); /* Should only be used for content titles and headings of level 2. */
  --group-text-size-7-desktop: var(--group-scale-3-typography-font-size-font-7);
  --group-text-size-7-tablet: var(--group-scale-2-typography-font-size-font-7);
  --group-text-size-7: var(
    --group-scale-1-typography-font-size-font-7
  ); /* Should only be used for helper texts or validation messages of a form control. */
  --group-text-size-6-desktop: var(--group-scale-3-typography-font-size-font-6);
  --group-text-size-6-tablet: var(--group-scale-2-typography-font-size-font-6);
  --group-text-size-6: var(--group-scale-1-typography-font-size-font-6); /* Should only be used for label texts. */
  --group-text-size-5-desktop: var(--group-scale-3-typography-font-size-font-5);
  --group-text-size-5-tablet: var(--group-scale-2-typography-font-size-font-5);
  --group-text-size-5: var(--group-scale-1-typography-font-size-font-5); /* Should only be used for label texts. */
  --group-text-size-4-desktop: var(--group-scale-3-typography-font-size-font-4);
  --group-text-size-4-tablet: var(--group-scale-2-typography-font-size-font-4);
  --group-text-size-4: var(
    --group-scale-1-typography-font-size-font-4
  ); /* Should only be used in a 2/3 grid column to improve readability. */
  --group-text-size-3-desktop: var(--group-scale-3-typography-font-size-font-3);
  --group-text-size-3-tablet: var(--group-scale-2-typography-font-size-font-3);
  --group-text-size-3: var(
    --group-scale-1-typography-font-size-font-3
  ); /* Should only be used for standard card titles and headings of level 4 or for lead text/paragraphs after a heading. */
  --group-text-size-2-desktop: var(--group-scale-3-typography-font-size-font-2);
  --group-text-size-2-tablet: var(--group-scale-2-typography-font-size-font-2);
  --group-text-size-2: var(
    --group-scale-1-typography-font-size-font-2
  ); /* Should only be used for form titles, quick link navigation's and headings of level 3. */
  --group-text-size-1-desktop: var(--group-scale-3-typography-font-size-font-1);
  --group-text-size-1-tablet: var(--group-scale-2-typography-font-size-font-1);
  --group-text-size-1: var(
    --group-scale-1-typography-font-size-font-1
  ); /* Should only be used for content titles and headings of level 2. */
  --group-font-weight-thin: var(
    --group-scale-1-typography-font-weight-thin
  ); /* Default width of paragraphs. Only available with the font Univers Next for HSBC. */
  --group-font-weight-light: var(
    --group-scale-1-typography-font-weight-light
  ); /* Can be used for secondary headings. Only available with the font Univers Next for HSBC. */
  --group-font-weight-medium: var(
    --group-scale-1-typography-font-weight-medium
  ); /* Can be used for secondary headings. Only available with the font Univers Next for HSBC. */
  --group-font-weight-regular: var(
    --group-scale-1-typography-font-weight-regular
  ); /* Default width of paragraphs. Only available with the font Univers. */
  --group-font-weight-bold: var(
    --group-scale-1-typography-font-weight-bold
  ); /* Bold is used for headings, links and buttons. */
  --group-space-large-tablet: var(--group-space-large);
  --group-space-medium-tablet: var(--group-space-medium);
  --group-space-normal-desktop: var(--group-space-normal);
  --group-space-normal-tablet: var(--group-space-normal);
  --group-space-small-desktop: var(--group-space-small);
  --group-space-small-tablet: var(--group-space-small);
  --group-space-x-small-desktop: var(--group-space-x-small);
  --group-space-x-small-tablet: var(--group-space-x-small);
  --group-space-xx-small-desktop: var(--group-space-xx-small);
  --group-space-xx-small-tablet: var(--group-space-xx-small);
  --group-radius-normal: var(
    --group-scale-1-border-radius
  ); /* The normal radius token strikes a balance between softness and structure. */
  --group-column-gap: var(--group-space-normal);
  --group-container-space-desktop: var(
    --group-space-x-large-desktop
  ); /* Default space on desktops of a container to left and right side. */
  --group-container-space-tablet: var(
    --group-space-x-large-tablet
  ); /* Default space on tablets of a container to left and right side. */
  --group-container-space: var(--group-space-normal); /* Default space of a container to left and right side. */
  --group-border-large-desktop: var(
    --group-scale-3-border-width-large
  ); /* The large border size is a bold choice for creating strong visual separation between elements, such as modals or panels. */
  --group-border-large-tablet: var(
    --group-scale-2-border-width-large
  ); /* The large border size is a bold choice for creating strong visual separation between elements, such as modals or panels. */
  --group-border-large: var(
    --group-scale-1-border-width-large
  ); /* The large border size is a bold choice for creating strong visual separation between elements, such as modals or panels. */
  --group-border-medium-desktop: var(
    --group-scale-3-border-width-medium
  ); /* The medium border size is a versatile choice for creating visual separation between elements, such as cards or sections. */
  --group-border-medium-tablet: var(
    --group-scale-2-border-width-medium
  ); /* The medium border size is a versatile choice for creating visual separation between elements, such as cards or sections. */
  --group-border-medium: var(
    --group-scale-1-border-width-medium
  ); /* The medium border size is a versatile choice for creating visual separation between elements, such as cards or sections. */
  --group-border-small-desktop: var(
    --group-scale-3-border-width-small
  ); /* The small border size is ideal for creating subtle divisions between elements, such as form fields or buttons. */
  --group-border-small-tablet: var(
    --group-scale-2-border-width-small
  ); /* The small border size is ideal for creating subtle divisions between elements, such as form fields or buttons. */
  --group-border-small: var(
    --group-scale-1-border-width-small
  ); /* The small border size is ideal for creating subtle divisions between elements, such as form fields or buttons. */
  --group-light-rag-border-information: var(--group-hsbc-colour-rag-blue);
  --group-light-rag-border-success: var(--group-hsbc-colour-rag-green);
  --group-light-rag-border-warning: var(--group-hsbc-colour-rag-amber);
  --group-light-rag-border-error: var(--group-hsbc-colour-rag-red);
  --group-light-rag-surface-information-default2: var(--group-hsbc-colour-rag-blue-tint);
  --group-light-rag-surface-information-default-1: var(--group-hsbc-colour-rag-blue);
  --group-light-rag-surface-success-default2: var(--group-hsbc-colour-rag-green-tint);
  --group-light-rag-surface-success-default-1: var(--group-hsbc-colour-rag-green);
  --group-light-rag-surface-warning-default2: var(--group-hsbc-colour-rag-amber-tint);
  --group-light-rag-surface-warning-default-1: var(--group-hsbc-colour-rag-amber);
  --group-light-rag-surface-error-default2: var(--group-hsbc-colour-rag-red-tint);
  --group-light-rag-surface-error-default-1: var(--group-hsbc-colour-rag-red);
  --group-light-rag-icon-information-icon: var(--group-hsbc-colour-neutral-white);
  --group-light-rag-icon-information-container: var(--group-hsbc-colour-rag-blue);
  --group-light-rag-icon-success-icon: var(--group-hsbc-colour-neutral-white);
  --group-light-rag-icon-success-container: var(--group-hsbc-colour-rag-green);
  --group-light-rag-icon-warning-icon: var(--group-hsbc-colour-neutral-grey-5);
  --group-light-rag-icon-warning-container: var(--group-hsbc-colour-rag-amber);
  --group-light-rag-icon-error-icon: var(--group-hsbc-colour-neutral-white);
  --group-light-rag-icon-error-container: var(--group-hsbc-colour-rag-red);
  --group-light-rag-text-on-dark: var(--group-hsbc-colour-neutral-white);
  --group-light-rag-text-on-light: var(--group-hsbc-colour-neutral-grey-5);
  --group-light-data-vis-border-on-dark-indicator: var(--group-hsbc-colour-neutral-white);
  --group-light-data-vis-border-on-dark-gridline: var(--group-hsbc-colour-neutral-grey-5);
  --group-light-data-vis-border-on-dark-baseline-2: var(--group-hsbc-colour-neutral-grey-5);
  --group-light-data-vis-border-on-dark-baseline-1: var(--group-hsbc-colour-neutral-white);
  --group-light-data-vis-border-on-light-indicator: var(--group-hsbc-colour-neutral-grey-5);
  --group-light-data-vis-border-on-light-gridline: var(--group-hsbc-colour-neutral-grey-2);
  --group-light-data-vis-border-on-light-baseline-2: var(--group-hsbc-colour-neutral-grey-2);
  --group-light-data-vis-border-on-light-baseline-1: var(--group-hsbc-colour-neutral-grey-5);
  --group-light-data-vis-surface-secondary: var(--group-hsbc-colour-neutral-black);
  --group-light-data-vis-surface-primary: var(--group-hsbc-colour-neutral-white);
  --group-light-data-vis-data-chart-green-4: var(--group-hsbc-colour-data-vis-green-4);
  --group-light-data-vis-data-chart-green-3: var(--group-hsbc-colour-data-vis-green-3);
  --group-light-data-vis-data-chart-green-2: var(--group-hsbc-colour-data-vis-green-2);
  --group-light-data-vis-data-chart-green-1: var(--group-hsbc-colour-data-vis-green-1);
  --group-light-data-vis-data-chart-orange-4: var(--group-hsbc-colour-data-vis-orange-4);
  --group-light-data-vis-data-chart-orange-3: var(--group-hsbc-colour-data-vis-orange-3);
  --group-light-data-vis-data-chart-orange-2: var(--group-hsbc-colour-data-vis-orange-2);
  --group-light-data-vis-data-chart-orange-1: var(--group-hsbc-colour-data-vis-orange-1);
  --group-light-data-vis-data-chart-pink-4: var(--group-hsbc-colour-data-vis-pink-4);
  --group-light-data-vis-data-chart-pink-3: var(--group-hsbc-colour-data-vis-pink-3);
  --group-light-data-vis-data-chart-pink-2: var(--group-hsbc-colour-data-vis-pink-2);
  --group-light-data-vis-data-chart-pink-1: var(--group-hsbc-colour-data-vis-pink-1);
  --group-light-data-vis-data-chart-purple-4: var(--group-hsbc-colour-data-vis-purple-4);
  --group-light-data-vis-data-chart-purple-3: var(--group-hsbc-colour-data-vis-purple-3);
  --group-light-data-vis-data-chart-purple-2: var(--group-hsbc-colour-data-vis-purple-2);
  --group-light-data-vis-data-chart-purple-1: var(--group-hsbc-colour-data-vis-purple-1);
  --group-light-data-vis-data-chart-blue-4: var(--group-hsbc-colour-data-vis-blue-4);
  --group-light-data-vis-data-chart-blue-3: var(--group-hsbc-colour-data-vis-blue-3);
  --group-light-data-vis-data-chart-blue-2: var(--group-hsbc-colour-data-vis-blue-2);
  --group-light-data-vis-data-chart-blue-1: var(--group-hsbc-colour-data-vis-blue-1);
  --group-light-interactive-on-dark-border-brand-1-processing: var(--group-hsbc-colour-neutral-white);
  --group-light-interactive-on-dark-border-brand-1-disabled: var(--group-hsbc-colour-neutral-grey-4);
  --group-light-interactive-on-dark-border-brand-1-pressed: var(--group-hsbc-colour-neutral-white);
  --group-light-interactive-on-dark-border-brand-1-hover: var(--group-hsbc-colour-neutral-white);
  --group-light-interactive-on-dark-border-brand-1: var(--group-hsbc-colour-neutral-white);
  --group-light-interactive-on-dark-border-brand-2-processing: var(--group-hsbc-colour-neutral-white);
  --group-light-interactive-on-dark-border-brand-2-disabled: var(--group-hsbc-colour-neutral-grey-4);
  --group-light-interactive-on-dark-border-brand-2-pressed: var(--group-hsbc-colour-neutral-white);
  --group-light-interactive-on-dark-border-brand-2-hover: var(--group-hsbc-colour-neutral-white);
  --group-light-interactive-on-dark-border-brand-2: var(--group-hsbc-colour-neutral-white);
  --group-light-interactive-on-dark-border-active-pressed: var(--group-hsbc-colour-neutral-white);
  --group-light-interactive-on-dark-border-active-hover: var(--group-hsbc-colour-neutral-white);
  --group-light-interactive-on-dark-border-active: var(--group-hsbc-colour-neutral-white);
  --group-light-interactive-on-dark-border-high-contrast-disabled: var(--group-hsbc-colour-neutral-grey-4);
  --group-light-interactive-on-dark-border-high-contrast-pressed: var(--group-hsbc-colour-neutral-grey-3);
  --group-light-interactive-on-dark-border-high-contrast-hover: var(--group-hsbc-colour-neutral-grey-3);
  --group-light-interactive-on-dark-border-high-contrast: var(--group-hsbc-colour-neutral-grey-3);
  --group-light-interactive-on-dark-border-low-contrast-disabled: var(--group-hsbc-colour-neutral-grey-4);
  --group-light-interactive-on-dark-border-low-contrast-pressed: var(--group-hsbc-colour-neutral-grey-4);
  --group-light-interactive-on-dark-border-low-contrast-hover: var(--group-hsbc-colour-neutral-grey-4);
  --group-light-interactive-on-dark-border-low-contrast: var(--group-hsbc-colour-neutral-grey-4);
  --group-light-interactive-on-dark-surface-brand-2-processing: var(--group-hsbc-colour-neutral-white);
  --group-light-interactive-on-dark-surface-brand-2-disabled: var(--group-hsbc-colour-neutral-grey-4);
  --group-light-interactive-on-dark-surface-brand-2-pressed: var(--group-hsbc-colour-neutral-grey-2);
  --group-light-interactive-on-dark-surface-brand-2-hover: var(--group-hsbc-colour-neutral-grey-1);
  --group-light-interactive-on-dark-surface-brand-2: var(--group-hsbc-colour-neutral-white);
  --group-light-interactive-on-dark-surface-brand-1-processing: var(--group-hsbc-colour-core-hsbc-red);
  --group-light-interactive-on-dark-surface-brand-1-disabled: var(--group-hsbc-colour-neutral-grey-4);
  --group-light-interactive-on-dark-surface-brand-1-pressed: var(--group-hsbc-colour-neutral-white);
  --group-light-interactive-on-dark-surface-brand-1-hover: var(--group-hsbc-colour-complimentary-red-2);
  --group-light-interactive-on-dark-surface-brand-1: var(--group-hsbc-colour-core-hsbc-red);
  --group-light-interactive-on-dark-surface-active-pressed: var(--group-hsbc-colour-neutral-grey-2);
  --group-light-interactive-on-dark-surface-active-hover: var(--group-hsbc-colour-neutral-grey-1);
  --group-light-interactive-on-dark-surface-active: var(--group-hsbc-colour-neutral-white);
  --group-light-interactive-on-dark-surface-primary-disabled: var(--group-hsbc-colour-neutral-grey-5);
  --group-light-interactive-on-dark-surface-primary-pressed: var(--group-hsbc-colour-neutral-grey-3);
  --group-light-interactive-on-dark-surface-primary-hover: var(--group-hsbc-colour-neutral-grey-4);
  --group-light-interactive-on-dark-surface-primary: var(--group-hsbc-colour-neutral-grey-5);
  --group-light-interactive-on-light-border-brand-2-processing: var(--group-hsbc-colour-neutral-black);
  --group-light-interactive-on-light-border-brand-2-disabled: var(--group-hsbc-colour-neutral-grey-3);
  --group-light-interactive-on-light-border-brand-2-pressed: var(--group-hsbc-colour-neutral-black);
  --group-light-interactive-on-light-border-brand-2-hover: var(--group-hsbc-colour-neutral-black);
  --group-light-interactive-on-light-border-brand-2: var(--group-hsbc-colour-neutral-black);
  --group-light-interactive-on-light-border-brand-1-pressed: var(--group-hsbc-colour-core-hsbc-red);
  --group-light-interactive-on-light-border-brand-1-hover: var(--group-hsbc-colour-core-hsbc-red);
  --group-light-interactive-on-light-border-brand-1: var(--group-hsbc-colour-core-hsbc-red);
  --group-light-interactive-on-light-border-active-pressed: var(--group-hsbc-colour-neutral-black);
  --group-light-interactive-on-light-border-active-hover: var(--group-hsbc-colour-neutral-black);
  --group-light-interactive-on-light-border-active: var(--group-hsbc-colour-neutral-black);
  --group-light-interactive-on-light-border-high-contrast-disabled: var(--group-hsbc-colour-neutral-grey-3);
  --group-light-interactive-on-light-border-high-contrast-pressed: var(--group-hsbc-colour-neutral-grey-4);
  --group-light-interactive-on-light-border-high-contrast-hover: var(--group-hsbc-colour-neutral-grey-4);
  --group-light-interactive-on-light-border-high-contrast: var(--group-hsbc-colour-neutral-grey-4);
  --group-light-interactive-on-light-border-low-contrast-disabled: var(--group-hsbc-colour-neutral-grey-3);
  --group-light-interactive-on-light-border-low-contrast-pressed: var(--group-hsbc-colour-neutral-grey-3);
  --group-light-interactive-on-light-border-low-contrast-hover: var(--group-hsbc-colour-neutral-grey-3);
  --group-light-interactive-on-light-border-low-contrast: var(--group-hsbc-colour-neutral-grey-3);
  --group-light-interactive-on-light-surface-brand-2-processing: var(--group-hsbc-colour-core-black);
  --group-light-interactive-on-light-surface-brand-2-disabled: var(--group-hsbc-colour-neutral-grey-3);
  --group-light-interactive-on-light-surface-brand-2-pressed: var(--group-hsbc-colour-neutral-grey-4);
  --group-light-interactive-on-light-surface-brand-2-hover: var(--group-hsbc-colour-neutral-grey-5);
  --group-light-interactive-on-light-surface-brand-2: var(--group-hsbc-colour-core-black);
  --group-light-interactive-on-light-surface-brand-1-processing: var(--group-hsbc-colour-core-hsbc-red);
  --group-light-interactive-on-light-surface-brand-1-disabled: var(--group-hsbc-colour-neutral-grey-3);
  --group-light-interactive-on-light-surface-brand-1-pressed: var(--group-hsbc-colour-neutral-black);
  --group-light-interactive-on-light-surface-brand-1-hover: var(--group-hsbc-colour-complimentary-red-2);
  --group-light-interactive-on-light-surface-brand-1: var(--group-hsbc-colour-core-hsbc-red);
  --group-light-interactive-on-light-surface-active-pressed: var(--group-hsbc-colour-neutral-grey-4);
  --group-light-interactive-on-light-surface-active-hover: var(--group-hsbc-colour-neutral-grey-5);
  --group-light-interactive-on-light-surface-active: var(--group-hsbc-colour-neutral-black);
  --group-light-interactive-on-light-surface-primary-processing: var(--group-hsbc-colour-neutral-white);
  --group-light-interactive-on-light-surface-primary-disabled: var(--group-hsbc-colour-neutral-white);
  --group-light-interactive-on-light-surface-primary-pressed: var(--group-hsbc-colour-neutral-grey-4);
  --group-light-interactive-on-light-surface-primary-hover: var(--group-hsbc-colour-neutral-grey-1);
  --group-light-interactive-on-light-surface-primary: var(--group-hsbc-colour-neutral-white);
  --group-light-non-interactive-border-black: var(--group-hsbc-colour-neutral-black);
  --group-light-non-interactive-border-neutral-5: var(--group-hsbc-colour-neutral-grey-5);
  --group-light-non-interactive-border-neutral-4: var(--group-hsbc-colour-neutral-grey-4);
  --group-light-non-interactive-border-neutral-3: var(--group-hsbc-colour-neutral-grey-3);
  --group-light-non-interactive-border-neutral-2: var(--group-hsbc-colour-neutral-grey-2);
  --group-light-non-interactive-border-neutral-1: var(--group-hsbc-colour-neutral-grey-1);
  --group-light-non-interactive-border-white: var(--group-hsbc-colour-neutral-white);
  --group-light-non-interactive-surface-brand-3: var(--group-hsbc-colour-complimentary-red-3);
  --group-light-non-interactive-surface-brand-2: var(--group-hsbc-colour-complimentary-red-2);
  --group-light-non-interactive-surface-brand-1: var(--group-hsbc-colour-complimentary-red-1);
  --group-light-non-interactive-surface-black: var(--group-hsbc-colour-neutral-black);
  --group-light-non-interactive-surface-neutral-5: var(--group-hsbc-colour-neutral-grey-5);
  --group-light-non-interactive-surface-neutral-4: var(--group-hsbc-colour-neutral-grey-4);
  --group-light-non-interactive-surface-neutral-3: var(--group-hsbc-colour-neutral-grey-3);
  --group-light-non-interactive-surface-neutral-2: var(--group-hsbc-colour-neutral-grey-2);
  --group-light-non-interactive-surface-neutral-1: var(--group-hsbc-colour-neutral-grey-1);
  --group-light-non-interactive-surface-white: var(--group-hsbc-colour-neutral-white);
  --group-light-canvas: var(--group-hsbc-colour-neutral-white);
  --group-light-icon-on-dark-processing: var(--group-hsbc-colour-neutral-white);
  --group-light-icon-on-dark-disabled-2: var(--group-hsbc-colour-neutral-grey-5);
  --group-light-icon-on-dark-disabled-1: var(--group-hsbc-colour-neutral-grey-4);
  --group-light-icon-on-dark-pressed: var(--group-hsbc-colour-neutral-white);
  --group-light-icon-on-dark-hover: var(--group-hsbc-colour-neutral-white);
  --group-light-icon-on-dark: var(--group-hsbc-colour-neutral-white);
  --group-light-icon-on-light-processing: var(--group-hsbc-colour-neutral-grey-5);
  --group-light-icon-on-light-disabled-2: var(--group-hsbc-colour-neutral-white);
  --group-light-icon-on-light-disabled-1: var(--group-hsbc-colour-neutral-grey-3);
  --group-light-icon-on-light-pressed-2: var(--group-hsbc-colour-core-hsbc-red);
  --group-light-icon-on-light-hover-2: var(--group-hsbc-colour-core-hsbc-red);
  --group-light-icon-on-light-default-2: var(--group-hsbc-colour-core-hsbc-red);
  --group-light-icon-on-light-pressed-1: var(--group-hsbc-colour-neutral-grey-5);
  --group-light-icon-on-light-hover-1: var(--group-hsbc-colour-neutral-grey-5);
  --group-light-icon-on-light-default-1: var(--group-hsbc-colour-neutral-grey-5);
  --group-light-text-on-dark-disabled-2: var(--group-hsbc-colour-neutral-grey-5);
  --group-light-text-on-dark-disabled-1: var(--group-hsbc-colour-neutral-grey-4);
  --group-light-text-on-dark-pressed: var(--group-hsbc-colour-neutral-white);
  --group-light-text-on-dark-hover: var(--group-hsbc-colour-neutral-white);
  --group-light-text-on-dark: var(--group-hsbc-colour-neutral-white);
  --group-light-text-on-light-disabled-2: var(--group-hsbc-colour-neutral-white);
  --group-light-text-on-light-disabled-1: var(--group-hsbc-colour-neutral-grey-3);
  --group-light-text-on-light-pressed: var(--group-hsbc-colour-neutral-grey-5);
  --group-light-text-on-light-hover: var(--group-hsbc-colour-neutral-grey-5);
  --group-light-text-on-light: var(--group-hsbc-colour-neutral-grey-5);
  --group-dark-elevation-border: var(--group-hsbc-colour-neutral-grey-4);
  --group-dark-rag-border-information: var(--group-hsbc-colour-rag-blue);
  --group-dark-rag-border-success: var(--group-hsbc-colour-rag-green);
  --group-dark-rag-border-warning: var(--group-hsbc-colour-rag-amber);
  --group-dark-rag-border-error: var(--group-hsbc-colour-rag-red);
  --group-dark-rag-surface-information-default2: var(--group-hsbc-colour-rag-dark-blue-tint);
  --group-dark-rag-surface-information-default-1: var(--group-hsbc-colour-rag-blue);
  --group-dark-rag-surface-success-default2: var(--group-hsbc-colour-rag-dark-green-tint);
  --group-dark-rag-surface-success-default-1: var(--group-hsbc-colour-rag-green);
  --group-dark-rag-surface-warning-default2: var(--group-hsbc-colour-rag-dark-amber-tint);
  --group-dark-rag-surface-warning-default-1: var(--group-hsbc-colour-rag-amber);
  --group-dark-rag-surface-error-default2: var(--group-hsbc-colour-rag-dark-red-tint);
  --group-dark-rag-surface-error-default-1: var(--group-hsbc-colour-rag-red);
  --group-dark-rag-icon-information-icon: var(--group-hsbc-colour-neutral-white);
  --group-dark-rag-icon-information-container: var(--group-hsbc-colour-rag-blue);
  --group-dark-rag-icon-success-icon: var(--group-hsbc-colour-neutral-white);
  --group-dark-rag-icon-success-container: var(--group-hsbc-colour-rag-green);
  --group-dark-rag-icon-warning-icon: var(--group-hsbc-colour-neutral-grey-5);
  --group-dark-rag-icon-warning-container: var(--group-hsbc-colour-rag-amber);
  --group-dark-rag-icon-error-icon: var(--group-hsbc-colour-neutral-white);
  --group-dark-rag-icon-error-container: var(--group-hsbc-colour-rag-red);
  --group-dark-rag-text-on-dark: var(--group-hsbc-colour-neutral-white);
  --group-dark-rag-text-on-light: var(--group-hsbc-colour-neutral-grey-5);
  --group-dark-data-vis-border-on-dark-indicator: var(--group-hsbc-colour-neutral-white);
  --group-dark-data-vis-border-on-dark-gridline: var(--group-hsbc-colour-neutral-grey-5);
  --group-dark-data-vis-border-on-dark-baseline-2: var(--group-hsbc-colour-neutral-grey-5);
  --group-dark-data-vis-border-on-dark-baseline-1: var(--group-hsbc-colour-neutral-white);
  --group-dark-data-vis-border-on-light-indicator: var(--group-hsbc-colour-neutral-white);
  --group-dark-data-vis-border-on-light-gridline: var(--group-hsbc-colour-neutral-grey-5);
  --group-dark-data-vis-border-on-light-baseline-2: var(--group-hsbc-colour-neutral-grey-5);
  --group-dark-data-vis-border-on-light-baseline-1: var(--group-hsbc-colour-neutral-white);
  --group-dark-data-vis-surface-secondary: var(--group-hsbc-colour-neutral-black);
  --group-dark-data-vis-surface-primary: var(--group-hsbc-colour-neutral-black);
  --group-dark-data-vis-data-chart-green-4: var(--group-hsbc-colour-data-vis-green-4);
  --group-dark-data-vis-data-chart-green-3: var(--group-hsbc-colour-data-vis-green-3);
  --group-dark-data-vis-data-chart-green-2: var(--group-hsbc-colour-data-vis-green-2);
  --group-dark-data-vis-data-chart-green-1: var(--group-hsbc-colour-data-vis-green-1);
  --group-dark-data-vis-data-chart-orange-4: var(--group-hsbc-colour-data-vis-orange-4);
  --group-dark-data-vis-data-chart-orange-3: var(--group-hsbc-colour-data-vis-orange-3);
  --group-dark-data-vis-data-chart-orange-2: var(--group-hsbc-colour-data-vis-orange-2);
  --group-dark-data-vis-data-chart-orange-1: var(--group-hsbc-colour-data-vis-orange-1);
  --group-dark-data-vis-data-chart-pink-4: var(--group-hsbc-colour-data-vis-pink-4);
  --group-dark-data-vis-data-chart-pink-3: var(--group-hsbc-colour-data-vis-pink-3);
  --group-dark-data-vis-data-chart-pink-2: var(--group-hsbc-colour-data-vis-pink-2);
  --group-dark-data-vis-data-chart-pink-1: var(--group-hsbc-colour-data-vis-pink-1);
  --group-dark-data-vis-data-chart-purple-4: var(--group-hsbc-colour-data-vis-purple-4);
  --group-dark-data-vis-data-chart-purple-3: var(--group-hsbc-colour-data-vis-purple-3);
  --group-dark-data-vis-data-chart-purple-2: var(--group-hsbc-colour-data-vis-purple-2);
  --group-dark-data-vis-data-chart-purple-1: var(--group-hsbc-colour-data-vis-purple-1);
  --group-dark-data-vis-data-chart-blue-4: var(--group-hsbc-colour-data-vis-blue-4);
  --group-dark-data-vis-data-chart-blue-3: var(--group-hsbc-colour-data-vis-blue-3);
  --group-dark-data-vis-data-chart-blue-2: var(--group-hsbc-colour-data-vis-blue-2);
  --group-dark-data-vis-data-chart-blue-1: var(--group-hsbc-colour-data-vis-blue-1);
  --group-dark-interactive-on-dark-border-brand-1-processing: var(--group-hsbc-colour-neutral-white);
  --group-dark-interactive-on-dark-border-brand-1-disabled: var(--group-hsbc-colour-neutral-grey-4);
  --group-dark-interactive-on-dark-border-brand-1-pressed: var(--group-hsbc-colour-neutral-white);
  --group-dark-interactive-on-dark-border-brand-1-hover: var(--group-hsbc-colour-neutral-white);
  --group-dark-interactive-on-dark-border-brand-1: var(--group-hsbc-colour-neutral-white);
  --group-dark-interactive-on-dark-border-brand-2-processing: var(--group-hsbc-colour-neutral-white);
  --group-dark-interactive-on-dark-border-brand-2-disabled: var(--group-hsbc-colour-neutral-grey-4);
  --group-dark-interactive-on-dark-border-brand-2-pressed: var(--group-hsbc-colour-neutral-white);
  --group-dark-interactive-on-dark-border-brand-2-hover: var(--group-hsbc-colour-neutral-white);
  --group-dark-interactive-on-dark-border-brand-2: var(--group-hsbc-colour-neutral-white);
  --group-dark-interactive-on-dark-border-active-pressed: var(--group-hsbc-colour-neutral-white);
  --group-dark-interactive-on-dark-border-active-hover: var(--group-hsbc-colour-neutral-white);
  --group-dark-interactive-on-dark-border-active: var(--group-hsbc-colour-neutral-white);
  --group-dark-interactive-on-dark-border-high-contrast-disabled: var(--group-hsbc-colour-neutral-grey-4);
  --group-dark-interactive-on-dark-border-high-contrast-pressed: var(--group-hsbc-colour-neutral-grey-3);
  --group-dark-interactive-on-dark-border-high-contrast-hover: var(--group-hsbc-colour-neutral-grey-3);
  --group-dark-interactive-on-dark-border-high-contrast: var(--group-hsbc-colour-neutral-grey-3);
  --group-dark-interactive-on-dark-border-low-contrast-disabled: var(--group-hsbc-colour-neutral-grey-4);
  --group-dark-interactive-on-dark-border-low-contrast-pressed: var(--group-hsbc-colour-neutral-grey-4);
  --group-dark-interactive-on-dark-border-low-contrast-hover: var(--group-hsbc-colour-neutral-grey-4);
  --group-dark-interactive-on-dark-border-low-contrast: var(--group-hsbc-colour-neutral-grey-4);
  --group-dark-interactive-on-dark-surface-brand-2-processing: var(--group-hsbc-colour-neutral-white);
  --group-dark-interactive-on-dark-surface-brand-2-disabled: var(--group-hsbc-colour-neutral-grey-4);
  --group-dark-interactive-on-dark-surface-brand-2-pressed: var(--group-hsbc-colour-neutral-grey-2);
  --group-dark-interactive-on-dark-surface-brand-2-hover: var(--group-hsbc-colour-neutral-grey-1);
  --group-dark-interactive-on-dark-surface-brand-2: var(--group-hsbc-colour-neutral-white);
  --group-dark-interactive-on-dark-surface-brand-1-processing: var(--group-hsbc-colour-core-hsbc-red);
  --group-dark-interactive-on-dark-surface-brand-1-disabled: var(--group-hsbc-colour-neutral-grey-4);
  --group-dark-interactive-on-dark-surface-brand-1-pressed: var(--group-hsbc-colour-neutral-black);
  --group-dark-interactive-on-dark-surface-brand-1-hover: var(--group-hsbc-colour-complimentary-red-2);
  --group-dark-interactive-on-dark-surface-brand-1: var(--group-hsbc-colour-core-hsbc-red);
  --group-dark-interactive-on-dark-surface-active-pressed: var(--group-hsbc-colour-neutral-dark-grey-7);
  --group-dark-interactive-on-dark-surface-active-hover: var(--group-hsbc-colour-neutral-dark-grey-8);
  --group-dark-interactive-on-dark-surface-active: var(--group-hsbc-colour-neutral-black);
  --group-dark-interactive-on-dark-surface-primary-disabled: var(--group-hsbc-colour-neutral-dark-new-grey);
  --group-dark-interactive-on-dark-surface-primary-pressed: var(--group-hsbc-colour-neutral-dark-grey-6);
  --group-dark-interactive-on-dark-surface-primary-hover: var(--group-hsbc-colour-neutral-grey-5);
  --group-dark-interactive-on-dark-surface-primary: var(--group-hsbc-colour-neutral-dark-new-grey);
  --group-dark-interactive-on-light-border-brand-2-processing: var(--group-hsbc-colour-neutral-white);
  --group-dark-interactive-on-light-border-brand-2-disabled: var(--group-hsbc-colour-neutral-grey-4);
  --group-dark-interactive-on-light-border-brand-2-pressed: var(--group-hsbc-colour-neutral-white);
  --group-dark-interactive-on-light-border-brand-2-hover: var(--group-hsbc-colour-neutral-white);
  --group-dark-interactive-on-light-border-brand-2: var(--group-hsbc-colour-neutral-white);
  --group-dark-interactive-on-light-border-brand-1-pressed: var(--group-hsbc-colour-neutral-white);
  --group-dark-interactive-on-light-border-brand-1-hover: var(--group-hsbc-colour-neutral-white);
  --group-dark-interactive-on-light-border-brand-1: var(--group-hsbc-colour-neutral-white);
  --group-dark-interactive-on-light-border-active-pressed: var(--group-hsbc-colour-neutral-white);
  --group-dark-interactive-on-light-border-active-hover: var(--group-hsbc-colour-neutral-white);
  --group-dark-interactive-on-light-border-active: var(--group-hsbc-colour-neutral-white);
  --group-dark-interactive-on-light-border-high-contrast-disabled: var(--group-hsbc-colour-neutral-grey-4);
  --group-dark-interactive-on-light-border-high-contrast-pressed: var(--group-hsbc-colour-neutral-grey-3);
  --group-dark-interactive-on-light-border-high-contrast-hover: var(--group-hsbc-colour-neutral-grey-3);
  --group-dark-interactive-on-light-border-high-contrast: var(--group-hsbc-colour-neutral-grey-3);
  --group-dark-interactive-on-light-border-low-contrast-disabled: var(--group-hsbc-colour-neutral-grey-4);
  --group-dark-interactive-on-light-border-low-contrast-pressed: var(--group-hsbc-colour-neutral-grey-4);
  --group-dark-interactive-on-light-border-low-contrast-hover: var(--group-hsbc-colour-neutral-grey-4);
  --group-dark-interactive-on-light-border-low-contrast: var(--group-hsbc-colour-neutral-grey-4);
  --group-dark-interactive-on-light-surface-brand-2-processing: var(--group-hsbc-colour-neutral-grey-4);
  --group-dark-interactive-on-light-surface-brand-2-disabled: var(--group-hsbc-colour-neutral-dark-grey-6);
  --group-dark-interactive-on-light-surface-brand-2-pressed: var(--group-hsbc-colour-neutral-grey-5);
  --group-dark-interactive-on-light-surface-brand-2-hover: var(--group-hsbc-colour-neutral-dark-new-grey);
  --group-dark-interactive-on-light-surface-brand-2: var(--group-hsbc-colour-neutral-grey-4);
  --group-dark-interactive-on-light-surface-brand-1-processing: var(--group-hsbc-colour-core-hsbc-red);
  --group-dark-interactive-on-light-surface-brand-1-disabled: var(--group-hsbc-colour-neutral-dark-grey-6);
  --group-dark-interactive-on-light-surface-brand-1-pressed: var(--group-hsbc-colour-neutral-grey-4);
  --group-dark-interactive-on-light-surface-brand-1-hover: var(--group-hsbc-colour-complimentary-red-2);
  --group-dark-interactive-on-light-surface-brand-1: var(--group-hsbc-colour-core-hsbc-red);
  --group-dark-interactive-on-light-surface-active-pressed: var(--group-hsbc-colour-neutral-grey-5);
  --group-dark-interactive-on-light-surface-active-hover: var(--group-hsbc-colour-neutral-dark-new-grey);
  --group-dark-interactive-on-light-surface-active: var(--group-hsbc-colour-neutral-grey-4);
  --group-dark-interactive-on-light-surface-primary-processing: var(--group-hsbc-colour-neutral-black);
  --group-dark-interactive-on-light-surface-primary-disabled: var(--group-hsbc-colour-neutral-black);
  --group-dark-interactive-on-light-surface-primary-pressed: var(--group-hsbc-colour-neutral-grey-4);
  --group-dark-interactive-on-light-surface-primary-hover: var(--group-hsbc-colour-neutral-dark-grey-8);
  --group-dark-interactive-on-light-surface-primary: var(--group-hsbc-colour-neutral-black);
  --group-dark-non-interactive-border-black: var(--group-hsbc-colour-neutral-white);
  --group-dark-non-interactive-border-neutral-5: var(--group-hsbc-colour-neutral-grey-2);
  --group-dark-non-interactive-border-neutral-4: var(--group-hsbc-colour-neutral-grey-3);
  --group-dark-non-interactive-border-neutral-3: var(--group-hsbc-colour-neutral-grey-4);
  --group-dark-non-interactive-border-neutral-2: var(--group-hsbc-colour-neutral-dark-new-grey);
  --group-dark-non-interactive-border-neutral-1: var(--group-hsbc-colour-neutral-grey-5);
  --group-dark-non-interactive-border-white: var(--group-hsbc-colour-neutral-black);
  --group-dark-non-interactive-surface-brand-3: var(--group-hsbc-colour-complimentary-red-3);
  --group-dark-non-interactive-surface-brand-2: var(--group-hsbc-colour-complimentary-red-2);
  --group-dark-non-interactive-surface-brand-1: var(--group-hsbc-colour-complimentary-red-1);
  --group-dark-non-interactive-surface-black: var(--group-hsbc-colour-neutral-grey-4);
  --group-dark-non-interactive-surface-neutral-5: var(--group-hsbc-colour-neutral-dark-new-grey);
  --group-dark-non-interactive-surface-neutral-4: var(--group-hsbc-colour-neutral-grey-5);
  --group-dark-non-interactive-surface-neutral-3: var(--group-hsbc-colour-neutral-dark-grey-6);
  --group-dark-non-interactive-surface-neutral-2: var(--group-hsbc-colour-neutral-dark-grey-7);
  --group-dark-non-interactive-surface-neutral-1: var(--group-hsbc-colour-neutral-dark-grey-8);
  --group-dark-non-interactive-surface-white: var(--group-hsbc-colour-neutral-black);
  --group-dark-canvas: var(--group-hsbc-colour-neutral-black);
  --group-dark-icon-on-dark-processing: var(--group-hsbc-colour-neutral-white);
  --group-dark-icon-on-dark-disabled-2: var(--group-hsbc-colour-neutral-grey-5);
  --group-dark-icon-on-dark-disabled-1: var(--group-hsbc-colour-neutral-grey-4);
  --group-dark-icon-on-dark-pressed: var(--group-hsbc-colour-neutral-white);
  --group-dark-icon-on-dark-hover: var(--group-hsbc-colour-neutral-white);
  --group-dark-icon-on-dark: var(--group-hsbc-colour-neutral-white);
  --group-dark-icon-on-light-processing: var(--group-hsbc-colour-neutral-white);
  --group-dark-icon-on-light-disabled-2: var(--group-hsbc-colour-neutral-grey-5);
  --group-dark-icon-on-light-disabled-1: var(--group-hsbc-colour-neutral-grey-4);
  --group-dark-icon-on-light-pressed-2: var(--group-hsbc-colour-neutral-white);
  --group-dark-icon-on-light-hover-2: var(--group-hsbc-colour-neutral-white);
  --group-dark-icon-on-light-default-2: var(--group-hsbc-colour-neutral-white);
  --group-dark-icon-on-light-pressed-1: var(--group-hsbc-colour-neutral-white);
  --group-dark-icon-on-light-hover-1: var(--group-hsbc-colour-neutral-white);
  --group-dark-icon-on-light-default-1: var(--group-hsbc-colour-neutral-white);
  --group-dark-text-on-dark-disabled-2: var(--group-hsbc-colour-neutral-grey-5);
  --group-dark-text-on-dark-disabled-1: var(--group-hsbc-colour-neutral-grey-4);
  --group-dark-text-on-dark-pressed: var(--group-hsbc-colour-neutral-white);
  --group-dark-text-on-dark-hover: var(--group-hsbc-colour-neutral-white);
  --group-dark-text-on-dark: var(--group-hsbc-colour-neutral-white);
  --group-dark-text-on-light-disabled-2: var(--group-hsbc-colour-neutral-grey-5);
  --group-dark-text-on-light-disabled-1: var(--group-hsbc-colour-neutral-grey-4);
  --group-dark-text-on-light-pressed: var(--group-hsbc-colour-neutral-white);
  --group-dark-text-on-light-hover: var(--group-hsbc-colour-neutral-white);
  --group-dark-text-on-light: var(--group-hsbc-colour-neutral-white);
  --group-color-base-neutral-5: var(--group-hsbc-colour-neutral-grey-5);
  --group-color-base-neutral-4: var(--group-hsbc-colour-neutral-grey-4);
  --group-color-base-neutral-3: var(--group-hsbc-colour-neutral-grey-3);
  --group-color-base-neutral-2: var(--group-hsbc-colour-neutral-grey-2);
  --group-color-base-neutral-1: var(--group-hsbc-colour-neutral-grey-1);
  --group-color-base-black: var(--group-hsbc-colour-core-black);
  --group-color-base-white: var(--group-hsbc-colour-core-white);
  --group-color-base-complimentary-red-3: var(--group-hsbc-colour-complimentary-red-3);
  --group-color-base-complimentary-red-2: var(--group-hsbc-colour-complimentary-red-2);
  --group-color-base-complimentary-red-1: var(--group-hsbc-colour-complimentary-red-1);
  --group-color-base-core-white: var(--group-hsbc-colour-core-white);
  --group-color-base-core-black: var(--group-hsbc-colour-core-black);
  --group-color-base-core-primary: var(--group-hsbc-colour-core-hsbc-red);
  --group-color-base-error-default-2: var(--group-light-rag-surface-error-default2);
  --group-color-base-error-default-1: var(--group-light-rag-surface-error-default-1);
  --group-color-base-warning-default-2: var(--group-light-rag-surface-warning-default2);
  --group-color-base-warning-default-1: var(--group-light-rag-surface-warning-default-1);
  --group-color-base-success-default-2: var(--group-light-rag-surface-success-default2);
  --group-color-base-success-default-1: var(--group-light-rag-surface-success-default-1);
  --group-color-base-info-default-2: var(--group-light-rag-surface-information-default2);
  --group-color-base-info-default-1: var(--group-light-rag-surface-information-default-1);
  --group-color-background-disabled: var(
    --group-light-interactive-on-light-surface-brand-1-disabled
  ); /* Disabled elements are displayed in a light grey. */
  --group-color-background-primary: var(
    --group-color-base-core-primary
  ); /* Red is our accent color and it is present on every touch-point */
  --group-color-text-error: var(--group-color-base-error-default-1);
  --group-color-text-success: var(--group-color-base-success-default-1);
  --group-color-text-warning: var(--group-color-base-warning-default-1);
  --group-color-text-info: var(--group-color-base-info-default-1);
  --group-color-background-error: var(--group-color-base-error-default-1); /* Error messages are displayed in red. */
  --group-color-background-warning: var(
    --group-color-base-warning-default-1
  ); /* Warning messages are displayed in yellow. */
  --group-color-background-success: var(
    --group-color-base-success-default-1
  ); /* Success messages are displayed in green. */
  --group-color-background-info: var(
    --group-color-base-info-default-1
  ); /* Informational messages are displayed in blue. */
}