<style>
    #output {
        padding: 5px;
        font-size: 12px;
        margin-top: 5px;
    }
    /* styles for responsive pivot UI + bootstrap-like styles default */
    .pivotHolder table.pvtUi {
        table-layout:fixed;
    }
    .pivotHolder select {
        visibility:hidden;
    }
    .pivotHolder select.form-control {
        visibility:visible;
    }

    .pivotHolder > table.pvtUi, .pivotHolder table.pvtTable {
        width:auto;
        margin-bottom:0px;
    }
    .pivotHolder > table.pvtUi>tbody>tr>td, .pivotHolder > table.pvtUi>tbody>tr>th {
        border: 1px solid #ddd;
    }
    .pivotHolder .pvtAxisContainer li span.pvtAttr {
        height:auto;
        white-space:nowrap;
    }
    .pivotHolder .pvtAxisContainer.pvtUnused, .pivotHolder .pvtAxisContainer.pvtCols {
        vertical-align:middle;
    }

    .pivotHolder > table.pvtUi>tbody>tr:first-child > td:first-child {
        width:250px;
    }

    .pivotHolder td.pvtRendererArea {
        padding-bottom:0px;
        padding-right:0px;
        border-bottom-width:0px !important;
        border-right-width:0px !important;
    }
    .pivotHolder td.pvtVals br { display:none; }

    .pvtRendererArea>div {
        overflow:auto;
    }

    .pvtTableRendererHolder {
        max-height:500px;  /* limit table height if needed */
    }
    .pvtUi select.pvtRenderer, .pvtUi select.pvtAggregator, .pvtUi select.pvtAttrDropdown {
        float:left;
        max-width:150px;
    }

    .pivotHolder .pvtAxisContainer.pvtUnused, .pivotHolder .pvtAxisContainer.pvtCols {
        vertical-align: middle;
    }

    .pivotHolder > table.pvtUi>tbody>tr>td, .pivotHolder > table.pvtUi>tbody>tr>th {
        border: 1px solid #ddd;
    }

    /* custom */
    table.pvtUi td:first-child {
        min-width:250px;
        max-width:300px;
        white-space:normal;
    }
    .pvtFixedHeader {
        cursor:pointer;
    }
    td.pvtAxisContainer.pvtRows {
        max-width:300px;
    }
    th.pvtAxisLabel {
        min-width:auto !important;
    }
    .pvtColLabel {
        min-width:100px;
        max-width:200px;
        white-space:normal;
    }
    .pvtRowLabel {
        min-width:150px;
        max-width: 250px;
        white-space:normal;
    }
    .pvtAxisContainer li span.pvtAttr {
        padding: 6px;
        margin-bottom:5px;
        white-space: nowrap;
        background: #fff;
        white-space: normal;
        display: inline-block;
    }
    .pvtFilterBox {
        max-width: 600px;
        width: auto;
        text-align:left;
    }
    .pvtFilterBox p {
        padding:8px;
    }
    .pvtFilterBox p button {
        margin-right:8px;
    }
    table.pvtTable tbody tr th, table.pvtTable thead tr th {
        background-color: #eeeeee;
    }

    .c3-line, .c3-focused {stroke-width: 3px !important;}
    .c3-bar {stroke: white !important; stroke-width: 1;}
    .c3 text { font-size: 12px; color: grey;}
    .tick line {stroke: white;}
    .c3-axis path {stroke: grey;}
    .c3-circle { opacity: 1 !important; }
    .c3-xgrid-focus {visibility: hidden !important;}

    .data-table-list {
        display: flex;
        flex-wrap: wrap;
    }

    .data-table-list .row {
        width: 100%;
        box-sizing: border-box;
    }

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


</style>
