body {
    font-family : sans-serif;
}

.button {
    background      : #005f95;
    border          : none;
    border-radius   : 3px;
    color           : white;
    display         : inline-block;
    font-size       : 19px;
    font-weight     : bolder;
    letter-spacing  : 0.02em;
    padding         : 10px 20px;
    text-align      : center;
    text-shadow     : 0px 1px 2px rgba(0, 0, 0, 0.75);
    text-decoration : none;
    text-transform  : uppercase;
    transition      : all 0.2s;
}

.btn:hover {
    background : #4499c9;
}

.btn:active {
    background : #49ADE5;
}

input[type="file"] {
    display : none;
}

.error{
    color: red;
}

#file-drag {
    border        : 2px dashed #555;
    border-radius : 7px;
    color         : #555;
    cursor        : pointer;
    display       : block;
    font-weight   : bold;
    margin        : 1em 0;
    padding       : 3em;
    text-align    : center;
    transition    : background 0.3s, color 0.3s;
}

#file-drag:hover {
    background : #ddd;
}

#file-drag:hover,
#file-drag.hover {
    border-color : #3070A5;
    border-style : solid;
    box-shadow   : inset 0 3px 4px #888;
    color        : #3070A5;
}

#file-progress {
    display : none;
    margin  : 1em auto;
    width   : 100%;
}

#file-upload-btn {
    margin : auto;
}

#file-upload-btn:hover {
    background : #4499c9;
}

#file-upload-form {
    margin : auto; 
}

progress {
    appearance    : none;
    background    : #eee;
    border        : none;
    border-radius : 3px;
    box-shadow    : 0 2px 5px rgba(0, 0, 0, 0.25) inset;
    height        : 30px;
}

progress[value]::-webkit-progress-value {
    background :
        -webkit-linear-gradient(-45deg, 
            transparent 33%,
            rgba(0, 0, 0, .2) 33%, 
            rgba(0,0, 0, .2) 66%,
            transparent 66%),
        -webkit-linear-gradient(right,
            #005f95,
            #07294d);
    background :
        linear-gradient(-45deg, 
            transparent 33%,
            rgba(0, 0, 0, .2) 33%, 
            rgba(0,0, 0, .2) 66%,
            transparent 66%),
        linear-gradient(right,
            #005f95,
            #07294d);
    background-size : 60px 30px, 100% 100%, 100% 100%;
    border-radius   : 3px;
}

progress[value]::-moz-progress-bar {
    background :
    -moz-linear-gradient(-45deg, 
        transparent 33%,
        rgba(0, 0, 0, .2) 33%, 
        rgba(0,0, 0, .2) 66%,
        transparent 66%),
    -moz-linear-gradient(right,
        #005f95,
        #07294d);
    background :
        linear-gradient(-45deg, 
            transparent 33%,
            rgba(0, 0, 0, .2) 33%, 
            rgba(0,0, 0, .2) 66%,
            transparent 66%),
        linear-gradient(right,
            #005f95,
            #07294d);
    background-size : 60px 30px, 100% 100%, 100% 100%;
    border-radius   : 3px;
}

ul {
    list-style-type : none;
    margin          : 0;
    padding         : 0;
}