.file-uploader {
    cursor: pointer;
    position: relative;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

    .file-uploader.zone {
        background-color: #c8dadf;
        outline: 2px dashed #92b0b3;
        outline-offset: -2px;
        -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
        transition: outline-offset .15s ease-in-out, background-color .15s linear;
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
    }

        .file-uploader.zone:hover, .file-uploader.zone.is-dragover {
            outline-offset: -5px;
            outline-color: #c8dadf;
            background-color: #fff;
        }

    .file-uploader .file {
        text-align: center;
        word-break: break-all;
        position: relative;
        border: solid 1px #eaeaea;
        background-color: #fff;
    }

    .file-uploader .process, .file-uploader .error {
        position: absolute;
        background-color: rgba(255,0,0,0.5);
        color: #FFFFFF;
        text-align: center;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .file-uploader.multi {
        padding: 5px;
        min-height: 200px;
    }

        .file-uploader.multi:before {
            content: "";
            display: table;
        }

        .file-uploader.multi::after {
            content: "";
            display: table;
            clear: both;
        }

        .file-uploader.multi .file {
            margin: 5px;
            padding: 5px;
            display: inline-block;
        }

            .file-uploader.multi .file.img {
                width: 150px;
                height: 150px;
                line-height: 150px;
            }

        .file-uploader.multi .process, .file-uploader.multi .error {
            padding: 5px;
        }