[eicbarchart] {
    position: relative;
}
[eicbarchart] svg text {
    stroke: var(--eicui-base-color-grey-25);
}
[eicbarchart] svg .plot rect {
    fill: var(--eicui-base-color-grey-10);
    transition: fill 0.5s;
}
[eicbarchart] svg .plot[primary] rect {
    fill: var(--eicui-base-color-primary-100);
}
[eicbarchart] svg .plot[secondary] rect {
    fill: var(--eicui-base-color-secondary-100);
}
[eicbarchart] svg .plot[success] rect {
    fill: var(--eicui-base-color-success-100);
}
[eicbarchart] svg .plot[danger] rect {
    fill: var(--eicui-base-color-danger-100);
}
[eicbarchart] svg .plot[warning] rect {
    fill: var(--eicui-base-color-warning-100);
}
[eicbarchart] svg .plot[info] rect {
    fill: var(--eicui-base-color-info-100);
}
[eiclinechart] svg .plot path {
    stroke: var(--eicui-base-color-grey-10);
    fill: transparent;
    transition: all 0.5s;
    stroke-width: 2px;
}
[eiclinechart] svg text {
    stroke: var(--eicui-base-color-grey-25);
}
[eiclinechart] svg .plot[primary] path {
    stroke: var(--eicui-base-color-primary-100);
}
[eiclinechart] svg .plot[secondary] path {
    stroke: var(--eicui-base-color-secondary-100);
}
[eiclinechart] svg .plot[success] path {
    stroke: var(--eicui-base-color-success-100);
}
[eiclinechart] svg .plot[danger] path {
    stroke: var(--eicui-base-color-danger-100);
}
[eiclinechart] svg .plot[warning] path {
    stroke: var(--eicui-base-color-warning-100);
}
[eiclinechart] svg .plot[info] path {
    stroke: var(--eicui-base-color-info-100);
}
[eiclinechart] svg .plot .dot {
    stroke: var(--eicui-base-color-grey-10);
    fill: var(--app-color-white);
    transition: all 0.5s;
    stroke-width: 2px;
}
[eiclinechart] svg .plot[primary] .dot {
    stroke: var(--eicui-base-color-primary-100);
}
[eiclinechart] svg .plot[secondary] .dot {
    stroke: var(--eicui-base-color-secondary-100);
}
[eiclinechart] svg .plot[success] .dot {
    stroke: var(--eicui-base-color-success-100);
}
[eiclinechart] svg .plot[danger] .dot {
    stroke: var(--eicui-base-color-danger-100);
}
[eiclinechart] svg .plot[warning] .dot {
    stroke: var(--eicui-base-color-warning-100);
}
[eiclinechart] svg .plot[info] .dot {
    stroke: var(--eicui-base-color-info-100);
}

[eicpiechart] svg .back { fill: var(--app-color-white); }
[eicpiechart] svg .slice {
    fill: transparent;
    animation: slicewheel 0.6s linear;
}
[eicpiechart] svg .plot circle[danger] { stroke: var(--eicui-base-color-danger-100); }
[eicpiechart] svg .plot circle[success] { stroke: var(--eicui-base-color-success-100); }
[eicpiechart] svg .plot circle[info] { stroke: var(--eicui-base-color-info-100); }
[eicpiechart] svg .plot circle[secondary] { stroke: var(--eicui-base-color-grey-50); }
[eicpiechart] svg .plot circle[primary] { stroke: var(--eicui-base-color-primary-100); }
[eicpiechart] svg .plot circle[warning] { stroke: var(--eicui-base-color-warning-100); }
[eicpiechart] svg .plot circle[accent] { stroke: var(--eicui-base-color-accent-100); }
@keyframes slicewheel {
    from { stroke-dasharray: 100; }
}