:root {
    --color-white: #fff;
    --color-black: #333;
    --color-gray: #75787b;
    --color-gray-light: #bbb;
    --color-gray-disabled: #e8e8e8;
    --color-pr: #53a318;
    --color-pr-dark: #383;
}
section h2 { color: var(--color-pr); line-height: 1.1; font-weight: 100; letter-spacing: 3px; }
section { width:100%; margin-bottom: 2rem;}
.progress-bar {background-color: white; font-size:14px; width:100%; display: flex; justify-content: space-between; list-style: none; padding: 0;}
.progress-bar li {flex: 2; position: relative; padding: 0 0 14px 0; line-height: 1.5; color: var(--color-pionii-1); font-weight: 600; white-space: nowrap; overflow: visible; min-width: 0; text-align: center; border-bottom: 2px solid var(--color-gray-disabled); }
.progress-bar li:first-child,
.progress-bar li:last-child { flex: 1; }
.progress-bar li:last-child { text-align: right; }
.progress-bar li:before { content: ""; display: block; width: 8px; height: 8px; background-color: var(--color-gray-disabled); border-radius: 50%; border: 2px solid var(--color-white); position: absolute; left: calc(50% - 6px); bottom: -7px; z-index: 3; transition: all .2s ease-in-out; }
.progress-bar li:first-child:before {
    left: 0;
}
.progress-bar li:last-child:before {
    right: 0; left: auto;
}
.progress-bar span {
    transition: opacity .3s ease-in-out;
}
.progress-bar li:not(.is-active) span {
    opacity: 0;
}
.progress-bar .is-complete:not(:first-child):after,
.progress-bar .is-active:not(:first-child):after { content: ""; display: block; width: 100%; position: absolute; bottom: -2px; left: -50%; z-index: 2; border-bottom: 2px solid var(--color-pr);}
.progress-bar li:last-child span { width: 200%; display: inline-block; position: absolute; left: -100%; }
.progress-bar .is-complete:last-child:after,
.progress-bar .is-active:last-child:after { width: 200%; left: -100%; }
.progress-bar .is-complete:before { background-color: var(--color-pr); }
.progress-bar .is-active:before,
.progress-bar li:hover:before,
.progress-bar .is-hovered:before { background-color: var(--color-white); border-color: var(--color-pr); }
.progress-bar li:hover:before,
.progress-bar .is-hovered:before { transform: scale(1.33); }
.progress-bar li:hover span,
.progress-bar li.is-hovered span { opacity: 1; }
.progress-bar:hover li:not(:hover) span { opacity: 0; }
.x-ray .progress-bar,
.x-ray .progress-bar li { border: 1px dashed red; }
.progress-bar .has-changes { opacity: 1 !important; }
.progress-bar .has-changes:before { content: ""; display: block; width: 8px; height: 8px; position: absolute; left: calc(50% - 4px); bottom: -20px; }