:root{

    /* Colors */
    --ai-primary:#0b57d0;
    --ai-primary-hover:#1a73e8;

    --ai-text:#222;
    --ai-text-light:#666;
    --ai-border:#e5e5e5;
    --ai-bg:#fff;
    --ai-bg-light:#f5f5f5;

    /* Radius */
    --ai-radius-sm:8px;
    --ai-radius-md:12px;
    --ai-radius-lg:16px;
    --ai-radius-xl:20px;

    /* Shadow */
    --ai-shadow:0 3px 10px rgba(0,0,0,.08);
    --ai-shadow-lg:0 8px 30px rgba(0,0,0,.15);

    /* Transition */
    --ai-transition:.25s;

}

.bg-wrap{
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        /*background-color: #000000000;*/
        z-index: 100;
        display: none;
    }
    
/*input clear button and type */
    #clear {
      position: absolute;
      float: right;
      height: 2.8em;
      width: 2em;
      top: 0px;
      right: 85px;
      /*background: #aaa;*/
      color: white;
      text-align: center;
      cursor: pointer;
      border-radius: 0px 4px 4px 0px;
    }
    #clear:after {
      content: "\2716";
      position: absolute;
      top: 8px;
      right: 5px;
    }
    #clear:hover,
    #clear:focus {
      /*background: #888;*/
    }
    #clear:active {
      /*background: #666;*/
    }
/*End input clear button and type */

.suggest-category{

background:#f8f8f8;

padding:8px 15px;

font-size:13px;

font-weight:bold;

color:#777;

border-top:1px solid #eee;

}

.suggestion-item{

display:flex;

align-items:center;

gap:10px;

padding:10px 15px;

transition:.2s;

}

.suggestion-item:hover{

background:#f5f5f5;

}
.suggestion-item.active{
    background:#e8f0fe;
    color:#1967d2;
}

.suggestion-item.active span{
    color:#1967d2;
}

#suggestions{
        border: 1px solid #ccc;
        background-color: #f9f9f9;
        width: 100%;
        max-height: 200px;
        overflow-y: auto;
        display: none;
        /*display: block;*/
    position: absolute;
    z-index: 1000;
    }
    #suggestions div {
        padding: 5px;
        cursor: pointer;
    }
    #suggestions div:hover {
        background-color: #ddd;
    }
    /*.uk-form-icon {*/
    /*height: 54px;*/
    /*}*/
    .d-none{
        display:none;
    }
    
    .bg-wrap{
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: #00000000;
        z-index: 10;
        display: none;
    }
    
.suggest-category{

background:#f8f8f8;

padding:8px 15px;

font-size:13px;

font-weight:bold;

color:#777;

border-top:1px solid #eee;

}

.suggestion-item{

display:flex;

align-items:center;

gap:10px;

padding:10px 15px;

transition:.2s;

flex-wrap: wrap;

}

.suggestion-item:hover{

background:#f5f5f5;

}
.suggestion-item.active{
    background:#e8f0fe;
    color:#1967d2;
}

.suggestion-item.active span{
    color:#1967d2;
}
mark{

background:#fff;

/*padding:1px 3px;*/

border-radius:3px;

font-weight:700;

color:#000;

}

.searchText.active{
    background:#e8f0fe;
    color:#000;
    cursor:pointer;
}

.searchText{
    padding:10px;
    cursor:pointer;
}


#suggestions a.searchText{
    display:block !important;
    padding:10px !important;
    color:#000 !important;
    text-decoration:none !important;
    background:#fff !important;
    cursor:pointer !important;
}

#suggestions a.searchText:hover{
    background:#ddd !important;
}

#suggestions a.searchText.active{
    background:#e8f0fe !important;
}

