#chat-btn-cta {
  width: 65px;
  height: 65px;
  position: fixed;
  z-index: 999;
  bottom: 20px;
  right: 20px;
  border-radius:50%;
  box-shadow: 0 0 20px rgba(0,0,0,0.2);
  text-align: center;

  .icon {
      display: inline-block;
      color: #fff;
      font-size: 1.8rem;
      margin: 12px 0 0 0;
  }

  &.whatsapp {
      background: #25D366;
  }

  &:hover {
      cursor: pointer;
  }
}

#chat-container-outer {
  position: fixed;
  z-index: 999;
  bottom: 100px;
  left: 0;
  padding: 20px;
  display: none;
  width: 100%;

  #chat-container {
      box-shadow: 0 0 20px rgba(0,0,0,0.2);
      border-radius:10px;

      .header {
          position: relative;
          padding: 23px 20px;
          display: flex;
          border-radius:10px 10px 0 0;

          .avatar {
              flex: 0 0 54px;
              width: 54px;
              height: 54px;
              background: rgba(255,255,255,0.3);
              border-radius:50%;
              text-align: center;

              img {
                  width: 30px;
                  height: 30px;
                  margin: 14px 0 0 0;
              }

              .active-indicator {

              }
          }
          .user-details {
              flex: 1 1 auto;
              padding: 0 0 0 25px;
              color: #fff;

              p.user-name {
                  font-size: 1.429rem;
                  font-weight: 600;
                  color: #fff;
              }

              p.user-engagement {
                  font-size: 1rem;
                  color: #fff;

                  &#engagement-loaded {
                      display: none;
                  }

                  &#engagement-loading {

                  }
              }
          }
          .close-menu {
              position: absolute;
              top: 0;
              right: 0;
              padding: 10px;

              .icon {
                  color: #fff;
                  font-size: 1rem;
                  opacity: 0.6;
                  /* @include transition(all 0.2s ease); */
              }

              &:hover {
                  .icon {
                      opacity: 1;
                      cursor: pointer;
                  }
              }
          }
      }
      .body {
          padding: 20px;

          .message {
              padding: 15px 15px 0 15px;
              display: inline-block;
              width: 50%;
              background: #fff;
              border-radius:5px;
              box-shadow: 1px 1px 0px rgba(0,0,0,0.1);

              &#message-loaded {
                  display: none;
              }

              &#message-loading {}

              .user {
                  margin: 0 0 15px 0;

                  p {
                      font-size: 1.143rem;
                      color: #9C9C9C;
                      font-weight: 600;
                  }
              }
              .content {
                  margin: 0 0 15px 0;

                  p {
                      font-size: 1.143rem;
                  }
              }
              .timestamp {
                  margin: 0 -10px -0 0;
                  p {
                      color: #9C9C9C;
                      text-align: right;
                  }
              }
          }
      }
      .footer {
          padding: 20px;
          border-radius:0 0 10px 10px;

          p {
              a {
                  line-height: 36px;
                  text-align: center;
                  color: #fff;
                  display: block;
                  border-radius:25px;
                  font-size: 1.143rem;

                  .icon {

                  }
                  .text {

                  }

                  &:hover {
                      text-decoration: none;
                  }
              }
          }
      }
      
      &.whatsapp {
          .header {
              background: #085D54;
          }
          .body {
              background: #ECE5DD url('/assets/images/chatwidgets/whatsapp/whatsappbg.png') no-repeat;
              background-size: cover;
          }
          .footer {
              background: #fff;
              p {
                  a {
                      background: #25D366;
                  }
              }
          }
      }
  }
}

.animate {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes bounceInDown {
  0%, 60%, 75%, 90%, 100% {
      -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
      transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  0% {
      opacity: 0;
      -webkit-transform: translate3d(0, -3000px, 0);
      transform: translate3d(0, -3000px, 0);
  }
  60% {
      opacity: 1;
      -webkit-transform: translate3d(0, 25px, 0);
      transform: translate3d(0, 25px, 0);
  }
  75% {
      -webkit-transform: translate3d(0, -10px, 0);
      transform: translate3d(0, -10px, 0);
  }
  90% {
      -webkit-transform: translate3d(0, 5px, 0);
      transform: translate3d(0, 5px, 0);
  }
  100% {
  -webkit-transform: none;
  transform: none;
  }
}

@keyframes bounceInDown {
  0%, 60%, 75%, 90%, 100% {
      -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
      transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  0% {
      opacity: 0;
      -webkit-transform: translate3d(0, -3000px, 0);
      transform: translate3d(0, -3000px, 0);
  }
  60% {
      opacity: 1;
      -webkit-transform: translate3d(0, 25px, 0);
      transform: translate3d(0, 25px, 0);
  }
  75% {
      -webkit-transform: translate3d(0, -10px, 0);
      transform: translate3d(0, -10px, 0);
  }
  90% {
      -webkit-transform: translate3d(0, 5px, 0);
      transform: translate3d(0, 5px, 0);
  }
  100% {
      -webkit-transform: none;
      transform: none;
  }
}

@media (min-width: 576px) {
  #chat-container-outer {
      left: auto;
      right: 0;
      min-width: 300px;
      max-width: 400px;
  }
}

@media (min-width: 768px) {
  #chat-container-outer {
      width: 400px;
  }
}

@media (min-width: 992px) {

}

@media (min-width: 1200px) {

}

@media (min-width: 1500px) {

}