html,
button,
input,
select,
textarea {
    color: #222;
}
input:focus,select:focus,textarea:focus {
	outline: none;
}

/* INPUT */
select, input[type=text], input[type=file], textarea{
	background: #ffffff;
	border: 2px solid #e0dede;
	color: #202121;
	font-size: 1.3rem;
	margin: 0;
	outline: medium none;
	padding: 1rem;
	
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
}
textarea {
	width: 100%;
	max-height: 130px;
	min-height: 100px;
}
select:focus, input[type=text]:focus, input[type=file]:focus, textarea:focus,
select:hover, input[type=text]:hover, input[type=file]:hover, textarea:hover {
	border: 2px solid #ddda1a;
}

input[type=radio] {
	border : none !important;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block;
}

html {
    font-size: 62.5%;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width:100%;
	max-width:100%;
	min-height:100%;
}

*, *:before, *:after {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}


body {
    margin:0 auto;
	min-height:100%;
	width:100%;
	font-size: 1.4rem;
	background: #eeeeee none repeat scroll 0 0;
	font-family: 'Source Sans Pro', sans-serif;
	color: #202121 ;
}
body.connexion {
	background: #202121  none repeat scroll 0 0;
}

/* SEPARATEUR */
hr {
	background: rgba(0,0,0,0.3) none repeat scroll 0 0;
	border: 0 none;
	display: inline-block;
	height: 1px;
	left: 50%;
	margin: 2rem 0;
	position: relative;
	width: 25%;
	
	-webkit-transform: translate(-50%, 0);
	-moz-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
}

audio,
canvas,
img,
video {
    vertical-align: middle;
}

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

textarea {
    resize: vertical;
}

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

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

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

.invisible {
    visibility: hidden;
}

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

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

.left{
	float: left;
}

.right{
	float: right;
}

.center{
	text-align: center,
}

.clear{
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
	margin: 0;
}

.wrapper{
	position: relative;
	width:1000px;
	margin: 0 auto;
	clear:both;
}

img {
	max-width:100%;
}

a, a:before, a:after, .btnContainer .btn[class*="icon-"] {
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	
	text-decoration: none;
}
a {
	#333
}

#fullContent a:not(.btn) {
	color: #848585;
}
#fullContent a:hover {
	color: #595959 ;
}

#recherche input, #bg-noir, .lightbox, select, input[type=text], input[type=file], textarea {
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.alignLeft {
	text-align: left;
}

.alignRight {
	text-align: right;
}

.center {
	text-align:center;
}

/* ==========================================================================
   Shortcodes
   ========================================================================== */
.wrapCol {
	font-size: 0;
}
   
.col_1_2 {
	width:50%;
	display:inline-block;
	line-height:1rem;
	font-size: 1.4rem;
	vertical-align: top;
	padding: 0 2rem 0 0;
}
.col_1_2 + .col_1_2 {
	padding: 0 0 0 2rem;
}
.col_1_3 {
	width:33.3334%;
	display:inline-block;
	line-height:1rem;
	font-size: 1.4rem;
	vertical-align: top;
}

/* ==========================================================================
   Styles generaux
   ========================================================================== */

/* PAGE DE CONNEXION */
.connexion body {
    background: #202121  none repeat scroll 0 0;
}
.connexion #container {
    height: auto;
	left: 50%;
	margin: 0;
	position: absolute;
	top: 50%;
	width: auto;
	
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.connexion #logo {
	display: inline-block;
	margin: 0 0 3rem;
	padding: 0 0 3rem;
	/* border-bottom: 1px solid rgba(255,255,255,0.1); */
	position: relative;
}
.connexion #logo:after {
	background: rgba(255, 255, 255, 0.2) none repeat scroll 0 0;
	bottom: 0;
	content: "";
	height: 1px;
	left: 50%;
	position: absolute;
	width: 50%;
	
	-webkit-transform: translate(-50%, 0px);
	-o-transform: translate(-50%, 0px);
	-moz-transform: translate(-50%, 0px);
	transform: translate(-50%, 0px);
}
h1 {
    margin: 0;
}
.connexion #container p {
    color: #fff;
    font-size: 2rem;
    letter-spacing: 2px;
    margin: 5rem 0 0;
    text-align: center;
    text-transform: uppercase;
}
.connexion footer {
    background: #d9ea30 none repeat scroll 0 0;
    bottom: 0;
    position: fixed;
    width: 100%;
}
.connexion footer > div {
    margin: 0 auto;
    width: 960px;
}
.connexion footer > div a {
    color: #111111;
    font-size: 1.2rem;
    line-height: 11px;
    padding: 2rem 0;
    text-decoration: none;
}
.connexion footer > div a:hover {
    text-decoration: underline;
}
/* Formulaire */
.connexion form {
	display: inline-block;
	text-align: center;
	width: 100%;
}
.connexion form > span {
	border-bottom: 1px solid rgba(255, 255, 255, 0.6);
	display: block;
	position: relative;
	width: 100%;
}
.connexion form > span + span {
	margin: 0 0 2rem;
}
.connexion form input {
	border: 0 none;
	border-bottom: 1px solid rgba(255,255,255,0);
	background: transparent none repeat scroll 0 0;
	color: #fff;
	display: inline-block;
	font-size: 1.4rem;
	font-weight: 400;
	padding: 1rem 0;
	width: 100%;
	letter-spacing: 2px;
	border-radius: 0px;
		
	-webkit-transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
	-moz-transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
	-o-transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
	transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
	
}
.connexion form label {
	font-size: 0;
	position: absolute;
	right: 0;
	top: 50%;
	
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-o-transform: translateY(-50%);
}
.connexion form input + label::before {
	color: #fa4436;
	font-size: 1.4rem;
	vertical-align: middle;
	
	-webkit-transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
	-moz-transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
	-o-transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
	transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
.connexion form input:hover, .connexion form input:active, .connexion form input:focus {
	border: 0 none!important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.6)!important;
	border-radius: 0px;
}
.connexion form input:-webkit-autofill {
	background-color: background: transparent none repeat scroll 0 0 !important;
}
.connexion form input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 60px #222 inset;
	-webkit-text-fill-color: #fff;
}

.btnContainer {
	text-align: center;
}
.btnContainer .btn {
	min-width: 150px;
	max-width: 250px;
	display: inline-block;
	border: 0 none;
	vertical-align: middle;
	position: relative;
	z-index: 1;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 2px;
	
	padding: 1rem 2rem;
	background: #ddda1a;
	color: #202121;
	overflow: hidden;
	
	-webkit-transition: background-color 0.3s;
	-moz-transition: background-color 0.3s;
	transition: background-color 0.3s;
	/* border: 2px solid; */
	
	-moz-border-radius:40px;
	-webkit-border-radius:40px;
	border-radius:40px;
	
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
}
.btnContainer .btn:focus {
	outline: none;
}
.btnContainer .btn > span {
	display: inline-block;
	vertical-align: middle;
	opacity: 0;
	color: #1e1e1e;
	width: 6px; /* taille pour le letter spacing */
	
	-webkit-transform: translate3d(0, -10px, 0);
	-moz-transform: translate3d(0, -10px, 0);
	transform: translate3d(0, -10px, 0);
	
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	
	-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
	transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.btnContainer .btn::before {
	content: attr(data-text);
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	padding: 1em 0;
	
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	
	-moz-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
	-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
	transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.btnContainer .btn:hover {
	background-color: #fff;
	color: #1e1e1e;
}
.btnContainer.backGris .btn:hover {
	background: #e4e4e4 none repeat scroll 0 0;
}
.btnContainer .btn:hover::before {
	opacity: 0;
	
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
/* SPECIF BUTTON ICON */
.btnContainer .btn[class*="icon-"]:before {
	height: 35px;
	line-height: 35px;
	padding: 0;
	vertical-align: middle;
	width: 35px;
	color: #fff;
}
.btnContainer .btn[class*="icon-"]:hover:before {
	opacity: 1;
	
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.btnContainer .btn[class*="icon-"] {
	background: #232323 none repeat scroll 0 0;
	display: inline-block;
	font-size: 1.5rem;
	height: 35px;
	min-width: 35px;
	text-align: center;
	padding: 0;
	
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}
.btnContainer .btn.icon-z-remove[class*="icon-"] {
	background: #e74c3c none repeat scroll 0 0;
	font-size: 1rem;
}
.btnContainer .btn.icon-z-optical[class*="icon-"], .btnContainer .btn.icon-z-cloture[class*="icon-"] {
	background: #ddda1a none repeat scroll 0 0;
}
.btnContainer .btn.icon-z-optical:before, .btnContainer .btn.icon-z-cloture:before {
	color: #202121;
}
.btnContainer .btn[class*="icon-"]:hover {
	opacity: 0.7;
}

.btnContainer .btn:hover > span {
	opacity: 1;
	
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.btnContainer .btn:hover > span:nth-child(1) {
	-webkit-transition-delay: 0.045s;
	transition-delay: 0.045s;
}
.btnContainer .btn:hover > span:nth-child(2) {
	-webkit-transition-delay: 0.09s;
	transition-delay: 0.09s;
}
.btnContainer .btn:hover > span:nth-child(3) {
	-webkit-transition-delay: 0.135s;
	transition-delay: 0.135s;
}
.btnContainer .btn:hover > span:nth-child(4) {
	-webkit-transition-delay: 0.18s;
	transition-delay: 0.18s;
}
.btnContainer .btn:hover > span:nth-child(5) {
	-webkit-transition-delay: 0.225s;
	transition-delay: 0.225s;
}
.btnContainer .btn:hover > span:nth-child(6) {
	-webkit-transition-delay: 0.27s;
	transition-delay: 0.27s;
}
.btnContainer .btn:hover > span:nth-child(7) {
	-webkit-transition-delay: 0.315s;
	transition-delay: 0.315s;
}
.btnContainer .btn:hover > span:nth-child(8) {
	-webkit-transition-delay: 0.36s;
	transition-delay: 0.36s;
}
.btnContainer .btn:hover > span:nth-child(9) {
	-webkit-transition-delay: 0.405s;
	transition-delay: 0.405s;
}
.btnContainer .btn:hover > span:nth-child(10) {
	-webkit-transition-delay: 0.45s;
	transition-delay: 0.45s;
}
.btnContainer .btn:hover > span:nth-child(11) {
	-webkit-transition-delay: 0.495s;
	transition-delay: 0.495s;
}
.btnContainer .btn:hover > span:nth-child(12) {
	-webkit-transition-delay: 0.54s;
	transition-delay: 0.54s;
}

/* PAGE INTERIEURS */

/* header */
header {
	position: fixed;
	left: 0;
	height: 100%;
	top: 0;
	width: 200px;
	background: #202121 ;
}
header .logo {
	padding: 2rem 2rem 5.5rem 2rem;
	display: inline-block;
	border-bottom: 1px solid rgba(255,255,255, 0.25);
}
header ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
header ul > li > a {
	color: #fff;
	display: inline-block;
	width: 100%;
	border: 0 none;
	border-left: 3px solid rgba(255,255,255,0);
	border-bottom: 1px solid rgba(20, 21, 21, 0.4);
	padding: 1.5rem 0 1.5rem 2.5rem;
}
header ul > li > a:before {
	margin: 0 1.5rem 0 0;
}
ul li > ul {
	position: relative;
}
ul li > ul:before {
	position: absolute;
	content: "";
	left: 3rem;
	top: 0;
	height: calc(100% - 1.7rem);
	background: #fff;
	width: 1px;
}
ul li > ul > li {
	position: relative;
}
ul li > ul > li:before {
	position: absolute;
	content: "";
	left: calc(3rem + 1.3rem / 2);
	top: 50%;
	height: 1px;
	background: #fff;
	width: 1.3rem;
	
	-webkit-transform: translate(-50%, 0);
	-moz-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
}
ul li > ul > li > a {
	padding: 1rem 0 1rem 5.5rem;
	border: 0 none;
	font-size: 1.2rem;
	font-weight: 300;
}
header ul.parent > li > a:hover, header ul.parent > li.active > a {
	border-left: 3px solid #ddda1a;
	background: #424d60;
}
header ul.parent > li > ul > li > a:hover, header ul.parent > li > ul > li.active > a {
	color: #ddda1a;
}

/* content */
main {
	height: 100%;
	margin: 0 0 0 200px;
	width: calc(100% - 200px);
}
#entete {
	/* height: 80px; */
	background: #fff;
	padding: 0 0 0 5rem;
	
	-webkit-box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.15);
	-moz-box-shadow:    0px 2px 1px -1px rgba(0, 0, 0, 0.15);
	box-shadow:         0px 2px 1px -1px rgba(0, 0, 0, 0.15);
}
#entete a {
	color: #333;
}
#entete > div {
	display: inline-block;
}
#entete .breadcrumb {
	padding: 5rem 0 0;
	font-weight: 300;
	font-size: 1.8rem;
}
#entete .breadcrumb span {
	border-bottom: 2px solid #202121 ;
	padding: 0 0 1px 0;
}
#entete .tools {
	padding: 2rem 5rem 2rem 0;
}
#entete .tools .account {
	margin: 0 3rem 0 0;
	line-height: 2rem;
	vertical-align: middle;
}

#main-content {
	padding: 3.5rem 5rem;
}
#main-content > div {
	background: #fff;
	border: 1px solid #e5e5e5;
	/* padding: 2rem; */
	
	-webkit-border-radius: 1px;
	-moz-border-radius: 1px;
	border-radius: 1px;
}

/* LISTE TICKETS */
#recherche {
	display: inline-block;
	margin: 1.5rem 0 0;
	text-align: center;
	width: 100%;
}
#recherche #statut {
	margin: 0 2rem 0 0;
}
#recherche input {
	background: transparent none repeat scroll 0 0;
	color: #202121 ;
	display: inline-block;
	font-size: 1.4rem;
	font-weight: 400;
	letter-spacing: 2px;
	padding: 1rem 0;
	border: 0 none;
	border-bottom: 1px solid #202121 ;
	margin: 0 2rem 0 0;
	
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
}
#recherche input:hover, #recherche input:focus {
	border-bottom: 2px solid #202121;
}
#recherche .btnContainer {
	display: inline-block;
}
#recherche .btnContainer button:hover {
	background: #e4e4e4;
}
.noticket {
	font-size: 1.8rem;
	margin: 5rem 0;
	text-align: center;
	text-transform: uppercase;
}
.noticket > span {
	display: inline-block;
	font-size: 1.4rem;
	font-style: italic;
	text-transform: none;
	width: 100%;
}
table#ticketListe {
	cursor:pointer;
	margin: 1.5rem 0 0 0;
	
}
table#ticketListe thead tr {
	background: #202121  none repeat scroll 0 0;
	color: #fff;	
}

table#ticketListe thead tr td {
	padding: 1.5rem 2rem;
	text-transform: uppercase;
}
table#ticketListe tbody tr td {
	padding: 1.5rem 2rem;
}
table#ticketListe tbody tr td.priorite, table#ticketListe tbody tr td:nth-child(1) {
	text-align: center;
}
table#ticketListe tbody tr td.priorite > div {
	display: inline-block;
	height: 2rem;
	width: 2rem;
	background: #202121;
	
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	border-radius:50%;
}
table#ticketListe tbody tr td.priorite > div.celRouge, form .priorite > span.celRouge {
	background: #f96c5c;
}
table#ticketListe tbody tr td.priorite > div.celJaune, form .priorite > span.celJaune {
	background: #ffa94d;
}
table#ticketListe tbody tr td.priorite > div.celVert, form .priorite > span.celVert {
	background: #fae42f;
}
table#ticketListe tbody tr .btnContainer {
	text-align:left;
	font-size: 1.2rem;
}
table#ticketListe tbody tr:nth-child(even) .btnContainer a:hover {
	/* background: #e4e4e4; */
}
table#ticketListe tbody tr:nth-child(odd) {
	background: #f1f1f1;
}

/**	Nouveau ticket **/
td.new span{
	font-size:1.1rem;
	font-weight:bold;
	color:red
}