.chat-contacts-web {
  font-size: 13px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  height: 90vh;
}

#messagesWeb {
  height: 79vh;
  overflow-y: auto;
  margin: 1vh;
}

#messagesWeb >.message >.message-file,
#messagesWeb >.message >.file-not-available {
  display: block;
  padding: 10px;
}

#messagesWeb >.message >.message-file >i ,
#messagesWeb >.message >.file-not-available >i{
  font-size: 16px;
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 100%;
}

#messagesWeb >.message >.message-file >span,
#messagesWeb >.message >.file-not-available >span {
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
  width: calc(100% - 16px - 10px);
}

#messagesWeb::-webkit-scrollbar {
  width: 5px !important;
  height: 6px !important;
}

#messagesWeb::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
}

#messagesWeb::-webkit-scrollbar-track {
  background: hsla(0, 0%, 100%, 0.1);
}

#messagesWeb .message {
  color: #303030;
  border-radius: 7.5px;
  font-size: 12px;
  max-width: 75%;
  min-width: 30%;
  background-color: rgb(243, 243, 243);
  box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
  transition: 0.2s;
}

#messagesWeb .message:hover {
  box-shadow: 0 1.5px 1px 1px rgba(0, 0, 0, 0.13);
}

.chat-web-header {
  background: #2d486a;
  font-weight: bold;
  border: 1px solid #eee;
  color: #fff;
  border-radius: 5px;
  padding-left: 1rem;
  padding-right: 1rem;
  height: 7vh;
  line-height: 7vh;
}

.chat-web-header img {
  height: 20px;
}

.chat-web-header input {
  height: 3vh;
}

chat-web-messages-div {
  height: 96vh;
  overflow-y: hidden;
  background-color: seashell;
}