@charset "UTF-8";

body {
	color: #272748;
	padding: 0;
	margin: 0;
	overflow: hidden;
	text-align: center;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

a {
	color: #f04020
}

canvas {
	z-index: 10;
}

@font-face {
	font-family: 'arlrdbd';
	src: url('../font/arlrdbd.eot');
	src: url('../font/arlrdbd.ttf') format('truetype'),
		url('../font/arlrdbd.woff') format('woff'),
		url('../font/arlrdbd.svg#QuadrantaBold') format('svg');
	font-weight: 100;
	font-style: normal;
}

h1,
h2,
h3,
h4,
h5 {
	font-family: arlrdbd !important;
	font-weight: 100;
	font-style: normal;
}

.button {
	margin: 5%;
	height: 100%;
	background: #272748;
}

.button:hover {
	background: #f04020;
}

.centerPage {
	position: fixed;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.centerHorizontal {
	position: fixed;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
}

.centerVertical {
	position: fixed;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}

.show {
	opacity: 1 !important;
	transition: opacity .3s;
}

.hide {
	opacity: 0 !important;
	transition: opacity .3s;
}

.unselectable {
	/* For Opera and <= IE9, we need to add unselectable="on" attribute onto each element */
	-moz-user-select: none;
	/* These user-select properties are inheritable, used to prevent text selection */
	-webkit-user-select: none;
	-ms-user-select: none;
	/* From IE10 only */
	user-select: none;
	/* Not valid CSS yet, as of July 2012 */
	-webkit-user-drag: none;
	/* Prevents dragging of images/divs etc */
	user-drag: none;
}

/*************** Loading Animation **************/
.loading {
	position: absolute;
	width: 100%;
	height: 100%;
	background: #272748;
}

.loading img {
	width: calc(var(--screen)*15px);
	height: calc(var(--screen)*15px);
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/*************** End Message Information **************/

/****************** First loading in portrait view *********************/

@media screen and (orientation:portrait) {

	/****************** Carousel **************************/
	
	/*************** Logo **************/
	.firstLoading #logo img {
/*		width: auto; */
		height: calc(var(--screen) * 25px);
		max-height: calc(var(--screen) * 25px);
	}

	
	.firstLoading #logo {
		display: block;
		position: fixed;
		bottom: calc(var(--screen) * 10px);
		left: 50%;
		transform: translateX(-50%);
		z-index: 100;
	}

	/*************** End Logo **************/

	/*************** carousel Carousel ****************/

	.carousel {
		height: calc(var(--screen) * 100px);
		width: calc(var(--screen) * 100px);
		position: fixed; 
		top : calc(var(--screen) * 80px);
	}

	.carousel img {
		height: calc(var(--screen) * 100px);
		width: 100%;
		max-width: 100%;
		max-height: calc(var(--screen) * 100px);
	}

	/************** End Carousel ******************/ 
}

/*************** Size to adapt of different screen size and orientation ***********/

@media screen and (orientation:landscape) {

	/*************** Logo **************/
	.firstLoading #logo {
		position: fixed;
		bottom: calc(var(--screen) * 5px);
		left: 50%;
		transform: translateX(-50%);
		z-index: 100;
	}

	.firstLoading #logo img {
		width: calc(var(--screen) * 60px);
		max-height: calc(100vh - var(--screen) * 105px);
	}

	/*************** End Logo **************/

	/*************** carousel Carousel ****************/
	.carousel {
		width: calc(var(--screen) * 80px) ;
		height: calc(var(--screen) * 80px) ;
		top : calc(var(--screen) * 70px);
	}

	.carousel img {
		height: calc(var(--screen) * 80px);
		width: 100%;
		max-width: 100%;
		max-height: calc(var(--screen) * 80px);
	}

	/************** End Carousel ******************/ 

	:root {
		--minimap : 25vh;
	}
	:root {
		--toto : calc( ((100vh + 40px) / 180) - 1);
	}
}

@media screen and (orientation:portrait) {

	:root {
		--minimap : 25vw;
	}
	:root {
		--toto : calc( ((100vw + 40px) / 180) + 1);
	}
}

/*********************************************************************/
/**																	**/
/**						GLOBAL DESIGN PANEL							**/
/**																	**/
/*********************************************************************/

.iBIMButton {
	position: absolute;
	background-color: white;
	border-radius: 50%;
	height: calc(var(--screen) * 13px);
	width: calc(var(--screen) * 13px);
	border: calc(var(--screen) * 0.2px) solid #F04020;
}

.screenPad .iBIMButton, .keyboardPad .iBIMButton, .gamePad .iBIMButton {
	margin: calc(var(--screen) * 1.8px);
}

.vrPad .iBIMButton {
	margin: calc(var(--screen) * 1.1px);
}

.vrPad .iBIMButton.selected {
	background-color: #F04020;
}

.iBIMButton:hover {
	background-color: #F04020;
}

.iBIMButton img {
	width: calc(var(--screen) * 9px);
	height: calc(var(--screen) * 9px);
	margin: calc(var(--screen) * 2px);
}

.iBIMButton svg {
	width: calc(var(--screen) * 9px);
	height: calc(var(--screen) * 9px);
	margin: calc(var(--screen) * 2px);
	fill: #F04020;
}

.vrPad .iBIMButton.selected svg {
	fill: #FFFFFF;
}

.iBIMButton:hover svg {
	fill: #FFFFFF;
}

.iBIMSmallButton {
	position: absolute;
	background-color: white;
	border-radius: 50%;
	height: calc(var(--screen) * 8px);
	width: calc(var(--screen) * 8px);
	margin: calc(var(--screen) * 0.8px);
	border: calc(var(--screen) * 0.2px) solid #F04020;
}

.iBIMSmallButton:hover {
	background-color: #F04020;
}

.iBIMSmallButton img {
	width: calc(var(--screen) * 6px);
	height: calc(var(--screen) * 6px);
	margin: calc(var(--screen) * 1px);
}

.iBIMSmallButton svg {
	width: calc(var(--screen) * 6px);
	height: calc(var(--screen) * 6px);
	margin: calc(var(--screen) * 1px);
	fill: #F04020;
}

.iBIMSmallButton:hover svg {
	fill: #FFFFFF;
}

.accountButton {
	position: absolute;
	background-color: white;
	border-radius: 50%;
	height: calc(var(--screen) * 13px);
	width: calc(var(--screen) * 13px);
	border: calc(var(--screen) * 0.2px) solid #F04020;
}

.vrPad .accountButton.selected {
	background-color: #F04020;
}

.accountButton.disabled {
	border-color: #777777;
}

.screenPad .accountButton, .keyboardPad .accountButton, .gamePad .accountButton {
	margin: calc(var(--screen) * 1.8px);
}

.vrPad .accountButton {
	margin: calc(var(--screen) * 1.1px);
}

.floatingButton {
	width: calc(var(--screen) * 9px);
	height: calc(var(--screen) * 9px);
	margin: calc(var(--screen) * 2.2px);
}

.screenPad#containerPanel, .keyboardPad#containerPanel, .gamePad#containerPanel {
	width: 100%;
	height: 100%;
}

.vrPad#containerPanel {
	height: 640px;
    width: 480px;
}

/*********************************************************************/
/**																	**/
/**						CLOSE PANEL									**/
/**																	**/
/*********************************************************************/

.closeButton {
	position: absolute;
	top: calc(var(--screen) * 3.5px);
	right: calc(var(--screen) * 3.5px);
	z-index: 90;
	display: none;
}

/*********************************************************************/
/**																	**/
/**						PROGRESS LOADER PANEL						**/
/**																	**/
/*********************************************************************/

.firstLoading {
	position:absolute;
	z-index:100;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background: #272748;
}

.firstLoading #progressBar {
	color: white;
	font-size: calc(var(--screen) * 5px);
	position: fixed;
	top: calc(100% - var(--screen) * 15px);
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(var(--screen) * 90px);
	z-index: 100;
	text-align: center;
}

.firstLoading #progressWhiteBar {
	width: 100%;
	height: calc(var(--screen) * 2px);
	margin-top: calc(var(--screen) * 2px);
	text-align: center;
	background-color: white;
}

.firstLoading #progressRedBar {
	background: #f04020;
	width: 0%;
	height: calc(var(--screen) * 2px);
}

.firstLoading .progressBarShadow {
	-moz-box-shadow: 0px 0px calc(var(--screen) * 1px) #000;
	-webkit-box-shadow: 0px 0px calc(var(--screen) * 1px) #000;
	box-shadow: 0px 0px calc(var(--screen) * 1px) #000;
}

.firstLoading #tuto {
	display: block;
}
/*
.tuto svg {
	width: 100%;
	height: 100%;
}*/
.tuto {
	color: #FFFFFF;
	height: calc(var(--screen)*100px); 
	width: calc(var(--screen)*100px);
	padding-bottom: calc(var(--screen)*20px);
}

.titleTuto {
	font-size: calc(var(--screen) * 4px);
	margin: calc(var(--screen) * 1px) auto;
}

.containerButtonTutoPulse {
	perspective: 1000;
	backface-visibility: hidden;
}
  
.buttonTutoPulse {
	position: relative;
	margin: calc(var(--screen) * 6px) auto;;
	padding: calc(var(--screen) * 2px) calc(var(--screen) * 3.5px);
	display: block;
	font-family: arlrdbd;
	font-style: normal;
	font-weight: 100;
	font-size: calc(var(--screen) * 3.8px);
	text-transform: uppercase;
	text-align: center;
	color: #272748;
	border: calc(var(--screen) * 0.2px) solid #272748;
	border-radius: calc(var(--screen) * 4.5px);
	background: white;
	cursor: pointer;
	box-shadow: 0 0 0 0 #FFF8;
	animation: pulseTuto 1.5s infinite;
}

.buttonTutoPulse:hover {
	animation: none;
	background-color: #272748;
	color: white;
	border-color: #FFFFFF;
}

@keyframes pulseTuto {
	0% {
		transform : scale(.9);
	}
	70% {
		transform : scale(1);
		box-shadow: 0 0 0 calc(var(--screen) * 3px) #FFF0;
	}
	100% {
		transform : scale(.9);
		box-shadow: 0 0 0 0 #FFF0;
	}
}

@media screen and (orientation:portrait) {

	.containerButtonTutoPulse {
		margin: calc(var(--screen) * 11px) auto;;
		perspective: 1000;
		backface-visibility: hidden;
	}	
/*	.firstLoading #logo {
		display: block;
		position: fixed;
		bottom: calc(var(--screen) * -5px);
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 100;
	}

	.firstLoading #logo img {
		width: calc(var(--screen) * 80px);
	}

	.carousel {
		height: calc(var(--screen) * 100px);
		width: calc(var(--screen) * 100px);
		position: fixed; 
		top : calc(var(--screen) * 80px);
	}

	.carousel img {
		height: calc(var(--screen) * 100px);
		width: 100%;
		max-width: 100%;
		max-height: calc(var(--screen) * 100px);
	}*/
}
/*
@media screen and (orientation:landscape) {

	.firstLoading #logo {
		position: fixed;
		bottom: calc(var(--screen) * -15px);
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 100;
	}

	.carousel {
		width: calc(var(--screen) * 90px) ;
		height: calc(var(--screen) * 90px) ;
		top : calc(var(--screen) * 50px);
	}

	.carousel img {
		height: calc(var(--screen) * 80px);
		width: 100%;
		max-width: 100%;
		max-height: calc(var(--screen) * 80px);
	}

	.tuto img {
		max-height: 75%;
	}

	.tuto {
		margin-top: calc(var(--screen)*20px);
	}
}
*/
.nextLoading {
	position:absolute;
	z-index:100;
}

.nextLoading #logo {
	display: none;
}

.nextLoading #carousel {
	display: none;
}

.nextLoading #tuto {
	display: none;
}

.nextLoading #progressBar {
	color: #f04020;
	font-size: calc(var(--screen) * 4px);
	position: fixed;
	top: calc(var(--screen) * 3.5px);
	left: calc(((100vw - var(--screen) * 104px) / 2) + var(--screen) * 33px );
	width: calc(var(--screen) * 52px);
	z-index: 100;
	text-align: center;
}

.nextLoading #progressWhiteBar {
	width: 100%;
	height: calc(var(--screen) * 1px);
	margin-top: calc(var(--screen) * 2px);
	text-align: center;
	background-color: white;
}

.nextLoading #progressRedBar {
	width: 0%;
	height: calc(var(--screen) * 1px);
	background: #f04020;
}

.nextLoading .progressBarShadow {
	-moz-box-shadow: 0px 0px calc(var(--screen) * 0.5px) #000;
	-webkit-box-shadow: 0px 0px calc(var(--screen) * 0.5px) #000;
	box-shadow: 0px 0px calc(var(--screen) * 0.5px) #000;
}

#progressText {
	margin-block-start: 0;
	margin-block-end: 0;
	letter-spacing: calc(var(--screen) * 0.2px);
	text-shadow: rgb(0, 0, 0) 0px 0px calc(var(--screen) * 0.3px);
}

/*********************************************************************/
/**																	**/
/**						JOYSTICK PANEL								**/
/**																	**/
/*********************************************************************/

.leftJoystickCloseButton {
	bottom: calc(var(--screen) * 39px);
    left: 0;
	z-index: 22;
}

.rightJoystickCloseButton {
	bottom: calc(var(--screen) * 39px);
    right: 0;
	z-index: 22;
}

.leftJoystickOpenButton {
	/* left: calc(var(--screen) * 2px); */
	left: 0px;
	bottom: calc(var(--screen) * 18px);
}

.rightJoystickOpenButton {
	/* right: calc(var(--screen) * 2px); */
	right: 0px;
	bottom: calc(var(--screen) * 18px);
}

.leftJoystickBox {
	position: absolute;
	width: calc(var(--screen) * 50px);
	height: calc(var(--screen) * 50px);
	left: calc(var(--screen) * -1.5px);
	bottom: calc(var(--screen) * -1.5px);
	-webkit-transform-origin: calc(var(--screen) * 8.5px) 50%;
	-moz-transform-origin: calc(var(--screen) * 8.5px) 50%;
	-o-transform-origin: calc(var(--screen) * 8.5px) 50%;
	transform-origin: calc(var(--screen) * 8.5px) 50%;
}

.leftJoystickBackground {
	position: absolute;
	width: calc(var(--screen) * 50px);
	height: calc(var(--screen) * 50px);
	left: 0;
	bottom: 0;
	z-index: 20;
	/* -webkit-transform-origin: calc(var(--screen) * 8.5px) 50%;
	-moz-transform-origin: calc(var(--screen) * 8.5px) 50%;
	-o-transform-origin: calc(var(--screen) * 8.5px) 50%;
	transform-origin: calc(var(--screen) * 8.5px) 50%; */
}

.leftJoystickButton {
	position: absolute;
	width: calc(var(--screen) * 50px);
	height: calc(var(--screen) * 50px);
	left: 0;
	bottom: 0;
	z-index: 21;
	/* -webkit-transform-origin: calc(var(--screen) * 8.5px) 50%;
	-moz-transform-origin: calc(var(--screen) * 8.5px) 50%;
	-o-transform-origin: calc(var(--screen) * 8.5px) 50%;
	transform-origin: calc(var(--screen) * 8.5px) 50%; */
}

.rightJoystickBox {
	position: absolute;
	width: calc(var(--screen) * 50px);
	height: calc(var(--screen) * 50px);
	right: calc(var(--screen) * -1.5px);
	bottom: calc(var(--screen) * -1.5px);
	-webkit-transform-origin: calc(100% - var(--screen) * 8.5px) 50%;
	-moz-transform-origin: calc(100% - var(--screen) * 8.5px) 50%;
	-o-transform-origin: calc(100% - var(--screen) * 8.5px) 50%;
	transform-origin: calc(100% - var(--screen) * 8.5px) 50%;
}

.rightJoystickBackground {
	position: absolute;
	width: calc(var(--screen) * 50px);
	height: calc(var(--screen) * 50px);
	right: 0;
	bottom: 0;
	z-index: 20;
	/* -webkit-transform-origin: calc(100% - var(--screen) * 8.5px) 50%;
	-moz-transform-origin: calc(100% - var(--screen) * 8.5px) 50%;
	-o-transform-origin: calc(100% - var(--screen) * 8.5px) 50%;
	transform-origin: calc(100% - var(--screen) * 8.5px) 50%; */
}

.rightJoystickButton {
	position: absolute;
	width: calc(var(--screen) * 50px);
	height: calc(var(--screen) * 50px);
	right: 0;
	bottom: 0;
	z-index: 21;
	/* -webkit-transform-origin: calc(100% - var(--screen) * 8.5px) 50%;
	-moz-transform-origin: calc(100% - var(--screen) * 8.5px) 50%;
	-o-transform-origin: calc(100% - var(--screen) * 8.5px) 50%;
	transform-origin: calc(100% - var(--screen) * 8.5px) 50%; */
}

.gyro {
	position: absolute;
	display: none;
	z-index: 20;
	bottom: calc(var(--screen) * 1px);
    left: calc(50% - var(--screen) * 6.5px);
}

body.chat {
	cursor: url("../images/actions/chat.svg") 18 18, pointer;
	/* cursor: url("../images/pictos.svg#chat") 4 4, pointer; */
	/* cursor: url('data:image/svg+xml;utf8,<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 512 512"><use xlink:href="../images/actions/chat.svg#symbol"/></svg>') 18 18, pointer; */
}

body.trigger {
	cursor: url("../images/actions/trigger.svg") 18 18, pointer;
	/* cursor: url("../images/pictos.svg#trigger") 4 4, pointer; */
}

body.take {
	cursor: url("../images/actions/take.svg") 18 18, pointer;
	/* cursor: url("../images/pictos.svg#take") 4 4, pointer; */
}

body.video {
	cursor: url("../images/actions/video.svg") 18 18, pointer;
	/* cursor: url("../images/pictos.svg#take") 4 4, pointer; */
}

body.image {
	cursor: url("../images/actions/image.svg") 18 18, pointer;
	/* cursor: url("../images/pictos.svg#take") 4 4, pointer; */
}

body.animable {
	cursor: url("../images/actions/animable.svg") 18 18, pointer;
}

body.lightable {
	cursor: url("../images/actions/lightable.svg") 18 18, pointer;
}

body.soundable {
	cursor: url("../images/actions/soundable.svg") 18 18, pointer;
}

body.texturable {
	cursor: url("../images/actions/texturable.svg") 18 18, pointer;
}

body.videoable {
	cursor: url("../images/actions/videoable.svg") 18 18, pointer;
}

body.zoomable {
	cursor: url("../images/actions/zoomable.svg") 18 18, pointer;
}

body.select {
	cursor: url("../images/actions/select.svg") 18 18, pointer;
}

body.crosshair {
	cursor: url("../images/crosshair.svg") 18 18, pointer;
}

/*********************************************************************/
/**																	**/
/**							CROSS PANEL								**/
/**																	**/
/*********************************************************************/

#crossPanel {
	position: absolute;
	top:50%;
	left:50%;
}

/*********************************************************************/
/**																	**/
/**						MENU (SEARCH) PANEL							**/
/**																	**/
/*********************************************************************/

.search {
	position: absolute;
	width: calc(var(--screen) * 80px);
	height: calc(var(--screen) * 8.2px);
	line-height: calc(var(--screen) * 10px);
	font-size: calc(var(--screen) * 4.5px);
	right: 0px;
	margin: calc(var(--screen) * 3px) calc(var(--screen) * 18px);
	border: calc(var(--screen) * 0.2px) solid #F04020;
	border-radius: calc(var(--screen) * 8px);
	padding: calc(var(--screen) * 1.2px) calc(var(--screen) * 4px);}

.vrPad .search {
	max-width: calc(480px - calc(var(--screen) * 18px));
}

.autocomplete-suggestion {
	position: relative;
	padding: calc(var(--screen) * 1px);
	line-height: calc(var(--screen) * 10px);
	font-size: calc(var(--screen) * 3.5px);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #272748;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	padding-left: calc(var(--screen) * 3.1px);
	padding-right: calc(var(--screen) * 3.1px);
	height: calc(var(--screen)*10px);
	transition: height .5s ease-in-out;
	/* border-bottom: #F04020 calc(var(--screen) * 0.2px) solid; */
}

.autocomplete-suggestions {
	text-align: left;
	cursor: default;
	background: #fff;
	box-shadow: -1px 1px 3px rgba(0, 0, 0, .1);
	position: absolute;
	display: none;
	z-index: 79;
	max-height: 70vh;
	overflow: hidden;
	overflow-y: auto;
	box-sizing: border-box;
	scrollbar-width: none;
	border: #F04020 calc(var(--screen)*0.2px) solid;
	border-radius: calc(var(--screen)*8px);
}

.autocomplete-suggestions::-webkit-scrollbar {
	display: none;
}

.autocomplete-suggestion b {
	font-weight: normal;
	color: #f04020;
}

.autocomplete-suggestion:hover, .autocomplete-suggestion.selected {
	background-color: #f04020;
	color: #fff;
	/* color: #272748; */
}

.autocomplete-suggestion:hover b, .autocomplete-suggestion.selected b {
	font-weight: bold;
	color: #272748;
}

.autocomplete-suggestion .picto {
	height: calc(var(--screen) * 6.8px);
	width: calc(var(--screen) * 6.8px);
	position: absolute;
	top: calc(var(--screen) * 2px);
	left: calc(var(--screen) * 3.1px);
	fill: #F04020;
}

.autocomplete-suggestion:hover .picto, .autocomplete-suggestion.selected .picto {
	fill: #FFFFFF;
}

.autocomplete-suggestion .arrow {
	height: calc(var(--screen) * 4.8px);
	width: calc(var(--screen) * 4.8px);
	position: absolute;
	right: calc(var(--screen) * 3.1px);
	top: calc(var(--screen) * 3px);	
	fill: #F04020;
	transition: transform .5s ease-in-out;
	/* -webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;*/
	transform-origin: 50% 25%;
	transform: rotate(0);
}

.autocomplete-suggestion.extended .arrow {
	/* transform-origin: 50% 50%; */
	transform-origin: 50% 25%;
	transform: rotate(180deg);
}

.autocomplete-suggestion:hover .arrow, .autocomplete-suggestion.selected .arrow {
	fill: #FFFFFF;
}

.autocomplete-suggestion .title {
	position: absolute;
	top: calc(var(--screen)*2px);
	left: calc(var(--screen) * 13px);
	display: inline-block;
	width: calc(var(--screen) * 65px);
	overflow-x: hidden;
	overflow-y: hidden;
	text-overflow: ellipsis;
	line-height: calc(var(--screen) * 6.8px);
}

.autocomplete-suggestion .card {
	/* display: none; */
	/* z-index: 40; */
	z-index: 70;
	width: calc(var(--screen) * 84px);
	position: absolute;
	top: calc(var(--screen) * 10px);
	right: calc(var(--screen) * -3.1px);
	/* height: calc(var(--screen) * 91px); */
	/* transition: all .5s ease-in-out; */
}

.autocomplete-suggestion .interactorDescription {
	margin-bottom: calc(var(--screen)*2px);
	margin-top: calc(var(--screen)*2px);
	width: calc(var(--screen)*70px);
	margin-left: auto;
	margin-right: auto;
	max-height: calc(var(--screen) * 77px);
	line-height: calc(var(--screen) * 4.5px);
	text-align: left;
}

.autocomplete-suggestion .sceneIncluded .interactorDescription {
	margin-left: calc(var(--screen)*3px);
	width: calc(var(--screen)*44px);
	max-height: calc(var(--screen) * 38px);
	overflow-y: scroll;
}

.autocomplete-suggestion .interactorDescription span {
	font-size: calc(var(--screen)*3px);
	line-height: calc(var(--screen) * 3px);
	word-wrap: break-word;
	white-space: normal;
}

.autocomplete-suggestion #interactorActionButtons {
	width: calc(var(--screen) * 77px);
	height: calc(var(--screen) * 11px);
	display: flex;
	justify-content: space-evenly;
}

.autocomplete-suggestion .autocomplete-separator {
	position: absolute;
	bottom: 0px;
	height: calc(var(--screen)*0.2px);
	width: calc(var(--screen) * 82px);
	border-bottom: #F04020 calc(var(--screen) * 0.2px) solid;
}

.autocomplete-suggestion:last-child .autocomplete-separator {
	display: none;
}

.searchButtonDiv {
	position: absolute;
}

.screenPad .searchButtonDiv, .keyboardPad .searchButtonDiv, .gamePad .searchButtonDiv {
	top: 0px;
	right: 0px;
}

.vrPad .searchButtonDiv {
	top: calc(640px - calc(var(--screen) * 32.3px));
	/* right: calc(240px - calc(var(--screen) * 16.3px)); */
	right: 240px;
}

.vrPad #searchContent {
	height: calc(var(--screen) * 14.2px);
	width: calc(var(--screen) * 98px);
}

/*********************************************************************/
/**																	**/
/**						MINIMAP PANEL								**/
/**																	**/
/*********************************************************************/

#minimapPanel {
	transition: top 1s, left 1s, width 1s, height 1s;
}

#minimapPanel.reduced {
	/* width:0px;
	height:0px; */
}

.screenPad #minimapPanel.reduced, .keyboardPad #minimapPanel.reduced, .gamePad #minimapPanel.reduced {
	top: calc(var(--screen) * 1.8px);
	left: calc(var(--screen) * 1.8px);
	width:0px;
	height:0px;
}

.vrPad #minimapPanel.reduced {
	top: auto;
	/* left: calc(50% - calc(var(--screen) * 34.1px));
	bottom: calc(var(--screen) * 33.4px); */
	height: calc(var(--screen) * 33px);
	width: calc(var(--screen) * 33px);
	/* height: 640px;
	width: 480px; */
}

#minimapPanel.expanded {
	top: 0px;
	left: 0px;
	width:100%;
	height:100%;
}

.minimapMask {
	transition: width 1s, height 1s, border-radius 1s;
	background-color: white;
	overflow: hidden;
	position: absolute;
	border-radius: calc(var(--screen) * 4px);
}

#minimapPanel.reduced .minimapMask {
	width: calc(var(--screen) * 33px);
	height: calc(var(--screen) * 33px);
	border: calc(var(--screen) * 0.2px) solid #F04020;
	border-radius: calc(var(--screen) * 4px);
}

#minimapPanel.expanded .minimapMask {
	width: 100vw;
	height: 100vh;
	border-radius: 0px;
}

.minimapAnimation {
	transition: left 1s, top 1s, transform 1s, transform-origin 1s;
}

/* .expanded .minimapBox {
	transition: left 0.2s, top 0.2s;
} */

.minimapCanvas {
	position: absolute;
	z-index: 60;
}

.minimapReduced {
	position: absolute;
}

.minimapBullet {
	width: calc(var(--screen) * 33px);
	height: calc(var(--screen) * 33px);
	pointer-events: none;
	transition: transform 1s, left 1s, top 1s;
	transform-origin: 50% calc(50% + calc(var(--screen) * 6.6px));
}

.minimapFloor {
	transition: transform 1s;
	width: calc(var(--screen) * 33px);
	height: calc(var(--screen) * 33px);
	left: calc(var(--screen) * -19px);
	top: calc(var(--screen) * -14px);
	-webkit-transform: rotate(-10deg);
	-moz-transform: rotate(-10deg);
	-o-transform: rotate(-10deg);
	transform: rotate(-10deg);
	z-index: 61;
}

.minimapFloorName {
	/* width: calc(var(--screen) * 86px);
	left: 0px;
	top: 0px;
	padding-left: calc(var(--screen) * 20px);
	line-height: calc(var(--screen) * 95px); */
	font-size: calc(var(--screen) * 3px);
	position: absolute;
	top: calc(var(--screen) * 8px);
	left: calc(var(--screen) * 13px);
	background-color: white;
	padding: calc(var(--screen) * 1px);
	border: solid calc(var(--screen) * 0.2px) #F04020;
	border-radius: calc(var(--screen) * 4px);
	white-space: nowrap;
}

.minimapMyDiv {
	/* width: calc(var(--screen) * 49px); */
	height: calc(var(--screen) * 8px);
	display: flex;
	align-items: center;
}

.minimapMyCheck {
	width: calc(var(--screen) * 4px);
	height: calc(var(--screen) * 4px);
	/* margin-top: calc(var(--screen) * 2px); */
	margin-right: calc(var(--screen) * 2px);
}

.minimapMyIcon {
	width: calc(var(--screen) * 8px);
	height: calc(var(--screen) * 8px);
	left: calc(var(--screen) * 8px);
}

.minimapMyText {
	width: calc(var(--screen) * 37px);
	line-height: calc(var(--screen) * 8px);
	font-size: calc(var(--screen) * 4px);
	left: calc(var(--screen)*18px);
	margin-left: calc(var(--screen) * 2px);
}

.minimapExpandButton {
	--color: #F04020;
	--colorBG: #FFFFFF;
	--strokeColor: #F04020;
	--strokeWidth: calc(var(--screen) * 0.2px);
	z-index: 61;
	position: absolute;
	opacity: 1;
	transition: opacity 1s;
	top: calc(var(--screen) * -0.2px);
	left: calc(var(--screen) * -0.2px);
}

.vrPad .minimapExpandButton {
	display: none;
}

.expanded .minimapExpandButton {
	opacity: 0;
}

.minimapExpandButton:hover {
	--color: #FFFFFF;
	--colorBG: #F04020;
	--strokeColor: #F04020;
	--strokeWidth: calc(var(--screen) * 0.2px);
}

.minimapExpandButton svg {
    /* width: calc(var(--screen) * 33px);
	height: calc(var(--screen) * 33px); */
	width: calc(var(--screen) * 15.5px);
	height: calc(var(--screen) * 15.5px);
	fill: #FFFFFF;
	stroke: #F04020;
	stroke-width: calc(var(--screen) * 0.2px);
}

.minimapElements {
	position: absolute;
	z-index: 62;
}

.minimapMarker {
	position: absolute;
	background-color: #F04020;
	border-radius: 50%;
	color: white;
	width: calc(calc(var(--screen) * 4px) / var(--minimapScale));
	height: calc(calc(var(--screen) * 4px) / var(--minimapScale));
}

.minimapMarker span {
	font-size: calc(calc(var(--screen) * 4px) / var(--minimapScale));
}

/*********************************************************************/
/**																	**/
/**						VIDEO PANEL									**/
/**																	**/
/*********************************************************************/

.screenPad #videoPanel, .keyboardPad #videoPanel, .gamePad #videoPanel {
	display: none;
	/* width: 100%; */
}

.screenPad #videoPanel.opened, .keyboardPad #videoPanel.opened, .gamePad #videoPanel.opened {
	display: block;
}

.screenPad #videoPanel.opened.expanded, .keyboardPad #videoPanel.opened.expanded, .gamePad #videoPanel.opened.expanded {
	width: 100%;
}

.videoContent {
	position: absolute;
	border: none;
	border-radius: 1%;
}

.screenPad .videoContent {
	left: 50vw;
	/* top: 50%; */
	/* left: 50%; */
	width: calc(var(--screen) * 97px);
	height: calc(var(--screen) * 70px);
	transform: translate(-50%,-50%);
}

.keyboardPad .videoContent, .gamePad .videoContent {
	width: calc(var(--screen) * 65px);
	height: calc(var(--screen) * 45px);
	transform: translate(-50%,-50%);
}

.vrPad .videoBox {
	width: calc(var(--screen) * 85px);
	height: calc(var(--screen) * 65px);
}

.vrPad .videoContent {
	width: calc(var(--screen) * 80px);
	height: calc(var(--screen) * 60px);
	/* left: 51.3915px; */
	/* bottom: 475px; */
	left: calc(var(--screen)*5px);
	bottom: calc(var(--screen)*5px);
	transform: none;
}

.videoBox {
	position:absolute;
	left:50%;
	top:50%;
	height:100%;
}

.screenPad .videoBox, .keyboardPad .videoBox, .gamePad .videoBox {
	transition: all .5s ease-in-out;
}

.vrPad .videoBox {
	transition: none;
}

.screenPad .videoBox.reduced, .keyboardPad .videoBox.reduced, .gamePad .videoBox.reduced {
	transform-origin: 0% 0%;
	-webkit-transform: scale(0.01);
	-moz-transform: scale(0.01);
	-o-transform: scale(0.01);
	transform: scale(0.01);
	opacity: 0.1;
}

.vrPad .videoBox.reduced {
	display: block;
}

.videoBox.expanded {
	transform-origin: 0% 0%;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}

.videoButtonDiv {
	position: absolute;
}

.opened .videoButtonDiv {
	display: block;
}

.screenPad .opened.expanded .videoButtonDiv, .keyboardPad .opened.expanded .videoButtonDiv, .gamePad .opened.expanded .videoButtonDiv {
	display: none;
}

.vrPad .opened.expanded .videoButtonDiv {
	display: block;
}

.screenPad .videoButtonDiv, .keyboardPad .videoButtonDiv, .gamePad .videoButtonDiv {
	left: 0px;
	top: 50%;
}

.vrPad .videoButtonDiv {
	top: calc(100% - calc(var(--screen) * 17.4px));
	left: calc(240px + calc(var(--screen) * 16.3px));
}

#playButton,
#replayButton,
#pauseButton {
	/* top: calc(var(--screen) * 15px); */
	top: 0px;
}

.screenPad #playButton, .vrPad #playButton,
.screenPad #replayButton, .vrPad #replayButton,
.screenPad #pauseButton, .vrPad #pauseButton {
	width: calc(var(--screen) * 30px);
	height: calc(var(--screen) * 30px);
}

.keyboardPad #playButton, .gamePad #playButton,
.keyboardPad #replayButton, .gamePad #replayButton,
.keyboardPad #pauseButton, .gamePad #pauseButton {
	width: calc(var(--screen) * 20px);
	height: calc(var(--screen) * 20px);
}

#stopButton {
	position: relative;
	/* top: calc(var(--screen) * 20px); */
}

.screenPad #stopButton, .vrPad #stopButton {
	width: calc(var(--screen) * 20px);
	height: calc(var(--screen) * 20px);
	top: calc(var(--screen) * 5px);
}

.keyboardPad #stopButton, .gamePad #stopButton {
	width: calc(var(--screen) * 15px);
	height: calc(var(--screen) * 15px);
	top: calc(var(--screen) * 2.5px);
}

#previousButton {
	position: relative;
}

.screenPad #previousButton, .vrPad #previousButton {
	height: calc(var(--screen) * 20px);
	width: calc(var(--screen) * 20px);
	top: calc(var(--screen)*15px);
}

.keyboardPad #previousButton, .gamePad #previousButton {
	height: calc(var(--screen) * 15px);
	width: calc(var(--screen) * 15px);
	top: calc(var(--screen)*5px);
}

#nextButton {
	position: relative;
}

.screenPad #nextButton, .vrPad #nextButton {
	height: calc(var(--screen) * 20px);
	width: calc(var(--screen) * 20px);
	top: calc(var(--screen)*6px);
}

.keyboardPad #nextButton, .gamePad #nextButton {
	height: calc(var(--screen) * 15px);
	width: calc(var(--screen) * 15px);
	top: calc(var(--screen)*1px);
}

#nextButton, #previousButton, #stopButton, #playButton, #replayButton, #pauseButton {
	fill: white;
	stroke :#F04020;
	stroke-width: calc(var(--screen) * 1px);
}

#nextButton:hover, #previousButton:hover, #stopButton:hover, #playButton:hover, #replayButton:hover, #pauseButton:hover {
	fill: #F04020;
}

#speedButtons {
	width: calc(var(--screen) * 30px);
}

.screenPad #speedButtons {
	height: calc(var(--screen) * 58px);
}

.keyboardPad #speedButtons, .gamePad #speedButtons {
	height: calc(var(--screen) * 34px);
}

.vrPad #speedButtons {
	height: calc(var(--screen) * 50px);
}

.screenPad #speedButtons img, .vrPad #speedButtons img {
	width: calc(var(--screen) * 15px);
	height: calc(var(--screen) * 15px);
}

.keyboardPad #speedButtons img, .gamePad #speedButtons img {
	width: calc(var(--screen) * 10px);
	height: calc(var(--screen) * 10px);
}

#speedSlider {
	width: calc(var(--screen) * 3px);
	top: calc(var(--screen) * 5px);
	right: calc(var(--screen) * 6px);
}

.screenPad #speedSlider {
	height: calc(var(--screen) * 50px);
}

.keyboardPad #speedSlider, .gamePad #speedSlider {
	height: calc(var(--screen) * 26px);
}

.vrPad #speedSlider {
	height: calc(var(--screen) * 40px);
}

.noUi-horizontal {
	/* height: calc(var(--screen) * 5px); */
	height: calc(var(--screen) * 3px);
}

.screenPad .noUi-horizontal .noUi-handle, .vrPad .noUi-horizontal .noUi-handle {
	left: calc(var(--screen) * -5px);
	top: calc(var(--screen) * -3.7px);
}

.keyboardPad .noUi-horizontal .noUi-handle, .gamePad .noUi-horizontal .noUi-handle {
	left: calc(var(--screen) * -1px);
	top: calc(var(--screen) * -1.7px);
}

.noUi-vertical {
	width: calc(var(--screen) * 5px);
}

.screenPad .noUi-vertical .noUi-handle, .vrPad .noUi-vertical .noUi-handle {
	left: calc(var(--screen) * -3.7px);
	top: calc(var(--screen) * -5px);
}

.keyboardPad .noUi-vertical .noUi-handle, .gamePad .noUi-vertical .noUi-handle {
	left: calc(var(--screen) * -1.7px);
	top: calc(var(--screen) * -6px);
}

.noUi-handle {
	border: calc(var(--screen) * 0.2px) solid #F04020;
	border-radius: calc(var(--screen) * 5px);
	background: #FFF;
	cursor: default;
}

.screenPad .noUi-handle, .vrPad .noUi-handle {
	width: calc(var(--screen) * 10px);
	height: calc(var(--screen) * 10px);
}

.keyboardPad .noUi-handle, .gamePad .noUi-handle {
	width: calc(var(--screen) * 6px);
	height: calc(var(--screen) * 6px);
}

.noUi-target {
	background: #FFF;
	border-radius: calc(var(--screen) * 2px);
	border: calc(var(--screen) * 0.2px) solid #D3D3D3;
}

/*********************************************************************/
/**																	**/
/**						CHAT PANEL									**/
/**																	**/
/*********************************************************************/

#chatPanel {
	width: 100%;
}

.screenPad #chatPanel, .keyboardPad #chatPanel, .gamePad, #chatPanel {
	height: 100%;
}

.vrPad #chatPanel {
	height: calc(640px - var(--screen) * 33px);
}

.chatBox {
	/*position: fixed;
	TEST VR */
	position: absolute;
	pointer-events: all;
	height: calc(4px + var(--screen) * (45px+ 3.5px + 0.5px + 1.5px + 2 * (1.5px + 0.2px + 0.4px)));
	bottom: 0px;
	/* left: calc(var(--screen) * 15px); */
	border: none;
	border-radius: 1%;
	transition: all .5s ease-in-out;
	display: none;
}

.screenPad .chatBox {
	left: calc(var(--screen) * 17.5px);
	width: calc(100% - var(--screen) * 35px);
}

.keyboardPad .chatBox, .gamePad .chatBox {
	left: calc(var(--screen)*1px);
	width: calc(var(--screen)*90px);
}

.vrPad .chatBox {
	left: calc(var(--screen) * 17.5px);
	/* width: calc(100% - var(--screen) * 35px); */
	width: calc(100% - var(--screen) * 20px);
	bottom: calc(var(--screen) * 16px);
	height: 100%;
	display: block;
}

.vrPad .opened .chatBox {
	display: block;
}

.opened.expanded .chatBox {
	display: block;
}

.opened .chatBox {
	display: block;
}

.chatBoxInPanel {
	position: absolute;
	left: 0px;
	width: calc(var(--screen)*96px);
	padding-left: calc(var(--screen)*1.5px);
}

.chatBoxReduced {
	width: calc(var(--screen) * 13px);
	height: calc(var(--screen) * 13px);
	bottom: calc(var(--screen) * 1px);
	left: calc(50% - var(--screen) * 6.7px);
	/* (13+2*0.2)/2 = 6.7  */
	overflow:hidden;
	/* border: calc(var(--screen) * 0.2px) solid #F04020; */
	border-radius: 50%;
	transition: all .5s ease-in-out;
}

.chatBoxContainer {
	position: absolute;
	width: 100%;
	font-family: Helvetica, Arial, sans-serif;
	color: #272748;
	display: flex;
	flex-direction: column;
	transition: all .25s ease-in-out;
}

.chatBoxContainer.showInput {
	bottom: 0px;
}

.chatBoxContainer.hideInput {
	bottom: 0px;
	/*bottom: calc(-4px - var(--screen) * (3.5px + 0.5px + 1.5px + 2 * (1.5px + 0.2px + 0.4px)));*/
}

@media (orientation:landscape) {
	.chatBoxMessagesMask {
		position: absolute;
		bottom: calc(4px + var(--screen) * (3.5px + 0.5px + 1.5px + 2 * (1.5px + 0.2px + 0.4px)));
		overflow-x:hidden;
		overflow-y:scroll;
		scrollbar-width: none;
		display: flex;
		flex-direction: column-reverse;
		-webkit-mask-image: linear-gradient(to top, #000, #000 53%, #0000 100%);
		-moz-mask-image: linear-gradient(to top, #000, #000 53%, #0000 100%);
		-o-mask-image: linear-gradient(to top, #000, #000 53%, #0000 100%);
		mask-image: linear-gradient(to top, #000, #000 53%, #0000 100%);
		width: 100%;
		/* margin-left: calc(var(--screen) * 2px);
		margin-right: calc(var(--screen) * 2px); */
	}

	.chatBoxMessagesMask::-webkit-scrollbar {
		display: none;
	}

	.screenPad .chatBoxMessagesMask, .keyboardPad .chatBoxMessagesMask, .gamePad .chatBoxMessagesMask {
		height: calc(var(--screen) * 42px);
	}
}

@media (orientation:portrait) {
	.chatBoxMessagesMask {
		position: absolute;
		bottom: calc(4px + var(--screen) * (3.5px + 0.5px + 1.5px + 2 * (1.5px + 0.2px + 0.4px)));
		overflow-x:hidden;
		overflow-y:scroll;
		scrollbar-width: none;
		display: flex;
		flex-direction: column-reverse;
		-webkit-mask-image: linear-gradient(to top, #000, #000 53%, #0000 100%);
		-moz-mask-image: linear-gradient(to top, #000, #000 53%, #0000 100%);
		-o-mask-image: linear-gradient(to top, #000, #000 53%, #0000 100%);
		mask-image: linear-gradient(to top, #000, #000 53%, #0000 100%);
		width: 100%;
	}

	.chatBoxMessagesMask::-webkit-scrollbar {
		display: none;
	}

	.screenPad .chatBoxMessagesMask, .keyboardPad .chatBoxMessagesMask, .gamePad .chatBoxMessagesMask {
		height: calc(var(--screen) * 50px);
	}
}

.vrPad .chatBoxMessagesMask {
	height: calc(var(--screen) * 30px);
}

.chatBoxInPanel .chatBoxMessagesMask{
	min-height: calc(var(--screen) * 50px);
	height: auto;
	max-height: calc(var(--screen) * 90px);
	mask-image: none;
}

.chatBoxMessages {
	margin: calc(var(--screen) * 1.3px);
	text-align: left;
}

.screenPad .chatBoxMessages {
	line-height: calc(4px + var(--screen) * 3.5px);
	font-size: calc(4px + var(--screen) * 2.5px);
}

.vrPad .chatBoxMessages {
	
	line-height: calc(4px + var(--screen) * 3.5px);
	font-size: calc(3px + var(--screen) * 2.5px);
}

.keyboardPad .chatBoxMessages, .gamePad .chatBoxMessages {
	line-height: calc(4px + var(--screen) * 3px);
	font-size: calc(4px + var(--screen) * 2px);
}
  
.chatBoxMessage {
	position: relative;
	border-radius: calc(var(--screen) * 3.7px);
	padding: calc(var(--screen) * 1px) calc(var(--screen) * 3px);
	margin-top: calc(var(--screen) * 0.4px);
	margin-bottom: calc(var(--screen) * 0.4px);
	display: inline-block;
	max-width: 75%;
}

.chatBoxInput {
	position: absolute;
	width: 100%;
	bottom: 0px;
	margin-top: calc(var(--screen) * 0.5px);
	margin-bottom: calc(var(--screen) * 1.5px);
	display: flex;
	transition: transform .3s;
	transform-origin: right;
}

.chatBoxInputButton {
	width: calc(4px + var(--screen) * (3.5px + 2 * 1.5px - 2 * 0.7px));
	height: calc(4px + var(--screen) * (3.5px + 2 * 1.5px - 2 * 0.7px));
	margin: calc(var(--screen) * 0.4px) calc(var(--screen) * 1px);
	padding: calc(var(--screen) * 0.7px);
	border: calc(var(--screen) * 0.2px) solid #F04020;
	background: white;
	border-radius: 50%;
}

.chatBoxInputText {
	/* width: calc(100% - 2 * (4px + var(--screen) * (3.5px + 2 * (1.5px + 0.2px + 0.1px + 1px))) - var(--screen) * (2 * (3px + 0.2px))); */
	width: calc(100% - var(--screen) * (2 * (3px + 0.2px + 10px)));
	border: calc(var(--screen) * 0.2px) solid #F04020;
	line-height: calc(4px + var(--screen) * 3.5px);
	-moz-block-height: calc(4px + var(--screen) * 1.5px);
	font-size: calc(4px + var(--screen) * 2.5px);
	border-radius: calc(var(--screen) * 5px);
	/* padding: calc(var(--screen) * 1.5px) calc(var(--screen) * 3px); */
	padding: calc(var(--screen) * 2px) calc(var(--screen) * 3px);
	/* margin: calc(var(--screen) * 0.4px) calc(var(--screen) * 0px); */
	margin: 0px;
	resize: none;
	font-family: Helvetica, Arial, sans-serif;
}

.chatBoxInputText.unselectable {	
	-moz-user-select: text;
	-webkit-user-select: text;
	-ms-user-select: text;
	user-select: text;
}

#chatBoxMicro.waiting:hover, #chatSTTReduced.waiting:hover {
	background-color: white;
}

#chatBoxMicro.selected {
	background-color: #F04020;
}

#chatBoxMicro.selected svg {
	fill: #FFFFFF;
}
  
.chatBoxBot {
	align-items: flex-start;
}
  
.chatBoxBot .chatBoxMessage {
	color: black;
	margin-right: calc(var(--screen) * 10px);
	background-color: #eee;
	position: relative;
}
  
.chatBoxBot .chatBoxMessage.last:before {
	content: "";
	position: absolute;
	z-index: 0;
	bottom: 0;
	left: calc(var(--screen) * -1.75px);
	height: calc(var(--screen) * 5px);
	width: calc(var(--screen) * 5px);
	background: #eee;
	border-bottom-right-radius: calc(var(--screen) * 3.75px);
}

.chatBoxBot .chatBoxMessage.last:after {
	content: "";
	position: absolute;
	z-index: 1;
	bottom: 0;
	left: calc(var(--screen) * -2.5px);
	width: calc(var(--screen) * 2.5px);
	height: calc(var(--screen) * 5px);
	background: white;
	border-bottom-right-radius: calc(var(--screen) * 2.5px);
}
  
.chatBoxUser {
	align-items: flex-end;
}
  
.chatBoxUser .chatBoxMessage {
	color: white;
	margin-left: calc(var(--screen) * 10px);
	background: linear-gradient(to bottom, #00D0EA 0%, #0085D1 100%);
	background-attachment: fixed;
	position: relative;
}
  
.chatBoxUser .chatBoxMessage.last:before {
	content: "";
	position: absolute;
	z-index: 0;
	bottom: 0;
	right: calc(var(--screen) * -2px);
	height: calc(var(--screen) * 5px);
	width: calc(var(--screen) * 5px);
	background: linear-gradient(to bottom, #00D0EA 0%, #0085D1 100%);
	background-attachment: fixed;
	border-bottom-left-radius: calc(var(--screen) * 3.75px);
}
  
.chatBoxUser .chatBoxMessage.last:after {
	content: "";
	position: absolute;
	z-index: 1;
	bottom: 0;
	right: calc(var(--screen) * -2.5px);
	width: calc(var(--screen) * 2.5px);
	height: calc(var(--screen) * 5px);
	background: white;
	border-bottom-left-radius: calc(var(--screen) * 2.5px);
}
    
.chatButtonsPanel {
	/* position: fixed;
	TEST VR */
	position: absolute;
	align-items: center;
	/* (3*13px + 2*0.2px + 6*1px)/2 = 22.7  */
	display: none;
}

.screenPad .chatButtonsPanel, .keyboardPad .chatButtonsPanel, .gamePad .chatButtonsPanel {
	bottom: calc(var(--screen) * 1px);
	left: calc(50% - var(--screen) * 16.5px);
}

.vrPad .chatButtonsPanel {
	left: calc(240px + calc(var(--screen) * 16.3px));
	bottom: 0px;
	display: inline-flex;
}

.screenPad .opened.expanded .chatButtonsPanel, .keyboardPad .opened.expanded .chatButtonsPanel, .gamePad .opened.expanded .chatButtonsPanel {
	display: none;
}

.opened .chatButtonsPanel {
	display: inline-flex;
}

.vrPad .opened.expanded .chatButtonsPanel {
	display: inline-flex;
}

.screenPad #chatSTTReduced, .keyboardPad #chatSTTReduced, .gamePad #chatSTTReduced,
.screenPad #chatBringBackToBot, .keyboardPad #chatBringBackToBot, .gamePad #chatBringBackToBot {
	display: block;
}

.vrPad #chatSTTReduced, .vrPad #chatBringBackToBot {
	display: none;
}

.chatButton {
	height: calc(var(--screen) * 13px);
	width: calc(var(--screen) * 13px);
	margin: 0px calc(var(--screen) * 1px);
	border: calc(var(--screen) * 0.2px) solid #F04020;
}

#chatBoxButton {
	position:relative;
}

.screenPad #chatBoxButton, .keyboardPad #chatBoxButton, .gamePad #chatBoxButton {
	margin: 0px calc(var(--screen) * 1px);
}

.vrPad #chatBoxButton {
	margin: calc(var(--screen) * 1.1px);
}

.eventLabel {
	text-align: center;
	width: 100%;
	max-width: 100%;
	margin-top: calc(var(--screen)*10px);
}

.eventLabel div {
	display: inline-block;
	background-color: #B0B0B0;
	border-radius: calc(var(--screen) * 5px);
	padding: calc(var(--screen) * 1px);
}

#soundWave {
	transform: translate(-50%, -50%) scale(0.7);
}

#soundWave img {
	width: calc(var(--screen) * 30px);
	height: calc(var(--screen) * 10px);
}

.chatBoxMessage video, .chatBoxMessage img {
	width: 100%;
}

/*********************************************************************/
/**																	**/
/**						ALERT PANEL									**/
/**																	**/
/*********************************************************************/

.alertPanel {
	width: calc(var(--screen) * 106px);
	height: calc(var(--screen) * 30px);
}

.alertPanelButton {
	width: calc(var(--screen) * 106px);
	height: calc(var(--screen) * 39px);
}

.alertImage {
	width: calc(var(--screen) * 15px);
	height: calc(var(--screen) * 20px);
	margin: calc(var(--screen) * 5px);
}

.alertTitle {
	width: calc(var(--screen) * 80px);
	height: calc(var(--screen) * 8px);
	margin-left: calc(var(--screen) * 24px);
	margin-top: calc(var(--screen) * 5px);
	font-size: calc(var(--screen) * 4.4px);
}

.alertDescription {
	width: calc(var(--screen) * 80px);
	height: calc(var(--screen) * 15px);
	margin-left: calc(var(--screen) * 24px);
	margin-top: calc(var(--screen) * 13.5px);
	font-size: calc(var(--screen) * 3.5px);
}

.alertButton {
	width: calc(var(--screen) * 30px);
	height: calc(var(--screen) * 7px);
	margin: calc(var(--screen) * 2px);
	margin-left: calc(var(--screen) * 74px);
	margin-top: calc(var(--screen) * 30px);
	font-size: calc(var(--screen) * 4px);
}

/*********************************************************************/
/**																	**/
/**						LAUNCHER PANEL								**/
/**																	**/
/*********************************************************************/

#boxes.stickLeft {
	/* left: calc(50% - var(--screen) * 52px); */
	left: calc((100vw - var(--screen) * 210px) * 2 / 5);
	transform: translateY(-50%);
}

#keyLabelContainer {
	padding-bottom: calc(var(--screen)*2px);
	padding-left: calc(var(--screen)*10px);
	padding-right: calc(var(--screen)*10px);
	padding-top: calc(var(--screen)*6px);
}

#keyLabelContainer.stickRight {
	min-width: calc(var(--screen) * 50px);
	max-width: 26vw;
	position:absolute;
	bottom: calc(-39vh + (var(--screen) * 16px));
	right: calc((100vw - var(--screen) * 210px) / 5 + var(--screen) * 48px);
	padding: calc(var(--screen)*3px);
}

#myAdvantages {
	z-index: 52;
	position: absolute;
	/* bottom: calc(var(--screen)*10px); */
	bottom: 0px;
	left: 50%;
	transform: translateX(-50%);
	color: #FFFFFF;
	font-size: calc(var(--screen)*3.5px);
	/* text-decoration: underline; */
	font-family: arlrdbd;
	text-transform: uppercase;
	cursor: pointer;
	border: white calc(var(--screen)*0.35px) solid;
	border-radius: calc(var(--screen)*4px);
	padding-left: calc(var(--screen)*2.5px);
	padding-right: calc(var(--screen)*2.5px);
}

#authentificationTitle, #anonymTitle, #creationTitle {
	font-size: calc(var(--screen)*6.5px);
	margin: 0px;
	letter-spacing: calc(var(--screen)*0.1px);
}

.box.reduced #authentificationTitle, .box.reduced #anonymTitle, .box.reduced #creationTitle {
	font-size: calc(var(--screen) * 3.5px);
}

.box.expanded #authentificationTitle, .box.expanded #anonymTitle, .box.expanded #creationTitle {
	font-size: calc(var(--screen) * 5px);
}

.box {
	transition: height 1s, width 1s, background-color 1s;
	position: absolute;
	offset-path: path('M 50.00,50.00 C 10.00,50.00 0.00,100.00 33.00,100.00 33.00,100.00 67.00,100.00 67.00,100.00 100.00,100.00 90.00,50.00 50.00,50.00 Z');
	offset-rotate: 0deg;
	/* overflow: hidden; */
	color: #FFFFFF;
}

.box.expanded {
	height: calc(var(--screen) * 85px);
	width: calc(var(--screen) * 100px);
	color: white;
}

.box.reduced {
	height: calc(var(--screen) * 20px);
	width: calc(var(--screen) * 45px);
}

#authentificationBox {
	--boxColor: #272748;
	color: #272748;
}

#anonymBox {
	--boxColor: #993344;
	color: #993344;
}

#creationBox {
	--boxColor: #F04020;
	color: #F04020;
}

#authentificationBox.expanded, #anonymBox.expanded, #creationBox.expanded {
	color: #FFFFFF;
}

.boxBorder > div > svg {
	height: calc(var(--screen) *11.5px);
	width: calc(var(--screen) * 11.5px);
	fill: var(--boxColor);
	left: calc(var(--screen) * 3px);
	margin-right: calc(var(--screen) * 3px);
	margin-left: calc(var(--screen) * 3px);
}

.box.reduced .boxBorder > div > svg {
	height: calc(var(--screen) * 8px);
	width: calc(var(--screen) * 8px);
}

.boxBorder {
	border-radius: calc(var(--screen) * 4px);
	border: var(--boxColor) calc(var(--screen)*0.5px) solid;
	transition: height 1s, width 1s, background-color 1s, color 1s;
	height:100%;
	overflow: hidden;
}

.box .boxHeader {
	position: absolute;
	display: flex;
	transition: transform 0.9s, transform-origin 0.9s;
	transform: scale(1);
	transform-origin: calc(var(--screen) * 22.5px) calc(var(--screen) * 10px);
}

.box.expanded .boxHeader {
	/* display: none; */
	transform: scale(0);
	transform-origin: calc(var(--screen) * 50px) 100%;
}

.box.expanded .boxBorder {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: calc(100% - var(--screen) * 2px);
	background-color: var(--boxColor);
}

.box.reduced .boxBorder {
	height: calc(100% - var(--screen) * 1px);
	width: calc(100% - var(--screen) * 1px);
	background-color: #FFFFFF;
}

.boxContent {
	transform: scale(0);
	transition: transform 0.9s;
}

.expanded .boxContent {
	transform: scale(1);
}

.boxSubtitle {
	margin: 0px;
	font-size: calc(var(--screen) * 4.25px);
	line-height: calc(var(--screen) * 7px);
}

.box.reduced .boxSubtitle {
	font-size: calc(var(--screen) * 3px);
	line-height: calc(var(--screen) * 5px);
}

.initPos1 .boxBorder, .initPos2 .boxBorder, .initPos3 .boxBorder {
	height: calc(100% - var(--screen) * 1px);
}

.initPos1 .boxBorder {
	background-color:#FFFFFF;
}

.initPos1 {
	top: calc(var(--screen) * 7.5px);
	left: 50%;
	transform: translateX(-50%);
	height: calc(var(--screen) * 25px);
	width: calc(var(--screen) * 75px);
	offset-path: none;
}

.initPos2 .boxBorder {
	background-color: #FFFFFF;
}

.initPos2 {
	top: calc(var(--screen) * 39.5px);
	transform: translateX(-50%);
	left: 50%;
	height: calc(var(--screen) * 25px);
	width: calc(var(--screen) * 75px);
	offset-path: none;
}

.initPos3 .boxBorder {
	background-color: #FFFFFF;
}

.initPos3 {
	top: calc(var(--screen) * 71.5px);
	left: 50%;
	transform: translateX(-50%);
	height: calc(var(--screen) * 25px);
	width: calc(var(--screen) * 75px);
	offset-path: none;
}

.initPos1 .boxBorder > div, .initPos2 .boxBorder > div, .initPos3 .boxBorder > div {
	height: 100%;
}

.reduced .boxBorder > div, .reduced .boxBorder > div, .reduced .boxBorder > div {
	height: 100%;
}

.initPos1 .boxBorder > div > div, .initPos2 .boxBorder > div > div, .initPos3 .boxBorder > div > div {
	width: calc(var(--screen) * 43px);
}

.expanded .boxBorder > div:nth-child(1) > div:nth-child(2) {
	width: 100%;
	margin-top: calc(var(--screen)*3px);
}

.pos1to2 {
	animation: pos1to2 1s;
	offset-distance: 40.4%;
}

@keyframes pos1to2 {
	0% {
		offset-distance: 0%;
	}
	100% {
		offset-distance: 40.4%;
	}
}

.pos1to3 {
	animation: pos1to3 1s;
	offset-distance: 59.6%;
}

@keyframes pos1to3 {
	0% {
		offset-distance: 100%;
	}
	100% {
		offset-distance: 59.6%;
	}
}

.pos2to1 {
	animation: pos2to1 1s;
	offset-distance: 0%;
}

@keyframes pos2to1 {
	0% {
		offset-distance: 40.4%;
	}
	100% {
		offset-distance: 0%;
	}
}

.pos2to3 {
	animation: pos2to3 1s;
	offset-distance: 59.6%;
}

@keyframes pos2to3 {
	0% {
		offset-distance: 40.4%;
	}
	100% {
		offset-distance: 59.6%;
	}
}

.pos3to1 {
	animation: pos3to1 1s;
	offset-distance: 0%;
}

@keyframes pos3to1 {
	0% {
		offset-distance: 59.6%;
	}
	100% {
		offset-distance: 100%;
	}
}

.pos3to2 {
	animation: pos3to2 1s;
	offset-distance: 40.4%;
}

@keyframes pos3to2 {
	0% {
		offset-distance: 59.6%;
	}
	100% {
		offset-distance: 40.4%;
	}
}

.init1to1 {
	animation: init1to1 1s;
	offset-distance: 100%;
}

@keyframes init1to1 {
	0% {
		offset-distance: 0%;
	}
	100% {
		offset-distance: 100%;
	}
}

.init1to2 {
	animation: init1to2 1s;
	offset-distance: 100%;
}

@keyframes init1to2 {
	0% {
		offset-distance: 0%;
	}
	100% {
		offset-distance: 100%;
	}
}

.init1to3 {
	animation: init1to3 1s;
	offset-distance: 100%;
}

@keyframes init1to3 {
	0% {
		offset-distance: 0%;
	}
	100% {
		offset-distance: 100%;
	}
}

.init2to1 {
	animation: init2to1 1s;
	offset-distance: 100%;
}

@keyframes init2to1 {
	0% {
		offset-distance: 0%;
	}
	100% {
		offset-distance: 100%;
	}
}

.init2to2 {
	animation: init2to2 1s;
	offset-distance: 100%;
}

@keyframes init2to2 {
	0% {
		offset-distance: 0%;
	}
	100% {
		offset-distance: 100%;
	}
}

.init2to3 {
	animation: init2to3 1s;
	offset-distance: 100%;
}

@keyframes init2to3 {
	0% {
		offset-distance: 0%;
	}
	100% {
		offset-distance: 100%;
	}
}

.init3to1 {
	animation: init3to1 1s;
	offset-distance: 100%;
}

@keyframes init3to1 {
	0% {
		offset-distance: 0%;
	}
	100% {
		offset-distance: 100%;
	}
}

.init3to2 {
	animation: init3to2 1s;
	offset-distance: 100%;
}

@keyframes init3to2 {
	0% {
		offset-distance: 0%;
	}
	100% {
		offset-distance: 100%;
	}
}

.init3to3 {
	animation: init3to3 1s;
	offset-distance: 100%;
}

@keyframes init3to3 {
	0% {
		offset-distance: 0%;
	}
	100% {
		offset-distance: 100%;
	}
}

.buttonLauncher {
	font-size: calc(var(--screen)*3.5px);
	border: calc(var(--screen) * 0.2px) solid var(--boxColor);
	background-color: white;
	border-radius: calc(var(--screen)*5px);
	height: calc(var(--screen)*10px);
	color: var(--boxColor);
	min-width: calc(var(--screen) * 20px);
	padding: 0px calc(var(--screen)*4px);
	text-transform: uppercase;
}

.buttonLauncher:hover {
	background-color: var(--boxColor);
	color: white;
	border-color: #FFFFFF;
}

.buttonLauncher:disabled {
	border: calc(var(--screen) * 0.2px) solid #404040;
	background-color: rgb(197, 197, 197);
	color: #404040;
}

.launcherList {
	list-style-type: none;
	font-size: calc(var(--screen)*3.5px);
	text-align: left;
	margin: 0;
	padding-left : 0px;
	scrollbar-width: none;
	padding-bottom: calc(var(--screen) * 5px);
}

.launcherList::-webkit-scrollbar {
	display: none;
}

.launcherList li {
	border-bottom : calc(var(--screen) * 0.2px) solid rgb(161, 161, 161);
	padding : calc(var(--screen) * 1.5px) calc(var(--screen) * 3px);
	color: #FFFFFF;
}

.launcherList li:last-child {
	border-bottom: none;
}

.launcherList li:hover {
	color: #272748;
	background-color: #FFFFFF;
}

.disabled.launcherList span, .disabled.launcherList li:hover {
	color: #777777;
	background-color: none;
}

.launcherList svg {
	fill: #FFFFFF;
	width: calc(var(--screen) * 4px);
	height: calc(var(--screen) * 4px);
}

.launcherList li:hover svg {
	fill: #272748;
}

.disabled.launcherList svg, .disabled.launcherList li:hover svg {
	fill: #777777;
}

.launcherButtonsScreen, .accountButtonsScreen {
	display: flex;
	justify-content: space-around;
	height : calc(var(--screen) * 10px);
	padding-bottom: calc(var(--screen) * 5px);
}

.accountButtonsScreen {
	height: calc(var(--screen) * 7px);
	padding-bottom: calc(var(--screen) * 3.5px);
}

.launcherBlock {
	padding-top: calc(var(--screen) * 5px);
	margin-right: calc(var(--screen) * 5px);
	margin-left: calc(var(--screen) * 5px);
}

.launcherBlock label {
	display: inline-block;
	overflow: hidden;
	white-space: nowrap;
}

.launcherBlock > div {
	display: inline-flex;
}

.reduced .launcherBlock > div {
	display: none;
}

.launcherBlock > div > select {
	height: calc(var(--screen) * 6px);
	font-size: calc(var(--screen) * 3.5px);
	color: #F02040;
	padding: 0px;
	/* margin-bottom: calc(var(--screen)*1px); */
	width: calc(var(--screen)*12px);
	text-align: center;
}

.switch {
	/* margin-top: calc(var(--screen)*4.5px);
	margin-right: calc(var(--screen)*7px); */
	position: relative;
	width: calc(var(--screen) * 13.6px);
	height: calc(var(--screen) * 6.2px);
}

.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
	border-radius: 34px;
	width: calc(var(--screen)*13px);
    height: calc(var(--screen)*5.5px);
	border: solid calc(var(--screen)*0.35px) white;
}

.slider:before {
	position: absolute;
	content: "";
	height: calc(var(--screen)*5px);
    width: calc(var(--screen)*5px);
    left: calc(var(--screen)*0.2px);
    bottom: calc(var(--screen)*0.3px);
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
	border-radius: 50%;
}

input:checked + .slider {
	/* background-color: #2D2D69CC; */
	background-color: var(--boxColor);
}
  
input:focus + .slider {
	box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
	-webkit-transform: translateX(calc(var(--screen) * 7.5px));
	-ms-transform: translateX(calc(var(--screen) * 7.5px));
	transform: translateX(calc(var(--screen) * 7.5px));
}

.sliderYes {
	display: none;
	color: #FFFFFF;
	line-height: calc(var(--screen)*6.5px);
	float: left;
	font-size: calc(var(--screen) * 3.3px);
	margin-left: calc(var(--screen)*1.5px);
}

.sliderNo {
	display: block;
	color: #272748;
	line-height: calc(var(--screen)*6.5px);
	float: right;
	font-size: calc(var(--screen) * 3.3px);
	margin-right: calc(var(--screen)*2px);
}

input:checked + .slider .sliderYes {
	display: block;
}

input:checked + .slider .sliderNo {
	display: none;
}

.launcher-autocomplete-suggestions {
	border-radius: 0;
	max-height: calc(var(--screen) * 60.5px);
}

.launcher-autocomplete-suggestion {
	position: relative;
	padding: calc(var(--screen) * 1px);
	line-height: calc(var(--screen) * 4px);
	font-size: calc(var(--screen) * 3.5px);
	color: #F04020;
	padding-left: calc(var(--screen) * 3.1px);
	padding-right: calc(var(--screen) * 3.1px);
	height: calc(var(--screen)*4px);
}

.launcher-autocomplete-suggestion:hover, .launcher-autocomplete-suggestion.selected {
	color: #FFFFFF;
}


/*********************************************************************/
/**																	**/
/**						    CAROUSEL								**/
/**																	**/
/*********************************************************************/

.carouselSVGContainer {
	display: flex;
	justify-content: space-between;
	margin: calc(var(--screen) * -4.3px) calc(var(--screen) * 15px) calc(var(--screen) * 1px) calc(var(--screen) * 15px);
}

.carouselTitle {
	font-size: calc(var(--screen) * 3.5px);
	letter-spacing: calc(var(--screen)*0.1px);
	text-transform: uppercase;
	margin: calc(var(--screen) * 2px) 0px;
	font-weight: 500;
}

.carouselParagraphe {
	font-size: calc(var(--screen) * 3px);
	margin: calc(var(--screen) * 2px);
}

.carouselImage {
	position: relative;
	display: grid; /* <= shrinks container to image size */
	transition: transform 150ms ease-in-out;
	width: 100%;
}

.carouselImage img, .carouselImage canvas {
	height: calc(var(--screen) * 50px);
	border-radius: calc(var(--screen) * 3.5px);
	margin: calc(var(--screen) * 2px) 0px calc(var(--screen) * 2px) calc(var(--screen) * -3.4px);
	width: calc(var(--screen) * 40px);
}

#inventoryContent .carouselImage img {
	height: calc(var(--screen) * 40px);
	width: calc(var(--screen) * 40px);
}

#inventoryContent .selected .carouselImage canvas, #inventoryContent .selected .carouselImage img {
	border: #272748 calc(var(--screen) * 1px) solid;
	height: calc(var(--screen) * 38px);
	width: calc(var(--screen) * 38px);
}

#inventoryContent .selected .carouselImage canvas {
	margin-left: calc(var(--screen)* -4.4px);
}

.carouselReducedElement {
	transform: scale(0.6);
}

.carouselNotReduced {
	transform: scale(1.0);
}

.carouselFirstNavigatorSVG, .carouselSecondNavigatorSVG{
	width: calc(var(--screen) * 4.5px);
	height: calc(var(--screen) * 4.5px);
	stroke: #272748;
}

#launcherPanel .carouselFirstNavigatorSVG, #launcherPanel .carouselSecondNavigatorSVG {
	stroke: #FFFFFF;
}

.carouselFirstNavigatorSVG {
	transform: rotate(180deg);
}

.carouselFirstNavigatorSVG:hover {
	transform: rotate(180deg) scale(1.2);
}

.carouselSecondNavigatorSVG:hover {
	transform: scale(1.2);
}

.carouselFirstNavigatorSVG, .carouselSecondNavigatorSVG {
	fill: #272748;
}

.tuto .carouselFirstNavigatorSVG, .tuto .carouselSecondNavigatorSVG {
	stroke: #FFFFFF;
}

.tuto .carouselFirstNavigatorSVG, .tuto .carouselSecondNavigatorSVG {
	fill: #FFFFFF;
}

.carouselPastille {
	position: absolute;
	/* top: calc(var(--screen)*33.6px); */
	top: calc(var(--screen)*34.5px);
	right: calc(var(--screen)*-3.1px);
	background-color: #FFF;
	padding-left: calc(var(--screen)*1px);
  	padding-right: calc(var(--screen)*1px);
	font-size: calc(var(--screen)*3.5px);
	color: #272748;
	/* border-bottom-right-radius: calc(var(--screen) * 3.5px); */
	border-bottom-right-radius: calc(var(--screen) * 2.75px);
	border-top-left-radius: calc(var(--screen) * 1.75px);
	/* border: solid #F04020 calc(var(--screen)*0.4px); */
	z-index: 100;
}

.selected .carouselPastille {
	top: calc(var(--screen)*35.3px);
}

.selected.carouselReducedElement .carouselPastille {
	top: calc(var(--screen) * 33px);
	right: calc(var(--screen) * -2px);
}

/*********************************************************************/
/**																	**/
/**						ACCOUNT PANEL								**/
/**																	**/
/*********************************************************************/

/* .vrPad #menuPanel .iBIMButton, .vrPad #menuPanel .accountButton {
	margin: 0px;
} */

.screenPad #menuPanel, .keyboardPad #menuPanel, .gamePad #menuPanel {
	width: 100%;
}

.vrPad #menuPanel {
	height: 100%;
}

.vrPad #menuContainer {
	height: 100%;
	width: 760px;
}

.vrPad #menuScrollableArea {
	left: 0px;
}

.vrPad #menuButtons {
	height: calc(var(--screen) * 17px);
	width: calc(var(--screen) * 51px);
}

.rollBackSVG {
	fill: #FFF;
	transform: rotate(-90deg);
	height: calc(var(--screen)*5px);
	width: calc(var(--screen)*5px);
	position: absolute;
	left: calc(var(--screen)*3.5px);
	top: calc(var(--screen)*1.4px);
	padding: calc(var(--screen)*2px);
}

.accountBox {
	position: absolute;
	width: 100%;
	top: 0;
	right: 0;
	transform-origin: calc(100% - var(--screen) * 8px) calc(var(--screen) * 24px);
	transition: all .25s ease-in-out;
}

/* .vrPanel .accountBox {
	transform-origin: calc(50% + var(--screen) * 8.15px) calc(640px - var(--screen) * 8.15px);
	transition: none;
	top: 195px;
} */

.accountBoxExpanded, .menuBoxExpanded {
	transform: scale(1);
}

.screenPad .accountBoxReduced, .keyboardPad .accountBoxReduced, .gamePad .accountBoxReduced, .screenPad .menuBoxReduced, .keyboardPad .menuBoxReduced, .gamePad .menuBoxReduced {
	transform: scale(0.01);
}

.accountContainer {
	z-index: 50;
	overflow-y: scroll;
	max-height: 100%;
	-ms-overflow-style: none;
	scrollbar-width: none;
	width: 100%;
	display: table;
	position: absolute;
	top: 0;
	padding-top: calc(var(--screen) * 3.9px);
	right: 0px;
}

.vrPad .accountContainer {
	height: 100%;
}

.accountContainer::-webkit-scrollbar {
	display: none;
}

.accountSquareContainer, .menuSquareContainer {
	min-height: calc(var(--screen) * 77px);
	max-height: calc(100vh - calc(var(--screen)*3.9px));
	width: calc(var(--screen) * var(--menuWidth));
	position: absolute;
	top: calc(var(--screen) * 2.5px);
	right: calc(var(--screen) * 17.1px);
	border-radius: calc(var(--screen) * 5px);
	background-color: #FFFFFF;
	border: #F04020 solid calc(var(--screen)*0.2px);
	overflow-y: scroll;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.menuSquareContainer {
	/* transform-origin: calc(100% - var(--screen) * 8px) calc(var(--screen) * 24px); */
	transform-origin: calc(100% + var(--screen) *9.5px) calc(var(--screen) * 21px);
	/* transition: all .3s ease-in-out; */
	transition: all 0.5s;
}

.vrPad .menuSquareContainer {
	transition: none;
}

.accountSquareContainer::-webkit-scrollbar, .menuSquareContainer::-webkit-scrollbar {
	display: none;
}

#accountContent {
	transition: height 0.25s;
}

.titleConnection {
	font-size: calc(var(--screen)*5px);
	margin: 0px;
	margin-top: calc(var(--screen) * 3px);
	color: #FFFFFF;
	letter-spacing: calc(var(--screen)*0.1px);
	text-transform: uppercase;
}

#menuPanel .titleConnection {
	color: #FFFFFF;
	background-color: #F04020;
	padding: calc(var(--screen) * 1px) 0px;
	margin: calc(var(--screen) * 2px) calc(var(--screen) * 2.5px);
	border-radius: calc(var(--screen) * 5px);
}

.buttonConnection {
	font-size: calc(var(--screen)*3.5px);
	border: calc(var(--screen) * 0.2px) solid #272748;
	background-color: white;
	border-radius: calc(var(--screen)*5px);
	height: calc(var(--screen)*10px);
	color: #272748;
	min-width: calc(var(--screen) * 20px);
	padding: 0px calc(var(--screen)*4px);
}

.buttonAccount {
	font-size: calc(var(--screen)*3.5px);
	border: calc(var(--screen) * 0.2px) solid #272748;
	background-color: white;
	border-radius: calc(var(--screen)*3.5px);
	height: calc(var(--screen)*7px);
	color: #272748;
	min-width: calc(var(--screen) * 33px);
	padding: 0px calc(var(--screen)*3px);
	text-transform: uppercase;
}

.buttonAccount:hover, .buttonConnection:hover {
	background-color: #272748;
	color: white;
	border-color: #FFFFFF;
}

.buttonAccount:disabled, .buttonConnection:disabled {
	border: calc(var(--screen) * 0.2px) solid #404040;
	background-color: rgb(197, 197, 197);
	color: #404040;
}

.accountBlock {
	padding-top: calc(var(--screen) * 5px);
	margin-right: calc(var(--screen) * 5px);
	margin-left: calc(var(--screen) * 5px);
}

#accountHeader img {
	height: calc(var(--screen)*10px);
	padding-top: calc(var(--screen) * 1px);
	position: relative;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
}

#availableAccounts span {
	margin-left: calc(var(--screen) * 2px);
}

.createUserHeader {
	font-size: calc(var(--screen) * 4.5px);
	margin-top: 0px;
	text-align: center;
}

#launcherPanel label, #menuPanel label {
	font-size: calc(var(--screen) * 3.5px);
	/* padding-top: calc(21px/var(--screen)); */
	/* padding-left: calc(var(--screen) * 1px); */
	line-height: calc(var(--screen)*5px);
}

#accountContainer span.input {
	display :block;
	overflow: hidden;
	padding-left: calc(var(--screen) * 2px);
	padding-right: calc(var(--screen) * 4.5px);
}

#launcherPanel input, #menuPanel input {
	font-size: calc(var(--screen) * 3.5px);
	padding-top: calc(var(--screen) * 0.5px);
	padding-bottom: calc(var(--screen) * 0.5px);
	color: var(--launcherBgColor);
	accent-color: var(--launcherBgColor);
	line-height: calc(var(--screen) * 4px);
}

#launcherPanel input[type=checkbox], #menuPanel input[type=checkbox] {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;

	border: solid white calc(var(--screen) * 0.4px);
	background-color: white;
	padding: calc(var(--screen) * 0.5px);
	border-radius: calc(var(--screen) * 0.5px);
}

#menuPanel input[type=checkbox] {
	border-color: #272748;
}

#launcherPanel input[type=checkbox]:checked,  #menuPanel input[type=checkbox]:checked{
	background-color: var(--launcherBgColor);
	background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTIgOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TC4wNTcgNS42NGwuODI5LTEuMjI3TDQuNDcgNy4yNjggMTAuOTIxLjA4NmwuOTIzIDEuMTAzLTYuODYzIDcuNjRjLS4xMzQtLjAwMy0uNDA2LjE0OC0uNDA2LjE0OHoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPg0KPC9zdmc+");
	background-repeat: no-repeat;
	background-size: 90% 90%;
	background-position: 10% 10%;
}

#menuPanel input[type=checkbox]:checked {
	background-color: #272748;
}

#launcherPanel input[type=radio] {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;

	border-radius: 50%;
	border: solid white calc(var(--screen) * 0.4px);
	background-color: #F04020;
	transform: translateY(calc(var(--screen)*-0.5px));
}

#launcherPanel input[type="radio"]::before {
	content: "";
	width: calc(var(--screen) * 2px);
	height: calc(var(--screen) * 2px);
	border-radius: 50%;
	transform: scale(0);
	transition: 120ms transform ease-in-out;
	box-shadow: inset calc(var(--screen)*2px) calc(var(--screen)*2px) white;
	position: relative;
	/* left: calc(var(--screen)*0.70px);
	top: calc(var(--screen)*-0.70px); */
	left: 50%;
	top: -50%;
	display: inline-block;
}

#launcherPanel input[type="radio"]:checked::before {
	transform: scale(1) translate(-50%, 50%);
}

/* #launcherPanel input[type=radio]:checked + label {
	font-weight: bold;
} */

#launcherPanel #accountCreation input {
	/* margin-top: calc(var(--screen) * 1.5px); */
	/* width: calc(var(--screen)*88px); */
	width: 100%;
	/* margin-left: calc(var(--screen)*4px); */
	padding-top: 0;
	padding-bottom: 0;
	font-size: calc(var(--screen) * 3.5px);
	display:block;
	line-height: calc(var(--screen)*4px);
}

#createUser label.required::after {
	content: ' *';
	color: red;
}

/* #createUser label {
	float: left;
	padding-left: calc(var(--screen)*2px);
} */

.patternPassword {
	font-size: calc(var(--screen)*2.5px);
	padding: calc(var(--screen)*5px);
	color: red;
}

.patternPassword.disabled {
	color: green;
}

.paddingInputCreation {
	padding-left: 10px; 
    padding-right: 10px; 
    padding-top: 15px;
}

#modalDeleteUser {
	display: none;
	z-index: 1;
	position: absolute;
	/* top: calc(var(--screen) * 40px); */
	top: calc(var(--screen) * 8px);
	left: calc(var(--screen) * 12.5px);
	width: calc(var(--screen) * 75px);
	background-color: lightgray;
	font-size: calc(var(--screen) * 3.5px)
}

#modalDeleteUser button {
	font-size: calc(var(--screen) * 3px);
	border-radius: calc(var(--screen)*2px);
	border: none;
	background-color: white;
	margin-bottom: calc(var(--screen) * 1px);
}

#modalDeleteUser h4 {
	margin-left: calc(var(--screen) * 2px);
	margin-right: calc(var(--screen) * 2px);
}

#forgotUserName,
#forgotPassword,
#forgotPasswordLogin {
	font-size: calc(var(--screen) * 3.5px);
	text-decoration: underline;
}

#forgotUserName{
	top: calc(var(--screen) * 3px);
}

.carouselAvatarContainer{
	margin-top: calc(var(--screen) * 2px);
/*	width: calc(var(--screen) * 98px);
	height: calc(var(--screen) * 45px); */
}

#chooseAvatar .arrow {
	border: solid black;
	border-width: 0 3px 3px 0;
	display: inline-block;
	padding: 3px;
}

.right {
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}

.left {
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
}

.imgAvatar{
	width: calc(var(--screen) * 16px);
	height: calc(var(--screen) * 20px);
	border-radius: calc(var(--screen) * 3px);
	border: calc(var(--screen) * 0.4px) solid transparent;
}

.imgAvatar.selected{
	border: calc(var(--screen) * 0.4px) solid #F04020;
}

.carousDiv{
	max-width: min-content;
}

.center-image {
	position: relative;
	left: 50%;
	transform: translateX(-50%) scale(1.2);
}

.img-overlay-wrap {
	position: relative;
	display: grid; /* <= shrinks container to image size */
	transition: transform 150ms ease-in-out;
	width: 100%;
	border-radius: calc(var(--screen) * 5px);
}

.img-overlay-wrap img {
	width: 100%;
}

.div-reduced {
	transform: scale(0.8);
}

.editSVG {
	position: absolute;
	right: 0;
	bottom: 0;
	fill: #f04020;
	width: 40px;
	height: 40px;
	margin: 10px;
}

.textAvatar {
	text-align: center;
	margin-top: 15px;
	line-height: 35px;
}

.unEditableText {
	font-style: italic;
	color: #272748;
	font-size: 16px;
}

.nameDiv {
	width: fit-content;
	margin: auto;
	border: none;
	border-radius: 20px;
}

.nameDivFocus {
	border: #272748 1.5px solid;
}

.check {
	position: relative;
	fill: white;
	background: #272748;
	border: #272748;
	border-radius: 50%;
	width: 36.5px;
	height: 36.5px;
	padding: 6px;
}

.check svg:hover {
	fill: #272748;
	background: white;
}

.containerSVG {
	display: flex;
	align-items: center;
	justify-content: center;
}

.bulletDivSVG {
	margin-left: 15px;
	margin-right: 15px;
}

.bulletSVG {
	fill:#FFFF;
	margin: 10px;
}

.bulletSVG:hover {
	transform: scale(1.2);
}

.bulletSVG.filled use {
	fill: #272748;
}

.bulletSVG, .firstNavigatorSVG, .secondNavigatorSVG{
	width: calc(var(--screen) * 4px);
	height: calc(var(--screen) * 4px);
	stroke-width: calc(var(--screen) * 8px);
	stroke: #272748;
}

#launcherPanel .bulletSVG, #launcherPanel .firstNavigatorSVG, #launcherPanel .secondNavigatorSVG {
	stroke: #FFFFFF;
}

.firstNavigatorSVG {
	transform: rotate(180deg);
}

.firstNavigatorSVG:hover {
	transform: rotate(180deg) scale(1.2);
}

.secondNavigatorSVG:hover {
	transform: scale(1.2);
}

.firstNavigatorSVG, .secondNavigatorSVG {
	fill: #272748;
}

.userData {
	/* padding-left: calc(var(--screen)*3px);
	padding-right: calc(var(--screen)*3px); */
	text-align: start;
	height: calc(var(--screen) * 7px);
	/* border-bottom: lightgray solid calc(var(--screen) * 0.2px); */
}

/* .userData label {
	line-height: calc(var(--screen) * 7px);
} */

.userData span {
	/* float: right; */
	/* padding-right: calc(var(--screen) * 3px); */
	/* padding-top: calc(var(--screen) * 1px); */
	font-size: calc(var(--screen) * 3.5px);
}

.userData select {
	border: solid #272748 calc(var(--screen)*0.2px);
	height: calc(var(--screen)*7px);
	border-radius: calc(var(--screen)*3.5px);
	min-width: calc(var(--screen)*33px);
	padding: 0 calc(var(--screen)*3px);
	font-size: calc(var(--screen)*3.5px);
	color: #272748;
	background: white;
	text-transform: uppercase;
	text-align: center;
}

.userData select::after {
	display: none;
}

#userMenuPicture {
	height: calc(var(--screen)*49px);
	border-radius: calc(var(--screen)*3.5px);
	margin-bottom: calc(var(--screen) * 2px);
	width: calc(var(--screen) * 39px);
}

#disconnectSVG {
	fill: #F04020;
	width: calc(var(--screen)*5px);
	height: calc(var(--screen)*5px);
	position: absolute;
	right: calc(var(--screen)*2px);
	top: calc(var(--screen)*3.5px);
}

/* .userMenuButton {
	width: calc(var(--screen)*15px);
	height: calc(var(--screen)*5px);
	font-size: calc(var(--screen)*3px);
	border-radius: calc(var(--screen)*2px);
	border: #F04020 solid calc(var(--screen) * 0.2px);
	background: white;
}

.userMenuButton:hover {
	background: #F04020;
	color: white;
} */
    
.accountButtonsPanel {
	position: absolute;
	height: calc(var(--screen) * 60px);
	width: calc(var(--screen) * 17px);
	/* top: calc(var(--screen) * 17px);
	right: 0; */
}

.accountTab {
	display: flex;
	height: calc(var(--screen) * 17px);
	/* width: calc(var(--screen) * 17px); */
	width: calc(var(--screen) * 18px);
}

.accountTabBG {
	display: none;
	position: relative;
	left: calc(var(--screen) * -1.3px);
	top: calc(var(--screen) * -5px);
	height: calc(var(--screen) * 27px);
	width: calc(var(--screen) * 18px);
	stroke-width: calc(var(--screen) * 0.2px);
}

.screenPad .accountTabSelected .accountTabBG, .keyboardPad .accountTabSelected .accountTabBG, .gamePad .accountTabSelected .accountTabBG {
	display: block;
}

/* #accountProfileTabImg>document>svg>path {
	stroke-width: calc(var(--screen)*0.3px);
	stroke: #F04020;
} */

.accountButton svg {
	fill: #F04020;
}

.vrPad .accountButton.selected svg {
	fill: #FFFFFF;
}

.accountButton.disabled svg {
	fill: #777777;
}

.accountTabSelected .accountButton svg {
	fill: #FFFFFF;
}

.accountTabSelected .accountButton {
	background-color: #F04020;
}

.accountExpandButton {
	z-index: 51;
}

.screenPad .accountExpandButton, .keyboardPad .accountExpandButton, .gamePad .accountExpandButton, .screenPad .firstExpandButton, .keyboardPad .firstExpandButton, .gamePad .firstExpandButton{
	top: 0px;
}

.vrPad .accountExpandButton, .vrPad .firstExpandButton {
	/* top: calc(640px - calc(var(--screen) * 17.4px));
	right: calc(240px - var(--screen) * 16.3px); */
}

.talkItem, .roomItem {
	display: flex;
	/* height: calc(var(--screen)*7.5px); */
	border-bottom: #CFCFCF solid calc(var(--screen)*0.1px);
	margin-right: calc(var(--screen)*3px);
	margin-left: calc(var(--screen)*3px);
	padding-top: calc(var(--screen)*1px);
	/* line-height: calc(var(--screen)*7px); */
	/* padding-left: calc(var(--screen)*5px); */
	display: flex;
	flex-wrap: wrap;
	text-align: left;
}

.talkItem:hover, .roomItem:hover, .roomItem.selected {
	color: #FFFFFF;
	background-color: #272748;
}

#talkList {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

#talkList::-webkit-scrollbar {
	display: none;
}

#talkList li:last-child {
	border-bottom: 0px;
}

.talkItem .title, .roomItem .title {
	font-size: calc(var(--screen) * 3.5px);
	margin: 0px;
	display: inline;
}

.talkItem .message {
	display: inline-block;
	inline-size: calc(var(--screen)*83px);
	font-size: calc(var(--screen) * 3px);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color:#606080;
	margin: 0px;
}

.talkItem .date {
	color: #999999;
	font-size: calc(var(--screen)*2.8px);
	/* position: relative;
	margin-right: 0px;
	margin-left: calc(var(--screen)*43px); */
	/* margin-left: calc(var(--screen)*10px); */
	float: right;
}

.talkItem button {
	font-size: calc(var(--screen)*3px);
	height: calc(var(--screen)*4.5px);
	width: calc(var(--screen)*15px);
	min-width: calc(var(--screen) * 10px);
	padding: 0px calc(var(--screen) * 1px);
	/* margin-top: calc(var(--screen)*3.5px);
	margin-left: calc(var(--screen)*2px); */
}

.updatedTalk {
	height: calc(var(--screen)*4px);
	width: calc(var(--screen)*4px);
	/* margin-left: calc(var(--screen)*0.5px); */
	border-radius: 100%;
    border-radius: 20px;
    background: #F04020;
	float: right;
	font-size: calc(var(--screen) * 2.5px);
	text-align: center;
	color: white;
	/* margin-right: calc(var(--screen) * 10px); */
	line-height: calc(var(--screen)*4px);;
}

.tableUser {
	/* border: #272747 solid calc(var(--screen)*0.5px); */
	table-layout: fixed;
	width: calc(var(--screen)*87px);
	border-collapse: collapse;
}
  
.tableUser th, td {
	/* padding: 20px; */
	border: #BBBBBB solid calc(var(--screen)*0.3px);
}

.tableUser input {
	float: left;
}

#tableUserRoom {
	font-size: calc(var(--screen) * 3.5px);
}

#tableUserRoom.tableUser input, #tableUserTalk.tableUser input {
	border: #272748 solid calc(var(--screen)*0.3px);
	border-radius: calc(var(--screen) * 0.5px);
	height: calc(var(--screen)*2.0px);
	width: calc(var(--screen)*2px);
	padding: 0px;
	margin: calc(var(--screen)*1px);
}

#addToTalkList li .extra {
	display: none;
	font-size: calc(var(--screen) * 3px);
	height: calc(var(--screen)*4.5px);
}

#addToTalkList li .extra button {
	min-width: calc(var(--screen) * 10px);
	font-size: calc(var(--screen) * 3px);
	height: calc(var(--screen)*4.5px);
	width: calc(var(--screen)*15px);
	float: right;
	margin-left: calc(var(--screen) * 1px);
}

#addToTalkList li .extra span {
	line-height: calc(var(--screen)*5px);
}

#addToTalkList li.selected .extra {
	display: block;
}

.exitRoom, .enterRoom {
	fill: #272748;
	height: calc(var(--screen) * 5px);
	width: calc(var(--screen) * 5px);
	float: right;
	margin-right: calc(var(--screen)*1px);
}

.roomItem:hover .enterRoom, .roomItem.selected .exitRoom{
	fill: #FFFFFF;
}

.roomItem .exitRoom {
	display: none;
}

.roomItem.selected .exitRoom {
	display: block;
}

.roomItem .enterRoom {
	display: block;
}

.roomItem.selected .enterRoom {
	display: none;
}

.actionToolboxButton {
	/* display:flex;
	align-items: center; */
	/* border: #F04020 solid calc(var(--screen) * 0.2px);
	border-radius: calc; */
	border-color: #F04020;
	color: #F04020;
	margin-top: calc(var(--screen) * 2px);
	font-family: Helvetica;
	/* transition: height 1s; */
	height: auto;
	width: calc(var(--screen) * 36.5px);
}

.actionToolboxButton > div:first-child {
	display:flex;
	align-items: center;
	height: calc(var(--screen)*7px);
}

.actionToolboxButton:hover {
	background: #F04020;
	font-weight: bold;
}

.actionToolboxButton svg {
	fill: #F04020;
	height: calc(var(--screen) * 6px);
	width: calc(var(--screen) * 6px);
}

.actionToolboxButton:hover svg {
	fill: #FFFFFF;
}

.actionToolboxButton.disabled {
	border-color: #AAAAAA;
	background-color: #F8F8F8;
	color: #AAAAAA;
	font-weight: 100;
	/* font-family: arlrdbd; */
}

.actionToolboxButton.disabled svg {
	fill: #AAAAAA;
}

.actionToolboxButton.selected {
	background: #F04020;
	color: #FFFFFF;
	/* height: calc(var(--screen) * 50px); */
	font-weight: bold;
}

.actionToolboxButton.selected svg {
	fill: #FFFFFF;
}

.actionToolboxParameters {
	height: 0px;
	transition: height 1s;
	overflow: hidden;
}

.actionToolboxButton.selected .actionToolboxParameters {
	/* height: calc(var(--screen) * 50px); */
	height: auto;
	padding: calc(var(--screen) * 1px) 0px;
}

.actionToolboxButton p {
	width: calc(100% - var(--screen) * 6px);
}

.actionToolboxInput {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: calc(var(--screen) * 0.5px);
}

.actionToolboxInput input {
	color: #272748 ! important;
	margin-left: calc(var(--screen) * 1.5px);
	width: 33%;
}

.actionToolboxParameters button {
	border-radius: calc(var(--screen) * 3.5px);
	font-size: calc(var(--screen) * 3px);
	border: none;
	height: calc(var(--screen) * 4);
	color: #F04020;
	padding: 0px calc(var(--screen) * 2px);
}

.actionToolboxParameters button:hover {
	background: #F04020;
	color: #FFF;
}

.measurementLabel {
	font-family: monospace;
	background-color: black;
	color: white;
	padding: calc(var(--screen) * 0.5px);
	font-size: calc(var(--screen) * 5px);
}


/*********************************************************************/
/**                                                                 **/
/**                          INTERACTOR                             **/
/**                                                                 **/
/*********************************************************************/

.screenPad #interactor, .keyboardPad #interactor, .gamePad #interactor {
	display: none;
}

.screenPad #interactor.opened, .keyboardPad #interactor.opened, .gamePad #interactor.opened {
	display: block;
}

.vrPad #interactor{
	width: calc(var(--screen)*91.4px);
}

.interactorWheel {
	/* transform-origin: 0% 0%; */
	/* -webkit-transform-origin: -50% -50%;
	-moz-transform-origin: -50% -50%;
	-ms-transform-origin: -50% -50%;
	-o-transform-origin: -50% -50%; */
	/* transform-origin: 0% 0%; */
	z-index: 80;
	border-radius : 50%;
	overflow : hidden;
	position: absolute;
}

.screenPad .interactorWheel, .keyboardPad .interactorWheel, .gamePad .interactorWheel {
	transition: all .5s ease-in-out;
}

.vrPad .interactorWheel {
	transition: none;
}

.interactorWheel .arc {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	transform-origin: 50% 50%;
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	transform: scale(1) rotate(calc(-360deg * var(--iteratorIndex) /  var(--iteratorLength))) !important;
	-webkit-transform: scale(1) rotate(calc(-360deg * var(--iteratorIndex) /  var(--iteratorLength))) !important;
	-moz-transform: scale(1) rotate(calc(-360deg * var(--iteratorIndex) /  var(--iteratorLength))) !important;
	-o-transform: scale(1) rotate(calc(-360deg * var(--iteratorIndex) /  var(--iteratorLength))) !important;
	-ms-transform: scale(1) rotate(calc(-360deg * var(--iteratorIndex) /  var(--iteratorLength))) !important;
}

.interactorWheel .arc .svg {
	height: 100%;
	width: 100%;
}

.screenPad .arcSVG, .keyboardPad .arcSVG, .gamePad .arcSVG {
	fill: url('#WhiteBackground');
	stroke: url('#RedStroke');
	stroke-width: calc(var(--screen) * 0.2px);
}
.screenPad .interactorWheel .arc:hover .arcSVG, .keyboardPad .interactorWheel .arc:hover .arcSVG, .gamePad .interactorWheel .arc:hover .arcSVG{
	fill: url('#RedBackground');
	stroke: url('#WhiteStroke');
}

.vrPad .arcSVG{
	fill: #FFFFFF;
	stroke: #F04020;
	stroke-width: calc(var(--screen) * 0.2px);
}
.vrPad .interactorWheel .arc:hover .arcSVG{
	fill: #F04020;
	stroke: #FFFFFF;
}

.interactorWheel.two .arc {
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 50%, 0% 50%);  
	clip-path: polygon(0 0, 100% 0, 100% 50%, 0% 50%);
}

.interactorWheel.three .arc {
	-webkit-clip-path: polygon(50% 50%, 0% 50%, 0% 22%, 22% 0%, 62% 0%, 70% 4%, 75% 7%); 
	clip-path: polygon(50% 50%, 0% 50%, 0% 22%, 22% 0%, 62% 0%, 70% 4%, 75% 7%);
}

.interactorWheel.four .arc {
	-webkit-clip-path: polygon(50% 50%, 0% 50%, 0% 22%, 22% 0%, 50% 0%);  
	clip-path: polygon(50% 50%, 0% 50%, 0% 22%, 22% 0%, 50% 0%);
}

.interactorWheel.five .arc {
	-webkit-clip-path: polygon(50% 50%, 0% 50%, 0% 25.5%, 16% 8%, 35% 2%);  
	clip-path: polygon(50% 50%, 0% 50%, 0% 25.5%, 16% 8%, 35% 2%);
}

.interactorWheel.six .arc {
	-webkit-clip-path: polygon(50% 50%, 0% 50%, 0% 30%, 10.5% 14.5%, 25% 6.5%);  
	clip-path: polygon(50% 50%, 0% 50%, 0% 30%, 10.5% 14.5%, 25% 6.5%);
}

.interactorWheel.seven .arc {
	-webkit-clip-path: polygon(50% 50%, 0% 50%, 0% 33%, 8% 19%, 18.5% 10.5%);  
	clip-path: polygon(50% 50%, 0% 50%, 0% 33%, 8% 19%, 18.5% 10.5%);
}

.interactorWheel.eight .arc {
	-webkit-clip-path: polygon(50% 50%, 0% 50%, 0% 35%, 5.5% 23.5%, 14.5% 14.5%);  
	clip-path: polygon(50% 50%, 0% 50%, 0% 35%, 5.5% 23.5%, 14.5% 14.5%);
}

.divIMG {
	height:100%;
	width:100%;
	position:absolute;
	top:0px;
	left:0;
	transform: scale(1) rotate(calc(360deg /  var(--iteratorLength) / 2)) !important;
	pointer-events: none;
}

.interactorWheel .divIMG svg {
	width: calc(var(--screen)*9px);
	height: calc(var(--screen)*9px);
	transform: scale(1) rotate(calc((360deg * var(--iteratorIndex) /  var(--iteratorLength)) + (-360deg /  var(--iteratorLength) / 2))) !important;
	position: absolute;
	left: calc(var(--screen) * 2px);
	top: calc(var(--screen) * (var(--size) / 2 - 4.5px));
	/* top: calc(var(--screen) * 15,1px);
	left: calc(var(--screen) * 8,75px); */
	/* transform: rotate(calc(var(--rotation) * -1)); */
	fill:#F04020;
}

.interactorWheel .arc:hover .divIMG svg {
	fill: #FFFFFF;
}

.interactorSquare {
	background-color: rgba(256,256,256,0.9);
	border-radius: calc(var(--screen)*5px);
	z-index: 80;
	border: #F04020 solid calc(var(--screen)*0.2px);
	width: calc(var(--screen) * 100px);
	/* height: calc(var(--screen) * 91px); */
	transition: all .5s ease-in-out;
}

.vrPad .interactorSquare {
	top: 0px;
	left: 0px;
	transform: translate(0,0);
}

.interactorSquare #interactorTitle {
	height: calc(var(--screen)*18px);
	width: calc(var(--screen)*100px);
}

.interactorSquare #interactorTitle svg {
    height: calc(var(--screen) * 11px);
    width: calc(var(--screen) * 11px);
    fill: #F04020;
    position: absolute;
	top: calc(var(--screen) * 1.5px);
    left: calc(var(--screen) * 1.5px);
    margin: calc(var(--screen) * 2px);
}

.interactorSquare #interactorTitle>div {
text-align: left;
    margin-left: calc(var(--screen) * 17.5px);
    padding-top: calc(var(--screen) * 2px);
    height: calc(var(--screen) * 8px);
}

.interactorSquare #interactorTitle #interactorName {
	margin-top: calc(var(--screen) * 2);
	font-size: calc(var(--screen) * 5px);
	line-height: calc(var(--screen) * 9px);
}

.interactorSquare #interactorTitle #interactorCategory {
	display: block;
	font-size: calc(var(--screen)*3.5px);
    text-align: left;
    margin-left: calc(var(--screen) * 17.5px);
}

.interactorSquare #interactorDescription {
	margin-bottom: calc(var(--screen)*2px);
	margin-top: calc(var(--screen)*2px);
	width: calc(var(--screen)*90px);
	margin-left: auto;
	margin-right: auto;
	/* height: calc(var(--screen) * 78px); */
	max-height: calc(var(--screen) * 77px);
	overflow-y: scroll;
	text-align: justify;
}

.interactorSquare .sceneIncluded #interactorDescription {
	width: calc(var(--screen)*44px);
	margin-top: 0px;
	margin-left: calc(var(--screen)*3px);
	max-height: calc(var(--screen) * 38px);
	overflow-y: scroll;
	text-align: justify;
}

.interactorSquare #interactorDescription span {
	font-size: calc(var(--screen)*3px);
	line-height: calc(var(--screen) * 4px);
}

.interactorSquare #interactorActionButtons {
	width: calc(var(--screen) * 100px);
	height: calc(var(--screen) * 17px);
	display: flex;
	justify-content: space-evenly;
}

.interactorContainer .interactorScene {
	display: none;
	margin-left: calc(var(--screen) * 3px);
	width: calc(var(--screen) * 38px);
	height: calc(var(--screen) * 38px);
}

.interactorContainer.sceneIncluded .interactorScene {
	display: block;
}

/*********************************************************************/
/**																	**/
/**							VIEWER PANEL							**/
/**																	**/
/*********************************************************************/

.screenPad #viewer, .keyboardPad #viewer, .gamePad #viewer {
	display: none;
}

.screenPad #viewer.opened, .keyboardPad #viewer.opened, .gamePad #viewer.opened {
	display: block;
}

.chatBoxMessage .resourceOpen {
	top: 0px;
	right: 0px;
}

.chatBoxMessage .resource {
	margin-top: calc(var(--screen) * 1.5px);
	margin-bottom: calc(var(--screen) * 1.5px);
}

.chatBoxMessage .resource img {
	max-height: calc(var(--screen) * 40px);
	object-fit: contain;
	height: 100%;
	width: auto;
}

#viewer .resourceOpen {
	height: calc(var(--screen)*8px);
	width: calc(var(--screen)*8px);
	right: 0px;
	top: calc(-12.5% + var(--screen)*3.5px);;
}

.screenPad #viewer .resource, .keyboardPad #viewer .resource, .gamePad #viewer .resource {
	width: 80%;
	height: 80%;
	max-width: 80%;
	max-height: 80%;
	position: fixed;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.vrPad #viewer .resource {
	width: 100%;
	height: 100%;
}

#viewer .resource img {
	max-height:100%;
	max-width:100%;
	position: absolute;
	margin: auto;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

/*********************************************************************/
/**																	**/
/**							INVENTORY PANEL							**/
/**																	**/
/*********************************************************************/

.secondExpandButton {
	top: calc(var(--screen) * 17px);
}

.vrPad .secondExpandButton {
	position: absolute;
	top: 0px;
	left: calc(var(--screen) * 14.5px);
}

#inventoryContent {
	/* height: 0px;
	width: 0px; */
	/* height:100%; */
	/* height: calc(var(--screen)*71.9px); */
	width:100%;
	transition: height 0.5s, width 0.5s;
}

/* #inventoryPanel.expanded {
	height:100%;
	width:100%;
} */

.toolbarInventoryContainer {
	display: flex;
	flex-direction: column;
	justify-content: end;
	align-items: center;
	position: absolute;
	width: calc(var(--screen) * 100px);
	height: calc(var(--screen) * 72px);
	right: calc(var(--screen) * 17px);
	background-color: #FFF;
	border: #F04020 solid calc(var(--screen)*0.2px);
	border-radius: calc(var(--screen) * 5px);
	overflow: hidden;
	margin-top: calc(var(--screen) * 3.9px);
}

.screenPad .toolbarInventoryButton, .keyboardPad .toolbarInventoryButton, .gamePad .toolbarInventoryButton {
	position: static;
	transition: all 0.1s;
	/* height: 100%;
	width: 100%;
	background-color: #FFF;
	fill: #F04020;
	border-right: calc(var(--screen)*0.2px) solid #F04020; */
}

.vrPad .toolbarInventoryButton {
	position: static;
}

.toolbarInventoryButton svg {
	transition: all 0.1s;
}

.toolbarInventoryButton.selected svg {
	background-color: #F04020;
	fill: #FFF;
}

.toolbarInventoryButton svg {
	/* padding-top:calc(var(--screen) * 1px); */
	/* height: calc(100% - calc(var(--screen) * 1.5px));
	margin-top: calc(var(--screen)*0.75px);
	width: 100%; */
}

.toolbarInventoryButton.iBIMSmallButton {
	margin-left: calc(var(--screen) * 4.3px);
	margin-right: calc(var(--screen) * 4.3px);
}

.vrPad .toolbarInventoryButton svg {
	/* width: 62.65px; */
}

.inventoryCarousel {
	width: calc(var(--screen) * 100px);
}

.inventoryCarouselDiv {
	/* height: 100%; */
}

.toolbarInventorySecondaryCategory {
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

.screenPad .toolbarInventorySecondaryCategory, .keyboardPad .toolbarInventorySecondaryCategory, .gamePad .toolbarInventorySecondaryCategory {
	transition: height 0.2s;
}

/* .assetCarouselItem canvas {
	margin: 0px;
	border-radius: calc(var(--screen) * 2.5px);
}

.assetCarouselItem canvas.selected {
	border: #272748 calc(var(--screen) * 1px) solid;
}

.assetCarouselItem {
	/* background-color: green; */
	/* width: calc(var(--screen) * 33px); */
	/* height: calc(var(--screen) * 33px); */
	/* height: calc(var(--screen) * 35px); */
	/* transform: scale(0.55); */
/*} */

/* .screenPad .inventoryExpandButton, .keyboardPad .inventoryExpandButton, .gamePad .inventoryExpandButton {
	top: calc(var(--screen) * 34px);
	right: 0;
} */

/* #inventoryContent .firstNavigatorSVG, #inventoryContent .secondNavigatorSVG {
	stroke: #F04020;
}

#inventoryContent .firstNavigatorSVG, #inventoryContent .secondNavigatorSVG {
	fill: #F04020;
} */

/*********************************************************************/
/**																	**/
/**							STAGING PANEL							**/
/**																	**/
/*********************************************************************/

.variableLine {
	width: calc(100% - var(--screen) * 6px);
	margin: 0px calc(var(--screen) * 3px);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.stagingButton {
	border-radius: calc(var(--screen) * 3.5px);
    height: calc(var(--screen) * 7px);
	font-size: calc(var(--screen) * 3.5px);
	border: calc(var(--screen) * 0.2px) solid #272748;
	color: #272748;
	padding: 0px calc(var(--screen) * 3px);
	background-color: #FFF;
	width: calc(var(--screen) * 56.1px);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.stagingButton .picto {
	height: calc(var(--screen) * 4px);
    width: calc(var(--screen) * 4px);
	padding-right: calc(var(--screen) * 3.1px);
}

.stagingButton .insideDiv {
	height: 100%;
    display: flex;
    align-items: center;
}

.stagingButton .arrow {
	height: calc(var(--screen) * 4px);
    width: calc(var(--screen) * 4px);
	fill: #272748;
	/* margin-top: calc(var(--screen) * 1px); */
	float: right;
}

.variable-autocomplete-suggestions {
	border-radius: calc(var(--screen) * 3.5px);
	border-color: #272748;
}

.variable-autocomplete-suggestions .autocomplete-suggestion {
	height: calc(var(--screen) * 6px);
	line-height: calc(var(--screen) * 6px);
	display: flex;
	padding-top: 0px;
	padding-bottom: 0px;
	align-items: center;
}

.variable-autocomplete-suggestions .autocomplete-suggestion.selected {
	background-color: #272748;
}

.variable-autocomplete-suggestions .autocomplete-suggestion p {
	margin: 0px calc(var(--screen) * 3.1px);
}

.variable-autocomplete-suggestions .autocomplete-suggestion .picto {
	position: static;
	top: unset;
	left: unset;
	fill: #272748;
	height: calc(var(--screen) * 4px);
	width: calc(var(--screen) * 4px);
}

.variable-autocomplete-suggestions .autocomplete-suggestion.selected .picto {
	fill: #FFF;
}

/*********************************************************************/
/**																	**/
/**						ATMOSPHERE PANEL							**/
/**																	**/
/*********************************************************************/

.selectTitle {
	width: calc(var(--screen) * 14px);
	text-align: left;
	font-size: calc(var(--screen) * 3px);
}

#selectTimeDiv, #selectSeasonDiv, #selectWeatherDiv {
	display: flex;
	align-items: center;
}

#selectTimeDiv > div, #selectSeasonDiv > div, #selectWeatherDiv > div {
	width:100%;
	margin-left: calc(var(--screen)*2px);
}

.selectButtons {
	display: flex;
	justify-content: space-between;
	align-items: center;	
}

/*********************************************************************/
/**																	**/
/**							PAD PANEL								**/
/**																	**/
/*********************************************************************/

.padPanelAction {
	fill: #FFFFFF;
	stroke: #F04020;
	stroke-width: calc(var(--screen) * 1.2px);
	height: calc(var(--screen) * 6px);
	width: calc(var(--screen) * 6px);
	transform: translate(-50%, -50%);
}

#menuPanel .iBIMButton.selected, #padPanel .iBIMButton.selected {
	background-color: rgb(240, 64, 32);
}

.screenPad #menuPanel .iBIMButton.selected svg, .keyboardPad #menuPanel .iBIMButton.selected svg, .gamePad #menuPanel .iBIMButton.selected svg, #padPanel .iBIMButton.selected svg {
	fill: #ffffff;
}

#menuPanel .iBIMButton.disabled {
	border-color: #777777;
}

#menuPanel .iBIMButton.disabled svg {
	fill: #777777;
}

#menuPanel .iBIMButton.disabled:hover {
	background-color: #FFFFFF;
}

#menuPanel .iBIMSmallButton.selected {
	background-color: rgb(240, 64, 32);
}

#menuPanel .iBIMSmallButton.selected svg {
	fill: #FFF;
}

/* #selectQuality, #selectPadDiv, #selectCameraDiv, #selectSeasonDiv, #selectWeatherDiv, #timeButtons { */
#selectQuality, #selectPadDiv, #selectCameraDiv {
	display: flex;
	/* justify-content: center; */
	justify-content: space-between;
	align-items: center;
	/* position: absolute; */
	/* top: calc(var(--screen)*17px); */
	/* right: 0px; */
	transition: transform 0.2s;
}

#seasonSlider, #timeSlider {
	margin-top: calc(var(--screen) * 2px);
}

.hiddenPadPanel {
	transform: translateX(100%);
}

.openPadPanel {
	transform: translateX(0%);
}

/*********************************************************************/
/**																	**/
/**						OBJECT PANEL								**/
/**																	**/
/*********************************************************************/

.thirdExpandButton {
	top: calc(var(--screen) * 34px);
}

.vrPad .thirdExpandButton {
	position: absolute;
	top: 0px;
	left: calc(var(--screen) * 29px);
}

/*********************************************************************/
/**																	**/
/**						  HELP PANEL								**/
/**																	**/
/*********************************************************************/

.motionContainer {
	margin: calc(var(--screen) * -9px) calc(var(--screen) * 10px);
}

.helpCarousel {
	width: calc(var(--screen) * var(--menuWidth));
}



.carousDiv{
	max-width: min-content;
}

.center-image {
	position: relative;
	left: 50%;
	transform: translateX(-50%) scale(1.2);
}

.img-overlay-wrap {
	position: relative;
	display: grid; /* <= shrinks container to image size */
	transition: transform 150ms ease-in-out;
	width: 100%;
	border-radius: calc(var(--screen) * 5px);
}

.img-overlay-wrap img {
	width: 100%;
}

.div-reduced {
	transform: scale(0.8);
}

.editSVG {
	position: absolute;
	right: 0;
	bottom: 0;
	fill: #f04020;
	width: 40px;
	height: 40px;
	margin: 10px;
}

.textAvatar {
	text-align: center;
	margin-top: 15px;
	line-height: 35px;
}

.unEditableText {
	font-style: italic;
	color: #272748;
	font-size: 16px;
}

.nameDiv {
	width: fit-content;
	margin: auto;
	border: none;
	border-radius: 20px;
}

.nameDivFocus {
	border: #272748 1.5px solid;
}

.check {
	position: relative;
	fill: white;
	background: #272748;
	border: #272748;
	border-radius: 50%;
	width: 36.5px;
	height: 36.5px;
	padding: 6px;
}

.check svg:hover {
	fill: #272748;
	background: white;
}






.helpBoutonContainer {
	display: flex;
	justify-content: center;
}

.helpBouton {
	color: #F04020;
	background-color: #FFFFFF;
	border: #F04020 solid calc(var(--screen)*0.2px);
	padding: calc(var(--screen) * 1px) calc(var(--screen) * 2px);
	margin: calc(var(--screen) * 2.7px) calc(var(--screen) * 1.7px);
	border-radius: calc(var(--screen) * 5px);
	font-size: calc(var(--screen) * 3.1px);
	letter-spacing: calc(var(--screen)*0.1px);
	text-transform: uppercase;
}

.helpBoutonActive,
.helpBouton:hover {
	color: #FFFFFF;
	background-color: #F04020;
}

/*********************************************************************/
/**																	**/
/**						ANIMATION / TRANSITION						**/
/**																	**/
/*********************************************************************/

.eds-animate {
	overflow: hidden;
}

.eds-scroll-hidden,
.edsanimate-sis-hidden {
	opacity: 0;
}

.eds-scroll-visible {
	opacity: 1;
}

.animated {
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	-ms-animation-duration: 1s;
	-o-animation-duration: 1s;
	animation-duration: 1s;
}
.vrPad .animated {
	-webkit-animation-duration: 0ms;
	-moz-animation-duration: 0ms;
	-ms-animation-duration: 0ms;
	-o-animation-duration: 0ms;
	animation-duration: 0ms;
}

/*Delay classes */
.delay0_15 {
	-webkit-animation-delay: .15s;
	-moz-animation-delay: .15s;
	-ms-animation-delay: .15s;
	-o-animation-delay: .15s;
	animation-delay: .15s;
}

.delay0_1 {
	-webkit-animation-delay: .25s;
	-moz-animation-delay: .25s;
	-ms-animation-delay: .25s;
	-o-animation-delay: .25s;
	animation-delay: .25s;
}

.delay1 {
	-webkit-animation-delay: .5s;
	-moz-animation-delay: .5s;
	-ms-animation-delay: .5s;
	-o-animation-delay: .5s;
	animation-delay: .5s;
}

.delay1_2 {
	-webkit-animation-delay: .75s;
	-moz-animation-delay: .75s;
	-ms-animation-delay: .75s;
	-o-animation-delay: .75s;
	animation-delay: .75s;
}

.delay2 {
	-webkit-animation-delay: 1s;
	-moz-animation-delay: 1s;
	-ms-animation-delay: 1s;
	-o-animation-delay: 1s;
	animation-delay: 1s;
}

.vrPad .delay0_15, .vrPad .delay0_1, .vrPad .delay1, .vrPad .delay1_2, .vrPad .delay2 {
	-webkit-animation-delay: 0s;
	-moz-animation-delay: 0s;
	-ms-animation-delay: 0s;
	-o-animation-delay: 0s;
	animation-delay: 0s;
}

/*Duration Classes*/
.duration0_1 {
	-webkit-animation-duration: .25s !important;
	-moz-animation-duration: .25s !important;
	-ms-animation-duration: .25s !important;
	-o-animation-duration: .25s !important;
	animation-duration: .25s !important;
}

.duration1 {
	-webkit-animation-duration: .5s !important;
	-moz-animation-duration: .5s !important;
	-ms-animation-duration: .5s !important;
	-o-animation-duration: .5s !important;
	animation-duration: .5s !important;
}

.duration2 {
	-webkit-animation-duration: 1s !important;
	-moz-animation-duration: 1s !important;
	-ms-animation-duration: 1s !important;
	-o-animation-duration: 1s !important;
	animation-duration: 1s !important;
}

.duration3 {
	-webkit-animation-duration: 1.5s !important;
	-moz-animation-duration: 1.5s !important;
	-ms-animation-duration: 1.5s !important;
	-o-animation-duration: 1.5s !important;
	animation-duration: 1.5s !important;
}

.vrPad .duration0_1, .vrPad .duration1, .vrPad .duration2, .vrPad .duration3 {
	-webkit-animation-duration: 0ms !important;
	-moz-animation-duration: 0ms !important;
	-ms-animation-duration: 0ms !important;
	-o-animation-duration: 0ms !important;
	animation-duration: 0ms !important;
}

.animated {
	backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;

	animation-fill-mode: both;
	/*	transform: translate3d(0, 0, 0); */
	perspective: 1000;

	-o-animation-fill-mode: both;
	/*	-o-transform: translate3d(0, 0, 0); */
	-o-perspective: 1000;

	-moz-animation-fill-mode: both;
	/*	-moz-transform: translate3d(0, 0, 0); */
	-moz-perspective: 1000;

	-webkit-animation-fill-mode: both;
	/*	-webkit-transform: translate3d(0, 0, 0); */
	-webkit-perspective: 1000;
}

.screenPad .zoomOutInteractor, .keyboardPad .zoomOutInteractor, .gamePad .zoomOutInteractor {
	transform-origin: 0% 0%;
	transform: scale(0.01) translate(-50%, 50%);
	top: 50%;
	left: 50%;
}

.screenPad .zoomInInteractor, .keyboardPad .zoomInInteractor, .gamePad .zoomInInteractor {
	transform-origin: 0% 0%;
	transform: scale(1) translate(-50%, -50%);
	top: 50%;
	left: 50%;
}


@-webkit-keyframes bounceInJoystickLeft {
	0% {
		opacity: 0.3;
		-webkit-transform: scale(.2);
		/* -webkit-transform-origin: 7.32%; */
	}
	50% {
		opacity: 0.8;
		-webkit-transform: scale(1.1);
		/* -webkit-transform-origin: 60%; */
	}
	80% {
		opacity: 0.4;
		-webkit-transform: scale(.85);
		/* -webkit-transform-origin: 40%; */
	}
	100% {
		opacity: 0.6;
		-webkit-transform: scale(1);
		/* -webkit-transform-origin: center; */
	}
}

@-moz-keyframes bounceInJoystickLeft {
	0% {
		opacity: 0.3;
		-moz-transform: scale(.2);
		/* -moz-transform-origin: 7.32%; */
	}
	50% {
		opacity: 0.8;
		-moz-transform: scale(1.1);
		/* -moz-transform-origin: 60%; */
	}
	80% {
		opacity: 0.4;
		-moz-transform: scale(.85);
		/* -moz-transform-origin: 40%; */
	}
	100% {
		opacity: 0.6;
		-moz-transform: scale(1);
		/* -moz-transform-origin: center; */
	}
}

@-o-keyframes bounceInJoystickLeft {
	0% {
		opacity: 0.3;
		-o-transform: scale(.2);
		/* -o-transform-origin: 7.32%; */
	}
	50% {
		opacity: 0.8;
		-o-transform: scale(1.1);
		/* -o-transform-origin: 60%; */
	}
	80% {
		opacity: 0.4;
		-o-transform: scale(.85);
		/* -o-transform-origin: 40%; */
	}
	100% {
		opacity: 0.6;
		-o-transform: scale(1);
		/* -o-transform-origin: center; */
	}
}

@keyframes bounceInJoystickLeft {
	0% {
		opacity: 0.3;
		transform: scale(.2);
		/* transform-origin: 7.32%; */
	}
	50% {
		opacity: 0.8;
		transform: scale(1.1);
		/* transform-origin: 60%; */
	}
	80% {
		opacity: 0.4;
		transform: scale(.85);
		/* transform-origin: 40%; */
	}
	100% {
		opacity: 0.6;
		transform: scale(1);
		/* transform-origin: center; */
	}
}

.animated.bounceInJoystickLeft {
	-webkit-animation-name: bounceInJoystickLeft;
	-moz-animation-name: bounceInJoystickLeft;
	-o-animation-name: bounceInJoystickLeft;
	animation-name: bounceInJoystickLeft;
}

@-webkit-keyframes bounceOutJoystickLeft {
	0% {
		-webkit-opacity: 0.6;
		-webkit-transform: scale(1);
		/* -webkit-transform-origin: center; */
	}
	25% {
		-webkit-opacity: 0.4;
		-webkit-transform: scale(.85);
		/* -webkit-transform-origin: 40%; */
	}
	50% {
		-webkit-opacity: 0.8;
		-webkit-transform: scale(1.1);
		/* -webkit-transform-origin: 60%; */
	}
	100% {
		-webkit-opacity: 0;
		-webkit-transform: scale(.2);
		/* -webkit-transform-origin: 7.32%; */
	}
}

@-moz-keyframes bounceOutJoystickLeft {
	0% {
		-moz-opacity: 0.6;
		-moz-transform: scale(1);
		/* -moz-transform-origin: center; */
	}
	25% {
		-moz-opacity: 0.4;
		-moz-transform: scale(.85);
		/* -moz-transform-origin: 40%; */
	}
	50% {
		-moz-opacity: 0.8;
		-moz-transform: scale(1.1);
		/* -moz-transform-origin: 60%; */
	}
	100% {
		-moz-opacity: 0;
		-moz-transform: scale(.2);
		/* -moz-transform-origin: 7.32%; */
	}
}

@-o-keyframes bounceOutJoystickLeft {
	0% {
		-o-opacity: 0.6;
		-o-transform: scale(1);
		/* -o-transform-origin: center; */
	}
	25% {
		-o-opacity: 0.4;
		-o-transform: scale(.85);
		/* -o-transform-origin: 40%; */
	}
	50% {
		-o-opacity: 0.8;
		-o-transform: scale(1.1);
		/* -o-transform-origin: 60%; */
	}
	100% {
		-o-opacity: 0;
		-o-transform: scale(.2);
		/* -o-transform-origin: 7.32%; */
	}
}

@keyframes bounceOutJoystickLeft {
	0% {
		opacity: 0.6;
		transform: scale(1);
		/* transform-origin: center; */
	}
	25% {
		opacity: 0.4;
		transform: scale(.85);
		/* transform-origin: 40%; */
	}
	50% {
		opacity: 0.8;
		transform: scale(1.1);
		/* transform-origin: 60%; */
	}
	100% {
		opacity: 0;
		transform: scale(.2);
		/* transform-origin: 7.32%; */
	}
}

.animated.bounceOutJoystickLeft {
	-webkit-animation-name: bounceOutJoystickLeft;
	-moz-animation-name: bounceOutJoystickLeft;
	-o-animation-name: bounceOutJoystickLeft;
	animation-name: bounceOutJoystickLeft;
}


@-webkit-keyframes bounceInJoystickRight {
	0% {
		opacity: 0.3;
		-webkit-transform: scale(.2);
		/* -webkit-transform-origin: 92.68%; */
	}
	50% {
		opacity: 0.8;
		-webkit-transform: scale(1.1);
		/* -webkit-transform-origin: 60%; */
	}
	80% {
		opacity: 0.4;
		-webkit-transform: scale(.85);
		/* -webkit-transform-origin: 40%; */
	}
	100% {
		opacity: 0.6;
		-webkit-transform: scale(1);
		/* -webkit-transform-origin: center; */
	}
}

@-moz-keyframes bounceInJoystickRight {
	0% {
		opacity: 0.3;
		-moz-transform: scale(.2);
		/* -moz-transform-origin: 92.68%; */
	}
	50% {
		opacity: 0.8;
		-moz-transform: scale(1.1);
		/* -moz-transform-origin: 60%; */
	}
	80% {
		opacity: 0.4;
		-moz-transform: scale(.85);
		/* -moz-transform-origin: 40%; */
	}
	100% {
		opacity: 0.6;
		-moz-transform: scale(1);
		/* -moz-transform-origin: center; */
	}
}

@-o-keyframes bounceInJoystickRight {
	0% {
		opacity: 0.3;
		-o-transform: scale(.2);
		/* -o-transform-origin: 92.68%; */
	}
	50% {
		opacity: 0.8;
		-o-transform: scale(1.1);
		/* -o-transform-origin: 60%; */
	}
	80% {
		opacity: 0.4;
		-o-transform: scale(.85);
		/* -o-transform-origin: 40%; */
	}
	100% {
		opacity: 0.6;
		-o-transform: scale(1);
		/* -o-transform-origin: center; */
	}
}

@keyframes bounceInJoystickRight {
	0% {
		opacity: 0.3;
		transform: scale(.2);
		/* transform-origin: 92.68%; */
	}
	50% {
		opacity: 0.8;
		transform: scale(1.1);
		/* transform-origin: 60%; */
	}
	80% {
		opacity: 0.4;
		transform: scale(.85);
		/* transform-origin: 40%; */
	}
	100% {
		opacity: 0.6;
		transform: scale(1);
		/* transform-origin: center; */
	}
}

.animated.bounceInJoystickRight {
	-webkit-animation-name: bounceInJoystickRight;
	-moz-animation-name: bounceInJoystickRight;
	-o-animation-name: bounceInJoystickRight;
	animation-name: bounceInJoystickRight;
}

@-webkit-keyframes bounceOutJoystickRight {
	0% {
		-webkit-opacity: 0.6;
		-webkit-transform: scale(1);
		/* -webkit-transform-origin: center; */
		-webkit-transform-origin: calc(100% - var(--screen) * 8.5px) 50%;
	}
	25% {
		-webkit-opacity: 0.4;
		-webkit-transform: scale(.85);
		/* -webkit-transform-origin: 60%; */
		-webkit-transform-origin: calc(100% - var(--screen) * 8.5px) 50%;
	}
	50% {
		-webkit-opacity: 0.8;
		-webkit-transform: scale(1.1);
		/* -webkit-transform-origin: 40%; */
		-webkit-transform-origin: calc(100% - var(--screen) * 8.5px) 50%;
	}
	100% {
		-webkit-opacity: 0;
		-webkit-transform: scale(.2);
		/* -webkit-transform-origin: 92.68%; */
		-webkit-transform-origin: calc(100% - var(--screen) * 8.5px) 50%;
	}
}

@-moz-keyframes bounceOutJoystickRight {
	0% {
		-moz-opacity: 0.6;
		-moz-transform: scale(1);
		/* -moz-transform-origin: center; */
		-moz-transform-origin: calc(100% - var(--screen) * 8.5px) 50%;
	}
	25% {
		-moz-opacity: 0.4;
		-moz-transform: scale(.85);
		/* -moz-transform-origin: 60%; */
		-moz-transform-origin: calc(100% - var(--screen) * 8.5px) 50%;
	}
	50% {
		-moz-opacity: 0.8;
		-moz-transform: scale(1.1);
		/* -moz-transform-origin: 40%; */
		-moz-transform-origin: calc(100% - var(--screen) * 8.5px) 50%;
	}
	100% {
		-moz-opacity: 0;
		-moz-transform: scale(.2);
		/* -moz-transform-origin: 92.68%; */
		-moz-transform-origin: calc(100% - var(--screen) * 8.5px) 50%;
	}
}

@-o-keyframes bounceOutJoystickRight {
	0% {
		-o-opacity: 0.6;
		-o-transform: scale(1);
		/* -o-transform-origin: center; */
		-o-transform-origin: calc(100% - var(--screen) * 8.5px) 50%;
	}
	25% {
		-o-opacity: 0.4;
		-o-transform: scale(.85);
		/* -o-transform-origin: 60%; */
		-o-transform-origin: calc(100% - var(--screen) * 8.5px) 50%;
	}
	50% {
		-o-opacity: 0.8;
		-o-transform: scale(1.1);
		/* -o-transform-origin: 40%; */
		-o-transform-origin: calc(100% - var(--screen) * 8.5px) 50%;
	}
	100% {
		-o-opacity: 0;
		-o-transform: scale(.2);
		/* -o-transform-origin: 92.68%; */
		-o-transform-origin: calc(100% - var(--screen) * 8.5px) 50%;
	}
}

@keyframes bounceOutJoystickRight {
	0% {
		opacity: 0.6;
		transform: scale(1);
		/* transform-origin: center; */
		transform-origin: calc(100% - var(--screen) * 8.5px) 50%;
	}
	25% {
		opacity: 0.4;
		transform: scale(.85);
		/* transform-origin: 60%; */
		transform-origin: calc(100% - var(--screen) * 8.5px) 50%;
	}
	50% {
		opacity: 0.8;
		transform: scale(1.1);
		/* transform-origin: 40%; */
		transform-origin: calc(100% - var(--screen) * 8.5px) 50%;
	}
	100% {
		opacity: 0;
		transform: scale(.2);
		/* transform-origin: 92.68%; */
		transform-origin: calc(100% - var(--screen) * 8.5px) 50%;
	}
}

.animated.bounceOutJoystickRight {
	-webkit-animation-name: bounceOutJoystickRight;
	-moz-animation-name: bounceOutJoystickRight;
	-o-animation-name: bounceOutJoystickRight;
	animation-name: bounceOutJoystickRight;
}

@-webkit-keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-moz-keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-o-keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.animated.fadeIn {
	-webkit-animation-name: fadeIn;
	-moz-animation-name: fadeIn;
	-o-animation-name: fadeIn;
	animation-name: fadeIn;
}

@-webkit-keyframes fadeOut {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

@-moz-keyframes fadeOut {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

@-o-keyframes fadeOut {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

@keyframes fadeOut {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

.animated.fadeOut {
	-webkit-animation-name: fadeOut;
	-moz-animation-name: fadeOut;
	-o-animation-name: fadeOut;
	animation-name: fadeOut;
}

@-webkit-keyframes iBIMButtonIn {
	0% {
		opacity: 0;
		-webkit-transform: scale(0.5);
	}

	100% {
		opacity: 1;
		-webkit-transform: scale(1);
	}
}

@-moz-keyframes iBIMButtonIn {
	0% {
		opacity: 0;
		-moz-transform: scale(0.5);
	}

	100% {
		opacity: 1;
		-moz-transform: scale(1);
	}
}

@-o-keyframes iBIMButtonIn {
	0% {
		opacity: 0;
		-o-transform: scale(0.5);
	}

	100% {
		opacity: 1;
		-o-transform: scale(1);
	}
}

@keyframes iBIMButtonIn {
	0% {
		opacity: 0;
		transform: scale(0.5);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

.animated.iBIMButtonIn {
	-webkit-animation-name: iBIMButtonIn;
	-moz-animation-name: iBIMButtonIn;
	-o-animation-name: iBIMButtonIn;
	animation-name: iBIMButtonIn;
}

@-webkit-keyframes iBIMButtonOut {
	0% {
		opacity: 1;
		-webkit-transform: scale(1);
	}

	100% {
		opacity: 0;
		-webkit-transform: scale(0.5);
	}
}

@-moz-keyframes iBIMButtonOut {
	0% {
		opacity: 1;
		-moz-transform: scale(1);
	}

	100% {
		opacity: 0;
		-moz-transform: scale(0.5);
	}
}

@-o-keyframes iBIMButtonOut {
	0% {
		opacity: 1;
		-o-transform: scale(1);
	}

	100% {
		opacity: 0;
		-o-transform: scale(0.5);
	}
}

@keyframes iBIMButtonOut {
	0% {
		opacity: 1;
		transform: scale(1);
	}

	100% {
		opacity: 0;
		transform: scale(0.5);
	}
}

.animated.iBIMButtonOut {
	-webkit-animation-name: iBIMButtonOut;
	-moz-animation-name: iBIMButtonOut;
	-o-animation-name: iBIMButtonOut;
	animation-name: iBIMButtonOut;
}

@-webkit-keyframes opacityMaxJoystick {
	0% {
		opacity: 0.8;
	}

	100% {
		opacity: 1;
	}
}

@-moz-keyframes opacityMaxJoystick {
	0% {
		opacity: 0.8;
	}

	100% {
		opacity: 1;
	}
}

@-o-keyframes opacityMaxJoystick {
	0% {
		opacity: 0.8;
	}

	100% {
		opacity: 1;
	}
}

@keyframes opacityMaxJoystick {
	0% {
		opacity: 0.8;
	}

	100% {
		opacity: 1;
	}
}

.animated.opacityMaxJoystick {
	-webkit-animation-name: opacityMaxJoystick;
	-moz-animation-name: opacityMaxJoystick;
	-o-animation-name: opacityMaxJoystick;
	animation-name: opacityMaxJoystick;
}

@-webkit-keyframes opacityMinJoystick {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0.9;
	}
}

@-moz-keyframes opacityMinJoystick {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0.9;
	}
}

@-o-keyframes opacityMinJoystick {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0.9;
	}
}

@keyframes opacityMinJoystick {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0.9;
	}
}

.animated.opacityMinJoystick {
	-webkit-animation-name: opacityMinJoystick;
	-moz-animation-name: opacityMinJoystick;
	-o-animation-name: opacityMinJoystick;
	animation-name: opacityMinJoystick;
}


@-webkit-keyframes endJoystick {
	0% {
		opacity: 1;
	}

	30% {
		opacity: 0.85;
	}

	55% {
		opacity: 0.73;
	}

	75% {
		opacity: 0.63;
	}

	90% {
		opacity: 0.55;
	}

	100% {
		opacity: 0.5;
	}
}

@keyframes endJoystick {
	0% {
		opacity: 1;
	}

	30% {
		opacity: 0.85;
	}

	55% {
		opacity: 0.73;
	}

	75% {
		opacity: 0.63;
	}

	90% {
		opacity: 0.55;
	}

	100% {
		opacity: 0.5;
	}
}

.animated.endJoystick {
	-webkit-animation-name: endJoystick;
	animation-name: endJoystick;
}

@-webkit-keyframes minimapIn {
	0% {
		opacity: 0.2;
		-webkit-transform: translate( calc(var(--screen) * -45px), calc(var(--screen) * -45px) );
	}

	100% {
		opacity: 1;
		-webkit-transform: translate(0, 0);
	}
}

@-moz-keyframes minimapIn {
	0% {
		opacity: 0.2;
		-moz-transform: translate( calc(var(--screen) * -45px), calc(var(--screen) * -45px) );
	}

	100% {
		opacity: 1;
		-moz-transform: translate(0, 0);
	}
}

@-o-keyframes minimapIn {
	0% {
		opacity: 0.2;
		-o-transform: translate( calc(var(--screen) * -45px), calc(var(--screen) * -45px) );
	}

	100% {
		opacity: 1;
		-o-transform: translate(0, 0);
	}
}

@keyframes minimapIn {
	0% {
		opacity: 0.2;
		transform: translate( calc(var(--screen) * -45px), calc(var(--screen) * -45px) );
	}

	100% {
		opacity: 1;
		transform: translate(0, 0);
	}
}

.animated.minimapIn {
	-webkit-animation-name: minimapIn;
	-moz-animation-name: minimapIn;
	-o-animation-name: minimapIn;
	animation-name: minimapIn;

	/* animation-play-state: running; */
}

@-webkit-keyframes searchIn {
	0% {
		opacity: 0.2;
		-webkit-transform: translateX(calc(var(--screen) * 116px));
	}

	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
	}
}

@-moz-keyframes searchIn {
	0% {
		opacity: 0.2;
		-moz-transform: translateX(calc(var(--screen) * 116px));
	}

	100% {
		opacity: 1;
		-moz-transform: translateX(0);
	}
}

@-o-keyframes searchIn {
	0% {
		opacity: 0.2;
		-o-transform: translateX(calc(var(--screen) * 116px));
	}

	100% {
		opacity: 1;
		-o-transform: translateX(0);
	}
}

@keyframes searchIn {
	0% {
		opacity: 0.2;
		transform: translateX(calc(var(--screen) * 116px));
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.animated.searchIn {
	-webkit-animation-name: searchIn;
	-moz-animation-name: searchIn;
	-o-animation-name: searchIn;
	animation-name: searchIn;
}

@-webkit-keyframes searchOut {
	0% {
		opacity: 1;
		-webkit-transform: translateX(0);
	}

	100% {
		opacity: 0.2;
		-webkit-transform: translateX(calc(var(--screen) * 116px));
	}
}

@-moz-keyframes searchOut {
	0% {
		opacity: 1;
		-moz-transform: translateX(0);
	}

	100% {
		opacity: 0.2;
		-moz-transform: translateX(calc(var(--screen) * 116px));
	}
}

@-o-keyframes searchOut {
	0% {
		opacity: 1;
		-o-transform: translateX(0);
	}

	100% {
		opacity: 0.2;
		-o-transform: translateX(calc(var(--screen) * 116px));
	}
}

@keyframes searchOut {
	0% {
		opacity: 1;
		transform: translateX(0);
	}

	100% {
		opacity: 0.2;
		transform: translateX(calc(var(--screen) * 116px));
	}
}

.animated.searchOut {
	-webkit-animation-name: searchOut;
	-moz-animation-name: searchOut;
	-o-animation-name: searchOut;
	animation-name: searchOut;
}


@-webkit-keyframes chatBoxIn {
	0% {
		opacity: 0.2;
		/* -webkit-transform: translateY( calc(var(--screen) * 46px) ); */
		-webkit-transform: scale(0.01);
	}

	100% {
		opacity: 1;
		/* -webkit-transform: translateY(0); */
		-webkit-transform: scale(1);
	}
}

@-moz-keyframes chatBoxIn {
	0% {
		opacity: 0.2;
		/* -moz-transform: translateY( calc(var(--screen) * 46px) ); */
		-moz-transform: scale(0.01);
	}

	100% {
		opacity: 1;
		/* -moz-transform: translateY(0); */
		-moz-transform: scale(1);
	}
}

@-o-keyframes chatBoxIn {
	0% {
		opacity: 0.2;
		/* -o-transform: translateY( calc(var(--screen) * 46px) ); */
		-o-transform: scale(0.01);
	}

	100% {
		opacity: 1;
		/* -o-transform: translateY(0); */
		-o-transform: scale(1);
	}
}

@keyframes chatBoxIn {
	0% {
		opacity: 0.2;
		/* transform: translateY( calc(var(--screen) * 46px) ); */
		transform: scale(0.01);
	}

	100% {
		opacity: 1;
		/* transform: translateY(0); */
		transform: scale(1);
	}
}

.animated.chatBoxIn {
	-webkit-animation-name: chatBoxIn;
	-moz-animation-name: chatBoxIn;
	-o-animation-name: chatBoxIn;
	animation-name: chatBoxIn;
}

@-webkit-keyframes chatBoxOut {
	0% {
		opacity: 1;
		/* -webkit-transform: translateY(0); */
		-webkit-transform: translateY(0) scale(1);
	}

	100% {
		opacity: 0.2;
		/* -webkit-transform: translateY( calc(var(--screen) * 46px) ); */
		-webkit-transform: translateY( calc(var(--screen) * -7px) ) scale(0.01);
	}
}

@-moz-keyframes chatBoxOut {
	0% {
		opacity: 1;
		/* -moz-transform: translateY(0); */
		-moz-transform: translateY(0) scale(1);
	}

	100% {
		opacity: 0.2;
		/* -moz-transform: translateY( calc(var(--screen) * 46px) ); */
		-moz-transform: translateY( calc(var(--screen) * -7px) ) scale(0.01);
	}
}

@-o-keyframes chatBoxOut {
	0% {
		opacity: 1;
		/* -o-transform: translateY(0); */
		-o-transform: translateY(0) scale(1);
	}

	100% {
		opacity: 0.2;
		/* -o-transform: translateY( calc(var(--screen) * 46px) ); */
		-o-transform: translateY( calc(var(--screen) * -7px) ) scale(0.01);
	}
}

@keyframes chatBoxOut {
	0% {
		opacity: 1;
		/* transform: translateY(0); */
		transform: translateY(0) scale(1);
	}

	100% {
		opacity: 0.2;
		/* transform: translateY( calc(var(--screen) * 46px) ); */
		transform: translateY( calc(var(--screen) * -7px) ) scale(0.01);
	}
}

.animated.chatBoxOut {
	-webkit-animation-name: chatBoxOut;
	-moz-animation-name: chatBoxOut;
	-o-animation-name: chatBoxOut;
	animation-name: chatBoxOut;
}

@-webkit-keyframes pushMessage {
	0% {
		-webkit-transform: translateY( calc(var(--screen) * 8px) );
	}

	100% {
		-webkit-transform: translateY(0);
	}
}

@-moz-keyframes pushMessage {
	0% {
		-moz-transform: translateY( calc(var(--screen) * 8px) );
	}

	100% {
		-moz-transform: translateY(0);
	}
}

@-o-keyframes pushMessage {
	0% {
		-o-transform: translateY( calc(var(--screen) * 8px) );
	}

	100% {
		-o-transform: translateY(0);
	}
}

@keyframes pushMessage {
	0% {
		transform: translateY( calc(var(--screen) * 8px) );
	}

	100% {
		transform: translateY(0);
	}
}

.animated.pushMessage {
	-webkit-animation-name: pushMessage;
	-moz-animation-name: pushMessage;
	-o-animation-name: pushMessage;
	animation-name: pushMessage;
}

@-webkit-keyframes pushNewMessage {
	0% {
		opacity: 0.1;
		-webkit-transform: translateY( calc(var(--screen) * 8px) );
	}

	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

@-moz-keyframes pushNewMessage {
	0% {
		opacity: 0.1;
		-moz-transform: translateY( calc(var(--screen) * 8px) );
	}

	100% {
		opacity: 1;
		-moz-transform: translateY(0);
	}
}

@-o-keyframes pushNewMessage {
	0% {
		opacity: 0.1;
		-o-transform: translateY( calc(var(--screen) * 8px) );
	}

	100% {
		opacity: 1;
		-o-transform: translateY(0);
	}
}

@keyframes pushNewMessage {
	0% {
		opacity: 0.1;
		transform: translateY( calc(var(--screen) * 8px) );
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.animated.pushNewMessage {
	-webkit-animation-name: pushNewMessage;
	-moz-animation-name: pushNewMessage;
	-o-animation-name: pushNewMessage;
	animation-name: pushNewMessage;
}

@-webkit-keyframes launcherLeftOutAnimation {
	0% {
		opacity: 1;
		-webkit-transform: translateX(0);
	}

	100% {
		opacity: 0;
		-webkit-transform: translateX(-100%);
	}
}

@-moz-keyframes launcherLeftOutAnimation {
	0% {
		opacity: 1;
		-moz-transform: translateX(0);
	}

	100% {
		opacity: 0;
		-moz-transform: translateX(-100%);
	}
}

@-o-keyframes launcherLeftOutAnimation {
	0% {
		opacity: 1;
		-o-transform: translateX(0);
	}

	100% {
		opacity: 0;
		-o-transform: translateX(-100%);
	}
}

@keyframes launcherLeftOutAnimation {
	0% {
		opacity: 1;
		transform: translateX(0);
	}

	100% {
		opacity: 0;
		transform: translateX(-100%);
	}
}

.animated.launcherLeftOut {
	-webkit-animation-name: launcherLeftOutAnimation;
	-moz-animation-name: launcherLeftOutAnimation;
	-o-animation-name: launcherLeftOutAnimation;
	animation-name: launcherLeftOutAnimation;
}

@-webkit-keyframes launcherLeftIn {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-100%);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateX(0%);
	}
}

@-moz-keyframes launcherLeftIn {
	0% {
		opacity: 0;
		-moz-transform: translateX(-100%);
	}

	100% {
		opacity: 1;
		-moz-transform: translateX(0%);
	}
}

@-o-keyframes launcherLeftIn {
	0% {
		opacity: 0;
		-o-transform: translateX(-100%);
	}

	100% {
		opacity: 1;
		-o-transform: translateX(0%);
	}
}

@keyframes launcherLeftIn {
	0% {
		opacity: 0;
		transform: translateX(-100%);
	}

	100% {
		opacity: 1;
		transform: translateX(0%);
	}
}

.animated.launcherLeftIn {
	-webkit-animation-name: launcherLeftIn;
	-moz-animation-name: launcherLeftIn;
	-o-animation-name: launcherLeftIn;
	animation-name: launcherLeftIn;
}

@-webkit-keyframes launcherRightOut {
	0% {
		opacity: 1;
		-webkit-transform: translateX(0%);
	}

	100% {
		opacity: 0;
		-webkit-transform: translateX(100%);
	}
}

@-moz-keyframes launcherRightOut {
	0% {
		opacity: 1;
		-moz-transform: translateX(0%);
	}

	100% {
		opacity: 0;
		-moz-transform: translateX(100%);
	}
}

@-o-keyframes launcherRightOut {
	0% {
		opacity: 1;
		-o-transform: translateX(0%);
	}

	100% {
		opacity: 0;
		-o-transform: translateX(100%);
	}
}

@keyframes launcherRightOut {
	0% {
		opacity: 1;
		transform: translateX(0%);
	}

	100% {
		opacity: 0;
		transform: translateX(100%);
	}
}

.animated.launcherRightOut {
	-webkit-animation-name: launcherRightOut;
	-moz-animation-name: launcherRightOut;
	-o-animation-name: launcherRightOut;
	animation-name: launcherRightOut;
}

@-webkit-keyframes launcherRightIn {
	0% {
		opacity: 0;
		-webkit-transform: translateX(100%);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateX(0%);
	}
}

@-moz-keyframes launcherRightIn {
	0% {
		opacity: 0;
		-moz-transform: translateX(100%);
	}

	100% {
		opacity: 1;
		-moz-transform: translateX(0%);
	}
}

@-o-keyframes launcherRightIn {
	0% {
		opacity: 0;
		-o-transform: translateX(100%);
	}

	100% {
		opacity: 1;
		-o-transform: translateX(0%);
	}
}

@keyframes launcherRightIn {
	0% {
		opacity: 0;
		transform: translateX(100%);
	}

	100% {
		opacity: 1;
		transform: translateX(0%);
	}
}

.animated.launcherRightIn {
	-webkit-animation-name: launcherRightIn;
	-moz-animation-name: launcherRightIn;
	-o-animation-name: launcherRightIn;
	animation-name: launcherRightIn;
}

@-webkit-keyframes waiting {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

@-moz-keyframes waiting {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

@-o-keyframes waiting {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

@keyframes waiting {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

@-webkit-keyframes scaleIn {
	0% {
		-webkit-transform: scale(0.01);
	}

	100% {
		-webkit-transform: scale(1);
	}
}

@-moz-keyframes scaleIn {
	0% {
		-moz-transform: scale(0.01);
	}

	100% {
		-moz-transform: scale(1);
	}
}

@-o-keyframes scaleIn {
	0% {
		-o-transform: scale(0.01);
	}

	100% {
		-o-transform: scale(1);
	}
}

@keyframes scaleIn {
	0% {
		transform: scale(0.01);
	}

	100% {
		transform: scale(1);
	}
}

.animated.scaleIn {
	-webkit-animation-name: scaleIn;
	-moz-animation-name: scaleIn;
	-o-animation-name: scaleIn;
	animation-name: scaleIn;
	transform-origin: calc(var(--screen)*8.5px) calc(var(--screen)*8.5px);
}

@-webkit-keyframes scaleOut {
	0% {
		-webkit-transform: scale(1);
	}

	100% {
		-webkit-transform: scale(0.01);
	}
}

@-moz-keyframes scaleOut {
	0% {
		-moz-transform: scale(1);
	}

	100% {
		-moz-transform: scale(0.01);
	}
}

@-o-keyframes scaleOut {
	0% {
		-o-transform: scale(1);
	}

	100% {
		-o-transform: scale(0.01);
	}
}

@keyframes scaleOut {
	0% {
		transform: scale(1);
	}

	100% {
		transform: scale(0.01);
	}
}

.animated.scaleOut {
	-webkit-animation-name: scaleOut;
	-moz-animation-name: scaleOut;
	-o-animation-name: scaleOut;
	animation-name: scaleOut;
	transform-origin: calc(var(--screen)*8.5px) calc(var(--screen)*8.5px);
}

/*********************************************************************/
/**																	**/
/**						GLOBAL UI SLIDER							**/
/**																	**/
/*********************************************************************/

.noUi-target,
.noUi-target * {
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-user-select: none;
	-ms-touch-action: none;
	touch-action: none;
	-ms-user-select: none;
	-moz-user-select: none;
	user-select: none;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.noUi-target {
	position: relative;
	direction: ltr;
}

.noUi-base {
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 1;
	/* Fix 401 */
}

.noUi-connect {
	position: absolute;
	right: 0;
	top: 0;
	left: 0;
	bottom: 0;
}

.noUi-origin {
	position: absolute;
	height: 0;
	width: 0;
}

.noUi-handle {
	position: relative;
	z-index: 1;
}

.noUi-state-tap .noUi-connect,
.screenPad .noUi-state-tap .noUi-origin,
.keyboardPad .noUi-state-tap .noUi-origin,
.gamePad .noUi-state-tap .noUi-origin {
	-webkit-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
	transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
}

.noUi-state-drag * {
	cursor: inherit !important;
}

/* Painting and performance;
	* Browsers can paint handles in their own layer.
	*/
.noUi-base,
.noUi-handle {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

/* Slider size and handle placement;
	*/
.noUi-connect {
	/*background: #3FB8AF*/
	/*box-shadow: inset 0 0 3px rgba(51, 51, 51, 0.45);*/
	-webkit-transition: background 450ms;
	transition: background 450ms;
}

/* Handles and cursors;
	*/
.noUi-draggable {
	cursor: ew-resize;
}

.noUi-vertical .noUi-draggable {
	cursor: ns-resize;
}

/* Handle stripes;
	*/
.noUi-handle:before,
.noUi-handle:after {
	content: "";
	display: none;
	position: absolute;
	height: 4vw;
	width: 0.5vw;
	;
	background: #E8E7E6;
	left: 4vw;
	top: 1.5vw;
}

.noUi-handle:after {
	left: 5vw;
}

.noUi-vertical .noUi-handle:before,
.noUi-vertical .noUi-handle:after {
	width: 14px;
	height: 1px;
	left: 6px;
	top: 14px;
}

.noUi-vertical .noUi-handle:after {
	top: 17px;
}

/* Disabled state;
	*/
[disabled] .noUi-connect {
	background: #B8B8B8;
}

[disabled].noUi-target,
[disabled].noUi-handle,
[disabled] .noUi-handle {
	cursor: not-allowed;
}

/* Base;
	*
	*/
.noUi-pips,
.noUi-pips * {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.noUi-pips {
	position: absolute;
	color: #999;
}

/* Values;
	*
	*/
.noUi-value {
	position: absolute;
	text-align: center;
}

.noUi-value-sub {
	color: #ccc;
	font-size: 10px;
}

/* Markings;
	*
	*/
.noUi-marker {
	position: absolute;
	background: #CCC;
}

.noUi-marker-sub {
	background: #AAA;
}

.noUi-marker-large {
	background: #AAA;
}

/* Horizontal layout;
	*
	*/
.noUi-pips-horizontal {
	padding: 10px 0;
	height: 80px;
	top: 100%;
	left: 0;
	width: 100%;
}

.noUi-value-horizontal {
	-webkit-transform: translate3d(-50%, 50%, 0);
	transform: translate3d(-50%, 50%, 0);
}

.noUi-marker-horizontal.noUi-marker {
	margin-left: -1px;
	width: 2px;
	height: 5px;
}

.noUi-marker-horizontal.noUi-marker-sub {
	height: 10px;
}

.noUi-marker-horizontal.noUi-marker-large {
	height: 15px;
}

/* Vertical layout;
	*
	*/
.noUi-pips-vertical {
	padding: 0 10px;
	height: 100%;
	top: 0;
	left: 100%;
}

.noUi-value-vertical {
	-webkit-transform: translate3d(0, 50%, 0);
	transform: translate3d(0, 50%, 0);
	padding-left: 25px;
}

.noUi-marker-vertical.noUi-marker {
	width: 5px;
	height: 2px;
	margin-top: -1px;
}

.noUi-marker-vertical.noUi-marker-sub {
	width: 10px;
}

.noUi-marker-vertical.noUi-marker-large {
	width: 15px;
}

.noUi-tooltip {
	/* display: block; */
	display: none;
	position: absolute;
	border: 1px solid #D9D9D9;
	border-radius: 3px;
	background: #fff;
	color: #000;
	padding: 5px;
	text-align: center;
	width: calc(var(--screen) * 12px);
}

.noUi-active .noUi-tooltip {
	display: block;
}

.noUi-horizontal .noUi-tooltip {
	-webkit-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
	left: 50%;
	/* bottom: 120%; */
	top: 120%;
}

.noUi-vertical .noUi-tooltip {
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
	top: 50%;
	right: 120%;
}