@keyframes progress-bar {
    from { max-width: 0; }
    to { max-width: 100%; }
}
/**********************************
 * Progress Bar
 **********************************/
.progress-bar  { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }

.progress-modal { z-index: 9999; display: none; text-align: center; }
.progress-modal, .progress-mask, .progress-bar-mask { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.progress-mask, .progress-bar-mask { background-color: rgba(128,128,128,0.7); opacity: 0.8; }
.progress-modal > .progress {}

.progress-bar > .progress-bar-bar,
.progress-bar > .progress-bar-text,
.progress-bar > .progress-bar-percent  {
    display: block;
    position: absolute;
    top: 50%;
    margin: -2rem 2rem;
}
.progress-bar > .btn-cancel { display: none; }
.progress-bar > .progress-bar-text {
    font-size: 2.4rem;
    line-height: 3rem;
    color: #000000;
    text-align: center;
    width: 100%;
    margin: -2rem 0;
}

/*
 * Standard progress
 */
.progress { display: block; margin: 1rem 0; }
.progress .progress-bar, .progress-bar > .progress-bar-bar  {
    display: block;
    position: relative;
    border-radius: 0.5rem;
    border: solid 1px #888;
    box-shadow: 0.1rem 0.1rem 0.2rem #000000 inset;
    background-color: #EFEFEF;
    text-align: center;
    min-height: 3rem;
    z-index: 0;
}
.progress .progress-bar-value, .progress-bar > .progress-bar-bar > .progress-bar-value {
    display: block;
    position: absolute;
    left: 0.1rem;
    bottom: 0.1rem;
    top: 0.1rem;
    border-radius: 0.5rem;
    border: solid 1px #888;
    background-color: #1365AD;
    min-height: 3rem;
    box-shadow: -0.1rem -0.1rem 0.2rem #000 inset;
    animation-name: progress-bar;
    animation-duration: 5s;
    z-index: 1;
}
.progress .progress-text {
    display: block;
    position: relative;
    font-size: 2.4rem;
    line-height: 2;
    color: #000000;
    text-align: center;
    z-index: 99;
}

/*
 * Stripped progress
 */
.progress-stripped .progress-bar-value {
    background-size: 5rem 5rem;
    background-repeat: repeat-x;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}