/*! Image Uploader - v1.2.3 - 26/11/2019
 * Copyright (c) 2019 Christian Bayer; Licensed MIT */

.iui-close:before ,
.iui-cloud-upload:before {
	content: "";
	background: transparent none no-repeat center center;
	background-size: contain;
	display: block;
}

/* Icon Close */
.iui-close:before {
	background-image: url('data:image/png;base64,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');
	width: 2rem;
	height: 2rem;
	background-color: #fff;
	border-radius: 50%;
}

/* Icon Cloud Upload */
.iui-cloud-upload:before {
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAABPRJREFUeF7tnburXUUUh79bWNtYCDYKgQiC+gdYqASLFJJ4jSK+NaiJJmpEDRJiogSJik98Rk0wJkTBmEZTiI8mvYWdDyyEENII6RQxrMvZcjzXc/aa2XPWXrPPGrjNvWtmfuv37dfs2XNniSiuHFhypSbEEECcHQQBJIA4c8CZnDhDAogzB5zJiTMkgDhzwJmcOEMCiDMHnMmJM6QyIJcCVwNXOdNdq5wfgR+AX6YlMO0MeQlYBi6rNXPnun8FTgKPTOqcBHIl8ClwufOEhiLvNHD/CM5KTuNAtgFvDCXTyvK4G/h4HMga4KfKkhia3IuBM80Z8g1w/dAyrCyfw8BdAmQD8EVl4ocqd1mA7AKeH2qGleW1T4B8DtxUmfChyv1KgPwOXDLUDCvL67QA+Uch+n3gQUVchEx34GXgiTaDtED2AHvbGou/z3TgWuC7No8CSJtD5f4eQMp5WaSlAFLExnKNBJByXhZpKYAUsbFcIy6AXACsBf4Gfgb+KpdfdS31CmQz8DBwBSBQpPwJyIyZzLe8WJ2d3QX3BuQgcE+L/lPANd1zrKqFXoCcBS5S2vTbgk0RmwP5ELhPCaMJe3qBLl+mQNYBXyfCaMJv6FA3s8teqpkC2QK8nZnm48BrmXVzq8k9TuaxXwdO5DaSWM8UiCS2PVFgE/4e8FBm3Zxq8pR3y1jFz4BbcxpKrGMKRN5iSoc55XvgupyKGXWOTTFffn9bRnspVUyB1HCGHG0x/QhwR4rDibGmQLzfQz4BblcYuPLlhyIuJ8QUiOenLPkA7c4EBw8B9ybEa0NNgYgoj+MQMVeeplLLR6NPPFPrzYo3ByJiPI3UxdQuR/oB4IGCRHoBIvo9vMv6oNAR/i4g98cSpTcgIr7Pt71yZEv/pYoMeOXNddfSK5BGvPV8iAwyS15mmjze7DDwbdpwAaTrUZVS/505j/hlrPVYiqCJ2IUC8hawtYNZ2qqvAju0wYsKRC4nq5aGZZqmqSZfID6pCVxEILLiS1Z+WReZgpa5nJQy+EuWvLJ/NMWRwrEvAM8ktOkOyI3AU6MvT2SssrKmLrO8Asg8St9l32h9jUaHKyCbAJl3GC+5H3CrviLXOFQo5jngWUVbboD8H4xGfyoUuXbn3FAVfnUKkfkcmdeZVVwAmQUjFcr+0SWvk3NzqlwFEA0MLRS5ge6ck5klmnUPJAVGGxS5caY8zZQwOLUN10ByYEyDIquDZZWw9+IWSBcYk1BkCd1u7yRG+lwCUT1FKA2Wpy/5qaUMHkgtIBqdAcQZsQASQNrXqZe8hzjzu1VOnCGtFtkGBBBbv1t7CyCtFtkGBBBbv1t7cwtEMy/Qml2FAfJWoYrX7xV6OzfJqqfQ+G9Ac/N/VcMBxM5rVU8BRGWTXVAAsfNa1VMAUdlkFxRA7LxW9RRAVDbZBRUFMq+FkHZ29N+TDJpbZ0FlHPIHcKFCb9tIVNHEQodo/rHCOQHyJbB+oa3yk/y3AkR1KvnRPGgl+wXIRuD4oNOsJ7mbY0MXP7D+3dBFJMWWR/2D+c+WRyInNgXrD8qqTcEaKbFtni2UmdvmjUuJjSXnC0a9seSkjNh6tSyY7K1Xy8qI1tQOxG7RaqtsAgOIjc/qXgKI2iqbwABi47O6lwCitsomMIDY+KzuJYCorbIJDCA2Pqt7CSBqq2wCA4iNz+peAojaKpvA8+thUjc5LcEPAAAAAElFTkSuQmCC');
	width: 3rem;
	height: 3rem;
}

/* Base style */
.image-uploader {
	min-height: 10rem;
	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 {
	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;
	text-align: center;
}

/* Hide the text if there is at least one uploaded image */
.image-uploader.has-files .upload-text {
	display: none;
}

/* Uploaded images container */
.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;
}

/* Delete image button */
.image-uploader .uploaded .uploaded-image .delete-image {
	display: none;
	cursor: pointer;
	position: absolute;
	top: .2rem;
	right: .2rem;
	padding: 0;
	line-height: 1;
	-webkit-appearance: none;
	border: none;
	border-radius: 50%;
	overflow: hidden;
}

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

@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;
	}
}