/*--------------------
Chat
--------------------*/
.chat {position: absolute; top:60px; left: 50%; width: 100%; height: 70%; z-index: 2; background:#ffffff; display: -webkit-box;display: -ms-flexbox; display: flex;/* padding:40px 0px 0px; */ /* padding-top: 20px; */
  -webkit-transform: translate(-50%,0%);
          transform: translate(-50%, 0%);
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

/* close_chat */
.close_chat img{position:absolute; top:9px; right:13px;}

/*--------------------
Chat Title
--------------------*/
.chat-title {position: relative; z-index: 2; background:#901e1e; color: #fff; text-transform: uppercase; text-align: left; padding: 10px 10px 10px 50px; 	 
	-webkit-box-flex: 0;
      -ms-flex: 0 1 45px;
          flex: 0 1 45px;
}
.chat-title h1, .chat-title h2 { font-weight: normal;  font-size: 10px; margin: 0; padding: 0;}
.chat-title h2 { color: rgba(255, 255, 255, 0.5); font-size: 8px; letter-spacing: 1px;}
.chat-title .avatar { position: absolute; z-index: 1; top: 8px; left: 9px; border-radius: 30px; width: 40px; height: 28px; overflow: hidden; margin: 0; padding: 0; border: 2px solid rgba(255, 255, 255, 0.24);}
.chat-title .avatar img { width: 100%; height: auto; }

/*--------------------
Messages
--------------------*/
.messages { color: #333333; overflow: hidden; position: relative; width: 100%; 
	-webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}
.messages .messages-content { position: absolute; top: 0; left: 0; height: 101%; width: 100%;}
.messages .message { clear: both; float: left; padding: 6px 10px 7px; border-radius: 0px 10px 10px 10px; background: #f3f3f3; margin: 8px 0; font-size: 13px; line-height: 1.4; margin-left: 61px; position: relative;}
.messages .message .timestamp { position: absolute; bottom: -15px; font-size: 9px; color: #999999;}

.messages .message .avatar { position: absolute; z-index: 1; left: -60px; border-radius: 30px; width: 50px; height: 50px; overflow: hidden; margin: 0; padding: 0; border: 2px solid rgba(255, 255, 255, 0.24); top: -9px;}
.messages .message .avatar img {width: 100%; height: 100%; border-radius: 50%;}


.messages .message .avatars { position: absolute; z-index: 1; right: -60px; border-radius: 30px; width: 50px; height: 50px; overflow: hidden; margin: 0; padding: 0; border: 2px solid rgba(255, 255, 255, 0.24); top: -9px;}
.messages .message .avatars img { width: 100%; height: auto;}

.messages .message.message-personal {background: #0b7a63; float: right; color: #ffffff; text-align: right; border-radius: 10px 10px 0 10px;}
.messages .message.message-personal::before { left: auto; right: 0; bottom: -4px;}
.messages .message:last-child {  margin-bottom: 30px;}
.messages .message.new {margin-right: 13%; margin-bottom: 25px; margin-left:65px;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-animation: bounce 500ms linear both;
          animation: bounce 500ms linear both;

}
.messages .message.message-personal.new {margin-right: 3.5%; margin-left: 30%; text-align: left;}
.messages .message.loading{width: 40px; }

.messages .message.loading::before { position: absolute; top: 60%; left: 50%; content: '';
  display: block; width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); z-index: 2; margin-top: 4px; border: none;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
          animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
  -webkit-animation-delay: .15s;
          animation-delay: .15s;
}
.messages .message.loading span { display: block; font-size: 0; width: 20px; height: 10px; position: relative;}
.messages .message.loading span::before { position: absolute; top: 50%; left: 50%; content: ''; display: block; width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); z-index: 2; margin-top: 4px; margin-left: -3px;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
          animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
}
.messages .message.loading span::after { position: absolute; top: 50%; left: 50%;  content: ''; display: block; width: 3px; height: 3px; border-radius: 50%;  background: rgba(255, 255, 255, 0.5);  z-index: 2;  margin-top: 4px; margin-left: 24px;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
          animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
  -webkit-animation-delay: .3s;
          animation-delay: .3s;
}

/*--------------------
Message Box
--------------------*/
.message-box {padding: 10px; position: fixed; width: 96%; margin: 0 auto; bottom: 20px;background: #ffffff;  border: 1px solid #0b7a63; border-radius: 10px;  z-index: 5; left: 50%; margin-left: -48%; height: 39px; box-sizing: border-box;

  -webkit-box-flex: 0;
      -ms-flex: 0 1 40px;
          flex: 0 1 40px;
}
.message-box .message-input { background: none; border: none; outline: none !important;  resize: none;  color: #333333;  font-size: 13px;  height: 17px;  margin: 0;   line-height: 6px; width: 95%; margin: 0 auto;}
.message-box textarea:focus:-webkit-placeholder { color: transparent;}
.message-box textarea{font-family: 'Noto Sans KR', 'Malgun Gothic', sans-serif; font-size: 13px; color: #333333;}
.message-box .message-submit { position: absolute; z-index: 5; bottom: -6px; right: 0px; color: #fff;background: #0b7a63; font-size: 14px;  text-transform: uppercase;  border-top-right-radius: 8px;  border-bottom-right-radius: 8px; outline: none !important;  -webkit-transition: background .2s ease; transition: background .2s ease; font-size: 13px; width: 50px; height: 37px; box-sizing: border-box; cursor: pointer; line-height: 20px; font-family: 'Noto Sans KR', 'Malgun Gothic', sans-serif; font-size: 13px;}

/*--------------------
Custom Srollbar
--------------------*/
.mCSB_scrollTools { margin: 1px -3px 1px 0; opacity: 0;}

.mCSB_inside > .mCSB_container { margin-right: 0px; padding: 0 10px;}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: rgba(235,208,117, 1) !important;}