/*  Plugin: prettyTag (Auto Colored Tags)
 *   Frameworks: jQuery 3.3.1 
 *   Author: Asif Mughal
 *   GitHub: https://github.com/CodeHimBlog
 *   URL: https://www.codehim.com
 *   License: MIT License
 *   Copyright (c) 2018 - Asif Mughal
 */
/* File: prettytag.css*/

/*Style for An Unordered list */
.users-tags {
    list-style: none;
    /*border-bottom: 1px dotted #ccc;*/
    padding: 13px;
}

    /* list item into cloud tags */
    .users-tags li {
        background: #ada9a910;
        display: inline-block;
        margin: 4px;
        padding: 0;
        list-style-type: none;
        /* box-radius */
        -webkit-border-radius: 2rem;
        -moz-border-radius: 2rem;
        border-radius: 2rem;
        /* box-shadow */
        -webkit-box-shadow: rgba(128,128,128,1) 0px 0 2px;
        -moz-box-shadow: rgba(128,128,128,1) 0 0 2px;
        box-shadow: rgba(128,128,128,1) 0 0 2px;
    }

        /* hover looking for cloud tags*/
        .users-tags li:hover {
            /*border: 1px solid #ada9a9!important;*/
            /*margin: 0;*/
            transform: scale(1.04);
            -webkit-transform: scale(1.04);
            -moz-transform: scale(1.04);
            transition: .2s;
            -webkit-transition: .2s;
            -moz-transition: .2s;
            opacity: 1;
            -webkit-opacity: 1;
            -moz-opacity: 1;
        }

        /* style of tag with anchor link */
        .users-tags li a {
            display: inline-block;
            /*padding: 8px 8px 8px 10px;*/
            padding: 4px 8px 4px 8px;
            text-shadow: 1px 0.01px rgba(100, 100, 100, 0.15);
            border-radius: 6px;
            margin-bottom: 2px;
            font-size: 14px;
            text-decoration: none;
            color: #808080;
            transition: .2s;
            outline: 0;
            margin: 1px;
        }

            .users-tags li a a {
                cursor: pointer;
            }

                .users-tags li a a label {
                    cursor: pointer;
                }

.autocompleteItems, .receiptList {
    z-index: 9999;
    position: relative !important;
    padding: 0px;
    margin: 2px 10px;
}


.autocompleteItems {
    display: none !important;
    background: #ada9a910;
    width: 98%;
}

.receiptList {
    max-height: 210px !important;
    display: block !important;
    overflow-y: scroll; /*Also...*/
    overflow-x: hidden; /*And the end of the important part*/
    margin-bottom: 20px;
}

.receiptNames, .senderName, .eventName {
    font-weight: bold;
}


/*tag close button (for input tagging mode)*/
.users-tags span {
    padding: 1rem;
    cursor: pointer;
    font-size: large;
}
    /* tag close button hover style */
    .users-tags span:hover {
        background: #f2f2f2;
    }

/* area where new tags show when user enter tag  name into input field*/
.show-selectusers-input-tags {
    position: relative;
}

/* Input for tags */
.codehim-selectusers-input-tags {
    padding: 10px;
    border: 1px solid #ccc;
    margin: 8px 0 0 8px;
    width: 96%;
    box-sizing: border-box;
}


.users-tags label {
    margin: 0 4px !important;
}

.users-tags img {
    width: 4rem !important;
    height: 4rem !important;
}

.autocompleteItems img, .receiptList img {
    width: 4rem !important;
    height: 4rem !important;
}

.autocompleteItems li, .receiptList li {
    list-style-type: none;
    padding: 10px;
    cursor: pointer !important;
}

.receiptList label {
    cursor: pointer !important;
}

.autocompleteItems li:hover, .receiptList li:hover,
.autocompleteItems li:active, .receiptList li:active {
    background-color: #F0F0F0;
    opacity: 1;
    transform: translateY(2px);
    -webkit-opacity: 1;
    -moz-opacity: 1;
}

.autocompleteItems li:hover, autocompleteItems li:active {
    transform: scale(1.01);
    -webkit-transform: scale(1.01);
    -moz-transform: scale(1.01);
    transition: .2s;
    -webkit-transition: .2s;
    -moz-transition: .2s;
}

.autocompleteItems label:active, .receiptList label:active {
    /*color: #3e8e41;*/
    transform: translateY(2px);
}

@media (max-width: 480px) {
    .autocompleteItems, .receiptList {
        width: 92%;
    }
}