ngTree {
	list-style: none;
	margin: 0;
	padding: 0;
	display: block;
	font-size:20px;
	-webkit-transition: max-height .2s; /* Safari */
	transition: height .2s;
	text-align:left!important;
	overflow: hidden;

	> *{-webkit-tap-highlight-color:rgba(0,0,0,0);}
}

.ngtree_node_info{
	+ .sub_ngtree {
		padding-left: 1em;
	}
}

.ngtree_node_selected.ngtree_node_info{
	.ngtree_node_info_wraper{
		background:rgba(221, 221, 221, 0.5);
	}
	
	.ngtree_node_toolbar div{
		transform:scale(1,1);
		-ms-transform:scale(1,1); 	/* IE 9 */
		-moz-transform:scale(1,1); 	/* Firefox */
		-webkit-transform:scale(1,1); /* Safari 和 Chrome */
		-o-transform:scale(1,1);
	}
}

.sub_ngtree{
	background: url("tree_conect0.svg") repeat-y 0 0;
	background-size:1em 0.1em;
}

.ngtree_node_info.ngtree_closed + .sub_ngtree {
	display: none;
}

&.ngtree_dragging .ngtree_node_info:before{
	width:100%;
}

.ngtree_node_info {
	white-space: nowrap;
	cursor: default;
	line-height:1em;
	display:flex;
	align-items: center;
	position: relative;

	&:before{
		content:"";
		display:block;
		position: absolute;
		top:0;
		bottom:0;
		left:0;
		width:0;
	}
	
	&.ngtree_enter_node{
		background:rgba(221, 221, 221, 0.3);
	}

	&:hover .ngtree_node_toolbar{
		div{
			transform:scale(1,1);
			-ms-transform:scale(1,1); 	/* IE 9 */
			-moz-transform:scale(1,1); 	/* Firefox */
			-webkit-transform:scale(1,1); /* Safari 和 Chrome */
			-o-transform:scale(1,1);
		}
	}
}

.ngtree_node_info_wraper{
	display: flex;
	align-items: center;
	font-size:1em;
	outline:1px transparent solid;
	box-sizing:border-box;
	overflow: hidden;
	flex:1;
	
	&:hover{
		background:rgba(221, 221, 221, 0.3);
	}
}

.ngtree_folder {
	.ngtree_folder_icon{
		position:relative;
		background:none;
		perspective: 3em;
		-webkit-perspective: 3em;
		
		&:before{
			content:"";
			position:absolute;
			left:0;
			width:100%;
			height:100%;
			background:url(folder_back.svg) no-repeat center center;
			background-size:0.9em auto;
			z-index:-1;
		}
		
		&:after{
			content:"";
			position:absolute;
			left:0;
			width:100%;
			height:100%;
			background:url(folder_front.svg) no-repeat center center;
			background-size:0.9em auto;
			-moz-transform: rotateX(0);
			-webkit-transform: rotateX(0);
			transform: rotateX(0);
			-moz-transform-origin: 50% 88%;
			-webkit-transform-origin: 50% 88%;
			transform-origin: 50% 88%;
			-webkit-transition: 0.2s;
			-moz-transition: 0.2s;
			transition: 0.2s;
			z-index:-1;
		}
	}
	
	&.ngtree_node_open .ngtree_folder_icon{
		&:after{
			-moz-transform: rotateX(-50deg);
			-webkit-transform: rotateX(-50deg);
			transform: rotateX(-50deg);
		}
	}
}

.ngtree_node_name{
	font-size:0.8em;
	padding:0 0.1em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex:1;
}

/*文件*/
.ngtree_node_info .ngtree_connect{
	background:url("tree_conect5.svg") no-repeat center center;
}

/*文件夹-关闭*/
.ngtree_node_info.ngtree_folder .ngtree_connect{
	background:url("tree_conect2.svg") no-repeat center center;
}

/*文件夹-打开*/
.ngtree_node_info.ngtree_folder.ngtree_node_open .ngtree_connect{
	background:url("tree_conect1.svg") no-repeat center center;
}
/*拖动的文件夹关闭*/
.ngtree_dragging_node .ngtree_node_info.ngtree_folder .ngtree_connect{
	background:url("tree_conect2.svg") no-repeat center center;
}
.ngtree_dragging_node .ngtree_folder .ngtree_folder_icon:after{
	-moz-transform: rotateX(0);
	-webkit-transform: rotateX(0);
	transform: rotateX(0);
}

.ngtree_node{
	position:relative;

	/*最后的-文件*/
	&:last-child > .ngtree_node_info .ngtree_connect{
		background:url("tree_conect6.svg") no-repeat center center;
	}
	
	/*最后的-文件夹*/
	&:last-child > .ngtree_folder .ngtree_connect{
		background:url("tree_conect3.svg") no-repeat center center;
	}
	
	/*最后的-文件夹-打开*/
	&:last-child > .ngtree_folder.ngtree_node_open .ngtree_connect{
		background:url("tree_conect4.svg") no-repeat center center;
	}
	
	&:last-child > .sub_ngtree{
		background:none;
	}
}


.ngtree_connect, .ngtree_node_icon {
	height:1em;
	width:1em;
	-webkit-user-select: none;
	user-select: none;
}

.ngtree_connect{
	padding:0.05em 0;
	box-sizing: content-box;
}

.ngtree_node_icon{
	margin-right:0.1em;
	background:url("document.svg") no-repeat center center;
	
	&.tree_icon_hide{
		width:0;
		margin:0;
	}
}

.ngtree_node_toolbar{
	margin-left:8px;
	display: flex;
	align-items: center;
	user-select: none;
	overflow: hidden;
	
	div {
		width:1em;
		height:1em;
		margin:0 2px;
		-ms-transform:scale(0,0); 	/* IE 9 */
		-moz-transform:scale(0,0); 	/* Firefox */
		-webkit-transform:scale(0,0); /* Safari 和 Chrome */
		-o-transform:scale(0,0);
		transform:scale(0,0);
	}
}

.ngtree_dragging_node{
	ngTree{
		height:0!important;
	}
}

.ngtree_drag_middle{
	z-index:100;
	&:before{
		z-index:50;
		pointer-events:none;
		content:"";
		display:block;
		width:0.5em;
		height:0.5em;
		left:0;
		position: absolute;
		top:0.5em;
		transform: translate(120%,-50%);
		background-image:url('arrow.svg');
		background-repeat: no-repeat;
		background-color:inherit;
		background-size:100% 100%;
		background-position: 0 0.01em;
		animation: ngtree-blink-arrow .8s linear infinite;
	}
}

.ngtree_drag_top,.ngtree_drag_bottom{
	&:after{
		content:"";
		position: absolute;
		background:#d4237a;
		left:1em;
		right:50%;
		pointer-events:none;
		height:1px;
		animation: ngtree-blinker 1s linear infinite;
	}
}

.ngtree_drag_top{
	&:after{
		top:0;
	}
}

.ngtree_drag_bottom{
	&:after{
		bottom:0;
	}
}

@keyframes ngtree-blinker {  
  50% { opacity: .2; }
}
@keyframes ngtree-blink-arrow {  
  50% { background-position: 2px 0.01em }
}