/*
聊天室
*/
  
.emojiGif{    width: 70px; max-height: 70px}
/*#chat-show{position: fixed; bottom:0; right:0 ;z-index: 8888; } */
#chat-show{max-width: 1100px;    background: #fff;    margin: 0 auto;   }
.chat-wrap{  /*版面定位*/
  /* width: 370px;*/
    max-height: calc(100vh - 32px);/*版面高度不高時，聊天界面會自適應壓扁*/
    height: 500px;    position: relative; 
    padding:0;	  animation: fadeIn 1s ease ;}

.chat-box{   
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;/*上往下排*/
    box-sizing: border-box;
    color: #333;    height: 100%;    width: 100%;    max-width: 100vw;    position: relative;  z-index: 50;
	font-size:14px;    overflow: hidden;    background-color:#fff;    box-shadow: rgb(0 0 0 / 40%) 0px 0px 4px 0px;
    border-radius: 6px; }

.chat-top{ padding:5px 15px; background-color: #ffce30 ;    color: #322701 ;}
.chat-t-toolBar{   display: flex;    align-content: stretch;   -webkit-box-align: center;   align-items: center;    min-height: 18px;}
.chat-t-title{font-weight: 700;    text-align: left;    letter-spacing: 1px;    line-height: 1;    font-size: 16px;   
-webkit-box-flex: 1;    flex-grow: 1;  }
.chat-t-btn{
	/*display: inline-flex;
    -webkit-box-align: center;    align-items: center;
    -webkit-box-pack: center;    justify-content: center;   line-height: 30px;*/ 
    margin: 0px;    cursor: pointer;    text-decoration: none;    box-sizing: border-box;    height: 30px;        font-size: 22px;    color: #64531a;}
.chat-t-btn i:hover, .chat-t-btn i:focus{	color:#144D7A;  	transition: color 0.25s ease-in-out 0s;}
.chat-content{ position:relative;  -webkit-box-flex: 2;    flex-grow: 2;
	padding:8px 5px 0; margin:0 3px ;    overflow: hidden auto;    height: 100%;}

.chat-content::-webkit-scrollbar, .chat-imgInfo::-webkit-scrollbar{    width: 6px;/*捲軸寬度*/}
.chat-content::-webkit-scrollbar-thumb, .chat-imgInfo::-webkit-scrollbar-thumb{ background: #d2d2d2; border-radius: 30px; /*捲軸拉霸*/ }
.chat-content::-webkit-scrollbar-track, .chat-imgInfo::-webkit-scrollbar-track{    background: #fff;/*捲軸底色*/}
.chat-L, .chat-R{display: -ms-flexbox;    display: flex;   
	position: relative;    margin-bottom: 6px; flex-wrap: wrap;/*超出換行*/ }
.chat-L{/*左區-回覆者信息*/ -ms-flex-direction: row;    flex-direction: row;/*左往右排*/	}
.chat-R{/*右區-個人信息*/    -ms-flex-direction: row-reverse;    flex-direction: row-reverse;/*右往左排*/		}

.chat-headImg{ transition: top 300ms ease-in-out;   padding-right: 4px;  margin-top: -5px;    color: #87929d; font-size: 22px;}
.chat-talk{ position:relative; display:block; width:100%;     padding:0 0 1px 27px;}
.chat-R .chat-talk{ text-align:right; padding-right: 3px;}
.chat-name{ display:inline-block; color: #4b779c;}
.chat-time{ font-size:13px; color:#949494; margin:0 0px 0 5px; display:inline-block}
.chat-talk-info{display: inline-block;    border-radius: 6px;    line-height:18px;    padding: 4px 6px;    max-width: 85%;}

.chat-L .chat-talk-info{ background-color:#e9ebed ;    color: #333}
.chat-R .chat-talk-info{ background-color: /*#ffce30*/#ffe79a ;    color: #322701}

.system-chat-talk-info{
    display: inline-block;    border-radius: 6px;    line-height:18px;    padding: 4px 6px;    max-width: 85%;
    
}
.chat-L .system-chat-talk-info{ background-color:#ffcaca ;    color: #333}
.chat-R .system-chat-talk-info{ background-color: #ffe79a ;    color: #ffcaca}

.manager-chat-talk-info{ display: inline-block;    border-radius: 6px;    line-height:18px;    padding: 4px 6px;    max-width: 85%; }
.chat-L .manager-chat-talk-info{ background-color:#b5d4f8 ;    color: #333}
.chat-R .manager-chat-talk-info{ background-color:#b5d4f8 ;    color: #0f2e6c}

.chat-footer{padding: 6px;    border-top: 1px solid #d0d0d0;    box-shadow: rgb(0 0 0 / 12%) 0px -3px 3px;}
.chat-f-toolBar{display: flex;    -webkit-box-pack: justify;    justify-content: space-between;    align-items:center;}
input.chat-form{height:28px; flex:1 2 66%;    padding: 5px 5px;    font-size: 14px;    line-height: 1.2;}
/*置底btn*/
.chat-face, .chat-upload, .chat-btn{cursor: pointer; -webkit-box-align: center;    align-items: center;    -webkit-box-pack: center;    justify-content: center;flex:1 1 0;     line-height: 34px; font-size:20px; text-align:center; color:#666; margin:0 0 0 6px; }
.chat-face i:hover, .chat-face i:focus, .chat-face:hover, .chat-face:focus, 
.chat-upload i:hover, .chat-upload i:focus, .chat-upload:hover, .chat-upload:focus, 
.chat-btn i:hover, .chat-btn i:focus, .chat-btn:hover, .chat-btn:focus{	color:#F63; transition: color 0.25s ease-in-out 0s;}

/*顯示全部表情圖區塊*/
.chat-showImg{position: absolute;    bottom: 46px; background-color:#fff; border-radius: 10px; border: 3px solid #ccc;    
margin: 0 auto;    right: 0; left:0;    z-index: 51;    width: 88%; }
.chat-imgInfo{height:150px; overflow: hidden auto;max-height: calc(100vh - 55vh);  margin: 10px auto 15px;    padding: 0;
    width: 97%;}
/*頁籤選單*/
.chat-showImg .nav-imgKind, .chat-showImg .nav-imgKind-gif{	margin: 0px;	padding: 3px 5px;	list-style-type: none;	position: relative;	bottom: 0px; display:flex;    flex-wrap: wrap;    flex-direction: row;    border-top: 1px solid #ccc; width: 100%;     justify-content: center;}
/*.chat-showImg .nav-imgKind{	margin: 0px;	padding: 0px;	list-style-type: none;	position: relative;	bottom: 0px; display:flex;    justify-content: space-around;    flex-wrap: nowrap;    flex-direction: row;    border-top: 1px solid #ccc;}*/
.nav-imgKind li, .nav-imgKind li:focus, .nav-imgKind-gif li, .nav-imgKind-gif li:focus{	color: #7d7d7d;}
.nav-imgKind li:hover, .nav-imgKind li:active, .nav-imgKind-gif li:hover, .nav-imgKind-gif li:active{ color:#ec2929!important; background-color:#fffa73}
.nav-imgKind li, .nav-imgKind-gif li {    border-radius: 80px;  position: relative;    display: flex;    padding: 5px; cursor: pointer;     width: 33px;    height: 33px;    flex-direction: row;
    flex-wrap: wrap;    justify-content: center;    align-items: center; }
.nav-imgKind li i { font-size:20px}

.nav-imgKind-gif li{ width: auto; height: auto}
.emojiGifNavIcon img{ width: 35px}

/*表情圖列表*/
ul.chat-img-list, ul.chat-img-list-gif{ padding: 0;	list-style-type: none;  }	
.chat-img-list li, .chat-img-list-gif li{ width: 14%;    padding: 2px 3px; float:left; max-width: 48px;  min-width: 5.5%;     display: flex;cursor: pointer; margin-bottom:2px; justify-content: center;}
.chat-img-list li:hover, .chat-img-list-gif li:hover{	background-color:#8ebce4;	border-radius: 5px;}
.chat-img-list li img{ max-width:100%}
.chat-img-list-gif li{ width: 16.4%; max-width: 16.4%; padding: 5px 2px}
.chat-img-list-gif li img{    width: 48px;    height: 48px;}
/*表情圖列表end*/
.showMoreChat{text-align: center;    display: block;    margin: 5px 0;    font-size: 13px;cursor: pointer;
    color: #fff;    background-color: #778389;    padding: 3px 0;    border-radius: 50px;
	box-shadow: 1px 1px 2px #373737;    
    -webkit-box-shadow: 1px 1px 2px #373737;
    -moz-box-shadow: 1px 1px 2px #373737;}
.showMoreChat:hover{	background-color: #3879AD;}
.chat-time-start {    text-align: center;    color: #b15925;    font-size: 13px;    position: relative;    margin-bottom: 3px;}
.chat-time-start:before, .chat-time-start:after {
    content: "";    position: absolute;    height: 2px;    background-color: #e9d4c3;    top: 0;    bottom: 0;    margin: auto;
    width: 35%;}

.chat-time-start:before {    left: 0;}
.chat-time-start:after {    right: 0;}


@media (max-width: 360px){ .cchat-img-list li{ width:16%} }
@media (max-width: 767px){}