.bubble-container {
  position: fixed;
  top: 46px;
  right: 50%;
  transform: translateX(50%);
  z-index: 9999;
  display: inline-block;
  padding: 18px 25px;
  background: linear-gradient(135deg,#fefffe 0,#f8fcff 30%,#f0f8ff 70%,#e8f4ff 100%);
  border-radius: 25px 30px 18px 35px;
  color: #4a5568;
  font-family: 'Segoe UI','Apple SD Gothic Neo',sans-serif;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  min-width: 180px;
  height: auto;
  min-height: 55px;
  border: 2px solid rgba(255,255,255,.8);
  box-shadow: -12px -8px 0 rgba(220,238,255,.4),8px -12px 0 rgba(230,245,255,.3),-8px 6px 0 rgba(215,235,255,.35),6px 8px 0 rgba(225,240,255,.25),0 12px 0 rgba(210,232,255,.3),0 0 20px rgba(173,216,255,.2),inset 0 2px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(200,220,240,.3);
  transition: .3s cubic-bezier(.4, 0, .2, 1);
  animation: 4s ease-in-out infinite float
}
.bubble-container:hover {
  box-shadow: -14px -10px 0 rgba(220,238,255,.5),10px -14px 0 rgba(230,245,255,.4),-10px 8px 0 rgba(215,235,255,.45),8px 10px 0 rgba(225,240,255,.35),0 14px 0 rgba(210,232,255,.4),0 0 25px rgba(173,216,255,.3),inset 0 3px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(200,220,240,.4);
  animation-play-state: paused
}
.bubble-content {
  position: relative;
  z-index: 1
}
.bubble-text-block {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  word-break: keep-all;
  text-align: center
}
#bubbleCloseBtn {
  display: none;
  position: absolute;
  top: 7px;
  right: 7px;
  color: #888;
  background: 0 0;
  font-size: 12px;
  border: none;
  cursor: pointer
}
@media screen and (max-width:576px) {
  .bubble-container {
    width: 90%
  }
}