.dropzone{
    cursor: pointer;
    border: 4px dashed @gray-lighter;
    padding: 70px;
    margin: 20px 0;

    &.dz-drag-hover{
        border-color: @brand-primary;
    }

    .dz-message {     
        text-align: center;

        span{
            font-size: @font-size-large;
            display: block;
            color: @gray;

            span{
                display: block;
                font-weight: bold;
                margin: 10px 0;
                font-size: @font-size-small;
            }

            button{
                span{
                    display: inline-block;
                    font-size: @font-size-base;
                    margin: 0;
                    color: inherit;
                }
            }
        }
    }

    .dz-error{
        .alert();
        .alert-danger();
        margin: 10px 0;
    }

    .dz-preview,
    .dropzone-previews .dz-preview {
        background: rgba(255,255,255,0.8);
        position: relative;
        display: inline-block;
        margin: 17px;
        vertical-align: top;
        border: 1px solid #acacac;
        padding: 6px 6px 6px 6px;
    }
    .dz-preview.dz-file-preview [data-dz-thumbnail],
    .dropzone-previews .dz-preview.dz-file-preview [data-dz-thumbnail] {
        display: none;
    }
    .dz-preview .dz-details,
    .dropzone-previews .dz-preview .dz-details {
        width: 100px;
        height: 100px;
        position: relative;
        background: #ebebeb;
        padding: 5px;
        margin-bottom: 22px;
    }
    .dz-preview .dz-details .dz-filename,
    .dropzone-previews .dz-preview .dz-details .dz-filename {
        overflow: hidden;
        height: 100%;
    }
    .dz-preview .dz-details img,
    .dropzone-previews .dz-preview .dz-details img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        height: 100px;
    }
    .dz-preview .dz-details .dz-size,
    .dropzone-previews .dz-preview .dz-details .dz-size {
        position: absolute;
        bottom: -28px;
        left: 3px;
        height: 28px;
        line-height: 28px;
    }
    .dz-preview.dz-error .dz-error-mark,
    .dropzone-previews .dz-preview.dz-error .dz-error-mark {
        display: block;
    }
    .dz-preview.dz-success .dz-success-mark,
    .dropzone-previews .dz-preview.dz-success .dz-success-mark {
        display: block;
    }
    .dz-preview:hover .dz-details img,
    .dropzone-previews .dz-preview:hover .dz-details img {
        display: none;
    }
    .dz-preview .dz-success-mark,
    .dropzone-previews .dz-preview .dz-success-mark,
    .dz-preview .dz-error-mark,
    .dropzone-previews .dz-preview .dz-error-mark {
        display: none;
        position: absolute;
        width: 40px;
        height: 40px;
        font-size: 30px;
        text-align: center;
        right: -10px;
        top: -10px;
    }
    .dz-preview .dz-success-mark,
    .dropzone-previews .dz-preview .dz-success-mark {
        color: #8cc657;
    }
    .dz-preview .dz-error-mark,
    .dropzone-previews .dz-preview .dz-error-mark {
        color: #ee162d;
    }
    .dz-preview .dz-progress,
    .dropzone-previews .dz-preview .dz-progress {
        position: absolute;
        top: 100px;
        left: 6px;
        right: 6px;
        height: 6px;
        background: #d7d7d7;
        display: none;
    }
    .dz-preview .dz-progress .dz-upload,
    .dropzone-previews .dz-preview .dz-progress .dz-upload {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 0%;
        background-color: #8cc657;
    }
    .dz-preview.dz-processing .dz-progress,
    .dropzone-previews .dz-preview.dz-processing .dz-progress {
        display: block;
    }
    .dz-preview .dz-error-message,
    .dropzone-previews .dz-preview .dz-error-message {
        display: none;
        position: absolute;
        top: -5px;
        left: -20px;
        background: rgba(245,245,245,0.8);
        padding: 8px 10px;
        color: #800;
        min-width: 140px;
        max-width: 500px;
        z-index: 500;
    }
    .dz-preview:hover.dz-error .dz-error-message,
    .dropzone-previews .dz-preview:hover.dz-error .dz-error-message {
        display: block;
    }
}