.filter_search .label{
float:left;
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
border-bottom:var(--brd-gray-400) 1px solid;
}

.filter_search .label strong{
float:left;
cursor:pointer;
font-weight:bold;
width:auto;
height:1.75rem;
margin:0 0 0 0;
padding:.25rem .35rem;
font-size:var(--fs-s);
pointer-events: none;
background:var(--label-filter-300);
border-radius:.25rem .25rem 0 0;
}

.filter_search .label .arrow{
float:right;
position:relative;
top:0;
display:flex;
justify-content:center;
align-items:center;
width:1.5rem;
height:1.75rem;
margin:0 0 0 0;
padding:.25rem;
pointer-events: none;
background:var(--label-filter-300);
}


.filter_search .label .arrow em{
width:.65rem;
height:.65rem;
background:url('/assets/img/icon/arrow-dark.svg') no-repeat top left;
}

.filter_search .label .arrow.is_open{
border-radius:.25rem .25rem 0 0;
}

.filter_search .label .arrow.is_open em{
transition:all ease-in-out 250ms;
transform:rotate(90deg);
}

.filter_search .label .arrow.is_closed{
border-radius:.25rem .25rem 0 0;
}

.filter_search .label .arrow.is_closed em{
transition:all ease-in-out 250ms;
transform:rotate(-90deg);
}


.filter_search .hide{
float:left;
width:100%;
max-height:0;
transition:max-height 350ms ease-out;
overflow:hidden;
animation:fade-out 850ms ease-out forwards;
}

.filter_search .show{
float:left;
width:100%;
max-height:13rem;
margin:0;
padding:.15rem 0 .5rem 0;
overflow:auto;
scrollbar-width:thin;
transition:max-height 550ms ease-in;
animation:fade-in 850ms ease-in forwards;

&:hover{
background:none;
}

}


/* Mobile View > till Tablet or Tablet portrait */
@media screen and (max-width: 45rem), screen and (min-width: 45rem) and (max-width: 79.5rem) and (orientation: portrait){

.filter_search{
float:left;
width:100%;
margin:0 0 1.5rem 0;
padding:0 .75rem;
}

.filter_search ul{
float:left;
width:100%;
margin:0;
padding:.25rem 0 .25rem 0 !important;
}

.filter_search ul li{
display:block;
margin:.35rem .35rem .35rem 0 !important;
padding:0 !important;
width:auto;
background:none !important;
border:none !important;
}

.filter_search ul li label{
display:block;
margin:.15rem;
padding:.25rem .5rem !important;
cursor:pointer;
background:var(--btn-filter-300);
border-radius:.25rem;
font-weight:bold;
font-size:var(--fs-s);
}

.filter_search ul li .filter{
display:none !important;
}

}


/* Tablet && Desktop View */
@media screen and (min-width: 79.5rem), screen and (min-width: 45rem) and (max-width: 79.5rem) and (orientation: landscape){

.filter_search{
float:left;
width:100%;
margin:0 0 1.5rem 0;
padding:0 1.5rem;
}

.filter_search ul{
float:left;
width:100%;
margin:0;
padding:.25rem 0 .25rem 0 !important;
}

.filter_search ul li{
display:block;
margin:.35rem .35rem .35rem 0 !important;
padding:0 !important;
width:auto;
background:none !important;
border:none !important;
}

.filter_search ul li label{
display:block;
margin:.15rem;
padding:.25rem .5rem !important;
cursor:pointer;
background:var(--btn-filter-300);
border-radius:.25rem;
font-weight:bold;
font-size:var(--fs-s);
}

.filter_search ul li .filter{
display:none !important;
}

}


.filter_search ul li label:hover{
color:var(--clr-primary-300);
background:var(--btn-filter-400);
border-radius:.25rem;
}

.filter_search ul li label.on{
color:var(--clr-primary-300);
background:var(--btn-filter-400);
border-radius:.25rem;
}

.filter_search ul li label .amount{
float:right;
margin:0 0 0 .15rem;
font-weight:normal;
}