.treebox {

}

.treebox ul {
    padding: 0em;
    
}

.card-body {
    padding: 0 0 0;
    margin-bottom: 0;
}


.card-body p{
	font-size:16px;
	width:90%;
	display:block;
	margin:0 auto 10px;
	
}

.reportpageinfo{
	margin:10px 0;
	font-size:18px !important;
}


.treebox ul li ul li {
    position:relative;
    top:0;
    bottom:0;
    padding-bottom: 0;
	margin-bottom: 5px;
}

.treebox ul li ul {
    margin-left: 9px;
}


.treebox li {
    list-style-type: none;
	margin:0;
	width:auto;
	font-size:16px;
}

.percentage{
	color: #111;
	padding-left: 5px;
	margin-left: 0;
	background: #fff;
	padding-bottom: 3px;
	padding-right: 5px;
	font-family: Helvetica;
	font-weight:bold;
	min-width: 55px;
	display: inline-block;
}

.datapoint{
	padding: 0 0 0 10px;
	color:#fff;
	font-size:18px;
	background: rgba(70,181,250,1);
	background: -moz-linear-gradient(top, rgba(70,181,250,1) 0%, rgba(22,151,231,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(70,181,250,1)), color-stop(100%, rgba(22,151,231,1)));
	background: -webkit-linear-gradient(top, rgba(70,181,250,1) 0%, rgba(22,151,231,1) 100%);
	background: -o-linear-gradient(top, rgba(70,181,250,1) 0%, rgba(22,151,231,1) 100%);
	background: -ms-linear-gradient(top, rgba(70,181,250,1) 0%, rgba(22,151,231,1) 100%);
	background: linear-gradient(to bottom, rgba(70,181,250,1) 0%, rgba(22,151,231,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#46b5fa', endColorstr='#1697e7', GradientType=0 );
	border:1px solid #0d5469;
	border-radius:3px;
	width: 250px;
    display: inline-block;
	box-shadow: 2px 2px 2px #222;
}

ul li ul li .datapoint{
	padding: 0 0 0 10px;

	color:#111;
	font-size:18px;
	
	background: rgba(247,246,215,1);
	background: -moz-linear-gradient(top, rgba(247,246,215,1) 0%, rgba(225,219,196,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(247,246,215,1)), color-stop(100%, rgba(225,219,196,1)));
	background: -webkit-linear-gradient(top, rgba(247,246,215,1) 0%, rgba(225,219,196,1) 100%);
	background: -o-linear-gradient(top, rgba(247,246,215,1) 0%, rgba(225,219,196,1) 100%);
	background: -ms-linear-gradient(top, rgba(247,246,215,1) 0%, rgba(225,219,196,1) 100%);
	background: linear-gradient(to bottom, rgba(247,246,215,1) 0%, rgba(225,219,196,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f6d7', endColorstr='#e1dbc4', GradientType=0 );
	
	border:1px solid #aaa994;
	border-radius:3px;
	width: 220px;
    display: inline-block;
	box-shadow: 2px 2px 2px #222;
}

ul li ul li ul li .datapoint{
	padding: 0 0 0 10px;
	color:#111;
	font-size:18px;
	background: rgba(235,233,249,1);
	background: -moz-linear-gradient(top, rgba(235,233,249,1) 0%, rgba(194,194,242,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(235,233,249,1)), color-stop(100%, rgba(194,194,242,1)));
	background: -webkit-linear-gradient(top, rgba(235,233,249,1) 0%, rgba(194,194,242,1) 100%);
	background: -o-linear-gradient(top, rgba(235,233,249,1) 0%, rgba(194,194,242,1) 100%);
	background: -ms-linear-gradient(top, rgba(235,233,249,1) 0%, rgba(194,194,242,1) 100%);
	background: linear-gradient(to bottom, rgba(235,233,249,1) 0%, rgba(194,194,242,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebe9f9', endColorstr='#c2c2f2', GradientType=0 );
	border:1px solid #5b5bc7;
	border-radius:3px;
	width: 172px;
    display: inline-block;
	box-shadow: 2px 2px 2px #222;
}


.datapoint-hover:hover {
	color: rgba(70,40,190, 1);

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
 -webkit-box-shadow: 0px 0px 30px 0px rgba(120,201,250, 0.67);
-moz-box-shadow:    0px 0px 30px 0px rgba(120,201,250, 0.67);
box-shadow:         0px 0px 30px 0px rgba(120,201,250, 0.67);

}

.datapoint-hover:last-of-type:hover{
	color: rgba(70,40,190, 1);

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
 -webkit-box-shadow: 0px 0px 30px 0px rgba(120,201,250, 0.67);
-moz-box-shadow:    0px 0px 30px 0px rgba(120,201,250, 0.67);
box-shadow:         0px 0px 30px 0px rgba(120,201,250, 0.67);	
}



.treebox li a,
.treebox li a li {
    padding:0 ;
    position: relative;
    top:1em ;
	color:#111;
}



.treebox li a:hover {
    text-decoration: none;
}

.treebox i{
	color:#6bb101 ;
	margin-right:5px;
	font-size:20px;
}

.treebox a.addBorderBefore:before {
    content: "";
    display: inline-block;
    width: 2px;
    height: 28px;
    position: absolute;
	left: -26px;
	top: -21px;

}

.treebox li:before {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    position: relative;
    left: 0em;
    top:10px;
    border-top: 1px solid #6bb101 ;
}


.treeboxul li ul li:last-child:after, 
.treeboxul li:last-child:after {
    content: '';
    display: block;
    width: 1em;
    height: 1em;
    position: relative;
    background: #fff;
    top: 9px;
    left: -1px;
}

.hasSubmenu{
	padding: 0 ;
}


.treebox li ul li:before {
    width: 35%;
}

.treebox li ul li ul li:before {
    width: 50%;
}

.treebox ul li ul li ul {
    margin-left: 28.5%;
}


@media only screen and (max-width: 900px) {
	
	.treebox ul{
		margin-left:40px;
	}
	
  	.treebox li ul li:before {
	    width: 5% !important;
	}
	
	.treebox ul li ul li ul {
	    margin-left: 8% !important;
	}
	
	.treebox ul li ul li ul {
	    margin-left: 8% !important;
	}
	

	.treebox li ul li ul li:before {
	    width: 15% !important;
	}


}


@media only screen and (max-width: 768px) {

	.treebox ul{
		width:90%;
		margin: 0 auto;
	}
	
  	.treebox li ul li:before {
	    width: 5% !important;
	}
	
	.treebox ul li ul li ul {
	    margin-left: 8% !important;
	}
	
	.treebox ul li ul li ul {
	    margin-left: 8% !important;
	}
	

	.treebox li ul li ul li:before {
	    width: 15% !important;
	}


}


@media only screen and (max-width: 1200px) {
	
  	.treebox li ul li:before {
	    width: 5% !important;
	}
	
	.treebox ul li ul li ul {
	    margin-left: 8% !important;
	}
	
	.treebox ul li ul li ul {
	    margin-left: 8% !important;
	}
	

	.treebox li ul li ul li:before {
	    width: 15% !important;
	}


}