.emoji-lst {
    display: none;
    background: #fff;
    padding: 10px;
    position: absolute;
    width: 250px;
    z-index: 1;
    box-shadow: 0 2px 6px -1px #828282;
}
.emoji-lst li {
    list-style-type: none;
    margin: 4px;
    float: left;
    height: 30px;
    width: 30px;
}
.emoji-lst li span,
img.emoji {
    background: url(emoji.svgz);
}
.emoji-lst li span {
    background-size: 222px 222px;
    cursor: pointer;
    display: inline-block;
    height: 100%;
    width: 100%;
    transition: transform .15s linear;
}
.emoji-lst li span:hover {
    transform: scale(1.2);
}
.emoji-wysiwyg:empty:before { content: attr(placeholder); }
.emoji-wysiwyg:empty:before { content: attr(placeholder); }
.emoji-wysiwyg:active:before,
.emoji-wysiwyg:focus:before { content: none; }
.emoji-wysiwyg {
    word-wrap: break-word;
    overflow: auto;
    -webkit-user-select: text;
    padding: 7px;
}
.emoji-container {
    padding: 0 !important;
    position: relative;
    border: 1px solid #dbdbdb;
}
img.emoji {
    display: inline-block; 
    vertical-align: middle;
    margin: -3px 1px 0 1px;
}

i.emoji-btn {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 1000 1000'%3E%3Cpath fill='#ccc' d='M500 990c270.6 0 490-219.4 490-490S770.6 10 500 10 10 229.4 10 500s219.4 490 490 490zm0-888c220 0 398 178 398 398S720 898 500 898 102 720 102 500s178-398 398-398zM255 316.2c0-33.8 27.4-61.3 61.3-61.3s61.3 27.4 61.3 61.3-27.4 61.3-61.3 61.3S255 350 255 316.3zm367.5 0c0-33.8 27.4-61.3 61.3-61.3s61.3 27.4 61.3 61.3-27.3 61.3-61.2 61.3-61.3-27.5-61.3-61.3zm61.3 294l78.8 47.3c-53.5 89-151 148.7-262.6 148.7s-209-59.6-262.6-148.7l78.8-47.3c37.5 62.3 105.8 104 183.8 104s146.4-41.6 183.8-104z'/%3E%3C/svg%3E");
    width: 25px;
    height: 25px;
    display: block;
    position: absolute;
    top: 4px;
    right: 10px;
    cursor: pointer;
}