/* Tokens */
/*
 * TDS Custom Properties
 * To add a property, declare the css variable below and run a build.
 * This will provide the variable for consumers of both css and js
 *
 * Format:
 * --tds-{property-name}: {base-value};
 * --tds-{property-name}--{modifier}: {value};
 */
 :root,
 .tds-component-preview {
   /* Primitive/Abstract Props */
   --tds-bezier: cubic-bezier(0.5, 0, 0, 0.75);

   /* Sizes */
   --tds-size: 8px;
   --tds-size--10x: 80px;
   --tds-size--11x: 88px;
   --tds-size--12x: 96px;
   --tds-size--13x: 104px;
   --tds-size--1x: 8px;
   --tds-size--2x: 16px;
   --tds-size--3x: 24px;
   --tds-size--4x: 32px;
   --tds-size--5x: 40px;
   --tds-size--6x: 48px;
   --tds-size--7x: 56px;
   --tds-size--8x: 64px;
   --tds-size--9x: 72px;
   --tds-size--half: 4px;

   /* Colors */
   --tds-color--black: #000; /* hsl(0, 0%, 0%); */
   --tds-color--blue10: #2e4994; /* hsl(224, 53%, 38%); */
   --tds-color--blue20: #3457b1; /* hsl(223, 55%, 45%); */
   --tds-color--blue30: #3e6ae1; /* hsl(224, 73%, 56%); */
   --tds-color--green: #12bb00; /* hsl(114, 100%, 37%); */
   --tds-color--grey10: #171a20; /* hsl(220, 16%, 11%); */
   --tds-color--grey15: #222; /* hsl(0, 0%, 13%); */
   --tds-color--grey20: #393c41; /* hsl(218, 7%, 24%); */
   --tds-color--grey25: #444; /* hsl(0, 0%, 27%); */
   --tds-color--grey30: #5c5e62; /* hsl(220, 3%, 37%); */
   --tds-color--grey35: #8e8e8e; /* hsl(0, 0%, 56%); */
   --tds-color--grey40: #a2a3a5; /* hsl(220, 2%, 64%); */
   --tds-color--grey45: #bbb; /* hsl(0, 0%, 73%); */
   --tds-color--grey50: #d0d1d2; /* hsl(210, 2%, 82%); */
   --tds-color--grey60: #e2e3e3; /* hsl(180, 2%, 89%); */
   --tds-color--grey65: #eee; /* hsl(0, 0%, 93%); */
   --tds-color--grey70: #f4f4f4; /* hsl(0, 0%, 96%); */
   --tds-color--red10: #b74134; /* hsl(6, 56%, 46%); */
   --tds-color--red20: #ed4e3b; /* hsl(6, 83%, 58%); */
   --tds-color--white: #fff; /* hsl(0, 0%, 100%); */
   --tds-color--yellow: #fbb01b; /* hsl(40, 97%, 55%); */

   /* font tokens */
   --tds-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   --tds-font-family--arabic: 'Noto Sans Arabic';
   --tds-font-family--chinese-hk: 'PingFang HK', 'Microsoft YaHei';
   --tds-font-family--chinese-simplified: 'PingFang SC', 'Microsoft YaHei';
   --tds-font-family--chinese-traditional: 'PingFang TC', 'Microsoft YaHei';
   --tds-font-family--combined: "Universal Sans Text", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   --tds-font-family--combined-display: "Universal Sans Display", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   --tds-font-family--hebrew: 'Noto Sans Hebrew';
   --tds-font-family--japanese: 'AXIS Font Japanese W55', 'Hiragino Sans';
   --tds-font-family--korean: 'FB New Gothic';
   --tds-font-family--latin: "Universal Sans Text";
   --tds-font-family--monospace: 'Fira Code', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
   --tds-font-weight--bold: 700;
   --tds-font-weight--book: 400;
   --tds-font-weight--light: 300;
   --tds-font-weight--medium: 500;
   --tds-font-weight--xlight: 200;

   /* TODO: Refactor these to `blur(16px)` etc */
   --tds-blur--button: 16px;
   --tds-blur--large: 8px;
   --tds-blur--small: 4px;

   /* Base Props */
   --tds-border-radius: 4px;
   --tds-border-radius--card: 16px;
   --tds-border-radius--card--dense: 8px;
   --tds-border-radius--circle: 100%;
   --tds-border-radius--form-item: 20px;
   --tds-border-radius--pill: 32px;
   --tds-border-style: solid;
   --tds-border-width--hairline: 1px;
   --tds-border-width--large: 3px;
   --tds-border-width--medium: 2px;
   --tds-border-width--small: 1px;
   --tds-box-shadow--large: 0 8px 16px 0 rgba(0, 0, 0, 0.16);
   --tds-box-shadow--large-reverse: 0 -8px 16px 0 rgba(0, 0, 0, 0.16);
   --tds-box-shadow--medium: 0 8px 16px 0 rgba(0, 0, 0, 0.12);
   --tds-box-shadow--off: 0 0 0 0 rgba(0, 0, 0, 0);
   --tds-box-shadow--small: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
   --tds-font-size--10: 10px;
   --tds-font-size--20: 12px;
   --tds-font-size--30: 14px;
   --tds-font-size--40: 17px;
   --tds-font-size--50: 20px;
   --tds-font-size--55: 23px;
   --tds-font-size--60: 24px;
   --tds-font-size--70: 28px;
   --tds-font-size--75: 34px;
   --tds-font-size--80: 40px;
   --tds-height--pill: 40px;
   --tds-line-height--10: 18px;
   --tds-line-height--20: 20px;
   --tds-line-height--30: 21px;
   --tds-line-height--40: 23px;
   --tds-line-height--50: 24px;
   --tds-line-height--60: 28px;
   --tds-line-height--70: 36px;
   --tds-line-height--75: 45px;
   --tds-line-height--80: 48px;
   --tds-line-height--unitless: 1.414;
   --tds-opacity--100: 1;
   --tds-opacity--30: 0.3;
   --tds-opacity--50: 0.5;
   --tds-opacity--70: 0.7;
   --tds-opacity--transparent: 0;
   --tds-padding--card: 24px;
   --tds-padding--card--dense: 16px;
   --tds-padding-block--pill: 10px;
   --tds-padding-inline--pill: 20px;
 }
 @media (min-resolution: 2), (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
   :root,
   .tds-component-preview {
     --tds-border-width--hairline: 0.5px;
   }
 }
 /* Base */
 /* stylelint-disable property-no-vendor-prefix, no-duplicate-selectors, no-descending-specificity, font-family-no-duplicate-names */
 :root,
 .tds-component-preview {
   --tds-base-font_family: var(--tds-font-family--combined);
   --tds-base-font_size: var(--tds-font-size--30);
   --tds-base-line_height: var(--tds-line-height--30);
 }
 /* Defining "system" font stack used as fallback in --tds-font-family--combined variables */
 @font-face {
   font-family: system;
   font-style: normal;
   font-weight: 300;
   src:
     local('.SFNSText-Light'),
     local('.HelveticaNeueDeskInterface-Light'),
     local('.LucidaGrandeUI'),
     local('Ubuntu Light'),
     local('Segoe UI Light'),
     local('Roboto-Light'),
     local('DroidSans'),
     local('Tahoma');
 }
 * {
   /* Set Box sizing at the element level */
   box-sizing: border-box;
   scroll-behavior: smooth;
 }
 html,
 body {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   font-family: var(--tds-font-family--combined, --tds-base-font_family, system);
   margin: 0;
   padding: 0;
 }
 ol,
 ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 figure,
 figcaption {
   margin: 0;
   padding: 0;
 }
 /* Document
    ========================================================================== */
 /**
  * Prevent adjustments of font size after orientation changes in iOS.
  */
 html {
   -webkit-text-size-adjust: 100%;
 }
 /* Sections
    ========================================================================== */
 /**
  * Remove the margin in all browsers.
  */
 html {
   block-size: -webkit-fill-available;
 }
 body {
   margin: 0;
   min-block-size: 100vh;

   /* mobile viewport bug fix */
   min-block-size: -webkit-fill-available;
 }
 /* Text
    ========================================================================== */
 p,
 li {
   max-inline-size: 75ch;
 }
 li {
   margin: 0;
 }
 p {
   font-size: var(--tds-font-size--30);
   line-height: var(--tds-line-height--30);
 }
 p + p {
   -webkit-padding-before: 14px;
           padding-block-start: 14px;
 }
 small {
   font-size: var(--tds-font-size--20);
   line-height: var(--tds-line-height--10);
 }
 html,
 body {
   font-family: var(--tds-font-family--combined, --tds-base-font_family, system);
   font-size: var(--tds-base-font_size);
   font-weight: 400;
   line-height: var(--tds-base-line_height);
 }
 /**
  * Correct the font size and margin on `h1` elements within `section` and
  * `article` contexts in Chrome, Firefox, and Safari.
  */
 h1 {
   font-size: 2em;
   margin: 0;
 }
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 p,
 small {
   display: block;
   margin: 0;
 }
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 p,
 li,
 small {
   line-height: var(--tds-line-height--30);
 }
 /* Grouping content
    ========================================================================== */
 /**
  * 1. Add the correct box sizing in Firefox.
  * 2. Show the overflow in Edge and IE.
  */
 hr {
   background: var(--tds-color--grey50, #d0d1d2);
   block-size: 1px;
   border: none;
   box-sizing: border-box; /* 1 */
   overflow: visible; /* 2 */
 }
 /**
  * 1. Correct the inheritance and scaling of font size in all browsers.
  * 2. Correct the odd `em` font sizing in all browsers.
  */
 pre {
   font-family: monospace, monospace; /* 1 */
   font-size: 1em; /* 2 */
 }
 /* Text-level semantics
    ========================================================================== */
 /**
  * 1. Remove the bottom border in Chrome 57-
  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
  */
 abbr[title] {
   -webkit-border-after: none;
           border-block-end: none; /* 1 */
   text-decoration: underline; /* 2 */
   -webkit-text-decoration: underline dotted;
           text-decoration: underline dotted; /* 2 */
 }
 /**
  * Add the correct font weight in Chrome, Edge, and Safari.
  */
 b,
 strong {
   font-weight: 500;
 }
 /**
  * 1. Correct the inheritance and scaling of font size in all browsers.
  * 2. Correct the odd `em` font sizing in all browsers.
  */
 code,
 kbd,
 samp {
   font-family: monospace, monospace; /* 1 */
   font-size: 1em; /* 2 */
 }
 /**
  * Add the correct font size in all browsers.
  */
 small {
   font-size: 80%;
 }
 /**
  * Prevent `sub` and `sup` elements from affecting the line height in
  * all browsers.
  */
 sub,
 sup {
   font-size: 75%;
   line-height: 0;
   position: relative;
   vertical-align: baseline;
 }
 sub {
   bottom: -0.25em;
 }
 sup {
   top: -0.5em;
 }
 /* Forms
    ========================================================================== */
 /**
  * 1. Change the font styles in all browsers.
  * 2. Remove the margin in Firefox and Safari.
  */
 button,
 input,
 optgroup,
 select,
 textarea {
   font-family: inherit; /* 1 */
   font-size: 100%; /* 1 */
   font-weight: inherit;
   line-height: inherit; /* 1 */
   margin: 0; /* 2 */
 }
 /**
  * Show the overflow in IE.
  * 1. Show the overflow in Edge.
  */
 button,
 input {
   /* 1 */
   overflow: visible;
 }
 /**
  * Remove the inheritance of text transform in Edge, Firefox, and IE.
  * 1. Remove the inheritance of text transform in Firefox.
  */
 button,
 select {
   /* 1 */
   text-transform: none;
 }
 /**
  * Correct the inability to style clickable types in iOS and Safari.
  */
 button,
 [type='button'],
 [type='reset'],
 [type='submit'] {
   -webkit-appearance: button;
 }
 /**
  * Remove the inner border and padding in Firefox.
  */
 button::-moz-focus-inner,
 [type='button']::-moz-focus-inner,
 [type='reset']::-moz-focus-inner,
 [type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 /**
  * Restore the focus styles unset by the previous rule.
  */
 button:-moz-focusring,
 [type='button']:-moz-focusring,
 [type='reset']:-moz-focusring,
 [type='submit']:-moz-focusring {
   outline: 1px dotted ButtonText;
 }
 /**
  * Correct the padding in Firefox.
  */
 fieldset {
   padding: 0.35em 0.75em 0.625em;
 }
 /**
  * 1. Correct the text wrapping in Edge and IE.
  * 2. Correct the color inheritance from `fieldset` elements in IE.
  * 3. Remove the padding so developers are not caught out when they zero out
  *    `fieldset` elements in all browsers.
  */
 legend {
   box-sizing: border-box; /* 1 */
   color: inherit; /* 2 */
   display: table; /* 1 */
   max-inline-size: 100%; /* 1 */
   padding: 0; /* 3 */
   white-space: normal; /* 1 */
 }
 /**
  * Add the correct vertical alignment in Chrome, Firefox, and Opera.
  */
 progress {
   vertical-align: baseline;
 }
 /**
  * Remove the default vertical scrollbar in IE 10+.
  */
 textarea {
   overflow: auto;
 }
 /**
  * Correct the cursor style of increment and decrement buttons in Chrome.
  */
 [type='number']::-webkit-inner-spin-button,
 [type='number']::-webkit-outer-spin-button {
   block-size: auto;
 }
 /**
  * 1. Correct the odd appearance in Chrome and Safari.
  * 2. Correct the outline style in Safari.
  */
 [type='search'] {
   -webkit-appearance: textfield; /* 1 */
   outline-offset: -2px; /* 2 */
 }
 /**
  * Remove the inner padding in Chrome and Safari on macOS.
  */
 [type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 /**
  * 1. Correct the inability to style clickable types in iOS and Safari.
  * 2. Change font properties to `inherit` in Safari.
  */
 ::-webkit-file-upload-button {
   -webkit-appearance: button; /* 1 */
   font: inherit; /* 2 */
 }
 /* Interactive
    ========================================================================== */
 /* Remove animations and movemenets globally for users that have turned them off via browser setting */
 @media (prefers-reduced-motion: reduce) {
   *,
   *::before,
   *::after {
     transition: none !important;
     -webkit-animation: none !important;
             animation: none !important;
   }
 }
 /* Also remove transitions when user is using the keyboard to navigate */
 .tds--indicate-focus *,
 .tds--indicate-focus *::before,
 .tds--indicate-focus *::after {
   transition: none !important;
 }
 *:focus-visible,
 *:focus-visible::before,
 *:focus-visible::after {
   transition: none !important;
 }
 /*
  * Add the correct display in Edge, IE 10+, and Firefox.
  */
 details {
   display: block;
 }
 /*
  * Add the correct display in all browsers.
  */
 summary {
   display: list-item;
 }
 /* Disabled State
    ========================================================================== */
 /* Reduce visual prominence */
 [disabled],
 [disabled] ~ [class*='tds-form-label'],
 .tds--disabled {
   cursor: not-allowed;
   opacity: var(--tds-opacity--50);
 }
 .tds--disabled [disabled] {
   opacity: inherit;
 }
 /* Prevent interactions */
 [disabled] *,
 [disabled]::before,
 [disabled]::after,
 [disabled] ~ [class*='tds-form-label'],
 [disabled] ~ [class*='tds-form-label']::before,
 [disabled] ~ [class*='tds-form-label']::after,
 .tds--disabled * {
   pointer-events: none;
 }
 /* Colorschemes
    ========================================================================== */
 /* Scrim: (in a theater) a piece of gauze cloth that appears opaque
  until lit from behind, used as a screen or backdrop.

  In TDS Scrims represent a specific background color applied to a section,
  similar to a sub-theme.
  --------------------------------------------------------------- */
 [class*='tds-scrim--'] {
   /* Deliberately leave the default background undefined, so that components can specify a fallback */
   background-color: var(--tds-scrim--background);
 }
 /* Light (Default) */
 :root,
 .tds-colorscheme--light,
 .tds-scrim--white,
 .tds-scrim--light {
   --tds-color--error: var(--tds-color--red10);
   --tds-color--hairline: var(--tds-color--grey50);
   --tds-color--inverse: var(--tds-color--white);
   --tds-color--primary: var(--tds-color--blue30);
   --tds-color--primary-highlight: var(--tds-color--blue20);
   --tds-color--rgb-shade: 0, 0, 0;
   --tds-color--rgb-shade--inverse: 255, 255, 255;
   --tds-color--scrim--semitransparent: rgba(255, 255, 255, 0.7);
   --tds-color--secondary: var(--tds-color--grey10);
   --tds-color--secondary-accent: var(--tds-color--grey50);
   --tds-color--secondary-highlight: var(--tds-color--black);
   --tds-color--tertiary: var(--tds-color--grey70);
   --tds-color--tertiary-highlight: var(--tds-color--grey65);

   /* Specific components */
   --tds-caption--color: var(--tds-color--grey30);
   --tds-dialog--background-color: var(--tds-color--white);
   --tds-heading--color: var(--tds-color--secondary);
   --tds-pill--blur-color: hsla(0, 0%, 0%, 0.05);
   --tds-text--color: var(--tds-color--grey20);
   --tds-text--color--light: var(--tds-color--grey30);
   --tds-text--color--placeholder: var(--tds-color--grey40);
   --tds-text--color--primary: var(--tds-color--blue30);
   --tds-toggle--background-color: rgba(150, 150, 150, 0.1);
   --tds-toggle--fill-color: var(--tds-color--white);

   /* Text Contrast Modifiers */
   --tds-text--contrast-high: var(--tds-color--grey10);
   --tds-text--contrast-low: var(--tds-color--grey30);
   --tds-text--contrast-medium: var(--tds-color--grey20);

   /* Code Snippets */
   --tds-code-bg-color: var(--tds-color--grey70);
   --tds-code-border-color: var(--tds-color--grey60);
   --tds-code-color: var(--tds-text--color);

   /* Focus indication has to meet 3:1 contrast ratio, middle grey works for both white and black backgrounds */
   --tds-outline--focus: 2px dashed var(--tds-color--grey35);

   /* Form Elements */
   --tds-background-image--check: url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path fill='hsl(218, 7%, 24%)' d='M6.592 11.58a.748.748 0 0 1-.53-.22L3.22 8.517a.75.75 0 1 1 1.06-1.061l2.312 2.312L11.72 4.64a.75.75 0 1 1 1.06 1.06l-5.658 5.66a.748.748 0 0 1-.53.22z' /></svg>");
   --tds-background-image--minus: url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path fill='hsl(218, 7%, 24%)' d='M13 8a.75.75 0 0 1-.75.75h-8.5a.75.75 0 0 1 0-1.5h8.5A.75.75 0 0 1 13 8z' /></svg>");

   color: var(--tds-text--color);
 }
 .tds-scrim--white {
   --tds-dialog--background-color: var(--tds-color--white);
   --tds-scrim--background: var(--tds-color--white);
 }
 /* Primary links on light scrims do NOT pass contrast ratio, but
    with a slight tweak to the color, it does. The long-term solution
    is to find a color that works for white, light, black scrim colors.

    NOTE: `tds-text--color--primary`
  */
 .tds-scrim--light {
   --tds-color--tertiary: var(--tds-color--white);
   --tds-scrim--background: var(--tds-color--grey70);
   --tds-text--color--primary: #3865e0;

   /* Code Snippets */
   --tds-code-bg-color: var(--tds-color--grey60);
   --tds-code-border-color: var(--tds-color--grey50);
   --tds-code-color: var(--tds-text--color);

   /* grey30 is only a 2.97:1 contrast ratio with light scrim */
   --tds-outline--focus: 2px dashed var(--tds-color--grey30);
 }
 /* Light Scrim override for dialogs and elevated elements that have white backgrounds
  * Note that this can't be placed on the component itself, as some of the components rely on
  * --tds-color--tertiary for their own background
 */
 .tds-scrim--light .tds-tooltip > *,
 .tds-scrim--light .tds-modal > *,
 .tds-scrim--light .tds-card > * {
   --tds-code-bg-color: var(--tds-color--grey70);
   --tds-code-border-color: var(--tds-color--grey60);
   --tds-color--tertiary: var(--tds-color--grey70);
 }
 /* Dark */
 .tds-colorscheme--dark,
 .tds-scrim--black {
   --tds-color--error: var(--tds-color--red20);
   --tds-color--hairline: var(--tds-color--grey35);
   --tds-color--inverse: var(--tds-color--black);
   --tds-color--rgb-shade: 255, 255, 255;
   --tds-color--rgb-shade--inverse: 0, 0, 0;
   --tds-color--scrim--semitransparent: rgba(0, 0, 0, 0.7);
   --tds-color--secondary: var(--tds-color--grey70);
   --tds-color--secondary-accent: var(--tds-color--grey35);
   --tds-color--secondary-highlight: var(--tds-color--white);
   --tds-color--tertiary: var(--tds-color--grey20);
   --tds-color--tertiary-highlight: var(--tds-color--grey30);

   /* Specific components */
   --tds-caption--color: var(--tds-color--grey40);
   --tds-dialog--background-color: var(--tds-color--grey15);
   --tds-heading--color: var(--tds-color--white);
   --tds-pill--blur-color: hsla(0, 0%, 100%, 0.2);
   --tds-text--color: var(--tds-color--grey60);
   --tds-text--color--light: var(--tds-color--grey50);
   --tds-text--color--primary: #3368ff;
   --tds-toggle--background-color: rgba(255, 255, 255, 0.2);
   --tds-toggle--fill-color: var(--tds-color--grey30);

   /* Text Contrast Modifiers */
   --tds-text--contrast-high: var(--tds-color--white);
   --tds-text--contrast-low: var(--tds-color--grey40);
   --tds-text--contrast-medium: var(--tds-color--grey60);

   /* Form Elements */
   --tds-background-image--check: url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path fill='hsl(180, 2%, 89%)' d='M6.592 11.58a.748.748 0 0 1-.53-.22L3.22 8.517a.75.75 0 1 1 1.06-1.061l2.312 2.312L11.72 4.64a.75.75 0 1 1 1.06 1.06l-5.658 5.66a.748.748 0 0 1-.53.22z' /></svg>");
   --tds-background-image--minus: url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path fill='hsl(180, 2%, 89%)' d='M13 8a.75.75 0 0 1-.75.75h-8.5a.75.75 0 0 1 0-1.5h8.5A.75.75 0 0 1 13 8z' /></svg>");

   /* Code Snippets */
   --tds-code-bg-color: var(--tds-color--grey10);
   --tds-code-border-color: var(--tds-color--grey15);
   --tds-code-color: var(--tds-text--color);

   color: var(--tds-text--color);
 }
 .tds-scrim--black {
   --tds-scrim--background: var(--tds-color--black);
 }
 /*
 Copyright (C) Hoefler & Co.
 This software is the property of Hoefler & Co. (H&Co).
 Your right to access and use this software is subject to the
 applicable License Agreement, or Terms of Service, that exists
 between you and H&Co. If no such agreement exists, you may not
 access or use this software for any purpose.
 This software may only be hosted at the locations specified in
 the applicable License Agreement or Terms of Service, and only
 for the purposes expressly set forth therein. You may not copy,
 modify, convert, create derivative works from or distribute this
 software in any way, or make it accessible to any third party,
 without first obtaining the written permission of H&Co.
 For more information, please visit us at http://typography.com.
 */
 /* Latin:
  * For localized stacks, the font-weight property should match the Gotham declaraction,
  * while the actual glyph set should be adjusted for the specific font.
  */
 /* Bold */
 @font-face {
   font-family: "Universal Sans Display";
   font-weight: 700;
   font-display: swap;
   font-style: normal;
   src:
     url(../../../../../../../../digitalassets.tesla.com/tesla-design-system/raw/upload/static/fonts/universal-sans-2/web/display/Universal-Sans-Display-Bold.woff2)
     format('woff2');
 }
 /* Medium */
 @font-face {
   font-family: "Universal Sans Display";
   font-weight: 500;
   font-display: swap;
   font-style: normal;
   src:
     url(../../../../../../../../digitalassets.tesla.com/tesla-design-system/raw/upload/static/fonts/universal-sans-2/web/display/Universal-Sans-Display-Medium.woff2)
     format('woff2');
 }
 /* Book */
 @font-face {
   font-family: "Universal Sans Display";
   font-weight: 400;
   font-display: swap;
   font-style: normal;
   src:
     url(../../../../../../../../digitalassets.tesla.com/tesla-design-system/raw/upload/static/fonts/universal-sans-2/web/display/Universal-Sans-Display-Regular.woff2)
     format('woff2');
 }
 /* Light */
 @font-face {
   font-family: "Universal Sans Display";
   font-weight: 300;
   font-display: swap;
   font-style: normal;
   src:
     url(../../../../../../../../digitalassets.tesla.com/tesla-design-system/raw/upload/static/fonts/universal-sans-2/web/display/Universal-Sans-Display-Light.woff2)
     format('woff2');
 }
 /* Extra Light */
 @font-face {
   font-family: "Universal Sans Display";
   font-weight: 200;
   font-display: swap;
   font-style: normal;
   src:
     url(../../../../../../../../digitalassets.tesla.com/tesla-design-system/raw/upload/static/fonts/universal-sans-2/web/display/Universal-Sans-Display-Thin.woff2)
     format('woff2');
 }
 /* Universal Sans Text "Bold" */
@font-face {
  font-family: 'Universal Sans Text';
  font-weight: 700;
  font-display: swap;
  font-style: normal;
  src: url(../../../../../../../../digitalassets.tesla.com/tesla-design-system/raw/upload/static/fonts/universal-sans-2/web/text/Universal-Sans-Text-Bold.woff2)
    format('woff2');
}

/* Universal Sans Text "Medium" */
@font-face {
  font-family: 'Universal Sans Text';
  font-weight: 500;
  font-display: swap;
  font-style: normal;
  src: url(../../../../../../../../digitalassets.tesla.com/tesla-design-system/raw/upload/static/fonts/universal-sans-2/web/text/Universal-Sans-Text-Medium.woff2)
    format('woff2');
}

/* Universal Sans Text "Regular" */
@font-face {
  font-family: 'Universal Sans Text';
  font-weight: 400;
  font-display: swap;
  font-style: normal;
  src: url(../../../../../../../../digitalassets.tesla.com/tesla-design-system/raw/upload/static/fonts/universal-sans-2/web/text/Universal-Sans-Text-Regular.woff2)
    format('woff2');
}

/* Universal Sans Text "Light" */
@font-face {
  font-family: 'Universal Sans Text';
  font-weight: 300;
  font-display: swap;
  font-style: normal;
  src: url(../../../../../../../../digitalassets.tesla.com/tesla-design-system/raw/upload/static/fonts/universal-sans-2/web/text/Universal-Sans-Text-Light.woff2)
    format('woff2');
}

/* Universal Sans Text "Thin" */
@font-face {
  font-family: 'Universal Sans Text';
  font-weight: 100;
  font-display: swap;
  font-style: normal;
  src: url(../../../../../../../../digitalassets.tesla.com/tesla-design-system/raw/upload/static/fonts/universal-sans-2/web/text/Universal-Sans-Text-Thin.woff2)
    format('woff2');
}
 /* Chinese (Simplified, Traditional, Hong Kong):
  * Requested by China business teams:
  * Google Fonts don't load in CN, PingFang comes installed on majority of local systems
  */
 @font-face {
   font-family: 'PingFang SC';
   font-weight: 500;
   src: local('PingFang SC Semibold');
 }
 @font-face {
   font-family: 'PingFang SC';
   font-weight: 400;
   src: local('PingFang SC Regular');
 }
 @font-face {
   font-family: 'PingFang TC';
   font-weight: 500;
   src: local('PingFang TC Semibold');
 }
 @font-face {
   font-family: 'PingFang TC';
   font-weight: 400;
   src: local('PingFang TC Regular');
 }
 @font-face {
   font-family: 'PingFang HK';
   font-weight: 400;
   src: local('PingFang HK Regular');
 }
 @font-face {
   font-family: 'PingFang HK';
   font-weight: 500;
   src: local('PingFang HK Semibold');
 }
 /* Arabic:
  * Reference: https: //fonts.google.com/noto/specimen/Noto+Sans+Arabic
  * Declaration Source: https://fonts.googleapis.com/css?family=Noto+Sans+Arabic:wght@400;500
  */
 /* Noto Sans Arabic "Medium" */
 @font-face {
   font-family: 'Noto Sans Arabic';
   font-style: normal;
   font-weight: 500;
   font-stretch: 100%;
   src: url(../../../../../../../../fonts.gstatic.com/s/notosansarabic/v10/nwpCtLGrOAZMl5nJ_wfgRg3DrWFZWsnVBJ_sS6tlqHHFlj4wv4rqxzLI.woff2) format('woff2');
   unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC, U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 /* Noto Sans Arabic "Book" */
 @font-face {
   font-family: 'Noto Sans Arabic';
   font-style: normal;
   font-weight: 400;
   font-stretch: 100%;
   src: url(../../../../../../../../fonts.gstatic.com/s/notosansarabic/v10/nwpCtLGrOAZMl5nJ_wfgRg3DrWFZWsnVBJ_sS6tlqHHFlj4wv4rqxzLI.woff2) format('woff2');
   unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC, U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 /* Hebrew
  * Reference: https://fonts.google.com/noto/specimen/Noto+Sans+Hebrew
  * Declaration source: https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew:wght@400;500
  */
 /* Noto Sans Hebrew "Medium" */
 @font-face {
   font-family: 'Noto Sans Hebrew';
   font-style: normal;
   font-weight: 500;
   font-stretch: 100%;
   src: url(../../../../../../../../fonts.gstatic.com/s/notosanshebrew/v35/or30Q7v33eiDljA1IufXTtVf7V6RvEEdhQlk0LlGxCyaePiWTNzWNf72.woff2) format('woff2');
   unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F, U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 /* Noto Sans Hebrew "Book" */
 @font-face {
   font-family: 'Noto Sans Hebrew';
   font-style: normal;
   font-weight: 400;
   font-stretch: 100%;
   src: url(../../../../../../../../fonts.gstatic.com/s/notosanshebrew/v35/or30Q7v33eiDljA1IufXTtVf7V6RvEEdhQlk0LlGxCyaePiWTNzWNf72.woff2) format('woff2');
   unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F, U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 /* Themes */
 /* -- Enterprise Theme Overrides
 ----------------------------------------------------------------------------- */
 .tds-theme--enterprise {
   --tds-border-radius--form-item: 16px;
   --tds-height--pill: 32px;
   --tds-padding-block--pill: 8px;
   --tds-padding-inline--pill: 15px;

   /* Text Inputs/Forms  */
   --tds-form-item-margin_bottom: 18px;
   --tds-label-descriptor-margin_left: 6px;
   --tds-size: 9px;
 }
 /* -- Marketing Theme Overrides
 ----------------------------------------------------------------------------- */
 .tds-theme--marketing,
 .tds-theme--marketing.tds-colorscheme--light,
 .tds-theme--marketing .tds-colorscheme--light,
 .tds-colorscheme--light .tds-theme--marketing,
 .tds-theme--marketing.tds-scrim--white,
 .tds-theme--marketing .tds-scrim--white,
 .tds-scrim--white .tds-theme--marketing,
 .tds-theme--marketing.tds-scrim--light,
 .tds-theme--marketing .tds-scrim--light,
 .tds-scrim--light .tds-theme--marketing {
   --tds-color--primary: var(--tds-color--grey10);
   --tds-color--primary-highlight: var(--tds-color--grey20);
 }
 .tds-theme--marketing.tds-colorscheme--dark,
 .tds-theme--marketing .tds-colorscheme--dark,
 .tds-colorscheme--dark .tds-theme--marketing,
 .tds-theme--marketing.tds-scrim--black,
 .tds-theme--marketing .tds-scrim--black,
 .tds-scrim--black .tds-theme--marketing {
   --tds-color--primary: var(--tds-color--white);
   --tds-color--primary-highlight: var(--tds-color--grey60);
 }
 :is(.tds-colorscheme--dark, .tds-scrim--black) .tds-theme--marketing .tds-date-picker,
 .tds-theme--marketing :is(.tds-colorscheme--dark, .tds-scrim--black) .tds-date-picker,
 .tds-theme--marketing:is(.tds-colorscheme--dark, .tds-scrim--black) .tds-date-picker {
   --tds-date-selected--color: var(--tds-color--grey20);
 }
 /**
  * User Preference for Dark Mode
  * **** PROTOTYPE CODE ****
  *
  * Please note, Dark mode support is provided as-is, no-guarantees,
  * and is subject to unannounced changes. Use at your own risk.
  */
 @media (prefers-color-scheme: dark) {
   .tds--supports-darkmode.tds-theme--marketing,
   .tds--supports-darkmode.tds-theme--marketing.tds-colorscheme--light,
   .tds--supports-darkmode.tds-theme--marketing .tds-colorscheme--light,
   .tds--supports-darkmode.tds-theme--marketing.tds-scrim--white,
   .tds--supports-darkmode.tds-theme--marketing .tds-scrim--white,
   .tds--supports-darkmode.tds-theme--marketing.tds-scrim--light,
   .tds--supports-darkmode.tds-theme--marketing .tds-scrim--light,
   .tds--supports-darkmode.tds-colorscheme--light .tds-theme--marketing {
     --tds-color--primary: var(--tds-color--white);
     --tds-color--primary-highlight: var(--tds-color--grey70);
   }
 }
 /* -- Replicant Theme Overrides
    -- Alternate appearance for TDS (for Cybertruck-related content)
    -- Defaults to a dark colorscheme, but can be reversed
 ----------------------------------------------------------------------------- */
 .tds-theme--replicant {
   /* Glow Effect */
   --tds-glow--bright: drop-shadow(0 0 var(--tds-size--2x) rgba(var(--tds-color--rgb-shade), 0.5));
   --tds-glow--medium: drop-shadow(0 0 var(--tds-size--1x) rgba(var(--tds-color--rgb-shade), 0.33));
   --tds-glow--off: drop-shadow(0 0 0 rgba(var(--tds-color--rgb-shade), 0.33));

   /* solid background */
   --tds-notch: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);

   /* 4px border */
   --tds-notch--outline:
     polygon(
       0 0,
       100% 0,
       100% calc(100% - 10px),
       calc(100% - 10px) 100%,
       0 100%,
       0 4px,
       4px 4px,
       4px calc(100% - 4px),
       calc(100% - 12px) calc(100% - 4px),
       calc(100% - 4px) calc(100% - 12px),
       calc(100% - 4px) 4px,
       0 4px
     );

   /* 1px border */
   --tds-notch--outline-thin:
     polygon(
       0 0,
       100% 0,
       100% calc(100% - 10px),
       calc(100% - 10px) 100%,
       0 100%,
       0 1.5px,
       1.5px 1.5px,
       1.5px calc(100% - 1.5px),
       calc(100% - 11.5px) calc(100% - 1.5px),
       calc(100% - 1.5px) calc(100% - 11.5px),
       calc(100% - 1.5px) 1.5px,
       0 1.5px
     );

   /* Shapes */
   --tds-border-radius: 0;
   --tds-border-radius--card: 0;
   --tds-border-radius--card--dense: 0;
   --tds-border-radius--pill: 0;
   --tds-padding-block--pill: 12px;
   --tds-padding-inline--pill: 16px;

   /* Toggles */
   --transition-off:
     color 0.5s ease,
     background 0.5s ease,
     border-color 0.5s ease,
     opacity 1s ease,
     transform 1s var(--tds-bezier) 0s;
   --transition-on:
     color 0.5s ease,
     background 0.5s ease,
     border-color 0.5s ease,
     opacity 1s ease,
     transform 1s var(--tds-bezier) 0.48s;

   /* Default Styles */
   font-size: var(--tds-font-size--20);
   line-height: var(--tds-line-height--50);
 }
 /* Scrims should have no background in Replicant environments */
 .tds-theme--replicant [class*='tds-scrim--']:not(.tds-scrim--blur) {
   /* TODO: This rule should be set by the body tag, investigate why it's not */
   color: var(--tds-text--color);
 }
 /*
   TODO Document this no-bg solution for the likes of Ricky P. and into the Migration Docs
 */
 .tds-theme--replicant--has_img [class*='tds-scrim--']:not(.tds-scrim--blur) {
   --tds-scrim--background: transparent;
 }
 /**
  * Replicant modifications to the Light/Dark colorschemes
  * - Covers several use-cases:
  * 1. Light/Dark set at root, Replicant is a section of the page
  * 2. Replicant set at root, Light/Dark for different sections of the page
  * 3. Replicant set at root, Dark set at root or close to it, Light for a section to override it
  * -- NOTE: flipflopping overrides handled for us by customProps
  * 4. Replicant and Light/Dark set at the same level to specify a specific version
  * 5. White/Light/Black scrim used instead of colorscheme ???
 */
 /**
  * User Preference for Dark Mode
  * **** PROTOTYPE CODE ****
  *
  * Please note, Dark mode support is provided as-is, no-guarantees,
  * and is subject to unannounced changes. Use at your own risk.
  */
 @media (prefers-color-scheme: dark) {
   .tds-theme--replicant.tds--supports-darkmode:not([class*='tds-colorscheme--']) {
     /* Colors */
     --tds-color--primary: var(--tds-color--white);
     --tds-color--primary-highlight: var(--tds-color--white);
     --tds-color--secondary: var(--tds-color--white);
     --tds-color--tertiary: transparent;
     --tds-dialog--background-color: var(--tds-color--black);

     /* Body copy */
     --tds-text--color: var(--tds-color--grey45);
     --tds-text--color--light: var(--tds-color--grey35);
   }

   .tds-theme--replicant.tds--supports-darkmode:not([class*='tds-scrim--']):not([class*='tds-colorscheme--']) {
     background-color: var(--tds-color--black);
   }
 }
 /* Light colorscheme should also be the default */
 .tds-theme--replicant,
 .tds-theme--replicant .tds-scrim--white,
 .tds-theme--replicant .tds-scrim--light,
 .tds-scrim--white .tds-theme--replicant,
 .tds-scrim--light .tds-theme--replicant,
 .tds-theme--replicant.tds-scrim--white,
 .tds-theme--replicant.tds-scrim--light,
 .tds-colorscheme--light .tds-theme--replicant,
 .tds-theme--replicant.tds-colorscheme--light,
 .tds-theme--replicant .tds-colorscheme--light {
   /* Colors */
   --tds-color--primary: var(--tds-color--black);
   --tds-color--primary-highlight: var(--tds-color--black);
   --tds-color--secondary: var(--tds-color--black);
   --tds-color--tertiary: transparent;
 }
 .tds-colorscheme--dark .tds-theme--replicant,
 .tds-theme--replicant .tds-scrim--black,
 .tds-scrim--black .tds-theme--replicant,
 .tds-theme--replicant.tds-scrim--black,
 .tds-theme--replicant.tds-colorscheme--dark,
 .tds-theme--replicant .tds-colorscheme--dark {
   /* Colors */
   --tds-color--primary: var(--tds-color--white);
   --tds-color--primary-highlight: var(--tds-color--white);
   --tds-color--secondary: var(--tds-color--white);
   --tds-color--tertiary: transparent;
   --tds-dialog--background-color: var(--tds-color--black);

   /* Body copy */
   --tds-text--color: var(--tds-color--grey45);
   --tds-text--color--light: var(--tds-color--grey35);
   --tds-text--color--placeholder: var(--tds-color--grey45);
 }
 @-webkit-keyframes tds-flicker-on--soft {
   0% {
     opacity: 0;
   }

   8% {
     opacity: 0.5;
   }

   16% {
     opacity: 0;
   }

   24% {
     opacity: 0.5;
   }

   48% {
     opacity: 0;
   }

   100% {
     opacity: 1;
   }
 }
 @keyframes tds-flicker-on--soft {
   0% {
     opacity: 0;
   }

   8% {
     opacity: 0.5;
   }

   16% {
     opacity: 0;
   }

   24% {
     opacity: 0.5;
   }

   48% {
     opacity: 0;
   }

   100% {
     opacity: 1;
   }
 }
 @-webkit-keyframes tds-flicker--soft {
   0% {
     opacity: 1;
   }

   8% {
     opacity: 0.75;
   }

   16% {
     opacity: 1;
   }

   24% {
     opacity: 0.75;
   }

   32% {
     opacity: 1;
   }

   40% {
     opacity: 0.75;
   }

   48% {
     opacity: 1;
   }

   100% {
     opacity: 1;
   }
 }
 @keyframes tds-flicker--soft {
   0% {
     opacity: 1;
   }

   8% {
     opacity: 0.75;
   }

   16% {
     opacity: 1;
   }

   24% {
     opacity: 0.75;
   }

   32% {
     opacity: 1;
   }

   40% {
     opacity: 0.75;
   }

   48% {
     opacity: 1;
   }

   100% {
     opacity: 1;
   }
 }
 :is(.tds-colorscheme--dark, .tds-scrim--black) .tds-theme--replicant .tds-date-picker,
 .tds-theme--replicant :is(.tds-colorscheme--dark, .tds-scrim--black) .tds-date-picker,
 .tds-theme--replicant:is(.tds-colorscheme--dark, .tds-scrim--black) .tds-date-picker {
   --tds-date-selected--color: var(--tds-color--grey20);
 }
 /* RR Theme Overrides
  * Default theme in v7, provided as a specialized theme in v5 and v6
  * Start with updating tokens
 ----------------------------------------------------------------------------- */
 .tds-theme--v7 {
   --tds-border-radius--card: var(--tds-size--half);
   --tds-border-radius--card--dense: var(--tds-size--half);
   --tds-border-radius--form-item: var(--tds-size--half);
   --tds-border-radius--pill: var(--tds-size--half);
 }
 /* @import url(https://www.tesla.com/sites/all/themes/custom/tesla_theme/design-system/5.5.0/themes/factory.css); */
 /* Components */
 /* TDS Banner
  * -- Intended for use with tds--padding and a scrim */
 :root,
 .tds-component-preview {
   --tds-banner--padding: var(--tds-size--2x);
 }
 .tds-banner {
   -webkit-backdrop-filter: blur(4px);
           backdrop-filter: blur(4px);
   background-color: var(--tds-scrim--background, rgba(128, 128, 128, 0.125));
   inline-size: 100%;
   padding: var(--tds-banner--padding);
   text-align: center;
 }
 :root,
 .tds-component-preview {
   --tds-btn--font-size: var(--tds-font-size--20);
 }
 /* In Arabic, the font in the button is too small. */
 [lang='ar-AE'],
 html[lang='ar-AE'],
 [lang='ar-AE'] body {
   --tds-btn--font-size: var(--tds-font-size--30);
 }
 button {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
   background-color: transparent;
   border: none;
   color: inherit;
   padding: 0;
 }
 [role='button'] {
   cursor: pointer;
 }
 /* Base Button */
 .tds-btn {
   --tds-btn--background-color: var(--tds-color--primary);
   --tds-btn--border-color: transparent;
   --tds-btn--border-radius: var(--tds-border-radius--pill);

   /* Probably generic pill styles, cross-reference with tds-btn */
   align-items: center;
   block-size: var(--tds-height--pill);
   border-radius: var(--tds-btn--border-radius);
   color: var(--tds-color--white);
   display: inline-flex;
   font-family: var(--tds-font-family--combined);
   font-size: var(--tds-btn--font-size);
   font-weight: var(--tds-font-weight--medium);
   justify-content: center;
   line-height: 1.2;
   padding: var(--tds-size--half) var(--tds-size--3x);
   position: relative;
   text-align: center;

   /* Button-specific styles */
   text-transform: uppercase;
   border: var(--tds-border-width--large) solid var(--tds-btn--border-color);
   background-color: var(--tds-btn--background-color);
   transition: border-color 0.33s ease, background-color 0.33s ease, color 0.33s ease;
 }
 button.tds-btn {
   vertical-align: middle;
 }
 /* Widths */
 /* TODO: Should we define specific widths? */
 @media (min-width: 600px) {
   .tds-btn {
     inline-size: auto;
   }

   .tds-btn--width-full {
     inline-size: 100%;
     inline-size: -webkit-fill-available;
   }
 }
 @media (max-width: 599px) {
   .tds-btn {
     inline-size: 100%;
     inline-size: -webkit-fill-available;
   }

   .tds-btn--width-auto {
     inline-size: auto;
   }
 }
 /* Sizes */
 .tds-btn--small {
   --tds-height--pill: 28px;

   font-size: 10px;
 }
 .tds-btn--medium {
   --tds-height--pill: var(--tds-size--4x);
 }
 .tds-btn--large {
   --tds-height--pill: var(--tds-size--5x);
 }
 /* Variants */
 .tds-btn--secondary {
   --tds-btn--background-color: transparent;
   --tds-btn--border-color: var(--tds-color--secondary);

   color: var(--tds-color--secondary);
 }
 .tds-btn--tertiary {
   --tds-btn--background-color: var(--tds-color--tertiary);

   color: var(--tds-text--color);
 }
 /* TODO: Deprecated; Remove in TDS 6 */
 .tds-btn--blur {
   --tds-btn--background-color: hsla(255, 255, 255, 0.1);

   -webkit-backdrop-filter: blur(4px);

           backdrop-filter: blur(4px);
   color: var(--tds-text--color);
 }
 /* TODO: Deprecated; Remove in TDS 6 */
 .tds-btn--semitransparent {
   opacity: var(--tds-opacity--70);
 }
 /* Hover */
 :is(button, .tds-btn):not([disabled], .tds--disabled):is(:hover, .tds--hover) {
   cursor: pointer;
 }
 .tds-btn:not([disabled], .tds--disabled):is(:hover, .tds--hover) {
   --tds-btn--background-color: var(--tds-color--primary-highlight);
 }
 /* Focus */
 .tds-btn:is(:focus, .tds--focus) {
   box-shadow: inset 0 0 0 var(--tds-border-width--medium);
   outline: none;
 }
 .tds-btn--secondary:not([disabled], .tds--disabled):is(:hover, .tds--hover, :focus, .tds--focus) {
   --tds-btn--background-color: var(--tds-color--secondary-highlight);

   color: var(--tds-color--inverse);
 }
 .tds-btn--tertiary:not([disabled], .tds--disabled):is(:hover, .tds--hover) {
   --tds-btn--background-color: var(--tds-color--tertiary-highlight);
 }
 .tds-btn--blur:not([disabled], .tds--disabled):is(:hover, .tds--hover) {
   --tds-btn--background-color: hsla(255, 255, 255, 0.2);
 }
 /* Icon support */
 .tds-btn > .tds-icon--inline:first-child {
   -webkit-margin-start: calc(var(--tds-size--1x) * -1);
           margin-inline-start: calc(var(--tds-size--1x) * -1);
 }
 .tds-btn > .tds-icon--inline:last-child {
   -webkit-margin-end: calc(var(--tds-size--1x) * -1);
           margin-inline-end: calc(var(--tds-size--1x) * -1);
 }
 /* -- TDS Button -- Tile Variant from TDS Inspo Design
  * TODO: Move this to prototypes
 ----------------------------------------------------------------------------- */
 .tds-btn--tile-container {
   --tds-tile-spacer: var(--tds-size--4x);

   margin: var(--tds-size--3x) 0;
   position: relative;
 }
 .tds-btn.tds-btn--tile {
   padding: var(--tds-size--8x);
   border-radius: 10px;
   background: var(--tds-color--grey70);
   color: #333;
   inline-size: 100%;
   box-shadow: 0 0 0 0 transparent;
   transition: box-shadow 0.5s cubic-bezier(0.5, 0, 0, 0.75);
 }
 @media (min-width: 600px) {
   .tds-btn.tds-btn--tile {
     min-inline-size: 300px;
     max-inline-size: 400px;
     inline-size: auto;
     -webkit-margin-end: var(--tds-tile-spacer);
             margin-inline-end: var(--tds-tile-spacer);
   }
 }
 /* If within a container, make the whole tile clickable */
 .tds-btn--tile-container .tds-btn.tds-btn--tile {
   /* Adjust the button so that the overlay */
   -webkit-margin-start: 0;
           margin-inline-start: 0;
   position: static;
 }
 .tds-btn.tds-btn--tile:is(:hover, .tds--hover) {
   box-shadow: 0 var(--tds-size--3x) var(--tds-size--4x) 0 var(--tds-color--grey50);
 }
 .tds-btn.tds-btn--tile:is(:focus, .tds--focus) {
   box-shadow:
     0 var(--tds-size--3x) var(--tds-size--4x) 0 var(--tds-color--grey50),
     inset 0 0 0 2px var(--tds-color--grey70),
     inset 0 0 0 4px var(--tds-color--grey50);
   outline: none;
 }
 .tds-btn--tile-container .tds-btn.tds-btn--tile::before {
   bottom: 0;
   content: '';
   display: block;
   left: 0;
   position: absolute;
   right: var(--tds-tile-spacer);
   top: 0;
 }
 .tds-btn--tile-description {
   color: var(--tds-color--grey40);
   max-inline-size: 300px;
   padding: var(--tds-size--1x);
 }
 /* Add spacing when the description is properly placed after a tile */
 .tds-btn--tile + .tds-btn--tile-description {
   -webkit-margin-before: var(--tds-size--4x);
           margin-block-start: var(--tds-size--4x);
 }
 .tds-btn--tile-description::before {
   background-color: var(--tds-color--grey50);
   block-size: 2px;
   content: '';
   display: block;
   inline-size: var(--tds-size--2x);
   -webkit-margin-after: var(--tds-size--2x);
           margin-block-end: var(--tds-size--2x);
 }
 .tds-btn_group {
   align-items: center;
   display: grid;
   gap: var(--tds-size--2x) var(--tds-size--3x);
   grid-template-rows: repeat(auto-fit, minmax(0, 1fr));
   justify-content: stretch;

   /* TODO: Remove down the road when scope of layout responsibilities moves more towards containers */
   margin: var(--tds-size--2x) 0;
 }
 /* Layouts */
 @media (max-width: 599px) {
   .tds-btn_group {
     grid-template-rows: repeat(auto-fit, minmax(0, 1fr));
   }

   .tds-btn_group--horizontal {
     grid-template-rows: none;
     grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
   }
 }
 @media (min-width: 600px) {
   .tds-btn_group {
     grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
   }

   .tds-btn_group--vertical {
     grid-template-columns: none;
     grid-template-rows: repeat(auto-fit, minmax(0, 1fr));
   }
 }
 /* Variants */
 .tds-btn_group--grouped {
   gap: 0;
   grid-auto-flow: column;
 }
 /* Note: borders do not yet support logical props */
 .tds-btn_group--grouped > .tds-btn {
   border-inline-end-width: 0;
   border-inline-start-width: 0;
   border-radius: 0;
 }
 .tds-btn_group--grouped > .tds-btn:first-child {
   border-inline-start-width: var(--tds-border-width--large);
   border-radius: var(--tds-btn--border-radius) 0 0 var(--tds-btn--border-radius);
 }
 .tds-btn_group--grouped > .tds-btn:last-child {
   border-inline-end-width: var(--tds-border-width--large);
   border-radius: 0 var(--tds-btn--border-radius) var(--tds-btn--border-radius) 0;
 }
 [dir='rtl'] .tds-btn_group--grouped > .tds-btn:first-child {
   border-radius: 0 var(--tds-btn--border-radius) var(--tds-btn--border-radius) 0;
 }
 [dir='rtl'] .tds-btn_group--grouped > .tds-btn:last-child {
   border-radius: var(--tds-btn--border-radius) 0 0 var(--tds-btn--border-radius);
 }
 .tds-btn_group > .tds-link {
   justify-self: center;
 }
 .tds-card {
   --tds-card--padding: var(--tds-padding--card);
   --tds-card--cancel-padding: calc(var(--tds-card--padding) * -1);
   --tds-card--gap: var(--tds-card--padding);
   --tds-card--width: calc(75ch + (var(--tds-padding--card--dense) * 2));

   display: flex;
   max-inline-size: var(--tds-card--width);
   overflow: hidden;
   transition: background-color 0.33s ease;
 }
 .tds-card:not(.tds-card--open) {
   background-color: var(--tds-color--tertiary);
   border-radius: var(--tds-border-radius--card);
 }
 .tds-card:not(.tds-card--open).tds-card--dense {
   --tds-card--padding: var(--tds-padding--card--dense);

   border-radius: var(--tds-border-radius--card--dense);
 }
 .tds-card--highlighted {
   box-shadow: var(--tds-box-shadow--medium);
 }
 /* AWSM-4861 calls for cards on white scrims to be white  */
 .tds-scrim--white .tds-card--highlighted {
   background-color: var(--tds-color--white);
 }
 .tds-card-asset {
   display: flex;
 }
 .tds-card--layout-vertical {
   flex-direction: column;
 }
 .tds-card-body {
   padding: var(--tds-card--padding);
 }
 .tds-card img {
   inline-size: 100%;
 }
 /* Note: locale selector headings depend on .tds-card override padding */
 .tds-card *:is(h1, h2, h3, h4, h5, h6, .tds-text--h1, .tds-text--h1-alt, .tds-text--h2, .tds-text--h3, .tds-text--h4, .tds-text--h5, .tds-text--h6, .tds-text--caption-header) {
   -webkit-padding-before: 0;
           padding-block-start: 0;
 }
 .tds-card--open :is(.tds-card-asset, .tds-card-body) {
   padding: 0;
 }
 .tds-card:not(.tds-card--open) > .tds-icon {
   -webkit-margin-before: var(--tds-card--padding);
           margin-block-start: var(--tds-card--padding);
   -webkit-margin-start: var(--tds-card--padding);
           margin-inline-start: var(--tds-card--padding);
 }
 .tds-card:not(.tds-card--open) > .tds-icon + .tds-card-body {
   -webkit-padding-start: calc(var(--tds-card--padding) / 3);
           padding-inline-start: calc(var(--tds-card--padding) / 3);
 }
 .tds-card--layout-vertical:not(.tds-card--open) > .tds-icon + .tds-card-body {
   -webkit-padding-before: calc(var(--tds-card--padding) / 3);
           padding-block-start: calc(var(--tds-card--padding) / 3);
   -webkit-padding-start: var(--tds-card--padding);
           padding-inline-start: var(--tds-card--padding);
 }
 .tds-card--open .tds-card-asset > img {
   border-radius: var(--tds-border-radius--card);
 }
 .tds-card--open:not(.tds-card--layout-vertical) .tds-card-asset + .tds-card-body,
 .tds-card--open:not(.tds-card--layout-vertical) .tds-card-body + .tds-card-asset {
   -webkit-padding-start: var(--tds-card--padding);
           padding-inline-start: var(--tds-card--padding);
 }
 .tds-card--open.tds-card--layout-vertical .tds-card-asset + .tds-card-body,
 .tds-card--open.tds-card--layout-vertical .tds-card-body + .tds-card-asset {
   -webkit-padding-before: var(--tds-card--padding);
           padding-block-start: var(--tds-card--padding);
 }
 .tds-card--open:not(.tds-card--layout-vertical) .tds-icon + .tds-card-body,
 .tds-card--open:not(.tds-card--layout-vertical) .tds-card-body + .tds-icon {
   -webkit-padding-start: calc(var(--tds-card--padding) / 3);
           padding-inline-start: calc(var(--tds-card--padding) / 3);
 }
 .tds-card--open.tds-card--layout-vertical .tds-icon + .tds-card-body,
 .tds-card--open.tds-card--layout-vertical .tds-card-body + .tds-icon {
   -webkit-padding-before: calc(var(--tds-card--padding) / 3);
           padding-block-start: calc(var(--tds-card--padding) / 3);
 }
 /* Full-width variant of card */
 .tds-card--full_width {
   --tds-card--width: 100%;
 }
 .tds-chip {
   --tds-chip--height: var(--tds-size--4x);

   align-items: center;
   background-color: var(--tds-color--tertiary);
   block-size: var(--tds-chip--height);
   border-radius: var(--tds-border-radius--pill);
   display: inline-flex;
   font-weight: var(--tds-font-weight--medium);
   justify-content: space-between;
   margin: var(--tds-size--half);
   -webkit-padding-end: var(--tds-size--half);
           padding-inline-end: var(--tds-size--half);
   -webkit-padding-start: var(--tds-size--2x);
           padding-inline-start: var(--tds-size--2x);
 }
 .tds-form-input-wrap .tds-chip {
   --tds-chip--height: calc(var(--tds-form-input--height) - var(--tds-size--1x));
   --tds-chip--inset: calc(var(--tds-form-item--indent) - var(--tds-size--half));

   background-color: var(--tds-scrim--background, --tds-color--white);
   -webkit-margin-end: var(--tds-size--1x);
           margin-inline-end: var(--tds-size--1x);
   -webkit-margin-start: calc(var(--tds-chip--inset) * -1);
           margin-inline-start: calc(var(--tds-chip--inset) * -1);
   -webkit-padding-start: var(--tds-chip--inset);
           padding-inline-start: var(--tds-chip--inset);
 }
 .tds-chip .tds-icon-btn {
   --tds-icon-btn--size: calc(var(--tds-chip--height) - var(--tds-size--1x));

   -webkit-margin-start: var(--tds-size--half);

           margin-inline-start: var(--tds-size--half);
 }
 /*
  * Override of form-input > button focus styles
  * TODO: refactor inputs to use icon-buttons in their leading/trailing spaces: AWSM-5175
  */
 .tds-chip .tds-icon-btn:focus {
   outline: none !important;
 }
 /* Copy of enterprise style for dense form items */
 .tds-form-item--dense .tds-chip {
   /* Adjust size to accomodate border width */
   --tds-chip--height: calc(var(--tds-size--3x) - 2px);

   font-size: var(--tds-font-size--20);
   line-height: var(--tds-size--4x);
   -webkit-padding-end: 0;
           padding-inline-end: 0;
 }
 .tds-form-item--dense .tds-chip .tds-icon-btn {
   --tds-icon-btn--size: var(--tds-chip--height);
 }
 /******************************************************************************
 Tesla Content Container

 Simple containers that keep any content centered and "inset" among page flow.
 Multiple sizes created for different needs, and when used consistently, will
 create harmonious content flow.
 ******************************************************************************/
 /* Default at 100% width */
 .tds-content_container {
   --tds-content_container--gutter: var(--tds-size--3x);
   --tds-content_container--inline-size: 100%;
   --tds-content_container--max_width: 100%;

   display: block;
   inline-size: var(--tds-content_container--inline-size);
   -webkit-margin-end: auto;
           margin-inline-end: auto;
   -webkit-margin-start: auto;
           margin-inline-start: auto;
   max-inline-size: var(--tds-content_container--max_width);
   -webkit-padding-end: var(--tds-content_container--gutter);
           padding-inline-end: var(--tds-content_container--gutter);
   -webkit-padding-start: var(--tds-content_container--gutter);
           padding-inline-start: var(--tds-content_container--gutter);
 }
 @media (min-width: 600px) {
   .tds-content_container {
     --tds-content_container--gutter: 36px;
   }
 }
 @media (min-width: 1200px) {
   .tds-content_container {
     --tds-content_container--gutter: var(--tds-size--6x);
   }
 }
 .tds-content_container--max_width {
   --tds-content_container--max_width: 1060px;
 }
 /******************************************************************************
  Size Modifiers - Small, Medium, and Large
 ******************************************************************************/
 /* Containers adjusted when viewport is 900px wide or larger. */
 @media (min-width: 900px) {
   .tds-content_container--small {
     --tds-content_container--inline-size: 50%;
   }

   .tds-content_container--medium {
     --tds-content_container--inline-size: 70%;
   }

   .tds-content_container--large {
     --tds-content_container--inline-size: 90%;
   }

   .tds-content_container--max_width.tds-content_container--small {
     --tds-content_container--max_width: 530px; /* 1060 * 0.5 */
   }

   .tds-content_container--max_width.tds-content_container--medium {
     --tds-content_container--max_width: 742px; /* 1060 * 0.7 */
   }

   .tds-content_container--max_width.tds-content_container--large {
     --tds-content_container--max_width: 954px; /* 1060 * 0.9 */
   }
 }
 .tds-date-picker {
   /* Fixed grid layout, per design */
   --tds-date-picker--day-font-size: var(--tds-font-size--30);
   --tds-date-picker--day-size: var(--tds-size--5x);
   --tds-date-picker--grid-size: 327px;
   --tds-date-picker--label-font-size: var(--tds-font-size--50);
   --tds-date-selected--color: var(--tds-color--white);
   --tds-day-radius: var(--tds-border-radius--circle);
   --tds-end-of-week-radius: var(--tds-size--half);

   inline-size: var(--tds-date-picker--grid-size);
 }
 .tds-date-picker--dense {
   --tds-date-picker--day-font-size: var(--tds-font-size--20);
   --tds-date-picker--day-size: var(--tds-size--4x);
   --tds-date-picker--label-font-size: var(--tds-font-size--30);

   /* Adjust to fit picker inside a tooltip (3x padding x2 sides) */
   inline-size: calc(var(--tds-date-picker--grid-size) - var(--tds-size--3x) * 2);
 }
 .tds-date-picker--range {
   --tds-date-picker--grid-gap: var(--tds-size--6x);

   display: flex;
   flex-wrap: wrap;
   gap: var(--tds-size--2x) var(--tds-date-picker--grid-gap);
 }
 .tds-date-picker--range.tds-date-picker--horizontal {
   /* Size horizontal space to 2 grids + gap */
   inline-size: calc(var(--tds-date-picker--grid-size) * 2 + var(--tds-date-picker--grid-gap));
 }
 .tds-date-picker-calendar {
   --tds-column-count: 7;

   flex-grow: 1;
 }
 .tds-date-picker-month {
   align-items: center;
   display: flex;
   flex-grow: 1;
   inline-size: 100%;
   min-block-size: var(--tds-date-picker--day-size);
 }
 .tds-date-picker-month button {
   display: flex;
   min-inline-size: calc(var(--tds-date-picker--day-size) * 1.5);
   z-index: 1;
 }
 .tds-date-picker-month button:first-child {
   justify-content: flex-end;
 }
 .tds-date-picker-month button:last-child {
   justify-content: flex-start;
 }
 .tds-date-picker-month label {
   flex-grow: 1;
   font-size: var(--tds-date-picker--label-font-size);
   font-weight: var(--tds-font-weight--medium);
   padding: 0;
   text-align: center;
 }
 .tds-date-picker-month button:not(:hover) .tds-icon {
   color: var(--tds-text--color--placeholder);
 }
 .tds-date-picker-days-label,
 .tds-date-picker-days-grid {
   align-items: center;
   display: grid;
   gap: var(--tds-size--half) 0;
   grid-template-columns: repeat(var(--tds-column-count, 7), 1fr);
   margin: var(--tds-size--1x) 0;
 }
 .tds-date-picker-days-label {
   pointer-events: none;
 }
 .tds-date-picker :focus {
   outline: none;
 }
 .tds-date-picker :focus-visible {
   outline: var(--tds-outline--focus);
   outline-offset: 2px;
 }
 /* Days */
 .tds-day {
   cursor: pointer;
   display: flex;
   justify-content: center;
   pointer-events: auto;
   position: relative;
   z-index: 1;
 }
 .tds-day--not-this-month {
   pointer-events: none;
   visibility: hidden;
 }
 /* :is(div, span) is used to create the circle for a date */
 .tds-day :is(div, span) {
   align-items: center;
   block-size: var(--tds-date-picker--day-size);
   border-radius: var(--tds-day-radius);
   display: flex;
   font-size: var(--tds-date-picker--day-font-size);
   inline-size: var(--tds-date-picker--day-size);
   justify-content: center;
 }
 .tds-day--today :is(div, span) {
   border: 1px solid var(--tds-color--tertiary-highlight);
 }
 .tds-day[disabled] {
   color: var(--tds-color--grey30);
   font-weight: var(--tds-font-weight--light);
 }
 /* stylelint-disable */
 /* stylelint treats the :where selector like a higher specificity than it really is */
 .tds-day:where(:hover, .tds-day--highlighted:not(.tds-day--between)) :is(div, span) {
   background-color: var(--tds-color--tertiary);
   border: none;
 }
 .tds-day--selected:not(.tds-day--between) :is(div, span) {
   background-color: var(--tds-color--primary);
 }
 .tds-day--selected:hover :is(div, span) {
   background-color: var(--tds-color--primary-highlight);
 }
 .tds-day--selected :is(div, span) {
   color: var(--tds-date-selected--color);
   font-weight: var(--tds-font-weight--medium);
   border: none;
   transition: background-color 0.3s ease, color 0.3s ease;
 }
 /* ::before is used to create the semi-rectangular background/link shape */
 .tds-day::before {
   background-color: var(--tds-scrim--background);
   bottom: 0;
   content: '';
   position: absolute;
   top: 0;
   z-index: -1;
 }
 .tds--indicate-focus .tds-date-picker :focus {
   outline: var(--tds-outline--focus);
   outline-offset: 2px;
 }
 .tds-date-picker :focus-visible * {
   transition: none;
 }
 .tds--indicate-focus .tds-date-picker :focus * {
   transition: none;
 }
 /* Tooltip */
 .tds-tooltip.tds-date-picker-tooltip {
   inline-size: var(--tds-date-picker--grid-size);
 }
 .tds-tooltip.tds-date-range-picker-tooltip {
   max-inline-size: calc(100vw - 48px);
 }
 .tds-date-picker--selected .tds-day--selected::before {
   background-color: var(--tds-color--primary);
   color: var(--tds-color--white);
   font-weight: var(--tds-font-weight--medium);
   transition: background-color 0.3s ease, color 0.3s ease;
 }
 .tds-date-picker--hovering .tds-day--highlighted::before,
 .tds-date-picker--hovering:not(.tds-date-picker--selected) .tds-day--selected:not(:hover):not(:hover ~ .tds-day--selected)::before {
   background-color: var(--tds-color--tertiary);
 }
 /* TODO: Convert to logical props when available in Safari: AWSM-4496 */
 .tds-day--last::before,
 .tds-day:nth-child(7n)::before {
   border-bottom-right-radius: var(--tds-end-of-week-radius);
   border-top-right-radius: var(--tds-end-of-week-radius);
 }
 .tds-day--first::before,
 .tds-day:nth-child(7n + 1)::before {
   border-bottom-left-radius: var(--tds-end-of-week-radius);
   border-top-left-radius: var(--tds-end-of-week-radius);
 }
 [dir='rtl'] .tds-day--last::before,
 [dir='rtl'] .tds-day:nth-child(7n)::before {
   border-bottom-left-radius: var(--tds-end-of-week-radius);
   border-radius: 0;
   border-top-left-radius: var(--tds-end-of-week-radius);
 }
 [dir='rtl'] .tds-day--first::before,
 [dir='rtl'] .tds-day:nth-child(7n + 1)::before {
   border-bottom-right-radius: var(--tds-end-of-week-radius);
   border-radius: 0;
   border-top-right-radius: var(--tds-end-of-week-radius);
 }
 .tds-day--start:not(.tds-day--highlighted ~ .tds-day--start)::before {
   left: 50%;
   right: 0;
 }
 .tds-day--between::before {
   left: 0;
   right: 0;
 }
 .tds-day--highlighted:not(.tds-day--between)::before,
 .tds-day--end::before {
   left: 0;
   right: 50%;
 }
 [dir='rtl'] .tds-day--start:not(.tds-day--highlighted ~ .tds-day--start)::before {
   left: 0;
   right: 50%;
 }
 [dir='rtl'] .tds-day--highlighted:not(.tds-day--between)::before,
 [dir='rtl'] .tds-day--end::before {
   left: 50%;
   right: 0;
 }
 .tds-day--start.tds-day--end::before {
   display: none;
 }
 .tds-day--error :is(div, span) {
   background-color: transparent;
   color: inherit;
   box-shadow: inset 0 0 0 3px var(--tds-color--red10);
 }
 /* Import order currently matters here for form items as some custom props are used
    throughout the suite of files and therefore added to this form.css "root" file
 */
 /* --- Form Item Area
 --------------------------------------------- */
 .tds-form-item {
   --tds-form-input--background-color: var(--tds-color--tertiary);
   --tds-form-input--border-color: var(--tds-color--tertiary);
   --tds-form-input--height: calc(var(--tds-height--pill) - 2px);
   --tds-form-item--indent: 20px;
   --tds-form-item--spacer: var(--tds-size--1x);
   --tds-form-item--grid-template-areas: 'label' 'caption' 'input' 'feedback';
   --tds-form-item--grid-template-rows: min-content minmax(0, auto) minmax(var(--tds-form-input--height), auto) minmax(0, auto);

   align-items: flex-end;
   color: var(--tds-text--color);
   display: grid;
   gap: var(--tds-size--half) 0;
   grid-template: minmax(0, -webkit-max-content);
   grid-template: minmax(0, max-content);
   grid-template-areas: var(--tds-form-item--grid-template-areas);
   grid-template-rows: var(--tds-form-item--grid-template-rows);
   inline-size: 100%;
   -webkit-padding-after: var(--tds-form-item--spacer);
           padding-block-end: var(--tds-form-item--spacer);
   -webkit-padding-before: var(--tds-form-item--spacer);
           padding-block-start: var(--tds-form-item--spacer);
   position: relative;
 }
 /* Modifiers */
 .tds-form-item--choice {
   --tds-form-input--background-color: transparent;
   --tds-form-input--border-color: var(--tds-text--color--light);
   --tds-form-input--border-radius: var(--tds-size--half);
   --tds-form-input--height: var(--tds-size--3x);
   --tds-form-item--grid-template-areas:
     'input label'
     '. caption'
     '. feedback';
   --tds-form-item--grid-template-rows: repeat(3, minmax(0, auto));
   --tds-form-item--indent: 0;

   align-content: center;
   align-items: center;
   -moz-column-gap: var(--tds-size--1x);
        column-gap: var(--tds-size--1x);
   justify-content: flex-start;
 }
 .tds-form-item--dense.tds-form-item--choice {
   --tds-form-input--height: var(--tds-size--2x);

   grid-column-gap: 12px;
 }
 .tds-fieldset .tds-form-item--choice {
   --tds-form-item--spacer: var(--tds-size--half);

   /* Compensate for extra empty feedback row that causes extra gap */
   -webkit-margin-after: var(--tds-size--half);
           margin-block-end: var(--tds-size--half);
   row-gap: 0;
 }
 .tds-form-item--outdent {
   --tds-form-item--indent: 0;
 }
 .tds-form-item--file-upload {
   --tds-form-item--grid-template-areas: 'label' 'caption' 'files' 'feedback' 'input';
   --tds-form-item--grid-template-rows: min-content minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto);
 }
 /* States */
 .tds-form-item--error,
 .tds-form-item--error .tds-form-item--choice {
   --tds-form-input--border-color: var(--tds-color--error);
 }
 /* Wrapper for Form Label and Tooltip */
 .tds-form-label-wrap {
   --tds-form-label--color: var(--tds-text--color--light);

   align-items: center;
   display: flex;
   grid-area: label;
   line-height: var(--tds-line-height--50);
   -webkit-padding-end: var(--tds-size--1x);
           padding-inline-end: var(--tds-size--1x);
   -webkit-padding-start: var(--tds-form-item--indent);
           padding-inline-start: var(--tds-form-item--indent);
   text-align: start;
 }
 /* Form Label */
 .tds-form-label {
   --tds-form-label--font-size: var(--tds-font-size--30);

   align-self: center;
   align-content: flex-end;
   color: var(--tds-form-label--color);
   transition: color 0.33s ease;
 }
 /* Only pointer the label if it's actually connected to an active input */
 .tds-form-label[for] {
   cursor: pointer;
 }
 .tds-form-item--readonly .tds-form-label[for] {
   cursor: text;
 }
 .tds-form-item--choice .tds-form-label {
   align-items: center;
   grid-template-columns: minmax(-webkit-min-content, auto);
   grid-template-columns: minmax(min-content, auto);
 }
 .tds-form-input--disclaimer + .tds-form-label {
   --tds-form-label--font-size: var(--tds-font-size--20);
 }
 .tds-form-item--choice:hover .tds-form-label,
 .tds-form-item--choice .tds-form-input:checked + .tds-form-label,
 .tds-form-item--choice .tds-form-input:checked + .tds-form-label-wrap {
   --tds-form-label--color: var(--tds-color--secondary);
 }
 /* Label inner text */
 .tds-form-label-text {
   grid-area: label-text;
   color: var(--tds-form-label--color);
   font-size: var(--tds-form-label--font-size);
   line-height: var(--tds-line-height--unitless);
   font-weight: var(--tds-font-weight--medium);
   display: inline-block;
   transition: color 0.33s ease;
 }
 .tds-form-label-caption {
   color: var(--tds-text--color--light);
   font-size: var(--tds-font-size--20);
   font-weight: var(--tds-font-weight--book);
   grid-area: caption;
   -webkit-padding-end: var(--tds-size--1x);
           padding-inline-end: var(--tds-size--1x);
   -webkit-padding-start: var(--tds-form-item--indent);
           padding-inline-start: var(--tds-form-item--indent);
 }
 .tds-form-item--choice .tds-form-label-caption {
   /* add margin on top of grid gap so that total space between form-items is --tds-size--1x */
   margin-block: calc(var(--tds-size--1x) * -1) var(--tds-size--half);

   /* cancel out grid gap between the label and caption */
   white-space: nowrap;
 }
 /* --- Originally was a `span`, but for semantics and accessibility,
    we cannot have a block-level element inside an inline element.
  ------------------------------------------------------------------------------------ */
 .tds-form-label-tooltip {
   display: inline;
   -webkit-margin-start: 2px;
           margin-inline-start: 2px; /* TODO: TDS 5 (or 6?) refactor this away and use flexbox gap (AWSM-4434) */
 }
 .tds-form-label-wrap .tds-tooltip-wrapper .tds-icon {
   color: var(--tds-form-label--color);
 }
 /* Input wrapper */
 .tds-form-input-wrap {
   inline-size: 100%;
   grid-area: input;
   display: grid;
   grid: 'leading input trailing' / -webkit-max-content 1fr -webkit-max-content;
   grid: 'leading input trailing' / max-content 1fr max-content;
   gap: 0;
   justify-items: stretch;
   align-content: center;
   align-items: center;
   position: relative;
   -webkit-padding-start: var(--tds-form-item--indent);
           padding-inline-start: var(--tds-form-item--indent);
   -webkit-padding-end: var(--tds-form-item--indent);
           padding-inline-end: var(--tds-form-item--indent);
   background-color: var(--tds-form-input--background-color);
   border: 1px solid var(--tds-form-input--border-color);
   border-radius: var(--tds-border-radius--form-item);
   transition: background-color 0.25s ease, border-color 0.25s ease;
 }
 /* Modifiers */
 .tds-form-item--textarea .tds-form-input-wrap {
   padding: 0;
 }
 .tds-form-item--date .tds-form-input-wrap,
 .tds-form-item--select .tds-form-input-wrap {
   -webkit-padding-end: 0;
           padding-inline-end: 0;
 }
 .tds-form-item--text [type='date']::-webkit-datetime-edit {
   align-items: center;
   display: grid !important;
   font-family: var(--tds-font-family--combined);
 }
 /* States */
 .tds-form-input-wrap:hover {
   --tds-form-input--border-color: var(--tds-color--tertiary-highlight);
 }
 .tds-form-input-wrap:focus-within {
   --tds-form-input--border-color: var(--tds-color--secondary-accent);
 }
 .tds-form-item--readonly .tds-form-input-wrap,
 .tds-form-item--readonly .tds-form-input-wrap:focus-within,
 .tds-form-item--readonly .tds-form-input-wrap:hover {
   --tds-form-input--background-color: transparent;
   --tds-form-input--border-color: var(--tds-color--hairline);
 }
 .tds-form-item--error .tds-form-input-wrap:hover {
   --tds-form-input--border-color: var(--tds-color--error);
 }
 .tds-form-item--error .tds-form-input-wrap:focus-within:hover {
   --tds-form-input--border-color: var(--tds-color--tertiary-highlight);
 }
 /* Input */
 .tds-form-input,
 .tds-form-item--text [type='date']::-webkit-datetime-edit {
   --tds-form-input--font-size: var(--tds-size--2x);

   block-size: var(--tds-form-input--height);
   grid-area: input;
   display: block;
   -webkit-appearance: none;
           appearance: none;
   border: none;
   background-color: transparent;
   padding: 0;
   margin: 0;
   font-size: var(--tds-form-input--font-size);
   font-weight: var(--tds-font-weight--medium);
   line-height: var(--tds-line-height--unitless);
   position: relative;
   box-shadow: inset 0 0 0 0 transparent;
   -webkit-transition: box-shadow 0.25s ease;
   transition: box-shadow 0.25s ease;
   color: var(--tds-text--color);
 }
 @media (min-width: 600px) {
   .tds-form-input,
   .tds-form-item--text [type='date']::-webkit-datetime-edit {
     --tds-form-input--font-size: var(--tds-font-size--30);
   }
 }
 /* Chrome Fix: In grid-within-grid in Chromium,
 inputs force themselves to 100% width if not explicitly defined
 AND will not acknowledge tokens like -webkit-fill-available */
 input.tds-form-input,
 select.tds-form-input {
   inline-size: 100%;
   text-overflow: ellipsis;
 }
 /* Modifiers */
 textarea.tds-form-input {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
   block-size: auto;
   min-block-size: calc(var(--tds-form-input--height) * 3);
   padding: calc(var(--tds-form-item--indent) / 2) var(--tds-form-item--indent);
   resize: none;
 }
 .tds-form-input:-moz-placeholder-shown {
   color: var(--tds-text--color--placeholder);
 }
 .tds-form-input:-ms-input-placeholder {
   color: var(--tds-text--color--placeholder);
 }
 .tds-form-input:placeholder-shown {
   color: var(--tds-text--color--placeholder);
 }
 .tds-form-item--choice .tds-form-input {
   inline-size: var(--tds-form-input--height);
   display: flex;
   border: 1px solid var(--tds-form-input--border-color);
   border-radius: var(--tds-form-input--border-radius);
   align-content: center;
   justify-content: center;
   align-items: center;
   outline: none;
 }
 .tds-form-item--select .tds-form-input {
   -webkit-padding-end: var(--tds-size--5x);
           padding-inline-end: var(--tds-size--5x);
 }
 .tds-form-item--readonly .tds-form-input {
   color: var(--tds-color--grey40);
 }
 [type='checkbox'].tds-form-input {
   --tds-form-input--check-height: 16px;
 }
 [type='radio'].tds-form-input {
   --tds-form-input--border-radius: 100%;
   --tds-form-input--check-height: 10px;
 }
 .tds-form-input--disclaimer {
   --tds-form-input--height: 22px;
 }
 /* Dark Scrim component-level override as the component currently
  * relies on a transparent background color by default even
   * on dark scrims which doesn't vibe well with Firefox and leads to a
  * transparent background with light text that is unreadable.
 */
 :is(.tds-colorscheme--dark, .tds-scrim--black) .tds-form-input:focus {
   background-color: var(--tds-scrim--background);
 }
 /* States */
 .tds-form-input:-webkit-autofill {
   -webkit-transition: background-color 9999s ease 9999s, color 9999s ease 9999s;
   transition: background-color 9999s ease 9999s, color 9999s ease 9999s;
 }
 /* Set auto-fill to match default input text */
 .tds-form-input:-webkit-autofill::first-line {
   font-family: var(--tds-font-family--combined);
   font-size: var(--tds-form-input--font-size);
   font-weight: var(--tds-font-weight--medium);
   line-height: var(--tds-line-height--unitless);
 }
 .tds-form-input:focus {
   outline: 0;
 }
 .tds-form-item--choice .tds-form-input:not([disabled]),
 .tds-form-item--date .tds-form-input:not([disabled]),
 .tds-form-item--select .tds-form-input:not([disabled]),
 .tds-form-item--dropdown .tds-form-input:not([disabled]) {
   cursor: pointer;
 }
 textarea.tds-form-input:hover,
 textarea.tds-form-input:focus,
 textarea.tds-form-input:active {
   resize: vertical;
 }
 .tds-form-item--choice .tds-form-input:focus {
   --tds-form-input--border-color: var(--tds-color--secondary);

   box-shadow: inset 0 0 0 1px var(--tds-color--secondary);
 }
 /* Check/Fill for Choices */
 .tds-form-item--choice .tds-form-input::after {
   content: '';
   display: block;
   inline-size: var(--tds-form-input--check-height);
   block-size: var(--tds-form-input--check-height);
   border-radius: var(--tds-form-input--border-radius);
   transform: scale(0);
   transition: transform 0.33s var(--tds-bezier), border-color 0.33s var(--tds-bezier);
 }
 .tds-form-item--choice .tds-form-input:checked::after {
   transform: scale(1);
 }
 .tds-form-item--choice [type='checkbox']::after {
   --tds-form-input--border-radius: 0;

   background-image: var(--tds-background-image--check);
   background-repeat: no-repeat;
 }
 .tds-form-item--choice [type='radio']::after {
   background-color: var(--tds-color--secondary);
 }
 .tds-form-item--choice [type='radio']::after,
 .tds-form-item--choice [type='radio']:checked::after {
   --tds-form-input--border-color: var(--tds-color--secondary);
 }
 /* Dense choice to match enterprise styles */
 .tds-form-item--dense.tds-form-item--choice .tds-form-input {
   --tds-form-input--font-size: var(--tds-font-size--20);
   --tds-form-input--height: var(--tds-size--4x);
 }
 .tds-form-item--dense [type='checkbox'].tds-form-input {
   --tds-form-input--check-height: 8px;
 }
 .tds-form-item--dense [type='radio'].tds-form-input {
   --tds-form-input--check-height: 6px;
 }
 .tds-form-item--dense.tds-form-item--choice [type='checkbox']::after {
   background-position: 0 0;
   background-size: 20px;
 }
 /* Leading & Trailing */
 .tds-form-input-leading,
 .tds-form-input-trailing {
   align-items: center;
   block-size: 100%;
   display: flex;
 }
 .tds-form-input-leading {
   grid-area: leading;
 }
 .tds-form-input-trailing {
   grid-area: trailing;
 }
 .tds-form-item--dropdown .tds-form-input-trailing {
   cursor: pointer;
 }
 .tds-form-input-leading button,
 .tds-form-input-trailing button {
   display: flex;
 }
 .tds-form-input-leading button:focus,
 .tds-form-input-trailing button:focus {
   outline: none;
 }
 .tds-form-input-leading button:focus-visible,
 .tds-form-input-trailing button:focus-visible {
   outline: var(--tds-outline--focus);
   outline-offset: 2px;
 }
 .tds-form-input[inputmode='tel'] ~ .tds-form-input-leading {
   -webkit-margin-end: var(--tds-size--half);
           margin-inline-end: var(--tds-size--half);
 }
 .tds--indicate-focus .tds-form-input-leading button:focus,
 .tds--indicate-focus .tds-form-input-trailing button:focus {
   outline: var(--tds-outline--focus);
   outline-offset: 2px;
 }
 /* TODO: Post-custom dropdowns this can likely be refactored away */
 .tds-form-item--date .tds-form-input-trailing,
 .tds-form-item--select .tds-form-input-trailing {
   align-items: center;
   block-size: 100%;
   display: flex;
   justify-content: center;
   pointer-events: none;
   position: absolute;
   right: var(--tds-size--2x);
 }
 [dir='rtl'] .tds-form-item--date .tds-form-input-trailing,
 [dir='rtl'] .tds-form-item--select .tds-form-input-trailing {
   left: var(--tds-size--2x);
   right: initial;
 }
 .tds-form-label-files {
   grid-area: files;
   overflow: hidden;
   -webkit-padding-end: var(--tds-size--1x);
           padding-inline-end: var(--tds-size--1x);
   -webkit-padding-start: var(--tds-form-item--indent);
           padding-inline-start: var(--tds-form-item--indent);
 }
 .tds-list-item--file {
   --tds-list-item--margin-block: calc(var(--tds-size--1x) / 4);

   align-items: center;
   display: flex;
   justify-content: space-between;
   max-inline-size: unset;
   -webkit-padding-after: calc(var(--tds-size--1x) / 4);
           padding-block-end: calc(var(--tds-size--1x) / 4);
   -webkit-padding-before: calc(var(--tds-size--1x) / 4);
           padding-block-start: calc(var(--tds-size--1x) / 4);
 }
 .tds-list-item--file > span {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 .tds-list-item--file > button {
   align-items: center;
   background: none;
   border: none;
   cursor: pointer;
   display: flex;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
 .tds-list-item--file > button .tds-icon {
   margin: 0;
 }
 .tds-list-item--file > button:focus {
   outline: var(--tds-outline--focus);
   outline-offset: 2px;
 }
 .tds-form-item--file-upload .tds-form-feedback-feedback {
   display: flex;
 }
 .tds-form-item--file-upload .tds-form-feedback-feedback .tds-icon {
   -webkit-margin-before: calc(var(--tds-size--1x) / 4);
           margin-block-start: calc(var(--tds-size--1x) / 4);
   -webkit-margin-end: var(--tds-size--half);
           margin-inline-end: var(--tds-size--half);
 }
 .tds-form-file-input-wrap {
   grid-area: input;
   -webkit-padding-before: var(--tds-size--1x);
           padding-block-start: var(--tds-size--1x);
   position: relative;
 }
 .tds-file-input {
   block-size: 1px;
   border: 0;
   clip: rect(0 0 0 0);
   -webkit-clip-path: inset(100%);
           clip-path: inset(100%);
   inline-size: 1px;
   margin: -1px;
   overflow: hidden;
   padding: 0;
   position: absolute;
   white-space: nowrap;
 }
 .tds-file-input[disabled] + .tds-btn {
   cursor: not-allowed;
   opacity: var(--tds-opacity--50);
 }
 .tds-file-input:not([disabled]):focus + .tds-btn {
   box-shadow: inset 0 0 0 var(--tds-border-width--medium);
   outline: none;
 }
 .tds-form-item--range {
   --tds-form-input--background-color: transparent;
   --tds-form-input--border-color: transparent;
   --tds-form-input--height: auto;
   --tds-form-item--indent: var(--tds-size--1x);
   --tds-range-slider--radius: 10px;
   --tds-range-slider--thumb-offset: -7px;
   --tds-range-slider--thumb-opacity: 1;
   --tds-range-slider--thumb-radius: var(--tds-size--4x);
   --tds-range-slider--thumb-size-x: var(--tds-size--3x);
   --tds-range-slider--thumb-size-y: var(--tds-size--3x);
 }
 .tds-form-item--range .tds-form-label {
   align-content: center;
   align-items: center;
   display: flex;
   flex-flow: row nowrap;
   justify-content: space-between;
 }
 .tds-form-item--range .tds-form-label-wrap {
   align-items: center;
   display: flex;
   flex-flow: row wrap;
   justify-content: space-between;
 }
 .tds-form-item--range .tds-form-label-wrap.tds-form-label-wrap--horizontal {
   --tds-form-item--grid-template-areas: 'label input';
 }
 .tds-form-item--range .tds-form-label-caption {
   direction: initial;
   font-variant: tabular-nums;
   text-align: end;
   white-space: nowrap;
 }
 .tds-form-item--range .tds-form-input-wrap {
   -webkit-padding-end: 0;
           padding-inline-end: 0;
   -webkit-padding-start: 0;
           padding-inline-start: 0;
 }
 .tds-form-item--range .tds-form-input-wrap:hover {
   --tds-form-input--border-color: transparent;
 }
 .tds-form-item--range .tds-form-input {
   --tds-range-slider--track-height: 10px;
   --tds-form-input--height: var(--tds-range-slider--track-height);
   --tds-range-slider--thumb-radius: var(--tds-border-radius--pill);

   cursor: ew-resize;
   z-index: 1;
 }
 /* Browser-specific semi-duplicated styles
  * Once browsers agree on a standard we can consolidate these */
 .tds-form-item--range .tds-form-input::-webkit-slider-runnable-track {
   background-color: var(--tds-color--grey50);
   block-size: var(--tds-form-input--height);
   border: none;
   border-radius: var(--tds-range-slider--radius);
   inline-size: 100%;
 }
 .tds-form-item--range .tds-form-input::-moz-range-track {
   background-color: var(--tds-color--grey50);
   block-size: var(--tds-form-input--height);
   border: none;
   border-radius: var(--tds-range-slider--radius);
   inline-size: 100%;
 }
 .tds-form-item--range .tds-form-input::-webkit-slider-thumb {
   -webkit-appearance: none;
           appearance: none;
   background-color: var(--tds-color--white);
   block-size: var(--tds-range-slider--thumb-size-y);
   border: none;
   border-radius: var(--tds-range-slider--thumb-radius);
   box-shadow: 0 0 0 1px var(--tds-color--grey50);
   inline-size: var(--tds-range-slider--thumb-size-x);
   -webkit-margin-before: var(--tds-range-slider--thumb-offset);
           margin-block-start: var(--tds-range-slider--thumb-offset);
   opacity: var(--tds-range-slider--thumb-opacity, 1);
   position: relative;
   z-index: 40;
 }
 .tds-form-item--range .tds-form-input::-moz-range-thumb {
   background-color: var(--tds-color--white);
   block-size: var(--tds-range-slider--thumb-size-y);
   border: none;
   border-radius: var(--tds-range-slider--thumb-radius);
   box-shadow: 0 0 0 1px var(--tds-color--grey50);
   inline-size: var(--tds-range-slider--thumb-size-x);
   margin-block-start: var(--tds-range-slider--thumb-offset);
   opacity: var(--tds-range-slider--thumb-opacity, 1);
   z-index: 2;
 }
 /* Target Webkit browsers only */
 .tds-form-input--range--progress {
   --tds-range-progress-fill: 100%;

   position: relative;
 }
 .tds-form-input--range--progress .tds-form-input::before {
   background-color: var(--tds-color--primary);
   block-size: 100%;
   border-radius: var(--tds-range-slider--radius);
   content: '';
   display: block;
   inline-size: var(--tds-range-progress-fill);
   left: 0;
   pointer-events: none;
   position: absolute;
   top: 0;
 }
 [dir='rtl'] .tds-form-input--range--progress .tds-form-input::before {
   left: auto;
   right: 0;
 }
 /* More Standard browser styling below here */
 .tds-form-input--range--progress .tds-form-input::-moz-range-progress {
   background-color: var(--tds-color--primary);
   block-size: var(--tds-form-input--height);
   border-radius: var(--tds-range-slider--radius);
 }
 /* This is messy, but they can't combined because Safari's pseudo selector
    can't be combined with anything or else it won't work... when we have
    a cleaner standard, this whole file will be updated (again).
  */
 .tds-form-item--range .tds-form-input:focus-visible {
   outline: var(--tds-outline--focus);
   outline-offset: 2px;
 }
 .tds--indicate-focus .tds-form-item--range .tds-form-input:focus {
   outline: var(--tds-outline--focus);
   outline-offset: 2px;
 }
 .tds-form-item--range .tds-form-input:focus::-webkit-slider-runnable-track {
   outline: var(--tds-outline--focus);
   outline-offset: 2px;
 }
 .tds-form-item--search input::-webkit-search-decoration,
 .tds-form-item--search input::-webkit-search-cancel-button,
 .tds-form-item--search input::-webkit-search-results-button,
 .tds-form-item--search input::-webkit-search-results-decoration {
   -webkit-appearance: none;
           appearance: none;
 }
 .tds-form-item--search .tds-form-input-wrap {
   transition:
     padding 0.25s ease-in-out,
     background-color 0.25s ease-in-out,
     border 0.25s ease-in-out,
     inline-size 0.25s ease-in-out;
 }
 .tds-form-item--search .tds-form-input-leading,
 .tds-form-item--search .tds-form-input-trailing {
   display: flex;
 }
 .tds-form-item--search .tds-form-input-leading button {
   -webkit-margin-start: -6px;
           margin-inline-start: -6px;
 }
 .tds-form-item--search .tds-form-input-trailing button {
   -webkit-margin-end: -6px;
           margin-inline-end: -6px;
 }
 .tds-form-item--search[aria-expanded='false'] .tds-form-input-trailing {
   display: none;
 }
 .tds-form-item--search[aria-expanded='false'] .tds-form-input-wrap,
 .tds-form-item--search[aria-expanded='false'] .tds-form-input {
   inline-size: 0;
 }
 .tds-form-item--search[aria-expanded='false'] .tds-form-input-wrap {
   --tds-form-input--background-color: transparent;
   --tds-form-input--border-color: transparent;
   --tds-search-closed--padding-inline-end: var(--tds-size--4x);

   -webkit-padding-end: var(--tds-search-closed--padding-inline-end);

           padding-inline-end: var(--tds-search-closed--padding-inline-end);
 }
 .tds-form-item--search .tds-form-input-trailing .tds-icon {
   opacity: 1;
   z-index: 1;
   transition: opacity 0.25s ease-in-out;
 }
 .tds-form-item--search[aria-expanded='false'] .tds-form-input-trailing .tds-icon {
   opacity: 0;
   z-index: -1;
   transition: opacity 0.25s ease-in-out;
 }
 .tds-form-item--search[aria-expanded='true'] .tds-form-input-wrap,
 .tds-form-item--search[aria-expanded='true'] .tds-form-input {
   --tds-form-input--background-color: var(--tds-color--tertiary);
   --tds-form-input--border-color: var(--tds-color--tertiary);
   --tds-search-closed--padding-inline-end: var(--tds-form-item--indent);

   inline-size: 100%;
 }
 .tds-form-item--search[aria-expanded='true'] .tds-form-input-wrap:focus-within {
   --tds-form-input--border-color: var(--tds-color--secondary-accent);
 }
 .tds-form-item--search[aria-expanded='true'] .tds-form-input-trailing {
   display: flex;
 }
 /* Intl Phone Tooltip - Note: composite pattern, styles below are just for label formatting */
 .tds-country-phone-label--long {
   display: flex;
   text-align: start;
   width: 100%;
 }
 .tds-country-phone-label--long .tds-country-code {
   display: inline-block;
   flex-shrink: 0;
   width: 2.5em;
 }
 /* --- Form Item Feedback Area
 --------------------------------------------- */
 .tds-form-feedback-wrap {
   display: grid;
   grid-area: feedback;
   grid-template-areas: 'helper feedback';
   grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
   -webkit-padding-end: var(--tds-form-item--indent);
           padding-inline-end: var(--tds-form-item--indent);
   -webkit-padding-start: var(--tds-form-item--indent);
           padding-inline-start: var(--tds-form-item--indent);
 }
 /* Feedback Internals */
 .tds-form-feedback-helper,
 .tds-form-feedback-feedback {
   font-weight: var(--tds-form-feedback--font-weight);
   margin: 0;
   padding: 0;
   text-align: var(--tds-form-feedback--text-align);
 }
 /* Helper Text */
 .tds-form-feedback-helper {
   --tds-form-feedback--font-weight: var(--tds-font-weight--book);
   --tds-form-feedback--text-align: start;

   grid-area: helper;
 }
 .tds-form-item--error .tds-form-feedback-helper {
   display: none;
 }
 /* Feedback/Error Text */
 .tds-form-feedback-feedback {
   --tds-form-feedback--text-align: end;

   grid-area: feedback;
 }
 .tds-form-item--error .tds-form-feedback-feedback {
   --tds-form-feedback--font-weight: var(--tds-font-weight--medium);
   --tds-form-feedback--text-align: start;

   color: var(--tds-color--error);
 }
 /* --- Fieldsets and Legends
 --------------------------------------------- */
 .tds-fieldset {
   --tds-fieldset--indent: 0;
   --tds-fieldset--spacer: var(--tds-size--1x);

   border: 0;
   margin: 0;
   padding: 0;
   -webkit-padding-after: var(--tds-fieldset--spacer);
           padding-block-end: var(--tds-fieldset--spacer);
   -webkit-padding-before: 0;
           padding-block-start: 0;
   -webkit-padding-start: var(--tds-fieldset--indent);
           padding-inline-start: var(--tds-fieldset--indent);
 }
 .tds-fieldset .tds-form-feedback-wrap {
   min-block-size: 0;
 }
 /* Note: addresses inconsistent spacing for option groups and radios/checkboxes
 TODO: AWSM-4172 - Address this in a post- selector component refactor */
 .tds-fieldset--choice {
   --tds-fieldset--indent: 20px;

   -webkit-padding-after: calc(var(--tds-fieldset--spacer) - var(--tds-size--half));

           padding-block-end: calc(var(--tds-fieldset--spacer) - var(--tds-size--half));
 }
 .tds-fieldset--selector {
   -webkit-padding-after: calc(var(--tds-fieldset--spacer) + var(--tds-size--half));
           padding-block-end: calc(var(--tds-fieldset--spacer) + var(--tds-size--half));
 }
 .tds-legend {
   /* Note: this color should be overridden by .tds-text--[h1-h5]
   which only works if text styles are imported AFTER form styles
   due to identical specificity */
   color: var(--tds-text--color--light);
   display: block;
   font-weight: var(--tds-font-weight--medium);

   /* Browser Issue: Normally padding would be set on the fieldset to match form-items
   however, Chrome/Safari/FF all have unusual overlapping paddings for legends
   when inside fieldsets, which leads to inconsistent space between the legend
   and the next sibling element */
   -webkit-padding-after: var(--tds-fieldset--spacer);
           padding-block-end: var(--tds-fieldset--spacer);
   -webkit-padding-before: var(--tds-fieldset--spacer);
           padding-block-start: var(--tds-fieldset--spacer);
 }
 /* See Browser Issue (above) */
 .tds-tooltip > .tds-fieldset:first-child > .tds-legend {
   -webkit-padding-before: 0;
           padding-block-start: 0;
 }
 /* --- Specific Form Layouts
 --------------------------------------------- */
 .tds-form-layout--multicolumn {
   --grid-template-column-width: 200px;

   align-items: start;
   display: grid;
   gap: 0 var(--tds-size--3x);
   grid-template-columns: repeat(auto-fit, minmax(var(--grid-template-column-width), 1fr));
 }
 .tds-form-layout--date-range {
   position: relative;
 }
 /*
  * Icon Button
  * - Distinct from regular buttons, in that this is designed to handle a standalone icon without visible text
  *
  * In-Progress Component
  * - Expect the component structure to change as this pattern becomes more refined over the course of TDS v5
 **/
 .tds-icon-btn {
   --tds-icon-btn--background: transparent;
   --tds-icon-btn--border-width: var(--tds-border-width--medium);
   --tds-icon-btn--size: var(--tds-size--5x);

   display: inline-flex;
   align-items: center;
   justify-content: center;
   inline-size: var(--tds-icon-btn--size);
   block-size: var(--tds-icon-btn--size);
   padding: var(--tds-size--half);
   border-radius: var(--tds-border-radius--pill);
   background-color: var(--tds-icon-btn--background);
   box-shadow: inset 0 0 0 0;
   -webkit-backdrop-filter: blur(0);
           backdrop-filter: blur(0);
   transition: color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;

   /* Border remains transparent all the time, just functions like a spacer to inset
   the focus state's box shadow. Will refactor someday,
   once buttons have better focus states */
   border: var(--tds-icon-btn--border-width) solid transparent;
 }
 /* States */
 .tds-icon-btn:focus {
   box-shadow: inset 0 0 0 var(--tds-icon-btn--border-width);
   outline: none;
 }
 .tds-icon-btn:is(:hover, .tds--highlighted),
 /* Treat TR hover like a hover on the button */
 .tds-data-table tbody tr:is(:hover, .tds--highlighted) .tds-icon-btn {
   --tds-icon-btn--background: var(--tds-pill--blur-color);

   -webkit-backdrop-filter: blur(var(--tds-blur--button));

           backdrop-filter: blur(var(--tds-blur--button));
 }
 /* Sizes */
 .tds-icon-btn.tds-icon-btn--large {
   --tds-icon-btn--border-width: var(--tds-border-width--medium);
   --tds-icon-btn--size: var(--tds-size--5x);
 }
 .tds-icon-btn.tds-icon-btn--medium {
   --tds-icon-btn--border-width: var(--tds-border-width--small);
   --tds-icon-btn--size: var(--tds-size--4x);
 }
 .tds-icon-btn.tds-icon-btn--small {
   --tds-icon-btn--border-width: var(--tds-border-width--small);
   --tds-icon-btn--size: 28px;
 }
 /**
  * Icon
  * - Collects any overrides and/or new styles for the Stable Icon set
  */
 :root,
 .tds-component-preview {
   --tds-icon--bg: transparent;
   --tds-icon--size: 24px;
 }
 .tds-icon {
   background: var(--tds-icon--bg);
   block-size: var(--tds-icon--size);
   content: '';
   display: block;
   inline-size: var(--tds-icon--size);
   max-inline-size: 100%;
   min-block-size: var(--tds-icon--size);
   min-inline-size: var(--tds-icon--size);
   overflow: hidden;
   text-indent: -9999px;
 }
 .tds-icon--small {
   --tds-icon--size: 16px;
 }
 /* Auto-flip all arrow variants for RTL */
 [dir='rtl'] :is([class*='tds-icon-arrow'], [class*='tds-icon-chevron'], [class*='tds-icon-speaker']) {
   transform: rotateY(180deg);
 }
 /* Variants */
 .tds-icon--inline {
   display: inline-block;
 }
 .tds-icon--inline:last-child {
   -webkit-margin-start: var(--tds-size--half);
           margin-inline-start: var(--tds-size--half);
 }
 .tds-icon--inline:first-child {
   -webkit-margin-end: var(--tds-size--half);
           margin-inline-end: var(--tds-size--half);
 }
 /* Alignment */
 .tds-icon--text-bottom {
   vertical-align: text-bottom;
 }
 .tds-icon--text-top {
   vertical-align: text-top;
 }
 .tds-icon--text-middle {
   vertical-align: middle;

   /* Visual offset to align to the center of Gotham's capital glyphs */
   -webkit-margin-before: -0.2em;
           margin-block-start: -0.2em;
 }
 /* Wordmark */
 .tds-icon-logo-wordmark {
   inline-size: calc(var(--tds-icon--size) * 5);
 }
 /* Loader
 Note the mask SVG path is the same as the path in the icons.
 The mask hides the background conic-gradient, and the SVG path transparent color hides the SVG's path.
 This is makes the loader icon backward compatible.
 */
 .tds-icon-loader {
   background: conic-gradient(from 30deg, rgba(119, 119, 119, 0), rgba(119, 119, 119, 0.48), rgba(119, 119, 119, 0.8), rgba(119, 119, 119, 1));
   color: rgba(255, 255, 255, 0);
   -webkit-mask: url("data:image/svg+xml,<svg width='48' height='48' xmlns='http://www.w3.org/2000/svg'><path d='M24 1a2.347 2.347 0 1 1 0 4.694 18.306 18.306 0 1 0 13.359 5.792 2.347 2.347 0 1 1 3.426-3.21A23 23 0 1 1 24 1Z' fill='black'/></svg>");
           mask: url("data:image/svg+xml,<svg width='48' height='48' xmlns='http://www.w3.org/2000/svg'><path d='M24 1a2.347 2.347 0 1 1 0 4.694 18.306 18.306 0 1 0 13.359 5.792 2.347 2.347 0 1 1 3.426-3.21A23 23 0 1 1 24 1Z' fill='black'/></svg>");
   -webkit-mask-size: cover;
           mask-size: cover;
   opacity: var(--tds-opacity--70);
 }
 /* Sub-elements */
 .tds-icon * {
   transition: fill 0.3s ease, stroke 0.3s ease;
 }
 /* Inline Dropdown */
 .tds-inline-dropdown.tds-tooltip {
   /* Tooltip padding determines the negative outdent when aligned to a trigger's edge */
   --tds-tooltip--padding: var(--tds-padding-inline--pill);

   padding: calc(var(--tds-tooltip--padding) / 2) 0;
 }
 .tds-inline-dropdown-trigger {
   align-items: center;
   display: flex;
   font-weight: var(--tds-font-weight--medium);

   /* Hacky offset - balances the focus-indication visually when keyboarding */
   -webkit-margin-start: -4px;
           margin-inline-start: -4px;
   -webkit-padding-start: var(--tds-size--half);
           padding-inline-start: var(--tds-size--half);
 }
 .tds-inline-dropdown-trigger:focus {
   outline: none;
 }
 .tds-inline-dropdown-trigger:focus-visible {
   outline: var(--tds-outline--focus);
 }
 .tds--indicate-focus .tds-inline-dropdown-trigger:focus {
   outline: var(--tds-outline--focus);
 }
 /* Listbox - Temp home for styles */
 .tds-listbox {
   max-block-size: 300px;
   overflow-y: auto;
   scroll-behavior: auto;
 }
 .tds-listbox-option {
   align-items: center;
   cursor: pointer;
   display: flex;
   justify-content: space-between;
   background-color: transparent;
   margin: 0;
   padding: calc(var(--tds-padding-block--pill) / 2) var(--tds-padding-inline--pill);
   text-align: start;
   inline-size: 100%;
   transition: background-color 0.3s ease;
 }
 [aria-multiselectable='true'] .tds-listbox-option {
   justify-content: flex-start;
 }
 .tds-listbox-option:hover {
   background-color: var(--tds-color--tertiary);
 }
 .tds-listbox-option:focus {
   outline: none;
 }
 .tds-listbox-option:focus-visible {
   outline: var(--tds-outline--focus);
   outline-offset: -2px;
 }
 .tds--indicate-focus .tds-listbox-option:focus {
   outline: var(--tds-outline--focus);
   outline-offset: -2px;
 }
 .tds-listbox-option.tds--selected {
   background-color: var(--tds-color--tertiary-highlight);
 }
 /* Normally inline icons have a visual adjustment to their alignment to match with text,
  * but in this case it's not necessary */
 .tds-listbox-option .tds-icon {
   color: transparent;
   transform: scale(0);
   position: relative;
   transition: color 0.3s ease, transform 0.3s ease;
 }
 .tds--selected .tds-icon {
   color: currentColor;
   transform: scale(1);
 }
 .tds-singleselect-icon {
   top: 0;
 }
 .tds-multiselect-box {
   display: inline-block;
   block-size: calc(var(--tds-size--2x) + 2px);
   inline-size: calc(var(--tds-size--2x) + 2px);
   border: 1px solid var(--tds-color--secondary-accent);
   border-radius: var(--tds-size--half);
   -webkit-margin-end: 12px;
           margin-inline-end: 12px;
   transition: border-color 0.3s ease;
 }
 .tds--selected .tds-multiselect-box {
   border-color: var(--tds-color--secondary);
 }
 .tds-icon-trigger {
   --tds-icon-trigger--animation:
     color 900ms var(--tds-bezier),
     border 900ms var(--tds-bezier),
     opacity 900ms var(--tds-bezier),
     transform 900ms var(--tds-bezier),
     box-shadow 250ms var(--tds-bezier),
     background-color 900ms var(--tds-bezier);
   --tds-icon-trigger--border_size: 2px;
   --tds-icon-trigger--padding-inline-end: var(--tds-size--1x);
   --tds-icon-trigger--padding-inline-start: var(--tds-size--4x);

   align-items: center;
   background: none;
   border: none;
   color: var(--tds-text--color);
   cursor: pointer;
   display: inline-flex;
   flex-flow: row nowrap;
   font-size: var(--tds-font-size--20);
   min-block-size: var(--tds-size--5x);

   /* Should be the same height as buttons -- 40px */
   min-inline-size: var(--tds-size--3x);
   -webkit-padding-after: var(--tds-size--1x);
           padding-block-end: var(--tds-size--1x);
   -webkit-padding-before: var(--tds-size--1x);
           padding-block-start: var(--tds-size--1x);
   -webkit-padding-end: var(--tds-icon-trigger--padding-inline-end);
           padding-inline-end: var(--tds-icon-trigger--padding-inline-end);
   -webkit-padding-start: var(--tds-icon-trigger--padding-inline-start);
           padding-inline-start: var(--tds-icon-trigger--padding-inline-start);
   position: relative;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
 .tds-icon-trigger:focus-visible {
   outline: var(--tds-outline--focus);
   outline-offset: 2px;
 }
 .tds-icon-trigger:disabled,
 .tds-icon-trigger.tds--disabled {
   cursor: not-allowed;
   opacity: var(--tds-opacity--50);
 }
 .tds-icon-trigger::after {
   border: none;
   opacity: 0;
 }
 .tds-icon-trigger .tds-label-title {
   text-transform: uppercase;
 }
 .tds-icon-crosshatch {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
   background-color: transparent;
   block-size: var(--tds-size--3x);
   border: var(--tds-icon-trigger--border_size) solid var(--tds-color--secondary-highlight);
   border-radius: var(--tds-size--3x);
   inline-size: var(--tds-size--3x);
   left: 0;
   padding: 0;
   position: absolute;
   transition: var(--tds-icon-trigger--animation);
 }
 .tds-icon-crosshatch::before,
 .tds-icon-crosshatch::after {
   background-color: var(--tds-color--secondary-highlight);
   border-radius: 4px;
   bottom: 0;
   content: '';
   left: 0;
   margin: auto;
   position: absolute;
   right: 0;
   top: 0;
   transition: var(--tds-icon-trigger--animation);
 }
 .tds-icon-crosshatch::before {
   block-size: calc(var(--tds-size--2x) - 4px);
   inline-size: var(--tds-icon-trigger--border_size);
 }
 .tds-icon-crosshatch::after {
   block-size: var(--tds-icon-trigger--border_size);
   inline-size: calc(var(--tds-size--2x) - 4px);
 }
 /* Small icon trigger */
 .tds-icon-trigger--small {
   --tds-icon-trigger--padding-inline-start: calc(var(--tds-size--2x) + 8px);

   min-block-size: calc(var(--tds-size--2x) + 10px);
 }
 .tds-icon-trigger--small .tds-icon-crosshatch {
   block-size: var(--tds-size--2x);
   inline-size: var(--tds-size--2x);
 }
 .tds-icon-trigger--small .tds-icon-crosshatch::before {
   block-size: calc(var(--tds-size--2x) - 10px);
 }
 .tds-icon-trigger--small .tds-icon-crosshatch::after {
   inline-size: calc(var(--tds-size--2x) - 10px);
 }
 /* Unenclosed Trigger */
 .tds-icon-trigger--unenclosed {
   transition: var(--tds-icon-trigger--animation);
 }
 .tds-icon-trigger--unenclosed .tds-icon-crosshatch {
   border: none;
 }
 .tds-icon-trigger--unenclosed .tds-label-title {
   -webkit-margin-end: var(--tds-size--1x);
           margin-inline-end: var(--tds-size--1x);
 }
 /* Other Modifiers */
 .tds-icon-trigger--reversed {
   --tds-icon-trigger--padding-inline-end: var(--tds-size--4x);
   --tds-icon-trigger--padding-inline-start: 0;
 }
 .tds--indicate-focus .tds-icon-trigger:focus {
   outline: var(--tds-outline--focus);
   outline-offset: 2px;
 }
 .tds-icon-trigger--reversed .tds-icon-crosshatch {
   left: auto;
   right: 0;
 }
 [dir='rtl'] .tds-icon-crosshatch {
   left: initial;
   right: 0;
 }
 [dir='rtl'] .tds-icon-trigger--reversed,
 [dir='rtl'] .tds-icon-trigger--reversed .tds-icon-crosshatch {
   left: 0;
   right: initial;
 }
 [aria-pressed='true'] .tds-icon-crosshatch::before {
   transform: rotateZ(90deg);
 }
 [aria-pressed='true'] .tds-icon-crosshatch::after {
   opacity: var(--tds-opacity--transparent);
   transform: rotateZ(180deg);
 }
 /* Rotate icon */
 .tds-icon-trigger--rotate[aria-pressed='true'] .tds-icon-crosshatch::before {
   transform: rotateZ(135deg);
 }
 .tds-icon-trigger--rotate[aria-pressed='true'] .tds-icon-crosshatch::after {
   opacity: var(--tds-opacity--100);
   transform: rotateZ(315deg);
 }
 .tds-icon-trigger--invert-colors[aria-pressed='true'] .tds-icon-crosshatch {
   background-color: var(--tds-color--secondary-highlight);
 }
 .tds-icon-trigger--invert-colors[aria-pressed='true'] .tds-icon-crosshatch::before,
 .tds-icon-trigger--invert-colors[aria-pressed='true'] .tds-icon-crosshatch::after {
   background-color: var(--tds-color--inverse);
 }
 .tds-icon-trigger--chevron .tds-icon {
   transition: var(--tds-icon-trigger--animation);
 }
 .tds-icon-trigger--chevron[aria-pressed='true'] .tds-icon {
   transform: rotateX(180deg);
 }
 .tds-icon-trigger--chevron {
   --tds-icon-trigger--padding-inline-end: 0;
   --tds-icon-trigger--padding-inline-start: 0;

   gap: var(--tds-size--half);
 }
 :root,
 .tds-component-preview {
   --tds-gutter: var(--tds-size--3x);
   --tds-gutter--half: calc(var(--tds-size--3x) / 2);
   --tds-gutter--negative: calc(var(--tds-size--3x) * -1);
   --tds-gutter--half_negative: calc(var(--tds-gutter--negative) / 2);
 }
 .tds-flex {
   display: flex;
   flex-flow: column wrap;
   list-style: none;
   margin: 0;
   padding: 0;
 }
 @media (min-width: 600px) {
   .tds-flex {
     flex-flow: row wrap;
   }
 }
 .tds-flex-gutters {
   -webkit-margin-after: var(--tds-size--3x);
           margin-block-end: var(--tds-size--3x);
   -webkit-margin-before: var(--tds-gutter--negative);
           margin-block-start: var(--tds-gutter--negative);
   -webkit-margin-start: var(--tds-gutter--negative);
           margin-inline-start: var(--tds-gutter--negative);
 }
 @media (max-width: 599px) {
   .tds-flex-small-gutters > * {
     -webkit-margin-before: var(--tds-size--1x);
             margin-block-start: var(--tds-size--1x);
     -webkit-margin-after: var(--tds-size--1x);
             margin-block-end: var(--tds-size--1x);
   }

   .tds-flex-small-gutters > :first-child {
     -webkit-margin-before: 0;
             margin-block-start: 0;
   }

   .tds-flex-small-gutters > :last-child {
     -webkit-margin-after: 0;
             margin-block-end: 0;
   }
 }
 @media (min-width: 600px) {
   .tds-flex-small-gutters > * {
     -webkit-margin-start: var(--tds-size--1x);
             margin-inline-start: var(--tds-size--1x);
     -webkit-margin-end: var(--tds-size--1x);
             margin-inline-end: var(--tds-size--1x);
   }

   .tds-flex-small-gutters > :first-child {
     -webkit-margin-start: 0;
             margin-inline-start: 0;
   }

   .tds-flex-small-gutters > :last-child {
     -webkit-margin-end: 0;
             margin-inline-end: 0;
   }
 }
 .tds-flex--nowrap {
   flex-wrap: nowrap;
 }
 .tds-flex-item {
   flex: 1;
 }
 .tds-grid--show_grid .tds-flex-item {
   overflow: hidden;
   position: relative;
 }
 .tds-grid--show_grid .tds-flex-item::before {
   background-color: rgba(149, 236, 255, 0.1);
   block-size: 100%;
   -webkit-border-end: 1px solid rgba(149, 236, 255, 0.3);
           border-inline-end: 1px solid rgba(149, 236, 255, 0.3);
   -webkit-border-start: 1px solid rgba(149, 236, 255, 0.3);
           border-inline-start: 1px solid rgba(149, 236, 255, 0.3);
   content: '';
   display: block;
   inline-size: calc(100% - 2px);
   left: 1px;
   position: absolute;
   top: 0;
 }
 .tds-grid--show_grid.tds-flex-gutters .tds-flex-item::before,
 .tds-grid--show_grid .tds-flex-gutters .tds-flex-item::before {
   inline-size: calc(100% - 26px);
   left: var(--tds-size--3x);
   top: var(--tds-size--3x);
 }
 .tds-flex-gutters .tds-flex-item {
   -webkit-padding-before: var(--tds-size--3x);
           padding-block-start: var(--tds-size--3x);
   -webkit-padding-start: var(--tds-size--3x);
           padding-inline-start: var(--tds-size--3x);
 }
 .tds-flex--flex_cells > .tds-flex-item {
   display: flex;
 }
 .tds-flex-item--no_gutter {
   -webkit-padding-before: 0;
           padding-block-start: 0;
   -webkit-padding-start: 0;
           padding-inline-start: 0;
 }
 .tds-flex-gutters .tds-flex-gutters {
   -webkit-margin-after: 0;
           margin-block-end: 0;
 }
 /* Columns spanning multiples
 --------------------------------------------------------------------------- */
 [class*='tds-flex--col_'] {
   flex: none;
   transition: width 250ms ease-in-out;
 }
 @media (min-width: 600px) {
   .tds-flex--col_1of2 {
     inline-size: 50%;
   }

   .tds-flex--col_1of3 {
     inline-size: 33.3333%;
   }

   .tds-flex--col_2of3 {
     inline-size: 66.6667%;
   }

   .tds-flex--col_1of4 {
     inline-size: 25%;
   }

   .tds-flex--col_3of4 {
     inline-size: 75%;
   }

   .tds-flex--col_1of1 {
     inline-size: 100%;
   }
 }
 /* Vertical Alignment per row
 --------------------------------------------------------------------------- */
 .tds-flex--top {
   align-items: flex-start;
 }
 .tds-flex--bottom {
   align-items: flex-end;
 }
 .tds-flex--center {
   align-items: center;
 }
 /* Horizontal Alignment per row
 --------------------------------------------------------------------------- */
 .tds-flex--align-inline-start {
   justify-content: flex-start;
 }
 .tds-flex--align-inline-center {
   justify-content: center;
 }
 .tds-flex--align-inline-end {
   justify-content: flex-end;
 }
 /* In order for justify-content to work properly, child elements must have their flex unset */
 .tds-flex--align-inline-start > .tds-flex-item,
 .tds-flex--align-inline-center > .tds-flex-item,
 .tds-flex--align-inline-end > .tds-flex-item {
   flex: unset;
 }
 /* Alignment per cell
 --------------------------------------------------------------------------- */
 .tds-flex-item--top {
   align-self: flex-start;
 }
 .tds-flex-item--bottom {
   align-self: flex-end;
 }
 .tds-flex-item--center {
   align-self: center;
 }
 /* Base classes for all media
 --------------------------------------------------------------------------- */
 .tds-flex--fit > .tds-flex-item {
   flex: 1;
 }
 @media (min-width: 600px) {
   .tds-flex--full > .tds-flex-item {
     flex: 0 0 100%;
   }

   .tds-flex--halfs > .tds-flex-item {
     flex: 0 0 50%;
   }

   .tds-flex--thirds > .tds-flex-item {
     flex: 0 0 33.3333%;
   }

   .tds-flex--quarters > .tds-flex-item {
     flex: 0 0 25%;
   }

   /* Large screens
   --------------------------------------------------------------------------- */
   .tds-flex--large_fit > .tds-flex-item {
     flex: 1;
   }

   .tds-flex--large_full > .tds-flex-item {
     flex: 0 0 100%;
   }

   .tds-flex--large_halfs > .tds-flex-item {
     flex: 0 0 50%;
   }

   .tds-flex--large_thirds > .tds-flex-item {
     flex: 0 0 33.3333%;
   }

   .tds-flex--large_quarters > .tds-flex-item {
     flex: 0 0 25%;
   }
 }
 /* --- Custom Layouts
 --------------------------------------------------------------------------- */
 .tds-flex--as_columns {
   flex-flow: column wrap;
 }
 /* TODO: I'm annoyed this isn't underscored to match with the utility class above */
 .tds-flex--as-rows {
   display: flex;
   flex-flow: row wrap;
 }
 /* --- Custom Templates
 --------------------------------------------------------------------------- */
 .tds-layout-flex--two_columns.tds-layout-flex--sidemenu > .tds-flex-item:nth-child(1),
 .tds-layout-flex--two_columns.tds-layout-flex--sidemenu_left > .tds-flex-item:nth-child(1) {
   min-width: 70%;
 }
 .tds-layout-flex--three_columns.tds-layout-flex--sidemenu > .tds-flex-item:nth-child(1) {
   min-width: 60%;
 }
 .tds-layout-flex--two_columns.tds-layout-flex--sidemenu_left > .tds-flex-item:nth-child(2),
 .tds-layout-flex--three_columns.tds-layout-flex--sidemenu > .tds-flex-item:nth-child(2) {
   order: -1;
 }
 @media (max-width: 599px) {
   .tds-layout-flex--three_columns.tds-layout-flex--sidemenu > .tds-flex-item:nth-child(1),
   .tds-layout-flex--two_columns.tds-layout-flex--sidemenu_left > .tds-flex-item:nth-child(1) {
     order: -1;
   }
 }
 @media (max-width: 599px) {
   .tds-flex-item {
     inline-size: 100%;
     min-width: 112px;
     flex: 100%;
   }

   .tds-flex-gutters {
     -webkit-margin-before: 0;
             margin-block-start: 0;
     -webkit-margin-after: 0;
             margin-block-end: 0;
   }

   .tds-flex-gutters .tds-flex-item {
     -webkit-padding-before: 0;
             padding-block-start: 0;
   }
 }
 .tds-layout-main {
   grid-area: main;
 }
 .tds-layout-aside {
   grid-area: aside--primary;
 }
 .tds-layout-aside + .tds-layout-aside {
   grid-area: aside--secondary;
 }
 /* -- Layout Helpers
 ---------------------------------------------------------------------------------------------------- */
 .tds-layout.tds-layout--no_offset,
 .tds-layout :is(.tds-layout, .tds-layout--no_offset) {
   -webkit-padding-end: 0;
           padding-inline-end: 0;
   -webkit-padding-start: 0;
           padding-inline-start: 0;
 }
 .tds-layout--constrained,
 .tds-layout--constrained_small {
   -webkit-margin-end: auto;
           margin-inline-end: auto;
   -webkit-margin-start: auto;
           margin-inline-start: auto;
 }
 .tds-layout--constrained_small {
   max-inline-size: 840px;
 }
 .tds-layout--constrained {
   max-inline-size: 1440px;
 }
 /* -- Base Layout
 ---------------------------------------------------------------------------------------------------- */
 @media (max-width: 899px) {
   .tds-layout {
     -webkit-padding-end: var(--tds-size--3x);
             padding-inline-end: var(--tds-size--3x);
     -webkit-padding-start: var(--tds-size--3x);
             padding-inline-start: var(--tds-size--3x);
     transition: padding 150ms ease-in-out;
   }
 }
 @media (min-width: 600px) {
   .tds-layout {
     display: grid;
     grid-template-columns: repeat(12, 1fr);
     grid-gap: 0 var(--tds-size--3x);
     margin: auto;
     transition: padding 150ms ease-in-out;
   }
 }
 @media (min-width: 900px) {
   .tds-layout {
     -webkit-padding-end: var(--tds-size--5x);
             padding-inline-end: var(--tds-size--5x);
     -webkit-padding-start: var(--tds-size--5x);
             padding-inline-start: var(--tds-size--5x);
   }
 }
 /* -- One Column Layout
 ---------------------------------------------------------------------------------------------------- */
 .tds-layout-item:first-child:last-child {
   grid-column: 1 / 13;
 }
 [class*='tds-layout-2col'] .tds-layout-aside {
   grid-area: aside;
 }
 .tds-layout-main--left .tds-layout-aside,
 .tds-layout-main--right .tds-layout-main {
   -webkit-padding-start: 0;
           padding-inline-start: 0;
   transition: padding 250ms ease-in-out;
 }
 /* --- Two-Column Layouts ----------------------------------------------- */
 .tds-layout-2col {
   grid-template: 1fr / repeat(2, 6fr);
 }
 .tds-layout-2col-has_main,
 .tds-layout-2col-has_main--large,
 .tds-layout-2col-spacious {
   grid-template: 1fr / repeat(12, 1fr);
 }
 .tds-layout-2col-has_main.tds-layout-main--left {
   grid-template-areas: 'main main main main main main main main aside aside aside aside';
 }
 .tds-layout-2col-has_main.tds-layout-main--right {
   grid-template-areas: 'aside aside aside aside main main main main main main main main';
 }
 .tds-layout-2col-has_main--large.tds-layout-main--left {
   grid-template-areas: 'main main main main main main main main main aside aside aside';
 }
 .tds-layout-2col-has_main--large.tds-layout-main--right {
   grid-template-areas: 'aside aside aside main main main main main main main main main';
 }
 /* --- Two-Column Layouts | Static Sidebar ------------------------------ */
 .tds-layout-2col-static_sidebar.tds-layout-main--left {
   grid-template: 'main aside' 1fr / 10fr minmax(204px, 2fr);
 }
 .tds-layout-2col-static_sidebar.tds-layout-main--right {
   grid-template: 'aside main' 1fr / minmax(204px, 2fr) 10fr;
 }
 .tds-layout-2col-static_sidebar--large.tds-layout-main--left {
   grid-template: 'main aside' 1fr / 9fr minmax(318px, 3fr);
 }
 .tds-layout-2col-static_sidebar--large.tds-layout-main--right {
   grid-template: 'aside main' 1fr / minmax(318px, 3fr) 9fr;
 }
 /* --- Two-Column Layouts | Spacious ------------------------------------ */
 @media (min-width: 600px) {
   .tds-layout-main--left .tds-layout-aside,
   .tds-layout-main--right .tds-layout-main {
     -webkit-padding-start: 24px;
             padding-inline-start: 24px;
   }

   .tds-layout-2col-spacious.tds-layout-main--left .tds-layout-aside,
   .tds-layout-2col-spacious.tds-layout-main--right .tds-layout-main,
   .tds-layout-2col-content_heavy.tds-layout-main--left .tds-layout-aside,
   .tds-layout-2col-content_heavy.tds-layout-main--right .tds-layout-main {
     -webkit-padding-start: 0;
             padding-inline-start: 0;
   }
 }
 @media (min-width: 900px) {
   .tds-layout-2col-spacious.tds-layout-main--left {
     grid-template-areas: '. main main main main main main . aside aside aside .';
   }

   .tds-layout-2col-spacious.tds-layout-main--right {
     grid-template-areas: '. aside aside aside . main main main main main main .';
   }

   .tds-layout-2col-content_heavy.tds-layout-main--left {
     grid-template: '. . main aside' 1fr / 1fr 1fr 7fr minmax(-webkit-min-content, 318px);
     grid-template: '. . main aside' 1fr / 1fr 1fr 7fr minmax(min-content, 318px);
   }

   .tds-layout-2col-content_heavy.tds-layout-main--right {
     grid-template: 'aside main . . ' 1fr / minmax(-webkit-min-content, 318px) 7fr 1fr 1fr;
     grid-template: 'aside main . . ' 1fr / minmax(min-content, 318px) 7fr 1fr 1fr;
   }
 }
 @media (min-width: 600px) and (max-width: 899px) {
   .tds-layout-2col-spacious.tds-layout-main--left {
     grid-template-areas: 'main main main main main main main aside aside aside aside aside';
   }

   .tds-layout-2col-spacious.tds-layout-main--right {
     grid-template-areas: 'aside aside aside aside aside main main main main main main main';
   }

   .tds-layout-2col-spacious.tds-layout-main--left .tds-layout-aside,
   .tds-layout-2col-spacious.tds-layout-main--right .tds-layout-main {
     -webkit-padding-start: 24px;
             padding-inline-start: 24px;
   }

   .tds-layout-2col-content_heavy.tds-layout-main--left {
     grid-template: 'main aside' 1fr / 9fr minmax(-webkit-min-content, 318px);
     grid-template: 'main aside' 1fr / 9fr minmax(min-content, 318px);
   }

   .tds-layout-2col-content_heavy.tds-layout-main--right {
     grid-template: 'aside main' 1fr / minmax(-webkit-min-content, 318px) 9fr;
     grid-template: 'aside main' 1fr / minmax(min-content, 318px) 9fr;
   }
 }
 .tds-layout-3col,
 .tds-layout-3col-has_main,
 .tds-layout-3col-has_main--large {
   grid-template-areas: 'aside--primary main aside--secondary';
 }
 .tds-layout-3col {
   grid-template: 1fr / repeat(3, 4fr);
 }
 .tds-layout-3col-has_main,
 .tds-layout-3col-has_main--large {
   grid-template: 1fr / repeat(12, 1fr);
 }
 .tds-layout-3col-has_main .tds-layout-main {
   grid-column: 4 / 10;
 }
 .tds-layout-3col-has_main .tds-layout-aside + .tds-layout-aside {
   grid-column: 10 / 13;
 }
 .tds-layout-3col-has_main .tds-layout-main + .tds-layout-aside {
   grid-column: 1 / 4;
 }
 .tds-layout-3col-has_main--large .tds-layout-main {
   grid-column: 3 / 11;
 }
 .tds-layout-3col-has_main--large .tds-layout-aside + .tds-layout-aside {
   grid-column: 11 / 13;
 }
 .tds-layout-3col-has_main--large .tds-layout-main + .tds-layout-aside {
   grid-column: 1 / 3;
 }
 .tds-layout-3col-has_main--inset .tds-layout-main {
   grid-column: 4 / 10;
 }
 .tds-layout-3col-has_main--inset .tds-layout-aside + .tds-layout-aside {
   grid-column: 10 / 12;
 }
 .tds-layout-3col-has_main--inset .tds-layout-main + .tds-layout-aside {
   grid-column: 2 / 4;
 }
 .tds-layout-3col-has_main--spread .tds-layout-main {
   grid-column: 4 / 10;
 }
 .tds-layout-3col-has_main--spread .tds-layout-aside + .tds-layout-aside {
   grid-column: 11 / 13;
 }
 .tds-layout-3col-has_main--spread .tds-layout-main + .tds-layout-aside {
   grid-column: 1 / 3;
 }
 .tds-layout--4col {
   grid-template-columns: repeat(4, 1fr);
 }
 /* --- Checkerboard ----------------------------------------------------- */
 @media (min-width: 600px) {
   .tds-layout-checkerboard {
     grid-template: 'checkboard--row' 1fr / 1fr;
     grid-gap: 0;
   }

   .tds-layout-checkerboard .tds-layout-item {
     display: grid;
     grid-template: 'checkerboard-asset checkerboard-caption' 1fr / 1fr 1fr;
     justify-content: center;
     align-content: center;
     align-items: stretch;
   }

   .tds-layout-checkerboard .tds-layout-checkerboard--caption {
     grid-area: checkerboard-caption;
     -webkit-padding-start: var(--tds-size--8x);
             padding-inline-start: var(--tds-size--8x);
     -webkit-padding-end: var(--tds-size--8x);
             padding-inline-end: var(--tds-size--8x);
     place-self: center stretch;
     text-align: start;
   }

   .tds-layout-checkerboard .tds-layout-item:nth-child(odd) {
     grid-template-areas: 'checkerboard-caption checkerboard-asset';
   }

   .tds-layout-checkerboard .tds-layout-item:nth-child(even) {
     grid-template-areas: 'checkerboard-asset checkerboard-caption';
   }

   .tds-layout-checkerboard .tds-layout-item:nth-child(odd) .tds-layout-checkerboard--caption {
     text-align: end;
   }
 }
 .tds-layout-checkerboard .tds-layout-checkboard--asset {
   display: block;
   grid-area: checkerboard-asset;
   inline-size: 100%;
   max-width: 100%;
   -o-object-fit: cover;
      object-fit: cover;
   -o-object-position: center;
      object-position: center;
 }
 /*
 Shell
 --------------
 Intended for use as the whole page template and as such will include the following
   - Full-width header (i.e. masthead) - sticky or non
   - Layouts of various kinds
   - Full-width footer - sticky or non
 */
 /* TODO: when site-header is redesigned, shell will likely need to be revisited */
 :root,
 .tds-component-preview {
   --tds-shell-footer-height: 52px;
   --tds-shell-header-height: 52px;
 }
 .tds-shell {
   --tds-shell-content-height:
     calc(
       100vh - var(--tds-shell-header-height) - var(--tds-shell-footer-height)
     );

   display: grid;
   grid-gap: 0 24px;
   grid-template-columns: auto;
   grid-template-rows: var(--tds-shell-header-height) 1fr var(--tds-shell-footer-height);
   min-block-size: 100vh;
   min-block-size: -webkit-fill-available; /* stylelint-disable-line value-no-vendor-prefix */

   /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
   grid-template-areas: 'tds-shell-masthead' 'tds-shell-content' 'tds-shell-footer';
 }
 .tds-shell-masthead,
 .tds-shell-footer {
   display: flex;
   flex-flow: row nowrap;
 }
 .tds-shell-masthead {
   grid-area: tds-shell-masthead;
 }
 .tds-shell-masthead--is_sticky,
 .tds-shell-footer--is_sticky {
   position: -webkit-sticky;
   position: sticky;
 }
 .tds-shell-masthead--is_sticky {
   top: 0;
 }
 .tds-shell-footer--is_sticky {
   bottom: 0;
 }
 .tds-shell-footer {
   grid-area: tds-shell-footer;
 }
 .tds-shell-footer .tds-footer-nav {
   align-content: center;
   align-items: center;
   display: flex;
   justify-content: center;
 }
 .tds-shell-content {
   grid-area: tds-shell-content;
   min-block-size: var(--tds-shell-content-height);
 }
 a {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
   color: inherit;
   font-weight: inherit;
   text-decoration: none;
 }
 button.tds-link {
   display: inline;
   line-height: initial;
 }
 .tds-link {
   --tds-link--icon-margin: calc((var(--tds-icon--size) + var(--tds-size--half)) * -1);

   border: 0;
   padding: 0;
   cursor: pointer;
   position: relative;
   background-color: transparent;
   text-align: initial;
   color: var(--tds-text--color);
   font-family: var(--tds-font-family--combined);
   transition: box-shadow 0.33s var(--tds-bezier), color 0.33s ease;
   box-shadow: 0 var(--tds-border-width--small) 0 0 currentColor;
 }
 .tds-link:is(:hover, .tds--hover):not(.tds-link--primary, .tds-link--vertical, [disabled], .tds--disabled) {
   box-shadow: 0 var(--tds-border-width--medium) 0 0 currentColor;
   color: var(--tds-color--secondary);
 }
 .tds-link:is(:focus, :active, .tds--focus, .tds--active):not([disabled], .tds--disabled) {
   outline: 1px dotted currentColor;
 }
 .tds-link:is([disabled], .tds--disabled) {
   cursor: not-allowed;
 }
 /* Variants */
 .tds-link--secondary {
   --tds-text--color: var(--tds-text--color--light);

   box-shadow: 0 0 0 0 transparent;
   font-weight: var(--tds-font-weight--medium, 500);
 }
 .tds-link--secondary:is(:hover, .tds--hover):not([disabled], .tds--disabled) {
   --tds-text--color: var(--tds-text--color);
 }
 .tds-link--primary {
   --tds-text--color: var(--tds-text--color--primary);

   box-shadow: 0 0 0 0 transparent;
   font-weight: var(--tds-font-weight--medium, 500);
 }
 .tds-link--primary:is(:hover, .tds--hover):not([disabled], .tds--disabled) {
   --tds-text--color: var(--tds-color--primary-highlight);

   box-shadow: 0 0 0 0 transparent;
 }
 .tds-link--vertical {
   box-shadow: 0 0 0 0 transparent;
   -webkit-padding-start: var(--tds-size--half);
           padding-inline-start: var(--tds-size--half);
 }
 .tds-link--vertical:is(:hover, .tds--hover):not([disabled], .tds--disabled) {
   box-shadow: -4px 0 0 0 currentColor;
 }
 [dir='rtl'] .tds-link--vertical:is(:hover, .tds--hover):not([disabled], .tds--disabled) {
   box-shadow: 4px 0 0 0 currentColor;
 }
 /* Icon support */
 .tds-link--icon-leading {
   -webkit-margin-start: 28px;
           margin-inline-start: 28px;
 }
 .tds-link--icon-trailing {
   -webkit-margin-end: 28px;
           margin-inline-end: 28px;
 }
 :is(.tds-link, .tds-link--icon-leading, .tds-link--icon-trailing) > :is(.tds-icon--inline,.tds-icon) {
   position: absolute;
   top: -4px;
 }
 .tds-link > .tds-icon--inline:first-child,
 .tds-link--icon-leading > .tds-icon {
   left: var(--tds-link--icon-margin);
 }
 .tds-link > .tds-icon--inline:last-child,
 .tds-link--icon-trailing > .tds-icon {
   right: var(--tds-link--icon-margin);
 }
 [dir='rtl'] .tds-link > .tds-icon--inline:first-child,
 [dir='rtl'] .tds-link--icon-leading > .tds-icon {
   left: unset;
   right: var(--tds-link--icon-margin);
 }
 [dir='rtl'] .tds-link > .tds-icon--inline:last-child,
 [dir='rtl'] .tds-link--icon-trailing > .tds-icon {
   left: var(--tds-link--icon-margin);
   right: unset;
 }
 /* List */
 .tds-list {
   --tds-list--separator-color: var(--tds-color--secondary-accent);
   --tds-list--timeline-color: var(--tds-text--color);
   --tds-list-item--margin-block: var(--tds-size--1x);
   --tds-list-item--padding-inline: 0;

   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 /* Variants */
 .tds-list--ordered,
 .tds-list--unordered,
 .tds-list--padded,
 .tds-list--timeline {
   --tds-list-item--padding-inline: var(--tds-size--half);

   -webkit-padding-start: var(--tds-size--3x);

           padding-inline-start: var(--tds-size--3x);
 }
 .tds-list--ordered {
   list-style-type: decimal;
 }
 .tds-list--unordered {
   list-style-type: disc;
 }
 .tds-list--align-end {
   list-style-type: none;
   text-align: end;
 }
 .tds-list--borders {
   --tds-list-item--margin-block: var(--tds-size--2x);
 }
 .tds-list--small-borders {
   --tds-list-item--margin-block: var(--tds-size--3x);
 }
 .tds-list--timeline {
   --tds-list-item--margin-block: var(--tds-size--2x);
   --tds-list-item--padding-inline: 12px;
 }
 /* Modifiers */
 .tds-list--light {
   --tds-list--timeline-color: var(--tds-color--secondary-accent);
 }
 .tds-list--caption {
   --tds-list--timeline-color: var(--tds-color--secondary-accent);
   --tds-list-item--margin-block: var(--tds-size--half);

   font-size: 12px;
 }
 /* List Items */
 .tds-list > li {
   -webkit-padding-end: var(--tds-list-item--padding-inline);
           padding-inline-end: var(--tds-list-item--padding-inline);
   -webkit-padding-start: var(--tds-list-item--padding-inline);
           padding-inline-start: var(--tds-list-item--padding-inline);
   position: relative;
 }
 /* Horizontal */
 .tds-list--horizontal > li {
   display: inline-block;
 }
 .tds-list--light > li,
 .tds-list--caption > li {
   color: var(--tds-text--color--light);
 }
 .tds-list > li:not(:last-of-type) {
   -webkit-margin-after: var(--tds-list-item--margin-block);
           margin-block-end: var(--tds-list-item--margin-block);
 }
 @media (min-width: 600px) {
   .tds-list--horizontal > li:not(:last-of-type) {
     /* Copy the extra space the line-height creates in the vertical margin */
     -webkit-margin-after: 0;
             margin-block-end: 0;
     -webkit-margin-end: calc(var(--tds-list-item--margin-block) + 0.5em);
             margin-inline-end: calc(var(--tds-list-item--margin-block) + 0.5em);
   }
 }
 /*
  * Positioning for an icon if it's present at the beginning of an item
  * Small icons need shifting a smidge more than default icons
  *
  * Since the quiet space for both small and default icon sizes is
  * identical (-1px), we can rely on a hard-coded value.
  *
  * Providing a custom property such that consumers can tap into the positioning of the icon if the default
  * styling does not quiet fit their exact needs.
  */
 .tds-list > li > .tds-icon:first-child {
   --tds-icon--list-inset: calc((var(--tds-size--3x) / 2 * -1) - (var(--tds-icon--size) / 2) - 1px);

   position: absolute;
   left: var(--tds-icon--list-inset);
   top: calc(var(--tds-size--1x) + 2px);
   transform: translateY(-50%);
   z-index: 1;
   background-color: var(--tds-scrim--background, var(--tds-color--inverse));
   transition: background-color 0.3s ease;
 }
 [dir='rtl'] .tds-list > li > .tds-icon:first-child {
   left: auto;
   right: var(--tds-icon--list-inset);
 }
 /* Separator Types */
 .tds-list--borders > li::before,
 .tds-list--small-borders > li::before,
 .tds-list > li.tds-list-item--separated::before {
   background-color: var(--tds-list--separator-color);
   block-size: 1px;
   content: '';
   display: block;
 }
 .tds-list--borders > li::before {
   -webkit-margin-after: var(--tds-list-item--margin-block);
           margin-block-end: var(--tds-list-item--margin-block);
 }
 .tds-list--small-borders > li::before {
   -webkit-margin-after: calc(var(--tds-list-item--margin-block) / 2);
           margin-block-end: calc(var(--tds-list-item--margin-block) / 2);
   max-inline-size: var(--tds-size--4x);
 }
 .tds-list > li.tds-list-item--separated::before {
   -webkit-margin-after: var(--tds-list-item--margin-block);
           margin-block-end: var(--tds-list-item--margin-block);
 }
 /* Timeline */
 .tds-list--timeline > li::before,
 .tds-list--timeline > li:not(:last-of-type)::after {
   background-color: currentColor;
   content: '';
   left: -14px;
   position: absolute;
   top: 0.5em;
 }
 .tds-list--timeline > li::before {
   block-size: var(--tds-size--1x);
   border-radius: var(--tds-size--1x);
   inline-size: var(--tds-size--1x);
   -webkit-margin-start: -3px;
           margin-inline-start: -3px;
 }
 .tds-list--timeline > li:not(:last-of-type)::after {
   block-size: calc(100% + var(--tds-list-item--margin-block));
   display: block;
   inline-size: 2px;
 }
 [dir='rtl'] .tds-list--timeline > li::before,
 [dir='rtl'] .tds-list--timeline > li:not(:last-of-type)::after {
   left: auto;
   right: -14px;
 }
 .tds-loader {
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   position: fixed;
   background-color: var(--tds-color--scrim--semitransparent);
   pointer-events: none;
   opacity: 0;
   transition: opacity 0.5s ease;
 }
 .tds-loader--show {
   opacity: 1;
   pointer-events: inherit;
 }
 .tds-loader .tds-icon {
   bottom: 0;
   left: 0;
   margin: auto;
   position: absolute;
   right: 0;
   top: 0;
 }
 .tds-loader .tds-icon-loader {
   --tds-icon--size: var(--tds-size--6x);

   -webkit-animation: var(--tds--rotating);

           animation: var(--tds--rotating);
   opacity: var(--tds-opacity--70);
 }
 .tds-loader .tds-icon-logo {
   -webkit-animation: var(--tds--pulsing);
           animation: var(--tds--pulsing);
   color: var(--tds-text--color--light);
 }
 .tds-locale-selector {
   display: flex;
   inline-size: 100%;
   justify-content: center;
   margin: auto;
   max-inline-size: 1260px;
   padding: 0 var(--tds-size--2x);
 }
 .tds-locale-selector--narrow {
   flex-direction: column;
   justify-content: flex-start;
   padding: 0;
 }
 .tds-locale-selector-trigger {
   display: flex;
   cursor: pointer;
   background-color: transparent;
   transition: background-color 0.33s ease;
 }
 .tds-locale-selector-column {
   inline-size: 100%;
   margin: 0 auto;
   max-inline-size: 700px;
 }
 .tds-locale-selector-superregion {
   padding: 0 12px var(--tds-size--3x);
 }
 .tds-locale-selector-region {
   -moz-column-count: 2;
        column-count: 2;
   -moz-column-gap: var(--tds-size--2x);
        column-gap: var(--tds-size--2x);
   -webkit-margin-end: -12px;
           margin-inline-end: -12px;
   -webkit-margin-start: -12px;
           margin-inline-start: -12px;
 }
 .tds-locale-selector-region h3 {
   -webkit-padding-after: 12px;
           padding-block-end: 12px;
   -webkit-padding-before: var(--tds-size--2x);
           padding-block-start: var(--tds-size--2x);
 }
 /* Narrow variant (always-mobile/single-column layout) */
 .tds-locale-selector--narrow .tds-locale-selector-region {
   -moz-column-count: 1;
        column-count: 1;
 }
 /* Match header bottom padding to card padding */
 .tds-site-header-modal .tds-locale-selector h3 {
   -webkit-padding-after: 12px;
           padding-block-end: 12px;
   -webkit-padding-before: var(--tds-size--2x);
           padding-block-start: var(--tds-size--2x);
 }
 .tds-locale-selector--narrow .tds-locale-selector-column:first-child .tds-locale-selector-superregion:first-child > h3 {
   -webkit-padding-before: 0;
           padding-block-start: 0;
 }
 .tds-locale-selector-country {
   -moz-column-break-inside: avoid;
        break-inside: avoid;
   flex-flow: row wrap;
   transition: background-color 0.33s ease;
 }
 .tds-locale-selector-country:not(:last-child) {
   -webkit-margin-after: var(--tds-size--half);
           margin-block-end: var(--tds-size--half);
 }
 /* Override default card background */
 .tds-card.tds-locale-selector-trigger,
 .tds-card.tds-locale-selector-country {
   background-color: transparent;
   border-radius: 12px;
 }
 .tds-card.tds-locale-selector-trigger .tds-card-body,
 .tds-card.tds-locale-selector-country {
   padding: var(--tds-size--1x) 12px;
 }
 .tds-card.tds-locale-selector-trigger .tds-card-body {
   -webkit-padding-start: var(--tds-size--1x);
           padding-inline-start: var(--tds-size--1x);
 }
 .tds-card.tds-locale-selector-trigger .tds-icon {
   -webkit-margin-before: calc(var(--tds-size--1x) - 2px);
           margin-block-start: calc(var(--tds-size--1x) - 2px);
   -webkit-margin-start: 12px;
           margin-inline-start: 12px;
 }
 .tds-locale-selector-trigger:focus {
   outline: none;
 }
 .tds--indicate-focus .tds-locale-selector-trigger:focus {
   outline: var(--tds-outline--focus);
 }
 /* Make sure hover states don't get confusing on touch devices */
 @media (hover: hover) {
   .tds-card.tds-locale-selector-trigger:hover,
   .tds-card.tds-locale-selector-country:hover {
     background-color: var(--tds-color--tertiary);
   }
 }
 .tds-card.tds-locale-selector-country--selected {
   background-color: var(--tds-color--tertiary);
 }
 .tds-locale-selector-language {
   font-size: 12px;
   -webkit-margin-before: 2px;
           margin-block-start: 2px;
 }
 .tds-locale-selector-language:not(:last-child) {
   -webkit-margin-end: var(--tds-size--2x);
           margin-inline-end: var(--tds-size--2x);
 }
 .tds-locale-selector-language--selected {
   color: var(--tds-color--secondary);
   pointer-events: none;
 }
 /* Custom breakpoint based on columns */
 @media (max-width: 1240px) {
   .tds-locale-selector {
     flex-direction: column;
     justify-content: flex-start;
   }
 }
 @media (max-width: 599px) {
   .tds-locale-selector-region {
     -moz-column-count: 1;
          column-count: 1;
   }

   .tds-locale-selector-column:first-child .tds-locale-selector-superregion:first-child > h3 {
     -webkit-padding-before: 0;
             padding-block-start: 0;
   }
 }
 .tds-lang--ja,
 .tds-lang--zh,
 .tds-lang--ko,
 .tds-country--cn,
 .tds-country--tw,
 .tds-country--jp,
 .tds-country--kr {
   --tds-heading--font-weight: 700;
 }
 .tds-card.tds-locale-selector-country .tds-text--h6 {
   inline-size: 100%;
 }
 .tds-card.tds-locale-selector-country > .tds-list {
   margin: 0;
 }
 .tds-media-player {
   --tds-media-player--color: var(--tds-color--white, #fff);

   visibility: hidden;
 }
 .tds-media-player.ready {
   visibility: visible;
 }
 .tds-media-player-range {
   --tds-form-item--grid-template-areas: 'label caption input feedback';

   align-items: center;
   grid-template-columns: -webkit-min-content 0 1fr 0;
   grid-template-columns: min-content 0 1fr 0;
   grid-template-rows: unset;
 }
 .tds-media-player-range .tds-form-label-wrap {
   --tds-form-label--color: var(--tds-media-player--color, #fff);

   -webkit-padding-end: 12px;

           padding-inline-end: 12px;
   -webkit-padding-start: 0;
           padding-inline-start: 0;
 }
 .tds-media-player .tds-icon {
   --tds-icon--size: 28px;

   fill: var(--tds-media-player--color, #fff);
 }
 .tds-media-player .tds-icon > g { display: none; }
 .tds-media-player [aria-pressed='false'] .tds-icon > g:first-of-type { display: initial; }
 .tds-media-player [aria-pressed='true'] .tds-icon:not(.tds-icon-speaker) > g:last-of-type { display: initial; }
 .tds-media-player [aria-pressed='true'] .tds-icon.tds-icon-speaker--low > g:not(:first-of-type, :last-of-type) { display: initial; }
 .tds-media-player [aria-pressed='true'] .tds-icon.tds-icon-speaker--high > g:is(:last-of-type) { display: initial; }
 /**
  * tds-modals core styles
  * - Import this file only if you are running your own css post-processor and know what you're doing.
  */
 .tds-modal--is-open {
   overflow: hidden;
 }
 /* Core Modal */
 .tds-modal {
   --tds-modal-border-radius: var(--tds-size--1x);

   block-size: var(--tds-modal--height);
   bottom: 0;
   display: flex;
   flex-direction: column;
   inline-size: var(--tds-modal--width);
   left: 0;
   position: fixed;
   right: 0;

   /* Note: -webkit-fill-available does not work inside a calc rule */
   background-color: var(--tds-dialog--background-color);
   border: none;
   border-radius: var(--tds-modal-border-radius) var(--tds-modal-border-radius) 0 0;
   box-shadow: var(--tds-box-shadow--large-reverse);
   color: var(--tds-text--color);
   max-block-size: calc(100% - var(--tds-size--3x));
   overflow-y: auto;
   padding: 0;
   z-index: 1000;

   /* Only works in some cases, kept for future-proofing: AWSM-4162 */
   -ms-scroll-chaining: none;
       overscroll-behavior: contain;
 }
 /* Variants */
 .tds-modal--fullscreen,
 .tds-modal--sheet-left,
 .tds-modal--sheet-right {
   --tds-modal--height: 100vh;

   border-radius: 0;
   bottom: 0;
   max-block-size: 100vh;
   min-block-size: 100vh;
   top: 0;
 }
 @media (hover: hover) {
   .tds-modal--fullscreen,
   .tds-modal--sheet-left,
   .tds-modal--sheet-right {
     max-block-size: -webkit-fill-available;
   }
 }
 .tds-modal--fullscreen {
   --tds-modal--width: 100vw;

   max-inline-size: 100vw;
 }
 .tds-modal--sheet-left,
 .tds-modal--sheet-right {
   --tds-modal--width: 414px;

   max-inline-size: calc(100vw - var(--tds-size--6x));
 }
 .tds-modal--sheet-small {
   --tds-modal--width: 311px;
 }
 /* stylelint-disable no-descending-specificity */
 .tds-modal--sheet-left,
 [dir='rtl'] .tds-modal--sheet-right {
   left: 0;
   right: auto;
 }
 .tds-modal--sheet-right,
 [dir='rtl'] .tds-modal--sheet-left {
   left: auto;
   right: 0;
 }
 /* stylelint-enable no-descending-specificity */
 /* Closed State */
 .tds-modal:not([open]) {
   opacity: 0;
   transform: translateX(0) translateY(50%);
   pointer-events: none;
   visibility: hidden;
   transition: opacity 0.5s var(--tds-bezier), transform 0.5s var(--tds-bezier), visibility 0s 0.5s;
 }
 .tds-modal--fullscreen:not([open]) {
   transform: translateX(0) translateY(50%);
 }
 /* stylelint-disable no-descending-specificity */
 .tds-modal--sheet-left:not([open]),
 [dir='rtl'] .tds-modal--sheet-right:not([open]) {
   transform: translateX(-50%) translateY(0);
 }
 .tds-modal--sheet-right:not([open]),
 [dir='rtl'] .tds-modal--sheet-left:not([open]) {
   transform: translateX(50%) translateY(0);
 }
 /* stylelint-enable no-descending-specificity */
 /* Open State */
 .tds-modal[open] {
   opacity: 1;
   transform: translateX(0) translateY(0);
   pointer-events: inherit;
   visibility: inherit;
   transition: opacity 0.5s var(--tds-bezier), transform 0.5s var(--tds-bezier), visibility 0s 0s;
 }
 @media (max-width: 599px) {
   :root,
   .tds-component-preview {
     --tds-modal--height: auto;
     --tds-modal--width: 100vw;
   }

   .tds-modal {
     min-block-size: 25vh;
   }
 }
 @media (min-width: 600px) {
   :root,
   .tds-component-preview {
     --tds-modal--height: auto;
     --tds-modal--width: 772px;
   }

   .tds-modal {
     --tds-modal-border-radius: var(--tds-size--2x);

     bottom: 50%;
     margin: auto;
     max-inline-size: calc(100vw - var(--tds-size--12x));
     min-block-size: var(--tds-size--8x);
     max-block-size: calc(100% - var(--tds-size--12x));
     border-radius: var(--tds-modal-border-radius);
     box-shadow: var(--tds-box-shadow--large);
   }

   .tds-modal--fullscreen,
   .tds-modal--sheet-left,
   .tds-modal--sheet-right {
     border-radius: 0;
     max-block-size: 100vh;
     bottom: 0;
   }

   .tds-modal--fullscreen {
     max-inline-size: 100vw;
   }

   .tds-modal:not([open]) {
     transform: translateX(0) translateY(100%);
   }

   /* stylelint-disable no-descending-specificity */
   .tds-modal--sheet-left:not([open]),
   [dir='rtl'] .tds-modal--sheet-right:not([open]) {
     transform: translateX(-50%) translateY(0);
   }

   .tds-modal--sheet-right:not([open]),
   [dir='rtl'] .tds-modal--sheet-left:not([open]) {
     transform: translateX(50%) translateY(0);
   }

   /* stylelint-enable no-descending-specificity */

   .tds-modal[open] {
     transform: translateX(0) translateY(50%);
   }

   .tds-modal--fullscreen[open],
   .tds-modal--sheet-left[open],
   .tds-modal--sheet-right[open] {
     transform: translateX(0) translateY(0);
   }
 }
 /* Modal Backdrop */
 dialog.tds-modal::-webkit-backdrop {
   display: none !important;
 }
 dialog.tds-modal::backdrop {
   display: none !important;
 }
 :root,
 .tds-component-preview {
   --tds-modal-backdrop--rgb: 0, 0, 0;
 }
 .tds-modal-backdrop {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   inline-size: 120vw;
   block-size: 120vh;
   background-color: rgba(var(--tds-modal-backdrop--rgb), var(--tds-modal-backdrop--opacity));
   z-index: 999;
   transition: background-color 0.5s ease, -webkit-backdrop-filter 0.5s ease;
   transition: background-color 0.5s ease, backdrop-filter 0.5s ease;
   transition: background-color 0.5s ease, backdrop-filter 0.5s ease, -webkit-backdrop-filter 0.5s ease;
 }
 .tds-modal:not([open]) + .tds-modal-backdrop {
   --tds-modal-backdrop--opacity: 0;

   -webkit-backdrop-filter: blur(0);

           backdrop-filter: blur(0);
   pointer-events: none;
 }
 .tds-modal[open] + .tds-modal-backdrop {
   --tds-modal-backdrop--opacity: 0.3;

   -webkit-backdrop-filter: blur(4px);

           backdrop-filter: blur(4px);
   pointer-events: inherit;
 }
 /* Modal Actions */
 .tds-modal-header {
   align-items: flex-start;
   background-color: var(--tds-dialog--background-color);
   display: flex;
   flex-direction: row-reverse;
   justify-content: space-between;
   padding: var(--tds-size--2x);
   -webkit-padding-start: var(--tds-size--3x);
           padding-inline-start: var(--tds-size--3x);
   position: -webkit-sticky;
   position: sticky;
   top: 0;
   z-index: 10;
 }
 .tds-modal-close {
   padding: var(--tds-size--1x);
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
   border: none;
   background-color: transparent;
   cursor: pointer;
   outline: none;
   z-index: 10;
   border-radius: var(--tds-border-radius--pill);
   -webkit-backdrop-filter: blur(4px);
           backdrop-filter: blur(4px);
   transition: background-color 0.33s ease;
 }
 [dir='rtl'] .tds-modal-close {
   left: 0;
   right: auto;
 }
 .tds-modal-close:hover {
   background-color: var(--tds-pill--blur-color);
 }
 .tds-modal-close:focus {
   outline: none;
 }
 .tds-modal-close:focus-visible {
   outline: var(--tds-outline--focus);
   outline-offset: 2px;
 }
 .tds--indicate-focus .tds-modal-close:focus {
   outline: var(--tds-outline--focus);
   outline-offset: 2px;
 }
 .tds-modal-close--over-image:hover {
   background-color: rgba(var(--tds-color--rgb-shade), 0.16);
 }
 .tds-modal-close--over-image .tds-modal-close-icon {
   color: var(--tds-color--inverse);
 }
 /* Header & Footer */
 .tds-modal-header > :is(h1, h2, h3) {
   -webkit-padding-after: 0;
           padding-block-end: 0;
   transition: padding 0.33s var(--tds-bezier), font-size 0.33s var(--tds-bezier), line-height 0.33s var(--tds-bezier);
 }
 .tds-modal-footer {
   position: -webkit-sticky;
   position: sticky;
   bottom: calc(var(--tds-size--3x) * -1);
   padding: var(--tds-size--3x) var(--tds-size--3x) var(--tds-size--6x);
   background-color: var(--tds-dialog--background-color);
   transition: padding 0.33s var(--tds-bezier);
 }
 /* Shrink the header/footer when internally scrolling */
 .tds-modal--scrolling .tds-modal-header > :is(h1, h2, h3) {
   font-size: var(--tds-font-size--40);
   line-height: var(--tds-line-height--50);
   -webkit-padding-before: var(--tds-size--1x);
           padding-block-start: var(--tds-size--1x);
 }
 /* Content */
 .tds-modal-content {
   padding: 0 var(--tds-size--3x) var(--tds-size--6x);
 }
 .tds-modal--sheet-small .tds-modal-content {
   -webkit-padding-before: var(--tds-size--1x);
           padding-block-start: var(--tds-size--1x);
 }
 .tds-modal-content:not(:last-child) {
   -webkit-padding-after: 0;
           padding-block-end: 0;
 }
 @media (min-width: 600px) {
   .tds-modal-header {
     -webkit-padding-start: var(--tds-size--6x);
             padding-inline-start: var(--tds-size--6x);
   }

   .tds-modal-content,
   .tds-modal-footer {
     -webkit-padding-start: var(--tds-size--6x);
             padding-inline-start: var(--tds-size--6x);
     -webkit-padding-end: var(--tds-size--6x);
             padding-inline-end: var(--tds-size--6x);
   }

   .tds-modal--sheet-small .tds-modal-content,
   .tds-modal--sheet-small .tds-modal-footer {
     -webkit-padding-start: var(--tds-size--4x);
             padding-inline-start: var(--tds-size--4x);
     -webkit-padding-end: var(--tds-size--4x);
             padding-inline-end: var(--tds-size--4x);
   }
 }
 .tds-pagination {
   --pagination-primary--display: initial;
   --pagination-primary-select--margin-horiz: var(--tds-size--1x);
   --pagination-secondary--display: none;

   text-align: center;
 }
 .tds-pagination,
 .tds-pagination-navigation {
   color: var(--tds-text--color);
   font-family: var(--tds-font-family--combined);
   font-weight: var(--tds-font-weight--medium);
 }
 .tds-pagination-navigation {
   line-height: initial;
 }
 /* TODO: combine with disabled in normalize.css in the Tonight release (AWSM-4915) */
 .tds-pagination-navigation[aria-disabled='true'] {
   box-shadow: 0 0 0 transparent;
   cursor: not-allowed;
   opacity: var(--tds-opacity--50);
   pointer-events: none;
 }
 .tds-pagination select {
   background-color: transparent;
   border: 0;
   color: var(--tds-text--color);
   margin: auto;
 }
 @media (max-width: 599px) {
   .tds-pagination-primary > select {
     display: block;
     margin: var(--tds-size--1x) auto;
   }
 }
 .tds-pagination .tds-pagination-current {
   display: inline-block;
   position: relative;
 }
 .tds-pagination-primary .tds-pagination-current {
   margin: 0 var(--tds-size--1x);
 }
 /* TODO: This is unnecessarily specific in order to create the correct UI without breaking
 the existing UI component. */
 .tds-pagination .tds-pagination-current select {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
   -webkit-padding-end: var(--tds-size--3x);
           padding-inline-end: var(--tds-size--3x);
   position: relative;
   z-index: 1;
 }
 .tds-pagination-primary .tds-pagination-current select {
   -webkit-padding-start: var(--tds-size--1x);
           padding-inline-start: var(--tds-size--1x);
 }
 .tds-pagination-secondary .tds-pagination-current select {
   -webkit-padding-start: var(--tds-size--half);
           padding-inline-start: var(--tds-size--half);
 }
 .tds-pagination .tds-pagination-current select:focus {
   outline: var(--tds-outline--focus);
 }
 .tds-pagination-primary .tds-pagination-current select:focus {
   outline-offset: 2px;
 }
 .tds-pagination .tds-pagination-current select + .tds-icon {
   position: absolute;
   right: var(--tds-size--half);

   /* Visual offset to align small down chevron to capital characters */
   pointer-events: none;
   top: calc(50% - 5px);
   z-index: 0;
 }
 @media (max-width: 599px) {
   /* Stop Zooming in on select elements */
   .tds-pagination select {
     font-size: var(--tds-size--2x);
   }
 }
 @media (min-width: 600px) {
   .tds-pagination-primary > select {
     margin: 0 var(--tds-size--2x);
   }

   .tds-pagination-primary .tds-pagination-current {
     margin: 0 var(--tds-size--2x);
   }
 }
 .tds-pagination-primary {
   display: var(--pagination-primary--display);
   justify-content: space-around;
 }
 .tds-pagination-secondary {
   display: var(--pagination-secondary--display);
   inline-size: -webkit-max-content;
   inline-size: -moz-max-content;
   inline-size: max-content;
   white-space: nowrap;
 }
 .tds-pagination-secondary--key_value {
   color: var(--pagination--key_value-color);
 }
 .tds-pagination-secondary--value {
   color: var(--tds-text--color);
 }
 .tds-pagination-navigation + .tds-pagination-navigation {
   -webkit-margin-start: var(--tds-size--3x);
           margin-inline-start: var(--tds-size--3x);
   position: relative;
 }
 .tds-pagination-navigation + .tds-pagination-navigation::before {
   background-color: var(--tds-color--secondary);
   block-size: 100%;
   content: '';
   display: block;
   inline-size: 1px;
   left: -14px;
   position: absolute;
   top: 0;
 }
 [dir='rtl'] .tds-pagination-navigation + .tds-pagination-navigation::before {
   left: auto;
   right: -14px;
 }
 @media (min-width: 900px) {
   .tds-pagination {
     --pagination-primary-select--margin-horiz: var(--tds-size--2x);

     display: flex;
     justify-content: space-between;
   }

   .tds-pagination-primary {
     --pagination-primary--display: initial;

     inline-size: 100%;
   }

   .tds-pagination-secondary {
     --pagination-secondary--display: initial;
   }

   .tds-pagination-secondary label {
     color: var(--tds-text--color);
   }

   .tds-pagination .tds-pagination-current select + .tds-icon {
     opacity: 1;
   }

   /* .tds-pagination .tds-pagination-current select + .tds-icon {
     right: var(--tds-size--1x);
     top: calc(50% - var(--tds-size--half));
   }
   .tds-pagination-current {
     display: inline-block;
     padding-inline-end: var(--tds-size--2x);
     position: relative;
   } */
 }
 /* TODO: All Pagination examples are set to font-size: 12px; / line-height: 24px;
    Resolve this in Tonight / Q4 / TDS 6 / AWSM-4928
 */
 .tds-pagination--dense,
 .tds-pagination--dense p {
   font-size: var(--tds-font-size--20);
   line-height: var(--tds-line-height--30);
 }
 @media (min-width: 900px) {
   .tds-pagination--dense {
     --pagination-primary-select--margin-horiz: var(--tds-size--2x);
   }
 }
 .tds-pagination--show-numbers .tds-pagination-primary {
   --pagination-primary--display: flex;

   justify-content: center;
 }
 .tds-pagination--show-numbers .tds-pagination-current {
   line-height: 16px;
   margin: 0 var(--pagination-primary-select--margin-horiz);
 }
 .tds-pagination--show-numbers .tds-pagination-secondary .tds-pagination-current {
   margin: 0;
 }
 .tds-pagination--show-numbers .tds-pagination-navigation {
   align-content: center;
   align-items: center;
   display: flex;
   justify-content: center;
 }
 .tds-selector {
   --tds-selector-font-color--selected: var(--tds-color--white);

   display: grid;
   grid-gap: var(--tds-size--1x) calc(var(--tds-size--1x) * 1.5);

   /* --tds-column-count available as an override for other classes (eg. date-filter) */
   grid-template-columns: repeat(var(--tds-column-count, auto-fill), var(--tds-column-width, minmax(200px, 1fr)));
   justify-items: stretch;
   -webkit-padding-after: var(--tds-size--1x);
           padding-block-end: var(--tds-size--1x);
 }
 :is(.tds-theme--replicant, .tds-theme--marketing) .tds-scrim--black .tds-selector,
 .tds-scrim--black:is(.tds-theme--replicant, .tds-theme--marketing) .tds-selector {
   --tds-selector-font-color--selected: var(--tds-color--grey20);
 }
 .tds-selector--dense {
   --tds-height--pill: var(--tds-size--4x);
 }
 .tds-selector--col4 {
   --tds-column-count: 4;
   --tds-column-width: 1fr;
 }
 /* Options */
 .tds-selector-input {
   opacity: 0;
   pointer-events: none;
   position: absolute;
 }
 .tds-selector-label {
   align-items: center;
   block-size: var(--tds-height--pill);
   border-radius: var(--tds-border-radius--pill);
   cursor: pointer;
   display: flex;
   justify-content: center;
   padding: 0 calc(var(--tds-size--1x) * 1.5);
   text-align: center;
   transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
 .tds-selector-label:hover {
   background-color: var(--tds-color--tertiary);
 }
 .tds-selector-input:checked + .tds-selector-label {
   background-color: var(--tds-color--primary);
   color: var(--tds-selector-font-color--selected);
   font-weight: var(--tds-font-weight--medium);
 }
 .tds-selector-input:checked + .tds-selector-label:hover {
   background-color: var(--tds-color--primary-highlight);
 }
 /* stylelint-disable */
 .tds-selector-input:focus-visible + .tds-selector-label {
   outline: var(--tds-outline--focus);
   outline-offset: 2px;
 }
 /* While duplicating the line above, they cannot be combined */
 .tds--indicate-focus .tds-selector-input:focus + .tds-selector-label {
   outline: var(--tds-outline--focus);
   outline-offset: 2px;
 }
 /* TODO: Refactor imports for site-header */
 .tds-site-footer {
   font-size: var(--tds-font-size--20);
 }
 .tds-footer-nav {
   inline-size: 100%;
 }
 .tds-footer-nav > ul {
   align-items: center;
   display: flex;
   flex-flow: column nowrap;
   justify-content: center;
 }
 .tds-site-footer--align_start .tds-footer-nav > ul {
   justify-content: flex-start;
 }
 .tds-footer-nav > ul > li {
   padding: var(--tds-size--half) 0;
 }
 .tds-footer-nav .tds-footer-item {
   color: var(--tds-text--color--light);
   font-family: var(--tds-font-family--combined);
   font-weight: var(--tds-font-weight--medium);
 }
 .tds-footer-item .tds-link:not(.tds--disabled):not(.tds-link--primary) {
   box-shadow: none;
   color: var(--tds-text--color--light);
 }
 .tds-footer-item .tds-link:not(.tds--disabled):not(.tds-link--primary):hover {
   box-shadow: none;
 }
 @media (min-width: 600px) {
   .tds-footer-nav > ul {
     flex-flow: row wrap;
   }

   .tds-footer-nav > ul > li {
     -webkit-padding-before: var(--tds-size--1x);
             padding-block-start: var(--tds-size--1x);
     -webkit-padding-after: var(--tds-size--1x);
             padding-block-end: var(--tds-size--1x);
   }

   .tds-footer-nav > ul > li:first-child {
     -webkit-padding-start: 0;
             padding-inline-start: 0;
   }

   .tds-footer-nav > ul > li:last-child {
     -webkit-padding-end: 0;
             padding-inline-end: 0;
   }
 }
 /* Header */
 :root,
 .tds-component-preview {
   --tds-site-header--height: 54px;
 }
 /** Header Alignment --
   * ---------------------------------------------------------- */
 .tds-site-header {
   display: flex;
   flex-flow: row wrap;
   justify-content: space-between;
   position: relative;
   z-index: 10;
 }
 .tds-site-header--sticky {
   position: -webkit-sticky;
   position: sticky;
   top: 0;
 }
 .tds-site-header .tds-align--start {
   justify-content: flex-start;
   -webkit-padding-start: var(--tds-size--1x);
           padding-inline-start: var(--tds-size--1x);
 }
 .tds-site-header .tds-align--center {
   flex-grow: 1;
   justify-content: center;
   -webkit-padding-end: var(--tds-size--1x);
           padding-inline-end: var(--tds-size--1x);
   -webkit-padding-start: var(--tds-size--1x);
           padding-inline-start: var(--tds-size--1x);
 }
 .tds-site-header .tds-align--end {
   justify-content: flex-end;
   -webkit-padding-end: var(--tds-size--1x);
           padding-inline-end: var(--tds-size--1x);
 }
 @media (min-width: 600px) {
   /* Combines with logo and nav item padding to match 36px in the content container */
   .tds-site-header .tds-align--start {
     -webkit-padding-start: 20px;
             padding-inline-start: 20px;
   }

   .tds-site-header .tds-align--end {
     -webkit-padding-end: 20px;
             padding-inline-end: 20px;
   }
 }
 /* TODO: For MVP Site Header skips tablet layout */
 @media (min-width: 1200px) {
   .tds-site-nav--flyout {
     display: flex;
     justify-content: flex-end;
     flex-grow: 1;
   }

   .tds-site-nav--center {
     grid-area: center;
   }

   .tds-site-nav--end {
     grid-area: end;
   }

   .tds-site-header .tds-align--start {
     min-inline-size: 270px;
     -webkit-padding-start: var(--tds-size--4x);
             padding-inline-start: var(--tds-size--4x);
   }

   .tds-site-header .tds-align--end {
     min-inline-size: 270px;
     -webkit-padding-end: var(--tds-size--4x);
             padding-inline-end: var(--tds-size--4x);
   }
 }
 /* Specific spacing for SHL */
 .tds-site-header-modal {
   -webkit-padding-after: var(--tds-size--6x);
           padding-block-end: var(--tds-size--6x);
 }
 .tds-site-header-modal .tds-modal-header {
   padding: 20px;
 }
 /** Nav Sections --
   * ---------------------------------------------------------- */
 :root,
 .tds-component-preview {
   --tds-site-nav--flyout-height: 0;
   --tds-site-nav--flyout-width: 312px;
 }
 .tds-site-nav--flyout:focus-within,
 .tds-site-nav--flyout[aria-expanded='true'] {
   /* Resets the colors in case the header is using the dark colorscheme */
   --tds-color--primary: var(--tds-color--blue30);
   --tds-color--secondary: var(--tds-color--grey10);
   --tds-color--secondary-highlight: var(--tds-color--black);
   --tds-color--tertiary: var(--tds-color--grey70);
   --tds-text--color: var(--tds-color--grey20);
   --tds-text--color--light: var(--tds-color--grey30);
 }
 .tds-site-nav--flyout-backdrop {
   -webkit-backdrop-filter: blur(0);
           backdrop-filter: blur(0);
   background-color: transparent;
   bottom: 0;
   cursor: pointer;
   left: 0;
   pointer-events: none;
   position: fixed;
   right: 0;
   top: 0;
   transition: 0.5s ease;
   z-index: -5;
 }
 /* Performance enhancement
  * - This tells the browser that the flyout is likely to animate soon
  * - In Chrome, this sets aside dedicated resources to perform the animation
  * - so we only want to engage it when there's some kind of indication, like :focus-within */
 .tds-site-header:hover .tds-site-nav--flyout-backdrop,
 .tds-site-header:focus-within .tds-site-nav--flyout-backdrop {
   will-change: transform, backdrop-filter;
 }
 .tds-site-nav--flyout-backdrop[aria-expanded='true'] {
   -webkit-backdrop-filter: blur(4px);
           backdrop-filter: blur(4px);
   background-color: rgba(128, 128, 128, 0.25);
   pointer-events: inherit;
   transform: translateX(0);
 }
 /* Flyout Nav for Mobile TODO: For MVP Site Header skips tablet layout */
 @media (max-width: 599px), (min-width: 600px) and (max-width: 899px), (min-width: 900px) and (max-width: 1199px) {
   :root,
   .tds-component-preview {
     --tds-nav-controls-height: 80px;
     --tds-site-nav--flyout-width: 312px;
     --tds-site-nav--flyout-height: 0;
   }

   .tds-site-nav--flyout {
     --tds-nav-item--padding: var(--tds-size--2x);

     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     overflow-x: hidden;
     overflow-y: auto;
     background-color: var(--tds-color--white);
     box-shadow: var(--tds-box-shadow--off);
     max-width: calc(100vw - var(--tds-size--5x));
     inline-size: var(--tds-site-nav--flyout-width);
     transform: translateX(var(--tds-site-nav--flyout-width));
     visibility: hidden;
     transition: transform 0.5s ease, visibility 0.5s;
     z-index: 110;
   }

   .tds-site-nav--flyout .tds-site-nav-item {
     --tds-nav-item--padding: var(--tds-size--2x);
   }

   .tds-site-nav--flyout .tds-site-nav-item--small {
     --tds-nav-item--padding: var(--tds-size--1x);
   }

   /* Performance enhancement
   * - This tells the browser that the flyout is likely to animate soon
   * - In Chrome, this sets aside dedicated resources to perform the animation
   * - so we only want to engage it when there's some kind of indication, like :focus-within */
   .tds-site-header:hover .tds-site-nav--flyout,
   .tds-site-header:focus-within .tds-site-nav--flyout {
     will-change: transform;
   }

   .tds-banner + .tds-site-header .tds-site-nav--flyout {
     top: var(--tds-site-banner--height);
   }

   .tds-site-nav--flyout-backdrop {
     z-index: 105;
   }

   /* Active State for the fly-out */
   .tds-site-nav--flyout[aria-expanded='true'] {
     box-shadow: var(--tds-box-shadow--large);
     transform: translateX(0);
     visibility: inherit;
     transition: transform 0.5s var(--tds-bezier), visibility 0s;
   }

   /* Panel controls for contents */
   .tds-site-nav-controls {
     display: flex;
     flex-flow: row-reverse nowrap;
     justify-content: space-between;
     align-items: center;
     padding: var(--tds-size--2x);
     block-size: var(--tds-nav-controls-height);
   }

   .tds-site-nav-controls .tds-site-nav-close {
     --tds-nav-item--padding: 0;
   }

   .tds-site-nav-controls .tds-icon.tds-icon-close {
     --tds-icon--size: var(--tds-size--5x);

     margin: 0;
   }

   /* Flyout contents */
   .tds-site-nav-content {
     position: absolute;
     top: var(--tds-nav-controls-height);
     left: 0;
     right: 0;
     bottom: 0;
   }

   /* Override for the locale-selector since it would normally have a 2-col tablet layout */
   .tds-site-nav-content .tds-locale-selector-region {
     -moz-column-count: 1;
          column-count: 1;
   }

   .tds-site-nav-content[data-tds-tier='1'] {
     overflow-y: auto;
   }

   .tds-site-nav-item[aria-expanded='false'],
   .tds-site-nav-content[aria-expanded='false'] {
     opacity: 0;
     transform: translateX(-24px);
     visibility: hidden;
     pointer-events: none;
     transition:
       color 0.33s ease,
       background-color 0.33s ease,
       opacity 0.5s var(--tds-bezier),
       transform 0.5s var(--tds-bezier),
       visibility 0s 0.5s,
       -webkit-backdrop-filter 0.33s ease;
     transition:
       color 0.33s ease,
       backdrop-filter 0.33s ease,
       background-color 0.33s ease,
       opacity 0.5s var(--tds-bezier),
       transform 0.5s var(--tds-bezier),
       visibility 0s 0.5s;
     transition:
       color 0.33s ease,
       backdrop-filter 0.33s ease,
       background-color 0.33s ease,
       opacity 0.5s var(--tds-bezier),
       transform 0.5s var(--tds-bezier),
       visibility 0s 0.5s,
       -webkit-backdrop-filter 0.33s ease;
   }

   [data-tds-breadcrumb][aria-expanded='false'],
   .tds-site-nav-content[aria-expanded='true'] ~ .tds-site-nav-content[aria-expanded='false'] {
     transform: translateX(var(--tds-size--3x));
   }

   .tds-site-nav-item[data-tds-breadcrumb][aria-expanded='false'] {
     transition:
       color 0.33s ease,
       background-color 0.33s ease,
       opacity 0.5s var(--tds-bezier),
       transform 0.5s var(--tds-bezier) 0.125s,
       visibility 0s 0.5s,
       -webkit-backdrop-filter 0.33s ease;
     transition:
       color 0.33s ease,
       backdrop-filter 0.33s ease,
       background-color 0.33s ease,
       opacity 0.5s var(--tds-bezier),
       transform 0.5s var(--tds-bezier) 0.125s,
       visibility 0s 0.5s;
     transition:
       color 0.33s ease,
       backdrop-filter 0.33s ease,
       background-color 0.33s ease,
       opacity 0.5s var(--tds-bezier),
       transform 0.5s var(--tds-bezier) 0.125s,
       visibility 0s 0.5s,
       -webkit-backdrop-filter 0.33s ease;
   }

   .tds-site-nav-item[aria-expanded='true'],
   .tds-site-nav-content[aria-expanded='true'] {
     opacity: 1;
     transform: translateX(0);
     visibility: inherit;
     transition:
       color 0.33s ease,
       background-color 0.33s ease,
       opacity 0.5s var(--tds-bezier),
       transform 0.5s var(--tds-bezier),
       visibility 0s 0s,
       -webkit-backdrop-filter 0.33s ease;
     transition:
       color 0.33s ease,
       backdrop-filter 0.33s ease,
       background-color 0.33s ease,
       opacity 0.5s var(--tds-bezier),
       transform 0.5s var(--tds-bezier),
       visibility 0s 0s;
     transition:
       color 0.33s ease,
       backdrop-filter 0.33s ease,
       background-color 0.33s ease,
       opacity 0.5s var(--tds-bezier),
       transform 0.5s var(--tds-bezier),
       visibility 0s 0s,
       -webkit-backdrop-filter 0.33s ease;
   }

   .tds-site-nav-item[data-tds-breadcrumb][aria-expanded='true'] {
     transition:
       color 0.33s ease,
       background-color 0.33s ease,
       opacity 0.5s var(--tds-bezier) 0.125s,
       transform 0.5s var(--tds-bezier) 0.125s,
       visibility 0s 0s,
       -webkit-backdrop-filter 0.33s ease;
     transition:
       color 0.33s ease,
       backdrop-filter 0.33s ease,
       background-color 0.33s ease,
       opacity 0.5s var(--tds-bezier) 0.125s,
       transform 0.5s var(--tds-bezier) 0.125s,
       visibility 0s 0s;
     transition:
       color 0.33s ease,
       backdrop-filter 0.33s ease,
       background-color 0.33s ease,
       opacity 0.5s var(--tds-bezier) 0.125s,
       transform 0.5s var(--tds-bezier) 0.125s,
       visibility 0s 0s,
       -webkit-backdrop-filter 0.33s ease;
   }

   .tds-site-nav-content-block[aria-expanded='false'] {
     visibility: hidden;
   }

   .tds-site-nav-content-block[aria-expanded='true'] {
     visibility: inherit;
   }

   .tds-site-nav-content-block {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     overflow-y: auto;
   }

   .tds-site-nav--flyout .tds-site-nav-items {
     flex-flow: column;
     align-items: stretch;
     padding: 0 var(--tds-size--2x);
     margin: 0;
   }

   .tds-site-nav--flyout .tds-site-nav-items:last-child {
     -webkit-margin-after: var(--tds-size--8x);
             margin-block-end: var(--tds-size--8x);
   }

   .tds-site-nav-content .tds-site-nav-item {
     inline-size: 100%;
     outline: none;
   }

   .tds-site-nav-content img {
     max-width: 100%;
   }
 }
 /* Flyout Nav Hidden on non-mobile TODO: For MVP Site Header skips tablet layout */
 @media (min-width: 1200px) {
   :root,
   .tds-component-preview {
     --tds-nav-controls-height: 48px;
   }

   .tds-site-nav--flyout {
     padding: 0;
     position: static;
     justify-content: flex-end;

     /* AWSM-3500 - Resolves a stacking context bug in Safari */
     z-index: -1;
   }

   .tds-site-nav--flyout .tds-site-nav-items {
     flex-flow: row nowrap;
   }

   .tds-site-nav-controls {
     position: absolute;
     top: var(--tds-site-header--height);
     left: var(--tds-size--1x);
   }

   .tds-site-nav--flyout[aria-expanded='false'] .tds-site-nav-controls {
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
     transition: opacity 0.5s var(--tds-bezier), visibility 0s 0.5s;
   }

   .tds-site-nav--flyout[aria-expanded='true'] .tds-site-nav-controls {
     opacity: 1;
     visibility: inherit;
     pointer-events: inherit;
     transition: opacity 0.5s var(--tds-bezier), visibility 0s 0s;
   }

   .tds-site-nav-content {
     display: flex;
     flex-grow: 1;
   }

   .tds-site-nav-content[data-tds-tier='1'] {
     inline-size: 100%;
   }

   .tds-site-nav-content[data-tds-tier]:not([data-tds-tier='1']) {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     max-height: calc(85vh - var(--tds-site-header--height));
     block-size: calc(var(--tds-site-nav--flyout-height) + var(--tds-site-header--height));
     background-color: var(--tds-color--white);
     box-shadow: var(--tds-box-shadow--large);
     z-index: -2;
     opacity: 0;
     overflow: hidden;
     transform: translateY(-24px);
     visibility: hidden;
     transition:
       opacity 0.5s var(--tds-bezier),
       transform 0.5s var(--tds-bezier),
       visibility 0s 0.5s,
       height 0.5s var(--tds-bezier);
   }

   [data-tds-tier='1']:hover + .tds-site-nav-content[data-tds-tier]:not([data-tds-tier='1']),
   [data-tds-tier='1']:focus-within + .tds-site-nav-content[data-tds-tier]:not([data-tds-tier='1']),
   .tds-site-nav-content[data-tds-tier]:not([data-tds-tier='1'])[aria-expanded='true'] {
     opacity: 1;
     transform: translateY(0);
     visibility: inherit;
     transition:
       opacity 0.5s var(--tds-bezier),
       transform 0.5s var(--tds-bezier),
       visibility 0s 0s,
       height 0.5s var(--tds-bezier);
   }

   .tds-site-nav-content-block {
     position: absolute;
     top: var(--tds-site-header--height);
     left: 0;
     right: 0;
     padding: 0 var(--tds-size--2x);
     overflow-y: auto;
     max-height: calc(85vh - var(--tds-site-header--height) - var(--tds-site-header--height, 0));
   }

   [data-tds-breadcrumb][aria-expanded='false'],
   .tds-site-nav-content-block[aria-expanded='false'] {
     opacity: 0;
     transform: translateX(-24px);
     visibility: hidden;
     transition:
       color 0.33s ease,
       background-color 0.33s ease,
       opacity 0.5s var(--tds-bezier),
       transform 0.5s var(--tds-bezier),
       visibility 0s 0.5s,
       -webkit-backdrop-filter 0.33s ease;
     transition:
       color 0.33s ease,
       backdrop-filter 0.33s ease,
       background-color 0.33s ease,
       opacity 0.5s var(--tds-bezier),
       transform 0.5s var(--tds-bezier),
       visibility 0s 0.5s;
     transition:
       color 0.33s ease,
       backdrop-filter 0.33s ease,
       background-color 0.33s ease,
       opacity 0.5s var(--tds-bezier),
       transform 0.5s var(--tds-bezier),
       visibility 0s 0.5s,
       -webkit-backdrop-filter 0.33s ease;
   }

   [data-tds-breadcrumb][aria-expanded='false'],
   .tds-site-nav-content-block[aria-expanded='true'] ~ .tds-site-nav-content-block[aria-expanded='false'] {
     transform: translateX(var(--tds-size--3x));
   }

   .tds-site-nav-content[aria-expanded='false'] > .tds-site-nav-content-block {
     transform: translateX(0);
   }

   [data-tds-breadcrumb][aria-expanded='true'],
   .tds-site-nav-content-block[aria-expanded='true'] {
     opacity: 1;
     transform: translateX(0);
     visibility: inherit;
     transition:
       color 0.33s ease,
       background-color 0.33s ease,
       opacity 0.5s var(--tds-bezier),
       transform 0.5s var(--tds-bezier),
       visibility 0s 0s,
       -webkit-backdrop-filter 0.33s ease;
     transition:
       color 0.33s ease,
       backdrop-filter 0.33s ease,
       background-color 0.33s ease,
       opacity 0.5s var(--tds-bezier),
       transform 0.5s var(--tds-bezier),
       visibility 0s 0s;
     transition:
       color 0.33s ease,
       backdrop-filter 0.33s ease,
       background-color 0.33s ease,
       opacity 0.5s var(--tds-bezier),
       transform 0.5s var(--tds-bezier),
       visibility 0s 0s,
       -webkit-backdrop-filter 0.33s ease;
   }
 }
 /** Header Logo + App Title --
   * ---------------------------------------------------------- */
 .tds-site-logo {
   align-items: center;
   display: flex;
 }
 h1.tds-site-logo {
   padding: 0;
 }
 /* TODO: Remove after stable icons are complete */
 .tds-icon.tds-site-logo-icon path {
   transition: fill 0.33s ease;
 }
 .tds-site-header > .tds-site-logo {
   min-block-size: var(--tds-site-header--height);
 }
 .tds-site-logo-link {
   box-shadow: none;
   display: inline-flex;
   padding: 0 var(--tds-size--1x);
 }
 .tds-site-header .tds-align--start .tds-site-logo-link {
   -webkit-padding-start: var(--tds-size--2x);
           padding-inline-start: var(--tds-size--2x);
 }
 /* App Title */
 .tds-site-logo-link + .tds-site-app-title {
   -webkit-border-start: 1px solid var(--tds-color--secondary-highlight);
           border-inline-start: 1px solid var(--tds-color--secondary-highlight);
   font-size: var(--tds-font-size--20);
   letter-spacing: 0;
   line-height: var(--tds-line-height--20);
   padding: 0;

   /* added px to account for visual weight of logo */
   -webkit-margin-start: calc(var(--tds-size--1x) + 3px);
           margin-inline-start: calc(var(--tds-size--1x) + 3px);
   -webkit-padding-start: var(--tds-size--2x);
           padding-inline-start: var(--tds-size--2x);
 }
 @media (min-width: 600px) {
   .tds-site-logo-link + .tds-site-app-title {
     font-size: var(--tds-font-size--30);
     line-height: var(--tds-line-height--30);
   }
 }
 .tds-skip-to-content {
   font-size: var(--tds-font-size--20);
   line-height: 1.414;
   padding: var(--tds-size--1x);
   position: fixed;
   top: var(--tds-size--5x);
 }
 .tds-site-logo :focus {
   outline: none;
 }
 .tds-site-logo :focus-visible {
   outline: var(--tds-outline--focus);
 }
 .tds--indicate-focus .tds-site-logo :focus {
   outline: var(--tds-outline--focus);
 }
 /** Nav Items --
   * ---------------------------------------------------------- */
 .tds-site-nav-item {
   --tds-nav-item--padding: var(--tds-size--1x);
   --tds-nav-item--width: auto;

   align-items: center;
   border-radius: 12px;
   color: var(--tds-nav-item--color);
   display: inline-flex;
   font-weight: var(--tds-font-weight--medium);
   inline-size: var(--tds-nav-item--width);
   min-block-size: var(--tds-size--4x);
   padding: var(--tds-size--half) var(--tds-size--1x);
   transition: color 0.33s ease, background-color 0.33s ease;
 }
 .tds-site-nav-items--vertical .tds-site-nav-item {
   inline-size: 100%;
 }
 .tds-site-nav-item.tds--highlighted {
   --tds-nav-item--color: var(--tds-color--secondary);

   -webkit-backdrop-filter: blur(var(--tds-blur--button));

           backdrop-filter: blur(var(--tds-blur--button));
   background-color: var(--tds-pill--blur-color);
 }
 @media (hover: hover) {
   .tds-site-nav-item:where(:not(.tds-site-nav-item--read-only)):hover {
     --tds-nav-item--color: var(--tds-color--secondary);

     -webkit-backdrop-filter: blur(var(--tds-blur--button));

             backdrop-filter: blur(var(--tds-blur--button));
     background-color: var(--tds-pill--blur-color);
   }
 }
 .tds-site-nav-item:focus {
   outline: none;
 }
 .tds-site-nav-item:focus-visible {
   outline: var(--tds-outline--focus);
 }
 .tds--indicate-focus .tds-site-nav-item:focus {
   outline: var(--tds-outline--focus);
 }
 /* Specific-Purpose nav items (menu & back links) */
 .tds-modal-header .tds-nav-back {
   background: none;
   font-size: 12px;
   margin: 4px 0;

   /* Fix optical centering vertically */
   position: relative;
   top: 1px;
 }
 @media (max-width: 599px) {
   .tds-nav-menu {
     min-block-size: 28px;
     font-size: 12px;
     padding: 0 var(--tds-size--1x);
   }
 }
 /* Animated */
 .tds-site-nav-item.tds-animate--backdrop {
   -webkit-backdrop-filter: unset;
           backdrop-filter: unset;
   background-color: transparent;
 }
 /* Properties to be set via js */
 .tds-animate--backdrop-backdrop {
   -webkit-backdrop-filter: blur(var(--tds-blur--button));
           backdrop-filter: blur(var(--tds-blur--button));
   background-color: var(--tds-pill--blur-color);
   border-radius: 12px;
   display: block;
   position: absolute;

   /* TODO: AWSM-3345: split this into generic styles to go into tds-core vs here */

   /* Note: height and width can't default to zero, otherwise Safari will ignore the backdrop-filter on the first render */
   block-size: var(--tds-animate-backdrop-height, 1px);
   inline-size: var(--tds-animate-backdrop-width, 1px);

   /* left/right here are used by js to set posiioning, which ignores logical props */

   /* stylelint-disable-next-line */
   left: var(--tds-animate-backdrop-left, 0);

   /* stylelint-disable-next-line */
   top: var(--tds-animate-backdrop-top, 0);

   /* Note: Visibility needs to not have a default value here, otherwise it will override the tokenized value */
   visibility: var(--tds-animate-backdrop-visibility);
   opacity: var(--tds-animate-backdrop-opacity, 0);
   z-index: -1;
   transition: var(--tds-animate-backdrop-transition, opacity 0.5s ease, visibility 0s 0s);
 }
 .tds-site-nav-item-text {
   color: var(--tds-nav-item--color);
   margin: 0 var(--tds-size--1x);
   transition: color 0.33s ease;
 }
 .tds-site-nav-items--vertical .tds-site-nav-item-text {
   flex-grow: 1;
   margin: 0 var(--tds-size--half);
   text-align: start;
 }
 .tds-nav-back .tds-site-nav-item-text {
   margin: 0;
 }
 /* If there's only an icon, tighten up the space to create a square pill */
 .tds-site-nav-item .tds-icon:only-child {
   -webkit-margin-end: -4px;
           margin-inline-end: -4px;
   -webkit-margin-start: -4px;
           margin-inline-start: -4px;
 }
 /** Nav Items --
   * ---------------------------------------------------------- */
 .tds-site-nav-items {
   align-items: center;
   display: flex;
   margin: 0;
   transition: transform 0.5s ease;

   /* Handles the case where an animated backdrop is on the list, instead of a site-header */
   position: relative;
   z-index: 1;
 }
 .tds-site-header > .tds-site-nav-items {
   min-height: var(--tds-site-header--height);
   position: static;
 }
 .tds-site-nav-items--vertical {
   align-items: initial;
   flex-direction: column;
 }
 .tds-site-nav-items--vertical > li:not(:last-child) {
   -webkit-margin-after: var(--tds-size--1x);
           margin-block-end: var(--tds-size--1x);
 }
 /**
  * Status Message
  */
 .tds-status_msg {
   --tds-card--gap: var(--tds-padding--card--dense);

   display: flex;
   margin: var(--tds-size--3x) 0;
 }
 /* Inner Elements */
 .tds-status_msg-heading {
   padding: 0;
 }
 .tds-switch_toggle {
   --tds-switch_toggle--font-size: var(--tds-font-size--30);
   --tds-switch_toggle--size: 40px;
   --tds-switch_toggle-spacer: var(--tds-size--1x);
   --tds-switch_toggle--radius: calc(var(--tds-switch_toggle--size) / 2);

   align-items: center;
   display: flex;
   inline-size: -webkit-min-content;
   inline-size: -moz-min-content;
   inline-size: min-content;
   position: relative;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
 .tds-switch_toggle * {
   cursor: pointer;
 }
 .tds-switch_toggle--small {
   --tds-switch_toggle--font-size: var(--tds-font-size--20);
   --tds-switch_toggle--size: 32px;
 }
 .tds-switch_toggle--smaller {
   --tds-switch_toggle--font-size: var(--tds-font-size--10);
   --tds-switch_toggle--size: 30px;
 }
 .tds-switch_toggle-checkbox {
   opacity: 0;
   pointer-events: none;
   position: absolute;
 }
 .tds-switch_toggle-track {
   display: block;
   position: relative;
   block-size: var(--tds-switch_toggle--size);
   inline-size: calc(var(--tds-switch_toggle--size) * 2);
   background-color: var(--tds-toggle--background-color);
   border-radius: var(--tds-switch_toggle--radius);
   transition: background-color 0.5s ease;
 }
 .tds-switch_toggle-checkbox:checked ~ .tds-switch_toggle-track {
   background-color: var(--tds-text--color--primary);
 }
 .tds-switch_toggle-checkbox:focus-visible + .tds-switch_toggle-track {
   outline: var(--tds-outline--focus);
   outline-offset: var(--tds-size--half);
 }
 .tds--indicate-focus .tds-switch_toggle-checkbox:focus + .tds-switch_toggle-track {
   outline: var(--tds-outline--focus);
   outline-offset: var(--tds-size--half);
 }
 .tds-switch_toggle-btn {
   font-size: var(--tds-switch_toggle--font-size);
   -webkit-margin-start: var(--tds-switch_toggle-spacer);
           margin-inline-start: var(--tds-switch_toggle-spacer);
   -webkit-margin-end: var(--tds-switch_toggle-spacer);
           margin-inline-end: var(--tds-switch_toggle-spacer);
   text-transform: none;
   color: var(--tds-color--secondary);
   transition: color 0.5s ease;
   line-height: 1;
 }
 .tds-switch_toggle-btn:nth-last-child(2) {
   order: -1;
 }
 .tds-switch_toggle--label_inside .tds-switch_toggle-btn {
   --tds-switch_toggle-btn--indent: 4px;
   --tds-switch_toggle-spacer: 0;

   align-items: center;
   block-size: 100%;
   display: flex;
   inline-size: calc(50% + var(--tds-switch_toggle-btn--indent));
   justify-content: center;
   position: absolute;
 }
 .tds-switch_toggle--small .tds-switch_toggle-btn,
 .tds-switch_toggle--smaller .tds-switch_toggle-btn {
   --tds-switch_toggle-btn--indent: 1px;
 }
 .tds-switch_toggle--label_inside .tds-switch_toggle-btn:nth-last-child(2) {
   left: 2px;
 }
 .tds-switch_toggle--label_inside .tds-switch_toggle-btn:last-child {
   right: 2px;
 }
 .tds-switch_toggle--label_inside .tds-switch_toggle-checkbox:checked ~ .tds-switch_toggle-btn {
   color: var(--tds-color--white);
 }
 .tds-switch_toggle-track::after {
   /* Note:
    * In dark environments the default 'toggle' fill goes dark-grey
    * But for switches the fill gains a primary-colored background, making the default ugly
    */
   background-color: var(--tds-color--white);
   block-size: calc(var(--tds-switch_toggle--size) - var(--tds-size--1x));
   border-radius: var(--tds-switch_toggle--radius);
   box-shadow: var(--tds-box-shadow--small);
   content: '';
   display: block;
   inline-size: calc(var(--tds-switch_toggle--size) - var(--tds-size--1x));
   margin: var(--tds-size--half);
   position: absolute;
   transform: translateX(0);
   transition: transform 0.5s var(--tds-bezier), color 0.5s var(--tds-bezier);
   z-index: 10;
 }
 .tds-switch_toggle-checkbox:checked ~ .tds-switch_toggle-track::after {
   transform: translateX(var(--tds-switch_toggle--size));
 }
 [dir='rtl'] .tds-switch_toggle-checkbox:checked ~ .tds-switch_toggle-track::after {
   transform: translateX(calc(var(--tds-switch_toggle--size) * -1));
 }
 :root,
 .tds-component-preview {
   --tds-table--vertical-align: middle;
   --tds-table-background-color: transparent;
   --tds-table-border_color: var(--tds-color--grey50);
   --tds-table-border_spacing: 0;
   --tds-table-border_width: 1px;
   --tds-table-caption-background-color: transparent;
   --tds-table-caption-top: 0;
   --tds-table-header-font_size: var(--tds-font-size--30);
   --tds-table-padding--horizontal: var(--tds-size--2x);
   --tds-table-padding--vertical: var(--tds-size--2x);
 }
 .tds-table--align_middle {
   --tds-table--vertical-align: middle;
 }
 .tds-table--align_top {
   --tds-table--vertical-align: top;
 }
 .tds-table--align_bottom {
   --tds-table--vertical-align: bottom;
 }
 .tds-table {
   border-collapse: collapse;
   border-spacing: var(--tds-table-border_spacing);
   font-size: var(--tds-font-size--30);
   inline-size: 100%;
   text-align: start;
 }
 .tds-table--bordered th,
 .tds-table--bordered td {
   border: var(--tds-table-border_width) solid var(--tds-color--secondary-accent);
 }
 .tds-table-caption {
   background-color: var(--tds-table-caption-background-color);
 }
 .tds-table-row th,
 .tds-table-row td {
   background-color: var(--tds-table-background-color);
   font-size: var(--tds-table-header-font_size);
   -webkit-padding-after: var(--tds-table-padding--vertical);
           padding-block-end: var(--tds-table-padding--vertical);
   -webkit-padding-before: var(--tds-table-padding--vertical);
           padding-block-start: var(--tds-table-padding--vertical);
   text-align: start;
   vertical-align: var(--tds-table--vertical-align);
 }
 .tds-table-row p {
   margin: 0;
 }
 .tds-table-col--selected,
 .tds-table-row--selected th,
 .tds-table-row--selected td {
   --tds-table-background-color: var(--tds-color--tertiary);
 }
 .tds-table--padded_cells th,
 .tds-table--padded_cells td {
   -webkit-padding-end: var(--tds-table-padding--horizontal);
           padding-inline-end: var(--tds-table-padding--horizontal);
   -webkit-padding-start: var(--tds-table-padding--horizontal);
           padding-inline-start: var(--tds-table-padding--horizontal);
 }
 .tds-table--thead_border .tds-table-head th {
   -webkit-border-after: var(--tds-table-border_width) solid var(--tds-color--secondary-accent);
           border-block-end: var(--tds-table-border_width) solid var(--tds-color--secondary-accent);
 }
 .tds-scrim--black {
   --tds-table-background-color: var(--tds-color--grey15);
 }
 .tds-scrim--black .tds-table th,
 .tds-scrim--black .tds-table td {
   color: var(--tds-color--white);
 }
 .tds-table-head .tds-table-row th {
   color: var(--tds-text--color);
   font-family: var(--tds-font-family--combined);
   font-weight: var(--tds-font-weight--medium);
 }
 .tds-table--hoverable .tds-table-body .tds-table-row:hover th,
 .tds-table--hoverable .tds-table-body .tds-table-row:hover td {
   background-color: var(--tds-color--tertiary);
 }
 @media (max-width: 599px) {
   .tds-table--responsive .tds-table {
     display: flex;
     flex-flow: row wrap;
   }

   .tds-table--responsive .tds-table-caption {
     position: -webkit-sticky;
     position: sticky;
     top: var(--tds-table-caption-top);
     -webkit-backdrop-filter: blur(8px);
             backdrop-filter: blur(8px);
     -webkit-border-after: 1px solid var(--tds-color--grey50);
             border-block-end: 1px solid var(--tds-color--grey50);
     padding: var(--tds-size--2x);
   }

   .tds-table--responsive .tds-table-caption--white {
     --tds-table-caption-background-color: rgba(255, 255, 255, 0.5);
   }

   .tds-table--responsive .tds-table-caption--light {
     --tds-table-caption-background-color: rgba(125, 125, 125, 0.5);
   }

   .tds-table--responsive .tds-table-caption--black {
     --tds-table-caption-background-color: rgba(0, 0, 0, 0.5);
   }

   .tds-table--responsive .tds-table-caption h1,
   .tds-table--responsive .tds-table-caption h2,
   .tds-table--responsive .tds-table-caption h3,
   .tds-table--responsive .tds-table-caption h4,
   .tds-table--responsive .tds-table-caption h5,
   .tds-table--responsive .tds-table-caption h6 {
     -webkit-padding-before: 0;
             padding-block-start: 0;
   }

   .tds-table--responsive .tds-table-head,
   .tds-table--responsive .tds-table-body,
   .tds-table--responsive .tds-table-foot,
   .tds-table--responsive .tds-table-row {
     display: block;
     overflow: scroll;
     max-inline-size: calc(100vw - (var(--tds-size--3x) * 2));
   }

   .tds-table--responsive .tds-table-row td {
     inline-size: 100%;
     display: inline-flex;
     flex-flow: row wrap;
     -webkit-padding-after: 0;
             padding-block-end: 0;
   }

   .tds-table--bordered .tds-table-row {
     -webkit-padding-before: 0;
             padding-block-start: 0;
     -webkit-padding-end: 0;
             padding-inline-end: 0;
     -webkit-margin-after: var(--tds-size--1x);
             margin-block-end: var(--tds-size--1x);
   }

   .tds-table--responsive .tds-table-head {
     position: absolute;
     top: -9999px;
     left: -9999px;
   }

   .tds-table--responsive th::before,
   .tds-table--responsive td::before {
     content: var(--columnHeader) ': ';
     display: block;
     inline-size: 100%;
     max-inline-size: 100%;
     min-inline-size: 100%;
     font-family: var(--tds-font-family--combined);
     font-weight: var(--tds-font-weight--medium);
     font-size: var(--tds-font-size--40);
     line-height: var(--tds-line-height--40);
   }

   .tds-table-responsive .tds-table-row {
     -webkit-padding-before: var(--tds-size--2x);
             padding-block-start: var(--tds-size--2x);
     -webkit-padding-after: var(--tds-size--2x);
             padding-block-end: var(--tds-size--2x);
     -webkit-border-after: 1px solid var(--tds-color--grey50);
             border-block-end: 1px solid var(--tds-color--grey50);
   }

   .tds-table--responsive.tds-table--padded_cells th {
     -webkit-padding-after: 0;
             padding-block-end: 0;
   }

   .tds-table--responsive .tds-table-body th:first-child {
     font-weight: 400;
   }
 }
 @media (min-width: 600px) {
   .tds-table--row_border .tds-table-body th,
   .tds-table--row_border .tds-table-body td {
     -webkit-border-before: var(--tds-table-border_width) solid var(--tds-color--secondary-accent);
             border-block-start: var(--tds-table-border_width) solid var(--tds-color--secondary-accent);
   }

   .tds-table--striped .tds-table-body > .tds-table-row:nth-child(odd) > td,
   .tds-table--striped .tds-table-body > .tds-table-row:nth-child(odd) > th {
     --tds-table-background-color: var(--tds-color--tertiary-highlight);
   }
 }
 /**
  * DEPRECATED
  * See AWSM-3370. Consumers should now use the .tds-data-table pattern
  * (will be removed in TDS 6)
  */
 .tds-table--data {
   font-variant-numeric: tabular-nums;
 }
 /*
  * Data Table
  * - Distinct from consumer display/feature tables
  * - Fewer variants, intended for data-dense/enterprise work
  *
  * In-Progress Component
  * - Expect the component structure to change as this pattern becomes more refined over the course of TDS v5
 **/
 /* stylelint-disable */
 /* stylelint doesn't understand :where/:is selector yet & thinks it has higher specificity */
 /* Wrapper + Toolbar */
 .tds-data-table-wrapper {
   --tds-data-table--row-hover-radius: 4px;
   --tds-data-table--row-outdent-size: 8px;
   --tds-data-table--vertical-align: middle;

   inline-size: calc(100% + ((var(--tds-data-table--row-outdent-size) + var(--tds-data-table--row-hover-radius)) * 2));
   -webkit-margin-end: calc((var(--tds-data-table--row-outdent-size) + var(--tds-data-table--row-hover-radius)) * -1);
           margin-inline-end: calc((var(--tds-data-table--row-outdent-size) + var(--tds-data-table--row-hover-radius)) * -1);
   -webkit-margin-start: calc((var(--tds-data-table--row-outdent-size) + var(--tds-data-table--row-hover-radius)) * -1);
           margin-inline-start: calc((var(--tds-data-table--row-outdent-size) + var(--tds-data-table--row-hover-radius)) * -1);
   overflow-x: auto;
   overflow-y: visible;
 }
 /* Create a minimum space at the top when it's following something else */
 * + :is(.tds-data-table-wrapper, .tds-data-table-toolbar) {
   -webkit-margin-before: var(--tds-size--3x);
           margin-block-start: var(--tds-size--3x);
 }
 .tds-data-table-wrapper + .tds-pagination {
   -webkit-margin-before: var(--tds-size--3x);
           margin-block-start: var(--tds-size--3x);
 }
 .tds-data-table-toolbar {
   align-items: center;
   display: flex;
   gap: var(--tds-size--2x);
   justify-content: space-between;
 }
 .tds-data-table-tools {
   align-items: center;
   display: flex;
   gap: var(--tds-size--2x);
 }
 .tds-data-table-tools--dense {
   gap: var(--tds-size--1x);
 }
 /* Core Table */
 .tds-data-table {
   border-spacing: 0;
   font-size: 14px;
   font-variant-numeric: tabular-nums;
   inline-size: calc(100% - var(--tds-data-table--row-hover-radius) * 2);
   margin: 0 var(--tds-data-table--row-hover-radius);
   position: relative;
   z-index: 1;
 }
 .tds-data-table--dense {
   font-size: 12px;
 }
 .tds-data-table--align-top {
   --tds-data-table--vertical-align: top;
 }
 .tds-data-table--align-bottom {
   --tds-data-table--vertical-align: bottom;
 }
 .tds-data-table tr {
   background-color: transparent;
   transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
 }
 /* Specific Cell Styles */
 .tds-data-table :where(th, td) {
   -webkit-border-after: 1px solid var(--tds-color--tertiary);
           border-block-end: 1px solid var(--tds-color--tertiary);
   position: relative;
   text-align: start;
   transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
   vertical-align: var(--tds-data-table--vertical-align);
   white-space: nowrap;
 }
 /* Potential Gotcha: ".tds-data-table :where(tbody th, td)" potentially reaches outside itself,
  * as in the case of nested tables. It would only select the th's inside the data-table,
  * but it would select all the th's inside that are also inside any tbody in the ancestor tree
  * therefore we need to scope the tbody to be withhin the data-table.
  *
  * tbody :where(th, td) unnecessarily scopes td's, but is a much safer selector */
 .tds-data-table tbody :where(th, td):is(:first-child, :last-child)::before {
   content: '';
   position: absolute;
   top: -1px;
   bottom: -1px;
   z-index: -1;
   border-color: transparent;
   transition: background-color 0.3s ease, top 0.3s ease;
 }
 .tds-data-table tbody :where(th, td):first-child::before,
 [dir='rtl'] .tds-data-table tbody :where(th, td):last-child::before {
   border-radius: var(--tds-data-table--row-hover-radius) 0 0 var(--tds-data-table--row-hover-radius);
   left: calc(var(--tds-data-table--row-hover-radius) * -1);
   right: 100%;
 }
 .tds-data-table tbody :where(th, td):last-child::before,
 [dir='rtl'] .tds-data-table tbody :where(th, td):first-child::before {
   border-radius: 0 var(--tds-data-table--row-hover-radius) var(--tds-data-table--row-hover-radius) 0;
   left: 100%;
   right: calc(var(--tds-data-table--row-hover-radius) * -1);
 }
 .tds-data-table th {
   font-weight: var(--tds-font-weight--medium);
 }
 .tds-data-table thead :where(th, td) {
   padding: 12px var(--tds-data-table--row-outdent-size);
 }
 .tds-data-table tbody :where(th, td) {
   padding: var(--tds-size--1x) var(--tds-data-table--row-outdent-size);
 }
 /* Hovered row */
 .tds-data-table tbody tr:is(:hover, .tds--highlighted),
 .tds-data-table tbody tr:is(:hover, .tds--highlighted) :where(th, td)::before {
   background-color: var(--tds-color--tertiary);
 }
 /* Selected row */
 .tds-data-table tbody tr.tds-tr--selected {
   background-color: var(--tds-color--tertiary-highlight);
   position: relative;
   z-index: 4;
 }
 .tds-data-table tbody tr.tds-tr--selected :where(th, td) {
   border-color: var(--tds-color--tertiary-highlight);
   box-shadow: 0 -1px 0 0 var(--tds-color--tertiary-highlight);
 }
 .tds-data-table tbody tr.tds-tr--selected :where(th, td)::before {
   background-color: var(--tds-color--tertiary-highlight);
 }
 .tds-data-table tbody tr.tds-tr--selected + tr.tds-tr--selected :where(th, td)::before {
   top: -6px;
 }
 /* Focus row */
 .tds--indicate-focus .tds-data-table tbody tr:focus-within {
   outline: var(--tds-outline--focus);
   outline-offset: -5px;

   z-index: 5;
 }
 /* Specialized Cells */
 .tds-td--actions {
   -webkit-padding-end: var(--tds-data-table--row-outdent-size);
           padding-inline-end: var(--tds-data-table--row-outdent-size);
   -webkit-padding-start: var(--tds-data-table--row-outdent-size);
           padding-inline-start: var(--tds-data-table--row-outdent-size);
   text-align: end;
 }
 .tds-data-table tbody tr:is(:hover, .tds--highlighted) .tds-td--actions {
   position: -webkit-sticky;
   position: sticky;
   right: 0;

   /* z-index has to be set on the cell instead of the row for Safari */
   z-index: 10;
 }
 .tds-td--select {
   -webkit-padding-end: var(--tds-data-table--row-outdent-size);
           padding-inline-end: var(--tds-data-table--row-outdent-size);
   -webkit-padding-start: var(--tds-data-table--row-outdent-size);
           padding-inline-start: var(--tds-data-table--row-outdent-size);
   white-space: nowrap;
   width: 0;
 }
 /* Sort (Individual Headers) */
 .tds-th--sortable {
   cursor: pointer;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
 .tds-data-table thead :where(th, td).tds-th--sortable {
   padding: 0;
 }
 .tds-th--sortable :focus {
   outline: none;
 }
 .tds-th--sortable .tds-th--inner:focus-visible::before {
   outline: var(--tds-outline--focus);
   outline-offset: -2px;
 }
 .tds--indicate-focus .tds-th--sortable .tds-th--inner:focus::before {
   outline: var(--tds-outline--focus);
   outline-offset: -2px;
 }
 .tds-th--sortable .tds-th--inner::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: var(--tds-size--half);
   border-radius: var(--tds-size--half);
   background-color: transparent;
   transition: background-color 0.3s ease, transform 0.3s ease;
   z-index: -1;
 }
 .tds-th--sortable:hover .tds-th--inner::before {
   background-color: var(--tds-color--tertiary);
 }
 .tds-data-table--prototype-animated-th-hover .tds-th--sortable .tds-th--inner::before {
   transform: scale(0.7);
 }
 .tds-data-table--prototype-animated-th-hover .tds-th--sortable:hover .tds-th--inner::before {
   transform: scale(1);
 }
 /* Same padding internally as a regular th */
 .tds-th--sortable .tds-th--inner {
   padding: 12px var(--tds-data-table--row-outdent-size);
   text-align: inherit;
   width: 100%;
 }
 .tds-th--sortable .tds-icon {
   -webkit-margin-start: var(--tds-size--half);
           margin-inline-start: var(--tds-size--half);
   vertical-align: middle;
 }
 :is(.tds-scrim--black, .tds-colorscheme-dark) .tds-th--sortable:not(:hover) .tds-icon {
   --tds-text--color--placeholder: var(--tds-color--grey30);
 }
 :where(.tds-data-table) th [class*='tds-icon-double-chevron'] {
   --tds-icon-double-chevron-down--fill: var(--tds-text--color--placeholder);
   --tds-icon-double-chevron-up--fill: var(--tds-text--color--placeholder);

   opacity: 0;
   transition: opacity 0.3s ease, transform 0.3s ease;
 }
 .tds-th--sort-asc [class*='tds-icon-double-chevron'] {
   --tds-icon-double-chevron-up--fill: var(--tds-color--secondary-highlight);
 }
 .tds-th--sort-desc [class*='tds-icon-double-chevron'] {
   --tds-icon-double-chevron-down--fill: var(--tds-color--secondary-highlight);
 }
 :is(.tds-th--sortable:hover, .tds-th--sort-asc, .tds-th--sort-desc) [class*='tds-icon-double-chevron'] {
   opacity: 1;
 }
 .tds-th--sortable :focus-visible [class*='tds-icon-double-chevron'] {
   opacity: 1;
 }
 .tds--indicate-focus .tds-th--sortable :focus [class*='tds-icon-double-chevron'] {
   opacity: 1;
 }
 /* Sticky First Column */
 .tds-data-table--sticky-first-col th:first-child {
   left: 0;
   position: -webkit-sticky;
   position: sticky;
   z-index: 1;
 }
 [dir='rtl'] .tds-data-table--sticky-first-col th:first-child {
   left: auto;
   right: 0;
 }
 .tds-data-table--sticky-first-col th:first-child::after {
   content: '';
   position: absolute;
   top: 1px;
   bottom: 1px;
   left: 0;
   right: 0;
   background: var(--tds-scrim--background, var(--tds-color--white));
   transition: background-color 0.3s ease;

   /* Should stack behind the ::before element on sticky headers,
   that way a sticky + sortable header gets the right background on hover */
   z-index: -2;
 }
 .tds-data-table--sticky-first-col tbody tr:is(:hover, .tds--highlighted) th:first-child::after {
   background: var(--tds-color--tertiary);
 }
 /* Null Message */
 .tds-data-table-null-message {
   align-items: center;
   display: flex;
   flex-direction: column;
   padding: clamp(100px, 10vh, 200px) 40px;
 }
 /* PROTOTYPE: Standalone Choice Inputs
  * TODO: Re-organize form items/inputs in TDS v6 so that inputs can be used
  * on their own, without needing to be wrapped in a form-item
  * TODO: Break choices out into their own form-input--choice.css file */
 .tds-data-table .tds-form-input--choice {
   --tds-form-input--background-color: transparent;
   --tds-form-input--border-color: var(--tds-text--color--light);
   --tds-form-input--border-radius: var(--tds-size--half);
   --tds-form-input--height: var(--tds-size--3x);

   -webkit-appearance: none;

      -moz-appearance: none;

           appearance: none;
   position: relative;
   margin: 0;
   color: var(--tds-text--color);
   inline-size: var(--tds-form-input--height);
   block-size: var(--tds-form-input--height);
   border: 1px solid var(--tds-form-input--border-color);
   border-radius: var(--tds-form-input--border-radius);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: inset 0 0 0 0 transparent;
   transition: box-shadow 0.25s ease;
 }
 .tds-data-table .tds-form-input--choice[type='checkbox'] {
   --tds-form-input--check-height: 100%;
 }
 .tds-data-table .tds-form-input--choice[type='radio'] {
   --tds-form-input--border-radius: 100%;
   --tds-form-input--check-height: calc(100% - 6px);
 }
 .tds-data-table .tds-form-input--choice:focus {
   --tds-form-input--border-color: var(--tds-color--secondary);

   box-shadow: inset 0 0 0 1px var(--tds-color--secondary);
   outline: none;
 }
 /* Check/Fill for Choices */
 .tds-data-table .tds-form-input--choice::after {
   --base-transition: transform 0.33s var(--tds-bezier), border-color 0.33s var(--tds-bezier);

   content: '';
   display: block;
   inline-size: var(--tds-form-input--check-height);
   block-size: var(--tds-form-input--check-height);
   border-radius: var(--tds-form-input--border-radius);
   transform: scale(0);
   background-image: var(--tds-background-image--check);
   transition: var(--base-transition), background-image 0s 0.33s;
 }
 .tds-data-table .tds-form-input--choice:is(:checked, :indeterminate):after {
   transform: scale(1);
   transition: var(--base-transition), background-image 0s 0s;
 }
 .tds-data-table .tds-form-input--choice[type='checkbox']:checked::after {
   background-image: var(--tds-background-image--check);
 }
 /* Per the HTML Spec, `indeterminate` must be set via js for it to work
  * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate */
 .tds-data-table .tds-form-input--choice[type='checkbox']:indeterminate::after {
   background-image: var(--tds-background-image--minus);
 }
 .tds-data-table .tds-form-input--choice[type='radio']::after {
   background-color: var(--tds-color--secondary);
 }
 .tds-data-table .tds-form-input--choice[type='radio']::after,
 .tds-data-table .tds-form-input--choice[type='radio']:checked::after {
   --tds-form-input--border-color: var(--tds-color--secondary);
 }
 /* Dense choice to match enterprise styles
  * (TODO: this would be a variant on choices,
  * but enabled by default when within a data-table) */
 .tds-data-table .tds-form-input--choice {
   --tds-form-input--font-size: var(--tds-font-size--20);
   --tds-form-input--height: var(--tds-size--2x);
 }
 /* Styles that might need to stay Data-Table overrides for the selection pattern */
 .tds-td--select .tds-form-input--choice {
   display: block;
 }
 /* TODO: Refactor imports for tabs */
 /* @import "https://www.tesla.com/sites/all/themes/custom/tesla_theme/design-system/5.5.0/panels--carousel.css"; */
 /**
  * tab-panel base styles
  * - Import this file only if you are running your own css post-processor and know what you're doing.
  */
 .tds-tab-panel-list {
   inline-size: 100%;
 }
 .tds-tab-panel {
   display: none;
   visibility: hidden;
   transition: visibility 0.5s 0.5s;
 }
 .tds-tab-panel--active {
   display: block;
   visibility: inherit;
   transition: visibility 0.5s 0s;
 }
 /* Tab Lists */
 .tds-tab-list {
   --tds-tab--background-color-off: transparent;
   --tds-tab--background-color-on: var(--tds-color--tertiary);
   --tds-tab--border-radius: var(--tds-border-radius--pill);
   --tds-tab--box-shadow--focus-off: inset 0 0 0 0 transparent;
   --tds-tab--box-shadow--focus-on: inset 0 0 0 3px rgba(var(--tds-color--rgb-shade), 0.08);
   --tds-tab--box-shadow--highlight-off: 0 0 0 0 transparent;
   --tds-tab--box-shadow--highlight-on: 0 0 0 0 transparent;
   --tds-tab-list--height: var(--tds-height--pill);

   align-items: center;
   display: grid;
   gap: var(--tds-size--half);
   grid-auto-flow: column;
   height: var(--tds-tab-list--height);
   overflow-x: auto;
   position: relative;
 }
 /* Debug style TODO: convert to focus-within??? */
 .tds-tab-list:focus-within {
   box-shadow: inset 0 0 0 1px var(--tds-color--tertiary-highlight);
 }
 /* Variants */
 .tds-tab-list--toggle {
   --tds-tab--background-color-on: var(--tds-toggle--fill-color);
   --tds-tab--box-shadow--highlight-on: var(--tds-box-shadow--small);

   background-color: var(--tds-toggle--background-color);
   border-radius: var(--tds-border-radius--pill);
   padding: var(--tds-size--half);
 }
 /* Rectangular variants */
 .tds-tab-list--vertical,
 .tds-tab-list--legacy-vertical,
 .tds-tab-list--underline {
   --tds-tab--border-radius: 0;

   gap: 0;
 }
 .tds-tab-list--vertical,
 .tds-tab-list--legacy-vertical {
   --tds-tab--justify-content: start;
   --tds-tab-list--height: auto;

   grid-auto-flow: row;
 }
 .tds-tab-list--legacy-vertical {
   --tds-tab--background-color-on: transparent;
   --tds-tab--box-shadow--highlight-off: inset 0 0 0 0 transparent;
   --tds-tab--box-shadow--highlight-on: inset -4px 0 0 0 var(--tds-color--primary);
 }
 .tds-tab-list--underline {
   --tds-tab--background-color-on: transparent;
   --tds-tab--box-shadow--highlight-off: inset 0 -1px 0 0 var(--tds-color--secondary);
   --tds-tab--box-shadow--highlight-on: inset 0 -4px 0 0 var(--tds-color--secondary);
   --tds-tab-list--height: var(--tds-size--7x);
 }
 /* Dots */
 .tds-tab-list--dots {
   --tds-tab--background-color-off: var(--tds-color--secondary-accent);
   --tds-tab--background-color-on: var(--tds-color--secondary);
   --tds-tab-list--height: 12px;

   justify-content: center;
 }
 /* Animation */
 .tds-tab-list--animated {
   --tds-animate-backdrop-visibility: inherit;
 }
 /*
  * Individual Tabs
  * - Note: Several tokens come from the tab-list component
  */
 .tds-tab {
   --tds-tab--background-color: var(--tds-tab--background-color-off);
   --tds-tab--box-shadow--focus: var(--tds-tab--box-shadow--focus-off);
   --tds-tab--box-shadow--highlight: var(--tds-tab--box-shadow--highlight-off);

   /* Probably generic pill styles, cross-reference with tds-btn */
   align-items: center;
   block-size: calc(var(--tds-tab-list--height) - 8px);
   border-radius: var(--tds-tab--border-radius);
   display: inline-flex;
   font-family: var(--tds-font-family--combined);
   font-size: var(--tds-font-size--20);
   font-weight: var(--tds-font-weight--medium);
   justify-content: var(--tds-tab--justify-content, center);
   line-height: 1.2;
   padding: var(--tds-size--half) var(--tds-size--3x);
   position: relative;

   /* Tabs-specific styles */
   color: var(--tds-text--color--light);
   background-color: var(--tds-tab--background-color);
   scroll-snap-align: center;
   box-shadow: var(--tds-tab--box-shadow--focus), var(--tds-tab--box-shadow--highlight);
   cursor: pointer;
   transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
 }
 /* Variants */
 .tds-tab-list--vertical .tds-tab,
 .tds-tab-list--legacy-vertical .tds-tab {
   min-block-size: var(--tds-height--pill);
 }
 .tds-tab-list--underline .tds-tab {
   min-block-size: var(--tds-tab-list--height);
 }
 .tds-tab-list--dots .tds-tab {
   font-size: 0;
   padding: var(--tds-size--half);
   text-indent: -10000px;
 }
 .tds-tab-list--animated .tds-tab {
   --tds-tab--background-color-on: var(--tds-tab--background-color-off);
   --tds-tab--box-shadow--highlight-on: var(--tds-tab--box-shadow--highlight-off);
 }
 .tds-tab:focus {
   outline: none;
 }
 /* TODO: for debugging purposes only, convert to focus-within */
 .tds-tab:focus,
 .tds--indicate-focus .tds-tab:focus {
   --tds-tab--box-shadow--focus: var(--tds-tab--box-shadow--focus-on);

   border: none;
   color: var(--tds-color--secondary);
   outline: none;
 }
 /* Active State */
 .tds-tab[aria-selected='true'] {
   --tds-tab--background-color: var(--tds-tab--background-color-on);
   --tds-tab--box-shadow--highlight: var(--tds-tab--box-shadow--highlight-on);

   cursor: inherit;
   color: var(--tds-color--secondary);
   background-color: var(--tds-tab--background-color);
 }
 /* TODO: for debugging purposes only, convert to focus-within */
 .tds-tab[aria-selected='true']:focus,
 .tds--indicate-focus .tds-tab[aria-selected='true']:focus {
   --tds-tab--box-shadow--focus: var(--tds-tab--box-shadow--focus-off);
 }
 /* Backdrop should replicate the specific styles that indicate a selected tab */
 .tds-tab-list--animated .tds--animated-backdrop {
   background-color: var(--tds-tab--background-color-on);
   border-radius: var(--tds-tab--border-radius);
   box-shadow: var(--tds-tab--box-shadow--highlight-on);
 }
 .tds-tab-list--dots .tds--animated-backdrop {
   z-index: 1;
 }
 /* @import "https://www.tesla.com/sites/all/themes/custom/tesla_theme/design-system/5.5.0/tab-list.css"; */
 /* @import "https://www.tesla.com/sites/all/themes/custom/tesla_theme/design-system/5.5.0/tabs--vertical.css";
 @import "https://www.tesla.com/sites/all/themes/custom/tesla_theme/design-system/5.5.0/tabs--underline.css";
 @import "https://www.tesla.com/sites/all/themes/custom/tesla_theme/design-system/5.5.0/tabs--toggle.css";
 @import "https://www.tesla.com/sites/all/themes/custom/tesla_theme/design-system/5.5.0/tabs--legacy--vertical.css";
 @import "https://www.tesla.com/sites/all/themes/custom/tesla_theme/design-system/5.5.0/tabs--legacy--pill.css";
 @import "https://www.tesla.com/sites/all/themes/custom/tesla_theme/design-system/5.5.0/tabs--dot.css"; */
 /**
  * Tooltip Styles
  */
 .tds-tooltip {
   --tds-tooltip--padding: var(--tds-padding--card);

   /* Distance the tooltip travels vertically on open/close */
   --tds-tooltip--translate-y: var(--tds-size--1x);

   /* Extra space around the tooltip that a user can hover without closing */
   --tds-tooltip--safe-space: var(--tds-size--1x);

   /*
    * Offset to allow for js to dynamically modify position, without interfering with other styles
    * - NOTE: for calc in translate rules to work, value must be '0px', not '0'
    */
   --tds-tooltip--x-offset: 0px; /* stylelint-disable-line */

   background-color: var(--tds-dialog--background-color);
   border-radius: var(--tds-border-radius--card--dense);
   bottom: calc(100% + var(--tds-tooltip--safe-space));
   box-shadow: var(--tds-box-shadow--medium);
   inline-size: -webkit-max-content;
   inline-size: -moz-max-content;
   inline-size: max-content;
   left: 50%;
   max-inline-size: min(calc(100vw - 48px), 400px);
   padding: var(--tds-tooltip--padding);
   position: absolute;
   text-align: initial;
   top: auto;
   z-index: 550;
 }
 /* Inactive state (default) */
 .tds-tooltip,
 .tds-tooltip--closed {
   opacity: 0;
   transform:
     translateY(var(--tds-tooltip--translate-y))
     translateX(calc(-50% + var(--tds-tooltip--x-offset)));
   pointer-events: none;
   visibility: hidden;
   transition: opacity 0.5s var(--tds-bezier), transform 0.5s var(--tds-bezier), visibility 0s 0.5s;
 }
 /* Active state */
 .tds-tooltip.tds-tooltip--open {
   --tds-tooltip--translate-y: 0;

   opacity: 1;
   pointer-events: inherit;
   visibility: inherit;
   transition: opacity 0.5s var(--tds-bezier), transform 0.5s var(--tds-bezier), visibility 0s 0s;
 }
 /* Variants */
 .tds-tooltip--dense {
   /* Offset the vertical padding to visually square the space up
   (line height makes it look too tall out of the box) */
   --tds-tooltip--padding: calc(var(--tds-padding--card--dense) - var(--tds-size--half)) var(--tds-padding--card--dense);
 }
 /* Orient downward */
 .tds-tooltip--orientation-down {
   --tds-tooltip--translate-y: calc(var(--tds-size--1x) * -1);

   bottom: auto;
   top: calc(100% + var(--tds-tooltip--safe-space));
 }
 .tds-tooltip--align-start,
 .tds-tooltip--align-end {
   transform: translateY(var(--tds-tooltip--translate-y)) translateX(0);
 }
 .tds-tooltip--align-start,
 [dir='rtl'] .tds-tooltip--align-end {
   left: calc(var(--tds-tooltip--padding) * -1);
   right: auto;
 }
 /* stylelint-disable-next-line no-descending-specificity */
 .tds-tooltip--align-end,
 [dir='rtl'] .tds-tooltip--align-start {
   left: auto;
   right: calc(var(--tds-tooltip--padding) * -1);
 }
 /* Full-width */
 .tds-tooltip--width-full {
   inline-size: 100%;
   left: 0;
   max-inline-size: 100%;
   right: 0;
   transform: translateY(var(--tds-tooltip--translate-y)) translateX(0);
 }
 /* Enlarged hover/tap target */
 .tds-tooltip::before {
   bottom: calc(var(--tds-tooltip--safe-space) * -1);
   content: '';
   left: calc(var(--tds-tooltip--safe-space) * -1);
   position: absolute;
   right: calc(var(--tds-tooltip--safe-space) * -1);
   top: calc(var(--tds-tooltip--safe-space) * -1);
   z-index: -1;
 }
 /**
  * Data-trigger
  * - Only determines which element triggers the visible state for the tooltip
  */
 [data-tds-tooltip-trigger] {
   cursor: pointer;
 }
 /* Wrapper
  * - Only determines what other component sets the position for the tooltip
  */
 .tds-tooltip-wrapper,
 .tds-tooltip-wrapper--inline {
   position: relative;
 }
 .tds-tooltip-wrapper {
   display: flex;
 }
 .tds-tooltip-wrapper--inline {
   display: inline-flex;
 }
 /* Content */
 .tds-tooltip > *:first-child {
   -webkit-margin-before: 0;
           margin-block-start: 0;
   -webkit-padding-before: 0;
           padding-block-start: 0;
 }
 .tds-tooltip > *:last-child {
   -webkit-margin-after: 0;
           margin-block-end: 0;
   -webkit-padding-after: 0;
           padding-block-end: 0;
 }
 :root,
 .tds-component-preview {
   --tds-heading--font-weight: 500;
   --tds-heading--letter-spacing: 0;
   --tds-heading--text-transform: none;
 }
 /******************************************************************************
 Core Text Styles
 ******************************************************************************/
 /* Should match h1-6 and text-element reset in base/normalize.css */
 .tds-text--h1,
 .tds-text--h2,
 .tds-text--h3,
 .tds-text--h4,
 .tds-text--h5,
 .tds-text--h6,
 .tds-text--caption-header,
 .tds-text--section_subtitle,
 .tds-text--body_large,
 .tds-text--body {
   display: block;
   margin: 0;
 }
 .tds-text--h1,
 .tds-text--h2,
 .tds-text--h3,
 .tds-text--h4,
 .tds-text--h5,
 .tds-text--h6,
 .tds-text--caption-header,
 .tds-text--body,
 .tds-list {
   line-height: var(--tds-line-height--30);
 }
 strong {
   color: var(--tds-heading--color);
 }
 /* -- Headlines
 ----------------------------------------------------------------------------- */
 /* Headlines and Subtitles */
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 .tds-text--h1,
 .tds-text--h1-alt,
 .tds-text--h2,
 .tds-text--h3,
 .tds-text--h4,
 .tds-text--h5,
 .tds-text--h6,
 .tds-text--caption-header {
   font-family: var(--tds-font-family--combined);
   font-weight: var(--tds-heading--font-weight);
   -webkit-padding-before: var(--tds-size--4x);
           padding-block-start: var(--tds-size--4x);
   -webkit-padding-after: var(--tds-size--1x);
           padding-block-end: var(--tds-size--1x);
   text-transform: var(--tds-heading--text-transform);
   letter-spacing: var(--tds-heading--letter-spacing);
   color: var(--tds-heading--color);
   transition: font 0.33s ease, color 0.33s ease, opacity 0.33s ease;
 }
 h1,
 h2,
 h3,
 h4,
 .tds-text--h1,
 .tds-text--h1-alt,
 .tds-text--h2,
 .tds-text--h3,
 .tds-text--h4 {
  font-family: var(--tds-font-family--combined-display);
 }
 h6,
 .tds-text--h6 {
   -webkit-padding-after: 0;
           padding-block-end: 0;
 }
 /* Reduce padding for directly-paired headings */
 :is(h1, h2, h3, h4, h5, h6, .tds-text--h1, .tds-text--h1-alt, .tds-text--h2, .tds-text--h3, .tds-text--h4, .tds-text--h5, .tds-text--h6) + :is(h1, h2, h3, h4, h5, h6, .tds-text--h1, .tds-text--h1-alt, .tds-text--h2, .tds-text--h3, .tds-text--h4, .tds-text--h5, .tds-text--h6) {
   -webkit-padding-before: var(--tds-size--2x);
           padding-block-start: var(--tds-size--2x);
 }
 @media (max-width: 599px) {
   h1,
   .tds-text--h1,
   .tds-text--h1-alt {
     --tds-heading--letter-spacing: -0.7px;

     font-size: var(--tds-font-size--70, 28px);
     line-height: var(--tds-line-height--70, 36px);
   }

   h2,
   .tds-text--h2 {
     --tds-heading--letter-spacing: -0.6px;

     font-size: var(--tds-font-size--60, 24px);
     line-height: var(--tds-line-height--60, 28px);
   }

   h3,
   .tds-text--h3 {
     --tds-heading--letter-spacing: -0.5px;

     font-size: var(--tds-font-size--50, 20px);
     line-height: var(--tds-font-size--60, 28px);
   }

   h4,
   .tds-text--h4 {
     font-size: var(--tds-font-size--40, 17px);
     line-height: var(--tds-line-height--20, 20px);
   }

   h5,
   .tds-text--h5 {
     font-size: var(--tds-font-size--30, 14px); /* TODO: */
     line-height: var(--tds-line-height--30, 21px);
   }

   h6,
   .tds-text--h6 {
     font-size: var(--tds-font-size--30, 14px);
     line-height: var(--tds-line-height--30, 21px);
   }

   .tds-text--caption-header {
     font-size: var(--tds-font-size--20, 12px);
     line-height: var(--tds-line-height--10, 18px);
   }
 }
 @media (min-width: 600px) {
   h1,
   .tds-text--h1 {
     --tds-heading--letter-spacing: -0.6px;

     font-size: var(--tds-font-size--80, 40px);
     line-height: var(--tds-line-height--80, 48px);
   }

   .tds-text--h1-alt {
     --tds-heading--letter-spacing: -0.6px;

     font-size: var(--tds-font-size--75);
     line-height: var(--tds-line-height--75);
   }

   h2,
   .tds-text--h2 {
     --tds-heading--letter-spacing: -0.5px;

     font-size: var(--tds-font-size--70, 28px);
     line-height: var(--tds-line-height--70, 36px);
   }

   h3,
   .tds-text--h3 {
     --tds-heading--letter-spacing: -0.6px;

     font-size: var(--tds-font-size--60, 24px);
     line-height: var(--tds-line-height--60, 28px);
   }

   h4,
   .tds-text--h4 {
     --tds-heading--letter-spacing: -0.4px;

     font-size: var(--tds-font-size--50, 20px);
     line-height: var(--tds-line-height--60, 28px);
   }

   h5,
   .tds-text--h5 {
     font-size: var(--tds-font-size--40, 17px);
     line-height: var(--tds-line-height--20, 20px);
   }

   h6,
   .tds-text--h6 {
     font-size: var(--tds-font-size--30, 14px);
     line-height: var(--tds-line-height--30, 21px);
   }

   .tds-text--caption-header {
     font-size: var(--tds-font-size--20, 12px);
     line-height: var(--tds-line-height--10, 18px);
   }
 }
 /* -- Eyebrow Pattern
 ----------------------------------------------------------------------------- */
 .tds-text-eyebrow--10,
 .tds-text-eyebrow--20,
 .tds-text-eyebrow--30 {
   display: block;
   font-family: var(--tds-font-family--combined);
   font-weight: var(--tds-font-weight--light);
   line-height: var(--tds-line-height--unitless);
 }
 .tds-text-eyebrow--30,
 .tds-text-eyebrow--20 {
   letter-spacing: -0.4px;
 }
 .tds-text-eyebrow--10 {
   font-size: var(--tds-font-size--30);
 }
 .tds-text-eyebrow--20 {
   font-size: var(--tds-font-size--40);
 }
 .tds-text-eyebrow--30 {
   font-size: var(--tds-font-size--55);
 }
 @media (max-width: 599px) {
   .tds-text--jumbo_mobile {
     font-size: 36px !important;
     line-height: 36px !important;
     font-family: var(--tds-font-family--combined) !important;
     font-weight: var(--tds-heading--font-weight) !important;
   }
 }
 /* -- Body Copy
  * NOTE: Should mirror the base copy in base/normalize.css
 ----------------------------------------------------------------------------- */
 .tds-text--body {
   font-size: var(--tds-font-size--30);
   line-height: var(--tds-line-height--30);
 }
 .tds-text--body + .tds-text--body {
   -webkit-padding-before: 14px;
           padding-block-start: 14px;
 }
 .tds-text--caption {
   color: var(--tds-caption--color);
   font-size: var(--tds-font-size--20);
   line-height: var(--tds-line-height--10);
 }
 /******************************************************************************
 Text Modifiers
 ******************************************************************************/
 /* -- Weight Modifiers
 ----------------------------------------------------------------------------- */
 .tds-text--200 {
   font-weight: 200 !important;
 }
 .tds-text--300 {
   font-weight: 300 !important;
 }
 .tds-text--400 {
   font-weight: 400 !important;
 }
 .tds-text--500 {
   font-weight: 500 !important;
 }
 .tds-text--700 {
   font-weight: 700 !important;
 }
 /* -- Color Modifiers
 ----------------------------------------------------------------------------- */
 .tds-text--contrast-high {
   color: var(--tds-text--contrast-high);
 }
 .tds-text--contrast-medium {
   color: var(--tds-text--contrast-medium);
 }
 .tds-text--contrast-low {
   color: var(--tds-text--contrast-low);
 }
 /* --- Alignment Modifiers
 ---------------------------------------------------------------- */
 .tds-text--center {
   -webkit-margin-end: auto;
           margin-inline-end: auto;
   -webkit-margin-start: auto;
           margin-inline-start: auto;
   text-align: center !important;
 }
 .tds-text--end {
   text-align: end !important;
 }
 .tds-text--start {
   text-align: start !important;
 }
 /* -- Modifier to add visual divider line to the right of text
 ----------------------------------------------------------------------------- */
 .tds-text--with_divider {
   align-content: center;
   align-items: center;
   display: flex;
   justify-content: center;
   overflow: hidden;
 }
 .tds-text--with_divider::after {
   background-color: var(--tds-color--secondary);
   block-size: 1px;
   content: '';
   display: block;
   inline-size: 100%;
   -webkit-margin-start: 0.5em;
           margin-inline-start: 0.5em;
 }
 .tds-text--capitalize {
   text-transform: capitalize;
 }
 .tds-text--uppercase {
   text-transform: uppercase;
 }
 .tds-text--lowercase {
   text-transform: lowercase;
 }
 /* -- Code Snippet Styling
 ----------------------------------------------------------------------------- */
 code {
   max-inline-size: 100%;
   overflow: scroll;
   padding: 0.125em 0.414em;
   border-radius: 0.25em;
   color: var(--tds-code-color);
   border: 1px solid var(--tds-code-border-color);
   background-color: var(--tds-code-bg-color);
   font-family: var(--tds-font-family--monospace);
   transition: background-color 0.3s ease, color 0.3s ease;
 }
 pre code {
   display: block;
   margin: 0;
   padding: var(--tds-size--1x);
   white-space: pre;
 }
 @media (max-width: 599px) {
   pre,
   code {
     overflow: scroll;
   }
 }
 /* TODO: Q2 2021 v5.0 Forms Refactor */
 /* -- Option Group Core Styles
  * Deprecated: TODO: Refactor such that option groups become a style-variant on checkbox/radio components
 ----------------------------------------------------------------------------- */
 /* stylelint-disable */
 :root,
 .tds-component-preview {
   --tds-option-checkbox--left: 20px;
   --tds-option-checkbox--left--checkmark: 21px;
   --tds-option-checkbox--right: auto;
   --tds-option-checkbox--right--checkmark: auto;
 }
 [dir='rtl'] {
   --tds-option-checkbox--left: auto;
   --tds-option-checkbox--left--checkmark: auto;
   --tds-option-checkbox--right: 20px;
   --tds-option-checkbox--right--checkmark: 21px;
 }
 .tds-option_group {
   --tds-form-item--indent: 0;

   align-content: center;
   align-items: center;
   display: flex;
   flex-flow: row wrap;
   justify-content: space-between;
   text-align: center;
 }
 .tds-option_group + .tds-form-feedback-wrap {
   -webkit-padding-after: var(--tds-size--half);
           padding-block-end: var(--tds-size--half);
   -webkit-padding-before: var(--tds-size--half);
           padding-block-start: var(--tds-size--half);
 }
 .tds-option_group .tds--is_visually_hidden:focus {
   block-size: 1px;
   border: 0;
   clip: rect(0 0 0 0);
   -webkit-clip-path: inset(100%);
           clip-path: inset(100%);
   inline-size: 1px;
   margin: -1px;
   overflow: hidden;
   padding: 0;
   position: absolute;
   white-space: nowrap;
 }
 .tds-option_group .tds-option {
   inline-size: 100%;
   -webkit-margin-before: var(--tds-size--2x);
           margin-block-start: var(--tds-size--2x);
 }
 .tds-option_group .tds-option:first-child {
   -webkit-margin-before: 0;
           margin-block-start: 0;
 }
 /* Option Labels */
 .tds-option_group .tds-form-label {
   flex-grow: 1;
   display: flex;
   justify-content: space-between;
   align-content: center;
   align-items: center;
   flex-flow: row wrap;
   border-radius: var(--tds-border-radius--pill);
   min-block-size: var(--tds-size--6x);
   inline-size: 100%;
   padding: 0 20px;
   cursor: pointer;
   box-shadow: inset 0 0 0 1px var(--tds-color--grey40);
   transition: box-shadow 0.33s cubic-bezier(0.5, 0, 0, 0.75);
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
   line-height: var(--tds-line-height--unitless);
   background-color: transparent;
   font-family: var(--tds-font-family--combined);
 }
 .tds-option_group .tds-form-label-text,
 .tds-option_group .tds-form-label-caption {
   font-size: var(--tds-font-size--30);
   font-weight: var(--tds-font-weight--book);
 }
 .tds-option_group--multiselect .tds-form-label {
   -webkit-margin-start: 0;
           margin-inline-start: 0;
   -webkit-padding-start: var(--tds-size--7x);
           padding-inline-start: var(--tds-size--7x);
   position: relative;
 }
 .tds-option_group .tds-form-input:checked + .tds-form-label,
 .tds-option_group .tds-form-input:checked + .tds-form-label .tds-form-label-text,
 .tds-option_group .tds-form-input:checked + .tds-form-label .tds-form-label-caption {
   font-family: var(--tds-font-family--combined);
   font-weight: var(--tds-font-weight--medium)
 }
 .tds-option_group .tds-form-input:disabled + .tds-form-label {
   box-shadow: 0 0 0 1px var(--tds-color--grey50);
   cursor: not-allowed;
   opacity: var(--tds-opacity--50);
 }
 .tds-option_group .tds-form-input:checked + .tds-form-label,
 .tds-option_group .tds-form-input:focus ~ .tds-form-label {
   box-shadow: inset 0 0 0 3px var(--tds-color--primary);
 }
 .tds-option_group--alternate .tds-form-input:focus ~ .tds-form-label,
 .tds-option_group--alternate .tds-form-input:checked ~ .tds-form-label {
   box-shadow: inset 0 0 0 3px var(--tds-color--secondary);
 }
 /* Elements within Option Labels */
 .tds-option_group .tds-form-label .tds-form-label-text,
 .tds-option_group .tds-form-label .tds-form-label-caption {
   color: var(--tds-color--secondary);
   font-family: inherit;
   font-variant-numeric: lining-nums;
   margin: 0;
   white-space: nowrap;
 }
 .tds-option_group--multiselect .tds-form-label-text {
   -webkit-margin-start: var(--tds-size--4x);
           margin-inline-start: var(--tds-size--4x);
 }
 .tds-option-label .tds-form-label-text:only-child {
   display: flex;
   justify-content: center;
 }
 .tds-option_group--multiselect .tds-form-label .tds-form-label-text:only-child {
   justify-content: flex-start;
 }
 /* Checkmark */
 .tds-option_group--multiselect .tds-form-label::before {
   left: var(--tds-option-checkbox--left);
   position: absolute;
   right: var(--tds-option-checkbox--right);
   top: 12px;
 }
 .tds-option_group--multiselect .tds-form-label::after,
 .tds-option_group--multiselect .tds-form-input:checked ~ .tds-form-label::after {
   left: var(--tds-option-checkbox--left--checkmark);
   right: var(--tds-option-checkbox--right--checkmark);
   top: 13px;
 }
 [dir='rtl']
   .tds-option_group--multiselect
   .tds-checkbox-input:checked
   ~ .tds-label--checkbox::after {
   right: 22px;
 }
 [dir='rtl'] .tds-option_group--multiselect .tds-form-label::before {
   right: var(--tds-option-checkbox--right--checkmark);
 }
 /* Borrowed from old r/v3 Checkbox styles */
 .tds-option_group .tds-label--checkbox::before,
 .tds-option_group .tds-label--checkbox::after {
   block-size: 20px;
   border-radius: var(--tds-border-radius);
   content: '';
   display: block;
   inline-size: 20px;
   position: absolute;
 }
 /* border of the checkbox */
 .tds-option_group .tds-label--checkbox::before {
   background-color: transparent;
   border: var(--tds-border-width--small) solid var(--tds-color--grey30);
   transition: var(--tds-animate--focus);
 }
 .tds-option_group .tds-label--checkbox::after {
   background-image: var(--tds-background-image--check);
   background-position: top left;
   background-repeat: no-repeat;
   border: none;
   opacity: 0;
   transition: var(--tds-animate--focus);
 }
 .tds-option_group--multiselect .tds-form-input:checked + .tds-label--checkbox::after {
   opacity: 1;
 }
 [dir='rtl'] .tds-option_group.tds-label--checkbox::before,
 [dir='rtl'] .tds-option_group.tds-label--checkbox::after {
   left: initial;
   right: 0;
 }
 /* TODO */
 .tds-option_group .tds-form-input {
   --tds-form-input--height: 0;
 }
 .tds-progress_bar-wrapper {
   inline-size: 100%;
   position: relative;
 }
 .tds-progress_bar {
   --progress-border-radius: var(--tds-border-radius--pill);
   --progress-height: var(--tds-size--2x);
   --tds-progress-bar--background-color: transparent;
   --tds-progress-bar--bar-color: var(--tds-color--tertiary);
   --tds-progress-bar--value-color: var(--tds-color--primary);

   /* Reset the default appearance */
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
   block-size: var(--progress-height);
   inline-size: 100%;
   display: block;
   border: none;
   border-radius: var(--progress-border-radius);
   overflow: hidden;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) inset;
 }
 .tds-progress_bar--secondary {
   --tds-progress-bar--value-color: var(--tds-color--secondary);
 }
 .tds-progress_bar::-webkit-progress-bar {
   border: none;
   border-radius: var(--progress-border-radius);
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) inset;
   background-color: var(--tds-progress-bar--bar-color);
 }
 .tds-progress_bar::-webkit-progress-value {
   background-color: var(--tds-progress-bar--value-color);
   border-radius: var(--progress-border-radius);
   -webkit-transition: width 0.5s;
   transition: width 0.5s;
 }
 .tds-progress_bar::-moz-progress-bar {
   background-color: var(--tds-progress-bar--value-color);
 }
 .tds-input-color {
   overflow: hidden;
   padding: 0;
 }
 .tds-input-color::-webkit-color-swatch-wrapper {
   border-radius: var(--tds-form-item-border_radius);
   padding: 0;
 }
 .tds-input-color::-webkit-color-swatch {
   border: 0;
 }
 .tds-theme--enterprise {
   --tds-banner--padding: var(--tds-size--1x);
 }
 .tds-theme--enterprise {
   /* Content Containers */
   --tds-content_container--max_width: 1824px;
 }
 :where(.tds-theme--enterprise) .tds-chip {
   /* Adjust size to accomodate border width */
   --tds-chip--height: calc(var(--tds-size--3x) - 2px);

   font-size: var(--tds-font-size--20);
   line-height: var(--tds-size--4x);
   -webkit-padding-end: 0;
           padding-inline-end: 0;
 }
 :where(.tds-theme--enterprise) .tds-chip .tds-icon-btn {
   --tds-icon-btn--size: var(--tds-chip--height);
 }
 /* -- Form Input Theme Adjustments
 ----------------------------------------------------------------------------- */
 .tds-theme--enterprise :not(.tds-option) > .tds-form-input {
   --tds-form-input--font-size: var(--tds-font-size--20);

   /* Adjust size to accommodate border width */
   --tds-form-input--height: calc(var(--tds-size--4x) - 2px);
 }
 .tds-theme--enterprise .tds-form-item--choice {
   grid-column-gap: 12px;
 }
 /* Choice */
 .tds-theme--enterprise .tds-form-item--choice .tds-form-input {
   --tds-form-input--height: var(--tds-size--2x);
 }
 .tds-theme--enterprise [type='checkbox'].tds-form-input {
   --tds-form-input--check-height: 16px;
 }
 .tds-theme--enterprise [type='radio'].tds-form-input {
   --tds-form-input--check-height: 6px;
 }
 .tds-theme--enterprise .tds-form-item--choice [type='checkbox']::after {
   background-position: -1px 0;
   background-size: 16px;
 }
 /* Textarea */
 .tds-theme--enterprise .tds-form-item--textarea .tds-form-input {
   /* Logical prop (future, currently supported in FF only) */
   border-end-end-radius: 0;
 }
 .tds-theme--enterprise .tds-form-item--range {
   --tds-range-slider--thumb-offset: -4px;
   --tds-range-slider--thumb-size-x: var(--tds-size--2x);
   --tds-range-slider--thumb-size-y: var(--tds-size--2x);
 }
 .tds-theme--enterprise .tds-form-item--range .tds-form-input {
   --tds-form-input--height: var(--tds-size--1x);
 }
 .tds-theme--enterprise .tds-search-reset,
 .tds-theme--enterprise .tds-search-submit {
   --tds-search-button-size: var(--tds-size--4x);
 }
 .tds-theme--enterprise .tds-search-icon {
   --tds-search-icon-size: var(--tds-size--2x);
 }
 .tds-theme--enterprise .tds-form-item {
   --tds-form-item--indent: var(--tds-size--2x);
 }
 .tds-theme--enterprise .tds-form-item--choice {
   --tds-form-item--indent: 0;
 }
 .tds-theme--enterprise .tds-form-label {
   --tds-form-label--font-size: var(--tds-font-size--20);
 }
 .tds-theme--enterprise .tds-form-item--choice .tds-form-label-caption {
   margin-bottom: 0;
 }
 :where(.tds-theme--enterprise) .tds-icon-btn {
   --tds-icon-btn--border-width: var(--tds-border-width--small);
   --tds-icon-btn--size: var(--tds-size--4x);
 }
 .tds-theme--enterprise {
   --progress-height: 12px;
 }
 .tds-theme--enterprise {
   --tds-table-border_spacing: 0;
   --tds-table-border_width: 1px;
   --tds-table-header-font_size: var(--tds-font-size--20);
   --tds-table-padding--horizontal: var(--tds-size--1x);
   --tds-table-padding--vertical: var(--tds-size--1x);
 }
 /* -- Button Theme Adjustments
 ----------------------------------------------------------------------------- */
 .tds-theme--marketing .tds-btn {
   color: var(--tds-color--inverse);
 }
 .tds-theme--marketing .tds-btn--secondary {
   color: var(--tds-color--secondary);
 }
 .tds-theme--marketing .tds-btn--secondary:is(:hover, .tds--hover):not([disabled], .tds--disabled) {
   color: var(--tds-color--inverse);
 }
 .tds-theme--marketing .tds-btn--tertiary {
   color: var(--tds-text--color);
 }
 /* -- Button Theme Adjustments
 ----------------------------------------------------------------------------- */
 /* Default Button */
 .tds-theme--replicant .tds-btn {
   --tds-btn--background-color: transparent;

   border: none;
   color: var(--tds-color--inverse);
   filter: var(--tds-glow--medium);
   font-weight: var(--tds-font-weight--bold, 700);
   letter-spacing: 0.1em;
   text-transform: uppercase;
   transition: 0.5s ease;
 }
 .tds-theme--replicant .tds-btn:focus-visible {
   outline: var(--tds-outline--focus);
   outline-offset: 2px;
 }
 .tds-theme--replicant :is(.tds-btn--secondary, .tds-btn--tertiary) {
   color: var(--tds-color--secondary);
 }
 .tds-theme--replicant .tds-btn:is(:disabled, .tds--disabled) {
   filter: none;
 }
 .tds-theme--replicant .tds-btn:is(:focus, .tds--focus) {
   box-shadow: none;
   outline: none;
 }
 /* While duplicating the line above, they cannot be combined */
 .tds--indicate-focus .tds-theme--replicant .tds-btn:focus,
 .tds--focus .tds-theme--replicant .tds-btn:focus,
 .tds--focus.tds-theme--replicant .tds-btn:focus,
 .tds-theme--replicant .tds--focus .tds-btn:focus {
   outline: var(--tds-outline--focus);
   outline-offset: 2px;
 }
 /* Override default hover/focus background change */
 .tds-theme--replicant .tds-btn--secondary:not([disabled], .tds--disabled):is(:focus, .tds--focus) {
   --tds-btn--background-color: transparent;

   color: var(--tds-color--secondary);
 }
 .tds-theme--replicant .tds-btn:is(:hover, .tds--hover):not([disabled], .tds--disabled) {
   --tds-btn--background-color: transparent;

   -webkit-animation: tds-flicker--soft 1s forwards;

           animation: tds-flicker--soft 1s forwards;
   filter: var(--tds-glow--bright);
   opacity: 1;
   transition: 0.52s ease 0.48s;
 }
 .tds-theme--replicant .tds-btn--secondary:is(:hover, .tds--hover):not([disabled], .tds--disabled) {
   color: var(--tds-color--inverse);
 }
 .tds-theme--replicant .tds-btn::before,
 .tds-theme--replicant .tds-btn::after {
   bottom: 0;
   content: '';
   display: block;
   left: 0;
   position: absolute;
   right: 0;
   top: 0;
   transition: 0.5s ease;
 }
 .tds-theme--replicant .tds-btn::before {
   background: var(--tds-color--secondary);
   -webkit-clip-path: var(--tds-notch);
           clip-path: var(--tds-notch);
   z-index: -1;
 }
 [dir='rtl'] .tds-theme--replicant .tds-btn::before {
   transform: scale(-1, 1);
 }
 .tds-theme--replicant :is(.tds-btn--secondary, .tds-btn--tertiary)::before {
   background: transparent;
 }
 .tds-theme--replicant .tds-btn:is(:hover, .tds--hover):not([disabled], .tds--disabled)::before,
 .tds-theme--replicant .tds-btn:is(:hover, .tds--hover):not([disabled], .tds--disabled)::after {
   transition: 0.52s ease 0.48s;
 }
 .tds-theme--replicant .tds-btn--secondary::after {
   background: var(--tds-color--secondary);
   -webkit-clip-path: var(--tds-notch--outline);
           clip-path: var(--tds-notch--outline);
 }
 [dir='rtl'] .tds-theme--replicant .tds-btn--secondary::after {
   transform: scale(-1, 1);
 }
 .tds-theme--replicant .tds-btn--secondary:is(:hover, .tds--hover):not([disabled], .tds--disabled)::before {
   background: var(--tds-color--secondary);
 }
 :where(.tds-theme--replicant) .tds-chip {
   background-color: var(--tds-color--secondary);
   color: var(--tds-color--inverse);
   -webkit-padding-end: var(--tds-size--half);
           padding-inline-end: var(--tds-size--half);
   -webkit-padding-start: var(--tds-size--1x);
           padding-inline-start: var(--tds-size--1x);
 }
 :where(.tds-theme--replicant) .tds-form-input-wrap .tds-chip {
   background-color: var(--tds-color--secondary);
 }
 .tds-theme--replicant .tds-form-feedback-wrap {
   -webkit-padding-start: 0;
           padding-inline-start: 0;
 }
 .tds-theme--replicant .tds-form-feedback-helper,
 .tds-theme--replicant .tds-form-feedback-feedback {
   --tds-form-feedback--font-weight: var(--tds-font-weight--book);
 }
 .tds-theme--replicant :is(.tds-fieldset--choice, .tds-fieldset--selector) {
   --tds-fieldset--indent: 0;
   --tds-form-label--color: var(--tds-color--secondary);
 }
 .tds-theme--replicant :is(.tds-fieldset--choice, .tds-fieldset--selector) .tds-legend {
   --tds-form-label--font-size: var(--tds-font-size--20);

   color: var(--tds-form-label--color);
   font-weight: var(--tds-font-weight--bold);
   letter-spacing: var(--tds-heading--letter-spacing);
   text-transform: var(--tds-heading--text-transform);
 }
 .tds-theme--replicant .tds-fieldset--selector .tds-legend {
   padding: 0;
 }
 .tds-theme--replicant .tds-form-label-wrap {
   --tds-form-item--indent: 0;
   --tds-form-label--color: var(--tds-color--secondary);
 }
 .tds-theme--replicant .tds-form-label-caption {
   --tds-form-item--indent: 0;
 }
 .tds-theme--replicant .tds-form-label {
   --tds-form-label--font-size: var(--tds-font-size--20);

   letter-spacing: var(--tds-heading--letter-spacing);
   text-transform: var(--tds-heading--text-transform);
 }
 .tds-theme--replicant .tds-form-item--choice .tds-form-label {
   letter-spacing: 0;
   text-transform: none;
 }
 .tds-theme--replicant .tds-form-label-text {
   font-weight: var(--tds-font-weight--bold);
 }
 .tds-theme--replicant .tds-form-item--choice .tds-form-label-text {
   font-weight: var(--tds-font-weight--medium);
 }
 /* -- Replicant Form Input Overrides
 ----------------------------------------------------------------------------- */
 .tds-theme--replicant .tds-form-input-wrap {
   background: none;
   border: none;
   color: var(--tds-color--secondary);
 }
 .tds-theme--replicant .tds-form-input-wrap::before {
   content: '';
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   background-color: var(--tds-color--secondary);
   -webkit-clip-path: var(--tds-notch--outline-thin);
           clip-path: var(--tds-notch--outline-thin);
   transition: -webkit-clip-path 0.5s ease;
   transition: clip-path 0.5s ease;
   transition: clip-path 0.5s ease, -webkit-clip-path 0.5s ease;
 }
 .tds-theme--replicant .tds-form-input-wrap:focus-within::before {
   -webkit-clip-path: var(--tds-notch--outline);
           clip-path: var(--tds-notch--outline);
 }
 .tds-theme--replicant .tds-form-item--error .tds-form-input-wrap::before {
   background-color: var(--tds-color--error);
 }
 .tds-theme--replicant .tds-form-input {
   color: inherit;
 }
 .tds-theme--replicant .tds-form-input:-moz-placeholder-shown {
   color: var(--tds-text--color--placeholder);
 }
 .tds-theme--replicant .tds-form-input:-ms-input-placeholder {
   color: var(--tds-text--color--placeholder);
 }
 .tds-theme--replicant .tds-form-input:placeholder-shown {
   color: var(--tds-text--color--placeholder);
 }
 /* Choices (non-wrapped inputs) */
 .tds-theme--replicant .tds-form-item--choice .tds-form-input {
   --tds-form-input--border-radius: 0;
   --tds-form-input--check-height: 8px;
   --tds-form-input--height: 14px;
 }
 /* Replace default microinteraction */
 .tds-theme--replicant .tds-form-item--choice .tds-form-input::after {
   --tds-form-input--check-height: 100%;
   --tds-form-input--transform-scale-value: 1.2;

   transform: scale(var(--tds-form-input--transform-scale-value));
   opacity: 0;
   transition: opacity 0.5s ease;
   background-position: 0 0;
   background-size: 100%;
 }
 .tds-theme--replicant .tds-form-item--choice .tds-form-input[type='radio']::after {
   --tds-form-input--transform-scale-value: 0.6;
 }
 .tds-theme--replicant .tds-form-item--choice .tds-form-input:checked,
 .tds-theme--replicant .tds-form-item--choice .tds-form-input:checked::after {
   -webkit-animation: tds-flicker-on--soft 1s forwards;
           animation: tds-flicker-on--soft 1s forwards;
   opacity: 1;
 }
 /* Specificity here due to option-group--replicant's use of a * selector to set the color (line 88). */
 .tds-theme--replicant .tds-form-item--choice .tds-form-input:checked + * .tds-form-label-text {
   color: var(--tds-color--secondary);
 }
 [dir='rtl'] .tds-theme--replicant .tds-form-input-wrap::before {
   transform: scale(-1, 1);
 }
 .tds-theme--replicant .tds-form-item--range {
   --tds-form-item--indent: 0;
   --tds-range-slider--radius: 0;
   --tds-range-slider--thumb-radius: 0;
 }
 .tds-theme--replicant .tds-form-item--range .tds-form-input-wrap::before {
   display: none;
 }
 .tds-theme--replicant .tds-form-item {
   --tds-form-item--indent: 10px;
 }
 .tds-theme--replicant .tds-form-item--choice {
   --tds-form-item--indent: 0;
 }
 /* -- Link Theme Adjustments
 ----------------------------------------------------------------------------- */
 .tds-theme--replicant .tds-link {
   box-shadow: 0 0.5px 0 0 rgba(187, 187, 187, 0.75);
   transition: color 0.33s ease, box-shadow 0.33s ease;
 }
 /* Replicant theme only has one link style, so below we set the primary
 and secondary modifiers to always apply the same link styling as the default,
 unmodified link style.
 */
 .tds-theme--replicant .tds-link:is(:hover, .tds--hover):not([disabled], .tds--disabled) {
   --tds-text--color: var(--tds-color--secondary);

   box-shadow: 0 1.5px 0 0 rgba(var(--tds-color--rgb-shade), 1);
   transition: color 0.33s ease, box-shadow 0.33s ease;
 }
 .tds-theme--replicant .tds-link--primary,
 .tds-theme--replicant .tds-link--secondary {
   --tds-text--color: inherit;

   font-weight: var(--tds-font-weight--book, 400);
 }
 .tds-theme--replicant {
   --tds-modal--full-height: calc(100vh - var(--tds-size--8x));
   --tds-modal--full-width: calc(100vw - var(--tds-size--8x));
 }
 .tds-theme--replicant .tds-modal {
   background-color: transparent;
   border-radius: 0;
   bottom: auto;
   box-shadow: none;
   color: var(--tds-color--secondary);
   filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.33));
 }
 .tds-theme--replicant .tds-modal-content {
   overflow: auto;
 }
 .tds-theme--replicant .tds-modal:not(.tds-modal--sheet-right, .tds-modal--sheet-left) {
   left: 50%;
   top: 50%;
   transform: translateY(-50%) translateX(-50%);
 }
 .tds-theme--replicant .tds-modal.tds-modal--sheet-right {
   right: 0;
   top: 0;
   transform: translateX(100%) translateY(0);
 }
 .tds-theme--replicant .tds-modal.tds-modal--sheet-right.tds-modal[open] {
   transform: translateX(0) translateY(0);
 }
 .tds-theme--replicant .tds-modal.tds-modal--sheet-left {
   left: 0;
   top: 0;
   transform: translateX(-100%) translateY(0);
 }
 .tds-theme--replicant .tds-modal.tds-modal--sheet-left.tds-modal[open] {
   transform: translateX(0) translateY(0);
 }
 .tds-theme--replicant .tds-modal::before,
 .tds-theme--replicant .tds-modal::after {
   bottom: 0;
   content: '';
   display: block;
   left: 0;
   position: absolute;
   right: 0;
   top: 0;
 }
 .tds-theme--replicant .tds-modal::before {
   background-color: var(--tds-color--secondary);
   -webkit-clip-path: var(--tds-notch--outline);
           clip-path: var(--tds-notch--outline);
   opacity: 1;
   transition: 0.5s ease;
 }
 .tds-theme--replicant .tds-modal::after {
   background-color: var(--tds-dialog--background-color);
   -webkit-clip-path: var(--tds-notch);
           clip-path: var(--tds-notch);
   opacity: 1;
   z-index: -1;
 }
 .tds-theme--replicant .tds-modal[open]::before {
   -webkit-animation: turn-on-modal-before 1s forwards;
           animation: turn-on-modal-before 1s forwards;
 }
 /* prettier-ignore */
 @-webkit-keyframes turn-on-modal-before {
   0% { opacity: 1; }
   8% { opacity: 0.5; }
   16% { opacity: 1; }
   24% { opacity: 0.5; }
   32% { opacity: 1; }
   40% { opacity: 0.5; }
   48% { opacity: 1; }
   100% { opacity: 1; }
 }
 @keyframes turn-on-modal-before {
   0% { opacity: 1; }
   8% { opacity: 0.5; }
   16% { opacity: 1; }
   24% { opacity: 0.5; }
   32% { opacity: 1; }
   40% { opacity: 0.5; }
   48% { opacity: 1; }
   100% { opacity: 1; }
 }
 .tds-theme--replicant .tds-modal-header,
 .tds-theme--replicant .tds-modal-footer {
   background-color: transparent;
 }
 @media (max-width: 599px) {
   .tds-theme--replicant .tds-modal {
     inline-size: var(--tds-modal--full-width) !important;
   }

   .tds-theme--replicant .tds-modal--fullscreen {
     block-size: var(--tds-modal--full-height) !important;
   }
 }
 @media (min-width: 600px) {
   .tds-theme--replicant .tds-modal--fullscreen {
     inline-size: var(--tds-modal--full-width);
     block-size: var(--tds-modal--full-height);
   }

   .tds-modal--fullscreen + .tds-modal-backdrop {
     display: block;
   }
 }
 .tds-theme--replicant .tds-modal-close {
   background-color: transparent;
   border-radius: 0;
   filter: var(--tds-glow--off);
   transition: 0.5s ease;
 }
 .tds-theme--replicant .tds-modal-close:hover,
 .tds-theme--replicant .tds-modal-close:focus {
   -webkit-animation: tds-flicker--soft 1s forwards;
           animation: tds-flicker--soft 1s forwards;
   filter: var(--tds-glow--bright);
   transition: 0.52s ease 0.48s;
 }
 .tds-theme--replicant .tds-modal-close-icon {
   block-size: var(--tds-size--2x);
   inline-size: var(--tds-size--2x);
 }
 [dir='rtl'] .tds-theme--replicant .tds-modal::before {
   transform: scale(-1, 1);
 }
 [dir='rtl'] .tds-theme--replicant .tds-modal::after {
   transform: scale(-1, 1);
 }
 /* -- Option Group Theme Adjustments
 ----------------------------------------------------------------------------- */
 :root,
 .tds-component-preview {
   --tds-option_group-transform: calc(var(--tds-size--3x) * -1);
   --tds-plus-icon--left: 0;
   --tds-plus-icon--right: auto;
 }
 [dir='rtl'] {
   --tds-option_group-transform: var(--tds-size--3x);
   --tds-plus-icon--left: auto;
   --tds-plus-icon--right: 0;
 }
 /* Core Styles */
 /* --tds-fading-line is created using --tds-color--rgb-shade,
 which is either 0,0,0 or 255,255,255 depending on the scrim color */
 [class*='tds-scrim--'] .tds-theme--replicant,
 .tds-theme--replicant[class*='tds-scrim--'],
 .tds-theme--replicant [class*='tds-scrim--'] {
   --tds-fading-line:
     linear-gradient(
       to right,
       rgba(var(--tds-color--rgb-shade), 1) 0%,
       rgba(var(--tds-color--rgb-shade), 1) 50%,
       rgba(var(--tds-color--rgb-shade), 0.1) 100%
     );
   --tds-fading-line--glow: -2px 0 6px 4px rgba(var(--tds-color--rgb-shade), 0.15);
   --tds-plus-size: 10px;
 }
 .tds-theme--replicant .tds-legend + .tds-option_group,
 .tds-theme--replicant .tds-form-label + .tds-option_group {
   -webkit-margin-before: var(--tds-size--2x);
           margin-block-start: var(--tds-size--2x);
 }
 .tds-theme--replicant .tds-option_group .tds-option {
   margin: 0;
 }
 .tds-theme--replicant .tds-option_group .tds-form-label {
   border: none;
   box-shadow: none !important;
   color: var(--tds-text--color);
   font-weight: var(--tds-font-weight--bold);
   letter-spacing: var(--tds-heading--letter-spacing);
   margin: 0;
   min-block-size: var(--tds-size--5x);
   padding: 0;
   text-transform: var(--tds-heading--text-transform);
 }
 .tds-theme--replicant .tds-option_group .tds-form-input:hover + .tds-form-label,
 .tds-theme--replicant .tds-option_group .tds-form-input:focus + .tds-form-label,
 .tds-theme--replicant .tds-option_group .tds-form-input:checked + .tds-form-label {
   color: var(--tds-color--secondary);
   font-weight: var(--tds-font-weight--bold);
 }
 .tds-theme--replicant .tds-option_group--multiselect .tds-option:focus-within .tds-form-label,
 .tds-theme--replicant .tds-option_group--multiselect .tds-form-input:checked ~ .tds-form-label {
   transition: var(--transition-on);
 }
 /* Glowing underline for each option */
 .tds-theme--replicant .tds-option_group .tds-form-label::after,
 .tds-theme--replicant .tds-option_group .tds-form-label.tds-label--checkbox::after {
   background: var(--tds-fading-line);
   block-size: 3px;
   box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.15);
   content: '';
   display: block;
   inline-size: 100%;
   -webkit-margin-before: calc(var(--tds-size--1x) - 2px);
           margin-block-start: calc(var(--tds-size--1x) - 2px);
   opacity: 0.33;
   transition: var(--transition-on);
 }
 [dir='rtl'] .tds-theme--replicant .tds-form-label::after,
 [dir='rtl'] .tds-theme--replicant .tds-option_group .tds-form-label.tds-label--checkbox::after {
   transform: scale(-1);
 }
 .tds-theme--replicant .tds-option:focus-within .tds-form-label::after,
 .tds-theme--replicant .tds-form-input:checked + .tds-form-label::after {
   box-shadow: -2px 0 6px 4px rgba(255, 255, 255, 0.15);
   opacity: 1;
 }
 .tds-theme--replicant .tds-option_group--multiselect:not(.tds-option_group--alternate) .tds-option:focus-within .tds-form-label::after,
 .tds-theme--replicant .tds-option_group--multiselect:not(.tds-option_group--alternate) .tds-form-input:checked ~ .tds-form-label::after {
   background: var(--tds-fading-line);
 }
 .tds-theme--replicant .tds-option_group--multiselect .tds-form-label::before {
   display: none;
 }
 .tds-theme--replicant .tds-form-label > * {
   transition: var(--transition-off);
 }
 .tds-theme--replicant .tds-option_group--multiselect .tds-form-input:checked ~ .tds-form-label > * {
   transition: var(--transition-on);
 }
 .tds-theme--replicant .tds-option_group .tds-form-label-text,
 .tds-theme--replicant .tds-option_group .tds-form-label-caption {
   color: inherit;
   font-size: var(--tds-font-size--20);
   font-weight: inherit;
   margin: 0;
 }
 /* Override checkbox label styles */
 .tds-theme--replicant .tds-option_group--multiselect .tds-form-input ~ .tds-label--checkbox::after {
   -webkit-animation: none;
           animation: none;
   background: var(--tds-fading-line);
   left: inherit;
   position: static;
   top: inherit;
   transform: none;
 }
 /* Label Text (position is dependent on the +/- size) */
 .tds-theme--replicant .tds-option_group--multiselect .tds-form-label-text {
   margin: 0 calc(var(--tds-plus-size) / 2);
   padding: 0 calc(var(--tds-plus-size) * 2);
   position: relative;
   transform: translateX(0);
 }
 /* Left-align options when no prices are present */
 .tds-theme--replicant .tds-form-label .tds-form-label-text:only-child {
   justify-content: flex-start;
 }
 .tds-theme--replicant .tds-option_group .tds-form-input:checked + .tds-form-label .tds-form-label-text,
 .tds-theme--replicant .tds-option_group .tds-form-input:checked + .tds-form-label .tds-form-label-caption {
   color: inherit;
   font-weight: inherit;
 }
 /* Label +/- Icon */
 .tds-theme--replicant .tds-option_group--multiselect .tds-form-label-text::before,
 .tds-theme--replicant .tds-option_group--multiselect .tds-form-label-text::after {
   -webkit-animation: turn-off 1s;
           animation: turn-off 1s;
   background: var(--tds-text--color--light);
   block-size: var(--tds-plus-size);
   content: '';
   display: block;
   inline-size: 2px;
   left: var(--tds-plus-icon--left);
   opacity: 1;
   position: absolute;
   right: var(--tds-plus-icon--right);
   top: calc(100% - 1em); /* Center vertically with the text */
   transition: var(--transition-off);
 }
 .tds-theme--replicant .tds-option_group--multiselect .tds-form-label-text::before {
   transform: rotate(0deg);
 }
 .tds-theme--replicant .tds-option_group--multiselect .tds-form-label-text::after {
   transform: rotate(-90deg);
 }
 /* Label +/- Icon: On State */
 .tds-theme--replicant .tds-option_group--multiselect .tds-option:focus-within :is(.tds-form-label-text::before, .tds-form-label-text::after),
 .tds-theme--replicant .tds-option_group--multiselect .tds-form-label:hover .tds-form-label-text::before,
 .tds-theme--replicant .tds-option_group--multiselect .tds-form-label:hover .tds-form-label-text::after,
 .tds-theme--replicant .tds-option_group--multiselect .tds-form-input:checked ~ .tds-form-label .tds-form-label-text::before,
 .tds-theme--replicant .tds-option_group--multiselect .tds-form-input:checked ~ .tds-form-label .tds-form-label-text::after {
   background: var(--tds-color--secondary);
   transition: var(--transition-on);
 }
 .tds-theme--replicant .tds-option_group--multiselect .tds-form-input:checked ~ .tds-form-label .tds-form-label-text {
   -webkit-animation: turn-on 1s;
           animation: turn-on 1s;
   transform: translateX(var(--tds-option_group-transform));
 }
 .tds-theme--replicant .tds-option_group--multiselect .tds-form-input:checked ~ .tds-form-label .tds-form-label-text::before,
 .tds-theme--replicant .tds-option_group--multiselect .tds-form-input:checked ~ .tds-form-label .tds-form-label-text::after {
   opacity: 0;
 }
 .tds-theme--replicant .tds-option_group--multiselect .tds-form-input:checked ~ .tds-form-label .tds-form-label-text::before {
   -webkit-animation: turn-on-before 1s;
           animation: turn-on-before 1s;
   transform: rotate(-270deg);
 }
 .tds-theme--replicant .tds-option_group--multiselect .tds-form-input:checked ~ .tds-form-label .tds-form-label-text::after {
   -webkit-animation: turn-on-after 1s;
           animation: turn-on-after 1s;
   transform: rotate(-270deg);
 }
 @-webkit-keyframes turn-on {
   /* wait till part-way through blinking */
   0% {
     transform: translateX(0);
   }

   48% {
     transform: translateX(0);
   }

   100% {
     transform: translateX(var(--tds-option_group-transform));
   }
 }
 @keyframes turn-on {
   /* wait till part-way through blinking */
   0% {
     transform: translateX(0);
   }

   48% {
     transform: translateX(0);
   }

   100% {
     transform: translateX(var(--tds-option_group-transform));
   }
 }
 @-webkit-keyframes turn-on-before {
   /* Blink */
   0% {
     opacity: 1;
     transform: rotate(0deg);
   }

   8% {
     opacity: 0;
   }

   16% {
     opacity: 1;
   }

   24% {
     opacity: 0;
   }

   32% {
     opacity: 1;
   }

   40% {
     opacity: 0;
   }

   /* Move */
   48% {
     opacity: 1;
     transform: rotate(0deg);
   }

   100% {
     opacity: 0;
     transform: rotate(-270deg);
   }
 }
 @keyframes turn-on-before {
   /* Blink */
   0% {
     opacity: 1;
     transform: rotate(0deg);
   }

   8% {
     opacity: 0;
   }

   16% {
     opacity: 1;
   }

   24% {
     opacity: 0;
   }

   32% {
     opacity: 1;
   }

   40% {
     opacity: 0;
   }

   /* Move */
   48% {
     opacity: 1;
     transform: rotate(0deg);
   }

   100% {
     opacity: 0;
     transform: rotate(-270deg);
   }
 }
 @-webkit-keyframes turn-on-after {
   /* Blink */
   0% {
     opacity: 1;
     transform: rotate(-90deg);
   }

   8% {
     opacity: 0;
   }

   16% {
     opacity: 1;
   }

   24% {
     opacity: 0;
   }

   32% {
     opacity: 1;
   }

   40% {
     opacity: 0;
   }

   /* Move */
   48% {
     opacity: 1;
     transform: rotate(-90deg);
   }

   100% {
     opacity: 0;
     transform: rotate(-270deg);
   }
 }
 @keyframes turn-on-after {
   /* Blink */
   0% {
     opacity: 1;
     transform: rotate(-90deg);
   }

   8% {
     opacity: 0;
   }

   16% {
     opacity: 1;
   }

   24% {
     opacity: 0;
   }

   32% {
     opacity: 1;
   }

   40% {
     opacity: 0;
   }

   /* Move */
   48% {
     opacity: 1;
     transform: rotate(-90deg);
   }

   100% {
     opacity: 0;
     transform: rotate(-270deg);
   }
 }
 @-webkit-keyframes turn-off {
   0% {
     opacity: 0;
   }

   8% {
     opacity: 1;
   }

   16% {
     opacity: 0;
   }

   24% {
     opacity: 1;
   }

   32% {
     opacity: 0;
   }

   40% {
     opacity: 1;
   }

   100% {
     opacity: 1;
   }
 }
 @keyframes turn-off {
   0% {
     opacity: 0;
   }

   8% {
     opacity: 1;
   }

   16% {
     opacity: 0;
   }

   24% {
     opacity: 1;
   }

   32% {
     opacity: 0;
   }

   40% {
     opacity: 1;
   }

   100% {
     opacity: 1;
   }
 }
 .tds-theme--replicant .tds-progress_bar {
   --progress-border-radius: 1px;
   --progress-height: var(--tds-size--3x);
   --tds-notch--outline-thin__progress:
     polygon(
       0 0,
       100% 0,
       100% calc(100% - 8px),
       calc(100% - 8px) 100%,
       0 100%,
       0 1.5px,
       1.5px 1.5px,
       1.5px calc(100% - 1.5px),
       calc(100% - 9.5px) calc(100% - 1.5px),
       calc(100% - 1.5px) calc(100% - 9.5px),
       calc(100% - 1.5px) 1.5px,
       0 1.5px
     );
   --tds-notch_progress: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%);
   --tds-progress-bar--bar-color: transparent;

   background-color: transparent;
   box-shadow: none;
   padding: 4px;
 }
 /* TODO Add safaris support */
 .tds-theme--replicant .tds-progress_bar-wrapper::before {
   background: var(--tds-color--secondary);
   bottom: 0;

   /* clip-path: var(--tds-notch--outline-thin__progress); Seems to be broken */

   -webkit-clip-path: var(--tds-notch--outline-thin);

           clip-path: var(--tds-notch--outline-thin);
   content: '';
   display: block;
   left: 0;
   opacity: 1;
   position: absolute;
   right: 0;
   top: 0;
   transition: 0.5s ease;
 }
 .tds-theme--replicant .tds-progress_bar::-webkit-progress-value {
   border-radius: 0;
   box-shadow: var(--tds-glow--medium);
   -webkit-clip-path: var(--tds-notch_progress);
           clip-path: var(--tds-notch_progress);
 }
 .tds-theme--replicant .tds-progress_bar::-webkit-progress-bar {
   box-shadow: none;
 }
 /* NOTE: moz-progress-bar === -webkit-progress-value */
 .tds-progress_bar--primary::-moz-progress-bar {
   border-radius: 0;
   box-shadow: var(--tds-glow--medium);
   clip-path: var(--tds-notch_progress);
 }
 /* -- Status Message Theme Adjustments
 ----------------------------------------------------------------------------- */
 .tds-theme--replicant .tds-status_msg {
   --tds-card--padding: 0;
 }
 .tds-theme--replicant .tds-status_msg--enclosed {
   -webkit-backdrop-filter: blur(4px);
           backdrop-filter: blur(4px);
   background-color: rgba(128, 128, 128, 0.125);
 }
 .tds-theme--replicant .tds-status_msg:not(.tds-card--open) .tds-icon {
   --tds-card--padding: 0;
 }
 .tds-theme--replicant .tds-status_msg .tds-card-body {
   padding: 0;
 }
 .tds-theme--replicant .tds-status_msg:not(.tds-card--open) .tds-icon + .tds-card-body,
 .tds-theme--replicant .tds-status_msg:not(.tds-card--layout-vertical) .tds-icon + .tds-card-body {
   -webkit-padding-start: var(--tds-size--1x);
           padding-inline-start: var(--tds-size--1x);
 }
 .tds-theme--replicant .tds-switch_toggle {
   --tds-switch_toggle--radius: 0;
 }
 .tds-theme--replicant .tds-switch_toggle-track::after {
   background-color: var(--tds-toggle--fill-color);
 }
 .tds-theme--replicant .tds-switch_toggle-checkbox:checked ~ .tds-switch_toggle-track {
   background-color: var(--tds-color--white);
 }
 .tds-theme--replicant .tds-switch_toggle--label_inside .tds-switch_toggle-btn:last-child {
   right: 0;
 }
 .tds-theme--replicant .tds-switch_toggle--label_inside .tds-switch_toggle-btn:nth-last-child(2) {
   left: 0;
 }
 .tds-theme--replicant .tds-switch_toggle--label_inside .tds-switch_toggle-checkbox:checked ~ .tds-switch_toggle-btn {
   color: var(--tds-color--inverse);
 }
 /* -- Text Theme Adjustments
 ----------------------------------------------------------------------------- */
 .tds-theme--replicant,
 .tds-theme--replicant .tds-component-preview {
   --tds-heading--text-transform: uppercase;
 }
 .tds-theme--replicant :is(h1, h2, h3, h4, h5, h6, .tds-text--h1, .tds-text--h2, .tds-text--h3, .tds-text--h4, .tds-text--h5, .tds-text--h6) {
   --tds-heading--letter-spacing: 0.145em;

   font-weight: var(--tds-font-weight--bold);
 }
 .tds-theme--replicant :is(h1, h2, .tds-text--h1, .tds-text--h2) {
   text-shadow: 0 0 var(--tds-size--1x) rgba(var(--tds-color--rgb-shade), 0.5);
 }
 .tds-theme--replicant .tds-text--caption {
   --tds-text--color: var(--tds-color--grey55);
 }
 /* -- Button Theme Adjustments
 ----------------------------------------------------------------------------- */
 .tds-theme--v7 .tds-btn--large {
   --tds-border-radius--pill: var(--tds-size--half);
 }
 .tds-theme--v7 .tds-btn {
   text-transform: inherit;
 }
 .tds-theme--v7 .tds-card:not(.tds-card--open) {
   --tds-border-radius--card: var(--tds-size--half);
   --tds-border-radius--card--dense: calc(var(--tds-size--half) / 2);
 }
 .tds-theme--v7 .tds-date-picker {
   --tds-day-radius: var(--tds-size--half);
   --tds-end-of-week-radius: 0;
 }
 /* stylelint-disable */
 .tds-theme--v7,
 .tds-theme--v7 .tds-form-input-wrap,
 .tds-theme--v7 .tds-form--input {
   --tds-form-item--indent: 12px;
 }
 /* Outdents form items by default */
 .tds-theme--v7 .tds-form-item,
 .tds-theme--v7 .tds-form-feedback-wrap {
   --tds-form-item--indent: 0px;
 }
 .tds-theme--v7 .tds-form-item--choice [type='checkbox'],
 .tds-theme--v7 .tds-form-item--choice [type='checkbox']::after {
   --tds-form-input--border-radius: 2px;
 }
 .tds-theme--v7 .tds-form-item--range .tds-form-input  {
   --tds-range-slider--thumb-radius: 20px;
 }
 .tds-theme--v7 .tds-card:is(.tds-locale-selector-trigger, .tds-locale-selector-country) {
   border-radius: var(--tds-border-radius--card);
 }
 .tds-theme--v7 .tds-option {
   --tds-form--indent: 20px;
 }
 .tds-theme--v7 .tds-form-input--circle {
   border-radius: var(--tds-height--pill);
 }
 .tds-theme--v7 .tds-option_group .tds-label--checkbox::before,
 .tds-theme--v7 .tds-option_group .tds-label--checkbox::after {
   border-radius: 2px;
 }
 .tds-theme--v7 .tds-site-nav-item,
 .tds-animate--backdrop-backdrop {
   border-radius: var(--tds-border-radius--pill);
 }
 .tds-theme--v7 .tds-tabs {
   --tds-tab--border-radius: calc(var(--tds-border-radius--pill) - 2px);
 }
 /******************************************************************************
  Global Alignment Utilities
 ******************************************************************************/
 /* --- Container Alignment
 ---------------------------------------------------------------- */
 .tds--align_center {
   display: block !important;
   margin: 0 auto !important;
 }
 .tds--align_start {
   display: block !important;
   -webkit-margin-end: auto !important;
           margin-inline-end: auto !important;
   -webkit-margin-start: 0 !important;
           margin-inline-start: 0 !important;
 }
 .tds--align_end {
   display: block !important;
   -webkit-margin-end: 0 !important;
           margin-inline-end: 0 !important;
   -webkit-margin-start: auto !important;
           margin-inline-start: auto !important;
 }
 /**
  * Animated Backdrop
  * - A generic utility that can be used across a variety of components
  * - This is designed to mimic the appearance of a selected state,
  * - but move from one item to the next as the user's selection changes

  Basic HTML Structure

  <parent>
   <div class="tds--animated-backdrop" />

   <item />
   <item />
   <item />
  </parent

  */
 .tds--animated-backdrop {
   position: absolute;

   /* Positional data set via js */
   block-size: var(--tds-animate-backdrop-height, 0);
   inline-size: var(--tds-animate-backdrop-width, 0);
   left: var(--tds-animate-backdrop-left, 0);
   top: var(--tds-animate-backdrop-top, 0);

   /* Note: Visibility needs to not have a default value here, otherwise it will override the tokenized value */
   opacity: var(--tds-animate-backdrop-opacity, 0);
   visibility: var(--tds-animate-backdrop-visibility);

   /* z-index: -1; */
   transition: var(--tds-animate-backdrop-transition, opacity 0.5s ease, visibility 0s 0s);
 }
 /*
  * Pre-Normalization Utils
  * - Kept for backwards compatibility
  * - Todo: Fully convert to normalized versions
  */
 :root,
 .tds-component-preview {
   --tds-animate-transition-duration--medium: 600ms;
   --tds-animate-transition-duration--short: 500ms;
   --tds-animate-transition-function--base: linear;
   --tds-animate-transition-function--mktg: cubic-bezier(0.165, 0.84, 0.44, 1);
   --tds-animate-transition-property: opacity;
   --tds-animate-transition_duration--long: 1500ms;

   /* Normalized Tokens - TODO: Move tokens to this group as we refactor each animation */
   --tds--fade-in: tds--fade-in 1s ease;
   --tds--pulsing: tds--pulsing 1.5s infinite ease-in-out;
   --tds--rotating: tds--rotating 1.5s infinite linear;
 }
 .tds-animate--fade_out {
   opacity: var(--tds-opacity--transparent);
   transition:
     var(--tds-animate-transition-property) var(--tds-animate-transition-duration--short)
     var(--tds-animate-transition-function--base);
 }
 .tds-animate--fade_in {
   opacity: var(--tds-opacity--100);
   transition:
     var(--tds-animate-transition-property) var(--tds-animate-transition-duration--short)
     var(--tds-animate-transition-function--base);
 }
 .tds-animate_small--to_reveal {
   z-index: -1;
   opacity: var(--tds-opacity--transparent);
   transform: translate3d(0, 30px, 0);
   transition:
     transform var(--tds-animate-transition-duration--short)
     var(--tds-animate-transition-function--mktg),
     opacity var(--tds-animate-transition-duration--short)
     var(--tds-animate-transition-function--mktg);
 }
 .tds-animate_small--reveal .tds-animate_small--to_reveal {
   opacity: var(--tds-opacity--100);
   transform: translate3d(0, 0, 0);
   z-index: initial;
 }
 .tds-animate_large--to_reveal {
   opacity: var(--tds-opacity--transparent);
   transform: translate3d(0, 100px, 0);
   z-index: -1;
 }
 .tds-animate_large--revealed {
   z-index: initial;
   opacity: var(--tds-opacity--100);
   transform: translate3d(0, 0, 0);
   transition:
     transform var(--tds-animate-transition_duration--long)
     var(--tds-animate-transition-function--mktg),
     opacity var(--tds-animate-transition_duration--long)
     var(--tds-animate-transition-function--mktg);
 }
 .tds-animate--squish {
   transition: translate 0.1s ease;
 }
 .tds-animate--bounce {
   -webkit-animation-duration: 2s;
           animation-duration: 2s;
   -webkit-animation-iteration-count: infinite;
           animation-iteration-count: infinite;
   -webkit-animation-name: tds-keyframe--bounce;
           animation-name: tds-keyframe--bounce;
 }
 @-webkit-keyframes tds-keyframe--fade_out {
   0% {
     opacity: var(--tds-opacity--100);
   }

   100% {
     opacity: var(--tds-opacity--transparent);
   }
 }
 @keyframes tds-keyframe--fade_out {
   0% {
     opacity: var(--tds-opacity--100);
   }

   100% {
     opacity: var(--tds-opacity--transparent);
   }
 }
 @-webkit-keyframes tds-keyframe--fade_in {
   0% {
     opacity: var(--tds-opacity--transparent);
   }

   100% {
     opacity: var(--tds-opacity--100);
   }
 }
 @keyframes tds-keyframe--fade_in {
   0% {
     opacity: var(--tds-opacity--transparent);
   }

   100% {
     opacity: var(--tds-opacity--100);
   }
 }
 @-webkit-keyframes tds-keyframe--make_smaller {
   0% {
     max-block-size: 100vh;
     opacity: var(--tds-opacity--100);
   }

   100% {
     max-block-size: 0;
     opacity: var(--tds-opacity--transparent);
   }
 }
 @keyframes tds-keyframe--make_smaller {
   0% {
     max-block-size: 100vh;
     opacity: var(--tds-opacity--100);
   }

   100% {
     max-block-size: 0;
     opacity: var(--tds-opacity--transparent);
   }
 }
 @-webkit-keyframes tds-keyframe--make_larger {
   0% {
     max-block-size: 0;
     opacity: var(--tds-opacity--transparent);
   }

   100% {
     max-block-size: 100vh;
     opacity: var(--tds-opacity--100);
   }
 }
 @keyframes tds-keyframe--make_larger {
   0% {
     max-block-size: 0;
     opacity: var(--tds-opacity--transparent);
   }

   100% {
     max-block-size: 100vh;
     opacity: var(--tds-opacity--100);
   }
 }
 @-webkit-keyframes tds-keyframe--bounce {
   0%,
   20%,
   50%,
   80%,
   100% {
     transform: translateY(0);
   }

   40% {
     transform: translateY(5px);
   }

   60% {
     transform: translateY(3px);
   }
 }
 @keyframes tds-keyframe--bounce {
   0%,
   20%,
   50%,
   80%,
   100% {
     transform: translateY(0);
   }

   40% {
     transform: translateY(5px);
   }

   60% {
     transform: translateY(3px);
   }
 }
 /**
  * Normalized Animation Utils
  */
 .tds--fade-in {
   -webkit-animation: var(--tds--fade-in);
           animation: var(--tds--fade-in);
 }
 @-webkit-keyframes tds--fade-in {
   0% {
     opacity: 0;
   }

   100% {
     opacity: 1;
   }
 }
 @keyframes tds--fade-in {
   0% {
     opacity: 0;
   }

   100% {
     opacity: 1;
   }
 }
 /* TODO:
  * Distinct motion vs fade handling for prefers-reduced-motion
  * https://issues.teslamotors.com/browse/AWSM-3770
  */
 .tds--rotating {
   -webkit-animation: var(--tds--rotating);
           animation: var(--tds--rotating);
 }
 @-webkit-keyframes tds--rotating {
   0% {
     transform: rotate(0deg);
   }

   100% {
     transform: rotate(360deg);
   }
 }
 @keyframes tds--rotating {
   0% {
     transform: rotate(0deg);
   }

   100% {
     transform: rotate(360deg);
   }
 }
 .tds--pulsing {
   -webkit-animation: var(--tds--pulsing);
           animation: var(--tds--pulsing);
 }
 @-webkit-keyframes tds--pulsing {
   0% {
     opacity: 0;
   }

   20% {
     opacity: 0.7;
   }

   100% {
     opacity: 0;
   }
 }
 @keyframes tds--pulsing {
   0% {
     opacity: 0;
   }

   20% {
     opacity: 0.7;
   }

   100% {
     opacity: 0;
   }
 }
 /******************************************************************************
  Global Column Utilites
 ******************************************************************************/
 .tds-columns {
   -moz-column-gap: 20px;
        column-gap: 20px;
   -moz-column-width: auto;
        column-width: auto;
   display: block;
 }
 .tds-columns--two {
   -moz-column-count: 2;
        column-count: 2;
 }
 .tds-columns--three {
   -moz-column-count: 3;
        column-count: 3;
 }
 /* Desktop modifiers for screens larger than 840px */
 @media (min-width: 600px) {
   .tds-columns--two_on_desktop {
     -moz-column-count: 2;
          column-count: 2;
   }

   .tds-columns--three_on_desktop {
     -moz-column-count: 3;
          column-count: 3;
   }
 }
 :root,
 .tds-component-preview,
 [lang*='en'],
 html[lang*='en'],
 [lang*='en'] body {
   --tds-font-family--combined: var(--tds-font-family--latin), var(--tds-font-family) !important;

   font-family: var(--tds-font-family--combined, --tds-base-font_family, system);
 }
 [lang='ar-AE'],
 html[lang='ar-AE'],
 [lang='ar-AE'] body {
   --tds-font-family--combined: var(--tds-font-family--latin), var(--tds-font-family--arabic), var(--tds-font-family) !important;

   font-family: var(--tds-font-family--combined, --tds-base-font_family, system);
 }
 [lang='he-IL'],
 html[lang='he-IL'],
 [lang='he-IL'] body {
   --tds-font-family--combined: var(--tds-font-family--latin), var(--tds-font-family--hebrew), var(--tds-font-family) !important;

   font-family: var(--tds-font-family--combined, --tds-base-font_family, system);
 }
 [lang='ko-KR'],
 html[lang='ko-KR'],
 [lang='ko-KR'] body {
   --tds-font-family--combined: var(--tds-font-family--latin), var(--tds-font-family--korean), var(--tds-font-family) !important;

   font-family: var(--tds-font-family--combined, --tds-base-font_family, system);
 }
 [lang='ja-JP'],
 html[lang='ja-JP'],
 [lang='ja-JP'] body {
   --tds-font-family--combined: var(--tds-font-family--latin), var(--tds-font-family--japanese), var(--tds-font-family) !important;

   font-family: var(--tds-font-family--combined, --tds-base-font_family, system);
 }
 [lang='zh-CN'],
 html[lang='zh-CN'],
 [lang='zh-CN'] body {
   --tds-font-family--combined: var(--tds-font-family--latin), var(--tds-font-family--chinese-simplified), var(--tds-font-family) !important;

   font-family: var(--tds-font-family--combined, --tds-base-font_family, system);
 }
 [lang='zh-HK'],
 html[lang='zh-HK'],
 [lang='zh-HK'] body {
   --tds-font-family--combined: var(--tds-font-family--latin), var(--tds-font-family--chinese-hk), var(--tds-font-family) !important;

   font-family: var(--tds-font-family--combined, --tds-base-font_family, system);
 }
 [lang='zh-TW'],
 html[lang='zh-TW'],
 [lang='zh-TW'] body {
   --tds-font-family--combined: var(--tds-font-family--latin), var(--tds-font-family--chinese-traditional), var(--tds-font-family) !important;

   font-family: var(--tds-font-family--combined, --tds-base-font_family, system);
 }
 .tds--prevent-scroll {
   overflow: hidden;
 }
 .tds--product-name {
   white-space: nowrap;
 }
 .tds-fullscreen-ios {
   padding:
     env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
     env(safe-area-inset-left);
 }
 /******************************************************************************
  Global Padding Utilites
 ******************************************************************************/
 .tds--padding--small {
   padding: var(--tds-size--1x) !important;
 }
 .tds--padding {
   padding: var(--tds-size--2x) !important;
 }
 .tds--padding--large {
   padding: var(--tds-size--3x) !important;
 }
 /* Remove Horizontal Padding */
 .tds--no_horizontal_padding {
   -webkit-padding-end: 0 !important;
           padding-inline-end: 0 !important;
   -webkit-padding-start: 0 !important;
           padding-inline-start: 0 !important;
 }
 .tds--no_vertical_padding {
   -webkit-padding-after: 0 !important;
           padding-block-end: 0 !important;
   -webkit-padding-before: 0 !important;
           padding-block-start: 0 !important;
 }
 .tds--no_padding {
   padding: 0 !important;
 }
 .tds--horizontal_padding--small {
   -webkit-padding-end: var(--tds-size--1x) !important;
           padding-inline-end: var(--tds-size--1x) !important;
   -webkit-padding-start: var(--tds-size--1x) !important;
           padding-inline-start: var(--tds-size--1x) !important;
 }
 .tds--horizontal_padding {
   -webkit-padding-end: var(--tds-size--2x) !important;
           padding-inline-end: var(--tds-size--2x) !important;
   -webkit-padding-start: var(--tds-size--2x) !important;
           padding-inline-start: var(--tds-size--2x) !important;
 }
 .tds--horizontal_padding--large {
   -webkit-padding-end: var(--tds-size--3x) !important;
           padding-inline-end: var(--tds-size--3x) !important;
   -webkit-padding-start: var(--tds-size--3x) !important;
           padding-inline-start: var(--tds-size--3x) !important;
 }
 .tds--vertical_padding--small {
   -webkit-padding-after: var(--tds-size--1x) !important;
           padding-block-end: var(--tds-size--1x) !important;
   -webkit-padding-before: var(--tds-size--1x) !important;
           padding-block-start: var(--tds-size--1x) !important;
 }
 .tds--vertical_padding {
   -webkit-padding-after: var(--tds-size--2x) !important;
           padding-block-end: var(--tds-size--2x) !important;
   -webkit-padding-before: var(--tds-size--2x) !important;
           padding-block-start: var(--tds-size--2x) !important;
 }
 .tds--vertical_padding--large {
   -webkit-padding-after: var(--tds-size--3x) !important;
           padding-block-end: var(--tds-size--3x) !important;
   -webkit-padding-before: var(--tds-size--3x) !important;
           padding-block-start: var(--tds-size--3x) !important;
 }
 @media (max-width: 599px) {
   .tds--gutterless_on_small {
     -webkit-padding-start: 0 !important;
             padding-inline-start: 0 !important;
     -webkit-padding-end: 0 !important;
             padding-inline-end: 0 !important;
   }
 }
 .tds-sticky--top,
 .tds-sticky--left {
   margin: 0;
   position: -webkit-sticky;
   position: sticky;
   z-index: 1;
 }
 .tds-sticky--top {
   top: -1px;
 }
 .tds-sticky--left {
   left: -1px;
 }
 /******************************************************************************
  Global Visibility Utilites
 ******************************************************************************/
 /* Hide something from view and from assistive devices */
 .tds--is_hidden {
   display: none !important;
 }
 /* Hide something visually, but still accessible for assistive devices */
 .tds--is_visually_hidden:not(:focus):not(:active) {
   block-size: 1px;
   border: 0;
   clip: rect(0 0 0 0);
   -webkit-clip-path: inset(100%);
           clip-path: inset(100%);
   inline-size: 1px;
   margin: -1px;
   overflow: hidden;
   padding: 0;
   position: absolute;
   white-space: nowrap;
 }
 /* Show a previously `visibility: hidden;` element */
 .tds--is_visible {
   visibility: visible;
 }
 /* Inverse of the above. Hide something visually, but leave space for the element in the browser  */
 .tds--is_invisible {
   visibility: hidden;
 }
 /* HideOn Classes: 1:1 Map to TDS Breakpoints -- release in Q3 */
 @media (max-width: 599px) {
   .tds--hideon-phone-only {
     display: none !important;
   }
 }
 @media (min-width: 600px) and (max-width: 899px) {
   .tds--hideon-tablet-portrait-only {
     display: none !important;
   }
 }
 @media (min-width: 600px) {
   .tds--hideon-tablet-portrait-up {
     display: none !important;
   }
 }
 @media (min-width: 900px) and (max-width: 1199px) {
   .tds--hideon-tablet-landscape-only {
     display: none !important;
   }
 }
 @media (min-width: 900px) {
   .tds--hideon-tablet-landscape-up {
     display: none !important;
   }
 }
 @media (min-width: 1200px) and (max-width: 1799px) {
   .tds--hideon-desktop-only {
     display: none !important;
   }
 }
 @media (min-width: 1200px) {
   .tds--hideon-desktop-up {
     display: none !important;
   }
 }
 @media (min-width: 1800px) {
   .tds--hideon-desktop-large-up {
     display: none !important;
   }
 }