.c-dpe__index {
    --dpe-index-width: 3.6rem;
    --dpe-index-height: var(--dpe-index-width);
    --dpe-label-arrow-width: .3rem;
    --dpe-label-arrow-height: .4rem
}

.c-dpe__index:last-child {
    --dpe-index-margin-right: 0
}

.c-dpe__index--active {
    --dpe-index-width: 4.2rem;
    --dpe-index-height: 5.2rem;
    --dpe-index-font-weight: 500;
    --dpe-index-font-size: 2rem;
    --dpe-index-border-radius: 1.2rem
}

.c-dpe__index--1 {
    --dpe-index-background-color: var(--dpe-index-1-background-color,#029163)
}

.c-dpe__index--2 {
    --dpe-index-background-color: var(--dpe-index-2-background-color,#46a64a)
}

.c-dpe__index--3 {
    --dpe-index-background-color: var(--dpe-index-3-background-color,#6db56b)
}

.c-dpe__index--4 {
    --dpe-index-background-color: var(--dpe-index-4-background-color,#f2e314)
}

.c-dpe__index--5 {
    --dpe-index-background-color: var(--dpe-index-5-background-color,#edab0f)
}

.c-dpe__index--6 {
    --dpe-index-background-color: var(--dpe-index-6-background-color,#e8782f)
}

.c-dpe__index--7 {
    --dpe-index-background-color: var(--dpe-index-7-background-color,#d1201e)
}

.c-dpe--ges {
    --dpe-index-1-background-color: #99d5f7;
    --dpe-index-2-background-color: #80abcd;
    --dpe-index-3-background-color: #6d87a8;
    --dpe-index-4-background-color: #546384;
    --dpe-index-5-background-color: #434665;
    --dpe-index-6-background-color: #332d47;
    --dpe-index-7-background-color: #231a2f
}

.c-dpe--inactive {
    --dpe-index-color: #9e958f;
    --dpe-index-custom-background-color: #fff;
    --dpe-index-border-width: var(--border-width)
}

.c-dpe {
    list-style: none;
    padding-bottom: 4.8rem;
    padding-left: 0
}

.c-dpe,.c-dpe__index {
    align-items: center;
    display: flex
}

.c-dpe__index {
    background-color: var(--dpe-index-custom-background-color,var(--dpe-index-background-color));
    border: var(--dpe-index-border-width,0) solid var(--border-color);
    border-radius: 10%;
    color: #fff;
    font-size: 1rem;
    font-weight: 400;
    height: 36px;
    justify-content: center;
    margin-right: var(--dpe-index-margin-right,.2rem);
    position: relative;
    width: 34px;
}
.c-dpe__index--active {
    width: 2.5rem;
    height: 3.2rem;
    font-weight: 700;
    font-size: 1.5rem;
    border-radius: 10%;
}

.c-dpe__label {
    color: #000;
    font-size: 1.2rem;
    left: 50%;
    line-height: 1;
    position: absolute;
    top: calc(100% + var(--dpe-label-arrow-height) + .9rem);
    transform: translateX(-50%);
    z-index: 10
}

.c-dpe__label:before {
    border-bottom: var(--dpe-label-arrow-height) solid;
    border-left: var(--dpe-label-arrow-width) solid transparent;
    border-right: var(--dpe-label-arrow-width) solid transparent;
    bottom: calc(100% + .4rem);
    content: "";
    left: calc(50% - var(--dpe-label-arrow-width));
    position: absolute
}

.c-dpe__unit {
    font-size: .92rem;
    font-weight: 400;
    left: 0;
    position: absolute;
    top: 100%
}

.c-energy {
    --energy-width: 32.4rem;
    --energy-before-ratio: 89.9676%;
    --energy-index-right: 80%;
    --energy-index-width: 20%
}

.c-energy--1 {
    --energy-before-ratio: 92.6667%;
    --energy-index-bottom: 81%
}

.c-energy--2 {
    --energy-index-bottom: 72%
}

.c-energy--3 {
    --energy-index-bottom: 60%
}

.c-energy--4 {
    --energy-index-bottom: 48%
}

.c-energy--5 {
    --energy-index-bottom: 36%
}

.c-energy--6 {
    --energy-width: 38rem;
    --energy-before-ratio: 76.584%;
    --energy-index-right: 68%;
    --energy-index-bottom: 24%;
    --energy-index-width: 17%
}

.c-energy--7 {
    --energy-width: 37.2rem;
    --energy-before-ratio: 78.3098%;
    --energy-index-right: 68%;
    --energy-index-bottom: 12%;
    --energy-index-width: 17%
}

.c-energy__index--secondary {
    --energy-index-custom-right: calc(var(--energy-index-right) - var(--energy-index-width) + 0.5%)
}

.c-energy--ges {
    --energy-width: 28.9rem;
    --energy-before-ratio: 110.8614%;
    --energy-index-right: 15.5%;
    --energy-index-width: 16%
}

.c-energy--ges.c-energy--1 {
    --energy-index-bottom: 73.5%
}

.c-energy--ges.c-energy--2 {
    --energy-index-bottom: 63.5%
}

.c-energy--ges.c-energy--3 {
    --energy-index-bottom: 52.5%
}

.c-energy--ges.c-energy--4 {
    --energy-index-bottom: 42%
}

.c-energy--ges.c-energy--5 {
    --energy-index-bottom: 31%
}

.c-energy--ges.c-energy--6 {
    --energy-index-bottom: 20%
}

.c-energy--ges.c-energy--7 {
    --energy-index-bottom: 9.5%
}

.c-energy--old {
    --energy-width: 37.4rem;
    --energy-before-ratio: 100%;
    --energy-index-right: 3%;
    --energy-index-width: 20%;
    --energy-index-color: #fff
}

.c-energy--old.c-energy--1 {
    --energy-index-bottom: 71%
}

.c-energy--old.c-energy--2 {
    --energy-index-bottom: 61.5%
}

.c-energy--old.c-energy--3 {
    --energy-index-bottom: 52%
}

.c-energy--old.c-energy--4 {
    --energy-index-bottom: 42.5%
}

.c-energy--old.c-energy--5 {
    --energy-index-bottom: 32.5%
}

.c-energy--old.c-energy--6 {
    --energy-index-bottom: 23%
}

.c-energy--old.c-energy--7 {
    --energy-index-bottom: 13.5%
}

.c-energy {
    max-width: 100%;
    position: relative;
    width: var(--energy-width)
}

.c-energy:before {
    content: "";
    display: block;
    padding-top: var(--energy-before-ratio)
}

.c-energy__img {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.c-energy__index {
    bottom: var(--energy-index-bottom);
    color: var(--energy-index-color,currentColor);
    font-size: 1.6rem;
    position: absolute;
    right: var(--energy-index-custom-right,var(--energy-index-right));
    text-align: center;
    width: var(--energy-index-width);
    z-index: 10
}