// DataTables' built in feature elements
div.dataTables_wrapper {
	div.dataTables_length {

	}

	div.dataTables_filter {
		text-align: right;

		input {
			margin-left: 0.5em;
		}
	}

	div.dataTables_info {
		padding-top: 10px;
		white-space: nowrap;
	}

	div.dataTables_processing {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 200px;
		margin-left: -100px;
		text-align: center;
	}

	div.dataTables_paginate {
	    text-align: right;
	}

	div.mdc-grid.dt-table {
		padding-top: 0;
		padding-bottom: 0;

		> div.mdc-cell {
			margin-top: 0;
			margin-bottom: 0;
		}
	}

	table.mdc-data-table__table {
		table-layout: auto;
		thead {
			tr{
				th{
				&.sorting_asc,
				&.sorting_desc {
					padding-right: 30px;
				}
		
				&:active {
					outline: none;
				}
		
				&.sorting_asc,
				&.sorting_desc,
				&.sorting {
					cursor: pointer;
					position: relative;
		
					&:before,
					&:after {
						position: absolute;
						display: block;
						opacity: 0.3;
						right: 1em;
						line-height: 9px;
						font-size: 0.9em;
					}
		
					&:before {
						bottom: 50%;
						content: "\25B4"; // up arrow - ascending
					}
		
					&:after {
						top: 50%;
						content: "\25BE"; // down arrow - descending
					}
				}
		
				&.sorting_asc:before,
				&.sorting_desc:after {
					opacity: 0.8;
				}
				}
			}
		}
	}
	.mdc-data-table__cell {
		border: 1px solid rgba(0,0,0,.12);
	}

	div.mdc-layout-grid {
		margin: 0px;
		padding: 5px;
	}
}


// Sorting - using :before and :after with UTF8 characters
table.dataTable thead {
	> tr > th,
	> tr > td {
		&.sorting_asc,
		&.sorting_desc,
		&.sorting {
			padding-right: 30px;
		}

		&:active {
			outline: none;
		}
	}

	.sorting,
	.sorting_asc,
	.sorting_desc,
	.sorting_asc_disabled,
	.sorting_desc_disabled {
		cursor: pointer;
		position: relative;

		&:before,
		&:after {
			position: absolute;
			bottom: 11px;
			display: block;
			opacity: 0.3;
			font-size: 1.3em;
		}

		&:before {
			right: 1em;
			content: "\2191"; // up arrow - ascending
		}

		&:after {
			right: 0.5em;
			content: "\2193"; // down arrow - descending
		}
	}

	.sorting_asc:before,
	.sorting_desc:after {
		opacity: 1;
	}

	.sorting_asc_disabled:before,
	.sorting_desc_disabled:after {
		opacity: 0;
	}
}