.filter_search{
float:left;
width:100%;
margin:0;
padding:0 0 0 .75rem;
grid-area:filter;
}


#filter_main{
float:left;
width:100%;
margin:0;
padding:.75rem 0 0 0;
background:var(--middle-background-color);
border:1px #FF00FF solid;
}


.filter_addition_toggle{
float:left;
width:100%;
border:#ffff00 0px solid;
display:flex;
justify-content:center;
align-items:center;
}

.btn_filter_toggle{
float:left;
width:auto;
margin:.35rem 0 .5rem 0;
padding:.25rem .35rem;
color:var(--button-hover-font-color);
background:var(--button-hover-background-color);
border-radius:.25rem;
font-weight:bold;
font-size:var(--s-font-size);
}

#filter_addition .content,
#filter_addition .content.inactive{
float:left;
width:100%;
height:0;
border:#ff00ff 0px solid;
transition:height 250ms ease-in;
overflow:hidden;
}

#filter_addition .content.active{
height:18rem;
border:#00ff00 0px solid;
overflow:auto;
}

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

#filter_main{
float:left;
width:100%;
border:#ff00ff 0px solid;
position:relative;
margin:0;
padding:.5rem;
background:var(--middle-background-color);
}

#filter_addition{
float:left;
width:100%;
padding:.5rem;
}

#filter fieldset{
float:left;
width:100% !important;
border:0px green solid;
margin:0;
padding:0;
}

.filter_search .box{
float:left;
width:100%;
position:relative;
}

.filter_search .box .btn_filter{
float:left;
width:100%;
}

#filter_location_search_suggest{
display:block;
width:100%;
height:auto;
max-height:4rem;
position:absolute;
top:3.75rem;
left:0;
border:#ff0000 0px solid;
z-index:100;
background:var(--base-background-color);
}

#filter_location_search_suggest ul{
margin:0;
padding:.25rem 0;
list-style:none;
}

#filter_location_search_suggest ul li{
float:left;
width:auto;
margin:.25rem .25rem .25rem 0;
padding:.25rem;
border:var(--asset-border-color) 1px solid;
background:var(--asset-background-color);
border-radius:.25rem;
}

#filter_location_search_suggest ul li a{
float:left;
width:auto;
}

.filter_search .box .seasonal{
display:flex;
justify-content:space-between;
align-items:baseline;
float:left;
width:100%;
border:#ff0000 0px solid;
}

.filter_search .box .from,
.filter_search .box .to{
display:inline-block;
width:48%;
cursor:text;
}

.filter_search .box select{
width:100%;
border:var(--input-base-border-color) 1px solid;
border-radius:0;
}

.filter_search .box .btn_filter{
padding:.5rem;
}

}



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

#filter_main{
float:left;
width:100%;
position:relative;
display:flex;
justify-content:space-between;
}

#filter_addition{
float:left;
width:100%;
padding:.5rem;
}

.filter_search .box{
float:left;
width:auto;
height:4rem;
min-width:6rem;
max-width:16rem;
position:relative;
margin:0;
padding:0;
}

.filter_search .box:last-of-type{
display:flex;
justify-content:center;
align-items:center;
}

.filter_search .box:last-of-type .btn_filter{
margin:12px 0 0 0;
}

.filter_search .box label{
display:block;
min-width:6rem;
max-width:10rem;
margin:0;
padding:0;
}

.filter_search .box input,
.filter_search .box select{
border:var(--input-base-border-color) 1px solid;
border-radius:.25rem;
}

.filter_search .box .location{
display:block;
min-width:6rem;
max-width:10rem;
position:relative;
}

#filter_location_search_suggest{
display:block;
width:15rem;
height:auto;
max-width:15rem;
max-height:10rem;
overflow:auto;
position:absolute;
top:3.75rem;
left:0;
z-index:100;
}

#filter_location_search_suggest ul{
margin:0;
padding:0;
list-style:none;
border:0;
}

#filter_location_search_suggest ul li{
float:left;
width:auto;
margin:.25rem .25rem .25rem 0;
padding:.25rem;
border:var(--asset-border-color) 1px solid;
background:var(--asset-background-color);
border-radius:.25rem;
}

#filter_location_search_suggest ul li a{
display:block;
width:100%;
}

.filter_search .box .seasonal{
display:block;
min-width:6rem;
max-width:10rem;
position:relative;
}

.filter_search .box .from,
.filter_search .box .to{
display:inline-block;
width:4.5rem;
cursor:text;
}

}



/* Filter Toggle */

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

.filter_search .label{
float:left;
width:calc(100% - .75rem);
cursor:pointer;
display:flex;
justify-content:space-between;
align-items:center;
border-bottom:var(--light-border-color) 1px solid;
font-weight:bold;
}

}



.filter_search .label .arrow{
float:right;
position:relative;
top:-.15rem;
display:flex;
justify-content:center;
align-items:center;
width:2.15rem;
height:100%;
margin:0 0 0 0;
padding:.5rem;
cursor:pointer;
}

.filter_search .label .arrow em{
width:.65rem;
height:.65rem;
border:var(--base-theme-color) solid;
border-width:0 2px 2px 0;
display:inline-block;
border-radius:2px;
}

.filter_search .label .arrow.is_open{
position:relative;
top:.15rem;
}

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

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

.filter_search .hide{
float:left;
width:100%;
height:0;
display:none;
}

.filter_search .show{
float:left;
width:100%;
display:block;
min-height:3rem;
height:auto;
max-height:13rem;
margin:0;
padding:.15rem 0 .5rem 0;
overflow:auto;
scrollbar-width:thin;
}


/* 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 ul li{
display:block;
margin:.15rem 0 !important;
padding:0 !important;
}

.filter_search ul li input{
display:none;
}

.filter_search ul li label{
display:block;
margin:.15rem;
padding:.25rem .5rem;
cursor:pointer;
border:var(--light-border-color) 1px solid;
background:var(--light-background-color);
border-radius:.25rem;
}

}



/* 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 ul li{
float:left;
width:calc(100% - .5rem);
margin:.15rem 0 !important;
padding:0 !important;
}

.filter_search ul li input{
display:none;
}

.filter_search ul li label{
float:left;
width:100%;
margin:0;
padding:.25rem .5rem;
cursor:pointer;
border:var(--light-border-color) 1px solid;
background:var(--light-background-color);
border-radius:.25rem;
}

}

.filter_search ul li label:hover{
border:var(--button-border-color) 1px solid;
background:var(--button-background-color);
color:var(--button-font-color);
}

.filter_search ul li label.on{
color:var(--light-font-color);
background:var(--nav-on-background-color);
}

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

.color:before,
.flame_type:before{
display:inline-block;
content:'';
position:relative;
top:.15rem;
left:0;
width:.75rem;
height:.75rem;
margin:0 .25rem 0 0;
padding:.15rem 0 0 0;
padding:0;
border:var(--light-border-color) 1px solid;
border-radius:50%;
background:#ebebeb
}

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

/* Flame Type */
.flame_type_16:before{
background:url('/asset/img/database/addition/16.svg') no-repeat center center;
border:var(--light-border-color) 1px solid;
}

.flame_type_22:before{
background:url('/asset/img/database/addition/22.svg') no-repeat center center;
border:var(--light-border-color) 1px solid;
}

.flame_type_25:before{
background:url('/asset/img/database/addition/25.svg') no-repeat center center;
border:var(--light-border-color) 1px solid;
}

.flame_type_26:before{
background:url('/asset/img/database/addition/26.svg') no-repeat center center;
border:var(--light-border-color) 1px solid;
}

.flame_type_286:before{
background:url('/asset/img/database/addition/286.svg') no-repeat center center;
border:var(--light-border-color) 1px solid;
}

.flame_type_298:before{
background:url('/asset/img/database/addition/298.svg') no-repeat center center;
border:var(--light-border-color) 1px solid;
}

.flame_type_310:before{
background:url('/asset/img/database/addition/310.svg') no-repeat center center;
border:var(--light-border-color) 1px solid;
}

/* Lagerbestand */
.color_265:before{
background:var(--active-background-color);
border:var(--light-border-color) 1px solid;
}

.color_266:before{
background:var(--pending-background-color);
border:var(--light-border-color) 1px solid;
}

.color_267:before{
background:var(--alert-background-color);
border:var(--light-border-color) 1px solid;
}



/* Blau */
.color_213:before,
.color_223:before{
background:#2a68aa
}

/* Chrome*/
.color_211:before,
.color_224:before{
background:#bebab6
}


/* Mehrfarbig */
.color_235:before,
.color_237:before{
background:#FFF url("/asset/img/filter/icon/multicolor.svg") no-repeat center center;
}

/* Design */
.color_236:before,
.color_238:before{
background:#FFF url("/asset/img/filter/icon/designlabel.svg") no-repeat center center;
}

/* Gelb */
.color_214:before,
.color_225:before{
background:#ffc414
}

/* Gold */
.color_215:before,
.color_226:before{
background:#dbcb84
}

/* Grün */
.color_216:before,
.color_227:before{
background:#2f9900
}

/* Pink*/
.color_239:before{
background:#ff95ef
}

/* Lila*/
.color_228:before{
background:#b846c2
}

/* Orange*/
.color_222:before,
.color_229:before{
background:#ffa800
}

/* Rot */
.color_218:before,
.color_231:before{
background:#df0000
}

/* Schwarz */
.color_210:before,
.color_232:before{
background:#000000
}

/* Silber */
.color_219:before,
.color_233:before{
background:#f4f0e5
}

/* Weiß */
.color_220:before,
.color_234:before{
background:#FFF
}

/* Rose */
.color_217:before,
.color_230:before{
background:#e6c6af
}


.filter_no_result{
float:left;
width:100%;
margin:0;
padding:.25rem;
background:var(--base-background-color);
text-align:center;
}


#filter_activ{
float:left;
width:100%;
margin:0;
padding:0;
background:var(--base-background-color);
}

#filter_activ ul{
float:left;
width:100%;
margin:.5rem 0;
padding:0;
list-style-type:none;
}

#filter_activ ul li{
float:left;
width:auto;
display:flex;
justify-content:flex-start;
align-items:center;
flex-wrap:wrap
}

#filter_activ ul li .label{
float:left;
width:auto;
margin:0;
padding:.25rem .5rem;
display:flex;
justify-content:center;
align-items:center;
}

#filter_activ ul li .value{
clear:both;
float:left;
width:auto;
margin:.25rem .25rem .25rem .25rem;
padding:.15rem .5rem;
display:flex;
justify-content:center;
align-items:center;
background:var(--base-background-color);
border:var(--base-border-color) 1px solid;
border-radius:0;
}

#filter_activ .btn_filter_remove{
float:right;
width:1.5rem;
height:1.5rem;
color:var(--button-hover-font-color);
background:var(--button-hover-background-color);
margin:.25rem 0 .25rem .35rem;
padding:0;
border:0;
list-style-type:none;
cursor:pointer;
border-radius:.25rem;
}

/*
@-moz-document url-prefix(){

#filter_activ ul li .label{
padding:0 .5rem;
}

#filter_activ ul li .value{
padding:0 .5rem;
}

#filter_activ .btn_filter_remove{
padding:0;
}

}
*/

#filter_activ .btn_filter_remove:hover{
color:var(--button-font-color);
background:var(--button-background-color);
}

#filter_activ .remove{
float:left;
width:100%;
}

#filter_history{
float:left;
width:100%;
margin:0;
padding:0;
}

.filter_history_toggle{
float:left;
width:100%;
display:flex;
justify-content:center;
align-items:center;
}

#filter_history .content{
float:left;
width:100%;
padding:.25rem;
border:var(--base-border-color) 1px solid;
}

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

#filter_history .content,
#filter_history .content.inactive{
float:left;
width:100%;
height:6rem;
height:3.4rem;
transition:height 250ms ease-in;
overflow:hidden;
}

}

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

#filter_history .content,
#filter_history .content.inactive{
float:left;
width:100%;
height:3.5rem;
transition:height 250ms ease-in;
overflow:hidden;
}

}


#filter_history .content.active{
height:9.5rem;
overflow:auto;
}

/**/
#filter_history ol{
float:left;
width:100%;
margin:0;
padding:0;
list-style:none;
}

#filter_history ol li{
float:left;
width:100%;
margin:.25rem 0;
padding:.25rem 0;
background:var(--middle-background-color);
border-radius:0;
}

#filter_history ol li .label{
float:left;
width:auto;
margin:0;
padding:.25rem .5rem;
color:var(--base-font-color);
}

#filter_history ol li .value{
float:left;
width:auto;
margin:0 .25rem;
padding:.15rem .5rem;
color:var(--base-font-color);
border:var(--base-border-color) 1px solid;
background:var(--base-background-color);
border-radius:.25rem;
}

#filter_history ol li .value:hover{
color:var(--base-font-color);
background:var(--nav-background-color);
}

#filter_history ol li .value.on{
color:var(--base-font-color);
background:var(--nav-on-background-color);
}

#filter_history .btn_delete{
float:right;
color:var(--button-hover-font-color);
background:var(--button-hover-background-color);
margin:.35rem 0 .25rem 0;
padding:.25rem;
border-radius:.25rem;
border:0;
font-size:var(--s-font-size);
cursor:pointer;
}

#filter_history .btn_delete:hover{
color:var(--button-font-color);
background:var(--button-background-color);
}


#filter_preview{
float:left;
width:100%;
position:relative;
height:69rem;
margin:0;
padding:0;
background:var(--base-background-color);
}


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

#filter_preview .content{
position:absolute;
top:0;
left:0;
display:flex;
align-items:center;
flex-direction:column;
width:100%;
min-height:62rem;
height:66rem;
margin:0;
padding:.25rem;
overflow:auto;
background:var(--asset-background-color);
}

}

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

#filter_preview .content{
position:absolute;
top:0;
left:0;
display:flex;
align-items:center;
flex-direction:column;
width:100%;
min-height:62rem;
height:66rem;
margin:0;
padding:.25rem;
overflow:auto;
background:var(--asset-background-color);
}

}


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

#filter_preview .content{
position:absolute;
top:0;
left:0;
display:flex;
justify-content:space-around;
align-items:flex-start;
width:100%;
min-height:62rem;
height:66rem;
margin:0;
padding:.25rem;
overflow:auto;
background:var(--asset-background-color);
}

}


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

#filter_preview .content{
position:absolute;
top:0;
left:0;
display:flex;
justify-content:space-around;
align-items:flex-start;
width:100%;
min-height:62rem;
height:66rem;
margin:0;
padding:.25rem;
overflow:auto;
background:var(--asset-background-color);
}

}


#filter_preview article{
margin:.5rem;
padding:0;
}

#filter_preview section{
margin:0;
padding:0;
}



#filter_preview .loading{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url('/asset/img/loading.gif') no-repeat center center;
display:none;
z-index:1;
}


#filter_preview .tab_nav{
position:absolute;
bottom:0;
left:0;
display:flex;
justify-content:center;
align-items:center;
width:100%;
height:3rem;
margin:0;
padding:0;
}

/* Tab icon */
#filter_preview .tab{
float:left;
width:100%;
margin:0;
}

#filter_preview .tab ul{
display:flex;
justify-content:center;
align-items:center;
list-style-type:none;
margin:.5rem 0;
padding:0;
}

#filter_preview .tab li{
display:flex;
align-items:center;
margin:0 .25rem;
padding:0 .15rem;
width:auto;
}

#filter_preview .tab li:before{
display:none
}

#filter_preview .tab button{
display:inline-block;
text-align:center;
}

#filter_preview .tab button span{
display:none;
}

#filter_preview .tab button,
#filter_preview .tab button.off{
color:#FFF;
font-weight:normal;
border:1px solid var(--base-border-color);
background:var(--nav-background-color);
width:1.5rem;
height:1.5rem;
border-radius:50%;
transition:opacity 250ms ease-in;
}

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

#filter_preview .tab button:hover{
border:1px solid transparent;
background:var(--nav-on-background-color);
}

}

#filter_preview .tab button.on{
color:#FFF;
font-weight:normal;
border:1px solid transparent;
background:var(--nav-on-background-color);
width:1.5rem;
height:1.5rem;
border-radius:50%;
}