.scDataGrid
{
	display: block;
	width: 100%;
}

.scDataGridResponsive
{
	overflow-x: auto;
	overflow-y: hidden;
}

.scDataGridTableHover > tbody > tr:hover
{
	background-color: #eee;
}

.scDataGridTable
{
	width: 100%;
	border: 1px solid #ccc;
	border-bottom: 0;
	border-radius: 0.125rem;
	background-color: #fff;
	color: #565656;
}

	.scDataGridTable thead
	{
		display: table-header-group;
	}

	.scDataGridTable tfoot
	{
		display: table-footer-group;
	}


.scDataGridExpandableCell, .scDataGridCheckboxCell, .scDataGridRadioButtonCell
{
	max-width: 50px !important;
	padding: 6px 1px 1px 6px !important;
	text-align: center !important;
	vertical-align: middle !important;
}

.scDataGridCheckboxCell
{
	padding: 1px 1px 1px 6px !important;
}

.scDataGridExpandableCell
{
	width: 40px;
	padding: 0px !important;
}

	.scDataGridExpandableCell .datagrid-expandable-caret, .scDataGridCheckboxCell .clr-checkbox-wrapper, .scDataGridRadioButtonCell .clr-radio-wrapper
	{
		display: inline-table;
	}

.datagrid-expandable-caret
{
	padding: 0px;
}


.scDataGridTable input
{
	height: 1rem;
	border: 1px solid #ccc;
	border-radius: 1px;
	color: #444444;
	margin-bottom: 0;
	margin-top: 0;
	padding-left: 5px;
	-webkit-transition: border linear .2s,box-shadow linear .2s;
	-o-transition: border linear .2s,box-shadow linear .2s;
	transition: border linear .2s,box-shadow linear .2s;
}


.scDataGridTable th, .scDataGridTable td
{
	border-bottom: 1px solid #ccc;
}

.scDataGridTable th
{
	margin: 0;
	padding: 0;
	border-radius: 0;
	box-shadow: none;
	background: #fafafa;
	color: #565656;
	text-align: left;
	font-size: 11px;
	height: 36px;
	vertical-align: middle;
	padding-left: 12px;
	padding-right: 12px;
}

.scDataGridTable div.scDataGridSorting
{
	display: table;
}

	.scDataGridTable div.scDataGridSorting div.scDataGridSortingLink
	{
		display: table-cell;
		vertical-align: middle;
		line-height: normal;
	}

	.scDataGridTable div.scDataGridSorting div.scDataGridSortingTooltip
	{
		display: table-cell;
		vertical-align: middle;
	}

	.scDataGridTable div.scDataGridSorting div.scDataGridSortingIcon
	{
		display: table-cell;
		vertical-align: middle;
	}

	.scDataGridTable div.scDataGridSorting clr-icon
	{
		margin-left: 5px;
	}

.scDataGridTable th:not(:last-child)
{
	border-right: 1px solid #ccc;
}


.scDataGridTable th a.scDataGridHeaderLink
{
	cursor: pointer;
	color: #565656 !important;
}

.scDataGridTable > tbody td
{
	text-align: left;
	vertical-align: top;
	font-size: 13px;
	padding-left: 12px;
}



.scDataGridTopPager
{
	flex: 0 0 auto;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: stretch;
	padding: .5rem;
	font-size: .458333rem;
	background-color: #fff;
	border: 1px solid #ccc;
	border-bottom: none;
	border-radius: 0 0 .125rem .125rem;
}

.scDataGridTopPagerWrapper
{
	width: 100%;
}

	.scDataGridTopPagerWrapper .clr-control-label
	{
		margin-bottom: 5px;
	}

	.scDataGridTopPagerWrapper .clr-select-wrapper
	{
		border: 1px solid #ccc;
	}

	.scDataGridTopPagerWrapper select
	{
		border: 0 !important;
	}

	.scDataGridTopPagerWrapper .clr-input-group
	{
		border: 1px solid #ccc !important;
	}

	.scDataGridTopPagerWrapper input[type="text"]
	{
		border: 0 !important;
	}

@media (max-width: 767px)
{
	.scDataGridTopPagerWrapper select
	{
		max-width: 250px;
	}
}

.scDataGridSearchControl clr-icon
{
	color: #444;
}

.scDataGridSearchControl label
{
	border-bottom: 1px dashed #ccc;
}

.scDataGridSearchControl .clr-control-inline .clr-select-wrapper
{
	min-height: 1.2rem;
}

.scDataGridColumnPreferencesModal ul
{
	list-style: none;
}

.scDataGridColumnPreferencesModal .scDataGridColumnPreferencesReorderDiv
{
	border: 1px solid #ccc;
}

	.scDataGridColumnPreferencesModal .scDataGridColumnPreferencesReorderDiv clr-icon
	{
		width: 32px;
		height: 32px;
		margin-top: -4px;
	}


.scDataGridColumnPreferencesButton
{
	margin-top: -10px;
}

	.scDataGridColumnPreferencesButton clr-icon
	{
		color: #444;
	}


.scDataGridBottomPager
{
	flex: 0 0 auto;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: stretch;
	padding: 0 .5rem;
	line-height: calc(1.5rem - 3px);
	font-size: .458333rem;
	background-color: #fafafa;
	border: 1px solid #ccc;
	border-top: none;
	border-radius: 0 0 .125rem .125rem;
}

	.scDataGridBottomPager .pagination-list
	{
		margin-left: 1rem;
		display: flex;
		align-items: center;
	}

	.scDataGridBottomPager .pagination-current
	{
		background: #fff !important;
		border: 1px solid #ccc;
		border-radius: .125rem;
		line-height: 1rem;
		min-width: 1rem;
		text-align: center;
		transition: none !important;
	}

	.scDataGridBottomPager .clr-select-wrapper
	{
		background: #fff !important;
		border: 1px solid #ccc;
		border-radius: .125rem;
		line-height: 1rem;
		min-width: 1rem;
		text-align: center;
		transition: none !important;
	}

	.scDataGridBottomPager select
	{
		border: 0 !important;
	}

.scDataGridItemText td
{
	border: 0px;
	min-width: 5px !important;
}


@media print
{
	.scDataGridResponsive
	{
		display: block;
		overflow-x: visible;
		overflow-y: visible;
	}

	.scDataGridTable
	{
		border-radius: 0;
		border: 1px solid #000 !important;
	}

		.scDataGridTable div.scDataGridSorting div.scDataGridSortingIcon
		{
			display: none !important;
		}

		.scDataGridTable > tbody td, .scDataGridTable > thead th
		{
			text-align: left;
			padding: 1px;
			white-space: normal;
			word-wrap: break-word;
			border-radius: 0;
			border: 0 !important;
			border-bottom: 1px solid #000 !important;
		}

	.scDataGridTopPager
	{
		border-radius: 0;
		border: 1px solid #000;
		border-bottom: none;
	}

	.scDataGridBottomPager
	{
		border-radius: 0;
		border: 1px solid #000;
		border-top: none;
	}


	.scDataGridTable table thead clr-icon
	{
		display: none !important;
	}

	.scDataGridTable table .scDataGridExpandableCell
	{
		display: none !important;
	}

	.row-detail-wrapper
	{
		display: block;
		padding-left: 0px !important;
		padding-right: 0px !important;
	}

		.row-detail-wrapper .clr-row
		{
			page-break-inside: avoid;
		}
}


ul.right-viewing
{
	float: right;
	padding-left: 0px;
	padding-top: 6px;
}

	ul.right-viewing li.grid_pager_element
	{
		float: left;
		position: relative;
		list-style: none;
		padding-left: 10px;
	}

		ul.right-viewing li.grid_pager_element .clr-form-control
		{
			margin-top: 0px !important;
		}


ul.left-viewing
{
	float: left;
	padding-left: 0px;
	padding-top: 6px;
}

	ul.left-viewing li.grid_pager_element
	{
		float: left;
		position: relative;
		list-style: none;
		padding-right: 10px;
	}

		ul.left-viewing li.grid_pager_element .clr-form-control
		{
			margin-top: 0px !important;
		}


.row-detail-wrapper
{
	width: 100%;
	padding-left: 36px;
	padding-right: 12px;
	display: block;
}

	.row-detail-wrapper h3
	{
		margin-top: 5px !important;
	}

	.row-detail-wrapper h4
	{
		margin-top: 5px !important;
	}

	.row-detail-wrapper p
	{
		margin-top: 0 !important;
	}

.datagrid-action-menu
{
	white-space: nowrap;
}

.datagrid-action-toggle
{
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	box-shadow: none;
	background: none;
	cursor: pointer;
	color: #565656;
	text-decoration: underline;
}

	.datagrid-action-toggle span
	{
		text-decoration: underline;
	}

	.datagrid-action-toggle-vellip span
	{
		text-decoration: none;
	}


.datagrid-action-overflow
{
	position: absolute;
	background: #fff;
	padding: 0.25rem 0.25rem;
	margin-left: 0.25rem;
	border: 1px solid #ccc;
	box-shadow: 0 1px 3px rgba(115, 115, 115, 0.25);
	border-radius: 0.125rem;
	font-weight: normal;
	white-space: nowrap;
	z-index: 10;
}

	.datagrid-action-overflow::before
	{
		/*content: '';*/
		position: absolute;
		top: 50%;
		right: 100%;
		width: 0;
		height: 0;
		margin-top: -0.25rem;
		border-right: 0.25rem solid #ccc;
		border-top: 0.25rem solid transparent;
		border-bottom: 0.25rem solid transparent;
	}

	.datagrid-action-overflow::after
	{
		/*content: '';*/
		position: absolute;
		top: 50%;
		right: 100%;
		width: 0;
		height: 0;
		margin-top: -0.20833rem;
		border-right: 0.20833rem solid #fff;
		border-top: 0.20833rem solid transparent;
		border-bottom: 0.20833rem solid transparent;
	}

	.datagrid-action-overflow .action-item
	{
		font-size: 0.58333rem;
		letter-spacing: normal;
		background: transparent;
		border: 0;
		color: #565656;
		cursor: pointer;
		display: block;
		line-height: calc(1rem - 0.04167rem);
		margin: 0;
		padding: 1px 1rem 0;
		text-align: left;
		width: 100%;
	}

	.datagrid-action-overflow-vellip .action-item
	{
		padding-left: 5px;
	}

	.datagrid-action-overflow-vellip .action-item span
	{
		padding-left: 5px;
	}

		.datagrid-action-overflow .action-item:hover, .datagrid-action-overflow .action-item:focus
		{
			text-decoration: none;
			background-color: #eee;
		}

		.datagrid-action-overflow .action-item.active
		{
			background: #eee;
			color: #000;
		}

		.datagrid-action-overflow .action-item:focus
		{
			outline: 0;
		}

		.datagrid-action-overflow .action-item.disabled, .datagrid-action-overflow .action-item:disabled
		{
			cursor: not-allowed;
			opacity: 0.4;
			user-select: none;
		}

			.datagrid-action-overflow .action-item.disabled:hover, .datagrid-action-overflow .action-item:disabled:hover
			{
				background: none;
			}

			.datagrid-action-overflow .action-item.disabled:active, .datagrid-action-overflow .action-item.disabled:focus, .datagrid-action-overflow .action-item:disabled:active, .datagrid-action-overflow .action-item:disabled:focus
			{
				background: none;
				box-shadow: none;
			}

		.datagrid-action-overflow .action-item clr-icon
		{
			vertical-align: middle;
		}
