.test-settings h1 {
    font-size: 1.2em;
    font-weight: bold;
}

.test-row {
    padding: 10px;
}

.progress-container {
    display: inline-block;
    border: 0px solid red;
    line-height: 1px;
    white-space: nowrap;
}

/*********************************
 ***  standard
 *********************************/

progress.test-progress {
    appearance: none;
    /*
    height: 100%;
    box-shadow: 0;
    */
    line-height: 20px;
}

progress.test-progress::-webkit-progress-value {
    padding: none;
}

.progress-value {
    display: inline-block;
    width: 50px;
    text-align: right;
    font-size: 2.5em;
    line-height: 37px;
    vertical-align: bottom;
    height: 100%;
}

.out-of-time .progress-value {
    color: rgb(227, 81, 30);
}

/*********************************
 ***  01 - round corners
 *********************************/

.progress-container-01 {
    overflow: hidden;
    border: 2px solid darkgray;
    border-radius: 15px;
    padding: 3px;
}

progress.test-progress-01 {
    width: 250px;
    height: 20px;
    overflow: hidden;
}

progress.test-progress-01::-webkit-progress-bar {
    background-color: transparent;
    border-radius: 10px;
    overflow: hidden;
}

progress.test-progress-01::-webkit-progress-value {
    border-radius: 10px;
    background-color: red;
}

/*********************************
 ***  02 - bars
 *********************************/

.progress-container-02 {
    padding: 3px;
    border: 1px solid darkgray;
}

progress.test-progress-02 {
    width: 600px;
    height: 40px;
}

progress.test-progress-02::-webkit-progress-bar {
    background: repeating-linear-gradient(
            to right,
            transparent,
            transparent 2px,
            #e6e6e6 2px,
            #e6e6e6 18px,
            transparent 18px,
            transparent 20px
    );
}

progress.test-progress-02::-webkit-progress-value {
    background: repeating-linear-gradient(
            to right,
            transparent,
            transparent 2px,
            blue 2px,
            blue 18px,
            transparent 18px,
            transparent 20px
    );
}

/*********************************
 ***  03 - bars
 *********************************/

.progress-container-03 {
    position: relative;
    overflow: hidden;
    width: 399px;
    height: 34px;
    background-color: #4d4d4d;
}

progress.test-progress-03 {
    width: 360px;
    height: 30px;
}

.progress-container-03 .progress-value {
    font-size: 2em;
    width: 35px;
    line-height: 35px;
    color: white;
}

progress.test-progress-03::-webkit-progress-value {
    background: repeating-linear-gradient(
            to right,
            transparent,
            transparent 1px,
            #4d4d4d 1px,
            #4d4d4d 8px,
            transparent 8px,
            transparent 9px
    );
}

progress.test-progress-03::-webkit-progress-bar {
    background: repeating-linear-gradient(
            to right,
            transparent,
            transparent 1px,
            rgb(89, 170, 62) 1px,
            rgb(89, 170, 62) 8px,
            transparent 8px,
            transparent 9px
    );
}

progress.test-progress-03.short-of-time::-webkit-progress-bar {
    background: repeating-linear-gradient(
            to right,
            transparent,
            transparent 1px,
            rgb(227, 138, 42) 1px,
            rgb(227, 138, 42) 8px,
            transparent 8px,
            transparent 9px
    );
}

progress.test-progress-03.out-of-time::-webkit-progress-bar {
    background: repeating-linear-gradient(
            to right,
            transparent,
            transparent 1px,
            rgb(227, 81, 30) 1px,
            rgb(227, 81, 30) 8px,
            transparent 8px,
            transparent 9px
    );
}

/*********************************
 ***  04 - bars
 *********************************/

.progress-container-04 {
    padding: 3px;
    border: 1px solid darkgray;
}

progress.test-progress-04 {
    width: 160px;
    height: 30px;
}

progress.test-progress-04::-webkit-progress-bar {
    background: linear-gradient(to right, rgb(89, 170, 62), rgb(227, 138, 42) 70%, rgb(227, 81, 30) 85%);
}

progress.test-progress-04::-webkit-progress-value {
    background: linear-gradient(to right, #e6e6e6 0 160px);
}

/*********************************
 ***  05 - dynamic bars
 *********************************/

.progress-container-05 {
    padding: 3px;
    border: 1px solid darkgray;
}

progress.test-progress-05 {
    height: 30px;
    width: 160px;
    --background-bar: linear-gradient(to right, rgb(89, 170, 62), rgb(227, 138, 42) 70%, rgb(227, 81, 30) 85%);
    --background-value: linear-gradient(to right, #e6e6e6 0 160px);
}

progress.test-progress-05::-webkit-progress-bar {
    background: var(--background-bar);
}

progress.test-progress-05::-webkit-progress-value {
    background: var(--background-value);
}

/*********************************
 ***  06 - repeating bars
 *********************************/

.progress-container-06 {
    --progress-color: #4d4d4d;
    --progress-height: 30px;

    background-color: var(--progress-color);
    padding: 2px;
}

.progress-container-06 .progress-value {
    font-size: 2em;
    width: 35px;
    line-height: var(--progress-height);
    color: white;
}

progress.test-progress-06 {
    height: var(--progress-height);
    color: var(--progress-color);

    /* initial values, just to show how it works */
    width: 160px;
    --background-bar: repeating-linear-gradient(to right, rgb(89, 170, 62) 0px 14px, transparent 14px 16px),
    repeating-linear-gradient(to right, rgb(227, 138, 42) 96px 110px, transparent 110px 112px),
    repeating-linear-gradient(to right, rgb(227, 81, 30) 128px 142px, transparent 142px 144px);
    --background-bar-size: 96px, 32px, 32px;
    --background-bar-position: 0px, 96px, 128px;
}

progress.test-progress-06::-webkit-progress-bar {
    background: var(--background-bar);
    background-size: var(--background-bar-size);
    background-position: var(--background-bar-position);
    background-repeat: no-repeat;
}

progress.test-progress-06::-webkit-progress-value {
    background: var(--progress-color);
}


/*********************************
 ***  ball loader
 *********************************/

.animated-objects {
    position: relative;
    text-align: center;
}

.animated-objects-l {
    transform: scale(1.5);
}

.animated-objects-s {
    transform: scale(0.5);
}

.animated-objects-xs {
    transform: scale(0.3);
}

.animated-objects-xxs {
    transform: scale(0.15);
}

.animated-objects .ball {
    position: absolute;
    top: 120px;
    width: 100px;
    height: 100px;

    transform: rotate(0turn);

    animation: animated-objects-ball-motion-path 6s infinite linear;
    offset-path: path(
            "M40,-60 C-60,-60 -60,40 40,40 C140,40 140,140 40,140 C-60,140 -60,40, 40,40 C140,40 140, -60 40,-60"
    );
}

.animated-objects .ball-2 {
    animation-delay: -2s;
}

.animated-objects .ball-3 {
    animation-delay: -4s;
}

@keyframes animated-objects-ball-motion-path {
    100% {
        offset-distance: 100%;
    }
}