.wrapper-Dm3QfU8u {
    color: var(--color-container-fill-primary-neutral-extra-light);
    display: block;
    grid-area: chart;
    height: var(--ticker-card-chart-height, 88px);
    margin: 8px -20px 0;
    min-width: 0;
    width: calc(100% + 40px)
}

.wrapper-Dm3QfU8u svg {
    display: block;
    height: 100%;
    width: calc(100% - 12px)
}

.timeframe-Dm3QfU8u {
    grid-area: timeframe;
    min-height: 16px
}

.wrapper-uAtw2F8c {
    --base-ticker-card-container-border-radius: 12px;
    --base-ticker-card-container-margin: 0;
    --base-ticker-card-container-padding: 16px 16px 4px;
    --base-ticker-card-container-width: auto;
    --ticker-card-chart-height: 88px;
    min-width: 240px;
    overflow: hidden
}

.container-uAtw2F8c {
    display: grid;
    grid-template-areas: "header" "valueAndChange" "chart" "timeframe";
    width: 100%
}

.containerNoData-uAtw2F8c {
    grid-template-areas: "header" "noData"
}

.containerWithoutLogo-uAtw2F8c {
    grid-template-areas: "header" "valueAndChange" "chart" "timeframe"
}

.containerNoData-uAtw2F8c.containerWithoutLogo-uAtw2F8c {
    grid-template-areas: "header" "noData"
}

.header-uAtw2F8c {
    display: flex;
    gap: 4px;
    grid-area: header;
    min-width: 0
}

.valueAndChange-uAtw2F8c {
    display: flex;
    flex-direction: column;
    grid-area: valueAndChange;
    margin-top: 12px;
    min-height: 48px
}

.valueAndChange-uAtw2F8c .change-uAtw2F8c {
    align-items: baseline;
    direction: ltr;
    display: flex;
    gap: 4px;
    height: 24px;
    justify-content: start
}

.valueAndChange-uAtw2F8c .change-uAtw2F8c:dir(rtl) {
    justify-content: end
}

.valueAndChange-uAtw2F8c .changePeriod-uAtw2F8c {
    font-family: -apple-system, BlinkMacSystemFont, Trebuchet MS, Roboto, Ubuntu, sans-serif;
    font-feature-settings: "tnum" on, "lnum" on;
    font-style: normal;
    --ui-lib-typography-font-size: 12px;
    font-size: var(--ui-lib-typography-font-size);
    font-weight: 400;
    --ui-lib-typography-line-height: 16px;
    line-height: var(--ui-lib-typography-line-height)
}

.changePositive-uAtw2F8c {
    color: var(--color-content-primary-positive)
}

.changeNegative-uAtw2F8c {
    color: var(--color-content-primary-negative)
}

.changeNeutral-uAtw2F8c {
    color: var(--color-default-gray)
}