.bloginside { display: block; position: relative; margin: 0 0 20px 0; padding: 15px; background-color: #fff; box-shadow: 0 0 2px rgba(0, 0, 0, 0.18); border-radius: 3px; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.blog-left { position: relative; width: 100%; -webkit-flex: 0 0 230px; -moz-flex: 0 0 230px; -ms-flex: 0 0 230px; flex: 0 0 230px; max-width: 230px; }
.blog-right { position: relative; padding-left: 10px; width: 100%; -webkit-flex: 0 0 890px;	 -moz-flex: 0 0 890px; -ms-flex: 0 0 890px; flex: 0 0 890px; max-width: 890px;	 }
.blog-fluid { position: relative; width: 100%; -webkit-flex: 0 0 100%; -moz-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }

.page-title { position: relative; margin: 10px 0 20px 0; padding: 0 0 7px 0; border-bottom: solid 2px #1e90cc; font-size: 24px; font-weight: 700; line-height: 30px; color: #1e90cc; }
.page-title span { position: relative; padding: 0 15px 0 25px; background-color: #fff; z-index: 1; }
.page-title span::before { position: absolute; bottom: 5px; left: 3px; content: ""; width: 7px; height: 7px; background-color: #1e90cc; transform: rotate(45deg); z-index: 1; }
.page-title span::after { position: absolute; top: 6px; left: 5px; content: "";width: 10px; height: 10px; border: solid 2px #1e90cc; transform: rotate(15deg); z-index: 1; }

.chatarea { position: fixed; bottom: 0; right: 0; top: auto; /*width: 360px; height: 100%; max-height: 663px;*/ width: 60px; height: 70px; overflow: hidden; visibility: visible; z-index: 100; }
.chatarea-expand{ width: 360px; height: 100%; max-height: 663px; }

.chat-btn { position: absolute; bottom: 20px; right: 10px; width: 48px; height: 48px; background-color: #1e90cc; border-radius: 50%; box-shadow: 0 10px 9px 0 rgb(0 0 0 / 20%), 0 0 8px 0 rgb(0 0 0 / 10%); line-height: 48px; color: #fff; font-size: 24px; text-align: center; cursor: pointer; }
.chat-box { display: none; position: absolute; bottom: 10px; right: 10px; top: auto; width: 340px; height: 90%; box-shadow: 0 5px 7px 0 rgb(0 0 0 / 21%), 0 0 20px 0 rgb(0 0 0 / 10%); border-radius: 15px; overflow: hidden; }
.chat-box-2 { display: none; position: absolute; bottom: 10px; right: 10px; top: auto; width: 340px; height: 90%; box-shadow: 0 5px 7px 0 rgb(0 0 0 / 21%), 0 0 20px 0 rgb(0 0 0 / 10%); border-radius: 15px; overflow: hidden; }
.chat-inner { display: flex; flex-direction: column; position: relative; width: 100%; height: 100%; background-color: #f7f7f7; overflow: hidden; }
.chat-bar { display: flex; justify-content: space-between; align-items: center; padding: .65rem .95rem; width: 100%; min-height: 60px; background: #1e90cc; color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .16); }
.chat-bar .chatbox-title { font-size: 16px; font-weight: 700; line-height: 1.06; letter-spacing: -.2px; padding-left: 10px; }

.chatbox-close { width: 18px; height: 18px; cursor: pointer; opacity: .75; -webkit-transition: opacity 200ms; transition: opacity 200ms; }
.chatbox-close:hover { opacity: 1; }
.chatbox-close-2 { width: 18px; height: 18px; cursor: pointer; opacity: .75; -webkit-transition: opacity 200ms; transition: opacity 200ms; }
.chatbox-close-2:hover { opacity: 1; }

.chat-list { flex: 1 1 auto; position: relative; padding: 0; height: calc(100% - 70px); word-wrap: break-word; overflow: auto; }
.chat-list .chat-list-item { display: block; }
.chat-list .chat-list-desc { display: flex; flex-direction: column; padding: 10px; border-bottom: solid 1px #ddd; }
.chat-list .chat-list-date { margin: 0; padding: 0 0 5px 0; font-size: 11px; line-height: 1.36; letter-spacing: -.2px; color: #999; }
.chat-list .chat-list-subject { color: #424f5a; line-height: 1.36; font-size: 13px; font-weight: 400; letter-spacing: .3px; word-wrap: break-word; word-break: break-word; }
.chat-list .chat-list-item:hover { background-color: #c7eafc; }

.chat-messages { flex: 1 1 auto; position: relative; padding: .65rem; height: calc(100% - 70px - 55px); word-wrap: break-word; overflow: auto; }
.chat-messages .message { margin: 0; padding: 0; text-align: unset; }
.message-time { margin: 0 auto 10px auto; padding: 0.25rem 1rem; width: fit-content; background: #eee; border-radius: 9999px; font-size: 11px; color: #999; }
.message-wrapper { margin-bottom: 8px; padding: 0; }
.message-wrapper .wrapper-inner { display: flex; align-items: flex-end; }
.messages, .messages .message { display: flex; flex-direction: column; margin-right: 40px; width: 100%; color: #424f5a; }
.message-wrapper.self .messages { margin-right: 0; margin-left: 40px; }
.messages .message { align-items: flex-start; }
.message-wrapper.self .messages .message { align-items: flex-end; }

.messages .message .inner { padding: 15px; max-width: 100%; background-color: #fff; border-radius: 14px; border-bottom-left-radius: 0; line-height: 1.36; font-size: 13px; font-weight: 400; letter-spacing: .3px; word-wrap: break-word; word-break: break-word; }
.self .messages .message .inner { background-color: #c7eafc; border-bottom-right-radius: 0; border-bottom-left-radius: 14px; color: #424f5a; }

.message-wrapper .time { margin: 0 10px; padding: 10px 0 0 0; font-size: 11px; line-height: 1.36; letter-spacing: -.2px; color: #999; }
.message-wrapper.self .time { text-align: right; }

.chat-form { background-color: #fff; border-top: solid 1px #edf1f4; }
.chat-form form { display: flex; padding: 10px; }
.chat-form .input-wrapper { display: flex; flex: 1 0 auto; align-items: center; min-height: 28px; width: 40px; }
.chat-form .input-wrapper label { display: flex; margin: 0; padding: 0 5px; width: 100%; border: none; }
.chat-form .input-wrapper textarea { margin: 0; padding: 0; width: 100%; background-color: transparent; border: 0; overflow: auto; resize: none; outline: 0; }
.chat-form .icon-btn { display: flex; justify-content: center; align-items: center; position: relative; width: 28px; height: 28px; background-color: #1e90cc; border-radius: 50%; text-align: center; cursor: pointer; }
.chat-form .icon-btn.align-self-start { align-self: flex-end !important; }
.chat-form .icon-btn.align-self-end { align-self: flex-end !important; }
.chat-form .icon-btn.send { background-color: #1e90cc; }
.chat-form .icon-btn.send i { color: #fff; }
.chat-form .icon-btn.attachment { background-color: transparent; }
.chat-form .icon-btn.attachment i { color: #999; font-size: 20px; }
.chat-form .icon-btn.attachment input[type=file] { position: absolute; right: 0; bottom: 0; top: 0; margin: 0; padding: 0; width: 100%; opacity: 0; cursor: inherit; overflow: visible; }
.chat-input{ height: 21px; max-height: 200px; overflow-y:auto; width:250px !important; }
.chat-loading{ opacity: 0.5; }
.open-chat-room{ text-decoration: underline; color: #1e90cc; }
@media only screen and (min-width: 320px) and (max-width: 767px)  {
  .chatarea { /*width: 100%;*/ width: 60px; }
  .chatarea-expand{ width: 100%; }
  .chat-box { width: calc(100% - 20px); height: calc(100% - 20px); }
  .chat-box-2 { width: calc(100% - 20px); height: calc(100% - 20px);}
  .chat-input{ width:auto !important; }
}