/* Mobile View > Mobile Only */
@media screen and (max-width: 45rem){

:root{
--filter-filter_search-width:100%;
}

#filter_search{
/*outline:#0080ff 1px solid;*/
}

}

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

:root{
--filter-filter_search-width:100%;
}

#filter_search{
/*outline:#ff0080 1px solid;*/
}

}

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

:root{
--filter-filter_search-width:16rem;
}

}

/* Desktop View */
@media screen and (min-width: 79.5rem){

:root{
--filter-filter_search-width:16rem;
}

}

#filter_search{
grid-area:filter_search;
}

#filter_active{
grid-area:filter_active;
}

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

.filter_search .label strong{
float:left;
cursor:pointer;
font-weight:bold;
width:auto;
margin:0 0 0 0;
padding:0 0 0 0;
font-size:var(--fs-m);
pointer-events: none;
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.5rem;
margin:0 0 0 0;
padding:0 0 0 0;
pointer-events: none;
}


.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:var(--filter-filter_search-width);
margin:0 0 1.5rem 0;
padding:0;
}

.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;
border:var(--brd-filter-300) 1px solid;
background:var(--bgr-filter-300);
border-radius:var(--brd-radius-25);
font-weight:bold;
font-size:var(--fs-s);
}

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

}

/* Tablet portrait only */
@media screen and (min-width: 45rem) and (max-width: 79.5rem) and (orientation: portrait){

.filter_search{
float:left;
width:var(--filter-filter_search-width);
margin:0 0 1.5rem 0;
padding:0;
}

}


/* 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:var(--filter-filter_search-width);
margin:0 0 1.5rem 0;
padding:0;
}

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

.filter_search ul li{
display:block;
width:calc(100% - .65rem);
margin:.15rem 0 .15rem 0 !important;
padding:0 !important;
background:none !important;
border:none !important;
}

.filter_search ul li label{
display:block;
width:100%;
margin:.15rem;
padding:.35rem .5rem !important;
cursor:pointer;
color:var(--clr-filter-300);
border:var(--brd-filter-300) 1px solid;
background:var(--bgr-filter-300);
border-radius:var(--brd-radius-25);
font-size:var(--fs-m);
}

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

}


.filter_search ul li label:hover{
color:var(--clr-filter-400);
border:var(--brd-filter-400) 1px solid;
background:var(--bgr-filter-400);
}

.filter_search ul li label.on{
color:var(--clr-filter-400);
border:var(--brd-filter-400) 1px solid;
background:var(--bgr-filter-400);
}

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



/* Icons */
.filter_search ul li .color:before,
.filter_search ul li .flame_type:before{
display:inline-block;
content:'';
position:relative;
top:1px;
left:0;
width:.75rem;
height:.75rem;
margin:0 .25rem 0 0;
padding:0;
border-radius:50%;
border:var(--brd-gray-500) 1px solid;
background:var(--bgr-gray-500);
}

.filter_search ul li .color .amount,
.filter_search ul li .flame_type .amount{
position:relative;
top:0;
left:0;
}

/* Flame Type */
.filter_search ul li .UBER1782148:before{
border:var(--brd-gray-500) 1px solid;
background:url('/assets/img/filter/icon/16.svg') no-repeat center center;
}

.filter_search ul li .WYFN1464566:before{
border:var(--brd-gray-500) 1px solid;
background:url('/assets/img/filter/icon/22.svg') no-repeat center center;
}

.filter_search ul li .WVBG4432804:before{
border:var(--brd-gray-500) 1px solid;
background:url('/assets/img/filter/icon/25.svg') no-repeat center center;
}

.filter_search ul li .EDTV5674224:before{
border:var(--brd-gray-500) 1px solid;
background:url('/assets/img/filter/icon/26.svg') no-repeat center center;
}

.filter_search ul li .CQTA7263464:before{
border:var(--brd-gray-500) 1px solid;
background:url('/assets/img/filter/icon/286.svg') no-repeat center center;
}

.filter_search ul li .TXKV2405568:before{
border:var(--brd-gray-500) 1px solid;
background:url('/assets/img/filter/icon/298.svg') no-repeat center center;
}

.filter_search ul li .XBCU9693115:before{
border:var(--brd-gray-500) 1px solid;
background:url('/assets/img/filter/icon/310.svg') no-repeat center center;
}


/* Lagerbestand */
.filter_search ul li .XYXR4546901:before{
background:var(--status-succes-background-color);
border:var(--status-succes-border-color) 1px solid;
}

.filter_search ul li .ZVRE4037793:before{
background:var(--status-pending-background-color);
border:var(--status-pending-border-color) 1px solid;
}

.filter_search ul li .ASIB5749580:before{
background:var(--status-alert-background-color);
border:var(--status-alert-border-color) 1px solid;
}


/* Blau */
.filter_search ul li .FVJD6714948:before,
.filter_search ul li .WFNE9340795:before{
background:#2a68aa
}

/* Chrome*/
.filter_search ul li .TUBA4502391:before,
.filter_search ul li .HKDY2823217:before{
background:#bebab6
}


/* Mehrfarbig */
.filter_search ul li .LVBS6182410:before,
.filter_search ul li .OJWL1635614:before{
background:#FFF url("/assets/img/filter/icon/multicolor.svg") no-repeat center center;
}

/* Design */
.filter_search ul li .SDWU4660224:before,
.filter_search ul li .SCPR6930047:before{
background:#FFF url("/assets/img/filter/icon/designlabel.svg") no-repeat center center;
}

/* Gelb */
.filter_search ul li .RLVO5209441:before,
.filter_search ul li .WNST5981599:before{
background:#ffc414
}

/* Gold */
.filter_search ul li .QJUE8329574:before,
.filter_search ul li .IOAE6596872:before{
background:#dbcb84
}

/* Grün */
.filter_search ul li .JSNI7147398:before,
.filter_search ul li .ZKKO5976094:before{
background:#2f9900
}

/* Pink*/
.filter_search ul li .GMMB1554836:before{
background:#ff95ef
}

/* Lila*/
.filter_search ul li .TMIX7216573:before{
background:#b846c2
}

/* Orange*/
.filter_search ul li .JDNJ4280986:before,
.filter_search ul li .IIUR8611728:before{
background:#ffa800
}

/* Rot */
.filter_search ul li .AAYK3707820:before,
.filter_search ul li .ZDVH1653540:before{
background:#df0000
}

/* Schwarz */
.filter_search ul li .VIJD5293618:before,
.filter_search ul li .YPPP3492398:before{
background:#000000
}

/* Silber */
.filter_search ul li .ZYQD4991810:before,
.filter_search ul li .PCLM1572429:before{
background:#f4f0e5
}

/* Weiß */
.filter_search ul li .XFAD1064434:before,
.filter_search ul li .MPRJ5837071:before{
background:#FFF
}

/* Rose */
.filter_search ul li .NTZJ6882856:before,
.filter_search ul li .BBBZ7946803:before{
background:#e6c6af
}


/* Mobile View > Mobile Only */
@media screen and (max-width: 45rem){

#filter_active{
float:left;
width:calc(100% - 1.5rem);
margin:0 .75rem .5rem .75rem;
}

}

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

#filter_active{
float:left;
width:100%;
margin:0 0 .5rem 0;
}

}

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

#filter_active{
float:left;
width:100%;
margin:0 0 .5rem 0;
}

}

/* Desktop View */
@media screen and (min-width: 79.5rem){

#filter_active{
float:left;
width:100%;
margin:0 0 .5rem 0;
}

}


#filter_active .list{
all:unset !important;
float:left;
display:inline-block;
width:100% !important;
}

#filter_active .list li{
float:left;
width:auto !important;
margin:0 .5rem .5rem 0 !important;
padding:0 !important;
border:none !important;
background:none !important;
}

.checkbox.filter_active{
display:none !important;
}

#filter_active .label{
width:auto !important;
margin:0 .5rem 0 0 !important;
padding:.5rem .5rem .35rem .5rem !important;
border-radius:var(--brd-radius-25);
}

#filter_active ul li label{
color:var(--clr-filter-300);
border:var(--brd-filter-300) 1px solid;
background:var(--bgr-filter-300);
}

#filter_active ul li label:hover{
color:var(--clr-filter-400);
border:var(--brd-filter-400) 1px solid;
background:var(--bgr-filter-400);
}