.dz-message, .dz-message.dz-success {
    font-size: 1.4vw;
    color: rgba(128,128,128,0.3);
    /*text-align: center;
    padding-top: 1.5vh;*/
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 7.6vh;
}

.dz-filename {
	font-size: 1vw;
	color: #002C77;
	font-weight: normal; 
    text-align: left;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.dz-error .dz-filename { 
	font-size: 1vw;
	color: firebrick; 
	text-decoration: line-through; 
}

.dz-success .dz-filename a { 
	font-size: 1.5vh;
	color: #002C77; 
	text-decoration: none; 
}

.dz-drag-hover {
	border-color: rgba(0, 44, 119, 1);
	background-color: aliceblue;
}

.dropbox-files-frm {
    margin-top: 1vh;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(0, 44, 119, 0.5);
    height: 11.3vh;
}

.dropbox-files-title {
	background-color: rgba(0, 44, 119, 0.4);
    color: white;
    text-align: center;
    padding-top: 0.2vh;
    padding-bottom: 0.4vh;
}

.listadocumentos-dropbox {
    margin: 0;
    margin-top: 0.7vh;
    padding: 0;
}

.listadocumentos-dropbox li {
	display: flex;
	height: 2.5vh;
}

.listadocumentos-dropbox a {
	width: 100%;
	padding: 0.25vh 1vh 0.25vh 1vh;
	font-weight: 100;
    font-size: 1.5vh;
}

/* Styling an indeterminate progress bar */

progress:not(value) {
    /* Add your styles here. As part of this walkthrough we will focus only on determinate progress bars. */
}

/* Styling the determinate progress element */

progress[value] {
	width: 100%;
	border: none;
    background-color: #A6E2EF;
    border-radius: 3px;
    box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;
    margin-top: 0.4vh;    
    /* Of all IE, only IE10 supports progress element that too partially. It only allows to change the background-color of the progress value using the 'color' attribute. */
    color: rgba(0, 44, 119, 0.7);
}

progress::-moz-progress-bar { background: rgba(0, 44, 119, 0.7); }
progress::-webkit-progress-value { background: rgba(0, 44, 119, 0.7); }

/*
Webkit browsers provide two pseudo classes that can be use to style HTML5 progress element.
-webkit-progress-bar -> To style the progress element container
-webkit-progress-value -> To style the progress element value.
*/

progress[value]::-webkit-progress-bar {
    background-color: #A6E2EF;
    border-radius: 3px;
    box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;
}

progress[value]::-webkit-progress-value {
    position: relative;
    background-size: 35px 20px, 100% 100%, 100% 100%;
    border-radius:3px;
    
    /* Let's animate this */
    animation: animate-stripes 5s linear infinite;
}

@keyframes animate-stripes { 100% { background-position: -100px 0; } }

/* Let's spice up things little bit by using pseudo elements. */

progress[value]::-webkit-progress-value:after {
    /* Only webkit/blink browsers understand pseudo elements on pseudo classes. A rare phenomenon! */
    content: '';
    position: absolute;
    
    width:5px; height:5px;
    top:7px; right:7px;
    
    background-color: white;
    border-radius: 100%;
}

/* Firefox provides a single pseudo class to style the progress element value and not for container. -moz-progress-bar */

progress[value]::-moz-progress-bar {
    /* Gradient background with Stripes */
    background-image:
    -moz-linear-gradient( 135deg,
                                                     transparent,
                                                     transparent 33%,
                                                     rgba(0,0,0,.1) 33%,
                                                     rgba(0,0,0,.1) 66%,
                                                     transparent 66%),
    -moz-linear-gradient( top,
                                                        rgba(255, 255, 255, .25),
                                                        rgba(0,0,0,.2)),
     -moz-linear-gradient( left, #09c, #f44);
    
    background-size: 35px 20px, 100% 100%, 100% 100%;
    border-radius:3px;
    
    /* Firefox doesn't support CSS3 keyframe animations on progress element. Hence, we did not include animate-stripes in this code block */
}

/* Fallback technique styles */
.progress-bar {
    background-color: #A6E2EF;
    border-radius: 3px;
    box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;

    /* Dimensions should be similar to the parent progress element. */
    width: 100%; height:20px;
}

.progress-bar span {
    background-color: royalblue;
    border-radius: 3px;
    
    display: block;
    text-indent: -9999px;
}

p[data-value] { 
  
  position: relative; 
}

/* The percentage will automatically fall in place as soon as we make the width fluid. Now making widths fluid. */

/*p[data-value]:after {
	content: attr(data-value) ' %';
    position: absolute;
    color: white;
    font-family: 'Open Sans', arial;
    font-weight: 100;
    font-size: 1.0vh;
    z-index: 1;
    margin-top: -3.0vh;
    text-align: center;
    width: 4vw;
}*/

.html5::-webkit-progress-value,
.python::-webkit-progress-value  {
    /* Gradient background with Stripes */
    background-image:
    -webkit-linear-gradient( 135deg,
                                                     transparent,
                                                     transparent 33%,
                                                     rgba(0,0,0,.1) 33%,
                                                     rgba(0,0,0,.1) 66%,
                                                     transparent 66%),
    -webkit-linear-gradient( top,
                                                        rgba(255, 255, 255, .25),
                                                        rgba(0,0,0,.2)),
     -webkit-linear-gradient( left, #09c, #f44);
}

.css3::-webkit-progress-value,
.php::-webkit-progress-value 
{
    /* Gradient background with Stripes */
    background-image:
    -webkit-linear-gradient( 135deg,
                                                     transparent,
                                                     transparent 33%,
                                                     rgba(0,0,0,.1) 33%,
                                                     rgba(0,0,0,.1) 66%,
                                                     transparent 66%),
    -webkit-linear-gradient( top,
                                                        rgba(255, 255, 255, .25),
                                                        rgba(0,0,0,.2)),
     -webkit-linear-gradient( left, #09c, #ff0);
}

.jquery::-webkit-progress-value,
.node-js::-webkit-progress-value 
{
    /* Gradient background with Stripes */
    background-image:
    -webkit-linear-gradient( 135deg,
                                                     transparent,
                                                     transparent 33%,
                                                     rgba(0,0,0,.1) 33%,
                                                     rgba(0,0,0,.1) 66%,
                                                     transparent 66%),
    -webkit-linear-gradient( top,
                                                        rgba(255, 255, 255, .25),
                                                        rgba(0,0,0,.2)),
     -webkit-linear-gradient( left, #09c, #690);
}

/* Similarly, for Mozillaa. Unfortunately combining the styles for different browsers will break every other browser. Hence, we need a separate block. */

.html5::-moz-progress-bar,
.php::-moz-progress-bar {
    /* Gradient background with Stripes */
    background-image:
    -moz-linear-gradient( 135deg,
                                                     transparent,
                                                     transparent 33%,
                                                     rgba(0,0,0,.1) 33%,
                                                     rgba(0,0,0,.1) 66%,
                                                     transparent 66%),
    -moz-linear-gradient( top,
                                                        rgba(255, 255, 255, .25),
                                                        rgba(0,0,0,.2)),
     -moz-linear-gradient( left, #09c, #f44);
}

.css3::-moz-progress-bar,
.php::-moz-progress-bar {
{
    /* Gradient background with Stripes */
    background-image:
    -moz-linear-gradient( 135deg,
                                                     transparent,
                                                     transparent 33%,
                                                     rgba(0,0,0,.1) 33%,
                                                     rgba(0,0,0,.1) 66%,
                                                     transparent 66%),
    -moz-linear-gradient( top,
                                                        rgba(255, 255, 255, .25),
                                                        rgba(0,0,0,.2)),
     -moz-linear-gradient( left, #09c, #ff0);
}

.jquery::-moz-progress-bar,
.node-js::-moz-progress-bar {
    /* Gradient background with Stripes */
    background-image:
    -moz-linear-gradient( 135deg,
                                                     transparent,
                                                     transparent 33%,
                                                     rgba(0,0,0,.1) 33%,
                                                     rgba(0,0,0,.1) 66%,
                                                     transparent 66%),
    -moz-linear-gradient( top,
                                                        rgba(255, 255, 255, .25),
                                                        rgba(0,0,0,.2)),
     -moz-linear-gradient( left, #09c, #690);
}