:root{
	font-size:1vw;
}
#containerLink{
	display:none;
	position:absolute;
	background:#FFF;
	padding:.5rem;
	font-size:0.8rem;
	bottom:0;
	left:10%;
	right:0;
	box-shadow:0 0 10px rgb(0 0 0 /40%);
}
#containerLink.appear{
	display:block;
}

body{
	height:100vh;
	width:100vw;
	margin:0;
	padding:0;
	font-family:sans-serif;
	overflow:hidden;
}
header{
	position:absolute;
	top:0;
	left:0;
	right:0;
	height:100vh;
	width:10%;
	background:#FFF;
	box-shadow:0 0 10px rgb(0 0 0 /40%);
	z-index:2;
}
select,
#colorWall,
#colorDisplay{
	border:solid 1px #000;
	cursor:pointer;
}
.inputbox{
	margin:5% 10%;
}
.inputbox span{
	font-size:.8rem;
	line-height:1.2rem;
}
#logo{
	display:block;
	height:10%;
	width:90%;
	margin:auto;
	background:url(logo-cad.jpg) no-repeat center center;
	background-size:contain;
	margin-bottom:1.5rem;
}

#widget,
#theme,
#display,
#wall,
#colorWall,
#colorDisplay,
#jingle,
#bigscreen{
	display:block;
	box-sizing:border-box;
	height:1.4rem;
	width:100%;
}

.inputbox.hide{
	display:none!important;
}
option.hide{
	display:none;
}
.logoform{
	text-align:center;
}
.logoform label{
	display:block;
	padding-top:50%;
	width:100%;
	background:url(logocustom.jpg) center center no-repeat;
	background-size:contain;
	position:relative;
	cursor:pointer;
}
.logoform i{
	font-size:.58rem;
	position:absolute;
	left:50%;
	top:100%;
	transform:translate(-50%);
	padding:0.3rem;
	background:rgba(255,255,255,.9);
	border-radius:0.3rem;
}
.logoform #rol{
	display:none;
}
.logoform:hover #rol{
	display:block;
	font-size:.58rem;
	color:#000;
	position:absolute;
	top:50%;
	left:50%;
	width:90%;
	transform:translate(-50%,-50%);
	background:rgba(255,255,255,.9);
	line-height:0.7rem;
}
.error{
	color:#FFF;
	background:#F00;
	position:absolute;
	top:0%;
	left:10%;
	z-index:1;
	padding:0.5rem;
	border-bottom-right-radius:0.5rem;
	font-size:0.7rem;
}
#deleteLogo{
	height:1.4rem;
	background:red;
	width:1.4rem;
	margin-bottom:-0.7rem;
	z-index:1;
	position:relative;
	border-radius:0.7rem;
	cursor:pointer;
}
#deleteLogo:before,
#deleteLogo:after{
	content:"";
	height:.2rem;
	width:1rem;
	background:#FFF;
	position:absolute;
	top:50%;
	left:50%;
	display:block;
}
#deleteLogo:before{transform:translate(-50%,-50%) rotate(-45deg);}
#deleteLogo:after{transform:translate(-50%,-50%) rotate(45deg);}
#logocustom{
	display:none;
}
#bkm{
	position:absolute;
	bottom:0;
	left:25%;
	width:50%;
	height:10%;
	background:url(logo.jpg) no-repeat left center;
	background-size:contain;
}

#containeFirst,
#containeSecond{
	position:absolute;
	top:0;
	left:10vw;
	width:45vw;
	height:100vh;
	background:#fff left center;
	background-size:60%;
}
#containeSecond{
	left:55vw;
	background:#fff right center;
	background-size:60%;
}
#containeFirst.wall-paint,
#containeSecond.wall-paint{
	background-image:url(wall/wall-paint.png);
}
#containeFirst.wall-plaster,
#containeSecond.wall-plaster{
	background-image:url(wall/wall-plaster.png);
}
#containeFirst.wall-wood,
#containeSecond.wall-wood{
	background-image:url(wall/wall-wood.png);
}
#containeFirst.wall-brick,
#containeSecond.wall-brick{
	background-image:url(wall/wall-brick.png);
}
#containeFirst.wall-big-tile,
#containeSecond.wall-big-tile{
	background-image:url(wall/wall-big-tile.png);
}
#containeFirst.wall-small-tile,
#containeSecond.wall-small-tile{
	background-image:url(wall/wall-small-tile.png);
}

#bgFirst,
#bgSecond,
#bgFirstIn,
#bgSecondIn{
	position:absolute;
	top:50%;
	left:50%;
	height:100%;
	width:100%;
	transform:translate(-50%,-50%);
}
#bgFirst.screen{
	background:url(screen/screen-v.png) no-repeat center center;
	background-size:contain;
}
#bgSecond.screen{
	background:url(screen/screen-h.png) no-repeat center center;
	background-size:contain;
}

#bgFirst.recessed-screen-wood{
	background:url(screen/recessed-screen-wood-v.png) no-repeat center center;
	background-size:contain;
}
#bgSecond.recessed-screen-wood{
	background:url(screen/recessed-screen-wood-h.png) no-repeat center center;
	background-size:contain;
}

#bgFirst.recessed-screen-steel{
	background:url(screen/recessed-screen-steel-v.png) no-repeat center center;
	background-size:contain;
}
#bgSecond.recessed-screen-steel{
	background:url(screen/recessed-screen-steel-h.png) no-repeat center center;
	background-size:contain;
}
#bgFirst.recessed-screen-ral{
	background:url(screen/recessed-screen-ral-v.png) no-repeat center center;
	background-size:contain;
}
#bgSecond.recessed-screen-ral{
	background:url(screen/recessed-screen-ral-h.png) no-repeat center center;
	background-size:contain;
}
#bgFirstIn.recessed-screen-ral{
	background:url(screen/recessed-screen-ral-va.png) no-repeat center center;
	background-size:contain;
}
#bgSecondIn.recessed-screen-ral{
	background:url(screen/recessed-screen-ral-ha.png) no-repeat center center;
	background-size:contain;
}
#bgFirst.terminal{
	background:url(screen/terminal-v.png) no-repeat center center;
	background-size:contain;
}
#bgSecond.terminal{
	background:url(screen/terminal-h.png) no-repeat center center;
	background-size:contain;
}
#bgFirstin.terminal{
	background:url(screen/terminal-va.png) no-repeat center center;
	background-size:contain;
}
#bgSecondin.terminal{
	background:url(screen/terminal-ha.png) no-repeat center center;
	background-size:contain;
}
#previewp,
#previewpCover{
	position:absolute;
	top:50%;
	left:50%;
	height:960px;
	width:540px;
	border:0;
	background:#FFF;
}
#previewl,
#previewlCover{
	position:absolute;
	top:50%;
	left:50%;
	height:540px;
	width:960px;
	border:0;
	background:#FFF;
}
#previewpCover,
#previewlCover{
	border:solid 2px #808080;
	background:transparent;
	outline:solid 2px #808080;
	box-sizing:border-box;
}
#previewp.old,
#previewpCover.old{
	height:1920px;
	width:1080px;
}
#previewl.old,
#previewlCover.old{
	height:1080px;
	width:1920px;
}
/* Color */
#colorwallinput,
#colordisplayinput{
	display:none;
}
.picker_done,
.picker_sample{
	display:none;
}
/* Switch */
.switch {
	position:relative;
	display:inline-block;
}

.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;
}

.slider:before {
	position:absolute;
	content:"";
	height:1rem;
	width:1rem;
	left:0.2rem;
	top:0.2rem;
	background-color:white;
	-webkit-transition:.4s;
	transition:.4s;
}
.slider:after {
	content:"Désactivé";
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	color:#FFF;
	
}

input:checked + .slider {
	background-color:#3759bc;
}

input:focus + .slider {
	box-shadow:0 0 1px #3759bc;
}

input:checked + .slider:before {
	left:calc(100% - 1.2rem);
}
input:checked + .slider:after{
	content:"Activé"!important;
}

/* Rounded sliders */
.slider.round {
	border-radius:1rem;
}

.slider.round:before {
  border-radius:50%;
}
#crisis{
	display:none;
}
#crisis.show{
	display:block;
}
#crisis{
	position:absolute;
	z-index:1;
	top:5%;
	right:5%;
	width:10rem;
	height:2rem;
	color:#FFF;
	font-size:.8rem;
	padding:0.4rem;
	background:#e63946;
	border-radius:0.4rem;
	text-align:center;
	cursor:pointer;
}
#crisis.on{
	background:#0b977e;
}
#crisis:after{
	Content:"Cliquez ici pour afficher une situation de crise.";
}
#crisis.on:after{
	Content:"Cliquez ici pour afficher les données en temps réel.";
}
.inputbox a{
	background: #365ADB;
    display: block;
    padding: 0.2rem;
    font-size: 1rem;
    text-decoration: none;
    color: #FFF;
    text-align: center;
    border-radius: 0.4rem;
    margin-top: 1rem;
}
.inputbox a:hover{
	background: #52ade9;
}
.inputbox a.reset{
	background: #666;
}
.inputbox a.reset:hover{
	background: #3333;
}
@media (orientation:portrait) {
	:root{
		font-size:1vh;
	}
	header{
		width:20%;
	}
	#containeFirst{
		background:#fff center bottom;
		width:80%;
		height:50%;
		left:20%;
	}
	#containeSecond{
		background:#fff center top;
		top:50%;
		left:20%;
		width:80%;
		height:50%;
	}
	.error, #containerLink{
		left:20%;
	}
}

@media (max-width:700px) and (orientation:portrait){
	:root{
		font-size:2vh;
	}
	html,
	body{
		width:100%;
		height:100%;
		overflow:hidden;
	}
	header{
		height:10%;
		width:100%;
	}
	#crisis{
		top:12%;
	}
	#logo{
		position:absolute;
		left:2%;
		top:0;
		width:25%;
		height:100%;
		background-size:90%;
		margin:0;
	}
	#bkm{
		position:absolute;
		left:90%;
		top:0;
		width:10%;
		height:100%;
		background-size:90%;
	}
	#smart1{
		position:absolute;
		left:45%;
		left:30%;
		top:24%;
		width:50%;
		background-size:90%;
		margin:0;
	}
	
	#containeFirst,
	#containeSecond{
		height:90%;
		width:100%;
		top:10%;
		left:0;
		transition:left .5S ease;
		background-size:40%;
	}
	#containeSecond{
		left:100%;
	}
	#bgFirst,
	#bgSecond,
	#bgFirstIn,
	#bgSecondIn {
		height:100%;
		width:100%;
	}

	#containeSecond #previewl{display:none;}
	#containeFirst.alt{left:-100%;}
	#containeFirst.alt #previewp{display:none!important;}
	#containeSecond.alt{left:0;}
	#containeSecond.alt #previewl{display:block!important;}
/* Button */
	#menuTrigger,
	#rotateScreen,
	#zoomScreen{
		position:absolute;
		height:2rem;
		width:6.5rem;
		background:#FFF;
		border-radius:1rem;
		padding-left:2.2rem;
		top:12%;
		left:3%;
		box-shadow:0 0 0.5rem rgba(0,0,0,.3);
		padding-top:0.5rem;
		box-sizing:border-box;
	}
	#menuTrigger{z-index:5}
	#rotateScreen{top:18%}
	#zoomScreen{top:24%}
	
	#menuTrigger .ico,
	#rotateScreen .ico,
	#zoomScreen .ico{
		position:absolute;
		height:1.6rem;
		width:1.6rem;
		top:.2rem;
		left:.2rem;
		background:#3759bc;
		border-radius:1rem;
	}
	/* menu */
	#menuTrigger .ico{
		transition:transform .5S ease;
	}
	#menuTrigger.open .ico{
		transform:rotate(-90deg);
	}
	#menuTrigger .ico div{
		position:absolute;
		background:#FFFFFF;
		width:15%;
		height:15%;
		border-radius:30px;
		top:50%;
		left:50%;
		transition:height .5S ease,transform .5S ease;
	}
	#menuTrigger .ico div:nth-child(1){transform:translate(100%,-50%);}
	#menuTrigger .ico div:nth-child(2){transform:translate(-50%,-50%);}
	#menuTrigger .ico div:nth-child(3){transform:translate(-200%,-50%);}

	#menuTrigger.open .ico div:nth-child(1){
		height:40%;
		transform:translate(10%,-80%) rotate(-45deg);
	}
	#menuTrigger.open .ico div:nth-child(2){
		height:60%;
	}
	#menuTrigger.open .ico div:nth-child(3){
		height:40%;
		transform:translate(-130%,-80%) rotate(45deg);
	}
	
	/* Rotate */
	#rotateScreen .ico{
		background:#3759bc url(screen-rotate.svg) center center;
		background-size:contain;
		transition:transform .5S ease;
	}
	#rotateScreen.alt .ico{
		transform:rotate(90deg);
	}
	
	/* Zoom */
	#zoomScreen{transition:top .5S ease;}
	#zoomScreen .ico{transition:top .5S ease;}
	#zoomScreen .ico:before,
	#zoomScreen .ico:after{
		content:"";
		display:block;
		position:absolute;
		top:50%;
		left:10%;
		width:40%;
		height:40%;
		background:url(screen-zoom.svg) center center;
		background-size:contain;
		transition:transform .5S ease;
	}
	#zoomScreen .ico:after{
		left:50%;
		top:10%;
		transform:rotate(180deg);
	}
	#zoomScreen.zoom{
		z-index:10;
		top:4%;
	}
	#zoomScreen.zoom .ico{
		transform:rotate(90deg);
	}
	#zoomScreen.zoom .ico:before{
		transform:rotate(180deg);
	}
	#zoomScreen.zoom .ico:after{
		transform:rotate(0)
	}

	.slider:before{
		display:none;
	}
	#menuSmart{
		display:block;
		padding-top:2rem;
		top:100%;
		left:-100%;
		width:100%;
		position:absolute;
		text-align:center;
		background:#FFF;
		transition:left .5S ease;
		box-shadow:0 0 10px rgb(0 0 0 /40%);
		padding-bottom:0.5rem;
	}
	#menuSmart.open{
		left:0;
	}
	#menuSmart .inputbox{
		display:inline-block;
		width:40%;
		margin:0;
		vertical-align:middle;
		padding:1%;
	}
	.popup.popup_bottom{
		transform:translateX(-50%);
	}
	.popup.popup_bottom .picker_arrow{
		left:80%!important;
	}
	#previewp.zoom{
		top:0;
		left:0;
		width:100%;
		height:100%;
		z-index:10;
	}
	#menuSmart.open #out{
		display:block;
		position:absolute;
		top:100%;
		height:200%;
		width:100%;
	}
	.logoform label{
		padding-top:30%;
	}
	.error{
		top:auto;
		bottom:0;
		left:0;
		width:100%;
		border-radius:0;
	}
}
@media (max-height:700px) and (orientation:landscape){
	:root{
		font-size:2vw;
	}
	html,
	body{
		width:100%;
		height:100%;
		overflow:hidden;
	}
	
	header{
		height:15%;
		width:100%;
	}
	#crisis{
		top:22%;
	}
	#logo{
		position:absolute;
		left:2%;
		top:0;
		width:15%;
		height:100%;
		background-size:90%;
		margin:0;
	}
	#bkm{
		position:absolute;
		left:85%;
		top:0;
		width:15%;
		height:100%;
		background-size:90%;
	}
	#smart1{
		position:absolute;
		left:45%;
		left:30%;
		top:24%;
		width:50%;
		background-size:90%;
		margin:0;
	}
	
	#containeFirst,
	#containeSecond{
		height:85%;
		width:100%;
		top:15%;
		left:0;
		transition:left .5S ease;
		background-size:40%;
	}
	#containeSecond{
		left:100%;
	}
	#bgFirst,
	#bgSecond,
	#bgFirstIn,
	#bgSecondIn {
		height:100%;
		width:100%;
	}
	
	#containeSecond #previewl{display:none;}
	#containeFirst.alt{left:-100%;}
	#containeFirst.alt #previewp{display:none!important;}
	#containeSecond.alt{left:0;}
	#containeSecond.alt #previewl{display:block!important;}

	
/* Button */
	#menuTrigger,
	#rotateScreen,
	#zoomScreen{
		position:absolute;
		height:2rem;
		width:6.5rem;
		background:#FFF;
		border-radius:1rem;
		padding-left:2.2rem;
		top:12%;
		left:3%;
		box-shadow:0 0 0.5rem rgba(0,0,0,.3);
		padding-top:0.5rem;
		box-sizing:border-box;
	}	
	#menuTrigger{z-index:5;top:18%}
	#rotateScreen{top:30%}
	#zoomScreen{top:42%}
	
	#menuTrigger .ico,
	#rotateScreen .ico,
	#zoomScreen .ico{
		position:absolute;
		height:1.6rem;
		width:1.6rem;
		top:.2rem;
		left:.2rem;
		background:#3759bc;
		border-radius:1rem;
	}
	/* menu */
	#menuTrigger .ico{
		transition:transform .5S ease;
	}
	#menuTrigger.open .ico{
		transform:rotate(-90deg);
	}
	#menuTrigger .ico div{
		position:absolute;
		background:#FFFFFF;
		width:15%;
		height:15%;
		border-radius:30px;
		top:50%;
		left:50%;
		transition:height .5S ease,transform .5S ease;
	}
	#menuTrigger .ico div:nth-child(1){transform:translate(100%,-50%);}
	#menuTrigger .ico div:nth-child(2){transform:translate(-50%,-50%);}
	#menuTrigger .ico div:nth-child(3){transform:translate(-200%,-50%);}

	#menuTrigger.open .ico div:nth-child(1){
		height:40%;
		transform:translate(10%,-80%) rotate(-45deg);
	}
	#menuTrigger.open .ico div:nth-child(2){
		height:60%;
	}
	#menuTrigger.open .ico div:nth-child(3){
		height:40%;
		transform:translate(-130%,-80%) rotate(45deg);
	}
	
	/* Rotate */
	#rotateScreen .ico{
		background:#3759bc url(screen-rotate.svg) center center;
		background-size:contain;
		transition:transform .5S ease;
	}
	#rotateScreen.alt .ico{
		transform:rotate(90deg);
	}
	
	/* Zoom */
	#zoomScreen{transition:top .5S ease;}
	#zoomScreen .ico{transition:top .5S ease;}
	#zoomScreen .ico:before,
	#zoomScreen .ico:after{
		content:"";
		display:block;
		position:absolute;
		top:50%;
		left:10%;
		width:40%;
		height:40%;
		background:url(screen-zoom.svg) center center;
		background-size:contain;
		transition:transform .5S ease;
	}
	#zoomScreen .ico:after{
		left:50%;
		top:10%;
		transform:rotate(180deg);
	}
	#zoomScreen.zoom{
		z-index:10;
		top:4%;
	}
	#zoomScreen.zoom .ico{
		transform:rotate(90deg);
	}
	#zoomScreen.zoom .ico:before{
		transform:rotate(180deg);
	}
	#zoomScreen.zoom .ico:after{
		transform:rotate(0)
	}

	.slider:before{
		display:none;
	}
	#menuSmart{
		display:block;
		padding-top:1rem;
		top:100%;
		left:-100%;
		width:100%;
		position:absolute;
		text-align:center;
		background:#FFF;
		transition:left .5S ease;
		box-shadow:0 0 10px rgb(0 0 0 /40%);
		padding-bottom:0.5rem;
	}
	#menuSmart.open{
		left:0;
	}
	#menuSmart .inputbox{
		display:inline-block;
		width:22%;
		margin:0;
		vertical-align:middle;
		padding:1%;
	}
	.popup.popup_bottom{
		transform:translateX(-50%);
	}
	.popup.popup_bottom .picker_arrow{
		left:80%!important;
	}
	#previewp.zoom{
		top:0;
		left:0;
		width:100%;
		height:100%;
		z-index:10;
	}
	#menuSmart.open #out{
		display:block;
		position:absolute;
		top:100%;
		height:200%;
		width:100%;
	}
	.logoform label{
		padding-top:30%;
	}
		.error{
		top:auto;
		bottom:0;
		left:0;
		width:100%;
		border-radius:0;
	}
}