body {
	font-family: Helvetica, Arial, sans-serif;
	color: #3f3731;
	margin: 0;
	word-break: break-word;
}

.box-connect h1 {
	text-align: center;
	font-size: 4em;
	margin-bottom: 2em;
	margin-top: 7rem;
}

.box-connect {
	position: absolute;
	height: 100%;
	width: 100%;
	background: rgba(255,255,255,0.3)
}

.box-log {
	display: flex;
	flex-direction: column;
	width: 22em;
	border: solid 1px gray;
	border-radius: 6px;
	box-shadow: 0px 0px 14px grey;
	margin: auto;
	padding: 1%;
	background: white;
}

.log {
	display: flex;
	flex-direction: column;
	margin-bottom: 1em;
}

.result {
	cursor: pointer;
}

label > input {
	border-radius: 10px;
	font-size: 1.3em;
	border: 1px solid grey;
}

.btn-connexion {
	outline: none;
	border: 1px solid #adadad;
	border-radius: 6px;
	padding: .2em 1em;
	font-size: 1em;
	background: #cecece;
	width: 10em;
	margin: auto;
}

.message {
	display: flex;
	justify-content: center;
	width: 60vw;
	margin: 1em auto;
		background-color: #EFEFEF;
	border-radius: 1rem;
}
#message.message span{
	flex: 0 0 3rem;
	margin: 0.5em;
}

.echaar {
	text-align: center;
	width: 10%;
}
.points {
	width: 15px;
}

#tete{
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	box-sizing: border-box;
	width: 100%;
	height: 95px;
	padding:15px;
}

 #img-logo,#logo-transporteur {
	z-index: 2;
	max-height: 95px;
	max-width: 400px;
}

#sentinel-logo{
	z-index: 2;
	max-height: 95px;
}

#sentinel-logo2{
	position: absolute;
	z-index: 2;
	width: 5%;
}

#logo-lgf{
	width: 10%;
}

#journal-expediteur {
	width: 90%; 
	border-collapse: collapse; 
	border-spacing: 0;
	margin: 3em auto;
}

.radius-left {
	border-top-left-radius: 6px;
	text-align: center;
}

.radius-right {
	border-top-right-radius: 6px;
}

.center {
	text-align: center;
}

/* .icone_afficher img {
	cursor: pointer;
	width: 14%;
} */

th {
	background: #ffd4b8;  /* Darken header a bit */
	font-weight: bold;
	padding: 0.5em;
	text-align: left;
}

td {
	padding: 2px;
	height: 26px;
}

/* Cells in odd rows (1,3,5...) are another (excludes header cells)  */
tr:nth-child(odd) {
	background: #FEFEFE;
}

/* Cells in even rows (2,4,6...) are one color */
tr:nth-child(even) { 
	background: #fff2e9; 
}

/* Section info */
h1 {
	text-align: center;
}

#info {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0.5em;
	background: lightgrey;
}

.select-info {
	outline: none;
	box-sizing: border-box;
	border: 1px solid #cdc3b7;
	border-radius: 6px;
	background: #f3ede1;
	font-family: Helvetica, Arial, sans-serif;
	padding: .2em 1em;
	font-size: 1em;
	font-weight: normal;
	color: #3f3731;
	width: 172px;
}

.select-info:hover {
	border: 1px solid #f5ad66;
	background: #f5f0e5;
	font-weight: normal;
	color: #a46313;
}

#padding-depot {
	padding-right: 30px;
}

#padding-date {
	padding-right: 39px;
}

.overflow {
	height: 200px;
}

span.depot {
	display: inline-block;
	width: 0.95rem;
	height: 0.95rem;
	text-align: center;
	border-radius: 50%;
	padding: 0.2rem;
	appearance:none;
}
span.depot.couleur0{
	background-color: #73c0e7;
}
span.depot.couleur1{
	background-color: #a17fdf;
}
span.depot.couleur2{
	background-color: #df7fd0;
}
span.depot.couleur3{
	background-color: #df7f7f;
}
span.depot.couleur4{
	background-color: #b5df7f;
}
span.depot.couleur5{
	background-color: #7fdf8f;
}

.cloture {
	outline: none;
	background: #c14447;
	border: 1px solid #f3ede1;
	color: white !important;
	padding: .0.5em;
}

.cloture:hover {
	color: #c14447 !important;
}

/* modif css jquery pour .info */
.ui-icon {
	font: 1.5em sans-serif !important;
	color: #3f3731;
	border-radius: 5px;
	background-color: #efefef;
}

.ui-icon:hover {
	box-shadow: 0px 0px 4px grey;
}

/*modif css jquery */
.ui-selectmenu-button.ui-button { 
	width: auto;
	outline: none;
}

.ui-button {
	padding: .2em 1em;
}

.ui-widget {
	font-size: 1em;
}

.ui-priority-secondary {
	opacity: 1 !important;
	outline: none;
}

.ui-priority-primary {
	outline: none;
}

.action{
	width: 8rem;
	text-align: center;
}

.fluxImpression{
	font-size: 0.8em;
}
.fluxImpression::before{
	content: ' (';
}
.fluxImpression::after{
	content: ')';
}

button{
	border: none;
	height: 2.2em;
	width: 2.2em;
	padding: 0px;
	margin-right: .5em;
	border-radius: 5px;
}
button:hover{
	box-shadow: 0px 0px 4px grey;
	cursor: pointer;
}

.hidden{
	display: none;
}

/* details des LV */
td[colspan]{
	border: none;
	padding: 0;
}
.detailsLV{
	width: 100%;
	background-color: #fff;
	border-collapse: collapse;
}
.detailsLV thead th{
	background-color: #a7d6f6;
}
/* Angles arrondis */
.detailsLV thead th:first-child{
	border-top-left-radius: 1em;
}
.detailsLV thead th:last-child{
	border-top-right-radius: 1em;
}
.detailsLV tbody > tr:last-child > th:first-child,
.detailsLV tbody > tr:last-child > td:first-child{
	border-bottom-left-radius: 1em;
}
.detailsLV tbody > tr:last-child > td:last-child{
	border-bottom-right-radius: 1em;
}

.detailsLV thead .departements,
.detailsLV thead .nbColis,
.detailsLV thead .poids{
	text-align: center;
}
.detailsLV tbody > tr:nth-child(odd){
	background-color: #e9f6ff;
}
.detailsLV tbody > tr:nth-child(even){
	background-color: #a7d6f6;
}
.detailsLV tr.chargement > td{
	text-align: center;
}
.detailsLV th.destinataire.nom{
	background: none;
}

.detailsLV td.departements,
.detailsLV td.nbColis,
.detailsLV td.poids{
	text-align: center;
}
.detailsLV td.poids::after{
	content: ' Kg';
	font-size: 0.7em;
}
.detailsLV td.action .cloture{
	background: #434cc1;
	border-color: #e1edf4;
}
.detailsLV td.action .cloture:hover {
	background: #aae1f5;
	color: #434cc1 !important;
}

@media screen and (max-width: 1280px) {
	#logo-transporteur {
		max-width: 15em;
	}
	table#journal-expediteur{
		margin:0;
		padding:0;
		width:100vw;
		box-sizing: border-box;
		border: none;
	}
	.radius-left,
	.radius-right,
	.detailsLV thead th:first-child,
	.detailsLV thead th:last-child,
	.detailsLV tbody > tr:last-child > th:first-child,
	.detailsLV tbody > tr:last-child > td:first-child,
	.detailsLV tbody > tr:last-child > td:last-child{
		border-radius: 0;
	}
	.detailsLV tbody > tr:last-child{
		border-bottom: 2px doted #A7D6F6;
	}
	.datecreation{
		text-align: center;
	}
}

/* tablette */
@media screen and (max-width: 900px) {
	/*page connexion*/
	.box-connect h1 {
		font-size : 3em;
		margin-top: 1.5em;
	}

	.box-log {
		width: 20em;
	}

	.message {
		width: 100vw;
		border-radius: 0;
		margin: 1em 0;
	}

	/* transforme le tableau en ligne */
	thead {
		display: none;
	}
	tr {
		display: grid;
		grid-template-columns: 2rem 1fr 1fr 1fr 1fr 9rem;
		grid-gap: 0.2rem;
		grid-auto-rows: minmax(1rem, auto);
		width: 100vW;
	}

	tr th,
	tr td {
		height: auto;
		align-self: end;
	}
/* Grille result */
	tr.result > td.expediteur {
		grid-row: 1;
		grid-column: 1/5;
	}
	tr.result > td.ville {
		grid-row: 1;
		grid-column: 5;
	}
	tr.result > td.depot {
		grid-row: 2;
		grid-column: 1;
	}
	tr.result > td.flux {
		grid-row: 2;
		grid-column: 2;
	}
	tr.result > td.lvClotures {
		grid-row: 2;
		grid-column: 3;
		text-align: left;
	}
	tr.result > td.lvEncours {
		grid-row: 2;
		grid-column: 4;
		text-align: left;
	}
	tr.result > td.action {
		grid-row: 2;
		grid-column: 5;
	}

	label.hidden {
		display: inline;
		font-size: 0.8em;
		font-weight: normal;
		color: #6f6f6f;
	}
	label.hidden::after {
		content: ': ';
	}
	
	/* Details des LV */
	tr td[colspan] {
		grid-row: 1;
		grid-column: 1/6;
	}
	.detailsLV .destinataire.nom{
		grid-row: 1;
		grid-column: 1/4;
		background: none;
	}
	.detailsLV .destinataire.adresse{
		grid-row: 1;
		grid-column: 4;
	}
	.detailsLV .destinataire.departements{
		grid-row: 1;
		grid-column: 5;
	}
	.detailsLV .datecreation{
		grid-row: 2;
		grid-column: 1/4;
		text-align: left;
	}
	.detailsLV .infoColis.marchandises{
		grid-row: 2;
		grid-column: 4/6;
		text-align: left;
	}
	.detailsLV .infoColis.nbColis{
		grid-row: 3;
		grid-column: 1/3;
	}
	.detailsLV .infoColis.nbColis::after{
		content: ' UM';
		font-size: 0.8em;
	}
	.detailsLV .infoColis.poids{
		grid-row: 3;
		grid-column: 3/5;
	}
	.detailsLV .action{
		grid-row: 3;
		grid-column: 5;
	}
}

/* smartphone */
@media screen and (max-width: 500px) {
	/*page connexion*/
	#img-logo {
		max-height: 2em;
	}

	.box-connect h1 {
		font-size : 2em;
		margin-top: 1.5em;
	}

	.box-log {
		width: 18em;
	}

	/*page exploitation - tableau*/
	#logo-transporteur {
		max-height: 2em;
	}

	h1 {
		margin-top: 1.5em;
		text-align: center;
	}

	#info {
		flex-direction: column;
	}

/* Grille result */
	tr {
		grid-template-columns: 2rem 1fr 1fr 1fr 1fr;
		grid-gap: 0;
	}
	tr.result > td.expediteur {
		grid-row: 1;
		grid-column: 1/5;
	}
	tr.result > td.ville {
		grid-row: 2;
		grid-column: 1/5;
	}
	tr.result > td.flux {
		grid-row: 3;
		grid-column: 1/3;
	}
	tr.result > td.lvClotures {
		grid-row: 3;
		grid-column: 3;
	}
	tr.result > td.lvEncours {
		grid-row: 3;
		grid-column: 4;
	}
	tr.result > td.depot {
		grid-row: 4;
		grid-column: 1;
	}
	tr.result > td.action {
		grid-row: 4;
		grid-column: 4;
	}
	
	/* Details des LV*/
	.detailsLV .destinataire.nom{
		grid-row: 1;
		grid-column: 1/5;
	}
	.detailsLV .destinataire.adresse{
		grid-row: 2;
		grid-column: 1/4;
	}
	.detailsLV .destinataire.departements{
		grid-row: 2;
		grid-column: 4;
	}
	.detailsLV .datecreation{
		grid-row: 3;
		grid-column: 1/4;
	}
	.detailsLV .infoColis.marchandises{
		grid-row: 3;
		grid-column: 4;
	}
	.detailsLV .infoColis.nbColis{
		grid-row: 4;
		grid-column: 1/3;
	}
	.detailsLV .infoColis.nbColis::after{
		content: ' UM';
	}
	.detailsLV .infoColis.poids{
		grid-row: 4;
		grid-column: 3;
	}
	.detailsLV .action{
		grid-row: 4;
		grid-column: 4;
	}
}
/* Petit tel */
@media screen and (max-width: 380px) {
	tr {
		grid-template-columns: 3rem 1fr 1fr;
	}
	tr.result > td.flux {
		grid-row: 3;
		grid-column: 1/4;
	}
	tr.result > td.lvClotures {
		grid-row: 4;
		grid-column: 1/3;
	}
	tr.result > td.lvEncours {
		grid-row: 4;
		grid-column: 3;
	}
	tr.result > td.depot {
		grid-row: 5;
		grid-column: 1;
	}
	tr.result > td.action {
		grid-row: 5;
		grid-column: 3;
	}

	/* Details des LV*/
	.detailsLV .destinataire.departements{
		grid-row: 2;
		grid-column: 3;
	}
	.detailsLV .datecreation{
		grid-row: 3;
		grid-column: 1/4;
	}
	.detailsLV .infoColis.marchandises{
		grid-row: 4;
		grid-column: 1/4;
	}
	.detailsLV .infoColis.nbColis{
		grid-row: 5;
		grid-column: 1;
	}
	.detailsLV .infoColis.poids{
		grid-row: 5;
		grid-column: 2;
	}
	.detailsLV .action{
		grid-row: 5;
		grid-column: 3;
	}
}