<div class="overall_div_chart">
    <div class="row mt-2" style="display:none">
        <div class="col-lg-6 chart_div">
            <div class="card cardShadow pr3">
                <h5 class="div-head"><b><span class="qno">(F1)</span> Foodservice Consumption</b></h5>
                <div class="bottom_border_div"></div>
                <div id="ch_f1" class="animate__animated animate__fadeInLeft chartC" style="height:300px"></div>
                <span class="custom_base" id="ch_f1_base"></span>
            </div>
        </div>
        <div class="col-lg-6 chart_div">
            <div class="card cardShadow pr7">
                <h5 class="div-head"><b><span class="qno">(F1.1)</span> Place of consumption</b></h5>
                <div class="bottom_border_div"></div>
                <div id="ch_f1_1" class="animate__animated animate__fadeInLeft chartC" style="height:300px"></div>
                <span class="custom_base" id="ch_f1_1_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">(F2)</span> How was Cheese Consumed</b></h5>
                <div class="bottom_border_div"></div>
                <div id="ch_f2" class="animate__animated animate__fadeInLeft chartC2" style="height:300px"></div>
                <span class="custom_base" id="ch_f2_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">(F3)</span> Format of Cheese Consumed</b></h5>
                <div class="bottom_border_div"></div>
                <div id="ch_f3" class="animate__animated animate__fadeInLeft chartC" style="height:300px"></div>
                <span class="custom_base" id="ch_f3_base"></span>
            </div>
        </div>

        <div class="col-lg-6 chart_div">
            <div class="card cardShadow pr7">
                <h5 class="div-head"><b><span class="qno">(F4)</span> Knowledge of Variety of Cheese</b></h5>
                <div class="bottom_border_div"></div>
                <div id="ch_f4" class="animate__animated animate__fadeInLeft chartC" style="height:300px"></div>
                <span class="custom_base" id="ch_f4_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">(F5)</span> Variety of Cheese Consumed</b></h5>
                <div class="bottom_border_div"></div>
                <div id="ch_f5" class="animate__animated animate__fadeInLeft chartC" style="height:300px"></div>
                <span class="custom_base" id="ch_f5_base"></span>
            </div>
        </div>

        <div class="col-lg-6 chart_div">
            <div class="card cardShadow pr7">
                <h5 class="div-head"><b><span class="qno">(F6)</span> Natural vs. Processed Cheese</b></h5>
                <div class="bottom_border_div"></div>
                <div id="ch_f6" class="animate__animated animate__fadeInLeft chartC" style="height:300px"></div>
                <span class="custom_base" id="ch_f6_base"></span>
            </div>
        </div>
    </div>

    <div class="row mt-2" id="his">
        <div class="col-lg-6 chart_div">
            <div class="card cardShadow pr3" style="height:375px">
                <h5 class="div-head"><b><span class="qno">(F7)</span> Country of Origin of Cheese Consumed</b></h5>
                <div class="bottom_border_div"></div>
                <!-- <div id="ch_f7" class="animate__animated animate__fadeInLeft chartC" style="height:300px"></div> -->
                <div class="row mt-1 additionalpadding">
                    <div class="col-lg-4">
                        <div class="newD pr13 newborder">
                            <div class="img_txt">
                                <h6 class="newcountryt">Australia</h6>
                                <img class="newcountryf" src="assets/images/australia.png" alt="">
                            </div>
                            <div class="perecentage_txt">
                                <h6 class="newcountryp" id="ch_f7_1">41%</h6>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="newD pr14 newborder">
                            <div class="img_txt">
                                <h6 class="newcountryt">France</h6>
                                <img class="newcountryf" src="assets/images/france.png" alt="">
                            </div>
                            <div class="perecentage_txt">
                                <h6 class="newcountryp" id="ch_f7_2">41%</h6>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="newD pr15 newborder3">
                            <div class="img_txt">
                                <h6 class="newcountryt">Germany</h6>
                                <img class="newcountryf" src="assets/images/germany.png" alt="">
                            </div>
                            <div class="perecentage_txt">
                                <h6 class="newcountryp" id="ch_f7_3">41%</h6>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row additionalpadding">
                    <div class="col-lg-4">
                        <div class="newD pr13 newborder">
                            <div class="img_txt">
                                <h6 class="newcountryt">Greece</h6>
                                <img class="newcountryf" src="assets/images/greece.png" alt="">
                            </div>
                            <div class="perecentage_txt">
                                <h6 class="newcountryp" id="ch_f7_4">41%</h6>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="newD pr14 newborder">
                            <div class="img_txt">
                                <h6 class="newcountryt">Italy</h6>
                                <img class="newcountryf" src="assets/images/italy.png" alt="">
                            </div>
                            <div class="perecentage_txt">
                                <h6 class="newcountryp" id="ch_f7_5">41%</h6>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="newD pr15 newborder3">
                            <div class="img_txt">
                                <h6 class="newcountryt">Netherland</h6>
                                <img class="newcountryf" src="assets/images/netherland.png" alt="">
                            </div>
                            <div class="perecentage_txt">
                                <h6 class="newcountryp" id="ch_f7_6">41%</h6>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row additionalpadding">
                    <div class="col-lg-4">
                        <div class="newD pr13 newborder">
                            <div class="img_txt">
                                <h6 class="newcountryt">USA</h6>
                                <img class="newcountryf" src="assets/images/usa.png" alt="">
                            </div>
                            <div class="perecentage_txt">
                                <h6 class="newcountryp" id="ch_f7_7">41%</h6>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="newD pr14 newborder">
                            <div class="img_txt">
                                <h6 class="newcountryt">UK</h6>
                                <img class="newcountryf" src="assets/images/uk.png" alt="">
                            </div>
                            <div class="perecentage_txt">
                                <h6 class="newcountryp" id="ch_f7_8">41%</h6>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="newD pr15 newborder3">
                            <div class="img_txt">
                                <h6 class="newcountryt">New Zeland</h6>
                                <img class="newcountryf" src="assets/images/nz.png" alt="">
                            </div>
                            <div class="perecentage_txt">
                                <h6 class="newcountryp" id="ch_f7_9">41%</h6>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row additionalpadding">
                    <div class="col-lg-12">
                        <div class="newD newborder1" style="justify-content:center;gap:10px">
                            <div class="img_txt">
                                <h6 class="newcountryt">Don’t Know/ Can’t Say</h6>
                            </div>
                            <div class="perecentage_txt">
                                <h6 class="newcountryp" id="ch_f7_10">41%</h6>
                            </div>
                        </div>
                    </div>
                </div>
                <span class="custom_base" id="ch_f7_base"></span>
            </div>
        </div>

        <div class="col-lg-6 chart_div">
            <div class="card cardShadow pr7" style="height:375px">
                <h5 class="div-head"><b><span class="qno">(F8)</span> Source of Cheese Consumed</b></h5>
                <div class="bottom_border_div"></div>
                <div id="ch_f8" class="animate__animated animate__fadeInLeft chartC" style="height:300px"></div>
                <span class="custom_base" id="ch_f8_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">(F_C8)</span> Time of consumption</b></h5>
                <div class="bottom_border_div"></div>
                <div id="ch_f_c8" class="animate__animated animate__fadeInLeft chartC" style="height:300px"></div>
                <span class="custom_base" id="ch_f_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">(F_C11)</span> Consumed Alone vs. Others</b></h5>
                <div class="bottom_border_div"></div>
                <div id="ch_f_c11" class="animate__animated animate__fadeInLeft chartC" style="height:300px"></div>
                <span class="custom_base" id="ch_f_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">(F_C12)</span> Reason of consumption</b></h5>
                <div class="bottom_border_div"></div>
                <div id="ch_f_c12" class="animate__animated animate__fadeInLeft chartC2" style="height:300px"></div>
                <span class="custom_base" id="ch_f_c12_base"></span>
            </div>
        </div>
    </div>

    <div class="row mt-2">
        <div class="col-lg-6 chart_div">
            <div class="card cardShadow pr3" id="chf15overall">
                <h5 class="div-head"><b><span class="qno">(F_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="ch_f15_1">23%</h3>
                    </div>
                    <div class="col-lg-4 text-center">
                        <h3 style="color:#FF9933;margin-left:10px" id="ch_f15_2">30%</h3>
                    </div>
                    <div class="col-lg-4 text-center">
                        <h3 style="color:#E6542D" id="ch_f15_3">47%</h3>
                    </div>
                </div>
                <span class="custom_base" id="ch_f15_base"></span>
            </div>
            <div class="card cardShadow pr3" id="chf15trend" style="display:none">
                <h5 class="div-head"><b><span class="qno">(F_C15)</span> Change in Personal consumption in Last 1 year</b></h5>
                <div class="bottom_border_div"></div>
                <div id="chf1_c15" class="animate__animated animate__fadeInLeft chartC chartC2" style="height:300px"></div>
                <span class="custom_base" id="chf1_c15_base"></span>
            </div>
        </div>
        <div class="col-lg-6 chart_div">
            <div class="card cardShadow pr7" id="chf_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="ch_fr20_1"></h3>
                    </div>
                    <div class="col-lg-4 text-center">
                        <h3 style="color:#FF9933;margin-left:10px" id="ch_fr20_2"></h3>
                    </div>
                    <div class="col-lg-4 text-center">
                        <h3 style="color:#E6542D" id="ch_fr20_3"></h3>
                    </div>
                </div>
                <span class="custom_base" id="ch_fr20_base"></span>
            </div>
            <div class="card cardShadow pr3" id="chf20trend">
                <div class="col-lg-12 chart_div">
                    <div class="card cardShadow pr3">
                        <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="chf1_c20" class="animate__animated animate__fadeInLeft chartC chartC2" style="height:300px"></div>
                        <span class="custom_base" id="chf1_c20_base"></span>
                    </div>
                </div>
            </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="ch_fc16" class="animate__animated animate__fadeInLeft chartC2" style="height:300px"></div>
                <span class="custom_base" id="ch_fc16_base"></span>
            </div>
        </div>
    </div>

    <div class="row mt-2">
        <div class="col-lg-6 chart_div">
            <div class="card cardShadow pr3" id="ch17overall">
                <h5 class="div-head"><b><span class="qno">(C17)</span> Role in Purchasing</b></h5>
                <div class="bottom_border_div"></div>
                <div class="row" style="position:relative;top:20px">
                    <?php
                        foreach($CHC17labelX 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="ch_fc17_1" class="animate__animated animate__fadeInLeft chartC" style="height:180px"></div>
                    <div class="col-lg-4" id="ch_fc17_2" class="animate__animated animate__fadeInLeft chartC" style="height:180px"></div>
                    <div class="col-lg-4" id="ch_fc17_3" class="animate__animated animate__fadeInLeft chartC" style="height:180px"></div>
                </div>
                <span class="custom_base" id="ch_fc17_base"></span>
            </div>
            <div class="card cardShadow pr3" id="ch17trend" 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="ch1_c17" class="animate__animated animate__fadeInLeft chartC chartC2" style="height:300px"></div>
                <span class="custom_base" id="ch1_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="ch_fc18" class="animate__animated animate__fadeInLeft chartC" style="height:214px"></div>
                <span class="custom_base" id="ch_fc18_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="ch_fc19" class="animate__animated animate__fadeInLeft" style="height:300px"></div>
                <span class="custom_base" id="ch_fc19_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="ch_1_s13" class="animate__animated animate__fadeInLeft" style="height:300px"></div>
                <span class="custom_base" id="ch_1_s13_base"></span>
            </div>
        </div>
    </div>
    <?php include "cheesefoodservicetable.php"; ?>
</div>