/*
 * codepunch-datatable
 *
 * Copyright (c) 2020-2022, CodePunch Solutions.
 * https://codepunch.com
 * Author: Anil Kumar
 * 
 */
 
.cb-col {
	 text-align: center;
}

.dt-serial {
	font-size: 0.85rem;
}
 
.datatable th {
	 text-align: left;
}
 
.icon-16 {
	background-size: 16px 16px;
}

.icon-24 {
	background-size: 24px 24px;
}

.dtcard {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	word-wrap: break-word;
	background-color: var(--datatable-background-color, #EEEEEE);
	background-clip: border-box;
	height: 100%;
}

.dtcard > hr {
	margin-right: 0;
	margin-left: 0;
}

.dtcard-body {
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	min-height: 1px;
	padding: 1.25rem;
	position: relative;
	margin: 0px 0;
}

.dtcard-header {
	padding: 0;
	background-color: transparent;
	border-bottom: 1px solid var(--datatable-row-border-color, #EFEFEF); 
	overflow: visible;
	margin-bottom: 0px;
	display: grid;
	grid-template-columns: 32px 32px 32px auto;
	gap: 0px;
	border-bottom: none;
	text-align: center;
	user-select: none;
}

.dtcard-header:empty, .dtcard-msg:empty { display: none }

.dtcard-msg {
	position: absolute;
	left:0;
	right: 0;
	top: 50px;
	bottom: 0;
	z-index: 12;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: transparent;
}

.dtcard-header > div {
	background-color: var(--datatable-row-header-background-color, #DDDDDD);
	border-right: 1px solid var(--datatable-row-vertical-border-color, #EFEFEF);
	border-bottom: 1px solid var(--datatable-row-border-color, #EFEFEF);
	color: var(--datatable-row-header-text-color, #000000);
}

.dtcard-header-text {
	white-space: nowrap;
	text-overflow: ellipsis;
	font-weight: bold;
	padding: 2px 5px;
	border-radius: 2px;
}

.dtcard-header > div:not(:last-child) {
	min-width: 32px;
	min-height: 32px;
	background-position: center center;
	background-size: 24px 24px;
	background-repeat: no-repeat;
	border-radius: 2px;
	overflow: hidden;
}

.dtcard-footer {
	user-select: none;
	background-color: var(--datatable-row-header-background-color, #DDDDDD);
	margin-top: 0px;
	border-top: 0px solid var(--datatable-row-border-color, #EFEFEF);
	display: flex;
	flex-wrap: wrap;
    justify-content: space-between;
	column-gap: 20px;
	box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.1);
	margin: 2px 0 2px 0;
}

.dtcard {
	/* margin-bottom: 20px; */
	border-radius: 4px;
}

.datatable {
	border-collapse: separate;
	table-layout: fixed;
	width: 100%;
	user-select: none;
	border-spacing: 0;
}

.datatable, .datatable div {
	font-size: var(--datatable-default-font-size, 1rem);
}

.datatable th {
	position: sticky;
	top: 0px; /* top: -1px; compromise solution that prevents artifacts showing through the top border height when scrolled */
	background-color: var(--datatable-row-header-background-color, #DDDDDD);
	color: var(--datatable-row-header-text-color, #000000);
	overflow: hidden;
	opacity: 1;
	font-weight: bold;
	font-family: var(--datatable-header-font-family, 'Verdana,Sans-Serif');
	vertical-align: top;
	text-transform: uppercase;
	padding: 16px 0px 4px;
}


.datatable th:not(:last-child), .datatable td:not(:last-child) {
	border-right: 1px solid var(--datatable-row-vertical-border-color, #EFEFEF);
}

.datatable td {
	overflow: hidden;
	text-overflow: ellipsis;
    white-space: nowrap;
	padding-top: 2px;
	padding-bottom: 2px;
	vertical-align: top;
}

.dt-hdr {
}

.datatable th {
	overflow: hidden;
	text-overflow: ellipsis;
    white-space: nowrap;
	vertical-align: top;
	box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.1);
}

.datatable th > * {
	margin-bottom: 6px;
}

.multiline {
	word-wrap:break-word !important;
	white-space: normal !important;
	vertical-align: top !important;
	user-select: text;
}

.td-link a {
	color: inherit;
	text-decoration:none;
}

.td-link img {
	width: 16px;
	height: 16px;
}

.multiline a {
	color: inherit;
	text-decoration-style: dotted;
}

.datatable tr, .datatable tr {
	color: var(--datatable-row-text-even);
	background-color: var(--datatable-row-background-even, rgba(255,255,255,0.75));
	border-bottom: 1px solid var(--datatable-row-border-color, #EFEFEF);
}

.datatable tr:nth-child(odd)  {
	background-color: var(--datatable-row-background-odd, rgba(255, 255, 255, 1));
	color:  var(--datatable-row-text-odd, #000000);
}
  
  
.datatable tr:not(:first-child):hover {
	color: var(--datatable-row-color-hover, #FFFFFF);
	background-color: var(--datatable-row-background-hover, #808080);
}

.datatable .th-content, .datatable .td-content {
	padding: 0px 20px 0px 5px;
	text-overflow: ellipsis;
    white-space: nowrap;
	overflow: hidden;
}

.datatable .th-content {
	padding: 0px 20px 0px 5px;
}

.tc-icon {
	padding: 0 !important;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.datatable .th-serial {
	width: 50px;
}

.datatable .th-cb {
	width: 24px;
	text-align: center;
}

.th-idn {
	width: 64px;
}

.th-zone {
	width: 70px;
}

.btn-table-icon {
	cursor: pointer;
}

.datatable .th-sortable {
	cursor: pointer;
}

.datatable .th-sortable > .icon-16 {
	width: 16px;
	height: 24px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	position:absolute;
	right: 4px;
	top: 14px;
}

.datatable .th-column-filter {
	padding: 0px 5px 0 5px;
	display: block;
	text-align: center;
	line-height: 120%;
}

.datatable .th-column-filter > input {
	width: 100%;
	height: 100%;
	background-image: none !important;
	background-color: var(--datatable-input-background-color, #FFFFFF);
	border: 1px solid var(--datatable-input-border-color, #EFEFEF);
	padding: 1px 2px !important;
	color: var(--datatable-input-text-color, #000000);
	font-family: var(--datatable-input-font-family, 'Tahoma,Verdana,Sans-serif');
}

.datatable .th-column-filter > input:focus {
	box-shadow: none;
	
	outline: 2px solid var(--datatable-input-outline-color, #006EB1);
	outline-style: solid;
	outline-offset: -2px;
}

.datatable td.wait {
	text-align: left; 
}

.tr-selected {
	background-color: var(--datatable-row-selected-background-color, #B1E1FF) !important;
	color: var(--datatable-row-selected-text-color, #000000) !important;
}

.btn-dt-footer {
	display: inline-block;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	width: 24px;
	height: 24px;
	background-size: 20px 20px;
	cursor: pointer;
	border: 1px solid var(--datatable-button-border-color, #EFEFEF);
	border-radius: var(--datatable-button-border-radius, 2px);
	background-color: var(--datatable-button-background-color, rgba(255,255,255,0.75));
	color: var(--datatable-button-text-color, #000000);
	margin-right: 2px;
}

.btn-dt-footer:focus {
	outline: 1px solid var(--datatable-input-outline-color, #006EB1);
	outline-style: dotted;
	outline-offset: 1px;
}

.btn-dt-separator {
	margin-left: 3px;
	margin-right: 3px;
	margin-top: 4px;
	width: 0px;
	height: 12px;
	display: inline-block;
	background-color: var(--datatable-button-border-color, #EFEFEF); 
}

.btn-datatable:hover {
	background-color: var(--datatable-button-hover-color, #DFDFFF) !important;
}

.datatable-wrapper .dtcard-body {
	padding: 0;
}

.datatable-wrapper .dtcard-footer {
	padding: 3px;
}

.datatable-wrapper .dtcard-body {
	overflow: auto;
}

.datatable-wrapper {
	margin-right: 0px;
}

.dtcard-footer > div  {
	white-space: nowrap;
	overflow: hidden;
	padding: 2px;
}

.datatable-wrapper .dtcard-footer .right {
	text-align: right;
	padding-right: 10px;
}

.datatable-wrapper .dtcard-footer .mid {
	text-align: center;
}

.draghandle {
	position: absolute;
	top: 0px;
	left: 4px;
	width: CALC(100% - 8px);
	height: CALC(1rem - 3px);
	background-color: transparent;
	z-index: 11;
}

.draghandle:hover {
	background-color: var(--datatable-row-background-hover, #808080);
	color: var(--datatable-row-color-hover, #FFFFFF);
}

.csortable > .draghandle {
	background-image: var(--datatable-drag-handle-image, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAM0lEQVQY0+WNsQkAMAjAIvQJT/dBPSO9QOjeTBkCgUdCfQrPzAiQmbE5AN1tVamurn66vkxCizavDuUhAAAAAElFTkSuQmCC'));
	background-position: 0 0;
	background-repeat: repeat-x;
	background-size: 10px 10px;
	cursor: move;
}

.dtcol-divider {
	top: 0px; 
	right: 0px; 
	width: 4px; 
	position: absolute; 
	cursor: ew-resize; 
	user-select: none; 
	height: 124px;
	z-index: 15;
}

.datatable-wrapper .dtcard-body {
	overflow: auto;
}

.datatable-wrapper .dtcard-body:hover {
	overflow: auto;
}

.dt-icon-alert {
	width: 14px;
	height: 14px;
}

.th-sorted-asc > .icon-16 {
	background-image: var(--datatable-sort-down-icon, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAv1JREFUeF7tmkvITVEUx38f8maovCYy9iglkTcpRkKR8ogxcxPFxKfMlIi8i7zfph5JIRFDBkqEMPOmv9bR8TnnXndxzz7nnr1H33c7e6/9/6+19v7vvVcXNW9dNcdPJCBGQM0ZiClQ8wCIi2BMAUcKzAa2AbeADcB3xxil6eKJgOvAVEMwCbhXGjSOiXgIuAtMNFvTgRsOu6XpUjQBw4FdwOhADHwEuoHTif2iCdgCbAoEPjH7HBgVioBFwBmgV0ASTgJLQxEgu2OAEYEIUApo0f4akoBA2LPNFr0GlAq8JhMJcLgk6oAohPxKcAiwGRjpiLz/0eUTsBO4HWoXkAiSGArZngBjQxGwGtgXEj1wDZgZigDZnRs4BS4B70MSEDgAfjcfdYDDHVEHRB3g1wGOgGtvl6LXgD7AusA3QoeAp6F2gY3Ajvb6tOnoD4AJdSbgITA+FAG1T4Gm8Vn0B0UvgkXja2ovEtCUoj8/iEowKsF/U4K1Pg7X/kKk9Fdi44DFwHHgcc4C+TeLoATPeiue2A18s7FKfSmqB0u9nA4D3gHzgTsZJDQjoDdwBFhmfUXEXsduU0iXtA7Q389SD5dvgXkZFSCNCBD4g8Dy1OzXAAcKQeMw0lMITQauAkNtrDdGwv3U2HkEKIL2AytT3+p/HX+TFHBMsb1dspTgFOAKoHxVew3MAXSKUssiQOAV5qtS09W5W94vLXjNNU8KTwN0fTzYAL0CVB32KIOAm8AeYG0K/FEj49c7fHv96B+90VlABVAXgUE2/Esj4XBKCc6wkNdCl7Rj9lse+EoVSMwCzgMDDd0LC+mkwkO1gkqZpJ0AVgBfcnxSyRIZ5f85YECTQDtlq//nBt9VtkhKmkDFTf1zwJ21fb8ReHUtQ5ncdkDO+tlauQ9YYPV1/XqQcAFYAujpuXKtFQIEbiGgMrO+hvSySWdVX1WytUqAQCoStppM1jX3h0oid6RAlXHmzt0TAR1FRCSgo9zpABMjwEFaR3WJEdBR7nSAqX0E/AAKNb1BhFmVNwAAAABJRU5ErkJggg=='));
}

.th-sorted-desc > .icon-16 {
	background-image: var(--datatable-sort-up-icon, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAy5JREFUeF7t2k2oVVUUwPGfUVFW2ihIaxKOS0WCiCKysEFCFIqiQoUhCFHzJkE0KMFZUdEH9kFq9IWi5FAF0UikoKEOggaJfc3yq1iyr51u77577rn3nn0u5+zRfe/tvdda/7XW3uvutxZo+VjQcvt1ALoIaDmBLgVaHgDdIdilQIUUWINXcQIv4EKFPRqzZNQIeAxf4IZkQXzegIuNsWhERUYB8Ci+LhjfE/UZNs0qhLIAHsY+3DgA8G5swaUhDrgdb+HOER01qel/4XV82duwDICHsB8Lh2jxCZ4eAuEVvDQpayru8zPuKAvgARzATWnBL8nA8GSMk1hZUORDPIvLA5R7HF/hmorKT2LZ51hXBsD9OIib0+SzWI1dWJF+F9GxFZsLmn2A5+aBcBeWTMKSCntECoTTrqbqoBS4Lxm/KAk5l4z/Ht8VADyIYwjPbywo9C624e8KSta6ZC4A9+IbLE6a/IpHcCr93A/gKK7Fx1hf0P5tbG86hH4Aq3AItyZDfkNcfxE2vTEXgPhbQPgUTxXmvonnmwyhCCA+/1TIz98RVd+3fTE5CEBMuw578ERhzTPp3Kg1tMsKKwKIkzmuiNvwZzL++BwbzQcgpl+PKI7WprVxIL5XVqG65/WnwN14Envx4wBlhgHoRULcDnEIvlO4EW7By1hat6FJ3nm8gauOLVMI9etaBsAg+6IIimIo5ziNZT0F6gYQleL7Oa3HYUT9cmXUDSBkxpWaMwWisv0jJ4DMAfBf8TkioAPQJAJdBFTwxjjXYAVx011SdwTE94UokHK+CH2EM7lugRexc7o+Hbp7fKVf3mYAP+CeXABanwJD47PuCXUfgnXbN1ReB2Aoov9P6OqAvlfheBSd2ZEjBVr9dbj1DyKtfxJr/aNo4w7LHIdgoyB0ACq4oyuEukLo3waJ6A8YtRKciQaJ+TJjnBSYqRaZQRDGATBzTVJzQRgHQBPa5HakZs9s/xuscPFMb0mVOuAIooMsRrTUFNtnpqfplHauAiC6Rl9L3WHRLN34TrD52FUBMCVf5Nm2A5CHe3OkdhHQHF/k0aSLgDzcmyO1i4Dm+CKPJv8AaOm9QUd8YwUAAAAASUVORK5CYII='));
}