svg.icon--12,
svg.icon--12-fit {
    height: 12px;
    width: 12px
}

svg.icon--16,
svg.icon--16-fit {
    height: 16px;
    width: 16px
}

svg.icon--18,
svg.icon--18-fit {
    height: 18px;
    width: 18px
}

svg.icon--20,
svg.icon--20-fit {
    height: 20px;
    width: 20px
}

svg.icon--24,
svg.icon--24-fit {
    height: 24px;
    width: 24px
}

svg.icon--30,
svg.icon--30-fit {
    height: 30px;
    width: 30px
}

svg.icon--32,
svg.icon--32-fit {
    height: 32px;
    width: 32px
}

svg.icon--48,
svg.icon--48-fit {
    height: 48px;
    width: 48px
}

svg.icon--64,
svg.icon--64-fit {
    height: 32px;
    width: 64px
}

svg.icon--12-colored {
    height: 12px
}

svg.icon--16-colored {
    height: 16px
}

svg.icon--18-colored {
    height: 18px
}

svg.icon--20-colored {
    height: 20px
}

svg.icon--24-colored {
    height: 24px
}

svg.icon--30-colored {
    height: 30px
}

svg.icon--32-colored {
    height: 32px
}

svg.icon--48-colored {
    height: 48px
}

svg.icon--64-colored {
    height: 64px
}

svg.icon--disabled {
    filter: var(--color-media-disabled-filter)
}

svg.icon--attention-filled {
    color: var(--color-foreground-attention)
}

svg.icon--confirmation-filled {
    color: var(--color-foreground-confirmation)
}

svg.icon--information-filled {
    color: var(--color-foreground-information)
}

div.star-rating[data-stars^="1"] svg:nth-child(-n+1),
div.star-rating[data-stars^="2"] svg:nth-child(-n+2),
div.star-rating[data-stars^="3"] svg:nth-child(-n+3),
div.star-rating[data-stars^="4"] svg:nth-child(-n+4),
div.star-rating[data-stars^="5"] svg:nth-child(-n+5) {
    --color-star-rating-full: var( --color-star-rating-filled, var(--color-foreground-primary));
    --color-star-rating-full-stroke: var( --color-star-rating-filled-stroke, var(--color-foreground-primary));
    --color-star-rating-half-stroke: var( --color-star-rating-filled-stroke, var(--color-foreground-primary))
}

div.star-rating[data-stars="0-5"] svg:first-child,
div.star-rating[data-stars="1-5"] svg:nth-child(2),
div.star-rating[data-stars="2-5"] svg:nth-child(3),
div.star-rating[data-stars="3-5"] svg:nth-child(4),
div.star-rating[data-stars="4-5"] svg:nth-child(5) {
    --color-star-rating-half: var( --color-star-rating-filled, var(--color-foreground-primary));
    --color-star-rating-full: var(--color-star-rating-unfilled, transparent);
    --color-star-rating-full-stroke: var( --color-star-rating-unfilled-stroke, var(--color-neutral-600));
    --color-star-rating-half-stroke: var( --color-star-rating-filled-stroke, var(--color-foreground-primary))
}

a.icon-link {
    align-items: center;
    display: inline-flex
}

a.icon-link>svg {
    margin: 0 auto
}

a.icon-link,
button.icon-btn {
    background-color: var( --icon-button-background-color, var(--color-background-secondary));
    border: 2px solid transparent;
    border-radius: 50px;
    box-sizing: border-box;
    font-family: inherit;
    height: 40px;
    justify-content: center;
    margin: 0;
    padding: 0;
    vertical-align: text-bottom;
    width: 40px
}

a.icon-link>svg,
button.icon-btn>svg {
    fill: var( --icon-button-icon-foreground-color, var(--color-foreground-primary));
    max-width: 75%;
    position: relative
}

a.icon-link:focus,
a.icon-link:hover,
button.icon-btn:focus,
button.icon-btn:hover {
    background-color: var(--color-state-secondary-hover)
}

a.icon-link:active,
button.icon-btn:active {
    background-color: var(--color-state-secondary-active)
}

a.icon-link:not(:focus-visible),
button.icon-btn:not(:focus-visible) {
    outline: none
}

a.icon-link.icon-link--primary,
button.icon-btn.icon-btn--primary {
    background-color: var( --btn-primary-background-color, var(--color-background-accent));
    border-color: var(--btn-primary-border-color, var(--color-stroke-accent));
    color: var( --btn-primary-foreground-color, var(--color-foreground-on-accent))
}

a.icon-link.icon-link--primary>svg,
button.icon-btn.icon-btn--primary>svg {
    fill: var( --icon-button-icon-foreground-color, var(--color-foreground-on-accent))
}

a.icon-link.icon-link--secondary>svg,
button.icon-btn.icon-btn--secondary>svg {
    fill: var( --icon-button-icon-foreground-color, var(--color-foreground-accent))
}

a.icon-link.icon-link--small .progress-spinner,
button.icon-btn.icon-btn--small .progress-spinner {
    height: 20px;
    width: 20px
}

a.icon-link.icon-link--transparent>svg,
button.icon-btn.icon-btn--transparent>svg {
    max-width: 100%
}

a.icon-link.icon-link--small,
button.icon-btn.icon-btn--small {
    height: 32px;
    width: 32px
}

a.icon-link.icon-link--large,
button.icon-btn.icon-btn--large {
    height: 48px;
    width: 48px
}

a.icon-link--transparent,
a.icon-link--transparent:active,
a.icon-link--transparent:focus,
a.icon-link--transparent:hover,
button.icon-btn--transparent,
button.icon-btn--transparent:active,
button.icon-btn--transparent:focus,
button.icon-btn--transparent:hover {
    background-color: initial
}

a.icon-link:visited>svg {
    fill: var( --icon-button-icon-foreground-color, var(--color-foreground-primary))
}

a:not([href]).icon-link>svg,
a[aria-disabled=true].icon-link>svg,
button[aria-disabled=true].icon-btn>svg,
button[disabled].icon-btn>svg {
    background-color: initial;
    fill: var(--color-background-disabled)
}

a:not([href]).icon-link:focus>svg,
a:not([href]).icon-link:hover>svg,
a[aria-disabled=true].icon-link:focus>svg,
a[aria-disabled=true].icon-link:hover>svg,
button[aria-disabled=true].icon-btn:focus>svg,
button[aria-disabled=true].icon-btn:hover>svg,
button[disabled].icon-btn:focus>svg,
button[disabled].icon-btn:hover>svg {
    fill: var(--color-background-disabled)
}

a.icon-link:visited:focus>svg,
a.icon-link:visited:hover>svg {
    fill: var( --icon-button-icon-hover-foreground-color, var(--color-foreground-primary))
}

a.icon-link.icon-link--primary:visited>svg {
    fill: var( --icon-button-icon-foreground-color, var(--color-foreground-on-accent))
}

a.icon-link--badged,
button.icon-btn--badged {
    overflow: visible;
    position: relative
}

a.icon-link--badged .badge,
button.icon-btn--badged .badge {
    left: 24px;
    pointer-events: none;
    position: absolute;
    top: -12px;
    z-index: 1
}

a.icon-link>svg.icon--confirmation-filled-16,
a.icon-link>svg.icon--confirmation-filled-16:hover,
a.icon-link>svg.icon--confirmation-filled-24,
a.icon-link>svg.icon--confirmation-filled-24:hover,
button.icon-btn>svg.icon--confirmation-filled-16,
button.icon-btn>svg.icon--confirmation-filled-16:hover,
button.icon-btn>svg.icon--confirmation-filled-24,
button.icon-btn>svg.icon--confirmation-filled-24:hover {
    fill: var(--color-foreground-confirmation)
}

a.icon-link>svg.icon--attention-filled-16,
a.icon-link>svg.icon--attention-filled-16:hover,
a.icon-link>svg.icon--attention-filled-24,
a.icon-link>svg.icon--attention-filled-24:hover,
button.icon-btn>svg.icon--attention-filled-16,
button.icon-btn>svg.icon--attention-filled-16:hover,
button.icon-btn>svg.icon--attention-filled-24,
button.icon-btn>svg.icon--attention-filled-24:hover {
    fill: var(--color-foreground-attention)
}

a.icon-link>svg.icon--information-filled-16,
a.icon-link>svg.icon--information-filled-16:hover,
a.icon-link>svg.icon--information-filled-24,
a.icon-link>svg.icon--information-filled-24:hover,
button.icon-btn>svg.icon--information-filled-16,
button.icon-btn>svg.icon--information-filled-16:hover,
button.icon-btn>svg.icon--information-filled-24,
button.icon-btn>svg.icon--information-filled-24:hover {
    fill: var(--color-foreground-information)
}

a.icon-link.icon-link--primary,
a.icon-link.icon-link--secondary,
a.icon-link.icon-link--tertiary,
button.icon-btn.icon-btn--primary,
button.icon-btn.icon-btn--secondary,
button.icon-btn.icon-btn--tertiary {
    border-width: 1px
}

a:not([href]).icon-link.icon-link--primary,
a[aria-disabled=true].icon-link.icon-link--primary,
button[aria-disabled=true].icon-btn.icon-btn--primary,
button[disabled].icon-btn.icon-btn--primary {
    background-color: var( --icon-button-disabled-background-color, var(--color-background-disabled));
    border-color: var( --btn-primary-disabled-border-color, var(--color-stroke-disabled))
}

a:not([href]).icon-link.icon-link--primary>svg,
a[aria-disabled=true].icon-link.icon-link--primary>svg,
button[aria-disabled=true].icon-btn.icon-btn--primary>svg,
button[disabled].icon-btn.icon-btn--primary>svg {
    fill: var( --icon-button-icon-foreground-color, var(--color-foreground-on-accent))
}

a.icon-link.icon-link--primary .progress-spinner,
button.icon-btn.icon-btn--primary .progress-spinner {
    --color-spinner-icon-background: var(--color-background-primary);
    --color-spinner-icon-foreground: #8fa3f8
}

a.icon-link.icon-link--secondary,
button.icon-btn.icon-btn--secondary {
    background-color: initial;
    border-color: var(--btn-secondary-border-color, var(--color-stroke-accent));
    color: var( --btn-secondary-foreground-color, var(--color-foreground-accent))
}

a.icon-link.icon-link--primary:not([disabled]):not([aria-disabled=true]):focus,
a.icon-link.icon-link--primary:not([disabled]):not([aria-disabled=true]):hover,
button.icon-btn.icon-btn--primary:not([disabled]):not([aria-disabled=true]):focus,
button.icon-btn.icon-btn--primary:not([disabled]):not([aria-disabled=true]):hover {
    background-blend-mode: multiply;
    filter: brightness(96%)
}

a.icon-link.icon-link--primary:not([disabled]):not([aria-disabled=true]):active,
button.icon-btn.icon-btn--primary:not([disabled]):not([aria-disabled=true]):active {
    filter: brightness(92%)
}

a.icon-link.icon-link--secondary .progress-spinner,
a.icon-link.icon-link--tertiary .progress-spinner,
button.icon-btn.icon-btn--secondary .progress-spinner,
button.icon-btn.icon-btn--tertiary .progress-spinner {
    --color-spinner-icon-foreground: #3665f366
}

a:not([href]).icon-link.icon-link--secondary,
a[aria-disabled=true].icon-link.icon-link--secondary,
button[aria-disabled=true].icon-btn.icon-btn--secondary,
button[disabled].icon-btn.icon-btn--secondary {
    border-color: var( --btn-secondary-disabled-border-color, var(--color-stroke-disabled))
}

a:not([href]).icon-link.icon-blinktn--secondary>svg,
a[aria-disabled=true].icon-link.icon-link--secondary>svg,
button[aria-disabled=true].icon-btn.icon-btn--secondary>svg,
button[disabled].icon-btn.icon-btn--secondary>svg {
    fill: var( --icon-button-icon-foreground-color, var(--color-foreground-disabled))
}

a.icon-link.icon-link--secondary:not([disabled]):not([aria-disabled=true]):focus,
a.icon-link.icon-link--secondary:not([disabled]):not([aria-disabled=true]):hover,
button.icon-btn.icon-btn--secondary:not([disabled]):not([aria-disabled=true]):focus,
button.icon-btn.icon-btn--secondary:not([disabled]):not([aria-disabled=true]):hover {
    background-color: var(--color-state-secondary-hover)
}

a.icon-link.icon-link--secondary:not([disabled]):not([aria-disabled=true]):active,
button.icon-btn.icon-btn--secondary:not([disabled]):not([aria-disabled=true]):active {
    background-color: var(--color-state-secondary-active)
}

a.icon-link.icon-link--tertiary,
button.icon-btn.icon-btn--tertiary {
    background-color: initial;
    border-color: var(--btn-primary-border-color, var(--color-stroke-default));
    color: var(--btn-primary-foreground-color, var(--color-foreground-accent))
}

a:not([href]).icon-link.icon-link--tertiary,
a[aria-disabled=true].icon-link.icon-link--tertiary,
button[aria-disabled=true].icon-btn.icon-btn--tertiary,
button[disabled].icon-btn.icon-btn--tertiary {
    border-color: var( --btn-tertiary-disabled-border-color, var(--color-stroke-disabled))
}

a.icon-link.icon-link--tertiary:not([disabled]):not([aria-disabled=true]):focus,
a.icon-link.icon-link--tertiary:not([disabled]):not([aria-disabled=true]):hover,
button.icon-btn.icon-btn--tertiary:not([disabled]):not([aria-disabled=true]):focus,
button.icon-btn.icon-btn--tertiary:not([disabled]):not([aria-disabled=true]):hover {
    background-color: var(--color-state-secondary-hover)
}

a.icon-link.icon-link--tertiary:not([disabled]):not([aria-disabled=true]):active,
button.icon-btn.icon-btn--tertiary:not([disabled]):not([aria-disabled=true]):active {
    background-color: var(--color-state-secondary-active)
}

a.fake-btn,
button.btn {
    align-content: center;
    align-items: center;
    background-color: initial;
    border: 1px solid;
    border-radius: var(--btn-border-radius, 20px);
    box-sizing: border-box;
    color: inherit;
    display: inline-block;
    font-family: inherit;
    font-size: var(--font-size-default);
    margin: 0;
    min-height: 40px;
    min-width: 88px;
    padding: 0 20px;
    text-align: center;
    -webkit-text-decoration: none;
    text-decoration: none;
    vertical-align: bottom
}

a.fake-btn--fixed-height,
a.fake-btn--truncated,
button.btn--fixed-height,
button.btn--truncated {
    height: 40px
}

a.fake-btn:focus-visible,
button.btn:focus-visible {
    outline-offset: var(--spacing-25);
    outline-style: solid;
    outline-width: var(--spacing-25)
}

a.fake-btn:focus:not(:focus-visible),
button.btn:focus:not(:focus-visible) {
    outline: none
}

button.btn[aria-disabled=true],
button.btn[disabled] {
    border-color: var( --expand-btn-disabled-border-color, var(--color-stroke-disabled));
    color: var( --expand-btn-disabled-foreground-color, var(--color-foreground-disabled))
}

a.fake-btn:not([href]),
a.fake-btn[aria-disabled=true] {
    color: var( --link-foreground-color-disabled, var(--color-foreground-disabled))
}

a.fake-btn--borderless,
button.btn--borderless {
    border-color: transparent;
    min-width: auto;
    padding-left: 0;
    vertical-align: initial
}

a.fake-btn--borderless:focus,
a.fake-btn--borderless:hover,
button.btn--borderless:focus,
button.btn--borderless:hover {
    background-color: initial;
    outline: none;
    -webkit-text-decoration: underline;
    text-decoration: underline
}

a.fake-btn--borderless[aria-disabled=true],
a.fake-btn--borderless[disabled],
button.btn--borderless[aria-disabled=true],
button.btn--borderless[disabled] {
    border-color: transparent
}

a.fake-btn--borderless.btn--destructive,
button.btn--borderless.btn--destructive {
    color: var( --btn-secondary-destructive-foreground-color, var(--color-foreground-attention))
}

a.fake-btn--slim,
button.btn--slim {
    height: 40px;
    min-width: auto;
    padding-left: var(--spacing-100);
    padding-right: var(--spacing-100)
}

a.fake-btn--fluid,
button.btn--fluid {
    width: 100%
}

.btn__cell,
.fake-btn__cell {
    align-items: center;
    display: flex;
    justify-content: center;
    width: 100%
}

a.fake-btn--borderless .fake-btn__cell,
a.fake-btn--form .fake-btn__cell,
button.btn--borderless .btn__cell,
button.btn--form .btn__cell {
    justify-content: space-between
}

a.fake-btn svg.icon,
button.btn svg.icon {
    align-self: center
}

a.fake-btn svg.icon:first-child,
button.btn svg.icon:first-child {
    margin-right: 8px
}

a.fake-btn svg.icon:last-child,
button.btn svg.icon:last-child {
    margin-left: 8px
}

a.fake-btn svg.icon:only-child,
button.btn svg.icon:only-child {
    margin: 0
}

a.fake-btn__cell--fixed-height svg.icon,
button.btn__cell--fixed-height svg.icon {
    align-self: center;
    height: 1rem;
    overflow: visible;
    width: 1rem
}

a.fake-btn--primary,
button.btn--primary {
    background-color: var( --btn-primary-background-color, var(--color-background-accent));
    border-color: var(--btn-primary-border-color, var(--color-stroke-accent));
    color: var( --btn-primary-foreground-color, var(--color-foreground-on-accent));
    font-weight: 700;
    overflow: hidden;
    position: relative;
    transition: all var(--motion-duration-short-3) var(--motion-easing-quick-enter)
}

a.fake-btn--primary:active,
button.btn--primary:active {
    transform: scale(.97)
}

a.fake-btn--primary:after,
button.btn--primary:after {
    background-color: var(--state-layer-neutral);
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    position: absolute
}

a.fake-btn--primary:not([disabled]):not([aria-disabled=true]):hover:after,
a.fake-btn--primary[href]:hover:after,
button.btn--primary:not([disabled]):not([aria-disabled=true]):hover:after,
button.btn--primary[href]:hover:after {
    background-color: var(--state-layer-hover)
}

a.fake-btn--primary:not([disabled]):not([aria-disabled=true]):focus:after,
a.fake-btn--primary[href]:focus:after,
button.btn--primary:not([disabled]):not([aria-disabled=true]):focus:after,
button.btn--primary[href]:focus:after {
    background-color: var(--state-layer-focus)
}

a.fake-btn--primary:not([disabled]):not([aria-disabled=true]):active:after,
a.fake-btn--primary[href]:active:after,
button.btn--primary:not([disabled]):not([aria-disabled=true]):active:after,
button.btn--primary[href]:active:after {
    background-color: var(--state-layer-pressed)
}

a.fake-btn--primary:visited {
    color: var( --btn-primary-foreground-color, var(--color-foreground-on-accent))
}

a.fake-btn--primary.fake-btn--destructive,
button.btn--primary.btn--destructive {
    background-color: var( --btn-primary-destructive-background-color, var(--color-background-attention));
    border-color: var( --btn-primary-destructive-border-color, var(--color-stroke-attention));
    color: var( --btn-primary-destructive-foreground-color, var(--color-foreground-on-attention));
    font-weight: 700;
    overflow: hidden;
    position: relative
}

a.fake-btn--primary.fake-btn--destructive:after,
button.btn--primary.btn--destructive:after {
    background-color: var(--state-layer-neutral);
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    position: absolute
}

a.fake-btn--primary.fake-btn--destructive:not([disabled]):not([aria-disabled=true]):hover:after,
a.fake-btn--primary.fake-btn--destructive[href]:hover:after,
button.btn--primary.btn--destructive:not([disabled]):not([aria-disabled=true]):hover:after,
button.btn--primary.btn--destructive[href]:hover:after {
    background-color: var(--state-layer-hover)
}

a.fake-btn--primary.fake-btn--destructive:not([disabled]):not([aria-disabled=true]):focus:after,
a.fake-btn--primary.fake-btn--destructive[href]:focus:after,
button.btn--primary.btn--destructive:not([disabled]):not([aria-disabled=true]):focus:after,
button.btn--primary.btn--destructive[href]:focus:after {
    background-color: var(--state-layer-focus)
}

a.fake-btn--primary.fake-btn--destructive:not([disabled]):not([aria-disabled=true]):active:after,
a.fake-btn--primary.fake-btn--destructive[href]:active:after,
button.btn--primary.btn--destructive:not([disabled]):not([aria-disabled=true]):active:after,
button.btn--primary.btn--destructive[href]:active:after {
    background-color: var(--state-layer-pressed)
}

button.btn--primary.btn--destructive[aria-disabled=true],
button.btn--primary.btn--destructive[disabled] {
    background-color: var( --btn-primary-destructive-disabled-background, var(--color-background-disabled));
    border-color: var( --btn-primary-destructive-disabled-border, var(--color-stroke-disabled))
}

a.fake-btn[aria-expanded=true] svg.icon--12,
button.btn[aria-expanded=true] svg.icon--12 {
    transform: rotate(180deg)
}

a.fake-btn--large svg.icon,
button.btn--large svg.icon {
    max-height: 48px
}

a.fake-btn--small svg.icon,
button.btn--small svg.icon {
    max-height: 32px
}

button.btn--primary[aria-disabled=true],
button.btn--primary[disabled] {
    background-color: var( --btn-primary-disabled-background-color, var(--color-foreground-disabled));
    border-color: var( --btn-primary-disabled-border-color, var(--color-foreground-disabled));
    color: var( --btn-primary-foreground-color, var(--color-foreground-on-accent))
}

button.btn--primary[aria-disabled=true] svg.icon,
button.btn--primary[disabled] svg.icon {
    fill: var( --btn-primary-disabled-foreground-color, var(--color-background-primary))
}

a.fake-btn--primary:not([href]),
a.fake-btn--primary[aria-disabled=true] {
    background-color: var( --btn-primary-disabled-background-color, var(--color-foreground-disabled));
    border-color: var( --btn-primary-disabled-border-color, var(--color-foreground-disabled));
    color: var( --btn-primary-foreground-color, var(--color-foreground-on-accent))
}

a.fake-btn--secondary,
button.btn--secondary {
    background-color: var(--btn-secondary-background-color, transparent);
    border-color: var(--btn-secondary-border-color, var(--color-stroke-accent));
    color: var( --btn-secondary-foreground-color, var(--color-foreground-accent));
    overflow: hidden;
    position: relative;
    transition: all var(--motion-duration-short-3) var(--motion-easing-quick-enter)
}

a.fake-btn--secondary:active,
button.btn--secondary:active {
    transform: scale(.97)
}

a.fake-btn--secondary:after,
button.btn--secondary:after {
    background-color: var(--state-layer-neutral);
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    position: absolute
}

a.fake-btn--secondary:not([disabled]):not([aria-disabled=true]):hover:after,
a.fake-btn--secondary[href]:hover:after,
button.btn--secondary:not([disabled]):not([aria-disabled=true]):hover:after,
button.btn--secondary[href]:hover:after {
    background-color: var(--state-layer-hover)
}

a.fake-btn--secondary:not([disabled]):not([aria-disabled=true]):focus:after,
a.fake-btn--secondary[href]:focus:after,
button.btn--secondary:not([disabled]):not([aria-disabled=true]):focus:after,
button.btn--secondary[href]:focus:after {
    background-color: var(--state-layer-focus)
}

a.fake-btn--secondary:not([disabled]):not([aria-disabled=true]):active:after,
a.fake-btn--secondary[href]:active:after,
button.btn--secondary:not([disabled]):not([aria-disabled=true]):active:after,
button.btn--secondary[href]:active:after {
    background-color: var(--state-layer-pressed)
}

a.fake-btn--secondary:visited {
    color: var( --btn-secondary-foreground-color, var(--color-foreground-accent))
}

a.fake-btn--secondary.fake-btn--destructive,
button.btn--secondary.btn--destructive {
    background-color: var( --btn-secondary-destructive-background-color, transparent);
    border-color: var( --btn-secondary-destructive-border-color, var(--color-stroke-attention));
    color: var( --btn-secondary-destructive-foreground-color, var(--color-foreground-attention))
}

button.btn--secondary[aria-disabled=true],
button.btn--secondary[disabled] {
    background-color: var( --btn-secondary-disabled-background-color, var(--color-background-primary));
    border-color: var( --btn-secondary-disabled-border-color, var(--color-stroke-disabled));
    color: var( --btn-secondary-disabled-foreground-color, var(--color-background-disabled))
}

button.btn--secondary[aria-disabled=true] svg.icon,
button.btn--secondary[disabled] svg.icon {
    fill: var( --btn-secondary-disabled-foreground-color, var(--color-foreground-disabled))
}

a.fake-btn--secondary:not([href]),
a.fake-btn--secondary[aria-disabled=true] {
    border-color: var( --btn-secondary-disabled-border-color, var(--color-background-disabled));
    color: var( --btn-secondary-disabled-foreground-color, var(--color-background-disabled))
}

a.fake-btn--tertiary,
button.btn--tertiary {
    border-color: var(--btn-tertiary-border-color, var(--color-stroke-default));
    overflow: hidden;
    position: relative;
    transition: all var(--motion-duration-short-3) var(--motion-easing-quick-enter)
}

a.fake-btn--tertiary:active,
button.btn--tertiary:active {
    transform: scale(.97)
}

a.fake-btn--tertiary:after,
button.btn--tertiary:after {
    background-color: var(--state-layer-neutral);
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    position: absolute
}

a.fake-btn--tertiary:not([disabled]):not([aria-disabled=true]):hover:after,
a.fake-btn--tertiary[href]:hover:after,
button.btn--tertiary:not([disabled]):not([aria-disabled=true]):hover:after,
button.btn--tertiary[href]:hover:after {
    background-color: var(--state-layer-hover)
}

a.fake-btn--tertiary:not([disabled]):not([aria-disabled=true]):focus:after,
a.fake-btn--tertiary[href]:focus:after,
button.btn--tertiary:not([disabled]):not([aria-disabled=true]):focus:after,
button.btn--tertiary[href]:focus:after {
    background-color: var(--state-layer-focus)
}

a.fake-btn--tertiary:not([disabled]):not([aria-disabled=true]):active:after,
a.fake-btn--tertiary[href]:active:after,
button.btn--tertiary:not([disabled]):not([aria-disabled=true]):active:after,
button.btn--tertiary[href]:active:after {
    background-color: var(--state-layer-pressed)
}

a.fake-btn--tertiary:not([href]),
a.fake-btn--tertiary[aria-disabled=true],
button.btn--tertiary[aria-disabled=true]:not([aria-live=polite][aria-disabled=true]),
button.btn--tertiary[disabled] {
    border-color: var( --expand-btn-disabled-border-color, var(--color-stroke-disabled));
    color: var( --btn-tertiary-disabled-foreground-color, var(--color-background-disabled))
}

a.fake-btn--tertiary.fake-btn--destructive,
button.btn--tertiary.btn--destructive {
    border-color: var( --btn-tertiary-destructive-foreground-color, var(--color-stroke-subtle))
}

button.btn--tertiary.btn--destructive[aria-disabled=true],
button.btn--tertiary.btn--destructive[disabled] {
    color: var( --btn-tertiary-destructive-disabled-foreground-color, var(--color-foreground-disabled))
}

a.fake-btn--large,
button.btn--large {
    border-radius: var(--btn-border-radius, 24px);
    font-size: var(--font-size-medium);
    min-height: 48px;
    padding: 0 20px
}

a.fake-btn--small,
button.btn--small {
    border-radius: var(--btn-border-radius, 16px);
    font-size: var(--font-size-default);
    min-height: 32px;
    padding: 0 16px
}

a.fake-btn--form,
button.btn--form {
    border-color: inherit;
    border-radius: var(--expand-btn-border-radius, var(--border-radius-50));
    max-width: 100%;
    overflow: hidden;
    position: relative
}

a.fake-btn--form:after,
button.btn--form:after {
    background-color: var(--state-layer-neutral);
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    position: absolute
}

a.fake-btn--form:not([disabled]):not([aria-disabled=true]):hover:after,
a.fake-btn--form[href]:hover:after,
button.btn--form:not([disabled]):not([aria-disabled=true]):hover:after,
button.btn--form[href]:hover:after {
    background-color: var(--state-layer-hover)
}

a.fake-btn--form:not([disabled]):not([aria-disabled=true]):focus:after,
a.fake-btn--form[href]:focus:after,
button.btn--form:not([disabled]):not([aria-disabled=true]):focus:after,
button.btn--form[href]:focus:after {
    background-color: var(--state-layer-focus)
}

a.fake-btn--form:not([disabled]):not([aria-disabled=true]):active:after,
a.fake-btn--form[href]:active:after,
button.btn--form:not([disabled]):not([aria-disabled=true]):active:after,
button.btn--form[href]:active:after {
    background-color: var(--state-layer-pressed)
}

button.btn--form.btn--large {
    padding: 0 20px
}

button.btn--form.btn--small {
    padding: 0 16px
}

a.fake-btn--transparent,
a.fake-btn--transparent:focus,
a.fake-btn--transparent:hover,
button.btn--transparent,
button.btn--transparent:focus,
button.btn--transparent:hover {
    background-color: initial
}

a.fake-btn--large-fixed-height,
button.btn--large-fixed-height {
    height: 48px;
    min-height: 48px
}

a.fake-btn--truncated,
a.fake-btn--truncated span,
button.btn--truncated,
button.btn--truncated span {
    line-height: 1.4em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

a.fake-btn--large-truncated,
button.btn--large-truncated {
    font-size: var(--font-size-medium);
    height: 48px;
    min-height: 48px;
    padding: 0 20px
}

a.fake-btn--large-truncated,
a.fake-btn--large-truncated span,
button.btn--large-truncated,
button.btn--large-truncated span {
    line-height: 1.4em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

a.fake-btn--split-start,
button.btn--split-start {
    border-radius: 24px 0 0 24px
}

a.fake-btn--split-end,
button.btn--split-end {
    border-radius: 0 24px 24px 0;
    margin-left: -1px;
    min-width: 40px;
    padding-left: 8px;
    padding-right: 8px
}

a.fake-btn.fake-btn--primary.fake-btn--split-end,
a.fake-btn.fake-btn--primary.fake-btn--split-end:focus,
a.fake-btn.fake-btn--primary.fake-btn--split-end:hover,
button.btn.btn--primary.btn--split-end,
button.btn.btn--primary.btn--split-end:focus,
button.btn.btn--primary.btn--split-end:hover {
    border-left-color: var( --btn-primary-border-split-color, var(--color-background-primary))
}

button.btn--floating-label .btn__floating-label--animate {
    transition: transform .3s ease, bottom .3s ease
}

[dir=rtl] a.fake-btn--split-start,
[dir=rtl] button.btn--split-start {
    border-radius: 0 24px 24px 0
}

[dir=rtl] a.fake-btn--split-end,
[dir=rtl] button.btn--split-end {
    border-radius: 24px 0 0 24px;
    margin-left: inherit;
    margin-right: -1px
}

[dir=rtl] a.fake-btn.fake-btn--tertiary.fake-btn--split-end,
[dir=rtl] button.btn.btn--tertiary.btn--split-end {
    margin-right: -2px
}

[dir=rtl] a.fake-btn.fake-btn--primary.fake-btn--split-end,
[dir=rtl] a.fake-btn.fake-btn--primary.fake-btn--split-end:focus,
[dir=rtl] a.fake-btn.fake-btn--primary.fake-btn--split-end:hover,
[dir=rtl] button.btn.btn--primary.btn--split-end,
[dir=rtl] button.btn.btn--primary.btn--split-end:focus,
[dir=rtl] button.btn.btn--primary.btn--split-end:hover {
    border-left-color: var( --btn-primary-border-color, var(--color-stroke-accent));
    border-right-color: var( --primary-border-split-color, var(--color-stroke-subtle))
}

a.nav-link,
a.standalone-link {
    color: var( --nav-link-foreground-color, var(--color-foreground-link-primary));
    -webkit-text-decoration: none;
    text-decoration: none
}

a.nav-link:visited,
a.standalone-link:visited {
    color: var( --link-foreground-color-default, var(--color-foreground-link-primary))
}

a.nav-link:hover,
a.standalone-link:hover {
    color: var( --nav-link-foreground-hover-color, var(--color-foreground-secondary));
    -webkit-text-decoration: underline;
    text-decoration: underline
}

a.nav-link:not([href]),
a.nav-link[aria-disabled=true],
a.standalone-link:not([href]),
a.standalone-link[aria-disabled=true] {
    color: var( --link-forground-color-disabled, var(--color-foreground-disabled));
    -webkit-text-decoration: none;
    text-decoration: none
}

button.fake-link {
    background-color: initial;
    border: 0;
    color: var( --fake-link-foreground-color, var(--color-foreground-link-primary));
    font-family: inherit;
    font-size: inherit;
    padding: 0;
    -webkit-text-decoration: underline;
    text-decoration: underline
}

button.fake-link:hover {
    color: var( --fake-link-foreground-color-hover, var(--color-foreground-secondary))
}

button.fake-link[aria-disabled=true],
button.fake-link[disabled] {
    color: var( --fake-link-foreground-disabled-color, var(--color-foreground-disabled))
}

a.legal-link,
button.legal-link {
    -webkit-text-decoration: underline;
    text-decoration: underline
}

a.legal-link,
a.legal-link:hover,
a.legal-link:visited,
button.legal-link,
button.legal-link:hover,
button.legal-link:visited {
    color: var( --legal-link-foreground-color, var(--color-foreground-link-legal))
}

.badge {
    align-items: center;
    background-color: var( --badge-background-color, var(--color-background-attention));
    border: 2px solid var(--color-stroke-on-attention);
    border-radius: 16px;
    color: var(--badge-foreground-color, var(--color-foreground-on-attention));
    display: inline-flex;
    font-size: 10px;
    height: 16px;
    justify-content: center;
    min-width: 8px;
    padding: 2px 6px;
    white-space: nowrap
}

.infotip {
    position: relative
}

span.infotip {
    display: inline-block
}

.infotip__overlay {
    box-shadow: var(--bubble-shadow);
    display: none;
    font-size: 14px;
    left: 0;
    max-width: 344px;
    position: absolute;
    top: 0;
    transform: scaleX(1);
    width: max-content
}

.infotip__mask,
.infotip__overlay {
    background-color: var( --infotip-background-color, var(--color-background-elevated));
    border-radius: var(--bubble-border-radius, var(--border-radius-50));
    color: var(--infotip-foreground-color, var(--color-foreground-primary));
    z-index: 1
}

.infotip__mask {
    position: relative
}

span.infotip__mask {
    display: block
}

.infotip__cell {
    display: flex;
    overflow-wrap: anywhere;
    padding: var(--spacing-100) var(--spacing-200);
    word-break: normal
}

.infotip__content {
    flex-grow: 1
}

.infotip__content p {
    margin: 0
}

.infotip__content p:not(:first-of-type) {
    margin-top: var(--spacing-50)
}

.infotip__pointer {
    background-color: var( --infotip-background-color, var(--color-background-elevated));
    height: 8px;
    position: absolute;
    transform: rotate(45deg);
    width: 8px;
    z-index: 0
}

.infotip__pointer--top-left {
    left: 12px;
    top: -4px
}

.infotip__pointer--top {
    left: calc(50% - 4px);
    top: -4px
}

.infotip__pointer--top-right {
    left: auto;
    right: 12px;
    top: -4px
}

.infotip__pointer--bottom-left {
    bottom: -4px;
    left: 12px;
    top: auto
}

.infotip__pointer--bottom {
    bottom: -4px;
    left: calc(50% - 4px);
    top: auto
}

.infotip__pointer--bottom-right {
    bottom: -4px;
    left: auto;
    right: 12px;
    top: auto
}

.infotip__pointer--left {
    left: -4px;
    top: calc(50% - 4px)
}

.infotip__pointer--left-bottom {
    bottom: 12px;
    left: -4px;
    top: auto
}

.infotip__pointer--left-top {
    left: -4px;
    top: 12px
}

.infotip__pointer--right {
    left: auto;
    right: -4px;
    top: calc(50% - 4px)
}

.infotip__pointer--right-bottom {
    bottom: 12px;
    left: auto;
    right: -4px;
    top: auto
}

.infotip__pointer--right-top {
    left: auto;
    right: -4px;
    top: 12px
}

.infotip__heading {
    font-size: 1em;
    font-weight: 700;
    margin: 0 0 var(--spacing-50)
}

.infotip__host[aria-expanded=true]~.infotip__overlay,
span.infotip__heading {
    display: block
}

.infotip .icon-btn {
    display: inline-flex;
    flex-shrink: 0;
    height: 20px;
    min-width: 20px;
    outline-offset: 2px;
    overflow: visible;
    width: 20px
}

.infotip__close,
button.infotip__close {
    margin-left: var(--spacing-200)
}

@media (min-width: 512px) {
    .infotip__overlay {
        max-width: 400px
    }
}

:root {
    --dialog-scrim-color-hide: rgb(17 24 32 / 0);
    --dialog-scrim-color-show: rgb(17 24 32 / .7);
    --dialog-lightbox-max-width: 616px;
    --dialog-lightbox-wide-max-width: 896px;
    --dialog-lightbox-narrow-max-width: 480px
}

.lightbox-dialog[role=dialog] {
    background-color: var(--dialog-scrim-color-show);
    bottom: 0;
    left: 0;
    -webkit-overflow-scrolling: touch;
    align-items: flex-start;
    justify-content: center;
    position: fixed;
    right: 0;
    top: 0;
    will-change: background-color;
    z-index: 100000
}

.lightbox-dialog[role=dialog]:not([hidden]) {
    display: flex
}

.lightbox-dialog__window {
    background-color: var( --dialog-window-background-color, var(--color-background-primary));
    border-radius: var(--lightbox-border-radius, var(--border-radius-150));
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    margin: auto auto 16px;
    max-height: 90%;
    max-width: calc(100% - 32px);
    min-height: 55px;
    min-width: 208px;
    will-change: opacity, transform
}

.lightbox-dialog__header {
    display: flex;
    flex-shrink: 0;
    margin: var(--spacing-200) var(--spacing-200) 0;
    position: relative
}

.lightbox-dialog__header h1,
.lightbox-dialog__header h2,
.lightbox-dialog__header h3,
.lightbox-dialog__header h4,
.lightbox-dialog__header h5,
.lightbox-dialog__header h6 {
    align-self: center;
    flex: 1 1 auto;
    margin: 0;
    overflow-wrap: anywhere
}

.lightbox-dialog__header>:last-child:not(:only-child) {
    margin-left: var(--spacing-200)
}

.lightbox-dialog__main {
    box-sizing: border-box;
    flex: 1 1 auto;
    min-height: 18px;
    overflow: auto;
    padding: var(--spacing-200);
    position: relative
}

.lightbox-dialog__main>:first-child {
    margin-top: 0
}

.lightbox-dialog__main>:last-child {
    margin-bottom: 0
}

.lightbox-dialog__footer {
    border-top: 1px solid var(--dialog-lightbox-separator-color, var(--color-stroke-subtle));
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--spacing-200);
    position: relative
}

.lightbox-dialog__footer>:not(:first-child) {
    margin-top: var(--spacing-200)
}

.lightbox-dialog__image {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: var(--border-radius-100) var(--border-radius-100) 0 0;
    height: 218px;
    position: absolute;
    width: 100%
}

.lightbox-dialog--expressive .lightbox-dialog__window {
    padding-bottom: var(--spacing-100)
}

.lightbox-dialog--expressive .lightbox-dialog__header>* {
    margin-top: 218px
}

.lightbox-dialog--expressive .lightbox-dialog__header {
    margin: var(--spacing-300) var(--spacing-300) 0
}

.lightbox-dialog--expressive .lightbox-dialog__footer,
.lightbox-dialog--expressive .lightbox-dialog__main {
    padding: var(--spacing-200) var(--spacing-300)
}

button.icon-btn.lightbox-dialog__close,
button.icon-btn.lightbox-dialog__prev {
    align-self: flex-start;
    border: 0;
    height: 32px;
    min-width: 32px;
    position: relative;
    width: 32px;
    z-index: 1
}

button.icon-btn.lightbox-dialog__prev {
    margin-right: var(--spacing-200)
}

.lightbox-dialog--expressive button.icon-btn.lightbox-dialog__close,
.lightbox-dialog--expressive button.icon-btn.lightbox-dialog__prev {
    align-self: self-start;
    margin: 0
}

.lightbox-dialog--expressive button.icon-btn.lightbox-dialog__prev+* {
    margin-left: -32px
}

.lightbox-dialog__title:not(:first-child) {
    margin-left: var(--spacing-200)
}

.lightbox-dialog__title--center {
    text-align: center
}

.lightbox-dialog--hide.lightbox-dialog--mask-fade,
.lightbox-dialog--hide.lightbox-dialog--mask-fade-slow {
    transition: background-color var(--motion-duration-short-3) var(--motion-easing-continuous)
}

.lightbox-dialog--hide .lightbox-dialog__window--fade {
    transition: opacity var(--motion-duration-short-3) var(--motion-easing-continuous)
}

.lightbox-dialog--hide .lightbox-dialog__window--animate {
    transition: transform var(--motion-duration-medium-3) var(--motion-easing-soft-exit), opacity var(--motion-duration-short-3) var(--motion-easing-continuous)
}

.lightbox-dialog--hide .lightbox-dialog__window--animate>* {
    transition: opacity var(--motion-duration-short-2) var(--motion-easing-continuous)
}

.lightbox-dialog--show.lightbox-dialog--mask-fade,
.lightbox-dialog--show.lightbox-dialog--mask-fade-slow {
    transition: background-color var(--motion-duration-short-3) var(--motion-easing-continuous)
}

.lightbox-dialog--show .lightbox-dialog__window--fade {
    transition: opacity var(--motion-duration-short-3) var(--motion-easing-continuous)
}

.lightbox-dialog--show .lightbox-dialog__window--animate {
    transition: transform var(--motion-duration-medium-3) var(--motion-easing-standard), opacity var(--motion-duration-short-3) var(--motion-easing-continuous)
}

.lightbox-dialog--show .lightbox-dialog__window--animate>* {
    transition: opacity var(--motion-duration-medium-2) var(--motion-easing-continuous) var(--motion-duration-short-3)
}

.lightbox-dialog--hide.lightbox-dialog--hide,
.lightbox-dialog--hide.lightbox-dialog--show-init,
.lightbox-dialog--show-init.lightbox-dialog--hide,
.lightbox-dialog--show-init.lightbox-dialog--show-init {
    display: flex
}

.lightbox-dialog--hide.lightbox-dialog--mask-fade,
.lightbox-dialog--hide.lightbox-dialog--mask-fade-slow,
.lightbox-dialog--show-init.lightbox-dialog--mask-fade,
.lightbox-dialog--show-init.lightbox-dialog--mask-fade-slow {
    background-color: var(--dialog-scrim-color-hide)
}

.lightbox-dialog--hide .lightbox-dialog__window--animate,
.lightbox-dialog--hide .lightbox-dialog__window--animate>*,
.lightbox-dialog--hide .lightbox-dialog__window--fade,
.lightbox-dialog--show-init .lightbox-dialog__window--animate,
.lightbox-dialog--show-init .lightbox-dialog__window--animate>*,
.lightbox-dialog--show-init .lightbox-dialog__window--fade {
    opacity: 0
}

.lightbox-dialog--hide-init.lightbox-dialog--hide-init,
.lightbox-dialog--hide-init.lightbox-dialog--show,
.lightbox-dialog--show.lightbox-dialog--hide-init,
.lightbox-dialog--show.lightbox-dialog--show {
    display: flex
}

.lightbox-dialog--hide-init.lightbox-dialog--mask-fade,
.lightbox-dialog--hide-init.lightbox-dialog--mask-fade-slow,
.lightbox-dialog--show.lightbox-dialog--mask-fade,
.lightbox-dialog--show.lightbox-dialog--mask-fade-slow {
    background-color: var(--dialog-scrim-color-show)
}

.lightbox-dialog--hide-init .lightbox-dialog__window--animate,
.lightbox-dialog--hide-init .lightbox-dialog__window--animate>*,
.lightbox-dialog--hide-init .lightbox-dialog__window--fade,
.lightbox-dialog--show .lightbox-dialog__window--animate,
.lightbox-dialog--show .lightbox-dialog__window--animate>*,
.lightbox-dialog--show .lightbox-dialog__window--fade {
    opacity: 1
}

@media (prefers-reduced-motion) {
    .lightbox-dialog--hide.lightbox-dialog--mask-fade,
    .lightbox-dialog--hide.lightbox-dialog--mask-fade-slow {
        transition: background-color var(--motion-duration-short-3) var(--motion-easing-soft-exit)
    }
    .lightbox-dialog--hide .lightbox-dialog__window--animate,
    .lightbox-dialog--hide .lightbox-dialog__window--fade {
        transition: opacity var(--motion-duration-short-3) var(--motion-easing-soft-exit)
    }
    .lightbox-dialog--hide .lightbox-dialog__window--animate>* {
        transition: opacity var(--motion-duration-short-2) var(--motion-soft-exit)
    }
    .lightbox-dialog--show.lightbox-dialog--mask-fade,
    .lightbox-dialog--show.lightbox-dialog--mask-fade-slow {
        transition: background-color var(--motion-duration-medium-2) var(--motion-easing-soft-enter)
    }
    .lightbox-dialog--show .lightbox-dialog__window--animate,
    .lightbox-dialog--show .lightbox-dialog__window--fade {
        transition: opacity var(--motion-duration-medium-2) var(--motion-easing-soft-enter)
    }
    .lightbox-dialog--show .lightbox-dialog__window--animate>* {
        transition: opacity var(--motion-duration-medium-2) var(--motion-easing-soft-enter) var(--motion-duration-short-3)
    }
}

.lightbox-dialog--hide-init .lightbox-dialog__window--animate,
.lightbox-dialog--show .lightbox-dialog__window--animate {
    transform: translateY(0)
}

.lightbox-dialog--hide .lightbox-dialog__window--animate,
.lightbox-dialog--show-init .lightbox-dialog__window--animate {
    transform: translateY(100%)
}

.lightbox-dialog__handle:after {
    background-color: var(--dialog-handle-color, var(--color-stroke-default));
    border-radius: 3px;
    content: "";
    display: block;
    height: 2px;
    width: 24px
}

[dir=rtl] button.icon-btn.lightbox-dialog__prev .icon--16 {
    transform: rotate(180deg)
}

.lightbox-dialog--fullscreen .lightbox-dialog__window,
.lightbox-dialog--large .lightbox-dialog__window {
    align-self: center;
    height: 70%;
    margin: var(--spacing-100);
    max-height: 95%
}

@media (max-width: 512px) {
    .lightbox-dialog--large .lightbox-dialog__window {
        height: 95%;
        max-height: 95%;
        width: 100%
    }
    .lightbox-dialog--fullscreen .lightbox-dialog__window {
        border-radius: 0;
        height: 100%;
        margin: 0;
        max-height: 100%;
        max-width: 100%;
        width: 100%
    }
}

@media (min-width: 512px) {
    .lightbox-dialog__window {
        border-radius: var(--lightbox-border-radius, var(--border-radius-100));
        margin: auto;
        max-width: 88%
    }
    .lightbox-dialog--narrow .lightbox-dialog__window {
        max-width: var(--dialog-lightbox-narrow-max-width)
    }
    .lightbox-dialog__window .lightbox-dialog__footer {
        flex-direction: row;
        justify-content: flex-end
    }
    .lightbox-dialog__window .lightbox-dialog__footer>:not(:first-child) {
        margin-left: var(--spacing-100);
        margin-top: 0
    }
    .lightbox-dialog--hide-init .lightbox-dialog__window--animate,
    .lightbox-dialog--show .lightbox-dialog__window--animate {
        transform: scale(1)
    }
    .lightbox-dialog--hide .lightbox-dialog__window--animate,
    .lightbox-dialog--show-init .lightbox-dialog__window--animate {
        transform: scale(.75)
    }
}

@media (min-width: 512px) and (prefers-reduced-motion) {
    .lightbox-dialog--hide .lightbox-dialog__window--animate,
    .lightbox-dialog--hide-init .lightbox-dialog__window--animate,
    .lightbox-dialog--show .lightbox-dialog__window--animate,
    .lightbox-dialog--show-init .lightbox-dialog__window--animate {
        transform: scale(1)
    }
}

@media (min-width: 768px) {
    .lightbox-dialog__window {
        max-width: var(--dialog-lightbox-max-width)
    }
    .lightbox-dialog--wide .lightbox-dialog__window {
        max-width: 88%
    }
    .lightbox-dialog--wide .lightbox-dialog__image {
        height: 256px
    }
    .lightbox-dialog--wide.lightbox-dialog--expressive .lightbox-dialog__header>* {
        margin-top: 256px
    }
}

@media (min-width: 1024px) {
    .lightbox-dialog--wide .lightbox-dialog__window {
        max-width: var(--dialog-lightbox-wide-max-width)
    }
}

.signal {
    border: 1px solid;
    border-radius: var(--border-radius-100);
    box-sizing: border-box;
    display: inline-block;
    font-size: var(--font-size-smallest);
    font-weight: 700;
    letter-spacing: .5px;
    line-height: var(--spacing-150);
    margin: var(--spacing-100) 0;
    padding: 2px var(--spacing-100) 1px;
    text-align: center;
    text-transform: uppercase
}

.signal--trustworthy {
    color: var(--signal-trustworthy-color, var(--color-foreground-accent))
}

.signal--recent {
    color: var(--signal-recent-color, var(--color-foreground-confirmation))
}

.signal--time-sensitive {
    color: var( --signal-time-sensitive-color, var(--color-foreground-attention))
}

.signal--neutral {
    color: var(--signal-neutral-color, var(--color-foreground-secondary))
}

.snackbar-dialog {
    background-color: var( --snackbar-dialog-background-color, var(--color-background-inverse));
    border-radius: var( --snackbar-dialog-border-radius, var(--border-radius-100));
    bottom: 40px;
    box-shadow: 0 0 3px #00000047;
    color: var( --snackbar-dialog-foreground-color, var(--color-foreground-on-inverse));
    left: var(--spacing-100);
    margin: auto;
    max-height: 40vh;
    max-width: 448px;
    position: fixed;
    right: var(--spacing-100);
    transform: translateY(0);
    will-change: opacity, transform;
    z-index: 2
}

.snackbar-dialog--transition {
    transition: opacity .2s cubic-bezier(.21, .31, 1, 1.22) 0s, transform .2s cubic-bezier(.21, .31, 1, 1.22) 0s
}

.snackbar-dialog--hide-init,
.snackbar-dialog--show {
    display: block;
    opacity: 1;
    transform: translateY(0)
}

.snackbar-dialog--hide,
.snackbar-dialog--show-init {
    display: block;
    opacity: 0;
    transform: translateY(110%)
}

.snackbar-dialog__window {
    display: flex;
    margin: var(--spacing-200) var(--spacing-300)
}

.snackbar-dialog__window--column {
    flex-direction: column
}

.snackbar-dialog__main {
    margin-right: var(--spacing-400)
}

.snackbar-dialog__main p {
    margin: 0
}

.snackbar-dialog__actions {
    margin-left: auto
}

.snackbar-dialog__window--column .snackbar-dialog__actions {
    margin-top: var(--spacing-200)
}

.snackbar-dialog__actions .fake-link {
    color: var( --snackbar-dialog-foreground-color, var(--color-foreground-on-inverse));
    -webkit-text-decoration: none;
    text-decoration: none
}

.snackbar-dialog__actions .fake-link:first-letter {
    -webkit-text-decoration: underline;
    text-decoration: underline
}

.snackbar-dialog__actions button.fake-link:hover:not(:disabled) {
    color: var( --snackbar-dialog-foreground-color, var(--color-foreground-on-inverse));
    -webkit-text-decoration: underline;
    text-decoration: underline
}

@media (min-width: 512px) {
    .snackbar-dialog {
        bottom: 20px
    }
}

[dir=rtl] .snackbar-dialog {
    left: auto;
    right: 0
}

.switch {
    box-sizing: border-box;
    height: 40px;
    position: relative;
    vertical-align: middle
}

div.switch {
    display: flex
}

span.switch {
    display: inline-flex
}

span.switch__button {
    align-self: center;
    background-color: var( --switch-unchecked-background-color, var(--color-background-secondary));
    border-color: var(--switch-border-color, var(--color-stroke-strong));
    border-radius: 400px;
    border-style: solid;
    border-width: 1px;
    color: transparent;
    display: inline-block;
    position: relative;
    text-indent: 100%;
    width: 40px
}

span.switch__button,
span.switch__button:after {
    height: 24px;
    transition: left .15s ease-out 0s
}

span.switch__button:after {
    background-color: var( --switch-foreground-color, var(--color-background-primary));
    border-color: var( --switch-foreground-border-color, var(--color-stroke-strong));
    border-radius: 50%;
    border-style: solid;
    border-width: 1px;
    content: "";
    display: block;
    left: -1px;
    position: absolute;
    top: -1px;
    transform: translateZ(0);
    width: 24px
}

input.switch__control,
span.switch__control {
    height: 24px;
    left: 0;
    margin: 0;
    outline: 0;
    padding: 0;
    position: absolute;
    top: 8px;
    width: 40px;
    z-index: 1
}

input.switch__control[disabled]+span.switch__button,
span.switch__control[aria-disabled=true]+span.switch__button {
    border-color: var(--switch-border-color, var(--color-stroke-disabled))
}

input.switch__control {
    opacity: 0
}

input.switch__control:focus+span.switch__button {
    outline: 1px auto var(--switch-custom-outline-color, var(--color-foreground-secondary))
}

input.switch__control:focus:not(:focus-visible)+span.switch__button {
    outline: none
}

input.switch__control[disabled]+span.switch__button:after,
span.switch__control[aria-disabled=true]+span.switch__button:after {
    border-color: var(--switch-border-color, var(--color-background-disabled))
}

input.switch__control:not([disabled]):focus+span.switch__button,
input.switch__control:not([disabled]):hover+span.switch__button,
span.switch__control:not([aria-disabled=true]):focus+span.switch__button,
span.switch__control:not([aria-disabled=true]):hover+span.switch__button {
    background-color: var( --switch-unchecked-hover-background-color, var(--color-state-secondary-hover))
}

input.switch__control:not([disabled]):checked+span.switch__button,
span.switch__control:not([aria-disabled=true])[aria-checked=true]+span.switch__button {
    background-color: var( --switch-checked-background-color, var(--color-background-accent))
}

input.switch__control[disabled]:checked+span.switch__button,
span.switch__control[aria-disabled=true][aria-checked=true]+span.switch__button {
    background-color: var( --switch-disabled-background-color, var(--color-background-disabled));
    border-color: var(--switch-border-color, var(--color-background-disabled))
}

input.switch__control:not([disabled]):focus-visible+span.switch__button,
span.switch__control:not([aria-disabled=true]):focus-visible+span.switch__button {
    box-shadow: 0 0 0 2px var(--color-background-primary), 0 0 0 4px var(--color-state-accent-hover)
}

input.switch__control:not([disabled]):checked:focus+span.switch__button,
input.switch__control:not([disabled]):checked:hover+span.switch__button,
span.switch__control:not([aria-disabled=true])[aria-checked=true]:focus+span.switch__button,
span.switch__control:not([aria-disabled=true])[aria-checked=true]:hover+span.switch__button {
    background-color: var( --switch-checked-hover-background-color, var(--color-state-accent-hover))
}

input.switch__control:checked+span.switch__button:after,
span.switch__control[aria-checked=true]+span.switch__button:after {
    left: 15px
}

span.switch__control:focus:not(:focus-visible) {
    outline: 0
}

@media screen and (-ms-high-contrast: active) {
    input.switch__control {
        opacity: 1
    }
}

.fake-menu-button,
.menu-button {
    line-height: normal;
    position: relative
}

.fake-menu-button__menu,
.menu-button__menu {
    background-color: var( --menu-button-menu-background-color, var(--color-background-elevated));
    border-radius: var( --menu-button-menu-border-radius, var(--border-radius-50));
    box-shadow: var(--bubble-shadow);
    box-sizing: border-box;
    display: none;
    left: 0;
    max-height: 400px;
    outline: 0;
    overflow-y: auto;
    position: absolute;
    top: 0;
    width: -moz-fit-content;
    width: fit-content;
    z-index: 2
}

.fake-menu-button__menu--set-position,
.menu-button__menu--set-position {
    min-width: 100%;
    top: calc(100% + 4px);
    width: auto
}

.fake-menu-button__menu--fixed,
.menu-button__menu--fixed {
    position: fixed
}

[dir=rtl] .fake-menu-button__menu,
[dir=rtl] .menu-button__menu {
    left: unset;
    right: 0
}

span.fake-menu-button__button,
span.menu-button__button {
    display: inline-block;
    vertical-align: bottom
}

.fake-menu-button__menu {
    list-style-type: none;
    margin: 0;
    max-height: calc(50vh - 40px);
    overflow-y: auto;
    padding: 0
}

div.menu-button__item[role^=menuitem] {
    background-color: initial;
    border-color: var( --menu-button-menuitem-border-color, var(--color-background-primary));
    border-style: solid;
    border-width: 1px;
    box-sizing: border-box;
    color: var( --menu-button-menuitem-foreground-color, var(--color-foreground-primary));
    cursor: default;
    display: inline-grid;
    font-family: inherit;
    grid-template-columns: auto auto;
    justify-content: space-between;
    padding: 8px 15px;
    width: 100%
}

div.menu-button__item[role^=menuitem]:not(:last-child) {
    margin-bottom: 1px
}

div.menu-button__item[role^=menuitem]:focus {
    outline-offset: -4px
}

div.menu-button__item[role^=menuitem]:hover {
    background-color: var(--color-state-primary-hover);
    color: var( --menu-button-menuitem-hover-foreground-color, var(--color-foreground-primary))
}

div.menu-button__item[role^=menuitem]:active {
    font-weight: 700
}

div.menu-button__item[role^=menuitem]:first-child {
    border-top-left-radius: var( --menu-button-menu-border-radius, var(--border-radius-50));
    border-top-right-radius: var( --menu-button-menu-border-radius, var(--border-radius-50))
}

div.menu-button__item[role^=menuitem]:last-child {
    border-bottom-left-radius: var( --menu-button-menu-border-radius, var(--border-radius-50));
    border-bottom-right-radius: var( --menu-button-menu-border-radius, var(--border-radius-50))
}

.fake-menu-button__item>svg.icon--16,
.menu-button__item>svg.icon--16 {
    align-self: center;
    fill: currentColor;
    margin: 0 auto;
    opacity: 0;
    stroke: currentColor;
    stroke-width: 0
}

.fake-menu-button__item>svg.icon--16:last-child,
.menu-button__item>svg.icon--16:last-child {
    margin-left: var(--spacing-100)
}

a.fake-menu-button__item {
    color: var(--menu-button-anchor-color, var(--color-foreground-primary));
    -webkit-text-decoration: none;
    text-decoration: none
}

a.fake-menu-button__item:focus {
    -webkit-text-decoration: underline;
    text-decoration: underline
}

a.fake-menu-button__item:hover,
a.fake-menu-button__item:visited {
    color: var(--menu-button-anchor-color, var(--color-background-primary))
}

button.fake-menu-button__item {
    background-color: var( --menu-button-background-color, var(--color-background-primary));
    color: var(--menu-button-foreground-color, var(--color-foreground-primary));
    font-family: inherit;
    font-size: 1em;
    text-align: left
}

a.fake-menu-button__item[aria-current=page] svg.icon--16,
button.fake-menu-button__item[aria-current=page] svg.icon--16,
div.menu-button__item[role^=menuitem][aria-checked=true] svg.icon--16 {
    opacity: 1
}

.menu-button__item[role=menuitemcheckbox][aria-checked=true] svg.icon--unchecked,
.menu-button__item[role=menuitemradio][aria-checked=true] svg.icon--unchecked {
    display: none
}

.menu-button__item[role=menuitemcheckbox][aria-checked=true] svg.icon--checked,
.menu-button__item[role=menuitemradio][aria-checked=true] svg.icon--checked {
    display: block
}

.menu-button__item[role=menuitemcheckbox] svg.icon--unchecked {
    color: var(--color-foreground-secondary);
    display: block;
    margin-right: var(--spacing-100)
}

.menu-button__item[role=menuitemcheckbox] svg.icon--checked {
    color: var(--color-foreground-primary);
    display: none;
    margin-right: var(--spacing-100)
}

.menu-button__item[role=menuitemradio] svg.icon--unchecked {
    color: var(--color-foreground-primary);
    display: block;
    margin-right: var(--spacing-100)
}

.menu-button__item[role=menuitemradio] svg.icon--checked {
    color: var(--color-foreground-primary);
    display: none;
    margin-right: var(--spacing-100)
}

.fake-menu-button__menu a.fake-menu-button__item,
.fake-menu-button__menu button.fake-menu-button__item {
    background-color: initial;
    border-color: var( --menu-button-menuitem-border-color, var(--color-background-primary));
    border-style: solid;
    border-width: 1px;
    box-sizing: border-box;
    color: var( --menu-button-menuitem-foreground-color, var(--color-foreground-primary));
    display: inline-grid;
    font-family: inherit;
    grid-template-columns: auto auto;
    justify-content: space-between;
    padding: 8px 15px;
    width: 100%
}

.fake-menu-button__menu a.fake-menu-button__item:not(:last-child),
.fake-menu-button__menu button.fake-menu-button__item:not(:last-child) {
    margin-bottom: 1px
}

.fake-menu-button__menu a.fake-menu-button__item:focus,
.fake-menu-button__menu button.fake-menu-button__item:focus {
    outline-offset: -4px
}

.fake-menu-button__menu a.fake-menu-button__item:hover,
.fake-menu-button__menu button.fake-menu-button__item:hover {
    background-color: var(--color-state-primary-hover);
    color: var( --menu-button-menuitem-hover-foreground-color, var(--color-foreground-primary))
}

.fake-menu-button__menu a.fake-menu-button__item:active,
.fake-menu-button__menu button.fake-menu-button__item:active {
    font-weight: 700
}

.fake-menu-button__menu a.fake-menu-button__item:not([href]),
.fake-menu-button__menu button.fake-menu-button__item[disabled],
.menu-button__menu div.menu-button__item[role^=menuitem][aria-disabled=true] {
    color: var( --menu-button-menuitem-disabled-foreground-color, var(--color-foreground-disabled))
}

.fake-menu-button__menu>li:first-child a.fake-menu-button__item {
    border-top-left-radius: var( --menu-button-menu-border-radius, var(--border-radius-50));
    border-top-right-radius: var( --menu-button-menu-border-radius, var(--border-radius-50))
}

.fake-menu-button__menu>li:last-child a.fake-menu-button__item {
    border-bottom-left-radius: var( --menu-button-menu-border-radius, var(--border-radius-50));
    border-bottom-right-radius: var( --menu-button-menu-border-radius, var(--border-radius-50))
}

.fake-menu-button__menu--fix-width,
.menu-button__menu--fix-width {
    width: 100%
}

.fake-menu-button__menu--fix-width span,
.menu-button__menu--fix-width span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

a.fake-menu-button__item>span,
button.fake-menu-button__item>span,
div.menu-button__item[role^=menuitem]>span {
    flex: 1 0 auto;
    white-space: nowrap
}

a.fake-menu-button__item--badged,
button.fake-menu-button__item--badged,
div.menu-button__item--badged[role^=menuitem] {
    padding-right: 36px;
    position: relative
}

a.fake-menu-button__item--badged .badge,
button.fake-menu-button__item--badged .badge,
div.menu-button__item--badged[role^=menuitem] .badge {
    margin-left: var(--spacing-50);
    position: absolute;
    top: 6px;
    z-index: 1
}

.menu-button__menu--scroll {
    overflow-y: scroll
}

.fake-menu-button__menu--reverse,
.menu-button__menu--reverse {
    left: unset;
    right: 0
}

[dir=rtl] .fake-menu-button__menu--reverse,
[dir=rtl] .menu-button__menu--reverse {
    left: 0;
    right: unset
}

.fake-menu-button .btn[aria-expanded=true]~.fake-menu-button__menu,
.fake-menu-button .expand-btn[aria-expanded=true]~.fake-menu-button__menu,
.fake-menu-button__button[aria-expanded=true]~.fake-menu-button__menu,
.menu-button .btn[aria-expanded=true]~.menu-button__menu,
.menu-button .expand-btn[aria-expanded=true]~.menu-button__menu,
.menu-button .filter-chip[aria-expanded=true]~.menu-button__menu,
.menu-button__button[aria-expanded=true]~.menu-button__menu {
    display: block
}

.btn~.fake-menu-button__menu--static,
.btn~.menu-button__menu--static,
.expand-btn~.menu-button__menu--static,
.expand_btn~.fake-menu-button__menu--static,
.fake-menu-button__button~.fake-menu-button__menu--static,
.filter-chip~.fake-menu-button__menu--static,
.menu-button__button~.menu-button__menu--static {
    position: static
}

div.menu-button__option--active[role=option] {
    font-weight: 700
}

hr.menu-button__separator {
    border-color: var( --menu-button-separator-color, var(--color-stroke-subtle));
    border-style: solid;
    border-width: 1px;
    margin: 0
}

.menu-button__footer {
    align-items: center;
    background-color: var(--color-background-elevated);
    border: none;
    border-color: var(--color-stroke-subtle);
    border-top-style: solid;
    border-top-width: 1px;
    display: flex;
    justify-content: center;
    padding: var(--spacing-200)
}

.menu-button--filter div.menu-button__item[role^=menuitem] {
    justify-content: flex-start
}

div.menu-button__item[role^=menuitem]:focus:not(:focus-visible) {
    outline: none
}

@keyframes fill-horizontal-background {
    0% {
        background-size: 0 100%
    }
    99% {
        background-color: var(--color-background-primary)
    }
    to {
        background-color: var(--color-background-strong);
        background-size: 100% 100%
    }
}

@keyframes chevron-bounce-open {
    0% {
        transform: translateY(0)
    }
    50% {
        transform: translateY(-7px)
    }
    to {
        transform: translateY(0)
    }
}

@keyframes chevron-bounce-close {
    0% {
        transform: translateY(0)
    }
    50% {
        transform: translateY(7px)
    }
    to {
        transform: translateY(0)
    }
}

a.filter-chip,
button.filter-chip {
    align-items: center;
    background-color: var(--color-background-primary);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 0 100%;
    border: 1px solid var(--color-stroke-default);
    border-radius: var(--border-radius-100);
    box-shadow: none;
    box-sizing: border-box;
    color: var(--color-foreground-primary);
    display: inline-flex;
    font-size: var(--font-size-default);
    gap: var(--spacing-75);
    height: var(--spacing-400);
    justify-content: space-between;
    max-width: 296px;
    min-width: 32px;
    overflow: hidden;
    padding: 0 var(--spacing-150);
    position: relative;
    -webkit-text-decoration: none;
    text-decoration: none;
    transition: all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
    vertical-align: bottom
}

a.filter-chip:active,
button.filter-chip:active {
    transform: scale(.97)
}

a.filter-chip:after,
button.filter-chip:after {
    background-color: var(--state-layer-neutral);
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    position: absolute
}

a.filter-chip:not([disabled]):not([aria-disabled=true]):hover:after,
a.filter-chip[href]:hover:after,
button.filter-chip:not([disabled]):not([aria-disabled=true]):hover:after,
button.filter-chip[href]:hover:after {
    background-color: var(--state-layer-hover)
}

a.filter-chip:not([disabled]):not([aria-disabled=true]):focus:after,
a.filter-chip[href]:focus:after,
button.filter-chip:not([disabled]):not([aria-disabled=true]):focus:after,
button.filter-chip[href]:focus:after {
    background-color: var(--state-layer-focus)
}

a.filter-chip:not([disabled]):not([aria-disabled=true]):active:after,
a.filter-chip[href]:active:after,
button.filter-chip:not([disabled]):not([aria-disabled=true]):active:after,
button.filter-chip[href]:active:after {
    background-color: var(--state-layer-pressed)
}

a.filter-chip--expressive,
button.filter-chip--expressive {
    border-radius: var(--border-radius-150);
    height: 40px
}

.filter-chip__media {
    align-items: center;
    border-radius: 8px;
    border-radius: var(--spacing-400);
    display: flex;
    justify-content: center;
    margin-left: -8px;
    overflow: hidden;
    position: relative
}

.filter-chip__media:after {
    background: #0000000d;
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0
}

.filter-chip__media>img {
    display: inline-block;
    height: var(--spacing-400);
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    object-fit: cover;
    width: var(--spacing-400)
}

a.filter-chip--selected,
button.filter-chip[aria-pressed=true] {
    animation: fill-horizontal-background 0s var(--motion-easing-quick-enter) forwards;
    background-image: linear-gradient(to right, var(--color-background-strong) 0, var(--color-background-strong) 100%);
    color: var(--color-foreground-on-strong);
    overflow: hidden;
    position: relative
}

a.filter-chip--selected:after,
button.filter-chip[aria-pressed=true]:after {
    background-color: var(--state-layer-neutral-on-strong);
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    position: absolute
}

a.filter-chip--selected:not([disabled]):not([aria-disabled=true]):hover:after,
a.filter-chip--selected[href]:hover:after,
button.filter-chip[aria-pressed=true]:not([disabled]):not([aria-disabled=true]):hover:after,
button.filter-chip[aria-pressed=true][href]:hover:after {
    background-color: var(--state-layer-hover-on-strong)
}

a.filter-chip--selected:not([disabled]):not([aria-disabled=true]):focus:after,
a.filter-chip--selected[href]:focus:after,
button.filter-chip[aria-pressed=true]:not([disabled]):not([aria-disabled=true]):focus:after,
button.filter-chip[aria-pressed=true][href]:focus:after {
    background-color: var(--state-layer-focus-on-strong)
}

a.filter-chip--selected:not([disabled]):not([aria-disabled=true]):active:after,
a.filter-chip--selected[href]:active:after,
button.filter-chip[aria-pressed=true]:not([disabled]):not([aria-disabled=true]):active:after,
button.filter-chip[aria-pressed=true][href]:active:after {
    background-color: var(--state-layer-pressed-on-strong)
}

button.filter-chip--animated[aria-pressed=true] {
    animation-duration: var(--motion-duration-medium-2);
    transition: color var(--motion-duration-instant) var(--motion-easing-standard)
}

button.filter-chip[aria-expanded=false]:active .filter-chip__trailing {
    animation: chevron-bounce-close var(--motion-duration-medium-1) var(--motion-easing-standard);
    rotate: 180deg
}

button.filter-chip[aria-expanded=false] .filter-chip__trailing {
    rotate: 0deg;
    transition: none
}

button.filter-chip[aria-expanded=true]:active .filter-chip__trailing {
    animation: chevron-bounce-open var(--motion-duration-medium-1) var(--motion-easing-standard) var(--motion-duration-short-1);
    rotate: 0deg
}

button.filter-chip[aria-expanded=true] .filter-chip__trailing {
    rotate: 180deg;
    transition: none
}

.filter-chip__text {
    overflow: hidden;
    padding: var(--spacing-75) 0;
    text-overflow: ellipsis;
    white-space: nowrap
}

.progress-spinner {
    animation: spin 1.5s linear infinite;
    animation-timing-function: cubic-bezier(.7, .2, .3, .73);
    display: inline-block;
    height: 24px;
    width: 24px
}

@keyframes spin {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(2turn)
    }
}

.progress-spinner>svg.icon.icon--20,
.progress-spinner>svg.icon.icon--24,
.progress-spinner>svg.icon.icon--30 {
    height: inherit;
    margin: 0;
    max-height: inherit;
    max-width: inherit;
    width: inherit
}

.progress-spinner--small {
    height: 20px;
    width: 20px
}

.progress-spinner--large {
    height: 30px;
    width: 30px
}

.fake-menu__items,
.menu__items {
    background-color: var( --menu-background-color, var(--color-background-primary));
    cursor: default
}

span.fake-menu,
span.menu {
    display: inline-block;
    vertical-align: bottom
}

span.fake-menu__items,
span.menu__items[role=menu] {
    display: inline-block
}

.fake-menu__items {
    list-style-type: none;
    margin: 0;
    padding: 0
}

.fake-menu__item>svg.icon--16,
.menu__item>svg.icon--16 {
    align-self: center;
    fill: currentColor;
    margin: 0 auto;
    opacity: 0;
    stroke: currentColor;
    stroke-width: 0
}

.fake-menu__item .badge,
.fake-menu__item>svg.icon--16:last-child,
.menu__item .badge,
.menu__item>svg.icon--16:last-child {
    margin-left: var(--spacing-100);
    margin-right: var(--spacing-100)
}

a.fake-menu__item {
    color: var(--menu-anchor-color, var(--color-foreground-primary));
    -webkit-text-decoration: none;
    text-decoration: none
}

button.fake-menu__item {
    font-size: inherit
}

a.fake-menu__item,
button.fake-menu__item,
div.menu__item[role^=menuitem] {
    background-color: initial;
    border-color: var( --menu-menuitem-border-color, var(--color-background-primary));
    border-style: solid;
    border-width: 1px;
    box-sizing: border-box;
    color: var( --menu-menuitem-foreground-color, var(--color-foreground-primary));
    display: inline-grid;
    font-family: inherit;
    grid-template-columns: auto auto;
    justify-content: space-between;
    padding: 8px 15px;
    width: 100%
}

a.fake-menu__item:not(:last-child),
button.fake-menu__item:not(:last-child),
div.menu__item[role^=menuitem]:not(:last-child) {
    margin-bottom: 1px
}

a.fake-menu__item:focus,
button.fake-menu__item:focus,
div.menu__item[role^=menuitem]:focus {
    outline-offset: -4px
}

a.fake-menu__item:hover,
button.fake-menu__item:hover,
div.menu__item[role^=menuitem]:hover {
    background-color: var(--color-state-primary-hover);
    color: var( --menu-menuitem-hover-foreground-color, var(--color-foreground-primary))
}

a.fake-menu__item:active,
button.fake-menu__item:active,
div.menu__item[role^=menuitem]:active {
    font-weight: 700
}

a.fake-menu__item:focus {
    -webkit-text-decoration: underline;
    text-decoration: underline
}

a.fake-menu__item[aria-current=page] svg.icon--16,
button.fake-menu__item[aria-current=page] svg.icon--16 {
    opacity: 1
}

a.fake-menu__item:not([href]),
button.fake-menu__item[disabled],
div.menu__item[role^=menuitem][aria-disabled=true] {
    background-color: unset;
    color: var( --menu-menuitem-disabled-foreground-color, var(--color-foreground-disabled));
    font-weight: unset
}

div.menu__item[role^=menuitem][aria-checked=true] svg.icon--16 {
    opacity: 1
}

a.fake-menu__item>span,
button.fake-menu__item>span,
div.menu__item[role^=menuitem]>span {
    flex: 0 0 auto;
    text-align: left;
    white-space: nowrap
}

a.fake-menu__item--badged,
button.fake-menu__item--badged,
div.menu__item--badged[role^=menuitem] {
    position: relative
}

a.fake-menu__item--badged span.badge,
button.fake-menu__item--badged span.badge,
div.menu__item--badged[role^=menuitem] span.badge {
    padding: 1px 5px;
    position: absolute;
    top: 0;
    z-index: 1
}

.menu__item[role=menuitemcheckbox][aria-checked=true] svg.icon--unchecked,
.menu__item[role=menuitemradio][aria-checked=true] svg.icon--unchecked {
    display: none
}

.menu__item[role=menuitemcheckbox][aria-checked=true] svg.icon--checked,
.menu__item[role=menuitemradio][aria-checked=true] svg.icon--checked {
    display: block
}

.menu__item[role=menuitemcheckbox] svg.icon--unchecked {
    color: var(--color-foreground-secondary);
    display: block;
    margin-right: var(--spacing-100)
}

.menu__item[role=menuitemcheckbox] svg.icon--checked {
    color: var(--color-foreground-primary);
    display: none;
    margin-right: var(--spacing-100)
}

.menu__item[role=menuitemradio] svg.icon--unchecked {
    color: var(--color-foreground-primary);
    display: block;
    margin-right: var(--spacing-100)
}

.menu__item[role=menuitemradio] svg.icon--checked {
    color: var(--color-foreground-primary);
    display: none;
    margin-right: var(--spacing-100)
}

.menu__items--scroll[role=menu] {
    overflow-y: scroll
}

.fake-menu__items--fix-width,
.menu__items--fix-width[role=menu] {
    width: 100%
}

.fake-menu__items--reverse,
.menu__items--reverse[role=menu] {
    right: 0
}

.fake-menu button.expand-btn--borderless,
.menu button.expand-btn--borderless {
    background-color: initial;
    border-color: transparent;
    padding-left: 0;
    vertical-align: initial
}

.fake-menu button.expand-btn--borderless:focus,
.menu button.expand-btn--borderless:focus {
    outline: none;
    -webkit-text-decoration: underline;
    text-decoration: underline
}

hr.menu__separator {
    border-color: var(--menu-separator-color, var(--color-stroke-subtle));
    border-style: solid;
    border-width: 1px
}

.menu__footer {
    align-items: center;
    background-color: var(--color-background-elevated);
    border: none;
    border-color: var(--color-stroke-subtle);
    border-top-style: solid;
    border-top-width: 1px;
    display: flex;
    justify-content: center;
    padding: var(--spacing-200)
}

.menu--filter div.menu__item[role^=menuitem] {
    justify-content: flex-start
}

div.menu__item[role^=menuitem]:focus:not(:focus-visible) {
    outline: none
}

.floating-label {
    position: relative
}

span.floating-label {
    display: inline-block
}

div.floating-label {
    display: block
}

label.floating-label__label {
    background-color: initial;
    color: var(--floating-label-color, var(--color-foreground-secondary));
    display: inline-block;
    left: 16px;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    text-overflow: ellipsis;
    top: 0;
    transform: scale(.75) translateY(2px);
    transform-origin: left;
    white-space: nowrap;
    width: calc(100% - 40px);
    z-index: 1
}

.floating-label--opaque label.floating-label__label {
    background-color: var( --floating-label-background-color, var(--color-background-secondary));
    padding-top: 3px;
    top: -3px;
    width: calc(100% - 40px)
}

label.floating-label__label--focus {
    color: var(--floating-label-focus-color, var(--color-foreground-primary))
}

.floating-label--opaque label.floating-label__label--focus {
    background-color: var( --floating-label-focus-background-color, var(--color-background-primary))
}

.floating-label--large label.floating-label__label {
    transform: scale(.75) translateY(3px)
}

label.floating-label__label--inline {
    font-size: var(--font-size-default);
    transform: translateY(12px)
}

.floating-label--large label.floating-label__label--inline {
    transform: translateY(16px)
}

label.floating-label__label--animate {
    transition: transform .3s ease, bottom .3s ease
}

label.floating-label__label--disabled {
    color: var( --floating-label-disabled-color, var(--color-foreground-disabled))
}

.floating-label--opaque label.floating-label__label--disabled {
    background-color: var( --floating-label-disabled-background-color, var(--color-background-secondary))
}

label.floating-label__label--invalid {
    color: var( --floating-label-invalid-color, var(--color-foreground-attention))
}

.floating-label .combobox__control>input,
.floating-label .textbox__control {
    padding-bottom: 2px;
    padding-top: 18px
}

.floating-label--large .combobox__control>input,
.floating-label--large .textbox__control {
    padding-bottom: 5px;
    padding-top: 23px
}

.floating-label .select select {
    line-height: 52px !important
}

.floating-label .select--large select {
    line-height: 60px !important
}

[dir=rtl] label.floating-label__label {
    left: auto;
    right: 16px;
    transform-origin: right
}

label.floating-label__label.floating-label__label--inline:has(+.textbox>:-webkit-autofill) {
    transform: scale(.75) translateY(2px)
}

label.floating-label__label.floating-label__label--inline:has(+.textbox>:autofill) {
    transform: scale(.75) translateY(2px)
}

.floating-label--large label.floating-label__label.floating-label__label--inline:has(+.textbox>:-webkit-autofill) {
    transform: scale(.75) translateY(3px)
}

.floating-label--large label.floating-label__label.floating-label__label--inline:has(+.textbox>:autofill) {
    transform: scale(.75) translateY(3px)
}

:root {
    --input-default-height: 40px;
    --input-large-height: 48px
}

.textbox {
    align-items: center;
    background-color: var( --textbox-background-color, var(--color-background-secondary));
    border-color: var(--textbox-border-color, var(--color-stroke-default));
    border-radius: var(--textbox-border-radius, var(--border-radius-50));
    border-style: solid;
    border-width: 1px;
    box-sizing: border-box;
    color: var( --textbox-foreground-color, var(--color-foreground-on-secondary));
    display: inline-flex;
    font-size: var(--font-size-default);
    gap: var(--spacing-100);
    overflow: hidden;
    position: relative;
    width: -moz-fit-content;
    width: fit-content
}

.textbox button.icon-btn {
    background-color: initial;
    padding: 0
}

.textbox--focus,
.textbox:has(>.textbox__control:focus):not(.textbox--readonly):not(:has(>.textbox__control[readonly])) {
    background-color: var( --textbox-focus-background-color, var(--color-background-primary));
    border-color: var(--textbox-focus-border-color, var(--color-stroke-strong));
    box-shadow: 0 0 0 1px var(--color-stroke-strong)
}

.textbox--readonly,
.textbox:has(>.textbox__control[readonly]) {
    background-color: initial;
    border: none
}

.textbox--disabled,
.textbox:has(>.textbox__control[disabled]) {
    border-color: var( --textbox-disabled-border-color, var(--color-background-disabled));
    color: var( --textbox-disabled-foreground-color, var(--color-foreground-disabled))
}

.textbox--invalid,
.textbox:has(>.textbox__control[aria-invalid=true]) {
    border-color: var( --textbox-invalid-border-color, var(--color-stroke-attention))
}

.textbox__control {
    background-color: initial;
    border: none;
    box-sizing: border-box;
    color: inherit
}

textarea.textbox__control {
    font-family: inherit;
    min-height: 200px;
    overflow: auto;
    padding: var(--spacing-200);
    resize: vertical;
    vertical-align: middle
}

input.textbox__control {
    font-family: inherit;
    padding: 0;
    vertical-align: middle
}

input.textbox__control:first-child:not([readonly]) {
    padding-left: var(--spacing-200)
}

input.textbox__control:last-child:not([readonly]) {
    padding-right: var(--spacing-200)
}

input.textbox__control,
textarea.textbox__control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    flex-grow: 1;
    font-size: 1em;
    height: 40px;
    margin: 0;
    outline: none
}

input.textbox__control[disabled],
textarea.textbox__control[disabled] {
    border-color: var( --textbox-disabled-border-color, var(--color-background-disabled));
    color: var( --textbox-disabled-foreground-color, var(--color-foreground-disabled))
}

input.textbox__control[disabled]::-webkit-input-placeholder,
textarea.textbox__control[disabled]::-webkit-input-placeholder {
    color: var( --textbox-disabled-placeholder-color, var(--color-foreground-ghost))
}

input.textbox__control[disabled]::-moz-placeholder,
textarea.textbox__control[disabled]::-moz-placeholder {
    color: var( --textbox-disabled-placeholder-color, var(--color-foreground-ghost))
}

input.textbox__control[disabled]:-ms-input-placeholder,
textarea.textbox__control[disabled]:-ms-input-placeholder {
    color: var( --textbox-disabled-placeholder-color, var(--color-foreground-ghost))
}

input.textbox__control[aria-invalid=true],
textarea.textbox__control[aria-invalid=true] {
    border-color: var( --textbox-invalid-foreground-color, var(--color-stroke-attention))
}

input.textbox__control::placeholder,
textarea.textbox__control::placeholder {
    color: var(--textbox-placeholder-color, var(--color-foreground-secondary));
    font-weight: 200;
    opacity: 1
}

input.textbox__control {
    height: calc(var(--input-default-height) - 2px)
}

.textbox--large input.textbox__control {
    height: calc(var(--input-large-height) - 2px)
}

.textbox .icon-btn>svg,
.textbox>svg {
    color: var(--textbox-icon-color, var(--color-foreground-secondary));
    display: inline-flex;
    height: 1lh;
    pointer-events: none;
    fill: var(--textbox-icon-color, var(--color-foreground-secondary))
}

.textbox>span:first-child,
.textbox>svg:first-child {
    flex-shrink: 0;
    margin-left: var(--spacing-200)
}

.textbox>span:last-child,
.textbox>svg:last-child {
    margin-right: var(--spacing-200)
}

.textbox .icon-btn:last-child {
    margin-left: calc(var(--spacing-100) * -1)
}

.textbox .icon-btn:first-child {
    margin-right: calc(var(--spacing-100) * -1)
}

input.textbox__control[readonly]:focus,
textarea.textbox__control[readonly]:focus {
    -webkit-text-decoration: underline;
    text-decoration: underline
}

.textbox--fluid,
.textbox--fluid .textbox__control {
    width: 100%
}

.confirm-dialog[role=dialog] {
    background-color: var(--dialog-scrim-color-show);
    bottom: 0;
    left: 0;
    -webkit-overflow-scrolling: touch;
    align-items: flex-start;
    justify-content: center;
    position: fixed;
    right: 0;
    top: 0;
    will-change: background-color;
    z-index: 100000
}

.confirm-dialog[role=dialog]:not([hidden]) {
    display: flex
}

.confirm-dialog__window {
    background-color: var( --dialog-window-background-color, var(--color-background-primary));
    border-radius: var(--lightbox-border-radius, var(--border-radius-100));
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    margin: auto;
    margin-left: var(--spacing-200);
    margin-right: var(--spacing-200);
    max-height: 90%;
    max-width: calc(100% - 32px);
    min-height: 55px;
    min-width: 208px;
    padding: var(--spacing-200);
    will-change: opacity, transform
}

.confirm-dialog__title {
    font-size: var(--font-size-large-1);
    font-weight: var(--font-weight-bold);
    line-height: 28px;
    margin: 0
}

.confirm-dialog__main {
    margin: var(--spacing-200) 0;
    min-height: var(--spacing-200)
}

.confirm-dialog__main>:first-child {
    margin-top: 0
}

.confirm-dialog__main>:last-child {
    margin-bottom: 0
}

.confirm-dialog__footer {
    text-align: right
}

a.confirm-dialog__confirm,
button.confirm-dialog__confirm {
    margin-left: var(--spacing-100)
}

.confirm-dialog--hide.confirm-dialog--mask-fade,
.confirm-dialog--hide.confirm-dialog--mask-fade-slow {
    transition: background-color var(--motion-duration-short-3) var(--motion-easing-continuous)
}

.confirm-dialog--hide .confirm-dialog__window--fade {
    transition: opacity var(--motion-duration-short-3) var(--motion-easing-continuous)
}

.confirm-dialog--hide .confirm-dialog__window--animate {
    transition: transform var(--motion-duration-medium-3) var(--motion-easing-soft-exit), opacity var(--motion-duration-short-3) var(--motion-easing-continuous)
}

.confirm-dialog--hide .confirm-dialog__window--animate>* {
    transition: opacity var(--motion-duration-short-2) var(--motion-easing-continuous)
}

.confirm-dialog--show.confirm-dialog--mask-fade,
.confirm-dialog--show.confirm-dialog--mask-fade-slow {
    transition: background-color var(--motion-duration-short-3) var(--motion-easing-continuous)
}

.confirm-dialog--show .confirm-dialog__window--fade {
    transition: opacity var(--motion-duration-short-3) var(--motion-easing-continuous)
}

.confirm-dialog--show .confirm-dialog__window--animate {
    transition: transform var(--motion-duration-medium-3) var(--motion-easing-standard), opacity var(--motion-duration-short-3) var(--motion-easing-continuous)
}

.confirm-dialog--show .confirm-dialog__window--animate>* {
    transition: opacity var(--motion-duration-medium-2) var(--motion-easing-continuous) var(--motion-duration-short-3)
}

.confirm-dialog--hide.confirm-dialog--hide,
.confirm-dialog--hide.confirm-dialog--show-init,
.confirm-dialog--show-init.confirm-dialog--hide,
.confirm-dialog--show-init.confirm-dialog--show-init {
    display: flex
}

.confirm-dialog--hide.confirm-dialog--mask-fade,
.confirm-dialog--hide.confirm-dialog--mask-fade-slow,
.confirm-dialog--show-init.confirm-dialog--mask-fade,
.confirm-dialog--show-init.confirm-dialog--mask-fade-slow {
    background-color: var(--dialog-scrim-color-hide)
}

.confirm-dialog--hide .confirm-dialog__window--animate,
.confirm-dialog--hide .confirm-dialog__window--animate>*,
.confirm-dialog--hide .confirm-dialog__window--fade,
.confirm-dialog--show-init .confirm-dialog__window--animate,
.confirm-dialog--show-init .confirm-dialog__window--animate>*,
.confirm-dialog--show-init .confirm-dialog__window--fade {
    opacity: 0
}

.confirm-dialog--hide-init.confirm-dialog--hide-init,
.confirm-dialog--hide-init.confirm-dialog--show,
.confirm-dialog--show.confirm-dialog--hide-init,
.confirm-dialog--show.confirm-dialog--show {
    display: flex
}

.confirm-dialog--hide-init.confirm-dialog--mask-fade,
.confirm-dialog--hide-init.confirm-dialog--mask-fade-slow,
.confirm-dialog--show.confirm-dialog--mask-fade,
.confirm-dialog--show.confirm-dialog--mask-fade-slow {
    background-color: var(--dialog-scrim-color-show)
}

.confirm-dialog--hide-init .confirm-dialog__window--animate,
.confirm-dialog--hide-init .confirm-dialog__window--animate>*,
.confirm-dialog--hide-init .confirm-dialog__window--fade,
.confirm-dialog--show .confirm-dialog__window--animate,
.confirm-dialog--show .confirm-dialog__window--animate>*,
.confirm-dialog--show .confirm-dialog__window--fade {
    opacity: 1
}

@media (prefers-reduced-motion) {
    .confirm-dialog--hide.confirm-dialog--mask-fade,
    .confirm-dialog--hide.confirm-dialog--mask-fade-slow {
        transition: background-color var(--motion-duration-short-3) var(--motion-easing-soft-exit)
    }
    .confirm-dialog--hide .confirm-dialog__window--animate,
    .confirm-dialog--hide .confirm-dialog__window--fade {
        transition: opacity var(--motion-duration-short-3) var(--motion-easing-soft-exit)
    }
    .confirm-dialog--hide .confirm-dialog__window--animate>* {
        transition: opacity var(--motion-duration-short-2) var(--motion-soft-exit)
    }
    .confirm-dialog--show.confirm-dialog--mask-fade,
    .confirm-dialog--show.confirm-dialog--mask-fade-slow {
        transition: background-color var(--motion-duration-medium-2) var(--motion-easing-soft-enter)
    }
    .confirm-dialog--show .confirm-dialog__window--animate,
    .confirm-dialog--show .confirm-dialog__window--fade {
        transition: opacity var(--motion-duration-medium-2) var(--motion-easing-soft-enter)
    }
    .confirm-dialog--show .confirm-dialog__window--animate>* {
        transition: opacity var(--motion-duration-medium-2) var(--motion-easing-soft-enter) var(--motion-duration-short-3)
    }
}

.confirm-dialog--hide-init .confirm-dialog__window--animate,
.confirm-dialog--show .confirm-dialog__window--animate {
    transform: scale(1)
}

.confirm-dialog--hide .confirm-dialog__window--animate,
.confirm-dialog--show-init .confirm-dialog__window--animate {
    transform: scale(.75)
}

@media (prefers-reduced-motion) {
    .confirm-dialog--hide .confirm-dialog__window--animate,
    .confirm-dialog--hide-init .confirm-dialog__window--animate,
    .confirm-dialog--show .confirm-dialog__window--animate,
    .confirm-dialog--show-init .confirm-dialog__window--animate {
        transform: scale(1)
    }
}

@media (min-width: 768px) {
    .confirm-dialog__window {
        max-width: calc(88% - var(--spacing-400))
    }
}

@media (min-width: 1024px) {
    .confirm-dialog__window {
        max-width: var(--dialog-lightbox-max-width)
    }
}

span.listbox-button--fluid,
span.listbox-button--fluid .expand-btn,
span.listbox-button--fluid .btn {
    width: 100%
}

div.listbox-button__listbox {
    background-color: var(--listbox-button-listbox-background-color, var(--color-background-elevated));
    border-radius: var(--listbox-button-listbox-border-radius, var(--border-radius-50));
    box-shadow: var(--bubble-shadow);
    box-sizing: border-box;
    display: none;
    left: 0;
    max-height: 400px;
    min-width: 100%;
    overflow-y: auto;
    position: absolute;
    top: calc(100% + 4px);
    width: auto;
    z-index: 2
}

button.expand-btn[aria-expanded=true]~div.listbox-button__listbox,
.listbox-button button.btn[aria-expanded=true]~div.listbox-button__listbox {
    display: block
}

.listbox-button button[aria-invalid=true] {
    border-color: var(--listbox-button-invalid-border-color, var(--color-stroke-attention))
}

.listbox-button:not(.listbox-button--error) button:not([disabled]):not([aria-disabled=true]):not([aria-invalid=true]).btn--form {
    border-color: var(--listbox-button-border-color, var(--color-stroke-default))
}

.listbox-button:not(.listbox-button--error) button:not([disabled]):not([aria-disabled=true]):not([aria-invalid=true]).btn--form:hover,
.listbox-button:not(.listbox-button--error) button:not([disabled]):not([aria-disabled=true]):not([aria-invalid=true]).btn--form:focus,
.listbox-button:not(.listbox-button--error) button:not([disabled]):not([aria-disabled=true]):not([aria-invalid=true]).btn--form:active {
    border-color: inherit
}

.listbox-button button.expand-btn--borderless,
.listbox-button button.btn--borderless {
    background-color: transparent;
    border-color: transparent;
    padding-left: 0;
    vertical-align: initial
}

.listbox-button button.expand-btn--borderless:focus,
.listbox-button button.btn--borderless:focus {
    outline: none;
    -webkit-text-decoration: underline;
    text-decoration: underline
}

.listbox-button button.expand-btn--borderless[aria-expanded=true]~.listbox-button__listbox,
.listbox-button button.btn--borderless[aria-expanded=true]~.listbox-button__listbox {
    top: 41px
}

.listbox-button.listbox-button--form button {
    background-color: var(--listbox-button-background-color, var(--color-background-secondary));
    border-color: var(--listbox-button-border-color, var(--color-stroke-default));
    color: var(--listbox-button-foreground-color, var(--color-foreground-primary))
}

.listbox-button.listbox-button--form button[disabled],
.listbox-button.listbox-button--form button[aria-disabled=true] {
    border-color: var(--listbox-button-disabled-border-color, var(--color-background-disabled));
    color: var(--listbox-button-disabled-foreground-color, var(--color-foreground-disabled))
}

.listbox-button.listbox-button--form button:focus {
    background-color: var(--combobox-textbox-focus-background-color, var(--color-background-primary))
}

.listbox-button.listbox-button--form button[aria-invalid=true] {
    border-color: var(--listbox-button-invalid-border-color, var(--color-stroke-attention))
}

.listbox-button.listbox-button--error button:not(.btn--borderless) {
    background-color: var(--listbox-button-background-color, var(--color-background-secondary));
    border-color: var(--listbox-button-border-color, var(--color-stroke-attention))
}

.listbox-button.listbox-button--error button .btn__label,
.listbox-button.listbox-button--error button .btn__floating-label {
    color: var(--listbox-button-label-color, var(--color-foreground-attention))
}

.listbox-button__option svg.icon {
    align-self: center;
    fill: currentColor;
    margin: 0 auto;
    opacity: 0;
    stroke: currentColor;
    stroke-width: 0;
    -webkit-margin-start: var(--spacing-100);
    margin-left: var(--spacing-100)
}

.listbox-button__description {
    color: var(--listbox-button-subtitle-color, var(--color-foreground-secondary));
    font-size: var(--font-size-small);
    font-weight: 400;
    grid-column: 1 2;
    grid-row: 2
}

div.listbox-button__option[role=option] {
    background-color: transparent;
    border-style: solid;
    border-width: 1px;
    box-sizing: border-box;
    display: inline-grid;
    font-family: inherit;
    grid-template-columns: auto auto;
    justify-content: space-between;
    padding: 8px 15px;
    width: 100%;
    border-color: var(--listbox-option-border-color, var(--color-background-primary));
    color: var(--listbox-option-foreground-color, var(--color-foreground-primary));
    cursor: default
}

div.listbox-button__option[role=option]:hover {
    background-color: var(--color-state-primary-hover);
    color: var(--listbox-option-hover-foreground-color, var(--color-foreground-primary))
}

div.listbox-button__option[role=option]:disabled,
div.listbox-button__option[role=option][aria-disabled=true] {
    color: var(--listbox-option-disabled-foreground-color, var(--color-foreground-disabled));
    background-color: unset;
    font-weight: unset
}

div.listbox-button__option[role=option]:first-child {
    border-top-left-radius: var(--listbox-button-listbox-border-radius, var(--border-radius-50));
    border-top-right-radius: var(--listbox-button-listbox-border-radius, var(--border-radius-50))
}

div.listbox-button__option[role=option]:last-child {
    border-bottom-left-radius: var(--listbox-button-listbox-border-radius, var(--border-radius-50));
    border-bottom-right-radius: var(--listbox-button-listbox-border-radius, var(--border-radius-50))
}

div.listbox-button__option[role=option]:disabled .listbox-button__description,
div.listbox-button__option[role=option][aria-disabled=true] .listbox-button__description {
    color: var(--listbox-option-disabled-foreground-color, var(--color-foreground-disabled));
    background-color: unset;
    font-weight: unset
}

button.btn,
a.fake-btn {
    border: 1px solid;
    box-sizing: border-box;
    font-family: inherit;
    margin: 0;
    text-align: center;
    -webkit-text-decoration: none;
    text-decoration: none;
    vertical-align: bottom;
    background-color: transparent;
    border-radius: var(--btn-border-radius, 20px);
    color: inherit;
    display: inline-block;
    font-size: var(--font-size-default);
    min-height: 40px;
    min-width: 88px;
    padding: 9.5px 20px
}

button.btn--fixed-height,
a.fake-btn--fixed-height,
button.btn--truncated,
a.fake-btn--truncated {
    height: 40px
}

button.btn:focus:not(:focus-visible),
a.fake-btn:focus:not(:focus-visible) {
    outline: none
}

button.btn[disabled],
button.btn[aria-disabled=true] {
    border-color: var(--expand-btn-disabled-border-color, var(--color-stroke-disabled));
    color: var(--expand-btn-disabled-foreground-color, var(--color-foreground-disabled))
}

button.btn--borderless,
a.fake-btn--borderless {
    border-color: transparent;
    min-width: auto;
    padding-left: 0;
    vertical-align: initial
}

button.btn--borderless:focus,
a.fake-btn--borderless:focus,
button.btn--borderless:hover,
a.fake-btn--borderless:hover {
    background-color: transparent;
    outline: none;
    -webkit-text-decoration: underline;
    text-decoration: underline
}

button.btn--borderless[disabled],
a.fake-btn--borderless[disabled],
button.btn--borderless[aria-disabled=true],
a.fake-btn--borderless[aria-disabled=true] {
    border-color: transparent
}

button.btn--borderless.btn--destructive,
a.fake-btn--borderless.btn--destructive {
    color: var(--btn-secondary-destructive-foreground-color, var(--color-foreground-attention))
}

button.btn--slim,
a.fake-btn--slim {
    height: 40px;
    min-width: auto;
    padding-left: var(--spacing-100);
    padding-right: var(--spacing-100)
}

a.fake-btn:visited {
    color: inherit
}

button.btn--fluid,
a.fake-btn--fluid {
    width: 100%
}

.btn__cell,
.fake-btn__cell {
    align-items: center;
    display: flex;
    width: 100%;
    justify-content: center
}

.btn__cell--fixed-height,
.fake-btn__cell--fixed-height {
    display: inline-flex
}

.btn__cell--fixed-height>svg,
.fake-btn__cell--fixed-height>svg {
    align-self: baseline;
    max-width: calc(100% - 32px)
}

.btn__cell--truncated,
.fake-btn__cell--truncated {
    display: inline-flex
}

.btn__cell--truncated>svg,
.fake-btn__cell--truncated>svg {
    align-self: baseline;
    max-width: calc(100% - 32px)
}

button.btn--form .btn__cell,
a.fake-btn--form .fake-btn__cell,
button.btn--borderless .btn__cell,
a.fake-btn--borderless .fake-btn__cell {
    justify-content: space-between
}

button.btn svg.icon,
a.fake-btn svg.icon {
    align-self: center
}

button.btn svg.icon:first-child,
a.fake-btn svg.icon:first-child {
    -webkit-margin-end: 8px;
    margin-right: 8px
}

button.btn svg.icon:last-child,
a.fake-btn svg.icon:last-child {
    -webkit-margin-start: 8px;
    margin-left: 8px
}

button.btn svg.icon:only-child,
a.fake-btn svg.icon:only-child {
    margin: 0
}

button.btn__cell--fixed-height svg.icon,
a.fake-btn__cell--fixed-height svg.icon {
    align-self: center;
    height: 1rem;
    overflow: visible;
    width: 1rem
}

button.btn--primary,
a.fake-btn--primary {
    background-color: var(--btn-primary-background-color, var(--color-background-accent));
    border-color: var(--btn-primary-border-color, var(--color-stroke-accent));
    color: var(--btn-primary-foreground-color, var(--color-foreground-on-accent));
    font-weight: 700
}

a.fake-btn--primary {
    outline-color: var(--color-foreground-primary)
}

a.fake-btn--primary:visited {
    color: var(--btn-primary-foreground-color, var(--color-foreground-on-accent))
}

button.btn--primary:not([disabled]):not([aria-disabled=true]):focus,
a.fake-btn--primary[href]:focus,
button.btn--primary:not([disabled]):not([aria-disabled=true]):hover,
a.fake-btn--primary[href]:hover {
    background-blend-mode: multiply;
    filter: brightness(96%)
}

button.btn--primary:not([disabled]):not([aria-disabled=true]):active,
a.fake-btn--primary[href]:active {
    filter: brightness(92%)
}

button.btn--primary.btn--destructive,
a.fake-btn--primary.fake-btn--destructive {
    background-color: var(--btn-primary-destructive-background-color, var(--color-background-attention));
    border-color: var(--btn-primary-destructive-border-color, var(--color-stroke-attention));
    color: var(--btn-primary-destructive-foreground-color, var(--color-foreground-on-attention));
    font-weight: 700
}

button.btn--primary.btn--destructive[disabled],
button.btn--primary.btn--destructive[aria-disabled=true] {
    background-color: var(--btn-primary-destructive-disabled-background, var(--color-background-disabled));
    border-color: var(--btn-primary-destructive-disabled-border, var(--color-stroke-disabled))
}

button.btn--primary.btn--destructive:not([disabled]):not([aria-disabled=true]):focus,
a.fake-btn--primary.fake-btn--destructive[href]:focus,
button.btn--primary.btn--destructive:not([disabled]):not([aria-disabled=true]):hover,
a.fake-btn--primary.fake-btn--destructive[href]:hover {
    background-color: var(--color-state-attention-hover)
}

button.btn--primary.btn--destructive:not([disabled]):not([aria-disabled=true]):active,
a.fake-btn--primary.fake-btn--destructive[href]:active {
    background-color: var(--color-state-attention-active)
}

button.btn .progress-spinner {
    height: 24px;
    margin: -4px 0;
    width: 24px
}

button.btn--form .progress-spinner {
    margin-left: auto;
    margin-right: auto
}

button.btn--primary .progress-spinner {
    --color-spinner-icon-background: var(--color-background-primary);
    --color-spinner-icon-foreground: #8fa3f8
}

button.btn--primary.btn--destructive .progress-spinner {
    --color-spinner-icon-background: var(--color-foreground-on-accent);
    --color-spinner-icon-foreground: #ec7089
}

button.btn[aria-expanded=true] svg.icon--chevron-down-12,
a.fake-btn[aria-expanded=true] svg.icon--chevron-down-12 {
    transform: rotate(180deg)
}

button.btn--large svg.icon,
a.fake-btn--large svg.icon {
    max-height: 22px
}

button.btn--small svg.icon,
a.fake-btn--small svg.icon {
    max-height: 20px
}

button.btn--primary[disabled],
button.btn--primary[aria-disabled=true] {
    background-color: var(--btn-primary-disabled-background-color, var(--color-foreground-disabled));
    border-color: var(--btn-primary-disabled-border-color, var(--color-foreground-disabled));
    color: var(--btn-primary-foreground-color, var(--color-foreground-on-accent))
}

button.btn--primary[disabled] svg.icon,
button.btn--primary[aria-disabled=true] svg.icon {
    fill: var(--btn-primary-disabled-foreground-color, var(--color-background-primary))
}

a.fake-btn--primary:not([href]),
a.fake-btn--primary[aria-disabled=true] {
    background-color: var(--btn-primary-disabled-background-color, var(--color-foreground-disabled));
    border-color: var(--btn-primary-disabled-border-color, var(--color-foreground-disabled))
}

button.btn--secondary,
a.fake-btn--secondary {
    background-color: var(--btn-secondary-background-color, transparent);
    border-color: var(--btn-secondary-border-color, var(--color-stroke-accent));
    color: var(--btn-secondary-foreground-color, var(--color-foreground-accent))
}

a.fake-btn--secondary:visited {
    color: var(--btn-secondary-foreground-color, var(--color-blue-4))
}

button.btn--secondary:not([disabled]):not([aria-disabled=true]):active,
a.fake-btn--secondary[href]:active {
    background-color: var(--color-state-primary-active);
    border-color: var(--color-state-active-foreground-on-secondary);
    color: var(--color-state-active-foreground-on-secondary)
}

button.btn--secondary:not([disabled]):not([aria-disabled=true]):hover,
a.fake-btn--secondary[href]:hover,
button.btn--secondary:not([disabled]):not([aria-disabled=true]):focus,
a.fake-btn--secondary[href]:focus {
    background-color: var(--color-state-primary-hover);
    border-color: var(--color-state-hover-foreground-on-secondary);
    color: var(--color-state-hover-foreground-on-secondary)
}

button.btn--secondary.btn--destructive,
a.fake-btn--secondary.fake-btn--destructive {
    background-color: var(--btn-secondary-destructive-background-color, transparent);
    border-color: var(--btn-secondary-destructive-border-color, var(--color-stroke-attention));
    color: var(--btn-secondary-destructive-foreground-color, var(--color-foreground-attention))
}

button.btn--secondary.btn--destructive:not([disabled]):not([aria-disabled=true]):hover,
a.fake-btn--secondary.fake-btn--destructive[href]:hover,
button.btn--secondary.btn--destructive:not([disabled]):not([aria-disabled=true]):focus,
a.fake-btn--secondary.fake-btn--destructive[href]:focus {
    background-color: var(--color-state-primary-hover);
    border-color: var(--color-state-hover-foreground-on-secondary-desctructive);
    color: var(--color-state-hover-foreground-on-secondary-desctructive)
}

button.btn--secondary.btn--destructive:not([disabled]):not([aria-disabled=true]):active,
a.fake-btn--secondary.fake-btn--destructive[href]:active {
    background-color: var(--color-state-primary-active);
    border-color: var(--color-state-active-foreground-on-secondary-desctructive);
    color: var(--color-state-active-foreground-on-secondary-desctructive)
}

button.btn--secondary.btn--destructive .progress-spinner {
    --color-spinner-icon-background: #f39fb0;
    --color-spinner-icon-foreground: #e0103a
}

button.btn--secondary[disabled],
button.btn--secondary[aria-disabled=true] {
    background-color: var(--btn-secondary-disabled-background-color, var(--color-background-primary));
    border-color: var(--btn-secondary-disabled-border-color, var(--color-stroke-disabled));
    color: var(--btn-secondary-disabled-foreground-color, var(--color-background-disabled))
}

button.btn--secondary[disabled] svg.icon,
button.btn--secondary[aria-disabled=true] svg.icon {
    fill: var(--btn-secondary-disabled-foreground-color, var(--color-foreground-disabled))
}

a.fake-btn--secondary:not([href]),
a.fake-btn--secondary[aria-disabled=true] {
    border-color: var(--btn-secondary-disabled-border-color, var(--color-background-disabled));
    color: var(--btn-secondary-disabled-foreground-color, var(--color-background-disabled))
}

button.btn--tertiary,
a.fake-btn--tertiary {
    border-color: var(--btn-tertiary-border-color, var(--color-stroke-default))
}

button.btn--tertiary:not([disabled]):not([aria-disabled=true]):focus,
a.fake-btn--tertiary[href]:focus,
button.btn--tertiary:not([disabled]):not([aria-disabled=true]):hover,
a.fake-btn--tertiary[href]:hover {
    background-color: var(--color-state-secondary-hover)
}

button.btn--tertiary:not([disabled]):not([aria-disabled=true]):active,
a.fake-btn--tertiary[href]:active {
    background-color: var(--color-state-secondary-active)
}

button.btn--tertiary[disabled],
button.btn--tertiary[aria-disabled=true]:not([aria-live=polite][aria-disabled=true]),
a.fake-btn--tertiary:not([href]) {
    color: var(--btn-tertiary-disabled-foreground-color, var(--color-background-disabled))
}

button.btn--tertiary.btn--destructive,
a.fake-btn--tertiary.fake-btn--destructive {
    border-color: var(--btn-tertiary-destructive-foreground-color, var(--color-stroke-subtle))
}

button.btn--tertiary.btn--destructive:not([disabled]):not([aria-disabled=true]):focus,
a.fake-btn--tertiary.fake-btn--destructive[href]:focus,
button.btn--tertiary.btn--destructive:not([disabled]):not([aria-disabled=true]):hover,
a.fake-btn--tertiary.fake-btn--destructive[href]:hover {
    background-color: var(--color-state-secondary-hover)
}

button.btn--tertiary.btn--destructive:not([disabled]):not([aria-disabled=true]):active,
a.fake-btn--tertiary.fake-btn--destructive[href]:active {
    background-color: var(--color-state-secondary-active)
}

button.btn--tertiary.btn--destructive[disabled],
button.btn--tertiary.btn--destructive[aria-disabled=true] {
    color: var(--btn-tertiary-destructive-disabled-foreground-color, var(--color-foreground-disabled))
}

button.btn--tertiary.btn--destructive .progress-spinner {
    --color-spinner-icon-background: #ee9aab;
    --color-spinner-icon-foreground: #e0103a
}

button.btn--large,
a.fake-btn--large {
    border-radius: var(--btn-border-radius, 24px);
    font-size: var(--font-size-medium);
    min-height: 48px;
    padding: 13px 20px
}

button.btn--small,
a.fake-btn--small {
    border-radius: var(--btn-border-radius, 16px);
    font-size: var(--font-size-default);
    min-height: 32px;
    padding: 6px 16px
}

button.btn--form,
a.fake-btn--form {
    border-color: inherit;
    border-radius: var(--expand-btn-border-radius, var(--border-radius-50));
    max-width: 100%
}

button.btn--form:not([disabled]):not([aria-disabled=true]):hover,
a.fake-btn--form:not([href]):hover,
button.btn--form:not([disabled]):not([aria-disabled=true]):focus,
a.fake-btn--form:not([href]):focus {
    background-color: var(--color-state-primary-hover)
}

button.btn--form:not([disabled]):not([aria-disabled=true]):active,
a.fake-btn--form:not([href]):active {
    background-color: var(--color-state-primary-active)
}

button.btn--form.btn--large {
    padding: 13px 20px
}

button.btn--form.btn--small {
    padding: 6px 16px
}

button.btn--transparent,
a.fake-btn--transparent {
    background-color: transparent
}

button.btn--transparent:hover,
a.fake-btn--transparent:hover,
button.btn--transparent:focus,
a.fake-btn--transparent:focus {
    background-color: transparent
}

button.btn--fixed-height,
a.fake-btn--fixed-height {
    padding-top: calc(21.5px - .75em)
}

button.btn--large-fixed-height,
a.fake-btn--large-fixed-height {
    height: 48px;
    min-height: 48px;
    padding-top: calc(27px - .75em)
}

button.btn--truncated,
a.fake-btn--truncated,
button.btn--truncated span,
a.fake-btn--truncated span {
    line-height: 1.4em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

button.btn--large-truncated,
a.fake-btn--large-truncated {
    font-size: var(--font-size-medium);
    height: 48px;
    min-height: 48px;
    padding: 13px 20px
}

button.btn--large-truncated,
a.fake-btn--large-truncated,
button.btn--large-truncated span,
a.fake-btn--large-truncated span {
    line-height: 1.4em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

button.btn--split-start,
a.fake-btn--split-start {
    border-radius: 24px 0 0 24px
}

button.btn--split-end,
a.fake-btn--split-end {
    border-radius: 0 24px 24px 0;
    margin-left: -1px;
    min-width: 40px;
    padding-left: 8px;
    padding-right: 8px
}

button.btn.btn--tertiary.btn--split-end,
a.fake-btn.fake-btn--tertiary.fake-btn--split-end {
    margin-left: -2px
}

button.btn.btn--primary.btn--split-end,
a.fake-btn.fake-btn--primary.fake-btn--split-end {
    border-left-color: var(--btn-primary-border-split-color, var(--color-background-primary))
}

button.btn.btn--primary.btn--split-end:hover,
a.fake-btn.fake-btn--primary.fake-btn--split-end:hover,
button.btn.btn--primary.btn--split-end:focus,
a.fake-btn.fake-btn--primary.fake-btn--split-end:focus {
    border-left-color: var(--btn-primary-border-split-color, var(--color-background-primary))
}

button.btn--floating-label {
    padding-bottom: 0;
    padding-top: 0
}

button.btn--floating-label .btn__text {
    min-height: 19px;
    padding-bottom: 2px;
    padding-top: 17px
}

button.btn--floating-label .btn__floating-label {
    align-self: flex-start;
    display: inline-block;
    overflow: hidden;
    padding-bottom: 2px;
    padding-top: 17px;
    pointer-events: none;
    position: absolute;
    text-align: left;
    text-overflow: ellipsis;
    transform: scale(.75) translateY(-18px);
    transform-origin: left;
    white-space: nowrap;
    width: calc(100% - 24px);
    z-index: 1
}

button.btn--floating-label .btn__floating-label--animate {
    transition: transform .3s cubic-bezier(.25, .1, .25, 1), bottom .3s cubic-bezier(.25, .1, .25, 1)
}

button.btn--floating-label .btn__floating-label--inline {
    font-size: .875rem;
    position: unset;
    transform: translateY(-6px)
}

[dir=rtl] button.btn--split-start,
[dir=rtl] a.fake-btn--split-start {
    border-radius: 0 24px 24px 0
}

[dir=rtl] button.btn--split-end,
[dir=rtl] a.fake-btn--split-end {
    border-radius: 24px 0 0 24px;
    margin-left: inherit;
    margin-right: -1px
}

[dir=rtl] button.btn.btn--tertiary.btn--split-end,
[dir=rtl] a.fake-btn.fake-btn--tertiary.fake-btn--split-end {
    margin-right: -2px
}

[dir=rtl] button.btn.btn--primary.btn--split-end,
[dir=rtl] a.fake-btn.fake-btn--primary.fake-btn--split-end {
    border-left-color: var(--btn-primary-border-color, var(--color-stroke-accent));
    border-right-color: var(--primary-border-split-color, var(--color-stroke-subtle))
}

[dir=rtl] button.btn.btn--primary.btn--split-end:hover,
[dir=rtl] a.fake-btn.fake-btn--primary.fake-btn--split-end:hover,
[dir=rtl] button.btn.btn--primary.btn--split-end:focus,
[dir=rtl] a.fake-btn.fake-btn--primary.fake-btn--split-end:focus {
    border-left-color: var(--btn-primary-border-color, var(--color-stroke-accent));
    border-right-color: var(--primary-border-split-color, var(--color-stroke-subtle))
}

svg.icon--add-16 {
    height: 16px;
    width: 16px
}

svg.icon--add-24 {
    height: 24px;
    width: 24px
}

svg.icon--add-image-24 {
    height: 24px;
    width: 24px
}

svg.icon--afterpay-12-colored {
    height: 12px;
    width: 20px
}

svg.icon--afterpay-18-colored {
    height: 18px;
    width: 30px
}

svg.icon--afterpay-24-colored {
    height: 24px;
    width: 38px
}

svg.icon--afterpay-32-colored {
    height: 32px;
    width: 50px
}

svg.icon--ai-16 {
    height: 16px;
    width: 16px
}

svg.icon--ai-20 {
    height: 20px;
    width: 20px
}

svg.icon--ai-24 {
    height: 24px;
    width: 24px
}

svg.icon--ai-filled-16 {
    height: 16px;
    width: 16px
}

svg.icon--ai-filled-20 {
    height: 20px;
    width: 20px
}

svg.icon--ai-filled-24 {
    height: 24px;
    width: 24px
}

svg.icon--ai-spectrum-16-colored {
    height: 16px;
    width: 16px
}

svg.icon--ai-spectrum-20-colored {
    height: 20px;
    width: 20px
}

svg.icon--ai-spectrum-24-colored {
    height: 24px;
    width: 24px
}

svg.icon--ai-spectrum-filled-16-colored {
    height: 16px;
    width: 16px
}

svg.icon--ai-spectrum-filled-20-colored {
    height: 20px;
    width: 20px
}

svg.icon--ai-spectrum-filled-24-colored {
    height: 24px;
    width: 24px
}

svg.icon--ai-spectrum-thin-16-colored {
    height: 16px;
    width: 16px
}

svg.icon--ai-thin-16 {
    height: 16px;
    width: 16px
}

svg.icon--amex-12-colored {
    height: 12px;
    width: 20px
}

svg.icon--amex-18-colored {
    height: 18px;
    width: 30px
}

svg.icon--amex-24-colored {
    height: 24px;
    width: 38px
}

svg.icon--amex-32-colored {
    height: 32px;
    width: 50px
}

svg.icon--apple-pay-12-colored {
    height: 12px;
    width: 20px
}

svg.icon--apple-pay-18-colored {
    height: 18px;
    width: 30px
}

svg.icon--apple-pay-24-colored {
    height: 24px;
    width: 38px
}

svg.icon--apple-pay-32-colored {
    height: 32px;
    width: 50px
}

svg.icon--archive-16 {
    height: 16px;
    width: 16px
}

svg.icon--archive-24 {
    height: 24px;
    width: 24px
}

svg.icon--arrow-left-12 {
    height: 12px;
    width: 12px
}

svg.icon--arrow-left-16 {
    height: 16px;
    width: 16px
}

svg.icon--arrow-left-20 {
    height: 20px;
    width: 20px
}

svg.icon--arrow-left-24 {
    height: 24px;
    width: 24px
}

svg.icon--arrow-right-12 {
    height: 12px;
    width: 12px
}

svg.icon--arrow-right-16 {
    height: 16px;
    width: 16px
}

svg.icon--arrow-right-20 {
    height: 20px;
    width: 20px
}

svg.icon--arrow-right-24 {
    height: 24px;
    width: 24px
}

svg.icon--arrows-3d-16 {
    height: 16px;
    width: 16px
}

svg.icon--arrows-3d-24 {
    height: 24px;
    width: 24px
}

svg.icon--arrows-3d-filled-64-colored {
    height: 64px;
    width: 64px
}

svg.icon--arrows-expand-16 {
    height: 24px;
    width: 24px
}

svg.icon--arrows-expand-24 {
    height: 16px;
    width: 16px
}

svg.icon--article-16 {
    height: 16px;
    width: 16px
}

svg.icon--article-24 {
    height: 24px;
    width: 24px
}

svg.icon--attention-16 {
    height: 16px;
    width: 16px
}

svg.icon--attention-24 {
    height: 24px;
    width: 24px
}

svg.icon--attention-64 {
    height: 64px;
    width: 64px
}

svg.icon--attention-filled-16 {
    height: 16px;
    width: 16px
}

svg.icon--attention-filled-24 {
    height: 24px;
    width: 24px
}

svg.icon--atv-16 {
    height: 16px;
    width: 16px
}

svg.icon--atv-24 {
    height: 24px;
    width: 24px
}

svg.icon--audio-high-16 {
    height: 16px;
    width: 16px
}

svg.icon--audio-low-16 {
    height: 16px;
    width: 16px
}

svg.icon--audio-off-16 {
    height: 16px;
    width: 16px
}

svg.icon--authenticity-guarantee-16 {
    height: 16px;
    width: 16px
}

svg.icon--authenticity-guarantee-24 {
    height: 24px;
    width: 24px
}

svg.icon--auto-adjust-24 {
    height: 24px;
    width: 24px
}

svg.icon--background-removal-24 {
    height: 24px;
    width: 24px
}

svg.icon--bank-16 {
    height: 16px;
    width: 16px
}

svg.icon--bank-24 {
    height: 24px;
    width: 24px
}

svg.icon--bank-64 {
    height: 64px;
    width: 64px
}

svg.icon--bank-account-12-colored {
    height: 12px;
    width: 20px
}

svg.icon--bank-account-18-colored {
    height: 18px;
    width: 30px
}

svg.icon--bank-account-24-colored {
    height: 24px;
    width: 38px
}

svg.icon--bank-account-32-colored {
    height: 32px;
    width: 50px
}

svg.icon--bids-24 {
    height: 24px;
    width: 24px
}

svg.icon--bids-64 {
    height: 64px;
    width: 64px
}

svg.icon--boat-16 {
    height: 16px;
    width: 16px
}

svg.icon--boat-24 {
    height: 24px;
    width: 24px
}

svg.icon--book-16 {
    height: 16px;
    width: 16px
}

svg.icon--book-24 {
    height: 24px;
    width: 24px
}

svg.icon--bookmark-16 {
    height: 16px;
    width: 16px
}

svg.icon--bookmark-24 {
    height: 24px;
    width: 24px
}

svg.icon--bookmark-filled-16 {
    height: 16px;
    width: 16px
}

svg.icon--bookmark-filled-24 {
    height: 24px;
    width: 24px
}

svg.icon--brand-authorized-seller-16 {
    height: 16px;
    width: 16px
}

svg.icon--brand-authorized-seller-24 {
    height: 24px;
    width: 24px
}

svg.icon--brightness-16 {
    height: 16px;
    width: 16px
}

svg.icon--brightness-20 {
    height: 20px;
    width: 20px
}

svg.icon--brightness-24 {
    height: 24px;
    width: 24px
}

svg.icon--calendar-16 {
    height: 16px;
    width: 16px
}

svg.icon--calendar-24 {
    height: 24px;
    width: 24px
}

svg.icon--calendar-64 {
    height: 64px;
    width: 64px
}

svg.icon--camera-16 {
    height: 16px;
    width: 16px
}

svg.icon--camera-24 {
    height: 24px;
    width: 24px
}

svg.icon--camera-64 {
    height: 64px;
    width: 64px
}

svg.icon--car-16 {
    height: 16px;
    width: 16px
}

svg.icon--car-24 {
    height: 24px;
    width: 24px
}

svg.icon--car-brake-16 {
    height: 16px;
    width: 16px
}

svg.icon--car-brake-24 {
    height: 24px;
    width: 24px
}

svg.icon--carryon-24 {
    height: 24px;
    width: 24px
}

svg.icon--cart-16 {
    height: 16px;
    width: 16px
}

svg.icon--cart-20 {
    height: 20px;
    width: 20px
}

svg.icon--cart-24 {
    height: 24px;
    width: 24px
}

svg.icon--cart-64 {
    height: 64px;
    width: 64px
}

svg.icon--categories-16 {
    height: 16px;
    width: 16px
}

svg.icon--categories-24 {
    height: 24px;
    width: 24px
}

svg.icon--cb-12-colored {
    height: 12px;
    width: 20px
}

svg.icon--cb-18-colored {
    height: 18px;
    width: 30px
}

svg.icon--cb-24-colored {
    height: 24px;
    width: 38px
}

svg.icon--cb-32-colored {
    height: 32px;
    width: 50px
}

svg.icon--certified-recycled-16 {
    height: 16px;
    width: 16px
}

svg.icon--certified-recycled-24 {
    height: 24px;
    width: 24px
}

svg.icon--chair-16 {
    height: 16px;
    width: 16px
}

svg.icon--chair-24 {
    height: 24px;
    width: 24px
}

svg.icon--chat-16 {
    height: 16px;
    width: 16px
}

svg.icon--chat-24 {
    height: 24px;
    width: 24px
}

svg.icon--chat-64 {
    height: 64px;
    width: 64px
}

svg.icon--check-in-24 {
    height: 24px;
    width: 24px
}

svg.icon--checkbox-checked-18 {
    height: 18px;
    width: 18px
}

svg.icon--checkbox-checked-24 {
    height: 24px;
    width: 24px
}

svg.icon--checkbox-mixed-18 {
    height: 18px;
    width: 18px
}

svg.icon--checkbox-mixed-24 {
    height: 24px;
    width: 24px
}

svg.icon--checkbox-unchecked-18 {
    height: 18px;
    width: 18px
}

svg.icon--checkbox-unchecked-24 {
    height: 24px;
    width: 24px
}

svg.icon--checkmark-24 {
    height: 24px;
    width: 24px
}

svg.icon--chevron-down-12 {
    height: 12px;
    width: 12px
}

svg.icon--chevron-down-16 {
    height: 16px;
    width: 16px
}

svg.icon--chevron-down-24 {
    height: 24px;
    width: 24px
}

svg.icon--chevron-left-12 {
    height: 12px;
    width: 12px
}

svg.icon--chevron-left-16 {
    height: 16px;
    width: 16px
}

svg.icon--chevron-left-20 {
    height: 20px;
    width: 20px
}

svg.icon--chevron-left-24 {
    height: 24px;
    width: 24px
}

svg.icon--chevron-right-12 {
    height: 12px;
    width: 12px
}

svg.icon--chevron-right-16 {
    height: 16px;
    width: 16px
}

svg.icon--chevron-right-24 {
    height: 24px;
    width: 24px
}

svg.icon--chevron-up-12 {
    height: 12px;
    width: 12px
}

svg.icon--chevron-up-16 {
    height: 16px;
    width: 16px
}

svg.icon--chevron-up-20 {
    height: 20px;
    width: 20px
}

svg.icon--chevron-up-24 {
    height: 24px;
    width: 24px
}

svg.icon--chinese-coin-16 {
    height: 16px;
    width: 16px
}

svg.icon--chinese-coin-24 {
    height: 24px;
    width: 24px
}

svg.icon--clear-16 {
    height: 16px;
    width: 16px
}

svg.icon--clear-20 {
    height: 20px;
    width: 20px
}

svg.icon--clear-24 {
    height: 24px;
    width: 24px
}

svg.icon--click-to-call-16 {
    height: 16px;
    width: 16px
}

svg.icon--click-to-call-24 {
    height: 24px;
    width: 24px
}

svg.icon--clock-16 {
    height: 16px;
    width: 16px
}

svg.icon--clock-24 {
    height: 24px;
    width: 24px
}

svg.icon--close-12 {
    height: 12px;
    width: 13px
}

svg.icon--close-16 {
    height: 16px;
    width: 16px
}

svg.icon--close-20 {
    height: 20px;
    width: 20px
}

svg.icon--close-24 {
    height: 24px;
    width: 24px
}

svg.icon--closed-caption-16 {
    height: 16px;
    width: 20px
}

svg.icon--closed-caption-filled-16 {
    height: 16px;
    width: 20px
}

svg.icon--coin-24 {
    height: 24px;
    width: 24px
}

svg.icon--collections-16 {
    height: 16px;
    width: 16px
}

svg.icon--collections-24 {
    height: 24px;
    width: 24px
}

svg.icon--condensed-grid-24 {
    height: 24px;
    width: 24px
}

svg.icon--condensed-grid-filled-24 {
    height: 24px;
    width: 24px
}

svg.icon--confirmation-16 {
    height: 16px;
    width: 16px
}

svg.icon--confirmation-24 {
    height: 24px;
    width: 24px
}

svg.icon--confirmation-64 {
    height: 64px;
    width: 64px
}

svg.icon--confirmation-filled-16 {
    height: 16px;
    width: 16px
}

svg.icon--confirmation-filled-24 {
    height: 24px;
    width: 24px
}

svg.icon--contract-16 {
    height: 16px;
    width: 16px
}

svg.icon--contrast-24 {
    height: 24px;
    width: 24px
}

svg.icon--copy-16 {
    height: 16px;
    width: 16px
}

svg.icon--copy-24 {
    height: 24px;
    width: 24px
}

svg.icon--credit-card-16 {
    height: 16px;
    width: 16px
}

svg.icon--credit-card-24 {
    height: 24px;
    width: 24px
}

svg.icon--credit-card-64 {
    height: 64px;
    width: 64px
}

svg.icon--crop-24 {
    height: 24px;
    width: 24px
}

svg.icon--customize-16 {
    height: 16px;
    width: 16px
}

svg.icon--customize-24 {
    height: 24px;
    width: 24px
}

svg.icon--delete-16 {
    height: 16px;
    width: 16px
}

svg.icon--delete-20 {
    height: 20px;
    width: 20px
}

svg.icon--delete-24 {
    height: 24px;
    width: 24px
}

svg.icon--diamond-16 {
    height: 16px;
    width: 16px
}

svg.icon--diamond-24 {
    height: 24px;
    width: 24px
}

svg.icon--diners-12-colored {
    height: 12px;
    width: 20px
}

svg.icon--diners-18-colored {
    height: 18px;
    width: 30px
}

svg.icon--diners-24-colored {
    height: 24px;
    width: 38px
}

svg.icon--diners-32-colored {
    height: 32px;
    width: 50px
}

svg.icon--direct-debit-12-colored {
    height: 12px;
    width: 20px
}

svg.icon--direct-debit-18-colored {
    height: 18px;
    width: 30px
}

svg.icon--direct-debit-24-colored {
    height: 24px;
    width: 38px
}

svg.icon--direct-debit-32-colored {
    height: 32px;
    width: 50px
}

svg.icon--direct-from-brand-16 {
    height: 16px;
    width: 16px
}

svg.icon--direct-from-brand-24 {
    height: 24px;
    width: 24px
}

svg.icon--discord-24 {
    height: 24px;
    width: 24px
}

svg.icon--discount-16 {
    height: 16px;
    width: 16px
}

svg.icon--discount-24 {
    height: 24px;
    width: 24px
}

svg.icon--discover-12-colored {
    height: 12px;
    width: 20px
}

svg.icon--discover-18-colored {
    height: 18px;
    width: 30px
}

svg.icon--discover-24-colored {
    height: 24px;
    width: 38px
}

svg.icon--discover-32-colored {
    height: 32px;
    width: 50px
}

svg.icon--dollar-16 {
    height: 16px;
    width: 16px
}

svg.icon--dollar-24 {
    height: 24px;
    width: 24px
}

svg.icon--download-16 {
    height: 16px;
    width: 16px
}

svg.icon--download-24 {
    height: 24px;
    width: 24px
}

svg.icon--ebay-balance-12-colored {
    height: 12px;
    width: 20px
}

svg.icon--ebay-balance-18-colored {
    height: 18px;
    width: 30px
}

svg.icon--ebay-balance-24-colored {
    height: 24px;
    width: 38px
}

svg.icon--ebay-balance-32-colored {
    height: 32px;
    width: 50px
}

svg.icon--ebay-bucks-logo-16-colored {
    height: 16px;
    width: 48px
}

svg.icon--ebay-for-charity-16 {
    height: 16px;
    width: 16px
}

svg.icon--ebay-for-charity-24 {
    height: 24px;
    width: 24px
}

svg.icon--ebay-international-shipping-16 {
    height: 16px;
    width: 16px
}

svg.icon--ebay-international-shipping-24 {
    height: 24px;
    width: 24px
}

svg.icon--ebay-international-shipping-64 {
    height: 64px;
    width: 64px
}

svg.icon--ebay-live-16 {
    height: 16px;
    width: 16px
}

svg.icon--ebay-live-24 {
    height: 24px;
    width: 24px
}

svg.icon--ebay-mastercard-12-colored {
    height: 12px;
    width: 20px
}

svg.icon--ebay-mastercard-18-colored {
    height: 18px;
    width: 30px
}

svg.icon--ebay-mastercard-24-colored {
    height: 24px;
    width: 38px
}

svg.icon--ebay-mastercard-32-colored {
    height: 32px;
    width: 50px
}

svg.icon--ebay-money-back-guarantee-logo-16-colored {
    height: 16px;
    width: 147px
}

svg.icon--ebay-plus-16 {
    height: 16px;
    width: 16px
}

svg.icon--ebay-plus-24 {
    height: 24px;
    width: 24px
}

svg.icon--ebay-plus-logo-16-colored {
    height: 16px;
    width: 58px
}

svg.icon--ebay-preloved-16 {
    height: 16px;
    width: 16px
}

svg.icon--ebay-preloved-24 {
    height: 24px;
    width: 24px
}

svg.icon--ebay-refurbished-16 {
    height: 16px;
    width: 16px
}

svg.icon--ebay-refurbished-24 {
    height: 24px;
    width: 24px
}

svg.icon--eek-arrow {
    height: 28px;
    width: 11px
}

svg.icon--eek-range-arrow {
    height: 6px;
    width: 5px
}

svg.icon--escrow-16 {
    height: 16px;
    width: 16px
}

svg.icon--escrow-24 {
    height: 24px;
    width: 24px
}

svg.icon--escrow-card-12-colored {
    height: 12px;
    width: 20px
}

svg.icon--escrow-card-18-colored {
    height: 18px;
    width: 30px
}

svg.icon--escrow-card-24-colored {
    height: 24px;
    width: 38px
}

svg.icon--escrow-card-32-colored {
    height: 32px;
    width: 50px
}

svg.icon--euro-16 {
    height: 16px;
    width: 16px
}

svg.icon--euro-24 {
    height: 24px;
    width: 24px
}

svg.icon--exclude-16 {
    height: 16px;
    width: 16px
}

svg.icon--exclude-24 {
    height: 24px;
    width: 24px
}

svg.icon--expand-16 {
    height: 16px;
    width: 16px
}

svg.icon--external-link-16 {
    height: 16px;
    width: 16px
}

svg.icon--external-link-20 {
    height: 20px;
    width: 20px
}

svg.icon--external-link-24 {
    height: 24px;
    width: 24px
}

svg.icon--face-happiest-24 {
    height: 24px;
    width: 24px
}

svg.icon--face-happy-16 {
    height: 16px;
    width: 16px
}

svg.icon--face-happy-24 {
    height: 24px;
    width: 24px
}

svg.icon--face-neutral-24 {
    height: 24px;
    width: 24px
}

svg.icon--face-sad-24 {
    height: 24px;
    width: 24px
}

svg.icon--face-saddest-24 {
    height: 24px;
    width: 24px
}

svg.icon--facebook-24 {
    height: 24px;
    width: 24px
}

svg.icon--facebook-messenger-24 {
    height: 24px;
    width: 24px
}

svg.icon--fast-and-free-16 {
    height: 16px;
    width: 16px
}

svg.icon--fast-and-free-24 {
    height: 24px;
    width: 24px
}

svg.icon--fast-and-free-64 {
    height: 64px;
    width: 64px
}

svg.icon--feedback-16 {
    height: 16px;
    width: 16px
}

svg.icon--feedback-20 {
    height: 20px;
    width: 20px
}

svg.icon--feedback-24 {
    height: 24px;
    width: 24px
}

svg.icon--file-16 {
    height: 16px;
    width: 16px
}

svg.icon--file-24 {
    height: 24px;
    width: 24px
}

svg.icon--filter-16 {
    height: 16px;
    width: 16px
}

svg.icon--filter-24 {
    height: 24px;
    width: 24px
}

svg.icon--fingerprint-24 {
    height: 24px;
    width: 24px
}

svg.icon--fingerprint-64 {
    height: 64px;
    width: 65px
}

svg.icon--flag-16 {
    height: 16px;
    width: 16px
}

svg.icon--flag-24 {
    height: 24px;
    width: 24px
}

svg.icon--flag-filled-16 {
    height: 16px;
    width: 16px
}

svg.icon--flag-filled-24 {
    height: 24px;
    width: 24px
}

svg.icon--flash-24 {
    height: 24px;
    width: 24px
}

svg.icon--flash-auto-24 {
    height: 24px;
    width: 24px
}

svg.icon--flash-off-24 {
    height: 24px;
    width: 24px
}

svg.icon--folder-16 {
    height: 16px;
    width: 16px
}

svg.icon--folder-24 {
    height: 24px;
    width: 24px
}

svg.icon--franc-16 {
    height: 16px;
    width: 16px
}

svg.icon--franc-24 {
    height: 24px;
    width: 24px
}

svg.icon--free-warranty-16 {
    height: 16px;
    width: 16px
}

svg.icon--free-warranty-24 {
    height: 24px;
    width: 24px
}

svg.icon--full-view-16 {
    height: 16px;
    width: 16px
}

svg.icon--full-view-24 {
    height: 24px;
    width: 24px
}

svg.icon--full-view-filled-16 {
    height: 16px;
    width: 16px
}

svg.icon--full-view-filled-24 {
    height: 24px;
    width: 24px
}

svg.icon--gallery-16 {
    height: 16px;
    width: 16px
}

svg.icon--gallery-24 {
    height: 24px;
    width: 24px
}

svg.icon--general-card-12-colored {
    height: 12px;
    width: 20px
}

svg.icon--general-card-18-colored {
    height: 18px;
    width: 30px
}

svg.icon--general-card-24-colored {
    height: 24px;
    width: 38px
}

svg.icon--general-card-32-colored {
    height: 32px;
    width: 50px
}

svg.icon--generic-card-12-colored {
    height: 12px;
    width: 20px
}

svg.icon--generic-card-18-colored {
    height: 18px;
    width: 30px
}

svg.icon--generic-card-24-colored {
    height: 24px;
    width: 38px
}

svg.icon--generic-card-32-colored {
    height: 32px;
    width: 50px
}

svg.icon--gift-16 {
    height: 16px;
    width: 16px
}

svg.icon--gift-24 {
    height: 24px;
    width: 24px
}

svg.icon--gift-64 {
    height: 64px;
    width: 64px
}

svg.icon--gift-card-12-colored {
    height: 12px;
    width: 20px
}

svg.icon--gift-card-18-colored {
    height: 18px;
    width: 30px
}

svg.icon--gift-card-24-colored {
    height: 24px;
    width: 38px
}

svg.icon--gift-card-32-colored {
    height: 32px;
    width: 50px
}

svg.icon--glasses-24 {
    height: 24px;
    width: 24px
}

svg.icon--glasses-64 {
    height: 64px;
    width: 64px
}

svg.icon--google-pay-12-colored {
    height: 12px;
    width: 20px
}

svg.icon--google-pay-18-colored {
    height: 18px;
    width: 30px
}

svg.icon--google-pay-24-colored {
    height: 24px;
    width: 38px
}

svg.icon--google-pay-32-colored {
    height: 32px;
    width: 50px
}

svg.icon--graph-16 {
    height: 16px;
    width: 16px
}

svg.icon--graph-24 {
    height: 24px;
    width: 24px
}

svg.icon--graph-dynamic-16 {
    height: 16px;
    width: 16px
}

svg.icon--graph-dynamic-24 {
    height: 24px;
    width: 24px
}

svg.icon--grid-view-16 {
    height: 16px;
    width: 16px
}

svg.icon--grid-view-24 {
    height: 24px;
    width: 24px
}

svg.icon--grid-view-filled-16 {
    height: 16px;
    width: 16px
}

svg.icon--grid-view-filled-24 {
    height: 24px;
    width: 24px
}

svg.icon--handbag-16 {
    height: 16px;
    width: 16px
}

svg.icon--handbag-24 {
    height: 24px;
    width: 24px
}

svg.icon--hanger-16 {
    height: 16px;
    width: 16px
}

svg.icon--hanger-24 {
    height: 24px;
    width: 24px
}

svg.icon--headlight-16 {
    height: 16px;
    width: 16px
}

svg.icon--headlight-24 {
    height: 24px;
    width: 24px
}

svg.icon--headphone-16 {
    height: 16px;
    width: 16px
}

svg.icon--headphone-24 {
    height: 24px;
    width: 24px
}

svg.icon--help-16 {
    height: 16px;
    width: 16px
}

svg.icon--help-20 {
    height: 20px;
    width: 20px
}

svg.icon--help-24 {
    height: 24px;
    width: 24px
}

svg.icon--help-outline-16 {
    height: 16px;
    width: 16px
}

svg.icon--help-outline-20 {
    height: 20px;
    width: 20px
}

svg.icon--help-outline-24 {
    height: 24px;
    width: 24px
}

svg.icon--hide-16 {
    height: 16px;
    width: 16px
}

svg.icon--hide-24 {
    height: 24px;
    width: 24px
}

svg.icon--history-24 {
    height: 24px;
    width: 24px
}

svg.icon--history-64 {
    height: 64px;
    width: 64px
}

svg.icon--home-24 {
    height: 24px;
    width: 24px
}

svg.icon--home-filled-24 {
    height: 24px;
    width: 24px
}

svg.icon--image-16 {
    height: 16px;
    width: 16px
}

svg.icon--image-24 {
    height: 24px;
    width: 24px
}

svg.icon--image-64 {
    height: 64px;
    width: 64px
}

svg.icon--inbox-16 {
    height: 16px;
    width: 16px
}

svg.icon--inbox-24 {
    height: 24px;
    width: 24px
}

svg.icon--information-16 {
    height: 16px;
    width: 16px
}

svg.icon--information-24 {
    height: 24px;
    width: 24px
}

svg.icon--information-filled-16 {
    height: 16px;
    width: 16px
}

svg.icon--information-filled-24 {
    height: 24px;
    width: 24px
}

svg.icon--inspect-16 {
    height: 16px;
    width: 16px
}

svg.icon--inspect-24 {
    height: 24px;
    width: 24px
}

svg.icon--inspect-64 {
    height: 64px;
    width: 64px
}

svg.icon--instagram-24 {
    height: 24px;
    width: 24px
}

svg.icon--jcb-12-colored {
    height: 12px;
    width: 20px
}

svg.icon--jcb-18-colored {
    height: 18px;
    width: 30px
}

svg.icon--jcb-24-colored {
    height: 24px;
    width: 38px
}

svg.icon--jcb-32-colored {
    height: 32px;
    width: 50px
}

svg.icon--jet-ski-16 {
    height: 16px;
    width: 16px
}

svg.icon--jet-ski-24 {
    height: 24px;
    width: 24px
}

svg.icon--key-16 {
    height: 16px;
    width: 16px
}

svg.icon--key-24 {
    height: 24px;
    width: 24px
}

svg.icon--keyboard-16 {
    height: 16px;
    width: 16px
}

svg.icon--keyboard-24 {
    height: 24px;
    width: 24px
}

svg.icon--klarna-black-12-colored {
    height: 12px;
    width: 20px
}

svg.icon--klarna-black-18-colored {
    height: 18px;
    width: 30px
}

svg.icon--klarna-black-24-colored {
    height: 24px;
    width: 38px
}

svg.icon--klarna-black-32-colored {
    height: 32px;
    width: 50px
}

svg.icon--klarna-pink-12-colored {
    height: 12px;
    width: 20px
}

svg.icon--klarna-pink-18-colored {
    height: 18px;
    width: 30px
}

svg.icon--klarna-pink-24-colored {
    height: 24px;
    width: 38px
}

svg.icon--klarna-pink-32-colored {
    height: 32px;
    width: 50px
}

svg.icon--klarna-white-12-colored {
    height: 12px;
    width: 20px
}

svg.icon--klarna-white-18-colored {
    height: 18px;
    width: 30px
}

svg.icon--klarna-white-24-colored {
    height: 24px;
    width: 38px
}

svg.icon--klarna-white-32-colored {
    height: 32px;
    width: 50px
}

svg.icon--krona-16 {
    height: 16px;
    width: 16px
}

svg.icon--krona-24 {
    height: 24px;
    width: 24px
}

svg.icon--lamp-16 {
    height: 16px;
    width: 16px
}

svg.icon--lamp-24 {
    height: 24px;
    width: 24px
}

svg.icon--large-box-16 {
    height: 16px;
    width: 16px
}

svg.icon--large-box-24 {
    height: 24px;
    width: 24px
}

svg.icon--legacy-authenticity-guarantee-48-colored {
    height: 48px;
    width: 48px
}

svg.icon--legacy-click-to-call-48-colored {
    height: 48px;
    width: 48px
}

svg.icon--legacy-escrow-48-colored {
    height: 48px;
    width: 48px
}

svg.icon--legacy-free-warranty-48-colored {
    height: 48px;
    width: 48px
}

svg.icon--legacy-money-back-guarantee-chf-48-colored {
    height: 48px;
    width: 48px
}

svg.icon--legacy-money-back-guarantee-eu-48-colored {
    height: 48px;
    width: 48px
}

svg.icon--legacy-money-back-guarantee-uk-48-colored {
    height: 48px;
    width: 48px
}

svg.icon--legacy-money-back-guarantee-us-48-colored {
    height: 48px;
    width: 48px
}

svg.icon--legacy-money-back-guarantee-zl-48-colored {
    height: 48px;
    width: 48px
}

svg.icon--legacy-top-rated-seller-48-colored {
    height: 48px;
    width: 48px
}

svg.icon--lightbulb-16 {
    height: 16px;
    width: 16px
}

svg.icon--lightbulb-24 {
    height: 24px;
    width: 24px
}

svg.icon--lightning-bolt-16 {
    height: 16px;
    width: 16px
}

svg.icon--lightning-bolt-24 {
    height: 24px;
    width: 24px
}

svg.icon--link-24 {
    height: 24px;
    width: 24px
}

svg.icon--linkedin-24 {
    height: 24px;
    width: 24px
}

svg.icon--list-view-16 {
    height: 16px;
    width: 16px
}

svg.icon--list-view-24 {
    height: 24px;
    width: 24px
}

svg.icon--list-view-filled-16 {
    height: 16px;
    width: 16px
}

svg.icon--list-view-filled-24 {
    height: 24px;
    width: 24px
}

svg.icon--live-eye-16 {
    height: 16px;
    width: 16px
}

svg.icon--live-eye-24 {
    height: 24px;
    width: 24px
}

svg.icon--location-16 {
    height: 16px;
    width: 16px
}

svg.icon--location-24 {
    height: 24px;
    width: 24px
}

svg.icon--location-64 {
    height: 64px;
    width: 64px
}

svg.icon--locked-16 {
    height: 16px;
    width: 16px
}

svg.icon--locked-20 {
    height: 20px;
    width: 20px
}

svg.icon--locked-24 {
    height: 24px;
    width: 24px
}

svg.icon--maestro-12-colored {
    height: 12px;
    width: 20px
}

svg.icon--maestro-18-colored {
    height: 18px;
    width: 30px
}

svg.icon--maestro-24-colored {
    height: 24px;
    width: 38px
}

svg.icon--maestro-32-colored {
    height: 32px;
    width: 50px
}

svg.icon--mail-16 {
    height: 16px;
    width: 16px
}

svg.icon--mail-20 {
    height: 20px;
    width: 20px
}

svg.icon--mail-24 {
    height: 24px;
    width: 24px
}

svg.icon--mail-64 {
    height: 64px;
    width: 64px
}

svg.icon--mail-move-16 {
    height: 16px;
    width: 16px
}

svg.icon--mail-move-24 {
    height: 24px;
    width: 24px
}

svg.icon--mail-open-16 {
    height: 16px;
    width: 16px
}

svg.icon--mail-open-24 {
    height: 24px;
    width: 24px
}

svg.icon--mail-unread-16 {
    height: 16px;
    width: 16px
}

svg.icon--mail-unread-24 {
    height: 24px;
    width: 24px
}

svg.icon--map-16 {
    height: 16px;
    width: 16px
}

svg.icon--map-20 {
    height: 20px;
    width: 20px
}

svg.icon--map-24 {
    height: 24px;
    width: 24px
}

svg.icon--masonry-view-24 {
    height: 24px;
    width: 24px
}

svg.icon--masonry-view-filled-24 {
    height: 24px;
    width: 24px
}

svg.icon--mastercard-12-colored {
    height: 12px;
    width: 20px
}

svg.icon--mastercard-18-colored {
    height: 18px;
    width: 30px
}

svg.icon--mastercard-24-colored {
    height: 24px;
    width: 38px
}

svg.icon--mastercard-32-colored {
    height: 32px;
    width: 50px
}

svg.icon--medium-box-16 {
    height: 16px;
    width: 16px
}

svg.icon--medium-box-24 {
    height: 24px;
    width: 24px
}

svg.icon--menu-20 {
    height: 20px;
    width: 20px
}

svg.icon--menu-24 {
    height: 24px;
    width: 24px
}

svg.icon--microphone-16 {
    height: 16px;
    width: 16px
}

svg.icon--microphone-24 {
    height: 24px;
    width: 24px
}

svg.icon--mobile-24 {
    height: 24px;
    width: 24px
}

svg.icon--mobile-signal-24 {
    height: 24px;
    width: 24px
}

svg.icon--money-back-guarantee-16 {
    height: 16px;
    width: 16px
}

svg.icon--money-back-guarantee-24 {
    height: 24px;
    width: 24px
}

svg.icon--moon-16 {
    height: 16px;
    width: 16px
}

svg.icon--moon-20 {
    height: 20px;
    width: 20px
}

svg.icon--moon-24 {
    height: 24px;
    width: 24px
}

svg.icon--motorcycle-16 {
    height: 16px;
    width: 16px
}

svg.icon--motorcycle-24 {
    height: 24px;
    width: 24px
}

svg.icon--move-16 {
    height: 16px;
    width: 16px
}

svg.icon--move-24 {
    height: 24px;
    width: 24px
}

svg.icon--nectar-logo-24-colored {
    height: 24px;
    width: 29px
}

svg.icon--negative-filled-16 {
    height: 16px;
    width: 16px
}

svg.icon--negative-filled-24 {
    height: 24px;
    width: 24px
}

svg.icon--neutral-16 {
    height: 16px;
    width: 16px
}

svg.icon--neutral-24 {
    height: 24px;
    width: 24px
}

svg.icon--notification-16 {
    height: 16px;
    width: 16px
}

svg.icon--notification-20 {
    height: 20px;
    width: 20px
}

svg.icon--notification-24 {
    height: 24px;
    width: 24px
}

svg.icon--notification-64 {
    height: 64px;
    width: 64px
}

svg.icon--notification-filled-24 {
    height: 24px;
    width: 24px
}

svg.icon--on-the-way-16 {
    height: 16px;
    width: 16px
}

svg.icon--on-the-way-24 {
    height: 24px;
    width: 24px
}

svg.icon--overflow-horizontal-16 {
    height: 16px;
    width: 16px
}

svg.icon--overflow-horizontal-20 {
    height: 20px;
    width: 20px
}

svg.icon--overflow-horizontal-24 {
    height: 24px;
    width: 24px
}

svg.icon--overflow-vertical-16 {
    height: 16px;
    width: 16px
}

svg.icon--overflow-vertical-20 {
    height: 20px;
    width: 20px
}

svg.icon--overflow-vertical-24 {
    height: 24px;
    width: 24px
}

svg.icon--package-16 {
    height: 16px;
    width: 16px
}

svg.icon--package-24 {
    height: 24px;
    width: 24px
}

svg.icon--package-64 {
    height: 64px;
    width: 64px
}

svg.icon--passkey-16 {
    height: 16px;
    width: 16px
}

svg.icon--passkey-24 {
    height: 24px;
    width: 24px
}

svg.icon--passkey-64 {
    height: 64px;
    width: 64px
}

svg.icon--pause-16 {
    height: 16px;
    width: 16px
}

svg.icon--pause-24 {
    height: 24px;
    width: 24px
}

svg.icon--pause-filled-64-colored {
    height: 64px;
    width: 64px
}

svg.icon--payoneer-12-colored {
    height: 12px;
    width: 20px
}

svg.icon--payoneer-18-colored {
    height: 18px;
    width: 30px
}

svg.icon--payoneer-24-colored {
    height: 24px;
    width: 38px
}

svg.icon--payoneer-32-colored {
    height: 32px;
    width: 50px
}

svg.icon--paypal-12-colored {
    height: 12px;
    width: 20px
}

svg.icon--paypal-18-colored {
    height: 18px;
    width: 30px
}

svg.icon--paypal-24-colored {
    height: 24px;
    width: 38px
}

svg.icon--paypal-32-colored {
    height: 32px;
    width: 50px
}

svg.icon--paypal-credit-12-colored {
    height: 12px;
    width: 20px
}

svg.icon--paypal-credit-18-colored {
    height: 18px;
    width: 30px
}

svg.icon--paypal-credit-24-colored {
    height: 24px;
    width: 38px
}

svg.icon--paypal-credit-32-colored {
    height: 32px;
    width: 50px
}

svg.icon--paypal-disabled-12-colored {
    height: 12px;
    width: 20px
}

svg.icon--paypal-disabled-18-colored {
    height: 18px;
    width: 30px
}

svg.icon--paypal-disabled-24-colored {
    height: 24px;
    width: 37px
}

svg.icon--paypal-disabled-32-colored {
    height: 32px;
    width: 50px
}

svg.icon--pencil-16 {
    height: 16px;
    width: 16px
}

svg.icon--pencil-20 {
    height: 20px;
    width: 20px
}

svg.icon--pencil-24 {
    height: 24px;
    width: 24px
}

svg.icon--peso-16 {
    height: 16px;
    width: 16px
}

svg.icon--peso-24 {
    height: 24px;
    width: 24px
}

svg.icon--phone-16 {
    height: 16px;
    width: 16px
}

svg.icon--phone-24 {
    height: 24px;
    width: 24px
}

svg.icon--pin-24 {
    height: 24px;
    width: 24px
}

svg.icon--pin-filled-24 {
    height: 24px;
    width: 24px
}

svg.icon--pinterest-24 {
    height: 24px;
    width: 24px
}

svg.icon--play-16 {
    height: 16px;
    width: 16px
}

svg.icon--play-24 {
    height: 24px;
    width: 24px
}

svg.icon--play-filled-16-colored {
    height: 16px;
    width: 16px
}

svg.icon--play-filled-24-colored {
    height: 24px;
    width: 24px
}

svg.icon--play-filled-64-colored {
    height: 64px;
    width: 64px
}

svg.icon--postepay-12-colored {
    height: 12px;
    width: 20px
}

svg.icon--postepay-18-colored {
    height: 18px;
    width: 30px
}

svg.icon--postepay-24-colored {
    height: 24px;
    width: 38px
}

svg.icon--postepay-32-colored {
    height: 32px;
    width: 50px
}

svg.icon--pound-16 {
    height: 16px;
    width: 16px
}

svg.icon--pound-24 {
    height: 24px;
    width: 24px
}

svg.icon--print-16 {
    height: 16px;
    width: 16px
}

svg.icon--print-24 {
    height: 24px;
    width: 24px
}

svg.icon--profile-20 {
    height: 20px;
    width: 20px
}

svg.icon--profile-24 {
    height: 24px;
    width: 24px
}

svg.icon--profile-filled-24 {
    height: 24px;
    width: 24px
}

svg.icon--progress-current-24 {
    height: 24px;
    width: 24px
}

svg.icon--progress-upcoming-24 {
    height: 24px;
    width: 24px
}

svg.icon--promotion-16 {
    height: 16px;
    width: 16px
}

svg.icon--promotion-24 {
    height: 24px;
    width: 24px
}

svg.icon--qr-code-16 {
    height: 16px;
    width: 16px
}

svg.icon--qr-code-24 {
    height: 24px;
    width: 24px
}

svg.icon--radio-checked-18 {
    height: 18px;
    width: 18px
}

svg.icon--radio-checked-24 {
    height: 24px;
    width: 24px
}

svg.icon--radio-unchecked-18 {
    height: 18px;
    width: 18px
}

svg.icon--radio-unchecked-24 {
    height: 24px;
    width: 24px
}

svg.icon--recovery-code-16 {
    height: 16px;
    width: 16px
}

svg.icon--recovery-code-24 {
    height: 24px;
    width: 24px
}

svg.icon--reddit-24 {
    height: 24px;
    width: 24px
}

svg.icon--refresh-16 {
    height: 16px;
    width: 16px
}

svg.icon--refresh-24 {
    height: 24px;
    width: 24px
}

svg.icon--relaxed-grid-24 {
    height: 24px;
    width: 24px
}

svg.icon--relaxed-grid-filled-24 {
    height: 24px;
    width: 24px
}

svg.icon--remove-16 {
    height: 16px;
    width: 16px
}

svg.icon--remove-24 {
    height: 24px;
    width: 24px
}

svg.icon--reply-16 {
    height: 16px;
    width: 16px
}

svg.icon--reply-24 {
    height: 24px;
    width: 24px
}

svg.icon--return-16 {
    height: 16px;
    width: 16px
}

svg.icon--return-24 {
    height: 24px;
    width: 24px
}

svg.icon--ribbon-16 {
    height: 16px;
    width: 16px
}

svg.icon--ribbon-24 {
    height: 24px;
    width: 24px
}

svg.icon--rim-16 {
    height: 16px;
    width: 16px
}

svg.icon--rim-24 {
    height: 24px;
    width: 24px
}

svg.icon--ringgit-16 {
    height: 16px;
    width: 16px
}

svg.icon--ringgit-24 {
    height: 24px;
    width: 24px
}

svg.icon--rotate-24 {
    height: 24px;
    width: 24px
}

svg.icon--rotate-landscape-left-24 {
    height: 24px;
    width: 24px
}

svg.icon--rotate-landscape-right-24 {
    height: 24px;
    width: 24px
}

svg.icon--rotate-portrait-left-24 {
    height: 24px;
    width: 24px
}

svg.icon--rotate-portrait-right-24 {
    height: 24px;
    width: 24px
}

svg.icon--rupee-16 {
    height: 16px;
    width: 16px
}

svg.icon--rupee-24 {
    height: 24px;
    width: 24px
}

svg.icon--satchel-16 {
    height: 16px;
    width: 16px
}

svg.icon--satchel-24 {
    height: 24px;
    width: 24px
}

svg.icon--save-16 {
    height: 16px;
    width: 16px
}

svg.icon--save-20 {
    height: 20px;
    width: 20px
}

svg.icon--save-24 {
    height: 24px;
    width: 24px
}

svg.icon--save-filled-16 {
    height: 16px;
    width: 16px
}

svg.icon--save-filled-20 {
    height: 20px;
    width: 20px
}

svg.icon--save-filled-24 {
    height: 24px;
    width: 24px
}

svg.icon--scan-16 {
    height: 16px;
    width: 16px
}

svg.icon--scan-24 {
    height: 24px;
    width: 24px
}

svg.icon--search-16 {
    height: 16px;
    width: 16px
}

svg.icon--search-20 {
    height: 20px;
    width: 20px
}

svg.icon--search-24 {
    height: 24px;
    width: 24px
}

svg.icon--search-64 {
    height: 64px;
    width: 64px
}

svg.icon--search-filled-24 {
    height: 24px;
    width: 24px
}

svg.icon--search-similar-16 {
    height: 16px;
    width: 16px
}

svg.icon--search-similar-20 {
    height: 20px;
    width: 20px
}

svg.icon--search-similar-24 {
    height: 24px;
    width: 24px
}

svg.icon--security-key-24 {
    height: 24px;
    width: 24px
}

svg.icon--select-all-24 {
    height: 24px;
    width: 24px
}

svg.icon--selling-16 {
    height: 16px;
    width: 16px
}

svg.icon--selling-20 {
    height: 20px;
    width: 20px
}

svg.icon--selling-24 {
    height: 24px;
    width: 24px
}

svg.icon--selling-filled-24 {
    height: 24px;
    width: 24px
}

svg.icon--send-24 {
    height: 24px;
    width: 24px
}

svg.icon--settings-16 {
    height: 16px;
    width: 16px
}

svg.icon--settings-20 {
    height: 20px;
    width: 20px
}

svg.icon--settings-24 {
    height: 24px;
    width: 24px
}

svg.icon--share-android-16 {
    height: 16px;
    width: 16px
}

svg.icon--share-android-20 {
    height: 20px;
    width: 20px
}

svg.icon--share-android-24 {
    height: 24px;
    width: 24px
}

svg.icon--share-ios-16 {
    height: 16px;
    width: 16px
}

svg.icon--share-ios-20 {
    height: 20px;
    width: 20px
}

svg.icon--share-ios-24 {
    height: 24px;
    width: 24px
}

svg.icon--sharpen-24 {
    height: 24px;
    width: 24px
}

svg.icon--ship-and-local-16 {
    height: 16px;
    width: 16px
}

svg.icon--ship-and-local-24 {
    height: 24px;
    width: 24px
}

svg.icon--shirt-16 {
    height: 16px;
    width: 16px
}

svg.icon--shirt-24 {
    height: 24px;
    width: 24px
}

svg.icon--shoe-box-24 {
    height: 24px;
    width: 24px
}

svg.icon--show-16 {
    height: 16px;
    width: 16px
}

svg.icon--show-24 {
    height: 24px;
    width: 24px
}

svg.icon--small-box-16 {
    height: 16px;
    width: 16px
}

svg.icon--small-box-24 {
    height: 24px;
    width: 24px
}

svg.icon--small-letter-24 {
    height: 24px;
    width: 24px
}

svg.icon--sneaker-16 {
    height: 16px;
    width: 16px
}

svg.icon--sneaker-24 {
    height: 24px;
    width: 24px
}

svg.icon--snowflake-16 {
    height: 16px;
    width: 16px
}

svg.icon--snowflake-24 {
    height: 24px;
    width: 24px
}

svg.icon--snowmobile-16 {
    height: 16px;
    width: 16px
}

svg.icon--snowmobile-24 {
    height: 24px;
    width: 24px
}

svg.icon--sort-12 {
    height: 12px;
    width: 12px
}

svg.icon--sort-16 {
    height: 16px;
    width: 16px
}

svg.icon--sort-24 {
    height: 24px;
    width: 24px
}

svg.icon--sort-down-12 {
    height: 12px;
    width: 12px
}

svg.icon--sort-up-12 {
    height: 12px;
    width: 12px
}

svg.icon--sparkline-down-16 {
    height: 16px;
    width: 16px
}

svg.icon--sparkline-down-20 {
    height: 20px;
    width: 20px
}

svg.icon--sparkline-down-24 {
    height: 24px;
    width: 24px
}

svg.icon--sparkline-up-16 {
    height: 16px;
    width: 16px
}

svg.icon--sparkline-up-20 {
    height: 20px;
    width: 20px
}

svg.icon--sparkline-up-24 {
    height: 24px;
    width: 24px
}

svg.icon--sparkline-up-filled-24 {
    height: 24px;
    width: 24px
}

svg.icon--spinner-20 {
    height: 16px;
    width: 16px
}

svg.icon--spinner-24 {
    height: 24px;
    width: 24px
}

svg.icon--spinner-30 {
    height: 24px;
    width: 24px
}

svg.icon--split-payment-16 {
    height: 16px;
    width: 16px
}

svg.icon--split-payment-24 {
    height: 24px;
    width: 24px
}

svg.icon--split-view-24 {
    height: 24px;
    width: 24px
}

svg.icon--split-view-filled-24 {
    height: 24px;
    width: 24px
}

svg.icon--star-dynamic {
    height: 16px;
    width: 16px
}

svg.icon--star-empty-16 {
    height: 16px;
    width: 16px
}

svg.icon--star-empty-24 {
    height: 24px;
    width: 24px
}

svg.icon--star-filled-16 {
    height: 16px;
    width: 16px
}

svg.icon--star-filled-24 {
    height: 24px;
    width: 24px
}

svg.icon--star-half-16-colored {
    height: 16px;
    width: 16px
}

svg.icon--star-half-24-colored {
    height: 24px;
    width: 24px
}

svg.icon--star-half-dark-16-colored {
    height: 16px;
    width: 16px
}

svg.icon--star-half-dark-24-colored {
    height: 24px;
    width: 24px
}

svg.icon--stepper-attention-24 {
    height: 24px;
    width: 24px
}

svg.icon--stepper-confirmation-24 {
    height: 24px;
    width: 24px
}

svg.icon--stepper-current-24 {
    height: 24px;
    width: 24px
}

svg.icon--stepper-upcoming-24 {
    height: 25px;
    width: 24px
}

svg.icon--store-16 {
    height: 16px;
    width: 16px
}

svg.icon--store-24 {
    height: 24px;
    width: 24px
}

svg.icon--store-64 {
    height: 64px;
    width: 64px
}

svg.icon--store-filled-24 {
    height: 24px;
    width: 24px
}

svg.icon--suitcase-24 {
    height: 24px;
    width: 24px
}

svg.icon--support-24 {
    height: 24px;
    width: 24px
}

svg.icon--swap-24 {
    height: 24px;
    width: 24px
}

svg.icon--switch-camera-24 {
    height: 24px;
    width: 24px
}

svg.icon--target-16 {
    height: 16px;
    width: 16px
}

svg.icon--target-24 {
    height: 24px;
    width: 24px
}

svg.icon--text-messaging-16 {
    height: 16px;
    width: 16px
}

svg.icon--text-messaging-20 {
    height: 20px;
    width: 20px
}

svg.icon--text-messaging-24 {
    height: 24px;
    width: 24px
}

svg.icon--text-messaging-64 {
    height: 64px;
    width: 64px
}

svg.icon--the-ebay-vault-16 {
    height: 16px;
    width: 16px
}

svg.icon--the-ebay-vault-24 {
    height: 24px;
    width: 24px
}

svg.icon--thumb-down-16 {
    height: 16px;
    width: 16px
}

svg.icon--thumb-down-24 {
    height: 24px;
    width: 24px
}

svg.icon--thumb-down-filled-16 {
    height: 16px;
    width: 16px
}

svg.icon--thumb-down-filled-24 {
    height: 24px;
    width: 24px
}

svg.icon--thumb-up-16 {
    height: 16px;
    width: 16px
}

svg.icon--thumb-up-24 {
    height: 24px;
    width: 24px
}

svg.icon--thumb-up-64 {
    height: 64px;
    width: 64px
}

svg.icon--thumb-up-filled-16 {
    height: 16px;
    width: 16px
}

svg.icon--thumb-up-filled-24 {
    height: 24px;
    width: 24px
}

svg.icon--tick-16 {
    height: 16px;
    width: 16px
}

svg.icon--tick-24 {
    height: 24px;
    width: 24px
}

svg.icon--tiktok-24 {
    height: 24px;
    width: 24px
}

svg.icon--toggle-mode-bottom-24 {
    height: 24px;
    width: 24px
}

svg.icon--toggle-mode-top-24 {
    height: 24px;
    width: 24px
}

svg.icon--top-rated-seller-16 {
    height: 16px;
    width: 16px
}

svg.icon--top-rated-seller-24 {
    height: 24px;
    width: 24px
}

svg.icon--top-service-16 {
    height: 16px;
    width: 16px
}

svg.icon--top-service-24 {
    height: 24px;
    width: 24px
}

svg.icon--trading-card-16 {
    height: 16px;
    width: 16px
}

svg.icon--trading-card-24 {
    height: 24px;
    width: 24px
}

svg.icon--transaction-24 {
    height: 24px;
    width: 24px
}

svg.icon--trend-down-16-fit {
    height: 16px;
    width: 13px
}

svg.icon--trend-up-16-fit {
    height: 16px;
    width: 13px
}

svg.icon--trophy-16 {
    height: 16px;
    width: 16px
}

svg.icon--trophy-24 {
    height: 24px;
    width: 24px
}

svg.icon--twitter-24 {
    height: 24px;
    width: 24px
}

svg.icon--undo-16 {
    height: 16px;
    width: 16px
}

svg.icon--undo-24 {
    height: 25px;
    width: 24px
}

svg.icon--unionpay-12-colored {
    height: 12px;
    width: 20px
}

svg.icon--unionpay-18-colored {
    height: 18px;
    width: 30px
}

svg.icon--unionpay-24-colored {
    height: 24px;
    width: 38px
}

svg.icon--unionpay-32-colored {
    height: 32px;
    width: 50px
}

svg.icon--unlocked-16 {
    height: 16px;
    width: 16px
}

svg.icon--unlocked-24 {
    height: 24px;
    width: 24px
}

svg.icon--unselect-all-24 {
    height: 24px;
    width: 24px
}

svg.icon--upload-16 {
    height: 16px;
    width: 16px
}

svg.icon--upload-24 {
    height: 24px;
    width: 24px
}

svg.icon--venmo-12-colored {
    height: 12px;
    width: 20px
}

svg.icon--venmo-18-colored {
    height: 18px;
    width: 30px
}

svg.icon--venmo-24-colored {
    height: 24px;
    width: 38px
}

svg.icon--venmo-32-colored {
    height: 32px;
    width: 50px
}

svg.icon--verified-condition-16 {
    height: 16px;
    width: 16px
}

svg.icon--verified-condition-24 {
    height: 24px;
    width: 24px
}

svg.icon--video-24 {
    height: 24px;
    width: 24px
}

svg.icon--visa-12-colored {
    height: 12px;
    width: 20px
}

svg.icon--visa-18-colored {
    height: 18px;
    width: 30px
}

svg.icon--visa-24-colored {
    height: 24px;
    width: 38px
}

svg.icon--visa-32-colored {
    height: 32px;
    width: 50px
}

svg.icon--wallet-24 {
    height: 24px;
    width: 24px
}

svg.icon--wallet-64 {
    height: 64px;
    width: 64px
}

svg.icon--wallet-balance-12-colored {
    height: 12px;
    width: 20px
}

svg.icon--wallet-balance-18-colored {
    height: 18px;
    width: 30px
}

svg.icon--wallet-balance-24-colored {
    height: 24px;
    width: 38px
}

svg.icon--wallet-balance-32-colored {
    height: 32px;
    width: 50px
}

svg.icon--watch-16 {
    height: 16px;
    width: 16px
}

svg.icon--watch-24 {
    height: 24px;
    width: 24px
}

svg.icon--whatsapp-24 {
    height: 24px;
    width: 24px
}

svg.icon--won-16 {
    height: 16px;
    width: 16px
}

svg.icon--won-24 {
    height: 24px;
    width: 24px
}

svg.icon--wrench-16 {
    height: 16px;
    width: 16px
}

svg.icon--wrench-24 {
    height: 24px;
    width: 24px
}

svg.icon--youtube-24 {
    height: 24px;
    width: 24px
}

svg.icon--yuan-16 {
    height: 16px;
    width: 16px
}

svg.icon--yuan-24 {
    height: 24px;
    width: 24px
}

svg.icon--zloty-16 {
    height: 16px;
    width: 16px
}

svg.icon--zloty-24 {
    height: 24px;
    width: 24px
}

svg.icon--zoom-in-16 {
    height: 16px;
    width: 16px
}

svg.icon--zoom-in-24 {
    height: 24px;
    width: 24px
}

svg.icon--zoom-out-16 {
    height: 16px;
    width: 16px
}

svg.icon--zoom-out-24 {
    height: 24px;
    width: 24px
}

svg.star-rating--0 {
    height: 24px;
    width: 132px
}

svg.star-rating--0-5 {
    height: 24px;
    width: 132px
}

svg.star-rating--1 {
    height: 24px;
    width: 132px
}

svg.star-rating--1-5 {
    height: 24px;
    width: 132px
}

svg.star-rating--2 {
    height: 24px;
    width: 132px
}

svg.star-rating--2-5 {
    height: 24px;
    width: 132px
}

svg.star-rating--3 {
    height: 24px;
    width: 132px
}

svg.star-rating--3-5 {
    height: 24px;
    width: 132px
}

svg.star-rating--4 {
    height: 24px;
    width: 132px
}

svg.star-rating--4-5 {
    height: 24px;
    width: 132px
}

svg.star-rating--5 {
    height: 24px;
    width: 132px
}

svg.star-rating--small-0 {
    height: 16px;
    width: 88px
}

svg.star-rating--small-0-5 {
    height: 16px;
    width: 88px
}

svg.star-rating--small-1 {
    height: 16px;
    width: 88px
}

svg.star-rating--small-1-5 {
    height: 16px;
    width: 88px
}

svg.star-rating--small-2 {
    height: 16px;
    width: 88px
}

svg.star-rating--small-2-5 {
    height: 16px;
    width: 88px
}

svg.star-rating--small-3 {
    height: 16px;
    width: 88px
}

svg.star-rating--small-3-5 {
    height: 16px;
    width: 88px
}

svg.star-rating--small-4 {
    height: 16px;
    width: 88px
}

svg.star-rating--small-4-5 {
    height: 16px;
    width: 88px
}

svg.star-rating--small-5 {
    height: 16px;
    width: 88px
}

svg.icon {
    display: inline-block;
    fill: currentColor;
    pointer-events: none;
    stroke: currentColor;
    stroke-width: 0;
    vertical-align: middle
}

svg.icon--disabled {
    filter: var(--color-icon-disabled-filter)
}

svg.icon--attention-filled-16,
svg.icon--attention-filled-24 {
    color: var(--color-foreground-attention)
}

svg.icon--confirmation-filled-16,
svg.icon--confirmation-filled-24 {
    color: var(--color-foreground-confirmation)
}

svg.icon--information-filled-16,
svg.icon--information-filled-24 {
    color: var(--color-foreground-information)
}

svg.icon--star-empty {
    color: var(--color-foreground-disabled)
}

svg.icon--star-empty-small {
    color: var(--color-foreground-disabled)
}

svg.icon--social-link-24 {
    color: var(--color-social-icons-background)
}

svg.icon--social-discord-24 {
    color: var(--color-social-icons-background)
}

svg.icon--social-facebook-24 {
    color: var(--color-social-icons-background)
}

svg.icon--social-messenger-24 {
    color: var(--color-social-icons-background)
}

svg.icon--social-pinterest-24 {
    color: var(--color-social-icons-background)
}

svg.icon--social-reddit-24 {
    color: var(--color-social-icons-background)
}

svg.icon--social-twitter-24 {
    color: var(--color-social-icons-background)
}

svg.icon--social-whatsapp-24 {
    color: var(--color-social-icons-background)
}

svg.icon--social-linkedin-24 {
    color: var(--color-social-icons-background)
}

svg.icon--spinner-30 {
    height: 60px;
    width: 60px
}

svg.star-rating {
    display: inline-block;
    fill: currentColor;
    height: 16px;
    pointer-events: none;
    stroke: currentColor;
    stroke-width: 0;
    vertical-align: middle;
    width: 84px
}

svg.star-rating__icon {
    height: 16px;
    width: 16px
}

div.star-rating[data-stars^="1"] svg:nth-child(-n+1),
div.star-rating[data-stars^="2"] svg:nth-child(-n+2),
div.star-rating[data-stars^="3"] svg:nth-child(-n+3),
div.star-rating[data-stars^="4"] svg:nth-child(-n+4),
div.star-rating[data-stars^="5"] svg:nth-child(-n+5) {
    --color-star-rating-full: var(--color-star-rating-filled, var(--color-foreground-primary));
    --color-star-rating-full-stroke: var(--color-star-rating-filled-stroke, var(--color-foreground-primary));
    --color-star-rating-half-stroke: var(--color-star-rating-filled-stroke, var(--color-foreground-primary))
}

div.star-rating[data-stars="0-5"] svg:nth-child(1),
div.star-rating[data-stars="1-5"] svg:nth-child(2),
div.star-rating[data-stars="2-5"] svg:nth-child(3),
div.star-rating[data-stars="3-5"] svg:nth-child(4),
div.star-rating[data-stars="4-5"] svg:nth-child(5) {
    --color-star-rating-half: var(--color-star-rating-filled, var(--color-foreground-primary));
    --color-star-rating-full: var(--color-star-rating-unfilled, transparent);
    --color-star-rating-full-stroke: var(--color-star-rating-unfilled-stroke, var(--color-neutral-5));
    --color-star-rating-half-stroke: var(--color-star-rating-filled-stroke, var(--color-foreground-primary))
}

:root {
    --bubble-shadow: 0 2px 7px rgba(0, 0, 0, .15), 0 5px 17px rgba(0, 0, 0, .2)
}

div.listbox__options[role=listbox] {
    background-color: var(--listbox-background-color, var(--color-background-primary));
    cursor: default
}

.listbox__description {
    color: var(--listbox-button-subtitle-color, var(--color-foreground-secondary));
    font-size: var(--font-size-small);
    font-weight: 400;
    grid-column: 1 2;
    grid-row: 2
}

div.listbox__option[role=option] {
    background-color: transparent;
    border-style: solid;
    border-width: 1px;
    box-sizing: border-box;
    display: inline-grid;
    font-family: inherit;
    grid-template-columns: auto auto;
    justify-content: space-between;
    padding: 8px 15px;
    width: 100%;
    border-color: var(--listbox-option-border-color, var(--color-background-primary));
    color: var(--listbox-option-foreground-color, var(--color-foreground-primary))
}

div.listbox__option[role=option]:hover {
    background-color: var(--color-state-primary-hover);
    color: var(--listbox-option-hover-foreground-color, var(--color-foreground-primary))
}

div.listbox__option[role=option]:disabled,
div.listbox__option[role=option][aria-disabled=true] {
    color: var(--listbox-option-disabled-foreground-color, var(--color-foreground-disabled));
    background-color: unset;
    font-weight: unset
}

div.listbox__option[role=option]:disabled .listbox__description,
div.listbox__option[role=option][aria-disabled=true] .listbox__description {
    color: var(--listbox-option-disabled-foreground-color, var(--color-foreground-disabled));
    background-color: unset;
    font-weight: unset
}

div.listbox__option svg.icon {
    align-self: center;
    fill: currentColor;
    margin: 0 auto;
    opacity: 0;
    stroke: currentColor;
    stroke-width: 0;
    -webkit-margin-start: var(--spacing-100);
    margin-left: var(--spacing-100)
}

.video-player {
    position: relative
}

.video-player video {
    height: 100%;
    width: 100%
}

.video-player button {
    font-family: inherit
}

.video-player__overlay {
    align-items: center;
    background-color: #0009;
    bottom: 0;
    color: var(--color-neutral-100);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0
}

.video-player__overlay-text {
    margin: 20px 20px 0
}

.video-player__overlay--hidden {
    display: none
}

.video-player__report-button>svg {
    margin-right: var(--spacing-50)
}

.video-player .shaka-overflow-menu svg {
    height: 24px;
    margin-left: 10px;
    margin-right: 10px;
    width: 24px
}

.video-player .shaka-play-button {
    background: none;
    box-shadow: none;
    height: auto;
    padding: 0;
    width: auto
}

.video-player .icon--video-play,
.video-player .shaka-play-button svg {
    height: 48px;
    width: 48px
}

.video-player .shaka-bottom-controls {
    box-sizing: border-box;
    margin-bottom: 3%;
    padding-bottom: 0;
    position: relative;
    width: 94%
}

.video-player .shaka-controls-button-panel {
    background-color: #000000b3;
    border-radius: 8px;
    bottom: 0;
    height: 40px;
    position: absolute;
    width: 100%
}

.video-player .shaka-controls-button-panel :first-child {
    margin-left: 8px
}

.video-player .shaka-controls-button-panel :last-child {
    margin-right: 8px
}

.video-player--poster .shaka-scrim-container {
    visibility: hidden
}

.video-player .shaka-range-container {
    box-sizing: border-box;
    margin: 0 188px 18px 76px
}

.video-player #shaka-player-ui-time-container {
    display: none
}

.video-player .shaka-video-container {
    font-family: Market Sans, Arial, sans-serif
}

/*! @license
 * Shaka Player
 * Copyright 2016 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */

.shaka-hidden {
    display: none !important
}

.shaka-video-container {
    position: relative;
    top: 0;
    left: 0;
    display: flex;
    font-family: Roboto, sans-serif, TengwarTelcontar;
    font-weight: 400;
    -webkit-font-smoothing: antialiased
}

.shaka-video-container .material-icons-round {
    font-family: Material Icons Round;
    font-size: 24px
}

.shaka-video-container:fullscreen {
    width: 100%;
    height: 100%;
    background-color: #000
}

.shaka-video-container:fullscreen .shaka-text-container {
    font-size: 4.4vmin
}

.shaka-video-container:-webkit-full-screen {
    width: 100%;
    height: 100%;
    background-color: #000
}

.shaka-video-container:-webkit-full-screen .shaka-text-container {
    font-size: 4.4vmin
}

.shaka-video-container:-moz-full-screen {
    width: 100%;
    height: 100%;
    background-color: #000
}

.shaka-video-container:-moz-full-screen .shaka-text-container {
    font-size: 4.4vmin
}

.shaka-video-container:-ms-fullscreen {
    width: 100%;
    height: 100%;
    background-color: #000
}

.shaka-video-container:-ms-fullscreen .shaka-text-container {
    font-size: 4.4vmin
}

.shaka-controls-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    z-index: 1
}

.shaka-video-container:not([shaka-controls=true]) .shaka-controls-container {
    display: none
}

.shaka-controls-container * {
    flex-shrink: 0
}

.shaka-controls-container[casting=true] .shaka-fullscreen-button {
    display: none
}

.shaka-canvas-container,
.shaka-vr-canvas-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    pointer-events: none
}

.shaka-bottom-controls {
    width: 98%;
    padding: 0;
    z-index: 1
}

.shaka-controls-button-panel {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    overflow: hidden;
    min-width: 48px;
    font-size: 12px;
    font-weight: 400;
    font-style: normal;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    opacity: 0;
    transition: opacity cubic-bezier(.4, 0, .6, 1) .6s
}

.shaka-controls-container[casting=true] .shaka-controls-button-panel,
.shaka-controls-container[shown=true] .shaka-controls-button-panel {
    opacity: 1
}

.shaka-controls-button-panel>* {
    color: #fff;
    height: 48px;
    width: 48px;
    line-height: .5;
    padding: 0 2px;
    background: 0 0;
    border: 0;
    cursor: pointer;
    opacity: .9;
    transition: opacity cubic-bezier(.4, 0, .6, 1) .1s;
    text-shadow: 0 0 2px rgba(0, 0, 0, .5)
}

.shaka-controls-button-panel>.material-icons-round {
    font-size: 34px
}

.shaka-controls-button-panel>.shaka-mute-button {
    font-size: 28px
}

.shaka-controls-button-panel>.shaka-overflow-menu-button {
    font-size: 24px !important;
    position: relative
}

.shaka-controls-button-panel>:hover {
    opacity: 1
}

.shaka-controls-button-panel .shaka-overflow-menu-only {
    display: none
}

.shaka-play-button-container {
    margin: 0;
    width: 100%;
    height: 100%;
    flex-shrink: 1;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center
}

.shaka-statistics-container {
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: white rgba(0, 0, 0, .5);
    scrollbar-width: thin;
    min-width: 300px;
    color: #fff;
    background-color: #232323e6;
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 2px;
    position: absolute;
    z-index: 2;
    left: 15px;
    top: 15px;
    max-height: calc(100% - 115px);
    opacity: 0;
    transition: opacity cubic-bezier(.4, 0, .6, 1) .6s
}

.shaka-controls-container[casting=true] .shaka-statistics-container,
.shaka-controls-container[shown=true] .shaka-statistics-container {
    opacity: 1
}

.shaka-statistics-container div {
    display: flex;
    justify-content: space-between
}

.shaka-statistics-container span {
    color: #969696
}

.shaka-ad-statistics-container {
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: white rgba(0, 0, 0, .5);
    scrollbar-width: thin;
    min-width: 150px;
    color: #fff;
    background-color: #232323e6;
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 2px;
    position: absolute;
    z-index: 2;
    right: 15px;
    top: 15px;
    max-height: calc(100% - 115px);
    opacity: 0;
    transition: opacity cubic-bezier(.4, 0, .6, 1) .6s
}

.shaka-controls-container[casting=true] .shaka-ad-statistics-container,
.shaka-controls-container[shown=true] .shaka-ad-statistics-container {
    opacity: 1
}

.shaka-ad-statistics-container div {
    display: flex;
    justify-content: space-between
}

.shaka-ad-statistics-container span {
    color: #969696
}

.shaka-context-menu {
    overflow-x: hidden;
    overflow-y: auto;
    white-space: nowrap;
    background: #1c1c1ce6;
    border-radius: 2px;
    min-width: 190px;
    opacity: 0;
    transition: opacity cubic-bezier(.4, 0, .6, 1) .6s;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    z-index: 3
}

.shaka-controls-container[casting=true] .shaka-context-menu,
.shaka-controls-container[shown=true] .shaka-context-menu {
    opacity: 1
}

.shaka-context-menu button {
    font-size: 14px;
    background: 0 0;
    color: #fff;
    border: none;
    min-height: 30px;
    padding: 10px;
    display: flex;
    align-items: center;
    cursor: pointer
}

.shaka-context-menu button:hover {
    background: #ffffff1a
}

.shaka-context-menu button label {
    cursor: pointer;
    margin-left: 5px
}

.shaka-keyboard-navigation .shaka-context-menu button:focus {
    background: #ffffff1a
}

.shaka-context-menu button .shaka-current-selection-span {
    display: none
}

.shaka-scrim-container {
    margin: 0;
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    flex-shrink: 1;
    opacity: 0;
    transition: opacity cubic-bezier(.4, 0, .6, 1) .6s;
    height: 61px;
    background: linear-gradient(#0000 0, #00000080)
}

.shaka-controls-container[casting=true] .shaka-scrim-container,
.shaka-controls-container[shown=true] .shaka-scrim-container {
    opacity: 1
}

.shaka-text-container {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    pointer-events: none;
    bottom: 0;
    width: 100%;
    min-width: 48px;
    transition: bottom cubic-bezier(.4, 0, .6, 1) .1s;
    transition-delay: .5s;
    font-size: 20px;
    line-height: 1.4;
    color: #fff
}

.shaka-text-container span.shaka-text-wrapper {
    display: inline;
    background: 0 0
}

.shaka-controls-container[shown=true]~.shaka-text-container {
    transition-delay: 0s
}

.shaka-spinner-container {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    flex-shrink: 1;
    display: flex;
    justify-content: center;
    align-items: center
}

.shaka-video-container:not([shaka-controls=true]) .shaka-spinner-container {
    display: none
}

.shaka-hidden-fast-forward-container,
.shaka-hidden-rewind-container {
    height: 100%;
    width: 40%;
    flex-shrink: 1
}

.shaka-hidden-fast-forward-container {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    left: 60%
}

.shaka-hidden-rewind-container {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0
}

.shaka-video-container.no-cursor,
.shaka-video-container.no-cursor * {
    cursor: none !important
}

.shaka-play-button {
    box-sizing: border-box;
    padding: 7.5%;
    width: 0;
    height: 0;
    margin: 0;
    border-radius: 50%;
    box-shadow: #0000001a 0 0 20px;
    border: none;
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #ffffffe6;
    opacity: 0;
    transition: opacity cubic-bezier(.4, 0, .6, 1) .6s
}

.shaka-controls-container[casting=true] .shaka-play-button,
.shaka-controls-container[shown=true] .shaka-play-button {
    opacity: 1
}

.shaka-play-button[icon=play] {
    background-image: url(data:image/svg+xml,%3Csvg%20fill%3D%22%23000000%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M8%205v14l11-7z%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%0A%3C%2Fsvg%3E)
}

.shaka-play-button[icon=pause] {
    background-image: url(data:image/svg+xml,%3Csvg%20fill%3D%22%23000000%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M6%2019h4V5H6v14zm8-14v14h4V5h-4z%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%0A%3C%2Fsvg%3E)
}

.shaka-play-button[icon=replay] {
    background-image: url(data:image/svg+xml,%3Csvg%20fill%3D%22%231f1f1f%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cpath%20d%3D%22M480-80q-75%200-140.5-28.5t-114-77q-48.5-48.5-77-114T120-440h80q0%20117%2081.5%20198.5T480-160q117%200%20198.5-81.5T760-440q0-117-81.5-198.5T480-720h-6l62%2062-56%2058-160-160%20160-160%2056%2058-62%2062h6q75%200%20140.5%2028.5t114%2077q48.5%2048.5%2077%20114T840-440q0%2075-28.5%20140.5t-77%20114q-48.5%2048.5-114%2077T480-80Z%22%2F%3E%0A%3C%2Fsvg%3E)
}

.shaka-current-time {
    font-size: 14px;
    color: #fff;
    cursor: pointer;
    width: auto;
    padding: 0 5px
}

.shaka-current-time[disabled] {
    background-color: transparent;
    color: #fff;
    cursor: default
}

.shaka-controls-container button:focus,
.shaka-controls-container input:focus {
    outline: 1px solid Highlight
}

.shaka-controls-container button:-moz-focus-inner,
.shaka-controls-container input:-moz-focus-outer {
    outline: 0;
    border: 0
}

.shaka-controls-container:not(.shaka-keyboard-navigation) button:focus,
.shaka-controls-container:not(.shaka-keyboard-navigation) input:focus {
    outline: 0
}

.shaka-fast-forward-container,
.shaka-rewind-container {
    height: 100%;
    width: 100%;
    flex-shrink: 1;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 0;
    border: none;
    color: #fff;
    background-color: #00000080;
    cursor: default;
    font-size: 20px;
    opacity: 0;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none
}

.shaka-fast-forward-container {
    border-radius: 40% 0 0 40%
}

.shaka-rewind-container {
    border-radius: 0 40% 40% 0
}

.shaka-forward-rewind-container-icon {
    font-family: Material Icons Round;
    font-size: 34px
}

.shaka-range-container {
    position: relative;
    top: 0;
    left: 0;
    margin: 4px 6px;
    height: 4px;
    border-radius: 4px;
    background: #fff;
    box-sizing: content-box
}

.shaka-volume-bar-container {
    width: 100px;
    padding: 0;
    transition-property: opacity, width;
    transition-duration: .25s;
    transition-timing-function: cubic-bezier(.4, 0, .6, 1)
}

.shaka-volume-bar-container:hover {
    width: 100px !important;
    opacity: 1 !important
}

@media (max-width:474px) {
    .shaka-volume-bar-container {
        width: 50px
    }
    .shaka-volume-bar-container:hover {
        width: 50px !important
    }
    .shaka-mute-button:hover+.shaka-volume-bar-container {
        width: 50px;
        opacity: 1
    }
}

.shaka-mute-button+.shaka-volume-bar-container:not(:focus-within) {
    width: 0;
    opacity: 0
}

@media (min-width:475px) {
    .shaka-mute-button:hover+.shaka-volume-bar-container {
        width: 100px;
        opacity: 1
    }
}

.shaka-range-element {
    -webkit-appearance: none;
    background: 0 0;
    cursor: pointer;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    height: 12px;
    top: -4px;
    z-index: 1
}

.shaka-range-element::-webkit-slider-runnable-track {
    width: 100%;
    cursor: pointer;
    height: 12px;
    background: 0 0;
    color: transparent;
    border: none
}

.shaka-range-element::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    border-radius: 12px;
    height: 12px;
    width: 12px;
    background: #fff
}

.shaka-range-element::-moz-range-track {
    width: 100%;
    cursor: pointer;
    height: 12px;
    background: 0 0;
    color: transparent;
    border: none
}

.shaka-range-element::-moz-range-thumb {
    -webkit-appearance: none;
    border: none;
    border-radius: 12px;
    height: 12px;
    width: 12px;
    background: #fff
}

.shaka-seek-bar-container {
    opacity: 0;
    transition: opacity cubic-bezier(.4, 0, .6, 1) .6s;
    top: 5px;
    height: 5px;
    margin-bottom: 0;
    background-clip: padding-box !important;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent
}

.shaka-controls-container[casting=true] .shaka-seek-bar-container,
.shaka-controls-container[shown=true] .shaka-seek-bar-container {
    opacity: 1
}

.shaka-seek-bar-container .shaka-seek-bar {
    transition: opacity cubic-bezier(.4, 0, .6, 1) .25s;
    opacity: 0
}

.shaka-seek-bar-container:hover .shaka-seek-bar {
    opacity: 1
}

.shaka-ad-markers {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%
}

.shaka-spacer {
    cursor: default;
    flex-shrink: 1;
    flex-grow: 1;
    margin: 0
}

.shaka-overflow-menu,
.shaka-settings-menu {
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: white rgba(0, 0, 0, .5);
    scrollbar-width: thin;
    white-space: nowrap;
    background: #1c1c1ce6;
    border-radius: 15px;
    max-height: 250px;
    min-width: 190px;
    padding: 5px 0;
    opacity: 0;
    transition: opacity cubic-bezier(.4, 0, .6, 1) .6s;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    z-index: 2;
    right: 15px;
    bottom: 62px
}

.shaka-controls-container[casting=true] .shaka-overflow-menu,
.shaka-controls-container[casting=true] .shaka-settings-menu,
.shaka-controls-container[shown=true] .shaka-overflow-menu,
.shaka-controls-container[shown=true] .shaka-settings-menu {
    opacity: 1
}

.shaka-overflow-menu button,
.shaka-settings-menu button {
    font-size: 14px;
    background: 0 0;
    color: #fff;
    border: none;
    min-height: 30px;
    padding: 10px;
    display: flex;
    align-items: center;
    cursor: pointer
}

.shaka-overflow-menu button:hover,
.shaka-settings-menu button:hover {
    background: #ffffff1a
}

.shaka-overflow-menu button label,
.shaka-settings-menu button label {
    cursor: pointer
}

.shaka-keyboard-navigation .shaka-overflow-menu button:focus,
.shaka-keyboard-navigation .shaka-settings-menu button:focus {
    background: #ffffff1a
}

.shaka-overflow-menu i,
.shaka-settings-menu i {
    padding-left: 0;
    padding-right: 10px
}

.shaka-overflow-menu i.shaka-chosen-item,
.shaka-settings-menu i.shaka-chosen-item {
    order: -1;
    line-height: 17px;
    font-size: 18px
}

.shaka-overflow-menu.shaka-low-position,
.shaka-settings-menu.shaka-low-position {
    bottom: 48px
}

.shaka-overflow-menu span {
    text-align: left
}

.shaka-overflow-button-label {
    position: relative;
    display: flex;
    flex-direction: column
}

.shaka-overflow-button-label-inline {
    box-sizing: border-box;
    flex-direction: row;
    justify-content: space-between;
    width: calc(100% - 34px);
    padding-right: 28px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjRweCIgZmlsbD0iI2VlZWVlZSI+PHBhdGggZD0iTTAgMGgyNHYyNEgwVjB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTguNTkgMTYuNTlMMTMuMTcgMTIgOC41OSA3LjQxIDEwIDZsNiA2LTYgNi0xLjQxLTEuNDF6Ii8+PC9zdmc+);
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 24px 24px
}

.shaka-simple-overflow-button-label-inline {
    box-sizing: border-box;
    flex-direction: row;
    justify-content: space-between;
    width: calc(100% - 50px)
}

.shaka-current-selection-span {
    font-size: 12px;
    padding-left: 10px
}

.shaka-current-auto-quality {
    margin-left: 5px;
    font-size: 11px;
    color: #ccc
}

.shaka-current-quality-mark,
.shaka-quality-mark {
    color: red;
    margin-left: 2px !important;
    font-size: 10px;
    height: 17px
}

.shaka-quality-mark {
    line-height: 6px
}

.shaka-overflow-playback-rate-mark,
.shaka-overflow-quality-mark {
    background: red;
    color: #fff;
    border-radius: 2px;
    font-family: Roboto, sans-serif, TengwarTelcontar;
    font-size: 10px;
    font-weight: 700;
    line-height: 10px;
    text-shadow: none;
    padding: 1px;
    position: absolute;
    right: 4px;
    top: 10px
}

.shaka-settings-menu span {
    margin-left: 28px
}

.shaka-settings-menu span.shaka-chosen-item {
    margin-left: 0
}

.shaka-settings-menu .shaka-chapter {
    margin-left: 10px
}

.shaka-back-to-overflow-button {
    border-bottom: 1px solid rgba(255, 255, 255, .2) !important
}

.shaka-back-to-overflow-button span {
    margin-left: 0
}

.shaka-back-to-overflow-button i {
    padding-right: 10px;
    font-size: 18px !important
}

.shaka-back-to-overflow-button:hover {
    background: 0 0 !important
}

.shaka-controls-container[ad-active=true] {
    pointer-events: none
}

.shaka-controls-container[ad-active=true] .shaka-bottom-controls {
    pointer-events: auto
}

.shaka-client-side-ad-container,
.shaka-server-side-ad-container {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0
}

.shaka-video-container[shaka-controls=true] .shaka-client-side-ad-container iframe,
.shaka-video-container[shaka-controls=true] .shaka-server-side-ad-container iframe {
    height: 90%
}

.shaka-server-side-ad-container {
    width: 100%;
    height: 100%;
    flex-shrink: 1
}

.shaka-server-side-ad-container:not([ad-active=true]) {
    pointer-events: none
}

.shaka-ad-controls {
    display: flex;
    flex-direction: row;
    z-index: 1;
    padding-bottom: 1%
}

.shaka-video-container:not([shaka-controls=true]) .shaka-ad-controls {
    display: none
}

.shaka-ad-controls button,
.shaka-ad-controls div {
    color: #fff;
    font-size: initial
}

.shaka-ad-info {
    font-size: 14px;
    color: #fff;
    width: auto;
    padding: 0 5px
}

.shaka-ad-info[disabled] {
    background-color: transparent;
    color: #fff;
    cursor: default;
    padding: 0
}

.shaka-skip-ad-container {
    position: relative;
    right: -1%;
    display: flex;
    flex-direction: row;
    margin: 0 0 0 auto
}

.shaka-skip-ad-button {
    padding: 5px 15px;
    background: #000000b3;
    border: none;
    cursor: pointer
}

.shaka-skip-ad-button:disabled {
    background: #0000004d
}

.shaka-skip-ad-counter {
    padding: 5px;
    background: #000000b3;
    margin: 0
}

/*!
* @license
* The tooltip is based on https://github.com/felipefialho/css-components/
* Local modifications have been performed.
*
* Copyright (c) 2017 Felipe Fialho
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/

.shaka-tooltips-on {
    overflow: visible
}

.shaka-tooltips-on>.shaka-tooltip,
.shaka-tooltips-on>.shaka-tooltip-status {
    position: relative
}

.shaka-tooltips-on>.shaka-tooltip-status:active:after,
.shaka-tooltips-on>.shaka-tooltip-status:focus-visible:after,
.shaka-tooltips-on>.shaka-tooltip-status:hover:after,
.shaka-tooltips-on>.shaka-tooltip:active:after,
.shaka-tooltips-on>.shaka-tooltip:focus-visible:after,
.shaka-tooltips-on>.shaka-tooltip:hover:after {
    content: attr(aria-label);
    font-family: Roboto, sans-serif, TengwarTelcontar;
    line-height: 20px;
    white-space: nowrap;
    font-size: 14px;
    background: #00000080;
    color: #fff;
    border-radius: 2px;
    padding: 2px 10px;
    position: absolute;
    bottom: 62px;
    left: 24px;
    transform: translate(-50%)
}

.shaka-tooltips-on.shaka-tooltips-low-position>.shaka-tooltip:active:after,
.shaka-tooltips-on.shaka-tooltips-low-position>.shaka-tooltip:focus-visible:after,
.shaka-tooltips-on.shaka-tooltips-low-position>.shaka-tooltip:hover:after {
    bottom: 48px
}

.shaka-tooltips-on>.shaka-tooltip-status:active:after,
.shaka-tooltips-on>.shaka-tooltip-status:focus-visible:after,
.shaka-tooltips-on>.shaka-tooltip-status:hover:after {
    content: attr(aria-label) " (" attr(shaka-status) ")"
}

.shaka-tooltips-on button:first-child:active:after,
.shaka-tooltips-on button:first-child:focus-visible:after,
.shaka-tooltips-on button:first-child:hover:after {
    left: 0;
    transform: translate(0)
}

.shaka-tooltips-on button:last-child:active:after,
.shaka-tooltips-on button:last-child:focus-visible:after,
.shaka-tooltips-on button:last-child:hover:after {
    left: 48px;
    transform: translate(-100%)
}

#shaka-player-ui-thumbnail-container {
    background-color: #000;
    border: 1px solid #000;
    box-shadow: 0 8px 8px #00000080;
    min-width: 150px;
    overflow: hidden;
    position: absolute;
    visibility: hidden;
    width: 15%;
    z-index: 1;
    pointer-events: none
}

#shaka-player-ui-thumbnail-container #shaka-player-ui-thumbnail-image {
    position: absolute
}

#shaka-player-ui-thumbnail-container #shaka-player-ui-thumbnail-time-container {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    display: flex;
    justify-content: center
}

#shaka-player-ui-thumbnail-container #shaka-player-ui-thumbnail-time-container #shaka-player-ui-thumbnail-time {
    background-color: #00000080;
    border-radius: 14px;
    color: #fff;
    font-size: 14px;
    padding: 0 5px
}

#shaka-player-ui-thumbnail-container.portrait-thumbnail {
    min-width: 75px;
    width: 7.5%
}

#shaka-player-ui-time-container {
    background-color: #00000080;
    border-radius: 5px;
    color: #fff;
    display: flex;
    font-size: 14px;
    justify-content: center;
    overflow: hidden;
    padding: 0 3px;
    position: absolute;
    visibility: hidden;
    z-index: 1
}

@font-face {
    font-family: Roboto;
    font-style: normal;
    font-weight: 400;
    font-stretch: normal;
    src: url(https://fonts.gstatic.com/s/roboto/v48/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbVmUiA8.ttf) format("truetype")
}

@font-face {
    font-family: Material Icons Round;
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialiconsround/v109/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmM.otf) format("opentype")
}

.material-icons-round {
    font-family: Material Icons Round;
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr
}

.three-d-player {
    position: relative
}

.three-d-player__overlay {
    position: absolute;
    display: flex;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.three-d-player__overlay--hidden {
    display: none
}

.tooltip {
    position: relative
}

span.tooltip {
    display: inline-block
}

.tooltip__overlay {
    box-shadow: var(--bubble-shadow);
    display: none;
    font-size: 14px;
    left: 0;
    max-width: 344px;
    position: absolute;
    top: 0;
    transform: scaleX(1);
    width: max-content
}

.tooltip__mask,
.tooltip__overlay {
    border-radius: var(--bubble-border-radius, var(--border-radius-50));
    z-index: 1
}

.tooltip__mask {
    background-color: var( --tooltip-background-color, var(--color-background-inverse));
    color: var(--tooltip-foreground-color, var(--color-foreground-on-inverse));
    position: relative
}

span.tooltip__mask {
    display: block
}

.tooltip__cell {
    display: flex;
    overflow-wrap: anywhere;
    padding: var(--spacing-100) var(--spacing-200);
    word-break: normal
}

.tooltip__cell a {
    color: var(--tooltip-foreground-color, var(--color-foreground-on-inverse))
}

.tooltip__cell a:focus {
    outline: 1px dashed currentColor
}

.tooltip__content {
    flex-grow: 1
}

.tooltip__content p {
    margin: 0
}

.tooltip__content p:not(:first-of-type) {
    margin-top: var(--spacing-50)
}

button.tooltip__close {
    align-self: flex-start;
    background: none;
    border: 0;
    flex-shrink: 0;
    height: var(--spacing-400);
    margin: calc(var(--spacing-100) * -1) calc(var(--spacing-100) * -1) 0 var(--spacing-100);
    padding: 0;
    white-space: nowrap;
    width: 32px
}

.tooltip__pointer {
    background-color: var( --tooltip-background-color, var(--color-background-inverse));
    height: 8px;
    position: absolute;
    transform: rotate(45deg);
    width: 8px;
    z-index: 0
}

.tooltip__pointer--top-left {
    left: 12px;
    top: -4px
}

.tooltip__pointer--top {
    left: calc(50% - 4px);
    top: -4px
}

.tooltip__pointer--top-right {
    left: auto;
    right: 12px;
    top: -4px
}

.tooltip__pointer--bottom-left {
    bottom: -4px;
    left: 12px;
    top: auto
}

.tooltip__pointer--bottom {
    bottom: -4px;
    left: calc(50% - 4px);
    top: auto
}

.tooltip__pointer--bottom-right {
    bottom: -4px;
    left: auto;
    right: 12px;
    top: auto
}

.tooltip__pointer--left {
    left: -4px;
    top: calc(50% - 4px)
}

.tooltip__pointer--left-bottom {
    bottom: 12px;
    left: -4px;
    top: auto
}

.tooltip__pointer--left-top {
    left: -4px;
    top: 12px
}

.tooltip__pointer--right {
    left: auto;
    right: -4px;
    top: calc(50% - 4px)
}

.tooltip__pointer--right-bottom {
    bottom: 12px;
    left: auto;
    right: -4px;
    top: auto
}

.tooltip__pointer--right-top {
    left: auto;
    right: -4px;
    top: 12px
}

.tooltip--expanded .tooltip__overlay,
.tooltip__host[aria-expanded=true]~.tooltip__overlay {
    display: block
}

@media (min-width: 512px) {
    .tooltip__overlay {
        max-width: 400px
    }
}

.avatar {
    align-items: center;
    border-radius: 50%;
    display: inline-flex;
    font-size: var(--font-size-large-2);
    font-weight: var(--font-weight-bold);
    height: 48px;
    justify-content: center;
    line-height: 48px;
    overflow: hidden;
    position: relative;
    width: 48px
}

.avatar:after {
    background: #0000000d;
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0
}

.avatar>img {
    display: inline-block;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain
}

.avatar>svg {
    height: 100%;
    width: 100%
}

.avatar>img {
    height: 48px;
    object-fit: cover;
    width: 48px
}

.avatar--fit>img {
    object-fit: contain
}

.avatar--teal {
    background-color: #84b4fb;
    color: #002a69
}

.avatar--light-teal {
    background-color: #44ccd5;
    color: #07465a
}

.avatar--green {
    background-color: #4ce160;
    color: #1b561a
}

.avatar--lime {
    background-color: #c1d737;
    color: #4e4e0c
}

.avatar--yellow {
    background-color: #ffbd14;
    color: #553b06
}

.avatar--orange {
    background-color: #ff8806;
    color: #562501
}

.avatar--magenta {
    background-color: #cc9ef0;
    color: #3e135f
}

.avatar--pink {
    background-color: #f79cc8;
    color: #4b112d
}

.avatar--32,
.avatar--32>img {
    font-size: var(--font-size-medium);
    height: 32px;
    line-height: 32px;
    width: 32px
}

.avatar--40,
.avatar--40>img {
    font-size: var(--font-size-large-1);
    height: 40px;
    line-height: 40px;
    width: 40px
}

.avatar--48,
.avatar--48>img {
    font-size: var(--font-size-large-2);
    height: 48px;
    line-height: 48px;
    width: 48px
}

.avatar--56,
.avatar--56>img {
    font-size: var(--font-size-giant-1);
    height: 56px;
    line-height: 56px;
    width: 56px
}

.avatar--64,
.avatar--64>img {
    font-size: var(--font-size-giant-2);
    height: 64px;
    line-height: 64px;
    width: 64px
}

.avatar--96,
.avatar--96>img {
    font-size: var(--font-size-giant-3);
    height: 96px;
    line-height: 96px;
    width: 96px
}

.avatar--128,
.avatar--128>img {
    font-size: var(--font-size-giant-4);
    height: 128px;
    line-height: 128px;
    width: 128px
}

.section-notice {
    background-color: var( --section-notice-default-background-color, var(--color-background-secondary));
    border-radius: var(--section-notice-border-radius, var(--border-radius-50));
    font-size: var(--font-size-default);
    margin: 8px 0;
    padding: 16px
}

div[role=region].section-notice,
section.section-notice {
    display: grid;
    grid-template-columns: 32px auto auto auto
}

.section-notice--education {
    background-color: var( --section-notice-education-background-color, var(--color-background-education))
}

span[role=region].section-notice {
    display: grid
}

.section-notice__title {
    font-size: var(--font-size-default);
    font-weight: 400;
    margin: 0
}

.section-notice__cta a {
    white-space: nowrap
}

.section-notice__title:not(:only-child) {
    font-weight: 700
}

.section-notice button.fake-link {
    font-size: var(--font-size-default);
    font-weight: 700
}

.section-notice a,
.section-notice button.fake-link,
.section-notice button.fake-link:hover {
    color: var( --section-notice-foreground-color, var(--color-foreground-primary))
}

.section-notice a {
    font-size: var(--font-size-default);
    font-weight: 700
}

.section-notice a:hover {
    color: var( --section-notice-foreground-color, var(--color-foreground-primary))
}

.section-notice .icon {
    vertical-align: top
}

.section-notice__header {
    grid-column: 1;
    grid-row: 1;
    height: var(--spacing-200);
    margin-right: var(--spacing-200);
    margin-top: 1px
}

.section-notice__main {
    grid-column: 1 / 3;
    grid-row: 1;
    margin-right: var(--spacing-200)
}

.section-notice__header+.section-notice__main,
.section-notice__header~.section-notice__cta {
    grid-column: 2
}

.section-notice__footer {
    grid-column: 4;
    grid-row: 1;
    justify-self: flex-end;
    margin-top: 2px
}

.section-notice__main p {
    font-size: var(--font-size-default);
    margin: 0
}

p.section-notice__cta {
    grid-column: 1 / 3;
    grid-row: 2;
    justify-self: flex-start;
    margin-bottom: 0;
    margin-top: var(--spacing-200)
}

.section-notice__main .section-notice__title~p {
    margin: var(--spacing-50) 0 0
}

@media (min-width: 512px) {
    div[role=region].section-notice,
    section.section-notice {
        margin: var(--spacing-200) 0
    }
    p.section-notice__cta {
        grid-column: 4;
        grid-row: 1;
        justify-self: flex-end;
        margin-right: var(--spacing-200);
        margin-top: 0;
        padding-right: var(--spacing-200)
    }
    .section-notice__header~.section-notice__cta {
        grid-column: 4
    }
    .section-notice__footer {
        padding-left: var(--spacing-200)
    }
}

[dir=rtl] .section-notice__footer {
    justify-self: flex-start;
    margin-left: 0;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0
}

[dir=rtl] .section-notice__main {
    padding-right: 0
}

[dir=rtl] p.section-notice__cta {
    margin-left: 16px;
    padding-left: 16px
}

.section-notice__header:has(svg[class*="24"]) {
    height: var(--spacing-300)
}

.section-notice__header:has(svg[class*="24"])+.section-notice__main {
    padding-top: 2px
}

summary.details__summary {
    align-items: center;
    border-radius: var(--expand-btn-border-radius, var(--border-radius-50));
    box-sizing: border-box;
    color: var( --details-summary-foreground-color, var(--color-foreground-primary));
    display: inline-flex;
    font-size: var(--font-size-default);
    font-weight: var(--font-weight-bold);
    list-style-position: inside;
    list-style-type: none;
    padding: 12px 8px
}

summary.details__summary:before {
    content: none
}

summary.details__summary::-webkit-details-marker {
    display: none
}

summary.details__summary:focus,
summary.details__summary:hover {
    background-color: var(--color-state-secondary-hover);
    outline: 1
}

summary.details__summary:active {
    background-color: var(--color-state-secondary-active);
    outline: 1
}

summary.details__summary--center {
    justify-content: center;
    width: 100%
}

summary.details__summary--small {
    font-size: var(--font-size-small);
    padding: 4px 8px
}

span.details__icon {
    margin-left: 8px
}

span.details__icon[hidden] {
    display: inline-flex
}

details.details[open] span.details__icon {
    transform: rotate(180deg)
}

details.details[open] summary.details__summary:before {
    content: none
}

details.details summary:focus:not(:focus-visible) {
    outline: none
}

.section-title {
    align-items: baseline;
    display: flex;
    margin: 30px 0 10px
}

.section-title__title-container {
    max-width: 75%
}

.section-title__title {
    font-size: var(--font-size-large-1);
    font-weight: var(--font-weight-bold);
    line-height: 28px;
    margin: 0
}

.section-title__subtitle {
    color: var( --section-title-subtitle-color, var(--color-foreground-secondary));
    font-size: var(--font-size-default);
    line-height: 20px
}

.section-title__title svg.icon {
    background-color: var(--color-background-secondary);
    border-radius: 12px;
    margin-left: var(--spacing-100);
    padding: 7px
}

.section-title__info {
    bottom: -3px;
    margin: 0 var(--spacing-300) 0 var(--spacing-100);
    position: relative
}

.section-title__overflow {
    margin: 0 var(--spacing-300) 0 auto
}

.section-title__cta,
.section-title__overflow {
    align-items: baseline;
    display: flex;
    height: var(--spacing-400);
    margin-left: auto;
    margin-right: 0
}

.section-title button.icon-btn,
.section-title__overflow button.icon-btn {
    height: var(--spacing-400);
    min-width: var(--spacing-400);
    width: var(--spacing-400)
}

.section-title__title-container+button.icon-btn {
    margin-left: var(--spacing-100)
}

.section-title--large .section-title__title {
    font-size: var(--font-size-large-1);
    font-weight: var(--font-weight-bold);
    line-height: 28px
}

.section-title--large>.section-title__cta,
.section-title--large>.section-title__info,
.section-title--large>.section-title__overflow {
    height: var(--spacing-400)
}

[dir=rtl] .section-title__title svg.icon {
    transform: rotate(180deg)
}

[dir=rtl] .section-title__cta,
[dir=rtl] .section-title__overflow {
    margin-left: 0;
    margin-right: auto
}

[dir=rtl] .section-title__info {
    margin: 0 var(--spacing-100) 0 var(--spacing-300)
}

@media (min-width: 512px) {
    .section-title__title {
        font-size: var(--font-size-large-2);
        font-weight: var(--font-weight-bold);
        line-height: 32px
    }
    .section-title__subtitle {
        font-size: var(--font-size-medium);
        line-height: 24px
    }
}

.fake-tabs,
.tabs {
    margin-top: var(--spacing-200)
}

span.fake-tabs,
span.tabs {
    display: inline-block
}

div.tabs__items[role=tablist],
ul.fake-tabs__items {
    font-size: var(--font-size-default)
}

ul.fake-tabs__items {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0
}

div.tabs__item[role=tab] {
    cursor: default
}

div.tabs__item[role=tab],
li.fake-tabs__item {
    display: inline-block;
    position: relative;
    -webkit-tap-highlight-color: var(--color-background-secondary)
}

div.tabs__item[role=tab]:not(:last-child),
li.fake-tabs__item:not(:last-child) {
    margin-right: var(--spacing-450)
}

li.fake-tabs__item>a {
    padding: 1px 0;
    -webkit-text-decoration: none;
    text-decoration: none
}

div.tabs__item[role=tab]>span {
    padding: 2px 0
}

div.tabs__item[role=tab]>span,
li.fake-tabs__item>a {
    color: var(--tabs-item-foreground-color, var(--color-foreground-secondary));
    display: inline-block
}

div.tabs__item[role=tab]>span:after,
li.fake-tabs__item>a:after {
    background-color: initial;
    border-radius: 6px;
    content: "";
    display: block;
    height: 2px;
    margin-top: var(--spacing-50);
    position: absolute;
    width: 100%
}

div.tabs__item[role=tab][aria-selected=true]>span,
li.fake-tabs__item>a[aria-current] {
    color: var( --tabs-item-selected-foreground-color, var(--color-foreground-primary))
}

div.tabs__item[role=tab][aria-selected=true]>span:after,
li.fake-tabs__item>a[aria-current]:after {
    background-color: currentColor
}

div.tabs__item[role=tab]:focus:not(:focus-visible),
li.fake-tabs__item a:focus:not(:focus-visible) {
    outline: none
}

div.tabs__item[role=tab]:not([aria-selected=true]):focus>span,
div.tabs__item[role=tab]:not([aria-selected=true]):hover>span,
li.fake-tabs__item>a:not([aria-current]):focus,
li.fake-tabs__item>a:not([aria-current]):hover {
    color: var( --tabs-item-hover-foreground-color, var(--color-foreground-secondary))
}

div.tabs__item[role=tab]:not([aria-selected=true]):focus>span:after,
div.tabs__item[role=tab]:not([aria-selected=true]):hover>span:after,
li.fake-tabs__item>a:not([aria-current]):focus:after,
li.fake-tabs__item>a:not([aria-current]):hover:after {
    background-color: currentColor
}

.fake-tabs__cell,
.tabs__cell {
    margin: var(--spacing-200) 0
}

@keyframes skeleton-fade-out {
    0% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

@keyframes skeleton-fade-in {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

::view-transition-new(skeleton-transition-*) {
    animation: skeleton-fade-in var(--motion-duration-medium-2) var(--motion-easing-continuous)
}

::view-transition-old(skeleton-transition-*) {
    animation: skeleton-fade-out var(--motion-duration-short-3) var(--motion-easing-continuous)
}

.skeleton {
    container-name: skeleton-container;
    container-type: inline-size;
    cursor: progress;
    width: 100%
}

.skeleton__avatar,
.skeleton__button,
.skeleton__image,
.skeleton__text,
.skeleton__textbox {
    background: var(--skeleton-background, var(--color-loading-fill));
    width: 100%
}

.skeleton__avatar {
    border-radius: var(--avatar-border-radius, 50%);
    height: 48px;
    width: 48px
}

.skeleton__button {
    border-radius: var(--btn-border-radius, 20px);
    height: 40px
}

.skeleton__button--small {
    border-radius: var(--btn-border-radius, 16px);
    height: 32px
}

.skeleton__button--large {
    border-radius: var(--btn-border-radius, 24px);
    height: 48px
}

.skeleton__text {
    border-radius: var(--text-border-radius, 3px);
    height: 16px;
    width: calc(100% - var(--spacing-300))
}

.skeleton__text:after {
    height: 16px;
    margin-top: calc(16px + var(--spacing-100))
}

.skeleton__text--large {
    height: 24px
}

.skeleton__text--large:after {
    height: 24px;
    margin-top: calc(24px + var(--spacing-100))
}

.skeleton__text--multiline {
    margin-bottom: var(--spacing-300);
    position: relative;
    width: calc(100% - var(--spacing-300))
}

.skeleton__text--multiline:after {
    background: inherit;
    content: "";
    position: absolute;
    width: calc(100% - var(--spacing-700))
}

.skeleton__text--large.skeleton__text--multiline {
    margin-bottom: var(--spacing-400)
}

.skeleton__textbox {
    border-radius: var(--textbox-border-radius, var(--border-radius-50));
    height: 48px
}

.skeleton__image {
    border-radius: var(--image-border-radius, var(--border-radius-50));
    height: 100%;
    max-width: none
}

.skeleton__image:after {
    bottom: 0;
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%
}

span.skeleton__avatar,
span.skeleton__button,
span.skeleton__image,
span.skeleton__text,
span.skeleton__textbox {
    display: inline-block
}

span.skeleton__avatar:not(:last-child),
span.skeleton__button:not(:last-child),
span.skeleton__image:not(:last-child),
span.skeleton__text:not(:last-child),
span.skeleton__textbox:not(:last-child) {
    margin-right: var(--spacing-100)
}

div.skeleton__avatar:not(:last-child),
div.skeleton__button:not(:last-child),
div.skeleton__image:not(:last-child),
div.skeleton__text:not(:last-child),
div.skeleton__textbox:not(:last-child) {
    margin-bottom: var(--spacing-150)
}

.skeleton--on-secondary {
    --skeleton-background: var(--color-loading-fill-on-secondary)
}

.skeleton--purple {
    --skeleton-background: var(--color-loading-ai-gradient-purple-subtle)
}

.skeleton--green {
    --skeleton-background: var(--color-loading-ai-gradient-green-subtle)
}

.skeleton--blue {
    --skeleton-background: var(--color-loading-ai-gradient-blue-subtle)
}

@media (prefers-reduced-motion: no-preference) {
    @keyframes on-primary {
        0% {
            background-color: var(--color-loading-first)
        }
        to {
            background-color: var(--color-loading-second)
        }
    }
    @keyframes on-secondary {
        0% {
            background-color: var(--color-loading-on-secondary-first)
        }
        to {
            background-color: var(--color-loading-on-secondary-second)
        }
    }
    .skeleton__avatar,
    .skeleton__button,
    .skeleton__image,
    .skeleton__text,
    .skeleton__textbox {
        animation: var(--motion-duration-long-3) var(--motion-easing-continuous) infinite alternate on-primary
    }
    .skeleton--on-secondary .skeleton__avatar,
    .skeleton--on-secondary .skeleton__button,
    .skeleton--on-secondary .skeleton__image,
    .skeleton--on-secondary .skeleton__text,
    .skeleton--on-secondary .skeleton__textbox {
        animation: var(--motion-duration-long-3) var(--motion-easing-continuous) infinite alternate on-secondary
    }
}

@container skeleton-container (width > 79px) {
    .skeleton__image {
        border-radius: var(--image-border-radius, var(--border-radius-100))
    }
}

[dir=rtl] .skeleton__text--multiline:after {
    left: var(--spacing-700)
}

.page-notice {
    background-color: var( --page-notice-general-background-color, var(--color-background-inverse));
    border-color: var( --page-notice-general-border-color, var(--color-background-inverse));
    border-style: solid;
    border-width: 1px;
    color: var(--page-notice-color, var(--color-foreground-on-inverse));
    font-size: var(--font-size-default);
    margin: var(--spacing-100) 0;
    padding: var(--spacing-200)
}

div[role=region].page-notice,
section.page-notice {
    display: grid;
    grid-template-columns: 32px auto auto auto
}

span[role=region].page-notice {
    display: grid
}

.page-notice__title {
    font-size: var(--font-size-default);
    font-weight: 400;
    margin: 1px 0 0
}

.page-notice a,
.page-notice__title:not(:only-child) {
    font-weight: 700
}

.page-notice a {
    color: var(--page-notice-color, var(--color-foreground-on-inverse));
    font-size: var(--font-size-default)
}

.page-notice__cta a {
    white-space: nowrap
}

.page-notice__dismiss {
    cursor: pointer
}

.page-notice a:hover,
.page-notice button.fake-link {
    color: var(--page-notice-color, var(--color-foreground-on-inverse))
}

.page-notice button.fake-link {
    font-size: var(--font-size-default);
    font-weight: 700
}

.page-notice button.fake-link:hover {
    color: var(--page-notice-color, var(--color-foreground-on-inverse))
}

.page-notice a:focus-visible,
.page-notice button.fake-link:focus-visible {
    outline: 2px solid var(--color-foreground-on-inverse);
    outline-offset: 2px
}

.page-notice--attention {
    background-color: var( --page-notice-attention-background-color, var(--color-background-attention));
    border-color: var( --page-notice-attention-border-color, var(--color-stroke-attention))
}

.page-notice--attention .page-notice__header svg {
    color: var( --page-notice-attention-icon-color, var(--color-foreground-on-attention))
}

.page-notice--confirmation {
    background-color: var( --page-notice-confirmation-background-color, var(--color-background-confirmation));
    border-color: var( --page-notice-confirmation-border-color, var(--color-stroke-confirmation))
}

.page-notice--confirmation .page-notice__header svg {
    color: var( --page-notice-confirmation-icon-color, var(--color-foreground-on-confirmation))
}

.page-notice--information {
    background-color: var( --page-notice-information-background-color, var(--color-background-information));
    border-color: var( --page-notice-information-border-color, var(--color-stroke-information))
}

.page-notice--information .page-notice__header svg {
    color: var( --page-notice-information-icon-color, var(--color-foreground-on-information))
}

.page-notice--general {
    background-color: var( --page-notice-general-background-color, var(--color-background-inverse))
}

.page-notice__header {
    grid-column: 1
}

.page-notice__header,
.page-notice__main {
    grid-row: 1;
    margin-right: var(--spacing-200)
}

.page-notice__main {
    grid-column: 1 / 3
}

.page-notice__header+.page-notice__main {
    grid-column: 2
}

.page-notice__footer {
    grid-column: 4;
    grid-row: 1;
    text-align: right
}

.page-notice__main p {
    font-size: var(--font-size-default);
    margin: 2px 0 0
}

.page-notice__main .page-notice__title~p {
    margin: var(--spacing-50) 0 0
}

p.page-notice__cta {
    grid-column: 2;
    grid-row: 2;
    justify-self: flex-start;
    margin-bottom: 0;
    margin-right: var(--spacing-200);
    margin-top: var(--spacing-200)
}

@media (min-width: 512px) {
    div[role=region].page-notice,
    section.page-notice {
        margin: var(--spacing-200) 0
    }
    .page-notice__title {
        margin-bottom: 2px
    }
    p.page-notice__cta {
        grid-column: 4;
        grid-row: 1;
        justify-self: flex-end;
        margin-top: 1px;
        padding-right: var(--spacing-200)
    }
    .page-notice__footer {
        justify-self: flex-end;
        margin-top: 0
    }
}

[dir=rtl] .page-notice__footer {
    margin-left: 0;
    margin-right: auto;
    padding-left: 0;
    padding-right: 16px
}

.listbox-button {
    line-height: normal;
    position: relative;
    vertical-align: bottom
}

span.listbox-button {
    display: inline-block
}

.listbox-button .btn {
    padding-left: 15px;
    padding-right: 15px
}

span.listbox-button--fluid,
span.listbox-button--fluid .btn,
span.listbox-button--fluid .expand-btn,
span.listbox-button--fluid div.listbox-button__listbox {
    width: 100%
}

div.listbox-button__listbox {
    background-color: var( --listbox-button-listbox-background-color, var(--color-background-elevated));
    border-radius: var( --listbox-button-listbox-border-radius, var(--border-radius-50));
    box-shadow: var(--bubble-shadow);
    box-sizing: border-box;
    display: none;
    left: 0;
    max-height: 400px;
    overflow-y: auto;
    position: absolute;
    top: 0;
    width: -moz-fit-content;
    width: fit-content;
    z-index: 2
}

div.listbox-button__listbox--set-position {
    min-width: 100%;
    top: calc(100% + 4px);
    width: auto
}

div.listbox-button__listbox--fixed {
    position: fixed
}

[dir=rtl] div.listbox-button__listbox {
    left: unset;
    right: 0
}

.listbox-button button.btn[aria-expanded=true]~div.listbox-button__listbox,
button.expand-btn[aria-expanded=true]~div.listbox-button__listbox {
    display: block
}

.listbox-button button[aria-invalid=true] {
    border-color: var( --listbox-button-invalid-border-color, var(--color-stroke-attention))
}

.listbox-button:not(.listbox-button--error) button:not([disabled]):not([aria-disabled=true]):not([aria-invalid=true]).btn--form {
    border-color: var( --listbox-button-border-color, var(--color-stroke-default))
}

.listbox-button:not(.listbox-button--error) button:not([disabled]):not([aria-disabled=true]):not([aria-invalid=true]).btn--form:active,
.listbox-button:not(.listbox-button--error) button:not([disabled]):not([aria-disabled=true]):not([aria-invalid=true]).btn--form:focus,
.listbox-button:not(.listbox-button--error) button:not([disabled]):not([aria-disabled=true]):not([aria-invalid=true]).btn--form:hover {
    border-color: inherit
}

.listbox-button button.btn--borderless,
.listbox-button button.expand-btn--borderless {
    background-color: initial;
    border-color: transparent;
    padding-left: 0;
    vertical-align: initial
}

.listbox-button button.btn--borderless:focus,
.listbox-button button.expand-btn--borderless:focus {
    outline: none;
    -webkit-text-decoration: underline;
    text-decoration: underline
}

.listbox-button button.btn--borderless[aria-expanded=true]~.listbox-button__listbox,
.listbox-button button.expand-btn--borderless[aria-expanded=true]~.listbox-button__listbox {
    top: 41px
}

.listbox-button.listbox-button--form button {
    background-color: var( --listbox-button-background-color, var(--color-background-secondary));
    border-color: var( --listbox-button-border-color, var(--color-stroke-default));
    color: var( --listbox-button-foreground-color, var(--color-foreground-primary))
}

.listbox-button.listbox-button--form button[aria-disabled=true],
.listbox-button.listbox-button--form button[disabled] {
    border-color: var( --listbox-button-disabled-border-color, var(--color-background-disabled));
    color: var( --listbox-button-disabled-foreground-color, var(--color-foreground-disabled))
}

.listbox-button.listbox-button--form button:focus {
    background-color: var( --combobox-textbox-focus-background-color, var(--color-background-primary))
}

.listbox-button.listbox-button--form button[aria-invalid=true] {
    border-color: var( --listbox-button-invalid-border-color, var(--color-stroke-attention))
}

.listbox-button.listbox-button--error button:not(.btn--borderless) {
    background-color: var( --listbox-button-background-color, var(--color-background-secondary));
    border-color: var( --listbox-button-border-color, var(--color-stroke-attention))
}

.listbox-button .btn__label {
    color: var(--listbox-button-label-color, var(--color-foreground-secondary));
    margin-right: 3px
}

.listbox-button--expanded .btn__label {
    color: var(--listbox-button-label-color, var(--color-foreground-primary))
}

.listbox-button.listbox-button--error button .btn__floating-label,
.listbox-button.listbox-button--error button .btn__label {
    color: var(--listbox-button-label-color, var(--color-foreground-attention))
}

.listbox-button .btn__text {
    font-weight: 700;
    margin-right: auto
}

.listbox-button__options {
    border-radius: var(--listbox-button-border-radius, var(--border-radius-50))
}

.listbox-button__options[role=listbox]:focus .listbox-button__option--active[role=option] {
    background-color: var(--color-state-primary-hover)
}

.listbox-button__option svg.icon {
    align-self: center;
    fill: currentColor;
    margin: 0 auto;
    opacity: 0;
    stroke: currentColor;
    stroke-width: 0;
    margin-left: var(--spacing-100)
}

div.listbox-button__option[role=option][aria-selected=true] svg.icon {
    opacity: 1
}

.listbox-button__description {
    color: var( --listbox-button-subtitle-color, var(--color-foreground-secondary));
    font-size: var(--font-size-small);
    font-weight: 400;
    grid-column: 1 2;
    grid-row: 2
}

div.listbox-button__option[role=option] {
    background-color: initial;
    border-color: var( --listbox-option-border-color, var(--color-background-primary));
    border-style: solid;
    border-width: 1px;
    box-sizing: border-box;
    color: var( --listbox-option-foreground-color, var(--color-foreground-primary));
    cursor: default;
    display: inline-grid;
    font-family: inherit;
    grid-template-columns: auto auto;
    justify-content: space-between;
    padding: 8px 15px;
    width: 100%
}

div.listbox-button__option[role=option]:not(:last-child) {
    margin-bottom: 1px
}

div.listbox-button__option[role=option]:focus {
    outline-offset: -4px
}

div.listbox-button__option[role=option][hidden] {
    display: none
}

div.listbox-button__option[role=option]:hover {
    background-color: var(--color-state-primary-hover);
    color: var( --listbox-option-hover-foreground-color, var(--color-foreground-primary))
}

div.listbox-button__option[role=option]:active {
    font-weight: 700
}

div.listbox-button__option[role=option]:disabled,
div.listbox-button__option[role=option][aria-disabled=true] {
    background-color: unset;
    color: var( --listbox-option-disabled-foreground-color, var(--color-foreground-disabled));
    font-weight: unset
}

div.listbox-button__option[role=option]:first-child {
    border-top-left-radius: var( --listbox-button-listbox-border-radius, var(--border-radius-50));
    border-top-right-radius: var( --listbox-button-listbox-border-radius, var(--border-radius-50))
}

div.listbox-button__option[role=option]:last-child {
    border-bottom-left-radius: var( --listbox-button-listbox-border-radius, var(--border-radius-50));
    border-bottom-right-radius: var( --listbox-button-listbox-border-radius, var(--border-radius-50))
}

div.listbox-button__option[role=option]:disabled .listbox-button__description,
div.listbox-button__option[role=option][aria-disabled=true] .listbox-button__description {
    background-color: unset;
    color: var( --listbox-option-disabled-foreground-color, var(--color-foreground-disabled));
    font-weight: unset
}

div.listbox-button__option--active[role=option] {
    font-weight: 700
}

span.listbox-button__value {
    flex: 1 0 auto;
    white-space: nowrap
}

.listbox-button__options:focus:not(:focus-visible) {
    outline: none
}

[dir=rtl] .listbox-button .btn__label {
    color: var(--listbox-button-label-color, var(--color-foreground-secondary));
    margin-left: 3px;
    margin-right: 0
}

div.listbox {
    margin: var(--spacing-200) 0
}

span.listbox {
    display: inline-block;
    vertical-align: bottom
}

div.listbox__options[role=listbox] {
    background-color: var( --listbox-background-color, var(--color-background-primary));
    cursor: default
}

span.listbox__options[role=listbox] {
    display: inline-block
}

div.listbox__options--fix-width[role=listbox] {
    width: 100%
}

div.listbox__options--reverse[role=listbox] {
    right: 0
}

.listbox__description {
    color: var( --listbox-button-subtitle-color, var(--color-foreground-secondary));
    font-size: var(--font-size-small);
    font-weight: 400;
    grid-column: 1 2;
    grid-row: 2
}

div.listbox__option[role=option] {
    background-color: initial;
    border-color: var( --listbox-option-border-color, var(--color-background-primary));
    border-style: solid;
    border-width: 1px;
    box-sizing: border-box;
    color: var( --listbox-option-foreground-color, var(--color-foreground-primary));
    display: inline-grid;
    font-family: inherit;
    grid-template-columns: auto auto;
    justify-content: space-between;
    padding: 8px 15px;
    width: 100%
}

div.listbox__option[role=option]:not(:last-child) {
    margin-bottom: 1px
}

div.listbox__option[role=option]:focus {
    outline-offset: -4px
}

div.listbox__option[role=option][hidden] {
    display: none
}

div.listbox__option[role=option]:hover {
    background-color: var(--color-state-primary-hover);
    color: var( --listbox-option-hover-foreground-color, var(--color-foreground-primary))
}

div.listbox__option[role=option]:active {
    font-weight: 700
}

div.listbox__option[role=option]:disabled,
div.listbox__option[role=option]:disabled .listbox__description,
div.listbox__option[role=option][aria-disabled=true],
div.listbox__option[role=option][aria-disabled=true] .listbox__description {
    background-color: unset;
    color: var( --listbox-option-disabled-foreground-color, var(--color-foreground-disabled));
    font-weight: unset
}

span.listbox__value {
    flex: 1;
    white-space: nowrap
}

div.listbox__option svg.icon {
    align-self: center;
    fill: currentColor;
    margin: 0 auto;
    opacity: 0;
    stroke: currentColor;
    stroke-width: 0;
    margin-left: var(--spacing-100)
}

div.listbox__options[role=listbox]:focus .listbox__option--active[role=option] {
    background-color: var(--color-state-primary-hover)
}

div.listbox__option[aria-selected=true] svg.icon {
    opacity: 1
}

.listbox__options:focus:not(:focus-visible) {
    outline: none
}

.panel-dialog[role=dialog] {
    background-color: var(--dialog-scrim-color-show);
    bottom: 0;
    left: 0;
    -webkit-overflow-scrolling: touch;
    flex-direction: column;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
    will-change: background-color;
    z-index: 100000
}

.panel-dialog[role=dialog]:not([hidden]) {
    display: flex
}

.panel-dialog__window {
    background-color: var( --dialog-window-background-color, var(--color-background-primary));
    border-right: 1px solid rgba(153, 153, 153, .18);
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    min-height: 55px;
    will-change: opacity, transform;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    width: 100%
}

.panel-dialog__window--end {
    align-self: flex-end;
    border-left: 1px solid rgba(153, 153, 153, .18)
}

.panel-dialog__header {
    display: flex;
    flex-shrink: 0;
    margin: var(--spacing-200) var(--spacing-200) 0;
    position: relative
}

.panel-dialog__header h1,
.panel-dialog__header h2,
.panel-dialog__header h3,
.panel-dialog__header h4,
.panel-dialog__header h5,
.panel-dialog__header h6 {
    align-self: center;
    flex: 1 1 auto;
    margin: 0;
    overflow-wrap: anywhere
}

.panel-dialog__header>:last-child:not(:only-child) {
    margin-left: var(--spacing-200)
}

.panel-dialog__header .fake-link {
    align-self: flex-start;
    outline-offset: 4px;
    -webkit-text-decoration: none;
    text-decoration: none
}

.panel-dialog__main {
    box-sizing: border-box;
    flex: 1 1 auto;
    height: 1px;
    overflow-y: auto;
    padding: var(--spacing-200);
    position: relative
}

.panel-dialog__main>:first-child {
    margin-top: 0
}

.panel-dialog__main>:last-child {
    margin-bottom: 0
}

.panel-dialog__footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--spacing-200);
    position: relative
}

.panel-dialog__footer>:not(:first-child) {
    margin-top: var(--spacing-200)
}

button.icon-btn.panel-dialog__close,
button.icon-btn.panel-dialog__prev {
    align-self: flex-start;
    border: 0;
    height: 32px;
    min-width: 32px;
    padding: 0;
    position: relative;
    width: 32px;
    z-index: 1
}

button.icon-btn.panel-dialog__prev {
    margin-right: var(--spacing-200)
}

.panel-dialog__title:not(:first-child) {
    margin-left: var(--spacing-200)
}

.panel-dialog--hide.panel-dialog--mask-fade,
.panel-dialog--show.panel-dialog--mask-fade {
    transition: background-color .16s ease-out
}

.panel-dialog--hide.panel-dialog--mask-fade-slow,
.panel-dialog--show.panel-dialog--mask-fade-slow {
    transition: background-color .32s ease-out
}

.panel-dialog--hide .panel-dialog__window--slide,
.panel-dialog--show .panel-dialog__window--slide {
    transition: transform .32s ease-out
}

.panel-dialog--hide.panel-dialog--hide,
.panel-dialog--hide.panel-dialog--show-init,
.panel-dialog--show-init.panel-dialog--hide,
.panel-dialog--show-init.panel-dialog--show-init {
    display: flex
}

.panel-dialog--hide.panel-dialog--mask-fade,
.panel-dialog--hide.panel-dialog--mask-fade-slow,
.panel-dialog--show-init.panel-dialog--mask-fade,
.panel-dialog--show-init.panel-dialog--mask-fade-slow {
    background-color: var(--dialog-scrim-color-hide)
}

.panel-dialog--hide .panel-dialog__window--slide-left,
.panel-dialog--show-init .panel-dialog__window--slide-left {
    transform: translate(-100%)
}

.panel-dialog--hide .panel-dialog__window--slide-right,
.panel-dialog--show-init .panel-dialog__window--slide-right {
    transform: translate(100%)
}

.panel-dialog--hide .panel-dialog__window--slide,
.panel-dialog--show-init .panel-dialog__window--slide {
    transform: translate(-100%)
}

.panel-dialog--hide .panel-dialog__window--end.panel-dialog__window--slide,
.panel-dialog--show-init .panel-dialog__window--end.panel-dialog__window--slide {
    transform: translate(100%)
}

.panel-dialog--hide-init.panel-dialog--hide-init,
.panel-dialog--hide-init.panel-dialog--show,
.panel-dialog--show.panel-dialog--hide-init,
.panel-dialog--show.panel-dialog--show {
    display: flex
}

.panel-dialog--hide-init.panel-dialog--mask-fade,
.panel-dialog--hide-init.panel-dialog--mask-fade-slow,
.panel-dialog--show.panel-dialog--mask-fade,
.panel-dialog--show.panel-dialog--mask-fade-slow {
    background-color: var(--dialog-scrim-color-show)
}

.panel-dialog--hide-init .panel-dialog__window--slide,
.panel-dialog--show .panel-dialog__window--slide {
    transform: translate(0)
}

[dir=rtl] button.icon-btn.panel-dialog__prev .icon {
    transform: rotate(180deg)
}

@media (min-width: 512px) {
    .panel-dialog__window {
        width: 384px
    }
}

.fullscreen-dialog[role=dialog] {
    background-color: var(--dialog-scrim-color-show);
    bottom: 0;
    left: 0;
    -webkit-overflow-scrolling: touch;
    position: fixed;
    right: 0;
    top: 0;
    will-change: background-color;
    z-index: 100000
}

.fullscreen-dialog[role=dialog]:not([hidden]) {
    display: flex
}

.fullscreen-dialog--no-mask[role=dialog] {
    background-color: initial
}

.fullscreen-dialog__window {
    background-color: var( --dialog-window-background-color, var(--color-background-primary));
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    min-height: 55px;
    will-change: opacity, transform;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    width: 100%
}

.fullscreen-dialog__header {
    display: flex;
    flex-shrink: 0;
    margin: var(--spacing-200) var(--spacing-200) 0;
    position: relative
}

.fullscreen-dialog__header h1,
.fullscreen-dialog__header h2,
.fullscreen-dialog__header h3,
.fullscreen-dialog__header h4,
.fullscreen-dialog__header h5,
.fullscreen-dialog__header h6 {
    align-self: center;
    flex: 1 1 auto;
    margin: 0;
    overflow-wrap: anywhere
}

.fullscreen-dialog__header>:last-child:not(:only-child) {
    margin-left: var(--spacing-200)
}

.fullscreen-dialog__header .fake-link {
    align-self: flex-start;
    outline-offset: 4px;
    -webkit-text-decoration: none;
    text-decoration: none
}

.fullscreen-dialog__main {
    box-sizing: border-box;
    flex: 1 1 auto;
    min-height: auto;
    padding: var(--spacing-200);
    position: relative
}

.fullscreen-dialog__main>:first-child {
    margin-top: 0
}

.fullscreen-dialog__main>:last-child {
    margin-bottom: 0
}

.fullscreen-dialog__footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--spacing-200);
    position: relative
}

.fullscreen-dialog__footer>:not(:first-child) {
    margin-top: var(--spacing-200)
}

button.icon-btn.fullscreen-dialog__close {
    height: 32px;
    min-width: 32px;
    width: 32px
}

button.fullscreen-dialog__back,
button.fullscreen-dialog__close {
    align-self: flex-start;
    border: 0;
    padding: 0;
    position: relative;
    z-index: 1
}

.fullscreen-dialog--hide.fullscreen-dialog--mask-fade,
.fullscreen-dialog--show.fullscreen-dialog--mask-fade {
    transition: background-color .16s ease-out
}

.fullscreen-dialog--hide.fullscreen-dialog--mask-fade-slow,
.fullscreen-dialog--show.fullscreen-dialog--mask-fade-slow {
    transition: background-color .32s ease-out
}

.fullscreen-dialog--hide .fullscreen-dialog__window--fade,
.fullscreen-dialog--show .fullscreen-dialog__window--fade {
    transition: opacity .16s ease-out
}

.fullscreen-dialog--hide .fullscreen-dialog__window--slide,
.fullscreen-dialog--hide .fullscreen-dialog__window--slide-end,
.fullscreen-dialog--show .fullscreen-dialog__window--slide,
.fullscreen-dialog--show .fullscreen-dialog__window--slide-end {
    transition: transform .32s ease-out
}

.fullscreen-dialog--hide.fullscreen-dialog--hide,
.fullscreen-dialog--hide.fullscreen-dialog--show-init,
.fullscreen-dialog--show-init.fullscreen-dialog--hide,
.fullscreen-dialog--show-init.fullscreen-dialog--show-init {
    display: flex
}

.fullscreen-dialog--hide.fullscreen-dialog--mask-fade,
.fullscreen-dialog--hide.fullscreen-dialog--mask-fade-slow,
.fullscreen-dialog--show-init.fullscreen-dialog--mask-fade,
.fullscreen-dialog--show-init.fullscreen-dialog--mask-fade-slow {
    background-color: var(--dialog-scrim-color-hide)
}

.fullscreen-dialog--hide .fullscreen-dialog__window--fade,
.fullscreen-dialog--show-init .fullscreen-dialog__window--fade {
    opacity: 0
}

.fullscreen-dialog--hide .fullscreen-dialog__window--slide,
.fullscreen-dialog--show-init .fullscreen-dialog__window--slide {
    transform: translateY(100%)
}

.fullscreen-dialog--hide .fullscreen-dialog__window--slide-end,
.fullscreen-dialog--show-init .fullscreen-dialog__window--slide-end {
    transform: translate(100%)
}

.fullscreen-dialog--hide-init.fullscreen-dialog--hide-init,
.fullscreen-dialog--hide-init.fullscreen-dialog--show,
.fullscreen-dialog--show.fullscreen-dialog--hide-init,
.fullscreen-dialog--show.fullscreen-dialog--show {
    display: flex
}

.fullscreen-dialog--hide-init.fullscreen-dialog--mask-fade,
.fullscreen-dialog--hide-init.fullscreen-dialog--mask-fade-slow,
.fullscreen-dialog--show.fullscreen-dialog--mask-fade,
.fullscreen-dialog--show.fullscreen-dialog--mask-fade-slow {
    background-color: var(--dialog-scrim-color-show)
}

.fullscreen-dialog--hide-init .fullscreen-dialog__window--fade,
.fullscreen-dialog--show .fullscreen-dialog__window--fade {
    opacity: 1
}

.fullscreen-dialog--hide-init .fullscreen-dialog__window--slide,
.fullscreen-dialog--hide-init .fullscreen-dialog__window--slide-end,
.fullscreen-dialog--show .fullscreen-dialog__window--slide,
.fullscreen-dialog--show .fullscreen-dialog__window--slide-end {
    transform: translate(0)
}

/*! DEPRECATED COMPONENT. Will be removed next major version */

:root {
    --dialog-scrim-color-hide: rgb(17 24 32 / 0);
    --dialog-scrim-color-show: rgb(17 24 32 / .7);
    --dialog-lightbox-max-width: 616px
}

.drawer-dialog[role=dialog] {
    background-color: var(--dialog-scrim-color-show);
    bottom: 0;
    left: 0;
    -webkit-overflow-scrolling: touch;
    align-items: flex-end;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
    will-change: background-color;
    z-index: 100000
}

.drawer-dialog[role=dialog]:not([hidden]) {
    display: flex
}

.drawer-dialog--no-mask[role=dialog] {
    background-color: initial
}

.drawer-dialog__header {
    display: flex;
    flex-shrink: 0;
    margin: var(--spacing-250) var(--spacing-200) 0;
    position: relative
}

.drawer-dialog__header h1,
.drawer-dialog__header h2,
.drawer-dialog__header h3,
.drawer-dialog__header h4,
.drawer-dialog__header h5,
.drawer-dialog__header h6 {
    align-self: center;
    flex: 1 1 auto;
    margin: 0;
    overflow-wrap: anywhere
}

.drawer-dialog__header>:last-child:not(:only-child) {
    margin-left: var(--spacing-200)
}

.drawer-dialog__header .fake-link {
    align-self: flex-start;
    -webkit-text-decoration: none;
    text-decoration: none
}

.drawer-dialog__handle {
    background-color: initial;
    border: none;
    left: 0;
    margin: -11px auto;
    padding: 8px;
    position: relative;
    right: 0;
    top: 11px;
    z-index: 2
}

.drawer-dialog__handle:after {
    background-color: var(--dialog-handle-color, var(--color-stroke-default));
    border-radius: 3px;
    content: "";
    display: block;
    height: 2px;
    width: 24px
}

.drawer-dialog__main {
    box-sizing: border-box;
    flex: 1 1 auto;
    min-height: auto;
    overflow: auto;
    padding: var(--spacing-200);
    position: relative
}

.drawer-dialog__main>:first-child {
    margin-top: 0
}

.drawer-dialog__main>:last-child {
    margin-bottom: 0
}

.drawer-dialog__footer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 16px;
    position: relative
}

.drawer-dialog__footer>* {
    flex: 1
}

.drawer-dialog__footer>:not(:first-child) {
    margin-left: 8px
}

button.icon-btn.drawer-dialog__close {
    align-self: flex-start;
    border: 0;
    height: 32px;
    min-width: 32px;
    position: relative;
    width: 32px;
    z-index: 1
}

.drawer-dialog__window {
    background-color: var( --dialog-window-background-color, var(--color-background-primary));
    border-radius: var(--border-radius-100) var(--border-radius-100) 0 0;
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    max-height: 50%;
    max-width: 100%;
    min-height: 55px;
    will-change: opacity, transform;
    -webkit-overflow-scrolling: touch;
    overflow-y: hidden
}

.drawer-dialog__window--expanded {
    height: 95%;
    max-height: 95%
}

.drawer-dialog__window--slide {
    transition: max-height .32s ease-out
}

.drawer-dialog--hide.drawer-dialog--mask-fade,
.drawer-dialog--show.drawer-dialog--mask-fade {
    transition: background-color .16s ease-out
}

.drawer-dialog--hide.drawer-dialog--mask-fade-slow,
.drawer-dialog--show.drawer-dialog--mask-fade-slow {
    transition: background-color .32s ease-out
}

.drawer-dialog--hide .drawer-dialog__window--fade,
.drawer-dialog--show .drawer-dialog__window--fade {
    transition: opacity .16s ease-out
}

.drawer-dialog--hide .drawer-dialog__window--slide,
.drawer-dialog--show .drawer-dialog__window--slide {
    transition: transform .32s ease-out
}

.drawer-dialog--hide.drawer-dialog--show-init,
.drawer-dialog--hidedrawer-dialog--hide,
.drawer-dialog--show-init.drawer-dialog--show-init,
.drawer-dialog--show-initdrawer-dialog--hide {
    display: flex
}

.drawer-dialog--hide.drawer-dialog--mask-fade,
.drawer-dialog--hide.drawer-dialog--mask-fade-slow,
.drawer-dialog--show-init.drawer-dialog--mask-fade,
.drawer-dialog--show-init.drawer-dialog--mask-fade-slow {
    background-color: var(--dialog-scrim-color-hide)
}

.drawer-dialog--hide .drawer-dialog__window--slide,
.drawer-dialog--show-init .drawer-dialog__window--slide {
    transform: translateY(100%)
}

.drawer-dialog--hide-init.drawer-dialog--hide-init,
.drawer-dialog--hide-init.drawer-dialog--show,
.drawer-dialog--show.drawer-dialog--hide-init,
.drawer-dialog--show.drawer-dialog--show {
    display: flex
}

.drawer-dialog--hide-init.drawer-dialog--mask-fade,
.drawer-dialog--hide-init.drawer-dialog--mask-fade-slow,
.drawer-dialog--show.drawer-dialog--mask-fade,
.drawer-dialog--show.drawer-dialog--mask-fade-slow {
    background-color: var(--dialog-scrim-color-show)
}

.drawer-dialog--hide-init .drawer-dialog__window--fade,
.drawer-dialog--show .drawer-dialog__window--fade {
    opacity: 1
}

.drawer-dialog--hide-init .drawer-dialog__window--slide,
.drawer-dialog--show .drawer-dialog__window--slide {
    transform: translate(0)
}

.drawer-dialog__handle:focus:not(:focus-visible) {
    outline: none
}

.carousel {
    position: relative
}

.carousel__container {
    position: relative;
    white-space: nowrap;
    width: 100%
}

.carousel__container--controls-disabled .carousel__control.carousel__control {
    display: none
}

.carousel__list {
    display: flex;
    margin: 0;
    padding: 0;
    position: relative;
    transition: transform .45s ease-in-out;
    width: 100%
}

.carousel__list>li {
    display: inline-block;
    flex-shrink: 0;
    list-style: none
}

.carousel__playback {
    background-color: #00000073;
    border: 0;
    border-radius: 50%;
    bottom: 16px;
    box-sizing: border-box;
    color: var( --carousel-playback-foreground-color, var(--color-foreground-on-inverse));
    height: 40px;
    margin-bottom: 19px;
    margin-right: 19px;
    padding: 0;
    position: absolute;
    right: 0;
    text-align: center;
    width: 40px;
    z-index: 2
}

.carousel__playback svg {
    opacity: .75
}

.carousel__playback .icon--play {
    padding-left: 1px
}

.carousel__list--image-treatment>li {
    align-items: center;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    overflow: hidden;
    position: relative
}

.carousel__list--image-treatment>li:after {
    background: #0000000d;
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0
}

.carousel__list--image-treatment>li>img {
    display: inline-block;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain
}

.carousel__list--image-treatment-large>li {
    align-items: center;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    overflow: hidden;
    position: relative
}

.carousel__list--image-treatment-large>li:after {
    background: #0000000d;
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0
}

.carousel__list--image-treatment-large>li>img {
    display: inline-block;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain
}

div.carousel {
    margin: 16px 0
}

.carousel__control {
    align-items: center;
    background-color: var( --carousel-paddle-background-color, var(--color-background-primary));
    border: 1px solid;
    border-color: var( --carousel-paddle-border-color, var(--color-stroke-subtle));
    border-radius: 16px;
    box-shadow: 0 2px 2px #0000003d, 0 0 2px #0000001f;
    display: flex;
    font-size: 18px;
    height: 32px;
    justify-content: center;
    opacity: 0;
    padding: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity .45s ease-in-out;
    width: 32px;
    z-index: 1
}

.carousel__control--prev {
    left: calc(var(--spacing-200) * -1);
    margin-right: 1px
}

.carousel__control--next {
    margin-left: 1px;
    right: calc(var(--spacing-200) * -1)
}

.carousel__control svg {
    color: var( --carousel-paddle-foreground-color, var(--color-foreground-primary))
}

.carousel__control:focus:not(:focus-visible) {
    outline: none
}

@media (min-width: 512px) {
    .carousel:focus-within .carousel__control {
        opacity: .92
    }
    .carousel:focus-within .carousel__control[aria-disabled=true] {
        opacity: .3
    }
}

@media (min-width: 512px) and (hover: hover) {
    .carousel:hover .carousel__control {
        opacity: .92
    }
    .carousel:hover .carousel__control[aria-disabled=true] {
        opacity: .3
    }
}

.carousel__control--show,
.carousel__control:focus {
    opacity: .92
}

.carousel__control--show[aria-disabled=true],
.carousel__control:focus[aria-disabled=true] {
    opacity: .3
}

.carousel__control:hover {
    background-color: var(--color-state-primary-hover);
    border-color: var(--color-state-primary-hover)
}

.carousel__control:hover svg {
    color: var( --carousel-paddle-hover-foreground-color, var(--color-foreground-primary))
}

.carousel__control:active {
    background-color: var(--color-state-primary-active)
}

.carousel__playback:focus:not(:focus-visible) {
    outline: none
}

span.carousel,
span.carousel__container {
    display: inline-block
}

.carousel__viewport--mask {
    -webkit-mask-image: linear-gradient(to right, var(--color-background-primary) 85%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to right, var(--color-background-primary) 85%, rgba(0, 0, 0, 0) 100%)
}

[dir=rtl] .carousel__control--prev {
    left: unset;
    right: calc(var(--spacing-200) * -1)
}

[dir=rtl] .carousel__control--next {
    left: calc(var(--spacing-200) * -1);
    right: unset
}

[dir=rtl] .carousel__control .icon--12 {
    transform: rotate(180deg)
}

@supports not ((-webkit-scroll-snap-coordinate: 0 0) or (-ms-scroll-snap-coordinate: 0 0) or (scroll-snap-coordinate: 0 0) or (scroll-snap-align: start)) {
    .carousel:not(.carousel__autoplay) .carousel__control {
        opacity: .92
    }
    .carousel:not(.carousel__autoplay) .carousel__control[aria-disabled=true] {
        opacity: .3
    }
}

@supports ((-webkit-scroll-snap-coordinate: 0 0) or (-ms-scroll-snap-coordinate: 0 0) or (scroll-snap-coordinate: 0 0) or (scroll-snap-align: start)) {
    .carousel:not(.carousel__autoplay) {
        overflow: visible
    }
    .carousel:not(.carousel__autoplay) .carousel__control {
        margin-top: -5px
    }
    .carousel:not(.carousel__autoplay) .carousel__list {
        border-color: #0000;
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 10px;
        scroll-behavior: smooth;
        scroll-snap-type: proximity;
        scroll-snap-type: x proximity;
        scrollbar-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
        scrollbar-width: thin;
        transition: border-color .5s, scrollbar-color .5s, transform .45s ease-in-out
    }
    .carousel:not(.carousel__autoplay) .carousel__list:hover {
        border-color: #0006;
        scrollbar-color: rgba(0, 0, 0, .4) rgba(0, 0, 0, 0)
    }
    .carousel:not(.carousel__autoplay) .carousel__list::-webkit-scrollbar {
        height: 5px
    }
    .carousel:not(.carousel__autoplay) .carousel__list::-webkit-scrollbar-thumb {
        border-color: inherit;
        border-radius: 4px;
        border-right-style: inset;
        border-right-width: calc(100vw + 100vh)
    }
    .carousel__snap-point {
        scroll-snap-align: flex-start;
        -webkit-scroll-snap-coordinate: 0 0;
        -ms-scroll-snap-coordinate: 0 0
    }
    @media (min-width: 512px) {
        div.carousel {
            margin: 16px 0
        }
    }
}

.carousel.carousel--hidden-scrollbar:not(.carousel__autoplay) {
    overflow: hidden
}

.carousel--hidden-scrollbar .carousel__container {
    margin-bottom: -80px
}

.carousel--hidden-scrollbar .carousel__container .carousel__control {
    margin-top: -40px
}

.carousel--hidden-scrollbar .carousel__container .carousel__list {
    padding-bottom: 80px
}

.carousel--hidden-scrollbar .carousel__control--prev {
    left: 0
}

.carousel--hidden-scrollbar .carousel__control--next {
    right: 0
}

.inline-notice {
    margin: var(--spacing-100) 0
}

div.inline-notice {
    display: flex
}

span.inline-notice {
    display: inline-flex
}

.inline-notice__header {
    display: flex;
    margin-right: var(--spacing-100);
    margin-top: var(--spacing-50)
}

.inline-notice p {
    margin: 3px 0
}

.inline-notice a,
.inline-notice button.fake-link {
    color: var(--color-foreground-primary)
}

.combobox {
    box-sizing: border-box;
    line-height: normal;
    position: relative
}

span.combobox {
    display: inline-block;
    vertical-align: bottom
}

.combobox__value {
    flex: 1 0 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.combobox__options--fix-width[role=listbox] {
    width: 100%
}

.combobox__listbox {
    background-color: var( --combobox-listbox-background-color, var(--color-background-elevated));
    border-radius: var( --combobox-listbox-border-radius, var(--border-radius-50));
    box-shadow: var(--bubble-shadow);
    box-sizing: border-box;
    display: none;
    left: 0;
    max-height: 400px;
    overflow-y: auto;
    position: absolute;
    top: 0;
    width: -moz-fit-content;
    width: fit-content;
    z-index: 2
}

.combobox__listbox--set-position {
    min-width: 100%;
    top: calc(100% + 4px);
    width: auto
}

.combobox__listbox--fixed {
    position: fixed
}

.combobox__listbox--reverse,
[dir=rtl] .combobox__listbox {
    left: unset;
    right: 0
}

[dir=rtl] .combobox__listbox--reverse {
    left: 0;
    right: unset
}

.combobox__control>button,
.combobox__control>svg.icon {
    margin-left: 8px
}

.combobox__option[role^=option] {
    background-color: initial;
    border-color: var( --listbox-option-border-color, var(--color-background-primary));
    border-style: solid;
    border-width: 1px;
    box-sizing: border-box;
    color: var( --listbox-option-foreground-color, var(--color-foreground-primary));
    cursor: default;
    display: inline-grid;
    font-family: inherit;
    grid-template-columns: auto auto;
    justify-content: space-between;
    padding: 8px 15px;
    position: relative;
    width: 100%
}

.combobox__option[role^=option]:focus {
    outline-offset: -4px
}

.combobox__option[role^=option][hidden] {
    display: none
}

.combobox__option[role^=option]:hover {
    color: var( --listbox-option-hover-foreground-color, var(--color-foreground-primary))
}

.combobox__option[role^=option]:active {
    font-weight: 700
}

.combobox__option[role^=option]:disabled,
.combobox__option[role^=option][aria-disabled=true] {
    background-color: unset;
    color: var( --listbox-option-disabled-foreground-color, var(--color-foreground-disabled));
    font-weight: unset
}

.combobox__option[role^=option]:first-child {
    border-top-left-radius: var( --combobox-listbox-border-radius, var(--border-radius-50));
    border-top-right-radius: var( --combobox-listbox-border-radius, var(--border-radius-50))
}

.combobox__option[role^=option]:last-child {
    border-bottom-left-radius: var( --combobox-listbox-border-radius, var(--border-radius-50));
    border-bottom-right-radius: var( --combobox-listbox-border-radius, var(--border-radius-50))
}

.combobox__option[role^=option]:not(:last-child) {
    margin-bottom: 1px
}

.combobox__option[role^=option]:hover {
    background-color: var(--color-state-primary-hover)
}

.combobox__option[role^=option] svg.icon {
    align-self: center;
    fill: currentColor;
    margin: 0 auto;
    opacity: 0;
    stroke: currentColor;
    stroke-width: 0
}

.combobox__option--active[role^=option] {
    background-color: var(--color-state-primary-active)
}

.combobox__option--active[role^=option] svg.icon {
    opacity: 1
}

.combobox__control button.icon-btn {
    height: 38px;
    padding: 0;
    position: absolute;
    right: 1px;
    top: 1px;
    width: 38px
}

.combobox__control button.icon-btn svg {
    left: 0;
    margin: 0;
    right: 0
}

.combobox--expanded .combobox__listbox {
    display: block
}

.combobox--expanded svg.icon--12 {
    transform: rotate(180deg)
}

.combobox__control>svg.icon--12 {
    color: var(--combobox-textbox-icon-color, var(--color-foreground-primary));
    pointer-events: none;
    position: absolute;
    right: 17px;
    top: calc(50% - 8px)
}

.combobox__control>input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var( --combobox-textbox-background-color, var(--color-background-secondary));
    border-color: var( --combobox-textbox-border-color, var(--color-stroke-default));
    border-radius: var( --combobox-textbox-border-radius, var(--border-radius-50));
    border-style: solid;
    border-width: 1px;
    box-sizing: border-box;
    color: var( --combobox-textbox-foreground-color, var(--color-foreground-on-secondary));
    font-family: inherit;
    font-size: inherit;
    height: 40px;
    margin-left: 0;
    margin-right: 0;
    padding: 0 32px 0 16px
}

.combobox__control>input[readonly] {
    color: var( --combobox-textbox-foreground-color, var(--color-foreground-primary));
    cursor: default;
    text-shadow: 0 0 0 inherit;
    --webkit-user-select: none
}

.combobox__control>input[readonly]::-moz-selection,
.combobox__control>input[readonly]::selection {
    background-color: var( --combobox-textbox-readonly-selection-background, var(--color-background-primary))
}

.combobox__control>input[aria-disabled=true],
.combobox__control>input[disabled] {
    border-color: var( --combobox-textbox-disabled-border-color, var(--color-background-disabled));
    color: var( --combobox-textbox-disabled-foreground-color, var(--color-foreground-disabled))
}

.combobox__control>input[aria-disabled=true][readonly],
.combobox__control>input[disabled][readonly] {
    text-shadow: 0 0 0 var(--color-foreground-disabled)
}

.combobox__control>input[aria-disabled=true]+svg,
.combobox__control>input[disabled]+svg {
    opacity: .5
}

.combobox__control>input[aria-invalid=true] {
    border-color: var( --combobox-textbox-invalid-foreground-color, var(--color-stroke-attention))
}

.combobox__control>input::-ms-clear {
    display: none
}

.combobox__control--borderless>input {
    background-color: initial;
    border-color: transparent;
    padding-left: 0
}

.combobox__control>input:focus {
    background-color: var( --combobox-textbox-focus-background-color, var(--color-background-primary));
    border-color: var( --combobox-textbox-focus-border-color, var(--color-foreground-primary))
}

.combobox__control--borderless>input:focus {
    border-color: transparent;
    outline: none
}

.combobox--fluid,
.combobox--fluid .combobox__control>input {
    width: 100%
}

.combobox--large .combobox__control>input {
    font-size: var(--font-size-medium);
    height: 48px
}

.combobox__control>input[disabled] {
    background-color: var( --combobox-textbox-disabled-background-color, var(--color-background-secondary))
}

.combobox__option--active[role=option] {
    color: var( --combobox-listbox-option-hover-foreground-color, var(--color-foreground-primary));
    font-weight: 700
}

@media (-ms-high-contrast: active),
all and (-ms-high-contrast: none) {
    .combobox__value,
    ::-ms-backdrop {
        min-width: 100%
    }
}

[dir=rtl] .combobox__control>input {
    padding: 0 16px 0 32px
}

[dir=rtl] .combobox__control>button,
[dir=rtl] .combobox__control>svg.icon {
    right: unset
}

[dir=rtl] .combobox__control>svg.icon {
    left: 16px;
    margin-top: 1.3px
}

[dir=rtl] .combobox__control>button {
    left: 0
}

[dir=rtl] .combobox__control button.icon-btn {
    left: 1px;
    right: inherit
}

:root {
    --bubble-shadow: 0 2px 7px rgb(0 0 0 / .15), 0 5px 17px rgb(0 0 0 / .2)
}

div.filter-group {
    display: flex;
    flex-wrap: wrap
}

span.filter-menu-button {
    display: inline-block;
    position: relative
}

span.filter-menu-button+span.filter-menu-button {
    margin-left: 8px
}

button.filter-menu-button__button {
    align-items: center;
    background-color: var( --filter-button-background-color, var(--color-background-secondary));
    border: 1px solid transparent;
    border-color: var( --filter-button-selected-border-color, var(--color-stroke-default));
    border-radius: 16px;
    box-sizing: border-box;
    color: var( --filter-button-foreground-color, var(--color-foreground-primary));
    display: inline-flex;
    flex: 0 1 auto;
    flex-direction: column;
    font-family: inherit;
    font-size: var(--font-size-default);
    height: 32px;
    justify-content: center;
    margin: 0;
    max-width: 280px;
    min-width: 56px;
    padding: 0 var(--spacing-200);
    text-align: center;
    -webkit-text-decoration: none;
    text-decoration: none;
    vertical-align: bottom
}

button.filter-menu-button__button+button.filter-menu-button__button {
    margin-left: 8px
}

button.filter-menu-button__button:active,
button.filter-menu-button__button:focus,
button.filter-menu-button__button:hover {
    background-color: var( --filter-button-background-color, var(--color-state-secondary-hover))
}

.filter-menu-button__button-cell {
    display: flex
}

.filter-menu-button__button-cell svg.icon--12 {
    align-self: center;
    color: var( --filter-menu-button-icon-color, var(--color-foreground-primary));
    margin-left: 8px
}

.filter-menu-button__button-text {
    display: inline-block;
    max-width: 238px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.filter-menu-button__button[aria-expanded=true] svg.icon {
    transform: rotate(180deg)
}

button.filter-menu-button__button[aria-pressed=true] {
    border-color: var( --filter-button-foreground-color, var(--color-stroke-strong));
    font-weight: 700
}

button.filter-menu-button__button[aria-disabled=true],
button.filter-menu-button__button[aria-pressed=true][aria-disabled=true],
button.filter-menu-button__button[aria-pressed=true][disabled],
button.filter-menu-button__button[disabled] {
    color: var( --filter-button-disabled-foreground-color, var(--color-background-disabled));
    font-weight: 400
}

button.filter-menu-button__button[aria-disabled=true]:focus,
button.filter-menu-button__button[aria-disabled=true]:hover,
button.filter-menu-button__button[aria-pressed=true][aria-disabled=true]:focus,
button.filter-menu-button__button[aria-pressed=true][aria-disabled=true]:hover,
button.filter-menu-button__button[aria-pressed=true][disabled]:focus,
button.filter-menu-button__button[aria-pressed=true][disabled]:hover,
button.filter-menu-button__button[disabled]:focus,
button.filter-menu-button__button[disabled]:hover {
    background-color: var( --filter-button-background-color, var(--color-background-secondary));
    color: var( --filter-button-disabled-foreground-color, var(--color-background-disabled))
}

button.filter-menu-button__button[aria-disabled=true] .filter-menu-button__button-cell>svg.icon,
button.filter-menu-button__button[aria-pressed=true][aria-disabled=true] .filter-menu-button__button-cell>svg.icon,
button.filter-menu-button__button[aria-pressed=true][disabled] .filter-menu-button__button-cell>svg.icon,
button.filter-menu-button__button[disabled] .filter-menu-button__button-cell>svg.icon {
    color: var( --filter-button-disabled-foreground-color, var(--color-foreground-disabled))
}

button.filter-menu-button__button[aria-pressed=true][aria-disabled=true]:hover,
button.filter-menu-button__button[aria-pressed=true][disabled]:hover {
    background-color: var( --filter-button-selected-background-color, var(--color-background-secondary))
}

.filter-menu-button__menu {
    background-color: var( --filter-menu-item-background-color, var(--color-background-elevated));
    border: none;
    border-radius: 16px;
    box-shadow: var(--bubble-shadow);
    display: none;
    min-width: 144px;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: max-content;
    z-index: 1
}

.filter-menu-button__menu--set-position {
    top: calc(100% + 8px)
}

button.filter-menu-button__button[aria-expanded=true]+.filter-menu-button__menu {
    display: block
}

.filter-menu-button__items {
    margin-top: 8px;
    max-height: 400px;
    min-width: 100%;
    overflow-y: auto;
    position: relative;
    transform: translateZ(0)
}

span.filter-menu-button__items {
    display: inline-block
}

span.filter-menu-button__checkbox,
span.filter-menu-button__radio {
    display: block;
    flex-shrink: 1;
    height: 18px;
    min-width: 18px;
    width: 18px
}

span.filter-menu-button__checkbox svg.icon--unchecked {
    color: var( --filter-menu-item-unchecked-color, var(--color-foreground-secondary));
    display: block;
    height: 18px;
    width: 18px
}

span.filter-menu-button__checkbox svg.icon--checked {
    color: var( --filter-menu-item-checked-color, var(--color-foreground-primary));
    display: none;
    height: 18px;
    width: 18px
}

span.filter-menu-button__radio svg.icon--unchecked {
    color: var( --filter-menu-item-unchecked-color, var(--color-foreground-primary));
    display: block;
    height: 18px;
    width: 18px
}

span.filter-menu-button__radio svg.icon--checked {
    color: var( --filter-menu-item-checked-color, var(--color-foreground-primary));
    display: none;
    height: 18px;
    width: 18px
}

.filter-menu-button__item {
    background-color: var( --filter-menu-item-background-color, var(--color-background-elevated));
    box-sizing: border-box;
    color: var( --filter-menu-item-foreground-color, var(--color-foreground-primary));
    display: flex;
    font-size: var(--font-size-default);
    justify-content: space-between;
    line-height: 1.4em;
    margin: 0;
    outline-offset: -4px;
    padding: 8px 16px;
    width: 100%
}

.filter-menu-button__item:hover {
    background-color: var( --color-state-primary-hover, color-state-primary-hover)
}

.filter-menu-button__item:disabled,
.filter-menu-button__item[aria-disabled=true] {
    color: var( --filter-menu-item-foreground-color-disabled, var(--color-foreground-disabled))
}

.filter-menu-button__item:disabled span>svg,
.filter-menu-button__item[aria-disabled=true] span>svg {
    color: var( --filter-menu-item-icon-color-disabled, var(--color-foreground-disabled))
}

.filter-menu-button__item:disabled:hover,
.filter-menu-button__item[aria-disabled=true]:hover {
    background-color: inherit
}

.filter-menu-button__item:hover {
    background-color: var(--color-state-primary-hover)
}

.filter-menu-button__item:last-child {
    margin-bottom: 8px
}

.filter-menu-button__item span.checkbox,
.filter-menu-button__item span.radio {
    align-items: flex-start;
    display: flex;
    flex-shrink: 1;
    justify-content: center
}

.filter-menu-button__item svg.checkbox__unchecked {
    color: var( --filter-menu-item-unchecked-color, var(--color-foreground-secondary))
}

.filter-menu-button__item svg.checkbox__checked {
    color: var( --filter-menu-item-checked-color, var(--color-foreground-primary))
}

.filter-menu-button__item svg.radio__unchecked {
    color: var( --filter-menu-item-unchecked-color, var(--color-foreground-secondary))
}

.filter-menu-button__item svg.radio__checked {
    color: var( --filter-menu-item-checked-color, var(--color-foreground-primary))
}

span.filter-menu-button__item {
    display: block
}

button.filter-menu-button__footer {
    background-color: var( --filter-menu-item-background-color, var(--color-background-elevated));
    border: none;
    border-top: 1px solid;
    border-color: var(--filter-menu-border-color, var(--color-stroke-subtle));
    bottom: 0;
    box-sizing: border-box;
    color: var( --filter-menu-item-foreground-color, var(--color-foreground-primary));
    display: flex;
    font-size: var(--font-size-default);
    justify-content: space-between;
    line-height: 1.4em;
    margin: 0;
    outline-offset: -10;
    padding: 16px;
    transform: translateZ(0);
    width: 100%
}

button.filter-menu-button__footer:hover {
    background-color: var( --color-state-primary-hover, color-state-primary-hover)
}

button.filter-menu-button__footer:disabled,
button.filter-menu-button__footer[aria-disabled=true] {
    color: var( --filter-menu-item-foreground-color-disabled, var(--color-foreground-disabled))
}

button.filter-menu-button__footer:disabled span>svg,
button.filter-menu-button__footer[aria-disabled=true] span>svg {
    color: var( --filter-menu-item-icon-color-disabled, var(--color-foreground-disabled))
}

button.filter-menu-button__footer:disabled:hover,
button.filter-menu-button__footer[aria-disabled=true]:hover {
    background-color: inherit
}

button.filter-menu-button__footer:focus,
button.filter-menu-button__footer:hover {
    background-color: var(--color-state-primary-hover)
}

.filter-menu-button__text {
    flex-grow: 1;
    margin-left: 8px
}

.filter-menu-button__item[role=menuitemcheckbox][aria-checked=true] svg.icon--unchecked {
    display: none
}

.filter-menu-button__item[role=menuitemcheckbox][aria-checked=true] svg.icon--checked {
    display: block
}

.filter-menu-button__item[role=menuitemradio][aria-checked=true] svg.icon--unchecked {
    display: none
}

.filter-menu-button__item[role=menuitemradio][aria-checked=true] svg.icon--checked {
    display: block
}

div.filter-menu-button__item[role^=menuitem]:focus:not(:focus-visible) {
    outline: none
}

[dir=rtl] .filter-menu-button__checkbox {
    margin-left: 8px
}

.filter-menu,
.filter-menu-form {
    background-color: var( --filter-menu-item-background-color, var(--color-background-primary));
    min-width: 144px
}

span.filter-menu,
span.filter-menu-form {
    display: inline-block
}

.filter-menu-form__items,
.filter-menu__items {
    margin-top: 8px;
    min-width: 100%;
    position: relative
}

span.filter-menu-form__items,
span.filter-menu__items[role=menu] {
    display: inline-block
}

span.filter-menu__checkbox,
span.filter-menu__radio {
    display: block;
    flex-shrink: 1;
    height: 18px;
    min-width: 18px;
    width: 18px
}

span.filter-menu__checkbox svg,
span.filter-menu__radio svg {
    color: var(--filter-menu-item-icon-color, var(--color-foreground-primary));
    height: 18px;
    width: 18px
}

.filter-menu-form__item span.checkbox,
.filter-menu-form__item span.radio {
    align-items: flex-start;
    display: flex;
    flex-shrink: 1;
    justify-content: center
}

.filter-menu-form__item span.checkbox .checkbox__icon>svg,
.filter-menu-form__item span.radio .checkbox__icon>svg {
    color: var( --filter-menu-item-checked-color, var(--color-foreground-primary))
}

span.filter-menu-form__item,
span.filter-menu__item[role^=menuitem] {
    display: block
}

.filter-menu-form__item,
.filter-menu__item[role^=menuitem] {
    background-color: var( --filter-menu-item-background-color, var(--color-background-elevated));
    box-sizing: border-box;
    color: var( --filter-menu-item-foreground-color, var(--color-foreground-primary));
    display: flex;
    font-size: var(--font-size-default);
    justify-content: space-between;
    line-height: 1.4em;
    margin: 0;
    padding: 8px 16px;
    width: 100%
}

.filter-menu-form__item:hover,
.filter-menu__item[role^=menuitem]:hover {
    background-color: var( --color-state-primary-hover, color-state-primary-hover)
}

.filter-menu-form__item:disabled,
.filter-menu-form__item[aria-disabled=true],
.filter-menu__item[role^=menuitem]:disabled,
.filter-menu__item[role^=menuitem][aria-disabled=true] {
    color: var( --filter-menu-item-foreground-color-disabled, var(--color-foreground-disabled))
}

.filter-menu-form__item:disabled span>svg,
.filter-menu-form__item[aria-disabled=true] span>svg,
.filter-menu__item[role^=menuitem]:disabled span>svg,
.filter-menu__item[role^=menuitem][aria-disabled=true] span>svg {
    color: var( --filter-menu-item-icon-color-disabled, var(--color-foreground-disabled))
}

.filter-menu-form__item:disabled:hover,
.filter-menu-form__item[aria-disabled=true]:hover,
.filter-menu__item[role^=menuitem]:disabled:hover,
.filter-menu__item[role^=menuitem][aria-disabled=true]:hover {
    background-color: inherit
}

.filter-menu-form__item:last-child,
.filter-menu__item[role^=menuitem]:last-child {
    margin-bottom: 8px
}

.filter-menu__header {
    align-items: center;
    background-color: var(--color-background-secondary);
    display: flex;
    gap: var(--spacing-100);
    padding: 14px var(--spacing-200)
}

.filter-menu__header svg {
    color: var(--color-foreground-secondary)
}

.filter-menu__header input {
    background-color: inherit;
    border: none;
    color: var(--color-foreground-primary);
    flex-grow: 1;
    font-size: var(--font-size-default)
}

.filter-menu__header button.btn {
    border: none;
    min-height: var(--spacing-250);
    min-width: var(--spacing-250);
    padding: 0;
    width: var(--spacing-250)
}

.filter-menu__header button:focus-visible {
    outline-style: solid
}

button.filter-menu-form__footer[type=submit],
button.filter-menu__footer {
    background-color: var( --filter-menu-item-background-color, var(--color-background-elevated));
    border: none;
    border-top: 1px solid;
    border-color: var(--filter-menu-border-color, var(--color-stroke-subtle));
    bottom: 0;
    box-sizing: border-box;
    color: var( --filter-menu-item-foreground-color, var(--color-foreground-primary));
    display: flex;
    font-size: var(--font-size-default);
    justify-content: space-between;
    line-height: 1.4em;
    margin: 0;
    padding: 16px;
    width: 100%
}

button.filter-menu-form__footer[type=submit]:hover,
button.filter-menu__footer:hover {
    background-color: var( --color-state-primary-hover, color-state-primary-hover)
}

button.filter-menu-form__footer[type=submit]:disabled,
button.filter-menu-form__footer[type=submit][aria-disabled=true],
button.filter-menu__footer:disabled,
button.filter-menu__footer[aria-disabled=true] {
    color: var( --filter-menu-item-foreground-color-disabled, var(--color-foreground-disabled))
}

button.filter-menu-form__footer[type=submit]:disabled span>svg,
button.filter-menu-form__footer[type=submit][aria-disabled=true] span>svg,
button.filter-menu__footer:disabled span>svg,
button.filter-menu__footer[aria-disabled=true] span>svg {
    color: var( --filter-menu-item-icon-color-disabled, var(--color-foreground-disabled))
}

button.filter-menu-form__footer[type=submit]:disabled:hover,
button.filter-menu-form__footer[type=submit][aria-disabled=true]:hover,
button.filter-menu__footer:disabled:hover,
button.filter-menu__footer[aria-disabled=true]:hover {
    background-color: inherit
}

button.filter-menu-form__footer[type=submit]:hover,
button.filter-menu__footer:hover {
    background-color: var(--color-state-primary-hover)
}

.filter-menu-form__text,
.filter-menu__text {
    flex-grow: 1;
    margin-left: 8px
}

.filter-menu__item[role=menuitemcheckbox] svg.icon--checked,
.filter-menu__item[role=menuitemradio] svg.icon--checked {
    display: none
}

.filter-menu__item[role=menuitemcheckbox] svg.icon--unchecked,
.filter-menu__item[role=menuitemradio] svg.icon--unchecked {
    display: block
}

.filter-menu__item[role=menuitemcheckbox][aria-checked=true] svg.icon--unchecked,
.filter-menu__item[role=menuitemradio][aria-checked=true] svg.icon--unchecked {
    display: none
}

.filter-menu__item[role=menuitemcheckbox][aria-checked=true] svg.icon--checked,
.filter-menu__item[role=menuitemradio][aria-checked=true] svg.icon--checked {
    display: block
}

div.filter-menu__item[role^=menuitem]:focus:not(:focus-visible) {
    outline: none
}

.radio {
    display: inline-flex;
    position: relative;
    vertical-align: text-bottom
}

.radio__control[type=radio] {
    height: 18px;
    min-width: 18px;
    width: 18px
}

.radio--large .radio__control[type=radio] {
    height: 24px;
    min-width: 24px;
    width: 24px
}

span.radio__icon {
    display: inline-flex;
    height: 18px;
    outline-offset: 1px
}

.radio--large span.radio__icon {
    height: 24px
}

span.radio__icon[hidden] {
    display: inline-flex
}

svg.radio__checked {
    color: var(--radio-checked-color, var(--color-foreground-primary))
}

svg.radio__unchecked {
    color: var(--radio-unchecked-color, var(--color-foreground-primary))
}

input.radio__control[type=radio] {
    font-size: 100%;
    margin: 0;
    opacity: 0;
    padding: 0;
    position: absolute;
    z-index: 1
}

.radio svg {
    display: inline-block;
    fill: currentColor;
    pointer-events: none;
    stroke: currentColor;
    stroke-width: 0;
    height: 18px;
    vertical-align: middle;
    width: 18px
}

.radio--large svg {
    height: 24px;
    width: 24px
}

input.radio__control[type=radio]+span.radio__icon svg.radio__checked {
    display: none
}

input.radio__control[type=radio]+span.radio__icon svg.radio__unchecked,
input.radio__control[type=radio]:checked+span.radio__icon svg.radio__checked {
    display: inline-block
}

input.radio__control[type=radio]:checked+span.radio__icon svg.radio__unchecked {
    display: none
}

input.radio__control[type=radio][disabled]+span.radio__icon {
    opacity: 1
}

input.radio__control[type=radio][disabled]+span.radio__icon svg {
    fill: var(--radio-disabled-color, var(--color-foreground-disabled))
}

input.radio__control[type=radio]:focus+span.radio__icon {
    outline: 1px auto;
    outline-color: var(--radio-outline, var(--color-foreground-secondary));
    outline-offset: 2px
}

input.radio__control[type=radio]:focus:not(:focus-visible)+span.radio__icon {
    outline: none
}

span.field {
    display: inline-block
}

span.field+span.field {
    margin-left: 8px
}

.field-group,
div.field {
    margin: 16px 0
}

.field-group {
    display: flex
}

.field-group>div.field {
    margin: 0
}

span.field--table {
    display: inline-table
}

div.field--table {
    display: table
}

.field__description--group {
    display: flex;
    justify-content: flex-end
}

.field__description--group>:last-child {
    margin-left: 5px;
    text-align: right
}

.field__description--group>:first-child {
    flex: 1
}

.field__label {
    margin-right: 8px
}

.field__description {
    color: var(--field-description-color, var(--color-foreground-secondary));
    font-size: var(--font-size-small);
    line-height: var(--spacing-200);
    margin-top: var(--spacing-50)
}

.field__description--confirmation {
    color: var( --field-description-confirmation-color, var(--color-foreground-confirmation))
}

.field__description--information {
    color: var( --field-description-information-color, var(--color-foreground-information))
}

.field__description--attention {
    color: var( --field-description-attention-color, var(--color-foreground-attention))
}

.field__group>.field__description,
.field__group>.field__label {
    align-self: center
}

span.field__group {
    display: inline-flex
}

div.field__group {
    display: flex
}

.field__control+span.field__description {
    margin-left: 8px
}

.field__description .icon {
    display: inline-block;
    margin-right: var(--spacing-50)
}

div.field__description {
    margin: var(--spacing-100) 0 0
}

.field__row {
    display: table-row
}

.field__row>.field__control,
.field__row>.field__description,
.field__row>.field__label {
    display: table-cell
}

.field__row .field__label {
    margin-right: auto;
    padding-right: 8px
}

.field__row .field__control+span.field__description {
    margin-left: 0;
    padding-left: 8px
}

.field__row:first-child>.field__description {
    padding-bottom: 8px
}

.field__row:last-child>.field__description {
    padding-top: 8px
}

.field__label--end {
    margin-left: 4px;
    margin-right: auto
}

.field__label--stacked {
    display: block;
    margin-bottom: 8px
}

.field__label--disabled {
    color: var(--field-label-color-disabled, var(--color-foreground-disabled))
}

.field--fluid,
.field__control--fluid,
.field__group--fluid {
    width: 100%
}

.field--align-top .field__label {
    display: inline-block;
    margin-top: 16px
}

.field--align-top .textbox {
    vertical-align: top
}

.field__group--align-top>.field__label {
    align-self: flex-start;
    margin-top: 16px
}

[dir=rtl] .field__description--group>:last-child {
    text-align: left
}

.checkbox {
    display: inline-flex;
    position: relative;
    vertical-align: text-bottom
}

.checkbox__control[type=checkbox] {
    height: 18px;
    min-width: 18px;
    width: 18px
}

.checkbox--large .checkbox__control[type=checkbox] {
    height: 24px;
    min-width: 24px;
    width: 24px
}

span.checkbox__icon {
    display: inline-flex;
    height: 18px;
    outline-offset: 1px
}

.checkbox--large span.checkbox__icon {
    height: 24px
}

span.checkbox__icon[hidden] {
    display: inline-flex
}

svg.checkbox__checked {
    color: var(--checkbox-checked-color, var(--color-foreground-primary))
}

svg.checkbox__unchecked {
    color: var(--checkbox-unchecked-color, var(--color-foreground-primary))
}

input.checkbox__control[type=checkbox] {
    font-size: 100%;
    margin: 0;
    opacity: 0;
    padding: 0;
    position: absolute;
    z-index: 1
}

.checkbox svg {
    display: inline-block;
    fill: currentColor;
    pointer-events: none;
    stroke: currentColor;
    stroke-width: 0;
    height: 18px;
    vertical-align: middle;
    width: 18px
}

.checkbox--large svg {
    height: 24px;
    width: 24px
}

input.checkbox__control[type=checkbox]+span.checkbox__icon svg.checkbox__checked {
    display: none
}

input.checkbox__control[type=checkbox]+span.checkbox__icon svg.checkbox__unchecked,
input.checkbox__control[type=checkbox]:checked+span.checkbox__icon svg.checkbox__checked {
    display: inline-block
}

input.checkbox__control[type=checkbox]:checked+span.checkbox__icon svg.checkbox__unchecked {
    display: none
}

input.checkbox__control[type=checkbox][disabled]+span.checkbox__icon {
    opacity: 1
}

input.checkbox__control[type=checkbox][disabled]+span.checkbox__icon svg {
    fill: var(--checkbox-disabled-color, var(--color-foreground-disabled))
}

input.checkbox__control[type=checkbox]:focus+span.checkbox__icon {
    outline: 1px auto;
    outline-color: var(--checkbox-outline, var(--color-foreground-secondary));
    outline-offset: 2px
}

input.checkbox__control[type=checkbox]:focus:not(:focus-visible)+span.checkbox__icon {
    outline: none
}

nav.pagination {
    align-items: center;
    color: var( --pagination-item-foreground-color, var(--color-foreground-secondary));
    display: inline-flex;
    font-family: inherit;
    font-size: 1rem;
    justify-content: center;
    margin: var(--spacing-100) 0;
    max-width: 100%
}

nav.pagination a,
nav.pagination button {
    color: inherit;
    font-size: 1em
}

ol.pagination__items {
    align-items: center;
    box-sizing: border-box;
    display: inline-flex;
    height: 44px;
    justify-content: center;
    list-style-type: none;
    margin: 0;
    padding: 0
}

ol.pagination__items li:not([hidden]) {
    align-items: center;
    display: flex;
    justify-content: center
}

a.pagination__next,
a.pagination__previous,
button.pagination__next,
button.pagination__previous {
    align-items: center;
    display: inline-flex;
    justify-content: center
}

a.pagination__next,
button.pagination__next {
    margin-left: var(--spacing-100)
}

a.pagination__previous,
button.pagination__previous {
    margin-right: var(--spacing-100)
}

.pagination__item {
    align-items: center;
    box-sizing: border-box;
    display: inline-flex;
    font-weight: var(--font-weight-regular);
    height: 44px;
    justify-content: center;
    width: 44px
}

button.pagination__item {
    background: none;
    border: none;
    font-family: inherit
}

a.pagination__item {
    -webkit-text-decoration: none;
    text-decoration: none
}

a.pagination__item,
button.pagination__item {
    position: relative
}

a.pagination__item:after,
button.pagination__item:after {
    background-color: initial;
    border-radius: 4px;
    bottom: 0;
    content: "";
    display: block;
    height: 2px;
    left: calc(50% - 10px);
    position: absolute;
    width: 20px
}

a.pagination__item[aria-current=page],
button.pagination__item[aria-current=page] {
    color: var( --pagination-item-current-foreground-color, var(--color-foreground-primary));
    font-weight: var(--font-weight-bold)
}

a.pagination__item[aria-current=page]:after,
button.pagination__item[aria-current=page]:after {
    background-color: currentColor
}

a.pagination__item:not([aria-current=page]):active,
button.pagination__item:not([aria-current=page]):active {
    color: var( --pagination-item-active-foreground-color, var(--color-foreground-primary))
}

a.pagination__item:not([aria-current=page]):focus,
a.pagination__item:not([aria-current=page]):hover,
button.pagination__item:not([aria-current=page]):focus,
button.pagination__item:not([aria-current=page]):hover {
    color: var( --pagination-item-hover-foreground-color, var(--color-foreground-accent))
}

a.pagination__item:not([aria-current=page]):focus:after,
a.pagination__item:not([aria-current=page]):hover:after,
button.pagination__item:not([aria-current=page]):focus:after,
button.pagination__item:not([aria-current=page]):hover:after {
    background-color: currentColor
}

a.pagination__item:focus:not(:focus-visible),
button.pagination__item:focus:not(:focus-visible) {
    outline: none
}

span.pagination__item button.icon-btn--transparent:focus,
span.pagination__item button.icon-btn--transparent:hover {
    background-color: var(--color-state-primary-hover)
}

span.pagination__item button.icon-btn--transparent:active {
    background-color: var(--color-state-primary-active)
}

nav.pagination--fluid {
    width: 100%
}

nav.pagination--fluid ol.pagination__items {
    flex-grow: 1;
    max-width: none
}

nav.pagination--fluid ol.pagination__items li {
    flex: 1 0 var(--spacing-600)
}

[dir=rtl] nav.pagination svg.icon--arrow-left-16,
[dir=rtl] nav.pagination svg.icon--arrow-right-16 {
    transform: rotate(180deg)
}

@media (min-width: 768px) {
    nav.pagination {
        margin: var(--spacing-200) 0
    }
}

.clearfix:after,
.clearfix:before {
    content: " ";
    display: table;
    line-height: 0
}

.clearfix:after {
    clear: both
}

.clipped {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px
}

.clipped--stealth:focus {
    clip-path: none;
    height: auto;
    overflow: visible;
    white-space: normal;
    width: auto
}

.image-stretch {
    height: auto;
    width: 100%
}

.image-scale {
    height: auto;
    max-width: 100%
}

.image-center {
    display: table-cell;
    text-align: center;
    vertical-align: middle
}

.image-center img {
    max-height: 100%;
    max-width: 100%
}

.image-treatment {
    align-items: center;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    overflow: hidden;
    position: relative
}

.image-treatment:after {
    background: #0000000d;
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0
}

.image-treatment>img {
    display: inline-block;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain
}

.image-treatment-large {
    align-items: center;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    overflow: hidden;
    position: relative
}

.image-treatment-large:after {
    background: #0000000d;
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0
}

.image-treatment-large>img {
    display: inline-block;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain
}

.image-disabled {
    filter: var(--color-media-disabled-filter)
}

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.scrollbars-permanent {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scroll-snap-type: proximity;
    scroll-snap-type: x proximity
}

.scrollbars-permanent::-webkit-scrollbar {
    background-color: var(--color-background-faint);
    border-radius: 12px
}

.scrollbars-permanent::-webkit-scrollbar:vertical {
    width: 6px
}

.scrollbars-permanent::-webkit-scrollbar:horizontal {
    height: 6px
}

.scrollbars-permanent::-webkit-scrollbar-thumb {
    background-color: var(--color-foreground-secondary);
    border-color: transparent;
    border-radius: 12px;
    border-right-style: inset;
    box-shadow: none
}

.eek {
    align-items: stretch;
    display: inline-flex;
    flex-direction: row-reverse;
    font-family: Arial, sans-serif;
    font-weight: 700;
    height: 24px;
    position: relative
}

.eek--large {
    height: 32px
}

.eek__container {
    align-items: center;
    border: 1px solid #000;
    border-left: none;
    border-radius: 0 2px 2px 0;
    display: inline-flex;
    flex-direction: row-reverse
}

.eek .icon--eek-arrow {
    rotate: 180deg;
    width: 9px
}

.eek--large .icon--eek-arrow {
    width: 12.5px
}

.eek__arrow {
    overflow: hidden;
    width: 17px
}

.eek__arrow:before {
    border: .5px solid #000;
    border-radius: 2px;
    content: "";
    display: block;
    height: 19.7989898732px;
    margin-top: 2.3px;
    position: relative;
    right: 12px;
    transform: rotate(45deg);
    width: 19.7989898732px
}

.eek--rating-1 .eek__container {
    background: #00a650
}

.eek--rating-1 svg.icon--eek-arrow {
    fill: #00a650
}

.eek--rating-2 .eek__container {
    background: #4dbd38
}

.eek--rating-2 svg.icon--eek-arrow {
    fill: #4dbd38
}

.eek--rating-3 .eek__container {
    background: #b3db18
}

.eek--rating-3 svg.icon--eek-arrow {
    fill: #b3db18
}

.eek--rating-4 .eek__container {
    background: #fff200
}

.eek--rating-4 svg.icon--eek-arrow {
    fill: #fff200
}

.eek--rating-5 .eek__container {
    background: #fab20b
}

.eek--rating-5 svg.icon--eek-arrow {
    fill: #fab20b
}

.eek--rating-6 .eek__container {
    background: #f25c19
}

.eek--rating-6 svg.icon--eek-arrow {
    fill: #f25c19
}

.eek--rating-7 .eek__container {
    background: #ed1c24
}

.eek--rating-7 svg.icon--eek-arrow {
    fill: #ed1c24
}

.eek__rating {
    color: #fff;
    display: inline-block;
    font-size: 18px;
    margin-right: 8px;
    text-shadow: -.5px .5px 0 #000, .5px .5px 0 #000, .5px -.5px 0 #000, -.5px -.5px 0 #000
}

.eek--large .eek__rating {
    font-size: 24px
}

.eek__rating-range {
    align-items: center;
    background-color: #fff;
    border-radius: 1px 0 0 1px;
    display: inline-flex;
    flex-direction: column;
    height: 20px;
    margin: 1px;
    padding: 0 1px
}

.eek--large .eek__rating-range {
    height: 28px
}

.eek__rating-range>.icon--eek-range-arrow {
    height: 6px;
    width: 5px
}

.eek--large .eek__rating-range>.icon--eek-range-arrow {
    height: 7px;
    width: 6px
}

.eek__rating-range>span {
    font-size: 8px;
    height: 8px
}

.eek--large .eek__rating-range>span {
    font-size: 10px;
    height: 10px
}

@media not all and (-webkit-min-device-pixel-ratio: 0),
not all and (min-resolution: .001dpcm) {
    @supports (-webkit-appearance: none) {
        .eek__rating {
            text-shadow:none;
            -webkit-text-stroke: .5px;
            -webkit-text-stroke-color: #000
        }
    }
}

[dir=rtl] .eek {
    direction: ltr
}

@font-face {
    font-family: Reddit Sans Condensed Bold;
    src: url(https://ir.ebaystatic.com/cr/v/c01/Reddit_Sans_Condensed_Bold/RedditSansCondensed-Bold.ttf)
}

.ccd {
    display: inline-flex;
    font-family: Reddit Sans Condensed Bold, Market Sans, Arial, sans-serif;
    gap: 8px
}

.ccd__charger-icon {
    height: 57px;
    width: 42px
}

.ccd__description-figure {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 39px
}

.ccd__top-icon {
    height: 18px;
    width: 27px
}

.ccd__body {
    align-items: center;
    border: 1px solid var(--color-foreground-primary);
    border-radius: 1.5px;
    display: flex;
    flex-direction: column;
    font-size: .4375rem;
    font-weight: var(--font-weight-bold);
    height: 37px;
    justify-content: center;
    overflow: hidden;
    text-align: center;
    width: 39px
}

nav.breadcrumbs {
    color: var( --breadcrumbs-item-foreground-color, var(--color-foreground-secondary));
    font-size: var(--font-size-small);
    height: -moz-fit-content;
    height: fit-content;
    margin: 8px 0;
    min-height: 16px;
    overflow-x: scroll;
    padding: 8px;
    scrollbar-width: none;
    white-space: nowrap
}

nav.breadcrumbs>ul {
    display: inline-block;
    margin: 0;
    min-width: 100%;
    padding: 0;
    right: 0
}

nav.breadcrumbs>ul>li {
    align-items: center;
    display: inline-flex;
    vertical-align: middle
}

nav.breadcrumbs>ul>li[hidden] {
    display: none
}

nav.breadcrumbs>ul>li svg {
    margin-left: 3px;
    margin-right: 3px
}

nav.breadcrumbs>ul>li svg.icon--12 {
    margin-left: var(--spacing-75);
    margin-right: var(--spacing-75)
}

nav.breadcrumbs>ul>li>a {
    -webkit-text-decoration: none;
    text-decoration: none
}

nav.breadcrumbs>ul>li>button {
    background: none;
    border: none;
    font-family: inherit;
    font-size: 1em;
    margin: 0;
    padding: 0
}

nav.breadcrumbs>ul>li>a,
nav.breadcrumbs>ul>li>button {
    color: inherit;
    max-width: 168px;
    outline-offset: 5px;
    overflow: hidden;
    text-overflow: ellipsis
}

nav.breadcrumbs>ul>li>a:focus,
nav.breadcrumbs>ul>li>a:hover,
nav.breadcrumbs>ul>li>button:focus,
nav.breadcrumbs>ul>li>button:hover {
    -webkit-text-decoration: underline;
    text-decoration: underline
}

nav.breadcrumbs>ul>li>a[aria-current],
nav.breadcrumbs>ul>li>button[aria-current] {
    color: var( --breadcrumbs-item-current-foreground-color, var(--color-foreground-primary));
    -webkit-text-decoration: none;
    text-decoration: none
}

nav.breadcrumbs>ul>li>a:focus:not(:focus-visible),
nav.breadcrumbs>ul>li>button:focus:not(:focus-visible) {
    outline: none
}

nav.breadcrumbs::-webkit-scrollbar {
    display: none
}

nav.breadcrumbs.breadcrumb--overflow {
    overflow-x: unset;
    scrollbar-width: unset
}

nav.breadcrumbs .fake-menu-button__button,
nav.breadcrumbs .menu-button__button {
    background-color: var( --icon-button-background-color, var(--color-background-secondary));
    height: var(--spacing-300);
    min-height: var(--spacing-300);
    min-width: var(--spacing-300);
    outline-offset: 1px;
    width: var(--spacing-300)
}

nav.breadcrumbs .fake-menu-button__button svg.icon,
nav.breadcrumbs .menu-button__button svg.icon {
    fill: var( --breadcrumbs-overflow-foreground-color, var(--color-foreground-secondary))
}

nav.breadcrumbs .fake-menu-button__menu,
nav.breadcrumbs .menu-button__menu {
    font-size: var(--font-size-default)
}

[dir=rtl] nav.breadcrumbs svg.icon--12 {
    transform: rotate(180deg)
}

@media (min-width: 512px) {
    nav.breadcrumbs {
        margin: 16px 0
    }
}