/**
* components: search
*/

/* .search-box {
    display:grid;
    grid-template-columns: auto 64px; gap:4px;
    
} */

.search .frame .suggestion-frame {
    width:98%;
    overflow: hidden;
    overflow-y: auto;
    word-wrap: normal;
    margin-top:2px;
    border-right:1px solid #CAD5E0;
}
.search .frame .suggestion-frame .suggestions {
    display:none;
    position:absolute;
    width:55%;
    height:55%;
    z-index:9;
    overflow:hidden;
    overflow-y: auto;
    padding:4px;;
    
    
   
    
}
.search .frame .input-frame{
    display:grid;
    grid-template-columns: auto 32px 48px ;
    gap:4px;
    align-items: center;
    align-content:center;
    padding:4px;
    background-color: rgba(255,255,255,0.8);
}
.search .frame .input-frame i {color:#000000}
.search .frame .input-frame .found { font-size:11px; color:maroon; text-align: center;}
.search .frame input[type="text"] {
    
    padding:8px;
    font-size:14px;
    font-weight:normal;
    border:2px solid transparent;
    outline: 0px;
    background-color:#D3D3D3;
    
}

.search .frame .suggestions .item {
    display:grid;
    grid-template-columns: 60px auto ; 
    height:60px;  
    gap:4px;
    padding:8px;
    align-items:center;
}

.search .frame .suggestions .item .title { width:85%; overflow:hidden; font-size:14px; font-weight: normal; text-transform:capitalize; text-overflow: ellipsis;  white-space: nowrap;}
.search .frame .suggestions .item .author {width:80%; overflow:hidden; font-size:14px; font-weight: lighter;text-transform: capitalize;text-overflow: ellipsis;  white-space: nowrap;}
.search .frame .suggestions .item .picture{
    height:50px;
    display:grid;
    grid-template-columns: auto;
    padding:4px;
}
.search .frame .suggestions .item .link {
    display:grid;
    grid-template-columns: auto  120px;
    
    font-size:12px;
    align-items:center;
    align-content: center;
    overflow:hidden;
}