.bar {
	fill: steelblue;
}

.axis text {
	font: 10px sans-serif;
}

.axis path, .axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
}

.x.axis path {
	display: none;
}

div.bartip {
	position: absolute;
	text-align: center;
	padding: 2px;
	font: 12px sans-serif;
	background: lightsteelblue;
	border: 0px;
	border-radius: 8px;
	pointer-events: none;
}

.bar {
	fill: steelblue;
}

.bar:hover {
	fill: brown;
}

.axis {
	font: 10px sans-serif;
}

.axis path, .axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
}

.x.axis path {
	display: none;
}

.colorspot {
	border: 1px solid #777;
	border-radius: 6px;
	text-align: center;
	color: #666;
	background-color: #f5f5f5;
	margin-right: 6px;
}

/* collapsibility */
.collapsibleList li {
	cursor: auto;
	margin-top: 3px;
}

.uncollapsibleList>li:first-child {
	list-style-image: url('../icons/noarr.png');
	padding-left: 4px;
	margin-top: 3px;
}

.uncollapsibleList>li :not(:first-child ){
	list-style-image: url('../icons/noarrex44.png');
	padding-left: 4px;
	margin-top: 3px;
}

li.collapsibleListOpen {
	list-style-image: url('../icons/arr_down2.png');
	cursor: pointer;
}

li.collapsibleListClosed {
	list-style-image: url('../icons/arr_right2.png');
	cursor: pointer;
}

badgeybadge {
	display: inline-block;
	white-space: nowrap;
	background-color: #999999;
	webkit-border-radius: 9px;
	moz-border-radius: 9px;
	border-radius: 9px;
}

/* tooltip */
div.tooltip2 {
	position: absolute;
	padding: 5px;
	font: 1.0em sans-serif;
	background: #ccc;
	border: 0px;
	border-radius: 2px 15px 15px 2px;
	pointer-events: none;
}

[data-tooltip] {
	position: relative;
	cursor: pointer;
}

[data-tooltip]:before {
	content: attr(data-tooltip);
	display: none;
	position: absolute;
	width: 160px;
	left: -180px;
	background: #eee;
	color: #333;
	padding: 4px 8px;
	font-size: 1em;
	line-height: 1.4;
	border-radius: 10px 0px 10px 10px;
	text-align: center;
	border: 1px solid #ddd;
	box-shadow: 3px 3px 7px 0px #666;
	white-space: pre-line;
}

[data-tooltip]:after {
	content: '';
	display: none;
	position: absolute;
	width: 0;
	height: 0;
	border-color: transparent;
	border-style: solid;
}

[data-tooltip]:hover:before, [data-tooltip]:hover:after {
	display: block;
	z-index: 50;
	left: -180px;
}

/* cladogram */
.d3-tip {
	line-height: 1.2em;
	padding: 12px;
	background: #ffffF0;
	color: #333;
	border-radius: 6px;
}

.d3-tip:after {
	box-sizing: border-box;
	display: inline;
	font-size: 1.8em;
	width: 100%;
	line-height: 0.8em;
	color: #ffffF0;
	content: "\25BC";
	position: absolute;
	text-align: center;
}

.d3-tip.n:after {
	margin: -3px 0 0 0;
	top: 100%;
	left: 0;
}

.node {
	font: 0.7em sans-serif;
	color: #333;
}

.leaf {
	font: 1.1em sans-serif;
	color: #0000ff;
}

.link {
	fill: none;
	stroke: #ffff00;
	stroke-width: 2px;
}

fieldset.refset {
	margin-top: 10px;
	border: 1px solid #999;
	padding: 6px;
	font-size: 1.0em;
}

fieldset.refset legend {
	font-size: 0.9em;
	color: #666;
}

/* for size responsieve svg */
.svg-container {
	display: inline-block;
	position: relative;
	width: 100%;
	padding-bottom: 100%; /* aspect ratio */
	vertical-align: top;
	overflow: hidden;
}

.svg-content-responsive {
	display: inline-block;
	position: absolute;
	top: 10px;
	left: 0;
}

.small5{   
	font-size: 0.9em;
    color: #333;
    margin-left: 12px;
}