/**
 * Candy Plugin for Video Conferencing based on XEP-0166: Jingle
 *
 * Copyright: 2015-2016 Andrey Prokopenko <andrey_prokopenko@terem.fr>
 */
#context-menu .jingle {
	background-image: url('telephone.png');
}

#jingle-videos {
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 0; 
  position: relative;
  transition: all 1s;
  margin-right: 200px;  
}

div.fullscreen {
  bottom: 0;
  left: 0;
  right: 0;
  top:0;	
  font-size: 0; 
  position: fixed;
  transition: all 1s;
  background: black;
  margin:0 0 0 0;
}

#jingle-remoteView {
  height:100vh;
  opacity: 0;
  align-self:center;
  transition: opacity 1s;
}

#jingle-remoteView.active {
  opacity: 1;
  z-index: 1;
}


#jingle-localView {
  border: 1px solid gray;
  bottom: 150px;
  right: 20px;
  max-height: 17%;
  max-width: 17%;
  opacity: 0;
  position: absolute;
  transition: opacity 1s;
}

#jingle-localView.active {
  opacity: 1;
  z-index: 2;
}

.hidden {
 display:none;
}


#jingle-icons {
  bottom: 77px;
  left: 6vw;
  position: absolute;
}

circle {
  fill: #666;
  fill-opacity: 0.6;
}

svg.on circle {
  fill-opacity: 0;
}

path.on {
  display: none;
}

path.off {
  display: block;
}

svg.on path.on {
  display: block;
}

svg.on path.off {
  display: none;
}

svg {
  box-shadow: 2px 2px 24px #444;
  border-radius: 48px;
  display: block;
  margin: 0 0 3vh 0;
  transform: translateX(calc(-6vw - 96px));
  transition: all .1s;
  transition-timing-function: ease-in-out;
}

svg:hover {
  box-shadow: 4px 4px 48px #666;
}

#jingle-icons.active svg {
  transform: translateX(0);
}

#mute-audio {
  transition: 40ms;
}

#mute-audio:hover,
#mute-audio.on {
  background: #407cf7;
}

#mute-audio:hover circle {
  fill: #407cf7;
}

#mute-video {
  transition: 120ms;
}

#mute-video:hover,
#mute-video.on {
  background: #407cf7;
}

#mute-video:hover circle {
  fill: #407cf7;
}

#switch-video {
  transition: 200ms;
}

#switch-video:hover {
  background: #407cf7;
}

#switch-video:hover circle {
  fill: #407cf7;
}

#fullscreen {
  transition: 280ms;
}

#fullscreen:hover,
#fullscreen.on {
  background: #407cf7;
}

#fullscreen:hover circle {
  fill: #407cf7;
}

#hangup {
  transition: 360ms;
}

#hangup:hover {
  background: #dd2c00;
}
#hangup:hover circle {
  fill: #dd2c00;
}