.search-form {
    display: block;
    position: relative;
    width: 100%;
    margin-top: 5px;

    input.form-control {
        border-radius: 0;
        padding: 4px 40px 4px 20px;
        &::placeholder{
            color: $color-text-2;
        }
    }

    .btn {
        position: absolute;
        right: 15px;
        top: 0;
        font-size: 0;
        font-weight: 400;
        height: 100%;
        border-radius: 100px;
        color: #7573a6;
        border-color: transparent;
        background-color: transparent;
        padding: 0;
        pointer-events: none;

        &:before {
            content: '\e90a';
            font-size: 16px;

            @extend %tm-icon;
        }
    }

    @include media-breakpoint-up(sm) {
        width: auto;

        input.form-control {
            width: 100%;
        }
    }

    @include media-breakpoint-up(lg) {

        input.form-control {
            width: 350px;
        }
    }

    @include media-breakpoint-up(xl) {

        input.form-control {
            width: 400px;
        }
    }
}

.autocomplete {
    position: relative;
  }
  
  .autocomplete-results {
    background-image: linear-gradient(-135deg, #373658 0%, #40406a 100%);
    border-radius: 5px;
    box-shadow: 0px 5px 20px #1d1e31;
    list-style: none;
    margin-left: 10px;
    margin-bottom: 0;
    max-height: 268px;
    overflow: auto;
    padding-left: 1px;
    position: absolute;
    width: calc(100% - 20px);
    z-index: 5;
  }
  
  .autocomplete-result {
    cursor: pointer;
    color: #7573a6;
    border-bottom: 1px solid #45446b;
    padding: 4px 10px;
    transition: .3s all ease-in;

    small {
         line-height: 10px;
         font-size: 11px;
         padding-bottom: 8px;
         transition: .3s all ease-in;
    }

    mark {
        background-color: transparent;
        color: #8f8dc1 !important;
        font-size: inherit !important;
        padding: 0;
        transition: .3s all ease-in;
    }
}
  
  .autocomplete-result.is-active,
  .autocomplete-result:hover {
    background-color: #7573a6;
    color: $color-white;

    .tomo-list__text small,
    .tomo-list__text mark {
        color: $color-white !important;
    }
  }
  
