@import url(https://fonts.googleapis.com/css?family=Lato:700,400,300);


h1,h2,h3{
 font-family: "Lato",Helvetica,Arial,sans-serif;
}
h2,h3{
	font-weight: 700;
	color:rgb(52, 74, 94);
}

h1{
	line-height: 1.4;
    font-weight: 400;
	padding-left: 1em;
    /*text-transform: lowercase;*/
    font-size: 1.6em; 
      color: rgb(52, 74, 94);
}
h1:after{
    content: " ";
    border-bottom: 1px solid #d9d9d9;
    height: 0;
    bottom: .5em;
    z-index: -1;
    display: block;
 }
a{
	text-decoration: none;
	color:#000;
}

body { 
	display: flex;
    flex-direction: column; 
	flex-wrap: wrap; 
margin:0;
	max-width: 100%;
	background-size: cover;
	/*font: 400 85% Helvetica, Arial, Tahoma, Sans-Serif;*/
	font: 400 90%'Open Sans', sans-serif;
	
}
.container{
	display: flex;
    flex-direction:row-reverse; 
	flex-wrap: wrap;
}
#left {
	margin: 0;
   padding: 5px;
    background: #fff;
  -webkit-flex: 3 1 70%;
           flex: 3 1 70%;
   -webkit-order: 1;
           order: 1;
           width:70%;
}

#right {
	padding:1em;
	width: 20%;
	overflow-y: hidden;
	overflow-x: hidden;

	/*background-color: rgba(255,255,255,0.8);*/
	background: url(../img/bg-admin.png) #fafbfb 50% 0;
	 border-left: 2px solid #e9ebeb;
	 border-bottom: 2px solid  #e9ebeb;

}
nav {
  order: -1; /* nav s'affiche en premier */
}

#nav{
	background: url(../img/bg-admin.png) #fafbfb 50% 0;
    border-bottom: 2px solid  #e9ebeb;
	margin:0px;
	font-weight: bold;
	height: 80px;
	display: flex;
	flex-flow:row wrap;
	justify-content: space-between;  
	
}
#nav ul{
	display:flex;
		flex-flow: row wrap;
		 align-items: stretch;
		  list-style-type: none;
}
#nav a{
		color:rgb(52, 74, 94);

	text-decoration: none;
	font-size: 0.9em;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 400;
		padding: 0.5em;
}

#logo{
	margin-right: 1em;
	margin-top:0.3em;	
	height: 70px;
	display: block;
}

/* 
	Affichage par bulle 
*/ 
ul.list-bulle, ul.list-bulle-compta{
		display:flex;
		flex-flow: row wrap;
		 align-items: stretch;
		  list-style-type: none;
		    overflow-y: hidden;
		    overflow-x: hidden;
}
	
	li.bulle{
	  background-color: #fafbfb ; 
	  margin:1em;
	  padding:0em;
	   overflow-y: hidden;
	  border: 1px solid #e9ebeb;
    background: #f5f8f8;
    color: #333333;
    font-size: .9em;
    border-radius: 4px;
    overflow: hidden;
	/*width: 20%;*/
	}

	
	
	.bulle h3, .bulle .options{
		color:#979998;
	    font-weight: bold;
	    font-size: small;
	     line-height: 1;
	    background: #ffffff;
	    display:inline-block;
	    color: #989a99;
	  	}
	.bulle h3{
		margin-top: 0;
		margin-bottom:3px;
		text-align: left;
			padding: 5px 6px 4px 6px;
		  border-right: 1px solid #ededed;
	    border-bottom: 1px solid #ededed;
	    border-radius: 0 0 4px 0;

	}
	

	
	.bulle .options{
		margin-top: 3px;
		margin-bottom:0;
		text-align: left;
		padding: 5px 6px 4px 6px;
		  border-right: 1px solid #ededed;
	    border-top: 1px solid #ededed;
	    border-radius: 0 4px 0 0;
		 padding-left:10px;
		 font-size: 100%;	
	}
	.options-bar{
		display: flex;
		justify-content: space-between;
	}
	
	.bulle .icon-option{
		border-left: 1px solid #ededed;
	    border-top: 1px solid #ededed;
	    font-size: 1.2em;
	    margin-left:0.3em;
	    padding-left:0px;
	    border-radius: 4px 0px 0px 0px;

	}
	
	.icon-option .green-icon{
		color:#009756;
	}
	.icon-option .red-icon{
		color:#b30000;
	}
	
	.red-icon span, .green-icon span{
		font-size: 0.9em;
	}
	
	.bulle .options li{
		list-style: none;
		padding-left: 0.3em;
		display:inline-flex;

	}
	
	.progress-bar{
		width:90%;
		margin-left:5%;
		margin-right: 5%;
	}
	
	.bar-cmd{
		    border: 0;
	    height: 12px;
	    border-radius: 5px;
    
    	}
    	
    	progress {
		    /* Reset the default appearance */
		    -webkit-appearance: none;
		    -moz-appearance: none;
		    appearance: none;
		}
		
		/* Determinate */
		progress[value] {
		    /* Reset the default appearance */
		    -webkit-appearance: none;
		    -moz-appearance: none;
		    appearance: none;
		}
		
		/* Indeterminate */
		progress:not([value]) {
		    /* Reset the default appearance */
		    -webkit-appearance: none;
		    -moz-appearance: none;
		    appearance: none;
		}
    	
    	progress {
		     border: 0;
			  height: 12px;
			  border-radius: 2px;
			  margin:0.3em;
		}
		progress::-webkit-progress-bar {
		    border: 1px solid #ccc;
			    height: 12px;
			    border-radius: 2px;
			    margin:0.3em;
			    background-color:#fafbfb;
			   
		}
		progress::-webkit-progress-value {
		    background-color:#ccc;
		    border-radius: 2px;
		}
		progress::-moz-progress-bar {
		    /* style rules */
		}
    	
	
	
ul.detail{
	display: flex;
	 align-items: stretch;
	 padding-left:0px;
	 margin-left: 0;
	 width: 23em;
}
ul.detail_fournee{
	display: flex;
	align-items: stretch;
	width: 23em;
	list-style-type: none;
	padding-left: 1px;
}
ul.legende{
	display: flex;
	 align-items: stretch;
	 padding-left:0px;
	 margin-left: 0;
	 width: 18em;
}
ul.legende_cmd li{
	list-style: none;
	padding-left: 1em;
	padding-right: 1em;	
}
ul.detail_cmd li{
	list-style: none;
	padding-left: 1em;
	padding-right: 1em;	
}
.legende li{
	width: 25%;
	list-style: none;
	margin-left: 1em;
	padding-top:2em;
	text-align: center;

}
div.legende_cmd, ul.legende_cmd{
	list-style: none;
	margin-left: 0em;
	padding-left: 1em;
	padding-right: 1em;	
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	max-width:200px;
}
.detail li{
	width: 25%;
	list-style: none;
	margin-left: 1em;
	padding-top:2em;
	text-align: center;

}

div.detail_cmd, ul.detail_cmd{
	list-style: none;
	margin-left: 0em;
	padding-left: 1em;
	padding-right: 1em;	
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	max-width:200px;
}
.detail_cmd div{
}
.legende_cmd div{
}

li.fournee-fab{
	border:2px dashed #000;
	background-color:#c1c1c1;
}

/* Pager */
.pager{
	width:100%;
}


.btn{
	 
        display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

.btn-default{
	padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
    color: #333;
    background-color: #fff;
    border-color: #ccc;
	margin: 2px;
}
.active{
	background-color:rgb(52, 74, 94);
	color:#fff;
}

#nav .liactive a{
	border:1px solid  #ccc;
	border-radius: 3px;
}



/*Ligne Comptable */
ul.list-bulle-compta{
	flex-wrap: wrap;
}
ul.list-bulle-compta li{
	width: 80%;
	display: flex;
	border:1px solid #aeaeae;
	border-radius: 3px;	
	padding:0.3em;
	margin:0.3em;
	justify-content:space-between;
}
ul.list-bulle-compta li .info{
	width: 80%;
	display: flex;
}
ul.list-bulle-compta li .info div{
	margin-left:0.5em;
	padding-right: 0.5em;
	border-right: 1px dashed #bcbaba;
}
ul.list-bulle-compta li .opt{
	align-self: flex-end;
	justify-content: flex-end;
	text-align: right;
	width: 20%;
}

ul.list-bulle-compta .montant, ul.list-bulle-compta .moyen{
	font-weight: bold;
}

ul.list-bulle-compta li .id, ul.list-bulle-compta li .type-paiement a{
	color:#b1b1b1;
}

.detail .icon-noir{
	background: url(../img/icon-prevu.png) center top no-repeat;
}
.detail .icon-vert{
		background: url(../img/icon-dispo.png)  center top  no-repeat;
}
.detail .icon-violet{
	background: url(../img/icon-fabrique.png) center top  no-repeat;
}
.detail .icon-velo{
	background: url(../img/icon-livre.png) center top  no-repeat;
}
.detail .icon-baguette{
	background: url(../img/icon-baguette.png) center top no-repeat;
}
.detail .icon-baguette-bleu{
	background: url(../img/icon-baguette-bleu.png) center top no-repeat;
}
.detail .icon-baguette-verte{
	background: url(../img/icon-baguette-verte.png) center top no-repeat;
}
.legende .icon-noir{
	background: url(../img/icon-prevu.png) center top no-repeat;
}
.legende .icon-vert{
		background: url(../img/icon-dispo.png)  center top  no-repeat;
}
.legende .icon-violet{
	background: url(../img/icon-fabrique.png) center top  no-repeat;
}
.legende .icon-velo{
	background: url(../img/icon-livre.png) center top  no-repeat;
}
.legende .icon-baguette{
	background: url(../img/icon-baguette.png) center top no-repeat;
}
.legende .icon-baguette-bleu{
	background: url(../img/icon-baguette-bleu.png) center top no-repeat;
}
.legende .icon-baguette-verte{
	background: url(../img/icon-baguette-verte.png) center top no-repeat;
}
.extra { 
    display: none;
}

li:hover .extra {
    display: inline-block;
}

#form-add-fournee input, #login-box input, .container-popup input, .container-popup select, select, #search-form input {
	border: 1px solid #cccccc;
	border-radius: 2px;
    padding: .6em 1em;
    font-weight: 200;
    width: 100%;
    -webkit-appearance: none;
    box-shadow: none;
    box-sizing: border-box;
}

.heure-container{
	display: flex;
	flex-wrap: nowrap;
}

#form-add-fournee .heure-container .heure input{
	width:90%;
}
#form-add-fournee .heure-container{
	width:100%;
}

#form-edit{
	width:90%;
}

#form-edit label{
	color:#918f8f;
	font-size:0.8em;	
}

#form-add-fournee .error1, .container-popup .error1{
	border:1px solid #b30000;
}

#login-box fieldset{
	border:0px;
}

.bulle-icone{
	  border: 1px solid #ededed;
    border-radius: 4px 4px 4px 4px;
	 padding:2px;
	 background-color: #fff;
}





.menu-right-ul li{
	list-style: none;
	margin-top:0.5em;
}
#chart{
	width:90%;
		margin:1em;
	margin-left: 3em;
}

#myChart{

	width:100%;
}

#right select{
	width:60%;
}

#right select.picker__select--month{
	width: 35%;
	font-size: 0.6em;
	padding:0.1em;
		padding-left:1.3em;
}
#right select.picker__select--year{
	width: 22.5%;
	font-size: 0.6em;
	padding:0.1em;
	padding-left:1.3em;
}

.stats-option{
	margin-left: 2em;
}

.error-login, .info-login{
	text-align: center;
	padding:1em;
	margin:3em;
	font-size: 1em;
	border:1px solid #c0bebe;
}

.error-login{
	background-color: #f8cbcb;
	border:1px solid #c10505;
}

.supprimer{
	color:#a20000;
	font-size: 1.1em;
	cursor: hand;
}
.disabled-icon{
	color:#c7c7c7;
}


/* ***** Popup *****/
.container-popup{
 	display: flex;
 	flex-wrap: nowrap;	
padding-top:1em;
justify-content: center;
align-content: center;
}
.icone-popup{
	font-size: 5em;
	width:28%;	
}
.content-text-popup{
	width: 72%;
}

.email-list{
	display:flex;
	width:inherit;
	flex-wrap: wrap;
	
}
.email-list span{
	border:1px solid #bababa;
	border-radius: 4px;
	padding:0.2em;
	margin:0.2em;
}

/* Compte client */

.id .fa-minus-square{
	color:#ff6c6c;
}
.id .fa-plus-square{
	color:#038b1c;
}
.compte .solde{
	color:#fff;
	padding:0.4em;
	border-radius:4px;
	background-color: #344a5e;
	text-align: center;
}

.adresse{
	color:#344a5e;
	padding:0.4em;
	border-radius:4px;
	border:1px dotted #344a5e;
	text-align: left;
}


.reglages-container, .commande-container{
	padding:1em;
}


.reglages-container h2, .commande-container h2{
	margin-left: 2em;
	font-size: 1em;
	border-bottom: 1px dotted #344a5e;
}

.reglage-liste{
	display: flex;
	padding-left:3em;
	width:80%;
}
.reglage-liste-depot{
	display: flex;
	padding-left:3em;
	width:80%;
	flex-wrap: wrap;
}

.reglage-flex{
	display:flex;
	flex-wrap: wrap;
}

.depot{
	width:100%;
	padding-top:10px;
}

.iddepot{
	color:#40a4da;
	padding:1px;
	border-radius: 4px;
}
.bloc-reglage{
	width:50%;
}


.commande-container{
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	
}

.commande-container .info{
	width:200px;
	background-color:#fafbfb;
	  border: 1px solid #e9ebeb;
	border-radius: 4px;
	margin:1em;
	padding:0.5em;
	text-align: center;
}

.commande-container .info h3{
	color:rgb(52, 74, 94);
	margin-top:0;
	margin-bottom: 0;
	text-align: center;
	text-transform: lowercase;
}

.commande-container span{
	font-size: 1em;
	color:#5e5e5e;
	text-align: center;
}


@media screen and (min-width : 320px) and (max-width : 900px) {
  #right{
		width:100%;	 
		display: block; 
		order: 3;
  }
  #logo{
	  width:50%;
	  order:1;
	  margin:auto;
  }
  
  #nav{
	  height:auto;
  }
  
  #nav ul{
	  order:2;	
	  width:100%;
  }
  
  #nav .fa{
	  font-size: 2.5em;
  }
  
  #nav .text{
	  display:none;
  }
  li.bulle{
	width:100%;
	background: #f5f8f8;
    color: #333333;
    margin: 0;
    font-size: .9em;
    border-radius: 0px;
    margin-left:0;
    align-content: center;
    margin-bottom: 1em;
    border: 3px solid #afafaf;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
	}
	
	
	progress {
		    display:none;
		}
		
		/* Determinate */
		progress[value] {
		    display:none;
		}
		
		/* Indeterminate */
		progress:not([value]) {
		     display:none;
		}
    	
    	progress {
	    	 display:none;
		}
		progress::-webkit-progress-bar {
			 display:none;
			   
		}
		progress::-webkit-progress-value {
		     display:none;		}
		progress::-moz-progress-bar {
		   display:none;  /* style rules */
		}

	
	
	ul.list-bulle-compta{
		width:95%;
		padding: 0;
	}
	
	ul.list-bulle-compta li{
		flex-wrap: wrap;
		width: 100%;
	}
	
	ul.list-bulle-compta li .info{
		width:100%;
		flex-wrap: wrap;
	}
	
	ul.list-bulle-compta div.client, ul.list-bulle-compta div.date{
		padding-bottom: 0.3em;
		text-align: center;
	}
	ul.list-bulle-compta div.client{
		width:56%;
		padding-right: 0;
	}
	ul.list-bulle-compta div.date{
		width:30%;
		text-align: center;
	}
	
	ul.list-bulle-compta div.type-paiement{
		width:30%;
		text-align: center;
	}
	
	ul.list-bulle-compta div.montant{
		width:15%;
		background:rgb(52, 74, 94);
		padding:0.2em;
		text-align: center;
		color:#fff;
		border-radius: 5px;
	}
	
	ul.list-bulle-compta div.moyen{
		width:15%;
		color:rgb(52, 74, 94);
		padding:0;
		font-size: 1.6em;
		text-align: center;
	}
	
	.bulle-compta .opt{
		font-size: 1.3em;
	}
	
	
	
	
	
	
	ul.list-bulle-compta div.date{
		font-size: 0.9em;
	}
	
	ul.list-bulle-compta div.id{
		display: none;
	}
	
	
	
	.bulle h3, .bulle .options{
	    font-size:1.3em;
	     line-height: 1;
	    background: #ffffff;
	    color: #989a99;	
	  	}
	  	
	.bulle h3{
		margin-top: 0;
		margin-bottom:3px;
		font-size: 1.3em;
		text-align: center;
		padding: 5px 6px 4px 6px;
		width: 100%;
		
	}
	.detail li{
		font-weight: Bold;
	}
	.legende li{
		font-weight: Bold;
	}
	.options{
		width:90%;
		margin-left:5%;
		margin-right: 5%;

	}
	div.detail_cmd{
		list-style: none;
		margin-left: 0em;
		padding-left: 1em;
		padding-right: 1em;	
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: space-between;
		font-size: 1.1em;
		width: 100%;
	}
	div.legende_cmd{
		list-style: none;
		margin-left: 0em;
		padding-left: 1em;
		padding-right: 1em;	
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: space-between;
		font-size: 1.1em;
		width: 100%;
	}
	.detail_cmd{
		color:#000;
	}
	.legende_cmd{
		color:#000;
	}
	.options-bar{
		width:40%;
		
	}
	.options.icon-option{
		font-size: 1.8em;
		margin:0;
		justify-content: space-between;
	}
	
	.options a{
		 font-size: 0.9em;
	}
	
	.options-container{
		display:flex;
		flex-wrap: nowrap;
		flex-direction: row;
		width: 100%;
	}
	.options-container .fa{
		font-size:1.3em;
	}
	
	.disabled-icon{
		display:none;
	}
	
	.icone-popup{
		display:none;
	}
	
	
	
 .list-bulle{
	 padding:0;
 }
 h1{
	 padding-left:0.3em;
 }
 


  
 }