.container {
	flex-grow: 1;
}

.imageContent {
	overflow: hidden;
}

.imageBorder {
	border-color: $blue-medium;
	border-width: 2px;
	border-style: solid;
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
}

.retryIcon {
	width: 80px;
	height: 80px;
	justify-content: center;
	align-items: center;
}

.customRetryIcon {
	width: 24px;
	height: 24px;
}

.iconRetry {
	fill: #fff;
	width: 100%;
	height: 100%;
}

.iconPlaceholder {
	fill: $gray-dark;
	width: 100%;
	height: 100%;
}

.iconPlaceholderDark {
	fill: $white;
}

.iconUpload {
	fill: $gray-lighten-20;
	width: 100%;
	height: 100%;
}

.iconUploadDark {
	fill: $gray-70;
}

.imageContainerUpload {
	justify-content: center;
	align-items: center;
	background-color: $gray-light;
	height: 200px;
}

.imageContainerUploadDark {
	background-color: $gray-90;
}

.imageContainerUploadWithFocalpoint {
	height: 100%;
}

.imageUploadingIconContainer {
	width: 40px;
	height: 40px;
	justify-content: center;
	align-items: center;
}

.imageContainer {
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
	background-color: $gray-lighten-30;
	position: absolute;
}

.uploadFailedText {
	color: #fff;
	font-size: 14;
	margin-top: 5;
}

.editContainer {
	width: 44px;
	height: 44px;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
}

.edit {
	width: 30px;
	height: 30px;
	background-color: $gray-dark;
	border-radius: 22px;
	position: absolute;
	top: 5px;
	right: 5px;
}

.iconCustomise {
	fill: #fff;
	position: absolute;
	top: 7px;
	left: 7px;
}

.retryContainer {
	flex: 1;
	background-color: "rgba(0, 0, 0, 0.5)";
}

.focalPointContainer {
	height: 100%;
}

.focalPoint {
	position: absolute;
	width: 100%;
}

.focalPointContent {
	position: absolute;
	width: 100%;
	height: 100%;
}

.wide {
	width: 100%;
}