
//Main Theme Variables
$white: #fff !default;
$lightGrey: #F0F0F0 !default;
$black: #222 !default;

//Transparent color variables
$whiteTransparent: rgba(255,255,255,.2) !default;
$blackTransparent: rgba(0,0,0,.1) !default;
$blackTransparentMedium: $lightGrey !default;
$blackTransparentHeavy: rgba(0,0,0,.4) !default;
$shadowColor: rgba(0, 0, 0, .2) !default;

$backgroundColor: $white !default; //background color of tabulator
$borderColor: $lightGrey !default; //border to tabulator
$textSize: 1em !default; //table text size

//header theming
$headerBackgroundColor: $white !default; //border to tabulator
$headerBackgroundColorHover: $lightGrey !default; //border to tabulator
$headerTextColor: $black !default; //header text color
$headerBorderColor: $lightGrey !default;  //header border color
$headerSeparatorColor: $lightGrey !default; //header bottom separator color
$headerMargin:0.25em !default; //padding round header

//column header arrows
$sortArrowHover: $black !default;
$sortArrowActive: $black !default;
$sortArrowInactive: $lightGrey !default;

$columnResizeGuideColor: $lightGrey !default;

//row theming
$rowBackgroundColor: $white !default; //table row background color
$rowAltBackgroundColor: $white !default; //table row background color
$rowBorderColor: $lightGrey !default; //table border color
$rowTextColor: $black !default; //table text color
$rowHoverBackground: $lightGrey !default; //row background color on hover

$rowSelectedBackground: $lightGrey !default; //row background color when selected
$rowSelectedBackgroundHover: $lightGrey !default;//row background color when selected and hovered

$editBoxColor: $black !default; //border color for edit boxes
$errorColor: $black !default; //error indication

//footer theming
$footerBackgroundColor: $white !default; //border to tabulator
$footerTextColor: $black !default; //footer text color
$footerBorderColor: $lightGrey !default; //footer border color
$footerSeparatorColor: $lightGrey !default; //footer bottom separator color
$footerActiveColor: $black !default; //footer bottom active text color
$footerActiveBackground: $lightGrey !default; //footer bottom active text color

$spreadsheetActiveTabColor: $white !default; //color for the active spreadsheet tab

//range selection
$rangeBorderColor: $black !default; //range border color
$rangeHandleColor: $black !default; //range handle color
$rangeHeaderSelectedBackground: $lightGrey !default; //header background color when selected
$rangeHeaderSelectedTextColor: $black !default; //header text color when selected
$rangeHeaderHighlightBackground: $lightGrey !default; //header background color when highlighted
$rangeHeaderTextHighlightBackground: $black !default; //header text color when highlighted

//Tabulator Containing Element
.tabulator{
	position: relative;

	border: none;

	background-color: $backgroundColor;

	font-size:$textSize;
	text-align: left;
	overflow:hidden;
	margin-bottom: 1rem;
	
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	
	&[tabulator-layout="fitDataFill"]{
		.tabulator-tableholder{
			.tabulator-table{
				min-width:100%;
			}
		}
	}
	
	&[tabulator-layout="fitDataTable"]{
		display: inline-block;
	}
	
	&.tabulator-block-select{
		user-select: none;
	}
	
	&.tabulator-ranges{
		.tabulator-cell:not(.tabulator-editing){
			user-select: none;
		}
	}
		
	//column header containing element
	.tabulator-header{
		position:relative;
		box-sizing: border-box;
		
		width:100%;
		
		border-bottom:1px solid $black;
		background-color: $headerBackgroundColor;
		color: $headerTextColor;
		
		white-space: nowrap;
		overflow:hidden;
		
		-moz-user-select: none;
		-khtml-user-select: none;
		-webkit-user-select: none;
		-o-user-select: none;
		
		outline: none;
		
		&.tabulator-header-hidden{
			display:none;
		}
		
		.tabulator-header-contents{
			position: relative;
			overflow: hidden;
			
			.tabulator-headers{
				display: inline-block;
			}
		}
		
		//individual column header element
		.tabulator-col{
			display:inline-flex;
			position:relative;
			box-sizing:border-box;
			
			flex-direction: column;
			justify-content: flex-start;
			
			border-right: none;
			background:$headerBackgroundColor;
			
			text-align:left;
			vertical-align: bottom;
			overflow: hidden;
			
			&.tabulator-moving{
				position: absolute;
				border:1px solid $headerSeparatorColor;
				background: $headerBackgroundColorHover;
				pointer-events: none;
			}
			
			&.tabulator-range-highlight{
				background-color: $rangeHeaderHighlightBackground;
				color: $rangeHeaderTextHighlightBackground;
			}
			
			&.tabulator-range-selected{
				background-color: $rangeHeaderSelectedBackground;
				color: $rangeHeaderSelectedTextColor;
			}
			
			//hold content of column header
			.tabulator-col-content{
				box-sizing:border-box;
				position: relative;
				padding:4px;
				
				//header menu button
				.tabulator-header-popup-button{
					padding: 0 8px;
					
					&:hover{
						cursor: pointer;
						opacity: .6;
					}
				}
				
				//hold title and sort arrow
				.tabulator-col-title-holder{
					position: relative;
				}
				
				//hold title of column header
				.tabulator-col-title{
					box-sizing:border-box;
					width: 100%;
					
					font-weight: normal;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					vertical-align:bottom;
					
					&.tabulator-col-title-wrap{
						white-space: normal;
						text-overflow: initial;
					}
					
					//element to hold title editor
					.tabulator-title-editor{
						box-sizing: border-box;
						width: 100%;
						
						border:1px solid #999;
						
						padding:1px;
						
						background: #fff;
					}
					
					.tabulator-header-popup-button + .tabulator-title-editor{
						width:calc(100% - 22px);
					}
				}
				
				//column sorter arrow
				.tabulator-col-sorter{
					display: flex;
					align-items: center;
					
					position: absolute;
					top:0;
					bottom:0;
					right:4px;
					
					.tabulator-arrow{
						width: 0;
						height: 0;
						border-left: 6px solid transparent;
						border-right: 6px solid transparent;
						border-bottom: 6px solid $sortArrowInactive;
					}
				}
				
			}
			
			//complex header column group
			&.tabulator-col-group{
				
				//gelement to hold sub columns in column group
				.tabulator-col-group-cols{
					position:relative;
					display: flex;
					
					border-top:1px solid $headerBorderColor;
					overflow: hidden;
					
					margin-right:-1px;
				}
			}
			
			//header filter containing element
			.tabulator-header-filter{
				position: relative;
				box-sizing: border-box;
				margin-top:2px;
				width:100%;
				text-align: center;

				.tabulator-tick,
				.tabulator-tick-cross{
					color: $black !important;
					border-color: $black !important;
					background-color: transparent !important;
					text-shadow: none !important;
				}

				.tabulator-tick::before,
				.tabulator-tick::after,
				.tabulator-tick-cross::before,
				.tabulator-tick-cross::after{
					color: $black !important;
					border-color: $black !important;
				}
				
				//styling adjustment for inbuilt editors
				textarea{
					height:auto !important;
					background-color: $white;
					border: 1px solid $headerBorderColor;
					box-shadow: none;
					color: $headerTextColor;
					padding: 2px 6px;
				}
				
				svg{
					margin-top: 3px;
				}
				
				input{
					background-color: $white;
					border: 1px solid $headerBorderColor;
					box-shadow: none;
					color: $headerTextColor;
					padding: 2px 6px;
					-webkit-appearance: none;
					appearance: none;

					&:focus{
						border-color: $sortArrowActive;
						outline: none;
					}

					&::-ms-clear {
						width : 0;
						height: 0;
					}

					&[type="checkbox"]{
						-webkit-appearance: checkbox;
						appearance: checkbox;
						width: auto;
						height: auto;
						padding: 0;
						margin: 5px auto 0 auto;
						display: inline-block;
					}
				}

			select{
				background-color: transparent !important;
				border: 1px solid $headerBorderColor;
				box-shadow: none;
				color: $headerTextColor;
				padding: 2px 6px;
				-webkit-appearance: none;
				appearance: none;
				&:focus,
				&:active,
				&:hover{
					background-color: transparent !important;
				}
			}
			}
			
			//styling child elements for sortable columns
			&.tabulator-sortable{
				.tabulator-col-title{
					padding-right:25px;
				}
				
				@media (hover:hover) and (pointer:fine){
					&.tabulator-col-sorter-element:hover{
						cursor:pointer;
						background-color: $headerBackgroundColorHover;
					}
				}
				
				&[aria-sort="none"]{
					.tabulator-col-content .tabulator-col-sorter{
						color: $sortArrowInactive;
						
						@media (hover:hover) and (pointer:fine){
							&.tabulator-col-sorter-element .tabulator-arrow:hover{
								cursor:pointer;
								border-bottom: 6px solid $sortArrowHover;
							}
						}
						
						.tabulator-arrow{
							border-top: none;
							border-bottom: 6px solid $sortArrowInactive;
						}
					}
				}
				
				&[aria-sort="ascending"]{
					.tabulator-col-content .tabulator-col-sorter{
						color: $sortArrowActive;
						
						@media (hover:hover) and (pointer:fine){
							&.tabulator-col-sorter-element .tabulator-arrow:hover{
								cursor:pointer;
								border-bottom: 6px solid $sortArrowHover;
							}
						}
						
						.tabulator-arrow{
							border-top: none;
							border-bottom: 6px solid $sortArrowActive;
							
						}
					}
				}
				
				&[aria-sort="descending"]{
					.tabulator-col-content .tabulator-col-sorter{
						color: $sortArrowActive;
						
						@media (hover:hover) and (pointer:fine){
							&.tabulator-col-sorter-element .tabulator-arrow:hover{
								cursor:pointer;
								border-top: 6px solid $sortArrowHover;
							}
						}
						
						.tabulator-arrow{
							border-bottom: none;
							border-top: 6px solid $sortArrowActive;
							color: $sortArrowActive;
						}
					}
				}
			}
			
			
			&.tabulator-col-vertical{
				.tabulator-col-content{
					.tabulator-col-title{
						writing-mode: vertical-rl;
						text-orientation: mixed;
						
						display:flex;
						align-items:center;
						justify-content:center;
					}
				}
				
				&.tabulator-col-vertical-flip{
					.tabulator-col-title{
						transform: rotate(180deg);
					}
				}
				
				&.tabulator-sortable{
					.tabulator-col-title{
						padding-right:0;
						padding-top:20px;
					}
					
					&.tabulator-col-vertical-flip{
						.tabulator-col-title{
							padding-right:0;
							padding-bottom:20px;
						}
						
					}
					
					.tabulator-col-sorter{
						justify-content: center;
						left:0;
						right:0;
						top:4px;
						bottom:auto;
					}
				}
			}
		}
		
		.tabulator-frozen{
			position: sticky;
			left:0;
			
			// background-color: inherit;
			
			z-index: 11;
			
			&.tabulator-frozen-left{
				border-right:2px solid $rowBorderColor;
			}
			
			&.tabulator-frozen-right{
				border-left:2px solid $rowBorderColor;
			}
		}
		
		
		.tabulator-calcs-holder{
			box-sizing:border-box;
			display: inline-block;
			
			background:lighten($headerBackgroundColor, 5%) !important;
			
			border-top:1px solid $rowBorderColor;
			border-bottom:1px solid $headerBorderColor;
			
			// overflow: hidden;
			
			.tabulator-row{
				background:lighten($headerBackgroundColor, 5%) !important;
				
				.tabulator-col-resize-handle{
					display: none;
				}
			}
		}
		
		.tabulator-frozen-rows-holder{	
			display: inline-block;	
			&:empty{
				display: none;
			}
		}
	}
	
	//scrolling element to hold table
	.tabulator-tableholder{
		position:relative;
		width:100%;
		white-space: nowrap;
		overflow:auto;
		-webkit-overflow-scrolling: touch;
		
		&:focus{
			outline: none;
		}
		
		//default placeholder element
		.tabulator-placeholder{
			box-sizing:border-box;
			display: flex;
			align-items:center;
			justify-content: center;
			
			min-width:100%;
			width:100%;
			
			&[tabulator-render-mode="virtual"]{
				min-height:100%;
			}
			
			.tabulator-placeholder-contents {
				display: inline-block;
				text-align: center;
				
				padding:10px;
				
				color:#ccc;
				font-size: 20px;
				
				white-space: normal;
			}
		}
		
		//element to hold table rows
		.tabulator-table{
			position:relative;
			display:inline-block;
			background-color:$rowBackgroundColor;
			white-space: nowrap;
			overflow:visible;
			color:$rowTextColor;
			
			//row element
			.tabulator-row{
				&.tabulator-calcs{
					background:darken($rowAltBackgroundColor, 5%) !important;
					
					&.tabulator-calcs-top{
						border-bottom:2px solid $rowBorderColor;
					}
					
					&.tabulator-calcs-bottom{
						border-top:2px solid $rowBorderColor;
					}
				}
			}
			
		}
		
		.tabulator-range-overlay {
			position: absolute;
			inset: 0;
			z-index: 10;
			pointer-events: none;
			
			.tabulator-range {
				position: absolute;
				box-sizing: border-box;
				border: 1px solid $rangeBorderColor;
				
				&.tabulator-range-active::after {
					content: '';
					position: absolute;
					right: -3px;
					bottom: -3px;
					width: 6px;
					height: 6px;
					background-color: $rangeHandleColor;
					border-radius: 999px;
				}
			}
			
			.tabulator-range-cell-active {
				position: absolute;
				box-sizing: border-box;
				border: 2px solid $rangeBorderColor;
			}
		}
	}
	
	//footer element
	.tabulator-footer{
		border-top: none;
		background-color: $footerBackgroundColor;
		
		color: $footerTextColor;
		white-space:nowrap;
		user-select:none;
		
		-moz-user-select: none;
		-khtml-user-select: none;
		-webkit-user-select: none;
		-o-user-select: none;
		
		.tabulator-footer-contents {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			
			padding:5px 10px;
			
			&:empty{
				display: none;
			}
		}
		
		.tabulator-spreadsheet-tabs{
			margin-top:-5px;
			
			overflow-x: auto;
			
			.tabulator-spreadsheet-tab{
				display: inline-block;
				padding:5px;
				
				border:$borderColor 1px solid;
				border-top: none;
				border-bottom-left-radius: 5px;
				border-bottom-right-radius: 5px;
				
				font-size: .9em;
				
				&:hover{
					cursor:pointer;
					opacity: .7;
				}
				
				&.tabulator-spreadsheet-tab-active{
					background: $spreadsheetActiveTabColor;
				}
			}
		}
		
		.tabulator-calcs-holder{
			box-sizing:border-box;
			width:100%;
			
			text-align: left;
			
			background:lighten($footerBackgroundColor, 5%) !important;
			border-bottom:1px solid $rowBorderColor;
			border-top:1px solid $rowBorderColor;
			
			overflow: hidden;
			
			.tabulator-row{
				display: inline-block;
				background:lighten($footerBackgroundColor, 5%) !important;
				
				.tabulator-col-resize-handle{
					display: none;
				}
			}
			
			
			&:only-child{
				margin-bottom:-5px;
				border-bottom:none;
			}
		}
		
		&>*+.tabulator-page-counter{
			margin-left:10px;
		}
		
		.tabulator-page-counter {
			font-weight: normal;
		}
		
		.tabulator-paginator{
			flex:1;
			
			text-align: left;
			color: $footerTextColor;
			font-weight: normal;
		}
		
		//pagination container element
		.tabulator-page-size{
			display:inline-block;
			
			margin:0 5px;
			padding:2px 5px;
			
			border:1px solid $footerBorderColor;
			border-radius:3px;
			font-family: inherit;
			label{
				font-weight: normal;
			}
			select{
				font-family: inherit;
			}
		}
		
		.tabulator-pages{
			margin:0 7px;
		}
		
		//pagination button
		.tabulator-page{
			display:inline-block;
			color: $black;
			margin:0 2px;
			padding:2px 5px;
			font-family: inherit;
			
			border:1px solid $footerBorderColor;
			border-radius:3px;
			
			background: $whiteTransparent;
			
			&.active{
				color:$footerActiveColor;
				background: $footerActiveBackground;
			}
			
			&:disabled{
				opacity:.5;
			}
			
			&:not(disabled){
				@media (hover:hover) and (pointer:fine){
					&:hover{
						cursor:pointer;
						background: $blackTransparentMedium;
						color:#black;
					}
				}
			}
		}
	}
	
	//column resize handles
	.tabulator-col-resize-handle{
		position: relative;
		display: inline-block;
		width: 6px;
		
		margin-left: -3px;
		margin-right: -3px;
		
		z-index: 11;
		vertical-align: middle;
		
		@media (hover:hover) and (pointer:fine){
			&:hover{
				cursor:ew-resize;
			}
		}
		
		&:last-of-type{
			width:3px;
			margin-right:0;
		}
	}
	
	//column resize guide
	.tabulator-col-resize-guide {
		position: absolute;
		top: 0;
		width: 4px;
		height: 100%;
		margin-left: -0.5px;
		background-color: $columnResizeGuideColor;
		opacity: .5;
	}
	
	//row resize guide
	.tabulator-row-resize-guide {
		position: absolute;
		left: 0;
		width: 100%;
		height: 4px;
		margin-top: -0.5px;
		background-color: $columnResizeGuideColor;
		opacity: .5;
	}
	
	
	//holding div that contains loader and covers tabulator element to prevent interaction
	.tabulator-alert{
		position:absolute;
		display: flex;
		align-items:center;
		
		top:0;
		left:0;
		z-index:100;
		
		height:100%;
		width:100%;
		background: $blackTransparentHeavy;
		text-align:center;
		
		//loading message element
		.tabulator-alert-msg {
			display:inline-block;
			
			margin:0 auto;
			padding:10px 20px;
			
			border-radius:10px;
			
			background:#fff;
			font-size:16px;
			
			//loading message
			&.tabulator-alert-state-msg {
				border:4px solid #333;
				color:#000;
			}
			
			//error message
			&.tabulator-alert-state-error {
				border:4px solid #D00;
				color:#590000;
			}
		}
	}
}

//row element
.tabulator-row{
	position: relative;
	box-sizing: border-box;
	min-height:$textSize + ($headerMargin * 2);
	background-color: $rowBackgroundColor;
	
	
	&.tabulator-row-even{
		background-color: $rowAltBackgroundColor;
	}
	
	@media (hover:hover) and (pointer:fine){
		&.tabulator-selectable:hover{
			background-color:$rowHoverBackground;
			cursor: pointer;
		}
	}
	
	&.tabulator-selected{
		background-color:$rowSelectedBackground;
	}
	
	@media (hover:hover) and (pointer:fine){
		&.tabulator-selected:hover{
			background-color:$rowSelectedBackgroundHover;
			cursor: pointer;
		}
	}
	
	&.tabulator-row-moving{
		border:1px solid #000;
		background:#fff;
	}
	
	&.tabulator-moving{
		position: absolute;
		
		border-top:1px solid  $rowBorderColor;
		border-bottom:1px solid  $rowBorderColor;
		
		pointer-events: none;
		z-index:15;
	}
	
	&.tabulator-range-highlight{
		.tabulator-cell.tabulator-range-row-header{
			background-color: $rangeHeaderHighlightBackground;
			color: $rangeHeaderTextHighlightBackground;
		}
		
		&.tabulator-range-selected{
			.tabulator-cell.tabulator-range-row-header{
				background-color: $rangeHeaderSelectedBackground;
				color: $rangeHeaderSelectedTextColor;
			}	
		}
	}
	
	
	&.tabulator-range-selected{
		.tabulator-cell.tabulator-range-row-header{
			background-color: $rangeHeaderSelectedBackground;
			color: $rangeHeaderSelectedTextColor;
		}
	}
	
	//row resize handles
	.tabulator-row-resize-handle{
		position:absolute;
		right:0;
		bottom:0;
		left:0;
		height:5px;
		
		&.prev{
			top:0;
			bottom:auto;
		}
		
		@media (hover:hover) and (pointer:fine){
			&:hover{
				cursor:ns-resize;
			}
		}
	}
	
	.tabulator-responsive-collapse{
		box-sizing:border-box;
		
		padding:5px;
		
		border-top:1px solid $rowBorderColor;
		border-bottom:1px solid $rowBorderColor;
		
		&:empty{
			display:none;
		}
		
		table{
			font-size:$textSize;
			
			tr{
				td{
					position: relative;
					
					&:first-of-type{
						padding-right:10px;
					}
				}
			}
		}
	}
	
	//cell element
	.tabulator-cell{
		display:inline-block;
		position: relative;
		box-sizing:border-box;
		padding:4px;
		border-right: none;
		border-bottom:1px solid $rowBorderColor;
		vertical-align:middle;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
		outline:none;

		.tabulator-tick,
		.tabulator-tick-cross{
			color: $black !important;
			border-color: $black !important;
			background-color: transparent !important;
			text-shadow: none !important;
		}
		
		.tabulator-tick::before,
		.tabulator-tick::after,
		.tabulator-tick-cross::before,
		.tabulator-tick-cross::after{
			color: $black !important;
			border-color: $black !important;
		}
		
		&.tabulator-row-header{
			border-right: none;
			border-bottom:1px solid $rowBorderColor;
			background:$headerBackgroundColor;
		}
		
		&.tabulator-frozen{
			display: inline-block;
			position: sticky;
			
			left:0;
			
			background-color: inherit;
			
			z-index: 11;
			
			&.tabulator-frozen-left{
				border-right:2px solid $rowBorderColor;
			}
			
			&.tabulator-frozen-right{
				border-left:2px solid $rowBorderColor;
			}
		}
		
		&.tabulator-editing{
			border:1px solid $editBoxColor;
			outline:none;
			
			padding: 0;
			
			input, select{
				border:1px;
				background:transparent;
				outline:none;
			}
		}
		
		&.tabulator-validation-fail{
			border:1px solid $errorColor;
			
			input, select{
				border:1px;
				background:transparent;
				
				color: $errorColor;
			}
		}
		
		//movable row handle
		&.tabulator-row-handle{
			display: inline-flex;
			align-items:center;
			justify-content:center;
			
			-moz-user-select: none;
			-khtml-user-select: none;
			-webkit-user-select: none;
			-o-user-select: none;
			
			//handle holder
			.tabulator-row-handle-box{
				width:80%;
				
				//Hamburger element
				.tabulator-row-handle-bar{
					width:100%;
					height:3px;
					margin-top:2px;
					background:#666;
				}
			}
		}
		
		&.tabulator-range-selected:not(.tabulator-range-only-cell-selected):not(.tabulator-range-row-header){
			background-color: $rowSelectedBackground;
		}
		
		.tabulator-data-tree-branch-empty{
			display:inline-block;
			width:7px;
		}
		
		.tabulator-data-tree-branch{
			display:inline-block;
			vertical-align:middle;
			
			height:9px;
			width:7px;
			
			margin-top:-9px;
			margin-right:5px;
			
			border-bottom-left-radius:1px;
			
			border-left:2px solid $rowBorderColor;
			border-bottom:2px solid $rowBorderColor;
		}
		
		.tabulator-data-tree-control{
			
			display:inline-flex;
			justify-content:center;
			align-items:center;
			vertical-align:middle;
			
			height:11px;
			width:11px;
			
			margin-right:5px;
			
			border:1px solid $rowTextColor;
			border-radius:2px;
			background: $blackTransparent;
			
			overflow:hidden;
			
			@media (hover:hover) and (pointer:fine){
				&:hover{
					cursor:pointer;
					background: $blackTransparentMedium;
				}
			}
			
			.tabulator-data-tree-control-collapse{
				display:inline-block;
				position: relative;
				
				height: 7px;
				width: 1px;
				
				background: transparent;
				
				&:after {
					position: absolute;
					content: "";
					left: -3px;
					top: 3px;
					
					height: 1px;
					width: 7px;
					
					background: $rowTextColor;
				}
			}
			
			.tabulator-data-tree-control-expand{
				display:inline-block;
				position: relative;
				
				height: 7px;
				width: 1px;
				
				background: $rowTextColor;
				
				&:after {
					position: absolute;
					content: "";
					left: -3px;
					top: 3px;
					
					height: 1px;
					width: 7px;
					
					background: $rowTextColor;
				}
			}
			
		}
		
		.tabulator-responsive-collapse-toggle{
			display: inline-flex;
			align-items:center;
			justify-content:center;
			
			-moz-user-select: none;
			-khtml-user-select: none;
			-webkit-user-select: none;
			-o-user-select: none;
			
			height:15px;
			width:15px;
			
			border-radius:20px;
			background:#666;
			
			color:$rowBackgroundColor;
			font-size:1.1em;
			
			@media (hover:hover) and (pointer:fine){
				&:hover{
					opacity:.7;
					cursor: pointer;
				}
			}
			
			&.open{
				.tabulator-responsive-collapse-toggle-close{
					display:initial;
				}
				
				.tabulator-responsive-collapse-toggle-open{
					display:none;
				}
			}
			
			svg{
				stroke:$rowBackgroundColor;
			}
			
			.tabulator-responsive-collapse-toggle-close{
				display:none;
			}
		}
		
		.tabulator-traffic-light{
			display: inline-block;
			height:14px;
			width:14px;
			
			border-radius:14px;
		}
	}
	
	//row grouping element
	&.tabulator-group{
		box-sizing:border-box;
		border-bottom:1px solid #999;
		border-right:1px solid $rowBorderColor;
		border-top:1px solid #999;
		padding:5px;
		padding-left:10px;
		background:#ccc;
		
		min-width: 100%;
		
		@media (hover:hover) and (pointer:fine){
			&:hover{
				cursor:pointer;
				background-color: $blackTransparent;
			}
		}
		
		&.tabulator-group-visible{
			
			.tabulator-arrow{
				margin-right:10px;
				border-left: 6px solid transparent;
				border-right: 6px solid transparent;
				border-top: 6px solid $sortArrowActive;
				border-bottom: 0;
			}
			
		}
		
		&.tabulator-group-level-1{
			padding-left:30px;
		}
		
		&.tabulator-group-level-2{
			padding-left:50px;
		}
		
		&.tabulator-group-level-3{
			padding-left:70px;
		}
		
		&.tabulator-group-level-4{
			padding-left:90px;
		}
		
		&.tabulator-group-level-5{
			padding-left:110px;
		}
		
		.tabulator-group-toggle{
			display: inline-block;
		}
		
		//sorting arrow
		.tabulator-arrow{
			display: inline-block;
			width: 0;
			height: 0;
			margin-right:16px;
			border-top: 6px solid transparent;
			border-bottom: 6px solid transparent;
			border-right: 0;
			border-left: 6px solid $sortArrowActive;
			vertical-align:middle;
		}
		
		span{
			margin-left:10px;
			color:#d00;
		}
	}
	
}

.tabulator-toggle{
	box-sizing: border-box;

	display: flex;
	flex-direction: row;

	border:1px solid #ccc;
	background:#dcdcdc;

	&.tabulator-toggle-on{
		background:#1c6cc2;
	}
	
	.tabulator-toggle-switch{
		box-sizing: border-box;
		border:1px solid #ccc;
		
		background:#fff;
	}
}

.tabulator-popup-container{
	position: absolute;
	display:inline-block;
	box-sizing:border-box;
	
	background:$rowBackgroundColor;
	border:1px solid $rowBorderColor;
	box-shadow: 0 0 5px 0 $shadowColor;
	
	font-size:$textSize;
	
	overflow-y:auto;
	-webkit-overflow-scrolling: touch;
	
	z-index: 10000;
}

.tabulator.tabulator-ltr{
	direction: ltr;
}

.tabulator.tabulator-rtl{
	text-align: initial;
	direction: rtl;
	
	.tabulator-header {
		.tabulator-col{
			text-align: initial;
			border-left: none;
			border-right:initial;
			
			&.tabulator-col-group{
				.tabulator-col-group-cols{
					margin-right:initial;
					margin-left:-1px;
				}
			}
			
			&.tabulator-sortable{
				.tabulator-col-title{
					padding-right:0;
					padding-left:25px;
				}
			}
			
			.tabulator-col-content{
				.tabulator-col-sorter{
					left:8px;
					right:initial;
				}
			}
		}
	}
	
	.tabulator-tableholder{
		.tabulator-range-overlay {
			.tabulator-range {
				&.tabulator-range-active::after {
					content: '';
					position: absolute;
					left: -3px;
					right:initial;
					bottom: -3px;
					width: 6px;
					height: 6px;
					background-color: $rangeHandleColor;
					border-radius: 999px;
				}
			}
		}
	}
	
	.tabulator-row{
		.tabulator-cell{
			border-right:initial;
			border-left: none;
			border-bottom:1px solid $rowBorderColor;
			
			.tabulator-data-tree-branch{
				margin-right:initial;
				margin-left:5px;
				
				border-bottom-left-radius:initial;
				border-bottom-right-radius:1px;
				
				border-left:initial;
				border-right:2px solid $rowBorderColor;
			}
			
			.tabulator-data-tree-control{
				margin-right:initial;
				margin-left:5px;
			}
			
			&.tabulator-frozen{
				
				&.tabulator-frozen-left{
					border-left:2px solid $rowBorderColor;
				}
				
				&.tabulator-frozen-right{
					border-right:2px solid $rowBorderColor;
				}
			}
		}
		
		.tabulator-col-resize-handle{
			&:last-of-type{
				width:3px;
				margin-left:0;
				margin-right:-3px;
			}
		}
		
	}
	
	.tabulator-footer {
		.tabulator-calcs-holder{
			text-align: initial;
		}
		
	}
	
}
