table.datatable {
	table-layout: fixed;
	border-collapse: collapse;
}

table.datatable tr th {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

table.datatable tr td {
	border: 1px solid #aaa;
	padding: 0 3px 0 3px;
	line-height: 25px;
}

table.datatable tr th {
	border: 1px solid #aaa;
	padding: 0 16px 0 3px;
	line-height: 25px;
}

table.datatable thead td,
table.datatable thead th {
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAMAAABFjsb+AAAAVFBMVEX////c3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3NzIvRbaAAAAG3RSTlMAAPf5AQprKuOQBnX6nZFB7vI8Db64B2HbI1kLO0PyAAAAaklEQVQYGZXBxw3EABADMY1zzln993nwa38HmNQnQF43gALQdgWgAGXl6wYFst72kKHAONmeFxTWza/9UDjT5JU++u9Jk1d6Khy7X9uqwDLbnkYUyAbbfYYC3JerEhSAomsBBaCpc0Bf/AAeJAWLTmqG7wAAAABJRU5ErkJggg==");
	background-position: right center;
	background-repeat: no-repeat;
	cursor: pointer;
}

table.datatable thead td,
table.datatable thead th,
table.datatable tfoot td,
table.datatable tfoot th {
	background-color: #eee;
}

table.datatable thead tr td:hover,
table.datatable thead tr th:hover {
	background-color: #ccc;
}

table.datatable thead .sort-asc {
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAABIklEQVQ4y9WTL0gEQRTGf7Oji3/xEGwugj6xGsRmE4wG04UD4YqgxSDYLRtFMAnaTIeCySBosW02jUmzntxxKnI3lgvHMjt3e2rwKwPzPb75vnnvwS9Cda2IkwhYBW7YX3rylQbdtEYVu8BpCNs/cxYn0YjCNCzhmOK9blnwuQt8QgXNVcMSAtQtwxMBlXbs3DHL1SaLnRdvLZaBcj6xOIkKgdp0UZNalbLcOcXGA/aqLTvj4l6adjaEnZ7FprRe9/VlelBv8NdwjoYxpgicAx8ZabZE5CxNDGQ8ctE+hxzcLVDp+c9E5BNYAWop6hU4EJFa3jm7B9JRLoG7vtbJGDMHXAMCPANrIvLQ16KLyCNwCHwBRz4hXwM6cQLMA8f8W3wDnmNEHIbRWQMAAAAASUVORK5CYII=");
}

table.datatable thead .sort-desc {
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAABGUlEQVQ4y82Uv0oDQRDGf3unGIOiWCtCnMpOuM7G0lbxFayENGnuEQSxEVMGBGsLS8EnEEHbwHigZyeIRCN6YbM21yiX+6OgLgwDM7PzfcN+s/BfjykqUNU60AcmRCTJq/VKAO6kfvtHzFR1GTgD5gEF1kXkpjIzVTVAK20EIEAzjVcecw3Y+BJrAquVxlTVaaCXA1QTkfeyzLZS/5ZhAJt/o7PG/pVGA7s06lJj3L+LWiuLpca8H9iTPAYP1p6Wfs0EDud8E2XlZj1z+zxkr7w0wiB+tO44K/U0dEeEQVxVZ50Zj4tPrHyugc73Fn33cmHK0H1xTNYNyatDRrEqXvQwiBPHQYrazmsEMFaknQTaQLfvOP/Vz/EDaOlUh4wYGM8AAAAASUVORK5CYII=");
}

table.datatable thead .sort-disabled {
	background-image: none;
	cursor: default;
}

table.datatable tbody tr:nth-child(2n+1) td {
	background-color: #f9f9f9;
}

table.datatable tbody tr:hover td {
	background-color: #ccc;
}

/*  datatable lazy scroll styles below */
.datatable-lazyscroll-container {
	overflow: hidden;
	position: relative;
}

.datatable-lazyscroll-container table {
	table-layout: fixed;
	border-collapse: collapse;
	width: 1px;
	height: 1px;
}

.datatable-lazyscroll-headers {
	overflow: hidden;
	position: relative;
	margin-right: 17px; /* fix scrollbar */
}

.datatable-lazyscroll-headers th {
	height: 25px !important;
	text-align: left;
}

.datatable-lazyscroll-body td {
	overflow: hidden !important;
	line-height: 25px !important;
	margin: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.datatable-lazyscroll-body {
	overflow-y: scroll;
	overflow-x: auto;
	position: relative;
}

.datatable-lazyscroll-headers th {
	border-bottom: 0 !important;
}

.datatable-lazyscroll-container {
	height: 608px;
}

.datatable-lazyscroll-body {
	height: 580px;
}

.datatable-lazyscroll-container th {
	width: 150px;
}

@media (prefers-color-scheme: dark) {
	table.datatable tr th,
	table.datatable tr td {
		border-color: #777;
	}
	table.datatable thead td,
	table.datatable thead th,
	table.datatable tfoot td,
	table.datatable tfoot th {
		background-color: #111;
	}
	table.datatable thead tr td:hover,
	table.datatable thead tr th:hover {
		background-color: #333;
	}
	table.datatable tbody tr td {
		background-color: #111;
	}
	table.datatable tbody tr:nth-child(2n+1) td {
		background-color: #222;
	}
	table.datatable tbody tr:hover td {
		background-color: #333;
	}
}