@CHARSET "UTF-8";

*, *::before, *::after {
    box-sizing: border-box;
}

@font-face {
    font-family: 'ralewayregular';
    src: url('./../fonts/Raleway/Raleway-Regular.ttf') format('truetype');
}

body
{
	margin:0px;
	padding:0px;
	background-color: #9BC2FF;
	font-family: ralewayregular;
	font-size: 14px;
	width:100vw;
	overflow-x: hidden;
}

button
{
	background-color: rgb(64, 130, 229);
	color:#FFFFFF;
	padding:10px;
	border:none;
	cursor:pointer;
}

button:disabled
{
	background-color: rgb(159, 185, 224);
	color:#E3E3E3;
}

ul.menu
{
	list-style: none;
	margin:0px;
	padding:0px;
	margin-top:10px;
	min-height:35px;
	margin-left: 10px;
	margin-right: 10px;
	position:relative;
	text-align: left;
}

ul.menu li
{
	display:inline-block;
	margin-left:2px;
	margin-right:2px;
	vertical-align: top;
	width:150px;
	
	border:1px solid #000000;
	/*border-bottom:none;*/
	line-height: 25px;
	height: 35px;
	text-align: center;
	font-family: Arial;
	font-size: 13px;
	padding-top:5px;
	user-select:none;

}

ul.menu li:hover
{
	background-color: #EFEFEF;
}

ul.menu li:nth-child(1) { left : 30px; }
ul.menu li:nth-child(2) { left : 280px; }
ul.menu li:nth-child(3) { left : 530px; }
ul.menu li:nth-child(4) { left : 780px; }
ul.menu li:nth-child(5) { left : 1030px; }
ul.menu li:nth-child(6) { left : 1280px; }

ul.menu li:hover
{
	cursor:pointer;
}

ul.menu li.selected
{
	background-color: #FFFFFF;
	font-weight: 600;
	white-space: nowrap;
    overflow: hidden;
}

#connecteur
{
	padding-top:15px; 
	background-color: rgb(209, 226, 252); 
	text-align: center; 
	position:absolute; 
	width:300px; 
	height:160px; 
	left:50%; 
	top:50%; 
	margin-top:-80px; 
	margin-left:-150px; 
	border:1px solid rgb(0,0,0);
}

#contenu
{
	margin-left:10px;
	margin-right:10px;
	position:relative;
	background-color: #FFFFFF;
	border:1px solid #000000;
	height:auto;
	min-height:calc(100vh - 80px);
}

 .changementMode
 {
 	width:20%;
 	height:40px;
 	display: inline-block;
 	vertical-align: top;
 	position:relative;
 }

.changementMode .btchangeMode
{
	width:100%;
	height:100%;
	display:flex;
	align-items: center;
  	justify-content: center;
  	color:#FFFFFF;
  	cursor:pointer;
}

.changementMode img:hover
{
	background-color: rgba(0,0,0,0.3);
	cursor:pointer;
	border-radius:5px;
} 

.titre
{
	background-color: rgb(65, 198, 87);
}

.red
{
	background-color: rgb(255, 0, 0);
} 

.orange
{
	background-color: rgb(255, 178, 56);
} 
 table.border
 {
 	border: 1px solid #888888;
 	border-collapse: collapse;
 }
 

 
 #zoneAlertes
 {
 	position:absolute;
 	right:-400px;
 	top:0px;
 	bottom:0px;
 	width:400px;
 	transition:1s;
 	background-color:#888888;
 	color:#FFFFFF;
 	z-index:1000;
 	overflow:auto;
 }
 
 #zoneAlertes.selected
 {
 	right:0px;
 }
 
 @-webkit-keyframes blinker {
  from {opacity: 1.0;}
  to {opacity: 0.0;}
}
.blink{
	text-decoration: blink;
	-webkit-animation-name: blinker;
	-webkit-animation-duration: 0.6s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:ease-in-out;
	-webkit-animation-direction: alternate;
	background-color: #FF0000;
}

.caissetactile
{
	font-size: 20px !important;
	background-color: #FFFF00;
	font-weight: 600;
	
	padding-top: 5px;
}