.applitools-activate .tcl-showcase__down-arrow {
-webkit-animation: none;
animation: none;
}
.applitools-activate .tds-animate--bounce,
.applitools-activate [id="battery-fill"] {
-webkit-animation-play-state: paused !important;
animation-play-state: paused !important;
}
.tds-colorscheme--light,
.tds-scrim--white,
:root {
--tds-animation-bezier-base: cubic-bezier(0.5, 0, 0, 0.75);
--tds-ui-opacity-100: 1;
--tds-ui-opacity-70: 0.7;
--tds-ui-opacity-50: 0.5;
--tds-ui-opacity-30: 0.3;
--tds-ui-opacity-0: 0;
--tds-ui-max-paragraph-width: 75ch;
--tds-ui-box-shadow-off: 0 0 0 0 #0000;
--tds-component-pill-padding-inline: 20px;
--tds-size-base-plus: 12px;
--tds-size-half: 4px;
--tds-size-base: 8px;
--tds-size-9x: 72px;
--tds-size-8x: 64px;
--tds-size-7x: 56px;
--tds-size-6x: 48px;
--tds-size-5x: 40px;
--tds-size-4x: 32px;
--tds-size-3x: 24px;
--tds-size-2x: 16px;
--tds-size-13x: 104px;
--tds-size-12x: 96px;
--tds-size-11x: 88px;
--tds-size-10x: 80px;
--tds-line-height-unitless: 1.414;
--tds-line-height-130: 96px;
--tds-line-height-120: 72px;
--tds-line-height-110: 64px;
--tds-line-height-100: 56px;
--tds-line-height-90: 56px;
--tds-line-height-80: 48px;
--tds-line-height-75: 44px;
--tds-line-height-70: 36px;
--tds-line-height-60: 28px;
--tds-line-height-50: 28px;
--tds-line-height-40: 24px;
--tds-line-height-30: 20px;
--tds-line-height-20: 20px;
--tds-line-height-10: 18px;
--tds-font-weight-thin: 100;
--tds-font-weight-regular: 400;
--tds-font-weight-medium: 500;
--tds-font-weight-light: 300;
--tds-font-weight-bold: 700;
--tds-font-size-130: 80px;
--tds-font-size-120: 72px;
--tds-font-size-110: 64px;
--tds-font-size-100: 56px;
--tds-font-size-90: 48px;
--tds-font-size-80: 40px;
--tds-font-size-75: 34px;
--tds-font-size-70: 28px;
--tds-font-size-60: 24px;
--tds-font-size-55: 23px;
--tds-font-size-50: 20px;
--tds-font-size-40: 17px;
--tds-font-size-30: 14px;
--tds-font-size-20: 12px;
--tds-font-size-10: 10px;
--tds-font-family-fallback-text: -apple-system, Arial, sans-serif;
--tds-font-family-fallback-monospace: Menlo, monospace;
--tds-font-family-fallback-display: -apple-system, Arial, sans-serif;
--tds-font-family-base-speed: "CT Speed";
--tds-font-family-base-blender: "Blender TSL";
--tds-font-family-base-text: "Universal Sans Text";
--tds-font-family-base-monospace: "Fira Code";
--tds-font-family-base-display: "Universal Sans Display";
--tds-color-status-yellow: #ffc107;
--tds-color-status-orange: #f29137;
--tds-color-status-red: #eb432f;
--tds-color-status-magenta: #e13e8c;
--tds-color-status-purple: #863ee1;
--tds-color-status-blue: #3e6be2;
--tds-color-status-teal: #3eade1;
--tds-color-status-green: #02b028;
--tds-color-yellow: #fbb01b;
--tds-color-white: #fff;
--tds-color-red-20: #ed4e3b;
--tds-color-red-10: #b74134;
--tds-color-grey-70: #f4f4f4;
--tds-color-grey-65: #eee;
--tds-color-grey-60: #e2e3e3;
--tds-color-grey-50: #d0d1d2;
--tds-color-grey-45: #bbb;
--tds-color-grey-40: #a2a3a5;
--tds-color-grey-35: #8e8e8e;
--tds-color-grey-33: #707070;
--tds-color-grey-30: #5c5e62;
--tds-color-grey-25: #444;
--tds-color-grey-20: #393c41;
--tds-color-grey-15: #222;
--tds-color-grey-10: #171a20;
--tds-color-green: #12bb00;
--tds-color-blue-40: #3368ff;
--tds-color-blue-30: #3e6ae1;
--tds-color-blue-20: #3457b1;
--tds-color-blue-10: #2e4994;
--tds-color-black: #000;
--tds-border-width-small: 1px;
--tds-border-width-medium: 2px;
--tds-border-width-large: 3px;
--tds-border-width-hairline: 0.5px;
--tds-border-style: solid;
--tds-border-radius-outline-only: 0.001px;
--tds-border-radius-circle: 100%;
--tds-ui-box-shadow-small: 0 var(--tds-size-half) var(--tds-size-base) 0
#00000014;
--tds-ui-box-shadow-medium: 0 var(--tds-size-base) var(--tds-size-2x) 0
#0000001f;
--tds-ui-box-shadow-large-reverse: 0 -8px var(--tds-size-2x) 0 #00000029;
--tds-ui-box-shadow-large: 0 var(--tds-size-base) var(--tds-size-2x) 0
#00000029;
--tds-component-pill-padding-block: var(--tds-size-2x);
--tds-component-pill-height: var(--tds-size-5x);
--tds-component-card-padding: var(--tds-size-2x);
--tds-size-1x: var(--tds-size-base);
--tds-font-family-thai-speed: var(--tds-font-family-base-speed),
"Noto Sans Mono", var(--tds-font-family-fallback-speed);
--tds-font-family-thai-blender: var(--tds-font-family-base-blender),
"Noto Sans Thai", var(--tds-font-family-fallback-blender);
--tds-font-family-thai-text: var(--tds-font-family-base-text),
"Noto Sans Thai", var(--tds-font-family-fallback-text);
--tds-font-family-thai-monospace: var(--tds-font-family-base-monospace),
"Noto Sans Mono", var(--tds-font-family-fallback-monospace);
--tds-font-family-thai-display: var(--tds-font-family-base-display),
"Noto Sans Thai", var(--tds-font-family-fallback-display);
--tds-font-family-latin-speed: var(--tds-font-family-base-speed),
var(--tds-font-family-fallback-speed);
--tds-font-family-latin-blender: var(--tds-font-family-base-blender),
var(--tds-font-family-fallback-blender);
--tds-font-family-latin-text: var(--tds-font-family-base-text),
var(--tds-font-family-fallback-text);
--tds-font-family-latin-monospace: var(--tds-font-family-base-monospace),
var(--tds-font-family-fallback-monospace);
--tds-font-family-latin-display: var(--tds-font-family-base-display),
var(--tds-font-family-fallback-display);
--tds-font-family-korean-speed: var(--tds-font-family-base-speed),
"Noto Sans Mono", var(--tds-font-family-fallback-speed);
--tds-font-family-korean-blender: var(--tds-font-family-base-blender),
"Noto Sans KR", var(--tds-font-family-fallback-blender);
--tds-font-family-korean-text: var(--tds-font-family-base-text),
"Noto Sans KR", var(--tds-font-family-fallback-text);
--tds-font-family-korean-monospace: var(--tds-font-family-base-monospace),
var(--tds-font-family-fallback-monospace);
--tds-font-family-korean-display: var(--tds-font-family-base-display),
"Noto Sans KR", var(--tds-font-family-fallback-display);
--tds-font-family-japanese-speed: var(--tds-font-family-base-speed),
"Noto Sans Mono", var(--tds-font-family-fallback-speed);
--tds-font-family-japanese-blender: var(--tds-font-family-base-blender),
"AXIS Font Japanese W55", "Hiragino Sans",
var(--tds-font-family-fallback-blender);
--tds-font-family-japanese-text: var(--tds-font-family-base-text),
"AXIS Font Japanese W55", "Hiragino Sans",
var(--tds-font-family-fallback-text);
--tds-font-family-japanese-monospace: var(--tds-font-family-base-monospace),
var(--tds-font-family-fallback-monospace);
--tds-font-family-japanese-display: var(--tds-font-family-base-display),
"AXIS Font Japanese W55", "Hiragino Sans",
var(--tds-font-family-fallback-display);
--tds-font-family-hebrew-speed: var(--tds-font-family-base-speed),
"Noto Sans Mono", var(--tds-font-family-fallback-speed);
--tds-font-family-hebrew-blender: var(--tds-font-family-base-blender),
"Noto Sans", var(--tds-font-family-fallback-blender);
--tds-font-family-hebrew-text: var(--tds-font-family-base-text),
"Noto Sans Hebrew", var(--tds-font-family-fallback-text);
--tds-font-family-hebrew-monospace: var(--tds-font-family-base-monospace),
"Noto Sans Mono", var(--tds-font-family-fallback-monospace);
--tds-font-family-hebrew-display: var(--tds-font-family-base-display),
"Noto Sans Hebrew", var(--tds-font-family-fallback-display);
--tds-font-family-greek-speed: var(--tds-font-family-base-speed),
"Noto Sans Mono", var(--tds-font-family-fallback-speed);
--tds-font-family-greek-blender: var(--tds-font-family-base-blender),
"Noto Sans", var(--tds-font-family-fallback-blender);
--tds-font-family-greek-text: var(--tds-font-family-base-text), "Noto Sans",
var(--tds-font-family-fallback-text);
--tds-font-family-greek-monospace: var(--tds-font-family-base-monospace),
"Noto Sans Mono", var(--tds-font-family-fallback-monospace);
--tds-font-family-greek-display: var(--tds-font-family-base-display),
"Noto Sans", var(--tds-font-family-fallback-display);
--tds-font-family-fallback-speed: var(--tds-font-family-fallback-monospace);
--tds-font-family-fallback-blender: var(--tds-font-family-fallback-text);
--tds-font-family-cyrillic-speed: var(--tds-font-family-base-speed),
"Noto Sans Mono", var(--tds-font-family-fallback-speed);
--tds-font-family-cyrillic-blender: var(--tds-font-family-base-blender),
"Noto Sans", var(--tds-font-family-fallback-blender);
--tds-font-family-cyrillic-text: var(--tds-font-family-base-text), "Noto Sans",
var(--tds-font-family-fallback-text);
--tds-font-family-cyrillic-monospace: var(--tds-font-family-base-monospace),
"Noto Sans Mono", var(--tds-font-family-fallback-monospace);
--tds-font-family-cyrillic-display: var(--tds-font-family-base-display),
"Noto Sans", var(--tds-font-family-fallback-display);
--tds-font-family-chinese-traditional-speed: var(--tds-font-family-base-speed),
"PingFang Mono TC", "Microsoft YaHei Mono",
var(--tds-font-family-fallback-speed);
--tds-font-family-chinese-traditional-blender: var(
--tds-font-family-base-blender
),
"PingFang TC", "Microsoft YaHei", var(--tds-font-family-fallback-blender);
--tds-font-family-chinese-traditional-text: var(--tds-font-family-base-text),
"PingFang TC", "Microsoft YaHei", var(--tds-font-family-fallback-text);
--tds-font-family-chinese-traditional-monospace: var(
--tds-font-family-base-monospace
),
"PingFang Mono TC", "Microsoft YaHei Mono",
var(--tds-font-family-fallback-monospace);
--tds-font-family-chinese-traditional-display: var(
--tds-font-family-base-display
),
"PingFang TC", "Microsoft YaHei", var(--tds-font-family-fallback-display);
--tds-font-family-chinese-simplified-speed: var(--tds-font-family-base-speed),
"PingFang Mono SC", "Microsoft YaHei Mono",
var(--tds-font-family-fallback-speed);
--tds-font-family-chinese-simplified-blender: var(
--tds-font-family-base-blender
),
"PingFang SC", "Microsoft YaHei", var(--tds-font-family-fallback-blender);
--tds-font-family-chinese-simplified-text: var(--tds-font-family-base-text),
"PingFang SC", "Microsoft YaHei", var(--tds-font-family-fallback-text);
--tds-font-family-chinese-simplified-monospace: var(
--tds-font-family-base-monospace
),
"PingFang Mono SC", "Microsoft YaHei Mono",
var(--tds-font-family-fallback-monospace);
--tds-font-family-chinese-simplified-display: var(
--tds-font-family-base-display
),
"PingFang SC", "Microsoft YaHei", var(--tds-font-family-fallback-display);
--tds-font-family-chinese-hk-speed: var(--tds-font-family-base-speed),
"PingFang Mono HK", "Microsoft YaHei", var(--tds-font-family-fallback-speed);
--tds-font-family-chinese-hk-blender: var(--tds-font-family-base-blender),
"PingFang HK", "Microsoft YaHei", var(--tds-font-family-fallback-blender);
--tds-font-family-chinese-hk-text: var(--tds-font-family-base-text),
"PingFang HK", "Microsoft YaHei", var(--tds-font-family-fallback-text);
--tds-font-family-chinese-hk-monospace: var(--tds-font-family-base-monospace),
"PingFang Mono HK", "Microsoft YaHei Mono",
var(--tds-font-family-fallback-monospace);
--tds-font-family-chinese-hk-display: var(--tds-font-family-base-display),
"PingFang HK", "Microsoft YaHei", var(--tds-font-family-fallback-display);
--tds-font-family-arabic-speed: var(--tds-font-family-base-speed),
"Noto Sans Arabic", "Noto Sans Mono", var(--tds-font-family-fallback-speed);
--tds-font-family-arabic-blender: var(--tds-font-family-base-blender),
"Noto Sans Arabic", var(--tds-font-family-fallback-blender);
--tds-font-family-arabic-text: var(--tds-font-family-base-text),
"Noto Sans Arabic", var(--tds-font-family-fallback-text);
--tds-font-family-arabic-monospace: var(--tds-font-family-base-monospace),
"Noto Sans Mono", var(--tds-font-family-fallback-monospace);
--tds-font-family-arabic-display: var(--tds-font-family-base-display),
"Noto Sans Arabic", var(--tds-font-family-fallback-display);
--tds-color-status-grey: var(--tds-color-grey-33);
--tds-border-radius-pill: var(--tds-size-half);
--tds-border-radius-card-dense: var(--tds-size-half);
--tds-border-radius-card-base: var(--tds-size-half);
--tds-border-radius-base: var(--tds-size-half);
--tds-theme-background-container-alt-highlight: rgba(0, 0, 0, 0.075);
--tds-theme-background-container-alt: #0000000d;
--tds-theme-status-yellow-pastel: #ffc10733;
--tds-theme-status-orange-pastel: #f2913733;
--tds-theme-status-red-pastel: rgba(235, 67, 47, 0.175);
--tds-theme-status-magenta-pastel: rgba(225, 62, 140, 0.175);
--tds-theme-status-purple-puzzo: #639;
--tds-theme-status-purple-pastel: rgba(134, 62, 225, 0.175);
--tds-theme-status-blue-pastel: rgba(62, 107, 226, 0.175);
--tds-theme-status-teal-pastel: #3eade126;
--tds-theme-status-green-pastel: rgba(2, 176, 40, 0.175);
--tds-theme-status-grey-pastel: rgba(93, 94, 98, 0.175);
--tds-theme-secondary-warning: var(--tds-color-yellow);
--tds-theme-secondary-positive: var(--tds-color-green);
--tds-theme-secondary-negative: var(--tds-color-red-10);
--tds-theme-primary-highlight: var(--tds-color-blue-20);
--tds-theme-primary: var(--tds-color-blue-30);
--tds-theme-foreground-primary: var(--tds-color-blue-30);
--tds-theme-foreground-on-primary: var(--tds-color-white);
--tds-theme-foreground-low-contrast: var(--tds-color-grey-30);
--tds-theme-foreground-inverse: var(--tds-color-black);
--tds-theme-foreground-high-contrast: var(--tds-color-grey-10);
--tds-theme-foreground: var(--tds-color-grey-20);
--tds-theme-border-low-contrast: var(--tds-color-grey-60);
--tds-theme-border: var(--tds-color-grey-50);
--tds-theme-background-dialog: var(--tds-color-white);
--tds-theme-background: var(--tds-color-white);
--tds-theme-background-container-highlight: var(--tds-color-grey-65);
--tds-theme-background-container: var(--tds-color-grey-70);
}
.tds-scrim--light {
--tds-theme-background-container-alt-highlight: rgba(0, 0, 0, 0.075);
--tds-theme-background-container-alt: #0000000d;
--tds-theme-status-yellow-pastel: #ffc10733;
--tds-theme-status-orange-pastel: #f2913733;
--tds-theme-status-red-pastel: rgba(235, 67, 47, 0.175);
--tds-theme-status-magenta-pastel: rgba(225, 62, 140, 0.175);
--tds-theme-status-purple-puzzo: #639;
--tds-theme-status-purple-pastel: rgba(134, 62, 225, 0.175);
--tds-theme-status-blue-pastel: rgba(62, 107, 226, 0.175);
--tds-theme-status-teal-pastel: #3eade126;
--tds-theme-status-green-pastel: rgba(2, 176, 40, 0.175);
--tds-theme-status-grey-pastel: rgba(93, 94, 98, 0.175);
--tds-theme-secondary-warning: var(--tds-color-yellow);
--tds-theme-secondary-positive: var(--tds-color-green);
--tds-theme-secondary-negative: var(--tds-color-red-10);
--tds-theme-primary-highlight: var(--tds-color-blue-20);
--tds-theme-primary: var(--tds-color-blue-30);
--tds-theme-foreground-primary: var(--tds-color-blue-20);
--tds-theme-foreground-on-primary: var(--tds-color-white);
--tds-theme-foreground-low-contrast: var(--tds-color-grey-30);
--tds-theme-foreground-inverse: var(--tds-color-black);
--tds-theme-foreground-high-contrast: var(--tds-color-grey-10);
--tds-theme-foreground: var(--tds-color-grey-20);
--tds-theme-border-low-contrast: var(--tds-color-grey-60);
--tds-theme-border: var(--tds-color-grey-50);
--tds-theme-background-dialog: var(--tds-color-white);
--tds-theme-background: var(--tds-color-grey-70);
--tds-theme-background-container-highlight: var(--tds-color-grey-65);
--tds-theme-background-container: var(--tds-color-white);
}
.tds-colorscheme--dark,
.tds-scrim--black {
--tds-theme-background-container-alt-highlight: #ffffff40;
--tds-theme-background-container-alt: hsla(0, 0%, 100%, 0.135);
--tds-theme-status-yellow-pastel: rgba(255, 193, 7, 0.225);
--tds-theme-status-orange-pastel: rgba(242, 145, 55, 0.225);
--tds-theme-status-red-pastel: #eb432f40;
--tds-theme-status-magenta-pastel: #e13e8c40;
--tds-theme-status-purple-puzzo: #639;
--tds-theme-status-purple-pastel: rgba(134, 62, 225, 0.275);
--tds-theme-status-blue-pastel: rgba(62, 107, 226, 0.275);
--tds-theme-status-teal-pastel: #3eade140;
--tds-theme-status-green-pastel: #02b02840;
--tds-theme-status-grey-pastel: #5d5e6240;
--tds-theme-secondary-warning: var(--tds-color-yellow);
--tds-theme-secondary-positive: var(--tds-color-green);
--tds-theme-secondary-negative: var(--tds-color-red-10);
--tds-theme-primary-highlight: var(--tds-color-blue-20);
--tds-theme-primary: var(--tds-color-blue-30);
--tds-theme-foreground-primary: var(--tds-color-blue-40);
--tds-theme-foreground-on-primary: var(--tds-color-white);
--tds-theme-foreground-low-contrast: var(--tds-color-grey-50);
--tds-theme-foreground-inverse: var(--tds-color-white);
--tds-theme-foreground-high-contrast: var(--tds-color-white);
--tds-theme-foreground: var(--tds-color-grey-65);
--tds-theme-border-low-contrast: var(--tds-color-grey-25);
--tds-theme-border: var(--tds-color-grey-30);
--tds-theme-background-dialog: var(--tds-color-grey-15);
--tds-theme-background: var(--tds-color-black);
--tds-theme-background-container-highlight: var(--tds-color-grey-20);
--tds-theme-background-container: var(--tds-color-grey-15);
}
.tds-component-preview,
:root {
--tds-bezier: cubic-bezier(0.5, 0, 0, 0.75);
--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;
--tds-color--black: #000;
--tds-color--blue10: #2e4994;
--tds-color--blue20: #3457b1;
--tds-color--blue30: #3e6ae1;
--tds-color--green: #12bb00;
--tds-color--grey10: #171a20;
--tds-color--grey15: #222;
--tds-color--grey20: #393c41;
--tds-color--grey25: #444;
--tds-color--grey30: #5c5e62;
--tds-color--grey35: #8e8e8e;
--tds-color--grey40: #a2a3a5;
--tds-color--grey45: #bbb;
--tds-color--grey50: #d0d1d2;
--tds-color--grey60: #e2e3e3;
--tds-color--grey65: #eee;
--tds-color--grey70: #f4f4f4;
--tds-color--red10: #b74134;
--tds-color--red20: #ed4e3b;
--tds-color--white: #fff;
--tds-color--yellow: #fbb01b;
--tds-blur--button: 16px;
--tds-blur--large: 8px;
--tds-blur--small: 4px;
--tds-border-radius: 4px;
--tds-border-radius--card: 4px;
--tds-border-radius--card--dense: 4px;
--tds-border-radius--circle: 100%;
--tds-border-radius--pill: 4px;
--tds-border-radius--outline-only: 0.001px;
--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 #00000029;
--tds-box-shadow--large-reverse: 0 -8px 16px 0 #00000029;
--tds-box-shadow--medium: 0 8px 16px 0 #0000001f;
--tds-box-shadow--off: 0 0 0 0 #0000;
--tds-box-shadow--small: 0 4px 8px 0 #00000014;
--tds-height--choice: 24px;
--tds-height--pill: 40px;
--tds-max-paragraph-width: 75ch;
--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;
}
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi),
(min-resolution: 2) {
.tds-component-preview,
:root {
--tds-border-width--hairline: 0.5px;
}
}
:root {
--tds-paragraph-gap: var(--tds-font-size-30);
}
* {
box-sizing: border-box;
scroll-behavior: smooth;
}
body,
html {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
margin: 0;
padding: 0;
}
html {
-webkit-text-size-adjust: 100%;
block-size: -webkit-fill-available;
}
body {
margin: 0;
min-block-size: 100vh;
min-block-size: -webkit-fill-available;
}
dd,
dl,
dt,
ol,
ul {
list-style-type: none;
}
dd,
dl,
dt,
figcaption,
figure,
ol,
ul {
margin: 0;
padding: 0;
}
li,
p {
max-inline-size: var(--tds-max-paragraph-width);
}
li {
margin: 0;
}
p {
font-size: var(--tds-font-size-30);
line-height: var(--tds-line-height-30);
}
:is(ul, ol) + p,
p + :is(ul, ol),
p + p {
padding-block-start: var(--tds-paragraph-gap);
}
small {
font-size: var(--tds-font-size-20);
line-height: var(--tds-line-height-10);
}
.tds-normalize-text {
text-wrap: initial;
color: var(--tds-theme-foreground);
text-align: initial;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
small {
display: block;
margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
li,
p,
small {
line-height: var(--tds-line-height-30);
}
hr {
background: var(--tds-color--grey50, #d0d1d2);
block-size: 1px;
border: none;
box-sizing: border-box;
overflow: visible;
}
pre {
font-family: monospace, monospace;
font-size: 1em;
}
abbr[title] {
border-block-end: none;
text-decoration: underline;
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
b,
strong {
font-weight: 500;
}
code,
kbd,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: initial;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
margin: 0;
}
button,
input {
overflow: visible;
}
button,
select {
text-transform: none;
}
[type="button"],
[type="reset"],
[type="submit"],
button {
appearance: button;
}
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,
button::-moz-focus-inner {
border-style: none;
padding: 0;
}
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring,
button:-moz-focusring {
outline: 1px dotted ButtonText;
}
fieldset {
padding: 0.35em 0.75em 0.625em;
}
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-inline-size: 100%;
padding: 0;
white-space: normal;
}
progress {
vertical-align: initial;
}
textarea {
overflow: auto;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
block-size: auto;
}
[type="search"] {
appearance: textfield;
outline-offset: -2px;
}
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
appearance: button;
font: inherit;
}
@media (prefers-reduced-motion: reduce) {
*,
:after,
:before {
animation: none !important;
transition: none !important;
}
}
:focus {
outline: none;
}
* {
outline-offset: 2px;
}
:not(input):focus-visible {
outline: var(--tds-outline--focus);
}
:where(.tds--indicate-focus) :focus {
outline: var(--tds-outline--focus);
}
details {
display: block;
}
summary {
display: list-item;
}
.tds--disabled,
[disabled],
[disabled] ~ [class*="tds-form-label"] {
cursor: not-allowed;
opacity: var(--tds-ui-opacity-50);
}
:is(.tds--disabled, [disabled]) :is(.tds--disabled, [disabled]) {
opacity: unset;
}
.tds--disabled *,
[disabled] *,
[disabled]:after,
[disabled]:before,
[disabled] ~ [class*="tds-form-label"],
[disabled] ~ [class*="tds-form-label"]:after,
[disabled] ~ [class*="tds-form-label"]:before {
pointer-events: none;
}
tds-form-input,
tds-form-input-date,
tds-form-input-dropdown,
tds-form-input-file-upload,
tds-form-input-search {
display: block;
}
@font-face {
font-display: swap;
font-family: Universal Sans Display;
font-style: normal;
font-weight: 700;
src: url(/tesla-design-system/raw/upload/static/fonts/universal-sans-2/web/display/Universal-Sans-Display-Bold.woff2)
format("woff2");
}
@font-face {
font-display: swap;
font-family: Universal Sans Display;
font-style: normal;
font-weight: 500;
src: url(/tesla-design-system/raw/upload/static/fonts/universal-sans-2/web/display/Universal-Sans-Display-Medium.woff2)
format("woff2");
}
@font-face {
font-display: swap;
font-family: Universal Sans Display;
font-style: normal;
font-weight: 400;
src: url(/tesla-design-system/raw/upload/static/fonts/universal-sans-2/web/display/Universal-Sans-Display-Regular.woff2)
format("woff2");
}
@font-face {
font-display: swap;
font-family: Universal Sans Display;
font-style: normal;
font-weight: 300;
src: url(/tesla-design-system/raw/upload/static/fonts/universal-sans-2/web/display/Universal-Sans-Display-Light.woff2)
format("woff2");
}
@font-face {
font-display: swap;
font-family: Universal Sans Display;
font-style: normal;
font-weight: 100;
src: url(/tesla-design-system/raw/upload/static/fonts/universal-sans-2/web/display/Universal-Sans-Display-Thin.woff2)
format("woff2");
}
@font-face {
font-display: swap;
font-family: Universal Sans Text;
font-style: normal;
font-weight: 700;
src: url(/tesla-design-system/raw/upload/static/fonts/universal-sans-2/web/text/Universal-Sans-Text-Bold.woff2)
format("woff2");
}
@font-face {
font-display: swap;
font-family: Universal Sans Text;
font-style: normal;
font-weight: 500;
src: url(/tesla-design-system/raw/upload/static/fonts/universal-sans-2/web/text/Universal-Sans-Text-Medium.woff2)
format("woff2");
}
@font-face {
font-display: swap;
font-family: Universal Sans Text;
font-style: normal;
font-weight: 400;
src: url(/tesla-design-system/raw/upload/static/fonts/universal-sans-2/web/text/Universal-Sans-Text-Regular.woff2)
format("woff2");
}
@font-face {
font-display: swap;
font-family: Universal Sans Text;
font-style: normal;
font-weight: 300;
src: url(/tesla-design-system/raw/upload/static/fonts/universal-sans-2/web/text/Universal-Sans-Text-Light.woff2)
format("woff2");
}
@font-face {
font-display: swap;
font-family: Universal Sans Text;
font-style: normal;
font-weight: 100;
src: url(/tesla-design-system/raw/upload/static/fonts/universal-sans-2/web/text/Universal-Sans-Text-Thin.woff2)
format("woff2");
}
@font-face {
font-display: swap;
font-family: Noto Sans Arabic;
font-stretch: 100%;
font-style: normal;
font-weight: 500;
src: url(/tesla-design-system/raw/upload/static/fonts/intl-fonts/Noto-Sans-Arabic.woff2)
format("woff2");
unicode-range: u+06??, u+0750-077f, u+0870-088e, u+0890-0891, u+0898-08e1,
u+08e3-08ff, u+200c-200e, u+2010-2011, u+204f, u+2e41, u+fb50-fdff,
u+fe70-fe74, u+fe76-fefc, u+102e0-102fb, u+10e60-10e7e, u+10efd-10eff,
u+1ee00-1ee03, u+1ee05-1ee1f, u+1ee21-1ee22, u+1ee24, u+1ee27, u+1ee29-1ee32,
u+1ee34-1ee37, u+1ee39, u+1ee3b, u+1ee42, u+1ee47, u+1ee49, u+1ee4b,
u+1ee4d-1ee4f, u+1ee51-1ee52, u+1ee54, u+1ee57, u+1ee59, u+1ee5b, u+1ee5d,
u+1ee5f, u+1ee61-1ee62, u+1ee64, u+1ee67-1ee6a, u+1ee6c-1ee72, u+1ee74-1ee77,
u+1ee79-1ee7c, u+1ee7e, u+1ee80-1ee89, u+1ee8b-1ee9b, u+1eea1-1eea3,
u+1eea5-1eea9, u+1eeab-1eebb, u+1eef0-1eef1, u+00??, u+0131, u+0152-0153,
u+02bb-02bc, u+02c6, u+02da, u+02dc, u+0304, u+0308, u+0329, u+2000-206f,
u+2074, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd;
}
@font-face {
font-display: swap;
font-family: Noto Sans Arabic;
font-stretch: 100%;
font-style: normal;
font-weight: 400;
src: url(/tesla-design-system/raw/upload/static/fonts/intl-fonts/Noto-Sans-Arabic.woff2)
format("woff2");
unicode-range: u+06??, u+0750-077f, u+0870-088e, u+0890-0891, u+0898-08e1,
u+08e3-08ff, u+200c-200e, u+2010-2011, u+204f, u+2e41, u+fb50-fdff,
u+fe70-fe74, u+fe76-fefc, u+102e0-102fb, u+10e60-10e7e, u+10efd-10eff,
u+1ee00-1ee03, u+1ee05-1ee1f, u+1ee21-1ee22, u+1ee24, u+1ee27, u+1ee29-1ee32,
u+1ee34-1ee37, u+1ee39, u+1ee3b, u+1ee42, u+1ee47, u+1ee49, u+1ee4b,
u+1ee4d-1ee4f, u+1ee51-1ee52, u+1ee54, u+1ee57, u+1ee59, u+1ee5b, u+1ee5d,
u+1ee5f, u+1ee61-1ee62, u+1ee64, u+1ee67-1ee6a, u+1ee6c-1ee72, u+1ee74-1ee77,
u+1ee79-1ee7c, u+1ee7e, u+1ee80-1ee89, u+1ee8b-1ee9b, u+1eea1-1eea3,
u+1eea5-1eea9, u+1eeab-1eebb, u+1eef0-1eef1, u+00??, u+0131, u+0152-0153,
u+02bb-02bc, u+02c6, u+02da, u+02dc, u+0304, u+0308, u+0329, u+2000-206f,
u+2074, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd;
}
@font-face {
font-family: Noto Sans;
font-stretch: 100%;
font-style: normal;
font-weight: 500;
src: url(/tesla-design-system/raw/upload/static/fonts/intl-fonts/Noto-Sans-Cyrillic.woff2)
format("woff2");
unicode-range: u+0301, u+0400-045f, u+0490-0491, u+04b0-04b1, u+2116;
}
@font-face {
font-family: Noto Sans;
font-stretch: 100%;
font-style: normal;
font-weight: 500;
src: url(/tesla-design-system/raw/upload/static/fonts/intl-fonts/Noto-Sans-Cyrillic-Ext.woff2)
format("woff2");
unicode-range: u+0460-052f, u+1c80-1c88, u+20b4, u+2de0-2dff, u+a640-a69f,
u+fe2e-fe2f;
}
@font-face {
font-family: Noto Sans;
font-stretch: 100%;
font-style: normal;
font-weight: 400;
src: url(/tesla-design-system/raw/upload/static/fonts/intl-fonts/Noto-Sans-Cyrillic.woff2)
format("woff2");
unicode-range: u+0301, u+0400-045f, u+0490-0491, u+04b0-04b1, u+2116;
}
@font-face {
font-family: Noto Sans;
font-stretch: 100%;
font-style: normal;
font-weight: 400;
src: url(/tesla-design-system/raw/upload/static/fonts/intl-fonts/Noto-Sans-Cyrillic-Ext.woff2)
format("woff2");
unicode-range: u+0460-052f, u+1c80-1c88, u+20b4, u+2de0-2dff, u+a640-a69f,
u+fe2e-fe2f;
}
@font-face {
font-family: Noto Sans;
font-stretch: 100%;
font-style: normal;
font-weight: 500;
src: url(/tesla-design-system/raw/upload/static/fonts/intl-fonts/Noto-Sans-Greek.woff2)
format("woff2");
unicode-range: u+0370-0377, u+037a-037f, u+0384-038a, u+038c, u+038e-03a1,
u+03a3-03ff;
}
@font-face {
font-family: Noto Sans;
font-stretch: 100%;
font-style: normal;
font-weight: 500;
src: url(/tesla-design-system/raw/upload/static/fonts/intl-fonts/Noto-Sans-Greek-Ext.woff2)
format("woff2");
unicode-range: u+1f??;
}
@font-face {
font-family: Noto Sans;
font-stretch: 100%;
font-style: normal;
font-weight: 400;
src: url(/tesla-design-system/raw/upload/static/fonts/intl-fonts/Noto-Sans-Greek.woff2)
format("woff2");
unicode-range: u+0370-0377, u+037a-037f, u+0384-038a, u+038c, u+038e-03a1,
u+03a3-03ff;
}
@font-face {
font-family: Noto Sans;
font-stretch: 100%;
font-style: normal;
font-weight: 400;
src: url(/tesla-design-system/raw/upload/static/fonts/intl-fonts/Noto-Sans-Greek-Ext.woff2)
format("woff2");
unicode-range: u+1f??;
}
@font-face {
font-family: Noto Sans;
font-stretch: 100%;
font-style: normal;
font-weight: 400;
src: url(/tesla-design-system/raw/upload/static/fonts/intl-fonts/Noto-Sans-Devanagari.woff2)
format("woff2");
unicode-range: u+0900-097f, u+1cd0-1cf9, u+200c-200d, u+20a8, u+20b9, u+20f0,
u+25cc, u+a830-a839, u+a8e0-a8ff, u+11b00-11b09;
}
@font-face {
font-family: Noto Sans;
font-stretch: 100%;
font-style: normal;
font-weight: 500;
src: url(/tesla-design-system/raw/upload/static/fonts/intl-fonts/Noto-Sans-Devanagari.woff2)
format("woff2");
unicode-range: u+0900-097f, u+1cd0-1cf9, u+200c-200d, u+20a8, u+20b9, u+20f0,
u+25cc, u+a830-a839, u+a8e0-a8ff, u+11b00-11b09;
}
@font-face {
font-family: Noto Sans;
font-stretch: 100%;
font-style: normal;
font-weight: 400;
src: url(/tesla-design-system/raw/upload/static/fonts/intl-fonts/Noto-Sans-Vietnamese.woff2)
format("woff2");
unicode-range: u+0102-0103, u+0110-0111, u+0128-0129, u+0168-0169, u+01a0-01a1,
u+01af-01b0, u+0300-0301, u+0303-0304, u+0308-0309, u+0323, u+0329,
u+1ea0-1ef9, u+20ab;
}
@font-face {
font-family: Noto Sans;
font-stretch: 100%;
font-style: normal;
font-weight: 500;
src: url(/tesla-design-system/raw/upload/static/fonts/intl-fonts/Noto-Sans-Vietnamese.woff2)
format("woff2");
unicode-range: u+0102-0103, u+0110-0111, u+0128-0129, u+0168-0169, u+01a0-01a1,
u+01af-01b0, u+0300-0301, u+0303-0304, u+0308-0309, u+0323, u+0329,
u+1ea0-1ef9, u+20ab;
}
@font-face {
font-display: swap;
font-family: Noto Sans Hebrew;
font-stretch: 100%;
font-style: normal;
font-weight: 500;
src: url(/tesla-design-system/raw/upload/v1717099946/static/fonts/intl-fonts/Noto-Sans-Hebrew.woff2)
format("woff2");
unicode-range: u+0590-05ff, u+200c-2010, u+20aa, u+25cc, u+fb1d-fb4f, u+00??,
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;
}
@font-face {
font-display: swap;
font-family: Noto Sans Hebrew;
font-stretch: 100%;
font-style: normal;
font-weight: 400;
src: url(/tesla-design-system/raw/upload/v1717099946/static/fonts/intl-fonts/Noto-Sans-Hebrew.woff2)
format("woff2");
unicode-range: u+0590-05ff, u+200c-2010, u+20aa, u+25cc, u+fb1d-fb4f, u+00??,
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;
}
@font-face {
font-display: swap;
font-family: Noto Sans Thai;
font-stretch: 100%;
font-style: normal;
font-weight: 500;
src: url(/tesla-design-system/raw/upload/v1717100930/static/fonts/intl-fonts/Noto-Sans-Thai.woff2)
format("woff2");
unicode-range: u+0e01-0e5b, u+200c-200d, u+25cc;
}
@font-face {
font-display: swap;
font-family: Noto Sans Thai;
font-stretch: 100%;
font-style: normal;
font-weight: 400;
src: url(/tesla-design-system/raw/upload/v1717100930/static/fonts/intl-fonts/Noto-Sans-Thai.woff2)
format("woff2");
unicode-range: u+0e01-0e5b, u+200c-200d, u+25cc;
}
@font-face {
font-family: Fira Code;
font-style: normal;
font-weight: 500;
src: url(/tesla-design-system/raw/upload/static/fonts/intl-fonts/Fira-Code.woff2)
format("woff2");
unicode-range: u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da,
u+02dc, u+0304, u+0308, u+0329, u+2000-206f, u+2074, u+20ac, u+2122, u+2191,
u+2193, u+2212, u+2215, u+feff, u+fffd;
}
@font-face {
font-family: Fira Code;
font-style: normal;
font-weight: 500;
src: url(/tesla-design-system/raw/upload/static/fonts/intl-fonts/Fira-Code-Ext.woff2)
format("woff2");
unicode-range: u+0100-02af, u+0304, u+0308, u+0329, u+1e00-1e9f, u+1ef2-1eff,
u+2020, u+20a0-20ab, u+20ad-20c0, u+2113, u+2c60-2c7f, u+a720-a7ff;
}
@font-face {
font-family: Fira Code;
font-style: normal;
font-weight: 400;
src: url(/tesla-design-system/raw/upload/static/fonts/intl-fonts/Fira-Code.woff2)
format("woff2");
unicode-range: u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da,
u+02dc, u+0304, u+0308, u+0329, u+2000-206f, u+2074, u+20ac, u+2122, u+2191,
u+2193, u+2212, u+2215, u+feff, u+fffd;
}
@font-face {
font-family: Fira Code;
font-style: normal;
font-weight: 400;
src: url(/tesla-design-system/raw/upload/static/fonts/intl-fonts/Fira-Code-Ext.woff2)
format("woff2");
unicode-range: u+0100-02af, u+0304, u+0308, u+0329, u+1e00-1e9f, u+1ef2-1eff,
u+2020, u+20a0-20ab, u+20ad-20c0, u+2113, u+2c60-2c7f, u+a720-a7ff;
}
@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");
}
.tds-normalize-text,
:root {
font-size: var(--tds-font-size-30);
font-weight: var(--tds-font-weight-regular);
line-height: var(--tds-line-height-30);
}
:root {
font-family: var(--tds-font-family-latin-text);
text-rendering: optimizelegibility;
}
:is(
h1,
h2,
h3,
h4,
.tds-text--h1,
.tds-text--h2,
.tds-text--h3,
.tds-text--h4
) {
font-family: var(--tds-font-family-latin-display);
}
:is(h5, h6, .tds-text--h5, .tds-text--h6),
:is(small, sub, sup) {
font-family: var(--tds-font-family-latin-text);
}
:is(code, .tds-text--monospace) {
font-family: var(--tds-font-family-latin-monospace);
}
:lang(ar) {
font-family: var(--tds-font-family-arabic-text);
}
:is(
h1,
h2,
h3,
h4,
.tds-text--h1,
.tds-text--h2,
.tds-text--h3,
.tds-text--h4
):lang(ar) {
font-family: var(--tds-font-family-arabic-display);
}
:is(small, sub, sup):lang(ar) {
font-family: var(--tds-font-family-arabic-text);
}
:is(code, .tds-text--monospace):lang(ar) {
font-family: var(--tds-font-family-arabic-monospace);
}
:lang(el) {
font-family: var(--tds-font-family-greek-text);
}
:is(
h1,
h2,
h3,
h4,
.tds-text--h1,
.tds-text--h2,
.tds-text--h3,
.tds-text--h4
):lang(el) {
font-family: var(--tds-font-family-greek-display);
}
:is(small, sub, sup):lang(el) {
font-family: var(--tds-font-family-greek-text);
}
:is(code, .tds-text--monospace):lang(el) {
font-family: var(--tds-font-family-greek-monospace);
}
:lang(he) {
font-family: var(--tds-font-family-hebrew-text);
}
:is(
h1,
h2,
h3,
h4,
.tds-text--h1,
.tds-text--h2,
.tds-text--h3,
.tds-text--h4
):lang(he) {
font-family: var(--tds-font-family-hebrew-display);
}
:is(small, sub, sup):lang(he) {
font-family: var(--tds-font-family-hebrew-text);
}
:is(code, .tds-text--monospace):lang(he) {
font-family: var(--tds-font-family-hebrew-monospace);
}
:lang(th) {
font-family: var(--tds-font-family-thai-text);
}
:is(
h1,
h2,
h3,
h4,
.tds-text--h1,
.tds-text--h2,
.tds-text--h3,
.tds-text--h4
):lang(th) {
font-family: var(--tds-font-family-thai-display);
}
:is(small, sub, sup):lang(th) {
font-family: var(--tds-font-family-thai-text);
}
:is(code, .tds-text--monospace):lang(th) {
font-family: var(--tds-font-family-thai-monospace);
}
:lang(ko) {
font-family: var(--tds-font-family-korean-text);
}
:is(
h1,
h2,
h3,
h4,
.tds-text--h1,
.tds-text--h2,
.tds-text--h3,
.tds-text--h4
):lang(ko) {
font-family: var(--tds-font-family-korean-display);
}
:is(small, sub, sup):lang(ko) {
font-family: var(--tds-font-family-korean-text);
}
:is(code, .tds-text--monospace):lang(ko) {
font-family: var(--tds-font-family-korean-monospace);
}
:lang(ja) {
font-family: var(--tds-font-family-japanese-text);
}
:is(
h1,
h2,
h3,
h4,
.tds-text--h1,
.tds-text--h2,
.tds-text--h3,
.tds-text--h4
):lang(ja) {
font-family: var(--tds-font-family-japanese-display);
}
:is(small, sub, sup):lang(ja) {
font-family: var(--tds-font-family-japanese-text);
}
:is(code, .tds-text--monospace):lang(ja) {
font-family: var(--tds-font-family-japanese-monospace);
}
:lang(zh) {
font-family: var(--tds-font-family-chinese-simplified-text);
}
:is(
h1,
h2,
h3,
h4,
.tds-text--h1,
.tds-text--h2,
.tds-text--h3,
.tds-text--h4
):lang(zh) {
font-family: var(--tds-font-family-chinese-simplified-display);
}
:is(small, sub, sup):lang(zh) {
font-family: var(--tds-font-family-chinese-simplified-text);
}
:is(code, .tds-text--monospace):lang(zh) {
font-family: var(--tds-font-family-chinese-simplified-monospace);
}
:lang(zh-HK) {
font-family: var(--tds-font-family-chinese-hk-text);
}
:is(
h1,
h2,
h3,
h4,
.tds-text--h1,
.tds-text--h2,
.tds-text--h3,
.tds-text--h4
):lang(zh-HK) {
font-family: var(--tds-font-family-chinese-hk-display);
}
:is(small, sub, sup):lang(zh-HK) {
font-family: var(--tds-font-family-chinese-hk-text);
}
:is(code, .tds-text--monospace):lang(zh-HK) {
font-family: var(--tds-font-family-chinese-hk-monospace);
}
:is(:lang(zh-MO), :lang(zh-TW)) {
font-family: var(--tds-font-family-chinese-traditional-text);
}
:is(
h1,
h2,
h3,
h4,
.tds-text--h1,
.tds-text--h2,
.tds-text--h3,
.tds-text--h4
):is(:lang(zh-MO), :lang(zh-TW)) {
font-family: var(--tds-font-family-chinese-traditional-display);
}
:is(small, sub, sup):is(:lang(zh-MO), :lang(zh-TW)) {
font-family: var(--tds-font-family-chinese-traditional-text);
}
:is(code, .tds-text--monospace):is(:lang(zh-MO), :lang(zh-TW)) {
font-family: var(--tds-font-family-chinese-traditional-monospace);
}
.tds-font-family--blender {
color: var(--tds-theme-foreground);
font-family: var(--tds-font-family-latin-blender);
font-weight: 500;
text-rendering: optimizelegibility;
}
.tds-font-family--blender
: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
) {
color: var(--tds-theme-foreground-high-contrast);
font-family: var(--tds-font-family-latin-blender);
font-weight: 700;
}
.tds-font-family--blender :is(small, sub, sup, .tds-text--caption) {
color: var(--tds-theme-foreground-low-contrast);
font-family: var(--tds-font-family-latin-blender);
}
.tds-font-family--blender :is(code, .tds-text--monospace) {
font-family: var(--tds-font-family-latin-monospace);
}
:is(.tds-font-family--blender):lang(ar) {
font-family: var(--tds-font-family-arabic-blender);
}
:is(.tds-font-family--blender):lang(el) {
font-family: var(--tds-font-family-greek-blender);
}
:is(.tds-font-family--blender):lang(he) {
font-family: var(--tds-font-family-hebrew-blender);
}
:is(.tds-font-family--blender):lang(th) {
font-family: var(--tds-font-family-thai-blender);
}
:is(.tds-font-family--blender):lang(ko) {
font-family: var(--tds-font-family-korean-blender);
}
:is(.tds-font-family--blender):lang(ja) {
font-family: var(--tds-font-family-japanese-blender);
}
:is(.tds-font-family--blender):lang(zh) {
font-family: var(--tds-font-family-chinese-simplified-blender);
}
:is(.tds-font-family--blender):lang(zh-HK) {
font-family: var(--tds-font-family-chinese-hk-blender);
}
:is(.tds-font-family--blender):is(:lang(zh-MO), :lang(zh-TW)) {
font-family: var(--tds-font-family-chinese-traditional-blender);
}
.tds-font-family--speed {
color: var(--tds-theme-foreground);
font-family: var(--tds-font-family-latin-speed);
font-weight: 400;
text-rendering: optimizelegibility;
}
.tds-font-family--speed
: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
) {
color: var(--tds-theme-foreground-high-contrast);
font-family: var(--tds-font-family-latin-speed);
}
.tds-font-family--speed :is(small, sub, sup, .tds-text--caption) {
color: var(--tds-theme-foreground-low-contrast);
font-family: var(--tds-font-family-latin-speed);
}
:is(.tds-font-family--speed):lang(ar) {
font-family: var(--tds-font-family-arabic-speed);
}
:is(.tds-font-family--speed):lang(el) {
font-family: var(--tds-font-family-greek-speed);
}
:is(.tds-font-family--speed):lang(he) {
font-family: var(--tds-font-family-hebrew-speed);
}
:is(.tds-font-family--speed):lang(th) {
font-family: var(--tds-font-family-thai-speed);
}
:is(.tds-font-family--speed):lang(ko) {
font-family: var(--tds-font-family-korean-speed);
}
:is(.tds-font-family--speed):lang(ja) {
font-family: var(--tds-font-family-japanese-speed);
}
:is(.tds-font-family--speed):lang(zh) {
font-family: var(--tds-font-family-chinese-simplified-speed);
}
:is(.tds-font-family--speed):lang(zh-HK) {
font-family: var(--tds-font-family-chinese-hk-speed);
}
:is(.tds-font-family--speed):is(:lang(zh-MO), :lang(zh-TW)) {
font-family: var(--tds-font-family-chinese-traditional-speed);
}
.tds-font-family--universal-text {
text-rendering: optimizelegibility;
}
.tds-font-family--universal-text,
.tds-font-family--universal-text :is(h1, h2, h3, h4, h5, h6),
.tds-font-family--universal-text :is(small, sub, sup) {
font-family: var(--tds-font-family-latin-text) !important;
}
:is(.tds-font-family--universal-text):lang(ar) {
font-family: var(--tds-font-family-arabic-text) !important;
}
:is(.tds-font-family--universal-text):lang(el) {
font-family: var(--tds-font-family-greek-text) !important;
}
:is(.tds-font-family--universal-text):lang(he) {
font-family: var(--tds-font-family-hebrew-text) !important;
}
:is(.tds-font-family--universal-text):lang(th) {
font-family: var(--tds-font-family-thai-text) !important;
}
:is(.tds-font-family--universal-text):lang(ko) {
font-family: var(--tds-font-family-korean-text) !important;
}
:is(.tds-font-family--universal-text):lang(ja) {
font-family: var(--tds-font-family-japanese-text) !important;
}
:is(.tds-font-family--universal-text):lang(zh) {
font-family: var(--tds-font-family-chinese-simplified-text) !important;
}
:is(.tds-font-family--universal-text):lang(zh-HK) {
font-family: var(--tds-font-family-chinese-hk-text) !important;
}
:is(.tds-font-family--universal-text):is(:lang(zh-MO), :lang(zh-TW)) {
font-family: var(--tds-font-family-chinese-traditional-text) !important;
}
.tds-font-family--universal-display {
font-family: var(--tds-font-family-latin-text) !important;
text-rendering: optimizelegibility;
}
.tds-font-family--universal-display :is(h1, h2, h3, h4, h5, h6),
.tds-font-family--universal-display :is(small, sub, sup) {
font-family: var(--tds-font-family-latin-display) !important;
}
:is(.tds-font-family--universal-display):lang(ar) {
font-family: var(--tds-font-family-arabic-display) !important;
}
:is(.tds-font-family--universal-display):lang(el) {
font-family: var(--tds-font-family-greek-display) !important;
}
:is(.tds-font-family--universal-display):lang(he) {
font-family: var(--tds-font-family-hebrew-display) !important;
}
:is(.tds-font-family--universal-display):lang(th) {
font-family: var(--tds-font-family-thai-display) !important;
}
:is(.tds-font-family--universal-display):lang(ko) {
font-family: var(--tds-font-family-korean-display) !important;
}
:is(.tds-font-family--universal-display):lang(ja) {
font-family: var(--tds-font-family-japanese-display) !important;
}
:is(.tds-font-family--universal-display):lang(zh) {
font-family: var(--tds-font-family-chinese-simplified-display) !important;
}
:is(.tds-font-family--universal-display):lang(zh-HK) {
font-family: var(--tds-font-family-chinese-hk-display) !important;
}
:is(.tds-font-family--universal-display):is(:lang(zh-MO), :lang(zh-TW)) {
font-family: var(--tds-font-family-chinese-traditional-display) !important;
}
[class*="tds-scrim--"] {
background-color: var(--tds-theme-background);
}
.tds-colorscheme--light,
.tds-scrim--light,
.tds-scrim--white,
:root {
--tds-color--error: var(--tds-color-red-10);
--tds-color--hairline: var(--tds-color-grey-50);
--tds-color--inverse: var(--tds-color-white);
--tds-color--primary: var(--tds-color-blue-30);
--tds-color--primary-highlight: var(--tds-color-blue-20);
--tds-color--rgb-shade: 0, 0, 0;
--tds-color--rgb-shade--inverse: 255, 255, 255;
--tds-color--scrim--semitransparent: #ffffffb3;
--tds-color--secondary: var(--tds-color-grey-10);
--tds-color--secondary-accent: var(--tds-color-grey-50);
--tds-color--secondary-highlight: var(--tds-color-black);
--tds-color--tertiary: var(--tds-color-grey-70);
--tds-color--tertiary-highlight: var(--tds-color-grey-65);
--tds-caption--color: var(--tds-color-grey-30);
--tds-dialog--background-color: var(--tds-color-white);
--tds-form-label--color: var(--tds-color-grey-30);
--tds-heading--color: var(--tds-color-grey-10);
--tds-pill--blur-color: rgba(0, 0, 0, 0.048);
--tds-pill--blur-color-highlight: rgba(0, 0, 0, 0.072);
--tds-text--color: var(--tds-color-grey-20);
--tds-text--color--light: var(--tds-color-grey-30);
--tds-text--color--placeholder: var(--tds-color-grey-40);
--tds-text--color--primary: var(--tds-color-blue-30);
--tds-toggle--background-color: #9696961a;
--tds-toggle--fill-color: var(--tds-color-white);
--tds-text--contrast-high: var(--tds-color-grey-10);
--tds-text--contrast-low: var(--tds-color-grey-30);
--tds-text--contrast-medium: var(--tds-color-grey-20);
--tds-code-bg-color: var(--tds-color-grey-70);
--tds-code-border-color: var(--tds-color-grey-60);
--tds-code-color: var(--tds-text--color);
--tds-color--focus: var(--tds-color-grey-35);
--tds-outline--focus: 2px solid var(--tds-color--focus);
--tds-background-image--check: url('data:image/svg+xml;charset=utf-8,');
--tds-background-image--minus: url('data:image/svg+xml;charset=utf-8,');
color: var(--tds-theme-foreground);
color-scheme: light;
}
.tds-scrim--white {
--tds-dialog--background-color: var(--tds-color-white);
--tds-scrim--background: var(--tds-color-white);
}
.tds-scrim--light {
--tds-color--tertiary: var(--tds-color-white);
--tds-scrim--background: var(--tds-color-grey-70);
--tds-text--color--primary: #3865e0;
--tds-code-bg-color: var(--tds-color-grey-60);
--tds-code-border-color: var(--tds-color-grey-50);
--tds-code-color: var(--tds-text--color);
--tds-color--focus: var(--tds-color-grey-30);
--tds-outline--focus: 2px solid var(--tds-color--focus);
}
.tds-scrim--light .tds-card > *,
.tds-scrim--light .tds-modal > *,
.tds-scrim--light .tds-tooltip > * {
--tds-code-bg-color: var(--tds-color-grey-70);
--tds-code-border-color: var(--tds-color-grey-60);
--tds-color--tertiary: var(--tds-color-grey-70);
}
.tds-colorscheme--dark,
.tds-scrim--black {
--tds-box-shadow--large: 0 8px 16px 0 #000c;
--tds-box-shadow--medium: 0 8px 16px 0 #0009;
--tds-box-shadow--small: 0 4px 8px 0 #0006;
--tds-color--error: var(--tds-color--red20);
--tds-color--hairline: var(--tds-color-grey-35);
--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: #000000b3;
--tds-color--secondary: var(--tds-color-grey-70);
--tds-color--secondary-accent: var(--tds-color-grey-35);
--tds-color--secondary-highlight: var(--tds-color-white);
--tds-color--tertiary: var(--tds-color-grey-15);
--tds-color--tertiary-highlight: var(--tds-color-grey-20);
--tds-caption--color: var(--tds-color-grey-50);
--tds-dialog--background-color: var(--tds-color-grey-15);
--tds-form-label--color: var(--tds-color-grey-50);
--tds-heading--color: var(--tds-color-white);
--tds-pill--blur-color: #ffffff21;
--tds-pill--blur-color-highlight: #ffffff3d;
--tds-text--color: var(--tds-color-grey-60);
--tds-text--color--light: var(--tds-color-grey-50);
--tds-text--color--primary: #3368ff;
--tds-toggle--background-color: #fff3;
--tds-toggle--fill-color: var(--tds-color-grey-30);
--tds-text--contrast-high: var(--tds-color-white);
--tds-text--contrast-low: var(--tds-color-grey-40);
--tds-text--contrast-medium: var(--tds-color-grey-60);
--tds-code-bg-color: var(--tds-color-grey-10);
--tds-code-border-color: var(--tds-color-grey-15);
--tds-code-color: var(--tds-text--color);
--tds-background-image--check: url('data:image/svg+xml;charset=utf-8,');
--tds-background-image--minus: url('data:image/svg+xml;charset=utf-8,');
color: var(--tds-theme-foreground);
color-scheme: dark;
}
.tds-scrim--black {
--tds-scrim--background: var(--tds-color-black);
}
.tds-colorscheme--dark :is(option, optgroup),
.tds-scrim--black :is(option, optgroup) {
background-color: var(--tds-theme-background);
}
.tds-density--default,
:root {
--tds-border-radius--pill: var(--tds-size--half);
--tds-data-table--font-size: 14px;
--tds-height--pill: var(--tds-size--5x);
--tds-form--gap: var(--tds-size--3x);
--tds-form--indent: 0px;
--tds-form-input--collapsed-inline-size: var(--tds-size--5x);
--tds-form-input--collapsed-padding-inline-start: var(--tds-size--1x);
--tds-form-input-choice--check-size: var(--tds-size--2x);
--tds-form-input-choice--radio-size: 10px;
--tds-height--choice: var(--tds-size--3x);
}
.tds-density--dense {
--tds-card--border-radius: var(--tds-border-radius--card--dense);
--tds-card--padding: var(--tds-padding--card--dense);
--tds-data-table--font-size: 12px;
--tds-form--gap: var(--tds-size--2x);
--tds-form--indent: 0px;
--tds-form-input--collapsed-inline-size: var(--tds-size--4x);
--tds-form-input--collapsed-padding-inline-start: var(--tds-size--half);
--tds-form-input-choice--check-size: 14px;
--tds-form-input-choice--radio-size: var(--tds-size--1x);
--tds-height--choice: var(--tds-size--2x);
}
.tds-density--low {
--tds-border-radius--pill: var(--tds-size--1x);
--tds-form--indent: 0px;
--tds-height--pill: var(--tds-size--6x);
--tds-form--gap: var(--tds-size--4x);
--tds-form-input-choice--check-size: 20px;
--tds-form-input-choice--radio-size: var(--tds-size--2x);
--tds-height--choice: var(--tds-size--3x);
}
:root {
--tds-text--border-high-contrast: var(--tds-border-width-small) solid
var(--tds-theme-border-high-contrast);
--tds-text--border-low-contrast: var(--tds-border-width-small) solid
var(--tds-theme-border-low-contrast);
}
.tds-colorscheme--light .tds-theme--marketing,
.tds-scrim--light .tds-theme--marketing,
.tds-scrim--white .tds-theme--marketing,
.tds-theme--marketing,
.tds-theme--marketing .tds-colorscheme--light,
.tds-theme--marketing .tds-scrim--light,
.tds-theme--marketing .tds-scrim--white,
.tds-theme--marketing.tds-colorscheme--light,
.tds-theme--marketing.tds-scrim--light,
.tds-theme--marketing.tds-scrim--white {
--tds-color--primary: var(--tds-color-grey-10);
--tds-color--primary-highlight: var(--tds-color-grey-20);
--tds-theme-foreground-on-primary: var(--tds-color--white);
--tds-theme-primary: var(--tds-color-grey-10);
--tds-theme-primary-highlight: var(--tds-color-grey-20);
}
.tds-colorscheme--dark .tds-theme--marketing,
.tds-scrim--black .tds-theme--marketing,
.tds-theme--marketing .tds-colorscheme--dark,
.tds-theme--marketing .tds-scrim--black,
.tds-theme--marketing.tds-colorscheme--dark,
.tds-theme--marketing.tds-scrim--black {
--tds-color--primary: var(--tds-color-white);
--tds-color--primary-highlight: var(--tds-color-grey-60);
--tds-theme-foreground-on-primary: var(--tds-color--black);
--tds-theme-primary: var(--tds-color-white);
--tds-theme-primary-highlight: var(--tds-color-grey-60);
}
.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,
:is(.tds-colorscheme--dark, .tds-scrim--black)
.tds-theme--marketing
.tds-date-picker {
--tds-date-selected--color: var(--tds-color-grey-20);
}
@media (prefers-color-scheme: dark) {
.tds--supports-darkmode.tds-colorscheme--light .tds-theme--marketing,
.tds--supports-darkmode.tds-theme--marketing,
.tds--supports-darkmode.tds-theme--marketing .tds-colorscheme--light,
.tds--supports-darkmode.tds-theme--marketing .tds-scrim--light,
.tds--supports-darkmode.tds-theme--marketing .tds-scrim--white,
.tds--supports-darkmode.tds-theme--marketing.tds-colorscheme--light,
.tds--supports-darkmode.tds-theme--marketing.tds-scrim--light,
.tds--supports-darkmode.tds-theme--marketing.tds-scrim--white {
--tds-color--primary: var(--tds-color-white);
--tds-color--primary-highlight: var(--tds-color-grey-60);
--tds-theme-primary: var(--tds-color-white);
--tds-theme-primary-highlight: var(--tds-color-grey-60);
--tds-theme-foreground-on-primary: var(--tds-color--black);
}
}
.tds-theme--replicant {
--tds-glow--bright: drop-shadow(
0 0 var(--tds-size--2x) rgb(var(--tds-color--rgb-shade) 0.5)
);
--tds-glow--medium: drop-shadow(
0 0 var(--tds-size--1x) rgb(var(--tds-color--rgb-shade) 0.33)
);
--tds-glow--off: drop-shadow(0 0 0 rgb(var(--tds-color--rgb-shade) 0.33));
--tds-theme-background-container: #0000;
--tds-theme-foreground-primary: var(--tds-color--white);
--tds-notch: polygon(
0 0,
100% 0,
100% calc(100% - 10px),
calc(100% - 10px) 100%,
0 100%
);
--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
);
--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
);
--tds-fading-line: linear-gradient(
to right,
rgb(var(--tds-color--rgb-shade) 1) 0%,
rgb(var(--tds-color--rgb-shade) 1) 50%,
rgb(var(--tds-color--rgb-shade) 0.1) 100%
);
--tds-border-radius: 0;
--tds-border-radius--card: 0;
--tds-border-radius--card--dense: 0;
--tds-border-radius--outline-only: 0;
--tds-border-radius--pill: 0;
--tds-heading--text-transform: uppercase;
--tds-form--indent: 0px;
--tds-form-input-choice--check-size: 16px;
--tds-form-input-choice--radio-size: 10px;
--tds-height--choice: var(--tds-size--2x);
font-size: var(--tds-font-size-20);
line-height: var(--tds-line-height-30);
}
.tds-theme--replicant [class*="tds-scrim--"]:not(.tds-scrim--blur) {
color: var(--tds-theme-foreground);
}
.tds-theme--replicant--has_img [class*="tds-scrim--"]:not(.tds-scrim--blur) {
--tds-theme-background: #0000;
}
@media (prefers-color-scheme: dark) {
.tds-theme--replicant.tds--supports-darkmode:not(
[class*="tds-colorscheme--"]
) {
--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: #0000;
--tds-dialog--background-color: var(--tds-color--black);
--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--"],
[class*="tds-colorscheme--"]
) {
background-color: var(--tds-color--black);
}
}
.tds-colorscheme--light .tds-theme--replicant,
.tds-scrim--light .tds-theme--replicant,
.tds-scrim--white .tds-theme--replicant,
.tds-theme--replicant,
.tds-theme--replicant .tds-colorscheme--light,
.tds-theme--replicant .tds-scrim--light,
.tds-theme--replicant .tds-scrim--white,
.tds-theme--replicant.tds-colorscheme--light,
.tds-theme--replicant.tds-scrim--light,
.tds-theme--replicant.tds-scrim--white {
--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: #0000;
--tds-theme-foreground-on-primary: var(--tds-color--white);
--tds-theme-primary: var(--tds-color-grey-10);
--tds-theme-primary-highlight: var(--tds-color-grey-10);
}
.tds-colorscheme--dark .tds-theme--replicant,
.tds-scrim--black .tds-theme--replicant,
.tds-theme--replicant .tds-colorscheme--dark,
.tds-theme--replicant .tds-scrim--black,
.tds-theme--replicant.tds-colorscheme--dark,
.tds-theme--replicant.tds-scrim--black {
--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: #0000;
--tds-dialog--background-color: var(--tds-color--black);
--tds-text--color: var(--tds-color--grey45);
--tds-text--color--light: var(--tds-color--grey35);
--tds-text--color--placeholder: var(--tds-color--grey45);
--tds-theme-foreground-on-primary: var(--tds-color--black);
--tds-theme-primary: var(--tds-color-white);
--tds-theme-primary-highlight: var(--tds-color-grey-60);
}
@keyframes tds-flicker-on--soft {
0% {
opacity: 0.25;
}
8% {
opacity: 0;
}
16% {
opacity: 0.25;
}
24% {
opacity: 0;
}
48% {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes tds-flicker--soft {
0% {
opacity: 1;
}
8% {
opacity: 0.25;
}
16% {
opacity: 1;
}
24% {
opacity: 0.25;
}
32% {
opacity: 1;
}
40% {
opacity: 0.25;
}
48% {
opacity: 1;
}
to {
opacity: 1;
}
}
.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,
:is(.tds-colorscheme--dark, .tds-scrim--black)
.tds-theme--replicant
.tds-date-picker {
--tds-date-selected--color: var(--tds-color--grey20);
}
.tds-theme--factory {
--tds-size: 12px;
}
.tds-accordion {
--tds-accordion--gap: var(--tds-size--1x);
max-inline-size: 75ch;
}
.tds-accordion + .tds-accordion,
tds-accordion + tds-accordion .tds-accordion {
margin-block-start: var(--tds-size--2x);
}
.tds-accordion-summary {
grid-gap: 0 var(--tds-accordion--gap);
align-items: center;
border-radius: var(--tds-border-radius--outline-only);
color: var(--tds-theme-foreground-high-contrast);
cursor: pointer;
display: grid;
grid-template: "title icon" "caption .";
grid-template-columns: min-content 1fr;
padding-block-end: var(--tds-size--1x);
transition: color 0.33s ease;
-webkit-user-select: none;
user-select: none;
}
.tds-accordion-summary::-webkit-details-marker {
display: none;
}
.tds-accordion--chevron-leading > .tds-accordion-summary {
grid-gap: 0 var(--tds-accordion--gap);
grid-template: "icon title" ". caption";
grid-template-columns: min-content 1fr;
}
.tds-accordion--chevron-trailing > .tds-accordion-summary {
grid-gap: 0 var(--tds-accordion--gap);
grid-template: "title icon" "caption caption ";
grid-template-columns: auto 1fr;
}
.tds-accordion--chevron-ending > .tds-accordion-summary {
grid-gap: 0 var(--tds-accordion--gap);
grid-template: "title icon" "caption .";
}
.tds-accordion.tds-accordion--border .tds-accordion-summary {
box-shadow: 0 1px 0 0 var(--tds-theme-border-low-contrast);
}
.tds-accordion-summary .tds-icon {
grid-area: icon;
}
.tds-accordion--chevron-ending > .tds-accordion-summary .tds-icon {
justify-self: end;
}
.tds-accordion--chevron-trailing > .tds-accordion-summary .tds-icon {
justify-self: start;
}
.tds-accordion-summary .tds-text--h5 {
grid-area: title;
padding: 0;
}
.tds-accordion-summary .tds-text--caption {
grid-area: caption;
}
.tds-accordion-summary .tds-text--h5 + .tds-text--caption {
margin-block-start: var(--tds-size--half);
}
.tds-accordion-content {
padding-block-start: var(--tds-size--1x);
}
.tds-accordion--chevron-leading
> .tds-accordion-summary
+ .tds-accordion-content {
padding-inline-start: calc(var(--tds-accordion--gap) + var(--tds-size--2x));
}
:is(
.tds-density--dense.tds-accordion-summary,
.tds-density--dense .tds-accordion-summary
)
:is(h5, .tds-text--h5) {
font-size: 14px;
}
.tds-accordion-summary:hover > .tds-text--h5,
.tds-accordion-summary > [class*="tds-icon-chevron"] {
color: var(--tds-theme-foreground-low-contrast);
}
.tds-app-switcher {
display: inline-block;
}
.tds-app-switcher .tds-menu-btn--active .tds-app-title:before,
.tds-app-switcher .tds-menu-btn:hover .tds-app-title:before {
opacity: 0;
}
.tds-app-switcher-layout {
block-size: 262px;
display: flex;
flex-direction: column;
inline-size: 360px;
overflow: hidden;
}
.tds-app-switcher-scroll-shadow {
box-shadow: var(--tds-box-shadow--small);
}
.tds-app-switcher-subapps-header,
.tds-app-switcher-toolbar {
transition: box-shadow 0.33s ease;
}
.tds-app-switcher-toolbar {
display: flex;
flex-direction: row;
gap: var(--tds-size--1x);
justify-content: space-between;
padding: var(--tds-size--2x);
}
.tds-app-switcher-search {
flex-grow: 1;
}
.tds-app-switcher-apps,
.tds-app-switcher-apps--list {
block-size: 100%;
overflow-y: auto;
padding: 0 var(--tds-size--2x);
padding-block-end: var(--tds-size--2x);
}
.tds-app-switcher-apps {
align-items: flex-start;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.tds-app-switcher-apps--list {
align-content: flex-start;
display: flex;
flex-flow: column nowrap;
}
.tds-app-switcher-noapps {
align-items: center;
block-size: 100%;
display: flex;
flex-direction: column;
gap: var(--tds-size--1x);
inline-size: 100%;
justify-content: center;
padding: var(--tds-size-3x);
text-align: center;
}
.tds-app-switcher-noapps > * {
margin: 0;
padding: 0;
}
.tds-app-switcher .tds-app-title-text {
max-inline-size: 15ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tds-app-switcher-apps-item {
align-items: center;
block-size: calc(var(--tds-size--1x) * 10 + var(--tds-size--half));
border-radius: var(--tds-border-radius--card);
cursor: pointer;
display: flex;
flex-direction: column;
gap: var(--tds-size--half);
justify-content: center;
object-fit: scale-down;
overflow: hidden;
padding: var(--tds-size--2x) var(--tds-size--1x)
calc(var(--tds-size--1x) + var(--tds-size--half)) var(--tds-size--1x);
text-align: center;
-webkit-user-select: none;
user-select: none;
}
.tds-app-switcher-apps-item,
.tds-app-switcher-search-result,
.tds-app-switcher-subapps-item {
transition: background 0.33s ease;
}
.tds-app-switcher-search-result,
.tds-app-switcher-subapps-item {
align-items: center;
display: flex;
inline-size: 100%;
justify-content: space-between;
padding-block: calc(var(--tds-size--half));
padding-inline: calc(var(--tds-size--2x) + var(--tds-size--half));
text-align: start;
}
.tds-app-switcher-search-result {
color: var(--tds-theme-foreground);
cursor: pointer;
}
.tds-app-switcher-apps-item:hover,
.tds-app-switcher-search-result:hover,
.tds-app-switcher-subapps-item:hover {
background: var(--tds-theme-background-container-alt);
}
.tds-app-switcher-apps-item:focus-visible,
.tds-app-switcher-search-result:focus-visible,
.tds-app-switcher-subapps-item:focus-visible {
border-radius: var(--tds-size--half);
outline: var(--tds-outline--focus);
outline-offset: -2px;
}
.tds-app-switcher-apps-item > * {
pointer-events: none;
}
.tds-app-switcher-apps--list .tds-app-switcher-apps-item {
align-items: center;
block-size: var(--tds-size--6x);
flex-direction: row;
gap: var(--tds-size--1x);
inline-size: 100%;
justify-content: flex-start;
overflow: visible;
padding: var(--tds-size--1x);
}
.tds-app-switcher-apps-item-logo,
.tds-app-switcher-apps-item-logo > * {
background: var(--tds-theme-background-container-alt);
block-size: var(--tds-size--4x);
border-radius: var(--tds-border-radius--circle);
flex: none;
inline-size: var(--tds-size--4x);
}
.tds-app-switcher-apps-item-logo.tds-app-switcher-apps-item-logo--has-image,
.tds-app-switcher-apps-item-logo.tds-app-switcher-apps-item-logo--has-image
> * {
background: #0000;
border-radius: 0;
}
.tds-app-switcher-apps-item-title {
font-size: var(--tds-font-size-20);
max-inline-size: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tds-app-switcher-subapps-header {
align-items: center;
display: flex;
flex-direction: row;
gap: var(--tds-size--half);
padding-block: var(--tds-size--2x);
padding-inline: calc(var(--tds-size--1x) + var(--tds-size--half));
}
.tds-app-switcher-search-results,
.tds-app-switcher-subapps {
display: flex;
flex-direction: column;
overflow-y: auto;
}
.tds-app-switcher-search-result-title {
padding-block: var(--tds-size--1x) var(--tds-size--half);
padding-inline: calc(var(--tds-size--2x) + var(--tds-size--half));
}
.tds-app-switcher-search-result-divider {
align-self: center;
background: var(--tds-theme-background-container-alt);
background-clip: content-box;
block-size: 1px;
flex-shrink: 0;
inline-size: 100%;
margin-block: var(--tds-size--1x);
padding-inline: calc(var(--tds-size--half) + var(--tds-size--2x));
}
.tds-app-switcher-search-result > .tds-icon,
.tds-app-switcher-subapps-item > .tds-icon {
color: var(--tds-theme-foreground-low-contrast);
opacity: 0;
transition: opacity 0.33s ease;
}
.tds-app-switcher-search-result:hover > .tds-icon,
.tds-app-switcher-subapps-item:hover > .tds-icon {
opacity: 1;
}
.tds-app-switcher-search-result:last-of-type {
margin-block-end: var(--tds-size--2x);
}
.tds-app-layout {
display: flex;
flex-direction: column;
min-block-size: 100vh;
}
.tds-app-layout.tds-app-layout--internal {
--tds-page-layout--title-start-space: var(--tds-size--3x);
--tds-page-layout--title-top-slot-space: 0;
}
.tds-app-layout-footer,
.tds-app-layout-header {
inline-size: 100%;
}
.tds-app-layout-content {
display: flex;
flex-grow: 1;
min-block-size: 100%;
}
.tds-app-layout-main,
.tds-app-layout-sidenav {
padding: 0 var(--tds-size--3x);
}
.tds-app-layout-sidenav {
padding-block-start: var(--tds-page-layout--title-start-space);
}
.tds-app-layout-main {
flex-grow: 1;
}
.tds-component-preview,
.tds-density--default,
:root {
--tds-banner--padding: var(--tds-size--2x);
}
.tds-density--dense {
--tds-banner--padding: var(--tds-size--1x);
}
.tds-banner {
inline-size: 100%;
padding: var(--tds-banner--padding);
position: relative;
text-align: center;
transition: background-color 0.5s ease, color 0.5s ease;
}
.tds-banner + .tds-banner {
border-block-start: var(--tds-text--border-low-contrast);
}
.tds-banner:not([class*="tds-scrim--"]) {
background-color: var(--tds-theme-background-container);
}
.tds-banner strong {
transition: color 0.5s ease;
}
@media (width >= 1200px) {
.tds-banner--precedes-header {
z-index: 500;
}
}
.tds-density--default,
:root {
--tds-breadcrumb--chevron-size: var(--tds-size--2x);
--tds-breadcrumb--font-size: var(--tds-font-size-30);
--tds-breadcrumb--height: var(--tds-size--4x);
--tds-breadcrumb--line-height: var(--tds-line-height-30);
--tds-breadcrumb--padding-inline: 12px;
--tds-breadcrumb-padding: 6px;
}
.tds-density--dense {
--tds-breadcrumb--chevron-size: 12px;
--tds-breadcrumb--font-size: var(--tds-font-size-20);
--tds-breadcrumb--height: 28px;
--tds-breadcrumb--line-height: var(--tds-line-height-20);
--tds-breadcrumb--padding-inline: calc(var(--tds-size--1x) + 2px);
--tds-breadcrumb-padding: 3px;
}
.tds-breadcrumbs {
align-items: center;
color: var(--tds-theme-foreground-low-contrast);
display: flex;
font-size: var(--tds-breadcrumb--font-size);
line-height: var(--tds-breadcrumb--line-height);
margin-inline-start: calc(var(--tds-breadcrumb--padding-inline) * -1);
}
.tds-breadcrumbs .tds-icon--small {
--tds-icon--size: var(--tds-breadcrumb--chevron-size);
}
.tds-breadcrumb {
align-items: center;
border-radius: var(--tds-border-radius--pill);
column-gap: calc(var(--tds-size--half) / 2);
display: flex;
min-block-size: var(--tds-breadcrumb--height);
padding: 0 var(--tds-breadcrumb--padding-inline);
transition: color 0.33s ease, background-color 0.33s ease;
}
.tds-breadcrumb--overflow {
block-size: var(--tds-breadcrumb--height);
inline-size: var(--tds-breadcrumb--height);
justify-content: center;
}
.tds-breadcrumb-tooltip-actions .tds-breadcrumb {
border-radius: unset;
padding: var(--tds-breadcrumb-padding)
calc(var(--tds-size--3x) - var(--tds-size--half));
}
.tds-breadcrumb:only-child .tds-icon {
margin-inline-start: calc(var(--tds-size--half) * -1);
}
.tds-breadcrumb:not([disabled], .tds--disabled, :last-child),
.tds-breadcrumb:only-child:not([disabled], .tds--disabled) {
cursor: pointer;
}
.tds-breadcrumb-tooltip-actions
.tds-breadcrumb:is(:focus-visible, .tds--focus) {
border-radius: var(--tds-size--half);
outline: var(--tds-outline--focus);
outline-offset: -2px;
}
.tds-breadcrumb-tooltip-actions .tds-breadcrumb:hover,
.tds-breadcrumb:not(:last-child):hover,
.tds-breadcrumb:only-child:hover {
background-color: var(--tds-theme-background-container-alt);
}
.tds-breadcrumb:not(.tds-breadcrumb-tooltip-actions .tds-breadcrumb):hover,
.tds-breadcrumb:not(
.tds-breadcrumb-tooltip-actions .tds-breadcrumb
):last-child:not(:first-child) {
color: var(--tds-theme-foreground-high-contrast);
}
.tds-breadcrumb-tooltip-actions {
display: grid;
padding-block: var(--tds-size--1x) var(--tds-size--1x);
}
.tds-component-preview,
:root {
--tds-btn--font-size: var(--tds-font-size-30);
--tds-btn--min-width: 204px;
}
:lang(ar),
:lang(he) {
--tds-btn--font-size: var(--tds-font-size-40);
}
button {
appearance: none;
background-color: initial;
border: none;
color: inherit;
padding: 0;
}
button:where(:focus, .tds--focus) {
border-radius: var(--tds-border-radius--outline-only);
outline: var(--tds-outline--focus);
}
[role="button"] {
cursor: pointer;
}
.tds-btn {
--tds-btn--background-color: var(--tds-theme-primary);
--tds-btn--border-color: #0000;
--tds-btn--border-radius: var(--tds-border-radius--pill);
align-items: center;
background-color: var(--tds-btn--background-color);
block-size: var(--tds-height--pill);
border: var(--tds-border-width--large) solid var(--tds-btn--border-color);
border-radius: var(--tds-btn--border-radius);
box-shadow: inset 0 0 0 var(--tds-border-width--medium) #0000;
color: var(--tds-theme-foreground-on-primary);
display: inline-flex;
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;
text-transform: inherit;
transition: border-color 0.33s ease, background-color 0.33s ease,
color 0.33s ease, box-shadow 0.25s ease;
}
button.tds-btn {
vertical-align: middle;
}
@media (min-width: 600px) {
.tds-btn {
inline-size: auto;
}
.tds-btn--width-full {
inline-size: 100%;
inline-size: -webkit-fill-available;
}
.tds-btn--width-min {
min-inline-size: var(--tds-btn--min-width);
}
}
@media (max-width: 599px) {
.tds-btn {
inline-size: 100%;
inline-size: -webkit-fill-available;
}
.tds-btn--width-auto {
inline-size: auto;
}
}
.tds-btn--small {
--tds-height--pill: 28px;
font-size: var(--tds-font-size-20);
}
.tds-btn--medium,
.tds-density--dense {
--tds-height--pill: var(--tds-size--4x);
}
.tds-btn--large {
--tds-border-radius--pill: var(--tds-size--half);
--tds-height--pill: var(--tds-size--5x);
}
.tds-btn--secondary {
--tds-btn--background-color: #0000;
--tds-btn--border-color: var(--tds-theme-foreground-high-contrast);
color: var(--tds-theme-foreground-high-contrast);
}
:is(.tds-colorscheme--dark, .tds-scrim--black) .tds-btn--secondary {
--tds-btn--border-color: var(--tds-color-white);
color: var(--tds-color-white);
}
.tds-btn--tertiary {
--tds-btn--background-color: var(--tds-theme-background-container);
color: var(--tds-theme-foreground);
}
:is(button, .tds-btn):not([disabled], .tds--disabled):is(:hover, .tds--hover) {
cursor: pointer;
}
.tds-btn:is(:focus, .tds--focus) {
box-shadow: inset 0 0 0 var(--tds-border-width--medium);
outline: none;
}
.tds-btn:not([disabled], .tds--disabled):is(:hover, .tds--hover) {
--tds-btn--background-color: var(--tds-theme-primary-highlight);
}
.tds-btn--secondary:not([disabled], .tds--disabled):is(
:hover,
.tds--hover,
:focus,
.tds--focus
) {
--tds-btn--background-color: var(--tds-theme-foreground-high-contrast);
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 > .tds-icon--inline:first-child {
margin-inline-start: calc(var(--tds-size--1x) * -1);
}
.tds-btn > .tds-icon--inline:last-child {
margin-inline-end: calc(var(--tds-size--1x) * -1);
}
.tds-card:not(.tds-card--outline, .tds-scrim--white .tds-card--highlighted)
.tds-btn--tertiary,
:is(.tds-scrim--light, .tds-scrim--black) .tds-modal .tds-btn--tertiary {
--tds-btn--background-color: var(--tds-theme-background);
}
.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;
margin: var(--tds-size--2x) 0;
}
@media (max-width: 599px) {
.tds-btn_group {
grid-template-rows: repeat(auto-fit, minmax(0, 1fr));
}
.tds-btn_group--horizontal {
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
grid-template-rows: none;
}
}
@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));
}
}
.tds-btn_group--grouped {
gap: 0;
grid-auto-flow: column;
}
.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);
}
.tds-btn_group--grouped > .tds-btn:last-child,
[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-form-fieldset .tds-btn_group--grouped,
.tds-form-layout .tds-btn_group--grouped {
grid-auto-flow: row;
}
.tds-component-preview,
:root {
--tds-card--border-radius: var(--tds-border-radius--card);
--tds-card--padding: var(--tds-padding--card);
}
.tds-card {
--tds-card--background-color: var(--tds-theme-background-container);
--tds-card--cancel-padding: calc(var(--tds-card--padding) * -1);
--tds-card--gap: var(--tds-card--padding);
--tds-card--width: calc(
var(--tds-max-paragraph-width) + var(--tds-padding--card--dense) * 2
);
background-color: var(--tds-card--background-color);
block-size: min-content;
border-radius: var(--tds-border-radius--card);
display: flex;
max-block-size: min-content;
max-inline-size: var(--tds-card--width);
overflow: hidden;
transition: background-color 0.33s ease;
}
.tds-card-asset {
align-items: center;
display: flex;
inline-size: 100%;
justify-content: center;
}
.tds-card-body {
flex-grow: 1;
padding: var(--tds-card--padding);
padding-inline-end: max(var(--tds-size--3x), var(--tds-card--padding));
}
.tds-card img {
display: block;
inline-size: 100%;
}
.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
) {
padding-block-start: 0;
}
:is(.tds-card, .tds-card--asset) > .tds-icon,
:is(.tds-card, .tds-card--asset) > tds-icon > .tds-icon {
margin-block: var(--tds-card--padding) var(--tds-card--padding);
margin-inline-start: var(--tds-card--padding);
}
.tds-card > .tds-icon + .tds-card-body,
.tds-card > tds-icon + .tds-card-body {
padding-block-start: calc(var(--tds-card--padding) + 2px);
padding-inline-start: calc(var(--tds-card--padding) / 3);
}
.tds-card--layout-vertical {
flex-direction: column;
}
.tds-card--layout-vertical > .tds-icon + .tds-card-body {
padding-block-start: calc(var(--tds-card--padding) / 3);
padding-inline: var(--tds-card--padding) var(--tds-card--padding);
}
.tds-card--full-width {
--tds-card--width: 100%;
}
.tds-card--highlighted {
--tds-card--background-color: var(--tds-theme-background-dialog);
box-shadow: var(--tds-box-shadow--medium);
}
.tds-scrim--light .tds-card--highlighted,
.tds-scrim--white .tds-card--highlighted {
--tds-card--background-color: var(--tds-color-white);
}
.tds-card--outline {
--tds-card--background-color: #0000;
border-color: var(--tds-theme-border-low-contrast);
border-radius: var(--tds-border-radius--card);
border-style: solid;
border-width: var(--tds-border-width--hairline);
}
.tds-density--default,
:root {
--tds-chip--font-size: var(--tds-font-size-30);
--tds-chip--height: var(--tds-size--4x);
--tds-chip--padding: 6px 10px;
--tds-chip-caption--margin-inline-start: var(--tds-size--1x);
--tds-chip-icon-btn--size: calc(var(--tds-size--3x) - var(--tds-size--half));
}
.tds-density--dense {
--tds-chip--font-size: var(--tds-font-size-20);
--tds-chip--height: var(--tds-size--3x);
--tds-chip--padding: var(--tds-size--half) var(--tds-size--1x);
--tds-chip-caption--margin-inline-start: var(--tds-size--half);
--tds-chip-icon-btn--size: var(--tds-size--2x);
}
.tds-chip {
--tds-chip--background-color: var(--tds-theme-background-container);
align-items: center;
background-color: var(--tds-chip--background-color);
block-size: var(--tds-chip--height);
border-radius: var(--tds-border-radius--pill);
color: var(--tds-theme-foreground-high-contrast);
display: inline-flex;
font-size: var(--tds-chip--font-size);
font-weight: var(--tds-font-weight-medium);
inline-size: var(--tds-chip--width);
justify-content: center;
min-inline-size: var(--tds-chip--height);
overflow: hidden;
padding: var(--tds-chip--padding);
text-overflow: ellipsis;
}
.tds-chip-caption {
color: var(--tds-caption--color);
font-weight: var(--tds-font-weight-regular);
margin-inline-start: var(--tds-chip-caption--margin-inline-start);
}
.tds-chip--truncated {
max-inline-size: 20ch;
}
.tds-chip--truncated:has(> .tds-chip-caption) {
max-inline-size: unset;
}
.tds-chip--truncated .tds-chip-caption {
max-inline-size: 20ch;
}
.tds-chip--unencapsulated {
--tds-chip--height: auto;
--tds-chip--padding: 0;
background-color: initial !important;
justify-content: flex-start;
}
.tds-chip--full-width {
--tds-chip--width: 100%;
}
.tds-form-input .tds-chip {
font-size: var(--tds-font-size-30);
}
.tds-form-input--inline .tds-chip--unencapsulated {
--tds-chip--height: var(--tds-size--3x);
margin: 0;
padding-inline-start: 0;
}
.tds-form-input--default .tds-chip {
--tds-chip--inset: calc(var(--tds-form--indent) - var(--tds-size--half));
background-color: var(--tds-theme-background, var(--tds-color-white));
border-radius: calc(var(--tds-border-radius--pill) - 2px);
inline-size: max-content;
margin-block: calc(var(--tds-size--half) * -1)
calc(var(--tds-size--half) * -1);
margin-inline: 0 var(--tds-size--half);
padding-inline-start: var(--tds-chip--inset);
}
.tds-chip-group .tds-chip {
margin: 0;
}
.tds-form-input--default .tds-chip:first-child {
margin-inline-start: calc(var(--tds-chip--inset) * -1);
}
.tds-form-input--default .tds-chip:last-child {
margin-inline-end: var(--tds-size--1x);
}
.tds-chip-caption,
.tds-chip-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tds-chip-circle-container {
align-items: center;
block-size: var(--tds-size--2x);
display: flex;
inline-size: var(--tds-size--2x);
justify-content: center;
margin-inline-end: var(--tds-size--half);
}
.tds-chip-circle {
background-color: var(--tds-chip--background-color);
block-size: 12px;
border-radius: 50%;
inline-size: 12px;
}
.tds-chip .tds-icon {
--tds-icon--size: var(--tds-size--2x);
}
.tds-chip > .tds-icon,
.tds-chip > tds-icon .tds-icon {
margin-inline-end: var(--tds-size--half);
}
.tds-chip .tds-icon-btn {
--tds-icon-btn--border-width: 1px;
block-size: var(--tds-chip-icon-btn--size);
inline-size: var(--tds-chip-icon-btn--size);
}
.tds-chip .tds-icon-btn:first-child {
margin-inline: -3px 2px;
}
.tds-chip .tds-icon-btn:last-child {
color: var(--tds-theme-foreground-low-contrast);
margin-inline: 2px -3px;
}
.tds-chip-group {
align-items: center;
display: flex;
flex-flow: row wrap;
gap: var(--tds-size--1x);
}
.tds-chip--color-grey,
.tds-chip--grey {
--tds-chip--background-color: var(--tds-color-status-grey);
}
.tds-chip--color-grey-pastel,
.tds-chip--grey-pastel {
--tds-chip--background-color: var(--tds-theme-status-grey-pastel);
}
.tds-chip--color-green,
.tds-chip--green {
--tds-chip--background-color: var(--tds-color-status-green);
}
.tds-chip--color-green-pastel,
.tds-chip--green-pastel {
--tds-chip--background-color: var(--tds-theme-status-green-pastel);
}
.tds-chip--color-teal,
.tds-chip--teal {
--tds-chip--background-color: var(--tds-color-status-teal);
}
.tds-chip--color-teal-pastel,
.tds-chip--teal-pastel {
--tds-chip--background-color: var(--tds-theme-status-teal-pastel);
}
.tds-chip--blue,
.tds-chip--color-blue {
--tds-chip--background-color: var(--tds-color-status-blue);
}
.tds-chip--blue-pastel,
.tds-chip--color-blue-pastel {
--tds-chip--background-color: var(--tds-theme-status-blue-pastel);
}
.tds-chip--color-purple,
.tds-chip--purple {
--tds-chip--background-color: var(--tds-color-status-purple);
}
.tds-chip--color-purple-pastel,
.tds-chip--purple-pastel {
--tds-chip--background-color: var(--tds-theme-status-purple-pastel);
}
.tds-chip--color-magenta,
.tds-chip--magenta {
--tds-chip--background-color: var(--tds-color-status-magenta);
}
.tds-chip--color-magenta-pastel,
.tds-chip--magenta-pastel {
--tds-chip--background-color: var(--tds-theme-status-magenta-pastel);
}
.tds-chip--color-red,
.tds-chip--red {
--tds-chip--background-color: var(--tds-color-status-red);
}
.tds-chip--color-red-pastel,
.tds-chip--red-pastel {
--tds-chip--background-color: var(--tds-theme-status-red-pastel);
}
.tds-chip--color-orange,
.tds-chip--orange {
--tds-chip--background-color: var(--tds-color-status-orange);
}
.tds-chip--color-orange-pastel,
.tds-chip--orange-pastel {
--tds-chip--background-color: var(--tds-theme-status-orange-pastel);
}
.tds-chip--color-yellow,
.tds-chip--yellow {
--tds-chip--background-color: var(--tds-color-status-yellow);
}
.tds-chip--color-yellow-pastel,
.tds-chip--yellow-pastel {
--tds-chip--background-color: var(--tds-theme-status-yellow-pastel);
}
.tds-component-preview,
:root {
--tds-content_container--gutter: var(--tds-size--3x);
--tds-content_container--inline-size: 100%;
--tds-content_container--max_width: 1060px;
}
.tds-content_container {
display: block;
inline-size: var(--tds-content_container--inline-size);
margin-inline: auto auto;
padding-inline: var(--tds-content_container--gutter)
var(--tds-content_container--gutter);
}
@media (max-width: 599px) {
:root {
--tds-content_container--gutter: var(--tds-size--3x);
}
}
@media (min-width: 600px) {
:root {
--tds-content_container--gutter: 36px;
}
}
@media (min-width: 1200px) {
:root {
--tds-content_container--gutter: var(--tds-size--6x);
}
}
.tds-content_container--max_width {
max-inline-size: var(--tds-content_container--max_width);
}
@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--extra-large,
.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;
}
.tds-content_container--max_width.tds-content_container--medium {
--tds-content_container--max_width: 742px;
}
.tds-content_container--max_width.tds-content_container--large {
--tds-content_container--max_width: 954px;
}
.tds-content_container--max_width.tds-content_container--extra-large {
--tds-content_container--max_width: 1824px;
}
}
.context-block {
left: var(--tds-context-block-position--left);
position: absolute;
top: var(--tds-context-block-position--top);
}
.tds-date-picker {
--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-size--half);
--tds-end-of-week-radius: var(--tds-size--half);
inline-size: var(--tds-date-picker--grid-size);
}
.tds-density--dense .tds-date-picker {
--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);
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);
position: relative;
}
.tds-date-picker--range.tds-date-picker--horizontal {
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-month-header {
inline-size: 100%;
}
.tds-date-picker-month:focus {
border-radius: var(--tds-size--half);
}
.tds-date-picker-month button {
align-items: center;
align-self: stretch;
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-theme-foreground-low-contrast);
}
.tds-date-picker-days-grid,
.tds-date-picker-days-label {
--tds-date-picker--row-gap: var(--tds-size--half);
align-items: center;
display: grid;
gap: var(--tds-date-picker--row-gap) 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-day {
cursor: pointer;
display: flex;
justify-content: center;
pointer-events: auto;
position: relative;
z-index: 1;
}
tds-day .tds-day {
inline-size: 100%;
}
.tds-day--not-this-month {
pointer-events: none;
visibility: hidden;
}
.tds-day 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;
outline-offset: 2px;
}
.tds-day--today span {
border: 1px solid var(--tds-theme-border);
}
.tds-day[disabled] {
color: var(--tds-color-grey-30);
cursor: not allowed;
font-weight: var(--tds-font-weight-regular);
}
.tds-day:where(:hover, .tds-day--highlighted:not(.tds-day--between)) span {
background-color: var(--tds-theme-background-container);
border: none;
}
.tds-day--selected:not(.tds-day--between) span {
background-color: var(--tds-theme-primary);
}
.tds-day--selected:hover span {
background-color: var(--tds-theme-primary-highlight);
}
.tds-day--selected span {
border: none;
color: var(--tds-date-selected--color);
font-weight: var(--tds-font-weight-medium);
outline-offset: 2px;
transition: background-color 0.3s ease, color 0.3s ease;
}
.tds-day:before {
background-color: var(--tds-theme-background);
bottom: 0;
content: "";
position: absolute;
top: 0;
z-index: -1;
}
.tds-date-picker-days-grid button:focus-visible {
outline: none;
}
.tds--indicate-focus .tds-date-picker-days-grid button:focus {
outline: none;
}
.tds-date-picker-days-grid button:focus-visible span {
outline: var(--tds-outline--focus);
}
.tds--indicate-focus .tds-date-picker-days-grid button:focus span {
outline: var(--tds-outline--focus);
}
.tds-date-picker-days-grid .tds-day--selected:focus-visible span {
outline-offset: 2px;
}
.tds--indicate-focus .tds-date-picker-days-grid .tds-day--selected:focus span {
outline-offset: 2px;
}
.tds-date-picker-days-grid.tds-date-picker-days-grid--with-indicators {
--tds-date-picker--row-gap: var(--tds-size--1x);
}
.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-theme-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-theme-background-container);
}
.tds-day--start:not(.tds-day--highlighted ~ .tds-day--start):before {
inset-inline-end: 0;
inset-inline-start: 50%;
}
.tds-day--between:before {
inset-inline-end: 0;
inset-inline-start: 0;
}
.tds-day--end:before,
.tds-day--highlighted:not(.tds-day--between):before {
inset-inline-end: 50%;
inset-inline-start: 0;
}
.tds-day--start.tds-day--end:before {
display: none;
}
.tds-day--error span {
background-color: initial;
box-shadow: inset 0 0 0 3px var(--tds-color-red-10);
color: inherit;
}
.tds-day-status-indicators {
bottom: 0;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
position: absolute;
transform: translateY(50%);
width: 100%;
}
.tds-date-picker-year-month-grid {
display: grid;
gap: var(--tds-size--2x);
grid-template-columns: repeat(4, 1fr);
}
.tds-figure {
--tds-figure--padding: var(--tds-padding--card);
--tds-figure--radius: var(--tds-border-radius--card);
block-size: min-content;
display: flex;
max-block-size: min-content;
max-inline-size: var(--tds-figure--width);
overflow: hidden;
padding: 0;
transition: background-color 0.33s ease;
}
.tds-figure img {
border-radius: var(--tds-figure--radius);
inline-size: 100%;
}
.tds-density--dense .tds-figure {
--tds-figure--padding: var(--tds-padding--card--dense);
--tds-figure--radius: var(--tds-border-radius--card--dense);
}
.tds-figure > .tds-card-body {
padding: 0;
}
.tds-figure--layout-vertical > figcaption + img,
.tds-figure--layout-vertical > img + figcaption {
margin-block-start: var(--tds-figure--padding);
}
.tds-figure--layout-vertical > .tds-icon + figcaption,
.tds-figure--layout-vertical > figcaption + .tds-icon {
margin-block-start: calc(var(--tds-figure--padding) / 3);
}
.tds-figure:not(.tds-figure--layout-vertical) > figcaption + img,
.tds-figure:not(.tds-figure--layout-vertical) > img + figcaption {
margin-inline-start: var(--tds-figure--padding);
}
.tds-figure:not(.tds-figure--layout-vertical) > .tds-icon + figcaption,
.tds-figure:not(.tds-figure--layout-vertical) > figcaption + .tds-icon {
margin-inline-start: calc(var(--tds-figure--padding) / 3);
}
.tds-figure--layout-vertical {
flex-direction: column;
}
.tds-figure
: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
) {
padding-block-start: 0;
}
.tds-form--indent {
--tds-form--indent: 12px;
}
.tds-density--dense .tds-form--indent {
--tds-form--indent: var(--tds-size--2x);
}
.tds-form--outdent {
--tds-form--indent: 0px;
}
.tds-form--error {
--tds-form-feedback--color: var(--tds-theme-secondary-negative);
--tds-form-input--border-color: var(--tds-theme-secondary-negative);
}
.tds-density--default.tds-form--indent {
--tds-form--indent: 12px;
}
.tds-density--dense.tds-form--indent {
--tds-form--indent: 10px;
}
.tds-density--default.tds-form--outdent,
.tds-density--dense.tds-form--outdent {
--tds-form--indent: 0px;
}
.tds-form-fieldset {
border: 0;
margin: 0;
padding: 0;
}
.tds-form-fieldset,
.tds-form-layout {
display: grid;
gap: var(--tds-form--gap);
}
.tds-form-layout--horizontal {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.tds-form-layout--2col {
grid-template-columns: repeat(2, minmax(200px, 1fr));
}
.tds-form-fieldset > :is(legend, .tds-text--h3, .tds-text--h4, .tds-text--h5),
tds-form-legend legend {
padding-inline-start: var(--tds-form--indent);
}
fieldset.tds-form-item {
border: 0;
margin: 0;
min-inline-size: auto;
padding: 0;
}
.tds-form-item.tds-tooltip-wrapper {
display: inherit;
}
.tds-form-input-group {
display: flex;
flex-direction: column;
}
.tds-form-input-group--layout-horizontal {
flex-direction: row;
margin-block-end: -12px;
margin-block-start: calc(var(--tds-size--half) * -1);
margin-inline: calc(var(--tds-size--half) * -1);
overflow-x: auto;
padding-block-end: 12px;
padding-block-start: var(--tds-size--half);
padding-inline: var(--tds-size--half);
}
.tds-form-input {
align-items: center;
border-radius: var(--tds-border-radius--outline-only);
display: flex;
font-size: var(--tds-form-input--font-size, inherit);
position: relative;
transition: color 0.33s ease, background-color 0.33s ease,
box-shadow 0.33s ease;
}
@media (max-width: 599px) {
.tds-form-input--default,
.tds-form-input--option {
--tds-form-input--font-size: var(--tds-size--2x);
}
}
.tds-form-input :placeholder-shown,
.tds-form-input:placeholder-shown,
.tds-placeholder {
color: var(--tds-theme-foreground-low-contrast);
}
.tds-placeholder {
font-weight: var(--tds-font-weight-medium);
white-space: nowrap;
}
:is(tds-form-label, .tds-form-label, .tds-form-caption, .tds-form-feedback)
+ :is(
.tds-form-input,
.tds-form-input-group,
tds-form-input-dropdown,
tds-form-input-search
) {
margin-block-start: var(--tds-size--1x);
}
:is(tds-form-label, .tds-form-label, .tds-form-caption, .tds-form-feedback)
+ :is(.tds-form-input--readonly, .tds-form-input-group--layout-horizontal) {
margin-block-start: var(--tds-size--half);
}
.tds-form-input--inline {
display: inline-flex;
vertical-align: initial;
}
.tds-form-input--default {
--tds-form--indent: 12px;
background-color: var(--tds-theme-background-container);
block-size: auto;
border-radius: var(--tds-border-radius--pill);
box-shadow: inset 0 0 0 var(--tds-form-input--border-width, 1px)
var(--tds-form-input--border-color, var(--tds-theme-background-container));
inline-size: var(--tds-form-input--inline-size, 100%);
justify-content: space-between;
min-block-size: var(--tds-height--pill);
outline-offset: 2px;
padding: 0 var(--tds-form--indent);
transition: inline-size 0.5s var(--tds-bezier), padding 0.5s var(--tds-bezier),
background-color 0.33s ease, box-shadow 0.33s ease;
}
.tds-density--dense .tds-form-input--default {
--tds-form--indent: 10px;
}
.tds-density--default .tds-form-input--default {
--tds-form--indent: 12px;
}
:is(.tds-scrim--light, .tds-scrim--black)
:is(.tds-modal, .tds-tooltip)
.tds-form-input--default {
--tds-form-input--border-color: var(--tds-theme-background-container-alt);
background-color: var(--tds-theme-background-container-alt);
}
:is(
.tds-card:not(.tds-card--outline, .tds-scrim--white .tds-card--highlighted),
.tds-scrim--black .tds-modal
)
.tds-form-input--default {
--tds-form-input--border-color: var(--tds-theme-background);
background-color: var(--tds-theme-background);
}
.tds-form-input--default.tds-form-input--readonly {
--tds-form--indent: 0;
background: none;
border-radius: var(--tds-border-radius--outline-only);
box-shadow: none;
margin-inline: var(--tds-form--indent);
min-block-size: auto;
padding: 0;
}
:is(
.tds-form--indent .tds-density--dense,
.tds-density--dense .tds-form--indent,
.tds-form--indent.tds-density--dense
)
.tds-form-input--default.tds-form-input--readonly {
--tds-form--indent: 10px;
}
:is(
.tds-form--indent,
.tds-form--indent .tds-density--default,
.tds-density--default .tds-form--indent,
.tds-form--indent.tds-density--default
)
.tds-form-input--default.tds-form-input--readonly {
--tds-form--indent: 12px;
}
.tds-form-input--readonly {
--tds-form-input--inline-size: auto;
color: var(--tds-theme-foreground-high-contrast);
}
.tds-form-input.tds--disabled {
-webkit-user-select: none;
user-select: none;
}
.tds-form-input:has(.tds-form-input-dropdown, .tds-form-input-select):not(
.tds--disabled
) {
cursor: pointer;
}
.tds-card .tds-form-input:focus-within,
.tds-form-input:focus-within,
.tds-modal .tds-form-input:focus-within {
--tds-form-input--border-color: var(--tds-theme-border);
--tds-form-input--border-width: 1px;
}
.tds--indicate-focus .tds-form-input:focus-within {
--tds-form-input--border-color: var(--tds-theme-background-container);
outline: var(--tds-outline--focus);
}
.tds--indicate-focus
.tds-form-input:has(.tds-dropdown):has(
.tds-form-input-dropdown:focus ~ .tds-tooltip--open
),
.tds--indicate-focus
.tds-form-input:has(.tds-dropdown):has(.tds-form-input-search:focus),
.tds--indicate-focus .tds-form-input:has(.tds-form-input-choice:focus),
.tds--indicate-focus .tds-form-input:has(.tds-form-input-file-upload:focus),
.tds--indicate-focus .tds-form-input:has(.tds-form-input-range:focus) {
--tds-form-input--border-color: var(--tds-theme-background-container);
outline: none;
}
.tds-form-input:not(.tds-form-input--default)
.tds-form-input-leading
.tds-dropdown-trigger {
border-radius: var(--tds-size--half);
outline-offset: -2px;
}
.tds-form-input:not(.tds-form-input--default)
.tds-form-input-leading
.tds-dropdown-trigger:focus-visible {
margin-inline-start: 0;
}
.tds-form-input--collapsed {
--tds-form-input--border-color: #0000;
background-color: initial;
cursor: pointer;
inline-size: var(--tds-form-input--collapsed-inline-size);
padding-inline-start: var(--tds-form-input--collapsed-padding-inline-start);
}
.tds-form-input--collapsed:is(.tds-form-input--highlighted, :hover) {
background-color: var(--tds-theme-background-container);
}
.tds-form-input--collapsed.tds-form-input--highlighted:hover {
background-color: var(--tds-color--tertiary-highlight);
}
.tds-form-input-group > .tds-form-input:not(:last-child),
tds-form-input-checkbox-group > tds-form-input-checkbox:not(:last-child),
tds-form-input-choice-group > tds-form-input-choice:not(:last-child),
tds-form-input-radio-group > tds-form-input-radio:not(:last-child) {
margin-block-end: var(--tds-size--1x);
}
.tds-form-input-group--layout-horizontal > .tds-form-input {
max-inline-size: calc(100% - var(--tds-size--6x));
min-inline-size: min-content;
}
.tds-form-input-group--layout-horizontal > .tds-form-input:not(:last-child),
.tds-form-input-group--layout-horizontal
> tds-form-input-choice:not(:last-child):has(.tds-form-input) {
margin-block-end: 0;
margin-inline-end: var(--tds-size--2x);
}
.tds-form-input-leading {
max-inline-size: calc(100% - 20px);
padding-inline-end: var(--tds-size--half);
}
.tds-form-input-trailing {
padding-inline-start: var(--tds-size--half);
}
.tds-form-input-leading + .tds-form-input-trailing {
padding-inline-start: var(--tds-size--1x);
}
.tds-form-input-group--layout-horizontal
.tds-form-input-leading
+ .tds-form-input-trailing {
padding-inline-start: var(--tds-size--2x);
}
.tds-form-input--default
:where(.tds-form-input-leading, .tds-form-input-trailing) {
align-items: center;
display: flex;
inline-size: max-content;
}
:is(.tds-form-input--default, .tds-listbox-search)
:where(.tds-form-input-leading, .tds-form-input-trailing) {
padding-block-end: var(--tds-size--half);
padding-block-start: var(--tds-size--half);
}
.tds-form-input img {
block-size: 100%;
border-radius: inherit;
inline-size: 100%;
object-fit: cover;
overflow: hidden;
}
.tds-form-input-choice {
align-self: normal;
appearance: none;
box-shadow: inset 0 0 0 1px var(--tds-theme-foreground-low-contrast);
color: inherit;
cursor: pointer;
display: inline-flex;
max-block-size: var(--tds-height--choice);
max-inline-size: var(--tds-height--choice);
min-block-size: var(--tds-height--choice);
min-inline-size: var(--tds-height--choice);
transition: box-shadow 0.33s var(--tds-bezier);
vertical-align: middle;
}
.tds-form-input-choice:focus {
box-shadow: inset 0 0 0 2px var(--tds-theme-foreground-high-contrast);
}
.tds-form-input-choice[type="checkbox"] {
--tds-form-input-choice--fill-size: var(--tds-form-input-choice--check-size);
border-radius: 2px;
}
.tds-form-input-choice[type="radio"] {
--tds-form-input-choice--fill-size: var(--tds-form-input-choice--radio-size);
border-radius: calc(var(--tds-height--choice) / 2);
}
.tds-form-input-choice:after {
block-size: var(--tds-form-input-choice--fill-size);
content: "";
display: block;
inline-size: var(--tds-form-input-choice--fill-size);
margin: auto;
transform: scale(0);
transition: transform 0.33s var(--tds-bezier);
}
.tds-form-input-choice:checked:after {
transform: scale(1);
}
.tds-form-input-choice[type="checkbox"]:after {
background-image: var(--tds-background-image--check);
}
.tds-form-input-choice[type="checkbox"]:indeterminate:after {
background-image: var(--tds-background-image--minus);
transform: scale(1);
}
.tds-form-input-choice[type="radio"]:after {
background-color: currentcolor;
border-radius: inherit;
}
:is(:root, .tds-density--default) .tds-form-input-group .tds-form-input-choice {
margin-block-start: var(--tds-size--1x);
}
:is(.tds-theme--replicant, .tds-density--dense)
.tds-form-input-group
.tds-form-input-choice {
margin-block-start: 0;
}
.tds-form-input-group--layout-horizontal
.tds-form-input:first-child
.tds-form-input-choice,
.tds-form-item .tds-form-input-choice {
margin-inline-start: var(--tds-form--indent);
}
.tds-form-input-group--layout-horizontal
.tds-form-input:not(:first-child)
.tds-form-input-choice {
margin-inline-start: 0;
}
.tds-form-input-choice-label {
--tds-form--indent: var(--tds-size--1x);
align-self: normal;
padding-block-start: 2px;
}
:is(:root, .tds-density--default)
.tds-form-input-group
.tds-form-input-choice
+ .tds-form-input-choice-label {
margin-block-start: var(--tds-size--1x);
}
:is(.tds-theme--replicant, .tds-density--dense)
:is(.tds-form-input-group .tds-form-input-choice, .tds-form-input-choice)
+ .tds-form-input-choice-label {
margin-block-start: -4px;
}
.tds-form-input-choice-label label[for] {
cursor: pointer;
}
.tds-form-input-choice + .tds-form-input-choice-label:hover .tds-form-label,
.tds-form-input-choice:checked + .tds-form-input-choice-label .tds-form-label,
.tds-form-input-choice:hover + .tds-form-input-choice-label .tds-form-label {
color: var(--tds-theme-foreground-high-contrast);
}
.tds-form-input-dropdown {
appearance: none;
background-color: initial;
border: none;
border-radius: var(--tds-border-radius--outline-only);
color: inherit;
cursor: pointer;
flex-grow: 1;
font-weight: var(--tds-font-weight-medium);
inline-size: 0;
margin: 0;
opacity: 0;
padding: 0;
text-overflow: ellipsis;
}
.tds-form-input-dropdown:disabled {
opacity: 0;
}
.tds-form-input-dropdown:focus {
outline: none;
}
.tds-form-input--inline .tds-form-input-dropdown + .tds-form-input-trailing {
padding-inline-start: 0;
}
.tds-dropdown.tds-tooltip {
--tds-tooltip--padding: var(--tds-form--indent);
cursor: default;
padding: 0;
}
.tds-form-input--inline .tds-dropdown.tds-tooltip {
--tds-form--indent: var(--tds-size--2x);
--tds-tooltip--padding: var(--tds-form--indent);
}
.tds--indicate-focus .tds-form-input > input:focus ~ .tds-dropdown.tds-tooltip {
outline: var(--tds-outline--focus);
}
.tds--indicate-focus
.tds-form-input
.tds-dropdown.tds-tooltip:has(.tds-form-input-search:focus) {
outline: var(--tds-outline--focus);
}
.tds-dropdown-trigger {
align-items: center;
display: flex;
font-weight: var(--tds-font-weight-medium);
margin-inline-start: calc(var(--tds-size--half) * -1);
padding-inline-start: var(--tds-size--half);
white-space: nowrap;
}
.tds-form-input-leading .tds-dropdown-trigger {
padding-inline-end: var(--tds-size--half);
}
.tds-form-label-files {
padding-inline-end: var(--tds-form--indent);
padding-inline-start: var(--tds-form--indent);
}
.tds-list-item--file {
align-items: center;
color: var(--tds-theme-foreground);
display: flex;
justify-content: space-between;
max-inline-size: unset;
}
:is(.tds-form-label, .tds-form-caption)
+ .tds-form-label-files
.tds-list-item--file:first-of-type {
padding-block-start: var(--tds-size--1x);
}
.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;
user-select: none;
}
.tds-list-item--file > button .tds-icon {
margin: 0;
}
.tds-form-feedback.tds-form-feedback-file {
padding-inline-start: 0;
}
.tds-form-feedback-file .tds-form-feedback-text {
display: flex;
}
.tds-form-feedback-file .tds-form-feedback-text .tds-icon {
margin-block-start: calc(var(--tds-size--1x) / 4);
margin-inline-end: var(--tds-size--half);
}
.tds-form-input-file-upload {
appearance: none;
block-size: 1px;
inline-size: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
}
.tds-form-input-file-upload[disabled] + .tds-btn {
cursor: not-allowed;
opacity: var(--tds-ui-opacity-50);
}
.tds-form-input-file-upload:not([disabled]):focus-visible + .tds-btn {
box-shadow: inset 0 0 0 var(--tds-border-width--medium);
outline: none;
}
.tds-form-input-file-upload:focus {
outline: none;
}
.tds-form-input-password {
appearance: none;
background-color: initial;
border: none;
border-radius: var(--tds-border-radius--outline-only);
color: inherit;
font-weight: var(--tds-font-weight-medium);
inline-size: 100%;
margin: 0;
padding: 0;
text-overflow: ellipsis;
}
.tds-form-input-password:focus {
outline: none;
}
.tds-form-input-code-verification-group {
--tds-form-input--inline-size: 40px;
align-items: center;
display: flex;
flex-direction: row;
gap: 16px;
justify-content: flex-start;
}
.tds-form-input-code-verification-group--center {
justify-content: center;
}
.tds-form-input-code-verification {
appearance: none;
background-color: initial;
border: none;
border-radius: var(--tds-border-radius--outline-only);
color: inherit;
font-size: var(--tds-font-size-50);
font-weight: var(--tds-font-weight-medium);
margin: 0;
overflow: hidden;
padding: 0;
text-align: center;
}
.tds-form-input-code-verification:focus {
outline: none;
}
.tds-form-input-range {
--tds-form-input-range--thumb-size: var(--tds-height--choice);
--tds-form-input-range--track-size: calc(var(--tds-height--choice) / 2);
--tds-form-input-range--track-radius: calc(
var(--tds-form-input-range--track-size) / 2
);
--tds-form-input-range--background-color: var(--tds-theme-primary);
appearance: none;
background-color: initial;
color: inherit;
cursor: ew-resize;
inline-size: 100%;
margin: var(--tds-size--half) var(--tds-form--indent);
}
.tds-form-input-range--progress {
position: relative;
}
.tds-form-input-range:focus {
outline: none;
}
.tds-form-input-range--progress:before {
background-color: var(--tds-form-input-range--background-color);
block-size: 100%;
border-radius: var(--tds-size--1x);
content: "";
display: block;
inline-size: var(--tds-form-input-range--progress-width, 100%);
left: 0;
pointer-events: none;
position: absolute;
top: 0;
}
[dir="rtl"] .tds-form-input-range--progress:before {
left: auto;
right: 0;
}
.tds-form-input-range--progress::-moz-range-progress {
background-color: var(--tds-form-input-range--background-color);
block-size: var(--tds-form-input-range--track-size);
border-radius: var(--tds-form-input-range--track-radius);
}
.tds-form-input-range::-webkit-slider-runnable-track {
background-color: var(--tds-color-grey-50);
block-size: var(--tds-form-input-range--track-size);
border-radius: var(--tds-form-input-range--track-radius);
inline-size: 100%;
}
.tds-form-input-range::-moz-range-track {
appearance: none;
background-color: var(--tds-color-grey-50);
block-size: var(--tds-form-input-range--track-size);
border: none;
border-radius: var(--tds-form-input-range--track-radius);
inline-size: 100%;
}
.tds-form-input-range::-webkit-slider-thumb {
appearance: none;
background-color: var(--tds-color-white);
block-size: var(--tds-form-input-range--thumb-size);
border-radius: calc(var(--tds-form-input-range--thumb-size) / 2);
box-shadow: inset 0 0 0 var(--tds-form-input--border-width, 1px)
var(--tds-form-input--border-color, var(--tds-theme-border)),
var(--tds-range-slider--box-shadow, 0 0 0 0 #0000),
var(--tds-box-shadow--small);
inline-size: var(--tds-form-input-range--thumb-size);
margin-block-start: calc(
var(--tds-form-input-range--track-size) / 2 -
var(--tds-form-input-range--thumb-size) / 2
);
outline: var(--tds-range-slider--outline, none);
outline-offset: 2px;
position: relative;
-webkit-transition: box-shadow 0.3s ease;
transition: box-shadow 0.3s ease;
}
.tds--indicate-focus ::-webkit-slider-thumb {
-webkit-transition: none;
transition: none;
}
.tds-form-input-range:focus-visible {
--tds-form-input--border-color: var(--tds-theme-foreground-high-contrast);
--tds-form-input--border-width: 2px;
--tds-range-slider--box-shadow: 0 0 0 2px var(--tds-theme-background);
--tds-range-slider--outline: var(--tds-outline--focus);
}
.tds--indicate-focus .tds-form-input-range:focus {
--tds-form-input--border-color: var(--tds-theme-foreground-high-contrast);
--tds-form-input--border-width: 2px;
--tds-range-slider--box-shadow: 0 0 0 2px var(--tds-theme-background);
--tds-range-slider--outline: var(--tds-outline--focus);
}
.tds-form-input-range::-moz-range-thumb {
appearance: none;
background-color: var(--tds-color-white);
block-size: var(--tds-form-input-range--thumb-size);
border: none;
border-radius: calc(var(--tds-form-input-range--thumb-size) / 2);
box-shadow: inset 0 0 0 var(--tds-form-input--border-width, 1px)
var(--tds-form-input--border-color, var(--tds-theme-border)),
var(--tds-range-slider--box-shadow, 0 0 0 0 #0000),
var(--tds-box-shadow--small);
inline-size: var(--tds-form-input-range--thumb-size);
margin-block-start: calc(
var(--tds-form-input-range--track-size) / 2 -
var(--tds-form-input-range--thumb-size) / 2
);
outline: var(--tds-range-slider--outline, none);
outline-offset: 2px;
-moz-transition: box-shadow 0.3s ease;
transition: box-shadow 0.3s ease;
z-index: 2;
}
.tds--indicate-focus ::-moz-range-thumb {
-moz-transition: none;
transition: none;
}
.tds-form-input-range:focus-visible ::-moz-range-thumb {
--tds-form-input--border-color: var(--tds-theme-foreground-low-contrast);
--tds-form-input--border-width: 2px;
--tds-range-slider--box-shadow: 0 0 0 2px var(--tds-theme-background);
--tds-range-slider--outline: var(--tds-outline--focus);
}
.tds--indicate-focus .tds-form-input-range:focus ::-moz-range-thumb {
--tds-form-input--border-color: var(--tds-theme-foreground-low-contrast);
--tds-form-input--border-width: 2px;
--tds-range-slider--box-shadow: 0 0 0 2px var(--tds-theme-background);
--tds-range-slider--outline: var(--tds-outline--focus);
}
.tds-form-label-range.tds-form-label-range {
align-items: baseline;
display: flex;
}
.tds-form-label-range .tds-form-caption {
flex-grow: 1;
text-align: end;
}
.tds-form-input-select {
appearance: none;
background-color: inherit;
border: none;
border-radius: var(--tds-border-radius--outline-only);
color: inherit;
flex-grow: 1;
font-weight: var(--tds-font-weight-medium);
inline-size: 100%;
margin: 0;
padding: 0;
padding-inline-end: var(--tds-size--3x);
text-overflow: ellipsis;
}
.tds-form-input--default {
--tds-form-input-select--chevron-inset: var(--tds-form--indent);
}
.tds-form-input-select:focus {
outline: none;
}
.tds-form-input-select + .tds-form-input-trailing {
align-self: center;
left: auto;
pointer-events: none;
position: absolute;
right: var(--tds-form-input-select--chevron-inset, 0);
}
[dir="rtl"] .tds-form-input-select + .tds-form-input-trailing {
left: var(--tds-form-input-select--chevron-inset, 0);
position: absolute;
right: auto;
}
.tds-colorscheme--dark .tds-form-input--default .tds-form-input-select:focus,
.tds-colorscheme--dark .tds-form-input--default :is(option, optgroup),
.tds-scrim--black .tds-form-input--default .tds-form-input-select:focus,
.tds-scrim--black .tds-form-input--default :is(option, optgroup) {
background-color: var(--tds-theme-background-container);
}
.tds-form-input-search {
appearance: none;
background-color: initial;
border: none;
border-radius: var(--tds-border-radius--outline-only);
color: inherit;
flex-grow: 1;
font-weight: var(--tds-font-weight-medium);
inline-size: 100%;
margin: 0;
padding: 0;
text-overflow: ellipsis;
transition: opacity 0.33s ease;
}
.tds-form-input--collapsed .tds-form-input-search {
opacity: 0;
}
.tds-form-input-search:focus {
outline: none;
}
.tds-form-input-search:is(
[inputmode="search"],
[type="search"]
)::-webkit-calendar-picker-indicator,
.tds-form-input-search:is(
[inputmode="search"],
[type="search"]
)::-webkit-search-cancel-button {
display: none !important;
}
.tds-form-input-search-clear {
opacity: 0;
pointer-events: none;
transition: opacity 0.33s ease, background-color 0.33s ease,
visibility 0s 0.33s;
visibility: hidden;
}
.tds-form-input:not(.tds-form-input--collapsed)[data-tds-value]
.tds-form-input-search-clear {
opacity: 1;
pointer-events: inherit;
transition: opacity 0.33s ease, background-color 0.33s ease, visibility 0s 0s;
visibility: inherit;
}
.tds-form-input-search-wrapper--center {
display: flex;
justify-content: center;
}
.tds-form-input-search-wrapper--leading {
display: flex;
justify-content: flex-end;
}
label.tds-form-input {
color: var(--tds-form-label--color);
-webkit-user-select: none;
user-select: none;
}
.tds-form-input--option {
--tds-form--indent: 12px;
align-items: center;
block-size: auto;
border-radius: var(--tds-border-radius--pill);
box-shadow: inset 0 0 0 var(--tds-form-input--border-width, 1px)
var(--tds-form-input--border-color, var(--tds-theme-border));
inline-size: auto;
justify-content: space-between;
min-block-size: var(--tds-height--pill);
padding: var(--tds-size--half) var(--tds-form--indent);
}
.tds-density--dense .tds-form-input--option {
--tds-form--indent: 10px;
}
.tds-density--default .tds-form-input--option {
--tds-form--indent: 12px;
}
.tds-form-input--option.tds-form-input--circle,
.tds-form-input-group--layout-horizontal
> .tds-form-input--option.tds-form-input--circle {
border-radius: var(--tds-border-radius--circle);
justify-content: center;
max-block-size: var(--tds-height--pill);
max-inline-size: var(--tds-height--pill);
min-inline-size: var(--tds-height--pill);
padding: var(--tds-size--1x);
}
input.tds-form-input-hidden-choice {
block-size: 0;
clip-path: inset(100%);
inline-size: 0;
opacity: 0;
pointer-events: none;
}
.tds-form-input-hidden-choice + .tds-form-input {
cursor: pointer;
}
.tds-form-input-hidden-choice[disabled] + .tds-form-input {
cursor: not-allowed;
opacity: var(--tds-ui-opacity-50);
pointer-events: none;
}
.tds-form-input-hidden-choice:checked + .tds-form-input {
font-weight: var(--tds-font-weight-medium);
}
.tds-form-input--option .tds-form-input-hidden-choice:checked + .tds-form-input,
.tds-form-input-hidden-choice:checked + .tds-form-input.tds-form-input--option {
--tds-form-input--border-color: var(--tds-theme-primary);
--tds-form-input--border-width: var(--tds-border-width--large);
color: var(--tds-theme-foreground-high-contrast);
}
.tds-form-input-hidden-choice:focus-visible + .tds-form-input {
outline: var(--tds-outline--focus);
}
.tds--indicate-focus .tds-form-input-hidden-choice:focus + .tds-form-input {
outline: var(--tds-outline--focus);
}
.tds-form-input-visual-checkbox {
--tds-form-input-choice--fill-size: var(--tds-form-input-choice--check-size);
border-radius: var(--tds-size--half);
box-shadow: inset 0 0 0 1px var(--tds-theme-foreground-low-contrast);
color: inherit;
cursor: pointer;
display: inline-flex;
max-block-size: var(--tds-height--choice);
max-inline-size: var(--tds-height--choice);
min-block-size: var(--tds-height--choice);
min-inline-size: var(--tds-height--choice);
transition: box-shadow 0.33s ease;
vertical-align: middle;
}
.tds-form-input-leading .tds-form-input-visual-checkbox {
margin-inline-end: var(--tds-size--1x);
}
.tds-form-input-hidden-choice:focus
+ .tds-form-input
.tds-form-input-visual-checkbox {
box-shadow: inset 0 0 0 2px var(--tds-theme-foreground-high-contrast);
}
.tds-form-input-visual-checkbox:after {
background-image: var(--tds-background-image--check);
background-repeat: no-repeat;
block-size: var(--tds-form-input-choice--fill-size);
content: "";
inline-size: var(--tds-form-input-choice--fill-size);
margin: auto;
transform: scale(0);
transition: transform 0.33s var(--tds-bezier);
}
.tds-form-input-hidden-choice:checked
+ .tds-form-input
.tds-form-input-visual-checkbox:after {
transform: scale(1);
}
.tds-form-input--swatch {
block-size: var(--tds-size--3x);
border-radius: inherit;
box-shadow: 0 0 0 1px #333;
display: block;
inline-size: var(--tds-size--3x);
}
.tds-country-phone-label--long .tds-country-code {
display: inline-block;
inline-size: 32px;
padding-inline-end: var(--tds-size--half);
}
.tds-form-input-text {
appearance: none;
background-color: initial;
border: none;
border-radius: var(--tds-border-radius--outline-only);
color: inherit;
flex-grow: 1;
font-weight: var(--tds-font-weight-medium);
inline-size: 100%;
margin: 0;
padding: 0;
text-overflow: ellipsis;
}
.tds-form-input-text:focus {
outline: none;
}
.tds-form-input-text[inputmode="search"]::-webkit-search-cancel-button {
appearance: none;
}
.tds-form-input-time {
--tds-form-input-time--padding: var(--tds-padding--card);
background-color: var(--tds-theme-background-dialog);
border-radius: var(--tds-border-radius--card);
padding: var(--tds-form-input-time--padding);
}
.tds-form-input-date {
caret-color: #0000;
}
.tds-form-input-date--placeholder {
color: var(--tds-text--color--placeholder);
}
.tds-form-input-textarea {
appearance: none;
background-color: initial;
border: none;
border-radius: var(--tds-border-radius--outline-only);
color: inherit;
flex-grow: 1;
font-weight: var(--tds-font-weight-medium);
margin: 0;
min-block-size: calc(var(--tds-height--pill) * 3);
padding: 0;
resize: none;
}
.tds-form-input--default .tds-form-input-textarea {
margin: 0 calc(var(--tds-form--indent) * -1);
padding: var(--tds-size--1x) var(--tds-form--indent);
}
.tds-form-input--readonly .tds-form-input-textarea {
margin: 0;
padding: 0;
}
.tds-form-input-textarea:focus {
outline: none;
}
.tds-form-input-textarea:is(:hover, :focus, :active) {
resize: vertical;
}
.tds-form-input--readonly .tds-form-input-textarea:is(:hover, :focus, :active) {
resize: none;
}
.tds-form-feedback {
color: var(--tds-form-feedback--color, var(--tds-form-label--color));
display: flex;
font-size: var(--tds-font-size-20);
justify-content: space-between;
padding-inline: var(--tds-form--indent) var(--tds-form--indent);
}
:is(
.tds-form-input,
.tds-form-input-group,
.tds-form-label,
.tds-form-caption,
.tds-form-input-code-verification-group,
tds-form-input-dropdown,
tds-form-input,
tds-form-input-date,
tds-form-label,
tds-form-input-search,
tds-form-input-file-upload
)
+ .tds-form-feedback {
margin-block-start: var(--tds-size--1x);
}
.tds-form-feedback-text {
flex-grow: 1;
text-align: end;
}
.tds-form--error .tds-form-helper-text {
display: none;
}
.tds-form--error .tds-form-feedback-text {
font-weight: var(--tds-font-weight-medium);
text-align: start;
}
.tds-form-input-code-verification-group--center
+ .tds-form-feedback
> .tds-form-feedback-text {
text-align: center;
}
.tds-form-label {
color: var(--tds-form-label--color);
display: block;
font-weight: var(--tds-font-weight-medium);
padding-inline: var(--tds-form--indent) calc(var(--tds-form--indent) / 2);
transition: color 0.33s ease;
}
.tds-form-label-tooltip {
display: inline-flex;
position: relative;
vertical-align: middle;
}
.tds-form-label-tooltip .tds-icon--inline:is(:first-child, :last-child) {
margin-inline: 0 0;
}
.tds-form-caption {
color: var(--tds-theme-foreground-low-contrast);
font-size: var(--tds-font-size-20);
line-height: var(--tds-line-height-10);
padding-inline: var(--tds-form--indent) calc(var(--tds-form--indent) / 2);
}
:is(.tds-form-input, .tds-form-input-group) + .tds-form-caption {
margin-block-start: var(--tds-size--1x);
}
.tds-icon-btn {
--tds-icon-btn--background: #0000;
--tds-icon-btn--border-width: var(--tds-border-width--medium);
align-items: center;
-webkit-backdrop-filter: blur(0);
backdrop-filter: blur(0);
background-color: var(--tds-icon-btn--background);
block-size: var(--tds-height--pill);
border: var(--tds-icon-btn--border-width) solid #0000;
border-radius: var(--tds-border-radius--pill);
box-shadow: inset 0 0 0 var(--tds-icon-btn--border-width) #0000;
display: inline-flex;
inline-size: var(--tds-height--pill);
justify-content: center;
padding: var(--tds-size--half);
transition: color 0.33s ease, background-color 0.33s ease,
box-shadow 0.25s ease, transform 0.33s var(--tds-bezier);
vertical-align: middle;
}
.tds-icon-btn.tds-icon-btn--large,
:where(.tds-density--default) .tds-icon-btn {
--tds-height--pill: var(--tds-size--5x);
--tds-icon-btn--border-width: var(--tds-border-width--medium);
}
.tds-icon-btn.tds-icon-btn--medium,
:where(.tds-density--dense) .tds-icon-btn {
--tds-height--pill: var(--tds-size--4x);
--tds-icon-btn--border-width: var(--tds-border-width--small);
}
.tds-icon-btn:focus {
box-shadow: inset 0 0 0 var(--tds-icon-btn--border-width);
outline: none;
}
:is(.tds-form-input-leading, .tds-form-input-trailing) .tds-icon-btn {
margin-block-end: calc(var(--tds-size--1x) * -1);
margin-block-start: calc(var(--tds-size--1x) * -1);
}
.tds-form-input .tds-icon-btn {
--tds-icon-btn--border-width: 1px;
block-size: calc(var(--tds-height--pill) - var(--tds-size--1x));
inline-size: calc(var(--tds-height--pill) - var(--tds-size--1x));
}
.tds-form-input--default .tds-form-input-trailing .tds-icon-btn:last-child {
margin-inline-end: calc(var(--tds-size--half) * -1);
}
.tds-form-input--default .tds-form-input-leading .tds-icon-btn:first-child {
margin-inline-start: calc(var(--tds-size--half) * -1);
}
.tds-data-table tbody tr.tds--highlighted .tds-td--actions .tds-icon-btn,
.tds-icon-btn.tds--highlighted {
--tds-icon-btn--background: var(--tds-theme-background-container-alt);
-webkit-backdrop-filter: blur(var(--tds-blur--button));
backdrop-filter: blur(var(--tds-blur--button));
}
@media (hover: hover) {
.tds-data-table tbody tr:hover .tds-td--actions .tds-icon-btn:not([disabled]),
.tds-icon-btn:not([disabled]):hover {
--tds-icon-btn--background: var(--tds-theme-background-container-alt);
-webkit-backdrop-filter: blur(var(--tds-blur--button));
backdrop-filter: blur(var(--tds-blur--button));
}
.tds-icon-btn.tds--highlighted:not([disabled]):hover {
--tds-icon-btn--background: var(
--tds-theme-background-container-alt-highlight
);
}
}
.tds-icon-btn.tds-icon-btn--small {
--tds-height--pill: 28px;
--tds-icon-btn--border-width: var(--tds-border-width--small);
}
.tds-component-preview,
:root {
--tds-icon--bg: #0000;
--tds-icon--rotate-x: 0deg;
--tds-icon--size: var(--tds-size--3x);
--tds-icon--transform: ;
--tds-icon--color-stop-1: currentcolor;
--tds-icon--color-stop-2: currentcolor;
}
:root,
[dir="ltr"] {
--tds-icon--rotate-y: 0deg;
}
[dir="rtl"] {
--tds-icon--rotate-y: 180deg;
}
.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;
transform: var(--tds-icon--transform);
transition: color 0.33s ease, transform 0.5s var(--tds-bezier);
}
.tds-icon--small {
--tds-icon--size: var(--tds-size--2x);
}
.tds-icon--large {
--tds-icon--size: var(--tds-size--4x);
}
.tds-icon--xl {
--tds-icon--size: var(--tds-size--6x);
}
.tds-icon--xxl {
--tds-icon--size: var(--tds-size--8x);
}
:is(
[class*="tds-icon-arrow"],
[class*="tds-icon-chevron"],
[class*="tds-icon-speaker"]
) {
transform: rotateY(var(--tds-icon--rotate-y))
rotateX(var(--tds-icon--rotate-x)) var(--tds-icon--transform);
}
.tds-accordion[open] > .tds-accordion-summary > [class*="tds-icon-chevron"],
.tds-icon--flip-x,
.tds-sidenav
.tds-site-nav-item.tds--expanded
[class*="tds-icon-chevron"]:last-child {
--tds-icon--rotate-x: 180deg;
}
.tds-icon--inline {
display: inline-block;
}
.tds-icon--inline:last-child {
margin-inline-start: var(--tds-size--half);
}
.tds-icon--inline:first-child {
margin-inline-end: var(--tds-size--half);
}
.tds-icon--text-bottom {
vertical-align: text-bottom;
}
.tds-icon--text-top {
vertical-align: text-top;
}
.tds-icon--text-middle {
margin-block-start: -0.2em;
vertical-align: middle;
}
.tds-icon-logo-wordmark {
inline-size: calc(var(--tds-icon--size) * 5);
}
.tds-icon-loader {
background: conic-gradient(from 30deg, #7770, #7777777a, #777c, #777);
color: #fff0;
-webkit-mask: url('data:image/svg+xml;charset=utf-8,');
mask: url('data:image/svg+xml;charset=utf-8,');
-webkit-mask-size: cover;
mask-size: cover;
opacity: var(--tds-ui-opacity-70);
}
.tds-icon * {
transition: fill 0.3s ease, stroke 0.3s ease;
}
.tds-icon-badge {
--tds-badge--color: var(--tds-theme-primary);
--tds-badge--text-color: var(--tds-color-white);
font-variant-numeric: tabular-nums;
overflow: visible;
}
.tds-theme--replicant .tds-icon-badge {
--tds-badge--text-color: var(--tds-color--black);
}
.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-theme-foreground);
cursor: pointer;
display: inline-flex;
flex-flow: row nowrap;
font-size: var(--tds-font-size-30);
font-weight: var(--tds-font-weight-medium);
min-block-size: var(--tds-size--5x);
min-inline-size: var(--tds-size--3x);
padding-block: var(--tds-size--1x) var(--tds-size--1x);
padding-inline: var(--tds-icon-trigger--padding-inline-start)
var(--tds-icon-trigger--padding-inline-end);
position: relative;
-webkit-user-select: none;
user-select: none;
}
.tds-icon-trigger.tds--disabled,
.tds-icon-trigger:disabled {
cursor: not-allowed;
opacity: var(--tds-ui-opacity-50);
}
.tds-icon-trigger:after {
border: none;
opacity: 0;
}
.tds-icon-trigger .tds-label-title {
text-transform: inherit;
}
.tds-icon-crosshatch {
--tds-icon-crosshatch--border-radius: var(--tds-border-radius--pill);
appearance: none;
background-color: initial;
block-size: var(--tds-size--3x);
border: var(--tds-icon-trigger--border_size) solid
var(--tds-color--secondary-highlight);
inline-size: var(--tds-size--3x);
left: 0;
padding: 0;
}
.tds-icon-crosshatch,
.tds-icon-crosshatch:after,
.tds-icon-crosshatch:before {
border-radius: var(--tds-icon-crosshatch--border-radius);
position: absolute;
transition: var(--tds-icon-trigger--animation);
}
.tds-icon-crosshatch:after,
.tds-icon-crosshatch:before {
background-color: var(--tds-color--secondary-highlight);
content: "";
inset: 0;
margin: auto;
}
.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);
}
.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);
}
.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 {
margin-inline-end: var(--tds-size--1x);
}
.tds-icon-trigger--reversed {
--tds-icon-trigger--padding-inline-end: var(--tds-size--4x);
--tds-icon-trigger--padding-inline-start: 0;
}
.tds-icon-trigger--reversed .tds-icon-crosshatch,
[dir="rtl"] .tds-icon-crosshatch {
left: auto;
right: 0;
}
[dir="rtl"] .tds-icon-trigger--reversed,
[dir="rtl"] .tds-icon-trigger--reversed .tds-icon-crosshatch {
left: 0;
right: auto;
}
[aria-pressed="true"] .tds-icon-crosshatch:before {
transform: rotate(90deg);
}
[aria-pressed="true"] .tds-icon-crosshatch:after {
opacity: var(--tds-ui-opacity-0);
transform: rotate(180deg);
}
.tds-icon-trigger--rotate[aria-pressed="true"] .tds-icon-crosshatch:before {
transform: rotate(135deg);
}
.tds-icon-trigger--rotate[aria-pressed="true"] .tds-icon-crosshatch:after {
opacity: var(--tds-ui-opacity-100);
transform: rotate(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:after,
.tds-icon-trigger--invert-colors[aria-pressed="true"]
.tds-icon-crosshatch:before {
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);
}
.tds-indicator {
--tds-indicator--circle-size: var(--tds-size-base);
--tds-status-color--background-color: var(--tds-theme-background-container);
block-size: var(--tds-indicator--circle-size);
inline-size: var(--tds-indicator--circle-size);
}
.tds-indicator--large {
--tds-indicator--circle-size: calc(var(--tds-size-base) * 1.5);
}
.tds-indicator--small {
--tds-indicator--circle-size: var(--tds-size-half);
}
.tds-indicator-group {
--tds-indicator-group--circle-size: var(--tds-size-base);
block-size: var(--tds-indicator-group--circle-size);
}
.tds-indicator-group--large-indicators {
--tds-indicator-group--circle-size: calc(var(--tds-size-base) * 1.5);
}
.tds-indicator-group--small-indicators {
--tds-indicator-group--circle-size: var(--tds-size-half);
}
.tds-component-preview,
:root {
--tds-gutter: var(--tds-size--3x);
--tds-flex-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 {
margin-block: var(--tds-gutter--negative) var(--tds-flex-gutter);
margin-inline-start: var(--tds-gutter--negative);
}
@media (max-width: 599px) {
.tds-flex-small-gutters > * {
margin-block: var(--tds-size--1x) var(--tds-size--1x);
}
.tds-flex-small-gutters > :first-child {
margin-block-start: 0;
}
.tds-flex-small-gutters > :last-child {
margin-block-end: 0;
}
}
@media (min-width: 600px) {
.tds-flex-small-gutters > * {
margin-inline: var(--tds-size--1x) var(--tds-size--1x);
}
.tds-flex-small-gutters > :first-child {
margin-inline-start: 0;
}
.tds-flex-small-gutters > :last-child {
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: #95ecff1a;
block-size: 100%;
border-inline-end: 1px solid #95ecff4d;
border-inline-start: 1px solid #95ecff4d;
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-flex-gutter);
top: var(--tds-flex-gutter);
}
.tds-flex-gutters .tds-flex-item {
padding-block-start: var(--tds-flex-gutter);
padding-inline-start: var(--tds-flex-gutter);
}
.tds-flex--flex_cells > .tds-flex-item {
display: flex;
}
.tds-flex-item--no_gutter {
padding-block-start: 0;
padding-inline-start: 0;
}
.tds-flex-gutters .tds-flex-gutters {
margin-block-end: 0;
}
[class*="tds-flex--col_"] {
flex: none;
transition: inline-size 0.25s 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%;
}
}
.tds-flex--top {
align-items: flex-start;
}
.tds-flex--bottom {
align-items: flex-end;
}
.tds-flex--center {
align-items: center;
}
.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;
}
.tds-flex--align-inline-center > .tds-flex-item,
.tds-flex--align-inline-end > .tds-flex-item,
.tds-flex--align-inline-start > .tds-flex-item {
flex: unset;
}
.tds-flex-item--top {
align-self: flex-start;
}
.tds-flex-item--bottom {
align-self: flex-end;
}
.tds-flex-item--center {
align-self: center;
}
.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%;
}
.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%;
}
}
.tds-flex--as_columns {
flex-flow: column wrap;
}
.tds-flex--as-rows {
display: flex;
flex-flow: row wrap;
}
.tds-layout-flex--two_columns.tds-layout-flex--sidemenu
> .tds-flex-item:first-child,
.tds-layout-flex--two_columns.tds-layout-flex--sidemenu_left
> .tds-flex-item:first-child {
min-inline-size: 70%;
}
.tds-layout-flex--three_columns.tds-layout-flex--sidemenu
> .tds-flex-item:first-child {
min-inline-size: 60%;
}
.tds-layout-flex--three_columns.tds-layout-flex--sidemenu
> .tds-flex-item:nth-child(2),
.tds-layout-flex--two_columns.tds-layout-flex--sidemenu_left
> .tds-flex-item:nth-child(2) {
order: -1;
}
@media (max-width: 599px) {
.tds-layout-flex--three_columns.tds-layout-flex--sidemenu
> .tds-flex-item:first-child,
.tds-layout-flex--two_columns.tds-layout-flex--sidemenu_left
> .tds-flex-item:first-child {
order: -1;
}
.tds-flex-item {
flex: 100%;
inline-size: 100%;
min-inline-size: 112px;
}
.tds-flex-gutters {
margin-block: 0 0;
}
.tds-flex-gutters .tds-flex-item {
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;
}
.tds-layout :is(.tds-layout, .tds-layout--no_offset),
.tds-layout.tds-layout--no_offset {
padding-inline: 0 0;
}
.tds-layout--constrained,
.tds-layout--constrained_small {
margin-inline: auto auto;
}
.tds-layout--constrained_small {
max-inline-size: 840px;
}
.tds-layout--constrained {
max-inline-size: 1440px;
}
.tds-layout {
--tds-layout-gutter--end: var(--tds-content_container--gutter);
--tds-layout-gutter--start: var(--tds-content_container--gutter);
padding-inline: var(--tds-layout-gutter--end) var(--tds-layout-gutter--start);
}
.tds-content_container > .tds-layout {
padding-inline: 0 0;
}
@media (min-width: 600px) {
.tds-layout {
grid-gap: 0 var(--tds-size--3x);
display: grid;
grid-template-columns: repeat(12, 1fr);
margin: auto;
}
}
.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 {
padding-inline-start: 0;
}
.tds-layout-2col.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";
}
.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;
}
@media (min-width: 600px) {
.tds-layout-main--left .tds-layout-aside,
.tds-layout-main--right .tds-layout-main {
padding-inline-start: 24px;
}
.tds-layout-2col-content_heavy.tds-layout-main--left .tds-layout-aside,
.tds-layout-2col-content_heavy.tds-layout-main--right .tds-layout-main,
.tds-layout-2col-spacious.tds-layout-main--left .tds-layout-aside,
.tds-layout-2col-spacious.tds-layout-main--right .tds-layout-main {
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(min-content, 318px);
}
.tds-layout-2col-content_heavy.tds-layout-main--right {
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 {
padding-inline-start: 24px;
}
.tds-layout-2col-content_heavy.tds-layout-main--left {
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(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);
}
@media (min-width: 600px) {
.tds-layout-checkerboard {
grid-gap: 0;
grid-template: "checkboard--row" 1fr/1fr;
}
.tds-layout-checkerboard .tds-layout-item {
align-items: stretch;
display: grid;
grid-template: "checkerboard-asset checkerboard-caption" 1fr/1fr 1fr;
place-content: center center;
}
.tds-layout-checkerboard .tds-layout-checkerboard--caption {
grid-area: checkerboard-caption;
padding-inline: var(--tds-size--8x) 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(2n) {
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-inline-size: 100%;
object-fit: cover;
object-position: center;
}
.tds-component-preview,
:root {
--tds-shell-footer-height: initial;
--tds-shell-header-height: var(--tds-size--7x);
}
.tds-shell {
--tds-shell-content-height: calc(
100vh - var(--tds-shell-header-height) - var(--tds-shell-footer-height)
);
grid-gap: 0 24px;
display: grid;
grid-template-areas: "tds-shell-masthead" "tds-shell-content" "tds-shell-footer";
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;
}
.tds-shell.tds-shell--no_footer {
--tds-shell-footer-height: 0px;
}
@media (min-width: 600px) {
.tds-shell {
--tds-shell-footer-height: 52px;
}
}
.tds-shell-footer,
.tds-shell-masthead {
display: flex;
flex-flow: row nowrap;
}
.tds-shell-masthead {
grid-area: tds-shell-masthead;
}
.tds-shell-footer--is_sticky,
.tds-shell-masthead--is_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 {
appearance: none;
color: inherit;
font-weight: inherit;
text-decoration: none;
}
a:where(:focus, .tds--focus) {
border-radius: var(--tds-border-radius--outline-only);
outline: var(--tds-outline--focus);
outline-offset: 2px;
}
:where(h1, h2) a:where(:focus, .tds--focus) {
border-radius: var(--tds-size--half);
}
button.tds-link {
display: inline;
line-height: normal;
}
.tds-link {
--tds-link--icon-margin: calc(
(var(--tds-icon--size) + var(--tds-size--half)) * -1
);
--tds-link--box-shadow--default: 0 calc(1px + var(--tds-border-width--small))
0 -1px currentcolor;
--tds-link--box-shadow--hover: 0 calc(1px + var(--tds-border-width--medium)) 0 -1px
currentcolor;
--tds-link--box-shadow--none: 0 0 0 0 #0000;
background-color: initial;
border: 0;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
box-shadow: var(--tds-link--box-shadow--default);
color: var(--tds-theme-foreground);
cursor: pointer;
padding: 0;
position: relative;
text-align: initial;
transition: box-shadow 0.33s var(--tds-bezier), color 0.33s ease;
}
:is(.tds-link, .tds-link--interaction):is(:focus-visible, .tds--focus) {
border-radius: var(--tds-border-radius--outline-only);
outline: var(--tds-outline--focus);
outline-offset: 2px;
}
:is(.tds-link, .tds-link--interaction):is([disabled], .tds--disabled) {
cursor: not-allowed;
outline: none;
}
.tds-link--secondary {
color: var(--tds-theme-foreground-low-contrast);
}
.tds-link--primary,
.tds-link--secondary {
box-shadow: var(--tds-link--box-shadow--none);
font-weight: var(--tds-font-weight-medium);
}
.tds-link--primary {
color: var(--tds-theme-foreground-primary);
}
.tds-link--vertical {
padding-inline-start: var(--tds-size--half);
}
.tds-link--interaction,
.tds-link--vertical {
box-shadow: var(--tds-link--box-shadow--none);
}
.tds-link--interaction {
color: var(--tds-theme-foreground-high-contrast);
cursor: pointer;
display: inline-block;
font-weight: var(--tds-font-weight-medium);
position: relative;
}
.tds-link--interaction:after {
background-image: radial-gradient(
circle,
var(--tds-theme-foreground-low-contrast) 1px,
#0000 1px
);
background-position: bottom;
background-repeat: repeat-x;
background-size: 6px 3px;
block-size: 3px;
bottom: 0;
content: "";
inline-size: 100%;
left: 0;
position: absolute;
transform: translateY(0.2em);
transition: transform 0.3s, background-image 0.3s ease;
}
.tds-link--interaction:focus:after,
.tds-link--interaction:hover:after {
background-image: radial-gradient(
circle,
var(--tds-theme-foreground-high-contrast) 1px,
#0000 1px
);
transform: translateY(0.15em);
}
@media (hover: hover) {
.tds-link:is(:hover, .tds--hover):not(
.tds-link--primary,
.tds-link--vertical,
.tds-link--interaction,
[disabled],
.tds--disabled
) {
box-shadow: var(--tds-link--box-shadow--hover);
color: var(--tds-theme-foreground-high-contrast);
}
.tds-link--primary:is(:hover, .tds--hover):not([disabled], .tds--disabled) {
box-shadow: var(--tds-link--box-shadow--none);
color: var(--tds-theme-primary-highlight);
}
.tds-link--secondary:is(:hover, .tds--hover):not([disabled], .tds--disabled) {
color: var(--tds-theme-foreground);
}
.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;
}
.tds-link--interaction:is(:hover, .tds--hover):not(
[disabled],
.tds--disabled
) {
box-shadow: var(--tds-link--box-shadow--none);
color: var(--tds-theme-foreground-high-contrast);
}
}
.tds-link--icon-leading {
margin-inline-start: 28px;
}
.tds-link--icon-trailing {
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--icon-leading > .tds-icon,
.tds-link > .tds-icon--inline:first-child {
left: var(--tds-link--icon-margin);
}
.tds-link--icon-trailing > .tds-icon,
.tds-link > .tds-icon--inline:last-child {
right: var(--tds-link--icon-margin);
}
[dir="rtl"] .tds-link--icon-leading > .tds-icon,
[dir="rtl"] .tds-link > .tds-icon--inline:first-child {
left: unset;
right: var(--tds-link--icon-margin);
}
[dir="rtl"] .tds-link--icon-trailing > .tds-icon,
[dir="rtl"] .tds-link > .tds-icon--inline:last-child {
left: var(--tds-link--icon-margin);
right: unset;
}
.tds-list {
--tds-list--separator-color: var(--tds-color--secondary-accent);
--tds-list--timeline-color: var(--tds-theme-foreground);
--tds-list-item--margin-block: var(--tds-size--1x);
--tds-list-item--padding-inline: 0;
list-style-type: none;
margin: 0;
padding: 0;
}
.tds-list + p,
p + .tds-list {
padding-block-start: var(--tds-paragraph-gap);
}
.tds-list--ordered,
.tds-list--padded,
.tds-list--timeline,
.tds-list--unordered {
--tds-list-item--padding-inline: var(--tds-size--half);
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;
}
.tds--vertical-rhythm .tds-list > .tds-list {
--tds-spacer-top: 0;
}
.tds-list--light {
--tds-list--timeline-color: var(--tds-color--secondary-accent);
}
.tds-list--caption {
--tds-list--timeline-color: var(--tds-theme-border);
--tds-list-item--margin-block: var(--tds-size--half);
font-size: 12px;
}
.tds-list > :is(li, dd) {
padding-inline: var(--tds-list-item--padding-inline)
var(--tds-list-item--padding-inline);
position: relative;
}
.tds-list--horizontal > li {
display: inline-block;
}
:is(.tds-list--light, .tds-list--caption) > li {
color: var(--tds-theme-foreground-low-contrast);
}
.tds-list > :is(li, dd):not(:last-of-type) {
margin-block-end: var(--tds-list-item--margin-block);
}
@media (min-width: 600px) {
.tds-list--horizontal > li:not(:last-of-type) {
margin-block-end: 0;
margin-inline-end: calc(var(--tds-list-item--margin-block) + 0.5em);
}
}
.tds-list > li > .tds-icon:first-child {
--tds-icon--list-inset: calc(
var(--tds-size--3x) / 2 * -1 - var(--tds-icon--size) / 2 - 1px
);
background-color: var(
--tds-theme-background,
var(--tds-theme-foreground-on-primary)
);
left: var(--tds-icon--list-inset);
position: absolute;
top: calc(var(--tds-size--1x) + 2px);
transform: translateY(-50%);
transition: background-color 0.3s ease;
z-index: 1;
}
[dir="rtl"] .tds-list > li > .tds-icon:first-child {
left: auto;
right: var(--tds-icon--list-inset);
}
.tds-modal .tds-list > li > .tds-icon:first-child {
background-color: var(--tds-theme-background-dialog);
}
.tds-card:not(.tds-card--outline, .tds-scrim--white .tds-card--highlighted)
.tds-list
> li
> .tds-icon:first-child {
background-color: var(--tds-theme-background-container);
}
.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 {
margin-block-end: var(--tds-list-item--margin-block);
}
.tds-list--small-borders > li:before {
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 {
margin-block-end: var(--tds-list-item--margin-block);
}
.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);
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-listbox {
--tds-listbox--padding-block: var(--tds-size--2x);
border-radius: var(--tds-border-radius--outline-only);
max-block-size: 300px;
overflow-y: auto;
scroll-behavior: auto;
}
.tds-dropdown.tds-tooltip > .tds-listbox {
padding: var(--tds-listbox--padding-block) 0;
}
.tds-listbox-search {
border-block-end: 1px solid var(--tds-theme-background-container-alt);
padding: var(--tds-size--half) var(--tds-size--2x);
}
.tds-tooltip > .tds-listbox-search:first-child {
padding-block-start: var(--tds-size--half);
}
.tds-listbox-search .tds-form-input:focus-within {
outline: none;
}
.tds-listbox-search:has(.tds-form-input-search:focus-visible) ~ .tds-listbox {
outline: var(--tds-outline--focus);
}
.tds-dropdown.tds-tooltip
.tds-listbox-search:has(.tds-form-input-search:focus-visible)
~ .tds-listbox {
outline: none;
}
.tds-listbox-option,
.tds-listbox-option--add {
--tds-form--indent: var(--tds-component-pill-padding-inline);
align-items: center;
background-color: initial;
cursor: pointer;
display: flex;
inline-size: 100%;
justify-content: space-between;
margin: 0;
max-inline-size: 100%;
min-block-size: var(--tds-size--4x);
outline-offset: -2px;
padding: var(--tds-size--half) var(--tds-form--indent);
text-align: start;
transition: background-color 0.3s ease;
}
.tds-listbox-option--add {
border-block-start: solid;
border-color: var(--tds-theme-border-low-contrast);
border-width: 1px;
}
.tds-listbox-group {
--tds-form--indent: var(--tds-component-pill-padding-inline);
align-items: center;
background-color: initial;
cursor: pointer;
display: flex;
inline-size: 100%;
justify-content: space-between;
margin: 0;
max-inline-size: 100%;
min-block-size: var(--tds-size--4x);
outline-offset: -2px;
padding: var(--tds-size--half) var(--tds-form--indent);
text-align: start;
transition: background-color 0.3s ease;
}
.tds-listbox .tds-listbox--lined:not(:last-child) {
border-block-end: solid;
border-color: var(--tds-theme-border-low-contrast);
border-width: 1px;
}
.tds-listbox-group--single {
--tds-form--indent: var(--tds-component-pill-padding-inline);
align-items: center;
background-color: initial;
border-block-end: solid;
border-block-end-width: 1px;
border-color: var(--tds-theme-border-low-contrast);
display: flex;
inline-size: 100%;
justify-content: space-between;
margin: 0;
max-inline-size: 100%;
min-block-size: var(--tds-size--4x);
outline-offset: -2px;
padding: var(--tds-size--half) var(--tds-form--indent);
text-align: start;
transition: background-color 0.3s ease;
}
.tds-listbox .tds-listbox-group--option {
--tds-form--indent: 50px;
}
.tds-listbox-group:is(.tds--disabled, [aria-disabled="true"]),
.tds-listbox-option:is(.tds--disabled, [aria-disabled="true"]) {
cursor: not-allowed;
}
.tds-density--dense .tds-listbox-group--multiselect,
.tds-density--dense .tds-listbox-option,
.tds-density--dense.tds-listbox-group--multiselect,
.tds-density--dense.tds-listbox-option {
--tds-form--indent: var(--tds-size--2x);
}
.tds-density--dense .tds-listbox-group--option,
.tds-density--dense.tds-listbox-group--option {
--tds-form--indent: var(--tds-size--5x);
}
[aria-multiselectable="true"] .tds-listbox-group,
[aria-multiselectable="true"] .tds-listbox-option,
[aria-multiselectable="true"] .tds-listbox-option--add {
justify-content: flex-start;
}
.tds-listbox-group--multiselect,
.tds-listbox-option:focus {
outline: none;
}
.tds-listbox-option:is(:focus-visible, .tds--focus) {
border-radius: var(--tds-size--half);
outline: var(--tds-outline--focus);
}
.tds--indicate-focus .tds-listbox-group:is(:focus, .tds--focus),
.tds--indicate-focus .tds-listbox-option--add:is(:focus, .tds--focus),
.tds--indicate-focus .tds-listbox-option:is(:focus, .tds--focus) {
border-radius: var(--tds-size--half);
outline: var(--tds-outline--focus);
}
.tds-listbox-group:is(:hover, .tds--hover):not(
.tds--disabled,
[aria-disabled="true"]
),
.tds-listbox-option--add:is(:hover, .tds--hover):not(
.tds--disabled,
[aria-disabled="true"]
),
.tds-listbox-option:is(:hover, .tds--hover):not(
.tds--disabled,
[aria-disabled="true"]
) {
background-color: var(--tds-theme-background-container-alt);
}
.tds-listbox-group.tds--selected,
.tds-listbox-option.tds--selected {
background-color: var(--tds-theme-background-container-alt-highlight);
}
.tds-listbox-group .tds-multiselect-icon,
.tds-listbox-group .tds-singleselect-icon,
.tds-listbox-option .tds-multiselect-icon,
.tds-listbox-option .tds-singleselect-icon {
color: #0000;
position: relative;
transform: scale(0);
transition: color 0.3s ease, transform 0.3s ease;
}
.tds--selected .tds-multiselect-icon.tds-icon,
.tds--selected .tds-singleselect-icon.tds-icon,
.tds--selected tds-icon.tds-multiselect-icon,
.tds--selected tds-icon.tds-singleselect-icon {
color: currentcolor;
transform: scale(1);
}
.tds-singleselect-icon {
margin-inline-start: var(--tds-size--1x);
top: 0;
}
.tds-multiselect-box {
border: 1px solid var(--tds-theme-border);
border-radius: var(--tds-size--half);
}
.tds-addoption-box,
.tds-multiselect-box {
block-size: calc(var(--tds-size--2x) + 2px);
display: inline-block;
inline-size: calc(var(--tds-size--2x) + 2px);
margin-inline-end: 12px;
pointer-events: none;
transition: border-color 0.3s ease;
}
.tds--selected .tds-multiselect-box {
border-color: var(--tds-theme-foreground-high-contrast);
}
.tds-loader {
background-color: var(--tds-color--scrim--semitransparent);
inset: 0;
opacity: 0;
pointer-events: none;
position: absolute;
transition: opacity 0.5s ease;
z-index: 1010;
}
.tds-loader--fullscreen {
position: fixed;
}
.tds-loader--show {
opacity: 1;
pointer-events: inherit;
}
.tds-loader .tds-icon {
inset: 0;
margin: auto;
position: absolute;
}
.tds-loader .tds-icon-loader {
--tds-icon--size: var(--tds-size--6x);
animation: var(--tds--rotating);
border-radius: 50%;
opacity: var(--tds-ui-opacity-70);
overflow: hidden;
}
.tds-loader .tds-icon-logo {
animation: var(--tds--pulsing);
color: var(--tds-theme-foreground-low-contrast);
}
.tds-loader-container {
position: relative;
}
.tds-locale-selector {
display: flex;
inline-size: 100%;
justify-content: center;
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 {
background-color: initial;
cursor: pointer;
display: flex;
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 {
column-count: 2;
column-gap: var(--tds-size--2x);
margin-inline-end: -12px;
margin-inline-start: -12px;
}
.tds-locale-selector--narrow .tds-locale-selector-region {
column-count: 1;
}
.tds-locale-selector-region-name {
padding-block-end: 12px;
padding-block-start: var(--tds-size--2x);
}
.tds-locale-selector--narrow
.tds-locale-selector-column:first-child
.tds-locale-selector-superregion:first-child
> .tds-locale-selector-region-name {
padding-block-start: 0;
}
.tds-locale-selector-country {
break-inside: avoid;
flex-flow: row wrap;
transition: background-color 0.33s ease;
}
.tds-locale-selector-country:not(:last-child) {
margin-block-end: var(--tds-size--half);
}
.tds-card.tds-locale-selector-country,
.tds-card.tds-locale-selector-trigger {
background-color: initial;
border-radius: var(--tds-border-radius--card);
}
.tds-card.tds-locale-selector-country,
.tds-card.tds-locale-selector-trigger .tds-card-body {
padding: var(--tds-size--1x) 12px;
}
.tds-card.tds-locale-selector-trigger .tds-card-body {
padding-inline-start: var(--tds-size--1x);
}
.tds-card.tds-locale-selector-trigger .tds-icon {
margin-block-start: calc(var(--tds-size--1x) - 2px);
margin-inline-start: 12px;
}
.tds-locale-selector-trigger:focus {
outline: none;
}
.tds--indicate-focus .tds-locale-selector-trigger:focus {
outline: var(--tds-outline--focus);
}
@media (hover: hover) {
.tds-card.tds-locale-selector-country:hover,
.tds-card.tds-locale-selector-trigger:hover {
background-color: var(--tds-theme-background-container);
}
}
.tds-card.tds-locale-selector-country--selected {
background-color: var(--tds-theme-background-container);
}
.tds-locale-selector-language {
font-size: 12px;
margin-block-start: 2px;
}
.tds-locale-selector-language:not(:last-child) {
margin-inline-end: var(--tds-size--2x);
}
.tds-locale-selector-language--selected {
color: var(--tds-theme-foreground-high-contrast);
pointer-events: none;
}
@media (max-width: 1240px) {
.tds-locale-selector {
flex-direction: column;
justify-content: flex-start;
}
}
@media (max-width: 599px) {
.tds-locale-selector-region {
column-count: 1;
}
.tds-locale-selector-column:first-child
.tds-locale-selector-superregion:first-child
> tds-locale-selector-region-name {
padding-block-start: 0;
}
}
.tds-card.tds-locale-selector-country .tds-text--h6 {
inline-size: 100%;
}
.tds-card.tds-locale-selector-country > .tds-list {
margin: 0;
}
@media (min-width: 1200px) {
.tds-locale-selector.tds-locale-selector--multicolumn {
flex-direction: row;
gap: var(--tds-size--3x);
inline-size: auto;
margin: 0 -12px;
max-inline-size: inherit;
padding: 0;
}
.tds-locale-selector--multicolumn .tds-locale-selector-column {
flex-basis: 25%;
inline-size: auto;
max-inline-size: 100%;
}
.tds-locale-selector--multicolumn .tds-locale-selector-column--europe {
flex-basis: 50%;
}
.tds-locale-selector--multicolumn .tds-locale-selector-region {
column-count: 1;
}
.tds-locale-selector--multicolumn
.tds-locale-selector-superregion--europe
.tds-locale-selector-region {
column-count: 2;
}
.tds-locale-selector--multicolumn .tds-locale-selector-country {
max-inline-size: 240px;
}
.tds-locale-selector--multicolumn .tds-locale-selector-region-name {
padding-block-start: var(--tds-size--3x);
}
.tds-locale-selector--multicolumn
.tds-locale-selector-superregion:first-child
.tds-locale-selector-region-name {
padding-block-start: var(--tds-size--half);
}
}
@media (min-width: 1440px) {
.tds-locale-selector--multicolumn
.tds-locale-selector-superregion--europe
.tds-locale-selector-region {
column-count: 3;
}
}
.tds-media-player {
--tds-media-player--color: var(--tds-color-white, #fff);
visibility: hidden;
}
.tds-media-player.ready {
visibility: visible;
}
.tds-media-player .tds-form-label {
padding: 0;
}
.tds-media-player-range {
--tds-form-item--grid-template-areas: "label input";
align-items: center;
display: grid;
grid-template-columns: min-content 1fr;
grid-template-rows: unset;
}
.tds-media-player-range .tds-form-label-wrap {
--tds-form-label--color: var(--tds-media-player--color, #fff);
padding-inline-end: 12px;
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,
.tds-media-player
[aria-pressed="true"]
.tds-icon.tds-icon-speaker--high
> g:is(:last-of-type),
.tds-media-player
[aria-pressed="true"]
.tds-icon.tds-icon-speaker--low
> g:not(:first-of-type, :last-of-type),
.tds-media-player
[aria-pressed="true"]
.tds-icon:not(.tds-icon-speaker)
> g:last-of-type {
display: initial;
}
.tds-menu {
display: inline;
}
.tds-menu--content {
inline-size: max-content;
position: relative;
}
.tds-menu-wrapper {
display: inline-block;
}
.tds-menu--inline .tds-site-nav-item {
--tds-nav-item--padding-inline: var(--tds-size--1x);
--tds-nav-item--padding-block: 0px;
min-block-size: auto;
}
.tds-menu-btn {
border-radius: var(--tds-border-radius--pill);
transition: background 0.33s ease;
}
.tds-menu-btn--active,
.tds-menu-btn:hover {
background: var(--tds-theme-background-container-alt);
}
.tds-menu .tds-tooltip {
--tds-tooltip--padding: 0;
max-inline-size: unset;
padding: unset;
}
.tds-modal--is-open {
overflow: hidden;
}
.tds-modal {
--tds-modal-border-radius: var(--tds-size--1x);
background-color: var(--tds-theme-background-dialog);
block-size: var(--tds-modal--height);
border: none;
border-radius: var(--tds-modal-border-radius) var(--tds-modal-border-radius) 0
0;
bottom: 0;
box-shadow: var(--tds-box-shadow--large-reverse);
color: var(--tds-theme-foreground);
display: flex;
flex-direction: column;
inline-size: var(--tds-modal--width);
left: 0;
max-block-size: calc(100% - var(--tds-size--3x));
overflow-y: auto;
overscroll-behavior: contain;
padding: 0;
position: fixed;
right: 0;
z-index: 1000;
}
.tds-modal img {
display: block;
min-inline-size: 100%;
}
.tds-modal--fullscreen,
.tds-modal--sheet-left,
.tds-modal--sheet-right {
--tds-modal--height: 100%;
--tds-modal--height: 100dvh;
border-radius: 0;
bottom: 0;
max-block-size: var(--tds-modal--height);
min-block-size: var(--tds-modal--height);
top: 0;
}
.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;
}
.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;
}
.tds-modal:not([open]) {
opacity: 0;
pointer-events: none;
transition: opacity 0.5s var(--tds-bezier), transform 0.5s var(--tds-bezier),
visibility 0s 0.5s;
visibility: hidden;
}
.tds-modal--fullscreen:not([open]),
.tds-modal:not([open]) {
transform: translateX(0) translateY(50%);
}
.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);
}
.tds-modal[open] {
opacity: 1;
pointer-events: inherit;
transform: translateX(0) translateY(0);
transition: opacity 0.5s var(--tds-bezier), transform 0.5s var(--tds-bezier),
visibility 0s 0s;
visibility: inherit;
}
@media (max-width: 599px) {
.tds-component-preview,
:root {
--tds-modal--height: auto;
--tds-modal--width: 100vw;
}
.tds-modal {
min-block-size: 25vh;
}
}
@media (min-width: 600px) {
.tds-component-preview,
:root {
--tds-modal--height: auto;
--tds-modal--width: 772px;
}
.tds-modal {
--tds-modal-border-radius: var(--tds-size--2x);
border-radius: var(--tds-modal-border-radius);
bottom: 50%;
box-shadow: var(--tds-box-shadow--large);
margin: auto;
max-block-size: calc(100% - var(--tds-size--12x));
max-inline-size: calc(100vw - var(--tds-size--12x));
min-block-size: var(--tds-size--8x);
}
.tds-modal--fullscreen,
.tds-modal--sheet-left,
.tds-modal--sheet-right {
border-radius: 0;
bottom: 0;
max-block-size: 100vh;
}
.tds-modal--fullscreen {
max-inline-size: 100vw;
}
.tds-modal:not([open]) {
transform: translateX(0) translateY(100%);
}
.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);
}
.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);
}
}
dialog.tds-modal::backdrop {
display: none !important;
}
.tds-modal-backdrop {
--tds-modal-backdrop--opacity: 0;
background-color: rgb(0 0 0 / var(--tds-modal-backdrop--opacity));
block-size: 120vh;
inline-size: 120vw;
left: 50%;
position: fixed;
top: 50%;
transform: translate(-50%, -50%);
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;
z-index: 999;
}
.tds-modal:not([open]) + .tds-modal-backdrop {
-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;
}
.tds-modal-header {
align-items: flex-start;
background-color: var(--tds-theme-background-dialog);
box-shadow: 0 -2px 0 0 var(--tds-theme-background-dialog);
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
padding: var(--tds-size--2x);
padding-inline-start: var(--tds-size--3x);
position: sticky;
top: 0;
z-index: 10;
}
.tds-modal-close {
appearance: none;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
background-color: initial;
border: none;
border-radius: var(--tds-border-radius--pill);
cursor: pointer;
outline: none;
padding: var(--tds-size--1x);
transition: background-color 0.33s ease;
z-index: 10;
}
[dir="rtl"] .tds-modal-close {
left: 0;
right: auto;
}
.tds-modal-close:hover {
background-color: var(--tds-theme-background-container-alt);
}
.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: rgb(var(--tds-color--rgb-shade) 0.16);
}
.tds-modal-close--over-image .tds-modal-close-icon {
color: var(--tds-theme-foreground-on-primary);
}
.tds-modal-header > :is(h1, h2, h3) {
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 {
background-color: var(--tds-theme-background-dialog);
bottom: calc(var(--tds-size--3x) * -1);
padding: var(--tds-size--3x) var(--tds-size--3x) var(--tds-size--6x);
position: sticky;
transition: padding 0.33s var(--tds-bezier);
z-index: 11;
}
.tds-modal--scrolling .tds-modal-header > :is(h1, h2, h3) {
font-size: var(--tds-font-size-40);
line-height: var(--tds-line-height-50);
padding-block-start: var(--tds-size--1x);
}
.tds-modal-content {
padding: 0 var(--tds-size--3x) var(--tds-size--6x);
}
.tds-modal-header + .tds-modal-content {
padding-block-start: var(--tds-size--half);
}
.tds-modal-content:not(:last-child) {
padding-block-end: var(--tds-size--half);
}
.tds-modal-overflow--visible {
overflow-y: visible;
}
.tds-modal-overflow--visible .tds-modal-header {
border-radius: var(--tds-modal-border-radius) var(--tds-modal-border-radius) 0
0;
position: unset;
}
.tds-modal-overflow--visible .tds-modal-footer {
border-radius: 0 0 var(--tds-modal-border-radius)
var(--tds-modal-border-radius);
position: unset;
}
@media (min-width: 600px) {
.tds-modal-header {
padding-inline-start: var(--tds-size--6x);
}
.tds-modal-content,
.tds-modal-footer {
padding-inline: var(--tds-size--6x) var(--tds-size--6x);
}
.tds-modal--sheet-small .tds-modal-content,
.tds-modal--sheet-small .tds-modal-footer {
padding-inline: var(--tds-size--4x) var(--tds-size--4x);
}
}
.tds-modal .tds-status_msg {
--tds-card--background-color: var(--tds-theme-background-container-alt);
}
.tds-modal .tds-card.tds-locale-selector-country--selected {
background-color: var(--tds-theme-background-container-alt);
}
.tds-modal
.tds-chip:not(
.tds-chip--unencapsulated,
[class*="tds-chip--color"],
[class*="tds-chip--grey"],
[class*="tds-chip--green"],
[class*="tds-chip--teal"],
[class*="tds-chip--blue"],
[class*="tds-chip--purple"],
[class*="tds-chip--magenta"],
[class*="tds-chip--red"],
[class*="tds-chip--orange"],
[class*="tds-chip--yellow"]
) {
--tds-chip--background-color: var(
--tds-theme-background-container-alt-highlight
);
}
.tds-density--default,
.tds-page-layout--medium-space,
:root {
--tds-page-layout--footer-start-space: var(--tds-size--12x);
--tds-page-layout--title-end-space: var(--tds-size--4x);
--tds-page-layout--title-start-space: var(--tds-size--6x);
--tds-page-layout--title-top-slot-space: var(--tds-size--1x);
}
.tds-page-layout--large-space {
--tds-page-layout--footer-start-space: 128px;
--tds-page-layout--title-end-space: var(--tds-size--6x);
--tds-page-layout--title-start-space: var(--tds-size--8x);
}
.tds-density--dense,
.tds-page-layout--small-space {
--tds-page-layout--footer-start-space: var(--tds-size--8x);
--tds-page-layout--title-end-space: var(--tds-size--3x);
--tds-page-layout--title-start-space: var(--tds-size--4x);
--tds-page-layout--title-top-slot-space: var(--tds-size--half);
}
.tds-page-layout {
grid-gap: 0 var(--tds-size--3x);
display: grid;
grid-template-areas: "title title" "open open" "main main" "aside aside";
grid-template-columns: repeat(2, 1fr);
grid-template-rows: min-content min-content 1fr min-content;
margin-block-end: var(--tds-page-layout--footer-start-space);
padding-inline-end: var(--tds-content_container--gutter);
padding-inline-start: var(--tds-content_container--gutter);
}
.tds-content_container .tds-page-layout {
padding-inline-end: 0;
padding-inline-start: 0;
}
.tds-page-aside {
grid-area: aside;
}
.tds-page-open {
grid-area: open;
}
.tds-page-title {
display: grid;
grid-area: title;
grid-template: "top" "text" "bottom" "trailing";
grid-template-rows: var(--tds-page-layout--title-start-space) auto auto auto;
margin-block-end: var(--tds-page-layout--title-end-space);
}
.tds-page-title-top {
align-items: flex-end;
display: flex;
grid-area: top;
padding-block-end: var(--tds-page-layout--title-top-slot-space);
padding-block-start: var(--tds-page-layout--title-top-slot-space);
}
.tds-page-title-text {
grid-area: text;
}
h1.tds-page-title-text {
padding-block-end: 0;
padding-block-start: 0;
}
.tds-page-title-trailing {
align-self: center;
grid-area: trailing;
margin-block-start: var(--tds-size--2x);
}
.tds-page-title-bottom {
grid-area: bottom;
padding-block-start: var(--tds-size--2x);
}
.tds-page-title-bottom .tds-status_msg,
.tds-page-title-trailing .tds-btn_group {
margin: 0;
}
@media (min-width: 600px) {
.tds-page-layout--narrow-main {
grid-template-areas: ". title title title title title title title title title title ." ". main main main main main main main main main main .";
grid-template-columns: repeat(12, 1fr);
grid-template-rows: min-content 1fr;
}
.tds-page-layout--content-level-aside {
grid-template-areas: "title title title title title title title title title title title title" "aside aside aside open open open open open open open open open" "aside aside aside main main main main main main main main main";
}
.tds-page-layout--content-level-aside,
.tds-page-layout--top-level-aside {
grid-template-columns: repeat(12, 1fr);
grid-template-rows: min-content min-content 1fr;
}
.tds-page-layout--top-level-aside {
grid-template-areas: "aside aside aside title title title title title title title title title" "aside aside aside open open open open open open open open open" "aside aside aside main main main main main main main main main";
}
.tds-page-title {
grid-template-areas: "top ." "text trailing" "bottom .";
grid-template-rows: var(--tds-page-layout--title-start-space) auto auto;
}
.tds-page-title-trailing {
align-items: center;
display: flex;
justify-content: flex-end;
margin-block-start: 0;
margin-inline-start: var(--tds-size--3x);
}
}
@media (min-width: 1200px) {
.tds-page-layout--narrow-main {
grid-template-areas: ". . title title title title title title title title . ." ". . main main main main main main main main . .";
grid-template-columns: repeat(12, 1fr);
grid-template-rows: min-content 1fr;
}
.tds-page-layout--content-level-aside.tds-page-layout--narrow-main {
grid-template-areas: "title title title title title title title title title title title title" "aside aside aside main main main main main main open open open";
grid-template-columns: repeat(12, 1fr);
grid-template-rows: min-content 1fr;
}
.tds-page-layout--top-level-aside.tds-page-layout--narrow-main {
grid-template-areas: "aside aside aside title title title title title title title title title" "aside aside aside main main main main main main open open open";
grid-template-columns: repeat(12, 1fr);
grid-template-rows: min-content 1fr;
}
}
.tds-page-main {
grid-area: main;
}
@media (min-width: 600px) {
.tds-page-layout--top-level-aside .tds-page-aside {
margin-block-start: var(--tds-page-layout--title-start-space);
}
}
.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-theme-foreground);
font-weight: var(--tds-font-weight-medium);
}
.tds-pagination-navigation {
line-height: normal;
}
.tds-pagination-navigation[aria-disabled="true"] {
box-shadow: 0 0 0 #0000;
cursor: not-allowed;
opacity: var(--tds-ui-opacity-50);
pointer-events: none;
}
.tds-pagination select {
background-color: initial;
border: 0;
border-radius: var(--tds-border-radius--outline-only);
color: var(--tds-theme-foreground);
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);
}
.tds-pagination .tds-pagination-current select {
appearance: none;
padding-inline-end: var(--tds-size--3x);
position: relative;
}
.tds-pagination-primary .tds-pagination-current select {
padding-inline-start: var(--tds-size--1x);
}
.tds-pagination-secondary .tds-pagination-current select {
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 .tds-icon {
pointer-events: none;
position: absolute;
right: var(--tds-size--half);
top: calc(50% - 5px);
z-index: 0;
}
@media (max-width: 599px) {
.tds-pagination select {
font-size: var(--tds-size--2x);
}
}
@media (min-width: 600px) {
.tds-pagination-primary .tds-pagination-current,
.tds-pagination-primary > select {
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: max-content;
white-space: nowrap;
}
.tds-pagination-secondary--value {
color: var(--tds-theme-foreground);
}
.tds-pagination-navigation + .tds-pagination-navigation {
margin-inline-start: var(--tds-size--3x);
position: relative;
}
button.tds-pagination-navigation:has(+ .tds-pagination-navigation) {
margin-inline-end: 2px;
}
.tds-pagination-navigation + .tds-pagination-navigation:before {
background-color: var(--tds-theme-foreground-high-contrast);
block-size: 100%;
content: "";
display: block;
inline-size: 1px;
inset-inline-start: -14px;
position: absolute;
top: 0;
}
@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-theme-foreground);
}
}
.tds-density--dense .tds-pagination,
.tds-density--dense .tds-pagination p {
font-size: var(--tds-font-size-20);
line-height: var(--tds-line-height-30);
}
@media (min-width: 900px) {
.tds-density--dense .tds-pagination {
--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-items: center;
display: flex;
place-content: center center;
}
.tds-pagination .tds-pagination-current tds-icon .tds-icon {
top: calc(50% - 8px);
}
:root {
--tds-popover-trigger-gap: var(--tds-size--1x);
}
.tds-popover-container {
position: relative;
}
.tds-popover-container--inline {
display: inline-block;
}
.tds-popover-container--embedded {
display: flex;
}
.tds-popover-container--embedded.tds-popover-container--inline {
display: inline-flex;
}
.tds-popover-container--embedded.tds-popover-container--anchor-side-inline-start {
flex-direction: row-reverse;
}
.tds-popover-container--embedded.tds-popover-container--anchor-side-inline-end {
flex-direction: row;
}
.tds-popover-container--embedded.tds-popover-container--anchor-side-block-start {
flex-direction: column-reverse;
}
.tds-popover-container--embedded.tds-popover-container--anchor-side-block-end {
flex-direction: column;
}
.tds-popover {
--tds-popover-center-value: 50%;
text-wrap: initial;
background-color: var(--tds-theme-background-dialog);
border-radius: var(--tds-border-radius--card);
box-shadow: var(--tds-box-shadow--medium);
color: var(--tds-theme-foreground);
font-family: var(--tds-font-family-base);
font-size: var(--tds-base-font_size);
font-weight: 400;
inset: unset;
line-height: var(--tds-base-line_height);
margin: unset;
opacity: 0;
pointer-events: none;
position: absolute;
text-align: initial;
transition: opacity 0.33s ease, transform 0.33s ease;
z-index: 15;
}
[class*="tds-popover-container--anchor-side-inline-"] .tds-popover {
top: var(--tds-popover-center-value);
transform: translateY(calc(var(--tds-popover-center-value) * -1))
translateX(var(--tds-popover-animation-space));
}
.tds-popover-container--anchor-side-inline-start .tds-popover {
inset-inline-end: calc(100% + var(--tds-popover-trigger-gap));
}
.tds-popover-container--anchor-side-inline-end .tds-popover {
inset-inline-start: calc(100% + var(--tds-popover-trigger-gap));
}
[class*="tds-popover-container--anchor-side-block-"] .tds-popover {
left: var(--tds-popover-center-value);
transform: translateX(calc(var(--tds-popover-center-value) * -1))
translateY(var(--tds-popover-animation-space));
}
.tds-popover-container--anchor-side-block-start .tds-popover {
inset-block-end: calc(100% + var(--tds-popover-trigger-gap));
}
.tds-popover-container--anchor-side-block-end .tds-popover {
inset-block-start: calc(100% + var(--tds-popover-trigger-gap));
}
:where(
.tds-popover-container--anchor-side-inline-start,
.tds-popover-container--anchor-side-block-start
)
.tds-popover {
--tds-popover-animation-space: var(--tds-popover-trigger-gap);
}
:where(
.tds-popover-container--anchor-side-inline-end,
.tds-popover-container--anchor-side-block-end
)
.tds-popover {
--tds-popover-animation-space: calc(var(--tds-popover-trigger-gap) * -1);
}
[class*="tds-popover-container--anchor-side-"] [class*="tds-popover--align-"] {
--tds-popover-center-value: 0%;
}
[class*="tds-popover-container--anchor-side-inline-"]
[class*="tds-popover--align-"] {
top: unset;
}
[class*="tds-popover-container--anchor-side-block-"]
[class*="tds-popover--align-"] {
left: unset;
}
[class*="tds-popover-container--anchor-side-inline-"]
.tds-popover--align-start {
inset-block-start: 0;
}
[class*="tds-popover-container--anchor-side-inline-"] .tds-popover--align-end {
inset-block-end: 0;
}
[class*="tds-popover-container--anchor-side-inline-"]
.tds-popover--align-full-width {
inset-block: 0 0;
}
[class*="tds-popover-container--anchor-side-block-"] .tds-popover--align-start {
inset-inline-start: 0;
}
[class*="tds-popover-container--anchor-side-block-"] .tds-popover--align-end {
inset-inline-end: 0;
}
[class*="tds-popover-container--anchor-side-block-"]
.tds-popover--align-full-width {
inset-inline: 0 0;
}
.tds-popover-container--embedded .tds-popover {
background-color: unset;
border-radius: unset;
box-shadow: unset;
display: none;
inset: unset;
order: 2;
position: unset;
transform: unset;
}
.tds-popover-container--embedded [data-tds-popover-trigger] {
order: 1;
}
.tds-popover--open {
--tds-popover-animation-space: 0;
opacity: 1;
pointer-events: inherit;
}
.tds-popover-container--embedded .tds-popover--open {
display: block;
}
.tds-popover:before {
content: "";
display: block;
inset: calc(var(--tds-popover-trigger-gap) * -1);
position: absolute;
}
.tds-popover-container--embedded .tds-popover:before {
display: none;
}
.tds-popover--content {
inline-size: max-content;
position: relative;
}
.tds-selector {
--tds-selector-font-color--selected: var(--tds-color-white);
grid-gap: var(--tds-size--1x) calc(var(--tds-size--1x) * 1.5);
display: grid;
grid-template-columns: repeat(
var(--tds-column-count, auto-fill),
var(--tds-column-width, minmax(200px, 1fr))
);
justify-items: stretch;
padding: var(--tds-size--1x) 0 12px;
}
.tds-density--dense .tds-selector {
--tds-height--pill: var(--tds-size--4x);
}
.tds-scrim--black:is(.tds-theme--replicant, .tds-theme--marketing)
.tds-selector,
:is(.tds-theme--replicant, .tds-theme--marketing)
.tds-scrim--black
.tds-selector {
--tds-selector-font-color--selected: var(--tds-color-grey-20);
}
.tds-selector--col4 {
--tds-column-count: 4;
--tds-column-width: minmax(max-content, 1fr);
}
.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;
user-select: none;
}
.tds-selector-label:hover {
background-color: var(--tds-theme-background-container);
}
.tds-selector-input:checked + .tds-selector-label {
background-color: var(--tds-theme-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-theme-primary-highlight);
}
.tds-selector-input:focus-visible + .tds-selector-label {
outline: var(--tds-outline--focus);
}
.tds--indicate-focus .tds-selector-input:focus + .tds-selector-label {
outline: var(--tds-outline--focus);
}
.tds-stepper {
--tds-stepper--stroke: calc(var(--tds-size--half) / 2);
--tds-stepper--circle-stroke: calc(var(--tds-size--half) / 2);
--tds-stepper--line-top: 0;
--tds-stepper--line-left: calc(
var(--tds-icon--size) / 2 - var(--tds-stepper--stroke) / 2
);
--tds-stepper--mask-color: var(
--tds-theme-background,
var(--tds-color-white)
);
--tds-stepper--icon-color: var(--tds-theme-border);
--tds-stepper--text-color: var(--tds-theme-foreground-low-contrast);
--tds-stepper--line-mask-end: calc(50% + var(--tds-icon--size) / 2);
position: relative;
}
.tds-modal .tds-stepper {
--tds-stepper--mask-color: var(
--tds-theme-background-dialog,
var(--tds-theme-background, var(--tds-color-white))
);
}
.tds-stepper:before {
background-color: var(--tds-color--tertiary-highlight);
block-size: 100%;
content: "";
inline-size: var(--tds-stepper--stroke);
left: var(--tds-stepper--line-left);
position: absolute;
top: var(--tds-stepper--line-top);
}
[dir="rtl"] .tds-stepper:before {
right: var(--tds-stepper--line-left);
}
.tds-stepper-item,
.tds-stepper-item-action {
align-items: start;
border-radius: var(--tds-size--1x);
color: var(--tds-stepper--icon-color);
column-gap: var(--tds-size--2x);
display: grid;
grid-template: "circle text" min-content/var(--tds-icon--size) max-content;
position: relative;
text-align: start;
}
.tds-stepper-item:not(:first-of-type) {
margin-block-start: var(--tds-size--3x);
}
.tds-stepper-item-action {
grid-area: circle/circle/text/text;
}
.tds--indicate-focus .tds-stepper-item-action:focus {
outline: var(--tds-outline--focus);
z-index: 1;
}
.tds-stepper-item .tds-icon {
background-color: var(--tds-stepper--mask-color);
grid-area: circle;
}
.tds-stepper-item-text {
align-items: center;
color: var(--tds-stepper--text-color);
display: flex;
grid-area: text;
min-block-size: var(--tds-icon--size);
padding-inline-end: 3px;
}
.tds-stepper-item--current {
--tds-stepper--circle-stroke: var(--tds-size--half);
--tds-stepper--icon-color: var(--tds-theme-foreground-low-contrast);
--tds-stepper--text-color: var(--tds-theme-foreground-high-contrast);
}
.tds-stepper-item--complete {
--tds-stepper--icon-color: var(--tds-color-green);
}
.tds-stepper-item--disabled {
--tds-stepper--icon-color: var(--tds-color--tertiary-highlight);
--tds-stepper--text-color: var(--tds-color--tertiary-highlight);
}
.tds-stepper-item--error {
--tds-stepper--icon-color: var(--tds-theme-secondary-negative);
--tds-stepper--text-color: var(--tds-theme-secondary-negative);
}
.tds-stepper-item-action:before,
.tds-stepper-item:before {
background-color: var(--tds-stepper--mask-color);
block-size: var(--tds-size--2x);
border: var(--tds-size--half) solid var(--tds-stepper--mask-color);
border-radius: 50%;
box-shadow: inset 0 0 0 var(--tds-stepper--circle-stroke) currentcolor;
box-sizing: unset;
content: "";
grid-area: circle;
inline-size: var(--tds-size--2x);
}
@media (min-width: 600px) {
.tds-stepper:not(.tds-stepper--vertical) {
--tds-stepper--icon-grid-area-height: calc(
var(--tds-size--4x) - var(--tds-size--half)
);
--tds-stepper--text-grid-area-height: min-content;
--tds-stepper--line-top: calc(
var(--tds-stepper--icon-grid-area-height) / 2 - var(--tds-stepper--stroke) /
2
);
--tds-stepper--line-left: 0;
--tds-setpper-item--text-width: calc(var(--tds-size) * 12);
display: inline-flex;
}
.tds-stepper.tds-stepper--width-full {
display: flex;
}
.tds-stepper:not(.tds-stepper--vertical):before {
writing-mode: vertical-lr;
}
.tds-stepper.tds-stepper--vertical:before {
block-size: calc(100% - 2px);
}
.tds-stepper--width-full .tds-stepper-item {
flex-basis: 0;
flex-grow: 1;
}
.tds-stepper:not(.tds-stepper--vertical)
:is(.tds-stepper-item, .tds-stepper-item-action) {
grid-template: "circle" var(--tds-stepper--icon-grid-area-height) "text" var(
--tds-stepper--text-grid-area-height
) / minmax(min-content, 1fr);
justify-items: center;
}
.tds-stepper.tds-stepper--vertical .tds-stepper-item-action {
column-gap: var(--tds-size--half);
}
.tds-stepper:not(.tds-stepper--vertical)
.tds-stepper-item:not(:first-of-type) {
margin-block-start: unset;
margin-inline-start: var(--tds-size--1x);
}
.tds-stepper:not(.tds-stepper--vertical) .tds-stepper-item:before {
border-width: var(--tds-size--1x);
}
.tds-stepper.tds-stepper--vertical
:is(.tds-stepper-item, .tds-stepper-item-action):before {
margin-block-start: 2px;
}
.tds-stepper:not(.tds-stepper--vertical)
.tds-stepper-item:is(:first-of-type, :last-of-type):after {
background-color: var(--tds-stepper--mask-color);
block-size: calc(var(--tds-stepper--stroke) + 2px);
content: "";
inline-size: calc(50% - var(--tds-icon--size) / 2);
position: absolute;
top: calc(var(--tds-stepper--line-top) - 1px);
}
.tds-stepper:not(.tds-stepper--vertical)
.tds-stepper-item:first-of-type:after {
left: 0;
}
.tds-stepper:not(.tds-stepper--vertical)
.tds-stepper-item:last-of-type:after {
left: var(--tds-stepper--line-mask-end);
}
[dir="rtl"]
.tds-stepper:not(.tds-stepper--vertical)
.tds-stepper-item:first-of-type:after {
left: unset;
right: 0;
}
[dir="rtl"]
.tds-stepper:not(.tds-stepper--vertical)
.tds-stepper-item:last-of-type:after {
left: unset;
right: var(--tds-stepper--line-mask-end);
}
.tds-stepper-item-text {
max-inline-size: var(--tds-setpper-item--text-width);
min-inline-size: var(--tds-setpper-item--text-width);
overflow: hidden;
overflow-wrap: break-word;
padding-block-end: var(--tds-size--half);
padding-block-start: var(--tds-size--half);
transition: color 0.33s ease, background-color 0.33s ease;
}
.tds-stepper-item-action .tds-stepper-item-text {
border-radius: var(--tds-border-radius--pill);
padding: var(--tds-size--half) 12px;
}
.tds-stepper--width-full .tds-stepper-item-text,
.tds-stepper--width-large .tds-stepper-item-text {
--tds-setpper-item--text-width: calc(var(--tds-size) * 17);
}
.tds-stepper--width-full .tds-stepper-item-text {
max-inline-size: unset;
}
.tds-stepper:not(.tds-stepper--vertical) .tds-stepper-item-text {
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
display: -webkit-box;
text-align: center;
}
.tds-stepper-item:not(.tds-stepper-item--disabled)
.tds-stepper-item-action:hover
.tds-stepper-item-text {
background-color: var(--tds-theme-background-container);
}
.tds-stepper-item:not(.tds-stepper-item--disabled):not(
.tds-stepper-item--error
)
.tds-stepper-item-action:hover
.tds-stepper-item-text {
--tds-stepper--text-color: var(--tds-theme-foreground-high-contrast);
}
}
:root {
--tds-sidenav--inline-size: auto;
--tds-sidenav--scroll-padding: var(--tds-size--3x);
--tds-sidenav--inline-scroll-padding: var(--tds-size--3x);
}
.tds-sidenav {
--tds-nav-item--color: var(--tds-theme-foreground-low-contrast);
--tds-sidenav-group--indent-from-icons: 0px;
inline-size: var(--tds-sidenav--inline-size);
}
.tds-density--default .tds-sidenav,
.tds-sidenav,
.tds-sidenav .tds-density--default,
.tds-sidenav.tds-density--default {
--tds-nav-item--block-size: var(--tds-size--5x);
}
.tds-density--dense .tds-sidenav,
.tds-sidenav .tds-density--dense,
.tds-sidenav.tds-density--dense {
--tds-nav-item--block-size: var(--tds-size--4x);
}
.tds-sidenav--sticky {
bottom: 0;
margin-block: calc(var(--tds-sidenav--scroll-padding) * -1);
margin-inline: calc(var(--tds-sidenav--inline-scroll-padding) * -1);
max-block-size: 100vh;
overflow-y: auto;
padding-block: var(--tds-sidenav--scroll-padding);
padding-inline: var(--tds-sidenav--inline-scroll-padding);
position: sticky;
top: 0;
}
.tds-sidenav--icons .tds-site-nav-item {
--tds-sidenav-group--indent-from-icons: calc(
var(--tds-icon--size) - var(--tds-size--half) - var(--tds-size--1x) +
var(--tds-nav-item-leading--gap, 0px)
);
}
@media (min-width: 600px) {
.tds-sidenav--internal {
--tds-sidenav--inline-size: calc(
200px + var(--tds-sidenav--inline-scroll-padding) * 2
);
}
}
.tds-sidenav--collapsed {
display: none;
}
.tds-sidenav--persistent.tds-sidenav--collapsed {
--tds-sidenav--inline-size: min-content;
display: block;
}
.tds-sidenav--internal.tds-sidenav--sticky {
max-block-size: calc(100vh - var(--tds-shell-header-height));
top: var(--tds-site-header--height);
}
.tds-sidenav-group {
--tds-nav-item--block-size: var(--tds-size--4x);
display: none;
font-size: var(--tds-font-size-20);
padding-block-end: var(--tds-size--1x);
padding-inline-start: 0;
}
:where(
.tds-density--dense .tds-sidenav,
.tds-density--dense.tds-sidenav,
.tds-sidenav .tds-density--dense
)
.tds-sidenav-group {
--tds-nav-item--block-size: 28px;
}
.tds-sidenav--internal .tds-sidenav-group {
padding-block-start: var(--tds-size--half);
}
.tds-sidenav-group .tds-sidenav-group {
padding-block-start: 0;
}
.tds-sidenav-group--always-expanded,
.tds-site-nav-item.tds--expanded + .tds-sidenav-group,
.tds-site-nav-item.tds--expanded
+ :where(tds-side-nav-item-group)
> .tds-sidenav-group {
display: block;
}
.tds-sidenav .tds-sidenav-group li:not(:last-child),
.tds-sidenav .tds-sidenav-group tds-side-nav-item:not(:last-child) li {
margin-block-end: 0;
}
.tds-sidenav .tds-sidenav-group .tds-site-nav-item {
--tds-sidenav-group--level-indent: var(--tds-size--1x);
--tds-sidenav-group--static-indent: var(--tds-nav-item--padding-inline) +
var(--tds-sidenav-group--indent-from-icons);
padding-inline-start: calc(
var(--tds-sidenav-group--static-indent) +
var(--tds-sidenav-group--level-indent)
);
}
.tds-sidenav .tds-site-nav-item.tds--highlighted {
--tds-nav-item--color: var(--tds-theme-foreground-high-contrast);
}
.tds-sidenav .tds-sidenav-group .tds-sidenav-group .tds-site-nav-item {
--tds-sidenav-group--level-indent: var(--tds-size--2x);
}
.tds-sidenav
.tds-sidenav-group
.tds-sidenav-group
.tds-sidenav-group
.tds-site-nav-item {
--tds-sidenav-group--level-indent: var(--tds-size--3x);
}
.tds-sidenav--persistent.tds-sidenav--collapsed .tds-sidenav-group,
.tds-sidenav--persistent.tds-sidenav--collapsed
.tds-site-nav-item-leading
> :not(.tds-icon:first-child, tds-content:first-child:has(.tds-icon)),
.tds-sidenav--persistent.tds-sidenav--collapsed
.tds-site-nav-item
> :not(.tds-icon:first-child, .tds-site-nav-item-leading),
.tds-sidenav--persistent.tds-sidenav--collapsed
.tds-site-nav-item
> tds-icon:last-child
.tds-icon,
.tds-sidenav--persistent.tds-sidenav--collapsed:not(.tds-sidenav--icons) {
display: none;
}
.tds-sidenav--persistent.tds-sidenav--collapsed.tds-sidenav--sticky {
overflow: visible;
position: relative;
top: 0;
z-index: 1;
}
.tds-sidenav--persistent.tds-sidenav--collapsed .tds-site-nav-items--vertical {
overflow: visible;
}
.tds-sidenav--persistent.tds-sidenav--collapsed .tds-popover {
inline-size: max-content;
max-inline-size: 300px;
padding: var(--tds-size--1x) 12px;
}
.tds-component-preview,
:root {
--tds-switch_toggle--font-size: var(--tds-font-size-20);
--tds-switch_toggle--size: 32px;
}
.tds-switch_toggle {
--tds-switch_toggle--radius: calc(var(--tds-switch_toggle--size) / 2);
--tds-switch_toggle--spacer: var(--tds-size--1x);
align-items: center;
display: flex;
inline-size: min-content;
position: relative;
-webkit-user-select: none;
user-select: none;
}
.tds-switch_toggle * {
cursor: pointer;
}
.tds-switch_toggle--large {
--tds-switch_toggle--font-size: var(--tds-font-size-30);
--tds-switch_toggle--size: 40px;
}
.tds-density--default,
.tds-switch_toggle--medium {
--tds-switch_toggle--font-size: var(--tds-font-size-20);
--tds-switch_toggle--size: 32px;
}
.tds-density--dense,
.tds-switch_toggle--small {
--tds-switch_toggle--font-size: var(--tds-font-size-10);
--tds-switch_toggle--size: 28px;
}
.tds--disabled .tds-switch_toggle-checkbox,
.tds-switch_toggle-checkbox {
opacity: 0;
pointer-events: none;
position: absolute;
}
.tds-switch_toggle-track {
background-color: var(--tds-theme-background-container-alt);
block-size: var(--tds-switch_toggle--size);
border-radius: var(--tds-switch_toggle--radius);
display: block;
inline-size: calc(var(--tds-switch_toggle--size) * 2);
position: relative;
transition: background-color 0.5s ease;
}
.tds-switch_toggle-checkbox:checked ~ .tds-switch_toggle-track {
background-color: var(--tds-theme-primary);
}
.tds-switch_toggle-checkbox:focus-visible + .tds-switch_toggle-track {
outline: var(--tds-outline--focus);
outline-offset: 2px;
}
.tds--indicate-focus
.tds-switch_toggle-checkbox:focus
+ .tds-switch_toggle-track {
outline: var(--tds-outline--focus);
outline-offset: 2px;
}
.tds-switch_toggle-btn {
color: var(--tds-theme-foreground-high-contrast);
font-size: var(--tds-switch_toggle--font-size);
line-height: 1;
margin-inline: var(--tds-switch_toggle--spacer)
var(--tds-switch_toggle--spacer);
text-transform: none;
transition: color 0.5s ease;
}
.tds-switch_toggle-btn:nth-last-child(2) {
order: -1;
}
.tds-switch_toggle--label_inside .tds-switch_toggle-btn {
--tds-switch_toggle--spacer: 0;
--tds-switch_toggle-btn--indent: 1px;
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--large .tds-switch_toggle-btn {
--tds-switch_toggle-btn--indent: 4px;
}
.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 {
background-color: var(--tds-color-white);
block-size: calc(var(--tds-switch_toggle--size) - var(--tds-size--1x));
border-radius: var(--tds-border-radius--circle);
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--label_inside
.tds-switch_toggle-checkbox
~ .tds-switch_toggle-track:after,
[dir="rtl"]
.tds-switch_toggle-checkbox:checked
~ .tds-switch_toggle-track:after {
transform: translateX(calc(var(--tds-switch_toggle--size) * -1));
}
[dir="rtl"]
.tds-switch_toggle--label_inside
.tds-switch_toggle-checkbox:checked
~ .tds-switch_toggle-track:after {
transform: translateX(0);
}
:root {
--tds-switch-toggle--radius: var(--tds-size--4x);
}
.tds-density--default,
:root {
--tds-switch-toggle-group--caption-gap: var(--tds-size-base);
--tds-switch-toggle-group--gap: var(--tds-size--2x);
--tds-switch-toggle-group--legend-gap: 14px;
}
.tds-density--dense {
--tds-switch-toggle-group--caption-gap: var(--tds-size-half);
--tds-switch-toggle-group--gap: var(--tds-size--1x);
--tds-switch-toggle-group--legend-gap: var(--tds-size-base);
}
.tds-density--default,
.tds-switch-toggle--large,
:root {
--tds-switch-toggle--block-size: var(--tds-size--4x);
--tds-switch-toggle--inline-size: var(--tds-size--7x);
--tds-switch-toggle--padding: var(--tds-size--half);
--tds-switch-toggle-indicator--block-size: 12px;
--tds-switch-toggle-indicator--stroke: 2px;
--tds-switch-toggle-off-indicator--inline-size: 10px;
}
.tds-density--dense,
.tds-switch-toggle--medium {
--tds-switch-toggle--block-size: var(--tds-size--3x);
--tds-switch-toggle--inline-size: var(--tds-size--5x);
--tds-switch-toggle--padding: 3px;
--tds-switch-toggle-indicator--block-size: 8px;
--tds-switch-toggle-indicator--stroke: 1.5px;
--tds-switch-toggle-off-indicator--inline-size: 6px;
}
.tds-switch-toggle--small {
--tds-switch-toggle--block-size: var(--tds-size--2x);
--tds-switch-toggle--inline-size: 28px;
--tds-switch-toggle--padding: 2px;
--tds-switch-toggle-indicator--block-size: 6px;
--tds-switch-toggle-indicator--stroke: 1px;
--tds-switch-toggle-off-indicator--inline-size: 5px;
}
.tds-scrim--light,
.tds-scrim--white,
:root {
--tds-switch-toggle-off-indicator--opacity: 0.1;
}
.tds-scrim--black {
--tds-switch-toggle-off-indicator--opacity: 0.15;
}
.tds-form-input-group:has(.tds-switch-toggle-wrapper) {
gap: var(--tds-switch-toggle-group--gap);
}
.tds-switch-toggle-group.tds-form-fieldset {
gap: 0;
}
.tds-switch-toggle-group .tds-form-input-group + .tds-text--caption {
padding-block-start: var(--tds-switch-toggle-group--caption-gap);
}
.tds-switch-toggle-hidden-choice {
block-size: 0;
clip-path: inset(100%);
inline-size: 0;
opacity: 0;
pointer-events: none;
position: absolute;
}
.tds-switch-toggle-label-wrapper {
align-items: center;
cursor: pointer;
display: flex;
gap: var(--tds-size--1x);
}
.tds-switch-toggle {
--tds-switch-toggle-handle--size: calc(
var(--tds-switch-toggle--block-size) - var(--tds-switch-toggle--padding) * 2
);
--tds-switch-toggle-handle--translate: calc(
var(--tds-switch-toggle--inline-size) -
var(--tds-switch-toggle-handle--size) - var(--tds-switch-toggle--padding) *
2
);
align-items: center;
background-color: var(--tds-theme-background-container-alt);
block-size: var(--tds-switch-toggle--block-size);
border-radius: var(--tds-switch-toggle--radius);
display: flex;
inline-size: var(--tds-switch-toggle--inline-size);
min-inline-size: var(--tds-switch-toggle--inline-size);
padding: var(--tds-switch-toggle--padding);
position: relative;
transition: background-color 0.33s ease;
}
.tds-switch-toggle:dir(rtl) {
flex-direction: row-reverse;
}
.tds-switch-toggle-hidden-choice:checked
+ .tds-switch-toggle-label-wrapper
.tds-switch-toggle {
background-color: var(--tds-theme-primary);
}
.tds-switch-toggle-hidden-choice:focus-visible
+ .tds-switch-toggle-label-wrapper
.tds-switch-toggle {
outline: var(--tds-outline--focus);
}
.tds-switch-toggle--error {
border: 1px solid var(--tds-theme-secondary-negative);
}
.tds-switch-toggle--a11y-indicators:after,
.tds-switch-toggle--a11y-indicators:before {
block-size: var(--tds-switch-toggle-indicator--block-size);
border-radius: var(--tds-switch-toggle--radius);
box-shadow: inset 0 0 0 var(--tds-switch-toggle-indicator--stroke)
var(--tds-theme-foreground-high-contrast);
box-sizing: border-box;
content: "";
display: block;
opacity: 0;
position: absolute;
transition: opacity 0.33s ease;
}
.tds-switch-toggle--a11y-indicators:before {
border-width: calc(var(--tds-switch-toggle-indicator--stroke) / 2);
inline-size: var(--tds-switch-toggle-indicator--stroke);
left: calc(
var(--tds-switch-toggle-handle--translate) / 2 -
var(--tds-switch-toggle-indicator--stroke) / 2 +
var(--tds-switch-toggle--padding)
);
}
.tds-switch-toggle--a11y-indicators:after {
border-width: var(--tds-switch-toggle-indicator--stroke);
inline-size: var(--tds-switch-toggle-off-indicator--inline-size);
right: calc(
var(--tds-switch-toggle-handle--translate) / 2 -
var(--tds-switch-toggle-off-indicator--inline-size) / 2 +
var(--tds-switch-toggle--padding)
);
}
.tds-switch-toggle-hidden-choice:checked
+ .tds-switch-toggle-label-wrapper
.tds-switch-toggle--a11y-indicators:before,
.tds-switch-toggle-hidden-choice:not(:checked)
+ .tds-switch-toggle-label-wrapper
.tds-switch-toggle--a11y-indicators:after {
transition: opacity 0.33s ease 0.33s;
}
.tds-switch-toggle-hidden-choice:checked
+ .tds-switch-toggle-label-wrapper
.tds-switch-toggle--a11y-indicators:before {
opacity: 0.25;
}
.tds-switch-toggle-hidden-choice:not(:checked)
+ .tds-switch-toggle-label-wrapper
.tds-switch-toggle--a11y-indicators:after {
opacity: var(--tds-switch-toggle-off-indicator--opacity);
transition: opacity 0.33s ease 0.33s;
}
.tds-switch-toggle-handle {
background-color: var(--tds-theme-foreground-on-primary);
block-size: var(--tds-switch-toggle-handle--size);
border-radius: var(--tds-switch-toggle--radius);
box-shadow: var(--tds-ui-box-shadow-small);
display: block;
inline-size: var(--tds-switch-toggle-handle--size);
transition: transform 0.33s var(--tds-bezier);
z-index: 1;
}
.tds-switch-toggle-hidden-choice:checked
+ .tds-switch-toggle-label-wrapper
.tds-switch-toggle-handle {
transform: translateX(var(--tds-switch-toggle-handle--translate));
}
.tds-switch-toggle-label {
flex-basis: 0;
flex-grow: 1;
}
.tds-switch-toggle-hidden-choice:checked
+ .tds-switch-toggle-label-wrapper
.tds-form-label {
color: var(--tds-theme-foreground-high-contrast);
}
.tds-time-picker {
display: flex;
justify-content: center;
}
.tds-time-picker--listbox {
border-radius: var(--tds-border-radius--outline-only);
max-block-size: calc(var(--tds-size--4x) * 7);
overflow-y: auto;
scroll-behavior: auto;
}
.tds-time-picker--listbox:after {
block-size: calc(var(--tds-size--4x) * 6);
content: "";
display: block;
}
.tds-time-picker--listbox:not(:first-of-type) {
border-inline-start: 1px solid
var(--tds-theme-background-container-alt-highlight);
}
.tds-time-picker--option {
--tds-form--indent: 20px;
align-items: center;
background-color: initial;
cursor: pointer;
display: flex;
inline-size: 100%;
justify-content: center;
margin: 0;
max-inline-size: 100%;
min-block-size: var(--tds-size--4x);
outline-offset: -2px;
padding: var(--tds-size--half) var(--tds-form--indent);
text-align: start;
transition: background-color 0.3s ease;
}
.tds-time-picker--option:is(:focus-visible, .tds--focus) {
border-radius: var(--tds-size--half);
outline: var(--tds-outline--focus);
}
.tds--indicate-focus .tds-time-picker--option:is(:focus, .tds--focus) {
border-radius: var(--tds-size--half);
outline: var(--tds-outline--focus);
}
.tds-time-picker--option.tds--selected {
background-color: var(--tds-theme-background-container-alt-highlight);
}
.tds-scrim--light,
.tds-scrim--white,
:root {
--tds-toast--background: var(--tds-color-grey-15);
--tds-toast--foreground: var(--tds-color-grey-65);
--tds-toast--foreground-high-contrast: var(--tds-color-white);
--tds-toast--highlight: var(--tds-color-grey-20);
}
.tds-scrim--black {
--tds-toast--background: var(--tds-color-white);
--tds-toast--foreground: var(--tds-color-grey-20);
--tds-toast--foreground-high-contrast: var(--tds-color-grey-10);
--tds-toast--highlight: var(--tds-color-grey-65);
}
.tds-toast-container {
display: flex;
flex-direction: column;
inline-size: calc(100vw - var(--tds-size--6x));
left: 50%;
max-block-size: max(300px, 30vh);
max-inline-size: 432px;
overflow: auto;
position: fixed;
top: var(--tds-size-8x);
transform: translate(-50%);
z-index: 1001;
}
.tds-raw-toast-container,
.tds-toast-container {
display: flex;
flex-direction: column;
inline-size: 432px;
max-inline-size: calc(100vw - var(--tds-size--6x));
}
.tds-toast {
align-items: flex-start;
background-color: var(--tds-toast--background);
border-radius: calc(var(--tds-size--1x) / 2);
color: var(--tds-toast--foreground);
column-gap: var(--tds-size--1x);
display: flex;
flex: none;
flex-direction: row;
padding: var(--tds-size--2x);
padding-inline-end: calc(var(--tds-size--1x) * 3 / 2);
}
.tds-toast-container .tds-toast {
margin-block: 0 calc(var(--tds-size--1x));
opacity: 1;
transition: margin-block-start 1s ease, margin-block-end 1s ease,
opacity 1s ease;
}
.tds-toast.tds-toast--fade-in {
margin-block: calc(var(--intrinsic-height) * -1) 0;
opacity: 0;
transition: margin-block-start 0s, margin-block-end 0s, opacity 0s;
}
.tds-toast.tds-toast--fade-out {
margin-block: calc(var(--intrinsic-height) * -1) 0;
opacity: 0;
pointer-events: none;
z-index: -1;
}
.tds-toast strong {
color: var(--tds-toast--foreground-high-contrast);
}
.tds-toast--default {
padding-block: calc(var(--tds-size--2x) * 9 / 8);
padding-inline: calc(var(--tds-size--2x) + var(--tds-size--half))
calc(var(--tds-size--1x) + var(--tds-size--half));
}
.tds-toast-body {
display: flex;
flex-direction: column;
flex-grow: 1;
line-height: var(--tds-line-height-40);
row-gap: calc(var(--tds-size--1x) / 2);
}
.tds-toast-close {
position: relative;
top: -2px;
}
.tds-toast-close:hover {
background-color: var(--tds-toast--highlight);
}
.tds-toast-loader,
.tds-toast-status {
block-size: var(--tds-size--3x);
inline-size: var(--tds-size--3x);
opacity: 1;
position: relative;
}
.tds-toast-loader {
transition: opacity 0.5s ease;
}
.tds-toast-loader .tds-icon {
margin: auto;
position: absolute;
}
.tds-toast-loader .tds-icon-loader {
--tds-icon--size: var(--tds-size--3x);
animation: var(--tds--rotating);
border-radius: 50%;
opacity: var(--tds-ui-opacity-70);
}
.tds-toast-loader .tds-icon-logo {
--tds-icon--size: calc(var(--tds-size-2x) + 1.25px);
animation: var(--tds--pulsing);
color: var(--tds-theme-foreground-low-contrast);
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.tds-site-footer {
font-size: var(--tds-font-size-20);
inline-size: 100%;
}
.tds-site-footer--sticky {
bottom: 0;
position: sticky;
}
.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-theme-foreground-low-contrast);
font-weight: var(--tds-font-weight-medium);
}
.tds-footer-item .tds-link:not(.tds--disabled, .tds-link--primary) {
box-shadow: none;
color: var(--tds-theme-foreground-low-contrast);
}
.tds-footer-item .tds-link:not(.tds--disabled, .tds-link--primary):hover {
box-shadow: none;
}
@media (min-width: 600px) {
.tds-footer-nav > ul {
flex-flow: row wrap;
}
.tds-footer-nav > ul > li {
padding-block: var(--tds-size--1x) var(--tds-size--1x);
}
.tds-footer-nav > ul > li:first-child {
padding-inline-start: 0;
}
.tds-footer-nav > ul > li:last-child {
padding-inline-end: 0;
}
}
.tds-component-preview,
:root {
--tds-site-header--gap: var(--tds-size--half);
--tds-site-header--height: var(--tds-size--7x);
}
.tds-site-header {
display: flex;
flex-flow: row wrap;
inline-size: 100%;
justify-content: space-between;
min-block-size: var(--tds-site-header--height);
position: relative;
transition: background-color 0.33s ease, box-shadow 0.33s ease;
z-index: 10;
}
.tds-global-menu {
inline-size: 100%;
}
.tds-site-header--sticky {
position: sticky;
top: 0;
}
.tds-site-header--internal.tds-site-header--sticky.tds-site-header--stuck {
background-color: var(--tds-theme-background);
}
.tds-site-header .tds-align--start {
flex-basis: 0;
flex-grow: 1;
justify-content: flex-start;
padding-inline-start: var(--tds-size--1x);
}
.tds-site-header .tds-align--center {
flex-basis: 0;
flex-grow: 1;
justify-content: center;
padding-inline: var(--tds-size--1x);
}
.tds-site-header .tds-align--end {
flex-basis: 0;
flex-grow: 1;
justify-content: flex-end;
padding-inline-end: var(--tds-size--1x);
}
.tds-site-header.tds-site-header--internal .tds-align--start {
padding-inline-start: var(--tds-size--3x);
}
.tds-site-header.tds-site-header--internal .tds-align--end {
padding-inline-end: var(--tds-size--3x);
}
@media (min-width: 600px) {
.tds-site-header .tds-align--start {
padding-inline-start: 20px;
}
.tds-site-header .tds-align--end {
padding-inline-end: 20px;
}
}
@media (min-width: 1200px) {
.tds-site-header .tds-align--start {
padding-inline-start: var(--tds-size--4x);
}
.tds-site-header .tds-align--end {
padding-inline-end: var(--tds-size--4x);
}
}
.tds-site-header-modal {
padding-block-end: var(--tds-size--6x);
}
.tds-site-header-modal .tds-modal-header {
padding: 20px;
}
.tds-site-header-leading,
.tds-site-header-trailing {
align-items: center;
display: flex;
gap: var(--tds-site-header--gap);
}
.tds-site-header-leading {
justify-content: flex-start;
}
.tds-site-header-trailing {
justify-content: flex-end;
}
.tds-site-logo {
align-items: center;
display: flex;
}
h1.tds-site-logo {
padding: 0;
position: relative;
}
.tds-site-header--internal
:is(.tds-site-header-leading, .tds-site-header-trailing) {
--tds-site-header--gap: 14px;
}
.tds-site-header--internal .tds-site-logo,
.tds-site-header--internal .tds-site-menu-btn {
margin-inline-start: calc(var(--tds-size--1x) * -1);
}
.tds-site-header--internal .tds-site-logo ~ .tds-app-switcher {
margin-inline-start: -10px;
}
.tds-site-header--internal .tds-site-menu-btn {
color: var(--tds-theme-foreground-low-contrast);
}
.tds-site-header--internal .tds-site-menu-btn + .tds-site-logo,
.tds-site-header--internal
tds-internal-menu-trigger
+ tds-internal-logo
.tds-site-logo {
margin-inline-start: 0;
}
.tds-site-logo-link {
align-items: center;
box-shadow: none;
display: inline-flex;
padding: 0 var(--tds-size--2x);
}
.tds-site-header--internal .tds-site-logo-link {
padding: 0;
}
.tds-app-title,
.tds-site-app-title {
align-items: center;
block-size: var(--tds-size--4x);
display: inline-flex;
flex-direction: row;
gap: var(--tds-size--half);
padding-block: var(--tds-size--half);
padding-inline: calc(var(--tds-size--1x) + var(--tds-size--half))
var(--tds-size--1x);
position: relative;
}
.tds-site-app-title.tds-text--h6 {
display: flex;
padding-block-start: 0;
}
.tds-app-title:before,
.tds-site-app-title:before {
background: var(--tds-theme-border-low-contrast);
block-size: var(--tds-size--2x);
border-radius: 1px;
content: "";
inline-size: 1px;
inset-inline-start: 0;
position: absolute;
transition: opacity 0.33s ease;
}
.tds-app-title-text {
text-wrap: nowrap;
color: var(--tds-theme-foreground-high-contrast);
font-size: var(--tds-font-size-30);
font-weight: var(--tds-font-weight-regular);
line-height: var(--tds-line-height-30);
}
.tds-skip-to-content {
align-items: center;
font-size: var(--tds-font-size-20);
line-height: 1.414;
padding: var(--tds-size--1x) var(--tds-size--2x);
position: absolute;
top: var(--tds-size--6x);
white-space: nowrap;
}
.tds-site-logo :focus {
border-radius: var(--tds-border-radius--pill);
outline: none;
}
.tds-site-logo :focus-visible {
outline: var(--tds-outline--focus);
}
.tds--indicate-focus .tds-site-logo :focus {
outline: var(--tds-outline--focus);
outline-offset: 0;
}
.tds-site-header-search {
align-items: center;
display: flex;
flex-basis: 0;
flex-grow: 1;
max-inline-size: calc(329px + var(--tds-size--2x));
}
.tds-mock-app-switcher {
align-items: center;
color: var(--tds-theme-foreground-high-contrast);
display: flex;
gap: var(--tds-size--half);
}
.tds-mock-app-switcher .tds-icon-chevron-small-180 {
color: var(--tds-theme-foreground-low-contrast);
}
.tds-mock-location {
align-items: center;
display: flex;
gap: var(--tds-size--half);
padding-inline-end: 12px;
}
:root {
--tds-site-header-panel--padding-inline: calc(
var(--tds-size--3x) + var(--tds-size--half)
);
}
.tds-site-header-panel {
--tds-modal--width: 100%;
border-radius: 0;
inset: 0;
max-block-size: 100%;
max-block-size: 100dvh;
max-inline-size: 100%;
min-block-size: 100%;
min-block-size: 100dvh;
z-index: 490;
}
.tds-site-header-panel:not([open]),
.tds-site-header-panel[open] {
transform: translateY(0);
}
.tds-site-header-panel-header {
align-items: center;
padding-inline-start: var(--tds-size--2x);
}
.tds-site-header-panel-content {
flex-grow: 1;
padding: 0 var(--tds-site-header-panel--padding-inline);
}
.tds-site-header-panel-footer-content {
border-block-start: var(--tds-text--border-low-contrast);
margin: var(--tds-site-header-panel--padding-inline);
padding-block-start: var(--tds-site-header-panel--padding-inline);
}
.tds-site-header-panel + .tds-modal-backdrop {
display: none;
}
.tds-site-header-panel--internal {
--tds-site-header-panel--padding-inline: var(--tds-size--3x);
}
@media (min-width: 1200px) {
.tds-site-header {
z-index: 500;
}
.tds-site-header-panel {
bottom: auto;
max-block-size: 90%;
max-block-size: 90dvh;
min-block-size: 0;
overflow-y: hidden;
top: 0;
transition: 0.5s var(--tds-bezier);
}
.tds-site-header-panel:not([open]) {
transform: translateY(calc(var(--tds-size--12x) * -1));
}
.tds-site-header-panel-content {
margin-block-start: calc(
var(--tds-shell-header-height) + var(--tds-banner-offset-height, 0px)
);
overflow-y: auto;
padding-block-end: var(--tds-size--6x);
transition: transform 0.5s var(--tds-bezier);
}
.tds-site-header-panel:not([open]) .tds-site-header-panel-content {
transform: translateY(var(--tds-size--9x));
}
.tds-site-header-panel[open] .tds-site-header-panel-content {
transform: translateY(0);
}
.tds-site-header-panel + .tds-modal-backdrop {
display: block;
z-index: 480;
}
.tds-site-header-panel[open] + .tds-modal-backdrop {
transition-delay: 0.25s;
}
.tds-site-header
.tds-site-nav-items.tds-align--end
li:last-child
.tds-site-nav-item--icon-only {
margin-inline-end: var(--tds-size--2x);
}
}
:root {
--tds-nav-item--block-size: var(--tds-size--4x);
--tds-nav-item--color: inherit;
--tds-nav-item--padding-block: var(--tds-size--half);
--tds-nav-item--padding-inline: var(--tds-size--2x);
--tds-nav-item--width: auto;
--tds-nav-item-leading--gap: var(--tds-size--1x);
--tds-nav-item-trailing--gap: var(--tds-size--half);
}
.tds-site-nav-item {
align-items: center;
border-radius: var(--tds-border-radius--pill);
color: var(--tds-nav-item--color);
display: inline-flex;
font-weight: var(--tds-font-weight-medium);
gap: var(--tds-nav-item-leading--gap);
inline-size: var(--tds-nav-item--width);
justify-content: space-between;
min-block-size: var(--tds-nav-item--block-size);
padding: var(--tds-nav-item--padding-block)
var(--tds-nav-item--padding-inline);
transition: color 0.33s ease, background-color 0.33s ease;
}
.tds-site-nav-items--vertical .tds-site-nav-item {
inline-size: 100%;
outline-offset: -2px;
}
.tds-site-nav-item--with-caption {
--tds-nav-item--padding-block: var(--tds-size--1x);
}
.tds-site-nav-item--large {
--tds-nav-item--padding-block: var(--tds-size--2x);
--tds-nav-item-leading--gap: 12px;
font-size: var(--tds-font-size-40);
line-height: var(--tds-line-height-40);
}
.tds-site-nav-item.tds--highlighted,
.tds-site-nav-item.tds-animate--backdrop.tds--highlighted {
--tds-nav-item--color: var(--tds-theme-foreground-high-contrast);
-webkit-backdrop-filter: blur(var(--tds-blur--button));
backdrop-filter: blur(var(--tds-blur--button));
background-color: var(--tds-theme-background-container-alt);
}
@media (hover: hover) {
:is(.tds-site-nav-item, .tds-site-nav-item.tds-animate--backdrop):where(
:not(.tds-site-nav-item--read-only)
):hover {
--tds-nav-item--color: var(--tds-theme-foreground-high-contrast);
-webkit-backdrop-filter: blur(var(--tds-blur--button));
backdrop-filter: blur(var(--tds-blur--button));
background-color: var(--tds-theme-background-container-alt);
}
.tds-site-nav-item.tds--highlighted:where(
:not(.tds-site-nav-item--read-only):not(.tds-animate--backdrop)
):hover {
background-color: var(--tds-theme-background-container-alt-highlight);
}
}
.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);
}
.tds-site-nav-item--icon-only,
.tds-site-nav-item:has(> .tds-icon:only-child),
.tds-site-nav-item:has(> tds-content:only-child tds-icon:only-child .tds-icon) {
block-size: var(--tds-size--4x);
inline-size: var(--tds-size--4x);
justify-content: center;
padding: 0;
}
.tds-modal-header .tds-nav-back {
background: none;
font-size: 12px;
margin: 4px 0;
position: relative;
top: 1px;
}
@media (max-width: 599px) {
.tds-nav-menu {
font-size: 12px;
min-block-size: 28px;
padding: 0 var(--tds-size--1x);
}
}
.tds-site-nav-item.tds-animate--backdrop {
-webkit-backdrop-filter: unset;
backdrop-filter: unset;
background-color: initial;
}
.tds-site-nav-items--vertical .tds-site-nav-item-text {
flex-grow: 1;
text-align: start;
}
.tds-nav-back .tds-site-nav-item-text {
margin: 0;
}
.tds-site-nav-item-caption {
color: var(--tds-theme-foreground-low-contrast);
display: block;
font-size: var(--tds-font-size-20);
font-weight: var(--tds-font-weight-regular);
line-height: var(--tds-line-height-20);
}
.tds-site-nav-item--large .tds-site-nav-item-caption {
font-size: var(--tds-font-size-30);
line-height: var(--tds-line-height-30);
}
.tds-site-nav-item--with-caption:not(.tds-site-nav-item--large)
.tds-site-nav-item-text {
padding-block-start: 2px;
}
.tds-site-nav-item--with-caption:not(.tds-site-nav-item--large)
.tds-site-nav-item-caption {
padding-block-end: 2px;
}
:is(.tds-sidenav--internal, .tds-site-header-panel--internal) {
--tds-nav-item-leading--gap: 12px;
--tds-nav-item-trailing--gap: var(--tds-size--half);
}
.tds-site-nav-item-leading,
.tds-site-nav-item-trailing {
align-items: center;
display: flex;
}
.tds-site-nav-item-leading {
gap: var(--tds-nav-item-leading--gap);
text-align: start;
}
.tds-site-nav-item-trailing {
gap: var(--tds-nav-item-trailing--gap);
text-align: end;
}
.tds-site-nav-item .tds-icon {
transition: none;
}
.tds-site-nav-item .tds-site-nav-item-leading .tds-icon,
.tds-site-nav-item > .tds-icon:first-child {
margin-inline-start: calc(var(--tds-size--half) * -1);
}
.tds-site-nav-item--with-caption .tds-icon:first-child:not(tds-icon .tds-icon),
.tds-site-nav-item--with-caption
tds-content:has(tds-icon):first-child
tds-icon:first-child
.tds-icon {
align-self: start;
}
.tds-site-nav-item > .tds-icon:last-child,
.tds-site-nav-item > .tds-site-nav-item-trailing .tds-icon,
.tds-site-nav-item
> tds-content:has(tds-icon):last-child
tds-icon:last-child
.tds-icon {
margin-inline-end: calc(var(--tds-size--half) * -1);
}
.tds-site-nav-items--vertical
.tds-site-nav-item
> .tds-icon:last-child:not(tds-icon .tds-icon),
.tds-site-nav-items--vertical
.tds-site-nav-item
> .tds-site-nav-item-trailing
.tds-icon,
.tds-site-nav-items--vertical
.tds-site-nav-item
> tds-content:has(tds-icon):last-child
tds-icon
.tds-icon,
.tds-site-nav-items--vertical
.tds-site-nav-item
> tds-icon:last-child
.tds-icon {
margin-inline-end: 2px;
}
.tds-sidenav--persistent.tds-sidenav--collapsed
.tds-site-nav-item
> .tds-icon:first-child,
.tds-sidenav--persistent.tds-sidenav--collapsed
.tds-site-nav-item
> .tds-site-nav-item-leading
.tds-icon:first-child,
.tds-sidenav--persistent.tds-sidenav--collapsed
.tds-site-nav-item
> .tds-site-nav-item-leading
tds-content:has(tds-icon):first-child
.tds-icon,
.tds-sidenav--persistent.tds-sidenav--collapsed
.tds-site-nav-item
> tds-content:has(tds-icon):first-child
.tds-icon,
.tds-site-nav-item .tds-icon:only-child:not(tds-icon .tds-icon),
.tds-site-nav-item
tds-content:has(tds-icon):only-child
tds-icon:only-child
.tds-icon {
margin-inline: calc(
(var(--tds-nav-item--padding-inline) - var(--tds-nav-item--padding-block)) *
-1
);
}
.tds-site-nav-item
:is(.tds-site-nav-item-trailing, .tds-icon[class*="chevron"]:last-child) {
color: var(--tds-theme-foreground-low-contrast);
transition: color 0.33s ease, transform 0.5s var(--tds-bezier);
}
.tds-site-nav-item.tds--highlighted
:is(.tds-site-nav-item-trailing, .tds-icon[class*="chevron"]:last-child) {
color: var(--tds-theme-foreground-high-contrast);
}
@media (hover: hover) {
.tds-site-nav-item:hover
:is(.tds-site-nav-item-trailing, .tds-icon[class*="chevron"]:last-child) {
color: var(--tds-theme-foreground-high-contrast);
}
}
.tds-density--dense
.tds-site-nav-item
.tds-site-nav-item-trailing
.tds-chip:last-child,
.tds-density--dense .tds-site-nav-item > .tds-chip:last-child,
.tds-site-nav-item .tds-site-nav-item-trailing .tds-chip:last-child,
.tds-site-nav-item > .tds-chip:last-child {
margin-inline-end: calc(var(--tds-size--half) * -1);
}
.tds-site-nav-items {
align-items: center;
display: flex;
margin: 0;
position: relative;
transition: transform 0.5s ease;
z-index: 1;
}
.tds-site-header > .tds-site-nav-items {
min-block-size: var(--tds-site-header--height);
position: static;
}
.tds-site-nav-items--vertical {
--tds-nav-item--padding-inline: 12px;
align-items: normal;
flex-direction: column;
overflow-y: auto;
text-align: start;
}
.tds-site-nav-items--vertical > li:not(:last-child),
.tds-site-nav-items--vertical > tds-side-nav-item:not(:last-child) > li {
margin-block-end: var(--tds-size--1x);
}
.tds-site-nav-items--spacious.tds-site-nav-items--vertical
> li:not(:last-child) {
margin-block-end: var(--tds-size--2x);
}
:is(.tds-site-header-panel, .tds-sidenav) .tds-site-nav-items--vertical {
margin-inline: calc(var(--tds-nav-item--padding-inline) * -1)
calc(var(--tds-nav-item--padding-inline) * -1);
}
.tds-site-nav-items--vertical .tds-site-nav-items--vertical {
margin-inline: 0 0;
}
:is(.tds-sidenav--internal, .tds-site-header-panel--internal)
.tds-site-nav-items--vertical {
--tds-nav-item--padding-inline: var(--tds-size--1x);
}
@media (min-width: 900px) {
.tds-site-header-panel .tds-site-nav-items--vertical {
align-items: flex-start;
}
}
.tds-status_msg {
--tds-card--padding: var(--tds-padding--card--dense);
display: flex;
margin: var(--tds-size--3x) 0;
}
.tds-status_msg-heading {
padding: 0;
}
.tds-status_msg :is(.tds-text--h6, .tds-text--h6) {
padding-block-start: 0;
}
.tds-status_msg:not(.tds-card) .tds-card-body {
padding-block-end: 0;
padding-block-start: 0;
padding-inline-start: calc(var(--tds-card--padding) / 3);
}
.tds-status_msg:not(.tds-card) .tds-icon + .tds-card-body {
padding-block-end: 2px;
padding-block-start: 2px;
}
.tds-component-preview,
:root {
--tds-table-deprecated--background-color: #0000;
--tds-table-deprecated--border_color: var(--tds-color-grey-50);
--tds-table-deprecated--border_spacing: 0;
--tds-table-deprecated--border_width: 1px;
--tds-table-deprecated--caption-background-color: #0000;
--tds-table-deprecated--caption-top: 0;
--tds-table-deprecated--header-font_size: var(--tds-font-size-30);
--tds-table-deprecated--padding--horizontal: var(--tds-size--2x);
--tds-table-deprecated--padding--vertical: var(--tds-size--2x);
--tds-table-deprecated--vertical-align: middle;
}
.tds-density--dense {
--tds-table-deprecated--border_spacing: 0;
--tds-table-deprecated--border_width: 1px;
--tds-table-deprecated--header-font_size: var(--tds-font-size-20);
--tds-table-deprecated--padding--horizontal: var(--tds-size--1x);
--tds-table-deprecated--padding--vertical: var(--tds-size--1x);
}
.tds-table-deprecated--align_middle {
--tds-table-deprecated--vertical-align: middle;
}
.tds-table-deprecated--align_top {
--tds-table-deprecated--vertical-align: top;
}
.tds-table-deprecated--align_bottom {
--tds-table-deprecated--vertical-align: bottom;
}
.tds-table-deprecated {
border-collapse: collapse;
border-spacing: var(--tds-table-deprecated--border_spacing);
font-size: var(--tds-font-size-30);
inline-size: 100%;
text-align: start;
}
.tds-table-deprecated--bordered td,
.tds-table-deprecated--bordered th {
border: var(--tds-table-deprecated--border_width) solid
var(--tds-theme-border);
}
.tds-table-deprecated-caption {
background-color: var(--tds-table-deprecated--caption-background-color);
}
.tds-table-deprecated-row td,
.tds-table-deprecated-row th {
background-color: var(--tds-table-deprecated--background-color);
font-size: var(--tds-table-deprecated--header-font_size);
padding-block: var(--tds-table-deprecated--padding--vertical)
var(--tds-table-deprecated--padding--vertical);
text-align: start;
vertical-align: var(--tds-table-deprecated--vertical-align);
}
.tds-table-deprecated-row p {
margin: 0;
}
.tds-table-col--selected,
.tds-table-deprecated-row--selected td,
.tds-table-deprecated-row--selected th {
--tds-table-deprecated--background-color: var(
--tds-theme-background-container
);
}
.tds-table-deprecated--padded_cells td,
.tds-table-deprecated--padded_cells th {
padding-inline: var(--tds-table-deprecated--padding--horizontal)
var(--tds-table-deprecated--padding--horizontal);
}
.tds-table-deprecated--thead_border .tds-table-deprecated-head th {
border-block-end: var(--tds-table-deprecated--border_width) solid
var(--tds-theme-border);
}
.tds-scrim--black {
--tds-table-deprecated--background-color: var(--tds-color-grey-15);
}
.tds-scrim--black .tds-table-deprecated td,
.tds-scrim--black .tds-table-deprecated th {
color: var(--tds-color-white);
}
.tds-table-deprecated-head .tds-table-deprecated-row th {
color: var(--tds-theme-foreground);
font-weight: var(--tds-font-weight-medium);
}
.tds-table-deprecated--hoverable
.tds-table-deprecated-body
.tds-table-deprecated-row:hover
td,
.tds-table-deprecated--hoverable
.tds-table-deprecated-body
.tds-table-deprecated-row:hover
th {
background-color: var(--tds-theme-background-container);
}
@media (max-width: 599px) {
.tds-table-deprecated--responsive .tds-table-deprecated {
display: flex;
flex-flow: row wrap;
}
.tds-table-deprecated--responsive .tds-table-deprecated-caption {
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border-block-end: 1px solid var(--tds-color-grey-50);
padding: var(--tds-size--2x);
position: sticky;
top: var(--tds-table-deprecated--caption-top);
}
.tds-table-deprecated--responsive .tds-table-deprecated-caption--white {
--tds-table-deprecated--caption-background-color: #ffffff80;
}
.tds-table-deprecated--responsive .tds-table-deprecated-caption--light {
--tds-table-deprecated--caption-background-color: #7d7d7d80;
}
.tds-table-deprecated--responsive .tds-table-deprecated-caption--black {
--tds-table-deprecated--caption-background-color: #00000080;
}
.tds-table-deprecated--responsive .tds-table-deprecated-caption h1,
.tds-table-deprecated--responsive .tds-table-deprecated-caption h2,
.tds-table-deprecated--responsive .tds-table-deprecated-caption h3,
.tds-table-deprecated--responsive .tds-table-deprecated-caption h4,
.tds-table-deprecated--responsive .tds-table-deprecated-caption h5,
.tds-table-deprecated--responsive .tds-table-deprecated-caption h6 {
padding-block-start: 0;
}
.tds-table-deprecated--responsive .tds-table-deprecated-body,
.tds-table-deprecated--responsive .tds-table-deprecated-foot,
.tds-table-deprecated--responsive .tds-table-deprecated-head,
.tds-table-deprecated--responsive .tds-table-deprecated-row {
display: block;
max-inline-size: calc(100vw - var(--tds-size--3x) * 2);
overflow: scroll;
}
.tds-table-deprecated--responsive .tds-table-deprecated-row td {
display: inline-flex;
flex-flow: row wrap;
inline-size: 100%;
padding-block-end: 0;
}
.tds-table-deprecated--bordered .tds-table-deprecated-row {
margin-block-end: var(--tds-size--1x);
padding-block-start: 0;
padding-inline-end: 0;
}
.tds-table-deprecated--responsive .tds-table-deprecated-head {
left: -9999px;
position: absolute;
top: -9999px;
}
.tds-table-deprecated--responsive td:before,
.tds-table-deprecated--responsive th:before {
content: var(--columnHeader) ": ";
display: block;
font-size: var(--tds-font-size-40);
font-weight: var(--tds-font-weight-medium);
inline-size: 100%;
line-height: var(--tds-line-height-40);
max-inline-size: 100%;
min-inline-size: 100%;
}
.tds-table-deprecated-responsive .tds-table-deprecated-row {
border-block-end: 1px solid var(--tds-color-grey-50);
padding-block: var(--tds-size--2x) var(--tds-size--2x);
}
.tds-table-deprecated--responsive.tds-table-deprecated--padded_cells th {
padding-block-end: 0;
}
.tds-table-deprecated--responsive .tds-table-deprecated-body th:first-child {
font-weight: 400;
}
}
@media (min-width: 600px) {
.tds-table-deprecated--row_border .tds-table-deprecated-body td,
.tds-table-deprecated--row_border .tds-table-deprecated-body th {
border-block-start: var(--tds-table-deprecated--border_width) solid
var(--tds-theme-border);
}
.tds-table-deprecated--striped
.tds-table-deprecated-body
> .tds-table-deprecated-row:nth-child(odd)
> td,
.tds-table-deprecated--striped
.tds-table-deprecated-body
> .tds-table-deprecated-row:nth-child(odd)
> th {
--tds-table-deprecated--background-color: var(
--tds-color--tertiary-highlight
);
}
}
.tds-table-deprecated--data {
font-variant-numeric: tabular-nums;
}
.tds-component-preview,
:root {
--tds-table-border-width: 1px;
--tds-table-cell-align-items: normal;
--tds-table-cell-before-padding-block-end: 0;
--tds-table-cell-padding-horizontal: var(--tds-size--1x);
--tds-table-cell-padding-vertical: var(--tds-size--1x);
--tds-table-cell-position: static;
--tds-table-cell-vertical-align: middle;
--tds-table-column-inline-size: auto;
--tds-table-column-min-inline-size: 0;
--tds-table-header-font-size: var(--tds-table-header-font_size);
--tds-table-header-font-weight: var(--tds-font-weight-regular);
--tds-table-header-line-height: var(--tds-base-line_height);
}
table {
font-size: inherit;
font-weight: inherit;
line-height: inherit;
}
.tds-table-wrapper {
inline-size: calc(100% + var(--tds-size--2x));
margin-inline: calc(var(--tds-size--1x) * -1) calc(var(--tds-size--1x) * -1);
overflow-x: auto;
}
.tds-table {
--tds-table-cell-border-block-end: var(--tds-table-border-width) solid
var(--tds-theme-border-low-contrast);
--tds-table-cell-border-block-start: none;
border-collapse: collapse;
border-spacing: 0;
font-size: var(--tds-font-size-30);
min-inline-size: 100%;
text-align: start;
}
.tds-table-head {
--tds-table-cell-padding-vertical: calc(
var(--tds-size--1x) + var(--tds-size--half)
);
}
.tds-table-foot {
--tds-table-cell-border-block-end: none;
--tds-table-cell-padding-vertical: calc(
var(--tds-size--1x) + var(--tds-size--half)
);
position: var(--tds-table-cell-position);
}
.tds-table-column {
inline-size: var(--tds-table-column-inline-size);
min-inline-size: var(--tds-table-column-min-inline-size);
}
.tds-table--grouped-row .tds-table-column:first-child {
--tds-table-column-inline-size: 40%;
--tds-table-column-min-inline-size: 20ch;
}
.tds-table-row td,
.tds-table-row th {
border-block-end: var(--tds-table-cell-border-block-end);
line-height: var(--tds-base-line_height);
min-inline-size: 12ch;
padding-block: var(--tds-table-cell-padding-vertical)
var(--tds-table-cell-padding-vertical);
padding-inline: var(--tds-table-cell-padding-horizontal)
var(--tds-table-cell-padding-horizontal);
position: var(--tds-table-cell-position);
text-align: start;
vertical-align: var(--tds-table-cell-vertical-align);
}
.tds-table-column--selected,
.tds-table-row--selected td,
.tds-table-row--selected th {
background-color: var(--tds-theme-background-container-highlight);
}
.tds-table-row td {
align-items: var(--tds-table-cell-align-items);
border-block-start: var(--tds-table-cell-border-block-start);
font-size: var(--tds-font-size-30);
}
.tds-table-row td:before,
.tds-table-row th:before {
color: var(--tds-heading--color);
display: block;
font-weight: var(--tds-font-weight-medium);
padding-block-end: var(--tds-table-cell-before-padding-block-end);
}
.tds-table-row td:first-child {
border-block-start: none;
}
.tds-table-row th {
border-block-start: var(--tds-table-cell-border-block-start);
color: var(--tds-heading--color);
font-size: var(--tds-table-header-font-size);
font-weight: var(--tds-table-header-font-weight);
line-height: var(--tds-table-header-line-height);
}
.tds-table-row th.tds-th--caption,
.tds-th--caption {
align-items: var(--tds-table-cell-align-items);
color: var(--tds-caption--color);
font-size: var(--tds-font-size-20);
font-weight: var(--tds-font-weight-medium);
}
.tds-table-row th:first-child:after {
background: var(--tds-scrim--background);
inset-block: 1px;
inset-inline: 0;
position: absolute;
transition: background-color 0.3s ease;
z-index: -2;
}
.tds-table-row th:not(.tds-th--caption) {
--tds-table-header-font-weight: var(--tds-font-weight-medium);
}
.tds-table--sticky-first-col .tds-table-row th:first-child,
.tds-table--sticky-first-col + .tds-table-foot {
--tds-table-cell-position: sticky;
left: 0;
z-index: 1;
}
.tds-table--sticky-first-col + .tds-table-foot {
--tds-table-foot-display: block;
padding: calc(var(--tds-size--1x) + var(--tds-size--half)) var(--tds-size--1x);
}
[dir="rtl"] .tds-table--sticky-first-col .tds-table-row th:first-child {
left: auto;
right: 0;
}
.tds-table--sticky-first-col .tds-table-row th:first-child:after {
content: "";
}
.tds-table--align-top {
--tds-table-cell-vertical-align: top;
}
.tds-table--align-bottom {
--tds-table-cell-vertical-align: bottom;
}
@media (max-width: 599px) {
.tds-table[class*="-stacked-list"] {
--tds-table-cell-border-block-end: none;
--tds-table-cell-last-child-padding-block-end: var(--tds-size--3x);
--tds-table-cell-padding-horizontal: 0;
--tds-table-cell-position: static;
--tds-table-header-first-child-margin-block-start: 0;
--tds-table-header-font-size: var(--tds-font-size-40);
--tds-table-header-line-height: var(--tds-line-height-20);
display: flex;
flex-flow: row wrap;
padding-inline: var(--tds-size--1x) var(--tds-size--1x);
}
.tds-table[class*="-stacked-list"] .tds-table-head {
left: -9999px;
position: absolute;
top: -9999px;
}
.tds-table[class*="-stacked-list"] .tds-table-body,
.tds-table[class*="-stacked-list"] .tds-table-foot,
.tds-table[class*="-stacked-list"] .tds-table-head,
.tds-table[class*="-stacked-list"] .tds-table-row {
display: block;
inline-size: 100%;
}
.tds-table[class*="-stacked-list"] .tds-table-row td,
.tds-table[class*="-stacked-list"] .tds-table-row th {
display: inline-flex;
inline-size: 100%;
}
.tds-table--vertical-stacked-list[class*="-stacked-list"] {
--tds-table-cell-before-padding-block-end: var(--tds-size--half);
}
.tds-table--vertical-stacked-list[class*="-stacked-list"] .tds-table-row td,
.tds-table--vertical-stacked-list[class*="-stacked-list"]
.tds-table-row
th.tds-th--caption {
flex-flow: column nowrap;
}
.tds-table--vertical-stacked-list[class*="-stacked-list"]
.tds-table-row
td:before,
.tds-table--vertical-stacked-list[class*="-stacked-list"]
.tds-table-row
th:before {
inline-size: 100%;
}
.tds-table--horizontal-stacked-list[class*="-stacked-list"] {
--tds-table-cell-align-items: center;
}
.tds-table--horizontal-stacked-list[class*="-stacked-list"] .tds-table-row td,
.tds-table--horizontal-stacked-list[class*="-stacked-list"]
.tds-table-row
th.tds-th--caption {
justify-content: space-between;
}
.tds-table[class*="-stacked-list"] .tds-table-row td:first-child {
padding-block-start: var(--tds-size--3x);
}
.tds-table[class*="-stacked-list"] .tds-table-row th:first-child {
margin-block-start: var(--tds-table-header-first-child-margin-block-start);
}
.tds-table[class*="-stacked-list"] .tds-table-row td:last-child {
border-block-end: var(--tds-table-border-width) solid
var(--tds-theme-border-low-contrast);
padding-block-end: var(--tds-table-cell-last-child-padding-block-end);
}
.tds-table[class*="-stacked-list"].tds-table--grouped-row
.tds-table-row
th:not(.tds-th--caption) {
--tds-table-cell-border-block-start: var(--tds-table-border-width) solid
var(--tds-theme-border-low-contrast);
--tds-table-header-first-child-margin-block-start: var(--tds-size--2x);
padding-block-start: var(--tds-size--3x);
}
.tds-table[class*="-stacked-list"].tds-table--grouped-row
.tds-table-row:first-child
th {
--tds-table-header-first-child-margin-block-start: 0;
}
.tds-table[class*="-stacked-list"].tds-table--grouped-row {
--tds-table-cell-last-child-padding-block-end: var(--tds-size--1x);
}
.tds-table[class*="-stacked-list"] .tds-table-row td:empty {
display: none;
}
.tds-table[class*="-stacked-list"]:not(.tds-table--grouped-row) {
--tds-table-header-last-child-padding-block-end: var(--tds-size--3x);
}
.tds-table[class*="-stacked-list"]:not(.tds-table--grouped-row)
.tds-table-row
th:first-child {
padding-block-start: var(--tds-size--3x);
}
.tds-table--grouped-row[class*="-stacked-list"] .tds-table-row:last-child {
--tds-table-cell-last-child-padding-block-end: var(--tds-size--3x);
}
.tds-table[class*="-stacked-list"].tds-table--grouped-row
.tds-table-row
td:last-child {
border-block-end: none;
}
.tds-table[class*="-stacked-list"].tds-table--grouped-row
.tds-table-row:last-child
td:last-child {
border-block-end: var(--tds-table-border-width) solid
var(--tds-theme-border-low-contrast);
}
.tds-table[class*="-stacked-list"].tds-table--grouped-row
.tds-table-row:first-child
th:not(.tds-th--caption) {
--tds-table-cell-border-block-start: none;
}
.tds-table[class*="-stacked-list"] .tds-table-row td:before,
.tds-table[class*="-stacked-list"] .tds-table-row th:before {
content: var(--columnHeader);
}
}
table {
color: inherit;
}
.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
);
margin-inline-end: 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;
}
* + .tds-data-table-toolbar {
margin-block-start: var(--tds-size--3x);
}
* + .tds-data-table-wrapper {
margin-block-start: var(--tds-size--1x);
}
.tds-data-table-wrapper + .tds-pagination {
margin-block-start: var(--tds-size--3x);
}
.tds-data-table-toolbar {
justify-content: space-between;
}
.tds-data-table-toolbar,
.tds-data-table-tools {
align-items: center;
display: flex;
gap: var(--tds-size--2x);
}
.tds-density--dense .tds-data-table-tools {
gap: var(--tds-size--1x);
}
.tds-data-table {
border-spacing: 0;
font-size: var(--tds-data-table--font-size);
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--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: initial;
transition: background-color 0.3s ease, border-color 0.3s ease,
box-shadow 0.3s ease;
}
.tds-data-table :where(th, td) {
block-size: var(--tds-size--5x);
border-block-end: 1px solid var(--tds-theme-background-container);
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;
}
.tds-data-table :where(th, td):is(:first-child, :last-child):before {
border-color: #0000;
bottom: -1px;
content: "";
position: absolute;
top: -1px;
transition: background-color 0.3s ease, top 0.3s ease;
z-index: -1;
}
.tds-data-table :where(th, td):first-child:before,
[dir="rtl"] .tds-data-table :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 :where(th, td):last-child:before,
[dir="rtl"] .tds-data-table :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);
}
.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-theme-background-container);
}
.tds-data-table tbody .tds-tr--selected:has(.tds-tooltip),
.tds-data-table tbody .tds-tr--selected:has(.tds-tooltip) :where(th, td):before,
.tds-data-table tbody .tds-tr--selected:is(:hover, .tds--highlighted),
.tds-data-table
tbody
.tds-tr--selected:is(:hover, .tds--highlighted)
:where(th, td):before {
z-index: 3;
}
.tds-data-table tbody tr.tds-tr--selected {
background-color: var(--tds-theme-background-container-highlight);
position: relative;
z-index: 2;
}
.tds-data-table tbody tr.tds-tr--selected :where(th, td) {
border-color: var(--tds-theme-background-container-highlight);
box-shadow: 0 -1px 0 0 var(--tds-theme-background-container-highlight);
}
.tds-data-table tbody tr.tds-tr--selected :where(th, td):after,
.tds-data-table tbody tr.tds-tr--selected :where(th, td):before {
background-color: var(--tds-theme-background-container-highlight);
}
.tds-data-table
tbody
tr.tds-tr--selected
+ tr.tds-tr--selected
:where(th, td):before {
top: -6px;
}
.tds--indicate-focus .tds-data-table tbody tr:focus-within {
outline: var(--tds-outline--focus);
outline-offset: -5px;
z-index: 4;
}
.tds-td--actions {
padding-inline-end: 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: sticky;
right: 0;
z-index: 3;
}
.tds-td--select {
padding-inline-end: var(--tds-data-table--row-outdent-size);
padding-inline-start: var(--tds-data-table--row-outdent-size);
white-space: nowrap;
width: 0;
}
.tds-th--sortable {
cursor: pointer;
-webkit-user-select: none;
user-select: none;
}
.tds-data-table thead :where(th, td).tds-th--sortable {
block-size: var(--tds-size--6x);
padding: 0;
}
.tds-th--sortable :focus {
outline: none;
}
.tds-th--sortable .tds-th--inner:before {
background-color: initial;
border-radius: var(--tds-size--half);
bottom: var(--tds-size--half);
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
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-theme-background-container);
}
.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-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);
}
.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 {
margin-inline-start: var(--tds-size--half);
vertical-align: middle;
}
:where(.tds-data-table) th [class*="tds-icon-double-chevron"] {
--tds-icon-double-chevron-down--fill: var(--tds-theme-border);
--tds-icon-double-chevron-up--fill: var(--tds-theme-border);
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-theme-foreground-high-contrast);
}
.tds-th--sort-desc [class*="tds-icon-double-chevron"] {
--tds-icon-double-chevron-down--fill: var(
--tds-theme-foreground-high-contrast
);
}
: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;
}
.tds-data-table--sticky-first-col th:first-child {
left: var(--tds-data-table--row-hover-radius);
position: sticky;
z-index: 1;
}
[dir="rtl"] .tds-data-table--sticky-first-col th:first-child {
left: auto;
right: var(--tds-data-table--row-hover-radius);
}
.tds-data-table--sticky-first-col .tds-td--select {
left: var(--tds-data-table--row-hover-radius);
position: sticky;
z-index: 1;
}
[dir="rtl"] .tds-data-table--sticky-first-col .tds-td--select {
left: auto;
right: var(--tds-data-table--row-hover-radius);
}
.tds-data-table--sticky-first-col th:not(:first-child):is(:first-of-type) {
left: calc(
var(--tds-form-input-choice--check-size) +
var(--tds-data-table--row-outdent-size) * 2 +
var(--tds-data-table--row-hover-radius)
);
position: sticky;
z-index: 1;
}
[dir="rtl"]
.tds-data-table--sticky-first-col
th:not(:first-child):is(:first-of-type) {
left: auto;
right: calc(
var(--tds-form-input-choice--check-size) +
var(--tds-data-table--row-outdent-size) * 2 +
var(--tds-data-table--row-hover-radius)
);
}
.tds-data-table--sticky-first-col.tds-density--dense
th:not(:first-child):is(:first-of-type) {
left: calc(
var(--tds-form-input-choice--check-size) + 2px +
var(--tds-data-table--row-outdent-size) * 2 +
var(--tds-data-table--row-hover-radius)
);
}
[dir="rtl"]
.tds-data-table--sticky-first-col.tds-density--dense
th:not(:first-child):is(:first-of-type) {
left: auto;
right: calc(
var(--tds-form-input-choice--check-size) + 2px +
var(--tds-data-table--row-outdent-size) * 2 +
var(--tds-data-table--row-hover-radius)
);
}
.tds-data-table--sticky-first-col .tds-td--select:after,
.tds-data-table--sticky-first-col th:first-child:after,
.tds-data-table--sticky-first-col
th:not(:first-child):is(:first-of-type):after {
background: var(--tds-theme-background, var(--tds-color-white));
bottom: 1px;
content: "";
left: 0;
position: absolute;
right: 0;
top: 1px;
transition: background-color 0.3s ease;
z-index: -2;
}
.tds-data-table--sticky-first-col :where(th, td):first-child:before {
background: var(--tds-theme-background, var(--tds-color-white));
}
.tds-data-table--sticky-first-col
tbody
tr.tds-tr--selected
th:not(:first-child):is(:first-of-type):after,
.tds-data-table--sticky-first-col
tbody
tr.tds-tr--selected:not(:hover, .tds--highlighted)
.tds-td--select:after,
.tds-data-table--sticky-first-col
tbody
tr.tds-tr--selected:not(:hover, .tds--highlighted)
th:first-child:after {
background: var(--tds-theme-background-container-highlight);
}
.tds-data-table--sticky-first-col
tbody
tr:not(.tds-tr--selected):is(:hover, .tds--highlighted)
.tds-td--select:after,
.tds-data-table--sticky-first-col
tbody
tr:not(.tds-tr--selected):is(:hover, .tds--highlighted)
th:first-child:after,
.tds-data-table--sticky-first-col
tbody
tr:not(.tds-tr--selected):is(:hover, .tds--highlighted)
th:not(:first-child):is(:first-of-type):after {
background: var(--tds-theme-background-container);
}
.tds-data-table-null-message {
align-items: center;
display: flex;
flex-direction: column;
padding: clamp(100px, 10vh, 200px) 40px;
}
.tds-tab-panel-list {
inline-size: 100%;
}
.tds-tab-panel {
display: none;
transition: visibility 0.5s 0.5s;
visibility: hidden;
}
.tds-tab-panel--active {
display: block;
transition: visibility 0.5s 0s;
visibility: inherit;
}
.tds-tab-list {
--tds-tab--background-color-off: #0000;
--tds-tab--background-color-on: var(--tds-theme-background-container);
--tds-tab--border-radius: var(--tds-border-radius--pill);
--tds-tab--box-shadow--focus-off: inset 0 0 0 0 #0000;
--tds-tab--box-shadow--focus-on: inset 0 0 0 3px
rgb(var(--tds-color--rgb-shade) 0.08);
--tds-tab--box-shadow--highlight-off: 0 0 0 0 #0000;
--tds-tab--box-shadow--highlight-on: 0 0 0 0 #0000;
--tds-tab--font-size: var(--tds-font-size-30);
--tds-tab--font-weight: var(--tds-font-weight-medium);
--tds-tab--gap: var(--tds-size--half);
--tds-tab-list--height: var(--tds-height--pill);
align-items: center;
block-size: var(--tds-tab-list--height);
display: grid;
gap: var(--tds-tab--gap);
grid-auto-flow: column;
overflow-x: auto;
position: relative;
}
.tds-tab-list--toggle {
--tds-tab--background-color-on: var(--tds-color-white);
--tds-tab--border-radius: calc(var(--tds-border-radius--pill) - 2px);
--tds-tab--box-shadow--highlight-on: var(--tds-box-shadow--small);
background-color: var(--tds-theme-background-container-alt);
border-radius: var(--tds-border-radius--pill);
padding: var(--tds-size--half);
}
:is(.tds-scrim--black, .tds-colorscheme--dark) .tds-tab-list--toggle {
--tds-tab--background-color-on: var(--tds-color-grey-20);
}
:is(.tds-scrim--black, .tds-colorscheme--dark)
:is(.tds-modal, .tds-tooltip)
.tds-tab-list--toggle {
--tds-tab--background-color-on: var(--tds-theme-background-container-alt);
}
.tds-tab-list--legacy-vertical,
.tds-tab-list--underline,
.tds-tab-list--vertical {
--tds-tab--border-radius: 0;
gap: 0;
}
.tds-tab-list--legacy-vertical,
.tds-tab-list--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: #0000;
--tds-tab--box-shadow--highlight-off: inset 0 0 0 0 #0000;
--tds-tab--box-shadow--highlight-on: inset -4px 0 0 0 var(--tds-theme-primary);
}
.tds-tab-list--underline {
--tds-tab--background-color-on: #0000;
--tds-tab--box-shadow--highlight-off: inset 0 -1px 0 0 var(--tds-theme-foreground-high-contrast);
--tds-tab--box-shadow--highlight-on: inset 0 -4px 0 0 var(--tds-theme-foreground-high-contrast);
--tds-tab-list--height: var(--tds-size--7x);
--tds-tab--box-shadow--highlight-off: none;
--tds-tab--box-shadow--highlight-on: none;
--tds-tab-list--underline--max_width: auto;
--tds-tab-list--underline--size: var(--tds-border-width-small);
--tds-tab-list--tab-underline--border-radius: 2px;
--tds-tab-list--tab-underline--bottom: 0;
--tds-tab-list--tab-underline--size: var(--tds-border-width-large);
display: inline-grid;
}
.tds-tab-list--underline.tds-tab-list--full-width {
display: flex;
inline-size: 100%;
justify-content: center;
}
.tds-tab-list--underline.tds-tab-list--full-width.tds-tab-list--align-start {
justify-content: flex-start;
}
.tds-tab-list--underline--inner {
display: inline-grid;
grid-auto-columns: 1fr;
}
.tds-density--dense .tds-tab-list--underline {
max-block-size: var(--tds-tab-list--underline--max_width);
}
.tds-tab-list--underline:after {
background: var(--tds-theme-border);
block-size: var(--tds-tab-list--underline--size);
bottom: var(--tds-tab-list--underline--size);
content: "";
inline-size: 100%;
position: absolute;
}
.tds-tab-list--underline .tds-tab:after {
background: var(--tds-theme-foreground-high-contrast);
block-size: var(--tds-tab-list--tab-underline--size);
border-radius: var(--tds-tab-list--tab-underline--border-radius);
bottom: var(--tds-tab-list--tab-underline--bottom);
content: "";
inline-size: 100%;
opacity: 0;
position: absolute;
transform: scaleY(0);
transition: opacity 0.3s ease, transform 0.3s ease;
z-index: 1;
}
.tds-tab-list--underline.tds-tab-list--animated .tds-tab:after {
display: none;
}
.tds-tab-list--underline .tds-tab--active:after,
.tds-tab-list--underline .tds-tab[aria-selected="true"]:after {
opacity: 1;
transform: scale(1);
}
.tds-tab-list--dots {
--tds-tab--background-color-off: var(--tds-theme-border);
--tds-tab--background-color-on: var(--tds-theme-foreground-high-contrast);
--tds-tab-list--height: 12px;
justify-content: center;
}
.tds-tab-list--animated {
--tds-animate-backdrop-visibility: inherit;
}
.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);
align-items: center;
background-color: var(--tds-tab--background-color);
block-size: calc(var(--tds-tab-list--height) - 8px);
border-radius: var(--tds-tab--border-radius);
box-shadow: var(--tds-tab--box-shadow--focus),
var(--tds-tab--box-shadow--highlight);
color: var(--tds-theme-foreground-low-contrast);
cursor: pointer;
display: inline-flex;
font-size: var(--tds-tab--font-size);
font-weight: var(--tds-tab--font-weight);
justify-content: var(--tds-tab--justify-content, center);
line-height: 1.2;
outline-offset: -2px;
padding: var(--tds-size--half) var(--tds-size--3x);
position: relative;
scroll-snap-align: center;
transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}
.tds-tab-list--icons .tds-tab {
block-size: var(--tds-tab-list--height);
inline-size: var(--tds-tab-list--height);
padding: 0;
}
.tds-tab-list--toggle.tds-tab-list--icons {
padding: 2px;
}
.tds-tab-list--legacy-vertical .tds-tab,
.tds-tab-list--vertical .tds-tab {
min-block-size: var(--tds-height--pill);
}
.tds-tab-list--underline .tds-tab {
grid-row: 1;
min-block-size: var(--tds-tab-list--height);
text-align: center;
white-space: nowrap;
}
.tds-tab-list--dots .tds-tab {
font-size: 0;
outline-offset: 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-visible {
outline: var(--tds-outline--focus);
}
.tds-tab-list--toggle.tds-tab-list--icons .tds-tab {
block-size: calc(var(--tds-tab-list--height) - var(--tds-size--half));
inline-size: calc(var(--tds-tab-list--height) - var(--tds-size--half));
padding: 0;
}
:is(
.tds-density--dense .tds-tab-list--toggle.tds-tab-list--icons,
.tds-density--dense.tds-tab-list--toggle.tds-tab-list--icons
)
.tds-icon {
--tds-icon--size: 20px;
}
.tds--indicate-focus .tds-tab:focus {
outline: var(--tds-outline--focus);
}
.tds-tab--active,
.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);
background-color: var(--tds-tab--background-color);
color: var(--tds-theme-foreground-high-contrast);
cursor: inherit;
}
.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--indicate-focus .tds--animated-backdrop {
transition: none;
}
.tds-tab-list--dots .tds--animated-backdrop {
z-index: 1;
}
.tds-tab-list--animated.tds-tab-list--underline .tds--animated-backdrop {
background: var(--tds-theme-foreground-high-contrast);
block-size: var(--tds-tab-list--tab-underline--size);
border-radius: var(--tds-tab-list--tab-underline--border-radius);
bottom: var(--tds-tab-list--tab-underline--bottom);
position: absolute;
top: unset;
z-index: 1;
}
.tds-tooltip {
--tds-tooltip--padding: var(--tds-padding--card);
--tds-tooltip--translate-y: var(--tds-size--1x);
--tds-tooltip--safe-space: var(--tds-size--1x);
--tds-tooltip--x-offset: 0px;
--tds-tooltip--offset-align: 8;
--tds-tooltip--offset-padding: 24;
background-color: var(--tds-theme-background-dialog);
border-radius: var(--tds-border-radius--card);
bottom: calc(100% + var(--tds-tooltip--safe-space));
box-shadow: var(--tds-box-shadow--medium);
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;
writing-mode: horizontal-tb;
z-index: 550;
}
.tds-tooltip.tds-tooltip--overlay {
backface-visibility: hidden;
bottom: unset;
position: fixed;
transform: translateY(var(--tds-tooltip--translate-y)) translateX(0);
}
.tds-tooltip.tds-tooltip--overlay.tds-tooltip--width-full {
max-inline-size: min(calc(100vw - 48px), 400px);
}
.tds-tooltip,
.tds-tooltip--closed {
opacity: 0;
pointer-events: none;
transform: translateY(var(--tds-tooltip--translate-y))
translateX(calc(-50% + var(--tds-tooltip--x-offset)));
transition: opacity 0.5s var(--tds-bezier), transform 0.5s var(--tds-bezier),
visibility 0s 0.5s;
visibility: hidden;
}
.tds-tooltip.tds-tooltip--open {
--tds-tooltip--translate-y: 0;
opacity: 1;
pointer-events: inherit;
transition: opacity 0.5s var(--tds-bezier), transform 0.5s var(--tds-bezier),
visibility 0s 0s;
visibility: inherit;
}
.tds-density--dense .tds-tooltip,
.tds-density--dense.tds-tooltip {
--tds-tooltip--offset-padding: 16;
--tds-tooltip--padding: var(--tds-padding--card--dense);
}
.tds-tooltip--orientation-down {
--tds-tooltip--translate-y: calc(var(--tds-size--1x) * -1);
bottom: unset;
top: calc(100% + var(--tds-tooltip--safe-space));
}
.tds-tooltip--align-end,
.tds-tooltip--align-start {
transform: translateY(var(--tds-tooltip--translate-y)) translateX(0);
}
.tds-tooltip--align-start {
inset-inline-start: calc(var(--tds-tooltip--padding) * -1);
left: unset;
}
.tds-tooltip--align-end {
inset-inline-end: calc(var(--tds-tooltip--padding) * -1);
left: unset;
}
.tds-tooltip--width-full {
inline-size: auto;
left: 0;
max-inline-size: 100%;
right: 0;
transform: translateY(var(--tds-tooltip--translate-y)) translateX(0);
writing-mode: horizontal-tb;
}
.tds-tooltip:before {
content: "";
inset: calc(var(--tds-tooltip--safe-space) * -1);
position: absolute;
}
[data-tds-tooltip-trigger] {
cursor: pointer;
}
.tds-tooltip-wrapper,
.tds-tooltip-wrapper--inline {
position: relative;
}
.tds-tooltip-wrapper {
display: flex;
}
.tds-tooltip-wrapper--inline {
display: inline-flex;
vertical-align: middle;
}
.tds-tooltip > * {
position: relative;
z-index: 2;
}
:where(.tds-tooltip:not(.tds-menu .tds-tooltip)) > :first-child {
margin-block-start: 0;
padding-block-start: 0;
}
:where(.tds-tooltip:not(.tds-menu .tds-tooltip)) > :last-child {
margin-block-end: 0;
padding-block-end: 0;
}
.tds-text--body,
.tds-text--body_large,
.tds-text--caption-header,
.tds-text--h1,
.tds-text--h2,
.tds-text--h3,
.tds-text--h4,
.tds-text--h5,
.tds-text--h6,
.tds-text--section_subtitle {
display: block;
margin: 0;
}
strong {
color: var(--tds-theme-foreground-high-contrast);
}
.tds-text--caption-header,
.tds-text--h1,
.tds-text--h1-alt,
.tds-text--h2,
.tds-text--h3,
.tds-text--h4,
.tds-text--h5,
.tds-text--h6,
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--tds-theme-foreground-high-contrast);
font-weight: var(--tds-font-weight-medium);
padding-block: var(--tds-size--4x) var(--tds-size--1x);
transition: font 0.33s ease, color 0.33s ease, opacity 0.33s ease,
padding 0.33s ease;
}
.tds-text--h6,
h6 {
padding-block-end: 0;
}
: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
) {
padding-block-start: var(--tds-size--2x);
}
@media (max-width: 599px) {
.tds-text--h1,
.tds-text--h1-alt,
h1 {
font-size: var(--tds-font-size-70);
line-height: var(--tds-line-height-70);
}
.tds-text--h2,
h2 {
font-size: var(--tds-font-size-60);
}
.tds-text--h2,
.tds-text--h3,
h2,
h3 {
line-height: var(--tds-line-height-60);
}
.tds-text--h3,
h3 {
font-size: var(--tds-font-size-50);
}
.tds-text--h4,
h4 {
font-size: var(--tds-font-size-40);
line-height: var(--tds-line-height-30);
}
.tds-text--h5,
.tds-text--h6,
h5,
h6 {
font-size: var(--tds-font-size-30);
line-height: var(--tds-line-height-30);
}
.tds-text--caption-header {
font-size: var(--tds-font-size-20);
line-height: var(--tds-line-height-10);
}
}
@media (min-width: 600px) {
.tds-text--h1,
h1 {
font-size: var(--tds-font-size-80);
line-height: var(--tds-line-height-80);
}
.tds-text--h1-alt {
font-size: var(--tds-font-size-75);
line-height: var(--tds-line-height-75);
}
.tds-text--h2,
h2 {
font-size: var(--tds-font-size-70);
line-height: var(--tds-line-height-70);
}
.tds-text--h3,
h3 {
font-size: var(--tds-font-size-60);
}
.tds-text--h3,
.tds-text--h4,
h3,
h4 {
line-height: var(--tds-line-height-60);
}
.tds-text--h4,
h4 {
font-size: var(--tds-font-size-50);
}
.tds-text--h5,
h5 {
font-size: var(--tds-font-size-40);
line-height: var(--tds-line-height-20);
}
.tds-text--h6,
h6 {
font-size: var(--tds-font-size-30);
line-height: var(--tds-line-height-30);
}
.tds-text--caption-header {
font-size: var(--tds-font-size-20);
line-height: var(--tds-line-height-10);
}
}
@media (max-width: 599px) {
.tds-text--jumbo_mobile {
font-size: 36px !important;
font-weight: var(--tds-font-weight-medium) !important;
line-height: 36px !important;
}
}
.tds-text--body {
font-size: var(--tds-font-size-30);
line-height: var(--tds-line-height-30);
}
.tds-text--body + .tds-text--body {
padding-block-start: var(--tds-paragraph-gap);
}
.tds-text--caption {
color: var(--tds-theme-foreground-low-contrast);
font-size: var(--tds-font-size-20);
line-height: var(--tds-line-height-10);
}
:is(ul, ol, p) + :is(ul, ol, p).tds-text--caption {
padding-block-start: 12px;
}
.tds-text--thin {
font-weight: var(--tds-font-weight-thin) !important;
}
.tds-text--light {
font-weight: var(--tds-font-weight-light) !important;
}
.tds-text--regular {
font-weight: var(--tds-font-weight-regular) !important;
}
.tds-text--medium {
font-weight: var(--tds-font-weight-medium) !important;
}
.tds-text--bold {
font-weight: var(--tds-font-weight-bold) !important;
}
.tds-text--contrast-high {
color: var(--tds-theme-foreground-high-contrast);
}
.tds-text--contrast-medium {
color: var(--tds-theme-foreground);
}
.tds-text--contrast-low {
color: var(--tds-theme-foreground-low-contrast);
}
.tds-text--center {
margin-inline: auto auto;
text-align: center !important;
}
.tds-text--end {
text-align: end !important;
}
.tds-text--start {
text-align: start !important;
}
.tds-text--full-width {
max-inline-size: 100% !important;
}
.tds-text--full-width :is(ul, ol, li, p, div, details, summary) {
max-inline-size: 100%;
}
.tds-text--with_divider {
align-items: center;
display: flex;
overflow: hidden;
place-content: center center;
}
.tds-text--with_divider:after {
background-color: var(--tds-theme-foreground-high-contrast);
block-size: 1px;
content: "";
display: block;
inline-size: 100%;
margin-inline-start: 0.5em;
}
.tds-text--capitalize {
text-transform: capitalize;
}
.tds-text--uppercase {
text-transform: uppercase;
}
.tds-text--lowercase {
text-transform: lowercase;
}
.tds-text--nowrap {
text-wrap: nowrap;
}
.tds-text--wrap-balanced {
text-wrap: balance;
}
.tds-text--strikethrough {
text-decoration: line-through;
}
.tds-text--border {
border: var(--tds-text--border-low-contrast);
}
code {
--tds-code--background-color: var(--tds-theme-background-container);
--tds-code--border: var(--tds-text--border-low-contrast);
--tds-code--font-color: var(--tds-theme-foreground);
--tds-code--padding: var(--tds-size--1x);
background-color: var(--tds-code--background-color);
border: var(--tds-code--border);
border-radius: 0.25em;
color: var(--tds-code--font-color);
max-inline-size: 100%;
padding: 0 0.414em;
transition: background-color 0.3s ease, color 0.3s ease;
}
:is(ul, ol, p, strong, label) code {
border: 0;
}
:is(ul, ol, p, strong, label) code.tds-text--border {
border: var(--tds-code--border);
}
pre code {
display: block;
margin: 0;
overflow-x: auto;
padding: var(--tds-code--padding);
white-space: pre;
}
.tds-component-preview,
:root {
--tds-spacer-base: var(--tds-size--half);
--tds-spacer-1x: var(--tds-spacer-base);
--tds-spacer-2x: calc(var(--tds-spacer-base) * 2);
--tds-spacer-3x: calc(var(--tds-spacer-base) * 3);
--tds-spacer-4x: calc(var(--tds-spacer-base) * 4);
--tds-spacer-5x: calc(var(--tds-spacer-base) * 5);
--tds-spacer-6x: calc(var(--tds-spacer-base) * 6);
--tds-spacer-8x: calc(var(--tds-spacer-base) * 8);
--tds-spacer-10x: calc(var(--tds-spacer-base) * 10);
--tds-spacer-12x: calc(var(--tds-spacer-base) * 12);
--tds-spacer-14x: calc(var(--tds-spacer-base) * 14);
--tds-spacer-16x: calc(var(--tds-spacer-base) * 16);
--tds-spacer-18x: calc(var(--tds-spacer-base) * 18);
--tds-spacer-20x: calc(var(--tds-spacer-base) * 20);
--tds-spacer-24x: calc(var(--tds-spacer-base) * 24);
--tds-spacer-32x: calc(var(--tds-spacer-base) * 32);
}
:is(h1, h2, h3, h4) + :is(p, ul, ol, .tds-list, legend) {
--tds-spacer-top: var(--tds-spacer-5x);
}
:is(h5, p, ul, ol, .tds-list, legend) + :is(p, ul, ol, .tds-list, legend) {
--tds-spacer-top: var(--tds-spacer-4x);
}
h6 + :is(p, ul, ol, .tds-list, legend) {
--tds-spacer-top: var(--tds-spacer-3x);
}
* + form {
--tds-spacer-top: var(--tds-spacer-10x);
}
.tds--vertical-rhythm :is(*) + :is(p, form, ul, ol, .tds-list, legend),
.tds--vertical-rhythm :is(h1, h2, h3, h4, h5, h6),
.tds--vertical-rhythm [class*="tds--pad-top-"],
.tds--vertical-rhythm [class*="tds-spacer-"] {
padding-block-start: var(--tds-spacer-top);
}
@media (max-width: 599px) {
:is(h1, .tds-text--h1, .tds-text--h1-alt).tds--pad-top-xl {
--tds-spacer-top: calc(var(--tds-spacer-base) * 18);
}
:is(h1, .tds-text--h1, .tds-text--h1-alt).tds--pad-top-lg {
--tds-spacer-top: calc(var(--tds-spacer-base) * 16);
}
:is(h1, .tds-text--h1, .tds-text--h1-alt) {
--tds-spacer-top: var(--tds-spacer-14x);
}
:is(h1, .tds-text--h1, .tds-text--h1-alt).tds--pad-top-sm,
:is(h2, .tds-text--h2).tds--pad-top-xl {
--tds-spacer-top: var(--tds-spacer-12x);
}
:is(h1, .tds-text--h1, .tds-text--h1-alt).tds--pad-top-xs,
:is(h2, .tds-text--h2).tds--pad-top-lg,
:is(h3, .tds-text--h3).tds--pad-top-xl {
--tds-spacer-top: var(--tds-spacer-10x);
}
:is(h2, .tds-text--h2),
:is(h3, .tds-text--h3).tds--pad-top-lg,
:is(h4, .tds-text--h4).tds--pad-top-xl {
--tds-spacer-top: var(--tds-spacer-8x);
}
:is(h2, .tds-text--h2).tds--pad-top-sm,
:is(h3, .tds-text--h3),
:is(h4, .tds-text--h4).tds--pad-top-lg,
:is(h5, .tds-text--h5).tds--pad-top-xl {
--tds-spacer-top: var(--tds-spacer-6x);
}
:is(h2, .tds-text--h2).tds--pad-top-xs,
:is(h3, .tds-text--h3).tds--pad-top-sm,
:is(h3, .tds-text--h3).tds--pad-top-xs,
:is(h4, .tds-text--h4),
:is(h4, .tds-text--h4).tds--pad-top-sm,
:is(h4, .tds-text--h4).tds--pad-top-xs,
:is(h5, .tds-text--h5),
:is(h5, .tds-text--h5).tds--pad-top-lg,
:is(h5, h6, .tds-text--h5, .tds-text--h6):is(
.tds--pad-top-sm,
.tds--pad-top-xs
),
:is(h6, .tds-text--h6),
:is(h6, .tds-text--h6).tds--pad-top-lg,
:is(h6, .tds-text--h6).tds--pad-top-xl {
--tds-spacer-top: var(--tds-spacer-5x);
}
}
@media (min-width: 600px) and (max-width: 899px) {
:is(h1, .tds-text--h1, .tds-text--h1-alt).tds--pad-top-xl {
--tds-spacer-top: var(--tds-spacer-20x);
}
:is(h1, .tds-text--h1, .tds-text--h1-alt).tds--pad-top-lg {
--tds-spacer-top: var(--tds-spacer-18x);
}
:is(h1, .tds-text--h1, .tds-text--h1-alt) {
--tds-spacer-top: var(--tds-spacer-16x);
}
:is(h1, .tds-text--h1, .tds-text--h1-alt).tds--pad-top-sm,
:is(h2, .tds-text--h2).tds--pad-top-xl {
--tds-spacer-top: var(--tds-spacer-14x);
}
:is(h1, .tds-text--h1, .tds-text--h1-alt).tds--pad-top-xs,
:is(h2, .tds-text--h2).tds--pad-top-lg,
:is(h3, .tds-text--h3).tds--pad-top-xl {
--tds-spacer-top: var(--tds-spacer-12x);
}
:is(h2, .tds-text--h2),
:is(h3, .tds-text--h3).tds--pad-top-lg,
:is(h4, .tds-text--h4).tds--pad-top-xl {
--tds-spacer-top: var(--tds-spacer-10x);
}
:is(h2, .tds-text--h2).tds--pad-top-sm,
:is(h3, .tds-text--h3),
:is(h4, .tds-text--h4).tds--pad-top-lg,
:is(h5, .tds-text--h5).tds--pad-top-xl {
--tds-spacer-top: var(--tds-spacer-8x);
}
:is(h2, .tds-text--h2).tds--pad-top-xs,
:is(h3, .tds-text--h3).tds--pad-top-sm,
:is(h4, .tds-text--h4),
:is(h5, .tds-text--h5).tds--pad-top-lg,
:is(h6, .tds-text--h6).tds--pad-top-xl {
--tds-spacer-top: var(--tds-spacer-6x);
}
:is(h3, .tds-text--h3).tds--pad-top-xs,
:is(h4, .tds-text--h4).tds--pad-top-sm,
:is(h4, .tds-text--h4).tds--pad-top-xs,
:is(h5, .tds-text--h5),
:is(h5, h6, .tds-text--h5, .tds-text--h6):is(
.tds--pad-top-sm,
.tds--pad-top-xs
),
:is(h6, .tds-text--h6),
:is(h6, .tds-text--h6).tds--pad-top-lg {
--tds-spacer-top: var(--tds-spacer-5x);
}
}
@media (min-width: 900px) {
:is(h1, .tds-text--h1, .tds-text--h1-alt).tds--pad-top-xl {
--tds-spacer-top: calc(var(--tds-spacer-base) * 22);
}
:is(h1, .tds-text--h1, .tds-text--h1-alt).tds--pad-top-lg {
--tds-spacer-top: calc(var(--tds-spacer-base) * 20);
}
:is(h1, .tds-text--h1, .tds-text--h1-alt) {
--tds-spacer-top: var(--tds-spacer-18x);
}
:is(h1, .tds-text--h1, .tds-text--h1-alt).tds--pad-top-sm,
:is(h2, .tds-text--h2).tds--pad-top-xl {
--tds-spacer-top: var(--tds-spacer-16x);
}
:is(h1, .tds-text--h1, .tds-text--h1-alt).tds--pad-top-xs,
:is(h2, .tds-text--h2).tds--pad-top-lg,
:is(h3, .tds-text--h3).tds--pad-top-xl {
--tds-spacer-top: var(--tds-spacer-14x);
}
:is(h2, .tds-text--h2),
:is(h3, .tds-text--h3).tds--pad-top-lg,
:is(h4, .tds-text--h4).tds--pad-top-xl {
--tds-spacer-top: var(--tds-spacer-12x);
}
:is(h2, .tds-text--h2).tds--pad-top-sm,
:is(h3, .tds-text--h3),
:is(h4, .tds-text--h4).tds--pad-top-lg,
:is(h5, .tds-text--h5).tds--pad-top-xl {
--tds-spacer-top: var(--tds-spacer-10x);
}
:is(h2, .tds-text--h2).tds--pad-top-xs,
:is(h3, .tds-text--h3).tds--pad-top-sm,
:is(h4, .tds-text--h4),
:is(h5, .tds-text--h5).tds--pad-top-lg,
:is(h6, .tds-text--h6).tds--pad-top-xl {
--tds-spacer-top: var(--tds-spacer-8x);
}
:is(h3, .tds-text--h3).tds--pad-top-xs,
:is(h4, .tds-text--h4).tds--pad-top-sm,
:is(h5, .tds-text--h5),
:is(h6, .tds-text--h6) {
--tds-spacer-top: var(--tds-spacer-6x);
}
:is(h4, .tds-text--h4).tds--pad-top-xs,
:is(h5, h6, .tds-text--h5, .tds-text--h6):is(
.tds--pad-top-sm,
.tds--pad-top-xs
) {
--tds-spacer-top: var(--tds-spacer-4x);
}
:is(h6, .tds-text--h6).tds--pad-top-lg {
--tds-spacer-top: calc(var(--tds-spacer-base) * 7);
}
}
.tds--pad-top-1x {
--tds-spacer-top: var(--tds-spacer-1x);
}
.tds--pad-top-2x {
--tds-spacer-top: var(--tds-spacer-2x);
}
.tds--pad-top-3x {
--tds-spacer-top: var(--tds-spacer-3x);
}
.tds--pad-top-4x {
--tds-spacer-top: var(--tds-spacer-4x);
}
.tds--pad-top-6x {
--tds-spacer-top: var(--tds-spacer-6x);
}
.tds--pad-top-8x {
--tds-spacer-top: var(--tds-spacer-8x);
}
.tds--pad-top-10x {
--tds-spacer-top: var(--tds-spacer-10x);
}
.tds--pad-top-12x {
--tds-spacer-top: var(--tds-spacer-12x);
}
.tds--pad-top-14x {
--tds-spacer-top: var(--tds-spacer-14x);
}
.tds--pad-top-16x {
--tds-spacer-top: var(--tds-spacer-16x);
}
.tds--pad-top-18x {
--tds-spacer-top: var(--tds-spacer-18x);
}
.tds--pad-top-24x {
--tds-spacer-top: var(--tds-spacer-24x);
}
.tds--pad-top-32x {
--tds-spacer-top: var(--tds-spacer-32x);
}
.tds-progress_bar-wrapper {
inline-size: 100%;
position: relative;
}
.tds-progress_bar {
--tds-progress-bar--background-color: #0000;
--tds-progress-bar--bar-color: var(--tds-theme-background-container);
--tds-progress-bar--border-radius: var(--tds-size--4x);
--tds-progress-bar--height: var(--tds-size--2x);
--tds-progress-bar--value-color: var(--tds-theme-primary);
appearance: none;
block-size: var(--tds-progress-bar--height);
border: none;
border-radius: var(--tds-progress-bar--border-radius);
box-shadow: inset 0 1px 2px #0003;
display: block;
inline-size: 100%;
overflow: hidden;
}
.tds-density--dense {
--tds-progress-bar--height: 12px;
}
.tds-progress_bar--secondary {
--tds-progress-bar--value-color: var(--tds-theme-foreground-high-contrast);
}
.tds-progress_bar::-webkit-progress-bar {
background-color: var(--tds-progress-bar--bar-color);
border: none;
border-radius: var(--tds-progress-bar--border-radius);
box-shadow: inset 0 1px 2px #0003;
}
.tds-progress_bar::-webkit-progress-value {
background-color: var(--tds-progress-bar--value-color);
border-radius: var(--tds-progress-bar--border-radius);
-webkit-transition: inline-size 0.5s;
transition: inline-size 0.5s;
}
.tds-progress_bar::-moz-progress-bar {
background-color: var(--tds-progress-bar--value-color);
}
.tds-theme--replicant {
--tds-btn--font-size: var(--tds-font-size-20);
}
.tds-theme--replicant .tds-btn {
--tds-btn--background-color: #0000;
border: none;
color: var(--tds-theme-foreground-on-primary);
filter: var(--tds-glow--medium);
font-weight: var(--tds-font-weight-bold, 700);
letter-spacing: 0.1em;
text-transform: uppercase;
transition: 0.5s ease;
z-index: 0;
}
.tds-theme--replicant .tds-btn:focus-visible {
outline: var(--tds-outline--focus);
outline-offset: 2px;
}
.tds-scrim--black .tds-theme--replicant .tds-card .tds-btn,
.tds-theme--replicant .tds-scrim--black .tds-card .tds-btn,
.tds-theme--replicant.tds-scrim--black .tds-card .tds-btn {
color: var(--tds-color-black);
}
.tds-scrim--black .tds-theme--replicant .tds-card .tds-btn--tertiary,
.tds-theme--replicant .tds-scrim--black .tds-card .tds-btn--tertiary,
.tds-theme--replicant.tds-scrim--black .tds-card .tds-btn--tertiary {
color: var(--tds-color-white);
}
.tds-theme--replicant :is(.tds-btn--secondary, .tds-btn--tertiary) {
color: var(--tds-theme-foreground-high-contrast);
}
.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;
}
.tds--focus .tds-theme--replicant .tds-btn:focus,
.tds--focus.tds-theme--replicant .tds-btn:focus,
.tds--indicate-focus .tds-theme--replicant .tds-btn:focus,
.tds-theme--replicant .tds--focus .tds-btn:focus {
outline: var(--tds-outline--focus);
outline-offset: 2px;
}
.tds-theme--replicant
.tds-btn--secondary:not([disabled], .tds--disabled):is(:focus, .tds--focus) {
--tds-btn--background-color: #0000;
color: var(--tds-theme-foreground-high-contrast);
}
.tds-theme--replicant
.tds-btn:is(:hover, .tds--hover):not([disabled], .tds--disabled) {
--tds-btn--background-color: #0000;
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-theme-foreground-on-primary);
}
.tds-theme--replicant .tds-btn:after,
.tds-theme--replicant .tds-btn:before {
content: "";
display: block;
inset: 0;
position: absolute;
transition: 0.5s ease;
}
.tds-theme--replicant .tds-btn:before {
background: var(--tds-theme-foreground-high-contrast);
clip-path: var(--tds-notch);
z-index: -1;
}
:is(
[dir="rtl"].tds-theme--replicant,
[dir="rtl"] .tds-theme--replicant,
.tds-theme--replicant [dir="rtl"]
)
.tds-btn:after,
:is(
[dir="rtl"].tds-theme--replicant,
[dir="rtl"] .tds-theme--replicant,
.tds-theme--replicant [dir="rtl"]
)
.tds-btn:before {
transform: rotateY(180deg);
}
.tds-theme--replicant :is(.tds-btn--secondary, .tds-btn--tertiary):before {
background: #0000;
}
.tds-theme--replicant
.tds-btn:is(:hover, .tds--hover):not([disabled], .tds--disabled):after,
.tds-theme--replicant
.tds-btn:is(:hover, .tds--hover):not([disabled], .tds--disabled):before {
transition: 0.52s ease 0.48s;
}
.tds-theme--replicant .tds-btn--secondary:after {
clip-path: var(--tds-notch--outline);
}
.tds-theme--replicant .tds-btn--secondary:after,
.tds-theme--replicant
.tds-btn--secondary:is(:hover, .tds--hover):not(
[disabled],
.tds--disabled
):before {
background: var(--tds-theme-foreground-high-contrast);
}
.tds-theme--replicant .tds-card .tds-btn--tertiary {
background-color: inherit;
}
:is(.tds-theme--replicant) .tds-chip {
--tds-border-radius--pill: 0;
background-color: var(--tds-theme-foreground-high-contrast);
color: var(--tds-theme-foreground-on-primary);
}
:is(.tds-theme--replicant) .tds-chip--unencapsulated {
color: initial;
}
.tds-theme--replicant .tds-th--sortable .tds-th--inner:before {
border-radius: 0;
}
.tds-form--indent .tds-theme--replicant,
.tds-theme--replicant,
.tds-theme--replicant .tds-form--indent,
.tds-theme--replicant [class*="tds-density--"],
.tds-theme--replicant.tds-form--indent,
.tds-theme--replicant[class*="tds-density--"],
[class*="tds-density--"] .tds-theme--replicant {
--tds-form--indent: 0px;
}
.tds-theme--replicant .tds-form-label {
--tds-form-label--font-size: var(--tds-font-size-20);
color: var(--tds-theme-foreground-high-contrast);
text-transform: var(--tds-heading--text-transform);
}
.tds-theme--replicant .tds-form-input {
background: none;
box-shadow: none;
color: var(--tds-theme-foreground-high-contrast);
}
.tds-theme--replicant .tds-form-input--default:not(.tds-form-input--collapsed) {
--tds-form--indent: 12px;
--tds-form-input--border-color: var(--tds-theme-foreground-high-contrast);
border-radius: 0;
}
.tds-theme--replicant .tds-form--error .tds-form-input--default {
--tds-form-input--border-color: var(--tds-theme-secondary-negative);
}
.tds-scrim--black .tds-theme--replicant .tds-card,
.tds-theme--replicant .tds-scrim--black .tds-card,
.tds-theme--replicant.tds-scrim--black .tds-card {
--tds-color--secondary: var(--tds-color-white);
--tds-form-input--border-color: var(--tds-color-white);
}
.tds-theme--replicant .tds-form-input--default:before {
background-color: var(
--tds-form-input--border-color,
var(--tds-theme-foreground-high-contrast)
);
bottom: 0;
clip-path: var(--tds-notch--outline-thin);
content: "";
display: block;
left: 0;
position: absolute;
right: 0;
top: 0;
transition: clip-path 0.5s ease, background-color 0.5s ease;
}
.tds-theme--replicant .tds-form-input--default:focus-within {
--tds-form-input--border-color: var(--tds-theme-foreground-high-contrast);
outline-offset: 2px;
}
:is(
[dir="rtl"].tds-theme--replicant,
[dir="rtl"] .tds-theme--replicant,
.tds-theme--replicant [dir="rtl"]
)
.tds-form-input--default:before {
transform: rotateY(180deg);
}
.tds-theme--replicant .tds-form-input--default.tds-form-input--readonly:before {
display: none;
}
.tds-theme--replicant .tds-form-input--default:focus-within:before {
clip-path: var(--tds-notch--outline);
}
.tds-theme--replicant
.tds-form-input--default
.tds-form-input.tds-form-input--focus,
.tds-theme--replicant
.tds-form-input--default.tds-form-input.tds-form-input--focus {
--tds-form-input--border-color: var(--tds-theme-foreground-high-contrast);
}
.tds-theme--replicant .tds-form-input-trailing .tds-icon--small {
margin-inline-end: 2px;
}
.tds-theme--replicant .tds-form-input-trailing .tds-icon-btn:last-child {
margin-inline-end: -6px;
}
.tds-theme--replicant .tds-card .tds-form-input--default:before {
--tds-form-input--border-color: var(--tds-theme-foreground-high-contrast);
}
.tds-theme--replicant .tds-form-input-choice {
--tds-text--color--light: var(--tds-theme-foreground-high-contrast);
border-radius: 0;
transition: opacity 0.33s ease;
}
.tds-theme--replicant .tds-form-input-choice:after {
opacity: 0;
transform: none;
transition: opacity 0.33s ease;
}
.tds-theme--replicant
:is(.tds-form-input-choice:checked, .tds-form-input-choice:indeterminate) {
animation: tds-flicker--soft 1s forwards;
opacity: 1;
}
.tds-theme--replicant .tds-form-input-choice:checked:after,
.tds-theme--replicant
.tds-form-input-choice[type="checkbox"]:indeterminate:after {
opacity: 1;
transition: opacity 0.52s ease 0.48s;
}
.tds-theme--replicant .tds-form-input-choice-label .tds-form-label {
font-weight: var(--tds-font-weight-medium);
letter-spacing: inherit;
text-transform: inherit;
}
.tds-theme--replicant .tds-form-input--option {
--tds-form--indent: 0px;
}
.tds-theme--replicant .tds-form-input-hidden-choice + .tds-form-input {
--tds-plus--transform-size: calc((var(--tds-height--choice) + 12px) * -1);
color: var(--tds-theme-foreground);
text-transform: var(--tds-heading--text-transform);
}
.tds-theme--replicant .tds-form-input-hidden-choice + .tds-form-input:hover,
.tds-theme--replicant .tds-form-input-hidden-choice:checked + .tds-form-input {
color: var(--tds-theme-foreground-high-contrast);
}
.tds-theme--replicant .tds-form-input-hidden-choice + .tds-form-input:after {
background: var(--tds-fading-line);
block-size: 3px;
bottom: 0;
box-shadow: 0 0 0 0 rgb(var(--tds-color--rgb-shade) 0.15);
content: "";
display: block;
inline-size: 100%;
margin-block-start: var(--tds-size--half);
opacity: 0.33;
position: absolute;
transition: opacity 0.33s ease, box-shadow 0.33s ease;
}
[dir="rtl"]
.tds-theme--replicant
.tds-form-input-hidden-choice
+ .tds-form-input:after {
transform: rotateY(180deg);
}
.tds-theme--replicant
.tds-form-input-hidden-choice[type="checkbox"]
+ .tds-form-input:after {
transition: opacity 0.52s ease 0.48s, box-shadow 0.52s ease 0.48s;
}
.tds-theme--replicant
.tds-form-input-hidden-choice:checked
+ .tds-form-input:after {
box-shadow: -2px 0 6px 4px rgb(var(--tds-color--rgb-shade) 0.15);
opacity: 1;
}
.tds-theme--replicant .tds-form-input-visual-checkbox {
box-shadow: none;
position: relative;
}
.tds-theme--replicant .tds-form-input-hidden-choice:focus + .tds-form-input {
border-radius: 0;
}
.tds-theme--replicant
.tds-form-input-hidden-choice:focus
+ .tds-form-input
.tds-form-input-visual-checkbox {
box-shadow: none;
}
.tds-theme--replicant .tds-form-input-visual-checkbox:after,
.tds-theme--replicant .tds-form-input-visual-checkbox:before {
animation: turn-off 1s;
background: currentcolor;
block-size: 1em;
content: "";
display: block;
inline-size: 2px;
inset: 0;
margin: auto;
opacity: 1;
position: absolute;
transform: rotate(0deg);
transition: transform 0.52s var(--tds-bezier) 0.48s;
}
.tds-theme--replicant .tds-form-input-visual-checkbox:after {
transform: rotate(90deg);
}
.tds-theme--replicant
.tds-form-input-hidden-choice[type="checkbox"]
+ .tds-form-input
.tds-form-input-leading {
transition: transform 0.52s var(--tds-bezier) 0.48s;
}
.tds-theme--replicant
.tds-form-input-hidden-choice[type="checkbox"]:checked
+ .tds-form-input
.tds-form-input-leading {
animation: turn-on 1s;
transform: translateX(var(--tds-plus--transform-size));
}
.tds-theme--replicant
.tds-form-input-hidden-choice[type="checkbox"]:checked
+ .tds-form-input
.tds-form-input-visual-checkbox:after,
.tds-theme--replicant
.tds-form-input-hidden-choice[type="checkbox"]:checked
+ .tds-form-input
.tds-form-input-visual-checkbox:before {
opacity: 0;
}
.tds-theme--replicant
.tds-form-input-hidden-choice[type="checkbox"]:checked
+ .tds-form-input
.tds-form-input-visual-checkbox:before {
animation: turn-on-before 1s;
transform: rotate(-270deg);
}
.tds-theme--replicant
.tds-form-input-hidden-choice[type="checkbox"]:checked
+ .tds-form-input
.tds-form-input-visual-checkbox:after {
animation: turn-on-after 1s;
transform: rotate(-270deg);
}
@keyframes turn-on {
0% {
transform: translateX(0);
}
48% {
transform: translateX(0);
}
to {
transform: translateX(var(--tds-plus--transform-size));
}
}
@keyframes turn-on-before {
0% {
opacity: 1;
transform: rotate(0deg);
}
8% {
opacity: 0;
}
16% {
opacity: 1;
}
24% {
opacity: 0;
}
32% {
opacity: 1;
}
40% {
opacity: 0;
}
48% {
opacity: 1;
transform: rotate(0deg);
}
to {
opacity: 0;
transform: rotate(-270deg);
}
}
@keyframes turn-on-after {
0% {
opacity: 1;
transform: rotate(90deg);
}
8% {
opacity: 0;
}
16% {
opacity: 1;
}
24% {
opacity: 0;
}
32% {
opacity: 1;
}
40% {
opacity: 0;
}
48% {
opacity: 1;
transform: rotate(90deg);
}
to {
opacity: 0;
transform: rotate(-270deg);
}
}
@keyframes turn-off {
0% {
opacity: 0;
}
8% {
opacity: 1;
}
16% {
opacity: 0;
}
24% {
opacity: 1;
}
32% {
opacity: 0;
}
40% {
opacity: 1;
}
to {
opacity: 1;
}
}
.tds-theme--replicant .tds-link {
box-shadow: 0 0.5px 0 0 #bbbbbbbf;
transition: color 0.33s ease, box-shadow 0.33s ease;
}
.tds-theme--replicant
.tds-link:is(:hover, .tds--hover):not([disabled], .tds--disabled) {
--tds-text--color: var(--tds-theme-foreground-high-contrast);
box-shadow: 0 1.5px 0 0 rgb(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-regular);
}
.tds-theme--replicant
.tds-card:not(.tds-card--outline)
.tds-list
> li
> .tds-icon:first-child {
background-color: var(--tds-color-black);
}
.tds-theme--replicant
.tds-card.tds-card--highlighted
.tds-list
> li
> .tds-icon:first-child {
background-color: var(--tds-color--grey15);
}
.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: initial;
border-radius: 0;
bottom: auto;
box-shadow: none;
color: var(--tds-theme-foreground-high-contrast);
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
[dir="rtl"]
.tds-modal:not(.tds-modal--sheet-right, .tds-modal--sheet-left),
.tds-theme--replicant
[dir="rtl"].tds-modal:not(.tds-modal--sheet-right, .tds-modal--sheet-left),
[dir="rtl"]
.tds-theme--replicant
.tds-modal:not(.tds-modal--sheet-right, .tds-modal--sheet-left),
[dir="rtl"].tds-theme--replicant
.tds-modal:not(.tds-modal--sheet-right, .tds-modal--sheet-left) {
left: unset;
right: 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:after,
.tds-theme--replicant .tds-modal:before {
bottom: 0;
content: "";
display: block;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.tds-theme--replicant .tds-modal:before {
background-color: var(--tds-theme-foreground-high-contrast);
clip-path: var(--tds-notch--outline);
opacity: 1;
transition: 0.5s ease;
}
.tds-theme--replicant .tds-modal:after {
background-color: var(--tds-theme-background-dialog);
clip-path: var(--tds-notch);
opacity: 1;
z-index: -1;
}
.tds-theme--replicant [dir="rtl"] .tds-modal:after,
.tds-theme--replicant [dir="rtl"] .tds-modal:before,
.tds-theme--replicant [dir="rtl"].tds-modal:after,
.tds-theme--replicant [dir="rtl"].tds-modal:before,
[dir="rtl"] .tds-theme--replicant .tds-modal:after,
[dir="rtl"] .tds-theme--replicant .tds-modal:before,
[dir="rtl"].tds-theme--replicant .tds-modal:after,
[dir="rtl"].tds-theme--replicant .tds-modal:before {
transform: rotateY(180deg);
}
.tds-theme--replicant .tds-modal[open]:before {
animation: turn-on-modal-before 1s forwards;
}
@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;
}
to {
opacity: 1;
}
}
.tds-theme--replicant .tds-modal-footer,
.tds-theme--replicant .tds-modal-header {
background-color: initial;
}
@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 {
--tds-modal-border-radius: 0;
}
.tds-theme--replicant .tds-modal--fullscreen {
block-size: var(--tds-modal--full-height);
inline-size: var(--tds-modal--full-width);
}
.tds-modal--fullscreen + .tds-modal-backdrop {
display: block;
}
}
.tds-theme--replicant .tds-modal-close {
background-color: initial;
border-radius: 0;
filter: var(--tds-glow--off);
transition: 0.5s ease;
}
.tds-theme--replicant .tds-modal-close:focus,
.tds-theme--replicant .tds-modal-close:hover {
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);
}
.tds-theme--replicant [dir="rtl"] .tds-modal.tds-modal--sheet-right,
.tds-theme--replicant [dir="rtl"].tds-modal.tds-modal--sheet-right,
[dir="rtl"] .tds-theme--replicant .tds-modal.tds-modal--sheet-right,
[dir="rtl"].tds-theme--replicant .tds-modal.tds-modal--sheet-right {
left: unset;
right: 0;
top: 0;
transform: translateX(100%) translateY(0);
}
.tds-theme--replicant [dir="rtl"] .tds-modal.tds-modal--sheet-left,
.tds-theme--replicant [dir="rtl"].tds-modal.tds-modal--sheet-left,
[dir="rtl"] .tds-theme--replicant .tds-modal.tds-modal--sheet-left,
[dir="rtl"].tds-theme--replicant .tds-modal.tds-modal--sheet-left {
left: 0;
right: unset;
top: 0;
transform: translateX(-100%) translateY(0);
}
.tds-theme--replicant .tds-progress_bar {
--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: #0000;
--tds-progress-bar--border-radius: 1px;
--tds-progress-bar--height: var(--tds-size--3x);
background-color: initial;
box-shadow: none;
padding: 4px;
}
.tds-theme--replicant .tds-progress_bar-wrapper:before {
background: var(--tds-theme-foreground-high-contrast);
bottom: 0;
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);
clip-path: var(--tds-notch_progress);
}
.tds-theme--replicant .tds-progress_bar::-webkit-progress-bar {
box-shadow: none;
}
.tds-progress_bar--primary::-moz-progress-bar {
border-radius: 0;
box-shadow: var(--tds-glow--medium);
clip-path: var(--tds-notch_progress);
}
.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: var(--tds-theme-background-container-alt);
}
.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--layout-vertical)
.tds-icon
+ .tds-card-body,
.tds-theme--replicant
.tds-status_msg:not(.tds-card--open)
.tds-icon
+ .tds-card-body {
padding-inline-start: var(--tds-size--1x);
}
.tds-theme--replicant .tds-switch_toggle {
--tds-border-radius--circle: 0;
--tds-switch_toggle--radius: 0;
}
.tds-theme--replicant .tds-switch_toggle-track:after {
background-color: var(--tds-theme-foreground-on-primary);
}
.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-theme-foreground-on-primary);
}
.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-grey-55);
}
.tds--align_center {
display: block !important;
margin: 0 auto !important;
}
.tds--align_start {
display: block !important;
margin-inline-end: auto !important;
margin-inline-start: 0 !important;
}
.tds--align_end {
display: block !important;
margin-inline-end: 0 !important;
margin-inline-start: auto !important;
}
.tds--animated-backdrop {
block-size: var(--tds-animate-backdrop-height, 0);
inline-size: var(--tds-animate-backdrop-width, 0);
}
.tds--animated-backdrop,
.tds-animate--backdrop-backdrop {
left: var(--tds-animate-backdrop-left, 0);
opacity: var(--tds-animate-backdrop-opacity, 0);
position: absolute;
top: var(--tds-animate-backdrop-top, 0);
transition: var(
--tds-animate-backdrop-transition,
opacity 0.5s ease,
visibility 0s 0s
);
visibility: var(--tds-animate-backdrop-visibility);
}
.tds-animate--backdrop-backdrop {
-webkit-backdrop-filter: blur(var(--tds-blur--button));
backdrop-filter: blur(var(--tds-blur--button));
background-color: var(--tds-theme-background-container-alt);
block-size: var(--tds-animate-backdrop-height, 1px);
border-radius: var(--tds-border-radius--pill);
display: block;
inline-size: var(--tds-animate-backdrop-width, 1px);
z-index: -1;
}
.tds-component-preview,
:root {
--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;
--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);
}
.tds-animate--fade_in,
.tds-animate--fade_out {
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);
}
.tds-animate_small--to_reveal {
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);
z-index: -1;
}
.tds-animate_small--reveal .tds-animate_small--to_reveal {
opacity: var(--tds-opacity--100);
transform: translateZ(0);
z-index: auto;
}
.tds-animate_large--to_reveal {
opacity: var(--tds-opacity--transparent);
transform: translate3d(0, 100px, 0);
z-index: -1;
}
.tds-animate_large--revealed {
opacity: var(--tds-opacity--100);
transform: translateZ(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);
z-index: auto;
}
.tds-animate--squish {
transition: translate 0.1s ease;
}
.tds-animate--bounce {
animation-duration: 2s;
animation-iteration-count: infinite;
animation-name: tds-keyframe--bounce;
}
@keyframes tds-keyframe--fade_out {
0% {
opacity: var(--tds-opacity--100);
}
to {
opacity: var(--tds-opacity--transparent);
}
}
@keyframes tds-keyframe--fade_in {
0% {
opacity: var(--tds-opacity--transparent);
}
to {
opacity: var(--tds-opacity--100);
}
}
@keyframes tds-keyframe--make_smaller {
0% {
max-block-size: 100vh;
opacity: var(--tds-opacity--100);
}
to {
max-block-size: 0;
opacity: var(--tds-opacity--transparent);
}
}
@keyframes tds-keyframe--make_larger {
0% {
max-block-size: 0;
opacity: var(--tds-opacity--transparent);
}
to {
max-block-size: 100vh;
opacity: var(--tds-opacity--100);
}
}
@keyframes tds-keyframe--bounce {
0%,
20%,
50%,
80%,
to {
transform: translateY(0);
}
40% {
transform: translateY(5px);
}
60% {
transform: translateY(3px);
}
}
.tds--fade-in {
animation: var(--tds--fade-in);
}
@keyframes tds--fade-in {
0% {
opacity: 0;
}
to {
opacity: 1;
}
}
.tds--rotating {
animation: var(--tds--rotating);
}
@keyframes tds--rotating {
0% {
transform: rotate(0deg);
}
to {
transform: rotate(1turn);
}
}
.tds--pulsing {
animation: var(--tds--pulsing);
}
@keyframes tds--pulsing {
0% {
opacity: 0;
}
20% {
opacity: 0.7;
}
to {
opacity: 0;
}
}
.tds-columns {
column-gap: 20px;
column-width: auto;
display: block;
}
.tds-columns--two {
column-count: 2;
}
.tds-columns--three {
column-count: 3;
}
@media (min-width: 600px) {
.tds-columns--two_on_desktop {
column-count: 2;
}
.tds-columns--three_on_desktop {
column-count: 3;
}
}
.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);
}
.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;
}
.tds--no_horizontal_padding {
padding-inline-end: 0 !important;
padding-inline-start: 0 !important;
}
.tds--no_vertical_padding {
padding-block-end: 0 !important;
padding-block-start: 0 !important;
}
.tds--no_padding {
padding: 0 !important;
}
.tds--horizontal_padding--small {
padding-inline-end: var(--tds-size--1x) !important;
padding-inline-start: var(--tds-size--1x) !important;
}
.tds--horizontal_padding {
padding-inline-end: var(--tds-size--2x) !important;
padding-inline-start: var(--tds-size--2x) !important;
}
.tds--horizontal_padding--large {
padding-inline-end: var(--tds-size--3x) !important;
padding-inline-start: var(--tds-size--3x) !important;
}
.tds--vertical_padding--small {
padding-block-end: var(--tds-size--1x) !important;
padding-block-start: var(--tds-size--1x) !important;
}
.tds--vertical_padding {
padding-block-end: var(--tds-size--2x) !important;
padding-block-start: var(--tds-size--2x) !important;
}
.tds--vertical_padding--large {
padding-block-end: var(--tds-size--3x) !important;
padding-block-start: var(--tds-size--3x) !important;
}
@media (max-width: 599px) {
.tds--gutterless_on_small {
padding-inline-end: 0 !important;
padding-inline-start: 0 !important;
}
}
.tds-sticky--left,
.tds-sticky--top {
margin: 0;
position: sticky;
z-index: 1;
}
.tds-sticky--top {
top: -1px;
}
.tds-sticky--left {
left: -1px;
}
.tds--is_hidden {
display: none !important;
}
.tds--is_visually_hidden:not(:focus):not(:active) {
clip: rect(0 0 0 0);
block-size: 1px;
border: 0;
clip-path: inset(100%);
inline-size: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
}
.tds--is_visible {
visibility: visible;
}
.tds--is_invisible {
visibility: hidden;
}
@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;
}
}
.tds-status-color--green {
--tds-status-color--background-color: var(--tds-color-status-green);
}
.tds-status-color--green-pastel {
--tds-status-color--background-color: var(--tds-theme-status-green-pastel);
}
.tds-status-color--teal {
--tds-status-color--background-color: var(--tds-color-status-teal);
}
.tds-status-color--teal-pastel {
--tds-status-color--background-color: var(--tds-theme-status-teal-pastel);
}
.tds-status-color--blue {
--tds-status-color--background-color: var(--tds-color-status-blue);
}
.tds-status-color--blue-pastel {
--tds-status-color--background-color: var(--tds-theme-status-blue-pastel);
}
.tds-status-color--purple {
--tds-status-color--background-color: var(--tds-color-status-purple);
}
.tds-status-color--purple-pastel {
--tds-status-color--background-color: var(--tds-theme-status-purple-pastel);
}
.tds-status-color--magenta {
--tds-status-color--background-color: var(--tds-color-status-magenta);
}
.tds-status-color--magenta-pastel {
--tds-status-color--background-color: var(--tds-theme-status-magenta-pastel);
}
.tds-status-color--red {
--tds-status-color--background-color: var(--tds-color-status-red);
}
.tds-status-color--red-pastel {
--tds-status-color--background-color: var(--tds-theme-status-red-pastel);
}
.tds-status-color--orange {
--tds-status-color--background-color: var(--tds-color-status-orange);
}
.tds-status-color--orange-pastel {
--tds-status-color--background-color: var(--tds-theme-status-orange-pastel);
}
.tds-status-color--yellow {
--tds-status-color--background-color: var(--tds-color-status-yellow);
}
.tds-status-color--yellow-pastel {
--tds-status-color--background-color: var(--tds-theme-status-yellow-pastel);
}
.tds-status-color--grey {
--tds-status-color--background-color: var(--tds-color-status-grey);
}
.tds-status-color--grey-pastel {
--tds-status-color--background-color: var(--tds-theme-status-grey-pastel);
}
@font-face {
font-display: swap;
font-family: Blender TSL;
font-style: normal;
font-weight: 700;
src: url(/tesla-design-system/raw/upload/static/fonts/blender/web/Blender-TSL-Bold.woff2)
format("woff2");
}
@font-face {
font-display: swap;
font-family: Blender TSL;
font-style: normal;
font-weight: 500;
src: url(/tesla-design-system/raw/upload/static/fonts/blender/web/Blender-TSL-Medium.woff2)
format("woff2");
}
@font-face {
font-display: swap;
font-family: Blender TSL;
font-style: normal;
font-weight: 400;
src: url(/tesla-design-system/raw/upload/static/fonts/blender/web/Blender-TSL-Book.woff2)
format("woff2");
}
@font-face {
font-display: swap;
font-family: CT Speed;
font-style: normal;
font-weight: 400;
src: url(/tesla-design-system/raw/upload/static/fonts/ct-speed/web/CT-Speed.woff2)
format("woff2");
unicode-range: u+0044, u+0050, u+0052, u+004e, u+0030-0039;
}
:root {
--tcl-font-family-base-blender: "Blender TSL";
--tcl-font-family-base-ct-speed: "CT Speed";
--tcl-font-family-fallback-blender: var(--tds-font-family-fallback-text);
--tcl-font-family-fallback-ct-speed: var(
--tds-font-family-fallback-monospace
);
--tcl-font-family-latin-blender: var(--tcl-font-family-base-blender),
var(--tcl-font-family-fallback-blender);
--tcl-font-family-arabic-blender: var(--tcl-font-family-base-blender),
"Noto Sans Arabic", var(--tcl-font-family-fallback-blender);
--tcl-font-family-greek-blender: var(--tcl-font-family-base-blender),
var(--tcl-font-family-fallback-blender);
--tcl-font-family-hebrew-blender: var(--tcl-font-family-base-blender),
"Noto Sans Hebrew", var(--tcl-font-family-fallback-blender);
--tcl-font-family-thai-blender: var(--tcl-font-family-base-blender),
"Noto Sans Thai", var(--tcl-font-family-fallback-blender);
--tcl-font-family-korean-blender: var(--tcl-font-family-base-blender),
"Noto Sans KR", var(--tcl-font-family-fallback-blender);
--tcl-font-family-japanese-blender: var(--tcl-font-family-base-blender),
"AXIS Font Japanese W55", "Hiragino Sans",
var(--tcl-font-family-fallback-blender);
--tcl-font-family-chinese-simplified-blender: var(
--tcl-font-family-base-blender
),
"PingFang SC", "Microsoft YaHei", var(--tcl-font-family-fallback-blender);
--tcl-font-family-chinese-hk-blender: var(--tcl-font-family-base-blender),
"PingFang HK", "Microsoft YaHei", var(--tcl-font-family-fallback-blender);
--tcl-font-family-chinese-traditional-blender: var(
--tcl-font-family-base-blender
),
"PingFang TC", "Microsoft YaHei", var(--tcl-font-family-fallback-blender);
--tcl-font-family-latin-ct-speed: var(--tcl-font-family-base-ct-speed),
var(--tcl-font-family-fallback-ct-speed);
--tcl-font-family-arabic-ct-speed: var(--tcl-font-family-base-ct-speed),
"Noto Sans Mono", var(--tcl-font-family-fallback-ct-speed);
--tcl-font-family-greek-ct-speed: var(--tcl-font-family-base-ct-speed),
"Noto Sans Mono", var(--tcl-font-family-fallback-ct-speed);
--tcl-font-family-hebrew-ct-speed: var(--tcl-font-family-base-ct-speed),
"Noto Sans Mono", var(--tcl-font-family-fallback-ct-speed);
--tcl-font-family-thai-ct-speed: var(--tcl-font-family-base-ct-speed),
"Noto Sans Mono", var(--tcl-font-family-fallback-ct-speed);
--tcl-font-family-korean-ct-speed: var(--tcl-font-family-base-ct-speed),
var(--tcl-font-family-fallback-ct-speed);
--tcl-font-family-japanese-ct-speed: var(--tcl-font-family-base-ct-speed),
var(--tcl-font-family-fallback-ct-speed);
--tcl-font-family-chinese-simplified-ct-speed: var(
--tcl-font-family-base-ct-speed
),
"PingFang Mono SC", "Microsoft YaHei Mono",
var(--tcl-font-family-fallback-ct-speed);
--tcl-font-family-chinese-hk-ct-speed: var(--tcl-font-family-base-ct-speed),
"PingFang Mono HK", "Microsoft YaHei Mono",
var(--tcl-font-family-fallback-ct-speed);
--tcl-font-family-chinese-traditional-ct-speed: var(
--tcl-font-family-base-ct-speed
),
"PingFang Mono HK", "Microsoft YaHei Mono",
var(--tcl-font-family-fallback-ct-speed);
}
.page-cyber main {
font-family: var(--tcl-font-family-latin-blender);
text-rendering: optimizelegibility;
}
:is(.page-cyber main):lang(ar) {
font-family: var(--tds-font-family-arabic-blender);
}
:is(.page-cyber main):lang(el) {
font-family: var(--tds-font-family-greek-blender);
}
:is(.page-cyber main):lang(he) {
font-family: var(--tcl-font-family-hebrew-blender);
}
:is(.page-cyber main):lang(th) {
font-family: var(--tcl-font-family-thai-blender);
}
:is(.page-cyber main):lang(ko) {
font-family: var(--tcl-font-family-korean-blender);
}
:is(.page-cyber main):lang(ja) {
font-family: var(--tcl-font-family-japanese-blender);
}
:is(.page-cyber main):lang(zh) {
font-family: var(--tcl-font-family-chinese-simplified-blender);
}
:is(.page-cyber main):lang(zh-HK) {
font-family: var(--tcl-font-family-chinese-hk-blender);
}
:is(.page-cyber main):is(:lang(zh-MO), :lang(zh-TW)) {
font-family: var(--tcl-font-family-chinese-traditional-blender);
}
.page-cyber
main
:is(
h1,
h2,
h3,
h4,
.tds-text--h1,
.tds-text--h2,
.tds-text--h3,
.tds-text--h4,
.tds-text--h5,
.tds-text--body,
.tds-btn--primary,
.tds-btn--secondary,
.tds-text--medium,
.tds-text--regular,
.dx-hero-badges__primary-copy,
.dx-hero-badges__secondary-copy,
.dx-hero-badges__tertiary-copy,
.primary-copy,
.secondary-copy,
.dx-freeflow-carousel-slide-description
) {
font-family: var(--tcl-font-family-latin-blender);
}
.page-cyber main :is(h1, .tds-text--h1, .primary-copy) {
font-weight: 500;
}
.page-cyber main :is(.dx-hero-badges__primary-copy, .tcl-countdown__timer) {
font-family: var(--tcl-font-family-latin-ct-speed);
font-size: var(--tds-size--2x);
}
:is(.page-cyber main):lang(ar)
:is(.dx-hero-badges__primary-copy, .tcl-countdown__timer) {
font-family: var(--tcl-font-family-arabic-ct-speed);
}
:is(.page-cyber main):lang(el)
:is(.dx-hero-badges__primary-copy, .tcl-countdown__timer) {
font-family: var(--tcl-font-family-greek-ct-speed);
}
:is(.page-cyber main):lang(he)
:is(.dx-hero-badges__primary-copy, .tcl-countdown__timer) {
font-family: var(--tcl-font-family-hebrew-ct-speed);
}
:is(.page-cyber main):lang(th)
:is(.dx-hero-badges__primary-copy, .tcl-countdown__timer) {
font-family: var(--tcl-font-family-thai-ct-speed);
}
:is(.page-cyber main):lang(ko)
:is(.dx-hero-badges__primary-copy, .tcl-countdown__timer) {
font-family: var(--tcl-font-family-korean-ct-speed);
}
:is(.page-cyber main):lang(ja)
:is(.dx-hero-badges__primary-copy, .tcl-countdown__timer) {
font-family: var(--tcl-font-family-japanese-ct-speed);
}
:is(.page-cyber main):lang(zh)
:is(.dx-hero-badges__primary-copy, .tcl-countdown__timer) {
font-family: var(--tcl-font-family-chinese-simplified-ct-speed);
}
:is(.page-cyber main):is(:lang(zh-MO), :lang(zh-TW))
:is(.dx-hero-badges__primary-copy, .tcl-countdown__timer),
:is(.page-cyber main):lang(zh-HK)
:is(.dx-hero-badges__primary-copy, .tcl-countdown__timer) {
font-family: var(--tcl-font-family-chinese-traditional-ct-speed);
}
.tds-theme--replicant-v2,
.tds-theme--replicant-v2 .tds-scrim--black {
--tds-color-ct-highlight-line: #fff9;
--tds-color-ct-small-indicator: #393c41;
--tds-color-ct-accent-line: #393c41;
--tds-color-ct-dotted-grid: #393c41;
--tds-color-ct-separator: #393c41;
--tds-color-ct-faded-bg: #11111180;
--tds-color-ct-frosted-glass: linear-gradient(270deg, #0000001a, #fff0);
--tds-theme-foreground: var(--tds-color-grey-40);
--tds-color-ct-body: #8e8e8e;
--tds-color-ct-h1: #c7c7c7;
--tds-color-ct-h2: #a2a3a5;
--tds-color-ct-h5: #a2a3a5;
--tds-color-ct-bg: #111;
--tds-color-ct-specs: #0f0f0f;
--tds-color-ct-parallax: linear-gradient(360deg, #2c2c2c1a, #fff0);
--tds-color-ct-carousel: linear-gradient(270deg, #0000001a, #fff0);
--tds-dotted-bg: radial-gradient(
var(--tds-color-ct-dotted-grid) 1px,
#0000 0
);
--tds-dotted-bg-gradient: linear-gradient(
180deg,
#0000 0%,
var(--tds-color-ct-bg) 100%
);
--tds-dotted-bg-gradient-reversed: linear-gradient(
180deg,
var(--tds-color-ct-bg) 0%,
#0000 100%
);
--tds-blur--extra-small: 2px;
--tds-color-ct-focused-btn-bg: #ffffff26;
--tds-color-ct-focused-secondary-btn-bg: #ffffff0f;
--tds-color-ct-focused-secondary-btn-border: #fffc;
--tds-color-ct-focused-ternary-btn-border: #fffc;
--tds-color-ct-focused-ternary-btn-bg: #ffffff26;
--tds-notch: polygon(
0 0,
100% 0,
100% calc(100% - 10px),
calc(100% - 10px) 100%,
0 100%
);
--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
);
--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
);
--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-border-radius: 0;
--tds-border-radius--card: 0;
--tds-border-radius--card--dense: 0;
--tds-border-radius--outline-only: 0;
--tds-border-radius--pill: 0;
--tds-heading--font-weight: var(--tds-font-weight-bold);
--tds-form--indent: 0;
--tds-form-input-choice--check-size: 16px;
--tds-form-input-choice--radio-size: 10px;
--tds-height--choice: var(--tds-size-2x);
--dx-fixed-background--eyebrow-color: var(--tds-color-ct-h2);
background-color: var(--tds-color-ct-bg);
color: var(--tds-color-ct-body);
color-scheme: dark;
font-size: var(--tds-font-size-20);
font-style: normal;
font-weight: var(--tds-font-weight-regular);
line-height: var(--tds-line-height-40);
}
.tds-theme--replicant-v2 .primary-copy,
.tds-theme--replicant-v2 .tds-text--h1,
.tds-theme--replicant-v2 h1 {
color: var(--tds-color-ct-h1);
font-size: var(--tds-font-size-70);
line-height: 34px;
padding: 0;
}
.tds-theme--replicant-v2 .secondary-copy,
.tds-theme--replicant-v2 .tds-text--h2,
.tds-theme--replicant-v2 h2 {
color: var(--tds-color-ct-h2);
font-size: 18px;
font-weight: 400;
line-height: 22px;
padding: 0;
}
.tds-theme--replicant-v2 h5 {
color: var(--tds-color-grey-40, --tds-color-ct-h5);
}
.tds-theme--replicant-v2 .hero {
color: var(--tds-color-white);
font-size: 16px;
font-weight: 500;
line-height: 22px;
z-index: 4;
}
.tds-theme--replicant-v2 p {
color: var(--tds-color-ct-body);
}
.tds-theme--replicant-v2 .tds-text--body {
color: var(--tds-color-ct-body);
line-height: 26px;
}
.tds-theme--replicant-v2
:is(.tds-icon-logo-cybertruck, .tds-icon-logo-cybertruck-foundation) {
height: 100%;
width: 100%;
}
.tds-theme--replicant-v2
:is(
.tds-icon-logo-cybertruck,
.tds-icon-logo-cybertruck-foundation,
.tds-icon-logo-cybertruck-foundation-alt
) {
fill: var(--tds-color-white);
color: var(--tds-color-white);
}
@media (hover: hover) {
.tds-theme--replicant-v2
.tds-link:is(:hover, .tds--hover):not(
.tds-link--primary,
.tds-link--vertical
):not([disabled], .tds--disabled) {
box-shadow: 0 var(--tds-border-width--small) 0 0 currentColor;
color: var(--tds-theme-foreground);
}
}
.tds-theme--replicant-v2
section
a:not(.tcl-link, .tds-link):is(a, :hover, :visited, :active) {
text-decoration: none;
}
@media (--tds-phone-only) {
.tds-theme--replicant-v2 .tds-text--body {
color: var(--tds-color-ct-body);
line-height: 24px;
}
}
@media (--tds-tablet-portrait-up) {
.tds-theme--replicant-v2 .permanent-cta---button-link {
min-width: 200px;
}
}
.ct-highlight-line {
background-color: var(--tds-color-ct-highlight-line);
}
.tds-theme--replicant-v2 [class*="tds-scrim--"]:not(.tds-scrim--blur) {
color: var(--tds-theme-foreground);
}
.tds-theme--replicant-media-bottom-left,
.tds-theme--replicant-media-bottom-right,
.tds-theme--replicant-media-top-left,
.tds-theme--replicant-media-top-right {
display: inline-block;
position: relative;
}
.tds-theme--replicant-media-bottom-left img,
.tds-theme--replicant-media-bottom-right img,
.tds-theme--replicant-media-top-left img,
.tds-theme--replicant-media-top-right img {
display: block;
width: 100%;
}
.tds-theme--replicant-v2
.tds-theme--replicant--has_img
[class*="tds-scrim--"]:not(.tds-scrim--blur) {
--tds-theme-background: #0000;
}
.tds-theme--replicant-dotted-bg {
background-image: var(--tds-dotted-bg);
background-position: -20px -9px;
background-size: 20px 20px;
position: relative;
z-index: 0;
}
.tds-theme--replicant-dotted-bg:before {
background-image: var(--tds-dotted-bg-gradient);
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: -1;
}
.tds-theme--replicant-dotted-bg.tds-theme--replicant-dotted-bg--reversed:before {
background-image: var(--tds-dotted-bg-gradient-reversed);
}
.tds-theme--opaque-bg,
.tds-theme--replicant-opaque-bg {
-webkit-backdrop-filter: blur(var(--tds-blur--small));
backdrop-filter: blur(var(--tds-blur--small));
background: none;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
.tds-theme--opaque-bg,
.tds-theme--replicant-opaque-bg:before {
background-color: var(--tds-color-ct-bg);
content: "";
display: block;
height: 100%;
opacity: 0.8;
position: absolute;
width: 100%;
}
.tds-theme--replicant-masked-bg {
background-color: var(--tds-color-ct-bg);
-webkit-mask-image: linear-gradient(var(--tds-color-ct-bg), #0000);
mask-image: linear-gradient(var(--tds-color-ct-bg), #0000);
}
.tds-theme--replicant-faded-bg-bottom:after {
-webkit-mask-image: linear-gradient(#0000, var(--tds-color-ct-bg));
mask-image: linear-gradient(#0000, var(--tds-color-ct-bg));
}
.tds-theme--replicant-faded-bg-bottom:after,
.tds-theme--replicant-faded-bg-top:after {
background-color: var(--tds-color-ct-bg);
content: "";
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
.tds-theme--replicant-faded-bg-top:after {
-webkit-mask-image: linear-gradient(var(--tds-color-ct-bg), #0000);
mask-image: linear-gradient(var(--tds-color-ct-bg), #0000);
}
.tds-theme--replicant-faded-bg-bottom,
.tds-theme--replicant-faded-bg-top {
bottom: 0;
height: 20vh;
position: absolute;
width: 100%;
z-index: 3;
}
.page-cybertruck .tcl-permanent-cta .tds-btn--primary {
background: var(--tds-color-grey-20);
}
@media (--tds-phone-only) {
.tds-theme--replicant-faded-bg-bottom,
.tds-theme--replicant-faded-bg-top {
height: 10vh;
}
}
.tds-theme--replicant-faded-bg-top {
top: 0;
}
.tds-theme--replicant-copy-legal {
font-size: 11px;
font-weight: 400;
line-height: 17px;
}
.tds-theme--replicant-v2 .dx-end-content {
align-content: end;
align-items: end;
bottom: 0;
}
.tds-theme--replicant-copy-legal p {
max-inline-size: 100%;
}
.tds-theme--replicant-v2 [class*="tds-clip-"] {
--clip-size: 20px;
--top-left-normal: 0 0;
--top-left-clip: 0 var(--clip-size), var(--clip-size) 0;
--top-right-normal: 100% 0;
--top-right-clip: calc(100% - var(--clip-size)) 0, 100% var(--clip-size);
--bottom-right-normal: 100% 100%;
--bottom-right-clip: 100% calc(100% - var(--clip-size)),
calc(100% - var(--clip-size)) 100%;
--bottom-left-normal: 0 100%;
--bottom-left-clip: var(--clip-size) 100%, 0 calc(100% - var(--clip-size));
--clip: polygon(
var(--top-left, var(--top-left-normal)),
var(--top-right, var(--top-right-normal)),
var(--bottom-right, var(--bottom-right-normal)),
var(--bottom-left, var(--bottom-left-normal))
);
clip-path: var(--clip);
}
.tds-theme--replicant-v2 .tds-clip-top-left {
--top-right: var(--top-right-normal);
--bottom-right: var(--bottom-right-normal);
--top-left: var(--top-left-clip);
--bottom-left: var(--bottom-left-normal);
}
.tds-theme--replicant-v2 .tds-clip-top-right {
--top-right: var(--top-right-clip);
--bottom-right: var(--bottom-right-normal);
--top-left: var(--top-left-normal);
--bottom-left: var(--bottom-left-normal);
}
.tds-theme--replicant-v2 .tds-clip-bottom-right {
--top-right: var(--top-right-normal);
--bottom-right: var(--bottom-right-clip);
--top-left: var(--top-left-normal);
--bottom-left: var(--bottom-left-normal);
}
.tds-theme--replicant-v2 .tds-clip-bottom-left {
--top-right: var(--top-right-normal);
--bottom-right: var(--bottom-right-normal);
--top-left: var(--top-left-normal);
--bottom-left: var(--bottom-left-clip);
}
[dir="rtl"] .tds-theme--replicant-v2 .tds-clip-top-left:not(.clip-top-right) {
--top-left: var(--top-left-normal);
--top-right: var(--top-right-clip);
}
[dir="rtl"] .tds-theme--replicant-v2 .tds-clip-top-right:not(.clip-top-left) {
--top-right: var(--top-right-normal);
--top-left: var(--top-left-clip);
}
[dir="rtl"]
.tds-theme--replicant-v2
.tds-clip-bottom-right:not(.clip-bottom-left) {
--bottom-right: var(--bottom-right-normal);
--bottom-left: var(--bottom-left-clip);
}
[dir="rtl"]
.tds-theme--replicant-v2
.tds-clip-bottom-left:not(.clip-bottom-right) {
--bottom-left: var(--bottom-left-normal);
--bottom-right: var(--bottom-right-clip);
}
.tds-theme--replicant-v2 [class*="tds-outline"] {
--clipped-outline-size: 300px;
--non-clipped-outline-size: 48px;
--outline-top-left-basic: linear-gradient(var(--tds-color-ct-accent-line) 0 0)
top left / 1px var(--non-clipped-outline-size),
linear-gradient(var(--tds-color-ct-accent-line) 0 0) top left /
var(--non-clipped-outline-size) 1px;
--outline-top-left-clip: linear-gradient(
135deg,
var(--tds-color-ct-accent-line) 15px,
#0000 15px
),
linear-gradient(var(--tds-color-ct-accent-line) 0 0) top left / 1px
var(--clipped-outline-size),
linear-gradient(var(--tds-color-ct-accent-line) 0 0) top left /
var(--clipped-outline-size) 1px;
--outline-top-right-basic: linear-gradient(
var(--tds-color-ct-accent-line) 0 0
)
top right / 1px var(--non-clipped-outline-size),
linear-gradient(var(--tds-color-ct-accent-line) 0 0) top right /
var(--non-clipped-outline-size) 1px;
--outline-top-right-clip: linear-gradient(
-135deg,
var(--tds-color-ct-accent-line) 15px,
#0000 15px
),
linear-gradient(var(--tds-color-ct-accent-line) 0 0) top right / 1px
var(--clipped-outline-size),
linear-gradient(var(--tds-color-ct-accent-line) 0 0) top right /
var(--clipped-outline-size) 1px;
--outline-bottom-right-basic: linear-gradient(
var(--tds-color-ct-accent-line) 0 0
)
bottom right / 1px var(--non-clipped-outline-size),
linear-gradient(var(--tds-color-ct-accent-line) 0 0) bottom right /
var(--non-clipped-outline-size) 1px;
--outline-bottom-right-clip: linear-gradient(
-45deg,
var(--tds-color-ct-accent-line) 15px,
#0000 15px
),
linear-gradient(var(--tds-color-ct-accent-line) 0 0) bottom right / 1px
var(--clipped-outline-size),
linear-gradient(var(--tds-color-ct-accent-line) 0 0) bottom right /
var(--clipped-outline-size) 1px;
--outline-bottom-left-basic: linear-gradient(
var(--tds-color-ct-accent-line) 0 0
)
bottom left / 1px var(--non-clipped-outline-size),
linear-gradient(var(--tds-color-ct-accent-line) 0 0) bottom left /
var(--non-clipped-outline-size) 1px;
--outline-bottom-left-clip: linear-gradient(
45deg,
var(--tds-color-ct-accent-line) 15px,
#0000 15px
),
linear-gradient(var(--tds-color-ct-accent-line) 0 0) bottom left / 1px
var(--clipped-outline-size),
linear-gradient(var(--tds-color-ct-accent-line) 0 0) bottom left /
var(--clipped-outline-size) 1px;
--outline-bottom-full-left-60-basic: linear-gradient(
var(--tds-color-ct-accent-line) 0 0
)
bottom left / 100% 1px,
linear-gradient(var(--tds-color-ct-accent-line) 0 0) bottom left / 1px 60%;
--outline-bottom-full-left-60-clip: linear-gradient(
45deg,
#333 15px,
#0000 15px
),
var(--outline-bottom-full-left-60-basic);
--outline-bottom-60-left-basic: linear-gradient(
var(--tds-color-ct-accent-line) 0 0
)
bottom left / 60% 1px,
linear-gradient(var(--tds-color-ct-accent-line) 0 0) bottom left / 1px 100%;
--outline-bottom-60-left-clip: linear-gradient(45deg, #333 15px, #0000 15px),
var(--outline-bottom-60-left-basic);
--outline-bottom-60-right-basic: linear-gradient(
var(--tds-color-ct-accent-line) 0 0
)
bottom right / 60% 1px,
linear-gradient(var(--tds-color-ct-accent-line) 0 0) bottom right / 1px 100%;
--outline-bottom-60-right-clip: linear-gradient(-45deg, #333 15px, #0000 15px),
var(--outline-bottom-60-right-basic);
--outline-top-full-right-60-basic: linear-gradient(
var(--tds-color-ct-accent-line) 0 0
)
top right / 100% 1px,
linear-gradient(var(--tds-color-ct-accent-line) 0 0) top right / 1px 60%;
--outline-top-full-right-60-clip: linear-gradient(
-135deg,
#333 15px,
#0000 15px
),
var(--outline-top-full-right-60-basic);
--outline-bottom-full-right-60-basic: linear-gradient(
var(--tds-color-ct-accent-line) 0 0
)
bottom right / 100% 1px,
linear-gradient(var(--tds-color-ct-accent-line) 0 0) bottom right / 1px 60%;
--outline-bottom-full-right-60-clip: linear-gradient(
-45deg,
#333 15px,
#0000 15px
),
var(--outline-bottom-full-right-60-basic);
--outline-top-full-left-60-basic: linear-gradient(
var(--tds-color-ct-accent-line) 0 0
)
top left / 100% 1px,
linear-gradient(var(--tds-color-ct-accent-line) 0 0) top left / 1px 60%;
--outline-top-full-left-60-clip: linear-gradient(
135deg,
#333 15px,
#0000 15px
),
var(--outline-top-full-left-60-basic);
--outline-upper-left-basic: linear-gradient(
var(--tds-color-ct-accent-line) 0 0
)
top left / 1px 30%;
--outline-upper-right-basic: linear-gradient(
var(--tds-color-ct-accent-line) 0 0
)
top right / 1px 30%;
--dummy-gradient: linear-gradient(#0000 0 0);
--outline-background: var(--outline-top-left, var(--dummy-gradient)),
var(--outline-top-right, var(--dummy-gradient)),
var(--outline-bottom-right, var(--dummy-gradient)),
var(--outline-bottom-left, var(--dummy-gradient)),
var(--outline-bottom-full-left-60, var(--dummy-gradient)),
var(--outline-bottom-60-left, var(--dummy-gradient)),
var(--outline-bottom-60-right, var(--dummy-gradient)),
var(--outline-bottom-full-right-60, var(--dummy-gradient)),
var(--outline-top-full-left-60, var(--dummy-gradient)),
var(--outline-upper-left, var(--dummy-gradient)),
var(--outline-upper-right, var(--dummy-gradient)),
var(--outline-top-full-right-60, var(--dummy-gradient));
background: var(--outline-background);
background-repeat: no-repeat;
color: var(--tds-color-ct-accent-line);
}
.tds-theme--replicant-v2 .tds-outline-top-left {
--outline-top-left: var(--outline-top-left-basic);
}
.tds-theme--replicant-v2 .tds-outline-top-left.tds-clip-top-left {
--outline-top-left: var(--outline-top-left-clip);
}
.tds-theme--replicant-v2 .tds-outline-top-right {
--outline-top-right: var(--outline-top-right-basic);
}
.tds-theme--replicant-v2 .tds-outline-top-right.tds-clip-top-right {
--outline-top-right: var(--outline-top-right-clip);
}
.tds-theme--replicant-v2 .tds-outline-bottom-right {
--outline-bottom-right: var(--outline-bottom-right-basic);
}
.tds-theme--replicant-v2 .tds-outline-bottom-right.tds-clip-bottom-right {
--outline-bottom-right: var(--outline-bottom-right-clip);
}
.tds-theme--replicant-v2 .tds-outline-bottom-left {
--outline-bottom-left: var(--outline-bottom-left-basic);
}
.tds-theme--replicant-v2 .tds-outline-bottom-left.tds-clip-bottom-left {
--outline-bottom-left: var(--outline-bottom-left-clip);
}
.tds-theme--replicant-v2 .tds-outline-bottom-full-left-60 {
--outline-bottom-full-left-60: var(--outline-bottom-full-left-60-basic);
}
.tds-theme--replicant-v2 .tds-outline-bottom-full-left-60.tds-clip-bottom-left {
--outline-bottom-full-left-60: var(--outline-bottom-full-left-60-clip);
}
.tds-theme--replicant-v2 .tds-outline-bottom-60-left {
--outline-bottom-60-left: var(--outline-bottom-60-left-basic);
}
.tds-theme--replicant-v2 .tds-outline-bottom-60-left.tds-clip-bottom-left {
--outline-bottom-60-left: var(--outline-bottom-60-left-clip);
}
.tds-theme--replicant-v2 .tds-outline-bottom-60-right {
--outline-bottom-60-right: var(--outline-bottom-60-right-basic);
}
.tds-theme--replicant-v2 .tds-outline-bottom-60-right.tds-clip-bottom-right {
--outline-bottom-60-right: var(--outline-bottom-60-right-clip);
}
.tds-theme--replicant-v2 .tds-outline-top-full-right-60 {
--outline-top-full-right-60: var(--outline-top-full-right-60-basic);
}
.tds-theme--replicant-v2 .tds-outline-top-full-right-60.tds-clip-top-right {
--outline-top-full-right-60: var(--outline-top-full-right-60-clip);
}
.tds-theme--replicant-v2 .tds-outline-bottom-full-right-60 {
--outline-bottom-full-right-60: var(--outline-bottom-full-right-60-basic);
}
.tds-theme--replicant-v2
.tds-outline-bottom-full-right-60.tds-clip-bottom-right {
--outline-bottom-full-right-60: var(--outline-bottom-full-right-60-clip);
}
.tds-theme--replicant-v2 .tds-outline-top-full-left-60 {
--outline-top-full-left-60: var(--outline-top-full-left-60-basic);
}
.tds-theme--replicant-v2 .tds-outline-top-full-left-60.tds-clip-top-left {
--outline-top-full-left-60: var(--outline-top-full-left-60-clip);
}
.tds-theme--replicant-v2 .tds-outline-upper-left {
--outline-upper-left: var(--outline-upper-left-basic);
}
.tds-theme--replicant-v2 .tds-outline-upper-right {
--outline-upper-right: var(--outline-upper-right-basic);
}
[dir="rtl"]
.tds-theme--replicant-v2
.tds-outline-top-left:not(.tds-outline-top-right) {
--outline-top-right: var(--outline-top-right-basic);
--outline-top-left: var(--dummy-gradient);
}
[dir="rtl"]
.tds-theme--replicant-v2
.tds-outline-top-left:not(.tds-outline-top-right).tds-clip-top-left {
--outline-top-right: var(--outline-top-right-clip);
}
[dir="rtl"]
.tds-theme--replicant-v2
.tds-outline-top-right:not(.tds-outline-top-left) {
--outline-top-left: var(--outline-top-left-basic);
--outline-top-right: var(--dummy-gradient);
}
[dir="rtl"]
.tds-theme--replicant-v2
.tds-outline-top-right:not(.tds-outline-top-left).tds-clip-top-right {
--outline-top-left: var(--outline-top-left-clip);
}
[dir="rtl"] .tds-theme--replicant-v2 .tds-outline-bottom-left {
--outline-bottom-right: var(--outline-bottom-right-basic);
--outline-bottom-left: var(--dummy-gradient);
}
[dir="rtl"]
.tds-theme--replicant-v2
.tds-outline-bottom-left.tds-clip-bottom-left {
--outline-bottom-right: var(--outline-bottom-right-clip);
}
[dir="rtl"] .tds-theme--replicant-v2 .tds-outline-bottom-right {
--outline-bottom-left: var(--outline-bottom-left-basic);
--outline-bottom-right: var(--dummy-gradient);
}
[dir="rtl"]
.tds-theme--replicant-v2
.tds-outline-bottom-right.tds-clip-bottom-right {
--outline-bottom-left: var(--outline-bottom-left-clip);
}
[dir="rtl"]
.tds-theme--replicant-v2
.tds-outline-bottom-full-left-60:not(.tds-outline-bottom-full-right-60) {
--outline-bottom-full-left-60: var(--outline-bottom-full-right-60-basic);
--outline-bottom-full-right-60: var(--dummy-gradient);
}
[dir="rtl"]
.tds-theme--replicant-v2
.tds-outline-bottom-full-left-60:not(
.tds-outline-bottom-full-right-60
).tds-clip-bottom-left {
--outline-bottom-full-left-60: var(--outline-bottom-full-right-60-clip);
}
[dir="rtl"]
.tds-theme--replicant-v2
.tds-outline-top-full-right-60:not(.tds-outline-top-full-left-60) {
--outline-top-full-right-60: var(--outline-top-full-left-60-basic);
--outline-top-full-left-60: var(--dummy-gradient);
}
[dir="rtl"]
.tds-theme--replicant-v2
.tds-outline-top-full-right-60:not(
.tds-outline-top-full-left-60
).tds-clip-top-right {
--outline-top-full-right-60: var(--outline-top-full-left-60-clip);
}
[dir="rtl"]
.tds-theme--replicant-v2
.tds-outline-bottom-60-left:not(.tds-outline-bottom-60-right) {
--outline-bottom-60-left: var(--outline-bottom-60-right-basic);
--outline-bottom-60-right: var(--dummy-gradient);
}
[dir="rtl"]
.tds-theme--replicant-v2
.tds-outline-bottom-60-left:not(
.tds-outline-bottom-60-right
).tds-clip-bottom-left {
--outline-bottom-60-left: var(--outline-bottom-60-right-clip);
}
[dir="rtl"]
.tds-theme--replicant-v2
.tds-outline-upper-left:not(.tds-outline-upper-right) {
--outline-upper-left: var(--outline-upper-right-basic);
--outline-upper-right: var(--dummy-gradient);
}
[dir="rtl"]
.tds-theme--replicant-v2
.tds-outline-upper-right:not(.tds-outline-upper-left) {
--outline-upper-right: var(--outline-upper-left-basic);
--outline-upper-left: var(--dummy-gradient);
}
.tds-colorscheme--light .tds-theme--replicant-v2,
.tds-scrim--light .tds-theme--replicant-v2,
.tds-scrim--white .tds-theme--replicant-v2,
.tds-theme--replicant-v2,
.tds-theme--replicant-v2 .tds-colorscheme--light,
.tds-theme--replicant-v2 .tds-scrim--light,
.tds-theme--replicant-v2 .tds-scrim--white,
.tds-theme--replicant-v2.tds-colorscheme--light,
.tds-theme--replicant-v2.tds-scrim--light,
.tds-theme--replicant-v2.tds-scrim--white {
--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: #0000;
--tds-theme-foreground-on-primary: var(--tds-color--white);
--tds-theme-primary: var(--tds-color-grey-10);
--tds-theme-primary-highlight: var(--tds-color-grey-10);
}
.tds-colorscheme--dark .tds-theme--replicant-v2,
.tds-scrim--black .tds-theme--replicant-v2,
.tds-theme--replicant-v2 .tds-colorscheme--dark,
.tds-theme--replicant-v2 .tds-scrim--black,
.tds-theme--replicant-v2.tds-colorscheme--dark,
.tds-theme--replicant-v2.tds-scrim--black {
--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: #0000;
--tds-dialog--background-color: var(--tds-color--black);
--tds-text--color: var(--tds-color--grey45);
--tds-text--color--light: var(--tds-color--grey35);
--tds-text--color--placeholder: var(--tds-color--grey45);
--tds-theme-foreground-on-primary: var(--tds-color--black);
--tds-theme-primary: var(--tds-color-white);
--tds-theme-primary-highlight: var(--tds-color-grey-60);
background-color: var(--tds-color--black);
}
.tds-theme--replicant-v2
:is(.tds-colorscheme--dark, .tds-scrim--black)
.tds-date-picker,
.tds-theme--replicant:is(.tds-colorscheme--dark, .tds-scrim--black)
.tds-date-picker,
:is(.tds-colorscheme--dark, .tds-scrim--black)
.tds-theme--replicant-v2
.tds-date-picker {
--tds-date-selected--color: var(--tds-color--grey20);
}
.tds-theme--replicant-v2 .tds-colorscheme--dark {
background-color: var(--tds-color-ct-bg);
}
.tds-theme--replicant-separator {
background-color: var(--tds-color-ct-separator);
clip-path: polygon(
0 0,
37% 0,
39.5% 19px,
60% 19px,
62.5% 0,
100% 0,
100% 1px,
64% 1px,
64% 0,
62.5% 0,
62.5% 1px,
60% 20px,
39.5% 20px,
37% 1px,
1px 1px
);
height: 20px;
}
.tds-theme--replicant-separator.tds-theme--replicant-separator--reversed {
transform: rotateX(180deg);
}
.tds-theme--replicant-v2 .tcl-react-media.tcl-react-media--end-gradient,
.tds-theme--replicant-v2 .tcl-react-media.tcl-react-media--start-gradient {
--tcl-react-media--start-gradient-color: var(--tds-color-ct-bg);
--tcl-react-media--end-gradient-color: var(--tds-color-ct-bg);
}
.tds-theme--replicant-v2 .dx-hero-badges-section {
--tcl-dx-hero-badge-faded-bg-blur-filter: var(--tds-blur--extra-small);
--tcl-dx-hero-badge-faded-bg-color: var(--tds-color-ct-faded-bg);
--tcl-dx-hero-badge-gap: 24px;
--tcl-dx-hero-badge-border-color: var(--tds-color-white);
--tcl-dx-hero-badge-content-padding: 8px;
}
.tds-theme--replicant-v2 .dx-hero-badges--border-top-right {
border-inline-end: 1px solid var(--tcl-dx-hero-badge-border-color);
border-top: 1px solid var(--tcl-dx-hero-badge-border-color);
padding-block-start: 8px;
padding-inline-end: 8px;
}
.tds-theme--replicant-v2 .dx-hero-badges--border-top-left {
border-inline-start: 1px solid var(--tcl-dx-hero-badge-border-color);
border-top: 1px solid var(--tcl-dx-hero-badge-border-color);
padding-block-start: 8px;
padding-inline-start: 8px;
}
.tds-theme--replicant-v2 .dx-hero-badges--border-top {
border-top: 1px solid var(--tcl-dx-hero-badge-border-color);
padding: 8px 4px 0;
}
.tds-theme--replicant-v2 .dx-hero-badges__specs-content-top {
padding-bottom: 0;
}
.tds-theme--replicant-v2 .dx-hero-badges__tertiary-copy {
color: var(--tds-color-ct-h2);
}
.tds-theme--replicant-v2 .dx-hero-badges__specs-content-bottom {
border-top: 0;
padding-top: 2px;
}
@media (max-height: 600px) and (orientation: landscape) {
.tds-theme--replicant-v2 .dx-hero-badges-section {
--tcl-dx-hero-badge-gap: 40px;
}
}
@media (min-width: 900px) and (orientation: landscape) {
.tds-theme--replicant-v2 .dx-hero-badges-section {
--tcl-dx-hero-badge-gap: 40px;
}
}
.tds-theme--replicant-v2 {
--tds-btn--font-size: 12px;
--tds-btn--default-opacity: 0.9;
--tds-btn--hover-opacity: 0.85;
--tds-btn--disabled-opacity: 0.5;
}
.tds-theme--replicant-v2 .tds-btn {
--tds-btn--background-color: var(--tds-color-ct-bg);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: none;
color: var(--tds-color-ct-h2);
font-size: var(--tds-font-size-20);
font-style: normal;
font-weight: var(--tds-font-weight-bold, 500);
height: var(--tds-size-5x);
line-height: normal;
margin-top: 4px;
opacity: var(--tds-btn--default-opacity);
text-align: center;
}
.tds-theme--replicant-v2 .tds-btn:before {
border-top: 3px solid var(--tds-color-ct-body);
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
top: -4px;
width: 100%;
}
.tds-theme--replicant-v2 .tds-btn--secondary {
height: 44px;
margin-top: 0;
}
.tds-theme--replicant-v2 .tds-btn--secondary:before,
.tds-theme--replicant-v2 .tds-btn--tertiary:before,
.tds-theme--replicant-v2 .tds-btn--text:before {
border-top: none;
display: none;
}
.tds-theme--replicant-v2 .tds-btn:focus-visible {
outline: none;
outline-offset: 2px;
}
.tds-theme--replicant-v2 .tds-btn--secondary {
border: 1px solid var(--tds-color-ct-accent-line);
}
.tds-theme--replicant-v2 .tds-btn--secondary:hover {
color: var(--tds-color-ct-h2);
}
.tds-theme--replicant-v2 .tds-btn--tertiary {
border: 1px solid var(--tds-color-ct-accent-line);
opacity: 0.2;
}
.tds-theme--replicant-v2 .tds-btn--tertiary:hover {
opacity: 0.4;
}
.tds-theme--replicant-v2 .tds-btn--tertiary:focus-visible {
opacity: 0.8;
}
.tds-theme--replicant-v2 .tds-btn--text {
-webkit-backdrop-filter: blur(0);
backdrop-filter: blur(0);
background-color: none;
background: none;
text-decoration: none;
}
.tds-theme--replicant-v2
:is(
.tds-btn:focus-visible,
.tds-btn--secondary:focus-visible,
.tds-btn--text:focus-visible
) {
color: var(--tds-color-white);
opacity: var(--tds-btn--hover-opacity);
}
.tds-theme--replicant-v2
.tds-btn:not([disabled], .tds--disabled):is(
:focus,
:focus-visible,
.tds--focus
) {
--tds-btn--background-color: var(--tds-color-ct-focused-btn-bg);
}
.tds-theme--replicant-v2
.tds-btn:not([disabled], .tds--disabled):is(
:focus,
:focus-visible,
.tds--focus
):before {
border-top: 3px solid var(--tds-color-white);
}
.tds-theme--replicant-v2
.tds-btn--secondary:not([disabled], .tds--disabled):is(
:focus,
:focus-visible,
.tds--focus
) {
--tds-btn--background-color: var(--tds-color-ct-focused-secondary-btn-bg);
-webkit-backdrop-filter: blur(var(--tds-blur--extra-small));
backdrop-filter: blur(var(--tds-blur--extra-small));
border: 1px solid var(--tds-color-ct-focused-secondary-btn-border);
}
.tds-theme--replicant-v2
.tds-btn--tertiary:not([disabled], .tds--disabled):is(
:focus,
:focus-visible,
.tds--focus
) {
--tds-btn--background-color: var(--tds-color-ct-focused-ternary-btn-bg);
border: 1px solid var(--tds-color-ct-focused-ternary-btn-border);
color: var(--tds-color--grey40);
}
.tds-theme--replicant-v2 .tds-btn:disabled {
opacity: var(--tds-btn--disabled-opacity);
}
.tds-theme--replicant-v2 :is(.tds-btn--secondary, .tds-btn--tertiary) {
color: var(--tds-color-ct-h2);
}
.tds-theme--replicant-v2 .tds-btn:is(:focus, :focus-visible, .tds--focus) {
box-shadow: none;
color: var(--tds-color-white);
outline: none;
}
.tds-theme--replicant-v2
.tds-btn:is(:hover, .tds--hover):not([disabled], .tds--disabled) {
opacity: var(--tds-btn--hover-opacity);
}
.tds-theme--replicant-v2 .tds-tab-list--underline {
--tds-color-ct-border-line: var(--tds-theme-border);
--tds-color-ct-tab-bg: #ffffff0a;
--tds-tab-list-item--margin-top: 4px;
--tds-tab-list-item--height: calc(
var(--tds-tab-list--height) - var(--tds-tab-list-item--margin-top)
);
--tds-tab--box-shadow--highlight-off: none;
--tds-tab--box-shadow--highlight-on: none;
--tds-tab--border-radius: 0;
}
.tds-theme--replicant-v2 .tds-tab-list--underline .tds-tab {
block-size: var(--tds-tab-list-item--height);
color: var(--tds-color-ct-body);
font-weight: 400;
margin-block-start: var(--tds-tab-list-item--margin-top);
min-block-size: var(--tds-tab-list-item--height);
}
.tds-theme--replicant-v2 .tds-tab-list--underline .tds-tab:before {
background-color: var(--tds-color-ct-border-line);
content: "";
height: var(--tds-border-width-small);
left: 0;
position: absolute;
right: 0;
top: calc(var(--tds-tab-list-item--margin-top) * -1);
}
.tds-theme--replicant-v2
.tds-tab-list--underline
.tds-tab[aria-selected="true"] {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background-color: var(--tds-color-ct-tab-bg);
color: var(--tds-color-ct-h1);
}
.tds-theme--replicant-v2
.tds-tab-list--animated.tds-tab-list--underline
.tds--animated-backdrop {
background-color: var(--tds-color-ct-border-line);
block-size: var(--tds-border-width-large);
border-radius: 0;
bottom: auto;
margin-block-start: 0;
top: 0;
}
.tds-theme--replicant-v2 .tcl-specs-table .tds-tab-list--underline:after {
content: none;
}
.tds-theme--replicant-v2 .tcl-specs-table .tcl-tab-list__heading h2 {
color: var(--tds-color-ct-h1);
font-size: 28px;
font-weight: 400;
line-height: 34px;
}
.tds-theme--replicant-v2 .tds-video-player {
position: relative;
}
.tds-theme--replicant-v2 .tds-video-controls {
--clip-size: 8px;
-webkit-backdrop-filter: blur(var(--tds-blur--small));
backdrop-filter: blur(var(--tds-blur--small));
background-color: var(--tds-color-ct-bg);
bottom: var(--tds-size-2x);
cursor: pointer;
height: var(--tds-size-4x);
opacity: 0.8;
position: absolute;
width: var(--tds-size-4x);
z-index: 1;
}
.tds-theme--replicant-v2 .tds-video-controls svg {
left: 0;
position: relative;
top: 3px;
}
.tds-theme--replicant-v2 button.tds-video-controls:focus-visible {
border: var(--tds-border-width--hairline) solid var(--tds-color-white);
}
[dir="ltr"] .tds-theme--replicant-v2 .tds-video-controls {
left: var(--tds-size-2x);
}
[dir="rtl"] .tds-theme--replicant-v2 .tds-video-controls {
right: var(--tds-size-2x);
}
.tds-theme--default-v2 .tds-video-player {
position: relative;
}
.dx-hero-section .tds-video-controls {
bottom: var(--tds-size-2x);
cursor: pointer;
height: var(--tds-size-4x);
position: absolute;
width: var(--tds-size-4x);
z-index: 3;
}
.tds-video-player__overlay {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
.tds-theme--default-v2 .tds-video-controls svg {
left: 0;
position: relative;
top: 3px;
}
.tds-theme--default-v2 button.tds-video-controls:focus-visible {
border: var(--tds-border-width--hairline) solid var(--tds-color-white);
}
.tds-theme--default-v2 .tds-video-controls {
inset-inline-start: var(--tds-size-2x);
}
.tds-theme--default-v2 .dx-hero-content h2 {
font-size: var(--tds-text--body);
letter-spacing: normal;
}
.tds-theme--default-v2 .dx-hero-content button {
min-width: 200px;
}
.tds-theme--default-v2 .dx-hero-cta {
padding-top: 24px;
}
.page-modely .tcl-permanent-cta .tds-btn--primary {
background: var(--tds-theme-primary);
box-shadow: none;
}
.page-modely .tcl-permanent-cta .tds-btn--primary.permanent-cta---button-menu {
max-height: var(--tds-size-5x);
max-width: var(--tds-size-5x);
min-height: var(--tds-size-5x);
min-width: var(--tds-size-5x);
padding: 0;
}
.page-modely
.tcl-permanent-cta
.tds-btn--primary.permanent-cta---button-link:hover {
background: var(--tds-color-blue-20);
}
.tds-theme--default-faded-bg-bottom:after {
-webkit-mask-image: linear-gradient(#0000, var(--tds-color-black));
mask-image: linear-gradient(#0000, var(--tds-color-black));
}
.tds-theme--default-faded-bg-bottom:after,
.tds-theme--default-faded-bg-top:after {
background-color: var(--tds-color-black);
content: "";
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
.tds-theme--default-faded-bg-top:after {
bottom: auto;
-webkit-mask-image: linear-gradient(var(--tds-color-black), #0000);
mask-image: linear-gradient(var(--tds-color-black), #0000);
}
.tds-theme--default-faded-bg-bottom,
.tds-theme--default-faded-bg-top {
bottom: 0;
height: 20vh;
position: absolute;
width: 100%;
z-index: 1;
}
.tds-theme--default-faded-bg-top {
bottom: auto;
top: 0;
}
.tds-theme--default-faded-bg-bottom {
bottom: 0;
top: auto;
}
.tds-theme--default-v2
.dx-hero-badges
a:not(.tcl-link, .tds-link):is(a, :hover, :visited, :active),
.tds-theme--default-v2
.dx-vertical-carousel
a:not(.tcl-link, .tds-link):is(a, :hover, :visited, :active) {
text-decoration: underline;
}
.tds-theme--opaque-bg {
background: var(--tds-color-black);
opacity: 0.55;
}
.tds-theme--default-v2
.tds-scrim--black.tds-colorscheme--dark
.dx-vertical-carousel {
background-color: var(--tds-color-black);
}
.page-modely .tcl-permanent-cta .tds-btn--primary.permanent-cta---button-menu {
background-color: var(--tds-color-grey-20);
}
@media (--tds-tablet-portrait-up) {
.page-modely
.tcl-permanent-cta
.tds-btn--primary.permanent-cta---button-link {
max-width: 200px;
min-width: 200px;
}
}
.page-cybertruck .tcl-page__shell {
overflow: visible;
}
.dx-ct-wrapper {
padding: 25px;
}
.dx-ct-wrapper h3 {
color: var(--tds-color-white);
font-weight: 200;
padding: 0;
text-decoration: underline;
}
.tcl-container--no-inline-padding:not(.mktg-content_container) {
padding-inline-end: 0;
padding-inline-start: 0;
}
.tds-scrim--black {
--tds-table-background-color: unset;
}
.tds-scrim--black .tds-table td.table-content--muted {
color: var(--tds-theme-foreground-low-contrast);
}
@media (max-width: 599px) {
.tcl--mobile--content_container--half--gutter {
--tds-content_container--gutter: 12px;
}
}
@media (min-width: 600px) {
.tcl--content_container--small--gap.tds-layout {
grid-gap: 0 var(--tds-size--2x);
}
}
@media (max-width: 1299px) {
.tcl-layout-1col-on-tablet.tds-layout {
grid-gap: unset;
display: block;
grid-template-columns: unset;
}
}
:root {
--tcl-grid-four-column-inline-size: inherit;
--tcl-grid-three-column-inline-size: inherit;
--tcl-grid-two-column-inline-size: inherit;
--tcl-section-background-color: var(--tds-color--white);
}
@media (min-width: 600px) {
:root {
--tcl-grid-four-column-inline-size: 432px;
--tcl-grid-three-column-inline-size: 318px;
--tcl-grid-two-column-inline-size: 204px;
}
.tcl-layout {
margin-bottom: 0;
margin-top: 0;
}
}
.tcl-layout {
width: 100%;
}
.tds-layout.tcl-layout--vertical-tablet {
@media (min-width: 600px) and (max-width: 1199px) {
display: block;
}
}
.tcl-section--constrained {
max-width: 2560px;
}
@media (max-width: 599px), (min-width: 600px) and (max-width: 899px) {
.tcl-layout {
max-width: 100vw;
}
.tcl-drawer
.tcl-layout:not(.tcl-section-header-group__layout):not(
.tcl-carousel-v2__slides-container
):not(.tcl-carousel-v2__toggles-container) {
padding: 0 !important;
}
}
@media (min-width: 600px) and (max-width: 899px) {
[dir="ltr"] .tcl-layout {
padding-right: calc(var(--tds-size-4x));
}
[dir="ltr"] .tcl-layout,
[dir="rtl"] .tcl-layout {
padding-left: calc(var(--tds-size-4x));
}
[dir="rtl"] .tcl-layout {
padding-right: calc(var(--tds-size-4x));
}
.tcl-layout {
-webkit-padding-end: calc(var(--tds-size-4x));
-webkit-padding-start: calc(var(--tds-size-4x));
padding-inline-end: calc(var(--tds-size-4x));
padding-inline-start: calc(var(--tds-size-4x));
}
}
@media (min-width: 900px) {
.tcl-layout--spacious {
grid-template-areas: ". main main main main main main main main main main .";
}
}
@media (min-width: 600px) and (max-width: 899px) {
[dir="ltr"] .tcl-layout--spacious {
padding-right: calc(var(--tds-size-4x) + var(--tds-size-half));
}
[dir="ltr"] .tcl-layout--spacious,
[dir="rtl"] .tcl-layout--spacious {
padding-left: calc(var(--tds-size-4x) + var(--tds-size-half));
}
[dir="rtl"] .tcl-layout--spacious {
padding-right: calc(var(--tds-size-4x) + var(--tds-size-half));
}
.tcl-layout--spacious {
-webkit-padding-end: calc(var(--tds-size-4x) + var(--tds-size-half));
-webkit-padding-start: calc(var(--tds-size-4x) + var(--tds-size-half));
grid-template-areas: "main main main main main main main main main main main main";
padding-inline-end: calc(var(--tds-size-4x) + var(--tds-size-half));
padding-inline-start: calc(var(--tds-size-4x) + var(--tds-size-half));
}
}
@media (min-width: 600px) {
.tcl-layout__main--with-children {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
grid-column: 1/13 !important;
justify-content: space-between;
}
}
@media (min-width: 900px) {
.tcl-layout__main--with-children {
grid-column: 2/12 !important;
}
}
@media (min-width: 600px) {
.tcl-layout__main--with-children {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
height: 100%;
width: 100%;
}
}
.tcl-layout__aside {
--tcl-button-inline-size: 100%;
--tcl-button-inset-inline-start: 0;
--tcl-margin-inline: 0;
}
@media (min-width: 1200px) {
[dir="ltr"] .tcl-layout__aside--with-padding-start,
[dir="ltr"] .tcl-layout__child--with-padding-start,
[dir="ltr"] .tcl-layout__main--with-padding-start {
padding-left: var(--tds-size-2x) !important;
}
[dir="rtl"] .tcl-layout__aside--with-padding-start,
[dir="rtl"] .tcl-layout__child--with-padding-start,
[dir="rtl"] .tcl-layout__main--with-padding-start {
padding-right: var(--tds-size-2x) !important;
}
.tcl-layout__aside--with-padding-start,
.tcl-layout__child--with-padding-start,
.tcl-layout__main--with-padding-start {
-webkit-padding-start: var(--tds-size-2x) !important;
padding-inline-start: var(--tds-size-2x) !important;
}
[dir="ltr"] .tcl-layout__aside--with-padding-end,
[dir="ltr"] .tcl-layout__child--with-padding-end,
[dir="ltr"] .tcl-layout__main--with-padding-end {
padding-right: var(--tds-size-2x) !important;
}
[dir="rtl"] .tcl-layout__aside--with-padding-end,
[dir="rtl"] .tcl-layout__child--with-padding-end,
[dir="rtl"] .tcl-layout__main--with-padding-end {
padding-left: var(--tds-size-2x) !important;
}
.tcl-layout__aside--with-padding-end,
.tcl-layout__child--with-padding-end,
.tcl-layout__main--with-padding-end {
-webkit-padding-end: var(--tds-size-2x) !important;
padding-inline-end: var(--tds-size-2x) !important;
}
}
@media (min-width: 600px) {
.tcl-layout__child {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
[dir="ltr"] .tcl-layout__main:not(.tcl-layout__main--with-children) {
padding-left: 0;
}
[dir="rtl"] .tcl-layout__main:not(.tcl-layout__main--with-children) {
padding-right: 0;
}
.tcl-layout__main:not(.tcl-layout__main--with-children) {
-webkit-padding-start: 0;
padding-inline-start: 0;
}
}
.tcl-layout__aside,
.tcl-layout__child,
.tcl-layout__main:not(.tcl-layout__main--with-children) {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
width: 100%;
}
.tcl-layout__aside--top,
.tcl-layout__child--top,
.tcl-layout__main--top {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.tcl-layout__aside--center,
.tcl-layout__child--center,
.tcl-layout__main--center {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.tcl-layout__aside--bottom,
.tcl-layout__child--bottom,
.tcl-layout__main--bottom {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
@media (min-width: 600px) {
.tcl-layout__main--quarters .tcl-layout__child {
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
width: calc(18.75% - 19.5px);
}
}
@media (min-width: 900px) {
.tcl-layout__main--quarters .tcl-layout__child {
width: calc(17.5% - 19.8px);
}
}
@media (min-width: 600px) {
.tcl-layout__main--thirds .tcl-layout__child {
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
width: calc(27.77778% - 17.33333px);
}
}
@media (min-width: 900px) {
.tcl-layout__main--thirds .tcl-layout__child {
width: calc(26.66667% - 17.6px);
}
}
@media (min-width: 600px) {
.tcl-layout__main--halves .tcl-layout__child {
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
width: calc(45.83333% - 13px);
}
}
@media (min-width: 900px) {
.tcl-layout__main--halves .tcl-layout__child {
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
width: calc(45% - 13.2px);
}
}
@media (min-width: 600px) {
.tcl-layout--twelve-grid-7-wide-5-wide {
grid-template-areas: "main main main main main main main aside aside aside aside aside";
}
.tcl-layout--twelve-grid-5-wide-7-wide {
grid-template-areas: "aside aside aside aside aside main main main main main main main ";
}
}
@media (min-width: 900px) {
.tcl-layout--spacious-20-80 {
grid-template-areas: ". aside aside main main main main main main main main .";
}
}
@media (min-width: 600px) and (max-width: 899px) {
.tcl-layout--spacious-20-80 {
grid-template-areas: "aside aside aside main main main main main main main main main";
}
}
@media (min-width: 900px) {
.tcl-layout--spacious-80-20 {
grid-template-areas: ". main main main main main main main main aside aside .";
}
}
@media (min-width: 600px) and (max-width: 899px) {
.tcl-layout--spacious-80-20 {
grid-template-areas: "main main main main main main main main main aside aside aside";
}
}
@media (min-width: 900px) {
.tcl-layout--spacious-30-50 {
grid-template-areas: ". aside aside aside main main main main main . . .";
}
}
@media (min-width: 600px) and (max-width: 899px) {
.tcl-layout--spacious-30-50 {
grid-template-areas: "aside aside aside aside main main main main main main main main";
}
}
@media (min-width: 900px) {
.tcl-layout--spacious-30-70 {
grid-template-areas: ". aside aside aside main main main main main main main .";
}
}
@media (min-width: 600px) and (max-width: 899px) {
.tcl-layout--spacious-30-70 {
grid-template-areas: "aside aside aside aside main main main main main main main main";
}
}
@media (min-width: 900px) {
.tcl-layout--spacious-70-30 {
grid-template-areas: ". main main main main main main main aside aside aside .";
}
}
@media (min-width: 600px) and (max-width: 899px) {
.tcl-layout--spacious-70-30 {
grid-template-areas: "main main main main main main main main aside aside aside aside";
}
}
@media (min-width: 900px) {
.tcl-layout--spacious-40-60 {
grid-template-areas: ". aside aside aside aside main main main main main main .";
}
}
@media (min-width: 600px) and (max-width: 899px) {
.tcl-layout--spacious-40-60 {
grid-template-areas: "aside aside aside aside aside main main main main main main main";
}
}
@media (min-width: 900px) {
.tcl-layout--spacious-60-40 {
grid-template-areas: ". main main main main main main aside aside aside aside .";
}
}
@media (min-width: 600px) and (max-width: 899px) {
.tcl-layout--spacious-60-40 {
grid-template-areas: "main main main main main main main aside aside aside aside aside";
}
}
@media (min-width: 900px) {
.tcl-layout--spacious-70-20 {
grid-template-areas: ". main main main main main main main . aside aside .";
}
}
@media (min-width: 600px) and (max-width: 899px) {
.tcl-layout--spacious-70-20 {
grid-template-areas: "main main main main main main main main . aside aside aside";
}
}
@media (min-width: 900px) {
.tcl-layout--spacious-20-70 {
grid-template-areas: ". aside aside . main main main main main main main . ";
}
}
@media (min-width: 600px) and (max-width: 899px) {
.tcl-layout--spacious-20-70 {
grid-template-areas: "aside aside aside . main main main main main main main main";
}
}
@media (min-width: 900px) {
.tcl-layout--spacious-50-40 {
grid-template-areas: ". main main main main main . aside aside aside aside .";
}
}
@media (min-width: 600px) and (max-width: 899px) {
.tcl-layout--spacious-50-40 {
grid-template-areas: "main main main main main main . aside aside aside aside aside";
}
}
@media (min-width: 900px) {
.tcl-layout--spacious-40-50 {
grid-template-areas: ". aside aside aside aside . main main main main main . ";
}
}
@media (min-width: 600px) and (max-width: 899px) {
.tcl-layout--spacious-40-50 {
grid-template-areas: "aside aside aside aside aside . main main main main main main";
}
}
@media (min-width: 900px) {
.tcl-layout--spacious-50-35 {
grid-template-areas: ". main main main main main aside aside aside aside . .";
}
[dir="ltr"] .tcl-layout--spacious-50-35 .tcl-layout__aside {
padding-left: 42px;
}
[dir="rtl"] .tcl-layout--spacious-50-35 .tcl-layout__aside {
padding-right: 42px;
}
.tcl-layout--spacious-50-35 .tcl-layout__aside {
-webkit-padding-start: 42px;
padding-inline-start: 42px;
}
}
@media (min-width: 600px) and (max-width: 899px) {
.tcl-layout--spacious-50-35 {
grid-template-areas: "main main main main main main aside aside aside aside aside .";
}
[dir="ltr"] .tcl-layout--spacious-50-35 .tcl-layout__aside {
padding-left: 26px;
}
[dir="rtl"] .tcl-layout--spacious-50-35 .tcl-layout__aside {
padding-right: 26px;
}
.tcl-layout--spacious-50-35 .tcl-layout__aside {
-webkit-padding-start: 26px;
padding-inline-start: 26px;
}
}
@media (min-width: 900px) {
.tcl-layout--spacious-35-50 {
grid-template-areas: ". . aside aside aside aside main main main main main . ";
}
[dir="ltr"] .tcl-layout--spacious-35-50 .tcl-layout__aside {
padding-right: 42px;
}
[dir="rtl"] .tcl-layout--spacious-35-50 .tcl-layout__aside {
padding-left: 42px;
}
.tcl-layout--spacious-35-50 .tcl-layout__aside {
-webkit-padding-end: 42px;
padding-inline-end: 42px;
}
}
@media (min-width: 600px) and (max-width: 899px) {
.tcl-layout--spacious-35-50 {
grid-template-areas: ". aside aside aside aside aside main main main main main main";
}
[dir="ltr"] .tcl-layout--spacious-35-50 .tcl-layout__aside {
padding-right: 26px;
}
[dir="rtl"] .tcl-layout--spacious-35-50 .tcl-layout__aside {
padding-left: 26px;
}
.tcl-layout--spacious-35-50 .tcl-layout__aside {
-webkit-padding-end: 26px;
padding-inline-end: 26px;
}
}
@media (min-width: 900px) {
.tcl-layout--spacious-60-35 {
grid-template-areas: ". main main main main main main aside aside aside aside .";
}
[dir="ltr"] .tcl-layout--spacious-60-35 .tcl-layout__aside {
padding-left: 42px;
}
[dir="rtl"] .tcl-layout--spacious-60-35 .tcl-layout__aside {
padding-right: 42px;
}
.tcl-layout--spacious-60-35 .tcl-layout__aside {
-webkit-padding-start: 42px;
padding-inline-start: 42px;
}
}
@media (min-width: 600px) and (max-width: 899px) {
.tcl-layout--spacious-60-35 {
grid-template-areas: "main main main main main main main aside aside aside aside aside";
}
[dir="ltr"] .tcl-layout--spacious-60-35 .tcl-layout__aside {
padding-left: 26px;
}
[dir="rtl"] .tcl-layout--spacious-60-35 .tcl-layout__aside {
padding-right: 26px;
}
.tcl-layout--spacious-60-35 .tcl-layout__aside {
-webkit-padding-start: 26px;
padding-inline-start: 26px;
}
}
@media (min-width: 900px) {
.tcl-layout--spacious-35-60 {
grid-template-areas: ". aside aside aside aside main main main main main main . ";
}
[dir="ltr"] .tcl-layout--spacious-35-60 .tcl-layout__aside {
padding-right: 42px;
}
[dir="rtl"] .tcl-layout--spacious-35-60 .tcl-layout__aside {
padding-left: 42px;
}
.tcl-layout--spacious-35-60 .tcl-layout__aside {
-webkit-padding-end: 42px;
padding-inline-end: 42px;
}
}
@media (min-width: 600px) and (max-width: 899px) {
.tcl-layout--spacious-35-60 {
grid-template-areas: "aside aside aside aside aside main main main main main main main";
}
[dir="ltr"] .tcl-layout--spacious-35-60 .tcl-layout__aside {
padding-right: 26px;
}
[dir="rtl"] .tcl-layout--spacious-35-60 .tcl-layout__aside {
padding-left: 26px;
}
.tcl-layout--spacious-35-60 .tcl-layout__aside {
-webkit-padding-end: 26px;
padding-inline-end: 26px;
}
}
@media (min-width: 900px) {
.tcl-layout--spacious-65-30 {
grid-template-areas: ". main main main main main main main aside aside aside .";
}
[dir="ltr"] .tcl-layout--spacious-65-30 .tcl-layout__main {
padding-right: 42px !important;
}
[dir="rtl"] .tcl-layout--spacious-65-30 .tcl-layout__main {
padding-left: 42px !important;
}
.tcl-layout--spacious-65-30 .tcl-layout__main {
-webkit-padding-end: 42px !important;
padding-inline-end: 42px !important;
}
.tcl-layout--spacious-30-65 {
grid-template-areas: ". aside aside aside main main main main main main main . ";
}
[dir="ltr"] .tcl-layout--spacious-30-65 .tcl-layout__main {
padding-left: 42px !important;
}
[dir="rtl"] .tcl-layout--spacious-30-65 .tcl-layout__main {
padding-right: 42px !important;
}
.tcl-layout--spacious-30-65 .tcl-layout__main {
-webkit-padding-start: 42px !important;
padding-inline-start: 42px !important;
}
.tcl-layout--spacious-50-50 {
grid-template-areas: ". column-1 column-1 column-1 column-1 column-1 column-2 column-2 column-2 column-2 column-2 .";
}
}
@media (min-width: 600px) and (max-width: 899px) {
.tcl-layout--spacious-50-50 {
grid-template-areas: "column-1 column-1 column-1 column-1 column-1 column-1 column-2 column-2 column-2 column-2 column-2 column-2";
}
}
.tcl-layout--spacious-50-50 .tcl-layout__child:first-child {
grid-area: column-1;
}
.tcl-layout--spacious-50-50 .tcl-layout__child:last-child {
grid-area: column-2;
}
@media (min-width: 900px) {
.tcl-layout--eight-grid-two-columns {
grid-template-areas: ". . column-1 column-1 column-1 column-1 column-2 column-2 column-2 column-2 . .";
}
}
@media (min-width: 600px) and (max-width: 899px) {
[dir="ltr"] .tcl-layout--eight-grid-two-columns {
padding-right: calc(var(--tds-size-4x) + var(--tds-size-half));
}
[dir="ltr"] .tcl-layout--eight-grid-two-columns,
[dir="rtl"] .tcl-layout--eight-grid-two-columns {
padding-left: calc(var(--tds-size-4x) + var(--tds-size-half));
}
[dir="rtl"] .tcl-layout--eight-grid-two-columns {
padding-right: calc(var(--tds-size-4x) + var(--tds-size-half));
}
.tcl-layout--eight-grid-two-columns {
-webkit-padding-end: calc(var(--tds-size-4x) + var(--tds-size-half));
-webkit-padding-start: calc(var(--tds-size-4x) + var(--tds-size-half));
display: block;
padding-inline-end: calc(var(--tds-size-4x) + var(--tds-size-half));
padding-inline-start: calc(var(--tds-size-4x) + var(--tds-size-half));
}
}
.tcl-layout--eight-grid-two-columns .tcl-layout__child:first-child {
grid-area: column-1;
}
.tcl-layout--eight-grid-two-columns .tcl-layout__child:last-child {
grid-area: column-2;
}
@media (min-width: 900px) {
.tcl-layout--six-grid-two-columns {
grid-template-areas: ". . . column-1 column-1 column-1 column-2 column-2 column-2 . . .";
}
}
@media (min-width: 600px) and (max-width: 899px) {
[dir="ltr"] .tcl-layout--six-grid-two-columns {
padding-right: calc(var(--tds-size-4x) + var(--tds-size-half));
}
[dir="ltr"] .tcl-layout--six-grid-two-columns,
[dir="rtl"] .tcl-layout--six-grid-two-columns {
padding-left: calc(var(--tds-size-4x) + var(--tds-size-half));
}
[dir="rtl"] .tcl-layout--six-grid-two-columns {
padding-right: calc(var(--tds-size-4x) + var(--tds-size-half));
}
.tcl-layout--six-grid-two-columns {
-webkit-padding-end: calc(var(--tds-size-4x) + var(--tds-size-half));
-webkit-padding-start: calc(var(--tds-size-4x) + var(--tds-size-half));
display: block;
padding-inline-end: calc(var(--tds-size-4x) + var(--tds-size-half));
padding-inline-start: calc(var(--tds-size-4x) + var(--tds-size-half));
}
}
.tcl-layout--six-grid-two-columns .tcl-layout__child:first-child {
grid-area: column-1;
}
.tcl-layout--six-grid-two-columns .tcl-layout__child:last-child {
grid-area: column-2;
}
@media (min-width: 900px) {
.tcl-layout--eight-grid-5-wide-3-wide {
grid-template-areas: ". . main main main main main aside aside aside . .";
}
}
@media (min-width: 600px) and (max-width: 899px) {
[dir="ltr"] .tcl-layout--eight-grid-5-wide-3-wide {
padding-right: calc(var(--tds-size-4x) + var(--tds-size-half));
}
[dir="ltr"] .tcl-layout--eight-grid-5-wide-3-wide,
[dir="rtl"] .tcl-layout--eight-grid-5-wide-3-wide {
padding-left: calc(var(--tds-size-4x) + var(--tds-size-half));
}
[dir="rtl"] .tcl-layout--eight-grid-5-wide-3-wide {
padding-right: calc(var(--tds-size-4x) + var(--tds-size-half));
}
.tcl-layout--eight-grid-5-wide-3-wide {
-webkit-padding-end: calc(var(--tds-size-4x) + var(--tds-size-half));
-webkit-padding-start: calc(var(--tds-size-4x) + var(--tds-size-half));
display: block;
padding-inline-end: calc(var(--tds-size-4x) + var(--tds-size-half));
padding-inline-start: calc(var(--tds-size-4x) + var(--tds-size-half));
}
}
@media (min-width: 900px) {
.tcl-layout--eight-grid-3-wide-5-wide {
grid-template-areas: ". . aside aside aside main main main main main . .";
}
}
@media (min-width: 600px) and (max-width: 899px) {
[dir="ltr"] .tcl-layout--eight-grid-3-wide-5-wide {
padding-right: calc(var(--tds-size-4x) + var(--tds-size-half));
}
[dir="ltr"] .tcl-layout--eight-grid-3-wide-5-wide,
[dir="rtl"] .tcl-layout--eight-grid-3-wide-5-wide {
padding-left: calc(var(--tds-size-4x) + var(--tds-size-half));
}
[dir="rtl"] .tcl-layout--eight-grid-3-wide-5-wide {
padding-right: calc(var(--tds-size-4x) + var(--tds-size-half));
}
.tcl-layout--eight-grid-3-wide-5-wide {
-webkit-padding-end: calc(var(--tds-size-4x) + var(--tds-size-half));
-webkit-padding-start: calc(var(--tds-size-4x) + var(--tds-size-half));
display: block;
padding-inline-end: calc(var(--tds-size-4x) + var(--tds-size-half));
padding-inline-start: calc(var(--tds-size-4x) + var(--tds-size-half));
}
}
.tcl-layout--eight-grid .tds-layout-aside,
.tcl-layout--twelve-grid .tds-layout-aside,
[class*="tcl-layout--spacious-"] .tds-layout-aside {
grid-area: aside;
}
@media (min-width: 900px) {
.tcl-layout--six-columns {
grid-template-areas: ". . . main main main main main main . . .";
}
}
@media (min-width: 600px) and (max-width: 899px) {
[dir="ltr"] .tcl-layout--six-columns {
padding-right: calc(var(--tds-size-4x) + var(--tds-size-half));
}
[dir="ltr"] .tcl-layout--six-columns,
[dir="rtl"] .tcl-layout--six-columns {
padding-left: calc(var(--tds-size-4x) + var(--tds-size-half));
}
[dir="rtl"] .tcl-layout--six-columns {
padding-right: calc(var(--tds-size-4x) + var(--tds-size-half));
}
.tcl-layout--six-columns {
-webkit-padding-end: calc(var(--tds-size-4x) + var(--tds-size-half));
-webkit-padding-start: calc(var(--tds-size-4x) + var(--tds-size-half));
display: block;
padding-inline-end: calc(var(--tds-size-4x) + var(--tds-size-half));
padding-inline-start: calc(var(--tds-size-4x) + var(--tds-size-half));
}
}
@media (min-width: 900px) {
.tcl-layout--eight-columns {
grid-template-areas: ". . main main main main main main main main . .";
}
}
@media (min-width: 600px) and (max-width: 899px) {
[dir="ltr"] .tcl-layout--eight-columns {
padding-right: calc(var(--tds-size-4x) + var(--tds-size-half));
}
[dir="ltr"] .tcl-layout--eight-columns,
[dir="rtl"] .tcl-layout--eight-columns {
padding-left: calc(var(--tds-size-4x) + var(--tds-size-half));
}
[dir="rtl"] .tcl-layout--eight-columns {
padding-right: calc(var(--tds-size-4x) + var(--tds-size-half));
}
.tcl-layout--eight-columns {
-webkit-padding-end: calc(var(--tds-size-4x) + var(--tds-size-half));
-webkit-padding-start: calc(var(--tds-size-4x) + var(--tds-size-half));
display: block;
padding-inline-end: calc(var(--tds-size-4x) + var(--tds-size-half));
padding-inline-start: calc(var(--tds-size-4x) + var(--tds-size-half));
}
}
@media (max-width: 599px) {
[dir="ltr"] .tcl-full-media-bleed picture,
[dir="ltr"] .tcl-full-media-bleed video {
margin-right: calc(var(--tds-size-3x) * -1);
}
[dir="ltr"] .tcl-full-media-bleed picture,
[dir="ltr"] .tcl-full-media-bleed video,
[dir="rtl"] .tcl-full-media-bleed picture,
[dir="rtl"] .tcl-full-media-bleed video {
margin-left: calc(var(--tds-size-3x) * -1);
}
[dir="rtl"] .tcl-full-media-bleed picture,
[dir="rtl"] .tcl-full-media-bleed video {
margin-right: calc(var(--tds-size-3x) * -1);
}
.tcl-full-media-bleed picture,
.tcl-full-media-bleed video {
-webkit-margin-end: calc(var(--tds-size-3x) * -1);
-webkit-margin-start: calc(var(--tds-size-3x) * -1);
display: block;
margin-inline-end: calc(var(--tds-size-3x) * -1);
margin-inline-start: calc(var(--tds-size-3x) * -1);
width: calc(100% + var(--tds-size-6x));
}
.tcl-full-media-bleed .tcl-image--with-rounded-corners,
.tcl-full-media-bleed .tcl-video--with-rounded-corners,
.tcl-full-media-bleed.tcl-image--with-rounded-corners,
.tcl-full-media-bleed.tcl-video--with-rounded-corners {
--tcl-image-asset-border-radius: 0;
--tcl-video-border-radius: 0;
}
}
@media (min-width: 600px) and (max-width: 899px) {
[dir="ltr"] .tcl-full-media-bleed-on-tablet picture,
[dir="ltr"] .tcl-full-media-bleed-on-tablet video {
margin-right: calc((var(--tds-size-4x) + var(--tds-size-half)) * -1);
}
[dir="ltr"] .tcl-full-media-bleed-on-tablet picture,
[dir="ltr"] .tcl-full-media-bleed-on-tablet video,
[dir="rtl"] .tcl-full-media-bleed-on-tablet picture,
[dir="rtl"] .tcl-full-media-bleed-on-tablet video {
margin-left: calc((var(--tds-size-4x) + var(--tds-size-half)) * -1);
}
[dir="rtl"] .tcl-full-media-bleed-on-tablet picture,
[dir="rtl"] .tcl-full-media-bleed-on-tablet video {
margin-right: calc((var(--tds-size-4x) + var(--tds-size-half)) * -1);
}
.tcl-full-media-bleed-on-tablet picture,
.tcl-full-media-bleed-on-tablet video {
-webkit-margin-end: calc((var(--tds-size-4x) + var(--tds-size-half)) * -1);
-webkit-margin-start: calc(
(var(--tds-size-4x) + var(--tds-size-half)) * -1
);
display: block;
margin-inline-end: calc((var(--tds-size-4x) + var(--tds-size-half)) * -1);
margin-inline-start: calc((var(--tds-size-4x) + var(--tds-size-half)) * -1);
width: calc(100% + var(--tds-size-9x));
}
.tcl-full-media-bleed-on-tablet .tcl-image--with-rounded-corners,
.tcl-full-media-bleed-on-tablet .tcl-video--with-rounded-corners,
.tcl-full-media-bleed-on-tablet.tcl-image--with-rounded-corners,
.tcl-full-media-bleed-on-tablet.tcl-video--with-rounded-corners {
--tcl-image-asset-border-radius: 0;
--tcl-video-border-radius: 0;
}
}
@media (max-width: 599px) {
.tcl-layout--reverse-on-mobile,
.tcl-layout--reverse-on-mobile .tcl-layout__main--with-children {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
}
.tcl-section--with-background-color {
background-color: #fff;
background-color: var(--tcl-section-background-color);
}
.tcl-section--locked-to-viewport {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-box-pack: center;
-ms-flex-pack: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
justify-content: center;
min-height: 100svh;
min-height: calc(
100svh - var(--tcl-bottom-banner-height, 0px) -
var(--tcl-top-banner-height, 0px)
);
}
.tcl-react-glue-container--full-block-size {
min-height: 100svh;
}
@media (min-width: 600px) and (max-width: 899px) {
.tcl-layout.tcl-layout.tcl-layout--spacious-6-col-tablet {
grid-template-areas: ". main main main main main main .";
grid-template-columns: repeat(8, 1fr);
}
.tcl-layout.tcl-layout.tcl-layout--spacious-6-col-tablet .tcl-layout__main {
grid-column: 2/8;
}
.tcl-layout.tcl-layout--spacious.tcl-layout--spacious-6-col-tablet
.tcl-layout__main {
grid-area: main;
}
}
:root {
--tcl-showcase-screen-block-size: auto;
--tcl-showcase-screen-inline-size: auto;
--chrome-status-bar-height: var(--tds-size-6x);
--safari-status-bar-height: calc(var(--tds-size-1x) * 11);
}
.is-Chrome-iOS {
--chrome-status-bar-height: calc(var(--tds-size-1x) * 11);
}
.is-Small-iOS {
--chrome-status-bar-height: var(--tds-size-6x);
--safari-status-bar-height: var(--tds-size-6x);
}
.tcl-showcase__screen {
height: auto;
height: var(--tcl-showcase-screen-block-size);
position: relative;
width: auto;
width: var(--tcl-showcase-screen-inline-size);
}
@media (min-width: 900px) {
.tcl-page--with-scroll-snapping .tcl-showcase__screen {
--tcl-showcase-screen-block-size: 100vh;
--tcl-showcase-screen-inline-size: 100vw;
}
}
.tcl-showcase__content {
-ms-flex-line-pack: stretch;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-box-pack: start;
-ms-flex-pack: start;
align-content: stretch;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
height: 100%;
justify-content: flex-start;
margin: 0 auto;
padding-bottom: var(--tds-size-4x);
width: 100%;
}
.is-Android .tcl-showcase__content,
.is-Chrome-iOS .tcl-showcase__content {
padding-bottom: calc(var(--tds-size-4x) + var(--chrome-status-bar-height));
}
.is-Small-iOS .tcl-showcase__content,
.is-iOS .tcl-showcase__content {
padding-bottom: calc(var(--tds-size-4x) + var(--safari-status-bar-height));
}
body:not(.animate-onscroll) .tds-animate_large--to_reveal,
body:not(.animate-onscroll) .tds-animate_small--to_reveal {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0);
z-index: auto;
}
.tcl-tabs__list {
grid-gap: var(--tds-size-half);
grid-auto-flow: row;
grid-template-columns: repeat(2, minmax(0, 1fr));
height: auto;
}
.tcl-tab__panel {
outline: none;
}
.tcl-tabs__list:focus-within {
-webkit-box-shadow: none;
box-shadow: none;
}
.tcl-tab--pill {
--tds-tab--background-color: #0000;
border-color: var(--tds-tab--background-color-on);
border-style: solid;
white-space: nowrap;
}
.tcl-tab--pill[aria-selected="true"] {
--tds-tab--background-color: #0000;
border-color: var(--tds-theme-foreground-high-contrast);
border-style: solid;
}
p {
padding-bottom: 14px;
}
.tds-list + p,
p + .tds-list,
p + p,
p.tds-text--caption + p.tds-text--caption {
padding-top: 0;
}
.tcl-theme--support .tcl-rich-text ol ol,
.tcl-theme--support .tcl-rich-text ol ul,
.tcl-theme--support .tcl-rich-text ul ol,
.tcl-theme--support .tcl-rich-text ul ul {
margin-top: var(--tds-list-item--margin-block);
padding-bottom: unset;
}
.tds-text-eyebrow {
display: block;
}
[class*="tds-text-eyebrow--"][class*="tds-text-eyebrow--"] {
display: block;
font-weight: var(--tds-font-weight-regular);
line-height: var(--tds-line-height-unitless);
}
.tds-text-eyebrow--20,
.tds-text-eyebrow--30 {
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 (min-width: 600px) {
.tcl-fit-content {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
}
.tcl-archor-block,
.tcl-hidden {
display: block;
}
.tcl-hidden {
height: 0;
overflow: hidden;
}
:root {
--tcl-icon--border-color: var(--tds-theme-foreground-high-contrast);
--tcl-showcase-down-arrow-display: flex;
}
.tcl-showcase__down-arrow {
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
align-items: center;
-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-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: initial;
border: none;
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
display: var(--tcl-showcase-down-arrow-display);
height: var(--tds-size-3x);
justify-content: center;
margin: 0 auto 3vh;
outline: none;
padding: 0;
width: var(--tds-size-3x);
}
.tcl-showcase__down-arrow .tds-icon {
--tds-icon--size: 70px;
}
.tcl-icon--round {
border: 3px solid var(--tcl-icon--border-color);
border-radius: 20px;
}
:root {
--tcl-component-padding-desktop-block-end: 0;
--tcl-component-padding-desktop-block-start: 0;
--tcl-component-padding-mobile-block-end: 0;
--tcl-component-padding-mobile-block-start: 0;
--tcl-component-padding-tablet-block-end: 0;
--tcl-component-padding-tablet-block-start: 0;
--tcl-section-padding-desktop-block-end: 0;
--tcl-section-padding-desktop-block-start: 0;
--tcl-section-padding-mobile-block-end: 0;
--tcl-section-padding-mobile-block-start: 0;
--tcl-section-padding-tablet-block-end: 0;
--tcl-section-padding-tablet-block-start: 0;
}
.tcl-component-padding {
padding-bottom: 0;
padding-bottom: var(--tcl-component-padding-desktop-block-end);
padding-top: 0;
padding-top: var(--tcl-component-padding-desktop-block-start);
}
@media (min-width: 600px) and (max-width: 899px) {
.tcl-component-padding {
padding-bottom: 0;
padding-bottom: var(--tcl-component-padding-tablet-block-end);
padding-top: 0;
padding-top: var(--tcl-component-padding-tablet-block-start);
}
}
@media (max-width: 599px) {
.tcl-component-padding {
padding-bottom: 0;
padding-bottom: var(--tcl-component-padding-mobile-block-end);
padding-top: 0;
padding-top: var(--tcl-component-padding-mobile-block-start);
}
}
.tcl-section-padding {
padding-bottom: 0;
padding-bottom: var(--tcl-section-padding-desktop-block-end);
padding-top: 0;
padding-top: var(--tcl-section-padding-desktop-block-start);
}
@media (min-width: 600px) and (max-width: 899px) {
.tcl-section-padding {
padding-bottom: 0;
padding-bottom: var(--tcl-section-padding-tablet-block-end);
padding-top: 0;
padding-top: var(--tcl-section-padding-tablet-block-start);
}
}
@media (max-width: 599px) {
.tcl-section-padding {
padding-bottom: 0;
padding-bottom: var(--tcl-section-padding-mobile-block-end);
padding-top: 0;
padding-top: var(--tcl-section-padding-mobile-block-start);
}
.tcl-section--mobile-padding-sm {
--tds-layout-gutter--end: 12px;
--tds-layout-gutter--start: 12px;
}
.tcl-section--mobile-inline-padding-none {
--tds-layout-gutter--end: 0;
--tds-layout-gutter--start: 0;
}
.tcl-section--mobile-inline-padding-sm {
--tds-layout-gutter--end: 12px;
--tds-layout-gutter--start: 12px;
}
}
.tcl-component-padding--use-margin {
margin-bottom: 0;
margin-bottom: var(--tcl-component-padding-desktop-block-end);
margin-top: 0;
margin-top: var(--tcl-component-padding-desktop-block-start);
padding-bottom: 0;
padding-top: 0;
}
@media (min-width: 600px) and (max-width: 899px) {
.tcl-component-padding--use-margin {
margin-bottom: 0;
margin-bottom: var(--tcl-component-padding-tablet-block-end);
margin-top: 0;
margin-top: var(--tcl-component-padding-tablet-block-start);
padding-bottom: 0;
padding-top: 0;
}
}
@media (max-width: 599px) {
.tcl-component-padding--use-margin {
margin-bottom: 0;
margin-bottom: var(--tcl-component-padding-mobile-block-end);
margin-top: 0;
margin-top: var(--tcl-component-padding-mobile-block-start);
padding-bottom: 0;
padding-top: 0;
}
}
.tcl-container--top-padding-small,
.tcl-layout--top-padding-small {
padding-top: var(--tds-size-2x);
}
.tcl-container--top-padding-medium,
.tcl-layout--top-padding-medium {
padding-top: var(--tds-size-4x);
}
.tcl-container--top-padding-large,
.tcl-layout--top-padding-large {
padding-top: var(--tds-size-6x);
}
.tcl-container--top-padding-extra-large,
.tcl-layout--top-padding-extra-large {
padding-top: var(--tds-size-8x);
}
.tcl-container--bottom-padding-small,
.tcl-layout--bottom-padding-small {
padding-bottom: var(--tds-size-2x);
}
.tcl-container--bottom-padding-medium,
.tcl-layout--bottom-padding-medium {
padding-bottom: var(--tds-size-4x);
}
.tcl-container--bottom-padding-large,
.tcl-layout--bottom-padding-large {
padding-bottom: var(--tds-size-6x);
}
.tcl-container--bottom-padding-extra-large,
.tcl-layout--bottom-padding-extra-large {
padding-bottom: var(--tds-size-8x);
}
.tcl-spacing--bottom-padding-8 {
padding-bottom: var(--tds-size-1x);
}
.tcl-spacing--top-padding-8 {
padding-top: var(--tds-size-1x);
}
.tcl-spacing--bottom-padding-16 {
padding-bottom: var(--tds-size-2x);
}
.tcl-spacing--top-padding-16 {
padding-top: var(--tds-size-2x);
}
.tcl-spacing--bottom-padding-24 {
padding-bottom: var(--tds-size-3x);
}
.tcl-spacing--top-padding-24 {
padding-top: var(--tds-size-3x);
}
.tcl-spacing--bottom-padding-32 {
padding-bottom: var(--tds-size-4x);
}
.tcl-spacing--top-padding-32 {
padding-top: var(--tds-size-4x);
}
.tcl-spacing--bottom-padding-40 {
padding-bottom: var(--tds-size-5x);
}
.tcl-spacing--top-padding-40 {
padding-top: var(--tds-size-5x);
}
.tcl-spacing--bottom-padding-48 {
padding-bottom: var(--tds-size-6x);
}
.tcl-spacing--top-padding-48 {
padding-top: var(--tds-size-6x);
}
.tcl-spacing--bottom-padding-64 {
padding-bottom: var(--tds-size-8x);
}
.tcl-spacing--top-padding-64 {
padding-top: var(--tds-size-8x);
}
:root {
--tcl-section-end-gradient-block-size: 20%;
--tcl-section-end-gradient-opacity: 0.5;
--tcl-section-end-gradient-end: #0000;
--tcl-section-end-gradient-start: #000;
--tcl-section-start-gradient-block-size: 20%;
--tcl-section-start-gradient-opacity: 0.5;
--tcl-section-start-gradient-end: #0000;
--tcl-section-start-gradient-start: #000;
}
.tcl-section--with-end-gradient,
.tcl-section--with-start-gradient {
position: relative;
z-index: 1;
}
.tcl-section--with-end-gradient > section,
.tcl-section--with-start-gradient > section {
z-index: 2;
}
[dir="ltr"] .tcl-section--with-start-gradient:before {
left: 0;
}
[dir="rtl"] .tcl-section--with-start-gradient:before {
right: 0;
}
.tcl-section--with-start-gradient:before {
background: -webkit-gradient(
linear,
left top,
left bottom,
from(#000),
to(#0000)
);
background: linear-gradient(180deg, #000 0, #0000);
background: -webkit-gradient(
linear,
left top,
left bottom,
from(var(--tcl-section-start-gradient-start)),
to(var(--tcl-section-start-gradient-end))
);
background: linear-gradient(
to bottom,
var(--tcl-section-start-gradient-start) 0,
var(--tcl-section-start-gradient-end) 100%
);
content: "";
height: 20%;
height: var(--tcl-section-start-gradient-block-size);
inset-inline-start: 0;
opacity: 0.5;
opacity: var(--tcl-section-start-gradient-opacity);
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
[dir="ltr"] .tcl-section--with-end-gradient:after {
left: 0;
}
[dir="rtl"] .tcl-section--with-end-gradient:after {
right: 0;
}
.tcl-section--with-end-gradient:after {
background: -webkit-gradient(
linear,
left bottom,
left top,
from(#000),
to(#0000)
);
background: linear-gradient(0deg, #000 0, #0000);
background: -webkit-gradient(
linear,
left bottom,
left top,
from(var(--tcl-section-end-gradient-start)),
to(var(--tcl-section-end-gradient-end))
);
background: linear-gradient(
to top,
var(--tcl-section-end-gradient-start) 0,
var(--tcl-section-end-gradient-end) 100%
);
bottom: 0;
content: "";
height: 20%;
height: var(--tcl-section-end-gradient-block-size);
inset-inline-start: 0;
opacity: 0.5;
opacity: var(--tcl-section-end-gradient-opacity);
position: absolute;
width: 100%;
z-index: -1;
}
:root {
--tcl-component-aspect-ratio: auto;
--tcl-component-aspect-ratio-asset-top: 0;
--tcl-component-aspect-ratio-asset-transform: none;
--tcl-component-aspect-ratio-polyfill: 0;
--tcl-component-mobile-aspect-ratio: auto;
--tcl-component-mobile-aspect-ratio-polyfill: 0;
--tcl-component-tablet-aspect-ratio: auto;
--tcl-component-tablet-aspect-ratio-polyfill: 0;
}
@media (min-width: 900px) {
.tcl-component-media-ratio .tcl-image,
.tcl-component-media-ratio .tcl-video {
--tcl-component-aspect-ratio-asset-top: 50%;
--tcl-component-aspect-ratio-asset-transform: translateY(-50%)
scale(var(--tcl-asset-scale-by));
--tcl-image-asset-block-size: 100%;
--tcl-image-position: absolute;
--tcl-video-asset-block-size: 100%;
--tcl-video-position: absolute;
top: 0;
top: var(--tcl-component-aspect-ratio-asset-top);
-webkit-transform: none;
transform: none;
-webkit-transform: var(--tcl-component-aspect-ratio-asset-transform);
transform: var(--tcl-component-aspect-ratio-asset-transform);
}
}
@media (max-width: 599px), (min-width: 600px) and (max-width: 899px) {
.tcl-component-mobile-media-ratio .tcl-image,
.tcl-component-mobile-media-ratio .tcl-video,
.tcl-component-tablet-media-ratio .tcl-image,
.tcl-component-tablet-media-ratio .tcl-video {
--tcl-component-aspect-ratio-asset-top: 50%;
--tcl-component-aspect-ratio-asset-transform: translateY(-50%)
scale(var(--tcl-asset-scale-by));
--tcl-image-asset-block-size: 100%;
--tcl-image-position: absolute;
--tcl-video-asset-block-size: 100%;
--tcl-video-position: absolute;
top: 0;
top: var(--tcl-component-aspect-ratio-asset-top);
-webkit-transform: none;
transform: none;
-webkit-transform: var(--tcl-component-aspect-ratio-asset-transform);
transform: var(--tcl-component-aspect-ratio-asset-transform);
}
}
.tcl-component-media-ratio-1-1 {
--tcl-component-aspect-ratio: 1/1;
--tcl-component-aspect-ratio-polyfill: 100%;
}
.tcl-component-media-ratio-16-9 {
--tcl-component-aspect-ratio: 16/9;
--tcl-component-aspect-ratio-polyfill: 56.25%;
}
.tcl-component-media-ratio-21-9 {
--tcl-component-aspect-ratio: 21/9;
--tcl-component-aspect-ratio-polyfill: 42.86%;
}
.tcl-component-media-ratio-4-3 {
--tcl-component-aspect-ratio: 4/3;
--tcl-component-aspect-ratio-polyfill: 75%;
}
.tcl-component-mobile-media-ratio-1-1 {
--tcl-component-mobile-aspect-ratio: 1/1;
--tcl-component-mobile-aspect-ratio-polyfill: 100%;
}
.tcl-component-mobile-media-ratio-16-9 {
--tcl-component-mobile-aspect-ratio: 16/9;
--tcl-component-mobile-aspect-ratio-polyfill: 56.25%;
}
.tcl-component-mobile-media-ratio-21-9 {
--tcl-component-mobile-aspect-ratio: 21/9;
--tcl-component-mobile-aspect-ratio-polyfill: 42.86%;
}
.tcl-component-mobile-media-ratio-3-4 {
--tcl-component-mobile-aspect-ratio: 3/4;
--tcl-component-mobile-aspect-ratio-polyfill: 133.33%;
}
.tcl-component-mobile-media-ratio-9-16 {
--tcl-component-mobile-aspect-ratio: 9/16;
--tcl-component-mobile-aspect-ratio-polyfill: 177.78%;
}
.tcl-component-tablet-media-ratio-1-1 {
--tcl-component-tablet-aspect-ratio: 1/1;
--tcl-component-tablet-aspect-ratio-polyfill: 100%;
}
.tcl-component-tablet-media-ratio-16-9 {
--tcl-component-tablet-aspect-ratio: 16/9;
--tcl-component-tablet-aspect-ratio-polyfill: 56.25%;
}
.tcl-component-tablet-media-ratio-21-9 {
--tcl-component-tablet-aspect-ratio: 21/9;
--tcl-component-tablet-aspect-ratio-polyfill: 42.86%;
}
.tcl-component-tablet-media-ratio-4-3 {
--tcl-component-tablet-aspect-ratio: 4/3;
--tcl-component-tablet-aspect-ratio-polyfill: 75%;
}
.tcl-theme--support .tcl-rich-text p {
padding-bottom: 14px;
}
.tcl-theme--support .tcl-rich-text .h1,
.tcl-theme--support .tcl-rich-text .tds-text--h1 {
padding-bottom: var(--tds-size-3x);
padding-top: var(--tds-size-4x);
}
.tcl-theme--support .tcl-rich-text .tds-text--h2,
.tcl-theme--support .tcl-rich-text h2,
.tcl-theme--support .tds-text--h2.tcl-accordion__heading,
.tcl-theme--support .tds-text--h2.tcl-anchor-point,
.tcl-theme--support h2.tcl-anchor-point {
padding-bottom: var(--tds-size-3x);
padding-top: var(--tds-size-8x);
}
.tcl-theme--support .tcl-rich-text .tds-text--h4,
.tcl-theme--support .tcl-rich-text h4 {
padding-bottom: 18px;
padding-top: var(--tds-size-5x);
}
.tcl-theme--support .tcl-rich-text .tds-text--h6,
.tcl-theme--support .tcl-rich-text h6 {
padding-bottom: 12px;
padding-top: 28px;
}
.tcl-theme--support .tcl-rich-text ol,
.tcl-theme--support .tcl-rich-text ul {
padding-bottom: 14px;
}
.tcl-theme--support .tcl-accordion__item-expanded .tcl-accordion__panel {
margin-bottom: 0;
margin-top: var(--tds-size-half);
}
.tcl-theme--support .tcl-accordion__controls,
.tcl-theme--support .tcl-accordion__controls li:last-child {
padding-bottom: 0;
}
.tcl-theme--support.tcl-theme--support-condensed .tcl-rich-text .tds-text--h2,
.tcl-theme--support.tcl-theme--support-condensed .tcl-rich-text h2 {
padding-bottom: var(--tds-size-3x);
padding-top: var(--tds-size-6x);
}
.tcl-theme--support.tcl-theme--support-condensed .tcl-rich-text .tds-text--h4,
.tcl-theme--support.tcl-theme--support-condensed .tcl-rich-text h4 {
padding-bottom: var(--tds-size-2x);
padding-top: var(--tds-size-4x);
}
.tcl-theme--support.tcl-theme--support-condensed .tcl-rich-text .tds-text--h6,
.tcl-theme--support.tcl-theme--support-condensed .tcl-rich-text h6 {
padding-bottom: 12px;
padding-top: var(--tds-size-3x);
}
body,
html {
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
}
:root {
--tcl-header-background-color: var(--tds-scrim-background, #0000);
}
.tcl-header--sticky {
background-color: initial;
background-color: var(--tcl-header-background-color);
position: fixed !important;
top: 0;
width: 100%;
z-index: 999;
}
.tcl-header--support,
.template-support-page .tcl-header--sticky {
--tcl-header-background-color: var(--tds-color--white);
}
.tcl-page--with-static-header .tcl-header--sticky + .tcl-page__main-content,
.tcl-page--with-sticky-header .tcl-header--sticky + .tcl-page__main-content {
padding-top: var(--tds-size-7x);
}
.tcl-mobile-navigation-search-bar__heading {
padding-top: 0;
}
.tcl-mobile-navigation-search-bar__form {
--tds-height--pill: var(--tds-size-4x);
padding-bottom: var(--tds-size-3x);
padding-top: var(--tds-size-3x);
padding-block: var(--tds-size-3x) var(--tds-size-3x);
}
.tcl-mobile-navigation-search-bar__search-field:-moz-placeholder
+ .tds-form-input-trailing {
visibility: hidden !important;
}
.tcl-mobile-navigation-search-bar__search-field:-ms-input-placeholder
+ .tds-form-input-trailing {
visibility: hidden !important;
}
.tcl-mobile-navigation-search-bar__search-field:placeholder-shown
+ .tds-form-input-trailing {
visibility: hidden !important;
}
@media (max-width: 599px) {
.is-Chrome-iOS .tcl-mobile-navigation-search-bar__search-field,
.is-iOS .tcl-mobile-navigation-search-bar__search-field {
font-size: var(--tds-font-size-30);
}
}
:root {
--tcl-button-backdrop-filter: none;
--tcl-button-inline-size: auto;
--tcl-button-margin-block-end: 0;
--tcl-button-margin-block-start: 0;
--tcl-button-margin-inline-end: 0;
--tcl-button-margin-inline-start: 0;
--tcl-button-min-inline-size: 0;
--tcl-button-max-inline-size: none;
--tcl-button-text-transform: inherit;
}
[dir="ltr"] .tcl-button {
margin-left: 0;
margin-left: var(--tcl-button-margin-inline-start);
margin-right: 0;
margin-right: var(--tcl-button-margin-inline-end);
}
[dir="rtl"] .tcl-button {
margin-left: 0;
margin-left: var(--tcl-button-margin-inline-end);
margin-right: 0;
margin-right: var(--tcl-button-margin-inline-start);
}
.tcl-button {
backdrop-filter: none;
backdrop-filter: var(--tcl-button-backdrop-filter);
margin-bottom: 0;
margin-bottom: var(--tcl-button-margin-block-end);
margin-top: 0;
margin-top: var(--tcl-button-margin-block-start);
margin-block: 0 0;
margin-block: var(--tcl-button-margin-block-start)
var(--tcl-button-margin-block-end);
margin-inline: 0 0;
margin-inline: var(--tcl-button-margin-inline-start)
var(--tcl-button-margin-inline-end);
text-transform: inherit;
text-transform: var(--tcl-button-text-transform);
}
[dir="ltr"] .tcl-button > .tds-icon:first-child {
margin-left: calc(var(--tds-size-1x) * -1);
margin-right: var(--tds-size-half);
}
[dir="rtl"] .tcl-button > .tds-icon:first-child {
margin-left: var(--tds-size-half);
margin-right: calc(var(--tds-size-1x) * -1);
}
.tcl-button > .tds-icon:first-child {
display: inline-block;
margin-inline: calc(var(--tds-size-1x) * -1) var(--tds-size-half);
}
.tcl-button > span {
overflow-wrap: anywhere;
width: 100%;
}
@media (max-width: 599px) {
.tcl-button > span {
overflow-wrap: normal;
}
}
@media (min-width: 600px) {
.tcl-button {
max-width: none;
max-width: var(--tcl-button-max-inline-size);
min-width: 0;
min-width: var(--tcl-button-min-inline-size);
width: auto;
width: var(--tcl-button-inline-size);
}
}
.tcl-layout--2-cols-full-large-main.tcl-layout--main-right {
grid-template-areas: "aside aside aside aside main main main main main main main main";
}
@media (min-width: 1200px) {
.tcl-layout--2-cols-full-large-main.tcl-layout--main-right {
grid-template-areas: "aside aside aside main main main main main main main main main";
}
}
@media (min-width: 600px) {
[dir="ltr"]
.tcl-layout--2-cols-full-large-main.tcl-layout--main-left
.tcl-layout__aside {
padding-left: 0;
}
[dir="rtl"]
.tcl-layout--2-cols-full-large-main.tcl-layout--main-left
.tcl-layout__aside {
padding-right: 0;
}
.tcl-layout--2-cols-full-large-main.tcl-layout--main-left .tcl-layout__aside {
-webkit-padding-start: 0;
padding-inline-start: 0;
}
}
@media (min-width: 600px) {
[dir="ltr"]
.tcl-layout--2-cols-full-main.tcl-layout--main-left
.tcl-layout__aside {
padding-left: 0;
}
[dir="rtl"]
.tcl-layout--2-cols-full-main.tcl-layout--main-left
.tcl-layout__aside {
padding-right: 0;
}
.tcl-layout--2-cols-full-main.tcl-layout--main-left .tcl-layout__aside {
-webkit-padding-start: 0;
padding-inline-start: 0;
}
}
.tcl-layout--2col-content-heavy-support.tcl-layout--main-right {
display: grid;
grid-template-areas: "aside aside aside aside aside aside aside aside aside aside aside aside" "main main main main main main main main main main main main";
}
@media (min-width: 1200px) {
.tcl-layout--2col-content-heavy-support.tcl-layout--main-right {
grid-template-areas: "aside aside aside . main main main main main main main .";
}
}
@media (min-width: 1800px) {
.tcl-layout--2col-content-heavy-support.tcl-layout--main-right {
grid-template-areas: "aside aside aside main main main main main main . . .";
}
.tcl-layout--2col-content-heavy-support .tcl-layout__main {
margin-left: auto;
margin-right: auto;
margin-inline: auto auto;
max-width: 75ch;
}
[dir="ltr"] .tcl-layout--2col-content-heavy-support .tcl-layout_aside {
padding-right: var(--tds-size-4x);
}
[dir="rtl"] .tcl-layout--2col-content-heavy-support .tcl-layout_aside {
padding-left: var(--tds-size-4x);
}
.tcl-layout--2col-content-heavy-support .tcl-layout_aside {
-webkit-padding-end: var(--tds-size-4x);
padding-inline-end: var(--tds-size-4x);
}
}
.tcl-layout--four-columns {
margin-bottom: 0;
margin-top: 0;
margin-block: 0;
}
@media (min-width: 900px) {
.tcl-layout--four-columns {
grid-template-areas: ". . . . main main main main . . . .";
}
}
@media (min-width: 600px) and (max-width: 899px) {
.tcl-layout--four-columns {
grid-template-areas: ". . . main main main main main main . . .";
padding-left: var(--tds-size-3x);
padding-right: var(--tds-size-3x);
padding-inline: var(--tds-size-3x) var(--tds-size-3x);
}
}
@media (min-width: 600px) {
.tcl-layout__main--3-cols {
grid-gap: 0 var(--tds-size-3x);
display: grid;
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 600px) {
.tcl-layout__main--4-cols {
grid-gap: 0 var(--tds-size-3x);
display: grid;
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 600px) and (max-width: 899px) {
.tcl-layout__main--4-cols {
grid-template-columns: repeat(2, 1fr);
}
}
.tcl-page__with-open-modal {
position: static !important;
}
.tcl-modal--compare-trims {
overflow-x: hidden;
}
.tcl-modal--compare-trims::-webkit-scrollbar {
display: none;
}
.tcl-rich-text--no-heading-padding > [class*="-text--h"],
.tcl-rich-text--no-heading-padding > h1,
.tcl-rich-text--no-heading-padding > h2,
.tcl-rich-text--no-heading-padding > h3,
.tcl-rich-text--no-heading-padding > h4,
.tcl-rich-text--no-heading-padding > h5 {
padding: 0;
}
.tcl-rich-text--small-heading-padding > [class*="-text--h"],
.tcl-rich-text--small-heading-padding > h1,
.tcl-rich-text--small-heading-padding > h2,
.tcl-rich-text--small-heading-padding > h3,
.tcl-rich-text--small-heading-padding > h4,
.tcl-rich-text--small-heading-padding > h5 {
padding: var(--tds-size-1x) 0;
}
.tcl-rich-text .text-align-center {
margin-left: auto;
margin-right: auto;
margin-inline: auto;
}
.tcl-site-footer {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
min-height: 70px;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
.tcl-site-footer ~ .block p {
margin: 0 auto;
text-align: center;
}
.tcl-site-footer .tcl-link {
white-space: nowrap;
}
#tds-site-header-wrapper {
width: 100vw;
}
#tds-site-header-wrapper .tds-locale-selector-language {
display: inline-flex;
}
#tds-site-header-wrapper
.tds-site-header-modal
.tds-card.tds-locale-selector-trigger
.tds-icon {
margin-block-start: 8px;
margin-block-start: var(--tds-size--1x);
margin-inline-start: 8px;
margin-inline-start: var(--tds-size--1x);
padding: 1px;
}
.tds-site-header--stuck #tds-site-header-wrapper {
position: absolute;
}
.template-support-page #tds-site-header-wrapper {
z-index: 100;
}
.adminimal-admin-toolbar #tds-site-header-wrapper,
.display-mode--view #tds-site-header-wrapper,
.display-mode--layout #tds-site-header-wrapper {
display: none;
}
.adminimal-admin-toolbar:not(.display-mode--preview) #tds-site-header-wrapper {
top: 110px;
}
@media (min-width: 1199px) {
#tds-site-header-wrapper .tds-site-header .tds-align--start,
#tds-site-header-wrapper .tds-site-header .tds-align--end {
min-inline-size: 240px;
}
.i18n-fr_ch #tds-site-header-wrapper .tds-site-header .tds-align--end,
.i18n-fr_ch #tds-site-header-wrapper .tds-site-header .tds-align--start,
.i18n-it_ch #tds-site-header-wrapper .tds-site-header .tds-align--end,
.i18n-it_ch #tds-site-header-wrapper .tds-site-header .tds-align--start {
min-inline-size: 230px;
}
.i18n-pt_pt #tds-site-header-wrapper .tds-site-header .tds-align--end,
.i18n-pt_pt #tds-site-header-wrapper .tds-site-header .tds-align--start {
min-inline-size: 175px;
margin-inline-start: -20px;
}
}
@media (min-width: 1399px) {
.i18n-pt_pt #tds-site-header-wrapper .tds-site-header .tds-align--end,
.i18n-pt_pt #tds-site-header-wrapper .tds-site-header .tds-align--start {
min-inline-size: 230px;
margin-inline-start: inherit;
}
}
#tds-site-header-wrapper .tds-modal.tds-site-header-modal {
--tds-modal--height: 100%;
z-index: 1000000;
will-change: scroll-position;
}
@media (max-width: 1199px) {
#tds-site-header-wrapper .tds-modal.tds-site-header-modal {
padding-block-end: 0;
}
}
#tds-site-header-wrapper .tds-modal--is-open .trc-main-container-wrapper,
#tds-site-header-wrapper .tds-modal--is-open .Twilio-MainContainer {
z-index: 10 !important;
}
.tds-menu-header-transparent--dark #tds-site-header-wrapper,
.tds-menu-header-transparent--light #tds-site-header-wrapper {
position: absolute;
}
.tds-site-header--dark #tds-site-header-wrapper {
--tds-nav-item--color: var(--tds-color--grey10);
--tds-nav-item--color-highlighted: var(--tds-color--grey10);
--tds-icon-fill-secondary: var(--tds-color--grey10);
--tds-theme-foreground-high-contrast: var(--tds-color--grey10);
}
.tds-site-header--dark #tds-site-header-wrapper {
--tds-nav-item--color: var(--tds-color--grey70);
--tds-nav-item--color-highlighted: var(--tds-color--white);
--tds-icon-fill-secondary: var(--tds-color--white);
--tds-theme-foreground: var(--tds-color--grey10);
--tds-theme-foreground-high-contrast: var(--tds-color--grey10);
--tds-pill--blur-color: hsla(0, 0%, 0%, 0.05);
}
.tds-menu-header-transparent--dark #tds-site-header-wrapper {
--tds-nav-item--color: var(--tds-color--grey10);
--tds-nav-item--color-highlighted: var(--tds-color--grey10);
--tds-icon-fill-secondary: var(--tds-color--grey10);
--tds-theme-foreground: var(--tds-color--grey10);
--tds-theme-foreground-high-contrast: var(--tds-color--grey10);
--tds-pill--blur-color: hsla(0, 0%, 0%, 0.05);
}
.tds-menu-header-transparent--light #tds-site-header-wrapper {
--tds-nav-item--color: var(--tds-color--grey70);
--tds-nav-item--color-highlighted: var(--tds-color--white);
--tds-icon-fill-secondary: var(--tds-color--white);
--tds-theme-foreground: var(--tds-color--white);
--tds-theme-foreground-high-contrast: var(--tds-color--white);
--tds-pill--blur-color: hsla(0, 0%, 100%, 0.2);
}
@media (max-width: 639px) {
.tds-o-header--invert-on-mobile.tds-site-header--dark
#tds-site-header-wrapper {
--tds-nav-item--color: var(--tds-color--grey10);
--tds-nav-item--color-highlighted: var(--tds-color--grey10);
--tds-icon-fill-secondary: var(--tds-color--grey10);
--tds-theme-foreground: var(--tds-color--white);
--tds-theme-foreground-high-contrast: var(--tds-color--white);
--tds-pill--blur-color: hsla(0, 0%, 100%, 0.2);
}
.tds-o-header--invert-on-mobile.tds-site-header--light
#tds-site-header-wrapper {
--tds-nav-item--color: var(--tds-color--grey70);
--tds-nav-item--color-highlighted: var(--tds-color--white);
--tds-icon-fill-secondary: var(--tds-color--white);
--tds-theme-foreground: var(--tds-color--grey10);
--tds-theme-foreground-high-contrast: var(--tds-color--grey10);
--tds-pill--blur-color: hsla(0, 0%, 0%, 0.05);
}
}
.tcl-sticky-navigation .tcl-sticky-navigation__icon {
height: 48px;
height: var(--tds-size--6x);
}
#tds-site-header-wrapper .tds-site-header-modal .tds-modal-header {
min-block-size: 80px;
}
#tds-site-header-wrapper .tds-site-logo-icon {
color: var(--tds-theme-foreground);
}
#tds-site-header-wrapper .tds-site-nav-item {
--tds-nav-item--color: var(--tds-theme-foreground-high-contrast);
}
#tds-site-header-wrapper
.tds-locale-selector--narrow
.tds-locale-selector-column:first-child
.tds-locale-selector-superregion:first-child
> h3 {
padding-block-start: 0;
}
#tds-site-header-wrapper .tds-modal.tds-site-header-modal {
margin-block-start: 0;
}
.dx-mini-locale-selector__container {
--dx-mls-top-spacing: 56px;
background-color: var(--tds-theme-background-dialog);
border-radius: 16px 16px 0 0;
border-radius: var(--tds-size--2x) var(--tds-size--2x) 0 0;
bottom: 0;
-webkit-box-shadow: 0 4px 10px #0003, -4px 0 10px #0003, 4px 0 10px #0003;
box-shadow: 0 4px 10px #0003, -4px 0 10px #0003, 4px 0 10px #0003;
position: fixed;
width: 100%;
z-index: 1000;
}
:is(.tds-scrim--light, .tds-scrim--black, .tds-colorscheme--dark)
.dx-mini-locale-selector__container
.tds-btn--tertiary {
--tds-btn--background-color: var(--tds-theme-background);
}
[dir="ltr"] .dx-mini-locale-selector__header {
padding-left: 32px;
padding-left: var(--tds-size--4x);
padding-right: 8px;
padding-right: var(--tds-size--1x);
}
[dir="rtl"] .dx-mini-locale-selector__header {
padding-left: 8px;
padding-left: var(--tds-size--1x);
padding-right: 32px;
padding-right: var(--tds-size--4x);
}
.dx-mini-locale-selector__header {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: space-between;
padding-bottom: 4px;
padding-bottom: var(--tds-size--half);
padding-top: 8px;
padding-top: var(--tds-size--1x);
padding-block: 8px 4px;
padding-block: var(--tds-size--1x) var(--tds-size--half);
padding-inline: 32px 8px;
padding-inline: var(--tds-size--4x) var(--tds-size--1x);
}
[dir="rtl"]
.dx-mini-locale-selector__container[dir="ltr"]
.dx-mini-locale-selector__header {
padding-inline: unset;
padding-left: 32px;
padding-left: var(--tds-size--4x);
padding-right: 8px;
padding-right: var(--tds-size--1x);
}
[dir="ltr"]
.dx-mini-locale-selector__container[dir="rtl"]
.dx-mini-locale-selector__header {
padding-inline: unset;
padding-left: 8px;
padding-left: var(--tds-size--1x);
padding-right: 32px;
padding-right: var(--tds-size--4x);
}
.dx-mini-locale-selector__title {
padding-bottom: 0;
padding-top: 24px;
padding-top: var(--tds-size--3x);
}
.dx-mini-locale-selector__body {
padding: 0 32px 16px;
padding: 0 var(--tds-size--4x) var(--tds-size--2x);
}
@media (min-width: 900px) {
.dx-mini-locale-selector__container {
border-radius: 8px;
border-radius: var(--tds-size--1x);
bottom: unset;
left: unset;
right: 48px;
right: var(--tds-size--6x);
top: var(--dx-mls-top-spacing);
width: 432px;
}
}
.tds-menu-header-transparent--light
#tds-site-header-wrapper
.dx-mini-locale-selector__container {
--tds-theme-foreground: var(--tds-color-grey-20);
--tds-theme-background-container: var(--tds-color-grey-70);
}
.tds-menu-header-transparent--dark
#tds-site-header-wrapper
.dx-mini-locale-selector__container {
--tds-theme-foreground: var(--tds-color-grey-20);
}
body:not(.tds-menu-header-transparent--light):not(
.tds-menu-header-transparent--dark
).tcl-page--with-sticky-header
.tcl-page__main-content {
--dx-mega-menu__height: 56px;
padding-top: 56px;
padding-top: var(--tds-size--7x);
}
.dx-mega-menu {
--products-grid-column-count: 1;
}
.dx-mega-menu-active-menu-title,
.dx-mega-menu-product-title {
padding: 0;
}
.dx-mega-menu-panel-content {
max-width: 1799px;
}
.dx-mega-menu-products {
display: grid;
gap: var(--tds-size-2x) var(--tds-size-2x);
padding: var(--tds-size-4x) 0 var(--tds-size-3x);
}
.dx-mega-menu-product {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
[dir="ltr"] .dx-mega-menu-product-content {
padding-left: 20px;
}
[dir="rtl"] .dx-mega-menu-product-content {
padding-right: 20px;
}
.dx-mega-menu-product-content {
-webkit-padding-start: 20px;
padding-inline-start: 20px;
}
.dx-mega-menu-product .dx-mega-menu-product-asset,
.dx-mega-menu-product .dx-mega-menu-product-content {
-ms-flex-preferred-size: 0;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-basis: 0;
flex-grow: 1;
}
.dx-mega-menu-product .dx-mega-menu-product-asset {
-webkit-box-pack: end;
-ms-flex-pack: end;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: end;
}
.dx-mega-menu-product .dx-mega-menu-product-asset img {
max-width: 160px;
min-width: 0;
width: 100%;
}
.dx-mega-menu-product-title {
font-size: 17px;
font-size: var(--tds-font-size-40, 17px);
letter-spacing: 0;
}
.dx-mega-menu-product-links {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: var(--tds-size-2x);
padding-top: var(--tds-size-1x);
}
.dx-mega-menu-product-links .tds-link {
color: var(--tds-theme-foreground-low-contrast);
line-height: 12px;
padding-top: var(--tds-size-half);
}
.dx-mega-menu-panel-divider {
background-color: var(--tds-theme-border-low-contrast);
height: 1px;
margin: 0 12px;
}
.dx-nav-item-group {
color: var(--tds-theme-foreground-high-contrast);
padding-top: var(--tds-size-4x);
}
.dx-nav-item-card {
--tds-card--padding: var(--tds-size-1x);
background-color: initial;
padding: var(--tds-size-1x) 0;
}
.dx-nav-item-card .tds-card-body p {
padding-bottom: 0;
}
.tds-menu-header-sticky .dx-mega-menu.dx-mega-menu__slide-in,
.tds-menu-header-sticky .dx-mega-menu.dx-mega-menu__slide-out {
position: fixed;
width: 100%;
z-index: 4;
}
.tds-menu-header-sticky .dx-mega-menu.dx-mega-menu__slide-in:after,
.tds-menu-header-sticky .dx-mega-menu.dx-mega-menu__slide-out:after {
transition-behavior: allow-discrete;
backdrop-filter: (24px);
background-color: #fff;
background-color: var(--tds-color--white);
content: "";
display: block;
height: 100%;
opacity: 1;
position: absolute;
top: 0;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width: 100%;
z-index: 3;
}
.tds-menu-header-sticky .dx-mega-menu.dx-mega-menu__slide-top:after {
background: #0000;
content: "";
-webkit-filter: blur(20);
filter: blur(20);
height: 100%;
opacity: 0;
top: 0;
-webkit-transform: translateX(0);
transform: translateX(0);
width: 100%;
z-index: 3;
}
.tds-menu-header-sticky .dx-mega-menu.dx-mega-menu__slide-in {
top: 0;
}
.tds-menu-header-sticky .dx-mega-menu.dx-mega-menu__slide-top {
position: static;
top: 0;
}
.tds-menu-header-sticky .dx-mega-menu.dx-mega-menu__slide-out {
top: -(var(--dx-mega-menu__height));
}
@media (min-width: 1200px) {
.tds-menu-header--sticky-without-slide--desktop {
.tcl-page__shell {
overflow: visible;
}
section:has(> .tds-site-header-wrapper) {
position: sticky;
top: 0;
z-index: 1000;
}
#tds-site-header-wrapper {
position: unset;
}
}
}
@media (min-width: 600px) and (max-width: 1199px) {
.tds-menu-header--sticky-without-slide--tablet {
.tcl-page__shell {
overflow: visible;
}
section:has(> .tds-site-header-wrapper) {
position: sticky;
top: 0;
z-index: 1000;
}
#tds-site-header-wrapper {
position: unset;
}
}
}
@media (max-width: 599px) {
.tds-menu-header--sticky-without-slide--mobile {
.tcl-page__shell {
overflow: visible;
}
section:has(> .tds-site-header-wrapper) {
position: sticky;
top: 0;
z-index: 1000;
}
#tds-site-header-wrapper {
position: unset;
}
}
}
@media (min-width: 1200px) {
.tds-site-header--white-background--desktop #tds-site-header-wrapper {
--tds-nav-item--color: var(--tds-color--grey70);
--tds-nav-item--color-highlighted: var(--tds-color--white);
--tds-icon-fill-secondary: var(--tds-color--white);
--tds-theme-foreground: var(--tds-color--grey10);
--tds-theme-foreground-high-contrast: var(--tds-color--grey10);
--tds-pill--blur-color: #0000000d;
background-color: #fff;
background-color: var(--tds-color--white);
}
}
@media (min-width: 600px) and (max-width: 1199px) {
.tds-site-header--white-background--tablet #tds-site-header-wrapper {
--tds-nav-item--color: var(--tds-color--grey70);
--tds-nav-item--color-highlighted: var(--tds-color--white);
--tds-icon-fill-secondary: var(--tds-color--white);
--tds-theme-foreground: var(--tds-color--grey10);
--tds-theme-foreground-high-contrast: var(--tds-color--grey10);
--tds-pill--blur-color: #0000000d;
background-color: #fff;
background-color: var(--tds-color--white);
}
}
@media (max-width: 599px) {
.tds-site-header--white-background--mobile #tds-site-header-wrapper {
--tds-nav-item--color: var(--tds-color--grey70);
--tds-nav-item--color-highlighted: var(--tds-color--white);
--tds-icon-fill-secondary: var(--tds-color--white);
--tds-theme-foreground: var(--tds-color--grey10);
--tds-theme-foreground-high-contrast: var(--tds-color--grey10);
--tds-pill--blur-color: #0000000d;
background-color: #fff;
background-color: var(--tds-color--white);
}
}
@media (hover: hover) {
.dx-nav-item-card:hover {
backdrop-filter: blur(16px);
backdrop-filter: blur(var(--tds-blur--button));
background-color: var(--tds-theme-background-container-alt);
}
}
.dx-nav-item-card-header {
font-size: var(--tds-font-size-40);
margin-bottom: var(--tds-size-half);
}
[dir="ltr"] .dx-nav-item-card .tds-icon:first-child {
margin-left: var(--tds-size-1x);
}
[dir="rtl"] .dx-nav-item-card .tds-icon:first-child {
margin-right: var(--tds-size-1x);
}
.dx-nav-item-card .tds-icon:first-child {
-webkit-margin-start: var(--tds-size-1x);
margin-inline-start: var(--tds-size-1x);
}
[dir="ltr"] .dx-nav-item-card .tds-icon:last-child {
margin-right: var(--tds-size-1x);
}
[dir="rtl"] .dx-nav-item-card .tds-icon:last-child {
margin-left: var(--tds-size-1x);
}
.dx-nav-item-card .tds-icon:last-child {
-webkit-margin-end: var(--tds-size-1x);
-ms-flex-item-align: center;
align-self: center;
margin-inline-end: var(--tds-size-1x);
}
[dir="ltr"] .dx-nav-item-card.tds-card .tds-card-body {
padding-left: 12px;
}
[dir="rtl"] .dx-nav-item-card.tds-card .tds-card-body {
padding-right: 12px;
}
.dx-nav-item-card.tds-card .tds-card-body {
-webkit-padding-start: 12px;
padding-inline-start: 12px;
}
.dx-mega-menu-back .tds-icon-chevron-small-270,
.dx-mega-menu-panel .tds-modal-close-icon {
color: var(--tds-theme-foreground-high-contrast);
}
.dx-nav-item-group .tds-site-nav-item .tds-icon-chevron-small-90 {
color: var(--tds-theme-foreground-low-contrast);
}
[dir="ltr"] .dx-mega-menu-inner-banner {
text-align: left;
}
[dir="rtl"] .dx-mega-menu-inner-banner {
text-align: right;
}
.dx-mega-menu-inner-banner {
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
display: box;
overflow: hidden;
padding: var(--tds-size-3x);
text-align: start;
text-overflow: ellipsis;
}
@media (min-width: 450px) {
[dir="ltr"] .dx-mega-menu-product-content {
padding-left: unset;
}
[dir="rtl"] .dx-mega-menu-product-content {
padding-right: unset;
}
.dx-mega-menu-product-content {
-webkit-padding-start: unset;
padding-inline-start: unset;
padding-top: var(--tds-size-1x);
}
.dx-mega-menu-products {
grid-template-columns: repeat(2, 1fr);
padding-bottom: var(--tds-size-4x);
}
.dx-mega-menu-product {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
text-align: center;
}
.dx-mega-menu-product .dx-mega-menu-product-asset,
.dx-mega-menu-product-links {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.dx-mega-menu-product .dx-mega-menu-product-asset img {
height: auto;
max-width: 220px;
width: 100%;
}
.dx-nav-item-group {
padding-top: var(--tds-size-2x);
}
}
@media (min-width: 600px) {
.dx-mega-menu-products {
grid-template-columns: repeat(3, 1fr);
}
.dx-mega-menu .dx-mega-menu-inner-banner {
padding: var(--tds-size-4x) var(--tds-content_container--gutter);
text-align: center;
}
.dx-nav-item-group li {
max-width: 100%;
}
}
@media (min-width: 900px) {
.dx-mega-menu-products {
grid-template-columns: repeat(4, 1fr);
}
.dx-nav-item-card {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
}
@media (max-width: 1199px) {
.dx-nav-item-group .tds-site-nav-item {
padding: var(--tds-size-2x) 6px var(--tds-size-2x)
calc(var(--tds-size-1x) + var(--tds-size-half));
}
}
@media (min-width: 1200px) {
.tcl-simple-banner.tds-banner--precedes-header.dx-banner-override-gradient {
background-image: radial-gradient(
54.97% 272.54% at 27.36% -134.72%,
#000000eb 0,
#000000eb 100%
);
color: #fff;
color: var(--tds-color--white);
}
.tcl-carousel-banner.tds-banner--precedes-header.dx-banner-override-color:not(
.tcl-banner-bg-color--white
) {
background-color: var(--tds-color-grey-10);
color: #fff;
color: var(--tds-color--white);
}
.tcl-carousel-banner.tds-banner--precedes-header:is(
.dx-banner-override-gradient,
.dx-banner-override-color
):not(.tcl-banner-bg-color--white) {
background-color: var(--tds-color-black);
background-image: none;
color: #fff;
color: var(--tds-color--white);
}
.tcl-simple-banner.tds-banner--precedes-header.dx-banner-override-color {
background-color: var(--tds-color-grey-10);
color: #fff;
color: var(--tds-color--white);
}
.tcl-simple-banner.tds-banner--precedes-header:is(
.dx-banner-override-gradient,
.dx-banner-override-color
)
* {
background-color: initial;
color: #fff;
color: var(--tds-color--white);
}
.dx-nav-item-group {
font-size: inherit;
gap: 0;
padding-top: 0;
}
.dx-list-group {
padding: var(--tds-size-1x) 12px;
}
.dx-list-group li:not(:last-of-type) {
margin-bottom: 12px;
}
.dx-mega-menu .tds-site-header-panel-content {
height: calc(var(--active-panel-height) + var(--tds-size-6x));
-webkit-transition: margin 0.5s cubic-bezier(0.5, 0, 0, 0.75),
height 0.5s cubic-bezier(0.5, 0, 0, 0.75) 0.5s,
-webkit-transform 0.5s cubic-bezier(0.5, 0, 0, 0.75);
transition: margin 0.5s cubic-bezier(0.5, 0, 0, 0.75),
height 0.5s cubic-bezier(0.5, 0, 0, 0.75) 0.5s,
-webkit-transform 0.5s cubic-bezier(0.5, 0, 0, 0.75);
transition: transform 0.5s cubic-bezier(0.5, 0, 0, 0.75),
margin 0.5s cubic-bezier(0.5, 0, 0, 0.75),
height 0.5s cubic-bezier(0.5, 0, 0, 0.75) 0.5s;
transition: transform 0.5s cubic-bezier(0.5, 0, 0, 0.75),
margin 0.5s cubic-bezier(0.5, 0, 0, 0.75),
height 0.5s cubic-bezier(0.5, 0, 0, 0.75) 0.5s,
-webkit-transform 0.5s cubic-bezier(0.5, 0, 0, 0.75);
-webkit-transition: margin 0.5s var(--tds-bezier),
height 0.5s var(--tds-bezier) 0.5s,
-webkit-transform 0.5s var(--tds-bezier);
transition: margin 0.5s var(--tds-bezier),
height 0.5s var(--tds-bezier) 0.5s,
-webkit-transform 0.5s var(--tds-bezier);
transition: transform 0.5s var(--tds-bezier), margin 0.5s var(--tds-bezier),
height 0.5s var(--tds-bezier) 0.5s;
transition: transform 0.5s var(--tds-bezier), margin 0.5s var(--tds-bezier),
height 0.5s var(--tds-bezier) 0.5s,
-webkit-transform 0.5s var(--tds-bezier);
}
.dx-mega-menu--expanded .tds-site-header-panel-content {
-webkit-transition: margin 0.5s cubic-bezier(0.5, 0, 0, 0.75),
height 0.5s cubic-bezier(0.5, 0, 0, 0.75),
-webkit-transform 0.5s cubic-bezier(0.5, 0, 0, 0.75);
transition: margin 0.5s cubic-bezier(0.5, 0, 0, 0.75),
height 0.5s cubic-bezier(0.5, 0, 0, 0.75),
-webkit-transform 0.5s cubic-bezier(0.5, 0, 0, 0.75);
transition: transform 0.5s cubic-bezier(0.5, 0, 0, 0.75),
margin 0.5s cubic-bezier(0.5, 0, 0, 0.75),
height 0.5s cubic-bezier(0.5, 0, 0, 0.75);
transition: transform 0.5s cubic-bezier(0.5, 0, 0, 0.75),
margin 0.5s cubic-bezier(0.5, 0, 0, 0.75),
height 0.5s cubic-bezier(0.5, 0, 0, 0.75),
-webkit-transform 0.5s cubic-bezier(0.5, 0, 0, 0.75);
-webkit-transition: margin 0.5s var(--tds-bezier),
height 0.5s var(--tds-bezier), -webkit-transform 0.5s var(--tds-bezier);
transition: margin 0.5s var(--tds-bezier), height 0.5s var(--tds-bezier),
-webkit-transform 0.5s var(--tds-bezier);
transition: transform 0.5s var(--tds-bezier), margin 0.5s var(--tds-bezier),
height 0.5s var(--tds-bezier);
transition: transform 0.5s var(--tds-bezier), margin 0.5s var(--tds-bezier),
height 0.5s var(--tds-bezier), -webkit-transform 0.5s var(--tds-bezier);
}
[dir="ltr"] .dx-mega-menu-panel-content {
left: 50%;
}
[dir="rtl"] .dx-mega-menu-panel-content {
right: 50%;
}
.dx-mega-menu-panel-content {
display: grid;
grid-template-columns: repeat(12, 1fr);
inset-inline-start: 50%;
margin: -100% 0 0;
opacity: 0;
padding: var(--tds-size-8x) 0 var(--tds-size-2x);
pointer-events: none;
position: absolute;
-webkit-transition: opacity 0.2s ease, margin 0s ease 0.2s;
transition: opacity 0.2s ease, margin 0s ease 0.2s;
width: calc(100% - var(--tds-content_container--gutter) * 2);
}
.dx-mega-menu-panel-content,
[dir="ltr"] .dx-mega-menu-panel-content {
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
[dir="rtl"] .dx-mega-menu-panel-content {
-webkit-transform: translateX(50%);
transform: translateX(50%);
}
.dx-mega-menu-panel-content.active {
margin-top: 0;
opacity: 1;
pointer-events: auto;
-webkit-transition: opacity 0.3s ease 0.2s, margin 0s ease;
transition: opacity 0.3s ease 0.2s, margin 0s ease;
}
.dx-mega-menu-panel-content.dx-mega-menu-products--count-1 {
grid-template-columns: repeat(13, 1fr);
}
.dx-mega-menu-link-groups {
display: grid;
gap: 0 var(--tds-size-3x);
grid-column: 4/10;
grid-template-columns: repeat(3, 1fr);
padding: var(--tds-size-1x) 0 var(--tds-size-4x);
}
.dx-mega-menu-link-groups.dx-mega-menu-link-groups--count-2 {
grid-column: 5/10;
grid-template-columns: repeat(2, 1fr);
}
.dx-mega-menu-products {
-ms-flex-line-pack: start;
align-content: flex-start;
grid-column: 3/11;
grid-template-columns: repeat(4, 1fr);
justify-items: center;
padding: 0;
}
.dx-mega-menu-products--count-3 .dx-mega-menu-products {
grid-column: 4/10;
grid-template-columns: repeat(3, 1fr);
}
.dx-mega-menu-products--count-2 .dx-mega-menu-products {
grid-column: 5/9;
grid-template-columns: repeat(2, 1fr);
}
.dx-mega-menu-products--count-1 .dx-mega-menu-products {
grid-column: 6/8;
grid-template-columns: repeat(1, 1fr);
}
.dx-mega-menu-products.dx-mega-menu-products--with-secondary-links {
grid-column: 2/9;
grid-template-columns: repeat(3, 1fr);
}
.dx-mega-menu-products--count-2
.dx-mega-menu-products.dx-mega-menu-products--with-secondary-links {
grid-column: 3/8;
grid-template-columns: repeat(2, 1fr);
}
.dx-mega-menu-products--count-1
.dx-mega-menu-products.dx-mega-menu-products--with-secondary-links {
grid-column: 4/7;
grid-template-columns: repeat(1, 1fr);
}
.dx-mega-menu-panel-divider {
grid-column: 9/10;
height: 100%;
justify-self: center;
width: 1px;
}
.dx-mega-menu-products--count-2 .dx-mega-menu-panel-divider {
grid-column: 8/9;
}
.dx-mega-menu-products--count-1 .dx-mega-menu-panel-divider {
grid-column: 7/8;
}
.dx-mega-menu-secondary-links {
grid-column: 10/12;
padding-top: 0;
position: relative;
}
.dx-mega-menu-products--count-2 .dx-mega-menu-secondary-links {
grid-column: 9/11;
}
.dx-mega-menu-products--count-1 .dx-mega-menu-secondary-links {
grid-column: 8/10;
}
[dir="ltr"] .dx-mega-menu-secondary-links .dx-list-group {
margin-left: -12px;
}
[dir="rtl"] .dx-mega-menu-secondary-links .dx-list-group {
margin-right: -12px;
}
.dx-mega-menu-secondary-links .dx-list-group {
-webkit-margin-start: -12px;
margin-inline-start: -12px;
}
.tds-site-header-panel:not([open]) .dx-mega-menu-product {
opacity: 0;
-webkit-transform: translateY(calc(var(--tds-size-2x) * -1));
transform: translateY(calc(var(--tds-size-2x) * -1));
-webkit-transition: opacity 0s cubic-bezier(0.5, 0, 0, 0.75),
-webkit-transform 0s cubic-bezier(0.5, 0, 0, 0.75);
transition: opacity 0s cubic-bezier(0.5, 0, 0, 0.75),
-webkit-transform 0s cubic-bezier(0.5, 0, 0, 0.75);
transition: transform 0s cubic-bezier(0.5, 0, 0, 0.75),
opacity 0s cubic-bezier(0.5, 0, 0, 0.75);
transition: transform 0s cubic-bezier(0.5, 0, 0, 0.75),
opacity 0s cubic-bezier(0.5, 0, 0, 0.75),
-webkit-transform 0s cubic-bezier(0.5, 0, 0, 0.75);
-webkit-transition: opacity 0s var(--tds-bezier),
-webkit-transform 0s var(--tds-bezier);
transition: opacity 0s var(--tds-bezier),
-webkit-transform 0s var(--tds-bezier);
transition: transform 0s var(--tds-bezier), opacity 0s var(--tds-bezier);
transition: transform 0s var(--tds-bezier), opacity 0s var(--tds-bezier),
-webkit-transform 0s var(--tds-bezier);
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.tds-site-header-panel[open] .dx-mega-menu-product {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transition: opacity 0.5s cubic-bezier(0.5, 0, 0, 0.75),
-webkit-transform 0.5s cubic-bezier(0.5, 0, 0, 0.75);
transition: opacity 0.5s cubic-bezier(0.5, 0, 0, 0.75),
-webkit-transform 0.5s cubic-bezier(0.5, 0, 0, 0.75);
transition: transform 0.5s cubic-bezier(0.5, 0, 0, 0.75),
opacity 0.5s cubic-bezier(0.5, 0, 0, 0.75);
transition: transform 0.5s cubic-bezier(0.5, 0, 0, 0.75),
opacity 0.5s cubic-bezier(0.5, 0, 0, 0.75),
-webkit-transform 0.5s cubic-bezier(0.5, 0, 0, 0.75);
-webkit-transition: opacity 0.5s var(--tds-bezier),
-webkit-transform 0.5s var(--tds-bezier);
transition: opacity 0.5s var(--tds-bezier),
-webkit-transform 0.5s var(--tds-bezier);
transition: transform 0.5s var(--tds-bezier), opacity 0.5s var(--tds-bezier);
transition: transform 0.5s var(--tds-bezier), opacity 0.5s var(--tds-bezier),
-webkit-transform 0.5s var(--tds-bezier);
-webkit-transition-delay: var(--dx-transition-delay);
transition-delay: var(--dx-transition-delay);
}
.dx-nav-item-group.tds-site-nav-items--vertical > li:not(:last-child) {
margin-bottom: 0;
}
.dx-mega-menu-link-group-title {
color: var(--tds-theme-foreground-low-contrast);
font-weight: 400;
padding: 0 12px 14px;
}
.dx-mega-menu-locale-selector {
grid-column: 2/12;
}
}
@media (min-width: 1440px) {
.dx-mega-menu-products.dx-mega-menu-products--with-secondary-links {
grid-template-columns: repeat(4, 1fr);
}
.dx-mega-menu-products--count-3
.dx-mega-menu-products.dx-mega-menu-products--with-secondary-links {
grid-column: 3/8;
grid-template-columns: repeat(3, 1fr);
}
.dx-mega-menu-products--count-2
.dx-mega-menu-products.dx-mega-menu-products--with-secondary-links {
grid-column: 4/7;
}
.dx-mega-menu-products--count-1
.dx-mega-menu-products.dx-mega-menu-products--with-secondary-links {
grid-column: 5/7;
}
.dx-mega-menu-products--count-3 .dx-mega-menu-panel-divider {
grid-column: 8/9;
}
.dx-mega-menu-products--count-2 .dx-mega-menu-panel-divider {
grid-column: 7/8;
}
.dx-mega-menu-products--count-3 .dx-mega-menu-secondary-links {
grid-column: 9/11;
}
.dx-mega-menu-products--count-2 .dx-mega-menu-secondary-links {
grid-column: 8/10;
}
}
.dx-mega-menu .tds-text--caption {
padding-top: 0;
}
@media (min-width: 1200px) {
[dir="ltr"]
.tds-site-header
.tds-site-nav-items.tds-align--end
li:not(:last-child)
.tds-site-nav-item--icon-only {
margin-right: var(--tds-size-half);
}
[dir="rtl"]
.tds-site-header
.tds-site-nav-items.tds-align--end
li:not(:last-child)
.tds-site-nav-item--icon-only {
margin-left: var(--tds-size-half);
}
.tds-site-header
.tds-site-nav-items.tds-align--end
li:not(:last-child)
.tds-site-nav-item--icon-only {
-webkit-margin-end: var(--tds-size-half);
margin-inline-end: var(--tds-size-half);
}
}
.tds-text--h6 {
--tds-heading--letter-spacing: 0;
}
.tds-link:focus {
outline: none;
}
.tds-site-nav-item.tds--hovered {
--tds-nav-item--color: var(--tds-theme-foreground-high-contrast);
backdrop-filter: blur(16px);
backdrop-filter: blur(var(--tds-blur--button));
background-color: var(--tds-theme-background-container-alt);
}
[dir="ltr"]
.tds-site-nav-items--vertical
.tds-site-nav-item--large
.tds-icon:first-child {
margin-right: var(--tds-size-1x);
}
[dir="rtl"]
.tds-site-nav-items--vertical
.tds-site-nav-item--large
.tds-icon:first-child {
margin-left: var(--tds-size-1x);
}
.tds-site-nav-items--vertical .tds-site-nav-item--large .tds-icon:first-child {
-webkit-margin-end: var(--tds-size-1x);
margin-inline-end: var(--tds-size-1x);
}
.mega-menu {
position: relative;
}
.mega-menu .tds-link:where(.tds-link--secondary:hover) {
-webkit-box-shadow: var(--tds-link--box-shadow--hover);
box-shadow: var(--tds-link--box-shadow--hover);
}
[dir="ltr"]
.tds-site-nav-items--vertical
.tds-site-nav-item--large
.tds-icon:last-child {
margin-left: var(--tds-size-1x);
}
[dir="rtl"]
.tds-site-nav-items--vertical
.tds-site-nav-item--large
.tds-icon:last-child {
margin-right: var(--tds-size-1x);
}
.tds-site-nav-items--vertical .tds-site-nav-item--large .tds-icon:last-child {
-webkit-margin-start: var(--tds-size-1x);
margin-inline-start: var(--tds-size-1x);
}
.tcl-simple-banner.tds-banner {
-webkit-transition: background-color 0.5s cubic-bezier(0.5, 0, 0, 0.75),
background-image 0.5s cubic-bezier(0.5, 0, 0, 0.75),
color 0.5s cubic-bezier(0.5, 0, 0, 0.75);
transition: background-color 0.5s cubic-bezier(0.5, 0, 0, 0.75),
background-image 0.5s cubic-bezier(0.5, 0, 0, 0.75),
color 0.5s cubic-bezier(0.5, 0, 0, 0.75);
-webkit-transition: background-color 0.5s var(--tds-bezier),
background-image 0.5s var(--tds-bezier), color 0.5s var(--tds-bezier);
transition: background-color 0.5s var(--tds-bezier),
background-image 0.5s var(--tds-bezier), color 0.5s var(--tds-bezier);
}
.ajax-progress {
display: inline-block;
padding: 1px 5px 2px 5px;
}
[dir="rtl"] .ajax-progress {
float: right;
}
.ajax-progress-throbber .throbber {
display: inline;
padding: 1px 5px 2px;
background: transparent
url(/themes/contrib/stable/css/system/components/../../../images/core/throbber-active.gif)
no-repeat 0 center;
}
.ajax-progress-throbber .message {
display: inline;
padding: 1px 5px 2px;
}
tr .ajax-progress-throbber .throbber {
margin: 0 2px;
}
.ajax-progress-bar {
width: 16em;
}
.ajax-progress-fullscreen {
position: fixed;
z-index: 1000;
top: 48.5%;
left: 49%;
width: 24px;
height: 24px;
padding: 4px;
opacity: 0.9;
border-radius: 7px;
background-color: #232323;
background-image: url(/themes/contrib/stable/css/system/components/../../../images/core/loading-small.gif);
background-repeat: no-repeat;
background-position: center center;
}
[dir="rtl"] .ajax-progress-fullscreen {
right: 49%;
left: auto;
}
.text-align-left {
text-align: left;
}
.text-align-right {
text-align: right;
}
.text-align-center {
text-align: center;
}
.text-align-justify {
text-align: justify;
}
.align-left {
float: left;
}
.align-right {
float: right;
}
.align-center {
display: block;
margin-right: auto;
margin-left: auto;
}
.js input.form-autocomplete {
background-image: url(/themes/contrib/stable/css/system/components/../../../images/core/throbber-inactive.png);
background-repeat: no-repeat;
background-position: 100% center;
}
.js[dir="rtl"] input.form-autocomplete {
background-position: 0 center;
}
.js input.form-autocomplete.ui-autocomplete-loading {
background-image: url(/themes/contrib/stable/css/system/components/../../../images/core/throbber-active.gif);
background-position: 100% center;
}
.js[dir="rtl"] input.form-autocomplete.ui-autocomplete-loading {
background-position: 0 center;
}
.fieldgroup {
padding: 0;
border-width: 0;
}
.container-inline div,
.container-inline label {
display: inline;
}
.container-inline .details-wrapper {
display: block;
}
.clearfix:after {
display: table;
clear: both;
content: "";
}
.js details:not([open]) .details-wrapper {
display: none;
}
.hidden {
display: none;
}
.visually-hidden {
position: absolute !important;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
width: 1px;
height: 1px;
word-wrap: normal;
}
.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
position: static !important;
overflow: visible;
clip: auto;
width: auto;
height: auto;
}
.invisible {
visibility: hidden;
}
.item-list__comma-list,
.item-list__comma-list li {
display: inline;
}
.item-list__comma-list {
margin: 0;
padding: 0;
}
.item-list__comma-list li:after {
content: ", ";
}
.item-list__comma-list li:last-child:after {
content: "";
}
.js .js-hide {
display: none;
}
.js-show {
display: none;
}
.js .js-show {
display: block;
}
.nowrap {
white-space: nowrap;
}
.position-container {
position: relative;
}
.progress {
position: relative;
}
.progress__track {
min-width: 100px;
max-width: 100%;
height: 16px;
margin-top: 5px;
border: 1px solid;
background-color: #fff;
}
.progress__bar {
width: 3%;
min-width: 3%;
max-width: 100%;
height: 1.5em;
background-color: #000;
}
.progress__description,
.progress__percentage {
overflow: hidden;
margin-top: 0.2em;
color: #555;
font-size: 0.875em;
}
.progress__description {
float: left;
}
[dir="rtl"] .progress__description {
float: right;
}
.progress__percentage {
float: right;
}
[dir="rtl"] .progress__percentage {
float: left;
}
.progress--small .progress__track {
height: 7px;
}
.progress--small .progress__bar {
height: 7px;
background-size: 20px 20px;
}
.reset-appearance {
margin: 0;
padding: 0;
border: 0 none;
background: transparent;
line-height: inherit;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.resize-none {
resize: none;
}
.resize-vertical {
min-height: 2em;
resize: vertical;
}
.resize-horizontal {
max-width: 100%;
resize: horizontal;
}
.resize-both {
max-width: 100%;
min-height: 2em;
resize: both;
}
table.sticky-header {
z-index: 500;
top: 0;
margin-top: 0;
background-color: #fff;
}
.system-status-counter__status-icon {
display: inline-block;
width: 25px;
height: 25px;
vertical-align: middle;
}
.system-status-counter__status-icon:before {
display: block;
content: "";
background-repeat: no-repeat;
background-position: center 2px;
background-size: 20px;
}
.system-status-counter__status-icon--error:before {
background-image: url(/themes/contrib/stable/css/system/components/../../../images/core/icons/e32700/error.svg);
}
.system-status-counter__status-icon--warning:before {
background-image: url(/themes/contrib/stable/css/system/components/../../../images/core/icons/e29700/warning.svg);
}
.system-status-counter__status-icon--checked:before {
background-image: url(/themes/contrib/stable/css/system/components/../../../images/core/icons/73b355/check.svg);
}
.system-status-report-counters__item {
width: 100%;
margin-bottom: 0.5em;
padding: 0.5em 0;
text-align: center;
white-space: nowrap;
background-color: rgba(0, 0, 0, 0.063);
}
@media screen and (min-width: 60em) {
.system-status-report-counters {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.system-status-report-counters__item--half-width {
width: 49%;
}
.system-status-report-counters__item--third-width {
width: 33%;
}
}
.system-status-general-info__item {
margin-top: 1em;
padding: 0 1em 1em;
border: 1px solid #ccc;
}
.system-status-general-info__item-title {
border-bottom: 1px solid #ccc;
}
body.drag {
cursor: move;
}
tr.region-title {
font-weight: bold;
}
tr.region-message {
color: #999;
}
tr.region-populated {
display: none;
}
tr.add-new .tabledrag-changed {
display: none;
}
.draggable a.tabledrag-handle {
float: left;
overflow: hidden;
height: 1.7em;
margin-left: -1em;
cursor: move;
text-decoration: none;
}
[dir="rtl"] .draggable a.tabledrag-handle {
float: right;
margin-right: -1em;
margin-left: 0;
}
a.tabledrag-handle:hover {
text-decoration: none;
}
a.tabledrag-handle .handle {
width: 14px;
height: 14px;
margin: -0.4em 0.5em 0;
padding: 0.42em 0.5em;
background: url(/themes/contrib/stable/css/system/components/../../../images/core/icons/787878/move.svg)
no-repeat 6px 7px;
}
a.tabledrag-handle:hover .handle,
a.tabledrag-handle:focus .handle {
background-image: url(/themes/contrib/stable/css/system/components/../../../images/core/icons/000000/move.svg);
}
.touchevents .draggable td {
padding: 0 10px;
}
.touchevents .draggable .menu-item__link {
display: inline-block;
padding: 10px 0;
}
.touchevents a.tabledrag-handle {
width: 40px;
height: 44px;
}
.touchevents a.tabledrag-handle .handle {
height: 21px;
background-position: 40% 19px;
}
[dir="rtl"] .touch a.tabledrag-handle .handle {
background-position: right 40% top 19px;
}
.touchevents .draggable.drag a.tabledrag-handle .handle {
background-position: 50% -32px;
}
.tabledrag-toggle-weight-wrapper {
text-align: right;
}
[dir="rtl"] .tabledrag-toggle-weight-wrapper {
text-align: left;
}
.indentation {
float: left;
width: 20px;
height: 1.7em;
margin: -0.4em 0.2em -0.4em -0.4em;
padding: 0.42em 0 0.42em 0.6em;
}
[dir="rtl"] .indentation {
float: right;
margin: -0.4em -0.4em -0.4em 0.2em;
padding: 0.42em 0.6em 0.42em 0;
}
.tablesort {
display: inline-block;
width: 16px;
height: 16px;
background-size: 100%;
}
.tablesort--asc {
background-image: url(/themes/contrib/stable/css/system/components/../../../images/core/icons/787878/twistie-down.svg);
}
.tablesort--desc {
background-image: url(/themes/contrib/stable/css/system/components/../../../images/core/icons/787878/twistie-up.svg);
}
div.tree-child {
background: url(/themes/contrib/stable/css/system/components/../../../images/core/tree.png)
no-repeat 11px center;
}
div.tree-child-last {
background: url(/themes/contrib/stable/css/system/components/../../../images/core/tree-bottom.png)
no-repeat 11px center;
}
[dir="rtl"] div.tree-child,
[dir="rtl"] div.tree-child-last {
background-position: -65px center;
}
div.tree-child-horizontal {
background: url(/themes/contrib/stable/css/system/components/../../../images/core/tree.png)
no-repeat -11px center;
}
.tcl-react-component__container {
display: block;
}
[dir="ltr"] .tcl-form__confirmation-heading {
margin-left: auto;
}
[dir="ltr"] .tcl-form__confirmation-heading,
[dir="rtl"] .tcl-form__confirmation-heading {
margin-right: auto;
}
[dir="rtl"] .tcl-form__confirmation-heading {
margin-left: auto;
}
.tcl-form__confirmation-heading {
padding-top: 0;
-webkit-margin-start: auto;
margin-inline-start: auto;
-webkit-margin-end: auto;
margin-inline-end: auto;
}
.tcl-form--react-context {
padding-top: 24px;
}
.tcl-form__confirmation-copy p {
max-width: none;
}
li .tcl-react--bundle-context {
min-height: 100px;
}
.tcl-text {
font-style: normal;
padding: 0;
}
.tcl-text--f72l72 {
font-size: 72px;
font-size: var(--tds-size--9x);
line-height: 72px;
line-height: var(--tds-size--9x);
}
.tcl-text--f64l64 {
font-size: 64px;
font-size: var(--tds-size--8x);
}
.tcl-text--f56l64,
.tcl-text--f64l64 {
line-height: 64px;
line-height: var(--tds-size--8x);
}
.tcl-text--f56l56,
.tcl-text--f56l64 {
font-size: 56px;
font-size: var(--tds-size--7x);
}
.tcl-text--f48l56,
.tcl-text--f56l56 {
line-height: 56px;
line-height: var(--tds-size--7x);
}
.tcl-text--f48l56 {
font-size: 48px;
font-size: var(--tds-size--6x);
}
.tcl-text--f22l30 {
font-size: 22px;
line-height: 30px;
}
.tcl-text--f17l24 {
font-size: var(--tds-font-size-40);
line-height: 24px;
line-height: var(--tds-size--3x);
}
.tcl-text--h0 {
font-size: 56px;
font-size: var(--tds-size--7x);
line-height: 56px;
line-height: var(--tds-size--7x);
}
.tcl-text--h1 {
font-size: var(--tds-font-size-80);
line-height: var(--tds-line-height-80);
}
.tcl-text--h1-alt {
font-size: var(--tds-font-size-75);
line-height: var(--tds-line-height-75);
}
.tcl-text--h2 {
font-size: var(--tds-font-size-70);
line-height: var(--tds-line-height-70);
}
.tcl-text--h3 {
font-size: var(--tds-font-size-60);
}
.tcl-text--h3,
.tcl-text--h4 {
line-height: var(--tds-line-height-60);
}
.tcl-text--h4 {
font-size: var(--tds-font-size-50);
}
.tcl-text--h5 {
font-size: var(--tds-font-size-40);
line-height: var(--tds-line-height-20);
}
.tcl-text--body,
.tcl-text--h6 {
font-size: var(--tds-font-size-30);
line-height: var(--tds-line-height-30);
}
.tcl-text--caption {
font-size: var(--tds-font-size-20);
line-height: var(--tds-line-height-10);
}
.tcl-text-family--display {
font-family: var(--tds-font-family-latin-display);
}
.tcl-text-family--text {
font-family: var(--tds-font-family-latin-text);
}
.tcl-font-weight--200 {
font-weight: 200;
}
.tcl-font-style--italic {
font-style: italic;
}
.tcl-text-decoration--strikethrough {
text-decoration: line-through;
}
.tcl-color-theme-foreground {
color: var(--tds-theme-foreground);
}
.tcl-color-theme-foreground-primary {
color: var(--tds-theme-foreground-primary);
}
.tcl-color-theme-foreground-high-contrast {
color: var(--tds-theme-foreground-high-contrast);
}
.tcl-color-theme-foreground-low-contrast {
color: var(--tds-theme-foreground-low-contrast);
}
.tcl-color-theme-foreground-on-primary {
color: var(--tds-theme-foreground-on-primary);
}
.tcl-color-theme-background {
color: var(--tds-theme-background);
}
.tcl-color-white {
color: #fff;
color: var(--tds-color--white);
}
.tcl-color-black {
color: #000;
color: var(--tds-color--black);
}
.tcl-column-start--0 {
grid-column-start: 1;
}
.tcl-column-start--1 {
grid-column-start: 2;
}
.tcl-column-start--2 {
grid-column-start: 3;
}
.tcl-column-start--3 {
grid-column-start: 4;
}
.tcl-column-start--4 {
grid-column-start: 5;
}
.tcl-column-start--5 {
grid-column-start: 6;
}
.tcl-column-start--6 {
grid-column-start: 7;
}
.tcl-column-start--7 {
grid-column-start: 8;
}
.tcl-column-start--8 {
grid-column-start: 9;
}
.tcl-column-start--9 {
grid-column-start: 10;
}
.tcl-column-start--10 {
grid-column-start: 11;
}
.tcl-column-start--11 {
grid-column-start: 12;
}
.tcl-column-start--12 {
grid-column-start: 13;
}
.tcl-column-start--13 {
grid-column-start: 14;
}
.tcl-column-start--14 {
grid-column-start: 15;
}
.tcl-column-start--15 {
grid-column-start: 16;
}
.tcl-column-start--16 {
grid-column-start: 17;
}
.tcl-column-start--17 {
grid-column-start: 18;
}
.tcl-column-start--18 {
grid-column-start: 19;
}
.tcl-column-start--19 {
grid-column-start: 20;
}
.tcl-column-start--20 {
grid-column-start: 21;
}
.tcl-column-start--21 {
grid-column-start: 22;
}
.tcl-column-start--22 {
grid-column-start: 23;
}
.tcl-column-start--23 {
grid-column-start: 24;
}
.tcl-column-start--24 {
grid-column-start: 25;
}
.tcl-column-start--25 {
grid-column-start: 26;
}
.tcl-column-start--26 {
grid-column-start: 27;
}
.tcl-column-start--27 {
grid-column-start: 28;
}
.tcl-column-start--28 {
grid-column-start: 29;
}
.tcl-column-start--29 {
grid-column-start: 30;
}
.tcl-column-start--30 {
grid-column-start: 31;
}
.tcl-column-start--31 {
grid-column-start: 32;
}
.tcl-column-start--32 {
grid-column-start: 33;
}
.tcl-column-start--33 {
grid-column-start: 34;
}
.tcl-column-start--34 {
grid-column-start: 35;
}
.tcl-column-start--35 {
grid-column-start: 36;
}
.tcl-column-start--36 {
grid-column-start: 37;
}
.tcl-column-start--37 {
grid-column-start: 38;
}
.tcl-column-start--38 {
grid-column-start: 39;
}
.tcl-column-start--39 {
grid-column-start: 40;
}
.tcl-column-start--40 {
grid-column-start: 41;
}
.tcl-column-start--41 {
grid-column-start: 42;
}
.tcl-column-start--42 {
grid-column-start: 43;
}
.tcl-column-start--43 {
grid-column-start: 44;
}
.tcl-column-start--44 {
grid-column-start: 45;
}
.tcl-column-start--45 {
grid-column-start: 46;
}
.tcl-column-start--46 {
grid-column-start: 47;
}
.tcl-column-start--47 {
grid-column-start: 48;
}
.tcl-column-start--48 {
grid-column-start: 49;
}
.tcl-column-start--negative-0 {
grid-column-start: -1;
}
.tcl-column-start--negative-1 {
grid-column-start: -2;
}
.tcl-column-start--negative-2 {
grid-column-start: -3;
}
.tcl-column-start--negative-3 {
grid-column-start: -4;
}
.tcl-column-start--negative-4 {
grid-column-start: -5;
}
.tcl-column-start--negative-5 {
grid-column-start: -6;
}
.tcl-column-start--negative-6 {
grid-column-start: -7;
}
.tcl-column-start--negative-7 {
grid-column-start: -8;
}
.tcl-column-start--negative-8 {
grid-column-start: -9;
}
.tcl-column-start--negative-9 {
grid-column-start: -10;
}
.tcl-column-start--negative-10 {
grid-column-start: -11;
}
.tcl-column-start--negative-11 {
grid-column-start: -12;
}
.tcl-column-start--negative-12 {
grid-column-start: -13;
}
.tcl-column-start--negative-13 {
grid-column-start: -14;
}
.tcl-column-start--negative-14 {
grid-column-start: -15;
}
.tcl-column-start--negative-15 {
grid-column-start: -16;
}
.tcl-column-start--negative-16 {
grid-column-start: -17;
}
.tcl-column-start--negative-17 {
grid-column-start: -18;
}
.tcl-column-start--negative-18 {
grid-column-start: -19;
}
.tcl-column-start--negative-19 {
grid-column-start: -20;
}
.tcl-column-start--negative-20 {
grid-column-start: -21;
}
.tcl-column-start--negative-21 {
grid-column-start: -22;
}
.tcl-column-start--negative-22 {
grid-column-start: -23;
}
.tcl-column-start--negative-23 {
grid-column-start: -24;
}
.tcl-column-start--negative-24 {
grid-column-start: -25;
}
.tcl-column-start--negative-25 {
grid-column-start: -26;
}
.tcl-column-start--negative-26 {
grid-column-start: -27;
}
.tcl-column-start--negative-27 {
grid-column-start: -28;
}
.tcl-column-start--negative-28 {
grid-column-start: -29;
}
.tcl-column-start--negative-29 {
grid-column-start: -30;
}
.tcl-column-start--negative-30 {
grid-column-start: -31;
}
.tcl-column-start--negative-31 {
grid-column-start: -32;
}
.tcl-column-start--negative-32 {
grid-column-start: -33;
}
.tcl-column-start--negative-33 {
grid-column-start: -34;
}
.tcl-column-start--negative-34 {
grid-column-start: -35;
}
.tcl-column-start--negative-35 {
grid-column-start: -36;
}
.tcl-column-start--negative-36 {
grid-column-start: -37;
}
.tcl-column-start--negative-37 {
grid-column-start: -38;
}
.tcl-column-start--negative-38 {
grid-column-start: -39;
}
.tcl-column-start--negative-39 {
grid-column-start: -40;
}
.tcl-column-start--negative-40 {
grid-column-start: -41;
}
.tcl-column-start--negative-41 {
grid-column-start: -42;
}
.tcl-column-start--negative-42 {
grid-column-start: -43;
}
.tcl-column-start--negative-43 {
grid-column-start: -44;
}
.tcl-column-start--negative-44 {
grid-column-start: -45;
}
.tcl-column-start--negative-45 {
grid-column-start: -46;
}
.tcl-column-start--negative-46 {
grid-column-start: -47;
}
.tcl-column-start--negative-47 {
grid-column-start: -48;
}
.tcl-column-start--negative-48 {
grid-column-start: -49;
}
.tcl-column-end--0 {
grid-column-end: 1;
}
.tcl-column-end--1 {
grid-column-end: 2;
}
.tcl-column-end--2 {
grid-column-end: 3;
}
.tcl-column-end--3 {
grid-column-end: 4;
}
.tcl-column-end--4 {
grid-column-end: 5;
}
.tcl-column-end--5 {
grid-column-end: 6;
}
.tcl-column-end--6 {
grid-column-end: 7;
}
.tcl-column-end--7 {
grid-column-end: 8;
}
.tcl-column-end--8 {
grid-column-end: 9;
}
.tcl-column-end--9 {
grid-column-end: 10;
}
.tcl-column-end--10 {
grid-column-end: 11;
}
.tcl-column-end--11 {
grid-column-end: 12;
}
.tcl-column-end--12 {
grid-column-end: 13;
}
.tcl-column-end--13 {
grid-column-end: 14;
}
.tcl-column-end--14 {
grid-column-end: 15;
}
.tcl-column-end--15 {
grid-column-end: 16;
}
.tcl-column-end--16 {
grid-column-end: 17;
}
.tcl-column-end--17 {
grid-column-end: 18;
}
.tcl-column-end--18 {
grid-column-end: 19;
}
.tcl-column-end--19 {
grid-column-end: 20;
}
.tcl-column-end--20 {
grid-column-end: 21;
}
.tcl-column-end--21 {
grid-column-end: 22;
}
.tcl-column-end--22 {
grid-column-end: 23;
}
.tcl-column-end--23 {
grid-column-end: 24;
}
.tcl-column-end--24 {
grid-column-end: 25;
}
.tcl-column-end--25 {
grid-column-end: 26;
}
.tcl-column-end--26 {
grid-column-end: 27;
}
.tcl-column-end--27 {
grid-column-end: 28;
}
.tcl-column-end--28 {
grid-column-end: 29;
}
.tcl-column-end--29 {
grid-column-end: 30;
}
.tcl-column-end--30 {
grid-column-end: 31;
}
.tcl-column-end--31 {
grid-column-end: 32;
}
.tcl-column-end--32 {
grid-column-end: 33;
}
.tcl-column-end--33 {
grid-column-end: 34;
}
.tcl-column-end--34 {
grid-column-end: 35;
}
.tcl-column-end--35 {
grid-column-end: 36;
}
.tcl-column-end--36 {
grid-column-end: 37;
}
.tcl-column-end--37 {
grid-column-end: 38;
}
.tcl-column-end--38 {
grid-column-end: 39;
}
.tcl-column-end--39 {
grid-column-end: 40;
}
.tcl-column-end--40 {
grid-column-end: 41;
}
.tcl-column-end--41 {
grid-column-end: 42;
}
.tcl-column-end--42 {
grid-column-end: 43;
}
.tcl-column-end--43 {
grid-column-end: 44;
}
.tcl-column-end--44 {
grid-column-end: 45;
}
.tcl-column-end--45 {
grid-column-end: 46;
}
.tcl-column-end--46 {
grid-column-end: 47;
}
.tcl-column-end--47 {
grid-column-end: 48;
}
.tcl-column-end--48 {
grid-column-end: 49;
}
.tcl-column-end--negative-0 {
grid-column-end: -1;
}
.tcl-column-end--negative-1 {
grid-column-end: -2;
}
.tcl-column-end--negative-2 {
grid-column-end: -3;
}
.tcl-column-end--negative-3 {
grid-column-end: -4;
}
.tcl-column-end--negative-4 {
grid-column-end: -5;
}
.tcl-column-end--negative-5 {
grid-column-end: -6;
}
.tcl-column-end--negative-6 {
grid-column-end: -7;
}
.tcl-column-end--negative-7 {
grid-column-end: -8;
}
.tcl-column-end--negative-8 {
grid-column-end: -9;
}
.tcl-column-end--negative-9 {
grid-column-end: -10;
}
.tcl-column-end--negative-10 {
grid-column-end: -11;
}
.tcl-column-end--negative-11 {
grid-column-end: -12;
}
.tcl-column-end--negative-12 {
grid-column-end: -13;
}
.tcl-column-end--negative-13 {
grid-column-end: -14;
}
.tcl-column-end--negative-14 {
grid-column-end: -15;
}
.tcl-column-end--negative-15 {
grid-column-end: -16;
}
.tcl-column-end--negative-16 {
grid-column-end: -17;
}
.tcl-column-end--negative-17 {
grid-column-end: -18;
}
.tcl-column-end--negative-18 {
grid-column-end: -19;
}
.tcl-column-end--negative-19 {
grid-column-end: -20;
}
.tcl-column-end--negative-20 {
grid-column-end: -21;
}
.tcl-column-end--negative-21 {
grid-column-end: -22;
}
.tcl-column-end--negative-22 {
grid-column-end: -23;
}
.tcl-column-end--negative-23 {
grid-column-end: -24;
}
.tcl-column-end--negative-24 {
grid-column-end: -25;
}
.tcl-column-end--negative-25 {
grid-column-end: -26;
}
.tcl-column-end--negative-26 {
grid-column-end: -27;
}
.tcl-column-end--negative-27 {
grid-column-end: -28;
}
.tcl-column-end--negative-28 {
grid-column-end: -29;
}
.tcl-column-end--negative-29 {
grid-column-end: -30;
}
.tcl-column-end--negative-30 {
grid-column-end: -31;
}
.tcl-column-end--negative-31 {
grid-column-end: -32;
}
.tcl-column-end--negative-32 {
grid-column-end: -33;
}
.tcl-column-end--negative-33 {
grid-column-end: -34;
}
.tcl-column-end--negative-34 {
grid-column-end: -35;
}
.tcl-column-end--negative-35 {
grid-column-end: -36;
}
.tcl-column-end--negative-36 {
grid-column-end: -37;
}
.tcl-column-end--negative-37 {
grid-column-end: -38;
}
.tcl-column-end--negative-38 {
grid-column-end: -39;
}
.tcl-column-end--negative-39 {
grid-column-end: -40;
}
.tcl-column-end--negative-40 {
grid-column-end: -41;
}
.tcl-column-end--negative-41 {
grid-column-end: -42;
}
.tcl-column-end--negative-42 {
grid-column-end: -43;
}
.tcl-column-end--negative-43 {
grid-column-end: -44;
}
.tcl-column-end--negative-44 {
grid-column-end: -45;
}
.tcl-column-end--negative-45 {
grid-column-end: -46;
}
.tcl-column-end--negative-46 {
grid-column-end: -47;
}
.tcl-column-end--negative-47 {
grid-column-end: -48;
}
.tcl-column-end--negative-48 {
grid-column-end: -49;
}
.tcl-row-start--0 {
grid-row-start: 1;
}
.tcl-row-start--1 {
grid-row-start: 2;
}
.tcl-row-start--2 {
grid-row-start: 3;
}
.tcl-row-start--3 {
grid-row-start: 4;
}
.tcl-row-start--4 {
grid-row-start: 5;
}
.tcl-row-start--5 {
grid-row-start: 6;
}
.tcl-row-start--6 {
grid-row-start: 7;
}
.tcl-row-start--7 {
grid-row-start: 8;
}
.tcl-row-start--8 {
grid-row-start: 9;
}
.tcl-row-start--9 {
grid-row-start: 10;
}
.tcl-row-start--10 {
grid-row-start: 11;
}
.tcl-row-start--11 {
grid-row-start: 12;
}
.tcl-row-start--12 {
grid-row-start: 13;
}
.tcl-row-start--13 {
grid-row-start: 14;
}
.tcl-row-start--14 {
grid-row-start: 15;
}
.tcl-row-start--15 {
grid-row-start: 16;
}
.tcl-row-start--16 {
grid-row-start: 17;
}
.tcl-row-start--17 {
grid-row-start: 18;
}
.tcl-row-start--18 {
grid-row-start: 19;
}
.tcl-row-start--19 {
grid-row-start: 20;
}
.tcl-row-start--20 {
grid-row-start: 21;
}
.tcl-row-start--21 {
grid-row-start: 22;
}
.tcl-row-start--22 {
grid-row-start: 23;
}
.tcl-row-start--23 {
grid-row-start: 24;
}
.tcl-row-start--24 {
grid-row-start: 25;
}
.tcl-row-start--25 {
grid-row-start: 26;
}
.tcl-row-start--26 {
grid-row-start: 27;
}
.tcl-row-start--27 {
grid-row-start: 28;
}
.tcl-row-start--28 {
grid-row-start: 29;
}
.tcl-row-start--29 {
grid-row-start: 30;
}
.tcl-row-start--30 {
grid-row-start: 31;
}
.tcl-row-start--31 {
grid-row-start: 32;
}
.tcl-row-start--32 {
grid-row-start: 33;
}
.tcl-row-start--33 {
grid-row-start: 34;
}
.tcl-row-start--34 {
grid-row-start: 35;
}
.tcl-row-start--35 {
grid-row-start: 36;
}
.tcl-row-start--36 {
grid-row-start: 37;
}
.tcl-row-start--37 {
grid-row-start: 38;
}
.tcl-row-start--38 {
grid-row-start: 39;
}
.tcl-row-start--39 {
grid-row-start: 40;
}
.tcl-row-start--40 {
grid-row-start: 41;
}
.tcl-row-start--41 {
grid-row-start: 42;
}
.tcl-row-start--42 {
grid-row-start: 43;
}
.tcl-row-start--43 {
grid-row-start: 44;
}
.tcl-row-start--44 {
grid-row-start: 45;
}
.tcl-row-start--45 {
grid-row-start: 46;
}
.tcl-row-start--46 {
grid-row-start: 47;
}
.tcl-row-start--47 {
grid-row-start: 48;
}
.tcl-row-start--48 {
grid-row-start: 49;
}
.tcl-row-start--negative-0 {
grid-row-start: -1;
}
.tcl-row-start--negative-1 {
grid-row-start: -2;
}
.tcl-row-start--negative-2 {
grid-row-start: -3;
}
.tcl-row-start--negative-3 {
grid-row-start: -4;
}
.tcl-row-start--negative-4 {
grid-row-start: -5;
}
.tcl-row-start--negative-5 {
grid-row-start: -6;
}
.tcl-row-start--negative-6 {
grid-row-start: -7;
}
.tcl-row-start--negative-7 {
grid-row-start: -8;
}
.tcl-row-start--negative-8 {
grid-row-start: -9;
}
.tcl-row-start--negative-9 {
grid-row-start: -10;
}
.tcl-row-start--negative-10 {
grid-row-start: -11;
}
.tcl-row-start--negative-11 {
grid-row-start: -12;
}
.tcl-row-start--negative-12 {
grid-row-start: -13;
}
.tcl-row-start--negative-13 {
grid-row-start: -14;
}
.tcl-row-start--negative-14 {
grid-row-start: -15;
}
.tcl-row-start--negative-15 {
grid-row-start: -16;
}
.tcl-row-start--negative-16 {
grid-row-start: -17;
}
.tcl-row-start--negative-17 {
grid-row-start: -18;
}
.tcl-row-start--negative-18 {
grid-row-start: -19;
}
.tcl-row-start--negative-19 {
grid-row-start: -20;
}
.tcl-row-start--negative-20 {
grid-row-start: -21;
}
.tcl-row-start--negative-21 {
grid-row-start: -22;
}
.tcl-row-start--negative-22 {
grid-row-start: -23;
}
.tcl-row-start--negative-23 {
grid-row-start: -24;
}
.tcl-row-start--negative-24 {
grid-row-start: -25;
}
.tcl-row-start--negative-25 {
grid-row-start: -26;
}
.tcl-row-start--negative-26 {
grid-row-start: -27;
}
.tcl-row-start--negative-27 {
grid-row-start: -28;
}
.tcl-row-start--negative-28 {
grid-row-start: -29;
}
.tcl-row-start--negative-29 {
grid-row-start: -30;
}
.tcl-row-start--negative-30 {
grid-row-start: -31;
}
.tcl-row-start--negative-31 {
grid-row-start: -32;
}
.tcl-row-start--negative-32 {
grid-row-start: -33;
}
.tcl-row-start--negative-33 {
grid-row-start: -34;
}
.tcl-row-start--negative-34 {
grid-row-start: -35;
}
.tcl-row-start--negative-35 {
grid-row-start: -36;
}
.tcl-row-start--negative-36 {
grid-row-start: -37;
}
.tcl-row-start--negative-37 {
grid-row-start: -38;
}
.tcl-row-start--negative-38 {
grid-row-start: -39;
}
.tcl-row-start--negative-39 {
grid-row-start: -40;
}
.tcl-row-start--negative-40 {
grid-row-start: -41;
}
.tcl-row-start--negative-41 {
grid-row-start: -42;
}
.tcl-row-start--negative-42 {
grid-row-start: -43;
}
.tcl-row-start--negative-43 {
grid-row-start: -44;
}
.tcl-row-start--negative-44 {
grid-row-start: -45;
}
.tcl-row-start--negative-45 {
grid-row-start: -46;
}
.tcl-row-start--negative-46 {
grid-row-start: -47;
}
.tcl-row-start--negative-47 {
grid-row-start: -48;
}
.tcl-row-start--negative-48 {
grid-row-start: -49;
}
.tcl-row-end--0 {
grid-row-end: 1;
}
.tcl-row-end--1 {
grid-row-end: 2;
}
.tcl-row-end--2 {
grid-row-end: 3;
}
.tcl-row-end--3 {
grid-row-end: 4;
}
.tcl-row-end--4 {
grid-row-end: 5;
}
.tcl-row-end--5 {
grid-row-end: 6;
}
.tcl-row-end--6 {
grid-row-end: 7;
}
.tcl-row-end--7 {
grid-row-end: 8;
}
.tcl-row-end--8 {
grid-row-end: 9;
}
.tcl-row-end--9 {
grid-row-end: 10;
}
.tcl-row-end--10 {
grid-row-end: 11;
}
.tcl-row-end--11 {
grid-row-end: 12;
}
.tcl-row-end--12 {
grid-row-end: 13;
}
.tcl-row-end--13 {
grid-row-end: 14;
}
.tcl-row-end--14 {
grid-row-end: 15;
}
.tcl-row-end--15 {
grid-row-end: 16;
}
.tcl-row-end--16 {
grid-row-end: 17;
}
.tcl-row-end--17 {
grid-row-end: 18;
}
.tcl-row-end--18 {
grid-row-end: 19;
}
.tcl-row-end--19 {
grid-row-end: 20;
}
.tcl-row-end--20 {
grid-row-end: 21;
}
.tcl-row-end--21 {
grid-row-end: 22;
}
.tcl-row-end--22 {
grid-row-end: 23;
}
.tcl-row-end--23 {
grid-row-end: 24;
}
.tcl-row-end--24 {
grid-row-end: 25;
}
.tcl-row-end--25 {
grid-row-end: 26;
}
.tcl-row-end--26 {
grid-row-end: 27;
}
.tcl-row-end--27 {
grid-row-end: 28;
}
.tcl-row-end--28 {
grid-row-end: 29;
}
.tcl-row-end--29 {
grid-row-end: 30;
}
.tcl-row-end--30 {
grid-row-end: 31;
}
.tcl-row-end--31 {
grid-row-end: 32;
}
.tcl-row-end--32 {
grid-row-end: 33;
}
.tcl-row-end--33 {
grid-row-end: 34;
}
.tcl-row-end--34 {
grid-row-end: 35;
}
.tcl-row-end--35 {
grid-row-end: 36;
}
.tcl-row-end--36 {
grid-row-end: 37;
}
.tcl-row-end--37 {
grid-row-end: 38;
}
.tcl-row-end--38 {
grid-row-end: 39;
}
.tcl-row-end--39 {
grid-row-end: 40;
}
.tcl-row-end--40 {
grid-row-end: 41;
}
.tcl-row-end--41 {
grid-row-end: 42;
}
.tcl-row-end--42 {
grid-row-end: 43;
}
.tcl-row-end--43 {
grid-row-end: 44;
}
.tcl-row-end--44 {
grid-row-end: 45;
}
.tcl-row-end--45 {
grid-row-end: 46;
}
.tcl-row-end--46 {
grid-row-end: 47;
}
.tcl-row-end--47 {
grid-row-end: 48;
}
.tcl-row-end--48 {
grid-row-end: 49;
}
.tcl-row-end--negative-0 {
grid-row-end: -1;
}
.tcl-row-end--negative-1 {
grid-row-end: -2;
}
.tcl-row-end--negative-2 {
grid-row-end: -3;
}
.tcl-row-end--negative-3 {
grid-row-end: -4;
}
.tcl-row-end--negative-4 {
grid-row-end: -5;
}
.tcl-row-end--negative-5 {
grid-row-end: -6;
}
.tcl-row-end--negative-6 {
grid-row-end: -7;
}
.tcl-row-end--negative-7 {
grid-row-end: -8;
}
.tcl-row-end--negative-8 {
grid-row-end: -9;
}
.tcl-row-end--negative-9 {
grid-row-end: -10;
}
.tcl-row-end--negative-10 {
grid-row-end: -11;
}
.tcl-row-end--negative-11 {
grid-row-end: -12;
}
.tcl-row-end--negative-12 {
grid-row-end: -13;
}
.tcl-row-end--negative-13 {
grid-row-end: -14;
}
.tcl-row-end--negative-14 {
grid-row-end: -15;
}
.tcl-row-end--negative-15 {
grid-row-end: -16;
}
.tcl-row-end--negative-16 {
grid-row-end: -17;
}
.tcl-row-end--negative-17 {
grid-row-end: -18;
}
.tcl-row-end--negative-18 {
grid-row-end: -19;
}
.tcl-row-end--negative-19 {
grid-row-end: -20;
}
.tcl-row-end--negative-20 {
grid-row-end: -21;
}
.tcl-row-end--negative-21 {
grid-row-end: -22;
}
.tcl-row-end--negative-22 {
grid-row-end: -23;
}
.tcl-row-end--negative-23 {
grid-row-end: -24;
}
.tcl-row-end--negative-24 {
grid-row-end: -25;
}
.tcl-row-end--negative-25 {
grid-row-end: -26;
}
.tcl-row-end--negative-26 {
grid-row-end: -27;
}
.tcl-row-end--negative-27 {
grid-row-end: -28;
}
.tcl-row-end--negative-28 {
grid-row-end: -29;
}
.tcl-row-end--negative-29 {
grid-row-end: -30;
}
.tcl-row-end--negative-30 {
grid-row-end: -31;
}
.tcl-row-end--negative-31 {
grid-row-end: -32;
}
.tcl-row-end--negative-32 {
grid-row-end: -33;
}
.tcl-row-end--negative-33 {
grid-row-end: -34;
}
.tcl-row-end--negative-34 {
grid-row-end: -35;
}
.tcl-row-end--negative-35 {
grid-row-end: -36;
}
.tcl-row-end--negative-36 {
grid-row-end: -37;
}
.tcl-row-end--negative-37 {
grid-row-end: -38;
}
.tcl-row-end--negative-38 {
grid-row-end: -39;
}
.tcl-row-end--negative-39 {
grid-row-end: -40;
}
.tcl-row-end--negative-40 {
grid-row-end: -41;
}
.tcl-row-end--negative-41 {
grid-row-end: -42;
}
.tcl-row-end--negative-42 {
grid-row-end: -43;
}
.tcl-row-end--negative-43 {
grid-row-end: -44;
}
.tcl-row-end--negative-44 {
grid-row-end: -45;
}
.tcl-row-end--negative-45 {
grid-row-end: -46;
}
.tcl-row-end--negative-46 {
grid-row-end: -47;
}
.tcl-row-end--negative-47 {
grid-row-end: -48;
}
.tcl-row-end--negative-48 {
grid-row-end: -49;
}
[dir="ltr"] .tcl-padding-inline-start--0x {
padding-left: 0;
}
[dir="rtl"] .tcl-padding-inline-start--0x {
padding-right: 0;
}
.tcl-padding-inline-start--0x {
-webkit-padding-start: 0;
padding-inline-start: 0;
}
[dir="ltr"] .tcl-padding-inline-start--quarter {
padding-left: calc(var(--tds-size-base) / 2);
}
[dir="rtl"] .tcl-padding-inline-start--quarter {
padding-right: calc(var(--tds-size-base) / 2);
}
.tcl-padding-inline-start--quarter {
-webkit-padding-start: calc(var(--tds-size-base) / 2);
padding-inline-start: calc(var(--tds-size-base) / 2);
}
[dir="ltr"] .tcl-padding-inline-start--half {
padding-left: var(--tds-size-half);
}
[dir="rtl"] .tcl-padding-inline-start--half {
padding-right: var(--tds-size-half);
}
.tcl-padding-inline-start--half {
-webkit-padding-start: var(--tds-size-half);
padding-inline-start: var(--tds-size-half);
}
[dir="ltr"] .tcl-padding-inline-start--1x {
padding-left: var(--tds-size-base);
}
[dir="rtl"] .tcl-padding-inline-start--1x {
padding-right: var(--tds-size-base);
}
.tcl-padding-inline-start--1x {
-webkit-padding-start: var(--tds-size-base);
padding-inline-start: var(--tds-size-base);
}
[dir="ltr"] .tcl-padding-inline-start--three-quarters {
padding-left: calc(var(--tds-size-base) + var(--tds-size-half));
}
[dir="rtl"] .tcl-padding-inline-start--three-quarters {
padding-right: calc(var(--tds-size-base) + var(--tds-size-half));
}
.tcl-padding-inline-start--three-quarters {
-webkit-padding-start: calc(var(--tds-size-base) + var(--tds-size-half));
padding-inline-start: calc(var(--tds-size-base) + var(--tds-size-half));
}
[dir="ltr"] .tcl-padding-inline-start--2x {
padding-left: var(--tds-size-2x);
}
[dir="rtl"] .tcl-padding-inline-start--2x {
padding-right: var(--tds-size-2x);
}
.tcl-padding-inline-start--2x {
-webkit-padding-start: var(--tds-size-2x);
padding-inline-start: var(--tds-size-2x);
}
[dir="ltr"] .tcl-padding-inline-start--3x {
padding-left: var(--tds-size-3x);
}
[dir="rtl"] .tcl-padding-inline-start--3x {
padding-right: var(--tds-size-3x);
}
.tcl-padding-inline-start--3x {
-webkit-padding-start: var(--tds-size-3x);
padding-inline-start: var(--tds-size-3x);
}
[dir="ltr"] .tcl-padding-inline-start--4x {
padding-left: var(--tds-size-4x);
}
[dir="rtl"] .tcl-padding-inline-start--4x {
padding-right: var(--tds-size-4x);
}
.tcl-padding-inline-start--4x {
-webkit-padding-start: var(--tds-size-4x);
padding-inline-start: var(--tds-size-4x);
}
[dir="ltr"] .tcl-padding-inline-start--5x {
padding-left: var(--tds-size-5x);
}
[dir="rtl"] .tcl-padding-inline-start--5x {
padding-right: var(--tds-size-5x);
}
.tcl-padding-inline-start--5x {
-webkit-padding-start: var(--tds-size-5x);
padding-inline-start: var(--tds-size-5x);
}
[dir="ltr"] .tcl-padding-inline-start--6x {
padding-left: var(--tds-size-6x);
}
[dir="rtl"] .tcl-padding-inline-start--6x {
padding-right: var(--tds-size-6x);
}
.tcl-padding-inline-start--6x {
-webkit-padding-start: var(--tds-size-6x);
padding-inline-start: var(--tds-size-6x);
}
[dir="ltr"] .tcl-padding-inline-start--7x {
padding-left: var(--tds-size-7x);
}
[dir="rtl"] .tcl-padding-inline-start--7x {
padding-right: var(--tds-size-7x);
}
.tcl-padding-inline-start--7x {
-webkit-padding-start: var(--tds-size-7x);
padding-inline-start: var(--tds-size-7x);
}
[dir="ltr"] .tcl-padding-inline-start--8x {
padding-left: var(--tds-size-8x);
}
[dir="rtl"] .tcl-padding-inline-start--8x {
padding-right: var(--tds-size-8x);
}
.tcl-padding-inline-start--8x {
-webkit-padding-start: var(--tds-size-8x);
padding-inline-start: var(--tds-size-8x);
}
[dir="ltr"] .tcl-padding-inline-start--9x {
padding-left: var(--tds-size-9x);
}
[dir="rtl"] .tcl-padding-inline-start--9x {
padding-right: var(--tds-size-9x);
}
.tcl-padding-inline-start--9x {
-webkit-padding-start: var(--tds-size-9x);
padding-inline-start: var(--tds-size-9x);
}
[dir="ltr"] .tcl-padding-inline-start--10x {
padding-left: var(--tds-size-10x);
}
[dir="rtl"] .tcl-padding-inline-start--10x {
padding-right: var(--tds-size-10x);
}
.tcl-padding-inline-start--10x {
-webkit-padding-start: var(--tds-size-10x);
padding-inline-start: var(--tds-size-10x);
}
[dir="ltr"] .tcl-padding-inline-start--11x {
padding-left: var(--tds-size-11x);
}
[dir="rtl"] .tcl-padding-inline-start--11x {
padding-right: var(--tds-size-11x);
}
.tcl-padding-inline-start--11x {
-webkit-padding-start: var(--tds-size-11x);
padding-inline-start: var(--tds-size-11x);
}
[dir="ltr"] .tcl-padding-inline-start--12x {
padding-left: var(--tds-size-12x);
}
[dir="rtl"] .tcl-padding-inline-start--12x {
padding-right: var(--tds-size-12x);
}
.tcl-padding-inline-start--12x {
-webkit-padding-start: var(--tds-size-12x);
padding-inline-start: var(--tds-size-12x);
}
[dir="ltr"] .tcl-padding-inline-start--13x {
padding-left: var(--tds-size-13x);
}
[dir="rtl"] .tcl-padding-inline-start--13x {
padding-right: var(--tds-size-13x);
}
.tcl-padding-inline-start--13x {
-webkit-padding-start: var(--tds-size-13x);
padding-inline-start: var(--tds-size-13x);
}
[dir="ltr"] .tcl-padding-inline-start--14x {
padding-left: calc(var(--tds-size-base) * 14);
}
[dir="rtl"] .tcl-padding-inline-start--14x {
padding-right: calc(var(--tds-size-base) * 14);
}
.tcl-padding-inline-start--14x {
-webkit-padding-start: calc(var(--tds-size-base) * 14);
padding-inline-start: calc(var(--tds-size-base) * 14);
}
[dir="ltr"] .tcl-padding-inline-start--15x {
padding-left: calc(var(--tds-size-base) * 15);
}
[dir="rtl"] .tcl-padding-inline-start--15x {
padding-right: calc(var(--tds-size-base) * 15);
}
.tcl-padding-inline-start--15x {
-webkit-padding-start: calc(var(--tds-size-base) * 15);
padding-inline-start: calc(var(--tds-size-base) * 15);
}
[dir="ltr"] .tcl-padding-inline-start--16x {
padding-left: calc(var(--tds-size-base) * 16);
}
[dir="rtl"] .tcl-padding-inline-start--16x {
padding-right: calc(var(--tds-size-base) * 16);
}
.tcl-padding-inline-start--16x {
-webkit-padding-start: calc(var(--tds-size-base) * 16);
padding-inline-start: calc(var(--tds-size-base) * 16);
}
[dir="ltr"] .tcl-padding-inline-start--17x {
padding-left: calc(var(--tds-size-base) * 17);
}
[dir="rtl"] .tcl-padding-inline-start--17x {
padding-right: calc(var(--tds-size-base) * 17);
}
.tcl-padding-inline-start--17x {
-webkit-padding-start: calc(var(--tds-size-base) * 17);
padding-inline-start: calc(var(--tds-size-base) * 17);
}
[dir="ltr"] .tcl-padding-inline-start--18x {
padding-left: calc(var(--tds-size-base) * 18);
}
[dir="rtl"] .tcl-padding-inline-start--18x {
padding-right: calc(var(--tds-size-base) * 18);
}
.tcl-padding-inline-start--18x {
-webkit-padding-start: calc(var(--tds-size-base) * 18);
padding-inline-start: calc(var(--tds-size-base) * 18);
}
[dir="ltr"] .tcl-padding-inline-start--19x {
padding-left: calc(var(--tds-size-base) * 19);
}
[dir="rtl"] .tcl-padding-inline-start--19x {
padding-right: calc(var(--tds-size-base) * 19);
}
.tcl-padding-inline-start--19x {
-webkit-padding-start: calc(var(--tds-size-base) * 19);
padding-inline-start: calc(var(--tds-size-base) * 19);
}
[dir="ltr"] .tcl-padding-inline-start--20x {
padding-left: calc(var(--tds-size-base) * 20);
}
[dir="rtl"] .tcl-padding-inline-start--20x {
padding-right: calc(var(--tds-size-base) * 20);
}
.tcl-padding-inline-start--20x {
-webkit-padding-start: calc(var(--tds-size-base) * 20);
padding-inline-start: calc(var(--tds-size-base) * 20);
}
[dir="ltr"] .tcl-padding-inline-end--0x {
padding-right: 0;
}
[dir="rtl"] .tcl-padding-inline-end--0x {
padding-left: 0;
}
.tcl-padding-inline-end--0x {
-webkit-padding-end: 0;
padding-inline-end: 0;
}
[dir="ltr"] .tcl-padding-inline-end--quarter {
padding-right: calc(var(--tds-size-base) / 2);
}
[dir="rtl"] .tcl-padding-inline-end--quarter {
padding-left: calc(var(--tds-size-base) / 2);
}
.tcl-padding-inline-end--quarter {
-webkit-padding-end: calc(var(--tds-size-base) / 2);
padding-inline-end: calc(var(--tds-size-base) / 2);
}
[dir="ltr"] .tcl-padding-inline-end--half {
padding-right: var(--tds-size-half);
}
[dir="rtl"] .tcl-padding-inline-end--half {
padding-left: var(--tds-size-half);
}
.tcl-padding-inline-end--half {
-webkit-padding-end: var(--tds-size-half);
padding-inline-end: var(--tds-size-half);
}
[dir="ltr"] .tcl-padding-inline-end--1x {
padding-right: var(--tds-size-base);
}
[dir="rtl"] .tcl-padding-inline-end--1x {
padding-left: var(--tds-size-base);
}
.tcl-padding-inline-end--1x {
-webkit-padding-end: var(--tds-size-base);
padding-inline-end: var(--tds-size-base);
}
[dir="ltr"] .tcl-padding-inline-end--three-quarters {
padding-right: calc(var(--tds-size-base) + var(--tds-size-half));
}
[dir="rtl"] .tcl-padding-inline-end--three-quarters {
padding-left: calc(var(--tds-size-base) + var(--tds-size-half));
}
.tcl-padding-inline-end--three-quarters {
-webkit-padding-end: calc(var(--tds-size-base) + var(--tds-size-half));
padding-inline-end: calc(var(--tds-size-base) + var(--tds-size-half));
}
[dir="ltr"] .tcl-padding-inline-end--2x {
padding-right: var(--tds-size-2x);
}
[dir="rtl"] .tcl-padding-inline-end--2x {
padding-left: var(--tds-size-2x);
}
.tcl-padding-inline-end--2x {
-webkit-padding-end: var(--tds-size-2x);
padding-inline-end: var(--tds-size-2x);
}
[dir="ltr"] .tcl-padding-inline-end--3x {
padding-right: var(--tds-size-3x);
}
[dir="rtl"] .tcl-padding-inline-end--3x {
padding-left: var(--tds-size-3x);
}
.tcl-padding-inline-end--3x {
-webkit-padding-end: var(--tds-size-3x);
padding-inline-end: var(--tds-size-3x);
}
[dir="ltr"] .tcl-padding-inline-end--4x {
padding-right: var(--tds-size-4x);
}
[dir="rtl"] .tcl-padding-inline-end--4x {
padding-left: var(--tds-size-4x);
}
.tcl-padding-inline-end--4x {
-webkit-padding-end: var(--tds-size-4x);
padding-inline-end: var(--tds-size-4x);
}
[dir="ltr"] .tcl-padding-inline-end--5x {
padding-right: var(--tds-size-5x);
}
[dir="rtl"] .tcl-padding-inline-end--5x {
padding-left: var(--tds-size-5x);
}
.tcl-padding-inline-end--5x {
-webkit-padding-end: var(--tds-size-5x);
padding-inline-end: var(--tds-size-5x);
}
[dir="ltr"] .tcl-padding-inline-end--6x {
padding-right: var(--tds-size-6x);
}
[dir="rtl"] .tcl-padding-inline-end--6x {
padding-left: var(--tds-size-6x);
}
.tcl-padding-inline-end--6x {
-webkit-padding-end: var(--tds-size-6x);
padding-inline-end: var(--tds-size-6x);
}
[dir="ltr"] .tcl-padding-inline-end--7x {
padding-right: var(--tds-size-7x);
}
[dir="rtl"] .tcl-padding-inline-end--7x {
padding-left: var(--tds-size-7x);
}
.tcl-padding-inline-end--7x {
-webkit-padding-end: var(--tds-size-7x);
padding-inline-end: var(--tds-size-7x);
}
[dir="ltr"] .tcl-padding-inline-end--8x {
padding-right: var(--tds-size-8x);
}
[dir="rtl"] .tcl-padding-inline-end--8x {
padding-left: var(--tds-size-8x);
}
.tcl-padding-inline-end--8x {
-webkit-padding-end: var(--tds-size-8x);
padding-inline-end: var(--tds-size-8x);
}
[dir="ltr"] .tcl-padding-inline-end--9x {
padding-right: var(--tds-size-9x);
}
[dir="rtl"] .tcl-padding-inline-end--9x {
padding-left: var(--tds-size-9x);
}
.tcl-padding-inline-end--9x {
-webkit-padding-end: var(--tds-size-9x);
padding-inline-end: var(--tds-size-9x);
}
[dir="ltr"] .tcl-padding-inline-end--10x {
padding-right: var(--tds-size-10x);
}
[dir="rtl"] .tcl-padding-inline-end--10x {
padding-left: var(--tds-size-10x);
}
.tcl-padding-inline-end--10x {
-webkit-padding-end: var(--tds-size-10x);
padding-inline-end: var(--tds-size-10x);
}
[dir="ltr"] .tcl-padding-inline-end--11x {
padding-right: var(--tds-size-11x);
}
[dir="rtl"] .tcl-padding-inline-end--11x {
padding-left: var(--tds-size-11x);
}
.tcl-padding-inline-end--11x {
-webkit-padding-end: var(--tds-size-11x);
padding-inline-end: var(--tds-size-11x);
}
[dir="ltr"] .tcl-padding-inline-end--12x {
padding-right: var(--tds-size-12x);
}
[dir="rtl"] .tcl-padding-inline-end--12x {
padding-left: var(--tds-size-12x);
}
.tcl-padding-inline-end--12x {
-webkit-padding-end: var(--tds-size-12x);
padding-inline-end: var(--tds-size-12x);
}
[dir="ltr"] .tcl-padding-inline-end--13x {
padding-right: var(--tds-size-13x);
}
[dir="rtl"] .tcl-padding-inline-end--13x {
padding-left: var(--tds-size-13x);
}
.tcl-padding-inline-end--13x {
-webkit-padding-end: var(--tds-size-13x);
padding-inline-end: var(--tds-size-13x);
}
[dir="ltr"] .tcl-padding-inline-end--14x {
padding-right: calc(var(--tds-size-base) * 14);
}
[dir="rtl"] .tcl-padding-inline-end--14x {
padding-left: calc(var(--tds-size-base) * 14);
}
.tcl-padding-inline-end--14x {
-webkit-padding-end: calc(var(--tds-size-base) * 14);
padding-inline-end: calc(var(--tds-size-base) * 14);
}
[dir="ltr"] .tcl-padding-inline-end--15x {
padding-right: calc(var(--tds-size-base) * 15);
}
[dir="rtl"] .tcl-padding-inline-end--15x {
padding-left: calc(var(--tds-size-base) * 15);
}
.tcl-padding-inline-end--15x {
-webkit-padding-end: calc(var(--tds-size-base) * 15);
padding-inline-end: calc(var(--tds-size-base) * 15);
}
[dir="ltr"] .tcl-padding-inline-end--16x {
padding-right: calc(var(--tds-size-base) * 16);
}
[dir="rtl"] .tcl-padding-inline-end--16x {
padding-left: calc(var(--tds-size-base) * 16);
}
.tcl-padding-inline-end--16x {
-webkit-padding-end: calc(var(--tds-size-base) * 16);
padding-inline-end: calc(var(--tds-size-base) * 16);
}
[dir="ltr"] .tcl-padding-inline-end--17x {
padding-right: calc(var(--tds-size-base) * 17);
}
[dir="rtl"] .tcl-padding-inline-end--17x {
padding-left: calc(var(--tds-size-base) * 17);
}
.tcl-padding-inline-end--17x {
-webkit-padding-end: calc(var(--tds-size-base) * 17);
padding-inline-end: calc(var(--tds-size-base) * 17);
}
[dir="ltr"] .tcl-padding-inline-end--18x {
padding-right: calc(var(--tds-size-base) * 18);
}
[dir="rtl"] .tcl-padding-inline-end--18x {
padding-left: calc(var(--tds-size-base) * 18);
}
.tcl-padding-inline-end--18x {
-webkit-padding-end: calc(var(--tds-size-base) * 18);
padding-inline-end: calc(var(--tds-size-base) * 18);
}
[dir="ltr"] .tcl-padding-inline-end--19x {
padding-right: calc(var(--tds-size-base) * 19);
}
[dir="rtl"] .tcl-padding-inline-end--19x {
padding-left: calc(var(--tds-size-base) * 19);
}
.tcl-padding-inline-end--19x {
-webkit-padding-end: calc(var(--tds-size-base) * 19);
padding-inline-end: calc(var(--tds-size-base) * 19);
}
[dir="ltr"] .tcl-padding-inline-end--20x {
padding-right: calc(var(--tds-size-base) * 20);
}
[dir="rtl"] .tcl-padding-inline-end--20x {
padding-left: calc(var(--tds-size-base) * 20);
}
.tcl-padding-inline-end--20x {
-webkit-padding-end: calc(var(--tds-size-base) * 20);
padding-inline-end: calc(var(--tds-size-base) * 20);
}
.tcl-padding-block-start--0x {
padding-top: 0;
}
.tcl-padding-block-start--quarter {
padding-top: calc(var(--tds-size-base) / 2);
}
.tcl-padding-block-start--half {
padding-top: var(--tds-size-half);
}
.tcl-padding-block-start--1x {
padding-top: var(--tds-size-base);
}
.tcl-padding-block-start--three-quarters {
padding-top: calc(var(--tds-size-base) + var(--tds-size-half));
}
.tcl-padding-block-start--2x {
padding-top: var(--tds-size-2x);
}
.tcl-padding-block-start--3x {
padding-top: var(--tds-size-3x);
}
.tcl-padding-block-start--4x {
padding-top: var(--tds-size-4x);
}
.tcl-padding-block-start--5x {
padding-top: var(--tds-size-5x);
}
.tcl-padding-block-start--6x {
padding-top: var(--tds-size-6x);
}
.tcl-padding-block-start--7x {
padding-top: var(--tds-size-7x);
}
.tcl-padding-block-start--8x {
padding-top: var(--tds-size-8x);
}
.tcl-padding-block-start--9x {
padding-top: var(--tds-size-9x);
}
.tcl-padding-block-start--10x {
padding-top: var(--tds-size-10x);
}
.tcl-padding-block-start--11x {
padding-top: var(--tds-size-11x);
}
.tcl-padding-block-start--12x {
padding-top: var(--tds-size-12x);
}
.tcl-padding-block-start--13x {
padding-top: var(--tds-size-13x);
}
.tcl-padding-block-start--14x {
padding-top: calc(var(--tds-size-base) * 14);
}
.tcl-padding-block-start--15x {
padding-top: calc(var(--tds-size-base) * 15);
}
.tcl-padding-block-start--16x {
padding-top: calc(var(--tds-size-base) * 16);
}
.tcl-padding-block-start--17x {
padding-top: calc(var(--tds-size-base) * 17);
}
.tcl-padding-block-start--18x {
padding-top: calc(var(--tds-size-base) * 18);
}
.tcl-padding-block-start--19x {
padding-top: calc(var(--tds-size-base) * 19);
}
.tcl-padding-block-start--20x {
padding-top: calc(var(--tds-size-base) * 20);
}
.tcl-padding-block-end--0x {
padding-bottom: 0;
}
.tcl-padding-block-end--quarter {
padding-bottom: calc(var(--tds-size-base) / 2);
}
.tcl-padding-block-end--half {
padding-bottom: var(--tds-size-half);
}
.tcl-padding-block-end--1x {
padding-bottom: var(--tds-size-base);
}
.tcl-padding-block-end--three-quarters {
padding-bottom: calc(var(--tds-size-base) + var(--tds-size-half));
}
.tcl-padding-block-end--2x {
padding-bottom: var(--tds-size-2x);
}
.tcl-padding-block-end--3x {
padding-bottom: var(--tds-size-3x);
}
.tcl-padding-block-end--4x {
padding-bottom: var(--tds-size-4x);
}
.tcl-padding-block-end--5x {
padding-bottom: var(--tds-size-5x);
}
.tcl-padding-block-end--6x {
padding-bottom: var(--tds-size-6x);
}
.tcl-padding-block-end--7x {
padding-bottom: var(--tds-size-7x);
}
.tcl-padding-block-end--8x {
padding-bottom: var(--tds-size-8x);
}
.tcl-padding-block-end--9x {
padding-bottom: var(--tds-size-9x);
}
.tcl-padding-block-end--10x {
padding-bottom: var(--tds-size-10x);
}
.tcl-padding-block-end--11x {
padding-bottom: var(--tds-size-11x);
}
.tcl-padding-block-end--12x {
padding-bottom: var(--tds-size-12x);
}
.tcl-padding-block-end--13x {
padding-bottom: var(--tds-size-13x);
}
.tcl-padding-block-end--14x {
padding-bottom: calc(var(--tds-size-base) * 14);
}
.tcl-padding-block-end--15x {
padding-bottom: calc(var(--tds-size-base) * 15);
}
.tcl-padding-block-end--16x {
padding-bottom: calc(var(--tds-size-base) * 16);
}
.tcl-padding-block-end--17x {
padding-bottom: calc(var(--tds-size-base) * 17);
}
.tcl-padding-block-end--18x {
padding-bottom: calc(var(--tds-size-base) * 18);
}
.tcl-padding-block-end--19x {
padding-bottom: calc(var(--tds-size-base) * 19);
}
.tcl-padding-block-end--20x {
padding-bottom: calc(var(--tds-size-base) * 20);
}
[dir="ltr"] .tcl-margin-inline-start--0x {
margin-left: 0;
}
[dir="rtl"] .tcl-margin-inline-start--0x {
margin-right: 0;
}
.tcl-margin-inline-start--0x {
-webkit-margin-start: 0;
margin-inline-start: 0;
}
[dir="ltr"] .tcl-margin-inline-start--quarter {
margin-left: calc(var(--tds-size-base) / 2);
}
[dir="rtl"] .tcl-margin-inline-start--quarter {
margin-right: calc(var(--tds-size-base) / 2);
}
.tcl-margin-inline-start--quarter {
-webkit-margin-start: calc(var(--tds-size-base) / 2);
margin-inline-start: calc(var(--tds-size-base) / 2);
}
[dir="ltr"] .tcl-margin-inline-start--half {
margin-left: var(--tds-size-half);
}
[dir="rtl"] .tcl-margin-inline-start--half {
margin-right: var(--tds-size-half);
}
.tcl-margin-inline-start--half {
-webkit-margin-start: var(--tds-size-half);
margin-inline-start: var(--tds-size-half);
}
[dir="ltr"] .tcl-margin-inline-start--1x {
margin-left: var(--tds-size-base);
}
[dir="rtl"] .tcl-margin-inline-start--1x {
margin-right: var(--tds-size-base);
}
.tcl-margin-inline-start--1x {
-webkit-margin-start: var(--tds-size-base);
margin-inline-start: var(--tds-size-base);
}
[dir="ltr"] .tcl-margin-inline-start--three-quarters {
margin-left: calc(var(--tds-size-base) + var(--tds-size-half));
}
[dir="rtl"] .tcl-margin-inline-start--three-quarters {
margin-right: calc(var(--tds-size-base) + var(--tds-size-half));
}
.tcl-margin-inline-start--three-quarters {
-webkit-margin-start: calc(var(--tds-size-base) + var(--tds-size-half));
margin-inline-start: calc(var(--tds-size-base) + var(--tds-size-half));
}
[dir="ltr"] .tcl-margin-inline-start--2x {
margin-left: var(--tds-size-2x);
}
[dir="rtl"] .tcl-margin-inline-start--2x {
margin-right: var(--tds-size-2x);
}
.tcl-margin-inline-start--2x {
-webkit-margin-start: var(--tds-size-2x);
margin-inline-start: var(--tds-size-2x);
}
[dir="ltr"] .tcl-margin-inline-start--3x {
margin-left: var(--tds-size-3x);
}
[dir="rtl"] .tcl-margin-inline-start--3x {
margin-right: var(--tds-size-3x);
}
.tcl-margin-inline-start--3x {
-webkit-margin-start: var(--tds-size-3x);
margin-inline-start: var(--tds-size-3x);
}
[dir="ltr"] .tcl-margin-inline-start--4x {
margin-left: var(--tds-size-4x);
}
[dir="rtl"] .tcl-margin-inline-start--4x {
margin-right: var(--tds-size-4x);
}
.tcl-margin-inline-start--4x {
-webkit-margin-start: var(--tds-size-4x);
margin-inline-start: var(--tds-size-4x);
}
[dir="ltr"] .tcl-margin-inline-start--5x {
margin-left: var(--tds-size-5x);
}
[dir="rtl"] .tcl-margin-inline-start--5x {
margin-right: var(--tds-size-5x);
}
.tcl-margin-inline-start--5x {
-webkit-margin-start: var(--tds-size-5x);
margin-inline-start: var(--tds-size-5x);
}
[dir="ltr"] .tcl-margin-inline-start--6x {
margin-left: var(--tds-size-6x);
}
[dir="rtl"] .tcl-margin-inline-start--6x {
margin-right: var(--tds-size-6x);
}
.tcl-margin-inline-start--6x {
-webkit-margin-start: var(--tds-size-6x);
margin-inline-start: var(--tds-size-6x);
}
[dir="ltr"] .tcl-margin-inline-start--7x {
margin-left: var(--tds-size-7x);
}
[dir="rtl"] .tcl-margin-inline-start--7x {
margin-right: var(--tds-size-7x);
}
.tcl-margin-inline-start--7x {
-webkit-margin-start: var(--tds-size-7x);
margin-inline-start: var(--tds-size-7x);
}
[dir="ltr"] .tcl-margin-inline-start--8x {
margin-left: var(--tds-size-8x);
}
[dir="rtl"] .tcl-margin-inline-start--8x {
margin-right: var(--tds-size-8x);
}
.tcl-margin-inline-start--8x {
-webkit-margin-start: var(--tds-size-8x);
margin-inline-start: var(--tds-size-8x);
}
[dir="ltr"] .tcl-margin-inline-start--9x {
margin-left: var(--tds-size-9x);
}
[dir="rtl"] .tcl-margin-inline-start--9x {
margin-right: var(--tds-size-9x);
}
.tcl-margin-inline-start--9x {
-webkit-margin-start: var(--tds-size-9x);
margin-inline-start: var(--tds-size-9x);
}
[dir="ltr"] .tcl-margin-inline-start--10x {
margin-left: var(--tds-size-10x);
}
[dir="rtl"] .tcl-margin-inline-start--10x {
margin-right: var(--tds-size-10x);
}
.tcl-margin-inline-start--10x {
-webkit-margin-start: var(--tds-size-10x);
margin-inline-start: var(--tds-size-10x);
}
[dir="ltr"] .tcl-margin-inline-start--11x {
margin-left: var(--tds-size-11x);
}
[dir="rtl"] .tcl-margin-inline-start--11x {
margin-right: var(--tds-size-11x);
}
.tcl-margin-inline-start--11x {
-webkit-margin-start: var(--tds-size-11x);
margin-inline-start: var(--tds-size-11x);
}
[dir="ltr"] .tcl-margin-inline-start--12x {
margin-left: var(--tds-size-12x);
}
[dir="rtl"] .tcl-margin-inline-start--12x {
margin-right: var(--tds-size-12x);
}
.tcl-margin-inline-start--12x {
-webkit-margin-start: var(--tds-size-12x);
margin-inline-start: var(--tds-size-12x);
}
[dir="ltr"] .tcl-margin-inline-start--13x {
margin-left: var(--tds-size-13x);
}
[dir="rtl"] .tcl-margin-inline-start--13x {
margin-right: var(--tds-size-13x);
}
.tcl-margin-inline-start--13x {
-webkit-margin-start: var(--tds-size-13x);
margin-inline-start: var(--tds-size-13x);
}
[dir="ltr"] .tcl-margin-inline-start--14x {
margin-left: calc(var(--tds-size-base) * 14);
}
[dir="rtl"] .tcl-margin-inline-start--14x {
margin-right: calc(var(--tds-size-base) * 14);
}
.tcl-margin-inline-start--14x {
-webkit-margin-start: calc(var(--tds-size-base) * 14);
margin-inline-start: calc(var(--tds-size-base) * 14);
}
[dir="ltr"] .tcl-margin-inline-start--15x {
margin-left: calc(var(--tds-size-base) * 15);
}
[dir="rtl"] .tcl-margin-inline-start--15x {
margin-right: calc(var(--tds-size-base) * 15);
}
.tcl-margin-inline-start--15x {
-webkit-margin-start: calc(var(--tds-size-base) * 15);
margin-inline-start: calc(var(--tds-size-base) * 15);
}
[dir="ltr"] .tcl-margin-inline-start--16x {
margin-left: calc(var(--tds-size-base) * 16);
}
[dir="rtl"] .tcl-margin-inline-start--16x {
margin-right: calc(var(--tds-size-base) * 16);
}
.tcl-margin-inline-start--16x {
-webkit-margin-start: calc(var(--tds-size-base) * 16);
margin-inline-start: calc(var(--tds-size-base) * 16);
}
[dir="ltr"] .tcl-margin-inline-start--17x {
margin-left: calc(var(--tds-size-base) * 17);
}
[dir="rtl"] .tcl-margin-inline-start--17x {
margin-right: calc(var(--tds-size-base) * 17);
}
.tcl-margin-inline-start--17x {
-webkit-margin-start: calc(var(--tds-size-base) * 17);
margin-inline-start: calc(var(--tds-size-base) * 17);
}
[dir="ltr"] .tcl-margin-inline-start--18x {
margin-left: calc(var(--tds-size-base) * 18);
}
[dir="rtl"] .tcl-margin-inline-start--18x {
margin-right: calc(var(--tds-size-base) * 18);
}
.tcl-margin-inline-start--18x {
-webkit-margin-start: calc(var(--tds-size-base) * 18);
margin-inline-start: calc(var(--tds-size-base) * 18);
}
[dir="ltr"] .tcl-margin-inline-start--19x {
margin-left: calc(var(--tds-size-base) * 19);
}
[dir="rtl"] .tcl-margin-inline-start--19x {
margin-right: calc(var(--tds-size-base) * 19);
}
.tcl-margin-inline-start--19x {
-webkit-margin-start: calc(var(--tds-size-base) * 19);
margin-inline-start: calc(var(--tds-size-base) * 19);
}
[dir="ltr"] .tcl-margin-inline-start--20x {
margin-left: calc(var(--tds-size-base) * 20);
}
[dir="rtl"] .tcl-margin-inline-start--20x {
margin-right: calc(var(--tds-size-base) * 20);
}
.tcl-margin-inline-start--20x {
-webkit-margin-start: calc(var(--tds-size-base) * 20);
margin-inline-start: calc(var(--tds-size-base) * 20);
}
[dir="ltr"] .tcl-margin-inline-end--0x {
margin-right: 0;
}
[dir="rtl"] .tcl-margin-inline-end--0x {
margin-left: 0;
}
.tcl-margin-inline-end--0x {
-webkit-margin-end: 0;
margin-inline-end: 0;
}
[dir="ltr"] .tcl-margin-inline-end--quarter {
margin-right: calc(var(--tds-size-base) / 2);
}
[dir="rtl"] .tcl-margin-inline-end--quarter {
margin-left: calc(var(--tds-size-base) / 2);
}
.tcl-margin-inline-end--quarter {
-webkit-margin-end: calc(var(--tds-size-base) / 2);
margin-inline-end: calc(var(--tds-size-base) / 2);
}
[dir="ltr"] .tcl-margin-inline-end--half {
margin-right: var(--tds-size-half);
}
[dir="rtl"] .tcl-margin-inline-end--half {
margin-left: var(--tds-size-half);
}
.tcl-margin-inline-end--half {
-webkit-margin-end: var(--tds-size-half);
margin-inline-end: var(--tds-size-half);
}
[dir="ltr"] .tcl-margin-inline-end--1x {
margin-right: var(--tds-size-base);
}
[dir="rtl"] .tcl-margin-inline-end--1x {
margin-left: var(--tds-size-base);
}
.tcl-margin-inline-end--1x {
-webkit-margin-end: var(--tds-size-base);
margin-inline-end: var(--tds-size-base);
}
[dir="ltr"] .tcl-margin-inline-end--three-quarters {
margin-right: calc(var(--tds-size-base) + var(--tds-size-half));
}
[dir="rtl"] .tcl-margin-inline-end--three-quarters {
margin-left: calc(var(--tds-size-base) + var(--tds-size-half));
}
.tcl-margin-inline-end--three-quarters {
-webkit-margin-end: calc(var(--tds-size-base) + var(--tds-size-half));
margin-inline-end: calc(var(--tds-size-base) + var(--tds-size-half));
}
[dir="ltr"] .tcl-margin-inline-end--2x {
margin-right: var(--tds-size-2x);
}
[dir="rtl"] .tcl-margin-inline-end--2x {
margin-left: var(--tds-size-2x);
}
.tcl-margin-inline-end--2x {
-webkit-margin-end: var(--tds-size-2x);
margin-inline-end: var(--tds-size-2x);
}
[dir="ltr"] .tcl-margin-inline-end--3x {
margin-right: var(--tds-size-3x);
}
[dir="rtl"] .tcl-margin-inline-end--3x {
margin-left: var(--tds-size-3x);
}
.tcl-margin-inline-end--3x {
-webkit-margin-end: var(--tds-size-3x);
margin-inline-end: var(--tds-size-3x);
}
[dir="ltr"] .tcl-margin-inline-end--4x {
margin-right: var(--tds-size-4x);
}
[dir="rtl"] .tcl-margin-inline-end--4x {
margin-left: var(--tds-size-4x);
}
.tcl-margin-inline-end--4x {
-webkit-margin-end: var(--tds-size-4x);
margin-inline-end: var(--tds-size-4x);
}
[dir="ltr"] .tcl-margin-inline-end--5x {
margin-right: var(--tds-size-5x);
}
[dir="rtl"] .tcl-margin-inline-end--5x {
margin-left: var(--tds-size-5x);
}
.tcl-margin-inline-end--5x {
-webkit-margin-end: var(--tds-size-5x);
margin-inline-end: var(--tds-size-5x);
}
[dir="ltr"] .tcl-margin-inline-end--6x {
margin-right: var(--tds-size-6x);
}
[dir="rtl"] .tcl-margin-inline-end--6x {
margin-left: var(--tds-size-6x);
}
.tcl-margin-inline-end--6x {
-webkit-margin-end: var(--tds-size-6x);
margin-inline-end: var(--tds-size-6x);
}
[dir="ltr"] .tcl-margin-inline-end--7x {
margin-right: var(--tds-size-7x);
}
[dir="rtl"] .tcl-margin-inline-end--7x {
margin-left: var(--tds-size-7x);
}
.tcl-margin-inline-end--7x {
-webkit-margin-end: var(--tds-size-7x);
margin-inline-end: var(--tds-size-7x);
}
[dir="ltr"] .tcl-margin-inline-end--8x {
margin-right: var(--tds-size-8x);
}
[dir="rtl"] .tcl-margin-inline-end--8x {
margin-left: var(--tds-size-8x);
}
.tcl-margin-inline-end--8x {
-webkit-margin-end: var(--tds-size-8x);
margin-inline-end: var(--tds-size-8x);
}
[dir="ltr"] .tcl-margin-inline-end--9x {
margin-right: var(--tds-size-9x);
}
[dir="rtl"] .tcl-margin-inline-end--9x {
margin-left: var(--tds-size-9x);
}
.tcl-margin-inline-end--9x {
-webkit-margin-end: var(--tds-size-9x);
margin-inline-end: var(--tds-size-9x);
}
[dir="ltr"] .tcl-margin-inline-end--10x {
margin-right: var(--tds-size-10x);
}
[dir="rtl"] .tcl-margin-inline-end--10x {
margin-left: var(--tds-size-10x);
}
.tcl-margin-inline-end--10x {
-webkit-margin-end: var(--tds-size-10x);
margin-inline-end: var(--tds-size-10x);
}
[dir="ltr"] .tcl-margin-inline-end--11x {
margin-right: var(--tds-size-11x);
}
[dir="rtl"] .tcl-margin-inline-end--11x {
margin-left: var(--tds-size-11x);
}
.tcl-margin-inline-end--11x {
-webkit-margin-end: var(--tds-size-11x);
margin-inline-end: var(--tds-size-11x);
}
[dir="ltr"] .tcl-margin-inline-end--12x {
margin-right: var(--tds-size-12x);
}
[dir="rtl"] .tcl-margin-inline-end--12x {
margin-left: var(--tds-size-12x);
}
.tcl-margin-inline-end--12x {
-webkit-margin-end: var(--tds-size-12x);
margin-inline-end: var(--tds-size-12x);
}
[dir="ltr"] .tcl-margin-inline-end--13x {
margin-right: var(--tds-size-13x);
}
[dir="rtl"] .tcl-margin-inline-end--13x {
margin-left: var(--tds-size-13x);
}
.tcl-margin-inline-end--13x {
-webkit-margin-end: var(--tds-size-13x);
margin-inline-end: var(--tds-size-13x);
}
[dir="ltr"] .tcl-margin-inline-end--14x {
margin-right: calc(var(--tds-size-base) * 14);
}
[dir="rtl"] .tcl-margin-inline-end--14x {
margin-left: calc(var(--tds-size-base) * 14);
}
.tcl-margin-inline-end--14x {
-webkit-margin-end: calc(var(--tds-size-base) * 14);
margin-inline-end: calc(var(--tds-size-base) * 14);
}
[dir="ltr"] .tcl-margin-inline-end--15x {
margin-right: calc(var(--tds-size-base) * 15);
}
[dir="rtl"] .tcl-margin-inline-end--15x {
margin-left: calc(var(--tds-size-base) * 15);
}
.tcl-margin-inline-end--15x {
-webkit-margin-end: calc(var(--tds-size-base) * 15);
margin-inline-end: calc(var(--tds-size-base) * 15);
}
[dir="ltr"] .tcl-margin-inline-end--16x {
margin-right: calc(var(--tds-size-base) * 16);
}
[dir="rtl"] .tcl-margin-inline-end--16x {
margin-left: calc(var(--tds-size-base) * 16);
}
.tcl-margin-inline-end--16x {
-webkit-margin-end: calc(var(--tds-size-base) * 16);
margin-inline-end: calc(var(--tds-size-base) * 16);
}
[dir="ltr"] .tcl-margin-inline-end--17x {
margin-right: calc(var(--tds-size-base) * 17);
}
[dir="rtl"] .tcl-margin-inline-end--17x {
margin-left: calc(var(--tds-size-base) * 17);
}
.tcl-margin-inline-end--17x {
-webkit-margin-end: calc(var(--tds-size-base) * 17);
margin-inline-end: calc(var(--tds-size-base) * 17);
}
[dir="ltr"] .tcl-margin-inline-end--18x {
margin-right: calc(var(--tds-size-base) * 18);
}
[dir="rtl"] .tcl-margin-inline-end--18x {
margin-left: calc(var(--tds-size-base) * 18);
}
.tcl-margin-inline-end--18x {
-webkit-margin-end: calc(var(--tds-size-base) * 18);
margin-inline-end: calc(var(--tds-size-base) * 18);
}
[dir="ltr"] .tcl-margin-inline-end--19x {
margin-right: calc(var(--tds-size-base) * 19);
}
[dir="rtl"] .tcl-margin-inline-end--19x {
margin-left: calc(var(--tds-size-base) * 19);
}
.tcl-margin-inline-end--19x {
-webkit-margin-end: calc(var(--tds-size-base) * 19);
margin-inline-end: calc(var(--tds-size-base) * 19);
}
[dir="ltr"] .tcl-margin-inline-end--20x {
margin-right: calc(var(--tds-size-base) * 20);
}
[dir="rtl"] .tcl-margin-inline-end--20x {
margin-left: calc(var(--tds-size-base) * 20);
}
.tcl-margin-inline-end--20x {
-webkit-margin-end: calc(var(--tds-size-base) * 20);
margin-inline-end: calc(var(--tds-size-base) * 20);
}
.tcl-margin-block-start--0x {
margin-top: 0;
}
.tcl-margin-block-start--quarter {
margin-top: calc(var(--tds-size-base) / 2);
}
.tcl-margin-block-start--half {
margin-top: var(--tds-size-half);
}
.tcl-margin-block-start--1x {
margin-top: var(--tds-size-base);
}
.tcl-margin-block-start--three-quarters {
margin-top: calc(var(--tds-size-base) + var(--tds-size-half));
}
.tcl-margin-block-start--2x {
margin-top: var(--tds-size-2x);
}
.tcl-margin-block-start--3x {
margin-top: var(--tds-size-3x);
}
.tcl-margin-block-start--4x {
margin-top: var(--tds-size-4x);
}
.tcl-margin-block-start--5x {
margin-top: var(--tds-size-5x);
}
.tcl-margin-block-start--6x {
margin-top: var(--tds-size-6x);
}
.tcl-margin-block-start--7x {
margin-top: var(--tds-size-7x);
}
.tcl-margin-block-start--8x {
margin-top: var(--tds-size-8x);
}
.tcl-margin-block-start--9x {
margin-top: var(--tds-size-9x);
}
.tcl-margin-block-start--10x {
margin-top: var(--tds-size-10x);
}
.tcl-margin-block-start--11x {
margin-top: var(--tds-size-11x);
}
.tcl-margin-block-start--12x {
margin-top: var(--tds-size-12x);
}
.tcl-margin-block-start--13x {
margin-top: var(--tds-size-13x);
}
.tcl-margin-block-start--14x {
margin-top: calc(var(--tds-size-base) * 14);
}
.tcl-margin-block-start--15x {
margin-top: calc(var(--tds-size-base) * 15);
}
.tcl-margin-block-start--16x {
margin-top: calc(var(--tds-size-base) * 16);
}
.tcl-margin-block-start--17x {
margin-top: calc(var(--tds-size-base) * 17);
}
.tcl-margin-block-start--18x {
margin-top: calc(var(--tds-size-base) * 18);
}
.tcl-margin-block-start--19x {
margin-top: calc(var(--tds-size-base) * 19);
}
.tcl-margin-block-start--20x {
margin-top: calc(var(--tds-size-base) * 20);
}
.tcl-margin-block-end--0x {
margin-bottom: 0;
}
.tcl-margin-block-end--quarter {
margin-bottom: calc(var(--tds-size-base) / 2);
}
.tcl-margin-block-end--half {
margin-bottom: var(--tds-size-half);
}
.tcl-margin-block-end--1x {
margin-bottom: var(--tds-size-base);
}
.tcl-margin-block-end--three-quarters {
margin-bottom: calc(var(--tds-size-base) + var(--tds-size-half));
}
.tcl-margin-block-end--2x {
margin-bottom: var(--tds-size-2x);
}
.tcl-margin-block-end--3x {
margin-bottom: var(--tds-size-3x);
}
.tcl-margin-block-end--4x {
margin-bottom: var(--tds-size-4x);
}
.tcl-margin-block-end--5x {
margin-bottom: var(--tds-size-5x);
}
.tcl-margin-block-end--6x {
margin-bottom: var(--tds-size-6x);
}
.tcl-margin-block-end--7x {
margin-bottom: var(--tds-size-7x);
}
.tcl-margin-block-end--8x {
margin-bottom: var(--tds-size-8x);
}
.tcl-margin-block-end--9x {
margin-bottom: var(--tds-size-9x);
}
.tcl-margin-block-end--10x {
margin-bottom: var(--tds-size-10x);
}
.tcl-margin-block-end--11x {
margin-bottom: var(--tds-size-11x);
}
.tcl-margin-block-end--12x {
margin-bottom: var(--tds-size-12x);
}
.tcl-margin-block-end--13x {
margin-bottom: var(--tds-size-13x);
}
.tcl-margin-block-end--14x {
margin-bottom: calc(var(--tds-size-base) * 14);
}
.tcl-margin-block-end--15x {
margin-bottom: calc(var(--tds-size-base) * 15);
}
.tcl-margin-block-end--16x {
margin-bottom: calc(var(--tds-size-base) * 16);
}
.tcl-margin-block-end--17x {
margin-bottom: calc(var(--tds-size-base) * 17);
}
.tcl-margin-block-end--18x {
margin-bottom: calc(var(--tds-size-base) * 18);
}
.tcl-margin-block-end--19x {
margin-bottom: calc(var(--tds-size-base) * 19);
}
.tcl-margin-block-end--20x {
margin-bottom: calc(var(--tds-size-base) * 20);
}
:root {
--tcl-media--width: 100%;
--tcl-media--height: 100%;
--tcl-media--max-width: 100%;
--tcl-media--max-height: 100%;
--tcl-media--aspect-ratio: unset;
--tcl-react-media--start-gradient-size: 20%;
--tcl-react-media--end-gradient-size: 20%;
--tcl-react-media--start-gradient-color: var(--tds-color-white);
--tcl-react-media--end-gradient-color: var(--tds-color-white);
--tcl-react-media--border-radius: 0;
--tcl-react-media--border-top-left-radius: unset;
--tcl-react-media--border-top-right-radius: unset;
--tcl-react-media--border-bottom-left-radius: unset;
--tcl-react-media--border-bottom-right-radius: unset;
--tcl-media__video-control--inset-block-start: unset;
--tcl-media__video-control--inset-block-end: unset;
--tcl-media__video-control--inset-inline-start: unset;
--tcl-media__video-control--inset-inline-end: unset;
--tcl-media__video-control--inset-size: var(--tds-size-4x);
}
@media (max-width: 599px) {
:root {
--tcl-media__video-control--inset-size: var(--tds-size-3x);
}
}
.tcl-react-media {
aspect-ratio: unset;
aspect-ratio: var(--tcl-media--aspect-ratio);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%;
height: var(--tcl-media--height);
max-height: 100%;
max-height: var(--tcl-media--max-height);
max-width: 100%;
max-width: var(--tcl-media--max-width);
opacity: 1;
position: relative;
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
width: 100%;
width: var(--tcl-media--width);
}
.tcl-react-media__asset {
border-bottom-left-radius: unset;
border-bottom-left-radius: var(
--tcl-react-media--border-bottom-left-radius,
var(--tcl-react-media--border-radius, 0)
);
border-bottom-right-radius: unset;
border-bottom-right-radius: var(
--tcl-react-media--border-bottom-right-radius,
var(--tcl-react-media--border-radius, 0)
);
border-top-left-radius: unset;
border-top-left-radius: var(
--tcl-react-media--border-top-left-radius,
var(--tcl-react-media--border-radius, 0)
);
border-top-right-radius: unset;
border-top-right-radius: var(
--tcl-react-media--border-top-right-radius,
var(--tcl-react-media--border-radius, 0)
);
height: 100%;
-o-object-fit: cover;
font-family: "object-fit:cover";
object-fit: cover;
width: 100%;
}
.tcl-react-media.tcl-react-media-slide-in-animation {
opacity: 0;
-webkit-transform: translateY(16px);
transform: translateY(16px);
-webkit-transform: translateY(var(--tds-size--2x));
transform: translateY(var(--tds-size--2x));
}
.tcl-react-media.tcl-react-media--start-gradient-short {
--tcl-react-media--start-gradient-size: 10%;
}
.tcl-react-media.tcl-react-media--start-gradient-standard {
--tcl-react-media--start-gradient-size: 20%;
}
.tcl-react-media.tcl-react-media--start-gradient-tall {
--tcl-react-media--start-gradient-size: 30%;
}
.tcl-react-media.tcl-react-media--start-gradient-huge {
--tcl-react-media--start-gradient-size: 60%;
}
.tcl-react-media.tcl-react-media--end-gradient-short {
--tcl-react-media--end-gradient-size: 10%;
}
.tcl-react-media.tcl-react-media--end-gradient-standard {
--tcl-react-media--end-gradient-size: 20%;
}
.tcl-react-media.tcl-react-media--end-gradient-tall {
--tcl-react-media--end-gradient-size: 30%;
}
.tcl-react-media.tcl-react-media--end-gradient-huge {
--tcl-react-media--end-gradient-size: 60%;
}
.tcl-react-media.tcl-react-media--start-gradient-white {
--tcl-react-media--start-gradient-color: var(--tds-color-white);
}
.tcl-react-media.tcl-react-media--start-gradient-black {
--tcl-react-media--start-gradient-color: var(--tds-color-black);
}
.tcl-react-media.tcl-react-media--end-gradient-white {
--tcl-react-media--end-gradient-color: var(--tds-color-white);
}
.tcl-react-media.tcl-react-media--end-gradient-black {
--tcl-react-media--end-gradient-color: var(--tds-color-black);
}
[dir="ltr"] .tcl-react-media.tcl-react-media--end-gradient:after,
[dir="ltr"] .tcl-react-media.tcl-react-media--start-gradient:before {
left: 0;
}
[dir="rtl"] .tcl-react-media.tcl-react-media--end-gradient:after,
[dir="rtl"] .tcl-react-media.tcl-react-media--start-gradient:before {
right: 0;
}
.tcl-react-media.tcl-react-media--end-gradient:after,
.tcl-react-media.tcl-react-media--start-gradient:before {
background: -webkit-gradient(
linear,
left bottom,
left top,
from(transparent),
to(var(--tds-color-white))
);
background: linear-gradient(0deg, transparent, var(--tds-color-white));
background: -webkit-gradient(
linear,
left bottom,
left top,
from(transparent),
to(var(--tcl-react-media--start-gradient-color))
);
background: linear-gradient(
0deg,
transparent,
var(--tcl-react-media--start-gradient-color)
);
height: 20%;
height: var(--tcl-react-media--start-gradient-size);
content: "";
width: 100%;
inset-inline-start: 0;
opacity: 1;
opacity: var(--tcl-react-media--start-gradient-opacity, 1);
position: absolute;
}
.tcl-react-media.tcl-react-media--end-gradient:after {
background: -webkit-gradient(
linear,
left top,
left bottom,
from(transparent),
to(var(--tds-color-white))
);
background: linear-gradient(180deg, transparent, var(--tds-color-white));
background: -webkit-gradient(
linear,
left top,
left bottom,
from(transparent),
to(var(--tcl-react-media--end-gradient-color))
);
background: linear-gradient(
180deg,
transparent,
var(--tcl-react-media--end-gradient-color)
);
height: 20%;
height: var(--tcl-react-media--end-gradient-size);
bottom: 0;
opacity: 1;
opacity: var(--tcl-react-media--end-gradient-opacity, 1);
}
.tcl-media--rounded-corners {
--tcl-react-media--border-radius: var(--tcl-border-radius);
}
.tcl-media--rounded-corners-top-left {
--tcl-react-media--border-top-left-radius: var(--tcl-border-radius);
}
.tcl-media--rounded-corners-top-right {
--tcl-react-media--border-top-right-radius: var(--tcl-border-radius);
}
.tcl-media--rounded-corners-bottom-left {
--tcl-react-media--border-bottom-left-radius: var(--tcl-border-radius);
}
.tcl-media--rounded-corners-bottom-right {
--tcl-react-media--border-bottom-right-radius: var(--tcl-border-radius);
}
.tds-video-player {
position: relative;
}
[dir="ltr"] .tcl-video__controls {
right: unset;
}
[dir="rtl"] .tcl-video__controls {
left: unset;
}
[dir="ltr"] .tcl-video__controls {
right: var(--tcl-media__video-control--inset-inline-end);
}
[dir="rtl"] .tcl-video__controls {
left: var(--tcl-media__video-control--inset-inline-end);
}
[dir="ltr"] .tcl-video__controls {
left: unset;
}
[dir="rtl"] .tcl-video__controls {
right: unset;
}
[dir="ltr"] .tcl-video__controls {
left: var(--tcl-media__video-control--inset-inline-start);
}
[dir="rtl"] .tcl-video__controls {
right: var(--tcl-media__video-control--inset-inline-start);
}
.tcl-video__controls {
--tds-icon--size: var(--tds-size-3x);
--tds-icon-btn--background: hsla(0, 0%, 50%, 0.65);
bottom: unset;
bottom: var(--tcl-media__video-control--inset-block-end);
top: unset;
top: var(--tcl-media__video-control--inset-block-start);
inset-inline-end: unset;
inset-inline-end: var(--tcl-media__video-control--inset-inline-end);
inset-inline-start: unset;
inset-inline-start: var(--tcl-media__video-control--inset-inline-start);
position: absolute;
z-index: 3;
}
.tcl-video__controls .tds-icon {
color: var(--tds-color-white);
}
.tcl-video__controls.tds-icon-btn:focus {
-webkit-box-shadow: unset;
box-shadow: unset;
}
[dir="ltr"] .tds-video-player__overlay {
left: 0;
}
[dir="rtl"] .tds-video-player__overlay {
right: 0;
}
.tds-video-player__overlay {
height: 100%;
top: 0;
inset-inline-start: 0;
position: absolute;
width: 100%;
z-index: 1;
}
button.tcl-video__controls:focus-visible {
border: var(--tds-border-width--hairline) solid var(--tds-color-white);
}
.tcl-react-media .tds-tooltip-wrapper--inline {
height: -moz-fit-content;
height: -webkit-fit-content;
height: fit-content;
position: unset;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
}
.tcl-video__controls {
--tcl-media__video-control--inset-block-end: var(
--tcl-media__video-control--inset-size
);
--tcl-media__video-control--inset-inline-start: var(
--tcl-media__video-control--inset-size
);
}
.tcl-video__controls,
.tds-theme--replicant-v2 .tcl-video__controls {
--tcl-media__video-control--inset-block-start: unset;
--tcl-media__video-control--inset-inline-end: unset;
}
.tds-theme--replicant-v2 .tcl-video__controls {
--tcl-media__video-control--inset-block-end: var(--tds-size-2x);
--tcl-media__video-control--inset-inline-start: var(--tds-size-2x);
--clip-size: var(--tds-size-1x);
--tds-icon--size: var(--tds-size-2x);
backdrop-filter: blur(4px);
backdrop-filter: blur(var(--tds-blur--small));
background-color: var(--tds-color-ct-bg);
height: var(--tds-size-4x);
opacity: 0.8;
width: var(--tds-size-4x);
z-index: 1;
}
.tds-theme--replicant-v2 button.tcl-video__controls:focus-visible {
border: var(--tds-border-width--hairline) solid var(--tds-color-white);
}
@media (max-width: 1200px) and (min-width: 600px) {
.tcl-video__controls {
--tcl-media__video-control--inset-block-start: var(
--tcl-media__video-control--inset-size
);
--tcl-media__video-control--inset-inline-end: var(
--tcl-media__video-control--inset-size
);
}
.tcl-video__controls,
.tds-theme--replicant-v2 .tcl-video__controls {
--tcl-media__video-control--inset-block-end: unset;
--tcl-media__video-control--inset-inline-start: unset;
}
.tds-theme--replicant-v2 .tcl-video__controls {
--tcl-media__video-control--inset-block-start: var(--tds-size-2x);
--tcl-media__video-control--inset-inline-end: var(--tds-size-2x);
}
.tcl-section:first-of-type
.tcl-video__controls:not(
.tcl-video__controls--bottomLeft,
.tcl-video__controls--bottomRight
) {
--tcl-media__video-control--inset-block-start: calc(
var(--tcl-media__video-control--inset-size) +
var(--tds-shell-header-height)
);
}
}
@media (max-width: 599px) {
.tcl-video__controls {
--tcl-media__video-control--inset-block-start: var(
--tcl-media__video-control--inset-size
);
--tcl-media__video-control--inset-inline-end: var(
--tcl-media__video-control--inset-size
);
}
.tcl-video__controls,
.tds-theme--replicant-v2 .tcl-video__controls {
--tcl-media__video-control--inset-block-end: unset;
--tcl-media__video-control--inset-inline-start: unset;
}
.tds-theme--replicant-v2 .tcl-video__controls {
--tcl-media__video-control--inset-block-start: var(--tds-size-2x);
--tcl-media__video-control--inset-inline-end: var(--tds-size-2x);
}
.tcl-section:first-of-type
.tcl-video__controls:not(
.tcl-video__controls--bottomLeft,
.tcl-video__controls--bottomRight
) {
--tcl-media__video-control--inset-block-start: calc(
var(--tcl-media__video-control--inset-size) +
var(--tds-shell-header-height)
);
}
}
.tcl-video__controls--topLeft {
--tcl-media__video-control--inset-inline-start: var(
--tcl-media__video-control--inset-size
);
--tcl-media__video-control--inset-inline-end: unset;
}
.tcl-video__controls--topLeft,
.tcl-video__controls--topRight {
--tcl-media__video-control--inset-block-start: var(
--tcl-media__video-control--inset-size
);
--tcl-media__video-control--inset-block-end: unset;
}
.tcl-video__controls--topRight {
--tcl-media__video-control--inset-inline-start: unset;
--tcl-media__video-control--inset-inline-end: var(
--tcl-media__video-control--inset-size
);
}
.tcl-video__controls--bottomLeft {
--tcl-media__video-control--inset-inline-start: var(
--tcl-media__video-control--inset-size
);
--tcl-media__video-control--inset-inline-end: unset;
}
.tcl-video__controls--bottomLeft,
.tcl-video__controls--bottomRight {
--tcl-media__video-control--inset-block-start: unset;
--tcl-media__video-control--inset-block-end: var(
--tcl-media__video-control--inset-size
);
}
.tcl-video__controls--bottomRight {
--tcl-media__video-control--inset-inline-start: unset;
--tcl-media__video-control--inset-inline-end: var(
--tcl-media__video-control--inset-size
);
}
@media (max-width: 1200px) and (min-width: 600px) {
.tcl-section:first-of-type .tcl-video__controls--topLeft,
.tcl-section:first-of-type .tcl-video__controls--topRight {
--tcl-media__video-control--inset-block-start: calc(
var(--tcl-media__video-control--inset-size) +
var(--tds-shell-header-height)
);
}
}
@media (max-width: 599px) {
.tcl-section:first-of-type .tcl-video__controls--topLeft,
.tcl-section:first-of-type .tcl-video__controls--topRight {
--tcl-media__video-control--inset-block-start: calc(
var(--tcl-media__video-control--inset-size) +
var(--tds-shell-header-height)
);
}
}
.tcl-text-align--left {
text-align: left;
}
.tcl-text-align--right {
text-align: right;
}
.tcl-text-align--center {
text-align: center;
}
.tcl-text-align--justify {
text-align: justify;
}
[dir="ltr"] .tcl-text-align--start {
text-align: left;
}
[dir="rtl"] .tcl-text-align--start {
text-align: right;
}
.tcl-text-align--start {
text-align: start;
}
[dir="ltr"] .tcl-text-align--end {
text-align: right;
}
[dir="rtl"] .tcl-text-align--end {
text-align: left;
}
.tcl-text-align--end {
text-align: end;
}
.tcl-justify-content--start {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
justify-items: flex-start;
}
.tcl-justify-content--end {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
justify-items: flex-end;
}
.tcl-justify-content--center {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
justify-items: center;
}
.tcl-justify-content--space-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
justify-items: space-between;
}
.tcl-justify-content--space-around {
-ms-flex-pack: distribute;
justify-content: space-around;
justify-items: space-around;
}
.tcl-justify-content--space-evenly {
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
justify-items: space-evenly;
}
.tcl-justify-self--start {
justify-self: flex-start;
}
.tcl-justify-self--end {
justify-self: flex-end;
}
.tcl-justify-self--center {
justify-self: center;
}
.tcl-justify-self--stretch {
justify-self: stretch;
}
.tcl-justify-self--baseline {
justify-self: baseline;
}
.tcl-align-content--start {
-ms-flex-line-pack: start;
align-content: flex-start;
}
.tcl-align-content--end {
-ms-flex-line-pack: end;
align-content: flex-end;
}
.tcl-align-content--center {
-ms-flex-line-pack: center;
align-content: center;
}
.tcl-align-content--space-between {
-ms-flex-line-pack: justify;
align-content: space-between;
}
.tcl-align-content--space-around {
-ms-flex-line-pack: distribute;
align-content: space-around;
}
.tcl-align-content--space-evenly {
-ms-flex-line-pack: space-evenly;
align-content: space-evenly;
}
.tcl-align-content--stretch {
-ms-flex-line-pack: stretch;
align-content: stretch;
}
.tcl-align-items--start {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.tcl-align-items--end {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.tcl-align-items--center {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.tcl-align-items--space-between {
-webkit-box-align: space-between;
-ms-flex-align: space-between;
align-items: space-between;
}
.tcl-align-items--space-around {
-webkit-box-align: space-around;
-ms-flex-align: space-around;
align-items: space-around;
}
.tcl-align-items--space-evenly {
-webkit-box-align: space-evenly;
-ms-flex-align: space-evenly;
align-items: space-evenly;
}
.tcl-align-items--stretch {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.tcl-align-self--start {
-ms-flex-item-align: start;
align-self: flex-start;
}
.tcl-align-self--end {
-ms-flex-item-align: end;
align-self: flex-end;
}
.tcl-align-self--center {
-ms-flex-item-align: center;
align-self: center;
}
.tcl-align-self--stretch {
-ms-flex-item-align: stretch;
align-self: stretch;
}
.tcl-align-self--baseline {
-ms-flex-item-align: baseline;
align-self: baseline;
}
:root {
--tcl-button--inline-size: auto;
--tcl-button--max-inline-size: auto;
}
.tcl-button-group--flex .tcl-button.tcl-button {
width: auto;
width: var(--tcl-button--inline-size);
max-width: auto;
max-width: var(--tcl-button--max-inline-size);
min-width: auto;
}
.tcl-button-group {
max-width: 100%;
}
.tcl-flex-module__component .tcl-button-group.tcl-button-group--flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: var(--tds-size-1x);
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
}
@media (max-width: 599px) {
.tcl-button-group--full-width-two-cta
.tcl-flex-module__component-type--buttonGroup:not(
:has(> .tcl-button-group--one-cta)
),
.tcl-button-group--full-width
:is(
.tcl-flex-module__component-type--buttonGroup,
.tcl-flex-module__component-type--buttonGroup .tcl-button-group
) {
width: 100%;
}
.tcl-button-group--full-width-two-cta
.tcl-flex-module__component-type--buttonGroup:not(
:has(> .tcl-button-group--one-cta)
)
.tcl-button,
.tcl-button-group--full-width
:is(
.tcl-flex-module__component-type--buttonGroup,
.tcl-flex-module__component-type--buttonGroup .tcl-button-group
)
.tcl-button {
width: 100%;
max-width: none;
}
.tcl-button-group--full-width-two-cta
.tcl-flex-module__component-type--buttonGroup:not(
:has(> .tcl-button-group--one-cta)
)
.tcl-button-group {
width: 100%;
}
.tcl-button-group--full-width-two-cta
.tcl-flex-module__component-type--buttonGroup:not(
:has(> .tcl-button-group--one-cta)
)
.tcl-button-group
.tcl-button {
width: 100%;
max-width: none;
}
}
.tcl-btn--high-contrast {
--tds-btn--background-color: var(--tds-theme-foreground-high-contrast);
color: var(--tds-theme-background-container-highlight);
}
.tcl-btn--high-contrast:not([disabled], .tds--disabled):is(
:hover,
.tds--hover,
:focus,
.tds--focus
) {
--tds-btn--background-color: var(--tds-theme-foreground);
}
.tds-scrim--grey .tds-btn--tertiary {
--tds-btn--background-color: #333;
}
.tds-scrim--grey
.tds-btn--tertiary:not([disabled], .tds--disabled):is(
:hover,
.tds--hover,
:focus,
.tds--focus
) {
--tds-btn--background-color: #444;
}
:root {
--tcl-flex-module__container--padding-inline-start: 0px;
--tcl-flex-module__container--padding-inline-end: 0px;
--tcl-flex-module__container--padding-block-start: 0px;
--tcl-flex-module__container--padding-block-end: 0px;
--tcl-flex-module__component--padding-inline-start: 0px;
--tcl-flex-module__component--padding-inline-end: 0px;
--tcl-flex-module__component--padding-block-start: 0px;
--tcl-flex-module__component--padding-block-end: 0px;
--tcl-flex-module__component--margin-inline-start: 0px;
--tcl-flex-module__component--margin-inline-end: 0px;
--tcl-flex-module__component--margin-block-start: 0px;
--tcl-flex-module__component--margin-block-end: 0px;
--tcl-flex-module__container--column-start: 1;
--tcl-flex-module__container--column-end: -1;
--tcl-flex-module__container--row-start: 1;
--tcl-flex-module__container--row-end: -1;
--tcl-flex-module__container--border-radius: 0px;
--tcl-flex-module__container--background-color: transparent;
--tcl-flex-module__grid-template--rows: 48;
--tcl-flex-module__grid-template--cols: 48;
--tcl-flex-module__grid-row-gap: 0;
--tcl-flex-module__grid-col-gap: 0;
--tcl-flex-module--inline-size: 100%;
--tcl-flex-module--block-size: 100%;
}
.tcl-flex-module {
background-color: initial;
height: 100%;
height: var(--tcl-flex-module--block-size);
width: 100%;
width: var(--tcl-flex-module--inline-size);
min-height: -moz-fit-content;
min-height: -webkit-fit-content;
min-height: fit-content;
position: relative;
-webkit-writing-mode: initial;
-ms-writing-mode: initial;
writing-mode: initial;
}
.tcl-flex-module__content {
height: 100%;
-moz-column-gap: 0;
-moz-column-gap: var(--tcl-flex-module__grid-col-gap);
-webkit-column-gap: 0;
column-gap: 0;
-webkit-column-gap: var(--tcl-flex-module__grid-col-gap);
column-gap: var(--tcl-flex-module__grid-col-gap);
display: grid;
grid-template-columns: repeat(48, 1fr);
grid-template-columns: repeat(
var(--tcl-flex-module__grid-template--cols),
1fr
);
grid-template-rows: repeat(48, 1fr);
grid-template-rows: repeat(var(--tcl-flex-module__grid-template--rows), 1fr);
width: 100%;
row-gap: 0;
row-gap: var(--tcl-flex-module__grid-row-gap);
}
.tcl-dynamic-section--block-size--fit-content {
--tcl-flex-module--block-size: auto;
}
.tcl-dynamic-section--block-size--fit-content
.tcl-flex-module-carousel__slide
.tcl-flex-module {
min-height: 100%;
}
.tcl-dynamic-section--block-size--fit-content
.tcl-flex-module-carousel__slide
.tcl-flex-module__content {
height: auto;
width: auto;
}
.tcl-flex-module .tcl-flex-module__background-media {
position: absolute;
z-index: 0;
}
[dir="ltr"] .tcl-flex-module .tcl-flex-module__container {
margin-right: var(--tcl-flex-module__container--margin-inline-end);
}
[dir="rtl"] .tcl-flex-module .tcl-flex-module__container {
margin-left: var(--tcl-flex-module__container--margin-inline-end);
}
[dir="ltr"] .tcl-flex-module .tcl-flex-module__container {
margin-left: var(--tcl-flex-module__container--margin-inline-start);
}
[dir="rtl"] .tcl-flex-module .tcl-flex-module__container {
margin-right: var(--tcl-flex-module__container--margin-inline-start);
}
[dir="ltr"] .tcl-flex-module .tcl-flex-module__container {
padding-right: 0;
}
[dir="rtl"] .tcl-flex-module .tcl-flex-module__container {
padding-left: 0;
}
[dir="ltr"] .tcl-flex-module .tcl-flex-module__container {
padding-right: var(--tcl-flex-module__container--padding-inline-end);
}
[dir="rtl"] .tcl-flex-module .tcl-flex-module__container {
padding-left: var(--tcl-flex-module__container--padding-inline-end);
}
[dir="ltr"] .tcl-flex-module .tcl-flex-module__container {
padding-left: 0;
}
[dir="rtl"] .tcl-flex-module .tcl-flex-module__container {
padding-right: 0;
}
[dir="ltr"] .tcl-flex-module .tcl-flex-module__container {
padding-left: var(--tcl-flex-module__container--padding-inline-start);
}
[dir="rtl"] .tcl-flex-module .tcl-flex-module__container {
padding-right: var(--tcl-flex-module__container--padding-inline-start);
}
.tcl-flex-module .tcl-flex-module__container {
background: transparent;
background: var(--tcl-flex-module__container--background-color);
border-radius: 0;
border-radius: var(--tcl-flex-module__container--border-radius);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
grid-column-end: -1;
grid-column-end: var(--tcl-flex-module__container--column-end);
grid-column-start: 1;
grid-column-start: var(--tcl-flex-module__container--column-start);
grid-row-end: -1;
grid-row-end: var(--tcl-flex-module__container--row-end);
grid-row-start: 1;
grid-row-start: var(--tcl-flex-module__container--row-start);
margin-bottom: var(--tcl-flex-module__container--margin-block-end);
margin-top: var(--tcl-flex-module__container--margin-block-start);
-webkit-margin-end: var(--tcl-flex-module__container--margin-inline-end);
margin-inline-end: var(--tcl-flex-module__container--margin-inline-end);
-webkit-margin-start: var(--tcl-flex-module__container--margin-inline-start);
margin-inline-start: var(--tcl-flex-module__container--margin-inline-start);
max-height: 100%;
max-width: 100%;
max-width: var(--tcl-flex-module__container--max-inline-size, 100%);
padding-bottom: 0;
padding-bottom: var(--tcl-flex-module__container--padding-block-end);
padding-top: 0;
padding-top: var(--tcl-flex-module__container--padding-block-start);
-webkit-padding-end: 0;
padding-inline-end: 0;
-webkit-padding-end: var(--tcl-flex-module__container--padding-inline-end);
padding-inline-end: var(--tcl-flex-module__container--padding-inline-end);
-webkit-padding-start: 0;
padding-inline-start: 0;
-webkit-padding-start: var(
--tcl-flex-module__container--padding-inline-start
);
padding-inline-start: var(--tcl-flex-module__container--padding-inline-start);
pointer-events: none;
z-index: 1;
}
.tcl-flex-module__container--rounded-corners {
--tcl-flex-module__container--border-radius: var(--tcl-border-radius);
}
.tcl-flex-module .tcl-flex-module__container > * {
pointer-events: all;
}
.tcl-flex-module .tcl-button-group .tds-btn {
--tcl-button--inline-size: 252px;
}
[dir="ltr"] .tcl-flex-module__component {
margin-right: 0;
}
[dir="rtl"] .tcl-flex-module__component {
margin-left: 0;
}
[dir="ltr"] .tcl-flex-module__component {
margin-right: var(--tcl-flex-module__component--margin-inline-end);
}
[dir="rtl"] .tcl-flex-module__component {
margin-left: var(--tcl-flex-module__component--margin-inline-end);
}
[dir="ltr"] .tcl-flex-module__component {
margin-left: 0;
}
[dir="rtl"] .tcl-flex-module__component {
margin-right: 0;
}
[dir="ltr"] .tcl-flex-module__component {
margin-left: var(--tcl-flex-module__component--margin-inline-start);
}
[dir="rtl"] .tcl-flex-module__component {
margin-right: var(--tcl-flex-module__component--margin-inline-start);
}
[dir="ltr"] .tcl-flex-module__component {
padding-right: 0;
}
[dir="rtl"] .tcl-flex-module__component {
padding-left: 0;
}
[dir="ltr"] .tcl-flex-module__component {
padding-right: var(--tcl-flex-module__component--padding-inline-end);
}
[dir="rtl"] .tcl-flex-module__component {
padding-left: var(--tcl-flex-module__component--padding-inline-end);
}
[dir="ltr"] .tcl-flex-module__component {
padding-left: 0;
}
[dir="rtl"] .tcl-flex-module__component {
padding-right: 0;
}
[dir="ltr"] .tcl-flex-module__component {
padding-left: var(--tcl-flex-module__component--padding-inline-start);
}
[dir="rtl"] .tcl-flex-module__component {
padding-right: var(--tcl-flex-module__component--padding-inline-start);
}
.tcl-flex-module__component {
margin-bottom: 0;
margin-bottom: var(--tcl-flex-module__component--margin-block-end);
margin-top: 0;
margin-top: var(--tcl-flex-module__component--margin-block-start);
-webkit-margin-end: 0;
margin-inline-end: 0;
-webkit-margin-end: var(--tcl-flex-module__component--margin-inline-end);
margin-inline-end: var(--tcl-flex-module__component--margin-inline-end);
-webkit-margin-start: 0;
margin-inline-start: 0;
-webkit-margin-start: var(--tcl-flex-module__component--margin-inline-start);
margin-inline-start: var(--tcl-flex-module__component--margin-inline-start);
max-width: 100%;
overflow-wrap: break-word;
padding-bottom: 0;
padding-bottom: var(--tcl-flex-module__component--padding-block-end);
padding-top: 0;
padding-top: var(--tcl-flex-module__component--padding-block-start);
-webkit-padding-end: 0;
padding-inline-end: 0;
-webkit-padding-end: var(--tcl-flex-module__component--padding-inline-end);
padding-inline-end: var(--tcl-flex-module__component--padding-inline-end);
-webkit-padding-start: 0;
padding-inline-start: 0;
-webkit-padding-start: var(
--tcl-flex-module__component--padding-inline-start
);
padding-inline-start: var(--tcl-flex-module__component--padding-inline-start);
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
}
.tcl-flex-module__component--full-width {
width: 100%;
}
.tcl-flex-module__component:has(.tcl-react-media) {
height: 100%;
overflow: hidden;
width: 100%;
}
@media (max-width: 1199px) {
.tcl-flex-module__content {
--tcl-flex-module__grid-template--rows: 48;
--tcl-flex-module__grid-template--cols: 32;
}
}
@media (orientation: landscape) and (max-width: 1200px) and (max-height: 600px) {
.tcl-flex-module__content {
--tcl-flex-module__grid-template--rows: 16;
--tcl-flex-module__grid-template--cols: 48;
}
}
@media (max-width: 599px) {
.tcl-flex-module__content {
--tcl-flex-module__grid-template--rows: 48;
--tcl-flex-module__grid-template--cols: 16;
}
}
.tcl-flex-module-carousel {
height: 100%;
width: 100%;
}
.tcl-flex-module-carousel .tcl-flex-module-carousel__slides {
height: 100%;
width: 100%;
position: relative;
}
.tcl-flex-module-carousel__slides [class*="tcl-flex-module-carousel__slide"] {
justify-items: center;
opacity: 0;
-webkit-transition: opacity 1s ease-out, visibility 1s ease-out;
transition: opacity 1s ease-out, visibility 1s ease-out;
visibility: hidden;
}
.tcl-flex-module-carousel__slide {
height: 100%;
width: 100%;
position: absolute;
}
.tcl-flex-module-carousel__slides .tcl-flex-module-carousel__slide--active {
opacity: 1;
visibility: visible;
}
.tcl-flex-module-stacked-carousel .tcl-carousel__nav-button {
top: 50%;
}
:root {
--tcl-dynamic-section--width: 100%;
--tcl-dynamic-section--height: 100%;
--tcl-dynamic-section--max-width: 100%;
--tcl-dynamic-section--max-height: 100%;
--tcl-dynamic-section--padding-inline-start: 0px;
--tcl-dynamic-section--padding-inline-end: 0px;
--tcl-dynamic-section--padding-block-start: 0px;
--tcl-dynamic-section--padding-block-end: 0px;
}
.tcl-dynamic-section__container {
background: transparent;
background: var(--tcl-dynamic-section--background-color, transparent);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: relative;
width: 100%;
}
.tcl-dynamic-section__container:has(.tcl-dynamic-section--rounded-corners) {
border-radius: var(--tcl-border-radius);
}
[dir="ltr"] .tcl-dynamic-section {
padding-right: 0;
}
[dir="rtl"] .tcl-dynamic-section {
padding-left: 0;
}
[dir="ltr"] .tcl-dynamic-section {
padding-right: var(--tcl-dynamic-section--padding-inline-end);
}
[dir="rtl"] .tcl-dynamic-section {
padding-left: var(--tcl-dynamic-section--padding-inline-end);
}
[dir="ltr"] .tcl-dynamic-section {
padding-left: 0;
}
[dir="rtl"] .tcl-dynamic-section {
padding-right: 0;
}
[dir="ltr"] .tcl-dynamic-section {
padding-left: var(--tcl-dynamic-section--padding-inline-start);
}
[dir="rtl"] .tcl-dynamic-section {
padding-right: var(--tcl-dynamic-section--padding-inline-start);
}
.tcl-dynamic-section {
height: var(--tcl-dynamic-section--height);
height: var(
--tcl-dynamic-section--view-height,
var(--tcl-dynamic-section--height)
);
width: 100%;
width: var(--tcl-dynamic-section--width);
max-height: 100%;
max-height: var(--tcl-dynamic-section--max-height);
max-width: 100%;
max-width: var(--tcl-dynamic-section--max-width);
padding-bottom: 0;
padding-bottom: var(--tcl-dynamic-section--padding-block-end);
padding-top: 0;
padding-top: var(--tcl-dynamic-section--padding-block-start);
-webkit-padding-end: 0;
padding-inline-end: 0;
-webkit-padding-end: var(--tcl-dynamic-section--padding-inline-end);
padding-inline-end: var(--tcl-dynamic-section--padding-inline-end);
-webkit-padding-start: 0;
padding-inline-start: 0;
-webkit-padding-start: var(--tcl-dynamic-section--padding-inline-start);
padding-inline-start: var(--tcl-dynamic-section--padding-inline-start);
position: relative;
}
.tcl-dynamic-section.tcl-dynamic-section--block-size--viewport {
height: 100%;
height: var(
--tcl-dynamic-section--view-height,
calc(
var(--tcl-dynamic-section--height) - var(--tcl-bottom-banner-height, 0px) -
var(--tcl-top-banner-height, 0px)
)
);
}
.tcl-logo {
width: var(--tcl-logo-max-inline-size);
max-width: 100svw;
}
.tcl-logo .tds-icon {
height: 100%;
width: 100%;
}
.tds-icon-logo-we-robot-alt {
--tds-icon--color-stop-1: var(--tds-color-white);
--tds-icon--color-stop-2: #cd8e40;
}
.tcl-logo-size--xxxs {
--tcl-logo-max-inline-size: 160px;
}
.tcl-logo-size--xxs {
--tcl-logo-max-inline-size: 208px;
}
.tcl-logo-size--xs {
--tcl-logo-max-inline-size: 240px;
}
.tcl-logo-size--sm {
--tcl-logo-max-inline-size: 252px;
}
.tcl-logo-size--md {
--tcl-logo-max-inline-size: 312px;
}
.tcl-logo-size--lg {
--tcl-logo-max-inline-size: 324px;
}
.tcl-logo-size--xl {
--tcl-logo-max-inline-size: 343px;
}
.tcl-logo-size--xl-plus {
--tcl-logo-max-inline-size: 400px;
}
.tcl-logo-size--xxl {
--tcl-logo-max-inline-size: 432px;
}
.tcl-logo-size--xxxl {
--tcl-logo-max-inline-size: 560px;
}
.tcl-text-line {
max-width: unset;
padding: 0;
}
.tcl-text-line a.tds-link {
color: inherit;
}
.tcl-text-line [data-entity="dynamic-content-copy"],
.tcl-text-line [data-entity="dynamic-pricing-copy"] {
display: none;
}
.tcl-text-line [data-entity="dynamic-pricing-copy"][data-copy="price"] {
display: inline;
}
@media (hover: hover) {
.tcl-text-line a.tds-link:hover {
color: inherit;
}
}
: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
) {
padding-top: 0;
}
:root {
--tcl-badge--line-gap: 0;
--tcl-badge--max-inline-size: calc(var(--tds-size-base) * 40);
}
@media (max-width: 599px) {
:root {
--tcl-badge--max-inline-size: calc(var(--tds-size-base) * 35);
}
}
.tcl-badge {
height: -moz-fit-content;
height: -webkit-fit-content;
height: fit-content;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
gap: 0;
gap: var(--tcl-badge--line-gap);
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
}
.tcl-badge__top-line {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: var(--tds-size-half);
}
.tcl-badge__line {
max-width: calc(var(--tds-size-base) * 40);
max-width: var(--tcl-badge--max-inline-size);
}
.tcl-badge--equal-inline-size .tcl-badge {
-ms-flex-preferred-size: 0px;
flex-basis: 0px;
}
.tcl-badge--no-max-inline-size .tcl-badge {
--tcl-badge--max-inline-size: none;
}
:root {
--tcl-badge-group--gap: 0px;
--tcl-badge-group--max-inline-size: unset;
}
.tcl-badge-group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 0;
gap: var(--tcl-badge-group--gap);
width: 100%;
max-width: unset;
max-width: var(--tcl-badge-group--max-inline-size);
min-height: -moz-fit-content;
min-height: -webkit-fit-content;
min-height: fit-content;
}
.tcl-badge-group .tcl-badge__top-line .tcl-badge__block .tcl-text-line {
width: -moz-max-content;
width: -webkit-max-content;
width: max-content;
}
.tcl-badge-group__separator {
background: var(--tds-theme-border);
height: 100%;
-ms-flex-negative: 0;
flex-shrink: 0;
width: 1px;
}
.tcl-badge-group--horizontal {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.tcl-badge-group__badge-with-separator {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 0;
gap: var(--tcl-badge-group--gap);
}
.tcl-badge-group--vertical {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
}
.tcl-badge-group--vertical .tcl-badge-group__separator {
background: -webkit-gradient(
linear,
left top,
right top,
from(rgba(208, 209, 210, 0)),
color-stop(29.74%, rgba(208, 209, 210, 0.7490196078431373)),
color-stop(69.54%, rgba(208, 209, 210, 0.7490196078431373)),
to(rgba(208, 209, 210, 0))
);
background: linear-gradient(
90deg,
rgba(208, 209, 210, 0),
rgba(208, 209, 210, 0.7490196078431373) 29.74%,
rgba(208, 209, 210, 0.7490196078431373) 69.54%,
rgba(208, 209, 210, 0)
);
height: 1px;
width: 100%;
}
.tcl-badge-group--vertical .tcl-badge-group__badge-with-separator {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
@media (max-width: 2040px) {
.tcl-badge-group--horizontal
.tcl-badge-group__badge-with-separator:nth-child(5) {
display: none;
}
}
@media (max-width: 1600px) {
.tcl-badge-group--horizontal
.tcl-badge-group__badge-with-separator:nth-child(4) {
display: none;
}
}
@media (max-width: 599px) {
.tcl-flex-module--tab_switch_slide .tcl-badge-group {
gap: 24px;
gap: var(--tds-size--3x);
}
}
:root {
--tcl-icon--inline-size: 24px;
--tcl-icon--block-size: 24px;
}
.tcl-icon {
height: 24px;
height: var(--tcl-icon--block-size);
width: 24px;
width: var(--tcl-icon--inline-size);
max-height: min(100%, 100svh);
max-width: min(100%, 100svw);
}
.tcl-icon .tds-icon {
height: 100%;
width: 100%;
}
.tds-tooltip-wrapper--inline:has(> .tcl-carousel__nav-button) {
position: unset;
}
.tcl-carousel__nav-button {
backdrop-filter: blur(4px);
background-color: hsla(0, 0%, 100%, 0.7490196078431373);
-webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25098039215686274);
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25098039215686274);
top: 40%;
position: absolute;
z-index: 2;
}
.tcl-carousel__nav-button .tds-icon {
color: var(--tds-color-black);
}
[dir="ltr"] .tcl-carousel__nav--inline-start {
left: var(--tds-size-6x);
}
[dir="rtl"] .tcl-carousel__nav--inline-start {
right: var(--tds-size-6x);
}
.tcl-carousel__nav--inline-start {
inset-inline-start: var(--tds-size-6x);
}
[dir="ltr"] .tcl-carousel__nav--inline-end {
right: var(--tds-size-6x);
}
[dir="rtl"] .tcl-carousel__nav--inline-end {
left: var(--tds-size-6x);
}
.tcl-carousel__nav--inline-end {
inset-inline-end: var(--tds-size-6x);
}
.tds-theme--replicant-v2 .tcl-carousel__nav-button {
background-color: var(--tds-color-black);
}
.tds-theme--replicant-v2 .tcl-carousel__nav-button .tds-icon {
color: #8e8e8e;
}
.tcl-carousel__tab-list {
--tds-tab--gap: var(--tds-size-1x);
}
.tcl-carousel__tab-list .tds-tab {
background-color: var(--tds-theme-foreground-high-contrast);
height: var(--tds-size-base-plus);
border-radius: var(--tcl-border-radius);
width: var(--tds-size-base-plus);
line-height: var(--tds-size-base-plus);
}
.tcl-carousel__tab-list .tds-tab[aria-selected="false"] {
opacity: 0.5;
}
:root {
--tcl-freeflow-carousel-container__slide--max-inline-size: 1356px;
--tcl-freeflow-carousel-container__slide--block-size: fit-content;
--tcl-freeflow-carousel__slide-media--block-size: 580px;
--tcl-freeflow-carousel-container__column-gap: var(--tds-size-3x);
--tcl-freeflow-carousel-container__slides--padding-inline: var(
--tcl-section--padding-inline
);
}
@media (max-width: 1199px) {
:root {
--tcl-freeflow-carousel-container__slide--max-inline-size: 606px;
--tcl-freeflow-carousel__slide-media--block-size: 404px;
--tcl-freeflow-carousel-container__column-gap: var(--tds-size-2x);
}
}
@media (max-width: 599px) {
:root {
--tcl-freeflow-carousel-container__slide--max-inline-size: 330px;
--tcl-freeflow-carousel__slide-media--block-size: 370px;
}
}
.tcl-freeflow-carousel {
overflow-x: scroll;
overflow-y: hidden;
-ms-scroll-snap-type: x mandatory;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.tcl-freeflow-carousel::-webkit-scrollbar {
display: none;
}
.tcl-freeflow-carousel__container {
max-width: 100svw;
position: relative;
}
.tcl-freeflow-carousel-container__slides {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: var(--tds-size-3x);
gap: var(--tcl-freeflow-carousel-container__column-gap);
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
margin-left: auto;
margin-right: auto;
margin-inline: auto;
padding-inline: var(--tcl-section--padding-inline);
padding-left: var(--tcl-freeflow-carousel-container__slides--padding-inline);
padding-right: var(--tcl-freeflow-carousel-container__slides--padding-inline);
padding-inline: var(
--tcl-freeflow-carousel-container__slides--padding-inline
);
}
@media (min-width: 1200px) {
.tcl-freeflow-carousel-container__slides {
--tcl-grid-col-width: calc(
(
min(100svw, var(--tcl-section--max-inline-size)) -
var(--tcl-section--padding-inline) * 2 - var(--tcl-grid-col-gap) *
11
) / var(--tcl-grid-cols)
);
--tcl-freeflow-carousel-container__slides--padding-inline: max(
calc(
var(--tcl-section--padding-inline) +
(var(--tcl-grid-col-width) + var(--tcl-grid-col-gap)) *
var(--tcl-freeflow-carousel-slides--column-start)
),
calc(
100svw / 2 - var(--tcl-section--max-inline-size) / 2 +
(var(--tcl-grid-col-width) + var(--tcl-grid-col-gap)) *
var(--tcl-freeflow-carousel-slides--column-start) +
var(--tcl-section--padding-inline)
)
);
--tcl-freeflow-carousel-container__slide--inline-size: min(
var(--tcl-freeflow-carousel-container__slide--max-inline-size),
calc(
100svw - var(--tcl-section--padding-inline) * 2 -
var(--tcl-grid-col-width) * 2 - var(--tcl-grid-col-gap) * 2
)
);
}
}
@media (max-width: 599px) {
.tcl-freeflow-carousel-container__slides {
--tcl-freeflow-carousel-container__slides--padding-inline: var(
--tds-size-base-plus
);
}
}
@media (min-width: 1200px) {
.tcl-freeflow-carousel--medium .tcl-freeflow-carousel-container__slides {
--tcl-freeflow-carousel-container__slide--max-inline-size: 800px;
--tcl-freeflow-carousel__slide-media--block-size: 580px;
}
}
@media (min-width: 1200px) {
.tcl-freeflow-carousel--compact .tcl-freeflow-carousel-container__slides {
--tcl-freeflow-carousel-container__slide--max-inline-size: 580px;
--tcl-freeflow-carousel__slide-media--block-size: 580px;
}
}
.tcl-freeflow-carousel-container__slide-container {
--tcl-freeflow-carousel-container__slide--inline-size: var(
--tcl-freeflow-carousel-container__slide--max-inline-size
);
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
height: var(--tcl-freeflow-carousel-container__slide--block-size);
cursor: pointer;
width: var(--tcl-freeflow-carousel-container__slide--inline-size);
scroll-margin-inline-start: calc(
50svw - var(--tcl-freeflow-carousel-container__slide--inline-size) / 2
);
scroll-snap-align: start;
}
@media (min-width: 1199px) {
.tcl-freeflow-carousel-container__slide-container {
--tcl-freeflow-carousel-container__slide--inline-size: min(
var(--tcl-freeflow-carousel-container__slide--max-inline-size),
calc(
100svw - var(--tcl-section--padding-inline) * 2 -
var(--tcl-grid-col-width) * 2 - var(--tcl-grid-col-gap) * 2
)
);
}
}
.tcl-freeflow-carousel-container__slide-container--active {
cursor: unset;
}
@media (min-width: 2559px) {
.tcl-section--constrained
.tcl-dynamic-section:has(.tcl-freeflow-carousel-container__slides) {
padding-left: var(--tcl-section--padding-inline);
padding-right: var(--tcl-section--padding-inline);
padding-inline: var(--tcl-section--padding-inline);
}
.tcl-section--constrained
.tcl-freeflow-carousel
.tcl-freeflow-carousel-container__slides {
--tcl-freeflow-carousel-container__slides--padding-inline: 0;
}
.tcl-section--constrained
.tcl-freeflow-carousel
.tcl-freeflow-carousel-container__slide-container {
scroll-margin-inline-start: calc(
1280px - var(--tcl-section--padding-inline) -
var(--tcl-freeflow-carousel-container__slide--inline-size) / 2
);
}
}
.tcl-freeflow-carousel__tab-list {
margin-top: var(--tds-size-3x);
}
@media (max-width: 1199px) {
.tcl-freeflow-carousel__tab-list {
margin-top: var(--tds-size-2x);
}
}
.tds-theme--replicant-v2 .tcl-freeflow-carousel__container {
--tcl-freeflow-carousel__column-gap: var(--tds-size-2x);
background-position: 50%;
padding-top: var(--tds-size-8x);
padding-bottom: var(--tds-size-8x);
padding-block: var(--tds-size-8x);
}
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide-content {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding-top: 0;
padding-left: 0;
padding-right: 0;
padding-inline: 0;
}
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide-heading {
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: var(--tds-size-1x);
}
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide-heading1 {
color: #c7c7c7;
font-size: var(--tds-font-size-75);
line-height: var(--tds-size-5x);
}
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide-heading1
> sup {
top: -20px;
}
[dir="ltr"]
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide-heading2 {
padding-left: 0;
}
[dir="rtl"]
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide-heading2 {
padding-right: 0;
}
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide-heading2 {
color: #c7c7c7;
font-size: var(--tds-font-size-50);
line-height: var(--tds-line-height-40);
-webkit-padding-start: 0;
padding-inline-start: 0;
}
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide-heading2
> sup {
top: -12px;
}
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide-description {
color: var(--tds-color-ct-body);
font-size: var(--tds-font-size-30);
font-weight: var(--tds-font-weight-medium);
line-height: var(--tds-line-height-30);
padding: 0;
}
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide-description
> sup {
top: -4px;
}
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide,
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide--spacer {
margin-left: 0;
margin-right: 0;
margin-inline: 0;
}
@media (max-width: 599px) {
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide {
gap: var(--tds-size-base-plus);
}
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide-heading {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: var(--tds-size-half);
padding-bottom: var(--tds-size-half);
}
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide-heading1 {
font-size: var(--tds-font-size-70);
line-height: 34px;
}
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide-heading1
> sup {
top: -15px;
}
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide-heading2 {
font-size: var(--tds-size-3x);
font-weight: var(--tds-font-weight-medium);
line-height: var(--tds-line-height-60);
}
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide-heading2
> sup {
top: -12px;
}
}
.tcl-info-card {
height: 100%;
border-radius: var(--tcl-border-radius);
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
padding-left: 24px;
padding-right: 24px;
padding-inline: 24px;
padding-left: var(--tds-size--3x);
padding-right: var(--tds-size--3x);
padding-inline: var(--tds-size--3x);
}
@media (max-width: 599px) {
.tcl-info-card {
padding-left: 12px;
padding-right: 12px;
padding-inline: 12px;
}
}
.tcl-info-card--filled {
background-color: var(--tds-theme-background-container);
}
.tcl-info-card--bordered {
border: 1px solid rgba(0, 0, 0, 0.2);
}
.tcl-info-card--transparent {
padding-left: 0;
padding-right: 0;
padding-inline: 0;
}
@media (max-width: 1199px) {
.tcl-info-card--transparent {
padding-left: 12px;
padding-right: 12px;
padding-inline: 12px;
}
}
.tcl-info-card__content {
height: -moz-fit-content;
height: -webkit-fit-content;
height: fit-content;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
padding-top: var(--tds-size-4x);
padding-bottom: var(--tds-size-6x);
padding-block: var(--tds-size-4x) var(--tds-size-6x);
}
@media (max-width: 1199px) {
.tcl-info-card__content {
padding-top: var(--tds-size-3x);
padding-bottom: var(--tds-size-5x);
padding-block: var(--tds-size-3x) var(--tds-size-5x);
}
}
.tcl-info-card--transparent .tcl-info-card__content {
padding-top: 0;
padding-bottom: 0;
padding-block: 0;
}
.tcl-info-card .tcl-info-card__icon {
margin-bottom: var(--tds-size-2x);
}
.tcl-info-card .tcl-info-card__eyebrow {
margin-bottom: 4px;
margin-bottom: var(--tds-size--half);
}
.tcl-info-card .tcl-info-card__description {
margin-top: var(--tds-size-1x);
}
.tcl-info-card-group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: var(--tds-size-base-plus) 24px;
gap: var(--tds-size-base-plus) var(--tds-size--3x);
}
@media (max-width: 1199px) {
.tcl-info-card-group {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
.tcl-info-card-group:has(.tcl-info-card--transparent) {
row-gap: 40px;
row-gap: var(--tds-size--5x);
}
.tcl-freeflow-carousel-container__slide-container .tcl-info-card-group {
height: max(
var(--tcl-freeflow-carousel-container__slide--resized-block-size),
100%
);
}
.tcl-text {
font-style: normal;
padding: 0;
}
.tcl-text--f72l72 {
font-size: 72px;
font-size: var(--tds-size--9x);
line-height: 72px;
line-height: var(--tds-size--9x);
}
.tcl-text--f64l64 {
font-size: 64px;
font-size: var(--tds-size--8x);
}
.tcl-text--f56l64,
.tcl-text--f64l64 {
line-height: 64px;
line-height: var(--tds-size--8x);
}
.tcl-text--f56l56,
.tcl-text--f56l64 {
font-size: 56px;
font-size: var(--tds-size--7x);
}
.tcl-text--f48l56,
.tcl-text--f56l56 {
line-height: 56px;
line-height: var(--tds-size--7x);
}
.tcl-text--f48l56 {
font-size: 48px;
font-size: var(--tds-size--6x);
}
.tcl-text--f22l30 {
font-size: 22px;
line-height: 30px;
}
.tcl-text--f17l24 {
font-size: var(--tds-font-size-40);
line-height: 24px;
line-height: var(--tds-size--3x);
}
.tcl-text--h0 {
font-size: 56px;
font-size: var(--tds-size--7x);
line-height: 56px;
line-height: var(--tds-size--7x);
}
.tcl-text--h1 {
font-size: var(--tds-font-size-80);
line-height: var(--tds-line-height-80);
}
.tcl-text--h1-alt {
font-size: var(--tds-font-size-75);
line-height: var(--tds-line-height-75);
}
.tcl-text--h2 {
font-size: var(--tds-font-size-70);
line-height: var(--tds-line-height-70);
}
.tcl-text--h3 {
font-size: var(--tds-font-size-60);
}
.tcl-text--h3,
.tcl-text--h4 {
line-height: var(--tds-line-height-60);
}
.tcl-text--h4 {
font-size: var(--tds-font-size-50);
}
.tcl-text--h5 {
font-size: var(--tds-font-size-40);
line-height: var(--tds-line-height-20);
}
.tcl-text--body,
.tcl-text--h6 {
font-size: var(--tds-font-size-30);
line-height: var(--tds-line-height-30);
}
.tcl-text--caption {
font-size: var(--tds-font-size-20);
line-height: var(--tds-line-height-10);
}
.tcl-text-family--display {
font-family: var(--tds-font-family-latin-display);
}
.tcl-text-family--text {
font-family: var(--tds-font-family-latin-text);
}
.tcl-font-weight--200 {
font-weight: 200;
}
.tcl-font-style--italic {
font-style: italic;
}
.tcl-text-decoration--strikethrough {
text-decoration: line-through;
}
.tcl-color-theme-foreground {
color: var(--tds-theme-foreground);
}
.tcl-color-theme-foreground-primary {
color: var(--tds-theme-foreground-primary);
}
.tcl-color-theme-foreground-high-contrast {
color: var(--tds-theme-foreground-high-contrast);
}
.tcl-color-theme-foreground-low-contrast {
color: var(--tds-theme-foreground-low-contrast);
}
.tcl-color-theme-foreground-on-primary {
color: var(--tds-theme-foreground-on-primary);
}
.tcl-color-theme-background {
color: var(--tds-theme-background);
}
.tcl-color-white {
color: #fff;
color: var(--tds-color--white);
}
.tcl-color-black {
color: #000;
color: var(--tds-color--black);
}
.tcl-column-start--0 {
grid-column-start: 1;
}
.tcl-column-start--1 {
grid-column-start: 2;
}
.tcl-column-start--2 {
grid-column-start: 3;
}
.tcl-column-start--3 {
grid-column-start: 4;
}
.tcl-column-start--4 {
grid-column-start: 5;
}
.tcl-column-start--5 {
grid-column-start: 6;
}
.tcl-column-start--6 {
grid-column-start: 7;
}
.tcl-column-start--7 {
grid-column-start: 8;
}
.tcl-column-start--8 {
grid-column-start: 9;
}
.tcl-column-start--9 {
grid-column-start: 10;
}
.tcl-column-start--10 {
grid-column-start: 11;
}
.tcl-column-start--11 {
grid-column-start: 12;
}
.tcl-column-start--12 {
grid-column-start: 13;
}
.tcl-column-start--13 {
grid-column-start: 14;
}
.tcl-column-start--14 {
grid-column-start: 15;
}
.tcl-column-start--15 {
grid-column-start: 16;
}
.tcl-column-start--16 {
grid-column-start: 17;
}
.tcl-column-start--17 {
grid-column-start: 18;
}
.tcl-column-start--18 {
grid-column-start: 19;
}
.tcl-column-start--19 {
grid-column-start: 20;
}
.tcl-column-start--20 {
grid-column-start: 21;
}
.tcl-column-start--21 {
grid-column-start: 22;
}
.tcl-column-start--22 {
grid-column-start: 23;
}
.tcl-column-start--23 {
grid-column-start: 24;
}
.tcl-column-start--24 {
grid-column-start: 25;
}
.tcl-column-start--25 {
grid-column-start: 26;
}
.tcl-column-start--26 {
grid-column-start: 27;
}
.tcl-column-start--27 {
grid-column-start: 28;
}
.tcl-column-start--28 {
grid-column-start: 29;
}
.tcl-column-start--29 {
grid-column-start: 30;
}
.tcl-column-start--30 {
grid-column-start: 31;
}
.tcl-column-start--31 {
grid-column-start: 32;
}
.tcl-column-start--32 {
grid-column-start: 33;
}
.tcl-column-start--33 {
grid-column-start: 34;
}
.tcl-column-start--34 {
grid-column-start: 35;
}
.tcl-column-start--35 {
grid-column-start: 36;
}
.tcl-column-start--36 {
grid-column-start: 37;
}
.tcl-column-start--37 {
grid-column-start: 38;
}
.tcl-column-start--38 {
grid-column-start: 39;
}
.tcl-column-start--39 {
grid-column-start: 40;
}
.tcl-column-start--40 {
grid-column-start: 41;
}
.tcl-column-start--41 {
grid-column-start: 42;
}
.tcl-column-start--42 {
grid-column-start: 43;
}
.tcl-column-start--43 {
grid-column-start: 44;
}
.tcl-column-start--44 {
grid-column-start: 45;
}
.tcl-column-start--45 {
grid-column-start: 46;
}
.tcl-column-start--46 {
grid-column-start: 47;
}
.tcl-column-start--47 {
grid-column-start: 48;
}
.tcl-column-start--48 {
grid-column-start: 49;
}
.tcl-column-start--negative-0 {
grid-column-start: -1;
}
.tcl-column-start--negative-1 {
grid-column-start: -2;
}
.tcl-column-start--negative-2 {
grid-column-start: -3;
}
.tcl-column-start--negative-3 {
grid-column-start: -4;
}
.tcl-column-start--negative-4 {
grid-column-start: -5;
}
.tcl-column-start--negative-5 {
grid-column-start: -6;
}
.tcl-column-start--negative-6 {
grid-column-start: -7;
}
.tcl-column-start--negative-7 {
grid-column-start: -8;
}
.tcl-column-start--negative-8 {
grid-column-start: -9;
}
.tcl-column-start--negative-9 {
grid-column-start: -10;
}
.tcl-column-start--negative-10 {
grid-column-start: -11;
}
.tcl-column-start--negative-11 {
grid-column-start: -12;
}
.tcl-column-start--negative-12 {
grid-column-start: -13;
}
.tcl-column-start--negative-13 {
grid-column-start: -14;
}
.tcl-column-start--negative-14 {
grid-column-start: -15;
}
.tcl-column-start--negative-15 {
grid-column-start: -16;
}
.tcl-column-start--negative-16 {
grid-column-start: -17;
}
.tcl-column-start--negative-17 {
grid-column-start: -18;
}
.tcl-column-start--negative-18 {
grid-column-start: -19;
}
.tcl-column-start--negative-19 {
grid-column-start: -20;
}
.tcl-column-start--negative-20 {
grid-column-start: -21;
}
.tcl-column-start--negative-21 {
grid-column-start: -22;
}
.tcl-column-start--negative-22 {
grid-column-start: -23;
}
.tcl-column-start--negative-23 {
grid-column-start: -24;
}
.tcl-column-start--negative-24 {
grid-column-start: -25;
}
.tcl-column-start--negative-25 {
grid-column-start: -26;
}
.tcl-column-start--negative-26 {
grid-column-start: -27;
}
.tcl-column-start--negative-27 {
grid-column-start: -28;
}
.tcl-column-start--negative-28 {
grid-column-start: -29;
}
.tcl-column-start--negative-29 {
grid-column-start: -30;
}
.tcl-column-start--negative-30 {
grid-column-start: -31;
}
.tcl-column-start--negative-31 {
grid-column-start: -32;
}
.tcl-column-start--negative-32 {
grid-column-start: -33;
}
.tcl-column-start--negative-33 {
grid-column-start: -34;
}
.tcl-column-start--negative-34 {
grid-column-start: -35;
}
.tcl-column-start--negative-35 {
grid-column-start: -36;
}
.tcl-column-start--negative-36 {
grid-column-start: -37;
}
.tcl-column-start--negative-37 {
grid-column-start: -38;
}
.tcl-column-start--negative-38 {
grid-column-start: -39;
}
.tcl-column-start--negative-39 {
grid-column-start: -40;
}
.tcl-column-start--negative-40 {
grid-column-start: -41;
}
.tcl-column-start--negative-41 {
grid-column-start: -42;
}
.tcl-column-start--negative-42 {
grid-column-start: -43;
}
.tcl-column-start--negative-43 {
grid-column-start: -44;
}
.tcl-column-start--negative-44 {
grid-column-start: -45;
}
.tcl-column-start--negative-45 {
grid-column-start: -46;
}
.tcl-column-start--negative-46 {
grid-column-start: -47;
}
.tcl-column-start--negative-47 {
grid-column-start: -48;
}
.tcl-column-start--negative-48 {
grid-column-start: -49;
}
.tcl-column-end--0 {
grid-column-end: 1;
}
.tcl-column-end--1 {
grid-column-end: 2;
}
.tcl-column-end--2 {
grid-column-end: 3;
}
.tcl-column-end--3 {
grid-column-end: 4;
}
.tcl-column-end--4 {
grid-column-end: 5;
}
.tcl-column-end--5 {
grid-column-end: 6;
}
.tcl-column-end--6 {
grid-column-end: 7;
}
.tcl-column-end--7 {
grid-column-end: 8;
}
.tcl-column-end--8 {
grid-column-end: 9;
}
.tcl-column-end--9 {
grid-column-end: 10;
}
.tcl-column-end--10 {
grid-column-end: 11;
}
.tcl-column-end--11 {
grid-column-end: 12;
}
.tcl-column-end--12 {
grid-column-end: 13;
}
.tcl-column-end--13 {
grid-column-end: 14;
}
.tcl-column-end--14 {
grid-column-end: 15;
}
.tcl-column-end--15 {
grid-column-end: 16;
}
.tcl-column-end--16 {
grid-column-end: 17;
}
.tcl-column-end--17 {
grid-column-end: 18;
}
.tcl-column-end--18 {
grid-column-end: 19;
}
.tcl-column-end--19 {
grid-column-end: 20;
}
.tcl-column-end--20 {
grid-column-end: 21;
}
.tcl-column-end--21 {
grid-column-end: 22;
}
.tcl-column-end--22 {
grid-column-end: 23;
}
.tcl-column-end--23 {
grid-column-end: 24;
}
.tcl-column-end--24 {
grid-column-end: 25;
}
.tcl-column-end--25 {
grid-column-end: 26;
}
.tcl-column-end--26 {
grid-column-end: 27;
}
.tcl-column-end--27 {
grid-column-end: 28;
}
.tcl-column-end--28 {
grid-column-end: 29;
}
.tcl-column-end--29 {
grid-column-end: 30;
}
.tcl-column-end--30 {
grid-column-end: 31;
}
.tcl-column-end--31 {
grid-column-end: 32;
}
.tcl-column-end--32 {
grid-column-end: 33;
}
.tcl-column-end--33 {
grid-column-end: 34;
}
.tcl-column-end--34 {
grid-column-end: 35;
}
.tcl-column-end--35 {
grid-column-end: 36;
}
.tcl-column-end--36 {
grid-column-end: 37;
}
.tcl-column-end--37 {
grid-column-end: 38;
}
.tcl-column-end--38 {
grid-column-end: 39;
}
.tcl-column-end--39 {
grid-column-end: 40;
}
.tcl-column-end--40 {
grid-column-end: 41;
}
.tcl-column-end--41 {
grid-column-end: 42;
}
.tcl-column-end--42 {
grid-column-end: 43;
}
.tcl-column-end--43 {
grid-column-end: 44;
}
.tcl-column-end--44 {
grid-column-end: 45;
}
.tcl-column-end--45 {
grid-column-end: 46;
}
.tcl-column-end--46 {
grid-column-end: 47;
}
.tcl-column-end--47 {
grid-column-end: 48;
}
.tcl-column-end--48 {
grid-column-end: 49;
}
.tcl-column-end--negative-0 {
grid-column-end: -1;
}
.tcl-column-end--negative-1 {
grid-column-end: -2;
}
.tcl-column-end--negative-2 {
grid-column-end: -3;
}
.tcl-column-end--negative-3 {
grid-column-end: -4;
}
.tcl-column-end--negative-4 {
grid-column-end: -5;
}
.tcl-column-end--negative-5 {
grid-column-end: -6;
}
.tcl-column-end--negative-6 {
grid-column-end: -7;
}
.tcl-column-end--negative-7 {
grid-column-end: -8;
}
.tcl-column-end--negative-8 {
grid-column-end: -9;
}
.tcl-column-end--negative-9 {
grid-column-end: -10;
}
.tcl-column-end--negative-10 {
grid-column-end: -11;
}
.tcl-column-end--negative-11 {
grid-column-end: -12;
}
.tcl-column-end--negative-12 {
grid-column-end: -13;
}
.tcl-column-end--negative-13 {
grid-column-end: -14;
}
.tcl-column-end--negative-14 {
grid-column-end: -15;
}
.tcl-column-end--negative-15 {
grid-column-end: -16;
}
.tcl-column-end--negative-16 {
grid-column-end: -17;
}
.tcl-column-end--negative-17 {
grid-column-end: -18;
}
.tcl-column-end--negative-18 {
grid-column-end: -19;
}
.tcl-column-end--negative-19 {
grid-column-end: -20;
}
.tcl-column-end--negative-20 {
grid-column-end: -21;
}
.tcl-column-end--negative-21 {
grid-column-end: -22;
}
.tcl-column-end--negative-22 {
grid-column-end: -23;
}
.tcl-column-end--negative-23 {
grid-column-end: -24;
}
.tcl-column-end--negative-24 {
grid-column-end: -25;
}
.tcl-column-end--negative-25 {
grid-column-end: -26;
}
.tcl-column-end--negative-26 {
grid-column-end: -27;
}
.tcl-column-end--negative-27 {
grid-column-end: -28;
}
.tcl-column-end--negative-28 {
grid-column-end: -29;
}
.tcl-column-end--negative-29 {
grid-column-end: -30;
}
.tcl-column-end--negative-30 {
grid-column-end: -31;
}
.tcl-column-end--negative-31 {
grid-column-end: -32;
}
.tcl-column-end--negative-32 {
grid-column-end: -33;
}
.tcl-column-end--negative-33 {
grid-column-end: -34;
}
.tcl-column-end--negative-34 {
grid-column-end: -35;
}
.tcl-column-end--negative-35 {
grid-column-end: -36;
}
.tcl-column-end--negative-36 {
grid-column-end: -37;
}
.tcl-column-end--negative-37 {
grid-column-end: -38;
}
.tcl-column-end--negative-38 {
grid-column-end: -39;
}
.tcl-column-end--negative-39 {
grid-column-end: -40;
}
.tcl-column-end--negative-40 {
grid-column-end: -41;
}
.tcl-column-end--negative-41 {
grid-column-end: -42;
}
.tcl-column-end--negative-42 {
grid-column-end: -43;
}
.tcl-column-end--negative-43 {
grid-column-end: -44;
}
.tcl-column-end--negative-44 {
grid-column-end: -45;
}
.tcl-column-end--negative-45 {
grid-column-end: -46;
}
.tcl-column-end--negative-46 {
grid-column-end: -47;
}
.tcl-column-end--negative-47 {
grid-column-end: -48;
}
.tcl-column-end--negative-48 {
grid-column-end: -49;
}
.tcl-row-start--0 {
grid-row-start: 1;
}
.tcl-row-start--1 {
grid-row-start: 2;
}
.tcl-row-start--2 {
grid-row-start: 3;
}
.tcl-row-start--3 {
grid-row-start: 4;
}
.tcl-row-start--4 {
grid-row-start: 5;
}
.tcl-row-start--5 {
grid-row-start: 6;
}
.tcl-row-start--6 {
grid-row-start: 7;
}
.tcl-row-start--7 {
grid-row-start: 8;
}
.tcl-row-start--8 {
grid-row-start: 9;
}
.tcl-row-start--9 {
grid-row-start: 10;
}
.tcl-row-start--10 {
grid-row-start: 11;
}
.tcl-row-start--11 {
grid-row-start: 12;
}
.tcl-row-start--12 {
grid-row-start: 13;
}
.tcl-row-start--13 {
grid-row-start: 14;
}
.tcl-row-start--14 {
grid-row-start: 15;
}
.tcl-row-start--15 {
grid-row-start: 16;
}
.tcl-row-start--16 {
grid-row-start: 17;
}
.tcl-row-start--17 {
grid-row-start: 18;
}
.tcl-row-start--18 {
grid-row-start: 19;
}
.tcl-row-start--19 {
grid-row-start: 20;
}
.tcl-row-start--20 {
grid-row-start: 21;
}
.tcl-row-start--21 {
grid-row-start: 22;
}
.tcl-row-start--22 {
grid-row-start: 23;
}
.tcl-row-start--23 {
grid-row-start: 24;
}
.tcl-row-start--24 {
grid-row-start: 25;
}
.tcl-row-start--25 {
grid-row-start: 26;
}
.tcl-row-start--26 {
grid-row-start: 27;
}
.tcl-row-start--27 {
grid-row-start: 28;
}
.tcl-row-start--28 {
grid-row-start: 29;
}
.tcl-row-start--29 {
grid-row-start: 30;
}
.tcl-row-start--30 {
grid-row-start: 31;
}
.tcl-row-start--31 {
grid-row-start: 32;
}
.tcl-row-start--32 {
grid-row-start: 33;
}
.tcl-row-start--33 {
grid-row-start: 34;
}
.tcl-row-start--34 {
grid-row-start: 35;
}
.tcl-row-start--35 {
grid-row-start: 36;
}
.tcl-row-start--36 {
grid-row-start: 37;
}
.tcl-row-start--37 {
grid-row-start: 38;
}
.tcl-row-start--38 {
grid-row-start: 39;
}
.tcl-row-start--39 {
grid-row-start: 40;
}
.tcl-row-start--40 {
grid-row-start: 41;
}
.tcl-row-start--41 {
grid-row-start: 42;
}
.tcl-row-start--42 {
grid-row-start: 43;
}
.tcl-row-start--43 {
grid-row-start: 44;
}
.tcl-row-start--44 {
grid-row-start: 45;
}
.tcl-row-start--45 {
grid-row-start: 46;
}
.tcl-row-start--46 {
grid-row-start: 47;
}
.tcl-row-start--47 {
grid-row-start: 48;
}
.tcl-row-start--48 {
grid-row-start: 49;
}
.tcl-row-start--negative-0 {
grid-row-start: -1;
}
.tcl-row-start--negative-1 {
grid-row-start: -2;
}
.tcl-row-start--negative-2 {
grid-row-start: -3;
}
.tcl-row-start--negative-3 {
grid-row-start: -4;
}
.tcl-row-start--negative-4 {
grid-row-start: -5;
}
.tcl-row-start--negative-5 {
grid-row-start: -6;
}
.tcl-row-start--negative-6 {
grid-row-start: -7;
}
.tcl-row-start--negative-7 {
grid-row-start: -8;
}
.tcl-row-start--negative-8 {
grid-row-start: -9;
}
.tcl-row-start--negative-9 {
grid-row-start: -10;
}
.tcl-row-start--negative-10 {
grid-row-start: -11;
}
.tcl-row-start--negative-11 {
grid-row-start: -12;
}
.tcl-row-start--negative-12 {
grid-row-start: -13;
}
.tcl-row-start--negative-13 {
grid-row-start: -14;
}
.tcl-row-start--negative-14 {
grid-row-start: -15;
}
.tcl-row-start--negative-15 {
grid-row-start: -16;
}
.tcl-row-start--negative-16 {
grid-row-start: -17;
}
.tcl-row-start--negative-17 {
grid-row-start: -18;
}
.tcl-row-start--negative-18 {
grid-row-start: -19;
}
.tcl-row-start--negative-19 {
grid-row-start: -20;
}
.tcl-row-start--negative-20 {
grid-row-start: -21;
}
.tcl-row-start--negative-21 {
grid-row-start: -22;
}
.tcl-row-start--negative-22 {
grid-row-start: -23;
}
.tcl-row-start--negative-23 {
grid-row-start: -24;
}
.tcl-row-start--negative-24 {
grid-row-start: -25;
}
.tcl-row-start--negative-25 {
grid-row-start: -26;
}
.tcl-row-start--negative-26 {
grid-row-start: -27;
}
.tcl-row-start--negative-27 {
grid-row-start: -28;
}
.tcl-row-start--negative-28 {
grid-row-start: -29;
}
.tcl-row-start--negative-29 {
grid-row-start: -30;
}
.tcl-row-start--negative-30 {
grid-row-start: -31;
}
.tcl-row-start--negative-31 {
grid-row-start: -32;
}
.tcl-row-start--negative-32 {
grid-row-start: -33;
}
.tcl-row-start--negative-33 {
grid-row-start: -34;
}
.tcl-row-start--negative-34 {
grid-row-start: -35;
}
.tcl-row-start--negative-35 {
grid-row-start: -36;
}
.tcl-row-start--negative-36 {
grid-row-start: -37;
}
.tcl-row-start--negative-37 {
grid-row-start: -38;
}
.tcl-row-start--negative-38 {
grid-row-start: -39;
}
.tcl-row-start--negative-39 {
grid-row-start: -40;
}
.tcl-row-start--negative-40 {
grid-row-start: -41;
}
.tcl-row-start--negative-41 {
grid-row-start: -42;
}
.tcl-row-start--negative-42 {
grid-row-start: -43;
}
.tcl-row-start--negative-43 {
grid-row-start: -44;
}
.tcl-row-start--negative-44 {
grid-row-start: -45;
}
.tcl-row-start--negative-45 {
grid-row-start: -46;
}
.tcl-row-start--negative-46 {
grid-row-start: -47;
}
.tcl-row-start--negative-47 {
grid-row-start: -48;
}
.tcl-row-start--negative-48 {
grid-row-start: -49;
}
.tcl-row-end--0 {
grid-row-end: 1;
}
.tcl-row-end--1 {
grid-row-end: 2;
}
.tcl-row-end--2 {
grid-row-end: 3;
}
.tcl-row-end--3 {
grid-row-end: 4;
}
.tcl-row-end--4 {
grid-row-end: 5;
}
.tcl-row-end--5 {
grid-row-end: 6;
}
.tcl-row-end--6 {
grid-row-end: 7;
}
.tcl-row-end--7 {
grid-row-end: 8;
}
.tcl-row-end--8 {
grid-row-end: 9;
}
.tcl-row-end--9 {
grid-row-end: 10;
}
.tcl-row-end--10 {
grid-row-end: 11;
}
.tcl-row-end--11 {
grid-row-end: 12;
}
.tcl-row-end--12 {
grid-row-end: 13;
}
.tcl-row-end--13 {
grid-row-end: 14;
}
.tcl-row-end--14 {
grid-row-end: 15;
}
.tcl-row-end--15 {
grid-row-end: 16;
}
.tcl-row-end--16 {
grid-row-end: 17;
}
.tcl-row-end--17 {
grid-row-end: 18;
}
.tcl-row-end--18 {
grid-row-end: 19;
}
.tcl-row-end--19 {
grid-row-end: 20;
}
.tcl-row-end--20 {
grid-row-end: 21;
}
.tcl-row-end--21 {
grid-row-end: 22;
}
.tcl-row-end--22 {
grid-row-end: 23;
}
.tcl-row-end--23 {
grid-row-end: 24;
}
.tcl-row-end--24 {
grid-row-end: 25;
}
.tcl-row-end--25 {
grid-row-end: 26;
}
.tcl-row-end--26 {
grid-row-end: 27;
}
.tcl-row-end--27 {
grid-row-end: 28;
}
.tcl-row-end--28 {
grid-row-end: 29;
}
.tcl-row-end--29 {
grid-row-end: 30;
}
.tcl-row-end--30 {
grid-row-end: 31;
}
.tcl-row-end--31 {
grid-row-end: 32;
}
.tcl-row-end--32 {
grid-row-end: 33;
}
.tcl-row-end--33 {
grid-row-end: 34;
}
.tcl-row-end--34 {
grid-row-end: 35;
}
.tcl-row-end--35 {
grid-row-end: 36;
}
.tcl-row-end--36 {
grid-row-end: 37;
}
.tcl-row-end--37 {
grid-row-end: 38;
}
.tcl-row-end--38 {
grid-row-end: 39;
}
.tcl-row-end--39 {
grid-row-end: 40;
}
.tcl-row-end--40 {
grid-row-end: 41;
}
.tcl-row-end--41 {
grid-row-end: 42;
}
.tcl-row-end--42 {
grid-row-end: 43;
}
.tcl-row-end--43 {
grid-row-end: 44;
}
.tcl-row-end--44 {
grid-row-end: 45;
}
.tcl-row-end--45 {
grid-row-end: 46;
}
.tcl-row-end--46 {
grid-row-end: 47;
}
.tcl-row-end--47 {
grid-row-end: 48;
}
.tcl-row-end--48 {
grid-row-end: 49;
}
.tcl-row-end--negative-0 {
grid-row-end: -1;
}
.tcl-row-end--negative-1 {
grid-row-end: -2;
}
.tcl-row-end--negative-2 {
grid-row-end: -3;
}
.tcl-row-end--negative-3 {
grid-row-end: -4;
}
.tcl-row-end--negative-4 {
grid-row-end: -5;
}
.tcl-row-end--negative-5 {
grid-row-end: -6;
}
.tcl-row-end--negative-6 {
grid-row-end: -7;
}
.tcl-row-end--negative-7 {
grid-row-end: -8;
}
.tcl-row-end--negative-8 {
grid-row-end: -9;
}
.tcl-row-end--negative-9 {
grid-row-end: -10;
}
.tcl-row-end--negative-10 {
grid-row-end: -11;
}
.tcl-row-end--negative-11 {
grid-row-end: -12;
}
.tcl-row-end--negative-12 {
grid-row-end: -13;
}
.tcl-row-end--negative-13 {
grid-row-end: -14;
}
.tcl-row-end--negative-14 {
grid-row-end: -15;
}
.tcl-row-end--negative-15 {
grid-row-end: -16;
}
.tcl-row-end--negative-16 {
grid-row-end: -17;
}
.tcl-row-end--negative-17 {
grid-row-end: -18;
}
.tcl-row-end--negative-18 {
grid-row-end: -19;
}
.tcl-row-end--negative-19 {
grid-row-end: -20;
}
.tcl-row-end--negative-20 {
grid-row-end: -21;
}
.tcl-row-end--negative-21 {
grid-row-end: -22;
}
.tcl-row-end--negative-22 {
grid-row-end: -23;
}
.tcl-row-end--negative-23 {
grid-row-end: -24;
}
.tcl-row-end--negative-24 {
grid-row-end: -25;
}
.tcl-row-end--negative-25 {
grid-row-end: -26;
}
.tcl-row-end--negative-26 {
grid-row-end: -27;
}
.tcl-row-end--negative-27 {
grid-row-end: -28;
}
.tcl-row-end--negative-28 {
grid-row-end: -29;
}
.tcl-row-end--negative-29 {
grid-row-end: -30;
}
.tcl-row-end--negative-30 {
grid-row-end: -31;
}
.tcl-row-end--negative-31 {
grid-row-end: -32;
}
.tcl-row-end--negative-32 {
grid-row-end: -33;
}
.tcl-row-end--negative-33 {
grid-row-end: -34;
}
.tcl-row-end--negative-34 {
grid-row-end: -35;
}
.tcl-row-end--negative-35 {
grid-row-end: -36;
}
.tcl-row-end--negative-36 {
grid-row-end: -37;
}
.tcl-row-end--negative-37 {
grid-row-end: -38;
}
.tcl-row-end--negative-38 {
grid-row-end: -39;
}
.tcl-row-end--negative-39 {
grid-row-end: -40;
}
.tcl-row-end--negative-40 {
grid-row-end: -41;
}
.tcl-row-end--negative-41 {
grid-row-end: -42;
}
.tcl-row-end--negative-42 {
grid-row-end: -43;
}
.tcl-row-end--negative-43 {
grid-row-end: -44;
}
.tcl-row-end--negative-44 {
grid-row-end: -45;
}
.tcl-row-end--negative-45 {
grid-row-end: -46;
}
.tcl-row-end--negative-46 {
grid-row-end: -47;
}
.tcl-row-end--negative-47 {
grid-row-end: -48;
}
.tcl-row-end--negative-48 {
grid-row-end: -49;
}
[dir="ltr"] .tcl-padding-inline-start--0x {
padding-left: 0;
}
[dir="rtl"] .tcl-padding-inline-start--0x {
padding-right: 0;
}
.tcl-padding-inline-start--0x {
-webkit-padding-start: 0;
padding-inline-start: 0;
}
[dir="ltr"] .tcl-padding-inline-start--quarter {
padding-left: calc(var(--tds-size-base) / 2);
}
[dir="rtl"] .tcl-padding-inline-start--quarter {
padding-right: calc(var(--tds-size-base) / 2);
}
.tcl-padding-inline-start--quarter {
-webkit-padding-start: calc(var(--tds-size-base) / 2);
padding-inline-start: calc(var(--tds-size-base) / 2);
}
[dir="ltr"] .tcl-padding-inline-start--half {
padding-left: var(--tds-size-half);
}
[dir="rtl"] .tcl-padding-inline-start--half {
padding-right: var(--tds-size-half);
}
.tcl-padding-inline-start--half {
-webkit-padding-start: var(--tds-size-half);
padding-inline-start: var(--tds-size-half);
}
[dir="ltr"] .tcl-padding-inline-start--1x {
padding-left: var(--tds-size-base);
}
[dir="rtl"] .tcl-padding-inline-start--1x {
padding-right: var(--tds-size-base);
}
.tcl-padding-inline-start--1x {
-webkit-padding-start: var(--tds-size-base);
padding-inline-start: var(--tds-size-base);
}
[dir="ltr"] .tcl-padding-inline-start--three-quarters {
padding-left: calc(var(--tds-size-base) + var(--tds-size-half));
}
[dir="rtl"] .tcl-padding-inline-start--three-quarters {
padding-right: calc(var(--tds-size-base) + var(--tds-size-half));
}
.tcl-padding-inline-start--three-quarters {
-webkit-padding-start: calc(var(--tds-size-base) + var(--tds-size-half));
padding-inline-start: calc(var(--tds-size-base) + var(--tds-size-half));
}
[dir="ltr"] .tcl-padding-inline-start--2x {
padding-left: var(--tds-size-2x);
}
[dir="rtl"] .tcl-padding-inline-start--2x {
padding-right: var(--tds-size-2x);
}
.tcl-padding-inline-start--2x {
-webkit-padding-start: var(--tds-size-2x);
padding-inline-start: var(--tds-size-2x);
}
[dir="ltr"] .tcl-padding-inline-start--3x {
padding-left: var(--tds-size-3x);
}
[dir="rtl"] .tcl-padding-inline-start--3x {
padding-right: var(--tds-size-3x);
}
.tcl-padding-inline-start--3x {
-webkit-padding-start: var(--tds-size-3x);
padding-inline-start: var(--tds-size-3x);
}
[dir="ltr"] .tcl-padding-inline-start--4x {
padding-left: var(--tds-size-4x);
}
[dir="rtl"] .tcl-padding-inline-start--4x {
padding-right: var(--tds-size-4x);
}
.tcl-padding-inline-start--4x {
-webkit-padding-start: var(--tds-size-4x);
padding-inline-start: var(--tds-size-4x);
}
[dir="ltr"] .tcl-padding-inline-start--5x {
padding-left: var(--tds-size-5x);
}
[dir="rtl"] .tcl-padding-inline-start--5x {
padding-right: var(--tds-size-5x);
}
.tcl-padding-inline-start--5x {
-webkit-padding-start: var(--tds-size-5x);
padding-inline-start: var(--tds-size-5x);
}
[dir="ltr"] .tcl-padding-inline-start--6x {
padding-left: var(--tds-size-6x);
}
[dir="rtl"] .tcl-padding-inline-start--6x {
padding-right: var(--tds-size-6x);
}
.tcl-padding-inline-start--6x {
-webkit-padding-start: var(--tds-size-6x);
padding-inline-start: var(--tds-size-6x);
}
[dir="ltr"] .tcl-padding-inline-start--7x {
padding-left: var(--tds-size-7x);
}
[dir="rtl"] .tcl-padding-inline-start--7x {
padding-right: var(--tds-size-7x);
}
.tcl-padding-inline-start--7x {
-webkit-padding-start: var(--tds-size-7x);
padding-inline-start: var(--tds-size-7x);
}
[dir="ltr"] .tcl-padding-inline-start--8x {
padding-left: var(--tds-size-8x);
}
[dir="rtl"] .tcl-padding-inline-start--8x {
padding-right: var(--tds-size-8x);
}
.tcl-padding-inline-start--8x {
-webkit-padding-start: var(--tds-size-8x);
padding-inline-start: var(--tds-size-8x);
}
[dir="ltr"] .tcl-padding-inline-start--9x {
padding-left: var(--tds-size-9x);
}
[dir="rtl"] .tcl-padding-inline-start--9x {
padding-right: var(--tds-size-9x);
}
.tcl-padding-inline-start--9x {
-webkit-padding-start: var(--tds-size-9x);
padding-inline-start: var(--tds-size-9x);
}
[dir="ltr"] .tcl-padding-inline-start--10x {
padding-left: var(--tds-size-10x);
}
[dir="rtl"] .tcl-padding-inline-start--10x {
padding-right: var(--tds-size-10x);
}
.tcl-padding-inline-start--10x {
-webkit-padding-start: var(--tds-size-10x);
padding-inline-start: var(--tds-size-10x);
}
[dir="ltr"] .tcl-padding-inline-start--11x {
padding-left: var(--tds-size-11x);
}
[dir="rtl"] .tcl-padding-inline-start--11x {
padding-right: var(--tds-size-11x);
}
.tcl-padding-inline-start--11x {
-webkit-padding-start: var(--tds-size-11x);
padding-inline-start: var(--tds-size-11x);
}
[dir="ltr"] .tcl-padding-inline-start--12x {
padding-left: var(--tds-size-12x);
}
[dir="rtl"] .tcl-padding-inline-start--12x {
padding-right: var(--tds-size-12x);
}
.tcl-padding-inline-start--12x {
-webkit-padding-start: var(--tds-size-12x);
padding-inline-start: var(--tds-size-12x);
}
[dir="ltr"] .tcl-padding-inline-start--13x {
padding-left: var(--tds-size-13x);
}
[dir="rtl"] .tcl-padding-inline-start--13x {
padding-right: var(--tds-size-13x);
}
.tcl-padding-inline-start--13x {
-webkit-padding-start: var(--tds-size-13x);
padding-inline-start: var(--tds-size-13x);
}
[dir="ltr"] .tcl-padding-inline-start--14x {
padding-left: calc(var(--tds-size-base) * 14);
}
[dir="rtl"] .tcl-padding-inline-start--14x {
padding-right: calc(var(--tds-size-base) * 14);
}
.tcl-padding-inline-start--14x {
-webkit-padding-start: calc(var(--tds-size-base) * 14);
padding-inline-start: calc(var(--tds-size-base) * 14);
}
[dir="ltr"] .tcl-padding-inline-start--15x {
padding-left: calc(var(--tds-size-base) * 15);
}
[dir="rtl"] .tcl-padding-inline-start--15x {
padding-right: calc(var(--tds-size-base) * 15);
}
.tcl-padding-inline-start--15x {
-webkit-padding-start: calc(var(--tds-size-base) * 15);
padding-inline-start: calc(var(--tds-size-base) * 15);
}
[dir="ltr"] .tcl-padding-inline-start--16x {
padding-left: calc(var(--tds-size-base) * 16);
}
[dir="rtl"] .tcl-padding-inline-start--16x {
padding-right: calc(var(--tds-size-base) * 16);
}
.tcl-padding-inline-start--16x {
-webkit-padding-start: calc(var(--tds-size-base) * 16);
padding-inline-start: calc(var(--tds-size-base) * 16);
}
[dir="ltr"] .tcl-padding-inline-start--17x {
padding-left: calc(var(--tds-size-base) * 17);
}
[dir="rtl"] .tcl-padding-inline-start--17x {
padding-right: calc(var(--tds-size-base) * 17);
}
.tcl-padding-inline-start--17x {
-webkit-padding-start: calc(var(--tds-size-base) * 17);
padding-inline-start: calc(var(--tds-size-base) * 17);
}
[dir="ltr"] .tcl-padding-inline-start--18x {
padding-left: calc(var(--tds-size-base) * 18);
}
[dir="rtl"] .tcl-padding-inline-start--18x {
padding-right: calc(var(--tds-size-base) * 18);
}
.tcl-padding-inline-start--18x {
-webkit-padding-start: calc(var(--tds-size-base) * 18);
padding-inline-start: calc(var(--tds-size-base) * 18);
}
[dir="ltr"] .tcl-padding-inline-start--19x {
padding-left: calc(var(--tds-size-base) * 19);
}
[dir="rtl"] .tcl-padding-inline-start--19x {
padding-right: calc(var(--tds-size-base) * 19);
}
.tcl-padding-inline-start--19x {
-webkit-padding-start: calc(var(--tds-size-base) * 19);
padding-inline-start: calc(var(--tds-size-base) * 19);
}
[dir="ltr"] .tcl-padding-inline-start--20x {
padding-left: calc(var(--tds-size-base) * 20);
}
[dir="rtl"] .tcl-padding-inline-start--20x {
padding-right: calc(var(--tds-size-base) * 20);
}
.tcl-padding-inline-start--20x {
-webkit-padding-start: calc(var(--tds-size-base) * 20);
padding-inline-start: calc(var(--tds-size-base) * 20);
}
[dir="ltr"] .tcl-padding-inline-end--0x {
padding-right: 0;
}
[dir="rtl"] .tcl-padding-inline-end--0x {
padding-left: 0;
}
.tcl-padding-inline-end--0x {
-webkit-padding-end: 0;
padding-inline-end: 0;
}
[dir="ltr"] .tcl-padding-inline-end--quarter {
padding-right: calc(var(--tds-size-base) / 2);
}
[dir="rtl"] .tcl-padding-inline-end--quarter {
padding-left: calc(var(--tds-size-base) / 2);
}
.tcl-padding-inline-end--quarter {
-webkit-padding-end: calc(var(--tds-size-base) / 2);
padding-inline-end: calc(var(--tds-size-base) / 2);
}
[dir="ltr"] .tcl-padding-inline-end--half {
padding-right: var(--tds-size-half);
}
[dir="rtl"] .tcl-padding-inline-end--half {
padding-left: var(--tds-size-half);
}
.tcl-padding-inline-end--half {
-webkit-padding-end: var(--tds-size-half);
padding-inline-end: var(--tds-size-half);
}
[dir="ltr"] .tcl-padding-inline-end--1x {
padding-right: var(--tds-size-base);
}
[dir="rtl"] .tcl-padding-inline-end--1x {
padding-left: var(--tds-size-base);
}
.tcl-padding-inline-end--1x {
-webkit-padding-end: var(--tds-size-base);
padding-inline-end: var(--tds-size-base);
}
[dir="ltr"] .tcl-padding-inline-end--three-quarters {
padding-right: calc(var(--tds-size-base) + var(--tds-size-half));
}
[dir="rtl"] .tcl-padding-inline-end--three-quarters {
padding-left: calc(var(--tds-size-base) + var(--tds-size-half));
}
.tcl-padding-inline-end--three-quarters {
-webkit-padding-end: calc(var(--tds-size-base) + var(--tds-size-half));
padding-inline-end: calc(var(--tds-size-base) + var(--tds-size-half));
}
[dir="ltr"] .tcl-padding-inline-end--2x {
padding-right: var(--tds-size-2x);
}
[dir="rtl"] .tcl-padding-inline-end--2x {
padding-left: var(--tds-size-2x);
}
.tcl-padding-inline-end--2x {
-webkit-padding-end: var(--tds-size-2x);
padding-inline-end: var(--tds-size-2x);
}
[dir="ltr"] .tcl-padding-inline-end--3x {
padding-right: var(--tds-size-3x);
}
[dir="rtl"] .tcl-padding-inline-end--3x {
padding-left: var(--tds-size-3x);
}
.tcl-padding-inline-end--3x {
-webkit-padding-end: var(--tds-size-3x);
padding-inline-end: var(--tds-size-3x);
}
[dir="ltr"] .tcl-padding-inline-end--4x {
padding-right: var(--tds-size-4x);
}
[dir="rtl"] .tcl-padding-inline-end--4x {
padding-left: var(--tds-size-4x);
}
.tcl-padding-inline-end--4x {
-webkit-padding-end: var(--tds-size-4x);
padding-inline-end: var(--tds-size-4x);
}
[dir="ltr"] .tcl-padding-inline-end--5x {
padding-right: var(--tds-size-5x);
}
[dir="rtl"] .tcl-padding-inline-end--5x {
padding-left: var(--tds-size-5x);
}
.tcl-padding-inline-end--5x {
-webkit-padding-end: var(--tds-size-5x);
padding-inline-end: var(--tds-size-5x);
}
[dir="ltr"] .tcl-padding-inline-end--6x {
padding-right: var(--tds-size-6x);
}
[dir="rtl"] .tcl-padding-inline-end--6x {
padding-left: var(--tds-size-6x);
}
.tcl-padding-inline-end--6x {
-webkit-padding-end: var(--tds-size-6x);
padding-inline-end: var(--tds-size-6x);
}
[dir="ltr"] .tcl-padding-inline-end--7x {
padding-right: var(--tds-size-7x);
}
[dir="rtl"] .tcl-padding-inline-end--7x {
padding-left: var(--tds-size-7x);
}
.tcl-padding-inline-end--7x {
-webkit-padding-end: var(--tds-size-7x);
padding-inline-end: var(--tds-size-7x);
}
[dir="ltr"] .tcl-padding-inline-end--8x {
padding-right: var(--tds-size-8x);
}
[dir="rtl"] .tcl-padding-inline-end--8x {
padding-left: var(--tds-size-8x);
}
.tcl-padding-inline-end--8x {
-webkit-padding-end: var(--tds-size-8x);
padding-inline-end: var(--tds-size-8x);
}
[dir="ltr"] .tcl-padding-inline-end--9x {
padding-right: var(--tds-size-9x);
}
[dir="rtl"] .tcl-padding-inline-end--9x {
padding-left: var(--tds-size-9x);
}
.tcl-padding-inline-end--9x {
-webkit-padding-end: var(--tds-size-9x);
padding-inline-end: var(--tds-size-9x);
}
[dir="ltr"] .tcl-padding-inline-end--10x {
padding-right: var(--tds-size-10x);
}
[dir="rtl"] .tcl-padding-inline-end--10x {
padding-left: var(--tds-size-10x);
}
.tcl-padding-inline-end--10x {
-webkit-padding-end: var(--tds-size-10x);
padding-inline-end: var(--tds-size-10x);
}
[dir="ltr"] .tcl-padding-inline-end--11x {
padding-right: var(--tds-size-11x);
}
[dir="rtl"] .tcl-padding-inline-end--11x {
padding-left: var(--tds-size-11x);
}
.tcl-padding-inline-end--11x {
-webkit-padding-end: var(--tds-size-11x);
padding-inline-end: var(--tds-size-11x);
}
[dir="ltr"] .tcl-padding-inline-end--12x {
padding-right: var(--tds-size-12x);
}
[dir="rtl"] .tcl-padding-inline-end--12x {
padding-left: var(--tds-size-12x);
}
.tcl-padding-inline-end--12x {
-webkit-padding-end: var(--tds-size-12x);
padding-inline-end: var(--tds-size-12x);
}
[dir="ltr"] .tcl-padding-inline-end--13x {
padding-right: var(--tds-size-13x);
}
[dir="rtl"] .tcl-padding-inline-end--13x {
padding-left: var(--tds-size-13x);
}
.tcl-padding-inline-end--13x {
-webkit-padding-end: var(--tds-size-13x);
padding-inline-end: var(--tds-size-13x);
}
[dir="ltr"] .tcl-padding-inline-end--14x {
padding-right: calc(var(--tds-size-base) * 14);
}
[dir="rtl"] .tcl-padding-inline-end--14x {
padding-left: calc(var(--tds-size-base) * 14);
}
.tcl-padding-inline-end--14x {
-webkit-padding-end: calc(var(--tds-size-base) * 14);
padding-inline-end: calc(var(--tds-size-base) * 14);
}
[dir="ltr"] .tcl-padding-inline-end--15x {
padding-right: calc(var(--tds-size-base) * 15);
}
[dir="rtl"] .tcl-padding-inline-end--15x {
padding-left: calc(var(--tds-size-base) * 15);
}
.tcl-padding-inline-end--15x {
-webkit-padding-end: calc(var(--tds-size-base) * 15);
padding-inline-end: calc(var(--tds-size-base) * 15);
}
[dir="ltr"] .tcl-padding-inline-end--16x {
padding-right: calc(var(--tds-size-base) * 16);
}
[dir="rtl"] .tcl-padding-inline-end--16x {
padding-left: calc(var(--tds-size-base) * 16);
}
.tcl-padding-inline-end--16x {
-webkit-padding-end: calc(var(--tds-size-base) * 16);
padding-inline-end: calc(var(--tds-size-base) * 16);
}
[dir="ltr"] .tcl-padding-inline-end--17x {
padding-right: calc(var(--tds-size-base) * 17);
}
[dir="rtl"] .tcl-padding-inline-end--17x {
padding-left: calc(var(--tds-size-base) * 17);
}
.tcl-padding-inline-end--17x {
-webkit-padding-end: calc(var(--tds-size-base) * 17);
padding-inline-end: calc(var(--tds-size-base) * 17);
}
[dir="ltr"] .tcl-padding-inline-end--18x {
padding-right: calc(var(--tds-size-base) * 18);
}
[dir="rtl"] .tcl-padding-inline-end--18x {
padding-left: calc(var(--tds-size-base) * 18);
}
.tcl-padding-inline-end--18x {
-webkit-padding-end: calc(var(--tds-size-base) * 18);
padding-inline-end: calc(var(--tds-size-base) * 18);
}
[dir="ltr"] .tcl-padding-inline-end--19x {
padding-right: calc(var(--tds-size-base) * 19);
}
[dir="rtl"] .tcl-padding-inline-end--19x {
padding-left: calc(var(--tds-size-base) * 19);
}
.tcl-padding-inline-end--19x {
-webkit-padding-end: calc(var(--tds-size-base) * 19);
padding-inline-end: calc(var(--tds-size-base) * 19);
}
[dir="ltr"] .tcl-padding-inline-end--20x {
padding-right: calc(var(--tds-size-base) * 20);
}
[dir="rtl"] .tcl-padding-inline-end--20x {
padding-left: calc(var(--tds-size-base) * 20);
}
.tcl-padding-inline-end--20x {
-webkit-padding-end: calc(var(--tds-size-base) * 20);
padding-inline-end: calc(var(--tds-size-base) * 20);
}
.tcl-padding-block-start--0x {
padding-top: 0;
}
.tcl-padding-block-start--quarter {
padding-top: calc(var(--tds-size-base) / 2);
}
.tcl-padding-block-start--half {
padding-top: var(--tds-size-half);
}
.tcl-padding-block-start--1x {
padding-top: var(--tds-size-base);
}
.tcl-padding-block-start--three-quarters {
padding-top: calc(var(--tds-size-base) + var(--tds-size-half));
}
.tcl-padding-block-start--2x {
padding-top: var(--tds-size-2x);
}
.tcl-padding-block-start--3x {
padding-top: var(--tds-size-3x);
}
.tcl-padding-block-start--4x {
padding-top: var(--tds-size-4x);
}
.tcl-padding-block-start--5x {
padding-top: var(--tds-size-5x);
}
.tcl-padding-block-start--6x {
padding-top: var(--tds-size-6x);
}
.tcl-padding-block-start--7x {
padding-top: var(--tds-size-7x);
}
.tcl-padding-block-start--8x {
padding-top: var(--tds-size-8x);
}
.tcl-padding-block-start--9x {
padding-top: var(--tds-size-9x);
}
.tcl-padding-block-start--10x {
padding-top: var(--tds-size-10x);
}
.tcl-padding-block-start--11x {
padding-top: var(--tds-size-11x);
}
.tcl-padding-block-start--12x {
padding-top: var(--tds-size-12x);
}
.tcl-padding-block-start--13x {
padding-top: var(--tds-size-13x);
}
.tcl-padding-block-start--14x {
padding-top: calc(var(--tds-size-base) * 14);
}
.tcl-padding-block-start--15x {
padding-top: calc(var(--tds-size-base) * 15);
}
.tcl-padding-block-start--16x {
padding-top: calc(var(--tds-size-base) * 16);
}
.tcl-padding-block-start--17x {
padding-top: calc(var(--tds-size-base) * 17);
}
.tcl-padding-block-start--18x {
padding-top: calc(var(--tds-size-base) * 18);
}
.tcl-padding-block-start--19x {
padding-top: calc(var(--tds-size-base) * 19);
}
.tcl-padding-block-start--20x {
padding-top: calc(var(--tds-size-base) * 20);
}
.tcl-padding-block-end--0x {
padding-bottom: 0;
}
.tcl-padding-block-end--quarter {
padding-bottom: calc(var(--tds-size-base) / 2);
}
.tcl-padding-block-end--half {
padding-bottom: var(--tds-size-half);
}
.tcl-padding-block-end--1x {
padding-bottom: var(--tds-size-base);
}
.tcl-padding-block-end--three-quarters {
padding-bottom: calc(var(--tds-size-base) + var(--tds-size-half));
}
.tcl-padding-block-end--2x {
padding-bottom: var(--tds-size-2x);
}
.tcl-padding-block-end--3x {
padding-bottom: var(--tds-size-3x);
}
.tcl-padding-block-end--4x {
padding-bottom: var(--tds-size-4x);
}
.tcl-padding-block-end--5x {
padding-bottom: var(--tds-size-5x);
}
.tcl-padding-block-end--6x {
padding-bottom: var(--tds-size-6x);
}
.tcl-padding-block-end--7x {
padding-bottom: var(--tds-size-7x);
}
.tcl-padding-block-end--8x {
padding-bottom: var(--tds-size-8x);
}
.tcl-padding-block-end--9x {
padding-bottom: var(--tds-size-9x);
}
.tcl-padding-block-end--10x {
padding-bottom: var(--tds-size-10x);
}
.tcl-padding-block-end--11x {
padding-bottom: var(--tds-size-11x);
}
.tcl-padding-block-end--12x {
padding-bottom: var(--tds-size-12x);
}
.tcl-padding-block-end--13x {
padding-bottom: var(--tds-size-13x);
}
.tcl-padding-block-end--14x {
padding-bottom: calc(var(--tds-size-base) * 14);
}
.tcl-padding-block-end--15x {
padding-bottom: calc(var(--tds-size-base) * 15);
}
.tcl-padding-block-end--16x {
padding-bottom: calc(var(--tds-size-base) * 16);
}
.tcl-padding-block-end--17x {
padding-bottom: calc(var(--tds-size-base) * 17);
}
.tcl-padding-block-end--18x {
padding-bottom: calc(var(--tds-size-base) * 18);
}
.tcl-padding-block-end--19x {
padding-bottom: calc(var(--tds-size-base) * 19);
}
.tcl-padding-block-end--20x {
padding-bottom: calc(var(--tds-size-base) * 20);
}
[dir="ltr"] .tcl-margin-inline-start--0x {
margin-left: 0;
}
[dir="rtl"] .tcl-margin-inline-start--0x {
margin-right: 0;
}
.tcl-margin-inline-start--0x {
-webkit-margin-start: 0;
margin-inline-start: 0;
}
[dir="ltr"] .tcl-margin-inline-start--quarter {
margin-left: calc(var(--tds-size-base) / 2);
}
[dir="rtl"] .tcl-margin-inline-start--quarter {
margin-right: calc(var(--tds-size-base) / 2);
}
.tcl-margin-inline-start--quarter {
-webkit-margin-start: calc(var(--tds-size-base) / 2);
margin-inline-start: calc(var(--tds-size-base) / 2);
}
[dir="ltr"] .tcl-margin-inline-start--half {
margin-left: var(--tds-size-half);
}
[dir="rtl"] .tcl-margin-inline-start--half {
margin-right: var(--tds-size-half);
}
.tcl-margin-inline-start--half {
-webkit-margin-start: var(--tds-size-half);
margin-inline-start: var(--tds-size-half);
}
[dir="ltr"] .tcl-margin-inline-start--1x {
margin-left: var(--tds-size-base);
}
[dir="rtl"] .tcl-margin-inline-start--1x {
margin-right: var(--tds-size-base);
}
.tcl-margin-inline-start--1x {
-webkit-margin-start: var(--tds-size-base);
margin-inline-start: var(--tds-size-base);
}
[dir="ltr"] .tcl-margin-inline-start--three-quarters {
margin-left: calc(var(--tds-size-base) + var(--tds-size-half));
}
[dir="rtl"] .tcl-margin-inline-start--three-quarters {
margin-right: calc(var(--tds-size-base) + var(--tds-size-half));
}
.tcl-margin-inline-start--three-quarters {
-webkit-margin-start: calc(var(--tds-size-base) + var(--tds-size-half));
margin-inline-start: calc(var(--tds-size-base) + var(--tds-size-half));
}
[dir="ltr"] .tcl-margin-inline-start--2x {
margin-left: var(--tds-size-2x);
}
[dir="rtl"] .tcl-margin-inline-start--2x {
margin-right: var(--tds-size-2x);
}
.tcl-margin-inline-start--2x {
-webkit-margin-start: var(--tds-size-2x);
margin-inline-start: var(--tds-size-2x);
}
[dir="ltr"] .tcl-margin-inline-start--3x {
margin-left: var(--tds-size-3x);
}
[dir="rtl"] .tcl-margin-inline-start--3x {
margin-right: var(--tds-size-3x);
}
.tcl-margin-inline-start--3x {
-webkit-margin-start: var(--tds-size-3x);
margin-inline-start: var(--tds-size-3x);
}
[dir="ltr"] .tcl-margin-inline-start--4x {
margin-left: var(--tds-size-4x);
}
[dir="rtl"] .tcl-margin-inline-start--4x {
margin-right: var(--tds-size-4x);
}
.tcl-margin-inline-start--4x {
-webkit-margin-start: var(--tds-size-4x);
margin-inline-start: var(--tds-size-4x);
}
[dir="ltr"] .tcl-margin-inline-start--5x {
margin-left: var(--tds-size-5x);
}
[dir="rtl"] .tcl-margin-inline-start--5x {
margin-right: var(--tds-size-5x);
}
.tcl-margin-inline-start--5x {
-webkit-margin-start: var(--tds-size-5x);
margin-inline-start: var(--tds-size-5x);
}
[dir="ltr"] .tcl-margin-inline-start--6x {
margin-left: var(--tds-size-6x);
}
[dir="rtl"] .tcl-margin-inline-start--6x {
margin-right: var(--tds-size-6x);
}
.tcl-margin-inline-start--6x {
-webkit-margin-start: var(--tds-size-6x);
margin-inline-start: var(--tds-size-6x);
}
[dir="ltr"] .tcl-margin-inline-start--7x {
margin-left: var(--tds-size-7x);
}
[dir="rtl"] .tcl-margin-inline-start--7x {
margin-right: var(--tds-size-7x);
}
.tcl-margin-inline-start--7x {
-webkit-margin-start: var(--tds-size-7x);
margin-inline-start: var(--tds-size-7x);
}
[dir="ltr"] .tcl-margin-inline-start--8x {
margin-left: var(--tds-size-8x);
}
[dir="rtl"] .tcl-margin-inline-start--8x {
margin-right: var(--tds-size-8x);
}
.tcl-margin-inline-start--8x {
-webkit-margin-start: var(--tds-size-8x);
margin-inline-start: var(--tds-size-8x);
}
[dir="ltr"] .tcl-margin-inline-start--9x {
margin-left: var(--tds-size-9x);
}
[dir="rtl"] .tcl-margin-inline-start--9x {
margin-right: var(--tds-size-9x);
}
.tcl-margin-inline-start--9x {
-webkit-margin-start: var(--tds-size-9x);
margin-inline-start: var(--tds-size-9x);
}
[dir="ltr"] .tcl-margin-inline-start--10x {
margin-left: var(--tds-size-10x);
}
[dir="rtl"] .tcl-margin-inline-start--10x {
margin-right: var(--tds-size-10x);
}
.tcl-margin-inline-start--10x {
-webkit-margin-start: var(--tds-size-10x);
margin-inline-start: var(--tds-size-10x);
}
[dir="ltr"] .tcl-margin-inline-start--11x {
margin-left: var(--tds-size-11x);
}
[dir="rtl"] .tcl-margin-inline-start--11x {
margin-right: var(--tds-size-11x);
}
.tcl-margin-inline-start--11x {
-webkit-margin-start: var(--tds-size-11x);
margin-inline-start: var(--tds-size-11x);
}
[dir="ltr"] .tcl-margin-inline-start--12x {
margin-left: var(--tds-size-12x);
}
[dir="rtl"] .tcl-margin-inline-start--12x {
margin-right: var(--tds-size-12x);
}
.tcl-margin-inline-start--12x {
-webkit-margin-start: var(--tds-size-12x);
margin-inline-start: var(--tds-size-12x);
}
[dir="ltr"] .tcl-margin-inline-start--13x {
margin-left: var(--tds-size-13x);
}
[dir="rtl"] .tcl-margin-inline-start--13x {
margin-right: var(--tds-size-13x);
}
.tcl-margin-inline-start--13x {
-webkit-margin-start: var(--tds-size-13x);
margin-inline-start: var(--tds-size-13x);
}
[dir="ltr"] .tcl-margin-inline-start--14x {
margin-left: calc(var(--tds-size-base) * 14);
}
[dir="rtl"] .tcl-margin-inline-start--14x {
margin-right: calc(var(--tds-size-base) * 14);
}
.tcl-margin-inline-start--14x {
-webkit-margin-start: calc(var(--tds-size-base) * 14);
margin-inline-start: calc(var(--tds-size-base) * 14);
}
[dir="ltr"] .tcl-margin-inline-start--15x {
margin-left: calc(var(--tds-size-base) * 15);
}
[dir="rtl"] .tcl-margin-inline-start--15x {
margin-right: calc(var(--tds-size-base) * 15);
}
.tcl-margin-inline-start--15x {
-webkit-margin-start: calc(var(--tds-size-base) * 15);
margin-inline-start: calc(var(--tds-size-base) * 15);
}
[dir="ltr"] .tcl-margin-inline-start--16x {
margin-left: calc(var(--tds-size-base) * 16);
}
[dir="rtl"] .tcl-margin-inline-start--16x {
margin-right: calc(var(--tds-size-base) * 16);
}
.tcl-margin-inline-start--16x {
-webkit-margin-start: calc(var(--tds-size-base) * 16);
margin-inline-start: calc(var(--tds-size-base) * 16);
}
[dir="ltr"] .tcl-margin-inline-start--17x {
margin-left: calc(var(--tds-size-base) * 17);
}
[dir="rtl"] .tcl-margin-inline-start--17x {
margin-right: calc(var(--tds-size-base) * 17);
}
.tcl-margin-inline-start--17x {
-webkit-margin-start: calc(var(--tds-size-base) * 17);
margin-inline-start: calc(var(--tds-size-base) * 17);
}
[dir="ltr"] .tcl-margin-inline-start--18x {
margin-left: calc(var(--tds-size-base) * 18);
}
[dir="rtl"] .tcl-margin-inline-start--18x {
margin-right: calc(var(--tds-size-base) * 18);
}
.tcl-margin-inline-start--18x {
-webkit-margin-start: calc(var(--tds-size-base) * 18);
margin-inline-start: calc(var(--tds-size-base) * 18);
}
[dir="ltr"] .tcl-margin-inline-start--19x {
margin-left: calc(var(--tds-size-base) * 19);
}
[dir="rtl"] .tcl-margin-inline-start--19x {
margin-right: calc(var(--tds-size-base) * 19);
}
.tcl-margin-inline-start--19x {
-webkit-margin-start: calc(var(--tds-size-base) * 19);
margin-inline-start: calc(var(--tds-size-base) * 19);
}
[dir="ltr"] .tcl-margin-inline-start--20x {
margin-left: calc(var(--tds-size-base) * 20);
}
[dir="rtl"] .tcl-margin-inline-start--20x {
margin-right: calc(var(--tds-size-base) * 20);
}
.tcl-margin-inline-start--20x {
-webkit-margin-start: calc(var(--tds-size-base) * 20);
margin-inline-start: calc(var(--tds-size-base) * 20);
}
[dir="ltr"] .tcl-margin-inline-end--0x {
margin-right: 0;
}
[dir="rtl"] .tcl-margin-inline-end--0x {
margin-left: 0;
}
.tcl-margin-inline-end--0x {
-webkit-margin-end: 0;
margin-inline-end: 0;
}
[dir="ltr"] .tcl-margin-inline-end--quarter {
margin-right: calc(var(--tds-size-base) / 2);
}
[dir="rtl"] .tcl-margin-inline-end--quarter {
margin-left: calc(var(--tds-size-base) / 2);
}
.tcl-margin-inline-end--quarter {
-webkit-margin-end: calc(var(--tds-size-base) / 2);
margin-inline-end: calc(var(--tds-size-base) / 2);
}
[dir="ltr"] .tcl-margin-inline-end--half {
margin-right: var(--tds-size-half);
}
[dir="rtl"] .tcl-margin-inline-end--half {
margin-left: var(--tds-size-half);
}
.tcl-margin-inline-end--half {
-webkit-margin-end: var(--tds-size-half);
margin-inline-end: var(--tds-size-half);
}
[dir="ltr"] .tcl-margin-inline-end--1x {
margin-right: var(--tds-size-base);
}
[dir="rtl"] .tcl-margin-inline-end--1x {
margin-left: var(--tds-size-base);
}
.tcl-margin-inline-end--1x {
-webkit-margin-end: var(--tds-size-base);
margin-inline-end: var(--tds-size-base);
}
[dir="ltr"] .tcl-margin-inline-end--three-quarters {
margin-right: calc(var(--tds-size-base) + var(--tds-size-half));
}
[dir="rtl"] .tcl-margin-inline-end--three-quarters {
margin-left: calc(var(--tds-size-base) + var(--tds-size-half));
}
.tcl-margin-inline-end--three-quarters {
-webkit-margin-end: calc(var(--tds-size-base) + var(--tds-size-half));
margin-inline-end: calc(var(--tds-size-base) + var(--tds-size-half));
}
[dir="ltr"] .tcl-margin-inline-end--2x {
margin-right: var(--tds-size-2x);
}
[dir="rtl"] .tcl-margin-inline-end--2x {
margin-left: var(--tds-size-2x);
}
.tcl-margin-inline-end--2x {
-webkit-margin-end: var(--tds-size-2x);
margin-inline-end: var(--tds-size-2x);
}
[dir="ltr"] .tcl-margin-inline-end--3x {
margin-right: var(--tds-size-3x);
}
[dir="rtl"] .tcl-margin-inline-end--3x {
margin-left: var(--tds-size-3x);
}
.tcl-margin-inline-end--3x {
-webkit-margin-end: var(--tds-size-3x);
margin-inline-end: var(--tds-size-3x);
}
[dir="ltr"] .tcl-margin-inline-end--4x {
margin-right: var(--tds-size-4x);
}
[dir="rtl"] .tcl-margin-inline-end--4x {
margin-left: var(--tds-size-4x);
}
.tcl-margin-inline-end--4x {
-webkit-margin-end: var(--tds-size-4x);
margin-inline-end: var(--tds-size-4x);
}
[dir="ltr"] .tcl-margin-inline-end--5x {
margin-right: var(--tds-size-5x);
}
[dir="rtl"] .tcl-margin-inline-end--5x {
margin-left: var(--tds-size-5x);
}
.tcl-margin-inline-end--5x {
-webkit-margin-end: var(--tds-size-5x);
margin-inline-end: var(--tds-size-5x);
}
[dir="ltr"] .tcl-margin-inline-end--6x {
margin-right: var(--tds-size-6x);
}
[dir="rtl"] .tcl-margin-inline-end--6x {
margin-left: var(--tds-size-6x);
}
.tcl-margin-inline-end--6x {
-webkit-margin-end: var(--tds-size-6x);
margin-inline-end: var(--tds-size-6x);
}
[dir="ltr"] .tcl-margin-inline-end--7x {
margin-right: var(--tds-size-7x);
}
[dir="rtl"] .tcl-margin-inline-end--7x {
margin-left: var(--tds-size-7x);
}
.tcl-margin-inline-end--7x {
-webkit-margin-end: var(--tds-size-7x);
margin-inline-end: var(--tds-size-7x);
}
[dir="ltr"] .tcl-margin-inline-end--8x {
margin-right: var(--tds-size-8x);
}
[dir="rtl"] .tcl-margin-inline-end--8x {
margin-left: var(--tds-size-8x);
}
.tcl-margin-inline-end--8x {
-webkit-margin-end: var(--tds-size-8x);
margin-inline-end: var(--tds-size-8x);
}
[dir="ltr"] .tcl-margin-inline-end--9x {
margin-right: var(--tds-size-9x);
}
[dir="rtl"] .tcl-margin-inline-end--9x {
margin-left: var(--tds-size-9x);
}
.tcl-margin-inline-end--9x {
-webkit-margin-end: var(--tds-size-9x);
margin-inline-end: var(--tds-size-9x);
}
[dir="ltr"] .tcl-margin-inline-end--10x {
margin-right: var(--tds-size-10x);
}
[dir="rtl"] .tcl-margin-inline-end--10x {
margin-left: var(--tds-size-10x);
}
.tcl-margin-inline-end--10x {
-webkit-margin-end: var(--tds-size-10x);
margin-inline-end: var(--tds-size-10x);
}
[dir="ltr"] .tcl-margin-inline-end--11x {
margin-right: var(--tds-size-11x);
}
[dir="rtl"] .tcl-margin-inline-end--11x {
margin-left: var(--tds-size-11x);
}
.tcl-margin-inline-end--11x {
-webkit-margin-end: var(--tds-size-11x);
margin-inline-end: var(--tds-size-11x);
}
[dir="ltr"] .tcl-margin-inline-end--12x {
margin-right: var(--tds-size-12x);
}
[dir="rtl"] .tcl-margin-inline-end--12x {
margin-left: var(--tds-size-12x);
}
.tcl-margin-inline-end--12x {
-webkit-margin-end: var(--tds-size-12x);
margin-inline-end: var(--tds-size-12x);
}
[dir="ltr"] .tcl-margin-inline-end--13x {
margin-right: var(--tds-size-13x);
}
[dir="rtl"] .tcl-margin-inline-end--13x {
margin-left: var(--tds-size-13x);
}
.tcl-margin-inline-end--13x {
-webkit-margin-end: var(--tds-size-13x);
margin-inline-end: var(--tds-size-13x);
}
[dir="ltr"] .tcl-margin-inline-end--14x {
margin-right: calc(var(--tds-size-base) * 14);
}
[dir="rtl"] .tcl-margin-inline-end--14x {
margin-left: calc(var(--tds-size-base) * 14);
}
.tcl-margin-inline-end--14x {
-webkit-margin-end: calc(var(--tds-size-base) * 14);
margin-inline-end: calc(var(--tds-size-base) * 14);
}
[dir="ltr"] .tcl-margin-inline-end--15x {
margin-right: calc(var(--tds-size-base) * 15);
}
[dir="rtl"] .tcl-margin-inline-end--15x {
margin-left: calc(var(--tds-size-base) * 15);
}
.tcl-margin-inline-end--15x {
-webkit-margin-end: calc(var(--tds-size-base) * 15);
margin-inline-end: calc(var(--tds-size-base) * 15);
}
[dir="ltr"] .tcl-margin-inline-end--16x {
margin-right: calc(var(--tds-size-base) * 16);
}
[dir="rtl"] .tcl-margin-inline-end--16x {
margin-left: calc(var(--tds-size-base) * 16);
}
.tcl-margin-inline-end--16x {
-webkit-margin-end: calc(var(--tds-size-base) * 16);
margin-inline-end: calc(var(--tds-size-base) * 16);
}
[dir="ltr"] .tcl-margin-inline-end--17x {
margin-right: calc(var(--tds-size-base) * 17);
}
[dir="rtl"] .tcl-margin-inline-end--17x {
margin-left: calc(var(--tds-size-base) * 17);
}
.tcl-margin-inline-end--17x {
-webkit-margin-end: calc(var(--tds-size-base) * 17);
margin-inline-end: calc(var(--tds-size-base) * 17);
}
[dir="ltr"] .tcl-margin-inline-end--18x {
margin-right: calc(var(--tds-size-base) * 18);
}
[dir="rtl"] .tcl-margin-inline-end--18x {
margin-left: calc(var(--tds-size-base) * 18);
}
.tcl-margin-inline-end--18x {
-webkit-margin-end: calc(var(--tds-size-base) * 18);
margin-inline-end: calc(var(--tds-size-base) * 18);
}
[dir="ltr"] .tcl-margin-inline-end--19x {
margin-right: calc(var(--tds-size-base) * 19);
}
[dir="rtl"] .tcl-margin-inline-end--19x {
margin-left: calc(var(--tds-size-base) * 19);
}
.tcl-margin-inline-end--19x {
-webkit-margin-end: calc(var(--tds-size-base) * 19);
margin-inline-end: calc(var(--tds-size-base) * 19);
}
[dir="ltr"] .tcl-margin-inline-end--20x {
margin-right: calc(var(--tds-size-base) * 20);
}
[dir="rtl"] .tcl-margin-inline-end--20x {
margin-left: calc(var(--tds-size-base) * 20);
}
.tcl-margin-inline-end--20x {
-webkit-margin-end: calc(var(--tds-size-base) * 20);
margin-inline-end: calc(var(--tds-size-base) * 20);
}
.tcl-margin-block-start--0x {
margin-top: 0;
}
.tcl-margin-block-start--quarter {
margin-top: calc(var(--tds-size-base) / 2);
}
.tcl-margin-block-start--half {
margin-top: var(--tds-size-half);
}
.tcl-margin-block-start--1x {
margin-top: var(--tds-size-base);
}
.tcl-margin-block-start--three-quarters {
margin-top: calc(var(--tds-size-base) + var(--tds-size-half));
}
.tcl-margin-block-start--2x {
margin-top: var(--tds-size-2x);
}
.tcl-margin-block-start--3x {
margin-top: var(--tds-size-3x);
}
.tcl-margin-block-start--4x {
margin-top: var(--tds-size-4x);
}
.tcl-margin-block-start--5x {
margin-top: var(--tds-size-5x);
}
.tcl-margin-block-start--6x {
margin-top: var(--tds-size-6x);
}
.tcl-margin-block-start--7x {
margin-top: var(--tds-size-7x);
}
.tcl-margin-block-start--8x {
margin-top: var(--tds-size-8x);
}
.tcl-margin-block-start--9x {
margin-top: var(--tds-size-9x);
}
.tcl-margin-block-start--10x {
margin-top: var(--tds-size-10x);
}
.tcl-margin-block-start--11x {
margin-top: var(--tds-size-11x);
}
.tcl-margin-block-start--12x {
margin-top: var(--tds-size-12x);
}
.tcl-margin-block-start--13x {
margin-top: var(--tds-size-13x);
}
.tcl-margin-block-start--14x {
margin-top: calc(var(--tds-size-base) * 14);
}
.tcl-margin-block-start--15x {
margin-top: calc(var(--tds-size-base) * 15);
}
.tcl-margin-block-start--16x {
margin-top: calc(var(--tds-size-base) * 16);
}
.tcl-margin-block-start--17x {
margin-top: calc(var(--tds-size-base) * 17);
}
.tcl-margin-block-start--18x {
margin-top: calc(var(--tds-size-base) * 18);
}
.tcl-margin-block-start--19x {
margin-top: calc(var(--tds-size-base) * 19);
}
.tcl-margin-block-start--20x {
margin-top: calc(var(--tds-size-base) * 20);
}
.tcl-margin-block-end--0x {
margin-bottom: 0;
}
.tcl-margin-block-end--quarter {
margin-bottom: calc(var(--tds-size-base) / 2);
}
.tcl-margin-block-end--half {
margin-bottom: var(--tds-size-half);
}
.tcl-margin-block-end--1x {
margin-bottom: var(--tds-size-base);
}
.tcl-margin-block-end--three-quarters {
margin-bottom: calc(var(--tds-size-base) + var(--tds-size-half));
}
.tcl-margin-block-end--2x {
margin-bottom: var(--tds-size-2x);
}
.tcl-margin-block-end--3x {
margin-bottom: var(--tds-size-3x);
}
.tcl-margin-block-end--4x {
margin-bottom: var(--tds-size-4x);
}
.tcl-margin-block-end--5x {
margin-bottom: var(--tds-size-5x);
}
.tcl-margin-block-end--6x {
margin-bottom: var(--tds-size-6x);
}
.tcl-margin-block-end--7x {
margin-bottom: var(--tds-size-7x);
}
.tcl-margin-block-end--8x {
margin-bottom: var(--tds-size-8x);
}
.tcl-margin-block-end--9x {
margin-bottom: var(--tds-size-9x);
}
.tcl-margin-block-end--10x {
margin-bottom: var(--tds-size-10x);
}
.tcl-margin-block-end--11x {
margin-bottom: var(--tds-size-11x);
}
.tcl-margin-block-end--12x {
margin-bottom: var(--tds-size-12x);
}
.tcl-margin-block-end--13x {
margin-bottom: var(--tds-size-13x);
}
.tcl-margin-block-end--14x {
margin-bottom: calc(var(--tds-size-base) * 14);
}
.tcl-margin-block-end--15x {
margin-bottom: calc(var(--tds-size-base) * 15);
}
.tcl-margin-block-end--16x {
margin-bottom: calc(var(--tds-size-base) * 16);
}
.tcl-margin-block-end--17x {
margin-bottom: calc(var(--tds-size-base) * 17);
}
.tcl-margin-block-end--18x {
margin-bottom: calc(var(--tds-size-base) * 18);
}
.tcl-margin-block-end--19x {
margin-bottom: calc(var(--tds-size-base) * 19);
}
.tcl-margin-block-end--20x {
margin-bottom: calc(var(--tds-size-base) * 20);
}
:root {
--tcl-media--width: 100%;
--tcl-media--height: 100%;
--tcl-media--max-width: 100%;
--tcl-media--max-height: 100%;
--tcl-media--aspect-ratio: unset;
--tcl-react-media--start-gradient-size: 20%;
--tcl-react-media--end-gradient-size: 20%;
--tcl-react-media--start-gradient-color: var(--tds-color-white);
--tcl-react-media--end-gradient-color: var(--tds-color-white);
--tcl-react-media--border-radius: 0;
--tcl-react-media--border-top-left-radius: unset;
--tcl-react-media--border-top-right-radius: unset;
--tcl-react-media--border-bottom-left-radius: unset;
--tcl-react-media--border-bottom-right-radius: unset;
--tcl-media__video-control--inset-block-start: unset;
--tcl-media__video-control--inset-block-end: unset;
--tcl-media__video-control--inset-inline-start: unset;
--tcl-media__video-control--inset-inline-end: unset;
--tcl-media__video-control--inset-size: var(--tds-size-4x);
}
@media (max-width: 599px) {
:root {
--tcl-media__video-control--inset-size: var(--tds-size-3x);
}
}
.tcl-react-media {
aspect-ratio: unset;
aspect-ratio: var(--tcl-media--aspect-ratio);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%;
height: var(--tcl-media--height);
max-height: 100%;
max-height: var(--tcl-media--max-height);
max-width: 100%;
max-width: var(--tcl-media--max-width);
opacity: 1;
position: relative;
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
width: 100%;
width: var(--tcl-media--width);
}
.tcl-react-media__asset {
border-bottom-left-radius: unset;
border-bottom-left-radius: var(
--tcl-react-media--border-bottom-left-radius,
var(--tcl-react-media--border-radius, 0)
);
border-bottom-right-radius: unset;
border-bottom-right-radius: var(
--tcl-react-media--border-bottom-right-radius,
var(--tcl-react-media--border-radius, 0)
);
border-top-left-radius: unset;
border-top-left-radius: var(
--tcl-react-media--border-top-left-radius,
var(--tcl-react-media--border-radius, 0)
);
border-top-right-radius: unset;
border-top-right-radius: var(
--tcl-react-media--border-top-right-radius,
var(--tcl-react-media--border-radius, 0)
);
height: 100%;
-o-object-fit: cover;
font-family: "object-fit:cover";
object-fit: cover;
width: 100%;
}
.tcl-react-media.tcl-react-media-slide-in-animation {
opacity: 0;
-webkit-transform: translateY(16px);
transform: translateY(16px);
-webkit-transform: translateY(var(--tds-size--2x));
transform: translateY(var(--tds-size--2x));
}
.tcl-react-media.tcl-react-media--start-gradient-short {
--tcl-react-media--start-gradient-size: 10%;
}
.tcl-react-media.tcl-react-media--start-gradient-standard {
--tcl-react-media--start-gradient-size: 20%;
}
.tcl-react-media.tcl-react-media--start-gradient-tall {
--tcl-react-media--start-gradient-size: 30%;
}
.tcl-react-media.tcl-react-media--start-gradient-huge {
--tcl-react-media--start-gradient-size: 60%;
}
.tcl-react-media.tcl-react-media--end-gradient-short {
--tcl-react-media--end-gradient-size: 10%;
}
.tcl-react-media.tcl-react-media--end-gradient-standard {
--tcl-react-media--end-gradient-size: 20%;
}
.tcl-react-media.tcl-react-media--end-gradient-tall {
--tcl-react-media--end-gradient-size: 30%;
}
.tcl-react-media.tcl-react-media--end-gradient-huge {
--tcl-react-media--end-gradient-size: 60%;
}
.tcl-react-media.tcl-react-media--start-gradient-white {
--tcl-react-media--start-gradient-color: var(--tds-color-white);
}
.tcl-react-media.tcl-react-media--start-gradient-black {
--tcl-react-media--start-gradient-color: var(--tds-color-black);
}
.tcl-react-media.tcl-react-media--end-gradient-white {
--tcl-react-media--end-gradient-color: var(--tds-color-white);
}
.tcl-react-media.tcl-react-media--end-gradient-black {
--tcl-react-media--end-gradient-color: var(--tds-color-black);
}
[dir="ltr"] .tcl-react-media.tcl-react-media--end-gradient:after,
[dir="ltr"] .tcl-react-media.tcl-react-media--start-gradient:before {
left: 0;
}
[dir="rtl"] .tcl-react-media.tcl-react-media--end-gradient:after,
[dir="rtl"] .tcl-react-media.tcl-react-media--start-gradient:before {
right: 0;
}
.tcl-react-media.tcl-react-media--end-gradient:after,
.tcl-react-media.tcl-react-media--start-gradient:before {
background: -webkit-gradient(
linear,
left bottom,
left top,
from(transparent),
to(var(--tds-color-white))
);
background: linear-gradient(0deg, transparent, var(--tds-color-white));
background: -webkit-gradient(
linear,
left bottom,
left top,
from(transparent),
to(var(--tcl-react-media--start-gradient-color))
);
background: linear-gradient(
0deg,
transparent,
var(--tcl-react-media--start-gradient-color)
);
height: 20%;
height: var(--tcl-react-media--start-gradient-size);
content: "";
width: 100%;
inset-inline-start: 0;
opacity: 1;
opacity: var(--tcl-react-media--start-gradient-opacity, 1);
position: absolute;
}
.tcl-react-media.tcl-react-media--end-gradient:after {
background: -webkit-gradient(
linear,
left top,
left bottom,
from(transparent),
to(var(--tds-color-white))
);
background: linear-gradient(180deg, transparent, var(--tds-color-white));
background: -webkit-gradient(
linear,
left top,
left bottom,
from(transparent),
to(var(--tcl-react-media--end-gradient-color))
);
background: linear-gradient(
180deg,
transparent,
var(--tcl-react-media--end-gradient-color)
);
height: 20%;
height: var(--tcl-react-media--end-gradient-size);
bottom: 0;
opacity: 1;
opacity: var(--tcl-react-media--end-gradient-opacity, 1);
}
.tcl-media--rounded-corners {
--tcl-react-media--border-radius: var(--tcl-border-radius);
}
.tcl-media--rounded-corners-top-left {
--tcl-react-media--border-top-left-radius: var(--tcl-border-radius);
}
.tcl-media--rounded-corners-top-right {
--tcl-react-media--border-top-right-radius: var(--tcl-border-radius);
}
.tcl-media--rounded-corners-bottom-left {
--tcl-react-media--border-bottom-left-radius: var(--tcl-border-radius);
}
.tcl-media--rounded-corners-bottom-right {
--tcl-react-media--border-bottom-right-radius: var(--tcl-border-radius);
}
.tds-video-player {
position: relative;
}
[dir="ltr"] .tcl-video__controls {
right: unset;
}
[dir="rtl"] .tcl-video__controls {
left: unset;
}
[dir="ltr"] .tcl-video__controls {
right: var(--tcl-media__video-control--inset-inline-end);
}
[dir="rtl"] .tcl-video__controls {
left: var(--tcl-media__video-control--inset-inline-end);
}
[dir="ltr"] .tcl-video__controls {
left: unset;
}
[dir="rtl"] .tcl-video__controls {
right: unset;
}
[dir="ltr"] .tcl-video__controls {
left: var(--tcl-media__video-control--inset-inline-start);
}
[dir="rtl"] .tcl-video__controls {
right: var(--tcl-media__video-control--inset-inline-start);
}
.tcl-video__controls {
--tds-icon--size: var(--tds-size-3x);
--tds-icon-btn--background: hsla(0, 0%, 50%, 0.65);
bottom: unset;
bottom: var(--tcl-media__video-control--inset-block-end);
top: unset;
top: var(--tcl-media__video-control--inset-block-start);
inset-inline-end: unset;
inset-inline-end: var(--tcl-media__video-control--inset-inline-end);
inset-inline-start: unset;
inset-inline-start: var(--tcl-media__video-control--inset-inline-start);
position: absolute;
z-index: 3;
}
.tcl-video__controls .tds-icon {
color: var(--tds-color-white);
}
.tcl-video__controls.tds-icon-btn:focus {
-webkit-box-shadow: unset;
box-shadow: unset;
}
[dir="ltr"] .tds-video-player__overlay {
left: 0;
}
[dir="rtl"] .tds-video-player__overlay {
right: 0;
}
.tds-video-player__overlay {
height: 100%;
top: 0;
inset-inline-start: 0;
position: absolute;
width: 100%;
z-index: 1;
}
button.tcl-video__controls:focus-visible {
border: var(--tds-border-width--hairline) solid var(--tds-color-white);
}
.tcl-react-media .tds-tooltip-wrapper--inline {
height: -moz-fit-content;
height: -webkit-fit-content;
height: fit-content;
position: unset;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
}
.tcl-video__controls {
--tcl-media__video-control--inset-block-end: var(
--tcl-media__video-control--inset-size
);
--tcl-media__video-control--inset-inline-start: var(
--tcl-media__video-control--inset-size
);
}
.tcl-video__controls,
.tds-theme--replicant-v2 .tcl-video__controls {
--tcl-media__video-control--inset-block-start: unset;
--tcl-media__video-control--inset-inline-end: unset;
}
.tds-theme--replicant-v2 .tcl-video__controls {
--tcl-media__video-control--inset-block-end: var(--tds-size-2x);
--tcl-media__video-control--inset-inline-start: var(--tds-size-2x);
--clip-size: var(--tds-size-1x);
--tds-icon--size: var(--tds-size-2x);
backdrop-filter: blur(4px);
backdrop-filter: blur(var(--tds-blur--small));
background-color: var(--tds-color-ct-bg);
height: var(--tds-size-4x);
opacity: 0.8;
width: var(--tds-size-4x);
z-index: 1;
}
.tds-theme--replicant-v2 button.tcl-video__controls:focus-visible {
border: var(--tds-border-width--hairline) solid var(--tds-color-white);
}
@media (max-width: 1200px) and (min-width: 600px) {
.tcl-video__controls {
--tcl-media__video-control--inset-block-start: var(
--tcl-media__video-control--inset-size
);
--tcl-media__video-control--inset-inline-end: var(
--tcl-media__video-control--inset-size
);
}
.tcl-video__controls,
.tds-theme--replicant-v2 .tcl-video__controls {
--tcl-media__video-control--inset-block-end: unset;
--tcl-media__video-control--inset-inline-start: unset;
}
.tds-theme--replicant-v2 .tcl-video__controls {
--tcl-media__video-control--inset-block-start: var(--tds-size-2x);
--tcl-media__video-control--inset-inline-end: var(--tds-size-2x);
}
.tcl-section:first-of-type
.tcl-video__controls:not(
.tcl-video__controls--bottomLeft,
.tcl-video__controls--bottomRight
) {
--tcl-media__video-control--inset-block-start: calc(
var(--tcl-media__video-control--inset-size) +
var(--tds-shell-header-height)
);
}
}
@media (max-width: 599px) {
.tcl-video__controls {
--tcl-media__video-control--inset-block-start: var(
--tcl-media__video-control--inset-size
);
--tcl-media__video-control--inset-inline-end: var(
--tcl-media__video-control--inset-size
);
}
.tcl-video__controls,
.tds-theme--replicant-v2 .tcl-video__controls {
--tcl-media__video-control--inset-block-end: unset;
--tcl-media__video-control--inset-inline-start: unset;
}
.tds-theme--replicant-v2 .tcl-video__controls {
--tcl-media__video-control--inset-block-start: var(--tds-size-2x);
--tcl-media__video-control--inset-inline-end: var(--tds-size-2x);
}
.tcl-section:first-of-type
.tcl-video__controls:not(
.tcl-video__controls--bottomLeft,
.tcl-video__controls--bottomRight
) {
--tcl-media__video-control--inset-block-start: calc(
var(--tcl-media__video-control--inset-size) +
var(--tds-shell-header-height)
);
}
}
.tcl-video__controls--topLeft {
--tcl-media__video-control--inset-inline-start: var(
--tcl-media__video-control--inset-size
);
--tcl-media__video-control--inset-inline-end: unset;
}
.tcl-video__controls--topLeft,
.tcl-video__controls--topRight {
--tcl-media__video-control--inset-block-start: var(
--tcl-media__video-control--inset-size
);
--tcl-media__video-control--inset-block-end: unset;
}
.tcl-video__controls--topRight {
--tcl-media__video-control--inset-inline-start: unset;
--tcl-media__video-control--inset-inline-end: var(
--tcl-media__video-control--inset-size
);
}
.tcl-video__controls--bottomLeft {
--tcl-media__video-control--inset-inline-start: var(
--tcl-media__video-control--inset-size
);
--tcl-media__video-control--inset-inline-end: unset;
}
.tcl-video__controls--bottomLeft,
.tcl-video__controls--bottomRight {
--tcl-media__video-control--inset-block-start: unset;
--tcl-media__video-control--inset-block-end: var(
--tcl-media__video-control--inset-size
);
}
.tcl-video__controls--bottomRight {
--tcl-media__video-control--inset-inline-start: unset;
--tcl-media__video-control--inset-inline-end: var(
--tcl-media__video-control--inset-size
);
}
@media (max-width: 1200px) and (min-width: 600px) {
.tcl-section:first-of-type .tcl-video__controls--topLeft,
.tcl-section:first-of-type .tcl-video__controls--topRight {
--tcl-media__video-control--inset-block-start: calc(
var(--tcl-media__video-control--inset-size) +
var(--tds-shell-header-height)
);
}
}
@media (max-width: 599px) {
.tcl-section:first-of-type .tcl-video__controls--topLeft,
.tcl-section:first-of-type .tcl-video__controls--topRight {
--tcl-media__video-control--inset-block-start: calc(
var(--tcl-media__video-control--inset-size) +
var(--tds-shell-header-height)
);
}
}
.tcl-text-align--left {
text-align: left;
}
.tcl-text-align--right {
text-align: right;
}
.tcl-text-align--center {
text-align: center;
}
.tcl-text-align--justify {
text-align: justify;
}
[dir="ltr"] .tcl-text-align--start {
text-align: left;
}
[dir="rtl"] .tcl-text-align--start {
text-align: right;
}
.tcl-text-align--start {
text-align: start;
}
[dir="ltr"] .tcl-text-align--end {
text-align: right;
}
[dir="rtl"] .tcl-text-align--end {
text-align: left;
}
.tcl-text-align--end {
text-align: end;
}
.tcl-justify-content--start {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
justify-items: flex-start;
}
.tcl-justify-content--end {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
justify-items: flex-end;
}
.tcl-justify-content--center {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
justify-items: center;
}
.tcl-justify-content--space-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
justify-items: space-between;
}
.tcl-justify-content--space-around {
-ms-flex-pack: distribute;
justify-content: space-around;
justify-items: space-around;
}
.tcl-justify-content--space-evenly {
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
justify-items: space-evenly;
}
.tcl-justify-self--start {
justify-self: flex-start;
}
.tcl-justify-self--end {
justify-self: flex-end;
}
.tcl-justify-self--center {
justify-self: center;
}
.tcl-justify-self--stretch {
justify-self: stretch;
}
.tcl-justify-self--baseline {
justify-self: baseline;
}
.tcl-align-content--start {
-ms-flex-line-pack: start;
align-content: flex-start;
}
.tcl-align-content--end {
-ms-flex-line-pack: end;
align-content: flex-end;
}
.tcl-align-content--center {
-ms-flex-line-pack: center;
align-content: center;
}
.tcl-align-content--space-between {
-ms-flex-line-pack: justify;
align-content: space-between;
}
.tcl-align-content--space-around {
-ms-flex-line-pack: distribute;
align-content: space-around;
}
.tcl-align-content--space-evenly {
-ms-flex-line-pack: space-evenly;
align-content: space-evenly;
}
.tcl-align-content--stretch {
-ms-flex-line-pack: stretch;
align-content: stretch;
}
.tcl-align-items--start {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.tcl-align-items--end {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.tcl-align-items--center {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.tcl-align-items--space-between {
-webkit-box-align: space-between;
-ms-flex-align: space-between;
align-items: space-between;
}
.tcl-align-items--space-around {
-webkit-box-align: space-around;
-ms-flex-align: space-around;
align-items: space-around;
}
.tcl-align-items--space-evenly {
-webkit-box-align: space-evenly;
-ms-flex-align: space-evenly;
align-items: space-evenly;
}
.tcl-align-items--stretch {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.tcl-align-self--start {
-ms-flex-item-align: start;
align-self: flex-start;
}
.tcl-align-self--end {
-ms-flex-item-align: end;
align-self: flex-end;
}
.tcl-align-self--center {
-ms-flex-item-align: center;
align-self: center;
}
.tcl-align-self--stretch {
-ms-flex-item-align: stretch;
align-self: stretch;
}
.tcl-align-self--baseline {
-ms-flex-item-align: baseline;
align-self: baseline;
}
:root {
--tcl-button--inline-size: auto;
--tcl-button--max-inline-size: auto;
}
.tcl-button-group--flex .tcl-button.tcl-button {
width: auto;
width: var(--tcl-button--inline-size);
max-width: auto;
max-width: var(--tcl-button--max-inline-size);
min-width: auto;
}
.tcl-button-group {
max-width: 100%;
}
.tcl-flex-module__component .tcl-button-group.tcl-button-group--flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: var(--tds-size-1x);
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
}
@media (max-width: 599px) {
.tcl-button-group--full-width-two-cta
.tcl-flex-module__component-type--buttonGroup:not(
:has(> .tcl-button-group--one-cta)
),
.tcl-button-group--full-width
:is(
.tcl-flex-module__component-type--buttonGroup,
.tcl-flex-module__component-type--buttonGroup .tcl-button-group
) {
width: 100%;
}
.tcl-button-group--full-width-two-cta
.tcl-flex-module__component-type--buttonGroup:not(
:has(> .tcl-button-group--one-cta)
)
.tcl-button,
.tcl-button-group--full-width
:is(
.tcl-flex-module__component-type--buttonGroup,
.tcl-flex-module__component-type--buttonGroup .tcl-button-group
)
.tcl-button {
width: 100%;
max-width: none;
}
.tcl-button-group--full-width-two-cta
.tcl-flex-module__component-type--buttonGroup:not(
:has(> .tcl-button-group--one-cta)
)
.tcl-button-group {
width: 100%;
}
.tcl-button-group--full-width-two-cta
.tcl-flex-module__component-type--buttonGroup:not(
:has(> .tcl-button-group--one-cta)
)
.tcl-button-group
.tcl-button {
width: 100%;
max-width: none;
}
}
.tcl-btn--high-contrast {
--tds-btn--background-color: var(--tds-theme-foreground-high-contrast);
color: var(--tds-theme-background-container-highlight);
}
.tcl-btn--high-contrast:not([disabled], .tds--disabled):is(
:hover,
.tds--hover,
:focus,
.tds--focus
) {
--tds-btn--background-color: var(--tds-theme-foreground);
}
.tds-scrim--grey .tds-btn--tertiary {
--tds-btn--background-color: #333;
}
.tds-scrim--grey
.tds-btn--tertiary:not([disabled], .tds--disabled):is(
:hover,
.tds--hover,
:focus,
.tds--focus
) {
--tds-btn--background-color: #444;
}
:root {
--tcl-flex-module__container--padding-inline-start: 0px;
--tcl-flex-module__container--padding-inline-end: 0px;
--tcl-flex-module__container--padding-block-start: 0px;
--tcl-flex-module__container--padding-block-end: 0px;
--tcl-flex-module__component--padding-inline-start: 0px;
--tcl-flex-module__component--padding-inline-end: 0px;
--tcl-flex-module__component--padding-block-start: 0px;
--tcl-flex-module__component--padding-block-end: 0px;
--tcl-flex-module__component--margin-inline-start: 0px;
--tcl-flex-module__component--margin-inline-end: 0px;
--tcl-flex-module__component--margin-block-start: 0px;
--tcl-flex-module__component--margin-block-end: 0px;
--tcl-flex-module__container--column-start: 1;
--tcl-flex-module__container--column-end: -1;
--tcl-flex-module__container--row-start: 1;
--tcl-flex-module__container--row-end: -1;
--tcl-flex-module__container--border-radius: 0px;
--tcl-flex-module__container--background-color: transparent;
--tcl-flex-module__grid-template--rows: 48;
--tcl-flex-module__grid-template--cols: 48;
--tcl-flex-module__grid-row-gap: 0;
--tcl-flex-module__grid-col-gap: 0;
--tcl-flex-module--inline-size: 100%;
--tcl-flex-module--block-size: 100%;
}
.tcl-flex-module {
background-color: initial;
height: 100%;
height: var(--tcl-flex-module--block-size);
width: 100%;
width: var(--tcl-flex-module--inline-size);
min-height: -moz-fit-content;
min-height: -webkit-fit-content;
min-height: fit-content;
position: relative;
-webkit-writing-mode: initial;
-ms-writing-mode: initial;
writing-mode: initial;
}
.tcl-flex-module__content {
height: 100%;
-moz-column-gap: 0;
-moz-column-gap: var(--tcl-flex-module__grid-col-gap);
-webkit-column-gap: 0;
column-gap: 0;
-webkit-column-gap: var(--tcl-flex-module__grid-col-gap);
column-gap: var(--tcl-flex-module__grid-col-gap);
display: grid;
grid-template-columns: repeat(48, 1fr);
grid-template-columns: repeat(
var(--tcl-flex-module__grid-template--cols),
1fr
);
grid-template-rows: repeat(48, 1fr);
grid-template-rows: repeat(var(--tcl-flex-module__grid-template--rows), 1fr);
width: 100%;
row-gap: 0;
row-gap: var(--tcl-flex-module__grid-row-gap);
}
.tcl-dynamic-section--block-size--fit-content {
--tcl-flex-module--block-size: auto;
}
.tcl-dynamic-section--block-size--fit-content
.tcl-flex-module-carousel__slide
.tcl-flex-module {
min-height: 100%;
}
.tcl-dynamic-section--block-size--fit-content
.tcl-flex-module-carousel__slide
.tcl-flex-module__content {
height: auto;
width: auto;
}
.tcl-flex-module .tcl-flex-module__background-media {
position: absolute;
z-index: 0;
}
[dir="ltr"] .tcl-flex-module .tcl-flex-module__container {
margin-right: var(--tcl-flex-module__container--margin-inline-end);
}
[dir="rtl"] .tcl-flex-module .tcl-flex-module__container {
margin-left: var(--tcl-flex-module__container--margin-inline-end);
}
[dir="ltr"] .tcl-flex-module .tcl-flex-module__container {
margin-left: var(--tcl-flex-module__container--margin-inline-start);
}
[dir="rtl"] .tcl-flex-module .tcl-flex-module__container {
margin-right: var(--tcl-flex-module__container--margin-inline-start);
}
[dir="ltr"] .tcl-flex-module .tcl-flex-module__container {
padding-right: 0;
}
[dir="rtl"] .tcl-flex-module .tcl-flex-module__container {
padding-left: 0;
}
[dir="ltr"] .tcl-flex-module .tcl-flex-module__container {
padding-right: var(--tcl-flex-module__container--padding-inline-end);
}
[dir="rtl"] .tcl-flex-module .tcl-flex-module__container {
padding-left: var(--tcl-flex-module__container--padding-inline-end);
}
[dir="ltr"] .tcl-flex-module .tcl-flex-module__container {
padding-left: 0;
}
[dir="rtl"] .tcl-flex-module .tcl-flex-module__container {
padding-right: 0;
}
[dir="ltr"] .tcl-flex-module .tcl-flex-module__container {
padding-left: var(--tcl-flex-module__container--padding-inline-start);
}
[dir="rtl"] .tcl-flex-module .tcl-flex-module__container {
padding-right: var(--tcl-flex-module__container--padding-inline-start);
}
.tcl-flex-module .tcl-flex-module__container {
background: transparent;
background: var(--tcl-flex-module__container--background-color);
border-radius: 0;
border-radius: var(--tcl-flex-module__container--border-radius);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
grid-column-end: -1;
grid-column-end: var(--tcl-flex-module__container--column-end);
grid-column-start: 1;
grid-column-start: var(--tcl-flex-module__container--column-start);
grid-row-end: -1;
grid-row-end: var(--tcl-flex-module__container--row-end);
grid-row-start: 1;
grid-row-start: var(--tcl-flex-module__container--row-start);
margin-bottom: var(--tcl-flex-module__container--margin-block-end);
margin-top: var(--tcl-flex-module__container--margin-block-start);
-webkit-margin-end: var(--tcl-flex-module__container--margin-inline-end);
margin-inline-end: var(--tcl-flex-module__container--margin-inline-end);
-webkit-margin-start: var(--tcl-flex-module__container--margin-inline-start);
margin-inline-start: var(--tcl-flex-module__container--margin-inline-start);
max-height: 100%;
max-width: 100%;
max-width: var(--tcl-flex-module__container--max-inline-size, 100%);
padding-bottom: 0;
padding-bottom: var(--tcl-flex-module__container--padding-block-end);
padding-top: 0;
padding-top: var(--tcl-flex-module__container--padding-block-start);
-webkit-padding-end: 0;
padding-inline-end: 0;
-webkit-padding-end: var(--tcl-flex-module__container--padding-inline-end);
padding-inline-end: var(--tcl-flex-module__container--padding-inline-end);
-webkit-padding-start: 0;
padding-inline-start: 0;
-webkit-padding-start: var(
--tcl-flex-module__container--padding-inline-start
);
padding-inline-start: var(--tcl-flex-module__container--padding-inline-start);
pointer-events: none;
z-index: 1;
}
.tcl-flex-module__container--rounded-corners {
--tcl-flex-module__container--border-radius: var(--tcl-border-radius);
}
.tcl-flex-module .tcl-flex-module__container > * {
pointer-events: all;
}
.tcl-flex-module .tcl-button-group .tds-btn {
--tcl-button--inline-size: 252px;
}
[dir="ltr"] .tcl-flex-module__component {
margin-right: 0;
}
[dir="rtl"] .tcl-flex-module__component {
margin-left: 0;
}
[dir="ltr"] .tcl-flex-module__component {
margin-right: var(--tcl-flex-module__component--margin-inline-end);
}
[dir="rtl"] .tcl-flex-module__component {
margin-left: var(--tcl-flex-module__component--margin-inline-end);
}
[dir="ltr"] .tcl-flex-module__component {
margin-left: 0;
}
[dir="rtl"] .tcl-flex-module__component {
margin-right: 0;
}
[dir="ltr"] .tcl-flex-module__component {
margin-left: var(--tcl-flex-module__component--margin-inline-start);
}
[dir="rtl"] .tcl-flex-module__component {
margin-right: var(--tcl-flex-module__component--margin-inline-start);
}
[dir="ltr"] .tcl-flex-module__component {
padding-right: 0;
}
[dir="rtl"] .tcl-flex-module__component {
padding-left: 0;
}
[dir="ltr"] .tcl-flex-module__component {
padding-right: var(--tcl-flex-module__component--padding-inline-end);
}
[dir="rtl"] .tcl-flex-module__component {
padding-left: var(--tcl-flex-module__component--padding-inline-end);
}
[dir="ltr"] .tcl-flex-module__component {
padding-left: 0;
}
[dir="rtl"] .tcl-flex-module__component {
padding-right: 0;
}
[dir="ltr"] .tcl-flex-module__component {
padding-left: var(--tcl-flex-module__component--padding-inline-start);
}
[dir="rtl"] .tcl-flex-module__component {
padding-right: var(--tcl-flex-module__component--padding-inline-start);
}
.tcl-flex-module__component {
margin-bottom: 0;
margin-bottom: var(--tcl-flex-module__component--margin-block-end);
margin-top: 0;
margin-top: var(--tcl-flex-module__component--margin-block-start);
-webkit-margin-end: 0;
margin-inline-end: 0;
-webkit-margin-end: var(--tcl-flex-module__component--margin-inline-end);
margin-inline-end: var(--tcl-flex-module__component--margin-inline-end);
-webkit-margin-start: 0;
margin-inline-start: 0;
-webkit-margin-start: var(--tcl-flex-module__component--margin-inline-start);
margin-inline-start: var(--tcl-flex-module__component--margin-inline-start);
max-width: 100%;
overflow-wrap: break-word;
padding-bottom: 0;
padding-bottom: var(--tcl-flex-module__component--padding-block-end);
padding-top: 0;
padding-top: var(--tcl-flex-module__component--padding-block-start);
-webkit-padding-end: 0;
padding-inline-end: 0;
-webkit-padding-end: var(--tcl-flex-module__component--padding-inline-end);
padding-inline-end: var(--tcl-flex-module__component--padding-inline-end);
-webkit-padding-start: 0;
padding-inline-start: 0;
-webkit-padding-start: var(
--tcl-flex-module__component--padding-inline-start
);
padding-inline-start: var(--tcl-flex-module__component--padding-inline-start);
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
}
.tcl-flex-module__component--full-width {
width: 100%;
}
.tcl-flex-module__component:has(.tcl-react-media) {
height: 100%;
overflow: hidden;
width: 100%;
}
@media (max-width: 1199px) {
.tcl-flex-module__content {
--tcl-flex-module__grid-template--rows: 48;
--tcl-flex-module__grid-template--cols: 32;
}
}
@media (orientation: landscape) and (max-width: 1200px) and (max-height: 600px) {
.tcl-flex-module__content {
--tcl-flex-module__grid-template--rows: 16;
--tcl-flex-module__grid-template--cols: 48;
}
}
@media (max-width: 599px) {
.tcl-flex-module__content {
--tcl-flex-module__grid-template--rows: 48;
--tcl-flex-module__grid-template--cols: 16;
}
}
.tcl-flex-module-carousel {
height: 100%;
width: 100%;
}
.tcl-flex-module-carousel .tcl-flex-module-carousel__slides {
height: 100%;
width: 100%;
position: relative;
}
.tcl-flex-module-carousel__slides [class*="tcl-flex-module-carousel__slide"] {
justify-items: center;
opacity: 0;
-webkit-transition: opacity 1s ease-out, visibility 1s ease-out;
transition: opacity 1s ease-out, visibility 1s ease-out;
visibility: hidden;
}
.tcl-flex-module-carousel__slide {
height: 100%;
width: 100%;
position: absolute;
}
.tcl-flex-module-carousel__slides .tcl-flex-module-carousel__slide--active {
opacity: 1;
visibility: visible;
}
.tcl-flex-module-stacked-carousel .tcl-carousel__nav-button {
top: 50%;
}
:root {
--tcl-dynamic-section--width: 100%;
--tcl-dynamic-section--height: 100%;
--tcl-dynamic-section--max-width: 100%;
--tcl-dynamic-section--max-height: 100%;
--tcl-dynamic-section--padding-inline-start: 0px;
--tcl-dynamic-section--padding-inline-end: 0px;
--tcl-dynamic-section--padding-block-start: 0px;
--tcl-dynamic-section--padding-block-end: 0px;
}
.tcl-dynamic-section__container {
background: transparent;
background: var(--tcl-dynamic-section--background-color, transparent);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: relative;
width: 100%;
}
.tcl-dynamic-section__container:has(.tcl-dynamic-section--rounded-corners) {
border-radius: var(--tcl-border-radius);
}
[dir="ltr"] .tcl-dynamic-section {
padding-right: 0;
}
[dir="rtl"] .tcl-dynamic-section {
padding-left: 0;
}
[dir="ltr"] .tcl-dynamic-section {
padding-right: var(--tcl-dynamic-section--padding-inline-end);
}
[dir="rtl"] .tcl-dynamic-section {
padding-left: var(--tcl-dynamic-section--padding-inline-end);
}
[dir="ltr"] .tcl-dynamic-section {
padding-left: 0;
}
[dir="rtl"] .tcl-dynamic-section {
padding-right: 0;
}
[dir="ltr"] .tcl-dynamic-section {
padding-left: var(--tcl-dynamic-section--padding-inline-start);
}
[dir="rtl"] .tcl-dynamic-section {
padding-right: var(--tcl-dynamic-section--padding-inline-start);
}
.tcl-dynamic-section {
height: var(--tcl-dynamic-section--height);
height: var(
--tcl-dynamic-section--view-height,
var(--tcl-dynamic-section--height)
);
width: 100%;
width: var(--tcl-dynamic-section--width);
max-height: 100%;
max-height: var(--tcl-dynamic-section--max-height);
max-width: 100%;
max-width: var(--tcl-dynamic-section--max-width);
padding-bottom: 0;
padding-bottom: var(--tcl-dynamic-section--padding-block-end);
padding-top: 0;
padding-top: var(--tcl-dynamic-section--padding-block-start);
-webkit-padding-end: 0;
padding-inline-end: 0;
-webkit-padding-end: var(--tcl-dynamic-section--padding-inline-end);
padding-inline-end: var(--tcl-dynamic-section--padding-inline-end);
-webkit-padding-start: 0;
padding-inline-start: 0;
-webkit-padding-start: var(--tcl-dynamic-section--padding-inline-start);
padding-inline-start: var(--tcl-dynamic-section--padding-inline-start);
position: relative;
}
.tcl-dynamic-section.tcl-dynamic-section--block-size--viewport {
height: 100%;
height: var(
--tcl-dynamic-section--view-height,
calc(
var(--tcl-dynamic-section--height) - var(--tcl-bottom-banner-height, 0px) -
var(--tcl-top-banner-height, 0px)
)
);
}
.tcl-logo {
width: var(--tcl-logo-max-inline-size);
max-width: 100svw;
}
.tcl-logo .tds-icon {
height: 100%;
width: 100%;
}
.tds-icon-logo-we-robot-alt {
--tds-icon--color-stop-1: var(--tds-color-white);
--tds-icon--color-stop-2: #cd8e40;
}
.tcl-logo-size--xxxs {
--tcl-logo-max-inline-size: 160px;
}
.tcl-logo-size--xxs {
--tcl-logo-max-inline-size: 208px;
}
.tcl-logo-size--xs {
--tcl-logo-max-inline-size: 240px;
}
.tcl-logo-size--sm {
--tcl-logo-max-inline-size: 252px;
}
.tcl-logo-size--md {
--tcl-logo-max-inline-size: 312px;
}
.tcl-logo-size--lg {
--tcl-logo-max-inline-size: 324px;
}
.tcl-logo-size--xl {
--tcl-logo-max-inline-size: 343px;
}
.tcl-logo-size--xl-plus {
--tcl-logo-max-inline-size: 400px;
}
.tcl-logo-size--xxl {
--tcl-logo-max-inline-size: 432px;
}
.tcl-logo-size--xxxl {
--tcl-logo-max-inline-size: 560px;
}
.tcl-text-line {
max-width: unset;
padding: 0;
}
.tcl-text-line a.tds-link {
color: inherit;
}
.tcl-text-line [data-entity="dynamic-content-copy"],
.tcl-text-line [data-entity="dynamic-pricing-copy"] {
display: none;
}
.tcl-text-line [data-entity="dynamic-pricing-copy"][data-copy="price"] {
display: inline;
}
@media (hover: hover) {
.tcl-text-line a.tds-link:hover {
color: inherit;
}
}
: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
) {
padding-top: 0;
}
:root {
--tcl-badge--line-gap: 0;
--tcl-badge--max-inline-size: calc(var(--tds-size-base) * 40);
}
@media (max-width: 599px) {
:root {
--tcl-badge--max-inline-size: calc(var(--tds-size-base) * 35);
}
}
.tcl-badge {
height: -moz-fit-content;
height: -webkit-fit-content;
height: fit-content;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
gap: 0;
gap: var(--tcl-badge--line-gap);
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
}
.tcl-badge__top-line {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: var(--tds-size-half);
}
.tcl-badge__line {
max-width: calc(var(--tds-size-base) * 40);
max-width: var(--tcl-badge--max-inline-size);
}
.tcl-badge--equal-inline-size .tcl-badge {
-ms-flex-preferred-size: 0px;
flex-basis: 0px;
}
.tcl-badge--no-max-inline-size .tcl-badge {
--tcl-badge--max-inline-size: none;
}
:root {
--tcl-badge-group--gap: 0px;
--tcl-badge-group--max-inline-size: unset;
}
.tcl-badge-group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 0;
gap: var(--tcl-badge-group--gap);
width: 100%;
max-width: unset;
max-width: var(--tcl-badge-group--max-inline-size);
min-height: -moz-fit-content;
min-height: -webkit-fit-content;
min-height: fit-content;
}
.tcl-badge-group .tcl-badge__top-line .tcl-badge__block .tcl-text-line {
width: -moz-max-content;
width: -webkit-max-content;
width: max-content;
}
.tcl-badge-group__separator {
background: var(--tds-theme-border);
height: 100%;
-ms-flex-negative: 0;
flex-shrink: 0;
width: 1px;
}
.tcl-badge-group--horizontal {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.tcl-badge-group__badge-with-separator {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 0;
gap: var(--tcl-badge-group--gap);
}
.tcl-badge-group--vertical {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
}
.tcl-badge-group--vertical .tcl-badge-group__separator {
background: -webkit-gradient(
linear,
left top,
right top,
from(rgba(208, 209, 210, 0)),
color-stop(29.74%, rgba(208, 209, 210, 0.7490196078431373)),
color-stop(69.54%, rgba(208, 209, 210, 0.7490196078431373)),
to(rgba(208, 209, 210, 0))
);
background: linear-gradient(
90deg,
rgba(208, 209, 210, 0),
rgba(208, 209, 210, 0.7490196078431373) 29.74%,
rgba(208, 209, 210, 0.7490196078431373) 69.54%,
rgba(208, 209, 210, 0)
);
height: 1px;
width: 100%;
}
.tcl-badge-group--vertical .tcl-badge-group__badge-with-separator {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
@media (max-width: 2040px) {
.tcl-badge-group--horizontal
.tcl-badge-group__badge-with-separator:nth-child(5) {
display: none;
}
}
@media (max-width: 1600px) {
.tcl-badge-group--horizontal
.tcl-badge-group__badge-with-separator:nth-child(4) {
display: none;
}
}
@media (max-width: 599px) {
.tcl-flex-module--tab_switch_slide .tcl-badge-group {
gap: 24px;
gap: var(--tds-size--3x);
}
}
:root {
--tcl-icon--inline-size: 24px;
--tcl-icon--block-size: 24px;
}
.tcl-icon {
height: 24px;
height: var(--tcl-icon--block-size);
width: 24px;
width: var(--tcl-icon--inline-size);
max-height: min(100%, 100svh);
max-width: min(100%, 100svw);
}
.tcl-icon .tds-icon {
height: 100%;
width: 100%;
}
.tds-tooltip-wrapper--inline:has(> .tcl-carousel__nav-button) {
position: unset;
}
.tcl-carousel__nav-button {
backdrop-filter: blur(4px);
background-color: hsla(0, 0%, 100%, 0.7490196078431373);
-webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25098039215686274);
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25098039215686274);
top: 40%;
position: absolute;
z-index: 2;
}
.tcl-carousel__nav-button .tds-icon {
color: var(--tds-color-black);
}
[dir="ltr"] .tcl-carousel__nav--inline-start {
left: var(--tds-size-6x);
}
[dir="rtl"] .tcl-carousel__nav--inline-start {
right: var(--tds-size-6x);
}
.tcl-carousel__nav--inline-start {
inset-inline-start: var(--tds-size-6x);
}
[dir="ltr"] .tcl-carousel__nav--inline-end {
right: var(--tds-size-6x);
}
[dir="rtl"] .tcl-carousel__nav--inline-end {
left: var(--tds-size-6x);
}
.tcl-carousel__nav--inline-end {
inset-inline-end: var(--tds-size-6x);
}
.tds-theme--replicant-v2 .tcl-carousel__nav-button {
background-color: var(--tds-color-black);
}
.tds-theme--replicant-v2 .tcl-carousel__nav-button .tds-icon {
color: #8e8e8e;
}
.tcl-carousel__tab-list {
--tds-tab--gap: var(--tds-size-1x);
}
.tcl-carousel__tab-list .tds-tab {
background-color: var(--tds-theme-foreground-high-contrast);
height: var(--tds-size-base-plus);
border-radius: var(--tcl-border-radius);
width: var(--tds-size-base-plus);
line-height: var(--tds-size-base-plus);
}
.tcl-carousel__tab-list .tds-tab[aria-selected="false"] {
opacity: 0.5;
}
.tcl-carousel__tab-switch.tcl-carousel__tab-switch {
--tds-tab--background-color-on: var(--tds-theme-background-dialog);
background-color: var(--tds-theme-background-container-alt);
height: 52px;
border-radius: var(--tcl-border-radius);
grid-template-columns: repeat(1, 1fr);
grid-template-columns: repeat(var(--tab-carousel__tab-count, 1), 1fr);
padding: 4px;
padding: var(--tds-size--half);
}
.tcl-carousel__tab-switch .tds--animated-backdrop,
.tcl-carousel__tab-switch .tds-tab {
height: 44px;
border-radius: 4px;
border-radius: var(--tds-border-radius--pill);
font-size: 17px;
font-weight: 500;
line-height: 20px;
padding-left: var(--tds-size-1x);
padding-right: var(--tds-size-1x);
padding-inline: var(--tds-size-1x);
}
@media (min-width: 1200px) {
.tcl-carousel__tab-switch .tds--animated-backdrop,
.tcl-carousel__tab-switch .tds-tab {
min-width: 199px;
}
}
@media (max-width: 1199px) {
.tcl-carousel__tab-switch .tds--animated-backdrop,
.tcl-carousel__tab-switch .tds-tab {
font-size: 14px;
font-weight: 500;
line-height: 20px;
}
}
:root {
--tcl-freeflow-carousel-container__slide--max-inline-size: 1356px;
--tcl-freeflow-carousel-container__slide--block-size: fit-content;
--tcl-freeflow-carousel__slide-media--block-size: 580px;
--tcl-freeflow-carousel-container__column-gap: var(--tds-size-3x);
--tcl-freeflow-carousel-container__slides--padding-inline: var(
--tcl-section--padding-inline
);
}
@media (max-width: 1199px) {
:root {
--tcl-freeflow-carousel-container__slide--max-inline-size: 606px;
--tcl-freeflow-carousel__slide-media--block-size: 404px;
--tcl-freeflow-carousel-container__column-gap: var(--tds-size-2x);
}
}
@media (max-width: 599px) {
:root {
--tcl-freeflow-carousel-container__slide--max-inline-size: 330px;
--tcl-freeflow-carousel__slide-media--block-size: 370px;
}
}
.tcl-freeflow-carousel {
overflow-x: scroll;
overflow-y: hidden;
-ms-scroll-snap-type: x mandatory;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.tcl-freeflow-carousel::-webkit-scrollbar {
display: none;
}
.tcl-freeflow-carousel__container {
max-width: 100svw;
position: relative;
}
.tcl-freeflow-carousel-container__slides {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: var(--tds-size-3x);
gap: var(--tcl-freeflow-carousel-container__column-gap);
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
margin-left: auto;
margin-right: auto;
margin-inline: auto;
padding-inline: var(--tcl-section--padding-inline);
padding-left: var(--tcl-freeflow-carousel-container__slides--padding-inline);
padding-right: var(--tcl-freeflow-carousel-container__slides--padding-inline);
padding-inline: var(
--tcl-freeflow-carousel-container__slides--padding-inline
);
}
@media (min-width: 1200px) {
.tcl-freeflow-carousel-container__slides {
--tcl-grid-col-width: calc(
(
min(100svw, var(--tcl-section--max-inline-size)) -
var(--tcl-section--padding-inline) * 2 - var(--tcl-grid-col-gap) *
11
) / var(--tcl-grid-cols)
);
--tcl-freeflow-carousel-container__slides--padding-inline: max(
calc(
var(--tcl-section--padding-inline) +
(var(--tcl-grid-col-width) + var(--tcl-grid-col-gap)) *
var(--tcl-freeflow-carousel-slides--column-start)
),
calc(
100svw / 2 - var(--tcl-section--max-inline-size) / 2 +
(var(--tcl-grid-col-width) + var(--tcl-grid-col-gap)) *
var(--tcl-freeflow-carousel-slides--column-start) +
var(--tcl-section--padding-inline)
)
);
--tcl-freeflow-carousel-container__slide--inline-size: min(
var(--tcl-freeflow-carousel-container__slide--max-inline-size),
calc(
100svw - var(--tcl-section--padding-inline) * 2 -
var(--tcl-grid-col-width) * 2 - var(--tcl-grid-col-gap) * 2
)
);
}
}
@media (max-width: 599px) {
.tcl-freeflow-carousel-container__slides {
--tcl-freeflow-carousel-container__slides--padding-inline: var(
--tds-size-base-plus
);
}
}
@media (min-width: 1200px) {
.tcl-freeflow-carousel--medium .tcl-freeflow-carousel-container__slides {
--tcl-freeflow-carousel-container__slide--max-inline-size: 800px;
--tcl-freeflow-carousel__slide-media--block-size: 580px;
}
}
@media (min-width: 1200px) {
.tcl-freeflow-carousel--compact .tcl-freeflow-carousel-container__slides {
--tcl-freeflow-carousel-container__slide--max-inline-size: 580px;
--tcl-freeflow-carousel__slide-media--block-size: 580px;
}
}
.tcl-freeflow-carousel-container__slide-container {
--tcl-freeflow-carousel-container__slide--inline-size: var(
--tcl-freeflow-carousel-container__slide--max-inline-size
);
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
height: var(--tcl-freeflow-carousel-container__slide--block-size);
cursor: pointer;
width: var(--tcl-freeflow-carousel-container__slide--inline-size);
scroll-margin-inline-start: calc(
50svw - var(--tcl-freeflow-carousel-container__slide--inline-size) / 2
);
scroll-snap-align: start;
}
@media (min-width: 1199px) {
.tcl-freeflow-carousel-container__slide-container {
--tcl-freeflow-carousel-container__slide--inline-size: min(
var(--tcl-freeflow-carousel-container__slide--max-inline-size),
calc(
100svw - var(--tcl-section--padding-inline) * 2 -
var(--tcl-grid-col-width) * 2 - var(--tcl-grid-col-gap) * 2
)
);
}
}
.tcl-freeflow-carousel-container__slide-container--active {
cursor: unset;
}
@media (min-width: 2559px) {
.tcl-section--constrained
.tcl-dynamic-section:has(.tcl-freeflow-carousel-container__slides) {
padding-left: var(--tcl-section--padding-inline);
padding-right: var(--tcl-section--padding-inline);
padding-inline: var(--tcl-section--padding-inline);
}
.tcl-section--constrained
.tcl-freeflow-carousel
.tcl-freeflow-carousel-container__slides {
--tcl-freeflow-carousel-container__slides--padding-inline: 0;
}
.tcl-section--constrained
.tcl-freeflow-carousel
.tcl-freeflow-carousel-container__slide-container {
scroll-margin-inline-start: calc(
1280px - var(--tcl-section--padding-inline) -
var(--tcl-freeflow-carousel-container__slide--inline-size) / 2
);
}
}
.tcl-freeflow-carousel__tab-list {
margin-top: var(--tds-size-3x);
}
@media (max-width: 1199px) {
.tcl-freeflow-carousel__tab-list {
margin-top: var(--tds-size-2x);
}
}
.tds-theme--replicant-v2 .tcl-freeflow-carousel__container {
--tcl-freeflow-carousel__column-gap: var(--tds-size-2x);
background-position: 50%;
padding-top: var(--tds-size-8x);
padding-bottom: var(--tds-size-8x);
padding-block: var(--tds-size-8x);
}
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide-content {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding-top: 0;
padding-left: 0;
padding-right: 0;
padding-inline: 0;
}
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide-heading {
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: var(--tds-size-1x);
}
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide-heading1 {
color: #c7c7c7;
font-size: var(--tds-font-size-75);
line-height: var(--tds-size-5x);
}
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide-heading1
> sup {
top: -20px;
}
[dir="ltr"]
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide-heading2 {
padding-left: 0;
}
[dir="rtl"]
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide-heading2 {
padding-right: 0;
}
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide-heading2 {
color: #c7c7c7;
font-size: var(--tds-font-size-50);
line-height: var(--tds-line-height-40);
-webkit-padding-start: 0;
padding-inline-start: 0;
}
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide-heading2
> sup {
top: -12px;
}
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide-description {
color: var(--tds-color-ct-body);
font-size: var(--tds-font-size-30);
font-weight: var(--tds-font-weight-medium);
line-height: var(--tds-line-height-30);
padding: 0;
}
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide-description
> sup {
top: -4px;
}
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide,
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide--spacer {
margin-left: 0;
margin-right: 0;
margin-inline: 0;
}
@media (max-width: 599px) {
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide {
gap: var(--tds-size-base-plus);
}
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide-heading {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: var(--tds-size-half);
padding-bottom: var(--tds-size-half);
}
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide-heading1 {
font-size: var(--tds-font-size-70);
line-height: 34px;
}
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide-heading1
> sup {
top: -15px;
}
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide-heading2 {
font-size: var(--tds-size-3x);
font-weight: var(--tds-font-weight-medium);
line-height: var(--tds-line-height-60);
}
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide-heading2
> sup {
top: -12px;
}
}
.tcl-info-card {
height: 100%;
border-radius: var(--tcl-border-radius);
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
padding-left: 24px;
padding-right: 24px;
padding-inline: 24px;
padding-left: var(--tds-size--3x);
padding-right: var(--tds-size--3x);
padding-inline: var(--tds-size--3x);
}
@media (max-width: 599px) {
.tcl-info-card {
padding-left: 12px;
padding-right: 12px;
padding-inline: 12px;
}
}
.tcl-info-card--filled {
background-color: var(--tds-theme-background-container);
}
.tcl-info-card--bordered {
border: 1px solid rgba(0, 0, 0, 0.2);
}
.tcl-info-card--transparent {
padding-left: 0;
padding-right: 0;
padding-inline: 0;
}
@media (max-width: 1199px) {
.tcl-info-card--transparent {
padding-left: 12px;
padding-right: 12px;
padding-inline: 12px;
}
}
.tcl-info-card__content {
height: -moz-fit-content;
height: -webkit-fit-content;
height: fit-content;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
padding-top: var(--tds-size-4x);
padding-bottom: var(--tds-size-6x);
padding-block: var(--tds-size-4x) var(--tds-size-6x);
}
@media (max-width: 1199px) {
.tcl-info-card__content {
padding-top: var(--tds-size-3x);
padding-bottom: var(--tds-size-5x);
padding-block: var(--tds-size-3x) var(--tds-size-5x);
}
}
.tcl-info-card--transparent .tcl-info-card__content {
padding-top: 0;
padding-bottom: 0;
padding-block: 0;
}
.tcl-info-card .tcl-info-card__icon {
margin-bottom: var(--tds-size-2x);
}
.tcl-info-card .tcl-info-card__eyebrow {
margin-bottom: 4px;
margin-bottom: var(--tds-size--half);
}
.tcl-info-card .tcl-info-card__description {
margin-top: var(--tds-size-1x);
}
.tcl-info-card-group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: var(--tds-size-base-plus) 24px;
gap: var(--tds-size-base-plus) var(--tds-size--3x);
}
@media (max-width: 1199px) {
.tcl-info-card-group {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
.tcl-info-card-group:has(.tcl-info-card--transparent) {
row-gap: 40px;
row-gap: var(--tds-size--5x);
}
.tcl-freeflow-carousel-container__slide-container .tcl-info-card-group {
height: max(
var(--tcl-freeflow-carousel-container__slide--resized-block-size),
100%
);
}
.tcl-text {
font-style: normal;
padding: 0;
}
.tcl-text--f72l72 {
font-size: 72px;
font-size: var(--tds-size--9x);
line-height: 72px;
line-height: var(--tds-size--9x);
}
.tcl-text--f64l64 {
font-size: 64px;
font-size: var(--tds-size--8x);
}
.tcl-text--f56l64,
.tcl-text--f64l64 {
line-height: 64px;
line-height: var(--tds-size--8x);
}
.tcl-text--f56l56,
.tcl-text--f56l64 {
font-size: 56px;
font-size: var(--tds-size--7x);
}
.tcl-text--f48l56,
.tcl-text--f56l56 {
line-height: 56px;
line-height: var(--tds-size--7x);
}
.tcl-text--f48l56 {
font-size: 48px;
font-size: var(--tds-size--6x);
}
.tcl-text--f22l30 {
font-size: 22px;
line-height: 30px;
}
.tcl-text--f17l24 {
font-size: var(--tds-font-size-40);
line-height: 24px;
line-height: var(--tds-size--3x);
}
.tcl-text--h0 {
font-size: 56px;
font-size: var(--tds-size--7x);
line-height: 56px;
line-height: var(--tds-size--7x);
}
.tcl-text--h1 {
font-size: var(--tds-font-size-80);
line-height: var(--tds-line-height-80);
}
.tcl-text--h1-alt {
font-size: var(--tds-font-size-75);
line-height: var(--tds-line-height-75);
}
.tcl-text--h2 {
font-size: var(--tds-font-size-70);
line-height: var(--tds-line-height-70);
}
.tcl-text--h3 {
font-size: var(--tds-font-size-60);
}
.tcl-text--h3,
.tcl-text--h4 {
line-height: var(--tds-line-height-60);
}
.tcl-text--h4 {
font-size: var(--tds-font-size-50);
}
.tcl-text--h5 {
font-size: var(--tds-font-size-40);
line-height: var(--tds-line-height-20);
}
.tcl-text--body,
.tcl-text--h6 {
font-size: var(--tds-font-size-30);
line-height: var(--tds-line-height-30);
}
.tcl-text--caption {
font-size: var(--tds-font-size-20);
line-height: var(--tds-line-height-10);
}
.tcl-text-family--display {
font-family: var(--tds-font-family-latin-display);
}
.tcl-text-family--text {
font-family: var(--tds-font-family-latin-text);
}
.tcl-font-weight--200 {
font-weight: 200;
}
.tcl-font-style--italic {
font-style: italic;
}
.tcl-text-decoration--strikethrough {
text-decoration: line-through;
}
.tcl-color-theme-foreground {
color: var(--tds-theme-foreground);
}
.tcl-color-theme-foreground-primary {
color: var(--tds-theme-foreground-primary);
}
.tcl-color-theme-foreground-high-contrast {
color: var(--tds-theme-foreground-high-contrast);
}
.tcl-color-theme-foreground-low-contrast {
color: var(--tds-theme-foreground-low-contrast);
}
.tcl-color-theme-foreground-on-primary {
color: var(--tds-theme-foreground-on-primary);
}
.tcl-color-theme-background {
color: var(--tds-theme-background);
}
.tcl-color-white {
color: #fff;
color: var(--tds-color--white);
}
.tcl-color-black {
color: #000;
color: var(--tds-color--black);
}
.tcl-column-start--0 {
grid-column-start: 1;
}
.tcl-column-start--1 {
grid-column-start: 2;
}
.tcl-column-start--2 {
grid-column-start: 3;
}
.tcl-column-start--3 {
grid-column-start: 4;
}
.tcl-column-start--4 {
grid-column-start: 5;
}
.tcl-column-start--5 {
grid-column-start: 6;
}
.tcl-column-start--6 {
grid-column-start: 7;
}
.tcl-column-start--7 {
grid-column-start: 8;
}
.tcl-column-start--8 {
grid-column-start: 9;
}
.tcl-column-start--9 {
grid-column-start: 10;
}
.tcl-column-start--10 {
grid-column-start: 11;
}
.tcl-column-start--11 {
grid-column-start: 12;
}
.tcl-column-start--12 {
grid-column-start: 13;
}
.tcl-column-start--13 {
grid-column-start: 14;
}
.tcl-column-start--14 {
grid-column-start: 15;
}
.tcl-column-start--15 {
grid-column-start: 16;
}
.tcl-column-start--16 {
grid-column-start: 17;
}
.tcl-column-start--17 {
grid-column-start: 18;
}
.tcl-column-start--18 {
grid-column-start: 19;
}
.tcl-column-start--19 {
grid-column-start: 20;
}
.tcl-column-start--20 {
grid-column-start: 21;
}
.tcl-column-start--21 {
grid-column-start: 22;
}
.tcl-column-start--22 {
grid-column-start: 23;
}
.tcl-column-start--23 {
grid-column-start: 24;
}
.tcl-column-start--24 {
grid-column-start: 25;
}
.tcl-column-start--25 {
grid-column-start: 26;
}
.tcl-column-start--26 {
grid-column-start: 27;
}
.tcl-column-start--27 {
grid-column-start: 28;
}
.tcl-column-start--28 {
grid-column-start: 29;
}
.tcl-column-start--29 {
grid-column-start: 30;
}
.tcl-column-start--30 {
grid-column-start: 31;
}
.tcl-column-start--31 {
grid-column-start: 32;
}
.tcl-column-start--32 {
grid-column-start: 33;
}
.tcl-column-start--33 {
grid-column-start: 34;
}
.tcl-column-start--34 {
grid-column-start: 35;
}
.tcl-column-start--35 {
grid-column-start: 36;
}
.tcl-column-start--36 {
grid-column-start: 37;
}
.tcl-column-start--37 {
grid-column-start: 38;
}
.tcl-column-start--38 {
grid-column-start: 39;
}
.tcl-column-start--39 {
grid-column-start: 40;
}
.tcl-column-start--40 {
grid-column-start: 41;
}
.tcl-column-start--41 {
grid-column-start: 42;
}
.tcl-column-start--42 {
grid-column-start: 43;
}
.tcl-column-start--43 {
grid-column-start: 44;
}
.tcl-column-start--44 {
grid-column-start: 45;
}
.tcl-column-start--45 {
grid-column-start: 46;
}
.tcl-column-start--46 {
grid-column-start: 47;
}
.tcl-column-start--47 {
grid-column-start: 48;
}
.tcl-column-start--48 {
grid-column-start: 49;
}
.tcl-column-start--negative-0 {
grid-column-start: -1;
}
.tcl-column-start--negative-1 {
grid-column-start: -2;
}
.tcl-column-start--negative-2 {
grid-column-start: -3;
}
.tcl-column-start--negative-3 {
grid-column-start: -4;
}
.tcl-column-start--negative-4 {
grid-column-start: -5;
}
.tcl-column-start--negative-5 {
grid-column-start: -6;
}
.tcl-column-start--negative-6 {
grid-column-start: -7;
}
.tcl-column-start--negative-7 {
grid-column-start: -8;
}
.tcl-column-start--negative-8 {
grid-column-start: -9;
}
.tcl-column-start--negative-9 {
grid-column-start: -10;
}
.tcl-column-start--negative-10 {
grid-column-start: -11;
}
.tcl-column-start--negative-11 {
grid-column-start: -12;
}
.tcl-column-start--negative-12 {
grid-column-start: -13;
}
.tcl-column-start--negative-13 {
grid-column-start: -14;
}
.tcl-column-start--negative-14 {
grid-column-start: -15;
}
.tcl-column-start--negative-15 {
grid-column-start: -16;
}
.tcl-column-start--negative-16 {
grid-column-start: -17;
}
.tcl-column-start--negative-17 {
grid-column-start: -18;
}
.tcl-column-start--negative-18 {
grid-column-start: -19;
}
.tcl-column-start--negative-19 {
grid-column-start: -20;
}
.tcl-column-start--negative-20 {
grid-column-start: -21;
}
.tcl-column-start--negative-21 {
grid-column-start: -22;
}
.tcl-column-start--negative-22 {
grid-column-start: -23;
}
.tcl-column-start--negative-23 {
grid-column-start: -24;
}
.tcl-column-start--negative-24 {
grid-column-start: -25;
}
.tcl-column-start--negative-25 {
grid-column-start: -26;
}
.tcl-column-start--negative-26 {
grid-column-start: -27;
}
.tcl-column-start--negative-27 {
grid-column-start: -28;
}
.tcl-column-start--negative-28 {
grid-column-start: -29;
}
.tcl-column-start--negative-29 {
grid-column-start: -30;
}
.tcl-column-start--negative-30 {
grid-column-start: -31;
}
.tcl-column-start--negative-31 {
grid-column-start: -32;
}
.tcl-column-start--negative-32 {
grid-column-start: -33;
}
.tcl-column-start--negative-33 {
grid-column-start: -34;
}
.tcl-column-start--negative-34 {
grid-column-start: -35;
}
.tcl-column-start--negative-35 {
grid-column-start: -36;
}
.tcl-column-start--negative-36 {
grid-column-start: -37;
}
.tcl-column-start--negative-37 {
grid-column-start: -38;
}
.tcl-column-start--negative-38 {
grid-column-start: -39;
}
.tcl-column-start--negative-39 {
grid-column-start: -40;
}
.tcl-column-start--negative-40 {
grid-column-start: -41;
}
.tcl-column-start--negative-41 {
grid-column-start: -42;
}
.tcl-column-start--negative-42 {
grid-column-start: -43;
}
.tcl-column-start--negative-43 {
grid-column-start: -44;
}
.tcl-column-start--negative-44 {
grid-column-start: -45;
}
.tcl-column-start--negative-45 {
grid-column-start: -46;
}
.tcl-column-start--negative-46 {
grid-column-start: -47;
}
.tcl-column-start--negative-47 {
grid-column-start: -48;
}
.tcl-column-start--negative-48 {
grid-column-start: -49;
}
.tcl-column-end--0 {
grid-column-end: 1;
}
.tcl-column-end--1 {
grid-column-end: 2;
}
.tcl-column-end--2 {
grid-column-end: 3;
}
.tcl-column-end--3 {
grid-column-end: 4;
}
.tcl-column-end--4 {
grid-column-end: 5;
}
.tcl-column-end--5 {
grid-column-end: 6;
}
.tcl-column-end--6 {
grid-column-end: 7;
}
.tcl-column-end--7 {
grid-column-end: 8;
}
.tcl-column-end--8 {
grid-column-end: 9;
}
.tcl-column-end--9 {
grid-column-end: 10;
}
.tcl-column-end--10 {
grid-column-end: 11;
}
.tcl-column-end--11 {
grid-column-end: 12;
}
.tcl-column-end--12 {
grid-column-end: 13;
}
.tcl-column-end--13 {
grid-column-end: 14;
}
.tcl-column-end--14 {
grid-column-end: 15;
}
.tcl-column-end--15 {
grid-column-end: 16;
}
.tcl-column-end--16 {
grid-column-end: 17;
}
.tcl-column-end--17 {
grid-column-end: 18;
}
.tcl-column-end--18 {
grid-column-end: 19;
}
.tcl-column-end--19 {
grid-column-end: 20;
}
.tcl-column-end--20 {
grid-column-end: 21;
}
.tcl-column-end--21 {
grid-column-end: 22;
}
.tcl-column-end--22 {
grid-column-end: 23;
}
.tcl-column-end--23 {
grid-column-end: 24;
}
.tcl-column-end--24 {
grid-column-end: 25;
}
.tcl-column-end--25 {
grid-column-end: 26;
}
.tcl-column-end--26 {
grid-column-end: 27;
}
.tcl-column-end--27 {
grid-column-end: 28;
}
.tcl-column-end--28 {
grid-column-end: 29;
}
.tcl-column-end--29 {
grid-column-end: 30;
}
.tcl-column-end--30 {
grid-column-end: 31;
}
.tcl-column-end--31 {
grid-column-end: 32;
}
.tcl-column-end--32 {
grid-column-end: 33;
}
.tcl-column-end--33 {
grid-column-end: 34;
}
.tcl-column-end--34 {
grid-column-end: 35;
}
.tcl-column-end--35 {
grid-column-end: 36;
}
.tcl-column-end--36 {
grid-column-end: 37;
}
.tcl-column-end--37 {
grid-column-end: 38;
}
.tcl-column-end--38 {
grid-column-end: 39;
}
.tcl-column-end--39 {
grid-column-end: 40;
}
.tcl-column-end--40 {
grid-column-end: 41;
}
.tcl-column-end--41 {
grid-column-end: 42;
}
.tcl-column-end--42 {
grid-column-end: 43;
}
.tcl-column-end--43 {
grid-column-end: 44;
}
.tcl-column-end--44 {
grid-column-end: 45;
}
.tcl-column-end--45 {
grid-column-end: 46;
}
.tcl-column-end--46 {
grid-column-end: 47;
}
.tcl-column-end--47 {
grid-column-end: 48;
}
.tcl-column-end--48 {
grid-column-end: 49;
}
.tcl-column-end--negative-0 {
grid-column-end: -1;
}
.tcl-column-end--negative-1 {
grid-column-end: -2;
}
.tcl-column-end--negative-2 {
grid-column-end: -3;
}
.tcl-column-end--negative-3 {
grid-column-end: -4;
}
.tcl-column-end--negative-4 {
grid-column-end: -5;
}
.tcl-column-end--negative-5 {
grid-column-end: -6;
}
.tcl-column-end--negative-6 {
grid-column-end: -7;
}
.tcl-column-end--negative-7 {
grid-column-end: -8;
}
.tcl-column-end--negative-8 {
grid-column-end: -9;
}
.tcl-column-end--negative-9 {
grid-column-end: -10;
}
.tcl-column-end--negative-10 {
grid-column-end: -11;
}
.tcl-column-end--negative-11 {
grid-column-end: -12;
}
.tcl-column-end--negative-12 {
grid-column-end: -13;
}
.tcl-column-end--negative-13 {
grid-column-end: -14;
}
.tcl-column-end--negative-14 {
grid-column-end: -15;
}
.tcl-column-end--negative-15 {
grid-column-end: -16;
}
.tcl-column-end--negative-16 {
grid-column-end: -17;
}
.tcl-column-end--negative-17 {
grid-column-end: -18;
}
.tcl-column-end--negative-18 {
grid-column-end: -19;
}
.tcl-column-end--negative-19 {
grid-column-end: -20;
}
.tcl-column-end--negative-20 {
grid-column-end: -21;
}
.tcl-column-end--negative-21 {
grid-column-end: -22;
}
.tcl-column-end--negative-22 {
grid-column-end: -23;
}
.tcl-column-end--negative-23 {
grid-column-end: -24;
}
.tcl-column-end--negative-24 {
grid-column-end: -25;
}
.tcl-column-end--negative-25 {
grid-column-end: -26;
}
.tcl-column-end--negative-26 {
grid-column-end: -27;
}
.tcl-column-end--negative-27 {
grid-column-end: -28;
}
.tcl-column-end--negative-28 {
grid-column-end: -29;
}
.tcl-column-end--negative-29 {
grid-column-end: -30;
}
.tcl-column-end--negative-30 {
grid-column-end: -31;
}
.tcl-column-end--negative-31 {
grid-column-end: -32;
}
.tcl-column-end--negative-32 {
grid-column-end: -33;
}
.tcl-column-end--negative-33 {
grid-column-end: -34;
}
.tcl-column-end--negative-34 {
grid-column-end: -35;
}
.tcl-column-end--negative-35 {
grid-column-end: -36;
}
.tcl-column-end--negative-36 {
grid-column-end: -37;
}
.tcl-column-end--negative-37 {
grid-column-end: -38;
}
.tcl-column-end--negative-38 {
grid-column-end: -39;
}
.tcl-column-end--negative-39 {
grid-column-end: -40;
}
.tcl-column-end--negative-40 {
grid-column-end: -41;
}
.tcl-column-end--negative-41 {
grid-column-end: -42;
}
.tcl-column-end--negative-42 {
grid-column-end: -43;
}
.tcl-column-end--negative-43 {
grid-column-end: -44;
}
.tcl-column-end--negative-44 {
grid-column-end: -45;
}
.tcl-column-end--negative-45 {
grid-column-end: -46;
}
.tcl-column-end--negative-46 {
grid-column-end: -47;
}
.tcl-column-end--negative-47 {
grid-column-end: -48;
}
.tcl-column-end--negative-48 {
grid-column-end: -49;
}
.tcl-row-start--0 {
grid-row-start: 1;
}
.tcl-row-start--1 {
grid-row-start: 2;
}
.tcl-row-start--2 {
grid-row-start: 3;
}
.tcl-row-start--3 {
grid-row-start: 4;
}
.tcl-row-start--4 {
grid-row-start: 5;
}
.tcl-row-start--5 {
grid-row-start: 6;
}
.tcl-row-start--6 {
grid-row-start: 7;
}
.tcl-row-start--7 {
grid-row-start: 8;
}
.tcl-row-start--8 {
grid-row-start: 9;
}
.tcl-row-start--9 {
grid-row-start: 10;
}
.tcl-row-start--10 {
grid-row-start: 11;
}
.tcl-row-start--11 {
grid-row-start: 12;
}
.tcl-row-start--12 {
grid-row-start: 13;
}
.tcl-row-start--13 {
grid-row-start: 14;
}
.tcl-row-start--14 {
grid-row-start: 15;
}
.tcl-row-start--15 {
grid-row-start: 16;
}
.tcl-row-start--16 {
grid-row-start: 17;
}
.tcl-row-start--17 {
grid-row-start: 18;
}
.tcl-row-start--18 {
grid-row-start: 19;
}
.tcl-row-start--19 {
grid-row-start: 20;
}
.tcl-row-start--20 {
grid-row-start: 21;
}
.tcl-row-start--21 {
grid-row-start: 22;
}
.tcl-row-start--22 {
grid-row-start: 23;
}
.tcl-row-start--23 {
grid-row-start: 24;
}
.tcl-row-start--24 {
grid-row-start: 25;
}
.tcl-row-start--25 {
grid-row-start: 26;
}
.tcl-row-start--26 {
grid-row-start: 27;
}
.tcl-row-start--27 {
grid-row-start: 28;
}
.tcl-row-start--28 {
grid-row-start: 29;
}
.tcl-row-start--29 {
grid-row-start: 30;
}
.tcl-row-start--30 {
grid-row-start: 31;
}
.tcl-row-start--31 {
grid-row-start: 32;
}
.tcl-row-start--32 {
grid-row-start: 33;
}
.tcl-row-start--33 {
grid-row-start: 34;
}
.tcl-row-start--34 {
grid-row-start: 35;
}
.tcl-row-start--35 {
grid-row-start: 36;
}
.tcl-row-start--36 {
grid-row-start: 37;
}
.tcl-row-start--37 {
grid-row-start: 38;
}
.tcl-row-start--38 {
grid-row-start: 39;
}
.tcl-row-start--39 {
grid-row-start: 40;
}
.tcl-row-start--40 {
grid-row-start: 41;
}
.tcl-row-start--41 {
grid-row-start: 42;
}
.tcl-row-start--42 {
grid-row-start: 43;
}
.tcl-row-start--43 {
grid-row-start: 44;
}
.tcl-row-start--44 {
grid-row-start: 45;
}
.tcl-row-start--45 {
grid-row-start: 46;
}
.tcl-row-start--46 {
grid-row-start: 47;
}
.tcl-row-start--47 {
grid-row-start: 48;
}
.tcl-row-start--48 {
grid-row-start: 49;
}
.tcl-row-start--negative-0 {
grid-row-start: -1;
}
.tcl-row-start--negative-1 {
grid-row-start: -2;
}
.tcl-row-start--negative-2 {
grid-row-start: -3;
}
.tcl-row-start--negative-3 {
grid-row-start: -4;
}
.tcl-row-start--negative-4 {
grid-row-start: -5;
}
.tcl-row-start--negative-5 {
grid-row-start: -6;
}
.tcl-row-start--negative-6 {
grid-row-start: -7;
}
.tcl-row-start--negative-7 {
grid-row-start: -8;
}
.tcl-row-start--negative-8 {
grid-row-start: -9;
}
.tcl-row-start--negative-9 {
grid-row-start: -10;
}
.tcl-row-start--negative-10 {
grid-row-start: -11;
}
.tcl-row-start--negative-11 {
grid-row-start: -12;
}
.tcl-row-start--negative-12 {
grid-row-start: -13;
}
.tcl-row-start--negative-13 {
grid-row-start: -14;
}
.tcl-row-start--negative-14 {
grid-row-start: -15;
}
.tcl-row-start--negative-15 {
grid-row-start: -16;
}
.tcl-row-start--negative-16 {
grid-row-start: -17;
}
.tcl-row-start--negative-17 {
grid-row-start: -18;
}
.tcl-row-start--negative-18 {
grid-row-start: -19;
}
.tcl-row-start--negative-19 {
grid-row-start: -20;
}
.tcl-row-start--negative-20 {
grid-row-start: -21;
}
.tcl-row-start--negative-21 {
grid-row-start: -22;
}
.tcl-row-start--negative-22 {
grid-row-start: -23;
}
.tcl-row-start--negative-23 {
grid-row-start: -24;
}
.tcl-row-start--negative-24 {
grid-row-start: -25;
}
.tcl-row-start--negative-25 {
grid-row-start: -26;
}
.tcl-row-start--negative-26 {
grid-row-start: -27;
}
.tcl-row-start--negative-27 {
grid-row-start: -28;
}
.tcl-row-start--negative-28 {
grid-row-start: -29;
}
.tcl-row-start--negative-29 {
grid-row-start: -30;
}
.tcl-row-start--negative-30 {
grid-row-start: -31;
}
.tcl-row-start--negative-31 {
grid-row-start: -32;
}
.tcl-row-start--negative-32 {
grid-row-start: -33;
}
.tcl-row-start--negative-33 {
grid-row-start: -34;
}
.tcl-row-start--negative-34 {
grid-row-start: -35;
}
.tcl-row-start--negative-35 {
grid-row-start: -36;
}
.tcl-row-start--negative-36 {
grid-row-start: -37;
}
.tcl-row-start--negative-37 {
grid-row-start: -38;
}
.tcl-row-start--negative-38 {
grid-row-start: -39;
}
.tcl-row-start--negative-39 {
grid-row-start: -40;
}
.tcl-row-start--negative-40 {
grid-row-start: -41;
}
.tcl-row-start--negative-41 {
grid-row-start: -42;
}
.tcl-row-start--negative-42 {
grid-row-start: -43;
}
.tcl-row-start--negative-43 {
grid-row-start: -44;
}
.tcl-row-start--negative-44 {
grid-row-start: -45;
}
.tcl-row-start--negative-45 {
grid-row-start: -46;
}
.tcl-row-start--negative-46 {
grid-row-start: -47;
}
.tcl-row-start--negative-47 {
grid-row-start: -48;
}
.tcl-row-start--negative-48 {
grid-row-start: -49;
}
.tcl-row-end--0 {
grid-row-end: 1;
}
.tcl-row-end--1 {
grid-row-end: 2;
}
.tcl-row-end--2 {
grid-row-end: 3;
}
.tcl-row-end--3 {
grid-row-end: 4;
}
.tcl-row-end--4 {
grid-row-end: 5;
}
.tcl-row-end--5 {
grid-row-end: 6;
}
.tcl-row-end--6 {
grid-row-end: 7;
}
.tcl-row-end--7 {
grid-row-end: 8;
}
.tcl-row-end--8 {
grid-row-end: 9;
}
.tcl-row-end--9 {
grid-row-end: 10;
}
.tcl-row-end--10 {
grid-row-end: 11;
}
.tcl-row-end--11 {
grid-row-end: 12;
}
.tcl-row-end--12 {
grid-row-end: 13;
}
.tcl-row-end--13 {
grid-row-end: 14;
}
.tcl-row-end--14 {
grid-row-end: 15;
}
.tcl-row-end--15 {
grid-row-end: 16;
}
.tcl-row-end--16 {
grid-row-end: 17;
}
.tcl-row-end--17 {
grid-row-end: 18;
}
.tcl-row-end--18 {
grid-row-end: 19;
}
.tcl-row-end--19 {
grid-row-end: 20;
}
.tcl-row-end--20 {
grid-row-end: 21;
}
.tcl-row-end--21 {
grid-row-end: 22;
}
.tcl-row-end--22 {
grid-row-end: 23;
}
.tcl-row-end--23 {
grid-row-end: 24;
}
.tcl-row-end--24 {
grid-row-end: 25;
}
.tcl-row-end--25 {
grid-row-end: 26;
}
.tcl-row-end--26 {
grid-row-end: 27;
}
.tcl-row-end--27 {
grid-row-end: 28;
}
.tcl-row-end--28 {
grid-row-end: 29;
}
.tcl-row-end--29 {
grid-row-end: 30;
}
.tcl-row-end--30 {
grid-row-end: 31;
}
.tcl-row-end--31 {
grid-row-end: 32;
}
.tcl-row-end--32 {
grid-row-end: 33;
}
.tcl-row-end--33 {
grid-row-end: 34;
}
.tcl-row-end--34 {
grid-row-end: 35;
}
.tcl-row-end--35 {
grid-row-end: 36;
}
.tcl-row-end--36 {
grid-row-end: 37;
}
.tcl-row-end--37 {
grid-row-end: 38;
}
.tcl-row-end--38 {
grid-row-end: 39;
}
.tcl-row-end--39 {
grid-row-end: 40;
}
.tcl-row-end--40 {
grid-row-end: 41;
}
.tcl-row-end--41 {
grid-row-end: 42;
}
.tcl-row-end--42 {
grid-row-end: 43;
}
.tcl-row-end--43 {
grid-row-end: 44;
}
.tcl-row-end--44 {
grid-row-end: 45;
}
.tcl-row-end--45 {
grid-row-end: 46;
}
.tcl-row-end--46 {
grid-row-end: 47;
}
.tcl-row-end--47 {
grid-row-end: 48;
}
.tcl-row-end--48 {
grid-row-end: 49;
}
.tcl-row-end--negative-0 {
grid-row-end: -1;
}
.tcl-row-end--negative-1 {
grid-row-end: -2;
}
.tcl-row-end--negative-2 {
grid-row-end: -3;
}
.tcl-row-end--negative-3 {
grid-row-end: -4;
}
.tcl-row-end--negative-4 {
grid-row-end: -5;
}
.tcl-row-end--negative-5 {
grid-row-end: -6;
}
.tcl-row-end--negative-6 {
grid-row-end: -7;
}
.tcl-row-end--negative-7 {
grid-row-end: -8;
}
.tcl-row-end--negative-8 {
grid-row-end: -9;
}
.tcl-row-end--negative-9 {
grid-row-end: -10;
}
.tcl-row-end--negative-10 {
grid-row-end: -11;
}
.tcl-row-end--negative-11 {
grid-row-end: -12;
}
.tcl-row-end--negative-12 {
grid-row-end: -13;
}
.tcl-row-end--negative-13 {
grid-row-end: -14;
}
.tcl-row-end--negative-14 {
grid-row-end: -15;
}
.tcl-row-end--negative-15 {
grid-row-end: -16;
}
.tcl-row-end--negative-16 {
grid-row-end: -17;
}
.tcl-row-end--negative-17 {
grid-row-end: -18;
}
.tcl-row-end--negative-18 {
grid-row-end: -19;
}
.tcl-row-end--negative-19 {
grid-row-end: -20;
}
.tcl-row-end--negative-20 {
grid-row-end: -21;
}
.tcl-row-end--negative-21 {
grid-row-end: -22;
}
.tcl-row-end--negative-22 {
grid-row-end: -23;
}
.tcl-row-end--negative-23 {
grid-row-end: -24;
}
.tcl-row-end--negative-24 {
grid-row-end: -25;
}
.tcl-row-end--negative-25 {
grid-row-end: -26;
}
.tcl-row-end--negative-26 {
grid-row-end: -27;
}
.tcl-row-end--negative-27 {
grid-row-end: -28;
}
.tcl-row-end--negative-28 {
grid-row-end: -29;
}
.tcl-row-end--negative-29 {
grid-row-end: -30;
}
.tcl-row-end--negative-30 {
grid-row-end: -31;
}
.tcl-row-end--negative-31 {
grid-row-end: -32;
}
.tcl-row-end--negative-32 {
grid-row-end: -33;
}
.tcl-row-end--negative-33 {
grid-row-end: -34;
}
.tcl-row-end--negative-34 {
grid-row-end: -35;
}
.tcl-row-end--negative-35 {
grid-row-end: -36;
}
.tcl-row-end--negative-36 {
grid-row-end: -37;
}
.tcl-row-end--negative-37 {
grid-row-end: -38;
}
.tcl-row-end--negative-38 {
grid-row-end: -39;
}
.tcl-row-end--negative-39 {
grid-row-end: -40;
}
.tcl-row-end--negative-40 {
grid-row-end: -41;
}
.tcl-row-end--negative-41 {
grid-row-end: -42;
}
.tcl-row-end--negative-42 {
grid-row-end: -43;
}
.tcl-row-end--negative-43 {
grid-row-end: -44;
}
.tcl-row-end--negative-44 {
grid-row-end: -45;
}
.tcl-row-end--negative-45 {
grid-row-end: -46;
}
.tcl-row-end--negative-46 {
grid-row-end: -47;
}
.tcl-row-end--negative-47 {
grid-row-end: -48;
}
.tcl-row-end--negative-48 {
grid-row-end: -49;
}
[dir="ltr"] .tcl-padding-inline-start--0x {
padding-left: 0;
}
[dir="rtl"] .tcl-padding-inline-start--0x {
padding-right: 0;
}
.tcl-padding-inline-start--0x {
-webkit-padding-start: 0;
padding-inline-start: 0;
}
[dir="ltr"] .tcl-padding-inline-start--quarter {
padding-left: calc(var(--tds-size-base) / 2);
}
[dir="rtl"] .tcl-padding-inline-start--quarter {
padding-right: calc(var(--tds-size-base) / 2);
}
.tcl-padding-inline-start--quarter {
-webkit-padding-start: calc(var(--tds-size-base) / 2);
padding-inline-start: calc(var(--tds-size-base) / 2);
}
[dir="ltr"] .tcl-padding-inline-start--half {
padding-left: var(--tds-size-half);
}
[dir="rtl"] .tcl-padding-inline-start--half {
padding-right: var(--tds-size-half);
}
.tcl-padding-inline-start--half {
-webkit-padding-start: var(--tds-size-half);
padding-inline-start: var(--tds-size-half);
}
[dir="ltr"] .tcl-padding-inline-start--1x {
padding-left: var(--tds-size-base);
}
[dir="rtl"] .tcl-padding-inline-start--1x {
padding-right: var(--tds-size-base);
}
.tcl-padding-inline-start--1x {
-webkit-padding-start: var(--tds-size-base);
padding-inline-start: var(--tds-size-base);
}
[dir="ltr"] .tcl-padding-inline-start--three-quarters {
padding-left: calc(var(--tds-size-base) + var(--tds-size-half));
}
[dir="rtl"] .tcl-padding-inline-start--three-quarters {
padding-right: calc(var(--tds-size-base) + var(--tds-size-half));
}
.tcl-padding-inline-start--three-quarters {
-webkit-padding-start: calc(var(--tds-size-base) + var(--tds-size-half));
padding-inline-start: calc(var(--tds-size-base) + var(--tds-size-half));
}
[dir="ltr"] .tcl-padding-inline-start--2x {
padding-left: var(--tds-size-2x);
}
[dir="rtl"] .tcl-padding-inline-start--2x {
padding-right: var(--tds-size-2x);
}
.tcl-padding-inline-start--2x {
-webkit-padding-start: var(--tds-size-2x);
padding-inline-start: var(--tds-size-2x);
}
[dir="ltr"] .tcl-padding-inline-start--3x {
padding-left: var(--tds-size-3x);
}
[dir="rtl"] .tcl-padding-inline-start--3x {
padding-right: var(--tds-size-3x);
}
.tcl-padding-inline-start--3x {
-webkit-padding-start: var(--tds-size-3x);
padding-inline-start: var(--tds-size-3x);
}
[dir="ltr"] .tcl-padding-inline-start--4x {
padding-left: var(--tds-size-4x);
}
[dir="rtl"] .tcl-padding-inline-start--4x {
padding-right: var(--tds-size-4x);
}
.tcl-padding-inline-start--4x {
-webkit-padding-start: var(--tds-size-4x);
padding-inline-start: var(--tds-size-4x);
}
[dir="ltr"] .tcl-padding-inline-start--5x {
padding-left: var(--tds-size-5x);
}
[dir="rtl"] .tcl-padding-inline-start--5x {
padding-right: var(--tds-size-5x);
}
.tcl-padding-inline-start--5x {
-webkit-padding-start: var(--tds-size-5x);
padding-inline-start: var(--tds-size-5x);
}
[dir="ltr"] .tcl-padding-inline-start--6x {
padding-left: var(--tds-size-6x);
}
[dir="rtl"] .tcl-padding-inline-start--6x {
padding-right: var(--tds-size-6x);
}
.tcl-padding-inline-start--6x {
-webkit-padding-start: var(--tds-size-6x);
padding-inline-start: var(--tds-size-6x);
}
[dir="ltr"] .tcl-padding-inline-start--7x {
padding-left: var(--tds-size-7x);
}
[dir="rtl"] .tcl-padding-inline-start--7x {
padding-right: var(--tds-size-7x);
}
.tcl-padding-inline-start--7x {
-webkit-padding-start: var(--tds-size-7x);
padding-inline-start: var(--tds-size-7x);
}
[dir="ltr"] .tcl-padding-inline-start--8x {
padding-left: var(--tds-size-8x);
}
[dir="rtl"] .tcl-padding-inline-start--8x {
padding-right: var(--tds-size-8x);
}
.tcl-padding-inline-start--8x {
-webkit-padding-start: var(--tds-size-8x);
padding-inline-start: var(--tds-size-8x);
}
[dir="ltr"] .tcl-padding-inline-start--9x {
padding-left: var(--tds-size-9x);
}
[dir="rtl"] .tcl-padding-inline-start--9x {
padding-right: var(--tds-size-9x);
}
.tcl-padding-inline-start--9x {
-webkit-padding-start: var(--tds-size-9x);
padding-inline-start: var(--tds-size-9x);
}
[dir="ltr"] .tcl-padding-inline-start--10x {
padding-left: var(--tds-size-10x);
}
[dir="rtl"] .tcl-padding-inline-start--10x {
padding-right: var(--tds-size-10x);
}
.tcl-padding-inline-start--10x {
-webkit-padding-start: var(--tds-size-10x);
padding-inline-start: var(--tds-size-10x);
}
[dir="ltr"] .tcl-padding-inline-start--11x {
padding-left: var(--tds-size-11x);
}
[dir="rtl"] .tcl-padding-inline-start--11x {
padding-right: var(--tds-size-11x);
}
.tcl-padding-inline-start--11x {
-webkit-padding-start: var(--tds-size-11x);
padding-inline-start: var(--tds-size-11x);
}
[dir="ltr"] .tcl-padding-inline-start--12x {
padding-left: var(--tds-size-12x);
}
[dir="rtl"] .tcl-padding-inline-start--12x {
padding-right: var(--tds-size-12x);
}
.tcl-padding-inline-start--12x {
-webkit-padding-start: var(--tds-size-12x);
padding-inline-start: var(--tds-size-12x);
}
[dir="ltr"] .tcl-padding-inline-start--13x {
padding-left: var(--tds-size-13x);
}
[dir="rtl"] .tcl-padding-inline-start--13x {
padding-right: var(--tds-size-13x);
}
.tcl-padding-inline-start--13x {
-webkit-padding-start: var(--tds-size-13x);
padding-inline-start: var(--tds-size-13x);
}
[dir="ltr"] .tcl-padding-inline-start--14x {
padding-left: calc(var(--tds-size-base) * 14);
}
[dir="rtl"] .tcl-padding-inline-start--14x {
padding-right: calc(var(--tds-size-base) * 14);
}
.tcl-padding-inline-start--14x {
-webkit-padding-start: calc(var(--tds-size-base) * 14);
padding-inline-start: calc(var(--tds-size-base) * 14);
}
[dir="ltr"] .tcl-padding-inline-start--15x {
padding-left: calc(var(--tds-size-base) * 15);
}
[dir="rtl"] .tcl-padding-inline-start--15x {
padding-right: calc(var(--tds-size-base) * 15);
}
.tcl-padding-inline-start--15x {
-webkit-padding-start: calc(var(--tds-size-base) * 15);
padding-inline-start: calc(var(--tds-size-base) * 15);
}
[dir="ltr"] .tcl-padding-inline-start--16x {
padding-left: calc(var(--tds-size-base) * 16);
}
[dir="rtl"] .tcl-padding-inline-start--16x {
padding-right: calc(var(--tds-size-base) * 16);
}
.tcl-padding-inline-start--16x {
-webkit-padding-start: calc(var(--tds-size-base) * 16);
padding-inline-start: calc(var(--tds-size-base) * 16);
}
[dir="ltr"] .tcl-padding-inline-start--17x {
padding-left: calc(var(--tds-size-base) * 17);
}
[dir="rtl"] .tcl-padding-inline-start--17x {
padding-right: calc(var(--tds-size-base) * 17);
}
.tcl-padding-inline-start--17x {
-webkit-padding-start: calc(var(--tds-size-base) * 17);
padding-inline-start: calc(var(--tds-size-base) * 17);
}
[dir="ltr"] .tcl-padding-inline-start--18x {
padding-left: calc(var(--tds-size-base) * 18);
}
[dir="rtl"] .tcl-padding-inline-start--18x {
padding-right: calc(var(--tds-size-base) * 18);
}
.tcl-padding-inline-start--18x {
-webkit-padding-start: calc(var(--tds-size-base) * 18);
padding-inline-start: calc(var(--tds-size-base) * 18);
}
[dir="ltr"] .tcl-padding-inline-start--19x {
padding-left: calc(var(--tds-size-base) * 19);
}
[dir="rtl"] .tcl-padding-inline-start--19x {
padding-right: calc(var(--tds-size-base) * 19);
}
.tcl-padding-inline-start--19x {
-webkit-padding-start: calc(var(--tds-size-base) * 19);
padding-inline-start: calc(var(--tds-size-base) * 19);
}
[dir="ltr"] .tcl-padding-inline-start--20x {
padding-left: calc(var(--tds-size-base) * 20);
}
[dir="rtl"] .tcl-padding-inline-start--20x {
padding-right: calc(var(--tds-size-base) * 20);
}
.tcl-padding-inline-start--20x {
-webkit-padding-start: calc(var(--tds-size-base) * 20);
padding-inline-start: calc(var(--tds-size-base) * 20);
}
[dir="ltr"] .tcl-padding-inline-end--0x {
padding-right: 0;
}
[dir="rtl"] .tcl-padding-inline-end--0x {
padding-left: 0;
}
.tcl-padding-inline-end--0x {
-webkit-padding-end: 0;
padding-inline-end: 0;
}
[dir="ltr"] .tcl-padding-inline-end--quarter {
padding-right: calc(var(--tds-size-base) / 2);
}
[dir="rtl"] .tcl-padding-inline-end--quarter {
padding-left: calc(var(--tds-size-base) / 2);
}
.tcl-padding-inline-end--quarter {
-webkit-padding-end: calc(var(--tds-size-base) / 2);
padding-inline-end: calc(var(--tds-size-base) / 2);
}
[dir="ltr"] .tcl-padding-inline-end--half {
padding-right: var(--tds-size-half);
}
[dir="rtl"] .tcl-padding-inline-end--half {
padding-left: var(--tds-size-half);
}
.tcl-padding-inline-end--half {
-webkit-padding-end: var(--tds-size-half);
padding-inline-end: var(--tds-size-half);
}
[dir="ltr"] .tcl-padding-inline-end--1x {
padding-right: var(--tds-size-base);
}
[dir="rtl"] .tcl-padding-inline-end--1x {
padding-left: var(--tds-size-base);
}
.tcl-padding-inline-end--1x {
-webkit-padding-end: var(--tds-size-base);
padding-inline-end: var(--tds-size-base);
}
[dir="ltr"] .tcl-padding-inline-end--three-quarters {
padding-right: calc(var(--tds-size-base) + var(--tds-size-half));
}
[dir="rtl"] .tcl-padding-inline-end--three-quarters {
padding-left: calc(var(--tds-size-base) + var(--tds-size-half));
}
.tcl-padding-inline-end--three-quarters {
-webkit-padding-end: calc(var(--tds-size-base) + var(--tds-size-half));
padding-inline-end: calc(var(--tds-size-base) + var(--tds-size-half));
}
[dir="ltr"] .tcl-padding-inline-end--2x {
padding-right: var(--tds-size-2x);
}
[dir="rtl"] .tcl-padding-inline-end--2x {
padding-left: var(--tds-size-2x);
}
.tcl-padding-inline-end--2x {
-webkit-padding-end: var(--tds-size-2x);
padding-inline-end: var(--tds-size-2x);
}
[dir="ltr"] .tcl-padding-inline-end--3x {
padding-right: var(--tds-size-3x);
}
[dir="rtl"] .tcl-padding-inline-end--3x {
padding-left: var(--tds-size-3x);
}
.tcl-padding-inline-end--3x {
-webkit-padding-end: var(--tds-size-3x);
padding-inline-end: var(--tds-size-3x);
}
[dir="ltr"] .tcl-padding-inline-end--4x {
padding-right: var(--tds-size-4x);
}
[dir="rtl"] .tcl-padding-inline-end--4x {
padding-left: var(--tds-size-4x);
}
.tcl-padding-inline-end--4x {
-webkit-padding-end: var(--tds-size-4x);
padding-inline-end: var(--tds-size-4x);
}
[dir="ltr"] .tcl-padding-inline-end--5x {
padding-right: var(--tds-size-5x);
}
[dir="rtl"] .tcl-padding-inline-end--5x {
padding-left: var(--tds-size-5x);
}
.tcl-padding-inline-end--5x {
-webkit-padding-end: var(--tds-size-5x);
padding-inline-end: var(--tds-size-5x);
}
[dir="ltr"] .tcl-padding-inline-end--6x {
padding-right: var(--tds-size-6x);
}
[dir="rtl"] .tcl-padding-inline-end--6x {
padding-left: var(--tds-size-6x);
}
.tcl-padding-inline-end--6x {
-webkit-padding-end: var(--tds-size-6x);
padding-inline-end: var(--tds-size-6x);
}
[dir="ltr"] .tcl-padding-inline-end--7x {
padding-right: var(--tds-size-7x);
}
[dir="rtl"] .tcl-padding-inline-end--7x {
padding-left: var(--tds-size-7x);
}
.tcl-padding-inline-end--7x {
-webkit-padding-end: var(--tds-size-7x);
padding-inline-end: var(--tds-size-7x);
}
[dir="ltr"] .tcl-padding-inline-end--8x {
padding-right: var(--tds-size-8x);
}
[dir="rtl"] .tcl-padding-inline-end--8x {
padding-left: var(--tds-size-8x);
}
.tcl-padding-inline-end--8x {
-webkit-padding-end: var(--tds-size-8x);
padding-inline-end: var(--tds-size-8x);
}
[dir="ltr"] .tcl-padding-inline-end--9x {
padding-right: var(--tds-size-9x);
}
[dir="rtl"] .tcl-padding-inline-end--9x {
padding-left: var(--tds-size-9x);
}
.tcl-padding-inline-end--9x {
-webkit-padding-end: var(--tds-size-9x);
padding-inline-end: var(--tds-size-9x);
}
[dir="ltr"] .tcl-padding-inline-end--10x {
padding-right: var(--tds-size-10x);
}
[dir="rtl"] .tcl-padding-inline-end--10x {
padding-left: var(--tds-size-10x);
}
.tcl-padding-inline-end--10x {
-webkit-padding-end: var(--tds-size-10x);
padding-inline-end: var(--tds-size-10x);
}
[dir="ltr"] .tcl-padding-inline-end--11x {
padding-right: var(--tds-size-11x);
}
[dir="rtl"] .tcl-padding-inline-end--11x {
padding-left: var(--tds-size-11x);
}
.tcl-padding-inline-end--11x {
-webkit-padding-end: var(--tds-size-11x);
padding-inline-end: var(--tds-size-11x);
}
[dir="ltr"] .tcl-padding-inline-end--12x {
padding-right: var(--tds-size-12x);
}
[dir="rtl"] .tcl-padding-inline-end--12x {
padding-left: var(--tds-size-12x);
}
.tcl-padding-inline-end--12x {
-webkit-padding-end: var(--tds-size-12x);
padding-inline-end: var(--tds-size-12x);
}
[dir="ltr"] .tcl-padding-inline-end--13x {
padding-right: var(--tds-size-13x);
}
[dir="rtl"] .tcl-padding-inline-end--13x {
padding-left: var(--tds-size-13x);
}
.tcl-padding-inline-end--13x {
-webkit-padding-end: var(--tds-size-13x);
padding-inline-end: var(--tds-size-13x);
}
[dir="ltr"] .tcl-padding-inline-end--14x {
padding-right: calc(var(--tds-size-base) * 14);
}
[dir="rtl"] .tcl-padding-inline-end--14x {
padding-left: calc(var(--tds-size-base) * 14);
}
.tcl-padding-inline-end--14x {
-webkit-padding-end: calc(var(--tds-size-base) * 14);
padding-inline-end: calc(var(--tds-size-base) * 14);
}
[dir="ltr"] .tcl-padding-inline-end--15x {
padding-right: calc(var(--tds-size-base) * 15);
}
[dir="rtl"] .tcl-padding-inline-end--15x {
padding-left: calc(var(--tds-size-base) * 15);
}
.tcl-padding-inline-end--15x {
-webkit-padding-end: calc(var(--tds-size-base) * 15);
padding-inline-end: calc(var(--tds-size-base) * 15);
}
[dir="ltr"] .tcl-padding-inline-end--16x {
padding-right: calc(var(--tds-size-base) * 16);
}
[dir="rtl"] .tcl-padding-inline-end--16x {
padding-left: calc(var(--tds-size-base) * 16);
}
.tcl-padding-inline-end--16x {
-webkit-padding-end: calc(var(--tds-size-base) * 16);
padding-inline-end: calc(var(--tds-size-base) * 16);
}
[dir="ltr"] .tcl-padding-inline-end--17x {
padding-right: calc(var(--tds-size-base) * 17);
}
[dir="rtl"] .tcl-padding-inline-end--17x {
padding-left: calc(var(--tds-size-base) * 17);
}
.tcl-padding-inline-end--17x {
-webkit-padding-end: calc(var(--tds-size-base) * 17);
padding-inline-end: calc(var(--tds-size-base) * 17);
}
[dir="ltr"] .tcl-padding-inline-end--18x {
padding-right: calc(var(--tds-size-base) * 18);
}
[dir="rtl"] .tcl-padding-inline-end--18x {
padding-left: calc(var(--tds-size-base) * 18);
}
.tcl-padding-inline-end--18x {
-webkit-padding-end: calc(var(--tds-size-base) * 18);
padding-inline-end: calc(var(--tds-size-base) * 18);
}
[dir="ltr"] .tcl-padding-inline-end--19x {
padding-right: calc(var(--tds-size-base) * 19);
}
[dir="rtl"] .tcl-padding-inline-end--19x {
padding-left: calc(var(--tds-size-base) * 19);
}
.tcl-padding-inline-end--19x {
-webkit-padding-end: calc(var(--tds-size-base) * 19);
padding-inline-end: calc(var(--tds-size-base) * 19);
}
[dir="ltr"] .tcl-padding-inline-end--20x {
padding-right: calc(var(--tds-size-base) * 20);
}
[dir="rtl"] .tcl-padding-inline-end--20x {
padding-left: calc(var(--tds-size-base) * 20);
}
.tcl-padding-inline-end--20x {
-webkit-padding-end: calc(var(--tds-size-base) * 20);
padding-inline-end: calc(var(--tds-size-base) * 20);
}
.tcl-padding-block-start--0x {
padding-top: 0;
}
.tcl-padding-block-start--quarter {
padding-top: calc(var(--tds-size-base) / 2);
}
.tcl-padding-block-start--half {
padding-top: var(--tds-size-half);
}
.tcl-padding-block-start--1x {
padding-top: var(--tds-size-base);
}
.tcl-padding-block-start--three-quarters {
padding-top: calc(var(--tds-size-base) + var(--tds-size-half));
}
.tcl-padding-block-start--2x {
padding-top: var(--tds-size-2x);
}
.tcl-padding-block-start--3x {
padding-top: var(--tds-size-3x);
}
.tcl-padding-block-start--4x {
padding-top: var(--tds-size-4x);
}
.tcl-padding-block-start--5x {
padding-top: var(--tds-size-5x);
}
.tcl-padding-block-start--6x {
padding-top: var(--tds-size-6x);
}
.tcl-padding-block-start--7x {
padding-top: var(--tds-size-7x);
}
.tcl-padding-block-start--8x {
padding-top: var(--tds-size-8x);
}
.tcl-padding-block-start--9x {
padding-top: var(--tds-size-9x);
}
.tcl-padding-block-start--10x {
padding-top: var(--tds-size-10x);
}
.tcl-padding-block-start--11x {
padding-top: var(--tds-size-11x);
}
.tcl-padding-block-start--12x {
padding-top: var(--tds-size-12x);
}
.tcl-padding-block-start--13x {
padding-top: var(--tds-size-13x);
}
.tcl-padding-block-start--14x {
padding-top: calc(var(--tds-size-base) * 14);
}
.tcl-padding-block-start--15x {
padding-top: calc(var(--tds-size-base) * 15);
}
.tcl-padding-block-start--16x {
padding-top: calc(var(--tds-size-base) * 16);
}
.tcl-padding-block-start--17x {
padding-top: calc(var(--tds-size-base) * 17);
}
.tcl-padding-block-start--18x {
padding-top: calc(var(--tds-size-base) * 18);
}
.tcl-padding-block-start--19x {
padding-top: calc(var(--tds-size-base) * 19);
}
.tcl-padding-block-start--20x {
padding-top: calc(var(--tds-size-base) * 20);
}
.tcl-padding-block-end--0x {
padding-bottom: 0;
}
.tcl-padding-block-end--quarter {
padding-bottom: calc(var(--tds-size-base) / 2);
}
.tcl-padding-block-end--half {
padding-bottom: var(--tds-size-half);
}
.tcl-padding-block-end--1x {
padding-bottom: var(--tds-size-base);
}
.tcl-padding-block-end--three-quarters {
padding-bottom: calc(var(--tds-size-base) + var(--tds-size-half));
}
.tcl-padding-block-end--2x {
padding-bottom: var(--tds-size-2x);
}
.tcl-padding-block-end--3x {
padding-bottom: var(--tds-size-3x);
}
.tcl-padding-block-end--4x {
padding-bottom: var(--tds-size-4x);
}
.tcl-padding-block-end--5x {
padding-bottom: var(--tds-size-5x);
}
.tcl-padding-block-end--6x {
padding-bottom: var(--tds-size-6x);
}
.tcl-padding-block-end--7x {
padding-bottom: var(--tds-size-7x);
}
.tcl-padding-block-end--8x {
padding-bottom: var(--tds-size-8x);
}
.tcl-padding-block-end--9x {
padding-bottom: var(--tds-size-9x);
}
.tcl-padding-block-end--10x {
padding-bottom: var(--tds-size-10x);
}
.tcl-padding-block-end--11x {
padding-bottom: var(--tds-size-11x);
}
.tcl-padding-block-end--12x {
padding-bottom: var(--tds-size-12x);
}
.tcl-padding-block-end--13x {
padding-bottom: var(--tds-size-13x);
}
.tcl-padding-block-end--14x {
padding-bottom: calc(var(--tds-size-base) * 14);
}
.tcl-padding-block-end--15x {
padding-bottom: calc(var(--tds-size-base) * 15);
}
.tcl-padding-block-end--16x {
padding-bottom: calc(var(--tds-size-base) * 16);
}
.tcl-padding-block-end--17x {
padding-bottom: calc(var(--tds-size-base) * 17);
}
.tcl-padding-block-end--18x {
padding-bottom: calc(var(--tds-size-base) * 18);
}
.tcl-padding-block-end--19x {
padding-bottom: calc(var(--tds-size-base) * 19);
}
.tcl-padding-block-end--20x {
padding-bottom: calc(var(--tds-size-base) * 20);
}
[dir="ltr"] .tcl-margin-inline-start--0x {
margin-left: 0;
}
[dir="rtl"] .tcl-margin-inline-start--0x {
margin-right: 0;
}
.tcl-margin-inline-start--0x {
-webkit-margin-start: 0;
margin-inline-start: 0;
}
[dir="ltr"] .tcl-margin-inline-start--quarter {
margin-left: calc(var(--tds-size-base) / 2);
}
[dir="rtl"] .tcl-margin-inline-start--quarter {
margin-right: calc(var(--tds-size-base) / 2);
}
.tcl-margin-inline-start--quarter {
-webkit-margin-start: calc(var(--tds-size-base) / 2);
margin-inline-start: calc(var(--tds-size-base) / 2);
}
[dir="ltr"] .tcl-margin-inline-start--half {
margin-left: var(--tds-size-half);
}
[dir="rtl"] .tcl-margin-inline-start--half {
margin-right: var(--tds-size-half);
}
.tcl-margin-inline-start--half {
-webkit-margin-start: var(--tds-size-half);
margin-inline-start: var(--tds-size-half);
}
[dir="ltr"] .tcl-margin-inline-start--1x {
margin-left: var(--tds-size-base);
}
[dir="rtl"] .tcl-margin-inline-start--1x {
margin-right: var(--tds-size-base);
}
.tcl-margin-inline-start--1x {
-webkit-margin-start: var(--tds-size-base);
margin-inline-start: var(--tds-size-base);
}
[dir="ltr"] .tcl-margin-inline-start--three-quarters {
margin-left: calc(var(--tds-size-base) + var(--tds-size-half));
}
[dir="rtl"] .tcl-margin-inline-start--three-quarters {
margin-right: calc(var(--tds-size-base) + var(--tds-size-half));
}
.tcl-margin-inline-start--three-quarters {
-webkit-margin-start: calc(var(--tds-size-base) + var(--tds-size-half));
margin-inline-start: calc(var(--tds-size-base) + var(--tds-size-half));
}
[dir="ltr"] .tcl-margin-inline-start--2x {
margin-left: var(--tds-size-2x);
}
[dir="rtl"] .tcl-margin-inline-start--2x {
margin-right: var(--tds-size-2x);
}
.tcl-margin-inline-start--2x {
-webkit-margin-start: var(--tds-size-2x);
margin-inline-start: var(--tds-size-2x);
}
[dir="ltr"] .tcl-margin-inline-start--3x {
margin-left: var(--tds-size-3x);
}
[dir="rtl"] .tcl-margin-inline-start--3x {
margin-right: var(--tds-size-3x);
}
.tcl-margin-inline-start--3x {
-webkit-margin-start: var(--tds-size-3x);
margin-inline-start: var(--tds-size-3x);
}
[dir="ltr"] .tcl-margin-inline-start--4x {
margin-left: var(--tds-size-4x);
}
[dir="rtl"] .tcl-margin-inline-start--4x {
margin-right: var(--tds-size-4x);
}
.tcl-margin-inline-start--4x {
-webkit-margin-start: var(--tds-size-4x);
margin-inline-start: var(--tds-size-4x);
}
[dir="ltr"] .tcl-margin-inline-start--5x {
margin-left: var(--tds-size-5x);
}
[dir="rtl"] .tcl-margin-inline-start--5x {
margin-right: var(--tds-size-5x);
}
.tcl-margin-inline-start--5x {
-webkit-margin-start: var(--tds-size-5x);
margin-inline-start: var(--tds-size-5x);
}
[dir="ltr"] .tcl-margin-inline-start--6x {
margin-left: var(--tds-size-6x);
}
[dir="rtl"] .tcl-margin-inline-start--6x {
margin-right: var(--tds-size-6x);
}
.tcl-margin-inline-start--6x {
-webkit-margin-start: var(--tds-size-6x);
margin-inline-start: var(--tds-size-6x);
}
[dir="ltr"] .tcl-margin-inline-start--7x {
margin-left: var(--tds-size-7x);
}
[dir="rtl"] .tcl-margin-inline-start--7x {
margin-right: var(--tds-size-7x);
}
.tcl-margin-inline-start--7x {
-webkit-margin-start: var(--tds-size-7x);
margin-inline-start: var(--tds-size-7x);
}
[dir="ltr"] .tcl-margin-inline-start--8x {
margin-left: var(--tds-size-8x);
}
[dir="rtl"] .tcl-margin-inline-start--8x {
margin-right: var(--tds-size-8x);
}
.tcl-margin-inline-start--8x {
-webkit-margin-start: var(--tds-size-8x);
margin-inline-start: var(--tds-size-8x);
}
[dir="ltr"] .tcl-margin-inline-start--9x {
margin-left: var(--tds-size-9x);
}
[dir="rtl"] .tcl-margin-inline-start--9x {
margin-right: var(--tds-size-9x);
}
.tcl-margin-inline-start--9x {
-webkit-margin-start: var(--tds-size-9x);
margin-inline-start: var(--tds-size-9x);
}
[dir="ltr"] .tcl-margin-inline-start--10x {
margin-left: var(--tds-size-10x);
}
[dir="rtl"] .tcl-margin-inline-start--10x {
margin-right: var(--tds-size-10x);
}
.tcl-margin-inline-start--10x {
-webkit-margin-start: var(--tds-size-10x);
margin-inline-start: var(--tds-size-10x);
}
[dir="ltr"] .tcl-margin-inline-start--11x {
margin-left: var(--tds-size-11x);
}
[dir="rtl"] .tcl-margin-inline-start--11x {
margin-right: var(--tds-size-11x);
}
.tcl-margin-inline-start--11x {
-webkit-margin-start: var(--tds-size-11x);
margin-inline-start: var(--tds-size-11x);
}
[dir="ltr"] .tcl-margin-inline-start--12x {
margin-left: var(--tds-size-12x);
}
[dir="rtl"] .tcl-margin-inline-start--12x {
margin-right: var(--tds-size-12x);
}
.tcl-margin-inline-start--12x {
-webkit-margin-start: var(--tds-size-12x);
margin-inline-start: var(--tds-size-12x);
}
[dir="ltr"] .tcl-margin-inline-start--13x {
margin-left: var(--tds-size-13x);
}
[dir="rtl"] .tcl-margin-inline-start--13x {
margin-right: var(--tds-size-13x);
}
.tcl-margin-inline-start--13x {
-webkit-margin-start: var(--tds-size-13x);
margin-inline-start: var(--tds-size-13x);
}
[dir="ltr"] .tcl-margin-inline-start--14x {
margin-left: calc(var(--tds-size-base) * 14);
}
[dir="rtl"] .tcl-margin-inline-start--14x {
margin-right: calc(var(--tds-size-base) * 14);
}
.tcl-margin-inline-start--14x {
-webkit-margin-start: calc(var(--tds-size-base) * 14);
margin-inline-start: calc(var(--tds-size-base) * 14);
}
[dir="ltr"] .tcl-margin-inline-start--15x {
margin-left: calc(var(--tds-size-base) * 15);
}
[dir="rtl"] .tcl-margin-inline-start--15x {
margin-right: calc(var(--tds-size-base) * 15);
}
.tcl-margin-inline-start--15x {
-webkit-margin-start: calc(var(--tds-size-base) * 15);
margin-inline-start: calc(var(--tds-size-base) * 15);
}
[dir="ltr"] .tcl-margin-inline-start--16x {
margin-left: calc(var(--tds-size-base) * 16);
}
[dir="rtl"] .tcl-margin-inline-start--16x {
margin-right: calc(var(--tds-size-base) * 16);
}
.tcl-margin-inline-start--16x {
-webkit-margin-start: calc(var(--tds-size-base) * 16);
margin-inline-start: calc(var(--tds-size-base) * 16);
}
[dir="ltr"] .tcl-margin-inline-start--17x {
margin-left: calc(var(--tds-size-base) * 17);
}
[dir="rtl"] .tcl-margin-inline-start--17x {
margin-right: calc(var(--tds-size-base) * 17);
}
.tcl-margin-inline-start--17x {
-webkit-margin-start: calc(var(--tds-size-base) * 17);
margin-inline-start: calc(var(--tds-size-base) * 17);
}
[dir="ltr"] .tcl-margin-inline-start--18x {
margin-left: calc(var(--tds-size-base) * 18);
}
[dir="rtl"] .tcl-margin-inline-start--18x {
margin-right: calc(var(--tds-size-base) * 18);
}
.tcl-margin-inline-start--18x {
-webkit-margin-start: calc(var(--tds-size-base) * 18);
margin-inline-start: calc(var(--tds-size-base) * 18);
}
[dir="ltr"] .tcl-margin-inline-start--19x {
margin-left: calc(var(--tds-size-base) * 19);
}
[dir="rtl"] .tcl-margin-inline-start--19x {
margin-right: calc(var(--tds-size-base) * 19);
}
.tcl-margin-inline-start--19x {
-webkit-margin-start: calc(var(--tds-size-base) * 19);
margin-inline-start: calc(var(--tds-size-base) * 19);
}
[dir="ltr"] .tcl-margin-inline-start--20x {
margin-left: calc(var(--tds-size-base) * 20);
}
[dir="rtl"] .tcl-margin-inline-start--20x {
margin-right: calc(var(--tds-size-base) * 20);
}
.tcl-margin-inline-start--20x {
-webkit-margin-start: calc(var(--tds-size-base) * 20);
margin-inline-start: calc(var(--tds-size-base) * 20);
}
[dir="ltr"] .tcl-margin-inline-end--0x {
margin-right: 0;
}
[dir="rtl"] .tcl-margin-inline-end--0x {
margin-left: 0;
}
.tcl-margin-inline-end--0x {
-webkit-margin-end: 0;
margin-inline-end: 0;
}
[dir="ltr"] .tcl-margin-inline-end--quarter {
margin-right: calc(var(--tds-size-base) / 2);
}
[dir="rtl"] .tcl-margin-inline-end--quarter {
margin-left: calc(var(--tds-size-base) / 2);
}
.tcl-margin-inline-end--quarter {
-webkit-margin-end: calc(var(--tds-size-base) / 2);
margin-inline-end: calc(var(--tds-size-base) / 2);
}
[dir="ltr"] .tcl-margin-inline-end--half {
margin-right: var(--tds-size-half);
}
[dir="rtl"] .tcl-margin-inline-end--half {
margin-left: var(--tds-size-half);
}
.tcl-margin-inline-end--half {
-webkit-margin-end: var(--tds-size-half);
margin-inline-end: var(--tds-size-half);
}
[dir="ltr"] .tcl-margin-inline-end--1x {
margin-right: var(--tds-size-base);
}
[dir="rtl"] .tcl-margin-inline-end--1x {
margin-left: var(--tds-size-base);
}
.tcl-margin-inline-end--1x {
-webkit-margin-end: var(--tds-size-base);
margin-inline-end: var(--tds-size-base);
}
[dir="ltr"] .tcl-margin-inline-end--three-quarters {
margin-right: calc(var(--tds-size-base) + var(--tds-size-half));
}
[dir="rtl"] .tcl-margin-inline-end--three-quarters {
margin-left: calc(var(--tds-size-base) + var(--tds-size-half));
}
.tcl-margin-inline-end--three-quarters {
-webkit-margin-end: calc(var(--tds-size-base) + var(--tds-size-half));
margin-inline-end: calc(var(--tds-size-base) + var(--tds-size-half));
}
[dir="ltr"] .tcl-margin-inline-end--2x {
margin-right: var(--tds-size-2x);
}
[dir="rtl"] .tcl-margin-inline-end--2x {
margin-left: var(--tds-size-2x);
}
.tcl-margin-inline-end--2x {
-webkit-margin-end: var(--tds-size-2x);
margin-inline-end: var(--tds-size-2x);
}
[dir="ltr"] .tcl-margin-inline-end--3x {
margin-right: var(--tds-size-3x);
}
[dir="rtl"] .tcl-margin-inline-end--3x {
margin-left: var(--tds-size-3x);
}
.tcl-margin-inline-end--3x {
-webkit-margin-end: var(--tds-size-3x);
margin-inline-end: var(--tds-size-3x);
}
[dir="ltr"] .tcl-margin-inline-end--4x {
margin-right: var(--tds-size-4x);
}
[dir="rtl"] .tcl-margin-inline-end--4x {
margin-left: var(--tds-size-4x);
}
.tcl-margin-inline-end--4x {
-webkit-margin-end: var(--tds-size-4x);
margin-inline-end: var(--tds-size-4x);
}
[dir="ltr"] .tcl-margin-inline-end--5x {
margin-right: var(--tds-size-5x);
}
[dir="rtl"] .tcl-margin-inline-end--5x {
margin-left: var(--tds-size-5x);
}
.tcl-margin-inline-end--5x {
-webkit-margin-end: var(--tds-size-5x);
margin-inline-end: var(--tds-size-5x);
}
[dir="ltr"] .tcl-margin-inline-end--6x {
margin-right: var(--tds-size-6x);
}
[dir="rtl"] .tcl-margin-inline-end--6x {
margin-left: var(--tds-size-6x);
}
.tcl-margin-inline-end--6x {
-webkit-margin-end: var(--tds-size-6x);
margin-inline-end: var(--tds-size-6x);
}
[dir="ltr"] .tcl-margin-inline-end--7x {
margin-right: var(--tds-size-7x);
}
[dir="rtl"] .tcl-margin-inline-end--7x {
margin-left: var(--tds-size-7x);
}
.tcl-margin-inline-end--7x {
-webkit-margin-end: var(--tds-size-7x);
margin-inline-end: var(--tds-size-7x);
}
[dir="ltr"] .tcl-margin-inline-end--8x {
margin-right: var(--tds-size-8x);
}
[dir="rtl"] .tcl-margin-inline-end--8x {
margin-left: var(--tds-size-8x);
}
.tcl-margin-inline-end--8x {
-webkit-margin-end: var(--tds-size-8x);
margin-inline-end: var(--tds-size-8x);
}
[dir="ltr"] .tcl-margin-inline-end--9x {
margin-right: var(--tds-size-9x);
}
[dir="rtl"] .tcl-margin-inline-end--9x {
margin-left: var(--tds-size-9x);
}
.tcl-margin-inline-end--9x {
-webkit-margin-end: var(--tds-size-9x);
margin-inline-end: var(--tds-size-9x);
}
[dir="ltr"] .tcl-margin-inline-end--10x {
margin-right: var(--tds-size-10x);
}
[dir="rtl"] .tcl-margin-inline-end--10x {
margin-left: var(--tds-size-10x);
}
.tcl-margin-inline-end--10x {
-webkit-margin-end: var(--tds-size-10x);
margin-inline-end: var(--tds-size-10x);
}
[dir="ltr"] .tcl-margin-inline-end--11x {
margin-right: var(--tds-size-11x);
}
[dir="rtl"] .tcl-margin-inline-end--11x {
margin-left: var(--tds-size-11x);
}
.tcl-margin-inline-end--11x {
-webkit-margin-end: var(--tds-size-11x);
margin-inline-end: var(--tds-size-11x);
}
[dir="ltr"] .tcl-margin-inline-end--12x {
margin-right: var(--tds-size-12x);
}
[dir="rtl"] .tcl-margin-inline-end--12x {
margin-left: var(--tds-size-12x);
}
.tcl-margin-inline-end--12x {
-webkit-margin-end: var(--tds-size-12x);
margin-inline-end: var(--tds-size-12x);
}
[dir="ltr"] .tcl-margin-inline-end--13x {
margin-right: var(--tds-size-13x);
}
[dir="rtl"] .tcl-margin-inline-end--13x {
margin-left: var(--tds-size-13x);
}
.tcl-margin-inline-end--13x {
-webkit-margin-end: var(--tds-size-13x);
margin-inline-end: var(--tds-size-13x);
}
[dir="ltr"] .tcl-margin-inline-end--14x {
margin-right: calc(var(--tds-size-base) * 14);
}
[dir="rtl"] .tcl-margin-inline-end--14x {
margin-left: calc(var(--tds-size-base) * 14);
}
.tcl-margin-inline-end--14x {
-webkit-margin-end: calc(var(--tds-size-base) * 14);
margin-inline-end: calc(var(--tds-size-base) * 14);
}
[dir="ltr"] .tcl-margin-inline-end--15x {
margin-right: calc(var(--tds-size-base) * 15);
}
[dir="rtl"] .tcl-margin-inline-end--15x {
margin-left: calc(var(--tds-size-base) * 15);
}
.tcl-margin-inline-end--15x {
-webkit-margin-end: calc(var(--tds-size-base) * 15);
margin-inline-end: calc(var(--tds-size-base) * 15);
}
[dir="ltr"] .tcl-margin-inline-end--16x {
margin-right: calc(var(--tds-size-base) * 16);
}
[dir="rtl"] .tcl-margin-inline-end--16x {
margin-left: calc(var(--tds-size-base) * 16);
}
.tcl-margin-inline-end--16x {
-webkit-margin-end: calc(var(--tds-size-base) * 16);
margin-inline-end: calc(var(--tds-size-base) * 16);
}
[dir="ltr"] .tcl-margin-inline-end--17x {
margin-right: calc(var(--tds-size-base) * 17);
}
[dir="rtl"] .tcl-margin-inline-end--17x {
margin-left: calc(var(--tds-size-base) * 17);
}
.tcl-margin-inline-end--17x {
-webkit-margin-end: calc(var(--tds-size-base) * 17);
margin-inline-end: calc(var(--tds-size-base) * 17);
}
[dir="ltr"] .tcl-margin-inline-end--18x {
margin-right: calc(var(--tds-size-base) * 18);
}
[dir="rtl"] .tcl-margin-inline-end--18x {
margin-left: calc(var(--tds-size-base) * 18);
}
.tcl-margin-inline-end--18x {
-webkit-margin-end: calc(var(--tds-size-base) * 18);
margin-inline-end: calc(var(--tds-size-base) * 18);
}
[dir="ltr"] .tcl-margin-inline-end--19x {
margin-right: calc(var(--tds-size-base) * 19);
}
[dir="rtl"] .tcl-margin-inline-end--19x {
margin-left: calc(var(--tds-size-base) * 19);
}
.tcl-margin-inline-end--19x {
-webkit-margin-end: calc(var(--tds-size-base) * 19);
margin-inline-end: calc(var(--tds-size-base) * 19);
}
[dir="ltr"] .tcl-margin-inline-end--20x {
margin-right: calc(var(--tds-size-base) * 20);
}
[dir="rtl"] .tcl-margin-inline-end--20x {
margin-left: calc(var(--tds-size-base) * 20);
}
.tcl-margin-inline-end--20x {
-webkit-margin-end: calc(var(--tds-size-base) * 20);
margin-inline-end: calc(var(--tds-size-base) * 20);
}
.tcl-margin-block-start--0x {
margin-top: 0;
}
.tcl-margin-block-start--quarter {
margin-top: calc(var(--tds-size-base) / 2);
}
.tcl-margin-block-start--half {
margin-top: var(--tds-size-half);
}
.tcl-margin-block-start--1x {
margin-top: var(--tds-size-base);
}
.tcl-margin-block-start--three-quarters {
margin-top: calc(var(--tds-size-base) + var(--tds-size-half));
}
.tcl-margin-block-start--2x {
margin-top: var(--tds-size-2x);
}
.tcl-margin-block-start--3x {
margin-top: var(--tds-size-3x);
}
.tcl-margin-block-start--4x {
margin-top: var(--tds-size-4x);
}
.tcl-margin-block-start--5x {
margin-top: var(--tds-size-5x);
}
.tcl-margin-block-start--6x {
margin-top: var(--tds-size-6x);
}
.tcl-margin-block-start--7x {
margin-top: var(--tds-size-7x);
}
.tcl-margin-block-start--8x {
margin-top: var(--tds-size-8x);
}
.tcl-margin-block-start--9x {
margin-top: var(--tds-size-9x);
}
.tcl-margin-block-start--10x {
margin-top: var(--tds-size-10x);
}
.tcl-margin-block-start--11x {
margin-top: var(--tds-size-11x);
}
.tcl-margin-block-start--12x {
margin-top: var(--tds-size-12x);
}
.tcl-margin-block-start--13x {
margin-top: var(--tds-size-13x);
}
.tcl-margin-block-start--14x {
margin-top: calc(var(--tds-size-base) * 14);
}
.tcl-margin-block-start--15x {
margin-top: calc(var(--tds-size-base) * 15);
}
.tcl-margin-block-start--16x {
margin-top: calc(var(--tds-size-base) * 16);
}
.tcl-margin-block-start--17x {
margin-top: calc(var(--tds-size-base) * 17);
}
.tcl-margin-block-start--18x {
margin-top: calc(var(--tds-size-base) * 18);
}
.tcl-margin-block-start--19x {
margin-top: calc(var(--tds-size-base) * 19);
}
.tcl-margin-block-start--20x {
margin-top: calc(var(--tds-size-base) * 20);
}
.tcl-margin-block-end--0x {
margin-bottom: 0;
}
.tcl-margin-block-end--quarter {
margin-bottom: calc(var(--tds-size-base) / 2);
}
.tcl-margin-block-end--half {
margin-bottom: var(--tds-size-half);
}
.tcl-margin-block-end--1x {
margin-bottom: var(--tds-size-base);
}
.tcl-margin-block-end--three-quarters {
margin-bottom: calc(var(--tds-size-base) + var(--tds-size-half));
}
.tcl-margin-block-end--2x {
margin-bottom: var(--tds-size-2x);
}
.tcl-margin-block-end--3x {
margin-bottom: var(--tds-size-3x);
}
.tcl-margin-block-end--4x {
margin-bottom: var(--tds-size-4x);
}
.tcl-margin-block-end--5x {
margin-bottom: var(--tds-size-5x);
}
.tcl-margin-block-end--6x {
margin-bottom: var(--tds-size-6x);
}
.tcl-margin-block-end--7x {
margin-bottom: var(--tds-size-7x);
}
.tcl-margin-block-end--8x {
margin-bottom: var(--tds-size-8x);
}
.tcl-margin-block-end--9x {
margin-bottom: var(--tds-size-9x);
}
.tcl-margin-block-end--10x {
margin-bottom: var(--tds-size-10x);
}
.tcl-margin-block-end--11x {
margin-bottom: var(--tds-size-11x);
}
.tcl-margin-block-end--12x {
margin-bottom: var(--tds-size-12x);
}
.tcl-margin-block-end--13x {
margin-bottom: var(--tds-size-13x);
}
.tcl-margin-block-end--14x {
margin-bottom: calc(var(--tds-size-base) * 14);
}
.tcl-margin-block-end--15x {
margin-bottom: calc(var(--tds-size-base) * 15);
}
.tcl-margin-block-end--16x {
margin-bottom: calc(var(--tds-size-base) * 16);
}
.tcl-margin-block-end--17x {
margin-bottom: calc(var(--tds-size-base) * 17);
}
.tcl-margin-block-end--18x {
margin-bottom: calc(var(--tds-size-base) * 18);
}
.tcl-margin-block-end--19x {
margin-bottom: calc(var(--tds-size-base) * 19);
}
.tcl-margin-block-end--20x {
margin-bottom: calc(var(--tds-size-base) * 20);
}
:root {
--tcl-media--width: 100%;
--tcl-media--height: 100%;
--tcl-media--max-width: 100%;
--tcl-media--max-height: 100%;
--tcl-media--aspect-ratio: unset;
--tcl-react-media--start-gradient-size: 20%;
--tcl-react-media--end-gradient-size: 20%;
--tcl-react-media--start-gradient-color: var(--tds-color-white);
--tcl-react-media--end-gradient-color: var(--tds-color-white);
--tcl-react-media--border-radius: 0;
--tcl-react-media--border-top-left-radius: unset;
--tcl-react-media--border-top-right-radius: unset;
--tcl-react-media--border-bottom-left-radius: unset;
--tcl-react-media--border-bottom-right-radius: unset;
--tcl-media__video-control--inset-block-start: unset;
--tcl-media__video-control--inset-block-end: unset;
--tcl-media__video-control--inset-inline-start: unset;
--tcl-media__video-control--inset-inline-end: unset;
--tcl-media__video-control--inset-size: var(--tds-size-4x);
}
@media (max-width: 599px) {
:root {
--tcl-media__video-control--inset-size: var(--tds-size-3x);
}
}
.tcl-react-media {
aspect-ratio: unset;
aspect-ratio: var(--tcl-media--aspect-ratio);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%;
height: var(--tcl-media--height);
max-height: 100%;
max-height: var(--tcl-media--max-height);
max-width: 100%;
max-width: var(--tcl-media--max-width);
opacity: 1;
position: relative;
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
width: 100%;
width: var(--tcl-media--width);
}
.tcl-react-media__asset {
border-bottom-left-radius: unset;
border-bottom-left-radius: var(
--tcl-react-media--border-bottom-left-radius,
var(--tcl-react-media--border-radius, 0)
);
border-bottom-right-radius: unset;
border-bottom-right-radius: var(
--tcl-react-media--border-bottom-right-radius,
var(--tcl-react-media--border-radius, 0)
);
border-top-left-radius: unset;
border-top-left-radius: var(
--tcl-react-media--border-top-left-radius,
var(--tcl-react-media--border-radius, 0)
);
border-top-right-radius: unset;
border-top-right-radius: var(
--tcl-react-media--border-top-right-radius,
var(--tcl-react-media--border-radius, 0)
);
height: 100%;
-o-object-fit: cover;
font-family: "object-fit:cover";
object-fit: cover;
width: 100%;
}
.tcl-react-media.tcl-react-media-slide-in-animation {
opacity: 0;
-webkit-transform: translateY(16px);
transform: translateY(16px);
-webkit-transform: translateY(var(--tds-size--2x));
transform: translateY(var(--tds-size--2x));
}
.tcl-react-media.tcl-react-media--start-gradient-short {
--tcl-react-media--start-gradient-size: 10%;
}
.tcl-react-media.tcl-react-media--start-gradient-standard {
--tcl-react-media--start-gradient-size: 20%;
}
.tcl-react-media.tcl-react-media--start-gradient-tall {
--tcl-react-media--start-gradient-size: 30%;
}
.tcl-react-media.tcl-react-media--start-gradient-huge {
--tcl-react-media--start-gradient-size: 60%;
}
.tcl-react-media.tcl-react-media--end-gradient-short {
--tcl-react-media--end-gradient-size: 10%;
}
.tcl-react-media.tcl-react-media--end-gradient-standard {
--tcl-react-media--end-gradient-size: 20%;
}
.tcl-react-media.tcl-react-media--end-gradient-tall {
--tcl-react-media--end-gradient-size: 30%;
}
.tcl-react-media.tcl-react-media--end-gradient-huge {
--tcl-react-media--end-gradient-size: 60%;
}
.tcl-react-media.tcl-react-media--start-gradient-white {
--tcl-react-media--start-gradient-color: var(--tds-color-white);
}
.tcl-react-media.tcl-react-media--start-gradient-black {
--tcl-react-media--start-gradient-color: var(--tds-color-black);
}
.tcl-react-media.tcl-react-media--end-gradient-white {
--tcl-react-media--end-gradient-color: var(--tds-color-white);
}
.tcl-react-media.tcl-react-media--end-gradient-black {
--tcl-react-media--end-gradient-color: var(--tds-color-black);
}
[dir="ltr"] .tcl-react-media.tcl-react-media--end-gradient:after,
[dir="ltr"] .tcl-react-media.tcl-react-media--start-gradient:before {
left: 0;
}
[dir="rtl"] .tcl-react-media.tcl-react-media--end-gradient:after,
[dir="rtl"] .tcl-react-media.tcl-react-media--start-gradient:before {
right: 0;
}
.tcl-react-media.tcl-react-media--end-gradient:after,
.tcl-react-media.tcl-react-media--start-gradient:before {
background: -webkit-gradient(
linear,
left bottom,
left top,
from(transparent),
to(var(--tds-color-white))
);
background: linear-gradient(0deg, transparent, var(--tds-color-white));
background: -webkit-gradient(
linear,
left bottom,
left top,
from(transparent),
to(var(--tcl-react-media--start-gradient-color))
);
background: linear-gradient(
0deg,
transparent,
var(--tcl-react-media--start-gradient-color)
);
height: 20%;
height: var(--tcl-react-media--start-gradient-size);
content: "";
width: 100%;
inset-inline-start: 0;
opacity: 1;
opacity: var(--tcl-react-media--start-gradient-opacity, 1);
position: absolute;
}
.tcl-react-media.tcl-react-media--end-gradient:after {
background: -webkit-gradient(
linear,
left top,
left bottom,
from(transparent),
to(var(--tds-color-white))
);
background: linear-gradient(180deg, transparent, var(--tds-color-white));
background: -webkit-gradient(
linear,
left top,
left bottom,
from(transparent),
to(var(--tcl-react-media--end-gradient-color))
);
background: linear-gradient(
180deg,
transparent,
var(--tcl-react-media--end-gradient-color)
);
height: 20%;
height: var(--tcl-react-media--end-gradient-size);
bottom: 0;
opacity: 1;
opacity: var(--tcl-react-media--end-gradient-opacity, 1);
}
.tcl-media--rounded-corners {
--tcl-react-media--border-radius: var(--tcl-border-radius);
}
.tcl-media--rounded-corners-top-left {
--tcl-react-media--border-top-left-radius: var(--tcl-border-radius);
}
.tcl-media--rounded-corners-top-right {
--tcl-react-media--border-top-right-radius: var(--tcl-border-radius);
}
.tcl-media--rounded-corners-bottom-left {
--tcl-react-media--border-bottom-left-radius: var(--tcl-border-radius);
}
.tcl-media--rounded-corners-bottom-right {
--tcl-react-media--border-bottom-right-radius: var(--tcl-border-radius);
}
.tds-video-player {
position: relative;
}
[dir="ltr"] .tcl-video__controls {
right: unset;
}
[dir="rtl"] .tcl-video__controls {
left: unset;
}
[dir="ltr"] .tcl-video__controls {
right: var(--tcl-media__video-control--inset-inline-end);
}
[dir="rtl"] .tcl-video__controls {
left: var(--tcl-media__video-control--inset-inline-end);
}
[dir="ltr"] .tcl-video__controls {
left: unset;
}
[dir="rtl"] .tcl-video__controls {
right: unset;
}
[dir="ltr"] .tcl-video__controls {
left: var(--tcl-media__video-control--inset-inline-start);
}
[dir="rtl"] .tcl-video__controls {
right: var(--tcl-media__video-control--inset-inline-start);
}
.tcl-video__controls {
--tds-icon--size: var(--tds-size-3x);
--tds-icon-btn--background: hsla(0, 0%, 50%, 0.65);
bottom: unset;
bottom: var(--tcl-media__video-control--inset-block-end);
top: unset;
top: var(--tcl-media__video-control--inset-block-start);
inset-inline-end: unset;
inset-inline-end: var(--tcl-media__video-control--inset-inline-end);
inset-inline-start: unset;
inset-inline-start: var(--tcl-media__video-control--inset-inline-start);
position: absolute;
z-index: 3;
}
.tcl-video__controls .tds-icon {
color: var(--tds-color-white);
}
.tcl-video__controls.tds-icon-btn:focus {
-webkit-box-shadow: unset;
box-shadow: unset;
}
[dir="ltr"] .tds-video-player__overlay {
left: 0;
}
[dir="rtl"] .tds-video-player__overlay {
right: 0;
}
.tds-video-player__overlay {
height: 100%;
top: 0;
inset-inline-start: 0;
position: absolute;
width: 100%;
z-index: 1;
}
button.tcl-video__controls:focus-visible {
border: var(--tds-border-width--hairline) solid var(--tds-color-white);
}
.tcl-react-media .tds-tooltip-wrapper--inline {
height: -moz-fit-content;
height: -webkit-fit-content;
height: fit-content;
position: unset;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
}
.tcl-video__controls {
--tcl-media__video-control--inset-block-end: var(
--tcl-media__video-control--inset-size
);
--tcl-media__video-control--inset-inline-start: var(
--tcl-media__video-control--inset-size
);
}
.tcl-video__controls,
.tds-theme--replicant-v2 .tcl-video__controls {
--tcl-media__video-control--inset-block-start: unset;
--tcl-media__video-control--inset-inline-end: unset;
}
.tds-theme--replicant-v2 .tcl-video__controls {
--tcl-media__video-control--inset-block-end: var(--tds-size-2x);
--tcl-media__video-control--inset-inline-start: var(--tds-size-2x);
--clip-size: var(--tds-size-1x);
--tds-icon--size: var(--tds-size-2x);
backdrop-filter: blur(4px);
backdrop-filter: blur(var(--tds-blur--small));
background-color: var(--tds-color-ct-bg);
height: var(--tds-size-4x);
opacity: 0.8;
width: var(--tds-size-4x);
z-index: 1;
}
.tds-theme--replicant-v2 button.tcl-video__controls:focus-visible {
border: var(--tds-border-width--hairline) solid var(--tds-color-white);
}
@media (max-width: 1200px) and (min-width: 600px) {
.tcl-video__controls {
--tcl-media__video-control--inset-block-start: var(
--tcl-media__video-control--inset-size
);
--tcl-media__video-control--inset-inline-end: var(
--tcl-media__video-control--inset-size
);
}
.tcl-video__controls,
.tds-theme--replicant-v2 .tcl-video__controls {
--tcl-media__video-control--inset-block-end: unset;
--tcl-media__video-control--inset-inline-start: unset;
}
.tds-theme--replicant-v2 .tcl-video__controls {
--tcl-media__video-control--inset-block-start: var(--tds-size-2x);
--tcl-media__video-control--inset-inline-end: var(--tds-size-2x);
}
.tcl-section:first-of-type
.tcl-video__controls:not(
.tcl-video__controls--bottomLeft,
.tcl-video__controls--bottomRight
) {
--tcl-media__video-control--inset-block-start: calc(
var(--tcl-media__video-control--inset-size) +
var(--tds-shell-header-height)
);
}
}
@media (max-width: 599px) {
.tcl-video__controls {
--tcl-media__video-control--inset-block-start: var(
--tcl-media__video-control--inset-size
);
--tcl-media__video-control--inset-inline-end: var(
--tcl-media__video-control--inset-size
);
}
.tcl-video__controls,
.tds-theme--replicant-v2 .tcl-video__controls {
--tcl-media__video-control--inset-block-end: unset;
--tcl-media__video-control--inset-inline-start: unset;
}
.tds-theme--replicant-v2 .tcl-video__controls {
--tcl-media__video-control--inset-block-start: var(--tds-size-2x);
--tcl-media__video-control--inset-inline-end: var(--tds-size-2x);
}
.tcl-section:first-of-type
.tcl-video__controls:not(
.tcl-video__controls--bottomLeft,
.tcl-video__controls--bottomRight
) {
--tcl-media__video-control--inset-block-start: calc(
var(--tcl-media__video-control--inset-size) +
var(--tds-shell-header-height)
);
}
}
.tcl-video__controls--topLeft {
--tcl-media__video-control--inset-inline-start: var(
--tcl-media__video-control--inset-size
);
--tcl-media__video-control--inset-inline-end: unset;
}
.tcl-video__controls--topLeft,
.tcl-video__controls--topRight {
--tcl-media__video-control--inset-block-start: var(
--tcl-media__video-control--inset-size
);
--tcl-media__video-control--inset-block-end: unset;
}
.tcl-video__controls--topRight {
--tcl-media__video-control--inset-inline-start: unset;
--tcl-media__video-control--inset-inline-end: var(
--tcl-media__video-control--inset-size
);
}
.tcl-video__controls--bottomLeft {
--tcl-media__video-control--inset-inline-start: var(
--tcl-media__video-control--inset-size
);
--tcl-media__video-control--inset-inline-end: unset;
}
.tcl-video__controls--bottomLeft,
.tcl-video__controls--bottomRight {
--tcl-media__video-control--inset-block-start: unset;
--tcl-media__video-control--inset-block-end: var(
--tcl-media__video-control--inset-size
);
}
.tcl-video__controls--bottomRight {
--tcl-media__video-control--inset-inline-start: unset;
--tcl-media__video-control--inset-inline-end: var(
--tcl-media__video-control--inset-size
);
}
@media (max-width: 1200px) and (min-width: 600px) {
.tcl-section:first-of-type .tcl-video__controls--topLeft,
.tcl-section:first-of-type .tcl-video__controls--topRight {
--tcl-media__video-control--inset-block-start: calc(
var(--tcl-media__video-control--inset-size) +
var(--tds-shell-header-height)
);
}
}
@media (max-width: 599px) {
.tcl-section:first-of-type .tcl-video__controls--topLeft,
.tcl-section:first-of-type .tcl-video__controls--topRight {
--tcl-media__video-control--inset-block-start: calc(
var(--tcl-media__video-control--inset-size) +
var(--tds-shell-header-height)
);
}
}
.tcl-text-align--left {
text-align: left;
}
.tcl-text-align--right {
text-align: right;
}
.tcl-text-align--center {
text-align: center;
}
.tcl-text-align--justify {
text-align: justify;
}
[dir="ltr"] .tcl-text-align--start {
text-align: left;
}
[dir="rtl"] .tcl-text-align--start {
text-align: right;
}
.tcl-text-align--start {
text-align: start;
}
[dir="ltr"] .tcl-text-align--end {
text-align: right;
}
[dir="rtl"] .tcl-text-align--end {
text-align: left;
}
.tcl-text-align--end {
text-align: end;
}
.tcl-justify-content--start {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
justify-items: flex-start;
}
.tcl-justify-content--end {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
justify-items: flex-end;
}
.tcl-justify-content--center {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
justify-items: center;
}
.tcl-justify-content--space-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
justify-items: space-between;
}
.tcl-justify-content--space-around {
-ms-flex-pack: distribute;
justify-content: space-around;
justify-items: space-around;
}
.tcl-justify-content--space-evenly {
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
justify-items: space-evenly;
}
.tcl-justify-self--start {
justify-self: flex-start;
}
.tcl-justify-self--end {
justify-self: flex-end;
}
.tcl-justify-self--center {
justify-self: center;
}
.tcl-justify-self--stretch {
justify-self: stretch;
}
.tcl-justify-self--baseline {
justify-self: baseline;
}
.tcl-align-content--start {
-ms-flex-line-pack: start;
align-content: flex-start;
}
.tcl-align-content--end {
-ms-flex-line-pack: end;
align-content: flex-end;
}
.tcl-align-content--center {
-ms-flex-line-pack: center;
align-content: center;
}
.tcl-align-content--space-between {
-ms-flex-line-pack: justify;
align-content: space-between;
}
.tcl-align-content--space-around {
-ms-flex-line-pack: distribute;
align-content: space-around;
}
.tcl-align-content--space-evenly {
-ms-flex-line-pack: space-evenly;
align-content: space-evenly;
}
.tcl-align-content--stretch {
-ms-flex-line-pack: stretch;
align-content: stretch;
}
.tcl-align-items--start {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.tcl-align-items--end {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.tcl-align-items--center {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.tcl-align-items--space-between {
-webkit-box-align: space-between;
-ms-flex-align: space-between;
align-items: space-between;
}
.tcl-align-items--space-around {
-webkit-box-align: space-around;
-ms-flex-align: space-around;
align-items: space-around;
}
.tcl-align-items--space-evenly {
-webkit-box-align: space-evenly;
-ms-flex-align: space-evenly;
align-items: space-evenly;
}
.tcl-align-items--stretch {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.tcl-align-self--start {
-ms-flex-item-align: start;
align-self: flex-start;
}
.tcl-align-self--end {
-ms-flex-item-align: end;
align-self: flex-end;
}
.tcl-align-self--center {
-ms-flex-item-align: center;
align-self: center;
}
.tcl-align-self--stretch {
-ms-flex-item-align: stretch;
align-self: stretch;
}
.tcl-align-self--baseline {
-ms-flex-item-align: baseline;
align-self: baseline;
}
:root {
--tcl-button--inline-size: auto;
--tcl-button--max-inline-size: auto;
}
.tcl-button-group--flex .tcl-button.tcl-button {
width: auto;
width: var(--tcl-button--inline-size);
max-width: auto;
max-width: var(--tcl-button--max-inline-size);
min-width: auto;
}
.tcl-button-group {
max-width: 100%;
}
.tcl-flex-module__component .tcl-button-group.tcl-button-group--flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: var(--tds-size-1x);
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
}
@media (max-width: 599px) {
.tcl-button-group--full-width-two-cta
.tcl-flex-module__component-type--buttonGroup:not(
:has(> .tcl-button-group--one-cta)
),
.tcl-button-group--full-width
:is(
.tcl-flex-module__component-type--buttonGroup,
.tcl-flex-module__component-type--buttonGroup .tcl-button-group
) {
width: 100%;
}
.tcl-button-group--full-width-two-cta
.tcl-flex-module__component-type--buttonGroup:not(
:has(> .tcl-button-group--one-cta)
)
.tcl-button,
.tcl-button-group--full-width
:is(
.tcl-flex-module__component-type--buttonGroup,
.tcl-flex-module__component-type--buttonGroup .tcl-button-group
)
.tcl-button {
width: 100%;
max-width: none;
}
.tcl-button-group--full-width-two-cta
.tcl-flex-module__component-type--buttonGroup:not(
:has(> .tcl-button-group--one-cta)
)
.tcl-button-group {
width: 100%;
}
.tcl-button-group--full-width-two-cta
.tcl-flex-module__component-type--buttonGroup:not(
:has(> .tcl-button-group--one-cta)
)
.tcl-button-group
.tcl-button {
width: 100%;
max-width: none;
}
}
.tcl-btn--high-contrast {
--tds-btn--background-color: var(--tds-theme-foreground-high-contrast);
color: var(--tds-theme-background-container-highlight);
}
.tcl-btn--high-contrast:not([disabled], .tds--disabled):is(
:hover,
.tds--hover,
:focus,
.tds--focus
) {
--tds-btn--background-color: var(--tds-theme-foreground);
}
.tds-scrim--grey .tds-btn--tertiary {
--tds-btn--background-color: #333;
}
.tds-scrim--grey
.tds-btn--tertiary:not([disabled], .tds--disabled):is(
:hover,
.tds--hover,
:focus,
.tds--focus
) {
--tds-btn--background-color: #444;
}
:root {
--tcl-flex-module__container--padding-inline-start: 0px;
--tcl-flex-module__container--padding-inline-end: 0px;
--tcl-flex-module__container--padding-block-start: 0px;
--tcl-flex-module__container--padding-block-end: 0px;
--tcl-flex-module__component--padding-inline-start: 0px;
--tcl-flex-module__component--padding-inline-end: 0px;
--tcl-flex-module__component--padding-block-start: 0px;
--tcl-flex-module__component--padding-block-end: 0px;
--tcl-flex-module__component--margin-inline-start: 0px;
--tcl-flex-module__component--margin-inline-end: 0px;
--tcl-flex-module__component--margin-block-start: 0px;
--tcl-flex-module__component--margin-block-end: 0px;
--tcl-flex-module__container--column-start: 1;
--tcl-flex-module__container--column-end: -1;
--tcl-flex-module__container--row-start: 1;
--tcl-flex-module__container--row-end: -1;
--tcl-flex-module__container--border-radius: 0px;
--tcl-flex-module__container--background-color: transparent;
--tcl-flex-module__grid-template--rows: 48;
--tcl-flex-module__grid-template--cols: 48;
--tcl-flex-module__grid-row-gap: 0;
--tcl-flex-module__grid-col-gap: 0;
--tcl-flex-module--inline-size: 100%;
--tcl-flex-module--block-size: 100%;
}
.tcl-flex-module {
background-color: initial;
height: 100%;
height: var(--tcl-flex-module--block-size);
width: 100%;
width: var(--tcl-flex-module--inline-size);
min-height: -moz-fit-content;
min-height: -webkit-fit-content;
min-height: fit-content;
position: relative;
-webkit-writing-mode: initial;
-ms-writing-mode: initial;
writing-mode: initial;
}
.tcl-flex-module__content {
height: 100%;
-moz-column-gap: 0;
-moz-column-gap: var(--tcl-flex-module__grid-col-gap);
-webkit-column-gap: 0;
column-gap: 0;
-webkit-column-gap: var(--tcl-flex-module__grid-col-gap);
column-gap: var(--tcl-flex-module__grid-col-gap);
display: grid;
grid-template-columns: repeat(48, 1fr);
grid-template-columns: repeat(
var(--tcl-flex-module__grid-template--cols),
1fr
);
grid-template-rows: repeat(48, 1fr);
grid-template-rows: repeat(var(--tcl-flex-module__grid-template--rows), 1fr);
width: 100%;
row-gap: 0;
row-gap: var(--tcl-flex-module__grid-row-gap);
}
.tcl-dynamic-section--block-size--fit-content {
--tcl-flex-module--block-size: auto;
}
.tcl-dynamic-section--block-size--fit-content
.tcl-flex-module-carousel__slide
.tcl-flex-module {
min-height: 100%;
}
.tcl-dynamic-section--block-size--fit-content
.tcl-flex-module-carousel__slide
.tcl-flex-module__content {
height: auto;
width: auto;
}
.tcl-flex-module .tcl-flex-module__background-media {
position: absolute;
z-index: 0;
}
[dir="ltr"] .tcl-flex-module .tcl-flex-module__container {
margin-right: var(--tcl-flex-module__container--margin-inline-end);
}
[dir="rtl"] .tcl-flex-module .tcl-flex-module__container {
margin-left: var(--tcl-flex-module__container--margin-inline-end);
}
[dir="ltr"] .tcl-flex-module .tcl-flex-module__container {
margin-left: var(--tcl-flex-module__container--margin-inline-start);
}
[dir="rtl"] .tcl-flex-module .tcl-flex-module__container {
margin-right: var(--tcl-flex-module__container--margin-inline-start);
}
[dir="ltr"] .tcl-flex-module .tcl-flex-module__container {
padding-right: 0;
}
[dir="rtl"] .tcl-flex-module .tcl-flex-module__container {
padding-left: 0;
}
[dir="ltr"] .tcl-flex-module .tcl-flex-module__container {
padding-right: var(--tcl-flex-module__container--padding-inline-end);
}
[dir="rtl"] .tcl-flex-module .tcl-flex-module__container {
padding-left: var(--tcl-flex-module__container--padding-inline-end);
}
[dir="ltr"] .tcl-flex-module .tcl-flex-module__container {
padding-left: 0;
}
[dir="rtl"] .tcl-flex-module .tcl-flex-module__container {
padding-right: 0;
}
[dir="ltr"] .tcl-flex-module .tcl-flex-module__container {
padding-left: var(--tcl-flex-module__container--padding-inline-start);
}
[dir="rtl"] .tcl-flex-module .tcl-flex-module__container {
padding-right: var(--tcl-flex-module__container--padding-inline-start);
}
.tcl-flex-module .tcl-flex-module__container {
background: transparent;
background: var(--tcl-flex-module__container--background-color);
border-radius: 0;
border-radius: var(--tcl-flex-module__container--border-radius);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
grid-column-end: -1;
grid-column-end: var(--tcl-flex-module__container--column-end);
grid-column-start: 1;
grid-column-start: var(--tcl-flex-module__container--column-start);
grid-row-end: -1;
grid-row-end: var(--tcl-flex-module__container--row-end);
grid-row-start: 1;
grid-row-start: var(--tcl-flex-module__container--row-start);
margin-bottom: var(--tcl-flex-module__container--margin-block-end);
margin-top: var(--tcl-flex-module__container--margin-block-start);
-webkit-margin-end: var(--tcl-flex-module__container--margin-inline-end);
margin-inline-end: var(--tcl-flex-module__container--margin-inline-end);
-webkit-margin-start: var(--tcl-flex-module__container--margin-inline-start);
margin-inline-start: var(--tcl-flex-module__container--margin-inline-start);
max-height: 100%;
max-width: 100%;
max-width: var(--tcl-flex-module__container--max-inline-size, 100%);
padding-bottom: 0;
padding-bottom: var(--tcl-flex-module__container--padding-block-end);
padding-top: 0;
padding-top: var(--tcl-flex-module__container--padding-block-start);
-webkit-padding-end: 0;
padding-inline-end: 0;
-webkit-padding-end: var(--tcl-flex-module__container--padding-inline-end);
padding-inline-end: var(--tcl-flex-module__container--padding-inline-end);
-webkit-padding-start: 0;
padding-inline-start: 0;
-webkit-padding-start: var(
--tcl-flex-module__container--padding-inline-start
);
padding-inline-start: var(--tcl-flex-module__container--padding-inline-start);
pointer-events: none;
z-index: 1;
}
.tcl-flex-module__container--rounded-corners {
--tcl-flex-module__container--border-radius: var(--tcl-border-radius);
}
.tcl-flex-module .tcl-flex-module__container > * {
pointer-events: all;
}
.tcl-flex-module .tcl-button-group .tds-btn {
--tcl-button--inline-size: 252px;
}
[dir="ltr"] .tcl-flex-module__component {
margin-right: 0;
}
[dir="rtl"] .tcl-flex-module__component {
margin-left: 0;
}
[dir="ltr"] .tcl-flex-module__component {
margin-right: var(--tcl-flex-module__component--margin-inline-end);
}
[dir="rtl"] .tcl-flex-module__component {
margin-left: var(--tcl-flex-module__component--margin-inline-end);
}
[dir="ltr"] .tcl-flex-module__component {
margin-left: 0;
}
[dir="rtl"] .tcl-flex-module__component {
margin-right: 0;
}
[dir="ltr"] .tcl-flex-module__component {
margin-left: var(--tcl-flex-module__component--margin-inline-start);
}
[dir="rtl"] .tcl-flex-module__component {
margin-right: var(--tcl-flex-module__component--margin-inline-start);
}
[dir="ltr"] .tcl-flex-module__component {
padding-right: 0;
}
[dir="rtl"] .tcl-flex-module__component {
padding-left: 0;
}
[dir="ltr"] .tcl-flex-module__component {
padding-right: var(--tcl-flex-module__component--padding-inline-end);
}
[dir="rtl"] .tcl-flex-module__component {
padding-left: var(--tcl-flex-module__component--padding-inline-end);
}
[dir="ltr"] .tcl-flex-module__component {
padding-left: 0;
}
[dir="rtl"] .tcl-flex-module__component {
padding-right: 0;
}
[dir="ltr"] .tcl-flex-module__component {
padding-left: var(--tcl-flex-module__component--padding-inline-start);
}
[dir="rtl"] .tcl-flex-module__component {
padding-right: var(--tcl-flex-module__component--padding-inline-start);
}
.tcl-flex-module__component {
margin-bottom: 0;
margin-bottom: var(--tcl-flex-module__component--margin-block-end);
margin-top: 0;
margin-top: var(--tcl-flex-module__component--margin-block-start);
-webkit-margin-end: 0;
margin-inline-end: 0;
-webkit-margin-end: var(--tcl-flex-module__component--margin-inline-end);
margin-inline-end: var(--tcl-flex-module__component--margin-inline-end);
-webkit-margin-start: 0;
margin-inline-start: 0;
-webkit-margin-start: var(--tcl-flex-module__component--margin-inline-start);
margin-inline-start: var(--tcl-flex-module__component--margin-inline-start);
max-width: 100%;
overflow-wrap: break-word;
padding-bottom: 0;
padding-bottom: var(--tcl-flex-module__component--padding-block-end);
padding-top: 0;
padding-top: var(--tcl-flex-module__component--padding-block-start);
-webkit-padding-end: 0;
padding-inline-end: 0;
-webkit-padding-end: var(--tcl-flex-module__component--padding-inline-end);
padding-inline-end: var(--tcl-flex-module__component--padding-inline-end);
-webkit-padding-start: 0;
padding-inline-start: 0;
-webkit-padding-start: var(
--tcl-flex-module__component--padding-inline-start
);
padding-inline-start: var(--tcl-flex-module__component--padding-inline-start);
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
}
.tcl-flex-module__component--full-width {
width: 100%;
}
.tcl-flex-module__component:has(.tcl-react-media) {
height: 100%;
overflow: hidden;
width: 100%;
}
@media (max-width: 1199px) {
.tcl-flex-module__content {
--tcl-flex-module__grid-template--rows: 48;
--tcl-flex-module__grid-template--cols: 32;
}
}
@media (orientation: landscape) and (max-width: 1200px) and (max-height: 600px) {
.tcl-flex-module__content {
--tcl-flex-module__grid-template--rows: 16;
--tcl-flex-module__grid-template--cols: 48;
}
}
@media (max-width: 599px) {
.tcl-flex-module__content {
--tcl-flex-module__grid-template--rows: 48;
--tcl-flex-module__grid-template--cols: 16;
}
}
.tcl-flex-module-carousel {
height: 100%;
width: 100%;
}
.tcl-flex-module-carousel .tcl-flex-module-carousel__slides {
height: 100%;
width: 100%;
position: relative;
}
.tcl-flex-module-carousel__slides [class*="tcl-flex-module-carousel__slide"] {
justify-items: center;
opacity: 0;
-webkit-transition: opacity 1s ease-out, visibility 1s ease-out;
transition: opacity 1s ease-out, visibility 1s ease-out;
visibility: hidden;
}
.tcl-flex-module-carousel__slide {
height: 100%;
width: 100%;
position: absolute;
}
.tcl-flex-module-carousel__slides .tcl-flex-module-carousel__slide--active {
opacity: 1;
visibility: visible;
}
.tcl-flex-module-stacked-carousel .tcl-carousel__nav-button {
top: 50%;
}
:root {
--tcl-dynamic-section--width: 100%;
--tcl-dynamic-section--height: 100%;
--tcl-dynamic-section--max-width: 100%;
--tcl-dynamic-section--max-height: 100%;
--tcl-dynamic-section--padding-inline-start: 0px;
--tcl-dynamic-section--padding-inline-end: 0px;
--tcl-dynamic-section--padding-block-start: 0px;
--tcl-dynamic-section--padding-block-end: 0px;
}
.tcl-dynamic-section__container {
background: transparent;
background: var(--tcl-dynamic-section--background-color, transparent);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: relative;
width: 100%;
}
.tcl-dynamic-section__container:has(.tcl-dynamic-section--rounded-corners) {
border-radius: var(--tcl-border-radius);
}
[dir="ltr"] .tcl-dynamic-section {
padding-right: 0;
}
[dir="rtl"] .tcl-dynamic-section {
padding-left: 0;
}
[dir="ltr"] .tcl-dynamic-section {
padding-right: var(--tcl-dynamic-section--padding-inline-end);
}
[dir="rtl"] .tcl-dynamic-section {
padding-left: var(--tcl-dynamic-section--padding-inline-end);
}
[dir="ltr"] .tcl-dynamic-section {
padding-left: 0;
}
[dir="rtl"] .tcl-dynamic-section {
padding-right: 0;
}
[dir="ltr"] .tcl-dynamic-section {
padding-left: var(--tcl-dynamic-section--padding-inline-start);
}
[dir="rtl"] .tcl-dynamic-section {
padding-right: var(--tcl-dynamic-section--padding-inline-start);
}
.tcl-dynamic-section {
height: var(--tcl-dynamic-section--height);
height: var(
--tcl-dynamic-section--view-height,
var(--tcl-dynamic-section--height)
);
width: 100%;
width: var(--tcl-dynamic-section--width);
max-height: 100%;
max-height: var(--tcl-dynamic-section--max-height);
max-width: 100%;
max-width: var(--tcl-dynamic-section--max-width);
padding-bottom: 0;
padding-bottom: var(--tcl-dynamic-section--padding-block-end);
padding-top: 0;
padding-top: var(--tcl-dynamic-section--padding-block-start);
-webkit-padding-end: 0;
padding-inline-end: 0;
-webkit-padding-end: var(--tcl-dynamic-section--padding-inline-end);
padding-inline-end: var(--tcl-dynamic-section--padding-inline-end);
-webkit-padding-start: 0;
padding-inline-start: 0;
-webkit-padding-start: var(--tcl-dynamic-section--padding-inline-start);
padding-inline-start: var(--tcl-dynamic-section--padding-inline-start);
position: relative;
}
.tcl-dynamic-section.tcl-dynamic-section--block-size--viewport {
height: 100%;
height: var(
--tcl-dynamic-section--view-height,
calc(
var(--tcl-dynamic-section--height) - var(--tcl-bottom-banner-height, 0px) -
var(--tcl-top-banner-height, 0px)
)
);
}
.tcl-logo {
width: var(--tcl-logo-max-inline-size);
max-width: 100svw;
}
.tcl-logo .tds-icon {
height: 100%;
width: 100%;
}
.tds-icon-logo-we-robot-alt {
--tds-icon--color-stop-1: var(--tds-color-white);
--tds-icon--color-stop-2: #cd8e40;
}
.tcl-logo-size--xxxs {
--tcl-logo-max-inline-size: 160px;
}
.tcl-logo-size--xxs {
--tcl-logo-max-inline-size: 208px;
}
.tcl-logo-size--xs {
--tcl-logo-max-inline-size: 240px;
}
.tcl-logo-size--sm {
--tcl-logo-max-inline-size: 252px;
}
.tcl-logo-size--md {
--tcl-logo-max-inline-size: 312px;
}
.tcl-logo-size--lg {
--tcl-logo-max-inline-size: 324px;
}
.tcl-logo-size--xl {
--tcl-logo-max-inline-size: 343px;
}
.tcl-logo-size--xl-plus {
--tcl-logo-max-inline-size: 400px;
}
.tcl-logo-size--xxl {
--tcl-logo-max-inline-size: 432px;
}
.tcl-logo-size--xxxl {
--tcl-logo-max-inline-size: 560px;
}
.tcl-text-line {
max-width: unset;
padding: 0;
}
.tcl-text-line a.tds-link {
color: inherit;
}
.tcl-text-line [data-entity="dynamic-content-copy"],
.tcl-text-line [data-entity="dynamic-pricing-copy"] {
display: none;
}
.tcl-text-line [data-entity="dynamic-pricing-copy"][data-copy="price"] {
display: inline;
}
@media (hover: hover) {
.tcl-text-line a.tds-link:hover {
color: inherit;
}
}
: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
) {
padding-top: 0;
}
:root {
--tcl-badge--line-gap: 0;
--tcl-badge--max-inline-size: calc(var(--tds-size-base) * 40);
}
@media (max-width: 599px) {
:root {
--tcl-badge--max-inline-size: calc(var(--tds-size-base) * 35);
}
}
.tcl-badge {
height: -moz-fit-content;
height: -webkit-fit-content;
height: fit-content;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
gap: 0;
gap: var(--tcl-badge--line-gap);
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
}
.tcl-badge__top-line {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: var(--tds-size-half);
}
.tcl-badge__line {
max-width: calc(var(--tds-size-base) * 40);
max-width: var(--tcl-badge--max-inline-size);
}
.tcl-badge--equal-inline-size .tcl-badge {
-ms-flex-preferred-size: 0px;
flex-basis: 0px;
}
.tcl-badge--no-max-inline-size .tcl-badge {
--tcl-badge--max-inline-size: none;
}
:root {
--tcl-badge-group--gap: 0px;
--tcl-badge-group--max-inline-size: unset;
}
.tcl-badge-group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 0;
gap: var(--tcl-badge-group--gap);
width: 100%;
max-width: unset;
max-width: var(--tcl-badge-group--max-inline-size);
min-height: -moz-fit-content;
min-height: -webkit-fit-content;
min-height: fit-content;
}
.tcl-badge-group .tcl-badge__top-line .tcl-badge__block .tcl-text-line {
width: -moz-max-content;
width: -webkit-max-content;
width: max-content;
}
.tcl-badge-group__separator {
background: var(--tds-theme-border);
height: 100%;
-ms-flex-negative: 0;
flex-shrink: 0;
width: 1px;
}
.tcl-badge-group--horizontal {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.tcl-badge-group__badge-with-separator {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 0;
gap: var(--tcl-badge-group--gap);
}
.tcl-badge-group--vertical {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
}
.tcl-badge-group--vertical .tcl-badge-group__separator {
background: -webkit-gradient(
linear,
left top,
right top,
from(rgba(208, 209, 210, 0)),
color-stop(29.74%, rgba(208, 209, 210, 0.7490196078431373)),
color-stop(69.54%, rgba(208, 209, 210, 0.7490196078431373)),
to(rgba(208, 209, 210, 0))
);
background: linear-gradient(
90deg,
rgba(208, 209, 210, 0),
rgba(208, 209, 210, 0.7490196078431373) 29.74%,
rgba(208, 209, 210, 0.7490196078431373) 69.54%,
rgba(208, 209, 210, 0)
);
height: 1px;
width: 100%;
}
.tcl-badge-group--vertical .tcl-badge-group__badge-with-separator {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
@media (max-width: 2040px) {
.tcl-badge-group--horizontal
.tcl-badge-group__badge-with-separator:nth-child(5) {
display: none;
}
}
@media (max-width: 1600px) {
.tcl-badge-group--horizontal
.tcl-badge-group__badge-with-separator:nth-child(4) {
display: none;
}
}
@media (max-width: 599px) {
.tcl-flex-module--tab_switch_slide .tcl-badge-group {
gap: 24px;
gap: var(--tds-size--3x);
}
}
:root {
--tcl-icon--inline-size: 24px;
--tcl-icon--block-size: 24px;
}
.tcl-icon {
height: 24px;
height: var(--tcl-icon--block-size);
width: 24px;
width: var(--tcl-icon--inline-size);
max-height: min(100%, 100svh);
max-width: min(100%, 100svw);
}
.tcl-icon .tds-icon {
height: 100%;
width: 100%;
}
.tds-tooltip-wrapper--inline:has(> .tcl-carousel__nav-button) {
position: unset;
}
.tcl-carousel__nav-button {
backdrop-filter: blur(4px);
background-color: hsla(0, 0%, 100%, 0.7490196078431373);
-webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25098039215686274);
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25098039215686274);
top: 40%;
position: absolute;
z-index: 2;
}
.tcl-carousel__nav-button .tds-icon {
color: var(--tds-color-black);
}
[dir="ltr"] .tcl-carousel__nav--inline-start {
left: var(--tds-size-6x);
}
[dir="rtl"] .tcl-carousel__nav--inline-start {
right: var(--tds-size-6x);
}
.tcl-carousel__nav--inline-start {
inset-inline-start: var(--tds-size-6x);
}
[dir="ltr"] .tcl-carousel__nav--inline-end {
right: var(--tds-size-6x);
}
[dir="rtl"] .tcl-carousel__nav--inline-end {
left: var(--tds-size-6x);
}
.tcl-carousel__nav--inline-end {
inset-inline-end: var(--tds-size-6x);
}
.tds-theme--replicant-v2 .tcl-carousel__nav-button {
background-color: var(--tds-color-black);
}
.tds-theme--replicant-v2 .tcl-carousel__nav-button .tds-icon {
color: #8e8e8e;
}
.tcl-carousel__tab-list {
--tds-tab--gap: var(--tds-size-1x);
}
.tcl-carousel__tab-list .tds-tab {
background-color: var(--tds-theme-foreground-high-contrast);
height: var(--tds-size-base-plus);
border-radius: var(--tcl-border-radius);
width: var(--tds-size-base-plus);
line-height: var(--tds-size-base-plus);
}
.tcl-carousel__tab-list .tds-tab[aria-selected="false"] {
opacity: 0.5;
}
:root {
--tcl-freeflow-carousel-container__slide--max-inline-size: 1356px;
--tcl-freeflow-carousel-container__slide--block-size: fit-content;
--tcl-freeflow-carousel__slide-media--block-size: 580px;
--tcl-freeflow-carousel-container__column-gap: var(--tds-size-3x);
--tcl-freeflow-carousel-container__slides--padding-inline: var(
--tcl-section--padding-inline
);
}
@media (max-width: 1199px) {
:root {
--tcl-freeflow-carousel-container__slide--max-inline-size: 606px;
--tcl-freeflow-carousel__slide-media--block-size: 404px;
--tcl-freeflow-carousel-container__column-gap: var(--tds-size-2x);
}
}
@media (max-width: 599px) {
:root {
--tcl-freeflow-carousel-container__slide--max-inline-size: 330px;
--tcl-freeflow-carousel__slide-media--block-size: 370px;
}
}
.tcl-freeflow-carousel {
overflow-x: scroll;
overflow-y: hidden;
-ms-scroll-snap-type: x mandatory;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.tcl-freeflow-carousel::-webkit-scrollbar {
display: none;
}
.tcl-freeflow-carousel__container {
max-width: 100svw;
position: relative;
}
.tcl-freeflow-carousel-container__slides {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: var(--tds-size-3x);
gap: var(--tcl-freeflow-carousel-container__column-gap);
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
margin-left: auto;
margin-right: auto;
margin-inline: auto;
padding-inline: var(--tcl-section--padding-inline);
padding-left: var(--tcl-freeflow-carousel-container__slides--padding-inline);
padding-right: var(--tcl-freeflow-carousel-container__slides--padding-inline);
padding-inline: var(
--tcl-freeflow-carousel-container__slides--padding-inline
);
}
@media (min-width: 1200px) {
.tcl-freeflow-carousel-container__slides {
--tcl-grid-col-width: calc(
(
min(100svw, var(--tcl-section--max-inline-size)) -
var(--tcl-section--padding-inline) * 2 - var(--tcl-grid-col-gap) *
11
) / var(--tcl-grid-cols)
);
--tcl-freeflow-carousel-container__slides--padding-inline: max(
calc(
var(--tcl-section--padding-inline) +
(var(--tcl-grid-col-width) + var(--tcl-grid-col-gap)) *
var(--tcl-freeflow-carousel-slides--column-start)
),
calc(
100svw / 2 - var(--tcl-section--max-inline-size) / 2 +
(var(--tcl-grid-col-width) + var(--tcl-grid-col-gap)) *
var(--tcl-freeflow-carousel-slides--column-start) +
var(--tcl-section--padding-inline)
)
);
--tcl-freeflow-carousel-container__slide--inline-size: min(
var(--tcl-freeflow-carousel-container__slide--max-inline-size),
calc(
100svw - var(--tcl-section--padding-inline) * 2 -
var(--tcl-grid-col-width) * 2 - var(--tcl-grid-col-gap) * 2
)
);
}
}
@media (max-width: 599px) {
.tcl-freeflow-carousel-container__slides {
--tcl-freeflow-carousel-container__slides--padding-inline: var(
--tds-size-base-plus
);
}
}
@media (min-width: 1200px) {
.tcl-freeflow-carousel--medium .tcl-freeflow-carousel-container__slides {
--tcl-freeflow-carousel-container__slide--max-inline-size: 800px;
--tcl-freeflow-carousel__slide-media--block-size: 580px;
}
}
@media (min-width: 1200px) {
.tcl-freeflow-carousel--compact .tcl-freeflow-carousel-container__slides {
--tcl-freeflow-carousel-container__slide--max-inline-size: 580px;
--tcl-freeflow-carousel__slide-media--block-size: 580px;
}
}
.tcl-freeflow-carousel-container__slide-container {
--tcl-freeflow-carousel-container__slide--inline-size: var(
--tcl-freeflow-carousel-container__slide--max-inline-size
);
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
height: var(--tcl-freeflow-carousel-container__slide--block-size);
cursor: pointer;
width: var(--tcl-freeflow-carousel-container__slide--inline-size);
scroll-margin-inline-start: calc(
50svw - var(--tcl-freeflow-carousel-container__slide--inline-size) / 2
);
scroll-snap-align: start;
}
@media (min-width: 1199px) {
.tcl-freeflow-carousel-container__slide-container {
--tcl-freeflow-carousel-container__slide--inline-size: min(
var(--tcl-freeflow-carousel-container__slide--max-inline-size),
calc(
100svw - var(--tcl-section--padding-inline) * 2 -
var(--tcl-grid-col-width) * 2 - var(--tcl-grid-col-gap) * 2
)
);
}
}
.tcl-freeflow-carousel-container__slide-container--active {
cursor: unset;
}
@media (min-width: 2559px) {
.tcl-section--constrained
.tcl-dynamic-section:has(.tcl-freeflow-carousel-container__slides) {
padding-left: var(--tcl-section--padding-inline);
padding-right: var(--tcl-section--padding-inline);
padding-inline: var(--tcl-section--padding-inline);
}
.tcl-section--constrained
.tcl-freeflow-carousel
.tcl-freeflow-carousel-container__slides {
--tcl-freeflow-carousel-container__slides--padding-inline: 0;
}
.tcl-section--constrained
.tcl-freeflow-carousel
.tcl-freeflow-carousel-container__slide-container {
scroll-margin-inline-start: calc(
1280px - var(--tcl-section--padding-inline) -
var(--tcl-freeflow-carousel-container__slide--inline-size) / 2
);
}
}
.tcl-freeflow-carousel__tab-list {
margin-top: var(--tds-size-3x);
}
@media (max-width: 1199px) {
.tcl-freeflow-carousel__tab-list {
margin-top: var(--tds-size-2x);
}
}
.tds-theme--replicant-v2 .tcl-freeflow-carousel__container {
--tcl-freeflow-carousel__column-gap: var(--tds-size-2x);
background-position: 50%;
padding-top: var(--tds-size-8x);
padding-bottom: var(--tds-size-8x);
padding-block: var(--tds-size-8x);
}
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide-content {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding-top: 0;
padding-left: 0;
padding-right: 0;
padding-inline: 0;
}
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide-heading {
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: var(--tds-size-1x);
}
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide-heading1 {
color: #c7c7c7;
font-size: var(--tds-font-size-75);
line-height: var(--tds-size-5x);
}
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide-heading1
> sup {
top: -20px;
}
[dir="ltr"]
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide-heading2 {
padding-left: 0;
}
[dir="rtl"]
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide-heading2 {
padding-right: 0;
}
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide-heading2 {
color: #c7c7c7;
font-size: var(--tds-font-size-50);
line-height: var(--tds-line-height-40);
-webkit-padding-start: 0;
padding-inline-start: 0;
}
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide-heading2
> sup {
top: -12px;
}
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide-description {
color: var(--tds-color-ct-body);
font-size: var(--tds-font-size-30);
font-weight: var(--tds-font-weight-medium);
line-height: var(--tds-line-height-30);
padding: 0;
}
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide-description
> sup {
top: -4px;
}
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide,
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide--spacer {
margin-left: 0;
margin-right: 0;
margin-inline: 0;
}
@media (max-width: 599px) {
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide {
gap: var(--tds-size-base-plus);
}
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide-heading {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: var(--tds-size-half);
padding-bottom: var(--tds-size-half);
}
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide-heading1 {
font-size: var(--tds-font-size-70);
line-height: 34px;
}
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide-heading1
> sup {
top: -15px;
}
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide-heading2 {
font-size: var(--tds-size-3x);
font-weight: var(--tds-font-weight-medium);
line-height: var(--tds-line-height-60);
}
.tds-theme--replicant-v2
.tcl-freeflow-carousel__container
.tcl-freeflow-carousel__slide-heading2
> sup {
top: -12px;
}
}
.tcl-info-card {
height: 100%;
border-radius: var(--tcl-border-radius);
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
padding-left: 24px;
padding-right: 24px;
padding-inline: 24px;
padding-left: var(--tds-size--3x);
padding-right: var(--tds-size--3x);
padding-inline: var(--tds-size--3x);
}
@media (max-width: 599px) {
.tcl-info-card {
padding-left: 12px;
padding-right: 12px;
padding-inline: 12px;
}
}
.tcl-info-card--filled {
background-color: var(--tds-theme-background-container);
}
.tcl-info-card--bordered {
border: 1px solid rgba(0, 0, 0, 0.2);
}
.tcl-info-card--transparent {
padding-left: 0;
padding-right: 0;
padding-inline: 0;
}
@media (max-width: 1199px) {
.tcl-info-card--transparent {
padding-left: 12px;
padding-right: 12px;
padding-inline: 12px;
}
}
.tcl-info-card__content {
height: -moz-fit-content;
height: -webkit-fit-content;
height: fit-content;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
padding-top: var(--tds-size-4x);
padding-bottom: var(--tds-size-6x);
padding-block: var(--tds-size-4x) var(--tds-size-6x);
}
@media (max-width: 1199px) {
.tcl-info-card__content {
padding-top: var(--tds-size-3x);
padding-bottom: var(--tds-size-5x);
padding-block: var(--tds-size-3x) var(--tds-size-5x);
}
}
.tcl-info-card--transparent .tcl-info-card__content {
padding-top: 0;
padding-bottom: 0;
padding-block: 0;
}
.tcl-info-card .tcl-info-card__icon {
margin-bottom: var(--tds-size-2x);
}
.tcl-info-card .tcl-info-card__eyebrow {
margin-bottom: 4px;
margin-bottom: var(--tds-size--half);
}
.tcl-info-card .tcl-info-card__description {
margin-top: var(--tds-size-1x);
}
.tcl-info-card-group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: var(--tds-size-base-plus) 24px;
gap: var(--tds-size-base-plus) var(--tds-size--3x);
}
@media (max-width: 1199px) {
.tcl-info-card-group {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
.tcl-info-card-group:has(.tcl-info-card--transparent) {
row-gap: 40px;
row-gap: var(--tds-size--5x);
}
.tcl-freeflow-carousel-container__slide-container .tcl-info-card-group {
height: max(
var(--tcl-freeflow-carousel-container__slide--resized-block-size),
100%
);
}
.dx-permanent-cta-bar {
--tcl-dx-permanent-cta__min-width: 200px;
--tcl-dx-permanent-cta__max-width: 200px;
--tcl-dx-permanent-cta__backdrop-blur: 24px;
}
[dir="ltr"] .tcl-permanent-cta--mobile {
right: 0;
}
[dir="rtl"] .tcl-permanent-cta--mobile {
left: 0;
}
.tcl-permanent-cta--mobile {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-box-pack: right;
-ms-flex-pack: right;
bottom: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
height: 50px;
inset-inline-end: 0;
justify-content: right;
max-height: 100px;
overflow: hidden;
position: fixed;
z-index: 50;
}
@media (prefers-reduced-motion: no-preference) {
.tcl-permanent-cta--mobile {
-webkit-animation: showCta 0.25s;
animation: showCta 0.25s;
}
.tcl-permanent-cta--mobile.hidden {
-webkit-animation: hideCta 0.25s;
animation: hideCta 0.25s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
}
.dx-permanent-cta-bar--desktop.hidden,
.tw-chat--tds-modal--is-open section.tcl-permanent-cta--mobile {
display: none;
}
.permanent-cta-buttons {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
border-radius: 4px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
opacity: 1;
padding: 10px 0;
position: fixed;
-webkit-transition: opacity 0.2s ease-in;
transition: opacity 0.2s ease-in;
z-index: 998;
}
.permanent-cta-buttons.hidden {
opacity: 0;
-webkit-transition: opacity 0.2s ease-out;
transition: opacity 0.2s ease-out;
}
[dir="ltr"] .permanent-cta---button-menu {
margin-left: 8px;
}
[dir="rtl"] .permanent-cta---button-menu {
margin-right: 8px;
}
.permanent-cta---button-menu {
-webkit-margin-start: 8px;
background: var(--tds-color-grey-20);
margin-inline-start: 8px;
}
.tcl-permanent-cta--mobile .permanent-cta---button-link,
.tcl-permanent-cta--mobile .permanent-cta---button-menu {
background-color: var(--tds-color-grey-20);
-webkit-box-shadow: 0 2px 1px 0 #00000040;
box-shadow: 0 2px 1px 0 #00000040;
width: 100%;
}
.permanent-cta---button-menu--large {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
width: unset;
}
[dir="ltr"] .permanent-cta--menu-overlay {
left: 0;
}
[dir="rtl"] .permanent-cta--menu-overlay {
right: 0;
}
.permanent-cta--menu-overlay {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-box-pack: center;
-ms-flex-pack: center;
backdrop-filter: blur(24px);
background-color: #2d2d2d66;
bottom: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
font-size: var(--tds-font-size-50);
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
left: auto;
max-height: 500px;
overflow: hidden;
position: fixed;
right: 0;
top: auto;
inset: auto 0 0 auto;
inset-inline-start: 0;
justify-content: center;
justify-items: center;
padding-bottom: var(--tds-size-10x);
padding-top: var(--tds-size-10x);
padding-block: var(--tds-size-10x);
}
@media (prefers-reduced-motion: no-preference) {
.permanent-cta--menu-overlay {
-webkit-animation: showOverlay 0.25s ease-out;
animation: showOverlay 0.25s ease-out;
-webkit-animation: hideOverlay 0.25s ease-in-out;
animation: hideOverlay 0.25s ease-in-out;
}
}
.permanent-cta--menu-overlay.hidden {
backdrop-filter: blur(24px);
background-color: #2d2d2d00;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
opacity: 0;
padding-bottom: 0;
padding-top: 0;
padding-block: 0;
position: fixed;
visibility: hidden;
}
.permanent-cta--menu-item {
color: var(--tds-color-white);
font-size: var(--tds-font-size-20);
margin: var(--tds-size-2x) auto;
}
.dx-permanent-cta-bar--desktop .permanent-cta--menu-item,
.dx-permanent-cta-bar--desktop button {
margin: 20px var(--tds-size-3x);
}
.dx-permanent-cta-bar--desktop button {
padding: var(--tds-size-1x) var(--tds-size-2x);
}
.dx-permanent-cta-bar--desktop--buttons-wrapper {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-box-pack: end;
-ms-flex-pack: end;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
justify-content: flex-end;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
[dir="ltr"] .dx-permanent-cta-bar--desktop {
padding-right: var(--tds-size-3x);
}
[dir="rtl"] .dx-permanent-cta-bar--desktop {
padding-left: var(--tds-size-3x);
}
.dx-permanent-cta-bar--desktop {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-box-pack: end;
-ms-flex-pack: end;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-padding-end: var(--tds-size-3x);
align-items: center;
backdrop-filter: blur(var(--tcl-dx-permanent-cta__backdrop-blur));
background-color: #2d2d2d66;
bottom: auto;
color: var(--tds-color-white);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
left: auto;
position: fixed;
right: 0;
inset: 0 0 auto auto;
inset: var(--tcl-top-banner-height, 0) 0 auto auto;
justify-content: flex-end;
max-height: 42px;
overflow: hidden;
padding-inline-end: var(--tds-size-3x);
top: 0;
top: var(--tcl-top-banner-height, 0);
width: 100%;
z-index: 999;
}
[dir="ltr"] .dx-permanent-cta-bar--desktop--title {
margin-left: 48px;
}
[dir="rtl"] .dx-permanent-cta-bar--desktop--title {
margin-right: 48px;
}
[dir="ltr"] .dx-permanent-cta-bar--desktop--title {
left: 0;
}
[dir="rtl"] .dx-permanent-cta-bar--desktop--title {
right: 0;
}
.dx-permanent-cta-bar--desktop--title {
-webkit-margin-start: 48px;
color: var(--tds-color-white);
font-size: var(--tds-font-size-40);
inset-inline-start: 0;
margin-inline-start: 48px;
position: absolute;
}
.dx-permanent-cta---button-title {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
.tds-o-btn--width-48-40 {
max-height: var(--tds-size-5x);
max-width: var(--tds-size-5x);
min-height: var(--tds-size-5x);
min-width: var(--tds-size-5x);
padding: 0;
}
.permanent-cta---button-chevron-only {
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: var(--tds-size-5x);
justify-content: center;
position: relative;
width: var(--tds-size-8x);
}
.permanent-cta---button-chevron-only:hover {
cursor: pointer;
}
.chevron-down {
color: var(--tds-color-white);
}
[dir="ltr"] .margin-right-10 {
margin-right: 10px;
}
[dir="rtl"] .margin-right-10 {
margin-left: 10px;
}
.margin-right-10 {
-webkit-margin-end: 10px;
margin-inline-end: 10px;
}
.tds-o-text-14 {
font-size: 14px;
}
.tds-o-chevron-white,
.tds-o-text-white {
color: var(--tds-color-white);
}
.tds-o-link-color-white,
.tds-o-link-color-white:focus,
.tds-o-link-color-white:hover {
-webkit-box-shadow: none;
box-shadow: none;
color: var(--tds-color-white) !important;
}
.permanent-cta--backdrop {
bottom: auto;
height: 100vh;
left: 0;
margin: unset;
padding: unset;
position: fixed;
right: auto;
top: 0;
inset: 0 auto auto 0;
width: 110vw;
}
.permanent-cta--backdrop.hidden {
display: none;
}
[dir="ltr"] .tcl-permanent-cta--mobile .permanent-cta-buttons {
right: var(--tds-size-2x);
}
[dir="rtl"] .tcl-permanent-cta--mobile .permanent-cta-buttons {
left: var(--tds-size-2x);
}
.tcl-permanent-cta--mobile .permanent-cta-buttons {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
bottom: 10px;
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: var(--tds-size-5x);
inset-inline-end: var(--tds-size-2x);
outline: none;
padding: 0;
}
.tcl-permanent-cta-mobile .tds-btn--primary.permanent-cta---button-menu {
max-height: var(--tds-size-5x);
max-width: var(--tds-size-5x);
min-height: var(--tds-size-5x);
min-width: var(--tds-size-5x);
padding: 0;
}
.hide-pcta .tcl-permanent-cta {
display: none !important;
opacity: 0;
visibility: hidden;
}
@media (max-width: 599px) {
.permanent-cta--menu-overlay {
padding-bottom: 69px;
padding-top: 69px;
padding-block: 69px;
}
a.permanent-cta--menu-item {
margin: 16px auto;
}
}
@media (min-width: 600px) and (max-width: 1199px) {
.permanent-cta--menu-overlay {
padding-bottom: 34px;
padding-top: 34px;
padding-block: 34px;
}
a.permanent-cta--menu-item {
margin: 12px auto;
}
.tcl-permanent-cta--mobile .permanent-cta-buttons {
bottom: var(--tds-size-3x);
}
}
[dir="ltr"] [dir="rtl"] .permanent-cta--menu-overlay {
right: 0 !important;
}
[dir="rtl"] [dir="rtl"] .permanent-cta--menu-overlay {
left: 0 !important;
}
[dir="rtl"] .permanent-cta--menu-overlay {
inset-inline-end: 0 !important;
}
@media (orientation: landscape) and (max-height: 600px) {
.tcl-permanent-cta--mobile .permanent-cta---button-link {
max-width: var(--tcl-dx-permanent-cta__max-width);
min-width: var(--tcl-dx-permanent-cta__min-width);
}
[dir="ltr"] .avaya-chat-loaded .tw-chat--avaya-chat__button {
left: 24px;
}
[dir="rtl"] .avaya-chat-loaded .tw-chat--avaya-chat__button {
right: 24px;
}
.avaya-chat-loaded .tw-chat--avaya-chat__button {
inset-inline-start: 24px;
max-width: var(--tds-size-5x);
min-width: var(--tds-size-5x);
}
}
@media (min-width: 600px) {
[dir="ltr"] .avaya-chat-loaded .tw-chat--avaya-chat__button {
left: 24px;
}
[dir="rtl"] .avaya-chat-loaded .tw-chat--avaya-chat__button {
right: 24px;
}
.avaya-chat-loaded .tw-chat--avaya-chat__button {
inset-inline-start: 24px;
max-width: var(--tds-size-5x);
min-width: var(--tds-size-5x);
}
.tcl-permanent-cta .tds-btn--primary.permanent-cta---button-link {
max-width: 200px;
min-width: 200px;
}
}
@media (min-width: 1200px) and (max-width: 1799px), (min-width: 1800px) {
[dir="ltr"] [dir="rtl"] .avaya-chat-loaded .tw-chat--avaya-chat__button {
left: 32px;
}
[dir="rtl"] [dir="rtl"] .avaya-chat-loaded .tw-chat--avaya-chat__button {
right: 32px;
}
[dir="rtl"] .avaya-chat-loaded .tw-chat--avaya-chat__button {
inset-inline-start: 32px;
}
[dir="ltr"]
.avaya-chat-loaded
div.tw-chat--avaya-chat
.tw-chat--avaya-chat__button {
left: auto;
right: 32px;
}
[dir="rtl"]
.avaya-chat-loaded
div.tw-chat--avaya-chat
.tw-chat--avaya-chat__button {
left: 32px;
right: auto;
}
.avaya-chat-loaded div.tw-chat--avaya-chat .tw-chat--avaya-chat__button {
height: 40px;
inset-inline: auto 32px;
max-width: none;
min-width: auto;
width: 48px;
}
}
@media (max-width: 599px) {
[dir="ltr"] .avaya-chat-loaded .tw-chat--avaya-chat__button {
left: 24px;
}
[dir="rtl"] .avaya-chat-loaded .tw-chat--avaya-chat__button {
right: 24px;
}
.avaya-chat-loaded .tw-chat--avaya-chat__button {
inset-inline-start: 24px;
max-width: var(--tds-size-5x);
min-width: var(--tds-size-5x);
}
.tcl-permanent-cta--mobile .permanent-cta-buttons {
bottom: var(--tds-size-3x);
left: 24px;
right: 24px;
inset-inline: 24px 24px;
}
[dir="ltr"]
.avaya-chat-loaded
.tcl-permanent-cta--mobile
.permanent-cta-buttons {
left: 72px;
}
[dir="rtl"]
.avaya-chat-loaded
.tcl-permanent-cta--mobile
.permanent-cta-buttons {
right: 72px;
}
.avaya-chat-loaded .tcl-permanent-cta--mobile .permanent-cta-buttons {
inset-inline-start: 72px;
}
[dir="ltr"] .permanent-cta-buttons.menu-open {
left: auto !important;
}
[dir="rtl"] .permanent-cta-buttons.menu-open {
right: auto !important;
}
.permanent-cta-buttons.menu-open {
inset-inline-start: auto !important;
max-width: var(--tds-size-5x);
min-width: var(--tds-size-5x);
}
}
@-webkit-keyframes showCta {
0% {
display: block;
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes showCta {
0% {
display: block;
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes hideCta {
0% {
opacity: 1;
}
90% {
opacity: 0;
}
to {
display: none;
}
}
@keyframes hideCta {
0% {
opacity: 1;
}
90% {
opacity: 0;
}
to {
display: none;
}
}
@-webkit-keyframes hideOverlay {
0% {
bottom: 0;
opacity: 1;
}
to {
bottom: -600px;
opacity: 0;
}
}
@keyframes hideOverlay {
0% {
bottom: 0;
opacity: 1;
}
to {
bottom: -600px;
opacity: 0;
}
}
@-webkit-keyframes showOverlay {
0% {
bottom: -600px;
opacity: 0;
}
to {
bottom: 0;
opacity: 1;
}
}
@keyframes showOverlay {
0% {
bottom: -600px;
opacity: 0;
}
to {
bottom: 0;
opacity: 1;
}
}