.widget-search-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;

    .aae-widget-search {
        width: 400px;
        padding: 10px;
        border: 1px solid #00000033;
        border-radius: 6px;
        display: flex;
        align-items: center;
        gap: 8px;

        input {
            border: none;
            font-size: 16px;
            color: #999999;
            line-height: 20px;
            width: 100%;

            &:-ms-input-placeholder {
                color: #999999
            }

            &::placeholder {
                color: #999999
            }
        }
    }

    .category-list {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;

        li {
            font-size: 16px;
            font-weight: 400;
            padding: 6px 13px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.4s;
            border: 1px solid #00000033;
            color: #000;

            &:hover {
                background-color: #F6502C;
                border-color: #F6502C;
                color: #FFFFFF;
            }


        }

        .active {
            background-color: #F6502C;
            border-color: #F6502C;
            color: #FFFFFF;
        }
    }
}



.aae-widget-separator {
    width: 100%;
    height: 1px;
    background-color: #0000001A;
    margin: 40px 0;
}


.widget-list-wrapper .widget-list {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 30px;

    .aae-filter-widget-item {
        position: relative;
        border-radius: 12px;
        border: 1px solid rgba(185, 185, 185, 0.20);
        aspect-ratio: 1;
        width: 100%;
        height: 100%;

        .aae-filter-item-wrap {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 20px;

            .name {
                font-weight: 400;
                font-size: 18px;
                line-height: 24px;
                text-transform: capitalize;
                color: #000;
                max-width: 145px;
                text-align: center;
                /* min-height: 48px; */
                margin-bottom: 0;
                br {
                    display: block;
                }
            }

            .icon {
                font-size: 48px;
                line-height: 1;
                color: #000;
                display: flex;
                justify-content: center;
                align-items: center;

                span {
                    transition: all 0.5s;
                }

            }
        }

        .aae-widget-pro-badge {
            position: absolute;
            top: 23px;
            right: 19px;
        }

        .tooltip {
            font-size: 14px;
            line-height: 18px;
            color: #000000;
            background: #FFFFFF;
            padding: 15px;
            position: absolute;
            width: 237px;
            top: -130px;
            left: 50%;
            -ms-transform: translateX(-50%);
                transform: translateX(-50%);
            text-align: center;
            visibility: hidden;
            opacity: 0;
            transition: all 0.5s;
            border-radius: 9px;
            filter: drop-shadow(-11.087px 0px 44.347px rgba(0, 0, 0, 0.12));
            z-index: 999;

            &::after {
                content: "";
                position: absolute;
                bottom: -15px;
                left: 50%;
                -ms-transform: translateX(-50%);
                    transform: translateX(-50%);
                width: 29px;
                height: 26px;
                background-image: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%2729%27 height=%2726%27 viewBox=%270 0 29 26%27 fill=%27none%27><path d=%27M18.0594 23.835C16.4774 26.575 12.5226 26.575 10.9406 23.835L1.17187 6.915C-0.410068 4.175 1.56736 0.750001 4.73123 0.750001L24.2688 0.750003C27.4326 0.750003 29.4101 4.175 27.8281 6.915L18.0594 23.835Z%27 fill=%27white%27/></svg>");
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
            }

            p {
                color: #F6502C;
                margin-top: 8px;
                margin-bottom: 0;
                cursor: pointer;
                font-size: 14px;
                display: flex;
                justify-content: center;
                align-items: center;

                span {
                    margin-left: 2px;
                    display: flex;
                    align-items: center;
                }

                &:hover {
                    span {
                        margin-left: 4px;
                    }
                }
            }
        }

        &:hover {
            a {
                .icon {
                    span {
                        color: #F6502C;
                    }
                }
            }

            .tooltip {
                visibility: visible;
                opacity: 1;
                top: -90px;
            }
        }

    }
}

.aae-widget-list-no-item {
    display: none;

    p {
        text-align: center;
    }


}


@media (max-width: 1500px) {
    .widget-list-wrapper .widget-list {
        grid-template-columns: repeat(5, 1fr);

        .aae-filter-widget-item {
            .tooltip {
                top: -120px;
            }

            &:hover {
                .tooltip {
                    top: -110px;
                }
            }
        }
    }
}

@media (max-width: 1199px) {
    .widget-search-filter {
        flex-direction: column;
        gap: 25px;

        .category-list {
            justify-content: center;
        }
    }

    .widget-list-wrapper .widget-list {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;

        .aae-filter-widget-item {
            .tooltip {
                display: none;
            }
        }
    }

    .widget-list-wrapper .title {
        padding-bottom: 45px;
        padding-top: 100px;
        margin-top: 100px;
    }

}

@media (max-width: 991px) {
    .widget-list-wrapper .widget-list {
        grid-template-columns: repeat(3, 1fr);
    }

    .widget-list-wrapper .title {
        padding-top: 80px;
        margin-top: 80px;
    }
}

@media (max-width: 767px) {
    .widget-search-filter {
        .aae-widget-search {
            width: 100%;
        }
    }

    .widget-list-wrapper .widget-list {
        grid-template-columns: repeat(2, 1fr);

        .aae-filter-widget-item {
            .aae-filter-item-wrap {
                .name {
                    max-width: 130px;
                }
            }
        }
    }



}