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

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

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

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

.icon-fullscreen {
  background-image: url(../images/icons/fullscreen.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;
}

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

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

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

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

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

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

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

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

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

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

/*//////////////////line width icon//////////////////*/
.icon-linewidth-1 {
  background-image: url(../images/icons/linewidth1.png);
}

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

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

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

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

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

/*//////////////////markup color icon//////////////////*/
.icon-format-brown {
  background-image: url(../images/colors/formatbrown.png);
}

.icon-color-brown {
  background-image: url(../images/colors/colorbrown.png);
}

.icon-format-black {
  background-image: url(../images/colors/formatblack.png);
}

.icon-color-black {
  background-image: url(../images/colors/colorblack.png);
}

.icon-format-bluishviolet {
  background-image: url(../images/colors/formatbluishviolet.png);
}

.icon-color-bluishviolet {
  background-image: url(../images/colors/colorbluishviolet.png);
}

.icon-format-yellow {
  background-image: url(../images/colors/formatyellow.png);
}

.icon-color-yellow {
  background-image: url(../images/colors/coloryellow.png);
}

.icon-format-green {
  background-image: url(../images/colors/formatgreen.png);
}

.icon-color-green {
  background-image: url(../images/colors/colorgreen.png);
}

.icon-format-purple {
  background-image: url(../images/colors/formatpurple.png);
}

.icon-color-purple {
  background-image: url(../images/colors/colorpurple.png);
}

.icon-format-red {
  background-image: url(../images/colors/formatred.png);
}

.icon-color-red {
  background-image: url(../images/colors/colorred.png);
}

.icon-format-yellowgreen {
  background-image: url(../images/colors/formatyellowgreen.png);
}

.icon-color-yellowgreen {
  background-image: url(../images/colors/coloryellowgreen.png);
}

.icon-format-lavender {
  background-image: url(../images/colors/formatlavender.png);
}

.icon-color-lavender {
  background-image: url(../images/colors/colorlavender.png);
}

.icon-format-palepink {
  background-image: url(../images/colors/formatpalepink.png);
}

.icon-color-palepink {
  background-image: url(../images/colors/colorpalepink.png);
}

.icon-format-orange {
  background-image: url(../images/colors/formatorange.png);
}

.icon-color-orange {
  background-image: url(../images/colors/colororange.png);
}

.icon-format-shockingpink {
  background-image: url(../images/colors/formatshockingpink.png);
}

.icon-color-shockingpink {
  background-image: url(../images/colors/colorshockingpink.png);
}

.icon-format-blue {
  background-image: url(../images/colors/formatblue.png);
}

.icon-color-blue {
  background-image: url(../images/colors/colorblue.png);
}

.icon-format-skyblue {
  background-image: url(../images/colors/formatskyblue.png);
}

.icon-color-skyblue {
  background-image: url(../images/colors/colorskyblue.png);
}

.icon-format-gray {
  background-image: url(../images/colors/formatgray.png);
}

.icon-color-gray {
  background-image: url(../images/colors/colorgray.png);
}

.icon-format-white {
  background-image: url(../images/colors/formatwhite.png);
}

.icon-color-white {
  background-image: url(../images/colors/colorwhite.png);
}

.icon-360 {
  width: 64px;
  height: auto;
  margin-left: 5px;
  top: auto;
  bottom: 5px;
  z-index: 1;
}