:root { --success-clr:#000; --error-clr:#f36; --avatar-placeholder:url(https://assets.vrcloud.com/images/placeholder/users.png); --ld-anim-image:url(https://assets.vrcloud.com/images/ld_anim_1.svg); }

::placeholder { color: inherit; opacity: 0.4;  }
::-webkit-input-placeholder { color: inherit; opacity: 0.4;  }
::-ms-input-placeholder { color: inherit; opacity: 0.4;  }

html,
body {
	min-width: 320px;
	min-height: 320px;
	height: 100%; 
	background-color: #000;
	overflow: hidden;
	font-family: 'Montserrat', 'Avenir Next', 'Avenir', 'Leelawadee UI', 'Century Gothic',  system-ui, sans-serif;
	line-height: 1.3;
}

video::-internal-media-controls-download-button { display:none !important; }
video::-webkit-media-controls-enclosure { overflow:hidden !important;}
video::-webkit-media-controls-panel { width:calc(100% + 30px) !important;}

input:focus,
select:focus,
textarea:focus {
	outline: none;
}

#pano{
	position: fixed;
	inset: 0px;
	padding: 0px;
	margin: 0px;
	z-index: 0;
}

#preloader-splash,
#progress.loading-progress {
	position: fixed;
	inset: 0px;
	background-position: center;
	background-repeat: no-repeat;
}

#preloader-splash {
	z-index:9999999;
}

#progress.loading-progress {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-size: 1.3rem; 
	pointer-events: none;
	z-index: 1;
}

#preloader-splash::before,
#progress.loading-progress::before {
	content: "";
	position: absolute;
	top: 50%; 
	left: 50%;
	margin-left:-60px;
	margin-top:-60px;
	width: 120px;
	height: 120px;
	background-size: cover;
	z-index: -1;
	animation: rotateBackground 1s linear infinite;
	will-change: transform;
	backface-visibility: hidden;
}

@keyframes rotateBackground {
	from { transform: rotate(0deg) translateZ(0); }
	to { transform: rotate(360deg) translateZ(0); }
}

#map-container {		
	pointer-events: auto;		
	display: block;
	width: fit-content;
}

.map[map-id] {
	position: relative;
	filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.5));
	display: none;
	margin-bottom: 6px;
	order: 1;
	margin: 0 auto;
}

.map[map-id] > canvas {
	display: block;	
	position: absolute;
	top: 0;
	left: 0;
}

.map[map-id] > canvas[data-layer="overlay"] {
	z-index: 1;
}

#tc-ol {
	position: fixed;		
	pointer-events: none;
	z-index: 1;
	top: -60px;
	left: 50%;
	margin-left: -300px;
	width: 600px;
	height: 120px;
	background: radial-gradient( ellipse at top, rgba(0, 0, 0, 1) 15%, transparent 70%, transparent 0% 100% );
	opacity: 0;
	transition: opacity 0.4s ease;
}		


#map-hide,
#map-show {
	display: flex;	
	position: fixed;		
	bottom: 20px;
	align-items: center;	
	color: #ffffff;
	background-color: #000;
	border-radius: 9999px;				
	overflow: hidden;
	z-index: 1;
	transition:
		left 0.4s ease-in-out,
		transform 0.4s ease,		
		opacity 0.4s ease,
		visibility 0s linear 0.4s;			
	cursor: pointer;
	pointer-events: none;
	visibility: hidden;
	opacity: 0;
}

#map-hide {
	left: -40px;
	justify-content: right;
}

#map-hide.dvis {
	transition:
		left 0.4s ease-in-out,
		transform 0.4s ease,		
		opacity 0.4s ease;
	left: -20px;	
	pointer-events: auto;
	visibility: visible;
	opacity: 1;
}

#map-hide > div {
	width: 24px;
	text-align: center;
}

#map-show {
	transform: rotate(180deg);
	left: 20px;
	width: 60px;
	height: 60px;
	font-size: 26px;
}

#map-show.dvis {
	transition:
		transform 0.4s ease,		
		opacity 0.4s ease;	
	transform: rotate(0deg);
	pointer-events: auto;
	visibility: visible;
	opacity: 1;
}

#map-show > div {
	width: 60px;
	text-align: center;
}

#map-select {
	width: 100%;
	max-width: 160px;	
	min-width: 140px;
	box-sizing: border-box;
	align-self: center;
	background-color: #000;
	border-radius: 20px;
	height: 30px;
	line-height: 20px;
	color: #fff;
	padding: 5px 10px;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 0.85rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
	text-align-last: center;
	transition: transform 0.4s ease;
	border: none !important;
	pointer-events: auto;
	cursor: pointer;
	margin: 0 auto;
}

#map-select-wrap {

	margin-top: 8px;
	text-align: center;
}

#map-select {
	text-align: center;
	text-align: center;
	text-align-last: center !important;
	-moz-text-align-last: center;
}

#map-select option{
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
    text-align: center;
    text-align-last: center;
    -moz-text-align-last: center;
}

#map-menu {
	position: relative;
	height: 0px;
	width: 100%;
	overflow: visible;
	display: none;
	max-width: 160px;
	margin: 0 auto;
}

#map-menu > div {
	position: absolute;
	bottom: 10px;
	left: 0px;
	right: 0px;
	background-color: #000;
	border-radius: 5px;
	padding: 5px 0px;
}

#map-menu > div > div[map] {
	color: #fff;
	line-height: 20px;
	text-align: center;
	font-size: 0.85rem;
	padding: 5px 0px;
	cursor: pointer;
}

#ctrl-bar {
	display: flex;	
	position: fixed;
	flex-direction: row;
	align-items: flex-end;
	gap: 10px;
	z-index: 1;
	transition: 
		right 0.4s ease,
		opacity 0.4s ease,
		visibility 0s linear 0.4s;
	pointer-events: none;
	visibility: hidden;	
	opacity: 0;
	bottom: 20px;
	right: var(--ctrl-width, -310px);
}

#ctrl-bar.dvis {
	transition: 
		right 0.4s ease,
		opacity 0.4s ease;
	right: 30px;	
	pointer-events: auto;
	visibility: visible;
	opacity: 1;
}

#ctrl-bar > div {
	display: flex;
	align-items: center;
	justify-content: center;			
	width: 40px;
	height: 40px;
	border-radius: 20px;
	background: var(--menu-bg-color);
	color: var(--menu-icon-color);		
	cursor: pointer;
	transition: transform 0.4s ease;
	box-shadow: 0px 0px 2px rgba(0,0,0,0.2);
	font-size: 20px;
}

#ctrl-bar > #ctrl-thumbs {
	display: none;
	width: 60px;
	height: 60px;
	border-radius: 30px;
	font-size: 30px;
}	

#ctrl-bar > #ctrl-maps,
#ctrl-bar > #ctrl-vr,
#ctrl-bar > #ctrl-info,
#ctrl-bar > #ctrl-chat,
#ctrl-bar > #ctrl-seller {	
	display: none;
}

#ctrl-bar > #ctrl-next,
#ctrl-bar > #ctrl-prev {	
	font-size: 28px;
}

#ctrl-bar > #ctrl-next > div {
	padding-left: 2px;
}

#ctrl-bar > #ctrl-prev > div {
	padding-right: 2px;
}

#ctrl-bar > #ctrl-thumbs > div {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	font-size: 8px;
	line-height: 9px;
	gap: 2px;
}

#ctrl-hide,		
#map-hide {
	width: 40px;
	height: 40px;
	font-size: 18px; 
}



#ctrl-hide,		
#ctrl-show {	
	display: flex;		
	position: fixed;				
	bottom: 20px;
	align-items: center;
	color: #ffffff;
	background-color: #000;			
	border-radius: 9999px;				
	overflow: hidden;
	z-index: 1;
	cursor: pointer;
	pointer-events: auto;
	visibility: hidden;		
	opacity: 0;
}
	
#ctrl-show {
	right: 20px;
	width: 60px;
	height: 60px;
	font-size: 26px;
	transform: rotate(180deg);
	justify-content: center;
	transition:	
		transform 0.4s ease,
		opacity 0.4s ease,
		visibility 0s linear 0.4s;
}

#ctrl-hide {	
	right: -40px;
	justify-content: left;	
	transition:
		right 0.4s ease,	
		opacity 0.4s ease,
		visibility 0s linear 0.4s;
}

#ctrl-hide.dvis {
	transition:
		right 0.4s ease,	
		transform 0.4s ease,
		opacity 0.4s ease;
	right: -20px;
	pointer-events: auto;	
	visibility: visible;
	opacity: 1;
}

#ctrl-hide > div {
	width: 24px;
	text-align: center;
}

#ctrl-show.dvis {
	transition:	
		transform 0.4s ease,
		opacity 0.4s ease;
	transform: rotate(0deg);
	pointer-events: auto;
	visibility: visible;
	opacity: 1;	
}

#ctrl-hide:hover,
#ctrl-bar > div:hover,
#map-select:hover,
#map-hide:hover {
	transform: scale(1.1);
}

#map-show.dvis.ctrlHS:hover,
#ctrl-show.dvis.ctrlHS:hover {
	transform: scale(1.1);
}

#ctrl-show > div {
	width: 60px;
	line-height: 60px;
	text-align: center;
}

#scene-title {
	position: fixed;
	top: 10px;
	left: 50%;
	margin-left: -120px;
	width: 240px;
	z-index: 1;
	color: #fff;
	text-align: center;
	font-weight: normal;
	font-size: 1.3rem;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	opacity: 0;
	transition: opacity 0.4s ease;
}

#scene-thumbs {
	display: block;		
	position: fixed;	
	bottom: 0px;
	left: 0px;
	right: 0px;
	min-width: 320px;
	z-index: 0;
	transition:
		opacity 0.4s ease,
		visibility 0s linear 0.4s;
	pointer-events: none;
	visibility: hidden;
	opacity: 0;
}

#scene-thumbs.dvis {
	transition: opacity 0.4s ease;
	pointer-events: auto;
	visibility: visible;
	opacity: 1;
}

#thumbs-ol {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index:-1;				
	background: linear-gradient(to bottom, transparent 30%, rgba(0,0,0,0.7) 100%);
}	

#thumbs-inner {
	display: flex;		
	justify-content: center;				
}

body[maps] #thumbs-inner {
	padding: 13px 80px 13px 80px;
}			

body:not([maps]) #thumbs-inner {
	padding: 13px 80px 13px 0px;
}

#thumbs-inner > div {	
	display: flex;
	flex-direction: row;	
	gap: 0px;
	overflow: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	pointer-events: auto;
	cursor: grab;				
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;				
	mask-repeat: no-repeat;
	mask-size: 100% 100%;	
	padding: 0px 20px;
}

body[maps] #thumbs-inner > div {
	-webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 5%, rgba(0,0,0,1) 95%, rgba(0,0,0,0) 100%);
	mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 5%, rgba(0,0,0,1) 95%, rgba(0,0,0,0) 100%);
}			

body:not([maps]) #thumbs-inner > div {
	-webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 5%, rgba(0,0,0,1) 95%, rgba(0,0,0,0) 100%);
	mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 5%, rgba(0,0,0,1) 95%, rgba(0,0,0,0) 100%);	
}

#thumbs-inner > div::-webkit-scrollbar {
	display: none;
}			

#thumbs-inner.dragging {
	cursor: grabbing;
}

#thumbs-inner > div > div[scene] {
	position: relative;
	display: flex;
	flex-direction: row;	
	width: 200px;
	flex-shrink: 0;
	height: 76px;
	border-right: solid 1px #000;
}


#thumbs-inner > div > div[scene]:last-child {
	border-right: none;
}

#thumbs-inner > div > div[scene] > .thumb-bg {
	position: absolute;
	inset: 0px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;	
	background-color: #000;
	transition: filter 1s ease;
}


#thumbs-inner > div > div[scene] > .thumb-bg::before {
	content: "";
	position: absolute;
	inset: 0px;
	background: linear-gradient(190deg, transparent 30%, rgba(0,0,0,0.7) 75%, rgba(0,0,0,1) 95%);
}

#thumbs-inner > div > div[scene].active-scene > .thumb-bg {
	filter: grayscale(100%) contrast(2) brightness(0.7);
}

#thumbs-inner > div > div[scene] > .thumb-text {
	display: flex;
	position: absolute;
	justify-content: left;
	align-items: flex-end;
	inset: 0px;
	padding: 10px 12px;	
	color: #fff;
	font-size: 1rem;
	line-height: 1.2;
	z-index: 1;
	text-shadow: 0px 0px 2px rgba(0, 0, 0, 1);
	font-weight: bold;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	border-color: var(--menu-icon-active);	
	transition:
		border-width 0.25s ease,
		font-size 0.4s ease;
}

#thumbs-inner > div > div[scene].active-scene > .thumb-text {
	font-size: 1.15rem;
	border-bottom-width: 2px;
}

#thumbs-inner > div > div[scene]:not(.active-scene):hover {
	filter: saturate(1.2) contrast(1.2);
}

#item-info {
	display: flex;	
	position: fixed;
	top: 20px;
	left: 20px;
	z-index: 0;
	flex-direction: row;
	align-items: center;
	transition:
		opacity 0.25s ease,
		visibility 0s linear 0.25s;
	cursor: pointer;
	z-index: 1;
	visibility: hidden;
	opacity: 0;	
}

#item-info.dvis {
	transition: opacity 0.25s ease;
	visibility: visible;
	opacity: 1;
}

#item-info > div:nth-child(1) {
	position: relative;
	min-width: 80px;
	min-height: 80px;		
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	border-radius: 9999px;
	overflow: hidden;
	box-shadow: 0px 0px 2px rgba(0,0,0,0.2);
}					

#seller-info {
	display: flex;	
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 0;		
	flex-direction: row;
	align-items: center;
	cursor: pointer;
	transition:
		opacity 0.4s ease,
		visibility 0s linear 0.25s;
	visibility: hidden;
	opacity: 0;		
	
}	

#seller-info.dvis {
	transition: opacity 0.25s ease;	
	visibility: visible;
	opacity: 1;
}


#seller-info-status {
	position: absolute;
	left: 3px;
	top: 3px;
	z-index: 99999;
	background-color: #888;
	width: 16px;
	height: 16px;
	border-radius: 99999px;
	box-shadow: 0px 0px 2px rgba(0,0,0,0.2);
}

#seller-info-status.available {
	background-color: rgb(5, 186, 105);
}


#seller-info > div:nth-child(1) {
	position: relative;
	min-width: 80px;
	min-height: 80px;		
	background: url(../content/seller.jpg) center / cover no-repeat;
	border-radius: 9999px;
	overflow: hidden;
	box-shadow: 0px 0px 2px rgba(0,0,0,0.2);
}					

#seller-info > div:nth-child(2),
#item-info > div:nth-child(2) {
	position: absolute;
	top: -5px;
	color: #fff;
	width: 28px;
	height: 28px;
	font-size: 14px;
	line-height: 27px;
	background-color: #000;
	text-align: center;
	border-radius: 9999px;
	font-weight: bold;
	box-shadow: 0px 0px 2px rgba(0,0,0,0.2);
}			

#item-info > div:nth-child(2) {
	left: -5px;
}	

#seller-info > div:nth-child(2) {
	right: -5px;
}	

.vm-requesting {
	display: none !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

#viewing-request-status .status-spinner {
	width: 34px;
	height: 34px;
	margin: -8px auto 18px;
	border: 3px solid rgba(255,255,255,0.28);
	border-top-color: #fff;
	border-radius: 50%;
	animation: viewing-status-spin 0.8s linear infinite;
}

#viewing-request-status .status-spinner.hidden {
	display: none !important;
}

@keyframes viewing-status-spin {
	to {
		transform: rotate(360deg);
	}
}
			
#item-details,
.item-pane {
	position: fixed;
	top: 20px;
	left: 20px;
	width: 320px;
	background-color: #fff;
	border-radius: 5px;
	z-index: 2;
	overflow: hidden;
	padding: 10px;
	display: none;
}

.item-pane {
	width: 100%;
	max-width: 520px;
}			

.item-pane > div:nth-child(1) > div:nth-child(1),
.seller-pane > div:nth-child(1) > div:nth-child(1) {
	flex: 1;
	font-weight: bold;
	font-size: 1.15rem;
	padding-left: 10px;
	text-transform: uppercase;
}

.item-pane > div:nth-child(2) {
	padding: 0px 15px 10px 10px ;
	max-height: 600px;
	overflow-y: scroll;
	font-size: 0.9em;
	margin-right: -5px;
}				

#item-image {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	padding-top: 56%;
	border-radius: 5px;
}		

#item-three-spec {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: 5px;
	padding-bottom: 10px;
	font-size: 1.4rem;
	line-height: 1.2;
	font-weight: bold;
	opacity: 0.8;
}		

#item-three-spec > div:nth-child(1) {
	width: 100%;
	text-align: center;
}				

#item-three-spec > div:nth-child(2) {
	display: flex;
	flex-direction: row;
	align-items: center;				
	border-top: solid 1px #ccc;
	font-size: 1rem;
	padding-top: 12px;
	width: 90%;
	margin-top: 15px;
}	

#item-three-spec > div:nth-child(2) > div:not(:nth-child(1)) {	
	text-transform: uppercase;
}	

#item-three-spec > div:nth-child(2) > div {
	flex: 1;
	text-align: center;
}

#item-three-spec > div:nth-child(2) > div > span {
	font-size: 0.82rem;
}

#item-details-listing {
	padding: 2px 5px 0px 5px;
}

#item-details-listing > div {
	display: flex;
	flex-direction: row;
	border-top: dotted 2px #ccc;
	padding: 8px 0px;		
}			

#item-details-listing > div:last-child {
	border-bottom: unset;		
}

#item-details-listing > div > div:nth-child(odd) {
	flex: 0 0 100px;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 0.85rem;
}

#item-details-listing > div > div:nth-child(even) {
	flex: 1;
	text-align: right;
	font-size: 1rem;
}

#item-details-menu {
	font-weight: bold;
}

#item-details-menu > div > i {
	width: 20px;
	text-align: center;
	font-size: 18px;
	font-weight: normal;
}

#item-details-menu > div:hover {
	background-color: #ddd;				
}			

.item-pane:not(#item-specs) > div:nth-child(2) {
	max-height: calc(100vh - 130px);
}				

#item-specs > div:nth-child(2) > div {			
	border-bottom: dotted 2px #ccc;
	padding: 10px 0px;
}

#item-specs > div:nth-child(2) > div:last-child {			
	border-bottom: unset;
	padding: 5px 0px 0px 0px;
}

#item-specs > div:nth-child(2) > div > div:nth-child(odd) {
	text-transform: uppercase;
	font-weight: bold;
	font-size: 0.85rem;				
}
			
#item-features > div:nth-child(2) > div {			
	border-bottom: dotted 2px #ccc;
	padding: 10px 0px;
}			

#item-features > div:nth-child(2) > div:last-child {		
	border: unset;
	padding-bottom: unset;
	margin-bottom: unset;
}

#item-features > div:nth-child(2) > div > div:nth-child(1) {			
	font-size: 1.1em;
	font-weight: bold;
	margin-bottom: 5px;
}

.item-pane > div:nth-child(1),
.seller-pane > div:nth-child(1) {
	display: flex;
	justify-content: left;
	align-items: center;
	padding-bottom: 10px;
	border-bottom: solid 1px #ccc;
}
		

.seller-pane > div:nth-child(1) {
	margin: -10px -10px 0px -10px;
}
		
#seller-details,
.seller-pane {
	display: none;	
	position: fixed;
	top: 20px;
	right: 20px;
	width: 260px;
	background-color: #fff;
	border-radius: 5px;
	z-index: 2;
	padding: 20px;
	box-shadow: 0px 12px 30px rgba(0,0,0,0.25);
}

.seller-pane {
	width: 320px;
}

#seller-details-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding-bottom: 15px;
}

#seller-avatar {
	border-radius: 9999px;
	margin-bottom: 8px;
	border-width: 4px;
	border-style: solid;
	overflow: hidden;
	min-width: 120px;
	min-height: 120px;
	position: relative;
}

#seller-avatar > div {
	position: absolute;
	inset: 0;
	height: 100%;
	background-position: center;
	background-size: cover;
}

#seller-details-status {
	display: flex;
	position: absolute;
	left: -16px;
	top: 10px;
	z-index: 99999;
	font-size: 0.7rem;
	line-height: 12px;
	gap: 5px;	
	text-transform: uppercase;
	letter-spacing: 0px;;
	font-weight: bold;
	background-color: #000;
	color: #fff;
	padding: 5px 10px 5px 5px;
	border-radius: 11px;	
}

#seller-details-status > div:nth-child(1){
	width: 12px;
	height: 12px;
	background-color: #888;
	border-radius: 50%;
}

#seller-details-status > div:nth-child(2)::after{
	content: 'Unavailable';
}

#seller-details-status.available > div:nth-child(1){
	background-color: rgb(5, 186, 105);
}

#seller-details-status.available > div:nth-child(2)::after{
	content: 'Available';
}

#seller-name {
	font-weight: bold;
	font-size: 1.3rem;
	line-height: 1.1;
	letter-spacing: 0.2px;
	margin-top: 10px;
}

#seller-web {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

#seller-company {
	font-size: 0.85rem;
	letter-spacing: 0.2px;
	color: #3a4a5a;
	margin-top: 0.4rem;
}

#seller-details-pin {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 22px;
	height: 22px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	color: rgb( 0 0 0 / 0.5);
	font-family: inherit;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	z-index: 100000;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

#seller-details-pin:hover,
#seller-details-pin.active {
	color: #000;
}

#seller-details-pin.active {
	color: #000;
}

#seller-details-pin.active i {
	transform: rotate(-45deg);
}

#seller-details-contact > div {
	display: flex;
	flex-direction: row;
	font-size: 0.9rem;		
	padding: 8px 0px;		
	align-items: center;
	border-top: dotted 2px #ddd;
}			

#seller-details-contact > div i {
	font-size: 1.1rem;		
}			
	

#seller-details-contact > div > div:nth-child(odd) {
	flex: 0 0 25px;
	text-transform: uppercase;
}

#seller-details-contact > div > div:nth-child(even) {
	flex: 1;
}

#seller-details-menu {
	font-weight: bold;
}

#seller-details-menu > div > i {
	width: 20px;
	text-align: center;
	font-size: 16px;
	font-weight: normal;
}

#seller-details-menu > div:hover {
	background-color: #ddd;				
}	

#seller-details-menu > div[menu="seller-details-viewing"] {
	border-color: #000;
	background-color: var(--success-clr);
	color: #fff
}


#seller-details-menu > div,
#item-details-menu > div {
	background-color: #efefef;
	font-size: 1rem;
	padding: 10px;
	border-radius: 5px;
	padding: 10px;
	cursor: pointer;
	margin-top: 5px;
	transition: transform 0.4s ease;
	display: flex;
	align-items: center;
	gap: 10px;
	border: solid 1px #ccc;
	letter-spacing: 0.05rem;
	line-height: 1.3rem;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--multiple:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: #d1d5db !important;
}

#item-details-close,
#seller-details-close {
	display: none;
	position: absolute;
	top: 0px;
	right: 0px;
	background-color: #fff;
	border-radius: 5px;
	padding: 10px;
}

#item-details-close > div,
#seller-details-close > div {
	width: 40px;
	height: 40px;
	text-align: center;
	line-height: 40px;
	border-radius: 5px;
	color: #fff;
	background-color: #000;
	cursor: pointer;
}

.pane-back {
	flex: none;
	width: 30px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	border-radius: 5px;
	color: #fff;
	background-color: #000;
	cursor: pointer;
}

.seller-pane form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 20px;
}

.seller-pane .field {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 0.7rem;
	color: #000;
	text-transform: uppercase;
	line-height: 20px;
}

.seller-pane .field > label {
	font-weight: bold;
	letter-spacing: 1px;
}

.seller-pane .field > span > span {
	font-weight: normal;
	letter-spacing: 0px;
}

.seller-pane .field.field-static {
	gap: 8px;
}

.seller-pane .field > label:not(.select2) {
	position: absolute;
	background-color: #fff;
	line-height: 10px;
	border-radius: 5px;
	padding: 0 5px;
	left: 10px;
	top: -4px;
	color: #aaa;
	z-index: 3;
	pointer-events: none;
}

.seller-pane .field.field-static > span:not(.select2) {
	position: static;
	padding: 0;
	background-color: transparent;
	line-height: 1;
	color: #6b7280;
}

.viewing-mode-options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	padding: 4px;
	border: solid 1px #ccc;
	border-radius: 6px;
	background-color: #efefef;
	overflow: hidden;
}

.viewing-mode-option {
	border: 0;
	border-radius: 6px;
	padding: 6px 12px;
	background-color: transparent;
	color: #6b7280;
	_font-family: 'Montserrat';
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.viewing-mode-option.active {
	background-color: #fff;
	color: #111827;
	box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
}

.viewing-mode-option.disabled,
.viewing-mode-option:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.seller-pane input,
.seller-pane select,
.seller-pane input:not([type="checkbox"]),
.seller-pane textarea {
	border: solid 1px #ccc;
	border-radius: 6px;
	padding: 9px 10px;
	font-size: 1rem;
	outline: none;
	_font-family: 'Montserrat';
}

.seller-pane textarea {
	resize: vertical;
}

#viewing-schedule-field {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

#viewing-schedule-field.hidden {
	display: none !important;
}

#viewing-schedule-date,
#viewing-schedule-time {
	width: 100%;
	min-height: 40px;
	line-height: 20px;
}

#viewing-schedule-time .select2-container {
	display: block;
	position: static;
	z-index: 1;
	pointer-events: auto;
	left: auto;
	top: auto;
	padding: 0;
	background: transparent;
	border-radius: 0;
	line-height: normal;
	width: 100% !important;
	font-size: 1rem;
	text-transform: none;
}

#viewing-schedule-time .select2-container--default .select2-selection--single {
	display: block;
	height: 40px;
	box-sizing: border-box;
	border: solid 1px #ccc;
	border-radius: 6px;
	background: #fff;
	cursor: pointer;
	pointer-events: auto;
}

#viewing-schedule-time .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding-left: 10px;
	padding-right: 34px;
	color: #000;
	line-height: 38px;
	font-weight: 400;
}

#viewing-schedule-time .select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: #777;
}

#viewing-schedule-time .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 1px;
	right: 3px;
	width: 34px;
	height: 38px;
}

#seller-request-viewing .select2-dropdown {
	border: solid 1px #ccc;
	border-radius: 6px;
	box-shadow: 0 18px 40px rgba(0,0,0,0.2);
	overflow: hidden;
	z-index: 2147483001;
}

#seller-request-viewing .select2-dropdown--below {
	margin-top: 8px;
}

#seller-request-viewing .select2-dropdown--above {
	margin-top: -8px;
}

#seller-request-viewing .select2-results__option {
	padding: 8px 10px;
	font-size: 0.95rem;
	line-height: 1.2;
	color: #000;
}

#seller-request-viewing .select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: #111;
	color: #fff;
}

#seller-request-viewing .select2-container--default .select2-results__option[aria-selected=true] {
	background: #e5e5e5;
	color: #000;
}

#seller-request-viewing .select2-container--default .select2-results__option--disabled {
	color: #aaa;
	cursor: not-allowed;
}

#viewing-schedule-date .viewing-date-display {
	padding-right: 42px;
	cursor: pointer;
	font-weight: 400;
}

#viewing-schedule-date .viewing-calendar-trigger {
	position: absolute;
	inset: 0 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 0;
	background: transparent;
	color: #333;
	cursor: pointer;
	font-size: 1.125rem;
}

#viewing-calendar-popover {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 2147483001;
	width: 100%;
	background: #fff;
	border: solid 1px #ccc;
	border-radius: 6px;
	box-shadow: 0 18px 40px rgba(0,0,0,0.2);
	padding: 12px;
	color: #111;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1;
	text-transform: none;
}

#viewing-calendar-popover * {
	box-sizing: border-box;
}

.viewing-calendar-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
	font-weight: bold;
	line-height: 32px;
}

.viewing-calendar-head button {
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 4px;
	background: #f2f2f2;
	cursor: pointer;
	font-size: 1.25rem;
}

.viewing-calendar-week,
.viewing-calendar-days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}

.viewing-calendar-week span {
	text-align: center;
	font-size: 0.6875rem;
	font-weight: bold;
	color: #666;
	line-height: 24px;
}

.viewing-calendar-days button,
.viewing-calendar-days span {
	width: 100%;
	height: 34px;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: #111;
	text-align: center;
	cursor: pointer;
}

.viewing-calendar-days span {
	cursor: default;
}

.viewing-calendar-days button:hover {
	background: #efefef;
}

.viewing-calendar-days button.active {
	background: #111;
	color: #fff;
	font-weight: bold;
}

.viewing-calendar-days button:disabled {
	color: #bbb;
	cursor: not-allowed;
	background: transparent;
}

#viewing-intro {
	padding-top: 10px;
	font-size: 1rem;
}

#viewing-intro > div {
	font-size: 1.2rem;
	margin-bottom: 10px;
	font-weight: bold;
}

.hidden {
	display: none !important;
}

#message-callback .callback-row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.85rem;
	font-weight: bold;
	text-transform: none;
}

.seller-pane input.invalid {
	border-color: #f36;
	box-shadow: 0 0 0 1px rgba(255,51,102,0.35);
}

input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: #fff;
	border: none;
	display: inline-grid;
	place-content: center;
	cursor: pointer;
	box-shadow: none;
	border: solid 3px #000;
}

input[type="checkbox"]::after {
	content: "";
	width: 8px;
	height: 14px;
	border: solid #000;
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
	opacity: 0;
	margin-top: -3px;
}

input[type="checkbox"]:checked::after {
	opacity: 1;
}

.seller-pane .form-actions {
	display: flex;
}

#seller-details-menu [menu],
#item-details-menu [menu],
.seller-pane button {
	text-transform: uppercase;
}

.seller-pane .form-actions button {
	flex: 1;
	border-radius: 6px;
	padding: 12px 12px;
	cursor: pointer;
	font-weight: bold;
	background-color: #000;	
	font-size: 1rem;
	color: #eee;
	font-weight: bold;
	letter-spacing: 0.05rem;
}

.seller-pane .form-actions button:hover {
	color: #fff;				
}	

.corner-ol {		
	position: fixed;	
	pointer-events: none;
	z-index: 1;
}

#tl-ol {
	top: 0;
	left: 0;
	width: 240px;
	height: 480px;
	background: radial-gradient( ellipse at bottom right, transparent 0%, transparent 70%, rgba(0, 0, 0, 0.5) 100% );
}	

#tr-ol {
	top: 0;
	right: 0;
	width: 240px;
	height: 480px;
	background: radial-gradient( ellipse at bottom left, transparent 0%, transparent 70%, rgba(0, 0, 0, 0.5) 100% );
}	
	
body:not([maps]) #bl-ol {
	display: none !important;
}		

body[maps] #bl-ol {
	bottom: 0;
	left: 0;
	width: 25vh;
	height: 50vh;
	background: radial-gradient( ellipse at top right, transparent 0%, transparent 70%, rgba(0, 0, 0, 0.8) 100% );		
	display: block;
}

#br-ol {
	bottom: 0;
	right: 0;
	width: 800px;
	height: 200px;
	background: radial-gradient( ellipse at top left, transparent 0%, transparent 70%, rgba(0, 0, 0, 0.8) 100% );
}

#map-wrapper {
	display: block;
	position: fixed;
	bottom: 20px;
	left: 0px;
	transform: scale(0.5);
	transform-origin: bottom left;
	transition:
		left 0.4s ease-in-out,
		transform 0.4s ease-in-out,
		opacity 0.4s ease,
		visibility 0s linear 0.4s;
	z-index: 1;
	padding: 5px;
	pointer-events: none;	
	visibility: hidden;
	opacity: 0;
}

#map-wrapper.dvis {
	transition:
		left 0.4s ease-in-out,
		transform 0.4s ease-in-out,
		opacity 0.4s ease;
	left: 30px;
	visibility: visible;
	opacity: 1;
}

#map-wrapper:hover {
	transform: scale(1);
}

#map-wrapper.active {
	transform: scale(1);
}

#msg-box,
#flash-box,
#hint-box {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9999;
}

#msg-box {
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 2147483002;
}

#flash-box,
#hint-box,
#hint-box > div,
#hint-box .inner {
	pointer-events: none;
}

#flash-box > div,
#flash-box .inner {
	pointer-events: none;
}

#msg-box > div,
#flash-box > div,
#hint-box > div {
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: center;
    align-items: center;
	padding: 10px;
}

#msg-box .inner,
#flash-box .inner,
#hint-box .inner {
	background-color: #fff;
	color: #222;
	padding: 20px 35px;
	border-radius: 5px;
	font-size: 1.15rem;
	text-align: center;
}

#msg-box .inner {
	min-width: 240px;
	max-width: 360px;
}

#flash-box .inner {
	min-width: 180px;
	max-width: 320px;
	padding: 16px 22px;
	background-color: rgba(0, 0, 0, 0.88);
	color: #fff;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

#hint-box .inner {
	min-width: 120px;
	max-width: 240px;
}

#msg-box div[button] {
	display: inline-block;
	padding: 10px 20px;
	background-color: #000000ee;
	color: #fff;
	text-align: center;
	border-radius: 5px;
	cursor: pointer;
	margin-bottom: 10px;
}

body.module-gate *:not(#mod-lv-form):not(#mod-lv-form *):not(#mod-lc-form):not(#mod-lc-form *) {
	pointer-events: none;
}

body.module-gate #mod-lv-form,
body.module-gate #mod-lv-form *,
body.module-gate #mod-lc-form,
body.module-gate #mod-lc-form * {
	pointer-events: auto;
}

@keyframes rotateBackground {
	from { transform: rotate(0deg) translateZ(0); } 
	to { transform: rotate(360deg) translateZ(0); }
}