/**
 * Feuille de style pour l'application
 * 
 * @copyright Copyright ©SAGHE
 * @author : Patrice Baccaria
 * @version SVN : $Id$
 * @package SAGHE
 */

/****************************************************************************/
/*					CSS concernant la page de LOGIN							*/
/****************************************************************************/


.login-annee {
	/* l'image de fond est positionnée dans indext.php, en utilisant une constante du config_inc.php */
	/*	background-image: url(../images/fond_2012-2013.png); */
	text-align: center;
	font: bold 24px/1.15 Comic Sans MS, sans-serif, arial, verdana, tahoma;
	color: #818183;
	padding: 5px 0px 10px 0px;
	height: 70px;
	border-bottom: 2px solid #99BBE8;
}

/****************************************************************************/
/*				CSS concernant le chargement de l'application				*/
/****************************************************************************/
#chargement-masque {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 20000;
	background-color: white;
}

#chargement {
	position: absolute;
	border: 1px;
	left: 40%;
	top: 40%;
	padding: 2px;
	z-index: 20001;
	height: auto;
	width: 320px;
}

#chargement a {
	color: #225588;
}

#chargement .chargement-logo {
	/*width: 240px;*/
	/*height: 77px;*/
	width: 255px;
	height: 122px;
	background: url(../images/logo_saghe_v3_grand.png) no-repeat;
	background-size: 100% 100%;
	display: block;
}

#chargement .chargement-icone {
	margin-left: 10px;
	padding-left: 50px;
	background: url(../images/extanim32.gif) no-repeat;
	background-size: 32px 32px;
	height: 40px;
	width: 40px;
	float: left;
}

#chargement #chargement-msg {
	margin-left: 60px;
	padding-top: 7px;
	text-align: left;
	font: bold 11px arial, tahoma, helvetica;
}

/****************************************************************************/
/* 						Icones du bandeau haut								*/
/****************************************************************************/

/************************************************/
/***	 pour le logo de SAGHE	 				*/
.icone-logo-saghe {
	width: 190px;
	height: 60px;
	margin-left: auto;
	margin-right: auto;
	background: url(../images/logo_saghe_v2.png) no-repeat;
	background-position: center;
	margin-bottom: 10px;
	cursor: default;
}

.icone-logo-saghe:hover {
	cursor: pointer;
}

.bandeau-annee {
	text-align: center;
	font: bold 20px/1.2 Comic Sans MS, sans-serif, arial, verdana, tahoma;
	color: #818183;
	padding: 0px 0px 10px 0px;
	width: 220px;
}

/************************************************/
/***	 pour le logo de l'Etablissement		*/
.icone-logo-etablissement {
	height: 60px;
	/*	background-image: url(../images/logo_iufm.gif); => le fichier est défini dans saghe.php en fonction des paramètres du config.inc */
	background-repeat: no-repeat;
	background-position: right;
	cursor: default;
}

.icone-logo-etablissement:hover {
	cursor: pointer;
}

/*				<div style="width: 190px; height:60px; background:url(images/logo_saghe_v1.png) no-repeat;  cursor:pointer;"  ext:qtip="Accueil de SAGHE"; id="interfaceIconeSAGHE"></div>
*/
/************************************************/
/***   pour la rubrique "Plans de formation"	*/
.icone-pf {
	width: 115px;
	height: 50px;
	background: url(../images/pf.png) no-repeat;
	cursor: default;
}

.icone-pf:hover {
	background: url(../images/pf_over.png) no-repeat;
	cursor: pointer;
}

/* div#formPfRechercheCol2 {
	margin-top: 25px;
}
 */
/*
.icone-pf2 {
	width: 115px;
	height:50px;
	background:url(../images/pf2.png) no-repeat;
	cursor:default;
}       

.icone-pf2:hover {
	background:url(../images/pf2_over.png) no-repeat;
	cursor:pointer;
}       
*/

/************************************************/
/***	 pour les formateurs	 				*/
/*
.icone-formateurs2 {
	width: 115px;
	height:50px;
	background:url(../images/formateurs.png) no-repeat;
	cursor:default;
}       

.icone-formateurs2:hover {
	background:url(../images/formateurs_over.png) no-repeat;
	cursor:pointer;
}       
*/
.icone-formateurs {
	width: 80px;
	height: 50px;
	background: url(../images/formateurs.png) no-repeat;
	cursor: default;
}

.icone-formateurs:hover {
	background: url(../images/formateurs_over.png) no-repeat;
	cursor: pointer;
}

/************************************************/
/***	 pour les tableaux de bord				*/
.icone-tab-bord {
	width: 115px;
	height: 50px;
	background: url(../images/tab_bord.png) no-repeat;
	cursor: default;
}

.icone-tab-bord:hover {
	background: url(../images/tab_bord_over.png) no-repeat;
	cursor: pointer;
}

/************************************************/
/***	 pour l'administration					*/
.icone-administration {
	width: 95px;
	height: 50px;
	background: url(../images/administration.png) no-repeat;
	cursor: default;
}

.icone-administration:hover {
	background: url(../images/administration_over.png) no-repeat;
	cursor: pointer;
}

/****************************************************************************/
/* 						Modifications pour les tabPanel						*/
/****************************************************************************/

/************************************************/
/* pour mettre un fond dans les tabPanel		*/
/* dans les onglet à la place d'un fond blanc. 	*/
/*
.x-tab-panel-header-plain .x-tab-strip-top {
    background: #DFE8F6 url(../lib/ext/resources/images/default/tabs/tab-strip-bg.gif) repeat-x scroll center bottom !important;
}
*/
/****************************************************************************/
/* 				Déclarations des îcones pour les objets d'Ext				*/
/****************************************************************************/
/*
.icon-user {
	background-image:url(../images/user.png) !important;
}
*/
.icon-piqure {
	background-image: url(../images/piqure.png) !important;
}

.icon-settings {
	background-image: url(../images/settings.png) !important;
}

.icon-export {
	background-image: url(../images/page_excel.png) !important;
}

.icon-pf-recherche {
	background-image: url(../images/find24.png) !important;
	margin-left: 70px;
}
/****************************************************************************/
/*			Modifications au niveau des champs (field, form ...)			*/
/****************************************************************************/

.x-html-editor-invalid {
	border-color: rgb(204, 51, 0);
}





.textfield-normal {
	/*	color: black;*/
	border: 0px none;
	background: transparent;
}

.textfield-normal-right {
	border: 0px none;
	background: transparent;
	text-align: right;
}

.textfield-normal-center {
	border: 0px none;
	background: transparent;
	text-align: center;
}

.textfield-important {
	font-family: verdana, tahoma, verdana, sans-serif;
	color: black;
	border: 0px none;
	background: transparent;
	font-size: 13px;
	font-weight: bold;
}

.x-form-trigger-tree {
	background-image: url(../images/trigger-tree.gif);
	cursor: pointer;
}
/*
.x-form-field-wrap .x-form-trigger-user{
	background-image: url(../images/trigger-user.gif);
	cursor: pointer;
}
*/
.x-form-trigger-user {
	background-image: url(../images/trigger-user.gif);
	cursor: pointer;
}

/* Pour gérer le loading "En cours de chargement ..." des combos */
.loading-indicator {
	background-image:
			url('../lib/ext/resources/ext-theme-classic/images/tree/loading.gif');
	background-repeat: no-repeat;
	background-position: left;
	padding-left: 20px;
}

/* Pour gérer l'affichage de les combos des dates existantes*/
.combo-dates-existantes {
	font-size: 11px;
}

/************************************************/
/***	pour les combos ayant des templates		*/
.combo-tpl-formateur {
	font: normal 11px arial, tahoma, helvetica, sans-serif;
	padding: 0px 0px 4px 3px;
	/* border: 1px solid #fff; */
	border: none;
	border-bottom: 1px solid #eeeeee;
	white-space: normal;
	color: #555;
}

/* On rend transparent tous les champs qui sont en readonly.
 *  Permet une meilleure visibilité des champ plutôt que de passer par disabled (qui lui met une opacité à 30%) 
 *  Le :not(.x-form-file-btn) est nécessaire pour le bouton télécharger de la grid pièce à verser 
 *  qui devenait lui aussi transparent (on l'exclus de la regle css) 
*/
.x-form-readonly * :not(.x-form-file-btn) {
	background: transparent;
}

/****************************************************************************/
/*			Modifications au niveau des objets de type GRID					*/
/****************************************************************************/
/*
.x-grid-cell-inner {
  font-size: 10px;
}
*/
.x-grid-cell {
	font: normal 10px arial, tahoma, helvetica, sans-serif;
}

.grid-row-disabled {
	color: gray;
	cursor: default;
	opacity: .6;
	-moz-opacity: .6;
	filter: alpha(opacity = 60);
}

.grid-cell-font-bold {
	font: bold 11px arial, tahoma, helvetica, sans-serif;
}

/* CSS des renders (cellules des grid)	*/
.render-accueil-actualite {
	vertical-align: middle;
	line-height: 18px;
}

/* 	Changement de l'icone des filtres des grid	*/
.ux-gridfilter-text-icon {
	background-image: url(.../../../images/find16.png) !important;
}

.grid-recherche-match {
	font-weight: bold;
	background-color: yellow;
}

/* pour les sous-totaux dans les grid */
.x-grid-row-summary .x-grid-cell-inner {
	font-weight: bold;
}

/* pour les cellules de grid à centrer */
.texte_centre.x-grid-cell {
	vertical-align   : middle;
}

/****************************************************************************/
/* 		Modifications au niveau des objets de type TABLE LAYOUT				*/
/****************************************************************************/
/*
.tableau-titre {
	border: 0px solid #99BBE8;
	background-color: #c2d6f0;
	text-align: center;
	font: bold 11px tahoma,arial,verdana,sans-serif;
	color: #15428B;
	padding: 5px 0 4px; 
}
.tableau-cell, .tableau-cell-right, .tableau-cell-left {
	border: 0px solid #99BBE8;
	background-color: #d5e4f5; 
	
	text-align: center;
	font: 11px tahoma,arial,verdana,sans-serif;
	color: #000000;
	padding: 5px 0 4px; 
}
*/

/* ************************************************ */
/* Tableau d'information dans SAGHE					*/
.tab-information {
	padding: 0px 10px 10px 0px;
	font: 11px arial, tahoma, verdana, sans-serif;
}

.tab-information table {
	width: 100%;
	border-radius: 10px;
	border-collapse: separate;
	border-spacing: 0;
	box-shadow: 5px 5px 5px #8B9BAF; /* #99BBE8;  #8B9BAF #869BB7 */
}

.tab-information td {
	/*	font: 11px tahoma,arial,verdana,sans-serif;*/
	text-align: center;
	color: #000000;
	padding: 5px 5px 4px 5px;
	border: 1px solid #99BBE8;
	border-right-width: 0px;
	border-bottom-width: 0px;
	background-color: #d5e4f5;
}

.tab-information th {
	font-weight: bold;
	/*	font: bold 11px tahoma,arial,verdana,sans-serif;*/
	text-align: center;
	color: #15428B;
	padding: 5px 5px 4px 5px;
	border: 1px solid #99BBE8;
	background-color: #C2D6F0;
	box-shadow: 1px 1px 0 rgba(255, 255, 255, .8) inset;
	/* petit effet 3D */
}

.tab-information-avertissement {
	color: #DD7812;
}

.tab-information a {
	text-decoration: none;
	color: #1158B3;
	font-weight: bold;
}

td.tab-information-th {
	font-weight: bold;
	/*	font: bold 11px tahoma,arial,verdana,sans-serif;*/
	text-align: center;
	color: #15428B;
	padding: 5px 5px 4px 5px;
	border: 1px solid #99BBE8;
	background-color: #C2D6F0;
	box-shadow: 1px 1px 0 rgba(255, 255, 255, .8) inset;
	/* petit effet 3D */
}

/* ***	coin arrondis	*** */

/*
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
*/

/* première ligne en haut à gauche */
.tab-information thead:first-child tr:first-child th:first-child,.tab-information thead:first-child tr:first-child td:first-child,
.tab-information tbody:first-child tr:first-child th:first-child
{
	border-top-left-radius: 10px;
	/*	border-radius: 10px 0 0 0;
  	border-right-width: 1px;
	border-bottom-width: 1px; */
}
/* première ligne en haut à droite */
.tab-information thead:first-child tr:first-child th:last-child,.tab-information thead:first-child tr:first-child td:last-child,
.tab-information tbody:first-child tr:first-child td:last-child
{
	border-top-right-radius: 10px;
	/*	border-radius: 0 10px 0 0;*/
}
/* première ligne en bas à droite */
.tab-information tbody:last-child tr:last-child th:last-child,.tab-information tbody:last-child tr:last-child td:last-child
{
	border-bottom-right-radius: 10px;
	/*	border-radius: 0 0 10px 0; */
}
/* première ligne en bas à gauche */
.tab-information tbody:last-child tr:last-child th:first-child,.tab-information tbody:last-child tr:last-child td:first-child
{
	border-bottom-left-radius: 10px;
	/*	border-radius: 0 0 0 10px;*/
}

/* ***	Bordures extérieures	*** */
/* En haut du tableau */
.tab-information thead:first-child tr:first-child th,.tab-information  thead:first-child tr:first-child td
{
	border-top: 2px solid #99BBE8;
}
/* A gauche du tableau */
.tab-information th:first-child,.tab-information  td:first-child {
	border-left: 2px solid #99BBE8;
}
/* A droite du tableau */
.tab-information th:last-child,.tab-information  td:last-child {
	/*border-right: 2px solid #99BBE8;*/
	border-right-width: 1px;
}
/* En bas du tableau */
.tab-information tbody tr:last-child th,.tab-information tbody tr:last-child td
{
	/*  border-bottom: 2px solid #99BBE8;*/
	border-bottom-width: 1px;
}

.tab-information tr:hover td {
	background: #efefef; /* //e1ffe1; //#fcf; efefef cfc */
}

.tab-information .tab-info-font-bold {
	font-weight: bold;
}

.tab-information .tab-info-cell-right {
	text-align: right;
}

.tab-information .tab-info-cell-left {
	text-align: left;
}

.tab-information .tab-info-nowrap {
	white-space: nowrap;
}

.tab-information-suivi-budgetaire {
	padding: 0px 15px 0px 15px;
}

/*CSS utilisé pour les charts*/
.chart-titre {
	font-weight: bold;
	color: #15428B;
	padding: 2px 0px 0px 0px;
}

/****************************************************************************/
/* 						Spécifiques à une page								*/
/****************************************************************************/


.panel-body-white {
	background: white none repeat scroll 0 0;
}

.panel-body {
	background: url(../images/fond_panel.png) top left;
}

/*
 .x-panel-body {
	background: url(../images/fond_panel.png) top left;
}*/
/*
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	margin: 0px;
	font-size: 13px;
	*/

/************************************************/
/***	 page d'Accueil							*/
/*
.block {
	border:3px solid #B2D0F7;
	background:white url(../images/block-bg.gif) repeat-x;
	margin-top: 6px;
	border-radius: 10px;
}
.block h1 {
	color: #083772;
	font-weight: normal;
	font-size: 13px;
	padding: 4px;
	padding-left: 8px;
}
.block-title {
	color: #083772;
	font-weight: bold;
	padding: 4px;
	padding-left: 8px;
}
.block-body {
	padding: 8px;
	padding-top: 2px;
}
.block-body b {
	color: #333333;
	font-size: 11px;
}
.block-body em {
	display: block;
	margin-top: 5px;
	font-size: 11px;
   	color: gray;
	text-align: right;
}
.block a:link {
	color: #2663AD;
	text-decoration: none;
}

.block a:hover {
	text-decoration: underline;
	color: #0000CC;
}
*/
.block {
	border: 3px solid #B2D0F7;
	background: white url(../images/block-bg.gif) repeat-x;
	margin-top: 6px;
	border-radius: 10px;
	color: #12345E;
}

.block h1 {
	font-weight: normal;
	font-size: 13px;
	padding: 4px;
	padding-left: 12px;
	margin-top: 2px;
	margin-bottom: 5px;
	color: #083772;
}

.block a:link {
	color: #0000CC; /*#2663AD;*/
	text-decoration: underline;
}

.block a:hover {
	text-decoration: underline;
	color: #0000CC;
	font-weight: bold;
}

.block a:visited {
	text-decoration: underline;
	color: #0000CC;
	/*	font-weight: bold;*/
}

.block-body {
	font-size: 12px;
	padding: 5px 8px 8px 30px;
}

.block-body p {
	margin-top: 0px;
	margin-bottom: 6px;
}
/*
.block-body b {
	color:#333333;
	font-size:11px;
}*/
.block-body em {
	display: block;
	float: right;
	margin-top: 5px;
	font-size: 11px;
	color: gray;
	text-align: right;
}

.block-body ul {
	margin-top: 5px;
}

.block-body ul ul {
	margin-left: 25px;
}

.block-body li {
	list-style: disc inside none;
	margin-left: 25px;
}

.block-actu {
	border: 3px solid #B2D0F7;
	background: white url(../images/block-bg.gif) repeat-x;
	margin: 4px;
	padding: 5px 12px 5px 12px;
	border-radius: 10px;
}

.block-actu ul {
	list-style: disc inside none;
	padding-left: 20px;
}

/* style les colonnes de type "ActionColumn" d'une grid */
.accueil-grid-action-none {
	background-image: none;
}

.accueil-grid-action-attachment {
	height: 18px;
	width: 18px;
	background-image: url(../images/attachment.png);
	background-repeat: no-repeat;
	background-size: 18px 18px;
}

/************************************************/
/*** pour les listes UL LI						*/
.list,.list-info {
	list-style: disc;
	padding-left: 20px;
}

.list {
	margin-top: 5px;
}

.list-info li {
	margin-top: 6px;
}

.sub-list {
	list-style: square;
	padding-left: 20px;
	margin-top: 3px;
}

.sub-list li {
	margin-top: 0px;
}

/************************************************/
/*** pour les messages d'erreur					*/
.msg-panel-avertissement,.msg-panel-information {
	padding: 8px 5px 13px 5px;
	font: 11px arial, tahoma, verdana, sans-serif;
	border-radius: 4px 4px 0px 0px;
}

.msg-panel-avertissement {
	border: 1px solid #FF0000;
	background-color: #FFAAAA;
}

.msg-panel-information {
	/* Vert  
	border: 1px solid #17BB00;
	background-color:#97E39F; 
	*/
	/*Bleu */
	border: 1px solid #016FDE;
	background-color: #DBFFE8;
}

.msg-panel-avertissement table,.msg-panel-information table {
	color: #000000;
	border: 0px;
	border-spacing: 0px 0px;
}

/*
.msg-panel-avertissement td {
	padding: 10px 5px 10px 5px;
	vertical-align:top;
}
*/
.msg-panel-avertissement .icon-error,.msg-panel-information .icon-error
{
	width: 32px;
	height: 32px;
	background: url(../images/icon-error.png) no-repeat;
	margin: 0px 15px 0px 10px;
}

.msg-panel-avertissement .icon-info,.msg-panel-information .icon-info {
	width: 32px;
	height: 32px;
	background: url(../images/icon-info.png) no-repeat;
	margin: 0px 15px 0px 10px;
}

.msg-panel-avertissement .icon-question,.msg-panel-information .icon-question
{
	width: 32px;
	height: 32px;
	background: url(../images/icon-question.png) no-repeat;
	margin: 0px 15px 0px 10px;
}

.msg-panel-avertissement .icon-warning,.msg-panel-information .icon-warning
{
	width: 32px;
	height: 32px;
	background: url(../images/icon-warning.png) no-repeat;
	margin: 0px 15px 0px 10px;
}

/************************************************/
/*** pour les tableaux de données HTML	*/
.tab-info {
	padding: 10px 10px 0px 10px;
}

.tab-info table {
	width: 100%;
	border-collapse: collapse;
	background-color: #f9fcff;
	color: #000000;
	font: bold 12px arial, tahoma, verdana, sans-serif;
}

.tab-info th,.tab-info-th {
	font: bold 12px arial, tahoma, verdana, sans-serif;
	background-color: #C2D6F0;
	color: #15428B;
	padding: 5px 5px 4px 5px;
	text-align: center;
	border: 3px solid #99BBE8;
}

.tab-info td {
	padding: 5px 0 4px;
	text-align: center;
	border: 3px solid #99BBE8;
}

.tab-info tr:hover {
	background: #cfc; /* //e1ffe1; //#fcf; */
}



/* **************************************************************************** */
/*								Section : Progress bar							*/
/* https://codepen.io/whqet/pen/EJgwb											*/
/* **************************************************************************** */
.recrutement-progression .barre {
	background-size: 35px 35px;
	background-color: #CCCCCC;
	background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
	background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
	-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
	box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
	z-index: 99;
	text-align:center;

	float:right;
	margin-top: 15px;
	width: 100%;
	position: absolute;
	z-index: 1;
	width:35%;

}

.recrutement-progression .liste-conteneur{
	list-style-type: none;
	padding:0px;
	margin-left: 15px;
	margin-right: 10px;
}

.recrutement-progression .liste-conteneur .liste-element{
	float:left;
	/* width:calc( (100% - 150px) / 3); */
	width:calc( (100% - 200px) / 3);
	margin-bottom: 15px;
}
.recrutement-progression .liste-conteneur .liste-element.dernier{
	/*  width:150px;*/
	width:200px;
}

.recrutement-progression .liste-conteneur .liste-element .liste-element-block{
	padding-bottom: 10px;
}

.recrutement-progression .liste-conteneur .liste-element .liste-element-block .rect-barre{
	height:50px;
}

.recrutement-progression .liste-conteneur .liste-element .liste-element-block .rect-barre .rectangle{
	/* width:150px; */
	width:200px;
	float:left;
	position: absolute;
	z-index: 100;
	text-align:center;


	-moz-box-shadow: inset 0px 0px 0px rgba(0, 0, 0, 0), 5px 5px 3px 2px rgba(0,0,0,.7);
	-webkit-box-shadow: inset 0px 0px 0px rgba(0, 0, 0, 0), 5px 5px 3px 2px rgba(0,0,0,.7);
	box-shadow: inset 0px 0px 0px rgba(0, 0, 0, 0), 5px 5px 3px 2px rgba(0,0,0,.7);
	background: #CCCCCC;

	border-top: 1px solid #FFF;
	border-left: 1px solid #FFF;
	border-bottom: 0px solid #FFF;
	border-right: 0px solid #FFF;

	border-radius: 10px;
	color: #000;
	font-size: 16px;
	padding: 6px 0px 6px 0px;
	font-weight: bold;
	font-size: 13px;
}

.recrutement-progression .liste-conteneur .liste-element .liste-element-block .rect-barre .rectangle:hover{
	cursor:pointer;
}
.recrutement-progression .liste-conteneur .liste-element .liste-element-block .rect-barre.inactif *{
	background-color: #CCCCCC;
}
.recrutement-progression .liste-conteneur .liste-element .liste-element-block .rect-barre.valide *{
	background-color: #77DD77;  /* #91C880 #B4DBA8;        */
}
.recrutement-progression .liste-conteneur .liste-element .liste-element-block .rect-barre.anomalie *{
	background-color: #FFB347; /*  #D7B589   #EDCDA4;         */
}
.recrutement-progression .liste-conteneur .liste-element .liste-element-block .rect-barre.critique *{
	background-color:  #FF6961; /*  #FFA7A7   ##FFBEBE;      */
}

.recrutement-progression .liste-conteneur .liste-element .liste-element-block .rect-barre .rectangle a{
	text-decoration:none;
	color:black;
}

.recrutement-progression .liste-conteneur .liste-element .liste-element-block .rect-barre .onglet-actif{
	-moz-box-shadow: inset 4px 4px 5px 3px rgba(0, 0, 0, 0.7);
	-webkit-box-shadow: inset 4px 4px 5px 3px rgba(0, 0, 0, 0.7);
	box-shadow: inset 4px 4px 8px 3px rgba(0, 0, 0, 0.7);

	border-top: 0px solid #FFF;
	border-left: 0px solid #FFF;
	border-bottom: 1px solid #FFF;
	border-right: 1px solid #FFF;
}

.recrutement-progression .liste-conteneur .liste-element .liste-element-block .description{
	margin: 10px 35px -8px -20px;
}

.recrutement-progression .liste-conteneur .liste-element .liste-element-block .description.dernier{
	margin: 10px -10px -8px -20px;
}

.recrutement-progression .liste-conteneur .liste-element .liste-element-block .description ul{
	padding-left: 20px;
	font: 12px/14px bold tahoma, arial, verdana, sans-serif;
	color: #15428b;
}

.recrutement-progression .liste-conteneur .liste-element .liste-element-block .description li.valide {
	list-style-image: url('../images/success16.png');
}
.recrutement-progression .liste-conteneur .liste-element .liste-element-block .description li.erreur {
	list-style-image: url('../images/stop16.png');
}
.recrutement-progression .liste-conteneur .liste-element .liste-element-block .description li.avertissement {
	list-style-image: url('../images/warning16.png');
}

.recrutement-progression .btn-progression-recrutement-details{
	position: absolute;
	margin-top: 32px;
	margin-left: -20px;
	font-size: 40px;
	background-image: url('../images/tool-sprites.gif');
	background-position: 15px 165px;
	height: 15px;
	width: 15px;
}

.recrutement-progression .btn-progression-recrutement-details:hover{
	background-position: 0 165px;
}

.recrutement-progression .btn-progression-recrutement-details.active, .recrutement-progression-menu-icon-collapse-active{
	background-position: 15px 150px;
}

.recrutement-progression .btn-progression-recrutement-details.active:hover{
	background-position: 0 150px;
}

.recrutement-progression-menu-icon-collapse {
	background-position: 15px 165px;
}



/* **************************************************************************** */
/*								Section : Bouton Toggle							*/
/* **************************************************************************** */


.sagheBtnToggle {
	cursor: pointer;
	border-radius: 34px;
	-webkit-border-radius: 34px;
	-moz-border-radius: 34px;
	width: 38px;
	height: 22;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
}
/* Le bouton toggle avec couleur : vert - rouge */
.sagheBtnToggleOn {
	border-color: #8cc28d;
	background-image: none;
	background-color: #b1e0b1;
	background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a9f8a9), color-stop(48%, #86ec86), color-stop(52%, #75e776), color-stop(100%, #2de02f));
	background-image: -webkit-linear-gradient(top, #a9f8a9, #86ec86 48%, #75e776 52%, #2de02f);
	background-image: -moz-linear-gradient(top, #a9f8a9, #86ec86 48%, #75e776 52%, #2de02f);
	background-image: -o-linear-gradient(top, #a9f8a9, #86ec86 48%, #75e776 52%, #2de02f);
	background-image: linear-gradient(top, #a9f8a9, #86ec86 48%, #75e776 52%, #2de02f);
}

.sagheBtnToggleOff {
	border-color: #967d7d;
	background-image: none;
	background-color: #e4b6b6;
	background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffa1a1), color-stop(48%, #f96060), color-stop(52%, #f05959), color-stop(100%, #f22121));
	background-image: -webkit-linear-gradient(top, #ffa1a1, #f96060 48%, #f05959 52%, #f22121);
	background-image: -moz-linear-gradient(top, #ffa1a1, #f96060 48%, #f05959 52%, #f22121);
	background-image: -o-linear-gradient(top, #ffa1a1, #f96060 48%, #f05959 52%, #f22121);
	background-image: linear-gradient(top, #ffa1a1, #f96060 48%, #f05959 52%, #f22121);
}

.sagheBtnToggleOn:before {
	position: absolute;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	content: "";
	height: 16px;
	width: 16px;
	left: 1px;
	bottom: 1px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}

.sagheBtnToggleOff:before {
	position: absolute;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	content: "";
	height: 16px;
	width: 16px;
	left: 19px;
	bottom: 1px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}

/* Le bouton toggle avec couleur : rouge - vert*/
.sagheBtnToggleOnSuccesDroite {
	border-color: #967d7d;
	background-image: none;
	background-color: #e4b6b6;
	background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffa1a1), color-stop(48%, #f96060), color-stop(52%, #f05959), color-stop(100%, #f22121));
	background-image: -webkit-linear-gradient(top, #ffa1a1, #f96060 48%, #f05959 52%, #f22121);
	background-image: -moz-linear-gradient(top, #ffa1a1, #f96060 48%, #f05959 52%, #f22121);
	background-image: -o-linear-gradient(top, #ffa1a1, #f96060 48%, #f05959 52%, #f22121);
	background-image: linear-gradient(top, #ffa1a1, #f96060 48%, #f05959 52%, #f22121);
}

.sagheBtnToggleOffSuccesDroite {
	border-color: #8cc28d;
	background-image: none;
	background-color: #b1e0b1;
	background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a9f8a9), color-stop(48%, #86ec86), color-stop(52%, #75e776), color-stop(100%, #2de02f));
	background-image: -webkit-linear-gradient(top, #a9f8a9, #86ec86 48%, #75e776 52%, #2de02f);
	background-image: -moz-linear-gradient(top, #a9f8a9, #86ec86 48%, #75e776 52%, #2de02f);
	background-image: -o-linear-gradient(top, #a9f8a9, #86ec86 48%, #75e776 52%, #2de02f);
	background-image: linear-gradient(top, #a9f8a9, #86ec86 48%, #75e776 52%, #2de02f);
}

.sagheBtnToggleOnSuccesDroite:before {
	position: absolute;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	content: "";
	height: 16px;
	width: 16px;
	left: 1px;
	bottom: 1px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}

.sagheBtnToggleOffSuccesDroite:before {
	position: absolute;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	content: "";
	height: 16px;
	width: 16px;
	left: 19px;
	bottom: 1px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}