@import url('https://fonts.googleapis.com/css2?family=Kanit&display=swap');

.title {
  font-family: 'Kanit', sans-serif;
  margin-top: 30px;
}

header{
    padding-bottom: 20px;
}

body{
	overflow-x: hidden;
}

#chat{
    background: #FFF;
    color: #000;
    border-radius: 10px;
    border-radius: 10px;
	box-shadow: 2px 2px 5px #000;
	position: relative;
}

.chat-header{
    background: #31ca89;
    color: #FFF;
    padding: 8px;
}

.chat-header span{
	font-size: 14px;
}

#chat .chat-header img{
    border-radius: 50px;
    float: left;
    margin-right: 15px;
}

#chat .chat-header .foto-experto{
	width: 75px;
}

#chat .chat-content{
    width: 100%;
    overflow-y: auto;
    height: 270px;
    padding: 8px 8px;
    transition: scroll 500ms ease-in-out;
}

#chat .chat-content img{
	border-radius: 25px;
}

#chat .chat-content .me .message{
    background: #ebebeb;
}

#chat .chat-content .item{
    max-width: 80%;
    margin-bottom: 10px;
    display: block;
    clear: both;
}

#chat .chat-content .item img{
    float: left;
      width: 40px;
      margin-right: 10px;
}

#chat .chat-content .item.me{
    float: right;
}

#chat .chat-content .message{
    border-radius: 20px;
    padding: 8px 15px;
    background: #dbfff3;
}

#chat .chat-footer{
    border-top: 1px solid #dbdbdb;
    background: #f5f5f5;
    padding: 8px;
    border-radius: 0 0 10px 10px;
}

#chat .chat-footer textarea{
    width: 100%;
    border-radius: 5px;
    border: 1px solid #999;
    margin-bottom: 5px;
}

.help-form{
    background: rgba(0,0,0,0.75);
    padding: 15px;
    font-size: 14px;
    margin-top: 30%;
}

.help-form big, .help-form span{
	position: relative;
	z-index: 100;
	text-shadow: 2px 2px 2px #000;
}

.typing-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20px;
}

.typing-indicator span {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ccc;
  margin: 0 2px;
  animation: typing 1.5s infinite;
}

.typing-indicator span:nth-child(1) {
  animation-delay: 0s;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.3s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.6s;
}

@keyframes typing {
  0%, 100% {
    transform: scale(1);
    background-color: #ccc;
  }
  50% {
    transform: scale(1.5);
    background-color: #999;
  }
}