:root {
	--background-color-1: #9e549d;
	--background-color-2: #6581ae;
	--background-color-3: #eeeeee;
	--border-color-1: #eeeeee;
	--border-color-2: #6581ae;
}

/* Skinning the title bar */

#titleBar {
	top: 20px;
}

#titleBar .sceneName {
	display: inline-block;
	width: unset;
	background-color: var(--background-color-3);
	border: 2px solid var(--border-color-2);
	border-radius: 10px;
	padding: 0.2rem 2rem 0.2rem 2rem;
	font-size: 1.4rem;
	color: #6581ae;
}

body.multiple-scenes.mobile #titleBar {
	left: 0;
	top: 20px;
	right: 30px;
}

.mobile #titleBar .sceneName {
	font-size: 3.5vw;
	color: #fff;
	background-color: transparent;
	border: none;
}

.mobile #commandbar a{
	display: block !important;
	width: 38px !important;
    height: 38px !important;
    padding: 5px 0px !important;
    text-align: center;
}

@media (max-width: 420px) {
	.mobile #titleBar .sceneName {
		display: none;
	}
}


#commandbar {
	display: inline-block;
	position: absolute;
	#background-color: var(--background-color-1);
	background-color:rgba(103,115,131,0.8);
	top: 20px !important;
	right: 20px;
	border-radius: 10px;
	border: 2px solid var(--border-color-1);
	padding: 3px 6px 3px 6px;
}


#autorotateToggle,
body.fullscreen-enabled #autorotateToggle,
body.fullscreen-enabled #fullscreenToggle,
body.fullscreen-enabled.mobile #autorotateToggle {
	display: inline-block;
	position: relative;
	top: unset;
	right: unset;
	width: unset;
	height: unset;
	background-color: unset;
	padding: unset;
}

#autorotateToggle .icon,
#fullscreenToggle .icon,
.mobile #autorotateToggle .icon,
.mobile #fullscreenToggle .icon {
	position: relative;
	top: 0px;
	right: unset;
	width: 30px;
	height: 30px;
	margin: 0px 4px;
}

#fullscreenToggle .icon.on {
	display: none;
}

#autorotateToggle.enabled .icon.on,
#autorotateToggle .icon.off,
#fullscreenToggle .icon.off {
	display: inline-block;
}

/* Skinning control buttons */

.viewControlButton {
	bottom: 15px;
	left: 50%;
	width: 40px;
	height: 40px;
	padding: 5px;
	#background-color: var(--background-color-2);
	border: 2px solid var(--border-color-1);
	border-radius: 8px;
}

.viewControlButton .icon {
	top: 3px;
	right: 3px;
}

/* Sticking link hotspots icons on background
linked with index.js data.linkHotspots */

.link-hotspot {
	#margin-left: unset;
	#margin-top: unset;
}

.mobile .link-hotspot {
	top: unset;
}

/* Skinning link hotspots */

.link-hotspot-tooltip {
	border: 2px solid var(--border-color-1);
	background-color: var(--background-color-2);
}

/* Skinning info hotspots */

.info-hotspot .info-hotspot-icon-wrapper {
	width: 40px;
	height: 40px;
}

.info-hotspot .info-hotspot-icon {
	margin: unset;
}

.info-hotspot .info-hotspot-header,
.info-hotspot .info-hotspot-close-wrapper,
.info-hotspot .info-hotspot-text,
.info-hotspot-modal .info-hotspot-header,
.info-hotspot-modal .info-hotspot-close-wrapper,
.info-hotspot-modal .info-hotspot-text {
	#border: 2px solid var(--border-color-1);
}

.info-hotspot-modal .info-hotspot-close-wrapper {
	position: absolute;
	top: -2px;
	right: -2px;
}

.info-hotspot .info-hotspot-header,
.info-hotspot-modal .info-hotspot-header {
	#background-color: var(--background-color-1);
	margin: -20px 0px 0px -15px;
}

.info-hotspot .info-hotspot-close-wrapper {
	left: 258px;
	background-color: var(--background-color-2);
}

.info-hotspot .info-hotspot-text {
	width: 298px;
	top: 38px;
}

.info-hotspot-modal .info-hotspot-text {
	top: 108px;
}