table{font-family:arial,sans-serif;border-collapse:collapse;width:100%;color:#000}table th{color:#000!important}table tr{background-color:#fff!important}table tr:hover{background-color:#f4f7fc!important}td,th{border:1px solid #ddd;text-align:left;padding:8px}*{margin:0;padding:0;box-sizing:border-box}.container{max-width:1200px;min-width:650px;margin:0 auto;padding:50px}.chart{display:grid;border:2px solid #000;position:relative;overflow:hidden}.chart-row{display:grid;grid-template-columns:50px 1fr;background-color:#dcdcdc}.chart-row:nth-child(odd){background-color:silver}.chart-period{color:#fff;background-color:#708090!important;border-bottom:2px solid #000}.chart-lines,.chart-period{grid-template-columns:50px repeat(12,1fr)}.chart-lines{position:absolute;height:100%;width:100%;background-color:transparent}.chart-period>span{text-align:center;font-size:13px;align-self:center;font-weight:700;padding:15px 0}.chart-lines>span{display:block;border-right:1px solid rgba(0,0,0,.3)}.chart-row-item{background-color:grey;border:1px solid #000;border-top:0;border-left:0;padding:20px 0;font-size:15px;font-weight:700;text-align:center}.chart-row-bars{list-style:none;display:grid;padding:15px 0;margin:0;grid-template-columns:repeat(12,1fr);grid-gap:10px 0;border-bottom:1px solid #000}li{font-weight:450;text-align:left;font-size:15px;min-height:15px;background-color:#708090;padding:5px 15px;color:#fff;overflow:hidden;position:relative;cursor:pointer;border-radius:15px}ul .chart-li-one{grid-column:1/2;background-color:#588bae}ul .chart-li-two-a{grid-column:2/2;background-color:#0080ff}ul .chart-li-two-b{grid-column:2/4;background-color:#4682b4}ul .chart-li-three{grid-column:3/5;background-color:#57a0d3}ul .chart-li-four{grid-column:3/9;background-color:#0e4d92}ul .chart-li-five{grid-column:7/10;background-color:#4f97a3}ul .chart-li-six{grid-column:10/12;background-color:#73c2fb}ul .chart-li-seven{grid-column:12/12;background-color:#0080ff}