.custom-typeahead {
    background-image: url(../Icons/Trademark/caret-down.svg);
    padding-right: 20px !important;
    background-size: .45em;
    background-position: calc(100% - .9em) center;
    background-repeat: no-repeat;
    text-overflow: ellipsis;
}

.custom-typeahead-display {
    //position: relative;
}

.custom-typeahead-wrapper:empty{
    display: none;
}

.custom-typeahead-dropdown {
    background-color: $custom-select-background-color;
    position: fixed;
    top: 0;
    right: 0;
    font-weight: 500;
    width: 300px;
    min-height: 50px;
    max-height: 300px;
    overflow-y: auto;
    padding: 8px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 999;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.18);
    -moz-box-shadow: 0 6px 12px rgba(0, 0, 0,0.18);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.18);

    .custom-typeahead-content {
        .custom-typeahead-content-table {
            width: 100%;
            table-layout: fixed;

            tr {
                &:nth-child(even) {
                    & > td {
                        background-color: $table-even-row-background-color
                    }
                }

                &:nth-child(odd) {
                    & > td {
                        background-color: $table-odd-row-background-color
                    }
                }

                &.custom-typeahead-rowBelow-head, &.custom-typeahead-rowBelow {
                    &:nth-child(4n+1), &:nth-child(4n+2) {
                        & > td {
                            background-color: $table-even-row-background-color
                        }
                    }

                    &:nth-child(4n+3), &:nth-child(4n+4) {
                        & > td {
                            background-color: $table-odd-row-background-color
                        }
                    }
                }

                td, th {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    line-height: 1.42857;
                    padding: 8px;
                    font-size: 12px;

                    @media (max-width: $max-screen-sm) {
                        &.custom-typeahead-hidden-sm {
                            display: none;
                        }
                    }

                    @media (min-width: $min-screen-md) {
                        &.custom-typeahead-visible-sm {
                            display: none;
                        }
                    }
                }

                th {
                    position: sticky;
                    top: 0;
                    background-color: $table-header-background-color;
                    border-bottom: 2px solid $table-border-color;
                }

                td {
                    border-bottom: 1px solid $table-border-color;

                    &.custom-typeahead-error {
                        text-align: center;
                    }

                    &.custom-typeahead-multiline {
                        white-space: unset;
                        text-overflow: unset;
                    }
                }

                &.custom-typeahead-option {
                    vertical-align: top;

                    &:hover, &:hover + .custom-typeahead-rowBelow {
                        & > td {
                            background-color: $table-hover-row-background-color;
                        }
                    }

                    &.custom-typeahead-option-selected, &.custom-typeahead-option-selected + .custom-typeahead-rowBelow {
                        & > td {
                            background-color: $table-hover-row-background-color;
                        }
                    }
                }

                &.custom-typeahead-rowBelow-head {
                    & > td {
                        border-bottom: 0;
                    }
                }

                &.custom-typeahead-rowBelow {
                    border-bottom: 1px solid $table-border-color;
                }

                & > .custom-typeahead-description {
                    font-size: 11px;
                    padding-top: 0px;
                    color: $tabs-nonactive-text;
                }
            }
        }
    }

    .custom-typeahead-dropdown-loader {
        height: 100%;
        width: 100%;
        text-align: center;
        color: $custom-select-border-color;
    }

    &.custom-typeahead-dropdown-invoice {
        width: 45%;

        @media (max-width: $max-screen-sm) {
            & {
                width: 90%;
            }
        }
    }
}
