.pie-legend li {
    display:block;
    position:relative;
    margin-bottom:4px;
    border-radius:5px;
    padding:2px 8px 2px 28px;
    font-size:14px;
    cursor:default;
    -webkit-transition:background-color 200ms ease-in-out;
    -moz-transition:background-color 200ms ease-in-out;
    -o-transition:background-color 200ms ease-in-out;
    transition:background-color 200ms ease-in-out
}

.pie-legend li span {
    display:block;
    position:absolute;
    left:0;
    top:0;
    width:20px;
    height:100%;
    border-radius:5px
}

#chartjs-tooltip.above:before,#chartjs-tooltip.below:before {
    bottom:1em;
    content:"";
    display:block;
    left:50%;
    position:absolute;
    z-index:99
}

.canvas-holder,.pie-legend {
    float:left
}

#canvas-holder {
    width:100%;
    margin-top:50px;
    text-align:center
}

#chartjs-tooltip {
    opacity:0;
    position:absolute;
    background:rgba(0,0,0,.7);
    color:#fff;
    padding:3px;
    border-radius:3px;
    -webkit-transition:all .1s ease;
    transition:all .1s ease;
    pointer-events:none;
    -webkit-transform:translate(-50%,0);
    transform:translate(-50%,0)
}

#chartjs-tooltip.below {
    -webkit-transform:translate(-50%,0);
    transform:translate(-50%,0)
}

#chartjs-tooltip.below:before {
    border:solid;
    border-color:#111 transparent;
    border-color:rgba(0,0,0,.8) transparent;
    border-width:0 8px 8px;
    -webkit-transform:translate(-50%,-100%);
    transform:translate(-50%,-100%)
}

#chartjs-tooltip.above {
    -webkit-transform:translate(-50%,-100%);
    transform:translate(-50%,-100%)
}

#chartjs-tooltip.above:before {
    border:solid;
    border-color:#111 transparent;
    border-color:rgba(0,0,0,.8) transparent;
    border-width:8px 8px 0;
    top:100%;
    -webkit-transform:translate(-50%,0);
    transform:translate(-50%,0)
}

tfoot input {
    width: 100%;
}