/* Emoji Picker Button */

.emoji-picker {
    position: relative;
}
.emoji-picker textarea {
    padding-right: 35px;
}
.emoji-picker .btn-emoji {
    position: absolute;
    top: 7px;
    right: 18px;
    font-size: 1.7em;
    line-height: 0.8em;
    color: #333333;
    transition: color ease-in-out .15s;
}
.emoji-picker .btn-emoji:hover {
    color: #666666;
}


/* Emojis List */

.emoji-picker .popover-emojis .popover-content {
    padding: 0;
}
ul.emoji-list {
    margin: 0;
    padding: 0 5px;
    list-style: none;
}
ul.emoji-list li {
    display: inline-block;
    padding: 2px 5px;
}
ul.emoji-list li:hover {
    cursor: pointer;
}
ul.emoji-list li img {
    width: 23px;
    transition: opacity ease-in-out 0.15s; /* IE 10, Fx 16+, Op 12.1+ */
}
ul.emoji-list li img:hover {
    opacity: 0.7;
    filter: alpha(opacity=70); /* For IE8 and earlier */
}


/* Custom popover */

.emoji-picker .popover-emojis.custom {
    padding: 10px;
    background-color: #ffffff;
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 6px;
    display: none;
    position: absolute;
    margin-top: 10px;
}
.emoji-picker .popover-emojis.custom.show {
    display: block;
}

.emoji-picker .popover-emojis.custom .arrow,
.emoji-picker .popover-emojis.custom .arrow:after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}
.emoji-picker .popover-emojis.custom .arrow {
    border-width: 11px;
    top: -11px;
    right: 6px;
    margin-left: -11px;
    border-top-width: 0;
    border-bottom-color: rgba(0,0,0,.25);
    border-style: solid;
}
.emoji-picker .popover-emojis.custom .arrow::after {
    box-sizing: border-box;
    border-width: 10px;
    top: 1px;
    margin-left: -10px;
    content: " ";
    border-top-width: 0;
    border-bottom-color: #ffffff;
}