/*----------------------------------------
  Chat
------------------------------------------*/
.bb_chat-area {
  margin: 0px;
}
.bb_chat-area li {
  display: block;
  position: relative;
  margin: 0 0 50px 0;
}
.bb_chat-area li.bb_leftside {
  padding-left: 20px;
}
.bb_chat-area .bb_leftside .bb_msg-area {
  border-radius: 2px;
  background: rgba(var(--primary-rgb), 0.15);
  min-height: 60px;
  padding: 15px 15px 15px 32px;
  border-radius: var(--border-radius);
  /* color: #ffffff; */
}

.bb_chat-area li.bb_rightside {
  padding-right: 20px;
}
.bb_chat-area .bb_rightside .bb_msg-area {
  border-radius: 2px;
  background: rgba(var(--primary-rgb), 1);
  min-height: 60px;
  padding: 15px 32px 15px 15px;
  border-radius: var(--border-radius);
  color: #ffffff;
}

.bb_chat-area .bb_leftside.bb_user1 .bb_msg-area {
  background: rgba(var(--primary-rgb), 0.07);
}
.bb_chat-area .bb_leftside.bb_user2 .bb_msg-area {
  background: rgba(var(--accent-rgb), 0.07);
}
.bb_chat-area .bb_leftside.bb_user3 .bb_msg-area {
  background: rgba(var(--accent-rgb), 0.07);
}

.bb_chat-area li.bb_rightside .bb_userpic {
  left: auto;
  right: 0px;
  margin: 0;
}
.bb_chat-area .bb_userpic {
  position: absolute;
  background: #ccc;
  height: 44px;
  width: 44px;
  border-radius: var(--border-radius-50percent);
  left: 0px;
  margin-top: 0px;
  top: 20px;
  border: 3px solid #f5f5f5;
  /* -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.bb_1), 0 3px 11px -2px rgba(0, 0, 0, 0.bb_1), 0 1px 5px 0 rgba(0, 0, 0, 0.bb_1);
     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.bb_1), 0 3px 11px -2px rgba(0, 0, 0, 0.bb_1), 0 1px 5px 0 rgba(0, 0, 0, 0.bb_1); */
     text-align: -webkit-center;
     padding-top: 9px;    
 
}
.bb_chat-area .bb_msg {
  margin: 0px;
  font-size: inherit;
  line-height: inherit;
  opacity: 1;
}
.bb_chat-area .bb_time {
  font-size: 80%;
  margin-top: 5px;
  opacity: 0.8;
}
.bb_chat-area .bb_leftside .bb_time {
  float: left;
  font-size: 80%;
}
.bb_chat-area .bb_rightside .bb_time {
  right: 0px;
  left: auto;
  float: right;
  font-size: 80%;
}
.bb_chat-area .bb_ui-mediabox {
  margin: 15px -0.75rem 0px -0.75rem;
}
.bb_chat-area .bb_ui-mediabox .bb_col {
  margin-bottom: 5px;
  border-radius: var(--border-radius);
}
.bb_chat-area .bb_ui-mediabox .bb_img-wrap:after,
.bb_chat-area .bb_ui-mediabox .bb_img-wrap img {
  border-radius: var(--border-radius);
  height: auto;
  width: auto;
}

.bb_chat-area .bb_user-avatar .bb_status:after {
  top: 22px;
  left: 0px;
  transform: scale(0.9);
}
.bb_chat-area .bb_user-avatar.bb_rightside .bb_status:after {
  top: 22px;
  left: auto;
  right: 0px;
}

/*Chat message type box*/
.bb_chat-message-area {
  position: fixed;
  z-index: 998;
  bottom: 75px;
  margin: 0 auto;
  max-width: 1280px;
  width: 90%;
}

.bb_chat-message-area .bb_input-field .bb_prefix ~ textarea {
  min-height: 40px;
  padding-left: 20px;
}
.bb_chat-message-area .bb_input-field .bb_prefix ~ label {
  margin-left: 5px !important;
}
.bb_chat-message-area .bb_input-field .bb_prefix {
  left: auto;
  right: 5px;
  cursor: pointer;
  bottom: 13px;
  height: 30px;
  top: auto;
  width: 30px;
  line-height: 30px;
  opacity: 0.7;
}

/*----------------------------------------
   Site - Dark Mode - Chat
 ----------------------------------------*/
/* [data-site_mode="dark"] .bb_chat-area .bb_msg-area{ */
/* background-color: var(--dark-800); */
/* } */

/* [data-site_mode="dark"] .bb_setting-box {
   background-color: var(--dark-800);
 } */
[data-site_mode="dark"] .bb_chat-area .bb_userpic {
  border-color: var(--dark-800);
}