/*
*	Base de l'application
*/
html { 
	height: 100%; 

	font-size:14px; 
}
body {
	height:100%;
	margin: 0;
	padding: 0;

	font-family:Verdana, Geneva, sans-serif;
	
	color: #000;
	background-color: #FCFAE1;
}

h1,h2,h3,h4,h5,h6{ 
	text-align: center;

	color: #4C1B1B;
}

input {
	padding:5px;

	font-size:16px;

	border-width:1px;
	border-style:solid;
	
	background-color:#F6E497;
	border-color:#000;
	color:#B9121B;
}

input:disabled,
input[readonly],
select:disabled {
	background-color: #ccc;
}

select {
	padding:5px;
	
	font-size: 14px;

	border-top: 2px solid #8E8C79;
	border-left: 2px solid #8E8C79;
	border-right: none;
	border-bottom: none;

	background-color:#F6E497;
	color:#B9121B;
}
textarea {
	font-family:Verdana, Geneva, sans-serif;
	font-size: 14px;

	background-color:#F6E497;
	color:#B9121B;
}
ul li{
	list-style-type: none;
}

label{
	width: 300px;
	display: inline-block;
}
/* 
*	Layout de l'application
*/
/*
*	Header : 
*	contient le menu + la sélection du magasin
*/
#header{
	min-width: 960px;
	margin: 0 10px;
}
/* 
*	Main: 
*	Contient l'ensemble des fonctionnalités 
*/
#main{
	min-width: 960px;
	margin: 0 10px;
	padding-bottom: 100px;
	min-height: 100%;
}
/* 
*	Barre de connexion	
*/
/*
*	FenLogo : 
*	Contient le logo de l'application;
*/
.FenLogo {
	width:210px;
	height:40px;
	display:inline-block;
	float:left;
}
/*
*	FenBipper : 
*	contient le formulaire de connexion;
*/
.FenBipper {
	display:inline-block;
	height:50px;
	width:300px;

	color:#000;
	background:#FCFAE1;
}
/*
*	FenMenu :
*	Menu à droite d'accès aux fonctionnalités;
*/
.FenMenu {
	float:right;
	vertical-align: middle;
	padding-top: 5px;

	text-align:right;
	font-size: 17px;

	color:#000;
}
/*
*	FenMenu img :
*	Permet de centrer verticalement les icônes au texte;
*/
.FenMenu img{
	vertical-align: middle;
	padding-right: 5px;
}
/*
*	FenMenu span :
*	Cache le texte;
*/
.FenMenu span{
	overflow: hidden;
	display: inline-block;
	max-width: 0px;
	
	white-space:nowrap;

    -webkit-transition:all 1.5s;
    -moz-transition:all 1.5s;
    transition:all 1.5s;
}
/*
*	FenMenu a :
*	Style du lien vers la fonctionnalité;
*/
.FenMenu a{
	display: inline-block;

	color: #B9121B;
}
/*
*	FenMenu a:hover :
*	Modification de la couleur du texte au passage de la souris;
*/
.FenMenu a:hover{
	color: #4C1B1B;
}
/*
*	FenMenu a:hover > span :
*	Affiche le texte lors du passage de la souris sur le lien;
*/
.FenMenu a:hover > span{
	width: auto;
	max-width: 200px;
}

/* 
*	Barre de séparation contenant:
*	La date et l'heure
*	Le lieu de connexion
*	La sélection de lieu
*/
.FenBarre {
	width:100%;
	height: 35px;
	
	font-size: 17px;
	line-height: 35px;

	border-width:0px;

	background-color:#B9221B;
	color:#FCFAE1;
}


/* 
*	Bandeau d'information 
*	avec leur différents états
*/
.bandeau{
	text-align:center;
	font-size:24px;

	border-style: solid;

	background-color: #F6E497;
	color: #880F15;
	border-color: #000;
}
.bandeau.info{
	background-color:#4C1B1B;
	color:#F6E497;
	border-color: #4C1B1B;
}
.bandeau.discret{
	font-size: 16px;

	border-color: #D4C277;
	background-color: #D4C277;
}
/*
* 	Box : permet d'afficher un message
*	à l'utilisateur via un niveau 
*	d'importance de l'information
*/
.box {
	min-width: 20%;
	padding: 20px;
	margin:5px;
	z-index: 1002;
	vertical-align: middle;
	display: inline-block;
	
	text-align: center;
	font-weight: bold;
	
	border-style: none;
	border-width:1px;
	border-radius: 3px;

	color:#4C1B1B;
}
/*
*	Box info:
*	Style de box pour indiquer des informations;
*/
.box.info{
	border-style:solid;

	background-color:#F6E497;
	color:#4C1B1B;
	border-color:#4C1B1B;
}
/*
*	Box warning:
*	Style de box pour indiquer un avertissement important;
*/
.box.warning{
	padding-top: 60px;
	
	border-style:solid;

	color: #F6E497;
	background-color: #4C1B1B ;

	background-image:url(../images/warning.png);
	background-repeat: no-repeat;
	background-position: 50% 15%;
}
/*
*	Box danger:
*	Style de box pour indiquer un danger bloquant l'application;
*/
.box.danger{
	padding-top: 50px;

	border-style:solid;

	color: #F6E497;
	background-color: #B9121B ;

	background-image:url(../images/danger.png);
	background-repeat: no-repeat;
	background-position: top;
}
/*
*	Box success:
*	Style de box pour indiquer le succès d'un traitement ou autre;
*/
.box.success{
	padding-top: 70px;

	border-style:solid;

	background-color:#BD8D46;
	color:#4C1B1B;
	border-color:#4C1B1B;

	background-image:url(../images/checkbox.png);
	background-repeat: no-repeat;
	background-position: top;
}
/*
* 	Permet de mettre un élément (bouton, texte)
*	Dans un style bouton "désactivé"
*/
.actionBloque {
	width: 100px;
	padding:5px;

	font-weight:bold;
	text-align: center;

	border:1px solid #B9121B;
	border-radius: 5px;

	color:#B9121B;
	background-color:#fff;
}
/*
*	Style particulier pour les produits
*/
.actionBloque.produit{
	border-color:#F60;
	background-color:#FC6;
}
/*
*	Div caché qui permet d'afficher :
*	-Les historiques de rappels et de diag
*	-L'ajout d'une remarque sur une action
*/

.divCache{
	display:none;
	position:absolute;
	left:35%;
	z-index: 1002;
	padding:3px;
	min-height:150px;	
	max-width:800px;
	min-width: 400px;

	border-style:solid;
	border-width:thin;

	border-color:#000;
	background-color:#D4C277;
}
/*
*	Style des titres
*/
.title {
	padding: 10px;

	text-align:center;
	font-size: 17px;	

	border:2px solid #B9121B;

	background-color:#F6E497;	
}
.title.discret{
	font-size: inherit;

	text-decoration: underline;
	font-weight: bold;

	border: none;

	background-color: transparent;
}
.title.underline{
	font-weight: bold;
	text-align: left;

	border:none;
	border-bottom: 2px solid #000;

	background-color: transparent;
	color: #B9121B;
}
.title.primary {
	border-color: #BD8D46; 
	background-color:#BD8D46;
}
/*
*	Style global d'un bouton
*/
.bouton{
	padding: 10px;
	margin: 5px 5px;
	min-width: 30px;
	display: inline-block;

	text-align: center;

	border-radius: 5px;

	cursor: pointer;
}
.bouton:disabled,.bouton:disabled:hover{
	padding: 10px;

	border: 1px solid #000;

	background-color: #9B9E8D;
	color: #000;

	background-image: none;

	cursor: not-allowed;
}
/*
*	Style bouton annuler
*/
.cancel{
	padding-left: 25px;

	border: 1px solid #bd8d46;

	background-color: #bd8d46;
	color: #fff;
	
	background-image: url('../images/cancel.png');
	background-repeat: no-repeat;
	background-position: -15px;
}
.cancel:hover{
	border: 1px solid #bd8d46;

	background-color: #fff;
	color: #bd8d46;

	background-image: url('../images/cancelh.png');
}

/*
*	Style bouton valider
*/
.submit{
	padding-right: 35px;

	border: 1px solid #4c1b1b;

	background-color: #4c1b1b;
	color: #fff;

	background-image: url('../images/check.png');
	background-repeat: no-repeat;
	background-position:110%;
}
.submit:hover{
	border: 1px solid #4c1b1b;

	background-color: #fff;
	color: #4c1b1b;

	background-image: url('../images/checkh.png');
}

/*
*	Style bouton option
*/
.option{
	border: 1px solid #bd8d46;

	background-color: #D4C277;
	color: #4c1b1b;
}
.option:hover{
	border: 1px solid #bd8d46;

	background-color: #fff;
	color: #D4C277;
}

/*
*	Style bouton important
*/
.important{
	border: 1px solid #B9121B;

	background-color: #B9121B;
	color: #fff;
}
.important:hover{
	border: 1px solid #B9121B;

	background-color: #fff;
	color: #B9121B;
}
/*
*	Permet de placer les éléments à 
*	droite 
*	à gauche
*	à la suite
*	centré
*/
.droite{
	float:right;

	text-align: right;
}
.gauche{
	float: left;
}
.center{
	text-align: center;
}
.clear{
	clear: both;
}
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
 
.clearfix {
    display: inline-block;
} 
* html .clearfix {
    height: 1%;
}
/* 
*	Mise en forme tableau basique avec
*	entête de couleur,
*	bordure,
*	sans hover des lignes
*/
.table { 
	display: table;
	width: 60%;
	margin: 0 auto;
	border-collapse: collapse;

	border: 1px solid #555442;
}
.tr { 
	display: table-row;

	color: #000;
}
.thead { 
	display: table-header-group;
}
.tbody { 
	display: table-row-group; 
}

.td, .th { 
	display: table-cell;
	padding: 5px;
	opacity: 1;
	visibility: visible;

	text-align: center;

	border:1px solid #555442;
}
.td img,
#categtags{
	vertical-align:middle;
}
.th{ 
	font-weight: bold;

	color:#FFF;
	background-color: #4C1B1B;
}
.tr:nth-child(odd){
	background-color: rgba(76,27,27,0.3);
}
.tr:nth-child(even){
	background-color: rgba(189,141,70,0.3);
}
/*
*	Permet de faire des tableaux large
*/
.table.large{
	width: 95%;
}
.table.small{
	width: 40%;
}
/*
*	Style pour les tableaux discret sans bordure, 
*	sans entête de couleur et avec surlignage de 
*	la ligne sur hover
*/
.table.discret{
	border:none;
}
.table.discret .td,.table.discret .th { 
	display: table-cell;
	padding: 5px;
	text-align: inherit;

	border:none;
}
.table.discret .th{
	font-weight: bold;

	color:#000;
	background-color: transparent;
}
.table.discret .tr:hover{
	background-color: #BD8D46;

	cursor: pointer;
}
/*
* Input group style d'input avec ou sans icone
*/
.input-group,
.textarea-group{
	display: inline-block;
	padding: 10px;
	position: relative;

}
/*
*	Style de l'icone a coté d'un input
*/
.input-group-addon{
	padding: 4px 6px 5px 6px;
	height: 20px;
	margin: 0;
	display: inline-block;
	margin-right: -5px;

	border-right: none;
	border-top: 2px solid #8E8C79;
	border-left: 2px solid #8E8C79;

	background-color: #F6E497;
}
/*
*	Ajoute une bordure entre l'icone et le champ
*/
.input-group-addon:after{
	content: "";
	border-right: 1px solid #8E8C79;
	margin-left: 5px;
}
/*
*	Style du label
*/
.textarea-group label,
.input-group label{
	display: inline-block;
	width: 145px;

	color:#B9121B;
}
/*
*	Place le label en haut en cas de textarea
*	S'il s'agit d'un select où une taille est fixé par l'attribut "size" alors on place le label au top
*/
.textarea-group label + textarea,
.input-group label + select[size]{
	vertical-align: top;
}
/*
*	Style sans icone d'un input et textarea
*/
.input-group input[type=text],
.input-group input[type=password],
.textarea-group textarea{
	margin-left: 0;
	margin-right: -8px;

	border-top: 2px solid #8E8C79;
	border-left: 2px solid #8E8C79;
	border-right: none;
	border-bottom: none;
}
/*
*	Style avec icone d'un input
*/
.input-group-addon + input[type=text],
.input-group input[type=text]+input[type=text]{
	margin-left: 0;
	margin-right: -8px;

	border-top: 2px solid #8E8C79;
	border-left: none;
	border-right: none;
	border-bottom: none;
}
/*
*	Style si 2 inputs posée dans le même input-group
*/
.input-group input[type=text]+input[type=text]{
	border-left: 1px solid #8E8C79;
}
/*
*	Style pour les input et textarea obligatoire
*/
.require{
	background-color:#FCC;
}
/*
*	Message d'erreur pour un champs
*/
span.error_message{
	padding: 3px;
	z-index: 1;
	display: block;

	background: #B9121B;
	color: #FFFFFF;
}
span.error_message:empty{
	display: none;
}
/*
*	Style particulier de l'application 
*/
/*
*	Style particulier du 
*	formualire d'info de tel 
*	et de l'intervention
*/
.form_contact,
.frmInfoTel,
.frmInfoITV,
.frmmodmachine,
.frmmodclient,
.frmrappel,
.frmTypeItv{
	width: 700px;
	margin: 0 auto;
}
.frmValITV{
	width: 550px;
	margin: 0 auto;
}
.frmInfoITV .input-group.sauvegarde label{
	width: 800px;
}
.frmlivraison{
	margin-left: 75px;
}
.frmprediag{
	width: 800px;
	margin: 0 auto;
}
.frmaddrappelactions{
	width: 900px;
	margin: 0 auto;
}
/*
*	Form_contact:
*	Style particulier du Formulaire de contact;
*/
.form_contact textarea{
	vertical-align: middle;
	height: 300px;
	width: 550px;
}
.form_contact .input-group.adresse input[type=text]{
	margin: 0;
	margin-right: -8px;
	width: 500px;
}
.form_contact .input-group.societe{
	display: none;
}
/*
*	Style particulier pour le formulaire d'ajout d'un nouvel article
*/
.form_add{
	max-width: 1440px;
	margin: 0 auto;
}
/*
*	Fixe la taille des label a 100px
*/
.form_add .input-group label,
.form_add .textarea-group label{
	width: 100px;
}
/*
*	Permet de mettre le fieldset en rouge
*/
.form_add fieldset {
	margin-bottom: 10px;
	padding: 0;

	border:1px solid #DF3F3F;
}
/*
*	Permet d'aligner verticalement l'image au texte dans les fieldset
*	Utilisé pour faire les boutons d'ajout d'un nouveau fournisseur, tva, sorecop...
*/
.form_add fieldset img{
	vertical-align: middle;
	padding-left: 1px;

	cursor: pointer;
}
/*
*	Permet de styliser la legend des fieldset
*/
.form_add legend {
	font-weight:bold;

	color:#DF3F3F;
}
/*
*	Permet de centrer verticalement l'image au texte de la legend du fieldset (utiliser pour centrer les 2 flèche dans la rubrique Affichage)
*/
.form_add legend img{
	vertical-align: middle;
	padding: 0px;

	cursor: pointer;
}
/*
*	Special IE: Permet d'afficher ou non les passages a la ligne
*	utilisé pour la rubrique affichage pour afficher ou cacher les input files;
*/
.form_add .cachebr br{
	display: none;
}
.form_add .affbr br{
	display: block;
}
/*
*	Style du premier fil d'Ariane au dessus de la divCache pour sélectionner une famille
*/
.form_add #fil_ar{
	position: absolute;
	top: -20px;
	left: 0;

	text-decoration: underline;
	font-family: "Trebuchet MS", Helvetica, sans-serif;
}
/*
*	Style du second fil d'Ariane a coté de la sélection de famille
*/
.form_add #fil_ar2{
	display: inline-block;
	padding: 5px;

	font-family: "Trebuchet MS", Helvetica, sans-serif;
}
/*
*	Permet de fixer la taille des textarea dans le formulaire
*/
.form_add textarea{
	width: 645px;
}
/*
*	Permet de décoller la checkbox du label
*/
.form_add input[type=checkbox]{
	margin: 0 30px 0 40px;
}
/*
*	Permet de placer chaque input les un en dessous des autres
*/
.form_add input[type=file]{
	margin-right: 150px;
}
/*
*	Style du lien d'ajout d'une nouvelle famille dans le formulaire annexe
*/
.form_add .add_fam{
	padding: 20px;

	cursor:pointer;
}
/*
*	Style de sélection d'une famille
*/
.form_add .select_fam{
	padding: 10px;

	text-align: center;
}
.form_add .select_fam:hover{
	background-color: #ea6060;

	cursor: pointer;
}
/*
*	Fixe la taille des cellule du tableau d'attribution des poles à un fournisseur
*/
.form_add #list_appart td{
	width: 190px;
}
/*
*	filigrame blanc permettant d'empècher d'accèder au formulaire du fond pendant la saisie d'une donnée annexe (fournisseur,sorecop...)
*/
.form_add #fade{
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	z-index:1001;

	background-color: #FFFFFF;

	-moz-opacity: 0.8;
	opacity:.80;
	filter: alpha(opacity=80);
}
/*
*	Style du message d'erreur lors de l'ajout d'un article
*/
#box_error_form{
	position :absolute;
	z-index: 1;
	left: 500px;
}
#box_error_form ul li{	
	list-style-type: disc;

	text-align: left;
}
/*
*	Style particulier d'une ligne d'un devis
*/
.ligne_devis{
	margin: 20px 0;
	height: 30px;
}
.ligne_devis p{
	margin: 15px 0;

	font-weight: bold;
}
.ligne_devis .bouton{
	padding: 0;
}
/*
*	Icone lors de l'ajout d'une nouvelle remarque lors du diagnostique
*/
a.diagbtnconf {
	text-decoration:none;

	background-image:url(../images/ok.gif);
}
a.diagbtnconf:hover {
	text-decoration:none;

	background-image:url(../images/ok_surv.gif);
}
/*
*	Listing des accessoires fournis 
*	avec l'intervention
*/
#lstAccess li {
	display:inline;
	line-height:25px;
	padding:0 10px;
	width:15%;

	text-align:center;

	border-right: 1px solid black;
}
/*
*	Style des cellules selon 
*	le rappel du client
*/
.td_rappel_alert {
	padding-right:10px;
	width:150px;

	text-transform:capitalize;
	font-weight:bold;
	text-align:right;
	
	background-color:#FE6767;
	color:#FFF;
}
.td_rappel_normal {
	padding-right:10px;
	width:150px;

	text-align:right;
	
	background-color:#DDF96C;
	color:#000;
}
.td_rappel_jamais {
	padding-right:10px;
	width:150px;

	font-weight:bold;
	text-align:right;

	background-color:#FC6;
	color:#006;
}
/* 
*	Style des cellule du tableau
*	contenant le numéro de
*	Devis / Commande / Facture
*/
#dcf td {
	margin:5px;
	padding:5px;
	width:20%;

	font-size:16px;

	border:thin;
	border-style:solid;

	color:#4C1B1B;
	background-color:#F6E497;
	border-color:#4C1B1B;
}
/*Style listing article*/
#order,#search{
	border:1px solid #DF3F3F;
}
#order{
	width: 15%;
	display: inline-block;
	vertical-align: top;

	text-align: center;
}
#containResult{
	display: inline-block;
	width: 100%;
}
#resultTab{
	width: 80%;
	padding-top: 5px;
	display: inline-block;
}
/*Bouton switch ON/OFF*/
.onoffswitch {
    position: relative; width: 79px;
    margin: 0 auto;
    text-align: left;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}

.onoffswitch-checkbox {
    display: none;
}

.onoffswitch-label {
	width: auto !important;
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #999999; border-radius: 0px;
}

.onoffswitch-inner {
    width: 200%; margin-left: -100%;
    -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
    -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
}

.onoffswitch-inner:before, .onoffswitch-inner:after {
    float: left; width: 50%; height: 21px; padding: 0; line-height: 17px;
    font-size: 15px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.onoffswitch-inner:before {
    content: "on";
    padding-left: 16px;
    background-color: #B9121B; color: #FCFAE1;
}

.onoffswitch-inner:after {
    content: "off";
    padding-right: 16px;
    background-color: #CCCCCC; color: #333333;
    text-align: right;
}

.onoffswitch-switch {
    width: 25px; margin: 0px;
    background: #000000;
    position: absolute; top: 0; bottom: 0; right: 54px;
    -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
    -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s; 
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px; 
}
/*
*	Pagination
*/
#pagination {
	text-align: center;
}
#pagination li{
	display: inline-block;
	
}
#pagination li a{
	padding: 10px;
	margin: 5px;

	border-radius: 3px;
	background-color: #B9121B;
	border-bottom: 2px solid #DF3F3F;
	text-decoration: none;
	color: #FFFFFF;
}
#pagination li .active{
	border: 1px solid #DF3F3F;
	background-color: #FCFAE1;
	color: #B9121B;
}

.categtagsform{
	display: inline-block;

	border:1px solid #DF3F3F;
}

.categtagsform legend{
	font-weight: bold;
}

#order label{
	width: auto;
}
#categtags > div > h3 {
	cursor: n-resize;
}

#categtags > div > div > span{
	color: #DF3F3F;
	cursor: pointer;
	border: 1px solid #DF3F3F;
}