ul.tag-editor {
    display: flex;
    align-items: center;
    overflow: overlay;
    flex-wrap: wrap;
}

ul.tag-editor li:first-child {
    line-height: 0;
}

ul.tag-editor li:not(:first-child) {
    border-radius: 40px !important;
    padding: 4px 4px 4px 2px !important; 
    font-size: 14px !important; 
    background-color: var(--grey-01) !important; 
    color: black !important; 
    line-height: 1 !important;
    height: 22px;
    margin: 5px 4px 5px 0;
}

ul.tag-editor li .tag-editor-tag {
    background: none;
    color: black !important; 
}

ul.tag-editor li .tag-editor-tag input {
    color: var(--secondary); 
    border: 0  !important;
    outline: none  !important;
    padding: 3px 0 6px 0 !important; 
}

ul.tag-editor li .tag-editor-delete {
    background: none;
    color: var(--secondary) !important; 
} 

ul.tag-editor li .tag-editor-delete i {
    top: 0;
}

ul.tag-editor li:focus-within *,
ul.tag-editor li:focus-within  {
    background-color: transparent !important;
    color: black !important;
}

ul.tag-editor li:focus-within .tag-editor-spacer {
    color: transparent !important;
}

.form-control.tag-editor-large ~ .tag-editor {
    height: 80px;
    align-items: start;
    display: block;
    padding: 5px;
}

/* New plugin overwrites */
.tagify {
    --tag-pad: 0.2em 0.5em;
    --tag-inset-shadow-size: 1.1em;
    --tag--min-width: 1ch;
    --tag--max-width: auto;
    --tag-hide-transition: 0.3s;
    --loader-size: .8em;
    --readonly-striped: 1;
    display: flex;
    align-items: flex-start !important;
    flex-wrap: wrap;
    border: 1px solid var(--input-text-border-color);
    padding: 0 !important;
    line-height: 0;
    cursor: text;
    outline: 0;
    position: relative;
    box-sizing: border-box;
    transition: .1s;
}
.tagify.form-control.tag-editor-large {
    /* display: block; */
    line-height: 3;
    height: 80px;
    overflow: auto;
    scrollbar-width: thin !important;
}
.tagify__dropdown__item--active {
    --tagify-dd-color-primary: var(--tagify-dropdown-item-background-color-hover-active) !important;
    color: var(--tagify-dropdown-item-text-color-hover-active) !important;
}
.tagify__tag {
    line-height: 1rem;
}
.tagify__tag>div {
    border-radius: 8px;
}
.tagify__dropdown__wrapper {
    border-radius: 5px;
    box-shadow: 0 5px 10px rgb(0 0 0 / 20%);
    font-size: 14px;
    border: 1px solid #bbbbbb;
    color: var(--tagify-dropdown-item-text-color) !important;
	scrollbar-width: thin !important;
}

.tagify::-webkit-scrollbar-track,
.tagify__dropdown__wrapper::-webkit-scrollbar-track {
	background-color: var(--white-02) !important;
	-webkit-box-shadow: inset 0 0 6px var(--white-02) !important;
    box-shadow: inset 0 0 6px var(--white-02) !important;
}
.tagify::-webkit-scrollbar,
.tagify__dropdown__wrapper::-webkit-scrollbar {
	background-color: var(--white-02) !important;
	width: 5px !important;
	height: 5px;
}
.tagify::-webkit-scrollbar-thumb,
.tagify__dropdown__wrapper::-webkit-scrollbar-thumb {
	background-color: var(--scroll-thumb-base-custom-color) !important;
	border-radius: 10px;
}

.tagify__dropdown {
    z-index: 10002 !important;
}
.tagify__tag-text {
    white-space: nowrap !important;
    text-overflow: initial !important;
    display: initial !important;
}
.tagify__tag>div {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.tagify.tagify--hasMaxTags {
    padding-right: 8px !important;
    overflow: hidden !important;
}
.tagify.tagify--hasMaxTags tag.tagify__tag ~ span.tagify__input {
    display: none;
}
.tagify.tagify--hasMaxTags .tagify__tag {
    width: 100%;
}
.tagify:not(.tagify--hasMaxTags),
.tagify.single-line:not(.tagify--hasMaxTags) {
    overflow: auto;
}
.tagify__input {
    line-height: 1rem;
    min-width: initial;
}

.tagify.tagify--select.form-control.selectMode .tagify__input{
    color: var(--tagify-dropdown-input-search-text-color);
    background-color: var(--tagify-dropdown-input-search-background-color);
    height: 22px;
    border-radius: 6px;
}

.tagify__tag.tagify--notAllowed {
    --tag-remove-btn-bg--hover: var(--red-02);
}

.tagify__tag.tagify--notAllowed > div {
    color: var(--tag-invalid-color);
}

.tagify__tag.tagify--notAllowed:not(.tagify__tag--editable) div>span {
    opacity: initial;
}

/*--------------------------------------------------------
Fixes
---------------------------------------------------------*/

/* Autocomplete user select fixes*/
.ui-widget-content {
    max-height: 300px;
    overflow: auto;
    z-index: 1999;
}
.ui-widget-content {
	scrollbar-width: thin !important;
}
.ui-widget-content::-webkit-scrollbar-track {
	background-color: var(--white-02) !important;
	-webkit-box-shadow: inset 0 0 6px var(--white-02) !important;
    box-shadow: inset 0 0 6px var(--white-02) !important;
}
.ui-widget-content::-webkit-scrollbar {
	background-color: var(--white-02) !important;
	width: 5px !important;
	height: 5px;
}
.ui-widget-content::-webkit-scrollbar-thumb {
	background-color: var(--scroll-thumb-base-custom-color) !important;
	border-radius: 10px;
}
.ui-autocomplete .ui-menu-item {
    line-height: 1;
    margin: 4px 0;
}
.ui-autocomplete .ui-menu-item:hover {
    background-color: var(--grey-01) !important;
    color: var(--primary) !important;
}
.ui-autocomplete .ui-menu-item [class*="icon-"].ui-menu-item-wrapper {
    vertical-align: bottom;
}
@media (max-width: 576px) {
	.ui-widget-content {
		max-width: calc(100vw - 32px);
	}
}