@extends('frontend.layouts.app')
@push('meta')
<meta property="og:url" content="{{ route('home') }}" />
<meta property="og:type" content="FoodBank" />
<meta property="og:title" content="{{ setting('site_description') }}">
<meta name="viewport" content="width=device-width, initial-scale=1">
@endpush
@section('styles')
    <link href="{{ asset('frontend/css/bootstrap.css') }}" type="text/css" rel="stylesheet">
    <link rel="stylesheet" href="{{asset('themes/css/style.css')}}">
    <link href="{{ asset('frontend/fonts/fontawesome/css/all.min.css') }}" type="text/css" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('assets/modules/izitoast/dist/css/iziToast.min.css') }}">
    <link rel="stylesheet" href="{{ asset('themes/css/custom.css') }}">

    <style type="text/css">
    .work_bxleft {
        background:var(--background);
    }
    .salad_one_top {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid var(--headerDivideColor);
        margin-bottom: 30px;
    }
    .salad_one_top{

    }
    .productname {
        color:var(--cardTextColor);
    }
    .nopad {
    padding-left: 0 !important;
    padding-right: 0 !important;
    }
    /*image gallery*/
    .image-checkbox {
        cursor: pointer;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        border: 8px solid transparent;
        margin-bottom: 0;
        outline: 0;
        padding: 10px;
        border-radius: 100%;
    }
    .image-checkbox input[type="checkbox"] {
        display: none;
    }

    .image-checkbox-checked {
        border-color: #F69052;
    }
    .list_bx img.img-responsive {
        border-radius: 100%;
    }
    .image-checkbox .fa {
        position: absolute;
        color: #000000;
        background-color: #F69052;
        padding: 10px;
        top: 0;
        right: 36px;
        border-radius: 100%;
    }
    .image-checkbox-checked .fa {
      display: block !important;
    }
    .list_bx {
    margin-bottom: 30px;
    margin-left: 15px;
    margin-right: 15px;
    }
    .custom_orderlist_head {
        border-bottom: 1px solid #b1b1b1;
        padding-bottom: 10px;
        margin-bottom: 30px;
    }
    .custom_orderlist_head a{
      color:var(--cardTextColor);
    }
    li.space-x-2 {
        margin-bottom: 15px;
        color:var(--cardTextColor);
        font-size: 17px;
        font-weight: 600;
    }
    /* Hide scrollbar for Chrome, Safari and Opera */
    .work_bxleft::-webkit-scrollbar {
      display: none;
    }

    /* Hide scrollbar for IE, Edge and Firefox */
    .work_bxleft {
      -ms-overflow-style: none;  /* IE and Edge */
      scrollbar-width: none;  /* Firefox */
    }
    
    
@media screen and (max-width: 767px) {
  .salad_one_top {
    display: block !important;
    justify-content: space-between;
    border-bottom: 1px solid #000;
    margin-bottom: 30px;
}

}
 
</style>
@section('main-content')
<section class="ModulesContainer_modulesBlock__dxsT6" style="--grid-template-xs:&quot;first&quot; &quot;second&quot; &quot;third&quot; &quot;fourth&quot; &quot;fifth&quot;;--grid-template-s:&quot;first&quot; &quot;second&quot; &quot;third&quot; &quot;fourth&quot; &quot;fifth&quot;;--grid-template-m:&quot;first&quot; &quot;second&quot; &quot;third&quot; &quot;fourth&quot; &quot;fifth&quot;;--grid-template-l:&quot;first&quot; &quot;second&quot; &quot;third&quot; &quot;fourth&quot; &quot;fifth&quot;;--grid-template-xl:&quot;first&quot; &quot;second&quot; &quot;third&quot; &quot;fourth&quot; &quot;fifth&quot;">

    <welcome id="{{$id}}"></welcome> 

</section>
@endsection
@section('extra-js')
@endsection