.section-flextarifdiagram {
    opacity: 0;
    transform: translateY(40px);
    transition: all .5s cubic-bezier(0,0,.25,1);
}

.section-flextarifdiagram.isVis {
    opacity: 1;
    transform: translateY(0);
}

.barchart {
    position: relative;
}

.barchart.off {
    opacity: 0;
    pointer-events: none;
    height: 0;
}

.barchart .barchart-frame {
    display: flex;
    position: relative;
    align-items: stretch;
    text-align: center;
    padding-top: 70px;
    overflow-y: hidden;
}

.barchart .barchart-frame .values {
    display: flex;
    align-items: stretch;
    text-align: center;
    flex: 0 0 calc(100% - 2rem);
    padding-top: 70px;
}

.yaxis {
    width: 2rem;
    flex: 0 0 2rem;
    position: relative;
    color: #000;
    display: flex;
    margin-bottom: 2rem;
    margin-top: 0;
    flex-direction: column;
    justify-content: space-between;
    background: #fff;
}

.yaxis:after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    border-right: 3px solid #000;
    height: calc(100% - 11px);
    width: 0px;
}

.yaxis div {
    font-size: .666rem;
    position: relative;
    padding-right: 20px;
    transform: translateY(-50%);
    font-family: "Roboto 700";
}

.yaxis div:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: calc(100% - 12px);
    border-top: 1px solid #000000;
    height: 0;
    width: 12px;
}

.yaxis div:last-child:after {
    border-top: 3px solid #000000;
}


@media (max-width:767px) {
    .yaxis {
        height: 274px;
    }
    .yaxis:after {
        height:calc(100% - 4px);
    }
}
@media (max-width:1199px) {
    .yaxis {
        height: 276px;
    }
    .yaxis:after {
        height:calc(100% - 4px);
    }
}

.bar {
    flex: 1 1 1px;
    min-width: 54px;
    background: linear-gradient(0deg, #4D9DD740, #4D9DD700);
}

.bar .bar-outer {
    position: relative;
    height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.bar .bar-outer .bar-inner {
    position: relative;
    z-index: 1;
    top: 0;
    transform: translateY(100%);
    transition: transform .8s cubic-bezier(0,0,.25,1);
    border-top: 1px solid #ec7d0f;
    border-right: 1px solid #ec7d0f;
    text-align: center;
    background-position: bottom;
    width: calc(100% + 1px);
    background-repeat: repeat-x;
    background-color: #fce5ce;
    background-image: url("data:image/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAADpCAYAAAAH3kYfAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAJMSURBVFhH7VdZTsVADGt7/8txCS7BUuIlma1CAokvJk+tx0kcd0ec768v9/EQ1/H5djxtlxuW2IUldmGJXVhiF5bYhSV2YYldWGIXltiFJXZhiX9eyP8Bbq+wv47zPK7YhNFnHtvJjhmvO/YkE0rxULxiI0EwaSyPYKMH9iQT8nB/6XG0JFAe8WMJSvPw8LVCJyV5rZh78GAn0+rEGCliXx4dUiFmpbnuoEn2YIE7E52anhu4joqJFj/xCORUeyiaEiHFXJw9euSZD8nySNJ7BB+Oqi+WR1765OWhaZFMjzopjAlMzqck5b0yPJhSJxeC5mFMXh4UEMXLY0YpuJYkb9rwRsVqVNyRHZTBv/HwzFKUBwg61UoFuD06hXlTTEiPIWn+Jx4TShE/RF+UB7NOGvV+kIwXkgXJ4y5TKj565LjRw0rz8hiRBSuANAG3ee9BZIEzo5PIKrm+JehMZM0Ks7r0CHokSQW4PbAecfUwygMt6DSCywOEIAQfjqrHeqNmfPCILTA8Yo8ia0IrhnMMFNf97MblvPLIkyOPqPNALpNAv1GSK2cFO5uzLz1GsSN0xMia20PDlASGoh6ECctjRj6JXE7Ibwlmp4dor/BsIIq/9ABhJ9C83o/ycLHeqB6hDEXeBhclHD1yDFAeIFGopkB59ApjOyqiPgLg5YFg0twe1HQe+bcWZMIorElgHRUYzxwIBTtUbYpYlMeM5ZGK5E0RrL/0fBJ7j+Tfe5iVB4IKJHsP8MEjk+Dn/fmhCVNoFAKdXiJcmDyO8/gCJMgkMfLww/4AAAAASUVORK5CYII=")
}

.bar .bar-outer .bar-inner .leftline {
    display: block;
    position: absolute;
    top: 0;
    left: 0%;
    border-left: 1px solid #ec7d0f;
    transform: scale(0.01);
    transition: transform .8s cubic-bezier(0,0,.25,1);
    transform-origin: top;
    height: 0;
    width: 0px;
}

.bar .bar-time {
    height: 3rem;
    font-family: "Roboto 700";
    border-top: 3px solid #000;
    color: #000;
    background: #fff;
    position: relative;
    z-index: 2;
    font-size: .666rem;
    line-height: 2rem;
    text-align: center;
}

.bar .bar-time:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    border-right: 1px solid #000000;
    height: 10px;
    width: 0;
}

.bar .bar-time:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 100%;
    right: 0;
    border-right: 1px solid #ec7d0f23;
    height: 230px;
    width: 0;
}

.bar-label {
    text-align: center;
    position: absolute;
    font-size: 10px;
    color: #fff;
    background: #ec7d0f;
    border-radius: 5px;
    margin: 5px 0;
    left: 50%;
    transform: translateY(calc(-100% - 20px)) translateX(-50%);
    width: calc(100% - 10px);
    padding: 5px;
    max-width: 54px;
}

.bar-label:before {
    position: absolute;
    bottom: -3px;
    left: calc(50% - 7px);
    z-index: -2;
    content: '';
    width: 15px;
    height: 15px;
    background: #ec7d0f;
    transform: rotateZ(45deg);
}

.bar-label span {
    display: block;
    font-size: 18px;
    font-family: "Roboto 400";
}

.bar-label.toohigh,
.bar-label.toohigh:before {transition: all .5s ease-out .5s}
.isVis .barchart:not(.off) .bar-label.toohigh {
    transform: translateY(10px) translateX(-50%);
    width: calc(100% - 10px);
}
.isVis .barchart:not(.off) .bar-label.toohigh:before {
    position: absolute;
    bottom: calc(100% - 13px);
    left: calc(50% - 7px);
    z-index: -2;
    content: '';
    width: 15px;
    height: 15px;
    transform: rotateZ(45deg);
}

.show-savings .bar-label.toohigh {
    background: #858585!important;
}

.show-savings .bar-label.toohigh:before {
    background: #858585!important;
}

.bar:nth-child(2) .bar-outer .bar-inner, .bar:nth-child(2) .bar-outer .bar-inner .leftline {
    transition-delay: calc(1s * 2 / 25);
}

.bar:nth-child(3) .bar-outer .bar-inner, .bar:nth-child(3) .bar-outer .bar-inner .leftline {
    transition-delay: calc(1s * 3 / 25);
}

.bar:nth-child(4) .bar-outer .bar-inner, .bar:nth-child(4) .bar-outer .bar-inner .leftline {
    transition-delay: calc(1s * 4 / 25);
}

.bar:nth-child(5) .bar-outer .bar-inner, .bar:nth-child(5) .bar-outer .bar-inner .leftline {
    transition-delay: calc(1s * 5 / 25);
}

.bar:nth-child(6) .bar-outer .bar-inner, .bar:nth-child(6) .bar-outer .bar-inner .leftline {
    transition-delay: calc(1s * 6 / 25);
}

.bar:nth-child(7) .bar-outer .bar-inner, .bar:nth-child(7) .bar-outer .bar-inner .leftline {
    transition-delay: calc(1s * 7 / 25);
}

.bar:nth-child(8) .bar-outer .bar-inner, .bar:nth-child(8) .bar-outer .bar-inner .leftline {
    transition-delay: calc(1s * 8 / 25);
}

.bar:nth-child(9) .bar-outer .bar-inner, .bar:nth-child(9) .bar-outer .bar-inner .leftline {
    transition-delay: calc(1s * 9 / 25);
}

.bar:nth-child(10) .bar-outer .bar-inner, .bar:nth-child(10) .bar-outer .bar-inner .leftline {
    transition-delay: calc(1s * 10 / 25);
}

.bar:nth-child(11) .bar-outer .bar-inner, .bar:nth-child(11) .bar-outer .bar-inner .leftline {
    transition-delay: calc(1s * 11 / 25);
}

.bar:nth-child(12) .bar-outer .bar-inner, .bar:nth-child(12) .bar-outer .bar-inner .leftline {
    transition-delay: calc(1s * 12 / 25);
}

.bar:nth-child(13) .bar-outer .bar-inner, .bar:nth-child(13) .bar-outer .bar-inner .leftline {
    transition-delay: calc(1s * 13 / 25);
}

.bar:nth-child(14) .bar-outer .bar-inner, .bar:nth-child(14) .bar-outer .bar-inner .leftline {
    transition-delay: calc(1s * 14 / 25);
}

.bar:nth-child(15) .bar-outer .bar-inner, .bar:nth-child(15) .bar-outer .bar-inner .leftline {
    transition-delay: calc(1s * 15 / 25);
}

.bar:nth-child(16) .bar-outer .bar-inner, .bar:nth-child(16) .bar-outer .bar-inner .leftline {
    transition-delay: calc(1s * 16 / 25);
}

.bar:nth-child(17) .bar-outer .bar-inner, .bar:nth-child(17) .bar-outer .bar-inner .leftline {
    transition-delay: calc(1s * 17 / 25);
}

.bar:nth-child(18) .bar-outer .bar-inner, .bar:nth-child(18) .bar-outer .bar-inner .leftline {
    transition-delay: calc(1s * 18 / 25);
}

.bar:nth-child(19) .bar-outer .bar-inner, .bar:nth-child(19) .bar-outer .bar-inner .leftline {
    transition-delay: calc(1s * 19 / 25);
}

.bar:nth-child(20) .bar-outer .bar-inner, .bar:nth-child(20) .bar-outer .bar-inner .leftline {
    transition-delay: calc(1s * 20 / 25);
}

.bar:nth-child(21) .bar-outer .bar-inner, .bar:nth-child(21) .bar-outer .bar-inner .leftline {
    transition-delay: calc(1s * 21 / 25);
}

.bar:nth-child(22) .bar-outer .bar-inner, .bar:nth-child(22) .bar-outer .bar-inner .leftline {
    transition-delay: calc(1s * 22 / 25);
}

.bar:nth-child(23) .bar-outer .bar-inner, .bar:nth-child(23) .bar-outer .bar-inner .leftline {
    transition-delay: calc(1s * 23 / 25);
}

.bar:nth-child(24) .bar-outer .bar-inner, .bar:nth-child(24) .bar-outer .bar-inner .leftline {
    transition-delay: calc(1s * 24 / 25);
}

.bar:nth-child(25) .bar-outer .bar-inner, .bar:nth-child(25) .bar-outer .bar-inner .leftline {
    transition-delay: calc(1s * 25 / 25);
}

.bar:nth-child(26) .bar-outer .bar-inner, .bar:nth-child(26) .bar-outer .bar-inner .leftline {
    transition-delay: calc(1s * 26 / 25);
}

.barchart.off .bar .bar-outer .bar-inner {
    transform: translateY(100%);
    transition: transform .8s cubic-bezier(0,0,.25,1);
}

.barchart.off .bar .bar-outer .bar-inner span {
    opacity: 0;
}

.isVis .barchart:not(.off) .bar .bar-outer .bar-inner {
    transform: translateY(0%);
}

.isVis .barchart:not(.off) .bar .bar-outer .bar-inner span {
    opacity: 1;
}

.isVis .barchart:not(.off) .bar .bar-outer .bar-inner .leftline {
    transform: scale(1);
}

.regular {
    position: absolute;
    background: transparent;
    width: calc(100% - 2rem);
    margin-left: 2rem;
    inset: 70px 0 0 0;
    pointer-events: none;
    z-index: 0;
    transition: none;
}

.regular>div {
    padding-bottom: 0;
    display: inline-block;
    font-size: 10px;
}

.regular.bar .bar-outer .bar-inner {
    background: transparent;
    border-top: 1px dashed #4D9DD7;
    transition: none!important;
    border-right: none!important;
}

.regular .bar-label {
    font-size: 14px;
    color: #4D9DD7;
    background: transparent;
    text-align: left;
    border-radius: 0;
    margin: 0;
    left: 20px;
    transform: translateY(calc(-100%));
    width: 100%;
    max-width: none;
    padding: 0;
}

.regular .bar-label:before {
    display: none;
}

.regular .bar-time:after {
    display: none;
}

.regular .bar-time:before {
    display: none;
}

.regular .bar-label span {
    display: inline;
    font-size: 14px;
}

.chart-functions {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    padding: 2rem 0;
}

.chart-functions .legend-average {
    font-size: 1.333rem;
}

.chart-functions .legend-average span {
    border-bottom: 3px solid #4D9DD7;
    margin: 0 5px;
}

.chart-functions .legend-average small {
    font-size: .833rem
}

.chart-functions .chart-switches {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row-reverse;
    font-size: .666rem;
    padding-right: 0;
    gap: 20px;
}

.chart-functions .chart-switches input {
    appearance: none;
    width: 80px;
    height: 40px;
    background: #E5E5E5;
    border-radius: 20px;
    transition: all .5s cubic-bezier(0,0,.25,1);
    cursor: pointer;
}

.chart-functions .chart-switches input:checked {
    background: #4D9DD7;
}

.chart-functions .chart-switches #time, .chart-functions .chart-switches #savings {
    display: flex;
    justify-content: space-between;
    font-family: "Roboto 700";
    align-items: center;
    gap: 20px;
}

.chart-functions .chart-switches .custom-check {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 80px;
    cursor: pointer;
}

.chart-functions .chart-switches .custom-check:has(>input):after {
    background: #A0A0A0;
    content: '';
    width: 30px;
    height: 30px;
    border-radius: 15px;
    position: absolute;
    right: 45px;
    top: 5px;
    transition: all .5s cubic-bezier(0,0,.25,1);
    pointer-events: none;
}

.chart-functions .chart-switches .custom-check:has(>input:checked):after {
    background: #fff;
    right: 5px;
}

.legal p {
    font-size: .666rem;
    text-align: center;
    font-family: "Roboto 400";
}

span.saving {
    display: none;
}

.show-savings span.saving {
    display: block;
}

.show-savings span.price {
    display: none;
}

.show-savings {
}

.show-savings .bar:not(.regular) .bar-label {
    background: #4D9DD7;
}

.show-savings .bar:not(.regular) .bar-label:before {
    background: #4D9DD7;
}

.green .bar:not(.regular) .bar-outer .bar-inner {
    border-top: 1px solid #057B16;
    background-color: #dbecdd;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAEPCAYAAABLBESbAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAFiUAABYlAUlSJPAAAAOeSURBVHhe7VrLctswDLT0/3+YaW+95QuSOCkWCz4gk5Sh+tQBPJPlYukVDFK03On29v7r5/YPsRtejjRIA0QapAEiDdIAkQZpgEiDNECkQRog0iANEGmQBog0SANEGqQBIg3SAJEGaYBIgzRApEEaINIgDRBpkAaINEgDRBqkASIN0gCRBmmASIP/wmD7/f7n57bJCP/d9QJub++/ZQhWoqgl1lw+AgpAUqSNYoTvIPBTlEGUaxPhpEm9Qozv8rcmYdlP4iXX+g4rppjU94DoezFpre+Yg2iTJkh4yNceKNq0yo840KUCIVpW16jCrcyVrj2QLAyrGOG2CqW7ogY5e6DlSVJelUt9jk902YmMJjJ4hY5PdL8KF7CtwkXkTjSi9TnuJ490rQBjnazAhpGz2yt9Z3cZ2l3lNrlyxkjX84CEEeUvWgUjUp2f9ARv50ERlXeTT/S6CsTS9SPO9e5MlCSvFeJyN0qmlKVqjLedKKEY5H4VLmA9D1gWI8JtJ6KrmqMY4FIBrJAEUIxwnomaIxZ+xJleV8Ed4QOc6a9aBcYVnJ/KT/LuPNAPBRri/kzUXIzv2l2UU8Qgf9EqcAxfYoCzAi2LEeWyE3FjkFKM8boKV7GeB7W7QS4GrRz9cEHuV8EGEc57AeVgMMITvd0Lmhzgie52ouQoBrhWINT+EiPcVkG9B4hY660HkuzLI1e61KUHOmZSUed4vtDdU1pFlDfKD/RXnQckJRr3k0v0un434saokx2XRjn+qPM50QzhHOXtROqSEe5XoZTZ8xP9cRX6SSM86HYvMGZvKjHS27OykPIz5ogrve4DTXbO7PbhzQOdz4mWRGMc14HBRGcFli2TKj/iQG89KGjOD/mCB93dCwYhbjuRDRGgCC4THJ/o+t0o2Tqpcr1Cxyd6/ReMq+hX4QI+rkIQbRV0fAm786CgKI6vdbcKxCIe82O9ngcqKuBG8dwGBl6XM1HGpTEm9o060/0qiOr4EQf65F444ly3HmCbKvjJlc91rkIpC9kgb6eyvFQK8toDJxYuL8cHevvVhsm2OSrXwVq3byb4Ak0McOlBIdewnQe1rBjfPr4+ZMjAgFMYz3CtoNSjn5EDg3NuqyBeiiYGePd8cNiuT/Lt8/4pqT5s1jS83lahojg7vta3r/vX6nKn4c4DfshHXOnb/fuOnjK0MbxRNJ7g8tsZnwmEV4pyrQD8arge1O4G+Pb9843npRbQnua3219giCTdf2QiWwAAAABJRU5ErkJggg==');
}

.green:not(.show-savings) .bar:not(.regular) .bar-outer .bar-inner:after {
    border-left: 1px solid #057B16;
}

.green .bar:not(.regular) .bar-time:after {
    border-right: 1px solid #057B1623;
}

.green:not(.show-savings) .bar:not(.regular) .bar-label {
    background: #057B16;
}

.green:not(.show-savings) .bar:not(.regular) .bar-label:before {
    background: #057B16;
}

.green .bar .bar-outer .bar-inner {
    border-right: 1px solid #057B16;
}

.green .bar .bar-outer .bar-inner .leftline {
    border-left: 1px solid #057B16;
}

.legal.green a {
    color: #057B16;
}

.hide-regular .regular, .hide-labels .bar-label, .hide-average .legend-average, .hide-average .legal, .hide-switch-savings .chart-switches #savings, .hide-switch-24 .chart-switches #time {
    display: none;
}
#averageValueDay,
#averageValueYear {
    font-family: "Roboto 700";
}

@media (max-width: 767px) {
    .chart-functions {
        flex-wrap: wrap;
        gap: 30px;
    }

    .chart-functions .legend-average {
        flex: 0 0 100%;
        order: -1;
    }

    .chart-functions .chart-switches {
        flex: 0 0 100%;
        gap: 30px;
    }

    .chart-functions .chart-switches {
        font-size: 1rem;
        align-items: left;
        gap: 10px;
    }

    .chart-switches #savings, .chart-switches #time {
        flex-direction: column;
    }
}