
@import "variables_table.scss";

//Main Theme Variables
$backgroundColor: $background !default; //background color of tabulator
$textSize:14px !default; //table text size

//header themeing
$headerBackgroundColor:$headerBackground !default; //border to tabulator
$headerTextColor:$headerColor !default; //header text colour
$headerBorderColor:#ddd !default;  //header border color
$headerSeperatorColor:#999 !default; //header bottom seperator color
$headerMargin:4px !default; //padding round header

//column header arrows
$sortArrowActive: #666 !default;
$sortArrowInactive: #bbb !default;

//row themeing
$rowBorderColor:#ddd !default; //table border color
$rowTextColor:#333 !default; //table text color

$rowSelectedBackground: #9ABCEA !default; //row background color when selected
$rowSelectedBackgroundHover: #769BCC !default;//row background color when selected and hovered


$editBoxColor:#1D68CD !default; //border color for edit boxes
$errorColor:#dd0000 !default; //error indication

//footer themeing
$footerBackgroundColor:#fff !default; //border to tabulator
$footerTextColor:#555 !default; //footer text colour
$footerBorderColor:#aaa !default; //footer border color
$footerSeperatorColor:#999 !default; //footer bottom seperator color
$footerActiveColor:#d00 !default; //footer bottom active text color


//Tabulator Containing Element
.tabulator{
	position: relative;
	background-color: $backgroundColor;
	overflow:hidden;
	font-size:$textSize;
	text-align: left;
	width: 100%;

	margin: $margin;
	border: $border;
	box-shadow: $boxShadow;
	border-radius: $borderRadius;
	color: $color;

	-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;
	}

	//column header containing element
	.tabulator-header{
		position:relative;
		box-sizing: border-box;

		width:100%;

		border-bottom: $headerBorder;
		background-color: $headerBackgroundColor;

		box-shadow: $headerBoxShadow;

		color: $headerTextColor;
		font-style: $headerFontStyle;
		font-weight: $headerFontWeight;
		text-transform: $headerTextTransform;

		white-space: nowrap;
		overflow:hidden;

		-moz-user-select: none;
		-khtml-user-select: none;
		-webkit-user-select: none;
		-o-user-select: none;

		&.tabulator-header-hidden{
			display:none;
		}

		//individual column header element
		.tabulator-col{
			display:inline-block;

			position:relative;
			box-sizing:border-box;
			// border-right: $headerDivider;
			background-color: $headerBackgroundColor;
			text-align:left;
			vertical-align: bottom;
			overflow: hidden;

			&.tabulator-moving{
				position: absolute;
				border:1px solid  $headerSeperatorColor;
				background:darken($headerBackgroundColor, 10%);
				pointer-events: none;
			}

			//hold content of column header
			.tabulator-col-content{
				box-sizing:border-box;
				position: relative;
				padding: $headerVerticalPadding $headerHorizontalPadding;

				//header menu button
				.tabulator-header-menu-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%;

					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					vertical-align:bottom;

					//element to hold title editor
					.tabulator-title-editor{
						box-sizing: border-box;
						width: 100%;

						border:1px solid #999;

						padding:1px;

						background: #fff;
					}

					.tabulator-header-menu-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;
				}
			}


			//hide left resize handle on first column
			&:first-child{
				.tabulator-col-resize-handle.prev{
					display: none;
				}
			}

			//header filter containing element
			.tabulator-header-filter{
				position: relative;
				box-sizing: border-box;
				margin-top:2px;
				width:100%;
				text-align: center;

				//styling adjustment for inbuilt editors
				textarea{
					height:auto !important;
				}

				svg{
					margin-top: 3px;
				}

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


			//styling child elements for sortable columns
			&.tabulator-sortable{
				.tabulator-col-title{
					padding-right:25px;
				}

				&:hover{
					cursor:pointer;
					background-color:darken($headerBackgroundColor, 10%);
				}

				&[aria-sort="none"]{
					.tabulator-col-content .tabulator-col-sorter{
						color: $sortArrowInactive;

						.tabulator-arrow{
							border-top: none;
							border-bottom: 6px solid $sortArrowInactive;
						}
					}
				}

				&[aria-sort="asc"]{
					.tabulator-col-content .tabulator-col-sorter{
						color: $sortArrowActive;

						.tabulator-arrow{
							border-top: none;
							border-bottom: 6px solid $sortArrowActive;

						}
					}
				}

				&[aria-sort="desc"]{
					.tabulator-col-content .tabulator-col-sorter{
						color: $sortArrowActive;

						.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{
			display: inline-block;
			position: absolute;

			// background-color: inherit;

			z-index: 10;

			&.tabulator-frozen-left{
				border-right:2px solid $rowBorderColor;
			}

			&.tabulator-frozen-right{
				border-left:2px solid $rowBorderColor;
			}
		}


		.tabulator-calcs-holder{
			box-sizing:border-box;
			min-width:600%;

			background:lighten($headerBackgroundColor, 5%) !important;

			.tabulator-row{
				background:lighten($headerBackgroundColor, 5%) !important;

				.tabulator-col-resize-handle{
					display: none;
				}
			}

			border-top:1px solid $rowBorderColor;
			border-bottom:1px solid $headerBorderColor;

			overflow: hidden;
		}

		.tabulator-frozen-rows-holder{
			min-width:600%;

			&: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;

			&[tabulator-render-mode="virtual"]{
				min-height:100%;
				min-width:100%;
			}

			width:100%;

			span{
				display: inline-block;

				margin:0 auto;
				padding:10px;

				color:#000;
				font-weight: bold;
				font-size: 20px;
			}
		}

		//element to hold table rows
		.tabulator-table{
			position:relative;
			display:inline-block;
			white-space: nowrap;
			overflow:visible;
			color:$rowTextColor;

			.tabulator-row{
				&.tabulator-calcs{
					font-weight: bold;
					background:darken($background, 5%) !important;

					&.tabulator-calcs-top{
						border-bottom:2px solid $rowBorderColor;
					}

					&.tabulator-calcs-bottom{
						border-top:2px solid $rowBorderColor;
					}
				}
			}
		}
	}


	//column resize handles
	.tabulator-col-resize-handle{
		position:absolute;
		right:0;
		top:0;
		bottom:0;
		width:5px;

		&.prev{
			left:0;
			right:auto;
		}

		&:hover{
			cursor:ew-resize;
		}
	}


	//footer element
	.tabulator-footer{
		padding: $footerVerticalPadding $footerHorizontalPadding;

		border-top: $footerBorder;
		box-shadow: $footerBoxShadow;

		background: $footerBackground;


		text-align:right;
		color: $footerColor;

		font-style: $footerFontStyle;
		font-weight: $footerFontWeight;
		text-transform: $footerTextTransform;

		white-space:nowrap;
		user-select:none;

		-moz-user-select: none;
		-khtml-user-select: none;
		-webkit-user-select: none;
		-o-user-select: none;

		.tabulator-calcs-holder{
			box-sizing:border-box;
			width:calc(100% + 20px);
			margin:(-$footerVerticalPadding) (-$footerHorizontalPadding) $footerVerticalPadding (-$footerHorizontalPadding);

			text-align: left;

			background:lighten($footerBackground, 5%) !important;

			.tabulator-row{
				font-weight: bold;
				background:lighten($footerBackground, 5%) !important;

				.tabulator-col-resize-handle{
					display: none;
				}
			}

			border-bottom:1px solid $rowBorderColor;
			border-top:1px solid $rowBorderColor;

			overflow: hidden;

			&:only-child{
				margin-bottom:-$footerVerticalPadding;
				border-bottom:none;
			}
		}

		//pagination container element
		.tabulator-paginator{
			color: $footerTextColor;
			font-family:inherit;
			font-weight:inherit;
			font-size:inherit;
		}

		//page size select element
		.tabulator-page-size{
			display:inline-block;

			margin:0 5px;
			padding:2px 5px;

			border:1px solid $footerBorderColor;
			border-radius:3px;
		}

		//pagination container element
		.tabulator-pages{
			margin:0 7px;
		}

		//pagination button
		.tabulator-page{
			display:inline-block;

			margin:0 2px;
			padding:2px 5px;

			border:1px solid $footerBorderColor;
			border-radius:3px;

			background:rgba(255,255,255,.2);

			&.active{
				color:$footerActiveColor;
			}

			&:disabled{
				opacity:.5;
			}

			&:not(.disabled){
				&:hover{
					cursor:pointer;
					background:rgba(0,0,0,.2);
					color:#fff;
				}
			}
		}
	}

	//holding div that contains loader and covers tabulator element to prevent interaction
	.tabulator-loader{
		position:absolute;
		display: flex;
		align-items:center;

		top:0;
		left:0;
		z-index:100;

		height:100%;
		width:100%;
		background:rgba(0,0,0,.4);
		text-align:center;

		//loading message element
		.tabulator-loader-msg{
			display:inline-block;

			margin:0 auto;
			padding:10px 20px;

			border-radius:10px;

			background:#fff;
			font-weight:bold;
			font-size:16px;

			//loading message
			&.tabulator-loading{
				border:4px solid #333;
				color:#000;
			}

			//error message
			&.tabulator-error{
				border:4px solid #D00;
				color:#590000;
			}
		}
	}


	//Semantic-ui theming classes

	.tabulator-tableHolder{
		.tabulator-table{
			.tabulator-row{
				&.positive, .tabulator-cell.positive{
					box-shadow: $positiveBoxShadow;
					background: $positiveBackgroundColor !important;
					color: $positiveColor !important;

					&:hover{
						background: $positiveBackgroundHover !important;
						color: $positiveColorHover !important;
					}
				}

				&.negative, .tabulator-cell.negative{
					box-shadow: $negativeBoxShadow;
					background: $negativeBackgroundColor !important;
					color: $negativeColor !important;

					&:hover{
						background: $negativeBackgroundHover !important;
						color: $negativeColorHover !important;
					}
				}

				&.error, .tabulator-cell.error{
					box-shadow: $errorBoxShadow;
					background: $errorBackgroundColor !important;
					color: $errorColor !important;

					&:hover{
						background: $errorBackgroundHover !important;
						color: $errorColorHover !important;
					}
				}

				&.warning, .tabulator-cell.warning{
					box-shadow: $warningBoxShadow;
					background: $warningBackgroundColor !important;
					color: $warningColor !important;

					&:hover{
						background: $warningBackgroundHover !important;
						color: $warningColorHover !important;
					}
				}

				&.active, .tabulator-cell.active{
					box-shadow: $activeBoxShadow;
					background: $activeBackgroundColor !important;
					color: $activeColor !important;

					&:hover{
						background: $positiveBackgroundHover !important;
						color: $positiveColorHover !important;
					}
				}

				&.active, &.disabled:hover, .tabulator-cell.active{
					pointer-events: none;
					color: $disabledTextColor;
				}
			}
		}
	}


	&.inverted{

		background: $invertedBackground;
		color: $invertedCellColor;
		border: $invertedBorder;

		.tabulator-header{
			background-color: $invertedHeaderBackground;
			border-color: $invertedHeaderBorderColor !important;
			color: $invertedHeaderColor;

			.tabulator-col{
				border-color: $invertedCellBorderColor !important;
			}
		}

		.tabulator-tableHolder{
			.tabulator-table{
				.tabulator-row{
					color: $invertedCellColor;
					border: $invertedBorder;

					.tabulator-cell{
						border-color: $invertedCellBorderColor !important;
					}
				}
			}
		}

		.tabulator-footer{
			background: $definitionPageBackground;
		}
	}

	&.striped{
		.tabulator-tableHolder{
			.tabulator-table{
				.tabulator-row{
					&:nth-child(even){
						background-color: $basicTableStripedBackground !important;
					}
				}
			}
		}
	}

	&.celled{
		border:1px solid $borderColor;

		.tabulator-header{
			.tabulator-col{
				border-right:$cellBorder;
			}
		}

		.tabulator-tableHolder{
			.tabulator-table{
				.tabulator-row{
					.tabulator-cell{
						border-right:$cellBorder;
					}
				}
			}
		}

	}


	&[class*="single line"]{
		.tabulator-tableHolder{
			.tabulator-table{
				.tabulator-row{
					.tabulator-cell{
						border-right:none;
					}
				}
			}
		}
	}

	//coloured table varients
	/* Red */
	&.red {
		border-top: $coloredBorderSize solid $red;
	}
	&.inverted.red {
		background-color: $red !important;
		color: $white !important;
	}

	/* Orange */
	&.orange {
		border-top: $coloredBorderSize solid $orange;
	}
	&.inverted.orange {
		background-color: $orange !important;
		color: $white !important;
	}

	/* Yellow */
	&.yellow {
		border-top: $coloredBorderSize solid $yellow;
	}
	&.inverted.yellow {
		background-color: $yellow !important;
		color: $white !important;
	}

	/* Olive */
	&.olive {
		border-top: $coloredBorderSize solid $olive;
	}
	&.inverted.olive {
		background-color: $olive !important;
		color: $white !important;
	}

	/* Green */
	&.green {
		border-top: $coloredBorderSize solid $green;
	}
	&.inverted.green {
		background-color: $green !important;
		color: $white !important;
	}

	/* Teal */
	&.teal {
		border-top: $coloredBorderSize solid $teal;
	}
	&.inverted.teal {
		background-color: $teal !important;
		color: $white !important;
	}

	/* Blue */
	&.blue {
		border-top: $coloredBorderSize solid $blue;
	}
	&.inverted.blue {
		background-color: $blue !important;
		color: $white !important;
	}

	/* Violet */
	&.violet {
		border-top: $coloredBorderSize solid $violet;
	}
	&.inverted.violet {
		background-color: $violet !important;
		color: $white !important;
	}

	/* Purple */
	&.purple {
		border-top: $coloredBorderSize solid $purple;
	}
	&.inverted.purple {
		background-color: $purple !important;
		color: $white !important;
	}

	/* Pink */
	&.pink {
		border-top: $coloredBorderSize solid $pink;
	}
	&.inverted.pink {
		background-color: $pink !important;
		color: $white !important;
	}

	/* Brown */
	&.brown {
		border-top: $coloredBorderSize solid $brown;
	}
	&.inverted.brown {
		background-color: $brown !important;
		color: $white !important;
	}

	/* Grey */
	&.grey {
		border-top: $coloredBorderSize solid $grey;
	}
	&.inverted.grey {
		background-color: $grey !important;
		color: $white !important;
	}

	/* Black */
	&.black {
		border-top: $coloredBorderSize solid $black;
	}
	&.inverted.black {
		background-color: $black !important;
		color: $white !important;
	}

	&.padded{
		.tabulator-header{
			.tabulator-col{
				.tabulator-col-content{
					padding: $paddedVerticalPadding $paddedHorizontalPadding;

					.tabulator-arrow{
						top:20px;
					}
				}
			}
		}
		.tabulator-tableHolder{
			.tabulator-table{
				.tabulator-row{
					.tabulator-cell{
						padding: $paddedVerticalPadding $paddedHorizontalPadding;
					}
				}
			}
		}

		&.very{
			.tabulator-header{
				.tabulator-col{
					.tabulator-col-content{
						padding: $veryPaddedVerticalPadding $veryPaddedHorizontalPadding;

						.tabulator-arrow{
							top:26px;
						}
					}
				}
			}
			.tabulator-tableHolder{
				.tabulator-table{
					.tabulator-row{
						.tabulator-cell{
							padding: $veryPaddedVerticalPadding $veryPaddedHorizontalPadding;
						}
					}
				}
			}
		}
	}

	&.compact{
		.tabulator-header{
			.tabulator-col{
				.tabulator-col-content{
					padding: $compactVerticalPadding $compactHorizontalPadding;

					.tabulator-arrow{
						top:12px;
					}
				}
			}
		}
		.tabulator-tableHolder{
			.tabulator-table{
				.tabulator-row{
					.tabulator-cell{
						padding: $compactVerticalPadding $compactHorizontalPadding;
					}
				}
			}
		}

		&.very{
			.tabulator-header{
				.tabulator-col{
					.tabulator-col-content{
						padding: $veryCompactVerticalPadding $veryCompactHorizontalPadding;

						.tabulator-arrow{
							top:10px;
						}
					}
				}
			}
			.tabulator-tableHolder{
				.tabulator-table{
					.tabulator-row{
						.tabulator-cell{
							padding: $veryCompactVerticalPadding $veryCompactHorizontalPadding;
						}
					}
				}
			}
		}
	}
}


//row element
.tabulator-row{
	position: relative;
	box-sizing: border-box;

	min-height: $textSize + ($headerMargin * 2);
	border-bottom: $rowBorder;

	&.tabulator-selectable:hover{
		box-shadow: $activeBoxShadow;
		background: $activeBackgroundColor !important;
		color: $activeColor !important;
		cursor: pointer;
	}

	&.tabulator-selected{
		background-color:$rowSelectedBackground;
	}

	&.tabulator-selected:hover{
		background-color:$rowSelectedBackgroundHover;
		cursor: pointer;
	}

	&.tabulator-moving{
		position: absolute;

		border-top:1px solid  $rowBorderColor;
		border-bottom:1px solid  $rowBorderColor;

		pointer-events: none !important;
		z-index:15;
	}

	//row resize handles
	.tabulator-row-resize-handle{
		position:absolute;
		right:0;
		bottom:0;
		left:0;
		height:5px;

		&.prev{
			top:0;
			bottom:auto;
		}

		&:hover{
			cursor:ns-resize;
		}
	}

	.tabulator-frozen{
		display: inline-block;
		position: absolute;

		background-color: inherit;

		z-index: 10;

		&.tabulator-frozen-left{
			border-right:2px solid $rowBorderColor;
		}

		&.tabulator-frozen-right{
			border-left:2px solid $rowBorderColor;
		}
	}

	.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: $cellVerticalPadding $cellHorizontalPadding;
		// border-right:1px solid $rowBorderColor;
		vertical-align:middle;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;

		&:last-of-type{
			border-right: none;
		}

		&.tabulator-editing{
			border:1px solid  $editBoxColor;
			outline:none;

			padding: 0;

			input, select{
				border:1px;
				background:transparent;
			}
		}

		&.tabulator-validation-fail{
			border:1px solid $errorColor;
			input, select{
				border:1px;
				background:transparent;

				color: $errorColor;
			}
		}

		//hide left resize handle on first column
		&:first-child{
			.tabulator-col-resize-handle.prev{
				display: none;
			}
		}

		//movable row handle
		&.tabulator-row-handle{

			display: inline-flex;
			align-items: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-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:rgba(0, 0, 0, .1);

			overflow:hidden;

			&:hover{
				cursor:pointer;
				background:rgba(0, 0, 0, .2);
			}

			.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:#fff;
			font-weight:bold;
			font-size:1.1em;

			&:hover{
				opacity:.7;
			}

			&.open{
				.tabulator-responsive-collapse-toggle-close{
					display:initial;
				}

				.tabulator-responsive-collapse-toggle-open{
					display:none;
				}
			}

			.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:#fafafa;
		font-weight:bold;

		min-width: 100%;

		&:hover{
			cursor:pointer;
			background-color:rgba(0,0,0,.1);
		}

		&.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;
		}


		//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:#666;
		}
	}
}

.tabulator-menu{
	position: absolute;
	display:inline-block;
	box-sizing:border-box;

	background:$backgroundColor;
	border:1px solid $rowBorderColor;
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, .2);

	font-size:$textSize;

	overflow-y:auto;
	-webkit-overflow-scrolling: touch;

	z-index: 10000;

	.tabulator-menu-item{
		position:relative;
		box-sizing:border-box;

		padding:5px 10px;

		user-select: none;

		&.tabulator-menu-item-disabled{
			opacity: .5;
		}

		&:not(.tabulator-menu-item-disabled):hover{
			cursor: pointer;
			background: $headerBackgroundColor;
		}

		&.tabulator-menu-item-submenu{
			padding-right:25px;

			&::after {
				display: inline-block;
				position: absolute;

				top: calc(5px + .4em);
				right: 10px;
				height: 7px;
				width: 7px;

				content: '';

				border-width: 1px 1px 0 0;
				border-style: solid;
				border-color: $rowBorderColor;
				vertical-align: top;

				transform: rotate(45deg);
			}
		}
	}

	.tabulator-menu-separator{
		border-top:1px solid $rowBorderColor;
	}
}

.tabulator-edit-select-list{
	position: absolute;
	display:inline-block;
	box-sizing:border-box;

	max-height:200px;

	background:$backgroundColor;
	border:1px solid $rowBorderColor;

	font-size:$textSize;

	overflow-y:auto;
	-webkit-overflow-scrolling: touch;

	z-index: 10000;

	.tabulator-edit-select-list-item{
		padding:4px;

		color:$rowTextColor;

		&.active{
			color:$backgroundColor;
			background:$editBoxColor;

			&.focused{
				outline:1px solid rgba($backgroundColor, .5);
			}
		}

		&.focused{
			outline:1px solid $editBoxColor;
		}


		&:hover{
			cursor:pointer;

			color:$backgroundColor;
			background:$editBoxColor;
		}
	}

	.tabulator-edit-select-list-notice{
		padding:4px;

		text-align: center;
	}

	.tabulator-edit-select-list-group{
		border-bottom:1px solid $rowBorderColor;

		padding:4px;
		padding-top:6px;

		color:$rowTextColor;
		font-weight:bold;
	}
}

//RTL Styling

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


.tabulator.tabulator-rtl{
	text-align: initial;
	direction: rtl;

	.tabulator-header {
		.tabulator-col{
			text-align: initial;
			border-left:1px solid $headerBorderColor;
			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-arrow{
					left:8px;
					right:initial;
				}
			}
		}
	}

	.tabulator-row{
		.tabulator-cell{
			border-right:initial;
			border-left:1px solid $rowBorderColor;

			//hide left resize handle on first column
			// &:first-child{
			// 	.tabulator-col-resize-handle.prev{
			// 		display: none;
			// 	}
			// }

			.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;
			}
		}
	}

	//column resize handles
	.tabulator-col-resize-handle{
		position:absolute;
		left:0;
		right:auto;

		&.prev{
			right:0;
			left:auto;
		}
	}
}


// Table print styling

.tabulator-print-fullscreen{
	position: absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;

	z-index: 10000;
}

body.tabulator-print-fullscreen-hide>*:not(.tabulator-print-fullscreen){
	display:none !important;
}

.tabulator-print-table{
	border-collapse: collapse;

	//row grouping element
	.tabulator-print-table-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:#fafafa;
		font-weight:bold;

		min-width: 100%;

		&:hover{
			cursor:pointer;
			background-color:rgba(0,0,0,.1);
		}

		&.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{
			td{
				padding-left:30px !important;
			}
		}

		&.tabulator-group-level-2{
			td{
				padding-left:50px !important;
			}
		}

		&.tabulator-group-level-3{
			td{
				padding-left:70px !important;
			}
		}

		&.tabulator-group-level-4{
			td{
				padding-left:90px !important;
			}
		}

		&.tabulator-group-level-5{
			td{
				padding-left:110px !important;
			}
		}


		//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:#666;
		}
	}

	.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:rgba(0, 0, 0, .1);

		overflow:hidden;

		&:hover{
			cursor:pointer;
			background:rgba(0, 0, 0, .2);
		}

		.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;
			}
		}
	}
}

