/* PAGING */

.pagination {
	text-align: center;
	min-height: 2px;
}

ul:empty.pagination {
    display: none;
}

.pagination li {
	list-style-type: none ;
	float: left ;
}


.pagination li a, .pagination li span {
    padding: 0 5px ;
    cursor: pointer ;
}

.pagination li.active a, .pagination li.active span {
	cursor: default ;
	color: #505050;
}


/* AJAX LOAD BAR */

.datatable-load-bar {
	width: 100% ;
	margin: 8px 0 ;
}

.datatable-load-bar {
	border: 1px solid gray ;
	height: 10px ;
}

.datatable-load-bar  .bar {
	height: 10px ;
	background-color: #AEF ;
}
/* My Customisations *************************/
/* Clickable column header */
.datatable-header {
	cursor: pointer;
}
.datatable-header:hover {
	text-decoration: underline;
}
.datatable-sort-icon,
.datatable-filter-icon {
	float: right;
	margin: 2px;
}
.filter-open {
	background-color: #34b6e2 !important;
}

.filter-popup {
	background-color: #34b6e2;
	padding: 2px;
	box-shadow: 2px 2px 2px  black;
	z-index: 10;
	position: absolute;
	display: none;
}
.filter-popup-select{
    max-height: 15rem;
	box-sizing: border-box;

	overflow-y: true;
	label {
		margin-left: 5px;
	}
}
.filter-popup-inner{
    background-color: #f0f0f0;
    padding: 10px;
    overflow-y: auto;
    color: #505050;
}
.chk-select-all{
    font-style: italic;
}
.filter-button-base {
	display: inline-block;
	width: 1.3rem;
	height: 0.3rem;
	cursor: pointer;
}

.filter-button::before {
	content: url('./images/filter.png');
}

.filter-button-active::before {
	content: url('./images/filterActive.png');
}

.datatable-select {
	max-height: 15rem !important;
	label:hover {
		text-decoration: underline;
		cursor: pointer;
		color: black;
	}
}
/* Additional Sorting Styles */
.sortbox{
	font-weight: bold;
	color: #505050;
	border-bottom: grey 2px solid;
	padding-bottom: 2px;
	margin-bottom: 5px;
	span:hover {
		cursor: pointer;
		color:red;
	}
	.sort-reset{
		float: right;
	}
}

.sorting-asc {
	.datatable-sort-icon::before {
		content: '▲';
	}
}
.sorting-desc {
	.datatable-sort-icon::before {
		content: '▼';
	}
}

/* Date filter */
.datatable-datefilter, .datatable-textfilter{
	.filter-reset{
		display: block;
		&:focus {
			outline: 2px solid black;
		}
		&:hover{
			cursor: pointer;
			color: red;
			text-decoration: underline;
		}
	}
	.controlline{
		min-width: 180px;
		label{
			min-width: 50px;
			display: inline-block;
		}
		input{
			width: 120px;
			min-height: 1rem;
			display: inline-block;
			padding: 3px;
		}
		button.ui-datepicker-trigger{
			background: none;
			border: none;
			color:transparent;
			display: none;
		}
		.ui-date-picker-trigger, .icon-calendar {
			cursor: pointer;
			position: inherit;
		}
		.icon-calendar{
			vertical-align: bottom;
			margin-left: 0.3rem;
			display: inline-block;
		}
	}
}

.datatable-filter-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(197, 36, 36, 0.5);
	z-index: 5;
	display: xnone;
}