.widget {
  position: fixed;
  bottom: 20px;
  right: 15px;
  z-index: 10;
}

.widget a {
  text-decoration: none;
  color: #000000;
}
.widget a:focus {
  color: #000000;
}
.widget a:active {
  color: #000000;
}
.widget .hidden {
  display: none;
}
.widget__elem {
  width: 50px;
  height: 50px;
  background: #4EA954;
  box-shadow: 0px 4px 55px rgba(133, 133, 133, 0.25);
  margin-top: 10px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.widget__elem svg {
  transform: scale(0.8);
  fill: #FFFFFF;
  stroke: #FFFFFF;
}
.widget__elem svg.not-visible {
  display: none;
}
.widget__elem .label {
  font-size: 11px;
  padding: 0 10px;
  height: 30px;
  width: 175px;
  display: none;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 10px;
  right: 50px;
  background: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0px 4px 55px rgba(133, 133, 133, 0.15);
}
.widget__elem .label .arrow {
  width: 13px;
  height: 13px;
  background: #FFFFFF;
  transform: matrix(0.71, -0.5, 1.01, 0.71, 0, 0);
  position: absolute;
  top: 7px;
  right: -5px;
}
.widget .schemaToogle {
  background: linear-gradient(180deg, #FF0000 0%, #DFF20A 13.02%, #50D721 25%, #0AF0FF 40.63%, #0A22FE 55.73%, #950EFF 71.87%, #FA00FF 88.54%, #BF3232 100%);
  border: 1px solid #BF3266;
}
.widget .vk {
  background: #597DA3;
}
.widget .wa {
  background: #43D854;
}
.widget .tg {
  background: #2AABEE;
}
.widget__socials {
  height: 0px;
  overflow: hidden;
  visibility: hidden;
}
.widget .schemaButtons {
  height: 0px;
  overflow: hidden;
  visibility: hidden;
}
.widget .active {
  height: 100%;
  visibility: visible;
  overflow: unset;
  animation: widget-visible 1s ease-out forwards 1;
}
.widget .active-btn {
  background: #B7BACB;
  border: none;
  animation: unset;
}
@media (max-width: 550px) {
  .widget__mobile-hidden {
    display: none;
  }
}

.animation {
  animation: glowing 1200ms infinite;
}

@keyframes widget-visible {
  0% {
    transform: scale(0);
  }
  30% {
    transform: scale(1.2);
  }
  63% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes glowing {
  0% {
    background-color: #FF0000;
    box-shadow: 0 0 10px #DFF20A;
  }
  50% {
    background-color: #50D721;
    box-shadow: 0 0 30px #0AF0FF;
  }
  100% {
    background-color: #FF0000;
    box-shadow: 0 0 10px #DFF20A;
  }
}
@media (max-width: 550px) {
  .widget__category {
    left: 15px;
    right: unset;
  }
  .widget__category .label {
    left: 50px;
    right: unset;
  }
  .widget__category .label .arrow {
    left: -5px;
    right: unset;
    top: 10px;
  }
}