@custom-media --tds-phone-only (max-width:599px);
@custom-media --tds-tablet-portrait-only (min-width:600px) and (max-width:899px);
@custom-media --tds-tablet-portrait-up (min-width:600px);
@custom-media --tds-tablet-landscape-only (min-width:900px) and (max-width:1199px);
@custom-media --tds-tablet-landscape-up (min-width:900px);
@custom-media --tds-desktop-only (min-width:1200px) and (max-width:1799px);
@custom-media --tds-desktop-up (min-width:1200px);
@custom-media --tds-desktop-large-up (min-width:1800px);
@custom-media --tds-density--2x only screen and (-o-min-device-pixel-ratio:5/4),
only screen and (-webkit-min-device-pixel-ratio:1.25),
only screen and (min-device-pixel-ratio:1.25),
only screen and (min-resolution:1.25dppx);
@custom-media --tds-density--3x only screen and (-o-min-device-pixel-ratio:9/4),
only screen and (-webkit-min-device-pixel-ratio:2.25),
only screen and (min-device-pixel-ratio:2.25),
only screen and (min-resolution:2.25dppx);
@custom-media --tds-density--4x only screen and (-o-min-device-pixel-ratio:13/4),
only screen and (-webkit-min-device-pixel-ratio:3.25),
only screen and (min-device-pixel-ratio:3.25),
only screen and (min-resolution:3.25dppx);
{
--tds-animate--move: transform 900ms cubic-bezier(.75, 0, 0, 1);
--tds-animate--color: background-color 450ms cubic-bezier(.5, .25, .25, .75), color 450ms cubic-bezier(.5, .25, .25, .75), opacity 450ms cubic-bezier(.5, .25, .25, .75);
--tds-animate--focus: border 250ms cubic-bezier(.5, .25, .25, .75), box-shadow 250ms cubic-bezier(.5, .25, .25, .75), color 250ms cubic-bezier(.5, .25, .25, .75), opacity 250ms cubic-bezier(.5, .25, .25, .75);
--tds-animate-all--long: all 900ms cubic-bezier(.75, 0, 0, 1), background-color 900ms cubic-bezier(.5, .25, .25, .75), color 900ms cubic-bezier(.5, .25, .25, .75), opacity 900ms cubic-bezier(.5, .25, .25, .75);
--tds-border-style: solid;
--tds-border-radius: 4px;
--tds-border-radius--forms: 20px;
--tds-border-radius--pill: 100px;
--tds-border-width--hairline: 0.5px;
--tds-border-width--small: 1px;
--tds-border-width--medium: 2px;
--tds-border-width--large: 3px;
--tds-color--black: #000;
--tds-color--grey10: #171a20;
--tds-color--grey15: #222;
--tds-color--grey20: #393c41;
--tds-color--grey25: #444;
--tds-color--grey30: #5c5e62;
--tds-color--grey35: #757575;
--tds-color--grey40: #a2a3a5;
--tds-color--grey50: #d0d1d2;
--tds-color--grey60: #eee;
--tds-color--grey70: #f4f4f4;
--tds-color--white: #fff;
--tds-color--blue30: #3e6ae1;
--tds-color--blue20: #3457b1;
--tds-color--blue10: #2e4994;
--tds-color--red10: #b74134;
--tds-color--red20: #ed4e3b;
--tds-color--green10: #12bb00;
--tds-color--green20: #02e359;
--tds-color--yellow: #fbb01b;
--tds-font: Manrope, "Helvetica Neue", Arial, sans-serif;
--tds-font-size--10: 10px;
--tds-font-size--20: 12px;
--tds-font-size--30: 14px;
--tds-font-size--40: 17px;
--tds-font-size--50: 20px;
--tds-font-size--55: 23px;
--tds-font-size--60: 24px;
--tds-font-size--70: 28px;
--tds-font-size--75: 34px;
--tds-font-size--80: 40px;
--tds-opacity--30: 0.3;
--tds-opacity--50: 0.5;
--tds-opacity--70: 0.7;
--tds-opacity--100: 1;
--tds-opacity--transparent: 0;
--tds-region--north-america: superregion-north-america;
--tds-region--europe: superregion-europe;
--tds-region--asia-pacific: superregion-apac;
--tds-region--middle-east: superregion-middle-east;
--tds-size: 8px;
--tds-size--half: 4px;
--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--10x: 80px;
--tds-size--11x: 88px;
--tds-size--12x: 96px;
--tds-size--13x: 104px;
--tds-checkbox-first-margin-block-start: calc(var(--tds-size--half) + 2px);
--tds-checkbox-input-top-position: 2px;
--tds-checkbox-label-padding-inline-start: calc(var(--tds-size--3x) + 2px);
--tds-checkbox-label-top-position: 1.5px;
--tds-checkbox-margin-block-end: calc(var(--tds-size--2x) - 4px);
--tds-checkbox-size--default: 14px;
--tds-checkboxes-horizontal_spacer: 15px;
--tds-form-item-horizontal_spacer: 15px;
--tds-form-item-margin_bottom: 18px;
--tds-input-height: 30px;
--tds-input-padding_bottom: 4px;
--tds-input-padding_top: 5px;
--tds-label-descriptor-margin_left: 6px;
--tds-select-arrow-size: calc(var(--tds-size)*1.5);
--tds-select-height: 30px;
--tds-select-horizontal_spacer: 15px;
--tds-select-padding_bottom: 4px;
--tds-select-padding_top: 10px;
--tds-banner-padding: var(--tds-size--2x);
border: 3px solid #35ac39;
}
.tds-banner {
text-align: center;
inline-size: 100%;
padding: 16px;
padding: var(--tds-banner-padding)
}
@media (prefers-reduced-motion:reduce) {
*,
:after,
:before {
-webkit-animation-duration: 1ms!important;
animation-duration: 1ms!important;
transition-duration: 1ms!important
}
}
details {
display: block
}
summary {
display: list-item
}
template {
display: none
}
ol,
ul {
margin: 8px 0
}
:root {
--tds-alert-padding--vertical: var(--tds-size);
--tds-alert-padding--horizontal: var(--tds-size--2x);
--tds-alert-background--info: rgba(0, 127, 255, 0.05);
--tds-alert-background--warn: rgba(245, 166, 35, 0.1);
--tds-alert-background--error: rgba(204, 0, 0, 0.05);
--tds-alert-background--success: rgba(133, 255, 0, 0.1);
--tds-alert-link_color: transparent;
--tds-alert-icon_image: url(https://via.placeholder.com/30)
}
.tds-alert {
background-color: rgba(204, 0, 0, .05);
background-color: var(--tds-alert-background--error);
border-radius: 4px;
border-radius: var(--tds-border-radius);
color: #b74134;
color: var(--tds-color--red10);
margin: 8px 0;
margin: var(--tds-size) 0;
padding: 8px 16px;
padding: var(--tds-alert-padding--vertical) var(--tds-alert-padding--horizontal);
position: relative;
border: 0;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-content: flex-start;
align-items: flex-start
}
.tds-alert-link {
color: inherit;
color: var(--tds-alert-link_color);
font-weight: 700
}
.tds-alert-close {
position: absolute;
max-height: 35px;
block-size: 100%;
top: 2px;
padding: 8px;
padding: var(--tds-size);
right: 0;
font-style: normal;
color: #b74134;
color: var(--tds-color--red10);
cursor: pointer;
font-size: 24px;
font-size: var(--tds-font-size--60);
line-height: 18px;
line-height: var(--tds-line-height--10);
font-weight: 100;
opacity: .5;
opacity: var(--tds-opacity--50);
transition: opacity .15s ease-in-out
}
.tds-alert-close:hover {
opacity: 1;
opacity: var(--tds-opacity--100);
transition: opacity .15s ease-in-out
}
.tds-alert-text {
-webkit-margin-before: 0;
margin-block-start: 0;
-webkit-margin-after: 0;
margin-block-end: 0;
-webkit-padding-end: 24px;
-webkit-padding-end: var(--tds-size--3x);
padding-inline-end: 24px;
padding-inline-end: var(--tds-size--3x);
color: inherit
}
.tds-alert-icon {
background-size: 100%;
background-repeat: no-repeat;
background-position: 50%;
inline-size: 24px;
inline-size: var(--tds-size--3x);
block-size: 24px;
block-size: var(--tds-size--3x);
min-width: 24px;
min-width: var(--tds-size--3x);
min-height: 24px;
min-height: var(--tds-size--3x);
background-image: url(https://via.placeholder.com/30);
background-image: var(--tds-alert-icon_image);
right: 8px;
right: calc(var(--tds-size)*1);
position: relative
}
@media (min-width:600px) {
.tds-alert-icon {
display: none
}
}
.tds-alert--info {
color: #3e6ae1;
color: var(--tds-color--blue30);
background-color: rgba(0, 127, 255, .05);
background-color: var(--tds-alert-background--info)
}
.tds-alert--info .tds-alert-close {
color: #2e4994;
color: var(--tds-color--blue10)
}
.tds-alert--warn {
background-color: rgba(245, 166, 35, .1);
background-color: var(--tds-alert-background--warn)
}
.tds-alert--warn,
.tds-alert--warn .tds-alert-close {
color: #fbb01b;
color: var(--tds-color--yellow)
}
.tds-alert--error {
background-color: rgba(204, 0, 0, .05);
background-color: var(--tds-alert-background--error)
}
.tds-alert--error,
.tds-alert--error .tds-alert-close {
color: #b74134;
color: var(--tds-color--red10)
}
.tds-alert--success {
background-color: rgba(133, 255, 0, .1);
background-color: var(--tds-alert-background--success)
}
.tds-alert--success,
.tds-alert--success .tds-alert-close {
color: #12bb00;
color: var(--tds-color--green10)
}
.tds-alert--inline {
display: inline;
padding: 1px 4px;
padding: calc(var(--tds-size)/8) calc(var(--tds-size)/2);
margin: 0 0 1px 4px;
margin: 0 0 calc(var(--tds-size)/8) calc(var(--tds-size)/2)
}
.tds-alert--info .tds-alert-link {
border-bottom-color: #2e4994;
border-bottom-color: var(--tds-color--blue10)
}
.tds-alert--warn .tds-alert-link {
border-bottom-color: #b74134;
border-bottom-color: var(--tds-color--red10)
}
.tds-alert--success .tds-alert-link {
border-bottom-color: #12bb00;
border-bottom-color: var(--tds-color--green10)
}
.tds-alert--error .tds-alert-link {
border-bottom-color: #b74134;
border-bottom-color: var(--tds-color--red10)
}
:root {
--tds-container-max_width: 2560px;
--tds-container-min_width: 320px;
--tds-container-side_gutter: 30px
}
.tds-container {
inline-size: auto;
position: relative;
-webkit-margin-start: auto;
margin-inline-start: auto;
-webkit-margin-end: auto;
margin-inline-end: auto;
max-width: 2560px;
max-width: var(--tds-container-max_width);
min-width: 320px;
min-width: var(--tds-container-min_width);
-webkit-padding-start: 30px;
-webkit-padding-start: var(--tds-container-side_gutter);
padding-inline-start: 30px;
padding-inline-start: var(--tds-container-side_gutter);
-webkit-padding-end: 30px;
-webkit-padding-end: var(--tds-container-side_gutter);
padding-inline-end: 30px;
padding-inline-end: var(--tds-container-side_gutter)
}
@media (min-width:1200px) {
.tds-container {
max-width: 375px
}
.tds-container .tds-flex-item {
min-width: 95px
}
}
@media (max-width:599px) {
.tds-container {
max-width: 540px
}
.tds-container .tds-flex-item {
min-width: 105px
}
}
@media (min-width:600px) {
.tds-container {
max-width: 768px
}
.tds-container .tds-flex-item {
min-width: 101px
}
}
@media (min-width:900px) {
.tds-container {
max-width: 1024px
}
.tds-container .tds-flex-item {
min-width: 103px
}
}
@media (min-width:600px) {
.tds-container {
max-width: 1440px
}
.tds-container .tds-flex-item {
min-width: 97px
}
}
@media (min-width:1200px) {
.tds-container {
max-width: 2560px
}
.tds-container .tds-flex-item {
min-width: 95px
}
}
.tds-cta {
display: flex;
align-content: stretch;
flex-flow: column nowrap;
justify-content: space-around
}
.tds-cta-header {
display: flex;
flex-flow: column wrap
}
.tds-cta-title+.tds-cta-copy {
-webkit-margin-before: 0;
margin-block-start: 0
}
.tds-cta .tds-cta-icon {
display: block;
-webkit-margin-after: 20px;
margin-block-end: 20px;
-webkit-margin-before: 10px;
margin-block-start: 10px;
order: -1
}
.tds-cta-actions {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: flex-start
}
.tds-cta-link {
-webkit-margin-start: 0;
margin-inline-start: 0;
-webkit-margin-end: 0;
margin-inline-end: 0
}
.tds-cta-link:last-child {
-webkit-margin-before: 16px;
-webkit-margin-before: var(--tds-size--2x);
margin-block-start: 16px;
margin-block-start: var(--tds-size--2x)
}
.tds-cta--right {
text-align: end
}
.tds-cta--right .tds-cta-actions,
.tds-cta--right .tds-cta-header {
align-items: flex-end
}
.tds-cta--center,
.tds-cta--center .tds-cta-actions,
.tds-cta--center .tds-cta-copy,
.tds-cta--center .tds-cta-header,
.tds-cta--center .tds-cta-icon,
.tds-cta--center .tds-cta-title {
text-align: center
}
.tds-cta--center .tds-cta-actions,
.tds-cta--center .tds-cta-header {
align-items: center
}
.tds-cta--left {
text-align: start
}
.tds-cta--left .tds-cta-actions,
.tds-cta--left .tds-cta-header {
align-items: flex-start
}
:root {
--tds-form-item-horizontal_spacer: 20px;
--tds-form-item-margin_bottom: 24px;
--tds-label-descriptor-margin_left: var(--tds-size)
}
.tds-form-item {
position: relative;
display: inline-block;
inline-size: 100%;
-webkit-margin-after: 24px;
-webkit-margin-after: var(--tds-form-item-margin_bottom);
margin-block-end: 24px;
margin-block-end: var(--tds-form-item-margin_bottom)
}
.tds-form-item-feedback,
.tds-form-item-label {
font-family: var(--tds-font-combined--medium);
font-weight: 500
}
.tds-form-item-label {
display: block;
margin: 0 20px 8px;
margin: 0 var(--tds-form-item-horizontal_spacer) var(--tds-size);
color: #5c5e62;
color: var(--tds-color--grey30);
font-size: 14px;
font-size: var(--tds-font-size--30)
}
.tds-label-descriptor {
font-family: Gotham Book, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
font-family: var(--tds-font-combined)
}
.tds-form-item-feedback {
text-align: end;
margin: 0 20px;
margin: 0 var(--tds-form-item-horizontal_spacer) 0;
-webkit-padding-before: 4px;
-webkit-padding-before: var(--tds-size--half);
padding-block-start: 4px;
padding-block-start: var(--tds-size--half);
max-width: none;
font-size: 12px;
font-size: var(--tds-font-size--20)
}
.tds-form-fieldset {
margin: 0;
padding: 0;
border: none
}
.tds-form-item--error .tds-form-item-feedback,
.tds-form-item-feedback--error {
color: #b74134;
color: var(--tds-color--red10);
-webkit-padding-after: 0;
padding-block-end: 0
}
.tds-form-item--disabled .tds-form-item-feedback,
.tds-form-item--disabled .tds-form-item-label {
opacity: .5;
opacity: var(--tds-opacity--50)
}
.tds-label-title {
font-family: Gotham Medium, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
font-family: var(--tds-font-combined--medium)
}
.tds-scrim--black .tds-form-item-label {
color: #a2a3a5;
color: var(--tds-color--grey40)
}
.tds-scrim--black .tds-form-item--error .tds-text-input {
border-color: #ed4e3b;
border-color: var(--tds-color--red20)
}
.tds-scrim--black .tds-form-item--error .tds-form-item-feedback {
color: #ed4e3b;
color: var(--tds-color--red20)
}
.tds-form-item--error .tds-label--checkbox:before {
border-color: #ed4e3b;
border-color: var(--tds-color--red20)
}
.tds-input-color {
padding: 0;
overflow: hidden
}
.tds-input-color::-webkit-color-swatch-wrapper {
padding: 0;
border-radius: var(--tds-form-item-border_radius)
}
.tds-input-color::-webkit-color-swatch {
border: 0
}
.tds-input-search {
-webkit-padding-end: 50px;
padding-inline-end: 50px
}
.tds-input-search~.tds-submit--search {
inline-size: 40px;
inline-size: var(--tds-size--5x);
padding: 8px 24px;
padding: var(--tds-size) var(--tds-size--3x);
border-color: transparent;
position: absolute;
right: 0;
top: 0;
text-indent: -999px;
overflow: hidden;
background-size: 12px;
background-color: transparent;
background-repeat: no-repeat;
background-position: 50%;
cursor: pointer
}
.tds-form-item--compact .tds-input-search~.tds-submit--search {
padding: 4px 24px;
padding: calc(var(--tds-size)/2) var(--tds-size--3x)
}
.tds-submit--search[disabled] {
opacity: .5;
opacity: var(--tds-opacity--50);
cursor: not-allowed
}
:root {
--tds-option-checkbox--left: 20px;
--tds-option-checkbox--right: auto;
--tds-option-checkbox--left--checkmark: 21px;
--tds-option-checkbox--right--checkmark: auto
}
[dir=rtl] {
--tds-option-checkbox--left: auto;
--tds-option-checkbox--right: 20px;
--tds-option-checkbox--left--checkmark: auto;
--tds-option-checkbox--right--checkmark: 21px
}
.tds-option_group {
display: flex;
align-content: center;
align-items: center;
justify-content: space-between;
flex-flow: row wrap;
text-align: center
}
.tds-option_group .tds--is_visually_hidden:active,
.tds-option_group .tds--is_visually_hidden:focus {
block-size: 1px;
inline-size: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
position: absolute;
white-space: nowrap;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%)
}
.tds-option_group .tds-option {
inline-size: 100%;
-webkit-margin-before: 16px;
-webkit-margin-before: var(--tds-size--2x);
margin-block-start: 16px;
margin-block-start: var(--tds-size--2x)
}
.tds-option_group .tds-option:first-child {
-webkit-margin-before: 0;
margin-block-start: 0
}
.tds-option_group .tds-option-label {
flex-grow: 1;
display: flex;
justify-content: space-between;
align-content: center;
align-items: center;
flex-flow: row wrap;
border-radius: 100px;
border-radius: var(--tds-border-radius--pill);
inline-size: 100%;
padding: 16px 24px;
padding: var(--tds-size--2x) var(--tds-size--3x);
cursor: pointer;
box-shadow: inset 0 0 0 1px #a2a3a5;
box-shadow: inset 0 0 0 1px var(--tds-color--grey40);
transition: box-shadow .33s cubic-bezier(.5, 0, 0, .75);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
font-family: Gotham Book, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
font-family: var(--tds-font-combined)
}
.tds-option_group--multiselect .tds-option-label {
position: relative;
-webkit-margin-start: 0;
margin-inline-start: 0
}
.tds-option-input:checked+.tds-option-label {
font-family: Gotham Medium, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
font-family: var(--tds-font-combined--medium)
}
.tds-option-input:disabled+.tds-option-label {
box-shadow: 0 0 0 1px #d0d1d2;
box-shadow: 0 0 0 1px var(--tds-color--grey50);
color: #5c5e62;
color: var(--tds-color--grey30);
opacity: .7;
opacity: var(--tds-opacity--70);
cursor: not-allowed
}
.tds-option-input:checked+.tds-option-label,
.tds-option_group .tds-option-input:active~.tds-option-label,
.tds-option_group .tds-option-input:focus~.tds-option-label {
box-shadow: inset 0 0 0 3px #3e6ae1;
box-shadow: inset 0 0 0 3px var(--tds-color--blue30)
}
.tds-option_group--alternate .tds-option-input:active~.tds-option-label,
.tds-option_group--alternate .tds-option-input:checked~.tds-option-label,
.tds-option_group--alternate .tds-option-input:focus~.tds-option-label {
box-shadow: inset 0 0 0 3px #000;
box-shadow: inset 0 0 0 3px var(--tds-color--black)
}
.tds-scrim--black .tds-option_group--alternate .tds-option-input:active~.tds-option-label,
.tds-scrim--black .tds-option_group--alternate .tds-option-input:checked~.tds-option-label,
.tds-scrim--black .tds-option_group--alternate .tds-option-input:focus~.tds-option-label {
box-shadow: inset 0 0 0 3px #fff;
box-shadow: inset 0 0 0 3px var(--tds-color--white)
}
.tds-option-label .tds-label-descriptor,
.tds-option-label .tds-label-title {
color: #000;
color: var(--tds-color--black);
font-variant-numeric: lining-nums;
white-space: nowrap;
font-family: inherit;
margin: 0
}
.tds-option_group--multiselect .tds-label-title {
-webkit-margin-start: 32px;
-webkit-margin-start: var(--tds-size--4x);
margin-inline-start: 32px;
margin-inline-start: var(--tds-size--4x)
}
.tds-option-label .tds-label-title:only-child {
display: flex;
justify-content: center
}
.tds-scrim--black .tds-option-label .tds-label-descriptor,
.tds-scrim--black .tds-option-label .tds-label-title {
color: #fff;
color: var(--tds-color--white)
}
.tds-option_group--multiselect .tds-option-label .tds-label-title:only-child {
justify-content: flex-start
}
.tds-option_group--multiselect .tds-option-label:before {
position: absolute;
top: 12px;
left: 20px;
left: var(--tds-option-checkbox--left);
right: auto;
right: var(--tds-option-checkbox--right)
}
.tds-option_group--multiselect .tds-option-input:checked~.tds-option-label:after,
.tds-option_group--multiselect .tds-option-label:after {
top: 13px;
left: 21px;
left: var(--tds-option-checkbox--left--checkmark);
right: auto;
right: var(--tds-option-checkbox--right--checkmark)
}
[dir=rtl] .tds-option_group--multiselect .tds-checkbox-input:checked~.tds-label--checkbox:after {
right: 22px
}
[dir=rtl] .tds-option_group--multiselect .tds-option-label:before {
right: auto;
right: var(--tds-option-checkbox--right--checkmark)
}
.tds-option_group--multiselect:not(.tds-option_group--alternate) .tds-option-input:checked~.tds-option-label:after {
background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' version='1'%3E%3Cpath fill='none' fill-rule='evenodd' stroke='%233e6ae1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M11 2L4 9 1 6'/%3E%3C/svg%3E")
}
.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 {
font-family: Gotham Medium, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
font-family: var(--tds-font-combined--medium)
}
.tds-pagination-navigation,
.tds-pagination-navigation:hover {
box-shadow: none
}
.tds-pagination-navigation[aria-disabled=true] {
color: #a2a3a5;
color: var(--tds-color--grey40);
cursor: not-allowed;
pointer-events: none
}
.tds-pagination select {
border: 0;
background-color: transparent;
color: #393c41;
color: var(--tds-color--grey20);
-webkit-appearance: menulist
}
.tds-pagination-primary {
display: var(--pagination-primary--display);
justify-content: space-around
}
.tds-pagination-secondary {
display: var(--pagination-secondary--display);
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
white-space: nowrap
}
.tds-pagination-primary select {
margin: 0 var(--pagination-primary-select--margin-horiz)
}
@media (min-width:900px) {
.tds-pagination {
display: flex;
justify-content: space-between
}
.tds-pagination-primary {
--pagination-primary--display: initial;
width: 100%
}
.tds-pagination-secondary {
--pagination-secondary--display: initial
}
.tds-pagination-primary select {
--pagination-primary-select--margin-horiz: var(--tds-size--3x)
}
.tds-pagination-secondary label {
color: #5c5e62;
color: var(--tds-color--grey30)
}
}
:root {
--switch_toggle-height--smaller: 30px;
--switch_toggle-width--smaller: 60px;
--switch_toggle-button--smaller: 22px;
--switch_toggle-label-padding--smaller: 6px;
--switch_toggle-bounce-width--smaller: 30px;
--switch_toggle-spacing--smaller: 4px;
--switch_toggle-width--smaller--inside: 80px;
--switch_toggle-bounce-width--smaller--inside: 50px;
--switch_toggle-height--small: 40px;
--switch_toggle-width--small: 80px;
--switch_toggle-button--small: 32px;
--switch_toggle-label-padding--small: 8px;
--switch_toggle-bounce-width--small: 40px;
--switch_toggle-spacing--small: 4px;
--switch_toggle-height: 50px;
--switch_toggle-width: 100px;
--switch_toggle-button: 40px;
--switch_toggle-label-padding: 10px;
--switch_toggle-bounce-width: 50px;
--switch_toggle-spacing: 5px;
--switch_toggle-animation: transform 500ms cubic-bezier(.75, 0, 0, 1), background-color 500ms cubic-bezier(.5, .25, .25, .75), border-color 500ms cubic-bezier(.5, .25, .25, .75);
--switch_toggle-label-animation: color 500ms cubic-bezier(.5, .25, .25, .75), opacity 500ms cubic-bezier(.5, .25, .25, .75)
}
.tds-switch_toggle {
display: flex
}
.tds-switch_toggle-container {
display: flex;
justify-content: center;
align-items: center;
-webkit-margin-before: 20px;
margin-block-start: 20px;
-webkit-margin-after: 20px;
margin-block-end: 20px;
position: relative
}
.tds-switch_toggle-checkbox {
position: absolute;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
padding: 0;
margin: -1px;
border: 0;
clip: rect(0 0 0 0)
}
.tds-switch_toggle-track {
display: block;
position: relative;
inline-size: 100px;
inline-size: var(--switch_toggle-width);
block-size: 50px;
block-size: var(--switch_toggle-height);
cursor: pointer;
text-indent: -9999px;
background-color: #eee;
background-color: var(--tds-color--grey60);
border-radius: 50px;
border-radius: var(--switch_toggle-height);
border: 5px solid #eee;
border: var(--switch_toggle-spacing) solid var(--tds-color--grey60);
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
transition: transform .5s cubic-bezier(.75, 0, 0, 1), background-color .5s cubic-bezier(.5, .25, .25, .75), border-color .5s cubic-bezier(.5, .25, .25, .75);
transition: var(--switch_toggle-animation)
}
.tds-switch_toggle-btn {
display: flex;
align-items: center;
align-content: center;
justify-content: center;
order: -1;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-transform: none;
color: #000;
color: var(--tds-color--black);
font-size: 14px;
font-size: var(--tds-font-size--30);
transition: color .5s cubic-bezier(.5, .25, .25, .75), opacity .5s cubic-bezier(.5, .25, .25, .75);
transition: var(--switch_toggle-label-animation)
}
.tds-switch_toggle-btn:last-child {
order: 3
}
.tds-switch_toggle--label_inside .tds-switch_toggle-btn,
.tds-switch_toggle-track:after {
position: absolute;
left: 0;
inline-size: calc(50% + 5px);
block-size: 40px;
block-size: var(--switch_toggle-button);
border-radius: 40px;
border-radius: var(--switch_toggle-button)
}
.tds-switch_toggle-track:after {
content: "";
inline-size: 40px;
inline-size: var(--switch_toggle-button);
background-color: #fff;
background-color: var(--tds-color--white);
border-radius: 40px;
border-radius: var(--switch_toggle-button);
transition: transform .5s cubic-bezier(.75, 0, 0, 1), background-color .5s cubic-bezier(.5, .25, .25, .75), border-color .5s cubic-bezier(.5, .25, .25, .75);
transition: var(--switch_toggle-animation);
z-index: 10;
left: 0;
transform: translateX(0)
}
.tds-switch_toggle--label_outside .tds-switch_toggle-btn {
block-size: 100%
}
.tds-switch_toggle--label_inside .tds-switch_toggle-btn {
left: 0
}
.tds-switch_toggle--smaller .tds-switch_toggle-btn {
font-size: 12px;
font-size: var(--tds-font-size--20)
}
.tds-switch_toggle--label_outside .tds-switch_toggle-track+.tds-switch_toggle-btn {
-webkit-padding-end: 10px;
-webkit-padding-end: var(--switch_toggle-label-padding);
padding-inline-end: 10px;
padding-inline-end: var(--switch_toggle-label-padding)
}
.tds-switch_toggle--label_outside .tds-switch_toggle-btn+.tds-switch_toggle-btn {
-webkit-padding-start: 10px;
-webkit-padding-start: var(--switch_toggle-label-padding);
padding-inline-start: 10px;
padding-inline-start: var(--switch_toggle-label-padding)
}
.tds-switch_toggle--small .tds-switch_toggle-track {
inline-size: 80px;
inline-size: var(--switch_toggle-width--small);
block-size: 40px;
block-size: var(--switch_toggle-height--small);
border-radius: 40px;
border-radius: var(--switch_toggle-height--small);
border-width: 4px;
border-width: var(--switch_toggle-spacing--small)
}
.tds-switch_toggle--smaller .tds-switch_toggle-track {
inline-size: 60px;
inline-size: var(--switch_toggle-width--smaller);
block-size: 30px;
block-size: var(--switch_toggle-height--smaller);
border-radius: 30px;
border-radius: var(--switch_toggle-height--smaller);
border-width: 4px;
border-width: var(--switch_toggle-spacing--smaller)
}
.tds-scrim--black .tds-switch_toggle-track {
background-color: #222;
background-color: var(--tds-color--grey15);
border-color: #222;
border-color: var(--tds-color--grey15)
}
.tds-switch_toggle--smaller .tds-switch_toggle--label_inside .tds-switch_toggle-btn,
.tds-switch_toggle--smaller .tds-switch_toggle-track:after {
inline-size: 22px;
inline-size: var(--switch_toggle-button--smaller);
block-size: 22px;
block-size: var(--switch_toggle-button--smaller);
border-radius: 22px;
border-radius: var(--switch_toggle-button--smaller)
}
.tds-switch_toggle--small .tds-switch_toggle--label_inside .tds-switch_toggle-btn,
.tds-switch_toggle--small .tds-switch_toggle-track:after {
inline-size: 32px;
inline-size: var(--switch_toggle-button--small);
block-size: 32px;
block-size: var(--switch_toggle-button--small);
border-radius: 32px;
border-radius: var(--switch_toggle-button--small)
}
.tds-switch_toggle--label_inside .tds-switch_toggle-btn:last-child {
left: inherit;
right: 0;
color: #000;
color: var(--tds-color--black);
opacity: 1;
opacity: var(--tds-opacity--100)
}
.tds-switch_toggle--label_inside .tds-switch_toggle-btn:nth-last-child(2) {
color: #000;
color: var(--tds-color--black);
opacity: 0;
opacity: var(--tds-opacity--transparent)
}
.tds-scrim--black .tds-switch_toggle--label_inside .tds-switch_toggle-btn:last-child {
color: #fff;
color: var(--tds-color--white)
}
.tds-scrim--dark .tds-switch_toggle-track {
background-color: #fff;
background-color: var(--tds-color--white);
border-color: #fff;
border-color: var(--tds-color--white)
}
.tds-scrim--dark .tds-switch_toggle-track:after {
background-color: #eee;
background-color: var(--tds-color--grey60)
}
.tds-switch_toggle--small .tds-switch_toggle-track:after {
inline-size: 32px;
inline-size: var(--switch_toggle-button--small);
border-radius: 32px;
border-radius: var(--switch_toggle-button--small)
}
.tds-switch_toggle--smaller .tds-switch_toggle-track:after {
inline-size: 22px;
inline-size: var(--switch_toggle-button--smaller);
border-radius: 22px;
border-radius: var(--switch_toggle-button--smaller)
}
.tds-switch_toggle-checkbox:checked~.tds-switch_toggle-track {
border-color: #3e6ae1;
border-color: var(--tds-color--blue30);
background-color: #3e6ae1;
background-color: var(--tds-color--blue30)
}
.tds-switch_toggle-checkbox:checked~.tds-switch_toggle-track:after {
transform: translateX(50px);
transform: translateX(var(--switch_toggle-bounce-width))
}
.tds-scrim--dark .tds-switch_toggle-checkbox:checked~.tds-switch_toggle-track:after {
background-color: #fff;
background-color: var(--tds-color--white)
}
.tds-switch_toggle-checkbox:active+.tds-switch_toggle-track,
.tds-switch_toggle-checkbox:focus+.tds-switch_toggle-track {
outline: 1px dotted #000;
outline: 1px dotted var(--tds-color--black)
}
.tds-scrim--dark .tds-switch_toggle--label_inside .tds-switch_toggle-btn:last-child {
color: #000;
color: var(--tds-color--black)
}
.tds-switch_toggle--label_inside .tds-switch_toggle-checkbox:checked~.tds-switch_toggle-btn:last-child,
.tds-switch_toggle--label_inside .tds-switch_toggle-checkbox:checked~.tds-switch_toggle-btn:nth-last-child(2) {
color: #fff;
color: var(--tds-color--white);
opacity: 1;
opacity: var(--tds-opacity--100)
}
.tds-switch_toggle--small .tds-switch_toggle-checkbox:checked~.tds-switch_toggle-track:after {
transform: translateX(40px);
transform: translateX(var(--switch_toggle-bounce-width--small))
}
.tds-switch_toggle--smaller .tds-switch_toggle-checkbox:checked~.tds-switch_toggle-track:after {
transform: translateX(30px);
transform: translateX(var(--switch_toggle-bounce-width--smaller))
} .tds-scrim--black .tds-link,
.tds-scrim--black a {
color: #f4f4f4;
color: var(--tds-color--grey70)
}
.tds-scrim--black .tds-link:hover,
.tds-scrim--black a:hover {
color: #fff;
color: var(--tds-color--white)
}
.tds-link--secondary {
font-family: Gotham Medium, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
font-family: var(--tds-font-combined--medium);
box-shadow: 0 0 0 0 transparent;
color: #5c5e62;
color: var(--tds-color--grey30)
}
.tds-link--secondary:hover {
color: #393c41;
color: var(--tds-color--grey20)
}
.tds-scrim--black .tds-link--secondary:hover {
box-shadow: 0 1.5px 0 0 currentColor
}
.tds-link--primary,
a.tds-link--primary {
color: #3e6ae1;
color: var(--tds-color--blue30);
font-family: Gotham Medium, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
font-family: var(--tds-font-combined--medium)
}
.tds-link--primary,
.tds-link--primary:hover {
box-shadow: 0 0 0 0 transparent
}
.tds-link--primary:hover,
.tds-scrim--black .tds-link--primary {
color: #3457b1;
color: var(--tds-color--blue20)
}
.tds-link--inverse,
a.tds-link--inverse {
color: #fff!important;
color: var(--tds-color--white)!important
}
:root {
--tds-links-alt-box_shadow--default: inset var(--tds-size--half) 0 0 0 transparent;
--tds-links-alt-box_shadow--selected: inset var(--tds-size--half) 0 0 0 currentColor;
--tds-links-alt-box_shadow--reversed: var(--tds-size--half) 0 0 0 currentColor
}
a.tds-link-alt {
color: #a2a3a5;
color: var(--tds-color--grey40);
font-size: var(--tds-font-size--base);
font-family: Gotham Bold, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
font-family: var(--tds-font-combined--bold);
-webkit-padding-start: 8px;
-webkit-padding-start: var(--tds-size);
padding-inline-start: 8px;
padding-inline-start: var(--tds-size);
text-transform: none
}
a.tds-link-alt,
a.tds-link-alt--focus,
a.tds-link-alt:focus,
a.tds-link-alt:hover {
box-shadow: inset 4px 0 0 0 transparent;
box-shadow: var(--tds-links-alt-box_shadow--default)
}
a.tds-link-alt--focus,
a.tds-link-alt:focus,
a.tds-link-alt:hover {
color: #000;
color: var(--tds-color--black)
}
a.tds-link-alt--selected,
a.tds-link-alt:active,
a.tds-link-alt:hover {
color: #000;
color: var(--tds-color--black);
box-shadow: inset 4px 0 0 0 currentColor;
box-shadow: var(--tds-links-alt-box_shadow--selected)
}
[dir=rtl] a.tds-link-alt--selected,
[dir=rtl] a.tds-link-alt:active,
[dir=rtl] a.tds-link-alt:hover {
box-shadow: 4px 0 0 0 currentColor;
box-shadow: var(--tds-links-alt-box_shadow--reversed)
}
.tds-link-alt *>* {
color: #a2a3a5;
color: var(--tds-color--grey40);
font-size: var(--tds-font-size--base);
font-family: Gotham Bold, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
font-family: var(--tds-font-combined--bold);
box-shadow: inset 4px 0 0 0 transparent;
box-shadow: var(--tds-links-alt-box_shadow--default);
-webkit-padding-start: 8px;
-webkit-padding-start: var(--tds-size);
padding-inline-start: 8px;
padding-inline-start: var(--tds-size)
}
[dir=rtl] .tds-link-alt *>* {
-webkit-padding-start: initial;
padding-inline-start: 0;
-webkit-padding-end: 8px;
-webkit-padding-end: var(--tds-size);
padding-inline-end: 8px;
padding-inline-end: var(--tds-size)
}
.tds-link-alt *>.tds-link-alt--selected,
.tds-link-alt *>:active,
.tds-link-alt *>:focus,
.tds-link-alt *>:hover {
color: #171a20;
color: var(--tds-color--grey10);
box-shadow: inset 4px 0 0 0 currentColor;
box-shadow: var(--tds-links-alt-box_shadow--selected)
}
:root {
--tds-list-separator_width: 1px;
--tds-list-item_spacer--box: 40px;;
--tds-list-item_bullet_size--timeline: calc(var(--tds-size) + 1px)
}
.tds-list {
list-style-type: none;
margin: 8px 0;
margin: var(--tds-size) 0;
padding: 0
}
.tds-list-item {
-webkit-padding-before: 10px;
padding-block-start: 10px
}
.tds-list--bordered .tds-list-item,
.tds-list--box .tds-list-item,
.tds-list--horizontal .tds-list-item,
.tds-list--timeline .tds-list-item,
.tds-list-item:first-child,
.tds-list-menu .tds-list-item {
-webkit-padding-before: 0;
padding-block-start: 0
}
.tds-list--dense .tds-list-item {
-webkit-padding-before: 4px;
-webkit-padding-before: var(--tds-size--half);
padding-block-start: 4px;
padding-block-start: var(--tds-size--half)
}
.tds-list * * :last-child {
-webkit-padding-after: 0;
padding-block-end: 0
}
.tds-list-item_title,
.tds-list-item_value {
display: block;
-webkit-margin-after: 0;
margin-block-end: 0
}
.tds-list-item_title {
font-family: Gotham Bold, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
font-family: var(--tds-font-combined--bold)
}
.tds-list--ordered,
.tds-list--unordered {
-webkit-padding-start: 24px;
-webkit-padding-start: var(--tds-size--3x);
padding-inline-start: 24px;
padding-inline-start: var(--tds-size--3x)
}
.tds-list--ordered {
list-style-type: decimal
}
.tds-list--unordered {
list-style-type: disc
}
.tds-list--horizontal {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
align-content: center
}
.tds-list--horizontal .tds-list-item:before {
display: none
}
@media screen and (min-width:640px) {
.tds-list--horizontal {
flex-flow: row wrap;
justify-content: flex-start
}
.tds-list--horizontal .tds-list-item {
position: relative;
-webkit-padding-after: 0;
padding-block-end: 0
}
.tds-list--horizontal .tds-list-item:not(:first-of-type) {
-webkit-padding-start: 11px;
-webkit-padding-start: calc(10px + var(--tds-list-separator_width));
padding-inline-start: 11px;
padding-inline-start: calc(10px + var(--tds-list-separator_width));
-webkit-margin-start: 10px;
margin-inline-start: 10px
}
.tds-list--with_separators .tds-list-item:not(:first-of-type):before {
display: block;
content: "";
inline-size: 1px;
inline-size: var(--tds-list-separator_width);
block-size: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #5c5e62;
background-color: var(--tds-color--grey30)
}
.tds-scrim--black .tds-list--with_separators .tds-list-item:before {
background-color: #fff;
background-color: var(--tds-color--white)
}
.tds-list--with_separators.tds-list--secondary .tds-list-item:before {
background-color: #5c5e62;
background-color: var(--tds-color--grey30)
}
[dir=rtl] .tds-list--with_separators .tds-list-item:not(:first-of-type):before {
left: auto;
right: 0
}
}
.tds-list--box {
display: flex;
align-items: baseline;
justify-content: flex-start;
flex: 1;
overflow-x: auto
}
.tds-list--box .tds-list-item {
inline-size: 100px;
-webkit-margin-end: 40px;
-webkit-margin-end: var(--tds-list-item_spacer--box);
margin-inline-end: 40px;
margin-inline-end: var(--tds-list-item_spacer--box)
}
.tds-list--box .tds-list-item_title {
font-family: Gotham Medium, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
font-family: var(--tds-font-combined--medium);
font-size: 14px;
font-size: var(--tds-font-size--30);
-webkit-margin-after: 8px;
-webkit-margin-after: var(--tds-size);
margin-block-end: 8px;
margin-block-end: var(--tds-size)
}
.tds-list--box .tds-list-item_value {
font-size: 12px;
font-size: var(--tds-font-size--20);
}
@media (max-width:599px) {
.tds-list--box {
-webkit-padding-after: 16px;
padding-block-end: 16px
}
}
@media (min-width:600px) {
.tds-list--box {
flex-wrap: wrap;
justify-content: flex-start
}
.tds-list--box .tds-list-item {
-webkit-margin-after: 40px;
-webkit-margin-after: var(--tds-list-item_spacer--box);
margin-block-end: 40px;
margin-block-end: var(--tds-list-item_spacer--box)
}
.tds-list--box .tds-list-item_title {
font-size: 20px;
font-size: var(--tds-font-size--50)
}
.tds-list--box .tds-list-item_value {
font-size: 14px;
font-size: var(--tds-font-size--30)
}
}
.tds-list--timeline {
padding: 24px;
padding: var(--tds-size--3x);
position: relative
}
.tds-list--timeline:before {
content: "";
display: block;
position: absolute;
top: 34.5px;
top: var(--tds-list-item_spacer--timeline);
left: 8px;
left: var(--tds-size);
bottom: 34.5px;
bottom: var(--tds-list-item_spacer--timeline);
border-inline-end-width: 1px;
border-inline-end-style: solid;
border-inline-end-color: #d0d1d2;
border-inline-end-color: var(--tds-color--grey50)
}
[dir=rtl] .tds-list--timeline:before {
left: auto;
right: 8px;
right: var(--tds-size)
}
.tds-list--timeline .tds-list-item {
-webkit-margin-after: 24px;
-webkit-margin-after: var(--tds-size--3x);
margin-block-end: 24px;
margin-block-end: var(--tds-size--3x)
}
.tds-list--timeline .tds-list-item:before {
content: "";
position: absolute;
left: 4px;
left: var(--tds-size--half);
-webkit-margin-before: 8px;
-webkit-margin-before: var(--tds-size);
margin-block-start: 8px;
margin-block-start: var(--tds-size);
inline-size: 9px;
inline-size: var(--tds-list-item_bullet_size--timeline);
border-radius: 16px;
border-radius: var(--tds-size--2x);
block-size: 9px;
block-size: var(--tds-list-item_bullet_size--timeline);
background: #a2a3a5;
background: var(--tds-color--grey40)
}
.tds-list--timeline .tds-list-item:last-child {
-webkit-margin-after: 0;
margin-block-end: 0
}
.tds-list--timeline .tds-list-item>.tds-icon {
background-color: #fff;
background-color: var(--tds-color--white);
position: absolute;
left: -4px;
-webkit-margin-before: 3px;
margin-block-start: 3px
}
[dir=rtl] .tds-list--timeline .tds-list-item>.tds-icon {
left: auto;
right: -3px
}
.tds-list--timeline .tds-list-item>.tds-icon--small {
left: 0
}
[dir=rtl] .tds-list--timeline .tds-list-item>.tds-icon--small {
left: auto;
right: 0
}
.tds-list--bordered .tds-list-item:before {
display: block;
content: "";
inline-size: 100%;
-webkit-margin-before: 20px;
margin-block-start: 20px;
-webkit-margin-after: 20px;
margin-block-end: 20px;
block-size: 1px;
background-color: rgba(0, 0, 0, .5)
}
.tds-list--small_border .tds-list-item:before {
inline-size: 30px
}
[dir=rtl] .tds-list--timeline .tds-list-item:before {
left: auto;
right: 4px;
right: var(--tds-size--half)
}
.tds-scrim--black .tds-list--bordered .tds-list-item:before,
.tds-scrim--black .tds-list--bordered .tds-list-item:last-child:before {
background-color: hsla(0, 0%, 100%, .5)
}
.tds-list-menu {
display: grid;
grid-template-rows: auto;
margin: 0
}
.tds-list-menu-heading {
text-transform: uppercase;
font-family: Gotham Bold, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
font-family: var(--tds-font-combined--bold);
white-space: nowrap
}
.tds-list-menu-heading+* * {
color: #a2a3a5;
color: var(--tds-color--grey40)
}
@media (max-width:599px) {
.tds-list-menu {
grid-template-columns: repeat(1, minmax(90px, 1fr))
}
.tds-list-menu>* {
min-width: -webkit-max-content;
min-width: -moz-max-content;
min-width: max-content
}
.tds-list-menu>*>* {
inline-size: 100%;
display: block
}
.tds-list-menu-heading {
position: relative
}
.tds-list-menu-heading:after {
content: "";
display: block;
position: absolute;
right: 0;
top: 0;
inline-size: 20px;
block-size: 20px;
background-image: url("data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8' %3f%3e%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3e%3cpath d='M54.7 30.7h-9.6v14.4H30.7v9.6h14.4v14.5l9.6-.1V54.7h14.4l.1-9.6H54.7'/%3e%3c/svg%3e")
}
.tds-list-menu-heading--active:after {
background-image: url("data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8' %3f%3e%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3e%3cpolygon points='30.8 45.2 69.3 45.2 69.3 54.8 30.8 54.8'/%3e%3c/svg%3e")
}
.tds-list-menu-heading+* {
display: none;
opacity: 0;
transition: opacity 1s ease-in
}
.tds-list-menu-heading--active+* {
display: block;
opacity: 1;
transition: opacity 1s ease-out
}
}
@media (min-width:600px) {
.tds-list-menu {
grid-template-columns: repeat(4, minmax(90px, 1fr))
}
}
:root {
--progress-border-radius: var(--tds-border-radius--pill);
--progress-value-color--primary: var(--tds-color--blue30);
--progress-bar-color--primary: var(--tds-color--grey60);
--progress-value-color--secondary: var(--tds-color--grey20);
--progress-bar-color--secondary: var(--tds-color--grey60);
--progress-border: none;
--progress-height: var(--tds-size--2x)
}
.tds-scrim--black {
--progress-bar-color--primary: var(--tds-color--grey20);
--progress-value-color--secondary: var(--tds-color--grey50);
--progress-bar-color--secondary: var(--tds-color--grey20)
}
.tds-progress_bar-wrapper {
inline-size: 100%;
position: relative
}
.tds-progress_bar {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
block-size: 16px;
block-size: var(--progress-height);
inline-size: 100%;
display: block;
border: none;
border-radius: 100px;
border-radius: var(--progress-border-radius);
overflow: hidden;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2)
}
.tds-progress_bar::-webkit-progress-bar {
border: none;
border: var(--progress-border);
border-radius: 100px;
border-radius: var(--progress-border-radius);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2)
}
.tds-progress_bar::-webkit-progress-value {
border-radius: 100px;
border-radius: var(--progress-border-radius);
-webkit-transition: width .5s;
transition: width .5s
}
.tds-progress_bar--primary::-webkit-progress-bar {
background-color: #eee;
background-color: var(--progress-bar-color--primary)
}
.tds-progress_bar--primary::-webkit-progress-value {
background-color: #3e6ae1;
background-color: var(--progress-value-color--primary)
}
.tds-progress_bar--primary::-moz-progress-bar {
background-color: #3e6ae1;
background-color: var(--progress-value-color--primary)
}
.tds-progress_bar--secondary::-webkit-progress-bar {
background-color: #eee;
background-color: var(--progress-bar-color--secondary)
}
.tds-progress_bar--secondary::-webkit-progress-value {
background-color: #393c41;
background-color: var(--progress-value-color--secondary)
}
.tds-progress_bar--secondary::-moz-progress-bar {
background-color: #393c41;
background-color: var(--progress-value-color--secondary)
}
:root {
--tds-radio_buttons-horizontal_spacer: 20px;
--tds-radio_buttons-vertical_spacer: var(--tds-size--2x);
--tds-radio_buttons-size: 22px;
--tds-radio_buttons-size--checked: 10px;
--tds-radio_buttons-checked: 7px;
--tds-radio_buttons-radio_left-spacer: 34px
}
.tds-radio_buttons {
position: relative;
padding: 0 20px;
padding: 0 var(--tds-radio_buttons-horizontal_spacer)
}
.tds-radio {
position: relative;
-webkit-margin-after: 16px;
-webkit-margin-after: var(--tds-radio_buttons-vertical_spacer);
margin-block-end: 16px;
margin-block-end: var(--tds-radio_buttons-vertical_spacer);
display: flex;
flex-flow: row wrap;
align-items: center;
align-content: center
}
.tds-radio .tds-label-descriptor,
.tds-radio .tds-label-title {
white-space: normal
}
.tds-radio .tds-label-title {
-webkit-margin-start: 0;
margin-inline-start: 0
}
.tds-radio_buttons .tds-radio:first-of-type {
-webkit-margin-before: 4px;
-webkit-margin-before: var(--tds-size--half);
margin-block-start: 4px;
margin-block-start: var(--tds-size--half)
}
.tds-radio_buttons .tds-radio:last-of-type {
-webkit-margin-after: 16px;
-webkit-margin-after: var(--tds-radio_buttons-vertical_spacer);
margin-block-end: 16px;
margin-block-end: var(--tds-radio_buttons-vertical_spacer)
}
.tds-label--radio {
position: relative;
inline-size: 100%;
-webkit-padding-before: 2px;
padding-block-start: 2px;
-webkit-padding-start: 34px;
-webkit-padding-start: var(--tds-radio_buttons-radio_left-spacer);
padding-inline-start: 34px;
padding-inline-start: var(--tds-radio_buttons-radio_left-spacer);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #5c5e62;
color: var(--tds-color--grey30);
transition: border .25s cubic-bezier(.5, .25, .25, .75), box-shadow .25s cubic-bezier(.5, .25, .25, .75), color .25s cubic-bezier(.5, .25, .25, .75), opacity .25s cubic-bezier(.5, .25, .25, .75);
transition: var(--tds-animate--focus)
}
.tds-radio-input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: none;
opacity: 0
}
.tds-label--radio:after,
.tds-label--radio:before {
block-size: 22px;
block-size: var(--tds-radio_buttons-size);
inline-size: 22px;
inline-size: var(--tds-radio_buttons-size);
border-radius: 100%;
display: block;
content: " ";
position: absolute;
left: 0;
top: 0
}
.tds-label--radio:before {
border: 1px solid #5c5e62;
border: var(--tds-border-width--small) solid var(--tds-color--grey30);
transition: border .25s cubic-bezier(.5, .25, .25, .75), box-shadow .25s cubic-bezier(.5, .25, .25, .75), color .25s cubic-bezier(.5, .25, .25, .75), opacity .25s cubic-bezier(.5, .25, .25, .75);
transition: var(--tds-animate--focus)
}
.tds-label--radio:after {
position: absolute;
left: 0;
top: 0;
border: none;
opacity: 0;
transition: opacity .5s cubic-bezier(.5, .25, .25, .75)
}
[dir=rtl] .tds-label--radio:after,
[dir=rtl] .tds-label--radio:before {
left: auto;
right: 0
}
.tds-label--radio:hover:before,
.tds-radio-input:focus~.tds-label--radio:before {
border-color: #171a20;
border-color: var(--tds-color--grey10)
}
.tds-radio-input:checked~.tds-label--radio:after {
inline-size: 10px;
inline-size: var(--tds-radio_buttons-size--checked);
block-size: 10px;
block-size: var(--tds-radio_buttons-size--checked);
top: 7px;
top: var(--tds-radio_buttons-checked);
left: 7px;
left: var(--tds-radio_buttons-checked);
opacity: 1;
box-shadow: inset 0 0 0 8px #171a20;
box-shadow: inset 0 0 0 calc(var(--tds-size--2x)/2) var(--tds-color--grey10)
}
.tds-radio-input:checked~.tds-label--radio:after,
.tds-radio-input:checked~.tds-label--radio:before {
transition: border .25s cubic-bezier(.5, .25, .25, .75), box-shadow .25s cubic-bezier(.5, .25, .25, .75), color .25s cubic-bezier(.5, .25, .25, .75), opacity .25s cubic-bezier(.5, .25, .25, .75);
transition: var(--tds-animate--focus)
}
.tds-radio-input:focus~.tds-label--radio:before {
box-shadow: inset 0 0 0 1px #171a20;
box-shadow: inset 0 0 0 var(--tds-border-width--small) var(--tds-color--grey10)
}
[dir=rtl] .tds-radio-input:checked~.tds-label--radio:after {
left: auto;
right: 7px;
right: var(--tds-radio_buttons-checked)
}
.tds-label--radio:hover,
.tds-radio-input:active~.tds-label--radio,
.tds-radio-input:checked~.tds-label--radio,
.tds-radio-input:focus~.tds-label--radio {
color: #171a20;
color: var(--tds-color--grey10)
}
.tds-scrim--black .tds-label--radio:hover:before,
.tds-scrim--black .tds-radio-input:focus~.tds-label--radio:before {
border-color: #f4f4f4;
border-color: var(--tds-color--grey70)
}
.tds-radio-input:disabled~.tds-label--radio {
opacity: .5;
opacity: var(--tds-opacity--50);
cursor: not-allowed
}
.tds-radio-input:disabled:focus~.tds-label--radio:hover,
.tds-radio-input:disabled~.tds-label--radio:hover {
color: #5c5e62;
color: var(--tds-color--grey30)
}
.tds-radio-input:disabled:focus~.tds-label--radio:hover:before,
.tds-radio-input:disabled~.tds-label--radio:hover:before {
border-color: #5c5e62;
border-color: var(--tds-color--grey30)
}
.tds-scrim--black .tds-radio-input:checked~.tds-label--radio:after {
box-shadow: inset 0 0 0 8px #fff;
box-shadow: inset 0 0 0 calc(var(--tds-size--2x)/2) var(--tds-color--white)
}
:root {
--tds-checkbox-size--default: 22px;
--tds-checkbox-dot-size: calc(var(--tds-checkbox-size)*0.41667);
--tds-checkboxes-horizontal_spacer: 20px;
--tds-checkbox-input-top-position: -2px;
--tds-checkbox-input-left-position: 1px;
--tds-checkbox-label-top-position: -3px;
--tds-checkbox-margin-bottom: var(--tds-size--2x);
--tds-checkbox-label-padding-inline-start: 36px;
--tds-checkbox-first-margin-top: var(--tds-size--half)
}
.tds-checkboxes {
position: relative;
padding: 0 20px;
padding: 0 var(--tds-checkboxes-horizontal_spacer)
}
.tds-checkbox {
position: relative;
-webkit-margin-after: 16px;
-webkit-margin-after: var(--tds-checkbox-margin-bottom);
margin-block-end: 16px;
margin-block-end: var(--tds-checkbox-margin-bottom);
display: flex;
flex-flow: row wrap;
align-items: center;
align-content: center
}
.tds-checkboxes .tds-checkbox:first-of-type {
-webkit-margin-before: 4px;
-webkit-margin-before: var(--tds-checkbox-first-margin-top);
margin-block-start: 4px;
margin-block-start: var(--tds-checkbox-first-margin-top)
}
.tds-checkboxes .tds-checkbox:last-of-type {
-webkit-margin-after: 16px;
-webkit-margin-after: var(--tds-checkbox-margin-bottom);
margin-block-end: 16px;
margin-block-end: var(--tds-checkbox-margin-bottom)
}
.tds-label--checkbox {
inline-size: 100%;
-webkit-padding-start: 36px;
-webkit-padding-start: var(--tds-checkbox-label-padding-inline-start);
padding-inline-start: 36px;
padding-inline-start: var(--tds-checkbox-label-padding-inline-start);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #5c5e62;
color: var(--tds-color--grey30);
transition: border .25s cubic-bezier(.5, .25, .25, .75), box-shadow .25s cubic-bezier(.5, .25, .25, .75), color .25s cubic-bezier(.5, .25, .25, .75), opacity .25s cubic-bezier(.5, .25, .25, .75);
transition: var(--tds-animate--focus);
position: relative
}
.tds-label--radio:hover {
cursor: pointer
}
.tds-checkbox-input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: none;
opacity: 0
}
.tds-label--checkbox:after,
.tds-label--checkbox:before {
block-size: 22px;
block-size: var(--tds-checkbox-size--default);
inline-size: 22px;
inline-size: var(--tds-checkbox-size--default);
border-radius: 4px;
border-radius: var(--tds-border-radius);
display: block;
content: "";
position: absolute;
top: -3px;
top: var(--tds-checkbox-label-top-position);
left: 0
}
.tds-label--checkbox:hover {
cursor: pointer;
color: #171a20;
color: var(--tds-color--grey10)
}
.tds-label--checkbox:before {
border: 1px solid #5c5e62;
border: var(--tds-border-width--small) solid var(--tds-color--grey30);
background-color: transparent
}
.tds-label--checkbox:after,
.tds-label--checkbox:before {
transition: border .25s cubic-bezier(.5, .25, .25, .75), box-shadow .25s cubic-bezier(.5, .25, .25, .75), color .25s cubic-bezier(.5, .25, .25, .75), opacity .25s cubic-bezier(.5, .25, .25, .75);
transition: var(--tds-animate--focus)
}
.tds-label--checkbox:after {
border: none;
opacity: 0
}
[dir=rtl] .tds-label--checkbox:after,
[dir=rtl] .tds-label--checkbox:before {
left: auto;
right: 0
}
.tds-checkbox-input:checked~.tds-label--checkbox {
color: #171a20;
color: var(--tds-color--grey10)
}
.tds-checkbox-input:active~.tds-label--checkbox:before,
.tds-checkbox-input:checked~.tds-label--checkbox:before,
.tds-checkbox-input:focus~.tds-label--checkbox:before,
.tds-label--checkbox:hover:before {
border-color: #171a20;
border-color: var(--tds-color--grey10)
}
.tds-checkbox-input:active~.tds-label--checkbox:before,
.tds-checkbox-input:checked~.tds-label--checkbox:before,
.tds-checkbox-input:focus~.tds-label--checkbox:before,
.tds-label--checkbox:hover:before {
transition: border .25s cubic-bezier(.5, .25, .25, .75), box-shadow .25s cubic-bezier(.5, .25, .25, .75), color .25s cubic-bezier(.5, .25, .25, .75), opacity .25s cubic-bezier(.5, .25, .25, .75);
transition: var(--tds-animate--focus)
}
.tds-checkbox-input:focus~.tds-label--checkbox:before {
box-shadow: inset 0 0 0 1px #171a20;
box-shadow: inset 0 0 0 var(--tds-border-width--small) var(--tds-color--grey10)
}
.tds-checkbox-input:disabled~.tds-label--checkbox {
opacity: .5;
opacity: var(--tds-opacity--50);
cursor: not-allowed
}
.tds-checkbox-input:disabled:focus~.tds-label--checkbox:hover,
.tds-checkbox-input:disabled~.tds-label--checkbox:hover {
color: #5c5e62;
color: var(--tds-color--grey30)
}
.tds-checkbox-input:disabled:focus~.tds-label--checkbox:hover:before,
.tds-checkbox-input:disabled~.tds-label--checkbox:hover:before {
border-color: #d0d1d2;
border-color: var(--tds-color--grey50)
}
.tds-checkbox-input:checked~.tds-label--checkbox:after {
background-position: 50%;
background-repeat: no-repeat;
background-size: 60%;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMCIgdmVyc2lvbj0iMSI+ICA8cGF0aCBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iIzE3MWEyMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIGQ9Ik0xMSAyTDQgOSAxIDYiLz48L3N2Zz4=");
top: -2px;
top: var(--tds-checkbox-input-top-position);
left: 1px;
left: var(--tds-checkbox-input-left-position);
opacity: 1;
transition: border .25s cubic-bezier(.5, .25, .25, .75), box-shadow .25s cubic-bezier(.5, .25, .25, .75), color .25s cubic-bezier(.5, .25, .25, .75), opacity .25s cubic-bezier(.5, .25, .25, .75);
transition: var(--tds-animate--focus)
}
[dir=rtl] .tds-checkbox-input:checked~.tds-label--checkbox:after {
left: auto;
right: 1px
}
.tds-scrim--black .tds-checkbox-input:checked~.tds-label--checkbox:after {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMCIgdmVyc2lvbj0iMSI+ICA8cGF0aCBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIGQ9Ik0xMSAyTDQgOSAxIDYiLz48L3N2Zz4=")
}
:root {
--tds-range_slider-background_color: var(--tds-color--grey50);
--tds-range_slider-border_radius: 10px;
--tds-range_slider-track_height: 10px;
--tds-range_slider-track_height--active: 12px;
--tds-range_slider-control-size: 24px;
--tds-range_slider-control-border_color: var(--tds-color--grey50);
--tds-range_slider-control-background_color: var(--tds-color--white);
--tds-range_slider-progress_background_color: var(--tds-color--blue30);
--tds-range_slider-width: 100%
}
.tds-range_slider {
display: flex;
flex-flow: column
}
.tds-range_slider .tds-input-container {
flex-flow: row wrap;
inline-size: 100%;
inline-size: var(--tds-range_slider-width)
}
.tds-range_slider .tds-form-item-label,
.tds-range_slider .tds-input-container {
display: flex;
justify-content: space-between;
align-content: center;
align-items: center
}
.tds-range_slider .tds-form-item-label {
flex-flow: row nowrap;
-webkit-margin-end: 24px;
-webkit-margin-end: var(--tds-size--3x);
margin-inline-end: 24px;
margin-inline-end: var(--tds-size--3x);
-webkit-margin-before: 8px;
-webkit-margin-before: var(--tds-size);
margin-block-start: 8px;
margin-block-start: var(--tds-size)
}
.tds-range_slider-label--title {
text-align: start
}
.tds-range_slider-label--value {
text-align: end;
color: #171a20;
color: var(--tds-color--grey10);
white-space: nowrap
}
.tds-range-container {
position: relative;
block-size: 10px;
block-size: var(--tds-range_slider-track_height);
inline-size: 100%;
inline-size: var(--tds-range_slider-width)
}
.tds-range-container .tds-range-selected {
position: absolute;
background-color: #3e6ae1;
background-color: var(--tds-range_slider-progress_background_color);
block-size: 12px;
block-size: var(--tds-range_slider-track_height--active);
z-index: 20;
border-radius: 10px 0 0 10px;
border-radius: var(--tds-range_slider-border_radius) 0 0 var(--tds-range_slider-border_radius);
padding: 0 8px 0 0;
padding: 0 var(--tds-size) 0 0;
margin: 0;
pointer-events: none;
border: none
}
.tds-range-container:before {
content: "";
position: absolute;
margin: 0;
z-index: 10;
top: 1px;
background-color: #d0d1d2;
background-color: var(--tds-range_slider-background_color);
border-radius: 10px;
border-radius: var(--tds-range_slider-border_radius)
}
.tds-input-range,
.tds-range-container:before {
inline-size: 100%;
inline-size: var(--tds-range_slider-width);
block-size: 10px;
block-size: var(--tds-range_slider-track_height);
padding: 0;
left: 0
}
.tds-input-range {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: ew-resize;
z-index: 40;
border: none
}
.tds-input-range::-ms-fill-lower {
background-color: #3e6ae1;
background-color: var(--tds-range_slider-progress_background_color)
}
.tds-input-range::-webkit-slider-runnable-track {
block-size: 10px;
block-size: var(--tds-range_slider-track_height);
background-color: #d0d1d2;
background-color: var(--tds-range_slider-background_color);
border: none;
border-radius: 10px;
border-radius: var(--tds-range_slider-border_radius)
}
.tds-input-range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
border: none;
block-size: 24px;
block-size: var(--tds-range_slider-control-size);
inline-size: 24px;
inline-size: var(--tds-range_slider-control-size);
border-radius: 50%;
background-color: #fff;
background-color: var(--tds-range_slider-control-background_color);
box-shadow: 0 0 0 1px #d0d1d2;
box-shadow: 0 0 0 1px var(--tds-range_slider-control-border_color);
-webkit-margin-before: -6px;
margin-block-start: -6px;
z-index: 40
}
.tds-input-range::-moz-range-track {
inline-size: 100%;
inline-size: var(--tds-range_slider-width);
block-size: 10px;
block-size: var(--tds-range_slider-track_height);
background-color: #d0d1d2;
background-color: var(--tds-range_slider-background_color);
border: none;
border-radius: 10px;
border-radius: var(--tds-range_slider-border_radius)
}
.tds-input-range::-moz-range-thumb {
border: none;
block-size: 24px;
block-size: var(--tds-range_slider-control-size);
inline-size: 24px;
inline-size: var(--tds-range_slider-control-size);
border-radius: 50%;
background-color: #fff;
background-color: var(--tds-range_slider-control-background_color);
box-shadow: 0 0 0 1px #d0d1d2;
box-shadow: 0 0 0 1px var(--tds-range_slider-control-border_color);
z-index: 40;
margin-block-start: -6px
}
.tds-input-range::-ms-thumb {
border: 2px solid #171a20;
border: 2px solid var(--tds-color--grey10);
block-size: 24px;
block-size: var(--tds-range_slider-control-size);
inline-size: 24px;
inline-size: var(--tds-range_slider-control-size);
border-radius: 0;
background-color: #fff;
background-color: var(--tds-range_slider-control-background_color);
z-index: 40;
margin-block-start: -6px
}
.tds-input-range::-moz-focus-outer {
border: 0
}
.tds-input-range:focus {
outline: none
}
.tds-range-container .tds-input-range {
background-color: transparent;
position: absolute;
margin: 0
}
.tds-range-container .tds-input-range::-moz-range-track {
background-color: transparent
}
.tds-range-container .tds-input-range::-ms-track {
background-color: transparent;
block-size: 24px;
block-size: var(--tds-range_slider-control-size)
}
.tds-input-range:focus::-webkit-slider-runnable-track {
background-color: #d0d1d2;
background-color: var(--tds-range_slider-background_color)
}
.tds-range-container .tds-input-range::-webkit-slider-runnable-track,
.tds-range-container .tds-input-range:focus::-webkit-slider-runnable-track {
background-color: transparent
}
.tds-input-range[disabled] {
cursor: not-allowed
}
.tds-input-range[disabled]+.tds-range-selected {
opacity: .5;
opacity: var(--tds-opacity--50)
}
[dir=rtl] .tds-range-container .tds-range-selected {
border-radius: 0 10px 10px 0;
border-radius: 0 var(--tds-range_slider-border_radius) var(--tds-range_slider-border_radius) 0
}
.tds-scrim--white {
background-color: #fff;
background-color: var(--tds-color--white)
}
.tds-scrim--light {
background-color: #f4f4f4;
background-color: var(--tds-color--grey70)
}
.tds-scrim--dark {
background-color: #eee;
background-color: var(--tds-color--grey60)
}
.tds-scrim--black {
background-color: #000;
background-color: var(--tds-color--black)
}
.tds-scrim--blur {
background-color: hsla(0, 0%, 50.2%, .125);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px)
}
.tds-select,
.tds-select-input {
inline-size: 100%
}
.tds-select {
--tds-select-font_size: var(--tds-font-size--30);
--tds-select-border_radius: 20px;
--tds-select-height: var(--tds-size--5x);
--tds-select-padding_vertical: 10px;
--tds-select-padding_horizontal--start: 20px;
--tds-select-padding_horizontal--end: 50px;
--tds-select-arrow-size: var(--tds-size--2x);
--tds-select-arrow-bg_color: var(--tds-color--grey70);
--tds-select-arrow-inset: var(--tds-size--3x);
--tds-select-input-bg_color: var(--tds-color--grey70);
--tds-select-arrow-fill_color: var(--tds-color--grey10);
position: relative;
display: inline-block
}
.tds-select-input {
block-size: 30px;
block-size: var(--tds-select-height);
font-family: Gotham Medium, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
font-family: var(--tds-font-combined--medium);
font-size: var(--tds-select-font_size);
font-weight: 500;
background-color: var(--tds-select-input-bg_color);
color: #171a20;
color: var(--tds-color--grey10);
-webkit-padding-before: var(--tds-select-padding_vertical);
padding-block-start: var(--tds-select-padding_vertical);
-webkit-padding-after: var(--tds-select-padding_vertical);
padding-block-end: var(--tds-select-padding_vertical);
-webkit-padding-start: var(--tds-select-padding_horizontal--start);
padding-inline-start: var(--tds-select-padding_horizontal--start);
-webkit-padding-end: var(--tds-select-padding_horizontal--end);
padding-inline-end: var(--tds-select-padding_horizontal--end);
border-radius: var(--tds-select-border_radius);
border: 1px solid transparent;
transition: border .25s cubic-bezier(.5, .25, .25, .75);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none
}
.tds-select-input::-ms-expand {
display: none
}
.tds-select-input:required {
box-shadow: none
}
.tds-select-input:active,
.tds-select-input:focus {
border: 1px solid #d0d1d2;
border: 1px solid var(--tds-color--grey50);
outline: none
}
.tds-select-arrow {
position: absolute;
top: 2px;
right: var(--tds-select-arrow-inset);
block-size: calc(100% - 4px);
inline-size: 12px;
inline-size: var(--tds-select-arrow-size);
pointer-events: none;
background-color: var(--tds-select-arrow-bg_color);
-webkit-padding-before: 10px;
padding-block-start: 10px;
fill: var(--tds-select-arrow-fill_color)
}
[dir=rtl] .tds-select-arrow {
right: inherit;
left: var(--tds-select-arrow-inset)
}
.tds-scrim--dark .tds-select-input,
.tds-scrim--light .tds-select-input {
--tds-select-input-bg_color: var(--tds-color--white)
}
.tds-scrim--black .tds-select-input {
--tds-select-input-bg_color: var(--tds-color--grey15);
color: #f4f4f4;
color: var(--tds-color--grey70)
}
.tds-scrim--dark .tds-select-arrow,
.tds-scrim--light .tds-select-arrow {
--tds-select-arrow-bg_color: var(--tds-color--white)
}
.tds-scrim--black .tds-select-arrow {
--tds-select-arrow-bg_color: var(--tds-color--grey15);
--tds-select-arrow-fill_color: var(--tds-color--grey70)
}
.tds-form-item--error .tds-select-input,
.tds-select-input--error {
box-shadow: inset 0 0 0 1px #b74134;
box-shadow: inset 0 0 0 1px var(--tds-color--red10);
transition: box-shadow .25s ease-in-out
}
.tds-select-input:disabled {
opacity: .5;
opacity: var(--tds-opacity--50);
cursor: not-allowed
}
.tds-select-input:disabled:active,
.tds-select-input:disabled:focus {
border-color: transparent
}
:root {
--tds-spinner-size: 64px
}
.tds-spinner {
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: 0;
position: fixed;
background-color: hsla(0, 0%, 100%, .15)
}
.tds-spinner:after,
.tds-spinner:before {
block-size: 64px;
block-size: var(--tds-spinner-size);
inline-size: 64px;
inline-size: var(--tds-spinner-size);
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
margin: auto;
overflow: hidden;
position: absolute;
background-position: 0 0;
background-repeat: no-repeat
}
.tds-spinner:before {
opacity: .15;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+ICA8cGF0aCBmaWxsPSIjNjU2NjY0IiBkPSJNMTYuOSAxNS40YzMuOC0zLjUgOC43LTUuNiAxNC4yLTUuOXYtN2EyOSAyOSAwIDAgMC0xOS4xIDhsNC45IDQuOXpNOS42IDMxYTIyIDIyIDAgMCAxIDUuOS0xNC4ybC00LjktNC45QTI5IDI5IDAgMCAwIDIuNyAzMWg2Ljl6TTMzLjEgMi41djdhMjIgMjIgMCAwIDEgMTQuMiA1LjlsNC45LTQuOWEyOSAyOSAwIDAgMC0xOS4xLTh6TTE1LjUgNDcuMkEyMiAyMiAwIDAgMSA5LjYgMzNoLTdhMjkgMjkgMCAwIDAgNy45IDE5LjFsNS00Ljl6TTU0LjYgMzNhMjIgMjIgMCAwIDEtNS45IDE0LjJsNC45IDQuOUEyOSAyOSAwIDAgMCA2MS41IDMzaC02Ljl6bS01LjktMTYuMmMzLjUgMy44IDUuNiA4LjcgNS45IDE0LjJoN2EyOSAyOSAwIDAgMC03LjktMTkuMWwtNSA0Ljl6bS0xLjQgMzEuOGEyMi41IDIyLjUgMCAwIDEtMTQuMiA1Ljl2N2EyOSAyOSAwIDAgMCAxOS4xLTcuOWwtNC45LTV6bS0xNi4yIDUuOWEyMiAyMiAwIDAgMS0xNC4yLTUuOUwxMiA1My41YTI5IDI5IDAgMCAwIDE5LjEgNy45di02Ljl6Ii8+PC9zdmc+")
}
.tds-spinner:after {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+ICA8cGF0aCBmaWxsPSIjRkZGIiBkPSJNNDcuMyAxNS45bDYuNS02LjVBMzIuMSAzMi4xIDAgMCAwIDMyLjQuNnY5LjJjNS44LjIgMTAuOSAyLjUgMTQuOSA2LjF6Ii8+PC9zdmc+");
-webkit-animation: tds-spinner-spin 1s steps(8) infinite;
animation: tds-spinner-spin 1s steps(8) infinite
}
.tds-spinner--fade_in,
.tds-spinner--fade_out {
z-index: 1;
transition: opacity .25s linear
}
.tds-spinner--fade_in {
opacity: 1;
opacity: var(--tds-opacity--100)
}
.tds-spinner--fade_out {
opacity: 0;
opacity: var(--tds-opacity--transparent)
}
@-webkit-keyframes tds-spinner-spin {
0% {
transform: rotate(0deg)
}
to {
transform: rotate(1turn)
}
}
@keyframes tds-spinner-spin {
0% {
transform: rotate(0deg)
}
to {
transform: rotate(1turn)
}
}
:root {
--tds-table-padding--vertical: var(--tds-size--2x);
--tds-table-padding--horizontal: var(--tds-size--2x);
--tds-table-border_width: 1px;
--tds-table-border_color: var(--tds-color--grey50);
--tds-table-header-font_size: var(--tds-font-size--30);
--tds-table-border_spacing: 0;
--tds-table-row-highlight: var(--tds-color--grey70);
--tds-table-stripe_color: var(--tds-color--grey60);
--tds-table-header_color: var(--tds-color--grey20)
}
.tds-table {
inline-size: 100%;
border-spacing: 0;
border-spacing: var(--tds-table-border_spacing);
text-align: start;
font-size: 14px;
font-size: var(--tds-font-size--30);
border-collapse: collapse
}
.tds-table--data {
font-variant-numeric: tabular-nums
}
.tds-table--bordered td,
.tds-table--bordered th {
border: 1px solid #d0d1d2;
border: var(--tds-table-border_width) solid var(--tds-table-border_color)
}
.tds-table-row td,
.tds-table-row th {
-webkit-padding-before: 16px;
-webkit-padding-before: var(--tds-table-padding--vertical);
padding-block-start: 16px;
padding-block-start: var(--tds-table-padding--vertical);
-webkit-padding-after: 16px;
-webkit-padding-after: var(--tds-table-padding--vertical);
padding-block-end: 16px;
padding-block-end: var(--tds-table-padding--vertical);
vertical-align: top;
text-align: start;
font-size: 14px;
font-size: var(--tds-table-header-font_size)
}
.tds-table-row p {
margin: 0
}
.tds-table--padded_cells td,
.tds-table--padded_cells th {
-webkit-padding-start: 16px;
-webkit-padding-start: var(--tds-table-padding--horizontal);
padding-inline-start: 16px;
padding-inline-start: var(--tds-table-padding--horizontal);
-webkit-padding-end: 16px;
-webkit-padding-end: var(--tds-table-padding--horizontal);
padding-inline-end: 16px;
padding-inline-end: var(--tds-table-padding--horizontal)
}
.tds-table-col--selected,
.tds-table-row--selected td,
.tds-table-row--selected th {
background-color: #f4f4f4;
background-color: var(--tds-table-row-highlight)
}
.tds-table--row_border .tds-table-body td,
.tds-table--row_border .tds-table-body th {
border-block-start-width: 1px;
border-block-start-width: var(--tds-table-border_width);
border-block-start-style: solid;
border-block-start-color: #d0d1d2;
border-block-start-color: var(--tds-table-border_color)
}
.tds-table--thead_border .tds-table-head th {
border-block-end-width: 1px;
border-block-end-width: var(--tds-table-border_width);
border-block-end-style: solid;
border-block-end-color: #d0d1d2;
border-block-end-color: var(--tds-table-border_color)
}
.tds-scrim--black .tds-table td,
.tds-scrim--black .tds-table th {
--tds-table-border_color: var(--tds-color--grey10);
--tds-table-stripe_color: var(--tds-color--grey10);
--tds-table-row-highlight: var(--tds-color--grey10);
--tds-table-header_color: var(--tds-color--grey70);
background-color: #222;
background-color: var(--tds-color--grey15);
color: #fff;
color: var(--tds-color--white)
}
.tds-scrim--light .tds-table-col--selected,
.tds-scrim--light .tds-table-row--selected td,
.tds-scrim--light .tds-table-row--selected th {
--tds-table-row-highlight: var(--tds-color--grey60)
}
.tds-table-head .tds-table-row th {
font-weight: 500;
font-family: Gotham Medium, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
font-family: var(--tds-font-combined--medium);
color: #393c41;
color: var(--tds-table-header_color)
}
.tds-table--hoverable .tds-table-body .tds-table-row:hover td,
.tds-table--hoverable .tds-table-body .tds-table-row:hover th {
background-color: #f4f4f4;
background-color: var(--tds-table-row-highlight)
}
.tds-table--striped .tds-table-body>.tds-table-row:nth-child(odd)>td,
.tds-table--striped .tds-table-body>.tds-table-row:nth-child(odd)>th {
background-color: #eee;
background-color: var(--tds-table-stripe_color)
}
.tds-scrim--light .tds-table--hoverable .tds-table-body .tds-table-row:hover td,
.tds-scrim--light .tds-table--hoverable .tds-table-body .tds-table-row:hover th {
--tds-table-row-highlight: var(--tds-color--grey60)
}
@media (max-width:599px) {
.tds-table--responsive .tds-table {
display: flex;
flex-flow: row wrap
}
.tds-table--responsive .tds-table-body,
.tds-table--responsive .tds-table-foot,
.tds-table--responsive .tds-table-head,
.tds-table--responsive .tds-table-row {
display: block
}
.tds-table--responsive .tds-table-row td {
inline-size: 100%;
display: inline-flex;
flex-flow: row wrap;
-webkit-padding-after: 0;
padding-block-end: 0
}
.tds-table--bordered .tds-table-row {
-webkit-padding-before: 0;
padding-block-start: 0;
-webkit-padding-end: 0;
padding-inline-end: 0;
-webkit-margin-after: 8px;
-webkit-margin-after: var(--tds-size);
margin-block-end: 8px;
margin-block-end: var(--tds-size)
}
.tds-table--responsive .tds-table-head {
position: absolute;
top: -9999px;
left: -9999px
}
.tds-table--responsive td:before {
content: var(--columnHeader) ": ";
display: block;
inline-size: 50%;
max-inline-size: 50%;
min-inline-size: 50%;
font-family: Gotham Medium, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
font-family: var(--tds-font-combined--medium);
text-transform: uppercase
}
}
:root {
--tds-input-height: 40px;
--tds-input-padding_top: 10px;
--tds-input-padding_bottom: 10px
}
.tds-text-input,
.tds-text-input--wrapper {
inline-size: 100%
}
.tds-text-input--wrapper {
display: inline-block;
position: relative
}
.tds-text-input {
block-size: 40px;
block-size: var(--tds-input-height);
font-family: Gotham Medium, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
font-family: var(--tds-font-combined--medium);
font-size: var(--tds-font-size--30);
font-weight: 500;
background-color: #f4f4f4;
background-color: var(--tds-color--grey70);
color: #171a20;
color: var(--tds-color--grey10);
padding: 10px 20px;
padding: var(--tds-input-padding_top) var(--tds-form-item-horizontal_spacer) var(--tds-input-padding_bottom);
border-radius: 20px;
border-radius: var(--tds-border-radius--forms);
border: 1px solid transparent;
transition: border .25s cubic-bezier(.5, .25, .25, .75)
}
@media (min-width:600px) {
.tds-text-input--large {
inline-size: 327px
}
.tds-text-input--medium {
inline-size: 202px
}
.tds-text-input--small {
inline-size: 101px
}
}
.tds-text-input::-moz-placeholder {
color: #a2a3a5;
color: var(--tds-color--grey40);
opacity: .5
}
.tds-text-input:-ms-input-placeholder {
color: #a2a3a5;
color: var(--tds-color--grey40);
opacity: .5
}
.tds-text-input::placeholder {
color: #a2a3a5;
color: var(--tds-color--grey40);
opacity: .5
}
.tds-text-input:active,
.tds-text-input:focus {
border: 1px solid #d0d1d2;
border: 1px solid var(--tds-color--grey50);
outline: none
}
.tds-text-input:required {
box-shadow: none
}
.tds-text-input--textarea {
min-height: 120px;
resize: vertical
}
.tds-text-input--textarea[rows] {
--tds-input-height: auto
}
.tds-text-input--wrapper .tds-icon {
position: absolute;
top: 8px;
top: var(--tds-size);
right: 20px;
background-size: 15px
}
.tds-form-item--error .tds-text-input,
.tds-text-input--error {
border-color: #b74134;
border-color: var(--tds-color--red10);
transition: border-color .25s ease-in-out
}
.tds-text-input:disabled {
opacity: .5;
opacity: var(--tds-opacity--50);
cursor: not-allowed
}
.tds-password-input--toggle {
font-variant-numeric: tabular-nums;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0;
padding: 0;
margin: 0;
background-color: transparent;
block-size: 100%;
max-block-size: 30px;
position: absolute;
right: 12px;
top: 5px;
cursor: pointer;
text-align: center;
color: currentColor;
border-radius: 20px;
border-radius: var(--tds-border-radius--forms);
opacity: 1;
transition: opacity .15s cubic-bezier(.5, .25, .25, .75)
}
.tds-password-input--toggle.tds--is_invisible {
opacity: 0
}
.tds-password-input--toggle .tds-icon {
position: static;
background-size: initial;
inline-size: 30px;
block-size: 30px
}
.tds-form-item--password .tds-text-input--wrapper {
position: relative
}
[dir=rtl] .tds-password-input--toggle {
right: auto;
left: 8px
}
.tds-password-input--toggle:active,
.tds-password-input--toggle:focus {
outline: 1px dotted currentColor
}
.tds-form-item--password .tds-text-input {
-webkit-padding-end: 48px;
padding-inline-end: 48px
}
.tds-scrim--dark .tds-text-input,
.tds-scrim--light .tds-text-input {
background-color: #fff;
background-color: var(--tds-color--white)
}
.tds-scrim--black .tds-text-input {
background-color: #222;
background-color: var(--tds-color--grey15);
color: #fff;
color: var(--tds-color--white)
}
.tds-scrim--black .tds-text-input:active,
.tds-scrim--black .tds-text-input:focus {
border-color: #444;
border-color: var(--tds-color--grey25)
}
.tds-text-input:disabled:active,
.tds-text-input:disabled:focus {
border-color: transparent
}
.tds-form-item--inline {
display: flex;
justify-content: flex-start;
align-content: center;
align-items: center;
flex-flow: row wrap
}
.tds-form-item--inline .tds-checkbox,
.tds-form-item--inline .tds-radio {
-webkit-margin-end: 24px;
-webkit-margin-end: var(--tds-size--3x);
margin-inline-end: 24px;
margin-inline-end: var(--tds-size--3x)
}
.tds-form-item--inline .tds-label--checkbox,
.tds-form-item--inline .tds-label--radio {
display: inline-flex;
justify-content: center;
align-items: center;
align-content: center
}
.tds-form-item--inline .tds-checkbox:first-of-type,
.tds-form-item--inline .tds-radio:first-of-type {
-webkit-margin-before: 0;
margin-block-start: 0
}
.tds-form-item--inline .tds-form-item-label {
display: inline-flex;
align-self: center;
inline-size: auto;
-webkit-margin-start: 0;
margin-inline-start: 0;
-webkit-margin-after: 0;
margin-block-end: 0;
-webkit-margin-end: 16px;
-webkit-margin-end: var(--tds-size--2x);
margin-inline-end: 16px;
margin-inline-end: var(--tds-size--2x)
}
.tds-form-item--inline .tds-text-input--wrapper {
display: inline-flex;
inline-size: auto;
flex: 2
}
.tds-form-item--inline .tds-btn {
-webkit-margin-before: 0;
margin-block-start: 0;
-webkit-margin-after: 0;
margin-block-end: 0;
-webkit-margin-start: 16px;
-webkit-margin-start: var(--tds-size--2x);
margin-inline-start: 16px;
margin-inline-start: var(--tds-size--2x);
flex: 1
}
:root {
--tds-heading--color: var(--tds-color--grey10);
--tds-heading--font_weight: 500;
--tds-text--color: var(--tds-color--grey20);
--tds-color--heading: var(--tds-color--grey10)
}  @media (max-width:599px) {
.tds-text--h1,
.tds-text--h1-alt,
h1 {
letter-spacing: -.7px;
font-size: 28px;
font-size: var(--tds-font-size--70, 28px);
line-height: 36px;
line-height: var(--tds-line-height--70, 36px)
}
.tds-text--h2,
h2 {
letter-spacing: -.6px;
font-size: 24px;
font-size: var(--tds-font-size--60, 24px);
line-height: 28px;
line-height: var(--tds-line-height--60, 28px)
}
.tds-text--h3,
h3 {
letter-spacing: -.5px;
font-size: 20px;
font-size: var(--tds-font-size--50, 20px);
line-height: 24px;
line-height: var(--tds-font-size--60, 28px)
}
.tds-text--h4,
h4 {
font-size: 17px;
font-size: var(--tds-font-size--40, 17px);
line-height: 20px;
line-height: var(--tds-line-height--20, 20px)
}
.tds-text--h5,
.tds-text--h6,
h5,
h6 {
font-size: 14px;
font-size: var(--tds-font-size--30, 14px);
line-height: 21px;
line-height: var(--tds-line-height--30, 21px)
}
.tds-text--caption-header {
font-size: 12px;
font-size: var(--tds-font-size--20, 12px);
line-height: 18px;
line-height: var(--tds-line-height--10, 18px)
}
}
@media (min-width:600px) {
.tds-text--h1,
h1 {
letter-spacing: -.6px;
font-size: 40px;
font-size: var(--tds-font-size--80, 40px);
line-height: 48px;
line-height: var(--tds-line-height--80, 48px)
}
.tds-text--h1-alt {
letter-spacing: -.6px;
font-size: 34px;
font-size: var(--tds-font-size--75);
line-height: 45px;
line-height: var(--tds-line-height--75)
}
.tds-text--h2,
h2 {
letter-spacing: -.5px;
font-size: 28px;
font-size: var(--tds-font-size--70, 28px);
line-height: 36px;
line-height: var(--tds-line-height--70, 36px)
}
.tds-text--h3,
h3 {
letter-spacing: -.6px;
font-size: 24px;
font-size: var(--tds-font-size--60, 24px)
}
.tds-text--h3,
.tds-text--h4,
h3,
h4 {
line-height: 28px;
line-height: var(--tds-line-height--60, 28px)
}
.tds-text--h4,
h4 {
letter-spacing: -.4px;
font-size: 20px;
font-size: var(--tds-font-size--50, 20px)
}
.tds-text--h5,
h5 {
font-size: 17px;
font-size: var(--tds-font-size--40, 17px);
line-height: 20px;
line-height: var(--tds-line-height--20, 20px)
}
.tds-text--h6,
h6 {
font-size: 14px;
font-size: var(--tds-font-size--30, 14px);
line-height: 21px;
line-height: var(--tds-line-height--30, 21px)
}
.tds-text--caption-header {
font-size: 12px;
font-size: var(--tds-font-size--20, 12px);
line-height: 18px;
line-height: var(--tds-line-height--10, 18px)
}
}
.tds-text-eyebrow--10,
.tds-text-eyebrow--20,
.tds-text-eyebrow--30 {
display: block;
font-family: Gotham Light, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
font-family: var(--tds-font-combined--light);
line-height: 1.414;
line-height: var(--tds-line-height--unitless)
}
.tds-text-eyebrow--20,
.tds-text-eyebrow--30 {
letter-spacing: -.4px
}
.tds-text-eyebrow--10 {
font-size: 14px;
font-size: var(--tds-font-size--30)
}
.tds-text-eyebrow--20 {
font-size: 17px;
font-size: var(--tds-font-size--40)
}
.tds-text-eyebrow--30 {
font-size: 23px;
font-size: var(--tds-font-size--55)
}
@media (max-width:599px) {
.tds-text--jumbo_mobile {
font-size: 36px!important;
line-height: 36px!important;
font-family: Gotham Medium, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif!important;
font-family: var(--tds-font-combined--medium)!important
}
}
.tds-text--section_subtitle {
color: #171a20;
color: var(--tds-heading--color);
font-family: Gotham Light, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
font-family: var(--tds-font-combined--light);
font-weight: 300;
font-size: 17px;
font-size: var(--tds-font-size--40);
line-height: 24px;
line-height: var(--tds-font-size--60)
} .tds-text--caption,
small {
font-size: 14px;
font-size: var(--tds-font-size--20);
line-height: 18px;
line-height: var(--tds-line-height--10)
}
.tds-text--caption {
font-size:14px;
--tds-text--color: var(--tds-color--grey30);
color: #393c41;
color: var(--tds-text--color)
}
.tds-text--200 {
font-weight: 200!important;
font-family: Gotham Extra Light, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif!important;
font-family: var(--tds-font-combined--extra-light)!important
}
.tds-text--300 {
font-weight: 300!important;
font-family: Gotham Light, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif!important;
font-family: var(--tds-font-combined--light)!important
}
.tds-text--400 {
font-weight: 400!important;
font-family: Gotham Book, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif!important;
font-family: var(--tds-font-combined)!important
}
.tds-text--500 {
font-weight: 500!important;
font-family: Gotham Medium, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif!important;
font-family: var(--tds-font-combined--medium)!important
}
.tds-text--700,
strong {
font-weight: 700!important;
font-family: Gotham Bold, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif!important;
font-family: var(--tds-font-combined--bold)!important
}
.tds-text_color--black {
--tds-text--color: var(--tds-color--black);
color: #393c41;
color: var(--tds-text--color)
}
.tds-text_color--10 {
--tds-text--color: var(--tds-color--grey10)
}
.tds-text_color--10,
.tds-text_color--30 {
color: #393c41;
color: var(--tds-text--color)
}
.tds-text_color--30 {
--tds-text--color: var(--tds-color--grey30)
}
.tds-text_color--35 {
--tds-text--color: var(--tds-color--grey35);
color: #393c41;
color: var(--tds-text--color)
}
.tds-text--center {
text-align: center!important
}
.tds-text--end {
text-align: end!important
}
.tds-text--start {
text-align: start!important
}
.tds-text--with_divider {
display: flex;
justify-content: center;
align-items: center;
align-content: center;
overflow: hidden
}
.tds-text--with_divider:after {
inline-size: 100%;
block-size: 1px;
content: "";
background-color: #171a20;
background-color: var(--tds-heading--color);
-webkit-margin-start: .5em;
margin-inline-start: .5em;
display: block
}
.tds-text--capitalize {
text-transform: capitalize
}
.tds-text--uppercase {
text-transform: uppercase
}
.tds-text--lowercase {
text-transform: lowercase
}
.tds-scrim--black {
--tds-heading--color: var(--tds-color--grey70);
--tds-text--color: var(--tds-color--grey70);
color: #393c41;
color: var(--tds-text--color)
}
.tds-scrim--black .tds-text--with_divider:after {
background-color: #f4f4f4;
background-color: var(--tds-color--grey70)
}
[lang*=en-],
[lang*=en-] body,
html[lang*=en-] {
--tds-font-combined--extra-light: var(--tds-font-latin--extra-light), var(--tds-font)!important;
--tds-font-combined--light: var(--tds-font-latin--light), var(--tds-font)!important;
--tds-font-combined: var(--tds-font-latin), var(--tds-font)!important;
--tds-font-combined--medium: var(--tds-font-latin--medium), var(--tds-font)!important;
--tds-font-combined--bold: var(--tds-font-latin--bold), var(--tds-font)!important
}
[lang=ko-KR],
[lang=ko-KR] body,
html[lang=ko-KR] {
--tds-font-combined--extra-light: var(--tds-font-latin--extra-light), var(--tds-font-korean), var(--tds-font)!important;
--tds-font-combined--light: var(--tds-font-latin--light), var(--tds-font-korean), var(--tds-font)!important;
--tds-font-combined: var(--tds-font-latin), var(--tds-font-korean), var(--tds-font)!important;
--tds-font-combined--medium: var(--tds-font-latin--medium), var(--tds-font-korean), var(--tds-font)!important;
--tds-font-combined--bold: var(--tds-font-latin--bold), var(--tds-font-korean), var(--tds-font)!important
}
[lang=ja-JP],
[lang=ja-JP] body,
html[lang=ja-JP] {
--tds-font-combined--extra-light: var(--tds-font-latin--extra-light), var(--tds-font-japanese), var(--tds-font)!important;
--tds-font-combined--light: var(--tds-font-latin--light), var(--tds-font-japanese), var(--tds-font)!important;
--tds-font-combined: var(--tds-font-latin), var(--tds-font-japanese), var(--tds-font)!important;
--tds-font-combined--medium: var(--tds-font-latin--medium), var(--tds-font-japanese), var(--tds-font)!important;
--tds-font-combined--bold: var(--tds-font-latin--bold), var(--tds-font-japanese), var(--tds-font)!important
}
[lang=zh-CN],
[lang=zh-CN] body,
html[lang=zh-CN] {
--tds-font-combined--extra-light: var(--tds-font-latin--extra-light), var(--tds-font-chinese--simplified--extra-light), var(--tds-font)!important;
--tds-font-combined--light: var(--tds-font-latin--light), var(--tds-font-chinese--simplified--light), var(--tds-font)!important;
--tds-font-combined: var(--tds-font-latin), var(--tds-font-chinese--simplified), var(--tds-font)!important;
--tds-font-combined--medium: var(--tds-font-latin--medium), var(--tds-font-chinese--simplified--medium), var(--tds-font)!important;
--tds-font-combined--bold: var(--tds-font-latin--bold), var(--tds-font-chinese--simplified--bold), var(--tds-font)!important
}
[lang=zh-HK],
[lang=zh-HK] body,
[lang=zh-TW],
[lang=zh-TW] body,
html[lang=zh-HK],
html[lang=zh-TW] {
--tds-font-combined--extra-light: var(--tds-font-latin--extra-light), var(--tds-font-chinese--traditional--extra-light), var(--tds-font)!important;
--tds-font-combined--light: var(--tds-font-latin--light), var(--tds-font-chinese--traditional--light), var(--tds-font)!important;
--tds-font-combined: var(--tds-font-latin), var(--tds-font-chinese--traditional), var(--tds-font)!important;
--tds-font-combined--medium: var(--tds-font-latin--medium), var(--tds-font-chinese--traditional--medium), var(--tds-font)!important;
--tds-font-combined--bold: var(--tds-font-latin--bold), var(--tds-font-chinese--traditional--bold), var(--tds-font)!important
}
.tds--align_center {
display: block!important;
margin: 0 auto!important
}
.tds--align_start {
display: block!important;
-webkit-margin-start: 0!important;
margin-inline-start: 0!important;
-webkit-margin-end: auto!important;
margin-inline-end: auto!important
}
.tds--align_end {
display: block!important;
-webkit-margin-start: auto!important;
margin-inline-start: auto!important;
-webkit-margin-end: 0!important;
margin-inline-end: 0!important
}
:root {
--tds-animate-transition-property: opacity;
--tds-animate-transition-duration--short: 500ms;
--tds-animate-transition-duration--medium: 600ms;
--tds-animate-transition_duration--long: 1500ms;
--tds-animate-transition-function--base: linear;
--tds-animate-transition-function--mktg: cubic-bezier(.165, .84, .44, 1)
}
.tds-animate--fade_out {
opacity: 0;
opacity: var(--tds-opacity--transparent)
}
.tds-animate--fade_in,
.tds-animate--fade_out {
transition: opacity .5s linear;
transition: var(--tds-animate-transition-property) var(--tds-animate-transition-duration--short) var(--tds-animate-transition-function--base)
}
.tds-animate--fade_in {
opacity: 1;
opacity: var(--tds-opacity--100)
}
.tds-animate_small--to_reveal {
z-index: -1;
opacity: 0;
opacity: var(--tds-opacity--transparent);
transform: translate3d(0, 30px, 0);
transition: transform .5s cubic-bezier(.165, .84, .44, 1), opacity .5s cubic-bezier(.165, .84, .44, 1);
transition: transform var(--tds-animate-transition-duration--short) var(--tds-animate-transition-function--mktg), opacity var(--tds-animate-transition-duration--short) var(--tds-animate-transition-function--mktg)
}
.tds-animate_small--reveal .tds-animate_small--to_reveal {
z-index: auto;
opacity: 1;
opacity: var(--tds-opacity--100);
transform: translateZ(0)
}
.tds-animate_large--to_reveal {
z-index: -1;
opacity: 0;
opacity: var(--tds-opacity--transparent);
transform: translate3d(0, 100px, 0)
}
.tds-animate_large--revealed {
z-index: auto;
opacity: 1;
opacity: var(--tds-opacity--100);
transform: translateZ(0);
transition: transform 1.5s cubic-bezier(.165, .84, .44, 1), opacity 1.5s cubic-bezier(.165, .84, .44, 1);
transition: transform var(--tds-animate-transition_duration--long) var(--tds-animate-transition-function--mktg), opacity var(--tds-animate-transition_duration--long) var(--tds-animate-transition-function--mktg)
}
.tds-animate--squish {
transition: translate .1s ease
}
.tds-animate--bounce {
-webkit-animation-name: tds-keyframe--bounce;
animation-name: tds-keyframe--bounce;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite
}
.tds-columns {
-moz-column-gap: 20px;
column-gap: 20px;
-moz-column-width: auto;
column-width: auto;
display: block
}
.tds-columns--two {
-moz-column-count: 2;
column-count: 2
}
.tds-columns--three {
-moz-column-count: 3;
column-count: 3
}
@media (min-width:600px) {
.tds-columns--two_on_desktop {
-moz-column-count: 2;
column-count: 2
}
.tds-columns--three_on_desktop {
-moz-column-count: 3;
column-count: 3
}
}
@-webkit-keyframes tds-keyframe--fade_out {
0% {
opacity: 1;
opacity: var(--tds-opacity--100)
}
to {
opacity: 0;
opacity: var(--tds-opacity--transparent)
}
}
@keyframes tds-keyframe--fade_out {
0% {
opacity: 1;
opacity: var(--tds-opacity--100)
}
to {
opacity: 0;
opacity: var(--tds-opacity--transparent)
}
}
@-webkit-keyframes tds-keyframe--fade_in {
0% {
opacity: 0;
opacity: var(--tds-opacity--transparent)
}
to {
opacity: 1;
opacity: var(--tds-opacity--100)
}
}
@keyframes tds-keyframe--fade_in {
0% {
opacity: 0;
opacity: var(--tds-opacity--transparent)
}
to {
opacity: 1;
opacity: var(--tds-opacity--100)
}
}
@-webkit-keyframes tds-keyframe--make_smaller {
0% {
max-height: 100vh;
opacity: 1;
opacity: var(--tds-opacity--100)
}
to {
max-height: 0;
opacity: 0;
opacity: var(--tds-opacity--transparent)
}
}
@keyframes tds-keyframe--make_smaller {
0% {
max-height: 100vh;
opacity: 1;
opacity: var(--tds-opacity--100)
}
to {
max-height: 0;
opacity: 0;
opacity: var(--tds-opacity--transparent)
}
}
@-webkit-keyframes tds-keyframe--make_larger {
0% {
max-height: 0;
opacity: 0;
opacity: var(--tds-opacity--transparent)
}
to {
max-height: 100vh;
opacity: 1;
opacity: var(--tds-opacity--100)
}
}
@keyframes tds-keyframe--make_larger {
0% {
max-height: 0;
opacity: 0;
opacity: var(--tds-opacity--transparent)
}
to {
max-height: 100vh;
opacity: 1;
opacity: var(--tds-opacity--100)
}
}
@-webkit-keyframes tds-keyframe--bounce {
0%,
20%,
50%,
80%,
to {
transform: translateY(0)
}
40% {
transform: translateY(5px)
}
60% {
transform: translateY(3px)
}
}
@keyframes tds-keyframe--bounce {
0%,
20%,
50%,
80%,
to {
transform: translateY(0)
}
40% {
transform: translateY(5px)
}
60% {
transform: translateY(3px)
}
}
.tds--padding--small {
padding: 8px!important;
padding: var(--tds-size--1x)!important
}
.tds--padding {
padding: 16px!important;
padding: var(--tds-size--2x)!important
}
.tds--padding--large {
padding: 24px!important;
padding: var(--tds-size--3x)!important
}
.tds--no_horizontal_padding {
-webkit-padding-start: 0!important;
padding-inline-start: 0!important;
-webkit-padding-end: 0!important;
padding-inline-end: 0!important
}
.tds--no_vertical_padding {
-webkit-padding-before: 0!important;
padding-block-start: 0!important;
-webkit-padding-after: 0!important;
padding-block-end: 0!important
}
.tds--no_padding {
padding: 0!important
}
.tds--horizontal_padding--small {
-webkit-padding-start: 8px!important;
-webkit-padding-start: var(--tds-size--1x)!important;
padding-inline-start: 8px!important;
padding-inline-start: var(--tds-size--1x)!important;
-webkit-padding-end: 8px!important;
-webkit-padding-end: var(--tds-size--1x)!important;
padding-inline-end: 8px!important;
padding-inline-end: var(--tds-size--1x)!important
}
.tds--horizontal_padding {
-webkit-padding-start: 16px!important;
-webkit-padding-start: var(--tds-size--2x)!important;
padding-inline-start: 16px!important;
padding-inline-start: var(--tds-size--2x)!important;
-webkit-padding-end: 16px!important;
-webkit-padding-end: var(--tds-size--2x)!important;
padding-inline-end: 16px!important;
padding-inline-end: var(--tds-size--2x)!important
}
.tds--horizontal_padding--large {
-webkit-padding-start: 24px!important;
-webkit-padding-start: var(--tds-size--3x)!important;
padding-inline-start: 24px!important;
padding-inline-start: var(--tds-size--3x)!important;
-webkit-padding-end: 24px!important;
-webkit-padding-end: var(--tds-size--3x)!important;
padding-inline-end: 24px!important;
padding-inline-end: var(--tds-size--3x)!important
}
.tds--vertical_padding--small {
-webkit-padding-before: 8px!important;
-webkit-padding-before: var(--tds-size--1x)!important;
padding-block-start: 8px!important;
padding-block-start: var(--tds-size--1x)!important;
-webkit-padding-after: 8px!important;
-webkit-padding-after: var(--tds-size--1x)!important;
padding-block-end: 8px!important;
padding-block-end: var(--tds-size--1x)!important
}
.tds--vertical_padding {
-webkit-padding-before: 16px!important;
-webkit-padding-before: var(--tds-size--2x)!important;
padding-block-start: 16px!important;
padding-block-start: var(--tds-size--2x)!important;
-webkit-padding-after: 16px!important;
-webkit-padding-after: var(--tds-size--2x)!important;
padding-block-end: 16px!important;
padding-block-end: var(--tds-size--2x)!important
}
.tds--vertical_padding--large {
-webkit-padding-before: 24px!important;
-webkit-padding-before: var(--tds-size--3x)!important;
padding-block-start: 24px!important;
padding-block-start: var(--tds-size--3x)!important;
-webkit-padding-after: 24px!important;
-webkit-padding-after: var(--tds-size--3x)!important;
padding-block-end: 24px!important;
padding-block-end: var(--tds-size--3x)!important
}
@media (max-width:599px) {
.tds--gutterless_on_small {
-webkit-padding-start: 0!important;
padding-inline-start: 0!important;
-webkit-padding-end: 0!important;
padding-inline-end: 0!important
}
}
:root {
--tds-base-line_height: var(--tds-line-height--30);
--tds-base-font_size: var(--tds-font-size--30);
--tds-base-font_family: var(--tds-font-combined)
}
@font-face {
font-family: system;
font-style: normal;
font-weight: 300;
src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Ubuntu Light"), local("Segoe UI Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma")
}
* {
box-sizing: border-box
}
body,
html {
font-family: Gotham Book, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
font-family: var(--tds-base-font_family, system);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
padding: 0
}
ol,
ul {
list-style-type: none
}
figcaption,
figure {
margin: 0;
padding: 0
}
.tds--full_width {
inline-size: 100%!important
}
.tds-sticky--left,
.tds-sticky--top {
position: -webkit-sticky;
position: sticky;
margin: 0;
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) {
block-size: 1px;
inline-size: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
position: absolute;
white-space: nowrap;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%)
}
.tds--is_visible {
visibility: visible
}
.tds--is_invisible {
visibility: hidden
}
@media (max-width:599px) {
.tds--hide_on_mobile {
display: none!important
}
}
@media (min-width:600px) {
.tds--hide_on_desk,
.tds--hide_on_middle {
display: none!important
}
}
@media (min-width:1800px) {
.tds--hide_on_large {
display: none!important
}
}
@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
}
}
:root {
--tds-icon-trigger--border_size: 2px;
--tds-icon-trigger--animation: color 900ms cubic-bezier(.75, 0, 0, 1), border 900ms cubic-bezier(.75, 0, 0, 1), opacity 900ms cubic-bezier(.75, 0, 0, 1), transform 900ms cubic-bezier(.75, 0, 0, 1), box-shadow 250ms cubic-bezier(.75, 0, 0, 1), background-color 900ms cubic-bezier(.75, 0, 0, 1)
}
.tds-icon-trigger {
position: relative;
display: inline-flex;
align-items: center;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
flex-flow: row nowrap
}
.tds-icon-trigger:active,
.tds-icon-trigger:focus,
.tds-icon-trigger:hover {
background-color: initial
}
.tds-trigger-input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: none;
opacity: 0;
border: none
}
.tds-label--trigger {
display: inline-flex;
align-items: center;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
flex-flow: row nowrap;
position: relative;
font-size: 12px;
font-size: var(--tds-font-size--20);
min-height: 40px;
min-height: var(--tds-size--5x);
min-width: 24px;
min-width: var(--tds-size--3x);
padding: 10px 32px 9px;
padding: 10px var(--tds-size--4x) 9px
}
.tds-label--trigger:hover {
color: #171a20;
color: var(--tds-color--grey10)
}
.tds-icon-trigger--is_reversed .tds-label--trigger {
-webkit-padding-start: 0;
padding-inline-start: 0;
-webkit-padding-end: 32px;
-webkit-padding-end: var(--tds-size--4x);
padding-inline-end: 32px;
padding-inline-end: var(--tds-size--4x)
}
.tds-label--trigger:before {
position: absolute;
box-sizing: border-box;
inline-size: 24px;
inline-size: var(--tds-size--3x);
block-size: 24px;
block-size: var(--tds-size--3x);
left: 0;
content: " ";
border: 2px solid #000;
border: var(--tds-icon-trigger--border_size) solid var(--tds-color--black);
border-radius: 24px;
border-radius: var(--tds-size--3x);
transition: color .9s cubic-bezier(.75, 0, 0, 1), border .9s cubic-bezier(.75, 0, 0, 1), opacity .9s cubic-bezier(.75, 0, 0, 1), transform .9s cubic-bezier(.75, 0, 0, 1), box-shadow .25s cubic-bezier(.75, 0, 0, 1), background-color .9s cubic-bezier(.75, 0, 0, 1);
transition: var(--tds-icon-trigger--animation)
}
.tds-icon-trigger--is_reversed .tds-label--trigger:before {
left: auto;
right: 0
}
.tds-label--trigger:after {
border: none;
opacity: 0
}
.tds-label--trigger .tds-label-title {
text-transform: uppercase
}
.tds-icon-crosshatch {
inline-size: 24px;
inline-size: var(--tds-size--3x);
block-size: 24px;
block-size: var(--tds-size--3x);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: transparent;
border: 0;
padding: 0;
border-radius: 24px;
border-radius: var(--tds-size--3x);
box-shadow: inset 0 0 0 0 transparent
}
.tds-icon-crosshatch,
.tds-icon-crosshatch:after,
.tds-icon-crosshatch:before {
position: absolute;
left: 0;
transition: color .9s cubic-bezier(.75, 0, 0, 1), border .9s cubic-bezier(.75, 0, 0, 1), opacity .9s cubic-bezier(.75, 0, 0, 1), transform .9s cubic-bezier(.75, 0, 0, 1), box-shadow .25s cubic-bezier(.75, 0, 0, 1), background-color .9s cubic-bezier(.75, 0, 0, 1);
transition: var(--tds-icon-trigger--animation)
}
.tds-icon-crosshatch:after,
.tds-icon-crosshatch:before {
content: "";
top: 0;
right: 0;
bottom: 0;
margin: auto;
border-radius: 4px;
background-color: #000;
background-color: var(--tds-color--black)
}
.tds-icon-crosshatch:before {
inline-size: 2px;
inline-size: var(--tds-icon-trigger--border_size);
block-size: 12px;
block-size: calc(var(--tds-size--2x) - 4px)
}
.tds-icon-crosshatch:after {
inline-size: 12px;
inline-size: calc(var(--tds-size--2x) - 4px);
block-size: 2px;
block-size: var(--tds-icon-trigger--border_size)
}
.tds-icon-trigger--small .tds-label--trigger {
min-height: 26px;
min-height: calc(var(--tds-size--2x) + 10px);
-webkit-padding-start: 24px;
-webkit-padding-start: calc(var(--tds-size--2x) + 8px);
padding-inline-start: 24px;
padding-inline-start: calc(var(--tds-size--2x) + 8px)
}
.tds-icon-trigger--small .tds-icon-crosshatch,
.tds-icon-trigger--small .tds-label--trigger:before {
inline-size: 16px;
inline-size: var(--tds-size--2x);
block-size: 16px;
block-size: var(--tds-size--2x)
}
.tds-icon-trigger--small .tds-icon-crosshatch:before {
block-size: 6px;
block-size: calc(var(--tds-size--2x) - 10px)
}
.tds-icon-trigger--small .tds-icon-crosshatch:after {
inline-size: 6px;
inline-size: calc(var(--tds-size--2x) - 10px)
}
.tds-icon-trigger--arrow .tds-label--trigger {
-webkit-padding-start: 0;
padding-inline-start: 0;
box-shadow: 0 0 0 0 transparent;
transition: color .9s cubic-bezier(.75, 0, 0, 1), border .9s cubic-bezier(.75, 0, 0, 1), opacity .9s cubic-bezier(.75, 0, 0, 1), transform .9s cubic-bezier(.75, 0, 0, 1), box-shadow .25s cubic-bezier(.75, 0, 0, 1), background-color .9s cubic-bezier(.75, 0, 0, 1);
transition: var(--tds-icon-trigger--animation)
}
.tds-icon-trigger--arrow .tds-label--trigger:before {
display: none
}
.tds-icon-trigger--arrow .tds-label-title {
text-transform: capitalize;
-webkit-margin-end: 8px;
-webkit-margin-end: var(--tds-size);
margin-inline-end: 8px;
margin-inline-end: var(--tds-size)
}
.tds-icon-trigger--arrow .tds-icon--chevron--down {
opacity: .7;
opacity: var(--tds-opacity--70);
transition: color .9s cubic-bezier(.75, 0, 0, 1), border .9s cubic-bezier(.75, 0, 0, 1), opacity .9s cubic-bezier(.75, 0, 0, 1), transform .9s cubic-bezier(.75, 0, 0, 1), box-shadow .25s cubic-bezier(.75, 0, 0, 1), background-color .9s cubic-bezier(.75, 0, 0, 1);
transition: var(--tds-icon-trigger--animation)
}
.tds-icon-trigger--arrow:hover .tds-icon--chevron--down {
opacity: 1;
opacity: var(--tds-opacity--100)
}
.tds-trigger-input:checked~.tds-label--trigger,
.tds-trigger-input:disabled~.tds-label--trigger,
.tds-trigger-input:focus~.tds-label--trigger {
color: #171a20;
color: var(--tds-color--grey10)
}
.tds-icon-trigger--is_reversed .tds-icon-crosshatch {
left: auto;
right: 0
}
.tds-scrim--black .tds-label--trigger:before {
border-color: #fff;
border-color: var(--tds-color--white)
}
.tds-scrim--black .tds-icon-crosshatch:after,
.tds-scrim--black .tds-icon-crosshatch:before {
background-color: #fff;
background-color: var(--tds-color--white)
}
[dir=rtl] .tds-icon-crosshatch,
[dir=rtl] .tds-label--trigger:before {
left: auto;
right: 0
}
[dir=rtl] .tds-icon-trigger--is_reversed .tds-icon-crosshatch,
[dir=rtl] .tds-icon-trigger--is_reversed .tds-label--trigger,
[dir=rtl] .tds-icon-trigger--is_reversed .tds-label--trigger:before {
left: 0;
right: auto
}
.tds-trigger-input:focus~.tds-label--trigger:before {
box-shadow: inset 0 0 0 1px #000;
box-shadow: inset 0 0 0 1px var(--tds-color--black);
transition: color .9s cubic-bezier(.75, 0, 0, 1), border .9s cubic-bezier(.75, 0, 0, 1), opacity .9s cubic-bezier(.75, 0, 0, 1), transform .9s cubic-bezier(.75, 0, 0, 1), box-shadow .25s cubic-bezier(.75, 0, 0, 1), background-color .9s cubic-bezier(.75, 0, 0, 1);
transition: var(--tds-icon-trigger--animation)
}
.tds-trigger-input:checked~.tds-label--trigger .tds-icon-crosshatch:before {
transform: rotate(90deg)
}
.tds-trigger-input:checked~.tds-label--trigger .tds-icon-crosshatch:after {
transform: rotate(180deg);
opacity: 0;
opacity: var(--tds-opacity--transparent)
}
.tds-scrim--black .tds-icon-trigger--arrow .tds-icon--chevron--down {
fill: #fff;
opacity: .5;
opacity: var(--tds-opacity--50)
}
.tds-trigger-input:checked~.tds-label--trigger .tds-icon--chevron--down {
transform: rotateX(180deg)
}
.tds-trigger-input:disabled~.tds-label--trigger {
opacity: .5;
opacity: var(--tds-opacity--50);
cursor: not-allowed
}
.tds-icon-trigger--arrow:focus-within .tds-label--trigger {
box-shadow: 0 0 0 2px #d0d1d2;
box-shadow: 0 0 0 2px var(--tds-color--grey50)
}
.tds-scrim--black .tds-icon-trigger--arrow:focus-within .tds-label--trigger {
box-shadow: 0 0 0 2px #a2a3a5;
box-shadow: 0 0 0 2px var(--tds-color--grey40)
}
.tds-scrim--black .tds-icon-trigger--arrow:hover .tds-icon--chevron--down {
opacity: 1;
opacity: var(--tds-opacity--100)
}
.tds-icon-trigger--will_rotate .tds-trigger-input:checked~.tds-label--trigger .tds-icon-crosshatch:before {
transform: rotate(135deg)
}
.tds-icon-trigger--will_rotate .tds-trigger-input:checked~.tds-label--trigger .tds-icon-crosshatch:after {
transform: rotate(315deg);
opacity: 1;
opacity: var(--tds-opacity--100)
}
.tds-icon-trigger--will_invert .tds-trigger-input:checked~.tds-label--trigger .tds-icon-crosshatch {
background-color: #000;
background-color: var(--tds-color--black)
}
.tds-icon-trigger--will_invert .tds-trigger-input:checked~.tds-label--trigger .tds-icon-crosshatch:after,
.tds-icon-trigger--will_invert .tds-trigger-input:checked~.tds-label--trigger .tds-icon-crosshatch:before {
background-color: #fff;
background-color: var(--tds-color--white)
}
.tds-scrim--black .tds-icon-trigger--will_invert .tds-label--trigger:before {
border-color: #fff;
border-color: var(--tds-color--white)
}
.tds-scrim--black .tds-icon-trigger--will_invert .tds-trigger-input:checked~.tds-label--trigger .tds-icon-crosshatch {
background-color: #fff;
background-color: var(--tds-color--white)
}
.tds-scrim--black .tds-icon-trigger--will_invert .tds-trigger-input:checked~.tds-label--trigger .tds-icon-crosshatch:after,
.tds-scrim--black .tds-icon-trigger--will_invert .tds-trigger-input:checked~.tds-label--trigger .tds-icon-crosshatch:before {
background-color: #000;
background-color: var(--tds-color--black)
}
:root {
--tds-btn-transition: background-color 300ms cubic-bezier(.5, .25, .25, .75), box-shadow 200ms cubic-bezier(0, .25, .25, .75), color 300ms cubic-bezier(.5, .25, .25, .75), font-size 300ms cubic-bezier(.5, .25, .25, .75), block-size 300ms cubic-bezier(.5, .25, .25, .75), min-inline-size 300ms cubic-bezier(.5, .25, .25, .75), min-block-size 300ms cubic-bezier(.5, .25, .25, .75), opacity 200ms cubic-bezier(0, .25, .25, .75), padding 300ms cubic-bezier(.5, .25, .25, .75), inline-size 300ms cubic-bezier(.5, .25, .25, .75);
--tds-btn-min_height: var(--tds-size--5x);
--tds-btn-min_width: calc(var(--tds-size)*25);
--tds-btn-max_width: calc(var(--tds-size)*50);
--tds-btn-block_start: var(--tds-size--1x);
--tds-btn-block_end: var(--tds-size--1x);
--tds-btn-font_size: var(--tds-font-size--20);
--tds-btn-line_height: 1.2;
--tds-btn-font_family: var(--tds-font-combined--medium);
--tds-btn-radius: var(--tds-border-radius--pill);
--tds-btn-border_width: var(--tds-border-width--large);
--tds-btn-border_style: solid;
--tds-btn-border_color: transparent;
--tds-btn-box_shadow: inset 0 0 0 0 transparent;
--tds-btn-background_color: var(--tds-color--black)
}
.tds-btn {
min-block-size: 40px;
min-block-size: var(--tds-btn-min_height);
min-inline-size: 200px;
min-inline-size: var(--tds-btn-min_width);
max-inline-size: 400px;
max-inline-size: var(--tds-btn-max_width);
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
-webkit-margin-before: 8px;
-webkit-margin-before: var(--tds-btn-block_start);
margin-block-start: 8px;
margin-block-start: var(--tds-btn-block_start);
-webkit-margin-after: 8px;
-webkit-margin-after: var(--tds-btn-block_end);
margin-block-end: 8px;
margin-block-end: var(--tds-btn-block_end);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-size: 12px;
font-size: var(--tds-btn-font_size);
font-family: Gotham Medium, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
font-family: var(--tds-btn-font_family);
line-height: 1.2;
line-height: var(--tds-btn-line_height);
color: #fff;
color: var(--tds-color--white);
cursor: pointer;
text-align: center;
text-decoration: none;
text-transform: uppercase;
border-radius: 100px;
border-radius: var(--tds-btn-radius);
border: 3px solid transparent;
border: var(--tds-btn-border_width) var(--tds-btn-border_style) var(--tds-btn-border_color);
box-shadow: inset 0 0 0 0 transparent;
box-shadow: var(--tds-btn-box_shadow);
background-color: #000;
background-color: var(--tds-btn-background_color);
outline: none
}
@media (min-width:600px) {
.tds-btn {
--tds-btn-font_size: var(--tds-font-size--20);
left: -8px;
left: calc(var(--tds-size)*-1);
inline-size: auto;
-webkit-margin-start: 8px;
-webkit-margin-start: var(--tds-size);
margin-inline-start: 8px;
margin-inline-start: var(--tds-size);
-webkit-margin-end: 8px;
-webkit-margin-end: var(--tds-size);
margin-inline-end: 8px;
margin-inline-end: var(--tds-size);
padding: 5px 40px;
padding: 5px var(--tds-size--5x)
}
[dir=rtl] .tds-btn {
left: 0;
right: -8px;
right: calc(var(--tds-size)*-1)
}
}
@media (max-width:599px) {
.tds-btn {
--tds-btn-min_width: 100%;
inline-size: 100%
}
}
.tds-btn.tds-btn--disabled,
.tds-btn.tds-btn--disabled:active,
.tds-btn.tds-btn--disabled:focus,
.tds-btn.tds-btn--disabled:hover,
.tds-btn[disabled],
.tds-btn[disabled]:active,
.tds-btn[disabled]:focus,
.tds-btn[disabled]:hover {
--tds-btn-box_shadow: none;
opacity: .7;
opacity: var(--tds-opacity--70);
cursor: not-allowed
}
.tds-btn,
.tds-btn.tds-btn--disabled:active,
.tds-btn.tds-btn--disabled:focus,
.tds-btn.tds-btn--disabled:hover,
.tds-btn[disabled]:active,
.tds-btn[disabled]:focus,
.tds-btn[disabled]:hover {
--tds-btn-background_color: inherit
}
.tds-btn,
.tds-btn--disabled,
.tds-btn:disabled,
.tds-btn:hover {
transition: background-color .3s cubic-bezier(.5, .25, .25, .75), box-shadow .2s cubic-bezier(0, .25, .25, .75), color .3s cubic-bezier(.5, .25, .25, .75), font-size .3s cubic-bezier(.5, .25, .25, .75), block-size .3s cubic-bezier(.5, .25, .25, .75), min-inline-size .3s cubic-bezier(.5, .25, .25, .75), min-block-size .3s cubic-bezier(.5, .25, .25, .75), opacity .2s cubic-bezier(0, .25, .25, .75), padding .3s cubic-bezier(.5, .25, .25, .75), inline-size .3s cubic-bezier(.5, .25, .25, .75);
transition: var(--tds-btn-transition)
}
.tds-btn--blue.tds-btn--disabled,
.tds-btn--blue.tds-btn--disabled:active,
.tds-btn--blue.tds-btn--disabled:focus,
.tds-btn--blue.tds-btn--disabled:hover,
.tds-btn--blue[disabled],
.tds-btn--blue[disabled]:active,
.tds-btn--blue[disabled]:focus,
.tds-btn--blue[disabled]:hover {
color: #fff;
color: var(--tds-color--white);
opacity: .5;
opacity: var(--tds-opacity--50)
}
.tds-btn--blue.tds-btn--outline.tds-btn--disabled,
.tds-btn--blue.tds-btn--outline.tds-btn--disabled:active,
.tds-btn--blue.tds-btn--outline.tds-btn--disabled:focus,
.tds-btn--blue.tds-btn--outline.tds-btn--disabled:hover,
.tds-btn--blue.tds-btn--outline[disabled],
.tds-btn--blue.tds-btn--outline[disabled]:active,
.tds-btn--blue.tds-btn--outline[disabled]:focus,
.tds-btn--blue.tds-btn--outline[disabled]:hover {
color: #3e6ae1;
color: var(--tds-color--blue30);
opacity: .5;
opacity: var(--tds-opacity--50)
}
.tds-scrim--black .tds-btn.tds-btn--disabled,
.tds-scrim--black .tds-btn.tds-btn--disabled:active,
.tds-scrim--black .tds-btn.tds-btn--disabled:focus,
.tds-scrim--black .tds-btn.tds-btn--disabled:hover,
.tds-scrim--black .tds-btn[disabled],
.tds-scrim--black .tds-btn[disabled]:active,
.tds-scrim--black .tds-btn[disabled]:focus,
.tds-scrim--black .tds-btn[disabled]:hover {
opacity: .3;
opacity: var(--tds-opacity--30)
}
.tds-btn:active,
.tds-btn:focus,
.tds-btn:hover {
--tds-btn-background_color: var(--tds-color--black);
color: #fff;
color: var(--tds-color--white)
}
.tds-btn:active,
.tds-btn:focus {
--tds-btn-box_shadow: inset 0 0 0 2px var(--tds-color--white)
}
a.tds-btn:hover {
--tds-btn-box_shadow: unset;
box-shadow: inset 0 0 0 0 transparent;
box-shadow: var(--tds-btn-box_shadow)
}
.tds-btn--blue,
.tds-btn--blue.tds-btn--disabled:active,
.tds-btn--blue.tds-btn--disabled:focus,
.tds-btn--blue.tds-btn--disabled:hover,
.tds-btn--blue[disabled]:active,
.tds-btn--blue[disabled]:focus,
.tds-btn--blue[disabled]:hover {
--tds-btn-background_color: var(--tds-color--blue30)
}
.tds-btn--blue:active,
.tds-btn--blue:focus,
.tds-btn--blue:hover {
--tds-btn-background_color: var(--tds-color--blue20)
}
.tds-btn--blue.tds-btn--outline {
--tds-btn-border_color: var(--tds-color--blue30);
color: #3e6ae1;
color: var(--tds-color--blue30)
}
.tds-btn--blue.tds-btn--outline:active,
.tds-btn--blue.tds-btn--outline:focus,
.tds-btn--blue.tds-btn--outline:hover {
--tds-btn-background_color: var(--tds-color--blue20);
--tds-btn-border_color: var(--tds-color--blue20);
color: #fff;
color: var(--tds-color--white)
}
.tds-btn--white,
.tds-btn--white.tds-btn--disabled:active,
.tds-btn--white.tds-btn--disabled:focus,
.tds-btn--white.tds-btn--disabled:hover,
.tds-btn--white[disabled]:active,
.tds-btn--white[disabled]:focus,
.tds-btn--white[disabled]:hover {
--tds-btn-background_color: var(--tds-color--white);
color: #171a20;
color: var(--tds-color--grey10)
}
.tds-btn--white.tds-btn--outline:active,
.tds-btn--white.tds-btn--outline:focus,
.tds-btn--white.tds-btn--outline:hover,
.tds-btn--white:active,
.tds-btn--white:focus,
.tds-btn--white:hover {
--tds-btn-background_color: var(--tds-color--grey70);
color: #171a20;
color: var(--tds-color--grey10)
}
.tds-btn--white:active,
.tds-btn--white:focus {
--tds-btn-box_shadow: inset 0 0 0 2px var(--tds-color--grey10)
}
.tds-btn--light.tds-btn--disabled:active,
.tds-btn--light.tds-btn--disabled:focus,
.tds-btn--light.tds-btn--disabled:hover,
.tds-btn--light.tds-btn--light,
.tds-btn--light[disabled]:active,
.tds-btn--light[disabled]:focus,
.tds-btn--light[disabled]:hover {
--tds-btn-background_color: var(--tds-color--grey70);
color: #171a20;
color: var(--tds-color--grey10)
}
.tds-scrim--dark .tds-btn--light.tds-btn--light,
.tds-scrim--light .tds-btn--light.tds-btn--light {
--tds-btn-background_color: var(--tds-color--white)
}
.tds-btn--light.tds-btn--outline:active,
.tds-btn--light.tds-btn--outline:focus,
.tds-btn--light.tds-btn--outline:hover,
.tds-btn--light:active,
.tds-btn--light:focus,
.tds-btn--light:hover {
--tds-btn-background_color: var(--tds-color--grey60);
color: #171a20;
color: var(--tds-color--grey10)
}
.tds-btn--light:active,
.tds-btn--light:focus {
--tds-btn-box_shadow: inset 0 0 0 2px var(--tds-color--grey10)
}
.tds-btn--grey,
.tds-btn--grey:active,
.tds-btn--grey:focus,
.tds-btn--grey:hover {
--tds-btn-background_color: var(--tds-color--grey10)
}
.tds-btn--grey:active,
.tds-btn--grey:focus {
outline: 1px dotted #171a20;
outline: 1px dotted var(--tds-color--grey10)
}
.tds-btn--outline {
--tds-btn-background_color: transparent;
--tds-btn-border_color: var(--tds-color--grey10);
color: #171a20;
color: var(--tds-color--grey10)
}
.tds-scrim--black .tds-btn--outline {
--tds-btn-border_color: var(--tds-color--white);
color: #fff;
color: var(--tds-color--white)
}
.tds-btn--outline:active,
.tds-btn--outline:focus,
.tds-btn--outline:hover {
--tds-btn-background_color: var(--tds-color--black);
color: #fff;
color: var(--tds-color--white)
}
.tds-btn--outline.tds-btn--disabled:active,
.tds-btn--outline.tds-btn--disabled:focus,
.tds-btn--outline.tds-btn--disabled:hover,
.tds-btn--outline[disabled]:active,
.tds-btn--outline[disabled]:focus,
.tds-btn--outline[disabled]:hover {
--tds-btn-background_color: transparent;
color: #171a20;
color: var(--tds-color--grey10)
}
.tds-btn--outline:hover {
--tds-btn-background_color: var(--tds-color--grey10);
color: #fff;
color: var(--tds-color--white)
}
.tds-btn--outline.tds-btn--white {
--tds-btn-border_color: var(--tds-color--white);
color: #fff;
color: var(--tds-color--white)
}
.tds-btn--outline.tds-btn--white:active,
.tds-btn--outline.tds-btn--white:focus,
.tds-btn--outline.tds-btn--white:hover {
--tds-btn-background_color: var(--tds-color--white);
color: #171a20;
color: var(--tds-color--grey10)
}
.tds-btn--outline.tds-btn--outline.tds-btn--white[disabled]:active,
.tds-btn--outline.tds-btn--outline.tds-btn--white[disabled]:focus,
.tds-btn--outline.tds-btn--outline.tds-btn--white[disabled]:hover,
.tds-btn--outline.tds-btn--white.tds-btn--disabled:active,
.tds-btn--outline.tds-btn--white.tds-btn--disabled:focus,
.tds-btn--outline.tds-btn--white.tds-btn--disabled:hover {
--tds-btn-background_color: transparent;
color: #fff;
color: var(--tds-color--white)
}
@media (min-width:600px) {
.tds-btn--full {
--tds-btn-max_width: 100%;
inline-size: 100%;
-webkit-margin-start: 0;
margin-inline-start: 0;
-webkit-margin-end: 0;
margin-inline-end: 0;
left: 0
}
.tds-btn--medium {
--tds-btn-max_width: 320px;
--tds-btn-min_width: 160px;
--tds-btn-min_height: 0;
--tds-btn-font_size: var(--tds-font-size--20);
block-size: 32px;
padding: 0 32px
}
.tds-btn--small {
--tds-btn-max_width: 160px;
--tds-btn-min_width: 80px;
--tds-btn-min_height: 0;
--tds-btn-font_size: var(--tds-font-size--10);
block-size: 28px;
padding: 0 24px
}
}
.tds-scrim--black .tds-btn--white.tds-btn--outline {
color: #fff;
color: var(--tds-color--white)
}
.tds-scrim--black .tds-btn--white,
.tds-scrim--black .tds-btn--white.tds-btn--outline:active,
.tds-scrim--black .tds-btn--white.tds-btn--outline:focus,
.tds-scrim--black .tds-btn--white.tds-btn--outline:hover,
.tds-scrim--black .tds-btn--white:active,
.tds-scrim--black .tds-btn--white:focus,
.tds-scrim--black .tds-btn--white:hover,
.tds-scrim--black a.tds-btn--light:hover,
.tds-scrim--black a.tds-btn--white,
.tds-scrim--black a.tds-btn--white.tds-btn--outline:active,
.tds-scrim--black a.tds-btn--white.tds-btn--outline:focus,
.tds-scrim--black a.tds-btn--white.tds-btn--outline:hover,
.tds-scrim--black a.tds-btn--white:active,
.tds-scrim--black a.tds-btn--white:focus,
.tds-scrim--black a.tds-btn--white:hover {
color: #171a20;
color: var(--tds-color--grey10)
}
:root {
--tds-btn_group--padding: 20px;
--tds-btn_group--padding_medium: 16px;
--tds-btn_group--padding_small: 12px;
--tds-btn_playground-group-radius-first: var(--tds-border-radius--pill) 0 0 var(--tds-border-radius--pill);
--tds-btn_playground-group-radius-last: 0 var(--tds-border-radius--pill) var(--tds-border-radius--pill) 0;
--tds-btn_playground-group-width-first: var(--tds-border-width--large) 0 var(--tds-border-width--large) var(--tds-border-width--large);
--tds-btn_playground-group-width-last: var(--tds-border-width--large) var(--tds-border-width--large) var(--tds-border-width--large) 0
}
[dir=rtl] {
--tds-btn_playground-group-radius-first: 0 var(--tds-border-radius--pill) var(--tds-border-radius--pill) 0;
--tds-btn_playground-group-radius-last: var(--tds-border-radius--pill) 0 0 var(--tds-border-radius--pill);
--tds-btn_playground-group-width-first: var(--tds-border-width--large) var(--tds-border-width--large) var(--tds-border-width--large) 0;
--tds-btn_playground-group-width-last: var(--tds-border-width--large) 0 var(--tds-border-width--large) var(--tds-border-width--large)
}
.tds-btn_group {
display: flex;
flex-flow: row nowrap
}
.tds-btn_group .tds-btn {
left: auto;
min-width: 0;
white-space: inherit;
-webkit-margin-start: 0;
margin-inline-start: 0;
-webkit-margin-end: 0;
margin-inline-end: 0;
-webkit-padding-start: 20px;
-webkit-padding-start: var(--tds-btn_group--padding);
padding-inline-start: 20px;
padding-inline-start: var(--tds-btn_group--padding);
-webkit-padding-end: 20px;
-webkit-padding-end: var(--tds-btn_group--padding);
padding-inline-end: 20px;
padding-inline-end: var(--tds-btn_group--padding)
}
@media (max-width:639px) {
.tds-btn_group {
inline-size: 100%
}
.tds-btn_group--with_link {
flex-flow: column wrap
}
}
@media (min-width:600px) {
.tds-btn_group--with_link,
.tds-btn_group--with_link_reversed {
flex-flow: row nowrap
}
.tds-btn_group--with_link_reversed .tds-link {
order: -1;
-webkit-margin-end: 16px;
-webkit-margin-end: var(--tds-size--2x);
margin-inline-end: 16px;
margin-inline-end: var(--tds-size--2x)
}
[dir=rtl] .tds-btn_group--with_link .tds-btn {
left: 0;
-webkit-margin-end: 0;
margin-inline-end: 0;
-webkit-margin-start: 8px;
-webkit-margin-start: var(--tds-size);
margin-inline-start: 8px;
margin-inline-start: var(--tds-size)
}
}
@media (max-width:599px) {
.tds-btn_group--with_link,
.tds-btn_group--with_link_reversed {
flex-flow: column nowrap
}
}
.tds-btn_group--with_link,
.tds-btn_group--with_link_reversed {
display: flex;
align-content: center;
align-items: center
}
.tds-btn_group--with_link .tds-link,
.tds-btn_group--with_link_reversed .tds-link {
line-height: 1
}
.tds-btn_group--stacked {
display: flex;
flex-flow: column wrap;
align-items: flex-start
}
.tds-btn_group--stacked_center {
align-items: center
}
@media (min-width:640px) {
.tds-btn_group--stacked .tds-btn {
left: 0
}
}
.tds-btn_group .tds-btn:first-child {
border-radius: 100px 0 0 100px;
border-radius: var(--tds-border-radius--pill) 0 0 var(--tds-border-radius--pill);
border-left-width: 3px;
border-left-width: var(--tds-border-width--large);
border-bottom-width: 3px;
border-bottom-width: var(--tds-border-width--large);
border-right-width: 0;
border-top-width: 3px;
border-top-width: var(--tds-border-width--large)
}
.tds-btn_group .tds-btn:last-child,
.tds-btn_group[dir=rtl] .tds-btn:first-child,
[dir=rtl].tds-btn_group .tds-btn:first-child,
[dir=rtl] .tds-btn_group .tds-btn:first-child {
border-radius: 0 100px 100px 0;
border-radius: 0 var(--tds-border-radius--pill) var(--tds-border-radius--pill) 0;
border-left-width: 0;
border-bottom-width: 3px;
border-bottom-width: var(--tds-border-width--large);
border-right-width: 3px;
border-right-width: var(--tds-border-width--large);
border-top-width: 3px;
border-top-width: var(--tds-border-width--large)
}
.tds-btn_group[dir=rtl] .tds-btn:last-child,
[dir=rtl].tds-btn_group .tds-btn:last-child,
[dir=rtl] .tds-btn_group .tds-btn:last-child {
border-radius: 100px 0 0 100px;
border-radius: var(--tds-border-radius--pill) 0 0 var(--tds-border-radius--pill);
border-left-width: 3px;
border-left-width: var(--tds-border-width--large);
border-bottom-width: 3px;
border-bottom-width: var(--tds-border-width--large);
border-right-width: 0;
border-top-width: 3px;
border-top-width: var(--tds-border-width--large)
}
.tds-btn_group .tds-btn:nth-child(n+2):nth-last-child(n+2) {
border-radius: 0;
border-right-width: 0;
border-left-width: 0
}
.tds-btn_group .tds-btn--medium {
-webkit-padding-start: 16px;
-webkit-padding-start: var(--tds-btn_group--padding_medium);
padding-inline-start: 16px;
padding-inline-start: var(--tds-btn_group--padding_medium);
-webkit-padding-end: 16px;
-webkit-padding-end: var(--tds-btn_group--padding_medium);
padding-inline-end: 16px;
padding-inline-end: var(--tds-btn_group--padding_medium)
}
.tds-btn_group .tds-btn--small {
-webkit-padding-start: 12px;
-webkit-padding-start: var(--tds-btn_group--padding_small);
padding-inline-start: 12px;
padding-inline-start: var(--tds-btn_group--padding_small);
-webkit-padding-end: 12px;
-webkit-padding-end: var(--tds-btn_group--padding_small);
padding-inline-end: 12px;
padding-inline-end: var(--tds-btn_group--padding_small)
}
.tds-btn_group .tds-btn--is_selected {
background-color: #3e6ae1;
background-color: var(--tds-color--blue30);
color: #fff;
color: var(--tds-color--white)
}
:root {
--tds-btn-payment-transition: fill 300ms cubic-bezier(.5, .25, .25, .75)
}
.tds-icon--applepay,
.tds-icon--paypal {
top: 50%;
left: 50%;
position: absolute;
transform: translate3d(-50%, -50%, 0)
}
.tds-btn--outline .tds-icon--applepay {
fill: #171a20;
fill: var(--tds-color--grey10)
}
.tds-btn--outline:focus .paypal-icon--path1,
.tds-btn--outline:focus .paypal-icon--path2,
.tds-btn--outline:focus .paypal-icon--path3,
.tds-btn--outline:focus .paypal-letters--path1,
.tds-btn--outline:focus .paypal-letters--path2,
.tds-btn--outline:hover .paypal-icon--path1,
.tds-btn--outline:hover .paypal-icon--path2,
.tds-btn--outline:hover .paypal-icon--path3,
.tds-btn--outline:hover .paypal-letters--path1,
.tds-btn--outline:hover .paypal-letters--path2,
.tds-btn:focus .tds-icon--applepay,
.tds-btn:focus .tds-icon--paypal,
.tds-btn:hover .tds-icon--applepay,
.tds-btn:hover .tds-icon--paypal {
transition: fill .3s cubic-bezier(.5, .25, .25, .75);
transition: var(--tds-btn-payment-transition)
}
.tds-btn--outline:focus .paypal-icon--path1,
.tds-btn--outline:hover .paypal-icon--path1 {
fill: #bfc0c0
}
.tds-btn--outline:focus .paypal-icon--path2,
.tds-btn--outline:hover .paypal-icon--path2 {
fill: #ececec
}
.tds-btn--outline:focus .applepay-icon,
.tds-btn--outline:focus .applepay-letters,
.tds-btn--outline:focus .paypal-icon--path3,
.tds-btn--outline:focus .paypal-letters--path1,
.tds-btn--outline:focus .paypal-letters--path2,
.tds-btn--outline:hover .applepay-icon,
.tds-btn--outline:hover .applepay-letters,
.tds-btn--outline:hover .paypal-icon--path3,
.tds-btn--outline:hover .paypal-letters--path1,
.tds-btn--outline:hover .paypal-letters--path2,
.tds-btn:focus .tds-icon--applepay,
.tds-btn:hover .tds-icon--applepay {
fill: #fff;
fill: var(--tds-color--white)
}
.tds-scrim--black .tds-btn:focus .tds-icon--applepay,
.tds-scrim--black .tds-btn:hover .tds-icon--applepay {
fill: #000;
fill: var(--tds-color--black)
}
.tds-btn--link {
--tds-btn-min_height: initial;
--tds-btn-min_width: initial;
--tds-btn-max_width: 100%;
--tds-btn-link--flex-direction: row;
--tds-btn-link--flex-wrap: nowrap;
--tds-btn-font_size: --tds-base-font_size;
margin: 0;
padding: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 0;
text-align: initial;
border: 0;
text-transform: none;
color: currentColor;
box-shadow: 0 0 0 transparent;
cursor: pointer;
-webkit-margin-start: 0;
margin-inline-start: 0;
-webkit-margin-end: 0;
margin-inline-end: 0;
left: 0;
right: 0;
flex-flow: var(--tds-btn-link--flex-direction) var(--tds-btn-link--flex-wrap)
}
@media (min-width:600px) {
.tds-btn--link {
--tds-btn-font_size: --tds-base-font_size
}
}
.tds-btn--with_icon--reversed {
--tds-btn-link--flex-direction: row-reverse
}
.tds-btn--link,
.tds-btn--link:active,
.tds-btn--link:focus,
.tds-btn--link:hover {
background-color: transparent;
box-shadow: 0 0 0 transparent;
color: #000;
color: var(--tds-color--black)
}
.tds-btn--blue.tds-btn--link {
color: #3457b1;
color: var(--tds-color--blue20)
}
.tds-btn--blue.tds-btn--link:hover {
color: #2e4994;
color: var(--tds-color--blue10)
}
.tds-btn--disabled.tds-btn--link:hover {
background-color: initial
}
.tds-scrim--black .tds-btn--link,
.tds-scrim--black .tds-btn--link:hover {
color: #fff;
color: var(--tds-color--white)
}
.tds-scrim--black .tds-btn--link:active,
.tds-scrim--black .tds-btn--link:focus {
color: #fff;
color: var(--tds-color--white);
border: 0;
background-color: transparent;
box-shadow: 0 0 0 transparent
}
.tds-btn--with_icon .tds-btn--text,
.tds-btn--with_icon .tds-icon {
-webkit-margin-end: 8px;
-webkit-margin-end: var(--tds-size);
margin-inline-end: 8px;
margin-inline-end: var(--tds-size)
}
.tds-btn--tile-container {
--tds-tile-spacer: var(--tds-size--4x);
position: relative;
margin: 24px 0;
margin: var(--tds-size--3x) 0
}
.tds-btn.tds-btn--tile {
padding: 64px;
padding: var(--tds-size--8x);
border-radius: 10px;
background: #f4f4f4;
background: var(--tds-color--grey70);
color: #333;
inline-size: 100%;
box-shadow: 0 0 0 0 transparent;
transition: box-shadow .5s cubic-bezier(.5, 0, 0, .75)
}
@media (min-width:600px) {
.tds-btn.tds-btn--tile {
min-inline-size: 300px;
max-inline-size: 400px;
inline-size: auto;
-webkit-margin-end: var(--tds-tile-spacer);
margin-inline-end: var(--tds-tile-spacer)
}
}
.tds-btn.tds-btn--tile:hover {
box-shadow: 0 24px 32px 0 #d0d1d2;
box-shadow: 0 var(--tds-size--3x) var(--tds-size--4x) 0 var(--tds-color--grey50)
}
.tds-btn.tds-btn--tile:focus {
outline: none;
box-shadow: 0 24px 32px 0 #d0d1d2, inset 0 0 0 2px #f4f4f4, inset 0 0 0 4px #d0d1d2;
box-shadow: 0 var(--tds-size--3x) var(--tds-size--4x) 0 var(--tds-color--grey50), inset 0 0 0 2px var(--tds-color--grey70), inset 0 0 0 4px var(--tds-color--grey50)
}
.tds-btn--tile-container .tds-btn.tds-btn--tile {
-webkit-margin-start: 0;
margin-inline-start: 0;
position: static
}
.tds-btn--tile-container .tds-btn.tds-btn--tile:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: var(--tds-tile-spacer);
bottom: 0
}
.tds-btn--tile-description {
color: #a2a3a5;
color: var(--tds-color--grey40);
padding: 8px;
padding: var(--tds-size);
max-inline-size: 300px
}
grid-template-areas:"tds-shell-masthead" "tds-shell-content" "tds-shell-footer"
}
.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-content {
grid-area: tds-shell-content;
min-block-size: var(--tds-shell-content-height)
}
.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--no_offset,
.tds-layout .tds-layout {
-webkit-padding-start: 0;
padding-inline-start: 0;
-webkit-padding-end: 0;
padding-inline-end: 0
}
.tds-layout--constrained,
.tds-layout--constrained_small {
-webkit-margin-start: auto;
margin-inline-start: auto;
-webkit-margin-end: auto;
margin-inline-end: auto
}
.tds-layout--constrained_small {
max-width: 840px
}
.tds-layout--constrained {
max-width: 1440px
}
@media (max-width:899px) {
.tds-layout {
-webkit-padding-start: 24px;
padding-inline-start: 24px;
-webkit-padding-end: 24px;
padding-inline-end: 24px;
transition: padding .15s ease-in-out
}
}
@media (min-width:600px) {
.tds-layout {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 0 24px;
margin: auto;
transition: padding .15s ease-in-out
}
}
@media (min-width:900px) {
.tds-layout {
-webkit-padding-start: 48px;
padding-inline-start: 48px;
-webkit-padding-end: 48px;
padding-inline-end: 48px
}
}
.tds-layout-item:first-child:last-child {
grid-column: 1/13
}
@media (-ms-high-contrast:active),
(-ms-high-contrast:none) {
.tds-layout {
display: flex;
padding: 12px
}
.tds-layout-item {
margin: 0 12px;
flex-grow: 1
}
}
[class*=tds-layout-2col] .tds-layout-aside {
grid-area: aside
}
.tds-layout-main--left .tds-layout-aside,
.tds-layout-main--right .tds-layout-main {
-webkit-padding-start: 0;
padding-inline-start: 0;
transition: padding .25s ease-in-out
}
.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
}
}
@media (min-width:600px) {
.tds-layout-checkerboard {
grid-template: "checkboard--row" 1fr/1fr;
grid-gap: 0
}
.tds-layout-checkerboard .tds-layout-item {
display: grid;
grid-template: "checkerboard-asset checkerboard-caption" 1fr/1fr 1fr;
justify-content: center;
align-content: center;
align-items: stretch
}
.tds-layout-checkerboard .tds-layout-checkerboard--caption {
grid-area: checkerboard-caption;
-webkit-padding-start: 64px;
-webkit-padding-start: var(--tds-size--8x);
padding-inline-start: 64px;
padding-inline-start: var(--tds-size--8x);
-webkit-padding-end: 64px;
-webkit-padding-end: var(--tds-size--8x);
padding-inline-end: 64px;
padding-inline-end: var(--tds-size--8x);
place-self: center stretch;
text-align: start
}
.tds-layout-checkerboard .tds-layout-item:nth-child(odd) {
grid-template-areas: "checkerboard-caption checkerboard-asset"
}
.tds-layout-checkerboard .tds-layout-item:nth-child(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 {
inline-size: 100%;
max-width: 100%;
display: block;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
grid-area: checkerboard-asset
}
.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
}
@media (-ms-high-contrast:active),
(-ms-high-contrast:none) {
.tds-layout-3col-has_main--inset .tds-layout-item,
.tds-layout-3col-has_main--spread .tds-layout-item,
.tds-layout-3col-has_main .tds-layout-item {
order: 1
}
.tds-layout-3col-has_main--inset .tds-layout-main,
.tds-layout-3col-has_main--spread .tds-layout-main,
.tds-layout-3col-has_main .tds-layout-main {
inline-size: 50%
}
.tds-layout-3col-has_main .tds-layout-aside {
inline-size: 25%
}
.tds-layout-3col-has_main--inset .tds-layout-aside,
.tds-layout-3col-has_main--spread .tds-layout-aside {
inline-size: 15%
}
.tds-layout-3col-has_main--inset .tds-layout-aside:first-of-type,
.tds-layout-3col-has_main--spread .tds-layout-aside:first-of-type,
.tds-layout-3col-has_main .tds-layout-aside:first-of-type {
order: 0
}
.tds-layout-3col-has_main--inset .tds-layout-aside:first-of-type,
.tds-layout-3col-has_main--spread .tds-layout-aside:last-of-type {
-webkit-margin-start: 10%;
margin-inline-start: 10%
}
.tds-layout-3col-has_main--inset .tds-layout-aside:last-of-type,
.tds-layout-3col-has_main--spread .tds-layout-aside:first-of-type {
-webkit-margin-end: 10%;
margin-inline-end: 10%
}
}
.tds-layout--4col {
grid-template-columns: repeat(4, 1fr)
}
:root {
--tds-content_container--max_width: 1060px
}
.tds-content_container {
display: block;
inline-size: 100%;
-webkit-margin-start: auto;
margin-inline-start: auto;
-webkit-margin-end: auto;
margin-inline-end: auto;
-webkit-padding-end: 24px;
-webkit-padding-end: var(--tds-size--3x);
padding-inline-end: 24px;
padding-inline-end: var(--tds-size--3x);
-webkit-padding-start: 24px;
-webkit-padding-start: var(--tds-size--3x);
padding-inline-start: 24px;
padding-inline-start: var(--tds-size--3x)
}
.tds-content_container--max_width {
max-width: 1060px;
max-width: var(--tds-content_container--max_width)
}
@media (min-width:900px) {
.tds-content_container--small {
inline-size: 50%
}
.tds-content_container--medium {
inline-size: 70%
}
.tds-content_container--large {
inline-size: 90%
}
.tds-content_container--max_width.tds-content_container--small {
max-width: 530px;
max-width: calc(var(--tds-content_container--max_width)*0.5)
}
.tds-content_container--max_width.tds-content_container--medium {
max-width: 742px;
max-width: calc(var(--tds-content_container--max_width)*0.7)
}
.tds-content_container--max_width.tds-content_container--large {
max-width: 954px;
max-width: calc(var(--tds-content_container--max_width)*0.9)
}
}
: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-before: -24px;
-webkit-margin-before: var(--tds-gutter--negative);
margin-block-start: -24px;
margin-block-start: var(--tds-gutter--negative);
-webkit-margin-after: 24px;
-webkit-margin-after: var(--tds-size--3x);
margin-block-end: 24px;
margin-block-end: var(--tds-size--3x);
-webkit-margin-start: -24px;
-webkit-margin-start: var(--tds-gutter--negative);
margin-inline-start: -24px;
margin-inline-start: var(--tds-gutter--negative)
}
.tds-flex--nowrap {
flex-wrap: nowrap
}
.tds-flex-item {
flex: 1
}
.tds-grid--show_grid .tds-flex-item {
position: relative;
overflow: hidden
}
.tds-grid--show_grid .tds-flex-item:before {
display: block;
position: absolute;
top: 0;
left: 1px;
inline-size: calc(100% - 2px);
block-size: 100%;
content: "";
background-color: rgba(149, 236, 255, .1);
border-inline-start-width: 1px;
border-inline-start-style: solid;
border-inline-start-color: rgba(149, 236, 255, .3);
border-inline-end-width: 1px;
border-inline-end-style: solid;
border-inline-end-color: rgba(149, 236, 255, .3)
}
.tds-grid--show_grid.tds-flex-gutters .tds-flex-item:before,
.tds-grid--show_grid .tds-flex-gutters .tds-flex-item:before {
top: 24px;
top: var(--tds-size--3x);
left: 24px;
left: var(--tds-size--3x);
inline-size: calc(100% - 26px)
}
.tds-flex-gutters .tds-flex-item {
-webkit-padding-before: 24px;
-webkit-padding-before: var(--tds-size--3x);
padding-block-start: 24px;
padding-block-start: var(--tds-size--3x);
-webkit-padding-start: 24px;
-webkit-padding-start: var(--tds-size--3x);
padding-inline-start: 24px;
padding-inline-start: var(--tds-size--3x)
}
.tds-flex--flex_cells>.tds-flex-item {
display: flex
}
.tds-flex-item--no_gutter {
-webkit-padding-before: 0;
padding-block-start: 0;
-webkit-padding-start: 0;
padding-inline-start: 0
}
.tds-flex-gutters .tds-flex-gutters {
-webkit-margin-after: 0;
margin-block-end: 0
}
[class*=tds-flex--col_] {
flex: none;
transition: width .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-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-width: 70%
}
.tds-layout-flex--three_columns.tds-layout-flex--sidemenu>.tds-flex-item:first-child {
min-width: 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
}
}
@media (max-width:599px) {
.tds-flex-item {
inline-size: 100%;
min-width: 112px;
flex: 100%
}
.tds-flex-gutters {
-webkit-margin-before: 0;
margin-block-start: 0;
-webkit-margin-after: 0;
margin-block-end: 0
}
.tds-flex-gutters .tds-flex-item {
-webkit-padding-before: 0;
padding-block-start: 0
}
}
:root {
--tds-icon-width: 24px;
--tds-icon-height: 24px;
--tds-icon-bg_size: 100%;
--tds-icon-bg_color: transparent;
--tds-icon-bg_repeat: no-repeat;
--tds-icon-bg_position: center;
--tds-icon_size--jump: 20px
}
.tds-icon {
content: "";
display: block;
max-width: 100%;
inline-size: 24px;
inline-size: var(--tds-icon-width);
block-size: 24px;
block-size: var(--tds-icon-height);
background-size: 100%;
background-size: var(--tds-icon-bg_size);
background-color: transparent;
background-color: var(--tds-icon-bg_color);
background-repeat: no-repeat;
background-repeat: var(--tds-icon-bg_repeat);
background-position: 50%;
background-position: var(--tds-icon-bg_position);
text-indent: -9999px;
overflow: hidden
}
.tds-modal--is-open {
overflow: hidden
}
.tds-modal {
position: fixed;
top: auto;
left: 0;
right: 0;
bottom: 0;
inline-size: 100vw;
inline-size: var(--tds-modal-default-width);
block-size: auto;
block-size: var(--tds-modal-default-height);
max-block-size: calc(100vh - 24px);
max-block-size: var(--tds-modal--full-height);
padding: 0;
color: #393c41;
color: var(--tds-color--grey20);
overflow: auto;
border-radius: 8px 8px 0 0;
border-radius: var(--tds-modal-border-radius) var(--tds-modal-border-radius) 0 0;
border: none;
z-index: 1000;
box-shadow: 0 4px 32px 0 rgba(0, 0, 0, .5);
box-shadow: 0 var(--tds-size--half) var(--tds-size--4x) 0 rgba(0, 0, 0, .5)
}
.tds-modal--fullscreen {
top: 0;
block-size: 100vh;
border-radius: 0
}
.tds-scrim--black.tds-modal,
.tds-scrim--black .tds-modal {
color: #eee;
color: var(--tds-color--grey60)
}
.tds-modal:not([class*=tds-scrim--]) {
background-color: #fff;
background-color: var(--tds-color--white)
}
.tds-modal:not([open]) {
display: flex;
flex-direction: column;
opacity: 0;
pointer-events: none;
visibility: hidden;
transform: translateY(50%);
transition: opacity .5s ease, transform .5s cubic-bezier(.5, 0, 0, .75), visibility 0s .5s
}
.tds-modal[open] {
display: flex;
flex-direction: column;
opacity: 1;
pointer-events: inherit;
visibility: inherit;
transform: translateY(0);
transition: opacity .5s ease, transform .5s cubic-bezier(.5, 0, 0, .75), visibility 0s 0s
}
@media (max-width:599px) {
.tds-modal {
inline-size: 100vw!important;
inline-size: var(--tds-modal-default-width)!important;
block-size: auto!important;
block-size: var(--tds-modal-default-height)!important;
min-block-size: 25vh
}
.tds-modal--fullscreen {
block-size: 100vh!important;
max-block-size: 100vh!important
}
}
@media (min-width:600px) {
:root {
--tds-modal-default-width: 800px;
--tds-modal-default-height: auto
}
.tds-modal {
top: 50%;
left: 50%;
bottom: auto;
margin: 0;
max-inline-size: calc(100vw - 96px);
max-inline-size: calc(100vw - var(--tds-size--12x));
min-block-size: 64px;
min-block-size: var(--tds-size--8x);
max-block-size: calc(100vh - 96px);
max-block-size: calc(100vh - var(--tds-size--12x));
border-radius: 8px;
border-radius: var(--tds-modal-border-radius);
transform: translateY(-50%) translateX(-50%)
}
[dir=rtl] .tds-modal {
left: auto;
right: 50%
}
.tds-modal--fullscreen {
top: 0;
left: 0;
inline-size: 100vw;
max-width: 100vw;
block-size: 100vh;
max-height: 100vh;
border-radius: 0
}
.tds-modal--fullscreen+.tds-modal-backdrop {
display: none
}
.tds-modal:not([open]) {
transform: translateY(-45%) translateX(-50%)
}
.tds-modal--fullscreen:not([open]) {
transform: translateY(20px)
}
.tds-modal[open] {
transform: translateY(-50%) translateX(-50%)
}
.tds-modal--fullscreen[open] {
transform: translateY(0)
}
}
.tds-modal-backdrop {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
inline-size: 120vw;
block-size: 120vh;
background-color: hsla(0, 0%, 50.2%, .5);
z-index: 999;
transition: opacity .5s ease, -webkit-backdrop-filter .5s ease;
transition: opacity .5s ease, backdrop-filter .5s ease;
transition: opacity .5s ease, backdrop-filter .5s ease, -webkit-backdrop-filter .5s ease
}
.tds-modal::-webkit-backdrop {
display: none!important
}
.tds-modal::backdrop {
display: none!important
}
.tds-modal:not([open])+.tds-modal-backdrop {
opacity: 0;
-webkit-backdrop-filter: blur(0);
backdrop-filter: blur(0);
pointer-events: none
}
.tds-modal[open]+.tds-modal-backdrop {
opacity: 1;
pointer-events: inherit
}
.tds-modal-close,
.tds-modal[open]+.tds-modal-backdrop {
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px)
}
.tds-modal-close {
position: absolute;
top: 0;
right: 0;
padding: 16px;
padding: var(--tds-size--2x);
-webkit-margin-before: 8px;
-webkit-margin-before: var(--tds-size);
margin-block-start: 8px;
margin-block-start: var(--tds-size);
-webkit-margin-after: 0;
margin-block-end: 0;
-webkit-margin-end: 8px;
-webkit-margin-end: var(--tds-size);
margin-inline-end: 8px;
margin-inline-end: var(--tds-size);
-webkit-margin-start: 0;
margin-inline-start: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
background-color: hsla(0, 0%, 100%, .25);
cursor: pointer;
outline: none;
z-index: 10;
border-radius: 48px;
border-radius: var(--tds-size--6x);
transition: background-color .33s ease
}
[dir=rtl] .tds-modal-close {
right: auto;
left: 0
}
.tds-modal-close:focus,
.tds-modal-close:hover {
background-color: hsla(0, 0%, 88.2%, .5)
}
.tds-modal.tds-scrim--black .tds-modal-close {
background-color: rgba(0, 0, 0, .25)
}
.tds-modal.tds-scrim--black .tds-modal-close:focus,
.tds-modal.tds-scrim--black .tds-modal-close:hover {
background-color: rgba(60, 60, 60, .5)
}
.tds-modal-close-icon {
display: block;
block-size: 16px;
block-size: var(--tds-size--2x);
inline-size: 16px;
inline-size: var(--tds-size--2x);
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M98.2 2.7c2.4 2.4 2.4 8.4 0 12l-36 35.6 36 36.2c2.3 2.4 2.4 8.1.2 10.6l-.2.2c-3.6 3.6-9.5 3.6-12 0L50.5 62 14.6 97.3c-3.6 3.6-9.5 3.6-12 0C-.8 95-.8 89 2.7 86.5l36.2-36.2L2.7 14.7C-.8 11-1 5.3 2.5 2.8l.2-.1C5-1 11-1 14.7 2.7l35.7 36 35.9-36c2.4-3.6 8.3-3.6 12 0z"></path></svg>');
background-image: var(--tds-modal-close-icon-black);
background-repeat: no-repeat;
background-position: 50%
}
.tds-modal-close--alt .tds-modal-close-icon,
.tds-modal.tds-scrim--black .tds-modal-close-icon {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="white"><path d="M98.2 2.7c2.4 2.4 2.4 8.4 0 12l-36 35.6 36 36.2c2.3 2.4 2.4 8.1.2 10.6l-.2.2c-3.6 3.6-9.5 3.6-12 0L50.5 62 14.6 97.3c-3.6 3.6-9.5 3.6-12 0C-.8 95-.8 89 2.7 86.5l36.2-36.2L2.7 14.7C-.8 11-1 5.3 2.5 2.8l.2-.1C5-1 11-1 14.7 2.7l35.7 36 35.9-36c2.4-3.6 8.3-3.6 12 0z"></path></svg>');
background-image: var(--tds-modal-close-icon-white)
}
.tds-modal-footer :first-child,
.tds-modal-header :first-child {
-webkit-padding-before: 0;
padding-block-start: 0
}
.tds-modal-footer :last-child,
.tds-modal-header :last-child {
-webkit-padding-after: 0;
padding-block-end: 0
}
.tds-modal-header {
padding: 64px 32px 16px;
padding: var(--tds-size--8x) var(--tds-size--4x) var(--tds-size--2x);
transition: -webkit-padding-before .3s cubic-bezier(0, -.06, .45, .94);
transition: padding-block-start .3s cubic-bezier(0, -.06, .45, .94);
transition: padding-block-start .3s cubic-bezier(0, -.06, .45, .94), -webkit-padding-before .3s cubic-bezier(0, -.06, .45, .94)
}
.tds-modal-header h2 {
transition: font-size .1s cubic-bezier(0, -.06, .45, .94)
}
.tds-modal-footer {
padding: 16px 32px 64px;
padding: var(--tds-size--2x) var(--tds-size--4x) var(--tds-size--8x)
}
.tds-modal-content {
padding: 64px 32px 0;
padding: var(--tds-size--8x) var(--tds-size--4x) 0;
overflow-y: scroll
}
.tds-modal-header+.tds-modal-content {
-webkit-padding-before: 0;
padding-block-start: 0
}
.tds-modal-content:last-child {
-webkit-padding-after: 64px;
-webkit-padding-after: var(--tds-size--8x);
padding-block-end: 64px;
padding-block-end: var(--tds-size--8x)
}
@media (min-width:600px) {
.tds-modal-content,
.tds-modal-footer,
.tds-modal-header {
-webkit-padding-start: 64px;
-webkit-padding-start: var(--tds-size--8x);
padding-inline-start: 64px;
padding-inline-start: var(--tds-size--8x);
-webkit-padding-end: 64px;
-webkit-padding-end: var(--tds-size--8x);
padding-inline-end: 64px;
padding-inline-end: var(--tds-size--8x)
}
}
.tds-modal--header-up {
-webkit-padding-before: 16px;
-webkit-padding-before: var(--tds-size--2x);
padding-block-start: 16px;
padding-block-start: var(--tds-size--2x)
}
@media (max-width:599px) {
.tds-modal--toggle-font-size {
font-size: 20px;
font-size: var(--tds-font-size--50, 20px)
}
}
@media (min-width:600px) {
.tds-modal--toggle-font-size {
font-size: 24px;
font-size: var(--tds-font-size--60, 24px)
}
}
.tds-theme--replicant {
--tds-modal--full-width: calc(100vw - var(--tds-size--8x));
--tds-modal--full-height: calc(100vh - var(--tds-size--8x))
}
.tds-theme--replicant .tds-modal {
background-color: #000;
background-color: var(--tds-color--black);
border: 4px solid #fff;
border: 4px solid var(--tds-color--white);
box-shadow: none;
border-radius: 0;
color: #fff;
color: var(--tds-color--white);
filter: drop-shadow(0 0 6px rgba(255, 255, 255, .33));
top: 50%;
left: 50%;
bottom: auto;
transform: translateY(-50%) translateX(-50%)
}
@supports ((-webkit-clip-path:none) or (clip-path:none)) {
.tds-theme--replicant .tds-modal {
border: none;
background-color: transparent
}
.tds-theme--replicant .tds-modal:after,
.tds-theme--replicant .tds-modal:before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0
}
.tds-theme--replicant .tds-modal:before {
background-color: #fff;
background-color: var(--tds-color--white);
-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: #000;
background-color: var(--tds-color--black);
-webkit-clip-path: var(--tds-notch);
clip-path: var(--tds-notch);
opacity: 1;
z-index: -1
}
.tds-theme--replicant .tds-modal[open]:before {
-webkit-animation: turn-on-modal-before 1s forwards;
animation: turn-on-modal-before 1s forwards
}
@-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
}
}
}
@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: calc(100vh - 24px)!important;
block-size: var(--tds-modal--full-height)!important
}
}
@media (min-width:600px) {
.tds-theme--replicant .tds-modal--fullscreen {
inline-size: var(--tds-modal--full-width);
block-size: calc(100vh - 24px);
block-size: var(--tds-modal--full-height)
}
.tds-modal--fullscreen+.tds-modal-backdrop {
display: block
}
}
.tds-theme--replicant .tds-modal-close {
border-radius: 0;
background-color: transparent;
filter: drop-shadow(0 0 8px transparent)
}
.tds-theme--replicant .tds-modal-close:focus,
.tds-theme--replicant .tds-modal-close:hover {
filter: drop-shadow(0 0 8px #fff);
filter: drop-shadow(0 0 8px var(--tds-color--white))
}
.tds-theme--replicant .tds-scrim--black .tds-modal-close,
.tds-theme--replicant .tds-scrim--black .tds-modal-close:focus,
.tds-theme--replicant .tds-scrim--black .tds-modal-close:hover {
background-color: transparent
}
.tds-theme--replicant .tds-modal-close-icon {
block-size: 16px;
block-size: var(--tds-size--2x);
inline-size: 16px;
inline-size: var(--tds-size--2x);
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="white"><path d="M98.2 2.7c2.4 2.4 2.4 8.4 0 12l-36 35.6 36 36.2c2.3 2.4 2.4 8.1.2 10.6l-.2.2c-3.6 3.6-9.5 3.6-12 0L50.5 62 14.6 97.3c-3.6 3.6-9.5 3.6-12 0C-.8 95-.8 89 2.7 86.5l36.2-36.2L2.7 14.7C-.8 11-1 5.3 2.5 2.8l.2-.1C5-1 11-1 14.7 2.7l35.7 36 35.9-36c2.4-3.6 8.3-3.6 12 0z"></path></svg>');
background-image: var(--tds-modal-close-icon-white)
}
.tds-theme--replicant .tds-modal-backdrop {
background-color: rgba(0, 0, 0, .75)
}
:root {
--tds-search-button-size: var(--tds-size--5x);
--tds-search-icon-size: var(--tds-size--3x);
--tds-search-icon-padding: var(--tds-size--1x)
}
.tds-search {
display: inline-block;
position: relative;
inline-size: 100%;
transition-property: all;
transition-duration: .5s;
transition-timing-function: cubic-bezier(.5, .25, .25, .75)
}
.tds-search-container--align_right {
display: flex;
flex-direction: row-reverse
}
.tds-search-reset,
.tds-search-submit {
position: absolute;
top: 0;
display: flex;
flex-direction: column;
justify-content: center;
block-size: 40px;
block-size: var(--tds-search-button-size);
inline-size: 40px;
inline-size: var(--tds-search-button-size);
padding: 8px;
padding: var(--tds-search-icon-padding);
cursor: pointer;
background: transparent;
border: 0
}
.tds-search-reset {
fill: #5c5e62;
fill: var(--tds-color--grey30);
transition: visibility .3s cubic-bezier(.5, .25, .25, .75)
}
.tds-search-submit {
transition-property: all;
transition-duration: .5s;
transition-timing-function: cubic-bezier(.5, .25, .25, .75);
inline-size: 40px;
inline-size: var(--tds-search-button-size)
}
.tds-search-reset:focus,
.tds-search-submit:focus {
outline: none
}
.tds-search-icon {
inline-size: 24px;
inline-size: var(--tds-search-icon-size);
block-size: 24px;
block-size: var(--tds-search-icon-size)
}
.tds-search-reset .tds-search-icon {
inline-size: 16px;
inline-size: var(--tds-size--2x)
}
.tds-search-input {
-webkit-padding-start: 40px;
-webkit-padding-start: var(--tds-size--5x);
padding-inline-start: 40px;
padding-inline-start: var(--tds-size--5x);
-webkit-padding-end: 48px;
-webkit-padding-end: var(--tds-size--6x);
padding-inline-end: 48px;
padding-inline-end: var(--tds-size--6x);
transition: visibility .5s, padding .5s, color .3s ease .2s
}
.tds-search-input::-webkit-calendar-picker-indicator,
.tds-search-input::-webkit-clear-button,
.tds-search-input::-webkit-search-cancel-button,
.tds-search-input::-webkit-search-decoration,
.tds-search-input::-webkit-search-results-button,
.tds-search-input::-webkit-search-results-decoration {
display: none
}
.tds-search-input:focus {
border-color: #d0d1d2;
border-color: var(--tds-color--grey50)
}
.tds-search--open_left .tds-search-input {
-webkit-padding-start: 48px;
-webkit-padding-start: var(--tds-size--6x);
padding-inline-start: 48px;
padding-inline-start: var(--tds-size--6x);
-webkit-padding-end: 40px;
-webkit-padding-end: var(--tds-size--5x);
padding-inline-end: 40px;
padding-inline-end: var(--tds-size--5x)
}
.tds-search--closed.tds-search {
inline-size: 50px
}
.tds-search--closed .tds-search-reset {
visibility: hidden
}
.tds-search--open_left .tds-search-submit,
.tds-search--open_right .tds-search-reset {
left: 8px;
left: var(--tds-size);
right: auto
}
.tds-search--open_left .tds-search-reset,
.tds-search--open_right .tds-search-submit,
[dir=rtl] .tds-search--open_left .tds-search-submit,
[dir=rtl] .tds-search--open_right .tds-search-reset {
right: 8px;
right: var(--tds-size);
left: auto
}
[dir=rtl] .tds-search--open_left .tds-search-reset,
[dir=rtl] .tds-search--open_right .tds-search-submit {
left: 8px;
left: var(--tds-size);
right: auto
}
.tds-search--closed .tds-search-input {
visibility: hidden;
padding: 0;
border: 0;
color: transparent;
transition: visibility .5s, padding .5s
}
.tds-search-result-list {
background-color: #fff;
background-color: var(--tds-color--white);
border-radius: 0 0 20px 20px;
border-radius: 0 0 var(--tds-border-radius--forms) var(--tds-border-radius--forms);
box-shadow: inset 0 0 0 0 transparent;
overflow: hidden;
border: 1px solid #d0d1d2;
border: 1px solid var(--tds-color--grey50);
border-block-start-color: #eee;
border-block-start-color: var(--tds-color--grey60)
}
.tds-search-result {
cursor: pointer;
padding: 16px;
max-inline-size: none
}
.tds-search-result.selected {
background-color: #f4f4f4;
background-color: var(--tds-color--grey70);
outline: none
}
.tds-search-result-ul {
padding: 0;
margin: 0
}
.tds-search--result-open .tds-search-input {
border-radius: 20px 20px 0 0;
border-radius: var(--tds-border-radius--forms) var(--tds-border-radius--forms) 0 0;
-webkit-border-after: 0;
border-block-end: 0;
border-color: #d0d1d2;
border-color: var(--tds-color--grey50)
}
@media (-ms-high-contrast:active),
(-ms-high-contrast:none) {
.tds-search {
inline-size: 100%;
z-index: 1
}
.tds-search .tds-search-input {
background-color: #f4f4f4;
opacity: 1;
padding: 10px 48px 10px 24px;
inline-size: 100%;
z-index: 1
}
.tds-search .tds-search-submit {
z-index: 2
}
.tds-search .tds-search-submit .tds-icon-search {
background-size: 24px;
background-repeat: no-repeat;
block-size: 24px;
inline-size: 24px
}
}
:root {
--tds-nav-item-color: var(--tds-color--grey20);
--tds-nav-item-color--highlighted: var(--tds-color--grey10);
--tds-nav-item-padding: var(--tds-size--1x);
--tds-nav-item-width: auto;
--tds-transition-nav-item: color .33s ease, background-color .33s ease
}
.tds-site-nav-item {
display: inline-flex;
align-items: center;
padding: 8px;
padding: var(--tds-nav-item-padding);
inline-size: auto;
inline-size: var(--tds-nav-item-width);
border-radius: 100px;
border-radius: var(--tds-border-radius--pill);
transition: color .33s ease, background-color .33s ease;
transition: var(--tds-transition-nav-item);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
font-weight: 500;
font-family: Gotham Medium, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
font-family: var(--tds-font-combined--medium)
}
.tds-site-nav-item--small {
--tds-nav-item-padding: var(--tds-size--1x);
--tds-nav-item-width: auto
}
a.tds-site-nav-item {
transition: color .33s ease, background-color .33s ease;
transition: var(--tds-transition-nav-item);
box-shadow: none
}
button.tds-site-nav-item {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
cursor: pointer;
background-color: inherit;
line-height: inherit
}
.tds-site-nav-item:focus {
outline: none
}
.tds--indicate-focus .tds-site-nav-item:focus,
.tds-site-nav-item.tds--highlighted,
.tds-site-nav-item:hover {
--tds-nav-item-color: var(--tds-nav-item-color--highlighted);
background-color: hsla(0, 0%, 50.2%, .125)
}
.tds--indicate-focus .tds-site-nav-item:focus {
box-shadow: inset 0 0 0 2px hsla(0, 0%, 50.2%, .25)
}
.tds-animate--backdrop-backdrop {
display: none
}
@media (min-width:1200px) {
.tds-site-nav-item.tds-animate--backdrop,
.tds-site-nav-item.tds-animate--backdrop:focus {
background-color: transparent;
-webkit-backdrop-filter: unset;
backdrop-filter: unset
}
.tds-animate--backdrop-backdrop {
background-color: hsla(0, 0%, 50.2%, .125);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
display: block;
position: fixed;
border-radius: 100px;
border-radius: var(--tds-border-radius--pill);
top: 0;
top: var(--tds-animate-backdrop-top, 0);
left: 0;
left: var(--tds-animate-backdrop-left, 0);
block-size: 0;
block-size: var(--tds-animate-backdrop-height, 0);
inline-size: 0;
inline-size: var(--tds-animate-backdrop-width, 0);
visibility: var(--tds-animate-backdrop-visibility);
opacity: 0;
opacity: var(--tds-animate-backdrop-opacity, 0);
z-index: -1;
transition: opacity .5s ease, visibility 0s 0s;
transition: var(--tds-animate-backdrop-transition, opacity .5s ease, visibility 0s 0s)
}
}
.tds-site-nav-item .tds-icon {
display: inline-block;
vertical-align: middle;
block-size: 20px;
inline-size: 20px
}
.tds-site-nav-item-text {
-webkit-margin-start: 8px;
-webkit-margin-start: var(--tds-size--1x);
margin-inline-start: 8px;
margin-inline-start: var(--tds-size--1x);
-webkit-margin-end: 8px;
-webkit-margin-end: var(--tds-size--1x);
margin-inline-end: 8px;
margin-inline-end: var(--tds-size--1x);
color: #393c41;
color: var(--tds-nav-item-color);
transition: color .33s ease, background-color .33s ease;
transition: var(--tds-transition-nav-item)
}
.tds-site-nav-item .tds-site-nav-item-text+.tds-icon {
-webkit-margin-start: -8px;
margin-inline-start: -8px
}
@media (max-width:599px),
(min-width:600px) and (max-width:899px),
(min-width:900px) and (max-width:1199px) {
.tds-site-nav-item-text {
flex-grow: 1;
text-align: start
}
}
.tds-site-nav-items {
display: flex;
align-items: center;
margin: 0;
transition: transform .5s ease
}
.tds-site-header>.tds-site-nav-items {
min-height: 48px;
min-height: var(--tds-site-header--height)
}
.tds-tooltip-content .tds-site-nav-items {
flex-direction: column;
align-items: flex-start
}
.tds-site-nav-items .tds-list-item {
padding: 0;
outline: none
}
:root {
--tds-site-header--height: var(--tds-size--6x)
}
.tds-site-header {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
position: relative;
z-index: 10
}
.tds--fade-in {
-webkit-animation: fade-in 1s ease;
animation: fade-in 1s ease;
opacity: 1
}
@-webkit-keyframes fade-in {
0% {
opacity: 0
}
to {
opacity: 1
}
}
@keyframes fade-in {
0% {
opacity: 0
}
to {
opacity: 1
}
}
.tds-site-header--sticky {
position: -webkit-sticky;
position: sticky;
top: 0
}
.tds-site-header .tds-align--start {
justify-content: flex-start
}
.tds-site-header .tds-align--center,
.tds-site-header .tds-align--start {
-webkit-padding-start: 8px;
-webkit-padding-start: var(--tds-size--1x);
padding-inline-start: 8px;
padding-inline-start: var(--tds-size--1x)
}
.tds-site-header .tds-align--center {
justify-content: center;
flex-grow: 1
}
.tds-site-header .tds-align--center,
.tds-site-header .tds-align--end {
-webkit-padding-end: 8px;
-webkit-padding-end: var(--tds-size--1x);
padding-inline-end: 8px;
padding-inline-end: var(--tds-size--1x)
}
.tds-site-header .tds-align--end {
justify-content: flex-end
}
@media (min-width:1200px) {
.tds-site-nav--flyout {
display: flex;
justify-content: flex-end;
flex-grow: 1
}
.tds-site-nav--center {
grid-area: center
}
.tds-site-nav--end {
grid-area: end
}
}
.tds-scrim--black,
.tds-site-header--dark,
.tds-theme--replicant {
--tds-nav-item-color: var(--tds-color--grey70);
--tds-nav-item-color--highlighted: var(--tds-color--white);
--tds-icon-fill-secondary: var(--tds-color--white);
--tds-heading--color: var(--tds-color--grey70)
}
:root {
--tds-icon-fill-secondary: var(--tds-color--grey20)
}
.tds-icon-fill--secondary {
fill: #393c41;
fill: var(--tds-icon-fill-secondary)
}
.tds-list--horizontal>.tds-list-item:not(:first-of-type) {
-webkit-padding-start: 11px;
-webkit-padding-start: calc(10px + var(--tds-list-separator_width));
padding-inline-start: 11px;
padding-inline-start: calc(10px + var(--tds-list-separator_width));
-webkit-margin-start: 10px;
margin-inline-start: 10px
}
.tds-site-header .tds-list--horizontal .tds-list .tds-list-item:not(:first-of-type) {
-webkit-padding-start: inherit;
padding-inline-start: inherit;
-webkit-margin-start: inherit;
margin-inline-start: inherit
}
.tds-list * * .tds-tooltip-content:last-child {
-webkit-padding-after: 24px;
-webkit-padding-after: var(--tds-size--3x);
padding-block-end: 24px;
padding-block-end: var(--tds-size--3x)
}
.tds-list * * .tds-site-nav-item:last-child {
-webkit-padding-after: 8px;
-webkit-padding-after: var(--tds-size--1x);
padding-block-end: 8px;
padding-block-end: var(--tds-size--1x)
}
.tds-site-nav-items .tds-tooltip {
block-size: auto;
-webkit-margin-start: 0;
margin-inline-start: 0
}
.tds-site-nav-item.tds-tooltip-trigger {
padding: 8px;
padding: var(--tds-size--1x)
}
@media (min-width:1200px) {
:root {
--tds-tooltip-overflow-width: 100%;
--tds-tooltip-overflow-height: calc(100% + var(--tds-size--3x))
}
.tds-site-nav-items .tds-tooltip.active .tds-tooltip-trigger:before,
.tds-site-nav-items .tds-tooltip:focus-within .tds-tooltip-trigger:before,
.tds-site-nav-items .tds-tooltip:hover .tds-tooltip-trigger:before {
inline-size: var(--tds-tooltip-overflow-width);
block-size: var(--tds-tooltip-overflow-height)
}
}
:root {
--tds-shadow--off: 0 0 0 0 hsla(0, 0%, 50.2%, 0.125);
--tds-shadow--on: 0 0 16px 0 rgba(0, 0, 0, 0.25);
--tds-site-nav--flyout-width: 312px;
--tds-site-nav--flyout-height: 0;
--tds-bezier: cubic-bezier(.75, 0, 0, 1)
}
.tds-site-nav--flyout:focus-within,
.tds-site-nav--flyout[aria-expanded=true] {
--tds-nav-item-color: var(--tds-color--grey20);
--tds-nav-item-color--highlighted: var(--tds-color--grey10);
--tds-icon-fill-secondary: var(--tds-color--grey20);
--tds-heading--color: var(--tds-color--grey10)
}
.tds-site-nav--flyout-backdrop {
background-color: transparent;
-webkit-backdrop-filter: blur(0);
backdrop-filter: blur(0);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: pointer;
pointer-events: none;
transition: .5s ease;
z-index: -5
}
.tds-site-header:focus-within .tds-site-nav--flyout-backdrop,
.tds-site-header:hover .tds-site-nav--flyout-backdrop {
will-change: transform, backdrop-filter
}
.tds-site-nav--flyout-backdrop[aria-expanded=true] {
background-color: hsla(0, 0%, 50.2%, .25);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
pointer-events: inherit;
transform: translateX(0)
}
@media (max-width:599px),
(min-width:600px) and (max-width:899px),
(min-width:900px) and (max-width:1199px) {
:root {
--tds-nav-controls-height: 80px;
--tds-shadow--off: 0 0 0 0 hsla(0, 0%, 50.2%, 0.125);
--tds-shadow--on: 0 0 16px 0 rgba(0, 0, 0, 0.25);
--tds-site-nav--flyout-width: 312px;
--tds-site-nav--flyout-height: 0
}
.tds-site-nav--flyout {
--tds-nav-item-padding: var(--tds-size--2x);
position: fixed;
top: 0;
right: 0;
bottom: 0;
overflow-x: hidden;
overflow-y: auto;
background-color: #fff;
background-color: var(--tds-color--white);
box-shadow: 0 0 0 0 hsla(0, 0%, 50.2%, .125);
box-shadow: var(--tds-shadow--off);
max-width: calc(100vw - 40px);
max-width: calc(100vw - var(--tds-size--5x));
inline-size: 312px;
inline-size: var(--tds-site-nav--flyout-width);
transform: translateX(312px);
transform: translateX(var(--tds-site-nav--flyout-width));
visibility: hidden;
transition: transform .5s ease, visibility .5s;
z-index: 110
}
.tds-site-header:focus-within .tds-site-nav--flyout,
.tds-site-header:hover .tds-site-nav--flyout {
will-change: transform
}
.tds-banner+.tds-site-header .tds-site-nav--flyout {
top: var(--tds-site-banner--height)
}
.tds-site-nav--flyout-backdrop {
z-index: 105
}
.tds-site-nav--flyout[aria-expanded=true] {
box-shadow: 0 0 16px 0 rgba(0, 0, 0, .25);
box-shadow: var(--tds-shadow--on);
transform: translateX(0);
visibility: inherit;
transition: transform .5s cubic-bezier(.75, 0, 0, 1), visibility 0s;
transition: transform .5s var(--tds-bezier), visibility 0s
}
.tds-site-nav-controls {
display: flex;
flex-flow: row-reverse nowrap;
justify-content: space-between;
align-items: center;
padding: 16px;
padding: var(--tds-size--2x);
block-size: var(--tds-nav-controls-height)
}
.tds-site-nav-controls .tds-icon.tds-icon--close {
inline-size: 16px;
inline-size: var(--tds-size--2x);
block-size: 16px;
block-size: var(--tds-size--2x);
margin: 0
}
.tds-site-nav-content {
position: absolute;
top: var(--tds-nav-controls-height);
left: 0;
right: 0;
bottom: 0
}
.tds-site-nav-content .tds-locale-selector-region {
-moz-column-count: 1;
column-count: 1
}
.tds-site-nav-content[data-tds-tier="1"] {
overflow-y: auto
}
.tds-site-nav-content[aria-expanded=false],
.tds-site-nav-item[aria-expanded=false] {
opacity: 0;
transform: translateX(-24px);
visibility: hidden;
pointer-events: none;
transition: color .33s ease, background-color .33s ease, opacity .5s cubic-bezier(.75, 0, 0, 1), transform .5s cubic-bezier(.75, 0, 0, 1), visibility 0s .5s, -webkit-backdrop-filter .33s ease;
transition: color .33s ease, background-color .33s ease, opacity .5s var(--tds-bezier), transform .5s var(--tds-bezier), visibility 0s .5s, -webkit-backdrop-filter .33s ease;
transition: color .33s ease, backdrop-filter .33s ease, background-color .33s ease, opacity .5s cubic-bezier(.75, 0, 0, 1), transform .5s cubic-bezier(.75, 0, 0, 1), visibility 0s .5s;
transition: color .33s ease, backdrop-filter .33s ease, background-color .33s ease, opacity .5s var(--tds-bezier), transform .5s var(--tds-bezier), visibility 0s .5s;
transition: color .33s ease, backdrop-filter .33s ease, background-color .33s ease, opacity .5s cubic-bezier(.75, 0, 0, 1), transform .5s cubic-bezier(.75, 0, 0, 1), visibility 0s .5s, -webkit-backdrop-filter .33s ease;
transition: color .33s ease, backdrop-filter .33s ease, background-color .33s ease, opacity .5s var(--tds-bezier), transform .5s var(--tds-bezier), visibility 0s .5s, -webkit-backdrop-filter .33s ease
}
.tds-site-nav-content[aria-expanded=true]~.tds-site-nav-content[aria-expanded=false],
[data-tds-breadcrumb][aria-expanded=false] {
transform: translateX(24px);
transform: translateX(var(--tds-size--3x))
}
.tds-site-nav-item[data-tds-breadcrumb][aria-expanded=false] {
transition: color .33s ease, background-color .33s ease, opacity .5s cubic-bezier(.75, 0, 0, 1), transform .5s cubic-bezier(.75, 0, 0, 1) .125s, visibility 0s .5s, -webkit-backdrop-filter .33s ease;
transition: color .33s ease, background-color .33s ease, opacity .5s var(--tds-bezier), transform .5s var(--tds-bezier) .125s, visibility 0s .5s, -webkit-backdrop-filter .33s ease;
transition: color .33s ease, backdrop-filter .33s ease, background-color .33s ease, opacity .5s cubic-bezier(.75, 0, 0, 1), transform .5s cubic-bezier(.75, 0, 0, 1) .125s, visibility 0s .5s;
transition: color .33s ease, backdrop-filter .33s ease, background-color .33s ease, opacity .5s var(--tds-bezier), transform .5s var(--tds-bezier) .125s, visibility 0s .5s;
transition: color .33s ease, backdrop-filter .33s ease, background-color .33s ease, opacity .5s cubic-bezier(.75, 0, 0, 1), transform .5s cubic-bezier(.75, 0, 0, 1) .125s, visibility 0s .5s, -webkit-backdrop-filter .33s ease;
transition: color .33s ease, backdrop-filter .33s ease, background-color .33s ease, opacity .5s var(--tds-bezier), transform .5s var(--tds-bezier) .125s, visibility 0s .5s, -webkit-backdrop-filter .33s ease
}
.tds-site-nav-content[aria-expanded=true],
.tds-site-nav-item[aria-expanded=true] {
opacity: 1;
transform: translateX(0);
visibility: inherit;
transition: color .33s ease, background-color .33s ease, opacity .5s cubic-bezier(.75, 0, 0, 1), transform .5s cubic-bezier(.75, 0, 0, 1), visibility 0s 0s, -webkit-backdrop-filter .33s ease;
transition: color .33s ease, background-color .33s ease, opacity .5s var(--tds-bezier), transform .5s var(--tds-bezier), visibility 0s 0s, -webkit-backdrop-filter .33s ease;
transition: color .33s ease, backdrop-filter .33s ease, background-color .33s ease, opacity .5s cubic-bezier(.75, 0, 0, 1), transform .5s cubic-bezier(.75, 0, 0, 1), visibility 0s 0s;
transition: color .33s ease, backdrop-filter .33s ease, background-color .33s ease, opacity .5s var(--tds-bezier), transform .5s var(--tds-bezier), visibility 0s 0s;
transition: color .33s ease, backdrop-filter .33s ease, background-color .33s ease, opacity .5s cubic-bezier(.75, 0, 0, 1), transform .5s cubic-bezier(.75, 0, 0, 1), visibility 0s 0s, -webkit-backdrop-filter .33s ease;
transition: color .33s ease, backdrop-filter .33s ease, background-color .33s ease, opacity .5s var(--tds-bezier), transform .5s var(--tds-bezier), visibility 0s 0s, -webkit-backdrop-filter .33s ease
}
.tds-site-nav-item[data-tds-breadcrumb][aria-expanded=true] {
transition: color .33s ease, background-color .33s ease, opacity .5s cubic-bezier(.75, 0, 0, 1) .125s, transform .5s cubic-bezier(.75, 0, 0, 1) .125s, visibility 0s 0s, -webkit-backdrop-filter .33s ease;
transition: color .33s ease, background-color .33s ease, opacity .5s var(--tds-bezier) .125s, transform .5s var(--tds-bezier) .125s, visibility 0s 0s, -webkit-backdrop-filter .33s ease;
transition: color .33s ease, backdrop-filter .33s ease, background-color .33s ease, opacity .5s cubic-bezier(.75, 0, 0, 1) .125s, transform .5s cubic-bezier(.75, 0, 0, 1) .125s, visibility 0s 0s;
transition: color .33s ease, backdrop-filter .33s ease, background-color .33s ease, opacity .5s var(--tds-bezier) .125s, transform .5s var(--tds-bezier) .125s, visibility 0s 0s;
transition: color .33s ease, backdrop-filter .33s ease, background-color .33s ease, opacity .5s cubic-bezier(.75, 0, 0, 1) .125s, transform .5s cubic-bezier(.75, 0, 0, 1) .125s, visibility 0s 0s, -webkit-backdrop-filter .33s ease;
transition: color .33s ease, backdrop-filter .33s ease, background-color .33s ease, opacity .5s var(--tds-bezier) .125s, transform .5s var(--tds-bezier) .125s, visibility 0s 0s, -webkit-backdrop-filter .33s ease
}
.tds-site-nav-content-block[aria-expanded=false] {
visibility: hidden
}
.tds-site-nav-content-block[aria-expanded=true] {
visibility: inherit
}
.tds-site-nav-content-block {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow-y: auto
}
.tds-site-nav--flyout .tds-site-nav-items {
flex-flow: column;
align-items: stretch;
padding: 0 8px;
padding: 0 var(--tds-size--1x);
margin: 0
}
.tds-site-nav--flyout .tds-site-nav-items:last-child {
-webkit-margin-after: 64px;
-webkit-margin-after: var(--tds-size--8x);
margin-block-end: 64px;
margin-block-end: var(--tds-size--8x)
}
.tds-site-nav-content .tds-site-nav-item {
inline-size: 100%;
outline: none
}
.tds-site-nav-content img {
max-width: 100%
}
}
@media (min-width:1200px) {
:root {
--tds-nav-controls-height: 48px
}
.tds-site-nav--flyout {
padding: 0;
position: static;
justify-content: flex-end;
z-index: -1
}
.tds-site-nav--flyout .tds-site-nav-items {
flex-flow: row nowrap
}
.tds-site-nav-controls {
position: absolute;
top: 48px;
top: var(--tds-site-header--height);
left: 8px;
left: var(--tds-size--1x)
}
.tds-site-nav--flyout[aria-expanded=false] .tds-site-nav-controls {
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .5s cubic-bezier(.75, 0, 0, 1), visibility 0s .5s;
transition: opacity .5s var(--tds-bezier), visibility 0s .5s
}
.tds-site-nav--flyout[aria-expanded=true] .tds-site-nav-controls {
opacity: 1;
visibility: inherit;
pointer-events: inherit;
transition: opacity .5s cubic-bezier(.75, 0, 0, 1), visibility 0s 0s;
transition: opacity .5s var(--tds-bezier), visibility 0s 0s
}
.tds-site-nav-content {
display: flex;
flex-grow: 1
}
.tds-site-nav-content[data-tds-tier="1"] {
inline-size: 100%
}
.tds-site-nav-content[data-tds-tier]:not([data-tds-tier="1"]) {
position: absolute;
top: 0;
left: 0;
right: 0;
max-height: calc(85vh - 48px);
max-height: calc(85vh - var(--tds-site-header--height));
block-size: 48px;
block-size: calc(var(--tds-site-nav--flyout-height) + var(--tds-site-header--height));
background-color: #fff;
background-color: var(--tds-color--white);
box-shadow: 0 0 16px 0 rgba(0, 0, 0, .25);
box-shadow: var(--tds-shadow--on);
z-index: -2;
opacity: 0;
overflow: hidden;
transform: translateY(-24px);
visibility: hidden;
transition: opacity .5s cubic-bezier(.75, 0, 0, 1), transform .5s cubic-bezier(.75, 0, 0, 1), visibility 0s .5s, height .5s cubic-bezier(.75, 0, 0, 1);
transition: opacity .5s var(--tds-bezier), transform .5s var(--tds-bezier), visibility 0s .5s, height .5s var(--tds-bezier)
}
.tds-site-nav-content[data-tds-tier]:not([data-tds-tier="1"])[aria-expanded=true],
[data-tds-tier="1"]:focus-within+.tds-site-nav-content[data-tds-tier]:not([data-tds-tier="1"]),
[data-tds-tier="1"]:hover+.tds-site-nav-content[data-tds-tier]:not([data-tds-tier="1"]) {
opacity: 1;
transform: translateY(0);
visibility: inherit;
transition: opacity .5s cubic-bezier(.75, 0, 0, 1), transform .5s cubic-bezier(.75, 0, 0, 1), visibility 0s 0s, height .5s cubic-bezier(.75, 0, 0, 1);
transition: opacity .5s var(--tds-bezier), transform .5s var(--tds-bezier), visibility 0s 0s, height .5s var(--tds-bezier)
}
.tds-site-nav-content-block {
position: absolute;
top: 48px;
top: var(--tds-site-header--height);
left: 0;
right: 0;
padding: 0 16px;
padding: 0 var(--tds-size--2x);
overflow-y: auto;
max-height: calc(85vh - 96px);
max-height: calc(85vh - var(--tds-site-header--height) - var(--tds-site-header--height, 0))
}
.tds-site-nav-content-block[aria-expanded=false],
[data-tds-breadcrumb][aria-expanded=false] {
opacity: 0;
transform: translateX(-24px);
visibility: hidden;
transition: color .33s ease, background-color .33s ease, opacity .5s cubic-bezier(.75, 0, 0, 1), transform .5s cubic-bezier(.75, 0, 0, 1), visibility 0s .5s, -webkit-backdrop-filter .33s ease;
transition: color .33s ease, background-color .33s ease, opacity .5s var(--tds-bezier), transform .5s var(--tds-bezier), visibility 0s .5s, -webkit-backdrop-filter .33s ease;
transition: color .33s ease, backdrop-filter .33s ease, background-color .33s ease, opacity .5s cubic-bezier(.75, 0, 0, 1), transform .5s cubic-bezier(.75, 0, 0, 1), visibility 0s .5s;
transition: color .33s ease, backdrop-filter .33s ease, background-color .33s ease, opacity .5s var(--tds-bezier), transform .5s var(--tds-bezier), visibility 0s .5s;
transition: color .33s ease, backdrop-filter .33s ease, background-color .33s ease, opacity .5s cubic-bezier(.75, 0, 0, 1), transform .5s cubic-bezier(.75, 0, 0, 1), visibility 0s .5s, -webkit-backdrop-filter .33s ease;
transition: color .33s ease, backdrop-filter .33s ease, background-color .33s ease, opacity .5s var(--tds-bezier), transform .5s var(--tds-bezier), visibility 0s .5s, -webkit-backdrop-filter .33s ease
}
.tds-site-nav-content-block[aria-expanded=true]~.tds-site-nav-content-block[aria-expanded=false],
[data-tds-breadcrumb][aria-expanded=false] {
transform: translateX(24px);
transform: translateX(var(--tds-size--3x))
}
.tds-site-nav-content[aria-expanded=false]>.tds-site-nav-content-block {
transform: translateX(0)
}
.tds-site-nav-content-block[aria-expanded=true],
[data-tds-breadcrumb][aria-expanded=true] {
opacity: 1;
transform: translateX(0);
visibility: inherit;
transition: color .33s ease, background-color .33s ease, opacity .5s cubic-bezier(.75, 0, 0, 1), transform .5s cubic-bezier(.75, 0, 0, 1), visibility 0s 0s, -webkit-backdrop-filter .33s ease;
transition: color .33s ease, background-color .33s ease, opacity .5s var(--tds-bezier), transform .5s var(--tds-bezier), visibility 0s 0s, -webkit-backdrop-filter .33s ease;
transition: color .33s ease, backdrop-filter .33s ease, background-color .33s ease, opacity .5s cubic-bezier(.75, 0, 0, 1), transform .5s cubic-bezier(.75, 0, 0, 1), visibility 0s 0s;
transition: color .33s ease, backdrop-filter .33s ease, background-color .33s ease, opacity .5s var(--tds-bezier), transform .5s var(--tds-bezier), visibility 0s 0s;
transition: color .33s ease, backdrop-filter .33s ease, background-color .33s ease, opacity .5s cubic-bezier(.75, 0, 0, 1), transform .5s cubic-bezier(.75, 0, 0, 1), visibility 0s 0s, -webkit-backdrop-filter .33s ease;
transition: color .33s ease, backdrop-filter .33s ease, background-color .33s ease, opacity .5s var(--tds-bezier), transform .5s var(--tds-bezier), visibility 0s 0s, -webkit-backdrop-filter .33s ease
}
}
.tds-site-logo-link+.tds-site-app-title {
padding: 0;
border-inline-start-width: 1px;
border-inline-start-style: solid;
border-inline-start-color: #171a20;
border-inline-start-color: var(--tds-heading--color);
-webkit-margin-start: 11px;
-webkit-margin-start: calc(var(--tds-size--1x) + 3px);
margin-inline-start: 11px;
margin-inline-start: calc(var(--tds-size--1x) + 3px);
-webkit-padding-start: 16px;
-webkit-padding-start: var(--tds-size--2x);
padding-inline-start: 16px;
padding-inline-start: var(--tds-size--2x)
}
.tds-site-logo {
display: flex;
align-items: center
}
h1.tds-site-logo {
padding: 0
}
.tds-icon.tds-site-logo-icon {
inline-size: 120px
}
.tds-icon.tds-site-logo-icon path {
transition: fill .33s ease
}
.tds-site-header>.tds-site-logo {
min-height: 48px;
min-height: var(--tds-site-header--height)
}
.tds-site-logo-link {
display: inline-flex;
padding: 0 8px;
padding: 0 var(--tds-size--1x);
box-shadow: none
}
.tds-site-logo-link,
.tds-site-logo-link:hover {
box-shadow: none
}
@media (min-width:1200px) {
.tds-site-header[aria-expanded=true] .tds-site-logo {
--tds-icon-fill-secondary: var(--tds-color--grey20)
}
}
.tds-locale-selector {
justify-content: center;
display: flex
}
.tds-locale-selector-trigger {
--tds-icon-width: 20px;
--tds-icon-height: 20px;
display: flex;
cursor: pointer;
background-color: transparent;
transition: background-color .3s ease
}
button.tds-locale-selector-trigger {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
inline-size: calc(100% - 16px);
inline-size: calc(100% - var(--tds-size--2x));
inline-size: -webkit-fill-available;
text-align: start
}
.tds-locale-selector-superregion {
padding: 24px;
padding: var(--tds-size--3x)
}
.tds-locale-selector-region {
-moz-column-count: 2;
column-count: 2;
-moz-column-gap: 16px;
-moz-column-gap: var(--tds-size--2x);
column-gap: 16px;
column-gap: var(--tds-size--2x);
-webkit-margin-start: -16px;
margin-inline-start: -16px
}
.tds-locale-selector-country {
-webkit-margin-after: 8px;
-webkit-margin-after: var(--tds-size--1x);
margin-block-end: 8px;
margin-block-end: var(--tds-size--1x);
-moz-column-break-inside: avoid;
break-inside: avoid;
transition: background-color .3s ease
}
.tds-locale-selector-country.tds--hover,
.tds-locale-selector-country:focus-within,
.tds-locale-selector-country:hover,
.tds-locale-selector-trigger.tds--hover,
.tds-locale-selector-trigger:focus,
.tds-locale-selector-trigger:hover {
background-color: #f4f4f4;
background-color: var(--tds-color--grey70)
}
.tds-locale-selector-trigger:focus {
outline: none
}
.tds--indicate-focus .tds-locale-selector-trigger:focus {
box-shadow: inset 0 0 0 2px hsla(0, 0%, 50.2%, .25)
}
.tds-locale-selector-country--selected {
background-color: #f4f4f4;
background-color: var(--tds-color--grey70)
}
.tds-locale-selector-language:not(:last-child) {
-webkit-margin-end: 16px;
-webkit-margin-end: var(--tds-size--2x);
margin-inline-end: 16px;
margin-inline-end: var(--tds-size--2x)
}
.tds-locale-selector-language--selected {
color: #171a20;
color: var(--tds-color--grey10);
pointer-events: none
}
@media (max-width:1240px) {
.tds-locale-selector {
padding: 0 16px;
padding: 0 var(--tds-size--2x);
flex-direction: column;
justify-content: start
}
.tds-locale-selector-column {
inline-size: 100%;
max-width: 700px;
margin: auto
}
.tds-locale-selector-region {
-webkit-margin-end: -16px;
margin-inline-end: -16px
}
}
@media (max-width:599px) {
.tds-locale-selector-superregion {
-webkit-padding-before: 0;
padding-block-start: 0
}
.tds-locale-selector-region {
-moz-column-count: 1;
column-count: 1
}
}
.tds-country--cn,
.tds-country--jp,
.tds-country--kr,
.tds-country--tw,
.tds-lang--ja,
.tds-lang--ko,
.tds-lang--zh {
--tds-heading--font_weight: 700
}
.tds-card>:first-child {
-webkit-padding-before: 0;
padding-block-start: 0;
-webkit-margin-before: 0;
margin-block-start: 0
}
.tds-card.tds-locale-selector-country>.tds-list {
margin: 0
}
.tds-card>:last-child {
-webkit-padding-after: 0;
padding-block-end: 0;
-webkit-margin-after: 0;
margin-block-end: 0
}
.tds-card>.tds-icon+.tds-card-body {
-webkit-margin-start: 8px;
-webkit-margin-start: var(--tds-size--1x);
margin-inline-start: 8px;
margin-inline-start: var(--tds-size--1x)
}
:root {
--tds-card--border-radius: var(--tds-size--1x);
--tds-card--padding: var(--tds-size--2x)
}
.tds-card {
padding: 16px;
padding: var(--tds-size--2x);
border-radius: 8px;
border-radius: var(--tds-card--border-radius)
}
:root {
--footer-text-color: var(--tds-color--grey30);
--footer-alignment-direction: center;
--footer-flex-flow: row wrap;
--footer-text-alignment: center;
--tds-footer-font-size: var(--tds-font-size--20);
--tds-footer-line-height: var(--tds-line-height--unitless)
}
.tds-site-footer {
display: flex;
align-items: center;
justify-content: center;
justify-content: var(--footer-alignment-direction);
align-content: center;
flex-flow: row wrap;
flex-flow: var(--footer-flex-flow);
text-align: center;
text-align: var(--footer-text-alignment);
font-size: 12px;
font-size: var(--tds-footer-font-size);
line-height: 1.414;
line-height: var(--tds-footer-line-height)
}
.tds-site-footer--align_start {
--footer-alignment-direction: flex-start;
--footer-text-alignment: start
}
.tds-site-footer .tds-list {
display: flex;
align-items: center;
justify-content: center;
justify-content: var(--footer-alignment-direction);
align-content: center;
text-align: center;
text-align: var(--footer-text-alignment);
flex-flow: row wrap;
flex-flow: var(--footer-flex-flow)
}
@media (min-width:600px) {
.tds-site-footer .tds-list {
margin: 0
}
}
.tds-site-footer .tds-list-item {
margin: 0;
font-family: Gotham Medium, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
font-family: var(--tds-font-combined--medium);
color: #5c5e62;
color: var(--footer-text-color);
font-size: 12px;
font-size: var(--tds-footer-font-size);
line-height: 1.414;
line-height: var(--tds-footer-line-height)
}
@media (min-width:600px) {
.tds-site-footer .tds-list-item {
padding: 8px 16px 8px 0;
padding: var(--tds-size--1x) var(--tds-size--2x) var(--tds-size--1x) 0
}
.tds-site-footer .tds-list-item:first-child {
-webkit-padding-before: 8px;
-webkit-padding-before: var(--tds-size--1x);
padding-block-start: 8px;
padding-block-start: var(--tds-size--1x)
}
}
.tds-scrim--black {
--footer-text-color: var(--tds-color--grey70)
}
.tds-site-footer .tds-link,
.tds-site-footer .tds-link:hover {
box-shadow: unset
}
.tds-site-footer .tds-link:hover {
--footer-text-color: var(--tds-color--black)
}
.tds-scrim--black .tds-site-footer .tds-link:hover {
--footer-text-color: var(--tds-color--white)
}
.tds-site-footer .tds-footer-nav,
.tds-site-footer .tds-list--horizontal {
margin: 0;
padding: 0
}
@media (max-width:599px) {
.tds-site-footer {
--footer-flex-flow: column nowrap
}
}
.tds-theme--replicant .tds-site-footer .tds-list-item {
color: var(--tds-color--text-normal)
}
:root {
--tds-tab-vertical-padding: calc(var(--tds-size) + var(--tds-size--half));
--tds-transition--tab: background-color .3s ease, box-shadow .3s ease, color .3s ease;
--tds-tabs-height: 32px
}
.tds-tabs {
position: relative;
margin: 8px 0;
margin: var(--tds-size) 0
}
.tds-tab-list {
position: relative;
display: flex;
inline-size: calc(100% + 8px);
margin: 0 -4px;
padding: 0;
z-index: 1;
overflow-x: auto
}
.tds-tabs[data-can-scroll] .tds-tab-list {
scrollbar-width: none;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
-ms-scroll-snap-type: x mandatory;
scroll-snap-type: x mandatory
}
.tds-tabs[data-can-scroll] .tds-tab-list::-webkit-scrollbar {
display: none
}
.tds-tabs[data-can-scroll]:after {
content: "";
display: block;
position: absolute;
right: -4px;
left: -4px;
top: 0;
pointer-events: none;
z-index: 1;
transition: box-shadow .33s ease;
block-size: 40px;
block-size: calc(var(--tds-tabs-height) + var(--tds-size--half)*2)
}
.tds-tabs[data-can-scroll=both]:after {
box-shadow: inset -80px 0 30px -30px #fff, inset 80px 0 30px -30px #fff;
box-shadow: inset -80px 0 30px -30px var(--tds-color--white), inset 80px 0 30px -30px var(--tds-color--white)
}
.tds-tabs[data-can-scroll=left]:after {
box-shadow: inset -40px 0 30px -30px transparent, inset 80px 0 30px -30px #fff;
box-shadow: inset -40px 0 30px -30px transparent, inset 80px 0 30px -30px var(--tds-color--white)
}
.tds-tabs[data-can-scroll=right]:after {
box-shadow: inset -80px 0 30px -30px #fff, inset 40px 0 30px -30px transparent;
box-shadow: inset -80px 0 30px -30px var(--tds-color--white), inset 40px 0 30px -30px transparent
}
.tds-scrim--light .tds-tabs[data-can-scroll=both]:after {
box-shadow: inset -80px 0 30px -30px #f4f4f4, inset 80px 0 30px -30px #f4f4f4;
box-shadow: inset -80px 0 30px -30px var(--tds-color--grey70), inset 80px 0 30px -30px var(--tds-color--grey70)
}
.tds-scrim--light .tds-tabs[data-can-scroll=left]:after {
box-shadow: inset -40px 0 30px -30px transparent, inset 80px 0 30px -30px #f4f4f4;
box-shadow: inset -40px 0 30px -30px transparent, inset 80px 0 30px -30px var(--tds-color--grey70)
}
.tds-scrim--light .tds-tabs[data-can-scroll=right]:after {
box-shadow: inset -80px 0 30px -30px #f4f4f4, inset 40px 0 30px -30px transparent;
box-shadow: inset -80px 0 30px -30px var(--tds-color--grey70), inset 40px 0 30px -30px transparent
}
.tds-scrim--black .tds-tabs[data-can-scroll=both]:after {
box-shadow: inset -80px 0 30px -30px #000, inset 80px 0 30px -30px #000;
box-shadow: inset -80px 0 30px -30px var(--tds-color--black), inset 80px 0 30px -30px var(--tds-color--black)
}
.tds-scrim--black .tds-tabs[data-can-scroll=left]:after {
box-shadow: inset -40px 0 30px -30px transparent, inset 80px 0 30px -30px #000;
box-shadow: inset -40px 0 30px -30px transparent, inset 80px 0 30px -30px var(--tds-color--black)
}
.tds-scrim--black .tds-tabs[data-can-scroll=right]:after {
box-shadow: inset -80px 0 30px -30px #000, inset 40px 0 30px -30px transparent;
box-shadow: inset -80px 0 30px -30px var(--tds-color--black), inset 40px 0 30px -30px transparent
}
.tds-tabs[data-scroll-direction] .tds-tab-list>.tds-tab:last-child:after {
content: "";
position: absolute;
block-size: 4px;
inline-size: 4px
}
.tds-tabs[data-scroll-direction=horizontal] .tds-tab-list>.tds-tab:last-child:after {
left: 100%
}
[dir=rtl] .tds-tabs[data-scroll-direction=horizontal] .tds-tab-list>.tds-tab:last-child:after {
left: auto;
right: 100%
}
.tds-tab {
display: inline-flex;
block-size: 32px;
block-size: var(--tds-tabs-height);
align-items: center;
justify-content: center;
margin: 4px;
margin: var(--tds-size--half);
padding: 0 16px;
padding: 0 var(--tds-size--2x);
font-family: Gotham Medium, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
font-family: var(--tds-font-combined--medium);
font-size: 12px;
font-size: var(--tds-font-size--20);
font-weight: 500;
text-align: center;
color: #5c5e62;
color: var(--tds-color--grey30);
background-color: transparent;
border-radius: 100px;
border-radius: var(--tds-border-radius--pill);
flex-grow: 1;
white-space: nowrap;
scroll-snap-align: center;
box-shadow: inset 0 0 0 0 transparent, 0 0 0 0 transparent;
position: relative
}
.tds-tab,
.tds-tab:focus,
.tds-tab:hover {
border: none;
outline: none;
transition: background-color .3s ease, box-shadow .3s ease, color .3s ease;
transition: var(--tds-transition--tab)
}
.tds-tab:focus,
.tds-tab:hover {
box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .1), 0 0 0 0 transparent
}
.tds-scrim--black .tds-tab:focus,
.tds-scrim--black .tds-tab:hover {
box-shadow: inset 0 0 0 3px hsla(0, 0%, 100%, .1), 0 0 0 0 transparent
}
.tds-tab[aria-selected=true] {
color: #000;
color: var(--tds-color--black)
}
.tds-scrim--white .tds-tab[aria-selected=true],
.tds-tab[aria-selected=true] {
background-color: #f4f4f4;
background-color: var(--tds-color--grey70)
}
.tds-scrim--light .tds-tab[aria-selected=true] {
background-color: #fff;
background-color: var(--tds-color--white)
}
.tds-scrim--black .tds-tab[aria-selected=true] {
color: #fff;
color: var(--tds-color--white);
background-color: #171a20;
background-color: var(--tds-color--grey10)
}
.tds-scrim--black .tds-tab[aria-selected=true]:focus,
.tds-scrim--black .tds-tab[aria-selected=true]:hover,
.tds-tab[aria-selected=true]:focus,
.tds-tab[aria-selected=true]:hover {
box-shadow: inset 0 0 0 0 transparent, 0 0 0 0 transparent
}
@media (prefers-reduced-motion:no-preference) {
.tds-scrim--black .tds-tabs--animated .tds-tab,
.tds-scrim--light .tds-tabs--animated .tds-tab,
.tds-scrim--white .tds-tabs--animated .tds-tab,
.tds-tabs--animated .tds-tab {
background-color: transparent
}
.tds-tab-list-animated-backdrop {
position: absolute;
top: 4px;
top: var(--tds-size--half);
bottom: 4px;
bottom: var(--tds-size--half);
z-index: -1;
border-radius: 100px;
border-radius: var(--tds-border-radius--pill);
transition: left .5s cubic-bezier(.75, 0, 0, 1), right .5s cubic-bezier(.75, 0, 0, 1), top .5s cubic-bezier(.75, 0, 0, 1), bottom .5s cubic-bezier(.75, 0, 0, 1)
}
.tds-scrim--white .tds-tab-list-animated-backdrop,
.tds-tab-list-animated-backdrop {
background-color: #f4f4f4;
background-color: var(--tds-color--grey70)
}
.tds-scrim--light .tds-tab-list-animated-backdrop {
background-color: #fff;
background-color: var(--tds-color--white)
}
.tds-scrim--black .tds-tab-list-animated-backdrop {
background-color: #171a20;
background-color: var(--tds-color--grey10)
}
}
.tds-tabs--toggle .tds-tab-list {
margin: 0;
inline-size: 100%;
background-color: #f4f4f4;
background-color: var(--tds-color--grey70);
border-radius: 100px;
border-radius: var(--tds-border-radius--pill)
}
.tds-scrim--light .tds-tabs--toggle .tds-tab-list {
background-color: #eee;
background-color: var(--tds-color--grey60)
}
.tds-scrim--black .tds-tabs--toggle .tds-tab-list {
background-color: #171a20;
background-color: var(--tds-color--grey10)
}
.tds-tabs--toggle .tds-tab[aria-selected=true],
.tds-tabs--toggle .tds-tab[aria-selected=true]:focus,
.tds-tabs--toggle .tds-tab[aria-selected=true]:hover {
color: #000;
color: var(--tds-color--black);
background-color: #fff;
background-color: var(--tds-color--white);
box-shadow: inset 0 0 0 0 transparent, 0 1px 8px 0 rgba(0, 0, 0, .1)
}
.tds-scrim--black .tds-tabs--toggle .tds-tab[aria-selected=true],
.tds-scrim--black .tds-tabs--toggle .tds-tab[aria-selected=true]:focus,
.tds-scrim--black .tds-tabs--toggle .tds-tab[aria-selected=true]:hover {
color: #fff;
color: var(--tds-color--white);
background-color: #393c41;
background-color: var(--tds-color--grey20);
box-shadow: inset 0 0 0 0 transparent, 0 1px 8px 0 rgba(0, 0, 0, .1)
}
@media (prefers-reduced-motion:no-preference) {
.tds-tabs--animated.tds-tabs--toggle .tds-tab[aria-selected=true] {
background-color: transparent
}
.tds-tabs--animated.tds-tabs--toggle .tds-tab[aria-selected=true],
.tds-tabs--animated.tds-tabs--toggle .tds-tab[aria-selected=true]:focus,
.tds-tabs--animated.tds-tabs--toggle .tds-tab[aria-selected=true]:hover {
box-shadow: inset 0 0 0 0 transparent, 0 0 0 0 transparent
}
.tds-scrim--black .tds-tabs--animated.tds-tabs--toggle .tds-tab[aria-selected=true] {
background-color: transparent
}
.tds-tabs--toggle .tds-tab-list-animated-backdrop {
background-color: #fff;
background-color: var(--tds-color--white);
box-shadow: inset 0 0 0 0 transparent, 0 1px 8px 0 rgba(0, 0, 0, .1)
}
.tds-scrim--black .tds-tabs--toggle .tds-tab-list-animated-backdrop {
background-color: #393c41;
background-color: var(--tds-color--grey20)
}
}
.tds-tabs--dots {
-webkit-padding-after: 32px;
-webkit-padding-after: var(--tds-size--4x);
padding-block-end: 32px;
padding-block-end: var(--tds-size--4x)
}
.tds-tabs--dots .tds-tab-list {
inline-size: auto;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
margin: 8px 0;
margin: var(--tds-size) 0
}
.tds-tabs--dots .tds-tab {
border: none;
padding: 4px;
block-size: auto;
font-size: 0;
line-height: 0
}
.tds-tabs--dots .tds-tab:only-of-type {
display: none
}
.tds-tabs--dots .tds-tab[aria-selected=true] {
background-color: #393c41;
background-color: var(--tds-color--grey20)
}
.tds-scrim--black .tds-tabs--dots .tds-tab[aria-selected=true] {
background-color: #d0d1d2;
background-color: var(--tds-color--grey50)
}
.tds-tabs--dots .tds-tab[aria-selected=false] {
background-color: rgba(0, 0, 0, .15);
box-shadow: inset 0 0 0 0 transparent, 0 0 0 0 transparent
}
.tds-tabs--dots .tds-tab[aria-selected=false]:focus,
.tds-tabs--dots .tds-tab[aria-selected=false]:hover {
box-shadow: inset 0 0 0 1px #d0d1d2, 0 0 0 0 transparent;
box-shadow: inset 0 0 0 1px var(--tds-color--grey50), 0 0 0 0 transparent
}
.tds-scrim--black .tds-tabs--dots .tds-tab[aria-selected=false] {
background-color: hsla(0, 0%, 100%, .15);
box-shadow: inset 0 0 0 0 transparent, 0 0 0 0 transparent
}
.tds-scrim--black .tds-tabs--dots .tds-tab[aria-selected=false]:focus,
.tds-scrim--black .tds-tabs--dots .tds-tab[aria-selected=false]:hover {
box-shadow: inset 0 0 0 1px #d0d1d2, 0 0 0 0 transparent;
box-shadow: inset 0 0 0 1px var(--tds-color--grey50), 0 0 0 0 transparent
}
@media (prefers-reduced-motion:no-preference) {
.tds-tabs--animated.tds-tabs--dots .tds-tab[aria-selected=true] {
background-color: transparent
}
.tds-tabs--animated.tds-tabs--dots .tds-tab-list-animated-backdrop {
background-color: #393c41;
background-color: var(--tds-color--grey20)
}
.tds-scrim--black .tds-tabs--animated.tds-tabs--dots .tds-tab-list-animated-backdrop {
background-color: #d0d1d2;
background-color: var(--tds-color--grey50)
}
}
.tds-tabs--vertical {
display: flex
}
.tds-tab-list[aria-orientation=vertical],
.tds-tabs--vertical>.tds-tab-list {
flex-direction: column;
inline-size: 300px;
margin: 0
}
.tds-tabs--vertical .tds-tab {
margin: 0;
block-size: 48px;
border-radius: 0
}
.tds-tabs--vertical>.tds-tab-panel-list {
align-self: stretch;
inline-size: calc(100% - 300px);
-webkit-padding-start: 24px;
-webkit-padding-start: var(--tds-size--3x);
padding-inline-start: 24px;
padding-inline-start: var(--tds-size--3x);
-webkit-padding-end: 24px;
-webkit-padding-end: var(--tds-size--3x);
padding-inline-end: 24px;
padding-inline-end: var(--tds-size--3x)
}
.tds-scrim--white .tds-tabs--vertical>.tds-tab-panel-list {
background-color: #f4f4f4;
background-color: var(--tds-color--grey70)
}
.tds-scrim--light .tds-tabs--vertical>.tds-tab-panel-list {
background-color: #fff;
background-color: var(--tds-color--white)
}
.tds-scrim--black .tds-tabs--vertical>.tds-tab-panel-list {
background-color: #171a20;
background-color: var(--tds-color--grey10)
}
@media (prefers-reduced-motion:no-preference) {
.tds-tabs--animated.tds-tabs--vertical .tds-tab-list-animated-backdrop {
border-radius: 0
}
}
@media (prefers-reduced-motion:no-preference) {
.tds-tabs--animated.tds-tabs--underline .tds-tab-list-animated-backdrop {
border-radius: 0;
background-color: transparent;
box-shadow: inset 0 -3px 0 0 #393c41;
box-shadow: inset 0 -3px 0 0 var(--tds-color--grey20);
top: 0;
bottom: 0;
-webkit-margin-after: -1px;
margin-block-end: -1px
}
.tds-scrim--black .tds-tabs--animated.tds-tabs--underline .tds-tab-list-animated-backdrop {
box-shadow: inset 0 -3px 0 0 #d0d1d2;
box-shadow: inset 0 -3px 0 0 var(--tds-color--grey50)
}
.tds-scrim--light .tds-tabs--animated.tds-tabs--underline .tds-tab[aria-selected=true],
.tds-tabs--animated.tds-tabs--underline .tds-tab[aria-selected=true] {
box-shadow: inset 0 -3px 0 0 transparent
}
}
.tds-tabs--legacy--pill .tds-tab-list {
inline-size: calc(100% + 16px);
margin: 0 -8px
}
.tds-tabs--legacy--pill .tds-tab {
block-size: 40px;
text-transform: uppercase;
margin: 4px 8px;
margin: var(--tds-size--half) var(--tds-size)
}
.tds-scrim--black .tds-tabs--legacy--pill .tds-tab,
.tds-scrim--light .tds-tabs--legacy--pill .tds-tab,
.tds-scrim--white .tds-tabs--legacy--pill .tds-tab,
.tds-tabs--legacy--pill .tds-tab {
background-color: transparent
}
.tds-scrim--light .tds-tabs--legacy--pill .tds-tab[aria-selected=true],
.tds-tabs--legacy--pill .tds-tab[aria-selected=true] {
box-shadow: inset 0 0 0 3px #393c41;
box-shadow: inset 0 0 0 3px var(--tds-color--grey20)
}
.tds-scrim--black .tds-tabs--legacy--pill .tds-tab[aria-selected=true] {
box-shadow: inset 0 0 0 3px #d0d1d2;
box-shadow: inset 0 0 0 3px var(--tds-color--grey50)
}
.tds-scrim--light .tds-tabs--legacy--pill .tds-tab[aria-selected=false],
.tds-tabs--legacy--pill .tds-tab[aria-selected=false] {
box-shadow: inset 0 0 0 3px #a2a3a5;
box-shadow: inset 0 0 0 3px var(--tds-color--grey40)
}
.tds-scrim--black .tds-tabs--legacy--pill .tds-tab[aria-selected=false] {
box-shadow: inset 0 0 0 3px #393c41;
box-shadow: inset 0 0 0 3px var(--tds-color--grey20)
}
.tds-tabs--legacy--vertical .tds-tab-list {
flex-direction: column
}
.tds-tabs--legacy--vertical .tds-tab {
block-size: 40px;
margin: 0;
justify-content: flex-start;
border-radius: 0
}
.tds-tabs--legacy--vertical .tds-tab[aria-selected=true] {
background-color: transparent;
box-shadow: inset -4px 0 0 0 #3e6ae1;
box-shadow: inset -4px 0 0 0 var(--tds-color--blue30)
}
[dir=rtl] .tds-tabs--legacy--vertical .tds-tab[aria-selected=true] {
background-color: transparent;
box-shadow: inset 4px 0 0 0 #3e6ae1;
box-shadow: inset 4px 0 0 0 var(--tds-color--blue30)
}
.tds-tabs--legacy--vertical .tds-tab[aria-selected=false] {
background-color: transparent;
box-shadow: inset -4px 0 0 0 transparent
}
[dir=rtl] .tds-tabs--legacy--vertical .tds-tab[aria-selected=false] {
box-shadow: inset 4px 0 0 0 transparent
}
.tds-tabs--legacy--vertical .tds-tab[aria-selected=false]:focus,
.tds-tabs--legacy--vertical .tds-tab[aria-selected=false]:hover {
box-shadow: inset -4px 0 0 0 #d0d1d2;
box-shadow: inset -4px 0 0 0 var(--tds-color--grey50)
}
[dir=rtl] .tds-tabs--legacy--vertical .tds-tab[aria-selected=false]:focus,
[dir=rtl] .tds-tabs--legacy--vertical .tds-tab[aria-selected=false]:hover {
box-shadow: inset 4px 0 0 0 #d0d1d2;
box-shadow: inset 4px 0 0 0 var(--tds-color--grey50)
}
.tds-scrim--black .tds-tabs--legacy--vertical .tds-tab[aria-selected=false]:focus,
.tds-scrim--black .tds-tabs--legacy--vertical .tds-tab[aria-selected=false]:hover {
box-shadow: inset -4px 0 0 0 #393c41;
box-shadow: inset -4px 0 0 0 var(--tds-color--grey20)
}
[dir=rtl] .tds-scrim--black .tds-tabs--legacy--vertical .tds-tab[aria-selected=false]:focus,
[dir=rtl] .tds-scrim--black .tds-tabs--legacy--vertical .tds-tab[aria-selected=false]:hover {
box-shadow: inset 4px 0 0 0 #393c41;
box-shadow: inset 4px 0 0 0 var(--tds-color--grey20)
}
@media (prefers-reduced-motion:no-preference) {
.tds-tabs--animated.tds-tabs--legacy--vertical .tds-tab-list-animated-backdrop {
border-radius: 0;
background-color: transparent;
box-shadow: inset -4px 0 0 0 #3e6ae1;
box-shadow: inset -4px 0 0 0 var(--tds-color--blue30);
top: 0;
bottom: 0
}
[dir=rtl] .tds-tabs--animated.tds-tabs--legacy--vertical .tds-tab-list-animated-backdrop {
box-shadow: inset 4px 0 0 0 #3e6ae1;
box-shadow: inset 4px 0 0 0 var(--tds-color--blue30)
}
.tds-scrim--light .tds-tabs--animated.tds-tabs--legacy--vertical .tds-tab[aria-selected=true],
.tds-tabs--animated.tds-tabs--legacy--vertical .tds-tab[aria-selected=true] {
box-shadow: inset 0 -3px 0 0 transparent
}
[dir=rtl] .tds-scrim--light .tds-tabs--animated.tds-tabs--legacy--vertical .tds-tab[aria-selected=true],
[dir=rtl] .tds-tabs--animated.tds-tabs--legacy--vertical .tds-tab[aria-selected=true] {
box-shadow: inset 0 3px 0 0 transparent
}
}
.tds-tab-panel-list {
inline-size: 100%
}
.tds-tab-panel {
visibility: hidden;
transition: visibility .5s .5s
}
.tds-tab-panel--active {
visibility: inherit;
transition: visibility .5s 0s
}
:root {
--tds-tab-panel-width: calc(100% - var(--tds-size--8x))
}
.tds-tabs.tds-tabs--carousel .tds-tab-panel-list {
display: flex;
-ms-overflow-style: none;
-webkit-scrollbar-width: none;
scrollbar-width: none;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-scroll-snap-type: x mandatory;
scroll-snap-type: x mandatory
}
.tds-tabs.tds-tabs--carousel .tds-tab-panel-list::-webkit-scrollbar {
display: none
}
.tds-tabs.tds-tabs--carousel .tds-tab-panel {
position: relative;
scroll-snap-align: start;
inline-size: calc(100% - 64px);
inline-size: var(--tds-tab-panel-width);
min-width: calc(100% - 64px);
min-width: var(--tds-tab-panel-width);
max-width: calc(100% - 64px);
max-width: var(--tds-tab-panel-width);
-webkit-margin-end: 32px;
-webkit-margin-end: var(--tds-size--4x);
margin-inline-end: 32px;
margin-inline-end: var(--tds-size--4x)
}
.tds-tabs.tds-tabs--carousel .tds-tab-panel[hidden] {
display: block
}
.tds-tabs.tds-tabs--carousel .tds-tab-panel:last-child {
inline-size: 100%;
min-width: 100%;
max-width: 100%
}
.tds-tab--activate {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
inline-size: 100%;
border: none;
z-index: 20;
background-color: #fff;
background-color: var(--tds-color--white);
cursor: pointer;
opacity: .66;
transition: opacity .5s ease
}
.tds-tab-panel--active .tds-tab--activate {
pointer-events: none;
opacity: 0;
transition: opacity .5s ease
}
.tds-scrim--light .tds-tab--activate {
background-color: #f4f4f4;
background-color: var(--tds-color--grey70)
}
.tds-scrim--black .tds-tab--activate {
background-color: #000;
background-color: var(--tds-color--black)
}
.tds-tabs {
display: block;
inline-size: auto
}
.tds-tabs.tds-tabs--vertical {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start
}
.tds-tab-panel {
inline-size: calc(100% + 16px)
}
.tds-menu-header-main .site-logo {
max-width: 120px
}
:root {
--animation-property: all;
--animation-duration: 300ms;
--animation-duration--half: 150ms;
--animation-entry-velocity: 300ms;
--animation-function: ease-in-out;
--animation-delay: "";
--opacity-to: .25;
--opacity-from: 1;
--header-height: 52px;
--logo-height: 13px;
--logo-width: 100px;
--crosshatch-size: 36%;
--header_transparent: transparent;
--tds-menu-header-spacer: 20px
}
@-webkit-keyframes tds-fade_transition {
0%,
to {
opacity: 1;
opacity: var(--opacity-from)
}
50% {
opacity: .25;
opacity: var(--opacity-to)
}
}
@keyframes tds-fade_transition {
0%,
to {
opacity: 1;
opacity: var(--opacity-from)
}
50% {
opacity: .25;
opacity: var(--opacity-to)
}
}
.tds-menu-header-skip-nav {
font-size: 12px;
float: right;
margin-left: 1em
}
.tds-menu {
z-index: 500;
overflow: hidden;
position: relative
}
.tds-menu--show {
overflow: visible
}
.tds-menu-content {
width: 100%;
height: 100%;
padding: 24px 40px;
overflow: hidden
}
.tds-menu--close,
.tds-menu-content {
background-color: #fff;
background-color: var(--tds-color--white);
position: absolute
}
.tds-menu--close {
top: 16px;
padding: 8px;
right: 32px;
z-index: 1;
cursor: pointer
}
.tds-menu--close svg {
width: 20px;
height: 20px
}
.tds-menu-overlay.tds-menu--show:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, .3)
}
@media (min-width:600px) {
.tds-menu-content {
padding: 64px 48px
}
.tds-menu-close {
top: 64px;
right: 48px
}
}
.tds-prevent-scroll {
overflow: hidden;
position: fixed
}
.tds-menu-header-checkbox {
left: 20px;
left: var(--tds-menu-header-spacer);
margin: 0;
opacity: 0;
position: absolute;
top: 0;
width: auto
}
@media (min-width:1200px) {
.tds-menu-header-checkbox {
display: none
}
}
.tds-menu-header-main {
width: 100%;
z-index: 5000
}
.tds-menu-header-main .tds-container {
padding-left: 0;
padding-right: 0
}
.tds-menu-header-main.tds-menu-header-sticky {
position: -webkit-sticky;
position: sticky;
background-image: linear-gradient(180deg, hsla(0, 0%, 100%, .9), hsla(0, 0%, 100%, .5), hsla(0, 0%, 100%, 0));
height: 50px;
width: 100vw
}
@media (max-width:1199px) {
.tds-menu-header-main {
position: absolute;
top: 0;
transform: translateZ(0);
transition: transform .3s ease-in-out;
transition: transform var(--animation-duration) ease-in-out;
width: 100vw
}
.tds-menu-header--transparent_on_mobile {
background-color: transparent;
position: absolute;
top: 0;
overflow: visible
}
.tds-menu-header-scrolled .tds-menu-header-main {
transform: translate3d(0, -52px, 0)
}
.tds-prevent-scroll .tds-menu-header-main {
transform: none;
transition: 0 0 0
}
}
@media (min-width:1200px) {
.tds-menu-header-main {
position: absolute;
top: 0
}
.tds-menu-header-semitransparent .tds-menu-header-main,
.tds-menu-header-transparent--dark .tds-menu-header-main,
.tds-menu-header-transparent--light .tds-menu-header-main {
position: absolute;
transition: background .3s ease-in-out;
transition: background var(--animation-duration) var(--animation-function)
}
}
@media (max-width:1199px) {
.tds-menu-header-semitransparent .tds-menu-header-main .tds-menu-header-nav,
.tds-menu-header-transparent--dark .tds-menu-header-main .tds-menu-header-nav,
.tds-menu-header-transparent--light .tds-menu-header-main .tds-menu-header-nav {
top: 0
}
.tds-menu-header-semitransparent .tds-menu-header-main .tds-menu-header-main--logo_container,
.tds-menu-header-transparent--dark .tds-menu-header-main .tds-menu-header-main--logo_container,
.tds-menu-header-transparent--light .tds-menu-header-main .tds-menu-header-main--logo_container {
z-index: 1550
}
}
.tds-menu-header-main--container .tds-container {
align-items: center;
display: flex;
flex-flow: row nowrap;
height: 52px;
height: var(--header-height);
justify-content: space-between;
overflow: hidden;
padding-left: 20px;
padding-right: 20px
}
[dir=rtl] .tds-menu-header-main--container .tds-container {
justify-content: normal
}
@media (max-width:1199px) {
.tds-menu-header-main--container .tds-container {
align-content: flex-start
}
}
@media (min-width:1200px) {
.tds-menu-header-main--container .tds-container {
align-content: center;
max-width: none
}
}
.tds-menu-header-main--logo_container {
margin-bottom: 0;
position: relative;
top: -1px;
z-index: 10;
padding-bottom: 0;
padding-top: 0
}
[dir=rtl] .tds-menu-header-main--logo_container {
margin-right: 20px
}
@media (min-width:1200px) {
.tds-menu-header-main--logo_container {
height: 100%;
width: 100px;
width: var(--logo-width)
}
}
@media (max-width:1199px) {
.tds-menu-header-main--logo_container {
height: 100%;
order: 1;
position: relative;
width: calc(50% + 20px);
width: calc(50% + var(--tds-menu-header-spacer));
z-index: 1400
}
}
.tds-menu-header-main--logo {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
overflow: hidden;
text-indent: -999em;
width: 100%;
border-bottom: 0;
box-shadow: 0 0 0 transparent
}
@media (max-width:1199px) {
.tds-menu-header-main--logo {
justify-content: flex-start
}
}
.tds-menu-header-main--logo svg {
width: 100px;
flex-shrink: 0
}
.tds-menu-header-main--logo:hover {
box-shadow: 0 0 0 transparent
}
@media (max-width:1199px) {
.tds-menu-header-main--logo:before {
background-position: 20px;
background-position: var(--tds-menu-header-spacer) 50%;
width: 100%
}
}
@media (min-width:1200px) {
.tds-menu-header-main--logo:before {
background-position: 50%
}
}
.tds-menu-header-main--app_title {
font-family: var(--tds-font-combined--base);
align-items: center;
color: #000;
color: var(--tds-color--black);
display: flex;
font-size: 14px;
font-size: var(--tds-font-size--30);
height: 100%;
left: 120px;
position: absolute;
top: 0;
white-space: nowrap
}
[dir=rtl] .tds-menu-header-main--app_title {
left: auto;
right: 120px
}
@media (max-width:1199px) {
.tds-menu-header-main--app_title {
left: 140px
}
[dir=rtl] .tds-menu-header-main--app_title {
left: auto;
right: 140px
}
}
.tds-menu-header-alternate .tds-menu-header-main--app_title,
.tds-menu-header-transparent--dark .tds-menu-header-main--app_title {
color: #000;
color: var(--tds-color--black)
}
.tds-menu-header-main--trigger_icon {
display: block;
height: 18px;
height: calc(var(--tds-menu-header-spacer) - 2px);
opacity: 1;
position: relative;
transition: opacity .3s ease-in-out;
transition: opacity var(--animation-duration) var(--animation-function);
width: 18px;
width: calc(var(--tds-menu-header-spacer) - 2px)
}
.tds-menu-header-main--trigger_icon:after {
right: 0;
top: 45%;
transition: all "" .3s ease-in-out;
transition: var(--animation-property) var(--animation-duration) var(--animation-function) var(--animation-delay);
width: 0
}
.tds-menu-header-main--cross_hatch,
.tds-menu-header-main--trigger_icon:after {
content: "";
display: block;
height: 2px;
height: calc(var(--tds-menu-header-spacer)/10);
position: absolute
}
.tds-menu-header-main--cross_hatch {
left: 0;
text-indent: 2000px;
top: calc(36% + 2px);
top: calc(var(--crosshatch-size) + 2px);
transition: right .3s ease-in-out;
transition: right var(--animation-duration) var(--animation-function);
width: 100%
}
.tds-menu-header-main--cross_hatch:after,
.tds-menu-header-main--cross_hatch:before {
content: "";
display: block;
height: 2px;
height: calc(var(--tds-menu-header-spacer)/10);
left: 0;
position: absolute;
transition: all .3s ease-in-out;
transition: var(--animation-property) var(--animation-duration) var(--animation-function);
width: 100%;
z-index: 10
}
.tds-menu-header-main--cross_hatch:before {
top: -5px
}
.tds-menu-header-main--cross_hatch:after {
top: 5px
}
@media (min-width:1200px) {
.tds-menu-header-nav {
align-content: center;
align-items: stretch;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
left: 20px;
left: var(--tds-menu-header-spacer);
position: absolute;
top: 0;
width: calc(100vw - 40px);
height: 100%
}
}
@media (max-width:1199px) {
.tds-menu-header-nav {
clear: both;
display: block;
height: 100vh;
width: 312px;
padding-right: 0;
position: fixed;
right: -200%;
top: 0;
z-index: 1500;
transform: translateZ(0);
transition: right .3s ease-in-out;
transition: right var(--animation-duration) var(--animation-function)
}
.tds-menu-header-drawer--enter_left .tds-menu-header-nav {
left: -200%;
transition: left .3s ease-in-out;
transition: left var(--animation-duration) var(--animation-function)
}
.tds-menu-header-nav:before {
background-color: #fff;
background-color: var(--tds-color--white);
content: "";
display: block;
height: 32px;
height: calc(var(--header-height) - var(--tds-menu-header-spacer));
left: 0;
position: -webkit-sticky;
position: sticky;
top: 0;
width: 100%;
z-index: 1
}
}
.tds-menu-header-nav--list {
display: block;
margin: 0;
padding: 0
}
@media (max-width:1199px) {
.tds-menu-header-nav--list {
font-size: 12px;
font-size: var(--tds-font-size--20);
line-height: var(--tds-line_height--20)
}
.tds-menu-header-nav--list::-webkit-scrollbar {
background: transparent;
display: none;
height: 0;
opacity: 0;
width: 0
}
.tds-menu-header-nav--list .tds-menu-header-nav--selected .tds-menu-header-nav--list {
display: block
}
.tds-menu-header-nav--list .tds-menu-header-nav--list.tds-menu-header-nav--primary_right {
display: block;
margin: 0;
padding: 0
}
.tds-menu-header-nav--list .tds-menu-header-nav--list .tds-menu-header-nav--auth_link {
display: none
}
}
.tds-menu-header-nav--list .tds-menu-header-nav--list {
display: none;
margin-left: 20px;
margin-left: var(--tds-menu-header-spacer);
padding: 10px 0 10px 10px;
padding: calc(var(--tds-menu-header-spacer)/2) 0 calc(var(--tds-menu-header-spacer)/2) calc(var(--tds-menu-header-spacer)/2)
}
[dir=rtl] .tds-menu-header-nav--list .tds-menu-header-nav--list {
margin-left: 0;
padding-left: 0;
margin-right: 20px;
margin-right: var(--tds-menu-header-spacer);
padding-right: 10px;
padding-right: calc(var(--tds-menu-header-spacer)/2)
}
@media (min-width:1200px) {
.tds-menu-header-nav--primary .tds-menu-header-nav--list {
align-content: center;
align-items: center;
display: flex;
flex-flow: row nowrap;
justify-content: center
}
}
@media (max-width:1199px) {
.tds-menu-header-nav--primary {
justify-content: flex-start
}
}
.tds-menu-header-nav--list_item {
list-style: none
}
.tds-menu-header-nav--list_link {
display: flex;
align-items: center;
justify-items: center;
font-family: HeiT ASC Traditional Chinese, M Hei PRC W45, AXIS Font Japanese W55, FB New Gothic, Gotham Medium, system, sans-serif;
font-family: var(--tds-font-combined--medium);
cursor: pointer;
line-height: 1.25;
text-transform: uppercase;
transition: color .15s ease-in-out;
transition: color var(--animation-duration--half) var(--animation-function);
border: 0;
box-shadow: 0 0 0 transparent
}
@media (min-width:1200px) {
.tds-menu-header-nav--list_link {
margin: 0 10px;
transition: margin .15s ease-in-out
}
.tds-menu-header-nav--secondary .tds-menu-header-nav--list_link {
border-bottom: 1px solid #d0d1d2;
border-bottom: var(--tds-border-width--small) solid var(--tds-color--grey50);
color: #000;
color: var(--tds-color--black);
font-size: 14px;
margin: 0;
padding: 20px 10px;
padding: var(--tds-menu-header-spacer) calc(var(--tds-menu-header-spacer)/2)
}
}
@media (max-width:1199px) {
.tds-menu-header-nav--list_link {
border-bottom: 1px solid #d0d1d2;
border-bottom: var(--tds-border-width--small) solid var(--tds-color--grey50);
color: #000;
color: var(--tds-color--black);
font-size: 12px;
font-size: var(--tds-font-size--20);
margin: 0 20px;
margin: 0 var(--tds-menu-header-spacer);
padding: 20px 10px;
padding: var(--tds-menu-header-spacer) calc(var(--tds-menu-header-spacer)/2)
}
.tds-menu-header-nav--list_link:hover {
color: #000;
color: var(--tds-color--black);
transition: color .15s ease-in-out;
transition: color var(--animation-duration--half) var(--animation-function)
}
}
.tds-menu-header-nav--list_link:focus,
.tds-menu-header-nav--selected .tds-menu-header-nav--list_link {
transition: color .15s ease-in-out;
transition: color var(--animation-duration--half) var(--animation-function)
}
.tds-menu-header-nav--list_link:focus {
color: #a2a3a5;
color: var(--tds-color--grey40)
}
.tds-menu-header-nav--list_link:hover {
box-shadow: 0 0 0 transparent
}
@media (min-width:1200px) {
.tds-menu-header-nav--list_item_last {
display: flex;
height: 100%;
position: absolute;
right: 30px;
top: 0
}
[dir=rtl] .tds-menu-header-nav--list_item_last {
left: 0;
right: auto
}
.tds-menu-header-nav--primary {
text-align: center;
width: 100%;
display: flex;
justify-content: center
}
.tds-menu-header-nav--primary .tds-menu-header-nav--list_item {
font-size: 14px;
line-height: 20px;
padding-bottom: 0
}
}
@media (max-width:840px) and (min-width:1200px) {
.tds-menu-header-nav--primary {
justify-content: flex-start
}
.tds-menu-header-nav--primary .tds-menu-header-nav--list_item {
font-size: 13px;
line-height: 18px;
padding-bottom: 0;
transition: font-size .15s ease-in-out, line-height .15s ease-in-out
}
}
@media (min-width:1200px) and (max-width:690px) {
.tds-menu-header-nav--list_link {
margin: 0 4px;
transition: margin .15s ease-in-out
}
.tds-menu-header-nav--primary .tds-menu-header-nav--list {
margin-left: 110px;
transition: margin .15s ease-in-out
}
}
@media (min-width:1200px) and (max-width:1199px) {
.tds-menu-header-nav--primary .tds-menu-header-nav--list_item_last {
display: none
}
}
@media (max-width:1199px) {
.tds-menu-header-nav--primary {
-webkit-animation: make-larger .3s ease-in-out;
-webkit-animation: make-larger var(--animation-duration) var(--animation-function);
animation: make-larger .3s ease-in-out;
animation: make-larger var(--animation-duration) var(--animation-function);
max-height: 100vh;
overflow: hidden
}
}
@media (min-width:1200px) {
.tds-menu-header-nav--secondary {
background-color: #fff;
background-color: var(--tds-color--white);
border-left: 1px solid #f4f4f4;
border-left: var(--tds-border-width--small) solid var(--tds-color--grey70);
height: calc(100% + 20px);
height: calc(100% + var(--tds-menu-header-spacer));
min-width: 312px;
overflow-y: scroll;
padding: 52px 20px 20px;
padding: var(--header-height) var(--tds-menu-header-spacer) var(--tds-menu-header-spacer);
position: fixed;
right: -150%;
top: -20px;
top: calc(var(--tds-menu-header-spacer)*-1);
transition: right .3s ease-in-out;
transition: right var(--animation-duration) var(--animation-function);
z-index: 30
}
}
@media (max-width:1199px) {
.tds-menu-header-nav--secondary .tds-menu-header-nav--parent_nav {
-webkit-animation: make-smaller .3s ease-in-out;
-webkit-animation: make-smaller var(--animation-entry-velocity) var(--animation-function);
animation: make-smaller .3s ease-in-out;
animation: make-smaller var(--animation-entry-velocity) var(--animation-function);
max-height: 0;
overflow: hidden
}
}
.tds-menu-header-nav--secondary::-webkit-scrollbar {
display: none
}
.tds-menu-header--more_caret {
display: inline-block;
transform: rotate(0);
transition: transform .3s ease-in-out;
transition: transform var(--animation-duration) var(--animation-function)
}
.tds-menu-header-nav--meta_info {
font-size: 12px;
font-size: var(--tds-font-size--20);
margin: 0;
text-align: center;
width: 100%
}
@media (max-width:1199px) {
.tds-menu-header-nav--meta_info {
padding-bottom: 40px;
padding-bottom: calc(var(--tds-menu-header-spacer)*2);
padding-top: 20px;
padding-top: calc(var(--tds-menu-header-spacer))
}
}
@media (min-width:1200px) {
.tds-menu-header-nav--meta_info {
display: none
}
}
.tds-menu-header-nav--meta_info:hover {
border-top-color: #eee;
border-top-color: var(--tds-color--grey60);
transform: translateZ(0);
transition: border-top-color .15s linear;
transition: border-top-color var(--animation-duration--half) linear
}
.tds-menu-header-nav--meta_info:hover .tds-menu-header-nav--meta_link {
color: #393c41;
color: var(--tds-color--grey20);
transition: color .15s linear;
transition: color var(--animation-duration--half) linear
}
@media (min-width:1200px) {
.tds-menu-header-nav--meta_link {
display: none
}
}
@media (max-width:1199px) {
.tds-menu-header-nav--meta_link {
font-family: HeiT ASC Traditional Chinese, M Hei PRC W45, AXIS Font Japanese W55, FB New Gothic, Gotham Medium, system, sans-serif;
font-family: var(--tds-font-combined--medium);
color: #000;
color: var(--tds-color--black);
cursor: pointer;
display: block;
font-size: 12px;
font-size: var(--tds-font-size--20);
font-weight: 400;
height: 100%;
line-height: 1.25;
margin: 0;
padding: 0 0 10px;
padding: 0 0 calc(var(--tds-menu-header-spacer)/2);
text-transform: uppercase;
transform: translateZ(0);
width: 100%
}
}
[for*=tds-menu-header-main--trigger] {
align-items: center;
cursor: pointer;
display: flex;
height: 30px;
height: calc(var(--tds-menu-header-spacer) + 10px);
justify-content: center;
order: 2;
width: 30px;
width: calc(var(--tds-menu-header-spacer) + 10px);
z-index: 1550
}
[dir=rtl] [for*=tds-menu-header-main--trigger] {
order: -1
}
[id*=tds-menu-header-main--trigger]:checked~[for*=tds-menu-header-main--trigger] {
display: none
}
[id*=tds-menu-header-main--trigger]:checked~[for*=tds-menu-header-main--trigger] .tds-menu-header-main--trigger_icon:after {
transition: all .3s ease-in-out;
transition: var(--animation-property) var(--animation-duration) var(--animation-function);
width: 100%
}
[id*=tds-menu-header-main--trigger]:checked~[for*=tds-menu-header-main--trigger] .tds-menu-header-main--cross_hatch:after,
[id*=tds-menu-header-main--trigger]:checked~[for*=tds-menu-header-main--trigger] .tds-menu-header-main--cross_hatch:before {
-webkit-animation: tds-fade_transition ease-in-out, .3s;
-webkit-animation: tds-fade_transition var(--animation-function), var(--animation-duration);
animation: tds-fade_transition ease-in-out, .3s;
animation: tds-fade_transition var(--animation-function), var(--animation-duration);
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
transform-origin: 50% 50%;
top: 0
}
[id*=tds-menu-header-main--trigger]:checked~[for*=tds-menu-header-main--trigger] .tds-menu-header-main--cross_hatch:before {
transform: rotate(45deg)
}
[id*=tds-menu-header-main--trigger]:checked~[for*=tds-menu-header-main--trigger] .tds-menu-header-main--cross_hatch:after {
transform: rotate(-45deg)
}
[id*=tds-menu-header-main--trigger]:checked~.tds-menu-header-nav {
overflow: auto
}
@media (max-width:1199px) {
[id*=tds-menu-header-main--trigger]:checked~.tds-menu-header-nav {
right: 0
}
.tds-menu-header-drawer--enter_left [id*=tds-menu-header-main--trigger]:checked~.tds-menu-header-nav {
left: 0
}
}
@media (min-width:1200px) {
[id*=tds-menu-header-main--trigger]:checked~.tds-menu-header-nav .tds-menu-header-nav--secondary {
right: 0;
transition: right .3s ease-in-out;
transition: right var(--animation-duration) var(--animation-function)
}
}
[id*=tds-menu-header-main--trigger]:checked~.tds-menu-header-nav::-webkit-scrollbar {
display: none
}
[id*=tds-menu-header-main--trigger]:checked~.tds-menu-header-nav:after {
opacity: .5;
transition: opacity .3s ease-in-out;
transition: opacity var(--animation-duration) var(--animation-function)
}
@media (max-width:1199px) {
.tds-menu-header-alternate [id*=tds-menu-header-main--trigger]:checked~[id*=tds-menu-header-mask],
.tds-menu-header-alternate_mobile [id*=tds-menu-header-main--trigger]:checked~[id*=tds-menu-header-mask] {
top: 52px;
top: var(--header-height)
}
[for*=tds-menu-header-nav--secondary_show] {
display: block
}
}
@media (min-width:1200px) {
[for*=tds-menu-header-nav--secondary_show] {
display: none
}
}
@media (max-width:1199px) {
[id*=tds-menu-header-nav--secondary_show]:checked~.tds-menu-header-main [for*=tds-menu-header-nav--secondary_show] {
font-family: HeiT ASC Traditional Chinese, M Hei PRC W45, AXIS Font Japanese W55, FB New Gothic, Gotham Bold, system, sans-serif;
font-family: var(--tds-font-combined--bold);
margin-top: 0
}
[id*=tds-menu-header-nav--secondary_show]:checked~.tds-menu-header-main .tds-menu-header--more_caret {
transform: rotate(90deg);
transition: transform .3s ease-in-out;
transition: transform var(--animation-duration) var(--animation-function)
}
[id*=tds-menu-header-nav--secondary_show]:checked~.tds-menu-header-main .tds-menu-header-nav--primary {
-webkit-animation: make-smaller .3s ease-in-out;
-webkit-animation: make-smaller var(--animation-entry-velocity) var(--animation-function);
animation: make-smaller .3s ease-in-out;
animation: make-smaller var(--animation-entry-velocity) var(--animation-function);
max-height: 0;
opacity: 0;
z-index: -1
}
[id*=tds-menu-header-nav--secondary_show]:checked~.tds-menu-header-main .tds-menu-header-nav--secondary {
overflow: auto
}
[id*=tds-menu-header-nav--secondary_show]:checked~.tds-menu-header-main .tds-menu-header-nav--parent_nav {
-webkit-animation: make-larger .3s ease-in-out;
-webkit-animation: make-larger var(--animation-duration) var(--animation-function);
animation: make-larger .3s ease-in-out;
animation: make-larger var(--animation-duration) var(--animation-function);
max-height: 100%;
overflow: auto
}
[id*=tds-menu-header-nav--secondary_show]:checked~.tds-menu-header-main .tds-menu-header-nav--meta_info {
position: static
}
}
[id*=tds-menu-header-mask] {
background-color: rgba(0, 0, 0, .25);
height: 0;
opacity: 0;
overflow: hidden;
position: fixed;
right: 0;
top: 0;
width: 0;
z-index: 20
}
[id*=tds-menu-header-main--trigger]:checked~[id*=tds-menu-header-mask],
[id*=tds-menu-header-mask] {
transition: opacity .3s ease-in-out;
transition: opacity var(--animation-duration) var(--animation-function)
}
[id*=tds-menu-header-main--trigger]:checked~[id*=tds-menu-header-mask] {
height: 100vh;
opacity: 1;
width: 100%
}
@media (max-width:1199px) {
.tds-prevent-scroll .tds-menu-header-main {
overflow: visible
}
.tds-prevent-scroll.tds-menu-header-drawer--enter_left .tds-menu-header-main--logo:before {
-webkit-filter: invert(100%);
filter: invert(100%);
transition: -webkit-filter .3s ease-in-out .15s;
transition: -webkit-filter var(--animation-duration) var(--animation-function) var(--animation-duration--half);
transition: filter .3s ease-in-out .15s;
transition: filter var(--animation-duration) var(--animation-function) var(--animation-duration--half);
transition: filter .3s ease-in-out .15s, -webkit-filter .3s ease-in-out .15s;
transition: filter var(--animation-duration) var(--animation-function) var(--animation-duration--half), -webkit-filter var(--animation-duration) var(--animation-function) var(--animation-duration--half)
}
.tds-prevent-scroll.tds-menu-header-alternate .tds-menu-header-main--logo:before {
-webkit-filter: invert(0);
filter: invert(0)
}
}
@media (max-width:1199px) {
.tds-user_is--logged_in .tds-link_for-login,
.tds-user_is--logged_out .tds-link_for-logout {
display: none
}
.tds-user_is--logged_in .tds-link_for-logout,
.tds-user_is--logged_out .tds-link_for-login {
display: block
}
}
@media (min-width:1200px) {
.tds-link_for-logout,
.tds-user_is--logged_in .tds-link_for-login,
.tds-user_is--logged_out .tds-link_for-logout {
opacity: 0;
z-index: -1
}
.tds-user_is--logged_in .tds-link_for-logout,
.tds-user_is--logged_out .tds-link_for-login {
opacity: 1;
z-index: 1
}
}
.tds-link_for-login,
.tds-link_for-logout {
position: relative;
transition: opacity .15s linear, color .15s ease-in-out;
transition: opacity var(--animation-duration--half) linear, color var(--animation-duration--half) var(--animation-function)
}
.tds-subdued {
color: #5c5e62;
color: var(--tds-color--grey30)
}
@media (min-width:1200px) and (max-width:840px) {
.tds-menu-header-nav--primary .tds-menu-header-nav--list {
flex-flow: row wrap;
justify-content: flex-start;
margin-left: 105px
}
}
@media (min-width:1200px) and (max-width:660px) {
.tds-menu-header-nav--list_link {
margin: 0 3px
}
}
@media (max-width:1199px) and (min-width:1200px) {
.tds-menu-header-nav--primary .tds-menu-header-nav--list {
justify-content: flex-start;
margin-left: 130px;
width: 100%
}
}
@media (max-width:840px) and (min-width:1200px) {
.tds-menu-header-nav--primary .tds-menu-header-nav--list_item {
font-size: 13px;
line-height: 18px;
transition: font-size .15s ease-in-out, line-height .15s ease-in-out
}
}
@media (max-width:760px) and (min-width:691px) {
.tds-menu-header-nav--list_link {
margin: 0 5px;
transition: margin .15s ease-in-out
}
}
@media (max-width:690px) and (min-width:1200px) {
.tds-menu-header-nav--list_link {
margin: 0 3px;
transition: margin .15s ease-in-out
}
.tds-menu-header-nav--primary .tds-menu-header-nav--list {
margin-left: 110px
}
}
.tds-menu-header-nav--account_links .tds-link_for-login,
.tds-menu-header-nav--account_links .tds-link_for-logout {
padding-top: 10px
}
.tds-menu-header-alternate .tds-menu-header-main,
.tds-menu-header-main {
background-color: transparent
}
.tds-menu-header-alternate .tds-menu-header-main--logo {
-webkit-filter: invert(100%);
filter: invert(100%)
}
@media (min-width:1200px) {
.tds-menu-header-transparent--dark .tds-menu-header-main,
.tds-menu-header-transparent--light .tds-menu-header-main {
background-color: transparent
}
.tds-menu-header-semitransparent .tds-menu-header-main {
background-color: rgba(0, 0, 0, .25)
}
.tds-menu-header-transparent--dark .tds-menu-header-main--logo:after {
-webkit-filter: invert(100%);
filter: invert(100%)
}
.tds-menu-header-transparent--light .tds-menu-header-main--trigger_icon:after {
background-color: #fff;
background-color: var(--tds-color--white)
}
}
@media (max-width:1199px) {
.tds-menu-header-alternate_mobile .tds-menu-header-main {
background-color: #fff;
background-color: var(--tds-color--white)
}
.tds-menu-header-alternate_mobile .tds-menu-header-main--logo:after {
-webkit-filter: invert(100%);
filter: invert(100%)
}
.tds-menu-header-alternate_mobile .tds-menu-header-main--trigger_icon:after {
background-color: #000;
background-color: var(--tds-color--black)
}
}
@media (min-width:1200px) {
.tds-menu-header-alternate .tds-menu-header-main--cross_hatch:after,
.tds-menu-header-alternate .tds-menu-header-main--cross_hatch:before,
.tds-menu-header-main--cross_hatch:after,
.tds-menu-header-main--cross_hatch:before,
.tds-menu-header-transparent--dark .tds-menu-header-main--cross_hatch {
background-color: #000;
background-color: var(--tds-color--black)
}
.tds-menu-header-transparent--light .tds-menu-header-main--cross_hatch,
.tds-menu-header-transparent--light .tds-menu-header-main--cross_hatch:after,
.tds-menu-header-transparent--light .tds-menu-header-main--cross_hatch:before {
background-color: #fff;
background-color: var(--tds-color--white)
}
.tds-menu-header-transparent--dark .tds-menu-header-main--cross_hatch:after,
.tds-menu-header-transparent--dark .tds-menu-header-main--cross_hatch:before {
background-color: #000;
background-color: var(--tds-color--black)
}
.tds-menu-header-semitransparent .tds-menu-header-nav--list_link,
.tds-menu-header-transparent--light .tds-menu-header-nav--list_link {
color: #fff;
color: var(--tds-color--white)
}
.tds-menu-header-alternate .tds-menu-header-nav--list_link,
.tds-menu-header-nav--primary .tds-menu-header-nav--list_link:hover,
.tds-menu-header-transparent--dark .tds-menu-header-nav--list_link,
.tds-menu-header-transparent--light .tds-menu-header-nav--secondary .tds-menu-header-nav--list_link {
color: #000;
color: var(--tds-color--black)
}
.tds-menu-header-nav--primary .tds-menu-header-nav--selected .tds-menu-header-nav--list_link,
.tds-menu-header-nav--primary .tds-menu-header-nav--selected .tds-menu-header-nav--list_link:hover {
color: #fff;
color: var(--tds-color--white)
}
.tds-menu-header-alternate .tds-menu-header-nav--primary .tds-menu-header-nav--list_link:hover {
color: #000;
color: var(--tds-color--black)
}
.tds-menu-header-transparent--dark .tds-menu-header-nav--primary .tds-menu-header-nav--list_link:hover,
.tds-menu-header-transparent--dark .tds-menu-header-nav--primary .tds-menu-header-nav--selected .tds-menu-header-nav--list_link,
.tds-menu-header-transparent--light .tds-menu-header-nav--primary .tds-menu-header-nav--list_link:hover {
color: #fff;
color: var(--tds-color--white)
}
.tds-menu-header-alternate .tds-menu-header-nav--primary .tds-menu-header-nav--selected .tds-menu-header-nav--list_link {
color: #000;
color: var(--tds-color--black)
}
}
@media (max-width:1199px) {
.tds-menu-header-transparent--light .tds-menu-header-main--cross_hatch {
background-color: #fff;
background-color: var(--tds-color--white)
}
.tds-menu-header-alternate_mobile .tds-menu-header-main--cross_hatch,
.tds-menu-header-main--cross_hatch:after,
.tds-menu-header-main--cross_hatch:before {
background-color: #000;
background-color: var(--tds-color--black)
}
.tds-menu-header-drawer--enter_left .tds-menu-header-main--cross_hatch:after,
.tds-menu-header-drawer--enter_left .tds-menu-header-main--cross_hatch:before {
background-color: #fff;
background-color: var(--tds-color--white)
}
.tds-menu-header-alternate .tds-menu-header-main--cross_hatch:after,
.tds-menu-header-alternate .tds-menu-header-main--cross_hatch:before {
background-color: #000;
background-color: var(--tds-color--black)
}
.tds-menu-header-transparent--dark .tds-menu-header-main--cross_hatch:after,
.tds-menu-header-transparent--dark .tds-menu-header-main--cross_hatch:before,
.tds-menu-header-transparent--light .tds-menu-header-main--cross_hatch:after,
.tds-menu-header-transparent--light .tds-menu-header-main--cross_hatch:before {
background-color: #fff;
background-color: var(--tds-color--white)
}
.tds-menu-header-alternate_mobile .tds-menu-header-main--cross_hatch:after,
.tds-menu-header-alternate_mobile .tds-menu-header-main--cross_hatch:before {
background-color: #000;
background-color: var(--tds-color--black)
}
.tds-menu-header-nav {
background-color: #fff;
background-color: var(--tds-color--white)
}
}
@media (min-width:1200px) {
.tds-menu-header-semitransparent [id*=tds-menu-header-main--trigger]:checked~[for*=tds-menu-header-main--trigger] .tds-menu-header-main--cross_hatch:after,
.tds-menu-header-semitransparent [id*=tds-menu-header-main--trigger]:checked~[for*=tds-menu-header-main--trigger] .tds-menu-header-main--cross_hatch:before,
.tds-menu-header-transparent--dark [id*=tds-menu-header-main--trigger]:checked~[for*=tds-menu-header-main--trigger] .tds-menu-header-main--cross_hatch:after,
.tds-menu-header-transparent--dark [id*=tds-menu-header-main--trigger]:checked~[for*=tds-menu-header-main--trigger] .tds-menu-header-main--cross_hatch:before,
.tds-menu-header-transparent--light [id*=tds-menu-header-main--trigger]:checked~[for*=tds-menu-header-main--trigger] .tds-menu-header-main--cross_hatch:after,
.tds-menu-header-transparent--light [id*=tds-menu-header-main--trigger]:checked~[for*=tds-menu-header-main--trigger] .tds-menu-header-main--cross_hatch:before {
background-color: #000;
background-color: var(--tds-color--black)
}
}
@media (max-width:1199px) {
.tds-menu-header-semitransparent [id*=tds-menu-header-main--trigger]:checked~[for*=tds-menu-header-main--trigger] .tds-menu-header-main--cross_hatch {
background-color: transparent
}
.tds-menu-header-transparent--dark [id*=tds-menu-header-main--trigger]:checked~[for*=tds-menu-header-main--trigger] .tds-menu-header-main--cross_hatch:after,
.tds-menu-header-transparent--dark [id*=tds-menu-header-main--trigger]:checked~[for*=tds-menu-header-main--trigger] .tds-menu-header-main--cross_hatch:before {
background-color: #fff;
background-color: var(--tds-color--white)
}
.tds-menu-header-alternate_mobile [id*=tds-menu-header-main--trigger]:checked~[for*=tds-menu-header-main--trigger] .tds-menu-header-main--cross_hatch:after,
.tds-menu-header-alternate_mobile [id*=tds-menu-header-main--trigger]:checked~[for*=tds-menu-header-main--trigger] .tds-menu-header-main--cross_hatch:before,
.tds-menu-header-semitransparent.tds-menu-header-alternate_mobile.tds-menu-header-drawer--enter_left [id*=tds-menu-header-main--trigger]:checked~[for*=tds-menu-header-main--trigger] .tds-menu-header-main--cross_hatch:after,
.tds-menu-header-semitransparent.tds-menu-header-alternate_mobile.tds-menu-header-drawer--enter_left [id*=tds-menu-header-main--trigger]:checked~[for*=tds-menu-header-main--trigger] .tds-menu-header-main--cross_hatch:before,
.tds-menu-header-transparent--light [id*=tds-menu-header-main--trigger]:checked~[for*=tds-menu-header-main--trigger] .tds-menu-header-main--cross_hatch:after,
.tds-menu-header-transparent--light [id*=tds-menu-header-main--trigger]:checked~[for*=tds-menu-header-main--trigger] .tds-menu-header-main--cross_hatch:before {
background-color: #000;
background-color: var(--tds-color--black)
}
}
:root {
--tds-menu-flyout-animation--transition: cubic-bezier(.25, .46, .45, .94);
--tds-menu-flyout-animation--timing: 1s
}
.tds-menu-flyout {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
max-width: 0;
transition-property: max-width, overflow;
transition-duration: 1s;
transition-duration: var(--tds-menu-flyout-animation--timing);
transition-timing-function: cubic-bezier(.25, .46, .45, .94);
transition-timing-function: var(--tds-menu-flyout-animation--transition)
}
.tds-menu-flyout.tds-menu--show {
max-width: 85vw
}
@media (min-width:600px) {
.tds-menu-flyout {
max-width: 100vw;
max-height: 0;
transition: max-height 1s cubic-bezier(.25, .46, .45, .94);
transition: max-height var(--tds-menu-flyout-animation--timing) var(--tds-menu-flyout-animation--transition)
}
.tds-menu-flyout.tds-menu--show {
max-height: 500px;
max-width: 100vw
}
}
.tds-menu-nested {
position: relative
}
.tds-menu-nested-container {
display: none
}
.tds-menu-nested-siderail {
display: flex
}
.tds-menu-nested-live-container {
display: grid;
grid-template-rows: -webkit-min-content;
grid-template-rows: min-content;
grid-gap: 24px 0;
grid-gap: var(--tds-size--3x) 0;
grid-column: 4/13
}
.tds-menu-nested-list-title {
padding-top: 0
}
.tds-menu-nested-list-title>* {
display: flex;
align-items: center;
white-space: nowrap
}
.tds-menu-nested-list-title svg {
width: 20px;
height: 20px
}
@media (max-width:599px) {
.tds-menu-nested-container--is_hidden {
display: none
}
.tds-menu-nested-live-container.tds-list.tds-link-alt {
display: block;
width: 100%
}
.tds-menu-nested-back-button {
display: flex;
visibility: hidden;
height: 30px
}
.tds-menu-nested-siderail {
display: flex;
flex-direction: column
}
.tds-menu-nested-siderail .tds-list-item {
display: flex
}
.tds-menu-nested-siderail .tds-list-menu-heading {
flex: 1
}
.tds-menu-nested-siderail .tds-list-menu-heading:after {
background-image: url("data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8' %3f%3e%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3e%3cpath class='tds-icon-fill--primary' d='M32 0L18 14l36 36-36 36 14 14 50-50'/%3e%3c/svg%3e")
}
.tds-menu-nested-siderail--hide {
display: none
}
}
@media (min-width:600px) {
.tds-menu-nested-back-button,
.tds-menu-nested-list-title svg {
display: none
}
.tds-menu-nested-back-button--show {
display: flex
}
.tds-menu-nested-siderail {
display: flex;
flex-direction: column
}
}
:root {
--tds-menu-mega--animation-transition: cubic-bezier(.25, .46, .45, .94);
--tds-menu-mega--animation-timing: .6s;
--tds-menu-mega--animation-timing-fast: .3s;
--tds-menu-mega--animation-height: 500px;
--tds-menu-mega--animation-inner-height: 330px
}
@-webkit-keyframes --tds-menu-mega-fade-in {
0% {
opacity: 0
}
30% {
opacity: 0
}
to {
opacity: 1
}
}
@keyframes --tds-menu-mega-fade-in {
0% {
opacity: 0
}
30% {
opacity: 0
}
to {
opacity: 1
}
}
@-webkit-keyframes --tds-menu-mega-blur-left {
0% {
opacity: 0;
-webkit-filter: blur(2px);
filter: blur(2px);
margin-left: -50px
}
10% {
opacity: .75
}
to {
opacity: 1;
-webkit-filter: blur(0);
filter: blur(0);
margin-left: 0
}
}
@keyframes --tds-menu-mega-blur-left {
0% {
opacity: 0;
-webkit-filter: blur(2px);
filter: blur(2px);
margin-left: -50px
}
10% {
opacity: .75
}
to {
opacity: 1;
-webkit-filter: blur(0);
filter: blur(0);
margin-left: 0
}
}
@-webkit-keyframes --tds-menu-mega-blur-right {
0% {
opacity: 0;
-webkit-filter: blur(2px);
filter: blur(2px);
margin-left: 50px
}
10% {
opacity: .75
}
to {
opacity: 1;
-webkit-filter: blur(0);
filter: blur(0);
margin-left: 0
}
}
@keyframes --tds-menu-mega-blur-right {
0% {
opacity: 0;
-webkit-filter: blur(2px);
filter: blur(2px);
margin-left: 50px
}
10% {
opacity: .75
}
to {
opacity: 1;
-webkit-filter: blur(0);
filter: blur(0);
margin-left: 0
}
}
@-webkit-keyframes --tds-menu-mega-slide-down {
0% {
top: 0
}
to {
top: 500px;
top: var(--tds-menu-mega--animation-height)
}
}
@keyframes --tds-menu-mega-slide-down {
0% {
top: 0
}
to {
top: 500px;
top: var(--tds-menu-mega--animation-height)
}
}
.tds-menu-mega {
background-color: #fff;
background-color: var(--tds-color--white);
transition-property: max-width, overflow;
transition-duration: .6s;
transition-duration: var(--tds-menu-mega--animation-timing);
transition-timing-function: cubic-bezier(.25, .46, .45, .94);
transition-timing-function: var(--tds-menu-mega--animation-transition);
text-align: left;
position: relative;
max-width: calc(100vw + 20px);
max-height: 0;
left: 32px;
left: var(--tds-size--4x);
direction: ltr
}
.tds-menu-header-nav {
display: none
}
[id*=tds-menu-header-main--trigger]:checked~.tds-menu-header-nav {
display: inherit;
overflow: unset
}
.tds-menu-mega .tds-menu--back {
top: 2rem;
left: 19px;
position: fixed;
padding-left: 20px;
line-height: 13px;
display: none;
cursor: pointer
}
.tds-menu-mega a {
outline: none
}
.tds-menu-mega .tds-menu-mega--menu-trigger {
padding-top: 0;
padding-bottom: 0
}
.tds-menu-mega .tds-menu-content .tds-menu-list {
padding: 0;
margin: 0
}
.tds-menu-mega .tds-menu-content .tds-menu-mega--submenu li {
padding-bottom: 10px
}
.tds-menu-mega .tds-menu--active-item a,
.tds-menu-mega .tds-menu-mega--primary-link:hover a {
text-decoration: none;
box-shadow: none
}
.tds-menu-mega .tds-menu-header-nav--list_link .tds-icon {
display: inline
}
.tds-menu-mega .tds-menu-title {
width: 100%;
font-size: 20px;
font-weight: 500;
line-height: 36px;
position: absolute;
top: -32px
}
.tds-menu-mega .tds-menu-content {
display: none;
left: 0;
position: relative;
background: transparent;
padding: 0 25vw;
overflow: visible;
max-width: 65vw
}
.tds-menu-mega .tds-menu--active-item .tds-menu-content {
display: flex;
-webkit-animation: --tds-menu-mega-fade-in .6s cubic-bezier(.25, .46, .45, .94);
-webkit-animation: --tds-menu-mega-fade-in var(--tds-menu-mega--animation-timing) var(--tds-menu-mega--animation-transition);
animation: --tds-menu-mega-fade-in .6s cubic-bezier(.25, .46, .45, .94);
animation: --tds-menu-mega-fade-in var(--tds-menu-mega--animation-timing) var(--tds-menu-mega--animation-transition)
}
.tds-menu-mega.tds-menu--show .tds-menu-content {
margin-top: 16px;
margin-top: var(--tds-size--2x);
height: auto
}
.tds-menu-mega .tds-menu-content .tds-menu-mega--additional-links.tds-menu-list {
margin-top: 16px;
margin-top: var(--tds-size--2x)
}
.tds-menu-mega .tds-menu-mega--submenu .tds-menu-mega--submenu.tds-menu-list {
display: block;
grid-template-columns: inherit;
padding-left: 1rem;
padding-top: 1rem
}
.tds-menu-mega .tds-menu-content .tds-menu-mega--additional-links.tds-menu-list li {
display: inline;
margin-right: 16px;
margin-right: var(--tds-size--2x);
padding-top: 0
}
.tds-menu-mega .tds-menu-mega--close {
display: block;
position: fixed;
z-index: 4;
top: 8px;
right: 16px;
right: var(--tds-size--2x);
width: auto;
height: auto;
padding: 18px;
max-width: 50px;
max-height: 50px;
cursor: pointer
}
.tds-menu-mega .tds-menu-content-header {
margin-bottom: 0;
font-size: 14px;
font-weight: 500;
line-height: 16px
}
.tds-menu-mega .tds-menu--back .tds-menu--back-icon {
position: absolute;
left: -18px;
width: 100%;
z-index: -1;
height: 10px;
top: 1px
}
.tds-menu-mega.back-enabled .tds-menu--back {
display: block
}
.tds-menu-mega .tds-menu-mega--drilldown-menu-trigger {
visibility: hidden;
display: flex;
align-items: flex-start
}
.tds-menu-mega .drilldown-active .tds-menu-mega--drilldown-menu-trigger {
visibility: visible
}
.tds-menu-mega .tds-menu-mega--drilldown-menu .tds-link {
font-size: 14px;
font-weight: 500;
line-height: 24px
}
.tds-menu-mega--overlay {
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, .1);
position: absolute;
top: 0;
left: 0;
display: none
}
.tds-menu-mega--overlay.tablet-active {
display: block
}
.tds-menu-mega--mobile-trigger {
position: absolute;
right: 20px;
top: 10px;
background: hsla(0, 0%, 100%, .2);
border-radius: 100px;
border-radius: var(--tds-border-radius--pill);
box-shadow: none;
width: auto;
padding: .35rem .75rem;
font-size: 14px;
font-weight: 500;
line-height: 21px;
text-transform: none;
color: #fff;
color: var(--tds-color--white);
display: block
}
.tds-menu-header-alternate .tds-menu-mega--mobile-trigger,
.tds-menu-header-sticky .tds-menu-mega--mobile-trigger {
background: rgba(0, 0, 0, .1);
color: #000;
color: var(--tds-color--black)
}
.tds-menu-mega div.desktop-only {
display: none
}
.tds-menu-mega .tds-menu-mega--drilldown-menu .tds-menu-content-header {
padding-top: 0;
max-height: 1.75em
}
.tds-menu-mega .tds-menu-mega--primary-link {
line-height: 32px;
line-height: var(--tds-size--4x)
}
.tds-menu-mega .tds-menu-mega--menu-trigger .tds-menu-mega--primary-link {
font-size: 14px;
font-weight: 500;
line-height: 13px;
text-transform: none;
border-bottom: none;
width: 100vw;
color: #000;
color: var(--tds-color--black)
}
.tds-menu-header-alternate .tds-menu-mega .tds-menu-mega--menu-trigger .tds-menu-mega--primary-link,
.tds-menu-mega.tds-menu--show .tds-menu-mega--menu-trigger .tds-menu-mega--primary-link {
color: #000;
color: var(--tds-color--black)
}
.tds-menu-mega .tds-menu-mega--menu-trigger.tds--hide_on_mobile {
display: none
}
.tds-menu-mega .tds-menu-mega--drilldown-menu-targeted-trigger.region-item {
position: relative;
padding-top: 0;
padding-bottom: 0;
margin-bottom: 25vh;
top: 25px;
grid-template-columns: 1fr;
font-size: 14px;
font-weight: 500;
line-height: 21px;
font-family: HeiT ASC Traditional Chinese, M Hei PRC W45, AXIS Font Japanese W55, FB New Gothic, Gotham Medium, system, sans-serif;
font-family: var(--tds-font-combined--medium);
padding-right: 0;
border: none;
background: none;
cursor: pointer;
white-space: nowrap;
width: 200px;
text-align: center;
left: 33px;
color: #000;
color: var(--tds-color--black)
}
.tds-menu-mega.back-enabled .tds-menu-mega--drilldown-menu-targeted-trigger,
.tds-menu-mega .tds-menu-mega--drilldown-menu-targeted-trigger .tds-icon {
display: none
}
.tds-menu-mega .tds-menu-mega--primary-link .tds-menu-mega--primary-link-icon {
transform: rotate(180deg) scaleY(-1);
position: absolute;
left: 232px;
z-index: -1;
display: flex;
height: 1rem;
width: 1rem
}
.tds-menu-mega .s-link:hover,
.tds-menu-mega .tds-menu--active-item {
background: transparent;
border-radius: 0;
box-shadow: none
}
.tds-menu-mega .tds-menu--active-item {
margin-top: 20px
}
.tds-menu-mega .tds-image {
width: 100%
}
.tds-menu-header-nav:before {
display: none
}
.tds-menu-mega .tds-menu-header-nav--list_item {
outline: none
}
.tds-menu-mega .tds-menu-header-nav--list_item_last {
display: relative;
padding: 0
}
.tds-menu-mega .tds-menu-mega--drilldown-menu-item,
.tds-menu-mega .tds-menu-mega--submenu-column {
outline: none
}
.tds-menu-mega .tds-menu-mega--menu-items {
position: fixed;
top: 56px;
top: var(--tds-size--7x);
padding: 0
}
.tds-menu-mega .tds-menu-mega--menu-items .tds-menu-mega--menu-items {
margin-left: 0
}
.tds-menu-mega .tds-flex-item,
.tds-menu-mega .tds-menu--active-item .tds-menu-content {
display: block;
width: 100%;
overflow: visible;
padding: 0;
margin: 0;
text-align: initial
}
.tds-menu-mega button.region-item-current-language {
font-size: 14px;
font-weight: 500;
line-height: 21px;
font-family: HeiT ASC Traditional Chinese, M Hei PRC W45, AXIS Font Japanese W55, FB New Gothic, Gotham Medium, system, sans-serif;
font-family: var(--tds-font-combined--medium);
position: relative;
padding-right: 0;
border: none;
background: none;
cursor: pointer;
padding-left: .75rem;
margin-right: 10px
}
.tds-menu-mega i.region-item-current-language {
margin-top: -4px
}
.tds-menu-mega .region-item-current-language .region-item-current-language-icon {
transform: rotate(180deg) scaleY(-1);
position: relative;
left: 5px;
z-index: 1;
width: 10px;
height: 10px;
cursor: pointer;
top: 1px
}
.tds-menu-mega .tds-menu-mega--drilldown-menu.drilldown-active .region-item-current-language,
[dir=rtl] .tds-menu-mega .region-item-current-language .region-item-current-language-icon {
display: none
}
.tds-menu-mega .region-item {
display: grid;
grid-template-columns: 35px 1fr;
align-items: center;
padding-top: 10px;
padding-bottom: 10px
}
.tds-menu-mega .locale-list-container-item h4 {
font-size: 14px;
font-weight: 500;
line-height: 16px;
padding-top: 32px;
padding-top: var(--tds-size--4x);
padding-bottom: 32px;
padding-bottom: var(--tds-size--4x)
}
.tds-menu-mega .tds-flex-item:first-child {
padding-top: 40px;
padding-top: var(--tds-size--5x)
}
.tds-menu-mega .locale-list-container-item h4:first-child {
padding-top: 0
}
.tds-menu-mega .tds-menu-mega--drilldown-menu .tds-menu-title {
position: relative
}
.tds-menu-mega .tds-menu-mega--drilldown-menu .tds-flex-item {
padding-top: 0;
margin-bottom: 32px;
margin-bottom: var(--tds-size--4x)
}
.tds-menu-mega.tds-menu--show .tds-menu-mega--menu-trigger,
.tds-menu-mega .tds-menu-mega--drilldown-menu-content {
display: none
}
.tds-menu-mega.tds-menu--show .tds-menu-mega--menu-trigger.tds-menu--active-item {
display: block;
margin-bottom: 200px
}
.tds-menu-mega .tds-menu-header-nav--list_link {
margin: 0
}
.tds-menu-mega .tds-menu--active-item .tds-menu-header-nav--list_link {
display: none
}
.tds-menu-mega .tds-menu-mega--additional-links .tds-link {
width: 100%;
display: block;
font-size: 14px;
font-weight: 500;
line-height: 24px
}
.tds-menu-mega .tds-menu-mega--drilldown-menu-item.tds-menu--drilldown-active-item .tds-menu-mega--drilldown-menu-content {
display: flex;
-webkit-animation: --tds-menu-mega-fade-in .6s cubic-bezier(.25, .46, .45, .94);
-webkit-animation: --tds-menu-mega-fade-in var(--tds-menu-mega--animation-timing) var(--tds-menu-mega--animation-transition);
animation: --tds-menu-mega-fade-in .6s cubic-bezier(.25, .46, .45, .94);
animation: --tds-menu-mega-fade-in var(--tds-menu-mega--animation-timing) var(--tds-menu-mega--animation-transition)
}
.tds-menu-mega .locale-list-container {
width: 95vw
}
.tds-menu-mega .locale-list-container-item.first,
.tds-menu-mega .locale-list-container-item.last,
.tds-menu-mega .locale-list-container-item.middle {
width: 100%
}
.tds-menu-mega .locale-list-container-item .locale-region {
width: 100vw;
margin-bottom: 32px;
margin-bottom: var(--tds-size--4x)
}
.tds-menu-mega .locale-list-container-item.middle ul {
-moz-column-count: inherit;
column-count: inherit
}
.tds-menu-mega .tds-menu-mega--drilldown-menu.drilldown-active .tds-menu-mega--submenu,
.tds-menu-mega .tds-menu-mega--drilldown-menu.drilldown-active .tds-menu-title {
display: none
}
.tds-menu-mega .tds-menu-mega--drilldown-menu.drilldown-active .tds-flex-item.tds-menu--drilldown-active-item {
display: flex
}
.tds-menu-mega-main--logo_container {
position: absolute;
z-index: 10;
padding: 0;
left: 20px
}
.tds-menu-mega-main--logo .site-logo {
height: 50px;
max-width: 100px;
-webkit-filter: invert(1);
filter: invert(1)
}
.tds-menu-header-alternate .tds-menu-mega-main--logo .site-logo {
-webkit-filter: invert(0);
filter: invert(0)
}
.tds-menu-mega-main--logo_container .tds-menu-mega-main--logo,
.tds-menu-mega-main--logo_container .tds-menu-mega-main--logo .site-logo {
border: 0;
box-shadow: none
}
[id*=tds-menu-header-main--trigger]:checked~.tds-menu-mega--overlay {
display: block;
-webkit-animation: --tds-menu-mega-fade-in .3s cubic-bezier(.25, .46, .45, .94);
-webkit-animation: --tds-menu-mega-fade-in var(--tds-menu-mega--animation-timing-fast) var(--tds-menu-mega--animation-transition);
animation: --tds-menu-mega-fade-in .3s cubic-bezier(.25, .46, .45, .94);
animation: --tds-menu-mega-fade-in var(--tds-menu-mega--animation-timing-fast) var(--tds-menu-mega--animation-transition)
}
.desktop-active~.tds-menu-mega-main--logo_container .tds-menu-mega-main--logo .site-logo {
-webkit-filter: invert(0);
filter: invert(0)
}
.tds-menu-mega .desktop-tablet-only {
display: none
}
.tds-menu-header-sticky .tds-menu-mega .tds-menu-mega--menu-trigger .tds-menu-mega--primary-link {
color: #000;
color: var(--tds-color--black);
transition: none
}
.tds-menu-header-sticky .tds-menu-mega .tds-menu-mega--menu-trigger .tds-menu-mega--primary-link:hover {
color: #fff;
color: var(--tds-color--white)
}
.tds-menu-header-sticky .desktop-active~.tds-menu-header-nav .tds-menu-mega--menu-trigger .tds-menu-mega--primary-link:hover,
.tds-menu-header-sticky [id*=tds-menu-header-main--trigger]:checked~.tds-menu-header-nav .tds-menu-mega--menu-trigger .tds-menu-mega--primary-link:hover {
color: #000;
color: var(--tds-color--black)
}
.tds-menu-header-sticky .tds-menu-mega-main--logo_container .tds-menu-mega-main--logo .site-logo {
-webkit-filter: invert(0);
filter: invert(0)
}
.desktop-active~.tds-menu-header-nav .tds-menu--active-item .tds-menu-content {
top: 41px
}
@media (max-width:1199px) {
.tds-menu-mega.tds-menu-header-nav--primary {
height: 100vh
}
.tds-menu-mega .tds-menu-mega--menu-items {
max-height: 100vh;
overflow-y: scroll;
overflow-x: hidden;
margin-bottom: 20vh;
width: 100vw
}
.tds-menu-header-nav {
display: initial;
opacity: 0;
position: absolute;
left: 0;
height: 0;
overflow: hidden;
visibility: hidden
}
[id*=tds-menu-header-main--trigger]:checked~.tds-menu-header-nav {
display: initial;
overflow: unset;
opacity: 1;
position: fixed;
left: inherit;
height: 100vh;
visibility: visible
}
.tds-menu-mega .tds-menu-content .tds-btn {
width: 100%
}
.tds-menu-mega .tds-flex-item,
.tds-menu-mega .tds-menu--active-item .tds-menu-content {
max-width: 245px
}
}
@media (max-width:640px) {
.tds-menu-mega .tds-menu-mega--menu-items {
max-height: 80vh;
overflow-y: scroll;
overflow-x: hidden;
margin-bottom: 20vh;
width: 100vw
}
}
@media (max-height:360px) and (max-width:1199px) {
.tds-menu-mega .tds-menu-mega--menu-items {
max-height: 300px;
overflow-y: scroll;
overflow-x: hidden;
margin-bottom: 20vh;
width: 100vw
}
}
@media (min-height:361px) and (max-height:500px) and (max-width:1199px) {
.tds-menu-mega .tds-menu-mega--menu-items {
max-height: 320px;
overflow-y: scroll;
overflow-x: hidden;
margin-bottom: 20vh;
width: 100vw
}
}
@media (min-width:1200px) {
.tds-menu-mega--mobile-trigger {
display: none
}
.tds-menu-mega .region-item {
max-width: inherit
}
.tds-menu-mega.tds-menu--show .tds-menu-mega--menu-trigger.tds-menu--active-item {
margin-bottom: 0
}
.desktop-active~.tds-menu-header-nav .tds-menu--active-item,
.desktop-active~.tds-menu-header-nav .tds-menu-mega--primary-link:hover,
.tds-menu-header-alternate .desktop-active~.tds-menu-header-nav .tds-menu-mega--primary-link:hover,
.tds-menu-header-alternate [id*=tds-menu-header-main--trigger]:checked~.tds-menu-header-nav .tds-menu-mega--primary-link:hover,
[id*=tds-menu-header-main--trigger]:checked~.tds-menu-header-nav .tds-menu-mega--menu-trigger .tds-menu-mega--primary-link:hover {
color: #000;
color: var(--tds-color--black);
background: #f4f4f4;
background: var(--tds-color--grey70)
}
.tds-menu-mega .desktop-tablet-only {
display: inherit
}
.tds-menu-mega .mobile-only {
display: none
}
.tds-menu-header-nav {
display: inherit
}
.tds-menu-mega div.desktop-only {
display: block
}
.tds-menu-mega {
position: relative;
top: 0;
left: 0;
padding-left: 0;
height: 100vh;
max-width: 100%;
display: relative;
align-items: flex-start;
text-align: left;
max-height: 0;
transition: max-height .3s cubic-bezier(.25, .46, .45, .94), background-color .3s cubic-bezier(.25, .46, .45, .94);
transition: max-height var(--tds-menu-mega--animation-timing-fast) var(--tds-menu-mega--animation-transition), background-color var(--tds-menu-mega--animation-timing-fast) var(--tds-menu-mega--animation-transition);
direction: ltr;
background-color: transparent
}
.tds-menu-mega.tds-menu--show {
max-height: 289px;
width: 100vw;
max-width: 100vw;
left: -20px;
background-color: #fff;
background-color: var(--tds-color--white);
box-shadow: 0 0 10px 4px rgba(0, 0, 0, .1)
}
.tds-menu-mega a {
outline: none
}
.tds-menu-mega .tds-menu-mega--menu-trigger .tds-menu-mega--primary-link {
padding: 7px 16px;
font-size: 14px;
font-weight: 500;
line-height: 17px;
text-transform: none;
border-bottom: none;
width: auto;
color: #fff;
color: var(--tds-color--white)
}
.tds-menu-mega .tds-menu-mega--menu-trigger.tds--hide_on_mobile {
display: inherit
}
.tds-menu-mega .tds-menu--active-item .tds-menu-header-nav--list_link {
display: flex
}
.tds-menu-mega .tds-menu-mega--primary-link .tds-menu-mega--primary-link-icon {
display: none
}
.tds-menu-mega .tds-menu-content .tds-menu-list {
padding: 0;
margin: 0
}
.tds-menu-mega .tds-menu-mega--submenu {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr
}
.tds-menu-mega .tds-menu-mega--drilldown-menu li {
padding-bottom: 4px;
margin: 0;
text-align: initial;
padding-top: 0
}
.tds-menu-mega .locale-list-container-item ul li {
padding: 0;
margin: 0 0 16px;
margin: 0 0 var(--tds-size--2x) 0
}
.tds-menu-mega .tds-menu-mega--submenu .tds-menu-mega--submenu.tds-menu-list {
padding-left: 0;
padding-top: 0
}
.tds-menu-mega .tds-menu-content .tds-menu-mega--submenu li {
padding-bottom: 4px
}
.tds-menu-mega .tds-menu--active-item {
margin-top: 0
}
.desktop-active~.tds-menu-header-nav .tds-menu-header-nav--primary_right .tds-menu--active-item:before {
width: 40px;
height: 70px;
content: "";
display: block;
position: absolute;
transform: rotate(64deg);
margin-left: -40px
}
.tds-menu-mega .tds-menu-mega--menu-items {
position: inherit;
top: inherit;
z-index: 1;
padding: 10px 0 10px 10px;
padding: calc(var(--tds-menu-header-spacer)/2) 0 calc(var(--tds-menu-header-spacer)/2) calc(var(--tds-menu-header-spacer)/2);
width: 100%;
max-width: 100%
}
.tds-menu-mega.tds-menu--show .tds-menu-mega--menu-trigger {
display: block
}
.tds-menu-mega .tds-menu--active-item,
.tds-menu-mega .tds-menu-mega--primary-link:hover {
background: #393c41;
background: var(--tds-color--grey20);
border-radius: 100px;
border-radius: var(--tds-border-radius--pill);
box-shadow: none;
color: #fff;
color: var(--tds-color--white);
transition: background-color
}
.tds-menu-header-alternate .tds-menu-mega .tds-menu--active-item,
.tds-menu-header-alternate .tds-menu-mega .tds-menu-mega--primary-link:hover {
background: #f4f4f4;
background: var(--tds-color--grey70);
border-radius: 100px;
border-radius: var(--tds-border-radius--pill);
box-shadow: none;
color: #000;
color: var(--tds-color--black)
}
.tds-menu-mega .tds-menu--active-item a,
.tds-menu-mega .tds-menu-mega--primary-link:hover a {
text-decoration: none;
box-shadow: none
}
.tds-menu-mega .tds-menu-header-nav--list_link .tds-icon {
display: none
}
.tds-menu-mega .tds-flex-item:first-child {
padding-top: 0;
justify-content: flex-end;
display: flex
}
.tds-menu-mega .tds-flex-item:nth-child(2) {
padding-right: 16px;
padding-right: var(--tds-size--2x)
}
.tds-menu-mega .tds-menu-title {
width: 100%;
top: 0;
position: relative;
font-size: 28px;
font-weight: 500;
line-height: 36px
}
.tds-menu-mega .tds-menu--active-item .tds-menu-content {
left: 0;
position: fixed;
background: transparent;
overflow: visible;
width: 100vw;
max-width: 100%;
-webkit-animation: --tds-menu-mega-fade-in .6s cubic-bezier(.25, .46, .45, .94);
-webkit-animation: --tds-menu-mega-fade-in var(--tds-menu-mega--animation-timing) var(--tds-menu-mega--animation-transition);
animation: --tds-menu-mega-fade-in .6s cubic-bezier(.25, .46, .45, .94);
animation: --tds-menu-mega-fade-in var(--tds-menu-mega--animation-timing) var(--tds-menu-mega--animation-transition);
display: grid;
grid-template-columns: 1fr 1fr;
padding: 16px
}
.tds-menu-mega .tds-menu-mega--drilldown-menu.tds-menu-content {
grid-template-columns: 3fr 1fr
}
.tds-menu-mega .tds-menu-mega--drilldown-menu.tds-menu-content.drilldown-active {
grid-template-columns: 1fr
}
.tds-menu-mega .tds-menu--active-item.tds-menu-mega--blur-left .tds-menu-content {
-webkit-animation: --tds-menu-mega-blur-left .6s cubic-bezier(.25, .46, .45, .94);
-webkit-animation: --tds-menu-mega-blur-left var(--tds-menu-mega--animation-timing) var(--tds-menu-mega--animation-transition);
animation: --tds-menu-mega-blur-left .6s cubic-bezier(.25, .46, .45, .94);
animation: --tds-menu-mega-blur-left var(--tds-menu-mega--animation-timing) var(--tds-menu-mega--animation-transition)
}
.tds-menu-mega .tds-menu--active-item.tds-menu-mega--blur-right .tds-menu-content {
-webkit-animation: --tds-menu-mega-blur-right .6s cubic-bezier(.25, .46, .45, .94);
-webkit-animation: --tds-menu-mega-blur-right var(--tds-menu-mega--animation-timing) var(--tds-menu-mega--animation-transition);
animation: --tds-menu-mega-blur-right .6s cubic-bezier(.25, .46, .45, .94);
animation: --tds-menu-mega-blur-right var(--tds-menu-mega--animation-timing) var(--tds-menu-mega--animation-transition)
}
.tds-menu-mega .tds-menu-content .tds-menu-mega--additional-links.tds-menu-list {
margin-top: 16px;
margin-top: var(--tds-size--2x);
display: flex
}
.tds-menu-mega .tds-menu-mega--drilldown-menu-trigger {
margin-top: 0;
display: flex;
visibility: visible
}
.tds-menu-mega .tds-menu-content .tds-menu-mega--additional-links.tds-menu-list li {
width: inherit;
display: inline-block
}
.tds-menu-mega .tds-menu-mega--additional-links .tds-link {
font-size: 14px;
font-weight: 500;
line-height: 24px;
width: auto;
display: inline-block
}
.tds-menu-mega .tds-menu-mega--close {
z-index: 2;
display: none;
cursor: pointer
}
.tds-menu-mega .tds-menu-header-nav--list_item_last {
display: block;
height: auto;
position: absolute;
right: 10px
}
.tds-menu-mega.tds-menu--show .tds-menu-header-nav--list_item_last {
right: 30px
}
.tds-menu-mega .tds-menu-content-header {
margin-bottom: 16px;
margin-bottom: var(--tds-size--2x);
font-size: 14px;
font-weight: 500;
line-height: 16px
}
.tds-menu-mega .tds-menu--back {
display: none;
left: 32px;
left: var(--tds-size--4x);
position: fixed;
cursor: pointer;
z-index: 100;
padding-left: 16px;
padding-left: var(--tds-size--2x);
font-size: 12px;
font-weight: 500;
line-height: 14px;
top: 80px;
top: var(--tds-size--10x)
}
.tds-menu-mega.back-enabled .tds-menu--back {
position: absolute
}
.tds-menu-mega .tds-menu-mega--drilldown-menu-content {
display: none;
padding-top: 55px
}
.tds-menu-mega .tds-menu-mega--drilldown-menu .tds-menu-title {
position: relative;
grid-column: 1/span 4;
padding-bottom: 1.5rem
}
.tds-menu-mega .tds-menu-mega--drilldown-menu .tds-flex-item {
padding-top: 0
}
.tds-menu-mega span.region-item-current-language {
font-size: 14px;
font-weight: 500;
line-height: 24px;
font-family: HeiT ASC Traditional Chinese, M Hei PRC W45, AXIS Font Japanese W55, FB New Gothic, Gotham Medium, system, sans-serif;
font-family: var(--tds-font-combined--medium);
position: relative;
padding-right: 24px;
padding-right: var(--tds-size--3x);
padding-left: 10px
}
.tds-menu-mega .tds-menu-mega--drilldown-menu.drilldown-active .region-item-current-language {
display: none
}
.tds-menu-mega .locale-list-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
width: 50vw
}
.tds-menu-mega .locale-list-container-item .locale-region {
width: 100%;
padding-bottom: 16px;
padding-bottom: var(--tds-size--2x)
}
.tds-menu-mega .locale-list-container-item.middle ul {
-moz-column-count: 2;
column-count: 2
}
.tds-menu-mega .locale-list-container-item .region-link {
text-decoration: none;
box-shadow: none
}
.tds-menu-mega .locale-list-container-item h4 {
font-size: 14px;
font-weight: 500;
line-height: 16px;
padding-top: 0;
text-align: initial
}
.tds-menu-mega .tds-menu-header-nav--list_item .tds-menu-header-nav--list .tds-menu-mega--drilldown-menu-targeted-trigger,
.tds-menu-mega .tds-menu-mega--drilldown-menu-targeted-trigger {
display: none
}
.tds-menu-mega--overlay.desktop-active {
display: block
}
.tds-menu-mega.tds-menu--show .tds-menu-content .tds-flex-item {
-webkit-animation: --tds-menu-mega-fade-in .6s cubic-bezier(.25, .46, .45, .94);
-webkit-animation: --tds-menu-mega-fade-in .6s var(--tds-menu-mega--animation-transition);
animation: --tds-menu-mega-fade-in .6s cubic-bezier(.25, .46, .45, .94);
animation: --tds-menu-mega-fade-in .6s var(--tds-menu-mega--animation-transition)
}
.tds-menu-mega .tds-menu-mega--drilldown-menu-item.tds-menu--drilldown-active-item .tds-menu-mega--drilldown-menu-content {
direction: ltr;
display: flex;
-webkit-animation: --tds-menu-mega-fade-in .6s cubic-bezier(.25, .46, .45, .94);
-webkit-animation: --tds-menu-mega-fade-in var(--tds-menu-mega--animation-timing) var(--tds-menu-mega--animation-transition);
animation: --tds-menu-mega-fade-in .6s cubic-bezier(.25, .46, .45, .94);
animation: --tds-menu-mega-fade-in var(--tds-menu-mega--animation-timing) var(--tds-menu-mega--animation-transition)
}
.tds-menu-mega .tds-menu-mega--drilldown-menu.drilldown-active .tds-menu-mega--submenu-column,
.tds-menu-mega .tds-menu-mega--drilldown-menu.drilldown-active .tds-menu-title {
display: none
}
.tds-menu-mega .tds-menu-mega--drilldown-menu.drilldown-active .tds-flex-item.tds-menu--drilldown-active-item {
display: flex
}
.tds-menu-mega .tds-menu-mega--menu-trigger.tds--hide_on_desktop {
display: none
}
.tds-menu-mega.tds-menu--show.tds-menu-mega--drawer-medium {
max-height: 400px
}
.tds-menu-mega.tds-menu--show.tds-menu-mega--drawer-large {
max-height: 695px
}
.tds-menu-mega .tds-menu--active-item .tds-menu-mega--drilldown-menu {
padding: 16px 25vw;
padding: var(--tds-size--2x) 25vw
}
.tds-menu-mega .tds-image {
margin-right: 32px;
margin-right: var(--tds-size--4x);
max-width: 412px
}
.tds-menu-mega .tds-menu-mega--menu-trigger.tds--hide_on_tablet {
display: inherit
}
.tds-menu-mega .tds-menu-mega--menu-trigger.tds--hide_on_tablet.tds--hide_on_desktop {
display: none
}
}
:root {
--tds-btn-transition: background-color 300ms cubic-bezier(.5, .25, .25, .75), box-shadow 200ms cubic-bezier(0, .25, .25, .75), color 300ms cubic-bezier(.5, .25, .25, .75), font-size 300ms cubic-bezier(.5, .25, .25, .75), height 300ms cubic-bezier(.5, .25, .25, .75), min-width 300ms cubic-bezier(.5, .25, .25, .75), min-height 300ms cubic-bezier(.5, .25, .25, .75), opacity 200ms cubic-bezier(0, .25, .25, .75), padding 300ms cubic-bezier(.5, .25, .25, .75), width 300ms cubic-bezier(.5, .25, .25, .75);
--tds-btn-min_height: var(--tds-size--5x);
--tds-btn-min_width: calc(var(--tds-size)*25);
--tds-btn-max_width: calc(var(--tds-size)*50);
--tds-btn-block_start: var(--tds-size--1x);
--tds-btn-block_end: var(--tds-size--1x);
--tds-btn-font_size: var(--tds-font-size--20);
--tds-btn-line_height: 1.2;
--tds-btn-font_family: var(--tds-font-combined--medium);
--tds-btn-radius: var(--tds-border-radius--pill);
--tds-btn-border_width: var(--tds-border-width--large);
--tds-btn-border_style: solid;
--tds-btn-border_color: transparent;
--tds-btn-box_shadow: inset 0 0 0 0 transparent
}
.site-logo {
max-width: 100px
}
.tds-menu-header-default .tds-menu-header-alternate,
.tds-menu-header-default .tds-menu-header-main {
background-color: #fff;
background-color: var(--tds-color--white)
}
.tcl-menu-header--dark .tds-menu-header-alternate,
.tcl-menu-header--dark .tds-menu-header-main {
background-color: #000;
background-color: var(--tds-color--black)
}
.tcl-menu-header--dark .tds-menu-header-alternate .tds-menu-header-main--container,
.tcl-menu-header--dark .tds-menu-header-main .tds-menu-header-main--container {
-webkit-filter: invert(1);
filter: invert(1)
}
.tds-menu-header-alternate .site-content {
margin-top: 50px
}
.tds-menu-header-alternate .site-content-legacy {
margin-top: inherit
}
.adminimal-admin-toolbar .tds-menu-header-main {
display: none
}
.adminimal-admin-toolbar .tds-menu-header-legacy {
display: inherit
}
.tds-menu-header-nav--list .tds-menu-header-nav--list_item .tds-menu-mega--drilldown-menu-targeted-trigger {
display: none
}
@media (min-width:1200px) {
.tds-menu-mega .tds-image {
height: intrinsic
}
}
@media (max-width:1199px) {
#page .tds-menu-mega .tds-menu-mega--menu-items {
max-height: 80vh
}
}
.tds-menu-header-nav--primary .tds-menu-header-nav--list .tds-menu-header-nav--list {
margin-left: 0
}
.tds-menu-mega .region-item {
grid-template-columns: 0 1fr
}
@media (max-width:600px) {
.tds-menu-header-nav {
visibility: hidden
}
[id*=tds-menu-header-main--trigger]:checked~.tds-menu-header-nav {
visibility: visible
}
}
@media (min-width:1200px) {
.tds-menu-mega button.region-item-current-language {
text-indent: -20px;
padding-left: 20px
}
}
.tds-menu-header-alternate.tds-theme--cyberpunk .site-content {
margin-top: 0
}
.tds-theme--cyberpunk .tds-menu-header-nav--primary.tds-menu-mega .tds-menu-header-nav--list_link:hover {
opacity: 1
}
.tds-theme--cyberpunk .tds-menu-mega .tds-btn {
min-height: 40px;
min-height: var(--tds-btn-min_height);
min-width: 200px;
min-width: var(--tds-btn-min_width);
max-width: 400px;
max-width: var(--tds-btn-max_width);
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
margin-top: 8px;
margin-top: var(--tds-btn-block_start);
margin-bottom: 8px;
margin-bottom: var(--tds-btn-block_end);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-size: 12px;
font-size: var(--tds-btn-font_size);
font-family: HeiT ASC Traditional Chinese, M Hei PRC W45, AXIS Font Japanese W55, FB New Gothic, Gotham Medium, system, sans-serif;
font-family: var(--tds-btn-font_family);
line-height: 1.2;
line-height: var(--tds-btn-line_height);
color: #fff;
color: var(--tds-color--white);
cursor: pointer;
text-align: center;
text-decoration: none;
text-transform: uppercase;
border-radius: 100px;
border-radius: var(--tds-btn-radius);
border: 3px solid transparent;
border: var(--tds-btn-border_width) var(--tds-btn-border_style) var(--tds-btn-border_color);
box-shadow: inset 0 0 0 0 transparent;
box-shadow: var(--tds-btn-box_shadow);
outline: none;
height: inherit;
-webkit-filter: inherit;
filter: inherit;
letter-spacing: inherit;
overflow: inherit
}
@media (min-width:600px) {
.tds-theme--cyberpunk .tds-menu-mega .tds-btn {
left: -8px;
left: calc(var(--tds-size)*-1);
width: auto;
font-size: 12px;
font-size: var(--tds-font-size--20);
margin-left: 8px;
margin-left: var(--tds-size);
margin-right: 8px;
margin-right: var(--tds-size);
padding: 5px 40px;
padding: 5px var(--tds-size--5x)
}
[dir=rtl] .tds-btn {
left: 0;
right: -8px;
right: calc(var(--tds-size)*-1)
}
}
@media (max-width:599px) {
.tds-theme--cyberpunk .tds-menu-mega .tds-btn {
width: 100%;
min-width: 100%
}
}
.tds-theme--cyberpunk .tds-menu-mega .tds-btn.tds-btn--disabled,
.tds-theme--cyberpunk .tds-menu-mega .tds-btn.tds-btn--disabled:active,
.tds-theme--cyberpunk .tds-menu-mega .tds-btn.tds-btn--disabled:focus,
.tds-theme--cyberpunk .tds-menu-mega .tds-btn.tds-btn--disabled:hover,
.tds-theme--cyberpunk .tds-menu-mega .tds-btn[disabled],
.tds-theme--cyberpunk .tds-menu-mega .tds-btn[disabled]:active,
.tds-theme--cyberpunk .tds-menu-mega .tds-btn[disabled]:focus,
.tds-theme--cyberpunk .tds-menu-mega .tds-btn[disabled]:hover {
opacity: .7;
opacity: var(--tds-opacity--70);
cursor: not-allowed;
box-shadow: none
}
.tds-theme--cyberpunk .tds-menu-mega .tds-btn,
.tds-theme--cyberpunk .tds-menu-mega .tds-btn.tds-btn--disabled:active,
.tds-theme--cyberpunk .tds-menu-mega .tds-btn.tds-btn--disabled:focus,
.tds-theme--cyberpunk .tds-menu-mega .tds-btn.tds-btn--disabled:hover,
.tds-theme--cyberpunk .tds-menu-mega .tds-btn[disabled]:active,
.tds-theme--cyberpunk .tds-menu-mega .tds-btn[disabled]:focus,
.tds-theme--cyberpunk .tds-menu-mega .tds-btn[disabled]:hover {
background-color: #171a20;
background-color: var(--tds-color--grey10)
}
.tds-theme--cyberpunk .tds-menu-mega .tds-btn,
.tds-theme--cyberpunk .tds-menu-mega .tds-btn--disabled,
.tds-theme--cyberpunk .tds-menu-mega .tds-btn:disabled,
.tds-theme--cyberpunk .tds-menu-mega .tds-btn:hover {
transition: background-color .3s cubic-bezier(.5, .25, .25, .75), box-shadow .2s cubic-bezier(0, .25, .25, .75), color .3s cubic-bezier(.5, .25, .25, .75), font-size .3s cubic-bezier(.5, .25, .25, .75), height .3s cubic-bezier(.5, .25, .25, .75), min-width .3s cubic-bezier(.5, .25, .25, .75), min-height .3s cubic-bezier(.5, .25, .25, .75), opacity .2s cubic-bezier(0, .25, .25, .75), padding .3s cubic-bezier(.5, .25, .25, .75), width .3s cubic-bezier(.5, .25, .25, .75);
transition: var(--tds-btn-transition)
}
.tds-theme--cyberpunk .tds-menu-mega .tds-btn--outline:after,
.tds-theme--cyberpunk .tds-menu-mega .tds-btn--outline:before {
display: none
}
.tds-theme--cyberpunk .tds-menu-mega .tds-btn--outline {
color: #171a20;
color: var(--tds-color--grey10);
background-color: transparent;
border-color: #171a20;
border-color: var(--tds-color--grey10);
-webkit-animation: none;
animation: none
}
.tds-theme--cyberpunk .tds-menu-mega .tds-scrim--black .tds-btn--outline {
color: #fff;
color: var(--tds-color--white);
border-color: #fff;
border-color: var(--tds-color--white)
}
.tds-theme--cyberpunk .tds-menu-mega .tds-btn--outline:active,
.tds-theme--cyberpunk .tds-menu-mega .tds-btn--outline:focus,
.tds-theme--cyberpunk .tds-menu-mega .tds-btn--outline:hover {
background-color: #000;
background-color: var(--tds-color--black);
color: #fff;
color: var(--tds-color--white)
}
.tds-theme--cyberpunk .tds-menu-mega .tds-btn--outline.tds-btn--disabled:active,
.tds-theme--cyberpunk .tds-menu-mega .tds-btn--outline.tds-btn--disabled:focus,
.tds-theme--cyberpunk .tds-menu-mega .tds-btn--outline.tds-btn--disabled:hover,
.tds-theme--cyberpunk .tds-menu-mega .tds-btn--outline[disabled]:active,
.tds-theme--cyberpunk .tds-menu-mega .tds-btn--outline[disabled]:focus,
.tds-theme--cyberpunk .tds-menu-mega .tds-btn--outline[disabled]:hover {
background-color: transparent;
color: #171a20;
color: var(--tds-color--grey10)
}
.tds-theme--cyberpunk .tds-menu-mega .tds-btn--outline:hover {
background-color: #171a20;
background-color: var(--tds-color--grey10);
color: #fff;
color: var(--tds-color--white)
}
.tds-theme--cyberpunk .tds-menu-mega .tds-btn--outline.tds-btn--white {
border-color: #fff;
border-color: var(--tds-color--white);
color: #fff;
color: var(--tds-color--white)
}
.tds-theme--cyberpunk .tds-menu-mega .tds-btn--outline.tds-btn--white:active,
.tds-theme--cyberpunk .tds-menu-mega .tds-btn--outline.tds-btn--white:focus,
.tds-theme--cyberpunk .tds-menu-mega .tds-btn--outline.tds-btn--white:hover {
background-color: #fff;
background-color: var(--tds-color--white);
color: #171a20;
color: var(--tds-color--grey10)
}
.tds-theme--cyberpunk .tds-menu-mega .tds-btn--outline.tds-btn--outline.tds-btn--white[disabled]:active,
.tds-theme--cyberpunk .tds-menu-mega .tds-btn--outline.tds-btn--outline.tds-btn--white[disabled]:focus,
.tds-theme--cyberpunk .tds-menu-mega .tds-btn--outline.tds-btn--outline.tds-btn--white[disabled]:hover,
.tds-theme--cyberpunk .tds-menu-mega .tds-btn--outline.tds-btn--white.tds-btn--disabled:active,
.tds-theme--cyberpunk .tds-menu-mega .tds-btn--outline.tds-btn--white.tds-btn--disabled:focus,
.tds-theme--cyberpunk .tds-menu-mega .tds-btn--outline.tds-btn--white.tds-btn--disabled:hover {
background-color: transparent;
color: #fff;
color: var(--tds-color--white)
}
.tds-menu-mega .tds-icon .tds-icon--circle {
visibility: hidden
}
.tds-menu-mega .region-item.hidden {
padding-left: 20px
}
@media (min-width:1199px) {
.tds-menu-mega .region-list .region-item:nth-child(13).hasSublang {
margin-top: 90px
}
.tds-menu-mega .tds-menu-mega--drilldown-menu-content {
padding-top: 30px;
padding-left: 40px
}
}
@media (max-width:639px) {
.tds-menu-header-legacy [id*=tds-menu-header-main--trigger]:checked~.tds-menu-header-nav {
display: block
}
.tds-menu-header-legacy [id*=tds-menu-header-main--trigger]:checked~[for*=tds-menu-header-main--trigger] .tds-menu-header-main--trigger_icon:after {
background: transparent
}
.tds-menu-header-alternate [id*=tds-menu-header-main--trigger]:checked~[id*=tds-menu-header-mask],
.tds-menu-header-alternate_mobile [id*=tds-menu-header-main--trigger]:checked~[id*=tds-menu-header-mask] {
top: 0
}
}
.tds-menu-header-alternate .tds-menu-header-legacy .tds-menu-header-main--logo svg {
-webkit-filter: invert(0);
filter: invert(0)
}
.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(//www.sprenewables.com/core/themes/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(//www.sprenewables.com/core/themes/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(//www.sprenewables.com/core/themes/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(//www.sprenewables.com/core/themes/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(//www.sprenewables.com/core/themes/stable/css/system/components/../../../images/core/icons/e32700/error.svg)
}
.system-status-counter__status-icon--warning:before {
background-image: url(//www.sprenewables.com/core/themes/stable/css/system/components/../../../images/core/icons/e29700/warning.svg)
}
.system-status-counter__status-icon--checked:before {
background-image: url(//www.sprenewables.com/core/themes/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(//www.sprenewables.com/core/themes/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(//www.sprenewables.com/core/themes/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(//www.sprenewables.com/core/themes/stable/css/system/components/../../../images/core/icons/787878/twistie-down.svg)
}
.tablesort--desc {
background-image: url(//www.sprenewables.com/core/themes/stable/css/system/components/../../../images/core/icons/787878/twistie-up.svg)
}
div.tree-child {
background: url(//www.sprenewables.com/core/themes/stable/css/system/components/../../../images/core/tree.png) no-repeat 11px center
}
div.tree-child-last {
background: url(//www.sprenewables.com/core/themes/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(//www.sprenewables.com/core/themes/stable/css/system/components/../../../images/core/tree.png) no-repeat -11px center
}
body:not(.scroll_locking--enabled) .sticky-nav--desktop,
body:not(.scroll_locking--enabled) .sticky-nav--mobile {
background-color: rgba(34, 34, 34, .9);
height: 62px;
opacity: 0;
position: fixed;
-webkit-transform: translateY(-62px);
transform: translateY(-62px);
-webkit-transition: -webkit-transform .3s ease-in-out;
transition: -webkit-transform .3s ease-in-out;
transition: transform .3s ease-in-out;
transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out
}
body:not(.scroll_locking--enabled) .sticky-nav--desktop a,
body:not(.scroll_locking--enabled) .sticky-nav--mobile a {
-webkit-filter: invert(1);
filter: invert(1)
}
body:not(.scroll_locking--enabled) .sticky-nav--desktop.show,
body:not(.scroll_locking--enabled) .sticky-nav--mobile.show {
-webkit-transform: translate(0)!important;
transform: translate(0)!important
}
[dir=ltr] body:not(.scroll_locking--enabled) .sticky-nav--mobile {
left: 0
}
[dir=rtl] body:not(.scroll_locking--enabled) .sticky-nav--mobile {
right: 0
}
body:not(.scroll_locking--enabled) .sticky-nav--mobile {
-ms-flex-pack: distribute;
justify-content: space-around;
inset-inline-start: 0;
width: 100%
}
body:not(.scroll_locking--enabled) .sticky-nav--mobile>.sticky-nav--buttons {
padding: 0 20px
}
@media (min-width:640px) {
body:not(.scroll_locking--enabled) .sticky-nav--mobile {
display: none!important
}
}
@media (max-width:639px) {
body:not(.scroll_locking--enabled) .sticky-nav--desktop {
display: none!important
}
}
@media (max-width:639px) {
body.scroll_locking--enabled .sticky-nav--mobile {
background-color: #fff;
background-color: var(--tds-color--white);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .1);
box-shadow: 0 0 10px rgba(0, 0, 0, .1);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 0 -1%;
width: 102%;
z-index: 999
}
body.scroll_locking--enabled .sticky-nav--desktop {
display: none
}
body.scroll_locking--enabled .sticky-nav--buttons {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
white-space: nowrap;
width: 100%
}
body.scroll_locking--enabled .sticky-nav--buttons .tds-btn {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin: 4px
}
body.scroll_locking--enabled .sticky-nav--buttons .tds-btn.tds-o-btn {
font-size: 10px;
font-size: var(--tds-font-size--10);
height: 28px;
max-width: none;
min-height: 0;
min-width: 80px;
padding: 0 24px;
width: auto
}
}
@media (max-width:639px) {
.sticky-nav--mobile {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-ms-flex-pack: distribute;
justify-content: space-around;
position: fixed;
top: 0;
z-index: 999
}
}
@media (min-width:640px) {
.sticky-nav--mobile {
display: none
}
[dir=ltr] .sticky-nav--desktop {
left: 0
}
[dir=rtl] .sticky-nav--desktop {
right: 0
}
.sticky-nav--desktop {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
display: none;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-ms-flex-pack: distribute;
justify-content: space-around;
inset-inline-start: 0;
position: fixed;
top: 0;
width: 100vw;
z-index: 999
}
}
.sticky-nav--edit-mode {
display: none
}
.drawer-nav--sticky_header .tds-list a.tds-btn.tds-btn:not(.tds-btn--outline):hover {
background-color: #fff;
background-color: var(--tds-color--white);
border-color: #393c41;
border-color: var(--tds-color--grey20);
color: #000;
color: var(--tds-color--black)
}
.sticky-nav--logo_container {
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: horizontal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin: 0;
padding: 0;
width: 100%
}
.sticky-nav--logo_container,
.sticky-nav--logo_container .sticky-nav--buttons {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-direction: normal
}
.sticky-nav--logo_container .sticky-nav--buttons {
-webkit-box-orient: vertical;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap
}
.sticky-nav--logo_container .tds-menu-mega-main--logo {
-webkit-filter: invert(1)!important;
filter: invert(1)!important
}
.animate_scrolltop--to_reveal {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-property: all;
transition-property: all
}
.animate_scrolltop--revealed {
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
.sticky-nav--logo {
-webkit-box-shadow: none;
box-shadow: none;
padding: 15px 20px
}
.sticky-nav--arrow {
padding: 15px 24px
}
.sticky-nav--arrow .tds-icon {
width: 20px
}
@media (max-width:639px) {
.sticky-nav--arrow {
padding: 15px
}
}
.tds-container .sticky-nav--arrow {
padding: 0
}
.sticky-nav--arrow,
.sticky-nav--logo {
-webkit-box-shadow: none;
box-shadow: none;
display: inline-block
}
.sticky-nav--arrow .tds-icon,
.sticky-nav--logo .tds-icon {
height: 20px;
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
@media (min-width:640px) {
body:not(.page_has--drawer_open):not(.page_has--first_screen-in_viewport) .sticky-nav--desktop {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
body:not(.page_has--drawer_open).page_has--inverted_static_nav .sticky-nav--desktop {
-webkit-filter: invert(1);
filter: invert(1)
}
body:not(.page_has--drawer_open).page_has--inverted_static_nav .sticky-nav--logo_container .tds-menu-mega-main--logo {
-webkit-filter: invert(1)!important;
filter: invert(1)!important
}
body:not(.page_has--drawer_open).page_has--inverted_with_default_caret_static_nav .sticky-nav--logo {
-webkit-filter: invert(1);
filter: invert(1)
}
body:not(.page_has--drawer_open).page_has--inverted_with_default_caret_static_nav .sticky-nav--logo_container .tds-menu-mega-main--logo {
-webkit-filter: invert(1)!important;
filter: invert(1)!important
}
body:not(.page_has--drawer_open).page_has--default_with_invert_caret_static_nav .sticky-nav--arrow {
-webkit-filter: invert(1);
filter: invert(1)
}
}
.adminimal-admin-toolbar .sticky-nav--desktop {
top: 80px
}
.adminimal-admin-toolbar .sticky-nav--edit-mode {
display: block
}
.layout-builder__section .block-inline-blocksticky-navigation.tds--is_hidden,
.layout-builder__section .block-inline-blocksticky-navigation .tds--is_hidden,
.layout-builder__section [data-block-id="tesla_product:sticky_navigation"].tds--is_hidden,
.layout-builder__section [data-block-id="tesla_product:sticky_navigation"] .tds--is_hidden {
display: block!important
}
.layout-builder__section .sticky-nav--mobile {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-transform: none;
transform: none
}
.layout-builder__section .js-layout-builder-block.layout-builder-block.contextual-region.ui-sortable-handle {
border-bottom: 1px dashed #d6d6d6
}
.drawer-nav {
display: none;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
.drawer-nav .drawer-nav-close_label,
.drawer-nav .drawer-nav-next_label {
z-index: 2
}
.drawer-nav .drawer-nav-close_button {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
top: auto;
bottom: 30px;
inset-block: auto 30px;
-webkit-box-shadow: none;
box-shadow: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-size: 12px;
font-size: var(--tds-font-size--20);
position: fixed;
z-index: 1
}
[dir=ltr] .drawer-nav .drawer-nav-close_button:after {
left: -3px
}
[dir=rtl] .drawer-nav .drawer-nav-close_button:after {
right: -3px
}
.drawer-nav .drawer-nav-close_button:after {
background-color: hsla(0, 0%, 97.3%, .4);
border-radius: 40px;
content: "";
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 36px;
inset-inline-start: -3px;
position: absolute;
top: -3px;
width: 36px;
z-index: 1
}
.drawer-nav .drawer-nav-close_button.show-label:after,
.drawer-nav .drawer-nav-close_button:hover:after {
-webkit-transition: width .2s ease;
transition: width .2s ease;
width: 116px
}
[dir=ltr] .drawer-nav .drawer-nav-close_button .drawer-nav-close_label {
float: left
}
[dir=rtl] .drawer-nav .drawer-nav-close_button .drawer-nav-close_label {
float: right
}
[dir=ltr] .drawer-nav .drawer-nav-close_button .drawer-nav-close_label {
left: 35px
}
[dir=rtl] .drawer-nav .drawer-nav-close_button .drawer-nav-close_label {
right: 35px
}
[dir=ltr] .drawer-nav .drawer-nav-close_button .drawer-nav-close_label {
margin-left: 0
}
[dir=ltr] .drawer-nav .drawer-nav-close_button .drawer-nav-close_label,
[dir=rtl] .drawer-nav .drawer-nav-close_button .drawer-nav-close_label {
margin-right: 0
}
[dir=rtl] .drawer-nav .drawer-nav-close_button .drawer-nav-close_label {
margin-left: 0
}
.drawer-nav .drawer-nav-close_button .drawer-nav-close_label {
color: #000;
color: var(--tds-color--black);
float: inline-start;
inset-inline-start: 35px;
-webkit-margin-start: 0;
margin-inline-start: 0;
-webkit-margin-end: 0;
margin-inline-end: 0;
opacity: 0;
-webkit-padding-before: 0;
padding-top: 0;
position: absolute;
text-transform: uppercase;
-webkit-transition: background-color .2s ease;
transition: background-color .2s ease;
width: 0;
word-break: keep-all
}
.drawer-nav .drawer-nav-close_button .tds-icon {
background-color: transparent;
border: 3px solid #000;
border: 3px solid var(--tds-color--black);
border-radius: 20px;
cursor: pointer;
-webkit-transition: background-color .15s ease-in-out, color .15s ease-in-out;
transition: background-color .15s ease-in-out, color .15s ease-in-out;
z-index: 2
}
.drawer-nav .drawer-nav-close_button .tds-icon.tds-o-icon-hidden {
display: none
}
.drawer-nav .drawer-nav-close_button .tds-icon.tds-icon-close {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBkPSJNNjAuMSAzM0w0OS45IDQzLjIgMzkuNyAzM2wtNi44IDYuOEw0My4xIDUwIDMyLjkgNjAuMmw2LjggNi44IDEwLjItMTAuMkw2MC4xIDY3bDYuNy02LjhMNTYuNyA1MGwxMC4xLTEwLjIiLz48L3N2Zz4=")
}
@media (max-width:540px) {
.drawer-nav .drawer-nav-close_button .tds-icon.tds-icon-chevron_down {
display: none
}
.drawer-nav .drawer-nav-close_button .tds-icon.tds-icon-close,
.drawer-nav .drawer-nav-close_button .tds-icon.tds-icon-close.tds-o-icon-hidden {
display: block
}
}
.drawer-nav .drawer-nav-close_button .tds-icon.tds-o-icon--medium {
border-width: 2px;
height: 30px;
width: 30px
}
.drawer-nav .drawer-nav-close_button .tds-icon:hover {
background-color: #fff;
background-color: var(--tds-color--white);
border: 3px solid #fff;
border: 3px solid var(--tds-color--white);
-webkit-filter: invert(100%);
filter: invert(100%)
}
.drawer-nav .close_button--white {
-webkit-filter: invert(100%);
filter: invert(100%)
}
.drawer-nav .close_button--white .drawer-nav-close_label {
color: #000;
color: var(--tds-color--black)
}
@media (-ms-high-contrast:active),
(-ms-high-contrast:none) {
.drawer-nav .close_button--white.drawer-nav-close_button:after {
background: transparent
}
.drawer-nav .close_button--white.drawer-nav-close_button .drawer-nav-close_label {
color: #fff
}
.drawer-nav .close_button--white.drawer-nav-close_button .tds-icon-chevron_down,
.drawer-nav .close_button--white.drawer-nav-close_button .tds-icon-close {
border-color: #fff
}
}
.drawer-nav .position-absolute--top {
bottom: auto!important;
position: absolute
}
@media (min-width:640px) {
.drawer-nav .drawer-nav--logo_container {
margin: 0;
padding: 0
}
.drawer-nav .drawer-nav--logo_container .drawer-nav--logo {
-webkit-box-shadow: none;
box-shadow: none;
display: block;
padding: 15px 0
}
.drawer-nav .drawer-nav--logo_container .drawer-nav--logo .tds-icon {
height: 20px;
width: 104px
}
[dir=ltr] .drawer-nav .drawer-nav--sticky_header {
left: 0
}
[dir=rtl] .drawer-nav .drawer-nav--sticky_header {
right: 0
}
.drawer-nav .drawer-nav--sticky_header {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: hsla(0, 0%, 100%, .89);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
inset-inline-start: 0;
position: fixed;
top: 0;
-webkit-transform: translateY(-60px);
transform: translateY(-60px);
-webkit-transition: -webkit-transform .2s ease;
transition: -webkit-transform .2s ease;
transition: transform .2s ease;
transition: transform .2s ease, -webkit-transform .2s ease;
width: 100%;
z-index: 5;
padding: 0 20px
}
.drawer-nav .drawer-nav--sticky_header .tds-o-btn {
font-size: 10px;
font-size: var(--tds-font-size--10);
height: 28px;
margin: 4px;
max-width: none;
min-height: 0;
min-width: 80px;
padding: 0 24px;
width: auto;
min-width: 160px
}
.drawer-nav .drawer-nav--sticky_header:not(".tds-container") {
height: 46px;
padding: 0 20px
}
.drawer-nav .drawer-nav--sticky_header .tds-o-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
margin: 0;
width: 100%
}
}
.page_has--drawer_open .drawer-nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
@media (max-width:639px) {
.page_has--drawer_open .drawer-nav .drawer-nav--sticky_header {
display: none
}
}
@media (min-width:640px) {
.drawer-nav--sticky_header .tds-menu-mega-main--logo {
-webkit-filter: invert(1)!important;
filter: invert(1)!important
}
.page_has--drawer_next .drawer-nav .drawer-nav--sticky_header,
.page_has--full-drawer_viewport .drawer-nav .drawer-nav--sticky_header {
-webkit-transform: translateY(0);
transform: translateY(0)
}
.page_has--inverted_drawer_static_nav .drawer-nav .drawer-nav--sticky_header {
background-color: rgba(19, 19, 19, .89)
}
.page_has--inverted_drawer_static_nav .drawer-nav--sticky_header .drawer-nav--logo {
-webkit-filter: invert(100%);
filter: invert(100%)
}
.page_has--inverted_drawer_static_nav .drawer-nav--sticky_header .tds-menu-mega-main--logo {
-webkit-filter: invert(0)!important;
filter: invert(0)!important
}
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape) {
.drawer-nav .drawer-nav-close_button:hover .tds-icon-chevron_down~.drawer-nav-next_label,
.drawer-nav .drawer-nav-close_button:hover .tds-icon-close~.drawer-nav-close_label {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
}
@media (min-width:541px) {
[dir=ltr] .page_has--drawer_open.page_has--drawer_next .drawer-nav-close_button.show-label .drawer-nav-close_label.drawer-nav-close_label--next,
[dir=ltr] .page_has--drawer_open.page_has--drawer_next .drawer-nav-close_button:hover .drawer-nav-close_label.drawer-nav-close_label--next {
margin-left: 4px
}
[dir=rtl] .page_has--drawer_open.page_has--drawer_next .drawer-nav-close_button.show-label .drawer-nav-close_label.drawer-nav-close_label--next,
[dir=rtl] .page_has--drawer_open.page_has--drawer_next .drawer-nav-close_button:hover .drawer-nav-close_label.drawer-nav-close_label--next {
margin-right: 4px
}
[dir=ltr] .page_has--drawer_open.page_has--drawer_next .drawer-nav-close_button.show-label .drawer-nav-close_label.drawer-nav-close_label--next,
[dir=ltr] .page_has--drawer_open.page_has--drawer_next .drawer-nav-close_button:hover .drawer-nav-close_label.drawer-nav-close_label--next {
margin-right: 20px
}
[dir=rtl] .page_has--drawer_open.page_has--drawer_next .drawer-nav-close_button.show-label .drawer-nav-close_label.drawer-nav-close_label--next,
[dir=rtl] .page_has--drawer_open.page_has--drawer_next .drawer-nav-close_button:hover .drawer-nav-close_label.drawer-nav-close_label--next {
margin-left: 20px
}
.page_has--drawer_open.page_has--drawer_next .drawer-nav-close_button.show-label .drawer-nav-close_label.drawer-nav-close_label--next,
.page_has--drawer_open.page_has--drawer_next .drawer-nav-close_button:hover .drawer-nav-close_label.drawer-nav-close_label--next {
-webkit-margin-start: 4px;
margin-inline-start: 4px;
-webkit-margin-end: 20px;
margin-inline-end: 20px;
opacity: 1;
width: auto
}
[dir=ltr] .page_has--drawer_open:not(.page_has--drawer_next) .drawer-nav-close_button.show-label .drawer-nav-close_label.drawer-nav-close_label--close,
[dir=ltr] .page_has--drawer_open:not(.page_has--drawer_next) .drawer-nav-close_button:hover .drawer-nav-close_label.drawer-nav-close_label--close {
margin-left: 4px
}
[dir=rtl] .page_has--drawer_open:not(.page_has--drawer_next) .drawer-nav-close_button.show-label .drawer-nav-close_label.drawer-nav-close_label--close,
[dir=rtl] .page_has--drawer_open:not(.page_has--drawer_next) .drawer-nav-close_button:hover .drawer-nav-close_label.drawer-nav-close_label--close {
margin-right: 4px
}
[dir=ltr] .page_has--drawer_open:not(.page_has--drawer_next) .drawer-nav-close_button.show-label .drawer-nav-close_label.drawer-nav-close_label--close,
[dir=ltr] .page_has--drawer_open:not(.page_has--drawer_next) .drawer-nav-close_button:hover .drawer-nav-close_label.drawer-nav-close_label--close {
margin-right: 20px
}
[dir=rtl] .page_has--drawer_open:not(.page_has--drawer_next) .drawer-nav-close_button.show-label .drawer-nav-close_label.drawer-nav-close_label--close,
[dir=rtl] .page_has--drawer_open:not(.page_has--drawer_next) .drawer-nav-close_button:hover .drawer-nav-close_label.drawer-nav-close_label--close {
margin-left: 20px
}
.page_has--drawer_open:not(.page_has--drawer_next) .drawer-nav-close_button.show-label .drawer-nav-close_label.drawer-nav-close_label--close,
.page_has--drawer_open:not(.page_has--drawer_next) .drawer-nav-close_button:hover .drawer-nav-close_label.drawer-nav-close_label--close {
-webkit-margin-start: 4px;
margin-inline-start: 4px;
-webkit-margin-end: 20px;
margin-inline-end: 20px;
opacity: 1;
width: auto
}
.page_has--drawer_open:not(.page_has--drawer_next) .drawer-nav-close_button.show-label .drawer-nav-close_label.drawer-nav-close_label--next,
.page_has--drawer_open:not(.page_has--drawer_next) .drawer-nav-close_button:hover .drawer-nav-close_label.drawer-nav-close_label--next {
opacity: 0
}
}
.adminimal-admin-toolbar .drawer-nav {
display: block
}
.adminimal-admin-toolbar .drawer-nav>a {
display: none
}
.adminimal-admin-toolbar .drawer-nav .drawer-nav--sticky_header {
position: relative;
-webkit-transform: none;
transform: none
}
.layout-builder__section .block-inline-blockdrawer-navigation.tds--is_hidden,
.layout-builder__section .block-inline-blockdrawer-navigation .tds--is_hidden,
.layout-builder__section [data-block-id="tesla_product:drawer_navigation"].tds--is_hidden,
.layout-builder__section [data-block-id="tesla_product:drawer_navigation"] .tds--is_hidden {
display: block!important
}
.layout-builder__section .js-layout-builder-block.layout-builder-block.contextual-region.ui-sortable-handle {
border-bottom: 1px dashed #d6d6d6
}
.layout-builder__section .drawer-nav .drawer-nav--sticky_header {
max-width: 100%
}
:root {
--media-height: none
}
.browser-is-ios-chrome section.order {
min-height: -webkit-fit-content;
min-height: -moz-fit-content;
min-height: fit-content
}
section.order {
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
height: calc(100vh - 94px);
height: none;
height: var(--media-height);
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
@media (max-width:639px) {
section.order {
height: 100%
}
}
@media (max-width:839px) and (orientation:landscape) {
section.order .tds-flex {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap
}
}
section.order.tds-scrim--black .order--content p,
section.order.tds-scrim--black a:not(.tds-btn) {
color: #fff;
color: var(--tds-color--white)
}
[dir=ltr] section.order.order--no-image .tds-flex {
margin-left: 0!important
}
[dir=rtl] section.order.order--no-image .tds-flex {
margin-right: 0!important
}
section.order.order--no-image .tds-flex {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-margin-start: 0!important;
margin-inline-start: 0!important;
text-align: center
}
section.order.order--no-image .tds-flex .order--content {
max-width: 100%;
padding: 0
}
section.order.order--no-image .tds-flex:first-of-type {
margin-top: 5%;
min-height: 1px;
padding-bottom: 2vh
}
section.order.order--no-image .tds-flex .order--buttons {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
[dir=ltr] section.order.order--no-image .tds-flex .order--buttons .tds-o-btn {
left: 0
}
[dir=rtl] section.order.order--no-image .tds-flex .order--buttons .tds-o-btn {
right: 0
}
section.order.order--no-image .tds-flex .order--buttons .tds-o-btn {
inset-inline-start: 0
}
@media (max-width:639px) {
section.order.order--no-image .tds-flex {
margin: 0;
padding: 32px var(--tds-gutter) 0;
width: 100%
}
}
@media (min-width:1024px) {
section.order.order--no-image .tds-flex .order--buttons {
padding: 0 12px
}
}
[dir=ltr] section.order.order--image .tds-flex {
margin-left: 15%;
margin-right: 0
}
[dir=rtl] section.order.order--image .tds-flex {
margin-right: 15%;
margin-left: 0
}
section.order.order--image .tds-flex {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
margin-top: 0;
margin-bottom: 0;
margin-block: 0;
margin-inline: 15% 0;
width: 85%
}
section.order.order--image .tds-flex:first-of-type {
margin-top: 5%;
min-height: 1px;
padding-bottom: 2vh
}
@media (max-width:839px) {
[dir=ltr] section.order.order--image .tds-flex {
margin-left: 10%;
margin-right: 0
}
[dir=rtl] section.order.order--image .tds-flex {
margin-right: 10%;
margin-left: 0
}
section.order.order--image .tds-flex {
margin-top: 0;
margin-bottom: 0;
margin-block: 0;
margin-inline: 10% 0;
width: 90%
}
}
@media (max-width:639px) {
[dir=ltr] section.order.order--image .tds-flex {
margin-left: 0
}
[dir=rtl] section.order.order--image .tds-flex {
margin-right: 0
}
section.order.order--image .tds-flex {
-webkit-margin-start: 0;
margin-inline-start: 0;
padding: 32px var(--tds-gutter) 0;
width: 100%
}
}
section.order .order--content {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
max-width: 444px
}
@media (-ms-high-contrast:active),
(-ms-high-contrast:none) {
section.order .order--content {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1
}
}
@supports (-ms-accelerator:true) or (-ms-ime-align:auto) {
section.order .order--content {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1
}
}
@media (max-width:839px) {
section.order .order--content {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
max-width: 304px
}
}
@media (max-width:639px) {
section.order .order--content {
-ms-flex-item-align: start;
align-self: flex-start;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
margin-bottom: 15px;
min-width: 100%;
padding: 0
}
}
@media (max-width:839px) and (orientation:landscape) {
section.order .order--content {
-ms-flex-item-align: auto;
-ms-grid-row-align: auto;
align-self: auto
}
}
@media (min-width:840px) {
section.order .order--content {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
max-width: none;
width: 444px
}
}
@media (min-width:1367px) and (orientation:landscape) {
section.order .order--content {
max-width: none;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content
}
}
section.order .order--content p {
color: #5c5e62;
color: var(--tds-color--grey30)
}
section.order .order--content .order--buttons {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
padding-bottom: 16px;
padding-bottom: var(--tds-size--2x)
}
@media (max-width:639px) {
section.order .order--content .order--buttons {
margin-top: 24px
}
}
section.order .order--content .tds-btn {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
margin-bottom: 4px;
margin-top: 4px;
white-space: nowrap
}
@media (min-width:1024px) {
[dir=ltr] section.order .order--content .tds-btn {
margin-left: 5px
}
[dir=ltr] section.order .order--content .tds-btn,
[dir=rtl] section.order .order--content .tds-btn {
margin-right: 5px
}
[dir=rtl] section.order .order--content .tds-btn {
margin-left: 5px
}
section.order .order--content .tds-btn {
-webkit-margin-start: 5px;
margin-inline-start: 5px;
-webkit-margin-end: 5px;
margin-inline-end: 5px
}
}
[dir=ltr] section.order .order--content .tds-btn:only-of-type {
left: 0
}
[dir=rtl] section.order .order--content .tds-btn:only-of-type {
right: 0
}
section.order .order--content .tds-btn:only-of-type {
inset-inline-start: 0;
max-width: 250px;
min-width: 0;
width: 100%
}
@media (max-width:639px) {
section.order .order--content .tds-btn:only-of-type {
max-width: none;
min-width: 100%
}
}
section.order .order--vehicle-image {
-webkit-box-flex: 4;
-ms-flex: 4;
flex: 4;
overflow: hidden;
position: relative
}
@media (min-width:1440px) {
section.order .order--vehicle-image {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
}
[dir=ltr] section.order .order--vehicle-image img {
margin-left: 10px
}
[dir=rtl] section.order .order--vehicle-image img {
margin-right: 10px
}
section.order .order--vehicle-image img {
-webkit-margin-start: 10px;
margin-inline-start: 10px;
max-height: 240px;
max-width: 100%;
min-width: 700px;
font-family: "object-fit:contain";
-o-object-fit: contain;
object-fit: contain
}
@media (max-width:1366px) and (orientation:landscape) {
section.order .order--vehicle-image img {
max-height: 180px
}
}
@media (min-width:1440px) {
section.order .order--vehicle-image img {
max-height: none
}
}
@media (max-width:639px) {
section.order .order--vehicle-image {
display: none
}
}
.tcl-toggle-dropdown {
width: 100%;
-webkit-margin-before: 4px;
-webkit-margin-before: var(--tds-size--half);
margin-top: 4px;
margin-top: var(--tds-size--half);
-webkit-margin-after: 4px;
-webkit-margin-after: var(--tds-size--half);
margin-bottom: 4px;
margin-bottom: var(--tds-size--half)
}
@media (min-width:1024px) {
[dir=ltr] .tcl-toggle-dropdown {
left: 0
}
[dir=rtl] .tcl-toggle-dropdown {
right: 0
}
[dir=ltr] .tcl-toggle-dropdown {
margin-left: 1px;
margin-right: 8px;
margin-right: var(--tds-size--1x)
}
[dir=rtl] .tcl-toggle-dropdown {
margin-right: 1px;
margin-left: 8px;
margin-left: var(--tds-size--1x)
}
.tcl-toggle-dropdown {
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
width: calc(50% - 17px);
width: calc(50% - var(--tds-size--2x) - 1px);
inset-inline-start: 0;
margin-top: 4px;
margin-top: var(--tds-size--half);
margin-bottom: 4px;
margin-bottom: var(--tds-size--half);
margin-block: 4px;
margin-block: var(--tds-size--half);
margin-inline: 1px 8px;
margin-inline: 1px var(--tds-size--1x)
}
}
.tcl-toggle-dropdown__radio {
display: none
}
.tcl-toggle-dropdown__desktop {
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
-webkit-box-pack: stretch;
-ms-flex-pack: stretch;
justify-content: stretch;
position: relative;
-webkit-transition: none;
transition: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.tcl-toggle-dropdown__options {
display: none;
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1
}
[dir=ltr] .tcl-toggle-dropdown__option {
border-left: 3px solid #fff;
border-left: 3px solid var(--tds-color--white)
}
[dir=ltr] .tcl-toggle-dropdown__option,
[dir=rtl] .tcl-toggle-dropdown__option {
border-right: 3px solid #fff;
border-right: 3px solid var(--tds-color--white)
}
[dir=rtl] .tcl-toggle-dropdown__option {
border-left: 3px solid #fff;
border-left: 3px solid var(--tds-color--white)
}
.tcl-toggle-dropdown__option {
-webkit-border-start: 3px solid #fff;
-webkit-border-start: 3px solid var(--tds-color--white);
border-inline-start: 3px solid #fff;
border-inline-start: 3px solid var(--tds-color--white);
-webkit-border-end: 3px solid #fff;
-webkit-border-end: 3px solid var(--tds-color--white);
border-inline-end: 3px solid #fff;
border-inline-end: 3px solid var(--tds-color--white);
overflow: hidden;
z-index: -1
}
.tcl-toggle-dropdown__option:first-child {
border-top: 3px solid #fff;
border-top: 3px solid var(--tds-color--white);
border-top-left-radius: 20px;
border-top-right-radius: 20px
}
.tcl-toggle-dropdown__option:last-child {
border-bottom: 3px solid #fff;
border-bottom: 3px solid var(--tds-color--white);
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px
}
.tcl-toggle-dropdown__option .tcl-toggle-dropdown__label {
border-radius: 0
}
[dir=ltr] .tcl-toggle-dropdown__title {
left: 0
}
[dir=rtl] .tcl-toggle-dropdown__title {
right: 0
}
.tcl-toggle-dropdown__title {
width: 100%;
inset-inline-start: 0;
margin: 0;
opacity: 1;
z-index: -1
}
[dir=ltr] .tcl-toggle-dropdown__desktop .tcl-select-arrow {
right: 24px;
right: var(--tds-size--3x)
}
[dir=rtl] .tcl-toggle-dropdown__desktop .tcl-select-arrow {
left: 24px;
left: var(--tds-size--3x)
}
.tcl-toggle-dropdown__desktop .tcl-select-arrow {
background-color: transparent;
height: 36px;
width: 16px;
width: var(--tds-size--2x);
position: absolute;
inset-inline-end: 24px;
inset-inline-end: var(--tds-size--3x);
top: 2px;
-webkit-transition: .25s ease-in-out;
transition: .25s ease-in-out;
z-index: 1
}
[dir=ltr] .tcl-toggle-dropdown__toggle {
right: 20px
}
[dir=rtl] .tcl-toggle-dropdown__toggle {
left: 20px
}
.tcl-toggle-dropdown__toggle {
height: 0;
opacity: 0;
position: absolute;
inset-inline-end: 20px;
text-indent: -999px;
top: -20px;
width: 0;
z-index: -1
}
.tcl-toggle-dropdown__toggle:checked~.tcl-select-arrow {
-webkit-transform: rotate(180deg);
transform: rotate(180deg)
}
.tcl-toggle-dropdown__toggle:checked~.tcl-toggle-dropdown__options {
background-color: #000;
background-color: var(--tds-color--black);
display: block;
z-index: 1
}
.tcl-toggle-dropdown__toggle:checked~.tcl-toggle-dropdown__title {
border-bottom-color: transparent;
opacity: 0;
z-index: -1
}
.tcl-toggle-dropdown__toggle:checked~.tcl-toggle-dropdown__options .tcl-toggle-dropdown__label {
background-color: #222;
background-color: var(--tds-color--grey15);
color: #fff;
color: var(--tds-color--white);
opacity: 1;
-webkit-transition: .25s ease-in-out;
transition: .25s ease-in-out
}
.tcl-toggle-dropdown__toggle:checked~.tcl-toggle-dropdown__options .tcl-toggle-dropdown__label:hover {
background-color: #a2a3a5;
background-color: var(--tds-color--grey40)
}
.tcl-toggle-dropdown__label {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: transparent;
height: var(--tds-tabs-height);
border-radius: 100px;
border-radius: var(--tds-border-radius--pill);
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
font-family: Gotham Medium, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
font-family: var(--tds-font-combined--medium);
font-size: 12px;
font-size: var(--tds-font-size--20);
font-weight: 500;
width: 100%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 0 16px;
padding: 0 var(--tds-size--2x);
position: relative;
text-align: center;
text-transform: uppercase;
white-space: nowrap
}
.tcl-toggle-dropdown__label[readonly]:focus {
outline: none
}
.tds-scrim--black .tcl-select-arrow {
-webkit-filter: invert(0);
filter: invert(0)
}
:root {
--media-height: 100vh;
--tds-tab-count: 1;
--tcl-tab-panel-height: auto;
--tcl-transition-duration--short: .5s;
--tcl-transition-property: all;
--tcl-transition-timing-function: cubic-bezier(.455, .03, .515, .955)
}
.tcl-specifications .tcl-animate--to_reveal {
opacity: 0;
-webkit-transform: translateY(30px) translateZ(0);
transform: translateY(30px) translateZ(0);
-webkit-transition: all 0 cubic-bezier(.455, .03, .515, .955);
-webkit-transition: var(--tcl-transition-property) 0 var(--tcl-transition-timing-function);
transition: all 0 cubic-bezier(.455, .03, .515, .955);
transition: var(--tcl-transition-property) 0 var(--tcl-transition-timing-function)
}
@media (max-width:599px) {
.tcl-specifications .tcl-animate--to_reveal {
opacity: 1;
-webkit-transition: none;
transition: none
}
}
.tcl-specifications .tcl-animate--to_reveal.tcl-animate--revealed {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition-delay: .6s;
transition-delay: .6s;
-webkit-transition-duration: .5s;
-webkit-transition-duration: var(--tcl-transition-duration--short);
transition-duration: .5s;
transition-duration: var(--tcl-transition-duration--short)
}
.tcl-specifications__container {
margin: 0;
padding: 48px 24px;
padding: var(--tds-size--6x) var(--tds-size--3x)
}
@media (min-width:840px) {
.tcl-specifications__container {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
min-height: 100vh;
min-height: var(--media-height);
max-width: 100%
}
}
@media (min-width:1024px) {
.tcl-specifications__toggle-nav {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap
}
}
@media (max-width:599px) {
.tcl-specifications__item {
-ms-flex-item-align: start;
align-self: flex-start;
padding: 0
}
}
picture[data-class=tcl-specifications__asset] {
display: block
}
.tcl-specifications__asset {
width: 100%
}
.tcl-specifications__title {
-webkit-padding-after: 24px;
-webkit-padding-after: var(--tds-size--3x);
padding-bottom: 24px;
padding-bottom: var(--tds-size--3x);
-webkit-padding-before: 0;
padding-top: 0
}
.tcl-tabs {
max-width: 480px
}
.tcl-tabs:after {
display: none!important
}
.tcl-tabs__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
width: 100%!important;
margin: 0!important
}
.tcl-tabs--hide .tcl-tabs__list {
display: none
}
.tcl-specifications__toggle-nav~.tcl-tabs__list {
height: 0;
overflow: hidden
}
[dir=ltr] .tcl-button--pill,
[dir=ltr] .tcl-tab--pill {
margin-left: 1px;
margin-right: 8px;
margin-right: var(--tds-size--1x)
}
[dir=rtl] .tcl-button--pill,
[dir=rtl] .tcl-tab--pill {
margin-right: 1px;
margin-left: 8px;
margin-left: var(--tds-size--1x)
}
.tcl-button--pill,
.tcl-tab--pill {
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
margin-top: 4px;
margin-top: var(--tds-size--half);
margin-bottom: 4px;
margin-bottom: var(--tds-size--half);
margin-block: 4px;
margin-block: var(--tds-size--half);
margin-inline: 1px 8px;
margin-inline: 1px var(--tds-size--1x)
}
@media (max-width:1023px) {
[dir=ltr] .tcl-button--pill,
[dir=ltr] .tcl-tab--pill {
margin-right: 0!important
}
[dir=ltr] .tcl-button--pill,
[dir=ltr] .tcl-tab--pill,
[dir=rtl] .tcl-button--pill,
[dir=rtl] .tcl-tab--pill {
margin-left: 0!important
}
[dir=rtl] .tcl-button--pill,
[dir=rtl] .tcl-tab--pill {
margin-right: 0!important
}
.tcl-button--pill,
.tcl-tab--pill {
width: 100%;
-webkit-margin-end: 0!important;
margin-inline-end: 0!important;
-webkit-margin-start: 0!important;
margin-inline-start: 0!important;
--tds-btn-min_width: 100%
}
}
@media (min-width:1024px) {
.tcl-tabs--block .tcl-button--pill,
.tcl-tabs--block .tcl-tab--pill,
.tcl-tabs--dropdown .tcl-button--pill,
.tcl-tabs--dropdown .tcl-tab--pill {
width: calc(50% - 17px);
width: calc(50% - var(--tds-size--2x) - 1px);
--tds-btn-min_width: calc(50% - var(--tds-size--2x) - 1px)
}
[dir=ltr] .tcl-tabs--block .tcl-button--pill:nth-child(2n),
[dir=ltr] .tcl-tabs--block .tcl-tab--pill:nth-child(2n),
[dir=ltr] .tcl-tabs--block .tcl-toggle-dropdown:nth-child(2n),
[dir=ltr] .tcl-tabs--dropdown .tcl-button--pill:nth-child(2n),
[dir=ltr] .tcl-tabs--dropdown .tcl-tab--pill:nth-child(2n),
[dir=ltr] .tcl-tabs--dropdown .tcl-toggle-dropdown:nth-child(2n) {
margin-right: 0
}
[dir=rtl] .tcl-tabs--block .tcl-button--pill:nth-child(2n),
[dir=rtl] .tcl-tabs--block .tcl-tab--pill:nth-child(2n),
[dir=rtl] .tcl-tabs--block .tcl-toggle-dropdown:nth-child(2n),
[dir=rtl] .tcl-tabs--dropdown .tcl-button--pill:nth-child(2n),
[dir=rtl] .tcl-tabs--dropdown .tcl-tab--pill:nth-child(2n),
[dir=rtl] .tcl-tabs--dropdown .tcl-toggle-dropdown:nth-child(2n) {
margin-left: 0
}
.tcl-tabs--block .tcl-button--pill:nth-child(2n),
.tcl-tabs--block .tcl-tab--pill:nth-child(2n),
.tcl-tabs--block .tcl-toggle-dropdown:nth-child(2n),
.tcl-tabs--dropdown .tcl-button--pill:nth-child(2n),
.tcl-tabs--dropdown .tcl-tab--pill:nth-child(2n),
.tcl-tabs--dropdown .tcl-toggle-dropdown:nth-child(2n) {
-webkit-margin-end: 0;
margin-inline-end: 0
}
[dir=ltr] .tcl-tabs--block .tcl-button--pill:nth-child(odd),
[dir=ltr] .tcl-tabs--block .tcl-tab--pill:nth-child(odd),
[dir=ltr] .tcl-tabs--block .tcl-toggle-dropdown:nth-child(odd),
[dir=ltr] .tcl-tabs--dropdown .tcl-button--pill:nth-child(odd),
[dir=ltr] .tcl-tabs--dropdown .tcl-tab--pill:nth-child(odd),
[dir=ltr] .tcl-tabs--dropdown .tcl-toggle-dropdown:nth-child(odd) {
margin-left: 0
}
[dir=rtl] .tcl-tabs--block .tcl-button--pill:nth-child(odd),
[dir=rtl] .tcl-tabs--block .tcl-tab--pill:nth-child(odd),
[dir=rtl] .tcl-tabs--block .tcl-toggle-dropdown:nth-child(odd),
[dir=rtl] .tcl-tabs--dropdown .tcl-button--pill:nth-child(odd),
[dir=rtl] .tcl-tabs--dropdown .tcl-tab--pill:nth-child(odd),
[dir=rtl] .tcl-tabs--dropdown .tcl-toggle-dropdown:nth-child(odd) {
margin-right: 0
}
.tcl-tabs--block .tcl-button--pill:nth-child(odd),
.tcl-tabs--block .tcl-tab--pill:nth-child(odd),
.tcl-tabs--block .tcl-toggle-dropdown:nth-child(odd),
.tcl-tabs--dropdown .tcl-button--pill:nth-child(odd),
.tcl-tabs--dropdown .tcl-tab--pill:nth-child(odd),
.tcl-tabs--dropdown .tcl-toggle-dropdown:nth-child(odd) {
-webkit-margin-start: 0;
margin-inline-start: 0
}
}
@media (min-width:1024px) {
[dir=ltr] .tcl-tabs--inline .tcl-button--pill,
[dir=ltr] .tcl-tabs--inline .tcl-tab--pill {
margin-right: 8px;
margin-right: var(--tds-size--1x)
}
[dir=ltr] .tcl-tabs--inline .tcl-button--pill,
[dir=ltr] .tcl-tabs--inline .tcl-tab--pill,
[dir=rtl] .tcl-tabs--inline .tcl-button--pill,
[dir=rtl] .tcl-tabs--inline .tcl-tab--pill {
margin-left: 8px;
margin-left: var(--tds-size--1x)
}
[dir=rtl] .tcl-tabs--inline .tcl-button--pill,
[dir=rtl] .tcl-tabs--inline .tcl-tab--pill {
margin-right: 8px;
margin-right: var(--tds-size--1x)
}
.tcl-tabs--inline .tcl-button--pill,
.tcl-tabs--inline .tcl-tab--pill {
width: calc(100% - 17px);
width: calc(100%/var(--tds-tab-count) - var(--tds-size--2x) - 1px);
-webkit-margin-end: 8px;
-webkit-margin-end: var(--tds-size--1x);
margin-inline-end: 8px;
margin-inline-end: var(--tds-size--1x);
-webkit-margin-start: 8px;
-webkit-margin-start: var(--tds-size--1x);
margin-inline-start: 8px;
margin-inline-start: var(--tds-size--1x);
--tds-btn-min_width: calc(100%/var(--tds-tab-count) - var(--tds-size--2x) - 1px)
}
[dir=ltr] .tcl-tabs--inline .tcl-tab--pill:first-child,
[dir=ltr] .tcl-tabs--inline .tds-button--pill:first-child {
margin-left: 0
}
[dir=rtl] .tcl-tabs--inline .tcl-tab--pill:first-child,
[dir=rtl] .tcl-tabs--inline .tds-button--pill:first-child {
margin-right: 0
}
.tcl-tabs--inline .tcl-tab--pill:first-child,
.tcl-tabs--inline .tds-button--pill:first-child {
-webkit-margin-start: 0;
margin-inline-start: 0
}
[dir=ltr] .tcl-tabs--inline .tcl-tab--pill:nth-child(3n+0),
[dir=ltr] .tcl-tabs--inline .tds-button--pill:nth-child(3n+0) {
margin-right: 0
}
[dir=rtl] .tcl-tabs--inline .tcl-tab--pill:nth-child(3n+0),
[dir=rtl] .tcl-tabs--inline .tds-button--pill:nth-child(3n+0) {
margin-left: 0
}
.tcl-tabs--inline .tcl-tab--pill:nth-child(3n+0),
.tcl-tabs--inline .tds-button--pill:nth-child(3n+0) {
-webkit-margin-end: 0;
margin-inline-end: 0
}
}
[dir=ltr] .tcl-button--pill {
left: 0
}
[dir=rtl] .tcl-button--pill {
right: 0
}
.tcl-button--pill {
background-color: #393c41;
background-color: var(--tds-color--grey20);
height: 40px;
inset-inline-start: 0;
margin: 4px 8px;
margin: var(--tds-size--half) var(--tds-size--1x);
text-transform: uppercase
}
.tcl-tab__panel.tds-tab-panel--active {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-padding-after: 0;
padding-bottom: 0
}
.tcl-tab__panel ul {
width: 50%;
margin: 0;
min-height: auto;
min-height: var(--tcl-tab-panel-height)
}
[dir=ltr] .tcl-tab__panel li {
padding-right: 18px
}
[dir=rtl] .tcl-tab__panel li {
padding-left: 18px
}
.tcl-tab__panel li {
width: 100%;
margin: 0 0 18px;
-webkit-padding-end: 18px;
padding-inline-end: 18px
}
.tcl-tab__panel li:before {
-webkit-margin-after: 8px!important;
-webkit-margin-after: var(--tds-size--1x)!important;
margin-bottom: 8px!important;
margin-bottom: var(--tds-size--1x)!important
}
[dir=ltr] .tcl-tab__panel li span {
padding-right: 24px;
padding-right: var(--tds-size--3x)
}
[dir=rtl] .tcl-tab__panel li span {
padding-left: 24px;
padding-left: var(--tds-size--3x)
}
.tcl-tab__panel li span {
display: block;
line-height: 24px;
line-height: var(--tds-size--3x);
-webkit-padding-end: 24px;
-webkit-padding-end: var(--tds-size--3x);
padding-inline-end: 24px;
padding-inline-end: var(--tds-size--3x)
}
[dir=ltr] .tcl-icon-plus {
margin-right: 12px
}
[dir=rtl] .tcl-icon-plus {
margin-left: 12px
}
.tcl-icon-plus {
background-color: transparent;
height: 32px;
height: var(--tds-size--4x);
border: 3px solid #000;
border: 3px solid var(--tds-color--black);
border-radius: 24px;
border-radius: var(--tds-size--3x);
width: 32px;
width: var(--tds-size--4x);
-webkit-margin-end: 12px;
margin-inline-end: 12px;
-webkit-transition: background-color .15s ease-in-out, color .15s ease-in-out;
transition: background-color .15s ease-in-out, color .15s ease-in-out
}
.tcl-icon-plus--white {
border: 3px solid #fff;
border: 3px solid var(--tds-color--white)
}
.tcl-specifications__expand-button {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-shadow: none;
box-shadow: none;
color: #fff;
color: var(--tds-color--white);
cursor: pointer;
display: none;
outline: none;
text-transform: uppercase;
white-space: nowrap
}
.tcl-specifications__expand-button:hover .tcl-icon-plus {
background-color: #fff;
background-color: var(--tds-color--white);
border: 3px solid #fff;
border: 3px solid var(--tds-color--white);
-webkit-filter: invert(1);
filter: invert(1)
}
.tcl-specifications__expand-button:hover .tcl-icon-plus--white {
background-color: #000;
background-color: var(--tds-color--black);
border: 3px solid #000;
border: 3px solid var(--tds-color--black);
-webkit-filter: invert(1);
filter: invert(1)
}
.showcase-screen--with-drawer .tcl-specifications__expand-button {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-margin-after: 50px;
margin-bottom: 50px
}
.drawer_front--open .tcl-specifications .tcl-specifications__expand-button {
opacity: .2
}
:root {
--callouts-width: 100%;
--mobile-callouts-width: 33%;
--cmp-banner-item: 1;
--cmp-banner-transition-delay: .15s;
--cmp-banner-transition-property: all;
--cmp-banner-transition-timing-function: cubic-bezier(.455, .03, .515, .955);
--iphone-media-height: calc(100vh - 30px);
--iphone-x-media-height: calc(100vh - 69px);
--iphone-xr-media-height: calc(100vh - 69px);
--iphone-xs-max-media-height: calc(100vh - 69px);
--media-height: 100vh
}
.hero {
min-height: 100vh;
min-height: var(--media-height);
overflow: hidden;
position: relative
}
@media (min-width:640px) {
.hero.hero--default .button-group {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape) {
.hero {
max-height: none;
min-height: 100vh;
min-height: var(--media-height)
}
}
@media (max-width:839px) and (orientation:landscape) {
.hero {
height: 100vh;
height: var(--media-height);
min-height: 100vh;
min-height: var(--media-height)
}
}
@supports (-webkit-overflow-scrolling:touch) {
@media (max-width: 639px) and (orientation:portrait) {
.hero {
min-height:calc(100vh - 30px);
min-height: var(--iphone-media-height)
}
}
@media only screen and (device-width:375px) and (device-height:812px) and (-webkit-min-device-pixel-ratio:3) and (orientation:portrait),
only screen and (device-width:375px) and (device-height:812px) and (min-resolution:3dppx) and (orientation:portrait) {
.hero {
min-height: calc(100vh - 69px);
min-height: var(--iphone-x-media-height)
}
}
@media only screen and (device-width:414px) and (device-height:896px) and (-webkit-min-device-pixel-ratio:3) and (orientation:portrait),
only screen and (device-width:414px) and (device-height:896px) and (min-resolution:3dppx) and (orientation:portrait) {
.hero {
min-height: calc(100vh - 69px);
min-height: var(--iphone-xs-max-media-height)
}
}
@media only screen and (device-width:414px) and (device-height:896px) and (-webkit-min-device-pixel-ratio:2) and (orientation:portrait),
only screen and (device-width:414px) and (device-height:896px) and (min-resolution:2dppx) and (orientation:portrait) {
.hero {
min-height: calc(100vh - 69px);
min-height: var(--iphone-xr-media-height)
}
}
@media only screen and (device-width:390px) and (device-height:844px) and (-webkit-device-pixel-ratio:3) {
.hero {
min-height: calc(100vh - 69px);
min-height: var(--iphone-xs-max-media-height)
}
}
}
@media only screen and (device-width:375px) and (device-height:812px) and (-webkit-min-device-pixel-ratio:3) and (orientation:portrait),
only screen and (device-width:375px) and (device-height:812px) and (min-resolution:3dppx) and (orientation:portrait) {
.hero.is-iphone-Chrome {
min-height: 638px
}
}
@media only screen and (device-width:414px) and (device-height:896px) and (-webkit-min-device-pixel-ratio:3) and (orientation:portrait),
only screen and (device-width:414px) and (device-height:896px) and (min-resolution:3dppx) and (orientation:portrait) {
.hero.is-iphone-Chrome {
min-height: 763px
}
}
@media only screen and (device-width:414px) and (device-height:896px) and (-webkit-min-device-pixel-ratio:2) and (orientation:portrait),
only screen and (device-width:414px) and (device-height:896px) and (min-resolution:2dppx) and (orientation:portrait) {
.hero.is-iphone-Chrome {
min-height: 722px
}
}
@media only screen and (min-device-width:1024px) and (max-device-width:1024px) and (orientation:portrait) {
.hero.is-iphone-Chrome {
min-height: 1253px
}
}
@media (min-width:769px) and (orientation:portrait),
(min-width:1025px) and (orientation:landscape) {
.hero .hero-picture,
.hero .hero-regions {
-webkit-transform: none!important;
transform: none!important
}
}
.hero img.hero__asset,
.hero video.hero__asset {
display: block;
height: 100vh;
height: var(--media-height);
max-height: 100vh;
max-height: var(--media-height);
max-width: none;
min-height: 100vh;
min-height: var(--media-height);
font-family: "object-fit:cover";
-o-object-fit: cover;
object-fit: cover;
width: 100%
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape),
(min-width:640px) and (max-width:1023px) and (orientation:portrait) {
.hero img.hero__asset {
-o-object-position: center 35%;
object-position: center 35%
}
.hero img.hero__asset,
.hero video.hero__asset {
height: 100vh;
height: var(--media-height);
max-height: 100vh;
max-height: var(--media-height);
min-height: 0
}
}
@media (max-width:839px) and (orientation:landscape) {
.hero img.hero__asset {
height: 100vh;
height: var(--media-height);
min-height: 100vh;
min-height: var(--media-height)
}
}
@media (max-width:639px) and (orientation:portrait) {
.hero {
-o-object-position: initial;
object-position: initial
}
}
@media (-ms-high-contrast:none),
screen and (-ms-high-contrast:active) {
.hero video.hero__asset {
max-height: none
}
}
@supports (-ms-accelerator:true) or (-ms-ime-align:auto) {
.hero video.hero__asset {
max-height: none
}
}
[dir=ltr] .hero .hero-regions--wrapper {
left: 0
}
[dir=rtl] .hero .hero-regions--wrapper {
right: 0
}
.hero .hero-regions--wrapper {
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
height: 100%;
-webkit-box-pack: stretch;
-ms-flex-pack: stretch;
justify-content: stretch;
inset-inline-start: 0;
position: absolute;
-webkit-padding-after: 0;
padding-bottom: 0;
top: 0;
width: 100%
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape),
(min-width:640px) and (max-width:1023px) and (orientation:portrait) {
.hero .hero-regions--wrapper {
-webkit-padding-after: 5vh;
padding-bottom: 5vh
}
}
.hero .hero-regions {
-ms-flex-line-pack: stretch;
-ms-flex-align: center;
-webkit-box-orient: horizontal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-pack: justify;
width: 100%
}
.hero .hero-regions,
.hero .hero-regions .hero-region--center {
align-content: stretch;
-webkit-box-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-direction: normal;
height: 100%;
-webkit-box-pack: justify;
justify-content: space-between
}
.hero .hero-regions .hero-region--center {
-ms-flex-line-pack: stretch;
-ms-flex-align: center;
-webkit-box-orient: vertical;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
-ms-flex-pack: justify;
text-align: center
}
.hero .hero-regions .hero-region--center.hero-region--with-callouts {
-webkit-box-flex: 1;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
width: 100%
}
[dir=ltr] .hero .hero-regions .hero-region--center .hero-region--center-top .tds-o-btn {
left: 0
}
[dir=rtl] .hero .hero-regions .hero-region--center .hero-region--center-top .tds-o-btn {
right: 0
}
.hero .hero-regions .hero-region--center .hero-region--center-top .tds-o-btn {
inset-inline-start: 0;
min-width: 250px
}
.hero .hero-regions .hero-region--center .hero-region--center-top.header-copy-position--bottom {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end
}
.hero .hero-regions .hero-region--center .hero-region--center-bottom,
.hero .hero-regions .hero-region--center .hero-region--center-top {
min-width: 100%
}
.hero .hero-regions .hero-region--center .hero-region--center-bottom {
position: relative
}
.hero .hero-regions>div[class^=hero-region--] {
-webkit-box-flex: 1;
-ms-flex: 1 0 33%;
flex: 1 0 33%;
width: 33%
}
.hero .hero-regions>div[class^=hero-region--] header {
-webkit-padding-before: 9vh;
padding-top: 9vh
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape) {
.hero .hero-regions>div[class^=hero-region--] header {
padding: 6vh 20px 0;
width: 100%
}
}
@media (max-width:419px) {
.hero .hero-regions>div[class^=hero-region--] header {
-webkit-padding-before: 3vh;
padding-top: 3vh
}
}
.hero .hero-regions>div[class^=hero-region--] header .header--white,
.hero .hero-regions>div[class^=hero-region--] header .header--white * {
color: #fff;
color: var(--tds-color--white)
}
.hero .hero-regions>div[class^=hero-region--] header .header-upper {
display: block;
-webkit-margin-before: 4px;
margin-top: 4px;
-webkit-transition-delay: .33s;
transition-delay: .33s
}
.hero .hero-regions>div[class^=hero-region--] header .header-lower {
display: block;
-webkit-margin-before: 5px;
margin-top: 5px;
-webkit-transition-delay: .46s;
transition-delay: .46s
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape) {
.hero .hero-regions>div[class^=hero-region--] header .header-lower {
font-size: 36px;
-webkit-margin-before: 0;
margin-top: 0
}
}
.hero .hero-regions .hero-copy {
margin: 25px auto;
width: 100%
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape),
(min-width:640px) and (max-width:1023px) and (orientation:portrait) {
.hero .hero-regions .hero-copy {
margin: 20px auto;
padding: 0 20px
}
}
.hero .hero-regions .hero-copy.hero-copy--desktop {
display: block
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape),
(min-width:640px) and (max-width:1023px) and (orientation:portrait) {
.hero .hero-regions .hero-copy.hero-copy--desktop {
display: none
}
}
.hero .hero-regions .hero-copy.hero-copy--mobile {
display: none;
line-height: 19px
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape),
(min-width:640px) and (max-width:1023px) and (orientation:portrait) {
.hero .hero-regions .hero-copy.hero-copy--mobile {
display: block
}
}
@media only screen and (max-device-width:320px) and (orientation:portrait) {
.hero .hero-regions .hero-copy.hero-copy--mobile {
display: none
}
}
.hero .hero-regions .hero-copy.hero-copy--white,
.hero .hero-regions .hero-copy.hero-copy--white * {
color: #fff;
color: var(--tds-color--white)
}
.hero:not(.hero--with-banner) .hero-regions .hero-region--center {
-webkit-padding-before: 3vh;
padding-top: 3vh
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape),
(min-width:640px) and (max-width:1023px) and (orientation:portrait) {
.hero:not(.hero--with-banner) .hero-regions .hero-region--center {
-webkit-padding-before: calc(6vh - 24px);
padding-top: calc(6vh - 24px)
}
}
@media (max-width:839px) and (orientation:landscape) {
.hero:not(.hero--with-banner) .hero-regions .hero-region--center {
-webkit-padding-before: 56px;
padding-top: 56px
}
}
@media (max-width:639px) {
.hero:not(.hero--with-banner) .hero-regions .hero-region--center {
-webkit-padding-before: 6vh;
padding-top: 6vh
}
}
@media (max-width:839px) and (orientation:landscape) {
.hero:not(.hero--with-banner) .tds-icon-arrow-down {
display: none
}
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape),
(min-width:640px) and (max-width:1023px) and (orientation:portrait) {
.hero:not(.hero--with-banner) picture {
display: block;
min-height: 100vh;
min-height: var(--media-height)
}
}
@media (max-width:839px) and (orientation:landscape) {
.hero:not(.hero--with-banner) img.hero__asset,
.hero:not(.hero--with-banner) picture,
.hero:not(.hero--with-banner) video.hero__asset {
min-height: 700px
}
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape),
(min-width:640px) and (max-width:1023px) and (orientation:portrait) {
.hero .hero-regions {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column
}
.hero .hero-regions .hero-region--center {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1
}
.hero .hero-regions .hero-region--center .hero-region--center-bottom,
.hero .hero-regions .hero-region--center .hero-region--center-top {
min-height: auto
}
.hero .hero-regions>div[class^=hero-region--] {
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
height: auto;
margin: 0;
width: 100%
}
.hero .hero-regions>div[class^=hero-region--].hero-region--with-callouts {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3
}
}
.hero .disclaimer-button {
-webkit-margin-after: 3vh;
margin-bottom: 3vh
}
@media (max-width:639px) {
.hero .disclaimer-button,
.hero .header-button {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
margin: 0;
padding: 0 24px;
width: 100%
}
}
.hero .hero--disclaimer-and-arrow {
text-align: center
}
.hero .hero-disclaimer {
margin: 0 auto 3vh;
padding: 0;
text-align: center;
text-transform: none;
width: 100%
}
@media (-ms-high-contrast:active),
(-ms-high-contrast:none) {
.hero .hero-disclaimer {
min-width: 100%
}
}
.hero .hero-disclaimer.hero-disclaimer--desktop {
display: block
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape) {
.hero .hero-disclaimer.hero-disclaimer--desktop {
display: none
}
}
.hero .hero-disclaimer.hero-disclaimer--mobile {
display: none;
padding: 0 20px
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape) {
.hero .hero-disclaimer.hero-disclaimer--mobile {
display: block
}
}
@media only screen and (max-device-width:320px) and (orientation:portrait) {
.hero .hero-disclaimer.hero-disclaimer--mobile {
display: none
}
}
.hero .hero-disclaimer.hero-disclaimer--white,
.hero .hero-disclaimer.hero-disclaimer--white * {
color: #fff;
color: var(--tds-color--white)
}
.hero .tcl-video__replay {
display: none
}
@media (min-width:639px) {
.hero.tds-btn_group--stacked .cmp-button-group .button-group,
.hero.tds-btn_group--stacked .cmp-button-group .cmp-btn_group--center,
.hero.tds-btn_group--stacked.hero--with-banner .cmp-button-group .button-group,
.hero.tds-btn_group--stacked.hero--with-banner .cmp-button-group .cmp-btn_group--center {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column
}
.hero.tds-btn_group--stacked .banner-content .banner-buttons .tds-o-btn,
.hero.tds-btn_group--stacked.hero--with-banner .banner-content .banner-buttons .tds-o-btn {
width: 100%;
max-width: 320px;
max-width: calc(var(--tds-size--1x)*40)
}
}
@media (min-width:1201px) {
.hero.tds-btn_group--stacked .banner-content .banner-buttons .tds-o-btn,
.hero.tds-btn_group--stacked.hero--with-banner .banner-content .banner-buttons .tds-o-btn {
width: 100%;
max-width: 352px;
max-width: calc(var(--tds-size--1x)*44)
}
}
@media only screen and (max-width:600px) {
.page-solar-panels .hero-region--center-top h1 {
-webkit-padding-before: 4px;
padding-top: 4px
}
}
.hero.hero--with-banner {
overflow: visible
}
@media (max-width:839px) and (orientation:landscape) {
.hero.hero--with-banner {
height: auto;
min-height: -webkit-fit-content;
min-height: -moz-fit-content;
min-height: fit-content
}
}
@supports (-webkit-overflow-scrolling:touch) {
@media (max-width: 639px) and (orientation:portrait) {
.hero.hero--with-banner {
min-height:100%
}
}
@media only screen and (device-width:375px) and (device-height:812px) and (-webkit-min-device-pixel-ratio:3) and (orientation:portrait),
only screen and (device-width:375px) and (device-height:812px) and (min-resolution:3dppx) and (orientation:portrait) {
.hero.hero--with-banner {
min-height: 100%
}
}
@media only screen and (device-width:414px) and (device-height:896px) and (-webkit-min-device-pixel-ratio:3) and (orientation:portrait),
only screen and (device-width:414px) and (device-height:896px) and (min-resolution:3dppx) and (orientation:portrait) {
.hero.hero--with-banner {
min-height: 100%
}
}
@media only screen and (device-width:414px) and (device-height:896px) and (-webkit-min-device-pixel-ratio:2) and (orientation:portrait),
only screen and (device-width:414px) and (device-height:896px) and (min-resolution:2dppx) and (orientation:portrait) {
.hero.hero--with-banner {
min-height: 100%
}
}
@media only screen and (device-width:390px) and (device-height:844px) and (-webkit-device-pixel-ratio:3) {
.hero.hero--with-banner {
min-height: 100%
}
}
}
.hero.hero--with-banner .banner {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100vh;
height: var(--media-height);
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: absolute;
top: 0;
width: 100%
}
@media (max-width:639px) {
.hero.hero--with-banner .banner {
display: block;
height: auto;
position: static
}
}
@media (max-width:839px) and (orientation:landscape) {
.hero.hero--with-banner .banner {
display: block;
height: auto;
position: relative
}
}
@media (max-width:1200px) {
.hero.hero--with-banner .banner {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap
}
}
.hero.hero--with-banner .banner.tds-scrim--black .banner-content .banner-button--learn-more,
.hero.hero--with-banner .banner.tds-scrim--black .banner-copy,
.hero.hero--with-banner .banner.tds-scrim--black .banner-header,
.hero.hero--with-banner .banner.tds-scrim--black .banner-subheader {
color: #fff;
color: var(--tds-color--white)
}
.hero.hero--with-banner .banner.tds-scrim--black .banner-content .banner-button--learn-more .tds-icon-plus {
-webkit-filter: invert(100%);
filter: invert(100%)
}
.hero.hero--with-banner .banner.tds-scrim--black .banner-content .banner-button--learn-more:hover .tds-icon-plus {
border: 3px solid #fff;
border: 3px solid var(--tds-color--white);
-webkit-filter: unset;
filter: unset
}
.hero.hero--with-banner .banner:not([class*=tds-scrim]) .banner-content {
background-color: #fff;
background-color: var(--tds-color--white)
}
.hero.hero--with-banner .banner-image {
background-color: #f4f4f4;
background-color: var(--tds-color--grey70);
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
height: 100%;
overflow: hidden;
position: relative;
width: 100%
}
@media (max-width:1200px) {
.hero.hero--with-banner .banner-image {
height: 100vh
}
}
@media (max-width:639px) {
.hero.hero--with-banner .banner-image {
max-height: 425px
}
}
@media (max-width:1200px) {
.hero.hero--with-banner .banner-image {
display: block
}
}
@media (-ms-high-contrast:active),
(-ms-high-contrast:none) {
.hero.hero--with-banner .banner-image video.hero__asset {
max-height: none
}
}
@supports (-ms-accelerator:true) or (-ms-ime-align:auto) {
.hero.hero--with-banner .banner-image video.hero__asset {
max-height: none
}
}
.hero.hero--with-banner .banner-image .hero-picture,
.hero.hero--with-banner .banner-image .hero-picture img.hero__asset {
height: 100%;
max-height: 100%;
min-height: 100%;
position: absolute;
width: 100%
}
@media (max-width:1200px) {
.hero.hero--with-banner .banner-image .hero-picture img.hero__asset {
height: 100%
}
}
.hero.hero--with-banner .banner-image .hero-video {
height: 100%;
max-height: 100%;
min-height: 100%;
position: absolute;
width: 100%
}
.hero.hero--with-banner .banner-content {
display: block;
min-height: 250px;
width: 100%
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape) {
.hero.hero--with-banner .banner-content {
min-height: 0;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
padding: 32px 24px;
z-index: 2
}
}
@media (min-width:975px) {
.hero.hero--with-banner .banner-content>.tds-flex {
margin: 0 auto;
width: 975px
}
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape) {
.hero.hero--with-banner .banner-content>.tds-flex {
min-width: 100%;
width: 100%
}
}
.hero.hero--with-banner .banner-content>.tds-flex .tds-flex-item:first-of-type {
min-width: 351px
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape) {
.hero.hero--with-banner .banner-content>.tds-flex .tds-flex-item:first-of-type {
min-width: 311px
}
}
@media (max-width:360px) {
.hero.hero--with-banner .banner-content>.tds-flex .tds-flex-item:first-of-type {
min-width: 0
}
}
@media (max-width:839px) and (orientation:landscape) {
.hero.hero--with-banner .banner-content>.tds-flex .tds-flex-item:first-of-type {
min-width: 100%
}
}
@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape) {
.hero.hero--with-banner .banner-content>.tds-flex .tds-flex-item:first-of-type {
max-width: 50%;
width: auto
}
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape) {
.hero.hero--with-banner .banner-content>.tds-flex .tds-flex-item:first-of-type .banner-buttons,
.hero.hero--with-banner .banner-content>.tds-flex .tds-flex-item:first-of-type .banner-buttons--preferred {
display: none!important
}
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape) {
.hero.hero--with-banner .banner-content>.tds-flex .tds-flex-item:nth-of-type(2) .banner-buttons,
.hero.hero--with-banner .banner-content>.tds-flex .tds-flex-item:nth-of-type(2) .banner-buttons--preferred {
display: -webkit-box!important;
display: -ms-flexbox!important;
display: flex!important
}
}
.hero.hero--with-banner .banner-content>.tds-flex .tds-flex-item {
-webkit-padding-after: 48px;
padding-bottom: 48px;
-webkit-padding-before: 48px;
padding-top: 48px
}
.hero--long_copy.hero.hero--with-banner .banner-content>.tds-flex .tds-flex-item {
-webkit-padding-after: 15px;
padding-bottom: 15px;
-webkit-padding-before: 30px;
padding-top: 30px
}
@media only screen and (min-device-width:834px) and (max-device-width:1366px) {
.hero.hero--with-banner .banner-content>.tds-flex .tds-flex-item {
-webkit-padding-after: 64px;
padding-bottom: 64px
}
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape) {
.hero.hero--with-banner .banner-content>.tds-flex .tds-flex-item {
-webkit-padding-after: 0;
padding-bottom: 0;
-webkit-padding-before: 0;
padding-top: 0;
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%
}
}
@media only screen and (min-device-width:834px) and (max-device-width:1366px) {
.tds-flex-item .hero--long_copy.hero.hero--with-banner .banner-content>.tds-flex {
-webkit-padding-after: 64px;
padding-bottom: 64px
}
}
@media (max-width:639px) {
.hero.hero--with-banner .banner-content>.tds-flex .tds-flex-item:last-child {
-webkit-padding-before: 12px;
padding-top: 12px
}
}
@media (max-width:839px) and (orientation:landscape) {
.hero.hero--with-banner .banner-content>.tds-flex .tds-flex-item:last-child {
-webkit-padding-before: 20px;
padding-top: 20px
}
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape) {
.hero.hero--with-banner .banner-content>.tds-flex [class*=tds-flex--col_] {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none
}
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape) {
.hero.hero--with-banner .banner-content .header {
margin: 0
}
}
.hero.hero--with-banner .banner-content .banner-header,
.hero.hero--with-banner .banner-content .banner-subheader {
padding: 0
}
.hero.hero--with-banner .banner-content .banner-copy--desktop {
display: block
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape),
(min-width:640px) and (max-width:1023px) and (orientation:portrait) {
.hero.hero--with-banner .banner-content .banner-copy--desktop {
display: none
}
}
.hero.hero--with-banner .banner-content .banner-copy--mobile {
display: none
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape),
(min-width:640px) and (max-width:1023px) and (orientation:portrait) {
.hero.hero--with-banner .banner-content .banner-copy--mobile {
display: block
}
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape) {
.hero.hero--with-banner .banner-content .banner-copy--mobile {
-webkit-margin-after: 0;
margin-bottom: 0
}
}
.hero.hero--with-banner .banner-content .cmp-button-group {
width: auto
}
[dir=ltr] .hero.hero--with-banner .banner-content .banner-buttons {
clear: left
}
[dir=rtl] .hero.hero--with-banner .banner-content .banner-buttons {
clear: right
}
[dir=ltr] .hero.hero--with-banner .banner-content .banner-buttons {
float: left
}
[dir=rtl] .hero.hero--with-banner .banner-content .banner-buttons {
float: right
}
.hero.hero--with-banner .banner-content .banner-buttons {
clear: inline-start;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
float: inline-start;
-webkit-margin-before: 16px;
margin-top: 16px;
width: 100%
}
[dir=ltr] .hero.hero--with-banner .banner-content .banner-buttons .tds-o-btn {
margin-right: 0
}
[dir=rtl] .hero.hero--with-banner .banner-content .banner-buttons .tds-o-btn {
margin-left: 0
}
.hero.hero--with-banner .banner-content .banner-buttons .tds-o-btn {
height: 40px;
-webkit-margin-end: 0;
margin-inline-end: 0;
min-width: auto;
padding: 10px 32px;
white-space: nowrap;
width: auto
}
.hero.hero--with-banner .banner-content .banner-buttons .tds-o-trigger-input {
display: none
}
[dir=ltr] .hero.hero--with-banner .banner-content .banner-buttons>a:first-child {
margin-left: 0
}
[dir=rtl] .hero.hero--with-banner .banner-content .banner-buttons>a:first-child {
margin-right: 0
}
.hero.hero--with-banner .banner-content .banner-buttons>a:first-child {
-webkit-margin-start: 0;
margin-inline-start: 0
}
.hero.hero--with-banner .banner-content .banner-buttons .drawer-open_button {
-webkit-box-shadow: none;
box-shadow: none;
cursor: pointer
}
[dir=ltr] .hero.hero--with-banner .banner-content .banner-buttons .banner-button--learn-more {
margin-right: 12px
}
[dir=rtl] .hero.hero--with-banner .banner-content .banner-buttons .banner-button--learn-more {
margin-left: 12px
}
.hero.hero--with-banner .banner-content .banner-buttons .banner-button--learn-more {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: transparent;
border-color: #171a20;
border-color: var(--tds-color--grey10);
color: #171a20;
color: var(--tds-color--grey10);
cursor: pointer;
display: none;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
font-size: 12px;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-margin-end: 12px;
margin-inline-end: 12px;
text-transform: uppercase;
white-space: nowrap
}
[dir=ltr] .hero.hero--with-banner .banner-content .banner-buttons .banner-button--learn-more .tds-icon-plus {
margin-right: 10px
}
[dir=rtl] .hero.hero--with-banner .banner-content .banner-buttons .banner-button--learn-more .tds-icon-plus {
margin-left: 10px
}
.hero.hero--with-banner .banner-content .banner-buttons .banner-button--learn-more .tds-icon-plus {
background-color: transparent;
border: 3px solid #000;
border: 3px solid var(--tds-color--black);
border-radius: 20px;
-webkit-margin-end: 10px;
margin-inline-end: 10px;
-webkit-transition: background-color .15s ease-in-out, color .15s ease-in-out;
transition: background-color .15s ease-in-out, color .15s ease-in-out
}
.hero.hero--with-banner .banner-content .banner-buttons .banner-button--learn-more .tds-icon-plus.tds-o-icon--medium {
height: 30px;
width: 30px
}
.hero.hero--with-banner .banner-content .banner-buttons .banner-button--learn-more:hover .tds-icon-plus {
background-color: #fff;
background-color: var(--tds-color--white);
border: 3px solid #fff;
border: 3px solid var(--tds-color--white);
-webkit-filter: invert(100%);
filter: invert(100%)
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape) {
.hero.hero--with-banner .banner-content .banner-buttons.banner-buttons--preferred {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape) {
.hero.hero--with-banner .banner-content .banner-buttons:not(.banner-buttons--preferred) {
display: block
}
}
.hero.hero--with-banner .banner-content .cmp-animate--to_reveal {
opacity: 0;
-webkit-transform: translateY(40px) translateZ(0);
transform: translateY(40px) translateZ(0);
-webkit-transition: all var(--cmp-transition-duration--short) cubic-bezier(.455, .03, .515, .955);
-webkit-transition: var(--cmp-banner-transition-property) var(--cmp-transition-duration--short) var(--cmp-banner-transition-timing-function);
transition: all var(--cmp-transition-duration--short) cubic-bezier(.455, .03, .515, .955);
transition: var(--cmp-banner-transition-property) var(--cmp-transition-duration--short) var(--cmp-banner-transition-timing-function)
}
.hero.hero--with-banner .banner-content .cmp-animate--to_reveal.cmp-animate--revealed {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape) {
.hero.hero--with-banner .banner-content .cmp-animate--to_reveal {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
@media (max-width:1200px) {
.hero.hero--with-banner .banner-content .banner-component {
display: none
}
}
.hero.hero--with-banner .banner-content .banner-component img {
width: 100%
}
.hero.hero--with-banner .banner.banner--left .banner-content,
.hero.hero--with-banner .banner.banner--top .banner-content {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1
}
@media (max-width:1200px) {
.hero.hero--with-banner .banner.banner--left .banner-content,
.hero.hero--with-banner .banner.banner--top .banner-content {
-webkit-box-ordinal-group: 1;
-ms-flex-order: 0;
order: 0
}
}
.hero.hero--with-banner .banner.banner--bottom,
.hero.hero--with-banner .banner.banner--top {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap
}
[dir=ltr] .hero.hero--with-banner .banner.banner--bottom .banner-content>.tds-flex .tds-flex-item,
[dir=ltr] .hero.hero--with-banner .banner.banner--top .banner-content>.tds-flex .tds-flex-item {
padding-left: 0
}
[dir=rtl] .hero.hero--with-banner .banner.banner--bottom .banner-content>.tds-flex .tds-flex-item,
[dir=rtl] .hero.hero--with-banner .banner.banner--top .banner-content>.tds-flex .tds-flex-item {
padding-right: 0
}
.hero.hero--with-banner .banner.banner--bottom .banner-content>.tds-flex .tds-flex-item,
.hero.hero--with-banner .banner.banner--top .banner-content>.tds-flex .tds-flex-item {
-webkit-padding-start: 0;
padding-inline-start: 0
}
[dir=ltr] .hero.hero--with-banner .banner.banner--bottom .banner-content>.tds-flex .tds-flex-item:first-of-type,
[dir=ltr] .hero.hero--with-banner .banner.banner--top .banner-content>.tds-flex .tds-flex-item:first-of-type {
padding-right: 20px
}
[dir=rtl] .hero.hero--with-banner .banner.banner--bottom .banner-content>.tds-flex .tds-flex-item:first-of-type,
[dir=rtl] .hero.hero--with-banner .banner.banner--top .banner-content>.tds-flex .tds-flex-item:first-of-type {
padding-left: 20px
}
.hero.hero--with-banner .banner.banner--bottom .banner-content>.tds-flex .tds-flex-item:first-of-type,
.hero.hero--with-banner .banner.banner--top .banner-content>.tds-flex .tds-flex-item:first-of-type {
-webkit-padding-end: 20px;
padding-inline-end: 20px
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape) {
.hero.hero--with-banner .banner.banner--bottom .banner-content>.tds-flex .tds-flex-item:first-of-type,
.hero.hero--with-banner .banner.banner--top .banner-content>.tds-flex .tds-flex-item:first-of-type {
-webkit-padding-before: 0;
padding-top: 0
}
}
.hero.hero--with-banner .banner.banner--bottom .banner-content .banner-copy,
.hero.hero--with-banner .banner.banner--top .banner-content .banner-copy {
margin: 0
}
.hero.hero--with-banner .banner.banner--bottom .banner-component,
.hero.hero--with-banner .banner.banner--bottom .banner-content .banner-buttons:not(.banner-buttons--preferred),
.hero.hero--with-banner .banner.banner--top .banner-component,
.hero.hero--with-banner .banner.banner--top .banner-content .banner-buttons:not(.banner-buttons--preferred) {
display: none
}
@media (min-width:975px) {
.hero.hero--with-banner .banner.banner--bottom .hero-callouts--wide,
.hero.hero--with-banner .banner.banner--top .hero-callouts--wide {
width: 920px
}
}
@media (min-width:1024px) {
.hero.hero--with-banner .banner.banner--bottom .hero-callouts--wide,
.hero.hero--with-banner .banner.banner--top .hero-callouts--wide {
width: 968px
}
}
@media (min-width:1201px) {
.hero.hero--with-banner .banner.banner--bottom .hero-callouts--wide,
.hero.hero--with-banner .banner.banner--top .hero-callouts--wide {
width: 1024px
}
}
@media (min-width:1201px) {
.hero.hero--with-banner .banner.banner--right .banner-content {
min-width: 400px;
width: 400px
}
}
@media (min-width:1201px) {
.hero.hero--with-banner .banner.banner--left .banner-content {
min-width: 415px;
width: 415px
}
}
@media (min-width:1201px) {
.hero.hero--with-banner .banner.banner--left,
.hero.hero--with-banner .banner.banner--right {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap
}
}
@media (min-width:1201px) {
[dir=ltr] .hero.hero--with-banner .banner.banner--left .banner-content,
[dir=ltr] .hero.hero--with-banner .banner.banner--right .banner-content {
padding-left: 24px;
padding-right: 40px
}
[dir=rtl] .hero.hero--with-banner .banner.banner--left .banner-content,
[dir=rtl] .hero.hero--with-banner .banner.banner--right .banner-content {
padding-right: 24px;
padding-left: 40px
}
.hero.hero--with-banner .banner.banner--left .banner-content,
.hero.hero--with-banner .banner.banner--right .banner-content {
-ms-flex-item-align: start;
align-self: flex-start;
height: 100%;
padding-top: 0;
padding-bottom: 0;
padding-block: 0;
padding-inline: 24px 40px
}
}
.hero.hero--with-banner .banner.banner--left .banner-content>.tds-flex,
.hero.hero--with-banner .banner.banner--right .banner-content>.tds-flex {
width: 100%
}
@media (min-width:1201px) {
.hero.hero--with-banner .banner.banner--left .banner-content>.tds-flex,
.hero.hero--with-banner .banner.banner--right .banner-content>.tds-flex {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
height: 100%
}
}
@media (min-width:1201px) {
.hero.hero--with-banner .banner.banner--left .banner-content>.tds-flex .tds-flex-item,
.hero.hero--with-banner .banner.banner--right .banner-content>.tds-flex .tds-flex-item {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 16px 0 0
}
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape) {
>.tds-flex .tds-flex-item .hero.hero--with-banner .banner.banner--left .banner-content:first-child,
>.tds-flex .tds-flex-item .hero.hero--with-banner .banner.banner--right .banner-content:first-child {
padding: 0
}
}
@media (max-width:1200px) {
.hero.hero--with-banner .banner.banner--left .banner-content>.tds-flex .tds-flex-item .banner-buttons:not(.banner-buttons--preferred),
.hero.hero--with-banner .banner.banner--right .banner-content>.tds-flex .tds-flex-item .banner-buttons:not(.banner-buttons--preferred) {
display: none
}
}
@media (min-width:1201px) {
.hero.hero--with-banner .banner.banner--left .banner-content>.tds-flex .tds-flex-item:first-of-type,
.hero.hero--with-banner .banner.banner--right .banner-content>.tds-flex .tds-flex-item:first-of-type {
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
width: 100%
}
}
.hero.hero--with-banner .banner.banner--left .banner-content>.tds-flex .tds-flex-item:first-of-type .banner-buttons,
.hero.hero--with-banner .banner.banner--right .banner-content>.tds-flex .tds-flex-item:first-of-type .banner-buttons {
display: none
}
@media (max-width:1200px) {
.hero.hero--with-banner .banner.banner--left .banner-content>.tds-flex .tds-flex-item:first-of-type .banner-buttons,
.hero.hero--with-banner .banner.banner--right .banner-content>.tds-flex .tds-flex-item:first-of-type .banner-buttons {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
}
@media (min-width:1201px) {
.hero.hero--with-banner .banner.banner--left .banner-content header,
.hero.hero--with-banner .banner.banner--right .banner-content header {
-webkit-margin-before: 34px;
margin-top: 34px
}
}
@media (max-width:1200px) {
.hero.hero--with-banner .banner.banner--left .banner-content .banner-copy,
.hero.hero--with-banner .banner.banner--right .banner-content .banner-copy {
margin: 0
}
}
@media (min-width:1201px) {
.hero.hero--with-banner .banner.banner--left .banner-content .banner-buttons,
.hero.hero--with-banner .banner.banner--right .banner-content .banner-buttons {
bottom: 50px;
position: absolute
}
}
@media only screen and (min-device-width:834px) and (max-device-width:1366px) {
.hero.hero--with-banner .banner.banner--left .banner-content .banner-buttons,
.hero.hero--with-banner .banner.banner--right .banner-content .banner-buttons {
bottom: 64px;
position: absolute
}
}
@media (min-width:975px) {
.hero.hero--with-banner .banner.banner--left .hero-callouts--wide,
.hero.hero--with-banner .banner.banner--right .hero-callouts--wide {
width: 790px
}
}
@media (min-width:1024px) {
.hero.hero--with-banner .banner.banner--left .hero-callouts--wide,
.hero.hero--with-banner .banner.banner--right .hero-callouts--wide {
width: 920px
}
}
@media (min-width:1201px) {
.hero.hero--with-banner .banner.banner--left .hero-callouts--wide,
.hero.hero--with-banner .banner.banner--right .hero-callouts--wide {
width: 820px
}
}
[dir=ltr] .hero.hero--with-banner.hero--with-callouts .hero-callouts {
padding-left: 30px
}
[dir=ltr] .hero.hero--with-banner.hero--with-callouts .hero-callouts,
[dir=rtl] .hero.hero--with-banner.hero--with-callouts .hero-callouts {
padding-right: 30px
}
[dir=rtl] .hero.hero--with-banner.hero--with-callouts .hero-callouts {
padding-left: 30px
}
.hero.hero--with-banner.hero--with-callouts .hero-callouts {
margin: 6vh auto 72px;
-webkit-padding-start: 30px;
padding-inline-start: 30px;
-webkit-padding-end: 30px;
padding-inline-end: 30px
}
@media (max-width:974px) {
.hero.hero--with-banner.hero--with-callouts .hero-callouts {
width: 100vw
}
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape),
(min-width:640px) and (max-width:1023px) and (orientation:portrait) {
[dir=ltr] .hero.hero--with-banner.hero--with-callouts .hero-callouts {
padding-left: 0
}
[dir=ltr] .hero.hero--with-banner.hero--with-callouts .hero-callouts,
[dir=rtl] .hero.hero--with-banner.hero--with-callouts .hero-callouts {
padding-right: 0
}
[dir=rtl] .hero.hero--with-banner.hero--with-callouts .hero-callouts {
padding-left: 0
}
.hero.hero--with-banner.hero--with-callouts .hero-callouts {
-webkit-margin-after: 42px;
margin-bottom: 42px;
-webkit-padding-start: 0;
padding-inline-start: 0;
-webkit-padding-end: 0;
padding-inline-end: 0;
width: 600px
}
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape) {
[dir=ltr] .hero.hero--with-banner.hero--with-callouts .hero-callouts {
padding-left: 20px
}
[dir=ltr] .hero.hero--with-banner.hero--with-callouts .hero-callouts,
[dir=rtl] .hero.hero--with-banner.hero--with-callouts .hero-callouts {
padding-right: 20px
}
[dir=rtl] .hero.hero--with-banner.hero--with-callouts .hero-callouts {
padding-left: 20px
}
.hero.hero--with-banner.hero--with-callouts .hero-callouts {
-webkit-margin-after: 0;
margin-bottom: 0;
-webkit-margin-before: calc(80px - 3vh);
margin-top: calc(80px - 3vh);
-webkit-padding-start: 20px;
padding-inline-start: 20px;
-webkit-padding-end: 20px;
padding-inline-end: 20px
}
}
@media (max-width:839px) and (orientation:landscape) {
.hero.hero--with-banner.hero--with-callouts .hero-callouts {
-webkit-margin-before: 24px;
margin-top: 24px
}
}
@media (max-width:639px) {
.hero.hero--with-banner.hero--with-callouts .hero-callouts {
width: 100%
}
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape),
(min-width:640px) and (max-width:1023px) and (orientation:portrait) {
.hero.hero--with-banner.hero--with-callouts .hero-callouts .callout {
min-height: 60px
}
}
[dir=ltr] .hero.hero--with-banner.hero--with-callouts .hero-callouts .callout:first-child {
padding-left: 0
}
[dir=rtl] .hero.hero--with-banner.hero--with-callouts .hero-callouts .callout:first-child {
padding-right: 0
}
.hero.hero--with-banner.hero--with-callouts .hero-callouts .callout:first-child {
-webkit-padding-start: 0;
padding-inline-start: 0
}
[dir=ltr] .hero.hero--with-banner.hero--with-callouts .hero-callouts .callout:last-child {
padding-right: 0
}
[dir=rtl] .hero.hero--with-banner.hero--with-callouts .hero-callouts .callout:last-child {
padding-left: 0
}
.hero.hero--with-banner.hero--with-callouts .hero-callouts .callout:last-child {
-webkit-padding-end: 0;
padding-inline-end: 0
}
.hero.hero--with-banner.hero--with-callouts .hero-callouts .callout--divider-line.cmp-animate--to_reveal,
.hero.hero--with-banner.hero--with-callouts .hero-callouts .callout.cmp-animate--to_reveal {
-webkit-transform: translate3d(0, 40px, 0);
transform: translate3d(0, 40px, 0)
}
.hero.hero--with-banner.hero--with-callouts .hero-callouts .callout--divider-line.cmp-animate--to_reveal.cmp-animate--revealed,
.hero.hero--with-banner.hero--with-callouts .hero-callouts .callout.cmp-animate--to_reveal.cmp-animate--revealed {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition-property: all;
-webkit-transition-property: var(--cmp-banner-transition-property);
transition-property: all;
transition-property: var(--cmp-banner-transition-property)
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape) {
.hero.hero--with-banner.hero--with-callouts .hero-callouts .callout--divider-line.cmp-animate--to_reveal,
.hero.hero--with-banner.hero--with-callouts .hero-callouts .callout.cmp-animate--to_reveal {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
@media (min-width:640px) and (max-width:1023px) and (orientation:portrait) {
.hero.hero--with-banner.hero--with-callouts .hero-region--left .hero-callouts,
.hero.hero--with-banner.hero--with-callouts .hero-region--right .hero-callouts {
margin-inline: auto;
margin: 36px auto 25px;
margin-block: 36px 25px
}
.hero--long_copy.hero.hero--with-banner.hero--with-callouts .hero-region--left .hero-callouts,
.hero--long_copy.hero.hero--with-banner.hero--with-callouts .hero-region--right .hero-callouts {
-webkit-margin-after: 32px;
margin-bottom: 32px
}
}
@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape) {
.hero.hero--with-banner.hero--with-callouts .hero-region--center-bottom .hero-callouts {
-webkit-margin-after: 30px;
margin-bottom: 30px
}
}
@media only screen and (min-device-width:834px) and (max-device-width:1366px) {
.hero.hero--with-banner.hero--with-callouts .hero-region--center-bottom .hero-callouts {
-webkit-margin-after: 72px;
margin-bottom: 72px
}
}
.showcase-screen--with-drawer .hero.hero--with-banner .banner-content .banner-buttons .banner-button--learn-more {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
.hero.hero--with-callouts .hero-region--with-callouts.hero-region--left .hero-callouts,
.hero.hero--with-callouts .hero-region--with-callouts.hero-region--right .hero-callouts {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
padding-inline: 0;
padding: 0;
padding-block: 0;
margin-inline: 0;
margin: 25px 0;
margin-block: 25px
}
@media (min-width:1201px) {
.hero.hero--with-callouts .hero-region--with-callouts.hero-region--left .hero-callouts.hero-callouts--narrow,
.hero.hero--with-callouts .hero-region--with-callouts.hero-region--right .hero-callouts.hero-callouts--narrow {
width: 270px
}
}
@media (max-width:1200px) {
.hero.hero--with-callouts .hero-region--with-callouts.hero-region--left .hero-callouts.hero-callouts--narrow,
.hero.hero--with-callouts .hero-region--with-callouts.hero-region--right .hero-callouts.hero-callouts--narrow {
width: 270px
}
}
@media (max-width:839px) and (orientation:landscape),
(min-width:640px) and (max-width:1023px) and (orientation:portrait) {
.hero.hero--with-callouts .hero-region--with-callouts.hero-region--left .hero-callouts.hero-callouts--narrow,
.hero.hero--with-callouts .hero-region--with-callouts.hero-region--right .hero-callouts.hero-callouts--narrow {
width: 600px
}
}
@media (max-width:639px) {
.hero.hero--with-callouts .hero-region--with-callouts.hero-region--left .hero-callouts.hero-callouts--narrow,
.hero.hero--with-callouts .hero-region--with-callouts.hero-region--right .hero-callouts.hero-callouts--narrow {
width: 100%
}
}
@media (min-width:1201px) {
.hero.hero--with-callouts .hero-region--with-callouts.hero-region--left .hero-callouts.hero-callouts--medium,
.hero.hero--with-callouts .hero-region--with-callouts.hero-region--left .hero-callouts.hero-callouts--wide,
.hero.hero--with-callouts .hero-region--with-callouts.hero-region--right .hero-callouts.hero-callouts--medium,
.hero.hero--with-callouts .hero-region--with-callouts.hero-region--right .hero-callouts.hero-callouts--wide {
width: 320px
}
}
@media (max-width:1200px) {
.hero.hero--with-callouts .hero-region--with-callouts.hero-region--left .hero-callouts.hero-callouts--medium,
.hero.hero--with-callouts .hero-region--with-callouts.hero-region--left .hero-callouts.hero-callouts--wide,
.hero.hero--with-callouts .hero-region--with-callouts.hero-region--right .hero-callouts.hero-callouts--medium,
.hero.hero--with-callouts .hero-region--with-callouts.hero-region--right .hero-callouts.hero-callouts--wide {
width: 320px
}
}
@media (max-width:839px) and (orientation:landscape),
(min-width:640px) and (max-width:1023px) and (orientation:portrait) {
.hero.hero--with-callouts .hero-region--with-callouts.hero-region--left .hero-callouts.hero-callouts--medium,
.hero.hero--with-callouts .hero-region--with-callouts.hero-region--left .hero-callouts.hero-callouts--wide,
.hero.hero--with-callouts .hero-region--with-callouts.hero-region--right .hero-callouts.hero-callouts--medium,
.hero.hero--with-callouts .hero-region--with-callouts.hero-region--right .hero-callouts.hero-callouts--wide {
width: 600px
}
}
@media (max-width:639px) {
.hero.hero--with-callouts .hero-region--with-callouts.hero-region--left .hero-callouts.hero-callouts--medium,
.hero.hero--with-callouts .hero-region--with-callouts.hero-region--left .hero-callouts.hero-callouts--wide,
.hero.hero--with-callouts .hero-region--with-callouts.hero-region--right .hero-callouts.hero-callouts--medium,
.hero.hero--with-callouts .hero-region--with-callouts.hero-region--right .hero-callouts.hero-callouts--wide {
width: 100%
}
}
.hero.hero--with-callouts .hero-region--with-callouts.hero-region--left .hero-callouts .callout,
.hero.hero--with-callouts .hero-region--with-callouts.hero-region--right .hero-callouts .callout {
padding: 40px 0;
position: relative;
width: 100%
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape),
(min-width:640px) and (max-width:1023px) and (orientation:portrait) {
.hero.hero--with-callouts .hero-region--with-callouts.hero-region--left .hero-callouts .callout,
.hero.hero--with-callouts .hero-region--with-callouts.hero-region--right .hero-callouts .callout {
padding: 0;
width: 100%;
width: var(--callouts-width)
}
}
@media (max-width:639px) and (orientation:portrait) {
.hero.hero--with-callouts .hero-region--with-callouts.hero-region--left .hero-callouts .callout,
.hero.hero--with-callouts .hero-region--with-callouts.hero-region--right .hero-callouts .callout {
width: 33%;
width: var(--mobile-callouts-width)
}
}
.hero.hero--with-callouts .hero-region--with-callouts.hero-region--left .hero-callouts .callout--divider:after,
.hero.hero--with-callouts .hero-region--with-callouts.hero-region--right .hero-callouts .callout--divider:after {
content: ""
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape),
(min-width:640px) and (max-width:1023px) and (orientation:portrait) {
.hero.hero--with-callouts .hero-region--with-callouts.hero-region--left .hero-callouts,
.hero.hero--with-callouts .hero-region--with-callouts.hero-region--right .hero-callouts {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
margin: 20px auto 0;
width: 100%
}
.hero.hero--with-callouts .hero-region--with-callouts.hero-region--left .hero-callouts .callout--divider:after,
.hero.hero--with-callouts .hero-region--with-callouts.hero-region--right .hero-callouts .callout--divider:after {
content: normal
}
}
@media (max-width:839px) and (orientation:landscape) {
.hero.hero--with-callouts .hero-region--with-callouts.hero-region--left .hero-callouts,
.hero.hero--with-callouts .hero-region--with-callouts.hero-region--right .hero-callouts {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap
}
}
@media (min-width:640px) and (max-width:1023px) and (orientation:portrait) {
.hero.hero--with-callouts .hero-region--with-callouts.hero-region--left .hero-callouts,
.hero.hero--with-callouts .hero-region--with-callouts.hero-region--right .hero-callouts {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap
}
}
[dir=ltr] .hero.hero--with-callouts .hero-region--right .hero-callouts {
margin-left: auto
}
[dir=rtl] .hero.hero--with-callouts .hero-region--right .hero-callouts {
margin-right: auto
}
[dir=ltr] .hero.hero--with-callouts .hero-region--right .hero-callouts {
margin-right: 35px
}
[dir=rtl] .hero.hero--with-callouts .hero-region--right .hero-callouts {
margin-left: 35px
}
.hero.hero--with-callouts .hero-region--right .hero-callouts {
-webkit-margin-start: auto;
margin-inline-start: auto;
-webkit-margin-end: 35px;
margin-inline-end: 35px
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape),
(min-width:640px) and (max-width:1023px) and (orientation:portrait) {
[dir=ltr] .hero.hero--with-callouts .hero-region--right .hero-callouts {
margin-right: auto
}
[dir=rtl] .hero.hero--with-callouts .hero-region--right .hero-callouts {
margin-left: auto
}
.hero.hero--with-callouts .hero-region--right .hero-callouts {
-webkit-margin-end: auto;
margin-inline-end: auto
}
}
[dir=ltr] .hero.hero--with-callouts .hero-region--right .hero-callouts .callout--right {
margin-right: 150px
}
[dir=rtl] .hero.hero--with-callouts .hero-region--right .hero-callouts .callout--right {
margin-left: 150px
}
.hero.hero--with-callouts .hero-region--right .hero-callouts .callout--right {
-webkit-margin-end: 150px;
margin-inline-end: 150px
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape),
(min-width:640px) and (max-width:1023px) and (orientation:portrait) {
[dir=ltr] .hero.hero--with-callouts .hero-region--right .hero-callouts .callout--right {
margin-right: 0
}
[dir=rtl] .hero.hero--with-callouts .hero-region--right .hero-callouts .callout--right {
margin-left: 0
}
.hero.hero--with-callouts .hero-region--right .hero-callouts .callout--right {
-webkit-margin-end: 0;
margin-inline-end: 0
}
}
.hero.hero--with-callouts .hero-region--right .hero-callouts .callout--left,
.hero.hero--with-callouts .hero-region--right .hero-callouts .callout--right {
width: 100%
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape),
(min-width:640px) and (max-width:1023px) and (orientation:portrait) {
.hero.hero--with-callouts .hero-region--right .hero-callouts .callout--left,
.hero.hero--with-callouts .hero-region--right .hero-callouts .callout--right {
width: 100%;
width: var(--callouts-width)
}
}
@media (max-width:639px) and (orientation:portrait) {
.hero.hero--with-callouts .hero-region--right .hero-callouts .callout--left,
.hero.hero--with-callouts .hero-region--right .hero-callouts .callout--right {
width: 33%;
width: var(--mobile-callouts-width)
}
}
[dir=ltr] .hero.hero--with-callouts .hero-region--left .hero-callouts .callout--left {
margin-left: 150px
}
[dir=rtl] .hero.hero--with-callouts .hero-region--left .hero-callouts .callout--left {
margin-right: 150px
}
.hero.hero--with-callouts .hero-region--left .hero-callouts .callout--left {
-webkit-margin-start: 150px;
margin-inline-start: 150px
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape),
(min-width:640px) and (max-width:1023px) and (orientation:portrait) {
[dir=ltr] .hero.hero--with-callouts .hero-region--left .hero-callouts .callout--left {
margin-left: 0
}
[dir=rtl] .hero.hero--with-callouts .hero-region--left .hero-callouts .callout--left {
margin-right: 0
}
.hero.hero--with-callouts .hero-region--left .hero-callouts .callout--left {
-webkit-margin-start: 0;
margin-inline-start: 0
}
}
@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape) {
[dir=ltr] .hero.hero--with-callouts .hero-region--left .hero-callouts .callout--left {
margin-left: 90px
}
[dir=rtl] .hero.hero--with-callouts .hero-region--left .hero-callouts .callout--left {
margin-right: 90px
}
.hero.hero--with-callouts .hero-region--left .hero-callouts .callout--left {
-webkit-margin-start: 90px;
margin-inline-start: 90px
}
}
@media (max-width:839px) and (orientation:landscape) {
[dir=ltr] .hero.hero--with-callouts .hero-region--left .hero-callouts .callout--left {
margin-left: 0
}
[dir=rtl] .hero.hero--with-callouts .hero-region--left .hero-callouts .callout--left {
margin-right: 0
}
.hero.hero--with-callouts .hero-region--left .hero-callouts .callout--left {
-webkit-margin-start: 0;
margin-inline-start: 0
}
}
.hero.hero--with-callouts .hero-region--center .hero-callouts .callout--center .callout-container {
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
margin: 0 auto auto
}
.hero.hero--with-callouts .hero-region--center-bottom .hero-callouts .callout-title--asset.callout-title--asset-image_with_label,
.hero.hero--with-callouts .hero-region--center-top .hero-callouts .callout-title--asset.callout-title--asset-image_with_label {
margin-bottom: 0
}
[id=page-model-3] .hero .hero-copy {
width: 310px
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape),
(min-width:640px) and (max-width:1023px) and (orientation:portrait) {
[dir=ltr] [id=page-model-3] .hero .hero--with-callouts.hero-callouts.hero-callouts--with-button .callout--medium:first-child,
[dir=ltr] [id=page-model-3] .hero .hero--with-callouts.hero-callouts.hero-callouts--with-button .callout--narrow:first-child {
padding-left: 10px
}
[dir=rtl] [id=page-model-3] .hero .hero--with-callouts.hero-callouts.hero-callouts--with-button .callout--medium:first-child,
[dir=rtl] [id=page-model-3] .hero .hero--with-callouts.hero-callouts.hero-callouts--with-button .callout--narrow:first-child {
padding-right: 10px
}
[id=page-model-3] .hero .hero--with-callouts.hero-callouts.hero-callouts--with-button .callout--medium:first-child,
[id=page-model-3] .hero .hero--with-callouts.hero-callouts.hero-callouts--with-button .callout--narrow:first-child {
-webkit-padding-start: 10px;
padding-inline-start: 10px
}
}
[dir=ltr] [id=page-model-3] .hero .hero--with-callouts.hero-callouts.hero-callouts--with-button .hero-callouts--button {
padding-right: 0
}
[dir=rtl] [id=page-model-3] .hero .hero--with-callouts.hero-callouts.hero-callouts--with-button .hero-callouts--button {
padding-left: 0
}
[id=page-model-3] .hero .hero--with-callouts.hero-callouts.hero-callouts--with-button .hero-callouts--button {
-webkit-padding-end: 0;
padding-inline-end: 0
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape) {
[id=page-model-3] .hero .hero--with-callouts.hero-callouts.hero-callouts--with-button .hero-callouts--button .tds-btn--outline {
background-color: #f4f4f4;
background-color: var(--tds-color--grey70);
color: #171a20;
color: var(--tds-color--grey10)
}
[id=page-model-3] .hero .hero--with-callouts.hero-callouts.hero-callouts--with-button .hero-callouts--button .tds-btn--outline:active,
[id=page-model-3] .hero .hero--with-callouts.hero-callouts.hero-callouts--with-button .hero-callouts--button .tds-btn--outline:focus,
[id=page-model-3] .hero .hero--with-callouts.hero-callouts.hero-callouts--with-button .hero-callouts--button .tds-btn--outline:hover {
color: #fff;
color: var(--tds-color--white);
background-color: transparent;
border-color: #fff;
border-color: var(--tds-color--white)
}
}
@media (max-width:639px) and (orientation:portrait) {
[dir=ltr] [id=page-model-3] .hero .hero-copy {
left: 50%
}
[dir=rtl] [id=page-model-3] .hero .hero-copy {
right: 50%
}
[dir=ltr] [id=page-model-3] .hero .hero-copy {
margin-left: -155px
}
[dir=rtl] [id=page-model-3] .hero .hero-copy {
margin-right: -155px
}
[id=page-model-3] .hero .hero-copy {
width: 310px;
inset-inline-start: 50%;
-webkit-margin-start: -155px;
margin-inline-start: -155px
}
}
@media (-ms-high-contrast:none),
screen and (-ms-high-contrast:active) {
[id=page-model-3] .not-ie-11 {
display: none
}
[id=page-model-3] .hero .hero-callouts>span {
width: 800px!important
}
}
.cmp-button-group {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1
}
[dir=ltr] .cmp-button-group .tds-btn {
left: 0
}
[dir=rtl] .cmp-button-group .tds-btn {
right: 0
}
.cmp-button-group .tds-btn {
inset-inline-start: 0
}
@media (-ms-high-contrast:active),
(-ms-high-contrast:none) {
.cmp-button-group .tds-btn {
padding: 10px 0
}
}
.cmp-button-group .cmp-btn_group--center {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
.cmp-button-group .button-group,
.cmp-button-group .cmp-btn_group--center {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
@media (max-width:639px) {
.cmp-button-group .button-group {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column;
flex-flow: column
}
.cmp-button-group .button-group .tds-o-btn_group--item.tds-o-btn_group--item a.tds-o-btn {
width: 100%
}
}
.cmp-button-group .cmp-btn_group--right {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end
}
.cmp-button-group .tds-btn_group--stacked.cmp-btn_group--stacked_center {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center
}
.cmp-button-group .tds-btn_group--stacked.cmp-btn_group--stacked_right {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end
}
.itinerant-copy {
max-width: calc(100vw - 24px);
margin: 0 auto;
width: 100%;
display: block
}
.itinerant-copy a {
color: inherit;
border-bottom: 1px solid
}
.itinerant-copy.header--white {
color: #fff
}
:root {
--asset-order: -1;
--callouts-width: 100%;
--mobile-callouts-width: 33%;
--cmp-callout-item: 1;
--cmp-callouts-transition-delay: .2s;
--cmp-transition-duration--short: .5s;
--cmp-transition-property: opacity;
--cmp-transition-timing-function: cubic-bezier(.23, 1, .32, 1)
}
[dir=ltr] .hero-callouts {
padding-left: 0
}
[dir=ltr] .hero-callouts,
[dir=rtl] .hero-callouts {
padding-right: 0
}
[dir=rtl] .hero-callouts {
padding-left: 0
}
.hero-callouts {
-ms-flex-line-pack: center;
align-content: center;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
margin: 25px auto;
-webkit-padding-start: 0;
padding-inline-start: 0;
-webkit-padding-end: 0;
padding-inline-end: 0
}
@media (min-width:640px) {
.hero-callouts.hero-callouts--narrow {
width: 640px
}
}
@media (min-width:840px) {
.hero-callouts.hero-callouts--medium {
width: 840px
}
}
@media (min-width:1800px) {
.hero-callouts.hero-callouts--wide {
width: 1200px
}
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape),
(min-width:640px) and (max-width:1023px) and (orientation:portrait) {
[dir=ltr] .hero-callouts {
padding-left: 20px
}
[dir=ltr] .hero-callouts,
[dir=rtl] .hero-callouts {
padding-right: 20px
}
[dir=rtl] .hero-callouts {
padding-left: 20px
}
.hero-callouts {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
margin-bottom: 20px;
margin-top: 20px;
-webkit-padding-start: 20px;
padding-inline-start: 20px;
-webkit-padding-end: 20px;
padding-inline-end: 20px
}
}
@media (max-width:839px) and (orientation:landscape) {
.hero-callouts {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap
}
}
@media (min-width:640px) and (max-width:1023px) and (orientation:portrait) {
.hero-callouts {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap
}
}
[dir=ltr] .hero-callouts .callout--divider-line {
border-left: 1px solid #000;
border-left: 1px solid var(--tds-color--black)
}
[dir=rtl] .hero-callouts .callout--divider-line {
border-right: 1px solid #000;
border-right: 1px solid var(--tds-color--black)
}
.hero-callouts .callout--divider-line {
-webkit-border-start: solid 1px #000;
-webkit-border-start: solid 1px var(--tds-color--black);
border-inline-start: solid 1px #000;
border-inline-start: solid 1px var(--tds-color--black)
}
.hero-callouts .callout--divider-line.cmp-animate--to_reveal {
opacity: 0
}
.hero-callouts .callout--divider-line.cmp-animate--to_reveal.cmp-animate--revealed {
opacity: 1;
-webkit-transition: opacity .5s cubic-bezier(.23, 1, .32, 1);
-webkit-transition: var(--cmp-transition-property) var(--cmp-transition-duration--short) var(--cmp-transition-timing-function);
transition: opacity .5s cubic-bezier(.23, 1, .32, 1);
transition: var(--cmp-transition-property) var(--cmp-transition-duration--short) var(--cmp-transition-timing-function)
}
.hero-callouts .callout--divider:after {
background-color: rgba(0, 0, 0, .5);
bottom: 0;
content: normal;
height: 1px;
position: absolute;
width: 60px
}
.hero-callouts .callout {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-item-align: auto;
-ms-grid-row-align: auto;
align-self: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
padding: 0 20px;
position: relative;
width: 33%;
width: var(--callout-width)
}
.hero-callouts .callout.callout--left,
.hero-callouts .callout.callout--right {
padding: 0 20px
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape),
(min-width:640px) and (max-width:1023px) and (orientation:portrait) {
.hero-callouts .callout.callout--center,
.hero-callouts .callout.callout--left,
.hero-callouts .callout.callout--right {
padding: 0 10px
}
}
.hero-callouts .callout .callout-container {
width: 100%
}
.hero-callouts .callout.cmp-animate--to_reveal {
opacity: 0
}
.hero-callouts .callout.cmp-animate--to_reveal.cmp-animate--revealed {
opacity: 1;
-webkit-transition: opacity .5s cubic-bezier(.23, 1, .32, 1);
-webkit-transition: var(--cmp-transition-property) var(--cmp-transition-duration--short) var(--cmp-transition-timing-function);
transition: opacity .5s cubic-bezier(.23, 1, .32, 1);
transition: var(--cmp-transition-property) var(--cmp-transition-duration--short) var(--cmp-transition-timing-function)
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape),
(min-width:640px) and (max-width:1023px) and (orientation:portrait) {
.hero-callouts .callout {
pointer-events: auto;
position: relative
}
.hero-callouts .callout[data-modal-open] {
cursor: pointer
}
}
@media (max-width:639px) {
.hero-callouts .callout {
width: 33%;
width: var(--mobile-callouts-width)
}
}
@media (min-width:640px) and (max-width:1023px) and (orientation:portrait) {
.hero-callouts .callout {
width: 100%
}
}
.hero-callouts .callout-title {
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
min-height: 48px;
white-space: nowrap
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape),
(min-width:640px) and (max-width:1023px) and (orientation:portrait) {
.hero-callouts .callout-title {
min-height: 40px
}
}
.hero-callouts .callout-title .callout-title--text {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
.hero-callouts .callout-title .callout-title--text>span {
display: inline;
padding-top: 0
}
[dir=ltr] .hero-callouts .callout-title .callout-title--text>span:not(.callout-title--micro-with-space) {
padding-left: 0
}
[dir=rtl] .hero-callouts .callout-title .callout-title--text>span:not(.callout-title--micro-with-space) {
padding-right: 0
}
.hero-callouts .callout-title .callout-title--text>span:not(.callout-title--micro-with-space) {
-webkit-padding-start: 0;
padding-inline-start: 0
}
.hero-callouts .callout-title .callout-title--micro {
color: #000;
color: var(--tds-color--black)
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape) {
.hero-callouts .callout-title .callout-title--micro {
margin-bottom: 2px
}
}
[dir=ltr] .hero-callouts .callout-title .callout-title--micro-with-space {
padding-left: 3px
}
[dir=rtl] .hero-callouts .callout-title .callout-title--micro-with-space {
padding-right: 3px
}
.hero-callouts .callout-title .callout-title--micro-with-space {
-webkit-padding-start: 3px;
padding-inline-start: 3px
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape),
(min-width:640px) and (max-width:1023px) and (orientation:portrait) {
[dir=ltr] .hero-callouts .callout-title .callout-title--micro-with-space {
padding-left: 2.5px
}
[dir=rtl] .hero-callouts .callout-title .callout-title--micro-with-space {
padding-right: 2.5px
}
.hero-callouts .callout-title .callout-title--micro-with-space {
-webkit-padding-start: 2.5px;
padding-inline-start: 2.5px
}
}
.hero-callouts .callout-title .callout-title--asset {
-webkit-box-ordinal-group: 1;
-ms-flex-order: 0;
order: 0;
-webkit-box-ordinal-group: -1;
-webkit-box-ordinal-group: var(--asset-order);
-ms-flex-order: -1;
-ms-flex-order: var(--asset-order);
order: -1;
order: var(--asset-order);
padding: 0 5px
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape),
(min-width:640px) and (max-width:1023px) and (orientation:portrait) {
.hero-callouts .callout-title .callout-title--asset {
padding: 0
}
}
@media (-ms-high-contrast:active),
(-ms-high-contrast:none) {
.hero-callouts .callout-title .callout-title--asset {
-webkit-box-ordinal-group: 1;
-ms-flex-order: 0;
order: 0
}
}
.hero-callouts .callout-title .callout-title--asset.callout-title--asset-image_with_label.callout-title--asset-desktop {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape),
(min-width:640px) and (max-width:1023px) and (orientation:portrait) {
.hero-callouts .callout-title .callout-title--asset.callout-title--asset-image_with_label.callout-title--asset-desktop {
display: none
}
}
.hero-callouts .callout-title .callout-title--asset.callout-title--asset-image_with_label {
margin-bottom: 8px
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape),
(min-width:640px) and (max-width:1023px) and (orientation:portrait) {
.hero-callouts .callout-title .callout-title--asset.callout-title--asset-image_with_label {
margin-bottom: 0
}
}
[dir=ltr] .hero-callouts .callout-title .callout-title--asset.callout-title--asset-image_with_label .callout-title--asset-image-label {
text-align: left
}
[dir=rtl] .hero-callouts .callout-title .callout-title--asset.callout-title--asset-image_with_label .callout-title--asset-image-label {
text-align: right
}
.hero-callouts .callout-title .callout-title--asset.callout-title--asset-image_with_label .callout-title--asset-image-label {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 0 5px;
text-align: start
}
.hero-callouts .callout-title .callout-title--asset-image {
display: block;
height: 40px;
font-family: "object-fit:cover";
-o-object-fit: cover;
object-fit: cover;
vertical-align: text-bottom;
width: auto
}
@media (-ms-high-contrast:none),
screen and (-ms-high-contrast:active) {
.hero-callouts .callout-title .callout-title--asset-image {
background-position-x: 0!important;
background-size: contain!important;
-webkit-box-flex: .2;
-ms-flex: .2;
flex: .2;
width: 40px
}
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape),
(min-width:640px) and (max-width:1023px) and (orientation:portrait) {
.hero-callouts .callout-title .callout-title--asset-image {
-webkit-transform: scale(.82);
transform: scale(.82)
}
}
.hero-callouts .callout-title .callout-rich-ui--star {
font-size: larger
}
.hero-callouts .callout-title .ie-11 {
display: none
}
.hero-callouts .callout--center {
text-align: center
}
.hero-callouts .callout--center .callout-title {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
[dir=ltr] .hero-callouts .callout--center.callout--divider:after {
left: calc(50% - 30px)
}
[dir=rtl] .hero-callouts .callout--center.callout--divider:after {
right: calc(50% - 30px)
}
.hero-callouts .callout--center.callout--divider:after {
inset-inline-start: calc(50% - 30px)
}
[dir=ltr] .hero-callouts .callout--left {
text-align: left
}
[dir=rtl] .hero-callouts .callout--left {
text-align: right
}
.hero-callouts .callout--left {
-ms-flex-item-align: start;
align-self: flex-start;
text-align: start
}
.hero-callouts .callout--left .callout-title {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start
}
[dir=ltr] .hero-callouts .callout--left .callout-title .callout-title--asset {
padding-left: 0
}
[dir=rtl] .hero-callouts .callout--left .callout-title .callout-title--asset {
padding-right: 0
}
.hero-callouts .callout--left .callout-title .callout-title--asset {
-webkit-padding-start: 0;
padding-inline-start: 0
}
@media (-ms-high-contrast:none),
screen and (-ms-high-contrast:active) {
.hero-callouts .callout--left .callout-title .callout-title--asset {
-webkit-box-flex: .25;
-ms-flex: .25;
flex: .25
}
}
[dir=ltr] .hero-callouts .callout--left.callout--divider:after {
left: 0
}
[dir=rtl] .hero-callouts .callout--left.callout--divider:after {
right: 0
}
.hero-callouts .callout--left.callout--divider:after {
inset-inline-start: 0
}
[dir=ltr] .hero-callouts .callout--right {
text-align: right
}
[dir=rtl] .hero-callouts .callout--right {
text-align: left
}
.hero-callouts .callout--right {
-ms-flex-item-align: end;
align-self: flex-end;
text-align: end
}
.hero-callouts .callout--right .callout-title {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end
}
[dir=ltr] .hero-callouts .callout--right .callout-title .callout-title--asset {
padding-right: 0
}
[dir=rtl] .hero-callouts .callout--right .callout-title .callout-title--asset {
padding-left: 0
}
.hero-callouts .callout--right .callout-title .callout-title--asset {
-webkit-padding-end: 0;
padding-inline-end: 0
}
[dir=ltr] .hero-callouts .callout--right.callout--divider:after {
right: 0
}
[dir=rtl] .hero-callouts .callout--right.callout--divider:after {
left: 0
}
.hero-callouts .callout--right.callout--divider:after {
inset-inline-end: 0
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape),
(min-width:640px) and (max-width:1023px) and (orientation:portrait) {
.hero-callouts .callout.callout--left,
.hero-callouts .callout.callout--right {
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
text-align: center
}
.hero-callouts .callout.callout--left .callout-title,
.hero-callouts .callout.callout--right .callout-title {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
[dir=ltr] .hero-callouts .callout.callout--left .callout-title .callout-title--asset,
[dir=ltr] .hero-callouts .callout.callout--right .callout-title .callout-title--asset {
padding-left: 0
}
[dir=rtl] .hero-callouts .callout.callout--left .callout-title .callout-title--asset,
[dir=rtl] .hero-callouts .callout.callout--right .callout-title .callout-title--asset {
padding-right: 0
}
.hero-callouts .callout.callout--left .callout-title .callout-title--asset,
.hero-callouts .callout.callout--right .callout-title .callout-title--asset {
-webkit-padding-start: 0;
padding-inline-start: 0
}
}
.hero-callouts .callout-description {
margin: 0;
padding: 0
}
.hero-callouts .callout-description--desktop {
display: block
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape),
(min-width:640px) and (max-width:1023px) and (orientation:portrait) {
.hero-callouts .callout-description--desktop {
display: none
}
}
.hero-callouts .callout-description--mobile {
display: none
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape),
(min-width:640px) and (max-width:1023px) and (orientation:portrait) {
.hero-callouts .callout-description--mobile {
display: block
}
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape) {
.hero-callouts .callout-description--mobile {
min-height: 32px
}
}
.hero-callouts .callout-title--asset-desktop {
display: block
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape),
(min-width:640px) and (max-width:1023px) and (orientation:portrait) {
.hero-callouts .callout-title--asset-desktop {
display: none
}
}
.hero-callouts .callout-title--asset-mobile {
display: none
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape),
(min-width:640px) and (max-width:1023px) and (orientation:portrait) {
.hero-callouts .callout-title--asset-mobile {
display: block
}
}
.hero-callouts .hero-callouts--button {
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
width: var(--callout-width)
}
.hero-callouts .hero-callouts--button.cmp-animate--to_reveal {
opacity: 0
}
.hero-callouts .hero-callouts--button.cmp-animate--to_reveal.cmp-animate--revealed {
opacity: 1;
-webkit-transition: opacity .5s cubic-bezier(.23, 1, .32, 1);
-webkit-transition: var(--cmp-transition-property) var(--cmp-transition-duration--short) var(--cmp-transition-timing-function);
transition: opacity .5s cubic-bezier(.23, 1, .32, 1);
transition: var(--cmp-transition-property) var(--cmp-transition-duration--short) var(--cmp-transition-timing-function)
}
[dir=ltr] .hero-callouts .hero-callouts--button .tds-btn {
left: 0
}
[dir=rtl] .hero-callouts .hero-callouts--button .tds-btn {
right: 0
}
.hero-callouts .hero-callouts--button .tds-btn {
inset-inline-start: 0;
margin: 0;
min-width: 0;
padding-bottom: 10px;
padding-top: 10px;
white-space: nowrap;
width: 100%
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape),
(min-width:640px) and (max-width:1023px) and (orientation:portrait) {
.hero-callouts .hero-callouts--button .tds-btn {
margin: 20px 0 15px;
width: 100%
}
}
@media (max-width:839px) and (orientation:landscape) {
.hero-callouts .hero-callouts--button .tds-btn {
margin: 0
}
}
@media (min-width:640px) and (max-width:1023px) and (orientation:portrait) {
.hero-callouts .hero-callouts--button .tds-btn {
margin: 0
}
}
@media (max-width:639px) {
.hero-callouts .hero-callouts--button {
width: 100%
}
}
.hero-callouts.hero-callouts--white .callout-description,
.hero-callouts.hero-callouts--white .callout-rich-ui--star,
.hero-callouts.hero-callouts--white .callout-title--micro,
.hero-callouts.hero-callouts--white .callout-title--text>span,
.hero-callouts.hero-callouts--white .number-separator {
color: #fff;
color: var(--tds-color--white)
}
[dir=ltr] .hero-callouts.hero-callouts--white .callout--divider-line {
border-left: 1px solid #fff;
border-left: 1px solid var(--tds-color--white)
}
[dir=rtl] .hero-callouts.hero-callouts--white .callout--divider-line {
border-right: 1px solid #fff;
border-right: 1px solid var(--tds-color--white)
}
.hero-callouts.hero-callouts--white .callout--divider-line {
-webkit-border-start: solid 1px #fff;
-webkit-border-start: solid 1px var(--tds-color--white);
border-inline-start: solid 1px #fff;
border-inline-start: solid 1px var(--tds-color--white)
}
.hero-callouts.hero-callouts--white .callout--divider:after {
background-color: #fff;
background-color: var(--tds-color--white)
}
@media (-ms-high-contrast:none),
screen and (-ms-high-contrast:active) {
.hero-callouts .not-ie-11 {
display: none!important
}
.hero-callouts .callout-title .ie-11 {
display: block!important
}
}
:root {
--tcl-fractional-as-percent: 0%;
--tcl-integral-as-percent: 0%
}
.tcl-speedometer {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap
}
[dir=ltr] .tcl-speedometer__dial {
margin-right: 4px
}
[dir=rtl] .tcl-speedometer__dial {
margin-left: 4px
}
.tcl-speedometer__dial {
height: 25px;
-webkit-margin-end: 4px;
margin-inline-end: 4px;
overflow: hidden;
position: relative;
width: 40px
}
@media (max-width:639px) {
[dir=ltr] .tcl-speedometer__dial {
margin-left: -5px
}
[dir=rtl] .tcl-speedometer__dial {
margin-right: -5px
}
[dir=ltr] .tcl-speedometer__dial {
margin-right: 0
}
[dir=rtl] .tcl-speedometer__dial {
margin-left: 0
}
.tcl-speedometer__dial {
-webkit-margin-start: -5px;
margin-inline-start: -5px;
-webkit-margin-end: 0;
margin-inline-end: 0;
-webkit-transform: scale(.8);
transform: scale(.8)
}
}
[dir=ltr] .tcl-speedometer__inner-circle-wrapper {
left: 0
}
[dir=rtl] .tcl-speedometer__inner-circle-wrapper {
right: 0
}
.tcl-speedometer__inner-circle-wrapper {
bottom: 4px;
height: 21px;
inset-inline-start: 0;
overflow: hidden;
position: absolute;
width: 40px
}
[dir=ltr] .tcl-speedometer__inner-circle {
left: calc(50% - 14px)
}
[dir=rtl] .tcl-speedometer__inner-circle {
right: calc(50% - 14px)
}
.tcl-speedometer__inner-circle {
bottom: 0;
fill: #191b1d;
inset-inline-start: calc(50% - 14px);
max-width: 28px;
opacity: .2;
position: absolute
}
.tcl-animate--to_reveal .tcl-speedometer__inner-circle {
-webkit-transform: translateZ(0) rotate(-180deg);
transform: translateZ(0) rotate(-180deg);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-transition: -webkit-transform 1.733s cubic-bezier(.77, 0, .175, 1);
transition: -webkit-transform 1.733s cubic-bezier(.77, 0, .175, 1);
transition: transform 1.733s cubic-bezier(.77, 0, .175, 1);
transition: transform 1.733s cubic-bezier(.77, 0, .175, 1), -webkit-transform 1.733s cubic-bezier(.77, 0, .175, 1);
-webkit-transition-delay: .2s;
transition-delay: .2s
}
.tcl-animate--to_reveal.tcl-animate--revealed .tcl-speedometer__inner-circle {
-webkit-transform: translateZ(0) rotate(0);
transform: translateZ(0) rotate(0)
}
[dir=ltr] .tcl-speedometer__needle {
left: calc(50% - 2px)
}
[dir=rtl] .tcl-speedometer__needle {
right: calc(50% - 2px)
}
.tcl-speedometer__needle {
bottom: 4px;
inset-inline-start: calc(50% - 2px);
max-width: 4px;
position: absolute;
z-index: 2
}
.tcl-animate--to_reveal .tcl-speedometer__needle {
-webkit-transform: translateZ(0) rotate(-90deg);
transform: translateZ(0) rotate(-90deg);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-transition: -webkit-transform 1.733s cubic-bezier(.77, 0, .175, 1) .2s;
transition: -webkit-transform 1.733s cubic-bezier(.77, 0, .175, 1) .2s;
transition: transform 1.733s cubic-bezier(.77, 0, .175, 1) .2s;
transition: transform 1.733s cubic-bezier(.77, 0, .175, 1) .2s, -webkit-transform 1.733s cubic-bezier(.77, 0, .175, 1) .2s
}
.tcl-animate--to_reveal.tcl-animate--revealed .tcl-speedometer__needle {
-webkit-transform: translateZ(0) rotate(90deg);
transform: translateZ(0) rotate(90deg)
}
.tcl-speedometer__digits {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end
}
.tcl-speedometer__digits,
.tcl-speedometer__number-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap
}
.tcl-speedometer__number-wrapper {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
height: 36px;
overflow: hidden;
padding: 0
}
@media (max-width:639px) {
.tcl-speedometer__number-wrapper {
height: 28px
}
}
.tcl-speedometer__number-wrapper.s2-head {
margin-bottom: 0
}
@media (max-width:639px) {
.tcl-speedometer__number-wrapper.s2-head {
margin-bottom: 2px
}
}
.tcl-speedometer__number {
text-align: center
}
.tcl-speedometer__number-separator {
padding: 0
}
.tcl-speedometer__microcopy {
line-height: 32px;
padding: 0
}
@media (max-width:639px) {
.tcl-speedometer__microcopy {
line-height: inherit
}
}
.tcl-animate--to_reveal .tcl-speedometer__number {
-webkit-transform: translateY(0) translateZ(0);
transform: translateY(0) translateZ(0);
-webkit-transition: -webkit-transform 1.733s cubic-bezier(1, 0, 0, 1) .2s;
transition: -webkit-transform 1.733s cubic-bezier(1, 0, 0, 1) .2s;
transition: transform 1.733s cubic-bezier(1, 0, 0, 1) .2s;
transition: transform 1.733s cubic-bezier(1, 0, 0, 1) .2s, -webkit-transform 1.733s cubic-bezier(1, 0, 0, 1) .2s
}
.tcl-animate--to_reveal.tcl-animate--revealed .tcl-speedometer__number.tcl-speedometer__number-integral {
-webkit-transform: translateY(0) translateZ(0);
-webkit-transform: translateY(var(--tcl-integral-as-percent)) translateZ(0);
transform: translateY(0) translateZ(0);
transform: translateY(var(--tcl-integral-as-percent)) translateZ(0)
}
.tcl-animate--to_reveal.tcl-animate--revealed .tcl-speedometer__number.tcl-speedometer__number-fractional {
-webkit-transform: translateY(0) translateZ(0);
-webkit-transform: translateY(var(--tcl-fractional-as-percent)) translateZ(0);
transform: translateY(0) translateZ(0);
transform: translateY(var(--tcl-fractional-as-percent)) translateZ(0)
}
.hero-callouts.hero-callouts--white .callout-title .tcl-speedometer__dial {
-webkit-filter: invert(100%);
filter: invert(100%)
}
.hero-callouts.hero-callouts--white .callout-title .tcl-speedometer__microcopy,
.hero-callouts.hero-callouts--white .callout-title .tcl-speedometer__number-separator,
.hero-callouts.hero-callouts--white .callout-title .tcl-speedometer__number-wrapper {
color: #fff;
color: var(--tds-color--white)
}
:root {
--cmp-carousel-large-screen: 840px;
--mktg-carousel-item-border_color: var(--tds-color--grey20);
--mktg-carousel-item-border_style: solid;
--mktg-carousel-item-border_width: 3px;
--mktg-carousel-item-dot_border: 2px;
--mktg-carousel-item-dot_size: 8px;
--mktg-carousel-spacing: 24px;
--mktg-carousel-item-margin_left: var(--mktg-carousel-spacing);
--mktg-carousel-item_width--large_screen: 186px;
--mktg-carousel-item_width--small_screen: 152px;
--mktg-carousel-transition_duration: 500ms;
--mktg-carousel-transition_function: ease;
--mktg-carousel-transition_property: all;
--mktg-carousel_width: 1260px
}
.mktg-carousel {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
margin: 0 auto;
max-width: 1260px;
max-width: var(--mktg-carousel_width);
position: relative
}
.mktg-carousel,
.mktg-carousel--navigation_bottom {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
@media (min-width:840px) {
.mktg-carousel--navigation_bottom .mktg-carousel-items,
.mktg-carousel--navigation_bottom .mktg-carousel-navigation {
width: 100%
}
}
[dir=ltr] .mktg-carousel-arrow--previous {
left: 20px
}
[dir=rtl] .mktg-carousel-arrow--previous {
right: 20px
}
.mktg-carousel-arrow--previous {
background-color: hsla(0, 0%, 100%, .25);
inset-inline-start: 20px;
z-index: 5
}
[dir=ltr] .mktg-carousel-arrow--next {
right: 20px
}
[dir=rtl] .mktg-carousel-arrow--next {
left: 20px
}
.mktg-carousel-arrow--next {
background-color: hsla(0, 0%, 100%, .25);
inset-inline-end: 20px;
z-index: 5
}
html[dir=rtl] .mktg-carousel-arrow--next,
html[dir=rtl] .mktg-carousel-arrow--previous {
-webkit-transform: scaleX(-1);
transform: scaleX(-1)
}
[dir=ltr] .mktg-carousel-header {
padding-left: 24px;
padding-left: var(--mktg-carousel-spacing)
}
[dir=ltr] .mktg-carousel-header,
[dir=rtl] .mktg-carousel-header {
padding-right: 24px;
padding-right: var(--mktg-carousel-spacing)
}
[dir=rtl] .mktg-carousel-header {
padding-left: 24px;
padding-left: var(--mktg-carousel-spacing)
}
.mktg-carousel-header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-margin-after: 16px;
margin-bottom: 16px;
max-width: 395px;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
-webkit-padding-start: 24px;
-webkit-padding-start: var(--mktg-carousel-spacing);
padding-inline-start: 24px;
padding-inline-start: var(--mktg-carousel-spacing);
-webkit-padding-end: 24px;
-webkit-padding-end: var(--mktg-carousel-spacing);
padding-inline-end: 24px;
padding-inline-end: var(--mktg-carousel-spacing);
width: 100%
}
[dir=ltr] .mktg-carousel--navigation_bottom .mktg-carousel-header {
padding-left: 32px
}
[dir=ltr] .mktg-carousel--navigation_bottom .mktg-carousel-header,
[dir=rtl] .mktg-carousel--navigation_bottom .mktg-carousel-header {
padding-right: 32px
}
[dir=rtl] .mktg-carousel--navigation_bottom .mktg-carousel-header {
padding-left: 32px
}
.mktg-carousel--navigation_bottom .mktg-carousel-header {
max-width: none;
min-width: 550px;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
-webkit-padding-start: 32px;
padding-inline-start: 32px;
-webkit-padding-end: 32px;
padding-inline-end: 32px
}
@media (max-width:839px) {
[dir=ltr] .mktg-carousel--navigation_bottom .mktg-carousel-header {
padding-left: 32px
}
[dir=ltr] .mktg-carousel--navigation_bottom .mktg-carousel-header,
[dir=rtl] .mktg-carousel--navigation_bottom .mktg-carousel-header {
padding-right: 32px
}
[dir=rtl] .mktg-carousel--navigation_bottom .mktg-carousel-header {
padding-left: 32px
}
.mktg-carousel--navigation_bottom .mktg-carousel-header {
min-width: 0;
-webkit-padding-start: 32px;
padding-inline-start: 32px;
-webkit-padding-end: 32px;
padding-inline-end: 32px;
width: 550px
}
}
@media (min-width:420px) {
[dir=ltr] .mktg-carousel--navigation_bottom .mktg-carousel-header {
padding-left: 0
}
[dir=ltr] .mktg-carousel--navigation_bottom .mktg-carousel-header,
[dir=rtl] .mktg-carousel--navigation_bottom .mktg-carousel-header {
padding-right: 0
}
[dir=rtl] .mktg-carousel--navigation_bottom .mktg-carousel-header {
padding-left: 0
}
.mktg-carousel--navigation_bottom .mktg-carousel-header {
min-width: 0;
-webkit-padding-start: 0;
padding-inline-start: 0;
-webkit-padding-end: 0;
padding-inline-end: 0;
width: 420px
}
}
@media (min-width:840px) {
[dir=ltr] .mktg-carousel--navigation_bottom .mktg-carousel-header {
padding-left: 0
}
[dir=ltr] .mktg-carousel--navigation_bottom .mktg-carousel-header,
[dir=rtl] .mktg-carousel--navigation_bottom .mktg-carousel-header {
padding-right: 0
}
[dir=rtl] .mktg-carousel--navigation_bottom .mktg-carousel-header {
padding-left: 0
}
.mktg-carousel--navigation_bottom .mktg-carousel-header {
min-width: 0;
min-width: 840px;
min-width: var(--cmp-carousel-large-screen);
-webkit-padding-start: 0;
padding-inline-start: 0;
-webkit-padding-end: 0;
padding-inline-end: 0
}
}
@media (max-width:419px) {
[dir=ltr] .mktg-carousel--navigation_bottom .mktg-carousel-header {
padding-left: 32px
}
[dir=ltr] .mktg-carousel--navigation_bottom .mktg-carousel-header,
[dir=rtl] .mktg-carousel--navigation_bottom .mktg-carousel-header {
padding-right: 32px
}
[dir=rtl] .mktg-carousel--navigation_bottom .mktg-carousel-header {
padding-left: 32px
}
.mktg-carousel--navigation_bottom .mktg-carousel-header {
min-width: 0;
-webkit-padding-start: 32px;
padding-inline-start: 32px;
-webkit-padding-end: 32px;
padding-inline-end: 32px;
width: 100%
}
}
@media (min-width:840px) {
[dir=ltr] .mktg-carousel-header {
padding-right: 40px;
padding-right: var(--tds-size--5x)
}
[dir=rtl] .mktg-carousel-header {
padding-left: 40px;
padding-left: var(--tds-size--5x)
}
.mktg-carousel-header {
-webkit-box-ordinal-group: initial;
-ms-flex-order: initial;
order: 0;
-webkit-padding-end: 40px;
-webkit-padding-end: var(--tds-size--5x);
padding-inline-end: 40px;
padding-inline-end: var(--tds-size--5x);
width: calc(49% - 8px);
width: calc(49% - var(--tds-size--1x))
}
}
@media (min-width:1440px) {
[dir=ltr] .mktg-carousel-header {
padding-left: 0
}
[dir=rtl] .mktg-carousel-header {
padding-right: 0
}
.mktg-carousel-header {
-webkit-padding-start: 0;
padding-inline-start: 0
}
}
.mktg-carousel-headline {
color: #393c41;
color: var(--tds-color--grey20);
-webkit-margin-after: 0;
margin-bottom: 0
}
.carousel-copy--desktop,
.tds-text--body.carousel-copy--desktop {
display: block
}
@media (max-width:839px) {
.carousel-copy--desktop,
.tds-text--body.carousel-copy--desktop {
display: none
}
}
.carousel-copy--mobile,
.tds-text--body.carousel-copy--mobile {
display: none
}
@media (max-width:839px) {
.carousel-copy--mobile,
.tds-text--body.carousel-copy--mobile {
display: block
}
}
.mktg_carousel.carousel--arrow-white .mktg-carousel-controls button {
border-color: #fff;
border-color: var(--tds-color--white)
}
.mktg_carousel.carousel--arrow-white .mktg-carousel-controls svg {
fill: #fff;
fill: var(--tds-color--white)
}
.mktg-carousel-navigation {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
overflow-x: visible;
padding: 24px 0;
padding: var(--mktg-carousel-spacing) 0;
position: relative;
width: 100%
}
@media (min-width:840px) {
.mktg-carousel-navigation {
overflow-x: hidden
}
}
.mktg-carousel--navigation_bottom .mktg-carousel-navigation {
-webkit-margin-after: 8px;
margin-bottom: 8px;
max-width: none;
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3
}
@media (min-width:840px) {
.mktg-carousel--navigation_bottom .mktg-carousel-navigation {
width: 840px
}
}
@media (min-width:840px) {
.mktg-carousel--navigation_bottom .mktg-carousel-navigation.mktg-carousel-navigation--few-items,
.mktg-carousel--navigation_bottom .mktg-carousel-navigation.mktg-carousel-navigation--few-items .mktg-carousel-items {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content
}
}
@media (min-width:840px) {
[dir=ltr] .mktg-carousel-navigation.carousel-navigation--shift-right {
padding-left: 170px
}
[dir=rtl] .mktg-carousel-navigation.carousel-navigation--shift-right {
padding-right: 170px
}
.mktg-carousel-navigation.carousel-navigation--shift-right {
-webkit-padding-start: 170px;
padding-inline-start: 170px
}
[dir=ltr] .mktg-carousel-navigation.carousel-navigation--shift-right .mktg-carousel-item_highlight {
left: 190px;
left: calc(var(--mktg-carousel-items_offset, 20px) + 170px)
}
[dir=rtl] .mktg-carousel-navigation.carousel-navigation--shift-right .mktg-carousel-item_highlight {
right: 190px;
right: calc(var(--mktg-carousel-items_offset, 20px) + 170px)
}
.mktg-carousel-navigation.carousel-navigation--shift-right .mktg-carousel-item_highlight {
inset-inline-start: 190px;
inset-inline-start: calc(var(--mktg-carousel-items_offset, 20px) + 170px)
}
}
@media (min-width:923px) {
[dir=ltr] .mktg-carousel-navigation {
padding-right: 0
}
[dir=rtl] .mktg-carousel-navigation {
padding-left: 0
}
.mktg-carousel-navigation {
max-width: 445px;
-webkit-box-ordinal-group: 1;
-ms-flex-order: 0;
order: 0;
-webkit-padding-end: 0;
padding-inline-end: 0;
width: auto
}
}
@media (min-width:975px) and (max-width:1319px) {
.tds-content_container--medium .mktg-carousel-navigation {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3
}
}
@media (min-width:975px) and (max-width:1847px) {
.tds-content_container--small .mktg-carousel-navigation {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3
}
}
[dir=ltr] .mktg-carousel-navigation button {
text-align: left
}
[dir=rtl] .mktg-carousel-navigation button {
text-align: right
}
.mktg-carousel-navigation button {
background-color: transparent;
border: none;
cursor: pointer;
margin: 0;
padding: 0;
text-align: start
}
.mktg-carousel-items {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-margin-after: 0;
margin-bottom: 0;
-webkit-margin-before: 0;
margin-top: 0;
-ms-overflow-style: none;
overflow-x: scroll;
padding: 0;
position: relative;
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-transition: -webkit-transform .5s ease;
-webkit-transition: -webkit-transform var(--mktg-carousel-transition_duration, .5s) var(--mktg-carousel-transition_function, ease);
transition: -webkit-transform .5s ease;
transition: -webkit-transform var(--mktg-carousel-transition_duration, .5s) var(--mktg-carousel-transition_function, ease);
transition: transform .5s ease;
transition: transform var(--mktg-carousel-transition_duration, .5s) var(--mktg-carousel-transition_function, ease);
transition: transform .5s ease, -webkit-transform .5s ease;
transition: transform var(--mktg-carousel-transition_duration, .5s) var(--mktg-carousel-transition_function, ease), -webkit-transform var(--mktg-carousel-transition_duration, .5s) var(--mktg-carousel-transition_function, ease);
white-space: nowrap;
width: 840px
}
@media (min-width:840px) {
.mktg-carousel-items {
width: auto
}
}
.mktg-carousel-items::-webkit-scrollbar {
background: transparent;
height: 0;
width: 0
}
.mktg-carousel-item_highlight {
display: none
}
[dir=ltr] .mktg-carousel-item {
margin-left: 24px;
margin-left: var(--mktg-carousel-item-margin_left)
}
[dir=rtl] .mktg-carousel-item {
margin-right: 24px;
margin-right: var(--mktg-carousel-item-margin_left)
}
.mktg-carousel-item {
border: 3px solid transparent;
border: var(--mktg-carousel-item-border_width) var(--mktg-carousel-item-border_style) #35AC39;
color: #222;
color: var(--tds-color--grey15);
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-margin-start: 24px;
-webkit-margin-start: var(--mktg-carousel-item-margin_left);
margin-inline-start: 24px;
margin-inline-start: var(--mktg-carousel-item-margin_left);
max-width: 152px;
max-width: var(--mktg-carousel-item_width--small_screen);
min-width: 152px;
min-width: var(--mktg-carousel-item_width--small_screen);
opacity: .5;
padding: 16px;
position: relative;
-webkit-tap-highlight-color: transparent;
white-space: normal;
width: 152px;
width: var(--mktg-carousel-item_width--small_screen)
}
@media (min-width:840px) {
.mktg-carousel-item {
max-width: 186px;
max-width: var(--mktg-carousel-item_width--large_screen);
min-width: 186px;
min-width: var(--mktg-carousel-item_width--large_screen);
width: 186px;
width: var(--mktg-carousel-item_width--large_screen)
}
}
[dir=ltr] .mktg-carousel-item:first-child {
left: 0
}
[dir=rtl] .mktg-carousel-item:first-child {
right: 0
}
[dir=ltr] .mktg-carousel-item:first-child {
margin-left: 0
}
[dir=rtl] .mktg-carousel-item:first-child {
margin-right: 0
}
.mktg-carousel-item:first-child {
inset-inline-start: 0;
-webkit-margin-start: 0;
margin-inline-start: 0
}
.mktg-carousel-item button {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column;
flex-flow: column;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
max-width: 100%;
width: 100%
}
.mktg-carousel-navigation button:active,
.mktg-carousel-navigation button:focus {
color: #000;
color: var(--tds-color--black);
outline: none
}
.mktg-carousel-item--active,
.mktg-carousel-item:hover,
.mktg-carousel-slide--active,
.mktg-carousel-slide.mktg-carousel-slide--active {
cursor: default;
opacity: 1!important;
position: relative;
-webkit-transition: opacity .5s ease;
-webkit-transition: opacity var(--mktg-carousel-transition_duration, .5s) var(--mktg-carousel-transition_function, ease);
transition: opacity .5s ease;
transition: opacity var(--mktg-carousel-transition_duration, .5s) var(--mktg-carousel-transition_function, ease);
z-index: 1
}
.mktg-carousel-item:focus-within:not(.mktg-carousel-item--active) {
border: 1px dashed #000!important;
border: 1px dashed var(--tds-color--black)!important;
-webkit-transition: border 2s;
transition: border 2s
}
.mktg-carousel-item-headline,
.tds-text--h3.mktg-carousel-item-headline,
h3.mktg-carousel-item-headline {
font-size: 14px;
line-height: 1.25;
-webkit-margin-after: 16px;
margin-bottom: 16px;
-webkit-margin-before: 0;
margin-top: 0;
overflow-wrap: break-word;
padding: 0;
word-break: break-word
}
.mktg-carousel-item-caption {
font-size: 10px;
-webkit-margin-after: 0;
margin-bottom: 0;
padding: 0
}
@media (min-width:840px) {
.mktg-carousel-item-headline,
.tds-text--h3.mktg-carousel-item-headline,
h3.mktg-carousel-item-headline {
font-size: 18px
}
.mktg-carousel-item-caption {
font-size: 13px
}
}
.mktg-carousel-side_gradient {
content: "";
height: 100%;
position: absolute;
top: 0;
width: 10px;
z-index: 2
}
[dir=ltr] .mktg-carousel-side_gradient--left {
left: 0
}
[dir=rtl] .mktg-carousel-side_gradient--left {
right: 0
}
.mktg-carousel-side_gradient--left {
background: -webkit-gradient(linear, right top, left top, from(hsla(0, 0%, 100%, 0)), to(#fff));
background: -webkit-gradient(linear, right top, left top, from(hsla(0, 0%, 100%, 0)), to(var(--tds-color--white)));
background: linear-gradient(270deg, hsla(0, 0%, 100%, 0), #fff);
background: linear-gradient(270deg, hsla(0, 0%, 100%, 0), var(--tds-color--white));
inset-inline-start: 0;
opacity: 0;
opacity: var(--tds-opacity--transparent)
}
@media (min-width:640px) {
[dir=ltr] .mktg-carousel-side_gradient--left {
left: calc(-50vw - -307px)
}
[dir=rtl] .mktg-carousel-side_gradient--left {
right: calc(-50vw - -307px)
}
.mktg-carousel-side_gradient--left {
inset-inline-start: calc(-50vw - -307px)
}
}
@media (min-width:840px) {
[dir=ltr] .mktg-carousel-side_gradient--left {
left: 0
}
[dir=rtl] .mktg-carousel-side_gradient--left {
right: 0
}
.mktg-carousel-side_gradient--left {
inset-inline-start: 0
}
}
html[dir=rtl] .mktg-carousel-side_gradient--left {
background: -webkit-gradient(linear, left top, right top, from(hsla(0, 0%, 100%, 0)), to(#fff));
background: -webkit-gradient(linear, left top, right top, from(hsla(0, 0%, 100%, 0)), to(var(--tds-color--white)));
background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), #fff);
background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), var(--tds-color--white))
}
[dir=ltr] .mktg-carousel-side_gradient--right {
right: 0
}
[dir=rtl] .mktg-carousel-side_gradient--right {
left: 0
}
.mktg-carousel-side_gradient--right {
background: -webkit-gradient(linear, left top, right top, from(hsla(0, 0%, 100%, 0)), to(#fff));
background: -webkit-gradient(linear, left top, right top, from(hsla(0, 0%, 100%, 0)), to(var(--tds-color--white)));
background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), #fff);
background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), var(--tds-color--white));
inset-inline-end: 0
}
@media (min-width:640px) {
[dir=ltr] .mktg-carousel-side_gradient--right {
right: calc(-50vw - -307px)
}
[dir=rtl] .mktg-carousel-side_gradient--right {
left: calc(-50vw - -307px)
}
.mktg-carousel-side_gradient--right {
inset-inline-end: calc(-50vw - -307px)
}
}
@media (min-width:840px) {
[dir=ltr] .mktg-carousel-side_gradient--right {
right: 0
}
[dir=rtl] .mktg-carousel-side_gradient--right {
left: 0
}
.mktg-carousel-side_gradient--right {
inset-inline-end: 0
}
}
html[dir=rtl] .mktg-carousel-side_gradient--right {
background: -webkit-gradient(linear, right top, left top, from(hsla(0, 0%, 100%, 0)), to(#fff));
background: -webkit-gradient(linear, right top, left top, from(hsla(0, 0%, 100%, 0)), to(var(--tds-color--white)));
background: linear-gradient(270deg, hsla(0, 0%, 100%, 0), #fff);
background: linear-gradient(270deg, hsla(0, 0%, 100%, 0), var(--tds-color--white))
}
@media (min-width:768px) {
.mktg-carousel-side_gradient {
width: 76px;
width: calc(var(--mktg-carousel-item_width--small_screen)/2)
}
}
@media (min-width:840px) {
[dir=ltr] .mktg-carousel-side_gradient--left {
margin-left: 0
}
[dir=rtl] .mktg-carousel-side_gradient--left {
margin-right: 0
}
.mktg-carousel-side_gradient--left {
-webkit-margin-start: 0;
margin-inline-start: 0
}
[dir=ltr] .mktg-carousel-side_gradient--right {
margin-right: 0
}
[dir=rtl] .mktg-carousel-side_gradient--right {
margin-left: 0
}
.mktg-carousel-side_gradient--right {
-webkit-margin-end: 0;
margin-inline-end: 0
}
}
.mktg-carousel-navigation--box_highlight,
.mktg-carousel-navigation--line_highlight {
-ms-touch-action: auto;
touch-action: auto
}
.mktg-carousel-item_highlight,
.mktg-carousel-navigation--box_highlight .mktg-carousel-items,
.mktg-carousel-navigation--line_highlight .mktg-carousel-items {
-webkit-transition: -webkit-transform .5s ease;
-webkit-transition: -webkit-transform var(--mktg-carousel-transition_duration, .5s) var(--mktg-carousel-transition_function, ease);
transition: -webkit-transform .5s ease;
transition: -webkit-transform var(--mktg-carousel-transition_duration, .5s) var(--mktg-carousel-transition_function, ease);
transition: transform .5s ease;
transition: transform var(--mktg-carousel-transition_duration, .5s) var(--mktg-carousel-transition_function, ease);
transition: transform .5s ease, -webkit-transform .5s ease;
transition: transform var(--mktg-carousel-transition_duration, .5s) var(--mktg-carousel-transition_function, ease), -webkit-transform var(--mktg-carousel-transition_duration, .5s) var(--mktg-carousel-transition_function, ease)
}
[dir=ltr] .mktg-carousel-navigation--box_highlight .mktg-carousel-items,
[dir=ltr] .mktg-carousel-navigation--line_highlight .mktg-carousel-items {
left: auto
}
[dir=rtl] .mktg-carousel-navigation--box_highlight .mktg-carousel-items,
[dir=rtl] .mktg-carousel-navigation--line_highlight .mktg-carousel-items {
right: auto
}
[dir=ltr] .mktg-carousel-navigation--box_highlight .mktg-carousel-items,
[dir=ltr] .mktg-carousel-navigation--line_highlight .mktg-carousel-items {
padding-left: 0
}
[dir=rtl] .mktg-carousel-navigation--box_highlight .mktg-carousel-items,
[dir=rtl] .mktg-carousel-navigation--line_highlight .mktg-carousel-items {
padding-right: 0
}
.mktg-carousel-navigation--box_highlight .mktg-carousel-items,
.mktg-carousel-navigation--line_highlight .mktg-carousel-items {
inset-inline-start: auto;
overflow: initial;
-webkit-padding-start: 0;
padding-inline-start: 0
}
.mktg-carousel-navigation--box_highlight .mktg-carousel-item--active,
.mktg-carousel-navigation--line_highlight .mktg-carousel-item--active {
-webkit-transition: border .5s ease;
-webkit-transition: border var(--mktg-carousel-transition_duration, .5s) var(--mktg-carousel-transition_function, ease);
transition: border .5s ease;
transition: border var(--mktg-carousel-transition_duration, .5s) var(--mktg-carousel-transition_function, ease)
}
[dir=ltr] .mktg-carousel-navigation--box_highlight .mktg-carousel-item_highlight,
[dir=ltr] .mktg-carousel-navigation--line_highlight .mktg-carousel-item_highlight {
left: auto
}
[dir=rtl] .mktg-carousel-navigation--box_highlight .mktg-carousel-item_highlight,
[dir=rtl] .mktg-carousel-navigation--line_highlight .mktg-carousel-item_highlight {
right: auto
}
.mktg-carousel-navigation--box_highlight .mktg-carousel-item_highlight,
.mktg-carousel-navigation--line_highlight .mktg-carousel-item_highlight {
content: "";
display: block;
inset-inline-start: auto;
position: absolute;
top: 24px;
top: var(--mktg-carousel-spacing);
-webkit-transform: translateX(0);
transform: translateX(0);
width: 152px;
width: var(--mktg-carousel-item_width--small_screen)
}
@media (min-width:840px) {
.mktg-carousel-navigation--box_highlight .mktg-carousel-item_highlight,
.mktg-carousel-navigation--line_highlight .mktg-carousel-item_highlight {
width: 186px;
width: var(--mktg-carousel-item_width--large_screen)
}
}
[dir=ltr] .mktg-carousel-navigation--line_highlight .mktg-carousel-item_highlight {
margin-left: 18px
}
[dir=rtl] .mktg-carousel-navigation--line_highlight .mktg-carousel-item_highlight {
margin-right: 18px
}
.mktg-carousel-navigation--line_highlight .mktg-carousel-item_highlight {
border-top: 3px solid #393c41;
border-top: var(--mktg-carousel-item-border_width) var(--mktg-carousel-item-border_style) var(--mktg-carousel-item-border_color);
height: auto;
-webkit-margin-start: 18px;
margin-inline-start: 18px;
overflow: hidden
}
@media (min-width:840px) {
.mktg-carousel-navigation--line_highlight .mktg-carousel-item_highlight {
width: 136px;
width: calc(var(--mktg-carousel-item_width--large_screen) - 50px)
}
}
@media (max-width:839px) {
.mktg-carousel-navigation--line_highlight .mktg-carousel-item_highlight {
width: 102px;
width: calc(var(--mktg-carousel-item_width--small_screen) - 50px)
}
}
.mktg-carousel.mktg-carousel--navigation_bottom .mktg-carousel-navigation--line_highlight .mktg-carousel-item {
border: 1px solid transparent;
-webkit-box-flex: 1;
-ms-flex: 1 0 0px;
flex: 1 0 0;
margin: 0;
max-width: none;
min-width: auto;
width: auto
}
@media (max-width:639px) {
.mktg-carousel.mktg-carousel--navigation_bottom .mktg-carousel-navigation--line_highlight .mktg-carousel-item {
height: auto
}
}
.mktg-carousel.mktg-carousel--navigation_bottom .mktg-carousel-navigation--line_highlight.mktg-carousel-navigation--few-items {
width: 840px
}
@media (max-width:839px) {
[dir=ltr] .mktg-carousel.mktg-carousel--navigation_bottom .mktg-carousel-navigation--line_highlight.mktg-carousel-navigation--few-items {
margin-left: auto
}
[dir=ltr] .mktg-carousel.mktg-carousel--navigation_bottom .mktg-carousel-navigation--line_highlight.mktg-carousel-navigation--few-items,
[dir=rtl] .mktg-carousel.mktg-carousel--navigation_bottom .mktg-carousel-navigation--line_highlight.mktg-carousel-navigation--few-items {
margin-right: auto
}
[dir=rtl] .mktg-carousel.mktg-carousel--navigation_bottom .mktg-carousel-navigation--line_highlight.mktg-carousel-navigation--few-items {
margin-left: auto
}
.mktg-carousel.mktg-carousel--navigation_bottom .mktg-carousel-navigation--line_highlight.mktg-carousel-navigation--few-items {
-webkit-margin-start: auto;
margin-inline-start: auto;
-webkit-margin-end: auto;
margin-inline-end: auto;
width: 614px
}
}
@media (max-width:639px) {
.mktg-carousel.mktg-carousel--navigation_bottom .mktg-carousel-navigation--line_highlight.mktg-carousel-navigation--few-items {
width: calc(100% - 64px);
width: calc(100% - var(--tds-size--4x)*2);
overflow: hidden
}
}
.mktg-carousel.mktg-carousel--navigation_bottom .mktg-carousel-navigation--line_highlight.mktg-carousel-navigation--few-items .mktg-carousel-items {
width: 100%
}
@media (max-width:839px) {
.mktg-carousel.mktg-carousel--navigation_bottom .mktg-carousel-navigation--line_highlight.mktg-carousel-navigation--few-items .mktg-carousel-items {
width: 582px
}
}
@media (max-width:639px) {
[dir=ltr] .mktg-carousel.mktg-carousel--navigation_bottom .mktg-carousel-navigation--line_highlight .mktg-carousel-items {
margin-left: -18px
}
[dir=rtl] .mktg-carousel.mktg-carousel--navigation_bottom .mktg-carousel-navigation--line_highlight .mktg-carousel-items {
margin-right: -18px
}
.mktg-carousel.mktg-carousel--navigation_bottom .mktg-carousel-navigation--line_highlight .mktg-carousel-items {
-webkit-margin-start: -18px;
margin-inline-start: -18px
}
}
@media (max-width:639px) {
[dir=ltr] .mktg-carousel.mktg-carousel--navigation_bottom .mktg-carousel-navigation--line_highlight .mktg-carousel-item_highlight {
margin-left: 0
}
[dir=rtl] .mktg-carousel.mktg-carousel--navigation_bottom .mktg-carousel-navigation--line_highlight .mktg-carousel-item_highlight {
margin-right: 0
}
.mktg-carousel.mktg-carousel--navigation_bottom .mktg-carousel-navigation--line_highlight .mktg-carousel-item_highlight {
-webkit-margin-start: 0;
margin-inline-start: 0
}
}
@media (min-width:640px) {
.mktg-carousel.mktg-carousel--navigation_bottom .mktg-carousel-navigation--line_highlight .mktg-carousel-slides .mktg-carousel-slide {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
}
.mktg-carousel-navigation--box_highlight .mktg-carousel-item_highlight {
border: 3px solid #393c41;
border: var(--mktg-carousel-item-border_width) var(--mktg-carousel-item-border_style) var(--mktg-carousel-item-border_color);
height: calc(100% - 48px);
height: calc(100% - var(--tds-size--1x)*6)
}
@media (min-width:840px) {
.mktg-carousel-item_highlight {
width: 186px;
width: var(--mktg-carousel-item_width--large_screen)
}
}
.mktg-carousel-item:before {
display: none
}
[dir=ltr] .mktg-carousel-navigation--box_highlight .mktg-carousel-item:before {
left: 0
}
[dir=rtl] .mktg-carousel-navigation--box_highlight .mktg-carousel-item:before {
right: 0
}
.mktg-carousel-navigation--box_highlight .mktg-carousel-item:before {
border-top: 3px solid #393c41;
border-top: var(--mktg-carousel-item-border_width) var(--mktg-carousel-item-border_style) var(--mktg-carousel-item-border_color);
content: "";
display: block;
inset-inline-start: 0;
-webkit-margin-before: -3px;
-webkit-margin-before: calc(var(--mktg-carousel-item-border_width)*-1);
margin-top: -3px;
margin-top: calc(var(--mktg-carousel-item-border_width)*-1);
position: absolute;
top: 0;
width: 100%
}
[dir=ltr] .mktg-carousel-navigation--dotted {
text-align: left
}
[dir=rtl] .mktg-carousel-navigation--dotted {
text-align: right
}
.mktg-carousel-navigation--dotted {
-ms-flex-line-pack: center;
align-content: center;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin: 0 auto;
padding: 10px 0 0;
text-align: start
}
.mktg-carousel--navigation_bottom .mktg-carousel-navigation--dotted {
width: 840px
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape),
(min-width:640px) and (max-width:1023px) and (orientation:portrait) {
.mktg-carousel--navigation_bottom .mktg-carousel-navigation--dotted {
width: 420px
}
}
@media (max-width:639px) {
[dir=ltr] .mktg-carousel--navigation_bottom .mktg-carousel-navigation--dotted {
padding-right: 32px
}
[dir=ltr] .mktg-carousel--navigation_bottom .mktg-carousel-navigation--dotted,
[dir=rtl] .mktg-carousel--navigation_bottom .mktg-carousel-navigation--dotted {
padding-left: 32px
}
[dir=rtl] .mktg-carousel--navigation_bottom .mktg-carousel-navigation--dotted {
padding-right: 32px
}
.mktg-carousel--navigation_bottom .mktg-carousel-navigation--dotted {
-webkit-padding-end: 32px;
padding-inline-end: 32px;
-webkit-padding-start: 32px;
padding-inline-start: 32px
}
}
.mktg-carousel--navigation_bottom .mktg-carousel-navigation--dotted>div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape),
(min-width:640px) and (max-width:1023px) and (orientation:portrait) {
.mktg-carousel--navigation_bottom .mktg-carousel-navigation--dotted>div {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap
}
}
.mktg-carousel--navigation_bottom .mktg-carousel-navigation--dotted.mktg-carousel-navigation--stacked {
-webkit-padding-before: 0;
padding-top: 0
}
.mktg-carousel--navigation_bottom .mktg-carousel-navigation--dotted.mktg-carousel-navigation--stacked .mktg-carousel-indicators {
-webkit-margin-after: 10px;
margin-bottom: 10px
}
[dir=ltr] .mktg-carousel-indicators {
padding-left: 0
}
[dir=rtl] .mktg-carousel-indicators {
padding-right: 0
}
.mktg-carousel-indicators {
-ms-flex-line-pack: center;
align-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
list-style: none;
-webkit-margin-after: 10px;
margin-bottom: 10px;
-webkit-margin-before: 0;
margin-top: 0;
-webkit-padding-start: 0;
padding-inline-start: 0
}
@media (min-width:840px) {
.mktg-carousel-indicators {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
.mktg-carousel--side_by_side .mktg-carousel-indicators {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start
}
}
[dir=ltr] .mktg-carousel-indicator,
[dir=ltr] button.mktg-carousel-indicator {
margin-right: 8px
}
[dir=rtl] .mktg-carousel-indicator,
[dir=rtl] button.mktg-carousel-indicator {
margin-left: 8px
}
.mktg-carousel-indicator,
button.mktg-carousel-indicator {
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
background-color: transparent;
border: 2px solid #a2a3a5;
border: var(--mktg-carousel-item-dot_border) solid var(--tds-color--grey40);
border-radius: 8px;
border-radius: var(--mktg-carousel-item-dot_size);
cursor: pointer;
height: 10px;
height: calc(var(--mktg-carousel-item-dot_size) + var(--mktg-carousel-item-dot_border));
-webkit-margin-end: 8px;
margin-inline-end: 8px;
padding: 0;
-webkit-transition: background-color .5s ease, border .5s ease;
-webkit-transition: background-color var(--mktg-carousel-transition_duration, .5s) var(--mktg-carousel-transition_function, ease), border var(--mktg-carousel-transition_duration, .5s) var(--mktg-carousel-transition_function, ease);
transition: background-color .5s ease, border .5s ease;
transition: background-color var(--mktg-carousel-transition_duration, .5s) var(--mktg-carousel-transition_function, ease), border var(--mktg-carousel-transition_duration, .5s) var(--mktg-carousel-transition_function, ease);
width: 10px;
width: calc(var(--mktg-carousel-item-dot_size) + var(--mktg-carousel-item-dot_border))
}
.mktg-carousel-indicator--active,
button.mktg-carousel-indicator--active {
background-color: #000;
background-color: var(--tds-color--black);
border-color: #000;
border-color: var(--tds-color--black)
}
.mktg-carousel-indicators--left {
-webkit-box-pack: start!important;
-ms-flex-pack: start!important;
justify-content: flex-start!important
}
.mktg-carousel-indicators--right {
-webkit-box-pack: end!important;
-ms-flex-pack: end!important;
justify-content: flex-end!important
}
@media (max-width:639px) {
.mktg-carousel-indicators--right {
-webkit-box-pack: start!important;
-ms-flex-pack: start!important;
justify-content: flex-start!important
}
}
@media (min-width:840px) {
.mktg-carousel-indicators--left_on_large {
-webkit-box-pack: start!important;
-ms-flex-pack: start!important;
justify-content: flex-start!important
}
.mktg-carousel-indicators--right_on_large {
-webkit-box-pack: end!important;
-ms-flex-pack: end!important;
justify-content: flex-end!important
}
}
.mktg-carousel--navigation_bottom .mktg-carousel-indicators {
height: 24px;
margin: 0;
min-width: 140px
}
.mktg-carousel--navigation_bottom .mktg-carousel-indicators.mktg-carousel-indicators--left {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1
}
.mktg-carousel--navigation_bottom .mktg-carousel-indicators.mktg-carousel-indicators--right {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1
}
.mktg-carousel--navigation_bottom .mktg-carousel-indicators .mktg-carousel-indicator {
display: block
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape),
(min-width:640px) and (max-width:1023px) and (orientation:portrait) {
.mktg-carousel--navigation_bottom .mktg-carousel-indicators {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1
}
}
[dir=ltr] .mktg-carousel-navigation--dotted .mktg-carousel-items {
padding-left: 0
}
[dir=ltr] .mktg-carousel-navigation--dotted .mktg-carousel-items,
[dir=rtl] .mktg-carousel-navigation--dotted .mktg-carousel-items {
padding-right: 0
}
[dir=rtl] .mktg-carousel-navigation--dotted .mktg-carousel-items {
padding-left: 0
}
.mktg-carousel-navigation--dotted .mktg-carousel-items {
-webkit-padding-start: 0;
padding-inline-start: 0;
-webkit-padding-end: 0;
padding-inline-end: 0
}
[dir=ltr] .mktg-carousel-navigation--dotted .mktg-carousel-item {
left: 0
}
[dir=rtl] .mktg-carousel-navigation--dotted .mktg-carousel-item {
right: 0
}
[dir=ltr] .mktg-carousel-navigation--dotted .mktg-carousel-item {
margin-left: 0
}
[dir=rtl] .mktg-carousel-navigation--dotted .mktg-carousel-item {
margin-right: 0
}
.mktg-carousel-navigation--dotted .mktg-carousel-item {
border-top: 0;
inset-inline-start: 0;
-webkit-margin-start: 0;
margin-inline-start: 0;
opacity: 0;
opacity: var(--tds-opacity--transparent);
padding: 0;
position: absolute;
top: 0;
width: 100%
}
.mktg-carousel-navigation--dotted .mktg-carousel-item--active {
padding: 0;
position: relative
}
[dir=ltr] .mktg-carousel-slides {
margin-left: auto
}
[dir=ltr] .mktg-carousel-slides,
[dir=rtl] .mktg-carousel-slides {
margin-right: auto
}
[dir=rtl] .mktg-carousel-slides {
margin-left: auto
}
.mktg-carousel-slides {
display: block;
-webkit-margin-after: 8px;
margin-bottom: 8px;
-webkit-margin-start: auto;
margin-inline-start: auto;
-webkit-margin-end: auto;
margin-inline-end: auto;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
position: relative;
width: 100%
}
.mktg-carousel-slides .mktg-carousel-slides_container {
list-style-type: none;
margin: 0;
padding: 0
}
.mktg-carousel--navigation_bottom .mktg-carousel-slides {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2
}
.mktg-carousel--side_by_side .mktg-carousel-navigation,
.mktg-carousel--side_by_side .mktg-carousel-slides {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1
}
.mktg-carousel--side_by_side .mktg-carousel-slides {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
width: auto
}
@media (min-width:840px) {
.mktg-carousel-slides {
-webkit-box-ordinal-group: initial;
-ms-flex-order: initial;
order: 0
}
}
.mktg-carousel-slide {
display: block;
max-width: 100%;
opacity: 0;
opacity: var(--tds-opacity--transparent);
position: absolute;
top: 0;
-webkit-transition: opacity .5s ease;
-webkit-transition: opacity var(--mktg-carousel-transition_duration, .5s) var(--mktg-carousel-transition_function, ease);
transition: opacity .5s ease;
transition: opacity var(--mktg-carousel-transition_duration, .5s) var(--mktg-carousel-transition_function, ease);
width: 100%;
z-index: 0
}
@media (min-width:640px) {
.mktg-carousel-slide {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
}
.mktg-carousel-slide__asset {
display: block;
height: auto;
width: 100%
}
@media (min-width:640px) {
.mktg-carousel-slide__asset {
font-family: "object-fit:cover";
-o-object-fit: cover;
object-fit: cover
}
}
.mktg-carousel-slides_mask {
overflow-x: hidden
}
.mktg-carousel-slides--swipeable .mktg-carousel-slides_container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-transition: -webkit-transform .5s ease;
-webkit-transition: -webkit-transform var(--mktg-carousel-transition_duration, .5s) var(--mktg-carousel-transition_function, ease);
transition: -webkit-transform .5s ease;
transition: -webkit-transform var(--mktg-carousel-transition_duration, .5s) var(--mktg-carousel-transition_function, ease);
transition: transform .5s ease;
transition: transform var(--mktg-carousel-transition_duration, .5s) var(--mktg-carousel-transition_function, ease);
transition: transform .5s ease, -webkit-transform .5s ease;
transition: transform var(--mktg-carousel-transition_duration, .5s) var(--mktg-carousel-transition_function, ease), -webkit-transform var(--mktg-carousel-transition_duration, .5s) var(--mktg-carousel-transition_function, ease)
}
.mktg-carousel-slides--swipeable .mktg-carousel-slide {
opacity: 1;
position: relative;
z-index: 1
}
[dir=ltr] .mktg-carousel-slide-captions {
padding-left: 0
}
[dir=rtl] .mktg-carousel-slide-captions {
padding-right: 0
}
.mktg-carousel-slide-captions {
margin: 0;
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
-webkit-padding-start: 0;
padding-inline-start: 0;
width: 100%
}
.mktg-carousel-slide-captions p {
margin: 0
}
.mktg-carousel-slide-captions h3 {
-webkit-padding-before: 0;
padding-top: 0
}
@media (max-width:639px) {
.mktg-carousel-slide-captions h3 {
-webkit-padding-after: 16px;
padding-bottom: 16px
}
}
@media (min-width:540px) {
.mktg-carousel-slide-captions {
-webkit-margin-before: 4px;
margin-top: 4px
}
}
.mktg-carousel--navigation_bottom .mktg-carousel-slide-captions {
-webkit-box-ordinal-group: 1;
-ms-flex-order: 0;
order: 0
}
.mktg-carousel-slide-caption {
display: none;
max-width: 850px;
min-height: 64px;
overflow: auto
}
.mktg-carousel-slide-caption--active {
display: block
}
.carousel-additional-copy {
max-width: 850px;
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
white-space: unset
}
.mktg-carousel-navigation--dotted .mktg-carousel-item,
.mktg-carousel-navigation--dotted .mktg-carousel-items,
.mktg-carousel-navigation--dotted .mktg-carousel-navigation,
.mktg-carousel-navigation--dotted .mktg-carousel-slides {
max-width: 100%;
width: 100%
}
[dir=ltr] .mktg-carousel-controls {
left: 0
}
[dir=ltr] .mktg-carousel-controls,
[dir=rtl] .mktg-carousel-controls {
right: 0
}
[dir=rtl] .mktg-carousel-controls {
left: 0
}
.mktg-carousel-controls {
-ms-flex-line-pack: center;
align-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
bottom: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
inset-inline-start: 0;
position: absolute;
inset-inline-end: 0;
top: 0
}
.mktg-carousel-controls>button {
height: 44px;
width: 44px
}
[dir=ltr] .mktg-carousel-controls>button.mktg-carousel-arrow--previous {
left: 46px
}
[dir=rtl] .mktg-carousel-controls>button.mktg-carousel-arrow--previous {
right: 46px
}
.mktg-carousel-controls>button.mktg-carousel-arrow--previous {
inset-inline-start: 46px
}
[dir=ltr] .mktg-carousel-controls>button.mktg-carousel-arrow--next {
right: 46px
}
[dir=rtl] .mktg-carousel-controls>button.mktg-carousel-arrow--next {
left: 46px
}
.mktg-carousel-controls>button.mktg-carousel-arrow--next {
inset-inline-end: 46px
}
.mktg-carousel-controls>button:hover {
opacity: .6
}
@media (max-width:839px) {
.mktg-carousel-controls--hide_on_small_screens {
display: none
}
}
.mktg-carousel-arrow {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: transparent;
border: 2px solid #000;
border: 2px solid var(--tds-color--black);
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-size: 15px;
height: 40px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 40px
}
.mktg-carousel-arrow:active,
.mktg-carousel-arrow:focus {
outline: 1px dotted #000;
outline: 1px dotted var(--tds-color--black)
}
@media (min-width:840px) {
.mktg-carousel-arrow {
height: 50px;
width: 50px
}
}
@media (min-width:1440px) {
[dir=ltr] .mktg-carousel-arrow--previous {
left: -70px
}
[dir=rtl] .mktg-carousel-arrow--previous {
right: -70px
}
.mktg-carousel-arrow--previous {
inset-inline-start: -70px
}
[dir=ltr] .mktg-carousel-arrow--next {
right: -70px
}
[dir=rtl] .mktg-carousel-arrow--next {
left: -70px
}
.mktg-carousel-arrow--next {
inset-inline-end: -70px
}
}
@media (min-width:840px) {
.mktg-carousel--side_by_side .mktg-carousel-slides {
max-width: calc(66.6667% - 50px)
}
.mktg-carousel--side_by_side .mktg-carousel-navigation {
max-width: 33.3333%
}
}
[dir=ltr] .mktg-carousel--side_by_side .mktg-carousel-arrow--next {
right: 20px
}
[dir=rtl] .mktg-carousel--side_by_side .mktg-carousel-arrow--next {
left: 20px
}
.mktg-carousel--side_by_side .mktg-carousel-arrow--next {
inset-inline-end: 20px
}
[dir=ltr] .mktg-carousel--side_by_side .mktg-carousel-arrow--previous {
left: 20px
}
[dir=rtl] .mktg-carousel--side_by_side .mktg-carousel-arrow--previous {
right: 20px
}
.mktg-carousel--side_by_side .mktg-carousel-arrow--previous {
inset-inline-start: 20px
}
.mktg-carousel--side_by_side .mktg-carousel-item-headline,
.mktg-carousel--side_by_side .tds-text--h3.mktg-carousel-item-headline,
.mktg-carousel--side_by_side h3.mktg-carousel-item-headline {
font-size: 28px;
font-size: var(--tds-font-size--70);
-webkit-margin-after: 20px;
margin-bottom: 20px
}
.mktg-carousel--side_by_side .mktg-carousel-item-caption {
font-size: 21px;
font-size: var(--tds-line-height--30)
}
.mktg-carousel-arrow--white,
.tds-scrim--black .mktg-carousel,
.tds-scrim--black .mktg-carousel-arrow:not(.mktg-carousel-arrow--black),
.tds-scrim--black .mktg-carousel-description,
.tds-scrim--black .mktg-carousel-headline,
.tds-scrim--black .mktg-carousel-item-caption,
.tds-scrim--black .mktg-carousel-item-headline,
.tds-scrim--black .tds-text--h3.mktg-carousel-item-headline,
.tds-scrim--black h3.mktg-carousel-item-headline {
color: #fff;
color: var(--tds-color--white)
}
.mktg-carousel-arrow--white,
.tds-scrim--black .mktg-carousel-arrow:not(.mktg-carousel-arrow--black) {
background-color: rgba(0, 0, 0, .4)
}
.mktg-carousel-arrow--white .tds-icon,
.tds-scrim--black .mktg-carousel-arrow:not(.mktg-carousel-arrow--black) .tds-icon {
fill: #fff;
fill: var(--tds-color--white)
}
.tds-scrim--black .mktg-carousel-navigation--box_highlight .mktg-carousel-item:before {
border-top-color: #fff;
border-top-color: var(--tds-color--white)
}
.tds-scrim--black .mktg-carousel-navigation button:active,
.tds-scrim--black .mktg-carousel-navigation button:focus {
color: #fff;
color: var(--tds-color--white)
}
.mktg-carousel-arrow--white,
.tds-scrim--black .mktg-carousel-arrow:not(.mktg-carousel-arrow--black),
.tds-scrim--black .mktg-carousel-navigation--box_highlight .mktg-carousel-item_highlight {
border-color: #fff;
border-color: var(--tds-color--white)
}
.tds-scrim--black .mktg-carousel-side_gradient--left {
background: -webkit-gradient(linear, right top, left top, from(transparent), to(#000));
background: -webkit-gradient(linear, right top, left top, from(transparent), to(var(--tds-color--black)));
background: linear-gradient(270deg, transparent, #000);
background: linear-gradient(270deg, transparent, var(--tds-color--black))
}
.tds-scrim--black .mktg-carousel-side_gradient--right,
html[dir=rtl] .tds-scrim--black .mktg-carousel-side_gradient--left {
background: -webkit-gradient(linear, left top, right top, from(transparent), to(#000));
background: -webkit-gradient(linear, left top, right top, from(transparent), to(var(--tds-color--black)));
background: linear-gradient(90deg, transparent, #000);
background: linear-gradient(90deg, transparent, var(--tds-color--black))
}
html[dir=rtl] .tds-scrim--black .mktg-carousel-side_gradient--right {
background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#000));
background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(var(--tds-color--black)));
background: linear-gradient(2700deg, transparent, #000);
background: linear-gradient(2700deg, transparent, var(--tds-color--black))
}
.tds-scrim--black .mktg-carousel-indicator--active,
.tds-scrim--black button.mktg-carousel-indicator--active {
background-color: #fff;
background-color: var(--tds-color--white);
border-color: #fff;
border-color: var(--tds-color--white)
}
.tds-scrim--black button:active,
.tds-scrim--black button:focus {
color: #fff;
color: var(--tds-color--white)
}
.tds-scrim--black .mktg-carousel-item_highlight {
border-top-color: #fff;
border-top-color: var(--tds-color--white)
}
.tds-scrim--dark .mktg-carousel-side_gradient--left {
background: -webkit-gradient(linear, right top, left top, from(rgba(208, 209, 210, 0)), to(#d0d1d2));
background: linear-gradient(270deg, rgba(208, 209, 210, 0), #d0d1d2)
}
.tds-scrim--dark .mktg-carousel-side_gradient--right,
html[dir=rtl] .tds-scrim--dark .mktg-carousel-side_gradient--left {
background: -webkit-gradient(linear, left top, right top, from(rgba(208, 209, 210, 0)), to(#d0d1d2));
background: linear-gradient(90deg, rgba(208, 209, 210, 0), #d0d1d2)
}
html[dir=rtl] .tds-scrim--dark .mktg-carousel-side_gradient--right {
background: -webkit-gradient(linear, right top, left top, from(rgba(208, 209, 210, 0)), to(#d0d1d2));
background: linear-gradient(270deg, rgba(208, 209, 210, 0), #d0d1d2)
}
.tds-scrim--light .mktg-carousel-side_gradient--left {
background: -webkit-gradient(linear, right top, left top, from(hsla(0, 0%, 95.7%, 0)), to(#f4f4f4));
background: linear-gradient(270deg, hsla(0, 0%, 95.7%, 0), #f4f4f4)
}
.tds-scrim--light .mktg-carousel-side_gradient--right,
html[dir=rtl] .tds-scrim--light .mktg-carousel-side_gradient--left {
background: -webkit-gradient(linear, left top, right top, from(hsla(0, 0%, 95.7%, 0)), to(#f4f4f4));
background: linear-gradient(90deg, hsla(0, 0%, 95.7%, 0), #f4f4f4)
}
html[dir=rtl] .tds-scrim--light .mktg-carousel-side_gradient--right {
background: -webkit-gradient(linear, right top, left top, from(hsla(0, 0%, 95.7%, 0)), to(#f4f4f4));
background: linear-gradient(270deg, hsla(0, 0%, 95.7%, 0), #f4f4f4)
}
.mktg_carousel,
.powertrain_carousel,
.range_carousel {
max-width: 100vw;
overflow: hidden
}
.mktg_carousel--full-screen:not([id=charge-anywhere]) .mktg-carousel {
width: 100%;
max-width: none
}
.mktg_carousel--full-screen:not([id=charge-anywhere]) .mktg-carousel-slide { height:15vh;
}
.mktg_carousel--full-screen:not([id=charge-anywhere]) .mktg-carousel-slides picture {
padding-bottom: 42.9%;
position: relative;
height: 100%;
width: 100%;
display: block
}
[dir=ltr] .mktg_carousel--full-screen:not([id=charge-anywhere]) .mktg-carousel-slides img {
right: 0
}
[dir=ltr] .mktg_carousel--full-screen:not([id=charge-anywhere]) .mktg-carousel-slides img,
[dir=rtl] .mktg_carousel--full-screen:not([id=charge-anywhere]) .mktg-carousel-slides img {
left: 0
}
[dir=rtl] .mktg_carousel--full-screen:not([id=charge-anywhere]) .mktg-carousel-slides img {
right: 0
}
.mktg_carousel--full-screen:not([id=charge-anywhere]) .mktg-carousel-slides img {
position: absolute;
top: -35%;
inset-inline-end: 0;
bottom: 0;
inset-inline-start: 0
}
[dir=ltr] .mktg_carousel--full-screen:not([id=charge-anywhere]) .mktg-carousel-slides video {
right: 0
}
[dir=ltr] .mktg_carousel--full-screen:not([id=charge-anywhere]) .mktg-carousel-slides video,
[dir=rtl] .mktg_carousel--full-screen:not([id=charge-anywhere]) .mktg-carousel-slides video {
left: 0
}
[dir=rtl] .mktg_carousel--full-screen:not([id=charge-anywhere]) .mktg-carousel-slides video {
right: 0
}
.mktg_carousel--full-screen:not([id=charge-anywhere]) .mktg-carousel-slides video {
position: absolute;
inset-inline-end: 0;
bottom: 0;
inset-inline-start: 0
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape),
(min-width:640px) and (max-width:1023px) and (orientation:portrait) {
.mktg_carousel--full-screen:not([id=charge-anywhere]) .mktg-carousel-slides {
max-height: none
}
.mktg_carousel--full-screen:not([id=charge-anywhere]) .mktg-carousel-slides .mktg-carousel-slide { }
}
@media (max-width:839px) {
.mktg_carousel--full-screen:not([id=charge-anywhere]) .mktg-carousel-navigation {
width: calc(100% - 48px);
overflow: hidden
}
}
.mktg-carousel--navigation_bottom .mktg-carousel-header.mktg-carousel-header--with_button {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row;
flex-flow: row
}
.mktg-carousel--navigation_bottom .mktg-carousel-header.mktg-carousel-header--with_button h2.s2 {
padding: 0
}
@media (max-width:839px) {
[dir=ltr] .mktg-carousel--navigation_bottom .mktg-carousel-header.mktg-carousel-header--with_button {
padding-left: 24px;
padding-left: var(--mktg-carousel-spacing)
}
[dir=ltr] .mktg-carousel--navigation_bottom .mktg-carousel-header.mktg-carousel-header--with_button,
[dir=rtl] .mktg-carousel--navigation_bottom .mktg-carousel-header.mktg-carousel-header--with_button {
padding-right: 24px;
padding-right: var(--mktg-carousel-spacing)
}
[dir=rtl] .mktg-carousel--navigation_bottom .mktg-carousel-header.mktg-carousel-header--with_button {
padding-left: 24px;
padding-left: var(--mktg-carousel-spacing)
}
.mktg-carousel--navigation_bottom .mktg-carousel-header.mktg-carousel-header--with_button {
-webkit-padding-start: 24px;
-webkit-padding-start: var(--mktg-carousel-spacing);
padding-inline-start: 24px;
padding-inline-start: var(--mktg-carousel-spacing);
-webkit-padding-end: 24px;
-webkit-padding-end: var(--mktg-carousel-spacing);
padding-inline-end: 24px;
padding-inline-end: var(--mktg-carousel-spacing);
width: 100%;
margin-top: 24px;
margin-bottom: 0
}
}
@media (max-width:639px) {
.mktg-carousel--navigation_bottom .mktg-carousel-header.mktg-carousel-header--with_button {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column;
flex-flow: column
}
}
@media (min-width:840px) {
[dir=ltr] .drawer .mktg_carousel,
[dir=ltr] .drawer .powertrain_carousel,
[dir=ltr] .drawer .range_carousel {
margin-left: -32px
}
[dir=ltr] .drawer .mktg_carousel,
[dir=ltr] .drawer .powertrain_carousel,
[dir=ltr] .drawer .range_carousel,
[dir=rtl] .drawer .mktg_carousel,
[dir=rtl] .drawer .powertrain_carousel,
[dir=rtl] .drawer .range_carousel {
margin-right: -32px
}
[dir=rtl] .drawer .mktg_carousel,
[dir=rtl] .drawer .powertrain_carousel,
[dir=rtl] .drawer .range_carousel {
margin-left: -32px
}
.drawer .mktg_carousel,
.drawer .powertrain_carousel,
.drawer .range_carousel {
-webkit-margin-start: -32px;
margin-inline-start: -32px;
-webkit-margin-end: -32px;
margin-inline-end: -32px;
width: calc(100% + 64px)
}
}
@media (max-width:839px) {
[dir=ltr] .drawer .mktg_carousel:not(.mktg_carousel--full-screen),
[dir=ltr] .drawer .powertrain_carousel:not(.mktg_carousel--full-screen),
[dir=ltr] .drawer .range_carousel:not(.mktg_carousel--full-screen) {
margin-left: auto
}
[dir=ltr] .drawer .mktg_carousel:not(.mktg_carousel--full-screen),
[dir=ltr] .drawer .powertrain_carousel:not(.mktg_carousel--full-screen),
[dir=ltr] .drawer .range_carousel:not(.mktg_carousel--full-screen),
[dir=rtl] .drawer .mktg_carousel:not(.mktg_carousel--full-screen),
[dir=rtl] .drawer .powertrain_carousel:not(.mktg_carousel--full-screen),
[dir=rtl] .drawer .range_carousel:not(.mktg_carousel--full-screen) {
margin-right: auto
}
[dir=rtl] .drawer .mktg_carousel:not(.mktg_carousel--full-screen),
[dir=rtl] .drawer .powertrain_carousel:not(.mktg_carousel--full-screen),
[dir=rtl] .drawer .range_carousel:not(.mktg_carousel--full-screen) {
margin-left: auto
}
.drawer .mktg_carousel:not(.mktg_carousel--full-screen),
.drawer .powertrain_carousel:not(.mktg_carousel--full-screen),
.drawer .range_carousel:not(.mktg_carousel--full-screen) {
-webkit-margin-start: auto;
margin-inline-start: auto;
-webkit-margin-end: auto;
margin-inline-end: auto;
width: 614px
}
}
@media (max-width:639px) {
[dir=ltr] .drawer .mktg_carousel:not(.mktg_carousel--full-screen),
[dir=ltr] .drawer .powertrain_carousel:not(.mktg_carousel--full-screen),
[dir=ltr] .drawer .range_carousel:not(.mktg_carousel--full-screen) {
margin-left: -32px
}
[dir=ltr] .drawer .mktg_carousel:not(.mktg_carousel--full-screen),
[dir=ltr] .drawer .powertrain_carousel:not(.mktg_carousel--full-screen),
[dir=ltr] .drawer .range_carousel:not(.mktg_carousel--full-screen),
[dir=rtl] .drawer .mktg_carousel:not(.mktg_carousel--full-screen),
[dir=rtl] .drawer .powertrain_carousel:not(.mktg_carousel--full-screen),
[dir=rtl] .drawer .range_carousel:not(.mktg_carousel--full-screen) {
margin-right: -32px
}
[dir=rtl] .drawer .mktg_carousel:not(.mktg_carousel--full-screen),
[dir=rtl] .drawer .powertrain_carousel:not(.mktg_carousel--full-screen),
[dir=rtl] .drawer .range_carousel:not(.mktg_carousel--full-screen) {
margin-left: -32px
}
.drawer .mktg_carousel:not(.mktg_carousel--full-screen),
.drawer .powertrain_carousel:not(.mktg_carousel--full-screen),
.drawer .range_carousel:not(.mktg_carousel--full-screen) {
-webkit-margin-start: -32px;
margin-inline-start: -32px;
-webkit-margin-end: -32px;
margin-inline-end: -32px;
width: calc(100% + 64px)
}
}
.mktg_carousel .js-carousel--cross_fade .mktg-carousel-slides--swipeable .mktg-carousel-slide {
position: absolute;
z-index: -1;
opacity: 0
}
.mktg_carousel .js-carousel--cross_fade .mktg-carousel-slides--swipeable .mktg-carousel-slide.mktg-carousel-slide--past {
opacity: 1
}
.mktg_carousel .js-carousel--cross_fade .mktg-carousel-slides--swipeable .mktg-carousel-slide.mktg-carousel-slide--active {
opacity: 1;
z-index: 1
}
.mktg_carousel[id=better-over-time] .js-carousel--cross_fade .mktg-carousel-slides_container,
.mktg_carousel[id=room-for-everything] .js-carousel--cross_fade .mktg-carousel-slides_container {
padding-top: 56.25%;
min-height: 0!important;
overflow: hidden
}
@media (max-width:639px) {
.mktg_carousel[id=better-over-time] .js-carousel--cross_fade .mktg-carousel-slides_container {
padding-top: 78vw
}
}
.mktg_carousel[id=best-in-class-storage] .js-carousel--cross_fade .mktg-carousel-slides_container,
.mktg_carousel[id=charge-anywhere] .js-carousel--cross_fade .mktg-carousel-slides_container {
padding-top: 48.25%;
min-height: 0!important;
overflow: hidden
}
@media (max-width:639px) {
.mktg_carousel[id=best-in-class-storage] .js-carousel--cross_fade .mktg-carousel-slides_container,
.mktg_carousel[id=room-for-everything] .js-carousel--cross_fade .mktg-carousel-slides_container {
padding-top: 78vw
}
}
@media (max-width:639px) {
section[id=best-in-class-storage].mktg_carousel .mktg-carousel.mktg-carousel--navigation_bottom .mktg-carousel-slides .mktg-carousel-slide .mktg-carousel-slide__asset,
section[id=room-for-everything].mktg_carousel .mktg-carousel.mktg-carousel--navigation_bottom .mktg-carousel-slides .mktg-carousel-slide .mktg-carousel-slide__asset {
height: 78vw;
font-family: "object-fit:cover";
-o-object-fit: cover;
object-fit: cover
}
}
section[id=best-in-class-storage].mktg_carousel .mktg-carousel.mktg-carousel--navigation_bottom .mktg-carousel-slides_mask,
section[id=room-for-everything].mktg_carousel .mktg-carousel.mktg-carousel--navigation_bottom .mktg-carousel-slides_mask {
overflow: hidden
}
section[id=best-in-class-storage].mktg_carousel .mktg-carousel.mktg-carousel--navigation_bottom .mktg-carousel-slides_mask .mktg-carousel-slides_container,
section[id=room-for-everything].mktg_carousel .mktg-carousel.mktg-carousel--navigation_bottom .mktg-carousel-slides_mask .mktg-carousel-slides_container {
margin-bottom: -1px
}
@media (max-width:639px) {
section[id=better-over-time].mktg_carousel .mktg-carousel.mktg-carousel--navigation_bottom .mktg-carousel-slides .mktg-carousel-slide .mktg-carousel-slide__asset {
height: 78vw;
font-family: "object-fit:cover";
-o-object-fit: cover;
object-fit: cover
}
}
section[id=seating-for-up-to-seven].mktg_carousel .mktg-carousel-arrow {
background-color: rgba(0, 0, 0, .4);
border-color: #fff;
border-color: var(--tds-color--white);
color: #fff;
color: var(--tds-color--white)
}
section[id=seating-for-up-to-seven].mktg_carousel .mktg-carousel-arrow .tds-icon {
fill: #fff;
fill: var(--tds-color--white)
}
@media (max-width:639px) {
body:not(.adminimal-admin-toolbar) section[id^=autopilot-carousel] {
margin-top: -60px
}
}
body:not(.adminimal-admin-toolbar) section[id^=autopilot-carousel] .mktg-carousel-header {
position: absolute;
z-index: 2
}
@media (-ms-high-contrast:active),
(-ms-high-contrast:none) {
[dir=ltr] body:not(.adminimal-admin-toolbar) section[id^=autopilot-carousel] .mktg-carousel-header {
right: 0
}
[dir=ltr] body:not(.adminimal-admin-toolbar) section[id^=autopilot-carousel] .mktg-carousel-header,
[dir=rtl] body:not(.adminimal-admin-toolbar) section[id^=autopilot-carousel] .mktg-carousel-header {
left: 0
}
[dir=rtl] body:not(.adminimal-admin-toolbar) section[id^=autopilot-carousel] .mktg-carousel-header {
right: 0
}
[dir=ltr] body:not(.adminimal-admin-toolbar) section[id^=autopilot-carousel] .mktg-carousel-header {
margin-right: auto
}
[dir=ltr] body:not(.adminimal-admin-toolbar) section[id^=autopilot-carousel] .mktg-carousel-header,
[dir=rtl] body:not(.adminimal-admin-toolbar) section[id^=autopilot-carousel] .mktg-carousel-header {
margin-left: auto
}
[dir=rtl] body:not(.adminimal-admin-toolbar) section[id^=autopilot-carousel] .mktg-carousel-header {
margin-right: auto
}
body:not(.adminimal-admin-toolbar) section[id^=autopilot-carousel] .mktg-carousel-header {
top: 0;
inset-inline-end: 0;
inset-inline-start: 0;
-webkit-margin-end: auto;
margin-inline-end: auto;
-webkit-margin-start: auto;
margin-inline-start: auto
}
}
body:not(.adminimal-admin-toolbar) section[id^=autopilot-carousel] .mktg-carousel--navigation_bottom .mktg-carousel-header {
z-index: 20
}
body:not(.adminimal-admin-toolbar) section[id^=autopilot-carousel] .mktg-carousel--navigation_bottom .mktg-carousel-navigation {
z-index: 10
}
@media (max-width:639px) and (orientation:portrait) {
body:not(.adminimal-admin-toolbar) section[id^=autopilot-carousel] .mktg-carousel--navigation_bottom .mktg-carousel-navigation {
margin-top: -22px
}
}
@media (max-width:839px) and (orientation:landscape) {
body:not(.adminimal-admin-toolbar) section[id^=autopilot-carousel] .mktg-carousel--navigation_bottom .mktg-carousel-navigation {
margin-top: 0
}
}
@media (min-width:640px) {
body:not(.adminimal-admin-toolbar) section[id^=autopilot-carousel] .mktg-carousel--navigation_bottom .mktg-carousel-navigation {
margin-top: -39px
}
}
@media (min-width:840px) {
body:not(.adminimal-admin-toolbar) section[id^=autopilot-carousel] .mktg-carousel--navigation_bottom .mktg-carousel-navigation {
margin-top: -149px
}
}
body:not(.adminimal-admin-toolbar) section[id^=autopilot-carousel] .mktg-carousel--navigation_bottom .mktg-carousel-navigation .mktg-carousel-item-button .mktg-carousel-item-headline {
min-height: 35px
}
@media (min-width:840px) {
body:not(.adminimal-admin-toolbar) section[id^=autopilot-carousel] .mktg-carousel--navigation_bottom .mktg-carousel-navigation .mktg-carousel-item-button .mktg-carousel-item-headline {
min-height: 45px
}
}
body:not(.adminimal-admin-toolbar) section[id^=autopilot-carousel] .mktg-carousel--navigation_bottom .mktg-carousel-slides {
z-index: 0
}
@media (max-width:639px) {
body:not(.adminimal-admin-toolbar) section[id^=autopilot-carousel] .mktg-carousel--navigation_bottom .mktg-carousel-slides {
margin-top: 160px
}
}
@media (min-width:640px) {
body:not(.adminimal-admin-toolbar) section[id^=autopilot-carousel] .mktg-carousel--navigation_bottom .mktg-carousel-slides {
margin-top: 49px;
min-width: 601px
}
}
@media (max-width:839px) and (orientation:landscape),
(min-width:768px) and (orientation:portrait) {
body:not(.adminimal-admin-toolbar) section[id^=autopilot-carousel] .mktg-carousel--navigation_bottom .mktg-carousel-slides {
margin-top: 90px
}
}
@media (min-width:840px) {
body:not(.adminimal-admin-toolbar) section[id^=autopilot-carousel] .mktg-carousel--navigation_bottom .mktg-carousel-slides {
margin-top: -61px;
min-width: 1260px
}
}
.tcl-video {
position: relative
}
.tcl-video video {
width: 100%;
display: block;
font-family: "object-fit:cover";
-o-object-fit: cover;
object-fit: cover
}
.tcl-video--gradient {
background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, .6)));
background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, .6));
bottom: 0;
height: 33%;
position: absolute;
width: 100%;
z-index: 2
}
.tcl-video__play {
position: absolute;
top: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 100%;
opacity: 0;
z-index: -1
}
.tcl-video__play.active {
opacity: 1;
z-index: 2
}
.tcl-video__play.active:hover {
cursor: pointer
}
body:not(.browser-is-chrome) .tcl-video__play {
display: none
}
@media (max-width:639px) {
.tcl-video__play {
display: none
}
}
.tcl-video__play--icon {
background-color: hsla(0, 0%, 86.7%, .3);
background-repeat: no-repeat;
background-position: 33px 28px;
background-size: 25px 29px;
border-radius: 92px;
border: 5px solid #000;
border: 5px solid var(--tds-color--black);
width: 92px;
height: 92px
}
[dir=ltr] .tcl-video__replay {
right: 10px
}
[dir=rtl] .tcl-video__replay {
left: 10px
}
.tcl-video__replay {
position: absolute;
bottom: 10px;
inset-inline-end: 10px;
z-index: -1;
background-color: transparent;
color: #000;
color: var(--tds-color--black);
border: none;
font-size: 13px;
padding: 5px;
opacity: 0
}
[dir=ltr] .tcl-video__replay .tcl-video__replay--icon {
margin-right: 5px
}
[dir=rtl] .tcl-video__replay .tcl-video__replay--icon {
margin-left: 5px
}
.tcl-video__replay .tcl-video__replay--icon {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 16px;
background-size: 5px;
border: 1px solid #000;
border: 1px solid var(--tds-color--black);
vertical-align: middle;
-webkit-margin-end: 5px;
margin-inline-end: 5px
}
.tcl-video__replay:focus {
outline: 1px dotted #000;
outline: 1px dotted var(--tds-color--black)
}
.tcl-video__replay.active {
opacity: 1;
cursor: pointer;
z-index: 1
}
@media (min-width:640px) {
[dir=ltr] .tcl-video__replay {
right: 16px
}
[dir=rtl] .tcl-video__replay {
left: 16px
}
.tcl-video__replay {
bottom: 16px;
inset-inline-end: 16px
}
}
@media (max-width:639px) and (orientation:portrait),
(max-width:839px) and (orientation:landscape) {
[dir=ltr] .tcl-video__replay {
right: 30px
}
[dir=rtl] .tcl-video__replay {
left: 30px
}
.tcl-video__replay {
inset-inline-end: 30px
}
}
.tds-scrim--black .tcl-video__play--icon {
-webkit-filter: invert(100%);
filter: invert(100%)
}
.tds-scrim--black .tcl-video__replay {
color: #fff;
color: var(--tds-color--white)
}
.tds-scrim--black .tcl-video__replay .tcl-video__replay--icon {
-webkit-filter: invert(100%);
filter: invert(100%)
}
.tds-scrim--black .tcl-video__replay:focus {
outline-color: #fff;
outline-color: var(--tds-color--white)
}
@media (-ms-high-contrast:active),
(-ms-high-contrast:none) {
.tcl-video video:not(.hero__asset) {
-webkit-margin-before: 0!important;
margin-top: 0!important;
position: static!important
}
}
@supports (-ms-accelerator:true) {
.tcl-video video:not(.hero__asset) {
-webkit-margin-before: 0!important;
margin-top: 0!important;
position: static!important
}
}
@supports (-ms-ime-align:auto) {
.tcl-video video:not(.hero__asset) {
-webkit-margin-before: 0!important;
margin-top: 0!important;
position: static!important
}
}
.Twilio-MainContainer {
height: auto !important;
min-height: 500px !important;
width: 320px !important;
border-radius: 8px
}
[id='twilio-customer-frame'] .Twilio-MainContainer {
right: 25px;
z-index: 999999;
bottom: 25px
}
[id='twilio-customer-frame'] .Twilio-EntryPoint {
font-family: 'Gotham Book', Helvetica, Arial, sans-serif;
min-width: 52px;
height: 52px;
font-size: .7em;
padding: 0;
border-radius: 30px;
overflow: hidden;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAYCAYAAADpnJ2CAAAAAXNSR0IArs4c6QAAAeVJREFUSA1j1NbW5vn+/fsEBgaGYCAWAGKqA0ZGxtdAQxcKCAhUsfz48aMHyIkA4klMTEwgCVoAuf///xd8+PDhIwvQ9BAgnnnv3r0qWtgEM1NZWVkKaGkIE5AQBnr5BkyCVjTIDiAWZqKVBbjMpbuFoDjECtTV1RX//v1rjVWSgCAwmnbdvXv3FTZlOC38/fu3BVDDbGyaCImxsLC4AdWQZiEw1S4HagJhqoLBE4dqampKwDi0I8d7nJyc269cufISm16ccQi0zBSoYTI2TYTEvn375glUQ5qFwFS2EqgJhKkK6B6HI8NCYMHwn5mqEYXFMKgd/0FBehtYivsDBRixqKOKkLGxMSvQfB+wXSoqKjH//v1bBOQ8Blr8FpcNQLkLMjIyaQcOHPiDrEZPT4/769evS4Bi8sjiyGygZZJA/SJA2gPsK6ClDkBOEFARriYGyIWhQE2rYmNjYxoaGv6BDHRwcOB4/PjxVqAcqNxdB5T/DxJHB0D510C5ZcCsdhZdDidfSUkpCoj/Amvu+UADGIFtITYgextQ7DuwVHLBqRFNgqR4A4ZEEjD45wBdOwtojjgQewEtDwQW9NvQzMXJJclCkClAS7OAlk4FWgqKyzBgMK3HaTq1JICWFgKDE9TSIxkAAAUIq9qAbwAvAAAAAElFTkSuQmCC) no-repeat white 12px 15px;
bottom: 80px;
right: 35px;
box-shadow: rgba(0, 0, 0, .5) 0 1px 4px 0
}
@media screen and (max-width:800px) {
[id='twilio-customer-frame'] .Twilio-MainContainer {
width: 100% !important;
left: 0;
bottom: 0;
height: 100% !important;
z-index: 10000
}
[id='menu-concernType'] {
z-index: 10000 !important
}
}
[id='twilio-customer-frame'] button.Twilio.Twilio-EntryPoint {
z-index: 99999
}
.twilio-disabled [id='tooltipForLiveAgent'] {
display: none !important
}
@media screen and (max-width:600px) {
.twilio-hide-mobile [id='tooltipForLiveAgent'] {
display: none !important
}
}
@media screen and (min-width:600px) {
.twilio-hide-desktop [id='tooltipForLiveAgent'] {
display: none !important
}
}
.Twilio-MessageInput-SendButton,
.Twilio-MessageInput-SendButton:hover,
.Twilio-MessageInput-SendButton:active,
.Twilio-MessageInput-SendButton:focus {
background: #fff !important;
color: #000 !important;
width: 100% !important
}
.Twilio-Button:focus .label {
color: #FFF !important;
font-family: "Gotham Book"
}
.Twilio-Button:hover .label {
outline-color: #39f !important
}
.Twilio-Button .label {
color: #39f !important;
outline-color: #39f !important
}
.Twilio-MainContainer {
height: auto !important;
min-height: 500px !important;
width: 320px !important;
border-radius: 8px
}
.Twilio-Button:disabled {
opacity: .5 !important
}
.Twilio-Button:hover,
.Twilio-Button:active,
.Twilio-Button:focus {
background: #3457b1 !important
}
.Twilio-DynamicForm input {
font-family: "Gotham Book" !important;
color: #171a20 !important;
font-size: 14px;
padding: 20px !important;
border: 0 !important;
border-radius: 30px !important;
display: inline-block !important;
line-height: 30px !important;
box-sizing: border-box !important;
box-shadow: none !important;
background-color: #f4f4f4 !important;
width: 100% !important;
height: 44px !important
}
.Twilio-DynamicForm .jss14 {
height: 43px;
font-family: 'HeiT ASC Traditional Chinese', 'M Hei PRC W45', 'AXIS Font Japanese W55', 'FB New Gothic', 'Gotham Medium', system, sans-serif;
font-size: 14px;
line-height: 14px;
font-weight: 500;
background-color: #f4f4f4;
color: #171a20;
padding: 10px 10px;
border-radius: 20px;
border: 1px solid transparent;
transition: border .25s cubic-bezier(.5, .25, .25, .75);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none
}
.Twilio-DynamicForm #select-getUpdates {
border: 0 !important
}
.Twilio-MessageBubble-Body {
font-family: "Gotham Book" !important;
font-size: 12px;
line-height: 1.3
}
.Twilio-MessageInputArea-TextArea {
background: #fff !important
}
.Twilio-MessageInput {
box-shadow: inset 0 2px 2px -2px #d8d8d8;
margin-top: 10px
}
.Twilio-MessageInputArea-TextArea textarea {
background: #fff
}
.Twilio-EntryPoint:hover {
background-blend-mode: darken !important
}
.Twilio-EntryPoint {
font-family: "Gotham Book" !important;
width: 52px !important;
height: 52px !important;
font-size: .7em !important;
padding: 0 !important;
border-radius: 30px !important;
overflow: hidden !important;
background-color: #fff;
background-image: url("data:image/svg+xml,%3C%3Fxmlversion='1.0'encoding='UTF-8'%3F%3E%3Csvgwidth='28px'height='26px'viewBox='002826'version='1.1'xmlns='http://www.w3.org/2000/svg'xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!--Generator:Sketch63.1(92452)-https://sketch.com--%3E%3Ctitle%3EGroup%3C/title%3E%3Cdesc%3ECreatedwithSketch.%3C/desc%3E%3Cgid='Page-1'stroke='none'stroke-width='1'fill='none'fill-rule='evenodd'%3E%3Cgid='Group'transform='translate(0.350000,0.850000)'fill='%23171A20'fill-rule='nonzero'%3E%3Cpathd='M23.45,-1.77635684e-15L3.85,-1.77635684e-15C1.7237037,-1.77635684e-153.55271368e-15,1.72370373.55271368e-15,3.85L3.55271368e-15,16.45L0.0070263,16.6845313C0.128234,18.70161361.8024554,20.33.85,20.3L7,20.3L7,23.158646C7,23.4905277.1167385,23.81183327.3297774,24.0663119L7.4520807,24.1952425C7.9665335,24.67383878.7689278,24.70559799.3216659,24.2428687L14.0308,20.3L23.45,20.3C25.5762963,20.327.3,18.576296327.3,16.45L27.3,3.85C27.3,1.723703725.5762963,-1.77635684e-1523.45,-1.77635684e-15ZM3.85,2.1L23.45,2.1C24.4164983,2.125.2,2.883501725.2,3.85L25.2,16.45C25.2,17.416498324.4164983,18.223.45,18.2L13.522786,18.2C13.3585191,18.213.1994842,18.257769813.0735147,18.363199L9.1,21.6888L9.1,21.6888L9.1,18.9C9.1,18.51340078.7865993,18.28.4,18.2L3.85,18.2L3.85,18.2C2.8835017,18.22.1,17.41649832.1,16.45L2.1,3.85C2.1,2.88350172.8835017,2.13.85,2.1Z'id='bubble-outline'%3E%3C/path%3E%3Cpathd='M13.65,8.75C14.4231986,8.7515.05,9.376801415.05,10.15C15.05,10.923198614.4231986,11.5513.65,11.55C12.8768014,11.5512.25,10.923198612.25,10.15C12.25,9.376801412.8768014,8.7513.65,8.75ZM8.05,8.75C8.8231986,8.759.45,9.37680149.45,10.15C9.45,10.92319868.8231986,11.558.05,11.55C7.2768014,11.556.65,10.92319866.65,10.15C6.65,9.37680147.2768014,8.758.05,8.75ZM19.25,8.75C20.0231986,8.7520.65,9.376801420.65,10.15C20.65,10.923198620.0231986,11.5519.25,11.55C18.4768014,11.5517.85,10.923198617.85,10.15C17.85,9.376801418.4768014,8.7519.25,8.75Z'id='circles'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
box-shadow: rgba(0, 0, 0, .5) 0 1px 4px 0 !important;
background-repeat: no-repeat;
background-size: 30px 35px;
background-position: center;
box-shadow: rgba(0, 0, 0, .5) 0 1px 4px 0 !important
}
.Twilio-EntryPoint:hover,
.Twilio-EntryPoint:focus {
background-color: #fff
}
.Twilio-EntryPoint-IconContainer .Twilio-Icon-Content,
.Twilio-MessagingCanvas .Twilio-Icon-SendLarge {
display: none
}
.Twilio-MessageCanvasTray .Twilio-Button:hover,
.Twilio-MessageCanvasTray .Twilio-Button:focus,
.Twilio-MessageCanvasTray .Twilio-Button:active {
background-color: #171a20 !important;
color: #fff
}
.MessageCanvasTrayContent h6 {
font-size: 18px;
padding-top: 20px
}
.MessageCanvasTrayContent p {
margin-left: 45px;
margin-right: 45px;
text-align: center;
font-size: 13px;
color: #393c41
}
[id='tooltipForLiveAgent'] {
position: fixed;
bottom: 150px;
right: 40px;
padding: 35px 23px;
background: #fff;
z-index: 999999;
border-radius: 10px;
box-shadow: 0 0 12px 0 rgba(0, 0, 0, .5);
min-width: 320px
}
[id='tooltipForLiveAgent'] .tooltipForLiveAgentInnerContainer {
text-align: center
}
[id='tooltipForLiveAgent'] .modal-close {
top: 12px;
right: 12px;
width: 10px;
height: 10px;
position: absolute;
z-index: 1;
cursor: pointer;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
font-size: 21px;
min-width: 0;
color: #ccc;
background-color: transparent;
border: 0;
margin: 0;
padding: 0;
display: block !important
}
[id='tooltipForLiveAgent'] .modal-close .sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0
}
[id='tooltipForLiveAgent'] .ac:hover {
cursor: pointer
}
[id='tooltipForLiveAgent'] .tooltipForLiveAgentInnerContainer p {
margin: 22px 0;
font-size: 15px;
line-height: 20px;
font-family: "HeiS ASC Simplified Chinese", "HeiS ASC Simplified Chinese_n5", "HeiT ASC Traditional Chinese", "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, sans-serif
}
[id='menu-getUpdates'] {
z-index: 9999999 !important
}
@media screen and (max-width:800px) {
[id='twilio-customer-frame'] .Twilio-MainContainer {
width: 100% !important;
left: 0;
bottom: 0;
height: 100% !important;
z-index: 10000
}
[id='menu-concernType'] {
z-index: 10000 !important
}
}
[id='twilio-customer-frame'] .Twilio-MessageInput-SendButton::before {
content: 'Send'
}
.Twilio-EntryPoint:hover,
.Twilio-EntryPoint.css-1w8p2lo:hover,
.Twilio-EntryPoint.css-1qysb6y:hover,
button.Twilio-EntryPoint:hover {
background-color: white;
background-blend-mode: darken
}
:root {
--tds-animate--move: transform 900ms cubic-bezier(.75, 0, 0, 1);
--tds-animate--color: background-color 450ms cubic-bezier(.5, .25, .25, .75), color 450ms cubic-bezier(.5, .25, .25, .75), opacity 450ms cubic-bezier(.5, .25, .25, .75);
--tds-animate--focus: border 250ms cubic-bezier(.5, .25, .25, .75), box-shadow 250ms cubic-bezier(.5, .25, .25, .75), color 250ms cubic-bezier(.5, .25, .25, .75), opacity 250ms cubic-bezier(.5, .25, .25, .75);
--tds-animate-all--long: all 900ms cubic-bezier(.75, 0, 0, 1), background-color 900ms cubic-bezier(.5, .25, .25, .75), color 900ms cubic-bezier(.5, .25, .25, .75), opacity 900ms cubic-bezier(.5, .25, .25, .75);
--tds-border-width--medium: 2px;
--tds-border-width--large: 3px;
--tds-color--black: #000;
--tds-color--grey10: #171a20;
--tds-color--grey15: #222; --tds-color--grey25: #444; --tds-color--grey35: #757575;
--tds-color--grey40: #a2a3a5;
--tds-color--grey50: #d0d1d2;
--tds-color--grey60: #eee;
--tds-color--grey70: #f4f4f4;
--tds-color--white: #fff;
--tds-color--blue30: #3e6ae1;
--tds-color--blue20: #3457b1;
--tds-color--blue10: #2e4994;
--tds-color--red10: #b74134;
--tds-color--red20: #ed4e3b;
--tds-color--green10: #12bb00;
--tds-color--green20: #02e359;
--tds-color--yellow: #fbb01b;
--tds-font: Manrope, "Helvetica Neue", Arial, sans-serif;
--tds-font-size--10: 10px;
--tds-font-size--20: 12px;
--tds-font-size--30: 14px;
--tds-font-size--40: 17px;
--tds-font-size--50: 20px;
--tds-font-size--55: 23px;
--tds-font-size--60: 24px;
--tds-font-size--70: 28px;
--tds-font-size--75: 34px;
--tds-font-size--80: 40px;
--tds-opacity--30: 0.3;
--tds-opacity--50: 0.5;
--tds-opacity--70: 0.7;
--tds-opacity--100: 1;
--tds-opacity--transparent: 0;
--tds-region--north-america: superregion-north-america;
--tds-region--europe: superregion-europe;
--tds-region--asia-pacific: superregion-apac;
--tds-region--middle-east: superregion-middle-east;
--tds-size: 8px;
--tds-size--half: 4px;
--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--10x: 80px;
--tds-size--11x: 88px;
--tds-size--12x: 96px;
--tds-size--13x: 104px;
--tds-checkbox-first-margin-block-start: calc(var(--tds-size--half) + 2px);
--tds-checkbox-input-top-position: 2px;
--tds-checkbox-label-padding-inline-start: calc(var(--tds-size--3x) + 2px);
--tds-checkbox-label-top-position: 1.5px;
--tds-checkbox-margin-block-end: calc(var(--tds-size--2x) - 4px);
--tds-checkbox-size--default: 14px;
--tds-checkboxes-horizontal_spacer: 15px;
--tds-form-item-horizontal_spacer: 15px;
--tds-form-item-margin_bottom: 18px;
--tds-input-height: 30px;
--tds-input-padding_bottom: 4px;
--tds-input-padding_top: 5px;
--tds-label-descriptor-margin_left: 6px;
--tds-select-arrow-size: calc(var(--tds-size)*1.5);
--tds-select-height: 30px;
--tds-select-horizontal_spacer: 15px;
--tds-select-padding_bottom: 4px;
--tds-select-padding_top: 10px;
--tds-banner-padding: var(--tds-size--2x);
}
.tds-banner {
text-align: center;
inline-size: 100%;
padding: 16px;
padding: var(--tds-banner-padding)
}
@media (prefers-reduced-motion:reduce) {
*,
:after,
:before {
-webkit-animation-duration: 1ms!important;