#svsearch {
    position: relative;
    width: 100%;
}

.svsearch-input {
    border: 1px solid #d9d9d9;
    box-shadow: none;
    transition: box-shadow .15s ease-out;
    font-size: 10px;
    padding: 7px 15px;
    outline: none;
    -webkit-appearance: none;
    width: 100%;
    box-sizing: border-box;

    height: 40px;
border: none;
line-height: 18px;
padding: 0 10px;
border: 1px solid #ddd;
color: #000;
}

.svsearch-input::placeholder {
    color: #000!important;
    text-align: center;
}

.svsearch-button {
    width: 50px;
    height: 100%;
    background: none;
    border: 0;
    position: absolute;
    z-index: 2;
    right: 0;
    display: block;
    top: 0;
}
.svsearch-button:focus, .svsearch-button:active  {
    border: 0;
    outline: none;
}
.svsearch-button--icon {
    width: 100%;
    height: 100%;
    display: flex;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56.966 56.966'%3E%3Cpath d='M55.146 51.887L41.588 37.786A22.926 22.926 0 0046.984 23c0-12.682-10.318-23-23-23s-23 10.318-23 23 10.318 23 23 23c4.761 0 9.298-1.436 13.177-4.162l13.661 14.208c.571.593 1.339.92 2.162.92.779 0 1.518-.297 2.079-.837a3.004 3.004 0 00.083-4.242zM23.984 6c9.374 0 17 7.626 17 17s-7.626 17-17 17-17-7.626-17-17 7.626-17 17-17z'/%3E%3C/svg%3E");
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center;
    background-color: rgb(255 255 255 / 0%);
}

.svsearch-dropdown {
    height: auto;
    position: absolute;
    background: #fff;
    width: 100%;
    max-height: 52rem;
    overflow-x: hidden;
    overflow-y: auto;
    box-shadow: 0 4px 10px rgba(0,0,0,.1);
    z-index: 6;
}

.svsearch-products {
    display: none;
}

.svsearch-category {
    display: none;
}

.svsearch-title {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.4rem;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.svsearch-items--list {
    display: flex;
    flex-direction: column;
}

.svsearch-item {
    display: inline-block;
    color: #999;
    cursor: pointer;
    font-size: 14px;
    text-decoration: none;
}

.svsearch-item:hover {
    text-decoration: underline;
    color: #999;
}

.svactive {
    display: flex;
    flex-direction: column;
    padding: 30px 40px;
}

.svsearch-input::-moz-placeholder {color: #c1c1c1;}
.svsearch-input::-webkit-input-placeholder { color: #c1c1c1; }
.svsearch-input:-ms-input-placeholder { color: #c1c1c1; }
.svsearch-input::-ms-input-placeholder { color: #c1c1c1; }
.svsearch-input::placeholder { color: #c1c1c1; }

.svsearch-close {
    position: absolute;
    top: 50%;
    right: 50px;
    transform: translate(-50%,-50%);
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath fill='%23ccc' d='M14 15a.997.997 0 01-.707-.293l-13-13A.999.999 0 111.707.293l13 13A.999.999 0 0114 15z'/%3E%3Cpath fill='%23ccc' d='M1 15a.999.999 0 01-.707-1.707l13-13a.999.999 0 111.414 1.414l-13 13A.993.993 0 011 15z'/%3E%3C/svg%3E") no-repeat;
    background-size: 100%;
    background-position: 50%;
    width: 15px;
    height: 15px;
    cursor: pointer;
    display: none;
}