.srri svg line {
    stroke: rgba(0, 0, 0, .5);
    stroke-width: 5px;
}

.srri-2 svg line:nth-child(-n+2),
.srri-3 svg line:nth-child(-n+3),
.srri-4 svg line:nth-child(-n+4) {
    stroke-width: 15px!important;
    stroke: rgb(var(--main-color));
    z-index: 1000;
}
.data-donuts {
    position: relative;
}

.data-donuts .arc-circle {
    opacity: 0;
    transform: scale(.5);
    transform-origin: center center;
    animation: fadeInSegments 0.5s cubic-bezier(0.25, 1.5, 0.5, 1) forwards;
    animation-delay: calc(0.15s * var(--index-circle) + .25s);
}



@keyframes fadeInSegments {
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.animated-bar-chart .bar {
    visibility: hidden;
    opacity: 0;
    animation: growBar 0.25s cubic-bezier(0.25, 1.5, 0.5, 1) forwards;
    transform-origin: center 80%;
    animation-delay: calc(0.15s * (var(--index) - 1));
}

.animated-bar-chart .bar-value {
    fill: #206d69;
    font-weight: bold;
    visibility: hidden;
    opacity: 0;
    animation: fadeIn 0.5s cubic-bezier(0.25, 1.5, 0.5, 1) forwards;
    animation-delay: calc(0.15s * var(--index) + .25s);
}

@keyframes growBar {
    from {
        visibility: visible;
        transform: scaleY(0);
    }
    to {
        visibility: visible;
        transform: scaleY(1);
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        visibility: visible;
    }
    100% {
        visibility: visible;
        opacity: 1;
    }
}

.donut-wrapper { position: relative; display: inline-block; }
.donut-tooltip {
  display: none;
  position: absolute;
  pointer-events: none;
  background: rgba(0,0,0,0.75);
  color: #fff;
  padding: 4px 8px;
  font-size: 0.75rem;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 10;
}