.loader-chatbot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: block;
    position: relative;
    color: transparent;
    animation: animloader 1s linear infinite alternate;
  }
  
  @keyframes animloader {
    0% {
      box-shadow: -27px -3px, -10px 6px,  12px -6px;
    }
    33% {
      box-shadow: -27px 3px, -10px -6px,  12px 6px;
    }
    66% {
      box-shadow: -27px -3px, -10px 6px, 12px -6px;
    }
    100% {
      box-shadow: -27px 3px, -10px -6px, 12px 6px;
    }
  }

  .loader-avatar {
    width: 76px;
    height: 76px;
    position: relative;
    overflow: hidden;
    margin: 10px 0;
  }
  .loader-avatar:before , .loader-avatar:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background:#FFF;
    transform: translate(-50% , 100%)  scale(0);
    animation: push 2s infinite ease-in;
  }
  .loader-avatar:after {
  animation-delay: 1s;
  }
  @keyframes push {
      0% {
        transform: translate(-50% , 100%)  scale(1);
      }
      15% , 25%{
        transform: translate(-50% , 50%)  scale(1);
      }
    50% , 75% {
        transform: translate(-50%, -30%) scale(0.5);
      }
    80%,  100% {
        transform: translate(-50%, -50%) scale(0);
      }
  }


  .loader-qs {
    width: 100px;
    height: 100px;
    border: 5px solid #000000;
    border-radius: 50%;
    display: inline-block;
    left: 45%;
    position: relative;
    animation: pulse 0.8s linear infinite;
  }
  .loader-qs:after {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    border: 5px solid #282727;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: scaleUp 0.8s linear infinite;
  }
  
  @keyframes scaleUp {
    0% { transform: translate(-50%, -50%) scale(0) }
    60% , 100% { transform: translate(-50%, -50%)  scale(1)}
  }
  @keyframes pulse {
    0% , 60% , 100%{ transform:  scale(1) }
    80% { transform:  scale(1.2)}
  }

  .loader-eye {
    position: relative;
    width: 108px;
    display: flex;
    justify-content: space-between;
  }
  .loader-eye::after , .loader-eye::before  {
    content: '';
    display: inline-block;
    width: 48px;
    height: 48px;
    background-color: #FFF;
    background-image:  radial-gradient(circle 14px, #0d161b 100%, transparent 0);
    background-repeat: no-repeat;
    border-radius: 50%;
    animation: eyeMove 10s infinite , blink 10s infinite;
  }
  @keyframes eyeMove {
    0%  , 10% {     background-position: 0px 0px}
    13%  , 40% {     background-position: -15px 0px}
    43%  , 70% {     background-position: 15px 0px}
    73%  , 90% {     background-position: 0px 15px}
    93%  , 100% {     background-position: 0px 0px}
  }
  @keyframes blink {
    0%  , 10% , 12% , 20%, 22%, 40%, 42% , 60%, 62%,  70%, 72% , 90%, 92%, 98% , 100%
    { height: 48px}
    11% , 21% ,41% , 61% , 71% , 91% , 99%
    { height: 18px}
  }
