dual-data-picker/dist/dual-data-picker.css

## Settings editableDiv : true This use div instead input. Usefull to eliminate autocomplete feature.

.dual-data-picker {

    --borderColor : rgb(198, 198, 198);
    --gap : 32px;
    --leftBg : rgb(247 247 247);
    
    --hoverBg: rgb(55, 123, 183);
    --hoverColor:#fff;
    

    border:1px solid var(--borderColor);


    max-width: 820px;

    
    box-sizing: border-box;

    border-radius: 5px;
}

.dual-data-picker__cols {
    display: flex;
    justify-content: space-between;

    gap: 0px;

    width: 100%;
    box-sizing: border-box;
    position: relative;
    
}

.dual-data-picker__left,
.dual-data-picker__right {
    border:1px solid var(--borderColor); 
    width: 50%;

    box-sizing: border-box;
    
    border:none;

    border-top: 1px solid var(--borderColor);

    height: 220px;
    overflow-y: scroll;
}

.dual-data-picker__right {
    border-left: 1px solid var(--borderColor);
    border-bottom-right-radius: 5px;    
}


.dual-data-picker__left {
    background-color: var(--leftBg);
    border-bottom-left-radius: 5px;    
}

.dual-data-picker__search {
    padding: 8px 16px;

    border: none;
    margin:1px;

    outline: none;
    box-shadow: none;
    
    width: calc(100% - 2px);

    box-sizing: border-box;
}

.dual-data-picker__left > div,
.dual-data-picker__right > div {
    padding: 8px 16px;
    position: relative;
    background-color: transparent;
    cursor: pointer;
}

.dual-data-picker__option:hover {
    background-color: var(--hoverBg);
    color:var(--hoverColor);
    
}

.dual-data-picker__delete {
    font-family: Arial;
    cursor: pointer;

    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    color:#fff;
    opacity: 0.8;    

    line-height: 1;

    opacity:0;
}

.dual-data-picker__right-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);    
    font-family: Arial;
    color:#fff;
    opacity: 0.8;
    opacity:0;
    
    line-height: 1;
}


.dual-data-picker__left > .dual-data-picker__option:hover .dual-data-picker__right-icon {
    opacity: 1;
}

.dual-data-picker__right > .dual-data-picker__option:hover .dual-data-picker__delete  {
    opacity: 1;
}