:root { --joinchat-ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3.516 3.516c4.686-4.686 12.284-4.686 16.97 0s4.686 12.283 0 16.97a12 12 0 0 1-13.754 2.299l-5.814.735a.392.392 0 0 1-.438-.44l.748-5.788A12 12 0 0 1 3.517 3.517zm3.61 17.043.3.158a9.85 9.85 0 0 0 11.534-1.758c3.843-3.843 3.843-10.074 0-13.918s-10.075-3.843-13.918 0a9.85 9.85 0 0 0-1.747 11.554l.16.303-.51 3.942a.196.196 0 0 0 .219.22zm6.534-7.003-.933 1.164a9.84 9.84 0 0 1-3.497-3.495l1.166-.933a.79.79 0 0 0 .23-.94L9.561 6.96a.79.79 0 0 0-.924-.445l-2.023.524a.797.797 0 0 0-.588.88 11.754 11.754 0 0 0 10.005 10.005.797.797 0 0 0 .88-.587l.525-2.023a.79.79 0 0 0-.445-.923L14.6 13.327a.79.79 0 0 0-.94.23z'/%3E%3C/svg%3E"); --joinchat-font: -apple-system,blinkmacsystemfont,"Segoe UI",roboto,oxygen-sans,ubuntu,cantarell,"Helvetica Neue",sans-serif; }
.joinchat { --bottom: 20px; --sep: 20px; --s: 60px; --header: calc(var(--s)*1.16667); --vh: 100vh; --red: 37; --green: 211; --blue: 102; --rgb: var(--red) var(--green) var(--blue); --color: rgb(var(--rgb)); --dark: rgb(calc(var(--red) - 75) calc(var(--green) - 75) calc(var(--blue) - 75)); --hover: rgb(calc(var(--red) + 50) calc(var(--green) + 50) calc(var(--blue) + 50)); --bg: rgb(var(--rgb)/4%); --bw: 100; --text: hsl(0deg 0% clamp(0%,var(--bw)*1%,100%)/clamp(70%,var(--bw)*1%,100%)); --msg: var(--color); color: var(--text); display: none; position: fixed; z-index: 9000; right: var(--sep); bottom: var(--bottom); font: normal normal normal 16px/1.625em var(--joinchat-font); letter-spacing: 0px; animation: 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28) 10ms 1 normal both running joinchat_show; transform: scale3d(0, 0, 0); transform-origin: calc(var(--s)/-2) calc(var(--s)/-4); user-select: none; touch-action: manipulation; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.joinchat *, .joinchat ::after, .joinchat ::before { box-sizing: border-box; }
.joinchat--show { display: block; transform: scaleX(1); }
.joinchat--left { right: auto; left: var(--sep); }
.joinchat--dark { --msg: var(--dark); }
.joinchat--noanim { animation: auto ease 0s 1 normal none running none; }
.joinchat--chatbox:not(.joinchat--noanim) { transform-origin: 0px 0px; animation-timing-function: ease-in-out; }
.joinchat--hidden { display: none !important; }
@supports not (width:clamp(1px,1%,10px)) {
  .joinchat { --text: hsl(0deg 0% calc(var(--bw)*1%)/90%); }
}
.joinchat__button { display: flex; flex-direction: row; position: absolute; z-index: 2; bottom: 8px; right: 8px; height: var(--s); min-width: var(--s); background: rgb(37, 211, 102); color: inherit; border-radius: calc(var(--s)/2); box-shadow: rgba(7, 94, 84, 0.24) 1px 6px 24px 0px; cursor: pointer; transition: background-color 0.2s linear; }
[dir="rtl"] .joinchat__button { flex-direction: row-reverse; }
.joinchat__button:hover { background: rgb(18, 140, 126); transition-duration: 1.5s; }
.joinchat__button:active { background: rgb(18, 140, 126); transition: none; }
.joinchat--left .joinchat__button { right: auto; left: 8px; flex-direction: row-reverse; }
[dir="rtl"] .joinchat--left .joinchat__button { flex-direction: row; }
.joinchat--btn .joinchat__button:hover { transition-duration: 0.2s; }
.joinchat--chatbox .joinchat__button { background: var(--color); transition-duration: 0.2s; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px 0px; }
.joinchat--chatbox .joinchat__button:active, .joinchat--chatbox .joinchat__button:hover { background: var(--hover); }
.joinchat--optout.joinchat--chatbox .joinchat__button { background-color: rgb(153, 153, 153); pointer-events: none; }
.joinchat--optout.joinchat--chatbox .joinchat__button .joinchat_svg__plain { stroke-dasharray: 0; animation: auto ease 0s 1 normal none running none; }
.joinchat--optout.joinchat--chatbox .joinchat__button .joinchat_svg__chat { animation: auto ease 0s 1 normal none running none; }
.joinchat__button__open { width: var(--s); height: var(--s); border-radius: 50%; background-image: ; background-position-x: ; background-position-y: ; background-repeat: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-size: 60% auto; overflow: hidden; }
.joinchat--chatbox .joinchat__button__open { display: none; }
.joinchat__button__image { position: absolute; top: 1px; right: 1px; width: calc(var(--s) - 2px); height: calc(var(--s) - 2px); border-radius: 50%; overflow: hidden; opacity: 0; }
.joinchat__button__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.joinchat--show .joinchat__button__image { animation: 20s linear 5s infinite normal both running joinchat_image_loop; }
.joinchat--image .joinchat__button__image { opacity: 1; animation: auto ease 0s 1 normal none running none; }
.joinchat--chatbox .joinchat__button__image { display: none; }
.joinchat__button__send { display: none; flex-shrink: 0; width: var(--s); height: var(--s); max-width: var(--s); padding: calc(var(--s)*0.18); margin: 0px; overflow: hidden; }
.joinchat--chatbox .joinchat__button__send { display: block; }
.joinchat__button__send path { fill: none !important; stroke: var(--text) !important; }
.joinchat__button__send .joinchat_svg__plain { stroke-dasharray: 1097; stroke-dashoffset: 1097; animation: 6s ease-in-out 0.2s infinite normal none running joinchat_plain; }
.joinchat__button__send .joinchat_svg__chat { stroke-dasharray: 1020; stroke-dashoffset: 1020; animation: 6s ease-in-out 3.2s infinite normal none running joinchat_chat; }
.joinchat__button__sendtext { padding: 0px; max-width: 0px; border-radius: var(--s); font-weight: 600; line-height: var(--s); white-space: nowrap; opacity: 0; overflow: hidden; text-overflow: ellipsis; transition: none; }
.joinchat--chatbox .joinchat__button__sendtext { padding: 0px 4px 0px 24px; max-width: min(400px - 16px - var(--s),100vw - 16px - var(--s) - 2*var(--sep)); opacity: 1; transition: max-width 0.2s linear, opacity 0.4s ease-out 0.2s; }
.joinchat--chatbox.joinchat--left .joinchat__button__sendtext { padding: 0px 24px 0px 4px; }
.joinchat__badge { position: absolute; top: -4px; right: -4px; width: 20px; height: 20px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; border-radius: 50%; background: rgb(232, 44, 12); color: rgb(255, 255, 255); font-size: 12px; font-weight: 600; line-height: 20px; text-align: center; box-shadow: none; opacity: 0; pointer-events: none; }
.joinchat__badge.joinchat__badge--in { animation: 0.5s cubic-bezier(0.27, 0.9, 0.41, 1.28) 0s 1 normal both running joinchat_badge_in; }
.joinchat__badge.joinchat__badge--out { animation: 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s 1 normal both running joinchat_badge_out; }
.joinchat__tooltip { position: absolute; top: calc(var(--s)/2 - 16px); right: calc(var(--s) + 16px); max-width: calc(100vw - var(--s) - 45px); height: 32px; padding: 0px 14px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; border-radius: 16px; background: rgb(255, 255, 255); color: rgba(0, 0, 0, 0.8); line-height: 31px; white-space: nowrap; opacity: 0; transition: opacity 0.3s ease-out 0.4s; filter: drop-shadow(rgba(0, 0, 0, 0.4) 0px 1px 4px); pointer-events: none; }
.joinchat__tooltip::after { content: ""; display: block; position: absolute; top: 10px; right: -6px; border-style: solid; border-color: transparent transparent transparent rgb(255, 255, 255); border-image: none; border-width: 6px 0px 6px 8px; }
.joinchat__tooltip div { width: max-content; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.joinchat--tooltip .joinchat__tooltip { animation: 20s linear 5s 1 normal both running joinchat_tootlip; }
.joinchat--chatbox .joinchat__tooltip { display: none; }
.joinchat--left .joinchat__tooltip { right: auto; left: calc(var(--s) + 16px); }
.joinchat--left .joinchat__tooltip::after { left: -6px; right: auto; border-color: transparent rgb(255, 255, 255) transparent transparent; border-width: 6px 8px 6px 0px; }
.joinchat__qr { position: absolute; bottom: calc(var(--s) + 16px); right: 0px; display: none; flex-direction: column-reverse; width: 228px; min-height: 200px; padding: 14px 14px 10px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; border-radius: 16px; background: rgb(255, 255, 255); color: rgba(0, 0, 0, 0.8); text-align: center; white-space: nowrap; filter: drop-shadow(rgba(0, 0, 0, 0.4) 0px 1px 4px); animation: 0.4s cubic-bezier(0.11, 0.84, 0.83, 1.01) 0.5s 1 normal both running joinchat_badge_in; pointer-events: none; }
.joinchat__qr::after { content: ""; display: block; position: absolute; bottom: -6px; right: calc(var(--s)/2 - 6px); border-style: solid; border-color: rgb(255, 255, 255) transparent transparent; border-image: none; border-width: 8px 6px 0px; }
.joinchat--left .joinchat__qr { left: 0px; right: auto; }
.joinchat--left .joinchat__qr::after { left: calc(var(--s)/2 - 6px); right: auto; }
.joinchat__qr div { font-size: 14px; color: rgb(74, 74, 74); overflow: hidden; text-overflow: ellipsis; }
.joinchat__qr canvas { display: block; width: 200px; height: 200px; margin: 0px; }
.joinchat__box { display: flex; flex-direction: column; position: absolute; bottom: 0px; right: 0px; z-index: 1; width: calc(100vw - var(--sep)*2); max-width: 400px; max-height: calc(var(--vh) - var(--bottom) - var(--sep)); border-radius: calc(var(--s)/2 + 2px); background: #fff linear-gradient(180deg,var(--color),var(--color) var(--header),var(--bg) var(--header),var(--bg)); box-shadow: rgba(0, 0, 0, 0.5) 0px 2px 6px 0px; text-align: left; overflow: hidden; transform: scale3d(0, 0, 0); opacity: 0; transition: max-height 0.2s ease-out, opacity 0.4s ease-out, transform linear 0.3s; }
[dir="rtl"] .joinchat__box { text-align: right; }
.joinchat--chatbox .joinchat__box { opacity: 1; transform: scaleX(1); transition: max-height 0.2s ease-out, opacity 0.2s ease-out, transform linear; }
.joinchat--left .joinchat__box { right: auto; left: 0px; }
.joinchat--dark .joinchat__box { background: #1a1a1a linear-gradient(180deg,var(--dark),var(--dark) var(--header),var(--bg) var(--header),var(--bg)); }
.joinchat__header { display: flex; flex-flow: row; align-items: center; position: relative; flex-shrink: 0; height: var(--header); min-height: 50px; padding: 0px 70px 0px 26px; margin: 0px; }
[dir="rtl"] .joinchat__header { padding: 0px 26px 0px 70px; }
.joinchat__header__text { font-size: 19px; font-weight: 600; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.8; }
.joinchat__powered { font-size: 11px; line-height: 18px; fill: currentcolor; opacity: 0.8; color: inherit !important; text-decoration: none !important; }
.joinchat__powered svg { display: inline-block; width: auto; height: 18px; vertical-align: -30%; }
.joinchat__powered:active, .joinchat__powered:hover { opacity: 0.9; filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 1px 3px); color: inherit !important; text-decoration: none !important; }
.joinchat__wa { height: 28px; width: auto; fill: currentcolor; opacity: 0.8; }
.joinchat__close { --size: 34px; position: absolute; top: calc(50% - var(--size)/2); right: 24px; width: var(--size); height: var(--size); border-radius: 50%; background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 24 24'%3E%3Cpath d='M24 2.4 21.6 0 12 9.6 2.4 0 0 2.4 9.6 12 0 21.6 2.4 24l9.6-9.6 9.6 9.6 2.4-2.4-9.6-9.6z'/%3E%3C/svg%3E") 50% center / 12px auto no-repeat rgba(0, 0, 0, 0.4); cursor: pointer; transition: background-color 0.3s ease-out; }
.joinchat__close:hover { background-color: rgba(0, 0, 0, 0.6); }
.joinchat__close:active { background-color: rgba(0, 0, 0, 0.7); }
[dir="rtl"] .joinchat__close { right: auto; left: 24px; }
.joinchat__box__scroll { overflow: hidden scroll; overscroll-behavior-y: contain; }
.joinchat__box__scroll::-webkit-scrollbar { width: 4px; background: rgba(0, 0, 0, 0); }
.joinchat__box__scroll::-webkit-scrollbar-thumb { border-radius: 2px; background: rgba(0, 0, 0, 0); }
.joinchat--blur .joinchat__box__scroll { background: rgba(var(--rgb)/2%); backdrop-filter: blur(10px); }
.joinchat__box__scroll:hover::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); }
.joinchat__box__content { width: calc(100% + 4px); padding: 20px 0 calc(var(--s) + 16px); }
.joinchat__optin { padding: 0px 16px; margin-bottom: 16px; color: rgb(74, 74, 74); font-size: 13px; line-height: 1.33; }
.joinchat__optin a { display: inline; padding: 0px; text-decoration: underline; color: inherit !important; }
.joinchat__optin a:hover { text-decoration-thickness: 2px; }
.joinchat__optin input { position: absolute; visibility: hidden; }
.joinchat__optin label { position: relative; display: block; margin: 0px; padding: 0px 0px 0px 30px; color: inherit; font: inherit; cursor: pointer; }
.joinchat__optin label::before { content: ""; display: block; position: absolute; top: min(50% - 11px, 5px); left: 0px; width: 22px; height: 22px; border: 3px solid var(--color); border-radius: 4px; background: rgb(255, 255, 255); box-shadow: 0 0 0 1px var(--text); transition: box-shadow 0.3s ease-in-out; }
.joinchat--dark .joinchat__optin label::before { background: rgb(0, 0, 0); }
.joinchat__optin label::after { content: ""; display: none; position: absolute; top: min(50% - 8px, 8px); left: 8px; width: 6px; height: 14px; border-top-color: ; border-top-style: ; border-right-color: ; border-right-style: ; border-bottom-color: ; border-bottom-style: ; border-left-color: ; border-left-style: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-width: 0px 3px 3px 0px; transform: rotate(45deg); }
[dir="rtl"] .joinchat__optin label { padding: 0px 30px 0px 0px; }
[dir="rtl"] .joinchat__optin label::before { left: auto; right: 0px; }
[dir="rtl"] .joinchat__optin label::after { left: auto; right: 8px; }
.joinchat__optin input:checked + label::before { box-shadow: 0 0 0 1px var(--text),inset 0 0 0 10px var(--color); }
.joinchat__optin input:checked + label::after { display: block; }
.joinchat--dark .joinchat__optin { color: rgb(216, 216, 216); }
.joinchat { --peak: url(#joinchat__peak_l); }
[dir="rtl"] .joinchat { --peak: url(#joinchat__peak_r); }
.joinchat__message { position: relative; min-height: 56px; padding: 15px 20px; margin: 0px 26px 26px; border-radius: 26px; background: rgb(255, 255, 255); color: rgb(74, 74, 74); word-break: break-word; filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 1px 2px); transform: translateZ(0px); }
.joinchat__message::before { content: ""; display: block; position: absolute; bottom: 18px; left: -15px; width: 17px; height: 25px; background: inherit; clip-path: var(--peak); }
[dir="rtl"] .joinchat__message::before { left: auto; right: -15px; }
.joinchat--dark .joinchat__message { background: rgb(80, 80, 80); color: rgb(216, 216, 216); }
@keyframes joinchat_show { 
  0% { transform: scale3d(0, 0, 0); }
  100% { transform: scaleX(1); }
}
@keyframes joinchat_badge_in { 
  0% { opacity: 0; transform: translate3d(0px, 50px, 0px); }
  100% { opacity: 1; transform: translateZ(0px); }
}
@keyframes joinchat_badge_out { 
  0% { opacity: 1; transform: translateZ(0px); }
  100% { opacity: 0; transform: translate3d(0px, -20px, 0px); }
}
@keyframes joinchat_plain { 
  0%, 50%, 100% { stroke-dashoffset: 1097; }
  5%, 45% { stroke-dashoffset: 0; }
}
@keyframes joinchat_chat { 
  0%, 50%, 100% { stroke-dashoffset: 1020; }
  5%, 45% { stroke-dashoffset: 0; }
}
@keyframes joinchat_image_loop { 
  0% { opacity: 0; }
  3%, 20% { opacity: 1; }
  25%, 100% { opacity: 0; }
}
@keyframes joinchat_tootlip { 
  0% { opacity: 0; transform: scaleY(0); }
  1%, 20% { opacity: 1; transform: scaleX(1); }
  25%, 100% { opacity: 0; transform: scaleX(1); }
}
.joinchat__woo-btn__wrapper { clear: both; }
.joinchat__woo-btn { --s: 40px; display: inline-block; box-sizing: border-box; height: var(--s); max-width: 100%; padding: 0 calc(var(--s)/2) 0 var(--s); background-image: ; background-position-x: ; background-position-y: ; background-repeat: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-size: calc(var(--s)*0.6); color: rgb(255, 255, 255); border-radius: calc(var(--s)/2); font: 700 normal calc(var(--s)*0.35)/var(--s) var(--joinchat-font); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; cursor: pointer; transition: background-color 0.2s; }
.joinchat__woo-btn:empty { padding-right: 0px; }
.joinchat__woo-btn:hover { background-color: rgb(18, 140, 126); }
@media (orientation: landscape) and (height >= 481px), (orientation: portrait) and (width >= 481px) {
  .joinchat--mobile { display: none !important; }
}
@media (width <= 767px) {
  .joinchat--footer-bar { --bottom: 76px !important; }
}
@media (orientation: landscape) and (height <= 480px), (width <= 480px) {
  .joinchat { --bottom: 6px; --sep: 6px; --header: calc(var(--s)*0.91667); }
  .joinchat__header__text { font-size: 17px; }
  .joinchat__close { --size: 28px; }
  .joinchat__box__scroll { padding-top: 15px; }
  .joinchat__message { padding: 18px 16px; line-height: 24px; margin: 0px 20px 20px; }
}
@media (hover: hover) {
  .joinchat__button:hover .joinchat__tooltip { opacity: 1; animation: auto ease 0s 1 normal none running none; transition: opacity 0.2s; }
  .joinchat--btn .joinchat__button:hover .joinchat__qr, .joinchat--chatbox .joinchat__button:hover .joinchat__qr { display: flex; }
}
@media (prefers-color-scheme: dark) {
  .joinchat--dark-auto { --msg: var(--dark); }
  .joinchat--dark-auto .joinchat__box { background: #1a1a1a linear-gradient(180deg,var(--dark),var(--dark) var(--header),var(--bg) var(--header),var(--bg)); }
  .joinchat--dark-auto .joinchat__optin label::before { background: rgb(0, 0, 0); }
  .joinchat--dark-auto .joinchat__optin { color: rgb(216, 216, 216); }
  .joinchat--dark-auto .joinchat__message { background: rgb(80, 80, 80); color: rgb(216, 216, 216); }
}
@media (prefers-reduced-motion) {
  .joinchat { animation: auto ease 0s 1 normal none running none; }
  .joinchat__button__send .joinchat_svg__plain { stroke-dasharray: 0; animation: auto ease 0s 1 normal none running none; }
  .joinchat__button__send .joinchat_svg__chat { animation: auto ease 0s 1 normal none running none; }
  .joinchat__button__sendtext { transition: none !important; }
}