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

    .file-uploader.zone.drag {
        min-height: 200px;
        padding: 5px;
        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.drag:hover, .file-uploader.zone.drag.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 .file .del {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #000;
            top: -15px;
            right: -15px;
            color: #ffffff;
            position: absolute;
            display: none;
            z-index: 100;
        }

        .file-uploader .file:hover .del {
            display: block;
        }

        .file-uploader .file .del i {
            font-size: 20px;
            line-height: 30px;
            vertical-align: top;
        }

    .file-uploader .process, .file-uploader div.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;
        font-size: 13px;
        line-height: 1.2;
    }

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

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

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

        .file-uploader.zone.multi .file.img {
            width: 150px;
            height: 150px;
            line-height: 150px;
            background-size: contain;
            background-position: center center;
            background-repeat: no-repeat;
        }

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

    .file-uploader.form .preview {
        padding-top: 5px;
    }

        .file-uploader.form .preview .file.img {
            width: 150px;
            height: 150px;
            line-height: 150px;
            background-size: contain;
            background-position: center center;
            background-repeat: no-repeat;
        }