.chat-wrapper {
  position: relative;
  display: flex;
  flex: 1 1 100%;
  min-height: calc(100vh - 290px);
  width: 100%; }

.chat-sidebox {
  position: absolute !important;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  display: flex;
  flex-basis: 16rem;
  flex-direction: column;
  flex-grow: 0;
  width: 16rem;
  transition: 0.2s all;
  transform: translateX(-101%); }

.chat-sidebox-open .chat-sidebox {
  transform: none !important; }

.chat-search {
  border-radius: 10rem; }

.chat-contacts .list-group-item {
  z-index: auto !important;
  display: flex;
  align-items: center;
  flex-grow: 0;
  flex-shrink: 0;
  padding: 0.625rem;
  width: 100%;
  border: 0;
  border-radius: 0; }
  .chat-contacts .list-group-item.active {
    font-weight: bold; }
  .chat-contacts .list-group-item:not(.active) {
    opacity: 0.7; }
    .chat-contacts .list-group-item:not(.active):active, .chat-contacts .list-group-item:not(.active):focus, .chat-contacts .list-group-item:not(.active):hover {
      opacity: 1; }
  .chat-contacts .list-group-item.online {
    opacity: 1; }
  .chat-contacts .list-group-item .chat-status {
    font-weight: normal !important; }

.chat-messages {
  display: flex;
  flex-direction: column; }

.chat-message-left,
.chat-message-right {
  display: flex;
  flex-shrink: 0; }

.chat-message-left {
  margin-right: auto; }

.chat-message-right {
  flex-direction: row-reverse;
  margin-left: auto; }

.chat-scroll {
  position: absolute !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.chat-sidebox {
  background: #fff;
  box-shadow: 0 0 0 1px rgba(24, 28, 33, 0.13); }

.chat-contacts .list-group-item {
  padding-right: 1.5rem;
  padding-left: 1.5rem; }
  .chat-contacts .list-group-item:not(.active) {
    color: #212529; }
  .chat-contacts .list-group-item .chat-status {
    color: #FF4961; }
  .chat-contacts .list-group-item .chat-status .badge {
    background: #FF4961; }
  .chat-contacts .list-group-item.online .chat-status {
    color: #62d493; }
  .chat-contacts .list-group-item.online .chat-status .badge {
    background: #62d493; }
  .chat-contacts .list-group-item.active .chat-status {
    color: #fff; }
  .chat-contacts .list-group-item.active .chat-status .badge {
    background: #fff; }

@media (min-width: 992px) {
  .chat-sidebox {
    position: relative !important;
    transform: none !important; } }