.tree {

	border: 1px solid #BBBBBB;
	border-radius: 4px 4px 4px 4px;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 10px 15px 0 15px;
	position: relative;

	.tree-folder {

		width: 100%;
		min-height: 20px;
		cursor: pointer;
		margin-top: 1px;

		.tree-folder-header {

			position: relative;
			height: 20px;
			-webkit-border-radius: 6px;
			   -moz-border-radius: 6px;
					border-radius: 6px;

			&:hover {
				background-color: @treeBackgroundHover;
			}

			i {
				position: absolute;
				float: left;
				top: 1px;
				left: 5px;
			}

			.tree-folder-name {
				padding-left: 29px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

		}

		.tree-folder-content {
			margin-left: 23px;
		}

	}

	.tree-item {

		position: relative;
		width: 100%;
		height: 20px;
		cursor: pointer;
		margin-top: 1px;
		-webkit-border-radius: 6px;
		   -moz-border-radius: 6px;
				border-radius: 6px;

		&:hover {
			background-color: @treeBackgroundHover;
		}

		.tree-item-name {
            overflow: hidden;
            padding-left: 29px;
            text-overflow: ellipsis;
            white-space: nowrap;
		}

		.tree-dot {
			position: absolute;
			top: 8px;
			left: 10px;
			display: block;
			width: 4px;
			height: 4px;
			background-color: @grayDark;
			-webkit-border-radius: 6px;
			   -moz-border-radius: 6px;
					border-radius: 6px;
		}

		.icon-ok {
			position: absolute;
			top: 1px;
			left: 5px;
		}

	}

	.tree-selected {
		background-color: @treeBackgroundSelect;

		&:hover {
			background-color: @treeBackgroundSelect;
		}
	}
}