:root {
	--red: #CC0541;
	--white: #FFF;
	--white-hover: #DDD;
	--lightgray: #f8f8f8;
	--gray: #777777;
	--darkgray: #222222;
	--black: #000;

	--anim-time: 300ms;
	--anim-time-short: 200ms;
}

.jquery-uploader * {
	box-sizing: border-box;
}

.jquery-uploader {
	display: block;
	box-sizing: border-box;
	position: relative;
}

.jquery-uploader-preview-container {
	padding: 1rem 0;
	height: 100%;
	width: 100%;
}

.jquery-uploader-card {
	vertical-align: middle;
	width: 15vw;
	aspect-ratio: 5/6;

	border: 0.1rem solid var(--darkgray);
	border-radius: 0.5rem;
	display: inline-block;

	box-shadow: none !important;

	overflow: hidden;
}

.jquery-uploader-select-card {
	vertical-align: middle;
	width: 15vw;
	aspect-ratio: 5/6;


	border: 0.1rem solid var(--darkgray);
	border-radius: 0.5rem;

	display: inline-block;

	background-color: var(--lightgray);

	overflow: hidden;

	cursor: pointer;
}

.jquery-uploader-card,
.jquery-uploader-select-card {
	margin-right: 1rem;
	margin-bottom: 1rem;
}

.jquery-uploader-preview-main {
	position: relative;
	height: 100%;
	width: 100%;
}

.jquery-uploader-preview-main > .files_img {
	object-fit: cover;
	height: 100%;
	width: 100%;
	border-radius: 0.5rem;
}
.jquery-uploader-preview-main > .file_other{
	height: 100%;
	width: 100%;
	background-size: contain;
	background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6Y2M9Imh0dHA6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL25zIyIgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIiB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnNvZGlwb2RpPSJodHRwOi8vc29kaXBvZGkuc291cmNlZm9yZ2UubmV0L0RURC9zb2RpcG9kaS0wLmR0ZCIgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiIHZpZXdCb3g9IjAgLTI1NiAxNzkyIDE3OTIiIGlkPSJzdmcyIiB2ZXJzaW9uPSIxLjEiIGlua3NjYXBlOnZlcnNpb249IjAuNDguMy4xIHI5ODg2IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBzb2RpcG9kaTpkb2NuYW1lPSJmaWxlX2FsdF9mb250X2F3ZXNvbWUuc3ZnIj4NCiAgPG1ldGFkYXRhIGlkPSJtZXRhZGF0YTEyIj4NCiAgICA8cmRmOlJERj4NCiAgICAgIDxjYzpXb3JrIHJkZjphYm91dD0iIj4NCiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+DQogICAgICAgIDxkYzp0eXBlIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiLz4NCiAgICAgIDwvY2M6V29yaz4NCiAgICA8L3JkZjpSREY+DQogIDwvbWV0YWRhdGE+DQogIDxkZWZzIGlkPSJkZWZzMTAiLz4NCiAgPHNvZGlwb2RpOm5hbWVkdmlldyBwYWdlY29sb3I9IiNmZmZmZmYiIGJvcmRlcmNvbG9yPSIjNjY2NjY2IiBib3JkZXJvcGFjaXR5PSIxIiBvYmplY3R0b2xlcmFuY2U9IjEwIiBncmlkdG9sZXJhbmNlPSIxMCIgZ3VpZGV0b2xlcmFuY2U9IjEwIiBpbmtzY2FwZTpwYWdlb3BhY2l0eT0iMCIgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIgaW5rc2NhcGU6d2luZG93LXdpZHRoPSI2NDAiIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjQ4MCIgaWQ9Im5hbWVkdmlldzgiIHNob3dncmlkPSJmYWxzZSIgaW5rc2NhcGU6em9vbT0iMC4xMzE2OTY0MyIgaW5rc2NhcGU6Y3g9Ijg5NiIgaW5rc2NhcGU6Y3k9Ijg5NiIgaW5rc2NhcGU6d2luZG93LXg9IjAiIGlua3NjYXBlOndpbmRvdy15PSIyNSIgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMCIgaW5rc2NhcGU6Y3VycmVudC1sYXllcj0ic3ZnMiIvPg0KICA8ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwtMSwyNDIuOTgzMDUsMTI4NS40MjM3KSIgaWQ9Imc0Ij4NCiAgICA8cGF0aCBkPSJtIDEwMjQsMzUyIHYgLTY0IHEgMCwtMTQgLTksLTIzIC05LC05IC0yMywtOSBIIDI4OCBxIC0xNCwwIC0yMyw5IC05LDkgLTksMjMgdiA2NCBxIDAsMTQgOSwyMyA5LDkgMjMsOSBoIDcwNCBxIDE0LDAgMjMsLTkgOSwtOSA5LC0yMyB6IG0gMCwyNTYgdiAtNjQgcSAwLC0xNCAtOSwtMjMgLTksLTkgLTIzLC05IEggMjg4IHEgLTE0LDAgLTIzLDkgLTksOSAtOSwyMyB2IDY0IHEgMCwxNCA5LDIzIDksOSAyMyw5IGggNzA0IHEgMTQsMCAyMywtOSA5LC05IDksLTIzIHogTSAxMjgsMCBIIDExNTIgViA3NjggSCA3MzYgcSAtNDAsMCAtNjgsMjggLTI4LDI4IC0yOCw2OCB2IDQxNiBIIDEyOCBWIDAgeiBtIDY0MCw4OTYgaCAyOTkgTCA3NjgsMTE5NSBWIDg5NiB6IE0gMTI4MCw3NjggViAtMzIgcSAwLC00MCAtMjgsLTY4IC0yOCwtMjggLTY4LC0yOCBIIDk2IHEgLTQwLDAgLTY4LDI4IC0yOCwyOCAtMjgsNjggdiAxMzQ0IHEgMCw0MCAyOCw2OCAyOCwyOCA2OCwyOCBoIDU0NCBxIDQwLDAgODgsLTIwIDQ4LC0yMCA3NiwtNDggbCA0MDgsLTQwOCBxIDI4LC0yOCA0OCwtNzYgMjAsLTQ4IDIwLC04OCB6IiBpZD0icGF0aDYiIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiIHN0eWxlPSJmaWxsOmN1cnJlbnRDb2xvciIvPg0KICA8L2c+DQo8L3N2Zz4=');
	background-repeat: no-repeat;
	background-position: center center;
}

.jquery-uploader-select {
	position: relative;
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.jquery-uploader-select > .upload-button {
	color: var(--semigray);
	font-weight: 500;
}

.jquery-uploader-select > .upload-button * {
	display: none;
}

.jquery-uploader-select > .upload-button::after {
	content: "+";

	font-size: 4rem;
	line-height: 2rem;
}

.jquery-uploader-preview-action {
	position: absolute;
	text-align: center;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 2;
	opacity: 0;
	background-color: rgba(0, 0, 0, 0.6);
}

.jquery-uploader-preview-action:hover {
	opacity: 100;
}

.jquery-uploader-preview-action > ul {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

.jquery-uploader-preview-action > ul > li {
	cursor: pointer;
	width: 100%;
	height: 100%;
	font-size: 2.5rem;
	font-weight: 500;
}

.jquery-uploader-preview-action > ul > li:after {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	content: "X";
	align-items: center;
	display: flex;
	justify-content: center;
	color: var(--white);
}

.jquery-uploader-preview-action > ul > li * {
	display: none;
}

.jquery-uploader-preview-progress {
	position: absolute;
	background-color: rgba(0, 0, 0, 0.2);
	z-index: 3;
	width: 100%;
	height: 100%;
}

.jquery-uploader-preview-progress > .progress-mask {
	position: absolute;
	top: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
}

.jquery-uploader-preview-progress > .progress-loading {
	display: flex;
	justify-content: center;
	height: 100%;
	align-items: center;
}

.jquery-uploader-preview-progress > .progress-loading > i {
	color: white;
}