﻿#searchProductLarge {
    position: absolute;
    border: 1px solid #DBDBDB;
    border-radius: 50px;
    height: 32px;
    padding: 5px 10px;
    top: 40px;
    left: 0;
    width: 20%;
    max-width: 250px;
    min-width: 190px;
}
.tbxSearchProductInput {
    border: 0;
    float: left;
    outline: none;
    margin: 3px 0;
    width: 150px;
}
.searchProductIcon                             {position:relative; margin: 0px 5px 0 0px; font-size: 12px; color:#000; font-family:Symbol, Sans-Serif; z-index:99; cursor:pointer; float:left;}
#overlay-searchProduct                        {height:100%; width:100%; overflow:auto; overflow-x:hidden; position:fixed; left:0; top:0; z-index:99999 !important; padding:0 20%; text-align:left; background:none; -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BBFFFFFF,endColorstr=#BBFFFFFF); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BBFFFFFF,endColorstr=#BBFFFFFF); zoom:1; background:rgba(255,255,255,.90); display:none;}
.overlay-searchProduct-close                   {text-decoration:none; font-size:40px; line-height:40px; position:fixed; top:4%; right:2%; color:#999; padding:0 5px; margin:0; cursor:pointer; display:block;}
.overlay-searchProduct-close:hover             {color:#000;}
.overlay-searchProduct-title                   {font:bold 60px/60px Arial, Sans-serif; color:#000; margin:0; padding:5% 0 2% 0; display:block; width:100%; max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.overlay-searchProduct-tbx                     {font-size:40px; padding:1% 2%; margin:0; border:2px solid #ccc; width:100%; outline-style:none; outline-width:0pt; background-color:#f7f7f7; color:#bbb; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none;}
.overlay-searchProduct-tbx:focus               {background-color:#fff; color:#000; border:2px solid #2980b9;}
.overlay-searchProduct-result                  {padding:3% 0 5% 0; margin:0; list-style:none; width:100%;}
.overlay-searchProduct-result li               {padding:0 0 2% 0; margin:0 0 2% 0; border-bottom:1px solid #ccc;}
.overlay-search-result li .image               {display:inline-block; float:left; width:10%; margin-right:10px;}
.overlay-searchProduct-result li:last-child    {padding:0; margin:0; border:0;}
.overlay-searchProduct-result li p.title       {padding:0; margin:0; font-size:20px; font-weight:bold; color:#000;}
.overlay-searchProduct-result li p.hits        {padding:2px 0 0 0; margin:0; font-size:10px;}
.overlay-searchProduct-result li a             {font-size:14px; text-decoration:none; display:inline-block;}
.overlay-searchProduct-result li a:hover       {text-decoration:underline;}
.overlay-searchProduct-info                    {font:normal 20px/20px Arial, Sans-serif; color:#60add0; margin:2% 0 0 0; padding:1% 2%; border:2px solid #8ccfef; background-color:#cbeeff;}
.overlay-searchProduct-alert                   {font:normal 20px/20px Arial, Sans-serif; color:#c3454a; margin:2% 0 0 0; padding:1% 2%; border:2px solid #df6c70; background-color:#fbcfd1;}
.overlay-searchProduct-preloader               {width:100px; height:100px; position:absolute; left:50%; top:50%; margin-left:-50px; margin-top:-50px;}

#divOverlaySearchResultsProduct li {
    list-style: none;
    border: 1px solid #F1E4E4;
    background-color: #fff;
    margin: 10px;
    padding: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
#divOverlaySearchResultsProduct .image img {
    display: block;
}
#divOverlaySearchResultsProduct a {
    text-decoration: none;
}
#divOverlaySearchResultsProduct .title {
    font-size: 1.2em;
    padding: 0;
}
@media screen and (max-width: 1280px) {
    #overlay-searchProduct                     {width:100%; overflow:auto; overflow-x:hidden; padding:0 5%;}
    .overlay-searchProduct-close               {font-size:25px; line-height:25px; top:4%; right:5%; position:absolute;}
    .overlay-searchProduct-title               {font:bold 24px/24px Arial, Sans-serif; margin:0 0 1.5% 0;}
    .overlay-searchProduct-tbx, 
    .overlay-searchProduct-tbx:focus           {font-size:18px; line-height:18px; padding:1% 2%; margin:0 0 1.5% 0; border-width:1px;}
    .overlay-searchProduct-result li p.title   {font-size:14px;}
    .overlay-searchProduct-result li p.hits    {font-size:10px; padding:0;}
    .overlay-searchProduct-result li a         {font-size:12px;}
    .overlay-searchProduct-info, 
    .overlay-searchProduct-alert               {font:normal 14px/14px Arial, Sans-serif; border-width:1px; padding:2%;}

    .searchProductIcon {
        margin: auto;
        float: none;
        display: block;
        font-size: 28px;
        cursor: pointer;
    }
    .tbxSearchProductInput {
        display: none;
    }
    #searchProductLarge {
        border: 0;
        width: auto;
        min-width: 50px;
        height: 50px;
        left: 50px;
        top: unset;
        bottom: 10px;
    }

    #divOverlaySearchResultsProduct .image {
        width: 20%;
    }
    #divOverlaySearchResultsProduct a{
        font-size: 0.8em;
    }
}
@media screen and (max-width: 680px) {
    .overlay-searchProduct-preloader           {width:80px; height:80px; margin-left:-40px; margin-top:-20px;}

    #searchProductLarge {
        padding: 1px 5px;
        font-size: 12px;
    }
}

@media screen and (max-width: 480px)
{
    .overlay-searchProduct-preloader           {width:50px; height:50px; margin-left:-25px; margin-top:-25px;}
}
