/** PotassiumES Styles **/

/** Reset **/
body, html, div, p, input, button, form, a, section,
h1, h2, h3, h4, h5,
.xr-canvas, .arkit-device-wrapper, .arkit-device-wrapper canvas {
	padding: 0;
	margin: 0;
}

body,
html,
.xr-canvas,
.arkit-device-wrapper, 
.arkit-device-wrapper canvas {
	width: 100vw;
	height: 100vh;
	max-width: 100vw;
	max-height: 100vh;
	background: inherit;
}

/** Set up z indices */
.xr-canvas				{ z-index: -2; }
.arkit-device-wrapper	{ z-index: -1; }
html					{ z-index: 1; }
body					{ z-index: 2; }
.flat-display			{ z-index: 3; }
.page-app				{ z-index: 4; }
.dom-root,
.immersive-root			{ z-index: 5; }

.arkit-device-wrapper, .xr-canvas {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

.page-app,
.flat-display,
.webxr-sessions,
.portal-root {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
}

.webxr-sessions canvas {
	width: 100%;
	height: 100%;
}

/* Hide the *-root elements for the non-active display mode */
.flat-mode .portal-root, .flat-mode .immersive-root { display: none; }
.portal-mode .flat-root, .portal-mode .immersive-root { display: none; }
.immersive-mode .flat-root, .immersive-mode .portal-root { display: none; }

.dom-modal {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 100;
	padding: 20px;
	background-color: var(--dom-background-color);
	border: rgb(255, 102, 153);
}

/* App styles */

.som-root {
	padding: 3cm;

	border-width: var(--som-border-width);
	border-radius: var(--som-border-radius);
	border-emissive: var(--som-border-color);

	background-z: -4cm;
	background-emissive: rgb(220, 220, 220);
}

.som-input-group {
	centroid: -25cm -20cm 20cm;
}