/* Simple Chart */

/* Generic */
    .sc-chart { background-color:#fff; overflow:hidden; font-family: 'Merriweather', 'Lato', Arial, sans-serif;  }
    .sc-chart, .sc-chart * { box-sizing:border-box }
    .sc-title { text-align:right; font-weight:600; font-size:14px; color:#555 }

    .sc-item { border:1px solid rgba(0, 0, 0, .25); background-color:#00aeef; box-shadow:inset 0 1px rgba(255, 255, 255, .3); transition:margin .35s; cursor:pointer; }
    .sc-item:hover { z-index:1000; box-shadow:0 1px 3px rgba(255,255,255,.5) }
    .sc-item:hover .sc-tooltip { display:block; margin-top:-30px; }

    .sc-tooltip { display:none; position:absolute; top:-40px; left:50%; width:140px; padding:5px 10px; margin-left:-70px; font-size:11px; background-color:rgba(255,255,255,.95); border-radius:3px; box-shadow:0 3px 10px rgba(0,0,0,.3); transition:margin .35s; }
    .sc-tooltip-value { display:block; height:20px; font-size:16px; font-weight:600 }
    .sc-tooltip-label { color:#555 }

    .sc-label { font-size:13px; color:#777; text-align:center }
    .sc-value {font-size:13px; font-weight:600; }


/* Progress */
    .sc-progress { position:relative; float:left; width:100%; clear:left; padding:20px 50px; }
    .sc-progress .sc-canvas { position:relative; width:100%; height:20px; margin:30px 0;}
    .sc-progress .sc-item { position:absolute; height:100%; border-right:none; border-top-color:rgba(0, 0, 0, .15) }
    .sc-progress .sc-item:first-child { border-radius:3px 0 0 3px }
    .sc-progress .sc-item:last-child { border-radius:0 3px 3px 0 }
    .sc-progress .sc-label { position:absolute; bottom:-50px; height:40px }
    .sc-progress .sc-value { position:absolute; top:-25px; left:0; width:100%; text-align:left }

/* Bar */
    .sc-bar { position:relative; float:left; width:100%; clear:left; padding:20px 160px 20px 210px }
    .sc-bar .sc-canvas { position:relative; float:left; width:100%; margin:30px 0 }
    .sc-bar .sc-item { float:left; clear:left; margin:5px 0 0; border-radius:3px }
    .sc-bar .sc-label { float:left; width:200px; margin-left:-200px; padding-right:10px; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
    .sc-bar .sc-value { float:right; width:110px; margin-right:-110px; text-indent:5px }
    .sc-bar .sc-item:hover { margin-left:40px; }
    .sc-bar .sc-item:hover .sc-label { color:#000 }
    .sc-bar .sc-tooltip { top:auto; right:-30px; left:auto; margin-left:0  }

/* Column */
    .sc-column { position:relative; float:left; width:100%; clear:left; padding:60px 30px; }
    .sc-column .sc-canvas { position:relative; float:left; width:100%; height:100%; padding:20px 0 }
    .sc-column .sc-title { float:left; width:100%; padding:10px 0; margin-top:-60px; }
    .sc-column .sc-item { position:absolute; bottom:0; text-align:center; }
    .sc-column.sc-20-items .sc-label, .sc-column.sc-many-items .sc-label { width:200%; margin:0 -50% }
    .sc-column.sc-20-items .sc-item:nth-child(2n) .sc-label, .sc-column.sc-many-items .sc-item:nth-child(2n) .sc-label { bottom:-34px; }
    .sc-column .sc-label { position:absolute; bottom:-50px; left:0; width:100%; height: 40px; overflow:hidden; font-size:11px; font-weight:600;  }
    .sc-column .sc-value { position:absolute; top:-20px; left:0; width:100%; }
    .sc-column .sc-item:hover .sc-label { color:#000 }

/* Step */
    .sc-step { position:relative; float:left; width:100%; clear:left; padding:60px 30px; }
    .sc-step .sc-canvas { position:relative; float:left; width:100%; height:100%; padding:20px 0 }
    .sc-step .sc-title { float:left; width:100%; padding:10px 0; margin-top:-60px; }
    .sc-step .sc-item { position:absolute; bottom:0; text-align:center; border:none; box-shadow:inset 0 3px 0 #00aeef }
    .sc-step .sc-label { position:absolute; bottom:-20px; left:0; width:100%; overflow:hidden; white-space: nowrap; font-size:11px; font-weight:600; transform:rotate(-30deg); transform-origin:100% 100% }
    .sc-step .sc-value { position:absolute; top:-20px; left:0; width:100%; }
    .sc-step .sc-item:hover { z-index:100 !important; margin-bottom:20px; }
    .sc-step .sc-item:hover .sc-label { color:#000 }

/* Waterfall */
    .sc-waterfall { position:relative; float:left; width:100%; clear:left; padding:20px 160px }
    .sc-waterfall .sc-canvas { position:relative; float:left; width:100%; margin:30px -160px }
    .sc-waterfall .sc-item { position:relative; float:left; clear:left; margin:5px 0 0 160px; border-radius:3px }
    .sc-waterfall .sc-label { float:left; width:160px; margin-left:-160px; padding-right:20px; text-align:right }
    .sc-waterfall .sc-value { float:right; width:100px; margin-right:-110px; }
    .sc-waterfall .sc-item:hover { margin-left:180px; border-left:1px solid rgba(0, 0, 0, .2) }
    .sc-waterfall .sc-item:hover .sc-label { color:#000 }