_search.scss

// Search
.td-search-wrapper {
    position: relative;
    background: transparent;
    width: 90%;
}

.td-search-wrapper:not(:focus-within) {
    color: $input-placeholder-color;
}

.td-search-wrapper .td-search-input:not(:focus) {
    background: transparent;
}

.td-search-wrapper .td-search-input {
    width: 100%;
    text-indent: 1.25em;

    &.form-control:focus {
        border-color: lighten($primary, 60%);
        box-shadow: 0 0 0 2px lighten($primary, 30%);
        color: inherit;
    }

    @if $enable-rounded {
        border-radius: 1rem;
    }
}

.td-search-wrapper .fa {
    // Vertically center the content.
    display: flex;
    justify-content: center;
    align-items:center;
    height: 100%;

    // Position this on the left of the input.
    position: absolute;
    left: 0.75em;

    // Click-through to the underlying input.
    pointer-events: none;
}

// Hide the icon on focus.
.td-search-wrapper:focus-within .fa {
    display: none;
}

.td-search-wrapper:focus-within .td-search-input {
   text-indent: 0px;
}

.popover.offline-search-result {
    // Override bootstrap default style (max-width: $popover-max-width;)
    max-width: 90%;

    .card {
        margin-bottom: $spacer * .5;

        .card-header {
            font-weight: bold;
        }
    }
}