/* support btns */

.support-btns--animation-open .support-btns__item--feedback {
  -webkit-animation: feedback-open 0.3s 1 linear;
  animation: feedback-open 0.3s 1 linear;
}
.support-btns--animation-open .support-btns__item--feedback.support-btns__item--feedback-support {
  -webkit-animation: feedback-support-open 0.3s 1 linear;
  animation: feedback-support-open 0.3s 1 linear;
}
.support-btns--animation-open .support-btns__item--phone {
  -webkit-animation: phone-open 0.3s 1 linear;
          animation: phone-open 0.3s 1 linear;
}
.support-btns--animation-open .support-btns__item--faq {
  -webkit-animation: faq-open 0.3s 1 linear;
          animation: faq-open 0.3s 1 linear;
}
.support-btns--animation-open .support-btns__item--chat {
  -webkit-animation: chat-open 0.3s 1 linear;
          animation: chat-open 0.3s 1 linear;
}
.support-btns--animation-open .support-btns__item--whatsapp {
  -webkit-animation: whatsapp-open 0.3s 1 linear;
          animation: whatsapp-open 0.3s 1 linear;
}
.support-btns--animation-close .support-btns__item--feedback {
  -webkit-animation: feedback-close 0.3s 1 linear;
  animation: feedback-close 0.3s 1 linear;
}
.support-btns--animation-close .support-btns__item--feedback.support-btns__item--feedback-support {
  -webkit-animation: feedback-support-close 0.3s 1 linear;
  animation: feedback-support-close 0.3s 1 linear;
}
.support-btns--animation-close .support-btns__item--phone {
  -webkit-animation: phone-close 0.3s 1 linear;
          animation: phone-close 0.3s 1 linear;
}
.support-btns--animation-close .support-btns__item--faq {
  -webkit-animation: faq-close 0.3s 1 linear;
          animation: faq-close 0.3s 1 linear;
}
.support-btns--animation-close .support-btns__item--chat {
  -webkit-animation: chat-close 0.3s 1 linear;
          animation: chat-close 0.3s 1 linear;
}
.support-btns--animation-close .support-btns__item--whatsapp {
  -webkit-animation: whatsapp-close 0.3s 1 linear;
          animation: whatsapp-close 0.3s 1 linear;
}
@-webkit-keyframes faq-open {
  from {
    bottom: -220px;
  }
  to {
    bottom: 0;
  }
}
@keyframes faq-open {
  from {
    bottom: -220px;
  }
  to {
    bottom: 0;
  }
}
@-webkit-keyframes feedback-open {
  from {
    bottom: -220px;
  }
  to {
    bottom: 0;
  }
}
@keyframes feedback-open {
  from {
    bottom: -220px;
  }
  to {
    bottom: 0;
  }
}
@-webkit-keyframes feedback-support-open {
  from {
    bottom: -370px;
  }
  to {
    bottom: 0;
  }
}
@keyframes feedback-support-open {
  from {
    bottom: -370px;
  }
  to {
    bottom: 0;
  }
}
@-webkit-keyframes phone-open {
  from {
    bottom: -300px;
  }
  to {
    bottom: 0;
  }
}
@keyframes phone-open {
  from {
    bottom: -300px;
  }
  to {
    bottom: 0;
  }
}
@-webkit-keyframes chat-open {
  from {
    bottom: -150px;
  }
  to {
    bottom: 0;
  }
}
@keyframes chat-open {
  from {
    bottom: -150px;
  }
  to {
    bottom: 0;
  }
}
@-webkit-keyframes whatsapp-open {
  from {
    bottom: -70px;
  }
  to {
    bottom: 0;
  }
}
@keyframes whatsapp-open {
  from {
    bottom: -70px;
  }
  to {
    bottom: 0;
  }
}
@-webkit-keyframes faq-close {
  from {
    bottom: 0;
  }
  to {
    bottom: -220px;
  }
}
@keyframes faq-close {
  from {
    bottom: 0;
  }
  to {
    bottom: -220px;
  }
}
@-webkit-keyframes feedback-close {
  from {
    bottom: 0;
  }
  to {
    bottom: -220px;
  }
}
@keyframes feedback-close {
  from {
    bottom: 0;
  }
  to {
    bottom: -220px;
  }
}
@-webkit-keyframes feedback-support-close {
  from {
    bottom: 0;
  }
  to {
    bottom: -370px;
  }
}
@keyframes feedback-support-close {
  from {
    bottom: 0;
  }
  to {
    bottom: -370px;
  }
}
@-webkit-keyframes phone-close {
  from {
    bottom: 0;
  }
  to {
    bottom: -300px;
  }
}
@keyframes phone-close {
  from {
    bottom: 0;
  }
  to {
    bottom: -300px;
  }
}
@-webkit-keyframes chat-close {
  from {
    bottom: 0;
  }
  to {
    bottom: -150px;
  }
}
@keyframes chat-close {
  from {
    bottom: 0;
  }
  to {
    bottom: -150px;
  }
}
@-webkit-keyframes whatsapp-close {
  from {
    bottom: 0;
  }
  to {
    bottom: -70px;
  }
}
@keyframes whatsapp-close {
  from {
    bottom: 0;
  }
  to {
    bottom: -70px;
  }
}
.support-btns__item {
  background-color: #2866ae !important;
  align-items: center;
  justify-content: center;
  position: relative;
  border: none !important;
}
.support-btns__item--detail {
  display: none !important;
}
.support-btns__item--starting {
  display: flex !important;
}
.support-btns__item--visible {
  display: flex !important;
}
.support-btns__item--hidden {
  display: none !important;
}
.support-btns__item img {
  width: 24px !important;
  height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
}
.support-btns__item img {
  filter: brightness(0) invert(1);
}
.support-btns__item span {
  position: absolute;
  right: 50px;
  width: 200px;
  display: block;
  border-radius: 5px;
  background-color: rgba(68, 70, 66, 0.5);
  color: white;
  padding: 7px 12px;
  text-align: left;
  margin-right: -10px;
  z-index: -1;
  font-size: 14px !important;
  font-weight: normal !important;
  line-height: 1.2 !important;
}

/* Сбрасываем стили кнопок у ссылки внутри подписи, чтобы выглядела как текст */
.support-btns__item span a {
  all: unset;
  color: #fff !important;
  font-size: inherit !important;
  line-height: inherit !important;
  cursor: pointer;
}
.support-btns__item span a:hover {
  text-decoration: none;
}
.support-btns__item:hover {
  background-color: #1e4a7a !important;
}
.support-btns__item:hover span {
  background-color: #444642;
}
.support-btns__item--starting span {
  opacity: 0;
}
.support-btns__item--starting:hover span {
  opacity: 1;
  transition: 0.3s;
}
.support-btns__detail-close {
  width: 30px;
  height: 30px;
  background-color: rgba(68, 70, 66, 0.3);
  border-radius: 50%;
  position: absolute;
  top: -40px;
  right: 0;
  display: none;
}
.support-btns__detail-close:before,
.support-btns__detail-close:after {
  content: "";
  position: absolute;
  width: 18px;
  height: 3px;
  background: rgba(255, 255, 255, 0.8);
  top: calc(50% - 1.5px);
  left: calc(50% - 9px);
}
.support-btns__detail-close:before {
  transform: rotate(45deg);
}
.support-btns__detail-close:after {
  transform: rotate(-45deg);
}
.support-btns__detail-close span {
  position: absolute;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
}
.support-btns__detail-close--visible {
  display: block;
}
.support-btns__detail-close:hover {
  cursor: pointer;
  background-color: #444642;
}
.support-btns__detail-close:hover:before,
.support-btns__detail-close:hover:after {
  background: #9fb7d4;
}
@media (max-width: 768px) {
  .support-btns {
    right: auto;
    left: 20px;
    bottom: 5px;
    display: block !important;
  }
  .support-btns__item span {
    right: auto;
    left: 50px;
  }
  .support-btns__detail-close {
    right: auto;
    left: 0;
  }
}