﻿.form-taginsert {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

    .form-taginsert.disabled {
        pointer-events: none !important;
        background-color: #ececec !important;
        color: gray !important;
    }

        .form-taginsert.disabled .form-taginsert-title {
            color: gray !important;
        }

        .form-taginsert.disabled .form-taginsert-item {
            color: gray !important;
        }

.form-taginsert-textbox {
    border: 0;
    outline: 0;
    padding: .6rem !important;
    height: auto;
    width: calc(100% - 2.5rem);
}

    .form-taginsert-textbox::placeholder {
        color: silver;
        opacity: 1;
        font-size: .8rem;
        text-align: right;
    }

.form-taginsert-title {
    font-weight: normal;
    font-size: .8rem;
}

.form-taginsert-internal-btn-icon {
    font-size: 140%;
    position: relative;
    top: .2rem;
    right: .5rem;
    color: silver;
    transition: .5s ease all;
}

    .form-taginsert-internal-btn-icon:hover {
        color: royalblue;
    }

.form-taginsert-items-container {
    max-height: 10rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.form-taginsert-item {
    color: royalblue;
    margin: .1rem 0;
    border: 0;
    border-radius: .4rem;
    font-size: .9rem;
    padding: .2rem 1rem;
    position: relative;
    display: flex;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: .5s ease all;
}

    .form-taginsert-item:hover {
        background-color: whitesmoke;
        color: navy;
    }

        .form-taginsert-item:hover .form-taginsert-item-btn-icon {
            opacity: 1;
            color: red;
            transition: .4s ease all;
        }

.form-taginsert-item-btn-icon {
    position: absolute;
    left: .5rem;
    font-size: 120%;
    opacity: 0;
    cursor: pointer;
    transition: .1s ease all;
}

.form-taginsert-items-container.style-inline .form-taginsert-item {
    border-radius: 1rem;
    font-size: .9rem;
    padding: .2rem .5rem;
    position: relative;
    display: inline-flex;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: .5s ease all;
    background-color: whitesmoke;
    margin: .125rem;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(0,0,0,.05);
}


    .form-taginsert-items-container.style-inline .form-taginsert-item:hover {
        background-color: #e7eaf0;
        border: 1px solid rgba(0,0,0,.075);
    }

        .form-taginsert-items-container.style-inline .form-taginsert-item:hover .form-taginsert-item-btn-icon {
            transition: .4s ease all;
            color:red;
            transition:.4s ease all;
        }

    .form-taginsert-items-container.style-inline .form-taginsert-item .form-taginsert-item-btn-icon {
        position: unset;
        cursor: pointer;
        margin-right: 1rem;
        color: silver;
        display: flex;
        opacity:1;
    }


    @media screen and (max-width:767px)
    {
        .form-taginsert-item-btn-icon {
            opacity:1;
            color:red;
        }
        
        .form-taginsert-items-container.style-inline .form-taginsert-item .form-taginsert-item-btn-icon {
            color:red;
        }
    }
