#donut-chart-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    width: 200px;
}

.donut-chart {
 
}

.donut-ring {
   stroke-linecap: butt;
}

.donut-segment {
    stroke-linecap: butt;
    transform-origin: center;
    transform: rotate(0deg);
    transition: stroke-dasharray 0.5s ease;
}

.donut-text {
 font-size: 3px;

}


.chart-container .chart-segment
{
 /*  display: grid;
   grid-template-columns: 1fr 200px;*/
   display: flex;
   padding: 5px 0;
   column-gap: 10px;
   cursor: pointer;
}

.chart-container .chart-segment .chart-segment-graf
{
   background: #DCE8ED;
   padding: 10px 0;
   display: flex;
    transition:background-color 0.6s ease;
    border-radius: 2px;

}

.chart-container .chart-segment:hover .chart-segment-graf
{
   background: #002044;
   color:#fff;
}

.chart-container .chart-segment.chart-segment-highlight .chart-segment-graf {
    background: #002044;
    color: #fff;
}

.chart-container .chart-segment .desc {
    padding: 10px 0;
    color: #00204499;
}

.chart-container .chart-segment:hover .desc
{
     color: #002044;
}

.chart-container .chart-segment.chart-segment-highlight .desc {
    color: #002044;
}

.chart-container .chart-segment span.proc {
    justify-content: right;
    display: flex;
    padding-right: 10px;
}
.chart-container .chart-segment span.label {
    justify-content: left;
    display: flex;
   padding-left: 10px;
   text-transform: uppercase;
   width: 174px;
}

.chart-container .chart-segment div.labeltxt-mobile,
.chart-container .chart-segment div.desctxt-mobile
{
    display: none;
    font-size: 14px;
}

body[data-elementor-device-mode="mobile"] .chart-container .chart-segment
{
    display: block;
}

body[data-elementor-device-mode="mobile"] .chart-container .chart-segment span.label span.label-txt 
{
    display: none;
}

body[data-elementor-device-mode="mobile"] .chart-container .chart-segment span.label
{
     width: 10px;
}

body[data-elementor-device-mode="mobile"] .chart-container .chart-segment .desc
{
     display: none;
}

body[data-elementor-device-mode="mobile"] .chart-container .chart-segment span.proc
{
    width: auto;
}


body[data-elementor-device-mode="mobile"] .chart-container .chart-segment div.labeltxt-mobile
{
    display: block;
    font-weight: 600;
    text-transform: uppercase;
    padding-top: 24px;
}

body[data-elementor-device-mode="mobile"] .chart-container .chart-segment div.desctxt-mobile
{
    display: block;
    font-weight: 500;
    color: #00204499;

}
body[data-elementor-device-mode="mobile"] .chart-container .chart-segment:hover div.desctxt-mobile
{
    color: #002044;
}