/*-----------------------------
  General
-----------------------------*/
.public-power {
  color: #fffff7;
  padding-top: 80px;
}
.public-power .main-heading {
  padding-bottom: -100px;
}
.public-power h1 {
  font-size: 40px;
  line-height: 1;
  font-style: italic;
  margin-bottom: 45px;
}
.chat {
  font-size: 15px;
  line-height: 1;
  display: flex;
  flex-direction: column;
  /* min-height: 400px; */
  /* overflow: auto; */
  /* max-height: 90vh; */
}
.pushable {
  overflow: inherit;
}
svg {
  vertical-align: middle;
}
/*-----------------------------
  Bubbles
-----------------------------*/
.chat-bubble,
.chat-bubble-user {
  display: block;
  position: relative;
  justify-content: flex-start;
  flex-direction: column;
  padding: 10px 20px;
  border-radius: 25px;
  margin-bottom: 1rem;
  max-width: 95%;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.chat-bubble-iframe {
  display: block;
  position: relative;
  justify-content: flex-start;
  flex-direction: column;
  padding: 10px 20px;
  border-radius: 25px;
  margin-bottom: 1rem;
  width: 100%;
  height: 500px;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.chat-bubble-iframe,
.chat-bubble-user .dot {
  background-color: #f75369;
}
.chat-bubble-iframe,
.chat-bubble p,
.chat-bubble-user p {
  position: relative;
}
.chat-bubble-iframe .loading,
.chat-bubble .loading,
.chat-bubble-user .loading {
  margin: 0;
  position: initial;
}
.chat-bubble-iframe,
.chat-bubble {
  color: #3f2a56;
  background-color: #ffffff;
  align-self: flex-start;
  transform-origin: bottom left;
}

.chat-bubble-user {
  color: #ffffff;
  background-color: #3f2a56;
  align-self: flex-end;
  transform-origin: bottom right;
}
.chat-bubble-user p::before {
  background-color: #3f2a56;
}
/* Bubble appear */
.utterance-appear {
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
}
.utterance-appear p {
  display: none;
}
/* Bubble animation */
.utterance-appear-active {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
.utterance-appear-active p {
  display: none;
}
/* Bubble Done */
.utterance-enter-done p {
  display: block;
}
.utterance-enter-done .loading {
  display: none;
}

/*------------------------------------------------ Exit Step Animation */
.utterance-exit {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
.utterance-exit-active {
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
}
.utterance-exit-done {
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
}

/*-----------------------------
  Input field
-----------------------------*/
.chat-input-group {
  width: 100% !important;
  position: relative;
}
.chat-input-group .chat-input {
  width: 100%;
  margin-bottom: 20px;
  padding-top: 1rem;
  transform-origin: bottom left;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
}
.chat-input-group > button {
  transform-origin: bottom left;
  transition-delay: 0.3s !important;
  -webkit-transition: all 0.3s ease-out !important;
  -moz-transition: all 0.3s ease-out !important;
  -o-transition: all 0.3s ease-out !important;
  transition: all 0.3s ease-out !important;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
}
.chat-input-group > button {
  visibility: hidden;
}
.chat-input-group .chat-input .input {
  width: 100%;
}
.ui.form .chat-input-group .chat-input input {
  width: 100%;
  border-color: #ffffff !important;
  padding: 11px 14px !important;
  border-radius: 12px !important;
}
/* .ui.form .chat-input-group .chat-input input[type='text'] {
  width: 100%;
  border-color: #ffffff !important;
  padding: 11px 14px !important;
  border-radius: 40px !important;
}
.ui.form .chat-input-group .chat-input input[type='number'] {
  width: 100%;
  border-color: #ffffff !important;
  padding: 11px 14px !important;
  border-radius: 40px !important;
} */
.chat-input-group .chat-input button {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 14px !important;
  z-index: 1;
  padding: 10px 20px !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  text-transform: uppercase !important;
  background-color: #f75369 !important;
}
.chat-input-group .loading {
  width: 100%;
  position: initial;
  text-align: center;
}
/* Input field animation */
.chat-input-appear {
}
.chat-input-appear-active {
}
.chat-input-enter-active > button,
.chat-input-enter-done > button {
  visibility: visible;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.chat-input-enter-done .chat-input {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
.chat-input-enter-done .loading {
  display: none;
}

/* Exit Step Animation */
.chat-input-exit {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
.chat-input-exit-active {
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
}
.chat-input-exit-done {
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
}

$animation-time: 1.2s;
$bubble-color: #f5f5f5;

@mixin circle($size) {
  @include square($size);
  border-radius: 100%;
}

@mixin square($size) {
  height: $size;
  width: $size;
}

.bottom-line {
  background: $bubble-color;
  bottom: 0;
  height: 5px;
  left: 0;
  position: absolute;
  width: 100%;
}

.base-square {
  background: $bubble-color;
  bottom: -193px;
  height: 200px;
  left: -50%;
  position: absolute;
  width: 200%;
}

.bubble {
  @include circle(80px);
  animation: bubble-up $animation-time ease both infinite;
  background: $bubble-color;
  left: 50%;
  margin-left: -40px;
  position: absolute;
}

.bubble--bigger {
  @include circle(100px);
  animation: bubble-up--bigger $animation-time ease both infinite;
  left: 50%;
  margin-left: -50px;
}

.loading {
  animation: loading-up $animation-time ease both infinite;
  left: 50%;
  margin-left: -24px;
  position: absolute;
}

.dot {
  @include circle(12px);
  animation: dot-pulse 0.6s ease both infinite;
  background: #f75369;
  display: inline-block;
}

.dot--one {
  animation-delay: 0;
}
.dot--two {
  animation-delay: 0.2s;
}
.dot--three {
  animation-delay: 0.4s;
}

@keyframes bubble-up {
  0% {
    bottom: -80px;
  }
  80%,
  100% {
    bottom: 40px;
  }
}

@keyframes bubble-up--bigger {
  0% {
    bottom: -100px;
  }
  50% {
    bottom: -90px;
  }
  100% {
    bottom: -100px;
  }
}

@keyframes loading-up {
  0% {
    bottom: -70px;
  }
  80%,
  100% {
    bottom: 70px;
  }
}

@keyframes dot-pulse {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

.chat-bubble-iframe,
.chat-bubble {
  color: rgb(36, 36, 36);
  background-color: rgb(210, 235, 244);
  align-self: flex-start;
  transform-origin: bottom left;
  letter-spacing: 0.44px;
  line-height: 22px;
  font-size: 16px;
  border-radius: 10px;
  border-bottom-left-radius: 0;
}

.chat-bubble-user {
  border-radius: 10px;
  border-bottom-right-radius: 0;
  color: rgb(36, 36, 36);
  background-color: rgb(253, 221, 225);
}