@charset "UTF-8";
/**
 * Base Tokens
 */
:root {
  --r-amethyst-400: #4925cb; /** For enabled state of links (visited) in lightmode */
  --r-amethyst-500: #39277a; /** For hovered and activated state of links (visited) in lightmode */
  --r-azure-400: #014bb3; /** For enabled state of links (not visited) in lightmode */
  --r-azure-500: #24346f; /** For hovered and activated state of links (not visited) in lightmode */
  --r-blue-100: #f8fafb; /** Used for (lightmode) status-info-soft */
  --r-blue-400: #3e5c73; /** Used for (lightmode) status-info-regular */
  --r-charcoal-200: #c9c9c9;
  --r-charcoal-300: #686868;
  --r-charcoal-400: #282828;
  --r-charcoal-400-alpha-04: rgba(40, 40, 40, 0.04); /** Used for (lightmode) background-state-hovered */
  --r-charcoal-400-alpha-08: rgba(40, 40, 40, 0.08); /** Used for (lightmode) background-state-selected */
  --r-charcoal-400-alpha-12: rgba(40, 40, 40, 0.12); /** Used for (lightmode) background-state-activated */
  --r-charcoal-500: #141414;
  --r-charcoal-600: #000000;
  --r-charcoal-600-alpha-48: rgba(0, 0, 0, 0.48); /** Used for (lightmode) background-overlay */
  --r-charcoal-600-alpha-80: rgba(0, 0, 0, 0.8); /** Used for (darkmode) background-overlay */
  --r-dark-amethyst-100: #e6d4ff; /** For hovered and activated state of links (visited) in darkmode */
  --r-dark-amethyst-200: #d0a8ff; /** For enabled state of links (visited) in darkmode */
  --r-dark-azure-100: #d6e6ff; /** For hovered and activated state of links (not visited) in darkmode */
  --r-dark-azure-200: #a8c9ff; /** For enabled state of links (not visited) in darkmode */
  --r-dark-blue-100: #afc3d4; /** Used for (darkmode) status-info-regular */
  --r-dark-blue-500: #222528; /** Used for (darkmode) status-info-soft */
  --r-dark-green-100: #80ce88; /** Used for (darkmode) status-success-regular */
  --r-dark-green-500: #212b22; /** Used for (darkmode) status-success-soft */
  --r-dark-orange-100: #ffb557; /** Used for (darkmode) status-warning-regular */
  --r-dark-orange-500: #31281c; /** Used for (darkmode) status-warning-soft */
  --r-dark-red-100: #ff969c; /** Used for (darkmode) status-error-regular */
  --r-dark-red-500: #190606; /** Used for (darkmode) status-error-soft */
  --r-dark-vanguard-100: #6da258;
  --r-dark-vanguard-200: #587d4a;
  --r-dark-vanguard-300: #3d4d36;
  --r-dark-vanguard-400: #323a2f;
  --r-ember-400: #ef706b;
  --r-focused-400: #0071e3; /** Used for focused outline in both lightmode and darkmode */
  --r-green-100: #f7fdf8; /** Used for (lightmode) status-success-soft */
  --r-green-400: #298535; /** Used for (lightmode) status-success-regular */
  --r-haze-200: #f3f1f0;
  --r-haze-200-alpha-04: rgba(243, 241, 240, 0.04); /** Used for (darkmode) background-state-hovered */
  --r-haze-200-alpha-08: rgba(243, 241, 240, 0.08); /** Used for (darkmode) background-state-selected */
  --r-haze-200-alpha-12: rgba(243, 241, 240, 0.12); /** Used for (darkmode) background-state-activated */
  --r-haze-300: #ece9e8;
  --r-haze-400: #e7e4e2;
  --r-haze-500: #d4d1cf;
  --r-haze-600: #bfbdbb;
  --r-neutral-white: #ffffff;
  --r-orange-100: #fef9f5; /** Used for (lightmode) status-warning-soft */
  --r-orange-400: #ff7429; /** Used for (lightmode) status-warning-regular */
  --r-red-100: #fef6f6; /** Used for (lightmode) status-error-soft */
  --r-red-400: #b00c15; /** Used for (lightmode) status-error-regular */
  --r-vanguard-100: #e5ebe3;
  --r-vanguard-200: #cbd7c6;
  --r-vanguard-300: #86a27b;
  --r-vanguard-400: #527a42;
  --r-vanguard-500: #456637;
  --r-vanguard-600: #37522c;
  --r-spacing-025: 0.25rem;
  --r-spacing-050: 0.5rem;
  --r-spacing-075: 0.75rem;
  --r-spacing-100: 1rem;
  --r-spacing-125: 1.25rem;
  --r-spacing-150: 1.5rem;
  --r-spacing-175: 1.75rem;
  --r-spacing-200: 2rem;
  --r-spacing-225: 2.25rem;
  --r-spacing-250: 2.5rem;
  --r-spacing-275: 2.75rem;
  --r-spacing-300: 3rem;
  --r-spacing-350: 3.5rem;
  --r-spacing-400: 4rem;
  --r-spacing-450: 4.5rem;
  --r-spacing-500: 5rem;
  --r-icon-size-l: 2rem;
  --r-icon-size-m: 1.5rem;
  --r-icon-size-s: 1rem;
  --r-font-family-heading: "GT Ultra Median", Skeena, ui-serif, serif;
  --r-font-family-text: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --r-font-size-desktop-200: 0.8125rem;
  --r-font-size-desktop-300: 0.875rem;
  --r-font-size-desktop-400: 1rem;
  --r-font-size-desktop-500: 1.375rem;
  --r-font-size-desktop-600: 1.75rem;
  --r-font-size-desktop-700: 2.25rem;
  --r-font-size-desktop-800: 2.875rem;
  --r-font-size-desktop-900: 3.5rem;
  --r-font-size-mobile-200: 0.8125rem;
  --r-font-size-mobile-300: 0.875rem;
  --r-font-size-mobile-400: 1rem;
  --r-font-size-mobile-500: 1.25rem;
  --r-font-size-mobile-600: 1.5rem;
  --r-font-size-mobile-700: 1.75rem;
  --r-font-size-mobile-800: 1.875rem;
  --r-font-size-mobile-900: 2.625rem;
  --r-font-weight-light: 300;
  --r-font-weight-regular: 400;
  --r-font-weight-semibold: 600;
  --r-line-height-l: 1.7;
  --r-line-height-m: 1.5;
  --r-line-height-s: 1.2;
  --r-line-height-xs: 1.1;
}

/**
 * Deprecated Tokens
 */
:root {
  --r-dark-azure-400: var(--r-dark-azure-200); /** Deprecated: will be removed in @riverty/design-tokens@3 */
  --r-dark-blue-300: var(--r-dark-blue-100); /** Deprecated: will be removed in @riverty/design-tokens@3 */
  --r-dark-blue-600: var(--r-dark-blue-500); /** Deprecated: will be removed in @riverty/design-tokens@3 */
  --r-dark-green-400: var(--r-dark-green-100); /** Deprecated: will be removed in @riverty/design-tokens@3 */
  --r-dark-orange-400: var(--r-dark-orange-100); /** Deprecated: will be removed in @riverty/design-tokens@3 */
  --r-dark-red-600: var(--r-dark-red-500); /** Deprecated: will be removed in @riverty/design-tokens@3 */
  --r-dark-rustyorange-500: var(--r-dark-orange-500); /** Deprecated: will be removed in @riverty/design-tokens@3 */
  --r-background-brand-vanguard: var(--r-background-brand); /** Deprecated: will be removed in @riverty/design-tokens@3. */
  --r-background-brand-vanguard-softest: var(--r-background-brand-softest); /** Deprecated: will be removed in @riverty/design-tokens@3. */
  --r-background-interactive-activated: var(--r-background-state-selected); /** Deprecated: will be removed in @riverty/design-tokens@3. */
  --r-background-interactive-hovered: var(--r-background-state-hovered); /** Deprecated: will be removed in @riverty/design-tokens@3. */
  --r-background-interactive-hovered-inverse: var(--r-background-state-hovered-inverse); /** Deprecated: will be removed in @riverty/design-tokens@3. */
  --r-background-interactive-pressed: var(--r-background-state-activated); /** Deprecated: will be removed in @riverty/design-tokens@3. */
  --r-background-interactive-pressed-inverse: var(--r-background-state-activated-inverse); /** Deprecated: will be removed in @riverty/design-tokens@3. */
  --r-background-interactive-regular: var(--r-background-regular); /** Deprecated: will be removed in @riverty/design-tokens@3. */
  --r-background-interactive-softer: var(--r-background-soft); /** Deprecated: will be removed in @riverty/design-tokens@3. */
  --r-background-interactive-softest: var(--r-background-softest); /** Deprecated: will be removed in @riverty/design-tokens@3. */
  --r-background-interactive-strong: var(--r-background-regular); /** Deprecated: will be removed in @riverty/design-tokens@3. */
  --r-background-modal: var(--r-background-softest); /** Deprecated: will be removed in @riverty/design-tokens@3. */
  --r-border-brand-vanguard: var(--r-border-brand); /** Deprecated: will be removed in @riverty/design-tokens@3. */
  --r-icon-brand-vanguard: var(--r-icon-brand); /** Deprecated: will be removed in @riverty/design-tokens@3. */
  --r-icon-warning: var(--r-icon-strong-static); /** Deprecated: will be removed in @riverty/design-tokens@3. */
  --r-logo-brand-vanguard: var(--r-logo-brand); /** Deprecated: will be removed in @riverty/design-tokens@3. */
  --r-text-onbrand: var(--r-text-inverse-static); /** Deprecated: will be removed in @riverty/design-tokens@3. */
  --r-text-softer: var(--r-text-soft); /** Deprecated: will be removed in @riverty/design-tokens@3. */
  --r-text-warning: var(--r-text-strong-static); /** Deprecated: will be removed in @riverty/design-tokens@3. */
}

/**
 * Semantic Color Tokens - Light
 */
:root,
[data-theme=light] {
  --r-internal-theme-state: light;
  --r-background-brand: var(--r-vanguard-400); /** Used in regular decorative screens, containers or sections Examples: Onboarding screens, Login screens */
  --r-background-brand-softest: var(--r-vanguard-100); /** Used in soft decorative screens, containers or sections Examples: Onboarding screens, Login screens */
  --r-background-inverse: var(--r-charcoal-400); /** Used for specific sections that require attention */
  --r-background-overlay: var(--r-charcoal-600-alpha-48); /** Used as an overlay background for components that behave modal */
  --r-background-regular: var(--r-charcoal-400); /** Used for regular backgrounds in components Examples: Primary button */
  --r-background-soft: var(--r-haze-400); /** Used as static backgrounds in our components Examples: dialog, bottom sheet */
  --r-background-softer: var(--r-haze-200); /** Used as the main background color of our mobile interfaces */
  --r-background-softest: var(--r-neutral-white); /** Used as the main background color of our desktop interfaces, as well as small components Examples: input field, select */
  --r-background-softest-static: var(--r-neutral-white); /** Used as a soft background independent of mode */
  --r-background-state-activated: var(--r-charcoal-400-alpha-12); /** Used for activated state in all interactive components */
  --r-background-state-hovered: var(--r-charcoal-400-alpha-04); /** Used for hovered state in all interactive components */
  --r-background-state-selected: var(--r-charcoal-400-alpha-08); /** Used for selected state in all interactive components */
  --r-border-brand: var(--r-vanguard-400); /** Used for borders that serve decoration and function, adding color */
  --r-border-focused: var(--r-focused-400); /** Used for creating focus states of interactive components */
  --r-border-focused-outlined: var(--r-neutral-white); /** Used for highlighting the focus states of interactive components */
  --r-border-inverse: var(--r-neutral-white); /** Used for borders that are on strong backgrounds in light mode and soft backgrounds in darkmode */
  --r-border-regular: var(--r-charcoal-400); /** Used for borders balanced with regular texts and icons */
  --r-border-soft: var(--r-charcoal-300); /** Used for smoother borders but still clearly visible */
  --r-border-softer: var(--r-charcoal-200); /** Used for making distinctions between sections */
  --r-border-softest: var(--r-haze-400); /** Used for borders that serve as decoration rather than function */
  --r-border-strong: var(--r-charcoal-600); /** Used for clear, distinct borders */
  --r-icon-brand: var(--r-vanguard-400); /** Used to add emphasis on one single icon */
  --r-icon-inverse: var(--r-neutral-white); /** Used for icons that are used on inverse backgrounds */
  --r-icon-regular: var(--r-charcoal-400); /** Used for icons that are interactive */
  --r-icon-regular-static: var(--r-charcoal-400); /** Used for icons that are interactive but should keep static in darkmode */
  --r-icon-soft: var(--r-charcoal-300); /** Used for icons that are supporting labels (not interactive) */
  --r-icon-strong-static: var(--r-charcoal-600); /** Used on coloured backgrounds to ensure better contrast compared to r-icon-regular, static in darkmode */
  --r-link-emphasis: var(--r-azure-500); /** Used to indicate to users the interactivity of a link, used for hover and activated states */
  --r-link-enabled: var(--r-azure-400); /** Used to indicate to users that a link is enabled */
  --r-link-visited-emphasis: var(--r-amethyst-500); /** Used to indicate to users the interactivity of a visited link, used for hover and activated states */
  --r-link-visited-enabled: var(--r-amethyst-400); /** Used to indicate to users that a link has been visited before */
  --r-logo-brand: var(--r-vanguard-400); /** Used when logo requires attention */
  --r-logo-brand-ember: var(--r-ember-400); /** Not used, will be removed in future */
  --r-logo-brand-inverse: var(--r-haze-400); /** Used on dark backgrounds, when logo doesn’t require much attention */
  --r-logo-brand-regular: var(--r-charcoal-400); /** Used when logo doesn’t require much attention */
  --r-status-error-regular: var(--r-red-400); /** Used for indicating strong error  Examples: Error border for badge, error border for toast, error text */
  --r-status-error-regular-static: var(--r-red-400); /** Used for indicating strong error, static in both light and darkmode Examples: error background for primary button */
  --r-status-error-soft: var(--r-red-100); /** Used for indicating soft error, often combined with regular error color Examples: error background for badge, error background for toast */
  --r-status-info-regular: var(--r-blue-400); /** Used for indicating strong info  Examples: info border for badge, info border for toast */
  --r-status-info-soft: var(--r-blue-100); /** Used for indicating soft info, often combined with regular info color Examples: info background for badge, info background for toast */
  --r-status-success-regular: var(--r-green-400); /** Used for indicating strong success  Examples: success border for badge, success border for toast */
  --r-status-success-soft: var(--r-green-100); /** Used for indicating soft success, often combined with regular success color Examples: success background for badge, success background for toast */
  --r-status-warning-regular: var(--r-orange-400); /** Used for indicating strong warning  Examples: warning border for badge, warning border for toast */
  --r-status-warning-soft: var(--r-orange-100); /** Used for indicating soft warning, often combined with regular warning color Examples: warning background for badge, warning background for toast */
  --r-text-brand: var(--r-vanguard-400); /** Used for decorative, large texts only (from font size 24), to emphasize brand Examples: Marketing email headers */
  --r-text-inverse: var(--r-neutral-white); /** Used for regular texts but then on strong backgrounds Examples: Text in Primary button */
  --r-text-inverse-static: var(--r-neutral-white); /** Used for decorative, large texts only (from font size 24) to use above backgrounds with brand color Examples: Onboarding screen Riverty App */
  --r-text-regular: var(--r-charcoal-400); /** Used for all texts that aren’t in need of exceptions  Examples: Headlines, body texts, labels */
  --r-text-soft: var(--r-charcoal-300); /** Used for texts that are additional, not crucial Examples: Hint texts, placeholder texts */
  --r-text-strong: var(--r-charcoal-600); /** Used on coloured backgrounds to ensure better contrast compared to r-text-regular Example: Text in Toast with warning status */
  --r-text-strong-static: var(--r-charcoal-600); /** Used on coloured backgrounds that don’t change from light to dark mode, compared to r-text-strong Examples: Text in Primary button */
  --r-background-state-hovered-inverse: var(--r-haze-200-alpha-04); /** Internal Design System token to enable 'inverse'-appearing components such as alert and popover. */
  --r-background-state-activated-inverse: var(--r-haze-200-alpha-12); /** Internal Design System token to enable 'inverse'-appearing components such as alert and popover. */
}

/**
 * Semantic Color Tokens - Dark
 */
[data-theme=dark] {
  --r-internal-theme-state: dark;
  --r-background-brand: var(--r-dark-vanguard-100); /** Used in regular decorative screens, containers or sections Examples: Onboarding screens, Login screens */
  --r-background-brand-softest: var(--r-dark-vanguard-400); /** Used in soft decorative screens, containers or sections Examples: Onboarding screens, Login screens */
  --r-background-inverse: var(--r-haze-200); /** Used for specific sections that require attention */
  --r-background-overlay: var(--r-charcoal-600-alpha-80); /** Used as an overlay background for components that behave modal */
  --r-background-regular: var(--r-haze-200); /** Used for regular backgrounds in components Examples: Primary button */
  --r-background-soft: var(--r-charcoal-600); /** Used as static backgrounds in our components Examples: dialog, bottom sheet */
  --r-background-softer: var(--r-charcoal-500); /** Used as the main background color of our mobile interfaces */
  --r-background-softest: var(--r-charcoal-400); /** Used as the main background color of our desktop interfaces, as well as small components Examples: input field, select */
  --r-background-softest-static: var(--r-neutral-white); /** Used as a soft background independent of mode */
  --r-background-state-activated: var(--r-haze-200-alpha-12); /** Used for activated state in all interactive components */
  --r-background-state-hovered: var(--r-haze-200-alpha-04); /** Used for hovered state in all interactive components */
  --r-background-state-selected: var(--r-haze-200-alpha-08); /** Used for selected state in all interactive components */
  --r-border-brand: var(--r-dark-vanguard-100); /** Used for borders that serve decoration and function, adding color */
  --r-border-focused: var(--r-focused-400); /** Used for creating focus states of interactive components */
  --r-border-focused-outlined: var(--r-neutral-white); /** Used for highlighting the focus states of interactive components */
  --r-border-inverse: var(--r-charcoal-400); /** Used for borders that are on strong backgrounds in light mode and soft backgrounds in darkmode */
  --r-border-regular: var(--r-haze-200); /** Used for borders balanced with regular texts and icons */
  --r-border-soft: var(--r-charcoal-300); /** Used for smoother borders but still clearly visible */
  --r-border-softer: var(--r-charcoal-300); /** Used for making distinctions between sections */
  --r-border-softest: var(--r-charcoal-200); /** Used for borders that serve as decoration rather than function */
  --r-border-strong: var(--r-neutral-white); /** Used for clear, distinct borders */
  --r-icon-brand: var(--r-dark-vanguard-100); /** Used to add emphasis on one single icon */
  --r-icon-inverse: var(--r-charcoal-400); /** Used for icons that are used on inverse backgrounds */
  --r-icon-regular: var(--r-haze-200); /** Used for icons that are interactive */
  --r-icon-regular-static: var(--r-charcoal-400); /** Used for icons that are interactive but should keep static in darkmode */
  --r-icon-soft: var(--r-charcoal-200); /** Used for icons that are supporting labels (not interactive) */
  --r-icon-strong-static: var(--r-charcoal-600); /** Used on coloured backgrounds to ensure better contrast compared to r-icon-regular, static in darkmode */
  --r-link-emphasis: var(--r-dark-azure-100); /** Used to indicate to users the interactivity of a link, used for hover and activated states */
  --r-link-enabled: var(--r-dark-azure-200); /** Used to indicate to users that a link is enabled */
  --r-link-visited-emphasis: var(--r-dark-amethyst-100); /** Used to indicate to users the interactivity of a visited link, used for hover and activated states */
  --r-link-visited-enabled: var(--r-dark-amethyst-200); /** Used to indicate to users that a link has been visited before */
  --r-logo-brand: var(--r-vanguard-400); /** Used when logo requires attention */
  --r-logo-brand-ember: var(--r-ember-400); /** Not used, will be removed in future */
  --r-logo-brand-inverse: var(--r-charcoal-400); /** Used on dark backgrounds, when logo doesn’t require much attention */
  --r-logo-brand-regular: var(--r-haze-400); /** Used when logo doesn’t require much attention */
  --r-status-error-regular: var(--r-dark-red-100); /** Used for indicating strong error  Examples: Error border for badge, error border for toast, error text */
  --r-status-error-regular-static: var(--r-red-400); /** Used for indicating strong error, static in both light and darkmode Examples: error background for primary button */
  --r-status-error-soft: var(--r-dark-red-500); /** Used for indicating soft error, often combined with regular error color Examples: error background for badge, error background for toast */
  --r-status-info-regular: var(--r-dark-blue-100); /** Used for indicating strong info  Examples: info border for badge, info border for toast */
  --r-status-info-soft: var(--r-dark-blue-500); /** Used for indicating soft info, often combined with regular info color Examples: info background for badge, info background for toast */
  --r-status-success-regular: var(--r-dark-green-100); /** Used for indicating strong success  Examples: success border for badge, success border for toast */
  --r-status-success-soft: var(--r-dark-green-500); /** Used for indicating soft success, often combined with regular success color Examples: success background for badge, success background for toast */
  --r-status-warning-regular: var(--r-dark-orange-100); /** Used for indicating strong warning  Examples: warning border for badge, warning border for toast */
  --r-status-warning-soft: var(--r-dark-orange-500); /** Used for indicating soft warning, often combined with regular warning color Examples: warning background for badge, warning background for toast */
  --r-text-brand: var(--r-dark-vanguard-100); /** Used for decorative, large texts only (from font size 24), to emphasize brand Examples: Marketing email headers */
  --r-text-inverse: var(--r-charcoal-400); /** Used for regular texts but then on strong backgrounds Examples: Text in Primary button */
  --r-text-inverse-static: var(--r-neutral-white); /** Used for decorative, large texts only (from font size 24) to use above backgrounds with brand color Examples: Onboarding screen Riverty App */
  --r-text-regular: var(--r-haze-200); /** Used for all texts that aren’t in need of exceptions  Examples: Headlines, body texts, labels */
  --r-text-soft: var(--r-charcoal-200); /** Used for texts that are additional, not crucial Examples: Hint texts, placeholder texts */
  --r-text-strong: var(--r-neutral-white); /** Used on coloured backgrounds to ensure better contrast compared to r-text-regular Example: Text in Toast with warning status */
  --r-text-strong-static: var(--r-charcoal-600); /** Used on coloured backgrounds that don’t change from light to dark mode, compared to r-text-strong Examples: Text in Primary button */
  --r-background-state-hovered-inverse: var(--r-charcoal-400-alpha-04); /** Internal Design System token to enable 'inverse'-appearing components such as alert and popover. */
  --r-background-state-activated-inverse: var(--r-charcoal-400-alpha-12); /** Internal Design System token to enable 'inverse'-appearing components such as alert and popover. */
}

/**
 * Semantic Color Tokens - Dark
 */
@media (prefers-color-scheme: dark) {
  [data-theme=auto] {
    color-scheme: dark;
    --r-internal-theme-state: dark;
    --r-background-brand: var(--r-dark-vanguard-100); /** Used in regular decorative screens, containers or sections Examples: Onboarding screens, Login screens */
    --r-background-brand-softest: var(--r-dark-vanguard-400); /** Used in soft decorative screens, containers or sections Examples: Onboarding screens, Login screens */
    --r-background-inverse: var(--r-haze-200); /** Used for specific sections that require attention */
    --r-background-overlay: var(--r-charcoal-600-alpha-80); /** Used as an overlay background for components that behave modal */
    --r-background-regular: var(--r-haze-200); /** Used for regular backgrounds in components Examples: Primary button */
    --r-background-soft: var(--r-charcoal-600); /** Used as static backgrounds in our components Examples: dialog, bottom sheet */
    --r-background-softer: var(--r-charcoal-500); /** Used as the main background color of our mobile interfaces */
    --r-background-softest: var(--r-charcoal-400); /** Used as the main background color of our desktop interfaces, as well as small components Examples: input field, select */
    --r-background-softest-static: var(--r-neutral-white); /** Used as a soft background independent of mode */
    --r-background-state-activated: var(--r-haze-200-alpha-12); /** Used for activated state in all interactive components */
    --r-background-state-hovered: var(--r-haze-200-alpha-04); /** Used for hovered state in all interactive components */
    --r-background-state-selected: var(--r-haze-200-alpha-08); /** Used for selected state in all interactive components */
    --r-border-brand: var(--r-dark-vanguard-100); /** Used for borders that serve decoration and function, adding color */
    --r-border-focused: var(--r-focused-400); /** Used for creating focus states of interactive components */
    --r-border-focused-outlined: var(--r-neutral-white); /** Used for highlighting the focus states of interactive components */
    --r-border-inverse: var(--r-charcoal-400); /** Used for borders that are on strong backgrounds in light mode and soft backgrounds in darkmode */
    --r-border-regular: var(--r-haze-200); /** Used for borders balanced with regular texts and icons */
    --r-border-soft: var(--r-charcoal-300); /** Used for smoother borders but still clearly visible */
    --r-border-softer: var(--r-charcoal-300); /** Used for making distinctions between sections */
    --r-border-softest: var(--r-charcoal-200); /** Used for borders that serve as decoration rather than function */
    --r-border-strong: var(--r-neutral-white); /** Used for clear, distinct borders */
    --r-icon-brand: var(--r-dark-vanguard-100); /** Used to add emphasis on one single icon */
    --r-icon-inverse: var(--r-charcoal-400); /** Used for icons that are used on inverse backgrounds */
    --r-icon-regular: var(--r-haze-200); /** Used for icons that are interactive */
    --r-icon-regular-static: var(--r-charcoal-400); /** Used for icons that are interactive but should keep static in darkmode */
    --r-icon-soft: var(--r-charcoal-200); /** Used for icons that are supporting labels (not interactive) */
    --r-icon-strong-static: var(--r-charcoal-600); /** Used on coloured backgrounds to ensure better contrast compared to r-icon-regular, static in darkmode */
    --r-link-emphasis: var(--r-dark-azure-100); /** Used to indicate to users the interactivity of a link, used for hover and activated states */
    --r-link-enabled: var(--r-dark-azure-200); /** Used to indicate to users that a link is enabled */
    --r-link-visited-emphasis: var(--r-dark-amethyst-100); /** Used to indicate to users the interactivity of a visited link, used for hover and activated states */
    --r-link-visited-enabled: var(--r-dark-amethyst-200); /** Used to indicate to users that a link has been visited before */
    --r-logo-brand: var(--r-vanguard-400); /** Used when logo requires attention */
    --r-logo-brand-ember: var(--r-ember-400); /** Not used, will be removed in future */
    --r-logo-brand-inverse: var(--r-charcoal-400); /** Used on dark backgrounds, when logo doesn’t require much attention */
    --r-logo-brand-regular: var(--r-haze-400); /** Used when logo doesn’t require much attention */
    --r-status-error-regular: var(--r-dark-red-100); /** Used for indicating strong error  Examples: Error border for badge, error border for toast, error text */
    --r-status-error-regular-static: var(--r-red-400); /** Used for indicating strong error, static in both light and darkmode Examples: error background for primary button */
    --r-status-error-soft: var(--r-dark-red-500); /** Used for indicating soft error, often combined with regular error color Examples: error background for badge, error background for toast */
    --r-status-info-regular: var(--r-dark-blue-100); /** Used for indicating strong info  Examples: info border for badge, info border for toast */
    --r-status-info-soft: var(--r-dark-blue-500); /** Used for indicating soft info, often combined with regular info color Examples: info background for badge, info background for toast */
    --r-status-success-regular: var(--r-dark-green-100); /** Used for indicating strong success  Examples: success border for badge, success border for toast */
    --r-status-success-soft: var(--r-dark-green-500); /** Used for indicating soft success, often combined with regular success color Examples: success background for badge, success background for toast */
    --r-status-warning-regular: var(--r-dark-orange-100); /** Used for indicating strong warning  Examples: warning border for badge, warning border for toast */
    --r-status-warning-soft: var(--r-dark-orange-500); /** Used for indicating soft warning, often combined with regular warning color Examples: warning background for badge, warning background for toast */
    --r-text-brand: var(--r-dark-vanguard-100); /** Used for decorative, large texts only (from font size 24), to emphasize brand Examples: Marketing email headers */
    --r-text-inverse: var(--r-charcoal-400); /** Used for regular texts but then on strong backgrounds Examples: Text in Primary button */
    --r-text-inverse-static: var(--r-neutral-white); /** Used for decorative, large texts only (from font size 24) to use above backgrounds with brand color Examples: Onboarding screen Riverty App */
    --r-text-regular: var(--r-haze-200); /** Used for all texts that aren’t in need of exceptions  Examples: Headlines, body texts, labels */
    --r-text-soft: var(--r-charcoal-200); /** Used for texts that are additional, not crucial Examples: Hint texts, placeholder texts */
    --r-text-strong: var(--r-neutral-white); /** Used on coloured backgrounds to ensure better contrast compared to r-text-regular Example: Text in Toast with warning status */
    --r-text-strong-static: var(--r-charcoal-600); /** Used on coloured backgrounds that don’t change from light to dark mode, compared to r-text-strong Examples: Text in Primary button */
    --r-background-state-hovered-inverse: var(--r-charcoal-400-alpha-04); /** Internal Design System token to enable 'inverse'-appearing components such as alert and popover. */
    --r-background-state-activated-inverse: var(--r-charcoal-400-alpha-12); /** Internal Design System token to enable 'inverse'-appearing components such as alert and popover. */
  }
}
/**
 * Specify supported color scheme aligned to theming behaivor
 */
[data-theme=auto] {
  color-scheme: light dark;
}

[data-theme=light] {
  color-scheme: light;
}

[data-theme=dark] {
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  [data-theme=auto] {
    color-scheme: dark;
  }
}
@font-face {
  font-family: "GT Ultra Median";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: local("GT Ultra Median"), url("GT-Ultra-Median-Light.woff2") format("woff2");
}
@font-face {
  font-family: "GT Ultra Median";
  font-weight: 300;
  font-style: italic;
  font-display: swap;
  src: local("GT Ultra Median"), url("GT-Ultra-Median-Light-Italic.woff2") format("woff2");
}
@font-face {
  font-family: "GT Ultra Median";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: local("GT Ultra Median"), url("GT-Ultra-Median-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "GT Ultra Median";
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: local("GT Ultra Median"), url("GT-Ultra-Median-Regular-Italic.woff2") format("woff2");
}
:root {
  --r-font-size-900: var(--r-font-size-mobile-900);
  --r-font-size-800: var(--r-font-size-mobile-800);
  --r-font-size-700: var(--r-font-size-mobile-700);
  --r-font-size-600: var(--r-font-size-mobile-600);
  --r-font-size-500: var(--r-font-size-mobile-500);
  --r-font-size-400: var(--r-font-size-mobile-400);
  --r-font-size-300: var(--r-font-size-mobile-300);
  --r-font-size-200: var(--r-font-size-mobile-200);
  --r-font-size-text-500: var(--r-font-size-mobile-500);
  --r-font-size-text-400: var(--r-font-size-mobile-400);
  --r-font-size-text-300: var(--r-font-size-mobile-300);
  --r-font-size-text-200: var(--r-font-size-mobile-200);
  --r-letter-spacing-002: 0.02em;
  --r-letter-spacing-004: 0.04em;
  --r-row-spacing: var(--r-spacing-200);
  --r-form--width: 100%;
  --r-form--max-width: auto;
  --r-form--controls-row--display: grid;
  --r-form--controls-row--justify-content: space-between;
  --r-form--controls-row--gap: var(--r-spacing-100);
  --r-form--controls-row--margin-bottom: var(--r-row-spacing);
  --r-form--controls-row--align-items: start;
  --r-form--control--margin-bottom: var(--r-row-spacing);
  --r-form--actions--display: inline-flex;
  --r-form--actions--align-items: flex-start;
  --r-form--actions--gap: var(--r-spacing-100);
}

@media (min-width: 1024px) {
  :root {
    --r-font-size-900: var(--r-font-size-desktop-900);
    --r-font-size-800: var(--r-font-size-desktop-800);
    --r-font-size-700: var(--r-font-size-desktop-700);
    --r-font-size-600: var(--r-font-size-desktop-600);
    --r-font-size-500: var(--r-font-size-desktop-500);
    --r-font-size-400: var(--r-font-size-desktop-400);
    --r-font-size-300: var(--r-font-size-desktop-300);
    --r-font-size-200: var(--r-font-size-desktop-200);
    --r-font-size-text-500: var(--r-font-size-desktop-500);
  }
  .r-type-headline-xl, .r-typography > h1.xl, .r-typography > .h-xl {
    line-height: var(--r-line-height-s);
  }
}
.r-type-headline-xxl, .r-typography > h1.xxl, .r-typography > .h-xxl {
  font-size: var(--r-font-size-900);
  font-weight: var(--r-font-weight-light);
  line-height: var(--r-line-height-s);
  font-family: var(--r-font-family-heading);
  letter-spacing: -0.02em;
}

.r-type-headline-xl, .r-typography > h1.xl, .r-typography > .h-xl {
  font-size: var(--r-font-size-800);
  font-weight: var(--r-font-weight-light);
  line-height: var(--r-line-height-s);
  font-family: var(--r-font-family-heading);
  letter-spacing: -0.01em;
}

.r-type-headline-l, .r-typography > h1, .r-typography > .h-l {
  font-size: var(--r-font-size-700);
  font-weight: var(--r-font-weight-light);
  line-height: var(--r-line-height-s);
  font-family: var(--r-font-family-heading);
}

.r-type-headline-m, .r-typography > h2, .r-typography > .h-m {
  font-size: var(--r-font-size-600);
  font-weight: var(--r-font-weight-light);
  line-height: var(--r-line-height-s);
  font-family: var(--r-font-family-heading);
}

.r-type-headline-s, .r-typography > h3, .r-typography > .h-s {
  font-size: var(--r-font-size-500);
  font-weight: var(--r-font-weight-light);
  line-height: var(--r-line-height-s);
  font-family: var(--r-font-family-heading);
}

.r-type-headline-xs, .r-typography > h4, .r-typography > .h-xs {
  font-size: var(--r-font-size-400);
  font-weight: var(--r-font-weight-regular);
  line-height: var(--r-line-height-s);
  font-family: var(--r-font-family-heading);
}

.r-type-body-text-l {
  font-size: var(--r-font-size-text-500);
  font-weight: var(--r-font-weight-regular);
  line-height: var(--r-line-height-xs);
  font-family: var(--r-font-family-text);
}

.r-type-body-text-m, .r-typography p, .r-typography li {
  font-size: var(--r-font-size-text-400);
  font-weight: var(--r-font-weight-regular);
  line-height: var(--r-line-height-m);
  font-family: var(--r-font-family-text);
}

.r-type-body-text-m-semibold {
  font-size: var(--r-font-size-text-400);
  font-weight: var(--r-font-weight-semibold);
  line-height: var(--r-line-height-m);
  font-family: var(--r-font-family-text);
}

.r-type-body-text-m-uppercase {
  font-size: var(--r-font-size-text-400);
  font-weight: var(--r-font-weight-regular);
  line-height: var(--r-line-height-xs);
  font-family: var(--r-font-family-text);
  letter-spacing: var(--r-letter-spacing-004);
  text-transform: uppercase;
}

.r-type-body-text-s {
  font-size: var(--r-font-size-text-300);
  font-weight: var(--r-font-weight-regular);
  line-height: var(--r-line-height-m);
  font-family: var(--r-font-family-text);
}

.r-type-body-text-s-semibold {
  font-size: var(--r-font-size-text-300);
  font-weight: var(--r-font-weight-semibold);
  line-height: var(--r-line-height-m);
  font-family: var(--r-font-family-text);
}

.r-type-body-text-s-uppercase {
  font-size: var(--r-font-size-text-300);
  font-weight: var(--r-font-weight-regular);
  line-height: var(--r-line-height-s);
  font-family: var(--r-font-family-text);
  letter-spacing: var(--r-letter-spacing-002);
  text-transform: uppercase;
}

.r-type-body-text-xs {
  font-size: var(--r-font-size-text-200);
  font-weight: var(--r-font-weight-regular);
  line-height: var(--r-line-height-s);
  font-family: var(--r-font-family-text);
}

.r-type-body-text-xs-semibold {
  font-size: var(--r-font-size-text-200);
  font-weight: var(--r-font-weight-semibold);
  line-height: var(--r-line-height-s);
  font-family: var(--r-font-family-text);
}

.r-type-body-text-xs-uppercase {
  font-size: var(--r-font-size-text-200);
  font-weight: var(--r-font-weight-regular);
  line-height: var(--r-line-height-s);
  font-family: var(--r-font-family-text);
  letter-spacing: var(--r-letter-spacing-002);
  text-transform: uppercase;
}

.r-type-link-text-l {
  font-size: var(--r-font-size-text-500);
  font-weight: var(--r-font-weight-regular);
  line-height: var(--r-line-height-xs);
  font-family: var(--r-font-family-text);
  text-decoration: underline;
  text-underline-offset: var(--r-spacing-025);
}

.r-type-link-text-m, .r-typography a[href],
.r-typography a[href] > * {
  font-size: var(--r-font-size-text-400);
  font-weight: var(--r-font-weight-regular);
  line-height: var(--r-line-height-m);
  font-family: var(--r-font-family-text);
  text-decoration: underline;
  text-underline-offset: var(--r-spacing-025);
}

.r-type-link-text-m-semibold {
  font-size: var(--r-font-size-text-400);
  font-weight: var(--r-font-weight-semibold);
  line-height: var(--r-line-height-m);
  font-family: var(--r-font-family-text);
  text-decoration: underline;
  text-underline-offset: var(--r-spacing-025);
}

.r-type-link-text-m-uppercase {
  font-size: var(--r-font-size-text-400);
  font-weight: var(--r-font-weight-regular);
  line-height: var(--r-line-height-xs);
  font-family: var(--r-font-family-text);
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: var(--r-spacing-025);
  letter-spacing: var(--r-letter-spacing-004);
}

.r-type-link-text-s {
  font-size: var(--r-font-size-text-300);
  font-weight: var(--r-font-weight-regular);
  line-height: var(--r-line-height-m);
  font-family: var(--r-font-family-text);
  text-decoration: underline;
  text-underline-offset: var(--r-spacing-025);
}

.r-type-link-text-s-semibold {
  font-size: var(--r-font-size-text-300);
  font-weight: var(--r-font-weight-semibold);
  line-height: var(--r-line-height-m);
  font-family: var(--r-font-family-text);
  text-decoration: underline;
  text-underline-offset: var(--r-spacing-025);
}

.r-type-link-text-s-uppercase {
  font-size: var(--r-font-size-text-300);
  font-weight: var(--r-font-weight-regular);
  line-height: var(--r-line-height-s);
  font-family: var(--r-font-family-text);
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: var(--r-spacing-025);
  letter-spacing: var(--r-letter-spacing-002);
}

.r-type-link-text-xs {
  font-size: var(--r-font-size-text-200);
  font-weight: var(--r-font-weight-regular);
  line-height: var(--r-line-height-s);
  font-family: var(--r-font-family-text);
  text-decoration: underline;
  text-underline-offset: var(--r-spacing-025);
}

.r-type-link-text-xs-semibold {
  font-size: var(--r-font-size-text-200);
  font-weight: var(--r-font-weight-semibold);
  line-height: var(--r-line-height-s);
  font-family: var(--r-font-family-text);
  text-decoration: underline;
  text-underline-offset: var(--r-spacing-025);
}

.r-type-link-text-xs-uppercase {
  font-size: var(--r-font-size-text-200);
  font-weight: var(--r-font-weight-regular);
  line-height: var(--r-line-height-s);
  font-family: var(--r-font-family-text);
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: var(--r-spacing-025);
  letter-spacing: var(--r-letter-spacing-002);
}

.r-type-inline-text-link {
  text-decoration: underline;
  color: var(--r-text-regular);
}
.r-type-inline-text-link:hover {
  color: var(--r-text-strong);
}
.r-type-inline-text-link:focus {
  outline-style: dotted;
  outline-color: var(--r-text-soft);
}
.r-type-inline-text-link:active {
  color: var(--r-text-soft);
}
.r-type-inline-text-link.large {
  font-size: var(--r-font-size-desktop-400);
}
.r-type-inline-text-link.small {
  font-size: var(--r-font-size-mobile-300);
}
.r-type-inline-text-link.disabled {
  cursor: default;
  opacity: 0.4;
}

.r-type-fieldset-label {
  font-size: var(--r-font-size-desktop-500);
  line-height: var(--r-line-height-s);
  margin-bottom: var(--r-spacing-075);
}
.r-type-fieldset-caption {
  font-size: var(--r-font-size-desktop-400);
  line-height: var(--r-line-height-s);
  margin-bottom: var(--r-spacing-100);
}

.r-type-code, .r-typography code {
  font-size: inherit;
  padding: 0.1em 0.2em;
  color: var(--r-text-soft);
  background-color: var(--r-background-softer);
  border: 1px solid var(--r-text-soft);
  border-radius: var(--r-spacing-025);
}

.r-typography ul, .r-typography ol {
  margin-top: var(--r-spacing-075);
  margin-bottom: var(--r-spacing-200);
}
.r-typography li + li {
  margin-top: var(--r-spacing-075);
}

.whitespace-normal {
  white-space: normal;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre {
  white-space: pre;
}
.whitespace-pre-line {
  white-space: pre-line;
}
.whitespace-pre-wrap {
  white-space: pre-wrap;
}
.whitespace-break-spaces {
  white-space: break-spaces;
}

:root {
  --r-table--position: relative;
  --r-table--width: 100%;
  --r-table--border-collapse: collapse;
  --r-table--background-color: var(--r-background-softest);
  --r-table--font-size: var(--r-font-size-300);
  --r-table--tr--border-bottom: 1px solid var(--r-border-softer);
  --r-table--th-td--font-family: var(--r-font-family-text);
  --r-table--th-td--font-weight: normal;
  --r-table--th-td--font-size: var(--r-font-size-300);
  --r-table--th-td--text-align: left;
  --r-table--th-td--border: none;
  --r-table--th--color: var(--r-text-soft);
  --r-table--th--background-color: var(--r-background-softer);
  --r-table--th--padding: 1.1429em;
  --r-table--td--color: var(--r-text-regular);
  --r-table--td--background-color: var(--r-background-softest);
  --r-table--td--padding: 1.1851em 1.1429em;
  --r-table_zebra--tr--background-color: var(--r-background-softer);
}

.r-table-container {
  overflow-x: auto;
}
.r-table, .r-table-container table {
  position: var(--r-table--position);
  width: var(--r-table--width);
  border-collapse: var(--r-table--border-collapse);
  background-color: var(--r-table--background-color);
  font-family: var(--r-table--font-family);
  font-size: var(--r-table--font-size);
}
.r-table tr, .r-table-container table tr {
  border-bottom: var(--r-table--tr--border-bottom);
}
.r-table th, .r-table-container table th, .r-table td, .r-table-container table td {
  font-family: var(--r-table--th-td--font-family);
  font-weight: var(--r-table--th-td--font-weight);
  font-size: var(--r-table--th-td--font-size);
  text-align: var(--r-table--th-td--text-align);
  border: var(--r-table--th-td--border);
}
.r-table th, .r-table-container table th {
  color: var(--r-table--th--color);
  background-color: var(--r-table--th--background-color);
  padding: var(--r-table--th--padding);
}
.r-table td, .r-table-container table td {
  color: var(--r-table--td--color);
  padding: var(--r-table--td--padding);
  background-color: var(--r-table--td--background-color);
}
.r-table.zebra thead + tbody > tr:nth-child(2n) > td, .r-table-container table.zebra thead + tbody > tr:nth-child(2n) > td {
  background-color: var(--r-table_zebra--tr--background-color);
}
.r-table.zebra.even tr:nth-child(2n) > td, .r-table-container table.zebra.even tr:nth-child(2n) > td {
  background-color: var(--r-table_zebra--tr--background-color);
}
.r-table.zebra.even thead + tbody > tr:nth-child(2n) > td, .r-table-container table.zebra.even thead + tbody > tr:nth-child(2n) > td {
  background-color: transparent;
}
.r-table.zebra.even thead + tbody > tr:nth-child(2n+1) > td, .r-table-container table.zebra.even thead + tbody > tr:nth-child(2n+1) > td {
  background-color: var(--r-table_zebra--tr--background-color);
}
.r-table.zebra.odd tr:nth-child(2n+1) > td, .r-table-container table.zebra.odd tr:nth-child(2n+1) > td {
  background-color: var(--r-table_zebra--tr--background-color);
}
.r-table.zebra.odd thead + tbody > tr:nth-child(2n+1) > td, .r-table-container table.zebra.odd thead + tbody > tr:nth-child(2n+1) > td {
  background-color: transparent;
}
.r-table.zebra.odd thead + tbody > tr:nth-child(2n) > td, .r-table-container table.zebra.odd thead + tbody > tr:nth-child(2n) > td {
  background-color: var(--r-table_zebra--tr--background-color);
}
@media (max-width: 720px) {
  .r-table.sticky th:first-child, .r-table-container table.sticky th:first-child, .r-table.sticky td:first-child, .r-table-container table.sticky td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    filter: drop-shadow(4px 25px 15px rgba(0, 0, 0, 0.1));
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  }
}

r-select:not(.hydrated),
r-textarea:not(.hydrated),
r-pagination:not(.hydrated),
r-checkbox:not(.hydrated),
r-radio-button:not(.hydrated),
r-select-option:not(.hydrated),
r-stepper:not(.hydrated),
r-accordion:not(.hydrated),
r-accordion-item:not(.hydrated),
r-badge:not(.hydrated),
r-design-system-devtools:not(.hydrated),
r-tab:not(.hydrated),
r-tab-panel:not(.hydrated),
r-tabs:not(.hydrated),
r-tabs-list:not(.hydrated),
r-icon:not(.hydrated),
r-button:not(.hydrated),
r-label:not(.hydrated),
r-tooltip:not(.hydrated),
r-hint:not(.hydrated),
r-input:not(.hydrated),
r-panel:not(.hydrated) {
  visibility: hidden;
}

.r-form {
  width: var(--r-form--width);
  max-width: var(--r-form--max-width);
}
.r-form--controls-row.c1 {
  --columns: 1;
}
.r-form--controls-row.c2 {
  --columns: 2;
}
.r-form--controls-row.c3 {
  --columns: 3;
}
.r-form--controls-row.c4 {
  --columns: 4;
}
.r-form--controls-row.c5 {
  --columns: 5;
}
.r-form--controls-row.c6 {
  --columns: 6;
}
.r-form--controls-row.c7 {
  --columns: 7;
}
.r-form--controls-row.c8 {
  --columns: 8;
}
.r-form--controls-row.c9 {
  --columns: 9;
}
.r-form--controls-row.c10 {
  --columns: 10;
}
.r-form--controls-row.c11 {
  --columns: 11;
}
.r-form--controls-row.c12 {
  --columns: 12;
}
.r-form--controls-row {
  display: var(--r-form--controls-row--display);
  grid-template-columns: repeat(var(--columns, 2), 1fr);
  gap: var(--r-form--controls-row--gap);
  margin-bottom: var(--r-form--controls-row--margin-bottom);
  align-items: var(--r-form--controls-row--align-items);
}
.r-form--control {
  margin-bottom: var(--r-form--control--margin-bottom);
}
.r-form--actions {
  display: var(--r-form--actions--display);
  align-items: var(--r-form--actions--align-items);
  gap: var(--r-form--actions--gap);
}

body:has(r-panel[variant=drawer]:not([collapsed])) .r-panel-shiftable-content,
r-panel[variant=drawer]:not([collapsed]) ~ .r-panel-shiftable-content {
  transform: translateX(260px);
}

.r-panel-shiftable-content {
  transition: transform 0.3s ease;
}