/* SDS Normalize */
/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
/* Document
 * --------------------- */
/**
 * Normalize box sizing to border box for all browsers.
 */
*,
::before,
::after {
  box-sizing: border-box;
}
/* Grouping Content
 * --------------------- */
/**
 * Add the correct display in IE.
 */
main {
  display: block;
}
/**
 * 1. Remove the margin in all browsers.
 * 2. Remove the padding in all browsers.
 * 3. Normalize font sizes in all browsers.
 * 4. Normalize font weight in all browsers.
 */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 0.875rem; /* 3 */
  font-weight: normal; /* 4 */
  margin: 0; /* 1 */
  padding: 0; /* 2 */
}
/**
 * Remove the margin in all browsers.
 */
p {
  margin: 0;
}
/**
 * 1. Remove the margin in all browsers.
 * 2. Normalize border styles in all browsers.
 */
hr {
  margin: 0; /* 1 */
  border: 0; /* 2 */
  border-top-width: 1px; /* 2 */
  border-style: solid; /* 2 */
  border-color: inherit; /* 2 */
}
/**
 * 1. Remove the margin in all browsers.
 * 2. Remove the padding in all browsers.
 * 3. Remove the list-style in all browsers, sub-system dependant.
 */
ol,
ul {
  list-style: none; /* 3 */
  padding: 0; /* 2 */
  margin: 0; /* 1 */
}
/**
 * Remove the margin in all browsers.
 */
dl,
dt,
dd {
  margin: 0;
}
/* Form Controls
 * --------------------- */
/**
 * Remove the margin in all browsers.
 */
form {
  margin: 0;
}
/**
 * 1. Correct font properties not being inherited.
 * 2. Remove the margin in Firefox and Safari.
 * 3. Fix correct color not being inherited.
 */
button,
input,
optgroup,
select,
textarea {
  font: inherit; /* 1 */
  margin: 0; /* 2 */
  color: inherit; /* 3 */
}
/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 */
button,
select {
  text-transform: none;
}
/**
 * 1. Correct inability to style clickable `input` types in iOS.
 * 2. Normalizes cursor indicator on clickable elements.
 */
button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button; /* 1 */
  -moz-appearance: button;
       appearance: button; /* 1 */
  cursor: pointer; /* 2 */
}
/**
 * Prevent option or optgroup to increase the width of a select.
 */
select {
  max-width: 100%;
}
/**
 * Correct the outline style in Safari.
 */
input:focus,
button:focus,
select:focus,
textarea:focus {
  outline-offset: 0;
}
/**
 * Remove the inner border and padding in Firefox.
 */
::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
/**
 * 1. Correct the text wrapping in Edge 18- and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
 */
legend {
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  white-space: normal; /* 1 */
  padding: 0; /* 3 */
}
/**
 * Add the correct vertical alignment in Chrome and Firefox.
 */
progress {
  vertical-align: baseline;
}
/**
 * Correct the cursor style of increment and decrement buttons in Safari.
 */
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to 'inherit' in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/**
 * Restore the focus styles unset by the previous rule.
 */
:-moz-focusring {
  outline: 1px dotted ButtonText;
}
/**
 * Remove the additional ':invalid' styles in Firefox.
 * See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
 */
:-moz-ui-invalid {
  box-shadow: none;
}
/* Text-level semantics
 * --------------------- */
/**
 * Normalizes cursor indicator on clickable elements.
 */
a {
  cursor: pointer;
}
/**
 * Add the correct text decoration in Chrome, Edge, and Safari.
 */
abbr[title] {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  cursor: help;
}
/**
 * Add the correct font weight in Edge and Safari.
 */
b,
strong {
  font-weight: bolder;
}
/**
 * 1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
 * 2. Correct the odd 'em' font sizing in all browsers.
 * 3. Remove the margin in all browsers.
 */
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; /* 1 */
  font-size: 1em; /* 2 */
  margin: 0; /* 3 */
}
/**
 * Prevent overflow of the container in all browsers
 */
pre {
  overflow: auto;
  -ms-overflow-style: scrollbar;
}
/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}
/**
 * Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/* Embedded content
 * --------------------- */
/**
 * Change the alignment on media elements in all browsers.
 */
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}
/**
 * Make images responsive by default.
 */
img,
[type='image'] {
  max-width: 100%;
  height: auto;
}
/**
 * Remove the border on iframes in all browsers.
 */
iframe {
  border-style: none;
}
/**
 * Change the fill color to match the text color in all browsers.
 */
svg:not([fill]) {
  fill: currentColor;
}
/* Tabular data
 * --------------------- */
/**
 * 1. Remove text indentation from table contents in Chrome and Safari. [Chromium Bug 999088](https://bugs.chromium.org/p/chromium/issues/detail?id=999088), [Webkit Bug 201297](https://bugs.webkit.org/show_bug.cgi?id=201297)
 * 2. Correct table border color inheritance in all Chrome and Safari. [Chromium Bug 935729](https://bugs.chromium.org/p/chromium/issues/detail?id=935729), [Webkit Bug 195016](https://bugs.webkit.org/show_bug.cgi?id=195016)
 * 3. Collapse border spacing in all browsers
 */
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
/* Shadow host
 * --------------------- */
/**
 * 1. Change the line height in all browsers
 * 2. Change the base font size in all browsers, inherit 100% from `html`
 * 3. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS
 * 4. Remove the grey highlight on links in iOS
 * 5. Font Stack:
 *   a. Safari for OS X and iOS (San Francisco)
 *   b. Chrome < 56 for OS X (San Francisco)
 *   c. Windows
 *   d. Android
 *   e. Web Fallback
 *   f. Emoji font stack [Mac, Windows, Linux]
 */
:host {
  line-height: 1.5;
  font-size: 0.875rem;
  -webkit-tap-highlight-color: transparent;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}
/* WES Styling Hooks */
:root,:host {
      /* Default line-height for your application. */
      --sds-g-line-height: 1.5;
      --wes-g-line-height: var(--sds-g-line-height);
      /* Scaled font-size that is 10 stops bigger than the base. */
      --sds-g-font-scale-10: 3.247rem;
      /* Neutral 20 */
      --sds-g-color-palette-neutral-20: #2e2e2e;
      --wes-g-color-palette-neutral-20: var(--sds-g-color-palette-neutral-20);
      /* Orange 30 */
      --sds-g-color-palette-orange-30: #5f3e02;
      --wes-g-color-palette-orange-30: var(--sds-g-color-palette-orange-30);
      /* Green 60 */
      --sds-g-color-palette-green-60: #3ba755;
      --wes-g-color-palette-green-60: var(--sds-g-color-palette-green-60);
      /* Hot Orange 30 */
      --sds-g-color-palette-hot-orange-30: #7e2600;
      --wes-g-color-palette-hot-orange-30: var(--sds-g-color-palette-hot-orange-30);
      /* Border size 2. */
      --sds-g-sizing-border-2: 2px;
      --wes-g-sizing-border-2: var(--sds-g-sizing-border-2);
      /* Neutral 10 */
      --sds-g-color-palette-neutral-10: #181818;
      --wes-g-color-palette-neutral-10: var(--sds-g-color-palette-neutral-10);
      /* Yellow 15 */
      --sds-g-color-palette-yellow-15: #2e2204;
      --wes-g-color-palette-yellow-15: var(--sds-g-color-palette-yellow-15);
      /* Orange 20 */
      --sds-g-color-palette-orange-20: #3e2b02;
      --wes-g-color-palette-orange-20: var(--sds-g-color-palette-orange-20);
      /* Neutral 65 */
      --sds-g-color-palette-neutral-65: #a0a0a0;
      --wes-g-color-palette-neutral-65: var(--sds-g-color-palette-neutral-65);
      /* Green 50 */
      --sds-g-color-palette-green-50: #2e844a;
      --wes-g-color-palette-green-50: var(--sds-g-color-palette-green-50);
      /* Hot Orange 20 */
      --sds-g-color-palette-hot-orange-20: #541d01;
      --wes-g-color-palette-hot-orange-20: var(--sds-g-color-palette-hot-orange-20);
      /* Orange 10 */
      --sds-g-color-palette-orange-10: #201600;
      --wes-g-color-palette-orange-10: var(--sds-g-color-palette-orange-10);
      /* Green 40 */
      --sds-g-color-palette-green-40: #22683e;
      --wes-g-color-palette-green-40: var(--sds-g-color-palette-green-40);
      /* Hot Orange 10 */
      --sds-g-color-palette-hot-orange-10: #281202;
      --wes-g-color-palette-hot-orange-10: var(--sds-g-color-palette-hot-orange-10);
      /* Orange 65 */
      --sds-g-color-palette-orange-65: #f38303;
      --wes-g-color-palette-orange-65: var(--sds-g-color-palette-orange-65);
      /* Green 95 */
      --sds-g-color-palette-green-95: #ebf7e6;
      --wes-g-color-palette-green-95: var(--sds-g-color-palette-green-95);
      /* Hot Orange 65 */
      --sds-g-color-palette-hot-orange-65: #ff784f;
      --wes-g-color-palette-hot-orange-65: var(--sds-g-color-palette-hot-orange-65);
      /* System font stack for your application. */
      --sds-g-font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
      --wes-g-font-family: var(--sds-g-font-family);
      /* Green 30 */
      --sds-g-color-palette-green-30: #194e31;
      --wes-g-color-palette-green-30: var(--sds-g-color-palette-green-30);
      /* Cloud Blue 15 */
      --sds-g-color-palette-cloud-blue-15: #0a2636;
      --wes-g-color-palette-cloud-blue-15: var(--sds-g-color-palette-cloud-blue-15);
      /* Indigo 15 */
      --sds-g-color-palette-indigo-15: #1f0974;
      --wes-g-color-palette-indigo-15: var(--sds-g-color-palette-indigo-15);
      /* Default color on active for hyperlinks. */
      --sds-g-link-color-active: #032d60;
      --wes-g-link-color-active: var(--sds-g-link-color-active);
      /* Neutral Inverse 1 - if used as a background, please use Neutral Inverse Contrast 1-4 to meet accessibility guidelines. */
      --sds-g-color-neutral-inverse-1: #181818;
      --wes-g-color-neutral-inverse-1: var(--sds-g-color-neutral-inverse-1);
      /* Green 20 */
      --sds-g-color-palette-green-20: #0e3522;
      --wes-g-color-palette-green-20: var(--sds-g-color-palette-green-20);
      /* Error Base 1 - if used as a background, please use Error Base Contrast 1-4 to meet accessibility guidelines. */
      --sds-g-color-error-base-1: #ffffff;
      --wes-g-color-error-base-1: var(--sds-g-color-error-base-1);
      /* Shadow depth 1 */
      --sds-g-shadow-1: 0 0 2px 0 rgba(24,24,24,0.03137), 0 2px 4px 1px rgba(24,24,24,0.08627);
      --wes-g-shadow-1: var(--sds-g-shadow-1);
      /* Brand Inverse 1 - if used as a background, please use Brand Inverse Contrast 1-4 to meet accessibility guidelines. */
      --sds-g-color-brand-inverse-1: #001639;
      --wes-g-color-brand-inverse-1: var(--sds-g-color-brand-inverse-1);
      /* Neutral Inverse 2 - if used as a background, please use Neutral Inverse Contrast 2-4 to meet accessibility guidelines. */
      --sds-g-color-neutral-inverse-2: #2e2e30;
      --wes-g-color-neutral-inverse-2: var(--sds-g-color-neutral-inverse-2);
      /* Green 10 */
      --sds-g-color-palette-green-10: #071b12;
      --wes-g-color-palette-green-10: var(--sds-g-color-palette-green-10);
      /* Error Base 2 - if used as a background, please use Error Base Contrast 2-4 to meet accessibility guidelines. */
      --sds-g-color-error-base-2: #fef1ee;
      --wes-g-color-error-base-2: var(--sds-g-color-error-base-2);
      /* Green 65 */
      --sds-g-color-palette-green-65: #41b658;
      --wes-g-color-palette-green-65: var(--sds-g-color-palette-green-65);
      /* Neutral Base 1 - if used as a background, please use Neutral Base Contrast 1-4 to meet accessibility guidelines. */
      --sds-g-color-neutral-base-1: #ffffff;
      --wes-g-color-neutral-base-1: var(--sds-g-color-neutral-base-1);
      /* Shadow depth 2 */
      --sds-g-shadow-2: 0 2px 8px -2px rgba(24,24,24,0.03137), 0 8px 12px -2px rgba(24,24,24,0.08627);
      --wes-g-shadow-2: var(--sds-g-shadow-2);
      /* Brand Base 1 - if used as a background, please use Brand Base Contrast 1-4 to meet accessibility guidelines. */
      --sds-g-color-brand-base-1: #ffffff;
      --wes-g-color-brand-base-1: var(--sds-g-color-brand-base-1);
      /* Brand Inverse 2 - if used as a background, please use Brand Inverse Contrast 2-4 to meet accessibility guidelines. */
      --sds-g-color-brand-inverse-2: #032d60;
      --wes-g-color-brand-inverse-2: var(--sds-g-color-brand-inverse-2);
      /* Neutral Inverse 3 - if used as a background, please use Neutral Inverse Contrast 3-4 to meet accessibility guidelines. */
      --sds-g-color-neutral-inverse-3: #444447;
      --wes-g-color-neutral-inverse-3: var(--sds-g-color-neutral-inverse-3);
      /* Neutral 15 */
      --sds-g-color-palette-neutral-15: #242424;
      --wes-g-color-palette-neutral-15: var(--sds-g-color-palette-neutral-15);
      /* Error Base 3 - if used as a background, please use Error Base Contrast 3-4 to meet accessibility guidelines. */
      --sds-g-color-error-base-3: #feded8;
      --wes-g-color-error-base-3: var(--sds-g-color-error-base-3);
      /* Neutral Base 2 - if used as a background, please use Neutral Base Contrast 2-4 to meet accessibility guidelines. */
      --sds-g-color-neutral-base-2: #f3f3f3;
      --wes-g-color-neutral-base-2: var(--sds-g-color-neutral-base-2);
      /* Shadow depth 3 */
      --sds-g-shadow-3: 0 12px 24px -4px rgba(24,24,24,0.03137), 0 16px 32px -4px rgba(24,24,24,0.08627);
      --wes-g-shadow-3: var(--sds-g-shadow-3);
      /* Brand Base 2 - if used as a background, please use Brand Base Contrast 2-4 to meet accessibility guidelines. */
      --sds-g-color-brand-base-2: #eef4ff;
      --wes-g-color-brand-base-2: var(--sds-g-color-brand-base-2);
      /* Brand Inverse 3 - if used as a background, please use Brand Inverse Contrast 3-4 to meet accessibility guidelines. */
      --sds-g-color-brand-inverse-3: #014486;
      --wes-g-color-brand-inverse-3: var(--sds-g-color-brand-inverse-3);
      /* Warning Base Contrast 1 - if used as a background, please use Warning Base Base 1-4 to meet accessibility guidelines. */
      --sds-g-color-warning-base-contrast-1: #a86403;
      --wes-g-color-warning-base-contrast-1: var(--sds-g-color-warning-base-contrast-1);
      /* Neutral Inverse 4 - if used as a background, please use Neutral Inverse Contrast 4 to meet accessibility guidelines. */
      --sds-g-color-neutral-inverse-4: #5a5c61;
      --wes-g-color-neutral-inverse-4: var(--sds-g-color-neutral-inverse-4);
      /* Spacing size 1. */
      --sds-g-spacing-1: 0.25rem;
      --wes-g-spacing-1: var(--sds-g-spacing-1);
      /* Orange 15 */
      --sds-g-color-palette-orange-15: #371e03;
      --wes-g-color-palette-orange-15: var(--sds-g-color-palette-orange-15);
      /* Error Base 4 - if used as a background, please use Error Base Contrast 4 to meet accessibility guidelines. */
      --sds-g-color-error-base-4: #feb8ab;
      --wes-g-color-error-base-4: var(--sds-g-color-error-base-4);
      /* Hot Orange 15 */
      --sds-g-color-palette-hot-orange-15: #421604;
      --wes-g-color-palette-hot-orange-15: var(--sds-g-color-palette-hot-orange-15);
      /* Neutral Base 3 - if used as a background, please use Neutral Base Contrast 3-4 to meet accessibility guidelines. */
      --sds-g-color-neutral-base-3: #e5e5e5;
      --wes-g-color-neutral-base-3: var(--sds-g-color-neutral-base-3);
      /* Shadow depth 4 */
      --sds-g-shadow-4: 0 24px 48px -2px rgba(24,24,24,0.12549);
      --wes-g-shadow-4: var(--sds-g-shadow-4);
      /* Brand Base 3 - if used as a background, please use Brand Base Contrast 3-4 to meet accessibility guidelines. */
      --sds-g-color-brand-base-3: #d8e6fe;
      --wes-g-color-brand-base-3: var(--sds-g-color-brand-base-3);
      /* Brand Inverse 4 - if used as a background, please use Brand Inverse Contrast 4 to meet accessibility guidelines. */
      --sds-g-color-brand-inverse-4: #0b5cab;
      --wes-g-color-brand-inverse-4: var(--sds-g-color-brand-inverse-4);
      /* Warning Base Contrast 2 - if used as a background, please use Warning Base Base 2-4 to meet accessibility guidelines. */
      --sds-g-color-warning-base-contrast-2: #8c4b02;
      --wes-g-color-warning-base-contrast-2: var(--sds-g-color-warning-base-contrast-2);
      /* Spacing size 2. */
      --sds-g-spacing-2: 0.5rem;
      --wes-g-spacing-2: var(--sds-g-spacing-2);
      /* Neutral Base 4 - if used as a background, please use Neutral Base Contrast 4 to meet accessibility guidelines. */
      --sds-g-color-neutral-base-4: #c9c9cb;
      --wes-g-color-neutral-base-4: var(--sds-g-color-neutral-base-4);
      /* Brand Base 4 - if used as a background, please use Brand Base Contrast 4 to meet accessibility guidelines. */
      --sds-g-color-brand-base-4: #aacbff;
      --wes-g-color-brand-base-4: var(--sds-g-color-brand-base-4);
      /* Default line-height for your application. */
      --sds-g-font-leading: 1.5;
      --wes-g-font-leading: var(--sds-g-font-leading);
      /* Warning Base Contrast 3 - if used as a background, please use Warning Base Base 3-4 to meet accessibility guidelines. */
      --sds-g-color-warning-base-contrast-3: #6f3400;
      --wes-g-color-warning-base-contrast-3: var(--sds-g-color-warning-base-contrast-3);
      /* Success Base 1 - if used as a background, please use Success Base Contrast 1-4 to meet accessibility guidelines. */
      --sds-g-color-success-base-1: #ffffff;
      --wes-g-color-success-base-1: var(--sds-g-color-success-base-1);
      /* Spacing size 3. */
      --sds-g-spacing-3: 0.75rem;
      --wes-g-spacing-3: var(--sds-g-spacing-3);
      /* Violet 90 */
      --sds-g-color-palette-violet-90: #f2defe;
      --wes-g-color-palette-violet-90: var(--sds-g-color-palette-violet-90);
      /* Spacing size 10. */
      --sds-g-spacing-10: 4rem;
      --wes-g-spacing-10: var(--sds-g-spacing-10);
      /* Warning Base Contrast 4 - if used as a background, please use Warning Base Base 4 to meet accessibility guidelines. */
      --sds-g-color-warning-base-contrast-4: #4f2100;
      --wes-g-color-warning-base-contrast-4: var(--sds-g-color-warning-base-contrast-4);
      /* Success Base 2 - if used as a background, please use Success Base Contrast 2-4 to meet accessibility guidelines. */
      --sds-g-color-success-base-2: #ebf7e6;
      --wes-g-color-success-base-2: var(--sds-g-color-success-base-2);
      /* Spacing size 4. */
      --sds-g-spacing-4: 1rem;
      --wes-g-spacing-4: var(--sds-g-spacing-4);
      /* Green 15 */
      --sds-g-color-palette-green-15: #0c2912;
      --wes-g-color-palette-green-15: var(--sds-g-color-palette-green-15);
      /* Violet 80 */
      --sds-g-color-palette-violet-80: #e5b9fe;
      --wes-g-color-palette-violet-80: var(--sds-g-color-palette-violet-80);
      /* Spacing size 11. */
      --sds-g-spacing-11: 4.5rem;
      --wes-g-spacing-11: var(--sds-g-spacing-11);
      /* Success Base 3 - if used as a background, please use Success Base Contrast 3-4 to meet accessibility guidelines. */
      --sds-g-color-success-base-3: #cdefc4;
      --wes-g-color-success-base-3: var(--sds-g-color-success-base-3);
      /* Spacing size 5. */
      --sds-g-spacing-5: 1.5rem;
      --wes-g-spacing-5: var(--sds-g-spacing-5);
      /* Small border radius for UI elements. */
      --sds-g-radius-border-1: 0.125rem;
      --wes-g-radius-border-1: var(--sds-g-radius-border-1);
      /* Violet 70 */
      --sds-g-color-palette-violet-70: #d892fe;
      --wes-g-color-palette-violet-70: var(--sds-g-color-palette-violet-70);
      /* Spacing size 12. */
      --sds-g-spacing-12: 5rem;
      --wes-g-spacing-12: var(--sds-g-spacing-12);
      /* Default border color for UI elements. */
      --sds-g-color-border-base-1: #aeaeae;
      --wes-g-color-border-base-1: var(--sds-g-color-border-base-1);
      /* Teal 90 */
      --sds-g-color-palette-teal-90: #acf3e4;
      --wes-g-color-palette-teal-90: var(--sds-g-color-palette-teal-90);
      /* Success Base 4 - if used as a background, please use Success Base Contrast 4 to meet accessibility guidelines. */
      --sds-g-color-success-base-4: #91db8b;
      --wes-g-color-success-base-4: var(--sds-g-color-success-base-4);
      /* Spacing size 6. */
      --sds-g-spacing-6: 2rem;
      --wes-g-spacing-6: var(--sds-g-spacing-6);
      /* Medium border radius for UI elements. */
      --sds-g-radius-border-2: 0.25rem;
      --wes-g-radius-border-2: var(--sds-g-radius-border-2);
      /* Purple 90 */
      --sds-g-color-palette-purple-90: #ece1f9;
      --wes-g-color-palette-purple-90: var(--sds-g-color-palette-purple-90);
      /* Violet 60 */
      --sds-g-color-palette-violet-60: #cb65ff;
      --wes-g-color-palette-violet-60: var(--sds-g-color-palette-violet-60);
      /* Alternate border color for UI elements. */
      --sds-g-color-border-base-2: #939393;
      --wes-g-color-border-base-2: var(--sds-g-color-border-base-2);
      /* Teal 80 */
      --sds-g-color-palette-teal-80: #04e1cb;
      --wes-g-color-palette-teal-80: var(--sds-g-color-palette-teal-80);
      /* Spacing size 7. */
      --sds-g-spacing-7: 2.5rem;
      --wes-g-spacing-7: var(--sds-g-spacing-7);
      /* Large border radius for UI elements. */
      --sds-g-radius-border-3: 0.5rem;
      --wes-g-radius-border-3: var(--sds-g-radius-border-3);
      /* Purple 80 */
      --sds-g-color-palette-purple-80: #d78ff5;
      --wes-g-color-palette-purple-80: var(--sds-g-color-palette-purple-80);
      /* Violet 50 */
      --sds-g-color-palette-violet-50: #ba01ff;
      --wes-g-color-palette-violet-50: var(--sds-g-color-palette-violet-50);
      /* Teal 70 */
      --sds-g-color-palette-teal-70: #01c3b3;
      --wes-g-color-palette-teal-70: var(--sds-g-color-palette-teal-70);
      /* Spacing size 8. */
      --sds-g-spacing-8: 3rem;
      --wes-g-spacing-8: var(--sds-g-spacing-8);
      /* Extra Large border radius for UI elements. */
      --sds-g-radius-border-4: 1rem;
      --wes-g-radius-border-4: var(--sds-g-radius-border-4);
      /* Blue 90 */
      --sds-g-color-palette-blue-90: #d8e6fe;
      --wes-g-color-palette-blue-90: var(--sds-g-color-palette-blue-90);
      /* Purple 70 */
      --sds-g-color-palette-purple-70: #c29ef1;
      --wes-g-color-palette-purple-70: var(--sds-g-color-palette-purple-70);
      /* Violet 40 */
      --sds-g-color-palette-violet-40: #9602c7;
      --wes-g-color-palette-violet-40: var(--sds-g-color-palette-violet-40);
      /* Violet 95 */
      --sds-g-color-palette-violet-95: #f9f0ff;
      --wes-g-color-palette-violet-95: var(--sds-g-color-palette-violet-95);
      /* Success Base Contrast 1 - if used as a background, please use Success Base Base 1-4 to meet accessibility guidelines. */
      --sds-g-color-success-base-contrast-1: #2e844a;
      --wes-g-color-success-base-contrast-1: var(--sds-g-color-success-base-contrast-1);
      /* Teal 60 */
      --sds-g-color-palette-teal-60: #06a59a;
      --wes-g-color-palette-teal-60: var(--sds-g-color-palette-teal-60);
      /* Red 90 */
      --sds-g-color-palette-red-90: #feded8;
      --wes-g-color-palette-red-90: var(--sds-g-color-palette-red-90);
      /* Spacing size 9. */
      --sds-g-spacing-9: 3.5rem;
      --wes-g-spacing-9: var(--sds-g-spacing-9);
      /* Blue 80 */
      --sds-g-color-palette-blue-80: #aacbff;
      --wes-g-color-palette-blue-80: var(--sds-g-color-palette-blue-80);
      /* Purple 60 */
      --sds-g-color-palette-purple-60: #ad7bee;
      --wes-g-color-palette-purple-60: var(--sds-g-color-palette-purple-60);
      /* Violet 30 */
      --sds-g-color-palette-violet-30: #730394;
      --wes-g-color-palette-violet-30: var(--sds-g-color-palette-violet-30);
      /* Success Base Contrast 2 - if used as a background, please use Success Base Base 2-4 to meet accessibility guidelines. */
      --sds-g-color-success-base-contrast-2: #22683e;
      --wes-g-color-success-base-contrast-2: var(--sds-g-color-success-base-contrast-2);
      /* Scaled font-size that is 1 stop bigger than the base. */
      --sds-g-font-scale-1: 1.125rem;
      /* Red 80 */
      --sds-g-color-palette-red-80: #feb8ab;
      --wes-g-color-palette-red-80: var(--sds-g-color-palette-red-80);
      /* Blue 70 */
      --sds-g-color-palette-blue-70: #78b0fd;
      --wes-g-color-palette-blue-70: var(--sds-g-color-palette-blue-70);
      /* Purple 50 */
      --sds-g-color-palette-purple-50: #9050e9;
      --wes-g-color-palette-purple-50: var(--sds-g-color-palette-purple-50);
      /* Violet 20 */
      --sds-g-color-palette-violet-20: #520066;
      --wes-g-color-palette-violet-20: var(--sds-g-color-palette-violet-20);
      /* Success Base Contrast 3 - if used as a background, please use Success Base Base 3-4 to meet accessibility guidelines. */
      --sds-g-color-success-base-contrast-3: #194e31;
      --wes-g-color-success-base-contrast-3: var(--sds-g-color-success-base-contrast-3);
      /* Warning Base 1 - if used as a background, please use Warning Base Contrast 1-4 to meet accessibility guidelines. */
      --sds-g-color-warning-base-1: #ffffff;
      --wes-g-color-warning-base-1: var(--sds-g-color-warning-base-1);
      /* Default color for hyperlinks. */
      --sds-g-link-color: #0b5cab;
      --wes-g-link-color: var(--sds-g-link-color);
      /* Teal 50 */
      --sds-g-color-palette-teal-50: #0b827c;
      --wes-g-color-palette-teal-50: var(--sds-g-color-palette-teal-50);
      /* Teal 95 */
      --sds-g-color-palette-teal-95: #def9f3;
      --wes-g-color-palette-teal-95: var(--sds-g-color-palette-teal-95);
      /* Red 70 */
      --sds-g-color-palette-red-70: #fe8f7d;
      --wes-g-color-palette-red-70: var(--sds-g-color-palette-red-70);
      /* Scaled font-size that is 2 stops bigger than the base. */
      --sds-g-font-scale-2: 1.266rem;
      /* Blue 60 */
      --sds-g-color-palette-blue-60: #1b96ff;
      --wes-g-color-palette-blue-60: var(--sds-g-color-palette-blue-60);
      /* Purple 40 */
      --sds-g-color-palette-purple-40: #7526e3;
      --wes-g-color-palette-purple-40: var(--sds-g-color-palette-purple-40);
      /* Violet 10 */
      --sds-g-color-palette-violet-10: #2e0039;
      --wes-g-color-palette-violet-10: var(--sds-g-color-palette-violet-10);
      /* Purple 95 */
      --sds-g-color-palette-purple-95: #f6f2fb;
      --wes-g-color-palette-purple-95: var(--sds-g-color-palette-purple-95);
      /* Violet 65 */
      --sds-g-color-palette-violet-65: #d17dfe;
      --wes-g-color-palette-violet-65: var(--sds-g-color-palette-violet-65);
      /* Success Base Contrast 4 - if used as a background, please use Success Base Base 4 to meet accessibility guidelines. */
      --sds-g-color-success-base-contrast-4: #0e3522;
      --wes-g-color-success-base-contrast-4: var(--sds-g-color-success-base-contrast-4);
      /* Warning Base 2 - if used as a background, please use Warning Base Contrast 2-4 to meet accessibility guidelines. */
      --sds-g-color-warning-base-2: #fbf3e0;
      --wes-g-color-warning-base-2: var(--sds-g-color-warning-base-2);
      /* Teal 40 */
      --sds-g-color-palette-teal-40: #056764;
      --wes-g-color-palette-teal-40: var(--sds-g-color-palette-teal-40);
      /* Neutral Base Contrast 1 - if used as a background, please use Neutral Base 1-4 to meet accessibility guidelines. */
      --sds-g-color-neutral-base-contrast-1: #929398;
      --wes-g-color-neutral-base-contrast-1: var(--sds-g-color-neutral-base-contrast-1);
      /* Red 60 */
      --sds-g-color-palette-red-60: #fe5c4c;
      --wes-g-color-palette-red-60: var(--sds-g-color-palette-red-60);
      /* Scaled font-size that is 3 stops bigger than the base. */
      --sds-g-font-scale-3: 1.424rem;
      /* Blue 50 */
      --sds-g-color-palette-blue-50: #0176d3;
      --wes-g-color-palette-blue-50: var(--sds-g-color-palette-blue-50);
      /* Purple 30 */
      --sds-g-color-palette-purple-30: #5a1ba9;
      --wes-g-color-palette-purple-30: var(--sds-g-color-palette-purple-30);
      /* Pink 90 */
      --sds-g-color-palette-pink-90: #fddde3;
      --wes-g-color-palette-pink-90: var(--sds-g-color-palette-pink-90);
      /* Warning Base 3 - if used as a background, please use Warning Base Contrast 3-4 to meet accessibility guidelines. */
      --sds-g-color-warning-base-3: #f9e3b6;
      --wes-g-color-warning-base-3: var(--sds-g-color-warning-base-3);
      /* Brand Base Contrast 1 - if used as a background, please use Brand Base 1-4 to meet accessibility guidelines. */
      --sds-g-color-brand-base-contrast-1: #1b96ff;
      --wes-g-color-brand-base-contrast-1: var(--sds-g-color-brand-base-contrast-1);
      /* Teal 30 */
      --sds-g-color-palette-teal-30: #024d4c;
      --wes-g-color-palette-teal-30: var(--sds-g-color-palette-teal-30);
      /* Neutral Base Contrast 2 - if used as a background, please use Neutral Base 2-4 to meet accessibility guidelines. */
      --sds-g-color-neutral-base-contrast-2: #737479;
      --wes-g-color-neutral-base-contrast-2: var(--sds-g-color-neutral-base-contrast-2);
      /* Scaled font-size that is 1 stop smaller than the base. */
      --sds-g-font-scale-neg-1: 0.875rem;
      /* Red 50 */
      --sds-g-color-palette-red-50: #ea001e;
      --wes-g-color-palette-red-50: var(--sds-g-color-palette-red-50);
      /* Scaled font-size that is 4 stops bigger than the base. */
      --sds-g-font-scale-4: 1.602rem;
      /* Blue 40 */
      --sds-g-color-palette-blue-40: #0b5cab;
      --wes-g-color-palette-blue-40: var(--sds-g-color-palette-blue-40);
      /* Purple 20 */
      --sds-g-color-palette-purple-20: #401075;
      --wes-g-color-palette-purple-20: var(--sds-g-color-palette-purple-20);
      /* Neutral Inverse Contrast 1 - if used as a background, please use Neutral Inverse Base 1-4 to meet accessibility guidelines. */
      --sds-g-color-neutral-inverse-contrast-1: #737479;
      --wes-g-color-neutral-inverse-contrast-1: var(--sds-g-color-neutral-inverse-contrast-1);
      /* Blue 95 */
      --sds-g-color-palette-blue-95: #eef4ff;
      --wes-g-color-palette-blue-95: var(--sds-g-color-palette-blue-95);
      /* Brand Inverse Contrast 1 - if used as a background, please use Brand Inverse Base 1-4 to meet accessibility guidelines. */
      --sds-g-color-brand-inverse-contrast-1: #0176d3;
      --wes-g-color-brand-inverse-contrast-1: var(--sds-g-color-brand-inverse-contrast-1);
      /* Pink 80 */
      --sds-g-color-palette-pink-80: #fdb6c5;
      --wes-g-color-palette-pink-80: var(--sds-g-color-palette-pink-80);
      /* Warning Base 4 - if used as a background, please use Warning Base Contrast 4 to meet accessibility guidelines. */
      --sds-g-color-warning-base-4: #fcc003;
      --wes-g-color-warning-base-4: var(--sds-g-color-warning-base-4);
      /* Brand Base Contrast 2 - if used as a background, please use Brand Base 2-4 to meet accessibility guidelines. */
      --sds-g-color-brand-base-contrast-2: #0176d3;
      --wes-g-color-brand-base-contrast-2: var(--sds-g-color-brand-base-contrast-2);
      /* Teal 20 */
      --sds-g-color-palette-teal-20: #023434;
      --wes-g-color-palette-teal-20: var(--sds-g-color-palette-teal-20);
      /* Error Base Contrast 1 - if used as a background, please use Error Base Base 1-4 to meet accessibility guidelines. */
      --sds-g-color-error-base-contrast-1: #ea001e;
      --wes-g-color-error-base-contrast-1: var(--sds-g-color-error-base-contrast-1);
      /* Teal 65 */
      --sds-g-color-palette-teal-65: #03b4a7;
      --wes-g-color-palette-teal-65: var(--sds-g-color-palette-teal-65);
      /* Neutral Base Contrast 3 - if used as a background, please use Neutral Base 3-4 to meet accessibility guidelines. */
      --sds-g-color-neutral-base-contrast-3: #5a5c61;
      --wes-g-color-neutral-base-contrast-3: var(--sds-g-color-neutral-base-contrast-3);
      /* Scaled font-size that is 2 stops smaller than the base. */
      --sds-g-font-scale-neg-2: 0.8125rem;
      /* Red 40 */
      --sds-g-color-palette-red-40: #ba0517;
      --wes-g-color-palette-red-40: var(--sds-g-color-palette-red-40);
      /* Scaled font-size that is 5 stops bigger than the base. */
      --sds-g-font-scale-5: 1.802rem;
      /* Blue 30 */
      --sds-g-color-palette-blue-30: #014486;
      --wes-g-color-palette-blue-30: var(--sds-g-color-palette-blue-30);
      /* Purple 10 */
      --sds-g-color-palette-purple-10: #240643;
      --wes-g-color-palette-purple-10: var(--sds-g-color-palette-purple-10);
      /* Red 95 */
      --sds-g-color-palette-red-95: #fef1ee;
      --wes-g-color-palette-red-95: var(--sds-g-color-palette-red-95);
      /* Neutral Inverse Contrast 2 - if used as a background, please use Neutral Inverse Base 2-4 to meet accessibility guidelines. */
      --sds-g-color-neutral-inverse-contrast-2: #929398;
      --wes-g-color-neutral-inverse-contrast-2: var(--sds-g-color-neutral-inverse-contrast-2);
      /* Purple 65 */
      --sds-g-color-palette-purple-65: #b78def;
      --wes-g-color-palette-purple-65: var(--sds-g-color-palette-purple-65);
      /* Brand Inverse Contrast 2 - if used as a background, please use Brand Inverse Base 2-4 to meet accessibility guidelines. */
      --sds-g-color-brand-inverse-contrast-2: #1b96ff;
      --wes-g-color-brand-inverse-contrast-2: var(--sds-g-color-brand-inverse-contrast-2);
      /* Yellow 90 */
      --sds-g-color-palette-yellow-90: #f9e3b6;
      --wes-g-color-palette-yellow-90: var(--sds-g-color-palette-yellow-90);
      /* Pink 70 */
      --sds-g-color-palette-pink-70: #fe8aa7;
      --wes-g-color-palette-pink-70: var(--sds-g-color-palette-pink-70);
      /* Teal 10 */
      --sds-g-color-palette-teal-10: #071b12;
      --wes-g-color-palette-teal-10: var(--sds-g-color-palette-teal-10);
      /* Brand Base Contrast 3 - if used as a background, please use Brand Base 3-4 to meet accessibility guidelines. */
      --sds-g-color-brand-base-contrast-3: #0b5cab;
      --wes-g-color-brand-base-contrast-3: var(--sds-g-color-brand-base-contrast-3);
      /* Error Base Contrast 2 - if used as a background, please use Error Base Base 2-4 to meet accessibility guidelines. */
      --sds-g-color-error-base-contrast-2: #ba0517;
      --wes-g-color-error-base-contrast-2: var(--sds-g-color-error-base-contrast-2);
      /* Neutral Base Contrast 4 - if used as a background, please use Neutral Base 4 to meet accessibility guidelines. */
      --sds-g-color-neutral-base-contrast-4: #181818;
      --wes-g-color-neutral-base-contrast-4: var(--sds-g-color-neutral-base-contrast-4);
      /* Red 30 */
      --sds-g-color-palette-red-30: #8e030f;
      --wes-g-color-palette-red-30: var(--sds-g-color-palette-red-30);
      /* Scaled font-size that is 3 stops smaller than the base. */
      --sds-g-font-scale-neg-3: 0.75rem;
      /* Blue 20 */
      --sds-g-color-palette-blue-20: #032d60;
      --wes-g-color-palette-blue-20: var(--sds-g-color-palette-blue-20);
      /* Scaled font-size that is 6 stops bigger than the base. */
      --sds-g-font-scale-6: 2.027rem;
      /* Neutral Inverse Contrast 3 - if used as a background, please use Neutral Inverse Base 3-4 to meet accessibility guidelines. */
      --sds-g-color-neutral-inverse-contrast-3: #adaeb1;
      --wes-g-color-neutral-inverse-contrast-3: var(--sds-g-color-neutral-inverse-contrast-3);
      /* Brand Inverse Contrast 3 - if used as a background, please use Brand Inverse Base 3-4 to meet accessibility guidelines. */
      --sds-g-color-brand-inverse-contrast-3: #78b0fd;
      --wes-g-color-brand-inverse-contrast-3: var(--sds-g-color-brand-inverse-contrast-3);
      /* Yellow 80 */
      --sds-g-color-palette-yellow-80: #fcc003;
      --wes-g-color-palette-yellow-80: var(--sds-g-color-palette-yellow-80);
      /* Pink 60 */
      --sds-g-color-palette-pink-60: #ff538a;
      --wes-g-color-palette-pink-60: var(--sds-g-color-palette-pink-60);
      /* Brand Base Contrast 4 - if used as a background, please use Brand Base 4 to meet accessibility guidelines. */
      --sds-g-color-brand-base-contrast-4: #001639;
      --wes-g-color-brand-base-contrast-4: var(--sds-g-color-brand-base-contrast-4);
      /* Error Base Contrast 3 - if used as a background, please use Error Base Base 3-4 to meet accessibility guidelines. */
      --sds-g-color-error-base-contrast-3: #8e030f;
      --wes-g-color-error-base-contrast-3: var(--sds-g-color-error-base-contrast-3);
      /* Red 20 */
      --sds-g-color-palette-red-20: #640103;
      --wes-g-color-palette-red-20: var(--sds-g-color-palette-red-20);
      /* Scaled font-size that is 4 stops smaller than the base. */
      --sds-g-font-scale-neg-4: 0.625rem;
      /* Blue 10 */
      --sds-g-color-palette-blue-10: #001639;
      --wes-g-color-palette-blue-10: var(--sds-g-color-palette-blue-10);
      /* Scaled font-size that is 7 stops bigger than the base. */
      --sds-g-font-scale-7: 2.281rem;
      /* Blue 65 */
      --sds-g-color-palette-blue-65: #57a3fd;
      --wes-g-color-palette-blue-65: var(--sds-g-color-palette-blue-65);
      /* Neutral Inverse Contrast 4 - if used as a background, please use Neutral Inverse Base 4 to meet accessibility guidelines. */
      --sds-g-color-neutral-inverse-contrast-4: #ffffff;
      --wes-g-color-neutral-inverse-contrast-4: var(--sds-g-color-neutral-inverse-contrast-4);
      /* Violet 15 */
      --sds-g-color-palette-violet-15: #3d0157;
      --wes-g-color-palette-violet-15: var(--sds-g-color-palette-violet-15);
      /* Brand Inverse Contrast 4 - if used as a background, please use Brand Inverse Base 4 to meet accessibility guidelines. */
      --sds-g-color-brand-inverse-contrast-4: #ffffff;
      --wes-g-color-brand-inverse-contrast-4: var(--sds-g-color-brand-inverse-contrast-4);
      /* Yellow 70 */
      --sds-g-color-palette-yellow-70: #e4a201;
      --wes-g-color-palette-yellow-70: var(--sds-g-color-palette-yellow-70);
      /* Pink 50 */
      --sds-g-color-palette-pink-50: #e3066a;
      --wes-g-color-palette-pink-50: var(--sds-g-color-palette-pink-50);
      /* Cloud Blue 90 */
      --sds-g-color-palette-cloud-blue-90: #cfe9fe;
      --wes-g-color-palette-cloud-blue-90: var(--sds-g-color-palette-cloud-blue-90);
      /* Indigo 90 */
      --sds-g-color-palette-indigo-90: #e0e5f8;
      --wes-g-color-palette-indigo-90: var(--sds-g-color-palette-indigo-90);
      /* Circular border radius for UI elements. */
      --sds-g-radius-border-circle: 100%;
      --wes-g-radius-border-circle: var(--sds-g-radius-border-circle);
      /* Error Base Contrast 4 - if used as a background, please use Error Base Base 4 to meet accessibility guidelines. */
      --sds-g-color-error-base-contrast-4: #640103;
      --wes-g-color-error-base-contrast-4: var(--sds-g-color-error-base-contrast-4);
      /* Red 10 */
      --sds-g-color-palette-red-10: #300c01;
      --wes-g-color-palette-red-10: var(--sds-g-color-palette-red-10);
      /* Red 65 */
      --sds-g-color-palette-red-65: #fe7765;
      --wes-g-color-palette-red-65: var(--sds-g-color-palette-red-65);
      /* Scaled font-size that is 8 stops bigger than the base. */
      --sds-g-font-scale-8: 2.566rem;
      /* Yellow 60 */
      --sds-g-color-palette-yellow-60: #ca8501;
      --wes-g-color-palette-yellow-60: var(--sds-g-color-palette-yellow-60);
      /* Pink 40 */
      --sds-g-color-palette-pink-40: #b60554;
      --wes-g-color-palette-pink-40: var(--sds-g-color-palette-pink-40);
      /* Cloud Blue 80 */
      --sds-g-color-palette-cloud-blue-80: #90d0fe;
      --wes-g-color-palette-cloud-blue-80: var(--sds-g-color-palette-cloud-blue-80);
      /* Pink 95 */
      --sds-g-color-palette-pink-95: #fef0f3;
      --wes-g-color-palette-pink-95: var(--sds-g-color-palette-pink-95);
      /* Indigo 80 */
      --sds-g-color-palette-indigo-80: #bec7f6;
      --wes-g-color-palette-indigo-80: var(--sds-g-color-palette-indigo-80);
      /* Scaled font-size that is 9 stops bigger than the base. */
      --sds-g-font-scale-9: 2.887rem;
      /* Yellow 50 */
      --sds-g-color-palette-yellow-50: #a86403;
      --wes-g-color-palette-yellow-50: var(--sds-g-color-palette-yellow-50);
      /* Pink 30 */
      --sds-g-color-palette-pink-30: #8a033e;
      --wes-g-color-palette-pink-30: var(--sds-g-color-palette-pink-30);
      /* Monospace font stack for your application. */
      --wes-g-font-family-monospace: Consolas, Menlo, Monaco, Courier, monospace;
      /* Cloud Blue 70 */
      --sds-g-color-palette-cloud-blue-70: #1ab9ff;
      --wes-g-color-palette-cloud-blue-70: var(--sds-g-color-palette-cloud-blue-70);
      /* Indigo 70 */
      --sds-g-color-palette-indigo-70: #9ea9f1;
      --wes-g-color-palette-indigo-70: var(--sds-g-color-palette-indigo-70);
      /* Purple 15 */
      --sds-g-color-palette-purple-15: #300b60;
      --wes-g-color-palette-purple-15: var(--sds-g-color-palette-purple-15);
      /* Yellow 40 */
      --sds-g-color-palette-yellow-40: #8c4b02;
      --wes-g-color-palette-yellow-40: var(--sds-g-color-palette-yellow-40);
      /* Neutral 90 */
      --sds-g-color-palette-neutral-90: #e5e5e5;
      --wes-g-color-palette-neutral-90: var(--sds-g-color-palette-neutral-90);
      /* Pink 20 */
      --sds-g-color-palette-pink-20: #61022a;
      --wes-g-color-palette-pink-20: var(--sds-g-color-palette-pink-20);
      /* Yellow 95 */
      --sds-g-color-palette-yellow-95: #fbf3e0;
      --wes-g-color-palette-yellow-95: var(--sds-g-color-palette-yellow-95);
      /* Cloud Blue 60 */
      --sds-g-color-palette-cloud-blue-60: #0d9dda;
      --wes-g-color-palette-cloud-blue-60: var(--sds-g-color-palette-cloud-blue-60);
      /* Indigo 60 */
      --sds-g-color-palette-indigo-60: #7f8ced;
      --wes-g-color-palette-indigo-60: var(--sds-g-color-palette-indigo-60);
      /* Teal 15 */
      --sds-g-color-palette-teal-15: #072825;
      --wes-g-color-palette-teal-15: var(--sds-g-color-palette-teal-15);
      /* Yellow 30 */
      --sds-g-color-palette-yellow-30: #6f3400;
      --wes-g-color-palette-yellow-30: var(--sds-g-color-palette-yellow-30);
      /* Neutral 80 */
      --sds-g-color-palette-neutral-80: #c9c9c9;
      --wes-g-color-palette-neutral-80: var(--sds-g-color-palette-neutral-80);
      /* Pink 10 */
      --sds-g-color-palette-pink-10: #370114;
      --wes-g-color-palette-pink-10: var(--sds-g-color-palette-pink-10);
      /* Orange 90 */
      --sds-g-color-palette-orange-90: #fedfd0;
      --wes-g-color-palette-orange-90: var(--sds-g-color-palette-orange-90);
      /* Cloud Blue 50 */
      --sds-g-color-palette-cloud-blue-50: #107cad;
      --wes-g-color-palette-cloud-blue-50: var(--sds-g-color-palette-cloud-blue-50);
      /* Pink 65 */
      --sds-g-color-palette-pink-65: #fe7298;
      --wes-g-color-palette-pink-65: var(--sds-g-color-palette-pink-65);
      /* Indigo 50 */
      --sds-g-color-palette-indigo-50: #5867e8;
      --wes-g-color-palette-indigo-50: var(--sds-g-color-palette-indigo-50);
      /* Hot Orange 90 */
      --sds-g-color-palette-hot-orange-90: #ffded5;
      --wes-g-color-palette-hot-orange-90: var(--sds-g-color-palette-hot-orange-90);
      /* Default color on focus for hyperlinks. */
      --sds-g-link-color-focus: #014486;
      --wes-g-link-color-focus: var(--sds-g-link-color-focus);
      /* Blue 15 */
      --sds-g-color-palette-blue-15: #03234d;
      --wes-g-color-palette-blue-15: var(--sds-g-color-palette-blue-15);
      /* Yellow 20 */
      --sds-g-color-palette-yellow-20: #4f2100;
      --wes-g-color-palette-yellow-20: var(--sds-g-color-palette-yellow-20);
      /* Neutral 70 */
      --sds-g-color-palette-neutral-70: #aeaeae;
      --wes-g-color-palette-neutral-70: var(--sds-g-color-palette-neutral-70);
      /* Orange 80 */
      --sds-g-color-palette-orange-80: #ffba90;
      --wes-g-color-palette-orange-80: var(--sds-g-color-palette-orange-80);
      /* Cloud Blue 40 */
      --sds-g-color-palette-cloud-blue-40: #05628a;
      --wes-g-color-palette-cloud-blue-40: var(--sds-g-color-palette-cloud-blue-40);
      /* Indigo 40 */
      --sds-g-color-palette-indigo-40: #3a49da;
      --wes-g-color-palette-indigo-40: var(--sds-g-color-palette-indigo-40);
      /* Hot Orange 80 */
      --sds-g-color-palette-hot-orange-80: #feb9a5;
      --wes-g-color-palette-hot-orange-80: var(--sds-g-color-palette-hot-orange-80);
      /* Cloud Blue 95 */
      --sds-g-color-palette-cloud-blue-95: #eaf5fe;
      --wes-g-color-palette-cloud-blue-95: var(--sds-g-color-palette-cloud-blue-95);
      /* Indigo 95 */
      --sds-g-color-palette-indigo-95: #f1f3fb;
      --wes-g-color-palette-indigo-95: var(--sds-g-color-palette-indigo-95);
      /* Red 15 */
      --sds-g-color-palette-red-15: #4a0c04;
      --wes-g-color-palette-red-15: var(--sds-g-color-palette-red-15);
      /* Bold font-weight, use to increase emphasis. */
      --sds-g-font-weight-bold: bold;
      --wes-g-font-weight-bold: var(--sds-g-font-weight-bold);
      /* Yellow 10 */
      --sds-g-color-palette-yellow-10: #281202;
      --wes-g-color-palette-yellow-10: var(--sds-g-color-palette-yellow-10);
      /* Neutral 60 */
      --sds-g-color-palette-neutral-60: #939393;
      --wes-g-color-palette-neutral-60: var(--sds-g-color-palette-neutral-60);
      /* Yellow 65 */
      --sds-g-color-palette-yellow-65: #d79304;
      --wes-g-color-palette-yellow-65: var(--sds-g-color-palette-yellow-65);
      /* Orange 70 */
      --sds-g-color-palette-orange-70: #fe9339;
      --wes-g-color-palette-orange-70: var(--sds-g-color-palette-orange-70);
      /* Cloud Blue 30 */
      --sds-g-color-palette-cloud-blue-30: #084968;
      --wes-g-color-palette-cloud-blue-30: var(--sds-g-color-palette-cloud-blue-30);
      /* Indigo 30 */
      --sds-g-color-palette-indigo-30: #2f2cb7;
      --wes-g-color-palette-indigo-30: var(--sds-g-color-palette-indigo-30);
      /* Hot Orange 70 */
      --sds-g-color-palette-hot-orange-70: #ff906e;
      --wes-g-color-palette-hot-orange-70: var(--sds-g-color-palette-hot-orange-70);
      /* Inversed border color for UI elements. */
      --sds-g-color-border-inverse-1: #181818;
      --wes-g-color-border-inverse-1: var(--sds-g-color-border-inverse-1);
      /* Neutral 50 */
      --sds-g-color-palette-neutral-50: #747474;
      --wes-g-color-palette-neutral-50: var(--sds-g-color-palette-neutral-50);
      /* Orange 60 */
      --sds-g-color-palette-orange-60: #dd7a01;
      --wes-g-color-palette-orange-60: var(--sds-g-color-palette-orange-60);
      /* Cloud Blue 20 */
      --sds-g-color-palette-cloud-blue-20: #023248;
      --wes-g-color-palette-cloud-blue-20: var(--sds-g-color-palette-cloud-blue-20);
      /* Green 90 */
      --sds-g-color-palette-green-90: #cdefc4;
      --wes-g-color-palette-green-90: var(--sds-g-color-palette-green-90);
      /* Indigo 20 */
      --sds-g-color-palette-indigo-20: #260f8f;
      --wes-g-color-palette-indigo-20: var(--sds-g-color-palette-indigo-20);
      /* Hot Orange 60 */
      --sds-g-color-palette-hot-orange-60: #ff5d2d;
      --wes-g-color-palette-hot-orange-60: var(--sds-g-color-palette-hot-orange-60);
      /* Neutral 40 */
      --sds-g-color-palette-neutral-40: #5c5c5c;
      --wes-g-color-palette-neutral-40: var(--sds-g-color-palette-neutral-40);
      /* Alternate inversed border color for UI elements. */
      --sds-g-color-border-inverse-2: #2e2e2e;
      --wes-g-color-border-inverse-2: var(--sds-g-color-border-inverse-2);
      /* Orange 50 */
      --sds-g-color-palette-orange-50: #a96404;
      --wes-g-color-palette-orange-50: var(--sds-g-color-palette-orange-50);
      /* Cloud Blue 10 */
      --sds-g-color-palette-cloud-blue-10: #001a28;
      --wes-g-color-palette-cloud-blue-10: var(--sds-g-color-palette-cloud-blue-10);
      /* Neutral 95 */
      --sds-g-color-palette-neutral-95: #f3f3f3;
      --wes-g-color-palette-neutral-95: var(--sds-g-color-palette-neutral-95);
      /* Green 80 */
      --sds-g-color-palette-green-80: #91db8b;
      --wes-g-color-palette-green-80: var(--sds-g-color-palette-green-80);
      /* Indigo 10 */
      --sds-g-color-palette-indigo-10: #200647;
      --wes-g-color-palette-indigo-10: var(--sds-g-color-palette-indigo-10);
      /* Hot Orange 50 */
      --sds-g-color-palette-hot-orange-50: #d83a00;
      --wes-g-color-palette-hot-orange-50: var(--sds-g-color-palette-hot-orange-50);
      /* Cloud Blue 65 */
      --sds-g-color-palette-cloud-blue-65: #08abed;
      --wes-g-color-palette-cloud-blue-65: var(--sds-g-color-palette-cloud-blue-65);
      /* Indigo 65 */
      --sds-g-color-palette-indigo-65: #8e9bef;
      --wes-g-color-palette-indigo-65: var(--sds-g-color-palette-indigo-65);
      /* Default color on hover for hyperlinks. */
      --sds-g-link-color-hover: #014486;
      --wes-g-link-color-hover: var(--sds-g-link-color-hover);
      /* Default font-size for your application. */
      --sds-g-font-size-base: 1rem;
      /* Neutral 30 */
      --sds-g-color-palette-neutral-30: #444444;
      --wes-g-color-palette-neutral-30: var(--sds-g-color-palette-neutral-30);
      /* Orange 40 */
      --sds-g-color-palette-orange-40: #825101;
      --wes-g-color-palette-orange-40: var(--sds-g-color-palette-orange-40);
      /* Pink 15 */
      --sds-g-color-palette-pink-15: #4b0620;
      --wes-g-color-palette-pink-15: var(--sds-g-color-palette-pink-15);
      /* Green 70 */
      --sds-g-color-palette-green-70: #45c65a;
      --wes-g-color-palette-green-70: var(--sds-g-color-palette-green-70);
      /* Hot Orange 40 */
      --sds-g-color-palette-hot-orange-40: #aa3001;
      --wes-g-color-palette-hot-orange-40: var(--sds-g-color-palette-hot-orange-40);
      /* Orange 95 */
      --sds-g-color-palette-orange-95: #fff1ea;
      --wes-g-color-palette-orange-95: var(--sds-g-color-palette-orange-95);
      /* Hot Orange 95 */
      --sds-g-color-palette-hot-orange-95: #fef1ed;
      --wes-g-color-palette-hot-orange-95: var(--sds-g-color-palette-hot-orange-95);
      /* Border size 1. */
      --sds-g-sizing-border-1: 1px;
      --wes-g-sizing-border-1: var(--sds-g-sizing-border-1);
      /* System font stack for your application. */
      --wes-g-font-family-display: 'ITC Avant Garde', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
      /* System font stack for your application. */
      --wes-g-font-family-sans: 'Salesforce Sans', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
      /* Scaled font-size that is 1 stop bigger than the base. */
      --wes-g-font-size-1: 0.75rem;
      /* Scaled font-size that is 2 stops bigger than the base. */
      --wes-g-font-size-2: 0.875rem;
      /* Scaled font-size that is 3 stops bigger than the base. */
      --wes-g-font-size-3: 1rem;
      /* Scaled font-size that is 4 stops bigger than the base. */
      --wes-g-font-size-4: 1.25rem;
      /* Scaled font-size that is 5 stops bigger than the base. */
      --wes-g-font-size-5: 1.5rem;
      /* Scaled font-size that is 6 stops bigger than the base. */
      --wes-g-font-size-6: 2rem;
      /* Scaled font-size that is 7 stops bigger than the base. */
      --wes-g-font-size-7: 2.5rem;
      /* Scaled font-size that is 8 stops bigger than the base. */
      --wes-g-font-size-8: 3rem;
      /* Scaled font-size that is 9 stops bigger than the base. */
      --wes-g-font-size-9: 3.5rem;
      /* Scaled font-size that is 10 stops bigger than the base. */
      --wes-g-font-size-10: 5rem;
      /* Kinetics x-long duration */
      --wes-g-kx-duration-x-long: 600ms;
      /* Kinetics long duration */
      --wes-g-kx-duration-long: 400ms;
      /* Kinetics normal duration */
      --wes-g-kx-duration-normal: 250ms;
      /* Kinetics short duration */
      --wes-g-kx-duration-short: 150ms;
      /* Kinetics short duration */
      --wes-g-kx-duration-x-short: 75ms;
      /* Kinetics ease none */
      --wes-g-kx-ease-none: cubic-bezier(0, 0, 1, 1);
      /* Kinetics ease in */
      --wes-g-kx-ease-in: cubic-bezier(0.3, 0, 1, 0.3);
      /* Kinetics ease out */
      --wes-g-kx-ease-out: cubic-bezier(0, 0.3, 0.15, 1);
      /* Kinetics ease in-out */
      --wes-g-kx-ease-in-out: cubic-bezier(0.3, 0, 0.15, 1);
      /* Kinetics ease under */
      --wes-g-kx-ease-under: cubic-bezier(0.7, 0, 0.7, -0.75);
      /* Kinetics ease over */
      --wes-g-kx-ease-over: cubic-bezier(0.3, 1.75, 0.3, 1);
  }
/* WES Grid */
/* stylelint-disable comment-empty-line-before */
[grid] {
  display: flex;
}
[axis='row'] {
  flex-direction: row;
}
[axis='row-reverse'] {
  flex-direction: row-reverse;
}
[axis='column'] {
  flex-direction: column;
}
[axis='column-reverse'] {
  flex-direction: column-reverse;
}
[flow='wrap'] {
  flex-wrap: wrap;
  align-items: flex-start;
}
[flow='unset'] {
  flex-wrap: nowrap;
}
[gap='xxx-small'] {
  margin-left: calc((0.125rem / 2) * -1);
  margin-right: calc((0.125rem / 2) * -1);
}
[row-gap='xxx-small'] {
  grid-row-gap: 0.125rem;
  row-gap: 0.125rem;
}
[gap='xxx-small'] [size] {
  padding-left: calc((0.125rem / 2));
  padding-right: calc((0.125rem / 2));
}
[gap='xx-small'] {
  margin-left: calc((0.25rem / 2) * -1);
  margin-right: calc((0.25rem / 2) * -1);
}
[row-gap='xx-small'] {
  grid-row-gap: 0.25rem;
  row-gap: 0.25rem;
}
[gap='xx-small'] [size] {
  padding-left: calc((0.25rem / 2));
  padding-right: calc((0.25rem / 2));
}
[gap='x-small'] {
  margin-left: calc((0.5rem / 2) * -1);
  margin-right: calc((0.5rem / 2) * -1);
}
[row-gap='x-small'] {
  grid-row-gap: 0.5rem;
  row-gap: 0.5rem;
}
[gap='x-small'] [size] {
  padding-left: calc((0.5rem / 2));
  padding-right: calc((0.5rem / 2));
}
[gap='small'] {
  margin-left: calc((0.75rem / 2) * -1);
  margin-right: calc((0.75rem / 2) * -1);
}
[row-gap='small'] {
  grid-row-gap: 0.75rem;
  row-gap: 0.75rem;
}
[gap='small'] [size] {
  padding-left: calc((0.75rem / 2));
  padding-right: calc((0.75rem / 2));
}
[gap='medium'] {
  margin-left: calc((1rem / 2) * -1);
  margin-right: calc((1rem / 2) * -1);
}
[row-gap='medium'] {
  grid-row-gap: 1rem;
  row-gap: 1rem;
}
[gap='medium'] [size] {
  padding-left: calc((1rem / 2));
  padding-right: calc((1rem / 2));
}
[gap='large'] {
  margin-left: calc((1.5rem / 2) * -1);
  margin-right: calc((1.5rem / 2) * -1);
}
[row-gap='large'] {
  grid-row-gap: 1.5rem;
  row-gap: 1.5rem;
}
[gap='large'] [size] {
  padding-left: calc((1.5rem / 2));
  padding-right: calc((1.5rem / 2));
}
[gap='x-large'] {
  margin-left: calc((2rem / 2) * -1);
  margin-right: calc((2rem / 2) * -1);
}
[row-gap='x-large'] {
  grid-row-gap: 2rem;
  row-gap: 2rem;
}
[gap='x-large'] [size] {
  padding-left: calc((2rem / 2));
  padding-right: calc((2rem / 2));
}
[gap='xx-large'] {
  margin-left: calc((3rem / 2) * -1);
  margin-right: calc((3rem / 2) * -1);
}
[row-gap='xx-large'] {
  grid-row-gap: 3rem;
  row-gap: 3rem;
}
[gap='xx-large'] [size] {
  padding-left: calc((3rem / 2));
  padding-right: calc((3rem / 2));
}
[flex='none'] {
  flex: none;
}
[flex='grow'] {
  flex-grow: 1;
}
[flex='shrink'] {
  flex-shrink: 1;
}
[align-items='start'] {
  justify-content: flex-start;
}
[align-items='end'] {
  justify-content: flex-end;
}
[align-items='center'] {
  justify-content: center;
}
[align-items='space'] {
  justify-content: space-around;
}
[align-items='spread'] {
  justify-content: space-between;
}
[axis='vertical'][align-items='start'] {
  align-items: flex-start; /* Single Row Alignment */
  align-content: flex-start; /* Multi Row Alignment */
}
[axis='vertical'][align-items='center'] {
  align-items: center; /* Single Row Alignment */
  align-content: center; /* Multi Row Alignment */
}
[axis='vertical'][align-items='end'] {
  align-items: flex-end; /* Single Row Alignment */
  align-content: flex-end; /* Multi Row Alignment */
}
[axis='vertical'][align-items='stretch'] {
  align-items: stretch; /* Single Row Alignment */
  align-content: stretch; /* Multi Row Alignment */
}
[align='start'] {
  align-self: flex-start;
}
[align='center'] {
  align-self: center;
}
[align='end'] {
  align-self: flex-end;
}
[bump='top'] {
  margin-top: auto;
}
[bump='right'] {
  margin-right: auto;
}
[bump='bottom'] {
  margin-bottom: auto;
}
[bump='left'] {
  margin-left: auto;
}
/* stylelint-disable at-rule-no-unknown -- SDS Grids is using postcss Atrule */
[size='auto'] {
  flex: 1 1 auto;
}
[size~='1\:1'] {
    flex: 0 0 calc((1 / 1) * 100%);
    min-width: calc((1 / 1) * 100%);
  }
/* 2 Columns */
[size~='1\:2'] {
    flex: 0 0 calc((1 / 2) * 100%);
    min-width: calc((1 / 2) * 100%);
  }
[size~='2\:2'] {
    flex: 0 0 calc((2 / 2) * 100%);
    min-width: calc((2 / 2) * 100%);
  }
/* 3 Columns */
[size~='1\:3'] {
    flex: 0 0 calc((1 / 3) * 100%);
    min-width: calc((1 / 3) * 100%);
  }
[size~='2\:3'] {
    flex: 0 0 calc((2 / 3) * 100%);
    min-width: calc((2 / 3) * 100%);
  }
[size~='3\:3'] {
    flex: 0 0 calc((3 / 3) * 100%);
    min-width: calc((3 / 3) * 100%);
  }
/* 4 Columns */
[size~='1\:4'] {
    flex: 0 0 calc((1 / 4) * 100%);
    min-width: calc((1 / 4) * 100%);
  }
[size~='2\:4'] {
    flex: 0 0 calc((2 / 4) * 100%);
    min-width: calc((2 / 4) * 100%);
  }
[size~='3\:4'] {
    flex: 0 0 calc((3 / 4) * 100%);
    min-width: calc((3 / 4) * 100%);
  }
[size~='4\:4'] {
    flex: 0 0 calc((4 / 4) * 100%);
    min-width: calc((4 / 4) * 100%);
  }
/* 5 Columns */
[size~='1\:5'] {
    flex: 0 0 calc((1 / 5) * 100%);
    min-width: calc((1 / 5) * 100%);
  }
[size~='2\:5'] {
    flex: 0 0 calc((2 / 5) * 100%);
    min-width: calc((2 / 5) * 100%);
  }
[size~='3\:5'] {
    flex: 0 0 calc((3 / 5) * 100%);
    min-width: calc((3 / 5) * 100%);
  }
[size~='4\:5'] {
    flex: 0 0 calc((4 / 5) * 100%);
    min-width: calc((4 / 5) * 100%);
  }
[size~='5\:5'] {
    flex: 0 0 calc((5 / 5) * 100%);
    min-width: calc((5 / 5) * 100%);
  }
/* 6 Columns */
[size~='1\:6'] {
    flex: 0 0 calc((1 / 6) * 100%);
    min-width: calc((1 / 6) * 100%);
  }
[size~='2\:6'] {
    flex: 0 0 calc((2 / 6) * 100%);
    min-width: calc((2 / 6) * 100%);
  }
[size~='3\:6'] {
    flex: 0 0 calc((3 / 6) * 100%);
    min-width: calc((3 / 6) * 100%);
  }
[size~='4\:6'] {
    flex: 0 0 calc((4 / 6) * 100%);
    min-width: calc((4 / 6) * 100%);
  }
[size~='5\:6'] {
    flex: 0 0 calc((5 / 6) * 100%);
    min-width: calc((5 / 6) * 100%);
  }
[size~='6\:6'] {
    flex: 0 0 calc((6 / 6) * 100%);
    min-width: calc((6 / 6) * 100%);
  }
/* 7 Columns */
[size~='1\:7'] {
    flex: 0 0 calc((1 / 7) * 100%);
    min-width: calc((1 / 7) * 100%);
  }
[size~='2\:7'] {
    flex: 0 0 calc((2 / 7) * 100%);
    min-width: calc((2 / 7) * 100%);
  }
[size~='3\:7'] {
    flex: 0 0 calc((3 / 7) * 100%);
    min-width: calc((3 / 7) * 100%);
  }
[size~='4\:7'] {
    flex: 0 0 calc((4 / 7) * 100%);
    min-width: calc((4 / 7) * 100%);
  }
[size~='5\:7'] {
    flex: 0 0 calc((5 / 7) * 100%);
    min-width: calc((5 / 7) * 100%);
  }
[size~='6\:7'] {
    flex: 0 0 calc((6 / 7) * 100%);
    min-width: calc((6 / 7) * 100%);
  }
[size~='7\:7'] {
    flex: 0 0 calc((7 / 7) * 100%);
    min-width: calc((7 / 7) * 100%);
  }
/* 8 Columns */
[size~='1\:8'] {
    flex: 0 0 calc((1 / 8) * 100%);
    min-width: calc((1 / 8) * 100%);
  }
[size~='2\:8'] {
    flex: 0 0 calc((2 / 8) * 100%);
    min-width: calc((2 / 8) * 100%);
  }
[size~='3\:8'] {
    flex: 0 0 calc((3 / 8) * 100%);
    min-width: calc((3 / 8) * 100%);
  }
[size~='4\:8'] {
    flex: 0 0 calc((4 / 8) * 100%);
    min-width: calc((4 / 8) * 100%);
  }
[size~='5\:8'] {
    flex: 0 0 calc((5 / 8) * 100%);
    min-width: calc((5 / 8) * 100%);
  }
[size~='6\:8'] {
    flex: 0 0 calc((6 / 8) * 100%);
    min-width: calc((6 / 8) * 100%);
  }
[size~='7\:8'] {
    flex: 0 0 calc((7 / 8) * 100%);
    min-width: calc((7 / 8) * 100%);
  }
[size~='8\:8'] {
    flex: 0 0 calc((8 / 8) * 100%);
    min-width: calc((8 / 8) * 100%);
  }
/* 12 Columns */
[size~='1\:12'] {
    flex: 0 0 calc((1 / 12) * 100%);
    min-width: calc((1 / 12) * 100%);
  }
[size~='2\:12'] {
    flex: 0 0 calc((2 / 12) * 100%);
    min-width: calc((2 / 12) * 100%);
  }
[size~='3\:12'] {
    flex: 0 0 calc((3 / 12) * 100%);
    min-width: calc((3 / 12) * 100%);
  }
[size~='4\:12'] {
    flex: 0 0 calc((4 / 12) * 100%);
    min-width: calc((4 / 12) * 100%);
  }
[size~='5\:12'] {
    flex: 0 0 calc((5 / 12) * 100%);
    min-width: calc((5 / 12) * 100%);
  }
[size~='6\:12'] {
    flex: 0 0 calc((6 / 12) * 100%);
    min-width: calc((6 / 12) * 100%);
  }
[size~='7\:12'] {
    flex: 0 0 calc((7 / 12) * 100%);
    min-width: calc((7 / 12) * 100%);
  }
[size~='8\:12'] {
    flex: 0 0 calc((8 / 12) * 100%);
    min-width: calc((8 / 12) * 100%);
  }
[size~='9\:12'] {
    flex: 0 0 calc((9 / 12) * 100%);
    min-width: calc((9 / 12) * 100%);
  }
[size~='10\:12'] {
    flex: 0 0 calc((10 / 12) * 100%);
    min-width: calc((10 / 12) * 100%);
  }
[size~='11\:12'] {
    flex: 0 0 calc((11 / 12) * 100%);
    min-width: calc((11 / 12) * 100%);
  }
[size~='12\:12'] {
    flex: 0 0 calc((12 / 12) * 100%);
    min-width: calc((12 / 12) * 100%);
  }
/* stylelint-enable at-rule-no-unknown -- SDS Grids is using postcss Atrule */
/* stylelint-disable at-rule-no-unknown -- SDS Grids is using postcss Atrule */
@media (min-width: 320px) {
  /* 2 Columns */
    [size~='1\:2\@x-small'] {
    flex: 0 0 calc((1 / 2) * 100%);
    min-width: calc((1 / 2) * 100%);
  }
    [size~='2\:2\@x-small'] {
    flex: 0 0 calc((2 / 2) * 100%);
    min-width: calc((2 / 2) * 100%);
  }

  /* 3 Columns */
    [size~='1\:3\@x-small'] {
    flex: 0 0 calc((1 / 3) * 100%);
    min-width: calc((1 / 3) * 100%);
  }
    [size~='2\:3\@x-small'] {
    flex: 0 0 calc((2 / 3) * 100%);
    min-width: calc((2 / 3) * 100%);
  }
    [size~='3\:3\@x-small'] {
    flex: 0 0 calc((3 / 3) * 100%);
    min-width: calc((3 / 3) * 100%);
  }

  /* 4 Columns */
    [size~='1\:4\@x-small'] {
    flex: 0 0 calc((1 / 4) * 100%);
    min-width: calc((1 / 4) * 100%);
  }
    [size~='2\:4\@x-small'] {
    flex: 0 0 calc((2 / 4) * 100%);
    min-width: calc((2 / 4) * 100%);
  }
    [size~='3\:4\@x-small'] {
    flex: 0 0 calc((3 / 4) * 100%);
    min-width: calc((3 / 4) * 100%);
  }
    [size~='4\:4\@x-small'] {
    flex: 0 0 calc((4 / 4) * 100%);
    min-width: calc((4 / 4) * 100%);
  }

  /* 5 Columns */
    [size~='1\:5\@x-small'] {
    flex: 0 0 calc((1 / 5) * 100%);
    min-width: calc((1 / 5) * 100%);
  }
    [size~='2\:5\@x-small'] {
    flex: 0 0 calc((2 / 5) * 100%);
    min-width: calc((2 / 5) * 100%);
  }
    [size~='3\:5\@x-small'] {
    flex: 0 0 calc((3 / 5) * 100%);
    min-width: calc((3 / 5) * 100%);
  }
    [size~='4\:5\@x-small'] {
    flex: 0 0 calc((4 / 5) * 100%);
    min-width: calc((4 / 5) * 100%);
  }
    [size~='5\:5\@x-small'] {
    flex: 0 0 calc((5 / 5) * 100%);
    min-width: calc((5 / 5) * 100%);
  }

  /* 6 Columns */
    [size~='1\:6\@x-small'] {
    flex: 0 0 calc((1 / 6) * 100%);
    min-width: calc((1 / 6) * 100%);
  }
    [size~='2\:6\@x-small'] {
    flex: 0 0 calc((2 / 6) * 100%);
    min-width: calc((2 / 6) * 100%);
  }
    [size~='3\:6\@x-small'] {
    flex: 0 0 calc((3 / 6) * 100%);
    min-width: calc((3 / 6) * 100%);
  }
    [size~='4\:6\@x-small'] {
    flex: 0 0 calc((4 / 6) * 100%);
    min-width: calc((4 / 6) * 100%);
  }
    [size~='5\:6\@x-small'] {
    flex: 0 0 calc((5 / 6) * 100%);
    min-width: calc((5 / 6) * 100%);
  }
    [size~='6\:6\@x-small'] {
    flex: 0 0 calc((6 / 6) * 100%);
    min-width: calc((6 / 6) * 100%);
  }

  /* 7 Columns */
    [size~='1\:7\@x-small'] {
    flex: 0 0 calc((1 / 7) * 100%);
    min-width: calc((1 / 7) * 100%);
  }
    [size~='2\:7\@x-small'] {
    flex: 0 0 calc((2 / 7) * 100%);
    min-width: calc((2 / 7) * 100%);
  }
    [size~='3\:7\@x-small'] {
    flex: 0 0 calc((3 / 7) * 100%);
    min-width: calc((3 / 7) * 100%);
  }
    [size~='4\:7\@x-small'] {
    flex: 0 0 calc((4 / 7) * 100%);
    min-width: calc((4 / 7) * 100%);
  }
    [size~='5\:7\@x-small'] {
    flex: 0 0 calc((5 / 7) * 100%);
    min-width: calc((5 / 7) * 100%);
  }
    [size~='6\:7\@x-small'] {
    flex: 0 0 calc((6 / 7) * 100%);
    min-width: calc((6 / 7) * 100%);
  }
    [size~='7\:7\@x-small'] {
    flex: 0 0 calc((7 / 7) * 100%);
    min-width: calc((7 / 7) * 100%);
  }

  /* 8 Columns */
    [size~='1\:8\@x-small'] {
    flex: 0 0 calc((1 / 8) * 100%);
    min-width: calc((1 / 8) * 100%);
  }
    [size~='2\:8\@x-small'] {
    flex: 0 0 calc((2 / 8) * 100%);
    min-width: calc((2 / 8) * 100%);
  }
    [size~='3\:8\@x-small'] {
    flex: 0 0 calc((3 / 8) * 100%);
    min-width: calc((3 / 8) * 100%);
  }
    [size~='4\:8\@x-small'] {
    flex: 0 0 calc((4 / 8) * 100%);
    min-width: calc((4 / 8) * 100%);
  }
    [size~='5\:8\@x-small'] {
    flex: 0 0 calc((5 / 8) * 100%);
    min-width: calc((5 / 8) * 100%);
  }
    [size~='6\:8\@x-small'] {
    flex: 0 0 calc((6 / 8) * 100%);
    min-width: calc((6 / 8) * 100%);
  }
    [size~='7\:8\@x-small'] {
    flex: 0 0 calc((7 / 8) * 100%);
    min-width: calc((7 / 8) * 100%);
  }
    [size~='8\:8\@x-small'] {
    flex: 0 0 calc((8 / 8) * 100%);
    min-width: calc((8 / 8) * 100%);
  }

  /* 12 Columns */
    [size~='1\:12\@x-small'] {
    flex: 0 0 calc((1 / 12) * 100%);
    min-width: calc((1 / 12) * 100%);
  }
    [size~='2\:12\@x-small'] {
    flex: 0 0 calc((2 / 12) * 100%);
    min-width: calc((2 / 12) * 100%);
  }
    [size~='3\:12\@x-small'] {
    flex: 0 0 calc((3 / 12) * 100%);
    min-width: calc((3 / 12) * 100%);
  }
    [size~='4\:12\@x-small'] {
    flex: 0 0 calc((4 / 12) * 100%);
    min-width: calc((4 / 12) * 100%);
  }
    [size~='5\:12\@x-small'] {
    flex: 0 0 calc((5 / 12) * 100%);
    min-width: calc((5 / 12) * 100%);
  }
    [size~='6\:12\@x-small'] {
    flex: 0 0 calc((6 / 12) * 100%);
    min-width: calc((6 / 12) * 100%);
  }
    [size~='7\:12\@x-small'] {
    flex: 0 0 calc((7 / 12) * 100%);
    min-width: calc((7 / 12) * 100%);
  }
    [size~='8\:12\@x-small'] {
    flex: 0 0 calc((8 / 12) * 100%);
    min-width: calc((8 / 12) * 100%);
  }
    [size~='9\:12\@x-small'] {
    flex: 0 0 calc((9 / 12) * 100%);
    min-width: calc((9 / 12) * 100%);
  }
    [size~='10\:12\@x-small'] {
    flex: 0 0 calc((10 / 12) * 100%);
    min-width: calc((10 / 12) * 100%);
  }
    [size~='11\:12\@x-small'] {
    flex: 0 0 calc((11 / 12) * 100%);
    min-width: calc((11 / 12) * 100%);
  }
    [size~='12\:12\@x-small'] {
    flex: 0 0 calc((12 / 12) * 100%);
    min-width: calc((12 / 12) * 100%);
  }
}
@media (min-width: 480px) {
  /* 2 Columns */
    [size~='1\:2\@small'] {
    flex: 0 0 calc((1 / 2) * 100%);
    min-width: calc((1 / 2) * 100%);
  }
    [size~='2\:2\@small'] {
    flex: 0 0 calc((2 / 2) * 100%);
    min-width: calc((2 / 2) * 100%);
  }

  /* 3 Columns */
    [size~='1\:3\@small'] {
    flex: 0 0 calc((1 / 3) * 100%);
    min-width: calc((1 / 3) * 100%);
  }
    [size~='2\:3\@small'] {
    flex: 0 0 calc((2 / 3) * 100%);
    min-width: calc((2 / 3) * 100%);
  }
    [size~='3\:3\@small'] {
    flex: 0 0 calc((3 / 3) * 100%);
    min-width: calc((3 / 3) * 100%);
  }

  /* 4 Columns */
    [size~='1\:4\@small'] {
    flex: 0 0 calc((1 / 4) * 100%);
    min-width: calc((1 / 4) * 100%);
  }
    [size~='2\:4\@small'] {
    flex: 0 0 calc((2 / 4) * 100%);
    min-width: calc((2 / 4) * 100%);
  }
    [size~='3\:4\@small'] {
    flex: 0 0 calc((3 / 4) * 100%);
    min-width: calc((3 / 4) * 100%);
  }
    [size~='4\:4\@small'] {
    flex: 0 0 calc((4 / 4) * 100%);
    min-width: calc((4 / 4) * 100%);
  }

  /* 5 Columns */
    [size~='1\:5\@small'] {
    flex: 0 0 calc((1 / 5) * 100%);
    min-width: calc((1 / 5) * 100%);
  }
    [size~='2\:5\@small'] {
    flex: 0 0 calc((2 / 5) * 100%);
    min-width: calc((2 / 5) * 100%);
  }
    [size~='3\:5\@small'] {
    flex: 0 0 calc((3 / 5) * 100%);
    min-width: calc((3 / 5) * 100%);
  }
    [size~='4\:5\@small'] {
    flex: 0 0 calc((4 / 5) * 100%);
    min-width: calc((4 / 5) * 100%);
  }
    [size~='5\:5\@small'] {
    flex: 0 0 calc((5 / 5) * 100%);
    min-width: calc((5 / 5) * 100%);
  }

  /* 6 Columns */
    [size~='1\:6\@small'] {
    flex: 0 0 calc((1 / 6) * 100%);
    min-width: calc((1 / 6) * 100%);
  }
    [size~='2\:6\@small'] {
    flex: 0 0 calc((2 / 6) * 100%);
    min-width: calc((2 / 6) * 100%);
  }
    [size~='3\:6\@small'] {
    flex: 0 0 calc((3 / 6) * 100%);
    min-width: calc((3 / 6) * 100%);
  }
    [size~='4\:6\@small'] {
    flex: 0 0 calc((4 / 6) * 100%);
    min-width: calc((4 / 6) * 100%);
  }
    [size~='5\:6\@small'] {
    flex: 0 0 calc((5 / 6) * 100%);
    min-width: calc((5 / 6) * 100%);
  }
    [size~='6\:6\@small'] {
    flex: 0 0 calc((6 / 6) * 100%);
    min-width: calc((6 / 6) * 100%);
  }

  /* 7 Columns */
    [size~='1\:7\@small'] {
    flex: 0 0 calc((1 / 7) * 100%);
    min-width: calc((1 / 7) * 100%);
  }
    [size~='2\:7\@small'] {
    flex: 0 0 calc((2 / 7) * 100%);
    min-width: calc((2 / 7) * 100%);
  }
    [size~='3\:7\@small'] {
    flex: 0 0 calc((3 / 7) * 100%);
    min-width: calc((3 / 7) * 100%);
  }
    [size~='4\:7\@small'] {
    flex: 0 0 calc((4 / 7) * 100%);
    min-width: calc((4 / 7) * 100%);
  }
    [size~='5\:7\@small'] {
    flex: 0 0 calc((5 / 7) * 100%);
    min-width: calc((5 / 7) * 100%);
  }
    [size~='6\:7\@small'] {
    flex: 0 0 calc((6 / 7) * 100%);
    min-width: calc((6 / 7) * 100%);
  }
    [size~='7\:7\@small'] {
    flex: 0 0 calc((7 / 7) * 100%);
    min-width: calc((7 / 7) * 100%);
  }

  /* 8 Columns */
    [size~='1\:8\@small'] {
    flex: 0 0 calc((1 / 8) * 100%);
    min-width: calc((1 / 8) * 100%);
  }
    [size~='2\:8\@small'] {
    flex: 0 0 calc((2 / 8) * 100%);
    min-width: calc((2 / 8) * 100%);
  }
    [size~='3\:8\@small'] {
    flex: 0 0 calc((3 / 8) * 100%);
    min-width: calc((3 / 8) * 100%);
  }
    [size~='4\:8\@small'] {
    flex: 0 0 calc((4 / 8) * 100%);
    min-width: calc((4 / 8) * 100%);
  }
    [size~='5\:8\@small'] {
    flex: 0 0 calc((5 / 8) * 100%);
    min-width: calc((5 / 8) * 100%);
  }
    [size~='6\:8\@small'] {
    flex: 0 0 calc((6 / 8) * 100%);
    min-width: calc((6 / 8) * 100%);
  }
    [size~='7\:8\@small'] {
    flex: 0 0 calc((7 / 8) * 100%);
    min-width: calc((7 / 8) * 100%);
  }
    [size~='8\:8\@small'] {
    flex: 0 0 calc((8 / 8) * 100%);
    min-width: calc((8 / 8) * 100%);
  }

  /* 12 Columns */
    [size~='1\:12\@small'] {
    flex: 0 0 calc((1 / 12) * 100%);
    min-width: calc((1 / 12) * 100%);
  }
    [size~='2\:12\@small'] {
    flex: 0 0 calc((2 / 12) * 100%);
    min-width: calc((2 / 12) * 100%);
  }
    [size~='3\:12\@small'] {
    flex: 0 0 calc((3 / 12) * 100%);
    min-width: calc((3 / 12) * 100%);
  }
    [size~='4\:12\@small'] {
    flex: 0 0 calc((4 / 12) * 100%);
    min-width: calc((4 / 12) * 100%);
  }
    [size~='5\:12\@small'] {
    flex: 0 0 calc((5 / 12) * 100%);
    min-width: calc((5 / 12) * 100%);
  }
    [size~='6\:12\@small'] {
    flex: 0 0 calc((6 / 12) * 100%);
    min-width: calc((6 / 12) * 100%);
  }
    [size~='7\:12\@small'] {
    flex: 0 0 calc((7 / 12) * 100%);
    min-width: calc((7 / 12) * 100%);
  }
    [size~='8\:12\@small'] {
    flex: 0 0 calc((8 / 12) * 100%);
    min-width: calc((8 / 12) * 100%);
  }
    [size~='9\:12\@small'] {
    flex: 0 0 calc((9 / 12) * 100%);
    min-width: calc((9 / 12) * 100%);
  }
    [size~='10\:12\@small'] {
    flex: 0 0 calc((10 / 12) * 100%);
    min-width: calc((10 / 12) * 100%);
  }
    [size~='11\:12\@small'] {
    flex: 0 0 calc((11 / 12) * 100%);
    min-width: calc((11 / 12) * 100%);
  }
    [size~='12\:12\@small'] {
    flex: 0 0 calc((12 / 12) * 100%);
    min-width: calc((12 / 12) * 100%);
  }
}
@media (min-width: 768px) {
  /* 2 Columns */
    [size~='1\:2\@medium'] {
    flex: 0 0 calc((1 / 2) * 100%);
    min-width: calc((1 / 2) * 100%);
  }
    [size~='2\:2\@medium'] {
    flex: 0 0 calc((2 / 2) * 100%);
    min-width: calc((2 / 2) * 100%);
  }

  /* 3 Columns */
    [size~='1\:3\@medium'] {
    flex: 0 0 calc((1 / 3) * 100%);
    min-width: calc((1 / 3) * 100%);
  }
    [size~='2\:3\@medium'] {
    flex: 0 0 calc((2 / 3) * 100%);
    min-width: calc((2 / 3) * 100%);
  }
    [size~='3\:3\@medium'] {
    flex: 0 0 calc((3 / 3) * 100%);
    min-width: calc((3 / 3) * 100%);
  }

  /* 4 Columns */
    [size~='1\:4\@medium'] {
    flex: 0 0 calc((1 / 4) * 100%);
    min-width: calc((1 / 4) * 100%);
  }
    [size~='2\:4\@medium'] {
    flex: 0 0 calc((2 / 4) * 100%);
    min-width: calc((2 / 4) * 100%);
  }
    [size~='3\:4\@medium'] {
    flex: 0 0 calc((3 / 4) * 100%);
    min-width: calc((3 / 4) * 100%);
  }
    [size~='4\:4\@medium'] {
    flex: 0 0 calc((4 / 4) * 100%);
    min-width: calc((4 / 4) * 100%);
  }

  /* 5 Columns */
    [size~='1\:5\@medium'] {
    flex: 0 0 calc((1 / 5) * 100%);
    min-width: calc((1 / 5) * 100%);
  }
    [size~='2\:5\@medium'] {
    flex: 0 0 calc((2 / 5) * 100%);
    min-width: calc((2 / 5) * 100%);
  }
    [size~='3\:5\@medium'] {
    flex: 0 0 calc((3 / 5) * 100%);
    min-width: calc((3 / 5) * 100%);
  }
    [size~='4\:5\@medium'] {
    flex: 0 0 calc((4 / 5) * 100%);
    min-width: calc((4 / 5) * 100%);
  }
    [size~='5\:5\@medium'] {
    flex: 0 0 calc((5 / 5) * 100%);
    min-width: calc((5 / 5) * 100%);
  }

  /* 6 Columns */
    [size~='1\:6\@medium'] {
    flex: 0 0 calc((1 / 6) * 100%);
    min-width: calc((1 / 6) * 100%);
  }
    [size~='2\:6\@medium'] {
    flex: 0 0 calc((2 / 6) * 100%);
    min-width: calc((2 / 6) * 100%);
  }
    [size~='3\:6\@medium'] {
    flex: 0 0 calc((3 / 6) * 100%);
    min-width: calc((3 / 6) * 100%);
  }
    [size~='4\:6\@medium'] {
    flex: 0 0 calc((4 / 6) * 100%);
    min-width: calc((4 / 6) * 100%);
  }
    [size~='5\:6\@medium'] {
    flex: 0 0 calc((5 / 6) * 100%);
    min-width: calc((5 / 6) * 100%);
  }
    [size~='6\:6\@medium'] {
    flex: 0 0 calc((6 / 6) * 100%);
    min-width: calc((6 / 6) * 100%);
  }

  /* 7 Columns */
    [size~='1\:7\@medium'] {
    flex: 0 0 calc((1 / 7) * 100%);
    min-width: calc((1 / 7) * 100%);
  }
    [size~='2\:7\@medium'] {
    flex: 0 0 calc((2 / 7) * 100%);
    min-width: calc((2 / 7) * 100%);
  }
    [size~='3\:7\@medium'] {
    flex: 0 0 calc((3 / 7) * 100%);
    min-width: calc((3 / 7) * 100%);
  }
    [size~='4\:7\@medium'] {
    flex: 0 0 calc((4 / 7) * 100%);
    min-width: calc((4 / 7) * 100%);
  }
    [size~='5\:7\@medium'] {
    flex: 0 0 calc((5 / 7) * 100%);
    min-width: calc((5 / 7) * 100%);
  }
    [size~='6\:7\@medium'] {
    flex: 0 0 calc((6 / 7) * 100%);
    min-width: calc((6 / 7) * 100%);
  }
    [size~='7\:7\@medium'] {
    flex: 0 0 calc((7 / 7) * 100%);
    min-width: calc((7 / 7) * 100%);
  }

  /* 8 Columns */
    [size~='1\:8\@medium'] {
    flex: 0 0 calc((1 / 8) * 100%);
    min-width: calc((1 / 8) * 100%);
  }
    [size~='2\:8\@medium'] {
    flex: 0 0 calc((2 / 8) * 100%);
    min-width: calc((2 / 8) * 100%);
  }
    [size~='3\:8\@medium'] {
    flex: 0 0 calc((3 / 8) * 100%);
    min-width: calc((3 / 8) * 100%);
  }
    [size~='4\:8\@medium'] {
    flex: 0 0 calc((4 / 8) * 100%);
    min-width: calc((4 / 8) * 100%);
  }
    [size~='5\:8\@medium'] {
    flex: 0 0 calc((5 / 8) * 100%);
    min-width: calc((5 / 8) * 100%);
  }
    [size~='6\:8\@medium'] {
    flex: 0 0 calc((6 / 8) * 100%);
    min-width: calc((6 / 8) * 100%);
  }
    [size~='7\:8\@medium'] {
    flex: 0 0 calc((7 / 8) * 100%);
    min-width: calc((7 / 8) * 100%);
  }
    [size~='8\:8\@medium'] {
    flex: 0 0 calc((8 / 8) * 100%);
    min-width: calc((8 / 8) * 100%);
  }

  /* 12 Columns */
    [size~='1\:12\@medium'] {
    flex: 0 0 calc((1 / 12) * 100%);
    min-width: calc((1 / 12) * 100%);
  }
    [size~='2\:12\@medium'] {
    flex: 0 0 calc((2 / 12) * 100%);
    min-width: calc((2 / 12) * 100%);
  }
    [size~='3\:12\@medium'] {
    flex: 0 0 calc((3 / 12) * 100%);
    min-width: calc((3 / 12) * 100%);
  }
    [size~='4\:12\@medium'] {
    flex: 0 0 calc((4 / 12) * 100%);
    min-width: calc((4 / 12) * 100%);
  }
    [size~='5\:12\@medium'] {
    flex: 0 0 calc((5 / 12) * 100%);
    min-width: calc((5 / 12) * 100%);
  }
    [size~='6\:12\@medium'] {
    flex: 0 0 calc((6 / 12) * 100%);
    min-width: calc((6 / 12) * 100%);
  }
    [size~='7\:12\@medium'] {
    flex: 0 0 calc((7 / 12) * 100%);
    min-width: calc((7 / 12) * 100%);
  }
    [size~='8\:12\@medium'] {
    flex: 0 0 calc((8 / 12) * 100%);
    min-width: calc((8 / 12) * 100%);
  }
    [size~='9\:12\@medium'] {
    flex: 0 0 calc((9 / 12) * 100%);
    min-width: calc((9 / 12) * 100%);
  }
    [size~='10\:12\@medium'] {
    flex: 0 0 calc((10 / 12) * 100%);
    min-width: calc((10 / 12) * 100%);
  }
    [size~='11\:12\@medium'] {
    flex: 0 0 calc((11 / 12) * 100%);
    min-width: calc((11 / 12) * 100%);
  }
    [size~='12\:12\@medium'] {
    flex: 0 0 calc((12 / 12) * 100%);
    min-width: calc((12 / 12) * 100%);
  }
}
@media (min-width: 1024px) {
  /* 2 Columns */
    [size~='1\:2\@large'] {
    flex: 0 0 calc((1 / 2) * 100%);
    min-width: calc((1 / 2) * 100%);
  }
    [size~='2\:2\@large'] {
    flex: 0 0 calc((2 / 2) * 100%);
    min-width: calc((2 / 2) * 100%);
  }

  /* 3 Columns */
    [size~='1\:3\@large'] {
    flex: 0 0 calc((1 / 3) * 100%);
    min-width: calc((1 / 3) * 100%);
  }
    [size~='2\:3\@large'] {
    flex: 0 0 calc((2 / 3) * 100%);
    min-width: calc((2 / 3) * 100%);
  }
    [size~='3\:3\@large'] {
    flex: 0 0 calc((3 / 3) * 100%);
    min-width: calc((3 / 3) * 100%);
  }

  /* 4 Columns */
    [size~='1\:4\@large'] {
    flex: 0 0 calc((1 / 4) * 100%);
    min-width: calc((1 / 4) * 100%);
  }
    [size~='2\:4\@large'] {
    flex: 0 0 calc((2 / 4) * 100%);
    min-width: calc((2 / 4) * 100%);
  }
    [size~='3\:4\@large'] {
    flex: 0 0 calc((3 / 4) * 100%);
    min-width: calc((3 / 4) * 100%);
  }
    [size~='4\:4\@large'] {
    flex: 0 0 calc((4 / 4) * 100%);
    min-width: calc((4 / 4) * 100%);
  }

  /* 5 Columns */
    [size~='1\:5\@large'] {
    flex: 0 0 calc((1 / 5) * 100%);
    min-width: calc((1 / 5) * 100%);
  }
    [size~='2\:5\@large'] {
    flex: 0 0 calc((2 / 5) * 100%);
    min-width: calc((2 / 5) * 100%);
  }
    [size~='3\:5\@large'] {
    flex: 0 0 calc((3 / 5) * 100%);
    min-width: calc((3 / 5) * 100%);
  }
    [size~='4\:5\@large'] {
    flex: 0 0 calc((4 / 5) * 100%);
    min-width: calc((4 / 5) * 100%);
  }
    [size~='5\:5\@large'] {
    flex: 0 0 calc((5 / 5) * 100%);
    min-width: calc((5 / 5) * 100%);
  }

  /* 6 Columns */
    [size~='1\:6\@large'] {
    flex: 0 0 calc((1 / 6) * 100%);
    min-width: calc((1 / 6) * 100%);
  }
    [size~='2\:6\@large'] {
    flex: 0 0 calc((2 / 6) * 100%);
    min-width: calc((2 / 6) * 100%);
  }
    [size~='3\:6\@large'] {
    flex: 0 0 calc((3 / 6) * 100%);
    min-width: calc((3 / 6) * 100%);
  }
    [size~='4\:6\@large'] {
    flex: 0 0 calc((4 / 6) * 100%);
    min-width: calc((4 / 6) * 100%);
  }
    [size~='5\:6\@large'] {
    flex: 0 0 calc((5 / 6) * 100%);
    min-width: calc((5 / 6) * 100%);
  }
    [size~='6\:6\@large'] {
    flex: 0 0 calc((6 / 6) * 100%);
    min-width: calc((6 / 6) * 100%);
  }

  /* 7 Columns */
    [size~='1\:7\@large'] {
    flex: 0 0 calc((1 / 7) * 100%);
    min-width: calc((1 / 7) * 100%);
  }
    [size~='2\:7\@large'] {
    flex: 0 0 calc((2 / 7) * 100%);
    min-width: calc((2 / 7) * 100%);
  }
    [size~='3\:7\@large'] {
    flex: 0 0 calc((3 / 7) * 100%);
    min-width: calc((3 / 7) * 100%);
  }
    [size~='4\:7\@large'] {
    flex: 0 0 calc((4 / 7) * 100%);
    min-width: calc((4 / 7) * 100%);
  }
    [size~='5\:7\@large'] {
    flex: 0 0 calc((5 / 7) * 100%);
    min-width: calc((5 / 7) * 100%);
  }
    [size~='6\:7\@large'] {
    flex: 0 0 calc((6 / 7) * 100%);
    min-width: calc((6 / 7) * 100%);
  }
    [size~='7\:7\@large'] {
    flex: 0 0 calc((7 / 7) * 100%);
    min-width: calc((7 / 7) * 100%);
  }

  /* 8 Columns */
    [size~='1\:8\@large'] {
    flex: 0 0 calc((1 / 8) * 100%);
    min-width: calc((1 / 8) * 100%);
  }
    [size~='2\:8\@large'] {
    flex: 0 0 calc((2 / 8) * 100%);
    min-width: calc((2 / 8) * 100%);
  }
    [size~='3\:8\@large'] {
    flex: 0 0 calc((3 / 8) * 100%);
    min-width: calc((3 / 8) * 100%);
  }
    [size~='4\:8\@large'] {
    flex: 0 0 calc((4 / 8) * 100%);
    min-width: calc((4 / 8) * 100%);
  }
    [size~='5\:8\@large'] {
    flex: 0 0 calc((5 / 8) * 100%);
    min-width: calc((5 / 8) * 100%);
  }
    [size~='6\:8\@large'] {
    flex: 0 0 calc((6 / 8) * 100%);
    min-width: calc((6 / 8) * 100%);
  }
    [size~='7\:8\@large'] {
    flex: 0 0 calc((7 / 8) * 100%);
    min-width: calc((7 / 8) * 100%);
  }
    [size~='8\:8\@large'] {
    flex: 0 0 calc((8 / 8) * 100%);
    min-width: calc((8 / 8) * 100%);
  }

  /* 12 Columns */
    [size~='1\:12\@large'] {
    flex: 0 0 calc((1 / 12) * 100%);
    min-width: calc((1 / 12) * 100%);
  }
    [size~='2\:12\@large'] {
    flex: 0 0 calc((2 / 12) * 100%);
    min-width: calc((2 / 12) * 100%);
  }
    [size~='3\:12\@large'] {
    flex: 0 0 calc((3 / 12) * 100%);
    min-width: calc((3 / 12) * 100%);
  }
    [size~='4\:12\@large'] {
    flex: 0 0 calc((4 / 12) * 100%);
    min-width: calc((4 / 12) * 100%);
  }
    [size~='5\:12\@large'] {
    flex: 0 0 calc((5 / 12) * 100%);
    min-width: calc((5 / 12) * 100%);
  }
    [size~='6\:12\@large'] {
    flex: 0 0 calc((6 / 12) * 100%);
    min-width: calc((6 / 12) * 100%);
  }
    [size~='7\:12\@large'] {
    flex: 0 0 calc((7 / 12) * 100%);
    min-width: calc((7 / 12) * 100%);
  }
    [size~='8\:12\@large'] {
    flex: 0 0 calc((8 / 12) * 100%);
    min-width: calc((8 / 12) * 100%);
  }
    [size~='9\:12\@large'] {
    flex: 0 0 calc((9 / 12) * 100%);
    min-width: calc((9 / 12) * 100%);
  }
    [size~='10\:12\@large'] {
    flex: 0 0 calc((10 / 12) * 100%);
    min-width: calc((10 / 12) * 100%);
  }
    [size~='11\:12\@large'] {
    flex: 0 0 calc((11 / 12) * 100%);
    min-width: calc((11 / 12) * 100%);
  }
    [size~='12\:12\@large'] {
    flex: 0 0 calc((12 / 12) * 100%);
    min-width: calc((12 / 12) * 100%);
  }
}
@media (min-width: 1280px) {
  /* 2 Columns */
    [size~='1\:2\@x-large'] {
    flex: 0 0 calc((1 / 2) * 100%);
    min-width: calc((1 / 2) * 100%);
  }
    [size~='2\:2\@x-large'] {
    flex: 0 0 calc((2 / 2) * 100%);
    min-width: calc((2 / 2) * 100%);
  }

  /* 3 Columns */
    [size~='1\:3\@x-large'] {
    flex: 0 0 calc((1 / 3) * 100%);
    min-width: calc((1 / 3) * 100%);
  }
    [size~='2\:3\@x-large'] {
    flex: 0 0 calc((2 / 3) * 100%);
    min-width: calc((2 / 3) * 100%);
  }
    [size~='3\:3\@x-large'] {
    flex: 0 0 calc((3 / 3) * 100%);
    min-width: calc((3 / 3) * 100%);
  }

  /* 4 Columns */
    [size~='1\:4\@x-large'] {
    flex: 0 0 calc((1 / 4) * 100%);
    min-width: calc((1 / 4) * 100%);
  }
    [size~='2\:4\@x-large'] {
    flex: 0 0 calc((2 / 4) * 100%);
    min-width: calc((2 / 4) * 100%);
  }
    [size~='3\:4\@x-large'] {
    flex: 0 0 calc((3 / 4) * 100%);
    min-width: calc((3 / 4) * 100%);
  }
    [size~='4\:4\@x-large'] {
    flex: 0 0 calc((4 / 4) * 100%);
    min-width: calc((4 / 4) * 100%);
  }

  /* 5 Columns */
    [size~='1\:5\@x-large'] {
    flex: 0 0 calc((1 / 5) * 100%);
    min-width: calc((1 / 5) * 100%);
  }
    [size~='2\:5\@x-large'] {
    flex: 0 0 calc((2 / 5) * 100%);
    min-width: calc((2 / 5) * 100%);
  }
    [size~='3\:5\@x-large'] {
    flex: 0 0 calc((3 / 5) * 100%);
    min-width: calc((3 / 5) * 100%);
  }
    [size~='4\:5\@x-large'] {
    flex: 0 0 calc((4 / 5) * 100%);
    min-width: calc((4 / 5) * 100%);
  }
    [size~='5\:5\@x-large'] {
    flex: 0 0 calc((5 / 5) * 100%);
    min-width: calc((5 / 5) * 100%);
  }

  /* 6 Columns */
    [size~='1\:6\@x-large'] {
    flex: 0 0 calc((1 / 6) * 100%);
    min-width: calc((1 / 6) * 100%);
  }
    [size~='2\:6\@x-large'] {
    flex: 0 0 calc((2 / 6) * 100%);
    min-width: calc((2 / 6) * 100%);
  }
    [size~='3\:6\@x-large'] {
    flex: 0 0 calc((3 / 6) * 100%);
    min-width: calc((3 / 6) * 100%);
  }
    [size~='4\:6\@x-large'] {
    flex: 0 0 calc((4 / 6) * 100%);
    min-width: calc((4 / 6) * 100%);
  }
    [size~='5\:6\@x-large'] {
    flex: 0 0 calc((5 / 6) * 100%);
    min-width: calc((5 / 6) * 100%);
  }
    [size~='6\:6\@x-large'] {
    flex: 0 0 calc((6 / 6) * 100%);
    min-width: calc((6 / 6) * 100%);
  }

  /* 7 Columns */
    [size~='1\:7\@x-large'] {
    flex: 0 0 calc((1 / 7) * 100%);
    min-width: calc((1 / 7) * 100%);
  }
    [size~='2\:7\@x-large'] {
    flex: 0 0 calc((2 / 7) * 100%);
    min-width: calc((2 / 7) * 100%);
  }
    [size~='3\:7\@x-large'] {
    flex: 0 0 calc((3 / 7) * 100%);
    min-width: calc((3 / 7) * 100%);
  }
    [size~='4\:7\@x-large'] {
    flex: 0 0 calc((4 / 7) * 100%);
    min-width: calc((4 / 7) * 100%);
  }
    [size~='5\:7\@x-large'] {
    flex: 0 0 calc((5 / 7) * 100%);
    min-width: calc((5 / 7) * 100%);
  }
    [size~='6\:7\@x-large'] {
    flex: 0 0 calc((6 / 7) * 100%);
    min-width: calc((6 / 7) * 100%);
  }
    [size~='7\:7\@x-large'] {
    flex: 0 0 calc((7 / 7) * 100%);
    min-width: calc((7 / 7) * 100%);
  }

  /* 8 Columns */
    [size~='1\:8\@x-large'] {
    flex: 0 0 calc((1 / 8) * 100%);
    min-width: calc((1 / 8) * 100%);
  }
    [size~='2\:8\@x-large'] {
    flex: 0 0 calc((2 / 8) * 100%);
    min-width: calc((2 / 8) * 100%);
  }
    [size~='3\:8\@x-large'] {
    flex: 0 0 calc((3 / 8) * 100%);
    min-width: calc((3 / 8) * 100%);
  }
    [size~='4\:8\@x-large'] {
    flex: 0 0 calc((4 / 8) * 100%);
    min-width: calc((4 / 8) * 100%);
  }
    [size~='5\:8\@x-large'] {
    flex: 0 0 calc((5 / 8) * 100%);
    min-width: calc((5 / 8) * 100%);
  }
    [size~='6\:8\@x-large'] {
    flex: 0 0 calc((6 / 8) * 100%);
    min-width: calc((6 / 8) * 100%);
  }
    [size~='7\:8\@x-large'] {
    flex: 0 0 calc((7 / 8) * 100%);
    min-width: calc((7 / 8) * 100%);
  }
    [size~='8\:8\@x-large'] {
    flex: 0 0 calc((8 / 8) * 100%);
    min-width: calc((8 / 8) * 100%);
  }

  /* 12 Columns */
    [size~='1\:12\@x-large'] {
    flex: 0 0 calc((1 / 12) * 100%);
    min-width: calc((1 / 12) * 100%);
  }
    [size~='2\:12\@x-large'] {
    flex: 0 0 calc((2 / 12) * 100%);
    min-width: calc((2 / 12) * 100%);
  }
    [size~='3\:12\@x-large'] {
    flex: 0 0 calc((3 / 12) * 100%);
    min-width: calc((3 / 12) * 100%);
  }
    [size~='4\:12\@x-large'] {
    flex: 0 0 calc((4 / 12) * 100%);
    min-width: calc((4 / 12) * 100%);
  }
    [size~='5\:12\@x-large'] {
    flex: 0 0 calc((5 / 12) * 100%);
    min-width: calc((5 / 12) * 100%);
  }
    [size~='6\:12\@x-large'] {
    flex: 0 0 calc((6 / 12) * 100%);
    min-width: calc((6 / 12) * 100%);
  }
    [size~='7\:12\@x-large'] {
    flex: 0 0 calc((7 / 12) * 100%);
    min-width: calc((7 / 12) * 100%);
  }
    [size~='8\:12\@x-large'] {
    flex: 0 0 calc((8 / 12) * 100%);
    min-width: calc((8 / 12) * 100%);
  }
    [size~='9\:12\@x-large'] {
    flex: 0 0 calc((9 / 12) * 100%);
    min-width: calc((9 / 12) * 100%);
  }
    [size~='10\:12\@x-large'] {
    flex: 0 0 calc((10 / 12) * 100%);
    min-width: calc((10 / 12) * 100%);
  }
    [size~='11\:12\@x-large'] {
    flex: 0 0 calc((11 / 12) * 100%);
    min-width: calc((11 / 12) * 100%);
  }
    [size~='12\:12\@x-large'] {
    flex: 0 0 calc((12 / 12) * 100%);
    min-width: calc((12 / 12) * 100%);
  }
}
/* stylelint-enable at-rule-no-unknown -- SDS Grids is using postcss Atrule */
/* Global - global pieces like media queries, mixins and placholders */
/*
 * Global
 */
/* Variables first */
/* Temp fix for hgf globals - review how to capture in lwc build */
/* noinspection Stylelint */
:root {
  --hgf-g-hot-orange-vibrant-95: #fef1ed;
  --hgf-g-hot-orange-vibrant-90: #ffded5;
  --hgf-g-hot-orange-vibrant-80: #feb9a5;
  --hgf-g-hot-orange-vibrant-70: #ff906e;
  --hgf-g-hot-orange-vibrant-65: #ff784f;
  --hgf-g-hot-orange-vibrant-60: #ff5d2d;
  --hgf-g-hot-orange-vibrant-50: #d83a00;
  --hgf-g-hot-orange-vibrant-40: #aa3001;
  --hgf-g-hot-orange-vibrant-30: #7e2600;
  --hgf-g-hot-orange-vibrant-20: #541d01;
  --hgf-g-hot-orange-vibrant-10: #281202;
  --hgf-g-hot-orange-natural-95: #faf2f0;
  --hgf-g-hot-orange-natural-90: #f5e1db;
  --hgf-g-hot-orange-natural-80: #eebfb1;
  --hgf-g-hot-orange-natural-70: #e89b82;
  --hgf-g-hot-orange-natural-65: #e68769;
  --hgf-g-hot-orange-natural-60: #e3734f;
  --hgf-g-hot-orange-natural-50: #c0532e;
  --hgf-g-hot-orange-natural-40: #964324;
  --hgf-g-hot-orange-natural-30: #703219;
  --hgf-g-hot-orange-natural-20: #4a2413;
  --hgf-g-hot-orange-natural-10: #23140b;
  --hgf-g-orange-vibrant-95: #fff1ea;
  --hgf-g-orange-vibrant-90: #fedfd0;
  --hgf-g-orange-vibrant-80: #ffba90;
  --hgf-g-orange-vibrant-70: #fe9339;
  --hgf-g-orange-vibrant-65: #f38303;
  --hgf-g-orange-vibrant-60: #dd7a01;
  --hgf-g-orange-vibrant-50: #a96404;
  --hgf-g-orange-vibrant-40: #825101;
  --hgf-g-orange-vibrant-30: #5f3e02;
  --hgf-g-orange-vibrant-20: #3e2b02;
  --hgf-g-orange-vibrant-10: #201600;
  --hgf-g-orange-natural-95: #f9f2ef;
  --hgf-g-orange-natural-90: #f5e1d8;
  --hgf-g-orange-natural-80: #f0bfa2;
  --hgf-g-orange-natural-70: #eb9c60;
  --hgf-g-orange-natural-65: #e08d46;
  --hgf-g-orange-natural-60: #cc823f;
  --hgf-g-orange-natural-50: #9c6a33;
  --hgf-g-orange-natural-40: #795526;
  --hgf-g-orange-natural-30: #59401b;
  --hgf-g-orange-natural-20: #3a2c14;
  --hgf-g-orange-natural-10: #1d170a;
  --hgf-g-yellow-vibrant-95: #fbf3e0;
  --hgf-g-yellow-vibrant-90: #f9e3b6;
  --hgf-g-yellow-vibrant-80: #fcc003;
  --hgf-g-yellow-vibrant-70: #e4a201;
  --hgf-g-yellow-vibrant-65: #d79304;
  --hgf-g-yellow-vibrant-60: #ca8501;
  --hgf-g-yellow-vibrant-50: #a86403;
  --hgf-g-yellow-vibrant-40: #8c4b02;
  --hgf-g-yellow-vibrant-30: #6f3400;
  --hgf-g-yellow-vibrant-20: #4f2100;
  --hgf-g-yellow-vibrant-10: #281202;
  --hgf-g-yellow-natural-95: #fbf3e2;
  --hgf-g-yellow-natural-90: #f8e3b7;
  --hgf-g-yellow-natural-80: #efc36b;
  --hgf-g-yellow-natural-70: #d8a54e;
  --hgf-g-yellow-natural-65: #cb9747;
  --hgf-g-yellow-natural-60: #be8940;
  --hgf-g-yellow-natural-50: #9c6a33;
  --hgf-g-yellow-natural-40: #805127;
  --hgf-g-yellow-natural-30: #643a1b;
  --hgf-g-yellow-natural-20: #462613;
  --hgf-g-yellow-natural-10: #23140b;
  --hgf-g-green-vibrant-95: #ebf7e6;
  --hgf-g-green-vibrant-90: #cdefc4;
  --hgf-g-green-vibrant-80: #91db8b;
  --hgf-g-green-vibrant-70: #45c65a;
  --hgf-g-green-vibrant-65: #41b658;
  --hgf-g-green-vibrant-60: #3ba755;
  --hgf-g-green-vibrant-50: #2e844a;
  --hgf-g-green-vibrant-40: #22683e;
  --hgf-g-green-vibrant-30: #194e31;
  --hgf-g-green-vibrant-20: #0e3522;
  --hgf-g-green-vibrant-10: #071b12;
  --hgf-g-green-natural-95: #ebf7e6;
  --hgf-g-green-natural-90: #cdefc4;
  --hgf-g-green-natural-80: #91db8b;
  --hgf-g-green-natural-70: #70bf75;
  --hgf-g-green-natural-65: #68b070;
  --hgf-g-green-natural-60: #5fa269;
  --hgf-g-green-natural-50: #4a8057;
  --hgf-g-green-natural-40: #396547;
  --hgf-g-green-natural-30: #294b36;
  --hgf-g-green-natural-20: #1c3326;
  --hgf-g-green-natural-10: #0d1a13;
  --hgf-g-teal-vibrant-95: #def9f3;
  --hgf-g-teal-vibrant-90: #acf3e4;
  --hgf-g-teal-vibrant-80: #04e1cb;
  --hgf-g-teal-vibrant-70: #01c3b3;
  --hgf-g-teal-vibrant-65: #03b4a7;
  --hgf-g-teal-vibrant-60: #06a59a;
  --hgf-g-teal-vibrant-50: #0b827c;
  --hgf-g-teal-vibrant-40: #056764;
  --hgf-g-teal-vibrant-30: #024d4c;
  --hgf-g-teal-vibrant-20: #023434;
  --hgf-g-teal-vibrant-10: #001b1c;
  --hgf-g-teal-natural-95: #def9f3;
  --hgf-g-teal-natural-90: #acf3e4;
  --hgf-g-teal-natural-80: #73dbcb;
  --hgf-g-teal-natural-70: #63bdb1;
  --hgf-g-teal-natural-65: #5baea5;
  --hgf-g-teal-natural-60: #53a098;
  --hgf-g-teal-natural-50: #427e7a;
  --hgf-g-teal-natural-40: #356461;
  --hgf-g-teal-natural-30: #254a49;
  --hgf-g-teal-natural-20: #1a3232;
  --hgf-g-teal-natural-10: #0c1a1a;
  --hgf-g-cloud-blue-vibrant-95: #eaf5fe;
  --hgf-g-cloud-blue-vibrant-90: #cfe9fe;
  --hgf-g-cloud-blue-vibrant-80: #90d0fe;
  --hgf-g-cloud-blue-vibrant-70: #1ab9ff;
  --hgf-g-cloud-blue-vibrant-65: #08abed;
  --hgf-g-cloud-blue-vibrant-60: #0d9dda;
  --hgf-g-cloud-blue-vibrant-50: #107cad;
  --hgf-g-cloud-blue-vibrant-40: #05628a;
  --hgf-g-cloud-blue-vibrant-30: #084968;
  --hgf-g-cloud-blue-vibrant-20: #023248;
  --hgf-g-cloud-blue-vibrant-10: #001a28;
  --hgf-g-cloud-blue-natural-95: #eff4f9;
  --hgf-g-cloud-blue-natural-90: #d7e7f5;
  --hgf-g-cloud-blue-natural-80: #a7ceec;
  --hgf-g-cloud-blue-natural-70: #6eb5e5;
  --hgf-g-cloud-blue-natural-65: #63a8d5;
  --hgf-g-cloud-blue-natural-60: #5b9ac4;
  --hgf-g-cloud-blue-natural-50: #487a9b;
  --hgf-g-cloud-blue-natural-40: #39607b;
  --hgf-g-cloud-blue-natural-30: #2a485c;
  --hgf-g-cloud-blue-natural-20: #193140;
  --hgf-g-cloud-blue-natural-10: #0c1921;
  --hgf-g-blue-vibrant-95: #eef4ff;
  --hgf-g-blue-vibrant-90: #d8e6fe;
  --hgf-g-blue-vibrant-80: #aacbff;
  --hgf-g-blue-vibrant-70: #78b0fd;
  --hgf-g-blue-vibrant-65: #57a3fd;
  --hgf-g-blue-vibrant-60: #1b96ff;
  --hgf-g-blue-vibrant-50: #0176d3;
  --hgf-g-blue-vibrant-40: #0b5cab;
  --hgf-g-blue-vibrant-30: #014486;
  --hgf-g-blue-vibrant-20: #032d60;
  --hgf-g-blue-vibrant-10: #001639;
  --hgf-g-blue-natural-95: #f1f4f9;
  --hgf-g-blue-natural-90: #dde6f4;
  --hgf-g-blue-natural-80: #b5caee;
  --hgf-g-blue-natural-70: #8fafe4;
  --hgf-g-blue-natural-65: #7aa2e0;
  --hgf-g-blue-natural-60: #6395dd;
  --hgf-g-blue-natural-50: #4e75b4;
  --hgf-g-blue-natural-40: #3d5c92;
  --hgf-g-blue-natural-30: #2e4470;
  --hgf-g-blue-natural-20: #1e2d50;
  --hgf-g-blue-natural-10: #0f172d;
  --hgf-g-indigo-vibrant-95: #f1f3fb;
  --hgf-g-indigo-vibrant-90: #e0e5f8;
  --hgf-g-indigo-vibrant-80: #bec7f6;
  --hgf-g-indigo-vibrant-70: #9ea9f1;
  --hgf-g-indigo-vibrant-65: #8e9bef;
  --hgf-g-indigo-vibrant-60: #7f8ced;
  --hgf-g-indigo-vibrant-50: #5867e8;
  --hgf-g-indigo-vibrant-40: #3a49da;
  --hgf-g-indigo-vibrant-30: #2f2cb7;
  --hgf-g-indigo-vibrant-20: #260f8f;
  --hgf-g-indigo-vibrant-10: #200647;
  --hgf-g-indigo-natural-95: #f2f3f9;
  --hgf-g-indigo-natural-90: #e2e5f2;
  --hgf-g-indigo-natural-80: #c2c8e8;
  --hgf-g-indigo-natural-70: #a5abdc;
  --hgf-g-indigo-natural-65: #979cd8;
  --hgf-g-indigo-natural-60: #8a8ed1;
  --hgf-g-indigo-natural-50: #6a6bc5;
  --hgf-g-indigo-natural-40: #544fb3;
  --hgf-g-indigo-natural-30: #433593;
  --hgf-g-indigo-natural-20: #321d71;
  --hgf-g-indigo-natural-10: #200d38;
  --hgf-g-purple-vibrant-95: #f6f2fb;
  --hgf-g-purple-vibrant-90: #ece1f9;
  --hgf-g-purple-vibrant-80: #d7bff5;
  --hgf-g-purple-vibrant-70: #c29ef1;
  --hgf-g-purple-vibrant-65: #b78def;
  --hgf-g-purple-vibrant-60: #ad7bee;
  --hgf-g-purple-vibrant-50: #9050e9;
  --hgf-g-purple-vibrant-40: #7526e3;
  --hgf-g-purple-vibrant-30: #5a1ba9;
  --hgf-g-purple-vibrant-20: #401075;
  --hgf-g-purple-vibrant-10: #240643;
  --hgf-g-purple-natural-95: #f5f3f8;
  --hgf-g-purple-natural-90: #eae2f3;
  --hgf-g-purple-natural-80: #d3c2e8;
  --hgf-g-purple-natural-70: #bda3dd;
  --hgf-g-purple-natural-65: #b293d7;
  --hgf-g-purple-natural-60: #a783d2;
  --hgf-g-purple-natural-50: #8c5ec6;
  --hgf-g-purple-natural-40: #743eb9;
  --hgf-g-purple-natural-30: #582d8a;
  --hgf-g-purple-natural-20: #3e1d60;
  --hgf-g-purple-natural-10: #220d35;
  --hgf-g-violet-vibrant-95: #f9f0ff;
  --hgf-g-violet-vibrant-90: #f2defe;
  --hgf-g-violet-vibrant-80: #e5b9fe;
  --hgf-g-violet-vibrant-70: #d892fe;
  --hgf-g-violet-vibrant-65: #d17dfe;
  --hgf-g-violet-vibrant-60: #cb65ff;
  --hgf-g-violet-vibrant-50: #ba01ff;
  --hgf-g-violet-vibrant-40: #9602c7;
  --hgf-g-violet-vibrant-30: #730394;
  --hgf-g-violet-vibrant-20: #520066;
  --hgf-g-violet-vibrant-10: #2e0039;
  --hgf-g-violet-natural-95: #f7f2fb;
  --hgf-g-violet-natural-90: #eee1f6;
  --hgf-g-violet-natural-80: #ddbeed;
  --hgf-g-violet-natural-70: #cc9ce5;
  --hgf-g-violet-natural-65: #c48ae1;
  --hgf-g-violet-natural-60: #bc77dd;
  --hgf-g-violet-natural-50: #a946d4;
  --hgf-g-violet-natural-40: #8737a5;
  --hgf-g-violet-natural-30: #67287b;
  --hgf-g-violet-natural-20: #481a54;
  --hgf-g-violet-natural-10: #280b2e;
  --hgf-g-pink-vibrant-95: #fef0f3;
  --hgf-g-pink-vibrant-90: #fddde3;
  --hgf-g-pink-vibrant-80: #fdb6c5;
  --hgf-g-pink-vibrant-70: #fe8aa7;
  --hgf-g-pink-vibrant-65: #fe7298;
  --hgf-g-pink-vibrant-60: #ff538a;
  --hgf-g-pink-vibrant-50: #e3066a;
  --hgf-g-pink-vibrant-40: #b60554;
  --hgf-g-pink-vibrant-30: #8a033e;
  --hgf-g-pink-vibrant-20: #61022a;
  --hgf-g-pink-vibrant-10: #370114;
  --hgf-g-pink-natural-95: #faf2f3;
  --hgf-g-pink-natural-90: #f6e0e4;
  --hgf-g-pink-natural-80: #eebdc6;
  --hgf-g-pink-natural-70: #e798a9;
  --hgf-g-pink-natural-65: #e3849b;
  --hgf-g-pink-natural-60: #e26e8c;
  --hgf-g-pink-natural-50: #c5486d;
  --hgf-g-pink-natural-40: #9d3856;
  --hgf-g-pink-natural-30: #762940;
  --hgf-g-pink-natural-20: #531a2b;
  --hgf-g-pink-natural-10: #2e0b15;
  --hgf-g-red-vibrant-95: #fef1ee;
  --hgf-g-red-vibrant-90: #feded8;
  --hgf-g-red-vibrant-80: #feb8ab;
  --hgf-g-red-vibrant-70: #fe8f7d;
  --hgf-g-red-vibrant-65: #fe7765;
  --hgf-g-red-vibrant-60: #fe5c4c;
  --hgf-g-red-vibrant-50: #ea001e;
  --hgf-g-red-vibrant-40: #ba0517;
  --hgf-g-red-vibrant-30: #8e030f;
  --hgf-g-red-vibrant-20: #640103;
  --hgf-g-red-vibrant-10: #300c01;
  --hgf-g-red-natural-95: #faf2f0;
  --hgf-g-red-natural-90: #f6e1dd;
  --hgf-g-red-natural-80: #efbeb5;
  --hgf-g-red-natural-70: #e99a8c;
  --hgf-g-red-natural-65: #e58777;
  --hgf-g-red-natural-60: #e27362;
  --hgf-g-red-natural-50: #cc4639;
  --hgf-g-red-natural-40: #a2372d;
  --hgf-g-red-natural-30: #7b2820;
  --hgf-g-red-natural-20: #561913;
  --hgf-g-red-natural-10: #29110a;
  --hgf-g-gray-95: #f3f3f3;
  --hgf-g-gray-90: #e5e5e5;
  --hgf-g-gray-60: #939393;
  --hgf-g-gray-50: #747474;
  --hgf-g-gray-30: #444;
  --hgf-g-gray-20: #181818;
  --hgf-g-gray-10: #0b0b0b;
  --hgf-g-brand-default-color: var(--hgf-g-blue-vibrant-50);
  --hgf-g-brand-default-color-background: #fff;
  --hgf-g-brand-default-color-background-2: var(--hgf-g-cloud-blue-vibrant-95);
  --hgf-g-brand-default-button-color-background-inactive: var(--hgf-g-gray-95);
  --hgf-g-brand-default-button-color-background-inactive-hover: var(
    --hgf-g-gray-90
  );
  --hgf-g-brand-default-button-color-background-active: var(
    --hgf-g-cloud-blue-vibrant-95
  );
  --hgf-g-brand-default-color-border: var(--hgf-g-gray-95);
  --hgf-g-brand-default-color-border-2: var(--hgf-g-gray-90);
  --hgf-g-brand-apihub-color: var(--hgf-g-hot-orange-vibrant-40);
  --hgf-g-brand-apihub-color-background: var(--hgf-g-hot-orange-vibrant-95);
  --hgf-g-brand-apihub-color-background-2: #fff;
  --hgf-g-brand-apihub-button-color-background-inactive: var(
    --hgf-g-hot-orange-vibrant-90
  );
  --hgf-g-brand-apihub-button-color-background-inactive-hover: var(
    --hgf-g-hot-orange-vibrant-80
  );
  --hgf-g-brand-apihub-button-color-background-active: var(
    --hgf-g-hot-orange-vibrant-80
  );
  --hgf-g-brand-apihub-color-border: var(--hgf-g-hot-orange-vibrant-90);
  --hgf-g-brand-apihub-color-border-2: var(--hgf-g-hot-orange-vibrant-80);
  --hgf-g-brand-example1-color: var(--hgf-g-purple-vibrant-40);
  --hgf-g-brand-example1-color-background: var(--hgf-g-purple-vibrant-95);
  --hgf-g-brand-example1-color-background-2: #fff;
  --hgf-g-brand-example1-button-color-background-inactive: var(
    --hgf-g-purple-vibrant-90
  );
  --hgf-g-brand-example1-button-color-background-inactive-hover: var(
    --hgf-g-purple-vibrant-80
  );
  --hgf-g-brand-example1-button-color-background-active: var(
    --hgf-g-purple-vibrant-80
  );
  --hgf-g-brand-example1-color-border: var(--hgf-g-purple-vibrant-90);
  --hgf-g-brand-example1-color-border-2: var(--hgf-g-purple-vibrant-80);
  --hgf-g-brand-example2-color: var(--hgf-g-green-vibrant-40);
  --hgf-g-brand-example2-color-background: var(--hgf-g-green-vibrant-95);
  --hgf-g-brand-example2-color-background-2: #fff;
  --hgf-g-brand-example2-button-color-background-inactive: var(
    --hgf-g-green-vibrant-90
  );
  --hgf-g-brand-example2-button-color-background-inactive-hover: var(
    --hgf-g-green-vibrant-80
  );
  --hgf-g-brand-example2-button-color-background-active: var(
    --hgf-g-green-vibrant-80
  );
  --hgf-g-brand-example2-color-border: var(--hgf-g-green-vibrant-90);
  --hgf-g-brand-example2-color-border-2: var(--hgf-g-green-vibrant-80);
  --hgf-g-font-display: 'ITC Avant Garde', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, segoe ui,
    roboto, ubuntu, cantarell, noto sans, sans-serif, blinkmacsystemfont,
    'Segoe UI', roboto, 'Helvetica Neue', arial, 'Noto Sans', sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --hgf-g-font-sans: 'Salesforce Sans', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, segoe ui,
    roboto, ubuntu, cantarell, noto sans, sans-serif, blinkmacsystemfont,
    'Segoe UI', roboto, 'Helvetica Neue', arial, 'Noto Sans', sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --hgf-g-font-icons: 'Salesforce Icons';
  --hgf-g-text-head-1-size: 80px;
  --hgf-g-text-head-2-size: 52px;
  --hgf-g-text-head-3-size: 36px;
  --hgf-g-text-head-4-size: 24px;
  --hgf-g-text-head-5-size: 18px;
  --hgf-g-text-head-6-size: 16px;
  --hgf-g-text-head-7-size: 14px;
  --hgf-g-headline-1-spacing: -1.8px;
  --hgf-g-headline-2-spacing: -2.25px;
  --hgf-g-headline-3-spacing: -0.4px;
  --hgf-g-headline-4-spacing: -0.1px;
  --hgf-g-headline-5-spacing: -0.1px;
  --hgf-g-headline-6-spacing: -0.2;
  --hgf-g-headline-7-spacing: -0.2;
  --hgf-g-headline-1-height: 88px;
  --hgf-g-headline-2-height: 60px;
  --hgf-g-headline-3-height: 40px;
  --hgf-g-headline-4-height: 28px;
  --hgf-g-headline-5-height: 24px;
  --hgf-g-headline-6-height: 20px;
  --hgf-g-headline-7-height: 16px;
  --hgf-g-text-body-large-size: 22px;
  --hgf-g-text-body-medium-size: 16px;
  --hgf-g-text-body-small-size: 14px;
  --hgf-g-text-body-large-height: 30px;
  --hgf-g-text-body-medium-height: 24px;
  --hgf-g-text-body-small-height: 24px;
}
:root {
  /*
    Shared colours, like
    --pbc-incredibly-red: rgba(255, 0, 0, 1);

    Or, if from the C360 design system
    --pbc-g-blue-vibrant-50: rgba(1, 118, 211, 1);

    Please use the SDS colours wherever possible,
    rather than creating new colours.
    */

  --pbc-g-blue-vibrant-95: rgba(234, 245, 254, 1);
  --pbc-g-blue-vibrant-50: rgba(1, 118, 211, 1);
  --pbc-g-blue-vibrant-20: rgba(3, 45, 96, 1);
  --pbc-g-blue-natural-20: rgba(30, 45, 80, 1);
  --pbc-g-green-natural-50: rgba(74, 128, 87, 1);
  --pbc-g-green-natural-40: rgba(57, 101, 71, 1);
  --pbc-g-gray-100: rgba(255, 255, 255, 1);
  --pbc-g-gray-90: rgba(229, 229, 229, 1);
  --pbc-g-gray-60: rgba(147, 147, 147, 1);
  --pbc-g-gray-50: rgba(116, 116, 116, 1);
  --pbc-g-gray-30: rgba(68, 68, 68, 1);
  --pbc-g-gray-20: rgba(24, 24, 24, 1);
  --pbc-focus-state-color: rgba(27, 150, 255, 1);
  /* ------ */
  /* THEMES */
  /* ------ */
  /* DEFAULT THEME (BRANDLESS) */
  --pbc-g-brand-default-color: var(--pbc-g-blue-vibrant-50);
  --pbc-g-brand-default-color-background: var(--pbc-g-gray-100);
}
/* Alphabetical when possible */
/*! Lightning Design System 2.13.7 */
@charset "UTF-8";
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/* stylelint-disable */
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}
audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
template {
  display: none;
}
a {
  background-color: transparent;
}
a:active,
a:hover {
  outline: 0;
}
abbr[title] {
  border-bottom: 1px dotted;
}
b,
strong {
  font-weight: bold;
}
dfn {
  font-style: italic;
}
mark {
  background: #ff0;
  color: #000;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
img {
  border: 0;
}
svg:not(:root) {
  overflow: hidden;
}
hr {
  box-sizing: content-box;
  height: 0;
}
pre {
  overflow: auto;
}
code,
kbd,
pre,
samp {
  font-family: monospace;
  font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}
button {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
button,
input[type='button'],
input[type='reset'],
input[type='submit'] {
  cursor: pointer;
}
button[disabled],
input[disabled] {
  cursor: default;
}
input {
  line-height: normal;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
input[type='checkbox'],
input[type='radio'] {
  box-sizing: border-box;
  padding: 0;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  height: auto;
}
input[type='search'] {
  -webkit-appearance: textfield;
  box-sizing: content-box;
}
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
legend {
  border: 0;
  padding: 0;
}
textarea {
  overflow: auto;
}
optgroup {
  font-weight: bold;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th {
  padding: 0;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
::-moz-placeholder {
  color: #706e6b;
  font-weight: 400;
  opacity: 1;
}
:-webkit-input-placeholder {
  color: #706e6b;
  font-weight: 400;
  opacity: 1;
}
::-moz-placeholder {
  color: #706e6b;
  font-weight: 400;
  opacity: 1;
}
::placeholder {
  color: #706e6b;
  font-weight: 400;
  opacity: 1;
}
::-moz-selection {
  background: #d8edff;
  text-shadow: none;
  color: #080707;
}
::selection {
  background: #d8edff;
  text-shadow: none;
  color: #080707;
}
html {
  font-family: 'Salesforce Sans', Arial, sans-serif;
  font-size: 100%;
  line-height: 1.5;
  background: #b0c4df;
  color: #080707;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
h1,
h2,
h3,
h4 {
  margin-bottom: 0;
}
dd,
figure {
  margin: 0;
}
abbr[title] {
  text-decoration: none;
}
abbr[title],
fieldset,
hr {
  border: 0;
}
hr {
  padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: inherit;
  font-size: 1em;
}
a {
  color: #006dcc;
  transition: color 0.1s linear;
}
a:hover,
a:focus {
  color: #005fb2;
}
a:active {
  color: #005fb2;
}
a,
button {
  cursor: pointer;
}
b,
strong,
dfn {
  font-weight: 700;
}
mark {
  background-color: #fff03f;
  color: #080707;
}
abbr[title] {
  cursor: help;
}
input[type='search'] {
  box-sizing: border-box;
}
table {
  width: 100%;
}
caption,
th,
td {
  text-align: left;
}
hr {
  display: block;
  margin: 2rem 0;
  border-top: 1px solid #dddbda;
  height: 1px;
  clear: both;
}
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}
img {
  max-width: 100%;
  height: auto;
}
.pbc-g-elevation-1 {
  background: #fff;
  box-sizing: border-box;
  border: 1px solid rgba(24, 24, 24, 0.04);
  box-shadow: 0 0 2px rgba(24, 24, 24, 0.08),
    0 2px 4px 1px rgba(24, 24, 24, 0.16);
}
.pbc-g-elevation-2 {
  background: #fff;
  box-sizing: border-box;
  border: 1px solid rgba(24, 24, 24, 0.04);
  box-shadow: 0 2px 8px -2px rgba(24, 24, 24, 0.08),
    0 8px 12px -2px rgba(24, 24, 24, 0.16);
}
.pbc-g-elevation-3 {
  background: #fff;
  box-sizing: border-box;
  border: 1px solid rgba(24, 24, 24, 0.04);
  box-shadow: 0 12px 24px -4px rgba(24, 24, 24, 0.08),
    0 16px 32px -4px rgba(24, 24, 24, 0.16);
}
.pbc-g-elevation-4 {
  background: #fff;
  box-sizing: border-box;
  border: 1px solid rgba(24, 24, 24, 0.04);
  box-shadow: 0 24px 48px -4px rgba(24, 24, 24, 0.2);
}
/*
     override for normalize.css (top of grid file)

     NOTE: we need to add explicit margin and padding to head tags, as normalize.css
     sets them to 0. Using unset and initial didn't work. For now, the code in normalize has
     been changed but this could cause a regression in the future.
     See line 291 in grid.css

*/
html {
  background: #fff;
}
.pbc-g-text-display-1 {
  font-family: 'ITC Avant Garde', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif,
    blinkmacsystemfont, 'Segoe UI', roboto, 'Helvetica Neue', arial, 'Noto Sans',
    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
  font-family: var(--pbc-g-font-display);
  font-size: 80px;
  color: rgba(3, 45, 96, 1);
  color: var(--pbc-g-blue-vibrant-20);
  letter-spacing: -0.018em;
  line-height: 88px;
}
.pbc-g-text-display-2 {
  font-family: 'ITC Avant Garde', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif,
    blinkmacsystemfont, 'Segoe UI', roboto, 'Helvetica Neue', arial, 'Noto Sans',
    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
  font-family: var(--pbc-g-font-display);
  font-size: 40px;
  color: rgba(3, 45, 96, 1);
  color: var(--pbc-g-blue-vibrant-20);
  letter-spacing: -0.008em;
  line-height: 48px;
}
@media (min-width: 768px) and (max-width: 1439px) {
  .pbc-g-text-display-2 {
    font-size: 48px;
    letter-spacing: -0.01em;
    line-height: 56px;
  }
}
@media (min-width: 1440px) {
  .pbc-g-text-display-2 {
    font-size: 56px;
    letter-spacing: -0.012em;
    line-height: 64px;
  }
}
.pbc-g-text-display-3 {
  font-family: 'ITC Avant Garde', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif,
    blinkmacsystemfont, 'Segoe UI', roboto, 'Helvetica Neue', arial, 'Noto Sans',
    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
  font-family: var(--pbc-g-font-display);
  font-size: 32px;
  color: rgba(3, 45, 96, 1);
  color: var(--pbc-g-blue-vibrant-20);
  letter-spacing: -0.004em;
  line-height: 40px;
}
@media (min-width: 768px) and (max-width: 1439px) {
  .pbc-g-text-display-3 {
    font-size: 40px;
    letter-spacing: -0.008em;
    line-height: 48px;
  }
}
@media (min-width: 1440px) {
  .pbc-g-text-display-3 {
    font-size: 48px;
    letter-spacing: -0.01em;
    line-height: 56px;
  }
}
.pbc-g-text-display-4 {
  font-family: 'ITC Avant Garde', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif,
    blinkmacsystemfont, 'Segoe UI', roboto, 'Helvetica Neue', arial, 'Noto Sans',
    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
  font-family: var(--pbc-g-font-display);
  font-size: 32px;
  color: rgba(3, 45, 96, 1);
  color: var(--pbc-g-blue-vibrant-20);
  letter-spacing: -0.004em;
  line-height: 40px;
}
@media (min-width: 1440px) {
  .pbc-g-text-display-4 {
    font-size: 40px;
    letter-spacing: -0.008em;
    line-height: 48px;
  }
}
.pbc-g-text-display-5 {
  font-family: 'ITC Avant Garde', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif,
    blinkmacsystemfont, 'Segoe UI', roboto, 'Helvetica Neue', arial, 'Noto Sans',
    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
  font-family: var(--pbc-g-font-display);
  font-size: 32px;
  color: rgba(3, 45, 96, 1);
  color: var(--pbc-g-blue-vibrant-20);
  letter-spacing: -0.004em;
  line-height: 40px;
}
.pbc-g-text-display-6 {
  font-family: 'ITC Avant Garde', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif,
    blinkmacsystemfont, 'Segoe UI', roboto, 'Helvetica Neue', arial, 'Noto Sans',
    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
  font-family: var(--pbc-g-font-display);
  font-size: 24px;
  color: rgba(3, 45, 96, 1);
  color: var(--pbc-g-blue-vibrant-20);
  letter-spacing: -0.004em;
  line-height: 32px;
}
.pbc-g-text-display-7 {
  font-family: 'ITC Avant Garde', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif,
    blinkmacsystemfont, 'Segoe UI', roboto, 'Helvetica Neue', arial, 'Noto Sans',
    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
  font-family: var(--pbc-g-font-display);
  font-size: 20px;
  color: rgba(3, 45, 96, 1);
  color: var(--pbc-g-blue-vibrant-20);
  letter-spacing: -0.004em;
  line-height: 28px;
}
.pbc-g-text-display-8 {
  font-family: 'ITC Avant Garde', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif,
    blinkmacsystemfont, 'Segoe UI', roboto, 'Helvetica Neue', arial, 'Noto Sans',
    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
  font-family: var(--pbc-g-font-display);
  font-size: 16px;
  color: rgba(3, 45, 96, 1);
  color: var(--pbc-g-blue-vibrant-20);
  letter-spacing: -0.005em;
  line-height: 24px;
}
.pbc-g-text-body-1 {
  font-family: 'Salesforce Sans', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif,
    blinkmacsystemfont, 'Segoe UI', roboto, 'Helvetica Neue', arial, 'Noto Sans',
    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
  font-family: var(--pbc-g-font-sans);
  font-size: 20px;
  color: rgba(24, 24, 24, 1);
  color: var(--pbc-g-gray-20);
  letter-spacing: -0.0012em;
  line-height: 30px;
}
.pbc-g-text-body-1-2 {
  font-family: 'Salesforce Sans', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif,
    blinkmacsystemfont, 'Segoe UI', roboto, 'Helvetica Neue', arial, 'Noto Sans',
    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
  font-family: var(--pbc-g-font-sans);
  font-size: 18px;
  color: rgba(24, 24, 24, 1);
  color: var(--pbc-g-gray-20);
  letter-spacing: -0.0012em;
  line-height: 28px;
}
.pbc-g-text-body-2 {
  font-family: 'Salesforce Sans', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif,
    blinkmacsystemfont, 'Segoe UI', roboto, 'Helvetica Neue', arial, 'Noto Sans',
    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
  font-family: var(--pbc-g-font-sans);
  font-size: 16px;
  color: rgba(24, 24, 24, 1);
  color: var(--pbc-g-gray-20);
  letter-spacing: -0.0012em;
  line-height: 24px;
}
.pbc-g-text-body-3 {
  font-family: 'Salesforce Sans', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif,
    blinkmacsystemfont, 'Segoe UI', roboto, 'Helvetica Neue', arial, 'Noto Sans',
    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
  font-family: var(--pbc-g-font-sans);
  font-size: 14px;
  color: rgba(24, 24, 24, 1);
  color: var(--pbc-g-gray-20);
  letter-spacing: 0;
  line-height: 20px;
}
.pbc-g-text-eyebrow {
  font-family: 'Salesforce Sans', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif,
    blinkmacsystemfont, 'Segoe UI', roboto, 'Helvetica Neue', arial, 'Noto Sans',
    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
  font-family: var(--pbc-g-font-sans);
  font-size: 14px;
  color: rgba(3, 45, 96, 1);
  color: var(--pbc-g-blue-vibrant-20);
  line-height: 20px;
}
.pbc-g-text-caption {
  font-family: 'Salesforce Sans', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif,
    blinkmacsystemfont, 'Segoe UI', roboto, 'Helvetica Neue', arial, 'Noto Sans',
    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
  font-family: var(--pbc-g-font-sans);
  font-size: 12px;
  color: rgba(24, 24, 24, 1);
  color: var(--pbc-g-gray-20);
  letter-spacing: 0.002em;
  line-height: 18px;
}
.pbc-g-text-palette-gray-1 {
  color: rgba(255, 255, 255, 1);
  color: var(--pbc-g-gray-100);
}
:root {
  /* Shared typography denoted with "-g-" prefix to indicate global Design System reference */

  --pbc-g-font-display: 'ITC Avant Garde', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif,
    blinkmacsystemfont, 'Segoe UI', roboto, 'Helvetica Neue', arial, 'Noto Sans',
    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
  --pbc-g-font-sans: 'Salesforce Sans', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif,
    blinkmacsystemfont, 'Segoe UI', roboto, 'Helvetica Neue', arial, 'Noto Sans',
    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
}
@font-face {
  font-family: 'Salesforce Sans';
  src: url('../font-face/fonts/SalesforceSans-Regular.woff2') format('woff2'),
    url('../font-face/fonts/SalesforceSans-Regular.woff') format('woff');
  font-weight: 400;
  font-display: swap;
}
/* @font-face {
  font-family: 'Salesforce Sans';
  src: url('../font-face/fonts/SalesforceSans-Italic.woff2')
      format('woff2'),
    url('../font-face/fonts/SalesforceSans-Italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
} */
@font-face {
  font-family: 'Salesforce Sans';
  src: url('../font-face/fonts/SalesforceSans-Bold.woff2') format('woff2'),
    url('../font-face/fonts/SalesforceSans-Bold.woff') format('woff');
  font-weight: 700;
  font-display: swap;
}
/* @font-face {
  font-family: 'Salesforce Icons';
  src: url('../fonts/salesforce-icons/salesforce-icons.woff2') format('woff2'),
    url('../fonts/salesforce-icons/salesforce-icons.woff') format('woff');
  font-weight: 700;
  font-display: swap;
} */
@font-face {
  font-family: 'ITC Avant Garde';
  src: url('../font-face/fonts/AvantGardeDemi.woff2') format('woff2'),
    url('../font-face/fonts/AvantGardeDemi.woff') format('woff'),
    url('https://a.sfdcstatic.com/shared/fonts/avant-garde/AvantGardeForSalesforceW05-Dm.woff2') format('woff2'),
    url('https://a.sfdcstatic.com/shared/fonts/avant-garde/AvantGardeForSalesforceW05-Dm.woff') format('woff');
  font-weight: 500;
}
/* Phone Vertical */
/* Container */
/* Tablet Vertical */
/* Tablet Horizontal */
/* Fixed Grid */
/* Fluid Nav and Footer */
/* Desktop */
/* Phone Vertical */
/* Container */
/* Tablet Vertical */
/* Tablet Horizontal */
/* Fluid Grid */
/* Fixed Nav and Footer */
/* Desktop */
body {
  margin: 0;
}
/* Layout - container and grid helpers */
/* @import 'layout/index.css'; */
/* Components - custom component support */
/* @import 'components/index.css'; */
/* Utilities - particular purpose classes such as screen-reader-only */
/* @import 'utilities/index.css'; */