#d3_graph_list,
.d3_graph_list {
	margin-top: 5px;
}

.SkyOMS #d3_graph_list{
	display: inline-block;
	width: 100%;
}

.SkyOMS.NodeExport #d3_graph_list{
	width: 900px
}

.SkyOMS #d3_pie_chart_list{
	width: 910px;
}
#d3_chart_container{
	padding:0px !important;
	/*margin: 0 0 0 30px !important;*/
}
#d3_chart_container .d3js_wrapper{
	margin-bottom:30px;
	position:relative;
	width:100%;
	background:white;   
}
#d3_chart_container .d3js_svg_container{
	z-index:100;
}
#d3_chart_container .d3js_header{
	height:30px;
	font-size:14px;
	line-height:12px;
}
#d3_chart_container .d3js_header div{

}
#d3_chart_container .d3js_legend,
#d3_chart_container .d3js_title,
#d3_chart_container .d3js_buttons{
	float:left;
	text-align:center;
}
#d3_chart_container .d3js_legend{
	width:55%;
	font-size:10px;
	overflow:visible;
}
#d3_chart_container .d3js_legend div{
	float: left;
	margin-left:5px;
}
#d3_chart_container .d3js_legend .legend_button{
	padding: 3px;
	font-size: 13px;
	margin: 0px;
	float: left;
	margin-left: 5px;
	margin-top: -3px;
	margin-bottom: 5px;
	text-decoration: none;
	cursor: pointer; 
	border-width: 1px;
	border-style: solid;
	-webkit-borderradius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
#d3_chart_container .d3js_legend .legend_button:hover{
	box-shadow: 0px 0px 1px #888888;
}
#d3_chart_container .d3js_legend .legend_button:active{
	position: relative;
	top: 1px;
}
#graphs_panel_body #d3_chart_container .d3js_legend .legend_button{
	margin-top: 0px;
}
#d3_chart_container .d3js_title{
	width:44%;
	color: #606060;
	font-weight:bold;
}
#d3_chart_container .d3js_buttons{
	width:0px;
}
#d3_chart_container .d3js_buttons div{
	float: left;
	width:25%;
	text-align:center;
}
#d3_chart_container .d3js_buttons div:hover{
	cursor:pointer;
	color:#6eace5;
}
#d3_chart_container .d3js_brush{
	width:100%;
	height:50px;
}
#d3_chart_container .bars_layer rect
{
	fill: steelblue;
}
#d3_chart_container .bars_label_list div
{
	position:absolute;
	display:block;
	font-size:10px;
}
#d3_chart_container .tooltip_layer{
	background:red;
}
#d3_chart_container .tooltip_container{
	pointer-events: none;
}
#d3_chart_container .tooltip_container .tooltip_box_default{
	position:absolute;
	display:block;
	font-size:12px;
	background-color:rgba( 255, 255, 255, 0.6 );
	z-index:99998;
}
#d3_chart_container .tooltip_container .tooltip_box_main{
	position:absolute;
	display:block;
	font-size:12px;
	background-color:#E8E8E8;
	z-index:99998;
	padding: 4px;
	border-radius: 7px;
	border: 1px solid black;
}
#d3_chart_container .tooltip_container .tooltip_box_sub{
	position:absolute;
	display:block;
	font-size:11px;
	color:white;
	background-color:rgba( 0, 0, 0, 0.6 );
	z-index:99998;
	padding: 3px;
	border-radius: 5px;
}
#d3_chart_container .tooltip_container .tooltip_total_value{
	font-size:15px;
	color:red;
}

#d3_chart_container .tooltip_container .arrow-down {
	position:absolute;
	width: 0; 
	height: 0; 
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid #000;
	z-index: 99999;
}

#d3_chart_container .annotation_list .anno_box{
	z-index:90;
	opacity:0.2;
	padding:7px;
	position:absolute;
	display:block;
	font-size:11px;   
}
#d3_chart_container .annotation_list .anno_box:hover{
	cursor:pointer;
	opacity:1;
}

#d3_chart_container .chart_label_list div{
	position:absolute;
	display:block;
	font-size:10px;
	background-color:rgba( 255, 255, 255, 0.7 );
}

#d3_chart_container .chart_label_list div{
	display:none;
}

#d3_chart_container  .d3js_anno_svg_container .axis_layer{
	font-size:11px;
}

#d3_chart_container  .d3js_anno_svg_container .axis_layer path,
#d3_chart_container  .d3js_anno_svg_container .axis_layer line{
	fill: none;
	stroke: #EEEEEE;
	shape-rendering: crispEdges;
}
#d3_chart_container .axis_label{
	font-size:11px;
}
#d3_chart_container  .d3js_anno_svg_container  .graph_layer{
	fill: none;
}

#d3_chart_container .svg_brush
{
	font: 10px sans-serif;
}
#d3_chart_container .svg_brush
{
	fill: steelblue;
}
#d3_chart_container .svg_brush .xaxis path,
#d3_chart_container .svg_brush .xaxis line
{
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
}
#d3_chart_container .svg_brush .xbrush .extent
{
	stroke: #fff;
	fill-opacity: 0.2;
	shape-rendering: crispEdges;
}
#d3_chart_container .svg_brush .axis_layer text{
	fill: #000;
}
#d3_chart_container .svg_brush .graph_layer {
	fill:none;
}
#d3_chart_container .svg_brush .brush_line{
	stroke-width:0.3px !important;
}


#d3_chart_container .zoom_out_button, 
#d3_chart_container .zoom_in_button{
	border: 0px solid green;
	position:absolute;
	left:65px;
	width:18px !important;
	height:18px;
}

#d3_chart_container .zoom_out_button{
	top:55px;
	background: url(./.././images/zoom-minus-mini.png) no-repeat 0 0;
}

#d3_chart_container .zoom_in_button{
	top:30px;
	background: url(./.././images/zoom-plus-mini.png) no-repeat 0 0;
}

#d3_chart_container .refresh_button{
	position:absolute;
	left:61px;
	top: 75px;
	width:28px !important;
	height:27px;
	background: url(./.././images/refresh-icon-mini.png) no-repeat 0 0;
}

#d3_chart_container .pan_left_button{
	position:absolute;
	top:115px;
	left:-18px;
	width:18px !important;
	height:80px;
	background: url(./.././images/pan_left2.png) no-repeat 0 0;
}

#d3_chart_container .pan_right_button{
	position:absolute;
	top:115px;
	right:-18px;
	width:18px !important;
	height:80px;
	background: url(./.././images/pan_right2.png) no-repeat 0 0;
}


/* ======================= pie charts ========================= */

.d3_pie_chart_list {
	display: flex;
	margin-top: 40px;
}

.d3_pie_chart_list .chart_title {
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 15px;
}

.d3_pie_chart_list .chart_div{
	position: relative;
	width: 270px;	
}

.d3_pie_chart_list .chart_div > svg{
	margin-left: 30px;
}

.d3_pie_chart_list .slice_text{
	position: absolute;
	color: white;
	font-weight: bold;
	font-size: 13px;
	max-width: 90px;
}

.d3_pie_chart_list .slice_name{
	margin: 0 auto;
	display: table;
}

.d3_pie_chart_list .slice_value{
    background-color: rgba(14, 14, 14, 0.52);
    padding: 4px;
    border-radius: 7px;
}

/* ======================= LineGraph  ========================= */

.d3.lines_graph .axis,
.d3.lines_graph .axis line,
.d3.lines_graph .graph_line,
.d3.lines_graph .graph_line_point {
	fill:none;
	stroke-width: 1;
	opacity: 1;
}

.d3.lines_graph .axis {
	stroke: #000;	
}

.d3.lines_graph .brush {
	stroke:#44AB3D;
	fill:rgba(68,171,61,0.5);
}

.d3.lines_graph .axis line {
	stroke: #e6e6e6;
}

.d3.lines_graph.axis_label,
.d3.lines_graph .axis text {
	fill: #000;
	font-size: 10px;
	stroke:none;
}

.d3.lines_graph_container .svg_wrap,
.d3.lines_graph_container .legends,
.d3.lines_graph_container .legends .row,
.d3.lines_graph_container .legends .color,
.d3.lines_graph_container .legends .name {
	position:relative;
	float:left;
}

.d3.lines_graph_container .svg_wrap {
	width:90%;
	min-height:10px;
	position:relative;
	z-index:1;
}

.d3.lines_graph_container .title {
	font-size:1.3rem;
	text-align:center;
	padding:0.5rem 0;
}

.d3.lines_graph_container .legends .row {
	width:100%;
	margin:0.5rem 0;
}

.d3.lines_graph_container .legends .color {
	width:10px;
	height:1rem;
}

.d3.lines_graph_container .legends .name {
	font-weight:bold;
	margin-left:0.5rem;
}

.d3.lines_graph.tooltip {
	position:absolute;
	z-index:999;
	background-color:#fff;
	box-shadow:0px 0px 12px 4px #bbb;
	padding:0.5rem;
}

.d3.lines_graph .reset_zoom {
	cursor:pointer;
}

.d3.lines_graph .reset_zoom .background {
	fill:#f7f7f7;
	stroke:#cccccc;
	stroke-width:1;
}