#chat-container {
  font-size: 1rem;
  text-transform: none !important;
  position: fixed;
  bottom: 0;
  right: 0;
}

#chat-container .row {
  display: flex;
  height: 100%;
}

#chat-container .col {
  display: inline-block;
  align-self: flex-end;
}

#chat-container .card {
  box-shadow: 0 0 .5em;
}

#chatBox .card-body {
  height: 500px;
  overflow: auto;
}

.card.chat .card-body{
  height: 200px;
  overflow: auto;
}

.chat-user-box{
  min-height: 2.5em;
  min-width: 5em;
}

.message.sent {
  text-align: right;
}

.timestamp {
  font-size: .5em;
}

p.message {
  margin-bottom: -1em;
}

.message > .badge {
  white-space: normal;
  max-width: 15em;
}

button.close {
  border: none;
}

.card-header .fa {
  transition: .3s transform ease-in-out;
}
.card-header .collapsed .fa {
  transform: rotate(90deg);
}

#chatBox > div {
  padding: 0;
}
a.user {
  padding: 0.25em 1rem;
}

.unread {
  font-weight: bold;
  background-color: #eee;
}