@mixin dt-dark{

	
	.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-bottom: 16px;
		transform: translateX(-50%);
		//margin-top: 2px;
		//border: 0.1px solid $c-divider;               //←←←←←←←←←←←←←←←←←←←←
		
	
		& > table {
			width: 100%;
			border-collapse: collapse;
			background: $d-e12;
			table-layout:fixed; 
			//border: 0.5px solid red;           //←←←←←←←←←←←←←←←←←←←←  
	
			& thead tr th {
				background-color: $d-e3;
				border-right: 1px solid $d-f-lg;
				//border: 0.5px solid red;           //
				border-left: 1px solid $d-f-lg;
				
			}
	
			& th:not(:first-child)  { //arrow on tr
					position: relative;
					text-align: left;
	
					padding-left: 4px;
					padding-right: 4px;
	
					cursor: pointer;
					overflow: hidden;
					background: $d-e12;
					border-top: 1px solid $c-divider;
					@include font(subtitle2, $d-f-lg);
					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, $d-f-lg);
						@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, $d-f-lg);
						@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;
				
				& th{
					border: none !important;
				}
			}
	
			& tr{
				position: relative;
				background-color: $d-e12;
				height: 36px;
				//display: inline-block;
				//border: 0.5px solid red !important;           //←←←←←←←←←←←←←←←←←←←← 
				// pointer-events: initial;
				// cursor: pointer;
				
				& .selected {
					background-color: $d-p-blue !important;
					color: $d-f-lg !important;
				}
	
				&:nth-child(odd){ //ligray backgroud alternated
					 background-color: $d-e1;
	
					& input {
						&:checked {
							background-color: transparent !important;
						}
					}
				}
	
				&:not(:nth-child(1)):hover{//not select th
					color: white !important; 
					background-color:lighten($d-p-blue, 20%);
				}
				
				&:not(:last-child){//no line on the last row
					//background-color:lighten($d-p-blue, 20%);
					border-bottom: 1px solid $c-divider;
				}
	
	
	
	
			}	
	
			& td {
				position: relative;
				text-align: left; 
				padding-left: 4px;
				padding-right: 4px;
				top: -1px;
				overflow:hidden;
				white-space: nowrap; 
				text-overflow: ellipsis;
				text-wrap:none;	
				border:none;
	
				&:not(:first-child)  { 
					&:hover {
						background-color: $d-p-blue !important;
					}
					@include interaction-white;
				}
				border: none;           //←←←←←←←←←←←←←←←←←←←←  
		
				& 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, $d-f-lg);
					@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, $d-f-lg);  // kelvin
					@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);
					background-color: $d-p-blue;
				}
				&:hover {
					background-color: $d-p-blue !important;
					color: $d-f-lg !important;
				}
			}
	
			& td {
				 @include font(body2, $c-b);
				 @include transition(.150s, emph);
				 &:active  {transform:scale(0.98); }
			}
	
			& .checked{ 
				background-color: $d-p-blue !important;
				& td {  @include interaction-primary-light; 
	
				}			
			}
	
			& .highlightTr{ 
				background-color: $d-p-blue;
				background-color: $cs-pink;
				& td {  @include interaction-cs-pink; }
	
			}
	
		}
	
	
	}/*dt*/
	
	
	
	table{
		& tr {
			& td{
				padding: 4px;
				@include font(body2, $c-b);
			}
		}
	}
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	// @mixin dt-dark{
	// 	.dt {
	
	// 		& > table {
	
	// 			& th:not(:first-child)  { //Checkbox
	// 					color:  $c-w;
	// 					opacity: 0.54;
	// 					&::before{	
	// 						background:  url(check.svg) no-repeat;
	// 					    background-size: 100% 100%;
	// 					    background-position: center;						
	// 						opacity: 0.67;
	// 					}	
	// 					&::selection { background-color: transparent; }
	// 			}  
				
	// 			& th:last-child{ //Checkbox
	// 					&::before{	
							
	// 					}	
	// 			}  
	
	// 			& tr{
	// 				&:nth-child(odd){ //ligray backgroud alternated
	// 				 	background-color:lighten($d-e1, 2%);
	// 				}
	// 				&:not(:nth-child(1)):hover{//not select th
	// 					background-color:lighten($d-e1, 4%);
	// 				}				
	// 				&:not(:last-child){//no line on the last row
	// 					border-bottom: none;
	// 				}
	// 			}	
	
	// 			& td {
	// 				color:white;
	// 			}
	// 		}
	
	
	// 	}/*dt*/
	
	
	
	// 	.dt { //NIMATIONS
	// 		& > table{
	
	// 			& .selected{ //TH header se`lected
	// 				background-color:darken($c-b, 90%);
	// 				opacity: 1; 
	
	// 				&::before{
	// 					opacity: 1; 
	// 					opacity: 0.54 ;  
	// 					transform: scale(1) rotate(0deg) ; 
	// 				}
	
	
	
	// 			}
	
	// 			& .reverse{ //TH header reverse
	// 				background-color:darken($c-b, 90%);
	// 				opacity: 1; 
	// 				&::before{
	// 					opacity: 1;   
	// 					transform: scale(1) rotate(180deg) ;   
	// 				}
	// 				&::before{
	// 					opacity: 1; 
	// 					transform: scale(1) rotate(180deg) ; 
	// 				}				
	// 			}
	// 		}
	// 	}
	
	
	// }