
@-webkit-keyframes progressBarStripes {
    100%{ background-position-x: 100%; }
}
@-moz-keyframes progressBarStripes {
    100%{ background-position-x: 100%; }
}
@keyframes progressBarStripes { 
    100%{ background-position-x: 100%; }
}

.html5uploadProgressBarContainer{
	margin: 10px 0; 
}

.html5uploadProgressBarInfo{
	font-family: arial; 
	font-size: 12px;
	margin-bottom: 5px;
}

.html5uploadProgressBarBack{
	background: #DFDFDF;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
    border-radius: 4px;
}

.html5uploadProgressBarProgress{
	background: rgba(66, 139, 202, 1);
	height: 20px;
    line-height: 20px;
    border-radius: inherit;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
    transition: width .3s ease;
    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);
    -webkit-animation: progressBarStripes 4.0s linear infinite;
    animation: progressBarStripes 0.4s linear infinite;
    background-size: 40px 40px;
    background-position-x: 0;
    background-repeat: repeat-x;
    font-size: 13px;
    color: #fff;
    font-weight: bold;
    text-align: center;
}

.html5uploadProgressBarFilename{
	font-weight: bold;
}

.html5uploadProgressBarComplete{
	font-weight: bold;
	color: rgba(66, 139, 202, 1);
}

.html5uploadProgressBarFinished{
	font-weight: bold;
	color: rgba(66, 139, 202, 1);
}

/* UPLOAD QUEUE */
.html5uploadQueueContainer                            { border: 1px solid #ccc; box-shadow: 0 0 4px rgba(0, 0, 0, 0.1); }
.html5uploadQueueContainer div                        { box-sizing: border-box; }
.html5uploadQueueContainer .html5uploadQueueHeader    { border-bottom: 1px solid #ccc; }
.html5uploadQueueContainer .html5uploadQueueHeader,
.html5uploadQueueContainer .html5uploadQueueRow       { display: block; width: 100%; background-color: #fff; }
.html5uploadQueueContainer .html5uploadQueueHeader    { font-weight: bold; text-align: center; background-color: #F2F2F2; }
.html5uploadQueueContainer .html5uploadQueueName,
.html5uploadQueueContainer .html5uploadQueueStatus    { !important; padding: 10px; display: inline-block; color: #565656; }
.html5uploadQueueContainer .html5uploadQueueName      { }
.html5uploadQueueContainer .html5uploadQueueStatus    { text-align: center; border-left: 1px dashed #ccc; float: right; width: 10%; }
.html5uploadQueueContainer .html5uploadQueueUploading { color: rgb(0, 129, 255); }
.html5uploadQueueContainer .html5uploadQueueUploaded  { color: rgb(0, 208, 129); }
.html5uploadQueueContainer .html5uploadQueueWaiting   { color: orange; }
.html5uploadQueueContainer .second                    { background-color: #F2F2F2; }

/* CANCEL */
.html5uploadCancel {
    background-color: #428BCA;
    display: inline-block;
    padding: 5px 20px;
    margin-top: 10px;
    color: #fff;
    border-radius: 3px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s all;
}
.html5uploadCancel:hover { background-color: #5E9CD2; }