/*! Image Uploader - v1.0.0 - 15/07/2019
 * Copyright (c) 2019 Christian Bayer; Licensed MIT */

/* Base style */
.image-uploader {
    min-height: 150px;
    /* border: 1px solid #d9d9d9; */
    position: relative;
}

/* Style on hover */
.image-uploader.drag-over {
    background-color: #f3f3f3;
}

/* Hide the file input */
.image-uploader input[type="file"] {
    width: 0;
    height: 0;
    position: absolute;
    z-index: -1;
    opacity: 0;
}

/* Text container */
.image-uploader .upload-text {
    background: #ffffff;
    border: 2px dashed #c5b358;
    text-align: center;
    font-size: 30px;
    color: #c5b358;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    width: calc(33.3333333333% - .6rem);
    height: 150px;
    margin: .3rem;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    float: left;
    max-width: 290px;
    margin-left: 0;
    margin-right: 0.6rem;
    position: relative;
}

.image-uploader .upload-text i {
    font-size: 3rem;
}

.image-uploader .upload-text span {
    display: block;
    font-size: 14px;
}

.image-uploader .uploaded .uploaded-image {
    position: relative;
    display: inline-block;
    padding: 0;
    vertical-align: top;
    width: calc(33.3333333333% - .6rem);
    height: 150px;
    margin: .3rem;
    top: 0;
    border: 1px solid #ced4da;
    max-width: 290px;
    margin-left: 0;
    margin-right: 0.6rem;
}

.image-uploader .uploaded .uploaded-image img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    display: block;
}

/* Delete image button */
.image-uploader .uploaded .uploaded-image .delete-image {
    padding: 10px 17px;
    right: 5px;
    top: 5px;
    opacity: 1;
    z-index: 999;
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
    position: absolute;
    color: #beab51;
}


.image-uploader .uploaded .uploaded-image .delete-image:hover {
    color: #C10000
}

.image-uploader .uploaded .uploaded-image:hover .delete-image {
    display: block;
}

.image-uploader .uploaded .uploaded-image .delete-image i {
    text-shadow: 0 1px 0 #fff;
}


@media screen and (max-width: 1366px) {
    .image-uploader .uploaded {
        padding: .3rem;
    }

    .image-uploader .uploaded .uploaded-image {
        width: calc(33.3333333333% - .6rem);
        margin: .3rem;
        height: 150px;
    }

    .image-uploader .upload-text{
        width: calc(33.3333333333% - .6rem);
        margin: .3rem;
        height: 150px;
    }

}

@media screen and (max-width: 786px) {
    .image-uploader .uploaded {
        padding: .2rem;
    }

    .image-uploader .uploaded .uploaded-image {
        width: calc(50% - .4rem);
        margin: .2rem;
        height: 150px;
    }

    .image-uploader .upload-text{
        width: calc(50% - .4rem);
        margin: .2rem;
        height: 150px;
    }


}

@media screen and (max-width: 450px) {
    .image-uploader .uploaded {
        padding: .2rem;
    }

    .image-uploader .uploaded .uploaded-image {
        width: calc(50% - .4rem);
        margin: .2rem;
        height: 150px;
    }

    .image-uploader .upload-text{
        width: calc(50% - .4rem);
        margin: .2rem;
        height: 150px;
    }


}
