/*search*/
.search-container {
    position: relative;
    width: 25vw;
    min-width: 240px;
    max-width: 380px;
}

.search-suggestion {
    width: 100%;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100000;
    background: #fff;
    box-shadow: 0 0 0.2em 0 rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 0 0.2em 0 rgba(0, 0, 0, 0.1);
}

li.suggestion {
    display: block;
    padding: 0.6em 1em;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

li.suggestion:hover {
    background: #f8f8fa;
}

li.suggestion .hl {
    background: #e8e8e9;
    color: #51596f;
}

.search-bar {
    width: 100%;
    overflow: hidden;
    background: #fff;
    position: relative;
    /*border: 1px solid #08519c;*/
    color: #51596f;
}

.search-bar .input {
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-bar .icon-search {
    padding: 0.4em 0.6em;
    color: #51596f;
}

.search-bar input {
    display: block;
    width: 100%;
    border: none;
    border-radius: 0;
    color: #51596f;
    background: none;
    transition: .3s ease;
}

.search-bar input::placeholder {
    font-size: 1em;
    color: #999;
    font-style: italic;
}

.search-bar input:focus {
    outline: none;
}

.search-bar input:focus~.bar {
    border: none;
}

.search-bar input:focus~.bar:before {
    transform: translateX(0);
}


/*end search*/
.search-suggestion {
    /*text-transform: capitalize;*/
}
.suggestion-list {
    max-height: 70vh;
    overflow-y: scroll;
    overflow-x: hidden;
}


.search-suggestion .item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.search-suggestion .main-name {
    color: #51596f;
}

.search-bar input {
    text-transform: capitalize;
}