.emotionheader{
    background-color: #4d4e51;
    width: 100%;
    padding: 0.15rem 0.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    position: absolute;
	bottom: 100%;
}

.emotionheader .title{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.emotionheader .cross{
    cursor:pointer;
}


.emoji-area{
	background-color: #555555;
    position: absolute;
    width: 100%;
	height:160px;
    left: 0;
    bottom: 8%;
    border-bottom: 1px solid #555555;
    border-top: 1px solid #555555;
	z-index: 1;
	display: none;
}

.emoji-area .emoji-list{
	display: flex;
	flex-wrap: wrap;
	height:100%;
	overflow-y: auto;
    /* 禁止雙擊縮放，仍保留捲動/雙指縮放 */
    touch-action: manipulation;
    /* 去掉 iOS 點擊高亮 */
    -webkit-tap-highlight-color: transparent; 
    user-select: none;
	background: linear-gradient(to top, #44494f, black);
}

.emoji-area .emoji-list .item{
    overflow: hidden;
    cursor: pointer;
	position: relative;
}

.emoji-area .emoji-list .item:hover{
	background-color: #8c8c8c;
}

.emoji-area .emoji-list .item.icon-face-item{
	width: 10%;
	height: 20%;
}

.emoji-area .emoji-list .icon-face-item .icon-face-img{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%) scale(1.1);
	-webkit-transform: translate(-50%,-50%) scale(1.1);
}

.send-msg-content .icon-face-img{
    width: 20px !important;
	height: 20px !important;
	transform: scale(0.9);
    -webkit-transform: scale(0.9);
	margin-left:3px;
	vertical-align: text-bottom;
}

.icon-face-img{
	width: 20px;
	height: 20px;
	background: url(/mobile/templates/images/live/icon-face-20210720.png) no-repeat;
	background-size: 200px auto;
	margin:0;
    vertical-align: text-bottom;
}

.icon-face-img.face02{
	background-position: -20px 0px!important;
}

.icon-face-img.face03{
	background-position: -40px 0px!important;
}

.icon-face-img.face04{
	background-position: -60px 0px!important;
}

.icon-face-img.face05{
	background-position: -80px 0px!important;
}

.icon-face-img.face06{
	background-position: -100px 0px!important;
}

.icon-face-img.face07{
	background-position: -120px 0px!important;
}

.icon-face-img.face08{
	background-position: -140px 0px!important;
}

.icon-face-img.face09{
	background-position: -160px 0px!important;
}

.icon-face-img.face10{
	background-position: -180px 0px!important;
}

.icon-face-img.face11{
	background-position: 0px -20px!important;
}

.icon-face-img.face12{
	background-position: -20px -20px!important;
}

.icon-face-img.face13{
	background-position: -40px -20px!important;
}

.icon-face-img.face14{
	background-position: -60px -20px!important;
}

.icon-face-img.face15{
	background-position: -80px -20px!important;
}

.icon-face-img.face16{
	background-position: -100px -20px!important;
}

.icon-face-img.face17{
	background-position: -120px -20px!important;
}

.icon-face-img.face18{
	background-position: -140px -20px!important;
}

.icon-face-img.face19{
	background-position: -160px -20px!important;
}

.icon-face-img.face20{
	background-position: -180px -20px!important;
}

.icon-face-img.face21{
	background-position: 0px -40px!important;
}

.icon-face-img.face22{
	background-position: -20px -40px!important;
}

.icon-face-img.face23{
	background-position: -40px -40px!important;
}

.icon-face-img.face24{
	background-position: -60px -40px!important;
}

.icon-face-img.face25{
	background-position: -80px -40px!important;
}

.icon-face-img.face26{
	background-position: -100px -40px!important;
}

.icon-face-img.face27{
	background-position: -120px -40px!important;
}

.icon-face-img.face28{
	background-position: -140px -40px!important;
}

.icon-face-img.face29{
	background-position: -160px -40px!important;
}

.icon-face-img.face30{
	background-position: -180px -40px!important;
}

.icon-face-img.face31{
	background-position: 0px -60px!important;
}

.icon-face-img.face32{
	background-position: -20px -60px!important;
}

.icon-face-img.face33{
	background-position: -40px -60px!important;
}

.icon-face-img.face34{
	background-position: -60px -60px!important;
}

.icon-face-img.face35{
	background-position: -80px -60px!important;
}

.icon-face-img.face36{
	background-position: -100px -60px!important;
}

.icon-face-img.face37{
	background-position: -120px -60px!important;
}

.icon-face-img.face38{
	background-position: -140px -60px!important;
}

.icon-face-img.face39{
	background-position: -160px -60px!important;
}

.icon-face-img.face40{
	background-position: -180px -60px!important;
}

.icon-face-img.face41{
	background-position: 0px -80px!important;
}

.icon-face-img.face42{
	background-position: -20px -80px!important;
}

.icon-face-img.face43{
	background-position: -40px -80px!important;
}

.icon-face-img.face44{
	background-position: -60px -80px!important;
}

.icon-face-img.face45{
	background-position: -80px -80px!important;
}

.icon-face-img.face46{
	background-position: -100px -80px!important;
}

.icon-face-img.face47{
	background-position: -120px -80px!important;
}

.icon-face-img.face48{
	background-position: -140px -80px!important;
}

.icon-face-img.face49{
	background-position: -160px -80px!important;
}

.icon-face-img.face50{
	background-position: -180px -80px!important;
}

.icon-face-img.face51{
	background-position: 0px -100px!important;
}

.icon-face-img.face52{
	background-position: -20px -100px!important;
}

.icon-face-img.face53{
	background-position: -40px -100px!important;
}

.icon-face-img.face54{
	background-position: -60px -100px!important;
}

.icon-face-img.face55{
	background-position: -80px -100px!important;
}

.icon-face-img.face56{
	background-position: -100px -100px!important;
}

.icon-face-img.face57{
	background-position: -120px -100px!important;
}

.icon-face-img.face58{
	background-position: -140px -100px!important;
}

.icon-face-img.face59{
	background-position: -160px -100px!important;
}

.icon-face-img.face60{
	background-position: -180px -100px!important;
}

.icon-face-img.face61{
	background-position: 0px -120px!important;
}

.icon-face-img.face62{
	background-position: -20px -120px!important;
}

.icon-face-img.face63{
	background-position: -40px -120px!important;
}

.icon-face-img.face64{
	background-position: -60px -120px!important;
}

.icon-face-img.face65{
	background-position: -80px -120px!important;
}

.icon-face-img.face66{
	background-position: -100px -120px!important;
}

.icon-face-img.face67{
	background-position: -120px -120px!important;
}

.icon-face-img.face68{
	background-position: -140px -120px!important;
}


/* emoji scrollbar */

/* 整個捲軸區塊 */
.emoji-area .emoji-list::-webkit-scrollbar {
  width: 8px;  /* 捲軸寬度 */
}

/* 捲軸軌道 */
.emoji-area .emoji-list::-webkit-scrollbar-track {
    background: #383838;
    border-radius: 4px;
	margin: 2px;
}

/* 滾動的滑塊 */
.emoji-area .emoji-list::-webkit-scrollbar-thumb {
    background: #646464;
    border-radius: 4px;
}

/* 滑鼠 hover 時 */
.emoji-area .emoji-list::-webkit-scrollbar-thumb:hover {
    background: #d6d6d6;
}