#teamVoiceButton {
  position: absolute;
  top: 8px;
  left: 52px;
  width: 35px;
  height: 35px;
  z-index: 120;
  border: 2px solid rgba(135, 235, 255, .95);
  border-radius: 50%;
  background: linear-gradient(#13cceb, #087fbb);
  box-shadow: 0 1px 4px #001f3f, inset 0 1px 2px rgba(255,255,255,.7);
  color: #06263a;
  font: bold 22px/31px Arial, sans-serif;
  text-align: center;
  cursor: pointer;
  user-select: none;
}

#teamVoiceButton::before { content: "\1F399"; }

#teamVoiceButton.off {
  border-color: rgba(255, 110, 110, .95);
  background: linear-gradient(#ef4e5d, #a5162b);
  color: #230006;
}

#teamVoiceButton.off::after {
  content: "";
  position: absolute;
  top: 15px;
  left: 4px;
  width: 25px;
  height: 4px;
  border-radius: 3px;
  background: #290006;
  transform: rotate(-45deg);
  box-shadow: 0 0 1px #fff;
}

#teamVoiceButton.connecting { animation: teamVoicePulse .8s infinite alternate; }

@keyframes teamVoicePulse {
  from { opacity: .55; }
  to { opacity: 1; }
}

.teamVoiceRemoteAudio { display: none; }

#teamVoiceStatus {
  position: absolute;
  top: 14px;
  left: 91px;
  z-index: 120;
  min-width: 16px;
  padding: 2px 5px;
  border-radius: 8px;
  background: rgba(0, 20, 35, .82);
  color: #fff;
  font: bold 10px/12px Arial, sans-serif;
  text-align: center;
  text-shadow: 0 1px 2px #000;
  pointer-events: none;
}

#teamVoiceStatus.connected { background: rgba(0, 125, 55, .9); }
#teamVoiceStatus.error { background: rgba(180, 25, 35, .92); }