﻿.uic-tag-selector {
    position: relative;
    overflow: hidden;
}

.uic-tag-selector__box { /*el mkan kolo*/
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    max-height: 28px;
    overflow: hidden;
   
}

    .uic-tag-selector__box > input { /*el text elly bnd5l feh*/
        flex: 1 1 auto;
        border: none;
        outline: none;
       width: 1px;
       
    }

    .uic-tag-selector__box > span > span { /*el dismiss button*/
        cursor: pointer;
        height: inherit;
        transform: translateY(-13px);
        transform: translateX(10px);
        background-color: #E8B656;
        color: white;
    }
        .uic-tag-selector__box > span > span:hover {
            color: #14275A;
        }

        .uic-tag-selector__dropdown {
    position: absolute;
    top: 100%;
    left: -1px;
    right: -1px;
    display: none;
}

    .uic-tag-selector__dropdown:hover .uic-tag-selector__item--selected {
        background-color: initial;
    }

    .uic-tag-selector__dropdown > div {
        cursor: pointer;
    }

.uic-tag-selector--open > .uic-tag-selector__dropdown {
    display: block;
}

/* default style */
.uic-tag-selector.default {
    border: 1px solid #ccc;
}

.uic-tag-selector__box > span.default {
    background-color: #ccc;
    padding: 2px 4px;
    margin: 0 5px;
    border: 1px solid #b6ff00;
}

.uic-tag-selector__dropdown.default {
    border: 1px solid #ccc;
    background-color: #fff;
}

.uic-tag-selector__dropdown > div.default:hover {
    background-color: #ccc !important;
}

div.default.uic-tag-selector__item--selected {
    background-color: #ccc;
}

/* bootstrap style */
.uic-tag-selector.form-control { /*el text box nfso*/
    padding: 0.3rem;
}

.uic-tag-selector__box > span.badge { /*el badge nfso*/
    font-size: 1rem;
    margin-right: 0.2rem;
    font-weight: normal;
    background-color: #E8B656;
    color: white;
    width: inherit;
    padding: 5px 10px;
    border-radius: 20px;
}
