:root {
    --progress-bar-bg: #ffffff;
    --progress-bar-fg: var(--clr-black1);
    --progress-bar-fg2: var(--clr-black1);

}

/* Super efficient and easy to use ARC & line progress bars, that utilize a data-progress HTML attribute */
div[data-anim~="base"] {
    will-change: transform;
}
.arc-wrapper {
    width: 30px;
    height: 30px;
    position: absolute;
    /*clip: rect(0px, 30px, 30px, 15px);*/
    clip-path: polygon(50% 0%, 100% 0, 100% 100%, 50% 100%);
}
.arc-wrapper.parent-size {
    width: auto;
    height: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
.arc-wrapper.inverted {
    transform: scaleX(-1);
}
.arc {
    position: absolute;
    width: 0px;
    height: 0px;
    border: 15px solid #f7931e;
    border-radius: 100%;
    /*clip: rect(0px, 15px, 30px, 0px);*/
    /*transform-origin: 15px 15px;*/
    clip-path: polygon(0% 0%, 50% 0, 50% 100%, 0% 100%);
    transform-origin: 50% 50%;
    /*transition: transform 0.1s;*/
}
.arc[data-anim~=right] {
    border-color: #f7931e;
}
.arc.brown-overlay {
    border-color: rgba(117, 68, 45, 1);
}
.arc.secondary {
    border-color: white;
}
.arc.teal-orange {
    border-color: var(--clr-orange)
}

.arc.teal-orange.secondary {
    border-color: var(--clr-teal)
}
/*.arc-wrapper.size-50 {
    width: 50px;
    height: 50px;
    clip: rect(0px, 50px, 50px, 25px);
}
.arc-wrapper.size-50 .arc {
    border-width: 25px;
    clip: rect(0px, 25px, 50px, 0px);
    transform-origin: 25px 25px;
}*/
.arc-wrapper[data-progress^="0.5"],
.arc-wrapper[data-progress^="0.6"],
.arc-wrapper[data-progress^="0.7"],
.arc-wrapper[data-progress^="0.8"],
.arc-wrapper[data-progress^="0.9"],
.arc-wrapper[data-progress^="1"]{
    /*clip: rect(auto, auto, auto, auto);*/
    clip-path: none;
}

.arc-wrapper.secondary-arc-group { /* never clip secondary arc group! */
    clip-path: none;
}
.arc-wrapper[data-progress^="0.5"] .arc:not(.secondary),
.arc-wrapper[data-progress^="0.6"] .arc:not(.secondary),
.arc-wrapper[data-progress^="0.7"] .arc:not(.secondary),
.arc-wrapper[data-progress^="0.8"] .arc:not(.secondary),
.arc-wrapper[data-progress^="0.9"] .arc:not(.secondary),
.arc-wrapper[data-progress^="1"] .arc:not(.secondary) {
    z-index: 1;
}

.arc-wrapper[data-progress="0"] .arc[data-anim~=right],
.arc-wrapper[data-progress^="0.0"] .arc[data-anim~=right]{
    transform: rotate(0deg);
}
.arc-wrapper[data-progress^="0.01"] .arc[data-anim~=right] {
    transform: rotate(3deg);
}
.arc-wrapper[data-progress^="0.02"] .arc[data-anim~=right] {
    transform: rotate(7deg);
}
.arc-wrapper[data-progress^="0.03"] .arc[data-anim~=right] {
    transform: rotate(10deg);
}
.arc-wrapper[data-progress^="0.04"] .arc[data-anim~=right] {
    transform: rotate(14deg);
}
.arc-wrapper[data-progress^="0.05"] .arc[data-anim~=right] {
    transform: rotate(18deg);
}
.arc-wrapper[data-progress^="0.06"] .arc[data-anim~=right] {
    transform: rotate(21deg);
}
.arc-wrapper[data-progress^="0.07"] .arc[data-anim~=right] {
    transform: rotate(25deg);
}
.arc-wrapper[data-progress^="0.08"] .arc[data-anim~=right] {
    transform: rotate(28deg);
}
.arc-wrapper[data-progress^="0.09"] .arc[data-anim~=right] {
    transform: rotate(32deg);
}
.arc-wrapper[data-progress^="0.1"] .arc[data-anim~=right] {
    transform: rotate(36deg);
}
.arc-wrapper[data-progress^="0.11"] .arc[data-anim~=right] {
    transform: rotate(39deg);
}
.arc-wrapper[data-progress^="0.12"] .arc[data-anim~=right] {
    transform: rotate(43deg);
}
.arc-wrapper[data-progress^="0.13"] .arc[data-anim~=right] {
    transform: rotate(46deg);
}
.arc-wrapper[data-progress^="0.14"] .arc[data-anim~=right] {
    transform: rotate(50deg);
}
.arc-wrapper[data-progress^="0.15"] .arc[data-anim~=right] {
    transform: rotate(54deg);
}
.arc-wrapper[data-progress^="0.16"] .arc[data-anim~=right] {
    transform: rotate(57deg);
}
.arc-wrapper[data-progress^="0.17"] .arc[data-anim~=right] {
    transform: rotate(61deg);
}
.arc-wrapper[data-progress^="0.18"] .arc[data-anim~=right] {
    transform: rotate(54deg);
}
.arc-wrapper[data-progress^="0.19"] .arc[data-anim~=right] {
    transform: rotate(68deg);
}
.arc-wrapper[data-progress^="0.2"] .arc[data-anim~=right] {
    transform: rotate(72deg);
}
.arc-wrapper[data-progress^="0.21"] .arc[data-anim~=right] {
    transform: rotate(75deg);
}
.arc-wrapper[data-progress^="0.22"] .arc[data-anim~=right] {
    transform: rotate(79deg);
}
.arc-wrapper[data-progress^="0.23"] .arc[data-anim~=right] {
    transform: rotate(82deg);
}
.arc-wrapper[data-progress^="0.24"] .arc[data-anim~=right] {
    transform: rotate(86deg);
}
.arc-wrapper[data-progress^="0.25"] .arc[data-anim~=right] {
    transform: rotate(90deg);
}
.arc-wrapper[data-progress^="0.26"] .arc[data-anim~=right] {
    transform: rotate(93deg);
}
.arc-wrapper[data-progress^="0.27"] .arc[data-anim~=right] {
    transform: rotate(97deg);
}
.arc-wrapper[data-progress^="0.28"] .arc[data-anim~=right] {
    transform: rotate(100deg);
}
.arc-wrapper[data-progress^="0.29"] .arc[data-anim~=right] {
    transform: rotate(104deg);
}
.arc-wrapper[data-progress^="0.3"] .arc[data-anim~=right] {
    transform: rotate(108deg);
}
.arc-wrapper[data-progress^="0.31"] .arc[data-anim~=right] {
    transform: rotate(111deg);
}
.arc-wrapper[data-progress^="0.32"] .arc[data-anim~=right] {
    transform: rotate(115deg);
}
.arc-wrapper[data-progress^="0.33"] .arc[data-anim~=right] {
    transform: rotate(118deg);
}
.arc-wrapper[data-progress^="0.34"] .arc[data-anim~=right] {
    transform: rotate(122deg);
}
.arc-wrapper[data-progress^="0.35"] .arc[data-anim~=right] {
    transform: rotate(126deg);
}
.arc-wrapper[data-progress^="0.36"] .arc[data-anim~=right] {
    transform: rotate(129deg);
}
.arc-wrapper[data-progress^="0.37"] .arc[data-anim~=right] {
    transform: rotate(133deg);
}
.arc-wrapper[data-progress^="0.38"] .arc[data-anim~=right] {
    transform: rotate(136deg);
}
.arc-wrapper[data-progress^="0.39"] .arc[data-anim~=right] {
    transform: rotate(140deg);
}
.arc-wrapper[data-progress^="0.4"] .arc[data-anim~=right] {
    transform: rotate(144deg);
}
.arc-wrapper[data-progress^="0.41"] .arc[data-anim~=right] {
    transform: rotate(147deg);
}
.arc-wrapper[data-progress^="0.42"] .arc[data-anim~=right] {
    transform: rotate(151deg);
}
.arc-wrapper[data-progress^="0.43"] .arc[data-anim~=right] {
    transform: rotate(154deg);
}
.arc-wrapper[data-progress^="0.44"] .arc[data-anim~=right] {
    transform: rotate(158deg);
}
.arc-wrapper[data-progress^="0.45"] .arc[data-anim~=right] {
    transform: rotate(162deg);
}
.arc-wrapper[data-progress^="0.46"] .arc[data-anim~=right] {
    transform: rotate(165deg);
}
.arc-wrapper[data-progress^="0.47"] .arc[data-anim~=right] {
    transform: rotate(169deg);
}
.arc-wrapper[data-progress^="0.48"] .arc[data-anim~=right] {
    transform: rotate(173deg);
}
.arc-wrapper[data-progress^="0.49"] .arc[data-anim~=right] {
    transform: rotate(177deg);
}
.arc-wrapper[data-progress^="0.5"] .arc[data-anim~=right],
.arc-wrapper[data-progress^="0.6"] .arc[data-anim~=right],
.arc-wrapper[data-progress^="0.7"] .arc[data-anim~=right],
.arc-wrapper[data-progress^="0.8"] .arc[data-anim~=right],
.arc-wrapper[data-progress^="0.9"] .arc[data-anim~=right],
.arc-wrapper[data-progress^="1"] .arc[data-anim~=right] {
    transform: rotate(180deg);
}

.arc-wrapper[data-progress^="0.45"] .arc[data-anim~=left] {
    transform: rotate(162deg);
}
.arc-wrapper[data-progress^="0.46"] .arc[data-anim~=left] {
    transform: rotate(165deg);
}
.arc-wrapper[data-progress^="0.47"] .arc[data-anim~=left] {
    transform: rotate(169deg);
}
.arc-wrapper[data-progress^="0.48"] .arc[data-anim~=left] {
    transform: rotate(173deg);
}
.arc-wrapper[data-progress^="0.49"] .arc[data-anim~=left] {
    transform: rotate(177deg);
}
.arc-wrapper[data-progress^="0.5"] .arc[data-anim~=left] {
    transform: rotate(180deg);
}
.arc-wrapper[data-progress^="0.51"] .arc[data-anim~=left] {
    transform: rotate(183deg);
}
.arc-wrapper[data-progress^="0.52"] .arc[data-anim~=left] {
    transform: rotate(187deg);
}
.arc-wrapper[data-progress^="0.53"] .arc[data-anim~=left] {
    transform: rotate(190deg);
}
.arc-wrapper[data-progress^="0.54"] .arc[data-anim~=left] {
    transform: rotate(194deg);
}
.arc-wrapper[data-progress^="0.55"] .arc[data-anim~=left] {
    transform: rotate(198deg);
}
.arc-wrapper[data-progress^="0.56"] .arc[data-anim~=left] {
    transform: rotate(201deg);
}
.arc-wrapper[data-progress^="0.57"] .arc[data-anim~=left] {
    transform: rotate(205deg);
}
.arc-wrapper[data-progress^="0.58"] .arc[data-anim~=left] {
    transform: rotate(208deg);
}
.arc-wrapper[data-progress^="0.59"] .arc[data-anim~=left] {
    transform: rotate(212deg);
}
.arc-wrapper[data-progress^="0.6"] .arc[data-anim~=left] {
    transform: rotate(216deg);
}
.arc-wrapper[data-progress^="0.61"] .arc[data-anim~=left] {
    transform: rotate(219deg);
}
.arc-wrapper[data-progress^="0.62"] .arc[data-anim~=left] {
    transform: rotate(223deg);
}
.arc-wrapper[data-progress^="0.63"] .arc[data-anim~=left] {
    transform: rotate(226deg);
}
.arc-wrapper[data-progress^="0.64"] .arc[data-anim~=left] {
    transform: rotate(230deg);
}
.arc-wrapper[data-progress^="0.65"] .arc[data-anim~=left] {
    transform: rotate(234deg);
}
.arc-wrapper[data-progress^="0.66"] .arc[data-anim~=left] {
    transform: rotate(237deg);
}
.arc-wrapper[data-progress^="0.67"] .arc[data-anim~=left] {
    transform: rotate(241deg);
}
.arc-wrapper[data-progress^="0.68"] .arc[data-anim~=left] {
    transform: rotate(244deg);
}
.arc-wrapper[data-progress^="0.69"] .arc[data-anim~=left] {
    transform: rotate(248deg);
}
.arc-wrapper[data-progress^="0.7"] .arc[data-anim~=left] {
    transform: rotate(252deg);
}
.arc-wrapper[data-progress^="0.71"] .arc[data-anim~=left] {
    transform: rotate(255deg);
}
.arc-wrapper[data-progress^="0.72"] .arc[data-anim~=left] {
    transform: rotate(259deg);
}
.arc-wrapper[data-progress^="0.73"] .arc[data-anim~=left] {
    transform: rotate(262deg);
}
.arc-wrapper[data-progress^="0.74"] .arc[data-anim~=left] {
    transform: rotate(266deg);
}
.arc-wrapper[data-progress^="0.75"] .arc[data-anim~=left] {
    transform: rotate(270deg);
}
.arc-wrapper[data-progress^="0.76"] .arc[data-anim~=left] {
    transform: rotate(273deg);
}
.arc-wrapper[data-progress^="0.77"] .arc[data-anim~=left] {
    transform: rotate(277deg);
}
.arc-wrapper[data-progress^="0.78"] .arc[data-anim~=left] {
    transform: rotate(280deg);
}
.arc-wrapper[data-progress^="0.79"] .arc[data-anim~=left] {
    transform: rotate(284deg);
}
.arc-wrapper[data-progress^="0.8"] .arc[data-anim~=left] {
    transform: rotate(288deg);
}
.arc-wrapper[data-progress^="0.81"] .arc[data-anim~=left] {
    transform: rotate(291deg);
}
.arc-wrapper[data-progress^="0.82"] .arc[data-anim~=left] {
    transform: rotate(295deg);
}
.arc-wrapper[data-progress^="0.83"] .arc[data-anim~=left] {
    transform: rotate(298deg);
}
.arc-wrapper[data-progress^="0.84"] .arc[data-anim~=left] {
    transform: rotate(302deg);
}
.arc-wrapper[data-progress^="0.85"] .arc[data-anim~=left] {
    transform: rotate(306deg);
}
.arc-wrapper[data-progress^="0.86"] .arc[data-anim~=left] {
    transform: rotate(309deg);
}
.arc-wrapper[data-progress^="0.87"] .arc[data-anim~=left] {
    transform: rotate(313deg);
}
.arc-wrapper[data-progress^="0.88"] .arc[data-anim~=left] {
    transform: rotate(316deg);
}
.arc-wrapper[data-progress^="0.89"] .arc[data-anim~=left] {
    transform: rotate(320deg);
}
.arc-wrapper[data-progress^="0.9"] .arc[data-anim~=left] {
    transform: rotate(324deg);
}
.arc-wrapper[data-progress^="0.91"] .arc[data-anim~=left] {
    transform: rotate(327deg);
}
.arc-wrapper[data-progress^="0.92"] .arc[data-anim~=left] {
    transform: rotate(331deg);
}
.arc-wrapper[data-progress^="0.93"] .arc[data-anim~=left] {
    transform: rotate(334deg);
}
.arc-wrapper[data-progress^="0.94"] .arc[data-anim~=left] {
    transform: rotate(338deg);
}
.arc-wrapper[data-progress^="0.95"] .arc[data-anim~=left] {
    transform: rotate(342deg);
}
.arc-wrapper[data-progress^="0.96"] .arc[data-anim~=left] {
    transform: rotate(345deg);
}
.arc-wrapper[data-progress^="0.97"] .arc[data-anim~=left] {
    transform: rotate(349deg);
}
.arc-wrapper[data-progress^="0.98"] .arc[data-anim~=left] {
    transform: rotate(352deg);
}
.arc-wrapper[data-progress^="0.99"] .arc[data-anim~=left] {
    transform: rotate(356deg);
}
.arc-wrapper[data-progress^="1"] .arc[data-anim~=left] {
    transform: rotate(360deg);
}


/* secondary arc group CSS below */
.arc-wrapper[data-progress^="0"] .arc.secondary[data-anim~=right],
.arc-wrapper[data-progress^="0.0"] .arc.secondary[data-anim~=right],
.arc-wrapper[data-progress^="0.1"] .arc.secondary[data-anim~=right],
.arc-wrapper[data-progress^="0.2"] .arc.secondary[data-anim~=right],
.arc-wrapper[data-progress^="0.3"] .arc.secondary[data-anim~=right],
.arc-wrapper[data-progress^="0.4"] .arc.secondary[data-anim~=right] {
    transform: rotate(calc(0deg + var(--arc-offset)));
}
/*.arc-wrapper[data-progress="0"] .arc.secondary[data-anim~=right],*/
.arc-wrapper[data-progress^="0.5"] .arc.secondary[data-anim~=right]{
    transform: rotate(calc(0deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.51"] .arc.secondary[data-anim~=right] {
    transform: rotate(calc(-3deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.52"] .arc.secondary[data-anim~=right] {
    transform: rotate(calc(-7deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.53"] .arc.secondary[data-anim~=right] {
    transform: rotate(calc(-10deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.54"] .arc.secondary[data-anim~=right] {
    transform: rotate(calc(-14deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.55"] .arc.secondary[data-anim~=right] {
    transform: rotate(calc(-18deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.56"] .arc.secondary[data-anim~=right] {
    transform: rotate(calc(-21deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.57"] .arc.secondary[data-anim~=right] {
    transform: rotate(calc(-25deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.58"] .arc.secondary[data-anim~=right] {
    transform: rotate(calc(-28deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.59"] .arc.secondary[data-anim~=right] {
    transform: rotate(calc(-32deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.60"] .arc.secondary[data-anim~=right] {
    transform: rotate(calc(-36deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.61"] .arc.secondary[data-anim~=right] {
    transform: rotate(calc(-39deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.62"] .arc.secondary[data-anim~=right] {
    transform: rotate(calc(-43deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.63"] .arc.secondary[data-anim~=right] {
    transform: rotate(calc(-46deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.64"] .arc.secondary[data-anim~=right] {
    transform: rotate(calc(-50deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.65"] .arc.secondary[data-anim~=right] {
    transform: rotate(calc(-54deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.66"] .arc.secondary[data-anim~=right] {
    transform: rotate(calc(-57deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.67"] .arc.secondary[data-anim~=right] {
    transform: rotate(calc(-61deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.68"] .arc.secondary[data-anim~=right] {
    transform: rotate(calc(-54deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.69"] .arc.secondary[data-anim~=right] {
    transform: rotate(calc(-68deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.70"] .arc.secondary[data-anim~=right] {
    transform: rotate(calc(-72deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.71"] .arc.secondary[data-anim~=right] {
    transform: rotate(calc(-75deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.72"] .arc.secondary[data-anim~=right] {
    transform: rotate(calc(-79deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.73"] .arc.secondary[data-anim~=right] {
    transform: rotate(calc(-82deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.74"] .arc.secondary[data-anim~=right] {
    transform: rotate(calc(-86deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.75"] .arc.secondary[data-anim~=right] {
    transform: rotate(calc(-90deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.76"] .arc.secondary[data-anim~=right] {
    transform: rotate(calc(-93deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.77"] .arc.secondary[data-anim~=right] {
    transform: rotate(calc(-97deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.78"] .arc.secondary[data-anim~=right] {
    transform: rotate(calc(-100deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.79"] .arc.secondary[data-anim~=right] {
    transform: rotate(calc(-104deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.80"] .arc.secondary[data-anim~=right] {
    transform: rotate(calc(-108deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.81"] .arc.secondary[data-anim~=right] {
    transform: rotate(calc(-111deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.82"] .arc.secondary[data-anim~=right] {
    transform: rotate(calc(-115deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.83"] .arc.secondary[data-anim~=right] {
    transform: rotate(calc(-118deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.84"] .arc.secondary[data-anim~=right] {
    transform: rotate(calc(-122deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.85"] .arc.secondary[data-anim~=right] {
    transform: rotate(calc(-126deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.86"] .arc.secondary[data-anim~=right] {
    transform: rotate(calc(-129deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.87"] .arc.secondary[data-anim~=right] {
    transform: rotate(calc(-133deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.88"] .arc.secondary[data-anim~=right] {
    transform: rotate(calc(-136deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.89"] .arc.secondary[data-anim~=right] {
    transform: rotate(calc(-140deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.90"] .arc.secondary[data-anim~=right] {
    transform: rotate(calc(-144deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.91"] .arc.secondary[data-anim~=right] {
    transform: rotate(calc(-147deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.92"] .arc.secondary[data-anim~=right] {
    transform: rotate(calc(-151deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.93"] .arc.secondary[data-anim~=right] {
    transform: rotate(calc(-154deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.94"] .arc.secondary[data-anim~=right] {
    transform: rotate(calc(-158deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.95"] .arc.secondary[data-anim~=right] {
    transform: rotate(calc(-162deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.96"] .arc.secondary[data-anim~=right] {
    transform: rotate(calc(-165deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.97"] .arc.secondary[data-anim~=right] {
    transform: rotate(calc(-169deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.98"] .arc.secondary[data-anim~=right] {
    transform: rotate(calc(-173deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.99"] .arc.secondary[data-anim~=right] {
    transform: rotate(calc(-177deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="1"] .arc.secondary[data-anim~=right] {
    transform: rotate(calc(-180deg + var(--arc-offset)));
}


/*.arc-wrapper[data-progress^="0"] .arc.secondary[data-anim~=left],*/
.arc-wrapper[data-progress^="0"] .arc.secondary[data-anim~=left],
.arc-wrapper[data-progress^="0.0"] .arc.secondary[data-anim~=left] {
    transform: rotate(calc(-180deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.01"] .arc.secondary[data-anim~=left] {
    transform: rotate(calc(-177deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.02"] .arc.secondary[data-anim~=left] {
    transform: rotate(calc(-173deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.03"] .arc.secondary[data-anim~=left] {
    transform: rotate(calc(-169deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.04"] .arc.secondary[data-anim~=left] {
    transform: rotate(calc(-165deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.05"] .arc.secondary[data-anim~=left] {
    transform: rotate(calc(-162deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.06"] .arc.secondary[data-anim~=left] {
    transform: rotate(calc(-158deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.07"] .arc.secondary[data-anim~=left] {
    transform: rotate(calc(-154deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.08"] .arc.secondary[data-anim~=left] {
    transform: rotate(calc(-151deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.09"] .arc.secondary[data-anim~=left] {
    transform: rotate(calc(-147deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.1"] .arc.secondary[data-anim~=left] {
    transform: rotate(calc(-144deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.11"] .arc.secondary[data-anim~=left] {
    transform: rotate(calc(-140deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.12"] .arc.secondary[data-anim~=left] {
    transform: rotate(calc(-136deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.13"] .arc.secondary[data-anim~=left] {
    transform: rotate(calc(-133deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.14"] .arc.secondary[data-anim~=left] {
    transform: rotate(calc(-129deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.15"] .arc.secondary[data-anim~=left] {
    transform: rotate(calc(-126deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.16"] .arc.secondary[data-anim~=left] {
    transform: rotate(calc(-122deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.17"] .arc.secondary[data-anim~=left] {
    transform: rotate(calc(-118deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.18"] .arc.secondary[data-anim~=left] {
    transform: rotate(calc(-115deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.19"] .arc.secondary[data-anim~=left] {
    transform: rotate(calc(-111deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.2"] .arc.secondary[data-anim~=left] {
    transform: rotate(calc(-108deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.21"] .arc.secondary[data-anim~=left] {
    transform: rotate(calc(-104deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.22"] .arc.secondary[data-anim~=left] {
    transform: rotate(calc(-100deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.23"] .arc.secondary[data-anim~=left] {
    transform: rotate(calc(-97deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.24"] .arc.secondary[data-anim~=left] {
    transform: rotate(calc(-93deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.25"] .arc.secondary[data-anim~=left] {
    transform: rotate(calc(-90deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.26"] .arc.secondary[data-anim~=left] {
    transform: rotate(calc(-86deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.27"] .arc.secondary[data-anim~=left] {
    transform: rotate(calc(-82deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.28"] .arc.secondary[data-anim~=left] {
    transform: rotate(calc(-79deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.29"] .arc.secondary[data-anim~=left] {
    transform: rotate(calc(-75deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.3"] .arc.secondary[data-anim~=left] {
    transform: rotate(calc(-72deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.31"] .arc.secondary[data-anim~=left] {
    transform: rotate(calc(-68deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.32"] .arc.secondary[data-anim~=left] {
    transform: rotate(calc(-54deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.33"] .arc.secondary[data-anim~=left] {
    transform: rotate(calc(-61deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.34"] .arc.secondary[data-anim~=left] {
    transform: rotate(calc(-57deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.35"] .arc.secondary[data-anim~=left] {
    transform: rotate(calc(-54deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.36"] .arc.secondary[data-anim~=left] {
    transform: rotate(calc(-50deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.37"] .arc.secondary[data-anim~=left] {
    transform: rotate(calc(-46deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.38"] .arc.secondary[data-anim~=left] {
    transform: rotate(calc(-43deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.39"] .arc.secondary[data-anim~=left] {
    transform: rotate(calc(-39deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.4"] .arc.secondary[data-anim~=left] {
    transform: rotate(calc(-36deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.41"] .arc.secondary[data-anim~=left] {
    transform: rotate(calc(-32deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.42"] .arc.secondary[data-anim~=left] {
    transform: rotate(calc(-28deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.43"] .arc.secondary[data-anim~=left] {
    transform: rotate(calc(-25deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.44"] .arc.secondary[data-anim~=left] {
    transform: rotate(calc(-21deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.45"] .arc.secondary[data-anim~=left] {
    transform: rotate(calc(-18deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.46"] .arc.secondary[data-anim~=left] {
    transform: rotate(calc(-14deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.47"] .arc.secondary[data-anim~=left] {
    transform: rotate(calc(-10deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.48"] .arc.secondary[data-anim~=left] {
    transform: rotate(calc(-7deg + var(--arc-offset)));
}
.arc-wrapper[data-progress^="0.49"] .arc.secondary[data-anim~=left] {
    transform: rotate(calc(-3deg + var(--arc-offset)));
}

.arc-wrapper[data-progress^="0.5"] .arc.secondary[data-anim~=left],
.arc-wrapper[data-progress^="0.6"] .arc.secondary[data-anim~=left],
.arc-wrapper[data-progress^="0.7"] .arc.secondary[data-anim~=left],
.arc-wrapper[data-progress^="0.8"] .arc.secondary[data-anim~=left],
.arc-wrapper[data-progress^="0.9"] .arc.secondary[data-anim~=left],
.arc-wrapper[data-progress^="1"] .arc.secondary[data-anim~=left] {
    transform: rotate(calc(0deg + var(--arc-offset)));
}


/* regular bars */
.progress-bar {
    position: relative;
    background: var(--progress-bar-fg);
}
.progress-bar.vertical-progress-bar {
    transform-origin: 0% 50%;
    transform: rotate(90deg);
}

.progress-bar:before {
    content: '';
    color: var(--progress-bar-fg);
    position: absolute;
    top: 0;
    left: -1%; /* offset it a bit to left, so ti gets rid of some white pixels - NOTE it is compensated by a 1.02x size at 100%*/

    height: 100%;
    width: 0;
    background: var(--progress-bar-bg);

    will-change: transform;
    transition: transform 100ms;
    transform-origin: 0 0;
}
.progress-bar:after {
    content: attr(data-after);
    position: absolute;
    top: 0;
    left: 0;

    height: 100%;
    width: 100%;
    text-align: center;

    color: var(--progress-bar-fg);
}
.progress-bar[data-progress]:before {
    width: 100%;
}
.progress-bar[data-progress*="e"]:before,
.progress-bar[data-progress^="0.0"]:before,
.progress-bar[data-progress="0"]:before {
    transform: scaleX(0.0);
}
.progress-bar[data-progress^="0.01"]:before {
    transform: scaleX(0.01);
}
.progress-bar[data-progress^="0.02"]:before {
    transform: scaleX(0.02);
}
.progress-bar[data-progress^="0.03"]:before {
    transform: scaleX(0.03);
}
.progress-bar[data-progress^="0.04"]:before {
    transform: scaleX(0.04);
}
.progress-bar[data-progress^="0.05"]:before {
    transform: scaleX(0.05);
}
.progress-bar[data-progress^="0.06"]:before {
    transform: scaleX(0.06);
}
.progress-bar[data-progress^="0.07"]:before {
    transform: scaleX(0.07);
}
.progress-bar[data-progress^="0.08"]:before {
    transform: scaleX(0.08);
}
.progress-bar[data-progress^="0.09"]:before {
    transform: scaleX(0.09);
}
.progress-bar[data-progress^="0.1"]:before {
    transform: scaleX(0.10);
}
.progress-bar[data-progress^="0.11"]:before {
    transform: scaleX(0.11);
}
.progress-bar[data-progress^="0.12"]:before {
    transform: scaleX(0.12);
}
.progress-bar[data-progress^="0.13"]:before {
    transform: scaleX(0.13);
}
.progress-bar[data-progress^="0.14"]:before {
    transform: scaleX(0.14);
}
.progress-bar[data-progress^="0.15"]:before {
    transform: scaleX(0.15);
}
.progress-bar[data-progress^="0.16"]:before {
    transform: scaleX(0.16);
}
.progress-bar[data-progress^="0.17"]:before {
    transform: scaleX(0.17);
}
.progress-bar[data-progress^="0.18"]:before {
    transform: scaleX(0.18);
}
.progress-bar[data-progress^="0.19"]:before {
    transform: scaleX(0.19);
}
.progress-bar[data-progress^="0.2"]:before {
    transform: scaleX(0.20);
}
.progress-bar[data-progress^="0.21"]:before {
    transform: scaleX(0.21);
}
.progress-bar[data-progress^="0.22"]:before {
    transform: scaleX(0.22);
}
.progress-bar[data-progress^="0.23"]:before {
    transform: scaleX(0.23);
}
.progress-bar[data-progress^="0.24"]:before {
    transform: scaleX(0.24);
}
.progress-bar[data-progress^="0.25"]:before {
    transform: scaleX(0.25);
}
.progress-bar[data-progress^="0.26"]:before {
    transform: scaleX(0.26);
}
.progress-bar[data-progress^="0.27"]:before {
    transform: scaleX(0.27);
}
.progress-bar[data-progress^="0.28"]:before {
    transform: scaleX(0.28);
}
.progress-bar[data-progress^="0.29"]:before {
    transform: scaleX(0.29);
}
.progress-bar[data-progress^="0.3"]:before {
    transform: scaleX(0.30);
}
.progress-bar[data-progress^="0.31"]:before {
    transform: scaleX(0.31);
}
.progress-bar[data-progress^="0.32"]:before {
    transform: scaleX(0.32);
}
.progress-bar[data-progress^="0.33"]:before {
    transform: scaleX(0.33);
}
.progress-bar[data-progress^="0.34"]:before {
    transform: scaleX(0.34);
}
.progress-bar[data-progress^="0.35"]:before {
    transform: scaleX(0.35);
}
.progress-bar[data-progress^="0.36"]:before {
    transform: scaleX(0.36);
}
.progress-bar[data-progress^="0.37"]:before {
    transform: scaleX(0.37);
}
.progress-bar[data-progress^="0.38"]:before {
    transform: scaleX(0.38);
}
.progress-bar[data-progress^="0.39"]:before {
    transform: scaleX(0.39);
}
.progress-bar[data-progress^="0.4"]:before {
    transform: scaleX(0.40);
}
.progress-bar[data-progress^="0.41"]:before {
    transform: scaleX(0.41);
}
.progress-bar[data-progress^="0.42"]:before {
    transform: scaleX(0.42);
}
.progress-bar[data-progress^="0.43"]:before {
    transform: scaleX(0.43);
}
.progress-bar[data-progress^="0.44"]:before {
    transform: scaleX(0.44);
}
.progress-bar[data-progress^="0.45"]:before {
    transform: scaleX(0.45);
}
.progress-bar[data-progress^="0.46"]:before {
    transform: scaleX(0.46);
}
.progress-bar[data-progress^="0.47"]:before {
    transform: scaleX(0.47);
}
.progress-bar[data-progress^="0.48"]:before {
    transform: scaleX(0.48);
}
.progress-bar[data-progress^="0.49"]:before {
    transform: scaleX(0.49);
}
.progress-bar[data-progress^="0.5"]:before {
    transform: scaleX(0.50);
}
.progress-bar[data-progress^="0.51"]:before {
    transform: scaleX(0.51);
}
.progress-bar[data-progress^="0.52"]:before {
    transform: scaleX(0.52);
}
.progress-bar[data-progress^="0.53"]:before {
    transform: scaleX(0.53);
}
.progress-bar[data-progress^="0.54"]:before {
    transform: scaleX(0.54);
}
.progress-bar[data-progress^="0.55"]:before {
    transform: scaleX(0.55);
}
.progress-bar[data-progress^="0.56"]:before {
    transform: scaleX(0.56);
}
.progress-bar[data-progress^="0.57"]:before {
    transform: scaleX(0.57);
}
.progress-bar[data-progress^="0.58"]:before {
    transform: scaleX(0.58);
}
.progress-bar[data-progress^="0.59"]:before {
    transform: scaleX(0.59);
}
.progress-bar[data-progress^="0.6"]:before {
    transform: scaleX(0.60);
}
.progress-bar[data-progress^="0.61"]:before {
    transform: scaleX(0.61);
}
.progress-bar[data-progress^="0.62"]:before {
    transform: scaleX(0.62);
}
.progress-bar[data-progress^="0.63"]:before {
    transform: scaleX(0.63);
}
.progress-bar[data-progress^="0.64"]:before {
    transform: scaleX(0.64);
}
.progress-bar[data-progress^="0.65"]:before {
    transform: scaleX(0.65);
}
.progress-bar[data-progress^="0.66"]:before {
    transform: scaleX(0.66);
}
.progress-bar[data-progress^="0.67"]:before {
    transform: scaleX(0.67);
}
.progress-bar[data-progress^="0.68"]:before {
    transform: scaleX(0.68);
}
.progress-bar[data-progress^="0.69"]:before {
    transform: scaleX(0.69);
}
.progress-bar[data-progress^="0.7"]:before {
    transform: scaleX(0.70);
}
.progress-bar[data-progress^="0.71"]:before {
    transform: scaleX(0.71);
}
.progress-bar[data-progress^="0.72"]:before {
    transform: scaleX(0.72);
}
.progress-bar[data-progress^="0.73"]:before {
    transform: scaleX(0.73);
}
.progress-bar[data-progress^="0.74"]:before {
    transform: scaleX(0.74);
}
.progress-bar[data-progress^="0.75"]:before {
    transform: scaleX(0.75);
}
.progress-bar[data-progress^="0.76"]:before {
    transform: scaleX(0.76);
}
.progress-bar[data-progress^="0.77"]:before {
    transform: scaleX(0.77);
}
.progress-bar[data-progress^="0.78"]:before {
    transform: scaleX(0.78);
}
.progress-bar[data-progress^="0.79"]:before {
    transform: scaleX(0.79);
}
.progress-bar[data-progress^="0.8"]:before {
    transform: scaleX(0.80);
}
.progress-bar[data-progress^="0.81"]:before {
    transform: scaleX(0.81);
}
.progress-bar[data-progress^="0.81"]:before {
    transform: scaleX(0.81);
}
.progress-bar[data-progress^="0.82"]:before {
    transform: scaleX(0.82);
}
.progress-bar[data-progress^="0.83"]:before {
    transform: scaleX(0.83);
}
.progress-bar[data-progress^="0.84"]:before {
    transform: scaleX(0.84);
}
.progress-bar[data-progress^="0.85"]:before {
    transform: scaleX(0.85);
}
.progress-bar[data-progress^="0.86"]:before {
    transform: scaleX(0.86);
}
.progress-bar[data-progress^="0.87"]:before {
    transform: scaleX(0.87);
}
.progress-bar[data-progress^="0.88"]:before {
    transform: scaleX(0.88);
}
.progress-bar[data-progress^="0.89"]:before {
    transform: scaleX(0.89);
}
.progress-bar[data-progress^="0.9"]:before {
    transform: scaleX(0.90);
}
.progress-bar[data-progress^="0.91"]:before {
    transform: scaleX(0.91);
}
.progress-bar[data-progress^="0.92"]:before {
    transform: scaleX(0.92);
}
.progress-bar[data-progress^="0.93"]:before {
    transform: scaleX(0.93);
}
.progress-bar[data-progress^="0.94"]:before {
    transform: scaleX(0.94);
}
.progress-bar[data-progress^="0.95"]:before {
    transform: scaleX(0.95);
}
.progress-bar[data-progress^="0.96"]:before {
    transform: scaleX(0.96);
}
.progress-bar[data-progress^="0.97"]:before {
    transform: scaleX(0.97);
}
.progress-bar[data-progress^="0.98"]:before {
    transform: scaleX(0.98);
}
.progress-bar[data-progress^="0.99"]:before {
    transform: scaleX(0.99);
}
.progress-bar[data-progress^="1"]:before {
    transform: scaleX(1.02);  /* over 1 to compesnate for some blank pixels due to rounding*/
}

/* inverted progress bar  that unfolds background the logner it gets*/
.progress-bar.inverted:before {
    right: 0;
    left: auto;
    transform-origin: 100% 0;
    background: white;
}
.progress-bar.inverted[data-progress*="e"]:before,
.progress-bar.inverted[data-progress^="0.0"]:before,
.progress-bar.inverted[data-progress="0"]:before {
    transform: scaleX(1.02); /* over 1 to compesnate for some blank pixels due to rounding*/
}
.progress-bar.inverted[data-progress^="0.01"]:before {
    transform: scaleX(0.99);
}
.progress-bar.inverted[data-progress^="0.02"]:before {
    transform: scaleX(0.98);
}
.progress-bar.inverted[data-progress^="0.03"]:before {
    transform: scaleX(0.97);
}
.progress-bar.inverted[data-progress^="0.04"]:before {
    transform: scaleX(0.96);
}
.progress-bar.inverted[data-progress^="0.05"]:before {
    transform: scaleX(0.95);
}
.progress-bar.inverted[data-progress^="0.06"]:before {
    transform: scaleX(0.94);
}
.progress-bar.inverted[data-progress^="0.07"]:before {
    transform: scaleX(0.93);
}
.progress-bar.inverted[data-progress^="0.08"]:before {
    transform: scaleX(0.92);
}
.progress-bar.inverted[data-progress^="0.09"]:before {
    transform: scaleX(0.91);
}
.progress-bar.inverted[data-progress^="0.1"]:before {
    transform: scaleX(0.90);
}
.progress-bar.inverted[data-progress^="0.11"]:before {
    transform: scaleX(0.89);
}
.progress-bar.inverted[data-progress^="0.12"]:before {
    transform: scaleX(0.88);
}
.progress-bar.inverted[data-progress^="0.13"]:before {
    transform: scaleX(0.87);
}
.progress-bar.inverted[data-progress^="0.14"]:before {
    transform: scaleX(0.86);
}
.progress-bar.inverted[data-progress^="0.15"]:before {
    transform: scaleX(0.85);
}
.progress-bar.inverted[data-progress^="0.16"]:before {
    transform: scaleX(0.84);
}
.progress-bar.inverted[data-progress^="0.17"]:before {
    transform: scaleX(0.83);
}
.progress-bar.inverted[data-progress^="0.18"]:before {
    transform: scaleX(0.82);
}
.progress-bar.inverted[data-progress^="0.19"]:before {
    transform: scaleX(0.81);
}
.progress-bar.inverted[data-progress^="0.2"]:before {
    transform: scaleX(0.80);
}
.progress-bar.inverted[data-progress^="0.21"]:before {
    transform: scaleX(0.79);
}
.progress-bar.inverted[data-progress^="0.22"]:before {
    transform: scaleX(0.78);
}
.progress-bar.inverted[data-progress^="0.23"]:before {
    transform: scaleX(0.77);
}
.progress-bar.inverted[data-progress^="0.24"]:before {
    transform: scaleX(0.76);
}
.progress-bar.inverted[data-progress^="0.25"]:before {
    transform: scaleX(0.75);
}
.progress-bar.inverted[data-progress^="0.26"]:before {
    transform: scaleX(0.74);
}
.progress-bar.inverted[data-progress^="0.27"]:before {
    transform: scaleX(0.73);
}
.progress-bar.inverted[data-progress^="0.28"]:before {
    transform: scaleX(0.72);
}
.progress-bar.inverted[data-progress^="0.29"]:before {
    transform: scaleX(0.71);
}
.progress-bar.inverted[data-progress^="0.3"]:before {
    transform: scaleX(0.70);
}
.progress-bar.inverted[data-progress^="0.31"]:before {
    transform: scaleX(0.69);
}
.progress-bar.inverted[data-progress^="0.32"]:before {
    transform: scaleX(0.68);
}
.progress-bar.inverted[data-progress^="0.33"]:before {
    transform: scaleX(0.67);
}
.progress-bar.inverted[data-progress^="0.34"]:before {
    transform: scaleX(0.66);
}
.progress-bar.inverted[data-progress^="0.35"]:before {
    transform: scaleX(0.65);
}
.progress-bar.inverted[data-progress^="0.36"]:before {
    transform: scaleX(0.64);
}
.progress-bar.inverted[data-progress^="0.37"]:before {
    transform: scaleX(0.63);
}
.progress-bar.inverted[data-progress^="0.38"]:before {
    transform: scaleX(0.62);
}
.progress-bar.inverted[data-progress^="0.39"]:before {
    transform: scaleX(0.61);
}
.progress-bar.inverted[data-progress^="0.4"]:before {
    transform: scaleX(0.60);
}
.progress-bar.inverted[data-progress^="0.41"]:before {
    transform: scaleX(0.59);
}
.progress-bar.inverted[data-progress^="0.42"]:before {
    transform: scaleX(0.58);
}
.progress-bar.inverted[data-progress^="0.43"]:before {
    transform: scaleX(0.57);
}
.progress-bar.inverted[data-progress^="0.44"]:before {
    transform: scaleX(0.56);
}
.progress-bar.inverted[data-progress^="0.45"]:before {
    transform: scaleX(0.55);
}
.progress-bar.inverted[data-progress^="0.46"]:before {
    transform: scaleX(0.54);
}
.progress-bar.inverted[data-progress^="0.47"]:before {
    transform: scaleX(0.53);
}
.progress-bar.inverted[data-progress^="0.48"]:before {
    transform: scaleX(0.52);
}
.progress-bar.inverted[data-progress^="0.49"]:before {
    transform: scaleX(0.51);
}
.progress-bar.inverted[data-progress^="0.5"]:before {
    transform: scaleX(0.50);
}
.progress-bar.inverted[data-progress^="0.51"]:before {
    transform: scaleX(0.49);
}
.progress-bar.inverted[data-progress^="0.52"]:before {
    transform: scaleX(0.48);
}
.progress-bar.inverted[data-progress^="0.53"]:before {
    transform: scaleX(0.47);
}
.progress-bar.inverted[data-progress^="0.54"]:before {
    transform: scaleX(0.46);
}
.progress-bar.inverted[data-progress^="0.55"]:before {
    transform: scaleX(0.45);
}
.progress-bar.inverted[data-progress^="0.56"]:before {
    transform: scaleX(0.44);
}
.progress-bar.inverted[data-progress^="0.57"]:before {
    transform: scaleX(0.43);
}
.progress-bar.inverted[data-progress^="0.58"]:before {
    transform: scaleX(0.42);
}
.progress-bar.inverted[data-progress^="0.59"]:before {
    transform: scaleX(0.41);
}
.progress-bar.inverted[data-progress^="0.6"]:before {
    transform: scaleX(0.40);
}
.progress-bar.inverted[data-progress^="0.61"]:before {
    transform: scaleX(0.39);
}
.progress-bar.inverted[data-progress^="0.62"]:before {
    transform: scaleX(0.38);
}
.progress-bar.inverted[data-progress^="0.63"]:before {
    transform: scaleX(0.37);
}
.progress-bar.inverted[data-progress^="0.64"]:before {
    transform: scaleX(0.36);
}
.progress-bar.inverted[data-progress^="0.65"]:before {
    transform: scaleX(0.35);
}
.progress-bar.inverted[data-progress^="0.66"]:before {
    transform: scaleX(0.34);
}
.progress-bar.inverted[data-progress^="0.67"]:before {
    transform: scaleX(0.33);
}
.progress-bar.inverted[data-progress^="0.68"]:before {
    transform: scaleX(0.32);
}
.progress-bar.inverted[data-progress^="0.69"]:before {
    transform: scaleX(0.31);
}
.progress-bar.inverted[data-progress^="0.7"]:before {
    transform: scaleX(0.30);
}
.progress-bar.inverted[data-progress^="0.71"]:before {
    transform: scaleX(0.29);
}
.progress-bar.inverted[data-progress^="0.72"]:before {
    transform: scaleX(0.28);
}
.progress-bar.inverted[data-progress^="0.73"]:before {
    transform: scaleX(0.27);
}
.progress-bar.inverted[data-progress^="0.74"]:before {
    transform: scaleX(0.26);
}
.progress-bar.inverted[data-progress^="0.75"]:before {
    transform: scaleX(0.25);
}
.progress-bar.inverted[data-progress^="0.76"]:before {
    transform: scaleX(0.24);
}
.progress-bar.inverted[data-progress^="0.77"]:before {
    transform: scaleX(0.23);
}
.progress-bar.inverted[data-progress^="0.78"]:before {
    transform: scaleX(0.22);
}
.progress-bar.inverted[data-progress^="0.79"]:before {
    transform: scaleX(0.21);
}
.progress-bar.inverted[data-progress^="0.8"]:before {
    transform: scaleX(0.20);
}
.progress-bar.inverted[data-progress^="0.81"]:before {
    transform: scaleX(0.19);
}
.progress-bar.inverted[data-progress^="0.81"]:before {
    transform: scaleX(0.19);
}
.progress-bar.inverted[data-progress^="0.82"]:before {
    transform: scaleX(0.18);
}
.progress-bar.inverted[data-progress^="0.83"]:before {
    transform: scaleX(0.17);
}
.progress-bar.inverted[data-progress^="0.84"]:before {
    transform: scaleX(0.16);
}
.progress-bar.inverted[data-progress^="0.85"]:before {
    transform: scaleX(0.15);
}
.progress-bar.inverted[data-progress^="0.86"]:before {
    transform: scaleX(0.14);
}
.progress-bar.inverted[data-progress^="0.87"]:before {
    transform: scaleX(0.13);
}
.progress-bar.inverted[data-progress^="0.88"]:before {
    transform: scaleX(0.12);
}
.progress-bar.inverted[data-progress^="0.89"]:before {
    transform: scaleX(0.11);
}
.progress-bar.inverted[data-progress^="0.9"]:before {
    transform: scaleX(0.10);
}
.progress-bar.inverted[data-progress^="0.91"]:before {
    transform: scaleX(0.09);
}
.progress-bar.inverted[data-progress^="0.92"]:before {
    transform: scaleX(0.08);
}
.progress-bar.inverted[data-progress^="0.93"]:before {
    transform: scaleX(0.07);
}
.progress-bar.inverted[data-progress^="0.94"]:before {
    transform: scaleX(0.06);
}
.progress-bar.inverted[data-progress^="0.95"]:before {
    transform: scaleX(0.05);
}
.progress-bar.inverted[data-progress^="0.96"]:before {
    transform: scaleX(0.04);
}
.progress-bar.inverted[data-progress^="0.97"]:before {
    transform: scaleX(0.03);
}
.progress-bar.inverted[data-progress^="0.98"]:before {
    transform: scaleX(0.02);
}
.progress-bar.inverted[data-progress^="0.99"]:before {
    transform: scaleX(0.01);
}
.progress-bar.inverted[data-progress^="0.999"]:before {
    transform: scaleX(0);
}
.progress-bar.inverted[data-progress^="1"]:before {
    transform: scaleX(0);
}