.search-input-button{
    cursor: pointer;
}

.search-input-button svg{
    fill: none;
    stroke: var(--dark-blue-color);
    transition: stroke 0.5s ease;
}

.search-input-button:hover svg{
    stroke: var(--orange-color);
}

.search-input-line{
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 0;
    opacity: 0;
    background-color: rgba(240, 241, 245, 1);
    transition: opacity 0.5s ease, height 0.5s ease;
    transform: translateY(-1000%);
}

.search-input-line.search-input-line_show{
    opacity: 1;
    transform: translateY(0);
    height: auto;
}

.search-input-line__area{
    display: flex;
    align-items: center;
    position: relative;
   
    padding: 21px 0px;
    transform: translateY(-1000%);
}


.search-input-line.search-input-line_show .search-input-line__area {
    transform: translateY(0);
}
.search-input-line__area__input-wrapper{
    display: flex;
    align-items: center;
    width: 100%;
    margin-right: 25px;
    min-width: 260px;
}

.search-input-line__area__input,
.search-input-line__area__input:active,
.search-input-line__area__input:hover,
.search-input-line__area__input:focus
{
    outline: 0;
    outline-offset: 0;
    border: none;
}

.search-input-line__area__input,
.search-input-line__area__input:active,
.search-input-line__area__input:hover,
.search-input-line__area__input:focus{
    /*border-bottom: 1px solid var(--dark-blue-color);*/
}

.search-input-line__area__input{
    background-color: rgba(0, 0, 0, 0);
    width: 78%;
    height: 50%;
    padding: 12px 0;
    color: var(--dark-blue-color);
}

.search-input-line__area__submit{
    height: 27px;
    width: 26px;
    margin-right: 25px;
}

.search-input-line__area__submit{
    stroke: #041229;
    fill: none;
}

.search-input-line__close{
    position: absolute;
    right: 0;
}

.search-result{
    position: absolute;
    top: 99%;
    width: 100%;
    box-sizing: border-box;
    background-color: rgb(240, 241, 245);
    transition: padding 0.25s ease, height 0.25s ease;
}

.small-search-form_open .search-result{
    padding: 24px 40px 40px;
}

.small-search-result__title{
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 40px;
}

.small-search-form__item{
    display: block;
    margin-bottom: 16px;
    transition: color 0.25s ease;
}

.small-search-form__item:hover{
    color: var(--orange-color);
}

.small-search-form__button{
    margin-top: 24px;
    transition: color 0.25s ease;
    position: relative;
    font-weight: 500;
}

.small-search-form__button svg{
    display: none;
}

.small-search-form__button::after{
    content: '';
    position: absolute;
    display: inline;
    width: 16px;
    height: 16px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxMyAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAuNjQ2NDQ3IDEyLjMwMzJDMC40NTExODQgMTIuNDk4NCAwLjQ1MTE4NCAxMi44MTUgMC42NDY0NDcgMTMuMDEwM0MwLjg0MTcwOSAxMy4yMDU2IDEuMTU4MjkgMTMuMjA1NiAxLjM1MzU1IDEzLjAxMDNMMC42NDY0NDcgMTIuMzAzMlpNMTIuODEzNyAxLjM0MzAzQzEyLjgxMzcgMS4wNjY4OSAxMi41ODk5IDAuODQzMDMgMTIuMzEzNyAwLjg0MzAyOUw3LjgxMzcxIDAuODQzMDI5QzcuNTM3NTcgMC44NDMwMjkgNy4zMTM3MSAxLjA2Njg5IDcuMzEzNzEgMS4zNDMwM0M3LjMxMzcxIDEuNjE5MTcgNy41Mzc1NyAxLjg0MzAzIDcuODEzNzEgMS44NDMwM0wxMS44MTM3IDEuODQzMDNMMTEuODEzNyA1Ljg0MzAzQzExLjgxMzcgNi4xMTkxNyAxMi4wMzc2IDYuMzQzMDMgMTIuMzEzNyA2LjM0MzAzQzEyLjU4OTkgNi4zNDMwMyAxMi44MTM3IDYuMTE5MTcgMTIuODEzNyA1Ljg0MzAzTDEyLjgxMzcgMS4zNDMwM1pNMS4zNTM1NSAxMy4wMTAzTDEyLjY2NzMgMS42OTY1OEwxMS45NjAyIDAuOTg5NDc2TDAuNjQ2NDQ3IDEyLjMwMzJMMS4zNTM1NSAxMy4wMTAzWiIgZmlsbD0iIzA0MTIyOSIvPgo8L3N2Zz4K);
    background-position: center;
    background-repeat: no-repeat;
    margin-left: 8px;
    top: 50%;
    transform: translateY(-50%);
    transition: 0.25s ease;
}

.small-search-form__button:hover{
    color: var(--orange-color);
}

.small-search-form__button:hover::after{
    filter: invert(54%) sepia(69%) saturate(2379%) hue-rotate(341deg) brightness(105%) contrast(91%);
}

@media screen and (max-width: 1023px) {
    .search-input-button svg{
        width: 30px;
        height: 30px;
    }
    .search-input-line {
        padding: 0 16px;
        background-color: rgba(240, 241, 245, 1);
    }
    .search-input-line__area{
        display: flex;
        align-items: center;
        position: relative;
        padding: 16px;
        height: 60px;
    }
    .search-result{
        left: -16px;
        width: calc(100% + 34px);
    }
}