/*WhatasAPP Widget */
/*https://www.oflox.com/blog/whatsapp-button-html-code-generator*/
.whatswidget-widget-wrapper {
  font-family: "Helvetica Neue", "Apple Color Emoji", Helvetica, Arial,
    sans-serif !important;
  font-size: 16px !important;
  position: fixed !important;
  bottom: 20px !important;
  right: 30px !important;
  z-index: 1001 !important;
}

.whatswidget-conversation {
  background-color: #e4dcd4 !important;
  background-image: url("https://www.oflox.com/blog/wp-content/uploads/2021/01/wpbg.png") !important;
  background-repeat: repeat !important;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 5px 40px !important;
  width: 250px !important;
  height: 300px !important;
  border-radius: 10px !important;
  transition-duration: 0.5s !important;
  margin-bottom: 80px !important;
}

.whatswidget-conversation-header {
  background-color: white !important;
  padding: 10px !important;
  padding-left: 25px !important;
  box-shadow: 0px 1px #00000029 !important;
  font-weight: 600 !important;
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
}

.whatswidget-conversation-message {
  line-height: 1.2em !important;
  background-color: white !important;
  padding: 10px !important;
  margin: 10px !important;
  margin-left: 15px !important;
  border-radius: 5px !important;
}

.whatswidget-conversation-message-outer {
  background-color: #fff !important;
  padding: 10px !important;
  margin: 10px !important;
  margin-left: 0px !important;
  border-radius: 5px !important;
  box-shadow: rgba(0, 0, 0, 0.342) 0px 2.5px 10px !important;
  cursor: pointer !important;
  animation: nudge 2s linear infinite !important;
  margin-bottom: 70px !important;
}

.whatswidget-text-header-outer {
  font-weight: bold !important;
  font-size: 90% !important;
}

.whatswidget-text-message-outer {
  font-size: 90% !important;
}

.whatswidget-conversation-cta {
  border-radius: 25px !important;
  width: 175px !important;
  font-size: 110% !important;
  padding: 10px !important;
  margin: 0 auto !important;
  text-align: center !important;
  background-color: #23b123 !important;
  color: white !important;
  font-weight: bold !important;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 2.5px 10px !important;
  transition: 1s !important;
  position: absolute !important;
  top: 62% !important;
  left: 10% !important;
}

.whatswidget-conversation-cta:hover {
  transform: scale(1.1) !important;
  filter: brightness(1.3) !important;
}

.whatswidget-cta {
  text-decoration: none !important;
  color: white !important;
}

.whatswidget-cta-desktop {
  display: none !important;
}

.whatswidget-cta-mobile {
  display: inherit !important;
}

@media (min-width: 48em) {
  .whatswidget-cta-desktop {
    display: inherit !important;
  }

  .whatswidget-cta-mobile {
    display: none !important;
  }
}

.whatswidget-button-wrapper {
  position: fixed !important;
  bottom: 90px !important;
  right: 15px !important;
}

.whatswidget-button {
  position: relative !important;
  right: 0px !important;
  background-color: #31d831 !important;
  border-radius: 100% !important;
  width: 60px !important;
  height: 60px !important;
  box-shadow: 2px 1px #0d630d63 !important;
  transition: 1s !important;
}

.whatswidget-icon {
  width: 42px !important;
  height: 42px !important;
  position: absolute !important;
  bottom: 10px !important;
  left: 10px !important;
}

.whatswidget-button:hover {
  filter: brightness(115%) !important;
  transform: rotate(15deg) scale(1.15) !important;
  cursor: pointer !important;
}

@keyframes nudge {
  20%,
  100% {
    transform: translate(0, 0);
  }

  0% {
    transform: translate(0, 5px);
    transform: rotate(2deg);
  }

  10% {
    transform: translate(0, -5px);
    transform: rotate(-2deg);
  }
}

.whatswidget-link {
  position: absolute !important;
  bottom: 90px !important;
  right: 5px !important;
  opacity: 0.5 !important;
}
