/* ------------------Filter styles------------------- */

.breadcrumb_container
{
    padding: 20px 0;
}


.cat_search_container
{
    display: flex;    
    justify-content: center;
    
}

.cat_search_form
{
    display: flex;
    flex: 1;
    border-radius: 5px;
    align-items: center;
    border: 1px solid var(--color_shade4);
    background: var(--color_shade1);
    padding: 5px;
    max-width: 800px !important;
    
}


.cat_search_input_btn .close_btn
{
    padding: 8px 15px;
    margin: 0;
}

.cat_search_icon
{
    padding: 0 10px;
}


.cat_search_icon ion-icon
{
    font-size: 25px;
    color: var(--color_shade5);
}


.cat_search_input_container
{
    margin-right: 5px;
    flex: 1;
}


.cat_search_input_container input
{
    width: 100%;
    border-radius: 5px;
}


.clear_filter_btn
{
    padding: 0px 8px;
    /* border: 1px solid var(--highlight_color); */
    border-radius: 5px;
    margin-left: 10px;
    display: flex;
    align-items: center;
}


.filter_btn_container
{
    padding: 20px 0;
    /* position: relative; */
}


.filter_wrapper
{
    display: flex;
    justify-content: center;
    border-bottom: 1px solid var(--color_shade4);
    position: relative;
    /* margin-bottom: 20px; */
}

/* .filter_wrapper .filter_btn_container
{
    margin-right: 20px;
} */

.filter_wrapper .filter_btn_container:first-child
{
    margin-right: 20px;
}



.filter_btn
{
    flex: 1;
    display: flex;
    align-items: center;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    border: 1px solid var(--color_shade2);
    box-shadow: 0 0 15px var(--color_shade4);
    /* position: relative; */
}


.filter_btn ion-icon
{
    margin-left: 10px;
}



.filter_wrapper .filter_btn_container .filter_btn
{
    box-shadow: none;
    border: 1px solid var(--color_shade5);
}




.filter_btn span
{
    flex: 1;   
    padding: 0    
}


.filter_dropdown
{
    padding: 20px;
    
    position: absolute;
    top: 60px;
    left: 0;
    z-index: 200;
    width: 100%;
    text-align: center;
    display: none;
}


.filter_cat_btn_container
{
    display: grid;
    gap: 10px;
    padding: 10px;
    max-height: 400px;
    overflow: auto;

    border-radius: 5px;
    border: 1px solid var(--color_shade4);
    background: var(--color_shade1);
    margin: auto;
    max-width: 400px;
}


#filter_by_category_form select
{
    width: 100% !important;
}


.filter_cat_btn_container button
{
    /* flex: 1; */
    padding: 8px 16px;
    border: 1px solid var(--color_shade4);
    background: var(--color_shade1);
    
}


.filter_cat_btn_container button:hover
{
   background: var(--highlight_color);
   color: var(--color_shade1);
   cursor: pointer;
}


.filter_dropdown_number_box
{
    width: 100%;
    display: grid;

    gap: 10px;
    grid-template-columns: 1fr 1fr;
    margin-top: 20px;
}

.filter_dropdown_number_box input
{
    width: 100%;
}


.price-range
{
    margin: 0 10px;
}


/* --------------Media Querries--------------- */

@media only screen and (max-width: 700px)
{
    .filter_btn
    {
        padding: 8px 10px !important;
        
    }

    .filter_btn_container
    {
        padding: 10px 0;
        
    }

    .filter_wrapper .filter_btn_container:first-child
    {
        margin-right: 10px;
    }

}



@media only screen and (max-width: 400px)
{
    
    .filter_btn span
    {
        font-size: 14px;   
    }


}



/* --------- JQUERY UI STYLE for price slider starts----------- */

/* 
.slider-box {width: 90%; margin: 25px auto}

label, input {border: none; display: inline-block; margin-right: -4px; vertical-align: top; width: 30%}

input {width: 70%}
.slider {margin: 25px 0} */


/* --------- JQUERY UI STYLE for price slider ends----------- */