<!--begin::Chart widget 40-->
<div class="card card-flush border-0 h-md-100">
    <!--begin::Body-->
    <div class="card-body pt-0">
        <!--begin::Row-->
        <div class="row">
            <!--begin::Col-->
            <div class="col-xxl-5 d-flex flex-center my-5 mb-md-0">
                <div id="kt_charts_widget_40_chart" class="min-w-200px h-200px h-xl-300px"></div>
            </div>
            <!--end::Col-->
            <!--begin::Col-->
            <div class="col-xxl-7">
                <div class="card card-reset card-flush">
                    <!--begin::Header-->
                    <div class="card-header px-0 pt-7 mb-5">
                        <!--begin::Title-->
                        <h4 class="card-title align-items-start flex-column">
                            <span class="card-label fw-bold text-gray-800">Orders by Countries</span>
                            <span class="text-gray-400 mt-1 fw-bold fs-7">Avg. daily $346 in sales. View All.
                                <a href="?page=pages/careers/list" class="text-primary opacity-75-hover">View All</a>
                            </span>
                        </h4>
                        <!--end::Title-->
                        <!--begin::Toolbar-->
                        <div class="card-toolbar">
                            <a href="?page=apps/ecommerce/catalog/add-product" class="btn btn-sm btn-primary">Report</a>
                        </div>
                        <!--end::Toolbar-->
                    </div>
                    <!--end::Header-->
                    <!--begin::Body-->
                    <div class="card-body p-0">
                                                        <!--begin::Item-->
                            <div class="d-flex flex-stack mb-6">
                                <!--begin::Symbol-->
                                <div class="symbol symbol-50px me-5">
                                    <span class="symbol-label">
                                        <img src="assets/media/flags/united-states.svg" class="w-25px" style="border-radius: 4px" alt=""/>
                                    </span>
                                </div>
                                <!--end::Symbol-->
                                <!--begin::Section-->
                                <div class="d-flex flex-stack flex-row-fluid d-grid gap-2">
                                    <!--begin::Content-->
                                    <div class="me-5">
                                        <!--begin::Title-->
                                        <a href="#" class="text-gray-800 fw-bolder text-hover-primary fs-4">United States</a>
                                        <!--end::Title-->
                                        <!--begin::Desc-->
                                        <span class="text-gray-400 fw-semibold fs-6 d-block text-start ps-0">Direct link clicks</span>
                                        <!--end::Desc-->
                                    </div>
                                    <!--end::Content-->
                                    <!--begin::Info-->
                                    <div class="d-flex align-items-center">
                                        <!--begin::Number-->
                                        <span class="text-gray-800 fw-bolder fs-4 me-3 d-block">9,763</span>
                                        <!--end::Number-->
                                        <!--begin::Label-->
                                        <div class="m-0">
                                                                                            <!--begin::Label-->
                                                <span class="badge badge-light-success fs-base">
                                                    <i class="ki-duotone ki-arrow-up fs-5 text-success ms-n1"><span class="path1"></span><span class="path2"></span></i>
                                                    2.2%
                                                </span>
                                                <!--end::Label-->
                                        </div>
                                        <!--end::Label-->
                                    </div>
                                    <!--end::Info-->
                                </div>
                                <!--end::Section-->
                            </div>
                            <!--end::Item-->
                                                        <!--begin::Item-->
                            <div class="d-flex flex-stack mb-6">
                                <!--begin::Symbol-->
                                <div class="symbol symbol-50px me-5">
                                    <span class="symbol-label">
                                        <img src="assets/media/flags/brazil.svg" class="w-25px" style="border-radius: 4px" alt=""/>
                                    </span>
                                </div>
                                <!--end::Symbol-->
                                <!--begin::Section-->
                                <div class="d-flex flex-stack flex-row-fluid d-grid gap-2">
                                    <!--begin::Content-->
                                    <div class="me-5">
                                        <!--begin::Title-->
                                        <a href="#" class="text-gray-800 fw-bolder text-hover-primary fs-4">Brasil</a>
                                        <!--end::Title-->
                                        <!--begin::Desc-->
                                        <span class="text-gray-400 fw-semibold fs-6 d-block text-start ps-0">All Social Channels </span>
                                        <!--end::Desc-->
                                    </div>
                                    <!--end::Content-->
                                    <!--begin::Info-->
                                    <div class="d-flex align-items-center">
                                        <!--begin::Number-->
                                        <span class="text-gray-800 fw-bolder fs-4 me-3 d-block">4,062</span>
                                        <!--end::Number-->
                                        <!--begin::Label-->
                                        <div class="m-0">
                                                                                            <!--begin::Label-->
                                                <span class="badge badge-light-danger fs-base">
                                                    <i class="ki-duotone ki-arrow-down fs-5 text-danger ms-n1"><span class="path1"></span><span class="path2"></span></i>
                                                    2.2%
                                                </span>
                                                <!--end::Label-->
                                        </div>
                                        <!--end::Label-->
                                    </div>
                                    <!--end::Info-->
                                </div>
                                <!--end::Section-->
                            </div>
                            <!--end::Item-->
                                                        <!--begin::Item-->
                            <div class="d-flex flex-stack mb-6">
                                <!--begin::Symbol-->
                                <div class="symbol symbol-50px me-5">
                                    <span class="symbol-label">
                                        <img src="assets/media/flags/france.svg" class="w-25px" style="border-radius: 4px" alt=""/>
                                    </span>
                                </div>
                                <!--end::Symbol-->
                                <!--begin::Section-->
                                <div class="d-flex flex-stack flex-row-fluid d-grid gap-2">
                                    <!--begin::Content-->
                                    <div class="me-5">
                                        <!--begin::Title-->
                                        <a href="#" class="text-gray-800 fw-bolder text-hover-primary fs-4">France</a>
                                        <!--end::Title-->
                                        <!--begin::Desc-->
                                        <span class="text-gray-400 fw-semibold fs-6 d-block text-start ps-0">Impact Radius visits</span>
                                        <!--end::Desc-->
                                    </div>
                                    <!--end::Content-->
                                    <!--begin::Info-->
                                    <div class="d-flex align-items-center">
                                        <!--begin::Number-->
                                        <span class="text-gray-800 fw-bolder fs-4 me-3 d-block">1,683</span>
                                        <!--end::Number-->
                                        <!--begin::Label-->
                                        <div class="m-0">
                                                                                            <!--begin::Label-->
                                                <span class="badge badge-light-success fs-base">
                                                    <i class="ki-duotone ki-arrow-up fs-5 text-success ms-n1"><span class="path1"></span><span class="path2"></span></i>
                                                    2.2%
                                                </span>
                                                <!--end::Label-->
                                        </div>
                                        <!--end::Label-->
                                    </div>
                                    <!--end::Info-->
                                </div>
                                <!--end::Section-->
                            </div>
                            <!--end::Item-->
                                                        <!--begin::Item-->
                            <div class="d-flex flex-stack ">
                                <!--begin::Symbol-->
                                <div class="symbol symbol-50px me-5">
                                    <span class="symbol-label">
                                        <img src="assets/media/flags/turkey.svg" class="w-25px" style="border-radius: 4px" alt=""/>
                                    </span>
                                </div>
                                <!--end::Symbol-->
                                <!--begin::Section-->
                                <div class="d-flex flex-stack flex-row-fluid d-grid gap-2">
                                    <!--begin::Content-->
                                    <div class="me-5">
                                        <!--begin::Title-->
                                        <a href="#" class="text-gray-800 fw-bolder text-hover-primary fs-4">Turkey</a>
                                        <!--end::Title-->
                                        <!--begin::Desc-->
                                        <span class="text-gray-400 fw-semibold fs-6 d-block text-start ps-0">Mailchimp Campaigns</span>
                                        <!--end::Desc-->
                                    </div>
                                    <!--end::Content-->
                                    <!--begin::Info-->
                                    <div class="d-flex align-items-center">
                                        <!--begin::Number-->
                                        <span class="text-gray-800 fw-bolder fs-4 me-3 d-block">368</span>
                                        <!--end::Number-->
                                        <!--begin::Label-->
                                        <div class="m-0">
                                                                                            <!--begin::Label-->
                                                <span class="badge badge-light-success fs-base">
                                                    <i class="ki-duotone ki-arrow-up fs-5 text-success ms-n1"><span class="path1"></span><span class="path2"></span></i>
                                                    2.2%
                                                </span>
                                                <!--end::Label-->
                                        </div>
                                        <!--end::Label-->
                                    </div>
                                    <!--end::Info-->
                                </div>
                                <!--end::Section-->
                            </div>
                            <!--end::Item-->
                    </div>
                    <!--end::Body-->
                </div>
            </div>
            <!--end::Col-->
        </div>
        <!--end::Row-->
    </div>
    <!--end::Body-->
</div>
<!--end::Chart widget 40-->