table.datagrid { width: 100%; border-collapse: separate !important; border-spacing: 0; border-width: 0; }
	table.datagrid .input-group { border-collapse: collapse; }
/* CAPTION WITH TABLE TITLE */
table.datagrid > caption {
	border-style: none;
	/*background-color: #e5e5e5;*/
	padding: 5px 0;
	color: initial;
	text-align: left;
	caption-side: top;
	border-radius: 4px 4px 0 0;
	}
	table.datagrid > caption h1, table.datagrid > caption h2, table.datagrid > caption h3, table.datagrid > caption h4, table.datagrid > caption h5, table.datagrid > caption h6 {
		float: left;
		padding: 4px 0;
		margin: 0;
		color: #333;
	}
	/*table.datagrid > caption fieldset { float: right; }*/
	table.datagrid > caption:after {
		border-style: none;
		background-color: #e5e5e5;
		border-radius: 4px 4px 0 0;
		padding: 5px;
		text-align: right;
	}
	table.datagrid > caption .input-group .btn:not([class*="btn-"]) { background-color: ButtonFace; border-color: #ccc; }
	table.datagrid > caption .input-group .btn:not([class*="btn-"]):hover, table.datagrid > caption .input-group > input:active + div > .btn:not([class*="btn-"]), 
    	table.datagrid > caption .input-group > input:focus + div > .btn:not([class*="btn-"]), table.datagrid > caption .input-group:hover .btn:not([class*="btn-"]) { background-color: #ccc; border-color: #bbb; }
	table.datagrid > caption .input-group .btn.btn-default:hover, table.datagrid > caption .input-group > input:active + div > .btn.btn-default, 
    	table.datagrid > caption .input-group > input:focus + div > .btn.btn-default, table.datagrid > caption .input-group:hover .btn.btn-default { background-color: #090909; border-color: #040404; }
	table.datagrid > caption .input-group .btn.btn-primary:hover, table.datagrid > caption .input-group > input:active + div > .btn.btn-primary, 
    	table.datagrid > caption .input-group > input:focus + div > .btn.btn-primary, table.datagrid > caption .input-group:hover .btn.btn-primary { background-color: #1967be; border-color: #1862b5; }

/* HEADER */
table.datagrid > thead { margin-right: -1px; }
	table.datagrid > thead > tr > th, table.datagrid > thead > tr > td {
		font-weight: normal;
		color: #fff;
		background-color: #666666;
		border: solid #fff;
		border-width: 0 1px 0 0;
		height: 30px;
		line-height: 18px;
		text-align: left;
		vertical-align: middle;
		position: relative;
		padding: 10px;
		z-index: 0;
	}
	table.datagrid > thead > tr > th:active, table.datagrid > thead > tr > td:active { outline: none; }
	table.datagrid > thead > tr > th:last-child, table.datagrid > thead > tr > td:last-child { border-right-width: 0; }
	table.datagrid > thead > tr > th > a, table.datagrid > thead > tr > td > a { display: block; min-height: 23px; background-color: transparent; /*padding: 12px 0 5px 0;*/ color: white; text-decoration: none !important; }
	table.datagrid > thead > tr > th > a:hover { text-decoration: none; }

/* SORTING */
table.datagrid > thead > tr > [data-sortable="true"], table.datagrid > thead > tr > .controls { cursor: pointer; padding: 0 10px; }
	table.datagrid > thead > tr > [data-sortable="true"] > a { padding: 12px 0; }
	table.datagrid > thead > tr > [data-sortable="true"]:before {
		position: absolute;
		left: 0;
		display: block;
		width: 100%;
		height: 5px;
		content: '';
		z-index: 0;
	}
	table.datagrid > thead > tr > th[class*="sorted-"]:before { background-color: #999999; }
	table.datagrid > thead > tr > .sorted-desc:before { bottom: 0; top: auto; }
	table.datagrid > thead > tr > .sorted-asc:before { top: 0; bottom: auto; }
	table.datagrid > thead > tr > [data-sortable="true"]:hover > *:first-child:before {
		position: absolute;
		left: 0; bottom: 0; top: auto;
		display: block;
		width: 100%;
		height: 5px;
		background-color: #7F7F7F;
		content: '';
		z-index: 0;
	}
	table.datagrid > thead > tr > .sorted-asc:hover > *:first-child:before { bottom: 0; top: auto; }
	table.datagrid > thead > tr > .sorted-desc:hover > *:first-child:before { top: 0; bottom: auto; }
	table.datagrid > thead > tr > [data-sortable="true"]:hover > *:first-child:after {
		position: absolute;
		top: 4px; left: 0;
		display: block;
		width: 100%;
		color: #fff;
		z-index: 0;
		text-align: center;
		filter: alpha(opacity=40);
		opacity: 0.4;
		font: normal normal 0.8em 'Glyphicons Regular';
		line-height: 1;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	table.datagrid > thead > tr > .sorted-asc:hover > *:first-child:after { content: '\e602'; top: auto; bottom: 4px; }
	table.datagrid > thead > tr > .sorted-desc:hover > *:first-child:after { content: '\e601'; }

table.datagrid > thead > tr > .controls { text-align: center; font-size: 18px; color: #fff; }
	table.datagrid > thead > tr > .controls a, table.datagrid > thead .controls input, table.datagrid > thead .controls button { color: #fff; background-color: transparent; cursor: pointer; text-decoration: none; }
	table.datagrid > thead > tr > .controls:first-child { width: 18px; }
	table.datagrid > thead > tr > .controls:last-child { width: 35px; white-space: nowrap; }

/* BODY */
table.datagrid > tbody > tr > td {
	border: solid #cccccc;
	border-width: 0 1px 1px 0;
	height: 22px;
	padding: 8px 10px 5px 10px;
	font-size: 0.9em;
	}
	table.datagrid > tbody > tr > th { font-weight: bold; }
	table.datagrid > tbody > tr > td:first-child { border-left-width: 1px; }
	table.datagrid > tbody > tr:nth-of-type(even):not(.alert) { background-color: #f9f9f9; }
	table.datagrid > tbody > tr:not(.selected):not(.parent):hover > td:not(.controls) { background-color: #efefef; }
	table.datagrid > tbody > tr > tr.selected > td:not(.controls) { background-color: #cccccc; transition: all 0.25s ease-out; }
	table.datagrid:active > tbody > tr:not(.selected):not(.parent):hover > td:not(.controls) { background-color: #eee; }
	table.datagrid > tbody > tr > td.hover { background-color: #efefef; }
	table.datagrid td > .text-ellipsis { position: absolute; height: 20px; max-width: calc(100% - 15px); margin-top: -10px;  }
    table.datagrid > tbody > tr > td > input + label, table.datagrid > tbody > tr > td > span > input + label { padding-left: 10px; }

table.datagrid > tbody > tr > .controls {
	text-align: center;
	font-size: 0;
	white-space: nowrap;
	padding: 0 5px;
	vertical-align: middle;
	background-color: #dfdfdf;
	}
	table.datagrid > tbody > tr > .controls a { color: #333333; background-color: transparent; vertical-align: -2px; }
	table.datagrid > tbody > tr > .controls a:hover { color: #666666; } fieldset.search-group {
		display: inline-block;
		border-style: none;
		padding: 0;
		margin: 0 0 -3px 0;
	}
	table.datagrid > tbody > tr > .controls > * { font-size: 16px; margin: 0 2px; }
	table.datagrid > tbody > tr > .controls a, table.datagrid > tbody > tr > .control:before, table.datagrid > tbody > tr > .controls input, 
	table.datagrid > tbody > tr > .controls button, table.datagrid > tbody > tr > .controls .btn { color: #333333; background-color: transparent; cursor: pointer; text-decoration: none; }
	table.datagrid > tbody > tr > .controls a:hover, table.datagrid > tbody > tr > .control:hover:before { color: #666666; } 

/* responsive */
table.datagrid > tbody > tr.parent > td:not(.controls), table.datagrid > tbody > tr.selected > td:not(.controls) { background-color: #cccccc; transition: all 0.25s ease-out; }
	table.datagrid > tbody > tr.child { display: none; }
	table.datagrid tr.child .expandable-content { height: 0; overflow: hidden; }
	table.datagrid > tbody > tr.parent + tr.child { display: table-row; height: auto; }
	table.datagrid > tbody > tr.child > td { padding: 0; height: 0; }
	table.datagrid > tbody > tr.child .expandable-content { background-color: #dfdfdf; margin: 0; padding: 0 20px; }

	table.datagrid th.control, table.datagrid td.control { display:none; cursor: pointer; }
	table.datagrid.expandable th.control, table.datagrid.expandable td.control { display: table-cell; }
	table.datagrid:not(.expandable) td.control + * { border-left-width: 1px; }
	table.datagrid th.control:before, table.datagrid td.control:before {
		font-family: 'Glyphicons Halflings';
		position: relative;
		speak: none;
		top: 1px;
		display: inline-block;
		font-style: normal;
		font-weight: normal;
		font-size: 16px;
		width: 16px; height: 16px;
		line-height: 1;
		text-decoration: none;
		text-align: center;
		vertical-align: middle;
		content: '\e250';
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	table.datagrid tr.parent > th.control:before, table.datagrid tr.parent > td.control:before { content: '\e252'; }
	table.datagrid.expandable th.none, table.datagrid.expandable td.none, table.datagrid.expandable th.expandable, 
	table.datagrid.expandable td.expandable, table.datagrid.expandable th.never, table.datagrid.expandable td.never, 
    table.datagrid th.none, table.datagrid td.none,  
    table.datagrid th.never, table.datagrid td.never { display: none; }
	table.datagrid dl { display: inline-block; white-space: nowrap; padding: 0; margin: 0 20px 0 0; vertical-align: top; }
	table.datagrid dl > dt {
		display: inline-block;
		height: auto;
		line-height: 20px;
		padding: 5px 0;
		margin: 0;
		font-weight: bold;
		vertical-align: top;
	}
	table.datagrid dl > dd {
		display: inline-block;
		height: auto;
		line-height: 20px;
		padding: 5px 0 5px 5px;
		margin: 0;
		white-space: normal;
	}

/* pagination */
table.datagrid > tfoot > tr > th, table.datagrid > tfoot > tr > td { position: relative; background-color: #fff; text-align: right; }
table.datagrid .pagination { margin: 5px auto; text-align: center; border-radius: 0; }
	table.datagrid .pagination > li { border-color: #ccc; }
	table.datagrid .pagination > li > a { color: #333; }
	table.datagrid .pagination > li.active > a { color: #fff; background-color: #666; border-color: #666; }
	table.datagrid .pagination > li:first-child { letter-spacing: -3px; }
	table.datagrid .pagination > li:last-child { letter-spacing: -3px; border-width: 1px; }
	table.datagrid .pagination > li:first-child > a, table.datagrid .pagination li:last-child > a { padding-right: 15px; border-radius: 0; }
	table.datagrid .pagination > li > a { text-decoration: none; }
	table.datagrid .pagination > li:not(.active) > a:hover { color: #333; background-color: #cccccc; }
    table.datagrid .pagination > li .popover-content input[type="number"] { color: #333; }

table.datagrid .progress { margin-bottom: 3px; }

/* datagrid pre-scrollable*/
table.datagrid .datagrid-pre-scrollable { max-height: 60px; overflow-y: auto; }