.emojiPickerIconWrap {display:inline-block; position:relative;}
.emojiPickerIcon {position:absolute; bottom:9px; left:1px; cursor:pointer; }

.emojiPickerIconWrap .white {background:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMjc2Ljg5MXB4IiBoZWlnaHQ9IjI3Ni44OTFweCIgdmlld0JveD0iMCAwIDI3Ni44OTEgMjc2Ljg5MSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjc2Ljg5MSAyNzYuODkxIg0KCSB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxjaXJjbGUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjExIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGN4PSIxMzguNDQ1IiBjeT0iMTM4LjQ0NSIgcj0iMTMyLjk0NSIvPg0KPGNpcmNsZSBmaWxsPSIjRkZGRkZGIiBjeD0iNjguMTIiIGN5PSIxMjUuMzk1IiByPSIxNi41MDciLz4NCjxjaXJjbGUgZmlsbD0iI0ZGRkZGRiIgY3g9IjIwOC42MTciIGN5PSIxMjUuMzk1IiByPSIxNi41MDgiLz4NCjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSIxMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9Ik02OC4xMiwxODIuMDM0DQoJYzAsMCw2OS43OTMsNzAuNzA0LDE0MC40OTgsMCIvPg0KPC9zdmc+DQo=') center center no-repeat; background-size:60%;}
.emojiPickerIconWrap .black {background:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMjc2Ljg5MXB4IiBoZWlnaHQ9IjI3Ni44OTFweCIgdmlld0JveD0iMCAwIDI3Ni44OTEgMjc2Ljg5MSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjc2Ljg5MSAyNzYuODkxIg0KCSB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxjaXJjbGUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjExIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGN4PSIxMzguNDQ1IiBjeT0iMTM4LjQ0NSIgcj0iMTMyLjk0NSIvPg0KPGNpcmNsZSBjeD0iNjguMTIiIGN5PSIxMjUuMzk1IiByPSIxNi41MDciLz4NCjxjaXJjbGUgY3g9IjIwOC42MTciIGN5PSIxMjUuMzk1IiByPSIxNi41MDgiLz4NCjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIxMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9Ik02OC4xMiwxODIuMDM0DQoJYzAsMCw2OS43OTMsNzAuNzA0LDE0MC40OTgsMCIvPg0KPC9zdmc+DQo=') center center no-repeat; background-size:60%;}
.emojiPickerIconWrap .yellow {background:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMjc2Ljg5MXB4IiBoZWlnaHQ9IjI3Ni44OTFweCIgdmlld0JveD0iMCAwIDI3Ni44OTEgMjc2Ljg5MSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjc2Ljg5MSAyNzYuODkxIg0KCSB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxjaXJjbGUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRUJDMjAwIiBzdHJva2Utd2lkdGg9IjExIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGN4PSIxMzguNDQ1IiBjeT0iMTM4LjQ0NSIgcj0iMTMyLjk0NSIvPg0KPGNpcmNsZSBmaWxsPSIjRUJDMjAwIiBjeD0iNjguMTIiIGN5PSIxMjUuMzk1IiByPSIxNi41MDciLz4NCjxjaXJjbGUgZmlsbD0iI0VCQzIwMCIgY3g9IjIwOC42MTciIGN5PSIxMjUuMzk1IiByPSIxNi41MDgiLz4NCjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0VCQzIwMCIgc3Ryb2tlLXdpZHRoPSIxMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9Ik02OC4xMiwxODIuMDM0DQoJYzAsMCw2OS43OTMsNzAuNzA0LDE0MC40OTgsMCIvPg0KPC9zdmc+DQo=') center center no-repeat; background-size:60%;}
.emojiPickerIconWrap .kakao {background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAMAAAArteDzAAAAA3NCSVQICAjb4U/gAAACW1BMVEX///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD////7+/v39/f/9vbz8/P/8PD/7e3v7+//6Ojr6+vn5+f/3t7j4+P/3Nzf39//1dXb29v/0tLY2NjS0tL/wMD/0gDMzMz7zwD5zQDGxsb3ywD0yQDCwsL/srLyxwDutrbvxQC+vr7rwgC6urrnvgD/pqa2trbiugD/oaHetwCxsbH/nZ3ctQDbtAD/mZnYsgCtra3TrgD/k5Opqammpqb/jo7OqgCioqL/iYnKpgD/hobHpACenp7FogDCoACZmZm/nQC7mgCVlZWSkpK2lgDmeXmykwCOjo6ukgCujwCKioqrjQCGhoanigCCgoKhhQCeggC/bW18fHybgAB5eXnCZmaWfACWewB1dXWSeABxcXGOdQCKcgBubm6FbgBpaWl/aQBmZmahVVViYmJ7ZQB2YQCWT09dXV1aWlpwXABsWQBpWQBVVVVnVQBRUVFmVABkUgBNTU17QUFgTwBeTQBJSUlZSQBcQkJWRwBERERURQBSRABBQUFQQgBOQQA9PT1mMzNLPgA5OTl5JCVEOABBNgAzMzNyIiM9MgA6MABoHyAtLSw3LQAoKChbGxwxKABXGhs1KAEkJCQtJQFRGBlPGBg4HR0pIgBKFhcgICAoIQAlHwEcHBwjHQFBExQhGwA6ERIYGBgdGAAcGAQUFBQlEQgYFAARERAgDAwUEAAPDw0MDAwQDQAcCAkQDAQSCgoNCwEWBwcICAgLCQEIBwAEBAQIBAAFBAAHAwIAAAARaY+TAAAAyXRSTlMAESIzRFVmd4iZqrvM3e7///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+HNlRDAAAACXBIWXMAAAsSAAALEgHS3X78AAAA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) center center no-repeat; background-size:60%;margin:0 1px 1px 0;}
.emojiPickerIconWrap .triangle {width:0; hehight:0; border-bottom:20px solid rgba(60, 141, 188, 0.45); border-right: 20px solid transparent; color:#ffffff;}
.emojiPickerIconWrap .triangle .iconDiv {width:12px;height:12px;margin-top:9px;}
.emojiPickerIconWrap .triangle .iconDiv img{width:11px;}
.emojiPickerIconWrap .grey, .emojiPickerIconWrap .gray {background:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMjc2Ljg5MXB4IiBoZWlnaHQ9IjI3Ni44OTFweCIgdmlld0JveD0iMCAwIDI3Ni44OTEgMjc2Ljg5MSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjc2Ljg5MSAyNzYuODkxIg0KCSB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxjaXJjbGUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRUJDMjAwIiBzdHJva2Utd2lkdGg9IjExIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGN4PSIxMzguNDQ1IiBjeT0iMTM4LjQ0NSIgcj0iMTMyLjk0NSIvPg0KPGNpcmNsZSBmaWxsPSIjRUJDMjAwIiBjeD0iNjguMTIiIGN5PSIxMjUuMzk1IiByPSIxNi41MDciLz4NCjxjaXJjbGUgZmlsbD0iI0VCQzIwMCIgY3g9IjIwOC42MTciIGN5PSIxMjUuMzk1IiByPSIxNi41MDgiLz4NCjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0VCQzIwMCIgc3Ryb2tlLXdpZHRoPSIxMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9Ik02OC4xMiwxODIuMDM0DQoJYzAsMCw2OS43OTMsNzAuNzA0LDE0MC40OTgsMCIvPg0KPC9zdmc+DQo=') center center no-repeat; background-size:60%;}

.emojiPicker {display:none; position:absolute; outline:none; border:none; box-shadow:0 0 7px #555; border-top-left-radius:4px; border-top-right-radius:4px;}
.emojiPicker div.emoji {width:2em; height:2em; position:relative; display:inline-block;}
.emojiPicker span.emoji {width:2em; height:2em; display:inline-block; position:relative; overflow:hidden; text-indent:-9999px; vertical-align:middle;}
.emojiPicker .hidden {display:none;}

.emojiPicker nav {position:relative; z-index:0; background-color:#f2f2f2; border-top-left-radius:4px; border-top-right-radius:4px;}
.emojiPicker nav div.tab {display:inline-block; margin:2% 1% 0 1%; padding:2% 2% 1% 2%; border-top-left-radius:4px; border-top-right-radius:4px; cursor:pointer;}
.emojiPicker nav div.tab.active {background-color:#fff; box-shadow:0 0 3px #ccc;}

.emojiPicker section {overflow:scroll; position:relative; z-index:10; background:#fff;}
.emojiPicker section div {width:40px; float:left; margin:3%;}
.emojiPicker section div:hover {cursor:pointer;}