.services-block-three:after {
top: -2px;
left: 0px;
}
.services-block-three:before {
bottom: 15px;
right: 0px;
}
.first_box:before {
bottom: 0px;
}
.applitools-activate .tcl-showcase__down-arrow {
-webkit-animation: none;
animation: none
}
.applitools-activate .tds-animate--bounce,
.applitools-activate [id=battery-fill] {
-webkit-animation-play-state: paused !important;
animation-play-state: paused !important
}
.tds-colorscheme--light,
.tds-scrim--white,
:root {
--tds-animation-bezier-base: cubic-bezier(0.5, 0, 0, 0.75);
--tds-ui-opacity-100: 1;
--tds-ui-opacity-70: 0.7;
--tds-ui-opacity-50: 0.5;
--tds-ui-opacity-30: 0.3;
--tds-ui-opacity-0: 0;
--tds-ui-max-paragraph-width: 75ch;
--tds-ui-box-shadow-off: 0 0 0 0 transparent;
--tds-component-pill-padding-inline: 20px;
--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-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-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-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-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 rgba(0, 0, 0, .08);
--tds-ui-box-shadow-medium: 0 var(--tds-size-base) var(--tds-size-2x) 0 rgba(0, 0, 0, .12);
--tds-ui-box-shadow-large-reverse: 0 -8px var(--tds-size-2x) 0 rgba(0, 0, 0, .16);
--tds-ui-box-shadow-large: 0 var(--tds-size-base) var(--tds-size-2x) 0 rgba(0, 0, 0, .16);
--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-line-height-80: var(--tds-size-6x);
--tds-line-height-50: var(--tds-size-3x);
--tds-font-size-80: var(--tds-size-5x);
--tds-font-size-60: var(--tds-size-3x);
--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-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-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-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-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-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-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-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-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-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-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-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: rgba(0, 0, 0, .05);
--tds-theme-status-yellow-pastel: rgba(255, 193, 7, .2);
--tds-theme-status-orange-pastel: rgba(242, 145, 55, .2);
--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: rgba(62, 173, 225, .15);
--tds-theme-status-green-pastel: rgba(2, 176, 40, .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-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 rgba(0, 0, 0, .16);
--tds-box-shadow--large-reverse: 0 -8px 16px 0 rgba(0, 0, 0, .16);
--tds-box-shadow--medium: 0 8px 16px 0 rgba(0, 0, 0, .12);
--tds-box-shadow--off: 0 0 0 0 transparent;
--tds-box-shadow--small: 0 4px 8px 0 rgba(0, 0, 0, .08);
--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
}
[type=search] {
-webkit-appearance: textfield;
appearance: textfield;
outline-offset: -2px
}
[type=search]::-webkit-search-decoration {
-webkit-appearance: none
}
::-webkit-file-upload-button {
-webkit-appearance: button;
appearance: button;
font: inherit
}
@media (prefers-reduced-motion:reduce) {
*,
:after,
:before {
-webkit-animation: none !important;
animation: none !important;
transition: none !important
}
}
: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 {
text-rendering: optimizelegibility;
font-family: var(--tds-font-family-latin-text)
}
: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)
}
: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-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: hsla(0, 0%, 100%, .7);
--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: hsla(0, 0%, 59%, .1);
--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-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)
}
.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: transparent;
--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: transparent
}
@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: transparent;
--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: transparent;
--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: transparent;
--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)
}
@-webkit-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-on--soft {
0% {
opacity: .25
}
8% {
opacity: 0
}
16% {
opacity: .25
}
24% {
opacity: 0
}
48% {
opacity: 0
}
to {
opacity: 1
}
}
@-webkit-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
}
}
@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 {
-webkit-margin-before: var(--tds-size--2x);
margin-block-start: var(--tds-size--2x)
}
.tds-accordion-summary {
grid-gap: 0 var(--tds-accordion--gap);
-webkit-padding-after: var(--tds-size--1x);
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: -webkit-min-content 1fr;
grid-template-columns: min-content 1fr;
padding-block-end: var(--tds-size--1x);
transition: color .33s ease;
-webkit-user-select: none;
-ms-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: -webkit-min-content 1fr;
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 {
-webkit-margin-before: var(--tds-size--half);
margin-block-start: var(--tds-size--half)
}
.tds-accordion-content {
-webkit-padding-before: var(--tds-size--1x);
padding-block-start: var(--tds-size--1x)
}
.tds-accordion--chevron-leading>.tds-accordion-summary+.tds-accordion-content {
-webkit-padding-start: calc(var(--tds-accordion--gap) + var(--tds-size--2x));
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 {
-webkit-padding-after: var(--tds-size--2x);
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;
-o-object-fit: scale-down;
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;
-ms-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: transparent;
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 {
-webkit-margin-after: var(--tds-size--2x);
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 {
-webkit-padding-before: var(--tds-page-layout--title-start-space);
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 {
-webkit-border-before: 1px solid var(--tds-theme-border-low-contrast);
border-block-start: 1px solid var(--tds-theme-border-low-contrast)
}
.tds-banner:not([class*=tds-scrim--]) {
background-color: var(--tds-theme-background-container)
}
.tds-banner strong {
transition: color .5s ease
}
@media (min-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 {
-webkit-margin-start: calc(var(--tds-breadcrumb--padding-inline)*-1);
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);
-webkit-column-gap: calc(var(--tds-size--half)/2);
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 {
-webkit-margin-start: calc(var(--tds-size--half)*-1);
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 {
-webkit-appearance: none;
appearance: none;
background-color: transparent;
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: transparent;
--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) transparent;
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: transparent;
--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 {
-webkit-margin-start: calc(var(--tds-size--1x)*-1);
margin-inline-start: calc(var(--tds-size--1x)*-1)
}
.tds-btn>.tds-icon--inline:last-child {
-webkit-margin-end: calc(var(--tds-size--1x)*-1);
margin-inline-end: calc(var(--tds-size--1x)*-1)
}
:is(.tds-scrim--light,
.tds-scrim--black) .tds-modal .tds-btn--tertiary {
--tds-btn--background-color: var(--tds-theme-background)
}
.tds-card:not(.tds-card--outline,
.tds-scrim--white .tds-card--highlighted) .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--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-theme-background-container);
block-size: -webkit-min-content;
block-size: min-content;
border-radius: var(--tds-border-radius--card);
display: flex;
max-block-size: -webkit-min-content;
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 {
-webkit-padding-end: max(var(--tds-size--3x), var(--tds-card--padding));
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) {
-webkit-padding-before: 0;
padding-block-start: 0
}
:is(.tds-card,
.tds-card--asset)>.tds-icon,
:is(.tds-card,
.tds-card--asset)>tds-icon>.tds-icon {
-webkit-margin-start: var(--tds-card--padding);
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 {
-webkit-padding-before: calc(var(--tds-card--padding) + 2px);
-webkit-padding-start: calc(var(--tds-card--padding)/3);
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 {
-webkit-padding-before: calc(var(--tds-card--padding)/3);
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 {
background-color: var(--tds-theme-background-dialog);
box-shadow: var(--tds-box-shadow--medium)
}
.tds-scrim--white .tds-card--highlighted {
background-color: var(--tds-color-white)
}
.tds-card--outline {
background-color: transparent;
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 {
-webkit-margin-start: var(--tds-chip-caption--margin-inline-start);
color: var(--tds-caption--color);
font-weight: var(--tds-font-weight-regular);
margin-inline-start: var(--tds-chip-caption--margin-inline-start)
}
.tds-chip--unencapsulated {
--tds-chip--height: auto;
--tds-chip--padding: 0;
background-color: transparent !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);
-webkit-padding-start: 0;
margin: 0;
padding-inline-start: 0
}
.tds-form-input--default .tds-chip {
--tds-chip--inset: calc(var(--tds-form--indent) - var(--tds-size--half));
-webkit-padding-start: var(--tds-chip--inset);
background-color: var(--tds-theme-background, var(--tds-color-white));
border-radius: calc(var(--tds-border-radius--pill) - 2px);
inline-size: -webkit-max-content;
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 {
-webkit-margin-start: calc(var(--tds-chip--inset)*-1);
margin-inline-start: calc(var(--tds-chip--inset)*-1)
}
.tds-form-input--default .tds-chip:last-child {
-webkit-margin-end: var(--tds-size--1x);
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 {
-webkit-margin-end: var(--tds-size--half);
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 {
-webkit-margin-end: var(--tds-size--half);
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--green {
--tds-chip--background-color: var(--tds-color-status-green)
}
.tds-chip--green-pastel {
--tds-chip--background-color: var(--tds-theme-status-green-pastel)
}
.tds-chip--teal {
--tds-chip--background-color: var(--tds-color-status-teal)
}
.tds-chip--teal-pastel {
--tds-chip--background-color: var(--tds-theme-status-teal-pastel)
}
.tds-chip--blue {
--tds-chip--background-color: var(--tds-color-status-blue)
}
.tds-chip--blue-pastel {
--tds-chip--background-color: var(--tds-theme-status-blue-pastel)
}
.tds-chip--purple {
--tds-chip--background-color: var(--tds-color-status-purple)
}
.tds-chip--purple-pastel {
--tds-chip--background-color: var(--tds-theme-status-purple-pastel)
}
.tds-chip--magenta {
--tds-chip--background-color: var(--tds-color-status-magenta)
}
.tds-chip--magenta-pastel {
--tds-chip--background-color: var(--tds-theme-status-magenta-pastel)
}
.tds-chip--red {
--tds-chip--background-color: var(--tds-color-status-red)
}
.tds-chip--red-pastel {
--tds-chip--background-color: var(--tds-theme-status-red-pastel)
}
.tds-chip--orange {
--tds-chip--background-color: var(--tds-color-status-orange)
}
.tds-chip--orange-pastel {
--tds-chip--background-color: var(--tds-theme-status-orange-pastel)
}
.tds-chip--yellow {
--tds-chip--background-color: var(--tds-color-status-yellow)
}
.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 {
-webkit-margin-end: auto;
-webkit-margin-start: auto;
-webkit-padding-end: var(--tds-content_container--gutter);
-webkit-padding-start: var(--tds-content_container--gutter);
display: block;
inline-size: var(--tds-content_container--inline-size);
margin-inline-end: auto;
margin-inline-start: auto;
padding-inline-end: var(--tds-content_container--gutter);
padding-inline-start: var(--tds-content_container--gutter)
}
@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 {
align-items: center;
display: grid;
gap: var(--tds-size--half) 0;
grid-template-columns: repeat(var(--tds-column-count, 7), 1fr);
margin: var(--tds-size--1x) 0
}
.tds-date-picker-days-label {
pointer-events: none
}
.tds-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);
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-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: transparent;
box-shadow: inset 0 0 0 3px var(--tds-color-red-10);
color: inherit
}
.tds-figure {
--tds-figure--padding: var(--tds-padding--card);
--tds-figure--radius: var(--tds-border-radius--card);
block-size: -webkit-min-content;
block-size: min-content;
display: flex;
max-block-size: -webkit-min-content;
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 {
-webkit-margin-before: var(--tds-figure--padding);
margin-block-start: var(--tds-figure--padding)
}
.tds-figure--layout-vertical>.tds-icon+figcaption,
.tds-figure--layout-vertical>figcaption+.tds-icon {
-webkit-margin-before: calc(var(--tds-figure--padding)/3);
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 {
-webkit-margin-start: var(--tds-figure--padding);
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 {
-webkit-margin-start: calc(var(--tds-figure--padding)/3);
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) {
-webkit-padding-before: 0;
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 {
-webkit-padding-start: var(--tds-form--indent);
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 {
-webkit-margin-before: calc(var(--tds-size--half)*-1);
-webkit-padding-before: var(--tds-size--half);
-webkit-margin-after: -12px;
-webkit-padding-after: 12px;
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 :-ms-input-placeholder,
.tds-form-input:-ms-input-placeholder {
color: var(--tds-theme-foreground-low-contrast)
}
.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) {
-webkit-margin-before: var(--tds-size--1x);
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) {
-webkit-margin-before: var(--tds-size--half);
margin-block-start: var(--tds-size--half)
}
.tds-form-input--inline {
display: inline-flex;
vertical-align: baseline
}
.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;
-ms-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 {
-webkit-margin-start: 0;
margin-inline-start: 0
}
.tds-form-input--collapsed {
--tds-form-input--border-color: transparent;
-webkit-padding-start: var(--tds-form-input--collapsed-padding-inline-start);
background-color: transparent;
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) {
-webkit-margin-after: var(--tds-size--1x);
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: -webkit-min-content;
min-inline-size: min-content
}
.tds-form-input-group--layout-horizontal>.tds-form-input:not(:last-child) {
-webkit-margin-after: 0;
-webkit-margin-end: var(--tds-size--2x);
margin-block-end: 0;
margin-inline-end: var(--tds-size--2x)
}
.tds-form-input-leading {
-webkit-padding-end: var(--tds-size--half);
max-inline-size: calc(100% - 20px);
padding-inline-end: var(--tds-size--half)
}
.tds-form-input-trailing {
-webkit-padding-start: var(--tds-size--half);
padding-inline-start: var(--tds-size--half)
}
.tds-form-input-leading+.tds-form-input-trailing {
-webkit-padding-start: var(--tds-size--1x);
padding-inline-start: var(--tds-size--1x)
}
.tds-form-input-group--layout-horizontal .tds-form-input-leading+.tds-form-input-trailing {
-webkit-padding-start: var(--tds-size--2x);
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: -webkit-max-content;
inline-size: max-content
}
:is(.tds-form-input--default,
.tds-listbox-search) :where(.tds-form-input-leading,
.tds-form-input-trailing) {
-webkit-padding-after: var(--tds-size--half);
-webkit-padding-before: var(--tds-size--half);
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%;
-o-object-fit: cover;
object-fit: cover;
overflow: hidden
}
.tds-form-input-choice {
align-self: normal;
-webkit-appearance: none;
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;
-webkit-transform: scale(0);
transform: scale(0);
transition: -webkit-transform .33s var(--tds-bezier);
transition: transform .33s var(--tds-bezier);
transition: transform .33s var(--tds-bezier), -webkit-transform .33s var(--tds-bezier)
}
.tds-form-input-choice:checked:after {
-webkit-transform: scale(1);
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);
-webkit-transform: scale(1);
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 {
-webkit-margin-before: var(--tds-size--1x);
margin-block-start: var(--tds-size--1x)
}
:is(.tds-theme--replicant,
.tds-density--dense) .tds-form-input-group .tds-form-input-choice {
-webkit-margin-before: 0;
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 {
-webkit-margin-start: var(--tds-form--indent);
margin-inline-start: var(--tds-form--indent)
}
.tds-form-input-group--layout-horizontal .tds-form-input:not(:first-child) .tds-form-input-choice {
-webkit-margin-start: 0;
margin-inline-start: 0
}
.tds-form-input-choice-label {
--tds-form--indent: var(--tds-size--1x);
-webkit-padding-before: 2px;
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 {
-webkit-margin-before: var(--tds-size--1x);
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 {
-webkit-margin-before: -4px;
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 {
-webkit-appearance: none;
appearance: none;
background-color: transparent;
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 {
-webkit-padding-start: 0;
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 {
-webkit-margin-start: calc(var(--tds-size--half)*-1);
-webkit-padding-start: var(--tds-size--half);
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 {
-webkit-padding-end: var(--tds-size--half);
padding-inline-end: var(--tds-size--half)
}
.tds-form-label-files {
-webkit-padding-end: var(--tds-form--indent);
-webkit-padding-start: var(--tds-form--indent);
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 {
-webkit-padding-before: var(--tds-size--1x);
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;
-ms-user-select: none;
user-select: none
}
.tds-list-item--file>button .tds-icon {
margin: 0
}
.tds-form-feedback.tds-form-feedback-file {
-webkit-padding-start: 0;
padding-inline-start: 0
}
.tds-form-feedback-file .tds-form-feedback-text {
display: flex
}
.tds-form-feedback-file .tds-form-feedback-text .tds-icon {
-webkit-margin-before: calc(var(--tds-size--1x)/4);
-webkit-margin-end: var(--tds-size--half);
margin-block-start: calc(var(--tds-size--1x)/4);
margin-inline-end: var(--tds-size--half)
}
.tds-form-input-file-upload {
-webkit-appearance: none;
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 {
-webkit-appearance: none;
appearance: none;
background-color: transparent;
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 {
-webkit-appearance: none;
appearance: none;
background-color: transparent;
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);
-webkit-appearance: none;
appearance: none;
background-color: transparent;
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-theme-primary);
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-theme-primary);
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 {
-webkit-margin-before: calc(var(--tds-form-input-range--track-size)/2 - var(--tds-form-input-range--thumb-size)/2);
-webkit-appearance: none;
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 transparent), 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 transparent), 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 {
-webkit-padding-end: var(--tds-size--3x);
-webkit-appearance: none;
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-scrim--black .tds-form-input--default .tds-form-input-select:focus {
background-color: var(--tds-theme-background-container)
}
.tds-colorscheme--dark .tds-form-input--default :is(option,
optgroup),
.tds-scrim--black .tds-form-input--default :is(option,
optgroup) {
background-color: var(--tds-theme-background-container)
}
.tds-form-input-search {
-webkit-appearance: none;
appearance: none;
background-color: transparent;
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
}
label.tds-form-input {
color: var(--tds-form-label--color);
-webkit-user-select: none;
-ms-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;
-webkit-clip-path: inset(100%);
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 {
-webkit-margin-end: var(--tds-size--1x);
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;
-webkit-transform: scale(0);
transform: scale(0);
transition: -webkit-transform .33s var(--tds-bezier);
transition: transform .33s var(--tds-bezier);
transition: transform .33s var(--tds-bezier), -webkit-transform .33s var(--tds-bezier)
}
.tds-form-input-hidden-choice:checked+.tds-form-input .tds-form-input-visual-checkbox:after {
-webkit-transform: scale(1);
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 {
-webkit-padding-end: var(--tds-size--half);
display: inline-block;
inline-size: 32px;
padding-inline-end: var(--tds-size--half)
}
.tds-form-input-text {
-webkit-appearance: none;
appearance: none;
background-color: transparent;
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 {
-webkit-appearance: none;
appearance: none
}
.tds-form-input-date {
caret-color: transparent
}
.tds-form-input-date--placeholder {
color: var(--tds-text--color--placeholder)
}
.tds-form-input-textarea {
-webkit-appearance: none;
appearance: none;
background-color: transparent;
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 {
-webkit-margin-before: var(--tds-size--1x);
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 {
-webkit-margin-before: var(--tds-size--1x);
margin-block-start: var(--tds-size--1x)
}
.tds-icon-btn {
--tds-icon-btn--background: transparent;
--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 transparent;
border-radius: var(--tds-border-radius--pill);
box-shadow: inset 0 0 0 var(--tds-icon-btn--border-width) transparent;
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, -webkit-transform .33s var(--tds-bezier);
transition: color .33s ease, background-color .33s ease, box-shadow .25s ease, transform .33s var(--tds-bezier);
transition: color .33s ease, background-color .33s ease, box-shadow .25s ease, transform .33s var(--tds-bezier), -webkit-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 {
-webkit-margin-after: calc(var(--tds-size--1x)*-1);
-webkit-margin-before: calc(var(--tds-size--1x)*-1);
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 {
-webkit-margin-end: calc(var(--tds-size--half)*-1);
margin-inline-end: calc(var(--tds-size--half)*-1)
}
.tds-form-input--default .tds-form-input-leading .tds-icon-btn:first-child {
-webkit-margin-start: calc(var(--tds-size--half)*-1);
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: transparent;
--tds-icon--rotate-x: 0deg;
--tds-icon--size: var(--tds-size--3x);
--tds-icon--transform:
}
: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;
-webkit-transform: var(--tds-icon--transform);
transform: var(--tds-icon--transform);
transition: color .33s ease, -webkit-transform .5s var(--tds-bezier);
transition: color .33s ease, transform .5s var(--tds-bezier);
transition: color .33s ease, transform .5s var(--tds-bezier), -webkit-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]) {
-webkit-transform: rotateY(var(--tds-icon--rotate-y)) rotateX(var(--tds-icon--rotate-x)) var(--tds-icon--transform);
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 {
-webkit-margin-start: var(--tds-size--half);
margin-inline-start: var(--tds-size--half)
}
.tds-icon--inline:first-child {
-webkit-margin-end: var(--tds-size--half);
margin-inline-end: var(--tds-size--half)
}
.tds-icon--text-bottom {
vertical-align: text-bottom
}
.tds-icon--text-top {
vertical-align: text-top
}
.tds-icon--text-middle {
-webkit-margin-before: -.2em;
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, hsla(0, 0%, 47%, 0), hsla(0, 0%, 47%, .48), hsla(0, 0%, 47%, .8), #777);
color: hsla(0, 0%, 100%, 0);
-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;
-ms-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);
-webkit-appearance: none;
appearance: none;
background-color: transparent;
block-size: var(--tds-size--3x);
border: var(--tds-icon-trigger--border_size) solid var(--tds-color--secondary-highlight);
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 {
-webkit-margin-end: var(--tds-size--1x);
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 {
-webkit-transform: rotate(90deg);
transform: rotate(90deg)
}
[aria-pressed=true] .tds-icon-crosshatch:after {
opacity: var(--tds-ui-opacity-0);
-webkit-transform: rotate(180deg);
transform: rotate(180deg)
}
.tds-icon-trigger--rotate[aria-pressed=true] .tds-icon-crosshatch:before {
-webkit-transform: rotate(135deg);
transform: rotate(135deg)
}
.tds-icon-trigger--rotate[aria-pressed=true] .tds-icon-crosshatch:after {
opacity: var(--tds-ui-opacity-100);
-webkit-transform: rotate(315deg);
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 {
-webkit-transform: rotateX(180deg);
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-component-preview,
:root {
--tds-gutter: var(--tds-size--3x);
--tds-gutter--half: calc(var(--tds-size--3x)/2);
--tds-gutter--negative: calc(var(--tds-size--3x)*-1);
--tds-gutter--half_negative: calc(var(--tds-gutter--negative)/2)
}
.tds-flex {
display: flex;
flex-flow: column wrap;
list-style: none;
margin: 0;
padding: 0
}
@media (min-width:600px) {
.tds-flex {
flex-flow: row wrap
}
}
.tds-flex-gutters {
-webkit-margin-after: var(--tds-size--3x);
-webkit-margin-before: var(--tds-gutter--negative);
-webkit-margin-start: var(--tds-gutter--negative);
margin-block-end: var(--tds-size--3x);
margin-block-start: var(--tds-gutter--negative);
margin-inline-start: var(--tds-gutter--negative)
}
@media (max-width:599px) {
.tds-flex-small-gutters>* {
-webkit-margin-before: var(--tds-size--1x);
-webkit-margin-after: var(--tds-size--1x);
margin-block-end: var(--tds-size--1x);
margin-block-start: var(--tds-size--1x)
}
.tds-flex-small-gutters>:first-child {
-webkit-margin-before: 0;
margin-block-start: 0
}
.tds-flex-small-gutters>:last-child {
-webkit-margin-after: 0;
margin-block-end: 0
}
}
@media (min-width:600px) {
.tds-flex-small-gutters>* {
-webkit-margin-start: var(--tds-size--1x);
-webkit-margin-end: var(--tds-size--1x);
margin-inline-end: var(--tds-size--1x);
margin-inline-start: var(--tds-size--1x)
}
.tds-flex-small-gutters>:first-child {
-webkit-margin-start: 0;
margin-inline-start: 0
}
.tds-flex-small-gutters>:last-child {
-webkit-margin-end: 0;
margin-inline-end: 0
}
}
.tds-flex--nowrap {
flex-wrap: nowrap
}
.tds-flex-item {
flex: 1
}
.tds-grid--show_grid .tds-flex-item {
overflow: hidden;
position: relative
}
.tds-grid--show_grid .tds-flex-item:before {
-webkit-border-end: 1px solid rgba(149, 236, 255, .3);
-webkit-border-start: 1px solid rgba(149, 236, 255, .3);
background-color: rgba(149, 236, 255, .1);
block-size: 100%;
border-inline-end: 1px solid rgba(149, 236, 255, .3);
border-inline-start: 1px solid rgba(149, 236, 255, .3);
content: "";
display: block;
inline-size: calc(100% - 2px);
left: 1px;
position: absolute;
top: 0
}
.tds-grid--show_grid .tds-flex-gutters .tds-flex-item:before,
.tds-grid--show_grid.tds-flex-gutters .tds-flex-item:before {
inline-size: calc(100% - 26px);
left: var(--tds-size--3x);
top: var(--tds-size--3x)
}
.tds-flex-gutters .tds-flex-item {
-webkit-padding-before: var(--tds-size--3x);
-webkit-padding-start: var(--tds-size--3x);
padding-block-start: var(--tds-size--3x);
padding-inline-start: var(--tds-size--3x)
}
.tds-flex--flex_cells>.tds-flex-item {
display: flex
}
.tds-flex-item--no_gutter {
-webkit-padding-before: 0;
-webkit-padding-start: 0;
padding-block-start: 0;
padding-inline-start: 0
}
.tds-flex-gutters .tds-flex-gutters {
-webkit-margin-after: 0;
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 {
-webkit-margin-before: 0;
-webkit-margin-after: 0;
margin-block-end: 0;
margin-block-start: 0
}
.tds-flex-gutters .tds-flex-item {
-webkit-padding-before: 0;
padding-block-start: 0
}
}
.tds-layout-main {
grid-area: main
}
.tds-layout-aside {
grid-area: aside--primary
}
.tds-layout-aside+.tds-layout-aside {
grid-area: aside--secondary
}
.tds-layout :is(.tds-layout,
.tds-layout--no_offset),
.tds-layout.tds-layout--no_offset {
-webkit-padding-end: 0;
-webkit-padding-start: 0;
padding-inline-end: 0;
padding-inline-start: 0
}
.tds-layout--constrained,
.tds-layout--constrained_small {
-webkit-margin-end: auto;
-webkit-margin-start: auto;
margin-inline-end: auto;
margin-inline-start: auto
}
.tds-layout--constrained_small {
max-inline-size: 840px
}
.tds-layout--constrained {
max-inline-size: 1440px
}
.tds-layout {
-webkit-padding-end: var(--tds-content_container--gutter);
-webkit-padding-start: var(--tds-content_container--gutter);
padding-inline-end: var(--tds-content_container--gutter);
padding-inline-start: var(--tds-content_container--gutter)
}
.tds-content_container>.tds-layout {
-webkit-padding-end: 0;
-webkit-padding-start: 0;
padding-inline-end: 0;
padding-inline-start: 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 {
-webkit-padding-start: 0;
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 {
-webkit-padding-start: 24px;
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 {
-webkit-padding-start: 0;
padding-inline-start: 0
}
}
@media (min-width:900px) {
.tds-layout-2col-spacious.tds-layout-main--left {
grid-template-areas: ". main main main main main main . aside aside aside ."
}
.tds-layout-2col-spacious.tds-layout-main--right {
grid-template-areas: ". aside aside aside . main main main main main main ."
}
.tds-layout-2col-content_heavy.tds-layout-main--left {
grid-template: ". . main aside" 1fr/1fr 1fr 7fr minmax(-webkit-min-content, 318px);
grid-template: ". . main aside" 1fr/1fr 1fr 7fr minmax(min-content, 318px)
}
.tds-layout-2col-content_heavy.tds-layout-main--right {
grid-template: "aside main . . " 1fr/minmax(-webkit-min-content, 318px) 7fr 1fr 1fr;
grid-template: "aside main . . " 1fr/minmax(min-content, 318px) 7fr 1fr 1fr
}
}
@media (min-width:600px) and (max-width:899px) {
.tds-layout-2col-spacious.tds-layout-main--left {
grid-template-areas: "main main main main main main main aside aside aside aside aside"
}
.tds-layout-2col-spacious.tds-layout-main--right {
grid-template-areas: "aside aside aside aside aside main main main main main main main"
}
.tds-layout-2col-spacious.tds-layout-main--left .tds-layout-aside,
.tds-layout-2col-spacious.tds-layout-main--right .tds-layout-main {
-webkit-padding-start: 24px;
padding-inline-start: 24px
}
.tds-layout-2col-content_heavy.tds-layout-main--left {
grid-template: "main aside" 1fr/9fr minmax(-webkit-min-content, 318px);
grid-template: "main aside" 1fr/9fr minmax(min-content, 318px)
}
.tds-layout-2col-content_heavy.tds-layout-main--right {
grid-template: "aside main" 1fr/minmax(-webkit-min-content, 318px) 9fr;
grid-template: "aside main" 1fr/minmax(min-content, 318px) 9fr
}
}
.tds-layout-3col,
.tds-layout-3col-has_main,
.tds-layout-3col-has_main--large {
grid-template-areas: "aside--primary main aside--secondary"
}
.tds-layout-3col {
grid-template: 1fr/repeat(3, 4fr)
}
.tds-layout-3col-has_main,
.tds-layout-3col-has_main--large {
grid-template: 1fr/repeat(12, 1fr)
}
.tds-layout-3col-has_main .tds-layout-main {
grid-column: 4/10
}
.tds-layout-3col-has_main .tds-layout-aside+.tds-layout-aside {
grid-column: 10/13
}
.tds-layout-3col-has_main .tds-layout-main+.tds-layout-aside {
grid-column: 1/4
}
.tds-layout-3col-has_main--large .tds-layout-main {
grid-column: 3/11
}
.tds-layout-3col-has_main--large .tds-layout-aside+.tds-layout-aside {
grid-column: 11/13
}
.tds-layout-3col-has_main--large .tds-layout-main+.tds-layout-aside {
grid-column: 1/3
}
.tds-layout-3col-has_main--inset .tds-layout-main {
grid-column: 4/10
}
.tds-layout-3col-has_main--inset .tds-layout-aside+.tds-layout-aside {
grid-column: 10/12
}
.tds-layout-3col-has_main--inset .tds-layout-main+.tds-layout-aside {
grid-column: 2/4
}
.tds-layout-3col-has_main--spread .tds-layout-main {
grid-column: 4/10
}
.tds-layout-3col-has_main--spread .tds-layout-aside+.tds-layout-aside {
grid-column: 11/13
}
.tds-layout-3col-has_main--spread .tds-layout-main+.tds-layout-aside {
grid-column: 1/3
}
.tds-layout--4col {
grid-template-columns: repeat(4, 1fr)
}
@media (min-width:600px) {
.tds-layout-checkerboard {
grid-gap: 0;
grid-template: "checkboard--row" 1fr/1fr
}
.tds-layout-checkerboard .tds-layout-item {
align-content: center;
align-items: stretch;
display: grid;
grid-template: "checkerboard-asset checkerboard-caption" 1fr/1fr 1fr;
justify-content: center
}
.tds-layout-checkerboard .tds-layout-checkerboard--caption {
-webkit-padding-start: var(--tds-size--8x);
-webkit-padding-end: var(--tds-size--8x);
grid-area: checkerboard-caption;
padding-inline-end: var(--tds-size--8x);
padding-inline-start: 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%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center
}
.tds-component-preview,
:root {
--tds-shell-footer-height: initial;
--tds-shell-header-height: var(--tds-size--7x)
}
.tds-shell {
--tds-shell-content-height: calc(100vh - var(--tds-shell-header-height) - var(--tds-shell-footer-height));
grid-gap: 0 24px;
display: grid;
grid-template-areas: "tds-shell-masthead" "tds-shell-content" "tds-shell-footer";
grid-template-columns: auto;
grid-template-rows: var(--tds-shell-header-height) 1fr var(--tds-shell-footer-height);
min-block-size: 100vh;
min-block-size: -webkit-fill-available
}
.tds-shell.tds-shell--no_footer {
--tds-shell-footer-height: 0px
}
@media (min-width:600px) {
.tds-shell {
--tds-shell-footer-height: 52px
}
}
.tds-shell-footer,
.tds-shell-masthead {
display: flex;
flex-flow: row nowrap
}
.tds-shell-masthead {
grid-area: tds-shell-masthead
}
.tds-shell-footer--is_sticky,
.tds-shell-masthead--is_sticky {
position: -webkit-sticky;
position: sticky
}
.tds-shell-masthead--is_sticky {
top: 0
}
.tds-shell-footer--is_sticky {
bottom: 0
}
.tds-shell-footer {
grid-area: tds-shell-footer
}
.tds-shell-footer .tds-footer-nav {
align-content: center;
align-items: center;
display: flex;
justify-content: center
}
.tds-shell-content {
grid-area: tds-shell-content;
min-block-size: var(--tds-shell-content-height)
}
a {
-webkit-appearance: none;
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 transparent;
background-color: transparent;
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
}
.tds-link:is(:focus-visible,
.tds--focus) {
border-radius: var(--tds-border-radius--outline-only);
outline: var(--tds-outline--focus);
outline-offset: 2px
}
.tds-link: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 {
-webkit-padding-start: var(--tds-size--half);
box-shadow: var(--tds-link--box-shadow--none);
padding-inline-start: var(--tds-size--half)
}
@media (hover:hover) {
.tds-link:is(:hover,
.tds--hover):not(.tds-link--primary,
.tds-link--vertical,
[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--icon-leading {
-webkit-margin-start: 28px;
margin-inline-start: 28px
}
.tds-link--icon-trailing {
-webkit-margin-end: 28px;
margin-inline-end: 28px
}
:is(.tds-link,
.tds-link--icon-leading,
.tds-link--icon-trailing)>:is(.tds-icon--inline,
.tds-icon) {
position: absolute;
top: -4px
}
.tds-link--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 {
-webkit-padding-before: var(--tds-paragraph-gap);
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);
-webkit-padding-start: var(--tds-size--3x);
padding-inline-start: var(--tds-size--3x)
}
.tds-list--ordered {
list-style-type: decimal
}
.tds-list--unordered {
list-style-type: disc
}
.tds-list--align-end {
list-style-type: none;
text-align: end
}
.tds-list--borders {
--tds-list-item--margin-block: var(--tds-size--2x)
}
.tds-list--small-borders {
--tds-list-item--margin-block: var(--tds-size--3x)
}
.tds-list--timeline {
--tds-list-item--margin-block: var(--tds-size--2x);
--tds-list-item--padding-inline: 12px
}
.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) {
-webkit-margin-after: var(--tds-list-item--margin-block);
margin-block-end: var(--tds-list-item--margin-block)
}
@media (min-width:600px) {
.tds-list--horizontal>li:not(:last-of-type) {
-webkit-margin-after: 0;
-webkit-margin-end: calc(var(--tds-list-item--margin-block) + .5em);
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);
-webkit-transform: translateY(-50%);
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 {
-webkit-margin-after: var(--tds-list-item--margin-block);
margin-block-end: var(--tds-list-item--margin-block)
}
.tds-list--small-borders>li:before {
-webkit-margin-after: calc(var(--tds-list-item--margin-block)/2);
margin-block-end: calc(var(--tds-list-item--margin-block)/2);
max-inline-size: var(--tds-size--4x)
}
.tds-list>li.tds-list-item--separated:before {
-webkit-margin-after: var(--tds-list-item--margin-block);
margin-block-end: var(--tds-list-item--margin-block)
}
.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 {
-webkit-margin-start: -3px;
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 {
-webkit-border-after: 1px solid var(--tds-theme-background-container-alt);
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 {
-webkit-padding-before: var(--tds-size--half);
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-form--indent: 20px;
align-items: center;
background-color: transparent;
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:is(.tds--disabled,
[aria-disabled=true]) {
cursor: not-allowed
}
.tds-density--dense .tds-listbox-option,
.tds-density--dense.tds-listbox-option {
--tds-form--indent: var(--tds-size--2x)
}
[aria-multiselectable=true] .tds-listbox-option {
justify-content: flex-start
}
.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-option:is(:focus,
.tds--focus) {
border-radius: var(--tds-size--half);
outline: var(--tds-outline--focus)
}
.tds-listbox-option:is(:hover,
.tds--hover):not(.tds--disabled,
[aria-disabled=true]) {
background-color: var(--tds-theme-background-container-alt)
}
.tds-listbox-option.tds--selected {
background-color: var(--tds-theme-background-container-alt-highlight)
}
.tds-listbox-option .tds-icon {
color: transparent;
position: relative;
-webkit-transform: scale(0);
transform: scale(0);
transition: color .3s ease, -webkit-transform .3s ease;
transition: color .3s ease, transform .3s ease;
transition: color .3s ease, transform .3s ease, -webkit-transform .3s ease
}
.tds--selected .tds-icon {
color: currentColor;
-webkit-transform: scale(1);
transform: scale(1)
}
.tds-singleselect-icon {
-webkit-margin-start: var(--tds-size--1x);
margin-inline-start: var(--tds-size--1x);
top: 0
}
.tds-multiselect-box {
-webkit-margin-end: 12px;
block-size: calc(var(--tds-size--2x) + 2px);
border: 1px solid var(--tds-theme-border);
border-radius: var(--tds-size--half);
display: inline-block;
inline-size: calc(var(--tds-size--2x) + 2px);
margin-inline-end: 12px;
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);
-webkit-animation: var(--tds--rotating);
animation: var(--tds--rotating);
border-radius: 50%;
opacity: var(--tds-ui-opacity-70);
overflow: hidden
}
.tds-loader .tds-icon-logo {
-webkit-animation: var(--tds--pulsing);
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: transparent;
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 {
-webkit-margin-end: -12px;
-webkit-margin-start: -12px;
-webkit-column-count: 2;
column-count: 2;
-webkit-column-gap: var(--tds-size--2x);
column-gap: var(--tds-size--2x);
margin-inline-end: -12px;
margin-inline-start: -12px
}
.tds-locale-selector--narrow .tds-locale-selector-region {
-webkit-column-count: 1;
column-count: 1
}
.tds-locale-selector-region-name {
-webkit-padding-after: 12px;
-webkit-padding-before: var(--tds-size--2x);
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 {
-webkit-padding-before: 0;
padding-block-start: 0
}
.tds-locale-selector-country {
-webkit-column-break-inside: avoid;
break-inside: avoid;
flex-flow: row wrap;
transition: background-color .33s ease
}
.tds-locale-selector-country:not(:last-child) {
-webkit-margin-after: var(--tds-size--half);
margin-block-end: var(--tds-size--half)
}
.tds-card.tds-locale-selector-country,
.tds-card.tds-locale-selector-trigger {
background-color: transparent;
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 {
-webkit-padding-start: var(--tds-size--1x);
padding-inline-start: var(--tds-size--1x)
}
.tds-card.tds-locale-selector-trigger .tds-icon {
-webkit-margin-before: calc(var(--tds-size--1x) - 2px);
-webkit-margin-start: 12px;
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 {
-webkit-margin-before: 2px;
font-size: 12px;
margin-block-start: 2px
}
.tds-locale-selector-language:not(:last-child) {
-webkit-margin-end: var(--tds-size--2x);
margin-inline-end: var(--tds-size--2x)
}
.tds-locale-selector-language--selected {
color: var(--tds-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 {
-webkit-column-count: 1;
column-count: 1
}
.tds-locale-selector-column:first-child .tds-locale-selector-superregion:first-child>tds-locale-selector-region-name {
-webkit-padding-before: 0;
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 {
-webkit-column-count: 1;
column-count: 1
}
.tds-locale-selector--multicolumn .tds-locale-selector-superregion--europe .tds-locale-selector-region {
-webkit-column-count: 2;
column-count: 2
}
.tds-locale-selector--multicolumn .tds-locale-selector-country {
max-inline-size: 240px
}
.tds-locale-selector--multicolumn .tds-locale-selector-region-name {
-webkit-padding-before: var(--tds-size--3x);
padding-block-start: var(--tds-size--3x)
}
.tds-locale-selector--multicolumn .tds-locale-selector-superregion:first-child .tds-locale-selector-region-name {
-webkit-padding-before: var(--tds-size--half);
padding-block-start: var(--tds-size--half)
}
}
@media (min-width:1440px) {
.tds-locale-selector--multicolumn .tds-locale-selector-superregion--europe .tds-locale-selector-region {
-webkit-column-count: 3;
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: -webkit-min-content 1fr;
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);
-webkit-padding-end: 12px;
-webkit-padding-start: 0;
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--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-media-player [aria-pressed=true] .tds-icon.tds-icon-speaker--high>g:is(:last-of-type) {
display: initial
}
.tds-menu {
display: inline
}
.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);
-ms-scroll-chaining: none;
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), visibility 0s .5s, -webkit-transform .5s var(--tds-bezier);
transition: opacity .5s var(--tds-bezier), transform .5s var(--tds-bezier), visibility 0s .5s;
transition: opacity .5s var(--tds-bezier), transform .5s var(--tds-bezier), visibility 0s .5s, -webkit-transform .5s var(--tds-bezier);
visibility: hidden
}
.tds-modal--fullscreen:not([open]),
.tds-modal:not([open]) {
-webkit-transform: translateX(0) translateY(50%);
transform: translateX(0) translateY(50%)
}
.tds-modal--sheet-left:not([open]),
[dir=rtl] .tds-modal--sheet-right:not([open]) {
-webkit-transform: translateX(-50%) translateY(0);
transform: translateX(-50%) translateY(0)
}
.tds-modal--sheet-right:not([open]),
[dir=rtl] .tds-modal--sheet-left:not([open]) {
-webkit-transform: translateX(50%) translateY(0);
transform: translateX(50%) translateY(0)
}
.tds-modal[open] {
opacity: 1;
pointer-events: inherit;
-webkit-transform: translateX(0) translateY(0);
transform: translateX(0) translateY(0);
transition: opacity .5s var(--tds-bezier), visibility 0s 0s, -webkit-transform .5s var(--tds-bezier);
transition: opacity .5s var(--tds-bezier), transform .5s var(--tds-bezier), visibility 0s 0s;
transition: opacity .5s var(--tds-bezier), transform .5s var(--tds-bezier), visibility 0s 0s, -webkit-transform .5s var(--tds-bezier);
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]) {
-webkit-transform: translateX(0) translateY(100%);
transform: translateX(0) translateY(100%)
}
.tds-modal--sheet-left:not([open]),
[dir=rtl] .tds-modal--sheet-right:not([open]) {
-webkit-transform: translateX(-50%) translateY(0);
transform: translateX(-50%) translateY(0)
}
.tds-modal--sheet-right:not([open]),
[dir=rtl] .tds-modal--sheet-left:not([open]) {
-webkit-transform: translateX(50%) translateY(0);
transform: translateX(50%) translateY(0)
}
.tds-modal[open] {
-webkit-transform: translateX(0) translateY(50%);
transform: translateX(0) translateY(50%)
}
.tds-modal--fullscreen[open],
.tds-modal--sheet-left[open],
.tds-modal--sheet-right[open] {
-webkit-transform: translateX(0) translateY(0);
transform: translateX(0) translateY(0)
}
}
dialog.tds-modal::-webkit-backdrop {
display: none !important
}
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%;
-webkit-transform: translate(-50%, -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 {
-webkit-padding-start: var(--tds-size--3x);
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: -webkit-sticky;
position: sticky;
top: 0;
z-index: 10
}
.tds-modal-close {
-webkit-appearance: none;
appearance: none;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
background-color: transparent;
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) {
-webkit-padding-after: 0;
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: -webkit-sticky;
position: sticky;
transition: padding .33s var(--tds-bezier);
z-index: 11
}
.tds-modal--scrolling .tds-modal-header>:is(h1,
h2,
h3) {
-webkit-padding-before: var(--tds-size--1x);
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 {
-webkit-padding-before: var(--tds-size--half);
padding-block-start: var(--tds-size--half)
}
.tds-modal-content:not(:last-child) {
-webkit-padding-after: var(--tds-size--half);
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 {
-webkit-padding-start: var(--tds-size--6x);
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-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);
-webkit-margin-after: var(--tds-page-layout--footer-start-space);
-webkit-padding-end: var(--tds-content_container--gutter);
-webkit-padding-start: var(--tds-content_container--gutter);
display: grid;
grid-template-areas: "title title" "open open" "main main" "aside aside";
grid-template-columns: repeat(2, 1fr);
grid-template-rows: -webkit-min-content -webkit-min-content 1fr -webkit-min-content;
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 {
-webkit-padding-end: 0;
-webkit-padding-start: 0;
padding-inline-end: 0;
padding-inline-start: 0
}
.tds-page-aside {
grid-area: aside
}
.tds-page-open {
grid-area: open
}
.tds-page-title {
-webkit-margin-after: var(--tds-page-layout--title-end-space);
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 {
-webkit-padding-after: var(--tds-page-layout--title-top-slot-space);
-webkit-padding-before: var(--tds-page-layout--title-top-slot-space);
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 {
-webkit-padding-after: 0;
-webkit-padding-before: 0;
padding-block-end: 0;
padding-block-start: 0
}
.tds-page-title-trailing {
-webkit-margin-before: var(--tds-size--2x);
align-self: center;
grid-area: trailing;
margin-block-start: var(--tds-size--2x)
}
.tds-page-title-bottom {
-webkit-padding-before: var(--tds-size--2x);
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: -webkit-min-content 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: -webkit-min-content -webkit-min-content 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 {
-webkit-margin-before: 0;
-webkit-margin-start: var(--tds-size--3x);
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 . ."
}
.tds-page-layout--content-level-aside.tds-page-layout--narrow-main,
.tds-page-layout--narrow-main {
grid-template-columns: repeat(12, 1fr);
grid-template-rows: -webkit-min-content 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"
}
.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: -webkit-min-content 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 {
-webkit-margin-before: var(--tds-page-layout--title-start-space);
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 transparent;
cursor: not-allowed;
opacity: var(--tds-ui-opacity-50);
pointer-events: none
}
.tds-pagination select {
background-color: transparent;
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 {
-webkit-padding-end: var(--tds-size--3x);
-webkit-appearance: none;
appearance: none;
padding-inline-end: var(--tds-size--3x);
position: relative
}
.tds-pagination-primary .tds-pagination-current select {
-webkit-padding-start: var(--tds-size--1x);
padding-inline-start: var(--tds-size--1x)
}
.tds-pagination-secondary .tds-pagination-current select {
-webkit-padding-start: var(--tds-size--half);
padding-inline-start: var(--tds-size--half)
}
.tds-pagination .tds-pagination-current select:focus {
outline: var(--tds-outline--focus)
}
.tds-pagination-primary .tds-pagination-current select:focus {
outline-offset: 2px
}
.tds-pagination .tds-pagination-current .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: -webkit-max-content;
inline-size: max-content;
white-space: nowrap
}
.tds-pagination-secondary--value {
color: var(--tds-theme-foreground)
}
.tds-pagination-navigation+.tds-pagination-navigation {
-webkit-margin-start: var(--tds-size--3x);
margin-inline-start: var(--tds-size--3x);
position: relative
}
button.tds-pagination-navigation:has(+.tds-pagination-navigation) {
-webkit-margin-end: 2px;
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;
z-index: 1
}
.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, -webkit-transform .33s ease;
transition: opacity .33s ease, transform .33s ease;
transition: opacity .33s ease, transform .33s ease, -webkit-transform .33s ease;
z-index: 15
}
[class*=tds-popover-container--anchor-side-inline-] .tds-popover {
top: var(--tds-popover-center-value);
-webkit-transform: translateY(calc(var(--tds-popover-center-value)*-1)) translateX(var(--tds-popover-animation-space));
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);
-webkit-transform: translateX(calc(var(--tds-popover-center-value)*-1)) translateY(var(--tds-popover-animation-space));
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;
-webkit-transform: 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-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;
-ms-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);
-webkit-column-gap: var(--tds-size--2x);
column-gap: var(--tds-size--2x);
display: grid;
grid-template: "circle text" -webkit-min-content/var(--tds-icon--size) -webkit-max-content;
grid-template: "circle text" min-content/var(--tds-icon--size) max-content;
position: relative;
text-align: start
}
.tds-stepper-item:not(:first-of-type) {
-webkit-margin-before: var(--tds-size--3x);
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 {
-webkit-padding-end: 3px;
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 {
-webkit-writing-mode: vertical-lr;
-ms-writing-mode: tb-lr;
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(-webkit-min-content, 1fr);
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 {
-webkit-column-gap: var(--tds-size--half);
column-gap: var(--tds-size--half)
}
.tds-stepper:not(.tds-stepper--vertical) .tds-stepper-item:not(:first-of-type) {
-webkit-margin-before: unset;
-webkit-margin-start: var(--tds-size--1x);
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 {
-webkit-margin-before: 2px;
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 {
-webkit-padding-after: var(--tds-size--half);
-webkit-padding-before: var(--tds-size--half);
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: -webkit-sticky;
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);
-webkit-padding-after: var(--tds-size--1x);
-webkit-padding-start: 0;
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 {
-webkit-padding-before: var(--tds-size--half);
padding-block-start: var(--tds-size--half)
}
.tds-sidenav-group .tds-sidenav-group {
-webkit-padding-before: 0;
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 {
-webkit-margin-after: 0;
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);
-webkit-padding-start: calc(var(--tds-sidenav-group--static-indent) + var(--tds-sidenav-group--level-indent));
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: -webkit-max-content;
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: -webkit-min-content;
inline-size: min-content;
position: relative;
-webkit-user-select: none;
-ms-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;
-webkit-transform: translateX(0);
transform: translateX(0);
transition: color .5s var(--tds-bezier), -webkit-transform .5s var(--tds-bezier);
transition: transform .5s var(--tds-bezier), color .5s var(--tds-bezier);
transition: transform .5s var(--tds-bezier), color .5s var(--tds-bezier), -webkit-transform .5s var(--tds-bezier);
z-index: 10
}
.tds-switch_toggle-checkbox:checked~.tds-switch_toggle-track:after {
-webkit-transform: translateX(var(--tds-switch_toggle--size));
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 {
-webkit-transform: translateX(calc(var(--tds-switch_toggle--size)*-1));
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 {
-webkit-transform: translateX(0);
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 {
-webkit-padding-before: var(--tds-switch-toggle-group--caption-gap);
padding-block-start: var(--tds-switch-toggle-group--caption-gap)
}
.tds-switch-toggle-hidden-choice {
block-size: 0;
-webkit-clip-path: inset(100%);
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: -webkit-transform .33s var(--tds-bezier);
transition: transform .33s var(--tds-bezier);
transition: transform .33s var(--tds-bezier), -webkit-transform .33s var(--tds-bezier);
z-index: 1
}
.tds-switch-toggle-hidden-choice:checked+.tds-switch-toggle-label-wrapper .tds-switch-toggle-handle {
-webkit-transform: translateX(var(--tds-switch-toggle-handle--translate));
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-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);
-webkit-transform: translate(-50%);
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 {
-webkit-padding-end: calc(var(--tds-size--1x)*3/2);
align-items: flex-start;
background-color: var(--tds-toast--background);
border-radius: calc(var(--tds-size--1x)/2);
color: var(--tds-toast--foreground);
-webkit-column-gap: var(--tds-size--1x);
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: opacity 1s ease, -webkit-margin-before 1s ease, -webkit-margin-after 1s ease;
transition: margin-block-start 1s ease, margin-block-end 1s ease, opacity 1s ease;
transition: margin-block-start 1s ease, margin-block-end 1s ease, opacity 1s ease, -webkit-margin-before 1s ease, -webkit-margin-after 1s ease
}
.tds-toast.tds-toast--fade-in {
margin-block: calc(var(--intrinsic-height)*-1) 0;
opacity: 0;
transition: opacity 0s, -webkit-margin-before 0s, -webkit-margin-after 0s;
transition: margin-block-start 0s, margin-block-end 0s, opacity 0s;
transition: margin-block-start 0s, margin-block-end 0s, opacity 0s, -webkit-margin-before 0s, -webkit-margin-after 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);
-webkit-animation: var(--tds--rotating);
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);
-webkit-animation: var(--tds--pulsing);
animation: var(--tds--pulsing);
color: var(--tds-theme-foreground-low-contrast);
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -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: -webkit-sticky;
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 {
-webkit-padding-start: 0;
padding-inline-start: 0
}
.tds-footer-nav>ul>li:last-child {
-webkit-padding-end: 0;
padding-inline-end: 0
}
}
.tds-component-preview,
:root {
--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: -webkit-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 {
-webkit-padding-start: var(--tds-size--1x);
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) var(--tds-size--1x)
}
.tds-site-header .tds-align--end {
-webkit-padding-end: var(--tds-size--1x);
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 {
-webkit-padding-start: var(--tds-size--3x);
padding-inline-start: var(--tds-size--3x)
}
.tds-site-header.tds-site-header--internal .tds-align--end {
-webkit-padding-end: var(--tds-size--3x);
padding-inline-end: var(--tds-size--3x)
}
@media (min-width:600px) {
.tds-site-header .tds-align--start {
-webkit-padding-start: 20px;
padding-inline-start: 20px
}
.tds-site-header .tds-align--end {
-webkit-padding-end: 20px;
padding-inline-end: 20px
}
}
@media (min-width:1200px) {
.tds-site-header .tds-align--start {
-webkit-padding-start: var(--tds-size--4x);
padding-inline-start: var(--tds-size--4x)
}
.tds-site-header .tds-align--end {
-webkit-padding-end: var(--tds-size--4x);
padding-inline-end: var(--tds-size--4x)
}
}
.tds-site-header-modal {
-webkit-padding-after: var(--tds-size--6x);
padding-block-end: var(--tds-size--6x)
}
.tds-site-header-modal .tds-modal-header {
padding: 20px
}
.tds-site-header-leading {
gap: var(--tds-size--half);
justify-content: flex-start
}
.tds-site-header-leading,
.tds-site-logo {
align-items: center;
display: flex
}
h1.tds-site-logo {
padding: 0;
position: relative
}
.tds-site-header--internal .tds-site-logo,
.tds-site-header--internal .tds-site-menu-btn {
-webkit-margin-start: calc(var(--tds-size--1x)*-1);
margin-inline-start: calc(var(--tds-size--1x)*-1)
}
.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 {
-webkit-margin-start: 0;
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 {
-webkit-padding-before: 0;
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-site-header-trailing {
justify-content: flex-end
}
.tds-mock-app-switcher,
.tds-site-header-trailing {
align-items: center;
display: flex;
gap: var(--tds-size--half)
}
.tds-mock-app-switcher {
color: var(--tds-theme-foreground-high-contrast)
}
.tds-mock-app-switcher .tds-icon-chevron-small-180 {
color: var(--tds-theme-foreground-low-contrast)
}
.tds-mock-location {
-webkit-padding-end: 12px;
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;
bottom: 0;
left: 0;
max-block-size: 100%;
max-block-size: 100dvh;
max-inline-size: 100%;
min-block-size: 100%;
min-block-size: 100dvh;
right: 0;
top: 0;
z-index: 490
}
.tds-site-header-panel:not([open]),
.tds-site-header-panel[open] {
-webkit-transform: translateY(0);
transform: translateY(0)
}
.tds-site-header-panel-header {
-webkit-padding-start: var(--tds-size--2x);
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 {
-webkit-padding-before: var(--tds-site-header-panel--padding-inline);
-webkit-border-before: 1px solid var(--tds-theme-border-low-contrast);
border-block-start: 1px solid var(--tds-theme-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]) {
-webkit-transform: translateY(calc(var(--tds-size--12x)*-1));
transform: translateY(calc(var(--tds-size--12x)*-1))
}
.tds-site-header-panel-content {
-webkit-margin-before: calc(var(--tds-shell-header-height) + var(--tds-banner-offset-height, 0px));
-webkit-padding-after: var(--tds-size--6x);
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: -webkit-transform .5s var(--tds-bezier);
transition: transform .5s var(--tds-bezier);
transition: transform .5s var(--tds-bezier), -webkit-transform .5s var(--tds-bezier)
}
.tds-site-header-panel:not([open]) .tds-site-header-panel-content {
-webkit-transform: translateY(var(--tds-size--9x));
transform: translateY(var(--tds-size--9x))
}
.tds-site-header-panel[open] .tds-site-header-panel-content {
-webkit-transform: translateY(0);
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 {
-webkit-margin-end: var(--tds-size--2x);
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: transparent
}
.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 {
-webkit-padding-before: 2px;
padding-block-start: 2px
}
.tds-site-nav-item--with-caption:not(.tds-site-nav-item--large) .tds-site-nav-item-caption {
-webkit-padding-after: 2px;
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 {
-webkit-margin-start: calc(var(--tds-size--half)*-1);
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 {
-webkit-margin-end: calc(var(--tds-size--half)*-1);
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 {
-webkit-margin-end: 2px;
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, -webkit-transform .5s var(--tds-bezier);
transition: color .33s ease, transform .5s var(--tds-bezier);
transition: color .33s ease, transform .5s var(--tds-bezier), -webkit-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 {
-webkit-margin-end: calc(var(--tds-size--half)*-1);
margin-inline-end: calc(var(--tds-size--half)*-1)
}
.tds-site-nav-items {
align-items: center;
display: flex;
margin: 0;
position: relative;
transition: -webkit-transform .5s ease;
transition: transform .5s ease;
transition: transform .5s ease, -webkit-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 {
-webkit-margin-after: var(--tds-size--1x);
margin-block-end: var(--tds-size--1x)
}
.tds-site-nav-items--spacious.tds-site-nav-items--vertical>li:not(:last-child) {
-webkit-margin-after: var(--tds-size--2x);
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) {
-webkit-padding-before: 0;
padding-block-start: 0
}
.tds-status_msg:not(.tds-card) .tds-card-body {
-webkit-padding-after: 0;
-webkit-padding-before: 0;
-webkit-padding-start: calc(var(--tds-card--padding)/3);
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 {
-webkit-padding-after: 2px;
-webkit-padding-before: 2px;
padding-block-end: 2px;
padding-block-start: 2px
}
.tds-component-preview,
:root {
--tds-table-deprecated--background-color: transparent;
--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: transparent;
--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 {
-webkit-border-after: var(--tds-table-deprecated--border_width) solid var(--tds-theme-border);
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-border-after: 1px solid var(--tds-color-grey-50);
-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: -webkit-sticky;
position: sticky;
top: var(--tds-table-deprecated--caption-top)
}
.tds-table-deprecated--responsive .tds-table-deprecated-caption--white {
--tds-table-deprecated--caption-background-color: hsla(0, 0%, 100%, .5)
}
.tds-table-deprecated--responsive .tds-table-deprecated-caption--light {
--tds-table-deprecated--caption-background-color: hsla(0, 0%, 49%, .5)
}
.tds-table-deprecated--responsive .tds-table-deprecated-caption--black {
--tds-table-deprecated--caption-background-color: rgba(0, 0, 0, .5)
}
.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 {
-webkit-padding-before: 0;
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 {
-webkit-padding-after: 0;
display: inline-flex;
flex-flow: row wrap;
inline-size: 100%;
padding-block-end: 0
}
.tds-table-deprecated--bordered .tds-table-deprecated-row {
-webkit-padding-before: 0;
-webkit-padding-end: 0;
-webkit-margin-after: var(--tds-size--1x);
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 {
-webkit-border-after: 1px solid var(--tds-color-grey-50);
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 {
-webkit-padding-after: 0;
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 {
-webkit-border-before: var(--tds-table-deprecated--border_width) solid var(--tds-theme-border);
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 {
-webkit-border-after: var(--tds-table-cell-border-block-end);
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 {
-webkit-border-before: var(--tds-table-cell-border-block-start);
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 {
-webkit-padding-after: var(--tds-table-cell-before-padding-block-end);
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 {
-webkit-border-before: none;
border-block-start: none
}
.tds-table-row th {
-webkit-border-before: var(--tds-table-cell-border-block-start);
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 {
-webkit-padding-before: var(--tds-size--3x);
padding-block-start: var(--tds-size--3x)
}
.tds-table[class*=-stacked-list] .tds-table-row th:first-child {
-webkit-margin-before: var(--tds-table-header-first-child-margin-block-start);
margin-block-start: var(--tds-table-header-first-child-margin-block-start)
}
.tds-table[class*=-stacked-list] .tds-table-row td:last-child {
-webkit-border-after: var(--tds-table-border-width) solid var(--tds-theme-border-low-contrast);
-webkit-padding-after: var(--tds-table-cell-last-child-padding-block-end);
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);
-webkit-padding-before: var(--tds-size--3x);
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 {
-webkit-padding-before: var(--tds-size--3x);
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 {
-webkit-border-after: none;
border-block-end: none
}
.tds-table[class*=-stacked-list].tds-table--grouped-row .tds-table-row:last-child td:last-child {
-webkit-border-after: var(--tds-table-border-width) solid var(--tds-theme-border-low-contrast);
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;
-webkit-margin-end: calc((var(--tds-data-table--row-outdent-size) + var(--tds-data-table--row-hover-radius))*-1);
-webkit-margin-start: calc((var(--tds-data-table--row-outdent-size) + var(--tds-data-table--row-hover-radius))*-1);
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 {
-webkit-margin-before: var(--tds-size--3x);
margin-block-start: var(--tds-size--3x)
}
*+.tds-data-table-wrapper {
-webkit-margin-before: var(--tds-size--1x);
margin-block-start: var(--tds-size--1x)
}
.tds-data-table-wrapper+.tds-pagination {
-webkit-margin-before: var(--tds-size--3x);
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: transparent;
transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease
}
.tds-data-table :where(th,
td) {
-webkit-border-after: 1px solid var(--tds-theme-background-container);
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: transparent;
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 {
-webkit-padding-end: var(--tds-data-table--row-outdent-size);
-webkit-padding-start: var(--tds-data-table--row-outdent-size);
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: -webkit-sticky;
position: sticky;
right: 0;
z-index: 3
}
.tds-td--select {
-webkit-padding-end: var(--tds-data-table--row-outdent-size);
-webkit-padding-start: var(--tds-data-table--row-outdent-size);
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;
-ms-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: transparent;
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, -webkit-transform .3s ease;
transition: background-color .3s ease, transform .3s ease;
transition: background-color .3s ease, transform .3s ease, -webkit-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 {
-webkit-transform: scale(.7);
transform: scale(.7)
}
.tds-data-table--prototype-animated-th-hover .tds-th--sortable:hover .tds-th--inner:before {
-webkit-transform: scale(1);
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 {
-webkit-margin-start: var(--tds-size--half);
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, -webkit-transform .3s ease;
transition: opacity .3s ease, transform .3s ease;
transition: opacity .3s ease, transform .3s ease, -webkit-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: -webkit-sticky;
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: -webkit-sticky;
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: -webkit-sticky;
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: transparent;
--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 transparent;
--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 transparent;
--tds-tab--box-shadow--highlight-on: 0 0 0 0 transparent;
--tds-tab-list--height: var(--tds-height--pill);
align-items: center;
block-size: var(--tds-tab-list--height);
display: grid;
gap: var(--tds-size--half);
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: transparent;
--tds-tab--box-shadow--highlight-off: inset 0 0 0 0 transparent;
--tds-tab--box-shadow--highlight-on: inset -4px 0 0 0 var(--tds-theme-primary)
}
.tds-tab-list--underline {
--tds-tab--background-color-on: transparent;
--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;
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-border-width-small);
bottom: var(--tds-border-width-small);
content: "";
inline-size: 100%;
position: absolute
}
.tds-tab-list--underline .tds-tab:after {
background: var(--tds-theme-foreground-high-contrast);
block-size: var(--tds-border-width-large);
border-radius: 2px;
bottom: 0;
content: "";
inline-size: 100%;
opacity: 0;
position: absolute;
-webkit-transform: scaleY(0);
transform: scaleY(0);
transition: opacity .3s ease, -webkit-transform .3s ease;
transition: opacity .3s ease, transform .3s ease;
transition: opacity .3s ease, transform .3s ease, -webkit-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;
-webkit-transform: scale(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-font-size-20);
font-weight: var(--tds-font-weight-medium);
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-border-width-large);
border-radius: 2px;
bottom: 0;
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: -webkit-max-content;
inline-size: max-content;
left: 50%;
max-inline-size: min(calc(100vw - 48px), 400px);
padding: var(--tds-tooltip--padding);
position: absolute;
text-align: initial;
top: auto;
-webkit-writing-mode: horizontal-tb;
-ms-writing-mode: lr-tb;
writing-mode: horizontal-tb;
z-index: 550
}
.tds-tooltip.tds-tooltip--overlay {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
bottom: unset;
position: fixed;
-webkit-transform: translateY(var(--tds-tooltip--translate-y)) translateX(0);
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;
-webkit-transform: translateY(var(--tds-tooltip--translate-y)) translateX(calc(-50% + var(--tds-tooltip--x-offset)));
transform: translateY(var(--tds-tooltip--translate-y)) translateX(calc(-50% + var(--tds-tooltip--x-offset)));
transition: opacity .5s var(--tds-bezier), visibility 0s .5s, -webkit-transform .5s var(--tds-bezier);
transition: opacity .5s var(--tds-bezier), transform .5s var(--tds-bezier), visibility 0s .5s;
transition: opacity .5s var(--tds-bezier), transform .5s var(--tds-bezier), visibility 0s .5s, -webkit-transform .5s var(--tds-bezier);
visibility: hidden
}
.tds-tooltip.tds-tooltip--open {
--tds-tooltip--translate-y: 0;
opacity: 1;
pointer-events: inherit;
transition: opacity .5s var(--tds-bezier), visibility 0s 0s, -webkit-transform .5s var(--tds-bezier);
transition: opacity .5s var(--tds-bezier), transform .5s var(--tds-bezier), visibility 0s 0s;
transition: opacity .5s var(--tds-bezier), transform .5s var(--tds-bezier), visibility 0s 0s, -webkit-transform .5s var(--tds-bezier);
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 {
-webkit-transform: translateY(var(--tds-tooltip--translate-y)) translateX(0);
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;
-webkit-transform: translateY(var(--tds-tooltip--translate-y)) translateX(0);
transform: translateY(var(--tds-tooltip--translate-y)) translateX(0);
-webkit-writing-mode: horizontal-tb;
-ms-writing-mode: lr-tb;
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
}
.tds-tooltip>* {
position: relative;
z-index: 2
}
:where(.tds-tooltip:not(.tds-menu .tds-tooltip))>:first-child {
-webkit-margin-before: 0;
-webkit-padding-before: 0;
margin-block-start: 0;
padding-block-start: 0
}
:where(.tds-tooltip:not(.tds-menu .tds-tooltip))>:last-child {
-webkit-margin-after: 0;
-webkit-padding-after: 0;
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)
}
@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)
}
}
.tds-text--h2, h2 {
font-size: var(--tds-font-size-70);
line-height: var(--tds-line-height-70);
}
.tds-text--h2, h2 {
font-size: var(--tds-font-size-70);
line-height: var(--tds-line-height-70);
}
@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 {
-webkit-padding-before: var(--tds-paragraph-gap);
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 {
-webkit-padding-before: 12px;
padding-block-start: 12px
}
.tds-text--thin {
font-weight: 100 !important
}
.tds-text--light {
font-weight: 300 !important
}
.tds-text--regular {
font-weight: 400 !important
}
.tds-text--medium {
font-weight: 500 !important
}
.tds-text--bold {
font-weight: 700 !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 {
-webkit-margin-start: .5em;
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
}
code {
background-color: var(--tds-theme-background-container);
border: 1px solid var(--tds-theme-border-low-contrast);
border-radius: .25em;
color: var(--tds-theme-foreground);
max-inline-size: 100%;
padding: 0 .414em;
transition: background-color .3s ease, color .3s ease
}
:is(ul,
ol,
p,
strong,
label) code {
border: 0
}
pre code {
display: block;
margin: 0;
overflow-x: auto;
padding: var(--tds-size--1x);
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)
}
.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: transparent;
border-radius: 0;
bottom: auto;
box-shadow: none;
color: var(--tds-theme-foreground-high-contrast);
-webkit-filter: drop-shadow(0 0 6px hsla(0, 0%, 100%, .33));
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%;
-webkit-transform: translateY(-50%) translateX(-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%;
-webkit-transform: translateY(-50%) translateX(50%);
transform: translateY(-50%) translateX(50%)
}
.tds-theme--replicant .tds-modal.tds-modal--sheet-right {
right: 0;
top: 0;
-webkit-transform: translateX(100%) translateY(0);
transform: translateX(100%) translateY(0)
}
.tds-theme--replicant .tds-modal.tds-modal--sheet-right.tds-modal[open] {
-webkit-transform: translateX(0) translateY(0);
transform: translateX(0) translateY(0)
}
.tds-theme--replicant .tds-modal.tds-modal--sheet-left {
left: 0;
top: 0;
-webkit-transform: translateX(-100%) translateY(0);
transform: translateX(-100%) translateY(0)
}
.tds-theme--replicant .tds-modal.tds-modal--sheet-left.tds-modal[open] {
-webkit-transform: translateX(0) translateY(0);
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);
-webkit-clip-path: var(--tds-notch--outline);
clip-path: var(--tds-notch--outline);
opacity: 1;
transition: .5s ease
}
.tds-theme--replicant .tds-modal:after {
background-color: var(--tds-theme-background-dialog);
-webkit-clip-path: var(--tds-notch);
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 {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg)
}
.tds-theme--replicant .tds-modal[open]:before {
-webkit-animation: turn-on-modal-before 1s forwards;
animation: turn-on-modal-before 1s forwards
}
@-webkit-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
}
}
@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: transparent
}
@media (max-width:599px) {
.tds-theme--replicant .tds-modal {
inline-size: var(--tds-modal--full-width) !important
}
.tds-theme--replicant .tds-modal--fullscreen {
block-size: var(--tds-modal--full-height) !important
}
}
@media (min-width:600px) {
.tds-theme--replicant .tds-modal {
--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: transparent;
border-radius: 0;
-webkit-filter: var(--tds-glow--off);
filter: var(--tds-glow--off);
transition: .5s ease
}
.tds-theme--replicant .tds-modal-close:focus,
.tds-theme--replicant .tds-modal-close:hover {
-webkit-animation: tds-flicker--soft 1s forwards;
animation: tds-flicker--soft 1s forwards;
-webkit-filter: var(--tds-glow--bright);
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;
-webkit-transform: translateX(100%) translateY(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;
-webkit-transform: translateX(-100%) translateY(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: transparent;
--tds-progress-bar--border-radius: 1px;
--tds-progress-bar--height: var(--tds-size--3x);
background-color: transparent;
box-shadow: none;
padding: 4px
}
.tds-theme--replicant .tds-progress_bar-wrapper:before {
background: var(--tds-theme-foreground-high-contrast);
bottom: 0;
-webkit-clip-path: var(--tds-notch--outline-thin);
clip-path: var(--tds-notch--outline-thin);
content: "";
display: block;
left: 0;
opacity: 1;
position: absolute;
right: 0;
top: 0;
transition: .5s ease
}
.tds-theme--replicant .tds-progress_bar::-webkit-progress-value {
border-radius: 0;
box-shadow: var(--tds-glow--medium);
-webkit-clip-path: var(--tds-notch_progress);
clip-path: var(--tds-notch_progress)
}
.tds-theme--replicant .tds-progress_bar::-webkit-progress-bar {
box-shadow: none
}
.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 {
-webkit-padding-start: var(--tds-size--1x);
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 {
-webkit-margin-end: auto !important;
-webkit-margin-start: 0 !important;
display: block !important;
margin-inline-end: auto !important;
margin-inline-start: 0 !important
}
.tds--align_end {
-webkit-margin-end: 0 !important;
-webkit-margin-start: auto !important;
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);
-webkit-transform: translate3d(0, 30px, 0);
transform: translate3d(0, 30px, 0);
transition: opacity var(--tds-animate-transition-duration--short) var(--tds-animate-transition-function--mktg), -webkit-transform var(--tds-animate-transition-duration--short) var(--tds-animate-transition-function--mktg);
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);
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), -webkit-transform 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);
-webkit-transform: translateZ(0);
transform: translateZ(0);
z-index: auto
}
.tds-animate_large--to_reveal {
opacity: var(--tds-opacity--transparent);
-webkit-transform: translate3d(0, 100px, 0);
transform: translate3d(0, 100px, 0);
z-index: -1
}
.tds-animate_large--revealed {
opacity: var(--tds-opacity--100);
-webkit-transform: translateZ(0);
transform: translateZ(0);
transition: opacity var(--tds-animate-transition_duration--long) var(--tds-animate-transition-function--mktg), -webkit-transform var(--tds-animate-transition_duration--long) var(--tds-animate-transition-function--mktg);
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);
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), -webkit-transform 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 {
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: tds-keyframe--bounce;
animation-name: tds-keyframe--bounce
}
@-webkit-keyframes tds-keyframe--fade_out {
0% {
opacity: var(--tds-opacity--100)
}
to {
opacity: var(--tds-opacity--transparent)
}
}
@keyframes tds-keyframe--fade_out {
0% {
opacity: var(--tds-opacity--100)
}
to {
opacity: var(--tds-opacity--transparent)
}
}
@-webkit-keyframes tds-keyframe--fade_in {
0% {
opacity: var(--tds-opacity--transparent)
}
to {
opacity: var(--tds-opacity--100)
}
}
@keyframes tds-keyframe--fade_in {
0% {
opacity: var(--tds-opacity--transparent)
}
to {
opacity: var(--tds-opacity--100)
}
}
@-webkit-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_smaller {
0% {
max-block-size: 100vh;
opacity: var(--tds-opacity--100)
}
to {
max-block-size: 0;
opacity: var(--tds-opacity--transparent)
}
}
@-webkit-keyframes tds-keyframe--make_larger {
0% {
max-block-size: 0;
opacity: var(--tds-opacity--transparent)
}
to {
max-block-size: 100vh;
opacity: var(--tds-opacity--100)
}
}
@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)
}
}
@-webkit-keyframes tds-keyframe--bounce {
0%,
20%,
50%,
80%,
to {
-webkit-transform: translateY(0);
transform: translateY(0)
}
40% {
-webkit-transform: translateY(5px);
transform: translateY(5px)
}
60% {
-webkit-transform: translateY(3px);
transform: translateY(3px)
}
}
@keyframes tds-keyframe--bounce {
0%,
20%,
50%,
80%,
to {
-webkit-transform: translateY(0);
transform: translateY(0)
}
40% {
-webkit-transform: translateY(5px);
transform: translateY(5px)
}
60% {
-webkit-transform: translateY(3px);
transform: translateY(3px)
}
}
.tds--fade-in {
-webkit-animation: var(--tds--fade-in);
animation: var(--tds--fade-in)
}
@-webkit-keyframes tds--fade-in {
0% {
opacity: 0
}
to {
opacity: 1
}
}
@keyframes tds--fade-in {
0% {
opacity: 0
}
to {
opacity: 1
}
}
.tds--rotating {
-webkit-animation: var(--tds--rotating);
animation: var(--tds--rotating)
}
@-webkit-keyframes tds--rotating {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn)
}
}
@keyframes tds--rotating {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn)
}
}
.tds--pulsing {
-webkit-animation: var(--tds--pulsing);
animation: var(--tds--pulsing)
}
@-webkit-keyframes tds--pulsing {
0% {
opacity: 0
}
20% {
opacity: .7
}
to {
opacity: 0
}
}
@keyframes tds--pulsing {
0% {
opacity: 0
}
20% {
opacity: .7
}
to {
opacity: 0
}
}
.tds-columns {
-webkit-column-gap: 20px;
column-gap: 20px;
-webkit-column-width: auto;
column-width: auto;
display: block
}
.tds-columns--two {
-webkit-column-count: 2;
column-count: 2
}
.tds-columns--three {
-webkit-column-count: 3;
column-count: 3
}
@media (min-width:600px) {
.tds-columns--two_on_desktop {
-webkit-column-count: 2;
column-count: 2
}
.tds-columns--three_on_desktop {
-webkit-column-count: 3;
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 {
-webkit-padding-end: 0 !important;
-webkit-padding-start: 0 !important;
padding-inline-end: 0 !important;
padding-inline-start: 0 !important
}
.tds--no_vertical_padding {
-webkit-padding-after: 0 !important;
-webkit-padding-before: 0 !important;
padding-block-end: 0 !important;
padding-block-start: 0 !important
}
.tds--no_padding {
padding: 0 !important
}
.tds--horizontal_padding--small {
-webkit-padding-end: var(--tds-size--1x) !important;
-webkit-padding-start: var(--tds-size--1x) !important;
padding-inline-end: var(--tds-size--1x) !important;
padding-inline-start: var(--tds-size--1x) !important
}
.tds--horizontal_padding {
-webkit-padding-end: var(--tds-size--2x) !important;
-webkit-padding-start: var(--tds-size--2x) !important;
padding-inline-end: var(--tds-size--2x) !important;
padding-inline-start: var(--tds-size--2x) !important
}
.tds--horizontal_padding--large {
-webkit-padding-end: var(--tds-size--3x) !important;
-webkit-padding-start: var(--tds-size--3x) !important;
padding-inline-end: var(--tds-size--3x) !important;
padding-inline-start: var(--tds-size--3x) !important
}
.tds--vertical_padding--small {
-webkit-padding-after: var(--tds-size--1x) !important;
-webkit-padding-before: var(--tds-size--1x) !important;
padding-block-end: var(--tds-size--1x) !important;
padding-block-start: var(--tds-size--1x) !important
}
.tds--vertical_padding {
-webkit-padding-after: var(--tds-size--2x) !important;
-webkit-padding-before: var(--tds-size--2x) !important;
padding-block-end: var(--tds-size--2x) !important;
padding-block-start: var(--tds-size--2x) !important
}
.tds--vertical_padding--large {
-webkit-padding-after: var(--tds-size--3x) !important;
-webkit-padding-before: var(--tds-size--3x) !important;
padding-block-end: var(--tds-size--3x) !important;
padding-block-start: var(--tds-size--3x) !important
}
@media (max-width:599px) {
.tds--gutterless_on_small {
-webkit-padding-start: 0 !important;
-webkit-padding-end: 0 !important;
padding-inline-end: 0 !important;
padding-inline-start: 0 !important
}
}
.tds-sticky--left,
.tds-sticky--top {
margin: 0;
position: -webkit-sticky;
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;
-webkit-clip-path: inset(100%);
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
}
}
@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 {
text-rendering: optimizelegibility;
font-family: var(--tcl-font-family-latin-blender)
}
: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):lang(zh-HK) :is(.dx-hero-badges__primary-copy,
.tcl-countdown__timer) {
font-family: var(--tcl-font-family-chinese-traditional-ct-speed)
}
:is(.page-cyber main):is(:lang(zh-MO),
:lang(zh-TW)) :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: hsla(0, 0%, 100%, .6);
--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: hsla(0, 0%, 7%, .5);
--tds-color-ct-frosted-glass: linear-gradient(270deg, rgba(0, 0, 0, .1), hsla(0, 0%, 100%, 0));
--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, rgba(44, 44, 44, .1), hsla(0, 0%, 100%, 0));
--tds-color-ct-carousel: linear-gradient(270deg, rgba(0, 0, 0, .1), hsla(0, 0%, 100%, 0));
--tds-dotted-bg: radial-gradient(var(--tds-color-ct-dotted-grid) 1px, transparent 0);
--tds-dotted-bg-gradient: linear-gradient(180deg, transparent 0%, var(--tds-color-ct-bg) 100%);
--tds-dotted-bg-gradient-reversed: linear-gradient(180deg, var(--tds-color-ct-bg) 0%, transparent 100%);
--tds-blur--extra-small: 2px;
--tds-color-ct-focused-btn-bg: hsla(0, 0%, 100%, .15);
--tds-color-ct-focused-secondary-btn-bg: hsla(0, 0%, 100%, .06);
--tds-color-ct-focused-secondary-btn-border: hsla(0, 0%, 100%, .8);
--tds-color-ct-focused-ternary-btn-border: hsla(0, 0%, 100%, .8);
--tds-color-ct-focused-ternary-btn-bg: hsla(0, 0%, 100%, .15);
--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);
letter-spacing: 1.2px;
line-height: var(--tds-line-height-40);
text-transform: uppercase
}
.page-cyber .tds-theme--replicant-v2,
.page-cyber .tds-theme--replicant-v2 .tds-scrim--black {
letter-spacing: normal;
text-transform: none
}
.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: transparent
}
.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), transparent);
mask-image: linear-gradient(var(--tds-color-ct-bg), transparent)
}
.tds-theme--replicant-faded-bg-bottom:after {
-webkit-mask-image: linear-gradient(transparent, var(--tds-color-ct-bg));
mask-image: linear-gradient(transparent, 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), transparent);
mask-image: linear-gradient(var(--tds-color-ct-bg), transparent)
}
.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;
text-transform: none
}
.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)));
-webkit-clip-path: var(--clip);
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, transparent 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, transparent 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, transparent 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, transparent 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, transparent 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, transparent 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, transparent 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, transparent 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, transparent 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, transparent 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(transparent 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: transparent;
--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: transparent;
--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);
-webkit-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);
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 {
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg)
}
.tds-theme--replicant-v2 .tcl-no-transform {
text-transform: none
}
.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 {
-webkit-border-end: 1px solid var(--tcl-dx-hero-badge-border-color);
-webkit-padding-before: 8px;
-webkit-padding-end: 8px;
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 {
-webkit-border-start: 1px solid var(--tcl-dx-hero-badge-border-color);
-webkit-padding-before: 8px;
-webkit-padding-start: 8px;
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: hsla(0, 0%, 100%, .04);
--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 {
-webkit-margin-before: var(--tds-tab-list-item--margin-top);
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 {
-webkit-margin-before: 0;
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(transparent, var(--tds-color-black));
mask-image: linear-gradient(transparent, 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), transparent);
mask-image: linear-gradient(var(--tds-color-black), transparent)
}
.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) {
-webkit-padding-end: 0;
-webkit-padding-start: 0;
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%
}
@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) + var(--tds-size-half))
}
[dir=ltr] .tcl-layout,
[dir=rtl] .tcl-layout {
padding-left: calc(var(--tds-size-4x) + var(--tds-size-half))
}
[dir=rtl] .tcl-layout {
padding-right: calc(var(--tds-size-4x) + var(--tds-size-half))
}
.tcl-layout {
-webkit-padding-end: calc(var(--tds-size-4x) + var(--tds-size-half));
-webkit-padding-start: calc(var(--tds-size-4x) + var(--tds-size-half));
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--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
}
.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-top-banner-height, 0px))
}
@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 {
border-color: var(--tds-tab--background-color-on);
white-space: nowrap
}
.tcl-tab--pill,
.tcl-tab--pill[aria-selected=true] {
--tds-tab--background-color: transparent;
border-style: solid
}
.tcl-tab--pill[aria-selected=true] {
border-color: var(--tds-theme-foreground-high-contrast)
}
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: transparent;
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-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: transparent;
--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: transparent;
--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(transparent));
background: linear-gradient(180deg, #000 0, transparent);
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(transparent));
background: linear-gradient(0deg, #000 0, transparent);
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)
}
.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;
}
body:not(.tds-menu-header-transparent--light):not(.tds-menu-header-transparent--dark).tcl-page--with-sticky-header .tcl-page__main-content {
--dx-mega-menu__height: 56px;
padding-top: 56px;
padding-top: var(--tds-size--7x)
}
.dx-mega-menu {
--products-grid-column-count: 1
}
.dx-mega-menu-active-menu-title,
.dx-mega-menu-product-title {
padding: 0
}
.dx-mega-menu-panel-content {
max-width: 1799px
}
.dx-mega-menu-products {
display: grid;
gap: var(--tds-size-2x) var(--tds-size-2x);
padding: var(--tds-size-4x) 0 var(--tds-size-3x)
}
.dx-mega-menu-product {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
[dir=ltr] .dx-mega-menu-product-content {
padding-left: 20px
}
[dir=rtl] .dx-mega-menu-product-content {
padding-right: 20px
}
.dx-mega-menu-product-content {
-webkit-padding-start: 20px;
padding-inline-start: 20px
}
.dx-mega-menu-product .dx-mega-menu-product-asset,
.dx-mega-menu-product .dx-mega-menu-product-content {
-ms-flex-preferred-size: 0;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-basis: 0;
flex-grow: 1
}
.dx-mega-menu-product .dx-mega-menu-product-asset {
-webkit-box-pack: end;
-ms-flex-pack: end;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: end
}
.dx-mega-menu-product .dx-mega-menu-product-asset img {
max-width: 160px;
min-width: 0;
width: 100%
}
.dx-mega-menu-product-title {
font-size: 17px;
font-size: var(--tds-font-size-40, 17px);
letter-spacing: 0
}
.dx-mega-menu-product-links {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: var(--tds-size-2x);
padding-top: var(--tds-size-1x)
}
.dx-mega-menu-product-links .tds-link {
color: var(--tds-theme-foreground-low-contrast);
line-height: 12px;
padding-top: var(--tds-size-half)
}
.dx-mega-menu-panel-divider {
background-color: var(--tds-theme-border-low-contrast);
height: 1px;
margin: 0 12px
}
.dx-nav-item-group {
color: var(--tds-theme-foreground-high-contrast);
padding-top: var(--tds-size-4x)
}
.dx-nav-item-card {
--tds-card--padding: var(--tds-size-1x);
background-color: transparent;
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;
-webkit-backdrop-filter: (24px);
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: transparent;
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 (hover:hover) {
.dx-nav-item-card:hover {
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(var(--tds-blur--button));
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%, rgba(0, 0, 0, .92) 0, rgba(0, 0, 0, .92) 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: transparent;
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);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(var(--tds-blur--button));
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 .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)
}
.ajax-progress {
display: inline-block;
padding: 1px 5px 2px 5px
}
[dir="rtl"] .ajax-progress {
float: right
}
.ajax-progress-throbber .throbber {
display: inline;
padding: 1px 5px 2px;
background: transparent url(/themes/contrib/stable/css/system/components/../../../images/core/throbber-active.gif) no-repeat 0 center
}
.ajax-progress-throbber .message {
display: inline;
padding: 1px 5px 2px
}
tr .ajax-progress-throbber .throbber {
margin: 0 2px
}
.ajax-progress-bar {
width: 16em
}
.ajax-progress-fullscreen {
position: fixed;
z-index: 1000;
top: 48.5%;
left: 49%;
width: 24px;
height: 24px;
padding: 4px;
opacity: .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: transparent;
line-height: inherit;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none
}
.resize-none {
resize: none
}
.resize-vertical {
min-height: 2em;
resize: vertical
}
.resize-horizontal {
max-width: 100%;
resize: horizontal
}
.resize-both {
max-width: 100%;
min-height: 2em;
resize: both
}
table.sticky-header {
z-index: 500;
top: 0;
margin-top: 0;
background-color: #fff
}
.system-status-counter__status-icon {
display: inline-block;
width: 25px;
height: 25px;
vertical-align: middle
}
.system-status-counter__status-icon:before {
display: block;
content: "";
background-repeat: no-repeat;
background-position: center 2px;
background-size: 20px
}
.system-status-counter__status-icon--error:before {
background-image: url(/themes/contrib/stable/css/system/components/../../../images/core/icons/e32700/error.svg)
}
.system-status-counter__status-icon--warning:before {
background-image: url(/themes/contrib/stable/css/system/components/../../../images/core/icons/e29700/warning.svg)
}
.system-status-counter__status-icon--checked:before {
background-image: url(/themes/contrib/stable/css/system/components/../../../images/core/icons/73b355/check.svg)
}
.system-status-report-counters__item {
width: 100%;
margin-bottom: .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: bold
}
tr.region-message {
color: #999
}
tr.region-populated {
display: none
}
tr.add-new .tabledrag-changed {
display: none
}
.draggable a.tabledrag-handle {
float: left;
overflow: hidden;
height: 1.7em;
margin-left: -1em;
cursor: move;
text-decoration: none
}
[dir="rtl"] .draggable a.tabledrag-handle {
float: right;
margin-right: -1em;
margin-left: 0
}
a.tabledrag-handle:hover {
text-decoration: none
}
a.tabledrag-handle .handle {
width: 14px;
height: 14px;
margin: -.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
}
:root {
--tcl-specs-table-padding-block-start: var(--tds-size-10x);
--tcl-specs-table-padding-block-end: var(--tds-size-10x);
--tcl-specs-table-heading-margin-block-end: 28px;
--tcl-specs-table-tab-panel-padding-block-start: var(--tds-size-5x);
--tcl-specs-table-grid-columns: 8;
--tcl-specs-table-row-with-image-grid-columns: 4;
--tcl-specs-table-nav-grid: "heading heading heading heading heading heading heading heading" "tabs tabs tabs tabs tabs tabs tabs tabs";
--tcl-specs-table-row-grid: "spec spec spec spec spec spec spec spec";
--tcl-specs-table-row-with-image-grid: "spec spec spec spec image image image image";
--tcl-specs-table-divider-margin-block-start: 0;
--tcl-specs-table-divider-margin-block-end: var(--tds-size-4x)
}
@media (max-width:599px) {
:root {
--tcl-specs-table-padding-block-start: var(--tds-size-10x);
--tcl-specs-table-padding-block-end: var(--tds-size-10x);
--tcl-specs-table-heading-margin-block-end: var(--tds-size-3x);
--tcl-specs-table-tab-panel-padding-block-start: var(--tds-size-5x);
--tcl-specs-table-grid-columns: 2;
--tcl-specs-table-row-with-image-grid-columns: 2;
--tcl-specs-table-nav-grid: "heading heading" "tabs tabs";
--tcl-specs-table-row-grid: "spec spec";
--tcl-specs-table-row-with-image-grid: "image image" "spec spec";
--tcl-specs-table-divider-margin-block-start: 0;
--tcl-specs-table-divider-margin-block-end: var(--tds-size-4x)
}
}
@media (min-width:1200px) {
:root {
--tcl-specs-table-padding-block-start: var(--tds-size-13x);
--tcl-specs-table-padding-block-end: var(--tds-size-13x);
--tcl-specs-table-heading-margin-block-end: 0;
--tcl-specs-table-tab-panel-padding-block-start: var(--tds-size-7x);
--tcl-specs-table-grid-columns: 10;
--tcl-specs-table-row-with-image-grid-columns: 6;
--tcl-specs-table-nav-grid: "heading heading heading heading tabs tabs tabs tabs tabs tabs";
--tcl-specs-table-row-grid: "spec spec spec spec spec spec spec spec spec spec";
--tcl-specs-table-row-with-image-grid: "spec spec spec spec spec spec image image image image";
--tcl-specs-table-divider-margin-block-start: var(--tds-size-1x);
--tcl-specs-table-divider-margin-block-end: var(--tds-size-5x)
}
}
.tcl-specs-table {
padding-bottom: var(--tcl-specs-table-padding-block-end);
padding-top: var(--tcl-specs-table-padding-block-start)
}
.tcl-specs-table .tcl-tab-list__wrapper {
grid-gap: 0 var(--tds-size-4x);
display: grid;
grid-template-areas: "heading heading heading heading heading heading heading heading" "tabs tabs tabs tabs tabs tabs tabs tabs";
grid-template-areas: var(--tcl-specs-table-nav-grid);
grid-template-columns: repeat(8, 1fr);
grid-template-columns: repeat(var(--tcl-specs-table-grid-columns), 1fr)
}
.tcl-specs-table .tcl-tab-list__heading {
grid-area: heading
}
.tcl-specs-table .tcl-tab-list__heading h2 {
font-weight: var(--tds-font-weight-regular);
padding-top: 0
}
.tcl-specs-table .tds-tab-list {
align-self: end;
grid-area: tabs;
margin-top: 28px;
margin-top: var(--tcl-specs-table-heading-margin-block-end)
}
.tcl-specs-table .tds-tab-panel-list {
grid-column: -1/1;
padding-top: var(--tcl-specs-table-tab-panel-padding-block-start)
}
.tcl-specs-table__category {
padding-bottom: var(--tds-size-2x);
padding-top: 0
}
.tcl-specs-table__specs {
grid-gap: 0 var(--tds-size-4x);
display: grid;
grid-template-areas: "spec spec spec spec spec spec spec spec";
grid-template-areas: var(--tcl-specs-table-row-grid);
grid-template-columns: repeat(8, 1fr);
grid-template-columns: repeat(var(--tcl-specs-table-grid-columns), 1fr)
}
.tcl-specs-table__specs--image {
grid-template-areas: "spec spec spec spec image image image image";
grid-template-areas: var(--tcl-specs-table-row-with-image-grid)
}
.tcl-specs {
grid-gap: 0 var(--tds-size-4x);
display: grid;
grid-area: spec;
grid-template-columns: repeat(8, 1fr);
grid-template-columns: repeat(var(--tcl-specs-table-grid-columns), 1fr)
}
.tcl-specs-table__specs--image .tcl-specs {
grid-template-columns: repeat(4, 1fr);
grid-template-columns: repeat(var(--tcl-specs-table-row-with-image-grid-columns), 1fr)
}
.tcl-spec {
grid-column: span 2;
padding-bottom: var(--tds-size-4x)
}
.tcl-spec__heading {
color: var(--tds-color-grey-35);
padding-top: 0
}
.tcl-spec-image {
grid-area: image;
position: relative
}
.tcl-specs-table__divider {
background-color: #222;
background-color: var(--tds-color--grey15);
height: 1px;
margin-bottom: var(--tcl-specs-table-divider-margin-block-end);
margin-top: 0;
margin-top: var(--tcl-specs-table-divider-margin-block-start)
}
.tcl-spec__copy {
color: #fff;
color: var(--tds-color--white)
}
.tds-theme--replicant-v2 .tcl-specs-table .tcl-specs-table__category {
color: var(--tds-color-ct-body);
font-weight: var(--tds-font-weight-regular);
line-height: 26px
}
.tds-theme--replicant-v2 .tcl-specs-table .tcl-spec__heading {
--tds-heading--text-transform: none;
color: var(--tds-color-ct-body);
line-height: 17px;
padding-bottom: 8px
}
.tds-theme--replicant-v2 .tcl-specs-table .tcl-spec__copy {
color: var(--tds-color-ct-h1);
font-size: var(--tds-font-size-20);
line-height: 26px
}
@media (max-width:599px) {
.tcl-spec {
grid-column: span 1
}
.tcl-spec-image {
padding-bottom: var(--tds-size-6x);
padding-top: var(--tds-size-4x)
}
}
.tcl-tab-list__heading .tds-icon {
height: auto;
width: 204px
}
.tcl-tab-list__heading :is(.tds-icon-logo-cybertruck,
.tds-icon-logo-cybertruck-foundation-alt) {
display: inline
}
: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: transparent;
--tcl-image-end-gradient-start: #000;
--tcl-image-start-gradient-size: 20%;
--tcl-image-start-gradient-opacity: 0.5;
--tcl-image-start-gradient-end: transparent;
--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(transparent));
background: linear-gradient(180deg, #000 0, transparent);
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 {
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)
}
[dir=ltr] .tcl-image--with-end-gradient:after {
left: 0;
left: var(--tcl-image-gradient-end-inline-start, 0)
}
[dir=rtl] .tcl-image--with-end-gradient:after {
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(transparent));
background: linear-gradient(0deg, #000 0, transparent);
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);
bottom: 0;
content: "";
height: 100%;
height: var(--tcl-image-gradient-end-block-size, 100%);
inset-inline-end: auto;
inset-inline-end: var(--tcl-image-gradient-end-inline-end, auto);
inset-inline-start: 0;
inset-inline-start: var(--tcl-image-gradient-end-inline-start, 0);
opacity: .5;
opacity: var(--tcl-image-end-gradient-opacity);
position: absolute;
top: auto;
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-border-radius--card)
}
.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-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)
}
[dir=ltr] .tcl-image__asset {
margin-left: 0;
margin-left: var(--tcl-image-asset-margin-inline-start)
}
[dir=rtl] .tcl-image__asset {
margin-right: 0;
margin-right: var(--tcl-image-asset-margin-inline-start)
}
.tcl-image__asset {
-webkit-margin-end: 0;
-webkit-margin-end: var(--tcl-image-asset-margin-inline-end);
-webkit-margin-start: 0;
-webkit-margin-start: var(--tcl-image-asset-margin-inline-start);
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);
inset-inline-start: 0;
inset-inline-start: var(--tcl-image-asset-inset-inline-start);
margin-inline-end: 0;
margin-inline-end: var(--tcl-image-asset-margin-inline-end);
margin-inline-start: 0;
margin-inline-start: var(--tcl-image-asset-margin-inline-start);
margin-top: 0;
margin-top: var(--tcl-image-asset-margin-block-start);
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);
top: 0;
top: var(--tcl-image-asset-inset-block-start);
-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
}
:root {
--tcl-section-header-group-block-size: auto;
--tcl-section-header-group-buttons-align-items: stretch;
--tcl-section-header-group-buttons-display: block;
--tcl-section-header-group-buttons-flex-grow: 0;
--tcl-section-header-group-display: block;
--tcl-section-header-group-flex-flow: row nowrap
}
.tcl-section-header-group {
--tcl-button-max-inline-size: 100%;
--tcl-section-header-group-align: start;
--tcl-section-header-group-margin-inline: 0;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
display: block;
display: var(--tcl-section-header-group-display);
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-ms-flex-flow: var(--tcl-section-header-group-flex-flow);
flex-flow: var(--tcl-section-header-group-flex-flow);
height: auto;
height: var(--tcl-section-header-group-block-size)
}
@media (min-width:900px) {
.tcl-section-header-group--align-center {
--tcl-section-header-group-align: center;
--tcl-section-header-group-margin-inline: auto
}
}
@media (max-width:599px),
(min-width:600px) and (max-width:899px) {
.tcl-section-header-group--mobile-align-center {
--tcl-section-header-group-align: center;
--tcl-section-header-group-margin-inline: auto
}
}
.tcl-section-header-group__header {
padding-top: var(--tds-size-2x)
}
.tcl-section-header-group__layout,
.tcl-section-header-group__layout .tds-layout-main {
height: auto;
height: var(--tcl-section-header-group-block-size)
}
.tcl-section-header-group__header>* {
display: block
}
.tcl-section-header-group__copy {
padding-bottom: var(--tds-size-2x);
padding-top: var(--tds-size-2x)
}
.tcl-section-header-group__copy-desktop,
.tcl-section-header-group__copy-mobile {
font-size: var(--tds-font-size-30);
line-height: var(--tds-line-height-30);
max-width: 75ch;
padding-bottom: 0
}
.tcl-section-header-group__copy-full .tcl-section-header-group__copy-desktop,
.tcl-section-header-group__copy-full .tcl-section-header-group__copy-mobile {
max-width: none
}
.tcl-section-header-group__buttons {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
-webkit-box-align: var(--tcl-section-header-group-buttons-align-items);
-ms-flex-align: var(--tcl-section-header-group-buttons-align-items);
-webkit-box-flex: 0;
-ms-flex-positive: 0;
align-items: stretch;
align-items: var(--tcl-section-header-group-buttons-align-items);
display: block;
display: var(--tcl-section-header-group-buttons-display);
flex-grow: 0;
flex-grow: var(--tcl-section-header-group-buttons-flex-grow);
margin-bottom: var(--tds-size-2x);
margin-top: var(--tds-size-2x);
max-width: var(--tcl-grid-four-column-inline-size)
}
[dir=ltr] .tcl-section-header-group__buttons,
[dir=ltr] .tcl-section-header-group__copy,
[dir=ltr] .tcl-section-header-group__header {
margin-right: var(--tcl-section-header-group-margin-inline)
}
[dir=ltr] .tcl-section-header-group__buttons,
[dir=ltr] .tcl-section-header-group__copy,
[dir=ltr] .tcl-section-header-group__header,
[dir=rtl] .tcl-section-header-group__buttons,
[dir=rtl] .tcl-section-header-group__copy,
[dir=rtl] .tcl-section-header-group__header {
margin-left: var(--tcl-section-header-group-margin-inline)
}
[dir=rtl] .tcl-section-header-group__buttons,
[dir=rtl] .tcl-section-header-group__copy,
[dir=rtl] .tcl-section-header-group__header {
margin-right: var(--tcl-section-header-group-margin-inline)
}
.tcl-section-header-group__buttons,
.tcl-section-header-group__copy,
.tcl-section-header-group__header {
-webkit-margin-end: var(--tcl-section-header-group-margin-inline);
-webkit-margin-start: var(--tcl-section-header-group-margin-inline);
margin-inline-end: var(--tcl-section-header-group-margin-inline);
margin-inline-start: var(--tcl-section-header-group-margin-inline);
text-align: var(--tcl-section-header-group-align)
}
.tcl-section-header-group--split-desktop-buttons {
--tcl-section-header-group-block-size: 100%;
--tcl-section-header-group-display: flex;
--tcl-section-header-group-flex-flow: column
}
.tcl-section-header-group__buttons-split-desktop {
-webkit-box-align: end;
-ms-flex-align: end;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
align-items: flex-end;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-grow: 1
}
@media (max-width:599px),
(min-width:600px) and (max-width:899px) {
.tcl-section-header-group__header {
padding-bottom: 0;
padding-top: 0
}
.tcl-section-header-group--split-mobile-buttons {
--tcl-section-header-group-block-size: 100%;
--tcl-section-header-group-display: flex;
--tcl-section-header-group-flex-flow: column
}
.tcl-section-header-group__buttons-split-mobile {
-webkit-box-align: end;
-ms-flex-align: end;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
align-items: flex-end;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-grow: 1
}
}
@media (max-width:599px) {
.tcl-section-header-group__layout {
-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-header-group__layout.tcl-layout--spacious-50-50 {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column
}
}
@media (min-width:600px) {
body.animate-onscroll .tcl-section-header-group .tcl-animate--to-reveal {
opacity: 0;
-webkit-transform: translateY(var(--tds-size-5x)) translateZ(0);
transform: translateY(var(--tds-size-5x)) translateZ(0);
-webkit-transition: all .5s cubic-bezier(.455, .03, .515, .955) .15s;
transition: all .5s cubic-bezier(.455, .03, .515, .955) .15s
}
body.animate-onscroll .tcl-section-header-group .tcl-animate--revealed {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
}
@media (min-width:600px) and (max-width:899px) {
.tcl-section-header-group__layout {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: column-reverse nowrap;
flex-flow: column-reverse nowrap
}
.tcl-section-header-group__layout.tcl-layout--spacious-50-50 {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column
}
.tcl-section-header-group__buttons-desktop,
.tcl-section-header-group__copy-desktop {
display: none !important
}
.tcl-section-header-group__buttons-mobile {
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important
}
.tcl-section-header-group__copy-mobile {
display: block !important
}
}
.tcl-section-header-group--with-open-drawer-button .tcl-section-header-group__buttons {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
@media (max-width:599px) {
.tcl-section-header-group--with-open-drawer-button .tcl-section-header-group__buttons {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: var(--tds-size-2x)
}
.tcl-section-header-group--with-open-drawer-button .tcl-button-group {
--tcl-button-group-inline-size: fit-size !important;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1
}
}
.tcl-section-header-group__buttons-stacked {
-webkit-box-align: start;
-ms-flex-align: start;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-box-pack: end;
-ms-flex-pack: end;
align-items: flex-start;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
justify-content: flex-end
}
.tcl-section-header-group__buttons-stacked .tcl-button-group {
margin-top: var(--tds-size-2x)
}
.tcl-section-header-group__embedded-object {
display: none
}
@media (min-height:700px) {
.tcl-section-header-group__embedded-object {
display: block
}
}
:root {
--tcl-video-asset-block-size: auto;
--tcl-video-asset-display: block;
--tcl-video-asset-inline-size: 100%;
--tcl-video-asset-inset-block-end: 0;
--tcl-video-asset-inset-block-start: 0;
--tcl-video-asset-inset-inline-start: 0;
--tcl-video-asset-margin-block-start: 0;
--tcl-video-asset-margin-inline-end: 0;
--tcl-video-asset-margin-inline-start: 0;
--tcl-video-asset-object-fit: cover;
--tcl-video-asset-object-position-x: center;
--tcl-video-asset-object-position-y: center;
--tcl-video-asset-position: static;
--tcl-video-asset-transform: none;
--tcl-video-border-radius: 0;
--tcl-video-duration-inset-block-end: var(--tds-size-2x);
--tcl-video-duration-inset-inline-end: var(--tds-size-3x);
--tcl-video-end-gradient-end: transparent;
--tcl-video-end-gradient-opacity: 0.5;
--tcl-video-end-gradient-size: 20%;
--tcl-video-end-gradient-start: #000;
--tcl-video-inline-size: 100%;
--tcl-video-overflow: visible;
--tcl-video-position: relative;
--tcl-video-start-gradient-end: transparent;
--tcl-video-start-gradient-opacity: 0.5;
--tcl-video-start-gradient-size: 20%;
--tcl-video-start-gradient-start: #000
}
.tcl-video {
height: auto;
height: var(--tcl-video-asset-block-size);
overflow: visible;
overflow: var(--tcl-video-overflow);
position: relative;
position: var(--tcl-video-position);
width: 100%;
width: var(--tcl-video-inline-size)
}
.tcl-video--with-start-gradient:before {
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(transparent));
background: linear-gradient(180deg, #000 0, transparent);
background: -webkit-gradient(linear, left top, left bottom, from(var(--tcl-video-gradient-start-direction, to bottom)), color-stop(0, var(--tcl-video-start-gradient-start)), to(var(--tcl-video-start-gradient-end)));
background: linear-gradient(var(--tcl-video-gradient-start-direction, to bottom), var(--tcl-video-start-gradient-start) 0, var(--tcl-video-start-gradient-end) 100%);
border-radius: 0;
border-radius: var(--tcl-video-border-radius);
content: "";
height: 100%;
height: var(--tcl-video-gradient-start-block-size, 100%);
opacity: .5;
opacity: var(--tcl-video-start-gradient-opacity);
position: absolute;
width: 100%;
width: var(--tcl-video-gradient-start-inline-size, 100%)
}
[dir=ltr] .tcl-video--with-end-gradient:after {
right: auto;
right: var(--tcl-video-gradient-end-inline-end, auto)
}
[dir=rtl] .tcl-video--with-end-gradient:after {
left: auto;
left: var(--tcl-video-gradient-end-inline-end, auto)
}
[dir=ltr] .tcl-video--with-end-gradient:after {
left: 0;
left: var(--tcl-video-gradient-end-inline-start, 0)
}
[dir=rtl] .tcl-video--with-end-gradient:after {
right: 0;
right: var(--tcl-video-gradient-end-inline-start, 0)
}
.tcl-video--with-end-gradient:after {
background: -webkit-gradient(linear, left bottom, left top, from(#000), to(transparent));
background: linear-gradient(0deg, #000 0, transparent);
background: -webkit-gradient(linear, left top, left bottom, from(var(--tcl-video-gradient-end-direction, to top)), color-stop(0, var(--tcl-video-end-gradient-start)), to(var(--tcl-video-end-gradient-end)));
background: linear-gradient(var(--tcl-video-gradient-end-direction, to top), var(--tcl-video-end-gradient-start) 0, var(--tcl-video-end-gradient-end) 100%);
border-radius: 0;
border-radius: var(--tcl-video-border-radius);
bottom: 0;
content: "";
height: 100%;
height: var(--tcl-video-gradient-end-block-size, 100%);
inset-inline-end: auto;
inset-inline-end: var(--tcl-video-gradient-end-inline-end, auto);
inset-inline-start: 0;
inset-inline-start: var(--tcl-video-gradient-end-inline-start, 0);
opacity: .5;
opacity: var(--tcl-video-end-gradient-opacity);
pointer-events: none;
position: absolute;
top: auto;
width: 100%;
width: var(--tcl-video-gradient-end-inline-size, 100%)
}
.tcl-video--with-vertical-gradient {
--tcl-video-gradient-end-block-size: var(--tcl-video-end-gradient-size);
--tcl-video-gradient-start-block-size: var(--tcl-video-start-gradient-size)
}
.tcl-video--with-horizontal-gradient {
--tcl-video-gradient-end-direction: to left;
--tcl-video-gradient-end-inline-end: 0;
--tcl-video-gradient-end-inline-size: var(--tcl-video-end-gradient-size);
--tcl-video-gradient-end-inline-start: auto;
--tcl-video-gradient-start-direction: to right;
--tcl-video-gradient-start-inline-size: var(--tcl-video-start-gradient-size)
}
html[dir=rtl] .tcl-image--with-horizontal-gradient {
--tcl-image-gradient-end-direction: to right;
--tcl-image-gradient-start-direction: to left
}
@media (min-width:600px) {
.tcl-video--with-rounded-corners {
--tcl-video-border-radius: var(--tds-border-radius--card);
overflow: hidden
}
}
[dir=ltr] .tcl-video__asset {
left: 0;
left: var(--tcl-video-asset-inset-inline-start)
}
[dir=rtl] .tcl-video__asset {
right: 0;
right: var(--tcl-video-asset-inset-inline-start)
}
[dir=ltr] .tcl-video__asset {
margin-right: 0;
margin-right: var(--tcl-video-asset-margin-inline-end)
}
[dir=rtl] .tcl-video__asset {
margin-left: 0;
margin-left: var(--tcl-video-asset-margin-inline-end)
}
[dir=ltr] .tcl-video__asset {
margin-left: 0;
margin-left: var(--tcl-video-asset-margin-inline-start)
}
[dir=rtl] .tcl-video__asset {
margin-right: 0;
margin-right: var(--tcl-video-asset-margin-inline-start)
}
.tcl-video__asset {
-webkit-margin-end: 0;
-webkit-margin-end: var(--tcl-video-asset-margin-inline-end);
-webkit-margin-start: 0;
-webkit-margin-start: var(--tcl-video-asset-margin-inline-start);
border-radius: 0;
border-radius: var(--tcl-video-border-radius);
bottom: 0;
bottom: var(--tcl-video-asset-inset-block-end);
display: block;
display: var(--tcl-video-asset-display);
height: auto;
height: var(--tcl-video-asset-block-size);
inset-inline-start: 0;
inset-inline-start: var(--tcl-video-asset-inset-inline-start);
margin-inline-end: 0;
margin-inline-end: var(--tcl-video-asset-margin-inline-end);
margin-inline-start: 0;
margin-inline-start: var(--tcl-video-asset-margin-inline-start);
margin-top: 0;
margin-top: var(--tcl-video-asset-margin-block-start);
-o-object-fit: cover;
object-fit: cover;
-o-object-fit: var(--tcl-video-asset-object-fit);
object-fit: var(--tcl-video-asset-object-fit);
-o-object-position: center center;
object-position: center center;
-o-object-position: var(--tcl-video-asset-object-position-x) var(--tcl-video-asset-object-position-y);
object-position: var(--tcl-video-asset-object-position-x) var(--tcl-video-asset-object-position-y);
opacity: 0;
position: static;
position: var(--tcl-video-asset-position);
top: 0;
top: var(--tcl-video-asset-inset-block-start);
-webkit-transform: none;
transform: none;
-webkit-transform: var(--tcl-video-asset-transform);
transform: var(--tcl-video-asset-transform);
width: 100%;
width: var(--tcl-video-asset-inline-size)
}
@media (prefers-reduced-motion:reduce) {
.tcl-video__asset.visible {
opacity: 1
}
}
@media (prefers-reduced-motion:no-preference) {
.tcl-video__asset {
opacity: 0
}
.tcl-video__asset.visible {
-webkit-animation: showVideo 1s ease-out;
animation: showVideo 1s ease-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards
}
@-webkit-keyframes showVideo {
0% {
display: block;
opacity: 0
}
to {
opacity: 1
}
}
@keyframes showVideo {
0% {
display: block;
opacity: 0
}
to {
opacity: 1
}
}
}
.tcl-video__asset.autoplay_mobile_is_off,
.tcl-video__asset.autoplay_mobile_is_off.visible,
.tcl-video__asset.visible-no-fade-in,
.tcl-video__asset.visible-no-fade-in.visible,
.tcl-video__search-results {
-webkit-animation: none;
animation: none;
-webkit-animation-fill-mode: none;
animation-fill-mode: none;
opacity: 1
}
.tcl-video__asset.tcl-objectfit-position--top {
--tcl-video-asset-object-position-y: top
}
.tcl-video__asset.tcl-objectfit-position--bottom {
--tcl-video-asset-object-position-y: bottom
}
.tcl-video__asset.tcl-objectfit-position--center {
--tcl-video-asset-object-position-y: center
}
.tcl-video__play {
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%;
justify-content: center;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1
}
.tcl-video__play.active {
opacity: 1;
z-index: 2
}
.tcl-video__play.active:hover {
cursor: pointer
}
body:not(.is-Chrome) .tcl-video__play {
display: none
}
[dir=ltr] .tcl-video__play-icon {
padding-left: 10px
}
[dir=rtl] .tcl-video__play-icon {
padding-right: 10px
}
.tcl-video__play-icon {
--tds-icon--size: 92px;
-webkit-padding-start: 10px;
background-color: hsla(0, 0%, 87%, .3);
background-position: 33px 28px;
background-repeat: no-repeat;
background-size: 25px 29px;
border: 5px solid var(--tds-theme-foreground-high-contrast);
border-radius: 92px;
padding-inline-start: 10px
}
[dir=ltr] .tcl-video__replay {
right: 10px
}
[dir=rtl] .tcl-video__replay {
left: 10px
}
.tcl-video__replay {
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
align-items: center;
background-color: transparent;
border: none;
bottom: 10px;
color: var(--tds-theme-foreground-high-contrast);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
inset-inline-end: 10px;
opacity: 0;
position: absolute;
z-index: -1
}
@media (min-width:600px) {
[dir=ltr] .tcl-video__replay {
right: var(--tds-size-2x)
}
[dir=rtl] .tcl-video__replay {
left: var(--tds-size-2x)
}
.tcl-video__replay {
bottom: var(--tds-size-2x);
inset-inline-end: var(--tds-size-2x)
}
}
@media (max-width:599px) {
[dir=ltr] .tcl-video__replay {
right: 30px
}
[dir=rtl] .tcl-video__replay {
left: 30px
}
.tcl-video__replay {
inset-inline-end: 30px
}
}
.tcl-video__replay:focus {
outline: 1px dotted var(--tds-theme-foreground-on-primary)
}
.tcl-video__replay.active {
cursor: pointer;
opacity: 1;
z-index: 1
}
[dir=ltr] .tcl-video__replay-icon {
margin-right: 5px
}
[dir=rtl] .tcl-video__replay-icon {
margin-left: 5px
}
.tcl-video__replay-icon {
--tcl-icon--border-color: var(--tds-theme-foreground-high-contrast);
--tds-icon--size: var(--tds-size-2x);
-webkit-margin-end: 5px;
border-width: 1px;
display: inline-block;
margin-inline-end: 5px;
padding: 2px;
vertical-align: middle
}
[dir=ltr] .tcl-video__duration {
right: var(--tds-size-3x);
right: var(--tcl-video-duration-inset-inline-end)
}
[dir=rtl] .tcl-video__duration {
left: var(--tds-size-3x);
left: var(--tcl-video-duration-inset-inline-end)
}
.tcl-video__duration {
--tds-theme-foreground-low-contrast: var(--tds-theme-foreground-on-primary);
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
align-items: center;
-webkit-backdrop-filter: blur(var(--tds-size-half));
backdrop-filter: blur(var(--tds-size-half));
background-color: rgba(0, 0, 0, .5);
bottom: var(--tds-size-2x);
bottom: var(--tcl-video-duration-inset-block-end);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
inset-inline-end: var(--tds-size-3x);
inset-inline-end: var(--tcl-video-duration-inset-inline-end);
justify-content: center;
min-height: var(--tds-size-3x);
min-width: var(--tds-size-6x);
padding-top: 0;
position: absolute
}
.tcl-video__control-inline {
cursor: pointer;
position: absolute;
z-index: 1
}
@media (min-width:600px) {
[dir=ltr] .tcl-video__duration {
right: calc(var(--tds-size-1x) + var(--tds-size-half))
}
[dir=rtl] .tcl-video__duration {
left: calc(var(--tds-size-1x) + var(--tds-size-half))
}
.tcl-video__duration {
bottom: calc(var(--tds-size-1x) + var(--tds-size-half));
inset-inline-end: calc(var(--tds-size-1x) + var(--tds-size-half))
}
[dir=ltr] .tcl-video__control-inline {
right: var(--tds-size-4x)
}
[dir=rtl] .tcl-video__control-inline {
left: var(--tds-size-4x)
}
.tcl-video__control-inline {
inset-inline-end: var(--tds-size-4x);
top: var(--tds-size-4x)
}
}
@media (max-width:599px) {
[dir=ltr] .tcl-video__control-inline {
right: var(--tds-size-3x)
}
[dir=rtl] .tcl-video__control-inline {
left: var(--tds-size-3x)
}
.tcl-video__control-inline {
inset-inline-end: var(--tds-size-3x);
top: var(--tds-size-3x)
}
}
@media (min-width:1200px) {
[dir=ltr] .tcl-video__duration {
right: var(--tds-size-2x)
}
[dir=rtl] .tcl-video__duration {
left: var(--tds-size-2x)
}
.tcl-video__duration {
bottom: var(--tds-size-2x);
inset-inline-end: var(--tds-size-2x)
}
[dir=ltr] .tcl-video__control-inline {
left: var(--tds-size-4x)
}
[dir=rtl] .tcl-video__control-inline {
right: var(--tds-size-4x)
}
.tcl-video__control-inline {
bottom: var(--tds-size-4x);
inset-block: auto var(--tds-size-4x);
inset-inline-start: var(--tds-size-4x);
top: auto
}
}
:root {
--tcl-component-padding-desktop-block-start: 0px;
--tcl-component-padding-tablet-block-start: 0px;
--tcl-component-padding-mobile-block-start: 0px;
--tcl-component-padding-desktop-block-end: 0px;
--tcl-component-padding-tablet-block-end: 0px;
--tcl-component-padding-mobile-block-end: 0px;
--tcl-carousel-v2-inline-size: 100%;
--tcl-carousel-v2-slides-container-padding-block-start: var(--tds-size-7x);
--tcl-carousel-v2-section-header-group-padding-block-start: var(--tds-size-9x);
--tcl-carousel-v2-slides-border-radius: var(--tds-btn--border-radius, 4px);
--tcl-carousel-v2-slides-grid-area: auto;
--tcl-carousel-v2-slides-margin-inline-end: calc(var(--tds-size-3x)*-1);
--tcl-carousel-v2-slides-margin-inline-start: calc(var(--tds-size-3x)*-1);
--tcl-carousel-v2-toggle-panel-heading-flex-grow: 0;
--tcl-carousel-v2-toggles-padding-block-end: var(--tds-size-9x);
--tcl-carousel-v2-toggles-padding-block-start: var(--tds-size-5x);
--tcl-carousel-v2-toggle-content-block-size: auto;
--tcl-asset-scale-by: 1;
--tcl-border-radius--pill: calc(var(--tds-border-radius--pill)*2)
}
@media (min-width:600px) and (max-width:899px) {
:root {
--tcl-carousel-v2-slides-container-padding-block-start: var(--tds-size-6x);
--tcl-carousel-v2-section-header-group-padding-block-start: var(--tds-size-7x);
--tcl-carousel-v2-toggles-padding-block-end: var(--tds-size-6x);
--tcl-carousel-v2-toggles-padding-block-start: var(--tds-size-4x);
--tcl-carousel-v2-slides-margin-inline-start: calc((var(--tds-size-4x) + var(--tds-size-half))*-1);
--tcl-carousel-v2-slides-margin-inline-end: calc((var(--tds-size-4x) + var(--tds-size-half))*-1)
}
.tcl-carousel-v2.tcl-carousel-v2--dotted-navigation {
--tcl-carousel-v2-toggles-padding-block-start: var(--tds-size-3x)
}
}
@media (max-width:599px) {
:root {
--tcl-carousel-v2-slides-container-padding-block-start: calc(var(--tds-size-4x) + var(--tds-size-half));
--tcl-carousel-v2-section-header-group-padding-block-start: var(--tds-size-5x);
--tcl-carousel-v2-toggles-padding-block-end: var(--tds-size-6x);
--tcl-carousel-v2-toggles-padding-block-start: var(--tds-size-3x)
}
.tcl-carousel-v2.tcl-carousel-v2--dotted-navigation {
--tcl-carousel-v2-toggles-padding-block-start: var(--tds-size-2x)
}
}
.tcl-drawer {
--tcl-carousel-v2-inline-size: calc(100% + var(--tds-size-8x))
}
.tcl-carousel-v2 {
display: grid;
max-width: 100vw;
overflow: hidden;
scroll-behavior: smooth;
width: 100%;
width: var(--tcl-carousel-v2-inline-size);
z-index: 1
}
[dir=ltr] .tcl-drawer .tcl-carousel-v2 {
margin-right: calc(var(--tds-size-4x)*-1)
}
[dir=ltr] .tcl-drawer .tcl-carousel-v2,
[dir=rtl] .tcl-drawer .tcl-carousel-v2 {
margin-left: calc(var(--tds-size-4x)*-1)
}
[dir=rtl] .tcl-drawer .tcl-carousel-v2 {
margin-right: calc(var(--tds-size-4x)*-1)
}
.tcl-drawer .tcl-carousel-v2 {
-webkit-margin-end: calc(var(--tds-size-4x)*-1);
-webkit-margin-start: calc(var(--tds-size-4x)*-1);
margin-inline-end: calc(var(--tds-size-4x)*-1);
margin-inline-start: calc(var(--tds-size-4x)*-1)
}
.tcl-carousel-v2__content {
-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-items: center;
background-color: transparent;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
grid-area: 1/-1;
justify-content: flex-start;
width: 100%;
z-index: 3
}
@media (max-width:599px),
(min-width:600px) and (max-width:899px) {
.tcl-carousel-v2__content {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start
}
}
.tcl-carousel-v2__section-header-group {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
padding-top: var(--tcl-carousel-v2-section-header-group-padding-block-start);
width: 100%
}
.tcl-carousel-v2__toggles {
padding-bottom: var(--tcl-carousel-v2-toggles-padding-block-end);
padding-top: var(--tcl-carousel-v2-toggles-padding-block-start);
width: 100%
}
@media (min-width:600px) and (max-width:899px) {
[dir=ltr] .tcl-carousel-v2--overbar-navigation .tcl-carousel-v2__toggles[data-toggle-count="4"],
[dir=ltr] .tcl-carousel-v2--overbar-navigation .tcl-carousel-v2__toggles[data-toggle-count="5"] {
margin-left: calc((var(--tds-size-4x) + var(--tds-size-half))*-1)
}
[dir=rtl] .tcl-carousel-v2--overbar-navigation .tcl-carousel-v2__toggles[data-toggle-count="4"],
[dir=rtl] .tcl-carousel-v2--overbar-navigation .tcl-carousel-v2__toggles[data-toggle-count="5"] {
margin-right: calc((var(--tds-size-4x) + var(--tds-size-half))*-1)
}
.tcl-carousel-v2--overbar-navigation .tcl-carousel-v2__toggles[data-toggle-count="4"],
.tcl-carousel-v2--overbar-navigation .tcl-carousel-v2__toggles[data-toggle-count="5"] {
-webkit-margin-start: calc((var(--tds-size-4x) + var(--tds-size-half))*-1);
margin-inline-start: calc((var(--tds-size-4x) + var(--tds-size-half))*-1);
overflow-x: auto;
overflow-y: hidden;
width: 100vw
}
}
@media (max-width:599px) {
[dir=ltr] .tcl-carousel-v2--overbar-fluid-navigation .tcl-carousel-v2__toggles,
[dir=ltr] .tcl-carousel-v2--overbar-navigation .tcl-carousel-v2__toggles {
margin-left: calc(var(--tds-size-3x)*-1)
}
[dir=rtl] .tcl-carousel-v2--overbar-fluid-navigation .tcl-carousel-v2__toggles,
[dir=rtl] .tcl-carousel-v2--overbar-navigation .tcl-carousel-v2__toggles {
margin-right: calc(var(--tds-size-3x)*-1)
}
.tcl-carousel-v2--overbar-fluid-navigation .tcl-carousel-v2__toggles,
.tcl-carousel-v2--overbar-navigation .tcl-carousel-v2__toggles {
-webkit-margin-start: calc(var(--tds-size-3x)*-1);
margin-inline-start: calc(var(--tds-size-3x)*-1);
overflow-x: auto;
overflow-y: hidden;
width: 100vw
}
}
.tcl-carousel-v2__indicators {
gap: var(--tds-size-1x);
grid-template-columns: repeat(auto-fit, 12px)
}
.tcl-carousel-v2__indicators,
.tcl-carousel-v2__panels {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start
}
.tcl-carousel-v2__panels {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: var(--tds-size-3x);
height: auto;
overflow: hidden;
position: relative
}
@media (min-width:900px) {
.tcl-carousel-v2__panels {
grid-auto-columns: minmax(0, 1fr);
grid-auto-flow: column
}
}
.tcl-carousel-v2__indicators:focus-within,
.tcl-carousel-v2__panels:focus-within {
-webkit-box-shadow: none;
box-shadow: none
}
.is-Chrome-iOS .tcl-carousel-v2__panels,
.is-iOS .tcl-carousel-v2__panels {
overflow-x: scroll;
-ms-touch-action: none;
touch-action: none
}
.is-iOS .tcl-carousel-v2__panels::-webkit-scrollbar {
display: none
}
.tcl-carousel-v2__indicator {
height: calc(var(--tds-size-1x) + var(--tds-size-half));
padding: 6px
}
.tcl-carousel-v2__panel {
--tds-tab--background-color-on: transparent;
--tds-tab--border-radius: 0;
--tds-tab--justify-content: flex-start;
--tds-tab-list--height: auto;
-webkit-box-align: start;
-ms-flex-align: start;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
align-items: flex-start;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
height: 100%;
padding: 0
}
.tcl-carousel-v2__panel--hidden {
display: none;
visibility: hidden
}
@media (min-width:600px) and (max-width:899px) {
[dir=ltr] .tcl-carousel-v2__toggles[data-toggle-count="4"] .tcl-carousel-v2__panel:first-of-type,
[dir=ltr] .tcl-carousel-v2__toggles[data-toggle-count="5"] .tcl-carousel-v2__panel:first-of-type {
margin-left: calc(var(--tds-size-4x) + var(--tds-size-half))
}
[dir=rtl] .tcl-carousel-v2__toggles[data-toggle-count="4"] .tcl-carousel-v2__panel:first-of-type,
[dir=rtl] .tcl-carousel-v2__toggles[data-toggle-count="5"] .tcl-carousel-v2__panel:first-of-type {
margin-right: calc(var(--tds-size-4x) + var(--tds-size-half))
}
.tcl-carousel-v2__toggles[data-toggle-count="4"] .tcl-carousel-v2__panel:first-of-type,
.tcl-carousel-v2__toggles[data-toggle-count="5"] .tcl-carousel-v2__panel:first-of-type {
-webkit-margin-start: calc(var(--tds-size-4x) + var(--tds-size-half));
margin-inline-start: calc(var(--tds-size-4x) + var(--tds-size-half))
}
}
@media (max-width:599px) {
[dir=ltr] .tcl-carousel-v2__panel:first-of-type {
margin-left: var(--tds-size-3x)
}
[dir=rtl] .tcl-carousel-v2__panel:first-of-type {
margin-right: var(--tds-size-3x)
}
.tcl-carousel-v2__panel:first-of-type {
-webkit-margin-start: var(--tds-size-3x);
margin-inline-start: var(--tds-size-3x)
}
.tcl-carousel-v2__panel--hidden {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
visibility: hidden
}
}
@media (min-width:600px) and (max-width:899px) {
.tcl-carousel-v2__toggles[data-toggle-count="4"] .tcl-carousel-v2__panel--hidden,
.tcl-carousel-v2__toggles[data-toggle-count="5"] .tcl-carousel-v2__panel--hidden {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
visibility: hidden
}
}
.tcl-carousel-v2__panel[aria-selected=true] {
-webkit-box-shadow: inset 0 4px 0 0 var(--tds-theme-foreground-high-contrast);
box-shadow: inset 0 4px 0 0 var(--tds-theme-foreground-high-contrast)
}
.tcl-carousel-v2__panel:not([aria-selected=true]) {
-webkit-box-shadow: inset 0 2px 0 0 var(--tds-theme-foreground-high-contrast);
box-shadow: inset 0 2px 0 0 var(--tds-theme-foreground-high-contrast);
opacity: .4
}
@media (max-width:599px) {
.tcl-carousel-v2__panel {
width: calc(75vw - 30px)
}
}
@media (min-width:600px) and (max-width:899px) {
.tcl-carousel-v2__toggles[data-toggle-count="2"] .tcl-carousel-v2__panel {
width: calc(50vw - 60px)
}
.tcl-carousel-v2__toggles[data-toggle-count="3"] .tcl-carousel-v2__panel {
width: calc(33.33333vw - 40px)
}
.tcl-carousel-v2__toggles[data-toggle-count="4"] .tcl-carousel-v2__panel,
.tcl-carousel-v2__toggles[data-toggle-count="5"] .tcl-carousel-v2__panel {
width: calc(37.5vw - 39px)
}
}
.tcl-carousel-v2__toggle-content-heading {
padding-bottom: var(--tds-size-half);
padding-top: var(--tds-size-2x)
}
[dir=ltr] .tcl-carousel-v2__toggle-panel-heading {
text-align: left
}
[dir=rtl] .tcl-carousel-v2__toggle-panel-heading {
text-align: right
}
.tcl-carousel-v2__toggle-panel-heading {
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
flex-grow: var(--tcl-carousel-v2-toggle-panel-heading-flex-grow);
overflow-wrap: anywhere;
padding-bottom: 0;
padding-top: var(--tds-size-2x);
text-align: start
}
.tcl-carousel-v2__toggle-content-copy {
padding-top: 0
}
[dir=ltr] .tcl-carousel-v2__toggle-panel-copy {
text-align: left
}
[dir=rtl] .tcl-carousel-v2__toggle-panel-copy {
text-align: right
}
.tcl-carousel-v2__toggle-panel-copy {
font-weight: var(--tds-font-weight-regular);
padding-top: var(--tds-size-2x);
text-align: start
}
.tcl-carousel-v2__toggle-content {
color: var(--tds-theme-foreground-high-contrast);
height: auto;
height: var(--tcl-carousel-v2-toggle-content-block-size);
visibility: hidden
}
.tcl-carousel-v2__toggle-content-active {
visibility: visible
}
.tcl-carousel-v2__slides-container {
padding-top: var(--tcl-carousel-v2-slides-container-padding-block-start)
}
.tcl-carousel-v2__slides-container--full {
--tcl-carousel-v2-slides-border-radius: 0;
--tcl-carousel-v2-slides-margin-inline-end: 0;
--tcl-carousel-v2-slides-margin-inline-start: 0;
width: 100%
}
.tcl-carousel-v2__slides {
aspect-ratio: var(--tcl-component-aspect-ratio);
border-radius: 4px;
border-radius: var(--tcl-carousel-v2-slides-border-radius);
grid-area: 1/-1;
grid-area: var(--tcl-carousel-v2-slides-grid-area);
overflow: hidden;
position: relative;
z-index: 2
}
@media (max-width:599px),
(min-width:600px) and (max-width:899px) {
[dir=ltr] .tcl-carousel-v2:not(.tcl-carousel-v2--fullscreen) .tcl-carousel-v2__slides {
margin-right: var(--tcl-carousel-v2-slides-margin-inline-end)
}
[dir=rtl] .tcl-carousel-v2:not(.tcl-carousel-v2--fullscreen) .tcl-carousel-v2__slides {
margin-left: var(--tcl-carousel-v2-slides-margin-inline-end)
}
[dir=ltr] .tcl-carousel-v2:not(.tcl-carousel-v2--fullscreen) .tcl-carousel-v2__slides {
margin-left: var(--tcl-carousel-v2-slides-margin-inline-start)
}
[dir=rtl] .tcl-carousel-v2:not(.tcl-carousel-v2--fullscreen) .tcl-carousel-v2__slides {
margin-right: var(--tcl-carousel-v2-slides-margin-inline-start)
}
.tcl-carousel-v2:not(.tcl-carousel-v2--fullscreen) .tcl-carousel-v2__slides {
-webkit-margin-end: calc(var(--tds-size-3x)*-1);
-webkit-margin-end: var(--tcl-carousel-v2-slides-margin-inline-end);
-webkit-margin-start: calc(var(--tds-size-3x)*-1);
-webkit-margin-start: var(--tcl-carousel-v2-slides-margin-inline-start);
aspect-ratio: var(--tcl-component-mobile-aspect-ratio);
border-radius: 0;
margin-inline-end: calc(var(--tds-size-3x)*-1);
margin-inline-end: var(--tcl-carousel-v2-slides-margin-inline-end);
margin-inline-start: calc(var(--tds-size-3x)*-1);
margin-inline-start: var(--tcl-carousel-v2-slides-margin-inline-start);
width: 100vw
}
.tcl-carousel-v2__toggle-content-heading {
padding-bottom: var(--tds-size-1x);
padding-top: var(--tds-size-2x)
}
}
@media (min-width:600px) and (max-width:899px) {
.tcl-carousel-v2:not(.tcl-carousel-v2--fullscreen) .tcl-carousel-v2__slides {
aspect-ratio: var(--tcl-component-mobile-aspect-ratio)
}
.tcl-carousel-v2.tcl-carousel-v2--tablet-as-desktop:not(:is(.tcl-component-tablet-media-ratio,
.tcl-carousel-v2--fullscreen)) .tcl-carousel-v2__slides {
aspect-ratio: var(--tcl-component-aspect-ratio)
}
.tcl-carousel-v2.tcl-component-tablet-media-ratio:not(.tcl-carousel-v2--fullscreen) .tcl-carousel-v2__slides {
aspect-ratio: var(--tcl-component-tablet-aspect-ratio)
}
}
@media (min-width:600px) and (max-width:899px) {
[dir=ltr] .tcl-layout .tcl-carousel-v2:is(.tcl-carousel-v2--overbar-fluid-navigation,
.tcl-carousel-v2--overbar-navigation) :is(.tds-layout,
.tds-layout--no_offset) {
padding-left: 0
}
[dir=rtl] .tcl-layout .tcl-carousel-v2:is(.tcl-carousel-v2--overbar-fluid-navigation,
.tcl-carousel-v2--overbar-navigation) :is(.tds-layout,
.tds-layout--no_offset) {
padding-right: 0
}
[dir=ltr] .tcl-layout .tcl-carousel-v2:is(.tcl-carousel-v2--overbar-fluid-navigation,
.tcl-carousel-v2--overbar-navigation) :is(.tds-layout,
.tds-layout--no_offset) {
padding-right: 0
}
[dir=rtl] .tcl-layout .tcl-carousel-v2:is(.tcl-carousel-v2--overbar-fluid-navigation,
.tcl-carousel-v2--overbar-navigation) :is(.tds-layout,
.tds-layout--no_offset) {
padding-left: 0
}
.tcl-layout .tcl-carousel-v2:is(.tcl-carousel-v2--overbar-fluid-navigation,
.tcl-carousel-v2--overbar-navigation) :is(.tds-layout,
.tds-layout--no_offset) {
-webkit-padding-start: 0;
-webkit-padding-end: 0;
padding-inline-end: 0;
padding-inline-start: 0
}
[dir=ltr] .tcl-layout .tcl-carousel-v2.tcl-carousel-v2--dotted-navigation .tcl-carousel-v2__slides-container {
padding-left: 0
}
[dir=ltr] .tcl-layout .tcl-carousel-v2.tcl-carousel-v2--dotted-navigation .tcl-carousel-v2__slides-container,
[dir=rtl] .tcl-layout .tcl-carousel-v2.tcl-carousel-v2--dotted-navigation .tcl-carousel-v2__slides-container {
padding-right: 0
}
[dir=rtl] .tcl-layout .tcl-carousel-v2.tcl-carousel-v2--dotted-navigation .tcl-carousel-v2__slides-container {
padding-left: 0
}
.tcl-layout .tcl-carousel-v2.tcl-carousel-v2--dotted-navigation .tcl-carousel-v2__slides-container {
-webkit-padding-start: 0;
-webkit-padding-end: 0;
padding-inline-end: 0;
padding-inline-start: 0
}
.tcl-layout .tcl-carousel-v2:not(.tcl-carousel-v2--fullscreen) {
--tcl-carousel-v2-slides-margin-inline-start: 0;
--tcl-carousel-v2-slides-margin-inline-end: 0
}
.tcl-layout .tcl-carousel-v2:not(.tcl-carousel-v2--fullscreen) .tcl-carousel-v2__slides {
width: 100%
}
[dir=ltr] .tcl-layout .tcl-carousel-v2.tcl-carousel-v2__toggles[data-toggle-count="4"] .tcl-carousel-v2__panel:first-of-type,
[dir=ltr] .tcl-layout .tcl-carousel-v2.tcl-carousel-v2__toggles[data-toggle-count="5"] .tcl-carousel-v2__panel:first-of-type {
margin-left: 0
}
[dir=rtl] .tcl-layout .tcl-carousel-v2.tcl-carousel-v2__toggles[data-toggle-count="4"] .tcl-carousel-v2__panel:first-of-type,
[dir=rtl] .tcl-layout .tcl-carousel-v2.tcl-carousel-v2__toggles[data-toggle-count="5"] .tcl-carousel-v2__panel:first-of-type {
margin-right: 0
}
.tcl-layout .tcl-carousel-v2.tcl-carousel-v2__toggles[data-toggle-count="4"] .tcl-carousel-v2__panel:first-of-type,
.tcl-layout .tcl-carousel-v2.tcl-carousel-v2__toggles[data-toggle-count="5"] .tcl-carousel-v2__panel:first-of-type {
-webkit-margin-start: 0;
margin-inline-start: 0
}
}
@supports not (aspect-ratio:1/1) {
[dir=ltr] .tcl-carousel-v2:not(.tcl-carousel-v2--fullscreen) .tcl-carousel-v2__slides:before {
float: left
}
[dir=rtl] .tcl-carousel-v2:not(.tcl-carousel-v2--fullscreen) .tcl-carousel-v2__slides:before {
float: right
}
.tcl-carousel-v2:not(.tcl-carousel-v2--fullscreen) .tcl-carousel-v2__slides:before {
content: "";
float: inline-start;
padding-top: var(--tcl-component-aspect-ratio-polyfill)
}
.tcl-carousel-v2:not(.tcl-carousel-v2--fullscreen) .tcl-carousel-v2__slides:after {
clear: both;
content: "";
display: block
}
}
@supports not (aspect-ratio:1/1) {
@media (max-width: 599px) {
.tcl-carousel-v2:not(.tcl-carousel-v2--fullscreen) .tcl-carousel-v2__slides:before {
padding-top:var(--tcl-component-mobile-aspect-ratio-polyfill)
}
}
@media (min-width:600px) and (max-width:899px) {
.tcl-carousel-v2:not(.tcl-carousel-v2--fullscreen) .tcl-carousel-v2__slides:before {
padding-top: var(--tcl-component-tablet-aspect-ratio-polyfill)
}
}
}
.tcl-carousel-v2__slide {
height: 100%;
overflow: hidden
}
.tcl-carousel-v2:not(.tcl-carousel-v2--fullscreen) .tcl-carousel-v2__range-path,
.tcl-carousel-v2:not(.tcl-carousel-v2--fullscreen) .tcl-image,
.tcl-carousel-v2:not(.tcl-carousel-v2--fullscreen) .tcl-video {
height: 100%;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%) scale(1);
transform: translateY(-50%) scale(1);
-webkit-transform: translateY(-50%) scale(var(--tcl-asset-scale-by));
transform: translateY(-50%) scale(var(--tcl-asset-scale-by))
}
.tcl-carousel-v2 .tcl-asset,
.tcl-carousel-v2 .tcl-image__picture {
height: 100%
}
.tcl-carousel-v2 .tcl-video__replay {
display: none
}
.tcl-carousel-v2__indicators {
--tds-tab--border-radius: var(--tcl-border-radius--pill)
}
.tcl-carousel-v2__overbar-fluid {
grid-template-areas: "main main main main main main main main main main main main"
}
.tcl-carousel-v2--overbar-fluid-navigation .tcl-carousel-v2__toggles {
padding-top: var(--tds-size-4x)
}
@media (max-width:599px) {
[dir=ltr] .tcl-full-media-bleed .tcl-carousel-v2--overbar-fluid-navigation .tcl-carousel-v2__toggles-container,
[dir=ltr] .tcl-full-media-bleed .tcl-carousel-v2--overbar-navigation .tcl-carousel-v2__toggles-container {
margin-left: var(--tcl-carousel-v2-slides-margin-inline-start)
}
[dir=rtl] .tcl-full-media-bleed .tcl-carousel-v2--overbar-fluid-navigation .tcl-carousel-v2__toggles-container,
[dir=rtl] .tcl-full-media-bleed .tcl-carousel-v2--overbar-navigation .tcl-carousel-v2__toggles-container {
margin-right: var(--tcl-carousel-v2-slides-margin-inline-start)
}
[dir=ltr] .tcl-full-media-bleed .tcl-carousel-v2--overbar-fluid-navigation .tcl-carousel-v2__toggles-container,
[dir=ltr] .tcl-full-media-bleed .tcl-carousel-v2--overbar-navigation .tcl-carousel-v2__toggles-container {
margin-right: var(--tcl-carousel-v2-slides-margin-inline-end)
}
[dir=rtl] .tcl-full-media-bleed .tcl-carousel-v2--overbar-fluid-navigation .tcl-carousel-v2__toggles-container,
[dir=rtl] .tcl-full-media-bleed .tcl-carousel-v2--overbar-navigation .tcl-carousel-v2__toggles-container {
margin-left: var(--tcl-carousel-v2-slides-margin-inline-end)
}
.tcl-full-media-bleed .tcl-carousel-v2--overbar-fluid-navigation .tcl-carousel-v2__toggles-container,
.tcl-full-media-bleed .tcl-carousel-v2--overbar-navigation .tcl-carousel-v2__toggles-container {
-webkit-margin-start: calc(var(--tds-size-3x)*-1);
-webkit-margin-start: var(--tcl-carousel-v2-slides-margin-inline-start);
-webkit-margin-end: calc(var(--tds-size-3x)*-1);
-webkit-margin-end: var(--tcl-carousel-v2-slides-margin-inline-end);
margin-inline-end: calc(var(--tds-size-3x)*-1);
margin-inline-end: var(--tcl-carousel-v2-slides-margin-inline-end);
margin-inline-start: calc(var(--tds-size-3x)*-1);
margin-inline-start: var(--tcl-carousel-v2-slides-margin-inline-start);
width: calc(100% + var(--tcl-carousel-v2-slides-margin-size)*2)
}
.tcl-full-media-bleed .tcl-carousel-v2 {
overflow: visible
}
[dir=ltr] .tcl-full-media-bleed .tcl-carousel-v2 picture,
[dir=ltr] .tcl-full-media-bleed .tcl-carousel-v2 video {
margin-left: 0
}
[dir=ltr] .tcl-full-media-bleed .tcl-carousel-v2 picture,
[dir=ltr] .tcl-full-media-bleed .tcl-carousel-v2 video,
[dir=rtl] .tcl-full-media-bleed .tcl-carousel-v2 picture,
[dir=rtl] .tcl-full-media-bleed .tcl-carousel-v2 video {
margin-right: 0
}
[dir=rtl] .tcl-full-media-bleed .tcl-carousel-v2 picture,
[dir=rtl] .tcl-full-media-bleed .tcl-carousel-v2 video {
margin-left: 0
}
.tcl-full-media-bleed .tcl-carousel-v2 picture,
.tcl-full-media-bleed .tcl-carousel-v2 video {
-webkit-margin-start: 0;
-webkit-margin-end: 0;
margin-inline-end: 0;
margin-inline-start: 0;
width: 100%
}
[dir=ltr] .tcl-full-media-bleed .tcl-carousel-v2--overbar-fluid-navigation .tcl-carousel-v2__toggles,
[dir=ltr] .tcl-full-media-bleed .tcl-carousel-v2--overbar-navigation .tcl-carousel-v2__toggles {
margin-left: 0
}
[dir=rtl] .tcl-full-media-bleed .tcl-carousel-v2--overbar-fluid-navigation .tcl-carousel-v2__toggles,
[dir=rtl] .tcl-full-media-bleed .tcl-carousel-v2--overbar-navigation .tcl-carousel-v2__toggles {
margin-right: 0
}
.tcl-full-media-bleed .tcl-carousel-v2--overbar-fluid-navigation .tcl-carousel-v2__toggles,
.tcl-full-media-bleed .tcl-carousel-v2--overbar-navigation .tcl-carousel-v2__toggles {
-webkit-margin-start: 0;
margin-inline-start: 0;
width: 100%
}
.tcl-full-media-bleed .tcl-carousel-v2__slides-container {
padding-top: 0
}
}
.tcl-carousel-v2 .tcl-carousel-v2__content {
pointer-events: none
}
.tcl-carousel-v2 .tcl-carousel-v2__content :is(.tcl-carousel-v2__toggles,
.tcl-carousel-v2__slides,
.tcl-section-header-group__buttons) {
pointer-events: auto
}
:root {
--vh: 1svb;
--tcl-carousel-v2-block-size: 900px
}
.tcl-carousel-v2--fullscreen {
--tcl-carousel-v2-slides-border-radius: 0;
--tcl-carousel-v2-slides-grid-area: 1/-1;
--tcl-carousel-v2-toggles-padding-block-end: var(--tds-size-9x);
--tcl-image-asset-block-size: var(--tcl-carousel-v2-block-size);
--tcl-video-asset-block-size: var(--tcl-carousel-v2-block-size);
height: 900px;
height: var(--tcl-carousel-v2-block-size)
}
@media (min-width:600px) and (max-width:899px) {
.tcl-carousel-v2--fullscreen {
--tcl-image-asset-block-size: 100vh;
--tcl-video-asset-block-size: 100vh;
--tcl-carousel-v2-block-size: 100vh;
--tcl-carousel-v2-toggles-padding-block-end: var(--tds-size-7x)
}
}
@media (max-width:599px) {
.tcl-carousel-v2--fullscreen {
--tcl-carousel-v2-toggles-padding-block-end: var(--tds-size-5x)
}
}
.is-Android .tcl-carousel-v2--fullscreen,
.is-Galaxy-Tab .tcl-carousel-v2--fullscreen,
.is-Samsung .tcl-carousel-v2--fullscreen {
--tcl-carousel-v2-section-vertical-paddings: calc(var(--tcl-component-padding-mobile-block-start) + var(--tcl-component-padding-mobile-block-end));
--tcl-image-asset-block-size: 724px;
--tcl-video-asset-block-size: 724px;
height: calc(724px + var(--tcl-carousel-v2-section-vertical-paddings))
}
@media only screen and (device-width:375px) and (device-height:667px) and (orientation:portrait) and (-webkit-device-pixel-ratio:2) {
.tcl-carousel-v2--fullscreen {
--tcl-carousel-v2-section-vertical-paddings: calc(var(--tcl-component-padding-mobile-block-start) + var(--tcl-component-padding-mobile-block-end));
--tcl-image-asset-block-size: 724px;
--tcl-video-asset-block-size: 724px;
height: calc(724px + var(--tcl-carousel-v2-section-vertical-paddings))
}
}
@media only screen and (device-width:414px) and (device-height:736px) and (orientation:portrait) and (-webkit-device-pixel-ratio:3) {
.tcl-carousel-v2--fullscreen {
--tcl-carousel-v2-section-vertical-paddings: calc(var(--tcl-component-padding-mobile-block-start) + var(--tcl-component-padding-mobile-block-end));
--tcl-image-asset-block-size: 724px;
--tcl-video-asset-block-size: 724px;
height: calc(724px + var(--tcl-carousel-v2-section-vertical-paddings))
}
}
@media only screen and (device-width:375px) and (device-height:812px) and (orientation:portrait) and (-webkit-device-pixel-ratio:3) {
.tcl-carousel-v2--fullscreen {
--tcl-carousel-v2-section-vertical-paddings: calc(var(--tcl-component-padding-mobile-block-start) + var(--tcl-component-padding-mobile-block-end));
--tcl-image-asset-block-size: 724px;
--tcl-video-asset-block-size: 724px;
height: calc(724px + var(--tcl-carousel-v2-section-vertical-paddings))
}
.is-Chrome-iOS .tcl-carousel-v2--fullscreen {
--tcl-carousel-v2-section-vertical-paddings: calc(var(--tcl-component-padding-mobile-block-start) + var(--tcl-component-padding-mobile-block-end));
--tcl-image-asset-block-size: 729px;
--tcl-video-asset-block-size: 729px;
height: calc(729px + var(--tcl-carousel-v2-section-vertical-paddings))
}
}
@media only screen and (device-width:390px) and (device-height:844px) and (orientation:portrait) and (-webkit-device-pixel-ratio:3) {
.tcl-carousel-v2--fullscreen {
--tcl-carousel-v2-section-vertical-paddings: calc(var(--tcl-component-padding-mobile-block-start) + var(--tcl-component-padding-mobile-block-end));
--tcl-image-asset-block-size: 724px;
--tcl-video-asset-block-size: 724px;
height: calc(724px + var(--tcl-carousel-v2-section-vertical-paddings))
}
.is-Chrome-iOS .tcl-carousel-v2--fullscreen {
--tcl-carousel-v2-section-vertical-paddings: calc(var(--tcl-component-padding-mobile-block-start) + var(--tcl-component-padding-mobile-block-end));
--tcl-image-asset-block-size: 729px;
--tcl-video-asset-block-size: 729px;
height: calc(729px + var(--tcl-carousel-v2-section-vertical-paddings))
}
}
@media only screen and (device-width:414px) and (device-height:896px) and (orientation:portrait) and (-webkit-device-pixel-ratio:2) {
.tcl-carousel-v2--fullscreen {
--tcl-carousel-v2-section-vertical-paddings: calc(var(--tcl-component-padding-mobile-block-start) + var(--tcl-component-padding-mobile-block-end));
--tcl-image-asset-block-size: 724px;
--tcl-video-asset-block-size: 724px;
height: calc(724px + var(--tcl-carousel-v2-section-vertical-paddings))
}
.is-Chrome-iOS .tcl-carousel-v2--fullscreen {
--tcl-carousel-v2-section-vertical-paddings: calc(var(--tcl-component-padding-mobile-block-start) + var(--tcl-component-padding-mobile-block-end));
--tcl-image-asset-block-size: 729px;
--tcl-video-asset-block-size: 729px;
height: calc(729px + var(--tcl-carousel-v2-section-vertical-paddings))
}
}