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

#search_listing{
grid-area:listing;
display:flex;
justify-content:center;
align-content:flex-start;
flex-wrap:wrap;
width:100%;
margin:0;
padding:0;
}

#search_listing > article{
float:left;
width:18rem;
min-width:13rem;
margin:1rem 0 1rem 0;
padding:0;
border:var(--light-border-color) 1px solid;
border-radius:0;
overflow:hidden;
}

}

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

#search_listing{
grid-area:listing;
display:flex;
justify-content:center;
align-content:flex-start;
flex-wrap:wrap;
width:100%;
margin:0;
padding:0;
}

#search_listing > article{
float:left;
width:15rem;
min-width:10rem;
margin:1rem .5rem 1rem .5rem;
padding:0;
border:var(--light-border-color) 1px solid;
border-radius:0;
overflow:hidden;
}

}

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

#search_listing{
grid-area:listing;
display:flex;
justify-content:center;
align-content:flex-start;
flex-wrap:wrap;
width:100%;
margin:0;
padding:0;
}

#search_listing > article{
float:left;
width:15rem;
min-width:10rem;
margin:1rem .75rem 1rem .75rem;
padding:0;
border:var(--light-border-color) 1px solid;
border-radius:0;
overflow:hidden;
}

}

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

#search_listing{
grid-area:listing;
display:flex;
justify-content:center;
align-content:flex-start;
flex-wrap:wrap;
width:100%;
margin:0;
padding:0;
}

#search_listing > article{
float:left;
width:15rem;
min-width:10rem;
margin:1rem .75rem 1rem .75rem;
padding:0;
border:var(--light-border-color) 1px solid;
border-radius:0;
overflow:hidden;
}

}


#search_toggle{
display:block;
width:2.5rem;
height:2.5rem;
position:relative;
overflow:hidden;
cursor:pointer;
/*
border:1px #FFFF00 solid;
background:#0FF000;
*/
}

#search_toggle p{
display:block;
width:100%;
margin:0 0 0 10em;
padding:0;
}

#search_toggle{
background:url('/asset/img/search/off.svg') no-repeat top left;
}

#search_toggle.on{
background:url('/asset/img/search/on.svg') no-repeat top left;
}


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

#search-wrapper{
float:left;
width:100%;
height:auto;
position:absolute;
left:0;
top:4rem;
z-index:100;
background:var(--base-background-color);
}

#search_autosuggest{
position:relative;
top:0;
left:0;
}

}


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

#search_toggle{
display:none;
}

#search{
position:relative;
top:2.35rem;
left:0;
width:60%;
height:3rem;
}

#header.fixed #search{
position:relative;
top:0;
left:0;
width:60%;
}

.search_bg{
position:absolute;
top:0;
left:0;
}

#search_autosuggest{
position:absolute;
top:2.5rem;
left:0;
}

#search_toggle.fixed{
display:block;
}

}

#search .search_bg label{
display:none;
}

#search .search_bg input{
float:left;
background:transparent;
border:var(--input-base-border-color) 1px solid;
/*
border-top-left-radius:.25rem;
border-bottom-left-radius:.25rem;
*/
color:var(--input-base-font-color);
padding:.25rem 2.5rem .25rem .5rem;
width:calc(100% - 5rem);
height:2.5rem;
}

#search .search_bg button{
float:left;
background:transparent;
border:0;
border-top:var(--input-base-border-color) 1px solid;
border-right:var(--input-base-border-color) 1px solid;
border-bottom:var(--input-base-border-color) 1px solid;
border-radius:0;
/*
border-top-right-radius:.25rem;
border-bottom-right-radius:.25rem;
*/
color:var(--input-base-font-color);
margin:0;
padding:0;
width:5rem;
height:2.5rem;
font-size:var(--s-font-size);
}

#search .search_bg button:hover{
color:var(--light-font-color);
background:var(--dark-background-color);
border:var(--dark-background-color) 1px solid;
}

#search .search_bg{
float:left;
width:100%;
background:var(--input-base-background-color) url('/asset/img/icon/search.svg') no-repeat calc(100% - 5rem) 0;
}


#search_autosuggest .title{
display:inline-block;
width:100%;
}

#search_autosuggest .headline{
display:inline-block;
width:calc(100% - 3.25rem);
}

#search_autosuggest .headline h2{
font-size:var(--m-font-size);
}

#search_autosuggest .btn_close.icon{
width:1.75rem;
height:1.75rem;
border:0;
}


#search_autosuggest .btn_close.icon{
background:url('/asset/img/btn/close/icon/off.svg') no-repeat top left;
}

#search_autosuggest .btn_close.icon.on{
background:url('/asset/img/btn/close/icon/on.svg') no-repeat top left;
}

#search_autosuggest .btn_close.icon.on:hover{
background:url('/asset/img/btn/close/icon/off.svg') no-repeat top left;
}


#search_autosuggest .btn_close.icon span,
#search_autosuggest .btn_close.icon strong{
display:none;
}


#search_autosuggest .btn_delete.text,
#search_autosuggest .btn_delete.text.on{
display:flex;
justify-content:flex-end;
align-items:center;
width:auto;
height:3rem;
margin:0;
padding:0;
border:0;
background:none;
}

#search_autosuggest .btn_delete.text,
#search_autosuggest .btn_delete.text.on{
color:var(--base-font-color);
}

#search_autosuggest .btn_delete .icon,
#search_autosuggest .btn_delete.on .icon{
width:1.75rem;
height:1.75rem;
}

#search_autosuggest .btn_delete .icon,
#search_autosuggest .btn_delete .icon.update,
#search_autosuggest .btn_delete .icon.update:hover{
background:url('/asset/img/btn/delete/icon/off.svg') no-repeat center right;
}

#search_autosuggest .btn_delete:hover .icon{
background:url('/asset/img/btn/delete/icon/hover.svg') no-repeat center right;
}

#search_autosuggest .btn_delete.on .icon{
background:url('/asset/img/btn/delete/icon/on.svg') no-repeat center right;
}

#search_autosuggest .btn_delete{
font-size:var(--m-font-size);
}


#search_autosuggest .btn-wrapper{
float:right;
}

#search_autosuggest{
float:left;
width:100%;
height:auto;
z-index:500;
margin:0;
padding:.25em;
background:var(--base-background-color);
border-left:var(--base-border-color) 1px solid;
border-right:var(--base-border-color) 1px solid;
border-bottom:var(--base-border-color) 1px solid;
display:none;
}

#search_autosuggest li{
display:inline-block;
width:100%;
margin:.25em 0;
padding:0;
}

#search_autosuggest li a{
display:inline-block;
width:100%;
margin:0;
padding:.25em;
border:var(--base-border-color) 1px solid;
background:var(--asset-background-color);
border-radius:.5rem;
}

#search_autosuggest li a:hover{
color:var(--light-font-color);
background:var(--dark-background-color);
}

#search_autosuggest footer{
background:var(--base-background-color);
}

#search footer{
display:block;
width:100%;
margin:0;
padding:0;
}