@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css");

.aic-chat-window {
  /*
  position: fixed;
  bottom: 0;
  right: 20px;
  */
min-height: 70vh;
max-height: 90vh;

  width: 100%;
  max-width: 100%;

  background-color: #f5f5f5;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;

  background: #233041;
  background-image: url(https://images.unsplash.com/photo-1483728642387-6c3bdd6c93e5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2076&q=80);
  background-blend-mode: luminosity;

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.aic-messages {
  flex: 1;
  padding: 1rem 1rem 3rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  
  padding: 10px;
  overflow-y: auto;

}

.aic-message {
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 10px;
  max-width: 60%;
  font-size: 14px;
  word-wrap: break-word;
  position: relative;
}

.aic-message.user {
  margin-left: auto; /* only needed if container is not display flex */
}

.aic-message {
  mix-blend-mode: hard-light;

  backdrop-filter: blur(2px) opacity(88%) brightness(77%) saturate(222%)
    contrast(77%);
  border: 0.5px solid rgb(255 255 255 / 25%);

  border-radius: 0.5rem;
  max-width: 60%;
  margin-bottom: 5px;
  color: #ffffff;
  font-size: 1.1em;
  padding: 10px 10px 10px 12px;
  /*
        text-shadow: 
                -0.5px -0.5px 0px rgba(0, 100, 100, 0.2),
                -1px -1px 0px rgba(0, 100, 100, 0.1),
                -1px -1px 1px rgba(0, 100, 100, 0.1),
                -1px -1px 2px rgba(0, 100, 100, 0.07),
                -1px -1px 3px rgba(0, 100, 100, 0.07),
                -1px -1px 4px rgba(0, 100, 100, 0.07);
        */

  /* backdrop-filter: blur(0.3vw);
        border: 0.5px solid rgb(170 255 255 / 33%);
        */

  box-shadow: 0px 1px rgba(0, 20, 25, 0.02), 0px 2px rgba(0, 20, 25, 0.02),
    0px 3px rgba(0, 20, 25, 0.02), 0px 4px rgba(0, 20, 25, 0.02),
    0px 5px rgba(0, 20, 25, 0.02), 0px 6px rgba(0, 20, 25, 0.02);
    
    /*
  -webkit-box-reflect: below 4px
    linear-gradient(
      to bottom,
      transparent,
      transparent,
      transparent,
      rgb(255 255 255 / 22%)
    );
    */
}

.aic-message p a {
  color: inherit;
  mix-blend-mode: hard-light;
}

.aic-message p {
  margin: 0;
  padding: 0;
  text-shadow: -0.5px -0.5px 0px rgba(100, 100, 100, 0.4),
    -1px -1px 0px rgba(100, 100, 100, 0.3),
    -1px -1px 1px rgba(100, 100, 100, 0.2),
    -1px -1px 2px rgba(100, 100, 100, 0.15),
    -1px -1px 3px rgba(100, 100, 100, 0.15),
    -1px -1px 4px rgba(100, 100, 100, 0.15);
  mix-blend-mode: hard-light;
  white-space: pre-wrap; 
}

.aic-message.user {
  align-self: flex-end;
  background: radial-gradient(
      circle at 22% 22%,
      rgba(200, 255, 255, 0.3),
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0.1) 70%,
      transparent 100%
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      #00999910 25px,
      transparent 1px,
      transparent 25px
    ),
    linear-gradient(180deg, #ffffff22 5px, transparent 50px);

  background-color: #10d29a61; /* #10d2cb54;*/ /* #81ccb6; */
}
.aic-message.assistant {
  /* background: radial-gradient(circle at 23% 33%, rgba(200,255,255,0.6), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 70%, transparent 100%), repeating-linear-gradient( 0deg, transparent, #00999910 25px, transparent 1px, transparent 25px), linear-gradient( 180deg, #ffffff22 5px, transparent 50px ); */
  background: radial-gradient(
      circle at 11% 11%,
      rgba(255, 255, 255, 0.3),
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0.1) 70%,
      transparent 100%
    ),
    linear-gradient(180deg, #ffffff22 5px, transparent 25px);
  /* background-color: #82c99259; */
  background-color: #1b70cb40;
}

.aic-rating {
  display: flex;
  justify-content: flex-end;
  position: absolute;
  bottom: 0px;
  right: -60px;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 5px;
  padding: 2px;
}

.aic-rating button {
  padding: 0;
  border: none;
  border-radius: 5px;
  margin-left: 5px;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background-color: transparent;
  outline: none;
}
.aic-rating button:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.aic-input-area {
  display: flex;
  padding: 10px;
  border-top: 1px solid #dddddd6e;
}

.aic-input-area textarea::placeholder {
  color: #fff;
  opacity: 0.9;
}
.aic-input-area textarea {
  flex: 1;
  resize: vertical;
  padding: 5px;

  outline: none;
  min-height: 3em;
  max-height: 9em;
  font-size: inherit;
  /* mix-blend-mode: plus-lighter; */
  backdrop-filter: blur(2px) brightness(105%);

  background: initial;
  border: 0.5px solid rgb(255 255 255 / 33%);
  border-radius: 10px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25),
              inset 0px -15px 40px #ffffff5c,
              inset 1px 1px 9px rgba(0,0,0,0.05),
              5px 5px 10px rgba(0,0,0,0.03);
  color: #fff;
  padding: 15px;

}

.aic-input-area button {
  margin-left: 10px;
  background-color: #3aab84;
  color: #fff;


  padding: 6px 12px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;

    backdrop-filter: blur(2px) brightness(67%);
    border: 0.5px solid rgb(255 255 255 / 33%);
    border-radius: 10px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25),
                inset 0px -15px 40px #ffffff5c,
                inset 1px 1px 9px rgba(0,0,0,0.05),
                5px 5px 10px rgba(0,0,0,0.03);
    color: #fff;

    background: radial-gradient( circle at 22% 22%,
                rgba(200, 255, 255, 0.3),
                rgba(255, 255, 255, 0.2) 50%,
                rgba(255, 255, 255, 0.1) 70%,
                transparent 100% );

    background-color: #3aab8461;

    text-shadow: -0.5px -0.5px 0px rgba(100, 100, 100, 0.5),
                -1px -1px 0px rgba(100, 100, 100, 0.5),
                -1px -1px 1px rgba(100, 100, 100, 0.2),
                -1px -1px 2px rgba(100, 100, 100, 0.2),
                -1px -1px 3px rgba(100, 100, 100, 0.2);
    mix-blend-mode: hard-light;
}




.aic-input-area button:hover {
  background-color: #0056b3;
}








@-webkit-keyframes rubberband{
    0%{
        -webkit-transform:scaleX(1.25) scaleY(0.75)
    }
    2%{
        -webkit-transform:scaleX(1.692) scaleY(0.748)
    }
    4%{
        -webkit-transform:scaleX(2.162) scaleY(0.808)
    }
    6%{
        -webkit-transform:scaleX(2.128) scaleY(0.912)
    }
    8%{
        -webkit-transform:scaleX(1.748) scaleY(1.016)
    }
    10%{
        -webkit-transform:scaleX(1.226) scaleY(1.087)
    }
    12%{
        -webkit-transform:scaleX(0.778) scaleY(1.111)
    }
    14%{
        -webkit-transform:scaleX(0.524) scaleY(1.093)
    }
    16%{
        -webkit-transform:scaleX(0.489) scaleY(1.05)
    }
    18%{
        -webkit-transform:scaleX(0.627) scaleY(1.003)
    }
    20%{
        -webkit-transform:scaleX(0.845) scaleY(0.968)
    }
    22%{
        -webkit-transform:scaleX(1.056) scaleY(0.952)
    }
    24%{
        -webkit-transform:scaleX(1.19) scaleY(0.957)
    }
    26%{
        -webkit-transform:scaleX(1.227) scaleY(0.973)
    }
    28%{
        -webkit-transform:scaleX(1.182) scaleY(0.994)
    }
    30%{
        -webkit-transform:scaleX(1.09) scaleY(1.011)
    }
    32%{
        -webkit-transform:scaleX(0.996) scaleY(1.02)
    }
    34%{
        -webkit-transform:scaleX(0.927)
    }
    36%{
        -webkit-transform:scaleX(0.901) scaleY(1.014)
    }
    38%{
        -webkit-transform:scaleX(0.913) scaleY(1.005)
    }
    40%{
        -webkit-transform:scaleX(0.95) scaleY(0.997)
    }
    42%{
        -webkit-transform:scaleX(0.993) scaleY(0.992)
    }
    44%{
        -webkit-transform:scaleX(1.026)
    }
    46%{
        -webkit-transform:scaleX(1.042)
    }
    48%{
        -webkit-transform:scaleX(1.04) scaleY(0.997)
    }
    50%{
        -webkit-transform:scaleX(1.026) scaleY(1.001)
    }
    52%{
        -webkit-transform:scaleX(1.007) scaleY(1.003)
    }
    54%{
        -webkit-transform:scaleX(0.991)
    }
    56%{
        -webkit-transform:scaleX(0.983)
    }
    60%{
        -webkit-transform:scaleX(0.987) scaleY(1)
    }
    62%{
        -webkit-transform:scaleX(0.995)
    }
    64%{
        -webkit-transform:scaleX(1.002) scaleY(0.998)
    }
    66%{
        -webkit-transform:scaleX(1.007)
    }
    70%{
        -webkit-transform:scaleY(1)
    }
    72%{
        -webkit-transform:scaleX(1.003)
    }
    74%{
        -webkit-transform:scaleX(1)
    }
    76%{
        -webkit-transform:scaleX(0.997)
    }
    84%{
        -webkit-transform:scaleX(1)
    }
    88%{
        -webkit-transform:scaleX(1.002)
    }
    96%{
        -webkit-transform:scaleX(1)
    }
    100%{
        -webkit-transform:scaleX(1) scaleY(1)
    }
}
@keyframes rubberband{
    0%{
        transform:scaleX(1.25) scaleY(0.75)
    }
    2%{
        transform:scaleX(1.692) scaleY(0.748)
    }
    4%{
        transform:scaleX(2.162) scaleY(0.808)
    }
    6%{
        transform:scaleX(2.128) scaleY(0.912)
    }
    8%{
        transform:scaleX(1.748) scaleY(1.016)
    }
    10%{
        transform:scaleX(1.226) scaleY(1.087)
    }
    12%{
        transform:scaleX(0.778) scaleY(1.111)
    }
    14%{
        transform:scaleX(0.524) scaleY(1.093)
    }
    16%{
        transform:scaleX(0.489) scaleY(1.05)
    }
    18%{
        transform:scaleX(0.627) scaleY(1.003)
    }
    20%{
        transform:scaleX(0.845) scaleY(0.968)
    }
    22%{
        transform:scaleX(1.056) scaleY(0.952)
    }
    24%{
        transform:scaleX(1.19) scaleY(0.957)
    }
    26%{
        transform:scaleX(1.227) scaleY(0.973)
    }
    28%{
        transform:scaleX(1.182) scaleY(0.994)
    }
    30%{
        transform:scaleX(1.09) scaleY(1.011)
    }
    32%{
        transform:scaleX(0.996) scaleY(1.02)
    }
    34%{
        transform:scaleX(0.927)
    }
    36%{
        transform:scaleX(0.901) scaleY(1.014)
    }
    38%{
        transform:scaleX(0.913) scaleY(1.005)
    }
    40%{
        transform:scaleX(0.95) scaleY(0.997)
    }
    42%{
        transform:scaleX(0.993) scaleY(0.992)
    }
    44%{
        transform:scaleX(1.026)
    }
    46%{
        transform:scaleX(1.042)
    }
    48%{
        transform:scaleX(1.04) scaleY(0.997)
    }
    50%{
        transform:scaleX(1.026) scaleY(1.001)
    }
    52%{
        transform:scaleX(1.007) scaleY(1.003)
    }
    54%{
        transform:scaleX(0.991)
    }
    56%{
        transform:scaleX(0.983)
    }
    60%{
        transform:scaleX(0.987) scaleY(1)
    }
    62%{
        transform:scaleX(0.995)
    }
    64%{
        transform:scaleX(1.002) scaleY(0.998)
    }
    66%{
        transform:scaleX(1.007)
    }
    70%{
        transform:scaleY(1)
    }
    72%{
        transform:scaleX(1.003)
    }
    74%{
        transform:scaleX(1)
    }
    76%{
        transform:scaleX(0.997)
    }
    84%{
        transform:scaleX(1)
    }
    88%{
        transform:scaleX(1.002)
    }
    96%{
        transform:scaleX(1)
    }
    100%{
        transform:scaleX(1) scaleY(1)
    }
}
.rubberband{
    -webkit-animation:rubberband 1.667s linear 0s 1 normal both;
    -webkit-transform-origin:50% 50%;
    animation:rubberband 1.667s linear 0s 1 normal both;
    transform-origin:50% 50%
}
@-webkit-keyframes jellyfall{
    0%{
        -webkit-transform:translateY(-300px) scaleY(1.5) scaleX(0.5);
        opacity:0
    }
    2%{
        -webkit-transform:translateY(-178.27px) scaleY(1.379) scaleX(0.624);
        opacity:.35
    }
    4%{
        -webkit-transform:translateY(0px) scaleY(1.006) scaleX(0.998);
        opacity:.7
    }
    6%{
        -webkit-transform:translateY(-11.02px) scaleY(0.679) scaleX(1.322);
        opacity:1
    }
    8%{
        -webkit-transform:translateY(-1.4px) scaleY(0.746) scaleX(1.252)
    }
    10%{
        -webkit-transform:translateY(-.64px) scaleY(0.994) scaleX(1.003)
    }
    12%{
        -webkit-transform:translateY(-.3px) scaleY(1.191) scaleX(0.808)
    }
    14%{
        -webkit-transform:translateY(-.02px) scaleY(1.197) scaleX(0.804)
    }
    16%{
        -webkit-transform:scaleY(1.006) scaleX(0.996)
    }
    18%{
        -webkit-transform:scaleY(0.875) scaleX(1.126)
    }
    20%{
        -webkit-transform:scaleY(0.869) scaleX(1.13)
    }
    22%{
        -webkit-transform:scaleY(0.966) scaleX(1.033)
    }
    24%{
        -webkit-transform:scaleY(1.067) scaleX(0.932)
    }
    26%{
        -webkit-transform:scaleY(1.087) scaleX(0.913)
    }
    28%{
        -webkit-transform:scaleY(1.023) scaleX(0.977)
    }
    30%{
        -webkit-transform:scaleY(0.956) scaleX(1.045)
    }
    32%{
        -webkit-transform:scaleY(0.938) scaleX(1.062)
    }
    34%{
        -webkit-transform:scaleY(0.971) scaleX(1.028)
    }
    36%{
        -webkit-transform:scaleY(1.029) scaleX(0.971)
    }
    38%{
        -webkit-transform:scaleY(1.041) scaleX(0.959)
    }
    40%{
        -webkit-transform:scaleY(1.019) scaleX(0.981)
    }
    42%{
        -webkit-transform:scaleY(0.987) scaleX(1.013)
    }
    44%{
        -webkit-transform:scaleY(0.972) scaleX(1.028)
    }
    46%{
        -webkit-transform:scaleY(0.987) scaleX(1.012)
    }
    48%{
        -webkit-transform:scaleY(1.008) scaleX(0.991)
    }
    50%{
        -webkit-transform:scaleY(1.018) scaleX(0.982)
    }
    52%{
        -webkit-transform:scaleY(1.012) scaleX(0.988)
    }
    54%{
        -webkit-transform:scaleY(0.998) scaleX(1.002)
    }
    56%{
        -webkit-transform:scaleY(0.988) scaleX(1.012)
    }
    58%{
        -webkit-transform:scaleY(0.992) scaleX(1.008)
    }
    60%{
        -webkit-transform:scaleY(1.002) scaleX(0.998)
    }
    62%{
        -webkit-transform:scaleY(1.008) scaleX(0.992)
    }
    66%{
        -webkit-transform:scaleY(0.999) scaleX(1.001)
    }
    68%{
        -webkit-transform:scaleY(0.995) scaleX(1.005)
    }
    72%{
        -webkit-transform:scaleY(1) scaleX(1)
    }
    74%{
        -webkit-transform:scaleY(1.003) scaleX(0.997)
    }
    78%{
        -webkit-transform:scaleY(1) scaleX(1)
    }
    80%{
        -webkit-transform:scaleY(0.998) scaleX(1.002)
    }
    86%{
        -webkit-transform:scaleY(1.001) scaleX(0.999)
    }
    92%{
        -webkit-transform:scaleY(0.999) scaleX(1.001)
    }
    100%{
        -webkit-transform:translateY(0px) scaleY(1) scaleX(1);
        opacity:1
    }
}
@keyframes jellyfall{
    0%{
        transform:translateY(-300px) scaleY(1.5) scaleX(0.5);
        opacity:0
    }
    2%{
        transform:translateY(-178.27px) scaleY(1.379) scaleX(0.624);
        opacity:.35
    }
    4%{
        transform:translateY(0px) scaleY(1.006) scaleX(0.998);
        opacity:.7
    }
    6%{
        transform:translateY(-11.02px) scaleY(0.679) scaleX(1.322);
        opacity:1
    }
    8%{
        transform:translateY(-1.4px) scaleY(0.746) scaleX(1.252)
    }
    10%{
        transform:translateY(-.64px) scaleY(0.994) scaleX(1.003)
    }
    12%{
        transform:translateY(-.3px) scaleY(1.191) scaleX(0.808)
    }
    14%{
        transform:translateY(-.02px) scaleY(1.197) scaleX(0.804)
    }
    16%{
        transform:scaleY(1.006) scaleX(0.996)
    }
    18%{
        transform:scaleY(0.875) scaleX(1.126)
    }
    20%{
        transform:scaleY(0.869) scaleX(1.13)
    }
    22%{
        transform:scaleY(0.966) scaleX(1.033)
    }
    24%{
        transform:scaleY(1.067) scaleX(0.932)
    }
    26%{
        transform:scaleY(1.087) scaleX(0.913)
    }
    28%{
        transform:scaleY(1.023) scaleX(0.977)
    }
    30%{
        transform:scaleY(0.956) scaleX(1.045)
    }
    32%{
        transform:scaleY(0.938) scaleX(1.062)
    }
    34%{
        transform:scaleY(0.971) scaleX(1.028)
    }
    36%{
        transform:scaleY(1.029) scaleX(0.971)
    }
    38%{
        transform:scaleY(1.041) scaleX(0.959)
    }
    40%{
        transform:scaleY(1.019) scaleX(0.981)
    }
    42%{
        transform:scaleY(0.987) scaleX(1.013)
    }
    44%{
        transform:scaleY(0.972) scaleX(1.028)
    }
    46%{
        transform:scaleY(0.987) scaleX(1.012)
    }
    48%{
        transform:scaleY(1.008) scaleX(0.991)
    }
    50%{
        transform:scaleY(1.018) scaleX(0.982)
    }
    52%{
        transform:scaleY(1.012) scaleX(0.988)
    }
    54%{
        transform:scaleY(0.998) scaleX(1.002)
    }
    56%{
        transform:scaleY(0.988) scaleX(1.012)
    }
    58%{
        transform:scaleY(0.992) scaleX(1.008)
    }
    60%{
        transform:scaleY(1.002) scaleX(0.998)
    }
    62%{
        transform:scaleY(1.008) scaleX(0.992)
    }
    66%{
        transform:scaleY(0.999) scaleX(1.001)
    }
    68%{
        transform:scaleY(0.995) scaleX(1.005)
    }
    72%{
        transform:scaleY(1) scaleX(1)
    }
    74%{
        transform:scaleY(1.003) scaleX(0.997)
    }
    78%{
        transform:scaleY(1) scaleX(1)
    }
    80%{
        transform:scaleY(0.998) scaleX(1.002)
    }
    86%{
        transform:scaleY(1.001) scaleX(0.999)
    }
    92%{
        transform:scaleY(0.999) scaleX(1.001)
    }
    100%{
        transform:translateY(0px) scaleY(1) scaleX(1);
        opacity:1
    }
}
.jellyfall{
    -webkit-animation:jellyfall 3.5s linear 0s 1 normal both;
    -webkit-transform-origin:50% 100%;
    animation:jellyfall 3.5s linear 0s 1 normal both;
    transform-origin:50% 100%
}





.floating-text {
    
    display: inline-block;
    -webkit-text-stroke: 0.3px rgb(170 255 255 / 45%);
    font-size: 36px;
    text-shadow:
        -1px -1px 0px rgba(0, 100, 100, 0.3),
        -1px -1px 1px rgba(0, 100, 100, 0.07),
        -1px -1px 2px rgba(0, 100, 100, 0.07),
        -1px -1px 3px rgba(0, 100, 100, 0.07),
        -1px -1px 4px rgba(0, 100, 100, 0.07),
        -1px -1px 5px rgba(0, 100, 100, 0.07),
        -1px -1px 6px rgba(0, 100, 100, 0.07),
        -1px -1px 7px rgba(0, 100, 100, 0.07),
        -1px -1px 8px rgba(0, 100, 100, 0.07),
        -1px -1px 9px rgba(0, 100, 100, 0.07);
    }

@keyframes floatUpDown {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-6%);
      }
}
.float-container {
    animation: floatUpDown 2s ease-in-out infinite;
}
#circleButtonContainer {
    -webkit-box-reflect: below 0 linear-gradient(transparent, rgba(0,0,0,0.3));
    position: fixed;
    bottom: 20px;
    left: 20px;
}
#circleButtonContainer,.circle-button {
    z-index: 999999999;
    width: 140px;
    height: 50px;
    overflow: visible;

    display: flex;
    justify-content: center;
    align-items: center;

    cursor: pointer;
    transition:
        all 0.35s cubic-bezier(0.5,-0.5, 0.5, 1.5),
        top 0.4s cubic-bezier(0, 1.67, 0.66, 0.83),
        left 0.4s cubic-bezier(0.25, 2.38, 0.42, 0.58);
    user-select: none;
    touch-action: none;
    transform-origin: center center;
}
.circle-button {
    width: 50px;
    height: 50px;

    backdrop-filter: blur(0.3vw);

    border: 0.5px solid rgb(170 255 255 / 45%);
    background-color: rgba(255, 255, 255, 0.1);

    box-shadow: inset 0 0 6px 0 rgba(255,255,255,0.1),
                inset -4px -7px 7px 9px rgba(55,255,255,.25),
                inset 0 0 6px 0 rgba(0, 20, 25,.1), 
                inset 0 0 6px 5px rgba(0, 20, 25,.05), 
                0px 1px rgba(0, 20, 25, 0.02), 
                0px 2px rgba(0, 20, 25, 0.02), 
                0px 3px rgba(0, 20, 25, 0.02), 
                0px 4px rgba(0, 20, 25, 0.02), 
                0px 5px rgba(0, 20, 25, 0.02), 
                0px 6px rgba(0, 20, 25, 0.02);
    
    background: 

        radial-gradient(circle at 33% 33%,
            rgba(200,255,255,0.9),
            rgba(255,255,255,0.2) 50%,
            rgba(255,255,255,0.1) 70%,
            transparent 100%),

        repeating-linear-gradient( 0deg, transparent, 
                #00999910 25px,
                transparent 1px,
                transparent 25px),

        linear-gradient( 180deg, 
                #ffffff22 5px, 
                transparent 50px );

    border-radius: 50%;

    color: rgb(222 255 255 / 50%);
    font-size: 24px;
    font-weight: bold;

    top: 0;
    left: 0;

}

#circleButtonContainer.dragging {
   /* pointer-events: none; *//* prevents click to fire on mouseup after dragging, it wasnt a good solution */
}

#circleButtonContainer:hover,
#circleButtonContainer.dragging {
    
    transform: scale(1.2);
}
#circleButtonContainer:active {
    transition: all 0.1s ease-in-out, top 0s, left 0s;
    transform: scale(1.1);
}

#circleButtonContainer.dragging {
    cursor: grabbing;
    transition: all 0.35s cubic-bezier(0.5,-0.5, 0.5, 1.5), top 0s, left 0s;
}
.dragging-cursor {
    cursor: grabbing;
}

















.aic-chat-loader1,
.aic-chat-loader1:before,
.aic-chat-loader1:after {
  border-radius: 50%;
  width: 1em;
  height: 1em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: aicchatloader1 1.8s infinite ease-in-out;
  animation: aicchatloader1 1.8s infinite ease-in-out;
}
.aic-chat-loader1 {
  color: #ffffff;
  font-size: 10px;
  margin: 80px auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.aic-chat-loader1:before,
.aic-chat-loader1:after {
  content: '';
  position: absolute;
  top: 0;
}
.aic-chat-loader1:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.aic-chat-loader1:after {
  left: 3.5em;
}
@-webkit-keyframes aicchatloader1 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@keyframes aicchatloader1 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}


/**
 * ==============================================
 * Dot Pulse
 * ==============================================
 */
.dot-pulse {
  position: relative;
  left: -9999px;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: #ffffff;
  color: #ffffff;
  box-shadow: 9999px 0 0 -5px;
  animation: dot-pulse 2s infinite linear;
  animation-delay: 0.25s;
}
.dot-pulse::before, .dot-pulse::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: #ffffff;
  color: #ffffff;
}
.dot-pulse::before {
  box-shadow: 9984px 0 0 -5px;
  animation: dot-pulse-before 2s infinite linear;
  animation-delay: 0s;
}
.dot-pulse::after {
  box-shadow: 10014px 0 0 -5px;
  animation: dot-pulse-after 2s infinite linear;
  animation-delay: 0.5s;
}

@keyframes dot-pulse-before {
  0% {
    box-shadow: 9984px 0 0 -5px;
    color: rgba(255, 255, 255, 0);
  }
  30% {
    box-shadow: 9984px 0 0 2px;
    color: #ffffff;
  }
  60%, 100% {
    box-shadow: 9984px 0 0 -5px;
    color: rgba(255, 255, 255, 0);
  }
}
@keyframes dot-pulse {
  0% {
    box-shadow: 9999px 0 0 -5px;
    color: rgba(255, 255, 255, 0);
  }
  30% {
    box-shadow: 9999px 0 0 2px;
    color: #ffffff;
  }
  60%, 100% {
    box-shadow: 9999px 0 0 -5px;
    color: rgba(255, 255, 255, 0);
  }
}
@keyframes dot-pulse-after {
  0% {
    box-shadow: 10014px 0 0 -5px;
    color: rgba(255, 255, 255, 0);
  }
  30% {
    box-shadow: 10014px 0 0 2px;
    color: #ffffff;

  }
  60%, 100% {
    box-shadow: 10014px 0 0 -5px;
    color: rgba(255, 255, 255, 0);
  }
}
/**
 * ==============================================
 * Dot Flashing
 * ==============================================
 */
.dot-flashing {
  position: relative;
  width: 1em;
  height: 1em;
  border-radius: 0.5em;
  background-color: #ffffff;
  color: #ffffff;
  animation: dot-flashing 1s infinite linear alternate;
  animation-delay: 0.5s;
}
.dot-flashing::before, .dot-flashing::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
}
.dot-flashing::before {
  left: -15px;
  width: 1em;
  height: 1em;
  border-radius: 0.5em;
  background-color: #ffffff;
  color: #ffffff;
  animation: dot-flashing 1s infinite alternate;
  animation-delay: 0s;
}
.dot-flashing::after {
  left: 15px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #ffffff;
  color: #ffffff;
  animation: dot-flashing 1s infinite alternate;
  animation-delay: 1s;
}

@keyframes dot-flashing {
  0% {
    background-color: #ffffff;
  }
  50%, 100% {
    background-color: rgba(255, 255, 255, 0.2);
  }
}
/**
 * ==============================================
 * Dot Collision
 * ==============================================
 */
.dot-collision {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #ffffff;
  color: #ffffff;
}
.dot-collision::before, .dot-collision::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
}
.dot-collision::before {
  left: -10px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #ffffff;
  color: #ffffff;
  animation: dot-collision-before 2s infinite ease-in;
}
.dot-collision::after {
  left: 10px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #ffffff;
  color: #ffffff;
  animation: dot-collision-after 2s infinite ease-in;
  animation-delay: 1s;
}

@keyframes dot-collision-before {
  0%, 50%, 75%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-15px);
  }
}
@keyframes dot-collision-after {
  0%, 50%, 75%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(15px);
  }
}
/**
 * ==============================================
 * Dot Revolution
 * ==============================================
 */
.dot-revolution {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #ffffff;
  color: #ffffff;
}
.dot-revolution::before, .dot-revolution::after {
  content: "";
  display: inline-block;
  position: absolute;
}
.dot-revolution::before {
  left: 0;
  top: -15px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #ffffff;
  color: #ffffff;
  transform-origin: 5px 20px;
  animation: dot-revolution 1.4s linear infinite;
}
.dot-revolution::after {
  left: 0;
  top: -30px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #ffffff;
  color: #ffffff;
  transform-origin: 5px 35px;
  animation: dot-revolution 1s linear infinite;
}

@keyframes dot-revolution {
  0% {
    transform: rotateZ(0deg) translate3d(0, 0, 0);
  }
  100% {
    transform: rotateZ(360deg) translate3d(0, 0, 0);
  }
}
/**
 * ==============================================
 * Dot Carousel
 * ==============================================
 */
.dot-carousel {
  position: relative;
  left: -9999px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #ffffff;
  color: #ffffff;
  box-shadow: 9984px 0 0 0 #ffffff, 9999px 0 0 0 #ffffff, 10014px 0 0 0 #ffffff;
  animation: dot-carousel 1.5s infinite linear;
}

@keyframes dot-carousel {
  0% {
    box-shadow: 9984px 0 0 -1px #ffffff, 9999px 0 0 1px #ffffff, 10014px 0 0 -1px #ffffff;
  }
  50% {
    box-shadow: 10014px 0 0 -1px #ffffff, 9984px 0 0 -1px #ffffff, 9999px 0 0 1px #ffffff;
  }
  100% {
    box-shadow: 9999px 0 0 1px #ffffff, 10014px 0 0 -1px #ffffff, 9984px 0 0 -1px #ffffff;
  }
}
/**
 * ==============================================
 * Dot Typing
 * ==============================================
 */
.dot-typing {
  position: relative;
  left: -9999px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #ffffff;
  color: #ffffff;
  box-shadow: 9984px 0 0 0 #ffffff, 9999px 0 0 0 #ffffff, 10014px 0 0 0 #ffffff;
  animation: dot-typing 1.5s infinite linear;
}

@keyframes dot-typing {
  0% {
    box-shadow: 9984px 0 0 0 #ffffff, 9999px 0 0 0 #ffffff, 10014px 0 0 0 #ffffff;
  }
  16.667% {
    box-shadow: 9984px -10px 0 0 #ffffff, 9999px 0 0 0 #ffffff, 10014px 0 0 0 #ffffff;
  }
  33.333% {
    box-shadow: 9984px 0 0 0 #ffffff, 9999px 0 0 0 #ffffff, 10014px 0 0 0 #ffffff;
  }
  50% {
    box-shadow: 9984px 0 0 0 #ffffff, 9999px -10px 0 0 #ffffff, 10014px 0 0 0 #ffffff;
  }
  66.667% {
    box-shadow: 9984px 0 0 0 #ffffff, 9999px 0 0 0 #ffffff, 10014px 0 0 0 #ffffff;
  }
  83.333% {
    box-shadow: 9984px 0 0 0 #ffffff, 9999px 0 0 0 #ffffff, 10014px -10px 0 0 #ffffff;
  }
  100% {
    box-shadow: 9984px 0 0 0 #ffffff, 9999px 0 0 0 #ffffff, 10014px 0 0 0 #ffffff;
  }
}
/**
 * ==============================================
 * Dot Windmill
 * ==============================================
 */
.dot-windmill {
  position: relative;
  top: -10px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #ffffff;
  color: #ffffff;
  transform-origin: 5px 15px;
  animation: dot-windmill 2s infinite linear;
}
.dot-windmill::before, .dot-windmill::after {
  content: "";
  display: inline-block;
  position: absolute;
}
.dot-windmill::before {
  left: -8.66254px;
  top: 15px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #ffffff;
  color: #ffffff;
}
.dot-windmill::after {
  left: 8.66254px;
  top: 15px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #ffffff;
  color: #ffffff;
}

@keyframes dot-windmill {
  0% {
    transform: rotateZ(0deg) translate3d(0, 0, 0);
  }
  100% {
    transform: rotateZ(720deg) translate3d(0, 0, 0);
  }
}
/**
 * ==============================================
 * Dot Bricks
 * ==============================================
 */
.dot-bricks {
  position: relative;
  top: 8px;
  left: -9999px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #ffffff;
  color: #ffffff;
  box-shadow: 9991px -16px 0 0 #ffffff, 9991px 0 0 0 #ffffff, 10007px 0 0 0 #ffffff;
  animation: dot-bricks 2s infinite ease;
}

@keyframes dot-bricks {
  0% {
    box-shadow: 9991px -16px 0 0 #ffffff, 9991px 0 0 0 #ffffff, 10007px 0 0 0 #ffffff;
  }
  8.333% {
    box-shadow: 10007px -16px 0 0 #ffffff, 9991px 0 0 0 #ffffff, 10007px 0 0 0 #ffffff;
  }
  16.667% {
    box-shadow: 10007px -16px 0 0 #ffffff, 9991px -16px 0 0 #ffffff, 10007px 0 0 0 #ffffff;
  }
  25% {
    box-shadow: 10007px -16px 0 0 #ffffff, 9991px -16px 0 0 #ffffff, 9991px 0 0 0 #ffffff;
  }
  33.333% {
    box-shadow: 10007px 0 0 0 #ffffff, 9991px -16px 0 0 #ffffff, 9991px 0 0 0 #ffffff;
  }
  41.667% {
    box-shadow: 10007px 0 0 0 #ffffff, 10007px -16px 0 0 #ffffff, 9991px 0 0 0 #ffffff;
  }
  50% {
    box-shadow: 10007px 0 0 0 #ffffff, 10007px -16px 0 0 #ffffff, 9991px -16px 0 0 #ffffff;
  }
  58.333% {
    box-shadow: 9991px 0 0 0 #ffffff, 10007px -16px 0 0 #ffffff, 9991px -16px 0 0 #ffffff;
  }
  66.666% {
    box-shadow: 9991px 0 0 0 #ffffff, 10007px 0 0 0 #ffffff, 9991px -16px 0 0 #ffffff;
  }
  75% {
    box-shadow: 9991px 0 0 0 #ffffff, 10007px 0 0 0 #ffffff, 10007px -16px 0 0 #ffffff;
  }
  83.333% {
    box-shadow: 9991px -16px 0 0 #ffffff, 10007px 0 0 0 #ffffff, 10007px -16px 0 0 #ffffff;
  }
  91.667% {
    box-shadow: 9991px -16px 0 0 #ffffff, 9991px 0 0 0 #ffffff, 10007px -16px 0 0 #ffffff;
  }
  100% {
    box-shadow: 9991px -16px 0 0 #ffffff, 9991px 0 0 0 #ffffff, 10007px 0 0 0 #ffffff;
  }
}
/**
 * ==============================================
 * Dot Floating
 * ==============================================
 */
.dot-floating {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #ffffff;
  color: #ffffff;
  animation: dot-floating 3s infinite cubic-bezier(0.15, 0.6, 0.9, 0.1);
}
.dot-floating::before, .dot-floating::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
}
.dot-floating::before {
  left: -12px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #ffffff;
  color: #ffffff;
  animation: dot-floating-before 3s infinite ease-in-out;
}
.dot-floating::after {
  left: -24px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #ffffff;
  color: #ffffff;
  animation: dot-floating-after 3s infinite cubic-bezier(0.4, 0, 1, 1);
}

@keyframes dot-floating {
  0% {
    left: calc(-50% - 5px);
  }
  75% {
    left: calc(50% + 105px);
  }
  100% {
    left: calc(50% + 105px);
  }
}
@keyframes dot-floating-before {
  0% {
    left: -50px;
  }
  50% {
    left: -12px;
  }
  75% {
    left: -50px;
  }
  100% {
    left: -50px;
  }
}
@keyframes dot-floating-after {
  0% {
    left: -100px;
  }
  50% {
    left: -24px;
  }
  75% {
    left: -100px;
  }
  100% {
    left: -100px;
  }
}
/**
 * ==============================================
 * Dot Fire
 * ==============================================
 */
.dot-fire {
  position: relative;
  left: -9999px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #ffffff;
  color: #ffffff;
  box-shadow: 9999px 22.5px 0 -5px #ffffff;
  animation: dot-fire 1.5s infinite linear;
  animation-delay: -0.85s;
}
.dot-fire::before, .dot-fire::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #ffffff;
  color: #ffffff;
}
.dot-fire::before {
  box-shadow: 9999px 22.5px 0 -5px #ffffff;
  animation: dot-fire 1.5s infinite linear;
  animation-delay: -1.85s;
}
.dot-fire::after {
  box-shadow: 9999px 22.5px 0 -5px #ffffff;
  animation: dot-fire 1.5s infinite linear;
  animation-delay: -2.85s;
}

@keyframes dot-fire {
  1% {
    box-shadow: 9999px 22.5px 0 -5px #ffffff;
  }
  50% {
    box-shadow: 9999px -5.625px 0 2px #ffffff;
  }
  100% {
    box-shadow: 9999px -22.5px 0 -5px #ffffff;
  }
}
/**
 * ==============================================
 * Dot Spin
 * ==============================================
 */
.dot-spin {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: transparent;
  color: transparent;
  box-shadow: 0 -18px 0 0 #ffffff, 12.727926px -12.727926px 0 0 #ffffff, 18px 0 0 0 #ffffff, 12.727926px 12.727926px 0 0 rgba(255, 255, 255, 0), 0 18px 0 0 rgba(255, 255, 255, 0), -12.727926px 12.727926px 0 0 rgba(255, 255, 255, 0), -18px 0 0 0 rgba(255, 255, 255, 0), -12.727926px -12.727926px 0 0 rgba(255, 255, 255, 0);
  animation: dot-spin 1.5s infinite linear;
}

@keyframes dot-spin {
  0%, 100% {
    box-shadow: 0 -18px 0 0 #ffffff, 12.727926px -12.727926px 0 0 #ffffff, 18px 0 0 0 #ffffff, 12.727926px 12.727926px 0 -5px rgba(255, 255, 255, 0), 0 18px 0 -5px rgba(255, 255, 255, 0), -12.727926px 12.727926px 0 -5px rgba(255, 255, 255, 0), -18px 0 0 -5px rgba(255, 255, 255, 0), -12.727926px -12.727926px 0 -5px rgba(255, 255, 255, 0);
  }
  12.5% {
    box-shadow: 0 -18px 0 -5px rgba(255, 255, 255, 0), 12.727926px -12.727926px 0 0 #ffffff, 18px 0 0 0 #ffffff, 12.727926px 12.727926px 0 0 #ffffff, 0 18px 0 -5px rgba(255, 255, 255, 0), -12.727926px 12.727926px 0 -5px rgba(255, 255, 255, 0), -18px 0 0 -5px rgba(255, 255, 255, 0), -12.727926px -12.727926px 0 -5px rgba(255, 255, 255, 0);
  }
  25% {
    box-shadow: 0 -18px 0 -5px rgba(255, 255, 255, 0), 12.727926px -12.727926px 0 -5px rgba(255, 255, 255, 0), 18px 0 0 0 #ffffff, 12.727926px 12.727926px 0 0 #ffffff, 0 18px 0 0 #ffffff, -12.727926px 12.727926px 0 -5px rgba(255, 255, 255, 0), -18px 0 0 -5px rgba(255, 255, 255, 0), -12.727926px -12.727926px 0 -5px rgba(255, 255, 255, 0);
  }
  37.5% {
    box-shadow: 0 -18px 0 -5px rgba(255, 255, 255, 0), 12.727926px -12.727926px 0 -5px rgba(255, 255, 255, 0), 18px 0 0 -5px rgba(255, 255, 255, 0), 12.727926px 12.727926px 0 0 #ffffff, 0 18px 0 0 #ffffff, -12.727926px 12.727926px 0 0 #ffffff, -18px 0 0 -5px rgba(255, 255, 255, 0), -12.727926px -12.727926px 0 -5px rgba(255, 255, 255, 0);
  }
  50% {
    box-shadow: 0 -18px 0 -5px rgba(255, 255, 255, 0), 12.727926px -12.727926px 0 -5px rgba(255, 255, 255, 0), 18px 0 0 -5px rgba(255, 255, 255, 0), 12.727926px 12.727926px 0 -5px rgba(255, 255, 255, 0), 0 18px 0 0 #ffffff, -12.727926px 12.727926px 0 0 #ffffff, -18px 0 0 0 #ffffff, -12.727926px -12.727926px 0 -5px rgba(255, 255, 255, 0);
  }
  62.5% {
    box-shadow: 0 -18px 0 -5px rgba(255, 255, 255, 0), 12.727926px -12.727926px 0 -5px rgba(255, 255, 255, 0), 18px 0 0 -5px rgba(255, 255, 255, 0), 12.727926px 12.727926px 0 -5px rgba(255, 255, 255, 0), 0 18px 0 -5px rgba(255, 255, 255, 0), -12.727926px 12.727926px 0 0 #ffffff, -18px 0 0 0 #ffffff, -12.727926px -12.727926px 0 0 #ffffff;
  }
  75% {
    box-shadow: 0 -18px 0 0 #ffffff, 12.727926px -12.727926px 0 -5px rgba(255, 255, 255, 0), 18px 0 0 -5px rgba(255, 255, 255, 0), 12.727926px 12.727926px 0 -5px rgba(255, 255, 255, 0), 0 18px 0 -5px rgba(255, 255, 255, 0), -12.727926px 12.727926px 0 -5px rgba(255, 255, 255, 0), -18px 0 0 0 #ffffff, -12.727926px -12.727926px 0 0 #ffffff;
  }
  87.5% {
    box-shadow: 0 -18px 0 0 #ffffff, 12.727926px -12.727926px 0 0 #ffffff, 18px 0 0 -5px rgba(255, 255, 255, 0), 12.727926px 12.727926px 0 -5px rgba(255, 255, 255, 0), 0 18px 0 -5px rgba(255, 255, 255, 0), -12.727926px 12.727926px 0 -5px rgba(255, 255, 255, 0), -18px 0 0 -5px rgba(255, 255, 255, 0), -12.727926px -12.727926px 0 0 #ffffff;
  }
}
/**
 * ==============================================
 * Dot Falling
 * ==============================================
 */
.dot-falling {
  position: relative;
  left: -9999px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #ffffff;
  color: #ffffff;
  box-shadow: 9999px 0 0 0 #ffffff;
  animation: dot-falling 1s infinite linear;
  animation-delay: 0.1s;
}
.dot-falling::before, .dot-falling::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
}
.dot-falling::before {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #ffffff;
  color: #ffffff;
  animation: dot-falling-before 1s infinite linear;
  animation-delay: 0s;
}
.dot-falling::after {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #ffffff;
  color: #ffffff;
  animation: dot-falling-after 1s infinite linear;
  animation-delay: 0.2s;
}

@keyframes dot-falling {
  0% {
    box-shadow: 9999px -15px 0 0 rgba(255, 255, 255, 0);
  }
  25%, 50%, 75% {
    box-shadow: 9999px 0 0 0 #ffffff;
  }
  100% {
    box-shadow: 9999px 15px 0 0 rgba(255, 255, 255, 0);
  }
}
@keyframes dot-falling-before {
  0% {
    box-shadow: 9984px -15px 0 0 rgba(255, 255, 255, 0);
  }
  25%, 50%, 75% {
    box-shadow: 9984px 0 0 0 #ffffff;
  }
  100% {
    box-shadow: 9984px 15px 0 0 rgba(255, 255, 255, 0);
  }
}
@keyframes dot-falling-after {
  0% {
    box-shadow: 10014px -15px 0 0 rgba(255, 255, 255, 0);
  }
  25%, 50%, 75% {
    box-shadow: 10014px 0 0 0 #ffffff;
  }
  100% {
    box-shadow: 10014px 15px 0 0 rgba(255, 255, 255, 0);
  }
}
/**
 * ==============================================
 * Dot Stretching
 * ==============================================
 */
.dot-stretching {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #ffffff;
  color: #ffffff;
  transform: scale(1.25, 1.25);
  animation: dot-stretching 2s infinite ease-in;
}
.dot-stretching::before, .dot-stretching::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
}
.dot-stretching::before {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #ffffff;
  color: #ffffff;
  animation: dot-stretching-before 2s infinite ease-in;
}
.dot-stretching::after {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #ffffff;
  color: #ffffff;
  animation: dot-stretching-after 2s infinite ease-in;
}

@keyframes dot-stretching {
  0% {
    transform: scale(1.25, 1.25);
  }
  50%, 60% {
    transform: scale(0.8, 0.8);
  }
  100% {
    transform: scale(1.25, 1.25);
  }
}
@keyframes dot-stretching-before {
  0% {
    transform: translate(0) scale(0.7, 0.7);
  }
  50%, 60% {
    transform: translate(-20px) scale(1, 1);
  }
  100% {
    transform: translate(0) scale(0.7, 0.7);
  }
}
@keyframes dot-stretching-after {
  0% {
    transform: translate(0) scale(0.7, 0.7);
  }
  50%, 60% {
    transform: translate(20px) scale(1, 1);
  }
  100% {
    transform: translate(0) scale(0.7, 0.7);
  }
}