* {
    box-sizing: border-box;
}

/* ----------------------------------------------------------------For mobile phones: ----------------------------------------------------------------*/
/*[class*="col-"] {width: 100%;}*/
.row{margin-left:0px;}
#accueil{width:100%;}
#voiesgraph{border:none;}
.bandeau h4{font-size:22px;padding-top:10px;padding-left:20px;}
.divv{width:100%;display:none;}
.navigation{display:none;}
.nav{	display:block;}
.panneau{height:300px;}
.form1 input, .form1 textarea,.form1 select{margin-left:40%;}
.form1 .deport {float:right;margin-right:0px;margin-left:0px;}
.croix{right:20px;}
h4 span{width:auto;}


 /* ----------------------------------------------------------------For desktop----------------------------------------------------------------*/

 
 
@media only screen and (min-width: 768px) {

/*	
	.col-1 {width: 8.33%;}
	.col-2 {width: 16.66%;}
	.col-3 {width: 25%;}
	.col-4 {width: 33.33%;}
	.col-5 {width: 41.66%;}
	.col-6 {width: 50%;}
	.col-7 {width: 58.33%;}
	.col-8 {width: 66.66%;}
	.col-9 {width: 75%;}
	.col-10 {width: 83.33%;}
	.col-11 {width: 91.66%;}
	.col-12 {width: 100%;}
	*/
	.row{margin-left:240px;}
	#accueil{width:100%;}
	#accueil input[type="submit"]{max-height:none;}
	#voiesgraph{border:solid black 3px; border-radius:5px 0px 0px 5px;}
	.navigation{display:block;}
	.nav{display:none;}
	.panneau{height:500px;}
	.bandeau h4{font-size:30px;padding-top:10px;color:#52b586;}
	.divv{max-width:200px;position:absolute;z-index:10;margin-left:-200px;}
	.form1 input, .form1 textarea,.form1 select{margin-left:200px;}
	.form1 .deport {float:none;margin-right:0px;margin-left:35%;}
	h4 span{width: 62.6%;}
}
/*[class*="col-"] {
   float: left;
}
.row::after {
    content: ";
    clear: both;
    display: block;
}
*/



/*----------------------------------------------------------Paramètres globaux----------------------------------------------------------------*/

body {
	/* Stephane Bobo m'a demandé de mettre un background sobre pour l'application, j'ai donc mis des iD aux différents bodys pour l'accueil c'est #acc  pour le reste c'est #sobre
	background-image: url("/images/bg.jpg");
    background-repeat: repeat;
	font-family: "Open Sans", Helvetica Neue, Helvetica, Arial, sans-serif;
	min-width:300px;
	*/
}

a,a:visited, a:link {
    text-decoration: none;
	color: white;
	margin-left:6px;
}

h1{
	font-size: 30px;
	text-align:left;
}
h4{
	margin:0px;
	font-weight:800;
	text-align:left;
	font-size:18px;
}
h5{
	font-size: 20px;
}
h6{
	margin:5px;
	font-size:15px;
    text-decoration: underline;
}
h2,h3,h5,h6{
	text-align: center;
}

input{
	width:inherit;
}
input[type=submit]{
	cursor:pointer;
}

/*------------------------------------------------------------Login design sol----------------------------------------------------------------*/	

.logo {
    width: 213px;
    height: 36px;
    background: url('images/Dralam.png') no-repeat;
    margin: 30px auto;
}

.login-block {
    width: 320px;
    padding: 20px;
    background: #fff;
    border-radius: 5px;
    border-top: 5px solid #999;
    margin: 0 auto;
}

.login-block h1 {
    text-align: center;
    color: #000;
    font-size: 18px;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 20px;
}

.login-block input {
    width: 100%;
    height: 42px;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
    font-size: 14px;
    font-family: "Open Sans", Helvetica Neue, Helvetica, Arial, sans-serif;
    padding: 0 20px 0 50px;
    outline: none;
}

.login-block input#idi {
    background: #fff url('http://i.imgur.com/u0XmBmv.png') 20px top no-repeat;
    background-size: 16px 80px;
}

.login-block input#idi:focus {
    background: #fff url('http://i.imgur.com/u0XmBmv.png') 20px bottom no-repeat;
    background-size: 16px 80px;
}

.login-block input#mdp {
    background: #fff url('http://i.imgur.com/Qf83FTt.png') 20px top no-repeat;
    background-size: 16px 80px;
}

.login-block input#mdp:focus {
    background: #fff url('http://i.imgur.com/Qf83FTt.png') 20px bottom no-repeat;
    background-size: 16px 80px;
}

.login-block input:active, .login-block input:focus {
    border: 1px solid #999;
}

.login-block #button {
    width: 100%;
    height: 40px;
    background: #999;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid #888;
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 14px;
    font-family: "Open Sans", Helvetica Neue, Helvetica, Arial, sans-serif;
    outline: none;
    cursor: pointer;
	padding: 0px;
}

.login-block #button:hover {
    background: #888;
}


/*----------------------------------------------------------------tableaux----------------------------------------------------------------*/

table{
	width:100%;
	overflow:auto;
	-webkit-flex-grow:1;
	flex-grow:1;
}
thead tr {
	overflow:hidden;
}
table, th, td {
    border-collapse: collapse;
	border: 1px solid darkgrey;
	border-left: none;
    border-right: none;
}
td, th{
	height:25px;
	text-align: center;
}

#scrollzone td,#scrollzone th{
	text-align:center;
	width:120px;
	padding:4px;
}

#tablevoies thead tr,#dates thead tr{
	height:49px;
}
#dates tbody tr{
	font-size:14px;
}

#scrollzone thead tr{
	background-color:white;
	color:black;
	position:relative;
}
#scrollzone tbody td,#scrollzone tbody th{
	height:25px;
}

#voiesaffich td, #voiesaffich th{
	height:30px;
	font-size:16px;
}
#voiesgraph tbody{
	width: 100%
}
#voiesgraph td, #voiesgraph th{
	min-width:100%;
}
#voiesgraph th{
	background-color:#eeeeee;
}

.fixedcol thead tr{
	height:49px;
}
.fixedcol tbody tr{
	font-size:14px;
}
/* ----------------------------------------------------------------forms ----------------------------------------------------------------*/
.form1 span{
	position:absolute;
}
.form1 .deport{
	position:static;
}
.userform{
    display: flex;
    margin: auto;
    padding: 5px;
    border-bottom: 1px solid #dadada;
    height: 30px;
    overflow: hidden;
}
.userform input{
	border:none;
	font-weight:600;
}
.croix{
	display:none;
	cursor:pointer;
}
.userform:hover{
	background-color:#dadada;
}
.userformsel input,.userformsel select{
	width:150px;
	text-align:center;
	float:right;
}
.userformsel input[type="checkbox"]{
	float:none;
}
.userformsel{
	display: flex;
    margin: auto;
    padding: 15px;
	background-color:#f7f7f7;
    border-bottom: 1px solid #dadada;
	height:auto;
	margin-bottom: 5px;
}
.userform input,.userform select{
	width:150px;
	text-align:center;
	float:right;
}
.userform input[type="checkbox"]{
	float:none;
}
/* ----------------------------------------------------------------ids ----------------------------------------------------------------*/
#acc{
	background-image: url("/images/bg.jpg");
    background-repeat: repeat;
    font-family: "Open Sans", Helvetica Neue, Helvetica, Arial, sans-serif;
	
}
#sobre{
    background-color:#f7f7f7;
	font-family: "Open Sans", Helvetica Neue, Helvetica, Arial, sans-serif;
	min-width:300px;
	color:#666;
	font-size:15px;

}

#carte{
	width:100%;
	height: 100%;
	min-width: 300px;
}
#chartContainer{
	width:100%;
	min-width:190px;
	height:100%;
}
#coin{
	height:42px;
	width:100%;
}

#detailsvoies{
	font-size:14px;
}

#flexy{
	display:flex;
	flex-wrap:wrap;
	-webkit-flex-wrap: wrap;
	flex:auto;
	display: -webkit-flex; /* Safari */
	height:100%;
}
#graph{
	display:flex;
	flex:auto;
	display: -webkit-flex; /* Safari */
}
/* Safari 6.1+ */
	#flexy div:nth-of-type(1) {-webkit-flex-grow:1;}
	#flexy div:nth-of-type(2) {-webkit-flex-grow: 9;}
/* Standard+ */
	#flexy div:nth-of-type(1) {flex-grow: 1;}
	#flexy div:nth-of-type(2) {flex-grow: 9;}
/* Safari 6.1+ */
	#eqpts div:nth-of-type(1) {-webkit-flex-grow: 2;}
	#eqpts div:nth-of-type(2) {-webkit-flex-grow: 1;}
/* Standard+ */
	#eqpts div:nth-of-type(1) {flex-grow: 2;}
	#eqpts div:nth-of-type(2) {flex-grow: 1;}
	
	
#loader{
display: none;
}
#new{
	background-color:#dadada;
}
#selector{
	display:flex;
	flex-wrap:nowrap;
	justify-content:space-around;
	padding:5px;
	width:100%;
	height:100%;
}
#selector input{
	display:inline-block;
	max-width:100%;
}

/* Safari 6.1+ */
#voies div:nth-of-type(1) {-webkit-flex-grow: 1;}
/* Standard+ */
#voies div:nth-of-type(1) {flex-grow: 1;}

#widgets{
	color:white;
	height:32px;
	background-color:#89cc94;
	overflow-x:hidden;
	overflow-y:hidden;
}
#widgets img{
	margin:0px;
	float:none;
	}
#widgets img:hover{
	box-shadow: 0px 0px 2px 2px #888888 inset;
}

	
/* ----------------------------------------------------------------divs---------------------------------------------------------------- */
.bandeau{
	overflow-x:hidden;
	overflow-y:hidden;
	margin-left:10px;
	margin-right:10px;
	padding-top:2px;
	height:auto;
	color: black;
	border-bottom:solid #dadada 1px;
}
.bandeau img{
	margin-left:4px;
	margin-top:4px;
	float: left;
	height: 70px;
}
.bouton{
	padding:0px;
	height:36px;
	margin-top:14px;
	box-shadow: 0px 0px 5px #888888 ;
}
.boutonactif{
	background-color:darkgrey;
	padding:0px;
	height:36px;
	margin-top:14px;
	box-shadow: 0px 0px 1px #888888 inset;
}
.center{
    display: block;
    text-align: center;
    padding-top: 3%;
}
.closebtn{
	display:none;
	cursor:pointer;
	margin:5px;
	float:right;
	color:black;
	font-weight:900;
}
.containernw{
	flex-wrap: wrap;
	display:flex;
	flex:auto;
	display: -webkit-flex; /* Safari */
}
.chart{
	height:300px;
	width:100%;
	min-width:200px;
}
.droits{
	display:none;
	width: 50%;
	overflow-x:hidden;
	overflow-y:auto;
	padding-left:5px;
	border-left:solid #dadada 1px;
	margin-left:7px;
	min-width:160px;
}
.droits label:hover{
	background-color:#dadada;
}
.equipement{
	overflow:hidden;
	cursor:default;
	margin-bottom:5px;
	margin-left:2px;
	margin-right:2px;
	padding:15px;
	background-color:#F0F0F0;
	min-height:50px;
	min-width:200px;
	border:#bFbFbF 0px solid;
	max-height:120px;
}
.equipement [title~=details]{
	min-width:200px;
	max-width:550px;
	max-height:205px;
	overflow-x:hidden;
	overflow-y:hidden;
	font-size: 90%;
}
.equipement:hover{
	background-color:lightgrey;
}
.equipementselected{
	overflow:auto;
	min-width:200px;
	min-height:50px;
	max-height:250px;
	cursor:default;
	margin-bottom:5px;
	margin-left:2px;
	margin-right:2px;
	padding:15px;
	color:#f0f0f0;
	background-color:grey;
	font-weight:500;
	border:#bFbFbF 0px solid;
}
.equipementselected [title~=details]{
	min-width:200px;
	max-width:550px;
	max-height:205px;
	overflow-x:hidden;
	overflow-y:auto;
}

.fixedcol{
	background-color:none;
	width:180px;
}

.formu{
	width:150px;
	margin:0px;
	display:block;
	padding:5px;
}

.intro{
	font-size:13px;
	padding-top:5px;
	padding-left:20px;
	width:auto;
	/*border-radius: 5px 5px 0px 0px;*/
	height: 35px;
	color:#777777;
	font-weight:900;
	background-color:#EEEEEE;
}
.introvert{
	font-size:20px;
	padding-top:5px;
	padding-left:20px;
	width:auto;
	/*border-radius: 5px 5px 0px 0px;*/
	height: 35px;
	color:#777777;
	font-weight:900;
	background-color:#EEEEEE;
	}
.introbleu{
	font-size:20px;
	padding-top:5px;
	padding-left:20px;
	width:auto;
	/*border-radius: 5px 5px 0px 0px;*/
	height: 35px;
	color:#fff;
	font-weight:900;
	background-color:#bbbbbb;
	}

.lined{
	display:block;
}
.menu li a.active {
    font-weight: 900;
	}
.offset{
	display:block;
	height:1px;
	width:100%;
}
.off{
}
.on{
	color:black;
}
.openbtn{
	cursor:pointer;
	float:right;
	margin:5px;
	font-weight:900;
}
.panneau{
	overflow:hidden;
	min-width:300px;
	margin-top:10px;
	margin-left:10px;
	margin-right:10px;
	padding-bottom:35px;
	background-color:white;
	box-shadow: 0px 0px 2px #bbbbbb;
	border:solid lightgrey 1px;
	border-radius:3px;
}

.panneau2{
	overflow:hidden;
	min-width:300px;
	margin-top:10px;
	margin-left:10px;
	margin-right:10px;
    background-color:white;
	color:black;
	box-shadow: 0px 0px 2px #bbbbbb;
	border:solid lightgrey 1px;
	border-radius:3px;
}

.panneauinclus{
	width:100%;
	border-right:2px solid #f0f0f0;
	border-bottom:none;
}
.paramAffichage{
	cursor:pointer;
	width:70px;
	text-align:center;
	margin:3px;
	border:#bFbFbF 2px solid;
}
.paramAffichage:hover{
	border:black 2px solid;
}
.paramAffichage2{
	cursor:pointer;
	width:70px;
	text-align:center;
	margin:3px;
	border:black 2px solid;
	color:black;
	background-color:#bFbFbF;
}

.petit{
	display:block;
	margin-right:20px;
	padding:10px;
	width:100%;
}
.scrollzone{
	display:block;
	padding-top:5px;
	overflow: scroll;
	width:100%;
	height: 100%;
}
 .voie{
	margin-top:15px;
	margin-bottom:5px;
	display:none;
	cursor:context-menu;
	background-color: white;
	color:black;
 }
.voieform{
	display:block;
	margin:auto;
	margin-bottom:20px;
	background-color:rgba(136, 170, 175, 0.6);
	padding:5px;
}
.voieform input{width:150px;}

/* ------------------------------------------------------------Design Menu sol---------------------------------------------------------------- */

.menu {
  background: #5bc995;
  height: 100vh;
  width: 240px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  outline: none;
}
.menu .avatar {
  background: rgba(0, 0, 0, 0.1);
  padding: 1em 1em;
  text-align: left;
}
.menu .avatar img {
 width: 100px;
  /* border-radius: 50%;
  overflow: hidden;
  border: 4px solid #ffea92;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2);*/
}
.menu .avatar h2 {
  font-weight: normal;
  margin-bottom: 0;
  color:#FFF;
  font-size: 18px;
}
.menu ul {
  list-style: none;
  padding: 0.5em 0;
  margin: 0;
}
.menu ul li {
    color: #fff;
	padding: 0.5em 1em 0.5em 3em;
  font-size: 0.95em;
  font-weight: regular;
  background-repeat: no-repeat;
  background-position: left 15px center;
  background-size: auto 20px;
  transition: all 0.15s linear;
  cursor: pointer;

}
.menu ul li.icon-home {
  background-image: url("Entypo/home.svg");
}
.menu ul li.icon-equip {
  background-image: url("Entypo/location-pin.svg");
}
.menu ul li.icon-cetequip {
  background-image: url("Entypo/location.svg");
}
.menu ul li.icon-param {
  background-image: url("Entypo/tools.svg");
}
.menu ul li.icon-paramvoi {
  background-image: url("Entypo/pencil.svg");
}
.menu ul li.icon-journal {
  background-image: url("Entypo/open-book.svg");
}
.menu ul li.icon-maj {
  background-image: url("Entypo/cycle.svg");
}
.menu ul li.icon-user {
  background-image: url("Entypo/users.svg");
}
.menu ul li.icon-logout {
    background-image: url("Entypo/tools.svg");
}

.menu ul li:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.menu ul li:focus {
  outline: none;
}

@media screen and (max-width: 768px) and (min-width: 400px) {
  body {
    padding-left: 90px;
  }
  .menu {
    width: 90px;
  }
  .menu .avatar {
    padding: 0.5em;
    position: relative;
  }
  .menu .avatar img {
    width: 60px;
  }
  .menu .avatar h2 {
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 100px;
    margin: 0;
    min-width: 200px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.4);
    transform: translate3d(-20px, -50%, 0);
    transition: all 0.15s ease-in-out;
  }
  .menu .avatar:hover h2 {
    opacity: 1;
    transform: translate3d(0px, -50%, 0);
  }
  .menu ul li {
    height: 60px;
    background-position: center center;
    background-size: 30px auto;
    position: relative;
  }
  .menu ul li span {
    opacity: 0;
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    padding: 0.2em 0.5em;
    border-radius: 4px;
    top: 50%;
    left: 80px;
    transform: translate3d(-15px, -50%, 0);
    transition: all 0.15s ease-in-out;
  }
  .menu ul li span:before {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    left: -5px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 5px solid rgba(0, 0, 0, 0.5);
    transform: translateY(-50%);
  }
  .menu ul li:hover span {
    opacity: 1;
    transform: translate3d(0px, -50%, 0);
  }
  .menu ul li a {
	display:none;	
}

}
@media screen and (max-width: 400px) {
  body {
    padding-left: 0;
  }
  .menu {
    width: 230px;
    box-shadow: 0 0 0 100em rgba(0, 0, 0, 0);
    transform: translate3d(-230px, 0, 0);
    transition: all 0.3s ease-in-out;
  }
  .menu .smartphone-menu-trigger {
    width: 40px;
    height: 40px;
    position: absolute;
    left: 100%;
    background: #5bc995;
  }
  .menu .smartphone-menu-trigger:before,
  .menu .smartphone-menu-trigger:after {
    content: '';
    width: 50%;
    height: 2px;
    background: #fff;
    border-radius: 10px;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
  }
  .menu .smartphone-menu-trigger:after {
    top: 55%;
    transform: translate3d(-50%, -50%, 0);
  }
  .menu ul li {
    padding: 1em 1em 1em 3em;
    font-size: 1.2em;
  }
  .menu:focus {
    transform: translate3d(0, 0, 0);
    box-shadow: 0 0 0 100em rgba(0, 0, 0, 0.6);
  }
  .menu:focus .smartphone-menu-trigger {
    pointer-events: none;
  }
}