/* Chart container */
    .chart{
        margin-top:40px;
        position:relative;
    }
    
    /* ONE continuous vertical line */
    .chart::before{
        content:"";
        position:absolute;
        left:30%; /* same as label width */
        top:0;
        bottom:0;
        width:1px;
        background:#000000;
    }
    
    /* Each row */
    .row{
        display:flex;
        align-items:center;
        margin-bottom:10px;
    }
    
    /* Label outside */
    .label{
        width:30%;
        font-size:16px;
        color: #000000;
    }
    
    /* Bar section */
    .bar-section{
        flex:1;
    }
    
    /* Bar + value */
    .bar-area{
        display:flex;
        align-items:center;
    }
    
    .bar{
        height:36px;
        background:#575589;
        transition:0.3s ease;
        border-right:3px solid #242256;
    }
    
    /* White stripes on hover */
    .row:hover .bar{
        background:
            repeating-linear-gradient(
                45deg,
                rgba(255,255,255,0.7),
                rgba(255,255,255,0.7) 8px,
                transparent 8px,
                transparent 16px
            ),
            #575589;
    }
    
    .value{
        margin-left:12px;
        font-size:25px;
        color:#b9c6cf;
        transition:0.3s ease;
    }
    
    .row:hover .value{
        color:#575589;
    }
    
    .value.highlight{
        font-size:25px;
    }
    
    /* Bottom line aligned with vertical line */
    .chart::after{
        content:"";
        display:block;
        margin-left:30%;
        border-bottom:2px solid #000000;
        margin-top:30px;
    }