@import '~dropzone/dist/dropzone';
@import url("~@fancyapps/fancybox/dist/jquery.fancybox.css");

.file-action a{
    padding: 5px;
}


.media-picker-divider {
    border-bottom: 1px solid #e9e9e9;
    margin-bottom: 20px;
}

.single-image-wrapper {
    padding-bottom: 20px;

    h4 {
        font-weight: 500;
        margin-bottom: 10px;
    }
}

.single-image {
	padding: 10px;
	background: #f1f1f1;
	margin-right: 15px;
    display: inline-block;
    border-radius: 3px;
    vertical-align: bottom;

    > .image-holder {
        cursor: default;
        margin: 0;
        border-radius: 3px;
    }
}

.multiple-images-wrapper {
    margin-top: 15px;

    h4 {
        font-weight: 500;
        margin-bottom: 10px;
    }
}

.multiple-images {
	overflow: hidden;
	padding: 10px 10px 0 10px;
	background: #f1f1f1;
	margin-top: 15px;
    border-radius: 3px;
}

.image-holder {
	position: relative;
	float: left;
	height: 125px;
	width: 125px;
	overflow: hidden;
	background: #fff;
	margin: 0 10px 10px 0;
	border: 1px solid #d2d6de;
    border-radius: 3px;
	cursor: move;
    z-index: 0;

    > i {
        position: absolute;
        font-size: 60px;
        color: #d9d9d9;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        z-index: -1;
    }

    > img {
        position: absolute;
        left: 50%;
        top: 50%;
        max-height: 100%;
        max-width: 100%;
        transform: translate(-50%, -50%);
        z-index: 1;
    }

    > .remove-image {
        position: absolute;
        top: -2px;
        right: 4px;
        color: #ffffff;
        padding: 0;
        background: transparent;
        transition: 200ms;
        visibility: hidden;
        opacity: 0;
        font-size: 18px;
        font-family: 'Font Awesome 5 Solid';
        -webkit-text-stroke: 1px #737881;
           -moz-text-stroke: 1px #737881;
            -ms-text-stroke: 1px #737881;
             -o-text-stroke: 1px #737881;
        z-index: 2;

        &:focus {
            border-color: transparent;
            -webkit-box-shadow: none;
                    box-shadow: none;
        }

        &:active {
            -webkit-box-shadow: none;
                    box-shadow: none;
        }

        &::after {
            content: "\f057";
        }
    }
    
    > .remove-pdf {
        position: absolute;
        top: -2px;
        right: 4px;
        color: #ffffff;
        padding: 0;
        background: transparent;
        transition: 200ms;
        visibility: hidden;
        opacity: 0;
        font-size: 18px;
        font-family: 'Font Awesome 5 Solid';
        -webkit-text-stroke: 1px #737881;
           -moz-text-stroke: 1px #737881;
            -ms-text-stroke: 1px #737881;
             -o-text-stroke: 1px #737881;
        z-index: 2;

        &:focus {
            border-color: transparent;
            -webkit-box-shadow: none;
                    box-shadow: none;
        }

        &:active {
            -webkit-box-shadow: none;
                    box-shadow: none;
        }

        &::after {
            content: "\f057";
        }
    }

    &:hover > .remove-image {
        visibility: visible;
        opacity: 1;
    }
    
    &:hover > .remove-pdf {
        visibility: visible;
        opacity: 1;
    }
}

.image-picker > i {
    color: #737881;
}
.avatar-holder { 
    position: relative;
    border: 1px solid #d9d9d9;
    background: #ffffff;
    height: 50px;
    width: 50px;
    border-radius: 3px;
    overflow: hidden !important;

    > {
        i {
            position: absolute;
            font-size: 24px;
            color: #d9d9d9;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        img {
            position: absolute;
            left: 50%;
            top: 50%;
            max-height: 100%;
            max-width: 100%;
            transform: translate(-50%, -50%);
        }
    }
}