.dt {
	/*data table*/

	position: relative;
	display: inline-block;

	width: calc(100% - 0px);
	max-width: 1300px;
	margin-left: 50%;

	padding-right: 2px;
	padding-left: 2px;
	padding-bottom: 32px;
	//margin-top: 2px;
	margin-bottom: 16px;
	transform: translateX(-50%);
	//border: 0.1px solid $c-divider;               //←←←←←←←←←←←←←←←←←←←←


	&>table {
		width: 100%;
		border-collapse: collapse;
		background: $c-surface;
		table-layout: fixed;
		//border: 0.5px solid red;           //←←←←←←←←←←←←←←←←←←←←  

		& th:not(:first-child) {
			//arrow on tr
			position: relative;
			text-align: left;

			padding-left: 4px;
			padding-right: 4px;

			cursor: pointer;
			overflow: hidden;
			background: $c-surface;
			border-top: 1px solid $c-divider;
			@include font(subtitle2, $c-pd);
			opacity: 0.36;
			//border: 0.5px solid red;           //←←←←←←←←←←←←←←←←←←←←  

			& label {
				position: absolute;
				display: block;
				max-width: calc(100% - 16px);
				top: 2px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;

				@include font(subtitle2, $c-pd);
				@include selectNo;
				//border: 0.5px solid red;           //←←←←←←←←←←←←←←←←←←←← 
			}

			& span {
				position: absolute;
				display: block;
				max-width: calc(100% - 16px);
				top: 20px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				@include font(caption, $c-pd);
				@include selectNo;
				//border: 0.5px solid blue;           //←←←←←←←←←←←←←←←←←←←← 
			}




			&::before {
				position: absolute;
				content: '';
				top: 2px;
				right: 4px;

				width: 16px;
				height: 16px;

				background: url(svg/down.svg) no-repeat;
				background-size: 100% 100%;
				background-position: center;
				opacity: 0;
				transform: scale(0) rotate(0deg);
				@include transition(0.150s, stan)
			}

			//remove highlight on double click
			&::selection {
				background-color: transparent;
			}

			///border: 0.5px solid red;           //←←←←←←←←←←←←←←←←←←←←  
		}


		& thead tr {
			background-color: $c-surface;
			//border: 0.5px solid red;           //←←←←←←←←←←←←←←←←←←←← 
		}

		& tr {
			position: relative;
			background-color: $c-w;
			//display: inline-block;
			height: 36px;
			//border: 0.5px solid red !important;           //←←←←←←←←←←←←←←←←←←←← 
			// pointer-events: initial;
			// cursor: pointer;

			&:nth-child(odd) {
				//ligray backgroud alternated
				//background-color:lighten($c-b, 96%);
			}

			&:not(:nth-child(1)):hover {
				//not select th
				//background-color:lighten($c-b, 90%);
			}

			&:not(:last-child) {
				//no line on the last row
				border-bottom: 1px solid $c-divider;
			}




		}

		& td {
			position: relative;
			text-align: left;
			padding-left: 4px;
			padding-right: 4px;

			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			text-wrap: none;
			border: none;

			&:not(:first-child) {
				@include interaction-white;
			}

			border: 0.1px solid lighten($c-divider, 95); //←←←←←←←←←←←←←←←←←←←←  

			& label {
				position: absolute;

				display: block;
				max-width: calc(100% - 16px);
				//left:8px;
				top: 2px;

				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;

				@include font(subtitle2, $c-b);
				@include selectNo;

				//border: 0.5px solid red;           //←←←←←←←←←←←←←←←←←←←← 

			}

			& span {
				position: absolute;

				display: block;
				max-width: calc(100% - 16px);
				top: 20px;
				//left:8px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;

				@include font(caption, $c-fs);
				@include selectNo;
				// border: 0.5px solid blue;           //←←←←←←←←←←←←←←←←←←←← 

			}


			& .id {
				position: absolute;

				display: block;
				//width: 100%;
				top: 10px;
				left: -2px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				text-align: center;
				transform: rotate(90deg);

				@include font(overlinelLower, $c-b);
				@include selectNo;
				opacity: 0.54;
				display: none;
				// border: 0.5px solid blue;           //←←←←←←←←←←←←←←←←←←←← 
			}
		}

		& th:not(:first-child),
		& td:not(:first-child) {
			//pointer-events: none; //red this is a tes for swipe
			//border: 0.2px solid black;               //←←←←←←←←←←←←←←←←←←←← 

		}

		& th {
			@include transition(.150s, emph);

			&:active {
				transform: scale(0.98);
			}
		}

		& td {
			@include font(body2, $c-b);
			@include transition(.150s, emph);

			&:active {
				transform: scale(0.98);
			}
		}

		& .checked {
			background-color: $c-pl;

			& td {
				@include interaction-primary-light;
			}
		}

		& .highlightTr {
			background-color: $c-pl2 !important;
			background-color: $c-sl !important;

			& td {
				@include interaction-cs-green;
			}

		}

	}


}

/*dt*/



table {
	& tr {
		& td {
			padding: 4px;
			@include font(body2, $c-b);
		}
	}
}

.dt>table>tbody>tr>.tdWithBehavior>.behaviorOnTD {
	width: 100%;
	position: absolute;
	top: 0;

	.bar {
		span {
			position: relative;
			top: 0;
		}
	}
}