/*
*
* ==========================================
* FOR DEMO PURPOSES
* ==========================================
*
*/
body {
  min-height: 100vh;
}

.chat-pane {
    margin-top: 20px;
    min-height: calc(100vh - 120px);
    max-height: calc(100vh - 120px);
    /* background-color: red; */
}

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  width: 5px;
  background: #f5f5f5;
}

::-webkit-scrollbar-thumb {
  width: 1em;
  background-color: #ddd;
  outline: 1px solid slategrey;
  border-radius: 1rem;
}

.text-small {
  font-size: 0.9rem;
}

.messages-box,
.chat-box {
    height: calc(100vh - 170px);
    overflow-y: auto;
    overflow-x: hidden;
  }

.messages-box .list-group .list-group-item.active {
  background-color: #ffa010;
  border-color: #ffa010;
}

.rounded-lg {
  border-radius: 0.5rem;
}

input::placeholder {
  font-size: 0.9rem;
  color: #999;
}

.list-group {
    /* min-height: calc(100vh - 150px);
    overflow-y: scroll; */
}

.btn-link {
    border-radius: 6px;
}

.sent-message {
  background: linear-gradient(to bottom, #70b93f, #62b347);
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
  .chat-box-container {
    min-height: calc(100vh - 125px);
    max-height: calc(100vh - 125px);
    transform: translateY(10px);
    z-index: 100;
  }

  .chat-box-container-active {
    transform: translateY(-100%);
  }

  .chat-box {
    height: calc(100vh - 220px);
  }
}

button.close-chat-button {
  border-radius: 0;
  text-align: start;
  background: linear-gradient(to bottom, #70b93f,
    #62b347);
}

button.close-chat-button:hover,
button.close-chat-button:focus {
  background: linear-gradient(to bottom, #70b93f,
    #62b347);
  border-color: #62b347;
  color: var(--white);
}

button.close-chat-button i {
  color: var(--gray-dark);
}