.gradient_bg { background: #000; }

#chat { position: relative; flex-wrap: wrap; align-items: center; justify-content: space-between; transition: 0.5s; z-index: 997; position: fixed; display: flex;
	left: 30px; 
	bottom: 25px;
	box-sizing: border-box;
	border-radius: 20px;
	font-family: "游ゴシック体", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic Pro","Meiryo","メイリオ","Osaka","ＭＳ Ｐゴシック","MS P Gothic","Arial",sans-serif;
}
#chat .form { width: 370px; position: relative; }
#chat .form form { height: 40px; border-radius: 20px; overflow: hidden; }
#chat .form input { border: none; }
#chat .form .box { display: flex; position: relative; }
#chat .form .box input[type="text"],
#chat .form .box textarea { width: 100%; box-sizing: border-box; border-radius: 0; background: #edf0f6; margin: 0; height: 40px; padding: 0 10px; border: 1px solid #E6E6E6;  resize: none; line-height: 40px; height: 40px !important;border-radius: 20px;} 

#chat .form .box input[type="submit"] { color: #fff; width: 17.6%; font-size: 12px; border-radius: 100px; background: #F5AB03; appearance: none; -webkit-appearance: none; -moz-appearance: none;   position: absolute; top: 50%; transform: translateY(-50%); right: 8px; padding: 2px 0 3px;}
#chat .form .box a { display: block; height: 40px; line-height: 40px; background: #e1e1e1; width: 25%; font-size: 14px; text-align: center; }
#chat .form .box .emote_btn { z-index: 99; cursor: pointer;  width: 25px; height: auto; position: absolute; right: 80px; top: 0; bottom: 0; margin: auto; }

#chat .btns { display: flex; }
#chat .btns div { margin: 0 10px; }

#chat .form .emote { position: absolute; top: 0; transition: 0.5s; display: flex; flex-wrap: wrap; }
#chat .form .emote.active { top: -50px; }
#chat .form .emote p { margin: 0 2px; cursor: pointer; text-align: center; border-radius: 50px; }
#chat .form .emote p img { width: 40px; height: auto; }

/* ------------------------------------------------------------ private chat mode */

#chat.private { background: #4a4a4a; }
#chat.private h4 { background: #333333 url(../images/index/icn_private.png) no-repeat 20px center; background-size: 20px auto;}
#chat.private .head { background: #101010; color: #fff; }
#chat.private .mode .btn a { background: #3ca275; }

/* ------------------------------------------------------------ private message */

#chat ul li.private .wb { position: relative; padding: 10px 25px 10px 10px; }
/*
#chat ul li.private.hidden .wb { background: #8e8e8e; color: #fff; }
#chat ul li.private.hidden p.name { color: #ebebeb; }
#chat ul li.private.hidden p.name span {  }
*/
#chat ul li.private .wb::before { content: ''; display: block; width: 10px; height: 15px;
	background: url(../images/index/icn_private_bk.png) no-repeat center center;
	background-size: 100% auto;
	position: absolute;
	right: 10px;
	top: 5px;
}

#chat .chat_list { overflow-y: auto; font-size: 14px; bottom: calc(100% + 10px); max-height: 50vh; position: absolute; width: 100%; color: #fff;
	mask-image: linear-gradient(to bottom, transparent 0%, black 30%, black 100%);
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 30%, black 100%);
}
#chat .chat_list li { padding: 10px 15px; display: flex; background-color: rgba(0, 0, 0, 0.8); border-radius: 5px; margin: 5px 0; }
#chat .chat_list li.private { background-image: url(../images/map/icn_private_wh.png); background-position: 96% 10px; background-size: 12px auto; background-repeat: no-repeat; }
#chat .chat_list li .pic { background: #fff; width: 40px; height: 40px; overflow: hidden; border-radius: 50%; position: relative; }
#chat .chat_list li .pic img { width: 90%; height: auto; position: absolute;
	position: relative;
	top: 70%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
#chat .chat_list li .box { width: calc(100% - 40px); box-sizing: border-box; padding: 0 15px; }
#chat .chat_list li .box .name { padding: 0 0 10px; color: #D1D1D1; }


/* ------------------------------------------------------------ Ipad */

@media only screen and (max-width:1280px){
	#voice-control { margin: 0; left: auto; border-top-right-radius: 0; }
}
/*
@media only screen and (min-device-width: 375px) and (max-device-width: 1000px) and (orientation: landscape) {
	#chat .form {width: 250px;}
	#chat { left: 15px; bottom: 20px;}
}
*/
/* ------------------------------------------------------------ mobile */
@media only screen and (max-width:640px){
	
	#chat { z-index: 990; bottom: 67px; border-radius: 0; max-width: inherit; left: 0; width: 100%; margin: auto; background: #000; padding: 12px 3%; }	
	#chat .btns { width: 55px; }
	#chat .btns img { width: 100%; height: auto; }
	#chat .btns div { margin: 0; width: 100%; padding: 0 5px; box-sizing: border-box; }
	#chat .form { width: 100%; }
	#chat .form form { height: 35px; }
	#chat .form .box input[type="text"] { width: 80%; }
	#chat .form .box input[type="submit"] { padding: 1px 0 2px; }
	#chat .form .box .emote_btn { right: 23%; }
	#chat .form .box textarea { line-height: 35px; height: 35px !important; }
	#chat .form .emote p img { width: 35px; }
	#chat .form .emote.active { top: -41px; }
	
	#chat .chat_list { width: 94%; max-height: 30vh; }
	#chat .chat_list li { padding: 10px 3%; }
	
	body.show-controls #chat,
	body.show-controls #voice-control { z-index: 997; }
	
}