twemoji.input.css

._twemoji_textarea {
    min-height: 150px;
    width: 350px;
    border: solid 1px silver;
    background: #fff;
}


._twemoji_wrap{
    display: inline-block;
    position: relative;
}

._twemoji_box{
    opacity: 0.8;
    position: absolute;
    z-index: 9;
    top: 10px;
    right: 10px;
    padding: 10px;
    background-image: url(data:image/png;base64,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);
    background-size: 32px 64px;
    background-repeat: no-repeat;
    background-position: center -6px;
    cursor: pointer;
}

._twemoji_box:hover, ._twemoji_wrap.__open  ._twemoji_box{
    opacity: 0.8;
}

._twemoji_box:active, ._twemoji_wrap.__open  ._twemoji_box:active{
    opacity: 1;
    background-position: center -38px;
}

._twemoji_popover{
    display: none;
    position: absolute;
    top: 45px;
    right: 10px;
    width: 185px;
    height: 150px;
    background: rgba(0,0,0,0.8);
    z-index: 9;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    -webkit-border-radius: 5px 0 5px 5px;
    -moz-border-radius: 5px 0 5px 5px;
    border-radius: 5px 0 5px 5px;
}

._twemoji_popover::before {
	content: '';
	position: absolute;
	border-bottom: solid 10px rgba(0,0,0,0.8);
	border-right: solid 9px transparent;
	border-left: solid 9px transparent;
	top: -10px;
	right: 0px;
}

._twemoji_wrap.__open ._twemoji_popover{
    display: block;
}

._twemoji_list_wrap{
    overflow: hidden;
    width: 195px;
    height: 150px;
}

._twemoji_popover ul{
    clear: both;
    margin: 0;
    padding: 5px;
    width: 160px;
}

._twemoji_popover li{
    display: inline-block;
    width: 32px;
    height: 32px;
    float: left;
}

._twemoji_popover li img{
    width: 24px;
    height: 24px;
}

textarea._twemoji_input{
	display: none;
}

._twemoji_textarea .emoji{
    width: 24px;
}

.scroll_wrap{
    overflow: hidden;
    position: relative;
}

.scroll_slave{
    padding-right: 20px; /*Manually hide scrollbar*/
    overflow-y: auto;
}


.scroll_slave::-webkit-scrollbar {
    display: none;
}

.scroll_master{
    position: absolute;
    top: -10px;
    right: 0;
    overflow: hidden;
    overflow-y: scroll;
    opacity: 0;
    z-index: 99;
}

.scroll_bar{
    position: absolute;
    right: 5px;
    margin-top: 8px;
    top: 0;
    width: 7px;
    min-height: 15px;
    background: white;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    opacity: 0.6;
}

.scroll_master:hover ~ .scroll_bar{
    opacity: 0.8;
}

.scroll_master:active ~ .scroll_bar{
    opacity: 0.9;
}