.chat-sec .container {

  margin: 10px auto;

  background: #fff;

  padding: 0;

  border-radius: 7px;

}

.profile-image {

  width: 50px;

  height: 50px;

  border-radius: 40px;
  object-fit: cover;

}

.settings-tray {

  background: #eee;

  padding: 10px 15px;

}

.settings-tray .no-gutters {

  padding: 0;

}

.settings-tray--right {

  float: right;

}

.settings-tray--right i {

  margin-top: 16px;

    font-size: 20px;

  color: grey;

  margin-left: 5px;

  transition: 0.3s;

}

.settings-tray--right i:hover {

  color: #5367FF;

  cursor: pointer;

}

.border-cstm .search-box {

  background: #fafafa;

  padding: 10px 13px;

}

.border-cstm .search-box .input-wrapper {

  background: #fff;

  border-radius: 40px;

}

.border-cstm .search-box .input-wrapper i {

  color: grey;

  margin-left: 7px;

  vertical-align: middle;

}

.border-cstm .search-box input {

  background: transparent;

  border: none;

  padding: 5px 5px 5px 15px;

}

.border-cstm input {

  border: none;

  border-radius: 30px;

  width: 100%;

}

.border-cstm input::placeholder {

  color: #e3e3e3;

  font-weight: 300;

  margin-left: 20px;

}

.border-cstm input:focus {

  outline: none;

}

.friend-drawer {

  padding: 10px 15px;

  display: flex;

  vertical-align: baseline;

  background: #fff;

  transition: 0.3s ease;

}

.friend-drawer--grey {

  background: #eee;

}

.friend-drawer .text {

  margin-left: 12px;

  width: 70%;

}

.friend-drawer .text h6 {

  margin-top: 6px;

  margin-bottom: 0;

}

.friend-drawer .text p {

  margin: 0;

}

.friend-drawer .time {

  color: grey;

}

.friend-drawer--onhover:hover {

  background: #5367FF;

  cursor: pointer;

}

.active-chat {

  background: #5367FF;

  cursor: pointer;

}

.friend-drawer--onhover:hover p, .friend-drawer--onhover:hover h6, .friend-drawer--onhover:hover .time {

  color: #fff !important;

}

.active-chat p, .active-chat h6, .active-chat .time {

  color: #fff !important;

}

hr {

  margin: 5px auto;

  width: 60%;

}

.chat-bubble {

  width: fit-content;

  padding: 10px 14px;

  background: #eee;

  margin: 10px 30px;

  border-radius: 9px;

  position: relative;

  animation: fadeIn 1s ease-in;

}

.chat-bubble:after {

  content: '';

  position: absolute;

  top: 50%;

  width: 0;

  height: 0;

  border: 20px solid transparent;

  border-bottom: 0;

  margin-top: -10px;

}

.chat-bubble--left:after {

  left: 0;

  border-right-color: #eee;

  border-left: 0;

  margin-left: -20px;

}

.chat-bubble--right:after {

  right: 0;

  border-left-color: #5367FF;

  border-right: 0;

  margin-right: -20px;

}

@keyframes fadeIn {

  0% {

    opacity: 0;

  }

  100% {

    opacity: 1;

  }

}

.chat-time{
    
    text-align: left;
    font-size: 12px;
    margin: 5px 0 0px 0px;
    line-height: normal;
    display: block;
    color: #bdc5ff;

}

.chat-bubble--right .chat-time{
  float: unset;
  text-align: right;
}

.chat-users{
  height: 600px;
  overflow-y: auto;
}

.chat-panel{
  height: 538px;
  overflow-y: auto;
}


.chat-bubble--right.chat-bubble {
  background: #5367FF;
  color: #fff;
  float: right;
}

.chat-bubble .post-img{
  margin: 0;
  border: 0px solid #cccccc;
  padding: 0;
  flex: unset;
  max-width: inherit;
  height: 150px
}

.chat-bubble .uploaded-images #uploaded-images{
  display: block;
}

.chat-bubble span{
  font-size: 14px;
}

.chat-box-tray {

  background: #eee;

  display: flex;

  align-items: baseline;

  padding: 10px 15px;

  align-items: center;

  /*margin-top: 19px;*/

  bottom: 0;

}

.chat-box-tray input {

  margin: 0 10px;

  padding: 8px 15px;

}

.chat-box-tray .btn-send i {
  color: grey;
  font-size: 22px;
  vertical-align: middle;
}

.chat-box-tray .btn-send i:last-of-type {

  margin-left: 0px;

}



.add-post-img i{
    line-height: 42px;
    font-size: 16px;
    color: #808080;
    cursor: pointer;
}

.date-start{
    position: relative;
    color: #86888B;
    font-size: 14px;
    z-index: 1;
}

.date-start span 

{

  background: #fff;

  padding: 5px 10px;

}

.date-start:before

{

  content: '';

  position: absolute;

  top: 50%;

  left: 1%;

  width: 98%;

  height: 0.5px;

  background: #d3d3d3;

  z-index: -1;

}

.chatpnl-pnal{
  height: 100%;
  display: flex;
  flex-direction: column-reverse;
  overflow-y: auto;
}

.border-cstm{
      border: solid 1px #E4E5E9;
}