/* @override 
	http://localhost:8888/css/styles.css */



/* ==========================================================================
   Styles généraux
   ========================================================================== */

html, body {height: 100%;}


html { background-color: #e6e7e8;}


body {
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    font-size: 0.9em;
    font-weight: 300;
    line-height: 1.4;
    color: #2d3645;
    text-rendering: optimizeLegibility;
    
    }


a {color: inherit; text-decoration: none;}

a:hover {text-decoration: none; font-weight: inherit;}

a:visited { color: inherit;}

ul {
	list-style-type: none;
	padding: 0;
}

.left {float: left;}
.right {float: right;}

h1,h2,h3,h4,h5,h6 {font-weight: 400;}

.smaller {font-size: 80%;}

p,
pre {
    margin: 1em 0;
}

input[type="submit"], button {
    /* Pour forcer l'utilisation de la bonne police */
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}


fieldset p {
	display: table-row;
	padding: 1em 0;
	vertical-align: middle;
}

label {
	width: 200px;
	display: table-cell;
	padding: 1em;
}


button {
	margin: 0.6em auto;
}

input[type="text"], input[type="tel"], input[type="url"], input[type="email"], input[type="number"] {
	display: table-cell;
	width: 300px;
	height: 22px;
	color:inherit;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	font-weight: 400;
	border: 1px solid #aaa;
}

.datepicker {
    width:6em !important;
}

input.short {
	width: 180px;
}


input:focus {
	border: 1px solid #45536a;
}


h2 {font-weight: 600; font-size: 1.5em; letter-spacing: -1px;}



@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
 	-ms-transform: rotate(0deg);
     transform: rotate(0deg);
  }
  to { 
    -webkit-transform: rotate(359deg);
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    -ms-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}



.browsehappy {
	background-color: #e33f39;
	color: white;
	width: 850px;
	padding: 1.2em 2em;
	margin-left: 250px;
}


td {padding: 0.5em 0.8em; text-align: left;}


/* Ajoute le sigle euros après les porteurs de cette classe */ 
.euros::after {
		content: '€';
		padding-left: 0.3em;
		text-align: right;
	}

td.euros, td.prices {
	text-align: right;
}



/* BOUTONS */

.add-btn {
	border: 1px solid #74ac25;
	padding: 0.5em 1em;
	font-weight: 300;
	margin: 0.6em auto;
	background-color: #b8f75e;
	background-image: -webkit-linear-gradient(bottom, #8ec63f, #b8f75e);
	background-image: -moz-linear-gradient(bottom, #8ec63f, #b8f75e);
	background-image: -o-linear-gradient(bottom, #8ec63f, #b8f75e);
	background-image: linear-gradient(to top, #8ec63f, #b8f75e);
	}
	
.add-btn:hover {
	background-color: #8ec63f;
	background-image: -webkit-linear-gradient(top, #8ec63f, #b8f75e);
	background-image: -moz-linear-gradient(top, #8ec63f, #b8f75e);
	background-image: -o-linear-gradient(top, #8ec63f, #b8f75e);
	background-image: linear-gradient(to bottom, #8ec63f, #b8f75e);
}

.add-btn:active {
	background-color: #8ec63f;
	background-image: none;	
}	
	
.add-btn::before {
	content: '\e804';
	font-family: "fontello";
	margin-right: .6em;
	display: inline-block;
}



.remove-btn {
	border: 1px solid #1d2634;
	padding: 0.5em 1em;
	color: white;
	font-weight: 300;
	margin: 0.6em auto;
	background-color: #505e76;
	background-image: -webkit-linear-gradient(bottom, #343f51, #505e76);
	background-image: -moz-linear-gradient(bottom, #343f51, #505e76);
	background-image: -o-linear-gradient(bottom, #343f51, #505e76);
	background-image: linear-gradient(to top, #343f51, #505e76);
}


.remove-btn:hover, .save-btn:hover {
	background-color: #505e76;
	background-image: -webkit-linear-gradient(top, #343f51, #505e76);
	background-image: -moz-linear-gradient(top, #343f51, #505e76);
	background-image: -o-linear-gradient(top, #343f51, #505e76);
	background-image: linear-gradient(to bottom, #343f51, #505e76);
}


.remove-btn:active, .save-btn:active {
	background-image: none;
	background-color: #343f51;	
	}

.remove-btn::before {
	content: '\e805';
	font-family: "fontello";
	margin-right: .6em;
}


.save-btn {
	background-color: #343f51;
	border: 1px solid #1d2634;
	padding: 0.5em 1em;
	color: white;
	font-weight: 300;
	margin: 1em auto;
}

.save-btn::before {
	content: '\e81F';
	font-family: "fontello";
	margin-right: .6em;
}

.gold-btn {
	border: 1px solid #d49242;
	padding: 0.5em 1em;
	font-weight: 300;
	margin: 0.6em auto;
	background-color: #f3a649;
	background: #f2c84b;
	background: -moz-linear-gradient(top,  #f2c84b 0%, #f3a649 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2c84b), color-stop(100%,#f3a649));
	background: -webkit-linear-gradient(top,  #f2c84b 0%,#f3a649 100%);
	background: -o-linear-gradient(top,  #f2c84b 0%,#f3a649 100%);
	background: -ms-linear-gradient(top,  #f2c84b 0%,#f3a649 100%);
	background: linear-gradient(to bottom,  #f2c84b 0%,#f3a649 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2c84b', endColorstr='#f3a649',GradientType=0 );
	
}

.gold-btn:hover {
	background-color: #d49242;
	background: #f3a649;
	background: -moz-linear-gradient(top,  #f3a649 0%, #f2c84b 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3a649), color-stop(100%,#f2c84b));
	background: -webkit-linear-gradient(top,  #f3a649 0%,#f2c84b 100%);
	background: -o-linear-gradient(top,  #f3a649 0%,#f2c84b 100%);
	background: -ms-linear-gradient(top,  #f3a649 0%,#f2c84b 100%);
	background: linear-gradient(to bottom,  #f3a649 0%,#f2c84b 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3a649', endColorstr='#f2c84b',GradientType=0 );	
}

.gold-btn:active {
		background-color: #d49242;
}


/* END boutons */


.page-title {
	font-weight: 300;
	text-transform: uppercase;
	font-size: 2.2em;
	letter-spacing: -1px;
	margin-left: 65px;
}

.extension-name {
	font-weight: 600;
	letter-spacing: -1px;
	text-transform: uppercase;
}


::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #595a5d;
    margin: 1em 0;
    padding: 0;
}

img {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: both;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


.alert {
	display: block;
	text-transform: uppercase;
	text-decoration: none;
	font-size: 0.85em;
	text-align: center;
}


select {
	color: #494949;
	padding: 0.2em;
	max-width:18em;
}



/* ========================================
       ASIDE + styles généraux de MAIN
   ======================================== */



div.container {
    margin: 0;
    padding: 0;
}

aside.admin-zone {
    width: 215px;
 	position: fixed;
 	top: 0;
 	left: 0; 
    padding: 55px 0 15px 0;
    color: white;
    background-color: #45536a;
    text-align: center;
    min-height: 1000px;
}

div.content-container {
    width: 1000px;
    margin-left: 215px;
}

div.content {
	width:900px; 
	padding: 150px 30px 265px 65px;
}


.logo-white {
    width: 157px;
    height: 49px;
    margin: 0 auto;
    background: transparent url(../images/white-logo.png) no-repeat;
}

.extranet {
    text-transform: uppercase;
    text-align: center;
    font-size: 1.5em;
    font-weight: 300;
    margin: 0.2em auto 0.3em auto;
}

aside.admin-zone hr { width: 140px; margin: 0 auto 2em auto; background-color: #e6e7e8;
}


.whois p { margin: .28em auto;}

p.contact-name::before {
	content: '\e83a';
	font-weight: normal;
	font-family: "fontello";
	padding-right: 0.5em;
}



a.account {
    display: block;
    width: 130px;
    color: #45536a;
    background-color: #e6e7e8;
    border: 0;
    padding: .45em .5em;
    margin: 0.8em auto 1em auto;
}


body.account-page a.account,
a.account:hover {
   background-color: #f3a548;

}





/* -------- MAIN NAV --------- */




nav.sidenav ul {
 	padding: 0;
	display: table;
	width: 215px;
	text-align: left;
    margin-top: 3em;
    font-weight: 300;
    font-size: 0.9em;
}


nav.sidenav li {
 	display: table-row;
 }

div.ff-fix {
	position: relative;
	height: 100%;
	padding: 0;
	margin: 0;
}

 a.main-link {
    display: table-cell;
    width: 215px;
    height: 46px;
    vertical-align: middle;
    font-weight: 400;
    padding-left: 65px;
    text-transform: uppercase;
    position: relative; /* Pour positionner les span.arrow (indicateur de position) */
    border-top: 1px solid #45536a; /* on attribut une bordure de la même couleur que le fond pour que 2 btn contigus n'aient pas l'air de "fusionner" lors les hover*/
}
 
 
 a.main-link:hover,
 body.admin-centrex a.admin,
 body.order-page a.commandes,
 body.invoice-page a.factures
  {
     background-color: #f3a649;
     color: #494949;
     font-weight: 400;
 }


a.main-link span {display: block; width: 140px; line-height: 1.2em;}

/*Les 6 blocks ci-dessous pour
afficher les icônes correspondantes */

a.admin::before { 
	content: '\e800';
	font-family: 'fontello';
	font-size: 1.7em;
	position: absolute;
	top: 8px;
	left: 20px;
	font-weight: 300;
}

a.services::before { 
	content: '\e81e';
	font-family: 'fontello';
	font-size: 1.7em;
	position: absolute;
	top: 8px;
	left: 20px;
	font-weight: 300;
}

a.tickets::before { 
	content: '\e801';
	font-family: 'fontello';
	font-size: 1.7em;
	position: absolute;
	top: 8px;
	left: 20px;
	font-weight: 300;
}

a.commandes::before { 
	content: '\e80e';
	font-family: 'fontello';
	font-size: 1.7em;
	position: absolute;
	top: 8px;
	left: 20px;
	font-weight: 300;
}

a.factures::before { 
	content: '\e825';
	font-family: 'fontello';
	font-size: 1.7em;
	position: absolute;
	top: 8px;
	left: 20px;
	font-weight: 300;
}

a.support::before { 
	content: '\e821';
	font-family: 'fontello';
	font-size: 1.7em;
	position: absolute;
	top: 8px;
	left: 20px;
	font-weight: 300;
}


/*Pour dessiner le petit triangle de positionnement en css pur*/
a.main-link span.arrow {
    display: none;
    font-size: 0;
    line-height: 0;    
    width: 0px;
    height: 0px;
    border: 0;
    border-style: solid;
    border-width: 15px 15px 15px 0;
    border-color: transparent #e6e7e8 transparent transparent;
    /* On remet une deuxième ligne en RGBA pour contrer un bug
    de FF qui applique une légère bordure grise au triangle. 
    On maintient la ligne en hexa pour la retro-compatibilité 
    avec les anciens navigateurs. Voir ici : 
    http://stackoverflow.com/questions/13630886/firefox-17-and-css-borders-based-triangles-not-rendering-properly */
    border-color: rgba(230, 231, 232, 0) #e6e7e8 rgba(230, 231, 232, 0) rgba(230, 231, 232, 0);
     
    position: absolute;
    top: 9px;
    right: -6px;
}

a.main-link:hover span.arrow,
body.admin-centrex a.admin span.arrow,
body.order-page a.commandes span.arrow,
body.invoice-page a.factures span.arrow
 { display: block;}



/* ------ END main nav ------- */


aside.help-bar {
	text-align: right;
	font-size: 0.9em;	
}


aside.help-bar nav ul {
	margin: 0;
	padding-top: 0.5em;
}

aside.help-bar nav ul li {
	display: inline-block;
}


aside.help-bar a:hover {
	text-decoration: underline;
}

div.content-container header {
	background-color: rgba(230,231,232,0.8);//#e6e7e8;
	position: fixed;
	width: 1000px;
	height: 50px;
	z-index: 100;

}


nav.centrex-admin {
	width: 90%;
	margin: 2em auto 1.5em auto;
	display: table;
	background-color: white;
}


nav.centrex-admin ul {
	padding: 0;
	display: table-row;
	border-top: 1px solid;	
}

nav.centrex-admin ul div {
	display: table-cell;
	width: 0;
	padding: 0;
	margin: 0;
	
}





nav.centrex-admin li {
	display: table-cell;
	font-family : 'Open Sans Condensed', Helvetica, sans-serif;
	font-size: 1em;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #ccc;
	height: 60px;
	position: relative;
}



nav.centrex-admin li:last-child {
	border-right: 1px solid #ccc;
}

nav.centrex-admin li a {
	height: 45px;
	display: block;
	background-color: transparent;
	margin: 0;
	padding: 5px 10px;
	font-weight: 400;
}



body.extention-modif nav.centrex-admin li:first-child a,
nav.centrex-admin li:hover a  {
	border-bottom: 5px solid #f3a548;
}





aside.details-infos {
	width: 200px;
	padding: 1.5em 1em;
	background-color: white;
	border: 1px solid #bbb;
    position: fixed;
    top: 210px;
    left: 950px;
}

aside.details-infos ul {
	padding-left: 1em;
	color: #45536a;
}

aside.details-infos button.add-btn {
	width: 100%;

}

aside.details-infos button.save-btn {
	position: relative;
	left: 70px;
	top: 6px;

}


ul.extensions-list li a::before {	
	content: '\e808';
	font-family: "fontello";
	margin-right: .6em;
	display: inline-block;
	font-weight: 300;
}

ul.extensions-list li a:hover::before {
	-webkit-animation-name:             rotate; 
	-webkit-animation-duration:         1s; 
	-webkit-animation-iteration-count:  infinite;
	-webkit-animation-timing-function: linear;
	-moz-animation-name:             rotate; 
	-moz-animation-duration:         1s; 
	-moz-animation-iteration-count:  infinite;
	-moz-animation-timing-function: linear;
	-o-animation-name:             rotate; 
	-o-animation-duration:         1s; 
	-o-animation-iteration-count:  infinite;
	-o-animation-timing-function: linear;
}


form#modif-ext-form {
	width: 650px;
	margin-top: 2em;
}

form#modif-ext-form .save-btn {
	margin-top: 2em;
}



/* =======================
       PAGE SERVICES
   ======================= */

/*.option {
	width: 195px;
	height: 80px;
	float: left;
	margin: 2em;
	background-color: white;
	padding: 20px;
	border-left:  50px solid #45536a;
	position: relative;
	-webkit-box-shadow: 0px 0px 4px 0px #aaa; /* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 *!/
	box-shadow: 0px 0px 4px 0px #aaa; /* Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+ *!/
}

.option h2 {
	margin: 0 auto 0.5em auto;
	font-weight: 400;
	font-size: 1.3em;
}

.option p {
	font-style: italic;
}

.option::before {
	display: block;
	position: absolute;
	top: 70px;
	left:-35px;
	color: white;
	font-weight: 700;
	font-size: 2em;
}
 .option:first-child::before {
 	content: '1';
 	
 }

.option:nth-child(2)::before {
	content: '2';
}

.option:nth-child(3)::before {
	content: '3';
}

.option:nth-child(4)::before {
	content: '4';
}

.option:nth-child(5)::before {
	content: '5';
}

.option:nth-child(6)::before {
	content: '6';
}

.option:nth-child(7)::before {
	content: '7';
}

.option:nth-child(8)::before {
	content: '8';
}
*/






/* ====================
    PAGE MON COMPTE
   ==================== */


fieldset.cards {	
	width: 640px;
	margin: 0em auto 5em 1em;
	background-color: white;
	border: 1px solid #b1b1b1;
	padding: 2em;
	position: relative;
	-webkit-box-shadow: 1px 1px 1px 0px #b1b1b1;
	        box-shadow: 1px 1px 1px 0px #b1b1b1;
	
	}

body.account-page fieldset p label {
	padding: 0.5em;
}


.cards h2 {
	font-size: 1.3em;
	font-weight: 600;
	letter-spacing: -0.06em;
	margin-top: 0;	
}

.cards::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	border: 1px solid #b1b1b1;
	width: 100%;
	height: 100%;
	z-index: -2;
	background-color: white;
	-webkit-transform: rotate(-1.5deg);
	-moz-transform: rotate(-1.5deg);
	-ms-transform: rotate(-1.5deg);
	-o-transform: rotate(-1.5deg);
	transform: rotate(-1.5deg);
	-webkit-box-shadow: 1px 1px 1px 0px #b1b1b1;
	        box-shadow: 1px 1px 1px 0px #b1b1b1;
}

.cards::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	border: 1px solid #b1b1b1;
	width: 100%;
	height: 100%;
	z-index: -1;
	background-color: white;
	-webkit-transform: rotate(1.5deg);
	-moz-transform: rotate(1.5deg);
	-ms-transform: rotate(1.5deg);
	-o-transform: rotate(1.5deg);
	transform: rotate(1.5deg);	
}


/* ========================
    PAGE MES COMMANDES
   ======================== */

.blue-box {	
	width: 90%;
	min-height: 150px;
	background: #ccdbec url(../images/big-basket.png) 600px 40% no-repeat;
	border: 1px solid #bbb;
	padding: 1.5em 2em;
	position: relative;
	margin-bottom: 5em;
}

.titlelevel2 {
	margin-top: 0;
	color: #6897d8;
}


.current-order h2::before,
.commande-detail h2::before {
	font-family: "fontello";
	content: '\e82d';
	font-weight: 300;
	padding-right: 0.8em;	
}


.current-order a {
	position: relative;
	top: -45px;
	left: 550px;	
}




.order-total {
	background-color: white;
	padding: 0.3em 0.8em;
	border: 1px solid #ccc;
	color: #e33f39;
	font-weight: 400;
}

.order-status {
	font-style: italic;
}


.white-box {
	width: 90%;
	min-height: 150px;
	background-color: white;
	border: 1px solid #bbb;
	padding: 1.5em 2em 3.5em 2em;
	position: relative;
	margin-bottom: 5em;
	position: relative;
}

.order-history h2::before
{
	content: '\e80c';
	font-family: "fontello";
	font-weight: normal;
	padding-right: 0.6em;	
}


.white-box table {
	width: 100%;
	margin-top: 2.5em;
}

.white-box table thead tr th {
	padding-bottom: 1em;
	text-align: left;
	padding-left: 0.8em;
}

tbody tr {
	border-bottom: 1px solid #bbb;
}

.current-order tbody tr {
	border-bottom: 0
}

.current-order td.euros {
	text-align: left;
}


td.price {
	color: #e33f39;
	text-align: right;
	padding-right: 3em;
	font-weight: 400;
}



td.download a::before {
	font-family: "fontello";
	content: '\e82f';
	padding-right: 0.5em;
}

/*td.download a:hover::before {
	font-family: "fontello";
	content: '\e834';
	padding-right: 0.5em;
	font-weight: normal;
}*/


td.ref a::before {
	font-family: "fontello";
	content: '\e830';
	padding-right: 0.5em;
}

.invoices h2 {
	margin-bottom: 4em;
}

.invoices h2::before,
.invoice-detail h2::before
 {
	font-family: "fontello";
	content: '\e825';
	padding-right: 0.8em;
	font-weight: normal;
}

.filigrane::after {
	width: 100%;
	height: 100%;
	font-family: "fontello";
	content: '\e825';
	display: block;
	position: absolute;
	top: 0em;
	left: 7em;
	color: #ccc;
	opacity: 0.8;
	font-size: 7em;
	z-index: 100;
}

td.qte {
	text-align: right;
	padding-right: 4em;
}

tr.total {border: 0;}


section.invoice-detail {
	background:  white url('../images/logo-celyop.png') no-repeat 2em 2em;
	padding-top: 6em;
}


div.destinataire {
	width: 30%;
	position: absolute;
	top: 2em;
	right:2em;
}

section.invoice-detail table {
	margin-top: 5em;
}

span.ste {
	font-size: 1.3em;
	font-weight: 400;
}

.invoice-detail th:nth-child(3),
.invoice-detail th:last-child {
	text-align: right;
}

.invoice-detail th:last-child{
	padding-right: 3em;
}

tr.total {border: 0; vertical-align: bottom;}


tr.total:first-child {
	height: 5em;
}

tr.total td:first-child {
	width: 75%;
}

tr.total td {
	padding-right: 3em;
	text-align: right;
}

tr.total:last-child td:first-child {
	padding-right: 2.5em;
}

tr.total:last-child td:last-child {
	padding-right: 2em;
	text-align: right;
}


tr.total:last-child, tr.total:last-child td.euros {
	font-weight: 700;
	font-size: 1.2em;
	vertical-align: baseline;
}


p.order-validation {
	padding-left: 1em;
}
p.order-validation span {
	color: #6897d8;
}

table.resume {
	width: 40%;
	font-weight: 400;
	background-color: #ccdbec;
	position: absolute;
	top: 0;
	right: 1em;
}

table.resume td:last-child {
	text-align: right;
	padding-right: 1em;
}

table.resume tbody tr {
	border: 0;
}

table.resume td {
	padding: 0.2em 1em;
}

section.commande-detail table tr:last-child {
	border: none;
}

p.destinataire {
	padding-left: 1em;
	margin-bottom: 5em;
}



/* ================
    LOGIN SCREEN
   ================ */

section.login-zone {
    background-color: white; 
    width: 250px;
    height: 440px;
    margin: 100px auto;
    border: 1px solid #c6c7c7;
    padding: 55px;
    -moz-box-shadow: 1px 1px 1px #818181;
    -webkit-box-shadow: 1px 1px 1px #818181;
    box-shadow: 1px 1px 1px #818181;
    filter: progid:DXImageTransform.Microsoft.Shadow(strength = 1, direction = 135, color = '#818181');
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(strength = 1, Direction = 135, Color = '#818181')";
}

section.login-zone p {
    display: block;
    text-align: center; 
}


section.login-zone form {
	margin-top: 55px;
}


input#login, input#password {
    width: 188px;
    margin: 8px auto;
    padding: 10px 30px; 
    background-color: #dcdedf;
    border: 1px solid #c2c3c3;
    font-family: 'Open Sans', sans-serif;
    color: #2f4269;
}

#connect-btn {
	width: 250px;
	margin: 20px auto;
	padding: 15px 30px;
	background-color: #2f4269;
	border: 0;
	color: white;
	font-weight: 300;
	text-transform: uppercase;
}

#connect-btn:hover {
	background-color: #1e3157;
	font-weight: 300;
}

#connect-btn:active {
	background-color: #36445f;
    -moz-box-shadow: inset 0px 0px 15px 5px #1e3157;
    -webkit-box-shadow: inset 0px 0px 15px 5px #1e3157;
    box-shadow: inset 0px 0px 15px 5px #1e3157;

	
}

.logo-color { 
	background: transparent url(../images/logo-celyop.png) no-repeat;
	width: 210px;
	height: 65px;
	}

body.login h1.logo-color {
	margin: 0 auto 70px auto;
}

::-webkit-input-placeholder { font-weight: 400; font-size: 0.9em; color: #aaa; }







/* ===============
   IE Fixes
   =============== */



/* ==========================================================================

   ========================================================================== */













/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}


/*********************************************************************************************
 * Tout ce qui vient après
 * = SURCHARGES + nouveaux styles OG
 * TODO : Réintégrer les surcharges
**********************************************************************************************/

a.main-link {
	padding-right:10px;
}


a.main-link div.icon {
	font-family: 'fontello';
	font-size: 1.7em;
	font-weight: 300;
	width:1em;
	height:1em;
	text-align:center;
	position:absolute;
	top:7px;
	left:15px;
}

a.main-link.courant {
	background-color: #f3a649;
	color: #494949;
	font-weight: 400;
}

a.account.courant {
	background-color: #f3a649;
	color: #494949;
	font-weight: 400;
}

a.main-link.courant span.arrow {
	display: block;
}

a.page_sp, span.page_sp {/* lien page suivante /prec */
    display : inline-block;
    background:#45536a;
    color:white;
    padding:0.05em 0.8em 0.2em 0.5em;
    vertical-align : middle;
    letter-spacing:-0.3em;
    border-radius :0.2em;
    font-weight: bold;
}

.pagec {
	background: #45536a;
	color: white;
	padding: 0.15em 0.3em;
	border-radius: 0.2em;
	font-weight : bold;
}

a.pagec:visited {
	background: #45536a;
	color: white;
}

aside.admin-zone{
	border:0;
	overflow:auto;
	min-height:100%;
	height:100%;
}

aside.admin-zone::-webkit-scrollbar {
	width:0;
}

.usernav {
	padding-bottom:40px;
}

div.bottommenu{
    width:100%;
    position: relative;
    bottom:0px;
    text-align:center;
    margin-right:2em;
}

nav.centrex-admin li {
	width:10em;
}

nav.centrex-admin li.courant a {
	border-bottom: 5px solid #f3a548;
}

fieldset.cards {
	margin-top :5em;
}

/* PAGE LOGIN */

body.login h1.logo-color {
	margin: 0 auto 30px auto;
}
div#message{
	min-height:50px;
	margin:0 auto;
	font-weight:bold;
	text-align:center;
}

div.erreur{
	color:red;
}

div.info{
	color:green;
}

section.login-zone form {
margin-top: 35px;
}

section.login-zone {
	height:470px;
}

div.content {
    width: 900px;
//    padding: 100px 30px 10px 65px;
}

table.appels{
    margin:1em 0;
}

table.appels tbody tr td {
    text-align:right;
    padding-left : 0px;
    padding-right : 2em;
}

header#message.erreur{
    display: block;
    margin:1em;
    padding:1em;
    font-size:2em;
    border:solid 5px red;
}

body.erreur {
    margin : 1em;
}

table {
    margin:1em 0;
}

table thead tr th {
    vertical-align : bottom;
}

table thead tr th.last {
    text-align : left;
    padding-left:1em;
    width:100%;
}

table thead tr th.incline {
    transform: rotate(60deg);
    vertical-align:middle;
}


table tbody tr td {
    padding : 2px 5px 2px 5px;
    white-space: nowrap;
}

table tbody tr td.num {
    text-align : right;
}

div#last_messages {
    float:left;
    width:680px;
    overflow: hidden;
    border:1px solid #ccc;
    height:1.2em;

    margin: 0.2em 3.5em;
    font-weight:bold;
    background-color : white;
    padding : 0 2em;
    height: 2.4em;

}


div#list_messages{
    margin-top : 5em;
    padding : 1em;
    font-size: 0.85em;
    font-weight:bold;
    background-color : white;
    border : 2px inset lightgray;
}

div#message_object{
    margin-top: 5em;
    font-weight:bold;
    background-color : white;
    padding : 0.5em;
}

div#message_body{
    white-space: pre-wrap;
    margin-top: 0.5em;
    font-weight:bold;
    background-color : white;
    padding : 0.5em;
    min-height : 10em;
}

.message_level_noise {
    color :darkgray;
}
.message_level_notice {
    color :blue;
}
.message_level_alert {
    color :orange;
}
.message_level_critical {
    color :red;
}

/*************************************************************************
Table générale
*/

table tbody tr th {
    text-align : right;
    white-space : nowrap;
}

/*************************************************************************
Tables Services
*/

table.services {
    width : 100%;
}

table.services thead tr th {
    text-align : right;
    vertical-align : middle;
    padding-right : 2em;
}

table.services thead tr td {
    padding : 0.2em 1em;
    white-space : nowrap;
    font-weight : bold;
}

table.services thead tr td.sep {
}

table.services tbody tr th {
    text-align : left;
}

table.services tbody tr td {
    text-align : right;
    padding-right : 5em;
}

table.services tbody tr td.sep {
}


table.services tbody tr td input {
    width : 2em;
}

/* SELECT2 */

.select2-results__option {
  cursor: pointer;
  font-size: 0.7em;
  font-weight: bolder;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #444;
  line-height: 28px;
  font-size: 0.9em;
  font-weight: bolder;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid #aaa;
  font-size: 0.8em;
  font-weight: bolder;
  width:99%;
}