.upload-form
{
    cursor: pointer;
}

.upload-form input
{
    font-size: 200px;

    position: absolute;
    top: 0;
    right: 0;

    display: none; 

    width: 100%;
    height: 100%;
    margin: 0;

    cursor: pointer;

    opacity: 0;

    -ms-filter: 'alpha(opacity=0)';
    direction: ltr;
}

.uploader-inline
{
    border: 2px dashed #9e9e9e;
    border-radius: .215rem;
}

.upload-instructions
{
    font-size: 24px; 

    margin: 150px 20px;

    text-align: center;
}

@media (max-width: 1199px)
{
    .upload-instructions
    {
        font-size: 22px; 

        margin: 120px 20px;
    }
}

@media (max-width: 991px)
{
    .upload-instructions
    {
        font-size: 20px; 

        margin: 100px 20px;
    }
}

@media (max-width: 767px)
{
    .upload-instructions
    {
        font-size: 16px; 

        margin: 60px 20px;
    }
}

.has-file .file-wrap
{
    padding: 20px; 

    border-radius: .215rem;
    background: #fff;
}

.has-file .uploader-inline
{
    display: none;
}

.file-wrap .template-download .file-action-wrap
{
    display: none;

    opacity: 0;
}

.file-wrap .template-download:hover .file-action-wrap
{
    display: block;

    opacity: 1;
}

.file-wrap .other-file img
{
    display: none;
}

.file-wrap .other-file .preview
{
    background-image: url(file-type.png);
    background-repeat: no-repeat;
    background-position: center center;
}

.file-wrap .file-item
{
    position: relative;

    width: 100%;
    margin-bottom: 10px;
    padding: 10px;

    cursor: pointer; 
    -webkit-transition: all .3s;
         -o-transition: all .3s;
            transition: all .3s;

    border: 1px solid transparent;
    border-radius: .215rem;
}

.file-wrap .info-wrap .title
{
    overflow: hidden;

    text-align: center; 
    white-space: nowrap;
    text-overflow: ellipsis;
}

.file-wrap .file-action
{
    position: absolute;
    top: 90px;
    left: 0;

    width: 100%; 

    text-align: center;
}
.file-wrap .file-action-wrap
{
    position: absolute;
    z-index: 1300; 
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    -webkit-transition: all .3s;
         -o-transition: all .3s;
            transition: all .3s;

    background: rgba(0, 0, 0, .6);
}
.file-wrap .file-action .icon
{
    font-size: 22px;

    margin-right: 30px;

    color: #fff;
}
.file-wrap .file-action .icon:last-child
{
    margin-right: 0;
}

.file-wrap .preview
{
    position: relative;

    overflow: hidden;

    width: 100%;
    height: 190px;
    margin-bottom: 10px; 

    -webkit-transition: all .3s;
         -o-transition: all .3s;
            transition: all .3s;

    opacity: .6;
    border-radius: 4px;
    background-color: black;
}
.file-wrap .preview canvas
{
    position: absolute;
    top: 0;
    left: 0; 

    width: 100%;
    height: 100%;
}
.file-wrap .preview img
{
    max-width: 100%;
    height: initial;
}

.file-wrap .progress
{
    position: absolute;
    top: 90px;

    display: none; 

    width: 100%;

    text-align: center;
}

.template-download .preview
{
    opacity: 1;
}
.template-download .preview img
{
    width: 100%;
    height: 100%;
}