html, body {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
}


/*
.screen {
	display: flex;
	flex-flow: column nowrap;
	align-items: stretch;
	justify-content: flex-start;	
	z-index: 1;
	overflow-x: hidden;
	overflow-y: auto;
}

body.authenticated .screen.login,
body:not(.authenticated) .screen:not(.login),
body:not(.registering) .screen.account,
body:not(.configuring) .screen.configuration,
body.demo .screen:not(.demo),
body:not(.demo) .screen.demo
{
	display: none !important;
}
*/


iframe.popup
{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 200;
	background-color: transparent;
	border: 1em solid rgba(128,128,128,0.8);
	box-sizing: border-box;
}

body.hide-on-screen-ui .on-screen-input-device,
body.hide-on-screen-ui .top-toolbar
{
	display: none !important;
}
/*
body:not(.configured) a-scene,
body:not(.configured) a-scene > canvas
{
	pointer-events: none !important;
}
*/


.rtc-connection-state { display: none; }

body.connecting .rtc-connection-state
{
	display: flex;
	flex-flow: column nowrap;
	z-index: 99999;
	position: fixed;
	left: 2em;
	top: 2em;
	background-color: black;
	font-family: math;
	padding: 0.5em;
}

body.connecting .rtc-connection-state [data-field]
{
	display: flex;
	flex-flow: row nowrap;
}

body.connecting .rtc-connection-state [data-field] label
{
	margin-right: 0.5em;
	color: lightgray;
}

body.connecting .rtc-connection-state [data-field]::after
{
	content: attr(data-state);
	color: lightgray;
}

body.connecting .rtc-connection-state [data-field][data-state="connected"]::after,
body.connecting .rtc-connection-state [data-field][data-state="stable"]::after,
body.connecting .rtc-connection-state [data-field][data-state="complete"]::after,
body.connecting .rtc-connection-state [data-field][data-state="open"]::after
{
	color: lime;
}

body.connecting .rtc-connection-state [data-field][data-state="failed"]::after,
body.connecting .rtc-connection-state [data-field][data-state="disconnected"]::after
{
	color: red;
}




a-scene
{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	transform-origin: top left;
}
a-scene, a-scene *
{
	user-select: none !important;
	-webkit-user-select: none !important;
}

a-scene.mouseless {
	cursor: none !important;
}

a-scene > canvas
{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}


html.portrait a-scene
{
	transform: translateX(var(--screen-width)) rotateZ(90deg);
	width: var(--screen-height);
	height: var(--screen-width);
}


*
{
	color : black;
	touch-action: none !important;
}



.top-toolbar
{
	position: absolute;
	top: 0;
	left: calc(14 * var(--unit));
	right: calc(14 * var(--unit));
	display: none;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: flex-start;
	z-index: 1;
}

.top-toolbar > button
{
	flex: 0 0 auto;
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: center;
	min-width: 3em;
	height: 3em;
	border-radius: 0.5em;
	background-image: linear-gradient(0deg, lightblue, transparent, lightblue);
	background-color: transparent;
	border-top-width: 0;
	border-color: lightblue;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.top-toolbar > button *
{
	pointer-events: none; 
}

.top-toolbar > button > label
{
	z-index: 1;
}


.top-toolbar > button::after
{
	content: "";
	display: block;
	position: absolute;
	left:0.2em; top: 0.2em; right:0.2em; bottom: 0.2em;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 0.8;
}


a-scene:not(.online) .top-toolbar > button.mood
{
	display: none !important;
}

.top-toolbar > button.emotes,
.top-toolbar > button.mood
{
	text-shadow: 0 0 0.1em white;
}
.top-toolbar > button.emotes::after
{
	background-image: url(/Assets/Emojis/people/person-raising-hand.png);
}
.top-toolbar > button.mood::after
{
	background-image: url(/Assets/Emojis/people/face-without-mouth.png);
}

body.started .top-toolbar
{
	display: flex;
}


body.emotes-menu .top-toolbar,
body.mood-menu .top-toolbar
{
	justify-content: flex-start;
}

body.emotes-menu .top-toolbar > *:not(.emotes),
body.mood-menu .top-toolbar > *:not(.mood)
{
	display: none !important;
}