<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">(R1)</span> Retail Consumption</b></h5>
                <div class="bottom_border_div"></div>
                <div id="ch_r1" class="animate__animated animate__fadeInLeft chartC" style="height:300px"></div>
                <span class="custom_base" id="ch_r1_base"></span>
            </div>
        </div>

        <div class="col-lg-6 chart_div">
            <div class="card cardShadow pr7">
                <h5 class="div-head"><b><span class="qno">(R4)</span> Knowledge of Variety of Cheese</b></h5>
                <div class="bottom_border_div"></div>
                <div id="ch_r4" class="animate__animated animate__fadeInLeft chartC" style="height:300px"></div>
                <span class="custom_base" id="ch_r4_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">(R2)</span> How was Cheese Consumed</b></h5>
                <div class="bottom_border_div"></div>
                <div id="ch_r2" class="animate__animated animate__fadeInLeft chartC2" style="height:300px"></div>
                <span class="custom_base" id="ch_r2_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">(R3)</span> Format of Cheese Consumed</b></h5>
                <div class="bottom_border_div"></div>
                <div id="ch_r3" class="animate__animated animate__fadeInLeft chartC" style="height:300px"></div>
                <span class="custom_base" id="ch_r3_base"></span>
            </div>
        </div>

        <div class="col-lg-6 chart_div">
            <div class="card cardShadow pr7">
                <h5 class="div-head"><b><span class="qno">(R5)</span> Variety of Cheese Consumed</b></h5>
                <div class="bottom_border_div"></div>
                <div id="ch_r5" class="animate__animated animate__fadeInLeft chartC" style="height:300px"></div>
                <span class="custom_base" id="ch_r5_base"></span>
            </div>
        </div>
    </div>

    <div class="row mt-2">

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

        <div class="col-lg-6 chart_div" id="his2">
            <div class="card cardShadow pr7" style="height:375px" id="chr7_overall">
                <h5 class="div-head"><b><span class="qno">(R7)</span> Country of origin of Cheese Consumed</b></h5>
                <div class="bottom_border_div"></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_r7_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_r7_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_r7_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_r7_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_r7_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_r7_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_r7_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_r7_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_r7_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_r7_10">41%</h6>
                            </div>
                        </div>
                    </div>
                </div>
                <span class="custom_base" id="ch_r7_base"></span>
            </div>
            <div class="card cardShadow pr3" id="chr7trend" style="display:none">
                <h5 class="div-head"><b><span class="qno">(R7)</span> Country of origin of Cheese Consumed</b></h5>
                <div class="bottom_border_div"></div>
                <div id="chr1_r7" class="animate__animated animate__fadeInLeft chartC chartC2" style="height:300px"></div>
                <span class="custom_base" id="chr1_r7_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">(R8)</span> Source of Cheese Consumed</b></h5>
                <div class="bottom_border_div"></div>
                <div id="ch_r8" class="animate__animated animate__fadeInLeft chartC" style="height:300px"></div>
                <span class="custom_base" id="ch_r8_base"></span>
            </div>
        </div>

        <div class="col-lg-6 chart_div">
            <div class="card cardShadow pr7">
                <h5 class="div-head"><b><span class="qno">(R_C8)</span> Time of consumption</b></h5>
                <div class="bottom_border_div"></div>
                <div id="ch_r_c8" class="animate__animated animate__fadeInLeft chartC" style="height:300px"></div>
                <span class="custom_base" id="ch_r_c8_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">(R_C11)</span> Consumed Alone vs. others</b></h5>
                <div class="bottom_border_div"></div>
                <div id="ch_r_c11" class="animate__animated animate__fadeInLeft chartC" style="height:300px"></div>
                <span class="custom_base" id="ch_r_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">(R_C12)</span> Reason of consumption</b></h5>
                <div class="bottom_border_div"></div>
                <div id="ch_r_c12" class="animate__animated animate__fadeInLeft chartC2" style="height:300px"></div>
                <span class="custom_base" id="ch_r_c12_base"></span>
            </div>
        </div>
    </div>

    <div class="row mt-2">
        <div class="col-lg-6 chart_div">
            <div class="card cardShadow pr3" id="chr15overall">
                <h5 class="div-head"><b><span class="qno">(R_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_r15_1">23%</h3>
                    </div>
                    <div class="col-lg-4 text-center">
                        <h3 style="color:#FF9933;margin-left:10px" id="ch_r15_2">30%</h3>
                    </div>
                    <div class="col-lg-4 text-center">
                        <h3 style="color:#E6542D" id="ch_r15_3">47%</h3>
                    </div>
                </div>
                <span class="custom_base" id="ch_r15_base"></span>
            </div>
            <div class="card cardShadow pr3" id="chr15trend" 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="chr1_c15" class="animate__animated animate__fadeInLeft chartC chartC2" style="height:300px"></div>
                <span class="custom_base" id="chr1_c15_base"></span>
            </div>
        </div>

        <div class="col-lg-6 chart_div">
            <div class="card cardShadow pr7" id="chr_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_rsr20_1"></h3>
                    </div>
                    <div class="col-lg-4 text-center">
                        <h3 style="color:#FF9933;margin-left:10px" id="ch_rsr20_2"></h3>
                    </div>
                    <div class="col-lg-4 text-center">
                        <h3 style="color:#E6542D" id="ch_rsr20_3"></h3>
                    </div>
                </div>
                <span class="custom_base" id="ch_rsr20_base"></span>
            </div>
            <div class="card cardShadow pr3" id="chr20trend">
                <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="chr1_c20" class="animate__animated animate__fadeInLeft chartC chartC2" style="height:300px"></div>
                        <span class="custom_base" id="chr1_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_rsc16" class="animate__animated animate__fadeInLeft chartC2" style="height:300px"></div>
                <span class="custom_base" id="ch_rsc16_base"></span>
            </div>
        </div>
    </div>

    <div class="row mt-2">
        <div class="col-lg-6 chart_div">
            <div class="card cardShadow pr3" id="chr17overall">
                <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_rsc17_1" class="animate__animated animate__fadeInLeft chartC" style="height:180px"></div>
                    <div class="col-lg-4" id="ch_rsc17_2" class="animate__animated animate__fadeInLeft chartC" style="height:180px"></div>
                    <div class="col-lg-4" id="ch_rsc17_3" class="animate__animated animate__fadeInLeft chartC" style="height:180px"></div>
                </div>
                <span class="custom_base" id="ch_rsc17_base"></span>
            </div>
            <div class="card cardShadow pr3" id="chr17trend" 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="chr1_c17" class="animate__animated animate__fadeInLeft chartC chartC2" style="height:300px"></div>
                <span class="custom_base" id="chr1_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_rsc18" class="animate__animated animate__fadeInLeft chartC" style="height:214px"></div>
                <span class="custom_base" id="ch_rsc18_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_rsc19" class="animate__animated animate__fadeInLeft chartC" style="height:300px"></div>
                <span class="custom_base" id="ch_rsc19_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 (Cheese)</b></h5>
                <div class="bottom_border_div"></div>
                <div id="ch_2_s13" class="animate__animated animate__fadeInLeft chartC" style="height:300px"></div>
                <span class="custom_base" id="ch_2_s13_base"></span>
            </div>
        </div>
    </div>
    <?php include "cheeseretailtable.php"; ?>
</div>