<div class="overall_div_chart">
     <div class="row mt-2 rox1">
        <div class="col-lg-2 chart_div">
            <div class="card cardShadow pr3" style="height:235px">
                <h5 class="div-head" style="height:70px"><b> %age of consumers who...</b></h5>
                <div class="bottom_border_div"></div>
                <div id="" class="animate__animated animate__fadeInLeft"  >
                    <div class="labelss">
                        <div class="xchartRow r1"><b>Consumed in Past 7 Days</b></div>
                        <div class="xchartRow r2"><b>Consumed in Past 3 months</b></div>
                        <div class="xchartRow r3"><b>Consumed in Past 1 Year</b></div>
                        <div class="xchartRow r4"><b>Ever Consumed</b></div>
                    </div>
                </div>
                <span class="custom_base incidenceBase"></span>
            </div>
        </div>
        <div class="col-lg-2 chart_div">
            <div class="card cardShadow pr7" style="height:235px">
                <h5 class="div-head" style="height:70px"><b>Protein Bar/Energy Bar/Cereal Bar/Granola Bar</b></h5>
                <div class="bottom_border_div"></div>
                <div id="" class="animate__animated animate__fadeInLeft">
                    <div class="xChart">
                        <div class="xbar_row"><div class="xbar bar1" style="width:23%;"><span class="per" id="protienb1">23%</span></div></div>
                        <div class="xbar_row"><div class="xbar bar2" style="width:45%;"><span class="per" id="protienb2">45%</span></div></div>
                        <div class="xbar_row"><div class="xbar bar3" style="width:71%;"><span class="per" id="protienb3">71%</span></div></div>
                        <div class="xbar_row"><div class="xbar bar4" style="width:87%;"><span class="per" id="protienb4">87%</span></div></div>
                    </div>
                </div>
                <span class="custom_base basePQ" id=""></span>
            </div>
        </div>
        <div class="col-lg-2 chart_div">
            <div class="card cardShadow pr7" style="height:235px">
                <h5 class="div-head" style="height:70px"><b>Protein Drinks/Protein Shakes/Protein Powder</b></h5>
                <div class="bottom_border_div"></div>
                <div id="" class="animate__animated animate__fadeInLeft">
                    <div class="xChart">
                        <div class="xbar_row"><div class="xbar bar1" style="width:23%;"><span class="per" id="protiend1">23%</span></div></div>
                        <div class="xbar_row"><div class="xbar bar2" style="width:45%;"><span class="per" id="protiend2">45%</span></div></div>
                        <div class="xbar_row"><div class="xbar bar3" style="width:71%;"><span class="per" id="protiend3">71%</span></div></div>
                        <div class="xbar_row"><div class="xbar bar4" style="width:87%;"><span class="per" id="protiend4">87%</span></div></div>
                    </div>
                </div>
                <span class="custom_base basePQ" id=""></span>
            </div>
        </div>
        <div class="col-lg-2 chart_div">
            <div class="card cardShadow pr7" style="height:235px">
                <h5 class="div-head" style="height:70px"><b>Sports Drinks</b></h5>
                <div class="bottom_border_div"></div>
                <div id="" class="animate__animated animate__fadeInLeft">
                    <div class="xChart">
                        <div class="xbar_row"><div class="xbar bar1" style="width:23%;"><span class="per" id="sports1">23%</span></div></div>
                        <div class="xbar_row"><div class="xbar bar2" style="width:45%;"><span class="per" id="sports2">45%</span></div></div>
                        <div class="xbar_row"><div class="xbar bar3" style="width:71%;"><span class="per" id="sports3">71%</span></div></div>
                        <div class="xbar_row"><div class="xbar bar4" style="width:87%;"><span class="per" id="sports4">87%</span></div></div>
                    </div>
                </div>
                <span class="custom_base basePQ" id=""></span>
            </div>
        </div>
        <div class="col-lg-2 chart_div">
            <div class="card cardShadow pr7" style="height:235px">
                <h5 class="div-head" style="height:70px"><b>Malt-based drinks/ Chocolate drinks/ Cereal-based drinks</b></h5>
                <div class="bottom_border_div"></div>
                <div id="" class="animate__animated animate__fadeInLeft">
                    <div class="xChart">
                        <div class="xbar_row"><div class="xbar bar1" style="width:23%;"><span class="per" id="malt1">23%</span></div></div>
                        <div class="xbar_row"><div class="xbar bar2" style="width:45%;"><span class="per" id="malt2">45%</span></div></div>
                        <div class="xbar_row"><div class="xbar bar3" style="width:71%;"><span class="per" id="malt3">71%</span></div></div>
                        <div class="xbar_row"><div class="xbar bar4" style="width:87%;"><span class="per" id="malt4">87%</span></div></div>
                    </div>
                </div>
                <span class="custom_base basePQ" id=""></span>
            </div>
        </div>
        <div class="col-lg-2 chart_div">
            <div class="card cardShadow pr7" style="height:235px">
                <h5 class="div-head" style="height:70px"><b>Adult Milk Drink/Senior Nutrition Powder</b></h5>
                <div class="bottom_border_div"></div>
                <div id="" class="animate__animated animate__fadeInLeft">
                    <div class="xChart">
                        <div class="xbar_row"><div class="xbar bar1" style="width:23%;"><span class="per" id="adult1">23%</span></div></div>
                        <div class="xbar_row"><div class="xbar bar2" style="width:45%;"><span class="per" id="adult2">45%</span></div></div>
                        <div class="xbar_row"><div class="xbar bar3" style="width:71%;"><span class="per" id="adult3">71%</span></div></div>
                        <div class="xbar_row"><div class="xbar bar4" style="width:87%;"><span class="per" id="adult4">87%</span></div></div>
                    </div>
                </div>
                <span class="custom_base basePQ" id=""></span>
            </div>
        </div>
    </div>
    <div class="row mt-2"> 
        <div class="col-lg-12 chart_div">
            <div class="card cardShadow pr3">
                <div class="Qtext">
                    <p> &nbsp; <span class="firstTxt">Calculations for Funnel Matrix</span></p>
                    <p> &nbsp; <span class="firstTxt">More than 12 months ago</span> =  Consumed within (last 7 days + last 3 mths + 4-12 mths ago + >12 mths ago)</p>
                    <p> &nbsp; <span class="firstTxt">4-12 months ago</span> = Consumed within (last 7 days + last 3 mths + 4-12 mths ago)</p>
                    <p> &nbsp; <span class="firstTxt">Within last 3 months</span> = Consumed within (last 7 days + last 3 mths)</p>
                    <p style="margin-bottom:0px"> &nbsp; <span class="firstTxt">Within last 7 days</span> = Consumed within last 7 days</p>
                </div>
            </div>
        </div>
    </div>
    <div class="row mt-2"> 
        <!-- <div class="col-lg-2 chart_div">
            <div class="card cardShadow pr7"></div>
        </div> -->
        <div class="col-lg-12 chart_div">
            <div class="card cardShadow pr3">
                <div class="Qtext"> &nbsp; S11. In the past 7 days, have you personally consumed < CATEGORY > at home, at a restaurant, during travel or anywhere else?
                    <br>                
                    &nbsp; S12. When was the last time you had < CATEGORY >? It could be at home, at a restaurant, during travel or anywhere else.
                </div>
            </div>
        </div>
    </div>
    <!-- <div class="row mt-2 rox2">
        <div class="col-lg-2 chart_div">
            <div class="card cardShadow pr7">
                <h5 class="div-head" style="height:70px"><b><span class="qno">(S13)</span> Consumption Frequency</b></h5>
                <div class="bottom_border_div"></div>
                <div id="" class="animate__animated animate__fadeInLeft">
                    <div class="labelss">
                        <div class="xchartRow r1"><b>Everyday</b></div>
                        <div class="xchartRow r2"><b>2-3 times a week</b></div>
                        <div class="xchartRow r3"><b>Once a week </b></div>
                        <div class="xchartRow r4"><b>Once every 2 weeks </b></div>
                        <div class="xchartRow r5"><b>Once a month </b></div>
                        <div class="xchartRow r6"><b>Once every 2-3 months </b></div>
                        <div class="xchartRow r7"><b>Less often </b></div>
                    </div>
                </div>
                <span class="custom_base" id=""></span>
            </div>
        </div>
        <div class="col-lg-2 chart_div">
            <div class="card cardShadow pr7">
                <h5 class="div-head" style="height:70px"><b>Protein Bar/Energy Bar/Cereal Bar/Granola Bar</b></h5>
                <div class="bottom_border_div"></div>
                <div id="" class="animate__animated animate__fadeInLeft">
                    <div class="xChart">
                        <div class="xbar_row"><div class="xbar bar1" style="width:23%;"><span class="per" id="protienBN1">23%</span></div></div>
                        <div class="xbar_row"><div class="xbar bar2" style="width:45%;"><span class="per" id="protienBN2">45%</span></div></div>
                        <div class="xbar_row"><div class="xbar bar3" style="width:71%;"><span class="per" id="protienBN3">71%</span></div></div>
                        <div class="xbar_row"><div class="xbar bar4" style="width:87%;"><span class="per" id="protienBN4">87%</span></div></div>
                        <div class="xbar_row"><div class="xbar bar5" style="width:87%;"><span class="per" id="protienBN5">87%</span></div></div>
                        <div class="xbar_row"><div class="xbar bar6" style="width:87%;"><span class="per" id="protienBN6">87%</span></div></div>
                        <div class="xbar_row"><div class="xbar bar7" style="width:87%;"><span class="per" id="protienBN7">87%</span></div></div>
                    </div>
                </div>
                <span class="custom_base" id="protienbPQBase"></span>
            </div>
        </div>
        <div class="col-lg-2 chart_div">
            <div class="card cardShadow pr7">
                <h5 class="div-head" style="height:70px"><b>Protein Drinks/Protein Shakes/Protein Powder</b></h5>
                <div class="bottom_border_div"></div>
                <div id="" class="animate__animated animate__fadeInLeft chartC"  >
                    <div class="xChart">
                        <div class="xbar_row"><div class="xbar bar1" style="width:23%;"><span class="per" id="protienDN1">23%</span></div></div>
                        <div class="xbar_row"><div class="xbar bar2" style="width:45%;"><span class="per" id="protienDN2">45%</span></div></div>
                        <div class="xbar_row"><div class="xbar bar3" style="width:71%;"><span class="per" id="protienDN3">71%</span></div></div>
                        <div class="xbar_row"><div class="xbar bar4" style="width:87%;"><span class="per" id="protienDN4">87%</span></div></div>
                        <div class="xbar_row"><div class="xbar bar5" style="width:87%;"><span class="per" id="protienDN5">87%</span></div></div>
                        <div class="xbar_row"><div class="xbar bar6" style="width:87%;"><span class="per" id="protienDN6">87%</span></div></div>
                        <div class="xbar_row"><div class="xbar bar7" style="width:87%;"><span class="per" id="protienDN7">87%</span></div></div>
                    </div>
                </div>
                <span class="custom_base" id="protienbPDBase"></span>
            </div>
        </div>
        <div class="col-lg-2 chart_div">
            <div class="card cardShadow pr7">
                <h5 class="div-head" style="height:70px"><b>Sports Drinks</b></h5>
                <div class="bottom_border_div"></div>
                <div id="" class="animate__animated animate__fadeInLeft">
                    <div class="xChart">
                        <div class="xbar_row"><div class="xbar bar1" style="width:23%;"><span class="per" id="sportsN1">23%</span></div></div>
                        <div class="xbar_row"><div class="xbar bar2" style="width:45%;"><span class="per" id="sportsN2">45%</span></div></div>
                        <div class="xbar_row"><div class="xbar bar3" style="width:71%;"><span class="per" id="sportsN3">71%</span></div></div>
                        <div class="xbar_row"><div class="xbar bar4" style="width:87%;"><span class="per" id="sportsN4">87%</span></div></div>
                        <div class="xbar_row"><div class="xbar bar5" style="width:87%;"><span class="per" id="sportsN5">87%</span></div></div>
                        <div class="xbar_row"><div class="xbar bar6" style="width:87%;"><span class="per" id="sportsN6">87%</span></div></div>
                        <div class="xbar_row"><div class="xbar bar7" style="width:87%;"><span class="per" id="sportsN7">87%</span></div></div>
                    </div>
                </div>
                <span class="custom_base" id="sportsPQBase"></span>
            </div>
        </div>
        <div class="col-lg-2 chart_div">
            <div class="card cardShadow pr7">
                <h5 class="div-head" style="height:70px"><b>Malt-based drinks/Chocolate drinks/Cereal-based drinks</b></h5>
                <div class="bottom_border_div"></div>
                <div id="" class="animate__animated animate__fadeInLeft">
                    <div class="xChart">
                        <div class="xbar_row"><div class="xbar bar1" style="width:23%;"><span class="per" id="maltN1">23%</span></div></div>
                        <div class="xbar_row"><div class="xbar bar2" style="width:45%;"><span class="per" id="maltN2">45%</span></div></div>
                        <div class="xbar_row"><div class="xbar bar3" style="width:71%;"><span class="per" id="maltN3">71%</span></div></div>
                        <div class="xbar_row"><div class="xbar bar4" style="width:87%;"><span class="per" id="maltN4">87%</span></div></div>
                        <div class="xbar_row"><div class="xbar bar5" style="width:87%;"><span class="per" id="maltN5">87%</span></div></div>
                        <div class="xbar_row"><div class="xbar bar6" style="width:87%;"><span class="per" id="maltN6">87%</span></div></div>
                        <div class="xbar_row"><div class="xbar bar7" style="width:87%;"><span class="per" id="maltN7">87%</span></div></div>
                    </div>
                </div>
                <span class="custom_base" id="maltPQBase"></span>
            </div>
        </div>
        <div class="col-lg-2 chart_div">
            <div class="card cardShadow pr7">
                <h5 class="div-head" style="height:70px"><b>Adult Milk Drink/Senior Nutrition Powder</b></h5>
                <div class="bottom_border_div"></div>
                <div id="" class="animate__animated animate__fadeInLeft">
                    <div class="xChart">
                        <div class="xbar_row"><div class="xbar bar1" style="width:23%;"><span class="per" id="adultN1">23%</span></div></div>
                        <div class="xbar_row"><div class="xbar bar2" style="width:45%;"><span class="per" id="adultN2">45%</span></div></div>
                        <div class="xbar_row"><div class="xbar bar3" style="width:71%;"><span class="per" id="adultN3">71%</span></div></div>
                        <div class="xbar_row"><div class="xbar bar4" style="width:87%;"><span class="per" id="adultN4">87%</span></div></div>
                        <div class="xbar_row"><div class="xbar bar5" style="width:87%;"><span class="per" id="adultN5">87%</span></div></div>
                        <div class="xbar_row"><div class="xbar bar6" style="width:87%;"><span class="per" id="adultN6">87%</span></div></div>
                        <div class="xbar_row"><div class="xbar bar7" style="width:87%;"><span class="per" id="adultN7">87%</span></div></div>
                    </div>
                </div>
                <span class="custom_base" id="adultPQBase"></span>
            </div>
        </div>
    </div>
    <div class="row mt-2"> 
        <div class="col-lg-2 chart_div">
            <div class="card cardShadow pr7"></div>
        </div>
        <div class="col-lg-10 chart_div">
            <div class="card cardShadow pr7">
                <div class="Qtext"> &nbsp; S13. You said you have had < CATEGORY> ? recently. How often do you usually have? </div>
            </div>
        </div>
    </div> -->
</div>

