:host {
	background: @scheme-color-primary;
	display: inline-block;
	height: 0;
	width: 0;

	* {
		margin: 0;

		&[hide] {
			display: none;
		}
	}

	div {
		box-sizing: border-box;
	}

	ef-item {
		&.disabled {
			color: @list-item-disabled-text-color;
		}

		&[focused] ef-checkbox {
			color: @list-item-focus-text-color;
		}

		&::part(center) {
			white-space: normal;
		}

		// NOTE:: We can overwrite text color of disabled item by uncomment this code
		// &[selected] {
		// 	color: mix(@list-item-selected-text-color, @list-item-disabled-text-color, 20%);
		// }

		// &[focused],
		// &[highlighted] {
		// 	background-color: @list-item-focus-background-color;

		// 	&:not([selected]) {
		// 		color: mix(@list-item-focus-text-color, @list-item-disabled-text-color, 50%);
		// 	}

		// 	&[selected] {
		// 		color: mix(@list-item-selected-text-color, @list-item-disabled-text-color, 60%);
		// 	}
		// }
	}

	.title {
		line-height: 14px;
	}

	ef-dialog {
		width: 700px;
		height: 500px;
		min-width: 490px;
	}

	ef-tree {
		width: 100%;
	}

	ef-tree-item {
		min-width: 100%; // TODO:: Handle item in case text length exceed width
	}

	.container {
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.row {
		display: flex;
	}

	.row + .row {
		margin-top: 10px;
	}

	.side {
		width: 50%;
		max-width: 50%;
		display: flex;
		flex-direction: column;
		vertical-align: top;
		overflow: hidden;
		align-self: center;
		padding-left: 5px;
		padding-right: 5px;
		justify-content: center;
	}
	.side:first-child {
		padding-left: 0;
	}
	.side:last-child {
		padding-right: 0;
	}

	#listSection {
		height: 100%;
		overflow: hidden;
	}
	
	#info_icon {
		vertical-align: top;
		font-size: 14px;
	}
	
	#tags_div > * {
		margin-right: 5px;
		margin-bottom: 10px;
	}

	#allColumns {
		overflow: hidden;
		border: 1px solid @column-border-color;
		display: flex;
		flex-direction: column;
		flex-grow: 1;
	}

	#allColumnsSide, #visibleSide {
		height: 100%;
	}

	#visibleColumns {
		flex-grow: 1;
		overflow-y: auto;
		border: 1px solid @column-border-color;
	}

	#searchInput {
		width: 100%;
	}

	.no-results {
		pointer-events: none;
		text-align: center;
		margin-top: 10px;
	}

	#ordering_div {
		display: flex;
		align-items: center;
		margin-top: 2px;
		
		ef-button {
			margin-top: min(@panel-padding);
		}

		ef-button:first-child {
			margin-right: 10px;
		}
	}

	#ordering_buttons {
		flex: 1;
		margin-right: 10px;
	}

	#descriptionContainer {
		margin-top: 10px;
		min-height: 60px;
		overflow-y: auto;
		border: 1px solid @column-border-color;
		font-size: 12px;
		line-height: 18px;
		box-sizing: border-box;
		padding: @control-padding;
	}

	#selectAllHeader {
		min-height: 28px;
		text-transform: none;
		cursor: pointer;

		#selectAllCheckbox{
			pointer-events: none;
		}
	}

	[slot="footer"] {
		display: flex;
		height: 40px;
		align-items: center;
		padding-left: min(@panel-padding);
		padding-right: min(@panel-padding);
		overflow: hidden;
		
		div[part="custom-buttons"] {
			flex: 1;
			display: flex;
			align-items: center;
		}
		div[part="default-buttons"]{
			display: inline-flex;
			align-items: center;
			padding-left: min(@panel-padding);
			white-space: nowrap;
		}
		
		#restore_btn {
			white-space: nowrap;
		}
		#status_div {
			flex: 1;
		}
		ef-icon+#status_div {
			margin-left: 4px;
		}

		ef-button {
			text-transform: uppercase;
			margin-top: 0;
			margin-bottom: 0;
			padding-left: min(@panel-padding);
			padding-right: min(@panel-padding);
		}
		ef-button+* {
			margin-left: min(@panel-padding);
		}
	}

	ef-tree-item {
		position: relative;
	}
	.div-icon {
		position: absolute;
		right: 0;
		top: 0;
		width: 24px;
		height: 100%;
		text-align: center;
	}
	ef-tree-item .item .div-icon:hover { /* hover icon will change icon background */
		background-color: var(--color-scheme-primary);
	}
	.info-icon {
		display: none;
		font-size: 18px;
		height: 100%;
	}
	ef-tree-item:hover .item .info-icon { /* hover item will show icon */
		display: inline-block;
		color: #ffffff; /* icon-color white both dark and light theme */
	}
	.bg-highligted { /* effect ef-tree-item, when _handleInfoIconMouseover icon (disable highlighted background color) */
		background-color: var(--color-scheme-tertiary);
		color: var(--color-scheme-complementary); /* font text */
	}
}

.webkit-scrollbars();