/* HTML5 File Upload */

.html5fileupload-wrapper {
	.html5fileupload-images-wrapper {
		display: inline-block;

		.file-wrapper {
			margin: 0 20px 20px 0;
		}

		.delete-file {
			color: red;
			font-size: 20px;
			position: absolute;
			top: 7px;
			left: 5px;
			width: 25px;
			height: 25px;
			z-index: 20;
			line-height: 27px;
			cursor: pointer;
			border-radius: 50%;
			background: $whiteColor;
			text-align: center;

			i {
				cursor: pointer;
				margin: 0;
			}
		}
	}

	.file-wrapper,
	.html5fileupload-new-image-wrapper,
	.file {
		width: 180px;
		height: 180px;
		display: inline-block;

		.html5fileupload {
			margin: 0 20px 20px 0;
			background-color: #f7f8f9;
		}

		img,
		.add,
		.add input,
		.html5fileupload {
			width: 100%;
			height: 100%;
			border-radius: 6px;
		}
		.add {
			background-color: #f7f8f9;
		}
		.add:after,
		.html5fileupload:after {
			border: 1px solid #dbdeeb;
			border-radius: 6px;
			background-image: url("../images/media/image-icon.svg");
			background-repeat: no-repeat;
			background-position: 50% 33%;
			background-size: 60px 60px;
			height: 180px;
			width: 180px;
			margin: 0 20px 0 0;
			display: block;
			background-color: transparent;
			padding: 115px 8px 20px 8px;
			font-size: 13px;
			color: $mainTextColor;
			top: 0;
		}
	}

	.file,
	.multiple {
		position: absolute;
		top: -1px;
		left: -1px;
		bottom: 0;
		right: 0;
		background-color: #f7f8f9;
		border: 1px solid #dbdeeb;
		border-radius: 6px;
		width: 181px;
		height: 181px;
	}

}

.cover-uploader-wrapper {
	position: relative;
	min-height: 200px;

	.file-wrapper {
		width: 100%;

		img {
			position: relative;
			z-index: 1;
		}
	}

	.html5fileupload-new-image-wrapper {
		position: absolute;
		left: 0;
	}
}