<div class="card mb-3">


    <div class="all-shimmer-wrapper ">

        <div class="d-block">

            <!-- Sort by shimmer -->
            <div class="shimmer-wrapper mb-3">

                <div class="flex-center gap-2 mb-1">

                    <div class="w-20px h-20px border-radius-lg overflow-hidden">
                        <div class="shimmer"></div>
                    </div>

                    <div class="w-100 h-15px border-radius-sm overflow-hidden">
                        <div class="shimmer"></div>
                    </div>

                </div>

                <div class="flex-center gap-2 mb-1">

                    <div class="w-20px h-20px border-radius-lg overflow-hidden">
                        <div class="shimmer"></div>
                    </div>

                    <div class="w-100 h-15px border-radius-sm overflow-hidden">
                        <div class="shimmer"></div>
                    </div>

                </div>

                <div class="flex-center gap-2">

                    <div class="w-20px h-20px border-radius-lg overflow-hidden">
                        <div class="shimmer"></div>
                    </div>

                    <div class="w-100 h-15px border-radius-sm overflow-hidden">
                        <div class="shimmer"></div>
                    </div>

                </div>

            </div>

            <!-- Select Filter shimmer -->
            <div class="shimmer-wrapper mb-3">

                <div class="flex-start gap-2 mb-2">

                    <div class="w-25 h-30px border-radius-sm overflow-hidden">
                        <div class="shimmer"></div>
                    </div>
                    <div class="w-25 h-30px border-radius-sm overflow-hidden">
                        <div class="shimmer"></div>
                    </div>
                    <div class="w-25 h-30px border-radius-sm overflow-hidden">
                        <div class="shimmer"></div>
                    </div>
                    <div class="w-25 h-30px border-radius-sm overflow-hidden">
                        <div class="shimmer"></div>
                    </div>

                </div>

                <div class="flex-start gap-2">

                    <div class="w-25 h-30px border-radius-sm overflow-hidden">
                        <div class="shimmer"></div>
                    </div>
                    <div class="w-25 h-30px border-radius-sm overflow-hidden">
                        <div class="shimmer"></div>
                    </div>
                    <div class="w-25 h-30px border-radius-sm overflow-hidden">
                        <div class="shimmer"></div>
                    </div>
                    <div class="w-25 h-30px border-radius-sm overflow-hidden">
                        <div class="shimmer"></div>
                    </div>

                </div>


            </div>


            <!-- Checkbox Filter shimmer -->
            <div class="shimmer-wrapper mb-3">

                <div class="flex-center gap-2 mb-1">

                    <div class="w-20px h-20px border-radius-xs overflow-hidden">
                        <div class="shimmer"></div>
                    </div>

                    <div class="w-100 h-15px border-radius-sm overflow-hidden">
                        <div class="shimmer"></div>
                    </div>

                </div>

                <div class="flex-center gap-2 mb-1">

                    <div class="w-20px h-20px border-radius-xs overflow-hidden">
                        <div class="shimmer"></div>
                    </div>

                    <div class="w-100 h-15px border-radius-sm overflow-hidden">
                        <div class="shimmer"></div>
                    </div>

                </div>

                <div class="flex-center gap-2">

                    <div class="w-20px h-20px border-radius-xs overflow-hidden">
                        <div class="shimmer"></div>
                    </div>

                    <div class="w-100 h-15px border-radius-sm overflow-hidden">
                        <div class="shimmer"></div>
                    </div>

                </div>

            </div>

            <!-- Radio Filter shimmer -->
            <div class="shimmer-wrapper mb-3">

                <div class="flex-center gap-2 mb-1">

                    <div class="w-20px h-20px border-radius-lg overflow-hidden">
                        <div class="shimmer"></div>
                    </div>

                    <div class="w-100 h-15px border-radius-sm overflow-hidden">
                        <div class="shimmer"></div>
                    </div>

                </div>

                <div class="flex-center gap-2 mb-1">

                    <div class="w-20px h-20px border-radius-lg overflow-hidden">
                        <div class="shimmer"></div>
                    </div>

                    <div class="w-100 h-15px border-radius-sm overflow-hidden">
                        <div class="shimmer"></div>
                    </div>

                </div>

                <div class="flex-center gap-2">

                    <div class="w-20px h-20px border-radius-lg overflow-hidden">
                        <div class="shimmer"></div>
                    </div>

                    <div class="w-100 h-15px border-radius-sm overflow-hidden">
                        <div class="shimmer"></div>
                    </div>

                </div>

            </div>

            <!-- Colors Filter shimmer -->
            <div class="shimmer-wrapper mb-3">

                <div class="flex-start gap-2 mb-2">

                    <div class="w-25 h-20px border-radius-xs overflow-hidden">
                        <div class="shimmer"></div>
                    </div>
                    <div class="w-25 h-20px border-radius-xs overflow-hidden">
                        <div class="shimmer"></div>
                    </div>
                    <div class="w-25 h-20px border-radius-xs overflow-hidden">
                        <div class="shimmer"></div>
                    </div>
                    <div class="w-25 h-20px border-radius-xs overflow-hidden">
                        <div class="shimmer"></div>
                    </div>

                </div>


                <div class="flex-start gap-2 mb-2">

                    <div class="w-25 h-20px border-radius-xs overflow-hidden">
                        <div class="shimmer"></div>
                    </div>
                    <div class="w-25 h-20px border-radius-xs overflow-hidden">
                        <div class="shimmer"></div>
                    </div>
                    <div class="w-25 h-20px border-radius-xs overflow-hidden">
                        <div class="shimmer"></div>
                    </div>
                    <div class="w-25 h-20px border-radius-xs overflow-hidden">
                        <div class="shimmer"></div>
                    </div>

                </div>



            </div>


            <!-- Price Filter shimmer -->
            <div class="shimmer-wrapper">

                <div class="flex-start gap-2 mb-2">

                    <div class="w-50 h-35px border-radius-xs overflow-hidden">
                        <div class="shimmer"></div>
                    </div>

                    <div class="w-50 h-35px border-radius-xs overflow-hidden">
                        <div class="shimmer"></div>
                    </div>

                </div>

                <div class="flex-start gap-2 mb-2">
                    <div class="w-100 h-15px border-radius-xs overflow-hidden">
                        <div class="shimmer"></div>
                    </div>
                </div>



            </div>

        </div>

    </div>


    <p class="card-title"> Sort by </p>

    <div class="card-body">

        <div class="d-block">

            <div class="shimmer-wrapper">

                <div class="flex-center gap-2 mb-1">

                    <div class="w-20px h-20px border-radius-lg overflow-hidden">
                        <div class="shimmer"></div>
                    </div>

                    <div class="w-100 h-15px border-radius-sm overflow-hidden">
                        <div class="shimmer"></div>
                    </div>

                </div>

                <div class="flex-center gap-2 mb-1">

                    <div class="w-20px h-20px border-radius-lg overflow-hidden">
                        <div class="shimmer"></div>
                    </div>

                    <div class="w-100 h-15px border-radius-sm overflow-hidden">
                        <div class="shimmer"></div>
                    </div>

                </div>

                <div class="flex-center gap-2">

                    <div class="w-20px h-20px border-radius-lg overflow-hidden">
                        <div class="shimmer"></div>
                    </div>

                    <div class="w-100 h-15px border-radius-sm overflow-hidden">
                        <div class="shimmer"></div>
                    </div>

                </div>

            </div>

            <div class="custom-control custom-radio">
                <input type="radio" id="sortBy1" name="sortBy" class="custom-control-input" checked>
                <label class="custom-control-label color-gray font-light mb-1" for="sortBy1"> Newest </label>
            </div>

            <div class="custom-control custom-radio">
                <input type="radio" id="sortBy2" name="sortBy" class="custom-control-input">
                <label class="custom-control-label color-gray font-light mb-1" for="sortBy2">Price : Highest to low</label>
            </div>

            <div class="custom-control custom-radio">
                <input type="radio" id="sortBy3" name="sortBy" class="custom-control-input">
                <label class="custom-control-label color-gray font-light mb-1" for="sortBy3">Price : Lowest to High</label>
            </div>

            <div class="custom-control custom-radio">
                <input type="radio" id="sortBy4" name="sortBy" class="custom-control-input">
                <label class="custom-control-label color-gray font-light mb-1" for="sortBy4">Rate : Highest to low</label>
            </div>

            <div class="custom-control custom-radio">
                <input type="radio" id="sortBy5" name="sortBy" class="custom-control-input">
                <label class="custom-control-label color-gray font-light" for="sortBy5">Rate : Lowest to High</label>
            </div>

        </div>

        <hr class="mt-3 mb-0" />

        <div class="d-block">

            <div class="custom-accordion">

                <div class="accordion-item">
                    <div class="accordion-item-header">
                        <button class="accordion-button" data-toggle="collapse" data-target="#collapseOne">
                            <p class="m-0 lead font-medium"> Select Filter <span class="small color-primary"> 3 selected </span> </p>
                            <i class="accordion-button-icon icon icon-chevron-bottom"></i>
                        </button>
                    </div>

                    <div id="collapseOne" class="collapse show" data-parent="#accordion">

                        <div class="accordion-item-body">


                            <div class="shimmer-wrapper">

                                <div class="flex-start gap-2 mb-2">

                                    <div class="w-25 h-30px border-radius-sm overflow-hidden">
                                        <div class="shimmer"></div>
                                    </div>
                                    <div class="w-25 h-30px border-radius-sm overflow-hidden">
                                        <div class="shimmer"></div>
                                    </div>
                                    <div class="w-25 h-30px border-radius-sm overflow-hidden">
                                        <div class="shimmer"></div>
                                    </div>
                                    <div class="w-25 h-30px border-radius-sm overflow-hidden">
                                        <div class="shimmer"></div>
                                    </div>

                                </div>

                                <div class="flex-start gap-2">

                                    <div class="w-25 h-30px border-radius-sm overflow-hidden">
                                        <div class="shimmer"></div>
                                    </div>
                                    <div class="w-25 h-30px border-radius-sm overflow-hidden">
                                        <div class="shimmer"></div>
                                    </div>
                                    <div class="w-25 h-30px border-radius-sm overflow-hidden">
                                        <div class="shimmer"></div>
                                    </div>
                                    <div class="w-25 h-30px border-radius-sm overflow-hidden">
                                        <div class="shimmer"></div>
                                    </div>

                                </div>


                            </div>


                            <div class="select-items-wrapper py-2">
                                <button data-category-id="1" type="button" class="btn btn-sm btn-select-option me-1 mb-2 active"> TV show </button>
                                <button data-category-id="2" type="button" class="btn btn-sm btn-select-option me-1 mb-2 active"> music </button>
                                <button data-category-id="3" type="button" class="btn btn-sm btn-select-option me-1 mb-2 active"> books </button>
                                <button data-category-id="4" type="button" class="btn btn-sm btn-select-option me-1 mb-2"> sport </button>
                                <button data-category-id="5" type="button" class="btn btn-sm btn-select-option me-1 mb-2"> shopping </button>
                                <button data-category-id="6" type="button" class="btn btn-sm btn-select-option me-1 mb-2"> movie </button>
                                <button data-category-id="7" type="button" class="btn btn-sm btn-select-option me-1 mb-2"> games </button>
                                <button data-category-id="8" type="button" class="btn btn-sm btn-select-option me-1 mb-2"> social N </button>
                            </div><!-- select-items-wrapper -->

                        </div>
                    </div>

                </div>

                <div class="accordion-item">
                    <div class="accordion-item-header">
                        <button class="accordion-button collapsed" data-toggle="collapse" data-target="#collapseTwo">
                            <p class="m-0 lead font-medium"> Checkbox Filter </p>
                            <i class="accordion-button-icon icon icon-chevron-bottom"></i>
                        </button>
                    </div>
                    <div id="collapseTwo" class="collapse" data-parent="#accordion">

                        <div class="accordion-item-body">

                            <div class="shimmer-wrapper">

                                <div class="flex-center gap-2 mb-1">

                                    <div class="w-20px h-20px border-radius-xs overflow-hidden">
                                        <div class="shimmer"></div>
                                    </div>

                                    <div class="w-100 h-15px border-radius-sm overflow-hidden">
                                        <div class="shimmer"></div>
                                    </div>

                                </div>

                                <div class="flex-center gap-2 mb-1">

                                    <div class="w-20px h-20px border-radius-xs overflow-hidden">
                                        <div class="shimmer"></div>
                                    </div>

                                    <div class="w-100 h-15px border-radius-sm overflow-hidden">
                                        <div class="shimmer"></div>
                                    </div>

                                </div>

                                <div class="flex-center gap-2">

                                    <div class="w-20px h-20px border-radius-xs overflow-hidden">
                                        <div class="shimmer"></div>
                                    </div>

                                    <div class="w-100 h-15px border-radius-sm overflow-hidden">
                                        <div class="shimmer"></div>
                                    </div>

                                </div>

                            </div>


                            <div class="d-block mb-2">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" id="customCheck10" checked>
                                    <label class="custom-control-label color-gray font-light" for="customCheck10">Check this checkbox</label>
                                </div>

                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" id="customCheck20">
                                    <label class="custom-control-label color-gray font-light" for="customCheck20">Check this checkbox</label>
                                </div>

                            </div>

                        </div>
                    </div>
                </div>

                <div class="accordion-item">
                    <div class="accordion-item-header">
                        <button class="accordion-button collapsed" data-toggle="collapse" data-target="#collapseThree">
                            <p class="m-0 lead font-medium"> Radio Filter </p>
                            <i class="accordion-button-icon icon icon-chevron-bottom"></i>
                        </button>
                    </div>
                    <div id="collapseThree" class="collapse" data-parent="#accordion">

                        <div class="accordion-item-body">

                            <div class="shimmer-wrapper">

                                <div class="flex-center gap-2 mb-1">

                                    <div class="w-20px h-20px border-radius-lg overflow-hidden">
                                        <div class="shimmer"></div>
                                    </div>

                                    <div class="w-100 h-15px border-radius-sm overflow-hidden">
                                        <div class="shimmer"></div>
                                    </div>

                                </div>

                                <div class="flex-center gap-2 mb-1">

                                    <div class="w-20px h-20px border-radius-lg overflow-hidden">
                                        <div class="shimmer"></div>
                                    </div>

                                    <div class="w-100 h-15px border-radius-sm overflow-hidden">
                                        <div class="shimmer"></div>
                                    </div>

                                </div>

                                <div class="flex-center gap-2">

                                    <div class="w-20px h-20px border-radius-lg overflow-hidden">
                                        <div class="shimmer"></div>
                                    </div>

                                    <div class="w-100 h-15px border-radius-sm overflow-hidden">
                                        <div class="shimmer"></div>
                                    </div>

                                </div>

                            </div>

                            <div class="d-block">

                                <div class="custom-control custom-radio">
                                    <input type="radio" id="selectItem1" name="selectItem" class="custom-control-input" checked>
                                    <label class="custom-control-label color-gray font-light mb-1" for="selectItem1"> Select 1 </label>
                                </div>

                                <div class="custom-control custom-radio">
                                    <input type="radio" id="selectItem2" name="selectItem" class="custom-control-input">
                                    <label class="custom-control-label color-gray font-light mb-1" for="selectItem2"> Select 2 </label>
                                </div>

                            </div>

                        </div>
                    </div>
                </div>

                <div class="accordion-item">

                    <div class="accordion-item-header">
                        <button class="accordion-button collapsed" data-toggle="collapse" data-target="#collapseFour">
                            <p class="m-0 lead font-medium"> Colors </p>
                            <i class="accordion-button-icon icon icon-chevron-bottom"></i>
                        </button>
                    </div>

                    <div id="collapseFour" class="collapse " data-parent="#accordion">

                        <div class="accordion-item-body">

                            <div class="shimmer-wrapper">

                                <div class="flex-start gap-2 mb-2">

                                    <div class="w-25 h-20px border-radius-xs overflow-hidden">
                                        <div class="shimmer"></div>
                                    </div>
                                    <div class="w-25 h-20px border-radius-xs overflow-hidden">
                                        <div class="shimmer"></div>
                                    </div>
                                    <div class="w-25 h-20px border-radius-xs overflow-hidden">
                                        <div class="shimmer"></div>
                                    </div>
                                    <div class="w-25 h-20px border-radius-xs overflow-hidden">
                                        <div class="shimmer"></div>
                                    </div>

                                </div>


                                <div class="flex-start gap-2 mb-2">

                                    <div class="w-25 h-20px border-radius-xs overflow-hidden">
                                        <div class="shimmer"></div>
                                    </div>
                                    <div class="w-25 h-20px border-radius-xs overflow-hidden">
                                        <div class="shimmer"></div>
                                    </div>
                                    <div class="w-25 h-20px border-radius-xs overflow-hidden">
                                        <div class="shimmer"></div>
                                    </div>
                                    <div class="w-25 h-20px border-radius-xs overflow-hidden">
                                        <div class="shimmer"></div>
                                    </div>

                                </div>



                            </div>

                            <div class="d-block mb-2">

                                <a href="#" class="flex-start gap-1 d-inline-flex base-border py-1 px-2 border-radius-sm small color-gray">
                                    <span class="d-inline-flex w-10px h-10px bg-danger base-border-radius"></span>
                                    Red
                                </a>

                                <a href="#" class="flex-start gap-1 d-inline-flex base-border py-1 px-2 border-radius-sm small color-gray">
                                    <span class="d-inline-flex w-10px h-10px bg-success base-border-radius"></span>
                                    Green
                                </a>

                                <a href="#" class="flex-start gap-1 d-inline-flex base-border py-1 px-2 border-radius-sm small color-gray">
                                    <span class="d-inline-flex w-10px h-10px bg-warning base-border-radius"></span>
                                    Yellow
                                </a>

                                <a href="#" class="flex-start gap-1 d-inline-flex base-border py-1 px-2 border-radius-sm small color-gray">
                                    <span class="d-inline-flex w-10px h-10px bg-primary base-border-radius"></span>
                                    blue
                                </a>

                            </div>

                        </div>

                    </div>
                </div>

                <div class="accordion-item">

                    <div class="accordion-item-header">
                        <button class="accordion-button collapsed" data-toggle="collapse" data-target="#collapseFive">
                            <p class="m-0 lead font-medium"> Price </p>
                            <i class="accordion-button-icon icon icon-chevron-bottom"></i>
                        </button>
                    </div>

                    <div id="collapseFive" class="collapse " data-parent="#accordion">

                        <div class="accordion-item-body">

                            <div class="shimmer-wrapper">

                                <div class="flex-start gap-2 mb-2">

                                    <div class="w-50 h-35px border-radius-xs overflow-hidden">
                                        <div class="shimmer"></div>
                                    </div>

                                    <div class="w-50 h-35px border-radius-xs overflow-hidden">
                                        <div class="shimmer"></div>
                                    </div>

                                </div>

                                <div class="flex-start gap-2 mb-2">
                                    <div class="w-100 h-15px border-radius-xs overflow-hidden">
                                        <div class="shimmer"></div>
                                    </div>
                                </div>

                            </div>

                            <div class="custom-slider-range">

                                <div class="price-inputs mb-2 d-flex gap-2 mb-3">

                                    <div class="price-input min-price-wrapper">
                                        <input type="text" id="min-price" class="form-control form-control-sm">
                                    </div>

                                    <div class="price-input max-price-wrapper">
                                        <input type="text" id="max-price" class="form-control form-control-sm">
                                    </div>

                                </div>

                                <div id="price-slider" class="slider"></div>

                            </div>

                        </div> <!-- accordion-item-body -->

                    </div>

                </div>

            </div> <!-- custom-accordion -->

        </div> <!-- d-block -->

    </div> <!-- card-body -->

</div> <!-- card -->