[component-name=UserSearch]{display:none; }
[component-name=UserSearch] .search_results{
    background-color: lightgray; border:1px solid white; margin-top:5px;
    overflow:auto; display:none; position:absolute;
}

[component-name=UserSearch] .close{text-align:right; margin-bottom:5px;}
[component-name=UserSearch] .close span{cursor:pointer;}

[component-name=UserSearch] .search_results .search_item{
    margin-bottom:20px;display:block;cursor:pointer;
}

[component-name=UserSearch] .search_results .search_item img{
    width:30px; height:30px;
}

[component-name=UserSearch] .search_results .search_item a{
    font-size:20px;
}
 
[component-name=UserSearch] input[name=search]{
    color:grey; background-color:white; vertical-align: bottom;
    width:calc(100% - 50px); height:30px; font-size:24px;
}

[component-name=UserSearch].theme_light input[name=search]{color:grey;background-color:white;}
[component-name=UserSearch].theme_dark input[name=search]{color:white;background-color:darkgrey;}


[component-name=UserSearch] img.search{
    background-color: white; display:inline;  
    width:30px; height:30px; vertical-align: bottom;
}




@media only screen and (min-width: 1200px) {
    [component-name=UserSearch] .search_results{ max-height:300px;  }
    [component-name=UserSearch] .search_results .search_item span.name{font-size:20px;}
     
   
}/*min-width: 1200px*/

@media only screen and (max-width: 1200px) {
    [component-name=UserSearch] .search_results .search_item a{font-size:20px;}

}/*max-width: 1200px*/