.phone-img {
  background-image: url('../img/phone.png');
  min-height: 570px;
  width: 100%;
  margin: auto;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top center;
}
.voice-call-img {
  background-image: url('../img/voice-call-phone.png');
  min-height: 570px;
  width: 100%;
  margin: auto;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top center;
}
.chat-mobile-demo {
  max-height: 600px;
  min-height: 600px;
}
.phone-sms-demo {
  font-size: 12px;
  font-weight: 400;
}
.number-text-top {
  padding: 30px 12px 0 13px;
}
.number-text-top p {
  margin: 30px 12px 0 13px;
}
.number-text-top h5 {
  background-color: #f0f0f0;
}

/* chat start */
.card-body {
  text-align: center;
}
.date-time-size {
  font-size: 10px;
  font-weight: 300;
}
.number-size-user {
  font-size: 12px;
  font-weight: 300;
}
.user-text-sms {
  font-size: 14px;
}
.app-chat .app-chat-history .chat-history-body {
  height: calc(100vh - 22.2rem) !important;
}
.light-style
  .app-chat
  .app-chat-history
  .chat-history-body
  .chat-history
  .chat-message.chat-message-right
  .chat-message-text,
.light-style .app-chat .app-chat-history .chat-history-body .chat-history .chat-message .chat-message-text {
  width: auto;
  max-width: calc(100vh - 20rem);
}
.light-style .app-chat .app-chat-history .chat-history-footer {
  background-color: #fff;
  box-shadow: 0 0.125rem 0.25rem rgba(161, 172, 184, 0.4);
  bottom: 20px;
  width: -webkit-fill-available;
}
.user-detail-toggle-header h5 {
  padding-bottom: 26px;
}
.user-detail-toggle {
  background-color: #fff;
  padding: 4px 7px;
  border-radius: 50px;
  /* position: absolute; */
  color: #696cff;
  left: -19px;
  top: 18px;
}
.app-chat .sidebar-body .chat-contact-list li.active {
  background-color: #eeeeee;
  border-left: 5px solid #696cff !important;
}
.light-style .app-chat .app-chat-contacts .sidebar-body .chat-contact-list li.active h6,
.light-style .app-chat .app-chat-contacts .sidebar-body .chat-contact-list li.active .text-muted,
.light-style .app-chat .app-chat-sidebar-left .sidebar-body .chat-contact-list li.active h6,
.light-style .app-chat .app-chat-sidebar-left .sidebar-body .chat-contact-list li.active .text-muted {
  color: #000 !important;
}
.chat-contact-name {
  color: #000;
}
/* chat end */