/* 
 2022-03-10 이모지 관련 CSS
 염재헌
*/
.emoji-wysiwyg-editor {
  font-size: 14px !important;
  padding: 10px; 
  padding-right: 15px !important;
  overflow: hidden;
  height: 100% !important;
  border: 0px !important;
}
.emoji-items-wrap1 .emoji-menu-tabs td{
  padding: 0 !important;
}
.emoji-menu .emoji-items-wrap{
  overflow: auto;
}
.emoji-menu{
  width: 238px !important;
}
.emoji-picker-icon{
  right: 48px !important;
  /* top: 0px !important; */
}
.emoji-menu{
  top: -225px !important;
}

/* 이모지 END*/

/*
  2022-03-10 모바일 채팅 활성화 시
  염재헌
*/
body.mobile #chat.w50p.col-xl-8.col-xxl-9,
body.mobile #player.w50p.col-xl-4.col-xxl-3{
  height: 50% !important;
}

.s-hidden {height:100%; min-height:100%; overflow:hidden !important; touch-action:none;}
/*스크롤 부드럽게*/
html {
  scroll-behavior: smooth;
}

.caht-form.w-100,.p-3{
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

* { will-change: transform, opacity;}

html{overflow: hidden;}

#msg-cont {
  overflow-x: hidden !important;
  background-color: #d8e3f9; 
  height: calc(100% - 90px) !important;
  /* overflow: auto !important; */
  /* background-color: #ebf2ff; */
  /* height: calc(100% - 50px) !important; */
  padding-bottom: 0px !important;
}

#msg-box {
  display: flex;
  flex: 0 0 100%;
  padding-right: 10px;
  border: 0px !important;
}


body.mobile #msg-box {
  padding-right: 5px !important;
  width: 100%;
}
body.mobile .emoji-wysiwyg-editor.form-group.color-theme-blue{
  border: 0px !important;
  padding-right: 5px !important;
  width: 100% !important;
}

.msg-div{
  display: flex;
  align-items: center;
  width: calc(100% - 45px);
}


#msg-add{
  /* height: 37px; */
  /* padding: 4.5px; */
  padding: 0 1rem !important;
  z-index: 999;
  width: 45px;
  max-width: 45px;
}

.message-item.my-msg{
display: flex;
width: 100%;
flex-wrap: wrap;
flex-direction: row-reverse;
}

.message-item.my-msg .message-user{
width: 100%;
flex-direction: row-reverse;
}

.message-item.my-msg .message-wrap{
max-width: 100%;
flex-direction: row-reverse;
}

body.IE .chat-body .messages-content .message-item{
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
body.IE .chat-body .messages-content .message-item .message-wrap{
max-width: calc(100% - 40px) !important;
float: left;
}

body.IE .chat-body .messages-content .message-item .message-wrap-body{
width: 100%;
}

body.IE .chat-body .messages-content .message-item .time{
float: left;
height: 100% !important;
display: flex;
flex-direction: column-reverse;
max-width: 40px !important;
}

body.IE .chat-body .messages-content .message-item .message-user{
width: 100%;
}

body.IE .bg-current{
background-color: #05f;
}



body.IE .chat-body .message-wrap-body {
display: inline-block !important;
position: relative;
}

body.IE .chat-body .messages-content .message-item.my-msg .message-wrap{
float: right;
max-width: calc(100% - 40px) !important;
}
body.IE .chat-body .messages-content .message-item.my-msg .time{
float: right;
height: 100% !important;
display: flex;
flex-direction: column-reverse;
max-width: 40px !important;
}

body.IE #player{
flex: 0 0 100% !important;
}


/* IE */
.message-item-ie {
max-width: 100%;
display: block;
margin-bottom: 10px;
}

.message-item-ie.my-msg-ie{
width: 100%;
}

.message-item-ie::after{
clear:both;
content: "";
display: block;
}

.chat-body .messages-content .message-item-ie .message-user::after{
clear:both;
content: "";
display: block;
}

.chat-body .messages-content .message-item-ie .message-user{
float: left;
}

.message-item-ie.my-msg-ie .message-user{
float: right !important;
}

.chat-body .my-msg-ie .message-wrap-body-ie{
text-align: right;
}

.chat-body .message-wrap-body-ie::after{
clear:both;
content: "";
display: block;
}

.chat-body .message-wrap-body-ie {
width: 100%;
max-width: 100%;
display: block;
height: 100%;
float: left;
}

.chat-body .messages-content .message-item-ie .message-wrap {
padding: 0 5px;
background-color: #fff;
-webkit-border-radius: 10px;
border-radius: 10px;
position: relative;
box-shadow: 0px 8px 30px rgba(0,0,0,0.05);
font-size: 13px;
color: #000;
font-weight: 500;
line-height: 24px;
z-index: 2;
max-width: calc(100% - 35px);
display: inline-block;
}

.message-item-ie.my-msg-ie .message-wrap{
text-align: left;
}

.chat-body .messages-content .message-item-ie .time{
font-size: 11px;
font-weight: 500;
color: #aaa;
margin: 0 auto;
display: inline-block;
width: 35px;
padding-left: 2.5px;
}

.chat-body .messages-content .message-item-ie.my-msg-ie .time{
font-size: 11px;
font-weight: 500;
color: #aaa;
padding-right: 2.5px;
width: 35px;
}

body.IE .chat-body .messages-content{
display: block !important;
}




body.mobile .msg-div{
  width: calc(100% - 45px);
}


body.mobile #msg-add{
  width: 61px;
  max-width: 61px;
}