/*         ______________________________________
  ________|                                      |_______
  \       |           Ycss v1.1.3          |      /
   \      |      Copyright © 2017 www.yasinus.com       |     /
   /      |______________________________________|     \
  /__________)                                (_________\
last update : 27-07-2017
action : add info-alert


*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800italic,800);

/******
*******		GLOBAL PARAMETRES
*******/
*{box-sizing:border-box}
*, *::after, *::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
:after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body{
	margin:0;
	padding:0;
	font-size:16px; color:#5a5a5a;
	font-family: 'Open Sans', sans-serif;
	background-color:#f8f8f8;	
}
.dashed{border:#63F 1px dashed;}
.bordred{border:#63F 1px solid;}
.show{display:inline-block !important}
.hide{display:none !important}
.unread{font-weight:bold; background-color:#FBFDD7}
.loading{
	background-image:url(../images/ajax_loading.gif) !important;
	background-repeat:no-repeat;
	background-position:center;
	color:#03F;
	width:45px; height:15px;
	display:inline-block;
}

*[role="button"]{
	background: #d2d6d9;
	background-image: -webkit-linear-gradient(top, #d2d6d9, #b6b9ba);
	background-image: -moz-linear-gradient(top, #d2d6d9, #b6b9ba);
	background-image: -ms-linear-gradient(top, #d2d6d9, #b6b9ba);
	background-image: -o-linear-gradient(top, #d2d6d9, #b6b9ba);
	background-image: linear-gradient(to bottom, #d2d6d9, #b6b9ba);
	text-shadow: 1px 1px 3px #ededed;
	-webkit-border-radius: 5;
	-moz-border-radius: 5;
	border-radius: 5px;
	font-family: Arial;
	color: #4a464a;
	padding: 9px 10px;
	font-size:14px;
	text-decoration: none;
	border:1px solid transparent;
	cursor:pointer;
	outline: 0;
}
/******
*******		TYPOGRAPHY
*******/
/***************************************************************	LIST	*/
ul {
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
}
	.list-inline{margin:0; padding:0}
	.list-inline ul{margin:0; padding:0}
	.list-inline li{display:inline-block; list-style:none; margin:0; padding:0}
li {
    display: list-item;
    text-align: -webkit-match-parent;
}


/******
*******		THEME
*******/
/***************************************************************	TOP NAV	*/
.topbar {
    position: relative fixed;
	top:0;
    font-size: 17px;
    background-color: #5f5f5f;
    color: #777777;
    width: 100%;
    padding: 0;
    letter-spacing: 1px;
	z-index:99998;
	height:45px; 

	position:fixed;
	top:0; left:0;
	width:100%;
	box-shadow:rgba(0,0,0,0.5) 0 0 5px;
	padding:0 10px;
}
	.topbar .leftSide{
		width:auto;
		float:left;	
	}
	
	.topbar .rightSide{
		width:auto;
		float:right;	
	}
	.topbar .rightSide .links{
		line-height:45px;
	}
	.topbar .rightSide .links ul{
		margin:0; left:0;
	}
	.topbar .rightSide .links ul li{
		margin:0; left:0; float:right; list-style:none; 
	}
	.topbar .rightSide .links ul li a{
		text-decoration:none;
		color:#666;	
		display:block;
		padding:5px 7px;
	}
	
	.topbar a.nav-name{
		display:inline-block;
		text-decoration:none;
		color:#FFF;
		padding-left:10px; padding-right:10px;
		margin-left:-10px;
		transition:all .5s;
	}.topbar a.nav-name:hover{background-color:#111111}
	.topbar-actions{
		display:inline-block;
		float:right;
		margin-top:-2px;	
	}
	.topbar-actions li{margin:0; list-style:none}
	.topbar-actions li{margin:0}
	.topbar-actions li a{
		color:#000;	
		text-decoration:none;
		font-size:12;
		display:inline-block;
		padding:0 10px;
	}.topbar-actions li a:hover{
		background-color:#111111;	
	}
	.topbar-actions li a i{font-size:16px}
	.topbar-actions li a.selected{
		background-color:#111111; 
		cursor:default;
		pointer-events: none;
		border-bottom:#C60 4px solid;
		}
	.has-topbar-submenu{position:relative}
	.topbar-submenu{
		position:absolute;
		top:50px; 
		background:#FFF;
		padding:5px 0;
		border:#ededed 1px solid;
		border-radius:10px;
		border:#E4E4E4 1px solid;
		-webkit-box-shadow: 0px 2px 2px -1px rgba(0,0,0,0.81);
		-moz-box-shadow: 0px 2px 2px -1px rgba(0,0,0,0.81);
		box-shadow: 0px 2px 2px -1px rgba(0,0,0,0.81);
		display:none;
	}

	.topbar-submenu ul {margin:0; padding:0}
	.topbar-submenu ul li{margin:0; padding:0 !important; list-style:none; border:none;}
	.topbar-submenu ul li a{display:block; padding:1px 10px !important; border:0 !important; width: 180px}
	.topbar-submenu ul li a i{color:#f00; font-weight:bold; font-size:16px}
	.topbar-submenu span{
				position:relative;
				margin-top:-11px;
				border-top:#E4E4E4 1px solid;
				border-left:#E4E4E4 1px solid;
				left:10px;
				position:absolute;
				width:10px;
				height:10px;
				background-color:#fff;
				-webkit-transform:rotate(45deg);
				transform:rotate(45deg);
				filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067690849304, M12=0.7071067690849304,M21=-0.7071067690849304, M22=0.7071067690849304,sizingMethod='auto expand');
				z-index:0;
			}
/***************************************************************	FOOBAR	*/
.foobar{
		height:40px;
		background-color:#000;left: 0; right: 0; bottom: 0;
		position:absolute;
		margin-top:20px;
		color:#FFF;
	}

/***************************************************************	Container	*/

.wrapper{
	position:relative;
	height:100%; min-height:100%;	
}


.container{
	margin:0 auto; max-width:1024px; padding:0 7px; display:block;
	-webkit-box-sizing: border-box;
   	-moz-box-sizing: border-box;
        box-sizing: border-box;
	}
.container-full{width:100%; padding:0 7px;}
	@media only screen and (max-width: 750px) {
		.container {padding:0}
		.container-full {padding:0}
	}
	
/**************************************************************		MODAL     */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 999999; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
	position:relative;
    background-color: #fefefe;
	color:#333;
    padding: 20px;
	margin:25px auto;
    border: 1px solid #888;
    width: 680px; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.modal-content .close {
	position:absolute;
	top:-5px; right:-5px;
    border-radius:50%;
	background-color:#900;
	color:#FFF;
	font-size:14px;
	padding:7px 8px !important;
	line-height:normal;
	border:#FFF 2px solid;
	-moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
    -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
	transition:all .3s;
	cursor: pointer;
	font-weight:bold;
}

.modal-content .close:hover,
.modal-content .close:focus {
    cursor: pointer;
	background-color:#F00;
}
.modal-title-logo{
	background-image:url(../images/logo.png);
	background-repeat:no-repeat;
	background-position:center;
	height:90px;
	background-size:190px 90px;	
	border-bottom:#ededed 1px solid
}
.modal-title-text{
	font-size:28px;
	color:#333 !important;
	text-align:center;
	margin-bottom:20px;
}

/**************************************************************		PANEL     */
.panel{
	background:#FFF;
	border:#bbb 1px solid;
	border-radius:3px;
	box-shadow: inset 0 -2px 0 rgba(0,0,0,.05);
	-moz-box-shadow: inset 0 -2px 0 rgba(0,0,0,.05);
	-webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,.05);
}
	.panel-header{
	background:#fafafa;
	height:38px;
	box-shadow: inset 0 -2px 0 rgba(0,0,0,.05);
    -moz-box-shadow: inset 0 -2px 0 rgba(0,0,0,.05);
    -webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,.05);
	border-top-right-radius:3px;
	border-top-left-radius:3px;
	border-bottom:#bbb 1px solid;
	padding:0 10px;
	font-size:14px;
	line-height:34px;
}
	.panel-header-right{float:right}
	.panel-header-left{float:left}
	.panel-header-tab{
		float:right;
		margin-top:0px;	
		margin-right:0px;			
	}
	.panel-header-tab a{
		text-decoration:none;
		font-size:12px;
		padding:10px 12px 7px 12px;
		transition:all .2s;
		margin-left:-2px;
		background-color:#e2e2e2;
		color:#333
	}.panel-header-tab a:hover{background-color:#1ba2fc; color:#FFF;}
	.panel-header-tab a.active{
		border-top:#039 2px solid;
		background-color:#Fff;	
		margin-top:5px;
		border-bottom:#fff solid 1px;
		border-left:#bbb 1px solid;
		border-right:#bbb 1px solid;
		font-weight:bold;
		pointer-events: none;
	}
	.panel-header-tab a i{
		color:#333; margin-right:3px;
	}
	.tab-title{
		font-size:20px;
		margin:0px 0 2px;	
		font-weight:700
	}
	.panel-header-actions{
		float:right;
		margin-top:-1px;	
		margin-right:-10px;	
		overflow:hidden;
	}
	.panel-header-actions button{
		border:0;	
		margin-left:-3px;
		padding:10px 14px 10px 14px;
		outline:none;
		color:#999;
		transition:all .3s;
		background:transparent;
		font-size: 16px;
	}.panel-header-actions button:hover{cursor:pointer; background:#EBEBEB; color:#000}

	.panel-header-actions a{
		text-decoration:none;
		font-size:14px;
		padding:10px 12px 9px 12px;
		transition:all .2s;
		margin-left:1px;
		background-color:#e2e2e2;
		color:#333;
		display: block
		
	}
	.panel-header-actions a i{
		color:#333;
	}

	.panel-header-actions a:last-child{
		color:#fff;
		background-color: #6aae53;
    background-image: linear-gradient(rgba(71,148,56,0),#428f33);
    border-color: #579f4a #4e9340 #327527;
    box-shadow: inset 0 1px 2px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.1);
    text-shadow: 0 1px 1px #488739,0 0 5px rgba(255,255,255,0);
    -webkit-font-smoothing: antialiased;
    background-clip: padding-box;

	}

	.panel-header-actions a:last-child i{color:#fff; text-align: center}
	.panel-header-actions a:hover{background-color:#85c76f;}
	.panel-header-actions a:active{background-color:#85c76f;}

	.panel-footer{
		border-top:#bbb 1px solid;
		padding:5px 10px;
		font-size:14px;
	}
	.panel-content{
		padding:0 10px 10px 10px;
		font-size:14px;
	}
		.panel-content-header{
			font-size:22px;
			border-bottom:#CCC 1px solid;
			color:#333;
		}
		.panel-content-header-right{
			float:right;
		}
		.panel-content-header-left{
			float:left;
			padding-top:5px;
		}
		.panel-content-footer{
			height:40px;
			line-height:40px;
			border-top:#ededed 1px solid;
			padding-top:5px;
		}
	@media (max-width:480px){
	.panel-header{	
		padding:0 5px;
	}
	.panel-footer{	
		padding:5px;
	}
	.panel-content{
		padding:0 5px;	
	}
	.tohide{
		display:none !important;	
	}
	.toshow{
		display:inline-block !important;	
	}
}

/********** MyTable	*/

.mytable{
	border-collapse:collapse;
	border:#333 2px solid;
	width:100%;
}


/***************************************************************	Grid	*/
.row:before {display: table;content: " ";}
.row:after {display: table;content: " ";}
.row:after {clear: both;}
.row{margin:0}
	@media only screen and (max-width: 750px) {
		.row {margin:0}
	}
/***************************************************************	Grid INLINE	*/
.col_1-inline, .col_2-inline, .col_3-inline, .col_4-inline,.col_5-inline, .col_6-inline, .col_7-inline, .col_8-inline,.col_9-inline, .col_10-inline, .col_11-inline, .col_12-inline {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
	float:left
}
.col_1-inline {width:8.33333333333%;}
.col_2-inline {width:16.6666666667%;}
.col_3-inline {width:25.0%;}
.col_4-inline {width:33.3333333333%;}
.col_5-inline {width:41.6666666667%;}
.col_6-inline {width:50.0%;}
.col_7-inline {width:58.3333333333%;}
.col_8-inline {width:66.6666666667%;}
.col_9-inline {width:75.0%;}
.col_10-inline {width:83.3333333333%;}
.col_11-inline {width:91.6666666667%;}
.col_12-inline {margin-left:0;width:100%;}

@media only screen and (max-width: 750px) {
	.col_1-inline, .col_2-inline, .col_3-inline, .col_4-inline,.col_5-inline, .col_6-inline, .col_7-inline, .col_8-inline,.col_9-inline, .col_10-inline, .col_11-inline, .col_12-inline {
		position: relative;
		padding-right: 5px;
		padding-left: 5px;
	}
}

/***************************************************************	Grid Normal	*/
.col_1, .col_2, .col_3, .col_4,.col_5, .col_6, .col_7, .col_8,.col_9, .col_10, .col_11, .col_12 {
    position: relative;
    min-height: 1px;
	min-width:81px;
    padding-right: 7px;
    padding-left: 7px;
	float:left
}
.col_1 {width:8.33333333333%;}
.col_2 {width:16.6666666667%;}
.col_3 {width:25.0%;}
.col_4 {width:33.3333333333%;}
.col_5 {width:41.6666666667%;}
.col_6 {width:50.0%;}
.col_7 {width:58.3333333333%;}
.col_8 {width:66.6666666667%;}
.col_9 {width:75.0%;}
.col_10 {width:83.3333333333%;}
.col_11 {width:91.6666666667%;}
.col_12 {margin-left:0;width:100%;}

@media only screen and (max-width: 750px) {
	.col_1, .col_2, .col_3, .col_4,.col_5, .col_6, .col_7, .col_8,.col_9, .col_10, .col_11, .col_12 {
		position: relative;
		width:100%;
		padding-right: 5px;
		padding-left: 5px;
	}
}		
/***************************************************************	Colors	*/
.bg-red{background-color:#F63E72; color:white}
.font-red{color:#F63E72}
.border-red{border:#F63E72 1px solid}
/*****/
.bg-blue{background-color:#057EB8; color:white}
.font-blue{color:#057EB8}
.border-blue{border:#057EB8 1px solid}
/*****/
.bg-green{background-color:#649736; color:white}
.font-green{color:#649736}
.border-green{border:#649736 1px solid}
/*****/
.bg-orange{background-color:#FB9C4E; color:white}
.font-orange{color:#FB9C4E}
.border-orange{border:#FB9C4E 1px solid}
/*****/
.bg-yellow{background-color:#FFFC7F; color:#8a6d3b}
.font-yellow{color:#FFFC7F}
.border-yellow{border:#FFFC7F 1px solid}
/*****/
.bg-grise{background-color:#D7D2BC; color:#898B91}
.font-grise{color:#D7D2BC}
.border-grise{border:#D7D2BC 1px solid}

/*********************************************************************************
**********************************************************************************    FORMS    */
input[type="reset"]::-moz-focus-inner, 
input[type="button"]::-moz-focus-inner, 
input[type="submit"]::-moz-focus-inner, 
input[type="file"] > input[type="button"]::-moz-focus-inner{
	margin:0;
}

input[type="date"],input[type="text"], input[type="number"], input[type="password"], input[type="email"], textarea{
	-webkit-appearance:none;
	background-color:#ffffff;
	border-style:solid;
	border-width:1px;
	border-color:#9D9D9D;
	box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);
	color:black;
	font-family:inherit;
	font-size:14px;
	padding:6px 10px;
	border-radius:5px;
	width:100%;
	transition:all .3s;
}
input[type="date"]:focus,input[type="text"]:focus,input[type="number"]:focus, input[type="password"]:focus, input[type="email"]:focus, textarea:focus {
    outline: none;
    box-shadow: 0 0 9px #9ecaed;		
}
.input-inline{display:inline-block}
.inline-group{text-align:right;}
.inline-group input[type="text"], .inline-group input[type="password"] {
	padding-right:33px;
	margin:0;
}
.input-small{
	border:solid 1px #868686 !important;
	box-shadow:inset 0 1px 1px rgba(0,0,0,0.1);
	color:black;
	font-family:inherit;
	font-size:14px;
	padding:6px 10px;
	border-radius:5px;
	width:100%;
	transition:all .3s;		
}
.inline-group button{
	margin-top:-29px !important;
	margin-right:1px;
	padding:6px 6px 7px 6px;
	background: #d2d6d9;
	text-shadow: 1px 1px 3px #ededed;
	border-radius: 5px;
	border-top-left-radius:0;
	border-bottom-left-radius:0;
	color: #4a464a;
	font-size:14px;
	text-decoration: none;
	border:1px solid transparent;
	cursor:pointer;
	outline: 0;
	transition:all ease .3s;
}
.inline-group button:hover{
	background-color:#3cb0fd !important;	
}


/***************************** FORM GROUP INLINE	******/
/* 
	exemple of use :
	<div class="form-group-inline">
		<div class="element-1"><i class="fa fa-envelope"></i></div>
		<div class="element-2">
			<input id="email" type="text" placeholder="Votre E-Mail">
			<input id="newsLetter_token" type="hidden" value="<?= $formToken ?>">
		</div>
		<div class="element-3">
			<button id="sendNewsLetter" class="tooltip" title="Envoyer">Envoyer</button>
		</div>
		<br clear="all">
	</div>
**********************************************************/
.form-group-inline{
	background-color:#FFF;
	border-radius:5px;
	border:#BBBBBB 1px solid;
	line-height:40px;
	font-size:18px;
	position:relative;
	overflow:hidden;
}
	.element-1,.element-2,.element-3{
		display:inline-block;
	}
	.element-1,.element-3{
		position:absolute;
		top:0
	}
	.element-1{top:6px; left:10px}
	.element-1 i{color:#CECECE}
	.element-3{right:0}
	.element-3 button{
		padding:0px; 
		border-radius:0; 
		padding:8px 10px 8px 10px;
		border:0;
		border-left:#bbbbbb 1px solid;
		border-radius:0px;
		border-top-right-radius:5px;
		border-bottom-right-radius:5px;
		background: #3cb0fd;
	  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
	  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
	  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
	  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
	  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
	  color:#fff;
	  text-shadow: 1px 1px 3px #656565;
	}
	.element-2{width:100%}
	.element-2 input[type="text"],.element-2 input[type="password"]{
		padding-left:40px;
		width:100%;
		border-radius:5px;
		transition:all .5s;
		border:transparent 1px solid !important
	}.element-2 input[type="text"]:focus,.element-2 input[type="password"]:focus{border:#CFFFB9 1px solid !important; background-color:#FFFFEC}
/****************************************************/

select{
	border:#9D9D9D 1px solid;
	padding:6px 3px;
	outline:none;	
	width:100%;
}
option:nth-child(even) { 
  background-color:#F9FBFF;
}
.form-group-inline{display:inline-block; margin-right: -5px;}
.form-group{
	padding-bottom:5px;
}
.form-group:first-child{
	padding-top:20px;
}
.form-element_{
	-webkit-transition: box-shadow linear 1s;
    transition: box-shadow linear 2s;
	display:inline-block;
	height:40px;
}
.form-element_:focus {
    outline: none;
    border-color: #9ecaed;
    box-shadow: 0 0 9px #9ecaed;		
}
.form-element_.icon{
	padding:5px 10px 5px 27px;
}
.form-element-pre{
	display:block;
	text-align:center;
	position:absolute;
	z-index:2;
	width:25px;
	padding:13px 0;
	margin-left:2px;
	color:#CCC;
}
.input-group{
	width:100%;
	position:relative;
	overflow: hidden
}
	.input-group .suf{padding-right:7px;}
	.input-group.input-sup{
		padding-right:150px;	
		margin:50px;
	}

	.input-group .input-suf{
		top:1px; right:0;
		position:absolute;
	}
	.input-group .input-suf button{
		background:transparent;
		outline:none;
		border:0;
		cursor:pointer;
		padding:10px; margin-right:2px;
		color:#999;
		transition:all .3s;
	}.input-group .input-suf button:hover{cursor:pointer; color:#000; background-color:#ededed}
/*********************************************************************************
**********************************************************************************    BUTTONS  */
.btn{ 
	background: #d2d6d9;
	background-image: -webkit-linear-gradient(top, #d2d6d9, #b6b9ba);
	background-image: -moz-linear-gradient(top, #d2d6d9, #b6b9ba);
	background-image: -ms-linear-gradient(top, #d2d6d9, #b6b9ba);
	background-image: -o-linear-gradient(top, #d2d6d9, #b6b9ba);
	background-image: linear-gradient(to bottom, #d2d6d9, #b6b9ba);
	text-shadow: 1px 1px 3px #ededed;
	-webkit-border-radius: 5;
	-moz-border-radius: 5;
	border-radius: 5px;
	font-family: Arial;
	color: #4a464a;
	padding: 9px 10px;
	font-size:14px;
	text-decoration: none;
	border:1px solid transparent;
	cursor:pointer;
	outline: 0;
}.btn:hover{background:#c2c6c9}

.btn-small{
	padding: 2px 3px;
	font-size:12px;
}
.btn-large{
	font-size: 16px;
	padding: 15px 20px 15px 20px;	
}
.btn-xlarge{
	font-size: 16px;
	padding: 15px 20px 15px 20px;
	width:100%;
}
.btn.btn-blue{
	  background: #3cb0fd;
	  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
	  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
	  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
	  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
	  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
	  color:#fff;
	  text-shadow: 1px 1px 3px #656565;
}.btn.btn-blue:hover{background:#1ba2fc}
.btn.btn-green{
	  background: #6dd568;
	  background-image: -webkit-linear-gradient(top, #6dd568, #56c750);
	  background-image: -moz-linear-gradient(top, #6dd568, #56c750);
	  background-image: -ms-linear-gradient(top, #6dd568, #56c750);
	  background-image: -o-linear-gradient(top, #6dd568, #56c750);
	  background-image: linear-gradient(to bottom, #6dd568, #56c750);
	  color:#fff;
	  text-shadow: 1px 1px 3px #656565;
}.btn.btn-green:hover{background:#43cd3c}
.btn.btn-orange{
	  background: #f1973f;
	  background-image: -webkit-linear-gradient(top, #f1973f, #f0ad4e);
	  background-image: -moz-linear-gradient(top, #f1973f, #f0ad4e);
	  background-image: -ms-linear-gradient(top, #f1973f, #f0ad4e);
	  background-image: -o-linear-gradient(top, #f1973f, #f0ad4e);
	  background-image: linear-gradient(to bottom, #f1973f, #f0ad4e);
	  color:#fff;
	  text-shadow: 1px 1px 3px #656565;
}
.btn.btn-orange:hover{background:#e37b16;}
.btn.btn-red{
	background: #f26e6e;
	background-image: -webkit-linear-gradient(top, #f26e6e, #e95a5a);
	background-image: -moz-linear-gradient(top, #f26e6e, #e95a5a);
	background-image: -ms-linear-gradient(top, #f26e6e, #e95a5a);
	background-image: -o-linear-gradient(top, #f26e6e, #e95a5a);
	background-image: linear-gradient(to bottom, #f26e6e, #e95a5a);
	color:#fff;
	text-shadow: 1px 1px 3px #656565;
}.btn.btn-red:hover{background:#ef4d4d}

button::-moz-focus-inner {
    padding: 0;
    border: 0
}
.btn-group,.btn-group-radio,.btn-group-check{
	position:relative;
	font-size:0px;	
    display: inline-block;
    vertical-align: middle;
}
	.btn-group button,.btn-group-radio button,.btn-group-check button{border-radius:0; margin:0 1px 0 0}
	.btn-group button:first-child,.btn-group-radio button:first-child,.btn-group-check button:first-child{border-top-left-radius:5px; border-bottom-left-radius:5px;}
	.btn-group button:last-child,.btn-group-radio button:last-child,.btn-group-check button:last-child{border-top-right-radius:5px; border-bottom-right-radius:5px;}
	button.checked{
  		background-image:none;
    	cursor:wait !important;
  		pointer-events: none;
    box-shadow: inset 0 2px 4px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.08);
	}
	button.selected{
		background-color:#B2B2B2 !important;
  		background-image:none;
    	box-shadow: inset 0 2px 4px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.05);
	}
	.btn-group a{
		border:1px #DFDFDF solid;
		padding:8px 11px;	
		display:inline-block;
		font-size:13px;
		color:#111;
		background-color:#FBFBFB;
		text-decoration:none;
	}
	.btn-group a:active{
		background-color: rgba(244,222,111,1.00)
	}
	.btn-group a i{padding:1px 1px;}
	.btn-group a:first-child{border-top-left-radius:5px; border-bottom-left-radius:5px;}
	.btn-group a:last-child{border-top-right-radius:5px; border-bottom-right-radius:5px;}
	
.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
    cursor: not-allowed;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .65;
}
/******************************************************************
******************************************************		LABEL and Info */

.label{
    display: inline;
    padding: 3px;
    font-size: 75%;
    font-weight: 600;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;	
}
	.label-default{
		background-color: #777;	
	}
	.label-blue{
		background-color: #337ab7;	
	}
	.label-green{
		background-color: #5cb85c;	
	}
	.label-info{
		background-color: #5bc0de;		
	}
	.label-orange{
		background-color: #f0ad4e;		
	}
	.label-red{
		background-color: #d9534f !important;		
	}
/**************************
/**************************	Exemple of use
/**************************
	<div class="info info-success">
		<div class="info-success-icon">
			<i class="fa fa-check" aria-hidden="true"></i> 
		</div>
		<div class="info-message"> 
		<b> Merci </b> E-Mail a été enregistré
		</div>
	<a href="#" class="close" data-dismiss="info" aria-label="close">&times;</a>
	</div>

	<div class="info info-error"><div class="info-error-icon"><i class="fa fa-ban" aria-hidden="true"></i> </div><div class="info-message"><b> Error </b> Valeurs Incorrectes</div></div>

    <div class="info info-alert"><div class="info-alert-icon"><i class="fa fa-info" aria-hidden="true"></i> </div><div class="info-message"> Votre compte n\'est pas activé!</div></div>
****************/

.info{
	display:block;
	margin: 0 auto;
	padding:6px 20px;
	width:100%;
	font-size:14px;
  
}
	.info-success{background:#dff0d8; color:#3c763d; border-color:#d6e9c6}
	.info-success-icon{display:inline-block; color:#CC6; font-size:16px; padding-right: 10px;}
	.info-message{font-size:12px; display:inline-block; margin-right:5px}
	.info-error{background:#fe1301; color:#fff; border-color:#edccd1}
	.info-error-icon{display:inline-block; color:#Fff; font-size:16px; padding-right: 10px;}
	.info-alert{background:#0370b5; color:#fff; border-color:#47b6fc}
	.info-alert-icon{display:inline-block; color:#FFF; font-size:16px; padding-right: 10px;}

.info .close{
	float: right;
	text-decoration: none;
	color: white
}
/*************************************
**************************************	TOOLTIP
**************************************/

/****** Exemple of use
/*********************
	
	<div class="thisToolTip dashed">
	
		<button class="hasToolTip">click me (1)</button>
		<div class="toolTip hide bottom"> 
			click me (1) Bottom <span></span>
		</div>
		<div class="toolTip hide top"> 
			click me (1) top <span></span>
		</div>
		<div class="toolTip hide right"> 
			click me (1) right <span></span>
		</div>
		
	</div>
	
**********************/

.thisTooolTip{
	position:relative;
	display:inline-block;
}
.tooolTip{
	background:#F00;
	color:#fff;
	padding:3px 5px;
	border-radius: 4px;
	position:fixed;
	width:auto;
}
.tooolTip.bottom{
	margin-top:9px
}
.tooolTip.top{
	margin-top:-56px
}

/* Not yet finshed */
.tooolTip.right{
	position:fixed;
	right:0
}

.tooolTip span{
	position:absolute;
	width:10px;
	height:10px;
	background-color:#f00;
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067690849304, M12=0.7071067690849304,M21=-0.7071067690849304, M22=0.7071067690849304,sizingMethod='auto expand');
	z-index:0;	
}
.tooolTip.bottom span{
	border-top:#f00 1px solid;
	border-left:#f00 1px solid;
	left:7px; top:-5px;

}
.tooolTip.top span{
	border-bottom:#ff0 1px solid;
	border-right:#ff0 1px solid;
	left:7px; top:20px;
}
.tooolTip.right span{
	border-bottom:#ff0 1px solid;
	border-left:#ff0 1px solid;
	left:-5px; top:9px;
}

	
	/************************************************************************
*************************************************************************    PAGINATOR     */
	.paginator{display:inline-block}
	.paginator ul{margin:0; padding:0;}
	.paginator ul li{margin:0; padding:0; list-style:none; display:inline}
	.paginator ul li a{
		display:inline-block;
		text-decoration:none;
		border: solid 1px #c0c0c0;
		border-radius: 0.25em;
		text-decoration:none;
		color:#333;	
	  	padding: 5px 10px; line-height:normal;
	  	font-size:12px;
  box-shadow: inset 0px 1px 0px rgba(255,255,255, .7), 0px 1px 3px rgba(0,0,0, .1);
  text-shadow: 1px 1px 0px rgba(255,255,255, 0.7);
	}.paginator ul li a:hover{background-color:#3cb0fd; color:#FFF; transition:all .3s}
	.paginator ul li a.active{
		background-color:#3cb0fd; color:#FFF;
	  	-webkit-transform: scale(0.9);
		pointer-events: none;
	}
	.paginator ul li a.disabled {
	  	background-color:#ededed !important;
		cursor:wait !important;
	  	pointer-events: none;
	}
	.paginator ul li a.current {
	  /* selected number */
	  background-color: #64a281;
	  border-color: #64a281;
	  color: #ffffff;
	  pointer-events: none;
	}

	/************************************************************************
*************************************************************************    PROGRESS     */
	.progress{
		height: 20px;
		margin-bottom: 20px;
		overflow: hidden;
		background-color: #f5f5f5;
		border-radius: 4px;
		-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
		box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
	}
	.progress-bar{
		float: left;
		width: 0;
		height: 100%;
		font-size: 12px;
		line-height: 20px;
		color: #fff;
		text-align: center;
		background-color: #337ab7;
		-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
		box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
		-webkit-transition: width .6s ease;
		-o-transition: width .6s ease;
		transition: width .6s ease;	
	}
/************************************************************************
*************************************************************************    BREADSCRUMB     */	
/* HOW TO USE */
/*	<div id="bc1" class="myBreadcrumb">
		<a href="#" class="active"><i class="fa fa-home fa-2x"></i></a>
		<div>...</div>
		<a href="#"><div>label 1</div></a>
		<a href="#"><div>A very very long label 2 to truncate</div></a>
		<a href="#"><div>label 3</div></a>
		<a href="#"><div>A very very long label 4 to truncate</div></a>
		<a href="#"><div>label 5</div></a>
		<a href="#"><div>label 6</div></a>
	</div>
*/
	.myBreadcrumb {
	display: inline-block;
	/*box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35);*/
	overflow: hidden;
	border-radius: 5px;
	border:#ededed 2px solid;
}

.myBreadcrumb > * {
	text-decoration: none;
	outline: none;
	display: block;
	float: left;
	font-size: 10px;
	line-height: 36px;
    color: black;
	/*need more margin on the left of links to accomodate the numbers*/
	padding: 0 10px 0 30px;
	background: white;
	position: relative;
    transition: all 0.5s;
}

.myBreadcrumb > * div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;    
}

/*since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links*/
.myBreadcrumb > *:first-child {
	padding-left: 10px;
	border-radius: 5px 0 0 5px; /*to match with the parent's radius*/
}

.myBreadcrumb >*:first-child i {
    vertical-align: sub;
}

.myBreadcrumb > *:last-child {
	border-radius: 0 5px 5px 0; /*this was to prevent glitches on hover*/
	padding-right: 20px;
    padding-right: 8px;
}

/*hover/active styles*/
.myBreadcrumb a.active, .myBreadcrumb a:hover{
	background:#9EEB62;
}
.myBreadcrumb a.active:after, .myBreadcrumb a:hover:after {
	background: #9EEB62;
}

/*adding the arrows for the myBreadcrumbs using rotated pseudo elements*/
.myBreadcrumb > *:after {
	content: '';
	position: absolute;
	top: 0; 
	right: -18px; /*half of square's length*/
	/*same dimension as the line-height of .myBreadcrumb a */
	width: 36px; 
	height: 36px;
	/*as you see the rotated square takes a larger height. which makes it tough to position it properly. So we are going to scale it down so that the diagonals become equal to the line-height of the link. We scale it to 70.7% because if square's: 
	length = 1; diagonal = (1^2 + 1^2)^0.5 = 1.414 (pythagoras theorem)
	if diagonal required = 1; length = 1/1.414 = 0.707*/
	transform: scale(0.707) rotate(45deg);
    -ms-transform:scale(0.707) rotate(45deg);
    -webkit-transform:scale(0.707) rotate(45deg);
    
	/*we need to prevent the arrows from getting buried under the next link*/
	z-index: 1;
	/*background same as links but the gradient will be rotated to compensate with the transform applied*/
	background:#9EEB62;
	/*stylish arrow design using box shadow*/
	box-shadow: 
		2px -2px 0 2px rgba(0, 0, 0, 0.4), 
		3px -3px 0 2px rgba(255, 255, 255, 0.1);
	/*
		5px - for rounded arrows and 
		50px - to prevent hover glitches on the border created using shadows*/
	border-radius: 0 5px 0 50px;
    transition: all 0.5s;
}
/*we dont need an arrow after the last link*/
.myBreadcrumb > *:last-child:after {
	content: none;
}
/*we will use the :before element to show numbers*/
.myBreadcrumb > *:before {
	/*some styles now*/
	border-radius: 100%;
	width: 20px;
	height: 20px;
	line-height: 20px;
	margin: 8px 0;
	position: absolute;
	top: 0;
	left: 30px;
    background: white;
	background: linear-gradient(#444, #222);
	font-weight: bold;
    box-shadow: 0 0 0 1px #ccc;
}

.myBreadcrumb > *:nth-child(n+2) {
  display:none;
}


@media (max-width: 767px) {
    .myBreadcrumb > *:nth-last-child(-n+4) {
        display:block;
    } 
    .myBreadcrumb > * div {
        max-width: 100px;
    }
}

@media (min-width: 768px) {
    .myBreadcrumb > *:nth-last-child(-n+6) {
        display:block;
    } 
    .myBreadcrumb > * div {
        max-width: 175px;
    }
}