canvas { display: block }
.list-group { margin-top: 7px }
.list-group-item { font-size: 16px }
.toolsmgn { margin-bottom: 10px;display:block }
.math_icon { height: 40px; padding: 4px }
.separator { height: 38px; vertical-align:top; }
.topbuts { pointer-events:all; min-height: 38px; padding: 0px; margin: 0px; border-bottom: 1px solid #DCDCDC; background: #ECECEC; position:relative; top: -38px; left: -5px; padding-left: 10px; width: 101%}
#tools_popover,#size_popover,#colours { white-space:nowrap }
#tools_popover { position:relative;top:4px}
#tools { vertical-align: text-bottom }
.fa-angle-down { margin-left:0px !important}
.fa-trans-oval { border-radius: 25px !important }
.fa-trans { color: transparent !important; background-image: repeating-linear-gradient(
  45deg,
  #bcbcbc,
  #bcbcbc 5px,
  #989898 5px,
  #989898 10px
); background-origin: content-box; background-clip: content-box; height: 30px; border-radius: 8px}
#preview_video,#myvideo { transform: scaleX(-1); -webkit-transform:scaleX(-1); -moz-transform:scaleX(-1); }
#toplogo { height: 38px; position: relative; top: -7px; left: 10px }
.iosbut, .iosbut>a, .iosbut>a>i { color: rgb(21, 125, 251); text-decoration:none; font-size: 21px }
.iosbut>a>i { padding-right: 10px; font-size: 30px; }
.iosbutbar { z-index: 20; padding: 8px; background-color: rgba(248,248,248,0.5) }
@media (min-device-width:320px)  and (max-device-width:700px)
{
    .iosbutbar { top: 65px !important }
}
@media (min-device-width:701px)  and (max-device-width:768px)
{
    .iosbutbar { top: 20px !important }
}
.actionsheet_button {     
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,.07);
    width: 250px;
    border-width: 1px;
    border-style: solid;
    background-color: #f5f5f5;
    border-color: rgba(0,0,0,.12);
    color: #606060;
    font-size: 14px;
    font-family: 'Helvetica Neue','Segoe UI',Helvetica,Verdana,sans-serif;
    padding: 5px;
    margin: 4px;
}
.popover { max-width:450px; pointer-events:all }
input[type=range]{display:inline;}
.bottom { bottom: 10px;}
.bottom.popover { bottom: initial }
.abs { position: absolute;}
html, body { overflow:hidden; }
html { font-size: 100% }
.top { top: 10px; }
.chatpopover { max-width:500px }
@media only screen and (max-width : 480px) {
    .chatpopover { max-width: 400px; }
}
.right { right: 10px; }
.controls { height: 50px;position:absolute;bottom:92px;pointer-events:none }
#zoomcontrols { position:absolute;bottom:100px;z-index:10;width:30px;pointer-events:all}
#pan { position:relative; right: 10px }
.left { left: 7px }
.colhoriz { left: 60px; }
.slider { width:80px !important; cursor:pointer;vertical-align:middle}
.mag_glass { font-size:18px !important;background-color: rgba(255,255,255,0.8);padding:4px;border-radius:3px;margin-left:-2px;margin-bottom:2px}
.zoomslider 
{ 
    height:100px;
    width:50px !important;
    margin-left: -15px;
    cursor:pointer;
    margin-right:0;
    writing-mode: vertical-lr;
    direction: rtl;
}
.indicator { height:30px;font-size:10px;display:inline-flex;pointer-events:all}
.icon
{
    pointer-events:all;
    width: 40px;
    height: 40px;
    cursor:pointer;
}
.fa { font-size: 30px; cursor:pointer; color:black}
.fa-dropdown { font-size: 20px !important }
.fa-small { font-size: 20px; cursor:pointer; color:black}
.autocursor { cursor:auto }
.grey { color: #000000; } 

.unreadbadge
{
    position: absolute;
    right: 20px;
    bottom: 20px;
    font-size: 22px;
    color: red;
    opacity: 0.7;
    pointer-events:none;
}
.badgetext
{
    position: absolute;
    right: 23px;
    bottom: 22px;
    font-size: 15px;
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    -webkit-font-smoothing: auto;
    color: white;
    pointer-events:none;
}
.badgetext_double_digit
{
    right: 21px;
}
.drawopts
{
    margin-left:5px;
    margin-right:5px;
    vertical-align: text-bottom;
}
.smallicon
{
    margin-right: 2px; 
    margin-left: 2px; 
    width: 30px;
    height: 30px;
    vertical-align:top;
    margin-top:4px;
    color: black;
}
.box
{
    padding: 6px;
    border-radius: 4px;
    box-shadow: 0 0 0 1px #bbb,0 1px 1px #aaa;
    background-color: rgba(225,225,225,0.8);
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
}
.bluebox { background-color: rgba(127,195,254,0.8); }
.blueborder { border: 2px solid rgba(127,195,254,0.8); }
.imgbox { padding: 4px }
.imgbottom { vertical-align: bottom }

.fa-topbaricon { min-width: 25px; margin: 2px; padding: 2px; }
.fa-topbaricon:hover { background: #dddddd; }
.fa-iconlist { min-width: 25px; margin: 2px; padding: 2px }
.fa-iconlist:hover { background: #dddddd; }
.smallicon:hover { background: #dddddd; }
.fa-selected { outline: #0000ff solid thin ; }
#zoom_text { display:none; color:red;position:absolute;right:0px;bottom:80px;z-index:10 }
.remote_text { word-break: break-word; background-color: #d6f2fd; color: black; padding: 10px; border-radius: 10px; font: 16px arial, sans-serif; margin: 8px 40px 8px 10px; overflow:hidden }
.our_text { word-break: break-word; background-color: #eaeff4; color: black; padding: 10px; border-radius: 10px; font: 16px arial, sans-serif; margin: 8px 10px 8px 40px; overflow:hidden }
.rounded { border-radius: 5px; }
i.fa.fa-slash::after {
  content: '\2571';
  position: absolute;
  left: -2px;
  top: 0px;
  font-weight: bold;
  text-shadow: 0.75px 0px 0px black;
  transform: scale(3,0.75) translate(0px, 1px) skewX(35deg);
}
i.fa.fa-desktop.fa-slash::after {
  left: 0px;
  top: -3px;
}
#janus_video_container { z-index: 1000 }
.topbuts .fa { font-size: 25px; margin: 4px;  }
.topbuts .smallicon { width: 25px; height: 25px; margin: 6px 4px 4px 4px }
.separator { margin-left: -4px; margin-right: -4px }
#publish { display:none }

.w3switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.w3switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.w3slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}
.w3slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
input:checked + .w3slider {
  background-color: #2196F3;
}
input:focus + .w3slider {
  box-shadow: 0 0 1px #2196F3;
}
input:checked + .w3slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
.w3slider.w3round {
  border-radius: 34px;
}
.w3slider.w3round:before {
  border-radius: 50%;
}
select { background-color: #e9e9ed; border: 1px solid #676774; border-radius: 3px }
select:not([size]):hover { background-color: #d0d0d7 }