svg.c3 {
    //    shape-rendering: optimizeSpeed;
    //    shape-rendering: crispEdges;
}

svg.c3.global {
    position: fixed; // Workaround for IE11: It does not use height:0 properly and scrollbars can appear
    height: 0;
    width: 0;
}

.no-highlight {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none;
}

.clearfix {
    &:after {
        content: " ";
        display: table;
        clear: both;
    }
}

///////////////////////////////////////////////////////////////////////////////////////////////
// Chart
///////////////////////////////////////////////////////////////////////////////////////////////
.c3.chart {
    .no-highlight;
    overflow: hidden;
}


///////////////////////////////////////////////////////////////////////////////////////////////
// Axis
///////////////////////////////////////////////////////////////////////////////////////////////
.c3 g.axis {
    shape-rendering: crispEdges;

    text.label {
        text-anchor: middle;
        font-weight: bold;
    }

    line {
        stroke: black;
    }
}


///////////////////////////////////////////////////////////////////////////////////////////////
// Plot
///////////////////////////////////////////////////////////////////////////////////////////////
.c3.plot {
    cursor: default;

    .background {
        -ms-touch-action: none;
        touch-action: none; // Prevent default browser page zooming over chart
        pointer-events: all; // Force background to be target of 'pointer' events
    }

    &.zoomable {
        g.content {
            cursor: ew-resize;
            cursor: -webkit-grab;
            cursor: -moz-grab;
            cursor: grab;
            &:active {
                cursor: -webkit-grabbing;
                cursor: -moz-grabbing;
                cursor: grabbing;
            }
        }

        g.layer {
            &.sampled {
                shape-rendering: crispEdges;
            }
        }

        .scaled {
            vector-effect: non-scaling-stroke;

            rect, line {
                shape-rendering: crispEdges;
            }
        }

        line.select_value {
            vector-effect: non-scaling-stroke;
            shape-rendering: crispEdges;
            pointer-events: none;
        }
    }

    &.selectable {
        .brush {
            fill: none;
        }

        .unbrush {
            fill: black;
            opacity: 0.6;
        }
    }

    .layer {
        &.path {
            text {
                text-anchor: middle;
                alignment-baseline: middle;
                pointer-events: none;
            }
        }

        &.line {
            path {
                fill: none;
            }
        }

        &.straight {
            shape-rendering: crispEdges;

            &.draggable {
                &.horizontal {
                    cursor: row-resize;
                }
                &.vertical {
                    cursor: col-resize;
                }
            }

            text {
                pointer-events: none;
            }

            line.grab {
                visibility: hidden;
                stroke-width: 9px;
                stroke-dasharray: none;
                pointer-events: all;
            }
        }

        &.region {
            shape-rendering: crispEdges;

            &.draggable {
                cursor: move;
            }

            line.grab {
                visibility: hidden;
                stroke-width: 9px;
                stroke-dasharray: none;
                pointer-events: all;
                &.top, &.bottom {
                    cursor: ns-resize;
                }
                &.left, &.right {
                    cursor: ew-resize;
                }
            }
        }

        &.scatter {
            text {
                text-anchor: middle;
                alignment-baseline: middle;
                pointer-events: none;
            }
        }

        &.bar {
            shape-rendering: crispEdges;
        }

        &.segment, &.icicle {
            shape-rendering: crispEdges;

            rect {
                vector-effect: non-scaling-stroke;
            }

            text {
                alignment-baseline: middle;
                pointer-events: none;
                text-anchor: middle;
            }
        }
        &.icicle {
            rect {
                cursor: pointer;
            }
        }
    }
}

.c3.hover {
        display: none;
        position: fixed;
        z-index: 1000;
        margin-top: -0.5em;
        margin-left: 0.5em;
        min-width: 3em;
        padding: 0.25em;
        border-radius: 0.25em;
        pointer-events: none;
        color: black;
        background-color: wheat;
        box-shadow: 3px 3px 6px black;
        white-space: pre;
    &:before {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        left: -0.5em;
        border-top: 0.5em solid transparent;
        border-bottom: 0.5em solid transparent;
        border-right: 0.5em solid wheat;
    }
}

html.grabbing, html.grabbing * {
    cursor: ew-resize !important;
    cursor: -webkit-grabbing !important;
    cursor: -moz-grabbing !important;
    cursor: grabbing !important;
}


///////////////////////////////////////////////////////////////////////////////////////////////
// Polar
///////////////////////////////////////////////////////////////////////////////////////////////
.c3.polar {
    .content > .background {
        visibility: hidden;
        pointer-events: all; // Let entire chart grab pointer events, such as zooming
    }

    svg.layers {
        overflow: visible;
    }

    .layer {
        &.radial {
            &.draggable {
                cursor: move;
                line.grab {
                    visibility: hidden;
                    stroke-width: 9px;
                    stroke-dasharray: none;
                    pointer-events: all;
                }
            }
        }

        &.sunburst {
            path {
                cursor: pointer;
            }
            circle.bullseye {
                cursor: pointer;
            }
            circle.center {
                pointer-events: none;
                fill: none;
                stroke: black;
                stroke-width: 3;
                stroke-opacity: 0.5;
                stroke-dasharray: 5,2;
            }
        }
    }
}


///////////////////////////////////////////////////////////////////////////////////////////////
// Sankey Flow
///////////////////////////////////////////////////////////////////////////////////////////////
.c3.sankey {
    .nodes {
        &.horizontal_labels {
            text {
                transform: rotate(0);
            }
            svg.label {
                overflow: visible;
            }
        }
        &.vertical_labels {
            text {
                transform: rotate(-90deg);
                text-anchor: start;
            }
            svg.label {
                overflow: hidden;
            }
        }
    }

    rect {
        shape-rendering: crispEdges;
    }

    .link path {
        fill: none;
        opacity: 0.5;
    }

    .links {
        &.curve {
            stroke: black;
        }
        &.straight {
            fill: black;
        }
    }

    text {
        pointer-events: none;
    }

    rect.background {
        fill: none;
        pointer-events: all;
    }
}

.c3.butterfly {
    .navigatable {
        .node:not(.focal) rect {
            cursor: pointer;
        }
    }
}


///////////////////////////////////////////////////////////////////////////////////////////////
// Table
///////////////////////////////////////////////////////////////////////////////////////////////
table.c3.table {
    border-collapse: collapse;

    th {
        .no-highlight;
        cursor: default;

        &.sortable {
            cursor: pointer;

            .ui-icon {
                margin-left: 0.25em;
            }
        }
    }

    td {
        div.bar {
            margin: 1px 0;
            background-color: lightgray;
            border-radius: 0.4em;

            span {
                white-space: pre;
            }
        }
    }

    // Pagination/Search Footer
    caption {
        caption-side: bottom;
        .no-highlight;

        span {
            margin: 0 0.25em;

            &.button {
                cursor: pointer;
            }

            &.disabled {
                opacity: 0.4;
                pointer-events: none;
            }
        }

        ul {
            display: inline;
            padding: 0;
            margin: 0;

            li {
                display: inline;
                list-style-type: none;
                margin: 0;
                padding: 0 0.25em;
                border: 1px solid gray;

                &:first-of-type {
                    border-top-left-radius: 0.4em;
                    border-bottom-left-radius: 0.4em;
                }
                &:last-of-type {
                    border-top-right-radius: 0.4em;
                    border-bottom-right-radius: 0.4em;
                }

                &.active {
                    font-weight: bold;
                    pointer-events: none;
                    color: white;
                    background-color: gray;
                }

                &:not(.active) {
                    cursor: pointer;
                }

                &.disabled {
                    pointer-events: none;
                }
            }
        }

        span.pagination {
            float: left;
        }

        span.search {
            white-space: nowrap;

            input {
                vertical-align: text-bottom;

                &.notfound {
                    color: red;
                }
            }
        }
    }

    &.selectable {
        .no-highlight;
        tr {
            cursor: pointer;
        }
    }
}


///////////////////////////////////////////////////////////////////////////////////////////////
// Legend
///////////////////////////////////////////////////////////////////////////////////////////////
ul.c3.legend {
    display: inline-block;
    padding: 0.5em;
    margin: 0.5em;
    border-radius: 0.5em;
    cursor: default;
    .no-highlight;
    list-style-type: none;
    color: white;
    background: #404040;
    font-family: sans-serif;

    ul { // Nested Lists
        padding-left: 0.25em;
        list-style-type: inherit;
    }

    li { // List Items
        //        white-space: nowrap;
        line-height: 95%;
        padding: 0.25em 0.5em 0.25em 0.5em;
        overflow: hidden;
        white-space: nowrap;

        > .bullet {
            display: inline-block;
            margin-right: 0.5em;

            > svg {
                shape-rendering: crispEdges;
            }
        }

        > .content {
          white-space: normal;
        }
    }

    &.hoverable li:hover {
        background: rgba(255,255,255,0.2);
        border-radius: 0.25em;
    }
}