:root {
    --color-light-accent-primary: #ef3124;
    --color-light-neutral-translucent-500: rgba(9, 12, 37, 0.28);
    --color-light-status-info: #2288fa;
    --color-light-text-primary: rgba(3, 3, 6, 0.88);
    --color-light-text-secondary: rgba(4, 4, 19, 0.55);
    --color-light-text-tertiary: rgba(5, 8, 29, 0.38);
}
:root {
    --gap-0: 0px;
    --gap-2: 2px;
    --gap-4: 4px;
    --gap-8: 8px;
    --gap-12: 12px;
    --gap-16: 16px;
    --gap-20: 20px;
    --gap-24: 24px;
    --gap-32: 32px;
    --gap-4-neg: -4px;
}
:root {
    --font-family-system:
        system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
    --font-family-styrene:
        'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
        sans-serif;
}
:root {
    --focus-color: var(--color-light-status-info);
    --disabled-cursor: not-allowed;
}
:root {
    --primary-tablist-color: var(--color-light-text-secondary);
    --primary-tablist-hover-color: var(--color-light-text-primary);
    --primary-tablist-selected-color: var(--color-light-text-primary);
    --primary-tablist-disabled-color: var(--color-light-text-tertiary);
    --primary-tablist-bottom-border-color: var(--color-light-neutral-translucent-500);
    --primary-tablist-line-color: var(--color-light-accent-primary);
    --primary-tablist-s-gaps: var(--gap-32);
    --primary-tablist-s-padding: var(--gap-0) var(--gap-0) var(--gap-12);
    --primary-tablist-m-gaps: var(--gap-32);
    --primary-tablist-m-padding: var(--gap-0) var(--gap-0) var(--gap-16);
    --primary-tablist-l-gaps: var(--gap-32);
    --primary-tablist-l-padding: var(--gap-0) var(--gap-0) var(--gap-20);
    --primary-tablist-xl-gaps: var(--gap-32);
    --primary-tablist-xl-padding: var(--gap-4) var(--gap-0) var(--gap-24);
}
.component {
    position: relative;
    display: inline-flex;
    min-width: 100%;
}
.component:before {
        content: '';
        display: block;
        position: absolute;
        bottom: 1px;
        height: 1px;
        width: 100%;
        background-color: var(--primary-tablist-bottom-border-color);
    }
.desktop.paragraph-primary-large .title {
        font-size: 18px;
        line-height: 24px;
        font-weight: 400;
        font-family: var(--font-family-system);
    }
.desktop.paragraph-primary-medium .title {
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
        font-family: var(--font-family-system);
    }
.desktop.paragraph-primary-small .title {
        font-size: 14px;
        line-height: 20px;
        font-weight: 400;
        font-family: var(--font-family-system);
    }
.desktop.action-primary-large .title {
        font-size: 18px;
        line-height: 24px;
        font-weight: 500;
        font-family: var(--font-family-system);
    }
.desktop.action-primary-medium .title {
        font-size: 16px;
        line-height: 24px;
        font-weight: 500;
        font-family: var(--font-family-system);
    }
.desktop.action-primary-small .title {
        font-size: 14px;
        line-height: 20px;
        font-weight: 500;
        font-family: var(--font-family-system);
    }
.desktop.accent-primary-large .title {
        font-size: 18px;
        line-height: 24px;
        font-weight: 700;
        font-family: var(--font-family-system);
    }
.desktop.accent-primary-medium .title {
        font-size: 16px;
        line-height: 24px;
        font-weight: 700;
        font-family: var(--font-family-system);
    }
.desktop.accent-primary-small .title {
        font-size: 14px;
        line-height: 20px;
        font-weight: 700;
        font-family: var(--font-family-system);
    }
.desktop.paragraph-primary-large .title, .desktop.paragraph-primary-medium .title, .desktop.accent-primary-large .title, .desktop.accent-primary-medium .title, .desktop.action-primary-large .title, .desktop.action-primary-medium .title {
        padding-bottom: calc(24px / 2);
    }
.desktop.paragraph-primary-large .title + .title,
    .desktop.paragraph-primary-medium .title + .title,
    .desktop.accent-primary-large .title + .title,
    .desktop.accent-primary-medium .title + .title,
    .desktop.action-primary-large .title + .title,
    .desktop.action-primary-medium .title + .title,
    .desktop.paragraph-primary-large .pickerWrapper,
    .desktop.paragraph-primary-medium .pickerWrapper,
    .desktop.accent-primary-large .pickerWrapper,
    .desktop.accent-primary-medium .pickerWrapper,
    .desktop.action-primary-large .pickerWrapper,
    .desktop.action-primary-medium .pickerWrapper {
        margin-left: 24px;
    }
.desktop.paragraph-primary-large .option, .desktop.paragraph-primary-medium .option, .desktop.accent-primary-large .option, .desktop.accent-primary-medium .option, .desktop.action-primary-large .option, .desktop.action-primary-medium .option {
        padding: var(--gap-0);
    }
.desktop.paragraph-primary-large .scrollControls > button, .desktop.paragraph-primary-medium .scrollControls > button, .desktop.accent-primary-large .scrollControls > button, .desktop.accent-primary-medium .scrollControls > button, .desktop.action-primary-large .scrollControls > button, .desktop.action-primary-medium .scrollControls > button {
            box-sizing: content-box;
            width: 24px;
            height: 24px;
            padding: var(--gap-0);
        }
.desktop.paragraph-primary-large .scrollControls button:first-child, .desktop.paragraph-primary-medium .scrollControls button:first-child, .desktop.accent-primary-large .scrollControls button:first-child, .desktop.accent-primary-medium .scrollControls button:first-child, .desktop.action-primary-large .scrollControls button:first-child, .desktop.action-primary-medium .scrollControls button:first-child {
            margin: var(--gap-0) var(--gap-0) var(--gap-0) calc(24px / 2);
        }
.desktop.paragraph-primary-small .title, .desktop.accent-primary-small .title, .desktop.action-primary-small .title {
        padding-bottom: calc(20px / 2);
    }
.desktop.paragraph-primary-small .title + .title,
    .desktop.accent-primary-small .title + .title,
    .desktop.action-primary-small .title + .title,
    .desktop.paragraph-primary-small .pickerWrapper,
    .desktop.accent-primary-small .pickerWrapper,
    .desktop.action-primary-small .pickerWrapper {
        margin-left: 20px;
    }
.desktop.paragraph-primary-small .option, .desktop.accent-primary-small .option, .desktop.action-primary-small .option {
        padding: var(--gap-0);
    }
.desktop.paragraph-primary-small .scrollControls > button, .desktop.accent-primary-small .scrollControls > button, .desktop.action-primary-small .scrollControls > button {
            box-sizing: content-box;
            width: 20px;
            height: 20px;
            padding: var(--gap-0);
        }
.desktop.paragraph-primary-small .scrollControls button:first-child, .desktop.accent-primary-small .scrollControls button:first-child, .desktop.action-primary-small .scrollControls button:first-child {
            margin: var(--gap-0) var(--gap-0) var(--gap-0) calc(20px / 2);
        }
.desktop.headline-system-xlarge .title {
        font-size: 48px;
        line-height: 52px;
        font-weight: 700;
        font-family: var(--font-family-system);
    }
.desktop.headline-system-large .title {
        font-size: 40px;
        line-height: 48px;
        font-weight: 700;
        font-family: var(--font-family-system);
    }
.desktop.headline-system-medium .title {
        font-size: 30px;
        line-height: 36px;
        font-weight: 700;
        font-family: var(--font-family-system);
    }
.desktop.headline-system-small .title {
        font-size: 22px;
        line-height: 26px;
        font-weight: 700;
        font-family: var(--font-family-system);
    }
.desktop.headline-system-xsmall .title {
        font-size: 18px;
        line-height: 22px;
        font-weight: 700;
        font-family: var(--font-family-system);
    }
.desktop.headline-xlarge .title {
        font-size: 48px;
        line-height: 64px;
        font-weight: 500;
        font-feature-settings: 'ss01';
        font-family: var(--font-family-styrene);
    }
.desktop.headline-large .title {
        font-size: 40px;
        line-height: 48px;
        font-weight: 500;
        font-feature-settings: 'ss01';
        font-family: var(--font-family-styrene);
    }
.desktop.headline-medium .title {
        font-size: 32px;
        line-height: 40px;
        font-weight: 500;
        font-feature-settings: 'ss01';
        font-family: var(--font-family-styrene);
    }
.desktop.headline-small .title {
        font-size: 24px;
        line-height: 32px;
        font-weight: 500;
        font-feature-settings: 'ss01';
        font-family: var(--font-family-styrene);
    }
.desktop.headline-xsmall .title {
        font-size: 20px;
        line-height: 24px;
        font-weight: 500;
        font-feature-settings: 'ss01';
        font-family: var(--font-family-styrene);
    }
.desktop.headline-system-xlarge .title {
        padding-bottom: calc(52px / 2);
    }
.desktop.headline-system-xlarge .title + .title,
    .desktop.headline-system-xlarge .pickerWrapper {
        margin-left: 52px;
    }
.desktop.headline-system-xlarge .option {
        padding: var(--gap-0);
    }
.desktop.headline-system-xlarge .scrollControls > button {
            box-sizing: content-box;
            width: 52px;
            height: 52px;
            padding: var(--gap-0);
        }
.desktop.headline-system-xlarge .scrollControls button:first-child {
            margin: var(--gap-0) var(--gap-0) var(--gap-0) calc(52px / 2);
        }
.desktop.headline-system-large .title, .desktop.headline-large .title {
        padding-bottom: calc(48px / 2);
    }
.desktop.headline-system-large .title + .title,
    .desktop.headline-large .title + .title,
    .desktop.headline-system-large .pickerWrapper,
    .desktop.headline-large .pickerWrapper {
        margin-left: 48px;
    }
.desktop.headline-system-large .option, .desktop.headline-large .option {
        padding: var(--gap-0);
    }
.desktop.headline-system-large .scrollControls > button, .desktop.headline-large .scrollControls > button {
            box-sizing: content-box;
            width: 48px;
            height: 48px;
            padding: var(--gap-0);
        }
.desktop.headline-system-large .scrollControls button:first-child, .desktop.headline-large .scrollControls button:first-child {
            margin: var(--gap-0) var(--gap-0) var(--gap-0) calc(48px / 2);
        }
.desktop.headline-system-medium .title {
        padding-bottom: calc(36px / 2);
    }
.desktop.headline-system-medium .title + .title,
    .desktop.headline-system-medium .pickerWrapper {
        margin-left: 36px;
    }
.desktop.headline-system-medium .option {
        padding: var(--gap-0);
    }
.desktop.headline-system-medium .scrollControls > button {
            box-sizing: content-box;
            width: 36px;
            height: 36px;
            padding: var(--gap-0);
        }
.desktop.headline-system-medium .scrollControls button:first-child {
            margin: var(--gap-0) var(--gap-0) var(--gap-0) calc(36px / 2);
        }
.desktop.headline-system-small .title {
        padding-bottom: calc(26px / 2);
    }
.desktop.headline-system-small .title + .title,
    .desktop.headline-system-small .pickerWrapper {
        margin-left: 26px;
    }
.desktop.headline-system-small .option {
        padding: var(--gap-0);
    }
.desktop.headline-system-small .scrollControls > button {
            box-sizing: content-box;
            width: 26px;
            height: 26px;
            padding: var(--gap-0);
        }
.desktop.headline-system-small .scrollControls button:first-child {
            margin: var(--gap-0) var(--gap-0) var(--gap-0) calc(26px / 2);
        }
.desktop.headline-system-xsmall .title {
        padding-bottom: calc(22px / 2);
    }
.desktop.headline-system-xsmall .title + .title,
    .desktop.headline-system-xsmall .pickerWrapper {
        margin-left: 22px;
    }
.desktop.headline-system-xsmall .option {
        padding: var(--gap-0);
    }
.desktop.headline-system-xsmall .scrollControls > button {
            box-sizing: content-box;
            width: 22px;
            height: 22px;
            padding: var(--gap-0);
        }
.desktop.headline-system-xsmall .scrollControls button:first-child {
            margin: var(--gap-0) var(--gap-0) var(--gap-0) calc(22px / 2);
        }
.desktop.headline-xlarge .title {
        padding-bottom: calc(64px / 2);
    }
.desktop.headline-xlarge .title + .title,
    .desktop.headline-xlarge .pickerWrapper {
        margin-left: 64px;
    }
.desktop.headline-xlarge .option {
        padding: var(--gap-0);
    }
.desktop.headline-xlarge .scrollControls > button {
            box-sizing: content-box;
            width: 64px;
            height: 64px;
            padding: var(--gap-0);
        }
.desktop.headline-xlarge .scrollControls button:first-child {
            margin: var(--gap-0) var(--gap-0) var(--gap-0) calc(64px / 2);
        }
.desktop.headline-medium .title {
        padding-bottom: calc(40px / 2);
    }
.desktop.headline-medium .title + .title,
    .desktop.headline-medium .pickerWrapper {
        margin-left: 40px;
    }
.desktop.headline-medium .option {
        padding: var(--gap-0);
    }
.desktop.headline-medium .scrollControls > button {
            box-sizing: content-box;
            width: 40px;
            height: 40px;
            padding: var(--gap-0);
        }
.desktop.headline-medium .scrollControls button:first-child {
            margin: var(--gap-0) var(--gap-0) var(--gap-0) calc(40px / 2);
        }
.desktop.headline-small .title {
        padding-bottom: calc(32px / 2);
    }
.desktop.headline-small .title + .title,
    .desktop.headline-small .pickerWrapper {
        margin-left: 32px;
    }
.desktop.headline-small .option {
        padding: var(--gap-0);
    }
.desktop.headline-small .scrollControls > button {
            box-sizing: content-box;
            width: 32px;
            height: 32px;
            padding: var(--gap-0);
        }
.desktop.headline-small .scrollControls button:first-child {
            margin: var(--gap-0) var(--gap-0) var(--gap-0) calc(32px / 2);
        }
.desktop.headline-xsmall .title {
        padding-bottom: calc(24px / 2);
    }
.desktop.headline-xsmall .title + .title,
    .desktop.headline-xsmall .pickerWrapper {
        margin-left: 24px;
    }
.desktop.headline-xsmall .option {
        padding: var(--gap-0);
    }
.desktop.headline-xsmall .scrollControls > button {
            box-sizing: content-box;
            width: 24px;
            height: 24px;
            padding: var(--gap-0);
        }
.desktop.headline-xsmall .scrollControls button:first-child {
            margin: var(--gap-0) var(--gap-0) var(--gap-0) calc(24px / 2);
        }
.fullWidthScroll {
    min-width: calc(100% - 2 * var(--gap-16));
    margin: var(--gap-0) var(--gap-16);
}
.container {
    position: relative;
    overflow: hidden;
    margin: var(--gap-4-neg) var(--gap-0) var(--gap-4-neg) var(--gap-4-neg);
    padding: var(--gap-4) var(--gap-0) var(--gap-4) var(--gap-4);
}
.title {
    display: flex;
    align-items: center;
    height: 100%;
    padding: var(--gap-0);
    cursor: pointer;
    color: var(--primary-tablist-color);
    transition: color 0.2s ease;
    border: 0;
    background: none;
    white-space: nowrap;
    box-shadow: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    outline: none;
}
.title:not(:disabled):hover {
        color: var(--primary-tablist-hover-color);
    }
.focused {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
}
.collapsed {
    order: 99;
    visibility: collapse;
}
.selected {
    cursor: default;
    color: var(--primary-tablist-selected-color);
}
.disabled {
    cursor: var(--disabled-cursor);
    color: var(--primary-tablist-disabled-color);
}
.line {
    position: absolute;
    height: 3px;
    bottom: calc(var(--gap-2) / 2);
    left: var(--gap-0);
    background-color: var(--primary-tablist-line-color);
    transition:
        transform 0.2s ease,
        width 0.2s ease;
}
.option {
    color: var(--color-light-text-primary);
}
.s .title, .xs .title, .xxs .title {
        padding: var(--primary-tablist-s-padding);
    }
.s .title + .title, .xs .title + .title, .xxs .title + .title {
        margin-left: var(--primary-tablist-s-gaps);
    }
.s .pickerWrapper, .xs .pickerWrapper, .xxs .pickerWrapper {
        margin-left: var(--primary-tablist-s-gaps);
    }
.s .option, .xs .option, .xxs .option {
        padding: var(--gap-0);
    }
.m .title {
        padding: var(--primary-tablist-m-padding);
    }
.m .title + .title {
        margin-left: var(--primary-tablist-m-gaps);
    }
.m .pickerWrapper {
        margin-left: var(--primary-tablist-m-gaps);
    }
.m .option {
        padding: var(--gap-0);
    }
.l .title {
        padding: var(--primary-tablist-l-padding);
    }
.l .title + .title {
        margin-left: var(--primary-tablist-l-gaps);
    }
.l .pickerWrapper {
        margin-left: var(--primary-tablist-l-gaps);
    }
.l .option {
        padding: var(--gap-0);
    }
.xl .title {
        padding: var(--primary-tablist-xl-padding);
    }
.xl .title + .title {
        margin-left: var(--primary-tablist-xl-gaps);
    }
.xl .pickerWrapper {
        margin-left: var(--primary-tablist-xl-gaps);
    }
.xl .option {
        padding: var(--gap-0);
    }
.rightAddons {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: var(--gap-8);
}
.rightAddonsMarginZero {
    margin-left: var(--gap-0);
}
.title.noTextStyle {
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    font-family: var(--font-family-system);
}