/* .col_tree{

margin-left:437px;

margin-bottom:118px;

margin-top:20px;

    border: 2px solid #73AD21;

    padding: 20px;

    width: 200px;

    height: 150px;

}



.col_1{

    border: 2px solid #73AD21;

    padding: 20px;

    width: 200px;

    height: 150px;

	}

	

img {

	

 margin-left: 41px;

}



h4{

	font-size:18px;

	margin-left:55px;

} */





/*Now the CSS*/

* {margin: 0; padding: 0;}



.tree ul {

	padding-top: 20px; position: relative;

	

	transition: all 0.5s;

	-webkit-transition: all 0.5s;

	-moz-transition: all 0.5s;

}



.tree li {

	float: left; text-align: center;

	list-style-type: none;

	position: relative;

	/*padding: 20px 5px 0 5px;*/
	padding: 20px 0px 0 5px !important;

	transition: all 0.5s;

	-webkit-transition: all 0.5s;

	-moz-transition: all 0.5s;

}



/*We will use ::before and ::after to draw the connectors*/



.tree li::before, .tree li::after{

	content: '';

	position: absolute; top: 0; right: 50%;

	border-top: 1px solid #ccc;

	width: 50%; height: 20px;

}

.tree li::after{

	right: auto; left: 50%;

	border-left: 1px solid #ccc;

}



/*We need to remove left-right connectors from elements without 

any siblings*/

.tree li:only-child::after, .tree li:only-child::before {

	display: none;

}



/*Remove space from the top of single children*/

.tree li:only-child{ padding-top: 0;}



/*Remove left connector from first child and 

right connector from last child*/

.tree li:first-child::before, .tree li:last-child::after{

	border: 0 none;

}

/*Adding back the vertical connector to the last nodes*/

.tree li:last-child::before{

	border-right: 1px solid #ccc;

	border-radius: 0 5px 0 0;

	-webkit-border-radius: 0 5px 0 0;

	-moz-border-radius: 0 5px 0 0;

}

.tree li:first-child::after{

	border-radius: 5px 0 0 0;

	-webkit-border-radius: 5px 0 0 0;

	-moz-border-radius: 5px 0 0 0;

}



/*Time to add downward connectors from parents*/

.tree ul ul::before{

	content: '';

	position: absolute; top: 0; left: 50%;

	border-left: 1px solid #ccc;

	width: 0; height: 20px;

}



.tree li a{

	border: 1px solid #ccc;

	padding: 5px 10px;

	text-decoration: none;

	color: #666;

	font-family: arial, verdana, tahoma;

	font-size: 11px;

	display: inline-block;

	

	border-radius: 5px;

	-webkit-border-radius: 5px;

	-moz-border-radius: 5px;

	

	transition: all 0.5s;

	-webkit-transition: all 0.5s;

	-moz-transition: all 0.5s;

}



/*Time for some hover effects*/

/*We will apply the hover effect the the lineage of the element also*/

.tree li a:hover, .tree li a:hover+ul li a {

	background: #c8e4f8; color: #000; border: 1px solid #94a0b4;

}

/*Connector styles on hover*/

.tree li a:hover+ul li::after, 

.tree li a:hover+ul li::before, 

.tree li a:hover+ul::before, 

.tree li a:hover+ul ul::before{

	border-color:  #94a0b4;

}



/*Thats all. I hope you enjoyed it.

Thanks :)*/



@media (min-width: 768px) and (max-width: 980px)

{

	

	.tree ul { margin-left: 6% !important;}

	

	.user-ul{

	    margin-left: 107px;

	}

	.user-margin{

		   margin-left: 64px;

	}

	.admin-user

	{margin-left: 34px !important;

	}

	

}



@media (min-width: 320px) and (max-width: 480px)

{

	.tree ul { margin-left: 0% !important;}

	

	

	.user1, .user2, .user3, .user4{

	

		width:60px;

	}

	.user1 img, .user2 img, .user3 img, .user4 img{

		width:30px;

	}

.user-margin{

 margin-left: 39px;	

}

.admin-user{

	width:50px;

	margin-left:4px !important;

}

.admin-user img{

	width:30px;

}

}







@media (min-width: 800px) 

{

	

	.user-margin{

		margin-left: 83px;

	}

}



@media (min-width: 980px) and (max-width: 1200px)



{

	.tree ul ul::before {

    left: 50% !important;

}

	

	

	

	.user-margin{

	 margin-left: 175px;

	}

	.tree ul ul::before {

    left: 58%;

}





.admin-user{

	margin-left: 114px;

}

}

.admin-user{  }



.tree ul {

float:left;

    margin-left: 15%;

    padding-top: 20px;

    position: relative;

    transition: all 0.5s ease 0s;

}

.autocomplete-suggestions{position: absolute; max-height: 300px; z-index: 9999; width: 333px; overflow-y: scroll;}

.autocomplete-suggestion {

    background: #d2d6de  none repeat scroll 0 0;

    margin: 1px;

    padding: 3px;

}

.autocomplete-selected {

background:#00c0ef;

}

.sorting_btn{ cursor:pointer;}

.pagination_btn{ margin:2px;}