/*////// icons ///////////////////*/
.icon-micoff {
  background-image: url(../images/icons/micoff.png);
}

.icon-micon {
  background-image: url(../images/icons/micon.png);
}

.icon-speakeroff {
  background-image: url(../images/icons/speakeroff.png);
}

.icon-speakeron {
  background-image: url(../images/icons/speakeron.png);
}

/*////// device icons ///////////////////////////*/
#deviceIcons-div:not(#videos) {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 25px;
  margin: auto;
  width: max-content;
  width: -moz-max-content;
  width: -webkit-max-content;
  height: 36px!important;
  background: transparent;
  z-index: 2147483647;
  opacity: 0.8;
  border: 0px!important;
}

#deviceIcons-div .icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-position:center;
  background-repeat:no-repeat;
  vertical-align: middle;
  background-size: contain;
}

.deviceIcons-btn {
  display: inline-block;
  border-radius: 20px;
  width: 36px;
  height: 36px;
  padding: 4px;
  background-color: #242424;
  outline: none;
  line-height: normal;
  overflow: visible;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
}


.deviceIcons-div-pip {
  bottom: 14px!important;
}

.deviceIcons-btn-pip {
  width: 26px;
  height: 26px;
}

.deviceIcons-icon-pip {
  width: 16px!important;
  height: 16px!important;
}

.deviceIcons-btn::-moz-focus-inner, .deviceIcons-btn::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.deviceIcons-btn:hover {
  outline: none;
  background-color: #0062FE;
}

.deviceIcons-btn.muted {
  background-color: #FF0000;
}

.deviceIcons-btn.selected {
  background-color: #0062FE;
  color: white;
}

.deviceIcons-btn.disabled {
  opacity: .5;
  pointer-events: none;
}

.deviceIcons-btn.noselect {
  pointer-events: none;
}

/*////// icons CSS start ////////////////////////*/
/*#icons-l:not(#videos){*/
#icons-l {
  position: relative;
  top: -100%;
  height: 100%;
  width: 64px;
  border-style: none;
}

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

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

/* on icons are hidden by default */
path.on {
  display: none;
}

/* off icons are displayed by default */
path.off {
  display: block;
}

/* on icons are displayed when parent svg has class 'on' */
svg.on path.on {
  display: block;
}

/* off icons are hidden when parent svg has class 'on' */
svg.on path.off {
  display: none;
}

svg {
  border-radius: 32px;
  box-shadow: 2px 2px 24px #444;
  /*display: block;*/
  display: inline-block;
  margin: 7px 7px 7px 7px;
  /*transform: translateX(calc(-6vw - 96px));*/
  transform: translateY(10vw);
  transition: all .1s;
  transition-timing-function: ease-in-out;
}

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

#icons.active svg {
  /*transform: translateX(0);*/
  transform: translateY(0);
}

#mute-audio {
  transition: 40ms;
  margin-left: calc(50% - 40px);
  /*margin-left: calc(50% - 17px);*/
}

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

#mute-audio.on {
  background: #dd2c00;
}

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

#mute-video {
  /*transition: 120ms;*/
  transition: 40ms;
}

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

#mute-video.on {
  background: #dd2c00;
}

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