/* smart-chart */
smart-chart {
    display: block;
    width: var(--smart-chart-default-width);
    height: var(--smart-chart-default-height);
    touch-action: none;
}

    smart-chart .smart-chart-axis-text,
    smart-chart .smart-chart-label-text,
    smart-chart .smart-chart-legend-text,
    smart-chart .smart-chart-annotation-text,
    .smart-chart-tooltip-text {
        box-sizing: content-box;
        ui-state: var(--smart-background-color);
        color: var(--smart-background-color);
        font-family: var(--smart-font-family);
        font-size: calc(var(--smart-font-size) - 1px);
    }

    smart-chart .smart-chart-axis-description {
        ui-state: var(--smart-background-color);
        color: var(--smart-background-color);
        font-family: var(--smart-font-family);
        font-size: calc(var(--smart-font-size) - 1px);
    }

    smart-chart .smart-chart-title-text,
    smart-chart .smart-chart-title-description {
        ui-state: var(--smart-background-color);
        color: var(--smart-background-color);
        font-family: var(--smart-font-family);
    }

    smart-chart .smart-chart-title-text {
        font-weight: bold;
        font-size: calc(var(--smart-font-size) + 2px);
    }

    smart-chart .smart-chart-title-description {
        font-size: var(--smart-font-size);
    }

.smart-chart-tooltip {
    position: absolute;
    cursor: default;
    z-index: 10000000;
    transition: 0.3s ease-in, transform 0.3s ease-in;
    opacity: 1;
    transform: scale(1);
}

    .smart-chart-tooltip[animation="none"] {
        transition: none;
    }

    .smart-chart-tooltip.smart-visibility-hidden {
        transform: scale(0);
    }

.smart-chart-tooltip-arrow-outer,
.smart-chart-tooltip-arrow-inner {
    box-sizing: content-box;
    width: 0;
    height: 0;
    position: absolute;
    z-index: 10000001;
}

.smart-chart-tooltip-arrow-inner {
    z-index: 10000002;
}

.smart-chart-tooltip-content {
    position: absolute;
    box-sizing: content-box;
    outline: none;
    border: 1px solid transparent;
    padding: 3px;
    text-align: center;
    vertical-align: middle;
    margin: 0 0 0 0;
    cursor: default;
    left: 0;
    top: 0;
    border-radius: var(--smart-border-radius);
}

[theme="dark"] smart-chart .smart-chart-axis-text,
[theme="dark"] smart-chart .smart-chart-label-text,
[theme="dark"] smart-chart .smart-chart-legend-text,
[theme="dark"] smart-chart .smart-chart-annotation-text,
[theme="dark"] .smart-chart-tooltip .smart-chart-tooltip-text,
smart-chart[theme="dark"] .smart-chart-axis-text,
smart-chart[theme="dark"] .smart-chart-label-text,
smart-chart[theme="dark"] .smart-chart-legend-text,
smart-chart[theme="dark"] .smart-chart-annotation-text,
[theme="dark"] .smart-chart-tooltip .smart-chart-tooltip-text {
    ui-state: var(--smart-background-color);
    color: var(--smart-background-color);
}

[theme="dark"] smart-chart .smart-chart-axis-description,
smart-chart[theme="dark"] .smart-chart-axis-description {
    ui-state: var(--smart-background-color);
    color: var(--smart-background-color);
}

[theme="dark"] smart-chart .smart-chart-title-text,
[theme="dark"] smart-chart .smart-chart-title-description,
smart-chart[theme="dark"] .smart-chart-title-text,
smart-chart[theme="dark"] .smart-chart-title-description {
    ui-state: var(--smart-background-color);
    color: var(--smart-background-color);
}



.smart-chart-range-selector > smart-chart {
    width: 100%;
    height: 100%;
}

.smart-chart-range-selector .slider {
    box-sizing: content-box;
    pointer-events: none;
}