/* Field Image */
.content_field_image {
	position: relative; margin-bottom: 1rem; text-align: center;
	border: 1px solid #bbb; border-radius: 3px; background-color: #f8f8f8;
}
.content_field_image .aBrowse {
	display: none; position: absolute; top: 0; right: 0;
	width: 100%; height: 100%; border: 0; background: none !important;
}
.content_field_image:hover .aBrowse {display: block;}
.content_field_image .aBrowse-progress {display: none !important;}
.content_field_image .aBrowse > i {display: none;}
.content_field_image .aBrowse > span {
	display: flex; align-items: center; justify-content: center;
	width: calc(100% + 10px); height: 100%; margin: 0 -5px; padding: 0; border: 0;
	background-color: #00000099; color: #fff; font-size: 1rem;
}
.content_field_image .progress {
	position: absolute; bottom: 8px; left: 5%;
	width: 90%; height: 10px; background-color: #00000044;
	border: 1px solid white; border-radius: 3px;
}
.content_field_image .progress div {
	width: 0; height: 8px; float: left; border-radius: 2px; background-color: orange;
}
.content_field_image .remove {
	position: absolute; top: 8px; left: 5%; cursor: pointer;
	width: 24px; height: 24px; line-height: 24px; text-align: center;
	border: 1px solid white; border-radius: 3px; background-color: #00000044; color: white;
}
.content_field_image .remove:hover {color: red; font-weight: 400;}
.content_field_image .remove.dn {display: none;}
.content_field_image > img {aspect-ratio: 1 / 1; object-fit: contain;}
.content_field_image > img.empty {object-fit: cover;}

/* Field Gallery */
.content_field_gallery {
	margin-bottom: 1rem; background-color: #fff;
	border: 1px solid #cacaca; border-radius: 3px;
}
.content_field_gallery .items {
	display: grid; padding: .5rem;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(auto-fill, minmax(136px, 1fr));
	grid-row-gap: .5rem; grid-column-gap: .5rem;
}
.content_field_gallery .item {
	position: relative; background-color: #f8f8f8;
	border: 1px solid #bbb; border-radius: 3px;
}
.content_field_gallery .item:hover {border-color: #888;}
.content_field_gallery .item .progress {
	position: absolute; bottom: .5rem; left: .5rem;
	width: calc(100% - 1rem); height: 10px; background-color: #00000044;
	border: 1px solid white; border-radius: 3px;
}
.content_field_gallery .item .progress div {
	width: 0; height: 8px; float: left; border-radius: 2px; background-color: orange;
}
.content_field_gallery .item .remove {
	position: absolute; top: .5rem; left: .5rem; cursor: pointer;
	width: 24px; height: 24px; line-height: 24px; text-align: center;
	border: 1px solid white; border-radius: 3px; background-color: #00000044; color: white;
}
.content_field_gallery .item .remove:hover {color: red; font-weight: 400;}
.content_field_gallery .item .remove.dn {display: none;}
.content_field_gallery .item .checkbox {
	position: absolute; top: .5rem; right: .5rem; opacity: .5;
	width: 24px; height: 24px !important; accent-color: #329cc5;
}
.content_field_gallery .item .checkbox:hover,
.content_field_gallery .item .checkbox:checked {opacity: 1;}
.content_field_gallery .item img,
.content_field_gallery .item canvas {
	display: block; width: 100%; height: 100%; aspect-ratio: 1 / 1;
	object-fit: contain; border-radius: 2px; cursor: move;
}