/* Base container */
.dce-posts-container.dce-skin-3d .dce-post-item {
	display: flex;
	word-break: break-word;
}

/* 3D trace element */
.dce-3d-trace {
	position: absolute;
	top: 10px;
	left: 10px;
	background-color: #f5f5f5;
	border: 1px solid #ccc;
	padding: 8px 15px;
	min-width: 100px;
}

/* Navigation */
.dce-3d-navigation {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.dce-3d-navigation .dce-3d-arrow {
	display: contents;
	padding: 10px 20px;
	font-size: 25px;
	transition: transform 0.5s ease-in-out;
	-webkit-transition: transform 0.5s ease-in-out;
}

.dce-3d-navigation .dce-3d-prev,
.dce-3d-navigation .dce-3d-next {
	cursor: pointer;
	font-size: 25px;
}

.dce-3d-navigation .dce-3d-prev {
	align-self: flex-start;
	transform: translateX(-100px);
}

.dce-3d-navigation .dce-3d-next {
	align-self: flex-end;
	transform: translateX(100px);
}

/* Scene container */
.dce-posts-container.dce-skin-3d #dce-scene-3d-container > div {
	min-height: 100vh;
	cursor: grab;
}

.dce-posts-container.dce-skin-3d #dce-scene-3d-container > div.grab {
	cursor: grabbing;
}

.dce-posts-container.dce-skin-3d #dce-scene-3d-container > div.hide-cursor {
	cursor: default;
}

/* 3D Element */
.dce-posts-container.dce-skin-3d .dce-3d-element {
	width: 320px;
	height: auto;
	cursor: pointer;
	will-change: filter;
	/* Performance optimizations */
	backface-visibility: hidden;
	perspective: 1000;
	transform: translate3d(0,0,0);
	transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
	-webkit-transform: translate3d(0,0,0);
	-webkit-transform: translateZ(0);
}

/* Quit button */
.dce-posts-container.dce-skin-3d .dce-3d-quit {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 0;
	font-size: 30px;
	transform: translate(-50%,-50%) scale(0);
	display: none;
	pointer-events: none;
}

.dce-posts-container.dce-skin-3d.show-quit:hover .dce-3d-quit {
	display: block;
	transform: translate(-50%,-50%) scale(1);
}

/* Link area */
.dce-posts-container.dce-skin-3d .dce-3d-linkarea {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
}

/* Utility classes */
.dce-3d-wrapper-hidden {
	display: none;
}

.dce-pancam-item.dce-3d-navigation .dce-3d-arrow {
	transform: translateX(0);
}

.dce-posts-container.dce-skin-3d .arrow-icon {
	font-size: 25px;
	width: 25px;
	height: 25px;
}
#dce-scene-3d-container > div:focus {
	outline: none;
}
#dce-scene-3d-container > div:focus-visible {
	outline: none;
}