.oj-search-wrapper{
    position:relative;
    width:100%;
    max-width:420px;
}

.oj-search-box{
    display:flex;
    align-items:center;
    background:#fff;
    border:1px solid #E4E7EC;
    border-radius:12px;
    padding:10px 14px;
    transition:.25s;
}

.oj-search-box:focus-within{
    border-color:#FF6B00;
    box-shadow:0 0 0 3px rgba(255,107,0,.12);
}

.oj-search-icon{
    color:#98A2B3;
    margin-right:10px;
    font-size:15px;
}

.oj-search-input{
    flex:1;
    border:none;
    outline:none;
    background:transparent;
    font-size:14px;
}

.oj-search-clear{
    border:none;
    background:none;
    cursor:pointer;
    color:#98A2B3;
    font-size:14px;
}

.oj-search-results{

    position:absolute;

    top:105%;

    left:0;

    right:0;

    background:#fff;

    border-radius:12px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    display:none;

    overflow:hidden;

    z-index:999;

}

.oj-search-item{

    display:block;

    padding:12px 16px;

    text-decoration:none;

    color:#101828;

    transition:.2s;

}

.oj-search-type{

    font-size:11px;

    color:#98A2B3;

    margin-bottom:4px;

    text-transform:uppercase;

    letter-spacing:.6px;

}

.oj-search-title{

    font-size:14px;

    color:#101828;

}

.oj-search-item:hover{

    background:#FFF5ED;

}

.oj-search-item.active{

    background:#FFF5ED;

    color:#FF6B00;

    font-weight:600;

}

.oj-search-loading,

.oj-search-empty{

    padding:16px;

    color:#667085;

    text-align:center;

    font-size:14px;

}