.table-hover { 
  width: 100%; 
  border-collapse: collapse;
  margin-top: 15px;  
}

.table-hover-sort { 
  display:inline-block;
  float:right;
}

.table-hover-sort-haut  { 
    display: block;
    font-size: 20px;
}

.table-hover-sort-bas {
    display: block;
    font-size: 20px;
    margin: -15px 0 0 0;
}

.table-hover tr td:first-child {
	width: fit-content;
}

/* Zebra striping */
.table-hover tr:nth-of-type(odd) { 
  background: #111111; 
}
.table-hover th { 
  background-color: lightgreen;
  color: white; 
  font-weight: bold; 
}

.table-hover-creation th { 
  background-color: #212121;
  color: white; 
  font-weight: bold; 
}

.table-hover td, .table-hover th { 
  padding: 6px; 
  border: 1px solid #000000; 
  text-align: left; 
}

.table-hover td img {
    max-width: 100px;
    vertical-align: middle;
    margin-right: 10px;
}

.table-hover tr:hover {
  background-color: #313131;
}

.table-hover-creation tr:hover {
  background-color: #313131;
}

.table-hover tr:hover span {
  color: black;
}

.table-hover a {
   color: rgba(0,156,160,1);
}

.table-hover a:hover {
  color: #eea236;
}

.table-hover .avatar {
    height: 55px;
    width: 55px;
    object-fit: cover;
	border-radius: 27px;
}

.table-hover .photo {
    height: 85px;
    object-fit: cover;
	display: inline-block;
}

.table-hover td span {
    display: inline-block;
    margin: 0 0 8px 0;
	color: lightgreen;
}

@media (max-width: 680px) {

	.table-hover table, .table-hover thead, .table-hover tbody, .table-hover th, .table-hover td, .table-hover td img, .table-hover tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	.table-hover thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	.table-hover tr { border: 1px solid #111111; }
	
	.table-hover td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #000000; 
		position: relative;
		padding-left: 50%; 
	}
	
	.table-hover td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	
.table-hover tr td:first-child {
    width: 100%;
	background: #212121;
}

.table-hover-creation tr td:first-child {
    width: 100%;
	background: #212121;
	word-break: break-all;
}

.table-hover td img {
    max-width: 100px;
    display: inline-block;
	margin-bottom: 8px;
}
	
	/*
	Label the data
	*/
	.table-hover td:nth-of-type(1):before { content: "BOT"; font-weight:bold; }	
	.table-hover td:nth-of-type(2):before { content: "DATE"; font-weight:bold; }
	.table-hover td:nth-of-type(3):before { content: "PAGE"; font-weight:bold; }
	.table-hover td:nth-of-type(4):before { content: "TYPE"; font-weight:bold; }	
	.table-hover td:nth-of-type(5):before { content: "LIEN"; font-weight:bold; }	
	.table-hover td:nth-of-type(6):before { content: "NB VISITE"; font-weight:bold; }

	.table-hover-generale td:nth-of-type(1):before { content: "PAGE"; font-weight:bold; }	
	.table-hover-generale td:nth-of-type(2):before { content: "PAYS"; font-weight:bold; }
	.table-hover-generale td:nth-of-type(3):before { content: "REGION"; font-weight:bold; }
	.table-hover-generale td:nth-of-type(4):before { content: "VILLE"; font-weight:bold; }	
	.table-hover-generale td:nth-of-type(5):before { content: "LIEN"; font-weight:bold; }
	.table-hover-generale td:nth-of-type(6):before { content: "TYPE"; font-weight:bold; }	
	.table-hover-generale td:nth-of-type(7):before { content: "NB VISITE"; font-weight:bold; }

	.table-hover-creations td:nth-of-type(1):before { content: "MEMBRE"; font-weight:bold; }	
	.table-hover-creations td:nth-of-type(2):before { content: "MODELE"; font-weight:bold; }
	.table-hover-creations td:nth-of-type(3):before { content: "INFORMATION"; font-weight:bold; }
	.table-hover-creations td:nth-of-type(4):before { content: "OUTILS"; font-weight:bold; }

	.table-hover-creations2 td:nth-of-type(1):before { content: "MEMBRE"; font-weight:bold; }	
	.table-hover-creations2 td:nth-of-type(2):before { content: "MODELE"; font-weight:bold; }
	.table-hover-creations2 td:nth-of-type(3):before { content: "INFORMATION"; font-weight:bold; }	
	.table-hover-creations2 td:nth-of-type(4):before { content: "SATISFACTION"; font-weight:bold; }
	
	.table-hover-creations3 td:nth-of-type(1):before { content: "MEMBRE"; font-weight:bold; }
	.table-hover-creations3 td:nth-of-type(2):before { content: "REFERENCE"; font-weight:bold; }	
	.table-hover-creations3 td:nth-of-type(3):before { content: "MODELE"; font-weight:bold; }
	.table-hover-creations3 td:nth-of-type(4):before { content: "AVIS"; font-weight:bold; }	
	.table-hover-creations3 td:nth-of-type(5):before { content: "SATISFACTION"; font-weight:bold; }	
	
	.table-hover-stats td:nth-of-type(1):before { content: "PAGE"; font-weight:bold; }	
	.table-hover-stats td:nth-of-type(2):before { content: "LIEN"; font-weight:bold; }	
	.table-hover-stats td:nth-of-type(3):before { content: "NB VISITE"; font-weight:bold; }	
	
	.table-hover-creation td:nth-of-type(1):before { content: "Référence"; font-weight:bold; }	
	.table-hover-creation td:nth-of-type(2):before { content: "Progression"; font-weight:bold; }	
	.table-hover-creation td:nth-of-type(3):before { content: "Status"; font-weight:bold; }		
	
	.table-hover-stats2 td:nth-of-type(1):before { content: "PAGE"; font-weight:bold; }	
	.table-hover-stats2 td:nth-of-type(2):before { content: "LIEN"; font-weight:bold; }	
	.table-hover-stats2 td:nth-of-type(3):before { content: "NB VISITE"; font-weight:bold; }
	
	.table-hover-stats3 td:nth-of-type(1):before { content: "PAGE"; font-weight:bold; }
	.table-hover-stats3 td:nth-of-type(2):before { content: "DATE"; font-weight:bold; }	
	.table-hover-stats3 td:nth-of-type(3):before { content: "LIEN"; font-weight:bold; }	
	.table-hover-stats3 td:nth-of-type(4):before { content: "NB VISITE"; font-weight:bold; }

	.table-hover-stats4 td:nth-of-type(1):before { content: "PAGE"; font-weight:bold; }
	.table-hover-stats4 td:nth-of-type(2):before { content: "TYPE"; font-weight:bold; }	
	.table-hover-stats4 td:nth-of-type(3):before { content: "DATE"; font-weight:bold; }	
	.table-hover-stats4 td:nth-of-type(4):before { content: "LIEN"; font-weight:bold; }	
	.table-hover-stats4 td:nth-of-type(5):before { content: "NB VISITE"; font-weight:bold; }	

	.table-hover-contact td:nth-of-type(1):before { content: "MEMBRE"; font-weight:bold; }	
	.table-hover-contact td:nth-of-type(2):before { content: "SUJET"; font-weight:bold; }
	.table-hover-contact td:nth-of-type(3):before { content: "MESSAGE"; font-weight:bold; }
	.table-hover-contact td:nth-of-type(4):before { content: "REPONSE"; font-weight:bold; }

	.table-hover-contact2 td:nth-of-type(1):before { content: "MEMBRE"; font-weight:bold; }	
	.table-hover-contact2 td:nth-of-type(2):before { content: "SUJET"; font-weight:bold; }
	.table-hover-contact2 td:nth-of-type(3):before { content: "MESSAGE"; font-weight:bold; }	
	
	.table-hover td .table-hover-sort { font-weight:bold; }
	.table-hover-generale td .table-hover-sort { font-weight:bold; }	
	.table-hover-stats td .table-hover-sort { font-weight:bold; }
	.table-hover-stats2 td .table-hover-sort { font-weight:bold; }
	.table-hover-stats3 td .table-hover-sort { font-weight:bold; }
	.table-hover-stats4 td .table-hover-sort { font-weight:bold; }	
	.table-hover-creation td .table-hover-sort { font-weight:bold; }
	.table-hover-creations td .table-hover-sort { font-weight:bold; }
	.table-hover-creations2 td .table-hover-sort { font-weight:bold; }
	.table-hover-creations3 td .table-hover-sort { font-weight:bold; }
	.table-hover-contact td .table-hover-sort { font-weight:bold; }
	.table-hover-contact2 td .table-hover-sort { font-weight:bold; }		
}