path { 
    stroke: steelblue;
    stroke-width: 2;
    fill: none;
}
li{
	list-style: none;
}
ul{
	margin: 0; padding: 0;
}

.axis path,
.axis line {
    fill: none;
    stroke: grey;
    stroke-width: 2;
    shape-rendering: crispEdges;
}

.hidden{
	display: none;
	opacity: 0;
}
.legends{font-size: 12px;}
.legend {
	white-space: nowrap; margin: 2px 0px; padding-right: 5px; position: relative;
	text-overflow: ellipsis; overflow: hidden; transition: 0.3s ease; 
}
.legend .text{
	text-overflow: ellipsis; overflow: hidden; margin: 0 5px;  display: inline-block;
}
.legend:hover{
	cursor: pointer; background: lightgrey;
}
.legend .square{
	display: inline-block; width: 7px; color: rgba(0,0,0,0);
}
.legend .square::after{
	content:"|";
}
.legends li{
	position: relative;
}
.legends .hint{
	opacity:0; position: absolute; top: 0; right: 100%; background: rgba(255,255,255,0.9); border-radius: 5px; transition: 0.3s ease; padding: 0 5px; white-space: nowrap;
}
.legend:hover ~.hint{
	opacity:1; 
}

.cus-gui {
	position: absolute; right: 5px; top: 5px;
}
.cus-gui input{
	margin:3px; background: rgba(0,0,0,0.7); color: white; padding: 3px 6px; border: 1px solid white; transition: 0.3s ease;
}
.cus-gui input:hover{
	background: white; color: black; border: 1px solid black; cursor: pointer;
}
.cus-gui input.selected{
	background: rgba(117, 163, 209, 0.61);
}
.cus-gui div{
	display: inline-block;
}
.cus-gui .hr{
	height: 100%; background: black; width: 1px; margin: 0px 3px; color: rgba(0,0,0,0);
}
.cus-gui .hr::after{
	content: "|";
}

.cus-line-tooltip{
	position: absolute;
	border: 1px solid white;
	padding:3px;
	border-radius: 3px;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 150px; white-space: nowrap; z-index: 980;
}

.cus-gantt-tooltip{
  	line-height: 1;
	position: absolute;
	border: 1px solid white;
	padding:5px;
	border-radius: 5px;
	background: rgba(0,0,0,0.75);
	color: white; white-space: nowrap;
}
.cus-gantt-tooltip .line span, .cus-gantt-tooltip .line strong{
	display: inline-block;
}
.cus-gantt-tooltip:after {
	box-sizing: border-box;
	display: inline;
	font-size: 10px;
	width: 100%;
	line-height: 1;
	color: rgba(0, 0, 0, 0.75);
	content: "\25BC";
	position: absolute;
	text-align: center;
	margin: -1px 0 0 0;
	top: 100%;
	left: 0;
}
.cus-x-tooltip{
	position: absolute; background: rgba(0,0,0,0.75); color: white; padding: 0px 5px; border-radius: 5px;
}


@keyframes whitepulse {
    0% {background-color: rgba(255,255,255,0);}
    50% {background-color: rgba(255,255,255,0.5);}
    0% {background-color: rgba(255,255,255,0);}
}
.cus-gantt-highlight{
	position: absolute; animation-name: whitepulse; animation-duration: 2s; animation-iteration-count: infinite; 
}

.cus-subplot{
	margin:0px;
}

.title{
  	position: absolute; text-align: center; margin: auto; top:0;
}
.x.title{
	top: auto; bottom: 0;
}
.title .center{
	position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; height: 10px;
}