Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$
Light
Dark
System
Ask  Question

POS System on Blazor


I'm trying to add the POS Template to Blazor using the provided StarterKit

I have added the requieres css and js:


<link href="assets/plugins/custom/datatables/datatables.bundle.css" rel="stylesheet" type="text/css" />
<script src="assets/js/custom/pages/general/pos.js"></script>
<script src="assets/js/widgets.bundle.js"></script>
<script src="assets/js/custom/widgets.js"></script>
<script src="assets/js/custom/apps/chat/chat.js"></script>
<script src="assets/js/custom/utilities/modals/upgrade-plan.js"></script>
<script src="assets/js/custom/utilities/modals/users-search.js"></script>
<script src="assets/plugins/custom/datatables/datatables.bundle.js"></script>


And the respective HTML code, but it doesn't display correctly, the difference is more noticeable in higher resolutions like 2K or 4K:


<!--begin::Layout-->
<div class="d-flex flex-column flex-xl-row">
<!--begin::Content-->
<div class="d-flex flex-row-fluid me-xl-9 mb-10 mb-xl-0">
<!--begin::Pos food-->
<div class="card card-flush card-p-0 bg-transparent border-0">
<!--begin::Body-->
<div class="card-body">
<!--begin::Nav-->
<ul class="nav nav-pills d-flex justify-content-between nav-pills-custom gap-3 mb-6">
 <!--begin::Item-->
 <li class="nav-item mb-3 me-0">
 <!--begin::Nav link-->
 <a class="nav-link nav-link-border-solid btn btn-outline btn-flex btn-active-color-primary flex-column flex-stack pt-9 pb-7 page-bg show active" data-bs-toggle="pill" href="#kt_pos_food_content_1" >
 <!--begin::Icon-->
 <div class="nav-icon mb-3">
 <!--begin::Food icon-->
 <img src="assets/media/svg/food-icons/spaghetti.svg%22%20class=%22w-50px%22%20alt=%22" class="w-100" alt="">
 <!--end::Food icon-->
 </div>
 <!--end::Icon-->
 <!--begin::Info-->
 <div class="">
 <span class="text-gray-800 fw-bold fs-2 d-block">Lunch</span>
 <span class="text-gray-400 fw-semibold fs-7">8 Options</span>
 </div>
 <!--end::Info-->
 </a>
 <!--end::Nav link-->

 <!--end::Item-->
 <!--begin::Item-->
 <li class="nav-item mb-3 me-0">
 <!--begin::Nav link-->
 <a class="nav-link nav-link-border-solid btn btn-outline btn-flex btn-active-color-primary flex-column flex-stack pt-9 pb-7 page-bg" data-bs-toggle="pill" href="#kt_pos_food_content_2" >
 <!--begin::Icon-->
 <div class="nav-icon mb-3">
 <!--begin::Food icon-->
 <img src="assets/media/svg/food-icons/salad.svg%22%20class=%22w-50px%22%20alt=%22" class="w-100" alt="">
 <!--end::Food icon-->
 </div>
 <!--end::Icon-->
 <!--begin::Info-->
 <div class="">
 <span class="text-gray-800 fw-bold fs-2 d-block">Salad</span>
 <span class="text-gray-400 fw-semibold fs-7">14 Salads</span>
 </div>
 <!--end::Info-->
 </a>
 <!--end::Nav link-->

 <!--end::Item-->
 <!--begin::Item-->
 <li class="nav-item mb-3 me-0">
 <!--begin::Nav link-->
 <a class="nav-link nav-link-border-solid btn btn-outline btn-flex btn-active-color-primary flex-column flex-stack pt-9 pb-7 page-bg" data-bs-toggle="pill" href="#kt_pos_food_content_3" >
 <!--begin::Icon-->
 <div class="nav-icon mb-3">
 <!--begin::Food icon-->
 <img src="assets/media/svg/food-icons/cheeseburger.svg%22%20class=%22w-50px%22%20alt=%22" class="w-100" alt="">
 <!--end::Food icon-->
 </div>
 <!--end::Icon-->
 <!--begin::Info-->
 <div class="">
 <span class="text-gray-800 fw-bold fs-2 d-block">Burger</span>
 <span class="text-gray-400 fw-semibold fs-7">5 Burgers</span>
 </div>
 <!--end::Info-->
 </a>
 <!--end::Nav link-->

 <!--end::Item-->
 <!--begin::Item-->
 <li class="nav-item mb-3 me-0">
 <!--begin::Nav link-->
 <a class="nav-link nav-link-border-solid btn btn-outline btn-flex btn-active-color-primary flex-column flex-stack pt-9 pb-7 page-bg" data-bs-toggle="pill" href="#kt_pos_food_content_4" >
 <!--begin::Icon-->
 <div class="nav-icon mb-3">
 <!--begin::Food icon-->
 <img src="assets/media/svg/food-icons/coffee.svg%22%20class=%22w-50px%22%20alt=%22" class="w-100" alt="">
 <!--end::Food icon-->
 </div>
 <!--end::Icon-->
 <!--begin::Info-->
 <div class="">
 <span class="text-gray-800 fw-bold fs-2 d-block">Coffee</span>
 <span class="text-gray-400 fw-semibold fs-7">7 Beverages</span>
 </div>
 <!--end::Info-->
 </a>
 <!--end::Nav link-->

 <!--end::Item-->
 <!--begin::Item-->
 <li class="nav-item mb-3 me-0">
 <!--begin::Nav link-->
 <a class="nav-link nav-link-border-solid btn btn-outline btn-flex btn-active-color-primary flex-column flex-stack pt-9 pb-7 page-bg" data-bs-toggle="pill" href="#kt_pos_food_content_5" >
 <!--begin::Icon-->
 <div class="nav-icon mb-3">
 <!--begin::Food icon-->
 <img src="assets/media/svg/food-icons/cheesecake.svg%22%20class=%22w-50px%22%20alt=%22" class="w-100" alt="">
 <!--end::Food icon-->
 </div>
 <!--end::Icon-->
 <!--begin::Info-->
 <div class="">
 <span class="text-gray-800 fw-bold fs-2 d-block">Dessert</span>
 <span class="text-gray-400 fw-semibold fs-7">8 Desserts</span>
 </div>
 <!--end::Info-->
 </a>
 <!--end::Nav link-->

 <!--end::Item-->

<!--end::Nav-->
<!--begin::Tab Content-->
<div class="tab-content">
<!--begin::Tap pane-->
<div class="tab-pane fade show active" id="kt_pos_food_content_1">
<!--begin::Wrapper-->
<div class="d-flex flex-wrap d-grid gap-5 gap-xxl-9">
<!--begin::Card-->
<div class="card card-flush flex-row-fluid p-6 pb-5 mw-100">
 <!--begin::Body-->
 <div class="card-body text-center">
 <!--begin::Food img-->
 <img src="assets/media/stock/food/img-2.jpg%22%20class=%22rounded-3%20mb-4%20w-150px%20h-150px%20w-xxl-200px%20h-xxl-200px%22%20alt=%22" class="w-100" alt="">
 <!--end::Food img-->
 <!--begin::Info-->
 <div class="mb-2">
 <!--begin::Title-->
 <div class="text-center">
 <span class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-3 fs-xl-1">T-Bone Stake</span>
 <span class="text-gray-400 fw-semibold d-block fs-6 mt-n1">16 mins to cook</span>
 </div>
 <!--end::Title-->
 </div>
 <!--end::Info-->
 <!--begin::Total-->
 <span class="text-success text-end fw-bold fs-1">$16.50$</span>
 <!--end::Total-->
 </div>
 <!--end::Body-->
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-flush flex-row-fluid p-6 pb-5 mw-100">
 <!--begin::Body-->
 <div class="card-body text-center">
 <!--begin::Food img-->
 <img src="assets/media/stock/food/img-7.jpg%22%20class=%22rounded-3%20mb-4%20w-150px%20h-150px%20w-xxl-200px%20h-xxl-200px%22%20alt=%22" class="w-100" alt="">
 <!--end::Food img-->
 <!--begin::Info-->
 <div class="mb-2">
 <!--begin::Title-->
 <div class="text-center">
 <span class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-3 fs-xl-1">Chef&rsquo;s Salmon</span>
 <span class="text-gray-400 fw-semibold d-block fs-6 mt-n1">16 mins to cook</span>
 </div>
 <!--end::Title-->
 </div>
 <!--end::Info-->
 <!--begin::Total-->
 <span class="text-success text-end fw-bold fs-1">$12.40$</span>
 <!--end::Total-->
 </div>
 <!--end::Body-->
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-flush flex-row-fluid p-6 pb-5 mw-100">
 <!--begin::Body-->
 <div class="card-body text-center">
 <!--begin::Food img-->
 <img src="assets/media/stock/food/img-8.jpg%22%20class=%22rounded-3%20mb-4%20w-150px%20h-150px%20w-xxl-200px%20h-xxl-200px%22%20alt=%22" class="w-100" alt="">
 <!--end::Food img-->
 <!--begin::Info-->
 <div class="mb-2">
 <!--begin::Title-->
 <div class="text-center">
 <span class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-3 fs-xl-1">Ramen</span>
 <span class="text-gray-400 fw-semibold d-block fs-6 mt-n1">16 mins to cook</span>
 </div>
 <!--end::Title-->
 </div>
 <!--end::Info-->
 <!--begin::Total-->
 <span class="text-success text-end fw-bold fs-1">$14.90$</span>
 <!--end::Total-->
 </div>
 <!--end::Body-->
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-flush flex-row-fluid p-6 pb-5 mw-100">
 <!--begin::Body-->
 <div class="card-body text-center">
 <!--begin::Food img-->
 <img src="assets/media/stock/food/img-4.jpg%22%20class=%22rounded-3%20mb-4%20w-150px%20h-150px%20w-xxl-200px%20h-xxl-200px%22%20alt=%22" class="w-100" alt="">
 <!--end::Food img-->
 <!--begin::Info-->
 <div class="mb-2">
 <!--begin::Title-->
 <div class="text-center">
 <span class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-3 fs-xl-1">Chicken Breast</span>
 <span class="text-gray-400 fw-semibold d-block fs-6 mt-n1">16 mins to cook</span>
 </div>
 <!--end::Title-->
 </div>
 <!--end::Info-->
 <!--begin::Total-->
 <span class="text-success text-end fw-bold fs-1">$9.00$</span>
 <!--end::Total-->
 </div>
 <!--end::Body-->
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-flush flex-row-fluid p-6 pb-5 mw-100">
 <!--begin::Body-->
 <div class="card-body text-center">
 <!--begin::Food img-->
 <img src="assets/media/stock/food/img-10.jpg%22%20class=%22rounded-3%20mb-4%20w-150px%20h-150px%20w-xxl-200px%20h-xxl-200px%22%20alt=%22" class="w-100" alt="">
 <!--end::Food img-->
 <!--begin::Info-->
 <div class="mb-2">
 <!--begin::Title-->
 <div class="text-center">
 <span class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-3 fs-xl-1">Tenderlion Steak</span>
 <span class="text-gray-400 fw-semibold d-block fs-6 mt-n1">16 mins to cook</span>
 </div>
 <!--end::Title-->
 </div>
 <!--end::Info-->
 <!--begin::Total-->
 <span class="text-success text-end fw-bold fs-1">$19.00$</span>
 <!--end::Total-->
 </div>
 <!--end::Body-->
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-flush flex-row-fluid p-6 pb-5 mw-100">
 <!--begin::Body-->
 <div class="card-body text-center">
 <!--begin::Food img-->
 <img src="assets/media/stock/food/img-9.jpg%22%20class=%22rounded-3%20mb-4%20w-150px%20h-150px%20w-xxl-200px%20h-xxl-200px%22%20alt=%22" class="w-100" alt="">
 <!--end::Food img-->
 <!--begin::Info-->
 <div class="mb-2">
 <!--begin::Title-->
 <div class="text-center">
 <span class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-3 fs-xl-1">Soup of the Day</span>
 <span class="text-gray-400 fw-semibold d-block fs-6 mt-n1">16 mins to cook</span>
 </div>
 <!--end::Title-->
 </div>
 <!--end::Info-->
 <!--begin::Total-->
 <span class="text-success text-end fw-bold fs-1">$7.50$</span>
 <!--end::Total-->
 </div>
 <!--end::Body-->
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-flush flex-row-fluid p-6 pb-5 mw-100">
 <!--begin::Body-->
 <div class="card-body text-center">
 <!--begin::Food img-->
 <img src="assets/media/stock/food/img-3.jpg%22%20class=%22rounded-3%20mb-4%20w-150px%20h-150px%20w-xxl-200px%20h-xxl-200px%22%20alt=%22" class="w-100" alt="">
 <!--end::Food img-->
 <!--begin::Info-->
 <div class="mb-2">
 <!--begin::Title-->
 <div class="text-center">
 <span class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-3 fs-xl-1">Pancakes</span>
 <span class="text-gray-400 fw-semibold d-block fs-6 mt-n1">16 mins to cook</span>
 </div>
 <!--end::Title-->
 </div>
 <!--end::Info-->
 <!--begin::Total-->
 <span class="text-success text-end fw-bold fs-1">$6.50$</span>
 <!--end::Total-->
 </div>
 <!--end::Body-->
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-flush flex-row-fluid p-6 pb-5 mw-100">
 <!--begin::Body-->
 <div class="card-body text-center">
 <!--begin::Food img-->
 <img src="assets/media/stock/food/img-5.jpg%22%20class=%22rounded-3%20mb-4%20w-150px%20h-150px%20w-xxl-200px%20h-xxl-200px%22%20alt=%22" class="w-100" alt="">
 <!--end::Food img-->
 <!--begin::Info-->
 <div class="mb-2">
 <!--begin::Title-->
 <div class="text-center">
 <span class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-3 fs-xl-1">Breakfast</span>
 <span class="text-gray-400 fw-semibold d-block fs-6 mt-n1">16 mins to cook</span>
 </div>
 <!--end::Title-->
 </div>
 <!--end::Info-->
 <!--begin::Total-->
 <span class="text-success text-end fw-bold fs-1">$8.20$</span>
 <!--end::Total-->
 </div>
 <!--end::Body-->
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-flush flex-row-fluid p-6 pb-5 mw-100">
 <!--begin::Body-->
 <div class="card-body text-center">
 <!--begin::Food img-->
 <img src="assets/media/stock/food/img-11.jpg%22%20class=%22rounded-3%20mb-4%20w-150px%20h-150px%20w-xxl-200px%20h-xxl-200px%22%20alt=%22" class="w-100" alt="">
 <!--end::Food img-->
 <!--begin::Info-->
 <div class="mb-2">
 <!--begin::Title-->
 <div class="text-center">
 <span class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-3 fs-xl-1">Sweety</span>
 <span class="text-gray-400 fw-semibold d-block fs-6 mt-n1">16 mins to cook</span>
 </div>
 <!--end::Title-->
 </div>
 <!--end::Info-->
 <!--begin::Total-->
 <span class="text-success text-end fw-bold fs-1">$11.40$</span>
 <!--end::Total-->
 </div>
 <!--end::Body-->
</div>
<!--end::Card-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Tap pane-->
<!--begin::Tap pane-->
<div class="tab-pane fade" id="kt_pos_food_content_2">
<!--begin::Wrapper-->
<div class="d-flex flex-wrap d-grid gap-5 gap-xxl-9">
<!--begin::Card-->
<div class="card card-flush flex-row-fluid p-6 pb-5 mw-100">
 <!--begin::Body-->
 <div class="card-body text-center">
 <!--begin::Food img-->
 <img src="assets/media/stock/food/img-11.jpg%22%20class=%22rounded-3%20mb-4%20w-150px%20h-150px%20w-xxl-200px%20h-xxl-200px%22%20alt=%22" class="w-100" alt="">
 <!--end::Food img-->
 <!--begin::Info-->
 <div class="mb-2">
 <!--begin::Title-->
 <div class="text-center">
 <span class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-3 fs-xl-1">Sweety</span>
 <span class="text-gray-400 fw-semibold d-block fs-6 mt-n1">16 mins to cook</span>
 </div>
 <!--end::Title-->
 </div>
 <!--end::Info-->
 <!--begin::Total-->
 <span class="text-success text-end fw-bold fs-1">$11.40$</span>
 <!--end::Total-->
 </div>
 <!--end::Body-->
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-flush flex-row-fluid p-6 pb-5 mw-100">
 <!--begin::Body-->
 <div class="card-body text-center">
 <!--begin::Food img-->
 <img src="assets/media/stock/food/img-5.jpg%22%20class=%22rounded-3%20mb-4%20w-150px%20h-150px%20w-xxl-200px%20h-xxl-200px%22%20alt=%22" class="w-100" alt="">
 <!--end::Food img-->
 <!--begin::Info-->
 <div class="mb-2">
 <!--begin::Title-->
 <div class="text-center">
 <span class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-3 fs-xl-1">Breakfast</span>
 <span class="text-gray-400 fw-semibold d-block fs-6 mt-n1">16 mins to cook</span>
 </div>
 <!--end::Title-->
 </div>
 <!--end::Info-->
 <!--begin::Total-->
 <span class="text-success text-end fw-bold fs-1">$8.20$</span>
 <!--end::Total-->
 </div>
 <!--end::Body-->
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-flush flex-row-fluid p-6 pb-5 mw-100">
 <!--begin::Body-->
 <div class="card-body text-center">
 <!--begin::Food img-->
 <img src="assets/media/stock/food/img-4.jpg%22%20class=%22rounded-3%20mb-4%20w-150px%20h-150px%20w-xxl-200px%20h-xxl-200px%22%20alt=%22" class="w-100" alt="">
 <!--end::Food img-->
 <!--begin::Info-->
 <div class="mb-2">
 <!--begin::Title-->
 <div class="text-center">
 <span class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-3 fs-xl-1">Chicken Breast</span>
 <span class="text-gray-400 fw-semibold d-block fs-6 mt-n1">16 mins to cook</span>
 </div>
 <!--end::Title-->
 </div>
 <!--end::Info-->
 <!--begin::Total-->
 <span class="text-success text-end fw-bold fs-1">$9.00$</span>
 <!--end::Total-->
 </div>
 <!--end::Body-->
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-flush flex-row-fluid p-6 pb-5 mw-100">
 <!--begin::Body-->
 <div class="card-body text-center">
 <!--begin::Food img-->
 <img src="assets/media/stock/food/img-8.jpg%22%20class=%22rounded-3%20mb-4%20w-150px%20h-150px%20w-xxl-200px%20h-xxl-200px%22%20alt=%22" class="w-100" alt="">
 <!--end::Food img-->
 <!--begin::Info-->
 <div class="mb-2">
 <!--begin::Title-->
 <div class="text-center">
 <span class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-3 fs-xl-1">Ramen</span>
 <span class="text-gray-400 fw-semibold d-block fs-6 mt-n1">16 mins to cook</span>
 </div>
 <!--end::Title-->
 </div>
 <!--end::Info-->
 <!--begin::Total-->
 <span class="text-success text-end fw-bold fs-1">$14.90$</span>
 <!--end::Total-->
 </div>
 <!--end::Body-->
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-flush flex-row-fluid p-6 pb-5 mw-100">
 <!--begin::Body-->
 <div class="card-body text-center">
 <!--begin::Food img-->
 <img src="assets/media/stock/food/img-10.jpg%22%20class=%22rounded-3%20mb-4%20w-150px%20h-150px%20w-xxl-200px%20h-xxl-200px%22%20alt=%22" class="w-100" alt="">
 <!--end::Food img-->
 <!--begin::Info-->
 <div class="mb-2">
 <!--begin::Title-->
 <div class="text-center">
 <span class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-3 fs-xl-1">Tenderlion Steak</span>
 <span class="text-gray-400 fw-semibold d-block fs-6 mt-n1">16 mins to cook</span>
 </div>
 <!--end::Title-->
 </div>
 <!--end::Info-->
 <!--begin::Total-->
 <span class="text-success text-end fw-bold fs-1">$19.00$</span>
 <!--end::Total-->
 </div>
 <!--end::Body-->
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-flush flex-row-fluid p-6 pb-5 mw-100">
 <!--begin::Body-->
 <div class="card-body text-center">
 <!--begin::Food img-->
 <img src="assets/media/stock/food/img-9.jpg%22%20class=%22rounded-3%20mb-4%20w-150px%20h-150px%20w-xxl-200px%20h-xxl-200px%22%20alt=%22" class="w-100" alt="">
 <!--end::Food img-->
 <!--begin::Info-->
 <div class="mb-2">
 <!--begin::Title-->
 <div class="text-center">
 <span class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-3 fs-xl-1">Soup of the Day</span>
 <span class="text-gray-400 fw-semibold d-block fs-6 mt-n1">16 mins to cook</span>
 </div>
 <!--end::Title-->
 </div>
 <!--end::Info-->
 <!--begin::Total-->
 <span class="text-success text-end fw-bold fs-1">$7.50$</span>
 <!--end::Total-->
 </div>
 <!--end::Body-->
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-flush flex-row-fluid p-6 pb-5 mw-100">
 <!--begin::Body-->
 <div class="card-body text-center">
 <!--begin::Food img-->
 <img src="assets/media/stock/food/img-3.jpg%22%20class=%22rounded-3%20mb-4%20w-150px%20h-150px%20w-xxl-200px%20h-xxl-200px%22%20alt=%22" class="w-100" alt="">
 <!--end::Food img-->
 <!--begin::Info-->
 <div class="mb-2">
 <!--begin::Title-->
 <div class="text-center">
 <span class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-3 fs-xl-1">Pancakes</span>
 <span class="text-gray-400 fw-semibold d-block fs-6 mt-n1">16 mins to cook</span>
 </div>
 <!--end::Title-->
 </div>
 <!--end::Info-->
 <!--begin::Total-->
 <span class="text-success text-end fw-bold fs-1">$6.50$</span>
 <!--end::Total-->
 </div>
 <!--end::Body-->
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-flush flex-row-fluid p-6 pb-5 mw-100">
 <!--begin::Body-->
 <div class="card-body text-center">
 <!--begin::Food img-->
 <img src="assets/media/stock/food/img-7.jpg%22%20class=%22rounded-3%20mb-4%20w-150px%20h-150px%20w-xxl-200px%20h-xxl-200px%22%20alt=%22" class="w-100" alt="">
 <!--end::Food img-->
 <!--begin::Info-->
 <div class="mb-2">
 <!--begin::Title-->
 <div class="text-center">
 <span class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-3 fs-xl-1">Chef&rsquo;s Salmon</span>
 <span class="text-gray-400 fw-semibold d-block fs-6 mt-n1">16 mins to cook</span>
 </div>
 <!--end::Title-->
 </div>
 <!--end::Info-->
 <!--begin::Total-->
 <span class="text-success text-end fw-bold fs-1">$12.40$</span>
 <!--end::Total-->
 </div>
 <!--end::Body-->
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-flush flex-row-fluid p-6 pb-5 mw-100">
 <!--begin::Body-->
 <div class="card-body text-center">
 <!--begin::Food img-->
 <img src="assets/media/stock/food/img-2.jpg%22%20class=%22rounded-3%20mb-4%20w-150px%20h-150px%20w-xxl-200px%20h-xxl-200px%22%20alt=%22" class="w-100" alt="">
 <!--end::Food img-->
 <!--begin::Info-->
 <div class="mb-2">
 <!--begin::Title-->
 <div class="text-center">
 <span class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-3 fs-xl-1">T-Bone Stake</span>
 <span class="text-gray-400 fw-semibold d-block fs-6 mt-n1">16 mins to cook</span>
 </div>
 <!--end::Title-->
 </div>
 <!--end::Info-->
 <!--begin::Total-->
 <span class="text-success text-end fw-bold fs-1">$16.50$</span>
 <!--end::Total-->
 </div>
 <!--end::Body-->
</div>
<!--end::Card-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Tap pane-->
<!--begin::Tap pane-->
<div class="tab-pane fade" id="kt_pos_food_content_3">
<!--begin::Wrapper-->
<div class="d-flex flex-wrap d-grid gap-5 gap-xxl-9">
<!--begin::Card-->
<div class="card card-flush flex-row-fluid p-6 pb-5 mw-100">
 <!--begin::Body-->
 <div class="card-body text-center">
 <!--begin::Food img-->
 <img src="assets/media/stock/food/img-5.jpg%22%20class=%22rounded-3%20mb-4%20w-150px%20h-150px%20w-xxl-200px%20h-xxl-200px%22%20alt=%22" class="w-100" alt="">
 <!--end::Food img-->
 <!--begin::Info-->
 <div class="mb-2">
 <!--begin::Title-->
 <div class="text-center">
 <span class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-3 fs-xl-1">Breakfast</span>
 <span class="text-gray-400 fw-semibold d-block fs-6 mt-n1">16 mins to cook</span>
 </div>
 <!--end::Title-->
 </div>
 <!--end::Info-->
 <!--begin::Total-->
 <span class="text-success text-end fw-bold fs-1">$8.20$</span>
 <!--end::Total-->
 </div>
 <!--end::Body-->
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-flush flex-row-fluid p-6 pb-5 mw-100">
 <!--begin::Body-->
 <div class="card-body text-center">
 <!--begin::Food img-->
 <img src="assets/media/stock/food/img-11.jpg%22%20class=%22rounded-3%20mb-4%20w-150px%20h-150px%20w-xxl-200px%20h-xxl-200px%22%20alt=%22" class="w-100" alt="">
 <!--end::Food img-->
 <!--begin::Info-->
 <div class="mb-2">
 <!--begin::Title-->
 <div class="text-center">
 <span class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-3 fs-xl-1">Sweety</span>
 <span class="text-gray-400 fw-semibold d-block fs-6 mt-n1">16 mins to cook</span>
 </div>
 <!--end::Title-->
 </div>
 <!--end::Info-->
 <!--begin::Total-->
 <span class="text-success text-end fw-bold fs-1">$11.40$</span>
 <!--end::Total-->
 </div>
 <!--end::Body-->
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-flush flex-row-fluid p-6 pb-5 mw-100">
 <!--begin::Body-->
 <div class="card-body text-center">
 <!--begin::Food img-->
 <img src="assets/media/stock/food/img-2.jpg%22%20class=%22rounded-3%20mb-4%20w-150px%20h-150px%20w-xxl-200px%20h-xxl-200px%22%20alt=%22" class="w-100" alt="">
 <!--end::Food img-->
 <!--begin::Info-->
 <div class="mb-2">
 <!--begin::Title-->
 <div class="text-center">
 <span class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-3 fs-xl-1">T-Bone Stake</span>
 <span class="text-gray-400 fw-semibold d-block fs-6 mt-n1">16 mins to cook</span>
 </div>
 <!--end::Title-->
 </div>
 <!--end::Info-->
 <!--begin::Total-->
 <span class="text-success text-end fw-bold fs-1">$16.50$</span>
 <!--end::Total-->
 </div>
 <!--end::Body-->
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-flush flex-row-fluid p-6 pb-5 mw-100">
 <!--begin::Body-->
 <div class="card-body text-center">
 <!--begin::Food img-->
 <img src="assets/media/stock/food/img-7.jpg%22%20class=%22rounded-3%20mb-4%20w-150px%20h-150px%20w-xxl-200px%20h-xxl-200px%22%20alt=%22" class="w-100" alt="">
 <!--end::Food img-->
 <!--begin::Info-->
 <div class="mb-2">
 <!--begin::Title-->
 <div class="text-center">
 <span class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-3 fs-xl-1">Chef&rsquo;s Salmon</span>
 <span class="text-gray-400 fw-semibold d-block fs-6 mt-n1">16 mins to cook</span>
 </div>
 <!--end::Title-->
 </div>
 <!--end::Info-->
 <!--begin::Total-->
 <span class="text-success text-end fw-bold fs-1">$12.40$</span>
 <!--end::Total-->
 </div>
 <!--end::Body-->
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-flush flex-row-fluid p-6 pb-5 mw-100">
 <!--begin::Body-->
 <div class="card-body text-center">
 <!--begin::Food img-->
 <img src="assets/media/stock/food/img-4.jpg%22%20class=%22rounded-3%20mb-4%20w-150px%20h-150px%20w-xxl-200px%20h-xxl-200px%22%20alt=%22" class="w-100" alt="">
 <!--end::Food img-->
 <!--begin::Info-->
 <div class="mb-2">
 <!--begin::Title-->
 <div class="text-center">
 <span class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-3 fs-xl-1">Chicken Breast</span>
 <span class="text-gray-400 fw-semibold d-block fs-6 mt-n1">16 mins to cook</span>
 </div>
 <!--end::Title-->
 </div>
 <!--end::Info-->
 <!--begin::Total-->
 <span class="text-success text-end fw-bold fs-1">$9.00$</span>
 <!--end::Total-->
 </div>
 <!--end::Body-->
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-flush flex-row-fluid p-6 pb-5 mw-100">
 <!--begin::Body-->
 <div class="card-body text-center">
 <!--begin::Food img-->
 <img src="assets/media/stock/food/img-8.jpg%22%20class=%22rounded-3%20mb-4%20w-150px%20h-150px%20w-xxl-200px%20h-xxl-200px%22%20alt=%22" class="w-100" alt="">
 <!--end::Food img-->
 <!--begin::Info-->
 <div class="mb-2">
 <!--begin::Title-->
 <div class="text-center">
 <span class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-3 fs-xl-1">Ramen</span>
 <span class="text-gray-400 fw-semibold d-block fs-6 mt-n1">16 mins to cook</span>
 </div>
 <!--end::Title-->
 </div>
 <!--end::Info-->
 <!--begin::Total-->
 <span class="text-success text-end fw-bold fs-1">$14.90$</span>
 <!--end::Total-->
 </div>
 <!--end::Body-->
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-flush flex-row-fluid p-6 pb-5 mw-100">
 <!--begin::Body-->
 <div class="card-body text-center">
 <!--begin::Food img-->
 <img src="assets/media/stock/food/img-9.jpg%22%20class=%22rounded-3%20mb-4%20w-150px%20h-150px%20w-xxl-200px%20h-xxl-200px%22%20alt=%22" class="w-100" alt="">
 <!--end::Food img-->
 <!--begin::Info-->
 <div class="mb-2">
 <!--begin::Title-->
 <div class="text-center">
 <span class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-3 fs-xl-1">Soup of the Day</span>
 <span class="text-gray-400 fw-semibold d-block fs-6 mt-n1">16 mins to cook</span>
 </div>
 <!--end::Title-->
 </div>
 <!--end::Info-->
 <!--begin::Total-->
 <span class="text-success text-end fw-bold fs-1">$7.50$</span>
 <!--end::Total-->
 </div>
 <!--end::Body-->
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-flush flex-row-fluid p-6 pb-5 mw-100">
 <!--begin::Body-->
 <div class="card-body text-center">
 <!--begin::Food img-->
 <img src="assets/media/stock/food/img-10.jpg%22%20class=%22rounded-3%20mb-4%20w-150px%20h-150px%20w-xxl-200px%20h-xxl-200px%22%20alt=%22" class="w-100" alt="">
 <!--end::Food img-->
 <!--begin::Info-->
 <div class="mb-2">
 <!--begin::Title-->
 <div class="text-center">
 <span class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-3 fs-xl-1">Tenderlion Steak</span>
 <span class="text-gray-400 fw-semibold d-block fs-6 mt-n1">16 mins to cook</span>
 </div>
 <!--end::Title-->
 </div>
 <!--end::Info-->
 <!--begin::Total-->
 <span class="text-success text-end fw-bold fs-1">$19.00$</span>
 <!--end::Total-->
 </div>
 <!--end::Body-->
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-flush flex-row-fluid p-6 pb-5 mw-100">
 <!--begin::Body-->
 <div class="card-body text-center">
 <!--begin::Food img-->
 <img src="assets/media/stock/food/img-3.jpg%22%20class=%22rounded-3%20mb-4%20w-150px%20h-150px%20w-xxl-200px%20h-xxl-200px%22%20alt=%22" class="w-100" alt="">
 <!--end::Food img-->
 <!--begin::Info-->
 <div class="mb-2">
 <!--begin::Title-->
 <div class="text-center">
 <span class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-3 fs-xl-1">Pancakes</span>
 <span class="text-gray-400 fw-semibold d-block fs-6 mt-n1">16 mins to cook</span>
 </div>
 <!--end::Title-->
 </div>
 <!--end::Info-->
 <!--begin::Total-->
 <span class="text-success text-end fw-bold fs-1">$6.50$</span>
 <!--end::Total-->
 </div>
 <!--end::Body-->
</div>
<!--end::Card-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Tap pane-->
<!--begin::Tap pane-->
<div class="tab-pane fade" id="kt_pos_food_content_4">
<!--begin::Wrapper-->
<div class="d-flex flex-wrap d-grid gap-5 gap-xxl-9">
<!--begin::Card-->
<div class="card card-flush flex-row-fluid p-6 pb-5 mw-100">
 <!--begin::Body-->
 <div class="card-body text-center">
 <!--begin::Food img-->
 <img src="assets/media/stock/food/img-3.jpg%22%20class=%22rounded-3%20mb-4%20w-150px%20h-150px%20w-xxl-200px%20h-xxl-200px%22%20alt=%22" class="w-100" alt="">
 <!--end::Food img-->
 <!--begin::Info-->
 <div class="mb-2">
 <!--begin::Title-->
 <div class="text-center">
 <span class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-3 fs-xl-1">Pancakes</span>
 <span class="text-gray-400 fw-semibold d-block fs-6 mt-n1">16 mins to cook</span>
 </div>
 <!--end::Title-->
 </div>
 <!--end::Info-->
 <!--begin::Total-->
 <span class="text-success text-end fw-bold fs-1">$6.50$</span>
 <!--end::Total-->
 </div>
 <!--end::Body-->
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-flush flex-row-fluid p-6 pb-5 mw-100">
 <!--begin::Body-->
 <div class="card-body text-center">
 <!--begin::Food img-->
 <img src="assets/media/stock/food/img-5.jpg%22%20class=%22rounded-3%20mb-4%20w-150px%20h-150px%20w-xxl-200px%20h-xxl-200px%22%20alt=%22" class="w-100" alt="">
 <!--end::Food img-->
 <!--begin::Info-->
 <div class="mb-2">
 <!--begin::Title-->
 <div class="text-center">
 <span class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-3 fs-xl-1">Breakfast</span>
 <span class="text-gray-400 fw-semibold d-block fs-6 mt-n1">16 mins to cook</span>
 </div>
 <!--end::Title-->
 </div>
 <!--end::Info-->
 <!--begin::Total-->
 <span class="text-success text-end fw-bold fs-1">$8.20$</span>
 <!--end::Total-->
 </div>
 <!--end::Body-->
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-flush flex-row-fluid p-6 pb-5 mw-100">
 <!--begin::Body-->
 <div class="card-body text-center">
 <!--begin::Food img-->
 <img src="assets/media/stock/food/img-4.jpg%22%20class=%22rounded-3%20mb-4%20w-150px%20h-150px%20w-xxl-200px%20h-xxl-200px%22%20alt=%22" class="w-100" alt="">
 <!--end::Food img-->
 <!--begin::Info-->
 <div class="mb-2">
 <!--begin::Title-->
 <div class="text-center">
 <span class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-3 fs-xl-1">Chicken Breast</span>
 <span class="text-gray-400 fw-semibold d-block fs-6 mt-n1">16 mins to cook</span>
 </div>
 <!--end::Title-->
 </div>
 <!--end::Info-->
 <!--begin::Total-->
 <span class="text-success text-end fw-bold fs-1">$9.00$</span>
 <!--end::Total-->
 </div>
 <!--end::Body-->
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-flush flex-row-fluid p-6 pb-5 mw-100">
 <!--begin::Body-->
 <div class="card-body text-center">
 <!--begin::Food img-->
 <img src="assets/media/stock/food/img-8.jpg%22%20class=%22rounded-3%20mb-4%20w-150px%20h-150px%20w-xxl-200px%20h-xxl-200px%22%20alt=%22" class="w-100" alt="">
 <!--end::Food img-->
 <!--begin::Info-->
 <div class="mb-2">
 <!--begin::Title-->
 <div class="text-center">
 <span class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-3 fs-xl-1">Ramen</span>
 <span class="text-gray-400 fw-semibold d-block fs-6 mt-n1">16 mins to cook</span>
 </div>
 <!--end::Title-->
 </div>
 <!--end::Info-->
 <!--begin::Total-->
 <span class="text-success text-end fw-bold fs-1">$14.90$</span>
 <!--end::Total-->
 </div>
 <!--end::Body-->
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-flush flex-row-fluid p-6 pb-5 mw-100">
 <!--begin::Body-->
 <div class="card-body text-center">
 <!--begin::Food img-->
 <img src="assets/media/stock/food/img-9.jpg%22%20class=%22rounded-3%20mb-4%20w-150px%20h-150px%20w-xxl-200px%20h-xxl-200px%22%20alt=%22" class="w-100" alt="">
 <!--end::Food img-->
 <!--begin::Info-->
 <div class="mb-2">
 <!--begin::Title-->
 <div class="text-center">
 <span class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-3 fs-xl-1">Soup of the Day</span>
 <span class="text-gray-400 fw-semibold d-block fs-6 mt-n1">16 mins to cook</span>
 </div>
 <!--end::Title-->
 </div>
 <!--end::Info-->
 <!--begin::Total-->
 <span class="text-success text-end fw-bold fs-1">$7.50$</span>
 <!--end::Total-->
 </div>
 <!--end::Body-->
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-flush flex-row-fluid p-6 pb-5 mw-100">
 <!--begin::Body-->
 <div class="card-body text-center">
 <!--begin::Food img-->
 <img src="assets/media/stock/food/img-11.jpg%22%20class=%22rounded-3%20mb-4%20w-150px%20h-150px%20w-xxl-200px%20h-xxl-200px%22%20alt=%22" class="w-100" alt="">
 <!--end::Food img-->
 <!--begin::Info-->
 <div class="mb-2">
 <!--begin::Title-->
 <div class="text-center">
 <span class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-3 fs-xl-1">Sweety</span>
 <span class="text-gray-400 fw-semibold d-block fs-6 mt-n1">16 mins to cook</span>
 </div>
 <!--end::Title-->
 </div>
 <!--end::Info-->
 <!--begin::Total-->
 <span class="text-success text-end fw-bold fs-1">$11.40$</span>
 <!--end::Total-->
 </div>
 <!--end::Body-->
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-flush flex-row-fluid p-6 pb-5 mw-100">
 <!--begin::Body-->
 <div class="card-body text-center">
 <!--begin::Food img-->
 <img src="assets/media/stock/food/img-3.jpg%22%20class=%22rounded-3%20mb-4%20w-150px%20h-150px%20w-xxl-200px%20h-xxl-200px%22%20alt=%22" class="w-100" alt="">
 <!--end::Food img-->
 <!--begin::Info-->
 <div class="mb-2">
 <!--begin::Title-->
 <div class="text-center">
 <span class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-3 fs-xl-1">Pancakes</span>
 <span class="text-gray-400 fw-semibold d-block fs-6 mt-n1">16 mins to cook</span>
 </div>
 <!--end::Title-->
 </div>
 <!--end::Info-->
 <!--begin::Total-->
 <span class="text-success text-end fw-bold fs-1">$6.50$</span>
 <!--end::Total-->
 </div>
 <!--end::Body-->
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-flush flex-row-fluid p-6 pb-5 mw-100">
 <!--begin::Body-->
 <div class="card-body text-center">
 <!--begin::Food img-->
 <img src="assets/media/stock/food/img-7.jpg%22%20class=%22rounded-3%20mb-4%20w-150px%20h-150px%20w-xxl-200px%20h-xxl-200px%22%20alt=%22" class="w-100" alt="">
 <!--end::Food img-->
 <!--begin::Info-->
 <div class="mb-2">
 <!--begin::Title-->
 <div class="text-center">
 <span class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-3 fs-xl-1">Chef&rsquo;s Salmon</span>
 <span class="text-gray-400 fw-semibold d-block fs-6 mt-n1">16 mins to cook</span>
 </div>
 <!--end::Title-->
 </div>
 <!--end::Info-->
 <!--begin::Total-->
 <span class="text-success text-end fw-bold fs-1">$12.40$</span>
 <!--end::Total-->
 </div>
 <!--end::Body-->
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-flush flex-row-fluid p-6 pb-5 mw-100">
 <!--begin::Body-->
 <div class="card-body text-center">
 <!--begin::Food img-->
 <img src="assets/media/stock/food/img-10.jpg%22%20class=%22rounded-3%20mb-4%20w-150px%20h-150px%20w-xxl-200px%20h-xxl-200px%22%20alt=%22" class="w-100" alt="">
 <!--end::Food img-->
 <!--begin::Info-->
 <div class="mb-2">
 <!--begin::Title-->
 <div class="text-center">
 <span class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-3 fs-xl-1">Tenderlion Steak</span>
 <span class="text-gray-400 fw-semibold d-block fs-6 mt-n1">16 mins to cook</span>
 </div>
 <!--end::Title-->
 </div>
 <!--end::Info-->
 <!--begin::Total-->
 <span class="text-success text-end fw-bold fs-1">$19.00$</span>
 <!--end::Total-->
 </div>
 <!--end::Body-->
</div>
<!--end::Card-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Tap pane-->
<!--begin::Tap pane-->
<div class="tab-pane fade" id="kt_pos_food_content_5">
<!--begin::Wrapper-->
<div class="d-flex flex-wrap d-grid gap-5 gap-xxl-9">
<!--begin::Card-->
<div class="card card-flush flex-row-fluid p-6 pb-5 mw-100">
 <!--begin::Body-->
 <div class="card-body text-center">
 <!--begin::Food img-->
 <img src="assets/media/stock/food/img-10.jpg%22%20class=%22rounded-3%20mb-4%20w-150px%20h-150px%20w-xxl-200px%20h-xxl-200px%22%20alt=%22" class="w-100" alt="">
 <!--end::Food img-->
 <!--begin::Info-->
 <div class="mb-2">
 <!--begin::Title-->
 <div class="text-center">
 <span class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-3 fs-xl-1">Tenderlion Steak</span>
 <span class="text-gray-400 fw-semibold d-block fs-6 mt-n1">16 mins to cook</span>
 </div>
 <!--end::Title-->
 </div>
 <!--end::Info-->
 <!--begin::Total-->
 <span class="text-success text-end fw-bold fs-1">$19.00$</span>
 <!--end::Total-->
 </div>
 <!--end::Body-->
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-flush flex-row-fluid p-6 pb-5 mw-100">
 <!--begin::Body-->
 <div class="card-body text-center">
 <!--begin::Food img-->
 <img src="assets/media/stock/food/img-5.jpg%22%20class=%22rounded-3%20mb-4%20w-150px%20h-150px%20w-xxl-200px%20h-xxl-200px%22%20alt=%22" class="w-100" alt="">
 <!--end::Food img-->
 <!--begin::Info-->
 <div class="mb-2">
 <!--begin::Title-->
 <div class="text-center">
 <span class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-3 fs-xl-1">Breakfast</span>
 <span class="text-gray-400 fw-semibold d-block fs-6 mt-n1">16 mins to cook</span>
 </div>
 <!--end::Title-->
 </div>
 <!--end::Info-->
 <!--begin::Total-->
 <span class="text-success text-end fw-bold fs-1">$8.20$</span>
 <!--end::Total-->
 </div>
 <!--end::Body-->
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-flush flex-row-fluid p-6 pb-5 mw-100">
 <!--begin::Body-->
 <div class="card-body text-center">
 <!--begin::Food img-->
 <img src="assets/media/stock/food/img-4.jpg%22%20class=%22rounded-3%20mb-4%20w-150px%20h-150px%20w-xxl-200px%20h-xxl-200px%22%20alt=%22" class="w-100" alt="">
 <!--end::Food img-->
 <!--begin::Info-->
 <div class="mb-2">
 <!--begin::Title-->
 <div class="text-center">
 <span class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-3 fs-xl-1">Chicken Breast</span>
 <span class="text-gray-400 fw-semibold d-block fs-6 mt-n1">16 mins to cook</span>
 </div>
 <!--end::Title-->
 </div>
 <!--end::Info-->
 <!--begin::Total-->
 <span class="text-success text-end fw-bold fs-1">$9.00$</span>
 <!--end::Total-->
 </div>
 <!--end::Body-->
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-flush flex-row-fluid p-6 pb-5 mw-100">
 <!--begin::Body-->
 <div class="card-body text-center">
 <!--begin::Food img-->
 <img src="assets/media/stock/food/img-3.jpg%22%20class=%22rounded-3%20mb-4%20w-150px%20h-150px%20w-xxl-200px%20h-xxl-200px%22%20alt=%22" class="w-100" alt="">
 <!--end::Food img-->
 <!--begin::Info-->
 <div class="mb-2">
 <!--begin::Title-->
 <div class="text-center">
 <span class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-3 fs-xl-1">Pancakes</span>
 <span class="text-gray-400 fw-semibold d-block fs-6 mt-n1">16 mins to cook</span>
 </div>
 <!--end::Title-->
 </div>
 <!--end::Info-->
 <!--begin::Total-->
 <span class="text-success text-end fw-bold fs-1">$6.50$</span>
 <!--end::Total-->
 </div>
 <!--end::Body-->
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-flush flex-row-fluid p-6 pb-5 mw-100">
 <!--begin::Body-->
 <div class="card-body text-center">
 <!--begin::Food img-->
 <img src="assets/media/stock/food/img-2.jpg%22%20class=%22rounded-3%20mb-4%20w-150px%20h-150px%20w-xxl-200px%20h-xxl-200px%22%20alt=%22" class="w-100" alt="">
 <!--end::Food img-->
 <!--begin::Info-->
 <div class="mb-2">
 <!--begin::Title-->
 <div class="text-center">
 <span class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-3 fs-xl-1">T-Bone Stake</span>
 <span class="text-gray-400 fw-semibold d-block fs-6 mt-n1">16 mins to cook</span>
 </div>
 <!--end::Title-->
 </div>
 <!--end::Info-->
 <!--begin::Total-->
 <span class="text-success text-end fw-bold fs-1">$16.50$</span>
 <!--end::Total-->
 </div>
 <!--end::Body-->
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-flush flex-row-fluid p-6 pb-5 mw-100">
 <!--begin::Body-->
 <div class="card-body text-center">
 <!--begin::Food img-->
 <img src="assets/media/stock/food/img-7.jpg%22%20class=%22rounded-3%20mb-4%20w-150px%20h-150px%20w-xxl-200px%20h-xxl-200px%22%20alt=%22" class="w-100" alt="">
 <!--end::Food img-->
 <!--begin::Info-->
 <div class="mb-2">
 <!--begin::Title-->
 <div class="text-center">
 <span class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-3 fs-xl-1">Chef&rsquo;s Salmon</span>
 <span class="text-gray-400 fw-semibold d-block fs-6 mt-n1">16 mins to cook</span>
 </div>
 <!--end::Title-->
 </div>
 <!--end::Info-->
 <!--begin::Total-->
 <span class="text-success text-end fw-bold fs-1">$12.40$</span>
 <!--end::Total-->
 </div>
 <!--end::Body-->
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-flush flex-row-fluid p-6 pb-5 mw-100">
 <!--begin::Body-->
 <div class="card-body text-center">
 <!--begin::Food img-->
 <img src="assets/media/stock/food/img-8.jpg%22%20class=%22rounded-3%20mb-4%20w-150px%20h-150px%20w-xxl-200px%20h-xxl-200px%22%20alt=%22" class="w-100" alt="">
 <!--end::Food img-->
 <!--begin::Info-->
 <div class="mb-2">
 <!--begin::Title-->
 <div class="text-center">
 <span class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-3 fs-xl-1">Ramen</span>
 <span class="text-gray-400 fw-semibold d-block fs-6 mt-n1">16 mins to cook</span>
 </div>
 <!--end::Title-->
 </div>
 <!--end::Info-->
 <!--begin::Total-->
 <span class="text-success text-end fw-bold fs-1">$14.90$</span>
 <!--end::Total-->
 </div>
 <!--end::Body-->
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-flush flex-row-fluid p-6 pb-5 mw-100">
 <!--begin::Body-->
 <div class="card-body text-center">
 <!--begin::Food img-->
 <img src="assets/media/stock/food/img-9.jpg%22%20class=%22rounded-3%20mb-4%20w-150px%20h-150px%20w-xxl-200px%20h-xxl-200px%22%20alt=%22" class="w-100" alt="">
 <!--end::Food img-->
 <!--begin::Info-->
 <div class="mb-2">
 <!--begin::Title-->
 <div class="text-center">
 <span class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-3 fs-xl-1">Soup of the Day</span>
 <span class="text-gray-400 fw-semibold d-block fs-6 mt-n1">16 mins to cook</span>
 </div>
 <!--end::Title-->
 </div>
 <!--end::Info-->
 <!--begin::Total-->
 <span class="text-success text-end fw-bold fs-1">$7.50$</span>
 <!--end::Total-->
 </div>
 <!--end::Body-->
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-flush flex-row-fluid p-6 pb-5 mw-100">
 <!--begin::Body-->
 <div class="card-body text-center">
 <!--begin::Food img-->
 <img src="assets/media/stock/food/img-11.jpg%22%20class=%22rounded-3%20mb-4%20w-150px%20h-150px%20w-xxl-200px%20h-xxl-200px%22%20alt=%22" class="w-100" alt="">
 <!--end::Food img-->
 <!--begin::Info-->
 <div class="mb-2">
 <!--begin::Title-->
 <div class="text-center">
 <span class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-3 fs-xl-1">Sweety</span>
 <span class="text-gray-400 fw-semibold d-block fs-6 mt-n1">16 mins to cook</span>
 </div>
 <!--end::Title-->
 </div>
 <!--end::Info-->
 <!--begin::Total-->
 <span class="text-success text-end fw-bold fs-1">$11.40$</span>
 <!--end::Total-->
 </div>
 <!--end::Body-->
</div>
<!--end::Card-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Tap pane-->
</div>
<!--end::Tab Content-->
</div>
<!--end: Card Body-->
</div>
<!--end::Pos food-->
</div>
<!--end::Content-->
<!--begin::Sidebar-->
<div class="flex-row-auto w-xl-425px">
<!--begin::Pos order-->
<div class="card card-flush bg-body" id="kt_pos_form">
<!--begin::Header-->
<div class="card-header pt-5">
 <h3 class="card-title fw-bold text-gray-800 fs-2qx">Current Order
 <!--begin::Toolbar-->
 <div class="card-toolbar">
 <a href="#%22%20class=%22btn%20btn-light-primary%20fs-4%20fw-bold%20py-4" target="_blank">Clear All</a>
 </div>
 <!--end::Toolbar-->
</div>
<!--end::Header-->
<!--begin::Body-->
<div class="card-body pt-0">
 <!--begin::Table container-->
 <div class="table-responsive mb-8">
 <!--begin::Table-->
 <table class="table align-middle gs-0 gy-4 my-0">
 <!--begin::Table head-->
 <thead>
 <tr>
 <th class="min-w-175px"></th>
 <th class="w-125px"></th>
 <th class="w-60px"></th>
 </tr>
 </thead>
 <!--end::Table head-->
 <!--begin::Table body-->
 <tbody>
 <tr data-kt-pos-element="item" data-kt-pos-item-price="33">
 <td class="pe-0">
 <div class="d-flex align-items-center">
 <img src="assets/media/stock/food/img-2.jpg%22%20class=%22w-50px%20h-50px%20rounded-3%20me-3%22%20alt=%22" class="w-100" alt="">
 <span class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-6 me-1">T-Bone Stake</span>
 </div>
 </td>
 <td class="pe-0">
 <!--begin::Dialer-->
 <div class="position-relative d-flex align-items-center" data-kt-dialer="true" data-kt-dialer-min="1" data-kt-dialer-max="10" data-kt-dialer-step="1" data-kt-dialer-decimals="0">
 <!--begin::Decrease control-->
 <button type="button" class="btn btn-icon btn-sm btn-light btn-icon-gray-400" data-kt-dialer-control="decrease">
 <i class="ki-duotone ki-minus fs-3x"></i>
 </button>
 <!--end::Decrease control-->
 <!--begin::Input control-->
 <input type="text" class="form-control border-0 text-center px-0 fs-3 fw-bold text-gray-800 w-30px" data-kt-dialer-control="input" placeholder="Amount" name="manageBudget" readonly="readonly" value="2"/>
 <!--end::Input control-->
 <!--begin::Increase control-->
 <button type="button" class="btn btn-icon btn-sm btn-light btn-icon-gray-400" data-kt-dialer-control="increase">
 <i class="ki-duotone ki-plus fs-3x"></i>
 </button>
 <!--end::Increase control-->
 </div>
 <!--end::Dialer-->
 </td>
 <td class="text-end">
 <span class="fw-bold text-primary fs-2" data-kt-pos-element="item-total">$66.00</span>
 </td>
 </tr>
 <tr data-kt-pos-element="item" data-kt-pos-item-price="7.5">
 <td class="pe-0">
 <div class="d-flex align-items-center">
 <img src="assets/media/stock/food/img-9.jpg%22%20class=%22w-50px%20h-50px%20rounded-3%20me-3%22%20alt=%22" class="w-100" alt="">
 <span class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-6 me-1">Soup of the Day</span>
 </div>
 </td>
 <td class="pe-0">
 <!--begin::Dialer-->
 <div class="position-relative d-flex align-items-center" data-kt-dialer="true" data-kt-dialer-min="1" data-kt-dialer-max="10" data-kt-dialer-step="1" data-kt-dialer-decimals="0">
 <!--begin::Decrease control-->
 <button type="button" class="btn btn-icon btn-sm btn-light btn-icon-gray-400" data-kt-dialer-control="decrease">
 <i class="ki-duotone ki-minus fs-3x"></i>
 </button>
 <!--end::Decrease control-->
 <!--begin::Input control-->
 <input type="text" class="form-control border-0 text-center px-0 fs-3 fw-bold text-gray-800 w-30px" data-kt-dialer-control="input" placeholder="Amount" name="manageBudget" readonly="readonly" value="1"/>
 <!--end::Input control-->
 <!--begin::Increase control-->
 <button type="button" class="btn btn-icon btn-sm btn-light btn-icon-gray-400" data-kt-dialer-control="increase">
 <i class="ki-duotone ki-plus fs-3x"></i>
 </button>
 <!--end::Increase control-->
 </div>
 <!--end::Dialer-->
 </td>
 <td class="text-end">
 <span class="fw-bold text-primary fs-2" data-kt-pos-element="item-total">$7.50</span>
 </td>
 </tr>
 <tr data-kt-pos-element="item" data-kt-pos-item-price="13.5">
 <td class="pe-0">
 <div class="d-flex align-items-center">
 <img src="assets/media/stock/food/img-3.jpg%22%20class=%22w-50px%20h-50px%20rounded-3%20me-3%22%20alt=%22" class="w-100" alt="">
 <span class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-6 me-1">Pancakes</span>
 </div>
 </td>
 <td class="pe-0">
 <!--begin::Dialer-->
 <div class="position-relative d-flex align-items-center" data-kt-dialer="true" data-kt-dialer-min="1" data-kt-dialer-max="10" data-kt-dialer-step="1" data-kt-dialer-decimals="0">
 <!--begin::Decrease control-->
 <button type="button" class="btn btn-icon btn-sm btn-light btn-icon-gray-400" data-kt-dialer-control="decrease">
 <i class="ki-duotone ki-minus fs-3x"></i>
 </button>
 <!--end::Decrease control-->
 <!--begin::Input control-->
 <input type="text" class="form-control border-0 text-center px-0 fs-3 fw-bold text-gray-800 w-30px" data-kt-dialer-control="input" placeholder="Amount" name="manageBudget" readonly="readonly" value="2"/>
 <!--end::Input control-->
 <!--begin::Increase control-->
 <button type="button" class="btn btn-icon btn-sm btn-light btn-icon-gray-400" data-kt-dialer-control="increase">
 <i class="ki-duotone ki-plus fs-3x"></i>
 </button>
 <!--end::Increase control-->
 </div>
 <!--end::Dialer-->
 </td>
 <td class="text-end">
 <span class="fw-bold text-primary fs-2" data-kt-pos-element="item-total">$27.00</span>
 </td>
 </tr>
 </tbody>
 <!--end::Table body-->
 </table>
 <!--end::Table-->
 </div>
 <!--end::Table container-->
 <!--begin::Summary-->
 <div class="d-flex flex-stack bg-success rounded-3 p-6 mb-11">
 <!--begin::Content-->
 <div class="fs-6 fw-bold text-white">
 <span class="d-block lh-1 mb-2">Subtotal</span>
 <span class="d-block mb-2">Discounts</span>
 <span class="d-block mb-9">Tax(12%)</span>
 <span class="d-block fs-2qx lh-1">Total</span>
 </div>
 <!--end::Content-->
 <!--begin::Content-->
 <div class="fs-6 fw-bold text-white text-end">
 <span class="d-block lh-1 mb-2" data-kt-pos-element="total">$100.50</span>
 <span class="d-block mb-2" data-kt-pos-element="discount">-$8.00</span>
 <span class="d-block mb-9" data-kt-pos-element="tax">$11.20</span>
 <span class="d-block fs-2qx lh-1" data-kt-pos-element="grant-total">$93.46</span>
 </div>
 <!--end::Content-->
 </div>
 <!--end::Summary-->
 <!--begin::Payment Method-->
 <div class="m-0">
 <!--begin::Title-->
 <h1 class="fw-bold text-gray-800 mb-5">Payment Method</h1>
 <!--end::Title-->
 <!--begin::Radio group-->
 <div class="d-flex flex-equal gap-5 gap-xxl-9 px-0 mb-12" data-kt-buttons="true" data-kt-buttons-target="[data-kt-button]">
 <!--begin::Radio-->
 <label class="btn bg-light btn-color-gray-600 btn-active-text-gray-800 border border-3 border-gray-100 border-active-primary btn-active-light-primary w-100 px-4" data-kt-button="true">
 <!--begin::Input-->
 <input class="btn-check" type="radio" name="method" value="0"/>
 <!--end::Input-->
 <!--begin::Icon-->
 <i class="ki-duotone ki-dollar fs-2hx mb-2 pe-0">
 <span class="path1"></span>
 <span class="path2"></span>
 <span class="path3"></span>
 </i>
 <!--end::Icon-->
 <!--begin::Title-->
 <span class="fs-7 fw-bold d-block">Cash</span>
 <!--end::Title-->
 </label>
 <!--end::Radio-->
 <!--begin::Radio-->
 <label class="btn bg-light btn-color-gray-600 btn-active-text-gray-800 border border-3 border-gray-100 border-active-primary btn-active-light-primary w-100 px-4 active" data-kt-button="true">
 <!--begin::Input-->
 <input class="btn-check" type="radio" name="method" value="1"/>
 <!--end::Input-->
 <!--begin::Icon-->
 <i class="ki-duotone ki-credit-cart fs-2hx mb-2 pe-0">
 <span class="path1"></span>
 <span class="path2"></span>
 </i>
 <!--end::Icon-->
 <!--begin::Title-->
 <span class="fs-7 fw-bold d-block">Card</span>
 <!--end::Title-->
 </label>
 <!--end::Radio-->
 <!--begin::Radio-->
 <label class="btn bg-light btn-color-gray-600 btn-active-text-gray-800 border border-3 border-gray-100 border-active-primary btn-active-light-primary w-100 px-4" data-kt-button="true">
 <!--begin::Input-->
 <input class="btn-check" type="radio" name="method" value="2"/>
 <!--end::Input-->
 <!--begin::Icon-->
 <i class="ki-duotone ki-paypal fs-2hx mb-2 pe-0">
 <span class="path1"></span>
 <span class="path2"></span>
 </i>
 <!--end::Icon-->
 <!--begin::Title-->
 <span class="fs-7 fw-bold d-block">E-Wallet</span>
 <!--end::Title-->
 </label>
 <!--end::Radio-->
 </div>
 <!--end::Radio group-->
 <!--begin::Actions-->
 <button class="btn btn-primary fs-1 w-100 py-4">Print Bills</button>
 <!--end::Actions-->
 </div>
 <!--end::Payment Method-->
</div>
<!--end: Card Body-->
</div>
<!--end::Pos order-->
</div>
<!--end::Sidebar-->
</div>
<!--end::Layout-->


user
SasukeK93 11 months ago
HTML Blazor
3 Answers
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)

user
Lauris Stepanovs Author11 months ago

Hi,

Thank you for reaching out to us.

I'm assuming this is a problem with the content container class, you can fix this issue by changing container-fluid to container-xxl in your layout file.

Regards,
Lauris Stepanovs,
Keenthemes Support Team


user
SasukeK93 11 months ago

Hi Lauris

Yep, that was exactly the issue happy
Thank you for the fast response and solution, that indeed fix my problem.

Best regards


user
Lauris Stepanovs Author11 months ago

Hi,

Glad to hear that. All the best with your project!

Please don't hesitate to reach out if you need anything more from us.

Regards,
Lauris Stepanovs,
Keenthemes Support Team


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(