/*
  Author    : Tomaz Dragar
  Mail      : <tomaz@dragar.net>
  Homepage  : http://www.dragar.net
*/

body:has(#preview .jcrop-holder) {
	overflow: hidden;
}

#fileInput {
	width:0;
	height:0;
	display: none;
	overflow:hidden;
}

#modal {
	width: 100vw;
	height: 100vh;
	padding: 30px 0 80px;
	display: none;
	position: fixed;
	top: 0px;
	left: 0px;
	background-color: #000000cc;
	overflow: hidden;
	overflow-y: auto;
	z-index: 999;
}

#preview {
	display: none;
	position: relative;
	left: 50% !important;
	font-size: 0px;
	line-height: 0px;
	border: 4px solid #A5A2A2;
	border-radius: 4px;
	z-index: 1000;
}

#preview .buttons {
	display: flex;
	gap: 10px;
	position: absolute;
	bottom: -50px;
	left: 50%;
	transform: translateX(-50%);
}

#preview .buttons .ok,
#preview .buttons .cancel {
	width: 75px;
	height: 30px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	line-height: 0px;
	font-size: 14px;
	cursor: pointer;
	box-shadow: 0 10px 17px -12px rgb(255 255 255 / 75%);
}

#preview .buttons .ok {
	background: #007bff;
}

#preview .buttons .ok:hover {
	background: #0069d9;
}

#preview .buttons .cancel {
	background: #dc3545;
}

#preview .buttons .cancel:hover {
	background: #c82333
}

#preview .jcrop-keymgr {
	display: none !important;
}

.image-cropper {
	--prev-width: calc(var(--prev-width) ? var(--prev-width) : 360);
	--prev-scale: calc(min(var(--prev-width), 200) / var(--cropper-width));
	width: calc(min(var(--prev-width), 200) * 1px);
	padding-top: calc(var(--cropper-height) * var(--prev-scale) * 1px);
}

.cropper {
	--top-pos: calc((var(--cropper-height) - var(--cropper-height) * var(--prev-scale)) / 2 * 1px);
	--left-pos: calc((var(--cropper-width) - var(--cropper-width) * var(--prev-scale)) / 2 * 1px);
	width: calc(var(--cropper-width) * 1px);
	height: calc(var(--cropper-height) * 1px);
	display: flex;
	align-items: center;
	scale: var(--prev-scale);
	border: 1px solid #c7c7c7;
	border-radius: 22px;
	overflow: hidden;
	background-color: #d5d5d5;
	cursor: pointer;
	position: absolute;
    top: calc(0px - var(--top-pos));
    left: calc(0px - var(--left-pos));
}

@media (max-width: 700px) {
	#preview {
		left: 50% !important;
		transform: translateY(-50%) translateX(-50%);
	}
}

@media (min-width: 480px) {
	.image-cropper {
		--prev-scale: calc(var(--prev-width) / var(--cropper-width));
		width: calc(var(--prev-width) * 1px);
	}
}