/**
 * Practical Layers 3D Viewer Frontend Styles
 * Based on woo-3d-viewer styles
 */

#pl-3dv-viewer {
	float: left;
	position: relative;
	width: 100%;
	background: transparent;
	border: none;
}

.pl-3dv-viewer-wrapper {
	width: 100% !important;
	max-width: 100% !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	position: relative !important;
	min-width: 300px;
}

.pl-3dv-canvas-wrapper {
	position: relative;
	width: 100% !important;
	padding-bottom: 75% !important; /* 4:3 aspect ratio */
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	background: transparent;
	border: none;
	overflow: hidden;
}

#pl-3dv-file-loading {
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(255, 255, 255, 0.9);
	z-index: 10;
}

#pl-3dv-file-loading img {
	width: auto !important;
}

#pl-3dv-cv {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

.pl-3dv-canvas {
	border: none;
	background: transparent;
}

#pl-3dv-model-controls {
	position: absolute;
	width: 100%;
	height: 40px;
	float: left;
	left: 0;
	top: 0;
	background-color: #fff;
	opacity: 0.5;
	z-index: 5;
	transition: opacity 0.3s;
}

#pl-3dv-viewer:hover #pl-3dv-model-controls {
	opacity: 0.9;
}

#pl-3dv-model-controls a {
	display: inline-block;
	border: none;
	text-decoration: none;
	box-shadow: none !important;
	outline: 0;
}

#pl-3dv-model-controls img {
	width: auto !important;
	height: auto !important;
	padding: 3px 0px 3px 3px;
	border: 0;
	vertical-align: baseline;
}

#pl-3dv-model-controls-list {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: block;
}

#pl-3dv-model-controls-list li {
	display: inline-block;
	margin: 3px;
}

#pl-3dv-model-controls-list a:hover {
	opacity: 0.7;
}

/* Responsive */
@media (max-width: 768px) {
	#pl-3dv-viewer {
		max-width: 100%;
	}
	
	#pl-3dv-model-controls {
		opacity: 0.8;
	}
}