[data-pie-id]>*:nth-child(7n+1),
[data-bar-id]>*:nth-child(7n+1),
[data-line-id]>*:nth-child(7n+1) {
    color: #f23d3d;
}

text {
    display: none;
}

[data-pie-id]>*:nth-child(7n+2),
[data-bar-id]>*:nth-child(7n+2),
[data-line-id]>*:nth-child(7n+2) {
    color: #f02121;
}

[data-pie-id]>*:nth-child(7n+3),
[data-bar-id]>*:nth-child(7n+3),
[data-line-id]>*:nth-child(7n+3) {
    color: #e61010;
}

[data-pie-id]>*:nth-child(7n+4),
[data-bar-id]>*:nth-child(7n+4),
[data-line-id]>*:nth-child(7n+4) {
    color: #cf0e0e;
}

[data-pie-id]>*:nth-child(7n+5),
[data-bar-id]>*:nth-child(7n+5),
[data-line-id]>*:nth-child(7n+5) {
    color: #ba0d0d;
}

[data-pie-id]>*:nth-child(7n+6),
[data-bar-id]>*:nth-child(7n+6),
[data-line-id]>*:nth-child(7n+6) {
    color: #a70c0c;
}

[data-pie-id]>*:nth-child(7n+7),
[data-bar-id]>*:nth-child(7n+7),
[data-line-id]>*:nth-child(7n+7) {
    color: #960b0b;
}

#pie,
#donut,
#bar {
    max-height: 100vh;
}

svg {
    width: 80%;
    margin: 0 10%;
    height: auto;
}

.tooltip {
    margin-left: -5px;
    border-radius: 3px;
    padding: 5px;
}

ul[data-pie-id] {
    list-style: none;
    padding: 10px;
}