.b24-widget-button-wrapper {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  visibility: hidden;
  direction: ltr;
  z-index: 10150;
}

.b24-widget-button-wrapper.b24-widget-button-bottom {
  flex-direction: column-reverse;
}

.b24-widget-button-shadow {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 10149;
  display: none;
}

.b24-widget-button-wrapper.b24-widget-button-visible {
  visibility: visible;
}

.b24-widget-button-wrapper.hide-on-modal {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none;
}

.b24-widget-button-visible {
  visibility: visible;
  -webkit-animation: b24-widget-button-visible 1s ease-out forwards 1;
  animation: b24-widget-button-visible 1s ease-out forwards 1;
}

.b24-widget-button-position-bottom-right {
  right: 50px;
  bottom: 50px;
}

/* */
.b24-widget-button-position-bottom-right .b24-widget-button-popup {
  left: -320px;
  bottom: 0;
}

.b24-widget-button-popup {
  display: none;
  position: absolute;
  left: 100px;
  padding: 12px 20px 12px 14px;
  width: 312px;
  border: 2px solid #2fc7f7;
  background: #fff;
  border-radius: 15px;
  box-sizing: border-box;
  z-index: 1;
  cursor: pointer;
}

/* */
.b24-widget-button-hide {
  -webkit-animation: b24-widget-hidden 0.3s linear forwards;
  animation: b24-widget-hidden 0.3s linear forwards;
}

.b24-widget-button-social {
  display: none;
}

.b24-widget-button-social.b24-widget-button-show {
  display: flex;
  flex-direction: column;
}

.b24-widget-button-shadow.b24-widget-button-show {
  display: block;
}

.b24-widget-button-icon-show {
  opacity: 1;
}

.b24-widget-button-icon-hide {
  opacity: 0;
}
/* */
.b24-widget-button-inner-container {
  transform: scale(1);
  transition: transform 0.3s ease;
  margin-top: 10px;
  position: relative;
  display: inline-block;
}

.b24-widget-button-social.b24-widget-button-show + .b24-widget-button-inner-container {
  transform: scale(0.735); /* Уменьшаем размер при клике */
}

/* */
.b24-widget-button-inner-mask {
  position: absolute;
  top: -8px;
  left: -8px;
  height: 82px;
  min-width: 66px;
  -webkit-width: calc(100% + 16px);
  width: calc(100% + 16px);
  border-radius: 100px;
  background: #4e7fff;
  opacity: 0.2;
  transition: background-color 0.3s linear;
}

.b24-widget-button-social.b24-widget-button-show + .b24-widget-button-inner-container .b24-widget-button-inner-mask {
  background-color: #d6d6d6 !important;
}

/* */
.b24-widget-button-block {
  width: 66px;
  height: 66px;
  border-radius: 100%;
  box-sizing: border-box;
  overflow: hidden;
  cursor: pointer;
}

/* inside */
.b24-widget-button-pulse-animate {
  -webkit-animation: widgetPulse infinite 1.7s;
  animation: widgetPulse infinite 1.7s;
}
.b24-widget-button-social.b24-widget-button-show + .b24-widget-button-inner-container .b24-widget-button-pulse-animate {
  animation: none;
}

.b24-widget-button-pulse {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border: 1px solid #00aeef;
  border-radius: 50%;
}

/* */
.b24-widget-button-inner-block {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 66px;
  border-radius: 100px;
  background-color: #00aeef;
  box-sizing: border-box;
  transition: background-color 0.3s linear;
}

.b24-widget-button-social.b24-widget-button-show + .b24-widget-button-inner-container .b24-widget-button-inner-block {
  background: #d6d6d6 !important;
}

.b24-widget-button-close svg path {
  fill: #ebeff2;
}

/* */
.b24-widget-button-icon-container {
  position: relative;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

/* */
.b24-widget-button-inner-item {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -webkit-transition: opacity 0.6s ease-out;
  transition: opacity 0.6s ease-out;
  opacity: 0;
  overflow: hidden;
  box-sizing: border-box;
}

/* effect with opacity 0/1 */

/* after click when active*/
/* <div data-b24-crm-button-shadow="" class="b24-widget-button-shadow b24-widget-button-hide"></div>                                                    >>>>>>>     <div data-b24-crm-button-shadow="" class="b24-widget-button-shadow b24-widget-button-show"></div> */
/* <div dir="ltr" data-b24-crm-button-cont="" class="b24-widget-button-wrapper b24-widget-button-position-bottom-right b24-widget-button-visible">      >>>>>>>     <div dir="ltr" data-b24-crm-button-cont="" class="b24-widget-button-wrapper b24-widget-button-position-bottom-right b24-widget-button-visible b24-widget-button-bottom">*/
/* <div data-b24-crm-button-block="" class="b24-widget-button-social b24-widget-button-hide">                                                           >>>>>>>     <div data-b24-crm-button-block="" class="b24-widget-button-social b24-widget-button-show">*/

/*second div get this .b24-widget-button-bottom */

.b24-widget-button-wrapper.b24-widget-button-bottom {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
}

/* Стили для отдельных социальных кнопок */
.b24-widget-button-social-item {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 46px;
  height: 46px;
  margin-top: 10px;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

/* Стили для иконок внутри кнопок */
.b24-widget-button-social-item i,
.b24-widget-button-social-item svg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Стили для всплывающих подсказок (Tooltip) */
.b24-widget-button-social-tooltip {
  position: absolute;
  top: 50%;
  right: 57px;
  display: inline-block;
  max-width: 360px;

  transform: translateY(-50%);
  padding: 5px 10px;
  border-radius: 10px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;

  background-color: #fff;
  color: #000;
  font: 13px / 15px "Helvetica Neue", Arial, Helvetica, sans-serif;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s linear;
  overflow: hidden;
}

/* Показываем подсказку при наведении на кнопку */
.b24-widget-button-social-item:hover .b24-widget-button-social-tooltip {
  opacity: 1;
  visibility: visible;
}

/* Стили для конкретных иконок, если они в SVG */
.b24-crm-button-icon.b24-crm-button-chat-icon {
  fill: #fff;
}

/*
* Animations
*/
@keyframes b24-widget-button-visible {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes b24-widget-hidden {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.8);
  }
}

@keyframes widgetPulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

.b24-widget-button-callback {
  background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2229%22%20height%3D%2230%22%20viewBox%3D%220%200%2029%2030%22%3E%3Cpath%20fill%3D%22%23FFF%22%20fill-rule%3D%22evenodd%22%20d%3D%22M21.872%2019.905c-.947-.968-2.13-.968-3.072%200-.718.737-1.256.974-1.962%201.723-.193.206-.356.25-.59.112-.466-.262-.96-.474-1.408-.76-2.082-1.356-3.827-3.098-5.372-5.058-.767-.974-1.45-2.017-1.926-3.19-.096-.238-.078-.394.11-.587.717-.718.96-.98%201.665-1.717.984-1.024.984-2.223-.006-3.253-.56-.586-1.103-1.397-1.56-2.034-.458-.636-.817-1.392-1.403-1.985C5.4%202.2%204.217%202.2%203.275%203.16%202.55%203.9%201.855%204.654%201.12%205.378.438%206.045.093%206.863.02%207.817c-.114%201.556.255%203.023.774%204.453%201.062%202.96%202.68%205.587%204.642%207.997%202.65%203.26%205.813%205.837%209.513%207.698%201.665.836%203.39%201.48%205.268%201.585%201.292.075%202.415-.262%203.314-1.304.616-.712%201.31-1.36%201.962-2.042.966-1.01.972-2.235.012-3.234-1.147-1.192-2.48-1.88-3.634-3.065zm-.49-5.36l.268-.047c.583-.103.953-.707.79-1.295-.465-1.676-1.332-3.193-2.537-4.445-1.288-1.33-2.857-2.254-4.59-2.708-.574-.15-1.148.248-1.23.855l-.038.28c-.07.522.253%201.01.747%201.142%201.326.355%202.53%201.064%203.517%202.086.926.958%201.59%202.125%201.952%203.412.14.5.624.807%201.12.72zm2.56-9.85C21.618%202.292%2018.74.69%2015.56.02c-.56-.117-1.1.283-1.178.868l-.038.28c-.073.537.272%201.04.786%201.15%202.74.584%205.218%201.968%207.217%204.03%201.885%201.95%203.19%204.36%203.803%207.012.122.53.617.873%201.136.78l.265-.046c.57-.1.934-.678.8-1.26-.71-3.08-2.223-5.873-4.41-8.14z%22/%3E%3C/svg%3E);
  background-repeat: no-repeat;
  background-position: center;
  background-color: #00aeef;
  background-size: 43%;
}

@media (max-width: 768px) {
  .b24-widget-button-position-bottom-right {
    right: 20px;
    bottom: 140px;
  }
}