.input-datalist-imitate {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    /*INPUT-CUSTOM*/
    background-color: var(--white);
    color: var(--text-color-main);
    /*border*/
    border-radius: var(--border-radius-default);
    border: none;
    outline: 1px solid var(--color-grey-light);
    outline-offset: -1px;
    /*typography*/
    font-size: var(--font-size-medium);
    line-height: var(--line-height-default);
    font-weight: var(--font-weight-light);
    /*layout*/
    padding: 4px 12px; /*different than input-custom*/
    min-height: 40px;
    width: 100%;
    transition: outline-color 0.5s ease;
}

.input-datalist-email {
    --search-icon-size: 20px;
    /*INPUT-CUSTOM*/
    background-color: var(--white);
    color: var(--text-color-main);
    /*border*/
    border-radius: var(--border-radius-default);
    border: none;
    outline: 1px solid var(--color-grey-light);
    outline-offset: -1px;
    /*typography*/
    font-size: var(--font-size-medium);
    line-height: var(--line-height-default);
    font-weight: var(--font-weight-light);
    position: relative;
    padding: 6px 8px 6px calc(8px + var(--search-icon-size) + 8px);
    min-height: 34px;
    /* outline: 1px solid var(--color-grey-light);
    border-radius: var(--border-radius-default);*/
    transition: outline-color 0.5s ease;
}
.input-datalist-imitate:hover, 
.input-datalist-email:hover {
    outline: 1px solid var(--color-grey-dark);
}

.input-datalist-imitate:focus-within, 
.input-datalist-email:focus-within {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
}

.input-datalist-imitate .dropdown,
.input-datalist-email .dropdown {
    flex: 1 1 auto;
    /*flex: 1 1;*/
    /*display: flex;*/
}

.input-datalist {
    border: none;
    outline: none;
    padding: 0px;
    /*flex: 1 1;*/
    width: 100%;
    /*typography*/
    font-size: var(--font-size-medium);
    line-height: var(--line-height-default);
    font-weight: var(--font-weight-light);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-color: var(--white);
    color: var(--text-color-main);
}

.input-datalist-imitate .dropdown-menu, 
.input-datalist-email .dropdown-menu {
    margin: 16px 0px !important;
}

/*input Email pressing Enter And Tab CSS*/
/*.bgc-primary {
    --bgc-label: var(--success-blue-light);
}

.bgc-secondary {
    --bgc-label: var(--whispering-blush);
}

.bgc-tag {
    background-color: var( --bgc-label);
}*/

/*.input-datalist-email .bgc-tag, .input-datalist-email .ph-x-circle {
    color: var(--primary-color);
}*/
/*.label-blue-light, .input-datalist-email .ph-x-circle {
    color: var(--primary-color)!important;
}*/

.input-datalist-email .label-blue-light {
    padding: 3px var(--spacing-2);
    font-size: var(--font-size-smaller);
    color: var(--success-blue);
}
[data-mode=dark] .input-datalist-email .label-blue-light {
    color: var(--text-color-main);
}


.recipient-container {
    min-width: 160px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.input-datalist-email .member-input-email {
    min-width: 160px;
    width: 100%;
    font-size: var(--font-size-small);
}


.bg-magnifying-glass {
    -webkit-appearance: none;
    mask-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.9422 17.0578L14.0305 13.1469C15.1642 11.7857 15.7296 10.0398 15.6089 8.27244C15.4883 6.50506 14.6909 4.85223 13.3826 3.65779C12.0744 2.46334 10.356 1.81926 8.58492 1.85951C6.81388 1.89976 5.12653 2.62125 3.87389 3.87389C2.62125 5.12653 1.89976 6.81388 1.85951 8.58492C1.81926 10.356 2.46334 12.0744 3.65779 13.3826C4.85223 14.6909 6.50506 15.4883 8.27244 15.6089C10.0398 15.7296 11.7857 15.1642 13.1469 14.0305L17.0578 17.9422C17.1159 18.0003 17.1848 18.0463 17.2607 18.0777C17.3366 18.1092 17.4179 18.1253 17.5 18.1253C17.5821 18.1253 17.6634 18.1092 17.7393 18.0777C17.8152 18.0463 17.8841 18.0003 17.9422 17.9422C18.0003 17.8841 18.0463 17.8152 18.0777 17.7393C18.1092 17.6634 18.1253 17.5821 18.1253 17.5C18.1253 17.4179 18.1092 17.3366 18.0777 17.2607C18.0463 17.1848 18.0003 17.1159 17.9422 17.0578ZM3.125 8.75C3.125 7.63748 3.4549 6.54994 4.07298 5.62491C4.69106 4.69989 5.56957 3.97892 6.5974 3.55317C7.62524 3.12743 8.75624 3.01604 9.84738 3.23308C10.9385 3.45012 11.9408 3.98585 12.7275 4.77252C13.5141 5.55919 14.0499 6.56147 14.2669 7.65261C14.484 8.74376 14.3726 9.87475 13.9468 10.9026C13.5211 11.9304 12.8001 12.8089 11.8751 13.427C10.9501 14.0451 9.86252 14.375 8.75 14.375C7.25866 14.3733 5.82888 13.7802 4.77435 12.7256C3.71981 11.6711 3.12665 10.2413 3.125 8.75Z" fill="%23717171"/></svg>');
    mask-size: contain;
    mask-repeat: no-repeat;
    background-color: var(--text-color-subdued);
    /*aligned*/
    position: absolute;
    top: var(--spacing-2);
    left: var(--spacing-2);
    width: var(--search-icon-size);
    height: var(--search-icon-size);
    z-index: 1;
}

/*members email labels truncate its issuing when add ellipses*/
.input-datalist-email .label-blue-light, .input-datalist-email .label-blue-light span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/*multiselect labels truncate*/
.multiselect-labels-applied, .multiselect-labels-applied .label, .multiselect-labels-applied .label span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/*email pill truncate*/
.input-datalist-imitate .avatar-group-pill, .input-datalist-imitate .avatar-group-pill span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media(max-width:575px) {
    .recipient-container {
        min-width: 96px !important;
    }

    .input-datalist-email .member-input-email {
        min-width: 96px !important;
    }
}