sky-chart {
	display: block;
}

sky-chart line.vertical {
	stroke: #999;
	shape-rendering: crispEdges;
}

sky-chart .axis line {
	fill: none;
	stroke: #ccc;
	stroke-width: 0.7;
}

sky-chart .axis path {
	fill: none;
	stroke: #000;
	stroke-width: 1;
	shape-rendering: crispEdges;
}

/* Line Chart */
sky-chart[type=line] .data-line {
	stroke-width: 2;
	fill: none;
	stroke-dasharray: 0;
}

sky-chart[type=line] .data-point {
	stroke-width: 2;
}

sky-chart[type=line] .data-point:not(:hover) {
	stroke: #fff !important;
}

sky-chart[type=line] .data-point:hover {
	fill: #fff !important; 
}

sky-chart[type=line] .x.axis line {
	stroke: #000;
	stroke-width: 1;
	shape-rendering: crispEdges;
}

sky-chart[type=line] .y.axis path {
	display: none;
}

/* Bar Chart*/
sky-chart[type=bar] .data-bar {
	fill: #1f77b4;
}

sky-chart[type=bar] .data-bar:hover {
	fill: #aec7e8;
}

sky-chart[type=bar] .x.axis path {
	display: none;
}

sky-chart[type=bar] .x.axis line {
	stroke: #000;
	stroke-width: 1;
	shape-rendering: crispEdges;
}

/* Pie / Donut Chart */
sky-chart[type=pie] .axis,
sky-chart[type=donut] .axis,
sky-chart[type=pie] .label,
sky-chart[type=donut] .label {
	display: none;
}

sky-chart[type=pie] path.arc-path,
sky-chart[type=donut] path.arc-path {
	stroke: #fff;
}

sky-chart[type=pie] path.arc-path:hover,
sky-chart[type=donut] path.arc-path:hover {
	opacity: .6;
}

sky-chart[type=pie] path.arc-hover-path,
sky-chart[type=donut] path.arc-hover-path {
	opacity: 0;
}

/* Label */
sky-chart .label-group .label {
	text-shadow: -1px 0px 5px #fff;
}

/* Legend */
sky-chart .legend-box {
	stroke: #999;
	stroke-width: 1;
	shape-rendering: crispEdges;
	fill: #fff;
	opacity: 0.7;
}

sky-chart .legend:hover {
	cursor: pointer;
}

sky-chart .legend:hover text {
	opacity: .7;
}

sky-chart .legend.off circle {
	fill: #fff !important;
}

/* Tip */
.d3-data-tip {
	line-height: 1;
	font-weight: bold;
	padding: 12px;
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	border-radius: 4px;
	z-index: 100;
}

.d3-data-tip:after { /* Creates a small triangle extender for the tooltip */
	box-sizing: border-box;
	display: inline;
	font-size: 12px;
	width: 100%;
	line-height: 1;
	color: rgba(0, 0, 0, 0.8);
	content: '\25BC';
	position: absolute;
	text-align: center;
}


.d3-data-tip.n {
	margin-top: -10px;
}

.d3-data-tip.n:after { /* Style northward tooltips differently */
	margin: -3px 0 0 0;
	top: 100%;
	left: 0;
}

.d3-data-tip.e {
	margin-left: 20px;
}

.d3-data-tip.e:after { /* Style eastward tooltips differently */
	margin: 0 0 0 -8px;
	top: 40%;
	left: 0;
	content: '\25C0';
	text-align: start;
}

.d3-data-tip hr {
	margin: 6px 0;
}