<div class="overall_div_chart">
    <div class="row mt-2" style="display:none">
        <div class="col-lg-6 chart_div" style="display:none">
            <div class="card cardShadow pr3" style="height:170px">
                <h5 class="div-head div-head">
                    <button type="button" class="btn btn-brandXXX2 additionalFilterBtn" style="background-color:white">
                        <span class="circle">
                            <i class="fa fa-filter"></i>
                        </span>
                        <span>FILTER</span>
                    </button>
                    <b><span class="qno">(C0)</span> Food Service vs. Retail</b>
                </h5>
                <div class="bottom_border_div"></div>
                <!-- <div id="y3_c0" class="animate__animated animate__fadeInLeft chartC" style="height:300px"></div> -->
                <div class="row mt-1">
                    <div class="col-lg-6 text-center animate__animated animate__fadeInLeft" data-name = "protienF_chart1" onclick="clickableSlice(this,'protienF_chart1','protienF','While dining out/Take-away/Home delivery','img','fresh')">
                        <div class="filter_wrap_div">
                            <img class="yesno_img" src="assets/images/food_service.png" style="height:45px;width:45px;margin-top:-2px" alt="" srcset="">
                            <h6 class="img_txt" style="margin-top:5px">Food Service</h6>
                            <h3 style="color:#73B74A" id="y3_c0_1">23%</h3>
                        </div>
                    </div>
                    <div class="col-lg-6 text-center animate__animated animate__fadeInLeft" data-name = "protienF_chart2" onclick="clickableSlice(this,'protienF_chart2','protienF','Bought from a supermarket/Other retail shop/Online','img','fresh')">
                        <div class="filter_wrap_div">
                            <img class="yesno_img" src="assets/images/retail.png" alt="" srcset="">
                            <h6 class="img_txt" style="margin-top:10px">Retail</h6>
                            <h3 style="color:#FF9933;margin-left:10px;margin-top:-2px" id="y3_c0_2">30%</h3>
                        </div>
                    </div>
                </div>
                <span class="custom_base" id="y3_c0_base"></span>
            </div>
        </div>
        <div class="col-lg-6 chart_div">
            <div class="card cardShadow pr7" style="height:170px">
                <h5 class="div-head">
                    <button type="button" class="btn btn-brandXXX2 additionalFilterBtn" style="background-color:white">
                        <span class="circle">
                            <i class="fa fa-filter"></i>
                        </span>
                        <span>FILTER</span>
                    </button>
                    <b><span class="qno">(S13)</span> Category HML</b>
                </h5>
                <div class="bottom_border_div"></div>
                <div class="row mt-1">
                    <div class="col-lg-4 text-center animate__animated animate__fadeInLeft">
                        <div class="filter_wrap_div">
                            <img class="yesno_img" src="assets/images/increase.png" alt="" srcset="">
                            <h6 class="img_txt" style="margin-top:9px">High</h6>
                            <h3 style="color:#73B74A" id="">23%</h3>
                        </div>
                    </div>
                    <div class="col-lg-4 text-center animate__animated animate__fadeInLeft">
                            <div class="filter_wrap_div">
                            <img class="yesno_img" src="assets/images/neutral.png" alt="" srcset="" style="height:30px;width:30px;margin-top:2px">
                            <h6 class="img_txt" style="margin-top:18px">Medium</h6>
                            <h3 style="color:#FF9933;margin-top:-2px" id="">23%</h3>
                        </div>
                    </div>
                    <div class="col-lg-4 text-center animate__animated animate__fadeInLeft">
                        <div class="filter_wrap_div">
                            <img class="yesno_img" src="assets/images/decrease.png" alt="" srcset="">
                            <h6 class="img_txt" style="margin-top:9px">Low</h6>
                            <h3 style="color:#E6542D;margin-top:-5px" id="">23%</h3>
                        </div>
                    </div>
                </div>
                <span class="custom_base" id="">(Base:1200)</span>
            </div>
        </div>
    </div>
    <div class="row mt-2">
        <div class="col-lg-4 chart_div">
            <div class="card cardShadow pr3">
                <h5 class="div-head"><b><span class="qno">(C5)</span> Yogurt Consumed with</b></h5>
                <div class="bottom_border_div"></div>
                <div id="y3_c5" class="animate__animated animate__fadeInLeft chartC" style="height:300px"></div>
                <span class="custom_base" id="y3_c5_base"></span>
            </div>
        </div>
    </div>
    <div class="row mt-2">
        <div class="col-lg-4 chart_div">
            <div class="card cardShadow pr3">
                <h5 class="div-head"><b><span class="qno">(C4a)</span> Vegan or Animal based</b></h5>
                <div class="bottom_border_div"></div>
                <div id="y3_c4a" class="animate__animated animate__fadeInLeft chartC" style="height:300px"></div>
                <span class="custom_base" id="y3_c4a_base"></span>
            </div>
        </div>
        <div class="col-lg-4 chart_div">
            <div class="card cardShadow pr7">
                <h5 class="div-head"><b><span class="qno">(C4d)</span> Greek vs. Non-Greek Yogurt</b></h5>
                <div class="bottom_border_div"></div>
                <div id="y3_c4d" class="animate__animated animate__fadeInLeft chartC" style="height:300px"></div>
                <span class="custom_base" id="y3_c4d_base"></span>
            </div>
        </div>
        <div class="col-lg-4 chart_div">
            <div class="card cardShadow pr7">
                <h5 class="div-head"><b><span class="qno">(C4e)</span> Add-ins in Yogurt</b></h5>
                <div class="bottom_border_div"></div>
                <div id="y3_c4e" class="animate__animated animate__fadeInLeft chartC" style="height:300px"></div>
                <span class="custom_base" id="y3_c4e_base"></span>
            </div>
        </div>
    </div>
    <div class="row mt-2">
        <div class="col-lg-6 chart_div">
            <div class="card cardShadow pr3">
                <h5 class="div-head"><b><span class="qno">(C2)</span> Type of Yogurt/Cultured Milk/Fermented Drinks you had</b></h5>
                <div class="bottom_border_div"></div>
                <div id="y3_c2" class="animate__animated animate__fadeInLeft chartC" style="height:300px"></div>
                <span class="custom_base" id="y3_c2_base"></span>
            </div>
        </div>
        <div class="col-lg-6 chart_div">
            <div class="card cardShadow pr7">
                <h5 class="div-head"><b><span class="qno">(C3)</span> Flavor of Yogurt/Cultured Milk/Fermented Drinks Consumed</b></h5>
                <div class="bottom_border_div"></div>
                <div id="y3_c3" class="animate__animated animate__fadeInLeft chartC" style="height:300px"></div>
                <span class="custom_base" id="y3_c3_base"></span>
            </div>
        </div>
    </div>

    <div class="row mt-2">
        <div class="col-lg-6 chart_div">
            <div class="card cardShadow pr3">
                <h5 class="div-head"><b><span class="qno">(C6)</span> Type of Packaging</b></h5>
                <div class="bottom_border_div"></div>
                <div id="y3_c6" class="animate__animated animate__fadeInLeft chartC" style="height:300px"></div>
                <span class="custom_base" id="y3_c6_base"></span>
            </div>
        </div>
        <div class="col-lg-6 chart_div">
            <div class="card cardShadow pr7">
                <h5 class="div-head"><b><span class="qno">(C7)</span> Packaging format Consumed</b></h5>
                <div class="bottom_border_div"></div>
                <div id="y3_c7" class="animate__animated animate__fadeInLeft chartC" style="height:300px"></div>
                <span class="custom_base" id="y3_c7_base"></span>
            </div>
        </div>
    </div>

    <div class="row mt-2">
        <div class="col-lg-6 chart_div">
            <div class="card cardShadow pr3">
                <h5 class="div-head"><b><span class="qno">(C8)</span> Time of consumption</b></h5>
                <div class="bottom_border_div"></div>
                <div id="y3_c8" class="animate__animated animate__fadeInLeft chartC" style="height:300px"></div>
                <span class="custom_base" id="y3_c8_base"></span>
            </div>
        </div>
        <div class="col-lg-6 chart_div">
            <div class="card cardShadow pr7">
                <h5 class="div-head"><b><span class="qno">(C9)</span> Place of consumption</b></h5>
                <div class="bottom_border_div"></div>
                <div id="y3_c9" class="animate__animated animate__fadeInLeft chartC" style="height:300px"></div>
                <span class="custom_base" id="y3_c9_base"></span>
            </div>
        </div>
    </div>

    <div class="row mt-2">
        <div class="col-lg-6 chart_div">
            <div class="card cardShadow pr3">
                <h5 class="div-head"><b><span class="qno">(C10)</span> Way of consumption</b></h5>
                <div class="bottom_border_div"></div>
                <div id="y3_c10" class="animate__animated animate__fadeInLeft chartC" style="height:300px"></div>
                <span class="custom_base" id="y3_c10_base"></span>
            </div>
        </div>
        <div class="col-lg-6 chart_div">
            <div class="card cardShadow pr7">
                <h5 class="div-head"><b><span class="qno">(C11)</span> Consumed Alone vs. others</b></h5>
                <div class="bottom_border_div"></div>
                <div id="y3_c11" class="animate__animated animate__fadeInLeft chartC" style="height:300px"></div>
                <span class="custom_base" id="y3_c11_base"></span>
            </div>
        </div>
    </div>

    <div class="row mt-2">
        <div class="col-lg-12 chart_div">
            <div class="card cardShadow pr3">
                <h5 class="div-head"><b><span class="qno">(C16)</span> HH members who consume atleast once a month</b></h5>
                <div class="bottom_border_div"></div>
                <div id="y3_c16" class="animate__animated animate__fadeInLeft chartC chartC2" style="height:300px"></div>
                <span class="custom_base" id="y3_c16_base"></span>
            </div>
        </div>
    </div>

    <div class="row mt-2">
        <div class="col-lg-12 chart_div">
            <div class="card cardShadow pr3">
                <h5 class="div-head"><b><span class="qno">(C12)</span> Reason of consumption</b></h5>
                <div class="bottom_border_div"></div>
                <div id="y3_c12" class="animate__animated animate__fadeInLeft chartC chartC2" style="height:300px"></div>
                <span class="custom_base" id="y3_c12_base"></span>
            </div>
        </div>
    </div>

    <div class="row mt-2">
        <div class="col-lg-6 chart_div">
            <div class="card cardShadow pr3" id="y3_15overall">
                <h5 class="div-head"><b><span class="qno">(C15)</span> Change in Personal consumption in Last 1 year</b></h5>
                <div class="bottom_border_div"></div>
                <div class="row mt-1">
                    <div class="col-lg-4 text-center">
                        <img class="yesno_img" src="assets/images/increase.png" alt="" srcset="">
                        <h6 class="img_txt">Increase</h6>
                    </div>
                    <div class="col-lg-4 text-center">
                        <img class="yesno_img" src="assets/images/neutral.png" alt="" srcset="" style="height:30px;width:30px;margin-top:2px">
                        <h6 class="img_txt" style="margin-top:10px">Neutral</h6>
                    </div>
                    <div class="col-lg-4 text-center">
                        <img class="yesno_img" src="assets/images/decrease.png" alt="" srcset="">
                        <h6 class="img_txt">Decrease</h6>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-4 text-center">
                        <h3 style="color:#73B74A" id="y3_c15_1">23%</h3>
                    </div>
                    <div class="col-lg-4 text-center">
                        <h3 style="color:#FF9933;margin-left:10px" id="y3_c15_2">30%</h3>
                    </div>
                    <div class="col-lg-4 text-center">
                        <h3 style="color:#E6542D" id="y3_c15_3">47%</h3>
                    </div>
                </div>
                <span class="custom_base" id="y3_c15_base"></span>
            </div>
        <div class="card cardShadow pr3" id="y3_15trend" style="display:none">
                <h5 class="div-head"><b><span class="qno">(C15)</span> Change in Personal consumption in Last 1 year</b></h5>
                <div class="bottom_border_div"></div>
                <div id="y3_c15" class="animate__animated animate__fadeInLeft chartC chartC2" style="height:300px"></div>
                <span class="custom_base" id="y3_c15_base"></span>
            </div>
        </div>
        <div class="col-lg-6 chart_div">
            <div class="card cardShadow pr7" id="y3_20overall">
                <h5 class="div-head"><b><span class="qno">(C20)</span> Change in Household consumption in Last 1 year</b></h5>
                <div class="bottom_border_div"></div>
                <div class="row mt-1">
                    <div class="col-lg-4 text-center">
                        <img class="yesno_img" src="assets/images/increase.png" alt="" srcset="">
                        <h6 class="img_txt">Increase</h6>
                    </div>
                    <div class="col-lg-4 text-center">
                        <img class="yesno_img" src="assets/images/neutral.png" alt="" srcset="" style="height:30px;width:30px;margin-top:2px">
                        <h6 class="img_txt" style="margin-top:10px">Neutral</h6>
                    </div>
                    <div class="col-lg-4 text-center">
                        <img class="yesno_img" src="assets/images/decrease.png" alt="" srcset="">
                        <h6 class="img_txt">Decrease</h6>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-4 text-center">
                        <h3 style="color:#73B74A" id="y3_c20_1">23%</h3>
                    </div>
                    <div class="col-lg-4 text-center">
                        <h3 style="color:#FF9933;margin-left:10px" id="y3_c20_2">30%</h3>
                    </div>
                    <div class="col-lg-4 text-center">
                        <h3 style="color:#E6542D" id="y3_c20_3">47%</h3>
                    </div>
                </div>
                <span class="custom_base" id="y3_c20_base"></span>
            </div>
          <div class="card cardShadow pr3" id="y3_20trend" style="display:none">
                <h5 class="div-head"><b><span class="qno">(C20)</span> Change in Household consumption in Last 1 year</b></h5>
                <div class="bottom_border_div"></div>
                <div id="y3_c20" class="animate__animated animate__fadeInLeft chartC chartC2" style="height:300px"></div>
                <span class="custom_base" id="y3_c20_base"></span>
            </div>
        </div>
    </div>

    <div class="row mt-2">
        <div class="col-lg-6 chart_div">
            <div class="card cardShadow pr3" id="y3_17overall">
                <h5 class="div-head"><b><span class="qno">(C17)</span> Role in Purchasing</b></h5>
                <div class="bottom_border_div"></div>
                <!-- <div id="y3_c17" class="animate__animated animate__fadeInLeft" style="height:300px"></div> -->
                <div class="row" style="position:relative;top:20px">
                    <?php
                        foreach($PDC17label as $key => $value)
                        {
                            echo '<div class="col-lg-4 text-center" class="animate__animated animate__fadeInLeft "><h6 style="font-size:0.7rem;color:#666666">'.$value.'</h6></div>';
                        }
                    ?>
                </div>
                <div class="row">
                    <div class="col-lg-4" id="y3_c17_1" class="animate__animated animate__fadeInLeft chartC" style="height:180px"></div>
                    <div class="col-lg-4" id="y3_c17_2" class="animate__animated animate__fadeInLeft chartC" style="height:180px"></div>
                    <div class="col-lg-4" id="y3_c17_3" class="animate__animated animate__fadeInLeft chartC" style="height:180px"></div>
                </div>
                <span class="custom_base" id="y3_c17_base"></span>
            </div>
        <div class="card cardShadow pr3" id="y3_17trend" style="display:none">
                <h5 class="div-head"><b><span class="qno">(C17)</span> Role in Purchasing</b></h5>
                <div class="bottom_border_div"></div>
                <div id="y3_c17" class="animate__animated animate__fadeInLeft chartC chartC2" style="height:300px"></div>
                <span class="custom_base" id="y3_c17_base"></span>
            </div> 
        </div>
        <div class="col-lg-6 chart_div">
            <div class="card cardShadow pr7">
                <h5 class="div-head"><b><span class="qno">(C18)</span> Person who purchases for Household</b></h5>
                <div class="bottom_border_div"></div>
                <div id="y3_c18" class="animate__animated animate__fadeInLeft chartC" style="height:214px"></div>
                <span class="custom_base" id="y3_c18_base"></span>
            </div>
        </div>
    </div>
    <div class="row mt-2">
        <div class="col-lg-6 chart_div">
            <div class="card cardShadow pr3">
                <h5 class="div-head"><b><span class="qno">(C19)</span> Place of Purchase</b></h5>
                <div class="bottom_border_div"></div>
                <div id="y3_c19" class="animate__animated animate__fadeInLeft chartC" style="height:300px"></div>
                <span class="custom_base" id="y3_c19_base"></span>
            </div>
        </div>
        <div class="col-lg-6 chart_div">
            <div class="card cardShadow pr7">
                <h5 class="div-head"><b><span class="qno">(S13)</span> Consumption Frequency</b></h5>
                <div class="bottom_border_div"></div>
                <div id="y_3_s13" class="animate__animated animate__fadeInLeft chartC" style="height:300px"></div>
                <span class="custom_base" id="y_3_s13_base">ssdsdssd</span>
            </div>
        </div>
    </div>
    <?php include "yogurtglosstable.php"; ?>
</div>