/* Telegram-Style Toggles */
.tg-toggle {
  width: 44px;
  height: 24px;
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.tg-toggle__track {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(120, 120, 128, 0.32);
  border-radius: 34px;
  transition: background-color .3s cubic-bezier(0.25, 0.8, 0.25, 1);
  border: 1.5px solid rgba(120, 120, 128, 0.2);
}
.tg-toggle__thumb {
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: #fff;
  border-radius: 50%;
  transition: transform .3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow .3s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.tg-toggle--on .tg-toggle__track {
  background-color: #22c55e;
  border-color: #16a34a;
}
.tg-toggle--on .tg-toggle__thumb {
  transform: translateX(20px);
  box-shadow: 0 1px 4px rgba(34, 197, 94, 0.4);
}
.tg-toggle:hover .tg-toggle__track {
  border-color: rgba(120, 120, 128, 0.4);
}
.tg-toggle--on:hover .tg-toggle__track {
  background-color: #16a34a;
  border-color: #15803d;
}