code {
  color: #0094BF;
}

pre code {
  color: #0094BF;
}

.br {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 998;
}

.card {
  height: 100%;
  border-radius: 1.25rem;
}

.chatbox {
  padding: 10px;
  font-size: 14px;
  overflow-y: auto;
}

.message {
  color: white;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-bottom: 10px;
}

.message .username {
  margin: 5px;
}

.message .text {
  padding: 10px;
  border-radius: 1.25rem;
  background-color: #0094BF;
  max-width: 70%;
}

.option {
  margin-top: -1.6rem;
  font-size: 11px;
}

.option .btn {
  font-size: 11px;
}

.reply {
  align-items: flex-start;
}

.reply .text {
  background-color: #222;
  max-width: 70%;
}

@media (max-width: 767px) {
  .card-header {
    flex-direction: column;
  }

  .container {
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  .reply .text {
    max-width: 100%;
  }
}