:root {
    --varPBHeight: 1.5em;
    --varPBBGInset: 0.15em;
    --varPBBarInset: 0.25em;
    --varPBRadius: 5px;
    --varPBFontSize: 0.75em;
    --varPBBGColor: rgb(200,200,200);
    --varPBBarCompColorB: rgb(100,255,100);
    --varPBBarCompColorA: rgb(100, 235, 100);
    --varPBBarPendColorB: rgb(100, 100, 200, 0.75);
    --varPBBarPendColorA: rgba(100, 100, 255, 0.75);
    --varPBBarExtraColorA: rgb(255, 255, 0);
    --varPBBarExtraColorB: rgb(255, 235, 0);
    --varPBHighlightWidth: 3%;
    --varPBHighlightStep: 2.5%;
    --varPBHighlightDuration: 15s;
    --varPBHighlightSize: 200%;
}

.progressBarBase {
    position:relative;
    height: var(--varPBHeight);
    background-color: rgba(255,100,255, 1);
}
.progressBarBG {
    border-radius: var(--varPBRadius);
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    margin: var(--varPBBGInset);
    background-color: var(--varPBBGColor);
    box-shadow: 0px 0px 6px 1px rgb(20, 20, 20) inset;
}
.progressBarBar {
    border-radius: var(--varPBRadius);
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    margin: var(--varPBBarInset);
    background-size: var(--varPBHighlightSize) 100%;
    animation: progressBarExtraAnim var(--varPBHighlightDuration) linear infinite;
}
.progressBarComplete {
    z-index: 3;
    background: linear-gradient(to right,var(--varPBBarCompColorA) calc(50% - var(--varPBHighlightWidth)), var(--varPBBarCompColorB) calc(50% - var(--varPBHighlightWidth) + var(--varPBHighlightStep)), var(--varPBBarCompColorB) calc(50% + var(--varPBHighlightWidth) - var(--varPBHighlightStep)), var(--varPBBarCompColorA) calc(50% + var(--varPBHighlightWidth)));
    background-size: var(--varPBHighlightSize) 100%;
    animation: progressBarExtraAnim var(--varPBHighlightDuration) linear infinite;
}
.progressBarPending {
    z-index: 2;
    background: linear-gradient(to right,var(--varPBBarPendColorA) calc(50% - var(--varPBHighlightWidth)), var(--varPBBarPendColorB) calc(50% - var(--varPBHighlightWidth) + var(--varPBHighlightStep)), var(--varPBBarPendColorB) calc(50% + var(--varPBHighlightWidth) - var(--varPBHighlightStep)), var(--varPBBarPendColorA) calc(50% + var(--varPBHighlightWidth)));
    background-size: var(--varPBHighlightSize) 100%;
    animation: progressBarExtraAnim var(--varPBHighlightDuration) linear infinite;
}
.progressBarBar.progressBarExtra {
    background: linear-gradient(to right, var(--varPBBarExtraColorA) calc(50% - var(--varPBHighlightWidth)), var(--varPBBarExtraColorB) calc(50% - var(--varPBHighlightWidth) + var(--varPBHighlightStep)), var(--varPBBarExtraColorB) calc(50% + var(--varPBHighlightWidth) - var(--varPBHighlightStep)), var(--varPBBarExtraColorA) calc(50% + var(--varPBHighlightWidth)));
    background-size: var(--varPBHighlightSize) 100%;
    animation: progressBarExtraAnim var(--varPBHighlightDuration) linear infinite;
}
@keyframes progressBarExtraAnim {
    0% {
        background-position: 600% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
.progressBarValue {
    z-index: 4;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    margin: var(--varPBBGInset);
    line-height: calc(var(--varPBHeight) - var(--varPBBGInset));
    font-size: var(--varPBFontSize);
}