#chart {
    background-color: #00a7d4;
}

#chart .c3-chart {
    transform: none;
}

#chart .c3-axis.c3-axis-x .domain {
    display: inline;
    stroke: white;
}

#chart .c3-axis .tick text tspan {
    opacity: 1;
    font-weight: normal;
    font-family: "open_sansregular", sans-serif;
    font-size: 12px;
    fill: #fff;
    stroke: none;
}

.rt-graph-header {
    width: 100%;
    padding: 6px 10px 0;
    color: #fff;
    font-size: 12px;
}

#chart .c3-event-rect {
    cursor: default;
}

#chart .c3-tooltip tr {
    border: none;
}

#chart .c3-tooltip {
    border-radius: 4px;
}

#chart .c3-tooltip th {
    border-radius: 4px 4px 0 0;
}

#chart .c3-tooltip td {
    border: none;
    border-radius: 0 0 4px 4px;
}

#chart .c3-tooltip td.value {
    text-align: left;
}

#chart .c3-tooltip,
#chart .c3-tooltip th {
    font-weight: bold;
    font-size: 12px;
    color: #000000;
    border-bottom: 1px solid #dddddd!important;
}

#chart .c3-tooltip th {
    background-color: #fff;
}

#chart .c3-tooltip .name {
    display: block;
    font-weight: normal;
    font-size: 11px;
}

#chart .c3-tooltip .value {
    font-size: 14px;
    text-align: center;
}


/* dashed focus grid*/

#chart .c3-grid .c3-xgrid-focus line {
    stroke-dasharray: 3 3;
    stroke-width: 2;
    opacity: 1;
}

.c3-axis .tick line,
.c3-axis-y .tick:first-of-type,
.c3-axis-y .tick:last-of-type,
.c3-grid .c3-ygrids line:first-child,
.c3-grid .c3-ygrids line:last-child {
    display: none;
}

.c3-axis-y {
    transform: translate(22px, -6px);
}

.c3-axis .tick text tspan {
    stroke: #fff;
    opacity: 0.5;
}

.c3-chart {
    transform: translate(8px, 0);
}


/*data lines*/

.c3-chart-lines {
    opacity: 0.65;
}


/* data lines width*/

.c3-chart-lines path {
    stroke-width: 1.3;
}

.c3-grid .c3-ygrids line,
.c3-grid .c3-xgrid-focus line {
    stroke: rgba(255, 255, 255, 0.65);
    stroke-dasharray: none;
    opacity: 0.4;
}