@import url('https://fonts.googleapis.com/css?family=Roboto');

html, body{
	font-family: 'Roboto', sans-serif;
	color:#656565;
	height:100%;
}
body{
	position:relative;
}
body:after{
	position:fixed;
	bottom:0;
	left:0;
	content:'';
	height:250px;
	width:250px;
	background:url('../images/fond.png') bottom left no-repeat;
	background-size:contain;
	opacity: 0.2;
	z-index: -1;
}

strong{
	font-weight: bold;
}
a{
	color:inherit;
}
.gris{
	background:#f7f7f6;
}
h1{
	font-size:1.6em;
	margin:auto;
	line-height: inherit;
	margin:5px auto;
}
h1 .material-icons{
	display:inline-block;
	vertical-align: middle;
	margin-right:5px;
}
h2{
	font-size:0.7em;
	margin:auto;
	line-height: inherit;
}
h3{
	margin: 20px auto 0;
    text-align: center;
    font-size: 1.2em;
}
#main_content{
	padding:20px 10px;
}

.modal{
	width:95%;
}
.modal p{
	margin:5px auto;
}
.modal .content_modal{
	margin:20px auto;
}
.modal{
	top:50% !important;
	left:50%;
	transform: translate(-50%, -50%) scaleX(0) scaleY(0) !important;
}
.modal.open{
	transform: translate(-50%, -50%) scaleX(1) scaleY(1) !important;
}
.row{
	margin-bottom:10px;
}

.card{
	margin:10px auto;
}
.card .card-title{
	background: #003e57;
    text-align: center;
    color: #FFF;
    font-size: 1.4em;
    padding: 10px;
}
.card .card-content p{
	text-align:center;
}
.card .text-card-content{
	margin: 10px auto 25px;
}

#principal{display: none;}
table{
	background:rgba(255, 255, 255, 0.7);
}
.row .col{
	padding:0;
}
/* ===============================================================================================
OVERLAY LOADER
===================================================================================================*/
#overlay_loader{
	position:absolute;
	top:0;
	left:0;
	background:rgba(0, 0, 0, 0.9);
	height:100%;
	width:100%;
	z-index: 2;
	display:none;
}
#overlay_loader #infos_loader{
	margin:auto;
	color:#FFF;
	text-align: center;
}
#overlay_loader img{
	margin:10px auto 0;
	width:100px;
	display:block;
}
/* ===============================================================================================
CONNEXION
===================================================================================================*/
#connexion{
	display:none;
}
#connexion #encart_connexion{
	margin:auto;
	width:100%;
	text-align:center;
}
#logo_connexion{
	width:150px;
}

/* ===============================================================================================
HEADER + MENU
===================================================================================================*/
header{
	color: #fff;
	background-image: linear-gradient(90deg, #003e57, #1f6c8c);
	position:relative;
}
header>i{
	color:#FFF;
	display:inline-block;
	vertical-align: middle;
	margin:10px;
}
header>div{
	display:inline-block;
	vertical-align: middle;
	margin:10px auto;
}
header #nom_personne{
	font-size: 1em;
    margin: auto;
    color: #FFF;
}
header p{
	font-size: 0.8em;
    margin: 5px auto 0;
    color: #FFF;
}
.sidenav-trigger{
	position:absolute;
	right:10px;
	top:50%;
	transform: translateY(-50%);
	height:24px;
}
.sidenav-trigger i{
	color:#FFF;
}
.sidenav{
	background:#003e57;
	height:100%;
	width:250px;
}
.sidenav li>a{
	color:#FFF;
	text-align: right;
	border-bottom:1px solid #FFF;
	cursor:pointer;
}
.sidenav li:first-child{
	margin-top:58px;
}
.sidenav li:first-child>a{
	border-top:1px solid #FFF;
}
.sidenav #btn_deconnexion{
	position:absolute;
	bottom:10px;
	right:10px;
	padding:0;
	color:#FFF;
	height:28px;
	width:28px;
	cursor:pointer;
}


.sidenav #btn_deconnexion i{
	font-size:2em;
}
.sidenav>.sidenav-close{
	display:block;
	top:15px;
	right:10px;
	position:absolute;
	padding:0;
}
.sidenav-close i{
	color:#FFF;
	font-size:2em;
}

/* ===============================================================================================
LISTE CHANTIERS
===================================================================================================*/
.container_bouton{
	margin:20px auto;
	text-align: center;
}
.container_bouton.align_left{
	text-align: left;
}
.btn i, .afficher_historique i{
	vertical-align: middle;
	margin-right:6px;
	line-height:normal;
	font-size:1.2em;
	margin-bottom:2px;
}
.afficher_historique{
	color:#66a530;
	cursor:pointer;
	font-weight: bold;
}
#liste_chantiers #main_content>h1 i{
	transform:rotate(180deg);
}
.infos_chantiers{
	margin: auto;
    overflow: hidden;
    border-bottom: 1px solid #dfdfdf;
    padding: 20px 0;
}
.infos_chantiers>span{
	background:#9692a8;
	padding:15px;
	border-radius:5px;
	color:#FFF;
	border: 1px solid rgba(0, 0, 0, 0.2);
	display: inline-block;
	vertical-align: middle;
	min-width: 76px;
    text-align: center;
}
.infos_chantiers>p{
	float:right;
	margin:16px auto;
}

.collapsible{
	border:none;
	border-radius: 5px;
    overflow: hidden;
	margin:10px auto;
}
.collapsible .plus_collapsible{
	height:14px;
	width:14px;
	margin-right:14px;
	position:relative;
}
.collapsible .plus_collapsible:before{
	display:block;
	width:2px;
	height:100%;
	content:'';
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	background:#FFF;
	transition:0.2s ease;
}

.collapsible .plus_collapsible:after{
	display:block;
	height:2px;
	width:100%;
	content:'';
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	background:#FFF;
}
.collapsible li.active .plus_collapsible:before{
	transform:translate(-50%, -50%) rotate(90deg);
}
.keyboard-focused .collapsible-header:focus{
	background:#6078b3;
}
.collapsible-header{
	background:#1f6c8c;
	color:#FFF;
	padding:20px 15px;
	position:relative;
	display:block;
	line-height:normal;
}
.collapsible-header span{
	display: inline-block;
	vertical-align: middle;
}
.collapsible-header i{
	color:#FFF;
}
.collapsible_boutons{
	position:absolute;
	right:5px;
	top:50%;
	transform:translateY(-50%);
	height:22px;
}
.collapsible-body{
	padding:20px;
	background:#FFF;
}

#table_materiel label{
	width:100%;
	display:block;
}
#table_materiel input[type="text"]{
	width:100%;
	max-width:200px;
	display:inline-block;
	margin-right:10px;
}
/* ===============================================================================================
BASE DOCUMENTAIRE VUE
===================================================================================================*/
#retour_liste{
	text-align: right;
	margin:auto;
}
#retour_liste i{
	display:inline-block;
	vertical-align: middle;
	margin-right:5px;
}
#container_lien_doc{
	text-align:center;
	margin:20px auto;
}
#container_lien_doc a{
	border: 2px solid #ddd;
    border-radius: 5px;
    margin: 10px auto;
    padding: 20px;
    background: #e6e6e6;
    width: 80%;
    display: inline-block;
    vertical-align: middle;
	overflow:auto;
}

/* ===============================================================================================
BASE DOCUMENTAIRE VUE 2
===================================================================================================*/
.lien_pdf{
	display:block;
}
.lien_pdf img{
	width:50px;
	margin:auto;
	display:block;
}

.btn_red{background: #9c3328;}

.dropdown-content li:first-child>a, .dropdown-content li:first-child>span{
	color:#ff4747;
}
.dropdown-content li>a, .dropdown-content li>span{
	color:#656565;
}
strong i{
	vertical-align: middle;
	margin-bottom:2px;
}
@media screen and (max-width: 600px) {
	.table_responsive{
		border:none;
	}
    .table_responsive, .table_responsive thead, .table_responsive tbody, .table_responsive th, .table_responsive td, .table_responsive tr { 
		display: block; 
	}
	.table_responsive tr:nth-child(even) {
		background: #EDEDED !important;
	}
	.table_responsive thead{
		display:none;
	}
	.table_responsive thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	.table_responsive tbody tr { 
        border:none;
		height:auto;
    }
    .table_responsive thead tr{
		display:none;
    }
	.table_responsive td { 
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50% !important;
        min-height:18px;
		white-space: normal;
		height:auto;
	}
    .table_responsive tr:nth-child(even) td{
        border-bottom: 1px solid #FFF;
    }
	.table_responsive td:before { 
		position: absolute;
		top: 50%;
		left: 0;
        transform:translateY(-50%);
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
		font-weight:bold;
		padding-left:5px;
	}
	.table_responsive .col{
		float:none;
	}
	
	#table_conducteurs td:nth-of-type(1):before { content: "Véhicule"; }
	#table_conducteurs td:nth-of-type(2):before { content: "Matin";}
	#table_conducteurs td:nth-of-type(3):before { content: "Après-midi"; }

	#table_materiel td:nth-of-type(1):before { content: "Matériel"; }
	#table_materiel td:nth-of-type(2):before { content: "Pointage actuel";}
	#table_materiel td:nth-of-type(3):before { content: "Mise à jour"; }
}