/*! Image Uploader - v1.2.3 - 26/11/2019
 * Copyright (c) 2019 Christian Bayer; Licensed MIT */
@font-face{font-family:'Image Uploader Icons';src:url(/fonts/iu.eot);src:url(/fonts/iu.eot) format('embedded-opentype'),url(/fonts/iu.ttf) format('truetype'),url(/fonts/iu.woff) format('woff'),url(/fonts/iu.svg) format('svg');font-weight:400;font-style:normal}[class*=iui-],[class^=iui-]{font-family:'Image Uploader Icons'!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.iui-close:before{content:"\e900"}.iui-cloud-upload:before{content:"\e901"}.image-uploader{min-height:10rem;border:1px solid #d9d9d9;position:relative}.image-uploader.drag-over{background-color:#f3f3f3}.image-uploader input[type=file]{width:0;height:0;position:absolute;z-index:-1;opacity:0}.image-uploader .upload-text{position:absolute;top:0;right:0;left:0;bottom:0;display:flex;justify-content:center;align-items:center;flex-direction:column}.image-uploader .upload-text i{display:block;font-size:3rem;margin-bottom:.5rem}.image-uploader .upload-text span{display:block}.image-uploader.has-files .upload-text{display:none}.image-uploader .uploaded{padding:.5rem;line-height:0}.image-uploader .uploaded .uploaded-image{display:inline-block;width:calc(16.6666667% - 1rem);padding-bottom:calc(16.6666667% - 1rem);height:0;position:relative;margin:.5rem;background:#f3f3f3;cursor:default}.image-uploader .uploaded .uploaded-image img{width:100%;height:100%;object-fit:cover;position:absolute}.image-uploader .uploaded .uploaded-image .delete-image{display:none;cursor:pointer;position:absolute;top:.2rem;right:.2rem;border-radius:50%;padding:.3rem;line-height:1;background-color:rgba(0,0,0,.5);-webkit-appearance:none;border:none}.image-uploader .uploaded .uploaded-image:hover .delete-image{display:block}.image-uploader .uploaded .uploaded-image .delete-image i{display:block;color:#fff;width:1.4rem;height:1.4rem;font-size:1.4rem;line-height:1.4rem}@media screen and (max-width:1366px){.image-uploader .uploaded .uploaded-image{width:calc(20% - 1rem);padding-bottom:calc(20% - 1rem)}}@media screen and (max-width:992px){.image-uploader .uploaded{padding:.4rem}.image-uploader .uploaded .uploaded-image{width:calc(25% - .8rem);padding-bottom:calc(25% - .4rem);margin:.4rem}}@media screen and (max-width:786px){.image-uploader .uploaded{padding:.3rem}.image-uploader .uploaded .uploaded-image{width:calc(33.3333333333% - .6rem);padding-bottom:calc(33.3333333333% - .3rem);margin:.3rem}}@media screen and (max-width:450px){.image-uploader .uploaded{padding:.2rem}.image-uploader .uploaded .uploaded-image{width:calc(50% - .4rem);padding-bottom:calc(50% - .4rem);margin:.2rem}}


.editimage-uploader {
    min-height: 10rem;
    border: 1px solid #d9d9d9;
    position: relative
}

    .image-uploader.drag-over {
        background-color: #f3f3f3
    }
/*
.editimage-uploader input[type=file] {
    width: 0;
    height: 0;
    position: absolute;
    z-index: -1;
    opacity: 0
}*/

.editimage-uploader .upload-text {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column
}

    .editimage-uploader .upload-text i {
        display: block;
        font-size: 3rem;
        margin-bottom: .5rem
    }

    .editimage-uploader .upload-text span {
        display: block
    }

.editimage-uploader.has-files .upload-text {
    display: none
}

.editimage-uploader .uploaded {
    padding: .5rem;
    line-height: 0
}

    .editimage-uploader .uploaded .uploaded-image {
        display: inline-block;
        width: calc(16.6666667% - 1rem);
        padding-bottom: calc(16.6666667% - 1rem);
        height: 0;
        position: relative;
        margin: .5rem;
        background: #f3f3f3;
        cursor: default
    }

        .editimage-uploader .uploaded .uploaded-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute
        }

        .editimage-uploader .uploaded .uploaded-image .delete-image {
            display: none;
            cursor: pointer;
            position: absolute;
            top: .2rem;
            right: .2rem;
            border-radius: 50%;
            padding: .3rem;
            line-height: 1;
            background-color: rgba(0,0,0,.5);
            -webkit-appearance: none;
            border: none
        }

        .editimage-uploader .uploaded .uploaded-image .delete-images {
        /*    display: none;*/
            cursor: pointer;
            position: absolute;
            bottom: .0rem;
         /*   right: .2rem;*/
        /*    border-radius: 98%;*/
            padding: .3rem;
            line-height: 1;
            background-color: rgba(0,0,0,.5);
            -webkit-appearance: none;
            border: none
        }

        .editimage-uploader .uploaded .uploaded-image:hover .delete-image {
            display: block
        }
        .editimage-uploader .uploaded .uploaded-image:hover .delete-images {
            display: block
        }

        .editimage-uploader .uploaded .uploaded-image .delete-image i {
            display: block;
            color: #fff;
            width: 1.4rem;
            height: 1.4rem;
            font-size: 1.4rem;
            line-height: 1.4rem
        }
        .editimage-uploader .uploaded .uploaded-image .delete-images i {
            display: block;
            color: #fff;
            height: 1.4rem;
            font-size: 1.4rem;
            font-weight: bold;
            line-height: 1.4rem
        }

@media screen and (max-width:1366px) {
    .editimage-uploader .uploaded .uploaded-image {
        width: calc(20% - 1rem);
        padding-bottom: calc(20% - 1rem)
    }
}

@media screen and (max-width:992px) {
    .editimage-uploader .uploaded {
        padding: .4rem
    }

        .editimage-uploader .uploaded .uploaded-image {
            width: calc(25% - .8rem);
            padding-bottom: calc(25% - .4rem);
            margin: .4rem
        }
}

@media screen and (max-width:786px) {
    .editimage-uploader .uploaded {
        padding: .3rem
    }

        .editimage-uploader .uploaded .uploaded-image {
            width: calc(33.3333333333% - .6rem);
            padding-bottom: calc(33.3333333333% - .3rem);
            margin: .3rem
        }
}

@media screen and (max-width:450px) {
    .editimage-uploader .uploaded {
        padding: .2rem
    }

        .editimage-uploader .uploaded .uploaded-image {
            width: calc(50% - .4rem);
            padding-bottom: calc(50% - .4rem);
            margin: .2rem
        }
}