/* ############### start data table type 2 */
.dt2_caption_Header { 
	background:#009900;
	color: white; 
	font-weight: bold; 
	padding:5px;
	text-align:center;
}

.dt2_table { 
  width: 100%; 
  border-collapse: collapse; 
}

/* Zebra striping */
.dt2_table tr:nth-of-type(odd) { 
  background: #eee; 
}
.dt2_table tr:nth-of-type(even) { 
  background: #fffcf2; 
}

.dt2_table th { 
  background:#FFFFCC;
 /* color: white; */
  font-weight: bold; 
}
.dt2_table td, th { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: left; 
}
/* ############### end data table type 2 */

/* ############### start data table type 1 */
.dt_caption_Header { 
	background:#009900;
	color: white; 
	font-weight: bold; 
	padding:5px;
	text-align:center;
}

.dt_table { 
  width: 100%; 
  border-collapse: collapse; 
}

/* Zebra striping */
.dt_table tr:nth-of-type(odd) { 
  background: #eee; 
}
.dt_table tr:nth-of-type(even) { 
  background: #fffcf2; 
}

.dt_table th { 
  background:#FFFFCC;
 /* color: white; */
  font-weight: bold; 
}
.dt_table td, th { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: left; 
}
/* ############### end data table type 1 */

/*@media all and (max-width: 780px) {*/
@media all and (max-width: 420px) {
	/*@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 {
		
		display: block;
	}*/
	.dt_table thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	.dt_table thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	.dt_table tr { border: 1px solid #ccc; }
	
	.dt_table td {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	
	.dt_table 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;
	}
	
	/*
	Label the data
	*/
   /* td:nth-of-type(1):before { content: "Kod"; }
	  td:nth-of-type(2):before { content: "Nama"; }
	  td:nth-of-type(3):before { content: "Jenis Kehadiran"; }*/
	 .dt_table th[data-title]:before,
		td[data-title]:before {
		content: attr(data-title) ":\00A0";
		font-weight: bold;
	}
		
	.dt_table th:not([data-title]) {
		font-weight: bold;
	}

}