.search {
    padding-left: 25px;
    display: flex;
    align-items: center;
    margin: auto;
    width: auto;
    max-width: 612px;
    height: 54px;
    background-color: white;
    border-radius: 25px;
    -webkit-box-shadow: 0px 10px 38px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 10px 38px 0px rgba(0,0,0,0.1);
    box-shadow: 0px 10px 38px 0px rgba(0,0,0,0.1);
}

.select_area {
    color: #4451FE;
    display: flex;
    align-items: center;
    font-family: 'Roboto', sans-serif;
    line-height: 24px;
    font-weight: medium;
}

.text {
    padding-left: 15px;
    white-space: nowrap;
}

@media only screen and (max-width: 991px) {
    .text {
        display: none;
    }
}

.line {
    margin-left: 15px;
    border-left: 1px solid #D8D8D8;
    height: 40px;
}

.search_text {
    width: 100%;
    border: none;
    margin-left: 15px;
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
    line-height: 24px;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #ADB1B8;
}


.text_and-icon {
    width: 100%;
    display: flex;
    align-items: center;
    margin-right: 1.5em;
}

.search_icon {
    color: #4e73df;
    transition: all .6s ease-in-out;
    -webkit-transition: all .6s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all .6s ease-in-out; /** Firefox **/
    -o-transition: all .6s ease-in-out; /** Opera **/
}

    .search_icon:hover {
        color: #2e59d9;
    }

.search_text:focus {
    outline: none !important;
}

    .search_text:focus + .search_icon {
        color: #4451FE;
        transform: translate(30px,0);
        -webkit-transform: translate(30px,0);
        -o-transform: translate(30px,0);
        -moz-transform: translate(30px);
    }

@media screen and (max-width: 991px) {
    .text_and-icon {
        margin-right: unset !important;
    }

    .search_box {
        margin-right: 0;
    }

    .search_text:focus + .search_icon {
        transform: translate(0px,0);
        -webkit-transform: translate(0px,0);
        -o-transform: translate(0px,0);
        -moz-transform: translate(0px);
        opacity: 0;
        transition: opacity .6s ease-in-out;
        -webkit-transition: opacity .6s ease-in-out; /** Chrome & Safari **/
        -moz-transition: opacity .6s ease-in-out; /** Firefox **/
        -o-transition: opacity .6s ease-in-out; /** Opera **/
    }

    .search_text:not(:focus) + .search_icon {
        opacity: 1;
        transition: opacity .6s ease-in-out;
        -webkit-transition: opacity .6s ease-in-out; /** Chrome & Safari **/
        -moz-transition: opacity .6s ease-in-out; /** Firefox **/
        -o-transition: opacity .6s ease-in-out; /** Opera **/
    }
}