.datagrid {
	position: relative;	
}

.dg_header {
	position: relative;
}

.dg_left {
	float: left;
	position: relative;
}

.dg_right {
	float: right;
	position: relative;
}

.dg_main {
	white-space: nowrap;
	overflow: hidden;
	position: relative;
	z-index: 0;
}

.dg_cell {
	display: inline-block;	
	white-space: no-wrap;
}

.dg_header .dg_cell {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;	
	cursor: pointer;
}

.dg_cell_value {
	display: none;	
}

.dg_spacer {
	display: inline-block; 
	vertical-align: middle;        
	width: 20px;
}   

.dg_body {
	overflow: auto;	
}

.dg_rows {
	position: relative;	
}

.dg_cell {
	white-space: nowrap;
	overflow: hidden;	
	position: relative;
	vertical-align: top;
}

.dg_scroller {       
	margin-top: -2px;
	overflow: auto;
}

.dg_scroller > div {
	height: 1px;
}

.dg_align_left {
	text-align: left;
}   

.dg_align_right {
	text-align: right;
}   

.dg_align_center {
	text-align: center;
}   

.dg_check {
	cursor: pointer;	
}

.dg_overlay {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: white;
	opacity: 0.5;
	z-index: 10;    
}

.dg_cell_overlay:before {
	content: " ";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: white;
	opacity: 0.5;
	z-index: 10;    
}

/* FOOTER */

.dg_footer {
	z-index: 1;
}

.dg_footer_left {
	float: left;
}

.dg_footer_right {
	float: right;
}

.dg_footer_center {
	text-align: center;
}

.dg_footer_elem {
	display: inline-block;	
}

.dg_footer_sep {
	display: inline-block;    
}

.dg_footer * {
	vertical-align: middle;	
}

.dg_footer:after {
	content: " ";
	clear: both;
	display: block;
}

.dg_footer_elem {
	position: relative;
}

.dg_footer_elem.dg_disabled {
	opacity: 0.5;	
}

.dg_footer_elem.dg_disabled:after {
	content: " ";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
} 

/* COLUMN RESIZE */

.dg_resizer {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: none;
}

.dg_resizer > div {
	position: absolute;
	top: 0;
	bottom: 0;
	border-left: 1px dotted black; 
	width: 1px;
}

.dg_grip {
	z-index: 20;
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1px;
	user-select: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;    
}

.dg_grip > div {
	z-index: 20;
	position: absolute;
	margin-left: -5px;
	width: 10px;    
	
	top: 0;
	bottom: 0;
	cursor: col-resize;
}

.dg_grip.dg_fixed > div {
	display: none;
}


/* EDIT */
.dg_editable {
	cursor: pointer;	
}

.dg_edit {
	position: absolute;
	display: block;
	left: 0;
	right: 0;
	top: 1px;
	bottom: 1px;    
	border: 1px solid silver;
	background-color: white;     
	padding: 0 2px;
}

.dg_edit input, .dg_edit select {
	display: block;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
	margin: 0;  
	padding: 0;  
	border: 0;
	outline: 0;
	font-size: inherit;
}

.dg_edit_select {
	border-right: 0;    
}

.dg_edit select {
	margin-top: -1px;
	margin-right: -1px;    
}

.datagrid input[type=checkbox] {
	margin-top: 0;
	margin-bottom: 0;
	display: inline-block;
	vertical-align: middle;	
}

.dg_valign_center .dg_cell_data:before {
	content: " ";
	display: inline-block;
	width: 0;
	height: inherit;
	vertical-align: middle;
}