/*Table customers  - Abdon 01-August-2020) */
#customers td, #customers th {
  border: 2px solid black; /* #ddd boders color of each cell*/
  /* padding: 8px;            /* space on each cell before and after texts */
  text-align:center;  
}

#customers tr:nth-child(even){background-color: #d2d2d2;}  /*  #f2f2f2 #e2e2e2 #d2d2d2 */

#customers tr:hover {background-color: #ddd;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50; /*   header green    */
  color: white;
  text-align:center;
}

/* addedd for the sorting table, by Abdon, 
   to put the table in middle of the screen */
table.sortable {
    margin-left :auto; 
    margin-right:auto;
}


/* Show "sort icons" before the table is sorted */
table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after { 
    content: " \25B4\25BE" 
}

/* alternate colors between lines */
table.sortable tbody tr:nth-child(2n) td {
  background: #ffcccc;
}
table.sortable tbody tr:nth-child(2n+1) td {
  background: #ccffff;
}


/*
	Max width before this PARTICULAR table gets nasty. This query will take 
	effect for any screen smaller than 760px and also iPads specifically.
	*/
	@media
	  only screen 
    and (max-width: 760px), (min-device-width: 768px) 
    and (max-device-width: 1024px)  {

		/* Force table to not be like tables anymore */
		table, thead, tbody, th, td, tr {
			display: block;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		thead tr {
			position: absolute;
			top : -9999px;
			left: -9999px;
		}
		
    
    tr {
      margin: 0 0 1rem 0;
    }  
      
    tr:nth-child(odd) {
      background: #ccc;
    }  
            
		td {
			/* Behave like a "row"  */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 50%;
		}

		td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 0;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
		}

		/*
		Label the data (each row will be displayed line by line - Abdon 20-july-2020)
        You could also use a data-* attribute and content for this. That way "bloats" 
        the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has 
        a clever way to handle with text-shadow.
		*/
		td:nth-of-type(1):before { content: "Laharana"; }
		td:nth-of-type(2):before { content: "Daty"; }
		td:nth-of-type(3):before { content: "Lohateny na/sy fanazavana"; }
		td:nth-of-type(4):before { content: "rakitra"; }
		td:nth-of-type(5):before { content: "Feo"; }
		td:nth-of-type(6):before { content: "Sarimihetsika"; }
		td:nth-of-type(7):before { content: "Ny nanatontosa"; }
	}