<!--begin::List widget 3-->
<div class="card card-flush h-xl-100">
	<!--begin::Header-->
	<div class="card-header pt-5">
		<!--begin::Title-->
		<h3 class="card-title align-items-start flex-column">
			<span class="card-label fw-bold text-dark fs-2hx">234,456</span>
			<span class="text-gray-400 mt-1 fw-semibold fs-6">Users from all channels</span>
		</h3>
		<!--end::Title-->
		<!--begin::Toolbar-->
		<div class="card-toolbar">
			<!--begin::Menu-->
			<button class="btn btn-icon btn-color-gray-400 btn-active-color-primary justify-content-end" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end" data-kt-menu-overflow="true">{% getSvgIcon 'duotune/general/gen023.svg' 'svg-icon svg-icon-1' %}</button>
			<!--begin::Menu 2-->
			<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-semibold w-200px" data-kt-menu="true">
				<!--begin::Menu item-->
				<div class="menu-item px-3">
					<div class="menu-content fs-6 text-dark fw-bold px-3 py-4">Quick Actions</div>
				</div>
				<!--end::Menu item-->
				<!--begin::Menu separator-->
				<div class="separator mb-3 opacity-75"></div>
				<!--end::Menu separator-->
				<!--begin::Menu item-->
				<div class="menu-item px-3">
					<a href="#" class="menu-link px-3">New Ticket</a>
				</div>
				<!--end::Menu item-->
				<!--begin::Menu item-->
				<div class="menu-item px-3">
					<a href="#" class="menu-link px-3">New Customer</a>
				</div>
				<!--end::Menu item-->
				<!--begin::Menu item-->
				<div class="menu-item px-3" data-kt-menu-trigger="hover" data-kt-menu-placement="right-start">
					<!--begin::Menu item-->
					<a href="#" class="menu-link px-3">
						<span class="menu-title">New Group</span>
						<span class="menu-arrow"></span>
					</a>
					<!--end::Menu item-->
					<!--begin::Menu sub-->
					<div class="menu-sub menu-sub-dropdown w-175px py-4">
						<!--begin::Menu item-->
						<div class="menu-item px-3">
							<a href="#" class="menu-link px-3">Admin Group</a>
						</div>
						<!--end::Menu item-->
						<!--begin::Menu item-->
						<div class="menu-item px-3">
							<a href="#" class="menu-link px-3">Staff Group</a>
						</div>
						<!--end::Menu item-->
						<!--begin::Menu item-->
						<div class="menu-item px-3">
							<a href="#" class="menu-link px-3">Member Group</a>
						</div>
						<!--end::Menu item-->
					</div>
					<!--end::Menu sub-->
				</div>
				<!--end::Menu item-->
				<!--begin::Menu item-->
				<div class="menu-item px-3">
					<a href="#" class="menu-link px-3">New Contact</a>
				</div>
				<!--end::Menu item-->
				<!--begin::Menu separator-->
				<div class="separator mt-3 opacity-75"></div>
				<!--end::Menu separator-->
				<!--begin::Menu item-->
				<div class="menu-item px-3">
					<div class="menu-content px-3 py-3">
						<a class="btn btn-primary btn-sm px-4" href="#">Generate Reports</a>
					</div>
				</div>
				<!--end::Menu item-->
			</div>
			<!--end::Menu 2-->
			<!--end::Menu-->
		</div>
		<!--end::Toolbar-->
	</div>
	<!--end::Header-->
	<!--begin::Body-->
	<div class="card-body">
		<!--begin::Item-->
		<div class="d-flex flex-stack">
			<!--begin::Wrapper-->
			<div class="d-flex align-items-center me-3">
				<!--begin::Icon-->
				<img src="assets/media/svg/brand-logos/dribbble-icon-1.svg" class="me-3 w-30px" alt="" />
				<!--end::Icon-->
				<!--begin::Section-->
				<div class="flex-grow-1">
					<a href="#" class="text-gray-800 text-hover-primary fs-5 fw-bold lh-0">Dribbble</a>
					<span class="text-gray-400 fw-semibold d-block fs-6">Community</span>
				</div>
				<!--end::Section-->
			</div>
			<!--end::Wrapper-->
			<!--begin::Statistics-->
			<div class="d-flex align-items-center w-100 mw-125px">
				<!--begin::Progress-->
				<div class="progress h-6px w-100 me-2 bg-light-success">
					<div class="progress-bar bg-success" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
				</div>
				<!--end::Progress-->
				<!--begin::Value-->
				<span class="text-gray-400 fw-semibold">65%</span>
				<!--end::Value-->
			</div>
			<!--end::Statistics-->
		</div>
		<!--end::Item-->
		<!--begin::Separator-->
		<div class="separator separator-dashed my-4"></div>
		<!--end::Separator-->
		<!--begin::Item-->
		<div class="d-flex flex-stack">
			<!--begin::Wrapper-->
			<div class="d-flex align-items-center me-3">
				<!--begin::Icon-->
				<img src="assets/media/svg/brand-logos/instagram-2-1.svg" class="me-3 w-30px" alt="" />
				<!--end::Icon-->
				<!--begin::Section-->
				<div class="flex-grow-1">
					<a href="#" class="text-gray-800 text-hover-primary fs-5 fw-bold lh-0">Linked In</a>
					<span class="text-gray-400 fw-semibold d-block fs-6">Social Media</span>
				</div>
				<!--end::Section-->
			</div>
			<!--end::Wrapper-->
			<!--begin::Statistics-->
			<div class="d-flex align-items-center w-100 mw-125px">
				<!--begin::Progress-->
				<div class="progress h-6px w-100 me-2 bg-light-warning">
					<div class="progress-bar bg-warning" role="progressbar" style="width: 87%" aria-valuenow="87" aria-valuemin="0" aria-valuemax="100"></div>
				</div>
				<!--end::Progress-->
				<!--begin::Value-->
				<span class="text-gray-400 fw-semibold">87%</span>
				<!--end::Value-->
			</div>
			<!--end::Statistics-->
		</div>
		<!--end::Item-->
		<!--begin::Separator-->
		<div class="separator separator-dashed my-4"></div>
		<!--end::Separator-->
		<!--begin::Item-->
		<div class="d-flex flex-stack">
			<!--begin::Wrapper-->
			<div class="d-flex align-items-center me-3">
				<!--begin::Icon-->
				<img src="assets/media/svg/brand-logos/slack-icon.svg" class="me-3 w-30px" alt="" />
				<!--end::Icon-->
				<!--begin::Section-->
				<div class="flex-grow-1">
					<a href="#" class="text-gray-800 text-hover-primary fs-5 fw-bold lh-0">Slack</a>
					<span class="text-gray-400 fw-semibold d-block fs-6">Messanger</span>
				</div>
				<!--end::Section-->
			</div>
			<!--end::Wrapper-->
			<!--begin::Statistics-->
			<div class="d-flex align-items-center w-100 mw-125px">
				<!--begin::Progress-->
				<div class="progress h-6px w-100 me-2 bg-light-primary">
					<div class="progress-bar bg-primary" role="progressbar" style="width: 44%" aria-valuenow="44" aria-valuemin="0" aria-valuemax="100"></div>
				</div>
				<!--end::Progress-->
				<!--begin::Value-->
				<span class="text-gray-400 fw-semibold">44%</span>
				<!--end::Value-->
			</div>
			<!--end::Statistics-->
		</div>
		<!--end::Item-->
		<!--begin::Separator-->
		<div class="separator separator-dashed my-4"></div>
		<!--end::Separator-->
		<!--begin::Item-->
		<div class="d-flex flex-stack">
			<!--begin::Wrapper-->
			<div class="d-flex align-items-center me-3">
				<!--begin::Icon-->
				<img src="assets/media/svg/brand-logos/google-icon.svg" class="me-3 w-30px" alt="" />
				<!--end::Icon-->
				<!--begin::Section-->
				<div class="flex-grow-1">
					<a href="#" class="text-gray-800 text-hover-primary fs-5 fw-bold lh-0">Google</a>
					<span class="text-gray-400 fw-semibold d-block fs-6">SEO &amp; PPC</span>
				</div>
				<!--end::Section-->
			</div>
			<!--end::Wrapper-->
			<!--begin::Statistics-->
			<div class="d-flex align-items-center w-100 mw-125px">
				<!--begin::Progress-->
				<div class="progress h-6px w-100 me-2 bg-light-info">
					<div class="progress-bar bg-info" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
				</div>
				<!--end::Progress-->
				<!--begin::Value-->
				<span class="text-gray-400 fw-semibold">70%</span>
				<!--end::Value-->
			</div>
			<!--end::Statistics-->
		</div>
		<!--end::Item-->
		<!--begin::Separator-->
		<div class="separator separator-dashed my-4"></div>
		<!--end::Separator-->
		<!--begin::Item-->
		<div class="d-flex flex-stack">
			<!--begin::Wrapper-->
			<div class="d-flex align-items-center me-3">
				<!--begin::Icon-->
				<img src="assets/media/svg/brand-logos/invision.svg" class="me-3 w-30px" alt="" />
				<!--end::Icon-->
				<!--begin::Section-->
				<div class="flex-grow-1">
					<a href="#" class="text-gray-800 text-hover-primary fs-5 fw-bold lh-0">inVision</a>
					<span class="text-gray-400 fw-semibold d-block fs-6">Collaboration</span>
				</div>
				<!--end::Section-->
			</div>
			<!--end::Wrapper-->
			<!--begin::Statistics-->
			<div class="d-flex align-items-center w-100 mw-125px">
				<!--begin::Progress-->
				<div class="progress h-6px w-100 me-2 bg-light-danger">
					<div class="progress-bar bg-danger" role="progressbar" style="width: 56%" aria-valuenow="56" aria-valuemin="0" aria-valuemax="100"></div>
				</div>
				<!--end::Progress-->
				<!--begin::Value-->
				<span class="text-gray-400 fw-semibold">56%</span>
				<!--end::Value-->
			</div>
			<!--end::Statistics-->
		</div>
		<!--end::Item-->
		<!--begin::Separator-->
		<div class="separator separator-dashed my-4"></div>
		<!--end::Separator-->
		<!--begin::Item-->
		<div class="d-flex flex-stack">
			<!--begin::Wrapper-->
			<div class="d-flex align-items-center me-3">
				<!--begin::Icon-->
				<img src="assets/media/svg/brand-logos/facebook-3.svg" class="me-3 w-30px" alt="" />
				<!--end::Icon-->
				<!--begin::Section-->
				<div class="flex-grow-1">
					<a href="#" class="text-gray-800 text-hover-primary fs-5 fw-bold lh-0">Facebook</a>
					<span class="text-gray-400 fw-semibold d-block fs-6">Social Network</span>
				</div>
				<!--end::Section-->
			</div>
			<!--end::Wrapper-->
			<!--begin::Statistics-->
			<div class="d-flex align-items-center w-100 mw-125px">
				<!--begin::Progress-->
				<div class="progress h-6px w-100 me-2 bg-light-success">
					<div class="progress-bar bg-success" role="progressbar" style="width: 82%" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100"></div>
				</div>
				<!--end::Progress-->
				<!--begin::Value-->
				<span class="text-gray-400 fw-semibold">82%</span>
				<!--end::Value-->
			</div>
			<!--end::Statistics-->
		</div>
		<!--end::Item-->
	</div>
	<!--end::Body-->
</div>
<!--end::List widget 3-->
