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

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

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

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

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

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

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

#pie,
#donut,
#bar {
    max-height: 450px;
}


svg {
    width: 100%;
    height: auto;
}

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

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

.small-4 ul li span {
    width: 12px;
    height: 12px;
    border-radius: 100px;
    display: inline-block;
    margin-right: 5px;
}

    .small-4 ul li span.pending {
        background-color: #EFAC00;
    }

    .small-4 ul li span.rejected {
        background-color: #FF0000;
    }

    .small-4 ul li span.approved {
        background-color: #00BBAE;
    }

    .small-4 ul li span.returned {
        background-color: #FC6503;
    }

    .small-4 ul li span.buapproved {
        background-color: #007bff;
    }

    .small-4 ul li span.burejected {
        background-color: #6c757d;
    }

    .small-4 ul li span.resubmit {
        background-color: #8d065c;
    }

.small-4 ul li {
    margin-bottom: 6px;
}

    .small-4 ul li i {
        color: #08080D !important;
        font-style: normal;
        display: inline-block;
    }

        .small-4 ul li i span {
            font-weight: 500;
            margin-left: 20px;
        }

.chart-wrapp {
    position: relative;
}

    .chart-wrapp span {
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 20px;
        color: #707378;
    }

.Number-block .chart-wrapp h3 {
    font-style: normal;
    font-weight: 500;
    font-size: 27px;
    line-height: 32px;
    text-align: center;
    color: #08080D;
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    max-width: 120px;
    margin: 0 auto;
    height: 100%;
    justify-content: center;
    align-items: center;
}

#svg2 {
    position: relative;
    z-index: 3;
}

text {
    fill: #64318E !important;
    font-weight: bold;
}

[role="tooltip"] text {
    color: #fff !important;
    fill: #fff !important;
}

text {
    opacity: 0 !important;
}

g:hover text {
    opacity: 1 !important;
}


.wfdashboard text {
    opacity: 1 !important;
}

.wfdashboard g:hover text {
    opacity: 1 !important;
}