.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
}
.applitools-activate .tds-global-menu .tds-site-header-modal,.applitools-activate .tds-site-header-modal+.tds-modal-backdrop {
display: none
}
.applitools-activate.tds-modal--is-open {
overflow: visible
}
body.regression-test-mode .dx-permanent-cta-bar--desktop,body.regression-test-mode .tcl-banner,body.regression-test-mode .tcl-carousel-banner,body.regression-test-mode .tcl-permanent-cta--mobile,body.regression-test-mode .tcl-simple-banner {
display: none;
opacity: 0;
visibility: hidden
}
.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,.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,.175);
--tds-theme-status-magenta-pastel: rgba(225,62,140,.175);
--tds-theme-status-purple-puzzo: #639;
--tds-theme-status-purple-pastel: rgba(134,62,225,.175);
--tds-theme-status-blue-pastel: rgba(62,107,226,.175);
--tds-theme-status-teal-pastel: #3eade126;
--tds-theme-status-green-pastel: rgba(2,176,40,.175);
--tds-theme-status-grey-pastel: rgba(93,94,98,.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,.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,.175);
--tds-theme-status-magenta-pastel: rgba(225,62,140,.175);
--tds-theme-status-purple-puzzo: #639;
--tds-theme-status-purple-pastel: rgba(134,62,225,.175);
--tds-theme-status-blue-pastel: rgba(62,107,226,.175);
--tds-theme-status-teal-pastel: #3eade126;
--tds-theme-status-green-pastel: rgba(2,176,40,.175);
--tds-theme-status-grey-pastel: rgba(93,94,98,.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%,.135);
--tds-theme-status-yellow-pastel: rgba(255,193,7,.225);
--tds-theme-status-orange-pastel: rgba(242,145,55,.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,.275);
--tds-theme-status-blue-pastel: rgba(62,107,226,.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: -.25em
}
sup {
top: -.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: .35em .75em .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(https://digitalassets.tesla.com/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(https://digitalassets.tesla.com/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(https://digitalassets.tesla.com/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(https://digitalassets.tesla.com/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(https://digitalassets.tesla.com/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(https://digitalassets.tesla.com/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(https://digitalassets.tesla.com/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(https://digitalassets.tesla.com/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(https://digitalassets.tesla.com/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(https://digitalassets.tesla.com/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(https://digitalassets.tesla.com/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(https://digitalassets.tesla.com/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(https://digitalassets.tesla.com/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(https://digitalassets.tesla.com/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(https://digitalassets.tesla.com/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(https://digitalassets.tesla.com/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(https://digitalassets.tesla.com/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(https://digitalassets.tesla.com/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(https://digitalassets.tesla.com/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(https://digitalassets.tesla.com/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(https://digitalassets.tesla.com/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(https://digitalassets.tesla.com/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(https://digitalassets.tesla.com/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(https://digitalassets.tesla.com/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(https://digitalassets.tesla.com/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(https://digitalassets.tesla.com/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(https://digitalassets.tesla.com/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(https://digitalassets.tesla.com/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(https://digitalassets.tesla.com/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(https://digitalassets.tesla.com/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(https://digitalassets.tesla.com/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(https://digitalassets.tesla.com/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,.048);
--tds-pill--blur-color-highlight: rgba(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: .25
}
8% {
opacity: 0
}
16% {
opacity: .25
}
24% {
opacity: 0
}
48% {
opacity: 0
}
to {
opacity: 1
}
}
@keyframes tds-flicker--soft {
0% {
opacity: 1
}
8% {
opacity: .25
}
16% {
opacity: 1
}
24% {
opacity: .25
}
32% {
opacity: 1
}
40% {
opacity: .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 .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 .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 .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 .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 .5s ease,color .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 .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 .33s ease,background-color .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 .33s ease,background-color .33s ease,color .33s ease,box-shadow .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 .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 .3s ease,color .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 .3s ease,color .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 .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 .33s ease,background-color .33s ease,box-shadow .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 .5s var(--tds-bezier),padding .5s var(--tds-bezier),background-color .33s ease,box-shadow .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 .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 .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 .3s ease;
transition: box-shadow .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 .3s ease;
transition: box-shadow .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 .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 .33s ease,background-color .33s ease,visibility 0s .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 .33s ease,background-color .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 .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 .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 .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 .33s ease,background-color .33s ease,box-shadow .25s ease,transform .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 .33s ease,transform .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: -.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 .3s ease,stroke .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 .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:5000px) {
.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 .33s var(--tds-bezier),color .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(.2em);
transition: transform .3s,background-image .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(.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) + .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 .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: .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 .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 .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 .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 .3s ease,transform .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 .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 .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 .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 .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 .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 .5s var(--tds-bezier),transform .5s var(--tds-bezier),visibility 0s .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 .5s var(--tds-bezier),transform .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 .5s ease,-webkit-backdrop-filter .5s ease;
transition: background-color .5s ease,backdrop-filter .5s ease;
transition: background-color .5s ease,backdrop-filter .5s ease,-webkit-backdrop-filter .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 .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) .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 .33s var(--tds-bezier),font-size .33s var(--tds-bezier),line-height .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 .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 .33s ease,transform .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 .3s ease,color .3s ease,opacity .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 .33s ease,background-color .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 .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 .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 .5s var(--tds-bezier),color .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 .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 .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 .33s ease .33s
}
.tds-switch-toggle-hidden-choice:checked+.tds-switch-toggle-label-wrapper .tds-switch-toggle--a11y-indicators:before {
opacity: .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 .33s ease .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 .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 .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 .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 .33s ease,box-shadow .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 .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: .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 .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: .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 .33s ease,background-color .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 .33s ease,transform .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 .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 .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 .3s ease,border-color .3s ease,box-shadow .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 .3s ease,border-color .3s ease,box-shadow .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 .3s ease,top .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 .3s ease,transform .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(.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 .3s ease,transform .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 .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 .5s .5s;
visibility: hidden
}
.tds-tab-panel--active {
display: block;
transition: visibility .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 .3s ease,transform .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 .3s ease,box-shadow .3s ease,color .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 .5s var(--tds-bezier),transform .5s var(--tds-bezier),visibility 0s .5s;
visibility: hidden
}
.tds-tooltip.tds-tooltip--open {
--tds-tooltip--translate-y: 0;
opacity: 1;
pointer-events: inherit;
transition: opacity .5s var(--tds-bezier),transform .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 .33s ease,color .33s ease,opacity .33s ease,padding .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: .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: .25em;
color: var(--tds-code--font-color);
max-inline-size: 100%;
padding: 0 .414em;
transition: background-color .3s ease,color .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 .5s;
transition: inline-size .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: .1em;
text-transform: uppercase;
transition: .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: .52s ease .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: .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: .52s ease .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 .5s ease,background-color .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 .33s ease
}
.tds-theme--replicant .tds-form-input-choice:after {
opacity: 0;
transform: none;
transition: opacity .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 .52s ease .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) .15);
content: "";
display: block;
inline-size: 100%;
margin-block-start: var(--tds-size--half);
opacity: .33;
position: absolute;
transition: opacity .33s ease,box-shadow .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 .52s ease .48s,box-shadow .52s ease .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) .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 .52s var(--tds-bezier) .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 .52s var(--tds-bezier) .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 .5px 0 0 #bbbbbbbf;
transition: color .33s ease,box-shadow .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 .33s ease,box-shadow .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,.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: .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: .5
}
16% {
opacity: 1
}
24% {
opacity: .5
}
32% {
opacity: 1
}
40% {
opacity: .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: .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: .52s ease .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: .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),.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 .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 .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: .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(https://digitalassets.tesla.com/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(https://digitalassets.tesla.com/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(https://digitalassets.tesla.com/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(https://digitalassets.tesla.com/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: .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: .2
}
.tds-theme--replicant-v2 .tds-btn--tertiary:hover {
opacity: .4
}
.tds-theme--replicant-v2 .tds-btn--tertiary:focus-visible {
opacity: .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: .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: .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: -.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: .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: .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 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
}[dir=ltr] .tcl-rich-text .tds-list--ordered,[dir=ltr] .tcl-rich-text .tds-list--padded,[dir=ltr] .tcl-rich-text .tds-list--timeline,[dir=ltr] .tcl-rich-text .tds-list--unordered {
padding-left: 16px;
padding-left: var(--tds-size--2x)
}[dir=rtl] .tcl-rich-text .tds-list--ordered,[dir=rtl] .tcl-rich-text .tds-list--padded,[dir=rtl] .tcl-rich-text .tds-list--timeline,[dir=rtl] .tcl-rich-text .tds-list--unordered {
padding-right: 16px;
padding-right: var(--tds-size--2x)
}
.tcl-rich-text .tds-list--ordered,.tcl-rich-text .tds-list--padded,.tcl-rich-text .tds-list--timeline,.tcl-rich-text .tds-list--unordered {
-webkit-padding-start: 16px;
-webkit-padding-start: var(--tds-size--2x);
padding-inline-start: 16px;
padding-inline-start: var(--tds-size--2x)
}
.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
}
@media (max-width:599px) {
.web-chat .web-chat-entrance {
left: 20px !important;
right: auto
}
.web-chat-modal {
margin-left: 0;
left: 0
}
}
#call-me-back-modal-cn .tds-scrim--black.tds-colorscheme--dark#tdsonecolumn {
background-color: var(--tds-color-grey-15)
}
#call-me-back-modal-cn :not(.tds-form--error)>.tds-form-input.tds-form-input--default {
--tds-form-input--border-color: var(--tds-color-grey-30)
}
#call-me-back-modal-cn .tds-form-input.tds-form-input--default {
background-color: var(--tds-color-grey-25)
}
#call-me-back-modal-cn .tds-form-input.tds-form-input--default input:-webkit-autofill,#call-me-back-modal-cn .tds-form-input.tds-form-input--default input:-webkit-autofill:focus {
transition: background-color 0s 600000s,color 0s 600000s
}
#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;
}
:root {
--tsla-mls-side-gutter: var(--tsla-cookie-side-gutter,12px);
--tsla-mls-bottom-offset: var(--tsla-cookie-banner-bottom-offset,80px)
}
.dx-mini-locale-selector__container {
--dx-mls-top-spacing: 56px;
backdrop-filter: blur(4px);
background: #f4f4f4d9;
border-radius: 8px;
bottom: 0;
-webkit-box-shadow: 0 8px 16px 0 #00000029;
box-shadow: 0 8px 16px 0 #00000029;
left: 12px;
left: var(--tsla-mls-side-gutter);
margin: 0 auto;
padding-bottom: 24px;
padding-top: 32px;
padding-block: 32px 24px;
position: fixed;
-webkit-transform: translateY(-80px);
transform: translateY(-80px);
-webkit-transform: translateY(calc(var(--tsla-mls-bottom-offset,0px)*-1));
transform: translateY(calc(var(--tsla-mls-bottom-offset,0px)*-1));
width: calc(100% - 24px);
width: calc(100% - var(--tsla-mls-side-gutter)*2);
z-index: 1000
}
.dx-mini-locale-selector__container[dir=ltr] {
padding-left: 24px;
padding-right: 14px
}
.dx-mini-locale-selector__container[dir=rtl] {
padding-left: 14px;
padding-right: 24px
}
.dx-mini-locale-selector__container .tds-btn--tertiary {
--tds-btn--background-color: var(--tds-theme-background)
}
.dx-mini-locale-selector__copy {
padding-bottom: 16px;
padding-bottom: var(--tds-size--2x);
padding-top: 0;
padding-block: 0 16px;
padding-block: 0 var(--tds-size--2x);
padding-left: 0;
padding-right: 0;
padding-inline: 0
}
.dx-mini-locale-selector__copy-header {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column
}
.dx-mini-locale-selector__container .tds-icon-btn {
position: absolute;
top: 4px
}
.dx-mini-locale-selector__container[dir=ltr] .tds-icon-btn {
right: 4px
}
.dx-mini-locale-selector__container[dir=rtl] .tds-icon-btn {
left: 4px
}
.dx-mini-locale-selector__container .tds-icon-btn,.dx-mini-locale-selector__container .tds-icon-btn.tds--highlighted,.dx-mini-locale-selector__container .tds-icon-btn:focus,.dx-mini-locale-selector__container .tds-icon-btn:hover {
--tds-icon-btn--background: #0000;
backdrop-filter: none
}
.dx-mini-locale-selector__heading {
color: #171a20;
display: block;
font-size: var(--tds-font-size-40);
font-style: normal;
font-weight: var(--tds-font-weight-medium);
line-height: var(--tds-line-height-40)
}
.dx-mini-locale-selector__paragraph {
color: var(--tds-theme-foreground-low-contrast);
font-size: var(--tds-font-size-20);
line-height: var(--tds-line-height-10)
}
.dx-mini-locale-selector__ctas {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 8px;
gap: var(--tds-size--1x)
}
.dx-mini-locale-selector__ctas .tds-btn {
font-size: 13px;
font-weight: var(--tds-font-weight-medium);
height: auto;
line-height: var(--tds-line-height-10);
min-height: 28px;
padding: 4px 16px;
padding: var(--tds-size--half) var(--tds-size--2x);
width: 140px
}
.dx-mini-locale-selector__ctas .tds-btn--primary {
background: var(--tds-theme-foreground-low-contrast)
}
@media (min-width:900px) {
.dx-mini-locale-selector__container {
bottom: unset;
left: unset;
margin-top: 12px;
right: 48px;
right: var(--tds-size--6x);
top: var(--dx-mls-top-spacing);
-webkit-transform: none;
transform: none;
width: 432px
}
}
@media (prefers-reduced-motion:no-preference) {
.dx-mini-locale-selector__container {
-webkit-transition: -webkit-transform .3s ease;
transition: -webkit-transform .3s ease;
transition: transform .3s ease;
transition: transform .3s ease,-webkit-transform .3s ease
}
}
.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 .tds--product-name {
white-space: nowrap
}
@media (max-width:1199px) {
.dx-mega-menu .tds-site-header-panel-content .tds--product-name {
white-space: unset
}
}
.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 .3s ease-out;
transition: all .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 .5s cubic-bezier(.5,0,0,.75),height .5s cubic-bezier(.5,0,0,.75) .5s,-webkit-transform .5s cubic-bezier(.5,0,0,.75);
transition: margin .5s cubic-bezier(.5,0,0,.75),height .5s cubic-bezier(.5,0,0,.75) .5s,-webkit-transform .5s cubic-bezier(.5,0,0,.75);
transition: transform .5s cubic-bezier(.5,0,0,.75),margin .5s cubic-bezier(.5,0,0,.75),height .5s cubic-bezier(.5,0,0,.75) .5s;
transition: transform .5s cubic-bezier(.5,0,0,.75),margin .5s cubic-bezier(.5,0,0,.75),height .5s cubic-bezier(.5,0,0,.75) .5s,-webkit-transform .5s cubic-bezier(.5,0,0,.75);
-webkit-transition: margin .5s var(--tds-bezier),height .5s var(--tds-bezier) .5s,-webkit-transform .5s var(--tds-bezier);
transition: margin .5s var(--tds-bezier),height .5s var(--tds-bezier) .5s,-webkit-transform .5s var(--tds-bezier);
transition: transform .5s var(--tds-bezier),margin .5s var(--tds-bezier),height .5s var(--tds-bezier) .5s;
transition: transform .5s var(--tds-bezier),margin .5s var(--tds-bezier),height .5s var(--tds-bezier) .5s,-webkit-transform .5s var(--tds-bezier)
}
.dx-mega-menu--expanded .tds-site-header-panel-content {
-webkit-transition: margin .5s cubic-bezier(.5,0,0,.75),height .5s cubic-bezier(.5,0,0,.75),-webkit-transform .5s cubic-bezier(.5,0,0,.75);
transition: margin .5s cubic-bezier(.5,0,0,.75),height .5s cubic-bezier(.5,0,0,.75),-webkit-transform .5s cubic-bezier(.5,0,0,.75);
transition: transform .5s cubic-bezier(.5,0,0,.75),margin .5s cubic-bezier(.5,0,0,.75),height .5s cubic-bezier(.5,0,0,.75);
transition: transform .5s cubic-bezier(.5,0,0,.75),margin .5s cubic-bezier(.5,0,0,.75),height .5s cubic-bezier(.5,0,0,.75),-webkit-transform .5s cubic-bezier(.5,0,0,.75);
-webkit-transition: margin .5s var(--tds-bezier),height .5s var(--tds-bezier),-webkit-transform .5s var(--tds-bezier);
transition: margin .5s var(--tds-bezier),height .5s var(--tds-bezier),-webkit-transform .5s var(--tds-bezier);
transition: transform .5s var(--tds-bezier),margin .5s var(--tds-bezier),height .5s var(--tds-bezier);
transition: transform .5s var(--tds-bezier),margin .5s var(--tds-bezier),height .5s var(--tds-bezier),-webkit-transform .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 .2s ease,margin 0s ease .2s;
transition: opacity .2s ease,margin 0s ease .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 .3s ease .2s,margin 0s ease;
transition: opacity .3s ease .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(.5,0,0,.75),-webkit-transform 0s cubic-bezier(.5,0,0,.75);
transition: opacity 0s cubic-bezier(.5,0,0,.75),-webkit-transform 0s cubic-bezier(.5,0,0,.75);
transition: transform 0s cubic-bezier(.5,0,0,.75),opacity 0s cubic-bezier(.5,0,0,.75);
transition: transform 0s cubic-bezier(.5,0,0,.75),opacity 0s cubic-bezier(.5,0,0,.75),-webkit-transform 0s cubic-bezier(.5,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: .5s;
transition-delay: .5s
}
.tds-site-header-panel[open] .dx-mega-menu-product {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transition: opacity .5s cubic-bezier(.5,0,0,.75),-webkit-transform .5s cubic-bezier(.5,0,0,.75);
transition: opacity .5s cubic-bezier(.5,0,0,.75),-webkit-transform .5s cubic-bezier(.5,0,0,.75);
transition: transform .5s cubic-bezier(.5,0,0,.75),opacity .5s cubic-bezier(.5,0,0,.75);
transition: transform .5s cubic-bezier(.5,0,0,.75),opacity .5s cubic-bezier(.5,0,0,.75),-webkit-transform .5s cubic-bezier(.5,0,0,.75);
-webkit-transition: opacity .5s var(--tds-bezier),-webkit-transform .5s var(--tds-bezier);
transition: opacity .5s var(--tds-bezier),-webkit-transform .5s var(--tds-bezier);
transition: transform .5s var(--tds-bezier),opacity .5s var(--tds-bezier);
transition: transform .5s var(--tds-bezier),opacity .5s var(--tds-bezier),-webkit-transform .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 .5s cubic-bezier(.5,0,0,.75),background-image .5s cubic-bezier(.5,0,0,.75),color .5s cubic-bezier(.5,0,0,.75);
transition: background-color .5s cubic-bezier(.5,0,0,.75),background-image .5s cubic-bezier(.5,0,0,.75),color .5s cubic-bezier(.5,0,0,.75);
-webkit-transition: background-color .5s var(--tds-bezier),background-image .5s var(--tds-bezier),color .5s var(--tds-bezier);
transition: background-color .5s var(--tds-bezier),background-image .5s var(--tds-bezier),color .5s var(--tds-bezier)
}
#tds-site-header-wrapper .tds-locale-selector--multicolumn .tds-locale-selector-column[class*=europe] {
-ms-flex-preferred-size: 50%;
flex-basis: 50%
}
.ajax-progress {
display: inline-block;
padding: 1px 5px 2px
}[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: .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: .2em;
color: #555;
font-size: .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: 0 0;
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: .5em;
padding: .5em 0;
text-align: center;
white-space: nowrap;
background-color: rgba(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: 700
}
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: -.4em .5em 0;
padding: .42em .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: -.4em .2em -.4em -.4em;
padding: .42em 0 .42em .6em
}[dir=rtl] .indentation {
float: right;
margin: -.4em -.4em -.4em .2em;
padding: .42em .6em .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-list__filter {
-webkit-margin-end: 16px;
-webkit-margin-end: var(--tds-size--2x);
inset-inline-end: -10px;
display: flex;
justify-content: flex-end;
margin-inline-end: 16px;
margin-inline-end: var(--tds-size--2x);
position: relative
}
@media (min-width:600px) {
.tcl-list__filter {
inset-inline-end: 0
}
}
.tcl-filter__form {
inset-block-start: 24px;
inset-block-start: var(--tds-size--3x);
box-shadow: 0 4px 16px rgba(0,0,0,.1);
max-width: 317px;
padding: 24px;
padding: var(--tds-size--3x);
position: absolute;
z-index: 10
}
.tcl-filter__form .tds-checkboxes {
padding: 0
}
.tcl-filter__filter {
--tds-form--indent: 0;
-webkit-padding-after: 0;
padding-block-end: 0
}
.tcl-filter__fieldset {
-webkit-padding-before: 0;
padding-block-start: 0
}
.tcl-filter__filter:first-of-type {
-webkit-padding-after: 4px;
-webkit-padding-after: var(--tds-size--half);
-webkit-padding-before: 0;
padding-block-end: 4px;
padding-block-end: var(--tds-size--half);
padding-block-start: 0
}
.tcl-filter__legend {
padding: 0 0 12px;
text-transform: capitalize
}
.tcl-list__filter[aria-expanded=false] .tcl-filter__form {
display: none
}
.tcl-list__filter .tds-btn {
width: 100%
}
.tcl-filter__icon {
-webkit-margin-after: -10px;
-webkit-margin-before: -4px;
background-color: var(--tds-icon-bg_color);
background-position: var(--tds-icon-bg_position);
background-repeat: var(--tds-icon-bg_repeat);
background-size: var(--tds-icon-bg_size);
block-size: 30px;
content: "";
cursor: pointer;
display: none;
inline-size: 30px;
margin-block-end: -10px;
margin-block-start: -4px;
overflow: hidden;
text-indent: -9999px
}
.tcl-list__filter.tcl-list__filtered .tcl-filter__icon-enabled,.tcl-list__filter.tcl-list__unfiltered .tcl-filter__icon-disabled {
display: inline-block
}
.tcl-filter__filter:last-of-type .tcl-filter__legend {
-webkit-padding-after: 8px;
-webkit-padding-after: var(--tds-size--1x);
padding-block-end: 8px;
padding-block-end: var(--tds-size--1x)
}
.tcl-list__content {
min-height: 700px;
transition: all .5s ease-in-out
}
.tcl-list__filter.loading {
opacity: 0;
transition: visibility 0s .1s,opacity .1s linear;
visibility: hidden
}
.tcl-list__content.loading {
-webkit-filter: blur(4px);
filter: blur(4px)
}
.tcl-filter__heading {
-webkit-padding-after: 16px;
-webkit-padding-after: var(--tds-size--2x);
-webkit-padding-before: 0;
padding-block-end: 16px;
padding-block-end: var(--tds-size--2x);
padding-block-start: 0
}
.tcl-filter__checkbox {
-webkit-margin-after: 16px;
-webkit-margin-after: var(--tds-size--2x);
-webkit-padding-after: 8px;
margin-block-end: 16px;
margin-block-end: var(--tds-size--2x);
padding-block-end: 8px
}
.tcl-pills {
-ms-grid-columns: (minmax(0,1fr))[4];
gap: 4px;
gap: var(--tds-size--half);
display: -ms-grid;
display: grid;
grid-template-columns: repeat(4,minmax(0,1fr))
}
.tcl-pill__input {
clip: rect(0 0 0 0);
block-size: 1px;
border: 0;
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
inline-size: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap
}
.tcl-pill__title {
--tds-btn--background-color: transparent;
inset-inline-start: 0;
color: currentColor;
font-size: var(--tds-font-size--3);
inline-size: 100%!important;
min-inline-size: auto
}
.tcl-pill__title:active,.tcl-pill__title:focus,.tcl-pill__title:hover {
--tds-btn--background-color: var(--tds-color--primary);
color: #fff!important;
color: var(--tds-color--white)!important
}
.tcl-pill__input:checked~.tcl-pill__label-wrap .tcl-pill__title {
--tds-btn--background-color: var(--tds-color--blue30);
color: #fff!important;
color: var(--tds-color--white)!important
}
.tcl-filter__filter .tds-form-caption {
font-weight: 400;
font-weight: var(--tds-font-weight--book)
}
.tcl-filter__filter .tds-form-input-choice {
-webkit-margin-end: 8px;
-webkit-margin-end: var(--tds-size--1x);
margin-inline-end: 8px;
margin-inline-end: var(--tds-size--1x)
}
.tcl-pager select {
display: inline-block;
outline-offset: 0
}
.tcl-article-teaser {
padding-bottom: var(--tds-size-3x);
padding-top: var(--tds-size-3x);
padding-block: var(--tds-size-3x) var(--tds-size-3x)
}
.tcl-article-teaser__heading {
display: block;
padding-bottom: 0
}
.tcl-article-teaser__published-date {
display: block;
padding-top: var(--tds-size-half)
}
.tcl-article-teaser__article-summary {
padding-top: var(--tds-size-2x)
}
.tcl-article-teaser__article-summary>* {
font-size: var(--tds-font-size-20);
line-height: var(--tds-line-height-10)
}
@media (min-width:600px) and (max-width:899px) {
.tcl-article-teaser {
padding-bottom: var(--tds-size-2x);
padding-top: var(--tds-size-1x);
padding-block: var(--tds-size-1x) var(--tds-size-2x)
}
}
@media (max-width:599px) {
.tcl-article-teaser {
padding-bottom: var(--tds-size-2x);
padding-top: 0;
padding-block: 0 var(--tds-size-2x)
}
}
:root {
--tcl-hero-banner-block-size: calc(var(--tds-size-1x)*72);
--tcl-hero-banner-datetime-justify-content: flex-start;
--tcl-hero-banner-min-block-size: 0;
--tcl-hero-banner-title-padding-block-end: var(--tds-size-3x);
--tcl-hero-banner-title-padding-block-start: 112px;
--tcl-hero-banner-title-text-align: start
}
@media (min-width:1800px) {
:root {
--tcl-hero-banner-title-padding-block-start: 10vh
}
}
@media (max-width:599px) {
:root {
--tcl-hero-banner-block-size: calc(var(--tds-size-1x)*45)
}
}
.tcl-hero-banner {
--tcl-button-backdrop-filter: blur(8px);
background-color: initial;
display: grid;
grid-template-areas: "hero-banner";
position: relative;
z-index: 1
}
.tcl-hero-banner--layout-inherit {
--tcl-image-inline-size: 100vw;
--tcl-video-inline-size: 100vw;
display: block;
min-height: calc(var(--tds-size-1x)*72);
min-height: var(--tcl-hero-banner-block-size)
}
@media (min-width:600px) {
.tcl-hero-banner--layout-inherit {
height: calc(var(--tds-size-1x)*72);
height: var(--tcl-hero-banner-block-size)
}
}
.tcl-hero-banner--size-tall {
--tcl-hero-banner-block-size: auto;
--tcl-hero-banner-title-padding-block-end: var(--tds-size-2x);
--tcl-hero-banner-title-padding-block-start: 16vh;
--tcl-hero-banner-title-text-align: center
}
@media (max-width:599px) {
.tcl-hero-banner--with-copy {
--tcl-hero-banner-datetime-justify-content: center;
--tcl-hero-banner-title-padding-block-start: 112px;
--tcl-hero-banner-title-text-align: center
}
.tcl-hero-banner--with-buttons {
--tcl-hero-banner-block-size: calc(var(--tds-size-1x)*56)
}
.tcl-hero-banner:not(.tcl-hero-banner--with-copy):not(.tcl-hero-banner--size-tall) {
--tcl-hero-banner-title-padding-block-end: var(--tds-size-1x);
--tcl-hero-banner-title-padding-block-start: var(--tds-size-3x)
}
.tcl-hero-banner--size-tall {
--tcl-hero-banner-title-padding-block-start: calc(9vh + var(--tds-size-3x))
}
}
@media (max-width:899px) {
.tcl-hero-banner--size-tall {
--tcl-hero-banner-title-padding-block-start: calc(9vh + var(--tds-size-3x))
}
}
@media (min-width:600px) {
.tcl-hero-banner {
--tcl-button-group-button-inline-size: calc(var(--tds-size-1x)*33);
--tcl-button-min-inline-size: calc(var(--tds-size-1x)*33)
}
}
.tcl-hero-banner__content {
width: 100%
}
.tcl-hero-banner .tcl-image,.tcl-hero-banner .tcl-video,.tcl-hero-banner--size-tall .tcl-hero-banner__content,.tcl-hero-banner__layout {
grid-area: hero-banner
}
.tcl-hero-banner__layout {
margin: 0 auto;
pointer-events: none;
width: 100%
}
@media (max-width:599px) {
.tcl-hero-banner:not(.tcl-hero-banner--with-copy) .tcl-hero-banner__layout {
grid-area: auto;
padding-bottom: var(--tds-size-3x)
}
}
.tcl-hero-banner .tcl-image,.tcl-hero-banner .tcl-video {
z-index: -1
}
.tcl-hero-banner--layout-inherit .tcl-image,.tcl-hero-banner--layout-inherit .tcl-video {
margin: 0 calc(-50vw + 50%);
position: absolute
}
@media (max-width:599px) {
.tcl-hero-banner--layout-inherit:not(.tcl-hero-banner--with-copy):not(.tcl-hero-banner--with-buttons) .tcl-image,.tcl-hero-banner--layout-inherit:not(.tcl-hero-banner--with-copy):not(.tcl-hero-banner--with-buttons) .tcl-video {
position: static
}
}
.tcl-hero-banner--size-tall .tcl-asset {
aspect-ratio: 21/9
}
.tcl-hero-banner:not(.tcl-hero-banner--size-tall) .tcl-asset {
height: calc(var(--tds-size-1x)*72);
height: var(--tcl-hero-banner-block-size);
min-height: 0;
min-height: var(--tcl-hero-banner-min-block-size)
}
@media (max-width:599px) {
.tcl-hero-banner--size-tall .tcl-asset {
aspect-ratio: 3/4
}
}
.tcl-hero-banner__title {
padding-bottom: var(--tcl-hero-banner-title-padding-block-end);
padding-top: 112px!important;
padding-top: var(--tcl-hero-banner-title-padding-block-start)!important
}
.tcl-hero-banner__copy,.tcl-hero-banner__title {
text-align: start;
text-align: var(--tcl-hero-banner-title-text-align)
}
.tcl-hero-banner__copy {
padding-bottom: var(--tds-size-3x);
padding-top: 0
}
@media (max-width:599px) {
.tcl-hero-banner__copy {
padding-bottom: var(--tds-size-1x)
}
}
.tcl-hero-banner__datetime {
-ms-flex-line-pack: stretch;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-box-pack: start;
-ms-flex-pack: start;
-webkit-box-pack: var(--tcl-hero-banner-datetime-justify-content);
-ms-flex-pack: var(--tcl-hero-banner-datetime-justify-content);
align-content: stretch;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
justify-content: flex-start;
justify-content: var(--tcl-hero-banner-datetime-justify-content);
padding-bottom: var(--tds-size-1x)
}[dir=ltr] .tcl-hero-banner__date,[dir=ltr] .tcl-hero-banner__time {
padding-right: calc(var(--tds-size-1x) + var(--tds-size-half))
}[dir=ltr] .tcl-hero-banner__date,[dir=ltr] .tcl-hero-banner__time,[dir=rtl] .tcl-hero-banner__date,[dir=rtl] .tcl-hero-banner__time {
padding-left: calc(var(--tds-size-1x) + var(--tds-size-half))
}[dir=rtl] .tcl-hero-banner__date,[dir=rtl] .tcl-hero-banner__time {
padding-right: calc(var(--tds-size-1x) + var(--tds-size-half))
}
.tcl-hero-banner__date,.tcl-hero-banner__time {
-webkit-padding-end: calc(var(--tds-size-1x) + var(--tds-size-half));
-webkit-padding-start: calc(var(--tds-size-1x) + var(--tds-size-half));
padding-inline-end: calc(var(--tds-size-1x) + var(--tds-size-half));
padding-top: var(--tds-size-2x);
padding-inline-start: calc(var(--tds-size-1x) + var(--tds-size-half))
}
@media (min-width:600px) {
.tcl-hero-banner__date {
padding: 0 calc(var(--tds-size-1x) + var(--tds-size-half)) 0 0
}
.tcl-hero-banner__time {
padding: 0 0 0 calc(var(--tds-size-1x) + var(--tds-size-half))
}
}
.tcl-hero-banner__buttons {
padding-bottom: var(--tds-size-2x);
padding-top: var(--tds-size-2x);
pointer-events: auto
}
.site-investor-relations .tcl-hero-banner {
--tcl-hero-banner-block-size: calc(var(--tds-size-1x)*48);
--tcl-hero-banner-min-block-size: 50vh
}
@media (max-width:599px) {
.site-investor-relations .tcl-hero-banner {
--tcl-hero-banner-block-size: calc(var(--tds-size-1x)*28);
--tcl-hero-banner-min-block-size: 0
}
.site-investor-relations .tcl-hero-banner--with-buttons {
--tcl-hero-banner-block-size: calc(var(--tds-size-1x)*56)
}
}
:root {
--tcl-image-aspect-ratio-1-1-block-size: 100vw;
--tcl-image-aspect-ratio-16-9-block-size: 177.77778vw;
--tcl-image-aspect-ratio-3-4-block-size: 75vw;
--tcl-image-aspect-ratio-5-3-block-size: 166.66667vw;
--tcl-image-asset-block-size: auto;
--tcl-image-asset-border-radius: 0;
--tcl-image-asset-display: block;
--tcl-image-asset-float: none;
--tcl-image-asset-inline-size: 100%;
--tcl-image-asset-inset-block-end: 0;
--tcl-image-asset-inset-block-start: 0;
--tcl-image-asset-inset-inline-start: 0;
--tcl-image-asset-margin-block-start: 0;
--tcl-image-asset-margin-inline-end: 0;
--tcl-image-asset-margin-inline-start: 0;
--tcl-image-asset-max-inline-size: none;
--tcl-image-asset-min-inline-size: 0;
--tcl-image-asset-object-fit: cover;
--tcl-image-asset-object-position-x: center;
--tcl-image-asset-object-position-y: center;
--tcl-image-asset-opacity: 1;
--tcl-image-asset-position: static;
--tcl-image-asset-transform: none;
--tcl-image-asset-visibility: visible;
--tcl-image-inline-size: 100%;
--tcl-image-overflow: visible;
--tcl-image-position: relative;
--tcl-image-end-gradient-size: 20%;
--tcl-image-end-gradient-opacity: 0.5;
--tcl-image-end-gradient-end: #0000;
--tcl-image-end-gradient-start: #000;
--tcl-image-start-gradient-size: 20%;
--tcl-image-start-gradient-opacity: 0.5;
--tcl-image-start-gradient-end: #0000;
--tcl-image-start-gradient-start: #000
}
.tcl-image {
height: auto;
height: var(--tcl-image-asset-block-size);
overflow: visible;
overflow: var(--tcl-image-overflow);
position: relative;
position: var(--tcl-image-position);
width: 100%;
width: var(--tcl-image-inline-size)
}
.tcl-image--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-image-gradient-start-direction,to bottom)),color-stop(0,var(--tcl-image-start-gradient-start)),to(var(--tcl-image-start-gradient-end)));
background: linear-gradient(var(--tcl-image-gradient-start-direction,to bottom),var(--tcl-image-start-gradient-start) 0,var(--tcl-image-start-gradient-end) 100%);
border-radius: 0;
border-radius: var(--tcl-image-asset-border-radius);
content: "";
height: 100%;
height: var(--tcl-image-gradient-start-block-size,100%);
opacity: .5;
opacity: var(--tcl-image-start-gradient-opacity);
position: absolute;
width: 100%;
width: var(--tcl-image-gradient-start-inline-size,100%)
}[dir=ltr] .tcl-image--with-end-gradient:after {
left: 0;
left: var(--tcl-image-gradient-end-inline-start,0);
right: auto;
right: var(--tcl-image-gradient-end-inline-end,auto)
}[dir=rtl] .tcl-image--with-end-gradient:after {
left: auto;
left: var(--tcl-image-gradient-end-inline-end,auto);
right: 0;
right: var(--tcl-image-gradient-end-inline-start,0)
}
.tcl-image--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 top,left bottom,from(var(--tcl-image-gradient-end-direction,to top)),color-stop(0,var(--tcl-image-end-gradient-start)),to(var(--tcl-image-end-gradient-end)));
background: linear-gradient(var(--tcl-image-gradient-end-direction,to top),var(--tcl-image-end-gradient-start) 0,var(--tcl-image-end-gradient-end) 100%);
border-radius: 0;
border-radius: var(--tcl-image-asset-border-radius);
content: "";
height: 100%;
height: var(--tcl-image-gradient-end-block-size,100%);
inset-inline: 0 auto;
inset-inline: var(--tcl-image-gradient-end-inline-start,0) var(--tcl-image-gradient-end-inline-end,auto);
bottom: 0;
top: auto;
inset-block: auto 0;
opacity: .5;
opacity: var(--tcl-image-end-gradient-opacity);
position: absolute;
width: 100%;
width: var(--tcl-image-gradient-end-inline-size,100%)
}
.tcl-image--with-vertical-gradient {
--tcl-image-gradient-end-block-size: var(--tcl-image-end-gradient-size);
--tcl-image-gradient-start-block-size: var(--tcl-image-start-gradient-size)
}
.tcl-image--with-horizontal-gradient {
--tcl-image-gradient-end-inline-size: var(--tcl-image-end-gradient-size);
--tcl-image-gradient-start-inline-size: var(--tcl-image-start-gradient-size);
--tcl-image-gradient-end-inline-end: 0;
--tcl-image-gradient-end-inline-start: auto;
--tcl-image-gradient-end-direction: to left;
--tcl-image-gradient-start-direction: to right
}
html[dir=rtl] .tcl-image--with-horizontal-gradient {
--tcl-image-gradient-end-direction: to right;
--tcl-image-gradient-start-direction: to left
}
.tcl-image--with-rounded-corners {
--tcl-image-asset-border-radius: var(--tds-size-1x)
}
.tcl-image__picture {
display: block;
height: auto;
height: var(--tcl-image-asset-block-size)
}
.tcl-image__picture--aspect-ration-1-1 {
height: 100vw;
height: var(--tcl-image-aspect-ratio-1-1-block-size)
}
.tcl-image__picture--aspect-ration-16-9 {
height: 177.77778vw;
height: var(--tcl-image-aspect-ratio-16-9-block-size)
}
.tcl-image__picture--aspect-ration-5-3 {
height: 166.66667vw;
height: var(--tcl-image-aspect-ratio-5-3-block-size)
}
.tcl-image__picture--aspect-ration-3-4 {
height: 75vw;
height: var(--tcl-image-aspect-ratio-3-4-block-size)
}[dir=ltr] .tcl-image__asset {
left: 0;
left: var(--tcl-image-asset-inset-inline-start)
}[dir=rtl] .tcl-image__asset {
right: 0;
right: var(--tcl-image-asset-inset-inline-start)
}[dir=ltr] .tcl-image__asset {
margin-left: 0;
margin-left: var(--tcl-image-asset-margin-inline-start);
margin-right: 0;
margin-right: var(--tcl-image-asset-margin-inline-end)
}[dir=rtl] .tcl-image__asset {
margin-left: 0;
margin-left: var(--tcl-image-asset-margin-inline-end);
margin-right: 0;
margin-right: var(--tcl-image-asset-margin-inline-start)
}
.tcl-image__asset {
border-radius: 0;
border-radius: var(--tcl-image-asset-border-radius);
bottom: 0;
bottom: var(--tcl-image-asset-inset-block-end);
display: block;
display: var(--tcl-image-asset-display);
float: none;
float: var(--tcl-image-asset-float);
height: auto;
height: var(--tcl-image-asset-block-size);
top: 0;
top: var(--tcl-image-asset-inset-block-start);
inset-block: 0 0;
inset-block: var(--tcl-image-asset-inset-block-start) var(--tcl-image-asset-inset-block-end);
inset-inline-start: 0;
inset-inline-start: var(--tcl-image-asset-inset-inline-start);
margin-top: 0;
margin-top: var(--tcl-image-asset-margin-block-start);
margin-inline: 0 0;
margin-inline: var(--tcl-image-asset-margin-inline-start) var(--tcl-image-asset-margin-inline-end);
max-width: none;
max-width: var(--tcl-image-asset-max-inline-size);
min-width: 0;
min-width: var(--tcl-image-asset-min-inline-size);
-o-object-fit: cover;
object-fit: cover;
-o-object-fit: var(--tcl-image-asset-object-fit);
object-fit: var(--tcl-image-asset-object-fit);
-o-object-position: center center;
object-position: center center;
-o-object-position: var(--tcl-image-asset-object-position-x) var(--tcl-image-asset-object-position-y);
object-position: var(--tcl-image-asset-object-position-x) var(--tcl-image-asset-object-position-y);
opacity: 1;
opacity: var(--tcl-image-asset-opacity);
position: static;
position: var(--tcl-image-asset-position);
-webkit-transform: none;
transform: none;
-webkit-transform: var(--tcl-image-asset-transform);
transform: var(--tcl-image-asset-transform);
visibility: visible;
visibility: var(--tcl-image-asset-visibility);
width: 100%;
width: var(--tcl-image-asset-inline-size)
}
.tcl-image__asset.tcl-objectfit-position--top {
--tcl-image-asset-object-position-y: top
}
.tcl-image__asset.tcl-objectfit-position--bottom {
--tcl-image-asset-object-position-y: bottom
}
.tcl-image__asset.tcl-objectfit-position--center {
--tcl-image-asset-object-position-y: center
}
.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 .25s;
animation: showCta .25s
}
.tcl-permanent-cta--mobile.hidden {
-webkit-animation: hideCta .25s;
animation: hideCta .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 .2s ease-in;
transition: opacity .2s ease-in;
z-index: 998
}
.permanent-cta-buttons.hidden {
opacity: 0;
-webkit-transition: opacity .2s ease-out;
transition: opacity .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 .25s ease-out;
animation: showOverlay .25s ease-out;
-webkit-animation: hideOverlay .25s ease-in-out;
animation: hideOverlay .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
}
}