.dotparent-blue {
  height: 48px;
  width: 80px;
  background-color: var(--info-blue);
  border-width: 5px;
  border-radius: 8px 8px 8px 8px;
  margin: 20px 3rem 20px 52.1%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dotparent-blue span:nth-child(2) {
  animation-delay: 40ms;
}
.dotparent-blue span:nth-child(3) {
  animation-delay: 150ms;
}
.dotparent-blue::after {
  background: url("/img/industries/sales/sarah.png"), no-repeat;
  transform: translateX(5rem);
  content: " ";
  position: absolute;
  display: block;
  background-size: 70%;
  background-position: center;
  background-repeat: no-repeat;
  width: 3rem;
  min-height: 2.1rem;
}

.dotparent-blue span.chatdot {
  height: 8px;
  width: 8px;
  padding: 1px;
  margin: 3px;
  background-color: var(--white);
  border-radius: 50%;
  animation-name: zoom;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes zoom {
  0% {
    transform: scale(1);
    background-color: var(--very-light-grey);
  }
  25% {
    transform: scale(0.6);
    background-color: var(--very-light-grey);
  }
  50% {
    transform: scale(1.1);
    background-color: #ffffff5d;
  }
  100% {
    transform: scale(1);
    background-color: var(--very-light-grey);
  }
}
.lightbluebg {
  background: #F5F5F5;
  margin-top: 6.3rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  padding-top: 0.05rem;
  padding-bottom: 0.05rem;
}

.bluechat {
  margin: -5.3rem auto 4rem auto !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 420px;
  box-shadow: 0px 3px 24px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  background: #FFFFFF;
}

.bluechat .chatbubble {
  padding: 15px 20px;
  font-size: .6rem;
  text-align: left;
}
.bluechat .chatbubble.chatSarah {
  background-color: var(--info-blue);
  border-radius: 8px 8px 0px 8px;
  margin-bottom: 25px;
  margin-right: 6rem;
  margin-left: 1.7rem;
  position: relative;
}
.bluechat .chatbubble.chatSarah p {
  color: var(--white);
  opacity: 1;
}
.bluechat .chatbubble.chatSarah::after {
  background: url("/img/industries/sales/sarah.png"), no-repeat;
  margin-right: -4.8rem;
  right: 0;
  bottom: 0;
}
.bluechat .chatbubble.chatKarla {
  background-color: var(--very-light-grey);
  border-radius: 8px 8px 8px 0px;
  margin-left: 4rem;
  left: 0;
  max-width: 260px;
  position: relative;
}
.bluechat .chatbubble.chatKarla p {
  color: #666666;
  opacity: 1;
}
.bluechat .chatbubble.chatKarla::after {
  background: url("/img/tour/2021/chat-john.png"), no-repeat;
  margin-left: -4.8rem;
  left: 0;
  bottom: 0;
}
.bluechat .chatbubble.chatSarah::after, .bluechat .chatbubble.chatKarla::after {
  content: " ";
  position: absolute;
  display: block;
  background-size: 70%;
  background-position: center;
  background-repeat: no-repeat;
  width: 3rem;
  min-height: 2.1rem;
}
.bluechat .chatbubble p.chatcopy {
  font-family: var(--font-regular);
  font-size: .8rem;
  opacity: 1;
  margin-top: 0;
  margin-bottom:0;
}

.chatinfo {
  height: 4rem;
  width: 100px;
  margin-top: -57px;
  margin-left: 95px;
  line-height: 1.35;
  text-align: left;
  padding-left: 2rem;
  font-size: .6rem;
}

.chathead .ico-chevron {
  color: #fff;
  transform: rotate(180deg);
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 1.3rem;
  margin-left: 1rem;
  font-size: 0.6rem;
}

.bluechat .chathead {
  background-color: var(--bp-primary-accent-color);
  border-radius: 8px 8px 0 0;
  height: 3.7rem;
  width: 100%;
  margin-bottom: 1rem;
}
.bluechat .chathead .chatarrow img {
  position: absolute;
  margin-top: 2rem;
  margin-left: -270px;
}
.bluechat .chathead .karlachat img {
  margin: 15px 5px 10px 60px;
}
.bluechat .chathead span {
  color: var(--white);
}
.bluechat .chathead span.chatname {
  font-family: var(--font-medium);
  font-size: 1rem;
  margin: 0;
}
.bluechat .chathead span.chatstatus p {
  font-family: var(--font-light);
  margin-top: -5px;
  font-size: 0.6rem;
}

.chatbutton {
  position: absolute;
  bottom: -6.5rem;
  height: 5rem;
  width: 5rem;
  right: 0;
}

.textinput img {
  max-width: 100%;
  height: auto;
  margin-top: 0;
}

.emoji {
  height: 1.2rem;
  width: auto;
}


#payment {
  --chat-background-color: #41D37F;
}

#tawkto {
  --chat-background-color: #4ba458;
}

#boldchat {
  --chat-background-color: #01abff;
}

#clickdesk {
  --chat-background-color: #354e88;
}

#gist {
  --chat-background-color: #3549db;
}

#crisp {
  --chat-background-color: #3770ec;
}

#drift {
  --chat-background-color: #285af5;
}

#zendesk {
  --chat-background-color: #25484c;
}

#whoson {
  --chat-background-color: #2b4f7f;
}

#userlike {
  --chat-background-color: #3f8af6;
}

#purechat {
  --chat-background-color: #3e5063;
}

#livechat {
  --chat-background-color: #eb5d2a;
}

#jivochat {
  --chat-background-color: #343852;
}

#intercom {
  --chat-background-color: #0057ff;
}

#hubspot {
  --chat-background-color: #475a74;
}

#freshsales {
  --chat-background-color: #45a4eb;
}

#olark {
  --chat-background-color: #4f4a8b ;
}

/* CHAT COLORS */
.bluechat .chatbubble.chatSarah {
  background-color: var(--chat-background-color);
}

.bluechat .chathead {
  background-color: var(--chat-background-color);
}

.dotparent-blue {
  background-color: var(--chat-background-color);
}

@media (max-width:768px) {
  .bluechat .chathead .karlachat img {
    margin: 5px 5px 10px 40px;
  }
  .chatinfo {
    margin-left: 80px;
    margin-top: -53px;
  }
}