/*<meta />*/

model-viewer
{
	width: 100%;
	height: 680px;
	border: 1px solid black;
}

.hotSpot
{
	--min-hotspot-opacity: 0;
	display: none;
	width: 20px;
	height: 20px;
	border-radius: 10px;
	border: none;
	background-color: rgba(255 0 0 / 70%);
	box-sizing: border-box;
	pointer-events: none;
}

.HotspotAnnotationLeft,
.HotspotAnnotationLeftBottom,
.HotspotAnnotationRight,
.HotspotAnnotationRightBottom
{
	white-space: nowrap;
	background-color: #EEE;
	border: 1px #3D60AF solid;
	border-radius: 10px;
	padding: 10px;
}

.HotspotAnnotationLeft
{
	position: absolute;
	transform: translate(-100%, 10px);
}

.HotspotAnnotationLeftBottom
{
	position: absolute;
	transform: translate(-100%, -18px);
	left: -5px;
}

.HotspotAnnotationRight
{
	position: absolute;
	transform: translate(10px, 10px);
}

.HotspotAnnotationRightBottom
{
	position: absolute;
	transform: translate(20px, -18px);
}

@media only screen and (max-width: 768px)
{
	model-viewer
	{
		height: 450px;
	}
}