<div class="row mt-2">
    <div class="col-lg-12">
        <div class="card cardXX d-flex position-relative flex-column cardBg pr3">
            <div class="row mt-2 mb-0 ml-2 mr-2">
                <!-- Overall Section -->
                <div class="col-lg-4 pr2">
                    <h5 class="div-head" >
                        <b style="font-weight:500">Duty free profiling</b>
                    </h5>
                    <div class="left-section">
                        <div class="card cardXX d-flex position-relative flex-column cardBg mt-2">
                            <h5 class="div-head" >
                                <b style="font-weight:500">Gender</b>
                            </h5>
                            <div class="gender_img_container d-flex mt-2">
                                <div class="gender_item" data-name = "gender_male_profiling_chart" onclick="clickableSlice(this, 'gender_male_profiling_chart','gender','Male','img','fresh');">
                                    <img src="assets/images/male.png" class="gender_img" alt="">
                                    <div class="gender_value male_value" id="male_value_dfs">40%</div>
                                </div>
                                <div class="gender_item" data-name = "gender_female_profiling_chart" onclick="clickableSlice(this, 'gender_female_profiling_chart','gender','Female','img','fresh');">
                                    <img src="assets/images/female.png" class="gender_img" alt="">
                                    <div class="gender_value female_value" id="female_value_dfs">40%</div>
                                </div>
                            </div>
                        </div>
                        <div class="card cardXX d-flex position-relative flex-column cardBg mt-2">
                            <h5 class="div-head" >
                                <b style="font-weight:500">Age</b>
                            </h5>
                            <div id="age_op_dfs" class="animate__animated animate__fadeInLeft tab2_chart" style="height:300px" data-name="age_profiling_chart"></div>
                        </div>
                        <div class="card cardXX d-flex position-relative flex-column cardBg mt-2">
                            <h5 class="div-head" ><b style="font-weight:500">Income</b></h5>
                            <div id="income_op_dfs" class="animate__animated animate__fadeInLeft tab2_chart" style="height:270px" data-name="income_profiling_chart"></div>
                        </div>
                        
                    </div>
                </div>
                <!-- LOB Section -->
                <div class="col-lg-8 pr5">
                    <h5 class="div-head" >
                        <b style="font-weight:500">Duty Free LOB</b>
                    </h5>
                    <div class="right-section">
                        <div class="chart_div">
                            <div class="card cardXX d-flex position-relative flex-column cardBg mt-2">
                                <h5 class="div-head">
                                    <b style="font-weight:500">What all had you planned to shop from the duty-free offerings at the airport?</b>
                                </h5>
                                <div id="q101" class="animate__animated animate__fadeInLeft tab2_chart mb-2 ash_pik"></div>
                            </div>
                            <div class="card cardXX d-flex position-relative flex-column cardBg mt-2">
                                <h5 class="div-head" ><b style="font-weight:500">Please tell me which of the following did you purchase from the duty free offerings at airport</b></h5>
                                <div id="q102" class="animate__animated animate__fadeInLeft tab2_chart mb-2 ash_pik"></div>
                            </div>             
                            <div class="card cardXX d-flex position-relative flex-column cardBg mt-2">
                                <h5 class="div-head" ><b style="font-weight:500">I would like to know the reasons for buying from the duty free offerings at airport</b></h5>
                                <div id="q103" class="animate__animated animate__fadeInLeft tab2_chart mb-2 ash_pik" style="height:700px"></div>
                            </div>
                            <div class="card cardXX d-flex position-relative flex-column cardBg mt-2">
                                <h5 class="div-head" ><b style="font-weight:500">Purchase from duty free offerings at other foreign airports in last few international trips?</b></h5>
                                <div id="q106" class="animate__animated animate__fadeInLeft tab2_chart mb-2" style="height:450px"></div>
                            </div>
                            <div class="card cardXX d-flex position-relative flex-column cardBg mt-2">
                                <h5 class="div-head" ><b style="font-weight:500">What additional services would you like to see being offered at duty-free offerings airport?</b></h5>
                                <table class="tblZ mb-2" id="q109_tbl" cellpadding="0" cellspacing="0">
                                    <tbody>
                                        
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<!-- <div class="row mt-2">
    <div class="col-lg-12 chart_div">
        <div class="card cardXX d-flex position-relative flex-column cardBg pr3">
            <h5 class="div-head" ><b style="font-weight:500">What all had you planned to shop from the duty free offerings at airport?</b></h5>
            <div id="q101" class="animate__animated animate__fadeInLeft tab2_chart mb-2 ash_pik"></div>
        </div>
    </div>
    <div class="col-lg-12 tbl_div">
        <div class="card cardXX d-flex position-relative flex-column cardBg pr3">
            <h5 class="div-head" ><b style="font-weight:500">What all had you planned to shop from the duty free offerings at airport?</b></h5>
            <table class="table table-striped table-bordered no-footer text-center display animate__animated animate__fadeInLeft" id="q101_tbl" cellpadding="0" cellspacing="0">
                <thead>
                    
                </thead>
                <tbody>
                    
                </tbody>
            </table>
        </div>
    </div>
</div> -->

<!-- <div class="row mt-2">
    <div class="col-lg-9 chart_div">
        <div class="card cardXX d-flex position-relative flex-column cardBg pr3">
            <h5 class="div-head" ><b style="font-weight:500">Please tell me which of the following did you purchase from the duty free offerings at airport</b></h5>
            <table class="tblZ mb-2" id="q102_tbl" cellpadding="0" cellspacing="0">
                <tbody>
                    
                </tbody>
            </table>
        </div>
    </div>
    <div class="col-lg-12 tbl_div">
        <div class="card cardXX d-flex position-relative flex-column cardBg pr3">
            <h5 class="div-head" ><b style="font-weight:500">Please tell me which of the following did you purchase from the duty free offerings at airport</b></h5>
            <table class="table table-striped table-bordered no-footer text-center display animate__animated animate__fadeInLeft" id="q102_tbl2" cellpadding="0" cellspacing="0">
                <thead>
                    
                </thead>
                <tbody>
                    
                </tbody>
            </table>
        </div>
    </div>
</div> -->

<!-- <div class="row mt-2" style="display:none">
    <div class="col-lg-12 chart_div">
        <div class="card cardXX d-flex position-relative flex-column cardBg pr3 ashC" data-chart-id="1">
            <h5 class="div-head" ><b style="font-weight:500">I would like to know the reasons for buying from the duty free offerings at airport</b></h5>
            <div id="q103" class="animate__animated animate__fadeInLeft tab2_chart mb-2 ash_pik" style="height:450px"></div>
        </div>
    </div>
    <div class="col-lg-12 tbl_div">
        <div class="card cardXX d-flex position-relative flex-column cardBg pr3">
            <h5 class="div-head" ><b style="font-weight:500">I would like to know the reasons for buying from the duty free offerings at airport</b></h5>
            <table class="table table-striped table-bordered no-footer text-center display animate__animated animate__fadeInLeft" id="q103_tbl" cellpadding="0" cellspacing="0">
                <thead>
                    
                </thead>
                <tbody>
                    
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="row mt-2" style="display:none">
    <div class="col-lg-12 chart_div">
        <div class="card cardXX d-flex position-relative flex-column cardBg pr3">
            <h5 class="div-head" ><b style="font-weight:500">What did you purchase from duty free offerings at other foreign airports in last few international trips?</b></h5>
            <div id="q106" class="animate__animated animate__fadeInLeft tab2_chart mb-2" style="height:450px"></div>
        </div>
    </div>
    <div class="col-lg-12 tbl_div">
        <div class="card cardXX d-flex position-relative flex-column cardBg pr3">
            <h5 class="div-head" ><b style="font-weight:500">What did you purchase from duty free offerings at other foreign airports in last few international trips?</b></h5>
            <table class="table table-striped table-bordered no-footer text-center display animate__animated animate__fadeInLeft" id="q106_tbl" cellpadding="0" cellspacing="0">
                <thead>
                    
                </thead>
                <tbody>
                    
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="row mt-2">
    <div class="col-lg-8 chart_div">
        <div class="card cardXX d-flex position-relative flex-column cardBg pr3">
            <h5 class="div-head" ><b style="font-weight:500">What additional services would you like to see being offered at duty-free offerings airport?</b></h5>
            <table class="tblZ mb-2" id="q109_tbl" cellpadding="0" cellspacing="0">
                <tbody>
                    
                </tbody>
            </table>
        </div>
    </div>
    <div class="col-lg-12 tbl_div">
        <div class="card cardXX d-flex position-relative flex-column cardBg pr3">
            <h5 class="div-head" ><b style="font-weight:500">What additional services would you like to see being offered at duty-free offerings airport?</b></h5>
            <table class="table table-striped table-bordered no-footer text-center display animate__animated animate__fadeInLeft" id="q109_tbl2" cellpadding="0" cellspacing="0">
                <thead>
                    
                </thead>
                <tbody>
                    
                </tbody>
            </table>
        </div>
    </div>
</div> -->

<div class="card cardXX d-none position-relative flex-column cardBg mt-2">
    <h5 class="div-head" ><b style="font-weight:500">Segment</b></h5>
    <div id="segment_op_dfs" class="animate__animated animate__fadeInLeft tab2_chart" style="height:270px"></div>
</div>
<div class="card cardXX d-none position-relative flex-column cardBg mt-2">
    <h5 class="div-head" ><b style="font-weight:500">Types</b></h5>
    <div id="type_op_dfs" class="animate__animated animate__fadeInLeft tab2_chart" style="height:270px"></div>
</div>
<div class="card cardXX d-none position-relative flex-column cardBg mt-2">
    <h5 class="div-head" ><b style="font-weight:500">Dwell Time Departure</b></h5>
    <div id="dwell_op_dfsD" class="animate__animated animate__fadeInLeft tab2_chart" style="height:270px"></div>
</div>
<div class="card cardXX d-none position-relative flex-column cardBg mt-2">
    <h5 class="div-head" ><b style="font-weight:500">Dwell Time Arrival</b></h5>
    <div id="dwell_op_dfsA" class="animate__animated animate__fadeInLeft tab2_chart" style="height:270px"></div>
</div>
<div class="card cardXX d-none position-relative flex-column cardBg mt-2">
    <h5 class="div-head" ><b style="font-weight:500">Frequency International</b></h5>
    <div id="frequency_op_dfsI" class="animate__animated animate__fadeInLeft tab2_chart" style="height:270px"></div>
</div>
<div class="card cardXX d-none position-relative flex-column cardBg mt-2">
    <h5 class="div-head" ><b style="font-weight:500">Frequency Domestic</b></h5>
    <div id="frequency_op_dfsD" class="animate__animated animate__fadeInLeft tab2_chart" style="height:270px"></div>
</div>
<div class="card cardXX d-none position-relative flex-column cardBg mt-2">
    <h5 class="div-head" ><b style="font-weight:500">Travelling</b></h5>
    <div id="travelling_op_dfs" class="animate__animated animate__fadeInLeft tab2_chart" style="height:270px"></div>
</div>
<div class="card cardXX d-none position-relative flex-column cardBg mt-2">
    <h5 class="div-head" ><b style="font-weight:500">Reason of Travel</b></h5>
    <div id="purpose_op_dfs" class="animate__animated animate__fadeInLeft tab2_chart" style="height:270px"></div>
</div>
<div class="card cardXX d-none position-relative flex-column cardBg mt-2">
    <h5 class="div-head" ><b style="font-weight:500">Terminal</b></h5>
    <div id="terminal_op_dfs" class="animate__animated animate__fadeInLeft tab2_chart" style="height:270px"></div>
</div>
<div class="card cardXX d-none position-relative flex-column cardBg mt-2">
    <h5 class="div-head" ><b style="font-weight:500">Traveller</b></h5>
    <div id="traveller_op_dfs" class="animate__animated animate__fadeInLeft tab2_chart" style="height:270px"></div>
</div>