/*!
 * CSS Principal IN TIME

 */
* {
	box-sizing:border-box;
	-moz-box-sizing:border-box;
}

body {
	background:url(../img/strip-lite.png);
	color:#333;
}

#content {
	max-width:1000px;
	padding:20px;
	margin:auto;
	position:relative;
}

.img-max {
	max-width:100%;
}

/* CSS Document */
.left {
	text-align:left;
}

.center {
	text-align:center;
}

.right {
	text-align:right;
}

.nowrap {
	white-space:nowrap;
	overflow:hidden;
}

.jqhide{
	display: none;
	}


/* POUR LES POPINS */
#popupSemiTrans {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url(../img/semi_trans_motif.png) repeat fixed;
	z-index:100;
	display:none;
}

#ajax-wait {
	position:absolute;
	top:50%;
	left:50%;
	width:86px;
	height:86px;
	border-radius:50%;
	margin-left:-43px;
	margin-top:-43px;
	border:2px solid #000;
	background:url(../img/ajax_wait.gif) no-repeat center center;
	display:none;
}



/*******************************************************
/*******************************************************
/*******************************************************
/*******************************************************
/*******************************************************
/*******************************************************
/*******************************************************/
/* IN TIME */
#logo {
	margin-bottom:30px;
}

p {
	margin:0;
	padding:0;
}

.bold {
	font-weight:700;
}

.italic {
	font-style:italic;
}

.noWrap {
	white-space:nowrap;
}

.clear {
	clear:both;
}

#logo {
	position:relative;
}

#fleex-ges {
	position:absolute;
	top:3px;
	right:0;
	text-align:right;
}

#fleex-ges span {
	font-size:2em;
	font-weight:700;
}

#fleex-ges a {
	color:#666;
	font-size:1.2em;
	font-weight:700;
}

#fleex-ges a:hover {
	color:#999;
	text-decoration:none;
}

/*******************************************************
/*******************************************************
/*******************************************************
/*******************************************************/
/* IN TIME */
.current-job {
	text-align:center;
}

.job-detail {
	margin:auto;
	max-width:600px;
	border-radius:5px;
	padding:7px 15px;
	color:#fff;
	background:#900;
	background:linear-gradient(#c00,#f00);
	text-shadow:0 -1px 0 #000;
	text-align:left;
	font-size:1.3em;
	position:relative;
}

.job-titre {
	font-size:2em;
}

.job-contrat {
	font-size:1.4em;
	color:#DDD;
}

.job-sous-titre {
}

.job-timer {
	text-align:center;
	font-size:4em;
	font-weight:400;
}

/*******************************************************
/*******************************************************
/*******************************************************
/*******************************************************/
/*Déplacement */
#deplacement {
	color:#333;
	padding:5px 10px;
	font-size:1.5em;
	text-transform:uppercase;
	text-shadow:none;
	border:1px solid #333;
	cursor:pointer;
	text-align:center;
	margin-bottom:10px;
	border-radius:5px;
}

.depla-on {
	box-shadow:inset 0 0 10px green;
	background:#b0efb0;
}

.depla-off {
	box-shadow:none;
	background:#DDD;
}

.depla-button {
	font-weight:700;
	border:2px solid #333;
	padding:0 3px;
	background:#666;
}

.depla-off #deplacementOFF {
	border-color:red;
	color:red;
	background:#FFF;
}

.depla-on #deplacementON {
	border-color:green;
	color:green;
	background:#FFF;
}

/*******************************************************
/*******************************************************
/*******************************************************
/*******************************************************/
/* Rapport Anomalies */
#add-reporting {
	display:block;
	text-align:center;
	background:#DDD;
	color:#333;
	padding:5px 10px;
	font-size:1.5em;
	text-transform:uppercase;
	text-shadow:none;
	border:1px solid #333;
	margin-bottom:10px;
	border-radius:5px;
}

#add-reporting:hover {
	background:#b0efb0;
	text-decoration:none;
}

#reporting {
	display:none;
	padding:10px;
	background:#DDD;
	border-radius:5px;
	color:#333;
	text-shadow:none;
}

#reporting textarea {
	border-radius:5px;
	width:100%;
	height:75px;
	border:none;
}

#reporting a {
	display:inline-block;
	border-radius:5px;
	width:30%;
	border:2px solid #333;
	text-align:center;
	padding:5px;
	margin:3px;
	color:#333;
	font-weight:700;
}

#reporting a:hover {
	text-decoration:none;
}

#reporting a.red {
	background:#f09c9c;
}

#reporting a.green {
	background:#b0efb0;
}

#reporting a.repano {
	background:#FFF;
}

a#select-ano.actif {
	background:red;
	color:#fff;
}

a#select-report.actif {
	background:green;
	color:#FFF;
}

/*******************************************************
/*******************************************************
/*******************************************************
/*******************************************************/
/* Selection de jobs */
.select-job {
	text-align:center;
	padding-top:50px;
}

.select-job a {
	display:inline-block;
	width:40%;
	margin:10px;
	max-width:600px;
	border-radius:5px;
	padding:10px 19px;
	color:#fff;
	background:#2062d5 linear-gradient(#2939b1,#5062eb);
	font-size:2em;
	box-shadow:1px 1px 3px #333;
	position:relative;
}

.select-job a:hover {
	text-decoration:none;
	box-shadow:0 0 13px 5px #1bce36;
}

.select-job a:active {
	text-decoration:none;
	color: white !important; 
	background: black !important;
}

.select-job a.petit {
	font-size:1.5em;
}

.select-job a.trespetit {
	font-size:1em;
}

.select-job a.gris {
	background:#666;
	background:linear-gradient(#333,#666);
}

.select-job a.pc100 {
	margin: auto;
	margin-top:10px;
	margin-bottom: 10px;
	width:100%;

}

.select-job a span {
	display:block;
	width:30px;
	height:30px;
	background:red;
	border-radius:15px;
	color:#FFF;
	position:absolute;
	top:-15px;
	right:-15px;
	text-align:center;
	font-size:.5em;
	padding:3px;
}


.lite{ font-size: 1em !important;  }



#descript-job-container{  position: absolute !important; display: none; }



.check-job{ background: #ffffff !important; color:#000 !important; font-weight: bold; border: 2px solid #000;}


.active-lite{ border: #00ff12 4px solid; color:#000 !important; background: #87f4a2 !important; }

.active-lite.blink{ border: #fbff00 4px solid; color:#FFF !important; background: #f6088f !important;}


.select-job a.connectas {
	background:#000 linear-gradient(#666,#aaa);
}

/*.select-job a.dooh {
	background:#000 linear-gradient(#000,#666);
}

.select-job a.euromobile {
	background:#d71a58 linear-gradient(#d71a58,#d75580);
}

.select-job a.view1media {
	background:#d71a58 linear-gradient(#2970b2 0%, #4ab3f3 100%);
}*/

.select-job a.fin-journee {
	background: red linear-gradient( #991111, #d74a4a);
}
.select-job a#rapports{
	background:url(../img/fond_papier_ligne.jpg); color: #071962; 
}
.select-job a#encodage{
	background: #C9F linear-gradient( #C9F, #93F); 
}
.select-job a.interne {
	background:#dbcf07 linear-gradient(#dbcf07,#f5ed72);
	color:#333;
}

.select-job a.run {
	background:#1c9309 linear-gradient(#1c9309,#5cda48);
	color:#333;
}

.select-job a.annuler {
	background:#b91212 linear-gradient(#b91212,#f04848);
}

.select-job a.creer {
	background:#1c9309 linear-gradient(#1c9309,#5cda48);
}

@media screen and (max-width: 1000px) {
	.select-job a {
		width:100%;
		margin:10px 0;
	}
	.select-job{padding-top:0px;}
	}
	
	#div-end-job {
		background:url(../img/trans_70.png) repeat;
		position:absolute;
		width:100%;
		min-height:100%;
		border-radius:5px;
		top:0;
		left:0;
		z-index:10;
		text-align:center;
		display:none;
		padding:10px;
	}
		#job-libre-divwidth:100%;
	}	
}

.pointer {
	cursor:pointer;
}

#div-end-job a,a.small-link {
	display:block;
	border-radius:5px;
	font-size:2em;
	border:2px solid #fff;
	color:#fff;
	text-align:center;
	width:60%;
	margin:auto;
	margin-bottom:20px;
	padding:10px;
	font-weight:700;
}

a.small-link {
	border-color:#333;
}

#div-end-job a.oui,a.small-link.oui {
	background:green;
}

#div-end-job a.non,a.small-link.non {
	background:red;
}

#div-end-job a.annuler,a.small-link.annuler {
	background:#3789e7;
}

#div-end-job a:hover,a.small-link:hover {
	text-decoration:none;
	box-shadow:0 0 13px 6px #4483db;
}

.big-end {
	font-size:3em;
	padding:10px;
}

/*******************************************************
/*******************************************************
/*******************************************************
/*******************************************************/
/* Liste des jobs */
.job-list,.job-list-retour, .list-users , a.admin-tools {
	background:#0C0 linear-gradient(#060,#0C0);
	border:1px solid #333;
	border-radius:5px;
	display:block;
	max-width:600px;
	margin:auto;
	padding:10px;
	text-shadow:0 -1px 0 #000;
	color:#FFF;
	cursor:pointer;
	margin-bottom:20px;
	min-height:100px;
	position: relative;
}
.list-users{ min-height: 1px;}

.job-list-retour {
	background:#0096cc linear-gradient(#304ba1 0%,#0096cc 100%);
	min-height:0;
	text-align:center;
	font-size:2.4em;
	text-transform:uppercase;
	font-weight:700;
}

.list-users {
	background:#0096cc linear-gradient(#304ba1 0%,#0096cc 100%);
	text-align: center;
	font-size: 2em;
	min-height: auto;
	position: relative;
	}

.unset-user{
	 position: absolute; 
	 right: -1px;
	 top: 50%;
	 margin-top: -24px;
	 background: url(../img/unset-user-icon.png) no-repeat;
	 width: 48px;
	 height: 48px;
	 
	
	}
#all-users .unset-user{
	display: none;
	}
	

.job-list .job-titre {
	width: auto;
	text-align:center;
}

#job-list-contener{ margin: auto; max-width: 600px;}


#admin-tools-contener{
	max-width: 600px;
	margin: auto;	
}
a.admin-tools{
	background:#0096cc linear-gradient(#304ba1 0%,#0096cc 100%);
	min-height:0;
	text-align:center;
	text-transform:uppercase;
	font-weight:700;
	width:auto;
}

#admin-tools-contener div{
	width: 50%;
	display: inline-block;
	padding-right: 10px;
}
#admin-tools-contener div:last-child{ padding: 0;}



.move-grip, .edit-job{
	background: url(../img/move-icon.png) no-repeat;
	width: 48px;
	height: 48px;
	position: absolute;
	right: 5px;
	top: 5px;
	display: none;
	}
	
.edit-job{
	background: url(../img/edit-icon.png) no-repeat;
}

.job-list:hover,.job-list-retour:hover, a.admin-tools:hover {
	box-shadow:0 0 13px 5px #4285F4;
	color:#FFF;
	text-decoration:none;
}

/*******************************************************
/*******************************************************
/*******************************************************
/*******************************************************/
/* Jobs libres */
#job-libre-contener {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	padding:10px;
	display:none;
}

#job-libre-div {
	border:1px solid #333;
	border-radius:5px;
	position:absolute;
	min-height:350px;
	z-index:100;
	background:#FFF;
	padding:10px;
	font-size:1.6em;
}

#job-libre-div textarea,#job-libre-div input {
	width:100%;
	border-radius:5px;
	border:1px #666;
	border-style:solid;
	font-size:1.5em;
	color:#333;
}

#job-libre-div input {
	text-align:center;
}

@media screen and (max-width: 999px) {
	#job-libre-div {
		position:relative;
	}
	
	#job-libre-div textarea,#job-libre-div input {
		max-width:600px;
	}
	
	.contrat-list {
		max-width:600px;
	}
}

@media screen and (min-width: 1000px) {
	#job-libre-div {
		width:600px;
		top:10px;
		left:50%;
		margin-left:-300px;
	}
}

#job-libre-div h1 {
	font-size:2.5em;
	font-weight:400;
}

#job-libre-donneur {
	text-transform:uppercase;
	font-weight:700;
}

#lier-contrat {
	font-size:1.5em;
	width:100%;
	margin:10px 0;
}

/*******************************************************
/*******************************************************
/*******************************************************
/*******************************************************/
/* Lsite des contrats*/
.contrat-list {
	border:1px solid #666;
	border-radius:5px;
	display:none;
	margin:auto;
	padding:10px;
	position:relative;
}

.ajax-wait-contrat {
	background:url(../img/semi_trans_motif.png) repeat fixed;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:100;
	display:none;
}

.ajax-wait-contrat-anim {
	position:absolute;
	top:50%;
	left:50%;
	width:84px;
	height:84px;
	border-radius:50%;
	margin-left:-42px;
	margin-top:-42px;
	border:2px solid #000;
	background:url(../img/ajax_wait.gif) no-repeat center center;
}

.contrat-item, .user-item {
	cursor:pointer;
	border:#666 2px solid;
	border-radius:5px;
	padding:10px;
	margin: auto;
	margin-bottom:5px;
	position:relative;
	color:#fff;
	text-shadow:1px 1px 0 #000;
	background:#3451f4;
	max-width: 600px;
}

.contrat-item .nom {
	font-weight:700;
}

.contrat-item .numero {
	position:absolute;
	top:0;
	left:5px;
	font-size:.8em;
}

.contrat-item .date {
	position:absolute;
	top:0;
	right:5px;
	font-size:.8em;
}

.contrat-item.actif, #selected-users .user-item {
	background:#269E13;
}



.user-item.ouvrier, .list-users.ouvrier{
		background: #d3490c linear-gradient(#d3490c 0%, #e8954d 100%);
	}


.user-item.technique, .list-users.technique{
		background: #890b5b linear-gradient(#890b5b 0%, #ea2c98 100%);
}
	
.user-item.planning, .list-users.planning{
		background: #086808 linear-gradient(#086808 0%, #0caf0e 100%);
	}

.user-item.compta, .list-users.compta{
		background: #940ce8 linear-gradient(#940ce8 0%, #c56bde 100%);
	}

.user-item.commercial, .list-users.commercial{
		background: #7a7502 linear-gradient(#7a7502 0%, #d4d715 100%);
	}

.user-item.tous{ font-size: 0.8em; padding: 3px; margin: 3px 0 20px;  width: 100%}
	
	
.user-add-other, #user-hide-all{ display:block; background: #666 linear-gradient(#000, #666);}


/* POINTAGE********/

#pointage{
	position: relative;
	height: 620px;
	cursor: pointer;


}

#pointeuse{
	height: 429px;
	width: 414px;
	background: url(../img/pointeuse.png) no-repeat;
	margin: auto;
	position: absolute; 
	bottom: 0px;
	left: 50%;
	margin-left: -214px;
	}

#heure-pointeuse, #date-pointeuse{
	text-align: center;
	position: absolute;
	top:68px;
	left: 60px;
	width: 305px;
	height: 122px;
	color: #0ff92a;
	text-shadow: 0px 0px 7px #0ff92a;
	font-weight: bold;
	font-size: 5em;
}
#date-pointeuse{
	font-size: 1.5em;
	top: 54px;
	left: 92px;
	text-align: left;
	font-weight: normal;
}
#carte-pointage{
	background: url(../img/carte_pointage.png) no-repeat;
	height: 328px;
	width: 250px;
	position: absolute;
	top:0;
	left: 50%;
	margin-left: -125px;

}
#nom-carte-pointage{
	width: 198px;
	position: absolute;
	left: 26px;
	top:24px;
	font-weight: bold;
	font-size: 2em;
	color: #333;
	
}
@media screen and (max-width: 600px) {
	#pointage{
	transform:scale(.5);
	height: 350px;
	}
	#carte-pointage{ top:-210px;}

}




#confirm-prest{ display: inline-block; width: 32px; height: 32px; background: url(../img/confirm.png) no-repeat left top; position: absolute; top:5px; right: 5px;}

#confirm-prest.need{ background-position: right top;}