[data-theme=light] {
    --_0-7MXf: var(--color-white);
    --_1-7MXf: var(--color-white);
    --_2-7MXf: var(--color-white);
    --_3-7MXf: var(--color-cold-gray-100);
    --_4-7MXf: var(--color-cold-gray-900)
}

[data-theme=dark] {
    --_0-7MXf: var(--color-white);
    --_1-7MXf: var(--color-white);
    --_2-7MXf: var(--color-white);
    --_3-7MXf: var(--color-cold-gray-800);
    --_4-7MXf: var(--color-cold-gray-200)
}

.container-lLGceaUg {
    border-color: var(--base-ticker-card-container-border-color, var(--color-background-primary));
    border-radius: var(--base-ticker-card-container-border-radius, 8px);
    border-style: solid;
    border-width: var(--base-ticker-card-container-border-width, 0);
    box-sizing: var(--base-ticker-card-container-box-sizing, unset);
    display: grid;
    font-family: -apple-system, BlinkMacSystemFont, Trebuchet MS, Roboto, Ubuntu, sans-serif;
    font-feature-settings: "tnum" on, "lnum" on;
    font-style: normal;
    margin: var(--base-ticker-card-container-margin, 0 -12px);
    padding: var(--base-ticker-card-container-padding, 8px 12px);
    position: relative;
    width: var(--base-ticker-card-container-width, 100%);
    --ui-lib-typography-font-size: 16px;
    font-size: var(--ui-lib-typography-font-size);
    font-weight: 500;
    --ui-lib-typography-line-height: 24px;
    line-height: var(--ui-lib-typography-line-height)
}

@media (any-hover:hover) {
    .containerWithHover-lLGceaUg:hover {
        background-color: var(--base-ticker-card-container-hover, var(--color-bg-primary-hover));
        border-color: var(--base-ticker-card-container-hover-border-color, var(--color-bg-primary-hover))
    }
    .containerWithHover-lLGceaUg:hover .tickerCardShortName {
        background-color: var(--color-item-active-bg);
        color: var(--_2-7MXf)
    }
    .containerWithHover-lLGceaUg:hover .tickerCardProgressBar {
        background-color: var(--color-container-fill-primary-neutral-light)
    }
}

.containerWithHover-lLGceaUg:active {
    background-color: var(--base-ticker-card-container-active, var(--color-divider-line-primary));
    border-color: var(--base-ticker-card-container-active-border-color, var(--color-divider-line-primary))
}

@media (min-width:768px) {
    .containerWithHover-lLGceaUg:active html.feature-touch:active,
    html.feature-mobiletouch .containerWithHover-lLGceaUg:active:active {
        background-color: initial
    }
}

.containerWithHover-lLGceaUg:active .tickerCardShortName {
    background-color: var(--color-item-active-bg);
    color: var(--_2-7MXf)
}

@media (min-width:768px) {
    .containerSelected-lLGceaUg {
        background-color: var(--color-container-fill-primary-neutral-extra-light)
    }
    .containerSelected-lLGceaUg .tickerCardShortName {
        background-color: var(--color-item-active-bg);
        color: var(--_2-7MXf)
    }
}

.containerWithBorder-lLGceaUg {
    border: 1px solid var(--color-divider)
}

.tickerCardShortName {
    background-color: var(--_3-7MXf);
    border-radius: 6px;
    box-sizing: border-box;
    color: var(--_4-7MXf);
    font-family: -apple-system, BlinkMacSystemFont, Trebuchet MS, Roboto, Ubuntu, sans-serif;
    font-feature-settings: "tnum" on, "lnum" on;
    padding: 4px 8px;
    --ui-lib-typography-line-height: 16px;
    line-height: var(--ui-lib-typography-line-height);
    --ui-lib-typography-font-size: 12px;
    font-size: var(--ui-lib-typography-font-size);
    font-style: normal;
    font-weight: 600
}