html{box-sizing: border-box;}
body#manager{background-color: #eee;}
#manager .wrapper{
	width: 90%;
	max-width:1600px;
	margin: 20px auto 0;
	border: 1px solid #ccc;
	overflow: hidden;
	background-color: #393939;
	padding-left: 50px;
}

nav#main_nav{
	position: absolute; 
	top: 0px; 
	left: 0px; 
	width: 50px; 
	background-color: #393939; 
}

nav#main_nav ul.blocks{
	padding: 0; 
	margin: 40px 0 0; 
	list-style: none; 
	width: inherit;
}

nav#main_nav li{ position: relative; line-height: 35px; font-size: 24px; width: 100%; text-align: center; padding: 0 10px; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}
nav#main_nav li.clear{ border-top: 1px solid #696969; margin-top: 5px; padding-top: 5px;}
nav#main_nav li a:hover {color: #fff;}
nav#main_nav li span{display: none;}
nav#main_nav li.current{
	background-color: #c76433;
}
nav#main_nav li.current a{
	color: #fff;
}
nav#main_nav li.current a::after{
	right: 0px;
	border: solid 8px transparent;
    border-right-color: transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-right-color: #fff;
	top: 50%;
	margin-top: -8px;
}
nav#main_nav li i{
	display: inline-block;
	width: 30px;
}

@media only screen and (min-width: 1200px)  {
	#manager .wrapper{
		padding-left: 200px;
	}
	
	nav#main_nav{
		width: 200px;
	}
	
	nav#main_nav li{
		text-align: left;
	}
	
	nav#main_nav li span{
		position: relative;
		display: inline-block;
		font-size: 0.6em;
		line-height: 24px;
		top: -3px;
	}
}

#manager .btn{display: inline-block; background-color: #c76433; padding: 5px 10px; color: #fff; font-weight: 500; letter-spacing: 2px; border: 2px solid #c76433;}
#manager .btn:hover{background-color: #fff; padding: 5px 10px; color: #c76433;}
header{position: relative;}
header .userbar{ padding: 5px 15px; background-color: #c76433; color: #fff; border-bottom: 1px solid #ccc;}
header .userbar .logout{float: right; color: #fff;}
header .userbar .logout:hover span{text-decoration: underline;}
header a#website-link{position: absolute; top: 0px; right: 0px; color: #c76433; font-size: 12px; border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 5px; display: block;}
header a#website-link:hover{font-size: 13px; box-shadow: 1px 2px 5px #ccc;}
header .top-bar{display: block; background-color: #fff; padding-bottom: 5px;}
header .top-bar-center{margin: 0 auto; float: none; clear: both; text-align: center;}
header .top-bar-center{width: 220px;}

#manager footer{margin-top: 20px; background-color: #c76433; padding: 10px 20px;}
#manager footer a{font-weight: bold; color: #fff; border-bottom: 1px dotted #fff;}
#manager footer p{line-height: 40px;}
#manager footer i{font-size: 16px;}

h2{margin: 20px 0 35px;}
h3{clear: both; float: none; margin: 20px 0 5px;}
hr{clear: both;}
*[onclick]:hover {cursor:pointer;}
.error{color: #c00; border: 1px solid #c00; background-color: #ffefef; padding: 5px 10px;}
.metadata{color: #999; font-size: 11px; margin: 10px 0 0;}
#searchArea{border-top: 1px solid #eee; border-left: none; border-bottom: none; border-right: none; background-color: none;}
#searchArea.bordered{border: 1px solid #c76433;; background-color: #f8f3f1; padding: 10px;}
#searchArea input{background-color: #fff;}
#searchArea legend{background-color: #fff; padding: 2px 15px; border: 1px solid #eee;}
#searchContent{display: none;}
.notice{font-size: 12px; font-family: 'FontSwiss', 'Open Sans', sans-serif; display: block; position: absolute; top: -10px; right: -15px; border: 1px solid #c00; border-radius: 50%; width: 20px; height: 20px; line-height: 20px; background-color: #e00; color: #fff; text-align: center;}
.center{text-align: center;}
/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

.tooltip:hover{
	cursor: help;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 130px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px;
  border-radius: 6px;
  right: 0;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}
#login{
	width: 350px;
	margin: 50px auto;
	border: 1px solid #ccc;
	box-shadow: 0 0 5px #393939;
	padding: 10px 15px;
	overflow: hidden;
}

#login h2{
	margin: 5px 0;
	text-align: center;
}

.ctable .sous_categorie{
	color: #999;
}

.ctable .metadata{
	background-color: #eee;
}

.ctable td{
	position: relative;
}

.ctable td.txtsmall{
	font-size: 11px;
}
.ctable td.usermanual{
	font-size: 20px;
}

.ctable .odd td{
	background-color: #ffffef;
}

tr.line:hover td{
	background-color: #f8f3f1;
}

.ctable .reseaux{
	position: absolute;
	bottom: 5px;
	left: 5px;
	color: #999;
	font-size: 1em;
}

.ctable .reseaux a{
	color: #CBA;
}

.ctable .reseaux a:hover{
	color: #963;
	font-size: 1.2em;
}

.ctable .operations{
	position: absolute;
	bottom: 5px;
	right: 5px;
	color: #999;
	font-size: 0.9em;
}

.ctable .operations a{
	
	color: #999;
}

.ctable .operations a:hover{
	color: #963;
}

.ctable .thumbnail{
	width: 50px;
}

.ctable .thumbnail img{
	max-width: none;
}

.ctable .statut{
	text-align: center;
}

.ctable .statut span{
	position: relative;
	text-indent: -99999px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	display: block;
	margin: 0 auto;
}

.ctable .statut span.sync{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 20px;
	height: 10px;
	background-color: #c76433 !important;
	border-top-right-radius: 0;
	border-top-left-radius: 0;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	animation: blinker 2s linear infinite;
}

span.ArticleCamanMissing{
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: #c76433;
	animation: blinker 2s linear infinite;
	margin-right: 5px;
}

span.ArticleCamanMissing:hover{
	cursor: context-menu;
}

@keyframes blinker {
	0%{	opacity: 1;	}
	40%{ opacity: 1; }
	50% { opacity: 0; }
	60% { opacity: 1; }
	100% { opacity: 1; }
}

.ctable .statut span.sync:hover{
	cursor: context-menu;
}

.ctable .statut.Actif span{
	background-color: #3c3;
}
.ctable .statut.Inactif span{
	background-color: #d80;
}
.ctable .statut.Abandonne span{
	background-color: #c33;
}
.ctable th i{
	font-size: 1.2em;
}
.ctable th.libelle{
	min-width: 200px;
}
.ctable .valign-top{
	vertical-align: top;
}

/* ********** ORDERS ********** */ 
.ctable .amount{
	min-width: 150px;
	text-align: right;
}
/* ********** END ORDERS ********** */ 

.row{
	clear: both;
	float: left;
	margin: 8px 0;
	width: 100%;
}

.row.important{
	background-color: #fcc;
	padding: 5px;
	border: 1px dashed #f99;
}

.row select,
.row input[type="text"],
.row input[type="tel"],
.row input[type="url"],
.row input[type="email"],
.row input[type="password"],
.row input[type="number"],
.row input[type="date"],
.row textarea{
	width: 100%;
	background-color: #fff;
}
.row input[readonly="readonly"], .row textarea[readonly="readonly"]{
	background-color: #eee;
}
.row input[type="submit"]{
	float: none;
	display: block;
	margin: 0 auto;
}

.livrLink{
	font-size: 22px;
}

.livrLink:hover i{
	color: #c76433;
}

#cmdArtEditLine, 
#bundleArtEditLine,
#manuelArtEditLine,
#manuelEditLine{
	background-color: #fff;
	padding: 5px;
	margin: 10px 0;
}

#manuelArtEditLine input,
#manuelEditLine input{
	max-width: 100px;
}

.editLine textarea{
	width: 100%;
	min-height: 100px;
}

#cmd_lines input{
	background-color: #fff;
}

#cmd_lines.edition tr:hover{
	cursor: pointer;
	background-color: #fff;
}

#cmd_lines tr.deleted td{
	background-color: #ccc;
	text-decoration: line-through;
}

section{ padding: 10px 15px; overflow: hidden; background-color: #fff; min-height: 450px;}
section ul.blocks{list-style: none; padding: 0 10px 0 0; margin: 10px 0; overflow: hidden;}
section ul.blocks li{list-style: none; display: inline-block; float: left; width: 229px; border: 1px solid #ccc;  padding: 20px; text-align: center; margin: 10px 0 10px 10px; box-sizing: border-box;}
section ul.blocks li.clear{clear: all; float: left;}
section ul.blocks li a{display: inline-block; width: 100%;}
section ul.blocks li i{font-size: 50px;}
section ul.blocks li i{position: relative;}
section .newrecord, section .recordDetails{position: relative; width: 100%; max-width: 600px; margin: 0 auto; border: 1px solid #c76433; overflow: hidden; padding: 10px 15px;background-color: #f8f3f1;}
section .col2{max-width: none;}
section .col2 .column{width: 50%; box-sizing: border-box; float: left; min-width: 400px; padding: 0 15px; margin: 20px 0 0;}
section .col2 .columnA{background-color: #ffffee; clear: both; float: left;}
section .col2 .columnB{background-color: #eeeeff;}
section .col2 .columnC{background-color: #eeffff;}
section .col2 .columnD{background-color: #eeffee;}
section .col2 .clearColumn{clear: both; float: left;}
section .col2 .fullSizeColumn{width: 100%; clear: both; float: left; margin: 20px 0 5px; padding: 10px 20px;}
section .recordDetails h3, section .recordDetails h4{ clear: none; float: none; margin: 10px 0 5px;}
section .recordDetails h3:hover{cursor: pointer;}
section .recordDetails h3 .title, 
section .recordDetails h4 .title{
	display: block;
}
section .recordDetails h3 a{font-size: 12px;}
section .recordDetails h3 .editRecord,
section .recordDetails h4 .editRecord{
	display: none;
}
section .recordDetails h3:hover .title, 
section .recordDetails h4:hover .title{
	display: none;
}
section .recordDetails h3:hover .editRecord, 
section .recordDetails h4:hover .editRecord{
	display: block;
}
section .recordDetails span.cmd_prix_qt{ display: inline-block; width: 100%;}
section .recordDetails span.cmd_qt{ display: inline-block; width: 30%; box-sizing: border-box; padding: 5px 10px; text-align: right;}
section .recordDetails span.cmd_prix{ display: inline-block; width: 70%; box-sizing: border-box; padding: 5px 10px;}
section .newrecord h2{clear: none; float: none;}

input.error{font-weight: bold; color: red; text-decoration: underline;}
input.verified{font-weight: normal; color: green; text-decoration: none;}
input.short{width:50px;}
input.diff{background-color: #ffca97 !important;}
.article_match_libelle{font-style: italic;}

span.icon{
	position: relative;
	float: right;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	border: 1px solid #ccc;
	text-align: center;
	background-color: #fff;
	line-height: 100px;
	font-size: 24px;
	color: #696969;
	overflow: hidden;
}
span.icon.cover{
	width: 100%;
	height: auto;
	min-height: 250px;
	float: none;
	display: block;
	border-radius: 0;
}
span.icon i{
	line-height: 100px;
	color: #ccc;
	font-size: 70px;
}
span.icon.cover i{
	font-size: 100px;
}
span.icon#imgaction-area i{
	position: absolute;
	display: none;
	top: 0;
	left: 0;
	width: 100%;
	text-align: center;
	background-color: rgba(255,245,245,.8);
	color: #cc0000;
	font-size: 35px;
}
span.icon#imgaction-area:hover{
	border: 1px solid #c00;
}
span.icon#imgaction-area:hover i{
	display: block;
	cursor: pointer;
}
span.icon img{
	line-height: 100px;
}
table.infos{
	clear: right;
	float: left;
	border: none;
	margin: 20px 0;
}
table.infos td{
	border: none;
}
table.infos.stocks{
	border-collapse: collapse;
}
table.infos.stocks th{ font-size: 1.2em;}
table.infos.stocks th, table.infos.stocks td{
	border: 1px solid #ddd;
	text-align: center;
}
table.infos.recette{
	width: 100%;
}
table.infos.recette td{
	width: 33.3333333%;
	text-align: center;
}
table.infos.recette div{
	display: inline-block;
	width: 20%;
	margin-right: 15px;
}
table.infos.recette i{
	font-size: 30px;
	max-width: 100%;
}
table.infos.recette span{
	display: inline-block;
	line-height: 18px;
	font-size: 14px;
}
ul.ingredients{
	margin: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
}
ul.procedure{
	margin: 0 0 0 10px;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	counter-reset: item;
}
ul.ingredients li{
	flex: 0 1 50%;
	margin: 0 0 10px;
	padding-right: 10px;
	box-sizing: border-box;
}
ul.procedure li:before{
	text-indent: -15px;
	font-weight: bold;
	content: counter(item);
	float: left;
}
ul.procedure li{
	flex: 0 1 100%;
	margin: 0 0 10px;
	padding-left: 10px;
	box-sizing: border-box;
	counter-increment: item;
}

div.manuel_article,
div.manuel_line{
	background-color: #fff;
	border-radius: 3px;
	box-shadow: 0 0 3px #ccc;
	width: 100%;
	display: flex;
	padding: 10px;
	justify-content: stretch;
}

@media only screen and (max-width: 1015px) {
	ul.ingredients li{
		flex: 0 1 100%;
	}
}

div.manuel_article div,
div.manuel_line div{
	display: inline-flex;
	flex: 1 1 0%;
	align-items: center;
	box-sizing: border-box;
	
}

div.manuel_article div:first-child{
	max-width: 60px;
	text-align: center;
}
div.manuel_line div:first-child,
div.manuel_line div:last-child{
	max-width: 120px;
}
div.manuel_article div i,
div.manuel_line div i{
	font-size: 20px;
	line-height: 50px;
}
div.manuel_article div h5,
div.manuel_line div span.descr{	
	display: flex;
	align-items: center;
	justify-content: space-between;
	text-align: left;
	line-height: 1.3;
	margin: 0;
	font-size: 14px;
}
div.manuel_line div span.descr{	
	flex-flow: row wrap;
}
div.manuel_line div span.descr span.buttons{
	flex: none;
}
div.manuel_line div.options{
	text-align: center;
	flex-flow: row wrap;
	border-left: 1px solid #ccc;
}

div.manuel_line div.options span.type,
div.manuel_line div.options span.duree{
	flex: 1 100%;
}	
div.manuel_article div span{
	text-align: right;
	flex: 0 0 auto;
}

table.suivi td{
	background-color: #faf8f7; border-top: 1px solid #eee; border-bottom: #eee;
}
table.suivi tr:hover td{
	background-color: #fff;
	cursor: pointer;
}
table.infos td.key{width: 30%; text-align: right; color: #999; font-size: 12px; line-height: 14px;}
table.infos td.value{width: 70%; text-align: left; color: #434343; font-size: 14px; line-height: 18px; overflow: hidden;}
table.infos tr.hr td{border-bottom: 1px solid #ccc; padding: 0;}
table.infos td.none{text-align: center;}
table.infos td.key span.method{display:block; float: left; color: #393939; font-size: 20px;}
table.infos .socialnetworks a{font-size: 22px; margin-right: 5px;}
div.update{float: left; border: 1px solid #ccc; background-color: #fff; width: 100%; padding: 10px 15px;}
table.suivi td.value .edit{display:none;}
table.suivi td.value .edit span{display: block; overflow: hidden; font-size: 0.9em; margin: 5px 0;}
/*#newCat{display: none;}*/
span.tag{
	display: inline-block;
	border: 1px solid #ccc;
	background-color: #eee;
	border-radius: 5px;
	padding: 2px 5px;
	margin: 5px 2px 0 0;
	font-size: 0.8em;
	white-space: nowrap;
}

.compatibility-table{
	border: none;
}

.compatibility-table tr.not-compatible td{
	background-color: #fdd;
}

.compatibility-table tr.compatible td{
	background-color: #dfd;
}

.infos .compatibility-table td{
	background-color: #fef9f7;
}

.infos .compatibility-table tr:hover td{
	background-color: #fff;
}

.compatibility-table th,
.compatibility-table td{
	border: 1px solid #ccc;
}

.infos .compatibility-table td{
	border-bottom: 1px solid #f8f3f1;
}

/* FORM IMAGE UPLOAD */
#drop-area
{
 	background-color:white;
 	border:3px dashed grey;
}
/* END FORM IMAGE UPLOAD */



/* ********** DASHBOARD ********** */ 
#dashboard .tuile{
	display: inline-block;
	float: left;
	border: 1px solid #c76433;
	padding: 5px;
	background-color: #ffe6da;
	width: 410px;
	height: 320px;
	overflow: hidden;
	margin-right: 15px;
	margin-bottom: 15px;
}

#dashboard .tuile h3{
	font-size: 14px;
	margin: 5px 5px 10px;
}

#dashboard .tuile_content{
	background-color: #fff;
	width: 100%;
	height: 275px;
	overflow: scroll;
}

#dashboard .tuile_content th{
	position: sticky;
	top: 0;
	background-color: #eee;
	z-index: 10;
}

#dashboard .tuile span.date{
	font-size: 0.9em;
	color: #696969;
}

table.linktree tr a{
	color: #696969;
}

table.linktree tr.Actif td{
	background-color: #efe;
}

table.linktree tr.Inactif td{
	background-color: #fee;
	font-style: italic;
}

table.repair{
	width: 100%;
	border: 1px solid #ccc;
}
.repair .date{
	width: 150px;
}
.repair .details{

}