.d-none {
  display: none;
}

.d-block {
  display: block;
}

/* chatbot__btn */
.chatbot__btn {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background-color: #0fa515;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
}

.chatbot__btn::before {
  content: '';
  position: absolute;
  width: 26px;
  height: 26px;
  left: 12px;
  top: 12px;
  background: transparent no-repeat center center;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='20' height='20'%3E%3Cpath fill='%23fff' d='M14 8.999v-5a2.003 2.003 0 00-2-2H3a2.003 2.003 0 00-2 2v5a2.003 2.003 0 002 2v1.694a.302.302 0 00.486.244l2.587-1.945H12A1.997 1.997 0 0014 9zm3-2h-2v2a3.003 3.003 0 01-3 3H7v2a2.003 2.003 0 002 2h3.927l2.59 1.941c.198.15.483.004.483-.243v-1.701h1a2.003 2.003 0 002-1.997v-5a2.003 2.003 0 00-2-2z' /%3E%3C/svg%3E");
}

.chatbot__btn:hover {
  background-color: #0d9412;
}

/* chatbot__tooltip */
.chatbot__tooltip {
  position: absolute;
  right: 58px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  color: #fff;
  background: #0d9412;
  padding: 5px 8px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
}

.chatbot__tooltip_show {
  opacity: 1;
}

.chatbot__tooltip::after {
  top: 50%;
  position: absolute;
  content: '';
  border: 5px solid transparent;
  border-left-color: #0d9412;
  margin-top: -5px;
  right: -10px;
}

/* chatbot */
.chatbot {
  display: flex;
  flex-direction: column;
  width: 400px;
  background-color: #fafafa;
  line-height: 1.2;
  color: #212529;
  position: fixed;
  bottom: 0;
  right: 0;
  height: 100%;
  transform: scale(1);
  transform-origin: right bottom;
  transition: transform 0.3s ease;
}

.chatbot_hidden {
  overflow: hidden;
  transform: scale(0);
  transform-origin: right bottom;
  transition: transform 0.3s ease;
}

@media (max-width: 576px) {
  .chatbot {
    width: 100%;
  }
}

.chatbot__title {
  background-color: #0fa515;
  color: #fff;
  padding: 1rem;
  display: flex;
  font-weight: bold;
}

.chatbot__close {
  width: 20px;
  height: 20px;
  margin-right: 1rem;
  background: transparent no-repeat center center;
  background-size: 100% 100%;
  cursor: pointer;
  opacity: 0.8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23fff' d='M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z'%3E%3C/path%3E%3C/svg%3E");
}

.chatbot__close:hover {
  opacity: 1;
}

.chatbot__reset {
  width: 20px;
  margin-left: auto;
  height: 20px;
  background: transparent no-repeat center center;
  background-size: 100% 100%;
  cursor: pointer;
  opacity: 0.8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M440.65 12.57l4 82.77A247.16 247.16 0 0 0 255.83 8C134.73 8 33.91 94.92 12.29 209.82A12 12 0 0 0 24.09 224h49.05a12 12 0 0 0 11.67-9.26 175.91 175.91 0 0 1 317-56.94l-101.46-4.86a12 12 0 0 0-12.57 12v47.41a12 12 0 0 0 12 12H500a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12h-47.37a12 12 0 0 0-11.98 12.57zM255.83 432a175.61 175.61 0 0 1-146-77.8l101.8 4.87a12 12 0 0 0 12.57-12v-47.4a12 12 0 0 0-12-12H12a12 12 0 0 0-12 12V500a12 12 0 0 0 12 12h47.35a12 12 0 0 0 12-12.6l-4.15-82.57A247.17 247.17 0 0 0 255.83 504c121.11 0 221.93-86.92 243.55-201.82a12 12 0 0 0-11.8-14.18h-49.05a12 12 0 0 0-11.67 9.26A175.86 175.86 0 0 1 255.83 432z'%3E%3C/path%3E%3C/svg%3E");
}

.chatbot__reset:hover {
  opacity: 1;
}

.chatbot__wrapper {
  display: flex;
  -ms-flex: 1 0 auto;
  flex: 1 0 0%;
  flex-direction: column;
  overflow-y: auto;
}

.chatbot__items {
  padding: 0.75rem;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.chatbot__item {
  width: 100%;
  display: flex;
  flex-shrink: 0;
  margin-bottom: .75rem;
}

@keyframes animationOpacity {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.chatbot__content {
  width: 70%;
  padding: 0.5rem 0.75rem;
  animation-name: animationOpacity;
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
}

/* bot */
.chatbot__content_bot {
  color: #212529;
  background: #eaeaea;
  border-radius: 0.5rem;
}

/* human */
.chatbot__item_human {
  justify-content: flex-end;
}

.chatbot__content_human {
  text-align: right;
  padding-right: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.chatbot__content_human-disabled {
  background: #cafacc;
  border-radius: 0.5rem;
  text-align: left;
}

/* btn */
.btn {
  width: 100%;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  display: inline-block;
  cursor: pointer;
  font-weight: 400;
  color: #212529;
  text-align: left;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: #fff9c8;
  border: 1px solid transparent;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn:hover {
  background-color: #fef49a;
  border: 1px solid transparent;
}

.btn:focus,
.btn.focus {
  outline: 0;
}

.chatbot__content .btn {
  margin-bottom: 0.4rem;
}

.chatbot__footer {
  padding: 0.75rem;
  position: relative;
}

/* ie11 */
.chatbot__input::-ms-clear {
  display: none;
}

.chatbot__input {
  display: block;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  width: 100%;
  height: 40px;
  padding: 4px 36px 4px 10px;
  font-weight: 400;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #e0e0e0;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.chatbot__input:disabled {
  background-color: #fafafa;
}

.chatbot__input:focus {
  border-color: #bdbdbd;
  outline: 0;
}

.chatbot__submit {
  width: 24px;
  height: 24px;
  background: transparent no-repeat center center;
  background-size: 100% 100%;
  opacity: 0.6;
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='16' height='16'%3E%3Cpath fill='currentColor' d='M476 3.2L12.5 270.6a24 24 0 002.2 43.2L121 358.4l287.3-253.2c5.5-4.9 13.3 2.6 8.6 8.3L176 407v80.5a24 24 0 0042.5 15.8L282 426l124.6 52.2a24 24 0 0033-18.2l72-432A24 24 0 00476 3.2z'%3E%3C/path%3E%3C/svg%3E");
  border: 1px solid transparent;
  background-color: transparent;
  transition: opacity 0.15s ease-in-out;
}

.chatbot__submit:disabled {
  opacity: 0.4;
}

.chatbot__submit:focus:not(:disabled),
.chatbot__submit:hover:not(:disabled) {
  outline: 0;
  box-shadow: none;
  opacity: 0.8;
  cursor: pointer;
}

/* scrollbar */
.chatbot__items::-webkit-scrollbar {
  width: 16px;
}

.chatbot__items::-webkit-scrollbar-thumb {
  background-color: #e0e0e0;
  border-radius: 7px;
  border: 4px solid #fafafa;
}

.chatbot__items::-webkit-scrollbar-button {
  display: none;
}