@media only screen and (max-width: 767px) {
	
	table.responsive { 
		margin-bottom: 0; 
	}
	
	.pinned { 
		position: absolute; 
		left: 0; 
		top: 0; 
		bottom:0;
		background: #fff; 
		width: 35%; 
		overflow: hidden; 
		overflow-x: auto; 
		border-right:solid 0px #cccccc;
		z-index: 20;
	}
	.pinned table { 
		border-right: none; 
		border-left: none; 
		width: 100%; 
	}
	
	
	.pinned table th, 
	.pinned table td { 
		white-space: nowrap; 
	}
	.pinned td:last-child { 
		border-bottom: 0; 
	}
	
	div.table-wrapper{
		position: relative; 
		margin-bottom: 20px; 
		overflow: hidden; 
	}
	div.table-wrapper div.scrollable{ 
		margin-left: 35%; 
	}
	div.table-wrapper div.scrollable{ 
		overflow: scroll; 
		overflow-y: hidden; 
	}	
	
	div.table-wrapper div.scrollable:after{ 
		position:absolute;
		top:0;
		bottom:0;
		right:0;
		width:0px;
		content:" ";
		z-index: 10;
		
		box-shadow: 0px 0px 10px 4px rgba(0,0,0,0.3);
		itransition: box-shadow 0.2s;
	}	
	div.table-wrapper div.scrollable.toright:after{ 
		box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
	}
	
	div.table-wrapper .pinned{
		box-shadow: 0px 0px 10px 4px rgba(0,0,0,0.3);
		itransition: box-shadow 0.2s;
	}
	div.table-wrapper.toleft .pinned{ 
		box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
	}



	
	table.responsive td, 
	table.responsive th{
		position: relative; 
		white-space: nowrap; 
		xoverflow: hidden;
	}
	table.responsive th:first-child, 
	table.responsive td:first-child, 
	table.responsive td:first-child, 
	table.responsive.pinned td{ 
		display: none;
	}
	
	table.responsive colgroup col:first-child{ 
		display: none;
	}	
	
	
	div.table-wrapper table{
		xmargin:0 !important;
		xborder-collapse:separate;
		xborder-spacing:0;
	}	
	div.table-wrapper table tr{
		height:30px !important;
	}

	div.table-wrapper table.double-responsive tbody tr{
		height:46px !important;
	}	
	
	
	div.table-wrapper table thead th{
		z-index: 3;
		xbackground: #ffffff;
		position:relative;
	}
	
	
	
}