@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,600;1,600&display=swap');

html,body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	font-family: "Roboto-SemiBold", "Roboto", sans-serif;
	font-weight: SemiBold;
	background: #74c2d1;
}

#tx-viewer {
	width: 100%;
	height: 100%;
	cursor: url('img/rotate.png') 16 16, move;
}
#tx-viewer.roll-controls {
	cursor: url('img/roll.png') 16 16, move;
}

#content-area {
	display: block;
	width: 100vw;
	height: 100vh;
}
#view3d {
	width: 100%;
	height: 100%;
	display: block;
	position: relative;
}

.toolbar {
	z-index: 10;

	position: absolute;
	width: 70%;
	left: 15%;

	pointer-events: none;
	/*overflow: hidden;*/

	display: none;
	flex-flow: row;
	justify-content: space-between;
}

.widget {
	z-index: 9;

	position: absolute;
	width: 50px;
	height: 200px;

	pointer-events: none;
	/*overflow: hidden;*/

	display: block;
	justify-content: space-between;
}

#tx-viewer.panel .toolbar {
	left: 66%;
	width: 28%;
}

#presets-toolbar {
	top: 5%;
	display: flex;
	width: 60%;
	left: 20%;
}

#presets-toolbar div {
	float: left;
	margin: 10px;
	margin-top: 15px;
	text-align: center;
	color: white;
	font-size: 1.5vw;
}

#presets-toolbar #attachment-controls,
#presets-toolbar #attachment-controls.disabled {
	display: none;
}
#presets-toolbar #attachment-controls.enabled {
	display: flex;
	flex-wrap: nowrap;
}


#tx-viewer.panel #presets-toolbar div {
	font-size: 1.2vw;
}
#tx-viewer.panel .toolbar {
	left: 60%;
	width: 40%;
}


#presets-toolbar div:hover {
	color: #aaf2ff;
}
#presets-toolbar div:active {
	color: #1a8cff;
}

#presets-toolbar div.clickable {
	pointer-events: auto;
}
#presets-toolbar div.divider {
	color: white;
	opacity: 0.33;
}

#presets-toolbar.show-right #show-right,
#presets-toolbar.show-front #show-front,
#presets-toolbar.show-left #show-left,
#presets-toolbar.show-all #show-all,
#presets-toolbar.show-upper #show-upper,
#presets-toolbar.show-lower #show-lower,
#presets-toolbar .clickable.enabled {
	color: #aaf2ff;
	text-shadow: 0 0 0.05em #99dae5,
               0 0 0.05em #83bac4,
							 0 0 0.05em #68939b;
}

#tx-viewer.multistage #staging-toolbar {
	display: flex;
}
#tx-viewer.split #staging-toolbar,
#tx-viewer.panel #staging-toolbar {
	display: none;
}
#staging-toolbar {
	bottom: 5%;
	font-size: 20px;
}
#staging-toolbar a {
	float: left;
	margin: 10px;
	text-align: center;
	transition: all 0.3s ease;
	color: white;
	pointer-events: auto;
}

.stage-spacer {
	display: block;
	width: 15px;
}
#stage-buttons {
	min-width: 170px;
	display: flex;
	justify-content: center;
	margin-left: 10px;
	margin-right: 10px;
}

#play-button #play-link { display: inline; }
#play-button #pause-link { display: none; }
#play-button.playing #play-link { display: none; }
#play-button.playing #pause-link { display: inline; }


#tx-viewer.toggle #before-after-toolbar,
#tx-viewer.panel #before-after-toolbar {
	display: flex;
}
#before-after-toolbar {
	bottom: 5%;
	font-size: 20px;
	justify-content: center;
}

#tx-viewer #before-after-toolbar svg {
	width: 25vw;
	height: 15vh;
	max-width: 165px;
	max-height: 45px;
	min-width: 75px;
	min-height: 20px;
}
#tx-viewer.panel #before-after-toolbar svg {
	width: 12.5vw;
	height: 15vh;
}

.toolbar-button {
	pointer-events: auto;
	cursor: pointer;
	border: none;
	margin: 10px;
}
svg.toolbar-button .bg,
svg.toolbar-button .fg {
	-webkit-transition-duration: 0.2s;
	transition-duration: 0.2s;
}
svg.toolbar-button .fg {	fill: #596CBF; }
svg.toolbar-button:active .fg {	fill: #aaf2ff; }
svg.toolbar-button .bg {
	fill: #fff;
	stroke: #fff;
}
svg.toolbar-button:hover .bg {
	fill: #aaf2ff;
	stroke: #aaf2ff;
}
svg.toolbar-button:active .bg {
	fill: #1a8cff;
	stroke: #1a8cff;
}

#tx-viewer.not-loaded svg.toolbar-button .fg {	fill: #3D509D; }
#tx-viewer.not-loaded svg.toolbar-button .bg {
	fill: #cccccc;
	stroke: #cccccc;
}

#caption {
	display: block;
	position: absolute;
	bottom: 0%;
	width: 100%;
	z-index: 10;
	text-align: center;
	color: white;
	padding: 0;
	font-size: small;
	pointer-events: none;
}
#tx-viewer.panel #caption {
	left: 60vw;
	width: 40vw;
}





@media screen and (max-width: 300px) {
	#tx-viewer.multistage #staging-toolbar {
		flex-wrap: wrap;
		justify-content: center;
	}
	#stage-buttons {
		margin-bottom: -10px;
	}
}
@media screen and (max-width: 460px) {
	.toolbar, #presets-toolbar {
		left: 0;
		width: 100%;
	}

	#presets-toolbar div {
		font-size: 2.2vw;
	}
}
@media screen and (max-height: 320px) {
	#presets-toolbar {
		top: 0;
	}

	#staging-toolbar {
		bottom: 0;
	}
}
@media screen and (max-width: 750px) {
	#staging-toolbar {
		bottom: 10%;
	}
}


#zoom-label {
	color: rgba(240, 240, 240, 192);
	font-size: 1.4em;
	margin-left: 10px;
}
#zoom-widget {
	display: block;
	margin: 0px;
	padding: 0px;
	height: 25%;
	min-height: 100px;
	right: 3%;
	top: 35%;
}
#zoom-slider {
	display: block;
	height: 100%;
}
#zoom-slider .noUi-base {
	pointer-events: auto;
	margin-left: -4px;
}
#zoom-slider .noUi-connect {
	background: #1a8cff;
}



#stage-slider .noUi-base {
	pointer-events: auto;
}

.slider {
	width:80%;
	vertical-align: sub;
	margin: 15px;
}
#stage-slider .noUi-connect {
	background: #1a8cff;
}

.noUi-horizontal {
	height: 10px;
}
.noUi-vertical {
	width: 10px;
}

.noUi-horizontal .noUi-base {
	height: 8px;
}
.noUi-vertical .noUi-base {
	width: 8px;
}


.clickable,
.noUi-handle,
.noUi-base {
	cursor: pointer;
	-webkit-transition-duration: 0.2s;
	transition-duration: 0.2s;
}
.clickable:hover,
.noUi-handle:hover,
.noUi-handle:active {
	color: #aaf2ff;
}
.clickable:active {
	color: #1a8cff;
}
.clickable.unavailable {
	color: #cccccc !important;
	cursor: default;
}

#tx-viewer.not-loaded .clickable,
#tx-viewer.not-loaded .noUi-handle {
	color: #cccccc;
	cursor: default;
}

.notification {
	z-index: 20;
	display: none;
	position: absolute;
	width: 100%;
	left: 0;
}

#error-text {
	top: 5px;

	color: #ff0000;
	text-align: center;
}
#error-text.error {
	display: block;
}

#loading-progress {
	top: 0;
	height: 5px;
	background: #fff;
}

#tx-viewer.not-loaded #loading-progress {
	display: block;
}
#loading-progress #loading-received {
	display: block;
	width: 0%;
	height: 100%;
	background: #1a8cff;
}


#lightbox {
	display: none;
}
#lightbox.active {
	display: block;
}
#lightbox-bg {
	display: block;
	position: absolute;
	z-index: 100;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background: black;
	opacity: 0.5;

}
#lightbox-img {
	display: block;
	position: absolute;
	z-index: 101;
	left: 10vw;
	top: 10vh;
	width: 80vw;
	height: 80vh;
	object-fit: contain;
	background: #444;
}
#lightbox-caption {
	display: block;
	position: absolute;
	z-index: 102;
	top: 85vh;
	top: calc(90vh - 20px);
	width: 100%;
	color: white;
	text-align: center;
	pointer-events: none;
}


.noselect {
	-webkit-user-select: none; /* Chrome/Safari */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+ */
	-o-user-select: none;
	user-select: none;
}

#logo {
	display: block;
	position: absolute;
	z-index: 100;
	left: 10px;
	top: 10px;
	max-width: 158px;
	min-width: 79px;

	opacity: 0.67;
	pointer-events: none;
}
#logo.panel {
	left: 60vw;
	display: none;
}

_:-ms-fullscreen, :root #logo {
	top: calc(-50vh + 12px); /* IE11 fix */
}