From 28ad645153b206ba84ddc4935280eaed94bb0138 Mon Sep 17 00:00:00 2001
From: bonespiked <dngreene@gmail.com>
Date: Fri, 24 Mar 2017 09:09:51 -0400
Subject: Ticket 4665 - Emoji Picker (#5157)

*  #4665  Added EmojiPicker

Work primarily by @broernr-de and @harrison on pre-release.mattermost.com

* Final fixes to handle custom emojis from internal review and single merge error

* ESLint fixes

* CSS changes and other code to support emoji picker in reply window

* Fix for file upload and emoji picker icon positions on post and comment.

RHS emoji picker appearing see-through at this time.

* Fix for two ESLint issues.

* covered most of feedback:
RHS emoji picker looks correct color-wise
RHS emoji picker dynamically positions against height of thread size (post + reply messages)
escape closes emoji window
search box focused on open

ESLint fixes against other files
oversized emoji preview fixes

* Adding in 'outside click' eventing to dismiss the emoji window

* Changing some formatting to fix mismatch between my local eslant rules and jenkins.

* adding alternative import method due to downstream testing errors

* yet another attempt to retain functionality and pass tests - skipping import of browser store

* fix for feedback items 5 and 7:
* move search to float on top with stylistic changes
* whitespace in the header (+1 squashed commit)
Squashed commits:
[6a26d32] changes that address items
1, 2, 6, 8, and 9 of latest feedback

* Fix for attachment preview location on mobile

* Fix for latest rounds of feedback

* fixing eslint issue

* making emojipicker sprite based, fixing alignments

* Fix for emoji quality, fixing some behavior (hover background and cursor settings)
undoing config changes

* Preview feature for emojis

* Adjustments to config file, and changing layout/design of attachment and emoji icon.

* manual revert from master branch for config.json

* reverting paperclip and fixing alignments.  Additionally fixing inadvertent display of picker on mobile.

* CSS changes to try to fix the hover behavior - currently working for emoji picker (when enabled), but hover for attachment isn't working

* Made suggested changes by jwilander except for jQuery removal

* Adding hover for both icons

* removal of some usages of jQuery

* Fix for two layout issues on IE11/Edge

* UI improvements for emoji picker

* Fix for many minor display issues

* fix for additional appearance items

* fix to two minor UI items

* A little extra padding for IE11

* fix for IE11 scroll issue, and removing align attribute on img tag which was throwing js error

* fixes some display issues on firefox

* fix for uneven sides of emojis

* fix for eslint issues that I didn't introduce

* fix for missing bottom edge of RHS emojipicker.  also fixing text overlapping icons on text area (including RHS)

* Update "emoji selector" to "emoji picker"

* changes for code review
- removal of ..getDOMNode
- use sprite imagery for emoji preview
- remove lastBlurAt from state as it wasn't used

* fixes for:
- fake custom emoji preview in picker
- RHS scrollbar on preview

* fix for minor alignment of preview emoji
---
 webapp/sass/components/_emojisprite.scss | 3519 ++++++++++++++++++++++++++++++
 webapp/sass/components/_emoticons.scss   |  208 +-
 webapp/sass/components/_module.scss      |    1 +
 webapp/sass/layout/_post-right.scss      |    5 +-
 webapp/sass/layout/_post.scss            |   97 +-
 webapp/sass/responsive/_mobile.scss      |   16 +
 webapp/sass/responsive/_tablet.scss      |   35 +-
 7 files changed, 3864 insertions(+), 17 deletions(-)
 create mode 100644 webapp/sass/components/_emojisprite.scss

(limited to 'webapp/sass')

diff --git a/webapp/sass/components/_emojisprite.scss b/webapp/sass/components/_emojisprite.scss
new file mode 100644
index 000000000..5a2bd0e58
--- /dev/null
+++ b/webapp/sass/components/_emojisprite.scss
@@ -0,0 +1,3519 @@
+@charset "UTF-8";
+
+.emojisprite-preview {
+    @include transform(scale(.55));
+    background-image: url(../images/emoji/emojilarge.png);
+    background-repeat: no-repeat;
+    cursor: pointer;
+    height: 64px;
+    max-width: none;
+    transform-origin: 0 0;
+    width: 64px;
+    padding: 0 10px 0 0;
+
+
+}
+
+
+
+
+.emojisprite {
+    @include transform(scale(.35));
+    background-image: url(../images/emoji/emojilarge.png);
+    background-repeat: no-repeat;
+    border-radius: 18px;
+    cursor: pointer;
+    height: 64px;
+    max-width: none;
+    transform-origin: 0 0;
+    width: 64px;
+
+}
+
+.emoji-0023-20e3 {
+        background-position: -2px -2px;
+}
+
+.emoji-0030-20e3 {
+        background-position: -70px -2px;
+}
+
+.emoji-0031-20e3 {
+        background-position: -138px -2px;
+}
+
+.emoji-0032-20e3 {
+        background-position: -206px -2px;
+}
+
+.emoji-0033-20e3 {
+        background-position: -274px -2px;
+}
+
+.emoji-0034-20e3 {
+        background-position: -342px -2px;
+}
+
+.emoji-0035-20e3 {
+        background-position: -410px -2px;
+}
+
+.emoji-0036-20e3 {
+        background-position: -478px -2px;
+}
+
+.emoji-0037-20e3 {
+        background-position: -546px -2px;
+}
+
+.emoji-0038-20e3 {
+        background-position: -614px -2px;
+}
+
+.emoji-0039-20e3 {
+        background-position: -682px -2px;
+}
+
+.emoji-00a9 {
+        background-position: -750px -2px;
+}
+
+.emoji-00ae {
+        background-position: -818px -2px;
+}
+
+.emoji-1f004 {
+        background-position: -886px -2px;
+}
+
+.emoji-1f0cf {
+        background-position: -954px -2px;
+}
+
+.emoji-1f170 {
+        background-position: -1022px -2px;
+}
+
+.emoji-1f171 {
+        background-position: -1090px -2px;
+}
+
+.emoji-1f17e {
+        background-position: -1158px -2px;
+}
+
+.emoji-1f17f {
+        background-position: -1226px -2px;
+}
+
+.emoji-1f18e {
+        background-position: -1294px -2px;
+}
+
+.emoji-1f191 {
+        background-position: -1362px -2px;
+}
+
+.emoji-1f192 {
+        background-position: -1430px -2px;
+}
+
+.emoji-1f193 {
+        background-position: -1498px -2px;
+}
+
+.emoji-1f194 {
+        background-position: -1566px -2px;
+}
+
+.emoji-1f195 {
+        background-position: -1634px -2px;
+}
+
+.emoji-1f196 {
+        background-position: -1702px -2px;
+}
+
+.emoji-1f197 {
+        background-position: -1770px -2px;
+}
+
+.emoji-1f198 {
+        background-position: -1838px -2px;
+}
+
+.emoji-1f199 {
+        background-position: -1906px -2px;
+}
+
+.emoji-1f19a {
+        background-position: -2px -70px;
+}
+
+.emoji-1f1e8-1f1e6 {
+        background-position: -70px -70px;
+}
+
+.emoji-1f1e8-1f1f3 {
+        background-position: -138px -70px;
+}
+
+.emoji-1f1e9-1f1ea {
+        background-position: -206px -70px;
+}
+
+.emoji-1f1ea-1f1f8 {
+        background-position: -274px -70px;
+}
+
+.emoji-1f1eb-1f1f7 {
+        background-position: -342px -70px;
+}
+
+.emoji-1f1ec-1f1e7 {
+        background-position: -410px -70px;
+}
+
+.emoji-1f1ee-1f1f9 {
+        background-position: -478px -70px;
+}
+
+.emoji-1f1ef-1f1f5 {
+        background-position: -546px -70px;
+}
+
+.emoji-1f1f0-1f1f7 {
+        background-position: -614px -70px;
+}
+
+.emoji-1f1f5-1f1f0 {
+        background-position: -682px -70px;
+}
+
+.emoji-1f1f7-1f1fa {
+        background-position: -750px -70px;
+}
+
+.emoji-1f1fa-1f1f8 {
+        background-position: -818px -70px;
+}
+
+.emoji-1f1ff-1f1e6 {
+        background-position: -886px -70px;
+}
+
+.emoji-1f201 {
+        background-position: -954px -70px;
+}
+
+.emoji-1f202 {
+        background-position: -1022px -70px;
+}
+
+.emoji-1f21a {
+        background-position: -1090px -70px;
+}
+
+.emoji-1f22f {
+        background-position: -1158px -70px;
+}
+
+.emoji-1f232 {
+        background-position: -1226px -70px;
+}
+
+.emoji-1f233 {
+        background-position: -1294px -70px;
+}
+
+.emoji-1f234 {
+        background-position: -1362px -70px;
+}
+
+.emoji-1f235 {
+        background-position: -1430px -70px;
+}
+
+.emoji-1f236 {
+        background-position: -1498px -70px;
+}
+
+.emoji-1f237 {
+        background-position: -1566px -70px;
+}
+
+.emoji-1f238 {
+        background-position: -1634px -70px;
+}
+
+.emoji-1f239 {
+        background-position: -1702px -70px;
+}
+
+.emoji-1f23a {
+        background-position: -1770px -70px;
+}
+
+.emoji-1f250 {
+        background-position: -1838px -70px;
+}
+
+.emoji-1f251 {
+        background-position: -1906px -70px;
+}
+
+.emoji-1f300 {
+        background-position: -2px -138px;
+}
+
+.emoji-1f301 {
+        background-position: -70px -138px;
+}
+
+.emoji-1f302 {
+        background-position: -138px -138px;
+}
+
+.emoji-1f303 {
+        background-position: -206px -138px;
+}
+
+.emoji-1f304 {
+        background-position: -274px -138px;
+}
+
+.emoji-1f305 {
+        background-position: -342px -138px;
+}
+
+.emoji-1f306 {
+        background-position: -410px -138px;
+}
+
+.emoji-1f307 {
+        background-position: -478px -138px;
+}
+
+.emoji-1f308 {
+        background-position: -546px -138px;
+}
+
+.emoji-1f309 {
+        background-position: -614px -138px;
+}
+
+.emoji-1f30a {
+        background-position: -682px -138px;
+}
+
+.emoji-1f30b {
+        background-position: -750px -138px;
+}
+
+.emoji-1f30c {
+        background-position: -818px -138px;
+}
+
+.emoji-1f30d {
+        background-position: -886px -138px;
+}
+
+.emoji-1f30e {
+        background-position: -954px -138px;
+}
+
+.emoji-1f30f {
+        background-position: -1022px -138px;
+}
+
+.emoji-1f310 {
+        background-position: -1090px -138px;
+}
+
+.emoji-1f311 {
+        background-position: -1158px -138px;
+}
+
+.emoji-1f312 {
+        background-position: -1226px -138px;
+}
+
+.emoji-1f313 {
+        background-position: -1294px -138px;
+}
+
+.emoji-1f314 {
+        background-position: -1362px -138px;
+}
+
+.emoji-1f315 {
+        background-position: -1430px -138px;
+}
+
+.emoji-1f316 {
+        background-position: -1498px -138px;
+}
+
+.emoji-1f317 {
+        background-position: -1566px -138px;
+}
+
+.emoji-1f318 {
+        background-position: -1634px -138px;
+}
+
+.emoji-1f319 {
+        background-position: -1702px -138px;
+}
+
+.emoji-1f31a {
+        background-position: -1770px -138px;
+}
+
+.emoji-1f31b {
+        background-position: -1838px -138px;
+}
+
+.emoji-1f31c {
+        background-position: -1906px -138px;
+}
+
+.emoji-1f31d {
+        background-position: -2px -206px;
+}
+
+.emoji-1f31e {
+        background-position: -70px -206px;
+}
+
+.emoji-1f31f {
+        background-position: -138px -206px;
+}
+
+.emoji-1f320 {
+        background-position: -206px -206px;
+}
+
+.emoji-1f330 {
+        background-position: -274px -206px;
+}
+
+.emoji-1f331 {
+        background-position: -342px -206px;
+}
+
+.emoji-1f332 {
+        background-position: -410px -206px;
+}
+
+.emoji-1f333 {
+        background-position: -478px -206px;
+}
+
+.emoji-1f334 {
+        background-position: -546px -206px;
+}
+
+.emoji-1f335 {
+        background-position: -614px -206px;
+}
+
+.emoji-1f337 {
+        background-position: -682px -206px;
+}
+
+.emoji-1f338 {
+        background-position: -750px -206px;
+}
+
+.emoji-1f339 {
+        background-position: -818px -206px;
+}
+
+.emoji-1f33a {
+        background-position: -886px -206px;
+}
+
+.emoji-1f33b {
+        background-position: -954px -206px;
+}
+
+.emoji-1f33c {
+        background-position: -1022px -206px;
+}
+
+.emoji-1f33d {
+        background-position: -1090px -206px;
+}
+
+.emoji-1f33e {
+        background-position: -1158px -206px;
+}
+
+.emoji-1f33f {
+        background-position: -1226px -206px;
+}
+
+.emoji-1f340 {
+        background-position: -1294px -206px;
+}
+
+.emoji-1f341 {
+        background-position: -1362px -206px;
+}
+
+.emoji-1f342 {
+        background-position: -1430px -206px;
+}
+
+.emoji-1f343 {
+        background-position: -1498px -206px;
+}
+
+.emoji-1f344 {
+        background-position: -1566px -206px;
+}
+
+.emoji-1f345 {
+        background-position: -1634px -206px;
+}
+
+.emoji-1f346 {
+        background-position: -1702px -206px;
+}
+
+.emoji-1f347 {
+        background-position: -1770px -206px;
+}
+
+.emoji-1f348 {
+        background-position: -1838px -206px;
+}
+
+.emoji-1f349 {
+        background-position: -1906px -206px;
+}
+
+.emoji-1f34a {
+        background-position: -2px -274px;
+}
+
+.emoji-1f34b {
+        background-position: -70px -274px;
+}
+
+.emoji-1f34c {
+        background-position: -138px -274px;
+}
+
+.emoji-1f34d {
+        background-position: -206px -274px;
+}
+
+.emoji-1f34e {
+        background-position: -274px -274px;
+}
+
+.emoji-1f34f {
+        background-position: -342px -274px;
+}
+
+.emoji-1f350 {
+        background-position: -410px -274px;
+}
+
+.emoji-1f351 {
+        background-position: -478px -274px;
+}
+
+.emoji-1f352 {
+        background-position: -546px -274px;
+}
+
+.emoji-1f353 {
+        background-position: -614px -274px;
+}
+
+.emoji-1f354 {
+        background-position: -682px -274px;
+}
+
+.emoji-1f355 {
+        background-position: -750px -274px;
+}
+
+.emoji-1f356 {
+        background-position: -818px -274px;
+}
+
+.emoji-1f357 {
+        background-position: -886px -274px;
+}
+
+.emoji-1f358 {
+        background-position: -954px -274px;
+}
+
+.emoji-1f359 {
+        background-position: -1022px -274px;
+}
+
+.emoji-1f35a {
+        background-position: -1090px -274px;
+}
+
+.emoji-1f35b {
+        background-position: -1158px -274px;
+}
+
+.emoji-1f35c {
+        background-position: -1226px -274px;
+}
+
+.emoji-1f35d {
+        background-position: -1294px -274px;
+}
+
+.emoji-1f35e {
+        background-position: -1362px -274px;
+}
+
+.emoji-1f35f {
+        background-position: -1430px -274px;
+}
+
+.emoji-1f360 {
+        background-position: -1498px -274px;
+}
+
+.emoji-1f361 {
+        background-position: -1566px -274px;
+}
+
+.emoji-1f362 {
+        background-position: -1634px -274px;
+}
+
+.emoji-1f363 {
+        background-position: -1702px -274px;
+}
+
+.emoji-1f364 {
+        background-position: -1770px -274px;
+}
+
+.emoji-1f365 {
+        background-position: -1838px -274px;
+}
+
+.emoji-1f366 {
+        background-position: -1906px -274px;
+}
+
+.emoji-1f367 {
+        background-position: -2px -342px;
+}
+
+.emoji-1f368 {
+        background-position: -70px -342px;
+}
+
+.emoji-1f369 {
+        background-position: -138px -342px;
+}
+
+.emoji-1f36a {
+        background-position: -206px -342px;
+}
+
+.emoji-1f36b {
+        background-position: -274px -342px;
+}
+
+.emoji-1f36c {
+        background-position: -342px -342px;
+}
+
+.emoji-1f36d {
+        background-position: -410px -342px;
+}
+
+.emoji-1f36e {
+        background-position: -478px -342px;
+}
+
+.emoji-1f36f {
+        background-position: -546px -342px;
+}
+
+.emoji-1f370 {
+        background-position: -614px -342px;
+}
+
+.emoji-1f371 {
+        background-position: -682px -342px;
+}
+
+.emoji-1f372 {
+        background-position: -750px -342px;
+}
+
+.emoji-1f373 {
+        background-position: -818px -342px;
+}
+
+.emoji-1f374 {
+        background-position: -886px -342px;
+}
+
+.emoji-1f375 {
+        background-position: -954px -342px;
+}
+
+.emoji-1f376 {
+        background-position: -1022px -342px;
+}
+
+.emoji-1f377 {
+        background-position: -1090px -342px;
+}
+
+.emoji-1f378 {
+        background-position: -1158px -342px;
+}
+
+.emoji-1f379 {
+        background-position: -1226px -342px;
+}
+
+.emoji-1f37a {
+        background-position: -1294px -342px;
+}
+
+.emoji-1f37b {
+        background-position: -1362px -342px;
+}
+
+.emoji-1f37c {
+        background-position: -1430px -342px;
+}
+
+.emoji-1f380 {
+        background-position: -1498px -342px;
+}
+
+.emoji-1f381 {
+        background-position: -1566px -342px;
+}
+
+.emoji-1f382 {
+        background-position: -1634px -342px;
+}
+
+.emoji-1f383 {
+        background-position: -1702px -342px;
+}
+
+.emoji-1f384 {
+        background-position: -1770px -342px;
+}
+
+.emoji-1f385 {
+        background-position: -1838px -342px;
+}
+
+.emoji-1f386 {
+        background-position: -1906px -342px;
+}
+
+.emoji-1f387 {
+        background-position: -2px -410px;
+}
+
+.emoji-1f388 {
+        background-position: -70px -410px;
+}
+
+.emoji-1f389 {
+        background-position: -138px -410px;
+}
+
+.emoji-1f38a {
+        background-position: -206px -410px;
+}
+
+.emoji-1f38b {
+        background-position: -274px -410px;
+}
+
+.emoji-1f38c {
+        background-position: -342px -410px;
+}
+
+.emoji-1f38d {
+        background-position: -410px -410px;
+}
+
+.emoji-1f38e {
+        background-position: -478px -410px;
+}
+
+.emoji-1f38f {
+        background-position: -546px -410px;
+}
+
+.emoji-1f390 {
+        background-position: -614px -410px;
+}
+
+.emoji-1f391 {
+        background-position: -682px -410px;
+}
+
+.emoji-1f392 {
+        background-position: -750px -410px;
+}
+
+.emoji-1f393 {
+        background-position: -818px -410px;
+}
+
+.emoji-1f3a0 {
+        background-position: -886px -410px;
+}
+
+.emoji-1f3a1 {
+        background-position: -954px -410px;
+}
+
+.emoji-1f3a2 {
+        background-position: -1022px -410px;
+}
+
+.emoji-1f3a3 {
+        background-position: -1090px -410px;
+}
+
+.emoji-1f3a4 {
+        background-position: -1158px -410px;
+}
+
+.emoji-1f3a5 {
+        background-position: -1226px -410px;
+}
+
+.emoji-1f3a6 {
+        background-position: -1294px -410px;
+}
+
+.emoji-1f3a7 {
+        background-position: -1362px -410px;
+}
+
+.emoji-1f3a8 {
+        background-position: -1430px -410px;
+}
+
+.emoji-1f3a9 {
+        background-position: -1498px -410px;
+}
+
+.emoji-1f3aa {
+        background-position: -1566px -410px;
+}
+
+.emoji-1f3ab {
+        background-position: -1634px -410px;
+}
+
+.emoji-1f3ac {
+        background-position: -1702px -410px;
+}
+
+.emoji-1f3ad {
+        background-position: -1770px -410px;
+}
+
+.emoji-1f3ae {
+        background-position: -1838px -410px;
+}
+
+.emoji-1f3af {
+        background-position: -1906px -410px;
+}
+
+.emoji-1f3b0 {
+        background-position: -2px -478px;
+}
+
+.emoji-1f3b1 {
+        background-position: -70px -478px;
+}
+
+.emoji-1f3b2 {
+        background-position: -138px -478px;
+}
+
+.emoji-1f3b3 {
+        background-position: -206px -478px;
+}
+
+.emoji-1f3b4 {
+        background-position: -274px -478px;
+}
+
+.emoji-1f3b5 {
+        background-position: -342px -478px;
+}
+
+.emoji-1f3b6 {
+        background-position: -410px -478px;
+}
+
+.emoji-1f3b7 {
+        background-position: -478px -478px;
+}
+
+.emoji-1f3b8 {
+        background-position: -546px -478px;
+}
+
+.emoji-1f3b9 {
+        background-position: -614px -478px;
+}
+
+.emoji-1f3ba {
+        background-position: -682px -478px;
+}
+
+.emoji-1f3bb {
+        background-position: -750px -478px;
+}
+
+.emoji-1f3bc {
+        background-position: -818px -478px;
+}
+
+.emoji-1f3bd {
+        background-position: -886px -478px;
+}
+
+.emoji-1f3be {
+        background-position: -954px -478px;
+}
+
+.emoji-1f3bf {
+        background-position: -1022px -478px;
+}
+
+.emoji-1f3c0 {
+        background-position: -1090px -478px;
+}
+
+.emoji-1f3c1 {
+        background-position: -1158px -478px;
+}
+
+.emoji-1f3c2 {
+        background-position: -1226px -478px;
+}
+
+.emoji-1f3c3 {
+        background-position: -1294px -478px;
+}
+
+.emoji-1f3c4 {
+        background-position: -1362px -478px;
+}
+
+.emoji-1f3c6 {
+        background-position: -1430px -478px;
+}
+
+.emoji-1f3c7 {
+        background-position: -1498px -478px;
+}
+
+.emoji-1f3c8 {
+        background-position: -1566px -478px;
+}
+
+.emoji-1f3c9 {
+        background-position: -1634px -478px;
+}
+
+.emoji-1f3ca {
+        background-position: -1702px -478px;
+}
+
+.emoji-1f3e0 {
+        background-position: -1770px -478px;
+}
+
+.emoji-1f3e1 {
+        background-position: -1838px -478px;
+}
+
+.emoji-1f3e2 {
+        background-position: -1906px -478px;
+}
+
+.emoji-1f3e3 {
+        background-position: -2px -546px;
+}
+
+.emoji-1f3e4 {
+        background-position: -70px -546px;
+}
+
+.emoji-1f3e5 {
+        background-position: -138px -546px;
+}
+
+.emoji-1f3e6 {
+        background-position: -206px -546px;
+}
+
+.emoji-1f3e7 {
+        background-position: -274px -546px;
+}
+
+.emoji-1f3e8 {
+        background-position: -342px -546px;
+}
+
+.emoji-1f3e9 {
+        background-position: -410px -546px;
+}
+
+.emoji-1f3ea {
+        background-position: -478px -546px;
+}
+
+.emoji-1f3eb {
+        background-position: -546px -546px;
+}
+
+.emoji-1f3ec {
+        background-position: -614px -546px;
+}
+
+.emoji-1f3ed {
+        background-position: -682px -546px;
+}
+
+.emoji-1f3ee {
+        background-position: -750px -546px;
+}
+
+.emoji-1f3ef {
+        background-position: -818px -546px;
+}
+
+.emoji-1f3f0 {
+        background-position: -886px -546px;
+}
+
+.emoji-1f400 {
+        background-position: -954px -546px;
+}
+
+.emoji-1f401 {
+        background-position: -1022px -546px;
+}
+
+.emoji-1f402 {
+        background-position: -1090px -546px;
+}
+
+.emoji-1f403 {
+        background-position: -1158px -546px;
+}
+
+.emoji-1f404 {
+        background-position: -1226px -546px;
+}
+
+.emoji-1f405 {
+        background-position: -1294px -546px;
+}
+
+.emoji-1f406 {
+        background-position: -1362px -546px;
+}
+
+.emoji-1f407 {
+        background-position: -1430px -546px;
+}
+
+.emoji-1f408 {
+        background-position: -1498px -546px;
+}
+
+.emoji-1f409 {
+        background-position: -1566px -546px;
+}
+
+.emoji-1f40a {
+        background-position: -1634px -546px;
+}
+
+.emoji-1f40b {
+        background-position: -1702px -546px;
+}
+
+.emoji-1f40c {
+        background-position: -1770px -546px;
+}
+
+.emoji-1f40d {
+        background-position: -1838px -546px;
+}
+
+.emoji-1f40e {
+        background-position: -1906px -546px;
+}
+
+.emoji-1f40f {
+        background-position: -2px -614px;
+}
+
+.emoji-1f410 {
+        background-position: -70px -614px;
+}
+
+.emoji-1f411 {
+        background-position: -138px -614px;
+}
+
+.emoji-1f412 {
+        background-position: -206px -614px;
+}
+
+.emoji-1f413 {
+        background-position: -274px -614px;
+}
+
+.emoji-1f414 {
+        background-position: -342px -614px;
+}
+
+.emoji-1f415 {
+        background-position: -410px -614px;
+}
+
+.emoji-1f416 {
+        background-position: -478px -614px;
+}
+
+.emoji-1f417 {
+        background-position: -546px -614px;
+}
+
+.emoji-1f418 {
+        background-position: -614px -614px;
+}
+
+.emoji-1f419 {
+        background-position: -682px -614px;
+}
+
+.emoji-1f41a {
+        background-position: -750px -614px;
+}
+
+.emoji-1f41b {
+        background-position: -818px -614px;
+}
+
+.emoji-1f41c {
+        background-position: -886px -614px;
+}
+
+.emoji-1f41d {
+        background-position: -954px -614px;
+}
+
+.emoji-1f41e {
+        background-position: -1022px -614px;
+}
+
+.emoji-1f41f {
+        background-position: -1090px -614px;
+}
+
+.emoji-1f420 {
+        background-position: -1158px -614px;
+}
+
+.emoji-1f421 {
+        background-position: -1226px -614px;
+}
+
+.emoji-1f422 {
+        background-position: -1294px -614px;
+}
+
+.emoji-1f423 {
+        background-position: -1362px -614px;
+}
+
+.emoji-1f424 {
+        background-position: -1430px -614px;
+}
+
+.emoji-1f425 {
+        background-position: -1498px -614px;
+}
+
+.emoji-1f426 {
+        background-position: -1566px -614px;
+}
+
+.emoji-1f427 {
+        background-position: -1634px -614px;
+}
+
+.emoji-1f428 {
+        background-position: -1702px -614px;
+}
+
+.emoji-1f429 {
+        background-position: -1770px -614px;
+}
+
+.emoji-1f42a {
+        background-position: -1838px -614px;
+}
+
+.emoji-1f42b {
+        background-position: -1906px -614px;
+}
+
+.emoji-1f42c {
+        background-position: -2px -682px;
+}
+
+.emoji-1f42d {
+        background-position: -70px -682px;
+}
+
+.emoji-1f42e {
+        background-position: -138px -682px;
+}
+
+.emoji-1f42f {
+        background-position: -206px -682px;
+}
+
+.emoji-1f430 {
+        background-position: -274px -682px;
+}
+
+.emoji-1f431 {
+        background-position: -342px -682px;
+}
+
+.emoji-1f432 {
+        background-position: -410px -682px;
+}
+
+.emoji-1f433 {
+        background-position: -478px -682px;
+}
+
+.emoji-1f434 {
+        background-position: -546px -682px;
+}
+
+.emoji-1f435 {
+        background-position: -614px -682px;
+}
+
+.emoji-1f436 {
+        background-position: -682px -682px;
+}
+
+.emoji-1f437 {
+        background-position: -750px -682px;
+}
+
+.emoji-1f438 {
+        background-position: -818px -682px;
+}
+
+.emoji-1f439 {
+        background-position: -886px -682px;
+}
+
+.emoji-1f43a {
+        background-position: -954px -682px;
+}
+
+.emoji-1f43b {
+        background-position: -1022px -682px;
+}
+
+.emoji-1f43c {
+        background-position: -1090px -682px;
+}
+
+.emoji-1f43d {
+        background-position: -1158px -682px;
+}
+
+.emoji-1f43e {
+        background-position: -1226px -682px;
+}
+
+.emoji-1f440 {
+        background-position: -1294px -682px;
+}
+
+.emoji-1f442 {
+        background-position: -1362px -682px;
+}
+
+.emoji-1f443 {
+        background-position: -1430px -682px;
+}
+
+.emoji-1f444 {
+        background-position: -1498px -682px;
+}
+
+.emoji-1f445 {
+        background-position: -1566px -682px;
+}
+
+.emoji-1f446 {
+        background-position: -1634px -682px;
+}
+
+.emoji-1f447 {
+        background-position: -1702px -682px;
+}
+
+.emoji-1f448 {
+        background-position: -1770px -682px;
+}
+
+.emoji-1f449 {
+        background-position: -1838px -682px;
+}
+
+.emoji-1f44a {
+        background-position: -1906px -682px;
+}
+
+.emoji-1f44b {
+        background-position: -2px -750px;
+}
+
+.emoji-1f44c {
+        background-position: -70px -750px;
+}
+
+.emoji-1f44d {
+        background-position: -138px -750px;
+}
+
+.emoji-1f44e {
+        background-position: -206px -750px;
+}
+
+.emoji-1f44f {
+        background-position: -274px -750px;
+}
+
+.emoji-1f450 {
+        background-position: -342px -750px;
+}
+
+.emoji-1f451 {
+        background-position: -410px -750px;
+}
+
+.emoji-1f452 {
+        background-position: -478px -750px;
+}
+
+.emoji-1f453 {
+        background-position: -546px -750px;
+}
+
+.emoji-1f454 {
+        background-position: -614px -750px;
+}
+
+.emoji-1f455 {
+        background-position: -682px -750px;
+}
+
+.emoji-1f456 {
+        background-position: -750px -750px;
+}
+
+.emoji-1f457 {
+        background-position: -818px -750px;
+}
+
+.emoji-1f458 {
+        background-position: -886px -750px;
+}
+
+.emoji-1f459 {
+        background-position: -954px -750px;
+}
+
+.emoji-1f45a {
+        background-position: -1022px -750px;
+}
+
+.emoji-1f45b {
+        background-position: -1090px -750px;
+}
+
+.emoji-1f45c {
+        background-position: -1158px -750px;
+}
+
+.emoji-1f45d {
+        background-position: -1226px -750px;
+}
+
+.emoji-1f45e {
+        background-position: -1294px -750px;
+}
+
+.emoji-1f45f {
+        background-position: -1362px -750px;
+}
+
+.emoji-1f460 {
+        background-position: -1430px -750px;
+}
+
+.emoji-1f461 {
+        background-position: -1498px -750px;
+}
+
+.emoji-1f462 {
+        background-position: -1566px -750px;
+}
+
+.emoji-1f463 {
+        background-position: -1634px -750px;
+}
+
+.emoji-1f464 {
+        background-position: -1702px -750px;
+}
+
+.emoji-1f465 {
+        background-position: -1770px -750px;
+}
+
+.emoji-1f466 {
+        background-position: -1838px -750px;
+}
+
+.emoji-1f467 {
+        background-position: -1906px -750px;
+}
+
+.emoji-1f468 {
+        background-position: -2px -818px;
+}
+
+.emoji-1f469 {
+        background-position: -70px -818px;
+}
+
+.emoji-1f46a {
+        background-position: -138px -818px;
+}
+
+.emoji-1f46b {
+        background-position: -206px -818px;
+}
+
+.emoji-1f46c {
+        background-position: -274px -818px;
+}
+
+.emoji-1f46d {
+        background-position: -342px -818px;
+}
+
+.emoji-1f46e {
+        background-position: -410px -818px;
+}
+
+.emoji-1f46f {
+        background-position: -478px -818px;
+}
+
+.emoji-1f470 {
+        background-position: -546px -818px;
+}
+
+.emoji-1f471 {
+        background-position: -614px -818px;
+}
+
+.emoji-1f472 {
+        background-position: -682px -818px;
+}
+
+.emoji-1f473 {
+        background-position: -750px -818px;
+}
+
+.emoji-1f474 {
+        background-position: -818px -818px;
+}
+
+.emoji-1f475 {
+        background-position: -886px -818px;
+}
+
+.emoji-1f476 {
+        background-position: -954px -818px;
+}
+
+.emoji-1f477 {
+        background-position: -1022px -818px;
+}
+
+.emoji-1f478 {
+        background-position: -1090px -818px;
+}
+
+.emoji-1f479 {
+        background-position: -1158px -818px;
+}
+
+.emoji-1f47a {
+        background-position: -1226px -818px;
+}
+
+.emoji-1f47b {
+        background-position: -1294px -818px;
+}
+
+.emoji-1f47c {
+        background-position: -1362px -818px;
+}
+
+.emoji-1f47d {
+        background-position: -1430px -818px;
+}
+
+.emoji-1f47e {
+        background-position: -1498px -818px;
+}
+
+.emoji-1f47f {
+        background-position: -1566px -818px;
+}
+
+.emoji-1f480 {
+        background-position: -1634px -818px;
+}
+
+.emoji-1f481 {
+        background-position: -1702px -818px;
+}
+
+.emoji-1f482 {
+        background-position: -1770px -818px;
+}
+
+.emoji-1f483 {
+        background-position: -1838px -818px;
+}
+
+.emoji-1f484 {
+        background-position: -1906px -818px;
+}
+
+.emoji-1f485 {
+        background-position: -2px -886px;
+}
+
+.emoji-1f486 {
+        background-position: -70px -886px;
+}
+
+.emoji-1f487 {
+        background-position: -138px -886px;
+}
+
+.emoji-1f488 {
+        background-position: -206px -886px;
+}
+
+.emoji-1f489 {
+        background-position: -274px -886px;
+}
+
+.emoji-1f48a {
+        background-position: -342px -886px;
+}
+
+.emoji-1f48b {
+        background-position: -410px -886px;
+}
+
+.emoji-1f48c {
+        background-position: -478px -886px;
+}
+
+.emoji-1f48d {
+        background-position: -546px -886px;
+}
+
+.emoji-1f48e {
+        background-position: -614px -886px;
+}
+
+.emoji-1f48f {
+        background-position: -682px -886px;
+}
+
+.emoji-1f490 {
+        background-position: -750px -886px;
+}
+
+.emoji-1f491 {
+        background-position: -818px -886px;
+}
+
+.emoji-1f492 {
+        background-position: -886px -886px;
+}
+
+.emoji-1f493 {
+        background-position: -954px -886px;
+}
+
+.emoji-1f494 {
+        background-position: -1022px -886px;
+}
+
+.emoji-1f495 {
+        background-position: -1090px -886px;
+}
+
+.emoji-1f496 {
+        background-position: -1158px -886px;
+}
+
+.emoji-1f497 {
+        background-position: -1226px -886px;
+}
+
+.emoji-1f498 {
+        background-position: -1294px -886px;
+}
+
+.emoji-1f499 {
+        background-position: -1362px -886px;
+}
+
+.emoji-1f49a {
+        background-position: -1430px -886px;
+}
+
+.emoji-1f49b {
+        background-position: -1498px -886px;
+}
+
+.emoji-1f49c {
+        background-position: -1566px -886px;
+}
+
+.emoji-1f49d {
+        background-position: -1634px -886px;
+}
+
+.emoji-1f49e {
+        background-position: -1702px -886px;
+}
+
+.emoji-1f49f {
+        background-position: -1770px -886px;
+}
+
+.emoji-1f4a0 {
+        background-position: -1838px -886px;
+}
+
+.emoji-1f4a1 {
+        background-position: -1906px -886px;
+}
+
+.emoji-1f4a2 {
+        background-position: -2px -954px;
+}
+
+.emoji-1f4a3 {
+        background-position: -70px -954px;
+}
+
+.emoji-1f4a4 {
+        background-position: -138px -954px;
+}
+
+.emoji-1f4a5 {
+        background-position: -206px -954px;
+}
+
+.emoji-1f4a6 {
+        background-position: -274px -954px;
+}
+
+.emoji-1f4a7 {
+        background-position: -342px -954px;
+}
+
+.emoji-1f4a8 {
+        background-position: -410px -954px;
+}
+
+.emoji-1f4a9 {
+        background-position: -478px -954px;
+}
+
+.emoji-1f4aa {
+        background-position: -546px -954px;
+}
+
+.emoji-1f4ab {
+        background-position: -614px -954px;
+}
+
+.emoji-1f4ac {
+        background-position: -682px -954px;
+}
+
+.emoji-1f4ad {
+        background-position: -750px -954px;
+}
+
+.emoji-1f4ae {
+        background-position: -818px -954px;
+}
+
+.emoji-1f4af {
+        background-position: -886px -954px;
+}
+
+.emoji-1f4b0 {
+        background-position: -954px -954px;
+}
+
+.emoji-1f4b1 {
+        background-position: -1022px -954px;
+}
+
+.emoji-1f4b2 {
+        background-position: -1090px -954px;
+}
+
+.emoji-1f4b3 {
+        background-position: -1158px -954px;
+}
+
+.emoji-1f4b4 {
+        background-position: -1226px -954px;
+}
+
+.emoji-1f4b5 {
+        background-position: -1294px -954px;
+}
+
+.emoji-1f4b6 {
+        background-position: -1362px -954px;
+}
+
+.emoji-1f4b7 {
+        background-position: -1430px -954px;
+}
+
+.emoji-1f4b8 {
+        background-position: -1498px -954px;
+}
+
+.emoji-1f4b9 {
+        background-position: -1566px -954px;
+}
+
+.emoji-1f4ba {
+        background-position: -1634px -954px;
+}
+
+.emoji-1f4bb {
+        background-position: -1702px -954px;
+}
+
+.emoji-1f4bc {
+        background-position: -1770px -954px;
+}
+
+.emoji-1f4bd {
+        background-position: -1838px -954px;
+}
+
+.emoji-1f4be {
+        background-position: -1906px -954px;
+}
+
+.emoji-1f4bf {
+        background-position: -2px -1022px;
+}
+
+.emoji-1f4c0 {
+        background-position: -70px -1022px;
+}
+
+.emoji-1f4c1 {
+        background-position: -138px -1022px;
+}
+
+.emoji-1f4c2 {
+        background-position: -206px -1022px;
+}
+
+.emoji-1f4c3 {
+        background-position: -274px -1022px;
+}
+
+.emoji-1f4c4 {
+        background-position: -342px -1022px;
+}
+
+.emoji-1f4c5 {
+        background-position: -410px -1022px;
+}
+
+.emoji-1f4c6 {
+        background-position: -478px -1022px;
+}
+
+.emoji-1f4c7 {
+        background-position: -546px -1022px;
+}
+
+.emoji-1f4c8 {
+        background-position: -614px -1022px;
+}
+
+.emoji-1f4c9 {
+        background-position: -682px -1022px;
+}
+
+.emoji-1f4ca {
+        background-position: -750px -1022px;
+}
+
+.emoji-1f4cb {
+        background-position: -818px -1022px;
+}
+
+.emoji-1f4cc {
+        background-position: -886px -1022px;
+}
+
+.emoji-1f4cd {
+        background-position: -954px -1022px;
+}
+
+.emoji-1f4ce {
+        background-position: -1022px -1022px;
+}
+
+.emoji-1f4cf {
+        background-position: -1090px -1022px;
+}
+
+.emoji-1f4d0 {
+        background-position: -1158px -1022px;
+}
+
+.emoji-1f4d1 {
+        background-position: -1226px -1022px;
+}
+
+.emoji-1f4d2 {
+        background-position: -1294px -1022px;
+}
+
+.emoji-1f4d3 {
+        background-position: -1362px -1022px;
+}
+
+.emoji-1f4d4 {
+        background-position: -1430px -1022px;
+}
+
+.emoji-1f4d5 {
+        background-position: -1498px -1022px;
+}
+
+.emoji-1f4d6 {
+        background-position: -1566px -1022px;
+}
+
+.emoji-1f4d7 {
+        background-position: -1634px -1022px;
+}
+
+.emoji-1f4d8 {
+        background-position: -1702px -1022px;
+}
+
+.emoji-1f4d9 {
+        background-position: -1770px -1022px;
+}
+
+.emoji-1f4da {
+        background-position: -1838px -1022px;
+}
+
+.emoji-1f4db {
+        background-position: -1906px -1022px;
+}
+
+.emoji-1f4dc {
+        background-position: -2px -1090px;
+}
+
+.emoji-1f4dd {
+        background-position: -70px -1090px;
+}
+
+.emoji-1f4de {
+        background-position: -138px -1090px;
+}
+
+.emoji-1f4df {
+        background-position: -206px -1090px;
+}
+
+.emoji-1f4e0 {
+        background-position: -274px -1090px;
+}
+
+.emoji-1f4e1 {
+        background-position: -342px -1090px;
+}
+
+.emoji-1f4e2 {
+        background-position: -410px -1090px;
+}
+
+.emoji-1f4e3 {
+        background-position: -478px -1090px;
+}
+
+.emoji-1f4e4 {
+        background-position: -546px -1090px;
+}
+
+.emoji-1f4e5 {
+        background-position: -614px -1090px;
+}
+
+.emoji-1f4e6 {
+        background-position: -682px -1090px;
+}
+
+.emoji-1f4e7 {
+        background-position: -750px -1090px;
+}
+
+.emoji-1f4e8 {
+        background-position: -818px -1090px;
+}
+
+.emoji-1f4e9 {
+        background-position: -886px -1090px;
+}
+
+.emoji-1f4ea {
+        background-position: -954px -1090px;
+}
+
+.emoji-1f4eb {
+        background-position: -1022px -1090px;
+}
+
+.emoji-1f4ec {
+        background-position: -1090px -1090px;
+}
+
+.emoji-1f4ed {
+        background-position: -1158px -1090px;
+}
+
+.emoji-1f4ee {
+        background-position: -1226px -1090px;
+}
+
+.emoji-1f4ef {
+        background-position: -1294px -1090px;
+}
+
+.emoji-1f4f0 {
+        background-position: -1362px -1090px;
+}
+
+.emoji-1f4f1 {
+        background-position: -1430px -1090px;
+}
+
+.emoji-1f4f2 {
+        background-position: -1498px -1090px;
+}
+
+.emoji-1f4f3 {
+        background-position: -1566px -1090px;
+}
+
+.emoji-1f4f4 {
+        background-position: -1634px -1090px;
+}
+
+.emoji-1f4f5 {
+        background-position: -1702px -1090px;
+}
+
+.emoji-1f4f6 {
+        background-position: -1770px -1090px;
+}
+
+.emoji-1f4f7 {
+        background-position: -1838px -1090px;
+}
+
+.emoji-1f4f9 {
+        background-position: -1906px -1090px;
+}
+
+.emoji-1f4fa {
+        background-position: -2px -1158px;
+}
+
+.emoji-1f4fb {
+        background-position: -70px -1158px;
+}
+
+.emoji-1f4fc {
+        background-position: -138px -1158px;
+}
+
+.emoji-1f500 {
+        background-position: -206px -1158px;
+}
+
+.emoji-1f501 {
+        background-position: -274px -1158px;
+}
+
+.emoji-1f502 {
+        background-position: -342px -1158px;
+}
+
+.emoji-1f503 {
+        background-position: -410px -1158px;
+}
+
+.emoji-1f504 {
+        background-position: -478px -1158px;
+}
+
+.emoji-1f505 {
+        background-position: -546px -1158px;
+}
+
+.emoji-1f506 {
+        background-position: -614px -1158px;
+}
+
+.emoji-1f507 {
+        background-position: -682px -1158px;
+}
+
+.emoji-1f508 {
+        background-position: -750px -1158px;
+}
+
+.emoji-1f509 {
+        background-position: -818px -1158px;
+}
+
+.emoji-1f50a {
+        background-position: -886px -1158px;
+}
+
+.emoji-1f50b {
+        background-position: -954px -1158px;
+}
+
+.emoji-1f50c {
+        background-position: -1022px -1158px;
+}
+
+.emoji-1f50d {
+        background-position: -1090px -1158px;
+}
+
+.emoji-1f50e {
+        background-position: -1158px -1158px;
+}
+
+.emoji-1f50f {
+        background-position: -1226px -1158px;
+}
+
+.emoji-1f510 {
+        background-position: -1294px -1158px;
+}
+
+.emoji-1f511 {
+        background-position: -1362px -1158px;
+}
+
+.emoji-1f512 {
+        background-position: -1430px -1158px;
+}
+
+.emoji-1f513 {
+        background-position: -1498px -1158px;
+}
+
+.emoji-1f514 {
+        background-position: -1566px -1158px;
+}
+
+.emoji-1f515 {
+        background-position: -1634px -1158px;
+}
+
+.emoji-1f516 {
+        background-position: -1702px -1158px;
+}
+
+.emoji-1f517 {
+        background-position: -1770px -1158px;
+}
+
+.emoji-1f518 {
+        background-position: -1838px -1158px;
+}
+
+.emoji-1f519 {
+        background-position: -1906px -1158px;
+}
+
+.emoji-1f51a {
+        background-position: -2px -1226px;
+}
+
+.emoji-1f51b {
+        background-position: -70px -1226px;
+}
+
+.emoji-1f51c {
+        background-position: -138px -1226px;
+}
+
+.emoji-1f51d {
+        background-position: -206px -1226px;
+}
+
+.emoji-1f51e {
+        background-position: -274px -1226px;
+}
+
+.emoji-1f51f {
+        background-position: -342px -1226px;
+}
+
+.emoji-1f520 {
+        background-position: -410px -1226px;
+}
+
+.emoji-1f521 {
+        background-position: -478px -1226px;
+}
+
+.emoji-1f522 {
+        background-position: -546px -1226px;
+}
+
+.emoji-1f523 {
+        background-position: -614px -1226px;
+}
+
+.emoji-1f524 {
+        background-position: -682px -1226px;
+}
+
+.emoji-1f525 {
+        background-position: -750px -1226px;
+}
+
+.emoji-1f526 {
+        background-position: -818px -1226px;
+}
+
+.emoji-1f527 {
+        background-position: -886px -1226px;
+}
+
+.emoji-1f528 {
+        background-position: -954px -1226px;
+}
+
+.emoji-1f529 {
+        background-position: -1022px -1226px;
+}
+
+.emoji-1f52a {
+        background-position: -1090px -1226px;
+}
+
+.emoji-1f52b {
+        background-position: -1158px -1226px;
+}
+
+.emoji-1f52c {
+        background-position: -1226px -1226px;
+}
+
+.emoji-1f52d {
+        background-position: -1294px -1226px;
+}
+
+.emoji-1f52e {
+        background-position: -1362px -1226px;
+}
+
+.emoji-1f52f {
+        background-position: -1430px -1226px;
+}
+
+.emoji-1f530 {
+        background-position: -1498px -1226px;
+}
+
+.emoji-1f531 {
+        background-position: -1566px -1226px;
+}
+
+.emoji-1f532 {
+        background-position: -1634px -1226px;
+}
+
+.emoji-1f533 {
+        background-position: -1702px -1226px;
+}
+
+.emoji-1f534 {
+        background-position: -1770px -1226px;
+}
+
+.emoji-1f535 {
+        background-position: -1838px -1226px;
+}
+
+.emoji-1f536 {
+        background-position: -1906px -1226px;
+}
+
+.emoji-1f537 {
+        background-position: -2px -1294px;
+}
+
+.emoji-1f538 {
+        background-position: -70px -1294px;
+}
+
+.emoji-1f539 {
+        background-position: -138px -1294px;
+}
+
+.emoji-1f53a {
+        background-position: -206px -1294px;
+}
+
+.emoji-1f53b {
+        background-position: -274px -1294px;
+}
+
+.emoji-1f53c {
+        background-position: -342px -1294px;
+}
+
+.emoji-1f53d {
+        background-position: -410px -1294px;
+}
+
+.emoji-1f550 {
+        background-position: -478px -1294px;
+}
+
+.emoji-1f551 {
+        background-position: -546px -1294px;
+}
+
+.emoji-1f552 {
+        background-position: -614px -1294px;
+}
+
+.emoji-1f553 {
+        background-position: -682px -1294px;
+}
+
+.emoji-1f554 {
+        background-position: -750px -1294px;
+}
+
+.emoji-1f555 {
+        background-position: -818px -1294px;
+}
+
+.emoji-1f556 {
+        background-position: -886px -1294px;
+}
+
+.emoji-1f557 {
+        background-position: -954px -1294px;
+}
+
+.emoji-1f558 {
+        background-position: -1022px -1294px;
+}
+
+.emoji-1f559 {
+        background-position: -1090px -1294px;
+}
+
+.emoji-1f55a {
+        background-position: -1158px -1294px;
+}
+
+.emoji-1f55b {
+        background-position: -1226px -1294px;
+}
+
+.emoji-1f55c {
+        background-position: -1294px -1294px;
+}
+
+.emoji-1f55d {
+        background-position: -1362px -1294px;
+}
+
+.emoji-1f55e {
+        background-position: -1430px -1294px;
+}
+
+.emoji-1f55f {
+        background-position: -1498px -1294px;
+}
+
+.emoji-1f560 {
+        background-position: -1566px -1294px;
+}
+
+.emoji-1f561 {
+        background-position: -1634px -1294px;
+}
+
+.emoji-1f562 {
+        background-position: -1702px -1294px;
+}
+
+.emoji-1f563 {
+        background-position: -1770px -1294px;
+}
+
+.emoji-1f564 {
+        background-position: -1838px -1294px;
+}
+
+.emoji-1f565 {
+        background-position: -1906px -1294px;
+}
+
+.emoji-1f566 {
+        background-position: -2px -1362px;
+}
+
+.emoji-1f567 {
+        background-position: -70px -1362px;
+}
+
+.emoji-1f5fb {
+        background-position: -138px -1362px;
+}
+
+.emoji-1f5fc {
+        background-position: -206px -1362px;
+}
+
+.emoji-1f5fd {
+        background-position: -274px -1362px;
+}
+
+.emoji-1f5fe {
+        background-position: -342px -1362px;
+}
+
+.emoji-1f5ff {
+        background-position: -410px -1362px;
+}
+
+.emoji-1f600 {
+        background-position: -478px -1362px;
+}
+
+.emoji-1f601 {
+        background-position: -546px -1362px;
+}
+
+.emoji-1f602 {
+        background-position: -614px -1362px;
+}
+
+.emoji-1f603 {
+        background-position: -682px -1362px;
+}
+
+.emoji-1f604 {
+        background-position: -750px -1362px;
+}
+
+.emoji-1f605 {
+        background-position: -818px -1362px;
+}
+
+.emoji-1f606 {
+        background-position: -886px -1362px;
+}
+
+.emoji-1f607 {
+        background-position: -954px -1362px;
+}
+
+.emoji-1f608 {
+        background-position: -1022px -1362px;
+}
+
+.emoji-1f609 {
+        background-position: -1090px -1362px;
+}
+
+.emoji-1f60a {
+        background-position: -1158px -1362px;
+}
+
+.emoji-1f60b {
+        background-position: -1226px -1362px;
+}
+
+.emoji-1f60c {
+        background-position: -1294px -1362px;
+}
+
+.emoji-1f60d {
+        background-position: -1362px -1362px;
+}
+
+.emoji-1f60e {
+        background-position: -1430px -1362px;
+}
+
+.emoji-1f60f {
+        background-position: -1498px -1362px;
+}
+
+.emoji-1f610 {
+        background-position: -1566px -1362px;
+}
+
+.emoji-1f611 {
+        background-position: -1634px -1362px;
+}
+
+.emoji-1f612 {
+        background-position: -1702px -1362px;
+}
+
+.emoji-1f613 {
+        background-position: -1770px -1362px;
+}
+
+.emoji-1f614 {
+        background-position: -1838px -1362px;
+}
+
+.emoji-1f615 {
+        background-position: -1906px -1362px;
+}
+
+.emoji-1f616 {
+        background-position: -2px -1430px;
+}
+
+.emoji-1f617 {
+        background-position: -70px -1430px;
+}
+
+.emoji-1f618 {
+        background-position: -138px -1430px;
+}
+
+.emoji-1f619 {
+        background-position: -206px -1430px;
+}
+
+.emoji-1f61a {
+        background-position: -274px -1430px;
+}
+
+.emoji-1f61b {
+        background-position: -342px -1430px;
+}
+
+.emoji-1f61c {
+        background-position: -410px -1430px;
+}
+
+.emoji-1f61d {
+        background-position: -478px -1430px;
+}
+
+.emoji-1f61e {
+        background-position: -546px -1430px;
+}
+
+.emoji-1f61f {
+        background-position: -614px -1430px;
+}
+
+.emoji-1f620 {
+        background-position: -682px -1430px;
+}
+
+.emoji-1f621 {
+        background-position: -750px -1430px;
+}
+
+.emoji-1f622 {
+        background-position: -818px -1430px;
+}
+
+.emoji-1f623 {
+        background-position: -886px -1430px;
+}
+
+.emoji-1f624 {
+        background-position: -954px -1430px;
+}
+
+.emoji-1f625 {
+        background-position: -1022px -1430px;
+}
+
+.emoji-1f626 {
+        background-position: -1090px -1430px;
+}
+
+.emoji-1f627 {
+        background-position: -1158px -1430px;
+}
+
+.emoji-1f628 {
+        background-position: -1226px -1430px;
+}
+
+.emoji-1f629 {
+        background-position: -1294px -1430px;
+}
+
+.emoji-1f62a {
+        background-position: -1362px -1430px;
+}
+
+.emoji-1f62b {
+        background-position: -1430px -1430px;
+}
+
+.emoji-1f62c {
+        background-position: -1498px -1430px;
+}
+
+.emoji-1f62d {
+        background-position: -1566px -1430px;
+}
+
+.emoji-1f62e {
+        background-position: -1634px -1430px;
+}
+
+.emoji-1f62f {
+        background-position: -1702px -1430px;
+}
+
+.emoji-1f630 {
+        background-position: -1770px -1430px;
+}
+
+.emoji-1f631 {
+        background-position: -1838px -1430px;
+}
+
+.emoji-1f632 {
+        background-position: -1906px -1430px;
+}
+
+.emoji-1f633 {
+        background-position: -2px -1498px;
+}
+
+.emoji-1f634 {
+        background-position: -70px -1498px;
+}
+
+.emoji-1f635 {
+        background-position: -138px -1498px;
+}
+
+.emoji-1f636 {
+        background-position: -206px -1498px;
+}
+
+.emoji-1f637 {
+        background-position: -274px -1498px;
+}
+
+.emoji-1f638 {
+        background-position: -342px -1498px;
+}
+
+.emoji-1f639 {
+        background-position: -410px -1498px;
+}
+
+.emoji-1f63a {
+        background-position: -478px -1498px;
+}
+
+.emoji-1f63b {
+        background-position: -546px -1498px;
+}
+
+.emoji-1f63c {
+        background-position: -614px -1498px;
+}
+
+.emoji-1f63d {
+        background-position: -682px -1498px;
+}
+
+.emoji-1f63e {
+        background-position: -750px -1498px;
+}
+
+.emoji-1f63f {
+        background-position: -818px -1498px;
+}
+
+.emoji-1f640 {
+        background-position: -886px -1498px;
+}
+
+.emoji-1f641 {
+        background-position: -954px -1498px;
+}
+
+.emoji-1f642 {
+        background-position: -1022px -1498px;
+}
+
+.emoji-1f643 {
+        background-position: -1090px -1498px;
+}
+
+.emoji-1f645 {
+        background-position: -1158px -1498px;
+}
+
+.emoji-1f646 {
+        background-position: -1226px -1498px;
+}
+
+.emoji-1f647 {
+        background-position: -1294px -1498px;
+}
+
+.emoji-1f648 {
+        background-position: -1362px -1498px;
+}
+
+.emoji-1f649 {
+        background-position: -1430px -1498px;
+}
+
+.emoji-1f64a {
+        background-position: -1498px -1498px;
+}
+
+.emoji-1f64b {
+        background-position: -1566px -1498px;
+}
+
+.emoji-1f64c {
+        background-position: -1634px -1498px;
+}
+
+.emoji-1f64d {
+        background-position: -1702px -1498px;
+}
+
+.emoji-1f64e {
+        background-position: -1770px -1498px;
+}
+
+.emoji-1f64f {
+        background-position: -1838px -1498px;
+}
+
+.emoji-1f680 {
+        background-position: -1906px -1498px;
+}
+
+.emoji-1f681 {
+        background-position: -2px -1566px;
+}
+
+.emoji-1f682 {
+        background-position: -70px -1566px;
+}
+
+.emoji-1f683 {
+        background-position: -138px -1566px;
+}
+
+.emoji-1f684 {
+        background-position: -206px -1566px;
+}
+
+.emoji-1f685 {
+        background-position: -274px -1566px;
+}
+
+.emoji-1f686 {
+        background-position: -342px -1566px;
+}
+
+.emoji-1f687 {
+        background-position: -410px -1566px;
+}
+
+.emoji-1f688 {
+        background-position: -478px -1566px;
+}
+
+.emoji-1f689 {
+        background-position: -546px -1566px;
+}
+
+.emoji-1f68a {
+        background-position: -614px -1566px;
+}
+
+.emoji-1f68b {
+        background-position: -682px -1566px;
+}
+
+.emoji-1f68c {
+        background-position: -750px -1566px;
+}
+
+.emoji-1f68d {
+        background-position: -818px -1566px;
+}
+
+.emoji-1f68e {
+        background-position: -886px -1566px;
+}
+
+.emoji-1f68f {
+        background-position: -954px -1566px;
+}
+
+.emoji-1f690 {
+        background-position: -1022px -1566px;
+}
+
+.emoji-1f691 {
+        background-position: -1090px -1566px;
+}
+
+.emoji-1f692 {
+        background-position: -1158px -1566px;
+}
+
+.emoji-1f693 {
+        background-position: -1226px -1566px;
+}
+
+.emoji-1f694 {
+        background-position: -1294px -1566px;
+}
+
+.emoji-1f695 {
+        background-position: -1362px -1566px;
+}
+
+.emoji-1f696 {
+        background-position: -1430px -1566px;
+}
+
+.emoji-1f697 {
+        background-position: -1498px -1566px;
+}
+
+.emoji-1f698 {
+        background-position: -1566px -1566px;
+}
+
+.emoji-1f699 {
+        background-position: -1634px -1566px;
+}
+
+.emoji-1f69a {
+        background-position: -1702px -1566px;
+}
+
+.emoji-1f69b {
+        background-position: -1770px -1566px;
+}
+
+.emoji-1f69c {
+        background-position: -1838px -1566px;
+}
+
+.emoji-1f69d {
+        background-position: -1906px -1566px;
+}
+
+.emoji-1f69e {
+        background-position: -2px -1634px;
+}
+
+.emoji-1f69f {
+        background-position: -70px -1634px;
+}
+
+.emoji-1f6a0 {
+        background-position: -138px -1634px;
+}
+
+.emoji-1f6a1 {
+        background-position: -206px -1634px;
+}
+
+.emoji-1f6a2 {
+        background-position: -274px -1634px;
+}
+
+.emoji-1f6a3 {
+        background-position: -342px -1634px;
+}
+
+.emoji-1f6a4 {
+        background-position: -410px -1634px;
+}
+
+.emoji-1f6a5 {
+        background-position: -478px -1634px;
+}
+
+.emoji-1f6a6 {
+        background-position: -546px -1634px;
+}
+
+.emoji-1f6a7 {
+        background-position: -614px -1634px;
+}
+
+.emoji-1f6a8 {
+        background-position: -682px -1634px;
+}
+
+.emoji-1f6a9 {
+        background-position: -750px -1634px;
+}
+
+.emoji-1f6aa {
+        background-position: -818px -1634px;
+}
+
+.emoji-1f6ab {
+        background-position: -886px -1634px;
+}
+
+.emoji-1f6ac {
+        background-position: -954px -1634px;
+}
+
+.emoji-1f6ad {
+        background-position: -1022px -1634px;
+}
+
+.emoji-1f6ae {
+        background-position: -1090px -1634px;
+}
+
+.emoji-1f6af {
+        background-position: -1158px -1634px;
+}
+
+.emoji-1f6b0 {
+        background-position: -1226px -1634px;
+}
+
+.emoji-1f6b1 {
+        background-position: -1294px -1634px;
+}
+
+.emoji-1f6b2 {
+        background-position: -1362px -1634px;
+}
+
+.emoji-1f6b3 {
+        background-position: -1430px -1634px;
+}
+
+.emoji-1f6b4 {
+        background-position: -1498px -1634px;
+}
+
+.emoji-1f6b5 {
+        background-position: -1566px -1634px;
+}
+
+.emoji-1f6b6 {
+        background-position: -1634px -1634px;
+}
+
+.emoji-1f6b7 {
+        background-position: -1702px -1634px;
+}
+
+.emoji-1f6b8 {
+        background-position: -1770px -1634px;
+}
+
+.emoji-1f6b9 {
+        background-position: -1838px -1634px;
+}
+
+.emoji-1f6ba {
+        background-position: -1906px -1634px;
+}
+
+.emoji-1f6bb {
+        background-position: -2px -1702px;
+}
+
+.emoji-1f6bc {
+        background-position: -70px -1702px;
+}
+
+.emoji-1f6bd {
+        background-position: -138px -1702px;
+}
+
+.emoji-1f6be {
+        background-position: -206px -1702px;
+}
+
+.emoji-1f6bf {
+        background-position: -274px -1702px;
+}
+
+.emoji-1f6c0 {
+        background-position: -342px -1702px;
+}
+
+.emoji-1f6c1 {
+        background-position: -410px -1702px;
+}
+
+.emoji-1f6c2 {
+        background-position: -478px -1702px;
+}
+
+.emoji-1f6c3 {
+        background-position: -546px -1702px;
+}
+
+.emoji-1f6c4 {
+        background-position: -614px -1702px;
+}
+
+.emoji-1f6c5 {
+        background-position: -682px -1702px;
+}
+
+.emoji-203c {
+        background-position: -750px -1702px;
+}
+
+.emoji-2049 {
+        background-position: -818px -1702px;
+}
+
+.emoji-2122 {
+        background-position: -886px -1702px;
+}
+
+.emoji-2139 {
+        background-position: -954px -1702px;
+}
+
+.emoji-2194 {
+        background-position: -1022px -1702px;
+}
+
+.emoji-2195 {
+        background-position: -1090px -1702px;
+}
+
+.emoji-2196 {
+        background-position: -1158px -1702px;
+}
+
+.emoji-2197 {
+        background-position: -1226px -1702px;
+}
+
+.emoji-2198 {
+        background-position: -1294px -1702px;
+}
+
+.emoji-2199 {
+        background-position: -1362px -1702px;
+}
+
+.emoji-21a9 {
+        background-position: -1430px -1702px;
+}
+
+.emoji-21aa {
+        background-position: -1498px -1702px;
+}
+
+.emoji-231a {
+        background-position: -1566px -1702px;
+}
+
+.emoji-231b {
+        background-position: -1634px -1702px;
+}
+
+.emoji-23e9 {
+        background-position: -1702px -1702px;
+}
+
+.emoji-23ea {
+        background-position: -1770px -1702px;
+}
+
+.emoji-23eb {
+        background-position: -1838px -1702px;
+}
+
+.emoji-23ec {
+        background-position: -1906px -1702px;
+}
+
+.emoji-23f0 {
+        background-position: -2px -1770px;
+}
+
+.emoji-23f3 {
+        background-position: -70px -1770px;
+}
+
+.emoji-24c2 {
+        background-position: -138px -1770px;
+}
+
+.emoji-25aa {
+        background-position: -206px -1770px;
+}
+
+.emoji-25ab {
+        background-position: -274px -1770px;
+}
+
+.emoji-25b6 {
+        background-position: -342px -1770px;
+}
+
+.emoji-25c0 {
+        background-position: -410px -1770px;
+}
+
+.emoji-25fb {
+        background-position: -478px -1770px;
+}
+
+.emoji-25fc {
+        background-position: -546px -1770px;
+}
+
+.emoji-25fd {
+        background-position: -614px -1770px;
+}
+
+.emoji-25fe {
+        background-position: -682px -1770px;
+}
+
+.emoji-2600 {
+        background-position: -750px -1770px;
+}
+
+.emoji-2601 {
+        background-position: -818px -1770px;
+}
+
+.emoji-260e {
+        background-position: -886px -1770px;
+}
+
+.emoji-2611 {
+        background-position: -954px -1770px;
+}
+
+.emoji-2614 {
+        background-position: -1022px -1770px;
+}
+
+.emoji-2615 {
+        background-position: -1090px -1770px;
+}
+
+.emoji-261d {
+        background-position: -1158px -1770px;
+}
+
+.emoji-263a {
+        background-position: -1226px -1770px;
+}
+
+.emoji-2648 {
+        background-position: -1294px -1770px;
+}
+
+.emoji-2649 {
+        background-position: -1362px -1770px;
+}
+
+.emoji-264a {
+        background-position: -1430px -1770px;
+}
+
+.emoji-264b {
+        background-position: -1498px -1770px;
+}
+
+.emoji-264c {
+        background-position: -1566px -1770px;
+}
+
+.emoji-264d {
+        background-position: -1634px -1770px;
+}
+
+.emoji-264e {
+        background-position: -1702px -1770px;
+}
+
+.emoji-264f {
+        background-position: -1770px -1770px;
+}
+
+.emoji-2650 {
+        background-position: -1838px -1770px;
+}
+
+.emoji-2651 {
+        background-position: -1906px -1770px;
+}
+
+.emoji-2652 {
+        background-position: -2px -1838px;
+}
+
+.emoji-2653 {
+        background-position: -70px -1838px;
+}
+
+.emoji-2660 {
+        background-position: -138px -1838px;
+}
+
+.emoji-2663 {
+        background-position: -206px -1838px;
+}
+
+.emoji-2665 {
+        background-position: -274px -1838px;
+}
+
+.emoji-2666 {
+        background-position: -342px -1838px;
+}
+
+.emoji-2668 {
+        background-position: -410px -1838px;
+}
+
+.emoji-267b {
+        background-position: -478px -1838px;
+}
+
+.emoji-267f {
+        background-position: -546px -1838px;
+}
+
+.emoji-2693 {
+        background-position: -614px -1838px;
+}
+
+.emoji-26a0 {
+        background-position: -682px -1838px;
+}
+
+.emoji-26a1 {
+        background-position: -750px -1838px;
+}
+
+.emoji-26aa {
+        background-position: -818px -1838px;
+}
+
+.emoji-26ab {
+        background-position: -886px -1838px;
+}
+
+.emoji-26bd {
+        background-position: -954px -1838px;
+}
+
+.emoji-26be {
+        background-position: -1022px -1838px;
+}
+
+.emoji-26c4 {
+        background-position: -1090px -1838px;
+}
+
+.emoji-26c5 {
+        background-position: -1158px -1838px;
+}
+
+.emoji-26ce {
+        background-position: -1226px -1838px;
+}
+
+.emoji-26d4 {
+        background-position: -1294px -1838px;
+}
+
+.emoji-26ea {
+        background-position: -1362px -1838px;
+}
+
+.emoji-26f2 {
+        background-position: -1430px -1838px;
+}
+
+.emoji-26f3 {
+        background-position: -1498px -1838px;
+}
+
+.emoji-26f5 {
+        background-position: -1566px -1838px;
+}
+
+.emoji-26fa {
+        background-position: -1634px -1838px;
+}
+
+.emoji-26fd {
+        background-position: -1702px -1838px;
+}
+
+.emoji-2702 {
+        background-position: -1770px -1838px;
+}
+
+.emoji-2705 {
+        background-position: -1838px -1838px;
+}
+
+.emoji-2708 {
+        background-position: -1906px -1838px;
+}
+
+.emoji-2709 {
+        background-position: -2px -1906px;
+}
+
+.emoji-270a {
+        background-position: -70px -1906px;
+}
+
+.emoji-270b {
+        background-position: -138px -1906px;
+}
+
+.emoji-270c {
+        background-position: -206px -1906px;
+}
+
+.emoji-270f {
+        background-position: -274px -1906px;
+}
+
+.emoji-2712 {
+        background-position: -342px -1906px;
+}
+
+.emoji-2714 {
+        background-position: -410px -1906px;
+}
+
+.emoji-2716 {
+        background-position: -478px -1906px;
+}
+
+.emoji-2728 {
+        background-position: -546px -1906px;
+}
+
+.emoji-2733 {
+        background-position: -614px -1906px;
+}
+
+.emoji-2734 {
+        background-position: -682px -1906px;
+}
+
+.emoji-2744 {
+        background-position: -750px -1906px;
+}
+
+.emoji-2747 {
+        background-position: -818px -1906px;
+}
+
+.emoji-274c {
+        background-position: -886px -1906px;
+}
+
+.emoji-274e {
+        background-position: -954px -1906px;
+}
+
+.emoji-2753 {
+        background-position: -1022px -1906px;
+}
+
+.emoji-2754 {
+        background-position: -1090px -1906px;
+}
+
+.emoji-2755 {
+        background-position: -1158px -1906px;
+}
+
+.emoji-2757 {
+        background-position: -1226px -1906px;
+}
+
+.emoji-2764 {
+        background-position: -1294px -1906px;
+}
+
+.emoji-2795 {
+        background-position: -1362px -1906px;
+}
+
+.emoji-2796 {
+        background-position: -1430px -1906px;
+}
+
+.emoji-2797 {
+        background-position: -1498px -1906px;
+}
+
+.emoji-27a1 {
+        background-position: -1566px -1906px;
+}
+
+.emoji-27b0 {
+        background-position: -1634px -1906px;
+}
+
+.emoji-27bf {
+        background-position: -1702px -1906px;
+}
+
+.emoji-2934 {
+        background-position: -1770px -1906px;
+}
+
+.emoji-2935 {
+        background-position: -1838px -1906px;
+}
+
+.emoji-2b05 {
+        background-position: -1906px -1906px;
+}
+
+.emoji-2b06 {
+        background-position: -1974px -2px;
+}
+
+.emoji-2b07 {
+        background-position: -1974px -70px;
+}
+
+.emoji-2b1b {
+        background-position: -1974px -138px;
+}
+
+.emoji-2b1c {
+        background-position: -1974px -206px;
+}
+
+.emoji-2b50 {
+        background-position: -1974px -274px;
+}
+
+.emoji-2b55 {
+        background-position: -1974px -342px;
+}
+
+.emoji-3030 {
+        background-position: -1974px -410px;
+}
+
+.emoji-303d {
+        background-position: -1974px -478px;
+}
+
+.emoji-3297 {
+        background-position: -1974px -546px;
+}
+
+.emoji-3299 {
+        background-position: -1974px -614px;
+}
+
+.emoji-bowtie {
+        background-position: -1974px -682px;
+}
+
+.emoji-feelsgood {
+        background-position: -1974px -750px;
+}
+
+.emoji-finnadie {
+        background-position: -1974px -818px;
+}
+
+.emoji-fu {
+        background-position: -1974px -886px;
+}
+
+.emoji-goberserk {
+        background-position: -1974px -954px;
+}
+
+.emoji-godmode {
+        background-position: -1974px -1022px;
+}
+
+.emoji-hurtrealbad {
+        background-position: -1974px -1090px;
+}
+
+.emoji-img_trans {
+    width: 1px;
+    height: 1px;
+    background-position: -2042px -2px;
+}
+
+.emoji-mattermost {
+        background-position: -1974px -1158px;
+}
+
+.emoji-metal {
+        background-position: -1974px -1226px;
+}
+
+.emoji-neckbeard {
+        background-position: -1974px -1294px;
+}
+
+.emoji-octocat {
+        background-position: -1974px -1362px;
+}
+
+.emoji-rage1 {
+        background-position: -1974px -1430px;
+}
+
+.emoji-rage2 {
+        background-position: -1974px -1498px;
+}
+
+.emoji-rage3 {
+        background-position: -1974px -1566px;
+}
+
+.emoji-rage4 {
+        background-position: -1974px -1634px;
+}
+
+.emoji-shipit {
+    width: 75px;
+    height: 75px;
+    background-position: -1974px -1702px;
+}
+
+.emoji-suspect {
+        background-position: -1974px -1781px;
+}
+
+.emoji-taco {
+        background-position: -1974px -1849px;
+}
+
+.emoji-trollface {
+        background-position: -1974px -1917px;
+}
diff --git a/webapp/sass/components/_emoticons.scss b/webapp/sass/components/_emoticons.scss
index 43d2e8ece..7cf7034d2 100644
--- a/webapp/sass/components/_emoticons.scss
+++ b/webapp/sass/components/_emoticons.scss
@@ -1,15 +1,15 @@
-@charset 'UTF-8';
+@charset "UTF-8";
 
 .emoticon {
     background-position: 50% 50%;
     background-repeat: no-repeat;
     background-size: contain;
     display: inline-block;
-    height: 20px;
+    height: 21px;
     min-height: 1em;
     min-width: 1em;
     vertical-align: middle;
-    width: 20px;
+    width: 21px;
 }
 
 .emoticon-suggestion {
@@ -36,3 +36,205 @@
     text-align: center;
     vertical-align: middle;
 }
+
+.emoji-picker__popover {
+    padding: 0px;
+
+    .popover-content {
+        padding: 0px;
+    }
+}
+
+
+
+.emoji-picker-bottom {
+    display: flex;
+    flex-direction: column;
+    @include user-select(none);
+    position: absolute;
+    z-index: 40;
+    right: 0%;
+    width: 278px;
+    border: 1px solid;
+    min-height: 298px;
+    border-radius: 3px;
+
+    .emoji-picker__search-container {
+        position: relative;
+
+        .emoji-picker__search-icon {
+            padding-left: 6px;
+            padding-top: 6px;
+            position: absolute;
+            font-size: 13px;
+        }
+
+
+    }
+}
+
+.emoji-picker__search {
+    border-width: 1px 0px 1px 0px;
+    border-style: solid;
+    padding: 2px 0 2px 25px;
+    width: 100%;
+    height: 25px;
+    font-size: 12px;
+
+    &:focus{
+        outline: none;
+    }
+}
+
+.emoji-picker {
+    display: flex;
+    flex-direction: column;
+    @include user-select(none);
+    position: absolute;
+    top: -361px;
+    right: 0px;
+    width: 278px;
+    border: 1px solid;
+    border-radius: 3px;
+
+    .emoji-picker__search-container {
+        position: relative;
+
+        .emoji-picker__search-icon {
+            padding-left: 6px;
+            padding-top: 6px;
+            position: absolute;
+            font-size: 13px;
+        }
+
+
+    }
+}
+
+.emoji-picker__categories {
+    flex-grow: 0;
+    flex-shrink: 0;
+
+    .emoji-picker__category {
+        color: #333333;
+        display: inline-block;
+        font-size: 16px;
+        margin: 3px 6px;
+        text-align: center;
+        width: 15px;
+
+        &--selected,
+        &:hover {
+            color: #666666;
+        }
+    }
+}
+
+.emoji-picker__items {
+    max-height: 262px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding: 0px 8px 8px 8px;
+    position: relative;
+
+
+
+    .emoji-picker__category-header {
+        font-size: 12px;
+        font-weight: bold;
+        margin-bottom: 6px;
+        margin-top: 3px;
+        padding-top: 3px;
+        // padding-bottom: 10px;
+    }
+
+    .emoji-picker__preview_sprite {
+        isplay: inline-block;
+        height: 45px;
+        margin: 3px;
+        vertical-align: top;
+
+        padding: 3px;
+    }
+
+    .emoji-picker-items__container {
+        > div {
+            display: inline-block;
+            height: 21px;
+            margin: 3px;
+            vertical-align: top;
+            width: 21px;
+            padding: 3px;
+        }
+        > span {
+            display: inline-block;
+            height: 21px;
+            margin: 3px;
+            vertical-align: top;
+            width: 21px;
+            padding: 0px;
+            border: 0px;
+        }
+    }
+
+    .emoji-picker__item {
+        border-radius: 6px;
+        cursor: pointer;
+        font-size: 18px;
+        margin: 3px;
+    }
+}
+.emojisprite-wrapper {
+    cursor: pointer;
+}
+
+.emoji-picker__preview {
+    border-top: 1px solid;
+    display: table-cell;
+    vertical-align: middle;
+    flex-grow: 0;
+    flex-shrink: 0;
+    height:45px;
+    width: 278px;
+    padding: 3px 10px;
+
+    &.emoji-picker__preview-placeholder {
+        padding: 12px;
+    }
+
+    .emoji-picker__preview-image-box {
+        display: table-cell;
+        vertical-align: middle;
+        height: 36px;
+        width: 42px;
+
+        .sprite-preview {
+            height: 36px;
+            width: 36px;
+            vertical-align: middle;
+            padding: 0px;
+            border: 0px;
+            display: inline-block;
+        }
+    }
+
+    .emoji-picker__preview-image {
+        max-height: 36px;
+        max-width: 42px;
+        padding: 0 10px 0 0;
+
+    }
+
+    .emoji-picker__preview-name {
+
+        font-size: 13px;
+        font-weight: bold;
+    }
+
+    .emoji-picker__preview-aliases {
+        display: block;
+        font-size: 12px;
+
+        font-weight: bold;
+    }
+}
diff --git a/webapp/sass/components/_module.scss b/webapp/sass/components/_module.scss
index c1114bbcb..2cf310a48 100644
--- a/webapp/sass/components/_module.scss
+++ b/webapp/sass/components/_module.scss
@@ -3,6 +3,7 @@
 @import 'buttons';
 @import 'dropdown';
 @import 'emoticons';
+@import 'emojisprite';
 @import 'error-bar';
 @import 'files';
 @import 'inputs';
diff --git a/webapp/sass/layout/_post-right.scss b/webapp/sass/layout/_post-right.scss
index 9a0f658a2..d4c1daa6e 100644
--- a/webapp/sass/layout/_post-right.scss
+++ b/webapp/sass/layout/_post-right.scss
@@ -62,10 +62,6 @@
     .post-create__container {
         width: 100%;
 
-        .textarea-wrapper {
-            min-height: 100px;
-        }
-
         .btn {
             margin-bottom: 10px;
             
@@ -154,6 +150,7 @@
     overflow: auto;
     position: relative;
     padding-top: 10px;
+    min-height: 429px;
     
     .file-preview__container {
         margin-top: 5px;
diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss
index 1e1dd4b08..892eea860 100644
--- a/webapp/sass/layout/_post.scss
+++ b/webapp/sass/layout/_post.scss
@@ -23,7 +23,7 @@
 }
 
 .textarea-wrapper {
-    min-height: 36px;
+    min-height: 37px;
     position: relative;
 
     .textbox-preview-area {
@@ -371,7 +371,15 @@
         padding: .5em 15px 0;
         width: 100%;
     }
+    #reply_textbox.custom-textarea-emoji{
+        bottom: 0;
+        max-height: 162px !important;
+        padding-right: 60px;
+        padding-top: 6px;
+        resize: none;
 
+
+    }
     .center {
         max-width: 1028px;
     }
@@ -386,6 +394,25 @@
                 -ms-overflow-style: auto;
                 overflow: auto;
                 padding-right: 43px;
+                resize: none;
+            }
+
+            #post_textbox-reference.custom-textarea-emoji {
+                padding-right: 43px;
+                resize: none;
+            }
+
+
+            #reply_textbox.custom-textarea-emoji {
+                padding-right: 60px;
+                resize: none;
+
+            }
+
+            #post_textbox.custom-textarea-emoji {
+                padding-right: 60px;
+                resize: none;
+
             }
         }
     }
@@ -425,8 +452,28 @@
             max-height: 162px !important;
             padding-right: 35px;
             padding-top: 8px;
+            resize: none;
+
+        }
+
+        #post_textbox-reference.custom-textarea-emoji {
+            bottom: 0;
+            max-height: 162px !important;
+            padding-right: 35px;
+            padding-top: 8px;
+            resize: none;
+
         }
 
+
+        #post_textbox.custom-textarea-emoji {
+            bottom: 0;
+            max-height: 162px !important;
+            padding-right: 60px;
+            padding-top: 8px;
+            resize: none;
+
+        }
         .textarea-div {
             line-height: 1.5;
             max-height: 163px !important;
@@ -436,13 +483,12 @@
         }
 
         .btn-file {
-            @include opacity(.5);
             @include single-transition(all, .15s);
             font-size: 16px;
-            padding: 7px 9px 6px;
+            padding: 8px 9px 4px;
             position: absolute;
             right: 0;
-            top: 1px;
+            top: 0;
             z-index: 5;
 
             svg {
@@ -452,7 +498,6 @@
 
             &:hover,
             &:active {
-                @include opacity(.9);
                 box-shadow: none;
             }
 
@@ -464,6 +509,48 @@
                     @include opacity(.1);
                 }
             }
+
+            .icon--attachment {
+                @include opacity(.5);
+                display: inline-block;
+                position: relative;
+                vertical-align: top;
+
+                input {
+                    cursor: pointer;
+                    direction: ltr;
+                    filter: alpha(opacity=0);
+                    font-size: 23px;
+                    height: 100%;
+                    margin: 0;
+                    opacity: 0;
+                    position: absolute;
+                    right: 0;
+                    top: 0;
+                    width: 100%;
+                }
+
+                &:hover {
+                    @include opacity(.9);
+                }
+            }
+        }
+
+
+        .icon--emoji-picker {
+            @include opacity(.5);
+            @include single-transition(all, .15s);
+            cursor: pointer;
+            font-size: 19px;
+            margin-left: 7px;
+            position: relative;
+            vertical-align: top;
+
+            &:hover,
+            &:active {
+                @include opacity(.9);
+                box-shadow: none;
+            }
         }
 
         textarea {
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index 4fbec082a..e6cf0ed7d 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -31,6 +31,15 @@
         }
     }
 
+    .post-create__container{
+        .post-create-body {
+            .icon__postcontent_picker {
+                display:none;
+                top: -7px;
+            }
+        }
+    }
+
     .suggestion-list__content {
         max-height: 145px;
     }
@@ -1098,6 +1107,13 @@
                 padding: .5em 1em;
             }
 
+            .emoji-rhs {
+                position: relative;
+                display: none;
+                top: 1px;
+                right: -1px;
+            }
+
             .msg-typing:empty {
                 display: none;
             }
diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss
index 3bafc38d4..6924786b9 100644
--- a/webapp/sass/responsive/_tablet.scss
+++ b/webapp/sass/responsive/_tablet.scss
@@ -19,14 +19,23 @@
             width: 300px;
         }
     }
-
+    .post-right__scroll{
+        .post-create__container{
+            .post-create-body {
+                .icon__emoji_picker {
+                    display:none;
+                    top: -7px;
+                }
+            }
+        }
+    }
     .post-create__container {
         form {
             padding: .5em 0 0;
         }
 
         .post-create-footer {
-            padding: 0 45px;
+            padding: 0 45px 0 8px;
 
             .post-error {
                 position: relative;
@@ -46,6 +55,7 @@
                 display: table-cell;
                 padding-left: 45px;
 
+
                 .sidebar--right & {
                     padding-left: 0;
                 }
@@ -54,15 +64,30 @@
             .app__content & {
                 .btn-file {
                     bottom: -2px;
-                    left: 0;
+                    left: 10px;
                     line-height: 36px;
                     padding: 0;
                     top: auto;
-                    width: 45px;
+                    width: 25px;
                 }
             }
 
-            .send-button {
+            .app__content & {
+                .icon {
+                    position: relative;
+                    top: 3px;
+
+                }
+            }
+
+            .icon__emoji_picker {
+                position: relative;
+                display: none;
+                top: 1px;
+                right: -1px;
+            }
+
+                    .send-button {
                 display: table-cell;
             }
         }
-- 
cgit v1.2.3-1-g7c22