/* body{background:#ccc} */

.webrtc_holder{font:12px/14px arial;position:fixed;bottom:0;right:0;z-index:1}
.webrtc_holder .lbl_error{display:none;color:#c00;background:#fff;padding:2px 5px;border-radius:3px;white-space:nowrap;box-shadow:1px 1px 1px rgba(0,0,0,.2);font-weight:bold;position:absolute;right:20px;bottom:20px;z-index:5}
.webrtc_holder .btn_caller{display:block;width:60px;height:60px;background:#f00;border-radius:50%;box-shadow:1px 1px 2px rgba(0,0,0,.2),0 0 10px rgba(0,0,0,.1) inset;position:absolute;right:20px;bottom:20px;transition-duration:.3s;transition-timing-function:cubic-bezier(.17, .67, .46, 1.49);cursor:pointer}
.webrtc_holder .btn_caller img{width:60%;height:60%;margin:20%}
.webrtc_holder .btn_caller.main{display:none;visibility:hidden;z-index:2}
.webrtc_holder .btn_caller.sub{z-index:1;/*opacity:0*/}
.webrtc_holder .btn_caller.sub .lbl_tag,
.webrtc_holder .btn_caller.sub .lbl_status{display:none;padding:2px 5px;background:#fff;color:#f00;border-radius:3px;white-space:nowrap;box-shadow:1px 1px 1px rgba(0,0,0,.2);position:absolute;z-index:1}
.webrtc_holder .btn_caller.sub .lbl_tag{right:80%;bottom:80%;}
.webrtc_holder .btn_caller.sub .lbl_status{right:80%;bottom:10%;animation:beat .2s linear 0s infinite alternate;}
.webrtc_holder .btn_caller.sub.calling,
.webrtc_holder .btn_caller.sub.talking{animation: calling 0.7s infinite 0s alternate!important;z-index:3;transform:scale(1.3, 1.3);box-shadow:2px 2px 4px rgba(0,0,0,.4),0 0 10px rgba(0,0,0,.1) inset;}
.webrtc_holder .btn_caller.sub.calling .lbl_status,
.webrtc_holder .btn_caller.sub.talking .lbl_status{display:block}
.webrtc_holder .btn_caller.sub.calling{background:#c00}
.webrtc_holder .btn_caller.sub.talking{background:#00c}
.webrtc_holder.active .lbl_tag{display:block}
.webrtc_holder.active .btn_caller.main{opacity:.4;transform:scale(.6, .6)}
.webrtc_holder.active .btn_caller.sub{opacity:1;animation: ringing 2s linear infinite;}
.webrtc_holder.active .btn_caller.sub:nth-child(1){right:20px;bottom:20px;/*bottom:100px;*/}
.webrtc_holder.active .btn_caller.sub:nth-child(2){right:75px;bottom:75px;}
.webrtc_holder.active .btn_caller.sub:nth-child(3){right:100px;bottom:20px;}
.webrtc_holder.busy .lbl_tag{display:none}
@keyframes beat {
    from {opacity:1;transform:scale(1, 1)}
    to {opacity:.6;transform:scale(.9, .9)}
}

@keyframes calling {
    from {box-shadow: 0 0 10px  #000;}
    to {box-shadow: 0 0 30px #000;}
}

@keyframes ringing {
  0%   {transform: rotate(0deg);}
  65%  {transform: rotate(0deg);}
  70%  {transform: rotate(5deg);}
  75%  {transform: rotate(-5deg);}
  80%  {transform: rotate(5deg);}
  85%  {transform: rotate(-5deg);}
  90%  {transform: rotate(5deg);}
  95%  {transform: rotate(-5deg);}
  100% {transform: rotate(0deg);}
}