/*cat: item viewer*/
#itemView {
	width: 100%;
	flex-wrap: wrap;
	padding-top: 1vh;
}
#itemView > * {
	width: 100%;
}
#itemView,
#renderPreview {
	max-width: 640px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

#pointImages .simulateImage {
	position: relative;
	z-index: 0;
	text-align: center;
	display: none;
	overflow: hidden;
	/*touch-action: none;*/
}
#pointImages .simulateImage[data-selected="true"] {
	display: block;
}
.simulateImage .itemImage {
	width: 100%;
	max-width: 100%;
	max-height: 100%;
	position: relative;
	user-select: none;
	-webkit-user-select: none;
	pointer-events: none;
	/* line-height: 0; */

}
.simulateImage .print-area { /*still*/
	display: none;
	position: absolute;
	z-index: 10;
	background-color: transparent;
	border: solid 1px;
	border-color: #ddd;
}

/*svg*/
.itemImage > svg {
	width: 100%;
	max-width: 100%;
	max-height: 100%;
	position: relative;
}
.cls-1 { /*default setting*/
	stroke: #42ff00;
}


#itemView .itemImage svg rect.cls-1 {
	stroke-width: 2px;
}
#itemView[data-disabledguideline="1"] .itemImage svg rect.cls-1 {
	display: none;
	visibility: hidden;
}
#pointImages {
	overflow-x: hidden;
	margin-bottom: 2em;

}
#pointImages .simulateImage {
	transition: all 0.25s ease-in-out;
	transform: translateX(100%);
	opacity: 0.0;
}
#pointImages .simulateImage,
#pointImages .simulateImage * {
	line-height: 0;
}
#pointImages[data-dir="prev"] .simulateImage {
	transform: translateX(-100%);
	
}
#pointImages[data-efx="true"] .simulateImage[data-selected="true"] {
	transform: translateX(0em);
	opacity: 1.0;
}

#rejectedPointImages {
	display: none;
}

/*cat: imarkImage*/
.imarkCanvas {
	position: absolute;
	z-index: 20;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
[data-issvg="1"] .imarkCanvas {
	/*mask: url(#itemImageGuideRect);
	-webkit-mask: url(#itemImageGuideRect);
	overflow: hidden;*/
}
.imarkCanvas {
	-webkit-user-select: none;
}
.imarkCanvas .specified-layer {
	position: absolute;
	pointer-events: none;
	z-index: 500;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.imarkCanvas .specified-layer::before {
	content: "";
	display: block;
	width: 100%;
	padding-top: 100%;
	position: absolute;
	z-index: 502;
	top: 0;
	left: 0;
	pointer-events: none;
	border: solid 2px #fff;

}
.imarkCanvas .specified-layer .layer-cell {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	outline: solid 2px #fff;
}
.imarkCanvas .specified-layer .layer-cell[data-field="mask"] {
	z-index: 50;
}

.imarkImage {
	position: absolute;
	z-index: 320;
	top: 0;
	left: 0;
	width: 15%;
	height: auto;
	max-width: none;
	max-height: none;
	cursor: grab;
	display: none;
	image-rendering: pixelated;
}
.imarkImage[data-dragstat="dragging"] {
	cursor: grabbing;
}
.imarkImage[data-enable=""] {
	
}
.imarkImage[data-enable="true"] {
	
}
@media only screen and (min-width:720px) {
	.imarkImage[data-dragstat=""]:hover {
		cursor: grab;
	}
}

/*cat: pointViewSelector*/
#pointViewSelector {
	position: relative;
	z-index: 0;
	text-align: center;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1.5em;
	-webkit-user-select: none;
}
[data-quantselectedpoint="1"] #pointViewSelector {
	display: none;
}
	#pointViewSelector .current {
		display: inline-block;
		font-size: 1.1em;
		font-weight: 600;
		letter-spacing: 0.2em;
		text-indent: 0.2em;
	}
		#pointViewSelector .prev,
		#pointViewSelector .next {
			display: inline-block;
			background-size: auto 100%;
			width: 30%;
			height: 2.2em;
			opacity: 1.0;
			transition: none;
			transform: scale(1.0); 
		}
		#pointViewSelector .prev {
			background-position-x: left;
			background-image: url(/share/im/nv_simar-return.svg);
		}
		#pointViewSelector .next {
			background-position-x: right;
			background-image: url(/share/im/nv_simar.svg);
		}
		#pointViewSelector .prev:active,
		#pointViewSelector .next:active {
			opacity: 0.3;
			transform: scale(1.1);
		}

#pointViewSelector .current {
	transition: all 0.5s ease-in-out;
	/*transform: translateX(10em);*/
	opacity: 0.0;
}
#pointViewSelector[data-dir="prev"] .current {
	/*transform: translateX(-10em);*/
}
#pointViewSelector[data-efx="true"] .current {
	/*transform: translateX(0em);*/
	opacity: 1.0;
}