.device-icon {
  position: absolute;
  color: white;
  font-size: 24px;
  transform-origin: center;
}

.wand-spin {
  animation-duration: 4s !important;
}

.bars-container {
  animation: continuousSlide 35s linear infinite;
  width: 9000px;
}
@keyframes continuousSlide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.toggle-ball {
  transition: transform 0.3s ease-in-out;
}
.toggle-active .toggle-ball {
  transform: translateX(28px);
}
.toggle-inactive .toggle-ball {
  transform: translateX(0px);
}
.toggle-bg {
  transition: background-color 0.3s ease-in-out;
}

.animate-zoom-in {
  animation: zoomIn 0.5s ease forwards;
}
.animate-zoom-out {
  animation: zoomOut 0.5s ease forwards;
}
.animate-stretch-vertical {
  animation: stretchVertical 0.5s ease forwards;
}
.animate-stretch-horizontal {
  animation: stretchHorizontal 0.5s ease forwards;
}

@keyframes zoomIn {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes zoomOut {
  from { transform: scale(1.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes stretchVertical {
  from { transform: scaleY(0.1); opacity: 0; }
  to { transform: scaleY(1); opacity: 1; }
}
@keyframes stretchHorizontal {
  from { transform: scaleX(1.5); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}