.container-graph{width:80%;margin:0 auto;border:1px solid #a0a0a0;background:white;padding:10px 0}.graph{margin:0 auto;height:30px;margin-bottom:5px}.graph:last-child{margin-bottom:0}.total{width:40px;float:left;font-size:14px;color:#404040;vertical-align:center;margin-top:4px;font-weight:bold;text-align:center}.bars{height:30px;margin-left:40px;width:calc(100% - 45px)}.bar{width:0;float:left;margin-left:40px;height:30px;font-size:14px;font-weight:bold;color:black;margin:0;padding:0;cursor:pointer;border:1px solid #aaa}@media screen and (max-width:800px){.container-graph{width:100%}.graph{height:20px}.bars{height:20px}.total{font-size:12px;margin-top:0}.bar{font-size:12px;height:20px;line-height:1em}.value{margin-top:0}}.bar:hover{opacity:.65}@keyframes expand{from{width:0}to{width:100%}}.value{display:block;margin-top:5px;text-align:center}p .bg-group1,p .bg-group2,p .bg-group3,p .bg-group4,p .bg-group5{padding:0 5px}.bg-group1{background:linear-gradient(to bottom,#80ffff,#d0ffff 50%,#80ffff)}.bg-group2{background:linear-gradient(to bottom,#80ff80,#d0ffd0 50%,#80ff80)}.bg-group3{background:linear-gradient(to bottom,#ffff80,#ffffd0 50%,#ffff80)}.bg-group4{background:linear-gradient(to bottom,#ff8080,#ffd0d0 50%,#ff8080)}.bg-group5{background:linear-gradient(to bottom,#ff80ff,#ffd0ff 50%,#ff80ff)}.top-legend{margin:0 10px 0 0;text-align:right}.top-legend li{display:inline-block;float:right;min-width:100px;border:1px solid #aaa;font-size:12px;text-align:center;padding:6px}@media screen and (max-width:800px){.top-legend li{min-width:50px;font-size:11px;padding:3px 3px}}