.token-autocomplete-container {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid #E6E6E6;
    background-color: #FFFFFF;
}

.token-autocomplete-container:focus-within {
    border-color: #668DC6;
}

.token-autocomplete-container.token-autocomplete-readonly {
    border-color: #747474;
    background-color: #E9ECEF;
}

.token-autocomplete-container, .token-autocomplete-container * {
    box-sizing: border-box;
}

.token-autocomplete-container .token-autocomplete-tokens {
    flex-grow: 1;
    display: inline-flex;
    flex-wrap: wrap;
}

.token-autocomplete-container .token-autocomplete-input {
    color: #212529;
    font-size: 16px;
    line-height: 32px;
    height: 32px;
    outline: none;
    margin: 4px 2px;
    padding: 0 8px;
    flex-grow: 1;
}

.token-autocomplete-container .token-autocomplete-input:empty::before {
    content: attr(data-placeholder);
    color: rgba(0, 0, 0, 0.6);
}

.token-autocomplete-container .token-autocomplete-token {
    font-size: 16px;
    line-height: 32px;
    color: rgba(0, 0, 0, 0.6);
    background-color: #E6E6E6;
    margin: 4px 2px;
    border-radius: 32px;
    padding: 0 5px 0 8px;
    pointer-events: none;
    display: flex;
    align-items: center;
}

.token-autocomplete-container.token-autocomplete-readonly .token-autocomplete-token {
    background-color: #cccccc;
}

.token-autocomplete-container.token-autocomplete-singleselect .token-autocomplete-input {
    padding: 0 24px 0 8px;
    width: 100%;
    position: relative;
    cursor: pointer;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.token-autocomplete-container.token-autocomplete-readonly .token-autocomplete-input {
    display: inherit;
    cursor: default;
}

.token-autocomplete-container.token-autocomplete-singleselect .token-autocomplete-input[contenteditable="true"] {
    cursor: text;
}

.token-autocomplete-container.token-autocomplete-singleselect .token-autocomplete-toggle-button {
    cursor: pointer;
    position: absolute;
    top: 12px;
    right: 2px;
    border: 6px solid;
    border-color: #000 transparent transparent transparent;
    background: none;
    margin: 6px;
    padding: 0;
}

.token-autocomplete-container.token-autocomplete-readonly.token-autocomplete-singleselect .token-autocomplete-toggle-button {
    border-color: #cccccc transparent transparent transparent;
}

.token-autocomplete-container.token-autocomplete-singleselect.token-autocomplete-suggestions-displayed .token-autocomplete-toggle-button {
    border-color: transparent transparent #000 transparent;
    top: 5px;
}

.token-autocomplete-container .token-autocomplete-token:hover {
    background-color: #EF9A9A;
}

.token-autocomplete-container .token-autocomplete-delete-button {
    cursor: pointer;
    pointer-events: auto;
    border-radius: 50%;
    height: 24px;
    width: 24px;
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHZpZXdCb3g9IjAgMCAzMiAzMiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gPHBhdGggZD0iTTkuNjEyODk5NDQsOC4yMDk3MDQ2MSBMOS43MDcxMDY3OCw4LjI5Mjg5MzIyIEwxNi4wMzcsMTQuNjIyIEwyMi4zNjcwNDM0LDguMjkyODkzMjIgTDIyLjQ2MTI1MDcsOC4yMDk3MDQ2MSBDMjIuODUzNTQxOSw3LjkwNDY3OTcyIDIzLjQyMDc3Myw3LjkzMjQwOTI2IDIzLjc4MTI1NjksOC4yOTI4OTMyMiBDMjQuMTcxNzgxMiw4LjY4MzQxNzUxIDI0LjE3MTc4MTIsOS4zMTY1ODI0OSAyMy43ODEyNTY5LDkuNzA3MTA2NzggTDIzLjc4MTI1NjksOS43MDcxMDY3OCBMMTcuNDUxLDE2LjAzNyBMMjMuNzgxMjU2OSwyMi4zNjcwNDM0IEMyNC4xNzE3ODEyLDIyLjc1NzU2NzcgMjQuMTcxNzgxMiwyMy4zOTA3MzI2IDIzLjc4MTI1NjksMjMuNzgxMjU2OSBDMjMuNDIwNzczLDI0LjE0MTc0MDkgMjIuODUzNTQxOSwyNC4xNjk0NzA0IDIyLjQ2MTI1MDcsMjMuODY0NDQ1NSBMMjIuMzY3MDQzNCwyMy43ODEyNTY5IEwxNi4wMzcsMTcuNDUxIEw5LjcwNzEwNjc4LDIzLjc4MTI1NjkgTDkuNjEyODk5NDQsMjMuODY0NDQ1NSBDOS4yMjA2MDgyNCwyNC4xNjk0NzA0IDguNjUzMzc3MTgsMjQuMTQxNzQwOSA4LjI5Mjg5MzIyLDIzLjc4MTI1NjkgQzcuOTAyMzY4OTMsMjMuMzkwNzMyNiA3LjkwMjM2ODkzLDIyLjc1NzU2NzcgOC4yOTI4OTMyMiwyMi4zNjcwNDM0IEw4LjI5Mjg5MzIyLDIyLjM2NzA0MzQgTDE0LjYyMiwxNi4wMzcgTDguMjkyODkzMjIsOS43MDcxMDY3OCBDNy45MDIzNjg5Myw5LjMxNjU4MjQ5IDcuOTAyMzY4OTMsOC42ODM0MTc1MSA4LjI5Mjg5MzIyLDguMjkyODkzMjIgQzguNjUzMzc3MTgsNy45MzI0MDkyNiA5LjIyMDYwODI0LDcuOTA0Njc5NzIgOS42MTI4OTk0NCw4LjIwOTcwNDYxIFoiIGZpbGw9InJnYmEoMCwgMCwgMCwgMC42KSI+PC9wYXRoPjwvc3ZnPg==')
}

.token-autocomplete-container .token-autocomplete-delete-button:hover {
    background-color: #e55858;
}

.token-autocomplete-container .token-autocomplete-token .token-autocomplete-delete-button {
    margin-left: 4px;
    flex-shrink: 0;
}

.token-autocomplete-container > .token-autocomplete-delete-button {
    flex-shrink: 0;
    margin-right: 6px;
    display: none;
    background-color: #E6E6E6;
}

.token-autocomplete-container.token-autocomplete-has-value > .token-autocomplete-delete-button {
    display: block;
}

.token-autocomplete-container .token-autocomplete-suggestions {
    display: none;
    position: fixed;
    z-index: 1000;
    list-style-type: none;
    padding: 0;
    margin: 0;
    max-height: 220px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.token-autocomplete-container .token-autocomplete-suggestions:has(li) {
    border: 1px solid #E6E6E6;
}

.token-autocomplete-container .token-autocomplete-suggestions li {
    width: 100%;
    padding: 8px;
    cursor: pointer;
    color: #000000;
    background-color: #fdfdfd;
}

.token-autocomplete-container .token-autocomplete-suggestions li.token-autocomplete-suggestion-disabled, .token-autocomplete-container .token-autocomplete-suggestions li.token-autocomplete-suggestion-disabled:hover {
    background-color: #cccccc;
    cursor: unset;
}

.token-autocomplete-container .token-autocomplete-suggestions li.token-autocomplete-suggestion-active {
    color: #747474;
    background-color: #fdfdfd;
}

.token-autocomplete-container .token-autocomplete-suggestions li.token-autocomplete-suggestion-highlighted, .token-autocomplete-container .token-autocomplete-suggestions li:hover {
    background-color: #95caec;
}

.token-autocomplete-container .token-autocomplete-suggestions li .token-autocomplete-suggestion-description {
    display: block;
    font-size: 0.7em;
    color: #808080;
}

.token-autocomplete-container.token-autocomplete-singleselect.token-autocomplete-has-value .token-autocomplete-input {
    padding-right: 50px;
}

.token-autocomplete-container.token-autocomplete-singleselect.token-autocomplete-has-value .token-autocomplete-delete-button {
    position: absolute;
    right: 18px;
}