/*tag page from vs2019*/
/*tag page*/

/* the name container for the name tag */
#tagtext {
    font-size: 14px;
    /*    padding-top: 4px;*/
    padding-right: 2px;
    padding-bottom: 2px;
    padding-left: 2px;
    outline: none;
    width: 80%;
    border-left: 5px;
    float: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /**/
    border: 1px solid #000;
    padding-top: 2px;
    height: 20px;
    font-size: 12px;
    float: left;
    width: 110px;
    color: #fff;
    background-color: #000;
}

/*style="height:20px;font-size:12px;float:left;
width:85%;color:#fff;background-color:#000;"*/

#tagsave {
    float: left;
    width: 20px;
    font-size: 14px;
    color: #fff;
    height: 20px;
    background-color: #000;
    border-radius: 0px;
}

#tagdefine {
    float: left;
    font-size: 14px;
    margin-top: -3px;
    display: inline;
}

.tag {
    position: absolute;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    border: none;
    visibility: hidden;
    height: 22px;
    width: 130px;
    background-color: transparent;
    text-align: center;
    z-index: 2;
    padding: 0px;
    margin-top: 17px;
}

    /*    .tag span {
        position: absolute;
        width: 130px;
        text-align: center;
        margin: 1px 0;
    }*/


    .tag .caret {
        /*        position: relative;
        border-top: none;*/
        position: absolute;
        width: 130px;
        text-align: center;
        /* margin: 1px 0;*/
        margin-top: -8px;
    }

        .tag .caret:before {
            content: '';
            position: absolute;
            border-bottom: 5px solid black;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            z-index: 500;
        }

        .tag .caret:after {
            content: '';
            position: absolute;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
        }


/*tag page*/

.tagged {
    position: absolute;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
/*    border: 1px solid dodgerblue;*/
    height: 30px;
    width: 130px;
    background-color: transparent;
    text-align: center;
    z-index: 2;
    padding: 0px;
}

    .tagged span {
        position: absolute;
        width: 130px;
        text-align: center;
        margin: 1px 0;
    }

.tagbtn {
    float: right;
    width: 15%;
    padding: 0px;
    text-align: center;
/*    background-color: black;*/
    background-color: transparent;
    border: none;
    outline: none;
/*    position: absolute;
    top: 0px;
    left: 0px;*/
}

.tagbtnicon {
    color:white;
    font-size:16px;
    background-color:transparent;
}

    .tagbtn:focus {
        outline: none;
        border: none;
        box-shadow: none;
    }

.tagremovebtnicon {
  
    color: white;
    font-size: 16px;
    background-color: transparent;
}

/*.tagremovebtnicon:before {
    content: "\25AE";*/ /* this is your text. You can also use UTF-8 character codes as I do here */
    /*font-family: FontAwesome;
    left: -5px;
    position: absolute;
    top: 0;
}*/

.tagremovebtn:focus {
    outline: none;
    border: none;
    box-shadow: none;
}

/* Tagger autocomplete */

.tagbox {
    position: absolute;
    z-index: 790;
/*    top: 105px;   this was the old way prior to adding the wrapper for relative spacing*/

    top: 20px;
    left: 0px;

    /*    background-color: var(--body-background-color);
    color: var(--body-color);*/
}

#taggerbottom {
    position: absolute;
    top: 600px;
    left: 0px;
}

#taggertop {
    position: absolute;
    top: 90px;
    left: 0px;
}

#imagebuttongroup {
    z-index: 900;
    /*height: 48px;*/
}

.imagetagbutton {
    float: left;
    text-align: center;
    padding: 0px;
    width: 20%;
    background-color: #000;
    color: #fff;
    height: 36px;
    border-radius: 0px;
    font-size: 14px;
    outline: none;
}

/*#imagetagbox input {
    border: 1px solid transparent;
    background-color: #f1f1f1;
    padding: 2px;
    font-size: 16px;
}

    #imagetagbox input[type=text] {
        background-color: #f1f1f1;
        width: 100%;
    }

    #imagetagbox input[type=submit] {
        background-color: DodgerBlue;
        color: #fff;
    }*/

.autocomplete {
    /*the container must be positioned relative:*/
    position: relative;
    display: inline-block;
    font-size: 14px;
}

.autocomplete-items {
    position: absolute;
    /*border: 1px solid cornsilk; */ /* #d4d4d4;*/
    /*    border-bottom: none;
    border-top: none;
    border-left: 1px solid black;
    border-right: 1px solid black;*/
    border-top: 1px solid white;
    /*    border-bottom: 1px solid white;*/
    z-index: 99;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
    /*    margin-top: 12px;*/
    margin-top: -6px;
}

    .autocomplete-items div {
        padding: 7px;
        cursor: pointer;
        background-color: #000;
        color: #fff;
        border-bottom: 1px solid #d4d4d4;
    }

        .autocomplete-items div:hover {
            /*when hovering an item:*/
            background-color: #e9e9e9;
            color: #000;
        }

.autocomplete-active {
    /*when navigating through the items using the arrow keys:*/
    background-color: lightgray !important;
    color: #000;
}

/*  End Of Tagger Autocomplete*/



* {
    box-sizing: border-box
}


.selection {
    min-height: 45px;
    overflow: hidden;
}

.buttonlist .grid {
    background: #424242;
    padding: .1em;
    margin-top: 1em;
}

.buttontag {
    display: inline-block;
    /*    padding: 0.5em 1.5em;
    background: #636363;*/
    padding: 0.15em 0.15em;
    background: #fff;
    border-radius: .5em;
    border: 1px solid #000;
    margin-right: 0.1em;
    margin-bottom: 0.2em;
    color: #000;
    cursor: pointer;
    /*   position:relative;
      display:inline-flex;
      align-items:center; */
    user-select: none;
}

.buttonlist .buttontag {
    transition: all 200ms;
}

.buttontag span {
    margin: .2em;
}

.selected {
    background: #000;
    color: #fff;
}

.selection .buttontag {
    background: #fff;
    color: #000;
    border: 1px solid #000;
}

    .selection .buttontag::after {
        /*        content: "\f136";
        font-family: "Material-Design-Iconic-Font";*/
        transform: translatex(0.5em);
        /*   position:absolute; */
        right: 1em;
        opacity: 0.5;
        transition: all 150ms ease-out;
    }

    .selection .buttontag:hover::after {
        opacity: 1;
        font-size: 1em;
    }


 
/* width */
.grid::-webkit-scrollbar {
    width: 10px;
}

/* Track */
.grid::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px lightgray;
    border-radius: 5px;
}

/* Handle */
.grid::-webkit-scrollbar-thumb {
    background: darkgray;
    border-radius: 5px;
}

    /* Handle on hover */
    .grid::-webkit-scrollbar-thumb:hover {
        background: gray;
    }