.diagram_wrapper{width:100%;padding:5px 5px 0; overflow-x:auto;}
  .diagram_inner{position: relative;font-size: 0px; background: #5d0c7f;}
  .diagram_inner *{font-size:11px; }
  .diagram_inner .color-block{width: 5%;min-width:14px;min-height:30px;display:inline-block; position:relative;}
  .diagram_inner .color-block .text-lbl{position:absolute; bottom:-17px; left:-5px;}
  .diagram_inner .color-block .text-lbl.end-lbl{left: 100%; margin-left:-8px;}
  .diagram_inner:after{position:absolute; bottom:-17px; right:-2em;content:attr(data-measure); font-size:12px;}
  .diagram_wrapper .title{font-size: 16px; display:block; text-align: center; padding-top:28px;}
  .diagram_wrapper .ind-text-lbl{position: absolute;  bottom: -16px;  left: 0px; color: #230627;font-weight: bold;}
  .diagram_inner .dia_value{position:absolute; right:0; width:100%; background: #c8c8c8; top:0; min-height: 30px;
     /* For Safari 3.1 to 6.0 */
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-timing-function: linear;
    /* Standard syntax */
    transition-property: all;
    transition-duration: 0.2s;
    transition-timing-function: linear;}
  .diagram_inner .dia_value .value-lbl{margin-top: -17px; margin-left: -6px; display:block;}
  .diagram_inner .indicator{display:block; width:1px; height:37px; border: solid 1px #7030A0; position:absolute; top:-10px; background-color: #7030A0;
   /* For Safari 3.1 to 6.0 */
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-timing-function: linear;
    /* Standard syntax */
    transition-property: all;
    transition-duration: 0.2s;
    transition-timing-function: linear;
  }

@media (max-width: 360px) {
  .diagram_inner .color-block:nth-child(even) .text-lbl:not(.end-lbl){
     display:none;
  }
}