/* circle packing */

text {
    font-size: 14px !important;
    font-family: "Arial, Helvetica, sans-serif";
    pointer-events: none;
}
text.parent {
    fill: #1f77b4;
}
circle {
    fill: #ccc;
    stroke: #999;
    fill-opacity: .8;
    pointer-events: all;
}
circle.parent {
    fill: #1f77b4;
    fill-opacity: .3;
    stroke: steelblue;
}
circle.parent:hover {
    stroke: #ff7f0e;
    stroke-width: 5px;
}
circle.child {
    pointer-events: none;
}
circle[depth='0'] {
    fill: #428bca;
}
circle[depth='1'] {
    fill: #ffb752;
}
circle[depth='2'] {
    fill: #d6487e;
}
circle[depth='3'] {
    fill: #fee188;
}
circle[depth='4'] {
    fill: #9585bf;
}


/* tree chart*/

.node circle {
    cursor: pointer;
    fill: #fff;
    stroke: steelblue;
    stroke-width: 1.5px;
}
.node text {
    font-size: 11px;
}
path.link {
    fill: none;
    stroke: #ccc;
    stroke-width: 1.5px;
}
treechart rect {
    fill: none;
}
treechart rect[data-state='ok'] {
    fill: green;
}
treechart rect[data-state='warning'] {
    fill: yellow;
}
treechart rect[data-state='error'] {
    fill: red;
}


/* gantt chart */

ganttchart .chart {
    font-family: Arial, sans-serif;
    font-size: 12px;
    margin-top: 30px;
}

ganttchart text {
    font-family: "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif !important;
}

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

ganttchart .bar {
    fill: #33b5e5;
}

ganttchart .bar-failed {
    fill: #CC0000;
}

ganttchart .bar-running {
    fill: #669900;
}

ganttchart .bar-succeeded {
    fill: #33b5e5;
}

ganttchart .bar-killed {
    fill: #ffbb33;
}