<!--begin::List widget 15-->
<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">PopuLar Products</span>
			<span class="text-gray-400 pt-2 fw-semibold fs-6">Latest bestsellers</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 svg-icon-gray-300 me-n1' %}</button>
			<!--begin::Menu 3-->
			<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-semibold w-200px py-3" data-kt-menu="true">
				<!--begin::Heading-->
				<div class="menu-item px-3">
					<div class="menu-content text-muted pb-2 px-3 fs-7 text-uppercase">Payments</div>
				</div>
				<!--end::Heading-->
				<!--begin::Menu item-->
				<div class="menu-item px-3">
					<a href="#" class="menu-link px-3">Create Invoice</a>
				</div>
				<!--end::Menu item-->
				<!--begin::Menu item-->
				<div class="menu-item px-3">
					<a href="#" class="menu-link flex-stack px-3">Create Payment 
					<i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="Specify a target name for future usage and reference"></i></a>
				</div>
				<!--end::Menu item-->
				<!--begin::Menu item-->
				<div class="menu-item px-3">
					<a href="#" class="menu-link px-3">Generate Bill</a>
				</div>
				<!--end::Menu item-->
				<!--begin::Menu item-->
				<div class="menu-item px-3" data-kt-menu-trigger="hover" data-kt-menu-placement="right-end">
					<a href="#" class="menu-link px-3">
						<span class="menu-title">Subscription</span>
						<span class="menu-arrow"></span>
					</a>
					<!--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">Plans</a>
						</div>
						<!--end::Menu item-->
						<!--begin::Menu item-->
						<div class="menu-item px-3">
							<a href="#" class="menu-link px-3">Billing</a>
						</div>
						<!--end::Menu item-->
						<!--begin::Menu item-->
						<div class="menu-item px-3">
							<a href="#" class="menu-link px-3">Statements</a>
						</div>
						<!--end::Menu item-->
						<!--begin::Menu separator-->
						<div class="separator my-2"></div>
						<!--end::Menu separator-->
						<!--begin::Menu item-->
						<div class="menu-item px-3">
							<div class="menu-content px-3">
								<!--begin::Switch-->
								<label class="form-check form-switch form-check-custom form-check-solid">
									<!--begin::Input-->
									<input class="form-check-input w-30px h-20px" type="checkbox" value="1" checked="checked" name="notifications" />
									<!--end::Input-->
									<!--end::Label-->
									<span class="form-check-label text-muted fs-6">Recuring</span>
									<!--end::Label-->
								</label>
								<!--end::Switch-->
							</div>
						</div>
						<!--end::Menu item-->
					</div>
					<!--end::Menu sub-->
				</div>
				<!--end::Menu item-->
				<!--begin::Menu item-->
				<div class="menu-item px-3 my-1">
					<a href="#" class="menu-link px-3">Settings</a>
				</div>
				<!--end::Menu item-->
			</div>
			<!--end::Menu 3-->
			<!--end::Menu-->
		</div>
		<!--end::Toolbar-->
	</div>
	<!--end::Header-->
	<!--begin::Body-->
	<div class="card-body pt-7">
		<!--begin::Item-->
		<div class="d-flex align-items-sm-center mb-7">
			<!--begin::Symbol-->
			<div class="symbol symbol-50px symbol-2by3 me-4">
				<div class="symbol-label" style="background-image: url('assets/media/stock/900x600/20.jpg')"></div>
			</div>
			<!--end::Symbol-->
			<!--begin::Content-->
			<div class="d-flex flex-stack w-100">
				<!--begin::Title-->
				<div class="my-lg-0 my-2 me-2">
					<a href="#" class="text-gray-800 fw-bold text-hover-primary fs-6">BlueSky Apartments</a>
					<span class="text-gray-400 fw-semibold d-block pt-1">Most Successful Fellas</span>
				</div>
				<!--end::Title-->
				<!--begin::Menu-->
				<button class="btn btn-icon btn-sm w-30px h-30px btn-active-light-primary btn-active-color-primary btn-light" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end" data-kt-menu-overflow="true">{% getSvgIcon 'duotune/arrows/arr001.svg' 'svg-icon svg-icon-5' %}</button>
				<!--begin::Menu 3-->
				<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-semibold w-200px py-3" data-kt-menu="true">
					<!--begin::Heading-->
					<div class="menu-item px-3">
						<div class="menu-content text-muted pb-2 px-3 fs-7 text-uppercase">Payments</div>
					</div>
					<!--end::Heading-->
					<!--begin::Menu item-->
					<div class="menu-item px-3">
						<a href="#" class="menu-link px-3">Create Invoice</a>
					</div>
					<!--end::Menu item-->
					<!--begin::Menu item-->
					<div class="menu-item px-3">
						<a href="#" class="menu-link flex-stack px-3">Create Payment 
						<i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="Specify a target name for future usage and reference"></i></a>
					</div>
					<!--end::Menu item-->
					<!--begin::Menu item-->
					<div class="menu-item px-3">
						<a href="#" class="menu-link px-3">Generate Bill</a>
					</div>
					<!--end::Menu item-->
					<!--begin::Menu item-->
					<div class="menu-item px-3" data-kt-menu-trigger="hover" data-kt-menu-placement="right-end">
						<a href="#" class="menu-link px-3">
							<span class="menu-title">Subscription</span>
							<span class="menu-arrow"></span>
						</a>
						<!--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">Plans</a>
							</div>
							<!--end::Menu item-->
							<!--begin::Menu item-->
							<div class="menu-item px-3">
								<a href="#" class="menu-link px-3">Billing</a>
							</div>
							<!--end::Menu item-->
							<!--begin::Menu item-->
							<div class="menu-item px-3">
								<a href="#" class="menu-link px-3">Statements</a>
							</div>
							<!--end::Menu item-->
							<!--begin::Menu separator-->
							<div class="separator my-2"></div>
							<!--end::Menu separator-->
							<!--begin::Menu item-->
							<div class="menu-item px-3">
								<div class="menu-content px-3">
									<!--begin::Switch-->
									<label class="form-check form-switch form-check-custom form-check-solid">
										<!--begin::Input-->
										<input class="form-check-input w-30px h-20px" type="checkbox" value="1" checked="checked" name="notifications" />
										<!--end::Input-->
										<!--end::Label-->
										<span class="form-check-label text-muted fs-6">Recuring</span>
										<!--end::Label-->
									</label>
									<!--end::Switch-->
								</div>
							</div>
							<!--end::Menu item-->
						</div>
						<!--end::Menu sub-->
					</div>
					<!--end::Menu item-->
					<!--begin::Menu item-->
					<div class="menu-item px-3 my-1">
						<a href="#" class="menu-link px-3">Settings</a>
					</div>
					<!--end::Menu item-->
				</div>
				<!--end::Menu 3-->
				<!--end::Menu-->
			</div>
			<!--end::Content-->
		</div>
		<!--end::Item-->
		<!--begin::Item-->
		<div class="d-flex align-items-sm-center mb-7">
			<!--begin::Symbol-->
			<div class="symbol symbol-50px symbol-2by3 me-4">
				<div class="symbol-label" style="background-image: url('assets/media/stock/900x600/23.jpg')"></div>
			</div>
			<!--end::Symbol-->
			<!--begin::Content-->
			<div class="d-flex flex-stack w-100">
				<!--begin::Title-->
				<div class="my-lg-0 my-2 me-2">
					<a href="#" class="text-gray-800 fw-bold text-hover-primary fs-6">Yellow Lines</a>
					<span class="text-gray-400 fw-semibold d-block pt-1">Feminine all around</span>
				</div>
				<!--end::Title-->
				<!--begin::Menu-->
				<button class="btn btn-icon btn-sm w-30px h-30px btn-active-light-primary btn-active-color-primary btn-light" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end" data-kt-menu-overflow="true">{% getSvgIcon 'duotune/arrows/arr001.svg' 'svg-icon svg-icon-5' %}</button>
				<!--begin::Menu 3-->
				<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-semibold w-200px py-3" data-kt-menu="true">
					<!--begin::Heading-->
					<div class="menu-item px-3">
						<div class="menu-content text-muted pb-2 px-3 fs-7 text-uppercase">Payments</div>
					</div>
					<!--end::Heading-->
					<!--begin::Menu item-->
					<div class="menu-item px-3">
						<a href="#" class="menu-link px-3">Create Invoice</a>
					</div>
					<!--end::Menu item-->
					<!--begin::Menu item-->
					<div class="menu-item px-3">
						<a href="#" class="menu-link flex-stack px-3">Create Payment 
						<i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="Specify a target name for future usage and reference"></i></a>
					</div>
					<!--end::Menu item-->
					<!--begin::Menu item-->
					<div class="menu-item px-3">
						<a href="#" class="menu-link px-3">Generate Bill</a>
					</div>
					<!--end::Menu item-->
					<!--begin::Menu item-->
					<div class="menu-item px-3" data-kt-menu-trigger="hover" data-kt-menu-placement="right-end">
						<a href="#" class="menu-link px-3">
							<span class="menu-title">Subscription</span>
							<span class="menu-arrow"></span>
						</a>
						<!--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">Plans</a>
							</div>
							<!--end::Menu item-->
							<!--begin::Menu item-->
							<div class="menu-item px-3">
								<a href="#" class="menu-link px-3">Billing</a>
							</div>
							<!--end::Menu item-->
							<!--begin::Menu item-->
							<div class="menu-item px-3">
								<a href="#" class="menu-link px-3">Statements</a>
							</div>
							<!--end::Menu item-->
							<!--begin::Menu separator-->
							<div class="separator my-2"></div>
							<!--end::Menu separator-->
							<!--begin::Menu item-->
							<div class="menu-item px-3">
								<div class="menu-content px-3">
									<!--begin::Switch-->
									<label class="form-check form-switch form-check-custom form-check-solid">
										<!--begin::Input-->
										<input class="form-check-input w-30px h-20px" type="checkbox" value="1" checked="checked" name="notifications" />
										<!--end::Input-->
										<!--end::Label-->
										<span class="form-check-label text-muted fs-6">Recuring</span>
										<!--end::Label-->
									</label>
									<!--end::Switch-->
								</div>
							</div>
							<!--end::Menu item-->
						</div>
						<!--end::Menu sub-->
					</div>
					<!--end::Menu item-->
					<!--begin::Menu item-->
					<div class="menu-item px-3 my-1">
						<a href="#" class="menu-link px-3">Settings</a>
					</div>
					<!--end::Menu item-->
				</div>
				<!--end::Menu 3-->
				<!--end::Menu-->
			</div>
			<!--end::Content-->
		</div>
		<!--end::Item-->
		<!--begin::Item-->
		<div class="d-flex align-items-sm-center mb-7">
			<!--begin::Symbol-->
			<div class="symbol symbol-50px symbol-2by3 me-4">
				<div class="symbol-label" style="background-image: url('assets/media/stock/900x600/22.jpg')"></div>
			</div>
			<!--end::Symbol-->
			<!--begin::Content-->
			<div class="d-flex flex-stack w-100">
				<!--begin::Title-->
				<div class="my-lg-0 my-2 me-2">
					<a href="#" class="text-gray-800 fw-bold text-hover-primary fs-6">421 Avenue</a>
					<span class="text-gray-400 fw-semibold d-block pt-1">Visually stunning</span>
				</div>
				<!--end::Title-->
				<!--begin::Menu-->
				<button class="btn btn-icon btn-sm w-30px h-30px btn-active-light-primary btn-active-color-primary btn-light" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end" data-kt-menu-overflow="true">{% getSvgIcon 'duotune/arrows/arr001.svg' 'svg-icon svg-icon-5' %}</button>
				<!--begin::Menu 3-->
				<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-semibold w-200px py-3" data-kt-menu="true">
					<!--begin::Heading-->
					<div class="menu-item px-3">
						<div class="menu-content text-muted pb-2 px-3 fs-7 text-uppercase">Payments</div>
					</div>
					<!--end::Heading-->
					<!--begin::Menu item-->
					<div class="menu-item px-3">
						<a href="#" class="menu-link px-3">Create Invoice</a>
					</div>
					<!--end::Menu item-->
					<!--begin::Menu item-->
					<div class="menu-item px-3">
						<a href="#" class="menu-link flex-stack px-3">Create Payment 
						<i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="Specify a target name for future usage and reference"></i></a>
					</div>
					<!--end::Menu item-->
					<!--begin::Menu item-->
					<div class="menu-item px-3">
						<a href="#" class="menu-link px-3">Generate Bill</a>
					</div>
					<!--end::Menu item-->
					<!--begin::Menu item-->
					<div class="menu-item px-3" data-kt-menu-trigger="hover" data-kt-menu-placement="right-end">
						<a href="#" class="menu-link px-3">
							<span class="menu-title">Subscription</span>
							<span class="menu-arrow"></span>
						</a>
						<!--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">Plans</a>
							</div>
							<!--end::Menu item-->
							<!--begin::Menu item-->
							<div class="menu-item px-3">
								<a href="#" class="menu-link px-3">Billing</a>
							</div>
							<!--end::Menu item-->
							<!--begin::Menu item-->
							<div class="menu-item px-3">
								<a href="#" class="menu-link px-3">Statements</a>
							</div>
							<!--end::Menu item-->
							<!--begin::Menu separator-->
							<div class="separator my-2"></div>
							<!--end::Menu separator-->
							<!--begin::Menu item-->
							<div class="menu-item px-3">
								<div class="menu-content px-3">
									<!--begin::Switch-->
									<label class="form-check form-switch form-check-custom form-check-solid">
										<!--begin::Input-->
										<input class="form-check-input w-30px h-20px" type="checkbox" value="1" checked="checked" name="notifications" />
										<!--end::Input-->
										<!--end::Label-->
										<span class="form-check-label text-muted fs-6">Recuring</span>
										<!--end::Label-->
									</label>
									<!--end::Switch-->
								</div>
							</div>
							<!--end::Menu item-->
						</div>
						<!--end::Menu sub-->
					</div>
					<!--end::Menu item-->
					<!--begin::Menu item-->
					<div class="menu-item px-3 my-1">
						<a href="#" class="menu-link px-3">Settings</a>
					</div>
					<!--end::Menu item-->
				</div>
				<!--end::Menu 3-->
				<!--end::Menu-->
			</div>
			<!--end::Content-->
		</div>
		<!--end::Item-->
		<!--begin::Item-->
		<div class="d-flex align-items-sm-center mb-7">
			<!--begin::Symbol-->
			<div class="symbol symbol-50px symbol-2by3 me-4">
				<div class="symbol-label" style="background-image: url('assets/media/stock/900x600/19.jpg')"></div>
			</div>
			<!--end::Symbol-->
			<!--begin::Content-->
			<div class="d-flex flex-stack w-100">
				<!--begin::Title-->
				<div class="my-lg-0 my-2 me-2">
					<a href="#" class="text-gray-800 fw-bold text-hover-primary fs-6">Glassbricks</a>
					<span class="text-gray-400 fw-semibold d-block pt-1">The will to capture readers</span>
				</div>
				<!--end::Title-->
				<!--begin::Menu-->
				<button class="btn btn-icon btn-sm w-30px h-30px btn-active-light-primary btn-active-color-primary btn-light" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end" data-kt-menu-overflow="true">{% getSvgIcon 'duotune/arrows/arr001.svg' 'svg-icon svg-icon-5' %}</button>
				<!--begin::Menu 3-->
				<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-semibold w-200px py-3" data-kt-menu="true">
					<!--begin::Heading-->
					<div class="menu-item px-3">
						<div class="menu-content text-muted pb-2 px-3 fs-7 text-uppercase">Payments</div>
					</div>
					<!--end::Heading-->
					<!--begin::Menu item-->
					<div class="menu-item px-3">
						<a href="#" class="menu-link px-3">Create Invoice</a>
					</div>
					<!--end::Menu item-->
					<!--begin::Menu item-->
					<div class="menu-item px-3">
						<a href="#" class="menu-link flex-stack px-3">Create Payment 
						<i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="Specify a target name for future usage and reference"></i></a>
					</div>
					<!--end::Menu item-->
					<!--begin::Menu item-->
					<div class="menu-item px-3">
						<a href="#" class="menu-link px-3">Generate Bill</a>
					</div>
					<!--end::Menu item-->
					<!--begin::Menu item-->
					<div class="menu-item px-3" data-kt-menu-trigger="hover" data-kt-menu-placement="right-end">
						<a href="#" class="menu-link px-3">
							<span class="menu-title">Subscription</span>
							<span class="menu-arrow"></span>
						</a>
						<!--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">Plans</a>
							</div>
							<!--end::Menu item-->
							<!--begin::Menu item-->
							<div class="menu-item px-3">
								<a href="#" class="menu-link px-3">Billing</a>
							</div>
							<!--end::Menu item-->
							<!--begin::Menu item-->
							<div class="menu-item px-3">
								<a href="#" class="menu-link px-3">Statements</a>
							</div>
							<!--end::Menu item-->
							<!--begin::Menu separator-->
							<div class="separator my-2"></div>
							<!--end::Menu separator-->
							<!--begin::Menu item-->
							<div class="menu-item px-3">
								<div class="menu-content px-3">
									<!--begin::Switch-->
									<label class="form-check form-switch form-check-custom form-check-solid">
										<!--begin::Input-->
										<input class="form-check-input w-30px h-20px" type="checkbox" value="1" checked="checked" name="notifications" />
										<!--end::Input-->
										<!--end::Label-->
										<span class="form-check-label text-muted fs-6">Recuring</span>
										<!--end::Label-->
									</label>
									<!--end::Switch-->
								</div>
							</div>
							<!--end::Menu item-->
						</div>
						<!--end::Menu sub-->
					</div>
					<!--end::Menu item-->
					<!--begin::Menu item-->
					<div class="menu-item px-3 my-1">
						<a href="#" class="menu-link px-3">Settings</a>
					</div>
					<!--end::Menu item-->
				</div>
				<!--end::Menu 3-->
				<!--end::Menu-->
			</div>
			<!--end::Content-->
		</div>
		<!--end::Item-->
		<!--begin::Item-->
		<div class="d-flex align-items-sm-center">
			<!--begin::Symbol-->
			<div class="symbol symbol-50px symbol-2by3 me-4">
				<div class="symbol-label" style="background-image: url('assets/media/stock/900x600/3.jpg')"></div>
			</div>
			<!--end::Symbol-->
			<!--begin::Content-->
			<div class="d-flex flex-stack w-100">
				<!--begin::Title-->
				<div class="my-lg-0 my-2 me-2">
					<a href="#" class="text-gray-800 fw-bold text-hover-primary fs-6">RollerCoaster</a>
					<span class="text-gray-400 fw-semibold d-block pt-1">Food trends &amp; inspirations</span>
				</div>
				<!--end::Title-->
				<!--begin::Menu-->
				<button class="btn btn-icon btn-sm w-30px h-30px btn-active-light-primary btn-active-color-primary btn-light" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end" data-kt-menu-overflow="true">{% getSvgIcon 'duotune/arrows/arr001.svg' 'svg-icon svg-icon-5' %}</button>
				{% include 'partials/menus/_menu-3.html' %}
				<!--end::Menu-->
			</div>
			<!--end::Content-->
		</div>
		<!--end::Item-->
	</div>
	<!--end::Body-->
</div>
<!--end::List widget 15-->
