/* TABLE */
table {
	margin		:auto;
	font-family	:sans-serif;
	width		:100%;}
table td {
	transition	:all .5s;}	
	.table-wrapper {
		overflow			:auto;}
	.main-wrapper {
		padding				:5px;}
	.main-wrapper a:hover {
		border-bottom		:1px dashed #CCCCCC;}
		
	/* Table */
	.demo-table {
		border-collapse		:collapse;
		font-size			:12px;
		margin				:0px;}
	.demo-table th, 
	.demo-table td {
		background-color	:#FFF;
		border				:1px solid #CCC;
		padding				:3px 3px;
		vertical-align		:middle;}
	.demo-table caption {
		margin				:3px;}

	/* Table Header */
	.demo-table thead th {
		background-color	:#333;
		color				:#FFFFFF;
		border-color		:#000;
		text-transform		:uppercase;
		font-size			:14px;}

	/* Table Body */
	.demo-table tbody td {
		color				:#353535;}
	.demo-table tbody td:first-child,
	.demo-table tbody td:nth-child(2),
	.demo-table tbody td:nth-child(3),
	.demo-table tbody td:last-child {
		text-align			:none;
		background			:#fff;}

	.demo-table tbody tr:nth-child(odd) td {
		background-color	:#f4fbff;}
	.demo-table tbody tr:hover td {
		background-color	:#ffffa2;
		border-color		:#CCC;}

	/* Table Footer */
	.demo-table tfoot th {
		background-color	:#C9D5E9;
		text-align			:none;
		font-weight			:normal;}
	.demo-table tfoot th:first-child {
		text-align			:none;}
	.demo-table tbody td:empty {
		background-color	:#fff;}
		
/* untuk ukuran layar 550px kebawah */
@media screen and (max-width: 550px){
	table {					margin		:0px;}
    .main-wrapper {			padding 	:2px;}
    .demo-table {			font-size	:12px;}
    .demo-table th, 
	.demo-table td {		padding		:1px;}
	.demo-table thead th {	font-size	:12px;}

}