/*------------------------------------------------------------------
[Chat Stylesheet]

Project:	PFE Technology - Kramerica 2019 Chat Stylesheet
-------------------------------------------------------------------*/
/******************* 
import colors
*******************/
#chat_window.profile_user {
  padding: 5px;
}

#chat_window.profile_user .chat_title {
  padding: 5px;
  text-align: center;
  border-bottom: 1px solid #095573;
}

.chat_content {
  padding-top: 10px;
  clear: both;
  width: 100%;
  display: block;
  position: relative;
  float: left;
}

.chat_content .chat {
  max-width: 80%;
  clear: both;
  position: relative;
  margin-right: 8px;
  margin-left: 8px;
}

.chat_content .chat .chat_body {
  clear: both;
  border-radius: 5px;
  padding: 10px 20px;
  position: relative;
  margin-top: 5px;
  margin-bottom: 5px;
  color: #fff;
}

.chat_content .chat .chat_body .chat_timestamp {
  font-size: 10px;
}

.chat_content .chat .chat_user_timestamp {
  font-size: 12px;
  margin-bottom: 10px;
  opacity: 0.6;
  clear: both;
}

.chat_content .chat.chat_current_user {
  float: right;
}

.chat_content .chat.chat_current_user .chat_body {
  background: #095573;
  text-align: right;
  float: right;
}

.chat_content .chat.chat_current_user::before {
  right: -5px;
  top: 15px;
  background: #095573;
}

.chat_content .chat.chat_current_user .chat_user_timestamp {
  text-align: right;
}

.chat_content .chat.chat_admin_user {
  float: left;
}

.chat_content .chat.chat_admin_user .chat_body {
  background: #630979;
  text-align: left;
  float: left;
}

.chat_content .chat.chat_admin_user::before {
  left: -5px;
  top: 15px;
  background: #630979;
}

.chat_content .chat.chat_admin_user .chat_user_timestamp {
  text-align: left;
}

.chat_content .chat::before {
  width: 10px;
  height: 10px;
  position: absolute;
  content: "";
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

#chat_message_txt {
  display: inline-block;
  border: solid 1px #095573;
  width: 100%;
  padding: 5px;
  border-radius: 5px;
  background: transparent;
}

.send_message .message_col {
  width: 80%;
  float: left;
  padding-right: 5px;
}

.send_message .send_col {
  width: 20%;
  float: left;
}

.date_announcement {
  width: 100%;
  float: left;
  clear: both;
  position: relative;
  border: 1px solid #333;
  margin-top: 10px;
  margin-bottom: 10px;
}

.date_announcement span.date_timestamp {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  margin-top: -10px;
  color: #ccc;
  background: #333;
  border-radius: 5px;
  padding-left: 5px;
  padding-right: 5px;
}

.new_message_notification {
  width: 100%;
  float: left;
  clear: both;
  position: relative;
  border: 1px solid #B72608;
  margin-top: 10px;
  margin-bottom: 10px;
}

.new_message_notification span.date_timestamp {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  margin-top: -10px;
  background: #B72608;
  color: #fff;
  border-radius: 5px;
  padding-left: 5px;
  padding-right: 5px;
}

#chat_window.profile_user {
  padding: 0;
  margin-top: -1px;
  border-left: 1px solid #095573;
  border-bottom: 1px solid #095573;
}
#chat_window  .chat_content {
  height: 400px;
  overflow: hidden;
}
#admin_user_chat_window {
  width: 80%;
  float: left;
  position: relative;
}
#admin_user_chatlist_window {
  width: 20%;
  float: left;
  position: relative;
  height: 715px;
  overflow: hidden;
}
#admin_user_chat_window  .chat_content {
  height: 600px;
  overflow: hidden;
}
#admin_user_chat_scrollable_list {
  position: relative;
  height: 677px;
  overflow: hidden;
  width: 100%;
  float: left;
  border-bottom: 1px solid #095573;
}
.open_conversation {
  cursor: pointer;
}
.user_list_name {    
  border: 1px solid;
  margin-top: -1px;
  width: 100%;        
}
.list_title {
  background: #095573;
  padding: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat_app_list_single_user {
  border: 1px solid #095573;
  margin-top: -1px;
  line-height: 30px;
  overflow: hidden;
}
.chat_app_list_single_user a {
  display: block;
  width: 100%;    
  line-height: 30px;    
  height: 40px;
  padding: 5px;
}
.chat_app_list_single_user a:hover {
  text-decoration: none;
  opacity: 0.5;
}
.chat_app_list_single_user div.list_icon, div.list_badge {
  width: 20px;
  display: inline-block;
  line-height: 30px;
  overflow: hidden;
}
.chat_app_list_single_user div.list_badge {
  width: 40px;
} 
.chat_app_list_single_user div.list_username {
  width: calc(100% - 70px);
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 30px;        
}
.chat.chat_admin_notification {
  width: 100%;
  max-width: 98%;
}
.chat.chat_admin_notification .chat_body {
  background: #b78407;
}
#chat_window .send_message {
  padding-left: 5px;
  padding-right: 5px;
} 

@media (max-width: 767px) { 
  div#admin_user_chatlist_window.closed_user_list {
      width: 60px;
      transition: all 1s;
  }
  div#admin_user_chat_window.closed_user_list {
      width: calc(100% - 60px);
      transition: all 1s;
  }
  div#admin_user_chatlist_window.closed_user_list .list_username {
      display: none;
  }
  div#admin_user_chatlist_window.closed_user_list .chat_app_list_single_user div.list_badge {
      text-align: right;
  }
  #open_chat_app_list_users {
      cursor: pointer;
  }

  div#admin_user_chatlist_window.opened_user_list {
      width: 200px;
      transition: all 1s;
  }
  div#admin_user_chat_window.opened_user_list {
      width: calc(100% - 200px);
      transition: all 1s;
  }
  div#admin_user_chatlist_window.closed_user_list i.fa-indent, div#admin_user_chatlist_window.opened_user_list i.fa-outdent {
      display: none;
  }
  div#admin_user_chatlist_window.opened_user_list i.fa-indent, div#admin_user_chatlist_window.closed_user_list i.fa-outdent{
      display: inline-block;
  }
  
}

div#dl_notification_container.opened {
  margin-right: 0;
}
div#dl_notification_container {
  position: fixed;
  z-index: 999999999;
  width: 250px;
  right: 0;
  background: #000;
  top: 0;
  bottom: 0;
  border-left: 5px solid #D80A8F;
  transition: all 1s;        
  margin-right: -250px;
  overflow: hidden;
}    
#dl_notification_container #dl_title {
  color: #D80A8F;
  margin-top: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #D80A8F;
}
#dl_notification_container #close_dl_notification_sidebar {
  background: #D80A8F;
  width: auto;
  display: inline-block;
  float: right;
  border-radius: 3px;
  padding: 0 5px;
  color: #fff;
  font-size: 10px;
  margin-top: 3px;
  margin-right: 3px;
  cursor: pointer;
}
#dl_notification_container #close_dl_notification_sidebar:hover {
  background: #93005F;
}
#dl_notification_container #dl_notifications_update {
  margin-bottom: 0; 
}
#dl_notification_container .list-group-item {        
  padding: 5px 10px 5px 0px;
  margin-bottom: 0;
  background-color: #000;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.4) !important;
  color: #eee;
  font-size: 12px;    
}
#dl_notification_container .list-group-item:last-child  {
  border-bottom: none !important;
}
#dl_notification_container table {
  width: 100%;
}
#dl_notification_container .name_of_user {
  font-size: 10px;
}
#dl_notification_container table td:first-child {
  width: 30px;
  text-align: center;
}

#dl_notification_container .timecode_of_message {
  font-size: 10px;
  text-align: right;
  color: rgba(255,255,255,0.5)
}
#dl_notification_read_content {
  margin-top: 5px;
  border-top: 3px double #93005F;
}
#dl_notification_read_content #load_previous_notifications {
  background: #D80A8F;
  width: auto;
  display: inline-block;
  float: right;
  border-radius: 3px;
  padding: 0 5px;
  color: #fff;
  font-size: 10px;
  margin-top: 3px;
  margin-right: 3px;
  cursor: pointer;
}
#dl_notification_container .status_of_message {
  color: rgba(255,255,255,0.5);
  font-size: 9px;
}
#dl_notification_container #dl_notifications_all_content {
  height: 94%;
  overflow-y: auto;
  padding-bottom: 15px;
}