/*
=================
Chatbot Styles
=================
*/
/*
============================
Bootstrap Override Variables
============================
*/
/*Main Colors*/
/*Fonts*/
/*Styles*/
.cb-icon-animation[aria-expanded=true] .caret-animation {
  transform: rotate(180deg);
  transition: all 0.3s;
}

.chatbot-wrap {
  top: 10px;
  -webkit-animation: fade-in 1.1s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  animation: fade-in 1.1s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

#collapseChatBot {
  top: 0;
}

#collapseChatBot.collapse:after {
  position: absolute;
  width: 100%;
  max-height: calc(100vh - 17.9rem);
  min-height: calc(100vh - 17.9rem);
  background-color: rgba(0, 0, 0, 0.4);
  content: "";
  z-index: -1;
  overflow: hidden;
  border-radius: 10px;
  top: 0;
  left: 0;
  -webkit-animation: fade-in 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  animation: fade-in 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.typing-textarea textarea {
  resize: none;
  padding: 7px 15px 7px 20px;
  font-size: 1rem;
  max-height: 250px;
  height: 43px;
}
.typing-textarea textarea:focus, .typing-textarea textarea:focus-visible {
  outline: 2px solid #7fbfc8;
}

.typing-textarea textarea::placeholder {
  color: #018093;
}

.typing-textarea span {
  position: absolute;
  right: 0;
  bottom: 0;
  visibility: hidden;
}

.typing-textarea textarea:valid ~ span {
  visibility: visible;
}

.chat-container {
  max-height: 55vh;
  overflow: auto;
}
.chat-container:not(:empty) {
  border-bottom: 1px solid #d3d3d3;
  margin-bottom: 1rem;
  padding: 1rem;
}
.chat-container .user-question {
  background-color: #7fbfc8;
}
.chat-container .user-question:after {
  font: var(--fa-font-solid);
  content: "\f007";
  display: flex;
  width: 30px;
  height: 30px;
  position: absolute;
  right: -0.7rem;
  color: #7fbfc8;
  top: -10px;
  background-color: white;
  border-radius: 30px;
  border: 1px solid #7fbfc8;
  box-shadow: 1px 1px 4px #7fbfc8;
  font-size: 1rem;
  align-items: center;
  justify-content: center;
}
.chat-container .bot-answer:before {
  font: var(--fa-font-solid);
  content: "\f544";
  display: flex;
  width: 30px;
  height: 30px;
  position: absolute;
  left: -0.7rem;
  color: white;
  top: -10px;
  background-color: #018093;
  border-radius: 30px;
  border: 1px solid #018093;
  box-shadow: 1px 1px 4px #7fbfc8;
  font-size: 1rem;
  align-items: center;
  justify-content: center;
}